@dataverse-kit/surface-kit 0.4.1 → 0.5.0

package/README.md

@@ -55,5 +55,34 @@ export function AccountForm() {
 | `fromFormDefinition` | Adapter that builds a surface tree from a (duck-typed) form definition. |
 | `createDynamicsTheme` | Canonical Dynamics token theme factory. |
 | `./core`, `./responsive` (subpaths) | Pure-TS sizing scalars and breakpoint/style builders — framework-agnostic, shared with the export-engine codegen. |
+| `./v9`: `CommandSurface look="ce"` | The Dynamics command bar card: back / pop-out, abutting commands (16px icons), menu and split commands, ⋮ overflow, outlined far items (Share). Every command within 0.2px of the org. Pass 16px icons for commands, 20px for far items; overflow folding is explicit (`overflowItems`). |
+| `./v9`: `FormHeader` + `PivotSurface look="ce"` | The Dynamics record header (avatar, title + status, entity · form switcher, header fields, owner, expand) inside the header card with the tab strip; the selected tab's content renders below the card. `PivotSurface`'s ce look is opt-in (`look="ce"`), and it needs a width-constrained parent (`minWidth: 0` on a grid/flex item) so a long header truncates inside the card. Measured against the org to 0.1px at full width. |
+| `./v9`: `FieldRow`, `TabColumns`, `FormSurface look="ce"` | Fluent v9 layouts for forms that look identical to Dynamics CE. Under `look="ce"` they follow the model-driven form measured on a live org: 184px label column, 44/48px rows, the label moving above the control on narrow rows, and tab columns by declared share with a 340px floor. Pair with `dynamicsCeTheme` and stock Fluent controls using `appearance="filled-darker"`. Evidence: `apps/ce-parity/reference/`. |
+
+### Dynamics-identical form (v9)
+
+```tsx
+import { FluentProvider, Input } from '@fluentui/react-components';
+import { FormSurface, TabColumns, Section, FieldRow, dynamicsCeTheme } from '@dataverse-kit/surface-kit/v9';
+
+<FluentProvider theme={dynamicsCeTheme}>
+  <FormSurface look="ce">
+    <TabColumns widths={[33, 42, 25]}>
+      <Section title="ACCOUNT INFORMATION">
+        <FieldRow label="Account Name" htmlFor="name" required>
+          <Input id="name" appearance="filled-darker" placeholder="---" />
+        </FieldRow>
+      </Section>
+      <Section>{/* … */}</Section>
+      <Section>{/* … */}</Section>
+    </TabColumns>
+  </FormSurface>
+</FluentProvider>
+```
+
+> Put `FieldRow`s in a `Section`: under `look="ce"` it is the measured Dynamics section (shadow4
+> card, 8px radius, title as given, gap-free body that pulls rows up so the first sits at 8px). For a
+> multi-column section pass `internalColumns={2}` and one child per column (equal columns, 21px
+> gutter). Verified against the org in a real browser: `apps/ce-parity` *Tab layouts* stories.
 
 > See [`CLAUDE.md`](./CLAUDE.md) for the full architecture / contributor reference.

package/dist/core.cjs

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var core_exports = {};
 __export(core_exports, {
   CALLOUT_DEFAULT_WIDTH: () => CALLOUT_DEFAULT_WIDTH,
+  CE_LABEL_ABOVE_BELOW_ROW_WIDTH: () => CE_LABEL_ABOVE_BELOW_ROW_WIDTH,
+  CE_TAB_COLUMN_MIN_WIDTH: () => CE_TAB_COLUMN_MIN_WIDTH,
   DIALOG_SIZE_PX: () => DIALOG_SIZE_PX,
   MODAL_AUTOSIZE_MIN_WIDTH: () => MODAL_AUTOSIZE_MIN_WIDTH,
   PANEL_DEFAULT_WIDTH: () => PANEL_DEFAULT_WIDTH,
@@ -31,8 +33,10 @@ __export(core_exports, {
   dialogWidthCss: () => dialogWidthCss,
   dialogWidthPx: () => dialogWidthPx,
   gridTemplateForColumns: () => gridTemplateForColumns,
+  normalizeColumnShares: () => normalizeColumnShares,
   panelCustomWidthPx: () => panelCustomWidthPx,
-  panelKindFromWidth: () => panelKindFromWidth
+  panelKindFromWidth: () => panelKindFromWidth,
+  resolveTabColumnWidths: () => resolveTabColumnWidths
 });
 module.exports = __toCommonJS(core_exports);
 
@@ -81,9 +85,39 @@ function clampSpan(span, columns) {
   if (!Number.isFinite(span)) return 1;
   return Math.max(1, Math.min(Math.round(span), columns));
 }
+
+// src/core/ceLayout.ts
+var CE_TAB_COLUMN_MIN_WIDTH = 340;
+function normalizeColumnShares(shares) {
+  const clean = shares.map((s) => Number.isFinite(s) && s > 0 ? s : 0);
+  const total = clean.reduce((a, b) => a + b, 0);
+  if (total <= 0) return shares.map(() => 100 / (shares.length || 1));
+  return clean.map((s) => s / total * 100);
+}
+function resolveTabColumnWidths(shares, available, minWidth = CE_TAB_COLUMN_MIN_WIDTH) {
+  if (shares.length === 0) return [];
+  shares = normalizeColumnShares(shares);
+  const clamped = /* @__PURE__ */ new Set();
+  let widths = [];
+  for (let pass = 0; pass <= shares.length; pass++) {
+    const free = available - clamped.size * minWidth;
+    const total = shares.reduce((sum, s, i) => clamped.has(i) ? sum : sum + Math.max(0, s), 0);
+    widths = shares.map((s, i) => {
+      if (clamped.has(i)) return minWidth;
+      return total > 0 ? Math.max(0, s) / total * free : free / (shares.length - clamped.size);
+    });
+    const violators = widths.map((w, i) => !clamped.has(i) && w < minWidth ? i : -1).filter((i) => i >= 0);
+    if (violators.length === 0) break;
+    violators.forEach((i) => clamped.add(i));
+  }
+  return widths;
+}
+var CE_LABEL_ABOVE_BELOW_ROW_WIDTH = 340;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CALLOUT_DEFAULT_WIDTH,
+  CE_LABEL_ABOVE_BELOW_ROW_WIDTH,
+  CE_TAB_COLUMN_MIN_WIDTH,
   DIALOG_SIZE_PX,
   MODAL_AUTOSIZE_MIN_WIDTH,
   PANEL_DEFAULT_WIDTH,
@@ -94,7 +128,9 @@ function clampSpan(span, columns) {
   dialogWidthCss,
   dialogWidthPx,
   gridTemplateForColumns,
+  normalizeColumnShares,
   panelCustomWidthPx,
-  panelKindFromWidth
+  panelKindFromWidth,
+  resolveTabColumnWidths
 });
 //# sourceMappingURL=core.cjs.map

package/dist/core.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/index.ts","../src/core/sizePresets.ts","../src/core/columns.ts"],"sourcesContent":["export * from './sizePresets';\nexport * from './columns';\n","// Pure-TS sizing scalars for overlay surfaces. The SINGLE SOURCE of the numbers\n// that both surface-kit's runtime overlays AND the export-engine codegen use, so a\n// Dialog is 1200px wide in exactly one place. Framework-agnostic (no react/@fluentui).\n//\n// Values mirror export-engine/src/generators/FormCodeGenerator.ts (v8 branches):\n//   dialog: default width 1200; height <=100 -> `${h}vh` else '95vh'\n//   panel:  kind = (width ?? 480) > 500 ? 'medium' : 'custom'; custom width = width ?? 480\n//   callout (form-type): default width 320; directionalHint 'bottomLeftEdge'\n// v1c wires export-engine to import these; a byte-identical emission test guards drift.\n\n// --- Dialog --------------------------------------------------------------------\n\nexport type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n\n// NOTE: only the lg = 1200 default and an explicit `width` are the shared-with-codegen\n// contract (export-engine does `width ?? 1200`). The sm/md/xl/fullscreen presets are\n// surface-kit runtime conveniences with no codegen counterpart — v1c does NOT consume them.\nexport const DIALOG_SIZE_PX = {\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1600,\n} as const;\n\n/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */\nexport function dialogWidthPx(opts: { width?: number; size?: DialogSizePreset } = {}): number {\n  if (typeof opts.width === 'number') return opts.width;\n  const size = opts.size ?? 'lg';\n  // fullscreen is clamped by 95vw at the CSS layer; fall back to the largest preset for the px hint.\n  if (size === 'fullscreen') return DIALOG_SIZE_PX.xl;\n  return DIALOG_SIZE_PX[size];\n}\n\n/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */\nexport function dialogWidthCss(opts: { width?: number; size?: DialogSizePreset } = {}): string {\n  if (opts.size === 'fullscreen' && opts.width == null) return '95vw';\n  return `${dialogWidthPx(opts)}px`;\n}\n\n/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */\nexport function dialogHeightCss(height?: number): string {\n  return height != null && height <= 100 ? `${height}vh` : '95vh';\n}\n\n/** Min width for an auto-sized ModalSurface (the Track-and-Ship \"min 1000, auto\" pattern). */\nexport const MODAL_AUTOSIZE_MIN_WIDTH = 1000;\n\n// --- Panel ---------------------------------------------------------------------\n\nexport type PanelKind = 'medium' | 'custom';\nexport const PANEL_DEFAULT_WIDTH = 480;\n\n/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */\nexport function panelKindFromWidth(width?: number): PanelKind {\n  return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? 'medium' : 'custom';\n}\n\n/** customWidth px for a `custom` panel. */\nexport function panelCustomWidthPx(width?: number): number {\n  return width ?? PANEL_DEFAULT_WIDTH;\n}\n\n// --- Callout -------------------------------------------------------------------\n\nexport const CALLOUT_DEFAULT_WIDTH = 320;\n\n/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */\nexport const calloutFormDefaults = {\n  width: CALLOUT_DEFAULT_WIDTH,\n  directionalHint: 'bottomLeftEdge',\n} as const;\n\nexport function calloutWidthPx(width?: number): number {\n  return width ?? CALLOUT_DEFAULT_WIDTH;\n}\n","// Pure-TS column helpers shared by layouts/containers and the responsive builders.\nexport type ColumnCount = 1 | 2 | 3 | 4;\n\n/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */\nexport function gridTemplateForColumns(columns: ColumnCount): string {\n  return `repeat(${columns}, 1fr)`;\n}\n\n/** Clamp a cell column-span to the available column count (min 1). */\nexport function clampSpan(span: number, columns: ColumnCount): number {\n  if (!Number.isFinite(span)) return 1;\n  return Math.max(1, Math.min(Math.round(span), columns));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACiBO,IAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,cAAc,OAAoD,CAAC,GAAW;AAC5F,MAAI,OAAO,KAAK,UAAU,SAAU,QAAO,KAAK;AAChD,QAAM,OAAO,KAAK,QAAQ;AAE1B,MAAI,SAAS,aAAc,QAAO,eAAe;AACjD,SAAO,eAAe,IAAI;AAC5B;AAGO,SAAS,eAAe,OAAoD,CAAC,GAAW;AAC7F,MAAI,KAAK,SAAS,gBAAgB,KAAK,SAAS,KAAM,QAAO;AAC7D,SAAO,GAAG,cAAc,IAAI,CAAC;AAC/B;AAGO,SAAS,gBAAgB,QAAyB;AACvD,SAAO,UAAU,QAAQ,UAAU,MAAM,GAAG,MAAM,OAAO;AAC3D;AAGO,IAAM,2BAA2B;AAKjC,IAAM,sBAAsB;AAG5B,SAAS,mBAAmB,OAA2B;AAC5D,UAAQ,SAAS,uBAAuB,MAAM,WAAW;AAC3D;AAGO,SAAS,mBAAmB,OAAwB;AACzD,SAAO,SAAS;AAClB;AAIO,IAAM,wBAAwB;AAG9B,IAAM,sBAAsB;AAAA,EACjC,OAAO;AAAA,EACP,iBAAiB;AACnB;AAEO,SAAS,eAAe,OAAwB;AACrD,SAAO,SAAS;AAClB;;;ACtEO,SAAS,uBAAuB,SAA8B;AACnE,SAAO,UAAU,OAAO;AAC1B;AAGO,SAAS,UAAU,MAAc,SAA8B;AACpE,MAAI,CAAC,OAAO,SAAS,IAAI,EAAG,QAAO;AACnC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,IAAI,GAAG,OAAO,CAAC;AACxD;","names":[]}
+{"version":3,"sources":["../src/core/index.ts","../src/core/sizePresets.ts","../src/core/columns.ts","../src/core/ceLayout.ts"],"sourcesContent":["export * from './sizePresets';\nexport * from './columns';\nexport * from './ceLayout';\n","// Pure-TS sizing scalars for overlay surfaces. The SINGLE SOURCE of the numbers\n// that both surface-kit's runtime overlays AND the export-engine codegen use, so a\n// Dialog is 1200px wide in exactly one place. Framework-agnostic (no react/@fluentui).\n//\n// Values mirror export-engine/src/generators/FormCodeGenerator.ts (v8 branches):\n//   dialog: default width 1200; height <=100 -> `${h}vh` else '95vh'\n//   panel:  kind = (width ?? 480) > 500 ? 'medium' : 'custom'; custom width = width ?? 480\n//   callout (form-type): default width 320; directionalHint 'bottomLeftEdge'\n// v1c wires export-engine to import these; a byte-identical emission test guards drift.\n\n// --- Dialog --------------------------------------------------------------------\n\nexport type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n\n// NOTE: only the lg = 1200 default and an explicit `width` are the shared-with-codegen\n// contract (export-engine does `width ?? 1200`). The sm/md/xl/fullscreen presets are\n// surface-kit runtime conveniences with no codegen counterpart — v1c does NOT consume them.\nexport const DIALOG_SIZE_PX = {\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1600,\n} as const;\n\n/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */\nexport function dialogWidthPx(opts: { width?: number; size?: DialogSizePreset } = {}): number {\n  if (typeof opts.width === 'number') return opts.width;\n  const size = opts.size ?? 'lg';\n  // fullscreen is clamped by 95vw at the CSS layer; fall back to the largest preset for the px hint.\n  if (size === 'fullscreen') return DIALOG_SIZE_PX.xl;\n  return DIALOG_SIZE_PX[size];\n}\n\n/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */\nexport function dialogWidthCss(opts: { width?: number; size?: DialogSizePreset } = {}): string {\n  if (opts.size === 'fullscreen' && opts.width == null) return '95vw';\n  return `${dialogWidthPx(opts)}px`;\n}\n\n/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */\nexport function dialogHeightCss(height?: number): string {\n  return height != null && height <= 100 ? `${height}vh` : '95vh';\n}\n\n/** Min width for an auto-sized ModalSurface (the Track-and-Ship \"min 1000, auto\" pattern). */\nexport const MODAL_AUTOSIZE_MIN_WIDTH = 1000;\n\n// --- Panel ---------------------------------------------------------------------\n\nexport type PanelKind = 'medium' | 'custom';\nexport const PANEL_DEFAULT_WIDTH = 480;\n\n/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */\nexport function panelKindFromWidth(width?: number): PanelKind {\n  return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? 'medium' : 'custom';\n}\n\n/** customWidth px for a `custom` panel. */\nexport function panelCustomWidthPx(width?: number): number {\n  return width ?? PANEL_DEFAULT_WIDTH;\n}\n\n// --- Callout -------------------------------------------------------------------\n\nexport const CALLOUT_DEFAULT_WIDTH = 320;\n\n/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */\nexport const calloutFormDefaults = {\n  width: CALLOUT_DEFAULT_WIDTH,\n  directionalHint: 'bottomLeftEdge',\n} as const;\n\nexport function calloutWidthPx(width?: number): number {\n  return width ?? CALLOUT_DEFAULT_WIDTH;\n}\n","// Pure-TS column helpers shared by layouts/containers and the responsive builders.\nexport type ColumnCount = 1 | 2 | 3 | 4;\n\n/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */\nexport function gridTemplateForColumns(columns: ColumnCount): string {\n  return `repeat(${columns}, 1fr)`;\n}\n\n/** Clamp a cell column-span to the available column count (min 1). */\nexport function clampSpan(span: number, columns: ColumnCount): number {\n  if (!Number.isFinite(span)) return 1;\n  return Math.max(1, Math.min(Math.round(span), columns));\n}\n","// Pure-TS layout rules MEASURED on a live Dynamics 365 CE model-driven form (the UCI \"new look\").\n// Evidence: dynamics-ui-kit apps/ce-parity/reference/ (captures + ce-layout-reference.json).\n// No React / Fluent imports: this file is inlined by export-engine like the rest of core/.\n\n/** The appearance family a surface renders in: the kit's existing look, or the measured CE form. */\nexport type SurfaceLook = 'default' | 'ce';\n\n/**\n * A Dynamics tab column never renders narrower than this (px). Measured: a 25% column in a\n * 1106px tab body renders 340, not 276.5.\n */\nexport const CE_TAB_COLUMN_MIN_WIDTH = 340;\n\n/**\n * Normalise declared column shares so they sum to 100: negative or non-finite shares count as 0,\n * and all-zero (or empty-of-positive) input becomes equal shares. `TabColumns` renders the\n * NORMALISED shares, and `resolveTabColumnWidths` normalises too, so the CSS and this function\n * always agree. (CSS flexbox treats a flex-grow sum below 1 differently — it leaves free space\n * unused — and never grows a flex-grow-0 item; normalising removes both divergences.)\n */\nexport function normalizeColumnShares(shares: readonly number[]): number[] {\n  const clean = shares.map((s) => (Number.isFinite(s) && s > 0 ? s : 0));\n  const total = clean.reduce((a, b) => a + b, 0);\n  if (total <= 0) return shares.map(() => 100 / (shares.length || 1));\n  return clean.map((s) => (s / total) * 100);\n}\n\n/**\n * Resolve the rendered width of each tab column, the way Dynamics does.\n *\n * Each column takes its declared share (the formxml column `width`, e.g. 33 / 42 / 25) of the\n * space left after the gaps, but never goes below `minWidth`. The shortfall of a clamped column is\n * taken from the unclamped columns in proportion to their declared shares. That is CSS flexbox\n * with `flex: <share> 1 0` and `min-width` over NORMALISED shares (see normalizeColumnShares),\n * which is how `TabColumns` renders it.\n * This function exists so the rule can be tested and used where there is no DOM (e.g. sizing\n * from a PCF `allocatedWidth`).\n *\n * Verified against every measured layout: 33/42/25 at a 1450, 1240 and 1106px row gives\n * 478.5/609/362.5, 396/504/340 and 340/426/340; 34/33/33 at 1450 gives 493/478.5/478.5.\n *\n * @param shares   Declared column shares (percentages are the usual case; they are normalised).\n * @param available Row width in px AFTER subtracting the gaps between columns.\n * @param minWidth Minimum rendered column width. Defaults to the measured 340.\n * @returns Widths in px, in column order. If every column hits the floor the widths sum to more\n *          than `available`; the caller wraps or scrolls (Dynamics' behaviour there is unmeasured).\n */\nexport function resolveTabColumnWidths(\n  shares: readonly number[],\n  available: number,\n  minWidth: number = CE_TAB_COLUMN_MIN_WIDTH,\n): number[] {\n  if (shares.length === 0) return [];\n  shares = normalizeColumnShares(shares);\n  const clamped = new Set<number>();\n  let widths: number[] = [];\n  // Resolve like the flexbox algorithm: distribute, freeze violators, redistribute, until none violate.\n  for (let pass = 0; pass <= shares.length; pass++) {\n    const free = available - clamped.size * minWidth;\n    const total = shares.reduce((sum, s, i) => (clamped.has(i) ? sum : sum + Math.max(0, s)), 0);\n    widths = shares.map((s, i) => {\n      if (clamped.has(i)) return minWidth;\n      return total > 0 ? (Math.max(0, s) / total) * free : free / (shares.length - clamped.size);\n    });\n    // CSS Flexbox §9.7: when the total violation is positive (only min-width constraints exist\n    // here, so it always is), freeze EVERY min-violating item at once, then redistribute.\n    const violators = widths.map((w, i) => (!clamped.has(i) && w < minWidth ? i : -1)).filter((i) => i >= 0);\n    if (violators.length === 0) break;\n    violators.forEach((i) => clamped.add(i));\n  }\n  return widths;\n}\n\n/**\n * Row width (px) below which a field label declared \"beside\" (formxml `Left`) is drawn ABOVE its\n * input instead.\n *\n * ★ PROVISIONAL. Measured only as a bracket: beside at a 362px row, above at a 306px row. 340 is\n *   the column floor and sits inside the bracket, but the exact switch point has NOT been\n *   observed. It is an open item in the reference; re-measure before relying on the exact value.\n */\nexport const CE_LABEL_ABOVE_BELOW_ROW_WIDTH = 340;\n"],"mappings":"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","names":[]}

package/dist/core.d.cts

@@ -35,4 +35,50 @@ declare const calloutFormDefaults: {
 };
 declare function calloutWidthPx(width?: number): number;
 
-export { CALLOUT_DEFAULT_WIDTH, DIALOG_SIZE_PX, type DialogSizePreset, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, type PanelKind, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, panelCustomWidthPx, panelKindFromWidth };
+/** The appearance family a surface renders in: the kit's existing look, or the measured CE form. */
+type SurfaceLook = 'default' | 'ce';
+/**
+ * A Dynamics tab column never renders narrower than this (px). Measured: a 25% column in a
+ * 1106px tab body renders 340, not 276.5.
+ */
+declare const CE_TAB_COLUMN_MIN_WIDTH = 340;
+/**
+ * Normalise declared column shares so they sum to 100: negative or non-finite shares count as 0,
+ * and all-zero (or empty-of-positive) input becomes equal shares. `TabColumns` renders the
+ * NORMALISED shares, and `resolveTabColumnWidths` normalises too, so the CSS and this function
+ * always agree. (CSS flexbox treats a flex-grow sum below 1 differently — it leaves free space
+ * unused — and never grows a flex-grow-0 item; normalising removes both divergences.)
+ */
+declare function normalizeColumnShares(shares: readonly number[]): number[];
+/**
+ * Resolve the rendered width of each tab column, the way Dynamics does.
+ *
+ * Each column takes its declared share (the formxml column `width`, e.g. 33 / 42 / 25) of the
+ * space left after the gaps, but never goes below `minWidth`. The shortfall of a clamped column is
+ * taken from the unclamped columns in proportion to their declared shares. That is CSS flexbox
+ * with `flex: <share> 1 0` and `min-width` over NORMALISED shares (see normalizeColumnShares),
+ * which is how `TabColumns` renders it.
+ * This function exists so the rule can be tested and used where there is no DOM (e.g. sizing
+ * from a PCF `allocatedWidth`).
+ *
+ * Verified against every measured layout: 33/42/25 at a 1450, 1240 and 1106px row gives
+ * 478.5/609/362.5, 396/504/340 and 340/426/340; 34/33/33 at 1450 gives 493/478.5/478.5.
+ *
+ * @param shares   Declared column shares (percentages are the usual case; they are normalised).
+ * @param available Row width in px AFTER subtracting the gaps between columns.
+ * @param minWidth Minimum rendered column width. Defaults to the measured 340.
+ * @returns Widths in px, in column order. If every column hits the floor the widths sum to more
+ *          than `available`; the caller wraps or scrolls (Dynamics' behaviour there is unmeasured).
+ */
+declare function resolveTabColumnWidths(shares: readonly number[], available: number, minWidth?: number): number[];
+/**
+ * Row width (px) below which a field label declared "beside" (formxml `Left`) is drawn ABOVE its
+ * input instead.
+ *
+ * ★ PROVISIONAL. Measured only as a bracket: beside at a 362px row, above at a 306px row. 340 is
+ *   the column floor and sits inside the bracket, but the exact switch point has NOT been
+ *   observed. It is an open item in the reference; re-measure before relying on the exact value.
+ */
+declare const CE_LABEL_ABOVE_BELOW_ROW_WIDTH = 340;
+
+export { CALLOUT_DEFAULT_WIDTH, CE_LABEL_ABOVE_BELOW_ROW_WIDTH, CE_TAB_COLUMN_MIN_WIDTH, DIALOG_SIZE_PX, type DialogSizePreset, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, type PanelKind, type SurfaceLook, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, normalizeColumnShares, panelCustomWidthPx, panelKindFromWidth, resolveTabColumnWidths };

package/dist/core.d.ts

@@ -35,4 +35,50 @@ declare const calloutFormDefaults: {
 };
 declare function calloutWidthPx(width?: number): number;
 
-export { CALLOUT_DEFAULT_WIDTH, DIALOG_SIZE_PX, type DialogSizePreset, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, type PanelKind, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, panelCustomWidthPx, panelKindFromWidth };
+/** The appearance family a surface renders in: the kit's existing look, or the measured CE form. */
+type SurfaceLook = 'default' | 'ce';
+/**
+ * A Dynamics tab column never renders narrower than this (px). Measured: a 25% column in a
+ * 1106px tab body renders 340, not 276.5.
+ */
+declare const CE_TAB_COLUMN_MIN_WIDTH = 340;
+/**
+ * Normalise declared column shares so they sum to 100: negative or non-finite shares count as 0,
+ * and all-zero (or empty-of-positive) input becomes equal shares. `TabColumns` renders the
+ * NORMALISED shares, and `resolveTabColumnWidths` normalises too, so the CSS and this function
+ * always agree. (CSS flexbox treats a flex-grow sum below 1 differently — it leaves free space
+ * unused — and never grows a flex-grow-0 item; normalising removes both divergences.)
+ */
+declare function normalizeColumnShares(shares: readonly number[]): number[];
+/**
+ * Resolve the rendered width of each tab column, the way Dynamics does.
+ *
+ * Each column takes its declared share (the formxml column `width`, e.g. 33 / 42 / 25) of the
+ * space left after the gaps, but never goes below `minWidth`. The shortfall of a clamped column is
+ * taken from the unclamped columns in proportion to their declared shares. That is CSS flexbox
+ * with `flex: <share> 1 0` and `min-width` over NORMALISED shares (see normalizeColumnShares),
+ * which is how `TabColumns` renders it.
+ * This function exists so the rule can be tested and used where there is no DOM (e.g. sizing
+ * from a PCF `allocatedWidth`).
+ *
+ * Verified against every measured layout: 33/42/25 at a 1450, 1240 and 1106px row gives
+ * 478.5/609/362.5, 396/504/340 and 340/426/340; 34/33/33 at 1450 gives 493/478.5/478.5.
+ *
+ * @param shares   Declared column shares (percentages are the usual case; they are normalised).
+ * @param available Row width in px AFTER subtracting the gaps between columns.
+ * @param minWidth Minimum rendered column width. Defaults to the measured 340.
+ * @returns Widths in px, in column order. If every column hits the floor the widths sum to more
+ *          than `available`; the caller wraps or scrolls (Dynamics' behaviour there is unmeasured).
+ */
+declare function resolveTabColumnWidths(shares: readonly number[], available: number, minWidth?: number): number[];
+/**
+ * Row width (px) below which a field label declared "beside" (formxml `Left`) is drawn ABOVE its
+ * input instead.
+ *
+ * ★ PROVISIONAL. Measured only as a bracket: beside at a 362px row, above at a 306px row. 340 is
+ *   the column floor and sits inside the bracket, but the exact switch point has NOT been
+ *   observed. It is an open item in the reference; re-measure before relying on the exact value.
+ */
+declare const CE_LABEL_ABOVE_BELOW_ROW_WIDTH = 340;
+
+export { CALLOUT_DEFAULT_WIDTH, CE_LABEL_ABOVE_BELOW_ROW_WIDTH, CE_TAB_COLUMN_MIN_WIDTH, DIALOG_SIZE_PX, type DialogSizePreset, MODAL_AUTOSIZE_MIN_WIDTH, PANEL_DEFAULT_WIDTH, type PanelKind, type SurfaceLook, calloutFormDefaults, calloutWidthPx, dialogHeightCss, dialogWidthCss, dialogWidthPx, normalizeColumnShares, panelCustomWidthPx, panelKindFromWidth, resolveTabColumnWidths };

package/dist/core.mjs

@@ -43,8 +43,38 @@ function clampSpan(span, columns) {
   if (!Number.isFinite(span)) return 1;
   return Math.max(1, Math.min(Math.round(span), columns));
 }
+
+// src/core/ceLayout.ts
+var CE_TAB_COLUMN_MIN_WIDTH = 340;
+function normalizeColumnShares(shares) {
+  const clean = shares.map((s) => Number.isFinite(s) && s > 0 ? s : 0);
+  const total = clean.reduce((a, b) => a + b, 0);
+  if (total <= 0) return shares.map(() => 100 / (shares.length || 1));
+  return clean.map((s) => s / total * 100);
+}
+function resolveTabColumnWidths(shares, available, minWidth = CE_TAB_COLUMN_MIN_WIDTH) {
+  if (shares.length === 0) return [];
+  shares = normalizeColumnShares(shares);
+  const clamped = /* @__PURE__ */ new Set();
+  let widths = [];
+  for (let pass = 0; pass <= shares.length; pass++) {
+    const free = available - clamped.size * minWidth;
+    const total = shares.reduce((sum, s, i) => clamped.has(i) ? sum : sum + Math.max(0, s), 0);
+    widths = shares.map((s, i) => {
+      if (clamped.has(i)) return minWidth;
+      return total > 0 ? Math.max(0, s) / total * free : free / (shares.length - clamped.size);
+    });
+    const violators = widths.map((w, i) => !clamped.has(i) && w < minWidth ? i : -1).filter((i) => i >= 0);
+    if (violators.length === 0) break;
+    violators.forEach((i) => clamped.add(i));
+  }
+  return widths;
+}
+var CE_LABEL_ABOVE_BELOW_ROW_WIDTH = 340;
 export {
   CALLOUT_DEFAULT_WIDTH,
+  CE_LABEL_ABOVE_BELOW_ROW_WIDTH,
+  CE_TAB_COLUMN_MIN_WIDTH,
   DIALOG_SIZE_PX,
   MODAL_AUTOSIZE_MIN_WIDTH,
   PANEL_DEFAULT_WIDTH,
@@ -55,7 +85,9 @@ export {
   dialogWidthCss,
   dialogWidthPx,
   gridTemplateForColumns,
+  normalizeColumnShares,
   panelCustomWidthPx,
-  panelKindFromWidth
+  panelKindFromWidth,
+  resolveTabColumnWidths
 };
 //# sourceMappingURL=core.mjs.map

package/dist/core.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/sizePresets.ts","../src/core/columns.ts"],"sourcesContent":["// Pure-TS sizing scalars for overlay surfaces. The SINGLE SOURCE of the numbers\n// that both surface-kit's runtime overlays AND the export-engine codegen use, so a\n// Dialog is 1200px wide in exactly one place. Framework-agnostic (no react/@fluentui).\n//\n// Values mirror export-engine/src/generators/FormCodeGenerator.ts (v8 branches):\n//   dialog: default width 1200; height <=100 -> `${h}vh` else '95vh'\n//   panel:  kind = (width ?? 480) > 500 ? 'medium' : 'custom'; custom width = width ?? 480\n//   callout (form-type): default width 320; directionalHint 'bottomLeftEdge'\n// v1c wires export-engine to import these; a byte-identical emission test guards drift.\n\n// --- Dialog --------------------------------------------------------------------\n\nexport type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n\n// NOTE: only the lg = 1200 default and an explicit `width` are the shared-with-codegen\n// contract (export-engine does `width ?? 1200`). The sm/md/xl/fullscreen presets are\n// surface-kit runtime conveniences with no codegen counterpart — v1c does NOT consume them.\nexport const DIALOG_SIZE_PX = {\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1600,\n} as const;\n\n/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */\nexport function dialogWidthPx(opts: { width?: number; size?: DialogSizePreset } = {}): number {\n  if (typeof opts.width === 'number') return opts.width;\n  const size = opts.size ?? 'lg';\n  // fullscreen is clamped by 95vw at the CSS layer; fall back to the largest preset for the px hint.\n  if (size === 'fullscreen') return DIALOG_SIZE_PX.xl;\n  return DIALOG_SIZE_PX[size];\n}\n\n/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */\nexport function dialogWidthCss(opts: { width?: number; size?: DialogSizePreset } = {}): string {\n  if (opts.size === 'fullscreen' && opts.width == null) return '95vw';\n  return `${dialogWidthPx(opts)}px`;\n}\n\n/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */\nexport function dialogHeightCss(height?: number): string {\n  return height != null && height <= 100 ? `${height}vh` : '95vh';\n}\n\n/** Min width for an auto-sized ModalSurface (the Track-and-Ship \"min 1000, auto\" pattern). */\nexport const MODAL_AUTOSIZE_MIN_WIDTH = 1000;\n\n// --- Panel ---------------------------------------------------------------------\n\nexport type PanelKind = 'medium' | 'custom';\nexport const PANEL_DEFAULT_WIDTH = 480;\n\n/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */\nexport function panelKindFromWidth(width?: number): PanelKind {\n  return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? 'medium' : 'custom';\n}\n\n/** customWidth px for a `custom` panel. */\nexport function panelCustomWidthPx(width?: number): number {\n  return width ?? PANEL_DEFAULT_WIDTH;\n}\n\n// --- Callout -------------------------------------------------------------------\n\nexport const CALLOUT_DEFAULT_WIDTH = 320;\n\n/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */\nexport const calloutFormDefaults = {\n  width: CALLOUT_DEFAULT_WIDTH,\n  directionalHint: 'bottomLeftEdge',\n} as const;\n\nexport function calloutWidthPx(width?: number): number {\n  return width ?? CALLOUT_DEFAULT_WIDTH;\n}\n","// Pure-TS column helpers shared by layouts/containers and the responsive builders.\nexport type ColumnCount = 1 | 2 | 3 | 4;\n\n/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */\nexport function gridTemplateForColumns(columns: ColumnCount): string {\n  return `repeat(${columns}, 1fr)`;\n}\n\n/** Clamp a cell column-span to the available column count (min 1). */\nexport function clampSpan(span: number, columns: ColumnCount): number {\n  if (!Number.isFinite(span)) return 1;\n  return Math.max(1, Math.min(Math.round(span), columns));\n}\n"],"mappings":";AAiBO,IAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,cAAc,OAAoD,CAAC,GAAW;AAC5F,MAAI,OAAO,KAAK,UAAU,SAAU,QAAO,KAAK;AAChD,QAAM,OAAO,KAAK,QAAQ;AAE1B,MAAI,SAAS,aAAc,QAAO,eAAe;AACjD,SAAO,eAAe,IAAI;AAC5B;AAGO,SAAS,eAAe,OAAoD,CAAC,GAAW;AAC7F,MAAI,KAAK,SAAS,gBAAgB,KAAK,SAAS,KAAM,QAAO;AAC7D,SAAO,GAAG,cAAc,IAAI,CAAC;AAC/B;AAGO,SAAS,gBAAgB,QAAyB;AACvD,SAAO,UAAU,QAAQ,UAAU,MAAM,GAAG,MAAM,OAAO;AAC3D;AAGO,IAAM,2BAA2B;AAKjC,IAAM,sBAAsB;AAG5B,SAAS,mBAAmB,OAA2B;AAC5D,UAAQ,SAAS,uBAAuB,MAAM,WAAW;AAC3D;AAGO,SAAS,mBAAmB,OAAwB;AACzD,SAAO,SAAS;AAClB;AAIO,IAAM,wBAAwB;AAG9B,IAAM,sBAAsB;AAAA,EACjC,OAAO;AAAA,EACP,iBAAiB;AACnB;AAEO,SAAS,eAAe,OAAwB;AACrD,SAAO,SAAS;AAClB;;;ACtEO,SAAS,uBAAuB,SAA8B;AACnE,SAAO,UAAU,OAAO;AAC1B;AAGO,SAAS,UAAU,MAAc,SAA8B;AACpE,MAAI,CAAC,OAAO,SAAS,IAAI,EAAG,QAAO;AACnC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,IAAI,GAAG,OAAO,CAAC;AACxD;","names":[]}
+{"version":3,"sources":["../src/core/sizePresets.ts","../src/core/columns.ts","../src/core/ceLayout.ts"],"sourcesContent":["// Pure-TS sizing scalars for overlay surfaces. The SINGLE SOURCE of the numbers\n// that both surface-kit's runtime overlays AND the export-engine codegen use, so a\n// Dialog is 1200px wide in exactly one place. Framework-agnostic (no react/@fluentui).\n//\n// Values mirror export-engine/src/generators/FormCodeGenerator.ts (v8 branches):\n//   dialog: default width 1200; height <=100 -> `${h}vh` else '95vh'\n//   panel:  kind = (width ?? 480) > 500 ? 'medium' : 'custom'; custom width = width ?? 480\n//   callout (form-type): default width 320; directionalHint 'bottomLeftEdge'\n// v1c wires export-engine to import these; a byte-identical emission test guards drift.\n\n// --- Dialog --------------------------------------------------------------------\n\nexport type DialogSizePreset = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n\n// NOTE: only the lg = 1200 default and an explicit `width` are the shared-with-codegen\n// contract (export-engine does `width ?? 1200`). The sm/md/xl/fullscreen presets are\n// surface-kit runtime conveniences with no codegen counterpart — v1c does NOT consume them.\nexport const DIALOG_SIZE_PX = {\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1600,\n} as const;\n\n/** Resolved dialog width in px. Explicit `width` wins; else the preset (default lg = 1200, the codegen default). */\nexport function dialogWidthPx(opts: { width?: number; size?: DialogSizePreset } = {}): number {\n  if (typeof opts.width === 'number') return opts.width;\n  const size = opts.size ?? 'lg';\n  // fullscreen is clamped by 95vw at the CSS layer; fall back to the largest preset for the px hint.\n  if (size === 'fullscreen') return DIALOG_SIZE_PX.xl;\n  return DIALOG_SIZE_PX[size];\n}\n\n/** Dialog width as a CSS value — '95vw' for the fullscreen preset (no explicit width), else `${px}px`. */\nexport function dialogWidthCss(opts: { width?: number; size?: DialogSizePreset } = {}): string {\n  if (opts.size === 'fullscreen' && opts.width == null) return '95vw';\n  return `${dialogWidthPx(opts)}px`;\n}\n\n/** Dialog height as a CSS value. <=100 is treated as a vh percentage; otherwise the 95vh cap (codegen rule). */\nexport function dialogHeightCss(height?: number): string {\n  return height != null && height <= 100 ? `${height}vh` : '95vh';\n}\n\n/** Min width for an auto-sized ModalSurface (the Track-and-Ship \"min 1000, auto\" pattern). */\nexport const MODAL_AUTOSIZE_MIN_WIDTH = 1000;\n\n// --- Panel ---------------------------------------------------------------------\n\nexport type PanelKind = 'medium' | 'custom';\nexport const PANEL_DEFAULT_WIDTH = 480;\n\n/** Codegen-parity panel kind: wide panels use Fluent `medium`, narrow ones `custom` + customWidth. */\nexport function panelKindFromWidth(width?: number): PanelKind {\n  return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? 'medium' : 'custom';\n}\n\n/** customWidth px for a `custom` panel. */\nexport function panelCustomWidthPx(width?: number): number {\n  return width ?? PANEL_DEFAULT_WIDTH;\n}\n\n// --- Callout -------------------------------------------------------------------\n\nexport const CALLOUT_DEFAULT_WIDTH = 320;\n\n/** Form-type callout defaults (the export-engine form-callout path emits width + directionalHint only). */\nexport const calloutFormDefaults = {\n  width: CALLOUT_DEFAULT_WIDTH,\n  directionalHint: 'bottomLeftEdge',\n} as const;\n\nexport function calloutWidthPx(width?: number): number {\n  return width ?? CALLOUT_DEFAULT_WIDTH;\n}\n","// Pure-TS column helpers shared by layouts/containers and the responsive builders.\nexport type ColumnCount = 1 | 2 | 3 | 4;\n\n/** CSS grid-template-columns for an N-column layout. Matches codegen `repeat(N, 1fr)`. */\nexport function gridTemplateForColumns(columns: ColumnCount): string {\n  return `repeat(${columns}, 1fr)`;\n}\n\n/** Clamp a cell column-span to the available column count (min 1). */\nexport function clampSpan(span: number, columns: ColumnCount): number {\n  if (!Number.isFinite(span)) return 1;\n  return Math.max(1, Math.min(Math.round(span), columns));\n}\n","// Pure-TS layout rules MEASURED on a live Dynamics 365 CE model-driven form (the UCI \"new look\").\n// Evidence: dynamics-ui-kit apps/ce-parity/reference/ (captures + ce-layout-reference.json).\n// No React / Fluent imports: this file is inlined by export-engine like the rest of core/.\n\n/** The appearance family a surface renders in: the kit's existing look, or the measured CE form. */\nexport type SurfaceLook = 'default' | 'ce';\n\n/**\n * A Dynamics tab column never renders narrower than this (px). Measured: a 25% column in a\n * 1106px tab body renders 340, not 276.5.\n */\nexport const CE_TAB_COLUMN_MIN_WIDTH = 340;\n\n/**\n * Normalise declared column shares so they sum to 100: negative or non-finite shares count as 0,\n * and all-zero (or empty-of-positive) input becomes equal shares. `TabColumns` renders the\n * NORMALISED shares, and `resolveTabColumnWidths` normalises too, so the CSS and this function\n * always agree. (CSS flexbox treats a flex-grow sum below 1 differently — it leaves free space\n * unused — and never grows a flex-grow-0 item; normalising removes both divergences.)\n */\nexport function normalizeColumnShares(shares: readonly number[]): number[] {\n  const clean = shares.map((s) => (Number.isFinite(s) && s > 0 ? s : 0));\n  const total = clean.reduce((a, b) => a + b, 0);\n  if (total <= 0) return shares.map(() => 100 / (shares.length || 1));\n  return clean.map((s) => (s / total) * 100);\n}\n\n/**\n * Resolve the rendered width of each tab column, the way Dynamics does.\n *\n * Each column takes its declared share (the formxml column `width`, e.g. 33 / 42 / 25) of the\n * space left after the gaps, but never goes below `minWidth`. The shortfall of a clamped column is\n * taken from the unclamped columns in proportion to their declared shares. That is CSS flexbox\n * with `flex: <share> 1 0` and `min-width` over NORMALISED shares (see normalizeColumnShares),\n * which is how `TabColumns` renders it.\n * This function exists so the rule can be tested and used where there is no DOM (e.g. sizing\n * from a PCF `allocatedWidth`).\n *\n * Verified against every measured layout: 33/42/25 at a 1450, 1240 and 1106px row gives\n * 478.5/609/362.5, 396/504/340 and 340/426/340; 34/33/33 at 1450 gives 493/478.5/478.5.\n *\n * @param shares   Declared column shares (percentages are the usual case; they are normalised).\n * @param available Row width in px AFTER subtracting the gaps between columns.\n * @param minWidth Minimum rendered column width. Defaults to the measured 340.\n * @returns Widths in px, in column order. If every column hits the floor the widths sum to more\n *          than `available`; the caller wraps or scrolls (Dynamics' behaviour there is unmeasured).\n */\nexport function resolveTabColumnWidths(\n  shares: readonly number[],\n  available: number,\n  minWidth: number = CE_TAB_COLUMN_MIN_WIDTH,\n): number[] {\n  if (shares.length === 0) return [];\n  shares = normalizeColumnShares(shares);\n  const clamped = new Set<number>();\n  let widths: number[] = [];\n  // Resolve like the flexbox algorithm: distribute, freeze violators, redistribute, until none violate.\n  for (let pass = 0; pass <= shares.length; pass++) {\n    const free = available - clamped.size * minWidth;\n    const total = shares.reduce((sum, s, i) => (clamped.has(i) ? sum : sum + Math.max(0, s)), 0);\n    widths = shares.map((s, i) => {\n      if (clamped.has(i)) return minWidth;\n      return total > 0 ? (Math.max(0, s) / total) * free : free / (shares.length - clamped.size);\n    });\n    // CSS Flexbox §9.7: when the total violation is positive (only min-width constraints exist\n    // here, so it always is), freeze EVERY min-violating item at once, then redistribute.\n    const violators = widths.map((w, i) => (!clamped.has(i) && w < minWidth ? i : -1)).filter((i) => i >= 0);\n    if (violators.length === 0) break;\n    violators.forEach((i) => clamped.add(i));\n  }\n  return widths;\n}\n\n/**\n * Row width (px) below which a field label declared \"beside\" (formxml `Left`) is drawn ABOVE its\n * input instead.\n *\n * ★ PROVISIONAL. Measured only as a bracket: beside at a 362px row, above at a 306px row. 340 is\n *   the column floor and sits inside the bracket, but the exact switch point has NOT been\n *   observed. It is an open item in the reference; re-measure before relying on the exact value.\n */\nexport const CE_LABEL_ABOVE_BELOW_ROW_WIDTH = 340;\n"],"mappings":";AAiBO,IAAM,iBAAiB;AAAA,EAC5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,cAAc,OAAoD,CAAC,GAAW;AAC5F,MAAI,OAAO,KAAK,UAAU,SAAU,QAAO,KAAK;AAChD,QAAM,OAAO,KAAK,QAAQ;AAE1B,MAAI,SAAS,aAAc,QAAO,eAAe;AACjD,SAAO,eAAe,IAAI;AAC5B;AAGO,SAAS,eAAe,OAAoD,CAAC,GAAW;AAC7F,MAAI,KAAK,SAAS,gBAAgB,KAAK,SAAS,KAAM,QAAO;AAC7D,SAAO,GAAG,cAAc,IAAI,CAAC;AAC/B;AAGO,SAAS,gBAAgB,QAAyB;AACvD,SAAO,UAAU,QAAQ,UAAU,MAAM,GAAG,MAAM,OAAO;AAC3D;AAGO,IAAM,2BAA2B;AAKjC,IAAM,sBAAsB;AAG5B,SAAS,mBAAmB,OAA2B;AAC5D,UAAQ,SAAS,uBAAuB,MAAM,WAAW;AAC3D;AAGO,SAAS,mBAAmB,OAAwB;AACzD,SAAO,SAAS;AAClB;AAIO,IAAM,wBAAwB;AAG9B,IAAM,sBAAsB;AAAA,EACjC,OAAO;AAAA,EACP,iBAAiB;AACnB;AAEO,SAAS,eAAe,OAAwB;AACrD,SAAO,SAAS;AAClB;;;ACtEO,SAAS,uBAAuB,SAA8B;AACnE,SAAO,UAAU,OAAO;AAC1B;AAGO,SAAS,UAAU,MAAc,SAA8B;AACpE,MAAI,CAAC,OAAO,SAAS,IAAI,EAAG,QAAO;AACnC,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,IAAI,GAAG,OAAO,CAAC;AACxD;;;ACDO,IAAM,0BAA0B;AAShC,SAAS,sBAAsB,QAAqC;AACzE,QAAM,QAAQ,OAAO,IAAI,CAAC,MAAO,OAAO,SAAS,CAAC,KAAK,IAAI,IAAI,IAAI,CAAE;AACrE,QAAM,QAAQ,MAAM,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC;AAC7C,MAAI,SAAS,EAAG,QAAO,OAAO,IAAI,MAAM,OAAO,OAAO,UAAU,EAAE;AAClE,SAAO,MAAM,IAAI,CAAC,MAAO,IAAI,QAAS,GAAG;AAC3C;AAsBO,SAAS,uBACd,QACA,WACA,WAAmB,yBACT;AACV,MAAI,OAAO,WAAW,EAAG,QAAO,CAAC;AACjC,WAAS,sBAAsB,MAAM;AACrC,QAAM,UAAU,oBAAI,IAAY;AAChC,MAAI,SAAmB,CAAC;AAExB,WAAS,OAAO,GAAG,QAAQ,OAAO,QAAQ,QAAQ;AAChD,UAAM,OAAO,YAAY,QAAQ,OAAO;AACxC,UAAM,QAAQ,OAAO,OAAO,CAAC,KAAK,GAAG,MAAO,QAAQ,IAAI,CAAC,IAAI,MAAM,MAAM,KAAK,IAAI,GAAG,CAAC,GAAI,CAAC;AAC3F,aAAS,OAAO,IAAI,CAAC,GAAG,MAAM;AAC5B,UAAI,QAAQ,IAAI,CAAC,EAAG,QAAO;AAC3B,aAAO,QAAQ,IAAK,KAAK,IAAI,GAAG,CAAC,IAAI,QAAS,OAAO,QAAQ,OAAO,SAAS,QAAQ;AAAA,IACvF,CAAC;AAGD,UAAM,YAAY,OAAO,IAAI,CAAC,GAAG,MAAO,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,WAAW,IAAI,EAAG,EAAE,OAAO,CAAC,MAAM,KAAK,CAAC;AACvG,QAAI,UAAU,WAAW,EAAG;AAC5B,cAAU,QAAQ,CAAC,MAAM,QAAQ,IAAI,CAAC,CAAC;AAAA,EACzC;AACA,SAAO;AACT;AAUO,IAAM,iCAAiC;","names":[]}

package/dist/index.cjs

@@ -34,6 +34,8 @@ __export(src_exports, {
   BREAKPOINTS: () => BREAKPOINTS,
   CALLOUT_DEFAULT_WIDTH: () => CALLOUT_DEFAULT_WIDTH,
   CARD_REFLOW_WIDTH: () => CARD_REFLOW_WIDTH,
+  CE_LABEL_ABOVE_BELOW_ROW_WIDTH: () => CE_LABEL_ABOVE_BELOW_ROW_WIDTH,
+  CE_TAB_COLUMN_MIN_WIDTH: () => CE_TAB_COLUMN_MIN_WIDTH,
   CalloutSurface: () => CalloutSurface,
   ColumnLayout: () => ColumnLayout,
   CommandSurface: () => CommandSurface,
@@ -59,6 +61,7 @@ __export(src_exports, {
   TwoColumnLayout: () => TwoColumnLayout,
   calloutFormDefaults: () => calloutFormDefaults,
   calloutWidthPx: () => calloutWidthPx,
+  ceForm: () => import_design_tokens.ceForm,
   clampSpan: () => clampSpan,
   colors: () => import_design_tokens.colors,
   createDynamicsTheme: () => createDynamicsTheme,
@@ -71,11 +74,13 @@ __export(src_exports, {
   fromFormDefinition: () => fromFormDefinition,
   gridTemplateForColumns: () => gridTemplateForColumns,
   layout: () => import_design_tokens.layout,
+  normalizeColumnShares: () => normalizeColumnShares,
   panelCustomWidthPx: () => panelCustomWidthPx,
   panelKindFromWidth: () => panelKindFromWidth,
   radius: () => import_design_tokens.radius,
   resolveBreakpoint: () => resolveBreakpoint,
   resolveResponsiveValue: () => resolveResponsiveValue,
+  resolveTabColumnWidths: () => resolveTabColumnWidths,
   scaleSpacing: () => scaleSpacing,
   sectionStackingStyle: () => sectionStackingStyle,
   spacing: () => import_design_tokens.spacing,
@@ -135,6 +140,34 @@ function clampSpan(span, columns) {
   return Math.max(1, Math.min(Math.round(span), columns));
 }
 
+// src/core/ceLayout.ts
+var CE_TAB_COLUMN_MIN_WIDTH = 340;
+function normalizeColumnShares(shares) {
+  const clean = shares.map((s) => Number.isFinite(s) && s > 0 ? s : 0);
+  const total = clean.reduce((a, b) => a + b, 0);
+  if (total <= 0) return shares.map(() => 100 / (shares.length || 1));
+  return clean.map((s) => s / total * 100);
+}
+function resolveTabColumnWidths(shares, available, minWidth = CE_TAB_COLUMN_MIN_WIDTH) {
+  if (shares.length === 0) return [];
+  shares = normalizeColumnShares(shares);
+  const clamped = /* @__PURE__ */ new Set();
+  let widths = [];
+  for (let pass = 0; pass <= shares.length; pass++) {
+    const free = available - clamped.size * minWidth;
+    const total = shares.reduce((sum, s, i) => clamped.has(i) ? sum : sum + Math.max(0, s), 0);
+    widths = shares.map((s, i) => {
+      if (clamped.has(i)) return minWidth;
+      return total > 0 ? Math.max(0, s) / total * free : free / (shares.length - clamped.size);
+    });
+    const violators = widths.map((w, i) => !clamped.has(i) && w < minWidth ? i : -1).filter((i) => i >= 0);
+    if (violators.length === 0) break;
+    violators.forEach((i) => clamped.add(i));
+  }
+  return widths;
+}
+var CE_LABEL_ABOVE_BELOW_ROW_WIDTH = 340;
+
 // src/responsive/breakpoints.ts
 var BREAKPOINTS = {
   xs: 0,
@@ -1170,6 +1203,8 @@ function fromFormDefinition(def) {
   BREAKPOINTS,
   CALLOUT_DEFAULT_WIDTH,
   CARD_REFLOW_WIDTH,
+  CE_LABEL_ABOVE_BELOW_ROW_WIDTH,
+  CE_TAB_COLUMN_MIN_WIDTH,
   CalloutSurface,
   ColumnLayout,
   CommandSurface,
@@ -1195,6 +1230,7 @@ function fromFormDefinition(def) {
   TwoColumnLayout,
   calloutFormDefaults,
   calloutWidthPx,
+  ceForm,
   clampSpan,
   colors,
   createDynamicsTheme,
@@ -1207,11 +1243,13 @@ function fromFormDefinition(def) {
   fromFormDefinition,
   gridTemplateForColumns,
   layout,
+  normalizeColumnShares,
   panelCustomWidthPx,
   panelKindFromWidth,
   radius,
   resolveBreakpoint,
   resolveResponsiveValue,
+  resolveTabColumnWidths,
   scaleSpacing,
   sectionStackingStyle,
   spacing,