import { z } from "zod"
import type { WidgetGenerator } from "@/widgets/types"
import { theme } from "@/widgets/utils/theme"
export const PeriodicTableWidgetPropsSchema = z
.object({
type: z.literal("periodicTable"),
alt: z
.string()
.min(1)
.describe(
"required alternative text describing the image for accessibility. this should be descriptive and meaningful."
),
// Only caption is configurable; width/height are not exposed
caption: z
.string()
.nullable()
.transform((val) => (val === "null" || val === "NULL" ? null : val))
.describe("an optional caption to display below the image.")
})
.strict()
const PERIODIC_TABLE_SVG = `
`
const PERIODIC_TABLE_SVG_BASE64 =
Buffer.from(PERIODIC_TABLE_SVG).toString("base64")
export const generatePeriodicTable: WidgetGenerator<
typeof PeriodicTableWidgetPropsSchema
> = async (props) => {
const { alt, caption } = props
const containerStyles = "display: inline-block; text-align: center;"
// Always use default intrinsic SVG sizing; do not allow external width/height overrides
const imgStyles = "display: block;"
const captionStyles = "font-size: 0.9em; color: #555; margin-top: 4px;"
const dataUrl = `data:image/svg+xml;base64,${PERIODIC_TABLE_SVG_BASE64}`
const imgTag = `
`
const captionTag = caption
? `${caption}
`
: ""
return `${imgTag}${captionTag}
`
}
export type PeriodicTableWidgetProps = z.infer<
typeof PeriodicTableWidgetPropsSchema
>