@happyvertical/smrt-svelte 0.51.39 → 0.53.0

package/dist/components/workspace/admin-shell/mobile-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-shell.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/mobile-shell.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,0EAA0E;AAC1E,wBAAgB,WAAW,CAAC,OAAO,EAAE;IACnC,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,GAAG,aAAa,CAGhB;AAID,uCAAuC;AACvC,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,8DAA8D;AAC9D,MAAM,WAAW,YAAY;IAC3B,yBAAyB;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,qBAAa,YAAY;;IACvB,MAAM,UAAS;gBAOH,OAAO,GAAE,mBAAwB;IAM7C,sEAAsE;IACtE,MAAM,CAAC,MAAM,EAAE,YAAY,GAAG,OAAO;IAwBrC,6EAA6E;IAC7E,KAAK,IAAI,IAAI;CAKd;AAID;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,OAAO,CAGV;AAID,wDAAwD;AACxD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B;AAED,6CAA6C;AAC7C,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,sEAAsE;AACtE,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAE,MAAM,GACX,OAAO,CAMT;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,EAC1D,KAAK,EAAE,CAAC,EAAE,EACV,IAAI,EAAE,MAAM,GACX,CAAC,EAAE,CASL;AAID,iFAAiF;AACjF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,2CAA2C;AAC3C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;IAE9C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,IAAI,CAAC;CACxC;AAED,mEAAmE;AACnE,MAAM,WAAW,cAAc;IAC7B,yEAAyE;IACzE,WAAW,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,8DAA8D;IAC9D,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACjD;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,CAAC,SAAS,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC9C,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,cAAc,CAsC/C;AAID;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GACxB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,wCAAwC;AACxC,MAAM,WAAW,gBAAgB,CAC/B,CAAC,SAAS,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAC9C,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC3E,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,gBAAgB,CAclB;AAID;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpD,wCAAwC;AACxC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;CACvB,GAAG,aAAa,CAGhB;AAED,4EAA4E;AAC5E,eAAO,MAAM,wBAAwB,2BAA2B,CAAC;AAEjE;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB,SAAS,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC,GACrC,aAAa,CAAC,eAAe,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC,CAAC,CAAC;AAE/D,oFAAoF;AACpF,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/components/workspace/admin-shell/mobile-shell.js

@@ -0,0 +1,165 @@
+/** Classify a viewport from the phone and desktop media-query matches. */
+export function viewportFor(matches) {
+    if (matches.phone)
+        return 'phone';
+    return matches.desktop ? 'desktop' : 'tablet';
+}
+/**
+ * Hide-on-scroll state machine for the phone top bar (and anything that
+ * slides with it). Feed it every scroll position; read `hidden`. Travel
+ * accumulates in one direction and resets when the direction reverses.
+ */
+export class ScrollChrome {
+    hidden = false;
+    #lastY = 0;
+    #travel = 0;
+    #revealWithin;
+    #hideAfter;
+    #showAfter;
+    constructor(options = {}) {
+        this.#revealWithin = options.revealWithin ?? 56;
+        this.#hideAfter = options.hideAfter ?? 12;
+        this.#showAfter = options.showAfter ?? 4;
+    }
+    /** Feed a scroll sample; returns whether the chrome is now hidden. */
+    update(sample) {
+        const max = sample.maxY ?? Number.POSITIVE_INFINITY;
+        const y = Math.min(Math.max(sample.y, 0), Math.max(max, 0));
+        if (sample.pinned || y <= this.#revealWithin) {
+            this.hidden = false;
+            this.#lastY = y;
+            this.#travel = 0;
+            return this.hidden;
+        }
+        const delta = y - this.#lastY;
+        this.#lastY = y;
+        if (delta === 0)
+            return this.hidden;
+        this.#travel =
+            Math.sign(delta) === Math.sign(this.#travel)
+                ? this.#travel + delta
+                : delta;
+        if (this.#travel >= this.#hideAfter)
+            this.hidden = true;
+        else if (-this.#travel >= this.#showAfter)
+            this.hidden = false;
+        return this.hidden;
+    }
+    /** Show the chrome and forget the scroll history (e.g. after navigating). */
+    reset() {
+        this.hidden = false;
+        this.#lastY = 0;
+        this.#travel = 0;
+    }
+}
+// ---- On-screen keyboard ---------------------------------------------------
+/**
+ * `visualViewport` heuristic: the keyboard is open when the visible viewport
+ * is much shorter than the layout viewport. `scale` undoes pinch zoom, which
+ * also shrinks `visualViewport.height`.
+ */
+export function keyboardLikelyOpen(input) {
+    const visible = input.visualHeight * (input.scale ?? 1);
+    return input.layoutHeight - visible > (input.threshold ?? 150);
+}
+/** Drop trailing slashes (`/` stays `/`). */
+export function normalizeShellPath(path) {
+    return path.replace(/\/+$/, '') || '/';
+}
+/** Whether `path` is the item's page or (unless `exact`) below it. */
+export function shellNavItemMatches(item, path) {
+    const href = normalizeShellPath(item.href);
+    const current = normalizeShellPath(path);
+    if (href === current)
+        return true;
+    if (item.exact || href === '/')
+        return false;
+    return current.startsWith(`${href}/`);
+}
+/** The chain of nav items from the top level down to the one matching `path`. */
+export function findShellNavTrail(items, path) {
+    for (const item of items) {
+        const childTrail = item.children
+            ? findShellNavTrail(item.children, path)
+            : [];
+        if (childTrail.length > 0)
+            return [item, ...childTrail];
+        if (shellNavItemMatches(item, path))
+            return [item];
+    }
+    return [];
+}
+/**
+ * The single source for a page's place in the workspace: breadcrumbs on
+ * wider screens and the phone top bar's back target both come from here.
+ *
+ * Section homes (the home page and top-level nav pages) have no ancestors.
+ * Anything else lists the workspace home, the nav items above it (a nested
+ * nav page's parent item counts, even when its URL is not below it), then the
+ * page-given `parents`. The current page is never a crumb.
+ */
+export function shellPageTrailFor(input) {
+    const path = normalizeShellPath(input.path);
+    const home = normalizeShellPath(input.homeHref);
+    const parents = [...(input.parents ?? [])];
+    const trail = findShellNavTrail(input.navItems, path);
+    const last = trail.at(-1);
+    const currentItem = last && normalizeShellPath(last.href) === path ? last : null;
+    const current = currentItem
+        ? { label: currentItem.label, href: currentItem.href }
+        : null;
+    const topLevelHome = path === home ||
+        input.navItems.some((item) => normalizeShellPath(item.href) === path);
+    if (topLevelHome && parents.length === 0) {
+        return { sectionHome: true, crumbs: [], current };
+    }
+    const crumbs = [
+        { label: input.homeTitle, href: input.homeHref },
+    ];
+    for (const item of trail) {
+        if (item === currentItem)
+            continue;
+        const href = normalizeShellPath(item.href);
+        if (href === home || href === path)
+            continue;
+        crumbs.push({ label: item.label, href: item.href });
+    }
+    for (const parent of parents) {
+        const href = normalizeShellPath(parent.href);
+        if (href === path)
+            continue;
+        // A page that names an ancestor the nav already supplied (a form under
+        // its list's nav item) must not show that crumb twice.
+        if (crumbs.some((crumb) => normalizeShellPath(crumb.href) === href))
+            continue;
+        crumbs.push({ label: parent.label, href: parent.href });
+    }
+    return { sectionHome: false, crumbs, current };
+}
+/**
+ * Section homes (see {@link shellPageTrailFor}) show the workspace name.
+ * Every other page shows a back arrow to its nearest ancestor (the last
+ * breadcrumb) and the page's title.
+ */
+export function phoneTopBarFor(input) {
+    const trail = shellPageTrailFor(input);
+    if (trail.sectionHome && !input.backHref) {
+        return { kind: 'home', title: input.homeTitle };
+    }
+    const parent = trail.crumbs.at(-1) ?? {
+        label: input.homeTitle,
+        href: input.homeHref,
+    };
+    const backHref = input.backHref ?? parent.href;
+    const backLabel = input.backHref ? (input.backLabel ?? 'Back') : parent.label;
+    const title = input.pageTitle?.trim() || trail.current?.label || parent.label;
+    return { kind: 'detail', title, backHref, backLabel };
+}
+/** Decide the {@link BottomBarMode}. */
+export function bottomBarMode(input) {
+    if (input.keyboardOpen)
+        return 'none';
+    return input.formActions ? 'form' : 'nav';
+}
+/** Selector a form's action row carries to replace the phone bottom bar. */
+export const FORM_ACTION_BAR_SELECTOR = '[data-form-action-bar]';

package/dist/components/workspace/admin-shell/settings.d.ts

@@ -1,7 +1,32 @@
-import type { PanelEdge, PanelState, ResolvedShellConfig, ShellHotkeyBinding, ShellPanelConfig, ShellPanelDefaults, ShellSettingsAdapter, ShellSettingsDelta } from './types.js';
+import type { PanelEdge, PanelState, ResolvedShellConfig, ShellHotkeyBinding, ShellPanelConfig, ShellPanelDefaults, ShellPanelResize, ShellSettingsAdapter, ShellSettingsDelta, ShellViewport } from './types.js';
 export declare const DEFAULT_SHELL_KEYMAP: Record<PanelEdge, ShellHotkeyBinding>;
 export declare function resolveShellConfig(appDefaults?: ShellPanelDefaults): ResolvedShellConfig;
-export declare function resolveInitialPanelState(edge: PanelEdge, config: ShellPanelConfig, settings?: ShellSettingsDelta): PanelState;
+/**
+ * An edge's state: hidden edges stay hidden; otherwise the user's setting,
+ * then the edge's default for `viewport` (when it declares
+ * `viewportDefaults`), then its configured initial state.
+ */
+export declare function resolveInitialPanelState(edge: PanelEdge, config: ShellPanelConfig, settings?: ShellSettingsDelta, viewport?: ShellViewport): PanelState;
+/** Default limits for a resizable side edge (CSS px). */
+export declare const DEFAULT_SHELL_PANEL_RESIZE: Required<ShellPanelResize>;
+/**
+ * Resolved resize limits for an edge, or `null` when it is not resizable.
+ * Only `left` and `right` edges resize.
+ */
+export declare function resolvePanelResize(edge: PanelEdge, config: ShellPanelConfig): Required<ShellPanelResize> | null;
+/** Clamp a requested width into an edge's resize limits (rounded to px). */
+export declare function clampPanelSize(size: number, limits: Required<ShellPanelResize>): number;
+/**
+ * Whether the settings adapter stores an edge's `state` (open/closed) or
+ * `size`. Edges with `viewportDefaults` never store their state: it follows
+ * the viewport class.
+ */
+export declare function panelPersists(config: ShellPanelConfig, what: 'state' | 'size'): boolean;
+/**
+ * Drop the panel states and sizes the config says not to store, so they are
+ * neither written by nor read back from a settings adapter.
+ */
+export declare function stripUnpersistedSettings(delta: ShellSettingsDelta, config: ResolvedShellConfig): ShellSettingsDelta;
 export declare function resolveHotkey(edge: PanelEdge, config: ShellPanelConfig, settings?: ShellSettingsDelta): ShellHotkeyBinding | null;
 export declare function mergeShellSettingsDelta(base: ShellSettingsDelta, next: ShellSettingsDelta): ShellSettingsDelta;
 export declare function pruneShellSettingsDelta(delta: ShellSettingsDelta): ShellSettingsDelta;

package/dist/components/workspace/admin-shell/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAGpB,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAKtE,CAAC;AA6CF,wBAAgB,kBAAkB,CAChC,WAAW,GAAE,kBAAuB,GACnC,mBAAmB,CA2BrB;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,GAChC,UAAU,CAGZ;AAED,wBAAgB,aAAa,CAC3B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,GAChC,kBAAkB,GAAG,IAAI,CAM3B;AAED,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,kBAAkB,GACvB,kBAAkB,CAapB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,kBAAkB,GACxB,kBAAkB,CAepB;AAED,qBAAa,gCAAiC,YAAW,oBAAoB;IAC/D,OAAO,CAAC,QAAQ,CAAC,GAAG;gBAAH,GAAG,EAAE,MAAM;IAExC,IAAI,IAAI,kBAAkB,GAAG,IAAI;IAWjC,KAAK,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI;CAOvC"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACd,MAAM,YAAY,CAAC;AAGpB,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAKtE,CAAC;AA6CF,wBAAgB,kBAAkB,CAChC,WAAW,GAAE,kBAAuB,GACnC,mBAAmB,CA2BrB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,EACjC,QAAQ,CAAC,EAAE,aAAa,GACvB,UAAU,CAOZ;AAED,yDAAyD;AACzD,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,gBAAgB,CAIjE,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,GACvB,QAAQ,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAUnC;AAED,4EAA4E;AAC5E,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAAC,GACjC,MAAM,CAER;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,gBAAgB,EACxB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,OAAO,CAKT;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,kBAAkB,EACzB,MAAM,EAAE,mBAAmB,GAC1B,kBAAkB,CAqBpB;AAED,wBAAgB,aAAa,CAC3B,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,EACxB,QAAQ,GAAE,kBAAuB,GAChC,kBAAkB,GAAG,IAAI,CAM3B;AAED,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,kBAAkB,GACvB,kBAAkB,CAiBpB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,kBAAkB,GACxB,kBAAkB,CAuBpB;AAED,qBAAa,gCAAiC,YAAW,oBAAoB;IAC/D,OAAO,CAAC,QAAQ,CAAC,GAAG;gBAAH,GAAG,EAAE,MAAM;IAExC,IAAI,IAAI,kBAAkB,GAAG,IAAI;IAWjC,KAAK,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI;CAOvC"}

package/dist/components/workspace/admin-shell/settings.js

@@ -72,10 +72,84 @@ export function resolveShellConfig(appDefaults = {}) {
     }));
     return { panels };
 }
-export function resolveInitialPanelState(edge, config, settings = {}) {
+/**
+ * An edge's state: hidden edges stay hidden; otherwise the user's setting,
+ * then the edge's default for `viewport` (when it declares
+ * `viewportDefaults`), then its configured initial state.
+ */
+export function resolveInitialPanelState(edge, config, settings = {}, viewport) {
     if (config.initial === 'hidden')
         return 'hidden';
-    return settings.panels?.[edge] ?? config.initial;
+    return (settings.panels?.[edge] ??
+        (viewport ? config.viewportDefaults?.[viewport] : undefined) ??
+        config.initial);
+}
+/** Default limits for a resizable side edge (CSS px). */
+export const DEFAULT_SHELL_PANEL_RESIZE = {
+    min: 240,
+    max: 720,
+    step: 16,
+};
+/**
+ * Resolved resize limits for an edge, or `null` when it is not resizable.
+ * Only `left` and `right` edges resize.
+ */
+export function resolvePanelResize(edge, config) {
+    if (edge !== 'left' && edge !== 'right')
+        return null;
+    if (!config.resizable || config.initial === 'hidden')
+        return null;
+    const limits = config.resizable === true ? {} : config.resizable;
+    const min = Math.max(0, limits.min ?? DEFAULT_SHELL_PANEL_RESIZE.min);
+    return {
+        min,
+        max: Math.max(min, limits.max ?? DEFAULT_SHELL_PANEL_RESIZE.max),
+        step: Math.max(1, limits.step ?? DEFAULT_SHELL_PANEL_RESIZE.step),
+    };
+}
+/** Clamp a requested width into an edge's resize limits (rounded to px). */
+export function clampPanelSize(size, limits) {
+    return Math.round(Math.min(limits.max, Math.max(limits.min, size)));
+}
+/**
+ * Whether the settings adapter stores an edge's `state` (open/closed) or
+ * `size`. Edges with `viewportDefaults` never store their state: it follows
+ * the viewport class.
+ */
+export function panelPersists(config, what) {
+    if (what === 'state' && config.viewportDefaults)
+        return false;
+    const persist = config.persist ?? true;
+    if (typeof persist === 'boolean')
+        return persist;
+    return persist[what] ?? true;
+}
+/**
+ * Drop the panel states and sizes the config says not to store, so they are
+ * neither written by nor read back from a settings adapter.
+ */
+export function stripUnpersistedSettings(delta, config) {
+    const stripped = { ...delta };
+    for (const key of ['panels', 'sizes']) {
+        const values = delta[key];
+        if (!values)
+            continue;
+        const kept = {};
+        for (const edge of PANEL_EDGES) {
+            if (!(edge in values))
+                continue;
+            if (panelPersists(config.panels[edge], key === 'panels' ? 'state' : 'size')) {
+                kept[edge] = values[edge];
+            }
+        }
+        if (Object.keys(kept).length > 0) {
+            stripped[key] = kept;
+        }
+        else {
+            delete stripped[key];
+        }
+    }
+    return stripped;
 }
 export function resolveHotkey(edge, config, settings = {}) {
     if (config.initial === 'hidden')
@@ -95,6 +169,9 @@ export function mergeShellSettingsDelta(base, next) {
         panels: base.panels || next.panels
             ? { ...(base.panels ?? {}), ...(next.panels ?? {}) }
             : undefined,
+        sizes: base.sizes || next.sizes
+            ? { ...(base.sizes ?? {}), ...(next.sizes ?? {}) }
+            : undefined,
     };
 }
 export function pruneShellSettingsDelta(delta) {
@@ -111,6 +188,11 @@ export function pruneShellSettingsDelta(delta) {
     if (delta.panels && Object.keys(delta.panels).length > 0) {
         pruned.panels = delta.panels;
     }
+    if (delta.sizes) {
+        const sizes = Object.fromEntries(Object.entries(delta.sizes).filter(([, size]) => typeof size === 'number' && Number.isFinite(size)));
+        if (Object.keys(sizes).length > 0)
+            pruned.sizes = sizes;
+    }
     return pruned;
 }
 export class LocalStorageShellSettingsAdapter {

package/dist/components/workspace/admin-shell/state.svelte.d.ts

@@ -1,4 +1,13 @@
-import type { PanelEdge, PanelState, ResolvedShellConfig, ShellActivity, ShellActivityBadge, ShellActivityEvent, ShellActivityFilter, ShellFocusTool, ShellPanelDefaults, ShellScope, ShellSettingsAdapter, ShellSettingsDelta, ShellStateSnapshot, VisiblePanelState } from './types.js';
+import type { PanelEdge, PanelPresentation, PanelState, PhonePanelPresentation, ResolvedShellConfig, ShellActivity, ShellActivityBadge, ShellActivityEvent, ShellActivityFilter, ShellFocusTool, ShellPanelDefaults, ShellPanelResize, ShellScope, ShellSettingsAdapter, ShellSettingsDelta, ShellStateSnapshot, ShellViewport, VisiblePanelState } from './types.js';
+/**
+ * Phones: up to 48rem (768px itself is a phone). The same boundary the
+ * shell's CSS uses to turn side edges into drawers.
+ */
+export declare const ADMIN_SHELL_PHONE_QUERY = "(max-width: 48rem)";
+/** Desktop starts at 64rem; between the two queries is a tablet. */
+export declare const ADMIN_SHELL_DESKTOP_QUERY = "(min-width: 64rem)";
+/** The viewport class for the current window (`desktop` without a DOM). */
+export declare function detectShellViewport(): ShellViewport;
 type ActivityListener = (event: ShellActivityEvent) => void;
 type ShellActivityPatch = Partial<Omit<ShellActivity, 'id'>>;
 export interface ShellStateOptions {
@@ -6,18 +15,63 @@ export interface ShellStateOptions {
     settings?: ShellSettingsDelta;
     settingsAdapter?: ShellSettingsAdapter;
     storageKey?: string;
+    /** Initial viewport class (default: detected from `window`, else desktop). */
+    viewport?: ShellViewport;
 }
 export declare class ShellState {
     readonly config: ResolvedShellConfig;
     readonly adapter: ShellSettingsAdapter | null;
     settings: ShellSettingsDelta;
     panels: Record<PanelEdge, PanelState>;
+    /** Width class the shell is laid out for; `AdminShell` keeps it current. */
+    viewport: ShellViewport;
     focusTools: ShellFocusTool[];
     activeFocusToolId: string | null;
     activities: ShellActivity[];
+    /**
+     * Side edges whose `overlayMedia` currently matches; `AdminShell` keeps
+     * it current. Read it through `presentationFor`.
+     */
+    overlayMatches: Partial<Record<PanelEdge, boolean>>;
     private activityListeners;
     constructor(options?: ShellStateOptions);
     hydrate(): Promise<void>;
+    /**
+     * Record the viewport class. When it changes, edges with
+     * `viewportDefaults` switch to their default for the new class (the
+     * user's toggle for the old class is dropped). Not persisted.
+     */
+    setViewport(viewport: ShellViewport): void;
+    /** How a side edge is presented on phones (`drawer` unless configured). */
+    phonePresentation(edge: PanelEdge): PhonePanelPresentation;
+    /**
+     * How an edge is presented right now: its configured presentation, or
+     * `overlay` for a side edge whose `overlayMedia` matches off phones.
+     */
+    presentationFor(edge: PanelEdge): PanelPresentation;
+    /**
+     * Close side edges that would open as overlays (a restored or initial
+     * `expanded` state), without changing the stored preference: an overlay
+     * never covers the page on load, while a docked edge still restores.
+     */
+    closeOverlaidEdges(): void;
+    /** Record whether a side edge's `overlayMedia` matches. */
+    setOverlayMatch(edge: PanelEdge, matches: boolean): void;
+    /** Whether an edge is rendered at the current viewport. */
+    isEdgeShown(edge: PanelEdge): boolean;
+    /** Resize limits for an edge, or `null` when it is not resizable. */
+    resizeLimits(edge: PanelEdge): Required<ShellPanelResize> | null;
+    /** The user's resized width for an edge in px, or `null` (configured size). */
+    panelSize(edge: PanelEdge): number | null;
+    /**
+     * Resize an edge's expanded width (px, clamped to its limits); `null`
+     * resets it to the configured `expandedSize`. Persisted unless
+     * `persist: false` (use that while a drag is in progress) or the edge
+     * opts out of storing its size.
+     */
+    setPanelSize(edge: PanelEdge, size: number | null, options?: {
+        persist?: boolean;
+    }): void;
     snapshot(): ShellStateSnapshot;
     applySettings(delta: ShellSettingsDelta, options?: {
         persist?: boolean;
@@ -25,6 +79,8 @@ export declare class ShellState {
     setHotkeysEnabled(enabled: boolean): void;
     setHotkey(edge: PanelEdge, code: string | null): void;
     setPanel(edge: PanelEdge, state: VisiblePanelState): void;
+    /** Set and persist a runtime panel preference, including hidden. */
+    setPanelState(edge: PanelEdge, state: PanelState): void;
     togglePanel(edge: PanelEdge): void;
     expandPanel(edge: PanelEdge): void;
     collapsePanel(edge: PanelEdge): void;

package/dist/components/workspace/admin-shell/state.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/state.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAEV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,YAAY,CAAC;AAGpB,KAAK,gBAAgB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAC5D,KAAK,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,qBAAa,UAAU;IACrB,QAAQ,CAAC,MAAM,EAAE,mBAAmB,CAAC;IACrC,QAAQ,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAE9C,QAAQ,qBAAkC;IAC1C,MAAM,gCAKH;IACH,UAAU,mBAAgC;IAC1C,iBAAiB,gBAA+B;IAChD,UAAU,kBAA+B;IAEzC,OAAO,CAAC,iBAAiB,CAA+B;gBAE5C,OAAO,GAAE,iBAAsB;IAUrC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAM9B,QAAQ,IAAI,kBAAkB;IAY9B,aAAa,CACX,KAAK,EAAE,kBAAkB,EACzB,OAAO,GAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAO,GAClC,IAAI;IAkBP,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAIzC,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAUrD,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,GAAG,IAAI;IAezD,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAUlC,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAIlC,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAIpC,oBAAoB,IAAI,OAAO;IAY/B,iBAAiB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,IAAI;IAYnD,mBAAmB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IASrC,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAY/B,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAWjC,cAAc,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI;IA4B7C,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,GAAG,IAAI;IAc3D,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAWhC,eAAe,CAAC,QAAQ,EAAE,gBAAgB,GAAG,MAAM,IAAI;IAKvD,cAAc,CAAC,MAAM,GAAE,mBAAwB,GAAG,aAAa,EAAE;IASjE,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,kBAAkB;IAsBlD,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS;IAW9C,OAAO,CAAC,mBAAmB;YAmBb,eAAe;IAI7B,OAAO,CAAC,YAAY;CAGrB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAE5E"}
+{"version":3,"file":"state.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/admin-shell/state.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/workspace/admin-shell/state.svelte.js

@@ -1,6 +1,25 @@
 import { untrack } from 'svelte';
-import { LocalStorageShellSettingsAdapter, mergeShellSettingsDelta, resolveInitialPanelState, resolveShellConfig, } from './settings.js';
+import { clampPanelSize, LocalStorageShellSettingsAdapter, mergeShellSettingsDelta, resolveInitialPanelState, resolvePanelResize, resolveShellConfig, stripUnpersistedSettings, } from './settings.js';
 import { PANEL_EDGES, SCOPE_EDGES } from './types.js';
+/**
+ * Phones: up to 48rem (768px itself is a phone). The same boundary the
+ * shell's CSS uses to turn side edges into drawers.
+ */
+export const ADMIN_SHELL_PHONE_QUERY = '(max-width: 48rem)';
+/** Desktop starts at 64rem; between the two queries is a tablet. */
+export const ADMIN_SHELL_DESKTOP_QUERY = '(min-width: 64rem)';
+/** The viewport class for the current window (`desktop` without a DOM). */
+export function detectShellViewport() {
+    if (typeof window === 'undefined' ||
+        typeof window.matchMedia !== 'function') {
+        return 'desktop';
+    }
+    if (window.matchMedia(ADMIN_SHELL_PHONE_QUERY).matches)
+        return 'phone';
+    return window.matchMedia(ADMIN_SHELL_DESKTOP_QUERY).matches
+        ? 'desktop'
+        : 'tablet';
+}
 export class ShellState {
     config;
     adapter;
@@ -11,9 +30,16 @@ export class ShellState {
         right: 'collapsed',
         bottom: 'collapsed',
     });
+    /** Width class the shell is laid out for; `AdminShell` keeps it current. */
+    viewport = $state('desktop');
     focusTools = $state([]);
     activeFocusToolId = $state(null);
     activities = $state([]);
+    /**
+     * Side edges whose `overlayMedia` currently matches; `AdminShell` keeps
+     * it current. Read it through `presentationFor`.
+     */
+    overlayMatches = $state({});
     activityListeners = new Set();
     constructor(options = {}) {
         this.config = resolveShellConfig(options.config);
@@ -22,23 +48,135 @@ export class ShellState {
                 (options.storageKey
                     ? new LocalStorageShellSettingsAdapter(options.storageKey)
                     : null);
+        this.viewport = options.viewport ?? detectShellViewport();
         this.applySettings(options.settings ?? {}, { persist: false });
     }
     async hydrate() {
         if (!this.adapter)
             return;
         const delta = await this.adapter.read();
-        if (delta)
-            this.applySettings(delta, { persist: false });
+        if (delta) {
+            this.applySettings(stripUnpersistedSettings(delta, this.config), {
+                persist: false,
+            });
+        }
+    }
+    /**
+     * Record the viewport class. When it changes, edges with
+     * `viewportDefaults` switch to their default for the new class (the
+     * user's toggle for the old class is dropped). Not persisted.
+     */
+    setViewport(viewport) {
+        untrack(() => {
+            if (viewport === this.viewport)
+                return;
+            this.viewport = viewport;
+            let changed = false;
+            const panels = { ...(this.settings.panels ?? {}) };
+            for (const edge of PANEL_EDGES) {
+                const config = this.config.panels[edge];
+                const next = config.viewportDefaults?.[viewport];
+                if (!next || config.initial === 'hidden')
+                    continue;
+                delete panels[edge];
+                changed = true;
+                if (next === 'expanded')
+                    this.closeExclusivePeers(edge);
+                this.panels[edge] = next;
+            }
+            if (changed)
+                this.settings = { ...this.settings, panels };
+        });
+    }
+    /** How a side edge is presented on phones (`drawer` unless configured). */
+    phonePresentation(edge) {
+        return this.config.panels[edge].phone ?? 'drawer';
+    }
+    /**
+     * How an edge is presented right now: its configured presentation, or
+     * `overlay` for a side edge whose `overlayMedia` matches off phones.
+     */
+    presentationFor(edge) {
+        const config = this.config.panels[edge];
+        if ((edge === 'left' || edge === 'right') &&
+            this.viewport !== 'phone' &&
+            config.overlayMedia &&
+            this.overlayMatches[edge]) {
+            return 'overlay';
+        }
+        return config.presentation;
+    }
+    /**
+     * Close side edges that would open as overlays (a restored or initial
+     * `expanded` state), without changing the stored preference: an overlay
+     * never covers the page on load, while a docked edge still restores.
+     */
+    closeOverlaidEdges() {
+        untrack(() => {
+            for (const edge of ['left', 'right']) {
+                if (this.panels[edge] === 'expanded' &&
+                    this.presentationFor(edge) === 'overlay') {
+                    this.panels[edge] = 'collapsed';
+                }
+            }
+        });
+    }
+    /** Record whether a side edge's `overlayMedia` matches. */
+    setOverlayMatch(edge, matches) {
+        untrack(() => {
+            if (Boolean(this.overlayMatches[edge]) === matches)
+                return;
+            this.overlayMatches = { ...this.overlayMatches, [edge]: matches };
+        });
+    }
+    /** Whether an edge is rendered at the current viewport. */
+    isEdgeShown(edge) {
+        if (this.panels[edge] === 'hidden')
+            return false;
+        return !(this.viewport === 'phone' && this.phonePresentation(edge) === 'hidden');
+    }
+    /** Resize limits for an edge, or `null` when it is not resizable. */
+    resizeLimits(edge) {
+        return resolvePanelResize(edge, this.config.panels[edge]);
+    }
+    /** The user's resized width for an edge in px, or `null` (configured size). */
+    panelSize(edge) {
+        if (!this.resizeLimits(edge))
+            return null;
+        const size = this.settings.sizes?.[edge];
+        return typeof size === 'number' && Number.isFinite(size) ? size : null;
+    }
+    /**
+     * Resize an edge's expanded width (px, clamped to its limits); `null`
+     * resets it to the configured `expandedSize`. Persisted unless
+     * `persist: false` (use that while a drag is in progress) or the edge
+     * opts out of storing its size.
+     */
+    setPanelSize(edge, size, options = {}) {
+        untrack(() => {
+            const limits = this.resizeLimits(edge);
+            if (!limits)
+                return;
+            const next = size === null || !Number.isFinite(size)
+                ? null
+                : clampPanelSize(size, limits);
+            this.settings = mergeShellSettingsDelta(this.settings, {
+                sizes: { [edge]: next },
+            });
+            if (options.persist !== false)
+                void this.persistSettings();
+        });
     }
     snapshot() {
         return {
             panels: { ...this.panels },
+            viewport: this.viewport,
             activeFocusToolId: this.activeFocusToolId,
             settings: {
                 ...this.settings,
                 keymap: this.settings.keymap ? { ...this.settings.keymap } : undefined,
                 panels: this.settings.panels ? { ...this.settings.panels } : undefined,
+                sizes: this.settings.sizes ? { ...this.settings.sizes } : undefined,
             },
         };
     }
@@ -48,7 +186,7 @@ export class ShellState {
         untrack(() => {
             this.settings = mergeShellSettingsDelta(this.settings, nextDelta);
             for (const edge of PANEL_EDGES) {
-                this.panels[edge] = resolveInitialPanelState(edge, this.config.panels[edge], this.settings);
+                this.panels[edge] = resolveInitialPanelState(edge, this.config.panels[edge], this.settings, this.viewport);
             }
             this.activeFocusToolId =
                 this.settings.activeFocusToolId ?? this.activeFocusToolId;
@@ -69,6 +207,13 @@ export class ShellState {
         });
     }
     setPanel(edge, state) {
+        this.setPanelState(edge, state);
+    }
+    /** Set and persist a runtime panel preference, including hidden. */
+    setPanelState(edge, state) {
+        if (!PANEL_EDGES.includes(edge) ||
+            !['hidden', 'collapsed', 'expanded'].includes(state))
+            return;
         untrack(() => {
             if (this.config.panels[edge].initial === 'hidden') {
                 this.panels[edge] = 'hidden';
@@ -99,7 +244,7 @@ export class ShellState {
     closeTopmostExpanded() {
         return untrack(() => {
             for (const edge of [...PANEL_EDGES].reverse()) {
-                if (this.panels[edge] === 'expanded') {
+                if (this.panels[edge] === 'expanded' && this.isEdgeShown(edge)) {
                     this.collapsePanel(edge);
                     return true;
                 }
@@ -255,7 +400,9 @@ export class ShellState {
         }
     }
     async persistSettings() {
-        await this.adapter?.write(this.settings);
+        if (!this.adapter)
+            return;
+        await this.adapter.write(stripUnpersistedSettings(this.settings, this.config));
     }
     emitActivity(event) {
         for (const listener of this.activityListeners)
@@ -297,6 +444,9 @@ function snapshotShellSettingsDelta(delta) {
     if ('panels' in delta) {
         snapshot.panels = delta.panels ? { ...delta.panels } : delta.panels;
     }
+    if ('sizes' in delta) {
+        snapshot.sizes = delta.sizes ? { ...delta.sizes } : delta.sizes;
+    }
     return snapshot;
 }
 function snapshotShellKeymap(keymap) {