@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/file-uploader/index.d.ts

@@ -0,0 +1,6 @@
+export { default as FileRow } from './cmp.file-row.svelte';
+export { default as FileUploader } from './cmp.file-uploader.svelte';
+export { default as FileUploadProgress } from './cmp.file-upload-progress.svelte';
+export { FileUploaderLocalization } from './file-uploader-localization';
+export { fileTypeColor, fileTypeColors, fileTypeFromName } from './file-type-colors';
+export { toUploadingFile } from './to-uploading-file';

package/dist/ui/file-uploader/index.js

@@ -0,0 +1,6 @@
+export { default as FileRow } from './cmp.file-row.svelte';
+export { default as FileUploader } from './cmp.file-uploader.svelte';
+export { default as FileUploadProgress } from './cmp.file-upload-progress.svelte';
+export { FileUploaderLocalization } from './file-uploader-localization';
+export { fileTypeColor, fileTypeColors, fileTypeFromName } from './file-type-colors';
+export { toUploadingFile } from './to-uploading-file';

package/dist/ui/file-uploader/to-uploading-file.d.ts

@@ -0,0 +1,7 @@
+import type { UploadingFile, UploadingFileStatus } from '../../core/files';
+/**
+ * Wrap a raw `File` into an `UploadingFile` for ad-hoc rendering with `FileRow` /
+ * `FileUploadProgress` (e.g. static read-only file lists, mocks in stories). Defaults to
+ * `status: 'success'` and `progress: 1` — i.e. "already complete, just show me".
+ */
+export declare const toUploadingFile: (file: File, status?: UploadingFileStatus) => UploadingFile;

package/dist/ui/file-uploader/to-uploading-file.js

@@ -0,0 +1,12 @@
+import { nanoid } from 'nanoid';
+/**
+ * Wrap a raw `File` into an `UploadingFile` for ad-hoc rendering with `FileRow` /
+ * `FileUploadProgress` (e.g. static read-only file lists, mocks in stories). Defaults to
+ * `status: 'success'` and `progress: 1` — i.e. "already complete, just show me".
+ */
+export const toUploadingFile = (file, status = 'success') => ({
+    id: nanoid(),
+    file,
+    progress: status === 'success' ? 1 : 0,
+    status
+});

package/dist/ui/form-field/cmp.form-field-validatable.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="T extends Record<string, unknown>, K extends keyof T & string">import { Validatable } from '../validatable';
+import { default as FormField } from './cmp.form-field.svelte';
+let { handler, name, label, required = false, validateOn, debounceMs, disableTouchedTracking, on, children } = $props();
+</script>
+
+<FormField label={label} required={required}>
+  <Validatable
+    handler={handler}
+    name={name}
+    validateOn={validateOn}
+    debounceMs={debounceMs}
+    disableTouchedTracking={disableTouchedTracking}
+    on={on}
+    children={children} />
+</FormField>
+
+<!--
+@component
+FormFieldValidatable — convenience wrapper that composes `<FormField>` and `<Validatable>` in a single component. Reduces the 3-level nesting (FormField → Validatable → Input) to a flat callsite when you need both a label and validation binding.
+
+### Usage
+```svelte
+<FormFieldValidatable {handler} name="email" label="Email" required>
+  {#snippet children(field)}
+    <Input {...field} type="email" placeholder="you@example.com" />
+  {/snippet}
+</FormFieldValidatable>
+```
+
+Identical visual output to:
+```svelte
+<FormField label="Email" required>
+  <Validatable {handler} name="email">
+    {#snippet children(field)}
+      <Input {...field} type="email" placeholder="you@example.com" />
+    {/snippet}
+  </Validatable>
+</FormField>
+```
+
+Both `FormField`'s label/required and `Validatable`'s no-jump error slot apply unchanged — this cmp adds no styling, just collapses the wiring.
+-->

package/dist/ui/form-field/cmp.form-field-validatable.svelte.d.ts

@@ -0,0 +1,75 @@
+import type { FormValidationHandler } from '../../core/validation';
+import { type FieldBinding, type ValidateOnEvent } from '../validatable';
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown>, K extends keyof T & string>(): {
+    props: {
+        /** Form validation handler instance. */
+        handler: FormValidationHandler<T>;
+        /** Field name in the form handler. */
+        name: K;
+        /** Label rendered above the input. String renders as text; Snippet allows extra content (e.g. tooltip icon) next to the text. */
+        label?: string | Snippet;
+        /** Appends a danger-colored `*` to the label. */
+        required?: boolean;
+        /** Which events trigger validation. Forwarded to `<Validatable>`. @default ['input', 'change', 'blur'] */
+        validateOn?: ValidateOnEvent[];
+        /** Debounce validator calls in ms. Forwarded to `<Validatable>`. @default 0 */
+        debounceMs?: number;
+        /** Show errors before the field has been touched. Forwarded to `<Validatable>`. @default false */
+        disableTouchedTracking?: boolean;
+        /** Extra consumer callbacks. Forwarded to `<Validatable>`. */
+        on?: {
+            input?: (value: T[K]) => void;
+            change?: (value: T[K]) => void;
+            blur?: () => void;
+        };
+        /** Receives the wired `FieldBinding<T[K]>` — spread or wire onto the kit input. */
+        children: Snippet<[FieldBinding<T[K]>]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, K extends keyof T & string> {
+    props(): ReturnType<typeof $$render<T, K>>['props'];
+    events(): ReturnType<typeof $$render<T, K>>['events'];
+    slots(): ReturnType<typeof $$render<T, K>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, K extends keyof T & string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, K>['props']>, ReturnType<__sveltets_Render<T, K>['events']>, ReturnType<__sveltets_Render<T, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, K>['exports']>;
+    <T extends Record<string, unknown>, K extends keyof T & string>(internal: unknown, props: ReturnType<__sveltets_Render<T, K>['props']> & {}): ReturnType<__sveltets_Render<T, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+/**
+ * FormFieldValidatable — convenience wrapper that composes `<FormField>` and `<Validatable>` in a single component. Reduces the 3-level nesting (FormField → Validatable → Input) to a flat callsite when you need both a label and validation binding.
+ *
+ * ### Usage
+ * ```svelte
+ * <FormFieldValidatable {handler} name="email" label="Email" required>
+ * {#snippet children(field)}
+ *   <Input {...field} type="email" placeholder="you@example.com" />
+ * {/snippet}
+ * </FormFieldValidatable>
+ * ```
+ *
+ * Identical visual output to:
+ * ```svelte
+ * <FormField label="Email" required>
+ * <Validatable {handler} name="email">
+ *   {#snippet children(field)}
+ *     <Input {...field} type="email" placeholder="you@example.com" />
+ *   {/snippet}
+ * </Validatable>
+ * </FormField>
+ * ```
+ *
+ * Both `FormField`'s label/required and `Validatable`'s no-jump error slot apply unchanged — this cmp adds no styling, just collapses the wiring.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends Record<string, unknown>, K extends keyof T & string> = InstanceType<typeof Cmp<T, K>>;
+export default Cmp;

package/dist/ui/form-field/cmp.form-field.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">let { label, required = false, children } = $props();
+const isLabelString = $derived(typeof label === 'string');
+export {};
+</script>
+
+<label class="form-field">
+  {#if label}
+    <span class="form-field__label">
+      {#if isLabelString}
+        {label}
+      {:else}
+        {@render (label as Snippet)()}
+      {/if}
+      {#if required}<span class="form-field__required" aria-hidden="true">*</span>{/if}
+    </span>
+  {/if}
+
+  {@render children()}
+</label>
+
+<!--
+@component
+FormField — pure layout shell: optional label (string or snippet) above an input slot. The root is a `<label>` element, so the first labelable form control inside is automatically associated via HTML's implicit-association rule — no id wiring required. Does NOT render errors or helper text; pair with `Validatable` for that.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--form-field--gap` | Vertical gap between label and the input slot | `0.375rem` (6px) |
+| `--sc-kit--form-field--label--color` | Label text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--form-field--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--form-field--label--font-weight` | Label font weight | `--sc-kit--font-weight--medium` |
+| `--sc-kit--form-field--required--color` | Required `*` color | `--sc-kit--color--danger` |
+-->
+
+<style>.form-field {
+  --_ff--gap: var(--sc-kit--form-field--gap, 0.375rem);
+  --_ff--label-color: var(--sc-kit--form-field--label--color, var(--sc-kit--color--text--primary));
+  --_ff--label-font-size: var(--sc-kit--form-field--label--font-size, var(--sc-kit--font-size--sm));
+  --_ff--label-font-weight: var(--sc-kit--form-field--label--font-weight, var(--sc-kit--font-weight--medium));
+  --_ff--required-color: var(--sc-kit--form-field--required--color, var(--sc-kit--color--danger));
+  display: flex;
+  flex-direction: column;
+  gap: var(--_ff--gap);
+}
+.form-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--_ff--label-color);
+  font-size: var(--_ff--label-font-size);
+  font-weight: var(--_ff--label-font-weight);
+}
+.form-field__required {
+  color: var(--_ff--required-color);
+}</style>

package/dist/ui/form-field/cmp.form-field.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Label rendered above the input. String renders as text; Snippet allows extra content (e.g. tooltip icon) next to the text. */
+    label?: string | Snippet;
+    /** Appends a danger-colored `*` to the label. Purely visual — does not enforce anything. */
+    required?: boolean;
+    /** Input slot. The wrapping `<label>` implicitly associates with the first labelable control inside (HTML standard), so no id wiring is needed. */
+    children: Snippet;
+};
+/**
+ * FormField — pure layout shell: optional label (string or snippet) above an input slot. The root is a `<label>` element, so the first labelable form control inside is automatically associated via HTML's implicit-association rule — no id wiring required. Does NOT render errors or helper text; pair with `Validatable` for that.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--form-field--gap` | Vertical gap between label and the input slot | `0.375rem` (6px) |
+ * | `--sc-kit--form-field--label--color` | Label text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--form-field--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--form-field--label--font-weight` | Label font weight | `--sc-kit--font-weight--medium` |
+ * | `--sc-kit--form-field--required--color` | Required `*` color | `--sc-kit--color--danger` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-field/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormField } from './cmp.form-field.svelte';
+export { default as FormFieldValidatable } from './cmp.form-field-validatable.svelte';

package/dist/ui/form-field/index.js

@@ -0,0 +1,2 @@
+export { default as FormField } from './cmp.form-field.svelte';
+export { default as FormFieldValidatable } from './cmp.form-field-validatable.svelte';

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;