@streamscloud/kit 0.0.1-1771078892208 → 0.1.0

package/dist/ui/button/cmp.button.svelte

@@ -8,3 +8,51 @@ let { type = 'button', disabled = false, autofocus = false, variant = null, size
     {@render children()}
   </ButtonBase>
 </ButtonTheme>
+
+<!--
+@component
+A themed button component combining `ButtonBase` (structure) and `ButtonTheme` (colors/sizes).
+
+### Base CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--button--font--size` | Root font size | `1rem` |
+| `--sc-kit--button--font--color` | Text color | `black` |
+| `--sc-kit--button--font--color--active` | Text color when pressed | inherits `--font--color` |
+| `--sc-kit--button--font--color--disabled` | Text color when disabled | inherits `--font--color` |
+| `--sc-kit--button--font-weight` | Font weight | `400` |
+| `--sc-kit--button--text--font-size` | Label text size | `0.75em` |
+| `--sc-kit--button--icon--font-size` | Icon size inside the button | `1em` |
+| `--sc-kit--button--justify-content` | Horizontal alignment | `center` |
+| `--sc-kit--button--background` | Background color | `white` |
+| `--sc-kit--button--background--hover` | Background on hover | inherits `--background` |
+| `--sc-kit--button--background--active` | Background when pressed | inherits `--background` |
+| `--sc-kit--button--background--disabled` | Background when disabled | inherits `--background` |
+| `--sc-kit--button--border` | Border shorthand | `none` |
+| `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
+| `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
+| `--sc-kit--button--padding--vertical` | Vertical padding | `0` |
+| `--sc-kit--button--padding--horizontal` | Horizontal padding | `1em` |
+| `--sc-kit--button--min-width` | Minimum width | `0` |
+| `--sc-kit--button--width` | Explicit width | `auto` |
+| `--sc-kit--button--height` | Button height | `2em` |
+| `--sc-kit--button--box-shadow` | Box shadow | `none` |
+
+### Variant CSS Custom Properties
+Each variant overrides the base properties above using the pattern:
+`--sc-kit--button--{variant}--{property}`
+
+**Available variants:** `primary`, `standard`, `alert`, `warning`, `white`, `gray`, `green`, `black`, `text-only`, `transparent-success`, `transparent-primary`, `transparent-gray`, `transparent-white`, `transparent-warning`, `transparent-destructive`
+
+**Overridable property suffixes per variant:**
+`font--color`, `font--color--active`, `font--color--disabled`, `background`, `background--hover`, `background--active`, `background--disabled`, `border`, `border--disabled`, `box-shadow`
+
+**Example:** `--sc-kit--button--primary--background: hotpink;`
+
+### Size Presets
+| Size | Height | Text size | Font weight |
+|---|---|---|---|
+| `standard` | `2em` | `0.75em` | `400` |
+| `large` | `3em` | `0.9375em` | `500` |
+| `small` | `1.5em` | `0.625em` | `400` |
+-->

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

@@ -4,13 +4,61 @@ type Props = {
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     autofocus?: boolean;
+    /** Color variant applied via `ButtonTheme` */
     variant?: ButtonVariant | null;
+    /** Size preset: `'standard'` (32px), `'large'` (48px), or `'small'` (24px) */
     size?: ButtonSize | null;
     on?: {
         click?: (e: MouseEvent) => void;
     };
     children: Snippet;
 };
+/**
+ * A themed button component combining `ButtonBase` (structure) and `ButtonTheme` (colors/sizes).
+ *
+ * ### Base CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--button--font--size` | Root font size | `1rem` |
+ * | `--sc-kit--button--font--color` | Text color | `black` |
+ * | `--sc-kit--button--font--color--active` | Text color when pressed | inherits `--font--color` |
+ * | `--sc-kit--button--font--color--disabled` | Text color when disabled | inherits `--font--color` |
+ * | `--sc-kit--button--font-weight` | Font weight | `400` |
+ * | `--sc-kit--button--text--font-size` | Label text size | `0.75em` |
+ * | `--sc-kit--button--icon--font-size` | Icon size inside the button | `1em` |
+ * | `--sc-kit--button--justify-content` | Horizontal alignment | `center` |
+ * | `--sc-kit--button--background` | Background color | `white` |
+ * | `--sc-kit--button--background--hover` | Background on hover | inherits `--background` |
+ * | `--sc-kit--button--background--active` | Background when pressed | inherits `--background` |
+ * | `--sc-kit--button--background--disabled` | Background when disabled | inherits `--background` |
+ * | `--sc-kit--button--border` | Border shorthand | `none` |
+ * | `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
+ * | `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
+ * | `--sc-kit--button--padding--vertical` | Vertical padding | `0` |
+ * | `--sc-kit--button--padding--horizontal` | Horizontal padding | `1em` |
+ * | `--sc-kit--button--min-width` | Minimum width | `0` |
+ * | `--sc-kit--button--width` | Explicit width | `auto` |
+ * | `--sc-kit--button--height` | Button height | `2em` |
+ * | `--sc-kit--button--box-shadow` | Box shadow | `none` |
+ *
+ * ### Variant CSS Custom Properties
+ * Each variant overrides the base properties above using the pattern:
+ * `--sc-kit--button--{variant}--{property}`
+ *
+ * **Available variants:** `primary`, `standard`, `alert`, `warning`, `white`, `gray`, `green`, `black`, `text-only`, `transparent-success`, `transparent-primary`, `transparent-gray`, `transparent-white`, `transparent-warning`, `transparent-destructive`
+ *
+ * **Overridable property suffixes per variant:**
+ * `font--color`, `font--color--active`, `font--color--disabled`, `background`, `background--hover`, `background--active`, `background--disabled`, `border`, `border--disabled`, `box-shadow`
+ *
+ * **Example:** `--sc-kit--button--primary--background: hotpink;`
+ *
+ * ### Size Presets
+ * | Size | Height | Text size | Font weight |
+ * |---|---|---|---|
+ * | `standard` | `2em` | `0.75em` | `400` |
+ * | `large` | `3em` | `0.9375em` | `500` |
+ * | `small` | `1.5em` | `0.625em` | `400` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/button/cmp.options-button.svelte

@@ -111,6 +111,18 @@ const toggleRight = (e) => {
   </div>
 </ButtonTheme>
 
+<!--
+@component
+A split button with optional left and/or right dropdown menus, combining a main action button with chevron-triggered option panels.
+
+### CSS Custom Properties
+Inherits all `--sc-kit--button--*` base and variant properties from `Button`.
+
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--options-button--dropdown--min-width` | Minimum width of the dropdown panel | `10em` |
+-->
+
 <style>.options-button {
   --_options-button--font--color: var(--sc-kit--button--font--color, black);
   --_options-button--font-weight: var(--sc-kit--button--font-weight, 400);

package/dist/ui/button/cmp.options-button.svelte.d.ts

@@ -5,17 +5,33 @@ type Props = {
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     autofocus?: boolean;
+    /** Color variant applied via `ButtonTheme` */
     variant?: ButtonVariant | null;
+    /** Size preset: `'standard'`, `'large'`, or `'small'` */
     size?: ButtonSize | null;
+    /** Popper.js placement of the options dropdown @default 'bottom-start' */
     optionsPosition?: Placement;
+    /** Distance in px between the trigger and the dropdown @default 4 */
     optionsOffset?: number;
     on?: {
         click?: (e: MouseEvent) => void;
     };
     children: Snippet;
+    /** Left-side dropdown content (shown via chevron toggle) */
     options?: Snippet;
+    /** Right-side dropdown content (shown via chevron toggle) */
     rightOptions?: Snippet;
 };
+/**
+ * A split button with optional left and/or right dropdown menus, combining a main action button with chevron-triggered option panels.
+ *
+ * ### CSS Custom Properties
+ * Inherits all `--sc-kit--button--*` base and variant properties from `Button`.
+ *
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--options-button--dropdown--min-width` | Minimum width of the dropdown panel | `10em` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -17,6 +17,16 @@ let { action, on } = $props();
   <Icon src={action.icon} color={action.iconColor ?? 'text'} />
 </button>
 
+<!--
+@component
+A single icon button representing a card action, with a scale-on-hover effect.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--card-action--padding` | Button padding | `0.3125em` |
+-->
+
 <style>.card-action {
   --_card-action--padding: var(--sc-kit--card-action--padding, 0.3125em);
   padding: var(--_card-action--padding);

package/dist/ui/card-actions/cmp.card-action.svelte.d.ts

@@ -1,10 +1,19 @@
 import type { CardActionModel } from './types';
 type Props = {
+    /** Action definition containing icon, callback, title, and color */
     action: CardActionModel;
     on?: {
         click?: () => void;
     };
 };
+/**
+ * A single icon button representing a card action, with a scale-on-hover effect.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--card-action--padding` | Button padding | `0.3125em` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/card-actions/cmp.card-actions.svelte

@@ -26,6 +26,23 @@ let closeDropdown = () => {
   </div>
 {/if}
 
+<!--
+@component
+An absolutely-positioned actions menu that reveals on hover, showing a "more" trigger icon with a dropdown of `CardAction` items. Wrap the parent container with the `.card-actions-container` class.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--card-actions--background` | Trigger background | `neutral-50` / `neutral-900` |
+| `--sc-kit--card-actions--border-radius` | Corner rounding | `0.1875em` |
+| `--sc-kit--card-actions--dropdown-background` | Dropdown panel background | inherits `--background` |
+| `--sc-kit--card-actions--font-size` | Base font size | `1rem` |
+| `--sc-kit--card-actions--left-offset` | Left position offset | `0.3125em` |
+| `--sc-kit--card-actions--opacity` | Resting opacity (0 = hidden until hover) | `0` |
+| `--sc-kit--card-actions--right-offset` | Right position offset | `auto` |
+| `--sc-kit--card-actions--top-offset` | Top position offset | `0.3125em` |
+-->
+
 <style>.card-actions {
   --_card-actions--background: var(--sc-kit--card-actions--background, light-dark(#f9fafb, #111827));
   --_card-actions--border-radius: var(--sc-kit--card-actions--border-radius, 0.1875em);

package/dist/ui/card-actions/cmp.card-actions.svelte.d.ts

@@ -1,9 +1,26 @@
 import { type DropdownPosition } from '../dropdown';
 import type { CardActionModel } from './types';
 type Props = {
+    /** Array of action definitions to display in the dropdown */
     actions: CardActionModel[];
+    /** Popper.js placement of the dropdown panel @default 'bottom-start' */
     dropdownPosition?: DropdownPosition;
 };
+/**
+ * An absolutely-positioned actions menu that reveals on hover, showing a "more" trigger icon with a dropdown of `CardAction` items. Wrap the parent container with the `.card-actions-container` class.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--card-actions--background` | Trigger background | `neutral-50` / `neutral-900` |
+ * | `--sc-kit--card-actions--border-radius` | Corner rounding | `0.1875em` |
+ * | `--sc-kit--card-actions--dropdown-background` | Dropdown panel background | inherits `--background` |
+ * | `--sc-kit--card-actions--font-size` | Base font size | `1rem` |
+ * | `--sc-kit--card-actions--left-offset` | Left position offset | `0.3125em` |
+ * | `--sc-kit--card-actions--opacity` | Resting opacity (0 = hidden until hover) | `0` |
+ * | `--sc-kit--card-actions--right-offset` | Right position offset | `auto` |
+ * | `--sc-kit--card-actions--top-offset` | Top position offset | `0.3125em` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/dialog/cmp.dialog-button.svelte

@@ -8,6 +8,11 @@ let { type = 'button', disabled = false, autofocus = false, variant = 'primary',
   </Button>
 </div>
 
+<!--
+@component
+A dialog-specific action button with a minimum width preset. Defaults to the `primary` variant.
+-->
+
 <style>.dialog-button {
   --sc-kit--button--min-width: 8em;
 }</style>

package/dist/ui/dialog/cmp.dialog-button.svelte.d.ts

@@ -4,12 +4,14 @@ type Props = {
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     autofocus?: boolean;
+    /** Button color variant @default 'primary' */
     variant?: ButtonVariant;
     on?: {
         click?: (e: MouseEvent) => void;
     };
     children: Snippet;
 };
+/** A dialog-specific action button with a minimum width preset. Defaults to the `primary` variant. */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte

@@ -8,6 +8,11 @@ let { disabled = false, on, children } = $props();
   </Button>
 </div>
 
+<!--
+@component
+A dialog-specific cancel button using the `standard` variant with a minimum width preset.
+-->
+
 <style>.dialog-cancel-button {
   --sc-kit--button--min-width: 8em;
 }</style>

package/dist/ui/dialog/cmp.dialog-cancel-button.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     };
     children: Snippet;
 };
+/** A dialog-specific cancel button using the `standard` variant with a minimum width preset. */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/dialog/cmp.dialog-close-button.svelte

@@ -10,6 +10,16 @@ const handleClick = () => {
   <Icon src={IconDismiss24Filled} />
 </button>
 
+<!--
+@component
+A dismiss (X) icon button that cancels the parent dialog via the provided `DialogController`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--dialog-close-button--color` | Icon color | `neutral-500` / `neutral-300` |
+-->
+
 <style>.dialog-close-button {
   --_dialog-close-button--color: var(--sc-kit--dialog-close-button--color, light-dark(#6b7280, #d1d5db));
   --sc-kit--icon--size: 1.5rem;

package/dist/ui/dialog/cmp.dialog-close-button.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { DialogController } from './dialog-controller';
 declare function $$render<TResult = void, TCancelResult = void>(): {
     props: {
+        /** Dialog controller to call `cancel()` on when clicked */
         controller: DialogController<TResult, TCancelResult>;
     };
     exports: {};
@@ -22,6 +23,14 @@ interface $$IsomorphicComponent {
     <TResult = void, TCancelResult = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
+/**
+ * A dismiss (X) icon button that cancels the parent dialog via the provided `DialogController`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--dialog-close-button--color` | Icon color | `neutral-500` / `neutral-300` |
+ */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;
 export default Cmp;

package/dist/ui/dialog/cmp.dialog.svelte

@@ -36,6 +36,29 @@ const showCloseButton = $derived(!hideCloseButton && !controller.settings.nonCan
   {/if}
 </div>
 
+<!--
+@component
+A structured dialog panel with header (title + close button), scrollable body, and footer sections. Render inside a `DialogContainer` via the `Dialogs` singleton.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--dialog--background` | Dialog background | `white` / `black` |
+| `--sc-kit--dialog--border-color` | Header/footer separator border | `neutral-100` / `dark-800` |
+| `--sc-kit--dialog--border-radius` | Corner rounding | `0.5rem` |
+| `--sc-kit--dialog--color` | Text color | `black` / `white` |
+| `--sc-kit--dialog--shadow-color` | Box shadow color | `rgba(47,43,67,0.1)` / `rgba(255,255,255,0.1)` |
+| `--sc-kit--dialog--height` | Dialog height | `auto` |
+| `--sc-kit--dialog--max-height` | Maximum height | `none` |
+| `--sc-kit--dialog--min-height` | Minimum height | `auto` |
+| `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
+| `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
+| `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
+| `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
+| `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
+| `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
+-->
+
 <style>.dialog {
   --_dialog--background: var(--sc-kit--dialog--background, light-dark(#ffffff, #000000));
   --_dialog--border-color: var(--sc-kit--dialog--border-color, light-dark(#f2f2f3, #1e1e1e));

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

@@ -2,13 +2,21 @@ import type { DialogController } from './dialog-controller';
 import type { Snippet } from 'svelte';
 declare function $$render<TResult = void, TCancelResult = void>(): {
     props: {
+        /** Dialog controller instance that manages open/close/result lifecycle */
         controller: DialogController<TResult, TCancelResult>;
+        /** Hide the close (X) button in the header */
         hideCloseButton?: boolean;
+        /** Title content rendered inside the header */
         title?: Snippet;
+        /** Body content rendered in the scrollable middle section */
         body?: Snippet;
+        /** Footer content rendered at the bottom (typically action buttons) */
         footer?: Snippet;
+        /** Replaces the entire default header (title + close button) */
         headerSection?: Snippet;
+        /** Replaces the entire default body wrapper */
         bodySection?: Snippet;
+        /** Replaces the entire default footer wrapper */
         footerSection?: Snippet;
     };
     exports: {};
@@ -30,6 +38,27 @@ interface $$IsomorphicComponent {
     <TResult = void, TCancelResult = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
+/**
+ * A structured dialog panel with header (title + close button), scrollable body, and footer sections. Render inside a `DialogContainer` via the `Dialogs` singleton.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--dialog--background` | Dialog background | `white` / `black` |
+ * | `--sc-kit--dialog--border-color` | Header/footer separator border | `neutral-100` / `dark-800` |
+ * | `--sc-kit--dialog--border-radius` | Corner rounding | `0.5rem` |
+ * | `--sc-kit--dialog--color` | Text color | `black` / `white` |
+ * | `--sc-kit--dialog--shadow-color` | Box shadow color | `rgba(47,43,67,0.1)` / `rgba(255,255,255,0.1)` |
+ * | `--sc-kit--dialog--height` | Dialog height | `auto` |
+ * | `--sc-kit--dialog--max-height` | Maximum height | `none` |
+ * | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
+ * | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
+ * | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
+ * | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
+ * | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
+ * | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
+ * | `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
+ */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;
 export default Cmp;

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -134,6 +134,16 @@ const initPopper = (node) => {
   {/if}
 </div>
 
+<!--
+@component
+A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, and imperative open/close control.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--dropdown--width` | Trigger element width | `auto` |
+-->
+
 <style>.dropdown-backdrop {
   position: fixed;
   inset: 0;

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

@@ -1,24 +1,41 @@
 import { type Placement } from '@popperjs/core';
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Popper.js placement of the dropdown content @default 'bottom-start' */
     position?: Placement;
     disabled?: boolean;
+    /** Prevent the dropdown from closing when clicking inside its content */
     keepDropdownOpen?: boolean;
+    /** Use `position: fixed` for the Popper strategy (useful inside overflow containers) */
     fixedPosition?: boolean;
+    /** Distance in px between the trigger and the dropdown content @default 8 */
     offset?: number;
+    /** Padding in px from the viewport boundary @default 8 */
     boundaryMargin?: number;
+    /** Show a semi-transparent backdrop overlay when open */
     backdrop?: boolean;
+    /** Programmatically request the dropdown to open */
     isOpenRequested?: boolean;
     on?: {
         opened?: () => void;
         closed?: () => void;
+        /** Fires after mount, providing a `toggleOpen` callback for imperative control */
         mounted?: (callbacks: {
             toggleOpen: (value?: boolean) => void;
         }) => void;
     };
     children: Snippet;
+    /** Custom trigger snippet; defaults to a chevron-down icon */
     trigger?: Snippet;
 };
+/**
+ * A Popper.js-powered dropdown that positions content relative to a trigger element, with click-outside-to-close, optional backdrop, and imperative open/close control.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--dropdown--width` | Trigger element width | `auto` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -3,3 +3,13 @@ export {};
 </script>
 
 <DynamicModel.component {...DynamicModel.props}></DynamicModel.component>
+
+<!--
+@component
+Renders a dynamic Svelte component from a model object, spreading its props automatically.
+
+### Props
+| Prop | Type | Description |
+|---|---|---|
+| `model` | `DynamicComponentModel` | Component reference and its props to render |
+-->

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

@@ -2,6 +2,14 @@ import type { DynamicComponentModel } from './types.svelte';
 type Props = {
     model: DynamicComponentModel;
 };
+/**
+ * Renders a dynamic Svelte component from a model object, spreading its props automatically.
+ *
+ * ### Props
+ * | Prop | Type | Description |
+ * |---|---|---|
+ * | `model` | `DynamicComponentModel` | Component reference and its props to render |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/icon/cmp.icon.svelte

@@ -18,6 +18,26 @@ let { src, color = null } = $props();
   <i class="invalid-svg">Invalid SVG</i>
 {/if}
 
+<!--
+@component
+Renders an inline SVG icon with configurable size, color presets, and optional stroke/filter effects.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--icon--color` | Fill color (overrides currentColor) | `currentColor` |
+| `--sc-kit--icon--color-blue` | Color for `blue` preset | `#3b82f6` / `#60a5fa` |
+| `--sc-kit--icon--color-gray` | Color for `gray` preset | `#737373` |
+| `--sc-kit--icon--color-green` | Color for `green` preset | `#22c55e` |
+| `--sc-kit--icon--color-orange` | Color for `orange` preset | `#f97316` |
+| `--sc-kit--icon--color-red` | Color for `red` preset | `#ef4444` |
+| `--sc-kit--icon--color-text` | Color for `text` preset | `neutral-800` / `white` |
+| `--sc-kit--icon--color-white` | Color for `white` preset | `white` |
+| `--sc-kit--icon--filter` | CSS filter applied to the SVG | `none` |
+| `--sc-kit--icon--size` | Width and height of the SVG | `1.25rem` |
+| `--sc-kit--icon--stroke-width` | Stroke width on SVG paths | `0` |
+-->
+
 <style>.icon {
   --_icon--color: var(--sc-kit--icon--color);
   --_icon--color-blue: var(--sc-kit--icon--color-blue, light-dark(#3b82f6, #60a5fa));

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

@@ -1,8 +1,28 @@
 import type { IconColor } from './types';
 interface Props {
+    /** Raw SVG string (must start with `<svg`) */
     src: string;
+    /** Predefined color preset applied to the icon */
     color?: IconColor | null;
 }
+/**
+ * Renders an inline SVG icon with configurable size, color presets, and optional stroke/filter effects.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--icon--color` | Fill color (overrides currentColor) | `currentColor` |
+ * | `--sc-kit--icon--color-blue` | Color for `blue` preset | `#3b82f6` / `#60a5fa` |
+ * | `--sc-kit--icon--color-gray` | Color for `gray` preset | `#737373` |
+ * | `--sc-kit--icon--color-green` | Color for `green` preset | `#22c55e` |
+ * | `--sc-kit--icon--color-orange` | Color for `orange` preset | `#f97316` |
+ * | `--sc-kit--icon--color-red` | Color for `red` preset | `#ef4444` |
+ * | `--sc-kit--icon--color-text` | Color for `text` preset | `neutral-800` / `white` |
+ * | `--sc-kit--icon--color-white` | Color for `white` preset | `white` |
+ * | `--sc-kit--icon--filter` | CSS filter applied to the SVG | `none` |
+ * | `--sc-kit--icon--size` | Width and height of the SVG | `1.25rem` |
+ * | `--sc-kit--icon--stroke-width` | Stroke width on SVG paths | `0` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/image/cmp.image-round.svelte

@@ -8,6 +8,16 @@ let { src, alt = '', ring = false, on } = $props();
   </div>
 </div>
 
+<!--
+@component
+A circular image avatar built on top of `ImageRounded`, forcing 50% border-radius on all layers.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--image--round--size` | Diameter of the circle | `100%` |
+-->
+
 <style>.round-img {
   --_image--round--size: var(--sc-kit--image--round--size, 100%);
   --sc-kit--image--rounded--inner--border-radius: 50%;

package/dist/ui/image/cmp.image-round.svelte.d.ts

@@ -1,11 +1,21 @@
 type Props = {
+    /** Image URL to display */
     src: string | null | undefined;
     alt?: string;
+    /** Show a decorative gradient ring around the image */
     ring?: boolean;
     on?: {
         click: () => void;
     };
 };
+/**
+ * A circular image avatar built on top of `ImageRounded`, forcing 50% border-radius on all layers.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--image--round--size` | Diameter of the circle | `100%` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/image/cmp.image-rounded.svelte

@@ -8,6 +8,26 @@ let { src, alt = '', ring = false, on } = $props();
   </div>
 </div>
 
+<!--
+@component
+A rounded-corner image with an optional decorative double-border ring (outer gradient + inner solid).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--image--rounded--size` | Shorthand for both width and height | `100%` |
+| `--sc-kit--image--rounded--width` | Container width | inherits `--size` |
+| `--sc-kit--image--rounded--height` | Container height | inherits `--size` |
+| `--sc-kit--image--rounded--image--border-radius` | Inner image corner radius | computed |
+| `--sc-kit--image--rounded--inner--border-color` | Inner border color | `white` / `dark-900` |
+| `--sc-kit--image--rounded--inner--border-radius` | Inner border radius | computed |
+| `--sc-kit--image--rounded--inner--border-width` | Inner border thickness | `4px` |
+| `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `primary-500` to `primary-100` |
+| `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `2px` |
+| `--sc-kit--image--rounded--outer--border-width` | Outer ring thickness | `2px` |
+| `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `neutral-300` / `neutral-700` |
+-->
+
 <style>.rounded-img {
   --_image--rounded--size: var(--sc-kit--image--rounded--size, 100%);
   --_image--rounded--width: var(--sc-kit--image--rounded--width, var(--_image--rounded--size));