@revenexx/studio-shared 0.3.3 → 0.4.1

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

@@ -0,0 +1,48 @@
+/**
+ * What an app's icon is, read from the one field the manifest documents (PE-560).
+ *
+ * `manifest.icon` is either a FILE or a SOLAR ICON NAME, told apart by shape:
+ *
+ *  - a file contains a `/` or ends in `.svg`, `.png` or `.webp` — a URL, a
+ *    `data:` URI, or a path the registry has resolved to one;
+ *  - a Solar name is kebab-case (`money-bag`), the same token a `cockpit.json`
+ *    navigation entry carries.
+ *
+ * Anything else is neither and is skipped. The Cockpit used to read the field
+ * three ways — a Solar name in the sidebar, an `<img src>` on the installed
+ * pages, not at all in the Marketplace — so no value rendered everywhere, and
+ * no app shipped one.
+ *
+ * Pure on purpose: the Solar registry lookup lives in `solarIcons.ts`, so this
+ * module has no imports and is testable without a Nuxt alias.
+ */
+export type AppIconSource = {
+    kind: 'file';
+    src: string;
+} | {
+    kind: 'solar';
+    name: string;
+};
+/**
+ * `money-bag` → `MoneyBag`, the export name in the Solar registry. Snake case
+ * (`card_2`) and the export name itself (`Layers`) read the same way.
+ * `scripts/icons.mjs` carries a copy (`exportName`) and must agree with it.
+ */
+export declare function solarExportName(name: string): string;
+/** How one `manifest.icon` value reads, or null when it is neither shape. */
+export declare function readAppIcon(value: string | null | undefined): AppIconSource | null;
+/**
+ * The Solar name of the first `cockpit.json` navigation entry that has one —
+ * the glyph the app already shows in its host studio's sidebar, and the
+ * fallback for the apps that set no `manifest.icon`.
+ */
+export declare function firstNavIcon(navigation: ReadonlyArray<{
+    icon?: string | null;
+}> | null | undefined): string | null;
+/**
+ * Every source to try, in order: `manifest.icon` (file or Solar name), then the
+ * navigation glyph. The renderer walks the list and draws the first that
+ * resolves — an image that fails to load, or a name the registry lacks, falls
+ * through to the next, and past the end to the generic glyph.
+ */
+export declare function appIconCandidates(icon: string | null | undefined, navIcon?: string | null): AppIconSource[];

package/dist/runtime/lib/appIcon.js

@@ -0,0 +1,27 @@
+const FILE_EXTENSION = /\.(?:svg|png|webp)$/i;
+const SOLAR_NAME = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+export function solarExportName(name) {
+  return name.replace(/(^|[-_])([a-z0-9])/gi, (_m, _sep, ch) => ch.toUpperCase());
+}
+export function readAppIcon(value) {
+  const v = value?.trim();
+  if (!v) return null;
+  if (v.includes("/") || FILE_EXTENSION.test(v)) return { kind: "file", src: v };
+  if (SOLAR_NAME.test(v)) return { kind: "solar", name: v };
+  return null;
+}
+export function firstNavIcon(navigation) {
+  for (const item of navigation ?? []) {
+    const icon = item.icon?.trim();
+    if (icon) return icon;
+  }
+  return null;
+}
+export function appIconCandidates(icon, navIcon) {
+  const out = [];
+  const own = readAppIcon(icon);
+  if (own) out.push(own);
+  const nav = navIcon?.trim();
+  if (nav && !(own?.kind === "solar" && own.name === nav)) out.push({ kind: "solar", name: nav });
+  return out;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * The impersonation audit envelope (PE-1040, ADR-0114 / PE-1012).
+ *
+ * While an operator impersonates a tenant, Console's `/operator/impersonate`
+ * answers with a signed `audit` value next to the brokered token. Sent as
+ * `X-Revenexx-Audit`, it tells Baseline's history which human acted behind the
+ * operator subject. Baseline checks the signature, the tenant, the token's
+ * `sub` and the expiry, and ignores anything that does not hold, so a missing,
+ * stale or foreign envelope only costs the name in the history, never a write.
+ *
+ * Two switches keep it harmless:
+ *  - nothing is held outside impersonation: `useOperatorSession` stores the
+ *    value on install/renew and clears it on exit, and a Console that sends no
+ *    `audit` field stores nothing;
+ *  - nothing is sent until the runtime config names the target
+ *    (`NUXT_PUBLIC_AUDIT_ENVELOPE_TARGETS=postgrest,gateway`). A browser can
+ *    only send a header the server's CORS preflight allows, and a header it
+ *    does not allow fails the whole request, so each target is switched on once
+ *    its edge lists the header.
+ *
+ * Pure (no Nuxt imports), so the cockpit, studio-commerce and tests share it.
+ */
+/** The header Baseline reads the envelope from. */
+export declare const AUDIT_HEADER = "X-Revenexx-Audit";
+/** Where the envelope can go. Each one is switched on in the runtime config. */
+export type AuditEnvelopeTarget = 'postgrest' | 'gateway';
+/** localStorage key: the envelope survives the reload a tenant switch does. */
+export declare const AUDIT_ENVELOPE_STORAGE_KEY = "console.auditEnvelope";
+/** The value Console sent, if it is one we may send on. */
+export declare function parseAuditEnvelope(value: unknown): string | null;
+/** Store (or, with null, drop) the envelope of the current operator session. */
+export declare function setAuditEnvelope(value: unknown): void;
+/** The envelope of the current operator session, or null. */
+export declare function currentAuditEnvelope(): string | null;
+/** `"postgrest, gateway"` (or an array) → the targets it names. */
+export declare function auditEnvelopeTargets(configured: unknown): Set<AuditEnvelopeTarget>;
+/**
+ * The header to add to a request for `target`: `{}` unless the target is
+ * switched on and an operator session holds an envelope.
+ */
+export declare function auditHeaders(target: AuditEnvelopeTarget, configured: unknown): Record<string, string>;
+/** For tests: forget what was read from storage. */
+export declare function resetAuditEnvelopeCache(): void;

package/dist/runtime/lib/auditEnvelope.js

@@ -0,0 +1,55 @@
+export const AUDIT_HEADER = "X-Revenexx-Audit";
+export const AUDIT_ENVELOPE_STORAGE_KEY = "console.auditEnvelope";
+const ENVELOPE = /^v1\.[\w-]{1,64}\.[\w-]{1,4096}\.[\w-]{16,256}$/;
+let held;
+function storage() {
+  try {
+    return typeof window !== "undefined" && window.localStorage ? window.localStorage : null;
+  } catch {
+    return null;
+  }
+}
+export function parseAuditEnvelope(value) {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  return ENVELOPE.test(trimmed) ? trimmed : null;
+}
+export function setAuditEnvelope(value) {
+  held = parseAuditEnvelope(value);
+  const store = storage();
+  if (!store) return;
+  try {
+    if (held) store.setItem(AUDIT_ENVELOPE_STORAGE_KEY, held);
+    else store.removeItem(AUDIT_ENVELOPE_STORAGE_KEY);
+  } catch {
+  }
+}
+export function currentAuditEnvelope() {
+  if (held === void 0) {
+    let stored = null;
+    try {
+      stored = storage()?.getItem(AUDIT_ENVELOPE_STORAGE_KEY) ?? null;
+    } catch {
+      stored = null;
+    }
+    held = parseAuditEnvelope(stored);
+  }
+  return held;
+}
+export function auditEnvelopeTargets(configured) {
+  const raw = Array.isArray(configured) ? configured.join(",") : typeof configured === "string" ? configured : "";
+  const out = /* @__PURE__ */ new Set();
+  for (const part of raw.split(",")) {
+    const name = part.trim().toLowerCase();
+    if (name === "postgrest" || name === "gateway") out.add(name);
+  }
+  return out;
+}
+export function auditHeaders(target, configured) {
+  if (!auditEnvelopeTargets(configured).has(target)) return {};
+  const envelope = currentAuditEnvelope();
+  return envelope ? { [AUDIT_HEADER]: envelope } : {};
+}
+export function resetAuditEnvelopeCache() {
+  held = void 0;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Small or large cards in a gallery (Mediathek, PIM assets) — the choice the
+ * `CardSizeToggle` makes, remembered per viewer on this browser.
+ *
+ * Browser storage is a convenience here: a private window or blocked storage
+ * simply starts at the large cards again.
+ */
+export type CardSize = 'comfortable' | 'compact';
+export declare function parseCardSize(value: unknown): CardSize;
+export declare function storedCardSize(key: string): CardSize | null;
+export declare function storeCardSize(key: string, size: CardSize): void;
+/** The gallery grid's columns per size: more, smaller cards when compact. */
+export declare function cardGridClass(size: CardSize): string;

package/dist/runtime/lib/cardSize.js

@@ -0,0 +1,20 @@
+export function parseCardSize(value) {
+  return value === "compact" ? "compact" : "comfortable";
+}
+export function storedCardSize(key) {
+  try {
+    const v = typeof localStorage === "undefined" ? null : localStorage.getItem(key);
+    return v === "compact" || v === "comfortable" ? v : null;
+  } catch {
+    return null;
+  }
+}
+export function storeCardSize(key, size) {
+  try {
+    localStorage.setItem(key, size);
+  } catch {
+  }
+}
+export function cardGridClass(size) {
+  return size === "compact" ? "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6" : "grid-cols-1 min-[480px]:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4";
+}

package/dist/runtime/lib/dashboardIcons.js

@@ -1,4 +1,5 @@
 import {
+  Atom,
   Bag,
   BillList,
   Bolt,
@@ -22,6 +23,7 @@ import {
   Widget
 } from "#solar-icons";
 export const DASHBOARD_ICONS = {
+  Atom,
   Bag,
   BillList,
   Bolt,

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

@@ -81,3 +81,25 @@ export declare function countByValue<T>(rows: readonly T[], getter: FilterGetter
  * whose value happens to be `''` must not be the only thing that survives it.
  */
 export declare function matchesFilter<T>(getter: FilterGetter<T>, row: T, active: string | readonly string[] | null | undefined): boolean;
+/** One dimension as the counting below needs it: its key and how a row reads under it. */
+export interface FilterDimension<T> {
+    key: string;
+    getter: FilterGetter<T>;
+}
+/**
+ * How many rows each option of one dimension would leave, given what is ticked.
+ * `rows` is what the search already leaves; a caller without a search passes
+ * the whole list.
+ *
+ * Counted over the rows that survive every OTHER dimension's selection, and not
+ * this dimension's own. With "Status: Active" ticked, "Channel: Email 3" means
+ * three active email rows — the number a click on Email will actually show —
+ * where counting the whole list offered rows the Active choice had already
+ * removed ("Ready 3" that yielded nothing, PO-313).
+ *
+ * Not this dimension's own selection, because inside one dimension the choices
+ * are ANY (see `matchesFilter`): ticking Draft beside Active ADDS the drafts, so
+ * "Draft" has to keep counting the drafts rather than drop to zero the moment
+ * Active is ticked.
+ */
+export declare function facetCounts<T>(rows: readonly T[], dimensions: readonly FilterDimension<T>[], active: Readonly<Record<string, readonly string[] | undefined>>, dimension: FilterDimension<T>): Record<string, number>;

package/dist/runtime/lib/dataTableFilters.js

@@ -21,3 +21,8 @@ export function matchesFilter(getter, row, active) {
   const values = filterValues(getter, row);
   return wanted.some((v) => values.includes(v));
 }
+export function facetCounts(rows, dimensions, active, dimension) {
+  const others = dimensions.filter((d) => d !== dimension && active[d.key]?.length);
+  const narrowed = others.length ? rows.filter((row) => others.every((d) => matchesFilter(d.getter, row, active[d.key]))) : rows;
+  return countByValue(narrowed, dimension.getter);
+}

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

@@ -0,0 +1,43 @@
+/**
+ * The parts of `DetailSheet` that are arithmetic rather than UI (PE-691).
+ *
+ * Kept out of the component and the composable so they can be tested without a
+ * router or a DOM: which record is next, what the query looks like with the
+ * panel open or shut, and whether a keypress belongs to the panel or to the
+ * control it landed on.
+ */
+export type QueryValue = string | null | (string | null)[] | undefined;
+export type Query = Record<string, QueryValue>;
+/** The open record id from a query value — the first one if a link repeats it. */
+export declare function idFromQuery(value: QueryValue): string | null;
+/** `query` with `key` set to `id`, or without `key` when `id` is null. */
+export declare function queryWith(query: Query, key: string, id: string | null): Query;
+/**
+ * The id `step` places away from `current` in `ids`, or null at either end.
+ *
+ * No wrap-around: arrowing past the last row and landing on the first reads as
+ * the list having jumped, and in a paginated list the first row is not even on
+ * the page. An id that is no longer in the list (deleted, filtered out) has no
+ * neighbours either — guessing one would open a record nobody pointed at.
+ */
+export declare function neighbourId(ids: readonly string[], current: string | null, step: -1 | 1): string | null;
+interface KeyEvent {
+    key: string;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+    defaultPrevented?: boolean;
+    target?: unknown;
+}
+/**
+ * Whether the focused element handles arrows and Escape itself: a text field
+ * (caret, clearing), a select, a menu, a listbox, a slider. The panel's keys
+ * give way there — taking them would break the control to save one click.
+ */
+export declare function targetOwnsKeys(target: unknown): boolean;
+/** Whether ArrowUp/ArrowDown should move to the neighbouring record, and which way. */
+export declare function isRecordStepKey(ev: KeyEvent): -1 | 1 | null;
+/** Whether Escape should close the panel rather than the control it landed on. */
+export declare function isCloseKey(ev: KeyEvent): boolean;
+export {};

package/dist/runtime/lib/detailSheet.js

@@ -0,0 +1,34 @@
+export function idFromQuery(value) {
+  const v = Array.isArray(value) ? value[0] : value;
+  return typeof v === "string" && v !== "" ? v : null;
+}
+export function queryWith(query, key, id) {
+  const next = { ...query };
+  if (id === null) delete next[key];
+  else next[key] = id;
+  return next;
+}
+export function neighbourId(ids, current, step) {
+  if (current === null) return null;
+  const i = ids.indexOf(current);
+  if (i < 0) return null;
+  return ids[i + step] ?? null;
+}
+export function targetOwnsKeys(target) {
+  const t = target;
+  if (!t) return false;
+  const tag = (t.tagName ?? "").toUpperCase();
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (t.isContentEditable) return true;
+  return !!t.closest?.('[role="menu"],[role="listbox"],[role="combobox"],[role="slider"],[role="spinbutton"],[role="radiogroup"],[role="tablist"]');
+}
+export function isRecordStepKey(ev) {
+  if (ev.defaultPrevented) return null;
+  if (ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey) return null;
+  const step = ev.key === "ArrowDown" ? 1 : ev.key === "ArrowUp" ? -1 : null;
+  if (step === null) return null;
+  return targetOwnsKeys(ev.target) ? null : step;
+}
+export function isCloseKey(ev) {
+  return ev.key === "Escape" && !ev.defaultPrevented && !targetOwnsKeys(ev.target);
+}

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

@@ -54,6 +54,11 @@ export interface FacetOption {
     count?: number;
     /** Greyed and unclickable, kept visible so the dimension still reads whole. */
     disabled?: boolean;
+    /**
+     * A second, smaller line — the customer number or e-mail that tells two
+     * options of the same name apart (a searched facet's hits, Michael 19.10.).
+     */
+    description?: string;
 }
 /** One node of a `tree` facet. */
 export interface FacetNode {
@@ -89,6 +94,14 @@ export interface Facet {
      * nothing, so offering it as a pair of checkboxes offers a dead end.
      */
     single?: boolean;
+    /**
+     * `check` over a set that grows with the tenant — organisations, contacts,
+     * price lists: the pane asks the server for what matches the panel's search
+     * box (an empty term browses the first page) instead of listing `options`.
+     * `options` then carries only the values already picked, with their names,
+     * so a ticked value stays on screen and the chips can name it.
+     */
+    search?: (term: string) => Promise<FacetOption[]>;
 }
 /** `{ from, to }`, either side optional. */
 export interface FacetRange {

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

@@ -0,0 +1,164 @@
+/**
+ * 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 `@lg` container size
+ * (32rem) 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;
+/**
+ * The label/value grid of a record card (Michael 19.10.: „ich will es gerne
+ * zweispaltig haben“). The read card and the same card opened with
+ * „Bearbeiten“ both draw their rows into this grid, so nothing moves when the
+ * values turn into inputs.
+ *
+ * One column of label/value rows until the grid itself is 832 px wide, two
+ * above — row-major, so the fields read left to right, top to bottom. A
+ * container query on the card body, not the viewport: a rail card, a dialog
+ * and a record page on a 1440 px window stay one column. The label keeps its
+ * 160 px column in each cell, so 832 px is where a half cell still leaves the
+ * value 228 px — a country with its flag and code, a currency, a date. Any
+ * narrower and the second column only squeezes inputs into stubs.
+ */
+export declare const PAIR_GRID_CLASS = "grid grid-cols-1 gap-x-8 gap-y-2.5 @min-[832px]:grid-cols-2 [clip-path:inset(-24px_-24px_1px_-24px)]";
+/** The grid-item class for a span inside {@link PAIR_GRID_CLASS}: a full field takes both columns. */
+export declare function pairSpanClass(span: FieldSpan): string;
+/** Every cell carries a faint rule underneath, so the eye finds each row fast (Michael 19.10.). */
+export declare const PAIR_CELL_CLASS = "min-w-0 border-b border-black/[0.06] pb-2.5";
+/**
+ * The compact control size on every form (Michael 19.10.: „stelle die
+ * Formularfelder auf die kleinen um … wir verlieren viel Höhe“): inputs,
+ * selects, comboboxes, lookups and number fields as tall as the card's own
+ * buttons (32 px, the design system's `FIELD_HEIGHT_SM`). Joined controls —
+ * phone (code + number), an input with a unit or currency addon — are an
+ * input group and follow too, unless the addon stacks above or below. Set on the field's
+ * wrapper so every control inside — studio's and ours — follows without a
+ * size prop threaded through each one. Textareas and the per-language stack
+ * keep their own height.
+ */
+export declare const COMPACT_CONTROLS_CLASS = "[&_[data-slot=input]]:h-8 [&_[data-slot=select-trigger]]:h-8 [&_[data-slot=combobox-select-trigger]]:h-8 [&_[data-slot=combobox-anchor]]:min-h-8 [&_[data-slot=number-field-input]]:h-8 [&_[data-slot=input-group]:not(:has(>[data-align^=block]))]:h-8";
+/**
+ * The scroll body of every modal that scrolls its fields between a fixed head
+ * and foot: the create wizard, the edit lightbox, an action's fields. A scroll
+ * container clips everything at its padding edge, focus rings included, so a
+ * field at the top or the side lost a stripe of its ring (Michael 19.10.:
+ * „betrifft das alle Modals?“). The body bleeds into the dialog's own gutter
+ * (24 px, 16 px on the phone sheet) and 4 px above and below, then pads the
+ * same amount back: content stays where it was, the ring gets room, and the
+ * scrollbar sits at the dialog edge. Add a height (`flex-1` in a flex column
+ * or a `max-h-*`) at the call site.
+ */
+export declare const DIALOG_SCROLL_CLASS = "overflow-y-auto overscroll-contain -mx-6 px-6 -my-1 py-1 max-md:-mx-4 max-md:px-4";
+/** {@link DIALOG_SCROLL_CLASS} filling the rest of a flex-column dialog. */
+export declare const DIALOG_BODY_CLASS = "min-h-0 flex-1 overflow-y-auto overscroll-contain -mx-6 px-6 -my-1 py-1 max-md:-mx-4 max-md:px-4";
+/**
+ * How wide a field's CONTROL is inside its cell (Charge 2: full-width pages,
+ * single fields sized by their content). The cell keeps its grid track; only
+ * the input shrinks — a postal code is five characters, not half a 1,400 px
+ * row. Label and hint keep the cell width.
+ *
+ * `null` = as wide as the cell (names, free text, references, anything long).
+ */
+export type FieldFit = 'xs' | 'sm' | 'md' | null;
+export interface FitSource {
+    type?: string | null;
+    name?: string | null;
+    format?: string | null;
+    /** An explicit fit wins; `auto`/absent lets the field decide. */
+    fit?: FieldFit | 'auto' | 'full' | string | null;
+}
+/** The control width a field gets when nothing says otherwise. */
+export declare function fieldFit(field: FitSource): FieldFit;
+/**
+ * The class that caps the control (everything in the field except its label
+ * and its hint/error paragraphs) at the fit's width. Whole literals for the
+ * Tailwind scanner.
+ */
+export declare function fitClass(fit: FieldFit): 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 takes the full width (S19, full-width pages: no centred
+ * 48rem column — single fields size themselves by content); 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,117 @@
+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",
+  // Read-side spellings of the same values on a record card.
+  "markets",
+  "gallery"
+]);
+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 @lg:col-span-2" : "col-span-1";
+}
+export const PAIR_GRID_CLASS = "grid grid-cols-1 gap-x-8 gap-y-2.5 @min-[832px]:grid-cols-2 [clip-path:inset(-24px_-24px_1px_-24px)]";
+export function pairSpanClass(span) {
+  return span === "full" ? `${PAIR_CELL_CLASS} @min-[832px]:col-span-2` : PAIR_CELL_CLASS;
+}
+export const PAIR_CELL_CLASS = "min-w-0 border-b border-black/[0.06] pb-2.5";
+export const COMPACT_CONTROLS_CLASS = "[&_[data-slot=input]]:h-8 [&_[data-slot=select-trigger]]:h-8 [&_[data-slot=combobox-select-trigger]]:h-8 [&_[data-slot=combobox-anchor]]:min-h-8 [&_[data-slot=number-field-input]]:h-8 [&_[data-slot=input-group]:not(:has(>[data-align^=block]))]:h-8";
+export const DIALOG_SCROLL_CLASS = "overflow-y-auto overscroll-contain -mx-6 px-6 -my-1 py-1 max-md:-mx-4 max-md:px-4";
+export const DIALOG_BODY_CLASS = `min-h-0 flex-1 ${DIALOG_SCROLL_CLASS}`;
+const XS_NAME = /(^|_)(zip|postal_code|postcode|plz|position|sort|sort_order|priority|rank|index|moq|min_order(_qty|_quantity)?|order_interval|qty|quantity|days|day_count|hours|percent|pct|rate|discount|decimals|step)($|_)/i;
+const SM_NAME = /(^|_)(code|sku|gtin|ean|iso|country|country_code|currency|vat_rate|tax_rate|customs_tariff|tariff|hs_code|unit|uom|packaging_unit|weight|width|height|depth|length|color|threshold|limit|amount|price|total|budget)($|_)/i;
+const MD_NAME = /(^|_)(phone|mobile|fax|tel|email|vat_id|customer_number|number|iban|bic|username|slug|key)($|_)/i;
+export function fieldFit(field) {
+  if (field.fit === "xs" || field.fit === "sm" || field.fit === "md") return field.fit;
+  if (field.fit === "full") return null;
+  const type = String(field.type ?? "text").trim().toLowerCase();
+  const name = String(field.name ?? "");
+  if (defaultSpan(type) === "full") return null;
+  if (type === "boolean" || type === "reference" || type === "relation") return null;
+  if (type === "date" || type === "time") return "sm";
+  if (type === "datetime") return "md";
+  if (type === "money" || type === "measure" || field.format === "money") return "sm";
+  if (field.format === "percent") return "xs";
+  if (type === "number") return XS_NAME.test(name) ? "xs" : "sm";
+  if (type === "tel" || type === "email" || type === "url") return "md";
+  if (type === "locale") return null;
+  if (type === "select" && /(^|_)(country|currency|language)($|_)/i.test(name)) return "md";
+  if (type === "select") return SM_NAME.test(name) ? "sm" : "md";
+  if (XS_NAME.test(name)) return "xs";
+  if (SM_NAME.test(name)) return "sm";
+  if (MD_NAME.test(name)) return "md";
+  return null;
+}
+export function fitClass(fit) {
+  switch (fit) {
+    case "xs":
+      return "[&>*:not(label):not(p)]:max-w-32";
+    case "sm":
+      return "[&>*:not(label):not(p)]:max-w-52";
+    case "md":
+      return "[&>*:not(label):not(p)]:max-w-80";
+    default:
+      return "";
+  }
+}
+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,1fr)] gap-6 @3xl:grid-cols-[10rem_minmax(0,1fr)] @5xl:grid-cols-[10rem_minmax(0,1fr)_16rem]";
+  if (nav)
+    return "grid grid-cols-[minmax(0,1fr)] gap-6 @3xl:grid-cols-[10rem_minmax(0,1fr)]";
+  if (context)
+    return "grid grid-cols-[minmax(0,1fr)] gap-6 @5xl:grid-cols-[minmax(0,1fr)_16rem]";
+  return "grid grid-cols-[minmax(0,1fr)] 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();
+}