@lavalogic/scoria 0.37.53 → 0.37.55

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -11,7 +11,7 @@
  * `minSize`, …) via the `commonProps(...)` helper. `id` is passed explicitly
  * at each call site so its narrowed literal type survives the object spread.
  */
-import { formatDateTime, generateUUID, syntheticColumnId } from '../../Helpers/Helpers.svelte.js';
+import { formatDateTime, syntheticColumnId } from '../../Helpers/Helpers.svelte.js';
 import { CheckboxDef } from './Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
 import { DateInputDef } from './Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
 import { NumberInputDef } from './Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
@@ -130,22 +130,6 @@ function commonProps(opts, kind) {
         filterGroup: opts.filterGroup,
     };
 }
-/** Generate a column id for a kind whose option type does not require an
- *  `id` from the caller.
- *
- *  - With `hint`: used verbatim. `idHint` is the server-side-filtering
- *    contract; the column id flows through `createRemoteRowSource` as
- *    the query-string key the server expects, so a synthetic prefix
- *    would make every server reject the field as unknown.
- *  - Without `hint`: fall back to `${prefix}-${UUID}` so the id is unique
- *    within the table. Such columns cannot participate in server-driven
- *    filtering (the server has no way to know the random suffix). */
-function mintSyntheticId(prefix, hint) {
-    if (hint != null) {
-        return syntheticColumnId(hint);
-    }
-    return syntheticColumnId(`${prefix}-${generateUUID()}`);
-}
 /** Resolve an `options` field that may be a static array or an async loader
  *  into the always-loader form the Def expects. The spread drops the
  *  readonly modifier the Def's signature lacks. Loaders may return either
@@ -185,6 +169,35 @@ function formatLocaleDate(value) {
     return '';
 }
 export function createColumnFactory() {
+    // Per-factory deterministic counters for synthetic (hint-less) column
+    // ids. The `columns: (col) => [...]` closure runs the factory methods
+    // in the same order every time `createTable` rebuilds the table, so
+    // `${prefix}-${n}` is stable across re-creations - which the
+    // persisted-layout and column-preset round-trips key on. A random
+    // UUID per build silently broke both (every mount produced fresh ids
+    // that no saved snapshot could match).
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const syntheticIdCounters = new Map();
+    /** Mint a column id for a kind whose option type does not require an
+     *  `id` from the caller.
+     *
+     *  - With `hint`: used verbatim. `idHint` is the server-side-filtering
+     *    contract; the column id flows through `createRemoteRowSource` as
+     *    the query-string key the server expects, so a synthetic prefix
+     *    would make every server reject the field as unknown.
+     *  - Without `hint`: fall back to a deterministic `${prefix}-${n}`
+     *    (n is a per-prefix, per-factory counter) so the id is unique
+     *    within the table and stable across rebuilds. Such columns cannot
+     *    participate in server-driven filtering (the server has no column
+     *    matching the synthetic id). */
+    function mintId(prefix, hint) {
+        if (hint != null) {
+            return syntheticColumnId(hint);
+        }
+        const n = syntheticIdCounters.get(prefix) ?? 0;
+        syntheticIdCounters.set(prefix, n + 1);
+        return syntheticColumnId(`${prefix}-${n}`);
+    }
     const factory = {
         // ─── Accessor kinds ─────────────────────────────────────────
         text(opts) {
@@ -296,7 +309,7 @@ export function createColumnFactory() {
         },
         // ─── Display kinds ──────────────────────────────────────────
         display(opts) {
-            const id = mintSyntheticId('display', opts.idHint);
+            const id = mintId('display', opts.idHint);
             const normalisedOptions = opts.getOptions
                 ? normaliseOptionsLoader(opts.getOptions)
                 : undefined;
@@ -357,7 +370,7 @@ export function createColumnFactory() {
             return makeSpec('display', def);
         },
         bubble(opts) {
-            const id = mintSyntheticId('bubble', opts.idHint);
+            const id = mintId('bubble', opts.idHint);
             const normalisedOptions = opts.getOptions
                 ? normaliseOptionsLoader(opts.getOptions)
                 : undefined;
@@ -384,7 +397,7 @@ export function createColumnFactory() {
             return makeSpec('bubble', def);
         },
         progress(opts) {
-            const id = mintSyntheticId('progress', opts.idHint);
+            const id = mintId('progress', opts.idHint);
             // Normalise scalar ratio to `[fraction, 1]` tuple for the Def.
             const tupleAccessor = (row, index) => {
                 const raw = opts.value(row, index);
@@ -417,7 +430,7 @@ export function createColumnFactory() {
             return makeSpec('progress', def);
         },
         validity(opts) {
-            const id = mintSyntheticId('validity', opts?.idHint);
+            const id = mintId('validity', opts?.idHint);
             const fallbackValid = () => 'Valid';
             const def = new ValidityDef({
                 id,
@@ -437,6 +450,7 @@ export function createColumnFactory() {
         rowSelection(opts) {
             const def = new RowSelectionDef({
                 isSelectable: opts?.isSelectable ?? (() => true),
+                id: mintId('is-selectable'),
             });
             // RowSelection has no public width option — apply the per-kind
             // default so the column does not fall back to the 48px ColumnDef
@@ -464,6 +478,7 @@ export function createColumnFactory() {
             const def = new ActionsDef({
                 actions: wrapped,
                 isEnabled: isEnabledFn ? (item) => isEnabledFn(item) : undefined,
+                id: mintId('actions'),
             });
             // Actions has no public width option — apply the per-kind default.
             def.width = KIND_DEFAULT_WIDTHS.actions;
@@ -480,7 +495,7 @@ export function createColumnFactory() {
                 : (inner) => inner[opts.childRowId];
             const userIsEnabled = opts.isEnabled;
             const def = new ExpandDef({
-                id: mintSyntheticId('expand'),
+                id: mintId('expand'),
                 header: opts.header ?? '',
                 isEnabled: userIsEnabled ?? (() => true),
                 accessorFn: opts.childRows,

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.d.ts

@@ -2,9 +2,10 @@ import type { ColourSet } from '../../../../../../scss/colours.js';
 import type { TableActionButton } from '../../TableActionButton.js';
 import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
 /**
- * Construction-time props for `ActionsDef`. Omits `id` and `header`
- * because the class generates a stable id via `generateUUID` and pins
- * the header to `'Actions'`.
+ * Construction-time props for `ActionsDef`. Omits `header` (pinned to
+ * `'Actions'`) and makes `id` optional: the typed column factory passes
+ * a deterministic `actions-<n>` id, and a `generateUUID`-suffixed id is
+ * minted only when none is supplied.
  *
  * Notes:
  * - `isEnabled` defaults to `true` for every button if omitted.
@@ -19,15 +20,23 @@ export interface ActionsDefProps<T extends object, in FilterValueType> extends O
     isEnabled?: (item: T, index: number, button: TableActionButton<T>) => boolean | Promise<boolean>;
     /** Per-row, per-button colour override. */
     getColourSet?: (item: T, index: number, button: TableActionButton<T>) => ColourSet;
+    /**
+     * Optional explicit column id. The typed column factory passes a
+     * deterministic id (`actions-<n>`) so the column keeps the same id
+     * across table re-creations - which persisted-layout and preset
+     * round-trips key on. When omitted a random id is minted.
+     */
+    id?: ColumnDefProps<T, FilterValueType>['id'];
 }
 /**
  * `ActionsDef<T, FilterValueType>` is a column whose cells render a
  * row of buttons. It is non-sortable, non-filterable, and pins its
  * header to `'Actions'`.
  *
- * Note: the generated id uses `generateUUID()` (UUIDv7); two `ActionsDef`
- * instances constructed in the same render pass will have distinct ids
- * so consumers must keep a single instance per table.
+ * Note: when constructed without an explicit `id` the fallback id uses
+ * `generateUUID()`, which is NOT stable across table rebuilds; consumers
+ * that need a persisted-layout-safe id (the typed column factory) pass
+ * a deterministic `id` instead.
  */
 export declare class ActionsDef<T extends object, in FilterValueType> extends ColumnDef<T, FilterValueType> {
     constructor(props: ActionsDefProps<T, FilterValueType>);

package/dist/Components/Table/Types/Columns/Definitions/Actions/ActionsDef.svelte.js

@@ -6,14 +6,15 @@ import { ColumnDef } from '../ColumnDef.svelte.js';
  * row of buttons. It is non-sortable, non-filterable, and pins its
  * header to `'Actions'`.
  *
- * Note: the generated id uses `generateUUID()` (UUIDv7); two `ActionsDef`
- * instances constructed in the same render pass will have distinct ids
- * so consumers must keep a single instance per table.
+ * Note: when constructed without an explicit `id` the fallback id uses
+ * `generateUUID()`, which is NOT stable across table rebuilds; consumers
+ * that need a persisted-layout-safe id (the typed column factory) pass
+ * a deterministic `id` instead.
  */
 export class ActionsDef extends ColumnDef {
     constructor(props) {
         super({
-            id: syntheticColumnId(`actions-${generateUUID()}`),
+            id: props.id ?? syntheticColumnId(`actions-${generateUUID()}`),
             header: 'Actions',
             allowSorting: false,
             allowFiltering: false,

package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.d.ts

@@ -11,12 +11,20 @@ export interface RowSelectionDefProps<T extends object, FilterValueType = BoolFi
     isSelectable: (item: T, index: number) => boolean | Promise<boolean>;
     /** Optional row validity predicate. */
     isValid?: ColumnDefProps<T, FilterValueType>['isValid'];
+    /**
+     * Optional explicit column id. The typed column factory passes a
+     * deterministic id (`is-selectable-<n>`) so the column keeps the
+     * same id across table re-creations - which persisted-layout and
+     * preset round-trips key on. When omitted a random id is minted.
+     */
+    id?: ColumnDefProps<T, FilterValueType>['id'];
 }
 /**
  * `RowSelectionDef<T, FilterValueType>` is the checkbox column that
  * drives row selection. Non-sortable and non-filterable; the header
- * reads `'Row Selected'` and the id is generated via `generateUUID`
- * (UUIDv7).
+ * reads `'Row Selected'`. The id is taken from `props.id` when supplied
+ * (the typed column factory passes a deterministic `is-selectable-<n>`)
+ * and otherwise falls back to a `generateUUID`-suffixed id.
  *
  * @remarks
  *

package/dist/Components/Table/Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js

@@ -4,8 +4,9 @@ import { ColumnDef } from '../ColumnDef.svelte.js';
 /**
  * `RowSelectionDef<T, FilterValueType>` is the checkbox column that
  * drives row selection. Non-sortable and non-filterable; the header
- * reads `'Row Selected'` and the id is generated via `generateUUID`
- * (UUIDv7).
+ * reads `'Row Selected'`. The id is taken from `props.id` when supplied
+ * (the typed column factory passes a deterministic `is-selectable-<n>`)
+ * and otherwise falls back to a `generateUUID`-suffixed id.
  *
  * @remarks
  *
@@ -28,7 +29,7 @@ export class RowSelectionDef extends ColumnDef {
             ? { isSelectable: propsOrIsSelectable, isValid: legacyIsValid }
             : propsOrIsSelectable;
         super({
-            id: syntheticColumnId(`is-selectable-${generateUUID()}`),
+            id: props.id ?? syntheticColumnId(`is-selectable-${generateUUID()}`),
             header: 'Row Selected',
             allowSorting: false,
             allowFiltering: false,

package/dist/Components/Table/Types/Columns/JSONTableLayout.d.ts

@@ -23,15 +23,24 @@ export interface JSONTableLayout {
     visibility: VisibilityState;
     /** Pinned-left / pinned-right column ids with their pinned widths. */
     pinning: JSONColumnPinningState;
-    /** Per-column user-set widths in pixels. */
+    /**
+     * Widths (px) of columns the user has explicitly resized, keyed by
+     * column id. Columns absent from this map keep their factory-default
+     * width; on restore each entry sets the def's `width` and marks it
+     * `userResized` so the grid renders the fixed track.
+     */
     sizing: ColumnSizingState;
 }
 /**
  * Schema version for the persisted `JSONTableLayout` envelope. Bump when
- * the shape changes in a backwards-incompatible way; `readVersionedJSON`
- * silently drops envelopes written under a different version.
+ * the shape or field semantics change in a backwards-incompatible way;
+ * `readVersionedJSON` silently drops envelopes written under a different
+ * version.
+ *
+ * v2: `sizing` switched from a snapshot of the (vestigial) `columnSizing`
+ * map to the real per-`ColumnDef` `width` of user-resized columns.
  */
-export declare const TABLE_LAYOUT_SCHEMA_VERSION = 1;
+export declare const TABLE_LAYOUT_SCHEMA_VERSION = 2;
 /**
  * Conservative typeguard for a persisted `JSONTableLayout`. localStorage
  * is same-origin-writable so the decoded value is untrusted; this checks

package/dist/Components/Table/Types/Columns/JSONTableLayout.js

@@ -1,9 +1,13 @@
 /**
  * Schema version for the persisted `JSONTableLayout` envelope. Bump when
- * the shape changes in a backwards-incompatible way; `readVersionedJSON`
- * silently drops envelopes written under a different version.
+ * the shape or field semantics change in a backwards-incompatible way;
+ * `readVersionedJSON` silently drops envelopes written under a different
+ * version.
+ *
+ * v2: `sizing` switched from a snapshot of the (vestigial) `columnSizing`
+ * map to the real per-`ColumnDef` `width` of user-resized columns.
  */
-export const TABLE_LAYOUT_SCHEMA_VERSION = 1;
+export const TABLE_LAYOUT_SCHEMA_VERSION = 2;
 /**
  * Conservative typeguard for a persisted `JSONTableLayout`. localStorage
  * is same-origin-writable so the decoded value is untrusted; this checks

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -1826,11 +1826,23 @@ export class TableContext {
             left: [...(this.columnPinning.left?.entries() ?? [])],
             right: [...(this.columnPinning.right?.entries() ?? [])],
         };
+        // Width state lives on each `ColumnDef` (`width` + `userResized`),
+        // not in `columnSizing`: the grid template reads the def fields and
+        // the resize-handle drag writes them. Persist only columns the user
+        // has actually resized; the rest keep their factory-default width.
+        // Reading `userResized` / `width` here also makes the auto-persist
+        // `$effect` re-run on every drag-resize.
+        const sizing = {};
+        for (const def of this.columnDefs) {
+            if (def.userResized) {
+                sizing[def.id] = def.width;
+            }
+        }
         return {
             columnOrder,
             visibility: { ...this.columnVisibility },
             pinning,
-            sizing: { ...this.columnSizing },
+            sizing,
         };
     }
     /**
@@ -1863,7 +1875,7 @@ export class TableContext {
             return def;
         });
         this.columnDefs = ordered;
-        // Visibility / sizing: keep only ids still present in the table.
+        // Visibility: keep only ids still present in the table.
         const visibility = {};
         for (const [id, visible] of Object.entries(layout.visibility)) {
             if (byId.has(id)) {
@@ -1871,13 +1883,16 @@ export class TableContext {
             }
         }
         this.columnVisibility = visibility;
-        const sizing = {};
+        // Sizing: restore user-resized widths onto the matching defs. The
+        // grid template reads `def.width` + `def.userResized`, so set both;
+        // columns absent from the snapshot keep their factory default.
         for (const [id, width] of Object.entries(layout.sizing)) {
-            if (byId.has(id)) {
-                sizing[id] = width;
+            const def = byId.get(id);
+            if (def) {
+                def.width = width;
+                def.userResized = true;
             }
         }
-        this.columnSizing = sizing;
         this.columnPinning = adaptJSONPinningState(layout.pinning);
     }
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.53",
+  "version": "0.37.55",
   "publishConfig": {
     "access": "restricted"
   },