@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/styles/supplement.json

@@ -0,0 +1,54 @@
+{
+  "cn-accordion": "flex flex-col",
+  "cn-accordion-content": "overflow-hidden",
+  "cn-accordion-trigger": "relative flex-1 items-start border border-transparent disabled:pointer-events-none disabled:opacity-50",
+  "cn-alert-description": "[&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+  "cn-alert-dialog-content": "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 outline-none",
+  "cn-alert-title": "[&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+  "cn-avatar": "after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+  "cn-avatar-badge": "bg-blend-color",
+  "cn-avatar-image": "object-cover",
+  "cn-breadcrumb-list": "wrap-break-word",
+  "cn-button": "select-none",
+  "cn-card-header": "has-data-[slot=card-description]:grid-rows-[auto_auto]",
+  "cn-checkbox": "relative after:absolute after:-inset-x-3 after:-inset-y-2",
+  "cn-context-menu-checkbox-item": "data-disabled:pointer-events-none data-disabled:opacity-50",
+  "cn-context-menu-content": "max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin)",
+  "cn-context-menu-item": "data-disabled:pointer-events-none data-disabled:opacity-50",
+  "cn-context-menu-radio-item": "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "cn-context-menu-sub-content": "origin-(--radix-context-menu-content-transform-origin)",
+  "cn-dialog-content": "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+  "cn-dropdown-menu-checkbox-item": "data-disabled:pointer-events-none data-disabled:opacity-50",
+  "cn-dropdown-menu-content": "max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) data-[state=closed]:overflow-hidden",
+  "cn-dropdown-menu-item": "data-disabled:pointer-events-none data-disabled:opacity-50",
+  "cn-dropdown-menu-radio-item": "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "cn-dropdown-menu-sub-content": "origin-(--radix-dropdown-menu-content-transform-origin)",
+  "cn-empty": "w-full",
+  "cn-field-description": "group-has-data-horizontal/field:text-balance",
+  "cn-field-orientation-horizontal": "*:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+  "cn-field-orientation-responsive": "*:w-full @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+  "cn-field-orientation-vertical": "*:w-full",
+  "cn-hover-card-content": "origin-(--radix-hover-card-content-transform-origin)",
+  "cn-menubar-checkbox-item": "data-disabled:pointer-events-none",
+  "cn-menubar-checkbox-item-indicator": "absolute flex items-center justify-center",
+  "cn-menubar-content": "origin-(--radix-menubar-content-transform-origin) overflow-hidden",
+  "cn-menubar-item": "data-disabled:pointer-events-none",
+  "cn-menubar-radio-item": "data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "cn-menubar-radio-item-indicator": "absolute flex items-center justify-center",
+  "cn-menubar-separator": "-mx-1 my-1 h-px",
+  "cn-menubar-shortcut": "ms-auto",
+  "cn-menubar-sub-content": "origin-(--radix-menubar-content-transform-origin)",
+  "cn-menubar-sub-trigger": "outline-none",
+  "cn-popover-content": "z-50 origin-(--radix-popover-content-transform-origin)",
+  "cn-progress": "relative flex items-center overflow-x-hidden",
+  "cn-radio-group": "w-full",
+  "cn-radio-group-item": "relative after:absolute after:-inset-x-3 after:-inset-y-2",
+  "cn-switch": "after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+  "cn-switch-thumb": "pointer-events-none block ring-0 transition-transform",
+  "cn-tabs": "data-horizontal:flex-col",
+  "cn-tabs-list": "group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  "cn-tabs-trigger": "group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start",
+  "cn-toggle-group": "flex-row gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
+  "cn-toggle-group-item": "cursor-default select-none aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+  "cn-tooltip-content": "max-w-xs origin-(--radix-tooltip-content-transform-origin)"
+}

package/packages/registry/styles/tw-animate.css

@@ -0,0 +1,6 @@
+/* Ported from tw-animate-css 1.4.0 (dist/tw-animate.css), MIT, Copyright (c) 2025
+   Wombosvideo. The enter and exit animation utilities (animate-in, fade-in-0,
+   zoom-in-95, slide-in-from-*) the shadcn/ui styles use. Vendored as CSS
+   rather than installed, since the kit takes no third-party dependency
+   (#1666). See packages/ui/THIRD_PARTY_NOTICES.md. */
+@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@theme inline{--animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }}}@utility animation-duration-*{--tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]);}@utility delay-*{animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*,[duration],"initial",[*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*,[duration],"initial",[*]);}@utility repeat-*{animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]); --tw-animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]);}@utility direction-*{animation-direction: --value(--animation-direction-*,"initial",[*]); --tw-animation-direction: --value(--animation-direction-*,"initial",[*]);}@utility fill-mode-*{animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]);}@utility running{animation-play-state: running;}@utility paused{animation-play-state: paused;}@utility play-state-*{animation-play-state: --value("initial",[*]);}@utility blur-in{--tw-enter-blur: 20px;}@utility blur-in-*{--tw-enter-blur: calc(--value(number)*1px); --tw-enter-blur: --value(--blur-*,[*]);}@utility blur-out{--tw-exit-blur: 20px;}@utility blur-out-*{--tw-exit-blur: calc(--value(number)*1px); --tw-exit-blur: --value(--blur-*,[*]);}@utility fade-in{--tw-enter-opacity: 0;}@utility fade-in-*{--tw-enter-opacity: calc(--value(number)/100); --tw-enter-opacity: --value(--percentage-*,[*]);}@utility fade-out{--tw-exit-opacity: 0;}@utility fade-out-*{--tw-exit-opacity: calc(--value(number)/100); --tw-exit-opacity: --value(--percentage-*,[*]);}@utility zoom-in{--tw-enter-scale: 0;}@utility zoom-in-*{--tw-enter-scale: calc(--value(number)*1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*,[*]);}@utility -zoom-in-*{--tw-enter-scale: calc(--value(number)*-1%); --tw-enter-scale: calc(--value(ratio)*-1); --tw-enter-scale: --value(--percentage-*,[*]);}@utility zoom-out{--tw-exit-scale: 0;}@utility zoom-out-*{--tw-exit-scale: calc(--value(number)*1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*,[*]);}@utility -zoom-out-*{--tw-exit-scale: calc(--value(number)*-1%); --tw-exit-scale: calc(--value(ratio)*-1); --tw-exit-scale: --value(--percentage-*,[*]);}@utility spin-in{--tw-enter-rotate: 30deg;}@utility spin-in-*{--tw-enter-rotate: calc(--value(number)*1deg); --tw-enter-rotate: calc(--value(ratio)*360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility -spin-in{--tw-enter-rotate: -30deg;}@utility -spin-in-*{--tw-enter-rotate: calc(--value(number)*-1deg); --tw-enter-rotate: calc(--value(ratio)*-360deg); --tw-enter-rotate: --value(--rotate-*,[*]);}@utility spin-out{--tw-exit-rotate: 30deg;}@utility spin-out-*{--tw-exit-rotate: calc(--value(number)*1deg); --tw-exit-rotate: calc(--value(ratio)*360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility -spin-out{--tw-exit-rotate: -30deg;}@utility -spin-out-*{--tw-exit-rotate: calc(--value(number)*-1deg); --tw-exit-rotate: calc(--value(ratio)*-360deg); --tw-exit-rotate: --value(--rotate-*,[*]);}@utility slide-in-from-top{--tw-enter-translate-y: -100%;}@utility slide-in-from-top-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-y: calc(--value(ratio)*-100%); --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-bottom{--tw-enter-translate-y: 100%;}@utility slide-in-from-bottom-*{--tw-enter-translate-y: calc(--value(integer)*var(--spacing)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-y: calc(--value(ratio)*100%); --tw-enter-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-left{--tw-enter-translate-x: -100%;}@utility slide-in-from-left-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-in-from-right{--tw-enter-translate-x: 100%;}@utility slide-in-from-right-*{--tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-start{&:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; }}@utility slide-in-from-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-in-from-end{&:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; }}@utility slide-in-from-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}@utility slide-out-to-top{--tw-exit-translate-y: -100%;}@utility slide-out-to-top-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-y: calc(--value(ratio)*-100%); --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-bottom{--tw-exit-translate-y: 100%;}@utility slide-out-to-bottom-*{--tw-exit-translate-y: calc(--value(integer)*var(--spacing)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-y: calc(--value(ratio)*100%); --tw-exit-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-left{--tw-exit-translate-x: -100%;}@utility slide-out-to-left-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1);}@utility slide-out-to-right{--tw-exit-translate-x: 100%;}@utility slide-out-to-right-*{--tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-start{&:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; }}@utility slide-out-to-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-out-to-end{&:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; }}@utility slide-out-to-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: calc(--value(integer)*var(--spacing)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }}

package/packages/registry/themes/base-colors.js

@@ -6,8 +6,14 @@
  *
  * Pure ESM data module: imported at request time by the website's registry
  * composer (`website/modules/ui/queries/registry.server.ts`) to synthesize `theme-<color>` items
- * on demand. No build step, no committed output. Numbers match the values
- * shadcn emits in `apps/v4/public/r/themes/*.json`.
+ * on demand. No build step, no committed output.
+ *
+ * These are the kit's ORIGINAL palettes, which is what a bare
+ * `webjsui init --base-color <color>` writes, and they are kept byte stable
+ * so an existing app and the scaffold do not shift. They are NOT shadcn's
+ * current values: neutral, stone and zinc are close, while mauve, olive, mist
+ * and taupe were approximated. shadcn's palettes, verbatim, are in
+ * `themes.js`, which `init --preset` and the configurator use (#1666).
  */
 
 export const BASE_COLORS = ['neutral', 'stone', 'zinc', 'mauve', 'olive', 'mist', 'taupe'];

package/packages/registry/themes/fonts.js

@@ -0,0 +1,120 @@
+/**
+ * The 26 font families the configurator offers, ported from shadcn/ui's
+ * apps/v4/lib/font-definitions.ts (MIT) in shadcn's order (#1666), and the
+ * `registry:font` items built from them (shadcn's registry/fonts.ts).
+ *
+ * Two departures, both because a WebJs app has no next/font and no bundler:
+ *
+ *  - `family` is the family's own name ('Inter', sans-serif), not
+ *    fontsource's 'Inter Variable'. The face is loaded from a stylesheet
+ *    (Google Fonts, or self-hosted woff2 under public/), and both declare it
+ *    under its own name.
+ *  - `range` is the variable weight axis, as Google's css2 API spells it
+ *    (it refuses a range wider than the font has), so {@link googleFontsUrl}
+ *    can build the link. The values are next/font's font-data.json. A face
+ *    with no variable axis has `weights` instead.
+ *
+ * shadcn's `import` (the next/font export name) and `dependency` (the
+ * fontsource package) are kept, so an item reads the same on the wire.
+ *
+ * Pure data with no imports, so the CLI, the site and a browser can load it.
+ */
+
+/**
+ * @typedef {object} FontDefinition
+ * @property {string} name      the id: `font-<name>` is its registry item
+ * @property {string} title
+ * @property {'sans' | 'mono' | 'serif'} type
+ * @property {string} family    the CSS font-family stack
+ * @property {'--font-sans' | '--font-mono' | '--font-serif'} variable  the token a body font sets
+ * @property {string} import    next/font's export name (shadcn parity)
+ * @property {string} dependency fontsource's package (shadcn parity)
+ * @property {string} [range]   the variable weight axis, css2 spelling
+ * @property {string[]} [weights] the static weights of a non-variable face
+ */
+
+/** @type {FontDefinition[]} */
+export const FONT_DEFINITIONS = [
+  { name: 'geist', title: 'Geist', type: 'sans', family: "'Geist', sans-serif", variable: '--font-sans', import: 'Geist', dependency: '@fontsource-variable/geist', range: '100..900' },
+  { name: 'inter', title: 'Inter', type: 'sans', family: "'Inter', sans-serif", variable: '--font-sans', import: 'Inter', dependency: '@fontsource-variable/inter', range: '100..900' },
+  { name: 'noto-sans', title: 'Noto Sans', type: 'sans', family: "'Noto Sans', sans-serif", variable: '--font-sans', import: 'Noto_Sans', dependency: '@fontsource-variable/noto-sans', range: '100..900' },
+  { name: 'nunito-sans', title: 'Nunito Sans', type: 'sans', family: "'Nunito Sans', sans-serif", variable: '--font-sans', import: 'Nunito_Sans', dependency: '@fontsource-variable/nunito-sans', range: '200..1000' },
+  { name: 'figtree', title: 'Figtree', type: 'sans', family: "'Figtree', sans-serif", variable: '--font-sans', import: 'Figtree', dependency: '@fontsource-variable/figtree', range: '300..900' },
+  { name: 'roboto', title: 'Roboto', type: 'sans', family: "'Roboto', sans-serif", variable: '--font-sans', import: 'Roboto', dependency: '@fontsource-variable/roboto', range: '100..900' },
+  { name: 'raleway', title: 'Raleway', type: 'sans', family: "'Raleway', sans-serif", variable: '--font-sans', import: 'Raleway', dependency: '@fontsource-variable/raleway', range: '100..900' },
+  { name: 'dm-sans', title: 'DM Sans', type: 'sans', family: "'DM Sans', sans-serif", variable: '--font-sans', import: 'DM_Sans', dependency: '@fontsource-variable/dm-sans', range: '100..1000' },
+  { name: 'public-sans', title: 'Public Sans', type: 'sans', family: "'Public Sans', sans-serif", variable: '--font-sans', import: 'Public_Sans', dependency: '@fontsource-variable/public-sans', range: '100..900' },
+  { name: 'outfit', title: 'Outfit', type: 'sans', family: "'Outfit', sans-serif", variable: '--font-sans', import: 'Outfit', dependency: '@fontsource-variable/outfit', range: '100..900' },
+  { name: 'oxanium', title: 'Oxanium', type: 'sans', family: "'Oxanium', sans-serif", variable: '--font-sans', import: 'Oxanium', dependency: '@fontsource-variable/oxanium', range: '200..800' },
+  { name: 'manrope', title: 'Manrope', type: 'sans', family: "'Manrope', sans-serif", variable: '--font-sans', import: 'Manrope', dependency: '@fontsource-variable/manrope', range: '200..800' },
+  { name: 'space-grotesk', title: 'Space Grotesk', type: 'sans', family: "'Space Grotesk', sans-serif", variable: '--font-sans', import: 'Space_Grotesk', dependency: '@fontsource-variable/space-grotesk', range: '300..700' },
+  { name: 'montserrat', title: 'Montserrat', type: 'sans', family: "'Montserrat', sans-serif", variable: '--font-sans', import: 'Montserrat', dependency: '@fontsource-variable/montserrat', range: '100..900' },
+  { name: 'ibm-plex-sans', title: 'IBM Plex Sans', type: 'sans', family: "'IBM Plex Sans', sans-serif", variable: '--font-sans', import: 'IBM_Plex_Sans', dependency: '@fontsource-variable/ibm-plex-sans', range: '100..700' },
+  { name: 'source-sans-3', title: 'Source Sans 3', type: 'sans', family: "'Source Sans 3', sans-serif", variable: '--font-sans', import: 'Source_Sans_3', dependency: '@fontsource-variable/source-sans-3', range: '200..900' },
+  { name: 'instrument-sans', title: 'Instrument Sans', type: 'sans', family: "'Instrument Sans', sans-serif", variable: '--font-sans', import: 'Instrument_Sans', dependency: '@fontsource-variable/instrument-sans', range: '400..700' },
+  { name: 'jetbrains-mono', title: 'JetBrains Mono', type: 'mono', family: "'JetBrains Mono', monospace", variable: '--font-mono', import: 'JetBrains_Mono', dependency: '@fontsource-variable/jetbrains-mono', range: '100..800' },
+  { name: 'geist-mono', title: 'Geist Mono', type: 'mono', family: "'Geist Mono', monospace", variable: '--font-mono', import: 'Geist_Mono', dependency: '@fontsource-variable/geist-mono', range: '100..900' },
+  { name: 'noto-serif', title: 'Noto Serif', type: 'serif', family: "'Noto Serif', serif", variable: '--font-serif', import: 'Noto_Serif', dependency: '@fontsource-variable/noto-serif', range: '100..900' },
+  { name: 'roboto-slab', title: 'Roboto Slab', type: 'serif', family: "'Roboto Slab', serif", variable: '--font-serif', import: 'Roboto_Slab', dependency: '@fontsource-variable/roboto-slab', range: '100..900' },
+  { name: 'merriweather', title: 'Merriweather', type: 'serif', family: "'Merriweather', serif", variable: '--font-serif', import: 'Merriweather', dependency: '@fontsource-variable/merriweather', range: '300..900' },
+  { name: 'lora', title: 'Lora', type: 'serif', family: "'Lora', serif", variable: '--font-serif', import: 'Lora', dependency: '@fontsource-variable/lora', range: '400..700' },
+  { name: 'playfair-display', title: 'Playfair Display', type: 'serif', family: "'Playfair Display', serif", variable: '--font-serif', import: 'Playfair_Display', dependency: '@fontsource-variable/playfair-display', range: '400..900' },
+  { name: 'eb-garamond', title: 'EB Garamond', type: 'serif', family: "'EB Garamond', serif", variable: '--font-serif', import: 'EB_Garamond', dependency: '@fontsource-variable/eb-garamond', range: '400..800' },
+  { name: 'instrument-serif', title: 'Instrument Serif', type: 'serif', family: "'Instrument Serif', serif", variable: '--font-serif', import: 'Instrument_Serif', dependency: '@fontsource/instrument-serif', weights: ['400'] },
+];
+
+/** The font with this name, or undefined. */
+export function getFont(name) {
+  return FONT_DEFINITIONS.find((f) => f.name === name);
+}
+
+/**
+ * The Google Fonts stylesheet URL that serves a font at its full weight
+ * range, for an app that does not self-host it.
+ *
+ * @param {FontDefinition} font
+ */
+export function googleFontsUrl(font) {
+  const family = font.title.replace(/ /g, '+');
+  const axis = font.range ? `:wght@${font.range}` : font.weights ? `:wght@${font.weights.join(';')}` : '';
+  return `https://fonts.googleapis.com/css2?family=${family}${axis}&display=swap`;
+}
+
+/**
+ * The `registry:font` item for a font, in shadcn's shape: a body font
+ * (`font-<name>`) sets the token its type uses, a heading font
+ * (`font-heading-<name>`) sets `--font-heading`. `cssVars.theme` carries the
+ * token, so `add` merges it into the app's `@theme inline` block.
+ *
+ * @param {FontDefinition} font
+ * @param {'body' | 'heading'} role
+ */
+export function fontItem(font, role) {
+  const variable = role === 'body' ? font.variable : '--font-heading';
+  return {
+    name: role === 'body' ? `font-${font.name}` : `font-heading-${font.name}`,
+    title: role === 'body' ? font.title : `${font.title} (Heading)`,
+    type: 'registry:font',
+    description: `${font.title}, loaded from ${googleFontsUrl(font)} or self-hosted under public/.`,
+    font: {
+      family: font.family,
+      provider: 'google',
+      variable,
+      ...(font.weights ? { weight: [...font.weights] } : {}),
+      subsets: ['latin'],
+      import: font.import,
+      dependency: font.dependency,
+    },
+    // Bare token names, as every kit item's cssVars spells them (add's
+    // mergeCssVars writes `--<name>`).
+    cssVars: { theme: { [variable.slice(2)]: font.family } },
+  };
+}
+
+/** Every font item: the 26 body fonts, then the 26 heading fonts. */
+export function fontItems() {
+  return [
+    ...FONT_DEFINITIONS.map((f) => fontItem(f, 'body')),
+    ...FONT_DEFINITIONS.map((f) => fontItem(f, 'heading')),
+  ];
+}

package/packages/registry/themes/index.css

@@ -163,3 +163,5 @@
     color: CanvasText;
   }
 }
+
+/* @webjsdev/ui theme end */

package/packages/registry/themes/items.js

@@ -0,0 +1,61 @@
+/**
+ * The design-system registry items that are built from data rather than
+ * listed in registry.json (#1666): shadcn's 17 accent themes and the 52 font
+ * items. Both registry composers serve them through these two functions, the
+ * CLI's (`src/registry/local.js`) and the site's
+ * (`website/modules/ui/queries/registry.server.ts`), so the two cannot
+ * disagree.
+ *
+ * The 7 base-colour themes are not here. `theme-neutral` is a registry.json
+ * item and the other six are synthesized by each composer from
+ * `base-colors.js`, and all seven carry the theme FILE `init --base-color`
+ * writes. An accent theme carries only `cssVars`, shadcn's shape for it,
+ * since it is a layer over a base colour rather than a stylesheet of its own.
+ */
+
+import { THEMES, isBaseColor } from './themes.js';
+import { fontItems } from './fonts.js';
+
+/** The accent themes' registry items, `theme-<name>`. */
+function accentThemeItems() {
+  return THEMES.filter((t) => !isBaseColor(t.name)).map((t) => ({
+    name: `theme-${t.name}`,
+    type: 'registry:theme',
+    title: t.title,
+    description: `${t.title} accent: the primary, chart and sidebar tokens, layered over a base color`,
+    cssVars: { light: { ...t.cssVars.light }, dark: { ...t.cssVars.dark } },
+  }));
+}
+
+/**
+ * @typedef {object} DesignSystemItem
+ * @property {string} name
+ * @property {string} type
+ * @property {string} title
+ * @property {string} description
+ * @property {{ theme?: Record<string, string>, light?: Record<string, string>, dark?: Record<string, string> }} cssVars
+ * @property {Record<string, unknown>} [font]
+ */
+
+/** @type {DesignSystemItem[] | null} */
+let cache = null;
+
+/**
+ * Every data-built item, accent themes then fonts.
+ *
+ * @returns {DesignSystemItem[]}
+ */
+export function designSystemItems() {
+  if (!cache) cache = [...accentThemeItems(), ...fontItems()];
+  return cache;
+}
+
+/**
+ * One data-built item by name, or null.
+ *
+ * @param {string} name
+ * @returns {DesignSystemItem | null}
+ */
+export function designSystemItem(name) {
+  return designSystemItems().find((it) => it.name === name) || null;
+}

package/packages/registry/themes/preset.js

@@ -0,0 +1,302 @@
+/**
+ * Design-system presets (#1666): the share code the configurator prints
+ * (`npx @webjsdev/ui init --preset <code>`), and what one resolves to.
+ *
+ * THE CODE is shadcn's preset format (packages/registry/src/preset/preset.ts,
+ * MIT), kept wire compatible: a version character (`b`) and a base62 integer
+ * that bit-packs one index per field, in this order and width.
+ *
+ * | field       | bits | values (index 0 is the default)                       |
+ * |-------------|------|-------------------------------------------------------|
+ * | menuColor   | 3    | default, inverted, default-translucent, inverted-translucent |
+ * | menuAccent  | 3    | subtle, bold                                          |
+ * | radius      | 4    | default, none, small, medium, large                   |
+ * | font        | 6    | the 26 fonts, shadcn's preset order                   |
+ * | iconLibrary | 6    | lucide, hugeicons, tabler, phosphor, remixicon        |
+ * | theme       | 6    | shadcn's 25 preset themes                             |
+ * | baseColor   | 6    | neutral, stone, zinc, gray, mauve, olive, mist, taupe |
+ * | style       | 6    | nova, vega, maia, lyra, mira, luma, sera, rhea, new-york |
+ * | chartColor  | 6    | as theme (v2 codes only)                              |
+ * | fontHeading | 5    | inherit, then the 26 fonts (v2 codes only)            |
+ *
+ * A shadcn code decodes here to the same fields, and a code encoded here
+ * decodes in shadcn the same way, with one exception: `new-york` (the kit's
+ * own default style) is APPENDED to the style list, as shadcn's own
+ * compatibility rules allow, so a WebJs code naming it decodes in shadcn as
+ * index 8, which shadcn reads as out of range and treats as its first style.
+ * shadcn's `base` axis (Radix, Base UI, React Aria) is not in the code there
+ * either, and the kit has one implementation, so there is nothing to carry.
+ *
+ * A decoded value is not yet a valid choice: shadcn lists `gray` among its
+ * base colours and themes but ships no such palette, and rejects it when the
+ * config is validated. {@link resolvePresetConfig} does the same.
+ *
+ * Pure ESM with no Node imports, so a browser can encode and decode too.
+ */
+
+import { BASE_COLOR_NAMES, RADII, buildThemeVars, getTheme, themesForBaseColor } from './themes.js';
+import { getFont, googleFontsUrl } from './fonts.js';
+
+export const PRESET_STYLES = ['nova', 'vega', 'maia', 'lyra', 'mira', 'luma', 'sera', 'rhea', 'new-york'];
+export const PRESET_BASE_COLORS = ['neutral', 'stone', 'zinc', 'gray', 'mauve', 'olive', 'mist', 'taupe'];
+export const PRESET_THEMES = [
+  'neutral', 'stone', 'zinc', 'gray', 'amber', 'blue', 'cyan', 'emerald', 'fuchsia', 'green',
+  'indigo', 'lime', 'orange', 'pink', 'purple', 'red', 'rose', 'sky', 'teal', 'violet', 'yellow',
+  'mauve', 'olive', 'mist', 'taupe',
+];
+export const PRESET_CHART_COLORS = PRESET_THEMES;
+export const PRESET_ICON_LIBRARIES = ['lucide', 'hugeicons', 'tabler', 'phosphor', 'remixicon'];
+export const PRESET_FONTS = [
+  'inter', 'noto-sans', 'nunito-sans', 'figtree', 'roboto', 'raleway', 'dm-sans', 'public-sans',
+  'outfit', 'jetbrains-mono', 'geist', 'geist-mono', 'lora', 'merriweather', 'playfair-display',
+  'noto-serif', 'roboto-slab', 'oxanium', 'manrope', 'space-grotesk', 'montserrat', 'ibm-plex-sans',
+  'source-sans-3', 'instrument-sans', 'eb-garamond', 'instrument-serif',
+];
+export const PRESET_FONT_HEADINGS = ['inherit', ...PRESET_FONTS];
+export const PRESET_RADII = ['default', 'none', 'small', 'medium', 'large'];
+export const PRESET_MENU_ACCENTS = ['subtle', 'bold'];
+export const PRESET_MENU_COLORS = ['default', 'inverted', 'default-translucent', 'inverted-translucent'];
+
+const FIELDS_V1 = [
+  { key: 'menuColor', values: PRESET_MENU_COLORS, bits: 3 },
+  { key: 'menuAccent', values: PRESET_MENU_ACCENTS, bits: 3 },
+  { key: 'radius', values: PRESET_RADII, bits: 4 },
+  { key: 'font', values: PRESET_FONTS, bits: 6 },
+  { key: 'iconLibrary', values: PRESET_ICON_LIBRARIES, bits: 6 },
+  { key: 'theme', values: PRESET_THEMES, bits: 6 },
+  { key: 'baseColor', values: PRESET_BASE_COLORS, bits: 6 },
+  { key: 'style', values: PRESET_STYLES, bits: 6 },
+];
+const FIELDS_V2 = [
+  ...FIELDS_V1,
+  { key: 'chartColor', values: PRESET_CHART_COLORS, bits: 6 },
+  { key: 'fontHeading', values: PRESET_FONT_HEADINGS, bits: 5 },
+];
+
+/**
+ * @typedef {object} PresetConfig
+ * @property {string} style
+ * @property {string} baseColor
+ * @property {string} theme
+ * @property {string} [chartColor]
+ * @property {string} iconLibrary
+ * @property {string} font
+ * @property {string} fontHeading
+ * @property {string} radius
+ * @property {string} menuAccent
+ * @property {string} menuColor
+ */
+
+/**
+ * Every field at index 0: what an all-zero code decodes to. Written out
+ * rather than computed from the field table, because the module does no work
+ * at module scope: the configurator runs it in the browser, and a top-level
+ * call would pin every page importing it to the browser (see the kit's
+ * AGENTS.md). A test holds it equal to the table.
+ *
+ * @type {PresetConfig}
+ */
+export const DEFAULT_PRESET_CONFIG = {
+  menuColor: 'default',
+  menuAccent: 'subtle',
+  radius: 'default',
+  font: 'inter',
+  iconLibrary: 'lucide',
+  theme: 'neutral',
+  baseColor: 'neutral',
+  style: 'nova',
+  chartColor: 'neutral',
+  fontHeading: 'inherit',
+};
+
+const BASE62 = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+const VERSIONS = ['a', 'b'];
+
+function toBase62(num) {
+  if (num === 0) return '0';
+  let out = '';
+  let n = num;
+  while (n > 0) {
+    out = BASE62[n % 62] + out;
+    n = Math.floor(n / 62);
+  }
+  return out;
+}
+
+function fromBase62(str) {
+  let n = 0;
+  for (const ch of str) {
+    const i = BASE62.indexOf(ch);
+    if (i === -1) return -1;
+    n = n * 62 + i;
+  }
+  return n;
+}
+
+/**
+ * Encode a config as a v2 (`b`) code. An unknown value encodes as index 0,
+ * as in shadcn. A missing field takes its default, except that a missing
+ * theme follows the base colour and a missing chart colour follows the
+ * theme, so a partial config (`{ baseColor: 'stone' }`) encodes a choice
+ * {@link resolvePresetConfig} accepts rather than stone with neutral's
+ * theme. Multiplication rather than bit operators, since JavaScript's bitwise
+ * operators truncate to 32 bits and the code is 51.
+ *
+ * @param {Partial<PresetConfig>} config
+ */
+export function encodePreset(config) {
+  const theme = config.theme || config.baseColor || DEFAULT_PRESET_CONFIG.theme;
+  const given = Object.fromEntries(Object.entries(config).filter(([, v]) => v !== undefined));
+  const merged = { ...DEFAULT_PRESET_CONFIG, theme, chartColor: config.chartColor || theme, ...given };
+  let bits = 0;
+  let offset = 0;
+  for (const field of FIELDS_V2) {
+    const idx = field.values.indexOf(merged[field.key]);
+    bits += (idx === -1 ? 0 : idx) * 2 ** offset;
+    offset += field.bits;
+  }
+  return 'b' + toBase62(bits);
+}
+
+/**
+ * Decode a code to its fields, or null when it is not a code. An `a` (v1)
+ * code has no chart colour (it then follows the theme) and inherits its
+ * heading font. An index past the end of a list decodes to the default.
+ *
+ * @param {string} code
+ * @returns {PresetConfig | null}
+ */
+export function decodePreset(code) {
+  if (!isPresetCode(code)) return null;
+  const fields = code[0] === 'a' ? FIELDS_V1 : FIELDS_V2;
+  const bits = fromBase62(code.slice(1));
+  if (bits < 0) return null;
+  /** @type {Record<string, string>} */
+  const out = {};
+  let offset = 0;
+  for (const field of fields) {
+    const idx = Math.floor(bits / 2 ** offset) % 2 ** field.bits;
+    out[field.key] = idx < field.values.length ? field.values[idx] : field.values[0];
+    offset += field.bits;
+  }
+  if (code[0] === 'a') out.fontHeading = 'inherit';
+  return /** @type {PresetConfig} */ (out);
+}
+
+/** True when a string has the shape of a preset code (a version, then base62). */
+export function isPresetCode(value) {
+  if (typeof value !== 'string' || value.length < 2 || value.length > 10) return false;
+  if (!VERSIONS.includes(value[0])) return false;
+  for (let i = 1; i < value.length; i++) if (BASE62.indexOf(value[i]) === -1) return false;
+  return true;
+}
+
+/**
+ * The icon libraries an app can pick. Each is a registry item whose one file
+ * lands beside the cn() helper as `icons.ts` (see `lib/icons*.ts`), so the
+ * five export the same names and switching is a file swap.
+ */
+export const ICON_LIBRARIES = [
+  { name: 'lucide', title: 'Lucide', item: 'lib-icons', path: 'lib/icons.ts' },
+  { name: 'tabler', title: 'Tabler Icons', item: 'lib-icons-tabler', path: 'lib/icons-tabler.ts' },
+  { name: 'hugeicons', title: 'Hugeicons', item: 'lib-icons-hugeicons', path: 'lib/icons-hugeicons.ts' },
+  { name: 'phosphor', title: 'Phosphor Icons', item: 'lib-icons-phosphor', path: 'lib/icons-phosphor.ts' },
+  { name: 'remixicon', title: 'Remix Icon', item: 'lib-icons-remixicon', path: 'lib/icons-remixicon.ts' },
+];
+
+/** The icon library with this name, or undefined. */
+export function getIconLibrary(name) {
+  return ICON_LIBRARIES.find((l) => l.name === name);
+}
+
+/**
+ * Validate a decoded (or hand-built) config and fill what it leaves out:
+ * `chartColor` follows the theme, a heading font equal to the body font is
+ * `inherit`. Returns `{ config }` or `{ error }`, naming the first field that
+ * is not a choice the kit offers.
+ *
+ * @param {Partial<PresetConfig>} input
+ * @returns {{ config: PresetConfig, error?: undefined } | { error: string, config?: undefined }}
+ */
+export function resolvePresetConfig(input) {
+  const c = { ...DEFAULT_PRESET_CONFIG, ...input };
+  if (!PRESET_STYLES.includes(c.style)) return { error: `Unknown style "${c.style}"` };
+  if (!BASE_COLOR_NAMES.includes(c.baseColor)) return { error: `Unknown base color "${c.baseColor}"` };
+  if (!getTheme(c.theme) || !themesForBaseColor(c.baseColor).some((t) => t.name === c.theme)) {
+    return { error: `Theme "${c.theme}" is not available for base color "${c.baseColor}"` };
+  }
+  const chartColor = input.chartColor || c.theme;
+  if (!getTheme(chartColor) || !themesForBaseColor(c.baseColor).some((t) => t.name === chartColor)) {
+    return { error: `Chart color "${chartColor}" is not available for base color "${c.baseColor}"` };
+  }
+  if (!getIconLibrary(c.iconLibrary)) return { error: `Unknown icon library "${c.iconLibrary}"` };
+  if (!getFont(c.font)) return { error: `Unknown font "${c.font}"` };
+  if (c.fontHeading !== 'inherit' && !getFont(c.fontHeading)) return { error: `Unknown heading font "${c.fontHeading}"` };
+  if (!RADII.some((r) => r.name === c.radius)) return { error: `Unknown radius "${c.radius}"` };
+  if (!PRESET_MENU_ACCENTS.includes(c.menuAccent)) return { error: `Unknown menu accent "${c.menuAccent}"` };
+  if (!PRESET_MENU_COLORS.includes(c.menuColor)) return { error: `Unknown menu color "${c.menuColor}"` };
+  const fontHeading = c.fontHeading === c.font ? 'inherit' : c.fontHeading;
+  return { config: { ...c, chartColor, fontHeading } };
+}
+
+/**
+ * The `@theme inline` tokens a config's fonts set: the body font's own token
+ * (`--font-sans`, `--font-mono` or `--font-serif`), `--font-sans` as well
+ * when the body font is a serif or a mono, and `--font-heading`, which is the
+ * heading font or, when inherited, a reference to the body font's token. Bare
+ * names, as `cssVars.theme` spells them.
+ *
+ * `--font-sans` is Tailwind's default family, the one the page's text takes.
+ * shadcn puts its body font's class on `<body>` from the Next layout; a WebJs
+ * app has no such hook, so the body font reaches the page through this token,
+ * which is how the configurator previews it whatever its kind.
+ *
+ * @param {PresetConfig} config
+ * @returns {Record<string, string>}
+ */
+export function presetFontVars(config) {
+  const body = getFont(config.font);
+  const heading = config.fontHeading !== 'inherit' ? getFont(config.fontHeading) : undefined;
+  if (!body) return {};
+  const vars = { [body.variable.slice(2)]: body.family };
+  if (body.variable !== '--font-sans') vars['font-sans'] = body.family;
+  vars['font-heading'] = heading ? heading.family : `var(${body.variable})`;
+  return vars;
+}
+
+/**
+ * Everything a preset installs, as one `registry:base` item (shadcn's
+ * `/init` payload shape): the merged tokens, the font tokens, the items to
+ * pull (the helpers, the icon library, the font items), and the config
+ * itself under `meta`, since the kit's item schema has no `config` field.
+ *
+ * @param {PresetConfig} config a resolved config (see {@link resolvePresetConfig})
+ */
+export function buildPresetItem(config) {
+  const code = encodePreset(config);
+  const { light, dark } = buildThemeVars(config);
+  const icons = getIconLibrary(config.iconLibrary);
+  const registryDependencies = ['lib-utils', 'lib-dom', icons ? icons.item : 'lib-icons', `font-${config.font}`];
+  if (config.fontHeading !== 'inherit') registryDependencies.push(`font-heading-${config.fontHeading}`);
+  return {
+    $schema: 'https://ui.webjs.dev/schema/registry-item.json',
+    name: `preset-${code}`,
+    type: 'registry:base',
+    title: `${config.style} / ${config.baseColor} / ${config.theme}`,
+    description: `The design system for preset ${code}. Install it with: npx @webjsdev/ui init --preset ${code}`,
+    dependencies: ['@webjsdev/core'],
+    registryDependencies,
+    cssVars: { theme: presetFontVars(config), light, dark },
+    meta: { preset: code, config: { ...config } },
+  };
+}
+
+/**
+ * The Google Fonts stylesheet URLs a config's fonts need, body first.
+ *
+ * @param {PresetConfig} config
+ */
+export function presetFontUrls(config) {
+  const names = [config.font, config.fontHeading].filter((n, i, all) => n && n !== 'inherit' && all.indexOf(n) === i);
+  return names.map((n) => getFont(n)).filter(Boolean).map((f) => googleFontsUrl(/** @type {any} */ (f)));
+}