@tuuject/koi-react 0.0.0-stage → 0.1.0

package/dist/panda/preset.mjs

@@ -0,0 +1,3907 @@
+//#region ../../node_modules/.pnpm/@pandacss+dev@2.1.2_@emnapi+core@1.11.3_@emnapi+runtime@1.11.3_postcss@8.5.29/node_modules/@pandacss/dev/dist/chunk-5IG6UNUZ.js
+function defineConfig(config) {
+	return Object.assign(config, { name: "__panda.config__" });
+}
+function defineRecipe(config) {
+	return config;
+}
+function defineSlotRecipe(config) {
+	return config;
+}
+function defineGlobalStyles(definition) {
+	return definition;
+}
+function defineStyles(definition) {
+	return definition;
+}
+//#endregion
+//#region ../tokens/dist/panda-preset.js
+const koiPreset = {
+	"name": "@tuuject/koi-tokens",
+	"conditions": { "extend": {
+		"dark": "[data-theme=dark] &",
+		"light": "[data-theme=light] &",
+		"fontChill": "[data-font=chill] &",
+		"paletteRose": "[data-palette=rose] &"
+	} },
+	"theme": { "extend": {
+		"tokens": {
+			"colors": {
+				"secondary": {
+					"50": {
+						"value": "oklch(98.5% 0.002 247.839)",
+						"description": "Neutral secondary, step 50: Tailwind gray-50. 1.0:1 on white, 19.3:1 on `secondary-950`."
+					},
+					"100": {
+						"value": "oklch(96.7% 0.003 264.542)",
+						"description": "Neutral secondary, step 100: Tailwind gray-100. 1.1:1 on white, 18.3:1 on `secondary-950`."
+					},
+					"200": {
+						"value": "oklch(92.8% 0.006 264.531)",
+						"description": "Neutral secondary, step 200: Tailwind gray-200. 1.2:1 on white, 16.3:1 on `secondary-950`."
+					},
+					"300": {
+						"value": "oklch(87.2% 0.01 258.338)",
+						"description": "Neutral secondary, step 300: Tailwind gray-300. 1.5:1 on white, 13.7:1 on `secondary-950`."
+					},
+					"400": {
+						"value": "oklch(70.7% 0.022 261.325)",
+						"description": "Neutral secondary, step 400: Tailwind gray-400. 2.6:1 on white, 7.7:1 on `secondary-950`."
+					},
+					"500": {
+						"value": "oklch(55.1% 0.027 264.364)",
+						"description": "Neutral secondary, step 500: Tailwind gray-500. 4.8:1 on white, 4.2:1 on `secondary-950`."
+					},
+					"600": {
+						"value": "oklch(44.6% 0.03 256.802)",
+						"description": "Neutral secondary, step 600: Tailwind gray-600. 7.6:1 on white, 2.7:1 on `secondary-950`."
+					},
+					"700": {
+						"value": "oklch(37.3% 0.034 259.733)",
+						"description": "Neutral secondary, step 700: Tailwind gray-700. 10.3:1 on white, 2.0:1 on `secondary-950`."
+					},
+					"800": {
+						"value": "oklch(27.8% 0.033 256.848)",
+						"description": "Neutral secondary, step 800: Tailwind gray-800. 14.7:1 on white, 1.4:1 on `secondary-950`."
+					},
+					"900": {
+						"value": "oklch(21% 0.034 264.665)",
+						"description": "Neutral secondary, step 900: Tailwind gray-900. 17.7:1 on white, 1.1:1 on `secondary-950`."
+					},
+					"950": {
+						"value": "oklch(13% 0.028 261.692)",
+						"description": "Neutral secondary, step 950: Tailwind gray-950. 20.1:1 on white, 1.0:1 on `secondary-950`. The dark-theme page ground (`page-bg`)."
+					}
+				},
+				"warning": {
+					"50": {
+						"value": "oklch(98.7% 0.026 102.212)",
+						"description": "Warning, step 50: Tailwind yellow-50. 1.0:1 on white, 19.4:1 on `secondary-950`."
+					},
+					"100": {
+						"value": "oklch(97.3% 0.071 103.193)",
+						"description": "Warning, step 100: Tailwind yellow-100. 1.1:1 on white, 18.7:1 on `secondary-950`."
+					},
+					"200": {
+						"value": "oklch(94.5% 0.129 101.54)",
+						"description": "Warning, step 200: Tailwind yellow-200. 1.2:1 on white, 17.3:1 on `secondary-950`."
+					},
+					"300": {
+						"value": "oklch(90.5% 0.182 98.111)",
+						"description": "Warning, step 300: Tailwind yellow-300. 1.3:1 on white, 15.2:1 on `secondary-950`."
+					},
+					"400": {
+						"value": "oklch(85.2% 0.199 91.936)",
+						"description": "Warning, step 400: Tailwind yellow-400. 1.6:1 on white, 12.8:1 on `secondary-950`."
+					},
+					"500": {
+						"value": "oklch(79.5% 0.184 86.047)",
+						"description": "Warning, step 500: Tailwind yellow-500. 1.9:1 on white, 10.5:1 on `secondary-950`."
+					},
+					"600": {
+						"value": "oklch(68.1% 0.162 75.834)",
+						"description": "Warning, step 600: Tailwind yellow-600. 2.9:1 on white, 6.9:1 on `secondary-950`."
+					},
+					"700": {
+						"value": "oklch(55.4% 0.135 66.442)",
+						"description": "Warning, step 700: Tailwind yellow-700. 4.9:1 on white, 4.1:1 on `secondary-950`."
+					},
+					"800": {
+						"value": "oklch(47.6% 0.114 61.907)",
+						"description": "Warning, step 800: Tailwind yellow-800. 6.9:1 on white, 2.9:1 on `secondary-950`."
+					},
+					"900": {
+						"value": "oklch(42.1% 0.095 57.708)",
+						"description": "Warning, step 900: Tailwind yellow-900. 8.7:1 on white, 2.3:1 on `secondary-950`."
+					},
+					"950": {
+						"value": "oklch(28.6% 0.066 53.813)",
+						"description": "Warning, step 950: Tailwind yellow-950. 14.6:1 on white, 1.4:1 on `secondary-950`."
+					}
+				},
+				"error": {
+					"50": {
+						"value": "oklch(97.1% 0.013 17.38)",
+						"description": "Error, step 50: Tailwind red-50. 1.1:1 on white, 18.4:1 on `secondary-950`."
+					},
+					"100": {
+						"value": "oklch(93.6% 0.032 17.717)",
+						"description": "Error, step 100: Tailwind red-100. 1.2:1 on white, 16.5:1 on `secondary-950`."
+					},
+					"200": {
+						"value": "oklch(88.5% 0.062 18.334)",
+						"description": "Error, step 200: Tailwind red-200. 1.4:1 on white, 13.9:1 on `secondary-950`."
+					},
+					"300": {
+						"value": "oklch(80.8% 0.114 19.571)",
+						"description": "Error, step 300: Tailwind red-300. 1.9:1 on white, 10.5:1 on `secondary-950`."
+					},
+					"400": {
+						"value": "oklch(70.4% 0.191 22.216)",
+						"description": "Error, step 400: Tailwind red-400. 2.9:1 on white, 7.0:1 on `secondary-950`."
+					},
+					"500": {
+						"value": "oklch(63.7% 0.237 25.331)",
+						"description": "Error, step 500: Tailwind red-500. 3.8:1 on white, 5.3:1 on `secondary-950`."
+					},
+					"600": {
+						"value": "oklch(57.7% 0.245 27.325)",
+						"description": "Error, step 600: Tailwind red-600. 4.8:1 on white, 4.2:1 on `secondary-950`."
+					},
+					"700": {
+						"value": "oklch(50.5% 0.213 27.518)",
+						"description": "Error, step 700: Tailwind red-700. 6.4:1 on white, 3.1:1 on `secondary-950`."
+					},
+					"800": {
+						"value": "oklch(44.4% 0.177 26.899)",
+						"description": "Error, step 800: Tailwind red-800. 8.4:1 on white, 2.4:1 on `secondary-950`."
+					},
+					"900": {
+						"value": "oklch(39.6% 0.141 25.723)",
+						"description": "Error, step 900: Tailwind red-900. 10.1:1 on white, 2.0:1 on `secondary-950`."
+					},
+					"950": {
+						"value": "oklch(25.8% 0.092 26.042)",
+						"description": "Error, step 950: Tailwind red-950. 16.1:1 on white, 1.2:1 on `secondary-950`."
+					}
+				},
+				"white": {
+					"value": "#ffffff",
+					"description": "Light page ground; text in dark theme; text on buttons."
+				},
+				"black": {
+					"value": "#000000",
+					"description": "Text in light theme."
+				}
+			},
+			"spacing": {
+				"1": {
+					"value": "4px",
+					"description": "Icon-to-label gap inside badges; Tailwind's unit."
+				},
+				"2": {
+					"value": "8px",
+					"description": "Gap between an icon and its label; between a label and its control."
+				},
+				"3": {
+					"value": "12px",
+					"description": "Inner padding of compact containers (tooltips, tab track); stack gap in forms' option lists."
+				},
+				"4": {
+					"value": "16px",
+					"description": "Gap between fields in a form; Alert padding."
+				},
+				"5": {
+					"value": "20px",
+					"description": "Content padding on mobile (the blog's `p-5`)."
+				},
+				"6": {
+					"value": "24px",
+					"description": "Card and Dialog padding; content padding from md up (`md:p-6`)."
+				},
+				"8": {
+					"value": "32px",
+					"description": "Gap between groups and between cards (the blog's `gap-8`)."
+				},
+				"10": {
+					"value": "40px",
+					"description": "Space between list items on mobile (`my-10`)."
+				},
+				"12": {
+					"value": "48px",
+					"description": "Space between list items from md up (`md:my-12`)."
+				},
+				"16": {
+					"value": "64px",
+					"description": "Gap between page sections."
+				}
+			},
+			"radii": {
+				"sm": {
+					"value": "6px",
+					"description": "Checkbox boxes."
+				},
+				"lg": {
+					"value": "8px",
+					"description": "Buttons and icon buttons with `shape=\"rounded\"` (Tailwind `rounded-lg`); tooltips; images inside text."
+				},
+				"xl": {
+					"value": "12px",
+					"description": "Inputs, textareas, selects, alerts, square avatars (the blog's friend avatars)."
+				},
+				"2xl": {
+					"value": "16px",
+					"description": "Spare step between fields (12px) and panels (24px); not used by the components today."
+				},
+				"panel": {
+					"value": "24px",
+					"description": "Cards and toasts (the blog's `.koi-squircle-md`; 48px squircle where `corner-shape: squircle` is supported)."
+				},
+				"dialog": {
+					"value": "32px",
+					"description": "Dialog panels: `radius-lg` (8px) of the footer buttons plus `space-6` (24px) padding, so the panel corner and the button corner share a center and read as concentric."
+				},
+				"bar": {
+					"value": "36px",
+					"description": "Floating bars: the blog's nav pill (`rounded-[2.25rem]`)."
+				},
+				"full": {
+					"value": "9999px",
+					"description": "Buttons, icon buttons, badges, tags, switches, tab tracks, round avatars."
+				}
+			},
+			"sizes": {
+				"control-sm": {
+					"value": "28px",
+					"description": "Small buttons, inputs, tags, avatars."
+				},
+				"control-md": {
+					"value": "36px",
+					"description": "Default height of buttons, inputs, selects, tab buttons and NavMenu items."
+				},
+				"control-lg": {
+					"value": "44px",
+					"description": "Large buttons (the blog's pagination pills), the tab track, the NavMenu logo box, large avatars."
+				},
+				"content-max": {
+					"value": "56rem",
+					"description": "Max width of a reading column (`max-w-4xl`)."
+				},
+				"icon": {
+					"value": "16px",
+					"description": "Icons beside 14px text: md/lg controls, alerts, toasts, NavMenu."
+				},
+				"icon-sm": {
+					"value": "14px",
+					"description": "Icons in small controls and tags."
+				},
+				"icon-xs": {
+					"value": "12px",
+					"description": "Icons beside 12px text: the checkbox tick, a field's error icon."
+				},
+				"icon-lg": {
+					"value": "18px",
+					"description": "Icons beside 16px titles: toasts, the dialog's close button."
+				}
+			},
+			"shadows": {
+				"raised": {
+					"value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+					"description": "The active tab and switch thumbs (`shadow-sm`). Not used on buttons, which are flat."
+				},
+				"float": {
+					"value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+					"description": "Things floating over the page: dialogs, toasts, the nav pill (`shadow-2xl`)."
+				},
+				"float-soft": {
+					"value": "0 25px 50px -12px rgba(0, 0, 0, 0.15)",
+					"description": "Docked floating chrome (the nav bar once scrolled)."
+				}
+			},
+			"blurs": {
+				"panel": {
+					"value": "24px",
+					"description": "Behind `surface-glass` and `backdrop` (`backdrop-blur-xl`)."
+				},
+				"float": {
+					"value": "40px",
+					"description": "Behind `surface-glass-tint` (`backdrop-blur-2xl`)."
+				}
+			},
+			"easings": {
+				"spring": { "value": "cubic-bezier(.47,1.64,.41,.8)" },
+				"out": { "value": "cubic-bezier(0, 0, .2, 1)" }
+			},
+			"durations": {
+				"fast": { "value": "150ms" },
+				"overlay": { "value": "200ms" },
+				"check": { "value": "250ms" },
+				"dialog": { "value": "300ms" },
+				"spring": { "value": "400ms" },
+				"shimmer": { "value": "1.6s" },
+				"spin": { "value": "800ms" },
+				"spin-slow": { "value": "1.6s" },
+				"indeterminate": { "value": "1.2s" },
+				"pulse": { "value": "2s" },
+				"ripple": { "value": "600ms" }
+			},
+			"zIndex": {
+				"dialog": {
+					"value": 900,
+					"description": "Dialog backdrop and popup."
+				},
+				"popup": {
+					"value": 950,
+					"description": "Panels opened from a trigger (SelectPanel), so they work inside a Dialog."
+				},
+				"toast": {
+					"value": 1e3,
+					"description": "The toast stack, above everything else."
+				},
+				"tooltip": {
+					"value": 1e3,
+					"description": "Tooltips: above dialogs and popups."
+				}
+			}
+		},
+		"semanticTokens": {
+			"colors": {
+				"page-bg": {
+					"value": {
+						"base": "{colors.white}",
+						"_dark": "{colors.secondary.950}"
+					},
+					"description": "Page background. The blog's body `bg-white` / `dark:bg-gray-950`."
+				},
+				"surface": {
+					"value": {
+						"base": "{colors.white}",
+						"_dark": "{colors.secondary.900}"
+					},
+					"description": "Cards, inputs, dialogs, the active tab: anything that sits on `page-bg` as its own object."
+				},
+				"surface-muted": {
+					"value": {
+						"base": "{colors.secondary.100}",
+						"_dark": "{colors.secondary.800}"
+					},
+					"description": "Quiet fills: tab track, progress track, ghost-button hover, disabled inputs."
+				},
+				"surface-glass": {
+					"value": {
+						"base": "rgba(255, 255, 255, 0.8)",
+						"_dark": "color-mix(in oklch, {colors.secondary.950} 70%, transparent)"
+					},
+					"description": "Koi's frosted panel (`bg-white/80 dark:bg-gray-950/70`), always with `blur-panel`. Use over imagery or color: the glass Card."
+				},
+				"surface-glass-tint": {
+					"value": {
+						"base": "rgba(255, 255, 255, 0.8)",
+						"_dark": "color-mix(in oklch, {colors.primary.950} 80%, transparent)"
+					},
+					"description": "Floating chrome: toasts and the blog's nav pill (`dark:bg-primary-950/80`), with `blur-float`."
+				},
+				"backdrop": {
+					"value": {
+						"base": "rgba(0, 0, 0, 0.4)",
+						"_dark": "rgba(0, 0, 0, 0.6)"
+					},
+					"description": "Dimmed layer behind a Dialog, with `blur-panel`."
+				},
+				"tooltip-bg": {
+					"value": {
+						"base": "{colors.secondary.900}",
+						"_dark": "{colors.secondary.100}"
+					},
+					"description": "Tooltip fill: inverted against the page."
+				},
+				"tooltip-text": {
+					"value": {
+						"base": "{colors.white}",
+						"_dark": "{colors.black}"
+					},
+					"description": "Text on `tooltip-bg`."
+				},
+				"text": {
+					"value": {
+						"base": "{colors.black}",
+						"_dark": "{colors.white}"
+					},
+					"description": "Body and heading text on `page-bg`, `surface`, `surface-muted` and the glass surfaces."
+				},
+				"text-muted": {
+					"value": {
+						"base": "rgba(0, 0, 0, 0.6)",
+						"_dark": "rgba(255, 255, 255, 0.6)"
+					},
+					"description": "Secondary text: help text, dates, descriptions, inactive tabs. The blog's `opacity-60`. Reads on `page-bg`, `surface` and `surface-muted`."
+				},
+				"text-disabled": {
+					"value": {
+						"base": "rgba(0, 0, 0, 0.38)",
+						"_dark": "rgba(255, 255, 255, 0.38)"
+					},
+					"description": "Disabled labels and values (exempt from contrast minimums). Never for content."
+				},
+				"text-brand": {
+					"value": {
+						"base": "{colors.primary.700}",
+						"_dark": "{colors.primary.300}"
+					},
+					"description": "Brand-colored text and icons: ghost buttons, active page links, tab focus. On `page-bg`, `surface`, `surface-muted`."
+				},
+				"border": {
+					"value": {
+						"base": "{colors.secondary.200}",
+						"_dark": "{colors.secondary.800}"
+					},
+					"description": "Decorative edges: card outlines, dividers, tag outlines. Not for control edges (too faint)."
+				},
+				"border-control": {
+					"value": "{colors.secondary.500}",
+					"description": "Edges of inputs, selects, checkboxes, radios and the off Switch track. Meets 3:1 on `surface` in both themes."
+				},
+				"border-control-hover": {
+					"value": {
+						"base": "{colors.secondary.600}",
+						"_dark": "{colors.secondary.400}"
+					},
+					"description": "Hovered control edge."
+				},
+				"divider": {
+					"value": {
+						"base": "rgba(0, 0, 0, 0.1)",
+						"_dark": "rgba(255, 255, 255, 0.1)"
+					},
+					"description": "Hairline separators (the blog's `border-black/10 dark:border-white/10`)."
+				},
+				"focus-ring": {
+					"value": {
+						"base": "{colors.primary.600}",
+						"_dark": "{colors.primary.400}"
+					},
+					"description": "2px focus outline on every interactive element, offset 2px (controls: drawn on the edge)."
+				},
+				"action": {
+					"value": "{colors.primary.700}",
+					"description": "Primary buttons, current page, checked controls' fill: the blog's pill button (`bg-primary-700`)."
+				},
+				"action-hover": {
+					"value": "{colors.primary.800}",
+					"description": "Hovered `action`. Darker than the blog's `primary-500` hover so white text stays readable."
+				},
+				"on-action": {
+					"value": "{colors.white}",
+					"description": "Text and icons on `action`, `action-hover`, `control-checked`, `danger`."
+				},
+				"action-subtle": {
+					"value": {
+						"base": "{colors.primary.100}",
+						"_dark": "{colors.primary.950}"
+					},
+					"description": "Secondary buttons and avatar fallbacks."
+				},
+				"action-subtle-hover": {
+					"value": {
+						"base": "{colors.primary.200}",
+						"_dark": "{colors.primary.900}"
+					},
+					"description": "Hovered `action-subtle`."
+				},
+				"on-action-subtle": {
+					"value": {
+						"base": "{colors.primary.800}",
+						"_dark": "{colors.primary.200}"
+					},
+					"description": "Text on `action-subtle`."
+				},
+				"control-checked": {
+					"value": {
+						"base": "{colors.primary.700}",
+						"_dark": "{colors.primary.600}"
+					},
+					"description": "Fill of a checked Checkbox, Radio dot and on Switch track; Progress bar."
+				},
+				"link": {
+					"value": {
+						"base": "{colors.accent.700}",
+						"_dark": "{colors.accent.400}"
+					},
+					"description": "Inline text links, with a dashed `link-border` underline. One step darker than the blog's `accent-600` so it reads at body size."
+				},
+				"link-border": {
+					"value": {
+						"base": "{colors.accent.300}",
+						"_dark": "{colors.accent.800}"
+					},
+					"description": "Dashed underline under `link` (the blog's `prose-a:border-dashed`)."
+				},
+				"link-hover-bg": {
+					"value": {
+						"base": "{colors.accent.100}",
+						"_dark": "{colors.accent.950}"
+					},
+					"description": "Tint behind a hovered link (the blog's `.prose a:hover`)."
+				},
+				"link-hover-border": {
+					"value": {
+						"base": "{colors.accent.500}",
+						"_dark": "{colors.accent.600}"
+					},
+					"description": "Underline of a hovered link."
+				},
+				"danger": {
+					"value": "{colors.error.600}",
+					"description": "Destructive buttons."
+				},
+				"danger-hover": {
+					"value": "{colors.error.700}",
+					"description": "Hovered `danger`."
+				},
+				"info-surface": {
+					"value": {
+						"base": "{colors.primary.50}",
+						"_dark": "{colors.primary.950}"
+					},
+					"description": "Info Alert fill."
+				},
+				"info-border": {
+					"value": {
+						"base": "{colors.primary.200}",
+						"_dark": "{colors.primary.800}"
+					},
+					"description": "Info Alert edge."
+				},
+				"info-text": {
+					"value": {
+						"base": "{colors.primary.800}",
+						"_dark": "{colors.primary.200}"
+					},
+					"description": "Text and icon on `info-surface`."
+				},
+				"warning-surface": {
+					"value": {
+						"base": "{colors.warning.50}",
+						"_dark": "{colors.warning.950}"
+					},
+					"description": "Warning Alert and Badge fill."
+				},
+				"warning-border": {
+					"value": {
+						"base": "{colors.warning.300}",
+						"_dark": "{colors.warning.800}"
+					},
+					"description": "Warning Alert edge."
+				},
+				"warning-text": {
+					"value": {
+						"base": "{colors.warning.800}",
+						"_dark": "{colors.warning.200}"
+					},
+					"description": "Text and icon on `warning-surface`."
+				},
+				"error-surface": {
+					"value": {
+						"base": "{colors.error.50}",
+						"_dark": "{colors.error.950}"
+					},
+					"description": "Error Alert and Badge fill."
+				},
+				"error-border": {
+					"value": {
+						"base": "{colors.error.300}",
+						"_dark": "{colors.error.800}"
+					},
+					"description": "Error Alert edge."
+				},
+				"error-text": {
+					"value": {
+						"base": "{colors.error.700}",
+						"_dark": "{colors.error.300}"
+					},
+					"description": "Text and icon on `error-surface`; Field error messages on `page-bg` / `surface`."
+				},
+				"error-control": {
+					"value": {
+						"base": "{colors.error.600}",
+						"_dark": "{colors.error.400}"
+					},
+					"description": "Edge of an invalid input."
+				},
+				"highlight": {
+					"value": {
+						"base": "{colors.accent.100}",
+						"_dark": "{colors.accent.950}"
+					},
+					"description": "Accent Badge fill: Koi's amber in a small dose."
+				},
+				"on-highlight": {
+					"value": {
+						"base": "{colors.accent.800}",
+						"_dark": "{colors.accent.200}"
+					},
+					"description": "Text on `highlight`."
+				},
+				"nav-item-text": {
+					"value": {
+						"base": "{colors.secondary.700}",
+						"_dark": "{colors.secondary.300}"
+					},
+					"description": "NavMenu items at rest, on page-bg, surface and the nav hover/active fills."
+				},
+				"nav-item-hover": {
+					"value": {
+						"base": "{colors.secondary.50}",
+						"_dark": "{colors.secondary.900}"
+					},
+					"description": "Hovered NavMenu item."
+				},
+				"table-row-hover": {
+					"value": {
+						"base": "{colors.secondary.50}",
+						"_dark": "color-mix(in oklch, {colors.secondary.800} 50%, transparent)"
+					},
+					"description": "Hovered table row. A step lighter than `surface-muted`, the ghost-button hover fill, so a hovered button still stands out in a hovered row."
+				},
+				"nav-item-active": {
+					"value": {
+						"base": "{colors.secondary.100}",
+						"_dark": "{colors.secondary.800}"
+					},
+					"description": "The current NavMenu item, with bold `text`."
+				},
+				"skeleton": {
+					"value": {
+						"base": "{colors.secondary.100}",
+						"_dark": "{colors.secondary.800}"
+					},
+					"description": "Skeleton placeholder fill. Reads on `page-bg` and `surface`."
+				},
+				"skeleton-highlight": {
+					"value": {
+						"base": "{colors.secondary.50}",
+						"_dark": "{colors.secondary.700}"
+					},
+					"description": "The shimmer band that sweeps across Skeleton placeholders."
+				},
+				"prose-text": {
+					"value": {
+						"base": "{colors.secondary.700}",
+						"_dark": "{colors.secondary.300}"
+					},
+					"description": "Running text inside Prose (the blog's `prose-slate` body, a step softer than `text`). Headings, bold and inline code inside Prose stay `text`."
+				},
+				"code-block-bg": {
+					"value": "{colors.secondary.800}",
+					"description": "Code block fill inside Prose: dark in both themes, as in the blog's `prose-slate`. Dark theme lifts it to the 800 step instead of Tailwind's `black / 0.5`, which vanished against `page-bg`."
+				},
+				"code-block-text": {
+					"value": {
+						"base": "{colors.secondary.200}",
+						"_dark": "{colors.secondary.300}"
+					},
+					"description": "Text on `code-block-bg`."
+				},
+				"primary-solid": {
+					"value": "{colors.action}",
+					"description": "Solid Button fill, color=\"primary\"."
+				},
+				"primary-solid-hover": {
+					"value": "{colors.action-hover}",
+					"description": "Hovered solid fill, color=\"primary\"."
+				},
+				"on-primary-solid": {
+					"value": "{colors.on-action}",
+					"description": "Text and icons on the solid fill, color=\"primary\"."
+				},
+				"primary-soft": {
+					"value": "{colors.action-subtle}",
+					"description": "Soft Button fill; also the hover fill of outline and ghost, color=\"primary\"."
+				},
+				"primary-soft-hover": {
+					"value": "{colors.action-subtle-hover}",
+					"description": "Hovered soft fill, color=\"primary\"."
+				},
+				"on-primary-soft": {
+					"value": "{colors.on-action-subtle}",
+					"description": "Text on the soft fill, color=\"primary\"."
+				},
+				"primary-fg": {
+					"value": "{colors.text-brand}",
+					"description": "Text and icons of outline and ghost Buttons, color=\"primary\"."
+				},
+				"primary-edge": {
+					"value": {
+						"base": "{colors.primary.600}",
+						"_dark": "{colors.primary.400}"
+					},
+					"description": "Outline Button edge (3:1+ on page-bg and surface), color=\"primary\"."
+				},
+				"accent-solid": {
+					"value": "{colors.accent.400}",
+					"description": "Solid Button fill, color=\"accent\"."
+				},
+				"accent-solid-hover": {
+					"value": "{colors.accent.300}",
+					"description": "Hovered solid fill, color=\"accent\"."
+				},
+				"on-accent-solid": {
+					"value": "{colors.accent.950}",
+					"description": "Text and icons on the solid fill, color=\"accent\"."
+				},
+				"accent-soft": {
+					"value": {
+						"base": "{colors.accent.100}",
+						"_dark": "{colors.accent.950}"
+					},
+					"description": "Soft Button fill; also the hover fill of outline and ghost, color=\"accent\"."
+				},
+				"accent-soft-hover": {
+					"value": {
+						"base": "{colors.accent.200}",
+						"_dark": "{colors.accent.900}"
+					},
+					"description": "Hovered soft fill, color=\"accent\"."
+				},
+				"on-accent-soft": {
+					"value": {
+						"base": "{colors.accent.800}",
+						"_dark": "{colors.accent.200}"
+					},
+					"description": "Text on the soft fill, color=\"accent\"."
+				},
+				"accent-fg": {
+					"value": {
+						"base": "{colors.accent.700}",
+						"_dark": "{colors.accent.400}"
+					},
+					"description": "Text and icons of outline and ghost Buttons, color=\"accent\"."
+				},
+				"accent-edge": {
+					"value": {
+						"base": "{colors.accent.600}",
+						"_dark": "{colors.accent.500}"
+					},
+					"description": "Outline Button edge (3:1+ on page-bg and surface), color=\"accent\"."
+				},
+				"secondary-solid": {
+					"value": {
+						"base": "{colors.secondary.700}",
+						"_dark": "{colors.secondary.200}"
+					},
+					"description": "Solid Button fill, color=\"secondary\"."
+				},
+				"secondary-solid-hover": {
+					"value": {
+						"base": "{colors.secondary.800}",
+						"_dark": "{colors.secondary.300}"
+					},
+					"description": "Hovered solid fill, color=\"secondary\"."
+				},
+				"on-secondary-solid": {
+					"value": {
+						"base": "{colors.white}",
+						"_dark": "{colors.secondary.950}"
+					},
+					"description": "Text and icons on the solid fill, color=\"secondary\"."
+				},
+				"secondary-soft": {
+					"value": {
+						"base": "{colors.secondary.100}",
+						"_dark": "{colors.secondary.800}"
+					},
+					"description": "Soft Button fill; also the hover fill of outline and ghost, color=\"secondary\"."
+				},
+				"secondary-soft-hover": {
+					"value": {
+						"base": "{colors.secondary.200}",
+						"_dark": "{colors.secondary.700}"
+					},
+					"description": "Hovered soft fill, color=\"secondary\"."
+				},
+				"on-secondary-soft": {
+					"value": {
+						"base": "{colors.secondary.800}",
+						"_dark": "{colors.secondary.100}"
+					},
+					"description": "Text on the soft fill, color=\"secondary\"."
+				},
+				"secondary-fg": {
+					"value": {
+						"base": "{colors.secondary.700}",
+						"_dark": "{colors.secondary.300}"
+					},
+					"description": "Text and icons of outline and ghost Buttons, color=\"secondary\"."
+				},
+				"secondary-edge": {
+					"value": "{colors.secondary.500}",
+					"description": "Outline Button edge (3:1+ on page-bg and surface), color=\"secondary\"."
+				},
+				"warning-solid": {
+					"value": "{colors.warning.400}",
+					"description": "Solid Button fill, color=\"warning\"."
+				},
+				"warning-solid-hover": {
+					"value": "{colors.warning.300}",
+					"description": "Hovered solid fill, color=\"warning\"."
+				},
+				"on-warning-solid": {
+					"value": "{colors.warning.950}",
+					"description": "Text and icons on the solid fill, color=\"warning\"."
+				},
+				"warning-soft": {
+					"value": {
+						"base": "{colors.warning.100}",
+						"_dark": "{colors.warning.950}"
+					},
+					"description": "Soft Button fill; also the hover fill of outline and ghost, color=\"warning\"."
+				},
+				"warning-soft-hover": {
+					"value": {
+						"base": "{colors.warning.200}",
+						"_dark": "{colors.warning.900}"
+					},
+					"description": "Hovered soft fill, color=\"warning\"."
+				},
+				"on-warning-soft": {
+					"value": {
+						"base": "{colors.warning.800}",
+						"_dark": "{colors.warning.200}"
+					},
+					"description": "Text on the soft fill, color=\"warning\"."
+				},
+				"warning-fg": {
+					"value": {
+						"base": "{colors.warning.700}",
+						"_dark": "{colors.warning.400}"
+					},
+					"description": "Text and icons of outline and ghost Buttons, color=\"warning\"."
+				},
+				"warning-edge": {
+					"value": {
+						"base": "{colors.warning.700}",
+						"_dark": "{colors.warning.500}"
+					},
+					"description": "Outline Button edge (3:1+ on page-bg and surface), color=\"warning\"."
+				},
+				"error-solid": {
+					"value": "{colors.danger}",
+					"description": "Solid Button fill, color=\"error\"."
+				},
+				"error-solid-hover": {
+					"value": "{colors.danger-hover}",
+					"description": "Hovered solid fill, color=\"error\"."
+				},
+				"on-error-solid": {
+					"value": "{colors.on-action}",
+					"description": "Text and icons on the solid fill, color=\"error\"."
+				},
+				"error-soft": {
+					"value": {
+						"base": "{colors.error.100}",
+						"_dark": "{colors.error.950}"
+					},
+					"description": "Soft Button fill; also the hover fill of outline and ghost, color=\"error\"."
+				},
+				"error-soft-hover": {
+					"value": {
+						"base": "{colors.error.200}",
+						"_dark": "{colors.error.900}"
+					},
+					"description": "Hovered soft fill, color=\"error\"."
+				},
+				"on-error-soft": {
+					"value": {
+						"base": "{colors.error.800}",
+						"_dark": "{colors.error.200}"
+					},
+					"description": "Text on the soft fill, color=\"error\"."
+				},
+				"error-fg": {
+					"value": {
+						"base": "{colors.error.700}",
+						"_dark": "{colors.error.400}"
+					},
+					"description": "Text and icons of outline and ghost Buttons, color=\"error\"."
+				},
+				"error-edge": {
+					"value": {
+						"base": "{colors.error.600}",
+						"_dark": "{colors.error.400}"
+					},
+					"description": "Outline Button edge (3:1+ on page-bg and surface), color=\"error\"."
+				},
+				"primary": {
+					"50": {
+						"value": {
+							"base": "oklch(97.7% 0.013 236.62)",
+							"_paletteRose": "#fff1f2"
+						},
+						"description": "Brand primary, step 50: Tailwind sky-50 (global.css `--color-primary-50: var(--color-sky-50)`)."
+					},
+					"100": {
+						"value": {
+							"base": "oklch(95.1% 0.026 236.824)",
+							"_paletteRose": "#ffe4e6"
+						},
+						"description": "Brand primary, step 100: Tailwind sky-100 (global.css `--color-primary-100: var(--color-sky-100)`)."
+					},
+					"200": {
+						"value": {
+							"base": "oklch(90.1% 0.058 230.902)",
+							"_paletteRose": "#fecdd3"
+						},
+						"description": "Brand primary, step 200: Tailwind sky-200 (global.css `--color-primary-200: var(--color-sky-200)`)."
+					},
+					"300": {
+						"value": {
+							"base": "oklch(82.8% 0.111 230.318)",
+							"_paletteRose": "#fda4af"
+						},
+						"description": "Brand primary, step 300: Tailwind sky-300 (global.css `--color-primary-300: var(--color-sky-300)`)."
+					},
+					"400": {
+						"value": {
+							"base": "oklch(74.6% 0.16 232.661)",
+							"_paletteRose": "#fb7185"
+						},
+						"description": "Brand primary, step 400: Tailwind sky-400 (global.css `--color-primary-400: var(--color-sky-400)`)."
+					},
+					"500": {
+						"value": {
+							"base": "oklch(68.5% 0.169 237.323)",
+							"_paletteRose": "#f43f5e"
+						},
+						"description": "Brand primary, step 500: Tailwind sky-500 (global.css `--color-primary-500: var(--color-sky-500)`)."
+					},
+					"600": {
+						"value": {
+							"base": "oklch(58.8% 0.158 241.966)",
+							"_paletteRose": "#e11d48"
+						},
+						"description": "Brand primary, step 600: Tailwind sky-600 (global.css `--color-primary-600: var(--color-sky-600)`)."
+					},
+					"700": {
+						"value": {
+							"base": "oklch(50% 0.134 242.749)",
+							"_paletteRose": "#be123c"
+						},
+						"description": "Brand primary, step 700: Tailwind sky-700 (global.css `--color-primary-700: var(--color-sky-700)`)."
+					},
+					"800": {
+						"value": {
+							"base": "oklch(44.3% 0.11 240.79)",
+							"_paletteRose": "#9f1239"
+						},
+						"description": "Brand primary, step 800: Tailwind sky-800 (global.css `--color-primary-800: var(--color-sky-800)`)."
+					},
+					"900": {
+						"value": {
+							"base": "oklch(39.1% 0.09 240.876)",
+							"_paletteRose": "#881337"
+						},
+						"description": "Brand primary, step 900: Tailwind sky-900 (global.css `--color-primary-900: var(--color-sky-900)`)."
+					},
+					"950": {
+						"value": {
+							"base": "oklch(29.3% 0.066 243.157)",
+							"_paletteRose": "#4c0519"
+						},
+						"description": "Brand primary, step 950: Tailwind sky-950 (global.css `--color-primary-950: var(--color-sky-950)`)."
+					}
+				},
+				"accent": {
+					"50": {
+						"value": {
+							"base": "oklch(98.7% 0.022 95.277)",
+							"_paletteRose": "#f5f3ff"
+						},
+						"description": "Brand accent, step 50: Tailwind amber-50 (global.css `--color-accent-50: var(--color-amber-50)`)."
+					},
+					"100": {
+						"value": {
+							"base": "oklch(96.2% 0.059 95.617)",
+							"_paletteRose": "#ede9fe"
+						},
+						"description": "Brand accent, step 100: Tailwind amber-100 (global.css `--color-accent-100: var(--color-amber-100)`)."
+					},
+					"200": {
+						"value": {
+							"base": "oklch(92.4% 0.12 95.746)",
+							"_paletteRose": "#ddd6fe"
+						},
+						"description": "Brand accent, step 200: Tailwind amber-200 (global.css `--color-accent-200: var(--color-amber-200)`)."
+					},
+					"300": {
+						"value": {
+							"base": "oklch(87.9% 0.169 91.605)",
+							"_paletteRose": "#c4b5fd"
+						},
+						"description": "Brand accent, step 300: Tailwind amber-300 (global.css `--color-accent-300: var(--color-amber-300)`)."
+					},
+					"400": {
+						"value": {
+							"base": "oklch(82.8% 0.189 84.429)",
+							"_paletteRose": "#a78bfa"
+						},
+						"description": "Brand accent, step 400: Tailwind amber-400 (global.css `--color-accent-400: var(--color-amber-400)`)."
+					},
+					"500": {
+						"value": {
+							"base": "oklch(76.9% 0.188 70.08)",
+							"_paletteRose": "#8b5cf6"
+						},
+						"description": "Brand accent, step 500: Tailwind amber-500 (global.css `--color-accent-500: var(--color-amber-500)`)."
+					},
+					"600": {
+						"value": {
+							"base": "oklch(66.6% 0.179 58.318)",
+							"_paletteRose": "#7c3aed"
+						},
+						"description": "Brand accent, step 600: Tailwind amber-600 (global.css `--color-accent-600: var(--color-amber-600)`)."
+					},
+					"700": {
+						"value": {
+							"base": "oklch(55.5% 0.163 48.998)",
+							"_paletteRose": "#6d28d9"
+						},
+						"description": "Brand accent, step 700: Tailwind amber-700 (global.css `--color-accent-700: var(--color-amber-700)`)."
+					},
+					"800": {
+						"value": {
+							"base": "oklch(47.3% 0.137 46.201)",
+							"_paletteRose": "#5b21b6"
+						},
+						"description": "Brand accent, step 800: Tailwind amber-800 (global.css `--color-accent-800: var(--color-amber-800)`)."
+					},
+					"900": {
+						"value": {
+							"base": "oklch(41.4% 0.112 45.904)",
+							"_paletteRose": "#4c1d95"
+						},
+						"description": "Brand accent, step 900: Tailwind amber-900 (global.css `--color-accent-900: var(--color-amber-900)`)."
+					},
+					"950": {
+						"value": {
+							"base": "oklch(27.9% 0.077 45.635)",
+							"_paletteRose": "#2e1065"
+						},
+						"description": "Brand accent, step 950: Tailwind amber-950 (global.css `--color-accent-950: var(--color-amber-950)`)."
+					}
+				}
+			},
+			"fonts": { "sans": { "value": {
+				"base": "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif",
+				"_fontChill": "\"ChillRoundF\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif"
+			} } }
+		},
+		"textStyles": {
+			"display": {
+				"description": "One per page at most: hero and site titles.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "30px",
+					"lineHeight": "38px",
+					"fontWeight": "700"
+				}
+			},
+			"heading-1": {
+				"description": "Page titles.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "24px",
+					"lineHeight": "32px",
+					"fontWeight": "700"
+				}
+			},
+			"heading-2": {
+				"description": "Section titles; Dialog titles.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "20px",
+					"lineHeight": "28px",
+					"fontWeight": "700"
+				}
+			},
+			"heading-3": {
+				"description": "Card titles, the NavMenu product name, sub-sections.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "16px",
+					"lineHeight": "24px",
+					"fontWeight": "700"
+				}
+			},
+			"prose": {
+				"description": "Long-form reading text only (articles, docs). Everything else is `body`.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "16px",
+					"lineHeight": "1.75",
+					"fontWeight": "400"
+				}
+			},
+			"body": {
+				"description": "The base size: UI text, inputs, alerts, menus, table cells.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "14px",
+					"lineHeight": "20px",
+					"fontWeight": "400"
+				}
+			},
+			"small": {
+				"description": "Help text, descriptions, tooltips, tags, section labels.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "12px",
+					"lineHeight": "16px",
+					"fontWeight": "400"
+				}
+			},
+			"caption": {
+				"description": "Badges and tiny counters only.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "12px",
+					"lineHeight": "16px",
+					"fontWeight": "700"
+				}
+			},
+			"label": {
+				"description": "Field labels, table headers, Alert and Toast titles.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "14px",
+					"lineHeight": "20px",
+					"fontWeight": "700"
+				}
+			},
+			"button": {
+				"description": "Button labels, md and lg.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "14px",
+					"lineHeight": "20px",
+					"fontWeight": "600"
+				}
+			},
+			"button-sm": {
+				"description": "Small button labels, except in table cells.",
+				"value": {
+					"fontFamily": "sans",
+					"fontSize": "12px",
+					"lineHeight": "16px",
+					"fontWeight": "600"
+				}
+			}
+		},
+		"keyframes": {
+			"koi-fade": { "from": { "opacity": "0" } },
+			"koi-pop": { "from": {
+				"opacity": "0",
+				"transform": "translateY(8px) scale(.97)"
+			} },
+			"koi-rise": { "from": {
+				"opacity": "0",
+				"transform": "translateY(12px) scale(.96)"
+			} },
+			"koi-spin": { "to": { "transform": "rotate(360deg)" } },
+			"koi-shimmer": {
+				"from": { "backgroundPosition": "-150vw 0" },
+				"to": { "backgroundPosition": "50vw 0" }
+			},
+			"koi-indet": {
+				"from": { "translate": "-100%" },
+				"to": { "translate": "250%" }
+			},
+			"koi-pulse": { "50%": { "opacity": ".45" } }
+		}
+	} }
+};
+//#endregion
+//#region src/recipes/headless.ts
+/** State selectors. Each is a compound selector: write `&${state.checked}`, `${state.popupOpen} > &`, `:not(${state.disabled})`. */
+const state = {
+	checked: "[data-checked]",
+	unchecked: "[data-unchecked]",
+	/** A Progress with no value. */
+	indeterminate: "[data-indeterminate]",
+	/** Disabled through the library (a Field, a group, or a non-native control). Native elements use `:disabled`. */
+	disabled: "[data-disabled]",
+	/** Inside a Field with an error. */
+	invalid: "[data-invalid]",
+	/** A select trigger showing no value yet. */
+	placeholder: "[data-placeholder]",
+	/** A trigger whose popup is open. */
+	popupOpen: "[data-popup-open]",
+	/** The current tab. */
+	selected: "[data-active]",
+	/** The item a pointer or the arrow keys are on, in a list or menu. */
+	highlighted: "[data-highlighted]",
+	/** The first frame after mounting: transition from here. */
+	entering: "[data-starting-style]",
+	/** Closing: transition to here, then it unmounts. */
+	exiting: "[data-ending-style]",
+	/** A tooltip closed by Esc or a click, which skips its fade. */
+	instantClose: "[data-instant=dismiss]",
+	/** Which way a toast was flung. */
+	swiped: {
+		left: "[data-swipe-direction=left]",
+		right: "[data-swipe-direction=right]",
+		up: "[data-swipe-direction=up]",
+		down: "[data-swipe-direction=down]"
+	}
+};
+/** Values the library measures, as `var()` expressions ready to drop into a value or a calc(). */
+const vars = {
+	anchorWidth: "var(--anchor-width)",
+	availableWidth: "var(--available-width)",
+	availableHeight: "var(--available-height)",
+	transformOrigin: "var(--transform-origin)",
+	toastOffsetY: "var(--toast-offset-y, 0px)",
+	toastIndex: "var(--toast-index, 0)",
+	toastSwipeX: "var(--toast-swipe-movement-x, 0px)",
+	toastSwipeY: "var(--toast-swipe-movement-y, 0px)",
+	activeTabLeft: "var(--active-tab-left)",
+	activeTabTop: "var(--active-tab-top)",
+	activeTabWidth: "var(--active-tab-width)",
+	activeTabHeight: "var(--active-tab-height)"
+};
+//#endregion
+//#region src/global-css.ts
+const globalCss = defineGlobalStyles({
+	html: {
+		WebkitFontSmoothing: "auto",
+		MozOsxFontSmoothing: "auto"
+	},
+	body: {
+		fontFamily: "sans",
+		textStyle: "body",
+		color: "text",
+		bg: "page-bg",
+		textAutospace: "normal"
+	},
+	"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
+		appearance: "none",
+		margin: 0
+	},
+	"@media (prefers-reduced-motion: reduce)": { [`*:not(.koi-spinner__svg, .koi-progress__indicator${state.indeterminate}), *::before, *::after`]: {
+		animationDuration: "0.01ms !important",
+		transitionDuration: "0.01ms !important"
+	} }
+});
+//#endregion
+//#region ../tokens/dist/dimensions.js
+const space = {
+	"1": 4,
+	"2": 8,
+	"3": 12,
+	"4": 16,
+	"5": 20,
+	"6": 24,
+	"8": 32,
+	"10": 40,
+	"12": 48,
+	"16": 64
+};
+const components = {
+	"focusRing": {
+		"width": 2,
+		"offset": 2
+	},
+	"stroke": {
+		"hairline": 1,
+		"check": 1.5
+	},
+	"spinner": {
+		"sizeSm": 16,
+		"sizeMd": 20,
+		"sizeLg": 32,
+		"stroke": 3
+	},
+	"closeButton": { "size": 24 },
+	"popup": { "offset": 4 },
+	"field": {
+		"lineHeight": 20,
+		"paddingXSm": 10,
+		"paddingXMd": 12,
+		"paddingXLg": 14,
+		"gap": 6,
+		"iconOffset": 2,
+		"chevronInset": 10,
+		"chevronSpace": 36
+	},
+	"textarea": { "minHeight": 80 },
+	"table": { "rowHeight": 48 },
+	"badge": {
+		"height": 22,
+		"paddingX": 10,
+		"dot": 6
+	},
+	"avatar": {
+		"sizeXl": 64,
+		"fontSm": 12,
+		"fontMd": 14,
+		"fontLg": 16,
+		"fontXl": 24
+	},
+	"alert": { "iconOffset": 2 },
+	"dialog": {
+		"widthSm": 400,
+		"widthMd": 520,
+		"widthLg": 720
+	},
+	"checkbox": {
+		"box": 16,
+		"offset": 2
+	},
+	"radio": { "dot": 6 },
+	"switch": {
+		"trackWidth": 36,
+		"trackHeight": 20,
+		"thumb": 14,
+		"thumbInset": 3
+	},
+	"progress": {
+		"trackSm": 4,
+		"trackMd": 8,
+		"trackLg": 12
+	},
+	"pagination": { "gapWidth": 24 },
+	"tag": {
+		"paddingX": 10,
+		"remove": 16,
+		"removeOverhang": 4
+	},
+	"toast": {
+		"width": 360,
+		"iconOffset": 3,
+		"closableInset": 44,
+		"enterOffset": 12
+	},
+	"tooltip": {
+		"maxWidth": 240,
+		"offset": 8
+	},
+	"selectPanel": {
+		"maxHeight": 360,
+		"chevronOverhang": 2
+	},
+	"link": {
+		"underline": 2,
+		"radius": 2,
+		"iconGap": 2
+	},
+	"chatBubble": {
+		"paddingX": 12,
+		"paddingY": 8,
+		"maxWidth": 480
+	},
+	"prose": {
+		"quoteRule": 4,
+		"headRule": 2,
+		"kbdDepth": 3
+	}
+};
+//#endregion
+//#region src/recipes/dimensions.ts
+/** A dimension number as a Panda arbitrary value: toPx(16) → '[16px]'. */
+const toPx = (n) => `[${n}px]`;
+/** The keyboard focus outline every focusable part draws. */
+const focusRing = {
+	outlineWidth: `${components.focusRing.width}px`,
+	outlineStyle: "solid",
+	outlineColor: "focus-ring",
+	outlineOffset: `${components.focusRing.offset}px`
+};
+//#endregion
+//#region src/recipes/alert.ts
+const alert = defineSlotRecipe({
+	className: "koi-alert",
+	slots: [
+		"root",
+		"icon",
+		"content",
+		"title",
+		"body",
+		"action",
+		"close"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			gap: "2",
+			p: "3",
+			boxSizing: "border-box",
+			borderWidth: `${components.stroke.hairline}px`,
+			borderStyle: "solid",
+			borderRadius: "xl",
+			fontFamily: "sans",
+			textStyle: "body"
+		},
+		icon: {
+			flex: "none",
+			display: "inline-flex",
+			mt: toPx(components.alert.iconOffset),
+			"& > svg": {
+				width: "icon",
+				height: "icon"
+			}
+		},
+		content: {
+			flex: "1",
+			minWidth: "0",
+			display: "flex",
+			flexDirection: "column",
+			gap: "1"
+		},
+		title: {
+			m: "0",
+			fontWeight: "700"
+		},
+		body: {
+			color: "text",
+			"& p": { m: "0" }
+		},
+		action: {
+			mt: "2",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "2"
+		},
+		close: {
+			position: "absolute",
+			top: "2",
+			insetInlineEnd: "2",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: toPx(components.closeButton.size),
+			height: toPx(components.closeButton.size),
+			p: "0",
+			borderWidth: "0",
+			borderRadius: "full",
+			bg: "transparent",
+			color: "inherit",
+			cursor: "pointer",
+			transitionProperty: "background-color",
+			transitionDuration: "fast",
+			_hover: { bg: "divider" },
+			_focusVisible: focusRing,
+			"& > svg": {
+				width: "icon",
+				height: "icon"
+			}
+		}
+	},
+	variants: {
+		tone: {
+			info: { root: {
+				bg: "info-surface",
+				borderColor: "info-border",
+				color: "info-text"
+			} },
+			warning: { root: {
+				bg: "warning-surface",
+				borderColor: "warning-border",
+				color: "warning-text"
+			} },
+			error: { root: {
+				bg: "error-surface",
+				borderColor: "error-border",
+				color: "error-text"
+			} }
+		},
+		closable: {
+			true: { root: { pe: "10" } },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		tone: "info",
+		closable: false
+	}
+});
+//#endregion
+//#region src/recipes/avatar.ts
+const avatar = defineSlotRecipe({
+	className: "koi-avatar",
+	slots: [
+		"root",
+		"image",
+		"fallback"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: "0",
+			verticalAlign: "middle",
+			overflow: "hidden",
+			boxSizing: "border-box",
+			borderRadius: "full",
+			bg: "action-subtle",
+			color: "on-action-subtle",
+			fontFamily: "sans",
+			fontWeight: "700",
+			lineHeight: "1",
+			userSelect: "none"
+		},
+		image: {
+			display: "block",
+			width: "100%",
+			height: "100%",
+			objectFit: "cover"
+		},
+		fallback: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "100%",
+			height: "100%",
+			whiteSpace: "nowrap"
+		}
+	},
+	variants: {
+		size: {
+			sm: { root: {
+				width: "control-sm",
+				height: "control-sm",
+				fontSize: toPx(components.avatar.fontSm)
+			} },
+			md: { root: {
+				width: "control-md",
+				height: "control-md",
+				fontSize: toPx(components.avatar.fontMd)
+			} },
+			lg: { root: {
+				width: "control-lg",
+				height: "control-lg",
+				fontSize: toPx(components.avatar.fontLg)
+			} },
+			xl: { root: {
+				width: toPx(components.avatar.sizeXl),
+				height: toPx(components.avatar.sizeXl),
+				fontSize: toPx(components.avatar.fontXl)
+			} }
+		},
+		shape: {
+			circle: {},
+			square: { root: { borderRadius: "xl" } }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		shape: "circle"
+	}
+});
+//#endregion
+//#region src/recipes/badge.ts
+const badge = defineSlotRecipe({
+	className: "koi-badge",
+	slots: ["root", "dot"],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "1",
+			height: toPx(components.badge.height),
+			px: toPx(components.badge.paddingX),
+			boxSizing: "border-box",
+			borderRadius: "full",
+			fontFamily: "sans",
+			textStyle: "caption",
+			whiteSpace: "nowrap"
+		},
+		dot: {
+			flexShrink: "0",
+			width: toPx(components.badge.dot),
+			height: toPx(components.badge.dot),
+			borderRadius: "full",
+			bg: "currentColor"
+		}
+	},
+	variants: { tone: {
+		neutral: { root: {
+			bg: "surface-muted",
+			color: "text"
+		} },
+		primary: { root: {
+			bg: "action-subtle",
+			color: "on-action-subtle"
+		} },
+		accent: { root: {
+			bg: "highlight",
+			color: "on-highlight"
+		} },
+		warning: { root: {
+			bg: "warning-surface",
+			color: "warning-text"
+		} },
+		error: { root: {
+			bg: "error-surface",
+			color: "error-text"
+		} },
+		solid: { root: {
+			bg: "action",
+			color: "on-action"
+		} }
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+//#endregion
+//#region ../core/src/button.ts
+const BUTTON_COLORS = [
+	"primary",
+	"accent",
+	"secondary",
+	"warning",
+	"error"
+];
+const BUTTON_VARIANTS = [
+	"solid",
+	"soft",
+	"outline",
+	"ghost"
+];
+//#endregion
+//#region src/recipes/button.ts
+const HOVER = `&:hover:not(:disabled, ${state.disabled})`;
+function look(c, v) {
+	switch (v) {
+		case "solid": return {
+			bg: `${c}-solid`,
+			color: `on-${c}-solid`,
+			[HOVER]: { bg: `${c}-solid-hover` }
+		};
+		case "soft": return {
+			bg: `${c}-soft`,
+			color: `on-${c}-soft`,
+			[HOVER]: { bg: `${c}-soft-hover` }
+		};
+		case "outline": return {
+			bg: "transparent",
+			color: `${c}-fg`,
+			borderColor: `${c}-edge`,
+			[HOVER]: { bg: `${c}-soft` }
+		};
+		case "ghost": return {
+			bg: "transparent",
+			color: `${c}-fg`,
+			[HOVER]: { bg: `${c}-soft` }
+		};
+	}
+}
+const RIPPLE_REST = "0 0 0 6px color-mix(in oklch, var(--koi-ripple) 0%, transparent)";
+const RIPPLE_PRESSED = "0 0 0 0 color-mix(in oklch, var(--koi-ripple) 45%, transparent)";
+const ripple = (c) => ({ "--koi-ripple": `token(colors.${c}-solid)` });
+const transition = (shadow) => [
+	"background-color",
+	"color",
+	"border-color"
+].map((p) => `${p} token(durations.fast)`).concat(`box-shadow ${shadow}`).join(", ");
+const empty = (keys) => Object.fromEntries(keys.map((k) => [k, {}]));
+const button = defineRecipe({
+	className: "koi-btn",
+	description: "Button and IconButton. No shadows on any variant: buttons stay flat (the press ripple fades to nothing).",
+	base: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "2",
+		borderWidth: `${components.stroke.hairline}px`,
+		borderStyle: "solid",
+		borderColor: "transparent",
+		borderRadius: "full",
+		fontFamily: "sans",
+		fontWeight: "600",
+		whiteSpace: "nowrap",
+		userSelect: "none",
+		cursor: "pointer",
+		textDecoration: "none",
+		boxShadow: RIPPLE_REST,
+		transition: transition("token(durations.ripple) token(easings.out)"),
+		[`&:active:not(:disabled, ${state.disabled})`]: {
+			boxShadow: RIPPLE_PRESSED,
+			transition: transition("0s")
+		},
+		_focusVisible: focusRing,
+		_disabled: {
+			opacity: "0.5",
+			cursor: "not-allowed"
+		},
+		"&[aria-busy=true]:disabled": { cursor: "progress" },
+		"& > svg": {
+			width: "icon",
+			height: "icon",
+			flexShrink: "0"
+		}
+	},
+	variants: {
+		color: {
+			primary: ripple("primary"),
+			accent: ripple("accent"),
+			secondary: ripple("secondary"),
+			warning: ripple("warning"),
+			error: ripple("error")
+		},
+		variant: empty(BUTTON_VARIANTS),
+		size: {
+			sm: {
+				height: "control-sm",
+				px: "3",
+				textStyle: "button-sm",
+				"& > svg": {
+					width: "icon-sm",
+					height: "icon-sm"
+				},
+				"td &": { textStyle: "button" }
+			},
+			md: {
+				height: "control-md",
+				px: "4",
+				textStyle: "button"
+			},
+			lg: {
+				height: "control-lg",
+				px: "5",
+				textStyle: "button"
+			}
+		},
+		shape: {
+			pill: { borderRadius: "full" },
+			rounded: { borderRadius: "lg" }
+		},
+		/** Square, icon-only (IconButton). Width follows the size's height. Styled in compoundVariants below. */
+		iconOnly: {
+			true: {},
+			false: {}
+		},
+		fullWidth: { true: { width: "100%" } }
+	},
+	compoundVariants: [
+		...BUTTON_COLORS.flatMap((color) => BUTTON_VARIANTS.map((variant) => ({
+			color,
+			variant,
+			css: look(color, variant)
+		}))),
+		{
+			shape: "rounded",
+			size: "sm",
+			iconOnly: false,
+			css: { px: "2" }
+		},
+		{
+			iconOnly: true,
+			css: {
+				px: "0",
+				flex: "none",
+				aspectRatio: "1"
+			}
+		}
+	],
+	defaultVariants: {
+		color: "primary",
+		variant: "solid",
+		size: "md",
+		shape: "rounded",
+		iconOnly: false
+	}
+});
+//#endregion
+//#region src/recipes/card.ts
+const card = defineSlotRecipe({
+	className: "koi-card",
+	slots: [
+		"root",
+		"media",
+		"head",
+		"title",
+		"description",
+		"body",
+		"footer"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "5",
+			p: "5",
+			boxSizing: "border-box",
+			overflow: "hidden",
+			borderRadius: "panel",
+			fontFamily: "sans",
+			color: "text"
+		},
+		media: {
+			mx: "-5",
+			mt: "-5",
+			"& > *": {
+				display: "block",
+				width: "100%"
+			}
+		},
+		head: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "1"
+		},
+		title: {
+			m: "0",
+			textStyle: "heading-3"
+		},
+		description: {
+			m: "0",
+			textStyle: "small",
+			color: "text-muted"
+		},
+		body: { textStyle: "body" },
+		footer: {
+			display: "flex",
+			flexWrap: "wrap",
+			justifyContent: "flex-end",
+			gap: "2"
+		}
+	},
+	variants: {
+		variant: {
+			outlined: { root: {
+				bg: "surface",
+				borderWidth: `${components.stroke.hairline}px`,
+				borderStyle: "solid",
+				borderColor: "border"
+			} },
+			filled: { root: { bg: "surface-muted" } },
+			glass: { root: {
+				bg: "surface-glass",
+				backdropFilter: "blur(var(--blurs-panel))"
+			} }
+		},
+		padding: {
+			default: {},
+			none: {
+				root: { p: "0" },
+				media: { m: "0" }
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "outlined",
+		padding: "default"
+	}
+});
+//#endregion
+//#region src/recipes/chat-bubble.ts
+const chatBubble = defineRecipe({
+	className: "koi-chat-bubble",
+	base: {
+		display: "inline-block",
+		maxWidth: toPx(components.chatBubble.maxWidth),
+		px: toPx(components.chatBubble.paddingX),
+		py: toPx(components.chatBubble.paddingY),
+		boxSizing: "border-box",
+		fontFamily: "sans",
+		textStyle: "body",
+		borderRadius: "xl",
+		overflowWrap: "break-word"
+	},
+	variants: { side: {
+		received: {
+			bg: "surface-muted",
+			color: "text",
+			borderBottomLeftRadius: "sm"
+		},
+		sent: {
+			bg: "action",
+			color: "on-action",
+			borderBottomRightRadius: "sm"
+		}
+	} },
+	defaultVariants: { side: "received" }
+});
+//#endregion
+//#region src/recipes/checkbox.ts
+const choiceRow = {
+	root: {
+		display: "inline-flex",
+		alignItems: "flex-start",
+		gap: "2",
+		cursor: "pointer",
+		color: "text",
+		fontFamily: "sans",
+		textStyle: "body",
+		[`&:has(> ${state.disabled})`]: {
+			color: "text-disabled",
+			cursor: "not-allowed"
+		},
+		[`&:hover > ${state.unchecked}:not(${state.disabled}, [aria-invalid=true])`]: { borderColor: "border-control-hover" }
+	},
+	text: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	label: { textStyle: "body" },
+	description: {
+		mt: "1",
+		textStyle: "small",
+		color: "text-muted",
+		[`${state.disabled} ~ * > &`]: { color: "text-disabled" }
+	}
+};
+const choiceControl = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flex: "none",
+	boxSizing: "border-box",
+	width: toPx(components.checkbox.box),
+	height: toPx(components.checkbox.box),
+	mt: toPx(components.checkbox.offset),
+	borderWidth: toPx(components.stroke.check),
+	borderStyle: "solid",
+	borderColor: "border-control",
+	bg: "surface",
+	color: "on-action",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: "fast",
+	_focusVisible: focusRing,
+	[`&${state.checked}`]: {
+		bg: "control-checked",
+		borderColor: "control-checked"
+	},
+	[`&[aria-invalid=true]:not(${state.checked})`]: { borderColor: "error-control" },
+	[`&${state.disabled}`]: {
+		bg: "surface-muted",
+		borderColor: "border"
+	},
+	[`&${state.checked}${state.disabled}`]: {
+		bg: "control-checked",
+		borderColor: "control-checked",
+		opacity: "0.5"
+	}
+};
+const checkbox = defineSlotRecipe({
+	className: "koi-checkbox",
+	slots: [
+		"root",
+		"control",
+		"indicator",
+		"text",
+		"label",
+		"description"
+	],
+	base: {
+		...choiceRow,
+		control: {
+			...choiceControl,
+			borderRadius: "sm"
+		},
+		indicator: {
+			display: "flex",
+			opacity: "0",
+			transform: "scale(.6)",
+			transition: "opacity {durations.fast}, transform {durations.check} {easings.spring}",
+			[`&${state.checked}`]: {
+				opacity: "1",
+				transform: "scale(1)"
+			},
+			"& > svg": {
+				width: "icon-xs",
+				height: "icon-xs"
+			}
+		}
+	}
+});
+//#endregion
+//#region src/recipes/dialog.ts
+const dialog = defineSlotRecipe({
+	className: "koi-dialog",
+	slots: [
+		"backdrop",
+		"viewport",
+		"popup",
+		"title",
+		"description",
+		"body",
+		"footer",
+		"close"
+	],
+	base: {
+		backdrop: {
+			position: "fixed",
+			inset: "0",
+			zIndex: "dialog",
+			bg: "backdrop",
+			backdropFilter: "blur(var(--blurs-panel))",
+			transitionProperty: "opacity",
+			transitionDuration: "dialog",
+			[`&${state.entering}, &${state.exiting}`]: { opacity: "0" }
+		},
+		viewport: {
+			position: "fixed",
+			inset: "0",
+			zIndex: "dialog",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			p: "4"
+		},
+		popup: {
+			position: "relative",
+			width: "100%",
+			maxHeight: `calc(100vh - ${2 * space[4]}px)`,
+			overflow: "auto",
+			display: "flex",
+			flexDirection: "column",
+			gap: "2",
+			p: "6",
+			bg: "surface",
+			color: "text",
+			borderRadius: "dialog",
+			boxShadow: "float",
+			outline: "none",
+			transitionProperty: "opacity, transform",
+			transitionDuration: "dialog",
+			transformOrigin: "center",
+			[`&${state.entering}, &${state.exiting}`]: {
+				opacity: "0",
+				transform: "scale(.96)"
+			}
+		},
+		title: {
+			m: "0",
+			pe: "8",
+			textStyle: "heading-2"
+		},
+		description: {
+			m: "0",
+			textStyle: "body",
+			color: "text-muted"
+		},
+		body: {
+			mt: "2",
+			textStyle: "body"
+		},
+		footer: {
+			mt: "4",
+			display: "flex",
+			gap: "2",
+			justifyContent: "flex-end",
+			flexWrap: "wrap"
+		},
+		close: {
+			position: "absolute",
+			top: "4",
+			insetInlineEnd: "4"
+		}
+	},
+	variants: { size: {
+		sm: { popup: { maxWidth: `${components.dialog.widthSm}px` } },
+		md: { popup: { maxWidth: `${components.dialog.widthMd}px` } },
+		lg: { popup: { maxWidth: `${components.dialog.widthLg}px` } }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/recipes/divider.ts
+const line = {
+	borderTopWidth: `${components.stroke.hairline}px`,
+	borderTopStyle: "solid",
+	borderTopColor: "divider"
+};
+const separator = defineRecipe({
+	className: "koi-divider",
+	base: {
+		flexShrink: "0",
+		borderWidth: "0"
+	},
+	variants: { kind: {
+		line: {
+			...line,
+			width: "100%",
+			my: "4"
+		},
+		label: {
+			display: "flex",
+			alignItems: "center",
+			gap: "3",
+			width: "100%",
+			my: "4",
+			fontFamily: "sans",
+			textStyle: "small",
+			color: "text-muted",
+			_before: {
+				content: "\"\"",
+				flex: "1",
+				...line
+			},
+			_after: {
+				content: "\"\"",
+				flex: "1",
+				...line
+			}
+		},
+		vertical: {
+			display: "inline-block",
+			alignSelf: "stretch",
+			width: `${components.stroke.hairline}px`,
+			minHeight: "1em",
+			mx: "2",
+			bg: "divider"
+		}
+	} },
+	defaultVariants: { kind: "line" }
+});
+//#endregion
+//#region src/recipes/field.ts
+const field = defineSlotRecipe({
+	className: "koi-field",
+	slots: [
+		"root",
+		"label",
+		"required",
+		"optional",
+		"error",
+		"help"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: toPx(components.field.gap),
+			fontFamily: "sans"
+		},
+		label: {
+			textStyle: "label",
+			color: "text"
+		},
+		required: { color: "error-text" },
+		optional: {
+			fontWeight: "400",
+			color: "text-muted"
+		},
+		error: {
+			m: "0",
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "1",
+			textStyle: "small",
+			color: "error-text",
+			"& > svg": {
+				flex: "none",
+				width: "icon-xs",
+				height: "icon-xs",
+				mt: toPx(components.field.iconOffset)
+			}
+		},
+		help: {
+			m: "0",
+			textStyle: "small",
+			color: "text-muted"
+		}
+	}
+});
+//#endregion
+//#region src/recipes/input.ts
+const INVALID$1 = "&:has(> input[aria-invalid=true])";
+const DISABLED$1 = "&:has(> input:disabled)";
+const input = defineSlotRecipe({
+	className: "koi-input",
+	slots: [
+		"root",
+		"el",
+		"icon"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			gap: "2",
+			width: "100%",
+			boxSizing: "border-box",
+			bg: "surface",
+			borderWidth: `${components.stroke.hairline}px`,
+			borderStyle: "solid",
+			borderColor: "border-control",
+			borderRadius: "xl",
+			color: "text",
+			fontFamily: "sans",
+			transitionProperty: "border-color, box-shadow",
+			transitionDuration: "fast",
+			"&:hover:not(:focus-within, :has(> input:disabled, > input[aria-invalid=true]))": { borderColor: "border-control-hover" },
+			"&:focus-within": {
+				borderColor: "focus-ring",
+				boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.focus-ring}`
+			},
+			[INVALID$1]: { borderColor: "error-control" },
+			[`${INVALID$1}:focus-within`]: { boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.error-control}` },
+			[DISABLED$1]: {
+				bg: "surface-muted",
+				color: "text-disabled",
+				borderColor: "border",
+				cursor: "not-allowed",
+				"& > *, & > input::placeholder": { color: "text-disabled" }
+			}
+		},
+		el: {
+			flex: "1",
+			minWidth: "0",
+			height: "100%",
+			m: "0",
+			p: "0",
+			borderWidth: "0",
+			outline: "none",
+			bg: "transparent",
+			color: "inherit",
+			font: "inherit",
+			lineHeight: toPx(components.field.lineHeight),
+			_placeholder: { color: "text-muted" },
+			_disabled: { cursor: "not-allowed" }
+		},
+		icon: {
+			display: "inline-flex",
+			flex: "none",
+			color: "text-muted",
+			"& > svg": {
+				width: "icon",
+				height: "icon"
+			}
+		}
+	},
+	variants: { size: {
+		sm: { root: {
+			height: "control-sm",
+			px: toPx(components.field.paddingXSm),
+			textStyle: "small"
+		} },
+		md: { root: {
+			height: "control-md",
+			px: toPx(components.field.paddingXMd),
+			textStyle: "body"
+		} },
+		lg: { root: {
+			height: "control-lg",
+			px: toPx(components.field.paddingXLg),
+			textStyle: "body"
+		} }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/recipes/link.ts
+const linkBase = {
+	textDecoration: "none",
+	cursor: "pointer",
+	transitionProperty: "color, background-color, border-color",
+	transitionDuration: "fast",
+	_focusVisible: focusRing
+};
+const linkUnderline = {
+	color: "link",
+	borderBottomWidth: `${components.link.underline}px`,
+	borderBottomStyle: "dashed",
+	borderBottomColor: "link-border",
+	borderRadius: toPx(components.link.radius),
+	_hover: {
+		bg: "link-hover-bg",
+		borderBottomColor: "link-hover-border"
+	}
+};
+const linkStyle = {
+	...linkBase,
+	...linkUnderline
+};
+const link = defineSlotRecipe({
+	className: "koi-link",
+	slots: [
+		"root",
+		"external",
+		"srOnly"
+	],
+	base: {
+		root: linkBase,
+		external: {
+			display: "inline-flex",
+			verticalAlign: "[-1px]",
+			marginInlineStart: toPx(components.link.iconGap),
+			"& > svg": {
+				width: "[0.85em]",
+				height: "[0.85em]"
+			}
+		},
+		srOnly: { srOnly: true }
+	},
+	variants: { variant: {
+		underline: { root: linkUnderline },
+		plain: { root: {
+			color: "text-muted",
+			_hover: { color: "text-brand" }
+		} }
+	} },
+	defaultVariants: { variant: "underline" }
+});
+//#endregion
+//#region src/recipes/pagination.ts
+const pagination = defineSlotRecipe({
+	className: "koi-pagination",
+	slots: [
+		"root",
+		"pages",
+		"page",
+		"gap",
+		"count"
+	],
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: "3",
+			flexWrap: "wrap",
+			fontFamily: "sans"
+		},
+		pages: {
+			display: "flex",
+			alignItems: "center",
+			gap: "1",
+			m: "0",
+			p: "0",
+			listStyle: "none"
+		},
+		page: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			minWidth: "control-md",
+			height: "control-md",
+			px: "2",
+			borderWidth: "0",
+			borderRadius: "full",
+			bg: "transparent",
+			color: "text",
+			textStyle: "body",
+			fontVariantNumeric: "tabular-nums",
+			cursor: "pointer",
+			userSelect: "none",
+			transitionProperty: "background-color, color",
+			transitionDuration: "fast",
+			_focusVisible: focusRing,
+			"&:hover:not([aria-current=page])": { bg: "surface-muted" },
+			"&[aria-current=page]": {
+				bg: "action",
+				color: "on-action",
+				fontWeight: "700"
+			}
+		},
+		gap: {
+			minWidth: toPx(components.pagination.gapWidth),
+			textAlign: "center",
+			color: "text-muted",
+			textStyle: "body",
+			userSelect: "none"
+		},
+		count: {
+			color: "text",
+			textStyle: "body",
+			fontVariantNumeric: "tabular-nums"
+		}
+	},
+	variants: {
+		/** Follows the Buttons beside it (ShapeProvider / Button's `shape`). */
+		shape: {
+			pill: {},
+			rounded: { page: { borderRadius: "lg" } }
+		},
+		/** compact keeps prev/next beside the page numbers instead of pushing them to the ends of the row. */
+		compact: {
+			true: { root: {
+				justifyContent: "flex-start",
+				gap: "1"
+			} },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		shape: "rounded",
+		compact: false
+	}
+});
+//#endregion
+//#region src/recipes/progress.ts
+const progress = defineSlotRecipe({
+	className: "koi-progress",
+	slots: [
+		"root",
+		"head",
+		"label",
+		"value",
+		"track",
+		"indicator"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "2",
+			width: "100%",
+			fontFamily: "sans"
+		},
+		head: {
+			display: "flex",
+			justifyContent: "space-between",
+			gap: "3",
+			textStyle: "body",
+			color: "text"
+		},
+		label: { minWidth: "0" },
+		value: {
+			marginInlineStart: "auto",
+			color: "text-muted",
+			fontVariantNumeric: "tabular-nums"
+		},
+		track: {
+			position: "relative",
+			overflow: "hidden",
+			height: toPx(components.progress.trackMd),
+			borderRadius: "full",
+			bg: "surface-muted"
+		},
+		indicator: {
+			height: "100%",
+			borderRadius: "inherit",
+			bg: "control-checked",
+			transitionProperty: "width",
+			transitionDuration: "spring",
+			transitionTimingFunction: "spring",
+			[`&${state.indeterminate}`]: {
+				position: "absolute",
+				insetBlock: "0",
+				left: "0",
+				width: "40%",
+				animationName: "koi-indet",
+				animationDuration: "indeterminate",
+				animationTimingFunction: "ease-in-out",
+				animationIterationCount: "infinite",
+				"@media (prefers-reduced-motion: reduce)": {
+					width: "100%",
+					animationName: "koi-pulse",
+					animationDuration: "pulse"
+				}
+			}
+		}
+	},
+	variants: { size: {
+		sm: { track: { height: toPx(components.progress.trackSm) } },
+		md: {},
+		lg: { track: { height: toPx(components.progress.trackLg) } }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/recipes/prose.ts
+const ratio = (px, base) => String(Number((px / base).toFixed(7)));
+const em = (px, base) => `${ratio(px, base)}em`;
+const NOT_PROSE = ":not(:where(.koi-not-prose *, .koi-not-prose))";
+const el = (sel, pseudo = "") => `& :where(${sel})${NOT_PROSE}${pseudo}`;
+const ctx = (...sels) => sels.map((s) => `& ${s}${NOT_PROSE}`).join(", ");
+const edges = {
+	"& > :first-child": { marginTop: "0" },
+	"& > :last-child": { marginBottom: "0" }
+};
+const listTypes = Object.fromEntries([
+	["A", "upper-alpha"],
+	["a", "lower-alpha"],
+	["I", "upper-roman"],
+	["i", "lower-roman"],
+	["1", "decimal"]
+].map(([type, style]) => [ctx(`ol[type="${type}"]`), { listStyleType: style }]));
+const prose = defineRecipe({
+	className: "koi-prose",
+	base: {
+		color: "prose-text",
+		fontFamily: "sans",
+		minWidth: "0",
+		[el("p")]: {
+			marginTop: em(20, 16),
+			marginBottom: em(20, 16)
+		},
+		[ctx(".lead")]: {
+			color: "text-muted",
+			fontSize: em(20, 16),
+			lineHeight: ratio(32, 20),
+			marginTop: em(24, 20),
+			marginBottom: em(24, 20)
+		},
+		[el("a")]: {
+			...linkStyle,
+			fontWeight: "500"
+		},
+		[el("strong")]: {
+			color: "text",
+			fontWeight: "600"
+		},
+		[ctx("a strong", "blockquote strong", "thead th strong")]: { color: "inherit" },
+		[el("h1")]: {
+			color: "text",
+			fontWeight: "800",
+			fontSize: em(36, 16),
+			marginTop: "0",
+			marginBottom: em(32, 36),
+			lineHeight: ratio(40, 36)
+		},
+		[el("h2")]: {
+			color: "text",
+			fontWeight: "700",
+			fontSize: em(24, 16),
+			marginTop: em(48, 24),
+			marginBottom: em(24, 24),
+			lineHeight: ratio(32, 24)
+		},
+		[el("h3")]: {
+			color: "text",
+			fontWeight: "600",
+			fontSize: em(20, 16),
+			marginTop: em(32, 20),
+			marginBottom: em(12, 20),
+			lineHeight: ratio(32, 20)
+		},
+		[el("h4")]: {
+			color: "text",
+			fontWeight: "600",
+			fontSize: "1em",
+			marginTop: em(24, 16),
+			marginBottom: em(8, 16),
+			lineHeight: ratio(24, 16)
+		},
+		[el("h5")]: {
+			color: "text",
+			fontWeight: "600",
+			fontSize: em(14, 16),
+			marginTop: em(24, 14),
+			marginBottom: em(8, 14),
+			lineHeight: ratio(20, 14)
+		},
+		[el("h6")]: {
+			color: "text-muted",
+			fontWeight: "600",
+			fontSize: em(14, 16),
+			marginTop: em(24, 14),
+			marginBottom: em(8, 14),
+			lineHeight: ratio(20, 14)
+		},
+		[ctx("h1 strong")]: {
+			fontWeight: "900",
+			color: "inherit"
+		},
+		[ctx("h2 strong")]: {
+			fontWeight: "800",
+			color: "inherit"
+		},
+		[ctx("h3 strong", "h4 strong", "h5 strong", "h6 strong")]: {
+			fontWeight: "700",
+			color: "inherit"
+		},
+		[ctx("hr + *", "h2 + *", "h3 + *", "h4 + *", "h5 + *", "h6 + *")]: { marginTop: "0" },
+		[el("ol")]: {
+			listStyleType: "decimal",
+			marginTop: em(20, 16),
+			marginBottom: em(20, 16),
+			paddingInlineStart: em(26, 16)
+		},
+		[el("ul")]: {
+			listStyleType: "disc",
+			marginTop: em(20, 16),
+			marginBottom: em(20, 16),
+			paddingInlineStart: em(26, 16)
+		},
+		...listTypes,
+		[el("li")]: {
+			marginTop: em(2, 16),
+			marginBottom: em(2, 16)
+		},
+		[el("ol > li")]: { paddingInlineStart: em(6, 16) },
+		[el("ul > li")]: { paddingInlineStart: em(6, 16) },
+		[el("ol > li", "::marker")]: {
+			fontWeight: "400",
+			color: "text-muted"
+		},
+		[el("ul > li", "::marker")]: { color: "text-muted" },
+		[ctx("> ul > li p", "> ol > li p")]: {
+			marginTop: em(12, 16),
+			marginBottom: em(12, 16)
+		},
+		[ctx("> ul > li > p:first-child", "> ol > li > p:first-child")]: { marginTop: em(20, 16) },
+		[ctx("> ul > li > p:last-child", "> ol > li > p:last-child")]: { marginBottom: em(20, 16) },
+		[ctx("ul ul", "ul ol", "ol ul", "ol ol")]: {
+			marginTop: em(12, 16),
+			marginBottom: em(12, 16)
+		},
+		[el("dl")]: {
+			marginTop: em(20, 16),
+			marginBottom: em(20, 16)
+		},
+		[el("dt")]: {
+			color: "text",
+			fontWeight: "600",
+			marginTop: em(20, 16)
+		},
+		[el("dd")]: {
+			marginTop: em(8, 16),
+			paddingInlineStart: em(26, 16)
+		},
+		[el("hr")]: {
+			borderColor: "border",
+			borderTopWidth: `${components.stroke.hairline}px`,
+			marginTop: em(48, 16),
+			marginBottom: em(48, 16)
+		},
+		[el("blockquote")]: {
+			fontWeight: "500",
+			fontStyle: "italic",
+			color: "text",
+			borderInlineStartWidth: `${components.prose.quoteRule}px`,
+			borderInlineStartColor: "border",
+			quotes: "\"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\"",
+			marginTop: em(32, 20),
+			marginBottom: em(32, 20),
+			paddingInlineStart: em(20, 20)
+		},
+		[el("blockquote p:first-of-type", "::before")]: { content: "open-quote" },
+		[el("blockquote p:last-of-type", "::after")]: { content: "close-quote" },
+		[el("img")]: {
+			borderRadius: "lg",
+			marginTop: em(32, 16),
+			marginBottom: em(32, 16)
+		},
+		[el("picture")]: {
+			display: "block",
+			marginTop: em(32, 16),
+			marginBottom: em(32, 16)
+		},
+		[ctx("picture > img")]: {
+			marginTop: "0",
+			marginBottom: "0"
+		},
+		[el("video")]: {
+			marginTop: em(32, 16),
+			marginBottom: em(32, 16)
+		},
+		[el("figure")]: {
+			marginTop: em(32, 16),
+			marginBottom: em(32, 16)
+		},
+		[ctx("figure > *")]: {
+			marginTop: "0",
+			marginBottom: "0"
+		},
+		[el("figcaption")]: {
+			color: "text-muted",
+			fontSize: em(14, 16),
+			lineHeight: ratio(20, 14)
+		},
+		[ctx("figure > figcaption")]: { marginTop: em(12, 14) },
+		[el("code")]: {
+			color: "text",
+			fontWeight: "600",
+			fontSize: em(14, 16)
+		},
+		[el("code", "::before")]: { content: "\"`\"" },
+		[el("code", "::after")]: { content: "\"`\"" },
+		[ctx("a code", "h1 code", "h2 code", "h3 code", "h4 code", "h5 code", "h6 code", "blockquote code", "thead th code")]: { color: "inherit" },
+		[ctx("h2 code")]: { fontSize: em(21, 24) },
+		[ctx("h3 code")]: { fontSize: em(18, 20) },
+		[el("kbd")]: {
+			fontWeight: "500",
+			fontFamily: "inherit",
+			color: "text",
+			fontSize: em(14, 16),
+			borderRadius: em(5, 14),
+			boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.divider}, 0 ${components.prose.kbdDepth}px 0 {colors.divider}`,
+			paddingTop: em(3, 16),
+			paddingInlineEnd: em(6, 16),
+			paddingBottom: em(3, 16),
+			paddingInlineStart: em(6, 16),
+			marginInline: em(2, 14)
+		},
+		[ctx("kbd:has(kbd)")]: { padding: em(8, 14) },
+		[el("pre")]: {
+			color: "code-block-text",
+			bg: "code-block-bg",
+			overflowX: "auto",
+			fontWeight: "400",
+			fontSize: em(14, 16),
+			lineHeight: ratio(24, 14),
+			marginTop: em(24, 14),
+			marginBottom: em(24, 14),
+			borderRadius: "sm",
+			paddingTop: em(12, 14),
+			paddingInlineEnd: em(16, 14),
+			paddingBottom: em(12, 14),
+			paddingInlineStart: em(16, 14)
+		},
+		[ctx("pre code")]: {
+			bg: "transparent",
+			borderWidth: "0",
+			borderRadius: "0",
+			padding: "0",
+			fontWeight: "inherit",
+			color: "inherit",
+			fontSize: "inherit",
+			fontFamily: "inherit",
+			lineHeight: "inherit"
+		},
+		[`${ctx("pre code")}::before, ${ctx("pre code")}::after`]: { content: "none" },
+		[el("table")]: {
+			width: "100%",
+			tableLayout: "auto",
+			fontSize: em(14, 16),
+			lineHeight: ratio(24, 14),
+			marginTop: em(32, 16),
+			marginBottom: em(32, 16)
+		},
+		[el("thead")]: {
+			borderBottomWidth: `${components.prose.headRule}px`,
+			borderBottomColor: "border"
+		},
+		[el("th")]: {
+			fontSize: em(16, 14),
+			lineHeight: ratio(32, 16),
+			textAlign: "start"
+		},
+		[el("td")]: {
+			fontSize: em(16, 14),
+			lineHeight: ratio(32, 16),
+			textAlign: "start"
+		},
+		[ctx("thead th")]: {
+			color: "text",
+			fontWeight: "600",
+			verticalAlign: "bottom",
+			paddingInlineEnd: em(8, 14),
+			paddingBottom: em(8, 14),
+			paddingInlineStart: em(8, 14)
+		},
+		[ctx("tbody tr")]: {
+			borderBottomWidth: `${components.stroke.hairline}px`,
+			borderBottomColor: "border"
+		},
+		[ctx("tbody td")]: { verticalAlign: "baseline" },
+		[ctx("tfoot")]: {
+			borderTopWidth: `${components.stroke.hairline}px`,
+			borderTopColor: "border"
+		},
+		[ctx("tfoot td")]: { verticalAlign: "top" },
+		[ctx("tbody td", "tfoot td")]: { padding: em(8, 14) },
+		[ctx("thead th:first-child", "tbody td:first-child", "tfoot td:first-child")]: { paddingInlineStart: "0" },
+		[ctx("thead th:last-child", "tbody td:last-child", "tfoot td:last-child")]: { paddingInlineEnd: "0" },
+		[ctx("tbody tr:last-child")]: { borderBottomWidth: "0" }
+	},
+	variants: { size: {
+		sm: {
+			textStyle: "body",
+			lineHeight: ratio(28, 16),
+			...edges
+		},
+		md: {
+			textStyle: "prose",
+			...edges
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/recipes/radio-group.ts
+const radioGroup = defineSlotRecipe({
+	className: "koi-radio-group",
+	slots: [
+		"root",
+		"item",
+		"control",
+		"indicator",
+		"text",
+		"label",
+		"description"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "3"
+		},
+		item: choiceRow.root,
+		text: choiceRow.text,
+		label: choiceRow.label,
+		description: choiceRow.description,
+		control: {
+			...choiceControl,
+			borderRadius: "full"
+		},
+		indicator: {
+			width: toPx(components.radio.dot),
+			height: toPx(components.radio.dot),
+			borderRadius: "full",
+			bg: "on-action",
+			transform: "scale(0)",
+			transition: "transform {durations.check} {easings.spring}",
+			[`&${state.checked}`]: { transform: "scale(1)" }
+		}
+	},
+	variants: { orientation: {
+		vertical: {},
+		horizontal: { root: {
+			flexDirection: "row",
+			flexWrap: "wrap",
+			gap: "6"
+		} }
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+//#region src/recipes/select.ts
+const INVALID = "&:has(> select[aria-invalid=true])";
+const DISABLED = "&:has(> select:disabled)";
+const select = defineSlotRecipe({
+	className: "koi-select",
+	slots: [
+		"root",
+		"el",
+		"chevron"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			width: "100%",
+			boxSizing: "border-box",
+			bg: "surface",
+			borderWidth: `${components.stroke.hairline}px`,
+			borderStyle: "solid",
+			borderColor: "border-control",
+			borderRadius: "xl",
+			color: "text",
+			fontFamily: "sans",
+			transitionProperty: "border-color, box-shadow",
+			transitionDuration: "fast",
+			"&:hover:not(:focus-within, :has(> select:disabled, > select[aria-invalid=true]))": { borderColor: "border-control-hover" },
+			"&:focus-within": {
+				borderColor: "focus-ring",
+				boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.focus-ring}`
+			},
+			[INVALID]: { borderColor: "error-control" },
+			[`${INVALID}:focus-within`]: { boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.error-control}` },
+			[DISABLED]: {
+				bg: "surface-muted",
+				color: "text-disabled",
+				borderColor: "border",
+				cursor: "not-allowed"
+			}
+		},
+		el: {
+			flex: "1",
+			minWidth: "0",
+			height: "100%",
+			m: "0",
+			pe: toPx(components.field.chevronSpace),
+			borderWidth: "0",
+			borderRadius: "inherit",
+			outline: "none",
+			bg: "transparent",
+			color: "inherit",
+			font: "inherit",
+			lineHeight: toPx(components.field.lineHeight),
+			appearance: "none",
+			cursor: "pointer",
+			textOverflow: "ellipsis",
+			"&:not(:disabled):has(> option[value=\"\"]:checked)": { color: "text-muted" },
+			"& option": {
+				color: "text",
+				bg: "surface"
+			},
+			_disabled: { cursor: "not-allowed" }
+		},
+		chevron: {
+			position: "absolute",
+			insetInlineEnd: toPx(components.field.chevronInset),
+			display: "inline-flex",
+			pointerEvents: "none",
+			color: "text-muted",
+			"& > svg": {
+				width: "icon",
+				height: "icon"
+			},
+			":has(> select:disabled) > &": { color: "text-disabled" }
+		}
+	},
+	variants: { size: {
+		sm: {
+			root: {
+				height: "control-sm",
+				textStyle: "small"
+			},
+			el: { ps: toPx(components.field.paddingXSm) }
+		},
+		md: {
+			root: {
+				height: "control-md",
+				textStyle: "body"
+			},
+			el: { ps: toPx(components.field.paddingXMd) }
+		},
+		lg: {
+			root: {
+				height: "control-lg",
+				textStyle: "body"
+			},
+			el: { ps: toPx(components.field.paddingXLg) }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+const OPEN = `:is(:focus, ${state.popupOpen})`;
+const BAD = `:is([aria-invalid=true], ${state.invalid}):not(${state.disabled})`;
+const selectPanel = defineSlotRecipe({
+	className: "koi-select-panel",
+	slots: [
+		"trigger",
+		"value",
+		"icon",
+		"positioner",
+		"popup",
+		"search",
+		"searchInput",
+		"list",
+		"empty",
+		"item",
+		"itemText",
+		"itemIndicator",
+		"group",
+		"groupLabel",
+		"separator"
+	],
+	base: {
+		trigger: {
+			display: "flex",
+			alignItems: "center",
+			gap: "2",
+			width: "100%",
+			boxSizing: "border-box",
+			m: "0",
+			bg: "surface",
+			borderWidth: `${components.stroke.hairline}px`,
+			borderStyle: "solid",
+			borderColor: "border-control",
+			borderRadius: "xl",
+			color: "text",
+			fontFamily: "sans",
+			textAlign: "start",
+			cursor: "pointer",
+			outline: "none",
+			transitionProperty: "border-color, box-shadow",
+			transitionDuration: "fast",
+			[`&:hover:not(${OPEN}, ${state.disabled}, ${BAD})`]: { borderColor: "border-control-hover" },
+			[`&${OPEN}:not(${BAD})`]: {
+				borderColor: "focus-ring",
+				boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.focus-ring}`
+			},
+			[`&${BAD}`]: { borderColor: "error-control" },
+			[`&${BAD}${OPEN}`]: { boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.error-control}` },
+			[`&${state.disabled}`]: {
+				bg: "surface-muted",
+				color: "text-disabled",
+				borderColor: "border",
+				cursor: "not-allowed"
+			}
+		},
+		value: {
+			flex: "1",
+			minWidth: "0",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			lineHeight: toPx(components.field.lineHeight),
+			[`${state.placeholder}:not(${state.disabled}) > &`]: { color: "text-muted" }
+		},
+		icon: {
+			display: "inline-flex",
+			flex: "none",
+			marginInlineEnd: toPx(-components.selectPanel.chevronOverhang),
+			color: "text-muted",
+			transitionProperty: "transform",
+			transitionDuration: "check",
+			transitionTimingFunction: "spring",
+			"& > svg": {
+				width: "icon",
+				height: "icon"
+			},
+			[`${state.popupOpen} > &`]: { transform: "rotate(180deg)" },
+			[`${state.disabled} > &`]: { color: "text-disabled" }
+		},
+		positioner: {
+			zIndex: "popup",
+			outline: "none"
+		},
+		popup: {
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: vars.anchorWidth,
+			maxWidth: vars.availableWidth,
+			maxHeight: `min(${components.selectPanel.maxHeight}px, ${vars.availableHeight})`,
+			overflow: "hidden",
+			bg: "surface",
+			borderWidth: `${components.stroke.hairline}px`,
+			borderStyle: "solid",
+			borderColor: "border",
+			borderRadius: "xl",
+			boxShadow: "float",
+			color: "text",
+			fontFamily: "sans",
+			textStyle: "body",
+			outline: "none",
+			transformOrigin: vars.transformOrigin,
+			transition: "opacity {durations.fast} {easings.out}, transform {durations.check} {easings.spring}",
+			[`&${state.entering}, &${state.exiting}`]: {
+				opacity: "0",
+				transform: "scale(.96)"
+			},
+			[`&${state.exiting}`]: { transitionTimingFunction: "out" }
+		},
+		search: {
+			display: "flex",
+			alignItems: "center",
+			gap: "2",
+			flex: "none",
+			height: "control-md",
+			px: "3",
+			borderBottomWidth: `${components.stroke.hairline}px`,
+			borderBottomStyle: "solid",
+			borderBottomColor: "divider",
+			color: "text-muted",
+			"& > svg": {
+				flex: "none",
+				width: "icon",
+				height: "icon"
+			}
+		},
+		searchInput: {
+			flex: "1",
+			minWidth: "0",
+			height: "100%",
+			m: "0",
+			p: "0",
+			borderWidth: "0",
+			outline: "none",
+			bg: "transparent",
+			color: "text",
+			font: "inherit",
+			lineHeight: toPx(components.field.lineHeight),
+			_placeholder: { color: "text-muted" }
+		},
+		list: {
+			flex: "1",
+			minHeight: "0",
+			overflowY: "auto",
+			overscrollBehavior: "contain",
+			p: "1",
+			scrollPaddingBlock: "1",
+			outline: "none",
+			_empty: { display: "none" }
+		},
+		empty: {
+			px: "3",
+			py: "2",
+			color: "text-muted",
+			_empty: { display: "none" }
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			gap: "2",
+			boxSizing: "border-box",
+			minHeight: "control-md",
+			px: "3",
+			py: "2",
+			borderRadius: "lg",
+			color: "text",
+			lineHeight: toPx(components.field.lineHeight),
+			cursor: "pointer",
+			userSelect: "none",
+			outline: "none",
+			scrollMarginBlock: "1",
+			transitionProperty: "background-color",
+			transitionDuration: "fast",
+			[`&${state.highlighted}`]: { bg: "surface-muted" },
+			[`&${state.disabled}`]: {
+				color: "text-disabled",
+				cursor: "not-allowed"
+			}
+		},
+		itemText: {
+			flex: "1",
+			minWidth: "0"
+		},
+		itemIndicator: {
+			display: "inline-flex",
+			flex: "none",
+			color: "text-brand",
+			"& > svg": {
+				width: "icon",
+				height: "icon"
+			}
+		},
+		group: { "& + &": { mt: "1" } },
+		groupLabel: {
+			px: "3",
+			pt: "2",
+			pb: "1",
+			textStyle: "small",
+			color: "text-muted",
+			userSelect: "none"
+		},
+		separator: {
+			height: `${components.stroke.hairline}px`,
+			my: "1",
+			mx: "-1",
+			bg: "divider"
+		}
+	},
+	variants: { size: {
+		sm: { trigger: {
+			height: "control-sm",
+			px: toPx(components.field.paddingXSm),
+			textStyle: "small"
+		} },
+		md: { trigger: {
+			height: "control-md",
+			px: toPx(components.field.paddingXMd),
+			textStyle: "body"
+		} },
+		lg: { trigger: {
+			height: "control-lg",
+			px: toPx(components.field.paddingXLg),
+			textStyle: "body"
+		} }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/recipes/skeleton.ts
+const skeleton = defineRecipe({
+	className: "koi-skeleton",
+	base: {
+		backgroundColor: "skeleton",
+		backgroundImage: "linear-gradient(100deg, transparent 40%, token(colors.skeleton-highlight) 50%, transparent 60%)",
+		backgroundSize: "200vw 100%",
+		backgroundRepeat: "no-repeat",
+		backgroundAttachment: "fixed",
+		animationName: "koi-shimmer",
+		animationDuration: "shimmer",
+		animationTimingFunction: "linear",
+		animationIterationCount: "infinite",
+		color: "transparent",
+		"& > *": { visibility: "hidden" },
+		"@media (prefers-reduced-motion: reduce)": {
+			animationName: "none",
+			backgroundImage: "none"
+		}
+	}
+});
+//#endregion
+//#region src/recipes/spinner.ts
+const spinner = defineSlotRecipe({
+	className: "koi-spinner",
+	slots: ["root", "svg"],
+	base: {
+		root: {
+			display: "inline-flex",
+			flexShrink: "0",
+			color: "inherit"
+		},
+		svg: {
+			animationName: "koi-spin",
+			animationDuration: "spin",
+			animationTimingFunction: "linear",
+			animationIterationCount: "infinite",
+			"@media (prefers-reduced-motion: reduce)": { animationDuration: "spin-slow" }
+		}
+	}
+});
+//#endregion
+//#region src/recipes/switch.ts
+const switchRecipe = defineSlotRecipe({
+	className: "koi-switch",
+	slots: [
+		"root",
+		"control",
+		"thumb",
+		"label"
+	],
+	base: {
+		root: choiceRow.root,
+		label: choiceRow.label,
+		control: {
+			position: "relative",
+			flex: "none",
+			boxSizing: "border-box",
+			width: toPx(components.switch.trackWidth),
+			height: toPx(components.switch.trackHeight),
+			p: "0",
+			borderWidth: "0",
+			borderRadius: "full",
+			appearance: "none",
+			bg: "border-control",
+			cursor: "pointer",
+			transitionProperty: "background-color",
+			transitionDuration: "fast",
+			_focusVisible: focusRing,
+			[`&${state.checked}`]: { bg: "control-checked" },
+			[`&${state.disabled}`]: {
+				opacity: "0.5",
+				cursor: "not-allowed"
+			}
+		},
+		thumb: {
+			position: "absolute",
+			top: toPx(components.switch.thumbInset),
+			left: toPx(components.switch.thumbInset),
+			width: toPx(components.switch.thumb),
+			height: toPx(components.switch.thumb),
+			borderRadius: "full",
+			bg: "white",
+			boxShadow: "raised",
+			transition: "transform {durations.spring} {easings.spring}",
+			[`&${state.checked}`]: { transform: `translateX(${components.switch.trackWidth - components.switch.thumb - 2 * components.switch.thumbInset}px)` }
+		}
+	}
+});
+//#endregion
+//#region src/recipes/table.ts
+const table = defineSlotRecipe({
+	className: "koi-table",
+	slots: [
+		"container",
+		"root",
+		"header",
+		"body",
+		"footer",
+		"row",
+		"headerCell",
+		"cell",
+		"sortButton",
+		"empty",
+		"caption",
+		"skeleton"
+	],
+	base: {
+		container: {
+			width: "100%",
+			overflowX: "auto"
+		},
+		root: {
+			width: "100%",
+			borderCollapse: "collapse",
+			fontFamily: "sans",
+			textStyle: "body",
+			color: "text",
+			fontVariantNumeric: "tabular-nums"
+		},
+		header: {},
+		body: {},
+		footer: {},
+		row: {
+			transitionProperty: "background-color",
+			transitionDuration: "fast",
+			"tbody > &": { height: toPx(components.table.rowHeight) },
+			"tbody > &:hover": { bg: "table-row-hover" },
+			"tbody > &[data-koi-selected]": { bg: "action-subtle" },
+			"tbody > &[data-koi-selected]:hover": { bg: "action-subtle-hover" }
+		},
+		headerCell: {
+			px: "4",
+			py: "2",
+			borderBottomWidth: `${components.stroke.hairline}px`,
+			borderBottomStyle: "solid",
+			borderBottomColor: "divider",
+			textAlign: "start",
+			verticalAlign: "middle",
+			textStyle: "label",
+			color: "text-muted",
+			whiteSpace: "nowrap"
+		},
+		cell: {
+			px: "4",
+			py: "2",
+			borderBottomWidth: `${components.stroke.hairline}px`,
+			borderBottomStyle: "solid",
+			borderBottomColor: "divider",
+			textAlign: "start",
+			verticalAlign: "middle",
+			whiteSpace: "nowrap"
+		},
+		sortButton: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "1",
+			m: "0",
+			p: "0",
+			borderWidth: "0",
+			borderRadius: "sm",
+			bg: "transparent",
+			color: "inherit",
+			font: "inherit",
+			textAlign: "inherit",
+			cursor: "pointer",
+			transitionProperty: "color",
+			transitionDuration: "fast",
+			_hover: { color: "text" },
+			_focusVisible: focusRing,
+			"[aria-sort] > &": { color: "text" },
+			"& > svg": {
+				flex: "none",
+				width: "icon-sm",
+				height: "icon-sm",
+				color: "text-muted"
+			},
+			"[aria-sort] > & > svg": { color: "text" }
+		},
+		empty: {
+			py: "10",
+			px: "4",
+			textAlign: "center",
+			color: "text-muted",
+			whiteSpace: "normal"
+		},
+		caption: { srOnly: true },
+		skeleton: {
+			display: "inline-block",
+			maxWidth: "100%",
+			verticalAlign: "middle",
+			borderRadius: "sm"
+		}
+	},
+	variants: {
+		layout: {
+			auto: {},
+			fixed: { root: {
+				tableLayout: "fixed",
+				"& :is(th, td)": {
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				}
+			} }
+		},
+		align: {
+			start: {},
+			center: {
+				headerCell: { textAlign: "center" },
+				cell: { textAlign: "center" }
+			},
+			end: {
+				headerCell: { textAlign: "end" },
+				cell: { textAlign: "end" }
+			}
+		},
+		paddingBlock: {
+			default: {},
+			none: {
+				headerCell: { py: "0" },
+				cell: { py: "0" }
+			}
+		}
+	},
+	defaultVariants: {
+		layout: "auto",
+		align: "start",
+		paddingBlock: "default"
+	}
+});
+//#endregion
+//#region src/recipes/tabs.ts
+const tabs = defineSlotRecipe({
+	className: "koi-tabs",
+	slots: [
+		"root",
+		"list",
+		"tab",
+		"indicator",
+		"panel"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "4"
+		},
+		list: {
+			position: "relative",
+			isolation: "isolate",
+			display: "inline-flex",
+			alignSelf: "flex-start",
+			gap: "1",
+			p: "1",
+			borderRadius: "full",
+			bg: "surface-muted"
+		},
+		tab: {
+			flex: "none",
+			height: "control-md",
+			px: "4",
+			m: "0",
+			borderWidth: "0",
+			borderRadius: "full",
+			bg: "transparent",
+			fontFamily: "sans",
+			textStyle: "body",
+			fontWeight: "normal",
+			whiteSpace: "nowrap",
+			color: "text-muted",
+			cursor: "pointer",
+			userSelect: "none",
+			transitionProperty: "color",
+			transitionDuration: "fast",
+			_focusVisible: focusRing,
+			[`&${state.selected}:not(${state.disabled})`]: {
+				color: "text",
+				fontWeight: "bold"
+			},
+			[`&:hover:not(${state.selected}, ${state.disabled})`]: { color: "text" },
+			[`&${state.disabled}`]: {
+				color: "text-disabled",
+				cursor: "not-allowed"
+			}
+		},
+		indicator: {
+			position: "absolute",
+			zIndex: "-1",
+			top: "0",
+			left: "0",
+			width: `[${vars.activeTabWidth}]`,
+			height: `[${vars.activeTabHeight}]`,
+			translate: `[${vars.activeTabLeft} ${vars.activeTabTop}]`,
+			borderRadius: "full",
+			bg: "surface",
+			boxShadow: "raised",
+			transitionProperty: "translate, width",
+			transitionDuration: "spring",
+			transitionTimingFunction: "spring"
+		},
+		panel: {
+			textStyle: "body",
+			borderRadius: "lg",
+			_focusVisible: focusRing
+		}
+	},
+	variants: { fullWidth: {
+		true: {
+			list: { alignSelf: "stretch" },
+			tab: { flex: "1" }
+		},
+		false: {}
+	} },
+	defaultVariants: { fullWidth: false }
+});
+//#endregion
+//#region src/recipes/tag.ts
+const TOGGLE = "> button[aria-pressed]";
+const tag = defineSlotRecipe({
+	className: "koi-tag",
+	slots: [
+		"root",
+		"toggle",
+		"icon",
+		"label",
+		"remove"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "1",
+			height: "control-sm",
+			px: toPx(components.tag.paddingX),
+			boxSizing: "border-box",
+			borderWidth: `${components.stroke.hairline}px`,
+			borderStyle: "solid",
+			borderRadius: "full",
+			fontFamily: "sans",
+			textStyle: "small",
+			whiteSpace: "nowrap",
+			transitionProperty: "background-color, color, border-color",
+			transitionDuration: "fast",
+			[`&:has(${TOGGLE}:focus-visible)`]: focusRing
+		},
+		toggle: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "1",
+			p: "0",
+			borderWidth: "0",
+			bg: "transparent",
+			color: "inherit",
+			font: "inherit",
+			cursor: "pointer",
+			userSelect: "none",
+			outline: "none",
+			_before: {
+				content: "\"\"",
+				position: "absolute",
+				inset: "[-1px]",
+				borderRadius: "full"
+			}
+		},
+		icon: {
+			display: "inline-flex",
+			flexShrink: "0",
+			"& > svg": {
+				width: "icon-sm",
+				height: "icon-sm"
+			}
+		},
+		label: {},
+		remove: {
+			position: "relative",
+			zIndex: "1",
+			flexShrink: "0",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: toPx(components.tag.remove),
+			height: toPx(components.tag.remove),
+			me: toPx(-components.tag.removeOverhang),
+			p: "0",
+			borderWidth: "0",
+			borderRadius: "full",
+			bg: "transparent",
+			color: "text-muted",
+			cursor: "pointer",
+			transitionProperty: "background-color, color",
+			transitionDuration: "fast",
+			_after: {
+				content: "\"\"",
+				position: "absolute",
+				inset: "[-4px]",
+				borderRadius: "full"
+			},
+			_hover: {
+				bg: "surface-muted",
+				color: "text"
+			},
+			_focusVisible: focusRing,
+			"& > svg": {
+				width: "icon-sm",
+				height: "icon-sm"
+			}
+		}
+	},
+	variants: { selected: {
+		false: { root: {
+			bg: "surface",
+			borderColor: "border",
+			color: "text",
+			[`&:has(${TOGGLE}:hover)`]: { bg: "surface-muted" }
+		} },
+		true: {
+			root: {
+				bg: "action-subtle",
+				borderColor: "transparent",
+				color: "on-action-subtle",
+				[`&:has(${TOGGLE}:hover)`]: { bg: "action-subtle-hover" }
+			},
+			remove: {
+				color: "on-action-subtle",
+				_hover: {
+					bg: "action-subtle-hover",
+					color: "on-action-subtle"
+				}
+			}
+		}
+	} },
+	defaultVariants: { selected: false }
+});
+//#endregion
+//#region src/recipes/textarea.ts
+const textarea = defineRecipe({
+	className: "koi-textarea",
+	base: {
+		display: "block",
+		width: "100%",
+		boxSizing: "border-box",
+		minHeight: toPx(components.textarea.minHeight),
+		m: "0",
+		py: "2",
+		px: "3",
+		resize: "vertical",
+		bg: "surface",
+		color: "text",
+		borderWidth: `${components.stroke.hairline}px`,
+		borderStyle: "solid",
+		borderColor: "border-control",
+		borderRadius: "xl",
+		outline: "none",
+		fontFamily: "sans",
+		textStyle: "body",
+		transitionProperty: "border-color, box-shadow",
+		transitionDuration: "fast",
+		_placeholder: { color: "text-muted" },
+		"&:hover:not(:focus, :disabled, [aria-invalid=true])": { borderColor: "border-control-hover" },
+		"&:focus": {
+			borderColor: "focus-ring",
+			boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.focus-ring}`
+		},
+		"&[aria-invalid=true]": { borderColor: "error-control" },
+		"&[aria-invalid=true]:focus": {
+			borderColor: "error-control",
+			boxShadow: `0 0 0 ${components.stroke.hairline}px {colors.error-control}`
+		},
+		"&:disabled": {
+			bg: "surface-muted",
+			color: "text-disabled",
+			borderColor: "border",
+			cursor: "not-allowed",
+			"&::placeholder": { color: "text-disabled" }
+		}
+	}
+});
+//#endregion
+//#region src/recipes/toast.ts
+const shift = `calc(${vars.toastOffsetY} + ${vars.toastIndex} * token(spacing.2))`;
+const swipeX = vars.toastSwipeX;
+const swipeY = vars.toastSwipeY;
+function stacked(edge) {
+	const y = `calc(${swipeY} ${edge === "bottom" ? "-" : "+"} var(--koi-toast-shift))`;
+	return defineStyles({
+		position: "absolute",
+		...edge === "bottom" ? { bottom: "0" } : { top: "0" },
+		insetInline: "0",
+		width: "100%",
+		maxWidth: "none",
+		userSelect: "none",
+		"--koi-toast-shift": shift,
+		transform: `translateX(${swipeX}) translateY(${y})`,
+		[`&${state.entering}`]: {
+			opacity: "0",
+			transform: `translateY(${edge === "bottom" ? "" : "-"}${components.toast.enterOffset}px) scale(.96)`
+		},
+		[`&${state.exiting}`]: {
+			opacity: "0",
+			transform: `translateY(${y}) scale(.96)`
+		},
+		[`&${state.exiting}${state.swiped.left}`]: { transform: `translateX(calc(${swipeX} - 150%)) translateY(${y})` },
+		[`&${state.exiting}${state.swiped.right}`]: { transform: `translateX(calc(${swipeX} + 150%)) translateY(${y})` },
+		[`&${state.exiting}${state.swiped.up}`]: { transform: `translateY(calc(${y} - 150%))` },
+		[`&${state.exiting}${state.swiped.down}`]: { transform: `translateY(calc(${y} + 150%))` }
+	});
+}
+const toast = defineSlotRecipe({
+	className: "koi-toast",
+	slots: [
+		"viewport",
+		"root",
+		"icon",
+		"content",
+		"title",
+		"description",
+		"action",
+		"close"
+	],
+	base: {
+		viewport: {
+			position: "fixed",
+			zIndex: "toast",
+			insetInline: "0",
+			mx: "auto",
+			width: toPx(components.toast.width),
+			maxWidth: `calc(100vw - ${2 * space[4]}px)`,
+			outline: "none"
+		},
+		root: {
+			position: "relative",
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "3",
+			boxSizing: "border-box",
+			width: toPx(components.toast.width),
+			maxWidth: `calc(100vw - ${2 * space[4]}px)`,
+			p: "4",
+			bg: "surface-glass-tint",
+			backdropFilter: "blur(var(--blurs-float))",
+			borderRadius: "panel",
+			boxShadow: "float",
+			color: "text",
+			fontFamily: "sans",
+			textStyle: "body",
+			transition: "opacity token(durations.overlay) token(easings.out), transform token(durations.spring) token(easings.spring)",
+			_focusVisible: focusRing,
+			[`&${state.exiting}`]: {
+				transitionDuration: "overlay",
+				transitionTimingFunction: "out"
+			}
+		},
+		icon: {
+			flex: "none",
+			display: "inline-flex",
+			mt: toPx(components.toast.iconOffset),
+			"& > svg": {
+				width: "icon-lg",
+				height: "icon-lg"
+			}
+		},
+		content: {
+			flex: "1",
+			minWidth: "0",
+			display: "flex",
+			flexDirection: "column",
+			gap: "1"
+		},
+		title: {
+			m: "0",
+			textStyle: "heading-3"
+		},
+		description: {
+			m: "0",
+			textStyle: "body",
+			color: "text-muted"
+		},
+		action: {
+			flex: "none",
+			display: "flex",
+			alignSelf: "center",
+			gap: "2"
+		},
+		close: {
+			position: "absolute",
+			top: "4",
+			insetInlineEnd: "3",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: toPx(components.closeButton.size),
+			height: toPx(components.closeButton.size),
+			p: "0",
+			borderWidth: "0",
+			borderRadius: "full",
+			bg: "transparent",
+			color: "inherit",
+			cursor: "pointer",
+			transitionProperty: "background-color",
+			transitionDuration: "fast",
+			_hover: { bg: "divider" },
+			_focusVisible: focusRing,
+			"& > svg": {
+				width: "icon",
+				height: "icon"
+			}
+		}
+	},
+	variants: {
+		tone: {
+			info: { icon: { color: "text-brand" } },
+			success: { icon: { color: "text-brand" } },
+			warning: { icon: { color: "warning-text" } },
+			error: { icon: { color: "error-text" } }
+		},
+		closable: {
+			true: { root: { pe: toPx(components.toast.closableInset) } },
+			false: {}
+		},
+		position: {
+			static: {},
+			bottom: {
+				viewport: { bottom: "4" },
+				root: stacked("bottom")
+			},
+			top: {
+				viewport: { top: "4" },
+				root: stacked("top")
+			}
+		}
+	},
+	defaultVariants: {
+		tone: "info",
+		closable: false,
+		position: "static"
+	}
+});
+//#endregion
+//#region src/recipes/tooltip.ts
+const tooltip = defineSlotRecipe({
+	className: "koi-tooltip",
+	slots: ["positioner", "popup"],
+	base: {
+		positioner: { zIndex: "tooltip" },
+		popup: {
+			boxSizing: "border-box",
+			width: "max-content",
+			maxWidth: toPx(components.tooltip.maxWidth),
+			px: "2",
+			py: "1",
+			borderRadius: "lg",
+			bg: "tooltip-bg",
+			color: "tooltip-text",
+			fontFamily: "sans",
+			textStyle: "small",
+			overflowWrap: "break-word",
+			outline: "none",
+			transitionProperty: "opacity",
+			transitionDuration: "fast",
+			transitionTimingFunction: "out",
+			[`&${state.entering}, &${state.exiting}`]: { opacity: "0" },
+			[`&${state.instantClose}`]: { transitionDuration: "0s" }
+		}
+	}
+});
+//#endregion
+//#region src/recipes/index.ts
+const recipes = {
+	button,
+	chatBubble,
+	prose,
+	separator,
+	skeleton,
+	textarea
+};
+const slotRecipes = {
+	alert,
+	avatar,
+	badge,
+	card,
+	checkbox,
+	dialog,
+	field,
+	input,
+	link,
+	pagination,
+	progress,
+	radioGroup,
+	select,
+	selectPanel,
+	spinner,
+	switchRecipe,
+	table,
+	tabs,
+	tag,
+	toast,
+	tooltip
+};
+//#endregion
+//#region panda.base.ts
+function koiPandaConfig(options) {
+	return defineConfig({
+		presets: ["@pandacss/preset-base", koiPreset],
+		include: options.include,
+		exclude: [],
+		outdir: options.outdir,
+		importMap: "@tuuject/koi-react/styled-system",
+		jsxFramework: "react",
+		jsxStyleProps: "none",
+		preflight: true,
+		strictTokens: false,
+		theme: { extend: {
+			recipes,
+			slotRecipes,
+			breakpoints: { md: "768px" }
+		} },
+		staticCss: { recipes: "*" },
+		globalCss
+	});
+}
+//#endregion
+//#region \0panda-lib-preset-entry
+const __panda_lib_resolved = await defineConfig(koiPandaConfig({
+	include: ["./src/**/*.{ts,tsx}"],
+	outdir: "styled-system"
+}));
+if (!((value) => {
+	if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+})(__panda_lib_resolved)) throw new Error("Config must export or return an object.");
+const { designSystem, include, exclude, outdir, cwd, watch, clean, gitignore, importMap, ...preset } = __panda_lib_resolved;
+//#endregion
+export { preset as default };