@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -0,0 +1,170 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Image } from '../image';
+import { PlaybackManager } from '../media-playback';
+import { Carousel } from '../player/carousel';
+import { ProportionalContainer } from '../proportional-container';
+import { SeekBar } from '../seek-bar';
+import { default as VideoPlayer } from './cmp.video-player.svelte';
+import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
+const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration } = $props();
+let currentIndex = $state(0);
+let currentTime = $state(0);
+let mediaDuration = $state(NaN);
+let activePlayerId = $state.raw(null);
+const hasPlayable = $derived(items.some((item) => item.playable));
+const isCurrentPlayable = $derived(items[currentIndex]?.playable === true);
+const progress = $derived(mediaDuration ? currentTime / mediaDuration : 0);
+const onPlayerTimeUpdate = (t) => (currentTime = t);
+const onPlayerDurationChange = (d) => (mediaDuration = d);
+const onPlayerActivate = (id) => (activePlayerId = id);
+const normalizedRatio = $derived.by(() => {
+    switch (aspectRatio) {
+        case 'vertical':
+            return 9 / 16;
+        case 'square':
+            return 1;
+        case 'horizontal':
+            return 16 / 9;
+    }
+});
+const onSeek = (value) => {
+    if (isNaN(mediaDuration)) {
+        return;
+    }
+    currentTime = value * mediaDuration;
+    if (activePlayerId) {
+        PlaybackManager.seek(activePlayerId, currentTime);
+    }
+};
+const onCarouselIndexChanged = (index) => {
+    currentIndex = index;
+    activePlayerId = null;
+};
+</script>
+
+<div class="grid-card-media" class:grid-card-media--contain={objectFit === 'contain'} class:grid-card-media--cover={objectFit === 'cover'}>
+  <ProportionalContainer ratio={normalizedRatio}>
+    {#if items.length === 0}
+      <div class="grid-card-media__empty">
+        <Icon src={IconImageOff} color="on-accent" />
+      </div>
+    {:else if items.length === 1}
+      {#if items[0].playable}
+        <VideoPlayer
+          src={items[0].url}
+          active={true}
+          on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
+      {:else}
+        <Image src={items[0].url} showStubOnError={true} />
+      {/if}
+    {:else}
+      <div class="grid-card-media__carousel">
+        <Carousel items={items} mode="arrows-with-counts" initialIndex={0} on={{ indexChanged: onCarouselIndexChanged }}>
+          {#snippet children(item)}
+            <div class="grid-card-media__slide">
+              {#if item.playable}
+                <VideoPlayer
+                  src={item.url}
+                  active={item === items[currentIndex]}
+                  on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
+              {:else}
+                <Image src={item.url} showStubOnError={true} />
+              {/if}
+            </div>
+          {/snippet}
+        </Carousel>
+      </div>
+    {/if}
+
+    {#if duration}
+      <span class="grid-card-media__duration">{duration}</span>
+    {/if}
+  </ProportionalContainer>
+</div>
+
+{#if showSeekBar && hasPlayable}
+  <div class="seek-bar-section">
+    <div class="seek-bar-section__content">
+      <div class="seek-bar-section__bar" class:seek-bar-section__bar--hidden={!isCurrentPlayable}>
+        <SeekBar value={progress} on={{ seek: onSeek }} />
+      </div>
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or
+a `Carousel` of mixed image / video items. Seek-bar appears below the media when any item is
+playable; in a carousel it's hidden via `visibility: hidden` when the current slide is an
+image (preserves card height). Optional `duration` overlay renders bottom-right.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card--media--object-fit` | Object-fit forwarded to image / video | `contain` (per `objectFit` prop) |
+-->
+
+<style>.grid-card-media {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+.grid-card-media--contain {
+  --sc-kit--image--object-fit: contain;
+  --sc-kit--grid-card--media--object-fit: contain;
+}
+.grid-card-media--cover {
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--grid-card--media--object-fit: cover;
+}
+.grid-card-media__empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--sc-kit--color--bg--images);
+  --sc-kit--icon--size: 1.5rem;
+}
+.grid-card-media__carousel {
+  display: contents;
+  --sc-kit--carousel--button-color: light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
+  --sc-kit--carousel--text-color: var(--sc-kit--color--text--primary);
+  --sc-kit--carousel--navigation-button--size: 1.625rem;
+  --sc-kit--carousel--counts--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);
+  --sc-kit--carousel--counts--font-size: 0.75rem;
+  --sc-kit--carousel--counts--width: 3.75rem;
+}
+.grid-card-media__slide {
+  width: 100%;
+  height: 100%;
+  background-color: light-dark(#ffffff, #000000);
+}
+.grid-card-media__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);
+  z-index: 1;
+}
+
+.seek-bar-section__content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: var(--sc-kit--color--bg--panel);
+  padding: 1px 0.5rem;
+  border-radius: 0.125rem;
+}
+.seek-bar-section__bar {
+  width: 100%;
+}
+.seek-bar-section__bar--hidden {
+  visibility: hidden;
+}</style>

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

@@ -0,0 +1,30 @@
+import type { AspectRatio, ObjectFit } from './types';
+export type MediaItem = {
+    url: string;
+    playable?: boolean;
+};
+type Props = {
+    items: MediaItem[];
+    /** @default 'vertical' */
+    aspectRatio?: AspectRatio;
+    /** @default 'contain' */
+    objectFit?: ObjectFit;
+    /** @default true */
+    showSeekBar?: boolean;
+    /** Optional duration badge rendered as an overlay at the bottom-right of the media. */
+    duration?: string;
+};
+/**
+ * Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or
+ * a `Carousel` of mixed image / video items. Seek-bar appears below the media when any item is
+ * playable; in a carousel it's hidden via `visibility: hidden` when the current slide is an
+ * image (preserves card height). Optional `duration` overlay renders bottom-right.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card--media--object-fit` | Object-fit forwarded to image / video | `contain` (per `objectFit` prop) |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,111 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconCheckboxChecked from './icon-checkbox-checked.svg?raw';
+import IconCheckboxUnchecked from './icon-checkbox-unchecked.svg?raw';
+const { selected, children, on } = $props();
+const interactive = $derived(!!on?.activate);
+const onCheckboxClick = (e) => {
+    e.stopPropagation();
+    on?.select?.(!selected);
+};
+const onCardKeydown = (e) => {
+    if (!on?.activate) {
+        return;
+    }
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        on.activate();
+    }
+};
+</script>
+
+<div class="grid-card-container">
+  <!-- role="button" + onkeydown for Enter/Space make this interactive; the conditional confuses the lint, so we suppress. -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    class="grid-card"
+    class:grid-card--interactive={interactive}
+    role={interactive ? 'button' : undefined}
+    tabindex={interactive ? 0 : undefined}
+    onclick={() => on?.activate?.()}
+    onkeydown={onCardKeydown}>
+    {@render children()}
+    {#if selected || on?.select}
+      <button type="button" class="grid-card__checkbox" class:grid-card__checkbox--checked={selected} onclick={onCheckboxClick} aria-pressed={selected}>
+        <Icon src={selected ? IconCheckboxChecked : IconCheckboxUnchecked} />
+      </button>
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+Media-first grid card primitive for catalog / browser views (ads, products, content lists,
+short-videos). Composable: media in the top slot via `<GridCardMedia>`, key-value rows via
+`<GridCardFields>` containing `<GridCardField>` / `<GridCardTextField>` / `<GridCardIdField>` /
+`<GridCardBadgeField>` / `<GridCardProgressField>` / `<GridCardActionsField>`.
+
+Selection: pass `selected` (and `on.select`) to render a checkbox at top-left. Whole-card
+activation: pass `on.activate` to make the root a keyboard-accessible button (Enter / Space).
+Inner interactive elements stop event propagation so they don't double-fire activation.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card--background` | Card background | `var(--sc-kit--color--bg--element)` |
+| `--sc-kit--grid-card--padding` | Inner padding (container-query responsive) | `clamp(4px, 8cqi, 8px)` |
+| `--sc-kit--grid-card--gap` | Gap between media and fields | `4px` |
+| `--sc-kit--grid-card--border-radius` | Card border radius | `4px` |
+| `--sc-kit--grid-card--checkbox--color` | Checkbox icon color (unchecked) | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--grid-card--checkbox--color--checked` | Checkbox icon color (checked) | `var(--sc-kit--color--accent)` |
+-->
+
+<style>.grid-card-container {
+  container-type: inline-size;
+  width: 100%;
+  height: 100%;
+}
+
+.grid-card {
+  --_grid-card--background: var(--sc-kit--grid-card--background, var(--sc-kit--color--bg--element));
+  --_grid-card--padding: var(--sc-kit--grid-card--padding, clamp(0.25rem, 3.6cqi, 0.5rem));
+  --_grid-card--gap: var(--sc-kit--grid-card--gap, 0.25rem);
+  --_grid-card--border-radius: var(--sc-kit--grid-card--border-radius, 0.25rem);
+  --_grid-card--checkbox-color: var(--sc-kit--grid-card--checkbox--color, var(--sc-kit--color--text--muted));
+  --_grid-card--checkbox-color-checked: var(--sc-kit--grid-card--checkbox--color--checked, var(--sc-kit--color--accent));
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--_grid-card--border-radius);
+  background: var(--_grid-card--background);
+  padding: var(--_grid-card--padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_grid-card--gap);
+  transition: box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.grid-card--interactive {
+  cursor: pointer;
+}
+.grid-card--interactive:hover {
+  box-shadow: 0 4px 12px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
+}
+.grid-card--interactive:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.grid-card__checkbox {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 10;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  line-height: 0;
+  --sc-kit--icon--size: 1.5rem;
+  --sc-kit--icon--color: var(--_grid-card--checkbox-color);
+}
+.grid-card__checkbox--checked {
+  --sc-kit--icon--color: var(--_grid-card--checkbox-color-checked);
+}</style>

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    selected?: boolean;
+    children: Snippet;
+    on?: {
+        /** Fires on checkbox click. Render the checkbox by either setting `selected` or wiring `select`. */
+        select?: (value: boolean) => void;
+        /**
+         * Fires on whole-card activation: click on the card surface OR Enter/Space when focused.
+         * When set, the card root becomes `role="button"` + `tabindex="0"` for keyboard a11y.
+         * Inner interactive elements (checkbox, buttons inside fields) stopPropagation so they
+         * don't double-fire `activate`.
+         */
+        activate?: () => void;
+    };
+};
+/**
+ * Media-first grid card primitive for catalog / browser views (ads, products, content lists,
+ * short-videos). Composable: media in the top slot via `<GridCardMedia>`, key-value rows via
+ * `<GridCardFields>` containing `<GridCardField>` / `<GridCardTextField>` / `<GridCardIdField>` /
+ * `<GridCardBadgeField>` / `<GridCardProgressField>` / `<GridCardActionsField>`.
+ *
+ * Selection: pass `selected` (and `on.select`) to render a checkbox at top-left. Whole-card
+ * activation: pass `on.activate` to make the root a keyboard-accessible button (Enter / Space).
+ * Inner interactive elements stop event propagation so they don't double-fire activation.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card--background` | Card background | `var(--sc-kit--color--bg--element)` |
+ * | `--sc-kit--grid-card--padding` | Inner padding (container-query responsive) | `clamp(4px, 8cqi, 8px)` |
+ * | `--sc-kit--grid-card--gap` | Gap between media and fields | `4px` |
+ * | `--sc-kit--grid-card--border-radius` | Card border radius | `4px` |
+ * | `--sc-kit--grid-card--checkbox--color` | Checkbox icon color (unchecked) | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--grid-card--checkbox--color--checked` | Checkbox icon color (checked) | `var(--sc-kit--color--accent)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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;