@revenexx/studio-shared 0.3.2 → 0.4.0

package/dist/runtime/lib/facets.d.ts

@@ -0,0 +1,200 @@
+/**
+ * One facet model for every way a list gets narrowed (PE-6xx).
+ *
+ * ## Why this exists
+ *
+ * The Commerce Studio grew seven mechanisms for the same job. Five of them
+ * describe the identical thing in different words:
+ *
+ *   - `filters[type=select]`      — a column, a vocabulary, options
+ *   - `filters[type=multi-select]`— the same, several values
+ *   - `filters[type=boolean]`     — the same, two values
+ *   - `filters[type=text]`        — the same column, matched by substring
+ *   - `filters[type=date-range]`  — the same column, bounded
+ *   - `rail.sections[type=facet]` — a column, a vocabulary, options. Again.
+ *   - `rail.sections[type=tree]`  — a column reached through a junction
+ *
+ * Each was rendered by its own control, in its own place, with its own commit
+ * behaviour, and none of them could hold more than one value except the one
+ * type nobody declared. This module is the single shape all of them reduce to,
+ * so a surface declares a dimension once and the CONTROL is a rendering
+ * decision rather than a second grammar.
+ *
+ * ## A facet is a question, not a widget
+ *
+ * `kind` says what shape the answer takes — a set of options, a typed string, a
+ * bounded range, a node in a hierarchy. It does NOT say where the control
+ * lives, because there is only one: the filter panel. An earlier pass gave a
+ * facet a `place` so a catalogue tree could stay pinned in a left rail, and
+ * that hedge put the studio back where it started — two places to look, two
+ * commit rules, and no way for an app author to know which one a dimension
+ * belonged in.
+ *
+ * ## Every facet is multi-valued
+ *
+ * `check` and `tree` hold a LIST. That is the point of the rework: "active or
+ * draft" was not a question the product could ask, because a `select` mapped to
+ * `eq.` and a submenu could only tick one row. Within a facet the values are
+ * OR'd, across facets AND'd — "a draft or a lead, in Germany".
+ *
+ * `text` and `date-range` hold one value each because there is only one to
+ * hold; they are still facets, and they still live in the panel rather than
+ * growing a second control in the toolbar.
+ */
+export type FacetKind = 'check' | 'text' | 'date-range' | 'tree';
+export interface FacetOption {
+    value: string;
+    label: string;
+    /**
+     * How many rows match. Shown where known — "Churned 4" is the difference
+     * between a guess and a decision. Left `undefined` where the surface could
+     * not ask cheaply; a facet with no counts renders bare rather than lying
+     * with a zero.
+     */
+    count?: number;
+    /** Greyed and unclickable, kept visible so the dimension still reads whole. */
+    disabled?: boolean;
+}
+/** One node of a `tree` facet. */
+export interface FacetNode {
+    value: string;
+    label: string;
+    count?: number;
+    children?: FacetNode[];
+}
+export interface Facet {
+    /** Stable id. Namespaces this facet's values in the flat selection. */
+    key: string;
+    label: string;
+    kind: FacetKind;
+    /** `check` — the values on offer. */
+    options?: FacetOption[];
+    /** `tree` — the hierarchy on offer. */
+    nodes?: FacetNode[];
+    /** Placeholder for a `text` facet's input. */
+    placeholder?: string;
+    /** One line under the pane saying what the facet actually matches. */
+    hint?: string;
+    /**
+     * The pane is still loading its options. Renders a skeleton instead of an
+     * empty list, which otherwise reads as "this dimension has no values".
+     */
+    loading?: boolean;
+    /**
+     * One value at a time — picking a second replaces the first.
+     *
+     * For a dimension whose values are alternatives rather than a set. A list's
+     * work queues are the case this exists for: "waiting for approval" AND
+     * "blocked" at once is not a wider question, it is a query that matches
+     * nothing, so offering it as a pair of checkboxes offers a dead end.
+     */
+    single?: boolean;
+}
+/** `{ from, to }`, either side optional. */
+export interface FacetRange {
+    from?: string;
+    to?: string;
+}
+export type FacetValue = string[] | string | FacetRange;
+/**
+ * What is selected, keyed by facet. A map rather than the flat
+ * `"status:active"` array the design system's own panel takes, because `text`
+ * and `date-range` values do not survive being squashed into a string that is
+ * split on its first colon — a typed `"12:30"` or an ISO instant would break
+ * apart. {@link facetValueIds} produces the flat form where a component wants
+ * it (chips, aria labels).
+ */
+export type FacetSelection = Record<string, FacetValue>;
+/**
+ * Is this value "no answer"? The one place that decides, because three
+ * different guesses at it is how a cleared filter keeps narrowing a query.
+ *
+ * `false` is a real answer, not emptiness — a boolean facet whose only tick is
+ * "No" must survive. Which is why this checks the SHAPE and never truthiness.
+ */
+export declare function isEmptyFacetValue(value: FacetValue | null | undefined): boolean;
+/** The selection with every empty entry dropped. What a query should read. */
+export declare function pruneSelection(selection: FacetSelection): FacetSelection;
+/**
+ * How many values are set inside one facet — the badge on its row in the panel.
+ *
+ * A `text` or `date-range` facet counts as one when answered: the badge says
+ * "this dimension is narrowing", and "1" is the honest number for one typed
+ * string. Counting its characters, or a range's two bounds as two, would make
+ * the panel's total disagree with the number of chips beside it.
+ */
+export declare function countInFacet(selection: FacetSelection, key: string): number;
+/** Everything set, across every facet. The count on the toolbar trigger. */
+export declare function countSelected(facets: Facet[], selection: FacetSelection): number;
+/** Depth-first walk, descending only into expanded nodes. */
+export declare function flattenNodes(nodes: FacetNode[], expanded: ReadonlySet<string>): Array<{
+    node: FacetNode;
+    depth: number;
+}>;
+/** Every node, flat and depthless. What a search filters over. */
+export declare function allNodes(nodes: FacetNode[]): FacetNode[];
+/**
+ * The path from a root down to `value`, inclusive. What a chip reads
+ * ("Tools › Hand tools"): a deep node's own label is frequently ambiguous on
+ * its own — three branches of a catalogue each have an "Accessories".
+ */
+export declare function nodePath(nodes: FacetNode[], value: string): FacetNode[] | null;
+/**
+ * The ids on the path ABOVE `value`, so a node selected from a saved view or a
+ * restored URL is revealed rather than left selected and invisible.
+ */
+export declare function expandTo(nodes: FacetNode[], value: string | null | undefined): Set<string>;
+/** The set a fresh tree opens with: the roots, and nothing deeper. */
+export declare function initialExpanded(nodes: FacetNode[]): Set<string>;
+export interface AppliedFacet {
+    /** Flat id, unique across the selection — the chip's `key`. */
+    id: string;
+    facetKey: string;
+    facetLabel: string;
+    /** What the chip says. A tree node carries its path. */
+    label: string;
+    /** The single value this chip removes. `undefined` clears the whole facet. */
+    value?: string;
+}
+/** The flat ids of one facet's values, for a chip `key` or an aria label. */
+export declare function facetValueIds(key: string, value: FacetValue): string[];
+/**
+ * What is filtering right now, in the order the facets are DECLARED rather
+ * than the order they were clicked — a chip strip that reshuffles itself as you
+ * work is one people stop reading.
+ *
+ * `rangeLabel` and `textLabel` are passed in rather than built here: a range
+ * reads through the operator's own date format and a typed string wants
+ * quotation marks the UI language agrees with, and neither belongs in a pure
+ * derivation lib.
+ */
+export declare function appliedFacets(facets: Facet[], selection: FacetSelection, format: {
+    range: (range: FacetRange) => string;
+    text: (value: string) => string;
+}): AppliedFacet[];
+/**
+ * Tick or untick one value of a multi-valued facet, returning a NEW selection.
+ *
+ * A facet whose last value is removed is deleted from the map rather than left
+ * as an empty array: `pruneSelection` would drop it anyway, and a lingering
+ * `{ status: [] }` makes two selections that mean the same thing compare
+ * unequal — which is what a dirty-check and a saved view both rely on.
+ */
+export declare function toggleFacetValue(selection: FacetSelection, key: string, value: string, on: boolean, opts?: {
+    single?: boolean;
+}): FacetSelection;
+/** Set (or clear) a `text` / `date-range` facet, returning a NEW selection. */
+export declare function setFacetValue(selection: FacetSelection, key: string, value: FacetValue): FacetSelection;
+/** Remove one chip. Clears the whole facet for the single-valued kinds. */
+export declare function clearFacetValue(selection: FacetSelection, key: string, value?: string): FacetSelection;
+/**
+ * Do two selections mean the same thing? Drives the Apply button's dot and the
+ * decision to re-query at all.
+ *
+ * Order-insensitive within a facet: ticking A then B and ticking B then A are
+ * the same filter, and a dirty flag that disagreed would offer an Apply that
+ * changes nothing.
+ */
+export declare function sameSelection(a: FacetSelection, b: FacetSelection): boolean;
+/** Deep-enough copy for a draft. The values are strings, arrays and flat pairs. */
+export declare function copySelection(selection: FacetSelection): FacetSelection;

package/dist/runtime/lib/facets.js

@@ -0,0 +1,171 @@
+export function isEmptyFacetValue(value) {
+  if (value === null || value === void 0) return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "string") return value.trim() === "";
+  if (typeof value === "object") {
+    const range = value;
+    return !range.from?.trim() && !range.to?.trim();
+  }
+  return false;
+}
+export function pruneSelection(selection) {
+  const out = {};
+  for (const [key, value] of Object.entries(selection)) {
+    if (!isEmptyFacetValue(value)) out[key] = value;
+  }
+  return out;
+}
+export function countInFacet(selection, key) {
+  const value = selection[key];
+  if (isEmptyFacetValue(value)) return 0;
+  return Array.isArray(value) ? value.length : 1;
+}
+export function countSelected(facets, selection) {
+  return facets.reduce((n, facet) => n + countInFacet(selection, facet.key), 0);
+}
+export function flattenNodes(nodes, expanded) {
+  const out = [];
+  const walk = (list, depth) => {
+    for (const node of list) {
+      out.push({ node, depth });
+      if (node.children?.length && expanded.has(node.value)) walk(node.children, depth + 1);
+    }
+  };
+  walk(nodes, 0);
+  return out;
+}
+export function allNodes(nodes) {
+  const out = [];
+  const walk = (list) => {
+    for (const node of list) {
+      out.push(node);
+      if (node.children?.length) walk(node.children);
+    }
+  };
+  walk(nodes);
+  return out;
+}
+export function nodePath(nodes, value) {
+  const walk = (list, trail) => {
+    for (const node of list) {
+      const here = [...trail, node];
+      if (node.value === value) return here;
+      if (node.children?.length) {
+        const hit = walk(node.children, here);
+        if (hit) return hit;
+      }
+    }
+    return null;
+  };
+  return walk(nodes, []);
+}
+export function expandTo(nodes, value) {
+  if (!value) return /* @__PURE__ */ new Set();
+  const path = nodePath(nodes, value);
+  if (!path) return /* @__PURE__ */ new Set();
+  return new Set(path.slice(0, -1).map((node) => node.value));
+}
+export function initialExpanded(nodes) {
+  return new Set(nodes.filter((node) => node.children?.length).map((node) => node.value));
+}
+export function facetValueIds(key, value) {
+  if (isEmptyFacetValue(value)) return [];
+  if (Array.isArray(value)) return value.map((one) => `${key}:${one}`);
+  return [`${key}:`];
+}
+function optionLabel(facet, value) {
+  if (facet.kind === "tree") {
+    const path = nodePath(facet.nodes ?? [], value);
+    return path?.length ? path.map((node) => node.label).join(" \u203A ") : value;
+  }
+  return facet.options?.find((option) => option.value === value)?.label ?? value;
+}
+export function appliedFacets(facets, selection, format) {
+  const out = [];
+  for (const facet of facets) {
+    const value = selection[facet.key];
+    if (isEmptyFacetValue(value)) continue;
+    if (Array.isArray(value)) {
+      for (const one of value) {
+        out.push({
+          id: `${facet.key}:${one}`,
+          facetKey: facet.key,
+          facetLabel: facet.label,
+          label: optionLabel(facet, one),
+          value: one
+        });
+      }
+      continue;
+    }
+    out.push({
+      id: `${facet.key}:`,
+      facetKey: facet.key,
+      facetLabel: facet.label,
+      label: typeof value === "string" ? format.text(value) : format.range(value)
+    });
+  }
+  return out;
+}
+export function toggleFacetValue(selection, key, value, on, opts = {}) {
+  if (opts.single) {
+    const next2 = { ...selection };
+    if (on) next2[key] = [value];
+    else delete next2[key];
+    return next2;
+  }
+  const current = selection[key];
+  const set = new Set(Array.isArray(current) ? current : []);
+  if (on) set.add(value);
+  else set.delete(value);
+  const next = { ...selection };
+  if (set.size) next[key] = [...set];
+  else delete next[key];
+  return next;
+}
+export function setFacetValue(selection, key, value) {
+  const next = { ...selection };
+  if (isEmptyFacetValue(value)) delete next[key];
+  else next[key] = value;
+  return next;
+}
+export function clearFacetValue(selection, key, value) {
+  if (value === void 0) {
+    const next = { ...selection };
+    delete next[key];
+    return next;
+  }
+  return toggleFacetValue(selection, key, value, false);
+}
+export function sameSelection(a, b) {
+  const left = pruneSelection(a);
+  const right = pruneSelection(b);
+  const keys = Object.keys(left);
+  if (keys.length !== Object.keys(right).length) return false;
+  for (const key of keys) {
+    const l = left[key];
+    const r = right[key];
+    if (r === void 0) return false;
+    if (Array.isArray(l) !== Array.isArray(r)) return false;
+    if (Array.isArray(l) && Array.isArray(r)) {
+      if (l.length !== r.length) return false;
+      const sorted = [...r].sort();
+      if ([...l].sort().some((one, i) => one !== sorted[i])) return false;
+      continue;
+    }
+    if (typeof l === "string" || typeof r === "string") {
+      if (l !== r) return false;
+      continue;
+    }
+    const lr = l;
+    const rr = r;
+    if ((lr.from ?? "") !== (rr.from ?? "") || (lr.to ?? "") !== (rr.to ?? "")) return false;
+  }
+  return true;
+}
+export function copySelection(selection) {
+  const out = {};
+  for (const [key, value] of Object.entries(selection)) {
+    out[key] = Array.isArray(value) ? [...value] : typeof value === "string" ? value : { ...value };
+  }
+  return out;
+}

package/dist/runtime/lib/formLayout.d.ts

@@ -0,0 +1,94 @@
+/**
+ * The decisions behind the shared form layout (PE-976), as pure functions.
+ *
+ * `FormLayout`, `FormSection`, `FieldGrid`, `FieldCell`, `FormContextCard` and
+ * `SaveBar` draw a form; this file decides the parts that have to agree across
+ * every surface that draws one — how wide a field is when nobody said, when the
+ * section navigation appears, which section the navigation marks while the
+ * page scrolls, and which grid tracks the layout gets. The Commerce renderer
+ * (mapping a manifest), hand-written cockpit forms and the manifest lint all
+ * read the same answers from here, so a phone number cannot be half width in
+ * one place and full width in another.
+ *
+ * The class strings live here as whole literals on purpose: Tailwind finds
+ * classes by scanning source text, so a class assembled at runtime from parts
+ * would never be generated. This directory is under the host's `@source`.
+ */
+/** How much of a two-column field grid a field takes. */
+export type FieldSpan = 'half' | 'full';
+/** The width a field of `fieldType` gets when nothing says otherwise. */
+export declare function defaultSpan(fieldType: string | null | undefined): FieldSpan;
+/** What `resolveSpan` reads — a manifest field fits, so does a hand-written one. */
+export interface SpanSource {
+    type?: string | null;
+    /** `auto` (or absent) means "the type decides". */
+    span?: 'auto' | FieldSpan | string | null;
+}
+/** An explicit `half` / `full` wins; `auto`, absent or unknown falls back to the type. */
+export declare function resolveSpan(field: SpanSource): FieldSpan;
+/**
+ * The grid-item class for a span inside `FieldGrid`.
+ *
+ * The grid is one column until its OWN width reaches the `@md` container size
+ * (28rem) and two above it — a container query, not a viewport breakpoint, so
+ * the same grid is right in a 512 px dialog, beside a section nav, and in a
+ * full-width page. A full field spans both tracks once there are two.
+ */
+export declare function spanClass(span: FieldSpan): string;
+/** Below this many sections a navigation is noise — the form fits in a glance. */
+export declare const SECTION_NAV_MIN = 3;
+/**
+ * Whether the left section navigation is drawn.
+ * `auto` = from {@link SECTION_NAV_MIN} sections on; a boolean forces it.
+ */
+export declare function showSectionNav(mode: boolean | 'auto', sectionCount: number): boolean;
+/** One section as the scroll spy sees it: its top edge, relative to the viewport of the scroller. */
+export interface SectionOffset {
+    id: string;
+    top: number;
+}
+/**
+ * Which section the navigation marks.
+ *
+ * The last section whose top edge has scrolled up to `threshold` (the line just
+ * under the sticky header) is the one being read. Two edges need a rule of
+ * their own: before anything has scrolled the first section is current even if
+ * it starts lower than the line, and once the scroller cannot move further the
+ * LAST section is current — a short final section can never reach the line,
+ * and a navigation that can never mark it reads as broken.
+ *
+ * `sections` must be in document order. Returns `null` for no sections.
+ */
+export declare function activeSectionId(sections: readonly SectionOffset[], options: {
+    threshold: number;
+    atEnd?: boolean;
+}): string | null;
+/** A scroller has reached its end, within a pixel or two of subpixel rounding. */
+export declare function isScrolledToEnd(scrollTop: number, clientHeight: number, scrollHeight: number): boolean;
+/**
+ * The tracks of the layout grid, by which side columns are present.
+ *
+ * The form column is capped at 48rem (~760 px, the mockup's readable width) and
+ * centred; the navigation is 10rem, the context column 16rem. Each side column
+ * only exists from the container width it fits at — the nav from `@3xl`
+ * (48rem), the context column from `@5xl` (64rem) — and below that the layout
+ * is the bare form column. Container queries again, because the space a form
+ * gets is the content pane beside a 256 px studio sidebar, not the window.
+ */
+export declare function layoutGridClass(nav: boolean, context: boolean): string;
+/** Visibility of the side columns, matching the breakpoints in {@link layoutGridClass}. */
+export declare const NAV_COLUMN_CLASS = "hidden @3xl:block";
+export declare const CONTEXT_COLUMN_CLASS = "hidden @5xl:block";
+/** One fact in a `FormContextCard`. Empty values render as an em dash. */
+export interface FormContextRow {
+    /** Stable key; the `value` slot receives the whole row. */
+    key: string;
+    label: string;
+    value?: string | number | null;
+}
+/**
+ * Up to two initials for an avatar: first letters of the first and last word (split on spaces, `-`, `_`),
+ * or the first two letters of a single word. Letters only — `"ACME GmbH (Test)"`
+ * reads as `AT`, not `A(`. Empty for nothing usable.
+ */
+export declare function initialsOf(name: string | null | undefined): string;

package/dist/runtime/lib/formLayout.js

@@ -0,0 +1,70 @@
+const FULL_WIDTH_TYPES = /* @__PURE__ */ new Set([
+  "textarea",
+  "json",
+  "key-value",
+  "multi-select",
+  "market-assignment",
+  "repeater",
+  "record-list",
+  "string-list",
+  "fieldset",
+  "rich-text",
+  "richtext",
+  "markdown",
+  "media",
+  "media-collection",
+  "image",
+  "localized-text",
+  "rules",
+  "record-view",
+  "address",
+  "tree-assign",
+  "line-selection"
+]);
+export function defaultSpan(fieldType) {
+  if (!fieldType) return "half";
+  return FULL_WIDTH_TYPES.has(fieldType.trim().toLowerCase()) ? "full" : "half";
+}
+export function resolveSpan(field) {
+  if (field.span === "half" || field.span === "full") return field.span;
+  return defaultSpan(field.type);
+}
+export function spanClass(span) {
+  return span === "full" ? "col-span-1 @md:col-span-2" : "col-span-1";
+}
+export const SECTION_NAV_MIN = 3;
+export function showSectionNav(mode, sectionCount) {
+  if (mode === "auto") return sectionCount >= SECTION_NAV_MIN;
+  return mode && sectionCount > 0;
+}
+export function activeSectionId(sections, options) {
+  if (!sections.length) return null;
+  if (options.atEnd) return sections[sections.length - 1].id;
+  let active = sections[0].id;
+  for (const section of sections) {
+    if (section.top <= options.threshold) active = section.id;
+    else break;
+  }
+  return active;
+}
+export function isScrolledToEnd(scrollTop, clientHeight, scrollHeight) {
+  if (scrollHeight <= clientHeight + 2) return false;
+  return scrollTop + clientHeight >= scrollHeight - 2;
+}
+export function layoutGridClass(nav, context) {
+  if (nav && context)
+    return "grid grid-cols-[minmax(0,48rem)] justify-center gap-6 @3xl:grid-cols-[10rem_minmax(0,48rem)] @5xl:grid-cols-[10rem_minmax(0,48rem)_16rem]";
+  if (nav)
+    return "grid grid-cols-[minmax(0,48rem)] justify-center gap-6 @3xl:grid-cols-[10rem_minmax(0,48rem)]";
+  if (context)
+    return "grid grid-cols-[minmax(0,48rem)] justify-center gap-6 @5xl:grid-cols-[minmax(0,48rem)_16rem]";
+  return "grid grid-cols-[minmax(0,48rem)] justify-center gap-6";
+}
+export const NAV_COLUMN_CLASS = "hidden @3xl:block";
+export const CONTEXT_COLUMN_CLASS = "hidden @5xl:block";
+export function initialsOf(name) {
+  const words = (name ?? "").split(/[\s_-]+/).map((w) => w.replace(/[^\p{L}\p{N}]/gu, "")).filter(Boolean);
+  if (!words.length) return "";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+}

package/dist/runtime/lib/formLayoutContext.d.ts

@@ -0,0 +1,26 @@
+/**
+ * What `FormLayout` shares with the parts inside it (PE-976).
+ *
+ * `FormSection` registers itself so the navigation is built from the sections
+ * actually on the page — their ids and titles, in document order — instead of a
+ * second list the page has to keep in step. `SaveBar` reads the grid tracks so
+ * its buttons line up under the form column rather than under the nav.
+ *
+ * Kept out of `components/` so the module's component scan never mistakes it
+ * for a component.
+ */
+import type { ComputedRef, InjectionKey } from 'vue';
+export interface FormSectionEntry {
+    id: string;
+    title: string;
+    el: () => HTMLElement | null;
+}
+export interface FormLayoutContext {
+    register: (entry: FormSectionEntry) => void;
+    unregister: (id: string) => void;
+    /** Grid classes of the layout row, reused by the save bar. */
+    gridClass: ComputedRef<string>;
+    navVisible: ComputedRef<boolean>;
+    contextVisible: ComputedRef<boolean>;
+}
+export declare const FORM_LAYOUT_KEY: InjectionKey<FormLayoutContext>;

package/dist/runtime/lib/formLayoutContext.js

@@ -0,0 +1 @@
+export const FORM_LAYOUT_KEY = Symbol("studio-shared.form-layout");

package/dist/runtime/lib/gridTracks.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Grid track sizing for the data table's columns.
+ *
+ * A column declares either a fixed size it wants (`'120px'`, `'max-content'`)
+ * or nothing at all, meaning "give it what is left". CSS Grid expresses the
+ * second as an `fr` track, and an `fr` track's automatic minimum is the one
+ * thing that makes it dangerous: `minmax(0,1fr)` may be given ZERO.
+ *
+ * That is not hypothetical. On `/commerce/contacts` thirteen columns declare
+ * 1340px of fixed track, the gaps add 96px, and the container is 1438px — so
+ * the only flexible column, the one holding the record's NAME, was sized 0px
+ * and the last column was clipped by the panel's `overflow: hidden`. The
+ * anchor of every row, invisible, on the surface that needs it most.
+ *
+ * `datatable-ux` already names the rule: a column whose resting state must
+ * stay legible gets a FLOOR, not a share. This applies it to the tracks the
+ * component generates, so a manifest gets it without having to ask — and the
+ * table overflows its box, where a reader can scroll to what was cut off,
+ * rather than silently dropping a column to nothing.
+ */
+/**
+ * The narrowest a flexible column may become.
+ *
+ * Roughly the record-name cell at its minimum: the 28px icon tile, its gap,
+ * and enough left for a truncated word plus the ellipsis that says there is
+ * more. Below this a column stops being a column and becomes a smear.
+ */
+export declare const FLEX_TRACK_FLOOR = "120px";
+/**
+ * One column's declared width, resolved to a track with a floor under it.
+ *
+ * Fixed sizes are left exactly as declared — they are a statement about the
+ * content, and shrinking them is the manifest author's call, not this
+ * function's. Only the flexible ones are touched, and only their minimum.
+ */
+export declare function trackFor(width: string | undefined | null, floor?: string): string;
+/**
+ * The `grid-template-columns` value for a row of columns.
+ *
+ * A row spans `1 / -1` — the first track line to the last — so the tracks are
+ * also how WIDE a row is. Where every column declares a fixed size, they sum to
+ * less than the panel and nothing takes the remainder: on
+ * `/commerce/procurement/purchase-requests` the tracks and their gaps came to
+ * 1486px inside a 1698px box, and the header band and every row background
+ * stopped there while the toolbar and the footer went the whole way. A table
+ * torn off two centimetres short of its own panel.
+ *
+ * So when no column asked for a share, the LAST one absorbs what is left, and
+ * it keeps its declared size as the minimum it may never go below. On these
+ * lists the last column is the row actions — content right-aligned, so the
+ * menu button stays pinned to the right edge and every other column is exactly
+ * where the manifest put it. On a list without one it is the trailing data
+ * column that grows, which is where the eye is least likely to miss the space.
+ */
+export declare function gridTemplateColumns(widths: Array<string | undefined | null>, floor?: string): string;

package/dist/runtime/lib/gridTracks.js

@@ -0,0 +1,29 @@
+export const FLEX_TRACK_FLOOR = "120px";
+const MINMAX_FR = /^minmax\(\s*[^,]+,\s*([\d.]+fr)\s*\)$/i;
+const BARE_FR = /^([\d.]+)fr$/i;
+export function trackFor(width, floor = FLEX_TRACK_FLOOR) {
+  if (!width) return `minmax(${floor},1fr)`;
+  const declared = width.trim();
+  const weighted = MINMAX_FR.exec(declared);
+  if (weighted) return `minmax(${floor},${weighted[1].toLowerCase()})`;
+  const bare = BARE_FR.exec(declared);
+  if (bare) return `minmax(${floor},${bare[1]}fr)`;
+  return declared;
+}
+function isFlexible(track) {
+  return /\dfr\s*\)?$/i.test(track);
+}
+const MINMAX = /^minmax\(\s*([^,]+?)\s*,\s*(.+?)\s*\)$/i;
+function absorbing(track) {
+  const parts = MINMAX.exec(track);
+  return `minmax(${parts ? parts[2] : track},1fr)`;
+}
+export function gridTemplateColumns(widths, floor) {
+  const tracks = widths.map((w) => trackFor(w, floor));
+  if (tracks.length === 0) return "";
+  if (!tracks.some(isFlexible)) {
+    const last = tracks.length - 1;
+    tracks[last] = absorbing(tracks[last]);
+  }
+  return tracks.join(" ");
+}