@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/empty-state/zero-content.svg

@@ -0,0 +1,133 @@
+<svg width="213" height="197" viewBox="0 0 213 197" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_f_8327_30936)">
+    <path d="M74.6311 49.0151C117.493 -2.21236 160.373 5.47853 182.702 28.5481C235.444 83.04 173.091 87.0687 100.179 113.218C27.2673 139.367 21.0543 113.049 74.6311 49.0151Z" fill="url(#paint0_linear_8327_30936)" fill-opacity="0.5"/>
+  </g>
+  <g filter="url(#filter1_f_8327_30936)">
+    <path d="M60.8692 81.3816C118.142 47.0126 156.14 68.3202 169.684 97.4293C201.676 166.187 141.442 149.577 63.9868 150.41C-13.468 151.244 -10.7212 124.343 60.8692 81.3816Z" fill="url(#paint1_linear_8327_30936)" fill-opacity="0.75"/>
+  </g>
+  <g filter="url(#filter2_f_8327_30936)">
+    <path d="M140.118 89.0503C146.655 93.0803 146.655 102.584 140.118 106.614L113.113 123.263C106.239 127.501 97.382 122.556 97.382 114.481L97.382 81.183C97.382 73.1083 106.239 68.1637 113.113 72.4011L140.118 89.0503Z" fill="url(#paint2_linear_8327_30936)" fill-opacity="0.9"/>
+  </g>
+  <path d="M84.9187 50.1377C85.0816 45.4011 90.2426 42.5195 94.3601 44.8662L94.5593 44.9844L144.826 75.9736C148.708 78.3672 148.829 83.9107 145.189 86.501L144.826 86.7422L94.5593 117.731C90.3453 120.329 84.9148 117.298 84.9148 112.348V50.3682L84.9187 50.1377Z" fill="url(#paint3_linear_8327_30936)" stroke="url(#paint4_linear_8327_30936)" stroke-width="0.843341"/>
+  <foreignObject x="67.7778" y="36.6347" width="92.4288" height="109.811"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(4.9px);clip-path:url(#bgblur_0_8327_30936_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter3_dddd_8327_30936)" data-figma-bg-blur-radius="9.79302">
+  <path d="M148.404 58.8732C151.084 60.5191 151.084 64.4138 148.404 66.0596L129.165 77.8748C126.355 79.6002 122.741 77.5787 122.741 74.2816L122.741 50.6513C122.741 47.3542 126.355 45.3326 129.165 47.0581L148.404 58.8732Z" fill="#DCE7FB" fill-opacity="0.25"/>
+  <path d="M123.29 50.3848C123.471 47.7568 126.316 46.1658 128.651 47.3867L128.882 47.5186L148.121 59.333C150.385 60.7233 150.455 63.9536 148.333 65.459L148.121 65.5996L128.882 77.415C126.432 78.9192 123.281 77.1561 123.281 74.2812V50.6514L123.29 50.3848Z" stroke="url(#paint5_linear_8327_30936)" stroke-width="1.0798"/>
+</g>
+  <g filter="url(#filter4_f_8327_30936)">
+    <ellipse cx="85.493" cy="106.879" rx="9.62414" ry="14.6144" transform="rotate(-22.4427 85.493 106.879)" fill="url(#paint6_linear_8327_30936)"/>
+  </g>
+  <foreignObject x="0.297718" y="66.2781" width="96.6158" height="130.409"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(1.06px);clip-path:url(#bgblur_1_8327_30936_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter5_dddd_8327_30936)" data-figma-bg-blur-radius="2.12925">
+  <rect x="55.2612" y="70.8584" width="36.3086" height="57.8882" rx="4.2167" fill="#DCE7FB" fill-opacity="0.5"/>
+  <rect x="55.8011" y="71.3983" width="35.2288" height="56.8084" rx="3.6768" stroke="url(#paint7_linear_8327_30936)" stroke-width="1.0798"/>
+</g>
+  <circle cx="73.4147" cy="121.211" r="3.0828" stroke="url(#paint8_linear_8327_30936)" stroke-width="1.0798"/>
+  <defs>
+    <filter id="filter0_f_8327_30936" x="29.2403" y="0.72869" width="183.079" height="132.487" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="4.99112" result="effect1_foregroundBlur_8327_30936"/>
+    </filter>
+    <filter id="filter1_f_8327_30936" x="0.148213" y="57.2841" width="184.686" height="100.705" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="3.19387" result="effect1_foregroundBlur_8327_30936"/>
+    </filter>
+    <filter id="filter2_f_8327_30936" x="84.7318" y="58.1995" width="72.9393" height="79.2651" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feGaussianBlur stdDeviation="6.32505" result="effect1_foregroundBlur_8327_30936"/>
+    </filter>
+    <filter id="filter3_dddd_8327_30936" x="67.7778" y="36.6347" width="92.4288" height="109.811" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-2.29015" dy="3.05353"/>
+      <feGaussianBlur stdDeviation="3.81691"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-8.3972" dy="11.4507"/>
+      <feGaussianBlur stdDeviation="6.87044"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.09 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_8327_30936" result="effect2_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-18.3212" dy="25.955"/>
+      <feGaussianBlur stdDeviation="9.54228"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.05 0"/>
+      <feBlend mode="normal" in2="effect2_dropShadow_8327_30936" result="effect3_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-32.8254" dy="45.8029"/>
+      <feGaussianBlur stdDeviation="11.069"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.01 0"/>
+      <feBlend mode="normal" in2="effect3_dropShadow_8327_30936" result="effect4_dropShadow_8327_30936"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_8327_30936" result="shape"/>
+    </filter>
+    <clipPath id="bgblur_0_8327_30936_clip_path" transform="translate(-67.7778 -36.6347)"><path d="M148.404 58.8732C151.084 60.5191 151.084 64.4138 148.404 66.0596L129.165 77.8748C126.355 79.6002 122.741 77.5787 122.741 74.2816L122.741 50.6513C122.741 47.3542 126.355 45.3326 129.165 47.0581L148.404 58.8732Z"/>
+    </clipPath><filter id="filter4_f_8327_30936" x="70.7748" y="88.6612" width="29.4365" height="36.4363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="2.10835" result="effect1_foregroundBlur_8327_30936"/>
+  </filter>
+    <filter id="filter5_dddd_8327_30936" x="0.297718" y="66.2781" width="96.6158" height="130.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-2.29015" dy="3.05353"/>
+      <feGaussianBlur stdDeviation="3.81691"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-8.3972" dy="11.4507"/>
+      <feGaussianBlur stdDeviation="6.87044"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.09 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_8327_30936" result="effect2_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-18.3212" dy="25.955"/>
+      <feGaussianBlur stdDeviation="9.54228"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.05 0"/>
+      <feBlend mode="normal" in2="effect2_dropShadow_8327_30936" result="effect3_dropShadow_8327_30936"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="-32.8254" dy="45.8029"/>
+      <feGaussianBlur stdDeviation="11.069"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.729412 0 0 0 0 0.815686 0 0 0 0 0.968627 0 0 0 0.01 0"/>
+      <feBlend mode="normal" in2="effect3_dropShadow_8327_30936" result="effect4_dropShadow_8327_30936"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_8327_30936" result="shape"/>
+    </filter>
+    <clipPath id="bgblur_1_8327_30936_clip_path" transform="translate(-0.297718 -66.2781)"><rect x="55.2612" y="70.8584" width="36.3086" height="57.8882" rx="4.2167"/>
+    </clipPath><linearGradient id="paint0_linear_8327_30936" x1="155.973" y1="10.8812" x2="59.5441" y2="114.996" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#BAD0F7"/>
+    <stop offset="1" stop-color="#DCE7FB" stop-opacity="0"/>
+  </linearGradient>
+    <linearGradient id="paint1_linear_8327_30936" x1="186.81" y1="80.5815" x2="57.5354" y2="123.631" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="#FFEEF7"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_8327_30936" x1="117.054" y1="97.4931" x2="81.4409" y2="163.971" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#144AB0"/>
+      <stop offset="1" stop-color="#D8C8E9" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_8327_30936" x1="108.719" y1="43.2396" x2="100.434" y2="106.118" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8C8E9"/>
+      <stop offset="1" stop-color="#144AB0"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_8327_30936" x1="128.246" y1="103.743" x2="88.2045" y2="24.8984" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#144AB0"/>
+      <stop offset="0.622893" stop-color="white"/>
+      <stop offset="1" stop-color="#D8C8E9"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_8327_30936" x1="145.831" y1="93.0578" x2="124.467" y2="37.0598" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFDEF0"/>
+      <stop offset="0.622893" stop-color="white"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_8327_30936" x1="79.4919" y1="96.82" x2="84.3803" y2="116.085" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="#144AB0"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_8327_30936" x1="74.8255" y1="120.998" x2="47.824" y2="79.443" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8C8E9"/>
+      <stop offset="0.815" stop-color="white"/>
+    </linearGradient>
+    <linearGradient id="paint8_linear_8327_30936" x1="73.6542" y1="123.468" x2="71.5903" y2="116.875" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8C8E9"/>
+      <stop offset="0.622893" stop-color="white"/>
+    </linearGradient>
+  </defs>
+</svg>

package/dist/ui/file-uploader/cmp.file-row.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">import { StringHelper } from '../../core/utils';
+import { Icon } from '../icon';
+import { FileUploaderLocalization } from './file-uploader-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+import IconDocument from '@fluentui/svg-icons/icons/document_20_regular.svg?raw';
+const { file, removable = true, on } = $props();
+const localization = new FileUploaderLocalization();
+const isUploading = $derived(file.status === 'uploading' || file.status === 'queued');
+const isError = $derived(file.status === 'error');
+const percent = $derived(Math.max(0, Math.min(100, Math.round(file.progress * 100))));
+const sizeText = $derived(StringHelper.toFileSizeString(file.file.size));
+</script>
+
+<div class="file-row" class:file-row--uploading={isUploading} class:file-row--error={isError}>
+  <span class="file-row__icon" aria-hidden="true">
+    <Icon src={IconDocument} />
+  </span>
+
+  <div class="file-row__meta">
+    <div class="file-row__name">{file.file.name}</div>
+    {#if isUploading}
+      <div class="file-row__sub">{percent}% · {localization.uploadingHint}</div>
+    {:else if isError}
+      <div class="file-row__sub file-row__sub--error">{file.error ?? ''}</div>
+    {:else}
+      <div class="file-row__sub">{sizeText}</div>
+    {/if}
+  </div>
+
+  {#if isUploading}
+    <div class="file-row__bar" aria-hidden="true">
+      <span style:width="{percent}%"></span>
+    </div>
+  {:else if removable}
+    <button type="button" class="file-row__remove" aria-label={localization.removeAria(file.file.name)} onclick={() => on?.remove?.()}>
+      <Icon src={IconDismiss} />
+    </button>
+  {/if}
+</div>
+
+<!--
+@component
+Compact row representation of an `UploadingFile`. Three states driven by `file.status`:
+- **`queued` / `uploading`** — filename + percent subtitle + thin progress bar.
+- **`success`** — filename + size + optional × remove button.
+- **`error`** — filename + red error subtitle + optional × remove button.
+
+Use directly with `UploadMediaStore.files`, or wrap a plain `File` via `toUploadingFile()` from
+`@streamscloud/kit/core/files` for ad-hoc lists.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--file-row--background` | Row background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--file-row--border-color` | Row border | `var(--sc-kit--color--border)` |
+| `--sc-kit--file-row--border-radius` | Row radius | `var(--sc-kit--radius--md)` |
+| `--sc-kit--file-row--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
+| `--sc-kit--file-row--bar--fill` | Progress-bar fill | `var(--sc-kit--color--accent)` |
+-->
+
+<style>.file-row {
+  --_fr--background: var(--sc-kit--file-row--background, var(--sc-kit--color--bg--field-alt));
+  --_fr--border-color: var(--sc-kit--file-row--border-color, var(--sc-kit--color--border));
+  --_fr--border-radius: var(--sc-kit--file-row--border-radius, var(--sc-kit--radius--md));
+  --_fr--bar-background: var(--sc-kit--file-row--bar--background, var(--sc-kit--color--bg--active));
+  --_fr--bar-fill: var(--sc-kit--file-row--bar--fill, var(--sc-kit--color--accent));
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--sc-kit--space--3);
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--3);
+  background: var(--_fr--background);
+  border: 1px solid var(--_fr--border-color);
+  border-radius: var(--_fr--border-radius);
+}
+.file-row--uploading {
+  grid-template-rows: auto auto;
+  grid-template-columns: auto 1fr;
+  row-gap: var(--sc-kit--space--1);
+  column-gap: var(--sc-kit--space--3);
+}
+.file-row--error {
+  border-color: var(--sc-kit--color--danger);
+}
+.file-row__icon {
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  grid-row: 1;
+}
+.file-row__meta {
+  min-width: 0;
+  grid-row: 1;
+}
+.file-row__name {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--sc-kit--color--text--primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-row__sub {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  margin-top: 2px;
+}
+.file-row__sub--error {
+  color: var(--sc-kit--color--danger);
+}
+.file-row__remove {
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
+  flex-shrink: 0;
+  width: var(--sc-kit--space--6);
+  height: var(--sc-kit--space--6);
+  border-radius: var(--sc-kit--radius--sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  grid-row: 1;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.file-row__remove:hover {
+  background: var(--sc-kit--color--bg--hover);
+  --sc-kit--icon--color: var(--sc-kit--color--text--primary);
+}
+.file-row__bar {
+  height: 4px;
+  background: var(--_fr--bar-background);
+  border-radius: var(--sc-kit--radius--pill);
+  overflow: hidden;
+  grid-row: 2;
+  grid-column: 1/-1;
+}
+.file-row__bar > span {
+  display: block;
+  height: 100%;
+  background: var(--_fr--bar-fill);
+  border-radius: var(--sc-kit--radius--pill);
+  transition: width var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}</style>

package/dist/ui/file-uploader/cmp.file-row.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { UploadingFile } from '../../core/files';
+type Props = {
+    /** Canonical file shape produced by `UploadMediaStore` (or via `toUploadingFile()` for ad-hoc usage). */
+    file: UploadingFile;
+    /** Show the trailing × remove button. Auto-hidden while uploading. @default true */
+    removable?: boolean;
+    on?: {
+        remove?: () => void;
+    };
+};
+/**
+ * Compact row representation of an `UploadingFile`. Three states driven by `file.status`:
+ * - **`queued` / `uploading`** — filename + percent subtitle + thin progress bar.
+ * - **`success`** — filename + size + optional × remove button.
+ * - **`error`** — filename + red error subtitle + optional × remove button.
+ *
+ * Use directly with `UploadMediaStore.files`, or wrap a plain `File` via `toUploadingFile()` from
+ * `@streamscloud/kit/core/files` for ad-hoc lists.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--file-row--background` | Row background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--file-row--border-color` | Row border | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--file-row--border-radius` | Row radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--file-row--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
+ * | `--sc-kit--file-row--bar--fill` | Progress-bar fill | `var(--sc-kit--color--accent)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/file-uploader/cmp.file-upload-progress.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">import { StringHelper } from '../../core/utils';
+import { fileTypeColor, fileTypeFromName } from './file-type-colors';
+const { file } = $props();
+const ext = $derived(fileTypeFromName(file.file.name).toUpperCase());
+const accent = $derived(fileTypeColor(fileTypeFromName(file.file.name)));
+const percent = $derived(Math.max(0, Math.min(100, Math.round(file.progress * 100))));
+const sizeText = $derived(file.status === 'success'
+    ? StringHelper.toFileSizeString(file.file.size)
+    : `${StringHelper.toFileSizeString(file.file.size * file.progress)} of ${StringHelper.toFileSizeString(file.file.size)}`);
+const isError = $derived(file.status === 'error');
+</script>
+
+<div class="file-upload-progress" class:file-upload-progress--error={isError} style:--_fup--accent-default={accent}>
+  <span class="file-upload-progress__stamp" aria-hidden="true">
+    <span class="file-upload-progress__ext">{ext}</span>
+  </span>
+  <div class="file-upload-progress__body">
+    <div class="file-upload-progress__head">
+      <div class="file-upload-progress__name">{file.file.name}</div>
+      <div class="file-upload-progress__pct">{percent}%</div>
+    </div>
+    <div class="file-upload-progress__bar" aria-hidden="true">
+      <span style:width="{percent}%"></span>
+    </div>
+    {#if isError}
+      <div class="file-upload-progress__sub file-upload-progress__sub--error">{file.error ?? ''}</div>
+    {:else}
+      <div class="file-upload-progress__sub">{sizeText}</div>
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+Rich progress card for a single file currently being uploaded. Shows a colored extension stamp
+(auto-colored from the filename's extension via the `file-type-colors` palette), filename,
+percent, thick progress bar, and a `'X of Y'` size sub-line.
+
+Override the auto-derived accent via the `--sc-kit--file-upload-progress--accent` CSS variable
+on the host (e.g. to force a brand color regardless of extension).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--file-upload-progress--accent` | Stamp + bar-fill color (override auto-derived) | per file extension |
+| `--sc-kit--file-upload-progress--background` | Card background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--file-upload-progress--border-color` | Card border | `var(--sc-kit--color--border)` |
+| `--sc-kit--file-upload-progress--border-radius` | Card radius | `var(--sc-kit--radius--md)` |
+| `--sc-kit--file-upload-progress--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
+-->
+
+<style>.file-upload-progress {
+  --_fup--background: var(--sc-kit--file-upload-progress--background, var(--sc-kit--color--bg--panel));
+  --_fup--border-color: var(--sc-kit--file-upload-progress--border-color, var(--sc-kit--color--border));
+  --_fup--border-radius: var(--sc-kit--file-upload-progress--border-radius, var(--sc-kit--radius--md));
+  --_fup--bar-background: var(--sc-kit--file-upload-progress--bar--background, var(--sc-kit--color--bg--active));
+  --_fup--accent: var(--sc-kit--file-upload-progress--accent, var(--_fup--accent-default, var(--sc-kit--color--accent)));
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sc-kit--space--3);
+  padding: var(--sc-kit--space--3) var(--sc-kit--space--4);
+  background: var(--_fup--background);
+  border: 1px solid var(--_fup--border-color);
+  border-radius: var(--_fup--border-radius);
+}
+.file-upload-progress--error {
+  border-color: var(--sc-kit--color--danger);
+}
+.file-upload-progress__stamp {
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.75rem;
+  border-radius: var(--sc-kit--radius--md);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 0.25rem;
+  background: var(--_fup--accent);
+  color: #fff;
+  font-size: 0.5313rem;
+  font-weight: var(--sc-kit--font-weight--bold);
+  letter-spacing: var(--sc-kit--letter-spacing--wide);
+  position: relative;
+}
+.file-upload-progress__stamp::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: rgba(255, 255, 255, 0.35);
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
+  border-top-right-radius: var(--sc-kit--radius--md);
+}
+.file-upload-progress__body {
+  flex: 1;
+  min-width: 0;
+}
+.file-upload-progress__head {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+}
+.file-upload-progress__name {
+  flex: 1;
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--sc-kit--color--text--primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-upload-progress__pct {
+  font-family: var(--sc-kit--font--mono);
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  font-variant-numeric: tabular-nums;
+}
+.file-upload-progress__bar {
+  height: 0.375rem;
+  background: var(--_fup--bar-background);
+  border-radius: var(--sc-kit--radius--pill);
+  overflow: hidden;
+  margin-top: var(--sc-kit--space--2);
+}
+.file-upload-progress__bar > span {
+  display: block;
+  height: 100%;
+  background: var(--_fup--accent);
+  border-radius: var(--sc-kit--radius--pill);
+  transition: width var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.file-upload-progress__sub {
+  font-size: var(--sc-kit--font-size--sm);
+  color: var(--sc-kit--color--text--muted);
+  margin-top: var(--sc-kit--space--1);
+}
+.file-upload-progress__sub--error {
+  color: var(--sc-kit--color--danger);
+}</style>

package/dist/ui/file-uploader/cmp.file-upload-progress.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { UploadingFile } from '../../core/files';
+type Props = {
+    /** Canonical file shape produced by `UploadMediaStore` (or via `toUploadingFile()` for ad-hoc usage). */
+    file: UploadingFile;
+};
+/**
+ * Rich progress card for a single file currently being uploaded. Shows a colored extension stamp
+ * (auto-colored from the filename's extension via the `file-type-colors` palette), filename,
+ * percent, thick progress bar, and a `'X of Y'` size sub-line.
+ *
+ * Override the auto-derived accent via the `--sc-kit--file-upload-progress--accent` CSS variable
+ * on the host (e.g. to force a brand color regardless of extension).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--file-upload-progress--accent` | Stamp + bar-fill color (override auto-derived) | per file extension |
+ * | `--sc-kit--file-upload-progress--background` | Card background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--file-upload-progress--border-color` | Card border | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--file-upload-progress--border-radius` | Card radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--file-upload-progress--bar--background` | Progress-bar track | `var(--sc-kit--color--bg--active)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;