@streamscloud/kit 0.2.42 → 0.9.1

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

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

@@ -3,7 +3,29 @@ type Props = {
     /** Component reference and its props to render */
     model: DynamicComponentModel;
 };
-/** 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.
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte

@@ -75,65 +75,76 @@ const clearSearch = () => {
 
 <!--
 @component
-Inline emoji panel with search and categorized emoji grid. Used by EmojiPicker (dropdown wrapper)
-and can be embedded directly by input components.
+Inline emoji panel with search and categorized emoji grid. Used by `EmojiPicker` (popover wrapper) and
+can be embedded directly by input components.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--emoji-panel--background` | Panel background | light-dark white/gray-800 |
-| `--sc-kit--emoji-panel--border-color` | Border color | light-dark neutral-300/neutral-600 |
-| `--sc-kit--emoji-panel--label-color` | Category title and info text color | light-dark neutral-500/neutral-400 |
-| `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | light-dark neutral-400/neutral-500 |
+| `--sc-kit--emoji-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--emoji-panel--border-color` | Border color | `--sc-kit--color--border` |
+| `--sc-kit--emoji-panel--label-color` | Category title and info text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | `--sc-kit--color--text--placeholder` |
 | `--sc-kit--emoji-panel--width` | Panel width | `100%` |
+| `--sc-kit--emoji-panel--max-height` | Scrollable grid max height | `15em` |
 -->
 
 <style>.emoji-panel {
-  --_emoji-panel--background: var(--sc-kit--emoji-panel--background, light-dark(#ffffff, #2e2e2e));
-  --_emoji-panel--border-color: var(--sc-kit--emoji-panel--border-color, light-dark(#d1d5db, #4b5563));
-  --_emoji-panel--label-color: var(--sc-kit--emoji-panel--label-color, light-dark(#6b7280, #9ca3af));
-  --_emoji-panel--placeholder-color: var(--sc-kit--emoji-panel--placeholder-color, light-dark(#9ca3af, #6b7280));
+  --_emoji-panel--background: var(--sc-kit--emoji-panel--background, var(--sc-kit--color--bg--panel));
+  --_emoji-panel--border-color: var(--sc-kit--emoji-panel--border-color, var(--sc-kit--color--border));
+  --_emoji-panel--label-color: var(--sc-kit--emoji-panel--label-color, var(--sc-kit--color--text--muted));
+  --_emoji-panel--placeholder-color: var(--sc-kit--emoji-panel--placeholder-color, var(--sc-kit--color--text--placeholder));
   --_emoji-panel--width: var(--sc-kit--emoji-panel--width, 100%);
+  --_emoji-panel--max-height: var(--sc-kit--emoji-panel--max-height, 15em);
   width: var(--_emoji-panel--width);
   background-color: var(--_emoji-panel--background);
   border: 1px solid var(--_emoji-panel--border-color);
-  border-radius: 0.25rem;
+  border-radius: var(--sc-kit--radius--sm);
   z-index: 999;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
 .emoji-panel__search {
-  padding: 0.375rem;
+  padding: var(--sc-kit--space--2);
   position: relative;
   display: flex;
   align-items: center;
 }
 .emoji-panel__search-input {
   width: 100%;
-  height: 1.75rem;
-  font-size: 0.75rem;
-  padding: 0 0.625rem;
+  height: var(--sc-kit--field--height--sm);
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--leading--tight);
+  padding: 0 var(--sc-kit--field--padding-inline--md);
   border: 1px solid var(--_emoji-panel--border-color);
-  border-radius: 1em;
+  border-radius: var(--sc-kit--radius--pill);
   background: transparent;
+  color: inherit;
   outline: none;
 }
 .emoji-panel__search-input::placeholder {
   color: var(--_emoji-panel--placeholder-color);
 }
+.emoji-panel__search-input:focus-visible {
+  border-color: var(--sc-kit--color--accent);
+}
 .emoji-panel__search-clear {
   position: absolute;
-  right: 0.625rem;
+  right: var(--sc-kit--space--3);
   display: flex;
   align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
   cursor: pointer;
   --sc-kit--icon--size: 0.875rem;
   --sc-kit--icon--color: var(--_emoji-panel--placeholder-color);
 }
 .emoji-panel__categories {
-  max-height: 15em;
-  padding: 0 0.5rem;
+  max-height: var(--_emoji-panel--max-height);
+  padding: 0 var(--sc-kit--space--2);
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
@@ -157,14 +168,19 @@ and can be embedded directly by input components.
   }
 }
 .emoji-panel__category-title {
-  font-size: 0.625rem;
-  font-weight: 400;
+  font-size: var(--sc-kit--font-size--xs);
+  font-weight: var(--sc-kit--font-weight--regular);
+  line-height: var(--sc-kit--leading--tight);
   color: var(--_emoji-panel--label-color);
   position: sticky;
   top: 0;
   background-color: var(--_emoji-panel--background);
-  padding: 0.5rem 0;
+  padding: var(--sc-kit--space--2) 0;
   z-index: 1;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .emoji-panel__grid {
   display: grid;
@@ -173,14 +189,19 @@ and can be embedded directly by input components.
 }
 .emoji-panel__not-found {
   grid-column: 1/-1;
-  line-height: 1.7em;
-  font-size: 0.5rem;
+  line-height: var(--sc-kit--leading--normal);
+  font-size: var(--sc-kit--font-size--xs);
   text-align: center;
   font-style: italic;
   color: var(--_emoji-panel--label-color);
 }
 .emoji-panel__emoji {
   font-size: 1.25em;
+  line-height: var(--sc-kit--leading--tight);
   cursor: pointer;
   text-align: center;
+  border-radius: var(--sc-kit--radius--sm);
+}
+.emoji-panel__emoji:hover {
+  background: var(--sc-kit--color--bg--hover);
 }</style>

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte.d.ts

@@ -4,17 +4,18 @@ type Props = {
     };
 };
 /**
- * Inline emoji panel with search and categorized emoji grid. Used by EmojiPicker (dropdown wrapper)
- * and can be embedded directly by input components.
+ * Inline emoji panel with search and categorized emoji grid. Used by `EmojiPicker` (popover wrapper) and
+ * can be embedded directly by input components.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--emoji-panel--background` | Panel background | light-dark white/gray-800 |
- * | `--sc-kit--emoji-panel--border-color` | Border color | light-dark neutral-300/neutral-600 |
- * | `--sc-kit--emoji-panel--label-color` | Category title and info text color | light-dark neutral-500/neutral-400 |
- * | `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | light-dark neutral-400/neutral-500 |
+ * | `--sc-kit--emoji-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--emoji-panel--border-color` | Border color | `--sc-kit--color--border` |
+ * | `--sc-kit--emoji-panel--label-color` | Category title and info text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | `--sc-kit--color--text--placeholder` |
  * | `--sc-kit--emoji-panel--width` | Panel width | `100%` |
+ * | `--sc-kit--emoji-panel--max-height` | Scrollable grid max height | `15em` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte

@@ -1,35 +1,50 @@
-<script lang="ts">import { Dropdown } from '../dropdown';
-import { Icon } from '../icon';
+<script lang="ts">import { Icon } from '../icon';
+import { Popover } from '../popover';
 import { default as EmojiPanel } from './cmp.emoji-panel.svelte';
 import IconEmoji from '@fluentui/svg-icons/icons/emoji_20_regular.svg?raw';
-let { dropdownPosition = 'bottom-end', on, children } = $props();
+let { popoverPosition = 'bottom-end', revealOnHover = false, on, children } = $props();
 </script>
 
-<Dropdown position={dropdownPosition} keepDropdownOpen={true} panel={false}>
-  {#snippet trigger()}
-    <div class="emoji-picker__trigger">
-      {#if children}
-        {@render children()}
-      {:else}
-        <Icon src={IconEmoji} />
-      {/if}
-    </div>
-  {/snippet}
-  <EmojiPanel on={{ select: on.select }} />
-</Dropdown>
+<div class="emoji-picker" class:emoji-picker--reveal={revealOnHover}>
+  <Popover position={popoverPosition} keepOpen panel={false}>
+    {#snippet trigger()}
+      <span class="emoji-picker__trigger">
+        {#if children}
+          {@render children()}
+        {:else}
+          <Icon src={IconEmoji} />
+        {/if}
+      </span>
+    {/snippet}
+    <EmojiPanel on={{ select: on.select }} />
+  </Popover>
+</div>
 
 <!--
 @component
-Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning.
+Emoji picker popover. Renders a trigger that opens an `EmojiPanel`. Pass `revealOnHover` to make the
+trigger fade in only when an ancestor is hovered (used inside comment bars, message composers, etc.
+where the affordance is otherwise visual clutter).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--emoji-picker--reveal-duration` | Fade-in duration in `revealOnHover` mode | `--sc-kit--duration--fast` |
 -->
 
-<style>.emoji-picker__trigger {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+<style>.emoji-picker {
+  --_emoji-picker--reveal-duration: var(--sc-kit--emoji-picker--reveal-duration, var(--sc-kit--duration--fast));
+  display: contents;
+}
+.emoji-picker--reveal .emoji-picker__trigger {
   opacity: 0;
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity var(--_emoji-picker--reveal-duration) var(--sc-kit--ease--default);
 }
-:global(:hover) > .emoji-picker__trigger {
+:global(:hover) > .emoji-picker--reveal .emoji-picker__trigger {
   opacity: 1;
+}
+.emoji-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
 }</style>

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte.d.ts

@@ -1,15 +1,26 @@
-import { type DropdownPosition } from '../dropdown';
+import type { Placement } from '@floating-ui/dom';
 import type { Snippet } from 'svelte';
 type Props = {
-    /** Popper.js dropdown placement @default 'bottom-end' */
-    dropdownPosition?: DropdownPosition;
+    /** Floating UI popover placement @default 'bottom-end' */
+    popoverPosition?: Placement;
+    /** Reveal-on-hover mode — trigger fades in only when an ancestor element is hovered. @default false */
+    revealOnHover?: boolean;
     on: {
         select: (value: string) => void;
     };
-    /** Custom trigger content (defaults to emoji icon) */
+    /** Custom trigger content (defaults to emoji icon). */
     children?: Snippet;
 };
-/** Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning. */
+/**
+ * Emoji picker popover. Renders a trigger that opens an `EmojiPanel`. Pass `revealOnHover` to make the
+ * trigger fade in only when an ancestor is hovered (used inside comment bars, message composers, etc.
+ * where the affordance is otherwise visual clutter).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--emoji-picker--reveal-duration` | Fade-in duration in `revealOnHover` mode | `--sc-kit--duration--fast` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/empty-state/cmp.empty-state.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">import { HtmlHelper } from '../../core/utils';
+import DefaultGraphic from './zero-content.svg?raw';
+const GRAPHIC_PRESETS = {
+    'zero-content': DefaultGraphic
+};
+let { graphic, title, description, action, layout = 'default' } = $props();
+const graphicPreset = $derived(typeof graphic === 'string' ? graphic : null);
+const graphicSnippet = $derived(typeof graphic === 'function' ? graphic : null);
+const sanitizedTitle = $derived(title ? HtmlHelper.sanitizeHtml(title) : '');
+const sanitizedDescription = $derived(description ? HtmlHelper.sanitizeHtml(description) : '');
+</script>
+
+<div class="empty-state empty-state--{layout}">
+  {#if graphicSnippet}
+    <div class="empty-state__graphic">{@render graphicSnippet()}</div>
+  {:else if graphicPreset}
+    <div class="empty-state__graphic empty-state__graphic--preset empty-state__graphic--preset-{graphicPreset}">
+      {@html GRAPHIC_PRESETS[graphicPreset]}
+    </div>
+  {/if}
+  {#if title}
+    <h3 class="empty-state__title">{@html sanitizedTitle}</h3>
+  {/if}
+  {#if description}
+    <p class="empty-state__description">{@html sanitizedDescription}</p>
+  {/if}
+  {#if action}
+    <div class="empty-state__action">{@render action()}</div>
+  {/if}
+</div>
+
+<!--
+@component
+EmptyState — centered placeholder for empty lists, tables, search results, first-run surfaces and any "nothing here" scenario. Renders an optional graphic (Snippet — consumer-sized, OR the built-in `'zero-content'` preset illustration), an optional HTML-capable title and description (both sanitized), and an optional action snippet. The `layout` prop picks one of three spacing scales — compact / default / spacious — covering inline-empties through hero-empties without separate components.
+
+Width is `100%` of the container — wrap or constrain in the consumer's layout if a narrower target is wanted.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--empty-state--padding-block` | Vertical padding | per layout |
+| `--sc-kit--empty-state--padding-inline` | Horizontal padding | per layout |
+| `--sc-kit--empty-state--gap--graphic` | Gap below the graphic | per layout |
+| `--sc-kit--empty-state--gap--title` | Gap between title and description | per layout |
+| `--sc-kit--empty-state--gap--action` | Gap above the action | per layout |
+| `--sc-kit--empty-state--title--font-size` | Title font size | `--sc-kit--font-size--lg` |
+| `--sc-kit--empty-state--title--color` | Title color | `--sc-kit--color--text--primary` |
+| `--sc-kit--empty-state--title--font-weight` | Title weight | `--sc-kit--font-weight--semibold` |
+| `--sc-kit--empty-state--description--font-size` | Description font size | `--sc-kit--font-size--md` |
+| `--sc-kit--empty-state--description--color` | Description color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--empty-state--description--line-height` | Description line-height | `--sc-kit--leading--relaxed` |
+| `--sc-kit--empty-state--graphic--width` | Preset graphic width | `13.3125rem` (213px) |
+| `--sc-kit--empty-state--graphic--height` | Preset graphic height | `12.3125rem` (197px) |
+-->
+
+<style>.empty-state {
+  --_es--padding-block: var(--sc-kit--empty-state--padding-block);
+  --_es--padding-inline: var(--sc-kit--empty-state--padding-inline);
+  --_es--gap-graphic: var(--sc-kit--empty-state--gap--graphic);
+  --_es--gap-title: var(--sc-kit--empty-state--gap--title);
+  --_es--gap-action: var(--sc-kit--empty-state--gap--action);
+  --_es--title-font-size: var(--sc-kit--empty-state--title--font-size, var(--sc-kit--font-size--lg));
+  --_es--title-color: var(--sc-kit--empty-state--title--color, var(--sc-kit--color--text--primary));
+  --_es--title-font-weight: var(--sc-kit--empty-state--title--font-weight, var(--sc-kit--font-weight--semibold));
+  --_es--description-font-size: var(--sc-kit--empty-state--description--font-size, var(--sc-kit--font-size--md));
+  --_es--description-color: var(--sc-kit--empty-state--description--color, var(--sc-kit--color--text--secondary));
+  --_es--description-line-height: var(--sc-kit--empty-state--description--line-height, var(--sc-kit--leading--relaxed));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  padding: var(--_es--padding-block) var(--_es--padding-inline);
+}
+.empty-state--compact {
+  --sc-kit--empty-state--padding-block: var(--sc-kit--space--6);
+  --sc-kit--empty-state--padding-inline: var(--sc-kit--space--4);
+  --sc-kit--empty-state--gap--graphic: var(--sc-kit--space--3);
+  --sc-kit--empty-state--gap--title: var(--sc-kit--space--1);
+  --sc-kit--empty-state--gap--action: var(--sc-kit--space--2);
+}
+.empty-state--default {
+  --sc-kit--empty-state--padding-block: var(--sc-kit--space--12);
+  --sc-kit--empty-state--padding-inline: var(--sc-kit--space--6);
+  --sc-kit--empty-state--gap--graphic: var(--sc-kit--space--4);
+  --sc-kit--empty-state--gap--title: var(--sc-kit--space--2);
+  --sc-kit--empty-state--gap--action: var(--sc-kit--space--3);
+}
+.empty-state--spacious {
+  --sc-kit--empty-state--padding-block: var(--sc-kit--space--16);
+  --sc-kit--empty-state--padding-inline: var(--sc-kit--space--6);
+  --sc-kit--empty-state--gap--graphic: var(--sc-kit--space--6);
+  --sc-kit--empty-state--gap--title: var(--sc-kit--space--2);
+  --sc-kit--empty-state--gap--action: var(--sc-kit--space--4);
+}
+.empty-state__graphic {
+  margin-bottom: var(--_es--gap-graphic);
+  line-height: 0;
+}
+.empty-state__graphic--preset {
+  width: var(--sc-kit--empty-state--graphic--width, 13.3125rem);
+  height: var(--sc-kit--empty-state--graphic--height, 12.3125rem);
+}
+.empty-state__graphic--preset :global(svg) {
+  width: 100%;
+  height: 100%;
+}
+.empty-state__title {
+  margin: 0;
+  font-size: var(--_es--title-font-size);
+  font-weight: var(--_es--title-font-weight);
+  color: var(--_es--title-color);
+}
+.empty-state__title + .empty-state__description {
+  margin-top: var(--_es--gap-title);
+}
+.empty-state__description {
+  margin: 0;
+  font-size: var(--_es--description-font-size);
+  color: var(--_es--description-color);
+  line-height: var(--_es--description-line-height);
+}
+.empty-state__action {
+  margin-top: var(--_es--gap-action);
+}</style>

package/dist/ui/empty-state/cmp.empty-state.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+type GraphicPreset = 'zero-content';
+type Props = {
+    /** Illustration / icon. Snippet for custom content (consumer-sized), OR a preset name to use a built-in illustration. Omit for no graphic. Current presets: `'zero-content'`. */
+    graphic?: Snippet | GraphicPreset;
+    /** Heading. May contain HTML — sanitized via `HtmlHelper.sanitizeHtml` before render. */
+    title?: string;
+    /** Body text. May contain HTML — sanitized before render. */
+    description?: string;
+    /** Action snippet below the description (typically Button / button group). */
+    action?: Snippet;
+    /** Spacing scale: `compact` for inline lists / dropdowns, `default` for modals / list views, `spacious` for hero / first-run. @default 'default' */
+    layout?: 'compact' | 'default' | 'spacious';
+};
+/**
+ * EmptyState — centered placeholder for empty lists, tables, search results, first-run surfaces and any "nothing here" scenario. Renders an optional graphic (Snippet — consumer-sized, OR the built-in `'zero-content'` preset illustration), an optional HTML-capable title and description (both sanitized), and an optional action snippet. The `layout` prop picks one of three spacing scales — compact / default / spacious — covering inline-empties through hero-empties without separate components.
+ *
+ * Width is `100%` of the container — wrap or constrain in the consumer's layout if a narrower target is wanted.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--empty-state--padding-block` | Vertical padding | per layout |
+ * | `--sc-kit--empty-state--padding-inline` | Horizontal padding | per layout |
+ * | `--sc-kit--empty-state--gap--graphic` | Gap below the graphic | per layout |
+ * | `--sc-kit--empty-state--gap--title` | Gap between title and description | per layout |
+ * | `--sc-kit--empty-state--gap--action` | Gap above the action | per layout |
+ * | `--sc-kit--empty-state--title--font-size` | Title font size | `--sc-kit--font-size--lg` |
+ * | `--sc-kit--empty-state--title--color` | Title color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--empty-state--title--font-weight` | Title weight | `--sc-kit--font-weight--semibold` |
+ * | `--sc-kit--empty-state--description--font-size` | Description font size | `--sc-kit--font-size--md` |
+ * | `--sc-kit--empty-state--description--color` | Description color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--empty-state--description--line-height` | Description line-height | `--sc-kit--leading--relaxed` |
+ * | `--sc-kit--empty-state--graphic--width` | Preset graphic width | `13.3125rem` (213px) |
+ * | `--sc-kit--empty-state--graphic--height` | Preset graphic height | `12.3125rem` (197px) |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/empty-state/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyState } from './cmp.empty-state.svelte';

package/dist/ui/empty-state/index.js

@@ -0,0 +1 @@
+export { default as EmptyState } from './cmp.empty-state.svelte';