@gradeui/ui 1.2.0 → 2.0.0

package/dist/index.d.mts

@@ -9,6 +9,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPicker, DayButton, DateRange } from 'react-day-picker';
 import { UseEmblaCarouselType } from 'embla-carousel-react';
 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 * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -16,14 +18,12 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { UniqueIdentifier } from '@dnd-kit/core';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
@@ -48,6 +48,7 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
     hint: {
         schema: z.ZodOptional<z.ZodEnum<["album", "tv-show", "movie", "game", "book", "portrait", "landscape", "poster", "product", "food", "video", "audio", "embed", "3d", "generic"]>>;
         design: "knob";
+        group: string;
         control: "glyph-picker";
         label: string;
         description: string;
@@ -93,6 +94,7 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
     alt: {
         schema: z.ZodOptional<z.ZodString>;
         design: "content";
+        group: string;
         control: "text";
         label: string;
         description: string;
@@ -101,6 +103,7 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
     src: {
         schema: z.ZodOptional<z.ZodString>;
         design: "content";
+        group: string;
         control: "url";
         label: string;
         description: string;
@@ -174,14 +177,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<{
@@ -486,7 +489,7 @@ declare const AppShellFooter: React$1.ForwardRefExoticComponent<AppShellFooterPr
  * directly still works and overrides the variant defaults.
  */
 declare const avatarSizes: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarSizes> {
 }
@@ -495,6 +498,7 @@ declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitiv
 declare const avatarFallbackTones: (props?: ({
     tone?: "muted" | "primary" | "violet" | "amber" | "emerald" | "sky" | "rose" | "plum" | "lime" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+type AvatarTone = NonNullable<VariantProps<typeof avatarFallbackTones>["tone"]>;
 interface AvatarFallbackProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, VariantProps<typeof avatarFallbackTones> {
 }
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -567,7 +571,7 @@ type Surface = "solid" | "translucent" | "glass" | "glass-strong";
  */
 declare const bannerVariants: (props?: ({
     variant?: "default" | "info" | "success" | "warning" | "destructive" | "announcement" | null | undefined;
-    align?: "center" | "start" | "between" | null | undefined;
+    align?: "between" | "start" | "center" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BannerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof bannerVariants> {
@@ -623,8 +627,8 @@ declare const Banner: React$1.ForwardRefExoticComponent<BannerProps & React$1.Re
  * consistent across primitives.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "raised" | null | undefined;
-    size?: "default" | "icon" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "raised" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "icon" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -799,6 +803,107 @@ declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttribut
 
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Field — the inline composition primitive for a control + its caption.
+ *
+ * Pairs a bare control (Checkbox / RadioGroupItem / Switch) with a label,
+ * an optional description, and an optional trailing slot — and wires the
+ * accessibility plumbing for you:
+ *
+ *   - generates one id, hands it to the control, and points the label's
+ *     `htmlFor` at it (click-the-label-to-toggle for free)
+ *   - if a <Field.Description> is present, links it via `aria-describedby`
+ *
+ * The control stays a bare primitive — Field clones it to inject the id +
+ * aria wiring, so Checkbox/Radio/Switch never grow a `description` prop.
+ *
+ *   <Field>
+ *     <Checkbox value="terms" />
+ *     <Field.Label>Accept terms</Field.Label>
+ *     <Field.Description>You agree to the privacy policy.</Field.Description>
+ *     <Field.Trailing><Badge>New</Badge></Field.Trailing>
+ *   </Field>
+ *
+ * Two layouts:
+ *   - `option`  (default) — control leads, text stacks beside it. The
+ *                checkbox/radio-with-label case. Top-aligned for two lines.
+ *   - `setting` — text leads, control pinned trailing. The classic
+ *                settings row (label + description on the left, Switch right).
+ *
+ * For a selectable *card* (the whole surface is the control), reach for
+ * RadioCard / CheckboxCard / SwitchCard instead — see `selection-card.tsx`.
+ */
+type FieldLayout = "option" | "setting";
+declare const FieldLabel: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
+declare const FieldDescription: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const FieldTrailing: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+interface FieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** `option` (control leads) or `setting` (text leads, control trailing). */
+    layout?: FieldLayout;
+}
+declare const Field: React$1.ForwardRefExoticComponent<FieldProps & React$1.RefAttributes<HTMLDivElement>> & {
+    Label: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
+    Description: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+    Trailing: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Selection cards — RadioCard / CheckboxCard / SwitchCard.
+ *
+ * The whole card IS the control. RadioCard renders as a
+ * `RadioGroupPrimitive.Item`, CheckboxCard as a `CheckboxPrimitive.Root`,
+ * SwitchCard as a `SwitchPrimitives.Root` — so focus, hover, and the
+ * checked state all live on the parent surface, and the entire card is the
+ * hit target. The small glyph (dot / check / switch) is just a visual
+ * indicator; it differs by type on purpose, because that's how someone
+ * reads single-select vs multi-select vs toggle at a glance.
+ *
+ * All three share ONE surface (`.gds-selection-card`) so they look identical
+ * sitting together. Every visual is token-driven (`--gds-selection-card-*`
+ * with semantic fallbacks), so a project can re-skin the cards through the
+ * per-project override layer without forking the component.
+ *
+ *   <RadioGroup defaultValue="standard" className="grid gap-3">
+ *     <RadioCard value="standard" label="Standard" description="4–10 business days" />
+ *     <RadioCard value="fast"     label="Fast"     description="2–5 business days" />
+ *     <RadioCard value="next-day" label="Next day" description="1 business day" />
+ *   </RadioGroup>
+ *
+ * IMPORTANT — interactive content. Because the card is itself a control
+ * (a `role=radio`/`checkbox`/`switch` button), you must NOT nest other
+ * interactive elements (Slider, Input, Button, links) inside it. Put only
+ * static content here (text, images, badges). If a card needs its own
+ * controls, use a plain `Card` containing a `Field` row + the control as
+ * siblings instead.
+ */
+type IndicatorPosition = "leading" | "trailing";
+interface SelectionCardOwnProps {
+    /** Title line. Omit and pass `children` for fully custom content. */
+    label?: React$1.ReactNode;
+    /** Secondary line under the label. */
+    description?: React$1.ReactNode;
+    /** Optional slot rendered between the content and the indicator
+     *  (a Badge, price, kbd hint, …). */
+    aside?: React$1.ReactNode;
+    /** Hide the dot/check/switch glyph — selection is then conveyed purely by
+     *  the card's selected border + background. Semantics stay intact. */
+    hideIndicator?: boolean;
+    /** Which side the indicator sits on. Default `trailing`. */
+    indicatorPosition?: IndicatorPosition;
+}
+interface RadioCardProps extends Omit<React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "children">, SelectionCardOwnProps {
+    children?: React$1.ReactNode;
+}
+declare const RadioCard: React$1.ForwardRefExoticComponent<RadioCardProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface CheckboxCardProps extends Omit<React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "children">, SelectionCardOwnProps {
+    children?: React$1.ReactNode;
+}
+declare const CheckboxCard: React$1.ForwardRefExoticComponent<CheckboxCardProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface SwitchCardProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, "children">, SelectionCardOwnProps {
+    children?: React$1.ReactNode;
+}
+declare const SwitchCard: React$1.ForwardRefExoticComponent<SwitchCardProps & React$1.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Code — syntax-highlighted code surface with diff, line-emphasis, and
  * reveal animation modes. Designed for marketing heroes ("diff hero"),
@@ -1068,6 +1173,15 @@ interface MessageProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "tit
      * "your messages" in DM threads.
      */
     align?: "start" | "end";
+    /**
+     * Row rhythm. `default` is the canonical chat / channel-feed shape.
+     * `compact` tightens text sizes + gaps for dense side-panel use
+     * (Studio comments tab, activity feeds, notification rows where many
+     * rows stack vertically and the surface is narrow). Avatar size is
+     * still consumer-controlled — pair `density="compact"` with
+     * `Avatar size="xs"` for the tightest rhythm.
+     */
+    density?: "default" | "compact";
     /**
      * Body content (the message text). Accepts any node so consumers
      * can embed rich content — Markdown-rendered prose, images,
@@ -1162,23 +1276,38 @@ declare function typeText(text: string, onTick: (partial: string) => void, stagg
  * (mount / inView / manual), loop, pre-delay, completion signal, and
  * the imperative play() / stop() API.
  *
+ * Reduced motion: this hook is the declarative-motion layer's accessibility
+ * boundary. When the OS reports `prefers-reduced-motion: reduce` OR the
+ * global `data-motion="off"` toggle is set (both via `useReducedMotion`),
+ * the runner settles on the FINAL frame instead of animating — zeroed
+ * timings run every step instantly and the sequence never loops, so the
+ * end state shows and holds. That keeps lib/demo honouring the same motion
+ * control as ThreeScene and the CSS reset; without it, a screen built with
+ * <Code> would keep typing under reduced motion and would not be accessible.
+ *
  * Authoring guide for `interpret`:
  *   - `await sleep(ms, ctx.signal)` for any pause so stop() can short
  *     a long wait cleanly.
  *   - `await typeText(text, onTick, stagger, ctx.signal)` for typing
- *     loops, again so stop() interrupts mid-character.
+ *     loops, again so stop() interrupts mid-character. A non-positive
+ *     stagger (what the reduced-motion preset supplies) emits the whole
+ *     string in one tick, so the final state shows with no animation.
  *   - Read `ctx.speed` to grab the resolved DEMO_SPEED_PRESETS entry
  *     when a step doesn't pin its own cadence.
  *   - Throw nothing on cancel — the helpers do it for you. Anything
  *     else thrown is treated as a real bug and bubbles to the console.
  */
 interface ScriptedDemoContext {
-    /** Resolved speed preset for the current run. */
+    /** Resolved speed preset for the current run. Zeroed under reduced motion. */
     speed: (typeof DEMO_SPEED_PRESETS)[DemoSpeed];
     /** AbortSignal that fires on stop() / unmount / steps change. */
     signal: AbortSignal;
     /** Live cancellation check for code paths that can't take a signal. */
     cancelled: () => boolean;
+    /** True when the run is in reduced-motion mode (settling, not animating).
+     *  Most interpreters don't need this — zeroed timings handle it — but a
+     *  step that does something non-timing-based (confetti, sound) can skip it. */
+    reduced: boolean;
 }
 interface UseScriptedDemoOptions<TStep> {
     /** The steps to run. Undefined or empty means "no script". */
@@ -1197,6 +1326,10 @@ interface UseScriptedDemoOptions<TStep> {
     play?: boolean;
     /** Loop the sequence forever after completion. Pause length controlled by `loopDelay`. */
     loop?: boolean;
+    /** Cap the number of loop cycles, then settle and stop. A demo is a movie —
+     *  it shouldn't spin forever. Default Infinity. Grid/embed surfaces set a
+     *  small number so the loop ends instead of running unattended. */
+    maxLoops?: number;
     /**
      * Milliseconds to pause between loop cycles. Only applies when
      * `loop` is true. Defaults to 2000. Marketing surfaces that want
@@ -1713,6 +1846,15 @@ declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPr
 
 declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Menu density. Set `size` on `<DropdownMenuContent>` (or
+ * `<DropdownMenuSubContent>`) and every item inside — Item, Checkbox,
+ * Radio, SubTrigger, Label — picks up matching padding / text-size via
+ * context (which flows through the Radix portal). Mirrors Select so a
+ * compact trigger can have an equally compact menu. `xs` is the
+ * tool-panel density (the Studio inspector).
+ */
+type DropdownMenuSize = "default" | "sm" | "xs";
 declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
 declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
@@ -1723,6 +1865,8 @@ declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<Dro
 interface DropdownMenuSubContentProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
     /** What the submenu surface is *made of*. See dropdown-menu.md. */
     surface?: Surface;
+    /** Menu density — cascades to items via context. */
+    size?: DropdownMenuSize;
 }
 declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
 interface DropdownMenuContentProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
@@ -1732,6 +1876,8 @@ interface DropdownMenuContentProps extends React$1.ComponentPropsWithoutRef<type
      * floating over rich canvases. See dropdown-menu.md.
      */
     surface?: Surface;
+    /** Menu density — cascades to items via context. */
+    size?: DropdownMenuSize;
 }
 declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -1761,15 +1907,26 @@ declare const DropdownMenuShortcut: {
  * rationale.
  */
 declare const inputVariants: (props?: ({
-    size?: "default" | "sm" | null | undefined;
+    size?: "sm" | "default" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
 type InputProps = Omit<React$1.ComponentProps<"input">, "size"> & {
     size?: InputSize;
+    /** Adornment rendered inside the field on the leading edge — an icon,
+     *  a unit, a prefix. Non-interactive by default (clicks pass through
+     *  to focus the input); pass an element with its own pointer-events
+     *  if you need it clickable. */
+    startSlot?: React$1.ReactNode;
+    /** Adornment rendered inside the field on the trailing edge — a unit
+     *  ("px"), a clear button, a stepper. Same pointer rules as
+     *  `startSlot`. */
+    endSlot?: React$1.ReactNode;
 };
 declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
+declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
+    size?: "sm" | "default" | "xs" | "2xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
 declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -1912,7 +2069,7 @@ declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupP
  *   </ResizablePanelGroup>
  */
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.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$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLSelectElement | HTMLTextAreaElement | HTMLMapElement | HTMLTitleElement | HTMLVideoElement | HTMLButtonElement | HTMLLinkElement | HTMLLabelElement | HTMLStyleElement | HTMLSourceElement | HTMLHtmlElement | HTMLOptionElement | HTMLTableColElement | HTMLAudioElement | HTMLEmbedElement | HTMLProgressElement | HTMLHRElement | HTMLTableElement | HTMLAnchorElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLDataElement | 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;
@@ -1951,9 +2108,9 @@ declare const ResizableHandle: ({ withHandle, className, ...props }: React$1.Com
  * etc.) and is a separate primitive.
  */
 declare const rowVariants: (props?: ({
-    gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "center" | "start" | "between" | "end" | "around" | "evenly" | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | 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$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowVariants> {
@@ -1987,8 +2144,8 @@ declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttri
  */
 declare const gridVariants: (props?: ({
     cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
-    gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     /** When true, render as the single child element via Radix Slot — lets
@@ -2020,10 +2177,10 @@ declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAtt
  * case. Flex is the escape hatch, not the default.
  */
 declare const flexVariants: (props?: ({
-    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
-    gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "center" | "start" | "between" | "end" | "around" | "evenly" | null | undefined;
+    direction?: "row" | "col" | "row-reverse" | "col-reverse" | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | 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$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
@@ -2040,6 +2197,15 @@ declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * Menu density. Set `size` on `<SelectContent>` and every `<SelectItem>`
+ * inside it picks up matching padding / text-size / check-indicator
+ * sizing via context — so a compact trigger (`size="xs"`) can have an
+ * equally compact dropdown without per-item overrides. React context
+ * flows through the Radix portal (it follows the React tree, not the
+ * DOM), so items styled this way work even though the menu is portaled.
+ */
+type SelectMenuSize = "default" | "sm" | "xs" | "2xs";
 /**
  * Select trigger variants — `size` lets dense surfaces (the
  * Studio inspector, settings sheets) reach for a compact `sm`
@@ -2048,17 +2214,33 @@ declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.Sel
  * existing call site.
  */
 declare const selectTriggerVariants: (props?: ({
-    size?: "default" | "sm" | null | undefined;
+    size?: "sm" | "default" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectTriggerSize = NonNullable<VariantProps<typeof selectTriggerVariants>["size"]>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
     size?: SelectTriggerSize;
+    /** Adornment rendered inside the trigger on the leading edge — a
+     *  property glyph, a unit. Mirrors Input's startSlot. Grouped with
+     *  the value in a div (NOT a bare span: the trigger's
+     *  `[&>span]:line-clamp-1` would stack a span's children
+     *  vertically). */
+    startSlot?: React$1.ReactNode;
+    /** Hide the dropdown chevron — Figma-style token fields keep the
+     *  right edge for their own affordances (detach/attach). */
+    chevron?: boolean;
 } & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: SelectMenuSize;
+} & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Optional right-aligned secondary text (e.g. a token's resolved
+     *  value). Rendered in the menu row only — NOT inside ItemText, so
+     *  it never mirrors into the trigger via SelectValue. */
+    hint?: React$1.ReactNode;
+} & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -2069,7 +2251,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.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$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     /**
@@ -2207,9 +2389,9 @@ declare const Sortable: SortableRootComponent;
  * for a centred narrow column (auth cards, marketing copy).
  */
 declare const stackVariants: (props?: ({
-    gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "start" | "end" | "stretch" | null | undefined;
-    justify?: "center" | "start" | "between" | "end" | "around" | "evenly" | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | 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$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
     /** When true, render as the single child element via Radix Slot — lets
@@ -2219,7 +2401,20 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 }
 declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Switch — track + thumb scale together via the shared control size
+ * scale. Dimensions stay on Tailwind's spacing scale (no arbitrary
+ * values): thumb travel = trackWidth − thumbWidth − 2×border, which
+ * lands on a clean `translate-x-*` step at each size. `xs`/`sm` are the
+ * dense tool-panel sizes (the Studio inspector).
+ */
+declare const switchTrackVariants: (props?: ({
+    size?: "sm" | "default" | "xs" | "2xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SwitchSize = NonNullable<VariantProps<typeof switchTrackVariants>["size"]>;
+declare const Switch: React$1.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
+    size?: SwitchSize;
+} & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
@@ -2336,15 +2531,27 @@ interface TabsTriggerProps extends React$1.ComponentPropsWithoutRef<typeof TabsP
 declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
+/**
+ * Textarea variants — `size` mirrors Input so the whole form-control
+ * family scales together. Default keeps the existing min-h-[80px] /
+ * px-3 / text-sm; `sm` and `xs` are for dense tool panels.
+ */
+declare const textareaVariants: (props?: ({
+    size?: "sm" | "default" | "xs" | "2xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
+type TextareaProps = Omit<React$1.ComponentProps<"textarea">, "size"> & {
+    size?: TextareaSize;
+};
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Toggle: React$1.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | "xs" | "2xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
@@ -2429,7 +2636,7 @@ declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGrou
  * persistent footer toolbars on mobile-style layouts.
  */
 declare const toolbarVariants: (props?: ({
-    position?: "bottom" | "top" | "inline" | null | undefined;
+    position?: "top" | "bottom" | "inline" | null | undefined;
     variant?: "default" | "transparent" | "subtle" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     sticky?: boolean | null | undefined;
@@ -2673,6 +2880,78 @@ declare const Map: React$1.ForwardRefExoticComponent<MapProps & React$1.RefAttri
 
 declare const MapMarker: React$1.NamedExoticComponent<MapMarkerProps>;
 
+/**
+ * lib/motion — the global motion control for gradeui.
+ *
+ * One choke point for "should this animate?". Every animated component
+ * (ThreeScene, RivePlayer, VideoPlayer, aura surfaces) asks
+ * `useReducedMotion()`, so flipping motion off in one place stills them all.
+ *
+ * Two independent inputs, ORed together (reduce-only by design — the toggle
+ * can ADD restriction but never override a user's OS preference to force
+ * motion ON):
+ *
+ *   1. the OS `prefers-reduced-motion: reduce` media query, and
+ *   2. a `data-motion="off"` attribute on the document root (`<html>`),
+ *      the manual toggle.
+ *
+ * The attribute is the same mechanism the renderer's `data-fidelity` flag
+ * uses: stamp it on `<html>` and CSS + components react. Inside Studio's
+ * Fast Frame / embed / share iframes it is driven over postMessage
+ * (`grade:set-motion`), so the toggle reaches into the sandbox where the
+ * ThreeScene surfaces actually run. A matching `[data-motion="off"]` CSS
+ * reset in `styles/globals.css` covers pure-CSS animation/transition.
+ *
+ * Sibling to lib/demo (the scripted-reveal spine).
+ */
+/** The attribute stamped on `<html>` to force motion off. */
+declare const MOTION_ATTR = "data-motion";
+/**
+ * Returns `true` when motion should be suppressed — either the OS reports
+ * `prefers-reduced-motion: reduce`, or the global `data-motion="off"` toggle
+ * is set on `<html>`. Stays live: re-reads on media-query change and on the
+ * attribute mutating.
+ *
+ * SSR-safe — defaults to `false` (motion allowed) on the server and
+ * rehydrates in an effect, so it never causes a hydration mismatch.
+ */
+declare function useReducedMotion(): boolean;
+/**
+ * @deprecated Prefer {@link useReducedMotion}. Kept for back-compat with the
+ * components that import it from `media-surface`; it now also folds in the
+ * global `data-motion="off"` toggle, not just the OS query.
+ */
+declare const usePrefersReducedMotion: typeof useReducedMotion;
+/**
+ * Returns `true` when the page is actually being watched — the tab is visible
+ * AND (for a top-level document) the window is focused. Inside an iframe the
+ * focus check is skipped, because an iframe rarely "has focus" even when its
+ * tab is frontmost; it falls back to visibility, which correctly tracks the
+ * top tab. Use it to PAUSE autoplay loops when nobody's looking: a movie stops
+ * when you tab away.
+ *
+ * SSR-safe — defaults to `true` and rehydrates in an effect.
+ *
+ * Scope, deliberately: this knows about tab visibility + window focus, NOT
+ * whether the element is scrolled into view (pair it with an
+ * IntersectionObserver — e.g. motion's `useInView` — for that), and NOT
+ * whether a cross-document iframe has scrolled off its PARENT's viewport. An
+ * iframe can't see the parent's scroll; the parent must observe the host and
+ * pause it. See the grid poster/promote policy in STUDIO-CAPTURE.md.
+ */
+declare function usePageActive(): boolean;
+/**
+ * Imperatively set the global motion toggle on `<html>`.
+ *
+ *   setMotion(false) → stamps `data-motion="off"` (animation suppressed)
+ *   setMotion(true)  → removes the attribute (default: respect the OS only)
+ *
+ * Reduce-only: turning motion "on" never forces animation for a viewer whose
+ * OS asks for reduced motion — `useReducedMotion()` still honours the query.
+ * No-op on the server.
+ */
+declare function setMotion(enabled: boolean): void;
+
 /**
  * MediaSurface — the shared shell used by VideoPlayer, RivePlayer, ThreeScene
  * AND the canonical "media slot" primitive for still images, posters, album
@@ -2710,7 +2989,7 @@ declare const MapMarker: React$1.NamedExoticComponent<MapMarkerProps>;
  * the right semantics.
  */
 
-type MediaAspect = "video" | "square" | "portrait" | "wide" | "auto";
+type MediaAspect = "video" | "standard" | "square" | "portrait" | "wide" | "auto";
 type MediaRadius = "none" | "sm" | "md" | "lg" | "xl";
 /**
  * What kind of media is this slot intended for? Drives three things:
@@ -2854,6 +3133,11 @@ declare global {
     interface Window {
         __gradeMediaUrls?: MediaUrlMap;
         __gradeMediaOverrides?: MediaOverrideMap;
+        /** Source-keys with a Fill request currently in flight. Stamped by
+         *  the sandbox agent on `grade:set-media-pending`; drives the
+         *  placeholder's Presence shimmer (gds-aura-shimmer) so slots read
+         *  as "being generated" rather than inert while the resolver works. */
+        __gradeMediaPending?: Record<string, true>;
     }
 }
 interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -2968,8 +3252,6 @@ interface BaseMediaProps {
     className?: string;
     style?: React$1.CSSProperties;
 }
-/** Hook — returns `true` when the OS reports reduced-motion preference. */
-declare function usePrefersReducedMotion(): boolean;
 
 /**
  * VideoPlayer — native HTML5 video wrapped in a MediaSurface.
@@ -3013,6 +3295,217 @@ interface RivePlayerProps extends BaseMediaProps {
 }
 declare const RivePlayer: React$1.ForwardRefExoticComponent<RivePlayerProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Logo — a brand mark with lockup, background-mode, and monochrome
+ * variations, fed bespoke artwork per slot.
+ *
+ * A brand rarely has one logo: there's a square mark for tight spaces, a
+ * horizontal lockup for headers, and single-colour versions for busy or
+ * inverted backgrounds. This component holds that set and renders the right
+ * one for the context, so a sidenav, toolbar, and footer can all reach for
+ * `<Logo>` and ask for the lockup/mode they need.
+ *
+ * Artwork is yours: each slot is any React node — an inline `<svg>`, an
+ * `<img>`, or a component. Supply only what you have; the component falls
+ * back across appearances and lockups so a partial set still renders
+ * something. Monochrome artwork should paint with `currentColor` so it
+ * inherits the surrounding text colour.
+ *
+ * Selection is explicit, not theme-coupled: set `mode="dark"` when the logo
+ * sits on a dark surface. (Wrap it in your own theme hook if you want it
+ * automatic.)
+ */
+type LogoLockup = "square" | "horizontal" | "icon";
+type LogoMode = "light" | "dark";
+type LogoSize = "sm" | "md" | "lg" | "xl";
+/** Artwork for one lockup. `light`/`dark` are the full-colour versions for a
+ *  light or dark background; `mono` is a single-colour treatment that
+ *  inherits `currentColor` and works on any background. */
+interface LogoVariant {
+    light?: React$1.ReactNode;
+    dark?: React$1.ReactNode;
+    mono?: React$1.ReactNode;
+}
+/** The brand artwork set, keyed by lockup then appearance. */
+interface LogoSources {
+    square?: LogoVariant;
+    horizontal?: LogoVariant;
+    icon?: LogoVariant;
+}
+interface LogoProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "children"> {
+    /** The brand artwork. Supply only the slots you have. Optional — with
+     *  no artwork at all the neutral placeholder renders, which keeps
+     *  layout intact (and keeps a model-emitted bare `<Logo />` from
+     *  crashing a Studio preview). */
+    sources?: LogoSources;
+    /** Which lockup to show. Falls back to another lockup if this one is
+     *  empty. Default `"horizontal"`. */
+    lockup?: LogoLockup;
+    /** The background the logo sits on — selects the light/dark artwork.
+     *  Explicit (not theme-coupled). Default `"light"`. */
+    mode?: LogoMode;
+    /** Render the monochrome artwork instead of full colour. Mono inherits
+     *  `currentColor`, so set the text colour on a parent. Default `false`. */
+    mono?: boolean;
+    /** Height of the logo — a t-shirt token or a raw pixel number. Width is
+     *  intrinsic (square/icon are 1:1, horizontal keeps its ratio).
+     *  Default `"md"`. */
+    size?: LogoSize | number;
+    /** Accessible name (e.g. the brand name) → `aria-label` + `role="img"`.
+     *  Omit and set `decorative` when something nearby already names it. */
+    label?: string;
+    /** Mark the logo decorative (`aria-hidden`, no role). Use when the brand
+     *  name is already in the DOM beside it. */
+    decorative?: boolean;
+    /** Optional link target — renders the logo as an `<a>` (logo-links-home). */
+    href?: string;
+}
+declare const Logo: React$1.ForwardRefExoticComponent<LogoProps & React$1.RefAttributes<HTMLElement>>;
+
+/**
+ * ScreenAnimator — wrap any content in a directed camera.
+ *
+ * Give it a list of `shots` (a zoom + focal point + dwell) and it tours them:
+ * flies in from offscreen, eases between shots, settles back to the start,
+ * exits, and loops, with a focus spotlight, a synthetic cursor, captions, and
+ * a play/pause/restart transport. The content stays live and interactive
+ * underneath; the camera just directs the eye. It works around ANY children,
+ * a dashboard, an app shell, a single card.
+ *
+ * It's the reusable form of the camera in the embed (`useCameraTimeline` /
+ * `ZoomPan`) and the `camera-tour` scaffold — see STUDIO-DIRECTOR.md. Honours
+ * reduced motion (settles on the starter frame, no movement).
+ */
+interface ScreenAnimatorShot {
+    /** Magnification (1 = fit). >1 pushes in. */
+    zoom?: number;
+    /** Focal point as fractions of the content (0..1). Defaults to centre. */
+    cx?: number;
+    cy?: number;
+    /** Milliseconds to dwell on this shot. */
+    hold?: number;
+    /** Milliseconds to glide INTO this shot from the previous one. */
+    trans?: number;
+    /** Caption shown while on this shot. */
+    label?: string;
+}
+interface ScreenAnimatorProps {
+    /** The shot list. Omit (or one shot) for a static framed view. */
+    shots?: ScreenAnimatorShot[];
+    /** Start playing on mount. Default true. */
+    autoplay?: boolean;
+    /** Loop the tour (fly in → shots → back to start → exit → repeat). Default true. */
+    loop?: boolean;
+    /** Cap the number of loop cycles, then settle and stop — a demo is a movie,
+     *  it shouldn't spin forever. Default Infinity (loops while watched). Set a
+     *  small number for grid/embed contexts so it ends. */
+    maxLoops?: number;
+    /** Show the play / pause / restart transport. Default true. */
+    controls?: boolean;
+    /** Dim the edges when pushed in (focus vignette). Default false — opt in. */
+    spotlight?: boolean;
+    /** Render the synthetic cursor pulse on detail shots. Default true. */
+    cursor?: boolean;
+    /** Fly in from offscreen on start (and exit on loop). Default true. */
+    enter?: boolean;
+    /** Where the caption sits over the frame. Default "bottom". */
+    captionPosition?: "top" | "bottom";
+    /** Background of the stage the content sits on while it's small (fly in/out).
+     *  A CSS background string. Default a dark cinematic stage. */
+    stage?: string;
+    /** A live backdrop rendered BEHIND the content, filling the stage — an
+     *  image, a gradient, or a `<ThreeScene>` shader. Shows around the screen
+     *  while it's small (fly in/out) and behind any padding. */
+    backdrop?: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+    children: React$1.ReactNode;
+}
+declare function ScreenAnimator({ shots, autoplay, loop, maxLoops, controls, spotlight, cursor, enter, captionPosition, stage, backdrop, className, style, children, }: ScreenAnimatorProps): React$1.JSX.Element;
+
+/**
+ * Control schema — the canonical, UI-agnostic descriptor for a shader's
+ * (or effect layer's) tweakable parameters. Shared by base demos AND the
+ * universal post stack, so a single `<ShaderControls schema={...} />`
+ * renders any of them.
+ *
+ * Ported from the three-lab experiments (the proven shape) and extended
+ * with two controls from the Paper reference — `segmented` and
+ * `colorList` (Paper's colorCount) — plus an optional palette-slot
+ * binding on `color` (the "Line colour → accent" affordance).
+ *
+ * Kept free of three.js / React imports so post-stack.ts and any other
+ * renderer can depend on it without a circular import.
+ */
+/** Global palette slots a colour control can bind to. */
+type PaletteSlot = "primary" | "secondary" | "accent" | "background";
+type NumberControl = {
+    type: "slider";
+    key: string;
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    default: number;
+    /** Display unit appended in the readout (e.g. "px", "°", "%"). */
+    unit?: string;
+};
+type ColorControl = {
+    type: "color";
+    key: string;
+    label: string;
+    default: string;
+    /** When set, the control FOLLOWS this palette slot (re-tints with the
+     *  theme, shows a "→ accent" affordance) until the user overrides it. */
+    slot?: PaletteSlot;
+};
+/** A variable-length list of colours — Paper's colorCount + swatches. */
+type ColorListControl = {
+    type: "colorList";
+    key: string;
+    label: string;
+    default: string[];
+    /** Min / max swatches the user can add. */
+    min?: number;
+    max?: number;
+};
+type ToggleControl = {
+    type: "toggle";
+    key: string;
+    label: string;
+    default: boolean;
+};
+type SelectControl = {
+    type: "select";
+    key: string;
+    label: string;
+    options: ReadonlyArray<{
+        value: string;
+        label: string;
+    }>;
+    default: string;
+};
+/** Same data as a select, rendered as a segmented toggle (≤4 options). */
+type SegmentedControl = {
+    type: "segmented";
+    key: string;
+    label: string;
+    options: ReadonlyArray<{
+        value: string;
+        label: string;
+    }>;
+    default: string;
+};
+type DividerControl = {
+    type: "divider";
+    key: string;
+    /** Optional section heading above the divider line. */
+    label?: string;
+};
+type ControlSpec = NumberControl | ColorControl | ColorListControl | ToggleControl | SelectControl | SegmentedControl | DividerControl;
+/** A flat bag of current values, keyed by ControlSpec.key. */
+type DemoState = Record<string, number | string | boolean | string[]>;
+
 /**
  * Shared types for the three.js layer of the design system.
  *
@@ -3082,6 +3575,7 @@ interface PostPreset {
         };
     };
 }
+
 /** A shader preset is the data needed to instantiate one of the canned scenes. */
 interface ShaderPreset {
     id: string;
@@ -3099,6 +3593,10 @@ interface ShaderPreset {
     defaultPalette?: Partial<Palette>;
     /** Static poster image path for non-hover previews. Served from /public. */
     poster?: string;
+    /** Tweakable controls for this base shader (drives the controls panel
+     *  + maps to uniforms). Effect layers (grain etc.) carry their own
+     *  controls separately via EffectLayerSpec. */
+    controls?: ControlSpec[];
 }
 
 /**
@@ -3153,7 +3651,7 @@ declare function buildFragmentShaderScene(userFragment: string): SceneFactory;
  * play/pause overlay. Scene pauses when offscreen (pauseOffscreen default `true`).
  */
 
-interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster"> {
+interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster">, Omit<React$1.HTMLAttributes<HTMLDivElement>, keyof BaseMediaProps> {
     /** Preset id from the shader preset registry. */
     preset?: string;
     /**
@@ -3169,8 +3667,12 @@ interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster"> {
     fragmentShader?: string;
     /** Called when a supplied `fragmentShader` fails to compile. */
     onShaderError?: (error: ShaderCompileError) => void;
-    /** Post-FX preset id. Defaults to the preset's `defaultPostPreset` or "vhs". */
-    postPreset?: string;
+    /** Post-FX preset. Either a registry id (`"vhs"`) OR a full `PostPreset`
+     *  object — pass an object (e.g. from `postStateToPreset`) to drive the
+     *  stack live from a controls panel; changes are applied via the
+     *  composer's `setPreset` WITHOUT remounting WebGL. Defaults to the
+     *  base preset's `defaultPostPreset` or "vhs". */
+    postPreset?: string | PostPreset;
     /** Palette overrides. Unset slots fall back to `DEFAULT_PALETTE`. */
     palette?: Partial<Palette>;
     /**
@@ -3182,9 +3684,168 @@ interface ThreeSceneProps extends Omit<BaseMediaProps, "src" | "poster"> {
     poster?: string;
     /** Pixel-ratio cap. Defaults to `Math.min(window.devicePixelRatio, 2)`. */
     maxDpr?: number;
+    /**
+     * Controlled play/pause. When provided, pauses/resumes the render loop
+     * WITHOUT remounting the WebGL context (unlike `autoPlay`, which only
+     * sets the initial state and remounts on change). Use for "animate on
+     * hover" thumbnails. Reduced-motion still forces paused.
+     */
+    play?: boolean;
 }
 declare const ThreeScene: React$1.ForwardRefExoticComponent<ThreeSceneProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * ShaderControls — renders a `ControlSpec[]` schema into a live controls
+ * panel using the DS control primitives. One component drives every
+ * shader's params, the universal post stack (POST_CONTROLS), and any
+ * effect layer — because they all describe themselves as ControlSpec[].
+ *
+ * Controlled: parent owns the `DemoState` and gets `onChange(key, value)`
+ * on every edit. UI-only; it knows nothing about WebGL.
+ *
+ * Mapping:
+ *   slider     → Slider + editable number (with optional unit)
+ *   segmented  → ToggleGroup (single)
+ *   select     → Select (compact)
+ *   toggle     → Switch
+ *   color      → swatch + hex field (with optional "→ slot" binding hint)
+ *   colorList  → N swatches + add/remove (Paper's colorCount)
+ *   divider    → section heading + rule
+ */
+
+interface ShaderControlsProps {
+    controls: readonly ControlSpec[];
+    state: DemoState;
+    onChange: (key: string, value: number | string | boolean | string[]) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare function ShaderControls({ controls, state, onChange, disabled, className, }: ShaderControlsProps): React$1.JSX.Element;
+
+/**
+ * BackgroundFill — a frame's background *paint*, as a layer.
+ *
+ * This is the render boundary for the "fill" model: a generative
+ * background (shader), an image, a video, a gradient, a repeating
+ * texture, or a solid token is NEVER a free-standing selectable node.
+ * It is a paint that belongs to a frame, exactly like a fill in Figma /
+ * Paper. The frame is the thing you select; this layer is plumbing.
+ *
+ * Drop it as the FIRST child of a `relative` frame. It paints an
+ * `absolute inset-0`, `z-0`, `pointer-events-none` layer behind the
+ * frame's content — so siblings that carry `relative z-10` (or any
+ * positioned/z-indexed content) sit on top automatically. It is marked
+ * `data-gds-part="frame-fill"` + `aria-hidden` so Studio treats it as
+ * chrome (not separately selectable) and a11y trees skip it.
+ *
+ * The `type` switch picks what gets painted:
+ *   none     → renders nothing
+ *   solid    → a theme token (or any CSS colour)
+ *   gradient → a linear-gradient from from/via/to stops
+ *   image    → an <img> (object-fit) or a tiled background (repeat)
+ *   video    → a muted, looping, autoplaying <video>
+ *   shader   → a <ThreeScene> generative shader (preset or GLSL)
+ *
+ * Common controls — `opacity` and `blendMode` — apply to every type,
+ * mirroring the inspector's Blending section.
+ */
+
+type BackgroundFillType = "none" | "solid" | "gradient" | "image" | "video" | "shader";
+type BackgroundFillFit = "cover" | "contain" | "fill" | "none";
+interface BackgroundFillProps {
+    /** Which paint to render. */
+    type: BackgroundFillType;
+    /** Token name (`primary`, `card`, …) or any CSS colour. */
+    color?: string;
+    /** Gradient stops — token names or CSS colours. `shape: "radial"`
+     *  swaps the linear paint for a radial wash (the classic "soft glow
+     *  behind the hero"); `at` positions its centre, `size` fixes the
+     *  ellipse (e.g. "45rem 50rem" — defaults to farthest-corner).
+     *  `angle` is linear-only; `at`/`size` are radial-only. */
+    gradient?: {
+        from?: string;
+        via?: string;
+        to?: string;
+        angle?: number;
+        shape?: "linear" | "radial";
+        at?: string;
+        size?: string;
+    };
+    /** Image or video URL. */
+    src?: string;
+    /** object-fit for image / video. Default `cover`. */
+    fit?: BackgroundFillFit;
+    /** CSS object-position / background-position. Default `center`. */
+    position?: string;
+    /** Tile the image (uses background-image + repeat instead of <img>). */
+    repeat?: boolean;
+    /** Tile size when `repeat` (CSS background-size, e.g. "120px"). */
+    tileSize?: string;
+    /** Shader preset id (see ThreeScene). */
+    preset?: string;
+    /** Custom GLSL fragment shader (takes precedence over preset). */
+    fragmentShader?: string;
+    /** Palette overrides for the shader. */
+    palette?: Partial<Palette>;
+    /** Post-FX preset id or live PostPreset object. */
+    postPreset?: string | PostPreset;
+    /** Layer opacity (0–1). */
+    opacity?: number;
+    /** CSS mix-blend-mode against the frame behind it. */
+    blendMode?: React$1.CSSProperties["mixBlendMode"];
+    /** Corner radius — match the frame's so the paint clips cleanly. */
+    radius?: MediaRadius;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+declare const BackgroundFill: React$1.ForwardRefExoticComponent<BackgroundFillProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * FillPicker — Grade's paint picker, modelled on Figma's fill popover.
+ *
+ * A type-icon row across the top (solid · gradient · image · pattern ·
+ * video · shader) switches the panel below to that paint's controls,
+ * with a global opacity at the foot. It emits a `FillValue` that maps
+ * 1:1 onto `<BackgroundFill>` props, so the inspector's Fill section and
+ * any frame background share one control + one data shape.
+ *
+ * Grade is token-led, so the SOLID tab leads with theme-token swatches
+ * (the "Libraries" half of Figma's picker) rather than a freeform HSV
+ * square. A custom-colour square is a deliberate later pass.
+ */
+
+/** A paint value — the serialisable shape both the picker and
+ *  `<BackgroundFill>` speak. */
+interface FillValue {
+    type: BackgroundFillType;
+    color?: string;
+    gradient?: {
+        from?: string;
+        via?: string;
+        to?: string;
+        angle?: number;
+    };
+    src?: string;
+    fit?: BackgroundFillFit;
+    repeat?: boolean;
+    tileSize?: string;
+    preset?: string;
+    palette?: Partial<Palette>;
+    postPreset?: string | PostPreset;
+    opacity?: number;
+}
+/** Theme tokens offered as solid / gradient swatches. */
+declare const FILL_TOKENS: readonly ["primary", "accent", "secondary", "muted", "card", "background", "destructive", "transparent"];
+interface FillPickerProps {
+    value: FillValue;
+    onChange: (value: FillValue) => void;
+    className?: string;
+}
+declare function FillPicker({ value, onChange, className }: FillPickerProps): React$1.JSX.Element;
+declare namespace FillPicker {
+    var displayName: string;
+}
+
 /**
  * ShaderPresetPreview — a thumbnail-sized preview of a shader preset.
  *
@@ -3204,7 +3865,7 @@ interface ShaderPresetPreviewProps {
     postPreset?: string;
     palette?: Partial<Palette>;
     className?: string;
-    aspect?: "video" | "square" | "portrait" | "wide";
+    aspect?: "video" | "standard" | "square" | "portrait" | "wide";
     radius?: "none" | "sm" | "md" | "lg" | "xl";
     /** Text label shown on the card. Defaults to preset label. */
     label?: string;
@@ -3756,4 +4417,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.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, BUILT_IN_INPUTS, 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 ChartPalette, Checkbox, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, DEMO_SPEED_PRESETS, 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, FRAGMENT_HEADER, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, 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, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, 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, Switch, 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 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, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, toggleVariants, useCarouselApi, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion, 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, 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 ChartPalette, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, Composer, type ComposerAttachment, type ComposerAttachmentConfig, type ComposerContent, type ComposerFormat, type ComposerHandle, type ComposerMentionItem, type ComposerProps, ComposerReply, type ComposerStep, type ComposerTriggerConfig, DEMO_SPEED_PRESETS, 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, 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, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, 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, 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 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, themeToCSSVars, toggleVariants, useCarouselApi, useGradeTheme, useMaybeGradeTheme, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };