@gradeui/ui 0.10.0 → 1.0.0

package/dist/index.d.ts

@@ -1,9 +1,13 @@
+import * as _gradeui_contracts from '@gradeui/contracts';
+import { ComponentContract } from '@gradeui/contracts';
+import { z } from 'zod';
 import * as React$1 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPicker, DayButton, DateRange } from 'react-day-picker';
+import { UseEmblaCarouselType } from 'embla-carousel-react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -16,6 +20,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import { UniqueIdentifier } from '@dnd-kit/core';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
@@ -26,16 +31,361 @@ export { C as Coords, c as MapAppearance, d as MapError, e as MapErrorCode } fro
 import * as THREE from 'three';
 import { ClassValue } from 'clsx';
 
+/**
+ * Component contract registry — auto-managed by
+ * scripts/generate-contracts.mjs. Hand-authored contracts (MediaSurface,
+ * etc.) are also wired in here; the generator preserves them on each
+ * run.
+ */
+
+declare const COMPONENT_CONTRACTS: Readonly<Record<string, ComponentContract>>;
+declare function getComponentContract(componentName: string | null | undefined): ComponentContract | null;
+declare function listContractedComponents(): string[];
+
+declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
+    hint: {
+        schema: z.ZodOptional<z.ZodEnum<["album", "tv-show", "movie", "game", "book", "portrait", "landscape", "poster", "product", "food", "video", "audio", "embed", "3d", "generic"]>>;
+        design: "knob";
+        control: "glyph-picker";
+        label: string;
+        description: string;
+        default: string;
+        examples: string[];
+    };
+    aspect: {
+        schema: z.ZodOptional<z.ZodEnum<["video", "square", "portrait", "wide", "auto"]>>;
+        design: "knob";
+        control: "toggle-group";
+        label: string;
+        description: string;
+    };
+    radius: {
+        schema: z.ZodOptional<z.ZodEnum<["none", "sm", "md", "lg", "xl"]>>;
+        design: "knob";
+        control: "toggle-group";
+        label: string;
+        default: string;
+        description: string;
+    };
+    border: {
+        schema: z.ZodOptional<z.ZodBoolean>;
+        design: "knob";
+        label: string;
+        default: boolean;
+    };
+    loading: {
+        schema: z.ZodOptional<z.ZodBoolean>;
+        design: "knob";
+        label: string;
+        default: boolean;
+        description: string;
+    };
+    emptyState: {
+        schema: z.ZodOptional<z.ZodUnion<[z.ZodLiteral<"auto">, z.ZodLiteral<"icon">, z.ZodLiteral<"none">]>>;
+        design: "knob";
+        control: "select";
+        label: string;
+        default: string;
+        description: string;
+    };
+    alt: {
+        schema: z.ZodOptional<z.ZodString>;
+        design: "content";
+        control: "text";
+        label: string;
+        description: string;
+        examples: string[];
+    };
+    src: {
+        schema: z.ZodOptional<z.ZodString>;
+        design: "content";
+        control: "url";
+        label: string;
+        description: string;
+    };
+    source: {
+        schema: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
+            kind: z.ZodLiteral<"album">;
+            artist: z.ZodString;
+            title: z.ZodString;
+            year: z.ZodOptional<z.ZodNumber>;
+            description: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            title: string;
+            kind: "album";
+            artist: string;
+            description?: string | undefined;
+            year?: number | undefined;
+        }, {
+            title: string;
+            kind: "album";
+            artist: string;
+            description?: string | undefined;
+            year?: number | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"tv-show">;
+            title: z.ZodString;
+            year: z.ZodOptional<z.ZodNumber>;
+            description: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            title: string;
+            kind: "tv-show";
+            description?: string | undefined;
+            year?: number | undefined;
+        }, {
+            title: string;
+            kind: "tv-show";
+            description?: string | undefined;
+            year?: number | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"movie">;
+            title: z.ZodString;
+            year: z.ZodOptional<z.ZodNumber>;
+            description: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            title: string;
+            kind: "movie";
+            description?: string | undefined;
+            year?: number | undefined;
+        }, {
+            title: string;
+            kind: "movie";
+            description?: string | undefined;
+            year?: number | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"game">;
+            title: z.ZodString;
+            description: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            title: string;
+            kind: "game";
+            description?: string | undefined;
+        }, {
+            title: string;
+            kind: "game";
+            description?: string | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"book">;
+            title: z.ZodOptional<z.ZodString>;
+            author: z.ZodOptional<z.ZodString>;
+            isbn: z.ZodOptional<z.ZodString>;
+            description: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            kind: "book";
+            description?: string | undefined;
+            title?: string | undefined;
+            author?: string | undefined;
+            isbn?: string | undefined;
+        }, {
+            kind: "book";
+            description?: string | undefined;
+            title?: string | undefined;
+            author?: string | undefined;
+            isbn?: string | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"poster">;
+            title: z.ZodString;
+            year: z.ZodOptional<z.ZodNumber>;
+            description: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            title: string;
+            kind: "poster";
+            description?: string | undefined;
+            year?: number | undefined;
+        }, {
+            title: string;
+            kind: "poster";
+            description?: string | undefined;
+            year?: number | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"portrait">;
+            name: z.ZodOptional<z.ZodString>;
+            role: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            kind: "portrait";
+            name?: string | undefined;
+            role?: string | undefined;
+        }, {
+            kind: "portrait";
+            name?: string | undefined;
+            role?: string | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"landscape">;
+            location: z.ZodOptional<z.ZodString>;
+            mood: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            kind: "landscape";
+            location?: string | undefined;
+            mood?: string | undefined;
+        }, {
+            kind: "landscape";
+            location?: string | undefined;
+            mood?: string | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"product">;
+            name: z.ZodOptional<z.ZodString>;
+            brand: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            kind: "product";
+            name?: string | undefined;
+            brand?: string | undefined;
+        }, {
+            kind: "product";
+            name?: string | undefined;
+            brand?: string | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"food">;
+            dish: z.ZodOptional<z.ZodString>;
+            cuisine: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            kind: "food";
+            dish?: string | undefined;
+            cuisine?: string | undefined;
+        }, {
+            kind: "food";
+            dish?: string | undefined;
+            cuisine?: string | undefined;
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"generic">;
+            prompt: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            kind: "generic";
+            prompt: string;
+        }, {
+            kind: "generic";
+            prompt: string;
+        }>, z.ZodUnion<[z.ZodObject<{
+            kind: z.ZodLiteral<"video">;
+        }, "strip", z.ZodTypeAny, {
+            kind: "video";
+        }, {
+            kind: "video";
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"audio">;
+        }, "strip", z.ZodTypeAny, {
+            kind: "audio";
+        }, {
+            kind: "audio";
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"embed">;
+        }, "strip", z.ZodTypeAny, {
+            kind: "embed";
+        }, {
+            kind: "embed";
+        }>, z.ZodObject<{
+            kind: z.ZodLiteral<"3d">;
+        }, "strip", z.ZodTypeAny, {
+            kind: "3d";
+        }, {
+            kind: "3d";
+        }>]>]>>;
+        design: "structured";
+        label: string;
+        description: string;
+        perKindFields: {
+            album: {
+                artist: string;
+                title: string;
+                year: string;
+            };
+            poster: {
+                title: string;
+                year: string;
+            };
+            portrait: {
+                name: string;
+                role: string;
+            };
+            landscape: {
+                location: string;
+                mood: string;
+            };
+            product: {
+                name: string;
+                brand: string;
+            };
+            food: {
+                dish: string;
+                cuisine: string;
+            };
+            generic: {
+                prompt: string;
+            };
+            video: {};
+            audio: {};
+            embed: {};
+            "3d": {};
+        };
+    };
+    className: {
+        schema: z.ZodOptional<z.ZodString>;
+        design: "plumbing";
+    };
+    style: {
+        schema: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        design: "plumbing";
+    };
+    children: {
+        schema: z.ZodOptional<z.ZodUnknown>;
+        design: "plumbing";
+        description: string;
+    };
+    overlay: {
+        schema: z.ZodOptional<z.ZodUnknown>;
+        design: "plumbing";
+        description: string;
+    };
+    glyph: {
+        schema: z.ZodOptional<z.ZodUnknown>;
+        design: "plumbing";
+        description: string;
+    };
+    fallback: {
+        schema: z.ZodOptional<z.ZodUnknown>;
+        design: "plumbing";
+        description: string;
+    };
+    onVisibilityChange: {
+        schema: z.ZodOptional<z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodUnknown>>;
+        design: "event";
+        description: string;
+    };
+}>;
+
 declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | null | undefined;
+/**
+ * Callout — inline, ambient, non-blocking status/feedback surface.
+ *
+ * Renamed from `Alert` (May 2026). The old name collided with
+ * Apple HIG `Alert` (a modal) and with `role="alert"` ARIA semantics,
+ * both of which imply interruptive/assertive behaviour the component
+ * does not have. "Callout" is honest about what it is: an inline
+ * attention-grabber that sits in the layout flow. The `Alert` name is
+ * deliberately left vacant in the barrel so a future genuinely-
+ * interruptive primitive can claim it without further renames — until
+ * then, reach for `<Dialog>` for modal alerts.
+ *
+ * Variants intentionally preserved as-is in this pass (`default |
+ * destructive | success | warning | info`) — splitting `variant` onto
+ * orthogonal `intent × emphasis` axes is a planned follow-up across
+ * the whole library, not a one-component change. The `highlight`
+ * variant (yellow) was dropped in this rename: in practice it
+ * overlapped `warning` (amber) and added one more variant without a
+ * unique semantic. Consumers needing "notable but not alarming" use
+ * `variant="warning"` or `variant="info"` depending on temperature.
+ */
+declare const calloutVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | 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;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
-declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
-declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+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>>;
 
 /**
  * AppShell — top-level page scaffold for an app-like or marketing layout.
@@ -54,14 +404,14 @@ declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAt
  * - `top`         — Main below an in-app top-nav row (TopMenu)
  * - `side`        — Nav rail + Main (classic app layout)
  * - `three-pane`  — Nav rail + fixed Aside + flex Main (Slack/Mail/Notion
- *                   shape; aside width via --rds-app-shell-aside, default 320px)
+ *                   shape; aside width via --gds-app-shell-aside, default 320px)
  *
  * Each slot is assigned a fixed `grid-area` (header/nav/aside/main/footer),
  * so the **JSX child order doesn't matter** — drop slots in any order and
  * the grid sorts them.
  *
  * It is deliberately *just* structure: no collapse state, no context, no
- * runtime JS. Nav content is whatever the caller drops in — a SideMenu, a
+ * runtime JS. Nav content is whatever the caller drops in — a Sidebar, a
  * TopMenu, a hand-rolled `<nav>`. For drag-to-resize columns inside the
  * body, compose this with `Resizable` instead of using a static grid.
  *
@@ -120,7 +470,7 @@ 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" | "success" | "warning" | "info" | "highlight" | "secondary" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
+    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;
     rounded?: "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
@@ -147,7 +497,7 @@ declare function Badge({ className, variant, rounded, ...props }: BadgeProps): R
  * consistent across primitives.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "raised" | null | undefined;
     size?: "default" | "sm" | "md" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -160,6 +510,145 @@ declare function Calendar({ className, classNames, showOutsideDays, captionLayou
 }): React$1.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): React$1.JSX.Element;
 
+/**
+ * Carousel — token-driven slideshow primitive built on embla-carousel.
+ *
+ * Compound API:
+ *
+ *   <Carousel autoplay loop>
+ *     <Carousel.Slide>{...}</Carousel.Slide>
+ *     <Carousel.Slide duration={15000}>{...}</Carousel.Slide>
+ *     <Carousel.VideoSlide src="…" poster="…" alt="…" />
+ *
+ *     <Carousel.Arrows />
+ *     <Carousel.Dots />
+ *   </Carousel>
+ *
+ * Design-system contract:
+ *   - All visual dimensions are CSS variables (`--gds-carousel-*`) so the
+ *     control surface, dot size, gap, arrow look etc. are themable per
+ *     consumer without prop drilling. Defaults live in `styles/globals.css`.
+ *   - Root stamps `data-gds-part="carousel"` so Studio's selection agent
+ *     can target the whole carousel as one unit, with sub-parts on
+ *     `Carousel.Slide` (`carousel-slide`), `Carousel.Dots` (`carousel-dots`),
+ *     `Carousel.Arrows` (`carousel-arrows`).
+ *   - Autoplay is hand-rolled (no `embla-carousel-autoplay` plugin) so per-
+ *     slide duration overrides and "advance when the video ends" behaviour
+ *     fall out cleanly. The plugin's fixed `delay` would have made both of
+ *     those fight the library.
+ *
+ * Video slide behaviour (the one the user asked for):
+ *   - Poster image is rendered until the slide becomes active.
+ *   - On activation the <video> autoplays muted + loop (= browser-friendly)
+ *     with no controls — chosen default.
+ *   - When the loop is short (`<video loop>` re-fires onEnded continuously
+ *     in some browsers but never in others), we ALSO use the same per-slide
+ *     `duration` mechanism as still slides: if the slide author passes
+ *     `duration={15000}` we advance after 15s regardless of the video
+ *     length. Without a duration the slide stays put until the carousel
+ *     stops being autoplayed — that matches "play this video forever
+ *     while it's on screen".
+ *
+ * Library: embla-carousel-react. Headless, ~6kb gzip, no opinionated CSS.
+ */
+
+type EmblaApi = NonNullable<UseEmblaCarouselType[1]>;
+interface CarouselProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Loop back to slide 0 after the last one. Default true. */
+    loop?: boolean;
+    /** Slide alignment within the viewport when not all slides are full-width.
+     *  `"start"` (default) lines slides up to the left edge; `"center"` is the
+     *  classic "current slide centered, peek of neighbours" treatment. */
+    align?: "start" | "center" | "end";
+    /** How many slides to show at once. Default `1` (full-bleed slides).
+     *  For responsive multi-slide layouts (e.g. 1 mobile / 3 desktop) leave
+     *  this and use the `--gds-carousel-slide-basis` CSS var on `Slide`
+     *  instead — it accepts media-query-driven values. */
+    slidesPerView?: number;
+    /** Autoplay config. Pass `true` for defaults (5s delay, pause on hover,
+     *  pause when offscreen). Pass an object to override; pass `false` /
+     *  omit to disable. */
+    autoplay?: boolean | AutoplayConfig;
+    /** Drag-to-swipe. Default `true`. Disable when the carousel is being
+     *  driven entirely by Dots/Arrows and drag would conflict with chrome
+     *  inside the slides. */
+    draggable?: boolean;
+    /** Fired whenever the active slide changes — programmatic, autoplay,
+     *  or user swipe. The value is the zero-based slide index. */
+    onSlideChange?: (index: number) => void;
+}
+interface AutoplayConfig {
+    /** Default delay per slide in ms. Overridden by `<Carousel.Slide duration>`
+     *  on a per-slide basis. Default 5000. */
+    delay?: number;
+    /** Pause the autoplay while the pointer is over the carousel. Default true. */
+    pauseOnHover?: boolean;
+    /** Pause when the carousel scrolls out of the viewport — saves work and
+     *  matches the MediaSurface "play when visible" convention. Default true. */
+    pauseWhenOffscreen?: boolean;
+}
+interface CarouselRootComponent extends React$1.ForwardRefExoticComponent<CarouselProps & React$1.RefAttributes<HTMLDivElement>> {
+    Slide: typeof CarouselSlide;
+    VideoSlide: typeof CarouselVideoSlide;
+    Dots: typeof CarouselDots;
+    Arrows: typeof CarouselArrows;
+    Prev: typeof CarouselPrev;
+    Next: typeof CarouselNext;
+}
+interface CarouselSlideProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Per-slide autoplay duration in ms. Overrides the carousel's default
+     *  delay for this slide only. e.g. `duration={15000}` keeps a hero
+     *  still on screen for 15s while the rest cycle at 5s. */
+    duration?: number;
+}
+declare const CarouselSlide: React$1.ForwardRefExoticComponent<CarouselSlideProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CarouselVideoSlideProps extends Omit<CarouselSlideProps, "children"> {
+    src: string;
+    /** Poster shown until the slide becomes active. Reuses the
+     *  `--gds-media-placeholder-bg/-fg` tokens as a fallback. */
+    poster?: string;
+    alt?: string;
+    /** Override default behaviour and show native controls. Default false —
+     *  the chosen default ("muted autoplay + loop, no controls"). */
+    controls?: boolean;
+    /** Override the default loop behaviour. Default true (the chosen
+     *  default). When `false` and no `duration` is set, the carousel
+     *  advances when the video ends. */
+    loop?: boolean;
+    /** Object-fit for the video. Default `"cover"`. */
+    fit?: "cover" | "contain";
+}
+declare const CarouselVideoSlide: React$1.ForwardRefExoticComponent<CarouselVideoSlideProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CarouselDotsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Position the dots relative to the viewport. Default `"below"` puts
+     *  them in flow underneath; `"overlay"` floats them at the bottom of
+     *  the carousel area on top of the slides. */
+    position?: "below" | "overlay";
+    /** Custom render function for one dot. Receives `{ index, active, onClick }`
+     *  and should return a button — for when the default rounded-pill look
+     *  doesn't fit (e.g. thumbnail strips, numeric pagination). */
+    renderDot?: (state: {
+        index: number;
+        active: boolean;
+        onClick: () => void;
+    }) => React$1.ReactNode;
+}
+declare const CarouselDots: React$1.ForwardRefExoticComponent<CarouselDotsProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CarouselArrowsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Position relative to the viewport. `"overlay"` (default) floats the
+     *  arrows over the slides; `"outside"` places them in flow alongside
+     *  the carousel (useful when the viewport is full-bleed). */
+    position?: "overlay" | "outside";
+}
+declare const CarouselArrows: React$1.ForwardRefExoticComponent<CarouselArrowsProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CarouselNavButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare const CarouselPrev: React$1.ForwardRefExoticComponent<CarouselNavButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React$1.ForwardRefExoticComponent<CarouselNavButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const Carousel: CarouselRootComponent;
+
+declare function useCarouselApi(): EmblaApi | undefined;
+
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & 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>>;
@@ -276,7 +765,26 @@ declare const DropdownMenuShortcut: {
     displayName: string;
 };
 
-declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+/**
+ * Input variants — `size` lets dense surfaces (the Studio inspector,
+ * settings sheets) reach for a compact `sm` input without hand-rolling
+ * className overrides. Default keeps the existing h-9 padding /
+ * text-base-md:text-sm so this is a no-op for every existing call
+ * site.
+ *
+ * `pl-3 pr-3` is preserved verbatim from the original so the search-
+ * input pattern (leading icon overrides `pl-*`) still wins via
+ * twMerge. See packages/ui/components/ui/input.tsx for the full
+ * rationale.
+ */
+declare const inputVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
+type InputProps = Omit<React$1.ComponentProps<"input">, "size"> & {
+    size?: InputSize;
+};
+declare const Input: React$1.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
@@ -287,6 +795,91 @@ declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrim
 
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * MultiSelect — multi-pick combobox.
+ *
+ * Composes Popover + Command (cmdk) + Badge + Checkbox into the
+ * pattern popularised by sersavan/shadcn-multi-select-component:
+ *
+ *   - Trigger: a button that shows the currently-selected items as
+ *     removable Badges. Past `maxCount` selected items it collapses
+ *     into a "+N more" badge so the trigger doesn't grow forever.
+ *   - Open: a Popover containing a searchable Command list. Each
+ *     row is a checkable item; a leading icon is optional per
+ *     option.
+ *   - Footer actions: Select all · Clear · Close.
+ *
+ * Controlled and uncontrolled both supported (value / defaultValue
+ * mirroring Radix conventions). Selection is `string[]` — the
+ * caller pulls the matching option objects from their own `options`
+ * array when needed.
+ *
+ * Data-driven via `options` rather than compound children. Multi-
+ * select lists are typically dozens of items long; declaring each
+ * one in JSX is noisy and the per-item icon prop doesn't have a
+ * natural children-API equivalent. A compound API (`MultiSelect.Item`)
+ * could land later for the few cases that need fully custom rendering.
+ *
+ * Theming: visual surfaces (popover bg, badge fill, focus rings)
+ * inherit from the theme tokens the underlying Popover / Badge /
+ * Checkbox already read from. No new `--gds-multi-select-*` vars
+ * needed yet; if/when callers want to retune density (e.g. a
+ * compact variant), add them then.
+ */
+
+interface MultiSelectOption {
+    /** Value stored in selection. Must be unique. */
+    value: string;
+    /** Display label for the dropdown row and selected badge. */
+    label: string;
+    /** Optional lucide-style icon component (or any React component
+     *  accepting a className). Rendered both in the dropdown row and
+     *  on the badge. */
+    icon?: React$1.ComponentType<{
+        className?: string;
+    }>;
+    /** Disables the row in the dropdown — selection is locked in
+     *  whichever state it's currently in. */
+    disabled?: boolean;
+}
+interface MultiSelectProps {
+    /** The full pool of selectable items. */
+    options: MultiSelectOption[];
+    /** Controlled value. When provided, `onValueChange` MUST be wired
+     *  or the component becomes a read-only display of `value`. */
+    value?: string[];
+    /** Uncontrolled initial value. Ignored if `value` is provided. */
+    defaultValue?: string[];
+    /** Fired whenever the selection changes. The full next selection
+     *  is passed — caller doesn't need to reconcile add/remove. */
+    onValueChange?: (next: string[]) => void;
+    /** Placeholder text on the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Search-input placeholder. Default "Search…". */
+    searchPlaceholder?: string;
+    /** Message rendered when search returns no rows. */
+    emptyMessage?: string;
+    /** Max badges to show on the trigger before collapsing to
+     *  `+N more`. Default 3. Pass `Infinity` to never collapse. */
+    maxCount?: number;
+    /** Hide the Search input. Useful for short option lists. */
+    searchable?: boolean;
+    /** Hide the per-badge × button. Selected items can still be
+     *  toggled off through the dropdown. */
+    badgeDismissible?: boolean;
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Drives Popover's `modal` prop — when true, clicks outside the
+     *  dropdown don't dismiss it until an explicit close. Default false. */
+    modalPopover?: boolean;
+    /** Extra classes on the trigger. */
+    className?: string;
+    /** Forwarded to the trigger button for tests / Studio selection. */
+    id?: string;
+    "aria-label"?: string;
+}
+declare const MultiSelect: React$1.ForwardRefExoticComponent<MultiSelectProps & React$1.RefAttributes<HTMLButtonElement>>;
+
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -315,7 +908,7 @@ declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupP
  *
  *   <ResizablePanelGroup direction="horizontal" id="inbox-shell">
  *     <ResizablePanel defaultSize={20} minSize={15} id="nav">
- *       <SideMenu />
+ *       <Sidebar />
  *     </ResizablePanel>
  *     <ResizableHandle withHandle />
  *     <ResizablePanel defaultSize={30} minSize={20} id="list">
@@ -328,7 +921,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 | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSelectElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | 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 | 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"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -368,8 +961,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?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "start" | "center" | "end" | "between" | "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> {
@@ -404,7 +997,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?: "center" | "end" | "start" | "stretch" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     /** When true, render as the single child element via Radix Slot — lets
@@ -436,10 +1029,10 @@ declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAtt
  * case. Flex is the escape hatch, not the default.
  */
 declare const flexVariants: (props?: ({
-    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+    direction?: "row" | "col" | "row-reverse" | "col-reverse" | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "start" | "center" | "end" | "between" | "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> {
@@ -456,7 +1049,20 @@ declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Select trigger variants — `size` lets dense surfaces (the
+ * Studio inspector, settings sheets) reach for a compact `sm`
+ * trigger without hand-rolling className overrides. Default keeps
+ * the existing h-10 / px-3 / text-sm so this is a no-op for every
+ * existing call site.
+ */
+declare const selectTriggerVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SelectTriggerSize = NonNullable<VariantProps<typeof selectTriggerVariants>["size"]>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
+    size?: SelectTriggerSize;
+} & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -472,7 +1078,7 @@ declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "left" | "right" | "bottom" | null | undefined;
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
@@ -492,6 +1098,102 @@ declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivE
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Sortable — compound drag-to-reorder primitive built on dnd-kit.
+ *
+ * The orchestrator (`<Sortable>`) owns the DndContext + SortableContext;
+ * items (`<Sortable.Item>`) attach the `useSortable` hook + transform
+ * styles to whatever you put inside them. An optional `<Sortable.Handle>`
+ * scopes the drag activation to a specific child element (drag-by-grip
+ * instead of drag-by-whole-row).
+ *
+ * Design choices that may surprise you:
+ *
+ *   - Layout primitives (Stack, Row, Grid) stay PURE — they don't grow
+ *     a `sortable` prop. The reorder behaviour lives on its own
+ *     primitive that composes with any layout:
+ *     `<Sortable><Stack>...</Stack></Sortable>` works.
+ *     `<Sortable strategy="grid"><Grid cols={3}>...</Grid></Sortable>`
+ *     too. This matches the dnd-kit / framer Reorder pattern and
+ *     keeps each component's contract tight.
+ *
+ *   - `values` is the source of truth, not the children. The model is
+ *     `state -> children`, so reorder fires `onReorder(newValues)` and
+ *     the consumer updates state; React re-renders children in the
+ *     new order. Trying to read children's keys + mutate them is
+ *     fighting React's data-flow.
+ *
+ *   - Item identity is `value`, NOT `key`. Items must have a unique
+ *     `value` prop that matches one entry in `values`. We deliberately
+ *     don't auto-derive from `key` because React lifts keys out of
+ *     children before we can read them, AND because the value carries
+ *     more semantic weight than a render-time key.
+ *
+ *   - Cross-container drag (the "drag from To Do to Done" kanban case)
+ *     is NOT covered by v1. That needs one DndContext above multiple
+ *     SortableContexts — planned as `<Sortable.Group>` follow-up. For
+ *     now, each `<Sortable>` is its own world. Single-list reorder,
+ *     single-grid reorder, single-horizontal-row reorder all work.
+ *
+ *   - Theming: no new tokens. dnd-kit handles the transform CSS;
+ *     visual treatment (drop shadow on the active item, slight
+ *     scale, etc.) is applied via opt-in className on the item.
+ */
+
+type SortableStrategy = "vertical" | "horizontal" | "grid";
+interface SortableGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Disable drag for every container inside the Group. */
+    disabled?: boolean;
+}
+declare const SortableGroup: React$1.ForwardRefExoticComponent<SortableGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SortableProps<T extends UniqueIdentifier = UniqueIdentifier> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange" | "id"> {
+    /** Ordered list of unique ids — strings or numbers. Source of truth
+     *  for the order; reorder fires `onReorder(newValues)` and the
+     *  consumer updates their state. */
+    values: T[];
+    /** Fired with the full new order after a drag-end that changed it.
+     *  Drags that snap back (drop on origin) DON'T fire — only real
+     *  reorders. */
+    onReorder?: (next: T[]) => void;
+    /** Layout direction the sort strategy assumes.
+     *    `vertical` (default) — stacked column of items, drag up/down.
+     *    `horizontal`         — row of items, drag left/right.
+     *    `grid`               — 2D wrap, drag in any direction.
+     *  Match this to the layout your items render in. */
+    strategy?: SortableStrategy;
+    /** Disable drag on every item without rebuilding the tree. */
+    disabled?: boolean;
+    /** Stable container id — required when this Sortable is nested
+     *  inside a `Sortable.Group` for cross-container drag (the Group
+     *  routes drag-end events by container id). Optional for standalone
+     *  Sortable; auto-generated via React.useId when omitted. */
+    id?: string;
+}
+interface SortableRootComponent extends React$1.ForwardRefExoticComponent<SortableProps & React$1.RefAttributes<HTMLDivElement>> {
+    Item: typeof SortableItem;
+    Handle: typeof SortableHandle;
+    Group: typeof SortableGroup;
+}
+interface SortableItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Must match one of the parent `<Sortable values>` entries.
+     *  Identity, not React key. */
+    value: UniqueIdentifier;
+    /** Render the item as its child element via Radix Slot — useful when
+     *  the wrapping div would mess with your layout (e.g. inside Table
+     *  rows). */
+    asChild?: boolean;
+    /** Disable drag for THIS item without disabling the whole Sortable. */
+    disabled?: boolean;
+}
+declare const SortableItem: React$1.ForwardRefExoticComponent<SortableItemProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SortableHandleProps extends React$1.HTMLAttributes<HTMLElement> {
+    /** Render as the child element via Slot — typical pattern is
+     *  `<Sortable.Handle asChild><Button variant="ghost" size="icon">…</Button></Sortable.Handle>`. */
+    asChild?: boolean;
+}
+declare const SortableHandle: React$1.ForwardRefExoticComponent<SortableHandleProps & React$1.RefAttributes<HTMLElement>>;
+declare const Sortable: SortableRootComponent;
+
 /**
  * Stack — vertical layout primitive.
  *
@@ -508,7 +1210,8 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
  */
 declare const stackVariants: (props?: ({
     gap?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+    align?: "start" | "center" | "end" | "stretch" | null | undefined;
+    justify?: "start" | "center" | "end" | "between" | "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
@@ -529,37 +1232,15 @@ declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttribu
 declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
 
-/**
- * Breadcrumb — composable navigation primitive.
- *
- * Pure surface-less component (no background, no border, no sticky
- * positioning). Density matches `TabsTrigger` so a breadcrumb row
- * placed above a tab strip — or alongside one — reads at the same
- * scale.
- *
- * Composition is shadcn-flavoured:
- *
- *   <Breadcrumb>
- *     <BreadcrumbList>
- *       <BreadcrumbItem>
- *         <BreadcrumbLink onClick={onBack}>All screens</BreadcrumbLink>
- *       </BreadcrumbItem>
- *       <BreadcrumbSeparator />
- *       <BreadcrumbItem>
- *         <BreadcrumbPage>Pricing</BreadcrumbPage>
- *       </BreadcrumbItem>
- *     </BreadcrumbList>
- *   </Breadcrumb>
- *
- * Note: the `TopMenu` component in this package wraps the same
- * breadcrumb idea in an app-bar surface (sticky, bordered, padded).
- * Use TopMenu when you want the full app-shell chrome; use
- * Breadcrumb on its own when you want navigation embedded inside an
- * existing surface (e.g. inside the Studio canvas).
- */
-declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+interface BreadcrumbProps extends React$1.ComponentPropsWithoutRef<"nav"> {
+    /** Default separator node for every <BreadcrumbSeparator/> inside this
+     *  tree. Pass a string ("/", "›", "•"), a lucide icon (<Slash />,
+     *  <ChevronRight />), or any ReactNode. Default: <ChevronRight />.
+     *  Per-instance `<BreadcrumbSeparator>children</BreadcrumbSeparator>`
+     *  still overrides. */
     separator?: React$1.ReactNode;
-} & React$1.RefAttributes<HTMLElement>>;
+}
+declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
 declare const BreadcrumbList: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
 declare const BreadcrumbItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
 interface BreadcrumbLinkProps extends React$1.HTMLAttributes<HTMLElement> {
@@ -579,12 +1260,63 @@ declare const BreadcrumbEllipsis: {
     ({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
     displayName: string;
 };
+/** One row inside a BreadcrumbMenuTrigger's popover. The dropdown
+ *  renders the label as the main text and (optionally) a small
+ *  muted summary line below. `active` is the visual cue for "this
+ *  is the current trail node" so users can tell which entry maps
+ *  to their current path. `hasChildren` adds a `›` so the user
+ *  knows this entry has its own sub-menu when they pick it. */
+interface BreadcrumbMenuItem {
+    id: string;
+    label: string;
+    summary?: string;
+    active?: boolean;
+    hasChildren?: boolean;
+}
+interface BreadcrumbMenuTriggerProps {
+    /** The label that appears in the breadcrumb itself (e.g. "Stack",
+     *  "AppShellMain"). Distinct from the items: this is the segment
+     *  the user is hovering, not its children. */
+    label: string;
+    /** Items to render in the popover when the segment is opened.
+     *  Typically the children of the node this segment represents. */
+    items: BreadcrumbMenuItem[];
+    /** Called with the picked item's id when the user makes a
+     *  selection. The popover auto-closes on select. */
+    onSelect: (id: string) => void;
+    /** Optional click handler for the segment label itself (not the
+     *  dropdown). Useful when the host wants clicking the label to
+     *  also select that node directly. When omitted, the label is
+     *  purely a popover trigger. */
+    onSelectLabel?: () => void;
+    /** When true, mark the trigger as the current trail position.
+     *  Visually heavier (matches BreadcrumbPage's weight) and the
+     *  chevron rotates down to signal "you are here." */
+    current?: boolean;
+    className?: string;
+}
+/**
+ * Segment that opens a popover of children/peers. Composes inside
+ * a `<BreadcrumbItem>` exactly where you'd otherwise put a
+ * `<BreadcrumbLink>` — same density, same focus ring.
+ *
+ *   <BreadcrumbItem>
+ *     <BreadcrumbMenuTrigger
+ *       label="Stack"
+ *       items={children}
+ *       onSelect={selectById}
+ *     />
+ *   </BreadcrumbItem>
+ */
+declare const BreadcrumbMenuTrigger: React$1.ForwardRefExoticComponent<BreadcrumbMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const tabsListVariants: (props?: ({
+    variant?: "pill" | "underlined" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tabsTriggerVariants: (props?: ({
+    variant?: "pill" | "underlined" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TabsListProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
@@ -617,6 +1349,11 @@ declare const Toggle: React$1.ForwardRefExoticComponent<Omit<TogglePrimitive.Tog
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
 
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const toggleGroupVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -624,157 +1361,503 @@ type ToggleGroupProps = React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimi
 declare const ToggleGroup: React$1.ForwardRefExoticComponent<ToggleGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React$1.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /** Tooltip content. When set, the item is wrapped in a Tooltip
+     *  so icon-only items keep an accessible label without bloating
+     *  the chrome with text. Pass a string for the common case;
+     *  pass a node for richer content (key hint, badge, etc.).
+     *
+     *  Assumes a `TooltipProvider` exists somewhere upstream — in
+     *  apps/docs the root layout already mounts one, which is the
+     *  pattern most consumers should follow. If no provider is
+     *  present, the tooltip is silently ignored at runtime (Radix
+     *  no-ops) — pass `tooltip={undefined}` to be sure of plain
+     *  behavior. */
+    tooltip?: React$1.ReactNode;
+    /** Which side of the item the tooltip renders on. Defaults to
+     *  "top" — matches the Tabs primitive's convention. */
+    tooltipSide?: React$1.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+    /** Tooltip delay override. The provider's `delayDuration` is
+     *  the default; pass a per-item value if a specific control
+     *  needs a snappier or quieter feel. */
+    tooltipDelay?: number;
+} & React$1.RefAttributes<HTMLButtonElement>>;
 
-interface SideMenuItem {
-    id: string;
-    label: string;
-    href?: string;
-    icon?: React$1.ReactNode;
-    badge?: string | number;
-    onClick?: () => void;
-    disabled?: boolean;
+/**
+ * Toolbar — slot-based chrome bar for the leading/center/trailing
+ * pattern Apple HIG describes as a "Toolbar."
+ *
+ *   ┌─────────────────────────────────────────────────┐
+ *   │  [leading]          [center]         [trailing] │
+ *   └─────────────────────────────────────────────────┘
+ *
+ * The three-region top nav is everywhere — Reddit, Twitter, GitHub,
+ * Linear's top bar, every desktop app's window chrome — and most
+ * scaffolds end up rebuilding it from raw `<Row justify="between">`
+ * with a manual flex-1 on the center. This primitive collapses that
+ * into:
+ *
+ *   <Toolbar leading={<Logo/>} center={<Search/>} trailing={<Avatar/>} />
+ *
+ * The grid template is `auto 1fr auto`, so the center slot absorbs
+ * available width and stays visually centered relative to the bar
+ * (not relative to the gap between leading and trailing). If any
+ * slot is omitted, the grid column collapses cleanly.
+ *
+ * Accessibility — role="toolbar" by default, with aria-label expected
+ * via props. WAI-ARIA toolbar pattern: children should be keyboard-
+ * navigable via arrow keys if they're a tight set of related actions.
+ * For an app chrome bar (logo + nav + actions) the standard tab
+ * sequence is usually fine and a single aria-label is enough; for an
+ * editor-style toolbar (B / I / S / link), pair with a roving
+ * tabindex implementation. (Roving tabindex is out of scope for v1 —
+ * if you need it, compose with @radix-ui/react-toolbar's primitives
+ * inside the slots.)
+ *
+ * Anatomy:
+ *   Toolbar         — <div role="toolbar"> by default; sets the grid
+ *   Toolbar.Slot    — exported for symmetry but rarely needed; the
+ *                     leading/center/trailing props are the canonical
+ *                     API
+ *
+ * Variants:
+ *   position   — "top" | "bottom" | "inline"   (border placement)
+ *   variant    — "default" | "subtle" | "transparent"
+ *   size       — "sm" | "md" | "lg"            (height + padding)
+ *   sticky     — boolean                       (sticky to top/bottom)
+ *
+ * Used for: app window chrome (AppShellHeader), section toolbars
+ * inside a card or panel, action bars at the bottom of a list,
+ * persistent footer toolbars on mobile-style layouts.
+ */
+declare const toolbarVariants: (props?: ({
+    position?: "top" | "bottom" | "inline" | null | undefined;
+    variant?: "default" | "subtle" | "transparent" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToolbarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toolbarVariants> {
+    /** Left-aligned content. Usually a logo + primary nav links. */
+    leading?: React$1.ReactNode;
+    /** Center-aligned content. Usually a search input, a page title,
+     *  or a segmented control. The center column stretches via `1fr`
+     *  so it stays visually centered relative to the bar. */
+    center?: React$1.ReactNode;
+    /** Right-aligned content. Usually action icons + user avatar. */
+    trailing?: React$1.ReactNode;
+    /** When using `children` directly (advanced custom layout), the
+     *  slot props are ignored. Most callers should prefer the slot
+     *  props — they give the canonical grid layout for free. */
+    children?: React$1.ReactNode;
+    /** Required by WAI-ARIA toolbar pattern. Falls back to "Toolbar". */
+    "aria-label"?: string;
 }
-interface SideMenuSection {
-    id: string;
-    title: string;
-    icon?: React$1.ReactNode;
-    items: SideMenuItem[];
-    defaultExpanded?: boolean;
+declare const Toolbar: React$1.ForwardRefExoticComponent<ToolbarProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * ToolbarSlot — escape-hatch piece for the rare case a consumer
+ * wants to compose a custom inner layout with children but still
+ * get the slot styling. Use the slot props on Toolbar where you can.
+ */
+interface ToolbarSlotProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    align?: "leading" | "center" | "trailing";
 }
-interface SideMenuProps {
-    /** Header content (logo, title, etc.) */
-    header?: React$1.ReactNode;
-    /** Header content shown when collapsed (icon, etc.) */
-    collapsedHeader?: React$1.ReactNode;
-    /** Navigation sections with collapsible groups */
-    sections?: SideMenuSection[];
-    /** Standalone items without sections */
-    items?: SideMenuItem[];
-    /** Footer content */
-    footer?: React$1.ReactNode;
-    /** Whether the sidebar is collapsed */
+declare const ToolbarSlot: React$1.ForwardRefExoticComponent<ToolbarSlotProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sidebar — compound layout primitive for vertical app navigation.
+ *
+ * Renamed from `SideMenu` (May 2026) and rebuilt around a compound API
+ * so consumers can slot custom content into the header/content/footer
+ * regions instead of being forced through a data-driven `sections=[...]`
+ * prop. Replaces the previous single-component shape entirely.
+ *
+ * Why compound: sidebars vary wildly across products — Notion-style
+ * workspace switcher up top, search input below, scrollable nav in the
+ * middle, user profile + settings link at the bottom. The old data-
+ * driven SideMenu could express the section list cleanly but anything
+ * non-list-shaped (search inputs, drag handles, command-K trigger
+ * pills, custom brand blocks) had to fight the API. Compound trades
+ * "two lines of JSX" for "any shape the consumer wants."
+ *
+ * Compound shape:
+ *
+ *   <Sidebar>
+ *     <SidebarHeader>            // brand / logo / org switcher
+ *     <SidebarContent>           // scrollable body
+ *       <SidebarSection title="Workspace">
+ *         <SidebarItem href="/" icon={<Home />}>Dashboard</SidebarItem>
+ *         <SidebarItem href="/inbox" icon={<Inbox />} badge={3}>Inbox</SidebarItem>
+ *       </SidebarSection>
+ *     </SidebarContent>
+ *     <SidebarFooter>            // user / settings / pinned chrome
+ *   </Sidebar>
+ *
+ * For routing integration, `<SidebarItem href>` renders an `<a>` by
+ * default. Drop `asChild` to wrap any link component (Next/Link, React
+ * Router Link, Remix Link, etc.) — Radix Slot stamps the item's classes
+ * onto whatever you pass:
+ *
+ *   <SidebarItem asChild icon={<Home />}>
+ *     <Link href="/">Dashboard</Link>
+ *   </SidebarItem>
+ *
+ * Theming: visual surfaces (bg, border, text colour) come from semantic
+ * theme tokens, not hard-coded greys. Sizing knobs (collapsed width,
+ * expanded width, item padding) live as `--gds-sidebar-*` CSS variables
+ * so the consumer can retune without prop drilling.
+ *
+ * Composition: Sidebar slots inside `<AppShellNav placement="side">`
+ * exactly the way SideMenu did; AppShell is the page-level chrome,
+ * Sidebar is the navigation content for that chrome.
+ */
+
+interface SidebarProps extends React$1.HTMLAttributes<HTMLElement> {
+    /** Controlled collapsed state. When set, `onCollapsedChange` MUST be
+     *  wired or the toggle button becomes a no-op. */
     collapsed?: boolean;
-    /** Callback when collapsed state changes */
-    onCollapsedChange?: (collapsed: boolean) => void;
-    /** Whether the sidebar can be collapsed */
-    collapsible?: boolean;
-    /** Default collapsed state */
+    /** Uncontrolled initial collapsed state. Ignored if `collapsed` is set. */
     defaultCollapsed?: boolean;
-    /** Currently active item id */
-    activeItem?: string;
-    /** Custom className */
-    className?: string;
-    /** Custom link component (e.g., Next.js Link) */
-    linkComponent?: React$1.ComponentType<{
-        href: string;
-        className?: string;
-        children: React$1.ReactNode;
-    }>;
+    /** Fired when the toggle button flips collapsed state. */
+    onCollapsedChange?: (next: boolean) => void;
+    /** Show / hide the affordance for the user to collapse. Defaults true. */
+    collapsible?: boolean;
+    /**
+     * Visual treatment.
+     *
+     * - `"rail"` (default) — the classic nav rail: sits flush against an
+     *   adjacent surface with only a right-side border, fixed width via
+     *   `--gds-sidebar-width`. Designed to slot into `<AppShellNav placement="side">`.
+     * - `"panel"` — a floating card-style sidebar: full border, rounded
+     *   corners, width inherited from the parent (typically a flex/grid
+     *   track). Use when the sidebar is one of several adjacent panes
+     *   in a body row, like Studio's `Projects | Canvas | Settings`.
+     *
+     * The variant affects ONLY the outer chrome — header/content/footer/
+     * section/item internals are identical so the same compound markup
+     * works in both treatments.
+     */
+    variant?: "rail" | "panel";
 }
-declare const SideMenu: React$1.ForwardRefExoticComponent<SideMenuProps & React$1.RefAttributes<HTMLElement>>;
-
-interface SimpleTab {
-    id: string;
-    label: string;
-    icon?: React$1.ReactNode;
-    disabled?: boolean;
+interface SidebarRootComponent extends React$1.ForwardRefExoticComponent<SidebarProps & React$1.RefAttributes<HTMLElement>> {
+    Header: typeof SidebarHeader;
+    Content: typeof SidebarContent;
+    Footer: typeof SidebarFooter;
+    Section: typeof SidebarSection;
+    Item: typeof SidebarItem;
+    TreeItem: typeof SidebarTreeItem;
 }
-interface SimpleTabsProps {
-    /** Array of tab definitions */
-    tabs: SimpleTab[];
-    /** Currently active tab id */
-    activeTab?: string;
-    /** Default active tab id (for uncontrolled mode) */
-    defaultTab?: string;
-    /** Callback when tab changes */
-    onTabChange?: (tabId: string) => void;
-    /** Tab panel children */
-    children?: React$1.ReactNode;
-    /** Custom className for the container */
-    className?: string;
-    /** Custom className for the tabs list */
-    tabsClassName?: string;
+declare const Sidebar: SidebarRootComponent;
+interface SidebarHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
-interface SimpleTabsPanelProps {
-    /** Tab id this panel corresponds to */
-    id: string;
-    /** Panel content */
-    children: React$1.ReactNode;
-    /** Custom className */
-    className?: string;
+declare const SidebarHeader: React$1.ForwardRefExoticComponent<SidebarHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SidebarContentProps extends React$1.HTMLAttributes<HTMLElement> {
 }
-declare const SimpleTabs: React$1.ForwardRefExoticComponent<SimpleTabsProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const SimpleTabsPanel: React$1.ForwardRefExoticComponent<SimpleTabsPanelProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SimpleTabsRootProps {
-    /** Currently active tab id */
-    activeTab?: string;
-    /** Default active tab id (for uncontrolled mode) */
-    defaultTab?: string;
-    /** Callback when tab changes */
-    onTabChange?: (tabId: string) => void;
-    /** Children (SimpleTabsList and SimpleTabsPanel components) */
-    children: React$1.ReactNode;
-    /** Custom className */
-    className?: string;
+declare const SidebarContent: React$1.ForwardRefExoticComponent<SidebarContentProps & React$1.RefAttributes<HTMLElement>>;
+interface SidebarFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
-declare const SimpleTabsRoot: React$1.ForwardRefExoticComponent<SimpleTabsRootProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SimpleTabsListProps {
-    children: React$1.ReactNode;
-    className?: string;
+declare const SidebarFooter: React$1.ForwardRefExoticComponent<SidebarFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SidebarSectionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Group label shown above the items. Hidden when sidebar is collapsed
+     *  (children render flat under the icon strip). */
+    title?: React$1.ReactNode;
+    /** Optional icon next to the title. */
+    icon?: React$1.ReactNode;
+    /** Action(s) rendered on the right edge of the section header — the
+     *  canonical "+ add to this group" or "..." menu slot. Common in Notion
+     *  (+ next to Pages), Linear (+ next to Favorites), Slack (+ next to
+     *  Channels). Rendered as a sibling of the chevron when `collapsible`,
+     *  otherwise pinned to the right edge of the static header.
+     *  Pointer events on the trailing content are isolated from the
+     *  collapse toggle, so a Button inside `trailing` won't also flip the
+     *  expanded state. */
+    trailing?: React$1.ReactNode;
+    /** Allow the section to toggle open/closed via clicking the title.
+     *  Default true when `title` is set; ignored otherwise (no header to click). */
+    collapsible?: boolean;
+    /** Initial open state for collapsible sections. Default true. */
+    defaultExpanded?: boolean;
 }
-declare const SimpleTabsList: React$1.ForwardRefExoticComponent<SimpleTabsListProps & React$1.RefAttributes<HTMLDivElement>>;
-interface SimpleTabsTriggerProps {
-    /** Tab id */
-    value: string;
-    /** Tab content */
-    children: React$1.ReactNode;
-    /** Tab icon */
+declare const SidebarSection: React$1.ForwardRefExoticComponent<SidebarSectionProps & React$1.RefAttributes<HTMLDivElement>>;
+interface SidebarItemProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "title"> {
+    /** Leading icon. Sized to fit both expanded + collapsed states. */
     icon?: React$1.ReactNode;
-    /** Disabled state */
+    /** Trailing badge — count, status label. Hidden when collapsed. */
+    badge?: React$1.ReactNode;
+    /** Marks the current page / route. Drives the highlighted style + sets
+     *  `aria-current="page"`. */
+    active?: boolean;
+    /** Render the item as a button rather than a link. Use when the row
+     *  triggers an action (open dialog, log out) rather than navigation. */
+    asButton?: boolean;
+    /** Wrap a custom link component (Next/Link, etc.) via Radix Slot
+     *  rather than rendering a plain <a>. Mutually exclusive with `asButton`. */
+    asChild?: boolean;
+    /** Disabled state — visual greying + pointer-events-none. */
     disabled?: boolean;
-    /** Custom className */
-    className?: string;
+    /** Visible label. Use `children` so the JSX reads naturally — the
+     *  prop name is `children` not `label`. */
+    children?: React$1.ReactNode;
+    /** Tooltip override shown when sidebar is collapsed. Defaults to the
+     *  item's text content (children, when it's a string). */
+    collapsedLabel?: React$1.ReactNode;
+    /**
+     * Row size.
+     *
+     * - `"md"` (default) — `text-sm font-medium`, the standard nav row.
+     * - `"sm"` — `text-xs`, lighter weight + tighter padding. Use for
+     *   visually-subordinate rows (nested screens under a parent
+     *   project, sub-pages under a section, etc.) so the hierarchy is
+     *   legible without manual className overrides. Active state still
+     *   wins on color + weight so the current row pops at either size.
+     */
+    size?: "sm" | "md";
+    /**
+     * Secondary line shown beneath the label — typically metadata like
+     * "Edited 2m ago", "12 items", or a brief description. Layout
+     * adapts: the row becomes label + description stacked vertically,
+     * with the icon vertically centered against the stack and the
+     * badge anchored to the trailing edge as usual. Hidden when the
+     * sidebar is collapsed (only the icon + tooltip remain).
+     */
+    description?: React$1.ReactNode;
 }
-declare const SimpleTabsTrigger: React$1.ForwardRefExoticComponent<SimpleTabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const SimpleTabsContent: React$1.ForwardRefExoticComponent<{
-    value: string;
-    children: React$1.ReactNode;
-    className?: string;
-} & React$1.RefAttributes<HTMLDivElement>>;
-
-declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
-declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarItem: React$1.ForwardRefExoticComponent<SidebarItemProps & React$1.RefAttributes<HTMLAnchorElement>>;
+interface SidebarTreeItemProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "title"> {
+    /** Row label. Required — without it the row has nothing to show. */
+    label: React$1.ReactNode;
+    /** Leading icon (folder, file, custom emoji). Shown to the right
+     *  of the chevron column. */
+    icon?: React$1.ReactNode;
+    /** Trailing badge — count, status. Hidden when sidebar is collapsed. */
+    badge?: React$1.ReactNode;
+    /** Marks the branch as the current route. Adds aria-current="page"
+     *  on the row. */
+    active?: boolean;
+    /** Initial expanded state. Defaults `true` so the user can see what's
+     *  inside without having to click. */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state — wire `onExpandedChange` to manage from
+     *  outside (useful when you want to persist tree state). */
+    expanded?: boolean;
+    onExpandedChange?: (next: boolean) => void;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Nested children — SidebarItem or more SidebarTreeItem. */
+    children?: React$1.ReactNode;
+    /**
+     * Secondary line shown beneath the label — same shape as
+     * SidebarItem's `description`. Useful when a branch needs more
+     * than just a name (last-edited timestamp, item count, owner).
+     * Layout adapts to stack label + description; chevron and icon
+     * stay vertically centered against the stack.
+     */
+    description?: React$1.ReactNode;
+    /**
+     * Right-edge action slot — settings cog, more-actions overflow,
+     * "+ add child" affordance. Rendered as a sibling of the branch
+     * button (not nested inside it, so `<button>` children inside
+     * trailing remain valid HTML). Vertically centered against the
+     * branch row, isolated from the expand/collapse click so a tap
+     * on a trailing button doesn't toggle the tree.
+     *
+     * The wrapper container also exposes a `group/row` named-group
+     * class so consumer-provided trailing can opt into hover-only
+     * visibility via Tailwind's `group-hover/row:` variant
+     * (`hidden group-hover/row:flex`) without writing custom CSS.
+     * Hovering nested children rows does NOT trigger the group hover
+     * — the named group is scoped to the branch row alone.
+     */
+    trailing?: React$1.ReactNode;
+}
+declare const SidebarTreeItem: React$1.ForwardRefExoticComponent<SidebarTreeItemProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Map: React$1.ForwardRefExoticComponent<MapProps & React$1.RefAttributes<MapHandle>>;
 
 declare const MapMarker: React$1.NamedExoticComponent<MapMarkerProps>;
 
 /**
- * MediaSurface — the shared shell used by VideoPlayer, RivePlayer,
- * and ThreeScene. Not exported publicly.
+ * MediaSurface — the shared shell used by VideoPlayer, RivePlayer, ThreeScene
+ * AND the canonical "media slot" primitive for still images, posters, album
+ * art, etc.
  *
  * Handles the surface area that's identical across all media types:
  *   - aspect ratio / radius / border (driven by CSS variables for theming)
  *   - loading skeleton
  *   - intersection-observer (for pause-when-offscreen)
  *   - reduced-motion query
+ *   - **empty-state placeholder** with format-suggesting glyph + alt caption
  *
  * Design-system note: all visual dimensions are backed by CSS vars so
- * consumers can retheme via `--rds-media-radius`, `--rds-media-border`,
- * `--rds-media-placeholder-bg`, `--rds-media-placeholder-fg`. The
- * placeholder pair drives the empty-state treatment — it's the
- * canonical "image not yet loaded" surface across Grade until the
- * image-generation pipeline replaces empty slots with real pictures.
- * Custom placeholder UI elsewhere in the product should consume the
- * same vars so we stay visually coherent.
+ * consumers can retheme via `--gds-media-radius`, `--gds-media-border`,
+ * `--gds-media-placeholder-bg`, `--gds-media-placeholder-fg`. The
+ * placeholder pair drives the empty-state treatment — it's the canonical
+ * "image not yet loaded" surface across Grade until the image-generation
+ * pipeline replaces empty slots with real pictures. Custom placeholder UI
+ * elsewhere in the product should consume the same vars so we stay
+ * visually coherent.
  * (These will rename to `--gds-*` when the broader codebase rename lands.)
+ *
+ * The placeholder uses a **size-tiered** rendering: sub-64px slots show
+ * initials only (avatar-density), 64-160px show the format glyph alone,
+ * and >160px add the alt text as a small caption beneath the glyph. The
+ * tier is measured via ResizeObserver — we deliberately don't lean on CSS
+ * container queries here so the component works in projects whose Tailwind
+ * config doesn't have the container-queries plugin installed.
+ *
+ * **Do NOT wrap <Avatar> inside <MediaSurface>** to get a 2-letter initials
+ * fallback. That pattern conflates two primitives — Avatar is for people
+ * only (circular, social context); MediaSurface is for everything else
+ * (square album art, wide landscapes, portrait posters). Set `alt` + `hint`
+ * on MediaSurface directly and you get the same initials affordance with
+ * the right semantics.
  */
 
 type MediaAspect = "video" | "square" | "portrait" | "wide" | "auto";
 type MediaRadius = "none" | "sm" | "md" | "lg" | "xl";
+/**
+ * What kind of media is this slot intended for? Drives three things:
+ *   1. The glyph rendered in the empty-state placeholder.
+ *   2. The default `aspect` when the caller hasn't pinned one.
+ *   3. The future generation pipeline's provider routing (album →
+ *      MusicBrainz cover-art, poster → TMDB, generic → Gemini, etc.).
+ *
+ * Kept as a small finite union so the Settings panel can render it as a
+ * glyph-led toggle picker rather than a free-text input. Adding a hint
+ * here means adding a glyph in `HINT_GLYPH` and a default aspect in
+ * `HINT_DEFAULT_ASPECT` below — both maps are checked exhaustively.
+ */
+type MediaHint = "album" | "tv-show" | "movie" | "game" | "book" | "portrait" | "landscape" | "poster" | "product" | "food" | "video" | "audio" | "embed" | "3d" | "generic";
+/**
+ * Structured metadata the future generation pipeline reads to look up real
+ * imagery for this slot. The component itself never renders from `source` —
+ * it's purely declarative until the generator walks the JSX and patches in
+ * `src` values. Discriminated by `kind` so we can route per-provider:
+ *
+ *   album    → MusicBrainz Cover Art Archive (free, no auth)
+ *   tv-show  → TMDb (free with key)
+ *   movie    → TMDb (free with key)
+ *   game     → IGDB (free, Twitch OAuth)
+ *   book     → OpenLibrary (free, no auth)
+ *   poster   → Picsum (or wired generator)
+ *   portrait → Picsum (until prompt-aware generator lands)
+ *   landscape→ Picsum (until prompt-aware generator lands)
+ *   product  → Picsum (until prompt-aware generator lands)
+ *   food     → Picsum (until prompt-aware generator lands)
+ *   generic  → Picsum
+ *   video/audio/embed/3d → no auto-gen; user provides
+ *
+ * Every variant optionally carries a `description` string — populated
+ * by Studio from the surface's `alt` prop via the Generate Image
+ * action. Prompt-aware providers use it as the user-intent prompt;
+ * lookup providers (MusicBrainz, TMDb, …) ignore unknown fields.
+ */
+type MediaSource = {
+    kind: "album";
+    artist: string;
+    title: string;
+    year?: number;
+    description?: string;
+} | {
+    kind: "tv-show";
+    title: string;
+    year?: number;
+    description?: string;
+} | {
+    kind: "movie";
+    title: string;
+    year?: number;
+    description?: string;
+} | {
+    kind: "game";
+    title: string;
+    description?: string;
+} | {
+    kind: "book";
+    title?: string;
+    author?: string;
+    isbn?: string;
+    description?: string;
+} | {
+    kind: "portrait";
+    name?: string;
+    role?: string;
+    description?: string;
+} | {
+    kind: "landscape";
+    location?: string;
+    mood?: string;
+    description?: string;
+} | {
+    kind: "poster";
+    title: string;
+    year?: number;
+    description?: string;
+} | {
+    kind: "product";
+    name?: string;
+    brand?: string;
+    description?: string;
+} | {
+    kind: "food";
+    dish?: string;
+    cuisine?: string;
+    description?: string;
+} | {
+    kind: "video";
+} | {
+    kind: "audio";
+} | {
+    kind: "embed";
+} | {
+    kind: "3d";
+} | {
+    kind: "generic";
+    prompt: string;
+    description?: string;
+};
+/**
+ * Subscribe to the runtime URL map exposed by Studio (and any other host
+ * that wants to wire the same protocol). The map lives on `window.__gradeMediaUrls`
+ * — a `Record<sourceKey, url>` — and emits `grade:media-urls-updated`
+ * whenever it changes. Components reading the map re-render on the event.
+ *
+ * Headless / server-rendered consumers get an empty map; the resolution
+ * only kicks in client-side.
+ *
+ * The map is intentionally **decoupled** from React context so consuming
+ * apps don't have to thread a provider through their tree — MediaSurface
+ * can be dropped anywhere in any layout and the URL map "just works"
+ * once the host writes to the global. Studio's iframe agent writes to
+ * the global in response to the "Fill images" flow; other integrations
+ * (e.g. an MCP server, a CLI codemod) can use the same protocol.
+ */
+type MediaUrlMap = Record<string, string>;
+/**
+ * Per-instance prop overrides, keyed by the same `sourceKey` as the
+ * URL map. Each entry is a partial MediaSurface props bag — only the
+ * keys the user has customised for THIS specific slot. The studio
+ * settings panel writes overrides via the `grade:component-action`
+ * event with kind `"set-media-override"`; this component reads
+ * `overrides[myKey]` at render and merges on top of its JSX props
+ * so an edit on Discovery doesn't ripple to every other album in the
+ * same `.map()`. See `useResolvedOverride` below.
+ */
+type MediaOverrideMap = Record<string, Partial<{
+    hint: MediaHint;
+    aspect: MediaAspect;
+    radius: MediaRadius;
+    border: boolean;
+    loading: boolean;
+    alt: string;
+    src: string;
+    emptyState: "auto" | "icon" | "none";
+}>>;
+declare global {
+    interface Window {
+        __gradeMediaUrls?: MediaUrlMap;
+        __gradeMediaOverrides?: MediaOverrideMap;
+    }
+}
 interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
     aspect?: MediaAspect;
     radius?: MediaRadius;
@@ -785,15 +1868,80 @@ interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
     /** Fallback shown before `onReady` is signalled by the child. */
     fallback?: React$1.ReactNode;
     /**
-     * Controls the empty-state placeholder shown when no `children` and no
-     * `loading` state are provided. Default `"icon"` renders a subtle
-     * image-icon centered on the muted surface so the slot reads as
-     * "media goes here" rather than blank. Use `"none"` for cases where
-     * the consumer wants a truly empty surface (e.g. a custom decorative
-     * overlay that needs the surface clean), or pass a node to fully
-     * override.
+     * Controls the empty-state placeholder shown when no `src`, `children`,
+     * and no `loading` state are provided. Default `"auto"` renders the
+     * size-tiered placeholder (initials / glyph / glyph + caption depending
+     * on the slot's rendered width — see `tierFromWidth`). Use `"none"` for
+     * a truly empty surface (e.g. a custom decorative overlay that needs
+     * the surface clean), or pass a node to fully override.
+     *
+     * Legacy `"icon"` is kept as an alias for `"auto"` so the previous API
+     * doesn't break.
+     */
+    emptyState?: "auto" | "icon" | "none" | React$1.ReactNode;
+    /**
+     * What kind of media is intended for this slot — drives the placeholder
+     * glyph, the default `aspect` when unset, and the future generator's
+     * provider routing. See `MediaHint`. Defaults to `"generic"` (image icon).
+     */
+    hint?: MediaHint;
+    /**
+     * Descriptive label for the slot. Used three ways:
+     *   1. The `alt` attribute on the rendered `<img>` when `src` is set.
+     *   2. The caption shown beneath the glyph in the large placeholder tier.
+     *   3. The source string for derived 2-letter initials in the small tier.
+     * Strongly recommended — without it the placeholder is anonymous and the
+     * eventual image has no a11y label.
+     */
+    alt?: string;
+    /**
+     * Structured metadata for the generation pipeline. Opaque to MediaSurface
+     * itself (it just stamps `data-media-source-kind` on the root for
+     * inspector visibility); read by the generator AST walker to look up real
+     * imagery from the right provider. See `MediaSource`.
+     */
+    source?: MediaSource;
+    /**
+     * When set, MediaSurface renders an `<img>` filling the slot via
+     * object-cover. The wrapper keeps its aspect / radius / border chrome.
+     * Convenience prop so callers don't have to write the `<img>` themselves;
+     * also the target the future generator patches into when filling slots.
+     */
+    src?: string;
+    /**
+     * Override the hint-derived glyph for one-off cases. Most consumers
+     * should pick a `hint` and let the map decide; this is the escape
+     * hatch for special slots that don't fit the canonical set.
+     */
+    glyph?: React$1.ReactNode;
+    /**
+     * Stable identifier for this specific MediaSurface instance, stamped
+     * on the root as `data-gds-instance-id`. When the JSX renders a list
+     * of MediaSurfaces from a data array (`.map(a => <MediaSurface
+     * instanceId={a.id} ... />)`), this is how Studio's selection agent
+     * tells THIS card apart from its siblings — every other prop is
+     * either shared via the template (hint, aspect) or content that
+     * happens to differ but isn't guaranteed unique.
+     *
+     * Combined with the data-array-mutator path, this is what makes
+     * "click Discovery, change its alt text, only Discovery's alt
+     * changes" actually work — the panel finds the data entry whose
+     * `id` matches `instanceId` and patches just that entry.
+     *
+     * No-op if omitted (standalone MediaSurfaces don't need it).
+     */
+    instanceId?: string;
+    /**
+     * Content layered ON TOP of the media (or placeholder) — play buttons,
+     * hover gradients, corner badges, watch-progress bars. Renders in its
+     * own absolutely-positioned layer at the highest z-index. Importantly,
+     * an overlay does NOT suppress the empty-state placeholder: a play
+     * button hovering over an unfilled album slot is still meaningfully
+     * unfilled, and we want the placeholder to read through it. Use
+     * `children` for content that REPLACES the media (custom canvas/video);
+     * use `overlay` for content that DECORATES it.
      */
-    emptyState?: "icon" | "none" | React$1.ReactNode;
+    overlay?: React$1.ReactNode;
     children?: React$1.ReactNode;
 }
 declare const MediaSurface: React$1.ForwardRefExoticComponent<MediaSurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1458,7 +2606,7 @@ declare function themeToCSSVars(theme: GeneratedTheme, mode: ModeName): Record<s
  * CSS rules key off of.
  *
  * Safe to call repeatedly — each call fully resets the vars the theme
- * controls. Vars the theme doesn't touch (e.g. --rds-green-500 in
+ * controls. Vars the theme doesn't touch (e.g. --gds-green-500 in
  * globals.css) are left alone.
  */
 declare function applyThemeToRoot(theme: GeneratedTheme, mode: ModeName): void;
@@ -1544,7 +2692,7 @@ declare const ALL_MODES: ModeName[];
  * NOTE: this string is embedded directly into the <head> via
  * dangerouslySetInnerHTML. Keep it self-contained and dependency-free.
  */
-declare const GRADE_PRE_HYDRATION_SCRIPT = "\n(function() {\n  try {\n    var mode = localStorage.getItem('ramp-mode');\n    var valid = ['superLight','light','dark','superDark'];\n    if (!mode || valid.indexOf(mode) === -1) {\n      mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    if (mode === 'dark' || mode === 'superDark') {\n      document.documentElement.classList.add('dark');\n    }\n    document.documentElement.setAttribute('data-mode', mode);\n    var themeId = localStorage.getItem('ramp-theme');\n    if (themeId) document.documentElement.setAttribute('data-ramp-theme', themeId);\n  } catch(e) {}\n})();\n";
+declare const GRADE_PRE_HYDRATION_SCRIPT = "\n(function() {\n  try {\n    var mode = localStorage.getItem('grade-mode');\n    var valid = ['superLight','light','dark','superDark'];\n    if (!mode || valid.indexOf(mode) === -1) {\n      mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    if (mode === 'dark' || mode === 'superDark') {\n      document.documentElement.classList.add('dark');\n    }\n    document.documentElement.setAttribute('data-mode', mode);\n    var themeId = localStorage.getItem('grade-theme');\n    if (themeId) document.documentElement.setAttribute('data-grade-theme', themeId);\n  } catch(e) {}\n})();\n";
 type GradeThemeContextValue = {
     /** The currently active theme object. */
     theme: GeneratedTheme;
@@ -1610,4 +2758,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, 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, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, 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, type MediaSurfaceProps, type ModeName, 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, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, 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, 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, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, flexVariants, generateTheme, getTheme, gridVariants, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, toggleVariants, 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, 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 };