@xenide-io/the-old-ui-theme 0.3.2 → 0.4.3

package/dist/suite.d.mts

@@ -0,0 +1,760 @@
+import * as react from 'react';
+import { ReactNode, ComponentType, ButtonHTMLAttributes, CSSProperties, ElementType, PointerEvent } from 'react';
+import { ClassValue } from 'clsx';
+export { m } from 'motion/react';
+
+/** Full-bleed theme wash + soft clouds; uses ph-* tokens from each app's theme. */
+declare function TodayPageFrame({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+type LucideIcon = react.ComponentType<react.SVGProps<SVGSVGElement>>;
+type SuiteAppSlug$1 = 'shellstack' | 'tides' | 'turtletime' | 'kraken';
+declare function sourceToSuiteApp(source: string): SuiteAppSlug$1;
+declare function suiteAppLabel(source: string): string;
+/**
+ * Small line icon for list rows — the app's suite glyph with its brand
+ * accent on a muted base. Not the branded app tile (see SuiteAppIcon).
+ */
+declare function SourceAppGlyph({ source, className, }: {
+    source: string;
+    className?: string;
+}): react.JSX.Element;
+declare function SuiteAppStrip({ className, icons, }: {
+    className?: string;
+    icons?: Partial<Record<SuiteAppSlug$1, ReactNode>>;
+}): react.JSX.Element;
+declare function AnimatedSun({ className }: {
+    className?: string;
+}): react.JSX.Element;
+declare function AnimatedMoon({ className }: {
+    className?: string;
+}): react.JSX.Element;
+/** Sun through the day, moon from 18:00 to 06:00. */
+declare function TodayTimeIcon({ className }: {
+    className?: string;
+}): react.JSX.Element;
+declare function TodayTopBar({ refreshing, loading, onRefresh, appIcon, appName, }: {
+    refreshing?: boolean;
+    loading?: boolean;
+    onRefresh: () => void;
+    appIcon?: ReactNode;
+    appName?: string;
+}): react.JSX.Element;
+declare function getTodayGreeting(user?: {
+    first_name?: string;
+    name?: string;
+    email?: string;
+}, stats?: {
+    taskCount?: number;
+    overdueCount?: number;
+    hours?: number;
+}): string;
+declare function TodayHero({ message, }: {
+    message?: ReactNode;
+}): react.JSX.Element;
+declare function TodaySection({ icon: Icon, iconClassName, title, description, action, testId, children, }: {
+    icon: LucideIcon;
+    iconClassName?: string;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    testId?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+declare function TodayPanel({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare function TodayEmptyState({ title, description, }: {
+    title: string;
+    description?: string;
+}): react.JSX.Element;
+
+/**
+ * Structural types for theme primitives each app injects from
+ * `@xenide-io/the-old-ui-theme/ui` (the shared package must not depend on it).
+ * The real components satisfy these shapes, so apps can pass them directly.
+ */
+interface SuiteDropdownMenuProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    'aria-label': string;
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    className?: string;
+    panelClassName?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+type SuiteDropdownMenuComponent = ComponentType<SuiteDropdownMenuProps>;
+type SuiteDropdownItemComponent = ComponentType<ButtonHTMLAttributes<HTMLButtonElement>>;
+interface SuiteCommandItem {
+    id: string;
+    label: string;
+    shortcut?: string;
+    icon?: ReactNode;
+    onSelect: () => void;
+}
+type SuiteCommandPaletteComponent = ComponentType<{
+    items: SuiteCommandItem[];
+    isOpen: boolean;
+    onClose: () => void;
+    placeholder?: string;
+    className?: string;
+}>;
+/** App-branded spinner (each app has its own AppSpinner design). */
+type SuiteSpinnerComponent = ComponentType<{
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    label?: string;
+}>;
+
+declare function appSwitcherTriggerClass(open: boolean, collapsed?: boolean): string;
+declare function appSwitcherMarkClass(): string;
+/** No sticky Radix highlight while waiting for cross-app redirect. */
+declare function appSwitcherMenuItemClass(): string;
+declare function AppSwitcherMark({ children, collapsed, }: {
+    children: ReactNode;
+    collapsed?: boolean;
+}): react.JSX.Element;
+declare function AppSwitcherChevron({ open, collapsed, }: {
+    open: boolean;
+    collapsed?: boolean;
+}): react.JSX.Element;
+interface SuiteAppEntry {
+    slug: string;
+    name: string;
+    description: string;
+    icon: string;
+}
+/**
+ * Suite app switcher dropdown. Apps inject their brand mark/title, the
+ * visible app list, the cross-app navigation handler, and the theme
+ * dropdown primitives.
+ */
+declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapsed, dropdownMenu: DropdownMenu, dropdownItem: DropdownItem, }: {
+    apps: SuiteAppEntry[];
+    currentApp: string;
+    onSelect: (app: SuiteAppEntry) => void;
+    mark: ReactNode;
+    title: ReactNode;
+    collapsed?: boolean;
+    dropdownMenu: SuiteDropdownMenuComponent;
+    dropdownItem: SuiteDropdownItemComponent;
+}): react.JSX.Element;
+
+/** Cross-app (suite) notification from `/api/notifications/` — shared across ShellStack apps. */
+interface SuiteNotification {
+    id: string;
+    title: string;
+    body: string;
+    href: string;
+    kind: string;
+    source_app: string;
+    read_at: string | null;
+    created_at: string;
+    workspace: string | null;
+    organisation: string | null;
+}
+interface SuiteNotificationsResponse {
+    notifications: SuiteNotification[];
+    unread_count: number;
+}
+declare function SuiteNotificationBell({ fetchNotifications, markRead, markAllRead, dropdownMenu: DropdownMenu, cacheKey, }: {
+    fetchNotifications: () => Promise<SuiteNotificationsResponse>;
+    markRead: (id: string) => Promise<unknown>;
+    markAllRead: () => Promise<unknown>;
+    dropdownMenu: SuiteDropdownMenuComponent;
+    /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
+    cacheKey?: string | null;
+}): react.JSX.Element;
+
+/**
+ * Cmd/Ctrl+K command palette host. Apps build the item list and inject the
+ * theme CommandPalette primitive.
+ */
+declare function CommandPaletteHost({ items, isAuthenticated, placeholder, commandPalette: CommandPalette, }: {
+    items: SuiteCommandItem[];
+    isAuthenticated?: boolean;
+    placeholder?: string;
+    commandPalette: SuiteCommandPaletteComponent;
+}): react.JSX.Element | null;
+
+/** Command K — mount after idle so first paint stays light. */
+declare function DeferredChrome({ children }: {
+    children: ReactNode;
+}): react.JSX.Element | null;
+
+/**
+ * Suite mobile navigation drawer. Backdrop fade + panel slide, Escape to
+ * close, body scroll-lock and focus hand-off while open. Nav content stays
+ * app-side via `children`.
+ */
+declare function SuiteMobileDrawer({ open, onClose, children, side, showCloseButton, closeLabel, backdropLabel, dialogLabel, durationMs, dataTest, panelDataTest, panelClassName, }: {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    /** Edge the panel slides in from. */
+    side?: 'left' | 'right';
+    /** Standard close row (h-14, trailing X button) above the content. */
+    showCloseButton?: boolean;
+    closeLabel?: string;
+    backdropLabel?: string;
+    /** Accessible name for the dialog panel. */
+    dialogLabel?: string;
+    /** Slide/fade duration; also the close-transition unmount delay. */
+    durationMs?: number;
+    dataTest?: string;
+    panelDataTest?: string;
+    /** Panel surface overrides (e.g. `bg-ph-canvas`). */
+    panelClassName?: string;
+}): react.JSX.Element | null;
+
+type SuiteMenuIcon = ComponentType<{
+    className?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+}>;
+/**
+ * Suite mobile app bar — the standardized top of every app on phone/tablet.
+ * Fixed slot order across the suite: [menu] [brand/context] … [actions].
+ * Translucent + blurred (suite-skin.css `.suite-app-bar`), safe-area aware,
+ * 44px minimum touch targets. Desktop chrome (rail/top bar) stays app-side.
+ */
+declare function SuiteMobileHeader({ onMenuClick, menuIcon: MenuIcon, title, actions, menuLabel, menuDataTest, dataTest, className, }: {
+    /** Optional — omit to drop the hamburger (bottom-nav apps don't need one). */
+    onMenuClick?: () => void;
+    /** Leading button glyph — defaults to Menu; browse-style drawers can swap it. */
+    menuIcon?: SuiteMenuIcon;
+    /** Brand/context slot — app mark + title or app switcher. */
+    title?: ReactNode;
+    /** Right-hand slot — search, bell, avatar (keep this order). */
+    actions?: ReactNode;
+    menuLabel?: string;
+    menuDataTest?: string;
+    dataTest?: string;
+    className?: string;
+}): react.JSX.Element;
+
+interface SuiteUserMenuProps {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+    /** Destination for the "Profile settings" item. */
+    settingsHref: string;
+    onSignOut: () => void;
+    /** Fallback letter(s) when there is no avatar image. */
+    fallbackInitials?: string;
+    dataTest?: string;
+    className?: string;
+}
+/**
+ * Suite account context menu — one tap on the avatar opens a small menu
+ * with profile settings and sign out. Used in the mobile app bar of every
+ * app so account actions behave identically across the suite (no dedicated
+ * logout icon cluttering the mobile chrome).
+ */
+declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, dataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
+
+/** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
+type SuiteNavIcon = ComponentType<{
+    className?: string;
+    strokeWidth?: number | string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+}>;
+/**
+ * Suite bottom navigation — the mobile/tablet primary nav, identical in
+ * every app. Hick's Law: 5 items maximum (dev warning beyond that).
+ * Visuals come from suite-skin.css (`suite-bottom-nav`, `__pill`) so the
+ * translucent blur, safe-area padding, and press physics stay in sync
+ * across the suite; per-item content stays app-side via `items`.
+ */
+interface SuiteBottomNavItem {
+    href: string;
+    label: string;
+    icon: SuiteNavIcon;
+    active?: boolean;
+    dataTest?: string;
+}
+declare function SuiteBottomNav({ items, ariaLabel, dataTest, className, }: {
+    items: readonly SuiteBottomNavItem[];
+    ariaLabel?: string;
+    dataTest?: string;
+    className?: string;
+}): react.JSX.Element;
+
+/**
+ * The single source of truth for the ShellStack app family — used by the
+ * app switcher, mobile bottom nav, launchpad, and cross-app navigation.
+ * Slugs double as accent keys (see icons/app-accents.ts) and data-test
+ * suffixes (`switch-app-${slug}`, `suite-nav-${slug}`).
+ */
+type SuiteAppSlug = 'shellstack' | 'tides' | 'turtletime' | 'kraken';
+interface SuiteAppDefinition {
+    slug: SuiteAppSlug;
+    name: string;
+    description: string;
+    /** Public asset path — every app hosts all four icons. */
+    icon: string;
+    /** Landing route used after cross-app SSO redirect. */
+    landing: string;
+    /** Env var carrying the app's base URL (dev fallback included). */
+    baseUrlEnv: string;
+    baseUrlFallback: string;
+}
+/** Display order — launchpad first, then by daily workflow. */
+declare const SUITE_APPS: readonly SuiteAppDefinition[];
+declare const SUITE_APP_MAP: Readonly<Record<SuiteAppSlug, SuiteAppDefinition>>;
+/** Resolve an app's base URL: env var first, dev fallback second. */
+declare function suiteAppBaseUrl(slug: SuiteAppSlug): string;
+
+/**
+ * Today-page loading/empty calibrating state. Apps inject their branded
+ * AppSpinner; `variant` picks the ornamentation style:
+ * - `ring` — large spinner ring + ping behind the sun (TurtleTime/ShellStack)
+ * - `pulse` — pulsing sun only (Tides/Kraken)
+ */
+declare function TodayCalibrating({ onRetry, retrying, className, spinner: Spinner, variant, retrySpinnerClassName, }: {
+    onRetry?: () => void;
+    retrying?: boolean;
+    className?: string;
+    spinner: SuiteSpinnerComponent;
+    variant?: 'ring' | 'pulse';
+    retrySpinnerClassName?: string;
+}): react.JSX.Element;
+
+type SuiteTheme = 'system' | 'light' | 'dark';
+type SuiteResolvedTheme = 'light' | 'dark';
+interface SuiteThemeConfig {
+    /** localStorage key holding the stored preference. */
+    storageKey: string;
+    /** `data-theme` attribute value for the light theme. */
+    lightThemeId: string;
+    /** `data-theme` attribute value for the dark theme. */
+    darkThemeId: string;
+    /**
+     * Resolved theme to assume when `matchMedia` is unavailable
+     * (server render / pre-hydration).
+     */
+    fallbackTheme: SuiteResolvedTheme;
+    /**
+     * Optional `<meta id="theme-color-meta">` colours, synced whenever the
+     * theme is (re)applied after mount. Omit both to leave the meta tag
+     * untouched.
+     */
+    themeColorLight?: string;
+    themeColorDark?: string;
+}
+interface SuiteThemeContextValue {
+    theme: SuiteTheme;
+    resolvedTheme: SuiteResolvedTheme;
+    setTheme: (theme: SuiteTheme) => void;
+    toggleTheme: () => void;
+}
+/**
+ * Theme provider shared by suite apps. Each app's root layout runs a small
+ * boot script that applies `data-theme` before hydration; this provider
+ * adopts that DOM state on mount and owns every post-hydration change (user
+ * picks a theme, or the OS preference flips while set to `system`).
+ *
+ * Apps wrap this with their own `ThemeProvider`/`useTheme` module that pins
+ * the storage key, theme ids and meta colours.
+ */
+declare function SuiteThemeProvider({ config, children, }: {
+    config: SuiteThemeConfig;
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useSuiteTheme(): SuiteThemeContextValue;
+
+interface SuiteAiPreset {
+    label: string;
+    prompt: string;
+}
+/**
+ * Thin ShellStack AI slide-over shared by suite apps.
+ *
+ * One-shot completions via the shared `/api/ai/complete` endpoint. Apps
+ * inject their API helpers, preset prompts, brand icon and spinner. Renders
+ * its own floating launcher so it can be mounted once in the authenticated
+ * app shell.
+ */
+declare function SuiteAiPanel({ presets, emptyState, fetchStatus, complete, brandIcon: BrandIcon, spinner: Spinner, }: {
+    presets: SuiteAiPreset[];
+    /** Idle-state hint copy shown before the first request. */
+    emptyState: ReactNode;
+    fetchStatus: () => Promise<{
+        configured: boolean;
+    }>;
+    complete: (params: {
+        prompt: string;
+    }) => Promise<{
+        text: string;
+    }>;
+    brandIcon: ComponentType<{
+        className?: string;
+    }>;
+    spinner: ComponentType<{
+        className?: string;
+    }>;
+}): react.JSX.Element;
+
+/**
+ * Suite icon glyph definitions — pure path data, no React.
+ *
+ * Shared geometric grammar (lucide-compatible):
+ * - 24×24 viewBox
+ * - 2px strokes, round caps/joins (set by the renderer)
+ * - `fill="none" stroke="currentColor"` unless `filled: true`
+ *
+ * Elements flagged `accent: true` are rendered inside a group coloured by
+ * `var(--suite-icon-accent, currentColor)` — `<SuiteIcon accent="…">` sets the
+ * variable from `app-accents.ts`; without an accent they inherit the text
+ * colour like any lucide icon.
+ */
+type SuiteGlyphElement = {
+    kind: 'path';
+    d: string;
+    accent?: boolean;
+    filled?: boolean;
+} | {
+    kind: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    accent?: boolean;
+    filled?: boolean;
+} | {
+    kind: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number;
+    accent?: boolean;
+    filled?: boolean;
+};
+interface SuiteGlyph {
+    /** One-line description of what the mark depicts (used in docs/sheets). */
+    description: string;
+    elements: SuiteGlyphElement[];
+    /**
+     * The accent group carries a subtle CSS animation (today-sun rays only).
+     * Renderers must honour prefers-reduced-motion; see suite-icon.tsx.
+     */
+    animatedAccent?: boolean;
+}
+type SuiteIconName = 'timer-shell' | 'kanban-wave' | 'squid-doc' | 'stack-hex' | 'crew-bot' | 'workspace' | 'organisation' | 'integration-plug' | 'suite-grid' | 'bell-wave' | 'today-sun';
+declare const SUITE_GLYPHS: Record<SuiteIconName, SuiteGlyph>;
+declare const SUITE_ICON_NAMES: SuiteIconName[];
+
+/**
+ * Per-app brand colours for the suite icon system — the single place hexes
+ * live. `accent` tints a glyph's accent layer; `tile`/`onTile`/
+ * `onTileAccent` drive `<SuiteAppIcon>` (the programmatic favicon-style
+ * tile + glyph mark).
+ */
+type SuiteAccentSlug = 'turtletime' | 'tides' | 'kraken' | 'shellstack' | 'crew';
+interface SuiteAppAccent {
+    /** Display name (default aria label for app marks). */
+    label: string;
+    /** Brand accent — tints glyph accent layers via `--suite-icon-accent`. */
+    accent: string;
+    /** App tile background. */
+    tile: string;
+    /** Base glyph colour on the tile. */
+    onTile: string;
+    /** Accent-layer glyph colour on the tile. */
+    onTileAccent: string;
+}
+declare const APP_ACCENTS: Record<SuiteAccentSlug, SuiteAppAccent>;
+/** Which glyph represents each app. */
+declare const APP_GLYPHS: Record<SuiteAccentSlug, SuiteIconName>;
+
+interface SuiteIconProps {
+    name: SuiteIconName;
+    /** px size; a Tailwind sizing class on `className` also works. */
+    size?: number | string;
+    /** App slug — tints the glyph's accent layer with the app's brand hex. */
+    accent?: SuiteAccentSlug;
+    strokeWidth?: number;
+    /** Only today-sun animates; set false to freeze it. Reduced-motion safe. */
+    animated?: boolean;
+    /** Accessible label. Without it the icon is `aria-hidden` (decorative). */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Suite icon — hand-drawn glyphs on the lucide grammar (24×24, 2px strokes,
+ * round caps/joins). Strokes inherit `currentColor`, so ph-* text tokens just
+ * work; `accent` adds a per-app brand tint to the glyph's accent layer.
+ */
+declare function SuiteIcon({ name, size, accent, strokeWidth, animated, label, className, style, }: SuiteIconProps): react.JSX.Element;
+
+declare const SIZE_PRESETS: {
+    readonly sm: 28;
+    readonly md: 36;
+    readonly lg: 44;
+};
+interface SuiteAppIconProps {
+    app: SuiteAccentSlug;
+    /** px size, or a preset (sm 28 / md 36 / lg 44). */
+    size?: number | keyof typeof SIZE_PRESETS;
+    /** Accessible label; defaults to decorative (`aria-hidden`). */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * An app's simplified mark — brand tile + its suite glyph, drawn
+ * programmatically at any size (no cross-app <img> favicon lookups).
+ * Colours come from app-accents.ts.
+ */
+declare function SuiteAppIcon({ app, size, label, className, style, }: SuiteAppIconProps): react.JSX.Element;
+
+/** Mount non-critical chrome after the browser is idle (or a short timeout). */
+declare function useIdleMount(timeoutMs?: number): boolean;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Suite motion foundation.
+ *
+ * `LazyMotion` + `domAnimation` keeps the animation runtime (~15 kB) out of
+ * the initial bundle — features load with the first animated component.
+ * `strict` guarantees only the tree-shakeable `m` component is used inside
+ * the provider (never the heavier `motion` component).
+ *
+ * Usage:
+ *   <SuiteMotionProvider>
+ *     <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
+ *   </SuiteMotionProvider>
+ *
+ * Prefer CSS transitions for micro-interactions (hover/press/colour) and
+ * reach for `m` only when you need springs, gestures, or layout animation.
+ */
+declare function SuiteMotionProvider({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+/**
+ * Spring presets — the JS counterparts of the `ease-spring-*` timing
+ * functions defined in each app's tailwind config. Use these for entrances,
+ * sheets, drawers, and press feedback so JS and CSS motion feel identical.
+ * All respect `prefers-reduced-motion` when paired with
+ * `MotionConfig reducedMotion="user"` or CSS `motion-reduce:` variants.
+ */
+declare const SUITE_SPRINGS: {
+    /** Snappy panel/sheet entrances — small overshoot. */
+    readonly fast: {
+        readonly type: "spring";
+        readonly stiffness: 400;
+        readonly damping: 32;
+        readonly mass: 0.8;
+    };
+    /** Gentle scrims, fades, list staggers. */
+    readonly subtle: {
+        readonly type: "spring";
+        readonly stiffness: 260;
+        readonly damping: 26;
+        readonly mass: 1;
+    };
+    /** Press/tap feedback — quick settle, no wobble. */
+    readonly press: {
+        readonly type: "spring";
+        readonly stiffness: 600;
+        readonly damping: 35;
+        readonly mass: 0.5;
+    };
+};
+type SuiteSpringName = keyof typeof SUITE_SPRINGS;
+
+declare const WIDTHS: {
+    readonly full: "max-w-none";
+    readonly wide: "max-w-7xl";
+    readonly content: "max-w-6xl";
+    readonly narrow: "max-w-4xl";
+};
+type SuitePageWidth = keyof typeof WIDTHS;
+interface SuiteBreadcrumbsProps {
+    items: {
+        label: ReactNode;
+        href?: string;
+    }[];
+    className?: string;
+}
+/** Minimal slash-separated breadcrumb line. */
+declare function SuiteBreadcrumbs({ items, className }: SuiteBreadcrumbsProps): react.JSX.Element;
+declare function SuitePage({ children, width, inset, className, as: Component, dataTest, id, role, 'aria-live': ariaLive, }: {
+    children: ReactNode;
+    width?: SuitePageWidth;
+    inset?: boolean;
+    className?: string;
+    as?: ElementType;
+    dataTest?: string;
+    id?: string;
+    role?: string;
+    'aria-live'?: React.AriaAttributes['aria-live'];
+}): react.JSX.Element;
+declare function SuitePageHeader({ title, description, eyebrow, actions, className, titleClassName, dataTest, 
+/** Optional icon rendered before the title. */
+icon, 
+/** Use the animated sun/moon icon from the Today page. */
+todayIcon, todayIconClassName, 
+/** Small badge/pill next to the title (e.g. "Beta", org name). */
+badge, 
+/** Breadcrumb line rendered above the title. */
+breadcrumb, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+    titleClassName?: string;
+    dataTest?: string;
+    icon?: ReactNode;
+    todayIcon?: boolean;
+    todayIconClassName?: string;
+    badge?: ReactNode;
+    breadcrumb?: ReactNode;
+}): react.JSX.Element;
+declare function SuiteToolbar({ children, className, label, dataTest, }: {
+    children: ReactNode;
+    className?: string;
+    label?: string;
+    dataTest?: string;
+}): react.JSX.Element;
+declare function SuiteTabList({ children, className, label, dataTest, }: {
+    children: ReactNode;
+    className?: string;
+    label: string;
+    dataTest?: string;
+}): react.JSX.Element;
+declare function SuiteSectionHeader({ title, description, action, className, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
+interface SuiteSkeletonProps {
+    className?: string;
+    lines?: number;
+    circle?: boolean;
+    width?: string;
+}
+/**
+ * Shared skeleton using the-old-ui-theme `ph-skeleton` shimmer class.
+ * The shimmer animation is defined in the theme, so this component is
+ * framework-agnostic and works in any app that imports the theme.
+ */
+declare function SuiteSkeleton({ className, lines, circle, width, }: SuiteSkeletonProps): react.JSX.Element;
+declare function SuiteSkeletonCard({ className, rows, header, }: {
+    className?: string;
+    rows?: number;
+    header?: boolean;
+}): react.JSX.Element;
+declare function SuiteSkeletonList({ className, items, }: {
+    className?: string;
+    items?: number;
+}): react.JSX.Element;
+interface SuiteEmptyStateProps {
+    icon?: ReactNode;
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+    size?: 'sm' | 'md';
+}
+/**
+ * Branded empty state with a soft gradient orb and clear action affordance.
+ * Uses the app icon when available so empty states feel native to each app.
+ */
+declare function SuiteEmptyState({ icon, title, description, action, className, size, }: SuiteEmptyStateProps): react.JSX.Element;
+
+interface SuiteSettingsNavItem {
+    label: string;
+    href: string;
+    icon: ComponentType<{
+        className?: string;
+        'aria-hidden'?: boolean;
+    }> | ReactNode;
+    testId?: string;
+}
+interface SuiteSettingsMobileNavProps {
+    items: SuiteSettingsNavItem[];
+    activeHref: string;
+    onSelect: (href: string) => void;
+    dataTest?: string;
+}
+/**
+ * Horizontal scrollable settings nav for mobile.
+ * Replaces a native <select> with icon+label pills that are easier to scan,
+ * meet 44px touch targets, and preserve visual hierarchy (Law of UX: Hick's Law,
+ * Recognition over Recall).
+ */
+declare function SuiteSettingsMobileNav({ items, activeHref, onSelect, dataTest, }: SuiteSettingsMobileNavProps): react.JSX.Element;
+
+type CollapsedNode = ReactNode | ((collapsed: boolean) => ReactNode);
+interface SuiteSidebarNavItem {
+    href: string;
+    label: string;
+    icon: SuiteNavIcon;
+    active?: boolean;
+    onClick?: () => void;
+    badge?: ReactNode;
+    /** Optional colour class for the nav icon. */
+    iconClassName?: string;
+}
+interface SuiteSidebarProps {
+    /** Optional custom app switcher node, or a function of collapsed state. */
+    appSwitcher?: CollapsedNode;
+    /** Workspace/org/project switcher rendered below the app switcher. */
+    contextSwitcher: CollapsedNode;
+    navItems: SuiteSidebarNavItem[];
+    /** Optional secondary nav / tree rendered below primary nav. */
+    secondaryNav?: ReactNode;
+    userMenu: CollapsedNode;
+    notificationBell?: CollapsedNode;
+    /** Optional extra footer content placed next to the user menu. */
+    footerExtras?: CollapsedNode;
+    collapsed?: boolean;
+    className?: string;
+    /** Use the richer surface background instead of canvas. */
+    surface?: boolean;
+}
+/**
+ * Standardised ShellStack sidebar. Matches the original TurtleTime layout
+ * so the chrome feels familiar across all apps:
+ * - app switcher + notification bell in a compact header
+ * - workspace switcher at the top of the nav body
+ * - primary nav items styled like the original NavLink
+ * - avatar + optional logout in the footer
+ */
+declare function SuiteSidebar({ appSwitcher, contextSwitcher, navItems, secondaryNav, userMenu, notificationBell, footerExtras, collapsed, className, surface, }: SuiteSidebarProps): react.JSX.Element;
+
+interface SuiteAppLayoutProps {
+    sidebar: ReactNode;
+    children: ReactNode;
+    mobileHeader?: ReactNode;
+    bottomNav?: ReactNode;
+    /** Desktop sidebar width in px. */
+    sidebarWidth?: number;
+    /** True when the sidebar is collapsed to the icon rail. */
+    collapsed?: boolean;
+    /** Drag this to resize the sidebar. */
+    onStartResize?: (e: PointerEvent<HTMLDivElement>) => void;
+    /** Double-click to reset sidebar width. */
+    onResetWidth?: () => void;
+    className?: string;
+}
+/**
+ * Responsive ShellStack app shell. Desktop: resizable fixed sidebar +
+ * scrollable content with an optional drag handle. Mobile/tablet: mobile
+ * header + content + bottom nav. This is the single layout primitive every
+ * app should use.
+ */
+declare function SuiteAppLayout({ sidebar, children, mobileHeader, bottomNav, sidebarWidth, collapsed, onStartResize, onResetWidth, className, }: SuiteAppLayoutProps): react.JSX.Element;
+
+export { APP_ACCENTS, APP_GLYPHS, AnimatedMoon, AnimatedSun, AppSwitcher, AppSwitcherChevron, AppSwitcherMark, CommandPaletteHost, DeferredChrome, SUITE_APPS, SUITE_APP_MAP, SUITE_GLYPHS, SUITE_ICON_NAMES, SUITE_SPRINGS, SourceAppGlyph, type SuiteAccentSlug, SuiteAiPanel, type SuiteAiPreset, type SuiteAppAccent, type SuiteAppDefinition, type SuiteAppEntry, SuiteAppIcon, type SuiteAppIconProps, SuiteAppLayout, type SuiteAppLayoutProps, type SuiteAppSlug, SuiteAppStrip, SuiteBottomNav, type SuiteBottomNavItem, SuiteBreadcrumbs, type SuiteBreadcrumbsProps, type SuiteCommandItem, type SuiteCommandPaletteComponent, type SuiteDropdownItemComponent, type SuiteDropdownMenuComponent, type SuiteDropdownMenuProps, SuiteEmptyState, type SuiteGlyph, type SuiteGlyphElement, SuiteIcon, type SuiteIconName, type SuiteIconProps, SuiteMobileDrawer, SuiteMobileHeader, SuiteMotionProvider, type SuiteNotification, SuiteNotificationBell, type SuiteNotificationsResponse, SuitePage, SuitePageHeader, type SuitePageWidth, type SuiteResolvedTheme, SuiteSectionHeader, SuiteSettingsMobileNav, type SuiteSettingsNavItem, SuiteSidebar, type SuiteSidebarNavItem, SuiteSkeleton, SuiteSkeletonCard, SuiteSkeletonList, type SuiteSpinnerComponent, type SuiteSpringName, SuiteTabList, type SuiteTheme, type SuiteThemeConfig, type SuiteThemeContextValue, SuiteThemeProvider, SuiteToolbar, SuiteUserMenu, type SuiteUserMenuProps, TodayCalibrating, TodayEmptyState, TodayHero, TodayPageFrame, TodayPanel, TodaySection, TodayTimeIcon, TodayTopBar, appSwitcherMarkClass, appSwitcherMenuItemClass, appSwitcherTriggerClass, cn, getTodayGreeting, sourceToSuiteApp, suiteAppBaseUrl, suiteAppLabel, useIdleMount, useSuiteTheme };