@gradeui/ui 3.2.0 → 4.0.0

package/dist/index.d.ts

@@ -12,7 +12,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { Language } from 'prism-react-renderer';
-import { LexicalEditor } from 'lexical';
+import { D as DEMO_SPEED_PRESETS, a as DemoSpeed, b as DemoTrigger } from './types-DUwnWaxR.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -191,14 +191,14 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
             description: z.ZodOptional<z.ZodString>;
         }, "strip", z.ZodTypeAny, {
             kind: "book";
-            title?: string | undefined;
             description?: string | undefined;
+            title?: string | undefined;
             author?: string | undefined;
             isbn?: string | undefined;
         }, {
             kind: "book";
-            title?: string | undefined;
             description?: string | undefined;
+            title?: string | undefined;
             author?: string | undefined;
             isbn?: string | undefined;
         }>, z.ZodObject<{
@@ -548,7 +548,7 @@ declare function Badge({ className, variant, rounded, ...props }: BadgeProps): R
  * The CSS classes referenced here live in packages/ui/styles/globals.css
  * (and the apps/docs mirror) under the SURFACE CLASSES section.
  */
-type Surface = "solid" | "translucent" | "glass" | "glass-strong";
+type Surface = "solid" | "translucent" | "glass" | "glass-strong" | "frosted";
 
 /**
  * Banner — full-width horizontal strip surfacing system-level state or
@@ -585,7 +585,7 @@ type Surface = "solid" | "translucent" | "glass" | "glass-strong";
  */
 declare const bannerVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | "announcement" | null | undefined;
-    align?: "center" | "between" | "start" | null | undefined;
+    align?: "between" | "start" | "center" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof bannerVariants> {
@@ -628,21 +628,28 @@ declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAtt
  * heights so a button placed next to a tab strip lines up without
  * any per-call className overrides:
  *
+ *   2xs: h-5 (20px)  — densest tool-panel size; matches Figma Button size=2xs
+ *   xs:  h-6 (24px)  — tool-panel density; matches Figma Button size=xs
  *   sm:  h-7 (28px)  — matches `<TabsList size="sm">` height
  *   md:  h-8 (32px)  — matches `<TabsList size="md">` height (default)
  *   lg:  h-10 (40px) — matches `<TabsList size="lg">` height
- *   icon: h-8 w-8    — square variant, md height
  *
  * `default` is preserved as an alias for `md` so existing call sites
  * keep working through the rename.
  *
+ * `iconOnly` squares the button at WHATEVER `size` it has (2xs=20, sm=28,
+ * md=32, lg=40) by dropping horizontal padding and matching width to
+ * height. It's a boolean modifier on top of the height ramp — there is no
+ * separate icon size value — and the icon you pass as the child is centered.
+ *
  * Type and icon sizes also follow the Tabs scale (text-xs + size-3.5
  * at sm/md, text-sm + size-4 at lg) so the visual rhythm reads
  * consistent across primitives.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "raised" | null | undefined;
-    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "raised" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "default" | null | undefined;
+    iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -657,6 +664,54 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Section + Container — the page scaffold (STUDIO-SECTIONS.md).
+ *
+ * A page is an ordered stack of Sections. `Section` is the FULL-WIDTH band: it
+ * owns a colour `scope` (subtheme) + vertical `pad` rhythm, and nothing else —
+ * it never constrains width. `Container` is the measure: a centred max-width +
+ * gutters you drop INSIDE a section to contain content; omit it for a full-bleed
+ * band. The content is FREE; Section never bakes a title/CTA (that's
+ * `SectionBlock`'s opinionated job). The known composable parts (Eyebrow /
+ * Title / Subtitle / Description / Actions / Media) give the common shape
+ * design intent without constraining it.
+ */
+type SectionScope = "default" | "inverse" | "brand" | "accent" | "muted" | "card";
+type ContainerMaxW = "sm" | "md" | "lg" | "xl" | "prose" | "full";
+declare const bandVariants: (props?: ({
+    pad?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bandVariants> {
+    /** Colour subtheme — applies the `scope-*` class (STUDIO-COLOR.md). Unset =
+     *  the page surface (transparent). */
+    scope?: SectionScope;
+    /** Visual band background — image / video / gradient / shader (e.g.
+     *  `<BackgroundFill>`). Renders BEHIND the content; Section owns the
+     *  relative + overflow-hidden + z-layering. Works with `scope`, which
+     *  re-tones the content tokens so text stays legible over the media. */
+    background?: React.ReactNode;
+    /** Semantic element. */
+    as?: "section" | "header" | "footer" | "div";
+}
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+declare const containerVariants: (props?: ({
+    maxW?: "sm" | "md" | "lg" | "xl" | "full" | "prose" | null | undefined;
+    grid?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+    as?: "div" | "section";
+}
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const SectionEyebrow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const SectionTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SectionSubtitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** SectionMedia — a SLOT. Holds any media: a single image (MediaSurface),
+ *  a Carousel, a VideoPlayer, an embed, or a whole app UI. The section
+ *  doesn't care what's inside; the media frames itself. */
+declare const SectionMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): React.JSX.Element;
@@ -1281,48 +1336,6 @@ interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title
 }
 declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
 
-/**
- * Shared types + presets for scripted component demos.
- *
- * Lives at the bottom of the demo primitive stack so the hook, the
- * cursor, and any component that opts in (`<Code>`, `<Composer>`,
- * `<DemoStage>`) all read from one definition of "what slow / normal /
- * fast feels like" and one definition of "when do we start playing".
- *
- * If you ever want to retune the cadence of every demo on the marketing
- * site at once, this is the file to edit.
- */
-/**
- * Animation feel. Maps onto a triple of timing values so authors can
- * pick a vibe (slow / normal / fast) instead of hand-tuning ms.
- * Components that need finer control can still override the resolved
- * values per-instance.
- */
-type DemoSpeed = "slow" | "normal" | "fast";
-/**
- * What kicks the demo off:
- *   - `mount`   plays immediately on first paint
- *   - `inView`  waits for the container to cross the viewport threshold
- *   - `manual`  driven by the `play` prop or imperative ref
- */
-type DemoTrigger = "mount" | "inView" | "manual";
-/**
- * Speed presets shared across every scripted-demo surface. Three
- * unambiguously distinct feels: `slow` is "I am being shown", `normal`
- * is "I am being told", `fast` is "I am being briefed".
- *
- *   - `tokenStagger`  per-character cadence for typing-style steps
- *   - `lineStagger`   per-line cadence for reveal-style demos
- *   - `preDelay`      pause after the trigger fires before the first tick
- *   - `fadeMs`        default enter-transition duration for revealed parts
- */
-declare const DEMO_SPEED_PRESETS: Record<DemoSpeed, {
-    tokenStagger: number;
-    lineStagger: number;
-    preDelay: number;
-    fadeMs: number;
-}>;
-
 /**
  * Cancellable sleep + type helpers for scripted demos.
  *
@@ -1581,263 +1594,6 @@ interface RevealProps {
 }
 declare function Reveal({ id, animation, durationMs, hideOutsideStage, onReveal, onHide, className, children, }: RevealProps): React.JSX.Element;
 
-/**
- * Composer — the generic text composition surface for the design system.
- *
- * The answer wherever a user is composing a message: AI chat input,
- * comment thread reply, post-body editor, future copilot panels.
- * Replaces the textarea-with-buttons pattern that hosts kept rolling
- * by hand.
- *
- * Built on Lexical (Meta's React-first editor framework) so it can do:
- *   - rich text formatting (B / I / U / S / code, headings, blockquote,
- *     pullquote, lists)
- *   - mentions and slash commands via lexical-beautiful-mentions, with
- *     a typeahead popover and theme-able tokens
- *   - image attachments (paperclip + clipboard paste) when opted in
- *   - scripted demo playback for marketing surfaces (types text, opens
- *     mention popovers, applies formatting, all via the same step
- *     vocabulary as <Code>)
- *
- * Slot-based composition for the action row: hosts that need custom
- * affordances (template picker, voice button, attach-document) pass
- * `leftActions` / `rightActions`. Default Send / Stop / paperclip
- * render only when the host hasn't replaced the slot.
- *
- * Hosts that want the canned "chat composer with paperclip + send"
- * preset should reach for `<AIChatComposer>` instead, which configures
- * this Composer with the right slots wired up.
- *
- * Scripted demos: same `speed` / `trigger` / `play` / `loop` vocabulary
- * as `<Code>`, sharing the underlying `useScriptedDemo` hook from
- * `lib/demo/`. The Composer adds its own verbs (`mention`, `format`,
- * `select`, `submit`) on top of the universal `type` / `wait` / `clear`.
- */
-type ComposerFormat = "bold" | "italic" | "underline" | "strikethrough" | "code" | "h1" | "h2" | "h3" | "blockquote" | "pullquote" | "ul" | "ol";
-interface ComposerMentionItem {
-    id: string;
-    /** Display value (without the trigger char). */
-    value: string;
-    /** Optional secondary label shown in the suggester. */
-    label?: string;
-    /** Avatar URL or initials for the suggester row. */
-    avatar?: string;
-    /** Arbitrary payload the host can attach to the mention. */
-    data?: Record<string, unknown>;
-}
-interface ComposerTriggerConfig {
-    /** The trigger character, eg. "@" or "/". */
-    char: string;
-    /**
-     * Items to populate the suggester. Either a static array or a
-     * resolver function (sync or async) that receives the typed query.
-     * The plugin filters automatically when items is an array.
-     */
-    items: ComposerMentionItem[] | ((query: string) => ComposerMentionItem[] | Promise<ComposerMentionItem[]>);
-    /**
-     * Whether to strip the trigger char on insert. Defaults: keep for
-     * "@" (mentions read as "@alice"), strip for "/" (commands read as
-     * "Insert image" not "/insert-image").
-     */
-    stripTrigger?: boolean;
-}
-interface ComposerAttachmentConfig {
-    /** Master enable. Set true on the prop to use defaults, or pass a config object. */
-    enabled?: boolean;
-    /** HTML accept attribute on the file input. Default "image/*". */
-    accept?: string;
-    /** Max number of attachments. Default 10. */
-    maxItems?: number;
-    /** Allow multiple selection in the file picker. Default true. */
-    multiple?: boolean;
-}
-interface ComposerAttachment {
-    id: string;
-    file: File;
-    /** Object URL owned by the composer. Hosts must NOT revoke it. */
-    previewUrl: string;
-    name: string;
-}
-interface ComposerContent {
-    /** Plain text representation of the editor contents (whitespace preserved). */
-    text: string;
-    /** Lexical editor state serialised to JSON (for round-trip persistence). */
-    json: string;
-    /** Resolved mention tokens in document order. */
-    mentions: Array<{
-        trigger: string;
-        value: string;
-        data?: Record<string, unknown>;
-    }>;
-}
-interface ComposerHandle {
-    /** Run a demo script imperatively (vs. via `steps` + `trigger="manual"`). */
-    play: (steps: ComposerStep[]) => void;
-    /** Cancel an in-flight demo. Idempotent. */
-    stop: () => void;
-    /**
-     * One-shot replay of the configured `steps`. Cancels any in-flight
-     * run, clears the editor, replays from step 0. Pass a delay (ms) to
-     * schedule the replay (useful for chaining demos). Requires `steps`
-     * to be configured.
-     */
-    restart: (delayMs?: number) => void;
-    /** Move focus into the editor. */
-    focus: () => void;
-    /** Wipe the editor. */
-    clear: () => void;
-    /** Insert plain text at the current selection. */
-    insert: (text: string) => void;
-    /** Snapshot the current content + mentions. */
-    getContent: () => ComposerContent;
-    /** Direct access to the underlying Lexical editor (escape hatch). */
-    getEditor: () => LexicalEditor | null;
-}
-/**
- * Demo step vocabulary for Composer scripts. Shares `type` / `wait` /
- * `clear` with the universal `lib/demo` verbs; adds composer-specific
- * `mention`, `format`, `select`, `newline`, `submit` on top.
- */
-type ComposerStep = {
-    type: "type";
-    text: string;
-    speed?: DemoSpeed;
-} | {
-    type: "wait";
-    ms: number;
-} | {
-    type: "clear";
-} | {
-    type: "newline";
-} | {
-    type: "submit";
-} | {
-    type: "mention";
-    /** Trigger char (must match a registered ComposerTriggerConfig.char). */
-    trigger: string;
-    /** Value to insert (without the trigger). Looks up the matching item by `value`. */
-    value: string;
-    /** Optional pre-typed query — the demo types this after the trigger char before "selecting" the value, to show the typeahead in action. */
-    query?: string;
-} | {
-    type: "format";
-    format: ComposerFormat;
-} | {
-    type: "select";
-    /** Substring to find and select. First match wins. */
-    text: string;
-};
-interface ComposerProps {
-    /** Placeholder copy shown when empty. */
-    placeholder?: string;
-    /** Initial plain text content. For richer initial state, use `initialJson`. */
-    initialText?: string;
-    /** Initial Lexical state JSON (from a previous `onSubmit` round-trip). */
-    initialJson?: string;
-    /**
-     * Available formats. Pass false to disable rich text entirely
-     * (plain text mode, half the bundle weight, no toolbar). Default
-     * enables a sensible set for most chat / comment surfaces.
-     */
-    formats?: ComposerFormat[] | false;
-    /**
-     * Render the formatting toolbar. Default false because most uses
-     * are short-form. Set true (or "top") to show the toolbar above the
-     * editor. "floating" is planned; not yet implemented.
-     */
-    toolbar?: boolean | "top";
-    /**
-     * Mention / slash command configs. Each entry registers one trigger
-     * char and its items. Pass `[{ char: "@", items: people }, { char: "/", items: commands }]`
-     * for the common chat-app setup.
-     */
-    triggers?: ComposerTriggerConfig[];
-    /**
-     * Image attachments (paperclip + clipboard paste). Pass true for
-     * defaults, an object to customise, or omit/false to skip the
-     * attachment plumbing entirely.
-     */
-    attachments?: boolean | ComposerAttachmentConfig;
-    /** Fires when the user submits (Enter, click Send, or scripted `submit` step). */
-    onSubmit?: (content: ComposerContent, attachments?: ComposerAttachment[]) => void;
-    /**
-     * Fires on every editor change with the current plain text. Use for
-     * length validation, controlled-value bridges (eg. AIChatComposer
-     * forwarding to a host's `value`/`onChange` pair), or live preview
-     * surfaces. Cheap, called frequently; debounce if you need the
-     * Lexical state JSON (use `getContent()` via ref instead).
-     */
-    onChange?: (text: string) => void;
-    /**
-     * Loading state — disables the editor + paperclip and swaps the
-     * default Send button for Stop. Has no effect when `rightActions`
-     * overrides the default Send.
-     */
-    isLoading?: boolean;
-    /** Stop handler — required for Stop to be active when loading. */
-    onStop?: () => void;
-    /** Hard character cap. */
-    maxLength?: number;
-    /** Auto-focus the editor on mount. Default false. */
-    autoFocus?: boolean;
-    /** Whether Enter submits. Default true (Shift-Enter still inserts a newline). */
-    submitOnEnter?: boolean;
-    /**
-     * Custom content for the left action slot. Replaces the default
-     * paperclip button when `attachments` is enabled.
-     */
-    leftActions?: React.ReactNode;
-    /**
-     * Custom content for the right action slot. Replaces the default
-     * Send / Stop button. Use the `useComposer()` hook inside to access
-     * imperative methods.
-     */
-    rightActions?: React.ReactNode;
-    /** Hide the default Send button without replacing it. */
-    hideSend?: boolean;
-    /** Scripted demo steps. */
-    steps?: ComposerStep[];
-    /** What kicks the script off. Defaults to "mount". */
-    trigger?: DemoTrigger;
-    /** For trigger="manual" — flip true to play. */
-    play?: boolean;
-    /** Animation feel. */
-    speed?: DemoSpeed;
-    /** Loop the script forever. */
-    loop?: boolean;
-    /**
-     * Pause between loop iterations (ms). Defaults to 2000. Marketing
-     * heroes that want the demo to breathe between repeats bump this
-     * higher; tight inline demos drop it.
-     */
-    loopDelay?: number;
-    /**
-     * Fires once per loop cycle, AFTER the loopDelay pause and BEFORE
-     * the script replays. Use to reset parent state that the script
-     * mutated via onSubmit (e.g., wipe a messages list back to its
-     * seed before the demo types into it again). The editor is cleared
-     * automatically — you only need this hook if state outside the
-     * Composer needs to reset too.
-     */
-    onLoopReset?: () => void;
-    /**
-     * Bare mode — strip the card chrome (border / bg / rounding). Use
-     * when embedding inside an existing card or column layout.
-     */
-    bare?: boolean;
-    /**
-     * Read-only mode — disables editing AND focusability. Programmatic
-     * updates (including scripted demo playback) still work. Use for
-     * marketing surfaces that render a Composer purely for show, so the
-     * scripted typing doesn't steal focus from other inputs on the page.
-     * Hides the default Send / paperclip action row.
-     */
-    readOnly?: boolean;
-    className?: string;
-}
-declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<ComposerHandle>>;
-declare const ComposerReply: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<ComposerHandle>>;
-
 /**
  * DatePicker + DateRangePicker
  *
@@ -1997,7 +1753,7 @@ declare const DropdownMenuShortcut: {
  * rationale.
  */
 declare const inputVariants: (props?: ({
-    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
     variant?: "default" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
@@ -2018,7 +1774,7 @@ type InputProps = Omit<React.ComponentProps<"input">, "size"> & {
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
-    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
@@ -2386,7 +2142,7 @@ declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPri
  *   </ResizablePanelGroup>
  */
 declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React.JSX.Element;
-declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadElement | HTMLElement | HTMLLinkElement | HTMLDivElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLSelectElement | HTMLTextAreaElement | HTMLMapElement | HTMLTitleElement | HTMLVideoElement | HTMLButtonElement | HTMLLinkElement | HTMLLabelElement | HTMLStyleElement | HTMLSourceElement | HTMLHtmlElement | HTMLDataElement | HTMLOptionElement | HTMLTableColElement | HTMLAudioElement | HTMLEmbedElement | HTMLProgressElement | HTMLHRElement | HTMLTableElement | HTMLAnchorElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLFieldSetElement | HTMLHeadElement | HTMLIFrameElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOutputElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -2426,8 +2182,8 @@ declare const ResizableHandle: ({ withHandle, className, ...props }: React.Compo
  */
 declare const rowVariants: (props?: ({
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface RowProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowVariants> {
@@ -2462,7 +2218,7 @@ declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttribute
 declare const gridVariants: (props?: ({
     cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     /** When true, render as the single child element via Radix Slot — lets
@@ -2494,10 +2250,10 @@ declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttribu
  * case. Flex is the escape hatch, not the default.
  */
 declare const flexVariants: (props?: ({
-    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+    direction?: "row" | "col" | "row-reverse" | "col-reverse" | null | undefined;
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FlexProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
@@ -2531,7 +2287,7 @@ type SelectMenuSize = "default" | "sm" | "xs" | "2xs";
  * existing call site.
  */
 declare const selectTriggerVariants: (props?: ({
-    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectTriggerSize = NonNullable<VariantProps<typeof selectTriggerVariants>["size"]>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -2590,12 +2346,12 @@ declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive
  * shared selection ring (`--selected`). Pass `label` to caption it (the
  * caption also becomes the accessible name / tooltip).
  *
- * Sizing is the t-shirt scale (xs → xl); reach for `size` over `h-*`/`w-*`
+ * Sizing is the t-shirt scale (2xs → xl, 16px → 56px); reach for `size` over `h-*`/`w-*`
  * utilities so the scale stays on tokens. Shape is square / rounded (rides
  * `--radius`) / circle.
  */
 declare const swatchVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     shape?: "rounded" | "square" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SwatchSize = NonNullable<VariantProps<typeof swatchVariants>["size"]>;
@@ -2605,6 +2361,13 @@ interface SwatchProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">,
     color?: string;
     /** A Grade colour token name (no `--`), resolved as `oklch(var(--<token>))`. */
     token?: string;
+    /** Fill kind. Defaults to "solid", or is inferred from `image` / `gradient`
+     *  when omitted. Drives what the chip renders in place. */
+    type?: "solid" | "gradient" | "image";
+    /** CSS gradient for `type="gradient"` — e.g. `"linear-gradient(135deg,#6366f1,#ec4899)"`. */
+    gradient?: string;
+    /** Image URL for `type="image"` — rendered cover-fit behind the chip. */
+    image?: string;
     /** Optional caption rendered beneath the chip; also the accessible name. */
     label?: React.ReactNode;
     /** Draws the shared selection ring (`--selected`). */
@@ -2636,7 +2399,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialog
 declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "bottom" | "top" | "right" | "left" | null | undefined;
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     /** Extra classes for the backdrop overlay. e.g. `bg-transparent`
@@ -2770,7 +2533,7 @@ interface SortableItemProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const SortableItem: React.ForwardRefExoticComponent<SortableItemProps & React.RefAttributes<HTMLDivElement>>;
 interface SortableHandleProps extends React.HTMLAttributes<HTMLElement> {
     /** Render as the child element via Slot — typical pattern is
-     *  `<Sortable.Handle asChild><Button variant="ghost" size="icon">…</Button></Sortable.Handle>`. */
+     *  `<Sortable.Handle asChild><Button variant="ghost" iconOnly>…</Button></Sortable.Handle>`. */
     asChild?: boolean;
 }
 declare const SortableHandle: React.ForwardRefExoticComponent<SortableHandleProps & React.RefAttributes<HTMLElement>>;
@@ -2792,8 +2555,8 @@ declare const Sortable: SortableRootComponent;
  */
 declare const stackVariants: (props?: ({
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | null | undefined;
-    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | null | undefined;
+    justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface StackProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
     /** When true, render as the single child element via Radix Slot — lets
@@ -2811,7 +2574,7 @@ declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttri
  * dense tool-panel sizes (the Studio inspector).
  */
 declare const switchTrackVariants: (props?: ({
-    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SwitchSize = NonNullable<VariantProps<typeof switchTrackVariants>["size"]>;
 declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
@@ -2999,7 +2762,7 @@ declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.Cla
  * px-3 / text-sm; `sm` and `xs` are for dense tool panels.
  */
 declare const textareaVariants: (props?: ({
-    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
 type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
@@ -3009,11 +2772,11 @@ declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
@@ -3023,11 +2786,11 @@ declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimit
 
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
+    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     tooltip?: React.ReactNode;
     tooltipSide?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
@@ -3082,7 +2845,7 @@ declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupP
  * persistent footer toolbars on mobile-style layouts.
  */
 declare const toolbarVariants: (props?: ({
-    position?: "bottom" | "top" | "inline" | null | undefined;
+    position?: "top" | "inline" | "bottom" | null | undefined;
     variant?: "default" | "transparent" | "subtle" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     sticky?: boolean | null | undefined;
@@ -4549,6 +4312,133 @@ declare function FillPicker({ value, onChange, className }: FillPickerProps): Re
 declare namespace FillPicker {
     var displayName: string;
 }
+interface FillSectionProps {
+    /** The ordered list of fills (top-most last, Figma-style — but the list
+     *  renders in array order; the consumer owns z-ordering semantics). */
+    value: FillValue[];
+    /** Fired with the next list on any add / edit / remove / reorder. */
+    onChange: (value: FillValue[]) => void;
+    /** Section heading. Default "Fills". */
+    title?: string;
+    className?: string;
+}
+declare function FillSection({ value, onChange, title, className, }: FillSectionProps): React.JSX.Element;
+declare namespace FillSection {
+    var displayName: string;
+}
+
+/**
+ * ColorPicker — a token-led, grouped, searchable colour picker. The
+ * single-select sibling of FillPicker's solid tab: where FillPicker is the
+ * full Figma paint popover (solid / gradient / image / …), ColorPicker is
+ * the focused "pick one colour token" control.
+ *
+ * Two exports:
+ *   - <ColorPickerPanel> — the popover BODY (header + search + grouped
+ *     list). Reusable: the inspector's colour fields host it inside their
+ *     own TokenField-chrome popover so every colour control shares ONE
+ *     panel. Matches the Figma "Color Picker" frame: a "Color" title with
+ *     a ghost close button, a search input, then DropdownMenuItem-style
+ *     rows (Swatch + token name + check) grouped by family.
+ *   - <ColorPicker> — panel + a self-contained trigger (swatch + name or,
+ *     with `triggerVariant="inline"`, just the swatch).
+ *
+ * Grade is token-led, so the value is a token NAME ("action/primary"), the
+ * literal "transparent", or null. The Swatch resolves the live CSS variable,
+ * so every chip re-voices when the theme changes.
+ */
+
+/** A named family of colour tokens, rendered as one group in the list. */
+interface ColorTokenGroup {
+    /** Group heading (e.g. "action"). */
+    group: string;
+    /** Token NAMES in this group (e.g. "action/primary"). */
+    tokens: string[];
+}
+/** Default token groups — the Grade semantic colour families. */
+declare const DEFAULT_COLOR_TOKEN_GROUPS: ColorTokenGroup[];
+/** The literal value for "no fill". */
+declare const TRANSPARENT = "transparent";
+type ColorPickerTriggerVariant = "default" | "inline";
+interface ColorPickerProps {
+    /** A Grade colour token NAME ("action/primary"), the literal "transparent",
+     *  or null when nothing is picked. */
+    value?: string | null;
+    /** Fired with the next value (token name, "transparent", or null). */
+    onValueChange?: (value: string | null) => void;
+    /** Token families offered in the list. Defaults to the Grade semantic set. */
+    tokens?: ColorTokenGroup[];
+    /** Show the search input. Default true. */
+    searchable?: boolean;
+    /** `default` (form-control surface, swatch + name) or `inline` (just a
+     *  clickable swatch — the inspector / fill-row affordance). */
+    triggerVariant?: ColorPickerTriggerVariant;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    /** Search-input placeholder. */
+    searchPlaceholder?: string;
+    /** Message rendered when search returns no rows. */
+    emptyMessage?: string;
+    /** Include a "Transparent" option at the top. Default true. */
+    allowTransparent?: boolean;
+    /** Popover header title. Default "Color"; pass null to drop the header. */
+    title?: string | null;
+    /** PopoverContent alignment. Default "start". */
+    align?: "start" | "center" | "end";
+    /** Lock the control to a display of its current value. */
+    disabled?: boolean;
+    /** Extra classes on the trigger. */
+    className?: string;
+    /** Forwarded to the trigger for tests / Studio selection. */
+    id?: string;
+    "aria-label"?: string;
+}
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * GradientEditor — edit a multi-stop CSS gradient with token-led stops.
+ *
+ * A type Select (Linear / Radial / Angular) with reverse + rotate actions, a
+ * live full-width preview bar (a <Swatch type="gradient">), then a "Stops"
+ * list: each stop is a position %, a colour (token via <ColorPicker>, or a
+ * raw colour), an opacity %, and a remove button. An add button in the Stops
+ * header appends a stop.
+ *
+ * The CSS gradient string is computed from type + angle + stops; token stops
+ * resolve to `oklch(var(--<token>))` so the preview re-voices with the theme.
+ * It emits the structured `GradientValue` (NOT a string) so the value stays
+ * editable and serialisable — the caller renders the string via
+ * `gradientToCss(value)` (exported alongside).
+ */
+
+type GradientType = "linear" | "radial" | "angular";
+/** A single colour stop. `token` wins over `color`; `opacity` is 0–1. */
+interface GradientStop {
+    /** Stable key for list rendering / edits. */
+    id: string;
+    /** Position along the gradient, 0–100 (%). */
+    position: number;
+    /** A Grade colour token NAME ("action/primary"). Takes precedence. */
+    token?: string;
+    /** A raw CSS colour, used when no `token`. */
+    color?: string;
+    /** Stop opacity, 0–1. */
+    opacity: number;
+}
+interface GradientValue {
+    type: GradientType;
+    /** Angle in degrees for linear / angular gradients. */
+    angle?: number;
+    stops: GradientStop[];
+}
+/** Compute the CSS gradient string from a structured value. */
+declare function gradientToCss(value: GradientValue): string;
+interface GradientEditorProps {
+    value: GradientValue;
+    onChange: (value: GradientValue) => void;
+    className?: string;
+}
+declare const GradientEditor: React.ForwardRefExoticComponent<GradientEditorProps & React.RefAttributes<HTMLDivElement>>;
 
 /**
  * ShaderPresetPreview — a thumbnail-sized preview of a shader preset.
@@ -5226,4 +5116,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, Combobox, type ComboboxOption, type ComboboxProps, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DemoSpeed, DemoStage, type DemoStageProps, type DemoTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, TRANSPARENT as COLOR_PICKER_TRANSPARENT, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, ColorPicker, type ColorPickerProps, type ColorTokenGroup, Combobox, type ComboboxOption, type ComboboxProps, Container, type ContainerMaxW, type ContainerProps, DEFAULT_COLOR_TOKEN_GROUPS, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DemoSpeed, DemoStage, type DemoStageProps, DemoTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, FillSection, type FillSectionProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, GradientEditor, type GradientEditorProps, type GradientStop, type GradientType, type GradientValue, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Section, SectionActions, SectionDescription, SectionEyebrow, SectionMedia, type SectionProps, type SectionScope, SectionSubtitle, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, containerVariants, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gradientToCss, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, bandVariants as sectionBandVariants, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };