import type { Snippet } from 'svelte';
/**
 * WorkspaceShell — SvelteKit-agnostic, SSR-safe admin shell primitive.
 *
 * A composition of snippet slots that lays out a typical workspace UI: brand
 * + nav sidebar, sticky topbar, main content, optional right-side inspector
 * panel and a thin icon rail. The component owns no domain logic — every
 * visible region (brand, nav, account menu, tools dock, etc.) is provided by
 * the consumer via Svelte 5 snippets.
 *
 * Responsive behavior:
 * - Desktop (>1240px): sidebar visible, inspector fixed-right when open.
 * - Tablet (961–1240px): sidebar collapses to icon rail.
 * - Mobile (≤960px): sidebar becomes a drawer with backdrop; inspector
 *   becomes a right-side drawer with backdrop.
 *
 * Sidebar collapse is controlled — consumer owns persistence. Mobile drawer
 * state defaults to internal/transient but can be lifted via the bindable
 * `mobileNavOpen` prop (see below) for consumers that need to close the
 * drawer in response to events the shell doesn't own (e.g. a route change
 * fired from a nav-tree click). Pair `bind:mobileNavOpen={...}` on the
 * shell with `<NavTree onNavigate={() => (mobileNavOpen = false)} />`
 * inside the `nav` snippet to close the drawer on every link click —
 * no DOM querying required.
 *
 * See `@happyvertical/smrt#1227` for the issue tracking this primitive,
 * and `happyvertical/smrt#1235` for the bindable-drawer follow-up.
 */
export interface Props {
    /** Brand/product title shown in the brand snippet area fallback. */
    title?: string;
    /** Secondary line under the title. */
    subtitle?: string;
    /** Small uppercase eyebrow label rendered above the title. */
    eyebrow?: string;
    /** Topbar mode label (e.g. "Local-first mode"). */
    modeLabel?: string;
    /** Status keyword that maps to a dot color. */
    modeStatus?: 'active' | 'offline' | 'local-only' | 'attention' | (string & {});
    /** Secondary detail line shown next to the mode badge. */
    modeDetail?: string;
    /** Whether the inspector panel/drawer is currently shown. */
    showInspector?: boolean;
    /**
     * Label rendered in the inspector header. Defaults to `'Inspector'`.
     * Consumers may rename to `'Properties'`, `'Details'`, etc.
     */
    inspectorTitle?: string;
    /**
     * Invoked when the inspector close button (or Escape) is activated.
     *
     * Focus restoration: because `showInspector` is a controlled prop, the
     * consumer owns when the inspector opens and is therefore responsible
     * for restoring focus to the activating element after close (WCAG
     * 2.4.3). A common pattern is to capture `document.activeElement`
     * immediately before flipping `showInspector` to `true`, then call
     * `.focus()` on it inside this handler.
     *
     * The component-owned mobile drawer handles focus restoration
     * internally — only the inspector is consumer-driven.
     */
    onCloseInspector?: () => void;
    /** Sidebar collapsed state (controlled by consumer). */
    collapsed?: boolean;
    /** Invoked when the internal collapse toggle is clicked. */
    onToggleCollapsed?: () => void;
    /** Whether to render the collapse toggle at all. Default: true. */
    collapsible?: boolean;
    /** Top-left brand area (logo + product name). */
    brand?: Snippet;
    /** Main sidebar navigation region. */
    nav?: Snippet;
    /** Bottom of sidebar (account menu, tenant switcher, etc.). */
    sidebarFooter?: Snippet;
    /** Right side of the top bar. */
    topbarActions?: Snippet;
    /** Optional vertical icon rail along the right edge. */
    inspectorRail?: Snippet;
    /**
     * Inspector panel content (right side). Rendered into a `position: fixed`
     * panel anchored to the right edge — z-index `22` on desktop, `22` on
     * mobile (with a `21` scrim).
     *
     * **Positioning conflict**: do NOT use this snippet simultaneously with
     * `<ToolsDock layout='topbar'>`. In topbar mode, the dock owns its own
     * `position: fixed` panel anchored to the bottom-right (z-index `40`)
     * with no z-index coordination against the shell's inspector — both
     * panels will visibly overlap and compete for clicks. Pick one:
     *   - For consumer-driven inspector content → use this snippet only,
     *     and use `<ToolsDock layout='rail'>` (the rail layout renders its
     *     panel inside its own aside, no positioning conflict)
     *   - For tools-dock-driven content → leave this snippet unused and
     *     render `<ToolsDock layout='topbar'>` inside `topbarActions`
     */
    inspector?: Snippet;
    /** Main content. */
    children: Snippet;
    /**
     * Mobile drawer open-state. Defaults to `false` and is managed
     * internally — the hamburger button, backdrop, and Escape key all
     * toggle it. Consumers who need to close the drawer in response to
     * events outside the shell (e.g. a nav-link click in their nav
     * snippet) can lift the state via `bind:mobileNavOpen={...}` and
     * mutate it directly. SSR-safe — initial value is honored on the
     * server (the drawer is only visible on the ≤960px breakpoint).
     */
    mobileNavOpen?: boolean;
}
declare const WorkspaceShell: import("svelte").Component<Props, {}, "mobileNavOpen">;
type WorkspaceShell = ReturnType<typeof WorkspaceShell>;
export default WorkspaceShell;
//# sourceMappingURL=WorkspaceShell.svelte.d.ts.map