@svgrid/grid 2.1.21 → 2.1.23

package/dist/createOverlay.svelte.d.ts

@@ -0,0 +1,38 @@
+export type OverlayConfig = {
+    /** Whether the overlay is currently open. */
+    open: () => boolean;
+    /** The dialog panel element (component owns `bind:this`, passes a getter). */
+    getDialog: () => HTMLElement | null;
+    /** Close the overlay (set your `open` state false + notify). */
+    onClose: () => void;
+    /** Allow Escape to close. Default true. */
+    closeOnEsc?: () => boolean;
+    /** Allow an outside/backdrop click to close. Default true. */
+    closeOnBackdrop?: () => boolean;
+    /** Run once each time the overlay opens - reset transient state (drag, resize,
+     *  swipe offset) before the trap/lock/layer are wired. */
+    onOpen?: () => void;
+    /** Trap focus inside the dialog while open. Default true. */
+    trapFocus?: () => boolean;
+    /** Lock body scroll while open. Default true. */
+    scrollLock?: () => boolean;
+    /** Element to focus first when the dialog opens (e.g. a search input).
+     *  Defaults to the trap's first focusable. */
+    initialFocus?: () => HTMLElement | null;
+};
+export type DialogProps = {
+    role: 'dialog';
+    'aria-modal': 'true';
+    'aria-labelledby': string | undefined;
+    'aria-label': string | undefined;
+    tabindex: -1;
+};
+export declare function createOverlay(config: OverlayConfig): {
+    /** Spread onto the dialog panel element. Pass `labelledBy` (an id, when there
+     *  is a visible title) or `label` (an accessible name when there isn't). */
+    dialogProps: (opts?: {
+        labelledBy?: string;
+        label?: string;
+    }) => DialogProps;
+};
+export type Overlay = ReturnType<typeof createOverlay>;

package/dist/createOverlay.svelte.js

@@ -0,0 +1,68 @@
+/**
+ * createOverlay - the HEADLESS core behind the dialog-type overlays (<SvModal>,
+ * <SvDrawer>): the open -> (focus-trap + scroll-lock + Escape/backdrop dismissal)
+ * -> restore lifecycle, wired to the shared a11y primitives so nested overlays
+ * close top-first via the layer stack. Owns no markup and no styles - the
+ * component renders the backdrop/panel and spreads `dialogProps()` for the ARIA.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createOverlay } from '@svgrid/grid'
+ *   let dialogEl = $state<HTMLElement | null>(null)
+ *   const overlay = createOverlay({
+ *     open: () => open,
+ *     getDialog: () => dialogEl,
+ *     onClose: () => (open = false),
+ *   })
+ * </script>
+ * {#if open}
+ *   <div class="backdrop">
+ *     <div bind:this={dialogEl} {...overlay.dialogProps({ labelledBy: titleId })}>…</div>
+ *   </div>
+ * {/if}
+ * ```
+ */
+import { createFocusTrap } from './a11y/focus-trap';
+import { lockScroll } from './a11y/scroll-lock';
+import { createDismissableLayer } from './a11y/dismissable';
+export function createOverlay(config) {
+    // While open: reset transient state, then hand focus, scroll-lock and
+    // Escape/backdrop dismissal to the shared primitives (one tested
+    // implementation; nested overlays close top-first via the layer stack).
+    $effect(() => {
+        if (!config.open() || !config.getDialog())
+            return;
+        config.onOpen?.();
+        const el = config.getDialog();
+        const trap = (config.trapFocus?.() ?? true)
+            ? createFocusTrap(el, config.initialFocus ? { initialFocus: config.initialFocus } : undefined)
+            : null;
+        trap?.activate();
+        const unlockScroll = (config.scrollLock?.() ?? true) ? lockScroll() : null;
+        const layer = createDismissableLayer({
+            element: () => config.getDialog(),
+            onDismiss: (reason) => {
+                const allow = reason === 'escape' ? (config.closeOnEsc?.() ?? true) : (config.closeOnBackdrop?.() ?? true);
+                if (allow)
+                    config.onClose();
+            },
+        });
+        layer.activate();
+        return () => {
+            layer.release();
+            unlockScroll?.();
+            trap?.release();
+        };
+    });
+    return {
+        /** Spread onto the dialog panel element. Pass `labelledBy` (an id, when there
+         *  is a visible title) or `label` (an accessible name when there isn't). */
+        dialogProps: (opts) => ({
+            role: 'dialog',
+            'aria-modal': 'true',
+            'aria-labelledby': opts?.labelledBy,
+            'aria-label': opts?.label,
+            tabindex: -1,
+        }),
+    };
+}

package/dist/createPagination.d.ts

@@ -0,0 +1,74 @@
+/**
+ * createPagination - the HEADLESS core behind <SvPagination>: the page/ellipsis
+ * sequence (via the pure `paginationRange`) plus navigation (first/prev/next/last
+ * with clamping) and prop-getters you spread onto your own markup. Pure getters,
+ * no runes - so it is directly unit-testable and framework-free.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createPagination } from '@svgrid/grid'
+ *   const pg = createPagination({ page: () => page, pageCount: () => 20, onChange: (p) => (page = p) })
+ * </script>
+ * <nav {...pg.navProps()}>
+ *   <button {...pg.prevProps()}>‹</button>
+ *   {#each pg.items as it}
+ *     {#if typeof it === 'number'}<button {...pg.pageButtonProps(it)}>{it}</button>{:else}…{/if}
+ *   {/each}
+ *   <button {...pg.nextProps()}>›</button>
+ * </nav>
+ * ```
+ */
+import { type PaginationItem } from './paginate';
+export type PaginationConfig = {
+    /** 1-based current page. */
+    page: () => number;
+    pageCount: () => number;
+    onChange?: (page: number) => void;
+    siblingCount?: () => number;
+    boundaryCount?: () => number;
+    disabled?: () => boolean;
+};
+export declare function createPagination(config: PaginationConfig): {
+    /** The page/ellipsis sequence to render, recomputed from the live inputs. */
+    readonly items: PaginationItem[];
+    go: (p: number) => void;
+    first: () => void;
+    prev: () => void;
+    next: () => void;
+    last: () => void;
+    canPrev: () => boolean;
+    canNext: () => boolean;
+    isActive: (p: number) => boolean;
+    /** Spread onto the `<nav>` wrapper. */
+    navProps: (ariaLabel?: string) => {
+        'aria-label': string;
+    };
+    /** Spread onto a numbered page button. */
+    pageButtonProps: (p: number) => {
+        'aria-current': "page" | undefined;
+        'aria-label': string;
+        disabled: boolean;
+        onclick: () => void;
+    };
+    firstProps: () => {
+        'aria-label': string;
+        disabled: boolean;
+        onclick: () => void;
+    };
+    prevProps: () => {
+        'aria-label': string;
+        disabled: boolean;
+        onclick: () => void;
+    };
+    nextProps: () => {
+        'aria-label': string;
+        disabled: boolean;
+        onclick: () => void;
+    };
+    lastProps: () => {
+        'aria-label': string;
+        disabled: boolean;
+        onclick: () => void;
+    };
+};
+export type Pagination = ReturnType<typeof createPagination>;

package/dist/createPagination.js

@@ -0,0 +1,71 @@
+/**
+ * createPagination - the HEADLESS core behind <SvPagination>: the page/ellipsis
+ * sequence (via the pure `paginationRange`) plus navigation (first/prev/next/last
+ * with clamping) and prop-getters you spread onto your own markup. Pure getters,
+ * no runes - so it is directly unit-testable and framework-free.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createPagination } from '@svgrid/grid'
+ *   const pg = createPagination({ page: () => page, pageCount: () => 20, onChange: (p) => (page = p) })
+ * </script>
+ * <nav {...pg.navProps()}>
+ *   <button {...pg.prevProps()}>‹</button>
+ *   {#each pg.items as it}
+ *     {#if typeof it === 'number'}<button {...pg.pageButtonProps(it)}>{it}</button>{:else}…{/if}
+ *   {/each}
+ *   <button {...pg.nextProps()}>›</button>
+ * </nav>
+ * ```
+ */
+import { paginationRange } from './paginate';
+export function createPagination(config) {
+    const page = () => config.page();
+    const pageCount = () => config.pageCount();
+    const disabled = () => config.disabled?.() ?? false;
+    function go(p) {
+        if (disabled())
+            return;
+        const next = Math.min(Math.max(p, 1), pageCount());
+        if (next !== page())
+            config.onChange?.(next);
+    }
+    const first = () => go(1);
+    const prev = () => go(page() - 1);
+    const next = () => go(page() + 1);
+    const last = () => go(pageCount());
+    const canPrev = () => !disabled() && page() > 1;
+    const canNext = () => !disabled() && page() < pageCount();
+    return {
+        /** The page/ellipsis sequence to render, recomputed from the live inputs. */
+        get items() {
+            return paginationRange({
+                page: page(),
+                pageCount: pageCount(),
+                siblingCount: config.siblingCount?.() ?? 1,
+                boundaryCount: config.boundaryCount?.() ?? 1,
+            });
+        },
+        go,
+        first,
+        prev,
+        next,
+        last,
+        canPrev,
+        canNext,
+        isActive: (p) => p === page(),
+        /** Spread onto the `<nav>` wrapper. */
+        navProps: (ariaLabel = 'Pagination') => ({ 'aria-label': ariaLabel }),
+        /** Spread onto a numbered page button. */
+        pageButtonProps: (p) => ({
+            'aria-current': (p === page() ? 'page' : undefined),
+            'aria-label': `Page ${p}`,
+            disabled: disabled(),
+            onclick: () => go(p),
+        }),
+        firstProps: () => ({ 'aria-label': 'First page', disabled: !canPrev(), onclick: first }),
+        prevProps: () => ({ 'aria-label': 'Previous page', disabled: !canPrev(), onclick: prev }),
+        nextProps: () => ({ 'aria-label': 'Next page', disabled: !canNext(), onclick: next }),
+        lastProps: () => ({ 'aria-label': 'Last page', disabled: !canNext(), onclick: last }),
+    };
+}

package/dist/createPopoverSelect.svelte.js

@@ -14,6 +14,7 @@
  */
 import { anchoredRect } from './popover';
 import { createDismissableLayer } from './a11y/dismissable';
+import { enabledIndices as enabledIndicesOf, wrapMove } from './list-nav';
 let uidSeq = 0;
 export function createPopoverSelect(config) {
     const id = `${config.idPrefix ?? 'sv-pop'}-${uidSeq++}`;
@@ -21,16 +22,11 @@ export function createPopoverSelect(config) {
     const optionId = (i) => `${id}-opt-${i}`;
     let open = $state(false);
     let active = $state(0);
-    let rect = $state({ top: 0, left: 0, width: 0, openUpward: false });
+    let rect = $state({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 });
     const count = () => config.itemCount();
     const isDisabled = (i) => config.disabled?.(i) ?? false;
     function enabledIndices() {
-        const out = [];
-        const n = count();
-        for (let i = 0; i < n; i++)
-            if (!isDisabled(i))
-                out.push(i);
-        return out;
+        return enabledIndicesOf(count(), isDisabled);
     }
     function clampActive(i) {
         const n = count();
@@ -54,11 +50,9 @@ export function createPopoverSelect(config) {
         open ? setOpen(false) : openPanel();
     }
     function move(delta) {
-        const list = enabledIndices();
-        if (!list.length)
-            return;
-        const pos = list.indexOf(active);
-        active = list[(pos + delta + list.length) % list.length] ?? list[0];
+        const next = wrapMove(enabledIndices(), active, delta);
+        if (next >= 0)
+            active = next;
     }
     function first() { active = enabledIndices()[0] ?? 0; }
     function last() { active = enabledIndices().at(-1) ?? 0; }

package/dist/createStepper.d.ts

@@ -0,0 +1,44 @@
+/**
+ * createStepper - the HEADLESS core behind <SvStepper>: per-step status
+ * (complete / active / upcoming), the linear-vs-free clickability rule, and
+ * navigation, as pure getters + prop-getters. No runes, framework-free, directly
+ * unit-testable.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createStepper } from '@svgrid/grid'
+ *   const st = createStepper({ count: () => steps.length, current: () => i, onChange: (n) => (i = n) })
+ * </script>
+ * <ol>
+ *   {#each steps as step, idx}
+ *     <li class="is-{st.statusOf(idx)}">
+ *       <button {...st.stepButtonProps(idx)}>{step.label}</button>
+ *     </li>
+ *   {/each}
+ * </ol>
+ * ```
+ */
+export type StepStatus = 'complete' | 'active' | 'upcoming';
+export type StepperConfig = {
+    count: () => number;
+    /** 0-based index of the active step. */
+    current: () => number;
+    onChange?: (index: number) => void;
+    /** Only allow navigating to already-reached steps. Default true. */
+    linear?: () => boolean;
+};
+export declare function createStepper(config: StepperConfig): {
+    statusOf: (i: number) => StepStatus;
+    clickable: (i: number) => boolean;
+    go: (i: number) => void;
+    next: () => void;
+    prev: () => void;
+    isActive: (i: number) => boolean;
+    /** Spread onto a step's button. */
+    stepButtonProps: (i: number) => {
+        'aria-current': "step" | undefined;
+        disabled: boolean;
+        onclick: () => void;
+    };
+};
+export type Stepper = ReturnType<typeof createStepper>;

package/dist/createStepper.js

@@ -0,0 +1,26 @@
+export function createStepper(config) {
+    const current = () => config.current();
+    const linear = () => config.linear?.() ?? true;
+    const statusOf = (i) => i < current() ? 'complete' : i === current() ? 'active' : 'upcoming';
+    const clickable = (i) => (linear() ? i <= current() : true);
+    const go = (i) => {
+        if (clickable(i) && i !== current())
+            config.onChange?.(i);
+    };
+    const next = () => go(current() + 1);
+    const prev = () => go(current() - 1);
+    return {
+        statusOf,
+        clickable,
+        go,
+        next,
+        prev,
+        isActive: (i) => i === current(),
+        /** Spread onto a step's button. */
+        stepButtonProps: (i) => ({
+            'aria-current': (statusOf(i) === 'active' ? 'step' : undefined),
+            disabled: !clickable(i),
+            onclick: () => go(i),
+        }),
+    };
+}

package/dist/createTooltip.svelte.d.ts

@@ -0,0 +1,32 @@
+export type TooltipConfig = {
+    /** The tooltip text; the tooltip never opens when it is empty. */
+    text?: () => string | undefined;
+    /** Suppress the tooltip entirely. */
+    disabled?: () => boolean;
+    /** Show delay in ms after hover/focus. Default 300. */
+    delay?: () => number;
+};
+export type TooltipAnchorProps = {
+    'aria-describedby': string | undefined;
+    onpointerenter: () => void;
+    onpointerleave: () => void;
+    onfocusin: () => void;
+    onfocusout: () => void;
+};
+export type TooltipProps = {
+    id: string;
+    role: 'tooltip';
+};
+export declare function createTooltip(config?: TooltipConfig): {
+    readonly open: boolean;
+    /** Stable id of the tooltip element (for `aria-describedby` + the tip's id). */
+    tipId: string;
+    show: () => void;
+    hide: () => void;
+    /** Spread onto the anchor/trigger wrapper. Also mirror `tipId` onto the real
+     *  focusable child's `aria-describedby` so AT announces it on focus. */
+    anchorProps: () => TooltipAnchorProps;
+    /** Spread onto the tooltip element. */
+    tooltipProps: () => TooltipProps;
+};
+export type Tooltip = ReturnType<typeof createTooltip>;

package/dist/createTooltip.svelte.js

@@ -0,0 +1,61 @@
+/**
+ * createTooltip - the HEADLESS core behind <SvTooltip>: the hover/focus open
+ * state machine with a show delay, Escape-to-hide, and the `aria-describedby` /
+ * `role="tooltip"` wiring - as prop-getters you spread onto your own anchor and
+ * tooltip elements. No styles, no positioning (that is a DOM concern the renderer
+ * owns), like `createListbox`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTooltip } from '@svgrid/grid'
+ *   const tip = createTooltip({ text: () => label })
+ * </script>
+ * <span {...tip.anchorProps()}>{@render children?.()}</span>
+ * {#if tip.open}
+ *   <div {...tip.tooltipProps()}>{label}</div>
+ * {/if}
+ * ```
+ */
+import { nextEditorId } from './editor-contract';
+export function createTooltip(config = {}) {
+    const id = nextEditorId('sv-tip');
+    let open = $state(false);
+    let showTimer;
+    function show() {
+        if ((config.disabled?.() ?? false) || !(config.text?.() ?? ''))
+            return;
+        clearTimeout(showTimer);
+        showTimer = setTimeout(() => { open = true; }, config.delay?.() ?? 300);
+    }
+    function hide() {
+        clearTimeout(showTimer);
+        open = false;
+    }
+    // Escape hides the tooltip while it is open (WAI-ARIA tooltip pattern).
+    $effect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => { if (e.key === 'Escape')
+            hide(); };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    });
+    return {
+        get open() { return open; },
+        /** Stable id of the tooltip element (for `aria-describedby` + the tip's id). */
+        tipId: id,
+        show,
+        hide,
+        /** Spread onto the anchor/trigger wrapper. Also mirror `tipId` onto the real
+         *  focusable child's `aria-describedby` so AT announces it on focus. */
+        anchorProps: () => ({
+            'aria-describedby': open ? id : undefined,
+            onpointerenter: show,
+            onpointerleave: hide,
+            onfocusin: show,
+            onfocusout: hide,
+        }),
+        /** Spread onto the tooltip element. */
+        tooltipProps: () => ({ id, role: 'tooltip' }),
+    };
+}

package/dist/datetime/timezone.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Pure, framework-free IANA-timezone helpers, built on `Intl` (no date library).
+ *
+ * The scheduler renders in a chosen `timeZone` via a "pseudo-local" trick:
+ * {@link toZonedLocal} turns an absolute instant into a Date whose *local*
+ * wall-clock equals the wall-clock in `timeZone`, so all the existing
+ * local-based date math (startOfDay, minuteOfDay, layout) runs unchanged; then
+ * {@link fromZonedLocal} converts a user edit back to a real instant. When
+ * `timeZone` is undefined every function is the identity on the browser's zone.
+ *
+ * These functions are DST-aware and take no ambient "now" (safe for the model /
+ * headless contexts that forbid `Date.now()`).
+ */
+export type ZoneParts = {
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+    second: number;
+};
+/** The wall-clock parts of `instant` in `timeZone` (browser-local if undefined). */
+export declare function zoneParts(instant: Date, timeZone?: string): ZoneParts;
+/** Milliseconds `timeZone` is ahead of UTC at `instant` (DST-aware; negative west of UTC). */
+export declare function zoneOffsetMs(instant: Date, timeZone?: string): number;
+/** An instant -> a Date whose LOCAL fields equal its wall-clock in `timeZone`. */
+export declare function toZonedLocal(instant: Date, timeZone?: string): Date;
+/** The instant whose wall-clock in `timeZone` is the given Y-M-D H:M:S. */
+export declare function instantFromWallClock(year: number, month: number, // 1-12
+day: number, hour: number, minute: number, second?: number, timeZone?: string, ms?: number): Date;
+/** Inverse of {@link toZonedLocal}: a pseudo-local Date -> the real instant. */
+export declare function fromZonedLocal(pseudo: Date, timeZone?: string): Date;
+/** Short zone name at `instant`, e.g. "EDT" / "GMT+5:30" - for a ruler header. */
+export declare function zoneAbbr(instant: Date, timeZone?: string): string;
+/** Validate an IANA zone id; returns it if usable, else undefined (falls back to local). */
+export declare function normalizeTimeZone(timeZone?: string): string | undefined;

package/dist/datetime/timezone.js

@@ -0,0 +1,110 @@
+/**
+ * Pure, framework-free IANA-timezone helpers, built on `Intl` (no date library).
+ *
+ * The scheduler renders in a chosen `timeZone` via a "pseudo-local" trick:
+ * {@link toZonedLocal} turns an absolute instant into a Date whose *local*
+ * wall-clock equals the wall-clock in `timeZone`, so all the existing
+ * local-based date math (startOfDay, minuteOfDay, layout) runs unchanged; then
+ * {@link fromZonedLocal} converts a user edit back to a real instant. When
+ * `timeZone` is undefined every function is the identity on the browser's zone.
+ *
+ * These functions are DST-aware and take no ambient "now" (safe for the model /
+ * headless contexts that forbid `Date.now()`).
+ */
+const fmtCache = new Map();
+function partsFormat(timeZone) {
+    let f = fmtCache.get(timeZone);
+    if (!f) {
+        f = new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            hourCycle: 'h23',
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        });
+        fmtCache.set(timeZone, f);
+    }
+    return f;
+}
+/** The wall-clock parts of `instant` in `timeZone` (browser-local if undefined). */
+export function zoneParts(instant, timeZone) {
+    if (!timeZone) {
+        return {
+            year: instant.getFullYear(),
+            month: instant.getMonth() + 1,
+            day: instant.getDate(),
+            hour: instant.getHours(),
+            minute: instant.getMinutes(),
+            second: instant.getSeconds(),
+        };
+    }
+    const map = {};
+    for (const p of partsFormat(timeZone).formatToParts(instant)) {
+        if (p.type !== 'literal')
+            map[p.type] = Number(p.value);
+    }
+    let hour = map.hour ?? 0;
+    if (hour === 24)
+        hour = 0; // some engines emit '24' for midnight under h23
+    return { year: map.year, month: map.month, day: map.day, hour, minute: map.minute ?? 0, second: map.second ?? 0 };
+}
+/** Milliseconds `timeZone` is ahead of UTC at `instant` (DST-aware; negative west of UTC). */
+export function zoneOffsetMs(instant, timeZone) {
+    if (!timeZone)
+        return -instant.getTimezoneOffset() * 60000;
+    const p = zoneParts(instant, timeZone);
+    const asUtc = Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute, p.second);
+    // `asUtc` reads the wall-clock as if it were UTC; its distance from the real
+    // instant (truncated to whole seconds, matching the parts' resolution) is the offset.
+    return asUtc - Math.floor(instant.getTime() / 1000) * 1000;
+}
+/** An instant -> a Date whose LOCAL fields equal its wall-clock in `timeZone`. */
+export function toZonedLocal(instant, timeZone) {
+    if (!timeZone)
+        return instant;
+    const p = zoneParts(instant, timeZone);
+    return new Date(p.year, p.month - 1, p.day, p.hour, p.minute, p.second, instant.getMilliseconds());
+}
+/** The instant whose wall-clock in `timeZone` is the given Y-M-D H:M:S. */
+export function instantFromWallClock(year, month, // 1-12
+day, hour, minute, second = 0, timeZone, ms = 0) {
+    if (!timeZone)
+        return new Date(year, month - 1, day, hour, minute, second, ms);
+    const wallUtc = Date.UTC(year, month - 1, day, hour, minute, second, ms);
+    // Assume the wall-clock is UTC, subtract the offset there, then correct once
+    // in case the candidate instant lands on the other side of a DST transition.
+    const off1 = zoneOffsetMs(new Date(wallUtc), timeZone);
+    let inst = new Date(wallUtc - off1);
+    const off2 = zoneOffsetMs(inst, timeZone);
+    if (off2 !== off1)
+        inst = new Date(wallUtc - off2);
+    return inst;
+}
+/** Inverse of {@link toZonedLocal}: a pseudo-local Date -> the real instant. */
+export function fromZonedLocal(pseudo, timeZone) {
+    if (!timeZone)
+        return pseudo;
+    return instantFromWallClock(pseudo.getFullYear(), pseudo.getMonth() + 1, pseudo.getDate(), pseudo.getHours(), pseudo.getMinutes(), pseudo.getSeconds(), timeZone, pseudo.getMilliseconds());
+}
+/** Short zone name at `instant`, e.g. "EDT" / "GMT+5:30" - for a ruler header. */
+export function zoneAbbr(instant, timeZone) {
+    if (!timeZone)
+        return '';
+    const parts = new Intl.DateTimeFormat('en-US', { timeZone, hour: '2-digit', timeZoneName: 'short' }).formatToParts(instant);
+    return parts.find((p) => p.type === 'timeZoneName')?.value ?? '';
+}
+/** Validate an IANA zone id; returns it if usable, else undefined (falls back to local). */
+export function normalizeTimeZone(timeZone) {
+    if (!timeZone)
+        return undefined;
+    try {
+        new Intl.DateTimeFormat('en-US', { timeZone });
+        return timeZone;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/dock-context.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared context for <SvDockLayout> and its recursive <DockNodeView>. Carries
+ * the pane-content snippet and the handful of callbacks the tree view needs, so
+ * the recursive renderer reaches them without prop-drilling through every level.
+ */
+import type { Snippet } from 'svelte';
+import type { DockPane, DockTabs, DockZone } from './dock-model';
+export type DockContext = {
+    /** Renders a pane's content. Called as `{@render pane(dockPane)}`. */
+    pane: Snippet<[DockPane]>;
+    /**
+     * Optional stack-header controls for a leaf (maximize / auto-hide / pop-out /
+     * float), rendered once per leaf at the right of its tab strip.
+     */
+    leafActions?: Snippet<[DockTabs]>;
+    /** Make tab `index` active in the given leaf. */
+    activate: (tabsId: string, index: number) => void;
+    /** Close (remove) a pane. */
+    close: (paneId: string) => void;
+    /** Start dragging a pane's tab to re-dock it. */
+    beginDrag: (event: PointerEvent, paneId: string, tabsId: string) => void;
+    /** Commit new size weights for a group after a splitter drag. */
+    resize: (groupId: string, sizes: number[]) => void;
+    /** Minimum pane size (px) along the split axis. */
+    minSize: () => number;
+    /**
+     * The leaf the pointer is over while dragging, for the dock guide. `zone` is
+     * the guide chip under the pointer (drop docks there) or `null` (over the leaf
+     * but off the guide - the drop will float). `centerOnly` shows just the centre
+     * chip (floating windows accept tabs only).
+     */
+    dropTarget: () => {
+        tabsId: string;
+        zone: DockZone | null;
+        centerOnly?: boolean;
+    } | null;
+    /** The live tab-reorder target, for the insertion-line indicator. */
+    reorderTarget?: () => {
+        tabsId: string;
+        index: number;
+    } | null;
+    /** Which side of each leaf the tab strip sits on. Default `'top'`. */
+    headerPosition?: () => 'top' | 'bottom' | 'left' | 'right';
+    /** The id of the currently focused leaf, for the active-panel highlight. */
+    focusedLeaf?: () => string | null;
+    /** Keep inactive tabs mounted (hidden) so their content state persists. */
+    keepAlive?: () => boolean;
+    /** For a single-pane leaf, suppress the redundant tab button (e.g. an auto-hide fly-out,
+     *  where the edge strip already names the panel). Leaf actions still render. */
+    hideSingleTab?: () => boolean;
+};
+export declare const DOCK_CONTEXT: unique symbol;

package/dist/dock-context.js

@@ -0,0 +1 @@
+export const DOCK_CONTEXT = Symbol('svgrid-dock');