@revenexx/studio-shared 0.4.0 → 0.4.2

package/dist/runtime/composables/useWidgetFigures.js

@@ -0,0 +1,24 @@
+import { getCurrentInstance, inject, onBeforeUnmount, provide, ref, toValue, watch } from "vue";
+const WIDGET_FIGURES = Symbol("widgetFigures");
+export function provideWidgetFigures() {
+  const figures = ref(null);
+  provide(WIDGET_FIGURES, figures);
+  return figures;
+}
+export function useWidgetFigures(figures) {
+  const target = inject(WIDGET_FIGURES, null);
+  if (!target) return;
+  watch(
+    () => toValue(figures)?.filter((f) => f.label && f.value) ?? null,
+    (next) => {
+      target.value = next?.length ? next : null;
+    },
+    { immediate: true, deep: true }
+  );
+  if (getCurrentInstance()) onBeforeUnmount(() => {
+    target.value = null;
+  });
+}
+export function figuresText(figures) {
+  return figures?.map((f) => `${f.label}: ${f.value}`).join("\n") ?? "";
+}

package/dist/runtime/composables/useWidgetHeader.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+export interface WidgetHeaderStatus {
+    /** Show the loading indicator. */
+    busy: boolean;
+    /** One short line; truncated to fit beside the title. */
+    text: string;
+    /** How far along, 0 to 100. Omit when unknown: the frame shows a spinner. */
+    progress?: number;
+}
+/** Called by the frame: the status its widget may set, provided to the widget below it. */
+export declare function provideWidgetHeader(): Ref<WidgetHeaderStatus | null>;
+/** Called by a widget: set or clear the status its frame shows. */
+export declare function useWidgetHeader(): {
+    setStatus: (next: WidgetHeaderStatus | null) => void;
+};

package/dist/runtime/composables/useWidgetHeader.js

@@ -0,0 +1,15 @@
+import { getCurrentInstance, inject, onBeforeUnmount, provide, ref } from "vue";
+const WIDGET_HEADER_STATUS = Symbol("widgetHeaderStatus");
+export function provideWidgetHeader() {
+  const status = ref(null);
+  provide(WIDGET_HEADER_STATUS, status);
+  return status;
+}
+export function useWidgetHeader() {
+  const status = inject(WIDGET_HEADER_STATUS, null);
+  function setStatus(next) {
+    if (status) status.value = next;
+  }
+  if (getCurrentInstance()) onBeforeUnmount(() => setStatus(null));
+  return { setStatus };
+}

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/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

@@ -29,12 +29,81 @@ 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 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;
 /**
@@ -68,8 +137,9 @@ export declare function isScrolledToEnd(scrollTop: number, clientHeight: number,
 /**
  * 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
+ * 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

package/dist/runtime/lib/formLayout.js

@@ -19,7 +19,10 @@ const FULL_WIDTH_TYPES = /* @__PURE__ */ new Set([
   "record-view",
   "address",
   "tree-assign",
-  "line-selection"
+  "line-selection",
+  // Read-side spellings of the same values on a record card.
+  "markets",
+  "gallery"
 ]);
 export function defaultSpan(fieldType) {
   if (!fieldType) return "half";
@@ -30,7 +33,51 @@ export function resolveSpan(field) {
   return defaultSpan(field.type);
 }
 export function spanClass(span) {
-  return span === "full" ? "col-span-1 @md:col-span-2" : "col-span-1";
+  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) {
@@ -53,12 +100,12 @@ export function isScrolledToEnd(scrollTop, clientHeight, scrollHeight) {
 }
 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]";
+    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,48rem)] justify-center gap-6 @3xl:grid-cols-[10rem_minmax(0,48rem)]";
+    return "grid grid-cols-[minmax(0,1fr)] gap-6 @3xl:grid-cols-[10rem_minmax(0,1fr)]";
   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";
+    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";

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

@@ -26,6 +26,19 @@
  * more. Below this a column stops being a column and becomes a smear.
  */
 export declare const FLEX_TRACK_FLOOR = "120px";
+/**
+ * A flexible column's floor that keeps its one-line heading inside the track.
+ *
+ * A heading stays on one line up to a length (`whitespace-nowrap`); squeezed
+ * to the 120px floor, „Was es bedeutet“ with its (?) and sort arrow ran into
+ * „Aktiv“ beside it (e2e 18.10.). An estimate, not a measurement: about 7.5px
+ * per character at the header's text size, plus room for the icons beside it.
+ * `undefined` when the plain floor is enough.
+ */
+export declare function headerFloor(label: string | undefined | null, opts?: {
+    icons?: number;
+    maxChars?: number;
+}): string | undefined;
 /**
  * One column's declared width, resolved to a track with a floor under it.
  *
@@ -52,4 +65,4 @@ export declare function trackFor(width: string | undefined | null, floor?: strin
  * 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;
+export declare function gridTemplateColumns(widths: Array<string | undefined | null>, floor?: string, floors?: Array<string | undefined>): string;

package/dist/runtime/lib/gridTracks.js

@@ -1,4 +1,10 @@
 export const FLEX_TRACK_FLOOR = "120px";
+export function headerFloor(label, opts = {}) {
+  const text = (label ?? "").trim();
+  if (!text || opts.maxChars != null && text.length > opts.maxChars) return void 0;
+  const px = Math.ceil(text.length * 7.5) + (opts.icons ?? 0) * 18;
+  return px > Number.parseFloat(FLEX_TRACK_FLOOR) ? `${px}px` : void 0;
+}
 const MINMAX_FR = /^minmax\(\s*[^,]+,\s*([\d.]+fr)\s*\)$/i;
 const BARE_FR = /^([\d.]+)fr$/i;
 export function trackFor(width, floor = FLEX_TRACK_FLOOR) {
@@ -18,8 +24,13 @@ 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));
+export function gridTemplateColumns(widths, floor, floors) {
+  const tracks = widths.map((w, i) => {
+    const own = floors?.[i];
+    const track = trackFor(w, own ?? floor);
+    if (own && /^\d+(\.\d+)?px$/.test(track) && Number.parseFloat(track) < Number.parseFloat(own)) return own;
+    return track;
+  });
   if (tracks.length === 0) return "";
   if (!tracks.some(isFlexible)) {
     const last = tracks.length - 1;

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

@@ -1,6 +1,6 @@
 /**
- * The two international lists every studio ends up needing: countries
- * (ISO 3166-1 alpha-2) and currencies (ISO 4217).
+ * The international lists every studio ends up needing: countries
+ * (ISO 3166-1 alpha-2), currencies (ISO 4217) and languages (ISO 639-1).
  *
  * They live in `studio-shared` rather than in a studio because a country is
  * not a Commerce concern — Mail wants a sender country, Analytics wants a
@@ -59,3 +59,38 @@ export declare function currencyOptions(locale?: string): IsoOption[];
 export declare function countryLabel(code: unknown, locale?: string): string;
 /** `'EUR'` → `'Euro'`. Unknown codes come back unchanged. */
 export declare function currencyLabel(code: unknown, locale?: string): string;
+/** ISO 639-1, unsorted. Use `languageOptions()` to display them. */
+export declare function languageCodes(): readonly string[];
+/** Every language, sorted by its name in `locale` — „Deutsch“, „Englisch“ … */
+export declare function languageOptions(locale?: string): IsoOption[];
+/** `'de'` → `'Deutsch'`, `'de-AT'` → `'Deutsch (Österreich)'`. Unknown codes come back unchanged. */
+export declare function languageLabel(code: unknown, locale?: string): string;
+/**
+ * The circle flag a currency is drawn with (Michael 18.10.: icons in the
+ * currency picker, the same round look as the countries). The vendored flag
+ * set has no currency symbols, so a currency borrows its issuer's flag: the
+ * euro the EU's, every national currency its country's — ISO 4217 codes start
+ * with the issuing country (`CHF` → CH, `GBP` → GB). Supranational and special
+ * codes (`X…`: CFA franc, gold, SDR) have no single issuer and get the neutral
+ * disc. Returns the lowercase slug `CircleFlag` takes.
+ */
+export declare function currencyFlag(code: unknown): string;
+/** `'da'` → `'DK'`; null for a language with no single home country. */
+export declare function likelyCountry(language: unknown): string | null;
+/**
+ * The circle flag a language or locale is drawn with, as the lowercase slug
+ * `CircleFlag` takes: the chosen region when there is one (`de-AT` → `at`),
+ * otherwise the language's likely country (`de` → `de`, `en` → `gb`), and
+ * `''` when neither exists — the caller then shows its neutral globe.
+ */
+export declare function localeFlag(code: unknown): string;
+/**
+ * A locale code split into the two choices a picker offers — language and an
+ * optional region — and put back together (`de` + `AT` → `de-AT`). Null when
+ * the runtime cannot canonicalise it, which is how a nonsense tag is refused.
+ */
+export declare function composeLocale(language: string | null | undefined, region?: string | null): string | null;
+export declare function splitLocale(code: unknown): {
+    language: string | null;
+    region: string | null;
+};

package/dist/runtime/lib/isoLists.js

@@ -1,6 +1,9 @@
 const COUNTRY_CODES = Object.freeze(
   "AD AE AF AG AI AL AM AO AQ AR AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BO BQ BR BS BT BV BW BY BZ CA CC CD CF CG CH CI CK CL CM CN CO CR CU CV CW CX CY CZ DE DJ DK DM DO DZ EC EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL GM GN GP GQ GR GS GT GU GW GY HK HM HN HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR MS MT MU MV MW MX MY MZ NA NC NE NF NG NI NL NO NP NR NU NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW PY QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SV SX SY SZ TC TD TF TG TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UY UZ VA VC VE VG VI VN VU WF WS YE YT ZA ZM ZW".split(" ")
 );
+const LANGUAGE_CODES = Object.freeze(
+  "aa ab ae af ak am an ar as av ay az ba be bg bi bm bn bo br bs ca ce ch co cr cs cu cv cy da de dv dz ee el en eo es et eu fa ff fi fj fo fr fy ga gd gl gn gu gv ha he hi ho hr ht hu hy hz ia id ie ig ii ik io is it iu ja jv ka kg ki kj kk kl km kn ko kr ks ku kv kw ky la lb lg li ln lo lt lu lv mg mh mi mk ml mn mr ms mt my na nb nd ne ng nl nn no nr nv ny oc oj om or os pa pi pl ps pt qu rm rn ro ru rw sa sc sd se sg si sk sl sm sn so sq sr ss st su sv sw ta te tg th ti tk tl tn to tr ts tt tw ty ug uk ur uz ve vi vo wa wo xh yi yo za zh zu".split(" ")
+);
 export const DEFAULT_ISO_LOCALE = "de";
 export function countryCodes() {
   return COUNTRY_CODES;
@@ -31,7 +34,10 @@ function collator(locale) {
 function build(codes, type, locale) {
   const names = displayNames(type, locale);
   const compare = collator(locale).compare;
-  return codes.map((code) => ({ code, label: names?.of(code) || code })).sort((a, b) => compare(a.label, b.label));
+  return codes.map((code) => {
+    const name = names?.of(code);
+    return { code, label: name || code, named: !!name && name.toLowerCase() !== code.toLowerCase() };
+  }).sort((a, b) => Number(b.named) - Number(a.named) || compare(a.label, b.label)).map(({ code, label }) => ({ code, label }));
 }
 const cache = /* @__PURE__ */ new Map();
 function cached(key, make) {
@@ -60,3 +66,50 @@ export function currencyLabel(code, locale = DEFAULT_ISO_LOCALE) {
   if (!key) return "";
   return displayNames("currency", locale)?.of(key) || key;
 }
+export function languageCodes() {
+  return LANGUAGE_CODES;
+}
+export function languageOptions(locale = DEFAULT_ISO_LOCALE) {
+  return cached(`language:${locale}`, () => build(LANGUAGE_CODES, "language", locale));
+}
+export function languageLabel(code, locale = DEFAULT_ISO_LOCALE) {
+  const key = typeof code === "string" ? code.trim().replace("_", "-") : "";
+  if (!key) return "";
+  return displayNames("language", locale)?.of(key) || key;
+}
+export function currencyFlag(code) {
+  const key = typeof code === "string" ? code.trim().toUpperCase() : "";
+  if (key === "EUR") return "eu";
+  if (!/^[A-Z]{3}$/.test(key) || key.startsWith("X")) return "xx";
+  const issuer = key.slice(0, 2);
+  return COUNTRY_CODES.includes(issuer) ? issuer.toLowerCase() : "xx";
+}
+const LIKELY_COUNTRY = Object.freeze(Object.fromEntries(
+  "aa:ET ab:GE af:ZA ak:GH am:ET an:ES ar:EG as:IN av:RU ay:BO az:AZ ba:RU be:BY bg:BG bi:VU bm:ML bn:BD bo:CN br:FR bs:BA ca:ES ce:RU ch:GU co:FR cr:CA cs:CZ cv:RU cy:GB da:DK de:DE dv:MV dz:BT ee:GH el:GR en:GB es:ES et:EE eu:ES fa:IR ff:SN fi:FI fj:FJ fo:FO fr:FR fy:NL ga:IE gd:GB gl:ES gn:PY gu:IN gv:IM ha:NG he:IL hi:IN ho:PG hr:HR ht:HT hu:HU hy:AM hz:NA id:ID ig:NG ii:CN ik:US is:IS it:IT iu:CA ja:JP jv:ID ka:GE kg:CD ki:KE kj:NA kk:KZ kl:GL km:KH kn:IN ko:KR kr:NG ks:IN ku:TR kv:RU kw:GB ky:KG lb:LU lg:UG li:NL ln:CD lo:LA lt:LT lu:CD lv:LV mg:MG mh:MH mi:NZ mk:MK ml:IN mn:MN mr:IN ms:MY mt:MT my:MM na:NR nb:NO nd:ZW ne:NP ng:NA nl:NL nn:NO no:NO nr:ZA nv:US ny:MW oc:FR oj:CA om:ET or:IN os:GE pa:IN pl:PL ps:AF pt:PT qu:PE rm:CH rn:BI ro:RO ru:RU rw:RW sa:IN sc:IT sd:PK se:NO sg:CF si:LK sk:SK sl:SI sm:WS sn:ZW so:SO sq:AL sr:RS ss:ZA st:ZA su:ID sv:SE sw:TZ ta:IN te:IN tg:TJ th:TH ti:ET tk:TM tl:PH tn:ZA to:TO tr:TR ts:ZA tt:RU tw:GH ty:PF ug:CN uk:UA ur:PK uz:UZ ve:ZA vi:VN wa:BE wo:SN xh:ZA yo:NG za:CN zh:CN zu:ZA".split(" ").map((pair) => pair.split(":"))
+));
+export function likelyCountry(language) {
+  const key = typeof language === "string" ? language.trim().toLowerCase() : "";
+  return LIKELY_COUNTRY[key] ?? null;
+}
+export function localeFlag(code) {
+  const { language, region } = splitLocale(code);
+  if (region) return region.toLowerCase();
+  return likelyCountry(language)?.toLowerCase() ?? "";
+}
+export function composeLocale(language, region) {
+  const lang = (language ?? "").trim().toLowerCase();
+  if (!/^[a-z]{2,3}$/.test(lang)) return null;
+  const reg = (region ?? "").trim().toUpperCase();
+  const tag = reg ? `${lang}-${reg}` : lang;
+  try {
+    return Intl.getCanonicalLocales(tag)[0] ?? null;
+  } catch {
+    return null;
+  }
+}
+export function splitLocale(code) {
+  const raw = typeof code === "string" ? code.trim().replace("_", "-") : "";
+  if (!raw) return { language: null, region: null };
+  const [language, region] = raw.split("-");
+  return { language: language?.toLowerCase() || null, region: region && /^[A-Za-z]{2}$/.test(region) ? region.toUpperCase() : null };
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Headline + subtitle out of one paragraph (EmptyNote, Michael 19.10.).
+ *
+ * Copy written as a single paragraph — a placeholder tab, an empty-state
+ * sentence — still has to read as a headline with an explanation under it.
+ * The first sentence heads, the rest explains. An abbreviation ("z. B.",
+ * "bzw.", "Nr.") does not end a sentence, so a short or dotted word before
+ * the period never splits.
+ */
+export interface NoticeParts {
+    title: string;
+    description: string | null;
+}
+export declare function splitNotice(text: string | null | undefined): NoticeParts;