@happyvertical/smrt-svelte 0.55.0 → 0.55.2

package/dist/components/sortable/controller.svelte.js

@@ -0,0 +1,453 @@
+/**
+ * Headless drag-and-drop engine shared by `Board` and `Sortable`: keyboard
+ * pick-up and move, pointer (mouse, touch, pen) and native HTML drag, a
+ * single in-flight move at a time, focus return, and screen-reader
+ * announcements. It knows nothing about cards, columns, or navigation: a host
+ * describes ordered containers of item ids and receives one typed move.
+ *
+ * Create it during component initialization (it registers an effect that
+ * returns focus to the moved item).
+ */
+import { BROWSER } from 'esm-env';
+import { tick } from 'svelte';
+function clamp(index, max) {
+    return Math.max(0, Math.min(index, max));
+}
+export class SortableController {
+    options;
+    drag = $state();
+    announcement = $state('');
+    focusItemId = $state();
+    suppressedSelectionId = $state();
+    pending = $state(false);
+    pointerSession = $state();
+    constructor(options) {
+        this.options = options;
+        $effect(() => {
+            if (!BROWSER)
+                return;
+            if (!this.focusItemId)
+                return;
+            const itemId = this.focusItemId;
+            this.focusItemId = undefined;
+            tick().then(() => {
+                const root = this.options.root();
+                const element = root
+                    ? Array.from(root.querySelectorAll(this.options.selectors.item)).find((candidate) => candidate.dataset[this.options.selectors.itemKey] === itemId)
+                    : undefined;
+                const target = element
+                    ? this.options.focusTarget
+                        ? this.options.focusTarget(element)
+                        : element
+                    : undefined;
+                target?.focus();
+            });
+        });
+    }
+    /** Whether a new move may start now. */
+    get movable() {
+        return this.options.enabled() && !this.pending;
+    }
+    /** Whether native HTML drag should be offered (not while a pointer session runs). */
+    get nativeDraggable() {
+        return this.movable && this.pointerSession === undefined;
+    }
+    get containers() {
+        return this.options.containers();
+    }
+    itemsIn(containerId, withoutId) {
+        const ids = this.options.itemIds(containerId);
+        return withoutId ? ids.filter((id) => id !== withoutId) : ids;
+    }
+    findContainer(id) {
+        return this.containers.find((container) => container.id === id);
+    }
+    positionFor(itemId) {
+        if (this.options.itemLabel(itemId) === undefined)
+            return undefined;
+        for (const container of this.containers) {
+            const index = this.itemsIn(container.id).indexOf(itemId);
+            if (index >= 0)
+                return { containerId: container.id, index };
+        }
+        return undefined;
+    }
+    label(itemId) {
+        return this.options.itemLabel(itemId) ?? '';
+    }
+    say(announcement) {
+        this.announcement = this.options.announce(announcement);
+    }
+    pickup(itemId, mode) {
+        if (!this.movable)
+            return;
+        const source = this.positionFor(itemId);
+        if (!source)
+            return;
+        this.drag = { itemId, source, target: { ...source }, mode };
+        this.say({
+            type: 'pickup',
+            item: this.label(itemId),
+            destinations: this.containers
+                .filter((container) => !container.disabled)
+                .map((container) => container.label),
+        });
+    }
+    announcePosition(state) {
+        const container = this.findContainer(state.target.containerId);
+        if (!container || this.options.itemLabel(state.itemId) === undefined) {
+            return;
+        }
+        this.say({
+            type: 'position',
+            item: this.label(state.itemId),
+            container: container.label,
+            position: state.target.index + 1,
+            count: this.itemsIn(container.id, state.itemId).length + 1,
+        });
+    }
+    moveKeyboardTarget(direction, delta) {
+        const drag = this.drag;
+        if (drag?.mode !== 'keyboard')
+            return;
+        const vertical = this.options.orientation?.() === 'vertical';
+        const target = { ...drag.target };
+        // With same-container reordering off, the source container pins the
+        // position (as it does for pointer moves): a vertical step leaves it.
+        const pinned = !this.options.allowSameContainerReorder() &&
+            target.containerId === drag.source.containerId;
+        if (direction === 'vertical') {
+            if (pinned && !vertical)
+                return;
+            const max = this.itemsIn(target.containerId, drag.itemId).length;
+            const next = pinned ? (delta < 0 ? -1 : max + 1) : target.index + delta;
+            if (vertical && (next < 0 || next > max)) {
+                const currentIndex = this.containers.findIndex((container) => container.id === target.containerId);
+                const candidate = this.containers[currentIndex + delta];
+                if (!candidate)
+                    return;
+                if (candidate.disabled) {
+                    this.say({ type: 'unavailable', container: candidate.label });
+                    return;
+                }
+                target.containerId = candidate.id;
+                target.index =
+                    delta < 0 ? this.itemsIn(candidate.id, drag.itemId).length : 0;
+            }
+            else {
+                target.index = clamp(next, max);
+            }
+        }
+        else {
+            if (vertical)
+                return;
+            const currentIndex = this.containers.findIndex((container) => container.id === target.containerId);
+            const candidate = this.containers[currentIndex + delta];
+            if (!candidate)
+                return;
+            if (candidate.disabled) {
+                this.say({ type: 'unavailable', container: candidate.label });
+                return;
+            }
+            target.containerId = candidate.id;
+            target.index = clamp(target.index, this.itemsIn(candidate.id, drag.itemId).length);
+        }
+        // Coming back into a pinned source container lands on its own slot.
+        if (!this.options.allowSameContainerReorder() &&
+            target.containerId === drag.source.containerId) {
+            target.index = drag.source.index;
+        }
+        this.drag = { ...drag, target };
+        this.announcePosition(this.drag);
+    }
+    async drop() {
+        const state = this.drag;
+        if (!state)
+            return;
+        const itemLabel = this.options.itemLabel(state.itemId);
+        const target = this.findContainer(state.target.containerId);
+        const valid = itemLabel !== undefined &&
+            this.findContainer(state.source.containerId) !== undefined &&
+            target !== undefined &&
+            !target.disabled;
+        this.drag = undefined;
+        this.suppressSelection(state.itemId);
+        if (!valid || itemLabel === undefined || !target)
+            return;
+        const changed = state.source.containerId !== state.target.containerId ||
+            state.source.index !== state.target.index;
+        if (!changed) {
+            this.focusItemId = state.itemId;
+            return;
+        }
+        this.pending = true;
+        try {
+            await this.options.commit({
+                itemId: state.itemId,
+                source: state.source,
+                target: state.target,
+            });
+        }
+        catch {
+            this.say({ type: 'failed', item: itemLabel });
+            this.focusItemId = state.itemId;
+            return;
+        }
+        finally {
+            this.pending = false;
+        }
+        this.say({
+            type: 'drop',
+            item: itemLabel,
+            container: target.label,
+            position: state.target.index + 1,
+            count: this.itemsIn(target.id, state.itemId).length + 1,
+        });
+        this.focusItemId = state.itemId;
+    }
+    /** Cancel the move in flight. Focus returns to the item when `restoreFocus`. */
+    cancel(announce = true, restoreFocus = true) {
+        const drag = this.drag;
+        if (!drag)
+            return;
+        const label = this.options.itemLabel(drag.itemId);
+        if (label !== undefined && announce) {
+            this.say({ type: 'cancel', item: label });
+        }
+        if (label !== undefined && restoreFocus)
+            this.focusItemId = drag.itemId;
+        this.suppressSelection(drag.itemId);
+        this.drag = undefined;
+    }
+    suppressSelection(itemId) {
+        this.suppressedSelectionId = itemId;
+        window.setTimeout(() => {
+            if (this.suppressedSelectionId === itemId) {
+                this.suppressedSelectionId = undefined;
+            }
+        }, 0);
+    }
+    /**
+     * Keyboard pick-up and native drag gestures can both dispatch a click after
+     * their key/pointer sequence. Returns `true` when this click must be
+     * consumed so a move never doubles as an application-level activation.
+     */
+    consumeClick(itemId) {
+        if (this.suppressedSelectionId === itemId) {
+            this.suppressedSelectionId = undefined;
+            return true;
+        }
+        return false;
+    }
+    keydown(event, itemId) {
+        const drag = this.drag;
+        if (!drag) {
+            if (event.key === ' ' || event.key === 'Enter') {
+                if (!this.movable)
+                    return;
+                event.preventDefault();
+                this.pickup(itemId, 'keyboard');
+            }
+            return;
+        }
+        if (drag.itemId !== itemId || drag.mode !== 'keyboard')
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancel();
+        }
+        else if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            void this.drop();
+        }
+        else if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.moveKeyboardTarget('horizontal', -1);
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.moveKeyboardTarget('horizontal', 1);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.moveKeyboardTarget('vertical', -1);
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.moveKeyboardTarget('vertical', 1);
+        }
+    }
+    /**
+     * Focus left the item while a keyboard move was in flight: abandon it so
+     * the item is not left "picked up" with no way to steer it.
+     */
+    blur(event, itemId) {
+        const drag = this.drag;
+        if (drag?.mode !== 'keyboard' || drag.itemId !== itemId)
+            return;
+        const next = event.relatedTarget;
+        const current = event.currentTarget;
+        if (next instanceof Node &&
+            current instanceof Node &&
+            current.contains(next)) {
+            return;
+        }
+        this.cancel(true, false);
+    }
+    dragStart(event, itemId) {
+        if (!this.movable) {
+            event.preventDefault();
+            return;
+        }
+        this.pickup(itemId, 'pointer');
+        event.dataTransfer?.setData('text/plain', itemId);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    }
+    dragEnd() {
+        if (this.drag?.mode === 'pointer')
+            this.cancel();
+    }
+    pointerDown(event, itemId) {
+        if (!this.movable || event.button !== 0)
+            return;
+        this.pointerSession = {
+            itemId,
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            active: false,
+        };
+        const target = event.currentTarget;
+        target.setPointerCapture?.(event.pointerId);
+    }
+    elementAtPointer(event) {
+        return (document.elementFromPoint?.(event.clientX, event.clientY) ??
+            event.target);
+    }
+    setPointerTargetFromElement(element, clientY) {
+        // Container ids belong to the host's domain and may repeat in another
+        // instance. Pointer hit-testing must never escape this one's root.
+        const root = this.options.root();
+        if (!element || !root?.contains(element))
+            return undefined;
+        const { selectors } = this.options;
+        const lane = element.closest(selectors.container);
+        const containerId = lane?.dataset[selectors.containerKey];
+        if (!containerId)
+            return undefined;
+        const container = this.findContainer(containerId);
+        if (!container || container.disabled)
+            return container;
+        const itemElement = element.closest(selectors.item);
+        if (!itemElement) {
+            this.pointerTarget(containerId, this.itemsIn(containerId, this.drag?.itemId).length);
+            return container;
+        }
+        const rawIndex = this.itemsIn(containerId).indexOf(itemElement.dataset[selectors.itemKey] ?? '');
+        if (rawIndex < 0)
+            return container;
+        this.pointerTarget(containerId, this.insertionIndex(containerId, rawIndex, itemElement, clientY));
+        return container;
+    }
+    /** Index to insert at when hovering item `rawIndex`, after removing the dragged item. */
+    insertionIndex(containerId, rawIndex, itemElement, clientY) {
+        const rect = itemElement.getBoundingClientRect();
+        const before = clientY < rect.top + rect.height / 2;
+        let targetIndex = rawIndex + (before ? 0 : 1);
+        const drag = this.drag;
+        if (drag?.source.containerId === containerId &&
+            targetIndex > drag.source.index) {
+            targetIndex -= 1;
+        }
+        return targetIndex;
+    }
+    finishPointerSession(event, cancelled = false) {
+        const session = this.pointerSession;
+        this.pointerSession = undefined;
+        const target = event.currentTarget;
+        if (target.hasPointerCapture?.(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+        }
+        if (!session?.active || this.drag?.itemId !== session.itemId)
+            return;
+        if (cancelled) {
+            this.cancel();
+            return;
+        }
+        const container = this.setPointerTargetFromElement(this.elementAtPointer(event), event.clientY);
+        if (container?.disabled) {
+            this.say({ type: 'unavailable', container: container.label });
+            this.cancel(false);
+            return;
+        }
+        if (!container) {
+            this.cancel();
+            return;
+        }
+        void this.drop();
+    }
+    pointerUp(event) {
+        this.finishPointerSession(event);
+    }
+    pointerCancel(event) {
+        this.finishPointerSession(event, true);
+    }
+    pointerMove(event) {
+        const session = this.pointerSession;
+        if (!session || session.pointerId !== event.pointerId)
+            return;
+        if (!session.active) {
+            const distance = Math.hypot(event.clientX - session.startX, event.clientY - session.startY);
+            if (distance < 6)
+                return;
+            this.pickup(session.itemId, 'pointer');
+            this.pointerSession = { ...session, active: true };
+        }
+        event.preventDefault();
+        this.setPointerTargetFromElement(this.elementAtPointer(event), event.clientY);
+    }
+    pointerTarget(containerId, index) {
+        const drag = this.drag;
+        if (drag?.mode !== 'pointer')
+            return;
+        if (!this.options.allowSameContainerReorder() &&
+            containerId === drag.source.containerId) {
+            this.drag = { ...drag, target: { ...drag.source } };
+            return;
+        }
+        const max = this.itemsIn(containerId, drag.itemId).length;
+        this.drag = { ...drag, target: { containerId, index: clamp(index, max) } };
+    }
+    /** Native drop on an item (`rawIndex` is its index in its container). */
+    dropOnItem(event, containerId, rawIndex) {
+        event.preventDefault();
+        const drag = this.drag;
+        if (drag?.mode !== 'pointer')
+            return;
+        const container = this.findContainer(containerId);
+        if (container?.disabled) {
+            this.say({ type: 'unavailable', container: container.label });
+            this.cancel(false);
+            return;
+        }
+        this.pointerTarget(containerId, this.insertionIndex(containerId, rawIndex, event.currentTarget, event.clientY));
+        void this.drop();
+    }
+    /** Native drop on a container's empty space: append. */
+    dropOnContainer(event, containerId) {
+        event.preventDefault();
+        const container = this.findContainer(containerId);
+        if (container?.disabled) {
+            this.say({ type: 'unavailable', container: container.label });
+            this.cancel(false);
+            return;
+        }
+        this.pointerTarget(containerId, this.itemsIn(containerId, this.drag?.itemId).length);
+        void this.drop();
+    }
+}
+/** Create a controller; call during component initialization. */
+export function createSortable(options) {
+    return new SortableController(options);
+}

package/dist/components/sortable/index.d.ts

@@ -0,0 +1,5 @@
+export type { SortableAnnouncement, SortableContainerInfo, SortableControllerOptions, SortableMove, SortableSelectors, } from './controller.svelte.js';
+export { createSortable, SortableController } from './controller.svelte.js';
+export { default as Sortable } from './Sortable.svelte';
+export type { SortableContainer, SortableContainerHeaderSnippetProps, SortableContainerMove, SortableItem, SortableItemMove, SortableItemSnippetProps, SortablePosition, SortableProps, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sortable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACV,iBAAiB,EACjB,mCAAmC,EACnC,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,wBAAwB,EACxB,gBAAgB,EAChB,aAAa,GACd,MAAM,YAAY,CAAC"}

package/dist/components/sortable/index.js

@@ -0,0 +1,2 @@
+export { createSortable, SortableController } from './controller.svelte.js';
+export { default as Sortable } from './Sortable.svelte';

package/dist/components/sortable/types.d.ts

@@ -0,0 +1,80 @@
+import type { Snippet } from 'svelte';
+import type { SortablePosition } from './controller.svelte.js';
+export type { SortablePosition } from './controller.svelte.js';
+/** The minimum identity contract for a sortable item. */
+export interface SortableItem {
+    id: string;
+    /** The container the item currently sits in. */
+    containerId: string;
+    /** Accessible text used in announcements and the move handle's name. */
+    label: string;
+}
+/** A list items are sorted within and moved between. */
+export interface SortableContainer {
+    id: string;
+    label: string;
+    /** Items cannot be dropped into a disabled container. */
+    disabled?: boolean;
+    /**
+     * Keeps the container where it is when `reorderContainers` is on: fixed
+     * containers render first, in the order given, and have no move handle.
+     */
+    fixed?: boolean;
+}
+/** A drop of an item. `target.index` counts after removing it from `source`. */
+export interface SortableItemMove<Item extends SortableItem = SortableItem, Container extends SortableContainer = SortableContainer> {
+    item: Item;
+    source: SortablePosition;
+    target: SortablePosition;
+    sourceContainer: Container;
+    targetContainer: Container;
+}
+/**
+ * A drop of a container. Indices count the movable (non-`fixed`) containers;
+ * `target` counts after removing the container from `source`.
+ */
+export interface SortableContainerMove<Container extends SortableContainer = SortableContainer> {
+    container: Container;
+    source: number;
+    target: number;
+}
+export interface SortableItemSnippetProps<Item extends SortableItem, Container extends SortableContainer> {
+    item: Item;
+    container: Container;
+    /** Index within the container. */
+    index: number;
+    isDragging: boolean;
+}
+export interface SortableContainerHeaderSnippetProps<Container extends SortableContainer> {
+    container: Container;
+    count: number;
+    isDragging: boolean;
+}
+/** Public props for the generic Svelte 5 Sortable component. */
+export interface SortableProps<Item extends SortableItem, Container extends SortableContainer> {
+    /** Containers in display order. The owner is authoritative. */
+    containers: readonly Container[];
+    /** Items; order within a container is their order here. */
+    items: readonly Item[];
+    /** Accessible name for the whole list. */
+    label?: string;
+    /** Let the user reorder the (non-`fixed`) containers too. */
+    reorderContainers?: boolean;
+    /**
+     * Whether items may be reordered within their container (default true);
+     * `false` only allows moving them between containers.
+     */
+    allowSameContainerReorder?: boolean;
+    /** Content beside each item's move handle. */
+    item: Snippet<[SortableItemSnippetProps<Item, Container>]>;
+    /** Content in a container's header, beside its move handle. */
+    containerHeader?: Snippet<[SortableContainerHeaderSnippetProps<Container>]>;
+    /**
+     * Receives a typed item move. May persist asynchronously; a rejection
+     * restores the presentation and is announced. Omit to make items read-only.
+     */
+    onmove?: (move: SortableItemMove<Item, Container>) => void | Promise<void>;
+    /** Receives a container move (requires `reorderContainers`). */
+    oncontainermove?: (move: SortableContainerMove<Container>) => void | Promise<void>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/sortable/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,yDAAyD;AACzD,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,gFAAgF;AAChF,MAAM,WAAW,gBAAgB,CAC/B,IAAI,SAAS,YAAY,GAAG,YAAY,EACxC,SAAS,SAAS,iBAAiB,GAAG,iBAAiB;IAEvD,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,gBAAgB,CAAC;IACzB,eAAe,EAAE,SAAS,CAAC;IAC3B,eAAe,EAAE,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB,CACpC,SAAS,SAAS,iBAAiB,GAAG,iBAAiB;IAEvD,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB,CACvC,IAAI,SAAS,YAAY,EACzB,SAAS,SAAS,iBAAiB;IAEnC,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mCAAmC,CAClD,SAAS,SAAS,iBAAiB;IAEnC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,gEAAgE;AAChE,MAAM,WAAW,aAAa,CAC5B,IAAI,SAAS,YAAY,EACzB,SAAS,SAAS,iBAAiB;IAEnC,+DAA+D;IAC/D,UAAU,EAAE,SAAS,SAAS,EAAE,CAAC;IACjC,2DAA2D;IAC3D,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,8CAA8C;IAC9C,IAAI,EAAE,OAAO,CAAC,CAAC,wBAAwB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3D,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,mCAAmC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3E,gEAAgE;IAChE,eAAe,CAAC,EAAE,CAChB,IAAI,EAAE,qBAAqB,CAAC,SAAS,CAAC,KACnC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3B"}

package/dist/components/sortable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/workspace/admin-shell/AdminShell.svelte

@@ -116,6 +116,11 @@ function buildLayoutStyle(shell: ModuleShellState): string {
      * Phone-only context bar over the top of the main region. Hides while
      * scrolling down and returns on the first scroll up (see
      * `phone.hideOnScroll`); pinned while `pinChrome` or a drawer is open.
+     * Mark an actual replacement title with `data-shell-page-title-replacement`
+     * to visually hide the corresponding PageHeader title. Action-only or
+     * workspace-name bars leave the page heading visible. Mark replacement
+     * back navigation with `data-shell-page-navigation-replacement` to hide
+     * PageHeader breadcrumbs; a title alone does not replace navigation.
      */
     phoneTopBar?: Snippet<[{ hidden: boolean }]>;
     /**
@@ -344,6 +349,53 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     });
   });
 
+  // Dock opened from code (`useShellDock`, header dock toggles): focus moves
+  // into the dock once it is shown.
+  let lastDockFocusRequest = 0;
+  $effect(() => {
+    const request = shell.dockFocusRequest;
+    untrack(() => {
+      if (request === lastDockFocusRequest) return;
+      lastDockFocusRequest = request;
+      void tick().then(focusDock);
+    });
+  });
+
+  function focusDock(): void {
+    const aside = sideElements.right;
+    const panel = aside?.querySelector<HTMLElement>(
+      '.smrt-admin-shell__panel--right',
+    );
+    if (!panel || panel.hidden || !edgeExpanded('right')) return;
+    if (panel.contains(document.activeElement)) return;
+    const target =
+      panel.querySelector<HTMLElement>(
+        'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [contenteditable="true"], [tabindex]:not([tabindex="-1"])',
+      ) ?? panel;
+    target.focus({ preventScroll: true });
+  }
+
+  // When the dock closes (Escape, a toggle, or code), focus goes back to
+  // where it was opened from if it was left inside the dock or lost.
+  let dockWasOpen = false;
+  $effect(() => {
+    const open = edgeExpanded('right');
+    untrack(() => {
+      const wasOpen = dockWasOpen;
+      dockWasOpen = open;
+      if (!wasOpen || open) return;
+      const target = shell.dockReturnFocus;
+      shell.dockReturnFocus = null;
+      if (!target?.isConnected || typeof document === 'undefined') return;
+      const active = document.activeElement;
+      const lost =
+        !active ||
+        active === document.body ||
+        Boolean(sideElements.right?.contains(active));
+      if (lost) target.focus({ preventScroll: true });
+    });
+  });
+
   function onEdgeAnimationEnd(event: AnimationEvent, edge: SideEdge): void {
     if (closingEdge === edge && event.target === event.currentTarget) {
       endClosing();
@@ -772,7 +824,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
           {@render shellBrand()}
           {@render edgeToggle('top')}
         {/if}
-        {#if shell.config.panels.left.initial !== 'hidden' && (!isPhone || shell.phonePresentation('left') !== 'hidden')}
+        {#if shell.config.panels.left.initial !== 'hidden' && shell.layoutPanels.left?.visible !== false && (!isPhone || shell.phonePresentation('left') !== 'hidden')}
           <div class="smrt-admin-shell__tenant-opener" class:restore-hidden={panelState('left') === 'hidden'}>
             <Button variant="ghost" size="sm" aria-label={t(M['ui.admin_shell.menu'])} aria-expanded={edgeExpanded('left')} aria-controls="smrt-admin-shell-left-panel" onclick={() => shell.setPanelState('left', edgeExpanded('left') ? 'collapsed' : 'expanded')}>{t(M['ui.admin_shell.menu'])}</Button>
           </div>
@@ -983,6 +1035,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
       {#if panelMounted('right')}
         <div
           class="smrt-admin-shell__panel smrt-admin-shell__panel--right"
+          tabindex="-1"
           hidden={!shownOpen('right')}
         >
           {#key shell.activeFocusToolId}
@@ -1252,6 +1305,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     justify-content: space-between;
     gap: var(--smrt-spacing-3);
     min-width: 0;
+    min-block-size: 0;
     padding: 0 var(--smrt-spacing-4);
   }
 
@@ -1584,6 +1638,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
     align-self: start;
     z-index: 10;
     min-inline-size: 0;
+    background: var(--smrt-color-surface);
     transition: transform var(--smrt-admin-shell-chrome-duration)
       var(--smrt-easing-standard, ease);
   }
@@ -1750,11 +1805,15 @@ function buildLayoutStyle(shell: ModuleShellState): string {
      the page title (visually hidden: screen readers and the outline keep
      it); page tabs stick under it and slide away with it; a form's action
      row is fixed to the bottom and replaces the bottom bar. */
-  .smrt-admin-shell[data-viewport='phone'] :global([data-shell-breadcrumbs]) {
+  .smrt-admin-shell[data-phone-top]:has(
+    > .smrt-admin-shell__phone-top :global([data-shell-page-navigation-replacement])
+  ) :global([data-shell-breadcrumbs]) {
     display: none;
   }
 
-  .smrt-admin-shell[data-phone-top] :global([data-shell-page-title]) {
+  .smrt-admin-shell[data-phone-top]:has(
+    > .smrt-admin-shell__phone-top :global([data-shell-page-title-replacement])
+  ) :global([data-shell-page-title]) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;

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

@@ -52,6 +52,11 @@ interface Props extends AdminShellProps {
      * Phone-only context bar over the top of the main region. Hides while
      * scrolling down and returns on the first scroll up (see
      * `phone.hideOnScroll`); pinned while `pinChrome` or a drawer is open.
+     * Mark an actual replacement title with `data-shell-page-title-replacement`
+     * to visually hide the corresponding PageHeader title. Action-only or
+     * workspace-name bars leave the page heading visible. Mark replacement
+     * back navigation with `data-shell-page-navigation-replacement` to hide
+     * PageHeader breadcrumbs; a title alone does not replace navigation.
      */
     phoneTopBar?: Snippet<[{
         hidden: boolean;