import type { ReactNode } from "react";
import { z } from "zod";
import type { GenerativeUILibrary } from "../types";
import { ICON_NAMES } from "../ir";
const ICON_SIZE_TOKENS = ["sm", "md", "lg"] as const;
const ICON_SIZE_PX: Record<(typeof ICON_SIZE_TOKENS)[number], number> = {
sm: 14,
md: 16,
lg: 20,
};
const ICON_GLYPHS: Record<(typeof ICON_NAMES)[number], ReactNode> = {
sun: (
<>
),
moon: ,
cloud: (
),
rain: (
<>
),
snow: (
<>
),
wind: (
<>
),
play: ,
pause: (
<>
),
check: ,
x: (
<>
),
star: (
),
heart: (
),
"arrow-right": ,
"arrow-up-right": ,
"chevron-right": ,
calendar: (
<>
),
clock: (
<>
),
"map-pin": (
<>
),
plane: (
<>
),
truck: (
<>
),
"credit-card": (
<>
),
user: (
<>
),
search: (
<>
),
bell: (
<>
),
};
export const iconVocabulary = {
Icon: {
description:
"A small line icon from the built-in set. `size` controls the rendered pixel size.",
properties: z.object({
name: z.enum(ICON_NAMES).describe("Which built-in icon to render."),
size: z
.enum(ICON_SIZE_TOKENS)
.optional()
.describe("Icon size; defaults to `md` (16px)."),
}),
render: ({ name, size }) => {
const glyph = ICON_GLYPHS[name as keyof typeof ICON_GLYPHS];
if (!glyph) return null;
const px = ICON_SIZE_PX[(size as keyof typeof ICON_SIZE_PX) ?? "md"];
return (
);
},
},
} satisfies GenerativeUILibrary;