@streamscloud/kit 0.0.1 → 0.1.0

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

@@ -1,11 +1,31 @@
 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 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` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -6,6 +6,16 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
   <Icon src={IconImage} />
 </div>
 
+<!--
+@component
+A placeholder image stub showing a generic image icon, used as a fallback when no image source is available.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--image-stub--color` | Icon and border color | `neutral-300` / `neutral-700` |
+-->
+
 <style>.image-stub {
   --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-color--bg-images, light-dark(#d1d5db, #374151)));
   width: 100%;

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

@@ -11,6 +11,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+/**
+ * A placeholder image stub showing a generic image icon, used as a fallback when no image source is available.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--image-stub--color` | Icon and border color | `neutral-300` / `neutral-700` |
+ */
 declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -34,6 +34,19 @@ const onLoadError = () => {
   {/if}
 </div>
 
+<!--
+@component
+Displays an image with loading states: shows the image on success, an error icon on failure, or a customizable stub placeholder.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--image--background` | Container background | `transparent` |
+| `--sc-kit--image--border-radius` | Corner rounding | `0` |
+| `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
+| `--sc-kit--image--stub--background` | Stub placeholder background | `neutral-300` / `neutral-700` |
+-->
+
 <style>.image {
   --_image--background: var(--sc-kit--image--background, transparent);
   --_image--border-radius: var(--sc-kit--image--border-radius, 0);

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

@@ -1,13 +1,28 @@
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Image URL to display */
     src: string | null | undefined;
     alt?: string;
+    /** Show a placeholder stub instead of an error icon when image fails to load */
     showStubOnError?: boolean;
     on?: {
+        /** Fires after load attempt; `true` if successful, `false` on error */
         load?: (loadedSuccessfully: boolean) => void;
     };
+    /** Custom stub snippet rendered while image has no source or on error with `showStubOnError` */
     stub?: Snippet;
 };
+/**
+ * Displays an image with loading states: shows the image on success, an error icon on failure, or a customizable stub placeholder.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--image--background` | Container background | `transparent` |
+ * | `--sc-kit--image--border-radius` | Corner rounding | `0` |
+ * | `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
+ * | `--sc-kit--image--stub--background` | Stub placeholder background | `neutral-300` / `neutral-700` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte

@@ -61,6 +61,16 @@ const onLoadMore = async () => {
   {/if}
 </div>
 
+<!--
+@component
+Triggers an async `loadMore` callback when a sentinel element scrolls into view, using IntersectionObserver.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--infinite-scrolling--overflow-y` | Vertical overflow behavior | `initial` |
+-->
+
 <style>.infinite-scrolling {
   --_infinite-scrolling--overflow-y: var(--sc-kit--infinite-scrolling--overflow-y, initial);
   overflow-y: var(--_infinite-scrolling--overflow-y);

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte.d.ts

@@ -1,14 +1,23 @@
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Async callback invoked when the scroll trigger becomes visible */
     loadMore: () => Promise<unknown>;
-    /**
-     * Must be passed only if viewport is less than scrolling container
-     */
+    /** Scroll ancestor for IntersectionObserver root; required when viewport differs from scroll container */
     container?: HTMLElement | null;
+    /** IntersectionObserver rootMargin to trigger loading before reaching the bottom */
     actuationOffset?: string;
     children: Snippet;
+    /** Custom loading indicator snippet; defaults to the built-in `Loading` spinner */
     loading?: Snippet;
 };
+/**
+ * Triggers an async `loadMore` callback when a sentinel element scrolls into view, using IntersectionObserver.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--infinite-scrolling--overflow-y` | Vertical overflow behavior | `initial` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte

@@ -66,6 +66,16 @@ $effect(() => {
   {/if}
 </div>
 
+<!--
+@component
+Automatically calculates the maximum number of visible lines based on parent height, then truncates with an optional "show more" toggle.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
+-->
+
 <style>.line-clamp {
   --_line-clamp--white-space: var(--sc-kit--line-clamp--white-space, pre-line);
   width: 100%;

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte.d.ts

@@ -1,8 +1,17 @@
 import { type Snippet } from 'svelte';
 type Props = {
+    /** Show a "show more / show less" toggle when text is truncated */
     enableShowMore?: boolean;
     children: Snippet;
 };
+/**
+ * Automatically calculates the maximum number of visible lines based on parent height, then truncates with an optional "show more" toggle.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -41,6 +41,17 @@ const trackTruncatedState = (node) => {
   {/if}
 </div>
 
+<!--
+@component
+Truncates text content to a fixed number of lines with an optional "show more / show less" toggle.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
+| `--sc-kit--line-clamp--line-clamp` | Number of lines before truncation | `1` |
+-->
+
 <style>.line-clamp {
   --_line-clamp--white-space: var(--sc-kit--line-clamp--white-space, pre-line);
   --_line-clamp--line-clamp: var(--sc-kit--line-clamp--line-clamp, 1);

package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts

@@ -1,9 +1,20 @@
 import { type Snippet } from 'svelte';
 type Props = {
+    /** Maximum number of visible lines before truncation. Also settable via CSS custom property. */
     maxLines?: number;
+    /** Show a "show more / show less" toggle when text is truncated */
     enableShowMore?: boolean;
     children: Snippet;
 };
+/**
+ * Truncates text content to a fixed number of lines with an optional "show more / show less" toggle.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--line-clamp--white-space` | White-space mode for wrapped text | `pre-line` |
+ * | `--sc-kit--line-clamp--line-clamp` | Number of lines before truncation | `1` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/loading/cmp.loading.svelte

@@ -18,6 +18,17 @@ $effect(() => {
   <div class="la-ball-clip-rotate__spin"></div>
 </div>
 
+<!--
+@component
+A circular spinning loader with optional delay and blocking overlay.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--loading--font-size` | Base size of the spinner | `1rem` |
+| `--sc-kit--loading--spinner-color` | Spinner arc color | `primary-500` / `primary-400` |
+-->
+
 <style>.loading-ring-overlay {
   position: absolute;
   inset: 0;

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

@@ -1,9 +1,22 @@
 type Props = {
+    /** Center the spinner using fixed positioning */
     positionFixedCenter?: boolean;
+    /** Center the spinner using absolute positioning */
     positionAbsoluteCenter?: boolean;
+    /** Show a semi-transparent overlay behind the spinner */
     blocking?: boolean;
+    /** Delay in ms before the spinner becomes visible @default 0 */
     timeout?: number;
 };
+/**
+ * A circular spinning loader with optional delay and blocking overlay.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--loading--font-size` | Base size of the spinner | `1rem` |
+ * | `--sc-kit--loading--spinner-color` | Spinner arc color | `primary-500` / `primary-400` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte

@@ -12,6 +12,16 @@ let { actions } = $props();
   {/each}
 </div>
 
+<!--
+@component
+A vertically stacked column of player action buttons optimized for mobile touch targets.
+
+### Props
+| Prop | Type | Description |
+|---|---|---|
+| `actions` | `PlayerButtonDef[]` | Array of button definitions (icon, callback, disabled state) |
+-->
+
 <style>.mobile-player-buttons {
   cursor: pointer;
   display: flex;

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte.d.ts

@@ -2,6 +2,14 @@ import type { PlayerButtonDef } from './types';
 type Props = {
     actions: PlayerButtonDef[];
 };
+/**
+ * A vertically stacked column of player action buttons optimized for mobile touch targets.
+ *
+ * ### Props
+ * | Prop | Type | Description |
+ * |---|---|---|
+ * | `actions` | `PlayerButtonDef[]` | Array of button definitions (icon, callback, disabled state) |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/player/buttons/cmp.player-buttons.svelte

@@ -32,6 +32,17 @@ let { actions, scaleEffect = false, zoom = 1 } = $props();
   </div>
 {/if}
 
+<!--
+@component
+Desktop player action buttons — renders a single circular button or a vertically stacked pill for multiple actions.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--player-button--color` | Button background at full opacity | `dark-500` / `black` at 95% |
+| `--sc-kit--player-button--color--inactive` | Button background at rest | 60% opacity of `--color` |
+-->
+
 <style>.player-button {
   --_player-button--color: var(--sc-kit--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
   --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));

package/dist/ui/player/buttons/cmp.player-buttons.svelte.d.ts

@@ -1,9 +1,21 @@
 import type { PlayerButtonDef } from './types';
 type Props = {
+    /** Array of button definitions (icon, callback, disabled state) */
     actions: PlayerButtonDef[];
+    /** Scale the icon on hover */
     scaleEffect?: boolean;
+    /** CSS zoom level applied to the button container @default 1 */
     zoom?: number;
 };
+/**
+ * Desktop player action buttons — renders a single circular button or a vertically stacked pill for multiple actions.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--player-button--color` | Button background at full opacity | `dark-500` / `black` at 95% |
+ * | `--sc-kit--player-button--color--inactive` | Button background at rest | 60% opacity of `--color` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/player/buttons/cmp.responsive-player-buttons.svelte

@@ -11,6 +11,17 @@ let { scaleEffect = false, actions } = $props();
   <MobilePlayerButtons actions={actions} />
 </div>
 
+<!--
+@component
+Renders `PlayerButtons` on desktop and `MobilePlayerButtons` on mobile, switching via container query.
+
+### Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `actions` | `PlayerButtonDef[]` | — | Array of button definitions |
+| `scaleEffect` | `boolean` | `false` | Whether icons scale on hover (desktop only) |
+-->
+
 <style>.desktop-controls {
   display: contents;
   /* Set 'container-type: inline-size;' to reference container*/

package/dist/ui/player/buttons/cmp.responsive-player-buttons.svelte.d.ts

@@ -3,6 +3,15 @@ type Props = {
     actions: PlayerButtonDef[];
     scaleEffect?: boolean;
 };
+/**
+ * Renders `PlayerButtons` on desktop and `MobilePlayerButtons` on mobile, switching via container query.
+ *
+ * ### Props
+ * | Prop | Type | Default | Description |
+ * |---|---|---|---|
+ * | `actions` | `PlayerButtonDef[]` | — | Array of button definitions |
+ * | `scaleEffect` | `boolean` | `false` | Whether icons scale on hover (desktop only) |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -253,6 +253,19 @@ const slidesTranslateX = $derived(swipeTransition || (items.length > 1 ? -slider
   {/if}
 </div>
 
+<!--
+@component
+A horizontal slide carousel with infinite looping, touch swipe support, keyboard navigation, and multiple display modes (arrows, dots, counts).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--carousel--button-color` | Navigation arrow button background | `neutral-400` |
+| `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
+| `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
+| `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
+-->
+
 <style>@charset "UTF-8";
 .carousel {
   /* Public API */

package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts

@@ -2,14 +2,21 @@ import type { CarouselMode } from './types';
 import { type Snippet } from 'svelte';
 declare function $$render<T>(): {
     props: {
+        /** Array of items to cycle through */
         items: T[];
+        /** Zero-based index of the initially visible slide */
         initialIndex: number;
+        /** Navigation UI mode @default 'arrows-with-counts' */
         mode?: CarouselMode;
+        /** Auto-advance interval in ms; 0 disables auto-sliding @default 0 */
         autoSlideMs?: number;
         on?: {
+            /** Fires after the active slide changes */
             indexChanged: (index: number) => void;
         };
+        /** Render snippet for each slide item */
         children: Snippet<[T]>;
+        /** Custom dot indicator snippet; receives `{ active }` flag */
         dot?: Snippet<[{
             active: boolean;
         }]>;
@@ -33,6 +40,17 @@ interface $$IsomorphicComponent {
     <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * A horizontal slide carousel with infinite looping, touch swipe support, keyboard navigation, and multiple display modes (arrows, dots, counts).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--carousel--button-color` | Navigation arrow button background | `neutral-400` |
+ * | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
+ * | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
+ * | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
+ */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T> = InstanceType<typeof Cmp<T>>;
 export default Cmp;

package/dist/ui/player/feed-slider/cmp.feed-slider.svelte

@@ -172,6 +172,11 @@ const wheelCallbacks = {
   </div>
 </div>
 
+<!--
+@component
+A vertical full-screen feed slider (TikTok-style) with touch swipe, mouse wheel, and keyboard navigation. Only renders the active slide and its immediate neighbors for performance.
+-->
+
 <style>.feed-slider {
   position: relative;
   overflow: clip;

package/dist/ui/player/feed-slider/cmp.feed-slider.svelte.d.ts

@@ -4,8 +4,10 @@ declare function $$render<T extends {
     id: string;
 }>(): {
     props: {
+        /** Buffer controller managing the loaded items, current index, and navigation */
         buffer: FeedSliderBuffer<T>;
         on?: FeedSliderCallbacks;
+        /** Render snippet for each slide; receives `{ item, active }` */
         children: Snippet<[{
             item: T;
             active?: boolean;
@@ -36,6 +38,7 @@ interface $$IsomorphicComponent {
     }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/** A vertical full-screen feed slider (TikTok-style) with touch swipe, mouse wheel, and keyboard navigation. Only renders the active slide and its immediate neighbors for performance. */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {
     id: string;

package/dist/ui/progress/cmp.progress.svelte

@@ -1,3 +1,11 @@
+<script lang="ts">let { value } = $props();
+const cssWidth = $derived(`${100 * (value <= 1 ? value : 1)}%`);
+</script>
+
+<div class="progress">
+  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style:width={cssWidth}> &nbsp; </span>
+</div>
+
 <!--
 @component
 A horizontal progress bar that fills from left to right based on a normalized value.
@@ -11,13 +19,6 @@ A horizontal progress bar that fills from left to right based on a normalized va
 | `--sc-kit--progress--box-shadow` | Inset shadow on the track | `0 2px 3px rgba(0,0,0,0.25) inset` |
 | `--sc-kit--progress--border-radius` | Corner radius | `0` |
 -->
-<script lang="ts">let { value } = $props();
-const cssWidth = $derived(`${100 * (value <= 1 ? value : 1)}%`);
-</script>
-
-<div class="progress">
-  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style:width={cssWidth}> &nbsp; </span>
-</div>
 
 <style>.progress {
   --_progress--height: var(--sc-kit--progress--height, 0.25em);

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

@@ -1,5 +1,5 @@
 type Props = {
-    /** Completion value from 0 to 1 */
+    /** Completion ratio from 0 to 1 */
     value: number;
 };
 /**

package/dist/ui/proportional-container/cmp.proportional-container.svelte

@@ -8,6 +8,18 @@ export {};
   </div>
 </div>
 
+<!--
+@component
+A container that maintains a fixed aspect ratio, placing children in an absolutely-positioned inner element.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--proportional-container--ratio` | Aspect ratio (width / height) | `1` |
+| `--sc-kit--proportional-container--height` | Container height | `auto` |
+| `--sc-kit--proportional-container--width` | Container width | `100%` |
+-->
+
 <style>.proportional-container {
   --_proportional-container--ratio: var(--sc-kit--proportional-container--ratio, 1);
   --_proportional-container--height: var(--sc-kit--proportional-container--height, auto);

package/dist/ui/proportional-container/cmp.proportional-container.svelte.d.ts

@@ -1,8 +1,19 @@
 import type { Snippet } from 'svelte';
 type Props = {
+    /** Width-to-height aspect ratio (e.g. 16/9). Also settable via the CSS custom property. */
     ratio?: number | undefined;
     children?: Snippet;
 };
+/**
+ * A container that maintains a fixed aspect ratio, placing children in an absolutely-positioned inner element.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--proportional-container--ratio` | Aspect ratio (width / height) | `1` |
+ * | `--sc-kit--proportional-container--height` | Container height | `auto` |
+ * | `--sc-kit--proportional-container--width` | Container width | `100%` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -107,6 +107,19 @@ $effect(() => {
   </div>
 </div>
 
+<!--
+@component
+A draggable media seek bar with a track, filled portion, and scrubber handle. Supports mouse drag, click-to-seek, and keyboard navigation.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--seek-bar--container-color` | Track background color | `neutral-400` |
+| `--sc-kit--seek-bar--value-color` | Filled portion color | `white` |
+| `--sc-kit--seek-bar--scrubber-color` | Scrubber handle color | `white` |
+| `--sc-kit--seek-bar--scrubber-border-color` | Scrubber handle border color | `neutral-400` |
+-->
+
 <style>.seek-bar {
   cursor: pointer;
   position: relative;

package/dist/ui/seek-bar/cmp.seek-bar.svelte.d.ts

@@ -1,13 +1,26 @@
 type Props = {
-    /** 0-1 */
+    /** Current position from 0 to 1 */
     value: number;
+    /** Forward click events from the parent element to seek */
     listenParentClicks?: boolean;
     on: {
+        /** Called with the new position (0-1) when the user seeks */
         seek: (e: number) => void;
         dragStart?: () => void;
         dragEnd?: () => void;
     };
 };
+/**
+ * A draggable media seek bar with a track, filled portion, and scrubber handle. Supports mouse drag, click-to-seek, and keyboard navigation.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--seek-bar--container-color` | Track background color | `neutral-400` |
+ * | `--sc-kit--seek-bar--value-color` | Filled portion color | `white` |
+ * | `--sc-kit--seek-bar--scrubber-color` | Scrubber handle color | `white` |
+ * | `--sc-kit--seek-bar--scrubber-border-color` | Scrubber handle border color | `neutral-400` |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte

@@ -27,6 +27,18 @@ const indicatorMounted = (_) => {
   </div>
 </div>
 
+<!--
+@component
+An animated "swipe up" hint overlay with a bouncing arrow icon that fades out after a timeout.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--swipe-indicator--color` | Text and icon color | `white` |
+| `--sc-kit--swipe-indicator--font-size` | Text font size | `1rem` |
+| `--sc-kit--swipe-indicator--icon-size` | Icon size | inherits font-size |
+-->
+
 <style>.swipe-indicator {
   --_swipe-indicator--color: var(--sc-kit--swipe-indicator--color, #ffffff);
   --_swipe-indicator--font-size: var(--sc-kit--swipe-indicator--font-size, 1rem);

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte.d.ts

@@ -1,6 +1,17 @@
 type Props = {
+    /** Time in ms before the indicator fades out; 0 to keep visible @default 2000 */
     fadeTimeout?: number;
 };
+/**
+ * An animated "swipe up" hint overlay with a bouncing arrow icon that fades out after a timeout.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--swipe-indicator--color` | Text and icon color | `white` |
+ * | `--sc-kit--swipe-indicator--font-size` | Text font size | `1rem` |
+ * | `--sc-kit--swipe-indicator--icon-size` | Icon size | inherits font-size |
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;