@streamscloud/kit 0.76.5 → 0.78.0

package/dist/core/utils/color-helper.d.ts

@@ -14,4 +14,14 @@ export declare class ColorHelper {
      * Check whether a color value fully hides what is behind it (valid, 100% alpha).
      */
     static isOpaque(value: string | null | undefined): boolean;
+    /**
+     * Mix `color` towards `target` by `amount` (`0` = `color`, `1` = `target`) through the LAB color space — the same result as colord's `mix`.
+     * Returns a hex in the `normalizeHex` contract, or `''` when either input is invalid.
+     */
+    static mix(color: string | null | undefined, target: string | null | undefined, amount: number): string;
+    /**
+     * Strict hex check: `#RGB`, `#RRGGBB` or `#RRGGBBAA`, case-insensitive. Unlike `normalizeHex`, colour names and functional notations (`red`, `rgb(…)`)
+     * are rejected.
+     */
+    static isHex(value: string | null | undefined): boolean;
 }

package/dist/core/utils/color-helper.js

@@ -1,6 +1,8 @@
 import { colord, extend } from 'colord';
+import mixPlugin from 'colord/plugins/mix';
 import namesPlugin from 'colord/plugins/names';
-extend([namesPlugin]);
+extend([namesPlugin, mixPlugin]);
+const HEX_PATTERN = /^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
 export class ColorHelper {
     /**
      * Normalize a color value to a clean hex string.
@@ -43,4 +45,26 @@ export class ColorHelper {
         const parsed = colord(value);
         return parsed.isValid() && parsed.alpha() === 1;
     }
+    /**
+     * Mix `color` towards `target` by `amount` (`0` = `color`, `1` = `target`) through the LAB color space — the same result as colord's `mix`.
+     * Returns a hex in the `normalizeHex` contract, or `''` when either input is invalid.
+     */
+    static mix(color, target, amount) {
+        if (!color || !target || !Number.isFinite(amount)) {
+            return '';
+        }
+        const from = colord(color);
+        const to = colord(target);
+        if (!from.isValid() || !to.isValid()) {
+            return '';
+        }
+        return ColorHelper.normalizeHex(from.mix(to, amount).toHex());
+    }
+    /**
+     * Strict hex check: `#RGB`, `#RRGGBB` or `#RRGGBBAA`, case-insensitive. Unlike `normalizeHex`, colour names and functional notations (`red`, `rgb(…)`)
+     * are rejected.
+     */
+    static isHex(value) {
+        return !!value && HEX_PATTERN.test(value);
+    }
 }

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

@@ -1,6 +1,6 @@
 <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, hint, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace = false, on, children } = $props();
+let { handler, name, label, hint, required = false, validateOn, debounceMs, disableTouchedTracking, errorPlacement, on, children } = $props();
 </script>
 
 <FormField label={label} hint={hint} required={required}>
@@ -10,7 +10,7 @@ let { handler, name, label, hint, required = false, validateOn, debounceMs, disa
     validateOn={validateOn}
     debounceMs={debounceMs}
     disableTouchedTracking={disableTouchedTracking}
-    reserveErrorSpace={reserveErrorSpace}
+    errorPlacement={errorPlacement}
     on={on}
     children={children} />
 </FormField>
@@ -41,5 +41,5 @@ Identical visual output to:
 </FormField>
 ```
 
-Both `FormField`'s label/required and `Validatable`'s no-jump error slot apply unchanged — this cmp adds no styling, just collapses the wiring.
+Both `FormField`'s label/required and `Validatable`'s error slot (`errorPlacement`) apply unchanged — this cmp adds no styling, just collapses the wiring.
 -->

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

@@ -1,5 +1,5 @@
 import type { FormValidationHandler } from '../../core/validation';
-import { type FieldBinding, type ValidateOnEvent } from '../validatable';
+import { type ErrorPlacement, 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: {
@@ -19,8 +19,8 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         debounceMs?: number;
         /** Show errors before the field has been touched. Forwarded to `<Validatable>`. @default false */
         disableTouchedTracking?: boolean;
-        /** Reserve space below the field so a toggling error doesn't shift layout. Forwarded to `<Validatable>` (whose own default is `true`). @default false */
-        reserveErrorSpace?: boolean;
+        /** Where the error message sits. Forwarded to `<Validatable>`. @default 'overlay' */
+        errorPlacement?: ErrorPlacement;
         /** Extra consumer callbacks. Forwarded to `<Validatable>`. */
         on?: {
             input?: (value: T[K]) => void;
@@ -74,7 +74,7 @@ interface $$IsomorphicComponent {
  * </FormField>
  * ```
  *
- * Both `FormField`'s label/required and `Validatable`'s no-jump error slot apply unchanged — this cmp adds no styling, just collapses the wiring.
+ * Both `FormField`'s label/required and `Validatable`'s error slot (`errorPlacement`) 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>>;

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

@@ -1,334 +1,86 @@
-<script lang="ts" generics="T extends {id: string}">import { DynamicComponent } from '../dynamic-component';
-import { EmptyState } from '../empty-state';
-import { Icon } from '../icon';
-import { TableCell, TableHideableCell } from './table-cells';
-import { TableLocalization } from './table-localization';
-import { columnWidthStyle, createTableView } from './table-view.svelte';
-import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
-import { flip } from 'svelte/animate';
-import { dndzone } from 'svelte-dnd-action';
-let { model, showAlternativeView = false, noItemsPlaceholderEnabled, noItemsPlaceholderDelay, on, alternativeView, customNoItemsPlaceholder } = $props();
-const localization = new TableLocalization();
-const view = createTableView(() => model, () => on, () => noItemsPlaceholderEnabled, () => noItemsPlaceholderDelay);
-const flipDurationMs = 200;
-let tableRef = $state.raw(null);
+<script lang="ts" generics="T extends {id: string}">import { TABLE_ROW_FLIP_DURATION_MS, default as TableCore, styleTableRowClone } from './table-core.svelte';
+import { fromAction } from 'svelte/attachments';
+import { dragHandle, dragHandleZone } from 'svelte-dnd-action';
+let { model, on, ...shared } = $props();
 let dndItems = $state.raw(null);
-const rows = $derived(dndItems ?? model.items);
-const visibleColspan = $derived(model.columns.filter((column) => !column.hidden).length + 1);
+const orderedItems = $derived(dndItems ?? model.items);
+const rows = $derived(orderedItems.map((item, index) => ({ kind: 'item', key: item.id, item, index })));
+let body = null;
+const isSameOrder = (next) => next.length === model.items.length && next.every((item, index) => item.id === model.items[index].id);
 const handleConsider = (e) => {
     dndItems = e.detail.items;
 };
 const handleFinalize = (e) => {
-    model.items = e.detail.items;
-    on?.itemsReordered?.(e.detail.items);
+    const next = e.detail.items;
+    if (!isSameOrder(next)) {
+        model.items = next;
+        on?.itemsReordered?.(next);
+    }
     dndItems = null;
 };
-const startDrag = (e) => {
-    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
-    e.preventDefault();
-};
-const transformDraggedElement = (draggedRow) => {
-    if (!draggedRow) {
-        return;
-    }
-    const referenceRow = tableRef.querySelector('tbody tr:not([data-is-dnd-shadow-item-internal])') ?? tableRef.querySelector('tbody tr');
-    const referenceColumns = referenceRow?.querySelectorAll('td') ?? [];
-    const draggedColumns = draggedRow.querySelectorAll('td');
-    if (!referenceRow || referenceColumns.length !== draggedColumns.length) {
-        console.error('DraggableTable: dragged row column count does not match the reference row');
-        return;
+const transformDraggedElement = (clone, _data, rowIndex) => {
+    if (clone && body && rowIndex !== undefined) {
+        styleTableRowClone(clone, body, rowIndex);
     }
-    for (let i = 0, length = referenceColumns.length; i < length; i++) {
-        draggedColumns[i].style.width = `${referenceColumns[i].clientWidth}px`;
-        draggedColumns[i].style.height = `${referenceColumns[i].clientHeight}px`;
-    }
-    // Clone is reparented to <body>, losing the .table-container --_table--* vars; cells collapse without this.
-    const cellStyle = window.getComputedStyle(referenceColumns[0]);
-    draggedRow.style.setProperty('--_table--cell--font-size', cellStyle.fontSize);
-    draggedRow.style.setProperty('--_table--cell--horizontal-padding', cellStyle.paddingInlineStart);
-    // Without a value the var resolves to currentColor (dark) on the reparented clone — drop the row border while dragging.
-    draggedRow.style.setProperty('--_table--border-color', 'transparent');
 };
+const reorderZone = fromAction(dragHandleZone, () => ({
+    items: orderedItems,
+    dropFromOthersDisabled: true,
+    flipDurationMs: TABLE_ROW_FLIP_DURATION_MS,
+    dropTargetStyle: {},
+    transformDraggedElement,
+    type: 'table'
+}));
+const attachment = (node) => {
+    body = node;
+    node.addEventListener('consider', handleConsider);
+    node.addEventListener('finalize', handleFinalize);
+    reorderZone(node);
+    return () => {
+        node.removeEventListener('consider', handleConsider);
+        node.removeEventListener('finalize', handleFinalize);
+        body = null;
+    };
+};
+const reorder = { attachment, handleAttachment: fromAction(dragHandle) };
 </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} bind:this={tableRef}>
-      <thead class="table__head">
-        <tr>
-          <th class="table__th table__drag-handle">&nbsp;</th>
-          {#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
-        use:dndzone={{
-          items: rows,
-          dropFromOthersDisabled: true,
-          flipDurationMs,
-          dropTargetStyle: {},
-          transformDraggedElement,
-          type: 'table'
-        }}
-        onconsider={handleConsider}
-        onfinalize={handleFinalize}>
-        {#if view.showNoItemsPlaceholder}
-          <tr class="table__tr table__tr--placeholder">
-            <td colspan={visibleColspan}>
-              <div class="table__placeholder">{@render noItemsContent()}</div>
-            </td>
-          </tr>
-        {:else}
-          {#each rows as item, itemIndex (item)}
-            {@const isSelected = model.selection.has(item.id)}
-            {@const isHighlighted = model.highlightedItemIds.includes(item.id)}
-            {@const flushBottom = model.styles?.variant === 'card' && itemIndex === rows.length - 1}
-            {@const zebra = model.styles?.zebra === true && itemIndex % 2 === 1 && !isSelected && !isHighlighted}
-            <tr
-              animate:flip={{ duration: flipDurationMs }}
-              class="table__tr"
-              id={item.id}
-              class:table__tr--selected={isSelected}
-              class:table__tr--highlighted={isHighlighted}
-              class:table__tr--zebra={zebra}>
-              <td
-                class="table__td table__drag-handle table__drag-handle--dragging"
-                class:table__td--flush={flushBottom}
-                onmousedown={startDrag}
-                ontouchstart={startDrag}>
-                <Icon src={IconReorderDotsHorizontal} />
-              </td>
-              {#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>
-          {/each}
-        {/if}
-      </tbody>
-    </table>
-  {/if}
-</div>
+<TableCore {...shared} model={model} on={on} rows={rows} reorder={reorder} />
 
 <!--
 @component
 Data table with drag-and-drop row reordering, plus everything `Table` offers (sorting, selection, column
-visibility, group actions). A leading drag-handle column is rendered; reorders fire `on.itemsReordered` and
-preserve the current selection. For non-reorderable tables use `Table` (it 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 |
+visibility, group actions). A leading drag-handle column is rendered and a row is dragged by its handle only;
+a drop that changes the order fires `on.itemsReordered` and preserves the current selection, a drop back in place
+fires nothing. For non-reorderable tables use `Table` (it ships no dnd code).
 
 ### 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__drag-handle {
-  width: 2.25rem;
-  cursor: grab;
-  text-align: center;
-  --sc-kit--icon--size: 1.25rem;
-  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
-}
-.table__drag-handle--dragging {
-  cursor: grabbing;
-}</style>

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

@@ -6,10 +6,7 @@ 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;
         on?: {
             selectionChanged?: (e: T[]) => void;
@@ -18,7 +15,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: "";
@@ -47,34 +53,39 @@ interface $$IsomorphicComponent {
 }
 /**
  * Data table with drag-and-drop row reordering, plus everything `Table` offers (sorting, selection, column
- * visibility, group actions). A leading drag-handle column is rendered; reorders fire `on.itemsReordered` and
- * preserve the current selection. For non-reorderable tables use `Table` (it 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 |
+ * visibility, group actions). A leading drag-handle column is rendered and a row is dragged by its handle only;
+ * a drop that changes the order fires `on.itemsReordered` and preserves the current selection, a drop back in place
+ * fires nothing. For non-reorderable tables use `Table` (it ships no dnd code).
  *
  * ### 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 {