@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/dialog/dialog-store.svelte.js

@@ -0,0 +1,125 @@
+import { isBrowser } from '../../core/utils/browser';
+import { DialogController } from './dialog-controller';
+import {} from './dialog-data';
+import {} from './types.svelte';
+class DialogStore {
+    _buckets = $state.raw({});
+    _mounted = $state.raw([]);
+    _mountedSet = new Set();
+    _savedOverflow = null;
+    /** Reactive snapshot of dialogs routed to a container id. */
+    dialogs = (containerId) => this._buckets[containerId] ?? [];
+    /** Reactive — last (topmost) dialog inside the given container. */
+    active = (containerId) => {
+        const bucket = this._buckets[containerId];
+        return bucket && bucket.length > 0 ? bucket[bucket.length - 1] : null;
+    };
+    /** Total number of open dialogs across all containers. */
+    count = () => Object.values(this._buckets).reduce((sum, b) => sum + b.length, 0);
+    /** Reactive list of container ids that have a `<DialogHost>` mounted. */
+    mounted = () => this._mounted;
+    isMounted = (containerId) => this._mountedSet.has(containerId);
+    open = async (init, id = Math.random()) => {
+        const containerId = init.containerId ?? '';
+        if (isBrowser()) {
+            const { ensureDialogHost } = await import('./dialog-host-mount');
+            ensureDialogHost(containerId);
+        }
+        const { view, data, explicitSettings, containerSettings } = init;
+        const controller = new DialogController({
+            id,
+            onClose: () => {
+                const bucket = this._buckets[containerId];
+                if (!bucket) {
+                    return;
+                }
+                const next = bucket.filter((d) => d.id !== id);
+                if (next.length === bucket.length) {
+                    return;
+                }
+                this._buckets = { ...this._buckets, [containerId]: next };
+                if (this.count() === 0) {
+                    this.unlockBodyScroll();
+                }
+            },
+            settings: explicitSettings,
+            containerSettings
+        });
+        const newDialog = {
+            id,
+            containerId,
+            view,
+            data,
+            controller
+        };
+        const wasEmpty = this.count() === 0;
+        const existing = this._buckets[containerId] ?? [];
+        this._buckets = { ...this._buckets, [containerId]: [...existing, newDialog] };
+        if (wasEmpty) {
+            this.lockBodyScroll();
+        }
+        return controller.openedPromise;
+    };
+    close = (id) => {
+        for (const bucket of Object.values(this._buckets)) {
+            const dialog = bucket.find((d) => d.id === id);
+            if (dialog) {
+                dialog.controller.cancel();
+                return;
+            }
+        }
+    };
+    closeAll = () => {
+        const all = Object.values(this._buckets).flat().reverse();
+        for (const dialog of all) {
+            dialog.controller.cancel();
+        }
+    };
+    closeAllIn = (containerId) => {
+        const bucket = this._buckets[containerId];
+        if (!bucket) {
+            return;
+        }
+        const copy = [...bucket].reverse();
+        for (const dialog of copy) {
+            dialog.controller.cancel();
+        }
+    };
+    registerMount = (containerId) => {
+        if (this._mountedSet.has(containerId)) {
+            return;
+        }
+        this._mountedSet.add(containerId);
+        this._mounted = [...this._mountedSet];
+    };
+    unregisterMount = (containerId) => {
+        if (!this._mountedSet.delete(containerId)) {
+            return;
+        }
+        this._mounted = [...this._mountedSet];
+    };
+    lockBodyScroll = () => {
+        if (this._savedOverflow !== null) {
+            return;
+        }
+        this._savedOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'hidden';
+    };
+    unlockBodyScroll = () => {
+        if (this._savedOverflow === null) {
+            return;
+        }
+        document.documentElement.style.overflow = this._savedOverflow;
+        this._savedOverflow = null;
+    };
+}
+const createDialogsSingleton = () => {
+    if (!isBrowser()) {
+        return new DialogStore();
+    }
+    if (import.meta.hot) {
+        return (import.meta.hot.data.dialogs ??= new DialogStore());
+    }
+    return new DialogStore();
+};
+export const Dialogs = createDialogsSingleton();

package/dist/ui/dialog/index.d.ts

@@ -1,8 +1,9 @@
-export { Dialogs } from './dialogs.svelte';
+export { Dialogs } from './dialog-store.svelte';
 export { DialogController } from './dialog-controller';
 export { DIALOG_SIZES, type DialogPosition, type DialogResult, type DialogSize } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';
 export { default as DialogCloseButton } from './cmp.dialog-close-button.svelte';
-export type { ButtonVariant } from '../button/resources/types';
+export { default as DialogHost } from './cmp.dialog-host.svelte';
+export type { ButtonVariant } from '../button/types';

package/dist/ui/dialog/index.js

@@ -1,7 +1,8 @@
-export { Dialogs } from './dialogs.svelte';
+export { Dialogs } from './dialog-store.svelte';
 export { DialogController } from './dialog-controller';
 export { DIALOG_SIZES } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';
 export { default as DialogCloseButton } from './cmp.dialog-close-button.svelte';
+export { default as DialogHost } from './cmp.dialog-host.svelte';

package/dist/ui/dialog/types.svelte.d.ts

@@ -1,5 +1,5 @@
 export type DialogSize = 'small' | 'medium' | 'default' | 'large' | 'fullhd' | 'auto';
-export type DialogPosition = 'center' | 'center-top' | 'full-screen' | 'full-height';
+export type DialogPosition = 'center' | 'center-top' | 'full-screen' | 'full-height' | 'side-left' | 'side-right';
 export declare const DIALOG_SIZES: readonly DialogSize[];
 export declare class DialogSettings {
     closeOnClickOutside: boolean;

package/dist/ui/divider/cmp.divider.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">let { orientation = 'horizontal', label } = $props();
+</script>
+
+{#if label}
+  <div class="divider divider--labeled" role="separator" aria-orientation="horizontal">
+    <span class="divider__line"></span>
+    <span class="divider__label">{label}</span>
+    <span class="divider__line"></span>
+  </div>
+{:else}
+  <div class="divider divider--{orientation}" role="separator" aria-orientation={orientation}></div>
+{/if}
+
+<!--
+@component
+Divider — horizontal or vertical separator. Optional inline `label` (horizontal only) renders between two flanking lines.
+
+For `orientation="vertical"`, place the Divider inside a flex container — it uses `align-self: stretch` to size to its siblings.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--divider--color` | Line color | `--sc-kit--color--border` |
+| `--sc-kit--divider--thickness` | Line thickness | `1px` |
+| `--sc-kit--divider--gap` | Block margin (horizontal) or inline margin (vertical) | `--sc-kit--space--3` |
+| `--sc-kit--divider--labeled--gap` | Block margin for the labeled variant | `--sc-kit--space--4` |
+| `--sc-kit--divider--label--color` | Label color | `--sc-kit--color--text--muted` |
+| `--sc-kit--divider--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--divider--label--gap` | Gap between label and flanking lines | `--sc-kit--space--3` |
+-->
+
+<style>.divider {
+  --_div--color: var(--sc-kit--divider--color, var(--sc-kit--color--border));
+  --_div--thickness: var(--sc-kit--divider--thickness, 1px);
+  --_div--gap: var(--sc-kit--divider--gap, var(--sc-kit--space--3));
+  --_div--labeled-gap: var(--sc-kit--divider--labeled--gap, var(--sc-kit--space--4));
+  --_div--label-color: var(--sc-kit--divider--label--color, var(--sc-kit--color--text--muted));
+  --_div--label-font-size: var(--sc-kit--divider--label--font-size, var(--sc-kit--font-size--sm));
+  --_div--label-gap: var(--sc-kit--divider--label--gap, var(--sc-kit--space--3));
+  background: var(--_div--color);
+}
+.divider--horizontal {
+  height: var(--_div--thickness);
+  width: 100%;
+  margin: var(--_div--gap) 0;
+}
+.divider--vertical {
+  width: var(--_div--thickness);
+  align-self: stretch;
+  margin: 0 var(--_div--gap);
+}
+.divider--labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--_div--label-gap);
+  margin: var(--_div--labeled-gap) 0;
+  background: transparent;
+}
+.divider__line {
+  flex: 1;
+  height: var(--_div--thickness);
+  background: var(--_div--color);
+}
+.divider__label {
+  color: var(--_div--label-color);
+  font-size: var(--_div--label-font-size);
+  font-family: var(--sc-kit--font--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}</style>

package/dist/ui/divider/cmp.divider.svelte.d.ts

@@ -0,0 +1,25 @@
+type Props = {
+    /** @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional label rendered inline with the divider line. Implicitly horizontal. */
+    label?: string;
+};
+/**
+ * Divider — horizontal or vertical separator. Optional inline `label` (horizontal only) renders between two flanking lines.
+ *
+ * For `orientation="vertical"`, place the Divider inside a flex container — it uses `align-self: stretch` to size to its siblings.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--divider--color` | Line color | `--sc-kit--color--border` |
+ * | `--sc-kit--divider--thickness` | Line thickness | `1px` |
+ * | `--sc-kit--divider--gap` | Block margin (horizontal) or inline margin (vertical) | `--sc-kit--space--3` |
+ * | `--sc-kit--divider--labeled--gap` | Block margin for the labeled variant | `--sc-kit--space--4` |
+ * | `--sc-kit--divider--label--color` | Label color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--divider--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--divider--label--gap` | Gap between label and flanking lines | `--sc-kit--space--3` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/divider/index.d.ts

@@ -0,0 +1 @@
+export { default as Divider } from './cmp.divider.svelte';

package/dist/ui/divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from './cmp.divider.svelte';

package/dist/ui/drag-and-drop/cmp.drag-source.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" generics="T">import { DragAndDrop } from './drag-and-drop.svelte';
+const { dragEventModel, children } = $props();
+const onDragStart = () => {
+    DragAndDrop.event = dragEventModel;
+};
+const onDragEnd = () => {
+    DragAndDrop.event = null;
+};
+</script>
+
+<div class="drag-source" draggable="true" ondragstart={onDragStart} ondragend={onDragEnd} role="none">
+  {@render children()}
+</div>
+
+<!--
+@component
+Wraps arbitrary content and makes it the source of a kit drag-and-drop session. On `dragstart`
+the supplied `dragEventModel` is written to the `DragAndDrop` singleton store; on `dragend`
+it's cleared. Pair with one or more `DropZone`s elsewhere in the tree — zones whose
+`acceptedEvents` includes the model's `type` will activate while the drag is in progress.
+
+The wrapper takes 100% × 100% of its slot with `cursor: grab` so it overlays the host's
+content; size the host accordingly.
+-->
+
+<style>.drag-source {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}</style>

package/dist/ui/drag-and-drop/cmp.drag-source.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { DragEventModel } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /** Payload to write into the shared `DragAndDrop` store on `dragstart`. */
+        dragEventModel: DragEventModel<T>;
+        children: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Wraps arbitrary content and makes it the source of a kit drag-and-drop session. On `dragstart`
+ * the supplied `dragEventModel` is written to the `DragAndDrop` singleton store; on `dragend`
+ * it's cleared. Pair with one or more `DropZone`s elsewhere in the tree — zones whose
+ * `acceptedEvents` includes the model's `type` will activate while the drag is in progress.
+ *
+ * The wrapper takes 100% × 100% of its slot with `cursor: grab` so it overlays the host's
+ * content; size the host accordingly.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/drag-and-drop/cmp.drop-zone.svelte

@@ -0,0 +1,122 @@
+<script lang="ts" generics="T">import { DragAndDrop } from './drag-and-drop.svelte';
+const { acceptedEvents, disabled, highlightOffset = 0, silent = false, showRejection = false, children, on } = $props();
+const dragEvent = $derived.by(() => DragAndDrop.event && !disabled && (acceptedEvents.includes(DragAndDrop.event.type) || !acceptedEvents.length)
+    ? DragAndDrop.event
+    : null);
+// A drag is in progress AND this zone refuses it (type not in acceptedEvents). Drives the
+// optional red-shield visual; `on.drop` / `on.enter` still don't fire for rejected drags.
+const dragRejected = $derived(!!DragAndDrop.event && !disabled && !dragEvent && showRejection);
+let dragOver = $state(false);
+const onDrop = (e) => {
+    e.preventDefault();
+    if (dragEvent) {
+        on?.drop(dragEvent);
+    }
+    DragAndDrop.event = null;
+    if (dragOver) {
+        on?.leave?.();
+    }
+    dragOver = false;
+};
+const onDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!dragOver && dragEvent) {
+        on?.enter?.(dragEvent);
+    }
+    dragOver = true;
+};
+const onDragLeave = () => {
+    // Intentionally simple — no `relatedTarget` containment check. Nested zones rely on the
+    // parent firing `leave` when the cursor enters a child zone (so only the innermost zone
+    // ever shows the dragover state). A containment check would keep the parent active and
+    // we'd highlight both layers at once.
+    if (dragOver) {
+        on?.leave?.();
+    }
+    dragOver = false;
+};
+</script>
+
+<div
+  class="drop-zone"
+  class:drop-zone--active={dragEvent && !silent}
+  class:drop-zone--drag-over={dragOver && dragEvent && !silent}
+  class:drop-zone--drag-reject={dragOver && dragRejected && !silent}
+  class:drop-zone--disabled={disabled}
+  style:--_dz--offset="{highlightOffset}px"
+  ondrop={onDrop}
+  ondragover={onDragOver}
+  ondragleave={onDragLeave}
+  role="none">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<!--
+@component
+Reactive drop target paired with `DragSource` via the `DragAndDrop` singleton store. When a
+source starts dragging a `DragEventModel<T>` whose `type` is listed in `acceptedEvents` (or
+when `acceptedEvents` is empty — accept any), the zone activates a dashed-border outline; on
+hover (`dragover`) the outline becomes solid and the body fills with the accent tint. The
+consumer handles the actual drop via `on.drop`.
+
+Set `silent` when the host paints its own active / hover visuals; the zone keeps the event
+plumbing but skips the built-in chrome. Use `highlightOffset` to outset the dashed border
+(e.g. when the host has a rounded background that should remain visible inside the border).
+Pass `showRejection` to paint a red shield when the zone is hovered with a drag whose type
+isn't in `acceptedEvents` — useful for visible zones where silent inertia could be confusing.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--drop-zone--border-color` | Dashed outline color (active, idle) | `var(--sc-kit--color--accent)` |
+| `--sc-kit--drop-zone--border-color--hover` | Solid outline color on dragover | `var(--sc-kit--color--accent)` |
+| `--sc-kit--drop-zone--background--hover` | Translucent fill on dragover (overlays content) | 12% accent tint over transparent |
+| `--sc-kit--drop-zone--border-color--reject` | Solid outline color when hovered with a rejected type (requires `showRejection`) | `var(--sc-kit--color--danger)` |
+| `--sc-kit--drop-zone--background--reject` | Translucent fill when hovered with a rejected type | 12% danger tint over transparent |
+| `--sc-kit--drop-zone--border-radius` | Outline radius | `var(--sc-kit--radius--sm)` |
+-->
+
+<style>.drop-zone {
+  --_dz--offset: 0px;
+  --_dz--border-color: var(--sc-kit--drop-zone--border-color, var(--sc-kit--color--accent));
+  --_dz--border-color-hover: var(--sc-kit--drop-zone--border-color--hover, var(--sc-kit--color--accent));
+  --_dz--background-hover: var(--sc-kit--drop-zone--background--hover, color-mix(in srgb, var(--sc-kit--color--accent) 12%, transparent));
+  --_dz--border-color-reject: var(--sc-kit--drop-zone--border-color--reject, var(--sc-kit--color--danger));
+  --_dz--background-reject: var(--sc-kit--drop-zone--background--reject, color-mix(in srgb, var(--sc-kit--color--danger) 12%, transparent));
+  --_dz--border-radius: var(--sc-kit--drop-zone--border-radius, var(--sc-kit--radius--sm));
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.drop-zone--active::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--_dz--offset));
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 1px dashed var(--_dz--border-color);
+  border-radius: var(--_dz--border-radius);
+  z-index: 2;
+}
+.drop-zone--drag-over::before {
+  border-style: solid;
+  border-color: var(--_dz--border-color-hover);
+  background: var(--_dz--background-hover);
+}
+.drop-zone--drag-reject::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--_dz--offset));
+  pointer-events: none;
+  box-sizing: border-box;
+  border: 1px solid var(--_dz--border-color-reject);
+  background: var(--_dz--background-reject);
+  border-radius: var(--_dz--border-radius);
+  z-index: 2;
+}
+.drop-zone--disabled {
+  pointer-events: none;
+}</style>

package/dist/ui/drag-and-drop/cmp.drop-zone.svelte.d.ts

@@ -0,0 +1,72 @@
+import type { DragEventModel } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /**
+         * String tokens this zone accepts. Empty array = accept any drag. Compared against the
+         * `type` field of whatever `DragSource` set on the shared store.
+         */
+        acceptedEvents: string[];
+        disabled?: boolean;
+        /** Offset (px) for the dashed-border overlay. Positive values outset, negative inset. @default 0 */
+        highlightOffset?: number;
+        /** Suppress the built-in dashed-border + fill visual; the host paints its own. */
+        silent?: boolean;
+        /**
+         * When `true`, the zone paints a red shield on hover if there's a drag in progress whose
+         * type is NOT in `acceptedEvents`. Useful when the zone is visible and the user might
+         * think it accepts the dragged item — explicit refusal beats silent inertia. @default false
+         */
+        showRejection?: boolean;
+        children?: Snippet;
+        on?: {
+            drop: (e: DragEventModel<T>) => void;
+            enter?: (e: DragEventModel<T>) => void;
+            leave?: () => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Reactive drop target paired with `DragSource` via the `DragAndDrop` singleton store. When a
+ * source starts dragging a `DragEventModel<T>` whose `type` is listed in `acceptedEvents` (or
+ * when `acceptedEvents` is empty — accept any), the zone activates a dashed-border outline; on
+ * hover (`dragover`) the outline becomes solid and the body fills with the accent tint. The
+ * consumer handles the actual drop via `on.drop`.
+ *
+ * Set `silent` when the host paints its own active / hover visuals; the zone keeps the event
+ * plumbing but skips the built-in chrome. Use `highlightOffset` to outset the dashed border
+ * (e.g. when the host has a rounded background that should remain visible inside the border).
+ * Pass `showRejection` to paint a red shield when the zone is hovered with a drag whose type
+ * isn't in `acceptedEvents` — useful for visible zones where silent inertia could be confusing.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--drop-zone--border-color` | Dashed outline color (active, idle) | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--drop-zone--border-color--hover` | Solid outline color on dragover | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--drop-zone--background--hover` | Translucent fill on dragover (overlays content) | 12% accent tint over transparent |
+ * | `--sc-kit--drop-zone--border-color--reject` | Solid outline color when hovered with a rejected type (requires `showRejection`) | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--drop-zone--background--reject` | Translucent fill when hovered with a rejected type | 12% danger tint over transparent |
+ * | `--sc-kit--drop-zone--border-radius` | Outline radius | `var(--sc-kit--radius--sm)` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/drag-and-drop/drag-and-drop.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { DragEventModel } from './types';
+/**
+ * Module-level singleton holding the currently-dragged `DragEventModel`. `DragSource` writes
+ * to `event` on `ondragstart` (clears on `ondragend`); `DropZone` reads it reactively to know
+ * whether to highlight itself and what payload to hand to `on.drop`.
+ *
+ * Cross-zone communication is mediated by this single store — sources and zones don't reference
+ * each other directly. The store is typed at `unknown` here; zones cast to their concrete `T`
+ * via the generic on `DropZone`.
+ */
+declare class DragAndDropContainer<T> {
+    event: DragEventModel<T> | null;
+}
+export declare const DragAndDrop: DragAndDropContainer<unknown>;
+export {};

package/dist/ui/drag-and-drop/drag-and-drop.svelte.js

@@ -0,0 +1,13 @@
+/**
+ * Module-level singleton holding the currently-dragged `DragEventModel`. `DragSource` writes
+ * to `event` on `ondragstart` (clears on `ondragend`); `DropZone` reads it reactively to know
+ * whether to highlight itself and what payload to hand to `on.drop`.
+ *
+ * Cross-zone communication is mediated by this single store — sources and zones don't reference
+ * each other directly. The store is typed at `unknown` here; zones cast to their concrete `T`
+ * via the generic on `DropZone`.
+ */
+class DragAndDropContainer {
+    event = $state.raw(null);
+}
+export const DragAndDrop = new DragAndDropContainer();

package/dist/ui/drag-and-drop/index.d.ts

@@ -0,0 +1,4 @@
+export type { DragEventModel } from './types';
+export { DragAndDrop } from './drag-and-drop.svelte';
+export { default as DragSource } from './cmp.drag-source.svelte';
+export { default as DropZone } from './cmp.drop-zone.svelte';

package/dist/ui/drag-and-drop/index.js

@@ -0,0 +1,3 @@
+export { DragAndDrop } from './drag-and-drop.svelte';
+export { default as DragSource } from './cmp.drag-source.svelte';
+export { default as DropZone } from './cmp.drop-zone.svelte';

package/dist/ui/drag-and-drop/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Payload model exchanged through the `DragAndDrop` singleton store between `DragSource` and
+ * `DropZone`. `type` is a free-form string discriminator (zones filter on it via
+ * `acceptedEvents`); `data` is the typed payload the drop handler receives.
+ */
+export type DragEventModel<T> = {
+    type: string;
+    data: T;
+};

package/dist/ui/drawer/cmp.drawer-view.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">import { slideHorizontally, transitionDuration } from '../../core/transitions';
+import { Dialog } from '../dialog';
+import { DynamicComponent, DynamicComponentModel } from '../dynamic-component';
+let { controller, data } = $props();
+const UserView = $derived(data.view);
+</script>
+
+<div class="drawer-view" transition:slideHorizontally={{ duration: transitionDuration.slow }}>
+  {#if UserView}
+    <UserView controller={controller} data={data.viewData} />
+  {:else if data.content}
+    <Dialog
+      controller={controller}
+      hideCloseButton={!data.dismissible}
+      title={data.title ? titleContent : undefined}
+      body={bodyContent}
+      footer={data.footer ? footerContent : undefined} />
+  {/if}
+</div>
+
+{#snippet titleContent()}{data.title}{/snippet}
+
+{#snippet renderContent(content: DrawerContent)}
+  {#if content instanceof DynamicComponentModel}
+    <DynamicComponent model={content} />
+  {:else}
+    {@render content()}
+  {/if}
+{/snippet}
+
+{#snippet bodyContent()}{#if data.content}{@render renderContent(data.content)}{/if}{/snippet}
+
+{#snippet footerContent()}{#if data.footer}{@render renderContent(data.footer)}{/if}{/snippet}
+
+<style>.drawer-view {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/ui/drawer/cmp.drawer-view.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type DialogController } from '../dialog';
+import type { DrawerData } from './drawer';
+type $$ComponentProps = {
+    controller: DialogController;
+    data: DrawerData;
+};
+declare const Cmp: import("svelte").Component<$$ComponentProps, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/drawer/cmp.drawer.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { closeDrawer, openDrawer } from './drawer';
+import { untrack } from 'svelte';
+let { open, side = 'right', width = 360, title, dismissible = true, children, footer, on } = $props();
+$effect(() => {
+    const isOpen = open;
+    untrack(() => {
+        if (!isOpen) {
+            closeDrawer();
+            return;
+        }
+        void (async () => {
+            const result = await openDrawer({ side, width, title, dismissible, content: bodyContent, footer: footer ? footerContent : undefined });
+            on?.close?.(result);
+        })();
+    });
+});
+$effect(() => () => untrack(() => closeDrawer()));
+</script>
+
+{#snippet bodyContent()}{@render children?.()}{/snippet}
+{#snippet footerContent()}{@render footer?.()}{/snippet}
+
+<!--
+@component
+Drawer — declarative side sheet. A thin wrapper over the imperative `openDrawer` that bridges a
+controlled `open` prop to the kit Dialog engine: when `open` is `true` it opens the drawer (rendering
+the default slot as the body and the `footer` snippet as the footer), and closes it otherwise. Singleton —
+only one drawer shows at a time. Wire `on.close` to set `open` back to `false` when the user dismisses it.
+-->