@urbicon-ui/blocks 6.1.4

package/dist/utils/optional-context.js

@@ -0,0 +1,27 @@
+import { getContext, hasContext, setContext } from 'svelte';
+/**
+ * Optional context helper.
+ *
+ * Svelte's built-in `createContext<T>()` getter throws `missing_context`
+ * when no parent component set the value. That is correct for compound
+ * components (Tab, Accordion, …) where the sub-components must live
+ * inside the parent. For *optional* contexts (e.g. BlocksProvider,
+ * ButtonGroup wrapping individual Buttons, IconProvider) we want the
+ * getter to silently return `undefined` instead.
+ *
+ * This helper provides the same `[get, set]` shape as `createContext`
+ * but with a `() => T | undefined` getter that uses `hasContext` to
+ * differentiate between "no provider" (return undefined) and "provider
+ * deliberately set the value to undefined" (return undefined too —
+ * the consumer can't tell the difference, which is fine for opt-in
+ * APIs).
+ */
+export function createOptionalContext() {
+    // Object identity is used as the context key, just like Svelte's
+    // built-in createContext does internally. Plain `{}` is sufficient.
+    const key = {};
+    return [
+        () => (hasContext(key) ? getContext(key) : undefined),
+        (value) => setContext(key, value)
+    ];
+}

package/dist/utils/overlay-stack.svelte.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Central registry for open modal overlays (Dialog, Drawer, Sidebar).
+ *
+ * The browser already handles top-layer stacking and ESC-to-close for native
+ * `<dialog>` elements. This stack adds three things on top of that:
+ *
+ * 1. **Programmatic close-all** — useful on logout, route changes, or auth
+ *    expiry, where leaving stacked modals open creates UX confusion.
+ * 2. **Inspection** — `depth` and `topId` for tests, debug overlays, or
+ *    conditional UI logic (e.g. "hide the help-tooltip while a Drawer is
+ *    open").
+ * 3. **Stack-aware close-top** — `closeTop()` resolves the most recently
+ *    registered overlay regardless of which component owns it.
+ *
+ * Each overlay registers itself on open with a `close` callback and
+ * deregisters on close. Registration is keyed by an opaque ID — typically
+ * generated via `crypto.randomUUID()` so multiple instances of the same
+ * component type can coexist in the stack.
+ *
+ * @example
+ * ```ts
+ * // Inside a Drawer / Dialog / Sidebar component:
+ * $effect(() => {
+ *   if (!open) return;
+ *   const id = crypto.randomUUID();
+ *   return overlayStack.register(id, () => { open = false; });
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // App-level: close everything on logout
+ * import { overlayStack } from '@urbicon-ui/blocks';
+ *
+ * function logout() {
+ *   overlayStack.closeAll();
+ *   goto('/login');
+ * }
+ * ```
+ */
+declare class OverlayStack {
+    /** Internal entry list. Reactive so consumers can derive UI from `depth`. */
+    private entries;
+    /**
+     * Register an open overlay. Returns an unregister function — store it as
+     * the cleanup of an `$effect` so the entry is removed when the overlay
+     * closes or the component unmounts.
+     *
+     * Reads of `entries` are wrapped in `untrack` so callers calling this from
+     * within an `$effect` don't accidentally subscribe to the entries list —
+     * otherwise the write below would re-trigger the calling effect on every
+     * registration, producing `effect_update_depth_exceeded`.
+     */
+    register(id: string, close: () => void): () => void;
+    /** Remove an overlay from the stack without invoking its close callback. */
+    unregister(id: string): void;
+    /**
+     * Invoke the close callback of every registered overlay, top-down. Each
+     * callback is responsible for unregistering itself (typically by setting
+     * `open = false` and letting the `$effect`-cleanup run).
+     */
+    closeAll(): void;
+    /** Close only the topmost overlay. No-op if the stack is empty. */
+    closeTop(): void;
+    /** Number of currently open overlays. */
+    get depth(): number;
+    /** ID of the topmost overlay, or `null` if the stack is empty. */
+    get topId(): string | null;
+    /** True if the given ID is the topmost overlay. */
+    isTop(id: string): boolean;
+}
+/** Singleton overlay stack. Import and use directly. */
+export declare const overlayStack: OverlayStack;
+export {};

package/dist/utils/overlay-stack.svelte.js

@@ -0,0 +1,93 @@
+import { untrack } from 'svelte';
+/**
+ * Central registry for open modal overlays (Dialog, Drawer, Sidebar).
+ *
+ * The browser already handles top-layer stacking and ESC-to-close for native
+ * `<dialog>` elements. This stack adds three things on top of that:
+ *
+ * 1. **Programmatic close-all** — useful on logout, route changes, or auth
+ *    expiry, where leaving stacked modals open creates UX confusion.
+ * 2. **Inspection** — `depth` and `topId` for tests, debug overlays, or
+ *    conditional UI logic (e.g. "hide the help-tooltip while a Drawer is
+ *    open").
+ * 3. **Stack-aware close-top** — `closeTop()` resolves the most recently
+ *    registered overlay regardless of which component owns it.
+ *
+ * Each overlay registers itself on open with a `close` callback and
+ * deregisters on close. Registration is keyed by an opaque ID — typically
+ * generated via `crypto.randomUUID()` so multiple instances of the same
+ * component type can coexist in the stack.
+ *
+ * @example
+ * ```ts
+ * // Inside a Drawer / Dialog / Sidebar component:
+ * $effect(() => {
+ *   if (!open) return;
+ *   const id = crypto.randomUUID();
+ *   return overlayStack.register(id, () => { open = false; });
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // App-level: close everything on logout
+ * import { overlayStack } from '@urbicon-ui/blocks';
+ *
+ * function logout() {
+ *   overlayStack.closeAll();
+ *   goto('/login');
+ * }
+ * ```
+ */
+class OverlayStack {
+    /** Internal entry list. Reactive so consumers can derive UI from `depth`. */
+    entries = $state([]);
+    /**
+     * Register an open overlay. Returns an unregister function — store it as
+     * the cleanup of an `$effect` so the entry is removed when the overlay
+     * closes or the component unmounts.
+     *
+     * Reads of `entries` are wrapped in `untrack` so callers calling this from
+     * within an `$effect` don't accidentally subscribe to the entries list —
+     * otherwise the write below would re-trigger the calling effect on every
+     * registration, producing `effect_update_depth_exceeded`.
+     */
+    register(id, close) {
+        this.entries = [...untrack(() => this.entries), { id, close }];
+        return () => this.unregister(id);
+    }
+    /** Remove an overlay from the stack without invoking its close callback. */
+    unregister(id) {
+        this.entries = untrack(() => this.entries).filter((e) => e.id !== id);
+    }
+    /**
+     * Invoke the close callback of every registered overlay, top-down. Each
+     * callback is responsible for unregistering itself (typically by setting
+     * `open = false` and letting the `$effect`-cleanup run).
+     */
+    closeAll() {
+        // Snapshot in case callbacks mutate the stack.
+        const snapshot = [...this.entries].reverse();
+        for (const entry of snapshot)
+            entry.close();
+    }
+    /** Close only the topmost overlay. No-op if the stack is empty. */
+    closeTop() {
+        const top = this.entries[this.entries.length - 1];
+        top?.close();
+    }
+    /** Number of currently open overlays. */
+    get depth() {
+        return this.entries.length;
+    }
+    /** ID of the topmost overlay, or `null` if the stack is empty. */
+    get topId() {
+        return this.entries[this.entries.length - 1]?.id ?? null;
+    }
+    /** True if the given ID is the topmost overlay. */
+    isTop(id) {
+        return this.topId === id;
+    }
+}
+/** Singleton overlay stack. Import and use directly. */
+export const overlayStack = new OverlayStack();

package/dist/utils/overlay-tokens.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Overlay animation tokens (XC-11).
+ *
+ * Single JS source of truth that mirrors the CSS custom properties in
+ * `style/interaction.css`. Svelte transitions need numeric inputs at the
+ * call site, so we expose the same values as constants here and as
+ * runtime getters that read the live CSS custom property — useful when
+ * a consumer overrides a token via `BlocksProvider` or a theme.
+ *
+ * Components should call `getOverlayMotion()` (returns the resolved
+ * numeric values for the current document) over hard-coding numbers.
+ * The optional `override` argument carries per-instance values from a
+ * component's `transitionDuration` / `transitionEasing` props.
+ *
+ * Reduced motion: `getOverlayMotion()` reads the live CSS — so the
+ * `@media (prefers-reduced-motion: reduce)` branch in `interaction.css`
+ * automatically collapses durations and distances to zero. Components
+ * never need to consult the media query themselves.
+ */
+export type EasingFn = (t: number) => number;
+export interface OverlayMotion {
+    /** Enter duration in ms (panel + backdrop). */
+    enterDuration: number;
+    /** Exit duration in ms (panel + backdrop). */
+    exitDuration: number;
+    /** Backdrop enter duration in ms — usually = enterDuration. */
+    backdropEnterDuration: number;
+    /** Backdrop exit duration in ms — usually = exitDuration. */
+    backdropExitDuration: number;
+    /** Easing for panel and backdrop transitions. */
+    easing: EasingFn;
+    /** Panel scale-in start value (0..1). 1 disables the scale effect. */
+    panelScaleStart: number;
+    /** Panel fly-in distance in px (translated along the placement axis). */
+    panelFlyDistance: number;
+}
+export interface OverlayMotionOverride {
+    enterDuration?: number;
+    exitDuration?: number;
+    backdropEnterDuration?: number;
+    backdropExitDuration?: number;
+    easing?: EasingFn;
+    panelScaleStart?: number;
+    panelFlyDistance?: number;
+}
+/** Defaults mirror the CSS custom properties in `interaction.css`. */
+export declare const OVERLAY_MOTION_DEFAULTS: OverlayMotion;
+/**
+ * Read the current overlay motion settings.
+ *
+ * SSR-safe: when `window` is unavailable, returns the static defaults.
+ * Easing is not read from CSS (no portable cross-browser parse of
+ * `cubic-bezier()` arguments) — it stays at the JS default and can be
+ * overridden per-instance via the `override` argument.
+ */
+export declare function getOverlayMotion(override?: OverlayMotionOverride): OverlayMotion;

package/dist/utils/overlay-tokens.js

@@ -0,0 +1,86 @@
+/**
+ * Overlay animation tokens (XC-11).
+ *
+ * Single JS source of truth that mirrors the CSS custom properties in
+ * `style/interaction.css`. Svelte transitions need numeric inputs at the
+ * call site, so we expose the same values as constants here and as
+ * runtime getters that read the live CSS custom property — useful when
+ * a consumer overrides a token via `BlocksProvider` or a theme.
+ *
+ * Components should call `getOverlayMotion()` (returns the resolved
+ * numeric values for the current document) over hard-coding numbers.
+ * The optional `override` argument carries per-instance values from a
+ * component's `transitionDuration` / `transitionEasing` props.
+ *
+ * Reduced motion: `getOverlayMotion()` reads the live CSS — so the
+ * `@media (prefers-reduced-motion: reduce)` branch in `interaction.css`
+ * automatically collapses durations and distances to zero. Components
+ * never need to consult the media query themselves.
+ */
+import { quintOut } from 'svelte/easing';
+/** Defaults mirror the CSS custom properties in `interaction.css`. */
+export const OVERLAY_MOTION_DEFAULTS = {
+    enterDuration: 200,
+    exitDuration: 180,
+    backdropEnterDuration: 200,
+    backdropExitDuration: 180,
+    easing: quintOut,
+    panelScaleStart: 0.96,
+    panelFlyDistance: 320
+};
+function parseDurationMs(value, fallback) {
+    if (!value)
+        return fallback;
+    const trimmed = value.trim();
+    if (trimmed.endsWith('ms')) {
+        const n = parseFloat(trimmed);
+        return Number.isFinite(n) ? n : fallback;
+    }
+    if (trimmed.endsWith('s')) {
+        const n = parseFloat(trimmed);
+        return Number.isFinite(n) ? n * 1000 : fallback;
+    }
+    const n = parseFloat(trimmed);
+    return Number.isFinite(n) ? n : fallback;
+}
+function parsePx(value, fallback) {
+    if (!value)
+        return fallback;
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : fallback;
+}
+function parseUnit(value, fallback) {
+    if (!value)
+        return fallback;
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : fallback;
+}
+/**
+ * Read the current overlay motion settings.
+ *
+ * SSR-safe: when `window` is unavailable, returns the static defaults.
+ * Easing is not read from CSS (no portable cross-browser parse of
+ * `cubic-bezier()` arguments) — it stays at the JS default and can be
+ * overridden per-instance via the `override` argument.
+ */
+export function getOverlayMotion(override) {
+    if (typeof window === 'undefined') {
+        return { ...OVERLAY_MOTION_DEFAULTS, ...override };
+    }
+    const computed = getComputedStyle(document.documentElement);
+    return {
+        enterDuration: override?.enterDuration ??
+            parseDurationMs(computed.getPropertyValue('--blocks-overlay-enter-duration'), OVERLAY_MOTION_DEFAULTS.enterDuration),
+        exitDuration: override?.exitDuration ??
+            parseDurationMs(computed.getPropertyValue('--blocks-overlay-exit-duration'), OVERLAY_MOTION_DEFAULTS.exitDuration),
+        backdropEnterDuration: override?.backdropEnterDuration ??
+            parseDurationMs(computed.getPropertyValue('--blocks-overlay-backdrop-enter-duration'), OVERLAY_MOTION_DEFAULTS.backdropEnterDuration),
+        backdropExitDuration: override?.backdropExitDuration ??
+            parseDurationMs(computed.getPropertyValue('--blocks-overlay-backdrop-exit-duration'), OVERLAY_MOTION_DEFAULTS.backdropExitDuration),
+        easing: override?.easing ?? OVERLAY_MOTION_DEFAULTS.easing,
+        panelScaleStart: override?.panelScaleStart ??
+            parseUnit(computed.getPropertyValue('--blocks-overlay-panel-scale-start'), OVERLAY_MOTION_DEFAULTS.panelScaleStart),
+        panelFlyDistance: override?.panelFlyDistance ??
+            parsePx(computed.getPropertyValue('--blocks-overlay-panel-fly-distance'), OVERLAY_MOTION_DEFAULTS.panelFlyDistance)
+    };
+}

package/dist/utils/overlay.d.ts

@@ -0,0 +1,8 @@
+export declare const FOCUSABLE_SELECTOR: string;
+export declare function getFocusableElements(container: HTMLElement | undefined): HTMLElement[];
+export declare function trapFocus(event: KeyboardEvent, container: HTMLElement | undefined): void;
+export declare function lockBodyScroll(): void;
+export declare function unlockBodyScroll(): void;
+export declare function focusFirstElement(container: HTMLElement | undefined): void;
+export declare function showDialogModal(dialogEl: HTMLDialogElement | undefined, panelEl: HTMLElement | undefined): void;
+export declare function closeDialogModal(dialogEl: HTMLDialogElement | undefined, previouslyFocused: HTMLElement | null): void;

package/dist/utils/overlay.js

@@ -0,0 +1,83 @@
+import { tick } from 'svelte';
+const isBrowser = typeof document !== 'undefined';
+export const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]'
+].join(', ');
+export function getFocusableElements(container) {
+    if (!container)
+        return [];
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.tabIndex >= 0 && !el.closest('[inert]'));
+}
+export function trapFocus(event, container) {
+    if (!isBrowser)
+        return;
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0)
+        return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey) {
+        if (document.activeElement === first || !container?.contains(document.activeElement)) {
+            event.preventDefault();
+            last.focus();
+        }
+    }
+    else {
+        if (document.activeElement === last || !container?.contains(document.activeElement)) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+}
+let bodyScrollLockCount = 0;
+let savedBodyOverflow;
+export function lockBodyScroll() {
+    if (!isBrowser)
+        return;
+    if (bodyScrollLockCount === 0) {
+        savedBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    bodyScrollLockCount += 1;
+}
+export function unlockBodyScroll() {
+    if (!isBrowser)
+        return;
+    bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+    if (bodyScrollLockCount === 0) {
+        document.body.style.overflow = savedBodyOverflow ?? '';
+        savedBodyOverflow = undefined;
+    }
+}
+export function focusFirstElement(container) {
+    if (!isBrowser)
+        return;
+    tick().then(() => {
+        const focusable = getFocusableElements(container);
+        if (focusable.length > 0)
+            focusable[0].focus();
+    });
+}
+export function showDialogModal(dialogEl, panelEl) {
+    if (!isBrowser)
+        return;
+    lockBodyScroll();
+    tick().then(() => {
+        dialogEl?.showModal();
+        focusFirstElement(panelEl);
+    });
+}
+export function closeDialogModal(dialogEl, previouslyFocused) {
+    if (!isBrowser)
+        return;
+    if (dialogEl?.open)
+        dialogEl.close();
+    unlockBodyScroll();
+    previouslyFocused?.focus();
+}

package/dist/utils/persistent-state.svelte.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Configuration for persistent state
+ */
+export interface PersistentStateConfig<T> {
+    key: string;
+    defaultValue: T;
+    storage?: 'localStorage' | 'sessionStorage';
+    serialize?: (value: T) => string;
+    deserialize?: (value: string) => T;
+    debounceMs?: number;
+    version?: number;
+}
+/**
+ * Create a persistent state that automatically syncs with storage
+ * Uses Svelte 5 $state() for reactivity
+ */
+export declare function createPersistentState<T>(config: PersistentStateConfig<T>): {
+    value: T;
+    /**
+     * Reset to default value and clear storage
+     */
+    reset(): void;
+    /**
+     * Force immediate save (bypasses debounce)
+     */
+    forceSave(): void;
+    /**
+     * Reload from storage
+     */
+    reload(): void;
+};
+/**
+ * Specialized hook for filter persistence
+ */
+export interface FilterPersistenceConfig {
+    tableId: string;
+    storage?: 'localStorage' | 'sessionStorage';
+    debounceMs?: number;
+}

package/dist/utils/persistent-state.svelte.js

@@ -0,0 +1,98 @@
+const BROWSER = typeof window !== 'undefined';
+/**
+ * Get storage implementation based on type
+ */
+function getStorage(type) {
+    if (!BROWSER)
+        return null;
+    try {
+        const storage = type === 'localStorage' ? window.localStorage : window.sessionStorage;
+        // Test if storage is available (can fail in private mode)
+        const testKey = '__storage_test__';
+        storage.setItem(testKey, 'test');
+        storage.removeItem(testKey);
+        return storage;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Debounce utility for performance
+ */
+function debounce(func, wait) {
+    let timeout;
+    return ((...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func(...args), wait);
+    });
+}
+/**
+ * Create a persistent state that automatically syncs with storage
+ * Uses Svelte 5 $state() for reactivity
+ */
+export function createPersistentState(config) {
+    const { key, defaultValue, storage: storageType = 'localStorage', serialize = JSON.stringify, deserialize = JSON.parse, debounceMs = 300, version = 1 } = config;
+    const storageKey = `urbicon_${key}_v${version}`;
+    const storage = getStorage(storageType);
+    // Initialize state with stored value or default
+    const initialValue = loadFromStorage();
+    const state = $state({ value: initialValue });
+    function loadFromStorage() {
+        if (!storage)
+            return defaultValue;
+        try {
+            const stored = storage.getItem(storageKey);
+            if (stored === null)
+                return defaultValue;
+            return deserialize(stored);
+        }
+        catch (error) {
+            console.warn(`Failed to load persistent state for key "${key}":`, error);
+            return defaultValue;
+        }
+    }
+    function saveToStorage(value) {
+        if (!storage)
+            return;
+        try {
+            storage.setItem(storageKey, serialize(value));
+        }
+        catch (error) {
+            console.warn(`Failed to save persistent state for key "${key}":`, error);
+        }
+    }
+    // Debounced save function for performance
+    const debouncedSave = debounce(saveToStorage, debounceMs);
+    // Auto-save when state changes
+    $effect(() => {
+        debouncedSave(state.value);
+    });
+    return {
+        get value() {
+            return state.value;
+        },
+        set value(newValue) {
+            state.value = newValue;
+        },
+        /**
+         * Reset to default value and clear storage
+         */
+        reset() {
+            state.value = defaultValue;
+            storage?.removeItem(storageKey);
+        },
+        /**
+         * Force immediate save (bypasses debounce)
+         */
+        forceSave() {
+            saveToStorage(state.value);
+        },
+        /**
+         * Reload from storage
+         */
+        reload() {
+            state.value = loadFromStorage();
+        }
+    };
+}

package/dist/utils/swipeable.d.ts

@@ -0,0 +1,15 @@
+import type { Attachment } from 'svelte/attachments';
+interface SwipeableOptions {
+    onSwipeLeft: () => void;
+    onSwipeRight: () => void;
+    threshold?: number;
+    enabled?: boolean;
+}
+/**
+ * Svelte attachment for horizontal swipe detection using Pointer Events.
+ * Works for both touch and mouse interactions.
+ *
+ * Usage: `<div {@attach swipeable({ onSwipeLeft, onSwipeRight, enabled })}>`
+ */
+export declare function swipeable(opts: SwipeableOptions): Attachment<HTMLElement>;
+export {};

package/dist/utils/swipeable.js

@@ -0,0 +1,55 @@
+/**
+ * Svelte attachment for horizontal swipe detection using Pointer Events.
+ * Works for both touch and mouse interactions.
+ *
+ * Usage: `<div {@attach swipeable({ onSwipeLeft, onSwipeRight, enabled })}>`
+ */
+export function swipeable(opts) {
+    return (node) => {
+        let startX = 0;
+        let startY = 0;
+        let tracking = false;
+        function onPointerDown(e) {
+            if (opts.enabled === false)
+                return;
+            // Only track primary pointer (ignore multi-touch)
+            if (!e.isPrimary)
+                return;
+            startX = e.clientX;
+            startY = e.clientY;
+            tracking = true;
+        }
+        function onPointerUp(e) {
+            if (!tracking || !e.isPrimary)
+                return;
+            tracking = false;
+            const deltaX = e.clientX - startX;
+            const deltaY = e.clientY - startY;
+            const threshold = opts.threshold ?? 50;
+            // Ignore if vertical movement is too large (scroll intent)
+            if (Math.abs(deltaY) > 80)
+                return;
+            // Ignore if horizontal movement is below threshold
+            if (Math.abs(deltaX) < threshold)
+                return;
+            if (deltaX < 0) {
+                opts.onSwipeLeft();
+            }
+            else {
+                opts.onSwipeRight();
+            }
+        }
+        function onPointerCancel() {
+            tracking = false;
+        }
+        node.style.touchAction = 'pan-y';
+        node.addEventListener('pointerdown', onPointerDown);
+        node.addEventListener('pointerup', onPointerUp);
+        node.addEventListener('pointercancel', onPointerCancel);
+        return () => {
+            node.removeEventListener('pointerdown', onPointerDown);
+            node.removeEventListener('pointerup', onPointerUp);
+            node.removeEventListener('pointercancel', onPointerCancel);
+        };
+    };
+}

package/dist/utils/tier-context.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Semantic radius tier for interactive surfaces (3-tier system).
+ *
+ * - `commit`  → r-human   (CTA, identity, status declarations)
+ * - `modify`  → r-interactive (fields, navigation, secondary actions)
+ *
+ * Container components (Card, Alert, Toolbar surface, …) live in a third
+ * tier `contain` (r-structure) which is **not** part of this propagation
+ * context — those surfaces are always r-structure by design and have no
+ * tier-flip use case.
+ */
+export type InteractiveTier = 'commit' | 'modify';
+export interface TierContext {
+    readonly tier: InteractiveTier;
+}
+/**
+ * Shared optional context for tier propagation. Set by parent containers
+ * that wrap tier-aware children (Toolbar, ButtonGroup). Read by tier-aware
+ * leaf components (Button, Badge, Input, Textarea, Select, Combobox) which
+ * merge it with their own `tier` prop:
+ *
+ *   const tierCtx = getTierContext();
+ *   const effectiveTier = $derived(tierProp ?? tierCtx?.tier ?? 'commit');
+ *
+ * Closer providers override farther ones automatically via Svelte's
+ * `setContext` semantics. This keeps the API single-axis (one prop name)
+ * and lets new containers opt into propagation without inventing their
+ * own context module.
+ */
+declare const getTierContext: () => TierContext | undefined, setTierContext: (value: TierContext | undefined) => TierContext | undefined;
+export { getTierContext, setTierContext };