@streamscloud/kit 0.76.5 → 0.78.0

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

@@ -10,6 +10,7 @@ export type FieldBinding<V> = {
     };
 };
 import type { FormValidationHandler } from '../../core/validation';
+import type { ErrorPlacement } from './types';
 import type { Snippet } from 'svelte';
 declare function $$render<T extends Record<string, unknown>, K extends keyof T & string>(): {
     props: {
@@ -31,11 +32,11 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         /** Show errors even when the field has not been touched. @default false */
         disableTouchedTracking?: boolean;
         /**
-         * Reserve space below the field for the error message. Turn off when a sibling must align to
-         * the field's real bottom edge — the message then overlays whatever sits below the field.
-         * @default false
+         * Where the error message sits: `'overlay'` covers whatever is below the field, `'reserved'` keeps a
+         * permanent strip so toggling never shifts layout, `'inline'` grows the field only while an error is shown.
+         * @default 'overlay'
          */
-        reserveErrorSpace?: boolean;
+        errorPlacement?: ErrorPlacement;
         /**
          * Extra consumer callbacks. Run AFTER the validation wiring; they cannot override it.
          * The `children` snippet always receives fully-wired `field.on.*`.
@@ -73,8 +74,7 @@ interface $$IsomorphicComponent {
 /**
  * Binds a form field to any kit input via a render-prop snippet. The base inputs stay unchanged;
  * `Validatable` is the only place that knows about `FormValidationHandler`. Wraps children in an
- * internal `FieldFrame` that reserves space for the error message so toggling doesn't shift
- * layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
+ * internal `FieldFrame` that renders the error message below the field, placed per `errorPlacement`.
  *
  * ### Usage
  * ```svelte

package/dist/ui/validatable/cmp.validation-error.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T extends Record<string, unknown>">import { default as FieldFrame } from './field-frame.svelte';
-let { name, validationResult, reserveErrorSpace = false, children } = $props();
+let { name, validationResult, errorPlacement = 'overlay', children } = $props();
 const errorText = $derived(validationResult?.errors[name] ?? null);
 </script>
 
-<FieldFrame error={errorText} reserveErrorSpace={reserveErrorSpace}>
+<FieldFrame error={errorText} errorPlacement={errorPlacement}>
   {@render children()}
 </FieldFrame>
 
@@ -11,6 +11,6 @@ const errorText = $derived(validationResult?.errors[name] ?? null);
 @component
 Wraps a form field and displays validation errors from a `FormValidateResult` object. Stateless
 sibling of `Validatable` for cases where the consumer already has the validation result in hand
-(e.g. server-validated forms) and does not need a `FormValidationHandler`. Pass
-`reserveErrorSpace={false}` to overlay the message instead of reserving layout space.
+(e.g. server-validated forms) and does not need a `FormValidationHandler`. `errorPlacement` picks
+where the message sits — same contract as `Validatable`.
 -->

package/dist/ui/validatable/cmp.validation-error.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { FormValidateResult } from '../../core/validation';
+import type { ErrorPlacement } from './types';
 import type { Snippet } from 'svelte';
 declare function $$render<T extends Record<string, unknown>>(): {
     props: {
@@ -7,11 +8,11 @@ declare function $$render<T extends Record<string, unknown>>(): {
         /** Validation result object containing error messages */
         validationResult?: FormValidateResult<T>;
         /**
-         * Reserve space below the field for the error message. Turn off when a sibling must align to
-         * the field's real bottom edge — the message then overlays whatever sits below the field.
-         * @default false
+         * Where the error message sits: `'overlay'` covers whatever is below the field, `'reserved'` keeps a
+         * permanent strip so toggling never shifts layout, `'inline'` grows the field only while an error is shown.
+         * @default 'overlay'
          */
-        reserveErrorSpace?: boolean;
+        errorPlacement?: ErrorPlacement;
         children: Snippet;
     };
     exports: {};
@@ -36,8 +37,8 @@ interface $$IsomorphicComponent {
 /**
  * Wraps a form field and displays validation errors from a `FormValidateResult` object. Stateless
  * sibling of `Validatable` for cases where the consumer already has the validation result in hand
- * (e.g. server-validated forms) and does not need a `FormValidationHandler`. Pass
- * `reserveErrorSpace={false}` to overlay the message instead of reserving layout space.
+ * (e.g. server-validated forms) and does not need a `FormValidationHandler`. `errorPlacement` picks
+ * where the message sits — same contract as `Validatable`.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;

package/dist/ui/validatable/field-frame.svelte

@@ -1,40 +1,50 @@
-<script lang="ts">let { error, reserveErrorSpace = false, children } = $props();
+<script lang="ts">let { error, errorPlacement = 'overlay', children } = $props();
 export {};
 </script>
 
-<div class="field-frame" class:field-frame--errored={!!error} class:field-frame--no-reserve={!reserveErrorSpace}>
+<div class="field-frame" class:field-frame--reserved={errorPlacement === 'reserved'}>
   {@render children()}
   {#if error}
-    <small class="field-frame__message">{error}</small>
+    <small class="field-frame__message field-frame__message--{errorPlacement}">{error}</small>
   {/if}
 </div>
 
 <!--
 @component
-Internal helper — wraps a form field and renders its error message in an absolutely-positioned slot
-below, with reserved space so the layout doesn't shift when the error toggles. With
-`reserveErrorSpace={false}` the reserve is dropped — the message stays absolutely positioned and
-overlays whatever sits below the field. Used internally by `Validatable` / `ValidationError` (and
-any other field-shaped kit consumer that needs the same visual contract).
+Internal helper — wraps a form field and renders its error message below it, placed per `errorPlacement`: overlaying
+the content below, inside a permanently reserved strip, or in normal flow so the field grows only while the error is
+shown. Used internally by `Validatable` / `ValidationError` (and any other field-shaped kit consumer that needs the
+same visual contract).
 
 Not exported from `index.ts` — for kit-internal use only.
 -->
 
 <style>.field-frame {
   position: relative;
-  margin-bottom: 1.1em;
   display: block;
 }
-.field-frame--no-reserve {
-  margin-bottom: 0;
+.field-frame--reserved {
+  padding-block-end: 1.1rem;
 }
 .field-frame__message {
-  position: absolute;
-  top: calc(100% + 0.1em);
-  left: 0;
-  right: 0;
   display: block;
   color: var(--sc-kit--color--danger);
   font-size: 0.6875rem;
+  line-height: 1.5;
   font-weight: 400;
+}
+.field-frame__message--overlay {
+  position: absolute;
+  top: calc(100% + 0.0688rem);
+  left: 0;
+  right: 0;
+}
+.field-frame__message--reserved {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.field-frame__message--inline {
+  margin-top: 0.0688rem;
 }</style>

package/dist/ui/validatable/field-frame.svelte.d.ts

@@ -1,17 +1,17 @@
+import type { ErrorPlacement } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
-    /** Error message to display below the field. Falsy hides the message and the `--errored` flag. */
+    /** Error message to display below the field. Falsy hides the message. */
     error?: string | null | undefined;
-    /** Reserve space below the field for the error message. Off drops the reserve — the message overlays content below. @default false */
-    reserveErrorSpace?: boolean;
+    /** Where the error message sits relative to the field. @default 'overlay' */
+    errorPlacement?: ErrorPlacement;
     children: Snippet;
 };
 /**
- * Internal helper — wraps a form field and renders its error message in an absolutely-positioned slot
- * below, with reserved space so the layout doesn't shift when the error toggles. With
- * `reserveErrorSpace={false}` the reserve is dropped — the message stays absolutely positioned and
- * overlays whatever sits below the field. Used internally by `Validatable` / `ValidationError` (and
- * any other field-shaped kit consumer that needs the same visual contract).
+ * Internal helper — wraps a form field and renders its error message below it, placed per `errorPlacement`: overlaying
+ * the content below, inside a permanently reserved strip, or in normal flow so the field grows only while the error is
+ * shown. Used internally by `Validatable` / `ValidationError` (and any other field-shaped kit consumer that needs the
+ * same visual contract).
  *
  * Not exported from `index.ts` — for kit-internal use only.
  */

package/dist/ui/validatable/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Validatable } from './cmp.validatable.svelte';
 export type { FieldBinding, ValidateOnEvent } from './cmp.validatable.svelte';
 export { default as ValidationError } from './cmp.validation-error.svelte';
+export type { ErrorPlacement } from './types';

package/dist/ui/validatable/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Where a field's validation message sits.
+ * - `'overlay'` — absolutely positioned below the field; no space reserved, the message covers whatever sits below.
+ * - `'reserved'` — absolutely positioned inside a permanently reserved strip, so toggling the error never shifts layout.
+ * - `'inline'` — in normal flow, only while an error is shown: the field grows on error and shrinks back when it clears.
+ */
+export type ErrorPlacement = 'overlay' | 'reserved' | 'inline';

package/dist/ui/validatable/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.76.5",
+  "version": "0.78.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/ui/table/_table-styles.scss

@@ -1,158 +0,0 @@
-@use 'styles/mixins';
-@use 'styles/functions';
-
-@mixin base {
-  .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%;
-
-    @include mixins.scrollbar();
-
-    &--md {
-      --_table--size-row-height: #{functions.to-rem(44)};
-      --_table--size-head-height: #{functions.to-rem(40)};
-      --_table--size-cell-font-size: var(--sc-kit--font-size--md);
-      --_table--size-cell-padding: var(--sc-kit--space--4);
-    }
-
-    &--sm {
-      --_table--size-row-height: #{functions.to-rem(36)};
-      --_table--size-head-height: #{functions.to-rem(32)};
-      --_table--size-cell-font-size: var(--sc-kit--font-size--sm);
-      --_table--size-cell-padding: var(--sc-kit--space--3);
-    }
-
-    &--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);
-      // No overflow here: the radius already clips via the base overflow-x, and `hidden` would kill both scroll axes.
-    }
-  }
-
-  .table {
-    width: 100%;
-    table-layout: auto;
-    height: fit-content;
-    border-collapse: separate;
-    border-spacing: 0;
-
-    &__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);
-    }
-
-    &__th {
-      padding: 0 var(--_table--cell--horizontal-padding);
-      text-align: left;
-      vertical-align: middle;
-      border-bottom: 1px solid var(--_table--border-color);
-      @include mixins.no-select;
-
-      &--centered {
-        text-align: center;
-        --_table-header--justify-content: center;
-      }
-    }
-
-    &__tr {
-      height: var(--_table--row--height);
-      max-height: var(--_table--row--height);
-      background: var(--_table--row--color);
-
-      &--zebra {
-        background: var(--_table--zebra--color);
-      }
-
-      &:hover,
-      &--highlighted {
-        background: var(--_table--row--alternative-color);
-        --_table--move-row-cell-opacity: 1;
-      }
-
-      &--selected {
-        background: var(--_table--selected--color);
-      }
-
-      &--selected:hover {
-        background: var(--_table--selected--color-hover);
-      }
-
-      &--placeholder {
-        background: var(--_table--row--color) !important;
-      }
-    }
-
-    &__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;
-
-      &--centered {
-        text-align: center;
-      }
-
-      &--clickable {
-        cursor: pointer;
-      }
-
-      &--flush {
-        border-bottom: none;
-      }
-    }
-
-    &__placeholder {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 80%;
-      user-select: none;
-    }
-
-    &--sticky-header {
-      thead {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
-    }
-  }
-}

package/dist/ui/table/table-view.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { ResolvedColumn } from './table-column-models.svelte';
-import type { TableModel } from './table-model.svelte';
-import type { WithId } from './types';
-type SelectionCallbacks<T> = {
-    selectionChanged?: (e: T[]) => void;
-    itemsSelected?: (e: T[]) => void;
-    itemsDeselected?: (e: T[]) => void;
-};
-/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
-export declare const columnWidthStyle: <T extends WithId>(column: ResolvedColumn<T>) => string;
-/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (on/off gate + anti-flicker delay). */
-export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined, noItemsPlaceholderEnabled?: () => boolean | undefined, noItemsPlaceholderDelay?: () => number | undefined) => {
-    readonly showNoItemsPlaceholder: boolean;
-};
-export {};

package/dist/ui/table/table-view.svelte.js

@@ -1,47 +0,0 @@
-import { untrack } from 'svelte';
-/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
-export const columnWidthStyle = (column) => {
-    const width = column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;';
-    return column.minCssWidth ? `${width} min-width: ${column.minCssWidth};` : width;
-};
-/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (on/off gate + anti-flicker delay). */
-export const createTableView = (model, on, noItemsPlaceholderEnabled = () => undefined, noItemsPlaceholderDelay = () => undefined) => {
-    let showNoItemsPlaceholder = $state(false);
-    let timeout = 0;
-    $effect(() => untrack(() => {
-        const selection = model().selection;
-        const subscriptions = [
-            selection.subscribeOnChange((values) => on()?.selectionChanged?.(values)),
-            selection.subscribeOnAdd((values) => on()?.itemsSelected?.(values)),
-            selection.subscribeOnRemove((values) => on()?.itemsDeselected?.(values))
-        ];
-        return () => subscriptions.forEach((unsubscribe) => unsubscribe());
-    }));
-    $effect(() => {
-        if (model().items.length) {
-            clearTimeout(timeout);
-            showNoItemsPlaceholder = false;
-            return;
-        }
-        if (noItemsPlaceholderEnabled() === false) {
-            clearTimeout(timeout);
-            showNoItemsPlaceholder = false;
-            return;
-        }
-        const delay = noItemsPlaceholderDelay() ?? 0;
-        if (delay <= 0) {
-            clearTimeout(timeout);
-            showNoItemsPlaceholder = true;
-            return;
-        }
-        timeout = window.setTimeout(() => {
-            showNoItemsPlaceholder = !model().items.length;
-        }, delay);
-        return () => clearTimeout(timeout);
-    });
-    return {
-        get showNoItemsPlaceholder() {
-            return showNoItemsPlaceholder;
-        }
-    };
-};