@elaraai/east-ui 1.0.34 → 1.0.36

package/dist/src/layout/dock/index.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+import { type ExprType, type SubtypeExprOrValue, ArrayType, BooleanType, FunctionType, NullType, OptionType, StructType } from "@elaraai/east";
+import { UIComponentType } from "../../component.js";
+import { DockStyleType, type DockOptions } from "./types.js";
+export { DockStyleType, DockOrientationType, DockSideType, DockPersistType, type DockStyle, type DockOptions, } from "./types.js";
+/**
+ * Concrete struct mirroring the inline `Dock` variant in `component.ts`.
+ * Renderers reference this for `equalFor` / `ValueTypeOf`.
+ *
+ * @property body - The expanded content (UIComps) — kept mounted across collapse by default
+ * @property collapsed - Collapsed state (synced on change; omit for uncontrolled toggling)
+ * @property defaultCollapsed - Uncontrolled initial collapsed state
+ * @property onCollapsedChange - Callback invoked with the new collapsed state
+ * @property style - Presentation + behaviour sub-struct
+ */
+export declare const DockType: StructType<{
+    body: ArrayType<UIComponentType>;
+    collapsed: OptionType<BooleanType>;
+    defaultCollapsed: OptionType<BooleanType>;
+    onCollapsedChange: OptionType<FunctionType<[BooleanType], NullType>>;
+    style: OptionType<DockStyleType>;
+}>;
+export type DockType = typeof DockType;
+/**
+ * Creates a Dock — an inline panel that collapses along one axis to a compact
+ * icon rail and expands back to its full content, without leaving the
+ * document flow (siblings reflow; it never overlays).
+ *
+ * @param children - The expanded content (UIComps)
+ * @param options - Optional collapsed-state / behaviour / presentation fields
+ * @returns An East expression representing the Dock component
+ *
+ * @remarks
+ * The in-flow, collapse-to-rail sibling of `Expandable` (which does the
+ * opposite — a CSS takeover that fills the app container). A Dock stays an
+ * ordinary flex child: collapsed, it shrinks to `railSize` and the freed
+ * space is reclaimed by its siblings — so it can sit beside a drop target (a
+ * `Planner`, a board) and tuck away without covering it. Arbitrarily nestable;
+ * each dock keyed by its own structural storage key. Drive it from state with
+ * `collapsed` + `onCollapsedChange`, or omit both for uncontrolled toggling
+ * (optionally `persist`ed). Distinct from the disclosure `Collapsible`
+ * (trigger + content show/hide) and `Dialog` / `Drawer` (portalled overlays).
+ *
+ * @example
+ * ```ts
+ * import { East } from "@elaraai/east";
+ * import { Box, Dock, Text, UIComponentType } from "@elaraai/east-ui/internal";
+ *
+ * const sidebar = East.function([], UIComponentType, _$ =>
+ *     Dock.Root(
+ *         [Box.Root([Text.Root("Bookings library")], { padding: "3" })],
+ *         { icon: "book", label: "Bookings", expandedSize: "25%" },
+ *     ),
+ * );
+ * ```
+ */
+declare function createDock(children: SubtypeExprOrValue<ArrayType<UIComponentType>>, options?: DockOptions): ExprType<UIComponentType>;
+/**
+ * Dock primitive — an inline panel that collapses along an axis to an icon
+ * rail, staying in the document flow.
+ *
+ * @remarks
+ * Use `Dock.Root(children, opts)`. Types are exposed via `Dock.Types`.
+ */
+export declare const Dock: {
+    /**
+     * Creates a Dock component.
+     *
+     * @param children - The expanded content (UIComps)
+     * @param options - Optional collapsed-state / behaviour / presentation fields
+     * @returns An East expression representing the Dock component
+     *
+     * @example
+     * ```ts
+     * import { East } from "@elaraai/east";
+     * import { Box, Dock, Text, UIComponentType } from "@elaraai/east-ui/internal";
+     *
+     * const ex = East.function([], UIComponentType, _$ =>
+     *     Dock.Root(
+     *         [Box.Root([Text.Root("Bookings library")], { padding: "3" })],
+     *         { icon: "book", label: "Bookings", expandedSize: "25%" },
+     *     ),
+     * );
+     * ```
+     */
+    readonly Root: typeof createDock;
+    readonly Types: {
+        /**
+         * The concrete East type for Dock — mirrors the inline `Dock` variant
+         * in `component.ts`.
+         */
+        readonly Dock: StructType<{
+            body: ArrayType<UIComponentType>;
+            collapsed: OptionType<BooleanType>;
+            defaultCollapsed: OptionType<BooleanType>;
+            onCollapsedChange: OptionType<FunctionType<[BooleanType], NullType>>;
+            style: OptionType<DockStyleType>;
+        }>;
+        /** Presentation + behaviour config struct for Dock. */
+        readonly Style: StructType<{
+            readonly orientation: OptionType<import("@elaraai/east").VariantType<{
+                readonly horizontal: NullType;
+                readonly vertical: NullType;
+            }>>;
+            readonly side: OptionType<import("@elaraai/east").VariantType<{
+                readonly start: NullType;
+                readonly end: NullType;
+            }>>;
+            readonly expandedSize: OptionType<import("@elaraai/east").StringType>;
+            readonly railSize: OptionType<import("@elaraai/east").StringType>;
+            readonly icon: OptionType<import("@elaraai/east").StringType>;
+            readonly label: OptionType<import("@elaraai/east").StringType>;
+            readonly badge: OptionType<import("@elaraai/east").StringType>;
+            readonly persist: OptionType<import("@elaraai/east").VariantType<{
+                readonly none: NullType;
+                readonly local: NullType;
+                readonly session: NullType;
+            }>>;
+            readonly keepMounted: OptionType<BooleanType>;
+            readonly lazy: OptionType<BooleanType>;
+            readonly animated: OptionType<BooleanType>;
+        }>;
+        /** Collapse-axis variant (`horizontal` / `vertical`). */
+        readonly Orientation: import("@elaraai/east").VariantType<{
+            readonly horizontal: NullType;
+            readonly vertical: NullType;
+        }>;
+        /** Rail-edge variant (`start` / `end`). */
+        readonly Side: import("@elaraai/east").VariantType<{
+            readonly start: NullType;
+            readonly end: NullType;
+        }>;
+        /** Persistence variant (`none` / `local` / `session`). */
+        readonly Persist: import("@elaraai/east").VariantType<{
+            readonly none: NullType;
+            readonly local: NullType;
+            readonly session: NullType;
+        }>;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/src/layout/dock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/layout/dock/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACH,KAAK,QAAQ,EACb,KAAK,kBAAkB,EAEvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,EAIb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EACH,aAAa,EAKb,KAAK,WAAW,EACnB,MAAM,YAAY,CAAC;AAGpB,OAAO,EACH,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,KAAK,SAAS,EACd,KAAK,WAAW,GACnB,MAAM,YAAY,CAAC;AAMpB;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC;IAC9B,IAAI,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACjC,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,gBAAgB,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1C,iBAAiB,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;IACrE,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;CACpC,CAMC,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAiBvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,UAAU,CACf,QAAQ,EAAE,kBAAkB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,EACxD,OAAO,CAAC,EAAE,WAAW,GACtB,QAAQ,CAAC,eAAe,CAAC,CA+B3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,IAAI;IACb;;;;;;;;;;;;;;;;;;;OAmBG;;;QAGC;;;WAGG;;kBApID,SAAS,CAAC,eAAe,CAAC;uBACrB,UAAU,CAAC,WAAW,CAAC;8BAChB,UAAU,CAAC,WAAW,CAAC;+BACtB,UAAU,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAC;mBAC7D,UAAU,CAAC,aAAa,CAAC;;QAkI5B,uDAAuD;;;;;;;;;;;;;;;;;;;;;;;;QAEvD,yDAAyD;;;;;QAEzD,2CAA2C;;;;;QAE3C,0DAA0D;;;;;;;CAGxD,CAAC"}

package/dist/src/layout/dock/index.js

@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+import { East, ArrayType, BooleanType, FunctionType, NullType, OptionType, StructType, variant, some, none, } from "@elaraai/east";
+import { UIComponentType } from "../../component.js";
+import { DockStyleType, DockOrientationType, DockSideType, DockPersistType, } from "./types.js";
+// Re-export types
+export { DockStyleType, DockOrientationType, DockSideType, DockPersistType, } from "./types.js";
+// ============================================================================
+// DockType — standalone mirror of the inline `Dock` variant
+// ============================================================================
+/**
+ * Concrete struct mirroring the inline `Dock` variant in `component.ts`.
+ * Renderers reference this for `equalFor` / `ValueTypeOf`.
+ *
+ * @property body - The expanded content (UIComps) — kept mounted across collapse by default
+ * @property collapsed - Collapsed state (synced on change; omit for uncontrolled toggling)
+ * @property defaultCollapsed - Uncontrolled initial collapsed state
+ * @property onCollapsedChange - Callback invoked with the new collapsed state
+ * @property style - Presentation + behaviour sub-struct
+ */
+export const DockType = StructType({
+    body: ArrayType(UIComponentType),
+    collapsed: OptionType(BooleanType),
+    defaultCollapsed: OptionType(BooleanType),
+    onCollapsedChange: OptionType(FunctionType([BooleanType], NullType)),
+    style: OptionType(DockStyleType),
+});
+// ============================================================================
+// Dock Factory
+// ============================================================================
+/** Resolve a variant string shorthand (or pass a value/expression through). */
+function orientationValue(v) {
+    return typeof v === "string" ? East.value(variant(v, null), DockOrientationType) : v;
+}
+function sideValue(v) {
+    return typeof v === "string" ? East.value(variant(v, null), DockSideType) : v;
+}
+function persistValue(v) {
+    return typeof v === "string" ? East.value(variant(v, null), DockPersistType) : v;
+}
+/**
+ * Creates a Dock — an inline panel that collapses along one axis to a compact
+ * icon rail and expands back to its full content, without leaving the
+ * document flow (siblings reflow; it never overlays).
+ *
+ * @param children - The expanded content (UIComps)
+ * @param options - Optional collapsed-state / behaviour / presentation fields
+ * @returns An East expression representing the Dock component
+ *
+ * @remarks
+ * The in-flow, collapse-to-rail sibling of `Expandable` (which does the
+ * opposite — a CSS takeover that fills the app container). A Dock stays an
+ * ordinary flex child: collapsed, it shrinks to `railSize` and the freed
+ * space is reclaimed by its siblings — so it can sit beside a drop target (a
+ * `Planner`, a board) and tuck away without covering it. Arbitrarily nestable;
+ * each dock keyed by its own structural storage key. Drive it from state with
+ * `collapsed` + `onCollapsedChange`, or omit both for uncontrolled toggling
+ * (optionally `persist`ed). Distinct from the disclosure `Collapsible`
+ * (trigger + content show/hide) and `Dialog` / `Drawer` (portalled overlays).
+ *
+ * @example
+ * ```ts
+ * import { East } from "@elaraai/east";
+ * import { Box, Dock, Text, UIComponentType } from "@elaraai/east-ui/internal";
+ *
+ * const sidebar = East.function([], UIComponentType, _$ =>
+ *     Dock.Root(
+ *         [Box.Root([Text.Root("Bookings library")], { padding: "3" })],
+ *         { icon: "book", label: "Bookings", expandedSize: "25%" },
+ *     ),
+ * );
+ * ```
+ */
+function createDock(children, options) {
+    const hasStyle = options !== undefined && (options.orientation !== undefined || options.side !== undefined
+        || options.expandedSize !== undefined || options.railSize !== undefined
+        || options.icon !== undefined || options.label !== undefined || options.badge !== undefined
+        || options.persist !== undefined || options.keepMounted !== undefined
+        || options.lazy !== undefined || options.animated !== undefined);
+    const styleValue = hasStyle
+        ? East.value({
+            orientation: options.orientation !== undefined ? some(orientationValue(options.orientation)) : none,
+            side: options.side !== undefined ? some(sideValue(options.side)) : none,
+            expandedSize: options.expandedSize !== undefined ? some(options.expandedSize) : none,
+            railSize: options.railSize !== undefined ? some(options.railSize) : none,
+            icon: options.icon !== undefined ? some(options.icon) : none,
+            label: options.label !== undefined ? some(options.label) : none,
+            badge: options.badge !== undefined ? some(options.badge) : none,
+            persist: options.persist !== undefined ? some(persistValue(options.persist)) : none,
+            keepMounted: options.keepMounted !== undefined ? some(options.keepMounted) : none,
+            lazy: options.lazy !== undefined ? some(options.lazy) : none,
+            animated: options.animated !== undefined ? some(options.animated) : none,
+        }, DockStyleType)
+        : undefined;
+    return East.value(variant("Dock", {
+        body: children,
+        collapsed: options?.collapsed !== undefined ? some(options.collapsed) : none,
+        defaultCollapsed: options?.defaultCollapsed !== undefined ? some(options.defaultCollapsed) : none,
+        onCollapsedChange: options?.onCollapsedChange ? some(options.onCollapsedChange) : none,
+        style: styleValue ? some(styleValue) : none,
+    }), UIComponentType);
+}
+/**
+ * Dock primitive — an inline panel that collapses along an axis to an icon
+ * rail, staying in the document flow.
+ *
+ * @remarks
+ * Use `Dock.Root(children, opts)`. Types are exposed via `Dock.Types`.
+ */
+export const Dock = {
+    /**
+     * Creates a Dock component.
+     *
+     * @param children - The expanded content (UIComps)
+     * @param options - Optional collapsed-state / behaviour / presentation fields
+     * @returns An East expression representing the Dock component
+     *
+     * @example
+     * ```ts
+     * import { East } from "@elaraai/east";
+     * import { Box, Dock, Text, UIComponentType } from "@elaraai/east-ui/internal";
+     *
+     * const ex = East.function([], UIComponentType, _$ =>
+     *     Dock.Root(
+     *         [Box.Root([Text.Root("Bookings library")], { padding: "3" })],
+     *         { icon: "book", label: "Bookings", expandedSize: "25%" },
+     *     ),
+     * );
+     * ```
+     */
+    Root: createDock,
+    Types: {
+        /**
+         * The concrete East type for Dock — mirrors the inline `Dock` variant
+         * in `component.ts`.
+         */
+        Dock: DockType,
+        /** Presentation + behaviour config struct for Dock. */
+        Style: DockStyleType,
+        /** Collapse-axis variant (`horizontal` / `vertical`). */
+        Orientation: DockOrientationType,
+        /** Rail-edge variant (`start` / `end`). */
+        Side: DockSideType,
+        /** Persistence variant (`none` / `local` / `session`). */
+        Persist: DockPersistType,
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/src/layout/dock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/layout/dock/index.ts"],"names":[],"mappings":"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"}

package/dist/src/layout/dock/types.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+import { type SubtypeExprOrValue, BooleanType, FunctionType, NullType, OptionType, StringType, StructType, VariantType } from "@elaraai/east";
+/**
+ * The axis a {@link DockStyleType} collapses along.
+ *
+ * @property horizontal - Collapses its width to a vertical rail (a sidebar)
+ * @property vertical   - Collapses its height to a horizontal rail (a tray)
+ */
+export declare const DockOrientationType: VariantType<{
+    readonly horizontal: NullType;
+    readonly vertical: NullType;
+}>;
+export type DockOrientationType = typeof DockOrientationType;
+/**
+ * Which edge the collapsed rail pins to — also sets the toggle chevron
+ * direction.
+ *
+ * @property start - Leading edge (left when horizontal, top when vertical)
+ * @property end   - Trailing edge (right when horizontal, bottom when vertical)
+ */
+export declare const DockSideType: VariantType<{
+    readonly start: NullType;
+    readonly end: NullType;
+}>;
+export type DockSideType = typeof DockSideType;
+/**
+ * Where the uncontrolled collapsed state is persisted, keyed by the dock's
+ * structural storage key.
+ *
+ * @property none    - Not persisted (resets on reload)
+ * @property local   - `localStorage` (survives reload + browser restart)
+ * @property session - `sessionStorage` (survives reload, cleared with the tab)
+ */
+export declare const DockPersistType: VariantType<{
+    readonly none: NullType;
+    readonly local: NullType;
+    readonly session: NullType;
+}>;
+export type DockPersistType = typeof DockPersistType;
+/**
+ * Presentation + behaviour configuration for a Dock. Every field optional;
+ * the renderer falls back to a horizontal sidebar that pins to the `start`
+ * edge, `44px` rail, keep-mounted body.
+ *
+ * @property orientation - Axis it collapses along (default `horizontal`)
+ * @property side        - Edge the rail pins to → chevron direction (default `start`)
+ * @property expandedSize - Size ALONG the axis when expanded (px or %, e.g. `"25%"`)
+ * @property railSize    - Size when collapsed — the icon rail (default `44px`)
+ * @property icon        - Font Awesome icon name shown on the rail + header
+ * @property label       - Header title (expanded) + rail tooltip / accessible name (collapsed)
+ * @property badge       - Optional count/label shown on the rail + header
+ * @property persist     - Where the uncontrolled collapsed state is persisted (default `none`)
+ * @property keepMounted - Keep the body mounted while collapsed to preserve its scroll / drag / search state (default `true`)
+ * @property lazy        - Mount the body only on first expand (default `false`)
+ * @property animated    - Smoothly transition the size between rail and expanded (default `false`)
+ */
+export declare const DockStyleType: StructType<{
+    readonly orientation: OptionType<VariantType<{
+        readonly horizontal: NullType;
+        readonly vertical: NullType;
+    }>>;
+    readonly side: OptionType<VariantType<{
+        readonly start: NullType;
+        readonly end: NullType;
+    }>>;
+    readonly expandedSize: OptionType<StringType>;
+    readonly railSize: OptionType<StringType>;
+    readonly icon: OptionType<StringType>;
+    readonly label: OptionType<StringType>;
+    readonly badge: OptionType<StringType>;
+    readonly persist: OptionType<VariantType<{
+        readonly none: NullType;
+        readonly local: NullType;
+        readonly session: NullType;
+    }>>;
+    readonly keepMounted: OptionType<BooleanType>;
+    readonly lazy: OptionType<BooleanType>;
+    readonly animated: OptionType<BooleanType>;
+}>;
+export type DockStyleType = typeof DockStyleType;
+/** String shorthand for {@link DockOrientationType}. */
+export type DockOrientationLiteral = "horizontal" | "vertical";
+/** String shorthand for {@link DockSideType}. */
+export type DockSideLiteral = "start" | "end";
+/** String shorthand for {@link DockPersistType}. */
+export type DockPersistLiteral = "none" | "local" | "session";
+/**
+ * TypeScript style interface for {@link DockStyleType} — the flat config bag.
+ */
+export interface DockStyle {
+    /** Axis it collapses along (default `horizontal`). */
+    orientation?: SubtypeExprOrValue<DockOrientationType> | DockOrientationLiteral;
+    /** Edge the rail pins to → chevron direction (default `start`). */
+    side?: SubtypeExprOrValue<DockSideType> | DockSideLiteral;
+    /** Size along the axis when expanded (px or %, e.g. `"25%"`). */
+    expandedSize?: SubtypeExprOrValue<StringType>;
+    /** Size when collapsed — the icon rail (default `44px`). */
+    railSize?: SubtypeExprOrValue<StringType>;
+    /** Font Awesome icon name shown on the rail + header. */
+    icon?: SubtypeExprOrValue<StringType>;
+    /** Header title (expanded) + rail tooltip / accessible name (collapsed). */
+    label?: SubtypeExprOrValue<StringType>;
+    /** Optional count/label shown on the rail + header. */
+    badge?: SubtypeExprOrValue<StringType>;
+    /** Where the uncontrolled collapsed state is persisted (default `none`). */
+    persist?: SubtypeExprOrValue<DockPersistType> | DockPersistLiteral;
+    /** Keep the body mounted while collapsed to preserve its state (default `true`). */
+    keepMounted?: SubtypeExprOrValue<BooleanType>;
+    /** Mount the body only on first expand (default `false`). */
+    lazy?: SubtypeExprOrValue<BooleanType>;
+    /** Smoothly transition the size between rail and expanded (default `false`). */
+    animated?: SubtypeExprOrValue<BooleanType>;
+}
+/**
+ * Dock options — passed to `Dock.Root(children, opts)`. Extends
+ * {@link DockStyle} with the collapsed-state behaviour fields.
+ */
+export interface DockOptions extends DockStyle {
+    /**
+     * Collapsed state. Synced on change (forms convention), so a
+     * `State.bind`-driven value controls the dock reactively; omit for
+     * uncontrolled toggling via the built-in control.
+     */
+    collapsed?: SubtypeExprOrValue<BooleanType>;
+    /** Uncontrolled initial collapsed state (default `false`). */
+    defaultCollapsed?: SubtypeExprOrValue<BooleanType>;
+    /** Callback invoked with the new collapsed state when the user toggles. */
+    onCollapsedChange?: SubtypeExprOrValue<FunctionType<[BooleanType], NullType>>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/layout/dock/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/layout/dock/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACH,KAAK,kBAAkB,EACvB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACd,MAAM,eAAe,CAAC;AAEvB;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB;;;EAG9B,CAAC;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;EAGvB,CAAC;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe;;;;EAI1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;EAYxB,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC;AAEjD,wDAAwD;AACxD,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/D,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAC9C,oDAAoD;AACpD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,SAAS;IACtB,sDAAsD;IACtD,WAAW,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,GAAG,sBAAsB,CAAC;IAC/E,mEAAmE;IACnE,IAAI,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,GAAG,eAAe,CAAC;IAC1D,iEAAiE;IACjE,YAAY,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC9C,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,yDAAyD;IACzD,IAAI,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACtC,4EAA4E;IAC5E,KAAK,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACvC,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACvC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,GAAG,kBAAkB,CAAC;IACnE,oFAAoF;IACpF,WAAW,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC9C,6DAA6D;IAC7D,IAAI,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;CAC9C;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC1C;;;;OAIG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACnD,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;CACjF"}

package/dist/src/layout/dock/types.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+import { BooleanType, FunctionType, NullType, OptionType, StringType, StructType, VariantType, } from "@elaraai/east";
+/**
+ * The axis a {@link DockStyleType} collapses along.
+ *
+ * @property horizontal - Collapses its width to a vertical rail (a sidebar)
+ * @property vertical   - Collapses its height to a horizontal rail (a tray)
+ */
+export const DockOrientationType = VariantType({
+    horizontal: NullType,
+    vertical: NullType,
+});
+/**
+ * Which edge the collapsed rail pins to — also sets the toggle chevron
+ * direction.
+ *
+ * @property start - Leading edge (left when horizontal, top when vertical)
+ * @property end   - Trailing edge (right when horizontal, bottom when vertical)
+ */
+export const DockSideType = VariantType({
+    start: NullType,
+    end: NullType,
+});
+/**
+ * Where the uncontrolled collapsed state is persisted, keyed by the dock's
+ * structural storage key.
+ *
+ * @property none    - Not persisted (resets on reload)
+ * @property local   - `localStorage` (survives reload + browser restart)
+ * @property session - `sessionStorage` (survives reload, cleared with the tab)
+ */
+export const DockPersistType = VariantType({
+    none: NullType,
+    local: NullType,
+    session: NullType,
+});
+/**
+ * Presentation + behaviour configuration for a Dock. Every field optional;
+ * the renderer falls back to a horizontal sidebar that pins to the `start`
+ * edge, `44px` rail, keep-mounted body.
+ *
+ * @property orientation - Axis it collapses along (default `horizontal`)
+ * @property side        - Edge the rail pins to → chevron direction (default `start`)
+ * @property expandedSize - Size ALONG the axis when expanded (px or %, e.g. `"25%"`)
+ * @property railSize    - Size when collapsed — the icon rail (default `44px`)
+ * @property icon        - Font Awesome icon name shown on the rail + header
+ * @property label       - Header title (expanded) + rail tooltip / accessible name (collapsed)
+ * @property badge       - Optional count/label shown on the rail + header
+ * @property persist     - Where the uncontrolled collapsed state is persisted (default `none`)
+ * @property keepMounted - Keep the body mounted while collapsed to preserve its scroll / drag / search state (default `true`)
+ * @property lazy        - Mount the body only on first expand (default `false`)
+ * @property animated    - Smoothly transition the size between rail and expanded (default `false`)
+ */
+export const DockStyleType = StructType({
+    orientation: OptionType(DockOrientationType),
+    side: OptionType(DockSideType),
+    expandedSize: OptionType(StringType),
+    railSize: OptionType(StringType),
+    icon: OptionType(StringType),
+    label: OptionType(StringType),
+    badge: OptionType(StringType),
+    persist: OptionType(DockPersistType),
+    keepMounted: OptionType(BooleanType),
+    lazy: OptionType(BooleanType),
+    animated: OptionType(BooleanType),
+});
+//# sourceMappingURL=types.js.map

package/dist/src/layout/dock/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/layout/dock/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,GACd,MAAM,eAAe,CAAC;AAEvB;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC3C,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,QAAQ;CACrB,CAAC,CAAC;AAGH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACpC,KAAK,EAAE,QAAQ;IACf,GAAG,EAAE,QAAQ;CAChB,CAAC,CAAC;AAGH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;IACvC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;CACpB,CAAC,CAAC;AAGH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAAC;IACpC,WAAW,EAAE,UAAU,CAAC,mBAAmB,CAAC;IAC5C,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC;IAC9B,YAAY,EAAE,UAAU,CAAC,UAAU,CAAC;IACpC,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC;IAChC,IAAI,EAAE,UAAU,CAAC,UAAU,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC;IAC7B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC;IAC7B,OAAO,EAAE,UAAU,CAAC,eAAe,CAAC;IACpC,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC;IACpC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC;IAC7B,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC;CACpC,CAAC,CAAC"}

package/dist/src/layout/index.d.ts

@@ -12,4 +12,5 @@ export { Splitter } from "./splitter/index.js";
 export { Sticky } from "./sticky/index.js";
 export { ScrollArea } from "./scroll-area/index.js";
 export { Expandable } from "./expandable/index.js";
+export { Dock } from "./dock/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/layout/index.js

@@ -12,4 +12,5 @@ export { Splitter } from "./splitter/index.js";
 export { Sticky } from "./sticky/index.js";
 export { ScrollArea } from "./scroll-area/index.js";
 export { Expandable } from "./expandable/index.js";
+export { Dock } from "./dock/index.js";
 //# sourceMappingURL=index.js.map

package/dist/src/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/navigation/index.d.ts

@@ -4,5 +4,5 @@
  */
 export { Breadcrumb } from "./breadcrumb/index.js";
 export { NavList, NavListType, NavSectionType, NavItemType, type NavListStyle, type NavSectionInput, type NavItemInput, } from "./nav-list/index.js";
-export { Navigation, Pages, NavBindHandleType, navBindPlatformFn, NavBindPrimitives, routeVariantType, type NavRoutes, type NavRouteConfig, type NavConfig, type RouteVariantOf, type NavHandleType, type BoundNav, type PageConstructors, type PagesHandlers, type PagesInput, } from "./pages/index.js";
+export { Navigation, Pages, Route, NavBindHandleType, navBindPlatformFn, NavBindPrimitives, routeVariantType, type NavRoutes, type NavRouteConfig, type NavConfig, type RouteVariantOf, type NavHandleType, type BoundNav, type PageConstructors, type PagesHandlers, type PagesInput, type RouteInput, } from "./pages/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACH,OAAO,EACP,WAAW,EACX,cAAc,EACd,WAAW,EACX,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,YAAY,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,UAAU,GAClB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACH,OAAO,EACP,WAAW,EACX,cAAc,EACd,WAAW,EACX,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,YAAY,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,UAAU,GAClB,MAAM,kBAAkB,CAAC"}

package/dist/src/navigation/index.js

@@ -4,5 +4,5 @@
  */
 export { Breadcrumb } from "./breadcrumb/index.js";
 export { NavList, NavListType, NavSectionType, NavItemType, } from "./nav-list/index.js";
-export { Navigation, Pages, NavBindHandleType, navBindPlatformFn, NavBindPrimitives, routeVariantType, } from "./pages/index.js";
+export { Navigation, Pages, Route, NavBindHandleType, navBindPlatformFn, NavBindPrimitives, routeVariantType, } from "./pages/index.js";
 //# sourceMappingURL=index.js.map

package/dist/src/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACH,OAAO,EACP,WAAW,EACX,cAAc,EACd,WAAW,GAId,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,GAUnB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/navigation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACH,OAAO,EACP,WAAW,EACX,cAAc,EACd,WAAW,GAId,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,UAAU,EACV,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,GAWnB,MAAM,kBAAkB,CAAC"}

package/dist/src/navigation/pages/index.d.ts

@@ -101,14 +101,6 @@ export interface PagesInput<R extends NavRoutes> {
  * Build a `<Pages>` content-switcher from a bound nav handle + a typed page
  * registry.
  *
- * The nullary `render` reads `current()` on the **passed** handle (no internal
- * re-bind) and `match`es the active route to its page body. The bodies live in
- * the match arms (in the IR), so the manifest walk collects every page's binds
- * (the union) while only the matched arm executes — the renderer mounts just
- * the active page (leaf-only, visible-only). The render closes over `nav`, so
- * its `current()` read subscribes to the same store the app's handle is bound
- * to (#114).
- *
  * @param input - The {@link PagesInput} (`nav` handle + `pages` registry).
  * @returns A `Pages` `UIComponentType` value.
  */
@@ -126,4 +118,48 @@ export declare const Pages: {
     /** Build a `<Pages>` content-switcher from `{ nav, pages }`. See {@link createPages}. */
     readonly Root: typeof createPages;
 };
+/**
+ * The input to the `<Route>` slot: the nav handle (bound once in the enclosing
+ * `<Reactive>` via `Navigation.bind`, shared with the body `<Pages>` and the
+ * chrome) plus the typed route registry — one body per route, receiving
+ * `($, payload, nav)` exactly like {@link PagesHandlers}.
+ *
+ * @remarks
+ * `R` is fixed by `nav`, so every `routes` handler is contextually typed and
+ * the registry is exhaustive against the `Navigation.config`.
+ */
+export interface RouteInput<R extends NavRoutes> {
+    /** The nav handle from `Navigation.bind(config, key, initial)`, bound in the enclosing `<Reactive>`. */
+    nav: BoundNav<R>;
+    /** One body per route — see {@link PagesHandlers}. `R` is fixed by `nav`, so the handlers are contextually typed. */
+    routes: PagesHandlers<NoInfer<R>>;
+}
+/**
+ * Build a `<Route>` hosting slot from a bound nav handle + a typed route
+ * registry — `<Pages>` generalized to any slot.
+ *
+ * Renders only the active route's body and remounts it on navigation, but is
+ * placeable anywhere (a header widget, a sidebar, a drawer body). The body
+ * `<Pages>` and any number of `<Route>` slots bind the **same** `nav` handle,
+ * so they stay in lockstep and each remounts *its own* slot on navigation.
+ *
+ * @param input - The {@link RouteInput} (`nav` handle + `routes` registry).
+ * @returns A `Route` `UIComponentType` value.
+ */
+declare function createRoute<R extends NavRoutes>({ nav, routes }: RouteInput<R>): ExprType<typeof UIComponentType>;
+/**
+ * The `Route` namespace — the nav-typed hosting slot.
+ *
+ * @remarks
+ * Authored as the `<Route nav={…} routes={{…}} />` tag; `Route.Root({ nav,
+ * routes })` is the underlying factory. Use it to swap a **stateful**
+ * component (its own `<Reactive>` / binds) in any slot by route: each case is
+ * a self-contained component built with the existing binds, torn down and
+ * rebuilt fresh when the route changes. For a non-route key (a `State`-bound
+ * mode, a tagged selection), use `<Match on cases>` instead.
+ */
+export declare const Route: {
+    /** Build a `<Route>` hosting slot from `{ nav, routes }`. See {@link createRoute}. */
+    readonly Root: typeof createRoute;
+};
 //# sourceMappingURL=index.d.ts.map