@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -0,0 +1,74 @@
+<script lang="ts">import { EmojiPanel } from '../../emoji-picker';
+import { Icon } from '../../icon';
+import { Popover } from '../../popover';
+import IconEmoji from '@fluentui/svg-icons/icons/emoji_20_regular.svg?raw';
+const { size = 'md', on } = $props();
+let popover = $state.raw(undefined);
+</script>
+
+<span class="input-emoji-picker input-emoji-picker--{size}">
+  <Popover bind:this={popover} position="bottom-end" panel={false} keepOpen fillContainer fixedPosition>
+    {#snippet trigger()}
+      <Icon src={IconEmoji} />
+    {/snippet}
+    <EmojiPanel on={{ select: on.select }} />
+  </Popover>
+</span>
+
+<!--
+@component
+Internal shared affordance — inline emoji-picker trigger for input-like hosts (Input,
+Textarea, RichTextInput). NOT a public package entry; lives under `_internal/` to signal
+kit-only use. Sits inline in the host's flex layout; revealed on host `:hover` /
+`:focus-within` via the shared affordance reveal state (see `_affordance.scss`).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input-emoji-picker--size` | Container size (square) | per size |
+| `--sc-kit--input-emoji-picker--icon-size` | Emoji icon size | per size |
+| `--sc-kit--input-emoji-picker--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--input-emoji-picker--color--hover` | Icon color on hover | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--input-emoji-picker--background--hover` | Background on hover | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--input-emoji-picker--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+-->
+
+<style>.input-emoji-picker {
+  --_iep--size: var(--sc-kit--input-emoji-picker--size, 1.125rem);
+  --_iep--icon-size: var(--sc-kit--input-emoji-picker--icon-size, 0.875rem);
+  --_iep--color: var(--sc-kit--input-emoji-picker--color, var(--sc-kit--color--text--muted));
+  --_iep--color-hover: var(--sc-kit--input-emoji-picker--color--hover, var(--sc-kit--color--text--primary));
+  --_iep--background-hover: var(--sc-kit--input-emoji-picker--background--hover, var(--sc-kit--color--bg--hover));
+  --_iep--border-radius: var(--sc-kit--input-emoji-picker--border-radius, var(--sc-kit--radius--sm));
+  --sc-kit--icon--color: var(--_iep--color);
+  --sc-kit--icon--size: var(--_iep--icon-size);
+  --sc-kit--popover--width: var(--_iep--size);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: var(--_iep--size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--_iep--border-radius);
+  opacity: var(--_--input-affordance--opacity, 1);
+  inline-size: calc(var(--_iep--size) * var(--_--input-affordance--scale, 1));
+  margin-inline-start: calc(var(--sc-kit--space--1) * var(--_--input-affordance--scale, 1));
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default), inline-size var(--sc-kit--duration--base) var(--sc-kit--ease--default), margin-inline-start var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.input-emoji-picker--sm {
+  --sc-kit--input-emoji-picker--size: 1rem;
+  --sc-kit--input-emoji-picker--icon-size: 0.75rem;
+}
+.input-emoji-picker--md {
+  --sc-kit--input-emoji-picker--size: 1.125rem;
+  --sc-kit--input-emoji-picker--icon-size: 0.875rem;
+}
+.input-emoji-picker--lg {
+  --sc-kit--input-emoji-picker--size: 1.25rem;
+  --sc-kit--input-emoji-picker--icon-size: 1rem;
+}
+.input-emoji-picker:hover {
+  --sc-kit--icon--color: var(--_iep--color-hover);
+  background: var(--_iep--background-hover);
+}</style>

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

@@ -0,0 +1,26 @@
+type Props = {
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    on: {
+        select: (value: string) => void;
+    };
+};
+/**
+ * Internal shared affordance — inline emoji-picker trigger for input-like hosts (Input,
+ * Textarea, RichTextInput). NOT a public package entry; lives under `_internal/` to signal
+ * kit-only use. Sits inline in the host's flex layout; revealed on host `:hover` /
+ * `:focus-within` via the shared affordance reveal state (see `_affordance.scss`).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input-emoji-picker--size` | Container size (square) | per size |
+ * | `--sc-kit--input-emoji-picker--icon-size` | Emoji icon size | per size |
+ * | `--sc-kit--input-emoji-picker--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--input-emoji-picker--color--hover` | Icon color on hover | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--input-emoji-picker--background--hover` | Background on hover | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--input-emoji-picker--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/{inputs → _internal}/input-emoji-picker/index.d.ts

@@ -1,2 +1 @@
 export { default as InputEmojiPicker } from './cmp.input-emoji-picker.svelte';
-export { inputEmojiPickerContainer } from './input-emoji-picker-container';

package/dist/ui/{inputs → _internal}/input-emoji-picker/index.js

@@ -1,2 +1 @@
 export { default as InputEmojiPicker } from './cmp.input-emoji-picker.svelte';
-export { inputEmojiPickerContainer } from './input-emoji-picker-container';

package/dist/ui/_internal/input-password-toggle/cmp.input-password-toggle.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">import { Icon } from '../../icon';
+import { InputPasswordToggleLocalization } from './input-password-toggle-localization';
+import IconEye from '@fluentui/svg-icons/icons/eye_20_regular.svg?raw';
+import IconEyeOff from '@fluentui/svg-icons/icons/eye_off_20_regular.svg?raw';
+const { size = 'md', revealed, on } = $props();
+const localization = new InputPasswordToggleLocalization();
+const label = $derived(revealed ? localization.hidePassword : localization.showPassword);
+const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    on.toggle();
+};
+const handleKeydown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.stopPropagation();
+        on.toggle();
+    }
+};
+</script>
+
+<span
+  class="input-password-toggle input-password-toggle--{size}"
+  role="button"
+  tabindex="-1"
+  aria-label={label}
+  aria-pressed={revealed}
+  onclick={handleClick}
+  onkeydown={handleKeydown}>
+  <Icon src={revealed ? IconEyeOff : IconEye} />
+</span>
+
+<!--
+@component
+Internal shared affordance — the eye toggle that reveals / hides a `<input type="password">`
+value. NOT a public package entry; lives under `_internal/` to signal kit-only use.
+Renders as `<span role="button">` so it can sit inside another `<button>` host without
+nested-button invalidity. `tabindex="-1"` — reachable by click, not in tab order.
+
+Behaves like `InputClearButton`: revealed on host `:hover` / `:focus-within` via the shared
+affordance reveal state (see `_affordance.scss`).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input-password-toggle--size` | Container size (square) | per size |
+| `--sc-kit--input-password-toggle--icon-size` | Eye icon size | per size |
+| `--sc-kit--input-password-toggle--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--input-password-toggle--color--hover` | Icon color on hover | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--input-password-toggle--background--hover` | Background on hover | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--input-password-toggle--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+-->
+
+<style>.input-password-toggle {
+  --_ipt--size: var(--sc-kit--input-password-toggle--size, 1.125rem);
+  --_ipt--icon-size: var(--sc-kit--input-password-toggle--icon-size, 0.875rem);
+  --_ipt--color: var(--sc-kit--input-password-toggle--color, var(--sc-kit--color--text--muted));
+  --_ipt--color-hover: var(--sc-kit--input-password-toggle--color--hover, var(--sc-kit--color--text--primary));
+  --_ipt--background-hover: var(--sc-kit--input-password-toggle--background--hover, var(--sc-kit--color--bg--hover));
+  --_ipt--border-radius: var(--sc-kit--input-password-toggle--border-radius, var(--sc-kit--radius--sm));
+  --sc-kit--icon--color: var(--_ipt--color);
+  --sc-kit--icon--size: var(--_ipt--icon-size);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: var(--_ipt--size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  line-height: 0;
+  border-radius: var(--_ipt--border-radius);
+  cursor: pointer;
+  opacity: var(--_--input-affordance--opacity, 1);
+  inline-size: calc(var(--_ipt--size) * var(--_--input-affordance--scale, 1));
+  margin-inline-start: calc(var(--sc-kit--space--1) * var(--_--input-affordance--scale, 1));
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default), inline-size var(--sc-kit--duration--base) var(--sc-kit--ease--default), margin-inline-start var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.input-password-toggle--sm {
+  --sc-kit--input-password-toggle--size: 1rem;
+  --sc-kit--input-password-toggle--icon-size: 0.75rem;
+}
+.input-password-toggle--md {
+  --sc-kit--input-password-toggle--size: 1.125rem;
+  --sc-kit--input-password-toggle--icon-size: 0.875rem;
+}
+.input-password-toggle--lg {
+  --sc-kit--input-password-toggle--size: 1.25rem;
+  --sc-kit--input-password-toggle--icon-size: 1rem;
+}
+.input-password-toggle:hover {
+  --sc-kit--icon--color: var(--_ipt--color-hover);
+  background: var(--_ipt--background-hover);
+}</style>

package/dist/ui/_internal/input-password-toggle/cmp.input-password-toggle.svelte.d.ts

@@ -0,0 +1,31 @@
+type Props = {
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** True when the password is currently visible (icon flips to eye-off). */
+    revealed: boolean;
+    on: {
+        toggle: () => void;
+    };
+};
+/**
+ * Internal shared affordance — the eye toggle that reveals / hides a `<input type="password">`
+ * value. NOT a public package entry; lives under `_internal/` to signal kit-only use.
+ * Renders as `<span role="button">` so it can sit inside another `<button>` host without
+ * nested-button invalidity. `tabindex="-1"` — reachable by click, not in tab order.
+ *
+ * Behaves like `InputClearButton`: revealed on host `:hover` / `:focus-within` via the shared
+ * affordance reveal state (see `_affordance.scss`).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input-password-toggle--size` | Container size (square) | per size |
+ * | `--sc-kit--input-password-toggle--icon-size` | Eye icon size | per size |
+ * | `--sc-kit--input-password-toggle--color` | Icon color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--input-password-toggle--color--hover` | Icon color on hover | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--input-password-toggle--background--hover` | Background on hover | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--input-password-toggle--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/_internal/input-password-toggle/index.d.ts

@@ -0,0 +1 @@
+export { default as InputPasswordToggle } from './cmp.input-password-toggle.svelte';

package/dist/ui/_internal/input-password-toggle/index.js

@@ -0,0 +1 @@
+export { default as InputPasswordToggle } from './cmp.input-password-toggle.svelte';

package/dist/ui/_internal/input-password-toggle/input-password-toggle-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class InputPasswordToggleLocalization {
+    get showPassword(): string;
+    get hidePassword(): string;
+}

package/dist/ui/_internal/input-password-toggle/input-password-toggle-localization.js

@@ -0,0 +1,13 @@
+import { AppLocale } from '../../../core/locale';
+export class InputPasswordToggleLocalization {
+    get showPassword() {
+        return loc.showPassword[AppLocale.current];
+    }
+    get hidePassword() {
+        return loc.hidePassword[AppLocale.current];
+    }
+}
+const loc = {
+    showPassword: { en: 'Show password', no: 'Vis passord' },
+    hidePassword: { en: 'Hide password', no: 'Skjul passord' }
+};

package/dist/ui/_internal/spinner/cmp.spinner.svelte

@@ -0,0 +1,41 @@
+<span class="spinner" aria-hidden="true">
+  <svg class="spinner__svg" viewBox="0 0 24 24" fill="none">
+    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-opacity="0.25"></circle>
+    <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path>
+  </svg>
+</span>
+
+<!--
+@component
+Internal spinner glyph. Fills its inline-box (defaults to 1em × 1em); inherits
+`currentColor` for stroke. Used by Button (loading state), Singleselect (async),
+and any future async-loading affordance.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--spinner--size` | Outer box size | `1em` |
+| `--sc-kit--spinner--duration` | Rotation duration | `800ms` |
+-->
+
+<style>.spinner {
+  --_spinner--size: var(--sc-kit--spinner--size, 1em);
+  --_spinner--duration: var(--sc-kit--spinner--duration, 800ms);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_spinner--size);
+  height: var(--_spinner--size);
+  flex-shrink: 0;
+}
+.spinner__svg {
+  width: 100%;
+  height: 100%;
+  animation: kit-spinner-spin var(--_spinner--duration) linear infinite;
+}
+
+@keyframes kit-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}</style>

package/dist/ui/_internal/spinner/cmp.spinner.svelte.d.ts

@@ -0,0 +1,37 @@
+export default Cmp;
+type Cmp = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+/**
+ * Internal spinner glyph. Fills its inline-box (defaults to 1em × 1em); inherits
+ * `currentColor` for stroke. Used by Button (loading state), Singleselect (async),
+ * and any future async-loading affordance.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--spinner--size` | Outer box size | `1em` |
+ * | `--sc-kit--spinner--duration` | Rotation duration | `800ms` |
+ */
+declare const Cmp: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/_internal/spinner/index.d.ts

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

package/dist/ui/_internal/spinner/index.js

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

package/dist/ui/ai-panel/ai-panel-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class AiPanelLocalization {
+    get attach(): string;
+}

package/dist/ui/ai-panel/ai-panel-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    attach: {
+        en: 'Attach',
+        no: 'Legg ved'
+    }
+};
+export class AiPanelLocalization {
+    get attach() {
+        return loc.attach[AppLocale.current];
+    }
+}

package/dist/ui/ai-panel/cmp.ai-panel.svelte

@@ -0,0 +1,90 @@
+<script lang="ts" generics="T">import { Button } from '../button';
+import { SegmentedControl } from '../segmented-control';
+import { Textarea } from '../textarea';
+import { AiPanelLocalization } from './ai-panel-localization';
+import IconAdd from '@fluentui/svg-icons/icons/add_20_regular.svg?raw';
+import IconSparkle from '@fluentui/svg-icons/icons/sparkle_20_regular.svg?raw';
+const { segments, activeSegment, body, prompt = '', placeholder = '', generateLabel = '', on } = $props();
+const localization = new AiPanelLocalization();
+</script>
+
+<div class="ai-panel">
+  <div class="ai-panel__tabs">
+    <SegmentedControl value={activeSegment} segments={segments} size="sm" fullWidth on={{ change: (value) => on?.tabChange?.(value) }} />
+  </div>
+
+  <div class="ai-panel__body">
+    {@render body()}
+  </div>
+
+  <div class="ai-panel__composer">
+    <Textarea value={prompt} placeholder={placeholder} borderless rows={3} on={{ input: (value) => on?.promptInput?.(value) }} />
+    <span class="ai-panel__attach">
+      <Button type="button" variant="ghost" size="sm" icon={IconAdd} aria-label={localization.attach} on={{ click: () => on?.attach?.() }} />
+    </span>
+  </div>
+
+  <Button type="button" variant="success" fullWidth icon={IconSparkle} on={{ click: () => on?.generate?.() }}>{generateLabel}</Button>
+</div>
+
+<!--
+@component
+AiPanel — right-edge AI assistant panel: a segment strip, a consumer-filled `body`, and a built-in
+composer (prompt textarea + attach button + Generate bar). Compose-only; collapse is the surrounding
+layout's concern. User-facing copy (placeholder, Generate label) is consumer-supplied.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--ai-panel--width` | Panel width | `300px` |
+| `--sc-kit--ai-panel--gap` | Gap between sections | `16px` |
+| `--sc-kit--ai-panel--padding` | Panel padding | `16px` |
+| `--sc-kit--ai-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--ai-panel--border-color` | Left divider color | `--sc-kit--color--border` |
+| `--sc-kit--ai-panel--surface` | Body / composer / tab-tray fill | `--sc-kit--color--bg--app` |
+| `--sc-kit--ai-panel--surface-radius` | Body / composer corner radius | `--sc-kit--radius--md` |
+-->
+
+<style>.ai-panel {
+  --_ai-panel--width: var(--sc-kit--ai-panel--width, 18.75rem);
+  --_ai-panel--gap: var(--sc-kit--ai-panel--gap, 1rem);
+  --_ai-panel--padding: var(--sc-kit--ai-panel--padding, 1rem);
+  --_ai-panel--background: var(--sc-kit--ai-panel--background, var(--sc-kit--color--bg--panel));
+  --_ai-panel--border-color: var(--sc-kit--ai-panel--border-color, var(--sc-kit--color--border));
+  --_ai-panel--surface: var(--sc-kit--ai-panel--surface, var(--sc-kit--color--bg--app));
+  --_ai-panel--surface-radius: var(--sc-kit--ai-panel--surface-radius, var(--sc-kit--radius--md));
+  display: flex;
+  flex-direction: column;
+  gap: var(--_ai-panel--gap);
+  width: var(--_ai-panel--width);
+  padding: var(--_ai-panel--padding);
+  background: var(--_ai-panel--background);
+  border-left: 1px solid var(--_ai-panel--border-color);
+  overflow: hidden;
+}
+.ai-panel__tabs {
+  --sc-kit--segmented-control--tray--background: var(--_ai-panel--surface);
+  margin-bottom: -0.5rem;
+}
+.ai-panel__body {
+  flex: 1;
+  min-height: 15rem;
+  background: var(--_ai-panel--surface);
+  border-radius: var(--_ai-panel--surface-radius);
+  overflow-y: auto;
+}
+.ai-panel__composer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 6rem;
+  padding: 0.75rem;
+  background: var(--_ai-panel--surface);
+  border-radius: var(--_ai-panel--surface-radius);
+}
+.ai-panel__attach {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+}</style>

package/dist/ui/ai-panel/cmp.ai-panel.svelte.d.ts

@@ -0,0 +1,58 @@
+import { type Segment } from '../segmented-control';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        segments: Segment<NoInfer<T>>[];
+        activeSegment: T;
+        /** Content for the active segment — the consumer renders per-segment UI here. */
+        body: Snippet;
+        /** Composer textarea value. */
+        prompt?: string;
+        placeholder?: string;
+        /** Generate button label — consumer-supplied (kit ships no user-facing copy). */
+        generateLabel?: string;
+        on?: {
+            tabChange?: (value: T) => void;
+            promptInput?: (value: string) => void;
+            attach?: () => void;
+            generate?: () => 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']>;
+}
+/**
+ * AiPanel — right-edge AI assistant panel: a segment strip, a consumer-filled `body`, and a built-in
+ * composer (prompt textarea + attach button + Generate bar). Compose-only; collapse is the surrounding
+ * layout's concern. User-facing copy (placeholder, Generate label) is consumer-supplied.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--ai-panel--width` | Panel width | `300px` |
+ * | `--sc-kit--ai-panel--gap` | Gap between sections | `16px` |
+ * | `--sc-kit--ai-panel--padding` | Panel padding | `16px` |
+ * | `--sc-kit--ai-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--ai-panel--border-color` | Left divider color | `--sc-kit--color--border` |
+ * | `--sc-kit--ai-panel--surface` | Body / composer / tab-tray fill | `--sc-kit--color--bg--app` |
+ * | `--sc-kit--ai-panel--surface-radius` | Body / composer corner radius | `--sc-kit--radius--md` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/ai-panel/index.d.ts

@@ -0,0 +1 @@
+export { default as AiPanel } from './cmp.ai-panel.svelte';

package/dist/ui/ai-panel/index.js

@@ -0,0 +1 @@
+export { default as AiPanel } from './cmp.ai-panel.svelte';

package/dist/ui/avatar/cmp.avatar.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">import { Image } from '../image';
+let { src = null, name = '', size = 'md', status = null } = $props();
+const initials = $derived(name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((p) => p[0])
+    .join('')
+    .toUpperCase());
+</script>
+
+{#snippet fallback()}
+  {#if name && initials}
+    <span class="avatar__initials">{initials}</span>
+  {:else}
+    <span class="avatar__fallback" aria-hidden="true">
+      <svg class="avatar__fallback-icon" viewBox="0 0 24 24">
+        <circle cx="12" cy="9" r="4" fill="currentColor" opacity="0.6"></circle>
+        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="currentColor" opacity="0.6"></path>
+      </svg>
+    </span>
+  {/if}
+{/snippet}
+
+<span class="avatar avatar--{size}" class:avatar--with-status={!!status} role="img" aria-label={name || 'Avatar'}>
+  <Image src={src} alt={name} showStubOnError stub={fallback} />
+  {#if status}
+    <span class="avatar__dot avatar__dot--{status}" aria-hidden="true"></span>
+  {/if}
+</span>
+
+<!--
+@component
+A circular avatar with three render modes (priority order): image → initials (derived from `name`)
+→ generic person icon. If `src` fails to load, automatically falls back to initials/icon. Optional
+status dot in the bottom-right corner. Built on top of the kit `Image` component, which handles
+the load / error / stub state machine.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--avatar--size` | Diameter (overrides size preset) | per `size` preset (20 / 24 / 32 / 40 / 56 px) |
+| `--sc-kit--avatar--background` | Fallback container background (initials / icon mode) | `--sc-kit--color--bg--active` |
+| `--sc-kit--avatar--color` | Fallback foreground (generic icon tint) | `--sc-kit--color--text--muted` |
+| `--sc-kit--avatar--initials--background` | Initials chip background | `--sc-kit--color--accent--soft` |
+| `--sc-kit--avatar--initials--color` | Initials chip text color | `--sc-kit--color--accent` |
+| `--sc-kit--avatar--dot--border-color` | Status-dot outline (separates dot from page bg) | `--sc-kit--color--bg--app` |
+| `--sc-kit--avatar--dot--color-online` | Online dot color | `--sc-kit--color--success` |
+| `--sc-kit--avatar--dot--color-busy` | Busy dot color | `--sc-kit--color--danger` |
+| `--sc-kit--avatar--dot--color-offline` | Offline dot color | `--sc-kit--color--text--muted` |
+-->
+
+<style>.avatar {
+  --_avatar--background: var(--sc-kit--avatar--background, var(--sc-kit--color--bg--active));
+  --_avatar--color: var(--sc-kit--avatar--color, var(--sc-kit--color--text--muted));
+  --_avatar--initials-background: var(--sc-kit--avatar--initials--background, var(--sc-kit--color--accent--soft));
+  --_avatar--initials-color: var(--sc-kit--avatar--initials--color, var(--sc-kit--color--accent));
+  --_avatar--dot-border-color: var(--sc-kit--avatar--dot--border-color, var(--sc-kit--color--bg--app));
+  --_avatar--dot-online: var(--sc-kit--avatar--dot--color-online, var(--sc-kit--color--success));
+  --_avatar--dot-busy: var(--sc-kit--avatar--dot--color-busy, var(--sc-kit--color--danger));
+  --_avatar--dot-offline: var(--sc-kit--avatar--dot--color-offline, var(--sc-kit--color--text--muted));
+  --sc-kit--image--border-radius: 50%;
+  --sc-kit--image--background: var(--_avatar--background);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_avatar--size);
+  height: var(--_avatar--size);
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--_avatar--background);
+  color: var(--_avatar--color);
+  line-height: var(--sc-kit--leading--tight);
+}
+.avatar--xs {
+  --_avatar--size: var(--sc-kit--avatar--size, 1.25rem);
+}
+.avatar--sm {
+  --_avatar--size: var(--sc-kit--avatar--size, 1.5rem);
+}
+.avatar--md {
+  --_avatar--size: var(--sc-kit--avatar--size, 2rem);
+}
+.avatar--lg {
+  --_avatar--size: var(--sc-kit--avatar--size, 2.5rem);
+}
+.avatar--xl {
+  --_avatar--size: var(--sc-kit--avatar--size, 3.5rem);
+}
+.avatar__initials {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--_avatar--initials-background);
+  color: var(--_avatar--initials-color);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  font-size: calc(var(--_avatar--size) * 0.42);
+  line-height: var(--sc-kit--leading--tight);
+  user-select: none;
+}
+.avatar__fallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.avatar__fallback-icon {
+  width: 70%;
+  height: 70%;
+}
+.avatar__dot {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 28%;
+  height: 28%;
+  min-width: 0.5rem;
+  min-height: 0.5rem;
+  border-radius: 50%;
+  border: 2px solid var(--_avatar--dot-border-color);
+}
+.avatar__dot--online {
+  background: var(--_avatar--dot-online);
+}
+.avatar__dot--busy {
+  background: var(--_avatar--dot-busy);
+}
+.avatar__dot--offline {
+  background: var(--_avatar--dot-offline);
+}</style>