@streamscloud/kit 0.76.5 → 0.78.0

package/dist/ui/table/cmp.table.svelte

@@ -1,16 +1,11 @@
-<script lang="ts" generics="T extends {id: string}">import { DynamicComponent } from '../dynamic-component';
-import { EmptyState } from '../empty-state';
-import { TableCell, TableHideableCell } from './table-cells';
-import { TableLocalization } from './table-localization';
-import { columnWidthStyle, createTableView } from './table-view.svelte';
-let { model, showAlternativeView = false, noItemsPlaceholderEnabled, noItemsPlaceholderDelay, grouping, on, alternativeView, customNoItemsPlaceholder } = $props();
-const localization = new TableLocalization();
-const view = createTableView(() => model, () => on, () => noItemsPlaceholderEnabled, () => noItemsPlaceholderDelay);
+<script lang="ts" generics="T extends {id: string}">import { default as TableCore } from './table-core.svelte';
+let { model, grouping, ...shared } = $props();
+const itemRow = (item, index) => ({ kind: 'item', key: item.id, item, index });
 const displayRows = $derived.by(() => {
     const items = model.items;
     const grp = grouping;
     if (!grp) {
-        return items.map((item, index) => ({ kind: 'item', item, index }));
+        return items.map(itemRow);
     }
     const keys = items.map((item) => grp.key(item));
     const out = [];
@@ -18,7 +13,7 @@ const displayRows = $derived.by(() => {
     while (i < items.length) {
         const key = keys[i];
         if (key === null) {
-            out.push({ kind: 'item', item: items[i], index: i });
+            out.push(itemRow(items[i], i));
             i += 1;
             continue;
         }
@@ -28,98 +23,15 @@ const displayRows = $derived.by(() => {
         }
         out.push({ kind: 'group', key, label: grp.label ? grp.label(key, items[i]) : key, count: j - i });
         for (let k = i; k < j; k += 1) {
-            out.push({ kind: 'item', item: items[k], index: k });
+            out.push(itemRow(items[k], k));
         }
         i = j;
     }
     return out;
 });
-const visibleColspan = $derived(model.columns.filter((column) => !column.hidden).length);
 </script>
 
-{#snippet noItemsContent()}
-  {#if customNoItemsPlaceholder}
-    {@render customNoItemsPlaceholder()}
-  {:else}
-    <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
-  {/if}
-{/snippet}
-
-<div
-  class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
-  class:table-container--zebra={model.styles?.zebra === true}>
-  {#if alternativeView && showAlternativeView}
-    {#if view.showNoItemsPlaceholder}
-      <div class="alternative-view__placeholder">{@render noItemsContent()}</div>
-    {:else}
-      {@render alternativeView()}
-    {/if}
-  {:else}
-    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true}>
-      <thead class="table__head">
-        <tr>
-          {#each model.columns as column (column)}
-            <TableHideableCell column={column}>
-              <th class="table__th" class:table__th--centered={column.centered} style={columnWidthStyle(column)} title={column.title}>
-                <DynamicComponent model={column.headerView} />
-              </th>
-            </TableHideableCell>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#if view.showNoItemsPlaceholder}
-          <tr class="table__tr table__tr--placeholder">
-            <td colspan={visibleColspan}>
-              <div class="table__placeholder">{@render noItemsContent()}</div>
-            </td>
-          </tr>
-        {:else}
-          {#each displayRows as row (row.kind === 'group' ? 'g:' + row.key : 'i:' + row.item.id)}
-            {#if row.kind === 'group'}
-              <tr>
-                <td class="table__group-header" colspan={visibleColspan}>
-                  {#if grouping?.header}
-                    {@render grouping.header({ key: row.key, label: row.label, count: row.count })}
-                  {:else}
-                    {row.label}
-                  {/if}
-                </td>
-              </tr>
-            {:else}
-              {@const item = row.item}
-              {@const itemIndex = row.index}
-              {@const isSelected = model.selection.has(item.id)}
-              {@const isHighlighted = model.highlightedItemIds.includes(item.id)}
-              {@const flushBottom = model.styles?.variant === 'card' && itemIndex === model.items.length - 1}
-              {@const zebra = model.styles?.zebra === true && itemIndex % 2 === 1 && !isSelected && !isHighlighted}
-              <tr
-                class="table__tr"
-                id={item.id}
-                class:table__tr--selected={isSelected}
-                class:table__tr--highlighted={isHighlighted}
-                class:table__tr--zebra={zebra}>
-                {#each model.columns as column (column)}
-                  <TableHideableCell column={column}>
-                    <td
-                      class="table__td"
-                      class:table__td--centered={column.centered}
-                      class:table__td--clickable={!!column.onClick}
-                      class:table__td--flush={flushBottom}
-                      style={columnWidthStyle(column)}
-                      onclick={() => column.onClick && column.onClick(item)}>
-                      <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
-                    </td>
-                  </TableHideableCell>
-                {/each}
-              </tr>
-            {/if}
-          {/each}
-        {/if}
-      </tbody>
-    </table>
-  {/if}
-</div>
+<TableCore {...shared} model={model} rows={displayRows} groupHeader={grouping?.header} />
 
 <!--
 @component
@@ -127,186 +39,33 @@ Data table with sorting, selection, column visibility management, optional consu
 (`grouping`), and group actions. For drag-and-drop row reordering use `DraggableTable` instead (this static
 variant ships no dnd code).
 
-### TableStyles (via `model.styles`)
-| Field | Type | Effect |
-|---|---|---|
-| `size` | `'sm' \| 'md'` | Row height + cell padding + font-size preset (default `'md'`) |
-| `variant` | `'plain' \| 'card'` | `'card'` wraps the table in a bordered rounded panel (default `'plain'`) |
-| `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
-| `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
-| `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
-
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
-| `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+| `--sc-kit--table--row--height` | Row height | per size (36 / 44 px) |
+| `--sc-kit--table--cell--padding-inline` | Cell inline padding | per size (`--space--3` / `--space--4`) |
 | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
-| `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--table--cell--padding-block` | Cell block padding | `0` |
+| `--sc-kit--table--cell--vertical-align` | Cell content alignment — `top` keeps inputs aligned when one cell grows | `middle` |
+| `--sc-kit--table--head--height` | Header row height | per size (32 / 40 px) |
+| `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt`; with a `toolbar`, the card / panel background |
+| `--sc-kit--table--toolbar--background-color` | Toolbar band background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--table--toolbar--padding-block` | Toolbar band block padding — `0` hands the band to the toolbar content | `--sc-kit--space--3` |
+| `--sc-kit--table--toolbar--padding-inline` | Toolbar band inline padding | the cell inline padding |
 | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--table--head--font-size` | Header font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--table--head--font-weight` | Header font weight | `--sc-kit--font-weight--semibold` |
+| `--sc-kit--table--head--letter-spacing` | Header letter spacing | `normal` |
+| `--sc-kit--table--head--text-transform` | Header text transform | `none` |
 | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
 | `--sc-kit--table--row--color` | Row background | `transparent` |
 | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
 | `--sc-kit--table--zebra--color` | Zebra-row background (when `zebra` on) | `light-dark(#fcfcfd, #232323)` |
+| `--sc-kit--table--selected--color` | Selected row background | `--sc-kit--color--accent--softer` |
+| `--sc-kit--table--selected--color--hover` | Selected row background on hover | `--sc-kit--color--accent--soft` |
 | `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
 | `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
 | `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
 | `--sc-kit--table--card--padding-bottom` | Card variant bottom padding | `--sc-kit--space--4` |
+| `--sc-kit--table--min-width` | Table floor — past it the columns scroll horizontally inside the chrome, the toolbar stays. The column-floor substitute under `layout: 'fixed'` | `auto` |
 -->
-
-<style>.alternative-view__placeholder {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 80%;
-  user-select: none;
-}
-
-.table-container {
-  --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
-  --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
-  --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
-  --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
-  --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
-  --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
-  --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
-  --_table--row--color: var(--sc-kit--table--row--color, transparent);
-  --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
-  --_table--zebra--color: var(--sc-kit--table--zebra--color, light-dark(#fcfcfd, #232323));
-  --_table--selected--color: var(--sc-kit--table--selected--color, var(--sc-kit--color--accent--softer));
-  --_table--selected--color-hover: var(--sc-kit--table--selected--color--hover, var(--sc-kit--color--accent--soft));
-  --_table--card--background: var(--sc-kit--table--card--background, var(--sc-kit--color--bg--panel));
-  --_table--card--border-color: var(--sc-kit--table--card--border-color, var(--sc-kit--color--border));
-  --_table--card--border-radius: var(--sc-kit--table--card--border-radius, var(--sc-kit--radius--lg));
-  --_table--card--padding-bottom: var(--sc-kit--table--card--padding-bottom, var(--sc-kit--space--4));
-  display: flex;
-  overflow-x: auto;
-  height: 100%;
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
-  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
-}
-.table-container::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.table-container::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.table-container::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
-}
-@supports (scrollbar-color: transparent transparent) {
-  .table-container {
-    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
-    scrollbar-width: thin;
-  }
-}
-.table-container--md {
-  --_table--size-row-height: 2.75rem;
-  --_table--size-head-height: 2.5rem;
-  --_table--size-cell-font-size: var(--sc-kit--font-size--md);
-  --_table--size-cell-padding: var(--sc-kit--space--4);
-}
-.table-container--sm {
-  --_table--size-row-height: 2.25rem;
-  --_table--size-head-height: 2rem;
-  --_table--size-cell-font-size: var(--sc-kit--font-size--sm);
-  --_table--size-cell-padding: var(--sc-kit--space--3);
-}
-.table-container--card {
-  background: var(--_table--card--background);
-  border: 1px solid var(--_table--card--border-color);
-  border-radius: var(--_table--card--border-radius);
-  padding-bottom: var(--_table--card--padding-bottom);
-}
-
-.table {
-  width: 100%;
-  table-layout: auto;
-  height: fit-content;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-.table__head {
-  height: var(--_table--head--height);
-  max-height: var(--_table--head--height);
-  background: var(--_table--head--background-color);
-  color: var(--_table--head--color);
-  font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
-  font-weight: var(--sc-kit--font-weight--semibold);
-}
-.table__th {
-  padding: 0 var(--_table--cell--horizontal-padding);
-  text-align: left;
-  vertical-align: middle;
-  border-bottom: 1px solid var(--_table--border-color);
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.table__th :global([contenteditable]) {
-  user-select: text;
-}
-.table__th--centered {
-  text-align: center;
-  --_table-header--justify-content: center;
-}
-.table__tr {
-  height: var(--_table--row--height);
-  max-height: var(--_table--row--height);
-  background: var(--_table--row--color);
-}
-.table__tr--zebra {
-  background: var(--_table--zebra--color);
-}
-.table__tr:hover, .table__tr--highlighted {
-  background: var(--_table--row--alternative-color);
-  --_table--move-row-cell-opacity: 1;
-}
-.table__tr--selected {
-  background: var(--_table--selected--color);
-}
-.table__tr--selected:hover {
-  background: var(--_table--selected--color-hover);
-}
-.table__tr--placeholder {
-  background: var(--_table--row--color) !important;
-}
-.table__td {
-  padding: 0 var(--_table--cell--horizontal-padding);
-  border-bottom: 1px solid var(--_table--border-color);
-  font-size: var(--_table--cell--font-size);
-  color: var(--sc-kit--color--text--primary);
-  vertical-align: middle;
-}
-.table__td--centered {
-  text-align: center;
-}
-.table__td--clickable {
-  cursor: pointer;
-}
-.table__td--flush {
-  border-bottom: none;
-}
-.table__placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 80%;
-  user-select: none;
-}
-.table--sticky-header thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.table__group-header {
-  padding-block: var(--sc-kit--space--6) var(--sc-kit--space--2);
-  padding-inline: var(--_table--cell--horizontal-padding);
-  font-size: var(--sc-kit--font-size--sm);
-  font-weight: var(--sc-kit--font-weight--semibold);
-  color: var(--sc-kit--color--text--secondary);
-}</style>

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

@@ -6,12 +6,13 @@ declare function $$render<T extends {
     props: {
         model: TableModel<T>;
         showAlternativeView?: boolean;
-        /** Whether an empty list turns into the no-items placeholder at all — `false` pairs with your own loading / empty UI. Rows always win: the placeholder
-         * is never rendered over a non-empty list. @default true */
-        noItemsPlaceholderEnabled?: boolean;
-        /** Anti-flicker delay in ms before the placeholder appears, once `noItemsPlaceholderEnabled`. `0` shows it as soon as the list is empty. @default 0 */
+        /** Anti-flicker delay in ms before the placeholder appears. `0` shows it as soon as the list is empty. @default 0 */
         noItemsPlaceholderDelay?: number;
-        /** Group consecutive (already-sorted) rows under section headers. `key` returns a group id per item (`null` = ungrouped); a header row renders wherever the key changes between neighbours. */
+        /**
+         * Group rows under section headers, for read-only lists. `key` returns a group id per item (`null` = ungrouped). Items must be sorted so each group
+         * forms one contiguous run — a group id that reappears after another group is invalid input. A `move-row` column is not supported with grouping: it can
+         * move an item across a group boundary and break that rule.
+         */
         grouping?: {
             key: (item: T) => string | null;
             /** Header text — defaults to the group key. */
@@ -30,7 +31,16 @@ declare function $$render<T extends {
             itemsReordered?: (e: T[]) => void;
         };
         alternativeView?: Snippet;
-        customNoItemsPlaceholder?: Snippet;
+        /**
+         * What an empty list shows: the built-in empty state when omitted, your own content as a snippet, nothing with `false` — pairs with your own loading /
+         * empty UI. Rows always win: the placeholder is never rendered over a non-empty list.
+         */
+        noItemsPlaceholder?: Snippet | false;
+        /**
+         * Band inside the table chrome above the column header row — a title and actions. With a toolbar the column header always sticks under it and takes
+         * the row background; an empty list drops the column header, leaving the toolbar and the no-items placeholder.
+         */
+        toolbar?: Snippet;
     };
     exports: {};
     bindings: "";
@@ -62,31 +72,35 @@ interface $$IsomorphicComponent {
  * (`grouping`), and group actions. For drag-and-drop row reordering use `DraggableTable` instead (this static
  * variant ships no dnd code).
  *
- * ### TableStyles (via `model.styles`)
- * | Field | Type | Effect |
- * |---|---|---|
- * | `size` | `'sm' \| 'md'` | Row height + cell padding + font-size preset (default `'md'`) |
- * | `variant` | `'plain' \| 'card'` | `'card'` wraps the table in a bordered rounded panel (default `'plain'`) |
- * | `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
- * | `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
- * | `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
- *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
- * | `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+ * | `--sc-kit--table--row--height` | Row height | per size (36 / 44 px) |
+ * | `--sc-kit--table--cell--padding-inline` | Cell inline padding | per size (`--space--3` / `--space--4`) |
  * | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
- * | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--table--cell--padding-block` | Cell block padding | `0` |
+ * | `--sc-kit--table--cell--vertical-align` | Cell content alignment — `top` keeps inputs aligned when one cell grows | `middle` |
+ * | `--sc-kit--table--head--height` | Header row height | per size (32 / 40 px) |
+ * | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt`; with a `toolbar`, the card / panel background |
+ * | `--sc-kit--table--toolbar--background-color` | Toolbar band background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--table--toolbar--padding-block` | Toolbar band block padding — `0` hands the band to the toolbar content | `--sc-kit--space--3` |
+ * | `--sc-kit--table--toolbar--padding-inline` | Toolbar band inline padding | the cell inline padding |
  * | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--table--head--font-size` | Header font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--table--head--font-weight` | Header font weight | `--sc-kit--font-weight--semibold` |
+ * | `--sc-kit--table--head--letter-spacing` | Header letter spacing | `normal` |
+ * | `--sc-kit--table--head--text-transform` | Header text transform | `none` |
  * | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
  * | `--sc-kit--table--row--color` | Row background | `transparent` |
  * | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
  * | `--sc-kit--table--zebra--color` | Zebra-row background (when `zebra` on) | `light-dark(#fcfcfd, #232323)` |
+ * | `--sc-kit--table--selected--color` | Selected row background | `--sc-kit--color--accent--softer` |
+ * | `--sc-kit--table--selected--color--hover` | Selected row background on hover | `--sc-kit--color--accent--soft` |
  * | `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
  * | `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
  * | `--sc-kit--table--card--padding-bottom` | Card variant bottom padding | `--sc-kit--space--4` |
+ * | `--sc-kit--table--min-width` | Table floor — past it the columns scroll horizontally inside the chrome, the toolbar stays. The column-floor substitute under `layout: 'fixed'` | `auto` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {

package/dist/ui/table/table-cells/table-checkbox-cell.svelte

@@ -20,5 +20,4 @@ const toggle = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--_table--cell--font-size);
 }</style>

package/dist/ui/table/table-cells/table-move-row-cell.svelte

@@ -21,8 +21,6 @@ const onDown = () => on?.down?.();
   gap: 0.125rem;
   justify-content: space-evenly;
   --sc-kit--icon--size: 1rem;
-  opacity: var(--_table--move-row-cell-opacity, 0);
-  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .move-row-cell button:disabled {
   --sc-kit--icon--color: var(--sc-kit--color--text--muted);

package/dist/ui/table/table-cells/table-text-cell.svelte

@@ -44,7 +44,6 @@ Text cell for table rows. Supports plain text, date, date-time, and HTML formats
   --_table-text-cell--clickable--color: var(--sc-kit--table-text-cell--clickable--color, var(--sc-kit--color--accent));
   display: flex;
   align-content: center;
-  font-size: var(--_table--cell--font-size);
 }
 .table-text-cell__single-line-no-trim {
   white-space: nowrap;

package/dist/ui/table/table-column-models.svelte.d.ts

@@ -24,6 +24,11 @@ export declare class ResolvedColumn<T extends WithId> {
     get id(): keyof T;
     get title(): string;
     get centered(): boolean;
+    get revealOnRowHover(): boolean;
+    get cellPadding(): {
+        inline?: string;
+        block?: string;
+    };
     get cssWidth(): string;
     get minCssWidth(): string;
     get hideable(): boolean;

package/dist/ui/table/table-column-models.svelte.js

@@ -31,6 +31,12 @@ export class ResolvedColumn {
     get centered() {
         return this.def.centered ?? false;
     }
+    get revealOnRowHover() {
+        return this.def.revealOnRowHover ?? this.def.type === 'move-row';
+    }
+    get cellPadding() {
+        return this.def.cellPadding ?? {};
+    }
     get cssWidth() {
         return this.def.cssWidth ?? '';
     }