import { FC, ReactNode } from 'react';
import { N as TimbalChatProps, G as ThreadWelcomeProps } from './chat-rMlckAQG.cjs';
import { WorkforceItem } from '@timbal-ai/timbal-sdk';
import * as react_jsx_runtime from 'react/jsx-runtime';
import '@assistant-ui/react';

interface TimbalChatShellProps extends Omit<TimbalChatProps, "workforceId"> {
    /**
     * Pre-selected workforce id. When omitted, the shell fetches the workforce
     * list from `{baseUrl}/workforce` and picks the first agent automatically.
     */
    workforceId?: string;
    /** Branding rendered at the start of the header (logo, etc). */
    brand?: ReactNode;
    /** Extra content rendered at the end of the header (theme toggle, logout). */
    headerActions?: ReactNode;
    /** Hide the built-in workforce selector. Default: false. */
    hideWorkforceSelector?: boolean;
    /** Class for the outer flex container. */
    className?: string;
    /** Class for the header bar. */
    headerClassName?: string;
}
/**
 * Drop-in shell that wraps `TimbalChat` with the Studio playground chrome:
 * floating topbar with brand + workforce selector + actions, soft gradient
 * background, and the chat thread filling the remaining vertical space.
 *
 * Falls back to picking the first available workforce when `workforceId`
 * isn't supplied.
 */
declare const TimbalChatShell: FC<TimbalChatShellProps>;

interface TimbalStudioShellProps extends Omit<TimbalChatProps, "workforceId"> {
    /**
     * Pin the chat to a specific workforce. When omitted, the shell fetches
     * the workforce list via `useWorkforces()` and lets the sidebar drive
     * selection.
     */
    workforceId?: string;
    /**
     * Pre-loaded workforce list. When omitted, the shell fetches it.
     * Useful for stories / SSR / preview environments.
     */
    workforces?: WorkforceItem[];
    /** Custom fetch for the workforce list (mock fetch in preview mode). */
    workforcesFetch?: (url: string, options?: RequestInit) => Promise<Response>;
    /** Base URL for the workforce list. Default: `/api`. */
    workforcesBaseUrl?: string;
    /** Brand mark rendered in the sidebar header. Default: `<TimbalMark />`. */
    brand?: ReactNode;
    /** Logo element rendered in the collapsed sidebar header. Default: uses brand if default, otherwise falls back to the open chevron. */
    logo?: ReactNode;
    /** Extra actions rendered at the right of the floating top bar. */
    headerActions?: ReactNode;
    /** Nodes rendered at the left of the floating top bar (after the menu button). */
    headerStart?: ReactNode;
    /** Initial collapse state when no persisted value exists. Default: false. */
    defaultCollapsed?: boolean;
    /** localStorage key for persisting the collapse state. Default set. */
    persistKey?: string | null;
    /** Pixel breakpoint below which the sidebar becomes a drawer. Default 768. */
    mobileBreakpointPx?: number;
    /** Caption shown in the sidebar footer when no user is signed in. */
    sidebarEmptyCaption?: string | null;
}
/**
 * Opinionated Timbal studio layout — floating sidebar with workforce picker,
 * top bar with optional mode toggle / actions, and a `<TimbalChat />` filling
 * the rest. Manages collapse state, mobile drawer, and workforce selection
 * out of the box. For more control compose `StudioSidebar` + `TimbalChat`
 * directly.
 */
declare const TimbalStudioShell: FC<TimbalStudioShellProps>;

/**
 * A sidebar nav entry. A `WorkforceItem` plus an **optional** leading `icon`
 * (e.g. a lucide glyph for a route: Dashboard, Inbox, Settings). The icon is
 * purely additive — existing `WorkforceItem[]` callers keep working unchanged.
 *
 * Use this when `StudioSidebar` drives app route navigation and you want an
 * icon per item — so you never need to hand-roll a custom nav rail.
 *
 * @example
 * ```tsx
 * import { LayoutDashboard, Inbox, Settings } from "lucide-react";
 *
 * const items: StudioSidebarItem[] = [
 *   { id: "dashboard", name: "Dashboard", icon: <LayoutDashboard /> },
 *   { id: "inbox", name: "Alert inbox", icon: <Inbox /> },
 *   { id: "settings", name: "Settings", icon: <Settings /> },
 * ];
 *
 * <StudioSidebar items={items} selectedId={view} onSelect={setView} />
 * ```
 */
type StudioSidebarItem = WorkforceItem & {
    icon?: ReactNode;
};

/**
 * Panel appearance:
 * - `"floating"` — rounded card with a gap around it (studio playground chrome).
 * - `"flush"` — full-height rail attached to the viewport edge with a single
 *   hairline border; the standard product-dashboard look.
 */
type StudioSidebarVariant = "floating" | "flush";
interface StudioSidebarProps {
    /**
     * Nav entries to display. Each is a `WorkforceItem` (`{ id, name }` is
     * enough) plus an **optional `icon`** for route-style navigation
     * (Dashboard / Inbox / Settings). When omitted entirely, the sidebar
     * fetches workforces via the shared `useWorkforces()` hook.
     *
     * This is the canonical app sidebar — pass it to `AppShell.sidebar`. Do
     * **not** hand-roll a custom `<nav>` rail; pass `icon` here instead.
     *
     * @example
     * ```tsx
     * import { LayoutDashboard, Inbox, Boxes } from "lucide-react";
     *
     * <AppShell
     *   sidebar={
     *     <StudioSidebar
     *       brand={<span className="text-sm font-semibold">SOC</span>}
     *       items={[
     *         { id: "dashboard", name: "Dashboard", icon: <LayoutDashboard /> },
     *         { id: "inbox", name: "Alert inbox", icon: <Inbox /> },
     *         { id: "assets", name: "Asset inventory", icon: <Boxes /> },
     *       ]}
     *       selectedId={view}
     *       onSelect={setView}
     *     />
     *   }
     * >
     *   …
     * </AppShell>
     * ```
     */
    items?: StudioSidebarItem[];
    /**
     * @deprecated Use `items`. Retained for back-compat — `items` takes
     * precedence when both are supplied. The sidebar is general nav now, not
     * only a workforce picker.
     */
    workforces?: StudioSidebarItem[];
    selectedId?: string;
    onSelect?: (id: string) => void;
    /** Initial collapse state when no persisted value exists. Default: false. */
    defaultCollapsed?: boolean;
    /**
     * localStorage key for persisting the collapse state. Pass `null` to
     * disable persistence. Default: `"timbal-studio-sidebar-collapsed"`.
     */
    persistKey?: string | null;
    /**
     * Pixel breakpoint below which the sidebar becomes a drawer.
     * Default: 768.
     */
    mobileBreakpointPx?: number;
    /** Brand element rendered in the sidebar header. Default: `<TimbalMark />`. */
    brand?: ReactNode;
    /** Logo element rendered in the collapsed sidebar header. Default: uses brand if default, otherwise falls back to the open chevron. */
    logo?: ReactNode;
    /** Caption shown in the footer when no user is signed in. */
    emptyCaption?: string | null;
    /** External control over the mobile drawer (used by `TimbalStudioShell`). */
    mobileOpen?: boolean;
    onMobileOpenChange?: (open: boolean) => void;
    /**
     * Notified with the sidebar inset width (px) whenever collapse state changes.
     * Use to inset a sibling main column. `AppShell` wires this automatically.
     */
    onInsetChange?: (insetPx: number) => void;
    /**
     * Panel appearance. Default **`"flush"`** — a full-height rail attached to
     * the viewport edge with a single hairline border (the standard product
     * dashboard look). Pass `"floating"` for the rounded studio-style card with
     * a gap around it (what `TimbalStudioShell` uses).
     */
    variant?: StudioSidebarVariant;
}
/**
 * Floating, collapsible workforce sidebar. Manages its own collapse state
 * (persisted to localStorage by default) and mobile drawer behaviour. For
 * a fully composed shell with the chat already wired use
 * `TimbalStudioShell`.
 */
declare const StudioSidebar: FC<StudioSidebarProps>;

interface StudioSidebarBackdropProps {
    open: boolean;
    onClose: () => void;
}
/** Mobile drawer backdrop. */
declare const StudioSidebarBackdrop: FC<StudioSidebarBackdropProps>;

interface TimbalMarkProps {
    className?: string;
    /** Square size in CSS pixels (matches `--studio-chrome-pill-height` at 40). */
    size?: number;
    /**
     * Override the symbol shown inside the shader. Defaults to the embedded
     * Timbal mark — pass any image URL or data URI to brand the chat with
     * your own logo while keeping the liquid-metal motion.
     */
    src?: string;
}
/**
 * Timbal mark rendered with the Paper Design LiquidMetal shader.
 *
 * The Timbal symbol is embedded as a data URI so the library works without
 * the consumer having to host the asset. Pass `src` to use a custom logo.
 */
declare function TimbalMark({ className, size, src, }: TimbalMarkProps): react_jsx_runtime.JSX.Element;

type ModeToggleTheme = "light" | "dark" | "system";
interface ModeToggleProps {
    /**
     * Current theme. When omitted, the toggle reads from / writes to the
     * `.dark` class on `<html>` directly — useful for apps that don't have
     * a theme manager yet.
     */
    theme?: ModeToggleTheme | string;
    /** Called when the user clicks the toggle. */
    setTheme?: (theme: ModeToggleTheme) => void;
    className?: string;
    /** ARIA label / tooltip. Default: "Toggle theme". */
    label?: string;
}
/**
 * Sun/moon theme toggle styled to sit in the studio top bar.
 *
 * Two integration modes:
 *
 * 1. Pass `theme` + `setTheme` (e.g. from `next-themes`'s `useTheme`).
 *    The component is then fully controlled.
 * 2. Omit both. The toggle reads/writes `.dark` on `<html>` and persists
 *    the choice to `localStorage` under `STORAGE_KEYS.theme`. For SSR or
 *    zero flash on first paint, mirror that key in a blocking `<script>` in
 *    `index.html` before your bundle loads.
 */
declare const ModeToggle: FC<ModeToggleProps>;

/** Studio navigation mode — mirrors timbal-platform `STUDIO_NAV_MODE`. */
declare const STUDIO_NAV_MODE: {
    readonly BUILD: "build";
    readonly OPERATE: "operate";
};
type StudioNavMode = (typeof STUDIO_NAV_MODE)[keyof typeof STUDIO_NAV_MODE];
interface StudioModeSwitchProps {
    value: StudioNavMode;
    onChange: (mode: StudioNavMode) => void;
    className?: string;
    buildLabel?: string;
    manageLabel?: string;
    "aria-label"?: string;
}
/**
 * Build / Manage pill switch — same control as timbal-platform `StudioModeSwitch`.
 */
declare const StudioModeSwitch: FC<StudioModeSwitchProps>;

interface StudioWelcomeProps extends ThreadWelcomeProps {
    /** Override the brand mark rendered above the heading. */
    icon?: ReactNode;
}
/**
 * Welcome screen with the staggered Timbal mark + heading + subheading.
 * Drop in as the `components.Welcome` slot of `<Thread />` /
 * `<TimbalChat />` to replace the default sparkle illustration.
 */
declare const StudioWelcome: FC<StudioWelcomeProps>;

export { ModeToggle, type ModeToggleProps, type ModeToggleTheme, STUDIO_NAV_MODE, StudioModeSwitch, type StudioModeSwitchProps, type StudioNavMode, StudioSidebar, StudioSidebarBackdrop, type StudioSidebarItem, type StudioSidebarProps, type StudioSidebarVariant, StudioWelcome, type StudioWelcomeProps, TimbalChatShell, type TimbalChatShellProps, TimbalMark, type TimbalMarkProps, TimbalStudioShell, type TimbalStudioShellProps };