@streamscloud/kit 0.2.42-1778522742378 → 0.9.0

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.
+-->

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

@@ -0,0 +1,29 @@
+import type { DialogResult } from '../dialog';
+import { type Snippet } from 'svelte';
+type Props = {
+    open: boolean;
+    /** Edge the drawer slides in from. @default 'right' */
+    side?: 'left' | 'right';
+    /** Width in px. @default 360 */
+    width?: number;
+    title?: string;
+    /** Close on ESC, backdrop click, and show the close button. @default true */
+    dismissible?: boolean;
+    /** Body content. */
+    children?: Snippet;
+    /** Footer content. */
+    footer?: Snippet;
+    on?: {
+        /** Fires on close with the result — branch on `result.wasCanceled` to distinguish apply vs dismiss. */
+        close?: (result: DialogResult<void>) => void;
+    };
+};
+/**
+ * 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.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/drawer/drawer.d.ts

@@ -0,0 +1,41 @@
+import { type DialogController, type DialogResult } from '../dialog';
+import type { DynamicComponentModel } from '../dynamic-component';
+import type { Component, Snippet } from 'svelte';
+export type DrawerContent = Snippet | DynamicComponentModel;
+export type DrawerViewComponent<TData = unknown> = Component<{
+    controller: DialogController<void, void>;
+    data: TData;
+}>;
+type DrawerCommonOptions = {
+    /** Edge the drawer slides in from. @default 'right' */
+    side?: 'left' | 'right';
+    /** Width in px. @default 360 */
+    width?: number;
+    /** Close on ESC, backdrop click, and show the close button. @default true */
+    dismissible?: boolean;
+};
+export type DrawerSnippetOptions = DrawerCommonOptions & {
+    title?: string;
+    /** Body content — a snippet or a DynamicComponentModel. */
+    content: DrawerContent;
+    /** Footer content — a snippet or a DynamicComponentModel. */
+    footer?: DrawerContent;
+};
+export type DrawerViewOptions<TData = void> = DrawerCommonOptions & {
+    /** Custom view component receiving `{ controller, data }`. Owns the entire drawer chrome (typically wraps a kit Dialog). */
+    view: DrawerViewComponent<TData>;
+    data: TData;
+};
+export type DrawerOptions<TData = void> = DrawerSnippetOptions | DrawerViewOptions<TData>;
+export type DrawerData = {
+    dismissible: boolean;
+    view?: DrawerViewComponent;
+    viewData?: unknown;
+    title?: string;
+    content?: DrawerContent;
+    footer?: DrawerContent;
+};
+export declare const DRAWER_DIALOG_ID = "sc-kit-drawer";
+export declare const openDrawer: <TData = void>(options: DrawerOptions<TData>) => Promise<DialogResult<void>>;
+export declare const closeDrawer: (apply?: boolean) => void;
+export {};

package/dist/ui/drawer/drawer.js

@@ -0,0 +1,28 @@
+import { Dialogs } from '../dialog';
+import DrawerView from './cmp.drawer-view.svelte';
+export const DRAWER_DIALOG_ID = 'sc-kit-drawer';
+export const openDrawer = (options) => {
+    const { side = 'right', width = 360, dismissible = true } = options;
+    Dialogs.close(DRAWER_DIALOG_ID);
+    const data = 'view' in options
+        ? { dismissible, view: options.view, viewData: options.data }
+        : { dismissible, title: options.title, content: options.content, footer: options.footer };
+    return Dialogs.open({
+        view: DrawerView,
+        data,
+        explicitSettings: { closeOnEsc: dismissible, closeOnClickOutside: dismissible },
+        containerSettings: { position: side === 'left' ? 'side-left' : 'side-right', size: `${width}px` }
+    }, DRAWER_DIALOG_ID);
+};
+export const closeDrawer = (apply = false) => {
+    const dialog = Dialogs.dialogs('').find((d) => d.id === DRAWER_DIALOG_ID);
+    if (!dialog) {
+        return;
+    }
+    if (apply) {
+        dialog.controller.ok(undefined);
+    }
+    else {
+        dialog.controller.cancel();
+    }
+};

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

@@ -0,0 +1,3 @@
+export { default as Drawer } from './cmp.drawer.svelte';
+export { openDrawer, closeDrawer, DRAWER_DIALOG_ID } from './drawer';
+export type { DrawerContent, DrawerData, DrawerOptions } from './drawer';

package/dist/ui/drawer/index.js

@@ -0,0 +1,2 @@
+export { default as Drawer } from './cmp.drawer.svelte';
+export { openDrawer, closeDrawer, DRAWER_DIALOG_ID } from './drawer';

package/dist/ui/dynamic-component/cmp.dynamic-component.svelte

@@ -6,5 +6,25 @@ export {};
 
 <!--
 @component
-Renders a dynamic Svelte component from a model object, spreading its props automatically.
+Renders a Svelte component from a `DynamicComponentModel`, spreading the model's props automatically.
+
+Use when the component to render is decided at runtime (e.g. dispatched by id, fed into a host that
+renders many heterogeneous nodes). `DynamicComponentModel` keeps `props` reactive — calling
+`model.updateProps(...)` updates the rendered component without re-mounting.
+
+```svelte
+<script lang="ts">
+  import { DynamicComponent, DynamicComponentModel } from '@streamscloud/kit/dynamic-component';
+  import { Button } from '@streamscloud/kit/button';
+
+  const model = new DynamicComponentModel({
+    component: Button,
+    props: { type: 'button', children: () => 'Click' }
+  });
+</script>
+
+<DynamicComponent {model} />
+```
+
+This component has no styles or visual surface of its own.
 -->