@streamscloud/kit 0.2.42-1778522742378 → 0.9.0

package/dist/ui/grid-card/cmp.video-player.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">import { randomNanoid } from '../../core/utils';
+import { Icon } from '../icon';
+import { PlaybackManager } from '../media-playback';
+import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
+import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
+import { untrack } from 'svelte';
+const { src, active, on } = $props();
+const id = randomNanoid();
+let videoEl = $state(null);
+let currentTime = $state(0);
+let duration = $state(NaN);
+let isPlaying = $state(false);
+// Seek requested before metadata loaded — applied on `loadedmetadata`. Some browsers
+// silently drop currentTime writes before HAVE_METADATA (readyState < 1).
+let pendingSeekTime = null;
+// Register with the global PlaybackManager so only one player runs at a time.
+$effect(() => untrack(() => {
+    PlaybackManager.registerMountedPlayer(id, {
+        onPlay: () => setPlaying(true),
+        onPause: () => setPlaying(false),
+        onStop: () => {
+            setPlaying(false);
+            currentTime = 0;
+        },
+        onSeek: (time) => seekTo(time)
+    });
+    return () => PlaybackManager.unregisterPlayer(id);
+}));
+$effect(() => {
+    if (isPlaying) {
+        PlaybackManager.setPlayingComponent(id);
+    }
+});
+// Re-publish state when the parent flips us to active (e.g. carousel slide change). Native
+// `durationchange` only fires once on metadata load, so this is how a parent recovers the
+// already-known duration after navigation.
+$effect(() => {
+    if (active && videoEl) {
+        on?.activate?.(id);
+        if (!isNaN(videoEl.duration)) {
+            on?.durationChange?.(videoEl.duration);
+        }
+        on?.timeUpdate?.(videoEl.currentTime);
+    }
+});
+$effect(() => {
+    if (!videoEl) {
+        return;
+    }
+    if (isPlaying) {
+        const el = videoEl;
+        void (async () => {
+            try {
+                await el.play();
+            }
+            catch {
+                setPlaying(false);
+            }
+        })();
+    }
+    else {
+        videoEl.pause();
+    }
+});
+const setPlaying = (value) => {
+    isPlaying = value;
+};
+const formatTime = (seconds) => {
+    if (isNaN(seconds) || seconds < 0) {
+        return '00:00';
+    }
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+};
+const togglePlay = () => setPlaying(!isPlaying);
+const onTimeUpdate = () => {
+    if (!videoEl) {
+        return;
+    }
+    currentTime = videoEl.currentTime;
+    on?.timeUpdate?.(currentTime);
+};
+const onDurationChange = () => {
+    if (!videoEl) {
+        return;
+    }
+    duration = videoEl.duration;
+    on?.durationChange?.(duration);
+};
+const onLoadedMetadata = () => {
+    if (!videoEl) {
+        return;
+    }
+    if (pendingSeekTime !== null) {
+        videoEl.currentTime = pendingSeekTime;
+        pendingSeekTime = null;
+    }
+};
+export const seekTo = (time) => {
+    if (!videoEl) {
+        return;
+    }
+    // HAVE_METADATA = 1; before that, currentTime writes can be dropped silently.
+    if (videoEl.readyState >= 1) {
+        videoEl.currentTime = time;
+    }
+    else {
+        pendingSeekTime = time;
+    }
+};
+</script>
+
+<div class="video-player">
+  <video
+    bind:this={videoEl}
+    src={src}
+    controls={false}
+    preload="auto"
+    ontimeupdate={onTimeUpdate}
+    ondurationchange={onDurationChange}
+    onloadedmetadata={onLoadedMetadata}
+    onplay={() => setPlaying(true)}
+    onpause={() => setPlaying(false)}
+    onended={() => setPlaying(false)}
+    onclick={togglePlay}>
+    <track kind="captions" />
+  </video>
+
+  <button
+    type="button"
+    class="video-player__control-button"
+    class:is-playing={isPlaying}
+    onmousedown={(e) => e.preventDefault()}
+    onclick={(e) => {
+      e.stopPropagation();
+      togglePlay();
+    }}>
+    <Icon src={isPlaying ? IconPause : IconPlay} color="on-accent" />
+  </button>
+
+  <div class="video-player__duration">{formatTime(duration - currentTime)}</div>
+</div>
+
+<!--
+@component
+Internal video player used by `GridCardMedia` for a single playable media item. Integrates
+with the global `PlaybackManager` so only one player can play at a time. Exposes `seekTo(t)`
+via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridCardMedia`.
+-->
+
+<style>.video-player {
+  --_video-player--object-fit: var(--sc-kit--grid-card--media--object-fit, contain);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.video-player video {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--_video-player--object-fit);
+}
+.video-player__control-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  --sc-kit--icon--filter: drop-shadow(1px 1px black);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.video-player__control-button.is-playing {
+  opacity: 0;
+}
+.video-player__control-button.is-playing:focus {
+  opacity: 1;
+}
+.video-player:hover .video-player__control-button.is-playing {
+  opacity: 1;
+}
+.video-player__duration {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  background: light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.7));
+  color: var(--sc-kit--color--text--secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.125rem;
+  font-size: 0.75rem;
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--leading--normal);
+}</style>

package/dist/ui/grid-card/cmp.video-player.svelte.d.ts

@@ -0,0 +1,26 @@
+type Props = {
+    src: string;
+    /**
+     * When `true`, the player re-publishes its current `currentTime` / `duration` upward via
+     * `on.timeUpdate` / `on.durationChange` so the parent can read this slide's state on
+     * carousel navigation. Native HTML5 `durationchange` only fires once on metadata load,
+     * so the parent can't recover those values just from native events.
+     */
+    active?: boolean;
+    on?: {
+        timeUpdate?: (currentTime: number) => void;
+        durationChange?: (duration: number) => void;
+        /** Fires when `active` flips true. Carries this player's stable id so parent can route seeks. */
+        activate?: (id: string) => void;
+    };
+};
+/**
+ * Internal video player used by `GridCardMedia` for a single playable media item. Integrates
+ * with the global `PlaybackManager` so only one player can play at a time. Exposes `seekTo(t)`
+ * via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridCardMedia`.
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    seekTo: (time: number) => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-actions-field.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import GridCardButton from './cmp.grid-card-button.svelte';
+import GridCardField from './cmp.grid-card-field.svelte';
+const { label, actions } = $props();
+</script>
+
+<GridCardField label={label}>
+  <div class="grid-card-actions-field">
+    {#each actions as action (action)}
+      <GridCardButton icon={action.icon} text={action.text} on={action.on} />
+    {/each}
+  </div>
+</GridCardField>
+
+<!--
+@component
+Row of compact action buttons (edit, delete, etc.) for `GridCard`. Each `action` carries an
+icon + optional text + click handler; buttons stop propagation so they don't fire whole-card
+activation.
+-->
+
+<style>.grid-card-actions-field {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.25rem;
+}</style>

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

@@ -0,0 +1,21 @@
+import type { IconProp } from '../../icon';
+export type GridCardAction = {
+    /** Use the `{ src, color }` object form to tint the icon (e.g. `'danger'` for delete) without coloring the whole button. */
+    icon: IconProp;
+    text?: string;
+    on: {
+        click: (e: MouseEvent) => void;
+    };
+};
+type Props = {
+    label: string;
+    actions: GridCardAction[];
+};
+/**
+ * Row of compact action buttons (edit, delete, etc.) for `GridCard`. Each `action` carries an
+ * icon + optional text + click handler; buttons stop propagation so they don't fire whole-card
+ * activation.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-badge-field.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Badge } from '../../badge';
+import { IconSlot } from '../../icon';
+import GridCardField from './cmp.grid-card-field.svelte';
+const { label, text, variant = 'neutral', style = 'soft', icon } = $props();
+</script>
+
+<GridCardField label={label}>
+  <Badge variant={variant} style={style} size="sm">
+    {#if icon}
+      <span class="grid-card-badge-field__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+    {/if}
+    {text}
+  </Badge>
+</GridCardField>
+
+<!--
+@component
+Status badge row. Wraps a kit `<Badge>` with optional leading icon (SVG string or snippet)
+inside a `<GridCardField>` so it aligns with text rows. Use for content status, asset state,
+plan / tier indicators, etc.
+-->
+
+<style>.grid-card-badge-field__icon {
+  display: inline-flex;
+  align-items: center;
+  --sc-kit--icon--size: 0.875em;
+  --sc-kit--icon--color: currentColor;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-badge-field.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { BadgeVariant } from '../../badge';
+import { type IconProp } from '../../icon';
+type Props = {
+    label: string;
+    text: string;
+    /** Badge color variant. @default 'neutral' */
+    variant?: BadgeVariant;
+    /** @default 'soft' */
+    style?: 'soft' | 'solid';
+    /** Optional leading icon rendered inside the badge. */
+    icon?: IconProp;
+};
+/**
+ * Status badge row. Wraps a kit `<Badge>` with optional leading icon (SVG string or snippet)
+ * inside a `<GridCardField>` so it aligns with text rows. Use for content status, asset state,
+ * plan / tier indicators, etc.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Button } from '../../button';
+import { IconText } from '../../icon-text';
+const { icon, text, on } = $props();
+const handleClick = (e) => {
+    e.stopPropagation();
+    on.click(e);
+};
+</script>
+
+<span class="grid-card-button">
+  <Button type="button" variant="ghost" size="sm" on={{ click: handleClick }}>
+    <IconText icon={icon} hideText={!text} trimText>
+      {#if text}{text}{/if}
+    </IconText>
+  </Button>
+</span>
+
+<!--
+@component
+Internal compact action button for `GridCard` rows. Kit `Button` `size='sm'` + `variant='ghost'`
+wrapping an `IconText` so individual action icons can be tinted (e.g. `{ src, color: 'danger' }`
+on delete) without coloring the whole button. Click handler stops propagation so it doesn't fire
+the card's `on.activate`.
+-->
+
+<style>.grid-card-button {
+  min-width: 0;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { IconProp } from '../../icon';
+type Props = {
+    icon: IconProp;
+    text?: string;
+    on: {
+        click: (e: MouseEvent) => void;
+    };
+};
+/**
+ * Internal compact action button for `GridCard` rows. Kit `Button` `size='sm'` + `variant='ghost'`
+ * wrapping an `IconText` so individual action icons can be tinted (e.g. `{ src, color: 'danger' }`
+ * on delete) without coloring the whole button. Click handler stops propagation so it doesn't fire
+ * the card's `on.activate`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-field.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">const { label, multiline = false, vertical = false, children } = $props();
+export {};
+</script>
+
+<div class="grid-card-field" class:grid-card-field--multiline={multiline} class:grid-card-field--vertical={vertical}>
+  <span class="grid-card-field__label">{label}</span>
+  <div class="grid-card-field__content">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+Single label-value row inside a `<GridCardFields>` subgrid. Use directly for custom content,
+or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardProgressField>` /
+`<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
+content; set `vertical` to stack the label above the content (escapes the subgrid).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card-field--background` | Row background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--grid-card-field--padding-block` | Vertical padding | `6px` |
+| `--sc-kit--grid-card-field--padding-inline` | Horizontal padding | `8px` |
+-->
+
+<style>.grid-card-field {
+  --_gcf--background: var(--sc-kit--grid-card-field--background, var(--sc-kit--color--bg--panel));
+  --_gcf--padding-block: var(--sc-kit--grid-card-field--padding-block, 0.375rem);
+  --_gcf--padding-inline: var(--sc-kit--grid-card-field--padding-inline, 0.5rem);
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+  background: var(--_gcf--background);
+  border-radius: 0.125rem;
+  align-items: center;
+}
+.grid-card-field--multiline {
+  align-items: start;
+}
+.grid-card-field--vertical {
+  grid-template-columns: 1fr;
+  grid-row-gap: 0.25rem;
+  padding: var(--_gcf--padding-block) var(--_gcf--padding-inline);
+}
+.grid-card-field--vertical .grid-card-field__label, .grid-card-field--vertical .grid-card-field__content {
+  padding: 0;
+}
+.grid-card-field__label {
+  font-size: 0.625rem;
+  color: var(--sc-kit--color--text--secondary);
+  padding-block: var(--_gcf--padding-block);
+  padding-inline-start: var(--_gcf--padding-inline);
+  white-space: nowrap;
+  line-height: var(--sc-kit--leading--tight);
+}
+.grid-card-field__content {
+  padding-block: var(--_gcf--padding-block);
+  padding-inline-end: var(--_gcf--padding-inline);
+  min-width: 0;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    label: string;
+    multiline?: boolean;
+    vertical?: boolean;
+    children: Snippet;
+};
+/**
+ * Single label-value row inside a `<GridCardFields>` subgrid. Use directly for custom content,
+ * or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardProgressField>` /
+ * `<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
+ * content; set `vertical` to stack the label above the content (escapes the subgrid).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card-field--background` | Row background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--grid-card-field--padding-block` | Vertical padding | `6px` |
+ * | `--sc-kit--grid-card-field--padding-inline` | Horizontal padding | `8px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-fields.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">const { children } = $props();
+export {};
+</script>
+
+<div class="grid-card-fields">
+  {@render children()}
+</div>
+
+<!--
+@component
+Layout container for `<GridCardField>` rows inside a `<GridCard>`. Establishes a 2-column
+subgrid (label / content) so labels align across all rows.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card-fields--column-gap` | Gap between label and content columns | `14px` |
+| `--sc-kit--grid-card-fields--row-gap` | Gap between rows | `4px` |
+-->
+
+<style>.grid-card-fields {
+  --_gcf--column-gap: var(--sc-kit--grid-card-fields--column-gap, 0.875rem);
+  --_gcf--row-gap: var(--sc-kit--grid-card-fields--row-gap, 0.25rem);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--_gcf--column-gap);
+  row-gap: var(--_gcf--row-gap);
+  width: 100%;
+}
+.grid-card-fields > :global(*) {
+  grid-column: 1/-1;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-fields.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+/**
+ * Layout container for `<GridCardField>` rows inside a `<GridCard>`. Establishes a 2-column
+ * subgrid (label / content) so labels align across all rows.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card-fields--column-gap` | Gap between label and content columns | `14px` |
+ * | `--sc-kit--grid-card-fields--row-gap` | Gap between rows | `4px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-id-field.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">const { label = 'Id:', text } = $props();
+</script>
+
+<div class="grid-card-id-field">
+  <span class="grid-card-id-field__label">{label}</span>
+  <span class="grid-card-id-field__value" title={text}>{text}</span>
+</div>
+
+<!--
+@component
+Compact single-line ID row. Renders as a flat label + monospace-style value with ellipsis
+overflow — useful for displaying an item ID that's typically long and not visually critical.
+Skips the `<GridCardField>` subgrid wrapping for a tighter look.
+-->
+
+<style>.grid-card-id-field {
+  display: flex;
+  align-items: center;
+  gap: 0.8125rem;
+  grid-column: 1/-1;
+  background: var(--sc-kit--grid-card-field--background, var(--sc-kit--color--bg--panel));
+  border-radius: 0.125rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.5rem;
+  font-size: 0.625rem;
+}
+.grid-card-id-field__label, .grid-card-id-field__value {
+  color: var(--sc-kit--color--text--secondary);
+  line-height: var(--sc-kit--leading--normal);
+}
+.grid-card-id-field__label {
+  white-space: nowrap;
+}
+.grid-card-id-field__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-id-field.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    /** @default 'Id:' */
+    label?: string;
+    text: string;
+};
+/**
+ * Compact single-line ID row. Renders as a flat label + monospace-style value with ellipsis
+ * overflow — useful for displaying an item ID that's typically long and not visually critical.
+ * Skips the `<GridCardField>` subgrid wrapping for a tighter look.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-progress-field.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">import GridCardField from './cmp.grid-card-field.svelte';
+const { label, stage, stages } = $props();
+const currentStage = $derived(stages[Math.max(0, Math.min(stage, stages.length - 1))]);
+const currentLabel = $derived(currentStage?.label ?? '');
+</script>
+
+<GridCardField label={label}>
+  <div class="grid-card-progress-field">
+    <div
+      class="grid-card-progress-field__bar"
+      role="progressbar"
+      aria-valuemin={1}
+      aria-valuemax={stages.length}
+      aria-valuenow={stage + 1}
+      aria-label={currentLabel}>
+      {#each stages as s, i (i)}
+        <span class="grid-card-progress-field__segment" class:grid-card-progress-field__segment--filled={i <= stage} style:--_seg-color={s.color}></span>
+      {/each}
+    </div>
+    {#if currentLabel}
+      <span class="grid-card-progress-field__label">{currentLabel}</span>
+    {/if}
+  </div>
+</GridCardField>
+
+<!--
+@component
+Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
+descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are
+filled with the per-stage color, the rest are muted. Consumer supplies the per-stage color
+(string — any valid CSS color or `var(--sc-kit--color--*)` reference). Useful for content
+lifecycle indicators (Ideas → Draft → Review → Scheduled → Published).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card-progress-field--segment--height` | Bar segment height | `4px` |
+| `--sc-kit--grid-card-progress-field--segment--gap` | Gap between segments | `2px` |
+| `--sc-kit--grid-card-progress-field--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+-->
+
+<style>.grid-card-progress-field {
+  --_gcp--seg-height: var(--sc-kit--grid-card-progress-field--segment--height, 0.25rem);
+  --_gcp--seg-gap: var(--sc-kit--grid-card-progress-field--segment--gap, 0.125rem);
+  --_gcp--seg-empty: var(--sc-kit--grid-card-progress-field--segment--background--empty, var(--sc-kit--color--bg--active));
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.grid-card-progress-field__bar {
+  display: flex;
+  gap: var(--_gcp--seg-gap);
+  width: 100%;
+}
+.grid-card-progress-field__segment {
+  flex: 1;
+  height: var(--_gcp--seg-height);
+  background: var(--_gcp--seg-empty);
+  border-radius: 0.0625rem;
+}
+.grid-card-progress-field__segment--filled {
+  background: var(--_seg-color);
+}
+.grid-card-progress-field__label {
+  font-size: 0.625rem;
+  color: var(--sc-kit--color--text--secondary);
+  line-height: var(--sc-kit--leading--tight);
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-progress-field.svelte.d.ts

@@ -0,0 +1,30 @@
+type Props = {
+    label: string;
+    /** Current stage index, 0-based. Stages 0..stage (inclusive) are filled. */
+    stage: number;
+    /**
+     * Stage descriptors — at minimum `{ color }` per stage (consumer provides the CSS color).
+     * Length determines the total segment count. Pass arbitrary number of stages.
+     */
+    stages: {
+        color: string;
+        label?: string;
+    }[];
+};
+/**
+ * Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
+ * descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are
+ * filled with the per-stage color, the rest are muted. Consumer supplies the per-stage color
+ * (string — any valid CSS color or `var(--sc-kit--color--*)` reference). Useful for content
+ * lifecycle indicators (Ideas → Draft → Review → Scheduled → Published).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card-progress-field--segment--height` | Bar segment height | `4px` |
+ * | `--sc-kit--grid-card-progress-field--segment--gap` | Gap between segments | `2px` |
+ * | `--sc-kit--grid-card-progress-field--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;