@glasshome/ui 1.1.2 → 1.3.0

package/SPEC.md

@@ -0,0 +1,149 @@
+# @glasshome/ui — design system contract
+
+Shared by **hub** (Astro + Solid islands) and **dash** (Solid). Read this before
+building or styling any UI in either app. `bun run dev:gallery` (in this
+package) serves a live gallery of every primitive, hot-reloading against src;
+treat it as the executable form of this document.
+
+## The one material
+
+Glass is a single CSS formula: the `.glass` class in `src/styles/globals.css`,
+driven by `--glass-*` custom-property knobs. There are no other glass
+implementations. Never hand-roll `backdrop-blur` + translucent `bg-*` panels.
+
+```
+.glass         neutral pane: card fill, border edge, lit rim, no tint
+.glass-tint    + tinted look driven by --glass-tone (badge/alert/button/chip)
+.glass-sink    rim flipped concave: the surface reads dug-out (fields)
+```
+
+Knobs (typed `@property`, `inherits: false` — a knob set on a parent never
+leaks into a nested glass element; set knobs on the element itself):
+
+| Knob | Type | Default | Meaning |
+|---|---|---|---|
+| `--glass-tone` | color | `transparent` | tint color; every tone term is inert when transparent |
+| `--glass-base` | color | `var(--card)` | ground fill; carry alpha for translucency (`color-mix(in srgb, var(--card) 60%, transparent)`) |
+| `--glass-edge` | color | border 60% | border color (`.glass-tint` derives it from the tone) |
+| `--glass-wash` | % | 28% | tone gradient strength (second stop = wash-2) |
+| `--glass-tone-2` | color | `var(--glass-tone)` | second tint stop; ordinary property re-declared per `.glass` (no leak), not `@property` |
+| `--glass-wash-2` | % | wash/3 | second stop strength; raise to `var(--glass-wash)` for an equal-strength two-tone wash |
+| `--glass-wash-angle` | angle | 135deg | tone wash direction; 90deg for horizontal fills (sliders) |
+
+Two-tone surfaces add `.glass-edge-gradient`: border-color cannot gradient, so
+the class swaps the border for a masked 1px ring running tone-1→tone-2 at the
+`.glass-tint` edge alpha (element must be positioned).
+| `--glass-light` | number | 0.05 | top-left white sheen (`.glass-tint` raises to 0.16) |
+| `--glass-sheen` | `<x> <y>` | 120% 120% | sheen ellipse size; pin lengths on edge-anchored panels, where a percentage stretches into a blob over a flat field (side sheets use `600px 300px`) |
+| `--glass-shade` | number | 0 | bottom-right dark shade (light-theme depth) |
+| `--glass-glow` | % | 16% | inner tone glow |
+| `--glass-drop` | % | 20% | tone drop shadow |
+| `--glass-lift` | number | 0 | elevation shadow (cards 0.45, overlays 0.6) |
+| `--glass-rim` | number | 1 | bevel strength 0..1 (cards 0.3, overlays 1) |
+| `--glass-text` | % | 65% | tinted text mix, used by `.glass-tint` only |
+
+`.glass` also publishes `--surface-tone`, an ordinary **inheriting** property
+mirroring that surface's `--glass-tone`. Descendants that need the accent (an
+icon, a label) read `--surface-tone`; reading `--glass-tone` from a child
+silently yields `transparent` and paints nothing, because the knobs do not
+inherit by design. A nested `.glass` re-declares `--surface-tone` from its own
+knob, so the no-leak guarantee still holds.
+
+The `.glass` formula is deliberately **unlayered**, so it owns
+border/background/box-shadow on the element: `bg-*`, `border-*`, and `shadow-*`
+utilities on a glass element are no-ops. Tune via knobs instead.
+
+`backdrop-blur` is not part of the formula. Cards add `CARD_BLUR` and overlays
+`OVERLAY_BLUR` (both read the `--glass-blur` px knob); toasts and other
+transform-animated surfaces must not blur (Chromium renders black
+mid-animation), and a surface that skips the blur takes an opaque fill
+(`CARD_SURFACE_OPAQUE`, `OVERLAY_SURFACE_OPAQUE`) — a translucent fill with
+nothing blurred behind it is just see-through.
+
+Mixing rules: tone washes mix in **srgb** (oklch drags a tone mixed toward
+transparent down to mud); tinted text mixes in **oklab** (no hue channel, so a
+tone desaturates without swinging yellow — `glassToneText()`).
+
+## Surfaces (the only sanctioned recipes)
+
+| Recipe | File | Wear it for |
+|---|---|---|
+| `CARD_SURFACE` / `CARD_SURFACE_OPAQUE` | lib/card-classes.ts | panels; via `<Card>` |
+| `CARD_SURFACE_BASE` + `CARD_BLUR` | lib/card-classes.ts | perf-blur gating (dash SectionCard) |
+| `OVERLAY_SURFACE` | lib/overlay-classes.ts | anything floating: menus, dialogs, sheets, tooltips |
+| `OVERLAY_SURFACE_BASE` + `OVERLAY_BLUR` | lib/overlay-classes.ts | perf-blur gating, same split as the card recipe |
+| `OVERLAY_SURFACE_OPAQUE` | lib/overlay-classes.ts | drag-animated overlays that cannot blur (BottomSheet) |
+| `SCRIM_CLASS` | lib/overlay-classes.ts | modal backdrop (BottomSheet keeps its unblurred scrim for mobile perf) |
+| `INPUT_SURFACE` / `INPUT_CLASS` | lib/input-classes.ts | text fields + pickers (concave) |
+| `FIELD_CHROME` | lib/input-classes.ts | toggle chrome and rails (checkbox box, radio ring, switch track, slider rail, chart wells) |
+| `TRACK_SURFACE` | lib/card-classes.ts | segmented tracks (tabs, toggle groups) |
+
+**Fields are not symmetric across the themes.** The recess is `.glass-sink`'s
+rim, which is theme independent; the fill under it is not. On the dark ground a
+field sits a touch ABOVE its card (card 0.17, `--input` 0.19) and reads as
+dug-out. Applying the same idea downward in the light theme puts a 0.9 fill
+under a 0.995 card — a nine-point drop, which is the cue this library (and every
+browser) spends on `disabled`, so a form of nine fields reads switched off. So
+`INPUT_SURFACE` takes its knobs from a theme-owned pair, `--field` /
+`--field-edge`: light fields sit AT the card with a solid `--border` edge (the
+boundary still measures 1.33:1 against the card, exactly what the fill drop used
+to carry), dark fields keep `--input` and the formula's soft 60% edge. Controls
+that must read as an *empty well* rather than a fillable field — the toggle
+chrome and rails — stay on `--input` in both themes via `FIELD_CHROME`.
+
+Semantic roles (`--success`, `--warning`, `--destructive`, `--ring`) are one
+value each, worn as fill and as text, so each theme tunes its own: the light
+values are darker than their dark-theme counterparts, not the same color. Every
+role clears 4.5:1 against `--background`/`--card`/`--popover`/`--muted` (3:1 for
+`--ring`, a focus indicator), enforced by `tests/tokens/contrast.test.ts`.
+
+## One door per concept
+
+| Need | Use | Never |
+|---|---|---|
+| a panel | `<Card>` (Solid or `astro/Card.astro`) | `border bg-card/NN backdrop-blur` |
+| a floating panel | `<Overlay>` / the overlay-wearing primitive | raw `bg-popover shadow` |
+| a modal | `<ResponsiveDialog>` (desktop dialog + mobile bottom sheet), `<Dialog>` for desktop-only | `<Sheet side="bottom">` as a modal |
+| a status chip | `<Badge tone="var(--success)">` | `rounded-full bg-green-500/10` |
+| a callout | `<Alert tone="warning">` | `border-amber-500/30 bg-amber-500/10` |
+| tinted text alone | `glassToneText(tone)` | ad-hoc color-mix |
+| a metallic tier chip | `<TierBadge>` | gradients by hand |
+
+In server-run `.astro` frontmatter you cannot import `@glasshome/ui/solid`
+(Solid `template()` throws at module load). Use the `@glasshome/ui/astro`
+components, or the pure recipes/tokens from the root `@glasshome/ui`.
+
+## Prop language
+
+- `tone` — a CSS **color** string on glass primitives (`Badge`, indicators).
+  `Alert.tone` is the one semantic enum (`info|warning|success|destructive`);
+  it keys the `ALERT_TONES` table.
+- `as` — polymorphic element/component. Never `component`.
+- `variant` — cva **style** axis only. Layout choices get their own prop
+  (`WidgetCard.layout = "row" | "tile"`).
+- Every rendered part carries `data-slot="<component>-<part>"`
+  (bottom-sheet's `data-sheet-*` attributes are functional drag hooks, not
+  slots).
+- All color comes from theme vars (`var(--primary)` etc.). No hex/oklch
+  literals in components except neutral black/white shadow alphas.
+
+## Extending the system
+
+Checklist for a new component:
+
+1. Wear an existing surface recipe (or compose `.glass` + knobs). If a new
+   surface is genuinely needed, add it as a named recipe in `lib/`, once.
+2. Props follow the language above; class merging via `cn(...)`, pass-through
+   `class` last.
+3. `data-slot` on every rendered part.
+4. Astro twin only if server-rendered pages need it; share every class string
+   through a pure `lib/` file, never duplicate it.
+5. Export via `src/solid/index.ts` (components) and root `src/index.ts` (pure
+   recipes needed by SSR).
+6. Register a specimen in the gallery (`dev/groups/*` in this package).
+7. Comments: only constraints the code cannot express (rendering bugs worked
+   around, cascade requirements, a11y invariants). One line each.
+
+Guards: `bun run check:tokens` (theme.css ↔ tokens/presets.ts sync) here;
+`bun run ui:check` in the apps (deny-by-default drift scan; escape with a
+`ui-drift-ok <reason>` line comment only for genuinely bespoke art).

package/dist/index.d.ts

@@ -3,9 +3,9 @@ export { BUTTON_DEFAULT_CLASS, BUTTON_OUTLINE_CLASS, buttonVariants, ICON_BUTTON
 export { CARD_BLUR, CARD_SURFACE, CARD_SURFACE_BASE, CARD_SURFACE_OPAQUE, TRACK_SURFACE, } from "./lib/card-classes.js";
 export { CAROUSEL_DOTS, CAROUSEL_VIEWPORT, type CarouselTransition, carouselDot, carouselItem, carouselTrack, } from "./lib/carousel-classes.js";
 export { glassToneText, toneTextMix } from "./lib/glass-tone.js";
-export { INPUT_CLASS, INPUT_SURFACE } from "./lib/input-classes.js";
+export { FIELD_CHROME, INPUT_CLASS, INPUT_SURFACE } from "./lib/input-classes.js";
 export { LOGO_DEFAULT_SIZE, LOGO_DEFAULT_SRC, LOGO_DEFAULT_SUB, LOGO_MARK_CLASS, LOGO_MARK_PX, LOGO_NAME_CLASS, LOGO_ROOT_CLASS, LOGO_SIZES, LOGO_STACK_CLASS, LOGO_SUB_CLASS, type LogoSize, } from "./lib/logo-lockup.js";
-export { OVERLAY_SURFACE, SCRIM_CLASS } from "./lib/overlay-classes.js";
+export { OVERLAY_BLUR, OVERLAY_SURFACE, OVERLAY_SURFACE_BASE, OVERLAY_SURFACE_OPAQUE, SCRIM_CLASS, } from "./lib/overlay-classes.js";
 export { SECTION_INNER_RADIUS, SECTION_OUTER_RADIUS, SECTION_PADDING, SECTION_ROW_CLASS, } from "./lib/section-tokens.js";
 export { createIsMobile } from "./lib/use-is-mobile.js";
 export { cn } from "./lib/utils.js";

package/dist/index.js

@@ -1,13 +1,13 @@
-import { $ as e, B as t, C as n, E as r, F as i, G as a, H as o, I as s, J as c, K as l, L as u, O as d, Q as f, S as p, T as m, U as h, V as g, X as _, Y as v, Z as y, _ as b, a as x, b as S, c as C, d as w, et as T, f as E, g as D, h as O, i as k, l as A, m as j, n as M, nt as N, o as P, p as F, q as I, r as L, s as R, t as z, tt as B, u as V, v as H, w as U, x as W, y as G, z as K } from "./utils-BLMzDBJk.js";
-import { createSignal as q, onCleanup as J, onMount as Y } from "solid-js";
+import { $ as e, A as t, B as n, C as r, D as i, E as a, G as o, K as s, M as c, O as l, Q as u, S as d, T as f, U as p, V as m, W as h, X as g, Y as _, Z as v, _ as y, a as b, at as x, b as S, c as C, d as w, et as T, f as E, g as D, h as O, i as ee, it as k, k as A, l as j, m as M, n as N, nt as P, o as F, ot as I, p as L, q as R, r as z, rt as B, s as V, t as H, tt as U, u as W, v as G, w as K, x as q, y as J, z as Y } from "./utils-B020EZLJ.js";
+import { createSignal as X, onCleanup as Z, onMount as Q } from "solid-js";
 //#region src/lib/use-is-mobile.ts
-var X = 768;
-function Z() {
-	let [e, t] = q(void 0);
-	return Y(() => {
-		let e = window.matchMedia(`(max-width: ${X - 1}px)`), n = () => t(window.innerWidth < X);
-		e.addEventListener("change", n), t(window.innerWidth < X), J(() => e.removeEventListener("change", n));
+var $ = 768;
+function te() {
+	let [e, t] = X(void 0);
+	return Q(() => {
+		let e = window.matchMedia(`(max-width: ${$ - 1}px)`), n = () => t(window.innerWidth < $);
+		e.addEventListener("change", n), t(window.innerWidth < $), Z(() => e.removeEventListener("change", n));
 	}), e;
 }
 //#endregion
-export { a as ALERT_CLASS, l as ALERT_CONTENT_CLASS, I as ALERT_DESCRIPTION_CLASS, c as ALERT_ICON_BG_CLASS, v as ALERT_ICON_CLASS, _ as ALERT_ICON_PATHS, y as ALERT_TITLE_CLASS, f as ALERT_TONES, t as BUTTON_DEFAULT_CLASS, g as BUTTON_OUTLINE_CLASS, d as CARD_BLUR, i as CARD_SURFACE, s as CARD_SURFACE_BASE, u as CARD_SURFACE_OPAQUE, p as CAROUSEL_DOTS, n as CAROUSEL_VIEWPORT, o as ICON_BUTTON_CLASS, H as INPUT_CLASS, G as INPUT_SURFACE, C as LOGO_DEFAULT_SIZE, A as LOGO_DEFAULT_SRC, V as LOGO_DEFAULT_SUB, w as LOGO_MARK_CLASS, E as LOGO_MARK_PX, F as LOGO_NAME_CLASS, j as LOGO_ROOT_CLASS, O as LOGO_SIZES, D as LOGO_STACK_CLASS, b as LOGO_SUB_CLASS, P as OVERLAY_SURFACE, R as SCRIM_CLASS, M as SECTION_INNER_RADIUS, L as SECTION_OUTER_RADIUS, k as SECTION_PADDING, x as SECTION_ROW_CLASS, K as TRACK_SURFACE, e as alertBorder, T as alertFill, B as alertIconBgStyle, N as alertIconFill, h as buttonVariants, U as carouselDot, m as carouselItem, r as carouselTrack, z as cn, Z as createIsMobile, S as glassToneText, W as toneTextMix };
+export { _ as ALERT_CLASS, g as ALERT_CONTENT_CLASS, v as ALERT_DESCRIPTION_CLASS, u as ALERT_ICON_BG_CLASS, e as ALERT_ICON_CLASS, T as ALERT_ICON_PATHS, U as ALERT_TITLE_CLASS, P as ALERT_TONES, h as BUTTON_DEFAULT_CLASS, o as BUTTON_OUTLINE_CLASS, c as CARD_BLUR, Y as CARD_SURFACE, n as CARD_SURFACE_BASE, m as CARD_SURFACE_OPAQUE, a as CAROUSEL_DOTS, i as CAROUSEL_VIEWPORT, q as FIELD_CHROME, s as ICON_BUTTON_CLASS, d as INPUT_CLASS, r as INPUT_SURFACE, w as LOGO_DEFAULT_SIZE, E as LOGO_DEFAULT_SRC, L as LOGO_DEFAULT_SUB, M as LOGO_MARK_CLASS, O as LOGO_MARK_PX, D as LOGO_NAME_CLASS, y as LOGO_ROOT_CLASS, G as LOGO_SIZES, J as LOGO_STACK_CLASS, S as LOGO_SUB_CLASS, F as OVERLAY_BLUR, V as OVERLAY_SURFACE, C as OVERLAY_SURFACE_BASE, j as OVERLAY_SURFACE_OPAQUE, W as SCRIM_CLASS, N as SECTION_INNER_RADIUS, z as SECTION_OUTER_RADIUS, ee as SECTION_PADDING, b as SECTION_ROW_CLASS, p as TRACK_SURFACE, B as alertBorder, k as alertFill, x as alertIconBgStyle, I as alertIconFill, R as buttonVariants, l as carouselDot, A as carouselItem, t as carouselTrack, H as cn, te as createIsMobile, K as glassToneText, f as toneTextMix };

package/dist/lib/alert-tones.d.ts

@@ -10,9 +10,9 @@ export declare const alertBorder: (c: string) => string;
 export declare const alertFill: (c: string) => string;
 export declare const alertIconFill: (c: string) => string;
 export declare const ALERT_CLASS = "relative overflow-hidden flex items-start gap-3 rounded-lg border p-3 backdrop-blur-sm";
-export declare const ALERT_ICON_CLASS = "flex size-8 shrink-0 items-center justify-center rounded-md [&>svg]:size-[18px]";
-export declare const ALERT_ICON_BG_CLASS = "pointer-events-none absolute -right-3 -bottom-4 [&>svg]:size-28 [&>svg]:[stroke-width:2.5px]";
+export declare const ALERT_ICON_CLASS = "gh-alert-icon flex size-8 shrink-0 items-center justify-center rounded-md";
+export declare const ALERT_ICON_BG_CLASS = "gh-alert-icon-bg pointer-events-none absolute -right-3 -bottom-4";
 export declare function alertIconBgStyle(color: string): Record<string, string>;
 export declare const ALERT_CONTENT_CLASS = "relative z-10 min-w-0 flex-1";
 export declare const ALERT_TITLE_CLASS = "font-semibold text-base leading-snug";
-export declare const ALERT_DESCRIPTION_CLASS = "text-foreground/80 text-sm leading-snug [&:not(:first-child)]:mt-0.5";
+export declare const ALERT_DESCRIPTION_CLASS = "gh-alert-desc text-foreground/80 text-sm leading-snug";

package/dist/lib/input-classes.d.ts

@@ -1,2 +1,3 @@
-export declare const INPUT_SURFACE = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04]";
-export declare const INPUT_CLASS = "flex h-9 w-full min-w-0 rounded-md glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04] px-3 py-1 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";
+export declare const INPUT_SURFACE = "glass glass-sink [--glass-base:var(--field)] [--glass-edge:var(--field-edge)] [--glass-light:0.04]";
+export declare const FIELD_CHROME = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04]";
+export declare const INPUT_CLASS = "flex h-9 w-full min-w-0 rounded-md glass glass-sink [--glass-base:var(--field)] [--glass-edge:var(--field-edge)] [--glass-light:0.04] px-3 py-1 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";

package/dist/lib/overlay-classes.d.ts

@@ -1,2 +1,5 @@
-export declare const OVERLAY_SURFACE = "glass [--glass-base:var(--popover)] [--glass-rim:0.3] [--glass-lift:0.55]";
-export declare const SCRIM_CLASS = "bg-background/70 backdrop-blur-sm";
+export declare const OVERLAY_BLUR = "backdrop-blur-[var(--glass-blur,20px)] backdrop-saturate-[1.6]";
+export declare const OVERLAY_SURFACE_BASE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_75%,transparent)]";
+export declare const OVERLAY_SURFACE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_75%,transparent)] backdrop-blur-[var(--glass-blur,20px)] backdrop-saturate-[1.6]";
+export declare const OVERLAY_SURFACE_OPAQUE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:var(--popover)]";
+export declare const SCRIM_CLASS = "bg-background/70 backdrop-blur-md";

package/dist/solid/alert-dialog.d.ts

@@ -1,5 +1,7 @@
 import { AlertDialog as AlertDialogPrimitive } from "@kobalte/core/alert-dialog";
+import type { VariantProps } from "cva";
 import { type Component, type ComponentProps } from "solid-js";
+import { buttonVariants } from "./button.js";
 declare const AlertDialog: typeof import("@kobalte/core/alert-dialog").Root & {
     CloseButton: typeof import("@kobalte/core/alert-dialog").CloseButton;
     Content: typeof import("@kobalte/core/alert-dialog").Content;
@@ -15,6 +17,10 @@ declare const AlertDialogHeader: Component<ComponentProps<"div">>;
 declare const AlertDialogFooter: Component<ComponentProps<"div">>;
 declare const AlertDialogTitle: Component<ComponentProps<typeof AlertDialogPrimitive.Title>>;
 declare const AlertDialogDescription: Component<ComponentProps<typeof AlertDialogPrimitive.Description>>;
-declare const AlertDialogAction: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton>>;
+/** Confirming action. Pass `variant` (e.g. "destructive"); layering a second
+ *  buttonVariants() call through `class` cannot work, because the variants
+ *  carry tone as arbitrary custom properties that tailwind-merge keeps side by
+ *  side, leaving the later stylesheet rule to win. */
+declare const AlertDialogAction: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton> & Partial<Pick<VariantProps<typeof buttonVariants>, "variant" | "size">>>;
 declare const AlertDialogCancel: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton>>;
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, };

package/dist/solid/index.d.ts

@@ -41,6 +41,7 @@ export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "./inp
 export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, } from "./item.js";
 export { Kbd, KbdGroup } from "./kbd.js";
 export { Label } from "./label.js";
+export { createListReorder, dragTargetIndex, type ListReorder, type ListReorderOptions, } from "./list-reorder.js";
 export { Logo } from "./logo.js";
 export { NumberField } from "./number-field.js";
 export { Overlay } from "./overlay.js";
@@ -51,7 +52,7 @@ export { Progress } from "./progress.js";
 export { RadioGroup, RadioGroupItem } from "./radio-group.js";
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable.js";
 export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, } from "./responsive-dialog.js";
-export { SchemaForm } from "./schema-form.js";
+export { type ExtendedJSONSchema, SCHEMA_FORM_FORM_TYPES, SchemaForm, } from "./schema-form.js";
 export { ScopeIndicator } from "./scope-indicator.js";
 export { ScrollArea, ScrollBar } from "./scroll-area.js";
 export { type GlassSurface, SectionCard, SectionIcon, SectionLabel, SectionMeta, SectionRow, SectionRowSkeleton, SectionRowSkeletons, SectionSubtitle, SectionTitle, } from "./section-card.js";