@lovett/ui 0.0.4 → 0.0.5

package/dist/index.d.ts

@@ -0,0 +1,2495 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, CSSProperties, RefObject, ComponentProps, ComponentType, FormHTMLAttributes, FormEvent } from 'react';
+import { Toaster as Toaster$1 } from 'sonner';
+export { toast } from 'sonner';
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { ClassValue } from 'clsx';
+
+/**
+ * Card — head/body/foot anatomy.
+ *
+ * Usage:
+ *   <Card interactive onClick={...}>
+ *     <Card.Head>
+ *       <IconTile bg={...} fg={...}><Icon/></IconTile>
+ *       <div className="flex-1 min-w-0">
+ *         <Card.Title>Roof Replacement</Card.Title>
+ *         <Card.Desc>Full tear-off and replacement...</Card.Desc>
+ *       </div>
+ *     </Card.Head>
+ *     <Card.Body>
+ *       <TagRow tags={['25-Year Warranty', 'Metal & Asphalt']}/>
+ *     </Card.Body>
+ *     <Card.Foot>
+ *       <Card.Meta>...</Card.Meta>
+ *       <Card.Actions>...</Card.Actions>
+ *     </Card.Foot>
+ *   </Card>
+ *
+ * `interactive` adds cursor + hover lift + reveal-on-hover for Card.Actions.
+ */
+type DivProps = HTMLAttributes<HTMLDivElement>;
+interface CardProps extends DivProps {
+    interactive?: boolean;
+}
+declare const CardRoot: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+declare function Head({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+declare function Body({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+declare function Tray$1({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+declare function Foot({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+declare function Title({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function Desc({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    clamp?: 2 | 3;
+}): react_jsx_runtime.JSX.Element;
+declare function Meta({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+declare function MetaItem({ icon, children, className, }: {
+    icon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Actions({ className, ...rest }: DivProps): react_jsx_runtime.JSX.Element;
+interface ActionButtonProps$1 extends HTMLAttributes<HTMLButtonElement> {
+    danger?: boolean;
+}
+declare const ActionButton$1: react.ForwardRefExoticComponent<ActionButtonProps$1 & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * Icon-on-color tile used in card heads. Pass tone colors as inline rgb()
+ * strings so they can reference semantic tokens (info/success/etc.).
+ */
+declare function IconTile({ bg, fg, size, className, children, }: {
+    bg: string;
+    fg: string;
+    size?: number;
+    className?: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** Tag row helper — reads `--tag-bg`/`--border` automatically. */
+declare function TagRow({ tags, max, className, }: {
+    tags: string[];
+    max?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+type CardComponent = typeof CardRoot & {
+    Head: typeof Head;
+    Body: typeof Body;
+    Tray: typeof Tray$1;
+    Foot: typeof Foot;
+    Title: typeof Title;
+    Desc: typeof Desc;
+    Meta: typeof Meta;
+    MetaItem: typeof MetaItem;
+    Actions: typeof Actions;
+    ActionButton: typeof ActionButton$1;
+    IconTile: typeof IconTile;
+    TagRow: typeof TagRow;
+};
+declare const Card: CardComponent;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'destructive-soft' | 'icon' | 'toolbar';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonShape = 'default' | 'circle';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** ADR-026 D3 — `circle` only takes effect when `variant="icon"`. */
+    shape?: ButtonShape;
+    /** Show the loading spinner overlay; auto-disables the button. */
+    loading?: boolean;
+    /** Optional left-side icon. Forces icon-text gap from .btn. */
+    leadingIcon?: ReactNode;
+    /** Optional right-side icon. */
+    trailingIcon?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** One or more `<Button>` elements. */
+    children: ReactNode;
+}
+declare function ButtonGroup({ children, className, role, ...rest }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+
+type InputSize = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    inputSize?: InputSize;
+    error?: boolean;
+    /** Element rendered before the input — typically an icon. Static, no interaction. */
+    leadingAffix?: ReactNode;
+    /** Element rendered after the input. Pass an `<button class="affix action">` for clickable. */
+    trailingAffix?: ReactNode;
+    /** Override classes on the .input-shell wrapper. */
+    shellClassName?: string;
+    /**
+     * Show/hide affordance for `type="password"`. Manages visibility state
+     * internally and renders an Eye/EyeOff toggle in the trailing affix slot.
+     * No-op when `type !== "password"`. Caller-supplied `trailingAffix`
+     * wins — the toggle is only injected when the slot is otherwise empty.
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * Numeric variant (ADR-076 D8) — renders the field in the monospace
+     * face with `tabular-nums` so digits align as the value changes.
+     * Pair with the existing `leadingAffix` (e.g. a `$`) / `trailingAffix`
+     * (e.g. a unit suffix) for calculator inputs. No new prefix/suffix
+     * props — affixes are the canonical adornment slots.
+     */
+    numeric?: boolean;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+    /** Override classes on the .input-shell wrapper. */
+    shellClassName?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+/**
+ * Modal — a centered floating panel on top of a backdrop. Built on
+ * `.ds-card-surface` so it inherits the premium card chrome (border,
+ * radius, multi-layer shadow with inner highlight in light mode).
+ *
+ * Two layout modes:
+ *
+ *   1. Flat children (back-compat) — pass content directly:
+ *
+ *        <Modal title="..." onClose={...}>
+ *          <p>body</p>
+ *          <Button>action</Button>
+ *        </Modal>
+ *
+ *   2. Shell / Tray pattern (recommended) — body in a recessed tray,
+ *      action buttons on the outer-card bottom strip below the tray:
+ *
+ *        <Modal title="..." onClose={...}>
+ *          <Modal.Tray>
+ *            <p>body content sits in a recessed shelf</p>
+ *            <textarea ... />
+ *          </Modal.Tray>
+ *          <Modal.Footer>
+ *            <Button variant="ghost" onClick={onClose}>Cancel</Button>
+ *            <Button>Confirm</Button>
+ *          </Modal.Footer>
+ *        </Modal>
+ */
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    className?: string;
+}
+declare function Modal({ isOpen, onClose, title, children, className }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare namespace Modal {
+    var Tray: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    var Footer: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+}
+
+type Side$1 = 'right' | 'bottom';
+type Anchor = 'viewport' | 'container';
+interface FloatingDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    side: Side$1;
+    /** Width (`side="right"`) or height (`side="bottom"`) in px. Defaults: 520 / 480. */
+    size?: number;
+    /** When true, render a drag handle along the leading edge of the panel. */
+    resizable?: boolean;
+    /** Called as the user drags the resize handle. */
+    onResize?: (next: number) => void;
+    /** Header title — short, e.g. the record's name or the drawer's purpose. */
+    title?: ReactNode;
+    /** Optional element rendered to the right of the title, before close. */
+    titleSlot?: ReactNode;
+    /** Optional footer — action buttons. */
+    footer?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    /** Optional className on the inner panel for fine-grained body styling. */
+    panelClassName?: string;
+    /**
+     * Modal mode renders a backdrop, locks body scroll, and closes on Esc
+     * (default — matches the card-grid drawer use case). Non-modal mode
+     * (used by GeoSearch's always-on results panel per Phase 7a) skips
+     * the backdrop + scroll lock + Esc handler so the user can interact
+     * with content behind the panel.
+     */
+    modal?: boolean;
+    /**
+     * Collapsed mode hides the body and footer entirely so the panel
+     * shrinks to just the header — no residual flex-1 body div, no
+     * seam between header and panel edge. Designed for non-modal,
+     * always-on consumers (GeoSearch) where the user toggles the panel
+     * between "show table" and "hide table" without dismissing it.
+     * The header keeps its border-bottom hidden in this state so it
+     * reads as a clean single-bar strip.
+     *
+     * When collapsed, callers should pass `size` matching the header's
+     * natural height (Phase 7a uses 44px); panel border + header chrome
+     * fit cleanly inside that height with `box-sizing: border-box`.
+     */
+    collapsed?: boolean;
+    /**
+     * `'viewport'` (default) anchors the drawer with `position: fixed` to
+     * the browser viewport — the card-grid drawer pattern. `'container'`
+     * anchors with `position: absolute` to the nearest positioned ancestor
+     * (the parent MUST establish a containing block, e.g.
+     * `position: relative`). Container mode scopes the drawer to a lens
+     * pane so it doesn't escape the surrounding chrome — used by
+     * GeoSearch in Phase 7a.
+     */
+    anchor?: Anchor;
+    /** Whether to render a default close (X) button after `titleSlot`. Default true. */
+    showClose?: boolean;
+    /** Override the header padding. Default: `px-4 py-2.5` — tighter than
+     * the right-drawer's body padding so the action bar feels integrated. */
+    headerClassName?: string;
+}
+declare function FloatingDrawer({ isOpen, onClose, side, size, resizable, onResize, title, titleSlot, footer, children, className, panelClassName, modal, anchor, showClose, headerClassName, collapsed, }: FloatingDrawerProps): react_jsx_runtime.JSX.Element;
+/**
+ * DetailSection — small label/value layout for drawer body content.
+ * Ports verbatim from brand-ai-extension's detail-drawer.tsx.
+ */
+declare function DetailSection({ label, children, className, }: {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type BrandLogoTileSize = 'xs' | 'sm' | 'md' | 'lg' | number;
+interface BrandLogoTileProps {
+    /** Size token or a raw pixel number. Defaults to `md` (56px). */
+    size?: BrandLogoTileSize;
+    /** Image URL — logo, favicon, anything `<img>` can render. */
+    url?: string | null;
+    /**
+     * Brand name. Used as `alt` text and as the source for the
+     * single-character fallback when no `url` is provided (or the image
+     * fails to load).
+     */
+    name?: string;
+    /**
+     * Treat the image as a favicon — render it smaller, centred, without
+     * stretching to fill the tile. Auto-detected when the URL starts
+     * with the Google s2 favicon endpoint; pass `true`/`false` to override.
+     */
+    isFavicon?: boolean;
+    /**
+     * Adds a subtle accent-coloured radial glow above the tile. Used on
+     * the brand profile rail to give the logo a sense of presence
+     * against the slate frame.
+     */
+    accentGlow?: boolean;
+    /** Override the fallback character (defaults to `name[0]`). */
+    fallbackChar?: ReactNode;
+    /**
+     * Override the tile background. Use for contexts that have their own
+     * visual identity (e.g. the sidebar switcher's blue gradient). When
+     * omitted, the tile picks up the neutral card→overlay gradient that
+     * blends with surrounding chrome.
+     */
+    background?: string;
+    /**
+     * Override the fallback character / image-area text colour. Pair
+     * with `background` for branded variants (white text on coloured
+     * gradient). Defaults to the accent token.
+     */
+    color?: string;
+    /** Drop the 1px border (used when the tile sits on a strongly tinted bg). */
+    borderless?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function BrandLogoTile({ size, url, name, isFavicon, accentGlow, fallbackChar, background, color, borderless, className, style, }: BrandLogoTileProps): react_jsx_runtime.JSX.Element;
+
+interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+}
+declare function ActionButton({ label, className, children, ...rest }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+interface FootProps {
+    meta?: ReactNode;
+    link?: {
+        label: string;
+        onClick: () => void;
+        icon?: ReactNode;
+    };
+}
+/** FootItem — a single icon+text item inside the foot. */
+declare function FootItem({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+interface BaseProps {
+    /** DOM id and `data-section-id` for ChipNav scroll-spy. */
+    id: string;
+    /** Lucide icon (rendered ~17px). */
+    icon?: ReactNode;
+    /** Section title. */
+    title: string;
+    /** Section subtitle / description. */
+    subtitle?: string;
+    /** Optional foot meta + AI-action link. */
+    foot?: FootProps;
+    /** Extra padding tweak. */
+    className?: string;
+}
+interface StaticSectionProps extends BaseProps {
+    /** Right-side header actions (override default pencil/generate). */
+    actions?: ReactNode;
+    children: ReactNode;
+    editable?: undefined;
+}
+interface EditableSectionProps extends BaseProps {
+    editable: {
+        onSave: () => void | Promise<void>;
+        onCancel?: () => void;
+        isSaving?: boolean;
+        saveDisabled?: boolean;
+        /** Controlled editing state. If omitted, state is internal. */
+        isEditing?: boolean;
+        onEditingChange?: (editing: boolean) => void;
+        /** Extra actions before the pencil in view mode (e.g. Generate). */
+        extraViewActions?: ReactNode;
+    };
+    /** Render-prop child receives the current editing state. */
+    children: (isEditing: boolean) => ReactNode;
+    actions?: undefined;
+}
+type ProfileSectionProps = StaticSectionProps | EditableSectionProps;
+declare function ProfileSection(props: ProfileSectionProps): react_jsx_runtime.JSX.Element;
+type ProfileSectionComponent = typeof ProfileSection & {
+    ActionButton: typeof ActionButton;
+    FootItem: typeof FootItem;
+};
+declare const PS: ProfileSectionComponent;
+
+interface ChipNavItem {
+    id: string;
+    label: string;
+}
+interface ChipNavProps {
+    items: ChipNavItem[];
+    /**
+     * Element (ref or CSS selector) used as the scroll container for both
+     * the IntersectionObserver root and the smooth-scroll target. Falls
+     * back to the document if omitted.
+     */
+    scrollContainer?: React.RefObject<HTMLElement | null> | string;
+    /** Pixel offset for sticky positioning (default: 0 — caller manages). */
+    stickyTop?: number;
+    /** Pixels above the section to offset when click-scrolling. */
+    scrollOffset?: number;
+    /**
+     * Optional content rendered on the right side of the bar, separated
+     * from the chips by a flexible spacer. Use for page-level actions
+     * that should stay pinned to the sticky bar (e.g. Export, Generate).
+     */
+    actions?: ReactNode;
+    /** Extra Tailwind classes on the outer wrapper. */
+    className?: string;
+    /** Inline style on the outer wrapper. */
+    style?: CSSProperties;
+    /**
+     * Background painted on the sticky wrapper so page content scrolling
+     * behind the chip pill gets masked cleanly.
+     *
+     * - `'none'` (default) — wrapper is transparent. Correct inside a Card,
+     *   inside a tray, or anywhere the chip nav sits over a non-page surface.
+     * - `'page'` — wrapper paints `rgb(var(--main-content-bg))`. Correct
+     *   when the chip nav is mounted directly under the AppHeader, against
+     *   the page background, and needs to mask scrolling content beneath.
+     *
+     * Default was page-colored in the original brand-ai port; that bled
+     * into Card / Modal / Tray contexts as a discordant horizontal strip.
+     * Phase 2 callers that mount ChipNav against the page background must
+     * pass `surface="page"`.
+     */
+    surface?: 'none' | 'page';
+    /**
+     * Controlled mode: when provided, the parent owns the active chip.
+     * Scroll-spy is disabled and `onItemClick` is invoked instead of the
+     * default smooth-scroll behavior. Phase 7a GeoSearch uses this to
+     * drive mode-switch tabs (not scroll targets).
+     */
+    activeId?: string;
+    /**
+     * Optional click handler. When provided, takes precedence over the
+     * built-in scroll-to-section behavior. Required for controlled-mode
+     * (`activeId`) use.
+     */
+    onItemClick?: (id: string) => void;
+    /**
+     * `'sticky'` (default) — the wrapper is `sticky top-{stickyTop}` for
+     * the canonical scroll-spy use case.
+     * `'static'` — wrapper is `relative` with no inset; the consumer owns
+     *   positioning. Used by GeoSearch (Phase 7a) to mount ChipNav as a
+     *   floating island absolute-positioned above the map.
+     */
+    position?: 'sticky' | 'static';
+    /**
+     * `'comfortable'` (default, 32px chip height) — the canonical
+     * brand-profile lens density.
+     * `'compact'` (24px chip height) — slim variant for tight chrome
+     * like the `<PageHeaderHost />` center slot, where the surrounding
+     * header is only 48px tall. Reduces inner pill padding and chip
+     * vertical padding by 2px each.
+     */
+    density?: 'comfortable' | 'compact';
+}
+declare function ChipNav({ items, scrollContainer, stickyTop, scrollOffset, actions, className, style, surface, activeId: activeIdProp, onItemClick, position, density, }: ChipNavProps): react_jsx_runtime.JSX.Element;
+
+interface CompletionRingProps {
+    /** 0–100. Values outside the range are clamped. */
+    percent: number;
+    /** Outer dimension in px. Default 30. */
+    size?: number;
+    /** Ring stroke width in px. Default scales with size (size / 12). */
+    strokeWidth?: number;
+    /**
+     * What to render in the middle. Defaults to the percent number with
+     * a `%` suffix. Pass `false`/`null` to hide. Pass a node (icon, text)
+     * to fully override.
+     */
+    label?: ReactNode | false;
+    /** Convenience: false hides the default label. Same as `label={false}`. */
+    showLabel?: boolean;
+    /** Track colour CSS value. Defaults to `--surface-overlay-strong`. */
+    trackColor?: string;
+    /** Fill (progress arc) colour. Defaults to `--accent`. */
+    fillColor?: string;
+    /** Extra classes / inline style on the wrapper. */
+    className?: string;
+    style?: CSSProperties;
+}
+declare function CompletionRing({ percent, size, strokeWidth, label, showLabel, trackColor, fillColor, className, style, }: CompletionRingProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MicrosoftLogo — the Microsoft four-square brand mark, for "Sign in with
+ * Microsoft" SSO buttons (ADR-124 D8). Lucide has no Microsoft glyph, so this
+ * is a bespoke SVG primitive — which `@lovett/ui` is the one allowed home for
+ * (CLAUDE.md §2/§6). The four square colours are Microsoft's required brand
+ * colours (per their identity guidelines); they are intrinsic to the mark, not
+ * theme tokens, exactly like BrandLogoTile's imagery — so they live here as
+ * literals rather than `tokens.css` variables.
+ */
+interface MicrosoftLogoProps {
+    /** Square size in px. Default 18 (matches a control-height button glyph). */
+    size?: number;
+    className?: string;
+}
+declare function MicrosoftLogo({ size, className }: MicrosoftLogoProps): react_jsx_runtime.JSX.Element;
+
+interface ChoroplethProps {
+    /** `radius` → concentric circles; `isochrone` → concentric polygons. */
+    mode?: 'radius' | 'isochrone';
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Choropleth({ mode, className, style }: ChoroplethProps): react_jsx_runtime.JSX.Element;
+
+type Crumb = {
+    label: string;
+    to?: string;
+};
+interface PageShellProps {
+    /** Breadcrumb chain — last item renders as the bold current label.
+     *  For back-compat, `breadcrumb` + `title` are still accepted. */
+    crumbs?: Crumb[];
+    /** Legacy convenience: single parent crumb (label only). */
+    breadcrumb?: string;
+    /** Legacy: current-page title. Used as the last crumb when `crumbs` isn't provided. */
+    title?: string;
+    /** Right-side actions in the page header. */
+    actions?: ReactNode;
+    /**
+     * Content for the horizontally-centered slot in `<PageHeaderHost />`
+     * (Phase 7a). Relayed via the slot portal alongside `crumbs` /
+     * `actions`. When mounted in slot-host mode, the content sits in a
+     * dedicated absolutely-centered slot between the breadcrumb cluster
+     * and the trailing chrome, so it stays centered regardless of left/
+     * right slot widths. Ignored when PageShell renders its own inline
+     * header (no `<PageHeaderHost />` mounted).
+     *
+     * Phase 7a's GeoSearch lens lifts its mode-tabs ChipNav into this
+     * slot so the AppHeader carries: sidebar-toggle | crumbs | tabs |
+     * theme-toggle. Other lenses leave it unset.
+     */
+    headerCenter?: ReactNode;
+    children: ReactNode;
+    /** Override content padding if needed. Default leaves room for the sticky-blend header. */
+    contentClassName?: string;
+}
+declare function PageHeaderSlotProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Page shell — promoted from brand-ai-extension Phase 2a (ADR-009 Decision 7).
+ *
+ * Self-contained: provides a scrollable region whose sticky-blend header
+ * gains a translucent backdrop-blur background once you scroll past a few
+ * px. Breadcrumbs render at top-left, page actions at top-right.
+ *
+ * When mounted inside <PageHeaderSlotProvider> with a <PageHeaderHost />
+ * elsewhere, PageShell portals its header content into the host instead of
+ * rendering its own bar — the workspace uses this to merge the lens crumbs
+ * onto the same row as the workspace sidebar toggle.
+ */
+declare function PageShell({ crumbs, breadcrumb, title, actions, headerCenter, children, contentClassName, }: PageShellProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PageHeaderHost — single workspace-level header bar that the active
+ * <PageShell> portals its breadcrumbs/actions into. Renders the `leading`
+ * slot (typically a sidebar toggle button) on the same row, so the lens's
+ * chrome doesn't stack as a separate sticky band. The `trailing` slot
+ * sits past the portal area for persistent right-cluster chrome (e.g.
+ * a theme toggle) that should never collide with per-page actions.
+ *
+ * Sticky-blend: subscribes to the scroll container the active PageShell
+ * registered with the slot so the same scroll-past-4px fade-in still fires.
+ */
+declare function PageHeaderHost({ leading, center, trailing, padX, }: {
+    leading?: ReactNode;
+    /**
+     * Horizontal padding utility for the header bar. Defaults to `px-3`
+     * (the toggle-anchored layout). Callers with no `leading` slot (e.g. a
+     * single-lens skin that hides the sidebar toggle) pass a larger inset
+     * like `px-7` so the breadcrumbs line up with the content column below
+     * instead of hugging the edge. ADR-061 D3.
+     */
+    padX?: string;
+    /**
+     * Horizontally-centered slot — Phase 7a (ADR-012 Decision 12
+     * deviation). Renders absolutely positioned at the geometric center
+     * of the header so width changes in the breadcrumb (left) and
+     * trailing (right) clusters never shift its position. The active
+     * `<PageShell>` may also portal content into this slot via its
+     * `headerCenter` prop; both routes target the same DOM node.
+     *
+     * Wrapped in a `max-w` so on narrow viewports the center stays
+     * within the breadcrumb and trailing clusters' visual lanes
+     * (truncates internally before overlapping).
+     */
+    center?: ReactNode;
+    trailing?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Scrollable wrapper that exposes its scrollRef via a render prop so
+ * the consuming header (PageShell's internal PageHeader) can subscribe
+ * to scroll for the stuck-state effect.
+ */
+declare function AppScroll({ children, className, }: {
+    children: (scrollRef: RefObject<HTMLDivElement | null>) => ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type SonnerToasterProps = ComponentProps<typeof Toaster$1>;
+/**
+ * Token-aware `<Toaster />` shell.
+ *
+ * Defaults: top-right, 12px gap, 5s duration. The toastOptions wire
+ * Sonner's internal CSS variables to our `--toast-*` tokens so toasts
+ * adopt the design system surface color, border, and text color.
+ *
+ * Apps can override any prop (position, duration, theme, etc.) by
+ * passing it through.
+ */
+declare function Toaster(props: SonnerToasterProps): react_jsx_runtime.JSX.Element;
+
+declare function SectionLabel({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function IdentityLabel({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function IdentityValue({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TextInput({ value, onChange, placeholder, autoFocus, autoComplete, name, }: {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string | undefined;
+    autoFocus?: boolean | undefined;
+    /** Forwarded so the browser's autofill / password manager can identify the field. */
+    autoComplete?: string | undefined;
+    /** Forwarded so the field participates in form submission / autofill heuristics. */
+    name?: string | undefined;
+}): react_jsx_runtime.JSX.Element;
+declare function TextareaInput({ value, onChange, placeholder, autoFocus, autoComplete, name, rows, }: {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string | undefined;
+    autoFocus?: boolean | undefined;
+    autoComplete?: string | undefined;
+    name?: string | undefined;
+    rows?: number | undefined;
+}): react_jsx_runtime.JSX.Element;
+declare function EmptyPlaceholder({ label, description, onAdd, }: {
+    label: string;
+    description?: string | undefined;
+    onAdd?: (() => void) | undefined;
+}): react_jsx_runtime.JSX.Element;
+declare function ListItem({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+type Strategy = 'vertical' | 'horizontal' | 'grid';
+declare function SortableList<T>({ items, getId, onReorder, strategy, children, }: {
+    items: T[];
+    getId: (item: T, index: number) => string;
+    onReorder: (items: T[]) => void;
+    strategy?: Strategy;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function SortableItem({ id, children, }: {
+    id: string;
+    children: (props: {
+        dragHandleProps: HTMLAttributes<HTMLElement>;
+        setNodeRef: (node: HTMLElement | null) => void;
+        style: CSSProperties;
+        isDragging: boolean;
+    }) => ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function DragHandle({ dragHandleProps, className, }: {
+    dragHandleProps: HTMLAttributes<HTMLElement>;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    /** Lucide icon (or any ReactNode) rendered inside the 56×56 tile.
+     *  Pass at h-7 w-7 (28px) for visual parity with the canonical sites. */
+    icon: ReactNode;
+    /** Headline text. */
+    title: string;
+    /** Optional supporting copy. Kept under max-w-md by default. */
+    description?: string;
+    /** Optional action buttons row. Wraps with gap-2. */
+    actions?: ReactNode;
+    /** Optional className override on the outer container — use sparingly
+     *  (e.g. when the parent already provides vertical padding). */
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, actions, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface RadioGroupProps<T extends string = string> {
+    /** Form name — required for proper radio semantics + form submission. */
+    name: string;
+    /** Currently selected value. */
+    value: T | null;
+    /** Fires when the user picks a different option. */
+    onChange: (next: T) => void;
+    /** <Radio> children. */
+    children: ReactNode;
+    /** Visually-hidden label for screen readers. Renders as <legend>. */
+    ariaLabel?: string;
+    /** Layout direction. Defaults to vertical. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Extra classes on the wrapping <fieldset>. */
+    className?: string;
+    /** Disable every child radio. */
+    disabled?: boolean;
+}
+declare function RadioGroup<T extends string = string>({ name, value, onChange, children, ariaLabel, orientation, className, disabled, }: RadioGroupProps<T>): react_jsx_runtime.JSX.Element;
+interface RadioProps {
+    /** Value emitted to the group's onChange when picked. */
+    value: string;
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional secondary text (smaller, --text-tertiary). */
+    description?: ReactNode;
+    /** Disable this specific radio (overrides group default). */
+    disabled?: boolean;
+    /** Extra classes on the outer <label>. */
+    className?: string;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface OptionTileProps {
+    selected: boolean;
+    onSelect: () => void;
+    inputType: 'radio' | 'checkbox';
+    /** Required for radio (shared name across the group). */
+    inputName: string | undefined;
+    label: ReactNode;
+    description: ReactNode | undefined;
+    disabled: boolean | undefined;
+    className: string | undefined;
+}
+declare function OptionTile({ selected, onSelect, inputType, inputName, label, description, disabled, className, }: OptionTileProps): react_jsx_runtime.JSX.Element;
+interface OptionTileGroupOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+type OptionTileGroupProps<T extends string = string> = {
+    type: 'radio';
+    name: string;
+    value: T | null;
+    onChange: (next: T) => void;
+    options: OptionTileGroupOption<T>[];
+    ariaLabel?: string;
+    columns?: number;
+    className?: string;
+} | {
+    type: 'checkbox';
+    value: T[];
+    onChange: (next: T[]) => void;
+    options: OptionTileGroupOption<T>[];
+    ariaLabel?: string;
+    columns?: number;
+    className?: string;
+    /** Optional shared `name` attr on the underlying checkboxes (rarely needed). */
+    name?: string;
+};
+declare function OptionTileGroup<T extends string = string>(props: OptionTileGroupProps<T>): react_jsx_runtime.JSX.Element;
+
+type MetricCardTone = 'neutral' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
+interface MetricCardProps {
+    /** Headline value (large, semibold, tone-colored). Numbers should
+     *  use `font-mono` for tabular alignment when relevant. */
+    value: ReactNode;
+    /** Small descriptive label below the value. */
+    label: string;
+    /** Optional tone — colors the value text. Background stays neutral. */
+    tone?: MetricCardTone;
+    /** Optional icon shown to the left of the value (h-5 w-5 expected). */
+    icon?: ReactNode;
+    /**
+     * Where the label sits relative to the value. Default `'bottom'`
+     * (value-then-label — the original shape; existing consumers are
+     * unchanged). `'top'` renders a small uppercase label above the
+     * value — the KPI-chip shape used by Calculator Shell v2 (ADR-076
+     * D8). The value size is unchanged in both positions.
+     */
+    labelPosition?: 'top' | 'bottom';
+    /** Optional className override for the outer container. */
+    className?: string;
+}
+declare function MetricCard({ value, label, tone, icon, labelPosition, className, }: MetricCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ProgressBar — labeled fill bar.
+ *
+ * Promoted in ADR-020 (Phase 3a Discovery report generation, first
+ * committed consumer). Cross-batch consumers: Phase 8 (AI-suggest
+ * progress if surfaced), Phase 12 (generation step in wizard).
+ *
+ * Indeterminate variant for unknown-duration progress (animated
+ * stripe sweep); determinate variant for known-percent progress.
+ *
+ * Token discipline: all colors via public tokens.
+ */
+interface ProgressBarProps {
+    /** Optional label above the bar. */
+    label?: string;
+    /** 0-100 percent (determinate). Omit for indeterminate animation. */
+    percent?: number;
+    /** Optional secondary text shown right of the label. Often "X%" or a status message. */
+    status?: string;
+    /** Track height in px (default 8). */
+    height?: number;
+}
+declare function ProgressBar({ label, percent, status, height }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StepLoader — a sequential, multi-step loading indicator (3-5 steps). Each step
+ * dwells for a believable duration, then the next begins (completed → check, current
+ * → spinner, pending → dot), connected by a vertical rail.
+ *
+ * The defining behavior: the FINAL step is HELD until the real work reports `done`
+ * AND a minimum dwell has elapsed — so a backend that returns faster than usual still
+ * plays the full, believable sequence instead of snapping away. Non-final steps always
+ * advance on their own timers (independent of `done`).
+ *
+ *   <StepLoader steps={[...]} done={isReady} onComplete={() => show()} />
+ */
+interface StepLoaderStep {
+    label: string;
+    /** Override the default dwell for this step (ms). */
+    durationMs?: number;
+}
+interface StepLoaderProps {
+    /** The ordered steps (3-5). Strings use the default dwell. */
+    steps: ReadonlyArray<string | StepLoaderStep>;
+    /** The real work finished — gates completion of the FINAL step only. */
+    done?: boolean;
+    /** Fired once the sequence has played out AND `done` is true (+ `minLastStepMs`). */
+    onComplete?: () => void;
+    /** Default per-step dwell (ms) for steps without an explicit duration. */
+    defaultStepMs?: number;
+    /** Minimum time the final step stays before completing — keeps a fast result believable. */
+    minLastStepMs?: number;
+    className?: string;
+}
+declare function StepLoader({ steps, done, onComplete, defaultStepMs, minLastStepMs, className, }: StepLoaderProps): react_jsx_runtime.JSX.Element;
+
+type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
+interface BadgeProps {
+    tone: BadgeTone;
+    children: ReactNode;
+    /** Optional leading icon — sized 12-14px expected. */
+    icon?: ReactNode;
+    /** Leading status dot in the tone color (gray-ui chip style). Ignored
+     * when `icon` is provided. */
+    dot?: boolean;
+    /** Size variant. `sm` = compact (10px), `md` = default (11px),
+     * `lg` = roomier category-chip (12px, taller). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Extra classes merged onto the outer span (no longer replaces base). */
+    className?: string;
+}
+declare function Badge({ tone, children, icon, dot, size, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface TokenBadgeProps {
+    /** Public token name to tint from, e.g. `--folder-teal`, `--accent`,
+     *  `--success`. Must include the leading `--`. */
+    colorVar: string;
+    children: ReactNode;
+    /** `soft` = tinted fill (default). `outline` = transparent fill + tinted
+     *  border. */
+    variant?: 'soft' | 'outline';
+    /** Optional leading status dot in the token color. Ignored when `icon` set. */
+    dot?: boolean;
+    /** Optional leading icon (12–14px expected). */
+    icon?: ReactNode;
+    /** `sm` (10px) · `md` (11px, default) · `lg` (12px, taller). */
+    size?: 'sm' | 'md' | 'lg';
+    /** Pill (`full`) vs squared category tag (`tag`, default). */
+    shape?: 'tag' | 'pill';
+    /** Uppercase + wider tracking for short category codes (PRG, YT…). */
+    uppercase?: boolean;
+    className?: string;
+}
+declare function TokenBadge({ colorVar, children, variant, dot, icon, size, shape, uppercase, className, }: TokenBadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AllocationSparkbar — a compact per-period bar strip.
+ *
+ * New in ADR-123 (Budget Flighting redesign). Renders one bar per period
+ * (month), height proportional to the value; a zero/paused period renders
+ * short + dashed in a muted tone. Each bar can tint from its own token (e.g. a
+ * flight-group color), falling back to `baseColorVar`. Optional single-letter
+ * labels sit under each bar.
+ *
+ * Token discipline: colors come only from public token *names* via
+ * `rgb(var(--token) / a)`. No literals. Layout sizes use the spacing scale.
+ */
+interface AllocationSparkbarProps {
+    /** Per-period amounts. A value of 0 is treated as paused (short + dashed). */
+    values: number[];
+    /** Base token name for normal bars, e.g. `--folder-teal`. Includes `--`. */
+    baseColorVar: string;
+    /** Optional per-period token name (e.g. a flight-group color). `null`/
+     *  `undefined` falls back to `baseColorVar`. Length should match `values`. */
+    colorVars?: (string | null | undefined)[];
+    /** Optional short labels under each bar (e.g. `['J','F','M']`). */
+    labels?: string[];
+    /** Optional per-bar tooltip text (native `title`). */
+    titles?: string[];
+    /** Strip height in px. Default 36. */
+    height?: number;
+    className?: string;
+}
+declare function AllocationSparkbar({ values, baseColorVar, colorVars, labels, titles, height, className, }: AllocationSparkbarProps): react_jsx_runtime.JSX.Element;
+
+type FloatingStatusTone = 'neutral' | 'accent' | 'success' | 'warning' | 'destructive' | 'info';
+interface FloatingStatusBarProps {
+    /** Tone for the status dot + label color. */
+    tone: FloatingStatusTone;
+    /** Primary status label (tone-colored, bold). */
+    label: ReactNode;
+    /** Optional muted text after the label (e.g. a percentage). */
+    meta?: ReactNode;
+    /** Optional summary node shown after a vertical divider (e.g. `$X → $Y`). */
+    summary?: ReactNode;
+    /** Optional single action element (typically a secondary Button). */
+    action?: ReactNode;
+    /** Override the fixed positioning (e.g. to embed in a story). Default fixed
+     *  bottom-center. */
+    className?: string;
+}
+declare function FloatingStatusBar({ tone, label, meta, summary, action, className, }: FloatingStatusBarProps): react_jsx_runtime.JSX.Element;
+
+interface StatsGridProps {
+    children: ReactNode;
+    /** Minimum column width in px (controls how many cards per row at a
+     *  given viewport). Default 220 — comfortable for 4-up at md+. */
+    minColumnWidth?: number;
+    /** Optional className override for the outer container. */
+    className?: string;
+}
+declare function StatsGrid({ children, minColumnWidth, className, }: StatsGridProps): react_jsx_runtime.JSX.Element;
+
+interface Column<T> {
+    /** Unique id; doubles as the sort key. Use a `keyof T` string or
+     *  an arbitrary string if `sortValue` is provided. */
+    id: string;
+    label: string;
+    /** How to render a cell for a row. */
+    accessor: (row: T) => ReactNode;
+    /** Optional explicit value used for sorting (defaults to the
+     *  accessor's stringified output for sort comparison). */
+    sortValue?: (row: T) => string | number | null | undefined;
+    sortable?: boolean;
+    /** Right-align + tabular-nums for numeric columns. Default false. */
+    numeric?: boolean;
+    /** Header tooltip text. */
+    tooltip?: string;
+    /** Width as a CSS value (e.g. `120px` or `20%`). */
+    width?: string;
+}
+interface SortableTableProps<T> {
+    columns: Column<T>[];
+    rows: T[];
+    /** Function returning a stable React key for each row. */
+    rowKey: (row: T) => string;
+    /** Initial sort. */
+    initialSort?: {
+        columnId: string;
+        dir: 'asc' | 'desc';
+    };
+    /** Row click handler. */
+    onRowClick?: (row: T) => void;
+    /** Rendered when rows.length === 0. */
+    emptyState?: ReactNode;
+    /** Zebra stripe alternating rows. Default true. */
+    zebra?: boolean;
+    /** Compact density (smaller padding). Default false. */
+    compact?: boolean;
+}
+declare function SortableTable<T>({ columns, rows, rowKey, initialSort, onRowClick, emptyState, zebra, compact, }: SortableTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pagination — "Showing X-Y of Z" + prev/next buttons.
+ *
+ * Promoted in ADR-022 (Phase 3c Discovery reports table, first
+ * committed consumer). Cross-batch consumers: Phase 3b contacts
+ * (when >50), Phase 8 keywords table, Phase 12 SEMSpec keywords tab.
+ *
+ * Stateless — parent owns currentPage state and provides onPageChange.
+ *
+ * Token discipline: all colors via public tokens.
+ */
+interface PaginationProps {
+    /** 1-indexed current page. */
+    currentPage: number;
+    /** Items per page. */
+    pageSize: number;
+    /** Total item count across all pages. */
+    totalItems: number;
+    onPageChange: (page: number) => void;
+}
+declare function Pagination({ currentPage, pageSize, totalItems, onPageChange, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+interface Tab {
+    id: string;
+    label: string;
+    /** Optional Lucide icon (h-3.5 w-3.5 to h-4 w-4 expected). */
+    icon?: ReactNode;
+    /** Optional count badge rendered after the label. */
+    count?: number;
+    disabled?: boolean;
+}
+interface TabsProps {
+    tabs: Tab[];
+    activeTabId: string;
+    onTabChange: (id: string) => void;
+    /** Compact (12px label) or default (13px). */
+    size?: 'sm' | 'md';
+    /** Underline (default) or pill active-state. */
+    variant?: 'underline' | 'pill';
+    /** Stretch the tablist to full width with equal-width, centred tabs. */
+    stretch?: boolean;
+    className?: string;
+}
+declare function Tabs({ tabs, activeTabId, onTabChange, size, variant, stretch, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface PillButtonProps {
+    active: boolean;
+    onClick: () => void;
+    children: ReactNode;
+    /** Size variant. `sm` = compact (12px), `md` = default (13px). */
+    size?: 'sm' | 'md';
+    /** Optional active-state tone. Default = accent. */
+    tone?: BadgeTone;
+    /** Optional leading icon (12-14px). */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+declare function PillButton({ active, onClick, children, size, tone, icon, disabled, }: PillButtonProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'checked'> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type Align = 'start' | 'center' | 'end';
+type Side = 'top' | 'bottom';
+interface DropdownMenuProps {
+    /** Controlled open state. Omit for internal state. */
+    open?: boolean;
+    /** Fires whenever open transitions. */
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    children: ReactNode;
+}
+declare function DropdownMenu({ open: controlledOpen, onOpenChange, defaultOpen, children, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Skip the default secondary-Button styling. Useful when wrapping
+     * an existing Button primitive. */
+    unstyled?: boolean;
+}
+/**
+ * Default trigger styled per ADR-026 D4 (DQ-4) — inherits the
+ * secondary Button visual (rounded-xl + `--bg-card` fill + 1px
+ * `--border`). Set `unstyled` to wrap your own button shape.
+ */
+declare function DropdownMenuTrigger({ unstyled, className, onClick, children, ...rest }: DropdownMenuTriggerProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children: ReactNode;
+    /** Horizontal alignment relative to the trigger. Default `start`. */
+    align?: Align;
+    /** Pixel offset along the alignment axis. Default 0. */
+    alignOffset?: number;
+    /** Place above (`top`) or below (`bottom`) the trigger. Default `bottom`. */
+    side?: Side;
+    /** Pixel offset along the side axis. Default 6. */
+    sideOffset?: number;
+}
+declare function DropdownMenuContent({ children, align, alignOffset, side, sideOffset, className, style, ...rest }: DropdownMenuContentProps): react.ReactPortal | null;
+interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'destructive';
+    /** Pad-left compensation so items with no leading icon align with
+     * items that have one. */
+    inset?: boolean;
+}
+declare function DropdownMenuItem({ variant, inset, className, onClick, children, ...rest }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+interface DropdownMenuCheckboxItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare function DropdownMenuCheckboxItem({ checked, onCheckedChange, className, children, onClick, disabled, ...rest }: DropdownMenuCheckboxItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface DropdownMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+    inset?: boolean;
+}
+declare function DropdownMenuLabel({ inset, className, ...rest }: DropdownMenuLabelProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+/**
+ * DataGrid public types.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/types.ts
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_AS_IS per ADR-025 bucket table — surface API unchanged from
+ * source so the source repo's docs still apply.
+ */
+
+type DataGridIcon = ComponentType<{
+    className?: string;
+}>;
+type DataGridRowBase = {
+    id: string;
+};
+type DataGridColumn<ColumnId extends string> = {
+    id: ColumnId;
+    label: string;
+    icon: DataGridIcon;
+    defaultWidth: number;
+    minWidth?: number;
+    /** Per-column sort opt-out (ADR-027). Defaults to true when DataGrid's
+     * `onSortChange` is provided; false when not. Set explicitly to disable
+     * sorting for columns that don't have a meaningful comparator. */
+    sortable?: boolean;
+    /** Pin this column to the left or right edge so it stays visible while
+     * the grid scrolls horizontally. Pinned columns render opaque with a
+     * soft scroll-shadow on their inner edge. Place left-pinned columns
+     * first and right-pinned columns last. The built-in select column is
+     * always pinned left. */
+    pin?: 'left' | 'right';
+};
+/** Row-sort state (ADR-027). DataGrid renders the chevron + ARIA per
+ * this state but does NOT sort rows itself — parent passes pre-sorted
+ * `rows`. */
+type DataGridSortState<ColumnId extends string> = {
+    columnId: ColumnId;
+    dir: 'asc' | 'desc';
+};
+type DataGridDrawerPanelProps<Row, ColumnId extends string> = {
+    drawerRow: Row | null;
+    drawerRowIndex: number;
+    drawerRowCount: number;
+    drawerColumn: DataGridColumn<ColumnId> | null;
+    drawerCellValue: ReactNode;
+    getRowLabel: (row: Row) => string;
+    isEditableColumn: (columnId: ColumnId) => boolean;
+    isEmptyValue: (value: ReactNode) => boolean;
+    updateRow: (rowId: string, updater: (row: Row) => Row) => void;
+    openPreviousRow: () => void;
+    openNextRow: () => void;
+    closeDrawer: () => void;
+    /** Whether the drawer should be visible. The default <DrawerPanel>
+     * reads this to drive its <FloatingDrawer isOpen> binding; consumer
+     * render-overrides may use it the same way. Added in the workspace
+     * port (DEVIATION-5) to remove the `@base-ui/react` context coupling
+     * the source relied on. */
+    isOpen: boolean;
+};
+type DataGridToolbarRenderProps<ColumnId extends string> = {
+    visibleRowCount: number;
+    selectedRowIds: string[];
+    selectedRowCount: number;
+    allVisibleRowsSelected: boolean;
+    someVisibleRowsSelected: boolean;
+    onToggleAllRows: (checked: boolean) => void;
+    clearSelection: () => void;
+    showSummaries: boolean;
+    onShowSummariesChange: (next: boolean) => void;
+    visibleColumns: DataGridColumn<ColumnId>[];
+    visibleColumnIds: ColumnId[];
+    hiddenColumns: DataGridColumn<ColumnId>[];
+    toggleColumnVisibility: (columnId: ColumnId, visible: boolean) => void;
+    optionsSensors: NonNullable<ComponentProps<typeof DndContext>['sensors']>;
+    onOptionColumnDragEnd: (event: DragEndEvent) => void;
+    optionsDndContextId: string;
+};
+type DataGridProps<Row extends DataGridRowBase, ColumnId extends string> = {
+    rows: Row[];
+    columns: DataGridColumn<ColumnId>[];
+    getRowLabel: (row: Row) => string;
+    renderCell: (row: Row, column: DataGridColumn<ColumnId>) => ReactNode;
+    isEditableColumn: (columnId: ColumnId) => boolean;
+    getCellEditValue: (row: Row, columnId: ColumnId) => string;
+    applyCellEdit: (row: Row, columnId: ColumnId, nextValue: string) => Row;
+    getDrawerCellValue: (row: Row, columnId: ColumnId) => ReactNode;
+    canOpenDrawer?: (columnId: ColumnId) => boolean;
+    renderSummary?: (column: DataGridColumn<ColumnId>, visibleRows: Row[]) => ReactNode;
+    renderDrawerPanel?: (props: DataGridDrawerPanelProps<Row, ColumnId>) => ReactNode;
+    renderToolbar?: (props: DataGridToolbarRenderProps<ColumnId>) => ReactNode;
+    onToolbarPropsChange?: (props: DataGridToolbarRenderProps<ColumnId>) => void;
+    onOpenDrawerCell?: (cell: EditingCell<ColumnId>) => void;
+    /** Drawer renders in modal mode (backdrop + Esc + scroll lock).
+     * Defaults to `false` per the source's contextless API. */
+    drawerModal?: boolean;
+    /** Pixel width of the drawer panel; passed through to FloatingDrawer.
+     * Defaults to 520 (the FloatingDrawer side="right" default). */
+    drawerSize?: number;
+    stickySummaryFooter?: boolean;
+    /** Keep the header row pinned to the top while the body scrolls. Renders
+     * opaque with a scroll-shadow once scrolled. Default false. */
+    stickyHeader?: boolean;
+    /** Stretch the table to fill its container width via a trailing flex
+     * "spacer" column that absorbs leftover space — real columns keep their
+     * exact widths, so column resize stays independent. When the columns
+     * outgrow the viewport the spacer collapses to 0 and the grid scrolls.
+     * Default false. */
+    fillWidth?: boolean;
+    fillAvailableHeight?: boolean;
+    tableContainerClassName?: string;
+    onRowsChange?: (rows: Row[]) => void;
+    /** Currently-sorted column + direction (ADR-027). Parent owns the
+     * state and passes pre-sorted `rows`. When `null` or omitted, no
+     * chevron renders (all columns show the unsorted indicator). */
+    sort?: DataGridSortState<ColumnId> | null;
+    /** Header click handler (ADR-027). Receives the clicked column id;
+     * parent decides next direction (typical: toggle if same column,
+     * else default to 'asc'). When omitted, headers are non-interactive
+     * for sort purposes. Drag-to-reorder still works. */
+    onSortChange?: (columnId: ColumnId) => void;
+};
+type EditingCell<ColumnId extends string> = {
+    rowId: string;
+    columnId: ColumnId;
+    originRect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+
+declare function DataGrid<Row extends DataGridRowBase, ColumnId extends string>({ rows, columns, getRowLabel, renderCell, isEditableColumn, getCellEditValue, applyCellEdit, getDrawerCellValue, canOpenDrawer, renderSummary, renderDrawerPanel, renderToolbar, onToolbarPropsChange, onOpenDrawerCell, drawerModal, drawerSize, stickySummaryFooter, stickyHeader, fillWidth, fillAvailableHeight, tableContainerClassName, onRowsChange, sort, onSortChange, }: DataGridProps<Row, ColumnId>): react_jsx_runtime.JSX.Element;
+
+interface DataGridToolbarProps {
+    /** Left slot — typically a <SearchBar>. Stretches up to a comfortable
+     * reading width, full-width when stacked. */
+    search?: ReactNode;
+    /** Right slot — filter / columns / view-toggle controls. */
+    children?: ReactNode;
+    className?: string;
+}
+declare function DataGridToolbar({ search, children, className, }: DataGridToolbarProps): react_jsx_runtime.JSX.Element;
+
+type DataGridColumnOptionsMenuProps<ColumnId extends string> = Pick<DataGridToolbarRenderProps<ColumnId>, 'showSummaries' | 'onShowSummariesChange' | 'visibleColumns' | 'visibleColumnIds' | 'hiddenColumns' | 'toggleColumnVisibility' | 'optionsSensors' | 'onOptionColumnDragEnd' | 'optionsDndContextId'> & {
+    triggerLabel?: string;
+};
+declare function DataGridColumnOptionsMenu<ColumnId extends string>({ showSummaries, onShowSummariesChange, visibleColumns, visibleColumnIds, hiddenColumns, toggleColumnVisibility, optionsSensors, onOptionColumnDragEnd, optionsDndContextId, triggerLabel, }: DataGridColumnOptionsMenuProps<ColumnId>): react_jsx_runtime.JSX.Element;
+
+type DataGridDragOverlayProps<ColumnId extends string> = {
+    dragOverlayColumn: DataGridColumn<ColumnId> | null;
+    columnWidths: Record<ColumnId, number>;
+    dragOverlayHeight: number;
+};
+declare function DataGridDragOverlay<ColumnId extends string>({ dragOverlayColumn, columnWidths, dragOverlayHeight, }: DataGridDragOverlayProps<ColumnId>): react_jsx_runtime.JSX.Element | null;
+type DataGridDropIndicatorProps = {
+    dropIndicatorLeft: number | null;
+    dragTableRect: {
+        top: number;
+        height: number;
+    } | null;
+};
+declare function DataGridDropIndicator({ dropIndicatorLeft, dragTableRect, }: DataGridDropIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
+interface DropdownButtonItem {
+    /** Stable id for keying. If omitted, the index is used (avoid for
+     *  long lists where order can change). */
+    id?: string;
+    /** Icon shown in the leading tile (Lucide or any ReactNode). */
+    icon?: ReactNode;
+    /** Primary label of the item. */
+    label: string;
+    /** Optional helper text rendered below the label. */
+    description?: string;
+    /** Visual variant — `default` or `destructive`. */
+    variant?: 'default' | 'destructive';
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface DropdownButtonProps {
+    /** Trigger label (e.g., "New Keyword Plan"). */
+    label: string;
+    /** Trigger variant — defaults to primary to match the screenshot. */
+    variant?: ButtonVariant;
+    /** Trigger size — passes through to the .btn size class. */
+    size?: ButtonSize;
+    /** Optional leading icon on the trigger (e.g., a `+`). */
+    leadingIcon?: ReactNode;
+    /** Override the default chevron-down trailing icon if needed. */
+    trailingIcon?: ReactNode;
+    /** Menu items rendered in order. */
+    items: DropdownButtonItem[];
+    /** Disable the trigger entirely. */
+    disabled?: boolean;
+    /** Show the .is-loading state on the trigger. */
+    loading?: boolean;
+    /** Forwarded to the trigger's className for layout overrides. */
+    className?: string;
+    /** Popover alignment relative to the trigger. Default `end`
+     *  (right-aligned) to match the reference screenshot. */
+    align?: DropdownMenuContentProps['align'];
+    /** Popover side — `top` or `bottom`. Default `bottom`. */
+    side?: DropdownMenuContentProps['side'];
+    /** Popover gap from the trigger. Default 6. */
+    sideOffset?: DropdownMenuContentProps['sideOffset'];
+    /** Constrain the popover width. Default `min(20rem, calc(100vw-16px))`. */
+    menuWidth?: string;
+    /** Optional aria-label for the trigger if the visible label is
+     *  ambiguous (e.g., icon-only triggers). */
+    triggerAriaLabel?: string;
+    /** Optional id of the currently-active item. When set, that item
+     *  renders a trailing check mark — turns the DropdownButton into a
+     *  single-select filter/picker. */
+    activeId?: string;
+    /** When true, the trigger gets an accent-tinted treatment — signals
+     *  an engaged filter. Pair with `activeId` for filter-chip use. */
+    active?: boolean;
+}
+declare function DropdownButton({ label, variant, size, leadingIcon, trailingIcon, items, disabled, loading, className, align, side, sideOffset, menuWidth, triggerAriaLabel, activeId, active, }: DropdownButtonProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionProps {
+    /** Ids of the currently-open sections. */
+    openIds: string[];
+    /** Fired with a section id when its header is clicked. */
+    onToggle: (id: string) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function Accordion({ openIds, onToggle, children, className }: AccordionProps): react_jsx_runtime.JSX.Element;
+interface AccordionSectionProps {
+    /** Stable id — matched against the Accordion's `openIds`. */
+    id: string;
+    title: string;
+    /** Muted one-line summary under the title. */
+    summary?: ReactNode;
+    /** Optional node right of the title — e.g. a "New" <Badge>. */
+    badge?: ReactNode;
+    /** When true the leading indicator is an accent filled check;
+     *  otherwise an empty ring. */
+    complete?: boolean;
+    children: ReactNode;
+}
+declare function AccordionSection({ id, title, summary, badge, complete, children, }: AccordionSectionProps): react_jsx_runtime.JSX.Element;
+declare const AccordionCompound: typeof Accordion & {
+    Section: typeof AccordionSection;
+};
+
+interface MenuButtonItem {
+    /** Stable id for keying. Falls back to the index. */
+    id?: string;
+    /** Optional leading icon (Lucide or any ReactNode), sized ~14px. */
+    icon?: ReactNode;
+    /** Primary label. */
+    label: string;
+    /** Optional right-aligned shortcut hint, e.g. "⌘C". */
+    shortcut?: string;
+    /** Visual variant. `destructive` tints the row red. */
+    variant?: 'default' | 'destructive';
+    disabled?: boolean;
+    onSelect: () => void;
+}
+/** A divider between menu items. */
+interface MenuButtonSeparator {
+    type: 'separator';
+}
+type MenuButtonEntry = MenuButtonItem | MenuButtonSeparator;
+interface MenuButtonProps {
+    /** Trigger label — e.g. "File", "Edit". */
+    label: string;
+    /** Menu entries, in order. */
+    items: MenuButtonEntry[];
+    /** Optional leading icon on the trigger. */
+    leadingIcon?: ReactNode;
+    /** Disable the trigger entirely. */
+    disabled?: boolean;
+    /** Popover alignment relative to the trigger. Default `start`. */
+    align?: DropdownMenuContentProps['align'];
+    /** Popover width. Default `14rem`. */
+    menuWidth?: string;
+    /** Forwarded to the trigger className for layout overrides. */
+    className?: string;
+    /** aria-label for the trigger when the visible label is ambiguous. */
+    triggerAriaLabel?: string;
+}
+declare function MenuButton({ label, items, leadingIcon, disabled, align, menuWidth, className, triggerAriaLabel, }: MenuButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CopyField — an input/output field with a copy button pinned to the
+ * top-right corner.
+ *
+ * The workbench input/output pattern from the tool prototypes: a single
+ * field a user types into and that a transform writes its result back
+ * into ("output replaces input"), with a one-click copy affordance
+ * always in reach.
+ *
+ * Wraps <Textarea> (`multiline`, the default) or <Input>. Owns the copy
+ * interaction end-to-end — clipboard write, a transient ✓ confirmation,
+ * and a success/error toast. The field content is right-padded so text
+ * never slides under the button.
+ *
+ * CopyField does NOT render a char/line count — that is caller state;
+ * render it in the surrounding footer.
+ *
+ * Workspace ADR: ADR-031 Decision 2.
+ */
+interface CopyFieldProps {
+    /** Field value (controlled). */
+    value: string;
+    /** Change handler. Omit for a read-only output field. */
+    onChange?: (value: string) => void;
+    /** Multi-line textarea (default) or single-line input. */
+    multiline?: boolean;
+    /** Textarea row count. Ignored when `multiline` is false. */
+    rows?: number;
+    placeholder?: string;
+    readOnly?: boolean;
+    /** Visible field label — wires `<label htmlFor>`. */
+    label?: string;
+    /** Keep the label for assistive tech but hide it visually. */
+    hideLabel?: boolean;
+    /** Field id. Auto-generated when omitted. */
+    id?: string;
+    /** Toast message on a successful copy. */
+    copyToastMessage?: string;
+    className?: string;
+}
+declare function CopyField({ value, onChange, multiline, rows, placeholder, readOnly, label, hideLabel, id, copyToastMessage, className, }: CopyFieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TagChipInput — type-to-create chips with autocomplete.
+ *
+ * Behavior:
+ *   • Comma or Enter commits the current draft into a chip.
+ *   • Backspace on an empty input removes the last chip.
+ *   • Autocomplete suggestions surface as a popover; filtered by the
+ *     current draft (case-insensitive). Click or arrow-keys + Enter to
+ *     pick a suggestion.
+ *   • Tags are case-insensitively deduped; the displayed label preserves
+ *     the user's first casing per session.
+ *   • Submitting a new label (not in suggestions) creates it inline.
+ *
+ * Token discipline:
+ *   • Chips inherit Badge tones via tokens.
+ *   • Popover uses --popover / --popover-foreground / --shadow-lg.
+ *   • No hex, no inline SVG outside Lucide.
+ *
+ * First consumer: Keywords lens (NewSetPage, NewGroupPage). Generic —
+ * promote anywhere a multi-tag input is needed.
+ */
+interface TagChipInputProps {
+    /** Current list of tag labels. */
+    value: string[];
+    onChange: (next: string[]) => void;
+    /** Existing labels (across all items in scope) used for autocomplete. */
+    suggestions?: string[];
+    placeholder?: string;
+    /** Hard cap on the number of chips. When reached, the input becomes
+     *  disabled with a "max reached" hint. */
+    max?: number;
+    /** Maximum length of any single tag. Defaults to 60. */
+    maxLength?: number;
+    /** Disable input + interactions. */
+    disabled?: boolean;
+    /** id attached to the text input — for label-for binding. */
+    id?: string;
+    /** Apply error styling. */
+    error?: boolean;
+    className?: string;
+}
+declare function TagChipInput({ value, onChange, suggestions, placeholder, max, maxLength, disabled, id, error, className, }: TagChipInputProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * FolderTreePicker — dropdown picker for a nestable folder tree.
+ *
+ * Behavior:
+ *   • Trigger renders the selected folder's name (with parent breadcrumb
+ *     when nested) or a placeholder when none.
+ *   • Popover shows a "(No folder)" option + DFS-ordered tree with
+ *     indent by depth.
+ *   • Optional inline "+ New folder" path — when the consumer passes
+ *     `onCreateFolder`, the popover footer exposes a create form whose
+ *     parent defaults to the currently selected folder (or root).
+ *
+ * Generic — accepts a `folders: Array<{ id, name, parentId }>` shape so
+ * any folder-like data structure can use it. First consumer: Keywords
+ * lens NewSetPage / NewGroupPage.
+ *
+ * Token discipline: tokens only (no hex). Trigger inherits the same
+ * `.btn .btn-secondary` chrome as our other dropdown triggers for
+ * visual consistency.
+ */
+interface FolderTreeNode {
+    id: string;
+    name: string;
+    parentId: string | null;
+}
+interface FolderTreePickerProps {
+    /** Flat list of folder nodes (parentId references id). */
+    folders: FolderTreeNode[];
+    /** Currently selected folder id, or null for "no folder" / root. */
+    value: string | null;
+    onChange: (next: string | null) => void;
+    /** Optional inline-create handler. When omitted, the create UI is
+     *  hidden — the picker is read-only over the given folders. The
+     *  returned id is selected on success. */
+    onCreateFolder?: (input: {
+        name: string;
+        parentId: string | null;
+    }) => Promise<{
+        id: string;
+    }>;
+    /** Placeholder when no folder is selected. */
+    placeholder?: string;
+    /** Disable everything. */
+    disabled?: boolean;
+    /** id for the trigger — supports label-for binding. */
+    id?: string;
+    /** Optional className for the trigger button. */
+    className?: string;
+    /** Apply error styling to the trigger. */
+    error?: boolean;
+}
+declare function FolderTreePicker({ folders, value, onChange, onCreateFolder, placeholder, disabled, id, className, error, }: FolderTreePickerProps): react_jsx_runtime.JSX.Element;
+
+interface HeroFormCardProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'title' | 'onSubmit'> {
+    /** Small accent text above the title, e.g. "Brand · Research". */
+    eyebrow?: ReactNode;
+    /** The page-level title. Required. */
+    title: ReactNode;
+    /** Supporting copy under the title. */
+    subtitle?: ReactNode;
+    /** Optional helper text rendered between the body and the footer
+     *  (centered, muted). Good for "Name is required · everything else
+     *  is optional" affordances. */
+    helperText?: ReactNode;
+    /** Body — typically composed of Section + Field. */
+    children: ReactNode;
+    /** Footer action cluster (right-aligned). */
+    footer?: ReactNode;
+    /** Container max-width in px (default 720). */
+    maxWidth?: number;
+    /** When true the wrapping element is a <form> with onSubmit attached
+     *  (default). When false, renders a <div> — useful when an outer form
+     *  owns submission. */
+    asForm?: boolean;
+    /** Form submit handler. Ignored when `asForm` is false. */
+    onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+    className?: string;
+}
+interface HeroFormCardSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Section heading. Optional — omit for an untitled body. */
+    title?: ReactNode;
+    /** Optional icon node (Lucide or custom). Sized by the consumer. */
+    icon?: ReactNode;
+    /** Optional supporting copy under the section title. */
+    description?: ReactNode;
+    /** Optional content rendered to the RIGHT of the section title row.
+     *  Good for inline helper text ("Name is required · everything else
+     *  is optional") or action chips. */
+    trailing?: ReactNode;
+    children: ReactNode;
+}
+declare function Section({ title, icon, description, trailing, children, className, ...rest }: HeroFormCardSectionProps): react_jsx_runtime.JSX.Element;
+interface HeroFormCardFieldProps {
+    /** Visible field label. */
+    label: ReactNode;
+    /** HTML id of the underlying control — wires <label htmlFor>. */
+    htmlFor?: string;
+    required?: boolean;
+    optional?: boolean;
+    /** Inline error string. Renders below the field. */
+    error?: string | null;
+    /** Optional helper hint below the field (when no error). */
+    hint?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare function Field({ label, htmlFor, required, optional, error, hint, children, className, }: HeroFormCardFieldProps): react_jsx_runtime.JSX.Element;
+declare function FieldRow({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface HeroFormCardBannerProps {
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Body content — text + optional inline marks. */
+    children: ReactNode;
+    /** Visual tone. Default `info`. */
+    tone?: 'info' | 'accent' | 'success' | 'warning' | 'destructive';
+    className?: string;
+}
+declare function Banner({ icon, children, tone, className, }: HeroFormCardBannerProps): react_jsx_runtime.JSX.Element;
+interface HeroFormCardAdvancedProps {
+    summary?: ReactNode;
+    /** Optional icon node next to the summary. */
+    icon?: ReactNode;
+    defaultOpen?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare function Advanced({ summary, icon, defaultOpen, children, className, }: HeroFormCardAdvancedProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const HeroFormCardCompound: react.ForwardRefExoticComponent<HeroFormCardProps & react.RefAttributes<HTMLFormElement>> & {
+    Section: typeof Section;
+    Field: typeof Field;
+    FieldRow: typeof FieldRow;
+    Banner: typeof Banner;
+    Advanced: typeof Advanced;
+    Footer: typeof Footer;
+};
+
+interface RangeSliderProps {
+    /** Lower bound of the track. */
+    min: number;
+    /** Upper bound of the track. */
+    max: number;
+    /** Current selection — `[low, high]`. Clamped within `[min, max]`. */
+    value: [number, number];
+    onChange: (next: [number, number]) => void;
+    /** Step granularity. Default 1. */
+    step?: number;
+    /** Optional label rendered above the track. */
+    label?: ReactNode;
+    /** Formats the two end values shown beside the label. Default
+     *  `toLocaleString`. */
+    formatValue?: (value: number) => string;
+    /** id base — the two range inputs get `${id}-min` / `${id}-max`. */
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function RangeSlider({ min, max, value, onChange, step, label, formatValue, id, disabled, className, }: RangeSliderProps): react_jsx_runtime.JSX.Element;
+
+interface SegmentedPillItem<Id extends string = string> {
+    id: Id;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Optional accessible label override for icon-heavy segments. */
+    ariaLabel?: string;
+}
+interface SegmentedPillProps<Id extends string = string> {
+    items: SegmentedPillItem<Id>[];
+    value: Id;
+    onChange: (next: Id) => void;
+    /** Accessible label for the whole group (rendered as aria-label on
+     *  the `role="tablist"` container). */
+    ariaLabel?: string;
+    /** Size variant — controls vertical padding + font. Default `md`.
+     *  `xs` is for dense inline contexts (e.g. a sort toggle inside a tab bar). */
+    size?: 'xs' | 'sm' | 'md';
+    /** Fill the available width and stretch segments. Default `true`. */
+    stretch?: boolean;
+    className?: string;
+}
+declare function SegmentedPill<Id extends string = string>({ items, value, onChange, ariaLabel, size, stretch, className, }: SegmentedPillProps<Id>): react_jsx_runtime.JSX.Element;
+
+interface ShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Max-width for the auto-centered page-level wrapper, in pixels.
+     *  Default 760 (tool-page width). New Set / similar form pages use
+     *  880. When `centered` is false, the value is ignored. */
+    maxWidth?: number;
+    /** When true (default), the frame is centered horizontally inside
+     *  its parent via `mx-auto` + `max-width`. Pass `false` if you need
+     *  the frame to fill its parent (e.g. inside a tight grid cell). */
+    centered?: boolean;
+}
+declare const ShellRoot: react.ForwardRefExoticComponent<ShellProps & react.RefAttributes<HTMLDivElement>>;
+interface ShellTrayProps extends HTMLAttributes<HTMLElement> {
+    /** Visual variant. `default` (white inner pane, used for primary
+     *  content) or `compact` (tighter padding for dense rows). */
+    variant?: 'default' | 'compact';
+}
+declare const Tray: react.ForwardRefExoticComponent<ShellTrayProps & react.RefAttributes<HTMLElement>>;
+interface ShellTrayHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: ReactNode;
+    /** Right-aligned meta — e.g. "12 lines · 3 dupes" or
+     *  "Name is required · everything else is optional". */
+    meta?: ReactNode;
+    /** Optional left-side numeral chip ("01", "02") in accent color.
+     *  Skip for tools that don't need step indication. */
+    index?: ReactNode;
+    /** Optional supporting copy beneath the title row. */
+    description?: ReactNode;
+    /** Tighter padding for dense layouts. */
+    compact?: boolean;
+}
+declare function TrayHeader({ title, meta, index, description, compact, className, style, ...rest }: ShellTrayHeaderProps): react_jsx_runtime.JSX.Element;
+interface ShellTrayBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Vertical gap between children. Default `form` (16px). `grid`
+     *  (14px) is for tighter sub-card grids. `flush` (0) lets the
+     *  consumer manage spacing entirely. */
+    spacing?: 'form' | 'grid' | 'flush';
+    /** Tighter padding for dense layouts. */
+    compact?: boolean;
+}
+declare function TrayBody({ spacing, compact, className, style, children, ...rest }: ShellTrayBodyProps): react_jsx_runtime.JSX.Element;
+interface ShellTrayFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tighter padding for dense layouts. */
+    compact?: boolean;
+    /** Left-aligned secondary controls (toggles, disclosure, etc.).
+     *  Renders inline before any extra children. */
+    left?: ReactNode;
+    /** Right-aligned primary action (button, link, etc.). Pushed to
+     *  the right edge via `margin-left: auto`. */
+    right?: ReactNode;
+}
+declare function TrayFooter({ compact, left, right, className, style, children, ...rest }: ShellTrayFooterProps): react_jsx_runtime.JSX.Element;
+interface ShellSubCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional header content rendered above the body. */
+    header?: ReactNode;
+}
+declare function SubCard({ header, className, style, children, ...rest }: ShellSubCardProps): react_jsx_runtime.JSX.Element;
+/** Value-text tone for <ShellStat>. Semantic tones map to the public
+ *  status tokens — handy for traffic-light KPIs (e.g. competition). */
+type ShellStatTone = 'default' | 'accent' | 'success' | 'warning' | 'destructive';
+interface ShellStatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** KPI name — rendered in the outer frame, above the tray. */
+    label: ReactNode;
+    /** The metric value — rendered large inside the inner white tray. */
+    value: ReactNode;
+    /** Optional icon shown beside the label in the frame. */
+    icon?: ReactNode;
+    /** Optional supporting text under the value (e.g. "+3 this week"). */
+    hint?: ReactNode;
+    /** Value text tone — `default`, `accent`, or a semantic status
+     *  color (`success` / `warning` / `destructive`). */
+    valueTone?: ShellStatTone;
+}
+declare function ShellStat({ label, value, icon, hint, valueTone, className, ...rest }: ShellStatProps): react_jsx_runtime.JSX.Element;
+type ShellComponent = typeof ShellRoot & {
+    Tray: typeof Tray;
+    TrayHeader: typeof TrayHeader;
+    TrayBody: typeof TrayBody;
+    TrayFooter: typeof TrayFooter;
+    SubCard: typeof SubCard;
+    Stat: typeof ShellStat;
+};
+declare const Shell: ShellComponent;
+
+type FolderColorKey = 'red' | 'amber' | 'emerald' | 'teal' | 'blue' | 'violet' | 'pink' | 'slate' | 'ink';
+/** All folder colour keys, in palette order — for swatch pickers. */
+declare const FOLDER_COLOR_KEYS: FolderColorKey[];
+/** Resolve a colour key to its `rgb(var(--folder-*))` CSS value. */
+declare function folderColorVar(key: FolderColorKey): string;
+interface FolderCardProps {
+    name: string;
+    colorKey: FolderColorKey;
+    assetCount: number;
+    /** Subfolder count — omitted or 0 → not shown. */
+    folderCount?: number;
+    selected?: boolean;
+    /** When true, a selection checkbox reveals on hover and stays
+     *  visible while selected. */
+    selectable?: boolean;
+    onOpen: () => void;
+    onSelect?: () => void;
+    /** Optional menu affordance (e.g. a kebab trigger), revealed on
+     *  hover at the row end. */
+    menuSlot?: ReactNode;
+    className?: string;
+}
+declare function FolderCard({ name, colorKey, assetCount, folderCount, selected, selectable, onOpen, onSelect, menuSlot, className, }: FolderCardProps): react_jsx_runtime.JSX.Element;
+
+interface BulkActionBarProps {
+    /** Selection count shown in the accent badge. */
+    count: number;
+    /** Optional summary string, e.g. "2 folders · 3 assets". When
+     *  omitted, a plain "<count> selected" label is shown. */
+    summary?: string;
+    /** Caller-owned action buttons (icon buttons or labelled Buttons). */
+    children: ReactNode;
+    onClear: () => void;
+}
+declare function BulkActionBar({ count, summary, children, onClear, }: BulkActionBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * FileUploadButton — paperclip trigger that opens a native file picker.
+ * Disables itself when the file limit is reached.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ */
+interface FileUploadButtonProps {
+    onFilesSelected: (files: File[]) => void;
+    disabled?: boolean;
+    fileCount?: number;
+    maxFiles?: number;
+}
+declare function FileUploadButton({ onFilesSelected, disabled, fileCount, maxFiles, }: FileUploadButtonProps): react_jsx_runtime.JSX.Element;
+
+interface FileDropZoneProps {
+    children: ReactNode;
+    onFilesDropped: (files: File[]) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare function FileDropZone({ children, onFilesDropped, disabled, className, }: FileDropZoneProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * useFileUpload — stateful file-selection, validation, text-extraction, and
+ * XHR upload hook with per-file progress tracking.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ *
+ * D14 fix: the original hook read `import.meta.env.VITE_API_URL` and
+ * hardcoded a fallback URL. A @lovett/ui primitive must not read env vars or
+ * embed URLs. Consumers pass `uploadUrl` (required) and optional `authHeaders`
+ * so the workspace `lib/api.ts` config can supply both without the primitive
+ * knowing anything about the deployment environment.
+ */
+interface UploadResult {
+    id: string;
+    filename: string;
+    fileType: string;
+    fileSize: number;
+    fileCategory: string;
+    publicUrl?: string;
+    status: string;
+}
+interface PendingFile {
+    id: string;
+    file: File;
+    progress: number;
+    status: 'pending' | 'uploading' | 'uploaded' | 'error';
+    error?: string;
+    previewUrl?: string;
+    extractedText?: string;
+    uploadResult?: UploadResult;
+}
+interface UseFileUploadOptions {
+    /**
+     * Absolute URL that accepts POST multipart/form-data uploads.
+     * Supplied by the consuming lens via `lib/api.ts` — never hardcoded here.
+     */
+    uploadUrl: string;
+    /**
+     * Optional HTTP headers forwarded with every XHR upload request
+     * (e.g. `{ Authorization: 'Bearer <token>' }`). Supplied by the
+     * consuming lens; the primitive never reads env vars or auth stores.
+     */
+    authHeaders?: Record<string, string>;
+    /** Conversation ID to associate uploads with an existing conversation. */
+    conversationId?: string | null | undefined;
+    /** Maximum number of files (default: 10). */
+    maxFiles?: number;
+    /** Maximum bytes per file (default: 20 MB). */
+    maxFileSize?: number;
+    /** Called when a file fails to upload. */
+    onError?: (error: Error) => void;
+}
+declare function useFileUpload({ uploadUrl, authHeaders, conversationId, maxFiles, maxFileSize, onError, }: UseFileUploadOptions): {
+    pendingFiles: PendingFile[];
+    addFiles: (files: File[]) => Promise<void>;
+    removeFile: (fileId: string) => void;
+    clearFiles: () => void;
+    getUploadedResults: () => UploadResult[];
+    isUploading: boolean;
+    hasFilesUploading: boolean;
+    hasUploadErrors: boolean;
+    allFilesUploaded: boolean;
+    totalProgress: number;
+    sessionId: string;
+};
+
+interface FilePreviewGridProps {
+    files: PendingFile[];
+    onRemove: (id: string) => void;
+    className?: string;
+}
+declare function FilePreviewGrid({ files, onRemove, className }: FilePreviewGridProps): react_jsx_runtime.JSX.Element | null;
+
+interface FilePreviewItemProps {
+    pendingFile: PendingFile;
+    onRemove: (id: string) => void;
+}
+declare function FilePreviewItem({ pendingFile, onRemove }: FilePreviewItemProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * FileThumbnail — icon-based preview tile for non-image files; renders the
+ * actual image for image files when a preview URL is available.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ *
+ * Token-boundary note: the source used Tailwind color utilities (text-red-600,
+ * bg-blue-100, etc.) which are raw color literals. Rewritten to use inline
+ * style with CSS variables from the public token set where possible, and
+ * for the categorical file-type tints we use the --folder-* palette tokens
+ * (ADR-035) which are the closest semantic color set in the design system
+ * for categorical accent use.
+ */
+interface FileThumbnailProps {
+    file: File;
+    previewUrl?: string;
+    className?: string;
+}
+declare function FileThumbnail({ file, previewUrl, className }: FileThumbnailProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    /** Lowercased language identifier, e.g. "typescript" or "json". */
+    language?: string;
+    /** Raw source text. */
+    children: string;
+}
+declare function CodeBlock({ language, children }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+/**
+ * MarkdownCode — react-markdown code element adapter.
+ *
+ * Inline code (single backtick, no className) renders as a small chip.
+ * Fenced code (triple backtick, className="language-xxx") delegates to
+ * CodeBlock for syntax highlighting + copy button.
+ */
+declare function MarkdownCode({ className, children }: HTMLAttributes<HTMLElement>): react_jsx_runtime.JSX.Element;
+
+interface MarkdownRendererProps {
+    /** Raw markdown string to render. */
+    children: string;
+    /** Optional className applied to the wrapping div. */
+    className?: string;
+}
+/**
+ * MarkdownRenderer — drop-in markdown surface with GFM support.
+ * Renders headings, lists, code (via CodeBlock), tables, task lists,
+ * strikethrough, blockquotes, and links with workspace token styling.
+ */
+declare function MarkdownRenderer({ children, className }: MarkdownRendererProps): react_jsx_runtime.JSX.Element;
+
+interface ResizableHandleProps {
+    /** Which edge of the parent the handle decorates. */
+    side: 'left' | 'right' | 'top' | 'bottom';
+    /** Controlled width/height (px). */
+    value: number;
+    /** Called on every animation-frame-throttled pointermove during drag. */
+    onChange: (next: number) => void;
+    /** Called once on pointerup with the final value. Use for persistence. */
+    onCommit?: (final: number) => void;
+    /** Lower bound (px). */
+    min: number;
+    /** Upper bound (px). */
+    max: number;
+    /** Double-click / Home target. Defaults to `(min + max) / 2`. */
+    defaultValue?: number;
+    /** Keyboard nudge step (px). Default 16. */
+    step?: number;
+    /** ARIA label for the splitter. Required. */
+    'aria-label': string;
+    /** Disable all interaction. Used by the sidebar's hover-out mode. */
+    disabled?: boolean;
+    className?: string;
+}
+declare function ResizableHandle({ side, value, onChange, onCommit, min, max, defaultValue, step, 'aria-label': ariaLabel, disabled, className, }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
+interface ResizablePaneProps extends ResizableHandleProps {
+    children: ReactNode;
+    paneClassName?: string;
+}
+declare function ResizablePane({ children, paneClassName, ...handleProps }: ResizablePaneProps): react_jsx_runtime.JSX.Element;
+
+interface KbdProps {
+    /** Child text — typically a single key glyph or short string. */
+    children: ReactNode;
+    /** Optional size — defaults to 'md'. */
+    size?: 'sm' | 'md';
+}
+declare function Kbd({ children, size }: KbdProps): react_jsx_runtime.JSX.Element;
+
+interface FrameStackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual gap between child cards. Defaults to 10 px to match the
+     *  prototype's spec. Override only with a token value
+     *  (e.g. `'var(--space-3)'` for 12 px) — never a literal. */
+    gap?: string;
+}
+declare const FrameStack: react.ForwardRefExoticComponent<FrameStackProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CalculatorShellProps {
+    /** Display title (e.g. "ROAS Calculator"). Rendered as H1 + last
+     *  crumb in <PageShell>. */
+    title: string;
+    /** One-line subtitle below the title. Optional — describes what the
+     *  calculator computes. */
+    subtitle?: string;
+    /** Form inputs slot. Typically a vertical stack of @lovett/ui
+     *  <Input> primitives wrapped in <label>s with `type="number"`. */
+    inputs: ReactNode;
+    /** Headline result value — large, accent-tinted, tabular-nums. Pass
+     *  the FORMATTED string (use `formatCurrency` / `formatPercent` /
+     *  `formatRatio` / `formatNumber`). NaN inputs surface as `'—'`. */
+    result: ReactNode;
+    /** Optional formula label (e.g. "ROAS = Revenue ÷ Ad Spend"). Small,
+     *  dim, monospace-feel. Render as a <code> node so monospace +
+     *  semantics carry. */
+    formula?: ReactNode;
+    /** Optional row of secondary derived stats (smaller, dim). Pass a
+     *  node containing 1-3 stat tiles or a single inline span. */
+    secondaryStats?: ReactNode;
+    /** Optional reset to defaults. Renders a secondary "Reset" button
+     *  when provided. */
+    onReset?: () => void;
+    /** Optional copy-result value (the formatted result string). Renders
+     *  a "Copy result" secondary button when provided. The value is
+     *  written to the clipboard on click; the button flashes a checkmark
+     *  + emits a success toast on success. Pass `undefined` to omit the
+     *  button — typically when the underlying number is NaN. */
+    copyValue?: string | undefined;
+    /** Optional share-link URL — full or path. When provided, renders a
+     *  "Copy link" secondary button; click writes the URL to the
+     *  clipboard. (No tinyURL-style encoding here — the consumer
+     *  pre-builds the URL with encoded inputs.) */
+    shareUrl?: string | undefined;
+}
+/**
+ * CalculatorShell — the layout primitive. See file-level JSDoc for the
+ * locked layout / interaction / token rules.
+ */
+declare function CalculatorShell({ title, subtitle, inputs, result, formula, secondaryStats, onReset, copyValue, shareUrl, }: CalculatorShellProps): react_jsx_runtime.JSX.Element;
+
+type CalcLayout = 'shell' | 'open';
+/**
+ * Brand-profile prefill source (ADR-076 D9). Typed now so the data
+ * connection is a later drop-in, not a refactor.
+ *
+ * TODO(data-layer): source = useActiveBrandProfile().brand — prefill
+ *   audience / CPM / etc. from the active brand (canonical brn_ id).
+ */
+interface CalcPrefill {
+    source: 'none' | 'brand';
+    values?: Record<string, number>;
+}
+interface CalculatorShellV2Props {
+    /** Mono uppercase eyebrow (e.g. "Streaming TV · Reality Check"). */
+    eyebrow: string;
+    /** Uppercase title. The last whitespace-delimited word renders in
+     *  `--accent`; a single word renders entirely in accent. Pass a
+     *  `[lead, accentWord]` tuple for explicit control (D4). */
+    title: string | [string, string];
+    /** Lucide glyph rendered red inside the header tile. */
+    icon: ReactNode;
+    /** Layout — `'shell'` (compact card) or `'open'` (long-form). */
+    layout?: CalcLayout;
+    /** One or more `<ProfileSection>` Frames composing the inputs. */
+    inputs: ReactNode;
+    /** A `<ProfileSection>` Frame wrapping the result block + StatRow. */
+    result: ReactNode;
+    /** Left-aligned muted footer note (also the data-mode signal, D9). */
+    footerNote: ReactNode;
+    /** Right-aligned footer actions (Reset / Save). The Copy action is
+     *  shell-owned via `copyReport` (Amendment 1 F) — do not pass a Copy
+     *  button here. */
+    actions?: ReactNode;
+    /** Assumptions content (Amendment 1 B): manual-vs-connected inputs, the
+     *  "directional planning math" disclaimer, and the config/formula version.
+     *  Rendered as a footer hover popover (not a body strip) so it never adds
+     *  shell height. Omitted when absent. */
+    assumptions?: ReactNode;
+    /** Structured mini-report for the shell-owned Copy action (Amendment 1
+     *  F). A string, or a function returning one (so it captures live state
+     *  at click time). When set, the shell renders a Copy button that writes
+     *  this to the clipboard. */
+    copyReport?: string | (() => string);
+    /** STUBBED (D9) — typed, not read this ADR. */
+    prefill?: CalcPrefill;
+    /** "vs. benchmark" rail. When absent, the shell renders a muted
+     *  "Benchmark unavailable in manual mode" placeholder (Amendment 1 E). */
+    benchmarkSlot?: ReactNode;
+}
+declare function CalculatorShellV2({ eyebrow, title, icon, layout, inputs, result, footerNote, actions, assumptions, copyReport, benchmarkSlot, }: CalculatorShellV2Props): react_jsx_runtime.JSX.Element;
+
+interface StatRowStep {
+    /** Lucide glyph (~16px). Inherits the dark-frame label colour. */
+    icon: ReactNode;
+    /** Uppercase metric label (rendered ~9.5px). */
+    label: string;
+    /** Pre-formatted figure. Rendered tabular-nums. */
+    value: string;
+    /** The single pivotal tile — rendered in `--accent` instead of
+     *  `--brand-ink`. At most one step should set this. */
+    pivotal?: boolean;
+}
+interface StatRowProps {
+    steps: StatRowStep[];
+    className?: string;
+}
+declare function StatRow({ steps, className }: StatRowProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Slider — single-value numeric slider (ADR-076 D8).
+ *
+ * Distinct from <RangeSlider>, which is dual-thumb (`value: [number,
+ * number]`) and cannot represent a single value. This is the control
+ * the Calculator Shell v2 frequency input uses: an accent fill from the
+ * track start to the current value, a `--bg-card` thumb with a 2px
+ * accent ring, and a transparent native `<input type="range">` overlaid
+ * for keyboard + accessibility (arrows / Home / End come free).
+ *
+ *   <Slider value={freq} min={1} max={10} step={0.5}
+ *           onChange={setFreq} aria-label="Target frequency" />
+ *
+ * Controlled — the parent owns `value`. Presentational otherwise.
+ */
+interface SliderProps {
+    value: number;
+    min: number;
+    max: number;
+    /** Step granularity. Default 1. */
+    step?: number;
+    onChange: (value: number) => void;
+    /** Accessible name for the native range input. */
+    'aria-label'?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function Slider({ value, min, max, step, onChange, 'aria-label': ariaLabel, disabled, className, }: SliderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Number-formatting helpers — small set of pure, zero-dep utilities
+ * shared by the `<CalculatorShell>` consumers (ROAS / ROI / CTR / CPC
+ * / CPM / Conversion Rate and the future ad-performance + customer/
+ * business calculators).
+ *
+ * Locked by ADR-030 D6 (the helpers' existence + signatures) and
+ * sharpened by ADR-058 D8 (re-exported from `@lovett/ui` alongside the
+ * promoted `<CalculatorShell>`). Implementation rules:
+ *
+ *   • Garbage in → `'—'` out. NaN, ±Infinity, null, undefined all
+ *     produce the em-dash string. Calculator UI should never crash on
+ *     partial input (empty inputs, zero divisors).
+ *   • Uses `Intl.NumberFormat('en-US', ...)` under the hood — proper
+ *     locale-aware separators, no manual `toFixed` rounding.
+ *   • `formatPercent` expects PERCENT UNITS, not a 0–1 fraction. Pass
+ *     `2.45` to get `"2.45%"`. Passing `0.0245` would yield `"0.02%"`.
+ *
+ * Zero runtime deps — `Intl.NumberFormat` is a built-in.
+ */
+interface FormatOptions {
+    /** Decimal places. Defaults vary per helper (see each helper's JSDoc). */
+    decimals?: number;
+}
+/**
+ * Format a number as USD currency.
+ *
+ *   formatCurrency(42.5)          → "$42.50"
+ *   formatCurrency(1234567.89)    → "$1,234,567.89"
+ *   formatCurrency(NaN)           → "—"
+ *
+ * Default decimals: 2.
+ */
+declare function formatCurrency(n: number, opts?: FormatOptions): string;
+/**
+ * Format a number as a percent. Input is in PERCENT UNITS (i.e. pass
+ * `2.45` to get `"2.45%"`, NOT `0.0245`). This matches the way the
+ * calculator routes compute their results (e.g. CTR = clicks ÷
+ * impressions × 100 — the × 100 already happened upstream).
+ *
+ *   formatPercent(2.45)           → "2.45%"
+ *   formatPercent(3.2, { decimals: 1 })  → "3.2%"
+ *   formatPercent(NaN)            → "—"
+ *
+ * Default decimals: 2.
+ */
+declare function formatPercent(n: number, opts?: FormatOptions): string;
+/**
+ * Format a number as a ratio with the `x` suffix. Used by ROAS.
+ *
+ *   formatRatio(4.25)             → "4.25x"
+ *   formatRatio(10, { decimals: 0 })  → "10x"
+ *   formatRatio(Infinity)         → "—"
+ *
+ * Default decimals: 2.
+ */
+declare function formatRatio(n: number, opts?: FormatOptions): string;
+/**
+ * Format a number with thousand-separators and configurable decimals.
+ *
+ *   formatNumber(1234567)         → "1,234,567"
+ *   formatNumber(1234.567, { decimals: 2 })  → "1,234.57"
+ *   formatNumber(NaN)             → "—"
+ *
+ * Default decimals: 0.
+ */
+declare function formatNumber(n: number, opts?: FormatOptions): string;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Layout constants shared between CSS and JS.
+ *
+ * Some primitives (e.g. ChipNav) need numeric pixel values for
+ * `IntersectionObserver` rootMargin or `position: sticky` `top` style
+ * — those can't read from CSS custom properties. To keep the layout
+ * coherent, this module mirrors the canonical values from `tokens.css`.
+ * If you change one, change the other.
+ *
+ * The corresponding CSS tokens are:
+ *   --header-height          → HEADER_HEIGHT
+ *   --section-scroll-offset  → SECTION_SCROLL_OFFSET
+ */
+/** Height of the sticky AppHeader, in px. Mirrors `--header-height`. */
+declare const HEADER_HEIGHT = 56;
+/**
+ * Vertical offset for in-page section anchors (header + chip nav +
+ * breathing room). Mirrors `--section-scroll-offset`.
+ */
+declare const SECTION_SCROLL_OFFSET = 120;
+
+interface PageHeroProps {
+    /** Small uppercase label above the title, usually colored with --accent. */
+    eyebrow?: string;
+    title: string;
+    subtitle?: string;
+    /** Right-aligned trailing content — typically a row of action buttons. */
+    actions?: ReactNode;
+    /**
+     * Optional left-side adornment rendered alongside the title — e.g. the
+     * brand profile's logo block. Sits in the title row (not next to the
+     * eyebrow), vertically aligned with the title text. The hero gracefully
+     * collapses if this is `undefined` so pages without an adornment look
+     * unchanged.
+     */
+    leading?: ReactNode;
+    className?: string;
+}
+declare function PageHero({ eyebrow, title, subtitle, actions, leading, className, }: PageHeroProps): react_jsx_runtime.JSX.Element;
+
+interface SearchBarProps {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    width?: number | string;
+    className?: string;
+}
+declare function SearchBar({ value, onChange, placeholder, width, className, }: SearchBarProps): react_jsx_runtime.JSX.Element;
+
+interface FilterBarProps {
+    /**
+     * `framed` (default) = bordered `.ds-card-surface` card, matching the
+     * Assets bar. `bare` = no frame, just the flex row (for bars that sit
+     * inside an already-framed container).
+     */
+    variant?: 'framed' | 'bare';
+    /** Accessible label for the toolbar group (e.g. "Asset filters"). */
+    'aria-label'?: string;
+    className?: string;
+    children: ReactNode;
+}
+declare function FilterBarRoot({ variant, 'aria-label': ariaLabel, className, children, }: FilterBarProps): react_jsx_runtime.JSX.Element;
+interface FilterBarSearchProps {
+    value: string;
+    onChange: (next: string) => void;
+    placeholder?: string;
+    /** Required — icon-only field needs an accessible name. */
+    'aria-label': string;
+    /** Override the default width sizing if a bar needs it. */
+    className?: string;
+}
+/** Standardized search field: small `Input` with a leading magnifier. */
+declare function FilterBarSearch({ value, onChange, placeholder, 'aria-label': ariaLabel, className, }: FilterBarSearchProps): react_jsx_runtime.JSX.Element;
+/** Flexible spacer — everything after it is pushed to the right edge. */
+declare function FilterBarSpacer(): react_jsx_runtime.JSX.Element;
+interface FilterBarCountProps {
+    shown: number;
+    total: number;
+}
+/** Right-aligned "{shown} of {total}" result count, tabular-nums. */
+declare function FilterBarCount({ shown, total }: FilterBarCountProps): react_jsx_runtime.JSX.Element;
+declare const FilterBar: typeof FilterBarRoot & {
+    Search: typeof FilterBarSearch;
+    Spacer: typeof FilterBarSpacer;
+    Count: typeof FilterBarCount;
+};
+
+interface FilterOption<T extends string = string> {
+    value: T;
+    label: string;
+    /** Right-aligned count chip in the menu. */
+    count?: number;
+    /** Optional left-side adornment (icon, color dot). */
+    leading?: ReactNode;
+}
+interface FilterDropdownProps<T extends string = string> {
+    label: string;
+    value: T;
+    onChange: (value: T) => void;
+    options: FilterOption<T>[];
+    /** The value treated as "no filter applied" — defaults to "all". When
+     *  `value` differs from this, the trigger flips to its active style. */
+    neutralValue?: T;
+    /** Defaults to the option label. */
+    triggerValueLabel?: string;
+    className?: string;
+    align?: 'left' | 'right';
+}
+declare function FilterDropdown<T extends string = string>({ label, value, onChange, options, neutralValue, triggerValueLabel, className, align, }: FilterDropdownProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DeviceFrameProps {
+    /** Which device bezel to render. */
+    device: 'desktop' | 'mobile';
+    /**
+     * URL shown in the address bar / pill. On desktop, the address bar is
+     * hidden when omitted; on mobile the pill falls back to a neutral
+     * placeholder.
+     */
+    url?: string;
+    /** The page being previewed, rendered inside the (scrollable) screen area. */
+    children: ReactNode;
+    /** Optional className on the outer frame element. */
+    className?: string;
+}
+declare function DeviceFrame({ device, url, children, className }: DeviceFrameProps): react_jsx_runtime.JSX.Element;
+
+interface CreativeMediaProps {
+    src: string;
+    alt?: string | undefined;
+    mediaType?: 'image' | 'video' | undefined;
+    className?: string | undefined;
+    style?: react__default.CSSProperties | undefined;
+    autoPlay?: boolean | undefined;
+    loop?: boolean | undefined;
+    showPlayOverlay?: boolean | undefined;
+    thumbnailSrc?: string | undefined;
+    onError?: ((e: react__default.SyntheticEvent) => void) | undefined;
+}
+declare const CreativeMedia: react__default.FC<CreativeMediaProps>;
+
+type PreviewPlatform = 'facebook' | 'instagram' | 'messenger';
+type PreviewPlacement = 'feed' | 'story' | 'reel' | 'inbox' | 'instream' | 'search' | 'rightcolumn' | 'explore';
+type PreviewDevice = 'mobile' | 'desktop';
+interface PreviewConfiguration {
+    platform: PreviewPlatform;
+    placement: PreviewPlacement;
+    device: PreviewDevice;
+    format: '1:1' | '4:5' | '9:16';
+}
+interface PreviewAdData {
+    adName: string;
+    primaryText: string;
+    headline: string;
+    description: string;
+    callToAction: string;
+    websiteUrl: string;
+    displayLink: string;
+    brandName: string;
+    profileImage: string;
+    creativeImage: string;
+    creativeMediaType?: 'image' | 'video' | undefined;
+}
+/**
+ * A single carousel card for the presentational carousel views (ADR-119 D1).
+ * Per-card copy/destination only — the CTA is ad-level/shared (ADR-119 D3).
+ */
+interface CarouselCardView {
+    key: string;
+    headline?: string | undefined;
+    description?: string | undefined;
+    url?: string | undefined;
+}
+/**
+ * Props for the pure presentational carousels (`MetaFeedCarousel`,
+ * `InstagramFeedCarousel`). They own NO data or crop logic: the caller supplies
+ * the card list, the active index + setter, and an image-render slot
+ * (`CropFrame` on the controller-driven form side; a plain <img> on static
+ * surfaces). Because the view imports neither the controller nor the crop
+ * system, it lives in `packages/ui` and earns Meta-exact hex (ADR-119 D1/D5).
+ */
+interface CarouselViewProps {
+    cards: CarouselCardView[];
+    active: number;
+    onActive: (index: number) => void;
+    renderImage: (index: number) => ReactNode;
+    brandName: string;
+    profileImage?: string | undefined;
+    primaryText?: string | undefined;
+    /** Ad-level CTA, shared across cards (ADR-119 D3). */
+    callToAction: string;
+}
+interface PlacementPreview {
+    id: string;
+    platform: PreviewPlatform;
+    placement: PreviewPlacement;
+    label: string;
+    description: string;
+    aspectRatio: '1:1' | '4:5' | '9:16';
+    device: PreviewDevice;
+    enabled: boolean;
+}
+declare const PLACEMENT_CONFIGS: PlacementPreview[];
+
+/**
+ * Facebook Feed — single image (sponsored). GREENFIELD rebuild.
+ *
+ * Not the Creative-Hub export extraction. Faithful to the real FB feed ad chrome
+ * but built cleanly: a 320px card with natural full-width flow (no fixed
+ * 300px / containerWidth-24 inner rows, no divider margins), Meta-exact hex
+ * (self-contained — no design tokens), a system font stack. Layout, top → bottom:
+ *   header · primary text · creative · link card · divider · action bar
+ */
+interface MetaFeedPreviewProps {
+    adData: PreviewAdData;
+    format: '1:1' | '4:5' | '9:16';
+}
+declare const MetaFeedPreview: react.NamedExoticComponent<MetaFeedPreviewProps>;
+
+interface MetaStoryPreviewProps {
+    platform: PreviewPlatform;
+    adData: PreviewAdData;
+    dominantColor?: string | undefined;
+    accentColor?: string | undefined;
+    isLight?: boolean | undefined;
+}
+/**
+ * Meta Stories Preview (Facebook/Instagram/Messenger)
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Sources: facebook-stories-singleimage-1080x1080.html, instagram-mobile-stories-singleimage-1080x1080.html
+ * Facebook Stories Container: 318x566px
+ * Instagram Stories Container: 320x567px (inner: 318x565px)
+ */
+declare const MetaStoryPreview: react__default.FC<MetaStoryPreviewProps>;
+
+interface MetaReelPreviewProps {
+    platform: PreviewPlatform;
+    adData: PreviewAdData;
+    dominantColor?: string | undefined;
+    accentColor?: string | undefined;
+}
+/**
+ * Facebook/Instagram Reels Preview
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Source: Facebook-Reels-singleimage-1080x1080.html extraction
+ * Container: 320x567px (9:16 ratio)
+ */
+declare const MetaReelPreview: react__default.FC<MetaReelPreviewProps>;
+
+interface MetaMessengerPreviewProps {
+    adData: PreviewAdData;
+}
+/**
+ * Facebook Messenger Inbox Preview
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Source: singleimage-facebook-messenger-inbox.html
+ * Container: 250x444px (outer), 375x142px (inner - Ad view)
+ */
+declare const MetaMessengerPreview: react__default.FC<MetaMessengerPreviewProps>;
+
+interface MetaRightColumnPreviewProps {
+    adData: PreviewAdData;
+}
+/**
+ * Facebook Desktop Right Column Preview
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Source: desktop-right-column.html extraction
+ * Container: 375x206px
+ */
+declare const MetaRightColumnPreview: react__default.FC<MetaRightColumnPreviewProps>;
+
+interface MetaSearchPreviewProps {
+    adData: PreviewAdData;
+}
+declare const MetaSearchPreview: react__default.FC<MetaSearchPreviewProps>;
+
+interface MetaInstreamPreviewProps {
+    adData: PreviewAdData;
+}
+declare const MetaInstreamPreview: react__default.FC<MetaInstreamPreviewProps>;
+
+/**
+ * Instagram Feed — single image (sponsored). GREENFIELD rebuild.
+ *
+ * Not the Creative-Hub export extraction. Faithful to the real IG sponsored-post
+ * chrome but built cleanly: a 320px card with natural full-width flow (no fixed
+ * 300px inner rows, no empty placeholder divs), Meta-exact hex (self-contained —
+ * no design tokens), and a system font stack. Layout, top → bottom:
+ *   header · creative · CTA bar · action row · caption
+ */
+interface InstagramFeedPreviewProps {
+    adData: PreviewAdData;
+    format: '1:1' | '4:5' | '9:16';
+}
+declare const InstagramFeedPreview: react.NamedExoticComponent<InstagramFeedPreviewProps>;
+
+interface InstagramExplorePreviewProps {
+    adData: PreviewAdData;
+}
+declare const InstagramExplorePreview: react__default.FC<InstagramExplorePreviewProps>;
+
+declare const MetaFeedCarousel: react.NamedExoticComponent<CarouselViewProps>;
+
+declare const InstagramFeedCarousel: react.NamedExoticComponent<CarouselViewProps>;
+
+type index_CarouselCardView = CarouselCardView;
+type index_CarouselViewProps = CarouselViewProps;
+declare const index_CreativeMedia: typeof CreativeMedia;
+declare const index_InstagramExplorePreview: typeof InstagramExplorePreview;
+declare const index_InstagramFeedCarousel: typeof InstagramFeedCarousel;
+declare const index_InstagramFeedPreview: typeof InstagramFeedPreview;
+declare const index_MetaFeedCarousel: typeof MetaFeedCarousel;
+declare const index_MetaFeedPreview: typeof MetaFeedPreview;
+declare const index_MetaInstreamPreview: typeof MetaInstreamPreview;
+declare const index_MetaMessengerPreview: typeof MetaMessengerPreview;
+declare const index_MetaReelPreview: typeof MetaReelPreview;
+declare const index_MetaRightColumnPreview: typeof MetaRightColumnPreview;
+declare const index_MetaSearchPreview: typeof MetaSearchPreview;
+declare const index_MetaStoryPreview: typeof MetaStoryPreview;
+declare const index_PLACEMENT_CONFIGS: typeof PLACEMENT_CONFIGS;
+type index_PlacementPreview = PlacementPreview;
+type index_PreviewAdData = PreviewAdData;
+type index_PreviewConfiguration = PreviewConfiguration;
+type index_PreviewDevice = PreviewDevice;
+type index_PreviewPlacement = PreviewPlacement;
+type index_PreviewPlatform = PreviewPlatform;
+declare namespace index {
+  export { type index_CarouselCardView as CarouselCardView, type index_CarouselViewProps as CarouselViewProps, index_CreativeMedia as CreativeMedia, index_InstagramExplorePreview as InstagramExplorePreview, index_InstagramFeedCarousel as InstagramFeedCarousel, index_InstagramFeedPreview as InstagramFeedPreview, index_MetaFeedCarousel as MetaFeedCarousel, index_MetaFeedPreview as MetaFeedPreview, index_MetaInstreamPreview as MetaInstreamPreview, index_MetaMessengerPreview as MetaMessengerPreview, index_MetaReelPreview as MetaReelPreview, index_MetaRightColumnPreview as MetaRightColumnPreview, index_MetaSearchPreview as MetaSearchPreview, index_MetaStoryPreview as MetaStoryPreview, index_PLACEMENT_CONFIGS as PLACEMENT_CONFIGS, type index_PlacementPreview as PlacementPreview, type index_PreviewAdData as PreviewAdData, type index_PreviewConfiguration as PreviewConfiguration, type index_PreviewDevice as PreviewDevice, type index_PreviewPlacement as PreviewPlacement, type index_PreviewPlatform as PreviewPlatform };
+}
+
+export { AccordionCompound as Accordion, type AccordionProps, type AccordionSectionProps, AllocationSparkbar, type AllocationSparkbarProps, AppScroll, Badge, type BadgeProps, type BadgeTone, BrandLogoTile, type BrandLogoTileProps, type BrandLogoTileSize, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CalcLayout, type CalcPrefill, CalculatorShell, type CalculatorShellProps, CalculatorShellV2, type CalculatorShellV2Props, Card, Checkbox, type CheckboxProps, ChipNav, type ChipNavItem, Choropleth, type ChoroplethProps, CodeBlock, type CodeBlockProps, CompletionRing, type CompletionRingProps, CopyField, type CopyFieldProps, type Crumb, DataGrid, type DataGridColumn, DataGridColumnOptionsMenu, DataGridDragOverlay, type DataGridDrawerPanelProps, DataGridDropIndicator, type DataGridIcon, type DataGridProps, type DataGridRowBase, type DataGridSortState, DataGridToolbar, type DataGridToolbarProps, type DataGridToolbarRenderProps, DetailSection, DeviceFrame, type DeviceFrameProps, DragHandle, DropdownButton, type DropdownButtonItem, type DropdownButtonProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, DropdownMenuTrigger, type DropdownMenuTriggerProps, type EditingCell, EmptyPlaceholder, EmptyState, type EmptyStateProps, FOLDER_COLOR_KEYS, FileDropZone, FilePreviewGrid, FilePreviewItem, FileThumbnail, FileUploadButton, FilterBar, type FilterBarCountProps, type FilterBarProps, type FilterBarSearchProps, FilterDropdown, type FilterDropdownProps, type FilterOption, FloatingDrawer, type FloatingDrawerProps, FloatingStatusBar, type FloatingStatusBarProps, type FloatingStatusTone, FolderCard, type FolderCardProps, type FolderColorKey, type FolderTreeNode, FolderTreePicker, type FolderTreePickerProps, FrameStack, type FrameStackProps, HEADER_HEIGHT, HeroFormCardCompound as HeroFormCard, type HeroFormCardAdvancedProps, type HeroFormCardBannerProps, type HeroFormCardFieldProps, type HeroFormCardProps, type HeroFormCardSectionProps, IconTile, IdentityLabel, IdentityValue, Input, type InputProps, type InputSize, Kbd, type KbdProps, ListItem, MarkdownCode, MarkdownRenderer, type MarkdownRendererProps, MenuButton, type MenuButtonEntry, type MenuButtonItem, type MenuButtonProps, type MenuButtonSeparator, index as MetaPreviews, MetricCard, type MetricCardProps, type MetricCardTone, MicrosoftLogo, type MicrosoftLogoProps, Modal, OptionTile, OptionTileGroup, type OptionTileGroupProps, type OptionTileProps, PLACEMENT_CONFIGS, PageHeaderHost, PageHeaderSlotProvider, PageHero, type PageHeroProps, PageShell, Pagination, type PaginationProps, type PendingFile, PillButton, type PillButtonProps, type PlacementPreview, type PreviewAdData, type PreviewConfiguration, type PreviewDevice, type PreviewPlacement, type PreviewPlatform, PS as ProfileSection, type ProfileSectionProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeSlider, type RangeSliderProps, ResizableHandle, type ResizableHandleProps, ResizablePane, type ResizablePaneProps, SECTION_SCROLL_OFFSET, SearchBar, type SearchBarProps, SectionLabel, SegmentedPill, type SegmentedPillItem, type SegmentedPillProps, Shell, type ShellProps, ShellStat, type ShellStatProps, type ShellStatTone, type ShellSubCardProps, type ShellTrayBodyProps, type ShellTrayFooterProps, type ShellTrayHeaderProps, type ShellTrayProps, Slider, type SliderProps, SortableItem, SortableList, SortableTable, type Column as SortableTableColumn, type SortableTableProps, StatRow, type StatRowProps, type StatRowStep, StatsGrid, type StatsGridProps, StepLoader, type StepLoaderProps, type StepLoaderStep, type Tab, Tabs, type TabsProps, TagChipInput, type TagChipInputProps, TagRow, TextInput, Textarea, TextareaInput, type TextareaProps, Toaster, TokenBadge, type TokenBadgeProps, type UploadResult, type UseFileUploadOptions, cn, folderColorVar, formatCurrency, formatNumber, formatPercent, formatRatio, useFileUpload };