@gradeui/ui 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -9,6 +9,7 @@ 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 * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -249,11 +250,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 +380,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>>;
@@ -470,13 +471,109 @@ declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitiv
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & 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?: "start" | "center" | "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.
  *
@@ -498,7 +595,7 @@ declare function Badge({ className, variant, rounded, ...props }: BadgeProps): R
  */
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "raised" | null | undefined;
-    size?: "default" | "sm" | "md" | "lg" | "icon" | 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 +746,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 +770,171 @@ 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";
+/**
+ * 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.
+     */
+    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>>;
+
 /**
  * DatePicker + DateRangePicker
  *
@@ -728,7 +1005,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 +1040,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 +1094,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 +1232,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<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLSelectElement | HTMLTextAreaElement | HTMLMapElement | HTMLTitleElement | HTMLButtonElement | HTMLLinkElement | HTMLLabelElement | HTMLStyleElement | HTMLSourceElement | HTMLHtmlElement | HTMLTableColElement | HTMLVideoElement | 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 | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -962,7 +1273,7 @@ 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;
+    justify?: "start" | "center" | "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> {
@@ -1032,7 +1343,7 @@ declare const flexVariants: (props?: ({
     direction?: "row" | "col" | "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;
+    justify?: "start" | "center" | "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> {
@@ -1081,6 +1392,13 @@ declare const sheetVariants: (props?: ({
     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> {
+    /**
+     * 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: {
@@ -1211,7 +1529,7 @@ 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;
+    justify?: "start" | "center" | "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
@@ -1432,7 +1750,7 @@ declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGrou
  */
 declare const toolbarVariants: (props?: ({
     position?: "top" | "bottom" | "inline" | null | undefined;
-    variant?: "default" | "subtle" | "transparent" | 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 +3076,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, 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, 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, bannerVariants, 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 };