@gradeui/ui 1.0.0 → 1.2.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 { Language } from 'prism-react-renderer';
+import { LexicalEditor } from 'lexical';
 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';
@@ -172,14 +174,14 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
             description: z.ZodOptional<z.ZodString>;
         }, "strip", z.ZodTypeAny, {
             kind: "book";
-            description?: string | undefined;
             title?: string | undefined;
+            description?: string | undefined;
             author?: string | undefined;
             isbn?: string | undefined;
         }, {
             kind: "book";
-            description?: string | undefined;
             title?: string | undefined;
+            description?: string | undefined;
             author?: string | undefined;
             isbn?: string | undefined;
         }>, z.ZodObject<{
@@ -249,11 +251,11 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
             kind: z.ZodLiteral<"generic">;
             prompt: z.ZodString;
         }, "strip", z.ZodTypeAny, {
-            kind: "generic";
             prompt: string;
-        }, {
             kind: "generic";
+        }, {
             prompt: string;
+            kind: "generic";
         }>, z.ZodUnion<[z.ZodObject<{
             kind: z.ZodLiteral<"video">;
         }, "strip", z.ZodTypeAny, {
@@ -379,10 +381,10 @@ declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<Accordion
  * `variant="warning"` or `variant="info"` depending on temperature.
  */
 declare const calloutVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Callout: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CalloutTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const CalloutDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
@@ -465,18 +467,142 @@ interface AppShellFooterProps extends React$1.HTMLAttributes<HTMLElement>, Varia
 }
 declare const AppShellFooter: React$1.ForwardRefExoticComponent<AppShellFooterProps & React$1.RefAttributes<HTMLElement>>;
 
-declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * Avatar — circular user/entity glyph. Wraps Radix's avatar primitive
+ * with two ergonomic additions over the base shadcn shape:
+ *
+ *   size — t-shirt scale (xs / sm / md / lg / xl) so consumers pick a
+ *          token instead of writing `h-7 w-7` every time. Defaults
+ *          to md (40px) to preserve previous behaviour.
+ *
+ *   tone — on AvatarFallback only. Picks a tinted bg/text colour
+ *          pair (violet / amber / emerald / sky / rose / plum / lime /
+ *          primary / muted). Default `muted` matches the previous
+ *          `bg-muted` behaviour. Reach for explicit tones when each
+ *          author needs a stable colour mapping (chat avatars, comment
+ *          threads, member lists).
+ *
+ * Both additions are backwards compatible — code that passed className
+ * directly still works and overrides the variant defaults.
+ */
+declare const avatarSizes: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarSizes> {
+}
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const avatarFallbackTones: (props?: ({
+    tone?: "muted" | "primary" | "violet" | "amber" | "emerald" | "sky" | "rose" | "plum" | "lime" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AvatarFallbackProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, VariantProps<typeof avatarFallbackTones> {
+}
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | "highlight" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
+    variant?: "default" | "info" | "success" | "warning" | "destructive" | "outline" | "secondary" | "highlight" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
+/**
+ * Surface — what a container is *made of*.
+ *
+ * Shared across every component that surfaces content (Card, Dialog,
+ * Sheet, Popover, DropdownMenu, HoverCard, SectionBlock). Picking the
+ * material is a first-class prop axis on each of those components,
+ * orthogonal to elevation (how high) and aura (what it radiates) — see
+ * gradeui/PRESENCE.md for the three-axis model.
+ *
+ * Putting this on the prop API instead of leaving it as a className
+ * escape-hatch buys three things:
+ *
+ *   1. Studio's inspector surfaces a `surface` knob on every container
+ *      so users can flip the material without touching code.
+ *   2. The model has a first-class vocabulary to pick from — without
+ *      this it reaches for `bg-card/40 backdrop-blur-md` Tailwind soup
+ *      and loses the edge highlight + theme-aware blur tuning.
+ *   3. Themes can retune `--surface-blur-*` / `--surface-alpha-*`
+ *      centrally and every container moves with them.
+ *
+ * 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";
+
+/**
+ * Banner — full-width horizontal strip surfacing system-level state or
+ * announcements that should stay visible until acknowledged.
+ *
+ * The shape is the difference from Callout:
+ *
+ *   Callout = inline boxed message in the layout flow (rounded box,
+ *             body-paragraph width, lives inside a Card/Section).
+ *   Banner  = full-bleed horizontal strip across a page / panel /
+ *             AppShellHeader top. Single-line by default.
+ *
+ * Use cases that should be Banner, not Callout, not Dialog:
+ *   - "You're previewing this from main — switch to your branch"
+ *   - "We're investigating an incident affecting search"
+ *   - "Send your design to Figma — get the Grade plugin"
+ *   - "New: scaffold-playground tab"
+ *
+ * Three Presence axes apply: variant (intent colour), surface
+ * (material), shadow utilities for elevation. The default is
+ * `variant="default" surface="solid"`, which yields a calm announcement
+ * strip in the active theme. Status variants pick up the soft / deep
+ * token pairs (`--info-soft` + `--info-deep`, etc.), same pattern as
+ * Callout.
+ *
+ * AUTHORING ORIGIN: this primitive was extracted out of
+ * `apps/docs/components/studio/figma-intro-banner.tsx` after the user
+ * flagged that ad-hoc banner as invisible — it was reaching for
+ * `--gds-primary` / `--gds-border` / `--gds-foreground` tokens that
+ * don't exist (our tokens are unprefixed). The inline-style fallbacks
+ * kicked in and the chrome washed out completely. Banner exists so the
+ * "I need a one-line announcement strip" need lands in a primitive that
+ * cannot get the token names wrong.
+ */
+declare const bannerVariants: (props?: ({
+    variant?: "default" | "info" | "success" | "warning" | "destructive" | "announcement" | null | undefined;
+    align?: "center" | "start" | "between" | 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> {
+    /**
+     * Material the banner is *made of*. Defaults to `solid` (the
+     * variant's tinted bg). `glass` is useful when the banner sits over
+     * a hero image / generative backdrop and the imagery underneath
+     * should remain visible.
+     */
+    surface?: Surface;
+    /**
+     * Show a close button at the trailing end. The button calls
+     * `onDismiss` if provided; otherwise the consumer controls
+     * visibility via standard React state on the parent.
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when the user clicks the trailing close button. Required
+     * when `dismissible` is set if you want the banner to actually
+     * disappear (the primitive itself stays controlled).
+     */
+    onDismiss?: () => void;
+    /**
+     * Leading slot — typically a single Lucide icon. The status icon
+     * is NOT inferred from variant; pass the one that fits your message.
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Optional trailing action — usually a Button or anchor. Sits to the
+     * left of the dismiss button.
+     */
+    action?: React$1.ReactNode;
+}
+declare const Banner: React$1.ForwardRefExoticComponent<BannerProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
  * Button — primary action primitive.
  *
@@ -497,8 +623,8 @@ declare function Badge({ className, variant, rounded, ...props }: BadgeProps): R
  * consistent across primitives.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "raised" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "raised" | null | undefined;
+    size?: "default" | "icon" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -649,7 +775,22 @@ declare const Carousel: CarouselRootComponent;
 
 declare function useCarouselApi(): EmblaApi | undefined;
 
-declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * What the card surface is *made of*. Composes with `shadow-elevation-*`
+     * (depth) and `gds-aura-*` (state signal) — see PRESENCE.md.
+     *
+     * - `solid` (default): opaque `bg-card`.
+     * - `translucent`: ~82% opacity, no blur. Menu sheets, popovers.
+     * - `glass`: ~58% opacity + 14px blur + edge highlight. Floating panels.
+     * - `glass-strong`: ~42% opacity + 24px blur. Full-page overlays.
+     *
+     * When `surface` is set to anything other than `solid`, the base
+     * `bg-card` is dropped so the glass alpha can pass through.
+     */
+    surface?: Surface;
+}
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -658,6 +799,822 @@ 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>>;
 
+/**
+ * Code — syntax-highlighted code surface with diff, line-emphasis, and
+ * reveal animation modes. Designed for marketing heroes ("diff hero"),
+ * docs blocks, and changelog entries.
+ *
+ * Engine choice: prism-react-renderer. Sync, ~6kb, render-prop API hands
+ * us `tokens` as data. Already in use in Studio's CodeView so the repo
+ * has one highlighter, not two. Async highlighters (shiki) would either
+ * flash unstyled on hydration or balloon the marketing bundle once you
+ * include enough langs to matter. See gradeui/STUDIO.md for the Studio
+ * variant.
+ *
+ * Theme is CSS-variable driven (`--gds-code-*`), so token palette
+ * inverts with the theme without us re-rendering a different prism
+ * theme. The prism `theme` prop just hands each token type a
+ * `color: var(--gds-code-<thing>)` so the cascade does the work.
+ *
+ * Animation strategy: motion (already a dep). `reveal="lines"` staggers
+ * each line in; `typewriter` reveals tokens one-at-a-time per line;
+ * `diff` plays the removed → added swap. The `trigger` prop selects
+ * what kicks it off — `inView` is the common case for scroll-driven
+ * marketing surfaces; `mount` fires immediately; `manual` reads `play`.
+ */
+type CodeLanguage = Language;
+type CodeReveal = "none" | "lines" | "typewriter" | "diff";
+type CodeTrigger = "mount" | "inView" | "manual";
+type CodeSpeed = "slow" | "normal" | "fast";
+type CodeSize = "xs" | "sm" | "md";
+/**
+ * Step shape for scripted terminal / CLI sessions. Lives on `<Code>`
+ * itself rather than a sibling `CodeSequence` so the theme bridge,
+ * prompt prop, cursor, surface tokens, and prism highlighter aren't
+ * duplicated. When `steps` is provided, it overrides `source` + `reveal`
+ * and runs the machine below internally.
+ *
+ *   - `type`   — types text into the buffer as if a user were typing
+ *   - `output` — appends text instantly as command output (no prompt,
+ *                no per-char delay, often muted in render)
+ *   - `wait`   — pauses for `ms` milliseconds before the next step
+ *   - `clear`  — wipes the buffer (terminal `clear`)
+ */
+type CodeStep = {
+    type: "type";
+    text: string;
+    speed?: CodeSpeed;
+} | {
+    type: "output";
+    text: string;
+} | {
+    type: "wait";
+    ms: number;
+} | {
+    type: "clear";
+};
+interface CodeDiff {
+    /** 1-indexed line numbers marked as added (green bg + `+` gutter). */
+    added?: number[];
+    /** 1-indexed line numbers marked as removed (red bg + `-` gutter). */
+    removed?: number[];
+}
+interface CodeProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Source code to render. Optional when `steps` is provided — the
+     * scripted machine builds its own buffer and ignores `source`. When
+     * neither `source` nor `steps` is set, the block renders empty.
+     */
+    source?: string;
+    /** Prism language id — `tsx` handles JSX too. Defaults to `tsx`. */
+    language?: CodeLanguage;
+    /**
+     * 1-indexed lines (or `[start, end]` ranges) to emphasise with the
+     * highlight background. Composes with `diff` — diff colours win.
+     */
+    highlight?: number | number[] | Array<number | [number, number]>;
+    /** Diff mode — paints +added / -removed lines and renders a gutter. */
+    diff?: CodeDiff;
+    /** Reveal animation. Defaults to `none`. */
+    reveal?: CodeReveal;
+    /** What triggers the reveal. Defaults to `mount`. */
+    trigger?: CodeTrigger;
+    /** For `trigger="manual"` — set true to play. */
+    play?: boolean;
+    /**
+     * Animation feel — slow / normal (default) / fast. Maps onto sensible
+     * stagger + pre-reveal delay values so authors don't have to think.
+     * Explicit `stagger` / `delay` override the preset if provided.
+     */
+    speed?: CodeSpeed;
+    /** Delay before the reveal starts (ms). Overrides the `speed` preset. */
+    delay?: number;
+    /**
+     * Per-line stagger for `lines`/`diff`, per-token for `typewriter`
+     * (ms). Overrides the `speed` preset.
+     */
+    stagger?: number;
+    /** Show 1-indexed line numbers in a gutter. */
+    showLineNumbers?: boolean;
+    /** Optional filename / label in the chrome header. */
+    filename?: string;
+    /** Wrap long lines instead of horizontal scroll. */
+    wrap?: boolean;
+    /** Hide the surrounding chrome (border, header, padding). */
+    bare?: boolean;
+    /**
+     * String prepended to every line. Use for terminal emulation
+     * (`prompt="$ "` for bash, `prompt="> "` for PowerShell, `prompt=">>> "`
+     * for Python REPL). Prompt characters render in muted token colour,
+     * don't pick up the typewriter stagger (they're chrome, not content),
+     * and are aria-hidden so screen readers don't read them.
+     */
+    prompt?: string;
+    /**
+     * Show a blinking cursor at the tail of the reveal — implies the
+     * "typing" gesture in marketing demos and terminal sessions.
+     * Defaults to `true` when `reveal="typewriter"`, `false` otherwise.
+     * Pass explicit `true` to keep the cursor up after a `lines` reveal
+     * completes, or `false` to hide it on a typewriter run.
+     */
+    cursor?: boolean;
+    /**
+     * Scripted terminal session. When provided, takes precedence over
+     * `source` + `reveal` — the component runs the step machine,
+     * progressively appending characters per step. Pairs naturally with
+     * `language="bash"` + `prompt="$ "` + `cursor` (all default-on).
+     *
+     * Output lines are rendered without a prompt prefix and at a muted
+     * token colour so they read as command output rather than input.
+     * Use `wait` between commands to let the user catch up.
+     *
+     * Example:
+     *   <Code language="bash" prompt="$ " steps={[
+     *     { type: "type", text: "pnpm add @gradeui/ui" },
+     *     { type: "wait", ms: 500 },
+     *     { type: "output", text: "added 47 packages in 2.3s" },
+     *     { type: "type", text: "pnpm gradeui init" },
+     *   ]} />
+     */
+    steps?: CodeStep[];
+    /**
+     * When `steps` is set: loops the sequence forever after completion
+     * (with a 2s pause + clear between cycles). For "always-on" hero
+     * demos that need to keep playing.
+     */
+    loop?: boolean;
+    /**
+     * Container sizing — `auto` (default) grows with the rendered lines.
+     * A number is treated as pixels (`300` → `300px`); a string is passed
+     * through as CSS (`"20rem"`, `"50vh"`, `"calc(100vh - 4rem)"`).
+     *
+     * Overflowing content scrolls. Pair with `wrap` to break long lines
+     * instead of horizontal scroll.
+     */
+    /**
+     * Type-scale preset. `xs` (12px) for dense changelog cards and inline
+     * code in tables; `sm` (14px, default) for marketing heroes and most
+     * docs blocks; `md` (16px) for "this is the focal point" displays
+     * like AI-output demos and large screen-capture replacements.
+     *
+     * Composes with `maxLines` correctly because the container height
+     * uses `1lh` which inherits whatever line-height the size class
+     * produces — switching size resizes the container automatically.
+     */
+    size?: CodeSize;
+    height?: number | string | "auto";
+    /**
+     * Cap the visible line count — the container is fixed at exactly
+     * `maxLines * 1lh` and additional lines scroll. Use for terminal
+     * windows ("show me the last 8 lines"), code-tour cards, and
+     * marketing surfaces that need a stable vertical rhythm regardless
+     * of how much content is in the snippet.
+     *
+     * Wins over `height` when both are set.
+     */
+    maxLines?: number;
+}
+declare const Code: React$1.ForwardRefExoticComponent<CodeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Message — the canonical "avatar + author + timestamp + body" row.
+ *
+ * THE primitive for any chat message, comment, post-reply, activity-log
+ * entry, or notification row that follows the people-and-text shape.
+ * Surfaced after three scaffolds (chat, comments, hero preview) all
+ * re-rolled the same flex layout inline — that was the signal.
+ *
+ * Slot-based composition for the avatar so consumers pass whatever
+ * Avatar variant fits their surface (sized, toned, image, fallback).
+ * Message doesn't pick an Avatar shape for you — it just hosts.
+ *
+ *   <Message
+ *     author="alice"
+ *     timestamp="11:24"
+ *     avatar={
+ *       <Avatar size="sm">
+ *         <AvatarFallback tone="violet">A</AvatarFallback>
+ *       </Avatar>
+ *     }
+ *   >
+ *     Post copy is in the doc.
+ *   </Message>
+ *
+ * For "your messages right-aligned" chat surfaces (iMessage / WhatsApp
+ * / your own DM threads), pass `align="end"` and the row + content
+ * mirror.
+ *
+ * Anti-patterns to avoid (caught from real scaffold use):
+ *
+ *   - Don't roll a custom "AuthorDot" inline — Avatar with
+ *     <AvatarFallback tone="..."> covers the colored-initials case
+ *     cleanly and stays themable.
+ *   - Don't use Message for non-people activity (system events,
+ *     log lines). Reach for Callout or a plain Row.
+ */
+interface MessageProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Display name of the message author. */
+    author: string;
+    /**
+     * Timestamp string ("11:24", "2 hours ago") OR any node for custom
+     * formatting (tooltip-wrapped time, link to permalink, etc).
+     */
+    timestamp?: React$1.ReactNode;
+    /**
+     * Avatar slot. Pass any `<Avatar>` composition. When omitted, the
+     * row renders without an avatar column — handy for grouped messages
+     * from the same author where only the first row shows the avatar.
+     */
+    avatar?: React$1.ReactNode;
+    /**
+     * Small chip(s) next to the author name. Use for "OP", "Bot",
+     * "Admin", or any role/state badge that belongs in the header
+     * rhythm rather than the body.
+     */
+    badge?: React$1.ReactNode;
+    /**
+     * Editing state — renders an "(edited)" hint next to the timestamp.
+     * Pass a string to customise the label (e.g. "(edited 2 minutes ago)").
+     */
+    edited?: boolean | string;
+    /**
+     * Pinned state — renders a small pin glyph at the top of the row.
+     * Surfaces "this is a sticky / pinned message" in Slack-style feeds.
+     */
+    pinned?: boolean;
+    /**
+     * End-of-header slot. Common use: a hover-revealed Row of small
+     * icon buttons (reply / react / pin / more). Pushed to the right
+     * with `ml-auto`.
+     */
+    actions?: React$1.ReactNode;
+    /**
+     * Reactions slot — renders below the body. Typically a Row of
+     * reaction chips (emoji + count). Hidden when no node is passed.
+     */
+    reactions?: React$1.ReactNode;
+    /**
+     * Thread / reply count — renders a "N replies" link affordance
+     * below the body. Click handler is the consumer's responsibility.
+     * Wire `onThreadClick` if you want the built-in button to fire.
+     */
+    threadCount?: number;
+    /** Fires when the built-in "N replies" affordance is clicked. */
+    onThreadClick?: () => void;
+    /**
+     * Visual alignment. `start` (default) puts the avatar on the left
+     * — the standard chat / comment shape. `end` mirrors the row so the
+     * avatar sits on the right and the content right-aligns — use for
+     * "your messages" in DM threads.
+     */
+    align?: "start" | "end";
+    /**
+     * Body content (the message text). Accepts any node so consumers
+     * can embed rich content — Markdown-rendered prose, images,
+     * embedded cards, etc. Plain text is the common case.
+     */
+    children: React$1.ReactNode;
+}
+declare const Message: React$1.ForwardRefExoticComponent<MessageProps & React$1.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.
+ *
+ * The runner threads an `AbortSignal` through every step so a `stop()`
+ * call (or an unmount) can short-circuit long waits and typing loops
+ * cleanly. Consumers write `await sleep(ms, signal)` inside their
+ * interpret callback and the cancellation is automatic.
+ *
+ * Note: this throws DOMException("Aborted", "AbortError") on cancel.
+ * The runner's outer try/catch swallows that specific error and exits;
+ * any other rejection bubbles up so authoring bugs aren't silenced.
+ */
+/**
+ * Promisified setTimeout that resolves after `ms` milliseconds, or
+ * rejects with an AbortError if the signal fires first. Resolves
+ * immediately if `ms <= 0`.
+ */
+declare function sleep(ms: number, signal?: AbortSignal): Promise<void>;
+/**
+ * Type `text` one character at a time, calling `onTick(partial)` for
+ * each prefix. Stagger between ticks defaults to 22ms (the `normal`
+ * speed preset's `tokenStagger`).
+ *
+ * `onTick` receives the cumulative typed text (not the new char), so
+ * consumers can do `setBuffer(prefix + partial)` without tracking state
+ * themselves. The final call fires with the complete text — there's no
+ * separate "done" callback.
+ */
+declare function typeText(text: string, onTick: (partial: string) => void, stagger?: number, signal?: AbortSignal): Promise<void>;
+
+/**
+ * useScriptedDemo — the shared step-machine hook behind every
+ * scripted-demo surface in gradeui (`<Code>`, `<Composer>`,
+ * `<DemoStage>`, anything else that wants the same play / stop / speed
+ * semantics).
+ *
+ * Generic over the Step type. Each consumer defines its own verbs
+ * (Code has `output`, Composer has `mention`, DemoStage has `reveal`)
+ * and passes an `interpret(step, ctx)` callback that executes one
+ * step. The hook owns: sequencing, cancellation, trigger detection
+ * (mount / inView / manual), loop, pre-delay, completion signal, and
+ * the imperative play() / stop() API.
+ *
+ * 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.
+ *   - 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. */
+    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;
+}
+interface UseScriptedDemoOptions<TStep> {
+    /** The steps to run. Undefined or empty means "no script". */
+    steps?: TStep[];
+    /**
+     * Per-step interpreter. Receives one step + a context with timing
+     * helpers, runs whatever the step means, and returns when done.
+     * Synchronous or async — the runner awaits either.
+     */
+    interpret: (step: TStep, ctx: ScriptedDemoContext) => Promise<void> | void;
+    /** Animation feel. Defaults to `normal`. */
+    speed?: DemoSpeed;
+    /** What kicks the script off. Defaults to `mount`. */
+    trigger?: DemoTrigger;
+    /** For `trigger="manual"` — flip true to play. */
+    play?: boolean;
+    /** Loop the sequence forever after completion. Pause length controlled by `loopDelay`. */
+    loop?: boolean;
+    /**
+     * Milliseconds to pause between loop cycles. Only applies when
+     * `loop` is true. Defaults to 2000. Marketing surfaces that want
+     * the demo to breathe between repeats bump this to 4000-6000; tight
+     * inline demos drop it to 800.
+     */
+    loopDelay?: number;
+    /** Container ref for inView detection. Required when `trigger="inView"`. */
+    containerRef?: React$1.RefObject<HTMLElement | null>;
+    /**
+     * Fires when one loop iteration completes (or the whole run, when
+     * `loop` is false). Consumers can use this to reset their buffer or
+     * fire a parent callback.
+     */
+    onComplete?: () => void;
+    /**
+     * Fires before each loop iteration starts (after the 2s pause).
+     * Use to reset per-iteration state in the consumer.
+     */
+    onLoopReset?: () => void;
+}
+interface ScriptedDemoState {
+    /** True while the runner is actively walking steps. */
+    isPlaying: boolean;
+    /** True after the last step has run (and stays true until reset). */
+    isComplete: boolean;
+    /** 0-indexed pointer to the currently executing step, or -1 idle. */
+    currentIndex: number;
+    /** Imperative trigger. Mostly for `trigger="manual"` ref handles. */
+    play: () => void;
+    /** Cancel the in-flight script. Idempotent. */
+    stop: () => void;
+    /**
+     * One-shot replay. Cancels any in-flight run, then re-plays from
+     * step 0. Pass a delay in ms to schedule the replay (useful for
+     * "play, finish, breathe, play once more" cadences without the
+     * commitment of `loop`).
+     */
+    restart: (delayMs?: number) => void;
+}
+declare function useScriptedDemo<TStep>(opts: UseScriptedDemoOptions<TStep>): ScriptedDemoState;
+
+/**
+ * BlinkingCursor — the shared caret used by every scripted-demo
+ * surface in gradeui. Styled via CSS variables so each host (Code's
+ * terminal, Composer's inline caret, future surfaces) can tweak
+ * dimensions and colour without forking the component.
+ *
+ * Tokens read from the cascade:
+ *   --gds-demo-cursor-color   defaults to currentColor
+ *   --gds-demo-cursor-width   defaults to 0.55ch (a hair narrower than
+ *                             a monospace char so it reads as a caret
+ *                             rather than a block)
+ *   --gds-demo-cursor-height  defaults to 1.1em
+ *
+ * The animation lives in `styles/globals.css` as `.gds-demo-cursor`
+ * (alongside the other demo primitives). Keeping it in CSS rather
+ * than motion / framer keeps the cursor available in environments
+ * that disable JS animation but still render the page.
+ */
+interface BlinkingCursorProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * Visual variant. `inline` (default) is for caret-in-text demos
+     * (Code, Composer). `block` is for terminal-style square cursors
+     * that fill a character cell.
+     */
+    variant?: "inline" | "block";
+}
+declare const BlinkingCursor: React$1.ForwardRefExoticComponent<BlinkingCursorProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * DemoStage + Reveal — staged appearance for whole-interface demos.
+ *
+ * Drop `<Reveal id="hero">…</Reveal>` around any subtree that should
+ * appear on cue. Wrap a region in `<DemoStage steps={…}>` and the
+ * script drives which targets become visible, in what order, with
+ * what cadence. Same speed / trigger / loop / play semantics as
+ * `<Code>` and `<Composer>`.
+ *
+ * Why a context-based pattern instead of one-component-per-region:
+ *   - Authoring stays declarative — the script reads as a storyboard,
+ *     not as a stack of imperative ref calls.
+ *   - Reveals can live deep in a subtree without prop-drilling.
+ *   - The same `<Reveal>` works whether or not a parent stage exists
+ *     (it just renders visible if there's no context, so the same
+ *     markup ships to production without the demo wrapper).
+ *
+ * Reduced motion: if the user has `prefers-reduced-motion`, every
+ * Reveal renders immediately at its destination state — the stage's
+ * script still walks, but the visual transitions are no-ops.
+ */
+type RevealStep = {
+    type: "reveal";
+    target: string;
+} | {
+    type: "reveal-all";
+} | {
+    type: "hide";
+    target: string;
+} | {
+    type: "wait";
+    ms: number;
+} | {
+    type: "reset";
+};
+type RevealAnimation = "fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "scale" | "none";
+interface DemoStageProps {
+    /** Steps that drive which Reveals are visible at what time. */
+    steps?: RevealStep[];
+    /** Speed preset. Same vocabulary as Code / Composer. */
+    speed?: DemoSpeed;
+    /** When the stage starts running. Defaults to `mount`. */
+    trigger?: DemoTrigger;
+    /** For trigger="manual" — flip true to play. */
+    play?: boolean;
+    /** Loop the script forever. */
+    loop?: boolean;
+    /** Default enter animation for child Reveals that don't override. */
+    defaultAnimation?: RevealAnimation;
+    /**
+     * Render content visible by default (every target shown) when the
+     * stage has no steps. Useful for sharing the same JSX between live
+     * production use and demo playback.
+     */
+    visibleWhenIdle?: boolean;
+    className?: string;
+    children: React$1.ReactNode;
+}
+declare function DemoStage({ steps, speed, trigger, play, loop, defaultAnimation, visibleWhenIdle, className, children, }: DemoStageProps): React$1.JSX.Element;
+interface RevealProps {
+    /** Stage target id. The matching `{ type: "reveal", target: id }` step shows this. */
+    id: string;
+    /** Enter animation. Falls back to the parent stage's `defaultAnimation`. */
+    animation?: RevealAnimation;
+    /** Override transition duration (ms). Defaults to the stage speed's fadeMs. */
+    durationMs?: number;
+    /**
+     * When true and there's no parent DemoStage, render hidden anyway.
+     * Default false — naked usage renders visible so production markup
+     * matches demo markup.
+     */
+    hideOutsideStage?: boolean;
+    /**
+     * Fires when this Reveal transitions from hidden to visible. Use to
+     * kick off a nested scripted demo (Composer.restart(), Code.play(),
+     * etc) at the moment the user actually sees the surface. Without
+     * this hook, nested demos with `trigger="mount"` would run while
+     * still hidden and the user would miss the animation entirely.
+     */
+    onReveal?: () => void;
+    /**
+     * Fires when this Reveal transitions from visible to hidden (e.g.
+     * because the stage script ran a `hide` step or looped via `reset`).
+     * Use to pause/reset nested state.
+     */
+    onHide?: () => void;
+    className?: string;
+    children: React$1.ReactNode;
+}
+declare function Reveal({ id, animation, durationMs, hideOutsideStage, onReveal, onHide, className, children, }: RevealProps): React$1.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$1.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$1.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$1.ForwardRefExoticComponent<ComposerProps & React$1.RefAttributes<ComposerHandle>>;
+declare const ComposerReply: React$1.ForwardRefExoticComponent<ComposerProps & React$1.RefAttributes<ComposerHandle>>;
+
 /**
  * DatePicker + DateRangePicker
  *
@@ -728,7 +1685,21 @@ declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.D
 declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * What the dialog surface is *made of*. Composes with the overlay
+     * scrim — see PRESENCE.md and dialog.md for scenarios.
+     *
+     * - `solid` (default): opaque `bg-background`.
+     * - `translucent`: ~82% opacity, no blur — "presence without drama".
+     * - `glass`: 58% opacity + 14px blur + edge highlight. The page
+     *   underneath shows through softly.
+     * - `glass-strong`: 42% opacity + 24px blur. For dialogs that should
+     *   feel like an overlay rather than a panel.
+     */
+    surface?: Surface;
+}
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
     displayName: string;
@@ -749,8 +1720,20 @@ declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<Dropdown
 declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSubContentProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
+    /** What the submenu surface is *made of*. See dropdown-menu.md. */
+    surface?: Surface;
+}
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuContentProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+    /**
+     * What the menu surface is *made of*. `solid` (default) is `bg-popover`.
+     * `translucent` matches Apple HIG / iOS menu sheets. `glass` for menus
+     * floating over rich canvases. See dropdown-menu.md.
+     */
+    surface?: Surface;
+}
+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"> & {
     inset?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
@@ -791,7 +1774,15 @@ declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.Label
 declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface PopoverContentProps extends React$1.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    /**
+     * What the popover surface is *made of*. Defaults to `solid`
+     * (`bg-popover`). `translucent` is the Apple HIG menu-sheet feel.
+     * `glass` for floating panels over rich canvases.
+     */
+    surface?: Surface;
+}
+declare const PopoverContent: React$1.ForwardRefExoticComponent<PopoverContentProps & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -921,7 +1912,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<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLSelectElement | HTMLTextAreaElement | HTMLMapElement | HTMLTitleElement | HTMLButtonElement | HTMLLinkElement | HTMLLabelElement | HTMLStyleElement | HTMLTableColElement | HTMLVideoElement | HTMLAudioElement | HTMLEmbedElement | HTMLSourceElement | 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 | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+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"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -961,8 +1952,8 @@ declare const ResizableHandle: ({ withHandle, className, ...props }: React$1.Com
  */
 declare const rowVariants: (props?: ({
     gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "between" | "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> {
@@ -997,7 +1988,7 @@ 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?: "start" | "center" | "end" | "stretch" | null | undefined;
+    align?: "center" | "start" | "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
@@ -1029,10 +2020,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?: "row" | "col" | "row-reverse" | "col-reverse" | null | undefined;
+    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "between" | "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> {
@@ -1078,9 +2069,16 @@ 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?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "bottom" | "top" | "right" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    /**
+     * What the sheet panel is *made of*. `solid` is the default opaque
+     * `bg-background`. `glass` lets the page show through with a 14px
+     * blur — the canonical "inspector panel" feel. Composes with the
+     * overlay scrim. See sheet.md for scenarios.
+     */
+    surface?: Surface;
 }
 declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {
@@ -1210,8 +2208,8 @@ declare const Sortable: SortableRootComponent;
  */
 declare const stackVariants: (props?: ({
     gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "start" | "center" | "end" | "stretch" | null | undefined;
-    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | null | undefined;
+    justify?: "center" | "start" | "between" | "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
@@ -1431,8 +2429,8 @@ declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGrou
  * persistent footer toolbars on mobile-style layouts.
  */
 declare const toolbarVariants: (props?: ({
-    position?: "top" | "bottom" | "inline" | null | undefined;
-    variant?: "default" | "subtle" | "transparent" | null | undefined;
+    position?: "bottom" | "top" | "inline" | null | undefined;
+    variant?: "default" | "transparent" | "subtle" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2758,4 +3756,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, type BaseMediaProps, 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, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, 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, 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, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, 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, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, 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 };
+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 };