@gradeui/ui 0.8.0 → 0.9.0

package/dist/index.d.mts

@@ -2,6 +2,7 @@ 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 * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -10,13 +11,18 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as ResizablePrimitive from 'react-resizable-panels';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { M as MapProps, a as MapHandle, b as MapMarkerProps } from './types-BxywIwvG.mjs';
+export { C as Coords, c as MapAppearance, d as MapError, e as MapErrorCode } from './types-BxywIwvG.mjs';
 import * as THREE from 'three';
 import { ClassValue } from 'clsx';
 
@@ -26,72 +32,123 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 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;
+    variant?: "destructive" | "success" | "warning" | "info" | "highlight" | "default" | 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>>;
 
 /**
- * AppShell — top-level page scaffold for an app-like layout.
+ * AppShell — top-level page scaffold for an app-like or marketing layout.
  *
- * The Studio was missing a named "app layout" primitive — without one,
- * agent-generated pages either freestyle grids or reinvent the nav-plus-
- * content structure every time. AppShell gives them one component with a
- * small, bounded set of layout variants so vibe-coded prototypes land in a
- * recognisable shape: a nav region (top, side, or none) plus a main region
- * that optionally constrains its content width.
+ * Provides five slots arranged via CSS-grid template areas:
+ *
+ *   ┌─────────── Header (full bleed) ───────────┐
+ *   │ Nav │   Aside   │      Main               │
+ *   └─────────── Footer (full bleed) ───────────┘
+ *
+ * Header and Footer always span the full width and sit at the very top /
+ * very bottom of the shell — useful for marketing pages, brand bars, site
+ * chrome. `nav` chooses how the body row is split:
+ *
+ * - `none`        — Main only (a marketing page or a single-column app)
+ * - `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)
+ *
+ * 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 TopMenu, or a hand-rolled `<nav>`. Keeping it dumb means it renders
- * fine on the server and can be styled by consumers without fighting a
- * behaviour model.
+ * runtime JS. Nav content is whatever the caller drops in — a SideMenu, a
+ * TopMenu, a hand-rolled `<nav>`. For drag-to-resize columns inside the
+ * body, compose this with `Resizable` instead of using a static grid.
  *
  * Variants:
- * - `nav`       — "none" | "top" | "side". Chooses the grid structure.
- * - `maxWidth`  — "full" | "container". Caps the main region width for
- *                 marketing-style pages without the caller having to wrap
- *                 their content in a max-w-* div.
- * - `sticky`    — boolean. Sticks top nav to the viewport top / side nav
- *                 to the viewport when the page scrolls. Sensible default
- *                 for app chrome.
+ * - `nav`       — "none" | "top" | "side" | "three-pane"
+ * - `maxWidth`  — Main slot only: "full" | "container" caps reading width
+ *                 for marketing-style content.
+ * - `sticky`    — Nav slot, Header slot. Pin to the viewport on scroll.
  */
 declare const shellVariants: (props?: ({
-    nav?: "none" | "top" | "side" | null | undefined;
+    nav?: "none" | "top" | "side" | "three-pane" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const headerVariants: (props?: ({
+    sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const navVariants: (props?: ({
     placement?: "none" | "top" | "side" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const asideVariants: (props?: ({
+    sticky?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const mainVariants: (props?: ({
-    maxWidth?: "full" | "container" | null | undefined;
+    maxWidth?: "container" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const footerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof shellVariants> {
     /** Render as the single child element via Radix Slot — lets you stamp the
      *  shell layout onto an existing root tag without an extra wrapper. */
     asChild?: boolean;
 }
 declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
+interface AppShellHeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants> {
+    asChild?: boolean;
+}
+declare const AppShellHeader: React$1.ForwardRefExoticComponent<AppShellHeaderProps & React$1.RefAttributes<HTMLElement>>;
 interface AppShellNavProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof navVariants> {
     asChild?: boolean;
 }
 declare const AppShellNav: React$1.ForwardRefExoticComponent<AppShellNavProps & React$1.RefAttributes<HTMLElement>>;
+interface AppShellAsideProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof asideVariants> {
+    asChild?: boolean;
+}
+declare const AppShellAside: React$1.ForwardRefExoticComponent<AppShellAsideProps & React$1.RefAttributes<HTMLElement>>;
 interface AppShellMainProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof mainVariants> {
     asChild?: boolean;
 }
 declare const AppShellMain: React$1.ForwardRefExoticComponent<AppShellMainProps & React$1.RefAttributes<HTMLElement>>;
+interface AppShellFooterProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {
+    asChild?: boolean;
+}
+declare const AppShellFooter: React$1.ForwardRefExoticComponent<AppShellFooterProps & React$1.RefAttributes<HTMLElement>>;
+
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const 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?: "secondary" | "destructive" | "success" | "warning" | "info" | "highlight" | "default" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
+/**
+ * Button — primary action primitive.
+ *
+ * Sizes (t-shirt scale) align EXACTLY to Tabs / ToggleGroup outer
+ * heights so a button placed next to a tab strip lines up without
+ * any per-call className overrides:
+ *
+ *   sm:  h-7 (28px)  — matches `<TabsList size="sm">` height
+ *   md:  h-8 (32px)  — matches `<TabsList size="md">` height (default)
+ *   lg:  h-10 (40px) — matches `<TabsList size="lg">` height
+ *   icon: h-8 w-8    — square variant, md height
+ *
+ * `default` is preserved as an alias for `md` so existing call sites
+ * keep working through the rename.
+ *
+ * Type and icon sizes also follow the Tabs scale (text-xs + size-3.5
+ * at sm/md, text-sm + size-4 at lg) so the visual rhythm reads
+ * consistent across primitives.
+ */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
+    size?: "lg" | "md" | "sm" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -233,6 +290,68 @@ declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive
 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>>;
 
+/**
+ * Resizable — drag-to-adjust panel groups.
+ *
+ * Thin wrapper over `react-resizable-panels` so consumers can compose
+ * persistently-sized splits (e.g. nav + main, list + detail, three-pane
+ * with adjustable middle column) without owning the layout primitives.
+ *
+ * Use this when you want USER-adjustable column widths. For static layouts
+ * with a fixed-width middle column, prefer `<AppShell nav="three-pane">`
+ * — that's a plain CSS grid with no JS.
+ *
+ * Layout-shape parity:
+ *   - `direction="horizontal"` → ResizableHandle is vertical (the divider
+ *     between two columns)
+ *   - `direction="vertical"`   → ResizableHandle is horizontal (the divider
+ *     between two rows)
+ *
+ * Persisting layout: pass `id` to ResizablePanelGroup and `id` to each
+ * ResizablePanel; react-resizable-panels writes layout to localStorage
+ * under that id so the user's preferred sizes survive reloads.
+ *
+ * Example:
+ *
+ *   <ResizablePanelGroup direction="horizontal" id="inbox-shell">
+ *     <ResizablePanel defaultSize={20} minSize={15} id="nav">
+ *       <SideMenu />
+ *     </ResizablePanel>
+ *     <ResizableHandle withHandle />
+ *     <ResizablePanel defaultSize={30} minSize={20} id="list">
+ *       <ThreadList />
+ *     </ResizablePanel>
+ *     <ResizableHandle />
+ *     <ResizablePanel defaultSize={50} id="detail">
+ *       <ThreadDetail />
+ *     </ResizablePanel>
+ *   </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 | HTMLDataElement | HTMLInputElement | HTMLLinkElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSelectElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | 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"> & {
+    className?: string | undefined;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: ResizablePrimitive.PanelOnCollapse | undefined;
+    onExpand?: ResizablePrimitive.PanelOnExpand | undefined;
+    onResize?: ResizablePrimitive.PanelOnResize | undefined;
+    order?: number | undefined;
+    style?: object | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: React$1.ReactNode;
+} & React$1.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
+declare const ResizableHandle: ({ withHandle, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    /** When true, render a visible grip handle in the middle of the divider
+     *  for affordance. Without this, the handle is just a 1px hit area —
+     *  fine for power-user tools, harder to discover for everyone else. */
+    withHandle?: boolean;
+}) => React$1.JSX.Element;
+
 /**
  * Row — horizontal layout primitive.
  *
@@ -248,7 +367,7 @@ declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupP
  * etc.) and is a separate primitive.
  */
 declare const rowVariants: (props?: ({
-    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
@@ -284,7 +403,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" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
@@ -318,7 +437,7 @@ declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAtt
  */
 declare const flexVariants: (props?: ({
     direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
-    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
@@ -388,7 +507,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
  * for a centred narrow column (auth cards, marketing copy).
  */
 declare const stackVariants: (props?: ({
-    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
@@ -410,13 +529,103 @@ 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"> & {
+    separator?: React$1.ReactNode;
+} & 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> {
+    /** Anchor href. When set, renders an <a>; otherwise renders a <button>. */
+    href?: string;
+    /** Use a <span> instead of <a>/<button> — useful when wrapping in a
+     *  framework-specific Link component yourself. */
+    asChild?: boolean;
+}
+declare const BreadcrumbLink: React$1.ForwardRefExoticComponent<BreadcrumbLinkProps & React$1.RefAttributes<HTMLElement>>;
+declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+    displayName: string;
+};
+
 declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const tabsListVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tabsTriggerVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TabsListProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
+}
+declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, VariantProps<typeof tabsTriggerVariants> {
+    /**
+     * Tooltip text shown on hover / focus. Designed for icon-only
+     * triggers: pass `<TabsTrigger value="preview" tooltip="Preview">`
+     * with an icon child, and the component handles the rest. If
+     * `aria-label` is not set explicitly, the tooltip string is also
+     * applied as `aria-label` so screen readers can name the choice.
+     *
+     * Requires a `<TooltipProvider>` somewhere above the tabs. The
+     * design system's root layout mounts one app-wide.
+     */
+    tooltip?: React$1.ReactNode;
+}
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "lg" | "sm" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Toggle: React$1.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "lg" | "sm" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const toggleGroupVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleGroupProps = React$1.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleGroupVariants>;
+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?: "lg" | "md" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
+
 interface SideMenuItem {
     id: string;
     label: string;
@@ -465,68 +674,6 @@ interface SideMenuProps {
 }
 declare const SideMenu: React$1.ForwardRefExoticComponent<SideMenuProps & React$1.RefAttributes<HTMLElement>>;
 
-interface BreadcrumbItem {
-    label: string;
-    href?: string;
-}
-interface TopMenuProps {
-    /** Breadcrumb navigation items */
-    breadcrumbs?: BreadcrumbItem[];
-    /** Show mobile menu button */
-    showMobileMenu?: boolean;
-    /** Mobile menu button click handler */
-    onMobileMenuClick?: () => void;
-    /** Left side content (appears after breadcrumbs) */
-    leftContent?: React$1.ReactNode;
-    /** Right side content (actions, user menu, etc.) */
-    rightContent?: React$1.ReactNode;
-    /** Custom className */
-    className?: string;
-    /** Custom link component (e.g., Next.js Link) */
-    linkComponent?: React$1.ComponentType<{
-        href: string;
-        className?: string;
-        children: React$1.ReactNode;
-    }>;
-}
-declare const TopMenu: React$1.ForwardRefExoticComponent<TopMenuProps & React$1.RefAttributes<HTMLElement>>;
-interface TopMenuUserProps {
-    /** User name */
-    name?: string;
-    /** User email */
-    email?: string;
-    /** User avatar URL */
-    avatarUrl?: string;
-    /** Custom avatar content (icon, initials, etc.) */
-    avatarContent?: React$1.ReactNode;
-    /** Avatar background color class */
-    avatarClassName?: string;
-    /** Menu items */
-    children?: React$1.ReactNode;
-    /** Custom className */
-    className?: string;
-}
-declare const TopMenuUser: React$1.ForwardRefExoticComponent<TopMenuUserProps & React$1.RefAttributes<HTMLDivElement>>;
-interface TopMenuUserItemProps {
-    /** Item icon */
-    icon?: React$1.ReactNode;
-    /** Item label */
-    children: React$1.ReactNode;
-    /** Click handler */
-    onClick?: () => void;
-    /** Href for link items */
-    href?: string;
-    /** Variant */
-    variant?: "default" | "danger" | "success";
-    /** Custom className */
-    className?: string;
-}
-declare const TopMenuUserItem: React$1.ForwardRefExoticComponent<TopMenuUserItemProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const TopMenuUserSection: React$1.ForwardRefExoticComponent<{
-    children: React$1.ReactNode;
-    className?: string;
-} & React$1.RefAttributes<HTMLDivElement>>;
-
 interface SimpleTab {
     id: string;
     label: string;
@@ -601,6 +748,10 @@ 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 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.
@@ -612,7 +763,13 @@ declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrim
  *   - reduced-motion query
  *
  * Design-system note: all visual dimensions are backed by CSS vars so
- * consumers can retheme via `--rds-media-radius`, `--rds-media-border`, etc.
+ * 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.
  * (These will rename to `--gds-*` when the broader codebase rename lands.)
  */
 
@@ -627,6 +784,16 @@ interface MediaSurfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>,
     onVisibilityChange?: (visible: boolean) => void;
     /** 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.
+     */
+    emptyState?: "icon" | "none" | React$1.ReactNode;
     children?: React$1.ReactNode;
 }
 declare const MediaSurface: React$1.ForwardRefExoticComponent<MediaSurfaceProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1443,4 +1610,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, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, 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, 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, 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, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, 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, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };
+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 };