@arbidocs/blocks 0.3.184 → 0.4.0

package/dist/shell/ActionCluster.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { ShellActionLayout } from './types';
+export interface ActionClusterProps {
+    /**
+     * `bar`: one row for a page header or phone app bar (status, bell, contacts, account).
+     * `sidebar`: the bottom of the expanded sidebar: the bell and contacts rows stacked above the
+     * account row.
+     * `rail`: the same stack on the icon-only rail (same order, icon-only rows).
+     * `drawer`: the phone drawer's rows (bell and contacts only; the app bar carries the account).
+     */
+    layout?: ShellActionLayout;
+    /** Status pill (remote control); `bar` only. Other layouts show status in their own rows. */
+    status?: ReactNode;
+    /** Notification bell (the kit's NotificationBell, or a `Sidebar.BadgeRow`). */
+    bell?: ReactNode;
+    /** Contacts / messages entry with its own badge (a `Sidebar.BadgeRow`). */
+    contacts?: ReactNode;
+    /** Account menu (the kit's UserMenu). */
+    account?: ReactNode;
+    'data-testid'?: string;
+}
+/**
+ * The account area: notifications, contacts and the account menu, in one of four placements. In
+ * the sidebar and on the rail the two badge rows are stacked above the account row in the same
+ * order, so nothing moves when the rail expands; the account menu holds everything else (help,
+ * settings, tips, processing).
+ */
+export declare function ActionCluster({ layout, status, bell, contacts, account, 'data-testid': testId, }: ActionClusterProps): import("react").JSX.Element;

package/dist/shell/AskField.d.ts

@@ -0,0 +1,71 @@
+import type { InputHTMLAttributes, KeyboardEvent, ReactNode, Ref } from 'react';
+/** Fixed strings of the ask field, its trigger and the expanded row. */
+export interface AskFieldLabels {
+    /** Input placeholder (the `placeholder` prop wins). */
+    placeholder: string;
+    /** The input's accessible name. */
+    inputLabel: string;
+    search: string;
+    askAi: string;
+    /** The icon-only trigger. */
+    askOrSearch: string;
+    closeSearch: string;
+}
+export declare const DEFAULT_ASK_FIELD_LABELS: AskFieldLabels;
+export interface AskFieldProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Enter / the arrow button: ask AI. */
+    onAsk: (text: string) => void;
+    /** The magnifier button: semantic search. */
+    onSearch: (text: string) => void;
+    /** Intercept keys first (e.g. a slash menu); call `preventDefault` to stop the default Enter-asks. */
+    onInputKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** Rendered just under the field at its width (a slash/autocomplete menu). */
+    menu?: ReactNode;
+    inputRef?: Ref<HTMLInputElement>;
+    /** Extra attributes for the input, e.g. the combobox props of `useListKeyNav` for a slash menu. */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    placeholder?: string;
+    labels?: Partial<AskFieldLabels>;
+    autoFocus?: boolean;
+    className?: string;
+    /** Root id (default `workspace-ask-bar`); the input/search/submit ids are `<root>-input|search|submit`. */
+    'data-testid'?: string;
+}
+/**
+ * The compact one-line ask/search field: sparkle, input, then two icon doors (Search, Ask AI).
+ * Text and the menu are controlled by the host, so the same field serves the sidebar, the phone
+ * app bar and any custom shell.
+ */
+export declare function AskField({ value, onValueChange, onAsk, onSearch, onInputKeyDown, menu, inputRef, inputProps, placeholder, labels, autoFocus, className, 'data-testid': testIdProp, }: AskFieldProps): import("react").JSX.Element;
+export interface AskTriggerProps {
+    /** Opens the ask field (the single-action variants) or asks AI (`split`). */
+    onClick: () => void;
+    /**
+     * `rail`: the icon-only sidebar's bordered tile; `appbar`: the phone app bar's bare icon;
+     * `split`: two icon buttons side by side, Search (`onSearch`) and Ask AI (`onClick`).
+     */
+    variant?: 'rail' | 'appbar' | 'split';
+    /** The Search action of the `split` variant. */
+    onSearch?: () => void;
+    labels?: Partial<Pick<AskFieldLabels, 'askOrSearch' | 'search' | 'askAi'>>;
+    /** Root id; the split buttons get `<root>-search` and `<root>-ask` unless overridden. */
+    'data-testid'?: string;
+    searchTestId?: string;
+    askTestId?: string;
+}
+/** The icon that stands in for the field where there is no room for it. */
+export declare function AskTrigger({ onClick, variant, onSearch, labels, 'data-testid': testId, searchTestId, askTestId, }: AskTriggerProps): import("react").JSX.Element;
+export interface AskRowProps {
+    /** The field (an AskField). */
+    children: ReactNode;
+    onClose: () => void;
+    labels?: Partial<Pick<AskFieldLabels, 'closeSearch'>>;
+    /** Row id (default `workspace-ask-bar-expanded`). */
+    'data-testid'?: string;
+    /** Collapse button id (default `workspace-ask-bar-collapse`). */
+    collapseTestId?: string;
+}
+/** The phone's expanded ask row: takes over the app bar so there is room to type; Escape closes. */
+export declare function AskRow({ children, onClose, labels, 'data-testid': testId, collapseTestId, }: AskRowProps): import("react").JSX.Element;

package/dist/shell/InfoBar.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type InfoBarVariant = 'info' | 'warning' | 'success' | 'hint';
+export interface InfoBarProps {
+    message: ReactNode;
+    variant?: InfoBarVariant;
+    /** Suppress the leading variant icon (e.g. tips render their own "Tip:" label). */
+    hideIcon?: boolean;
+    /** Element pinned to the right of the bar (e.g. a reward balance). */
+    rightSlot?: ReactNode;
+    cta?: {
+        label: string;
+        onClick: () => void;
+        icon?: ReactNode;
+    };
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    className?: string;
+}
+/** Full-width page banner: icon, message, optional right slot, CTA and dismiss. */
+export declare function InfoBar({ message, variant, hideIcon, rightSlot, cta, onDismiss, dismissLabel, className, }: InfoBarProps): import("react").JSX.Element;

package/dist/shell/MobileBars.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { NavItem } from './types';
+/** Fixed strings of the phone bars. */
+export interface MobileBarsLabels {
+    /** The menu button (the `menuLabel` prop wins). */
+    openNavigationMenu: string;
+    /** The tab bar's accessible name (the `label` prop wins). */
+    workspaceSections: string;
+}
+export declare const DEFAULT_MOBILE_BARS_LABELS: MobileBarsLabels;
+export interface MobileAppBarProps {
+    /** Show the menu button that opens the drawer (nothing to open on a list page with no sidebar). */
+    showMenu?: boolean;
+    onMenu?: () => void;
+    /** Replaces the brand mark (e.g. the workspace switcher). */
+    title?: ReactNode;
+    /** Brand mark shown when there is no `title`. */
+    logo?: ReactNode;
+    /** Right-aligned controls that fit (ask, offline pill, bell, account). */
+    actions?: ReactNode;
+    menuLabel?: string;
+    labels?: Partial<Pick<MobileBarsLabels, 'openNavigationMenu'>>;
+    className?: string;
+    'data-testid'?: string;
+    /** Menu button id (default `mobile-nav-toggle`). */
+    menuTestId?: string;
+}
+/**
+ * The slim phone app bar (56px): menu button, a title slot and an actions slot. The app mounts
+ * it only on small screens; the controls that do not fit live in the drawer.
+ */
+export declare function MobileAppBar({ showMenu, onMenu, title, logo, actions, menuLabel, labels, className, 'data-testid': testId, menuTestId, }: MobileAppBarProps): import("react").JSX.Element;
+export interface MobileTabBarProps {
+    /** The workspace's main areas; test ids are `{testIdPrefix}-{id}` (prefix default `mobile-tab`). */
+    items: NavItem[];
+    label?: string;
+    labels?: Partial<Pick<MobileBarsLabels, 'workspaceSections'>>;
+    testIdPrefix?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Phone bottom navigation: a 64px tinted bar of the main areas. The drawer carries the same
+ * destinations with counts, so nothing is reachable only here. The app mounts it on small
+ * screens only.
+ */
+export declare function MobileTabBar({ items, label, labels, testIdPrefix, className, 'data-testid': testId, }: MobileTabBarProps): import("react").JSX.Element;

package/dist/shell/OfflinePill.d.ts

@@ -0,0 +1,28 @@
+export type OfflinePillTone = 'offline' | 'failed' | 'syncing';
+/** Fixed strings of the offline pill. */
+export interface OfflinePillLabels {
+    reconnect: string;
+}
+export declare const DEFAULT_OFFLINE_PILL_LABELS: OfflinePillLabels;
+export interface OfflinePillProps {
+    tone: OfflinePillTone;
+    /** e.g. "Offline · 3 pending", "2 failed to sync", "Syncing 4…". */
+    label: string;
+    /** Icon-only (the collapsed rail / app bar). */
+    compact?: boolean;
+    /** Opens the pending-changes list. */
+    onOpen: () => void;
+    /** Offered beside the pill (only when not compact); pass it only while it can do something. */
+    onReconnect?: () => void;
+    labels?: Partial<OfflinePillLabels>;
+    /** Pill button id (default `offline-sync-status`). */
+    'data-testid'?: string;
+    /** Reconnect button id (default `offline-reconnect-button`). */
+    reconnectTestId?: string;
+}
+/**
+ * Connection + sync indicator: a status pill that opens the pending-changes list, plus an
+ * optional Reconnect button beside it. The app renders it only when there is something to say
+ * (offline, or changes waiting/failing), so online-and-synced stays clean.
+ */
+export declare function OfflinePill({ tone, label, compact, onOpen, onReconnect, labels, 'data-testid': testId, reconnectTestId, }: OfflinePillProps): import("react").JSX.Element;

package/dist/shell/RemoteControlPill.d.ts

@@ -0,0 +1,23 @@
+/** Fixed strings of the remote-control pill. */
+export interface RemoteControlPillLabels {
+    /** The disable button (the `disableLabel` prop wins). */
+    turnOffRemoteControl: string;
+}
+export declare const DEFAULT_REMOTE_CONTROL_PILL_LABELS: RemoteControlPillLabels;
+export interface RemoteControlPillProps {
+    /** A run is actively driving the screen (tinted + pulsing). */
+    isActive: boolean;
+    label: string;
+    onDisable: () => void;
+    disableLabel?: string;
+    labels?: Partial<RemoteControlPillLabels>;
+    /** Root id (default `remote-control-indicator`). */
+    'data-testid'?: string;
+    /** Disable button id (default `remote-control-indicator-disable`). */
+    disableTestId?: string;
+}
+/**
+ * Persistent, unobtrusive status pill shown while remote control is on or a run is executing,
+ * with a one-click disable. The app decides when to mount it.
+ */
+export declare function RemoteControlPill({ isActive, label, onDisable, disableLabel: disableLabelProp, labels, 'data-testid': testId, disableTestId, }: RemoteControlPillProps): import("react").JSX.Element;

package/dist/shell/Shell.d.ts

@@ -0,0 +1,123 @@
+import { type MouseEventHandler, type ReactNode, type Ref } from 'react';
+/** Default id of the element overlay-mode panels portal into (see `Shell.Content`). */
+export declare const DEFAULT_OVERLAY_ZONE_ID = "app-overlay-zone";
+/** The id of the enclosing `Shell.Content` overlay zone, for panels that portal into it. */
+export declare function useOverlayZoneId(): string;
+export interface ShellRootProps {
+    /** Full-width strip above everything (e.g. a deletion-pending banner). */
+    banner?: ReactNode;
+    /** Top chrome: a Shell.Topbar on list pages, a MobileAppBar on phones; omit for none. */
+    topbar?: ReactNode;
+    /** The Sidebar.Root (and its drawer backdrop). */
+    sidebar?: ReactNode;
+    /** Phone bottom navigation. */
+    tabBar?: ReactNode;
+    /** Right-hand column beside the content: a `Shell.Dock` (chat, inspector...). */
+    aside?: ReactNode;
+    /** Extra layers inside the body row (connection monitor, …). */
+    overlays?: ReactNode;
+    /** The Shell.Content region. */
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * The application frame: banner, top chrome, then a body row holding the sidebar beside the
+ * content, then the phone tab bar. Every region is a slot, so a custom UI composes its own.
+ */
+declare function ShellRoot({ banner, topbar, sidebar, tabBar, aside, overlays, children, className, 'data-testid': testId, }: ShellRootProps): import("react").JSX.Element;
+export interface ShellContentProps {
+    children: ReactNode;
+    /** Scrolling element, for scroll restoration. */
+    scrollRef?: Ref<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Overlay-mode panels portal into this id and cover the content column only. Defaults to
+     * `DEFAULT_OVERLAY_ZONE_ID`; descendants read it with `useOverlayZoneId()`.
+     */
+    overlayZoneId?: string;
+    className?: string;
+}
+/**
+ * The content column beside the sidebar. It is `relative` so overlay-mode panels (portalled into
+ * the overlay zone) cover this region only, leaving the sidebar and its actions interactive.
+ */
+declare function ShellContent({ children, scrollRef, onClick, overlayZoneId, className, }: ShellContentProps): import("react").JSX.Element;
+export interface ShellTopbarProps {
+    /** Left side: guidance / breadcrumbs, centred in the page column. */
+    children?: ReactNode;
+    /** Right side: the action cluster. */
+    actions?: ReactNode;
+    className?: string;
+}
+/** A minimal white header for pages with no sidebar (the workspaces list). */
+declare function ShellTopbar({ children, actions, className }: ShellTopbarProps): import("react").JSX.Element;
+export interface ShellDockProps {
+    isOpen: boolean;
+    /** Called with `false` by the mobile close button. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Desktop width (CSS length or px). Default 24rem. */
+    width?: number | string;
+    /** Phone layout: the dock covers the screen instead of sitting beside the content. */
+    isMobile?: boolean;
+    /** Accessible name of the dock. */
+    label: string;
+    /** Mobile close button label. */
+    closeLabel?: string;
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * A right-hand dock for a companion surface (chat, inspector). Controlled: the host owns
+ * `isOpen`, the width and the mobile breakpoint. Pass it to `Shell.Root` as `aside`.
+ */
+declare function ShellDock({ isOpen, onOpenChange, width, isMobile, label, closeLabel, children, className, 'data-testid': testId, }: ShellDockProps): import("react").JSX.Element | null;
+export declare const Shell: {
+    Root: typeof ShellRoot;
+    Content: typeof ShellContent;
+    Topbar: typeof ShellTopbar;
+    Dock: typeof ShellDock;
+};
+export interface PageContainerProps {
+    children: ReactNode;
+    /** Full width instead of the centred 72rem column. */
+    wide?: boolean;
+    /** Stand-alone use: at least a screen tall, instead of filling the parent. */
+    minScreen?: boolean;
+    /** Max width of the centred column (any Tailwind `max-w-*` class). Default `max-w-6xl`. */
+    maxWidth?: string;
+    /**
+     * Horizontal padding of the inner column (any Tailwind `px-*` classes, responsive variants
+     * welcome). Default `px-4 sm:px-6 lg:px-8`; pass `px-0` for a full-bleed page, or the class
+     * string of your own gutter. Use this prop, not `innerClassName`, to change the gutter: the
+     * classes are concatenated without a merge step, so a second `px-*` would not reliably win.
+     */
+    padding?: string;
+    /** Extra classes for the inner column. */
+    innerClassName?: string;
+    className?: string;
+}
+/** Default gutter of {@link PageContainer}: tight on a phone, roomier from tablet up. */
+export declare const DEFAULT_PAGE_CONTAINER_PADDING = "px-4 sm:px-6 lg:px-8";
+/**
+ * Page body wrapper: a white canvas with the standard 72rem column (or full width) and a responsive side gutter. Fills its
+ * parent by default so sticky headers and h-full pages keep a definite height chain.
+ */
+export declare function PageContainer({ children, wide, minScreen, maxWidth, padding, innerClassName, className, }: PageContainerProps): import("react").JSX.Element;
+/** Fixed strings of the sidebar toggle. */
+export interface SidebarToggleButtonLabels {
+    closeSidebar: string;
+    openSidebar: string;
+}
+export declare const DEFAULT_SIDEBAR_TOGGLE_BUTTON_LABELS: SidebarToggleButtonLabels;
+export interface SidebarToggleButtonProps {
+    /** The sidebar is open (pinned). */
+    isOpen: boolean;
+    onToggle: () => void;
+    labels?: Partial<SidebarToggleButtonLabels>;
+    'data-testid'?: string;
+}
+/** Opens/closes the sidebar from a page header, so the control sits in the same spot everywhere. */
+export declare function SidebarToggleButton({ isOpen, onToggle, labels, 'data-testid': testId, }: SidebarToggleButtonProps): import("react").JSX.Element;
+export {};

package/dist/shell/Sidebar.d.ts

@@ -0,0 +1,104 @@
+import { type ReactNode } from 'react';
+import { DEFAULT_SIDEBAR_LABELS, SidebarRowHoverContext, useSidebarContext, type SidebarLabels } from './sidebar-context';
+import type { SidebarMode } from '../lib/sidebar-mode';
+import type { NavItem } from './types';
+export interface SidebarRootProps {
+    mode: SidebarMode;
+    /** Labels visible. Provided to every part through context. */
+    expanded: boolean;
+    /** `rail` mode: floats open to full width. */
+    isHovering?: boolean;
+    /** `collapsed` mode: revealed (peek) at full width. */
+    isPeeking?: boolean;
+    onBackdropClick?: () => void;
+    /** `rail` mode on touch: the floated-open rail dims the content behind it; tapping it closes. */
+    hasRailBackdrop?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    children: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+    labels?: Partial<SidebarLabels>;
+    /** Root id (default `sidebar`). */
+    'data-testid'?: string;
+    /** Drawer backdrop id (default `sidebar-backdrop`). */
+    backdropTestId?: string;
+}
+declare function SidebarRoot({ mode, expanded, isHovering, isPeeking, onBackdropClick, hasRailBackdrop, onMouseEnter, onMouseLeave, children, className, 'aria-label': ariaLabelProp, labels, 'data-testid': testId, backdropTestId, }: SidebarRootProps): import("react").JSX.Element;
+export interface SidebarSectionProps {
+    children: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+declare function SidebarHeader({ children, className, 'data-testid': testId }: SidebarSectionProps): import("react").JSX.Element;
+export interface SidebarNavProps extends Omit<SidebarSectionProps, 'children'> {
+    children?: ReactNode;
+    /** Rows as data. Children render after them. */
+    items?: NavItem[];
+}
+declare function SidebarNav({ items, children, className, 'data-testid': testId }: SidebarNavProps): import("react").JSX.Element;
+export interface SidebarGroupProps extends SidebarSectionProps {
+    /** Group heading. Shown above the rows when expanded; a thin divider stands in on the rail. */
+    label?: ReactNode;
+    /** Accessible name when `label` is not plain text. */
+    ariaLabel?: string;
+}
+/** A labelled run of rows inside the nav (for example "Workspace", "Tools"). */
+declare function SidebarGroup({ label, ariaLabel, children, className, 'data-testid': testId, }: SidebarGroupProps): import("react").JSX.Element;
+/** The heading of a `Sidebar.Group` (exported for custom headings). Hidden by the group on the rail. */
+declare function SidebarGroupLabel({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+declare function SidebarFooter({ children, className, 'data-testid': testId }: SidebarSectionProps): import("react").JSX.Element;
+export type SidebarNavItemProps = Omit<NavItem, 'id'> & {
+    id?: string;
+    className?: string;
+    /** Tooltip shown on the icon-only rail; defaults to the label. */
+    tooltip?: string;
+};
+/**
+ * One row: [icon] [label] [count] [trailing]. 36px (44px on coarse pointers). The active row is
+ * the selection tint, never a filled block; counts are quiet numbers, not pills.
+ *
+ * The expanded row is a div with role="button" (not a native <button>) so an interactive
+ * `trailing` control can be nested without producing button-in-button markup.
+ */
+declare function SidebarNavItem({ label, icon, active, onSelect, href, count, countIcon, testId, disabled, trailing, className, tooltip, }: SidebarNavItemProps): import("react").JSX.Element;
+export interface SidebarPinToggleProps {
+    isPinned: boolean;
+    onToggle: () => void;
+    className?: string;
+    /** Default `sidebar-pin-button`. */
+    'data-testid'?: string;
+}
+/**
+ * Pin/unpin button, revealed while the pointer is over the sidebar. It is always visible on
+ * coarse pointers (no hover on touch) and revealed by keyboard focus anywhere in the sidebar. It
+ * is hidden with opacity and pointer-events, never display:none, so it keeps its accessible name
+ * and stays in the tab order.
+ */
+declare function SidebarPinToggle({ isPinned, onToggle, className, 'data-testid': testId, }: SidebarPinToggleProps): import("react").JSX.Element;
+export interface SidebarDrawerHeaderProps {
+    /** Brand mark. */
+    logo: ReactNode;
+    onClose: () => void;
+    closeLabel?: string;
+    /** Close button id (default `mobile-nav-close`). */
+    'data-testid'?: string;
+}
+/** The phone drawer's header: brand mark and a 44px close button. */
+declare function SidebarDrawerHeader({ logo, onClose, closeLabel: closeLabelProp, 'data-testid': testId, }: SidebarDrawerHeaderProps): import("react").JSX.Element;
+export { DEFAULT_SIDEBAR_LABELS, SidebarRowHoverContext, useSidebarContext, type SidebarLabels };
+export declare const Sidebar: {
+    Root: typeof SidebarRoot;
+    Header: typeof SidebarHeader;
+    Nav: typeof SidebarNav;
+    Group: typeof SidebarGroup;
+    GroupLabel: typeof SidebarGroupLabel;
+    NavItem: typeof SidebarNavItem;
+    Footer: typeof SidebarFooter;
+    PinToggle: typeof SidebarPinToggle;
+    BadgeRow: import("react").ForwardRefExoticComponent<import("./SidebarBadgeRow").SidebarBadgeRowProps & import("react").RefAttributes<HTMLButtonElement>>;
+    DrawerHeader: typeof SidebarDrawerHeader;
+};

package/dist/shell/SidebarBadgeRow.d.ts

@@ -0,0 +1,29 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface SidebarBadgeRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Glyph (20px). */
+    icon: ReactNode;
+    /** Visible label of the expanded row; the tooltip of the icon-only rail. */
+    label: string;
+    /** Unread/pending number. Hidden at 0 or `undefined`; values above 9 read "9+". */
+    count?: number;
+    /**
+     * Accessible name including the count, for example "Notifications, 2 unread". Defaults to
+     * `label` plus the count.
+     */
+    ariaLabel?: string;
+    /**
+     * `row`: a labelled row styled like the module rows, badge at the right. `icon`: icon-only with
+     * the badge on the corner. Default follows the sidebar (`row` expanded, `icon` on the rail).
+     */
+    variant?: 'row' | 'icon';
+    /** Test id of the count badge. */
+    badgeTestId?: string;
+}
+/**
+ * A sidebar row that carries a badge and may open something (a panel, a popover): the
+ * notifications and contacts rows above the account bar. A real button that forwards its ref and
+ * rest props, so it can be a popover trigger (`<DropdownMenuTrigger asChild>`). The badge is
+ * visible in both the expanded row and the icon-only rail, and the accessible name carries the
+ * count in both.
+ */
+export declare const SidebarBadgeRow: import("react").ForwardRefExoticComponent<SidebarBadgeRowProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/shell/SidebarRowAction.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+export type SidebarRowActionPulse = 'active' | 'success' | 'error';
+export interface SidebarRowActionProps {
+    /** The row this control sits on is selected: the glyph takes the selection ink. */
+    active?: boolean;
+    onClick?: () => void;
+    /** Tooltip text and accessible label. */
+    label: string;
+    /** Reflected as aria-pressed for toggle controls. */
+    pressed?: boolean;
+    /**
+     * Demand attention while the row is idle: `active` pulses primary (work in progress),
+     * `success` pulses green (just finished), `error` is a steady red alert. A selected row wins.
+     */
+    pulse?: SidebarRowActionPulse | null;
+    'data-testid'?: string;
+    children: ReactNode;
+}
+/**
+ * The secondary control at the right edge of a sidebar row: a small muted glyph. Always visible
+ * (touch has no hover); hovering or focusing the row only brightens it a tone, through
+ * SidebarRowHoverContext. Stops propagation so it never triggers the row's own click.
+ */
+export declare function SidebarRowAction({ active, onClick, label, pressed, pulse, 'data-testid': testId, children, }: SidebarRowActionProps): import("react").JSX.Element;

package/dist/shell/StatusRow.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type StatusRowTone = 'progress' | 'success' | 'error';
+export interface StatusRowProps {
+    tone: StatusRowTone;
+    /** e.g. "Processing 3 files…". Always the accessible name; hidden visually when `compact`. */
+    label: string;
+    /** Opens the thing the status is about (the processing panel). */
+    onClick: () => void;
+    /** Icon-only (the collapsed rail). */
+    compact?: boolean;
+    /** Replaces the tone's default glyph. */
+    icon?: ReactNode;
+    'data-testid'?: string;
+}
+/**
+ * A live status line for the sidebar footer: a spinner and a short sentence that opens the
+ * thing it reports on. The host renders it ONLY while the state is relevant (work running,
+ * something failed), so a quiet app shows nothing. Announced politely to screen readers.
+ */
+export declare function StatusRow({ tone, label, onClick, compact, icon, 'data-testid': testId, }: StatusRowProps): import("react").JSX.Element;

package/dist/shell/TabHeader.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react';
+/** Fixed strings of the tab row. */
+export interface TabHeaderLabels {
+    /** A tab's close button (a tab's own `closeTooltip` wins). */
+    closeTab: string;
+}
+export declare const DEFAULT_TAB_HEADER_LABELS: TabHeaderLabels;
+export interface Tab {
+    id: string;
+    label: string | ReactNode;
+    testId?: string;
+    icon?: ReactNode;
+    /**
+     * An entity pill (conversation, workspace, …) shown in place of the icon + label. The app
+     * renders it, so the block stays free of entity components.
+     */
+    pill?: ReactNode;
+    count?: number;
+    /** Where the count sits relative to the label. Defaults to 'trailing'. */
+    countPlacement?: 'leading' | 'trailing';
+    /** Glyph INSIDE the count, in front of the number, so icon and count read as one object. */
+    countIcon?: ReactNode;
+    badge?: string | ReactNode;
+    disabled?: boolean;
+    tooltip?: string;
+    actions?: ReactNode;
+    /** Hover handlers from actions (e.g. a filter dropdown), attached to the whole tab wrapper. */
+    actionsHoverHandlers?: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    isProcessing?: boolean;
+    isVariable?: boolean;
+    onClose?: () => void;
+    closeTooltip?: string;
+    hasActiveFilters?: boolean;
+    /** Extra classes for the tab button. */
+    tabClassName?: string;
+}
+export interface TabHeaderProps {
+    tabs: Tab[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    /** Pinned to the far left before the tabs (e.g. the sidebar toggle). */
+    leading?: ReactNode;
+    leftContent?: ReactNode;
+    afterTabs?: ReactNode | ((isCompact: boolean) => ReactNode);
+    centerContent?: ReactNode | ((isCompact: boolean) => ReactNode);
+    /** Pinned to the true horizontal center of the row, independent of left/right widths. */
+    absoluteCenterContent?: ReactNode;
+    rightContent?: ReactNode | ((isCompact: boolean) => ReactNode);
+    className?: string;
+    /** Header width below which tabs collapse to icons. */
+    compactBreakpoint?: number;
+    labels?: Partial<TabHeaderLabels>;
+    /**
+     * `chips` renders every tab as a soft chip (for rows of closable items), `underline` as a plain
+     * underline tab. Default: chips when any tab can be closed, underline otherwise.
+     */
+    variant?: 'underline' | 'chips';
+    /** Root id (default `tab-header`). */
+    testId?: string;
+    /**
+     * Per-tab ids; defaults are the current ids. A tab's own id is `Tab.testId`, else `<tab id>-tab`
+     * (structural).
+     */
+    testIds?: Partial<Record<'count' | 'closeButton', string>>;
+}
+/** Underline tab row with leading / center / right slots; collapses to icons when narrow. */
+export declare function TabHeader({ tabs, activeTabId, onTabChange, leading, leftContent, afterTabs, centerContent, absoluteCenterContent, rightContent, className, compactBreakpoint, labels, variant, testId, testIds, }: TabHeaderProps): import("react").JSX.Element;

package/dist/shell/TipCard.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+/** Fixed strings of the tip card. */
+export interface TipCardLabels {
+    /** Default CTA text (the `ctaLabel` prop wins). */
+    showMe: string;
+    previousTip: string;
+    nextTip: string;
+    editTip: string;
+    /** The card's heading and accessible name. */
+    tip: string;
+    /** The dismiss button: it turns tips off (they come back from the account menu). */
+    hideTips: string;
+    /** "1 of 3". */
+    position: (index: number, count: number) => string;
+}
+export declare const DEFAULT_TIP_CARD_LABELS: TipCardLabels;
+export interface TipCardProps {
+    /** The tip text: one sentence. */
+    message: ReactNode;
+    /** Which tip is showing (0-based) out of `count`; the pager appears when `count` > 1. */
+    index?: number;
+    count?: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+    /** The single primary action; omit when the tip has none. */
+    ctaLabel?: string;
+    onCta?: () => void;
+    /** Turns tips off. The card is dismissible so it never becomes permanent furniture. */
+    onDismiss?: () => void;
+    /** Dev-only edit affordance: the host passes it only in development builds. */
+    onEdit?: () => void;
+    /** Hover pauses the host's tip rotation (desktop enhancement). */
+    onHoverChange?: (hovered: boolean) => void;
+    labels?: Partial<TipCardLabels>;
+    className?: string;
+    /** Card id (default `tip-row`). */
+    testId?: string;
+    /** Control ids; defaults are the current ids. */
+    testIds?: Partial<Record<'prev' | 'next' | 'cta' | 'edit' | 'dismiss', string>>;
+}
+/**
+ * The Smart Tips card: a compact muted tile. Header (bulb, "Tip", dismiss), one sentence, then
+ * ONE primary action with a quiet "n of m" pager. It is shown only while tips are on and a tip
+ * applies; the host owns which tip is current, rotation and the on/off preference.
+ */
+export declare function TipCard({ message, index, count, onPrev, onNext, ctaLabel, onCta, onDismiss, onEdit, onHoverChange, labels, className, testId, testIds, }: TipCardProps): import("react").JSX.Element;

package/dist/shell/ToolButton.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface ToolButtonProps {
+    onClick: () => void;
+    /** Accessible name and native tooltip. */
+    label: string;
+    /** The panel/page this opens is showing. */
+    active?: boolean;
+    'data-testid'?: string;
+    children: ReactNode;
+}
+/** An icon button for a topbar or toolbar: 36px (44px coarse), selection tint while active. */
+export declare function ToolButton({ onClick, label, active, 'data-testid': testId, children, }: ToolButtonProps): import("react").JSX.Element;