@dataverse-kit/surface-kit 0.4.0 → 0.5.0

package/dist/v9.mjs

@@ -44,6 +44,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,
@@ -120,7 +148,7 @@ function fieldRowStyle(labelWidth = "130px", mode = "media") {
 }
 
 // src/tokens/tokens.ts
-import { colors, spacing, typography, radius, layout } from "@dataverse-kit/design-tokens";
+import { colors, spacing, typography, radius, layout, ceForm } from "@dataverse-kit/design-tokens";
 
 // src/tokens/density.ts
 var densityScale = {
@@ -194,39 +222,21 @@ import { createContext, useContext } from "react";
 var DensityContext = createContext("comfortable");
 var useDensity = () => useContext(DensityContext);
 
+// src/hooks/useLook.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var LookContext = createContext2("default");
+var useLook = () => useContext2(LookContext);
+
 // src/v9/theme.ts
 import {
-  createLightTheme,
-  createDarkTheme
-} from "@fluentui/react-components";
-var dynamicsBrandRamp = {
-  10: "#061724",
-  20: "#082338",
-  30: "#0a2e4a",
-  40: "#0c3b5e",
-  50: "#0e4775",
-  60: colors.brandDark,
-  // #005a9e — colorBrandBackgroundPressed
-  70: colors.brandHover,
-  // #106ebe — colorBrandBackground(Hover/Selected)
-  80: colors.brand,
-  // #0078d4 — colorBrandBackground + colorBrandForeground1 (the Dynamics blue)
-  90: "#2886de",
-  100: "#479ef5",
-  110: "#62abf5",
-  120: "#77b7f7",
-  130: "#96c6fa",
-  140: "#b4d6fa",
-  150: "#cfe4fa",
-  160: "#ebf3fc"
-};
-function createDynamicsV9Theme(brand = dynamicsBrandRamp) {
-  return createLightTheme(brand);
-}
-function createDynamicsV9DarkTheme(brand = dynamicsBrandRamp) {
-  return createDarkTheme(brand);
-}
-var dynamicsV9Theme = createDynamicsV9Theme();
+  dynamicsBrandRamp,
+  createDynamicsV9Theme,
+  createDynamicsV9DarkTheme,
+  dynamicsV9Theme,
+  dynamicsV9DarkTheme,
+  createDynamicsCeTheme,
+  dynamicsCeTheme
+} from "@dataverse-kit/fluent-theme";
 
 // src/v9/containers/FormSurface.tsx
 import { makeStyles, mergeClasses, tokens } from "@fluentui/react-components";
@@ -260,10 +270,11 @@ var VIEWPORT_STACK = {
 var FormSurface = ({
   columns = 12,
   gap = 20,
-  padding = 20,
+  padding,
   density = "comfortable",
   background,
   containerWidth,
+  look = "default",
   collapseBelow = "sm",
   maxWidth,
   className,
@@ -271,10 +282,29 @@ var FormSurface = ({
   children
 }) => {
   const styles = useStyles();
+  if (look === "ce") {
+    return /* @__PURE__ */ jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(LookContext.Provider, { value: look, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        "data-surface-part": "form-surface",
+        "data-look": "ce",
+        style: {
+          display: "flow-root",
+          minWidth: 0,
+          padding: padding ?? 0,
+          ...background != null ? { background } : {},
+          ...maxWidth != null ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {},
+          ...style
+        },
+        children
+      }
+    ) }) });
+  }
   const collapsePx = BREAKPOINTS[collapseBelow];
   const forceStack = containerWidth != null && containerWidth <= collapsePx;
   const scaledGap = scaleSpacing(gap, density);
-  const scaledPadding = scaleSpacing(padding, density);
+  const scaledPadding = scaleSpacing(padding ?? 20, density);
   const viewportStackSlot = containerWidth == null ? VIEWPORT_STACK[collapseBelow] : null;
   const cls = mergeClasses(
     styles.root,
@@ -290,7 +320,7 @@ var FormSurface = ({
     ...maxWidth != null ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {},
     ...style
   };
-  return /* @__PURE__ */ jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx("div", { className: cls, style: inlineStyle, children }) });
+  return /* @__PURE__ */ jsx(DensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(LookContext.Provider, { value: look, children: /* @__PURE__ */ jsx("div", { className: cls, style: inlineStyle, children }) }) });
 };
 
 // src/v9/containers/PageSurface.tsx
@@ -298,8 +328,232 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var PageSurface = ({ centered, maxWidth, ...rest }) => /* @__PURE__ */ jsx2(FormSurface, { maxWidth: maxWidth ?? (centered ? 1200 : void 0), ...rest });
 
 // src/v9/containers/Section.tsx
-import { useState as useState3 } from "react";
-import { makeStyles as makeStyles2, mergeClasses as mergeClasses2, tokens as tokens3 } from "@fluentui/react-components";
+import React, { useState as useState3 } from "react";
+import { makeStyles as makeStyles3, mergeClasses as mergeClasses3, tokens as tokens4 } from "@fluentui/react-components";
+
+// src/v9/layouts/FieldRow.tsx
+import { makeStyles as makeStyles2, mergeClasses as mergeClasses2, tokens as tokens2 } from "@fluentui/react-components";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var F = ceForm.field;
+var CE_LABEL_BOX = 30;
+var CE_LABEL_OFFSET = 4;
+var CE_CONTROL_OFFSET = 2;
+var CE_CONTROL_INSET_RIGHT = 2;
+var CE_LABEL_TEXT_WIDTH = 176;
+var CE_MARKER_GAP = 4;
+var ceFieldRowFirstOffset = F.rowPaddingTop - F.rowPaddingTopFirst;
+var NARROW = `@container (width < ${CE_LABEL_ABOVE_BELOW_ROW_WIDTH}px)`;
+var useStyles2 = makeStyles2({
+  // ── shared ──────────────────────────────────────────────────────────────
+  // Span every column when placed in a grid (v9 Section's body is repeat(12, 1fr)).
+  spanAll: { gridColumn: "1 / -1" },
+  // ── ce ──────────────────────────────────────────────────────────────────
+  ceRow: {
+    paddingTop: `${F.rowPaddingTop}px`,
+    minWidth: 0
+  },
+  ceContainer: { containerType: "inline-size" },
+  ceGrid: {
+    display: "grid",
+    alignItems: "start"
+  },
+  // ★ The column template lives in CLASSES, never in an inline style: an inline
+  //   grid-template-columns beats the @container rule, so 'auto' never flipped to 'above'
+  //   (caught measuring a 306px row in a real browser; jsdom cannot see it). A custom labelWidth
+  //   reaches the class through the --sk-label-col custom property.
+  ceGridBeside: { gridTemplateColumns: "var(--sk-label-col) minmax(0, 1fr)" },
+  ceGridSingle: { gridTemplateColumns: "minmax(0, 1fr)" },
+  ceLabelBeside: {
+    display: "flex",
+    alignItems: "center",
+    minHeight: `${CE_LABEL_BOX}px`,
+    marginTop: `${CE_LABEL_OFFSET}px`,
+    // 184 − 176: the measured text width. A required marker is allowed into half of it (below).
+    paddingRight: `${F.labelColumnWidth - CE_LABEL_TEXT_WIDTH}px`
+  },
+  ceLabelAbove: {
+    display: "flex",
+    alignItems: "center",
+    marginTop: `${CE_CONTROL_OFFSET}px`,
+    minHeight: `${F.labelLineHeight}px`
+  },
+  ceControlBeside: {
+    marginTop: `${CE_CONTROL_OFFSET}px`,
+    marginBottom: `${CE_CONTROL_OFFSET}px`,
+    marginRight: `${CE_CONTROL_INSET_RIGHT}px`,
+    minWidth: 0
+  },
+  ceControlAbove: {
+    marginTop: `${F.labelAboveGap}px`,
+    marginBottom: `${CE_CONTROL_OFFSET}px`,
+    marginRight: `${CE_CONTROL_INSET_RIGHT}px`,
+    minWidth: 0
+  },
+  // 'auto': beside by default, above when the ROW is narrower than the (provisional) switch point.
+  ceAutoGrid: { [NARROW]: { gridTemplateColumns: "minmax(0, 1fr)" } },
+  ceAutoLabel: {
+    [NARROW]: {
+      marginTop: `${CE_CONTROL_OFFSET}px`,
+      minHeight: `${F.labelLineHeight}px`,
+      paddingRight: 0
+    }
+  },
+  ceAutoControl: { [NARROW]: { marginTop: `${F.labelAboveGap}px` } },
+  ceLabelText: {
+    minWidth: 0,
+    fontSize: tokens2.fontSizeBase300,
+    lineHeight: `${F.labelLineHeight}px`,
+    fontWeight: tokens2.fontWeightRegular,
+    color: tokens2.colorNeutralForeground1,
+    overflowWrap: "anywhere"
+  },
+  // Beside, the text fills the column so the marker sits at the column's end (measured: marker's
+  // right edge 180px from the row). Above, the marker follows the text (position unmeasured).
+  ceLabelTextFill: { flexGrow: 1 },
+  ceAutoLabelText: { [NARROW]: { flexGrow: 0 } },
+  ceRequired: {
+    flexShrink: 0,
+    color: tokens2.colorPaletteRedForeground1,
+    paddingLeft: `${CE_MARKER_GAP}px`
+  },
+  // Beside: the marker takes half the column's 8px padding → text 168.5 + 4 + 7.5 = 176 + 4.
+  ceRequiredBeside: { marginRight: `-${CE_MARKER_GAP}px` },
+  ceAutoRequired: { [NARROW]: { marginRight: 0 } },
+  // ── default ─────────────────────────────────────────────────────────────
+  defaultBeside: {
+    display: "grid",
+    alignItems: "center",
+    columnGap: "8px",
+    minHeight: "38px",
+    [`@media (max-width: ${BREAKPOINTS.sm}px)`]: {
+      gridTemplateColumns: "1fr !important",
+      alignItems: "flex-start",
+      minHeight: 0,
+      rowGap: "4px"
+    }
+  },
+  defaultAbove: {
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    rowGap: "2px",
+    minHeight: "38px"
+  },
+  defaultLabel: {
+    fontSize: tokens2.fontSizeBase200,
+    fontWeight: tokens2.fontWeightSemibold,
+    color: tokens2.colorNeutralForeground1,
+    lineHeight: "1.3",
+    overflowWrap: "anywhere"
+  },
+  // v8 FieldRow's marker: colors.danger, semibold, 2px after the text.
+  defaultRequired: {
+    color: colors.danger,
+    marginLeft: "2px",
+    fontWeight: tokens2.fontWeightSemibold
+  }
+});
+var toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
+var FieldRow = ({
+  label,
+  required,
+  htmlFor,
+  labelPosition,
+  labelWidth,
+  look: lookProp,
+  className,
+  style,
+  children
+}) => {
+  const styles = useStyles2();
+  const ambientLook = useLook();
+  const look = lookProp ?? ambientLook;
+  const ce = look === "ce";
+  const position = labelPosition ?? (ce ? "auto" : "beside");
+  const hasLabel = label != null;
+  const column = toCssLength(labelWidth ?? (ce ? F.labelColumnWidth : 130));
+  const LabelTag = htmlFor ? "label" : "span";
+  if (!ce) {
+    const beside2 = position !== "above" && hasLabel;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: mergeClasses2(styles.spanAll, beside2 ? styles.defaultBeside : styles.defaultAbove, className),
+        style: { ...beside2 ? { gridTemplateColumns: `${column} 1fr` } : {}, ...style },
+        "data-surface-part": "field-row",
+        "data-look": "default",
+        children: [
+          hasLabel && /* @__PURE__ */ jsxs(LabelTag, { htmlFor, className: styles.defaultLabel, "data-surface-part": "label", children: [
+            label,
+            required && /* @__PURE__ */ jsx3("span", { className: styles.defaultRequired, "aria-hidden": "true", "data-surface-part": "required", children: "*" })
+          ] }),
+          children
+        ]
+      }
+    );
+  }
+  const auto = position === "auto" && hasLabel;
+  const beside = position !== "above" && hasLabel;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: mergeClasses2(styles.spanAll, styles.ceRow, auto && styles.ceContainer, className),
+      style,
+      "data-surface-part": "field-row",
+      "data-look": "ce",
+      "data-label-position": position,
+      "data-container": auto ? "inline-size" : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: mergeClasses2(styles.ceGrid, beside ? styles.ceGridBeside : styles.ceGridSingle, auto && styles.ceAutoGrid),
+          style: beside ? { "--sk-label-col": column } : void 0,
+          "data-surface-part": "field-grid",
+          children: [
+            hasLabel && /* @__PURE__ */ jsxs(
+              LabelTag,
+              {
+                htmlFor,
+                className: mergeClasses2(beside ? styles.ceLabelBeside : styles.ceLabelAbove, auto && styles.ceAutoLabel),
+                "data-surface-part": "label",
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      className: mergeClasses2(styles.ceLabelText, beside && styles.ceLabelTextFill, auto && styles.ceAutoLabelText),
+                      "data-surface-part": "label-text",
+                      children: label
+                    }
+                  ),
+                  required && /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      className: mergeClasses2(styles.ceRequired, beside && styles.ceRequiredBeside, auto && styles.ceAutoRequired),
+                      "aria-hidden": "true",
+                      "data-surface-part": "required",
+                      children: "*"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: mergeClasses2(
+                  // No label: the control sits where a beside control would (2px down), full width.
+                  !hasLabel || beside ? styles.ceControlBeside : styles.ceControlAbove,
+                  auto && styles.ceAutoControl
+                ),
+                "data-surface-part": "control",
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
 
 // src/v9/containers/SectionHeader.tsx
 import {
@@ -307,10 +561,10 @@ import {
   Text,
   Toolbar,
   ToolbarButton,
-  tokens as tokens2
+  tokens as tokens3
 } from "@fluentui/react-components";
 import { ChevronDown20Regular, ChevronRight20Regular } from "@fluentui/react-icons";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var SectionHeader = ({
   title,
   statusText,
@@ -319,14 +573,26 @@ var SectionHeader = ({
   actions,
   collapsible,
   collapsed,
-  onToggle
+  onToggle,
+  look: lookProp
 }) => {
+  const ambientLook = useLook();
+  const ce = (lookProp ?? ambientLook) === "ce";
+  const ceRootStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    paddingTop: ceForm.section.titlePaddingTop,
+    minHeight: ceForm.section.titleHeight - ceForm.section.titlePaddingTop,
+    width: "100%"
+  };
   const rootStyle = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
     flexWrap: "nowrap",
-    borderBottom: `1px solid ${tokens2.colorNeutralStroke2}`,
+    borderBottom: `1px solid ${tokens3.colorNeutralStroke2}`,
     marginBottom: 16,
     minHeight: 48,
     width: "100%"
@@ -334,26 +600,40 @@ var SectionHeader = ({
   const leftStyle = { display: "flex", alignItems: "center", gap: 8, minWidth: 0 };
   const statusStyle = {
     marginLeft: 8,
-    fontSize: tokens2.fontSizeBase200,
-    color: tokens2.colorNeutralForeground3
+    fontSize: tokens3.fontSizeBase200,
+    color: tokens3.colorNeutralForeground3
   };
-  return /* @__PURE__ */ jsxs("div", { style: rootStyle, children: [
-    /* @__PURE__ */ jsxs("div", { style: leftStyle, children: [
-      collapsible && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("div", { style: ce ? ceRootStyle : rootStyle, "data-surface-part": "section-header", children: [
+    /* @__PURE__ */ jsxs2("div", { style: leftStyle, children: [
+      collapsible && /* @__PURE__ */ jsx4(
         Button,
         {
           appearance: "subtle",
           size: "small",
-          icon: collapsed ? /* @__PURE__ */ jsx3(ChevronRight20Regular, {}) : /* @__PURE__ */ jsx3(ChevronDown20Regular, {}),
+          icon: collapsed ? /* @__PURE__ */ jsx4(ChevronRight20Regular, {}) : /* @__PURE__ */ jsx4(ChevronDown20Regular, {}),
           onClick: onToggle,
           "aria-label": collapsed ? "Expand section" : "Collapse section",
           "aria-expanded": !collapsed
         }
       ),
-      title && /* @__PURE__ */ jsx3(Text, { weight: "semibold", size: 300, children: title }),
-      statusText && /* @__PURE__ */ jsx3("span", { style: statusStyle, children: statusText })
+      title && (ce ? (
+        // Rendered exactly as given: Dynamics does not uppercase section titles (the stock
+        // Account labels are typed uppercase; "Description" renders mixed-case).
+        /* @__PURE__ */ jsx4(
+          Text,
+          {
+            as: "h2",
+            weight: "semibold",
+            size: 300,
+            style: { margin: 0, lineHeight: `${ceForm.section.titleLineHeight}px`, color: tokens3.colorNeutralForeground1 },
+            "data-surface-part": "section-title",
+            children: title
+          }
+        )
+      ) : /* @__PURE__ */ jsx4(Text, { weight: "semibold", size: 300, children: title })),
+      statusText && /* @__PURE__ */ jsx4("span", { style: statusStyle, children: statusText })
     ] }),
-    actions ? /* @__PURE__ */ jsx3("div", { children: actions }) : showCommandBar && commandItems.length > 0 ? /* @__PURE__ */ jsx3(Toolbar, { "aria-label": "Section commands", size: "small", children: commandItems.map((item) => /* @__PURE__ */ jsx3(
+    actions ? /* @__PURE__ */ jsx4("div", { children: actions }) : showCommandBar && commandItems.length > 0 ? /* @__PURE__ */ jsx4(Toolbar, { "aria-label": "Section commands", size: "small", children: commandItems.map((item) => /* @__PURE__ */ jsx4(
       ToolbarButton,
       {
         icon: item.icon,
@@ -368,8 +648,18 @@ var SectionHeader = ({
 };
 
 // src/v9/containers/Section.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var useStyles2 = makeStyles2({
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var px = (v) => v.map((n) => `${n}px`).join(" ");
+function columnsOf(children) {
+  const out = [];
+  const walk = (n) => {
+    if (Array.isArray(n)) n.forEach(walk);
+    else if (!(n === null || n === void 0 || typeof n === "boolean" || n === "")) out.push(n);
+  };
+  walk(children);
+  return out;
+}
+var useStyles3 = makeStyles3({
   // Phone-stack the internal field grid below `sm` (griffel — inline can't do @media).
   bodyStack: {
     [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { "& > *": { gridColumn: "1 / -1" } }
@@ -380,7 +670,7 @@ var Section = ({
   columnSpan = 12,
   columnStart,
   rowPosition,
-  internalColumns = 12,
+  internalColumns: internalColumnsProp,
   showCommandBar,
   commandItems,
   statusText,
@@ -392,11 +682,15 @@ var Section = ({
   variant = "card",
   minHeight = 80,
   density: densityProp,
+  look: lookProp,
   className,
   style,
   children
 }) => {
-  const styles = useStyles2();
+  const styles = useStyles3();
+  const internalColumns = internalColumnsProp ?? 12;
+  const ambientLook = useLook();
+  const ce = (lookProp ?? ambientLook) === "ce" && variant === "card";
   const [internalCollapsed, setInternalCollapsed] = useState3(defaultCollapsed);
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const toggle = () => {
@@ -417,41 +711,102 @@ var Section = ({
   if (variant === "placeholder") {
     const placeholderStyle = {
       ...rootStyle,
-      border: `1px dashed ${tokens3.colorNeutralStroke2}`,
-      borderRadius: tokens3.borderRadiusMedium,
+      border: `1px dashed ${tokens4.colorNeutralStroke2}`,
+      borderRadius: tokens4.borderRadiusMedium,
       minHeight,
       width: "100%",
       background: "transparent"
     };
-    return /* @__PURE__ */ jsx4("div", { className, style: placeholderStyle });
+    return /* @__PURE__ */ jsx5("div", { className, style: placeholderStyle });
   }
   const chrome = variant === "flat" ? {
-    backgroundColor: tokens3.colorNeutralBackground1,
-    borderRadius: tokens3.borderRadiusMedium,
+    backgroundColor: tokens4.colorNeutralBackground1,
+    borderRadius: tokens4.borderRadiusMedium,
     padding: cardPad,
     minWidth: 300,
     width: "100%",
     overflow: "hidden"
   } : {
-    backgroundColor: tokens3.colorNeutralBackground1,
-    border: `1px solid ${tokens3.colorNeutralStroke2}`,
-    borderRadius: tokens3.borderRadiusMedium,
-    boxShadow: tokens3.shadow4,
+    backgroundColor: tokens4.colorNeutralBackground1,
+    border: `1px solid ${tokens4.colorNeutralStroke2}`,
+    borderRadius: tokens4.borderRadiusMedium,
+    boxShadow: tokens4.shadow4,
     padding: cardPad,
     minWidth: 300,
     width: "100%",
     overflow: "hidden"
   };
   const showHeader = Boolean(title) || showCommandBar || collapsible;
+  if (ce) {
+    const n = Math.max(1, Math.round(internalColumnsProp ?? 1));
+    const ceChrome = {
+      backgroundColor: tokens4.colorNeutralBackground1,
+      border: "1px solid transparent",
+      borderRadius: tokens4.borderRadiusXLarge,
+      boxShadow: tokens4.shadow4,
+      padding: px(ceForm.section.padding),
+      width: "100%",
+      boxSizing: "border-box"
+    };
+    const cols = n > 1 ? columnsOf(children) : null;
+    if (cols && cols.length !== n && typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+      console.warn(
+        `[surface-kit] Section look="ce" with internalColumns={${n}} got ${cols.length} children. A multi-column CE section takes ONE CHILD PER COLUMN (wrap each column's FieldRows in an element).`
+      );
+    }
+    return /* @__PURE__ */ jsxs3("section", { className, style: { ...ceChrome, ...rootStyle }, "data-surface-part": "section", "data-look": "ce", children: [
+      notification && /* @__PURE__ */ jsx5("div", { children: notification }),
+      showHeader && /* @__PURE__ */ jsx5(
+        SectionHeader,
+        {
+          look: "ce",
+          title,
+          statusText,
+          showCommandBar,
+          commandItems,
+          collapsible,
+          collapsed,
+          onToggle: toggle
+        }
+      ),
+      !collapsed && (cols ? (
+        // PROVISIONAL: below the phone breakpoint the columns stack (the default look's rule);
+        // Dynamics' multi-column reflow is unmeasured.
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: styles.bodyStack,
+            style: { display: "grid", gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))`, alignItems: "start" },
+            "data-surface-part": "section-body",
+            children: cols.map((col, i) => /* @__PURE__ */ jsx5(
+              "div",
+              {
+                style: {
+                  // Keyed to the COLUMN (i % n), not the list position: every column but the
+                  // last carries the gutter, and only the first grid row is pulled up.
+                  marginTop: i < n ? -ceFieldRowFirstOffset : 0,
+                  paddingRight: i % n < n - 1 ? ceForm.section.columnGutter : 0,
+                  minWidth: 0
+                },
+                "data-surface-part": "section-column",
+                children: col
+              },
+              React.isValidElement(col) && col.key != null ? col.key : `col-${i}`
+            ))
+          }
+        )
+      ) : /* @__PURE__ */ jsx5("div", { style: { marginTop: -ceFieldRowFirstOffset }, "data-surface-part": "section-body", children }))
+    ] });
+  }
   const bodyStyle = {
     display: "grid",
     gridTemplateColumns: `repeat(${internalColumns}, 1fr)`,
     gap: bodyGap,
     alignItems: "start"
   };
-  return /* @__PURE__ */ jsxs2("div", { className, style: { ...chrome, ...rootStyle }, children: [
-    notification && /* @__PURE__ */ jsx4("div", { style: { marginBottom: scaleSpacing(8, density) }, children: notification }),
-    showHeader && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { className, style: { ...chrome, ...rootStyle }, children: [
+    notification && /* @__PURE__ */ jsx5("div", { style: { marginBottom: scaleSpacing(8, density) }, children: notification }),
+    showHeader && /* @__PURE__ */ jsx5(
       SectionHeader,
       {
         title,
@@ -463,20 +818,20 @@ var Section = ({
         onToggle: toggle
       }
     ),
-    !collapsed && /* @__PURE__ */ jsx4("div", { className: mergeClasses2(styles.bodyStack), style: bodyStyle, children })
+    !collapsed && /* @__PURE__ */ jsx5("div", { className: mergeClasses3(styles.bodyStack), style: bodyStyle, children })
   ] });
 };
 
 // src/v9/containers/SectionCard.tsx
-import { tokens as tokens4 } from "@fluentui/react-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { tokens as tokens5 } from "@fluentui/react-components";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var SectionCard = ({
-  accentColor = tokens4.colorBrandStroke1,
+  accentColor = tokens5.colorBrandStroke1,
   accentWidth = 3,
   variant = "card",
   style,
   ...rest
-}) => /* @__PURE__ */ jsx5(
+}) => /* @__PURE__ */ jsx6(
   Section,
   {
     variant,
@@ -486,54 +841,363 @@ var SectionCard = ({
 );
 
 // src/v9/containers/FormHeader.tsx
-import { Text as Text2, tokens as tokens5 } from "@fluentui/react-components";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var FormHeader = ({
-  title,
-  subtitle,
-  status,
-  titleColor,
-  subtitleColor,
-  persona,
-  actions,
-  className
-}) => {
+import React2 from "react";
+import {
+  Avatar,
+  Button as Button2,
+  Menu,
+  MenuItemRadio,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  Text as Text2,
+  createFocusOutlineStyle,
+  makeStyles as makeStyles4,
+  tokens as tokens6
+} from "@fluentui/react-components";
+import { ChevronDown12Regular, ChevronDown20Regular as ChevronDown20Regular2, ChevronUp20Regular } from "@fluentui/react-icons";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var H = ceForm.header;
+var FIELD_TOP = 4;
+var OWNER_AVATAR_TOP = 9;
+var OWNER_NAME_GAP = 10;
+var SUBTITLE_DOT_SPACING = 8;
+var SUBTITLE_ROW_TOP = 0;
+var EXPAND_GAP = 18;
+var DIVIDER_TOP = 6;
+var PRESENCE_RING = 2;
+var PRESENCE_DOT = H.presenceSize - 2 * PRESENCE_RING;
+var cePresenceBadgeStyle = Object.freeze({
+  width: PRESENCE_DOT,
+  height: PRESENCE_DOT,
+  boxSizing: "content-box",
+  // Fluent's badge carries 1px padding and a 10px icon; zero the padding and clip the icon to the dot.
+  padding: 0,
+  overflow: "hidden",
+  border: `${PRESENCE_RING}px solid ${tokens6.colorNeutralBackground1}`,
+  right: -PRESENCE_RING,
+  bottom: -PRESENCE_RING
+});
+var FIELDS_MIN_GAP = 16;
+var CE_TITLE_MIN_WIDTH = 120;
+var useStyles4 = makeStyles4({
+  // The owner name as a link-button: no chrome, but a VISIBLE keyboard focus ring (Fluent's).
+  ownerLink: {
+    background: "none",
+    border: "none",
+    padding: 0,
+    margin: 0,
+    font: "inherit",
+    color: tokens6.colorBrandForegroundLink,
+    cursor: "pointer",
+    ":hover": { color: tokens6.colorBrandForegroundLinkHover, textDecorationLine: "underline" },
+    ...createFocusOutlineStyle()
+  },
+  // Narrow headers: the title keeps a minimum width (it truncates with an ellipsis) and the fields
+  // block shrinks and clips rather than pushing past the card. Dynamics moves the fields into the
+  // header flyout at narrow widths (unmeasured, not modelled).
+  fields: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexShrink: 1,
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  switcher: {
+    display: "inline-flex",
+    alignItems: "center",
+    // Measured switcher 74.3 wide for "Account" (52.3): 2×2 padding + 2×1 border + 4 gap + 12 icon.
+    gap: "4px",
+    height: `${H.switcherHeight}px`,
+    padding: `0 ${H.switcherPaddingX}px`,
+    border: "1px solid transparent",
+    borderRadius: tokens6.borderRadiusMedium,
+    background: "transparent",
+    color: tokens6.colorNeutralForeground2,
+    fontFamily: "inherit",
+    fontSize: tokens6.fontSizeBase300,
+    fontWeight: tokens6.fontWeightSemibold,
+    lineHeight: tokens6.lineHeightBase300,
+    cursor: "pointer",
+    ":hover": { backgroundColor: tokens6.colorSubtleBackgroundHover },
+    ...createFocusOutlineStyle(),
+    // Measured OPEN: fill #e0e0e0 = colorSubtleBackgroundPressed (Fluent's MenuButton would use
+    // Selected, #ebebeb — so this is set explicitly) and text #242424 = colorNeutralForeground1
+    // (idle is #424242). ★ The open state must also win over :hover — the pointer is still on the
+    // trigger after the click that opened it, and hover's #f5f5f5 was what showed. The ce-parity
+    // gate checks the open trigger with the pointer on it AND away from it.
+    '&[aria-expanded="true"], &[aria-expanded="true"]:hover': {
+      backgroundColor: tokens6.colorSubtleBackgroundPressed,
+      color: tokens6.colorNeutralForeground1
+    }
+  }
+});
+var isEmpty = (v) => v === null || v === void 0 || v === "";
+function FieldTile({ field }) {
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", paddingTop: FIELD_TOP, minWidth: 0 }, "data-surface-part": "header-field", children: [
+    /* @__PURE__ */ jsx7(Text2, { weight: "semibold", size: 300, wrap: false, style: { color: tokens6.colorNeutralForeground1 }, "data-surface-part": "header-field-value", children: isEmpty(field.value) ? "---" : field.value }),
+    /* @__PURE__ */ jsx7(Text2, { size: 200, wrap: false, style: { color: tokens6.colorNeutralForeground1 }, "data-surface-part": "header-field-label", children: field.label })
+  ] });
+}
+function Divider() {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        width: H.dividerWidth,
+        height: H.dividerHeight,
+        margin: `${DIVIDER_TOP}px ${H.dividerSpacing}px 0`,
+        backgroundColor: tokens6.colorNeutralStroke2,
+        flexShrink: 0
+      },
+      "data-surface-part": "header-divider"
+    }
+  );
+}
+function CeFormHeader(props) {
+  const {
+    title,
+    subtitle,
+    status,
+    titleColor,
+    persona,
+    actions,
+    className,
+    entityName,
+    forms,
+    activeFormId,
+    onFormChange,
+    headerFields,
+    owner,
+    onExpand,
+    expanded,
+    titleAs
+  } = props;
+  const styles = useStyles4();
+  const activeForm = forms?.find((f) => f.id === activeFormId) ?? forms?.[0];
+  const entity = entityName ?? subtitle;
+  const avatar = persona ?? (typeof title === "string" ? /* @__PURE__ */ jsx7(Avatar, { name: title, color: "colorful", size: H.avatarSize, "aria-hidden": true }) : null);
+  const TitleTag = titleAs ?? "h1";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className,
+      style: { display: "flex", alignItems: "flex-start", padding: H.padding.map((v) => `${v}px`).join(" "), minWidth: 0 },
+      "data-surface-part": "form-header",
+      "data-look": "ce",
+      children: [
+        avatar && // The avatar sits in a 2px transparent ring (tile 44 = 40 + 2 × 2), 14px before the title.
+        /* @__PURE__ */ jsx7("div", { style: { padding: H.avatarRing, marginRight: H.avatarToTitleGap, flexShrink: 0 }, "data-surface-part": "header-avatar", children: avatar }),
+        /* @__PURE__ */ jsxs4("div", { style: { minWidth: CE_TITLE_MIN_WIDTH, flex: "1 1 auto" }, children: [
+          /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "baseline", minWidth: 0 }, children: [
+            title != null && /* @__PURE__ */ jsx7(
+              Text2,
+              {
+                as: TitleTag,
+                weight: "semibold",
+                size: 500,
+                truncate: true,
+                wrap: false,
+                style: { margin: 0, lineHeight: `${H.titleLineHeight}px`, color: titleColor ?? tokens6.colorNeutralForeground1 },
+                "data-surface-part": "header-title",
+                children: title
+              }
+            ),
+            status != null && /* @__PURE__ */ jsxs4(
+              "span",
+              {
+                style: {
+                  paddingLeft: H.statusPaddingLeft,
+                  fontSize: tokens6.fontSizeBase300,
+                  lineHeight: `${H.titleLineHeight}px`,
+                  color: tokens6.colorNeutralForeground3,
+                  whiteSpace: "nowrap"
+                },
+                "data-surface-part": "header-status",
+                children: [
+                  "- ",
+                  status
+                ]
+              }
+            )
+          ] }),
+          (entity != null || activeForm) && /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", height: H.switcherHeight, marginTop: SUBTITLE_ROW_TOP }, "data-surface-part": "header-subtitle", children: [
+            entity != null && /* @__PURE__ */ jsx7("span", { style: { fontSize: tokens6.fontSizeBase300, fontWeight: tokens6.fontWeightSemibold, color: tokens6.colorNeutralForeground2 }, children: entity }),
+            entity != null && activeForm && /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", style: { margin: `0 ${SUBTITLE_DOT_SPACING}px`, color: tokens6.colorNeutralForeground2, lineHeight: "20px" }, children: "\xB7" }),
+            activeForm && (forms && forms.length > 1 ? /* @__PURE__ */ jsxs4(
+              Menu,
+              {
+                checkedValues: { form: [activeForm.id] },
+                onCheckedValueChange: (_e, data) => {
+                  const id = data.checkedItems[0];
+                  if (id && id !== activeForm.id) onFormChange?.(id);
+                },
+                children: [
+                  /* @__PURE__ */ jsx7(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs4("button", { type: "button", className: styles.switcher, "aria-label": `Form: ${activeForm.label}`, "data-surface-part": "form-switcher", children: [
+                    activeForm.label,
+                    /* @__PURE__ */ jsx7(ChevronDown12Regular, {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx7(MenuPopover, { children: /* @__PURE__ */ jsx7(MenuList, { children: forms.map((f) => /* @__PURE__ */ jsx7(MenuItemRadio, { name: "form", value: f.id, children: f.label }, f.id)) }) })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx7("span", { style: { fontSize: tokens6.fontSizeBase300, fontWeight: tokens6.fontWeightSemibold, color: tokens6.colorNeutralForeground2 }, children: activeForm.label }))
+          ] })
+        ] }),
+        (headerFields?.length || owner || actions) && /* @__PURE__ */ jsxs4("div", { className: styles.fields, style: { marginLeft: FIELDS_MIN_GAP }, "data-surface-part": "header-fields", children: [
+          headerFields?.map((f, i) => /* @__PURE__ */ jsxs4(React2.Fragment, { children: [
+            i > 0 && /* @__PURE__ */ jsx7(Divider, {}),
+            /* @__PURE__ */ jsx7(FieldTile, { field: f })
+          ] }, f.id ?? `${f.label}-${i}`)),
+          owner && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            headerFields?.length ? /* @__PURE__ */ jsx7(Divider, {}) : null,
+            /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "flex-start" }, "data-surface-part": "header-owner", children: [
+              /* @__PURE__ */ jsx7("div", { style: { paddingTop: OWNER_AVATAR_TOP, marginRight: OWNER_NAME_GAP }, children: owner.avatar ?? /* @__PURE__ */ jsx7(
+                Avatar,
+                {
+                  name: owner.name,
+                  color: "colorful",
+                  size: H.ownerAvatarSize,
+                  badge: owner.presence ? { status: owner.presence, size: "extra-small", style: cePresenceBadgeStyle } : void 0
+                }
+              ) }),
+              /* @__PURE__ */ jsx7(
+                FieldTile,
+                {
+                  field: {
+                    label: owner.label ?? "Owner",
+                    value: owner.onClick ? /* @__PURE__ */ jsx7("button", { type: "button", onClick: owner.onClick, className: styles.ownerLink, "data-surface-part": "header-owner-link", children: owner.name }) : /* @__PURE__ */ jsx7("span", { style: { color: tokens6.colorBrandForegroundLink }, children: owner.name })
+                  }
+                }
+              )
+            ] })
+          ] }),
+          actions != null && /* @__PURE__ */ jsx7("div", { children: actions })
+        ] }),
+        onExpand && /* @__PURE__ */ jsx7(
+          Button2,
+          {
+            appearance: "subtle",
+            icon: expanded ? /* @__PURE__ */ jsx7(ChevronUp20Regular, {}) : /* @__PURE__ */ jsx7(ChevronDown20Regular2, {}),
+            "aria-label": expanded ? "Collapse header" : "Expand header",
+            "aria-expanded": !!expanded,
+            onClick: onExpand,
+            style: { marginLeft: EXPAND_GAP, flexShrink: 0, minWidth: H.expandButtonSize, width: H.expandButtonSize, height: H.expandButtonSize },
+            "data-surface-part": "header-expand"
+          }
+        )
+      ]
+    }
+  );
+}
+var FormHeader = (props) => {
+  const ambientLook = useLook();
+  if ((props.look ?? ambientLook) === "ce") return /* @__PURE__ */ jsx7(CeFormHeader, { ...props });
+  const { title, subtitle, status, titleColor, subtitleColor, persona, actions, className } = props;
   const rootStyle = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     gap: 12,
     padding: "12px 24px",
-    borderBottom: `1px solid ${tokens5.colorNeutralStroke2}`,
-    backgroundColor: tokens5.colorNeutralBackground1
+    borderBottom: `1px solid ${tokens6.colorNeutralStroke2}`,
+    backgroundColor: tokens6.colorNeutralBackground1
   };
   const mainStyle = { display: "flex", alignItems: "center", gap: 12, minWidth: 0 };
   const titleRowStyle = { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" };
-  const statusStyle = { fontSize: tokens5.fontSizeBase200, color: tokens5.colorNeutralForeground3 };
+  const statusStyle = { fontSize: tokens6.fontSizeBase200, color: tokens6.colorNeutralForeground3 };
   const subtitleStyle = {
-    fontSize: tokens5.fontSizeBase200,
-    color: subtitleColor || tokens5.colorNeutralForeground3,
+    fontSize: tokens6.fontSizeBase200,
+    color: subtitleColor || tokens6.colorNeutralForeground3,
     marginTop: 2
   };
-  return /* @__PURE__ */ jsxs3("div", { className, style: rootStyle, children: [
-    /* @__PURE__ */ jsxs3("div", { style: mainStyle, children: [
+  return /* @__PURE__ */ jsxs4("div", { className, style: rootStyle, children: [
+    /* @__PURE__ */ jsxs4("div", { style: mainStyle, children: [
       persona,
-      /* @__PURE__ */ jsxs3("div", { children: [
-        /* @__PURE__ */ jsxs3("div", { style: titleRowStyle, children: [
-          title != null && /* @__PURE__ */ jsx6(Text2, { weight: "semibold", size: 400, style: titleColor ? { color: titleColor } : void 0, children: title }),
-          status != null && /* @__PURE__ */ jsx6("span", { style: statusStyle, children: status })
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsxs4("div", { style: titleRowStyle, children: [
+          title != null && /* @__PURE__ */ jsx7(Text2, { weight: "semibold", size: 400, style: titleColor ? { color: titleColor } : void 0, children: title }),
+          status != null && /* @__PURE__ */ jsx7("span", { style: statusStyle, children: status })
         ] }),
-        subtitle != null && /* @__PURE__ */ jsx6("div", { style: subtitleStyle, children: subtitle })
+        subtitle != null && /* @__PURE__ */ jsx7("div", { style: subtitleStyle, children: subtitle })
       ] })
     ] }),
-    actions != null && /* @__PURE__ */ jsx6("div", { children: actions })
+    actions != null && /* @__PURE__ */ jsx7("div", { children: actions })
   ] });
 };
 
 // src/v9/containers/PivotSurface.tsx
-import { useState as useState4 } from "react";
-import { TabList, Tab } from "@fluentui/react-components";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useId, useState as useState4 } from "react";
+import {
+  TabList,
+  Tab,
+  makeStyles as makeStyles5,
+  tabClassNames,
+  tokens as tokens7
+} from "@fluentui/react-components";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var FLUENT_TAB_RESERVED_SPACE_CLASS = "fui-Tab__content--reserved-space";
+var T = ceForm.tabs;
+var UNDERLINE_BOTTOM = 5;
+var useStyles5 = makeStyles5({
+  ceCard: {
+    minWidth: 0,
+    backgroundColor: tokens7.colorNeutralBackground1,
+    border: "1px solid transparent",
+    borderRadius: tokens7.borderRadiusXLarge,
+    boxShadow: tokens7.shadow4
+  },
+  ceStrip: {
+    padding: T.stripPadding.map((v) => `${v}px`).join(" "),
+    columnGap: `${T.gap}px`,
+    // PROVISIONAL: tabs that don't fit are clipped. Dynamics folds them into a "Related ▾" /
+    // overflow menu, which is unmeasured and not modelled.
+    overflow: "hidden"
+  },
+  ceTab: {
+    height: `${T.tabHeight}px`,
+    padding: `0 0 ${UNDERLINE_BOTTOM}px`,
+    alignItems: "flex-end",
+    fontSize: `${T.fontSize}px`,
+    lineHeight: `${T.lineHeight}px`,
+    color: tokens7.colorNeutralForeground1,
+    [`& .${tabClassNames.content}`]: {
+      padding: 0,
+      fontSize: `${T.fontSize}px`,
+      lineHeight: `${T.lineHeight}px`,
+      // Idle labels are the measured #242424 too (Fluent's transparent appearance would use
+      // foreground2, #424242).
+      color: tokens7.colorNeutralForeground1
+    },
+    // Dynamics, like Fluent, reserves each tab's SEMIBOLD width (a hidden zero-height copy of the
+    // label), so tabs don't shift on selection: an unselected "Web API Probe" is 109.6 wide, its
+    // semibold width in the same Segoe UI Web file. Fluent's reserved copy keeps its own 2px side
+    // padding, which made it 113.6 — zero it like the visible content.
+    [`& .${FLUENT_TAB_RESERVED_SPACE_CLASS}`]: {
+      padding: 0,
+      fontSize: `${T.fontSize}px`
+    },
+    // Fluent draws the selected (and hover) indicator on ::after / ::before; move both to the
+    // measured position and shape.
+    "::after": {
+      left: 0,
+      right: 0,
+      bottom: `${UNDERLINE_BOTTOM}px`,
+      height: `${T.underlineHeight}px`,
+      borderRadius: `${T.underlineRadius}px`
+    },
+    "::before": {
+      left: 0,
+      right: 0,
+      bottom: `${UNDERLINE_BOTTOM}px`,
+      height: `${T.underlineHeight}px`,
+      borderRadius: `${T.underlineRadius}px`
+    },
+    // Fluent's hover/pressed indicator sets a circular radius at higher specificity; match it.
+    ":hover::before": { borderRadius: `${T.underlineRadius}px` },
+    ":active::before": { borderRadius: `${T.underlineRadius}px` }
+  }
+});
 var PivotSurface = ({
   tabs,
   selectedId,
@@ -541,8 +1205,15 @@ var PivotSurface = ({
   onTabChange,
   appearance = "transparent",
   size = "medium",
-  className
+  className,
+  look: lookProp,
+  header
 }) => {
+  const styles = useStyles5();
+  const ce = lookProp === "ce";
+  const baseId = useId();
+  const tabId = (id) => `${baseId}-tab-${id}`;
+  const panelId = `${baseId}-panel`;
   const firstEnabledId = tabs.find((t) => !t.disabled)?.id ?? tabs[0]?.id;
   const [internal, setInternal] = useState4(defaultSelectedId ?? firstEnabledId);
   const selected = selectedId ?? internal;
@@ -552,66 +1223,432 @@ var PivotSurface = ({
     onTabChange?.(id);
   };
   const active = tabs.find((t) => t.id === selected) ?? tabs[0];
-  return /* @__PURE__ */ jsxs4("div", { className, children: [
-    /* @__PURE__ */ jsx7(TabList, { selectedValue: selected, onTabSelect: handleSelect, appearance, size, children: tabs.map((t) => /* @__PURE__ */ jsx7(Tab, { value: t.id, icon: t.icon, disabled: t.disabled, children: t.label }, t.id)) }),
-    /* @__PURE__ */ jsx7("div", { children: active?.content })
+  if (ce) {
+    const [bodyTop, , bodyBottom] = ceForm.tabBody.padding;
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className,
+        style: { padding: `0 ${ceForm.page.insetRight}px 0 ${ceForm.page.insetLeft}px`, minWidth: 0 },
+        "data-surface-part": "pivot",
+        "data-look": "ce",
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: styles.ceCard, "data-surface-part": "header-card", children: [
+            header,
+            /* @__PURE__ */ jsx8(
+              TabList,
+              {
+                className: styles.ceStrip,
+                selectedValue: selected,
+                onTabSelect: handleSelect,
+                appearance: "transparent",
+                size: "large",
+                "data-surface-part": "tab-strip",
+                children: tabs.map((t) => /* @__PURE__ */ jsx8(
+                  Tab,
+                  {
+                    value: t.id,
+                    icon: t.icon,
+                    disabled: t.disabled,
+                    className: styles.ceTab,
+                    id: tabId(t.id),
+                    "aria-controls": t.id === active?.id ? panelId : void 0,
+                    children: t.label
+                  },
+                  t.id
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "div",
+            {
+              role: "tabpanel",
+              id: panelId,
+              "aria-labelledby": active ? tabId(active.id) : void 0,
+              style: { paddingTop: bodyTop, paddingBottom: bodyBottom },
+              "data-surface-part": "tab-body",
+              children: active?.content
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5("div", { className, children: [
+    header,
+    /* @__PURE__ */ jsx8(TabList, { selectedValue: selected, onTabSelect: handleSelect, appearance, size, children: tabs.map((t) => /* @__PURE__ */ jsx8(
+      Tab,
+      {
+        value: t.id,
+        icon: t.icon,
+        disabled: t.disabled,
+        id: tabId(t.id),
+        "aria-controls": t.id === active?.id ? panelId : void 0,
+        children: t.label
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ jsx8("div", { role: "tabpanel", id: panelId, "aria-labelledby": active ? tabId(active.id) : void 0, "data-surface-part": "tab-body", children: active?.content })
   ] });
 };
 
 // src/v9/containers/CommandSurface.tsx
+import React4 from "react";
 import {
+  Button as Button3,
   Toolbar as Toolbar2,
   ToolbarButton as ToolbarButton2,
-  Menu,
-  MenuTrigger,
-  MenuPopover,
-  MenuList,
-  MenuItem
+  ToolbarDivider,
+  Menu as Menu2,
+  MenuTrigger as MenuTrigger2,
+  MenuPopover as MenuPopover2,
+  MenuList as MenuList2,
+  MenuItem,
+  buttonClassNames,
+  makeStyles as makeStyles6,
+  mergeClasses as mergeClasses4,
+  tokens as tokens8
 } from "@fluentui/react-components";
-import { MoreHorizontal20Regular } from "@fluentui/react-icons";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import {
+  ArrowLeft20Regular,
+  ChevronDown12Regular as ChevronDown12Regular2,
+  ChevronDown16Regular,
+  MoreHorizontal20Regular,
+  MoreVertical16Regular,
+  WindowNew20Regular
+} from "@fluentui/react-icons";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ItemMenu({ items, trigger }) {
+  return /* @__PURE__ */ jsxs6(Menu2, { children: [
+    /* @__PURE__ */ jsx9(MenuTrigger2, { disableButtonEnhancement: true, children: trigger }),
+    /* @__PURE__ */ jsx9(MenuPopover2, { children: /* @__PURE__ */ jsx9(MenuList2, { children: items.map((m) => /* @__PURE__ */ jsx9(MenuItem, { icon: m.icon, disabled: m.disabled, onClick: m.onClick, children: m.label }, m.id)) }) })
+  ] });
+}
 function renderToolbarButton(item) {
-  return /* @__PURE__ */ jsx8(
+  const button = /* @__PURE__ */ jsx9(
     ToolbarButton2,
     {
       icon: item.icon,
       appearance: item.appearance === "primary" ? "primary" : "subtle",
       disabled: item.disabled,
-      onClick: item.onClick,
+      onClick: item.menuItems?.length ? void 0 : item.onClick,
       children: item.label
     },
     item.id
   );
+  if (!item.menuItems?.length) return button;
+  if (!item.split) return /* @__PURE__ */ jsx9(ItemMenu, { items: item.menuItems, trigger: button }, item.id);
+  return /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
+    React4.cloneElement(button, { onClick: item.onClick }),
+    /* @__PURE__ */ jsx9(
+      ItemMenu,
+      {
+        items: item.menuItems,
+        trigger: /* @__PURE__ */ jsx9(
+          ToolbarButton2,
+          {
+            appearance: "subtle",
+            "aria-label": `More ${item.label} options`,
+            icon: /* @__PURE__ */ jsx9(ChevronDown16Regular, {}),
+            disabled: item.disabled
+          }
+        )
+      }
+    )
+  ] }, item.id);
 }
-var CommandSurface = ({
-  items,
-  overflowItems,
-  farItems,
-  size = "small",
-  className
-}) => {
+var CB = ceForm.commandBar;
+var FLUENT_BORDER = 1;
+var FOCUS_ROOM = 2;
+var useStyles6 = makeStyles6({
+  root: {
+    minWidth: 0,
+    // Page insets (16 left / 20 right), 8px from the top, 16px gap to the header card. A class
+    // (not an inline style) so a host's className can override it.
+    padding: `${CB.marginTop}px ${ceForm.page.insetRight}px ${ceForm.header.marginTop}px ${ceForm.page.commandBarInsetLeft}px`
+  },
+  card: {
+    display: "flex",
+    alignItems: "center",
+    minWidth: 0,
+    boxSizing: "border-box",
+    height: `${CB.cardHeight}px`,
+    backgroundColor: tokens8.colorNeutralBackground1,
+    border: "1px solid transparent",
+    borderRadius: tokens8.borderRadiusXLarge,
+    boxShadow: tokens8.shadow4
+  },
+  group: { display: "flex", alignItems: "center", flexShrink: 0 },
+  nav: { marginLeft: `${CB.navInsetLeft}px` },
+  navButton: {
+    height: `${CB.buttonHeight}px`,
+    minWidth: 0,
+    // Fluent caps icon-only buttons at 32px; the measured back/pop-out/overflow are wider.
+    maxWidth: "none",
+    padding: 0,
+    flexShrink: 0
+  },
+  divider: {
+    flexGrow: 0,
+    height: `${CB.dividerHeight}px`,
+    padding: 0,
+    // Measured line colour #d1d1d1 = colorNeutralStroke1 (ToolbarDivider has no `appearance`
+    // prop, so the Divider's pseudo-element halves are recoloured; both sides, for RTL).
+    "::before": { borderRightColor: tokens8.colorNeutralStroke1, borderLeftColor: tokens8.colorNeutralStroke1 },
+    "::after": { borderRightColor: tokens8.colorNeutralStroke1, borderLeftColor: tokens8.colorNeutralStroke1 }
+  },
+  splitDivider: { height: `${CB.splitDividerHeight}px` },
+  commands: {
+    flex: "1 1 auto",
+    minWidth: 0,
+    columnGap: 0,
+    // Commands past the edge are clipped (Dynamics folds them into ⋮ by an unmeasured rule — pass
+    // overflowItems). The FOCUS_ROOM padding/negative margin keeps forced-colors outlines visible.
+    overflow: "hidden",
+    padding: `${FOCUS_ROOM}px ${CB.commandsPaddingRight}px ${FOCUS_ROOM}px ${FOCUS_ROOM}px`,
+    margin: `-${FOCUS_ROOM}px 0 -${FOCUS_ROOM}px -${FOCUS_ROOM}px`
+  },
+  command: {
+    height: `${CB.buttonHeight}px`,
+    minWidth: 0,
+    flexShrink: 0,
+    padding: `1px ${CB.buttonPaddingX - FLUENT_BORDER}px`,
+    fontSize: tokens8.fontSizeBase300,
+    fontWeight: tokens8.fontWeightRegular,
+    lineHeight: "21px",
+    [`& .${buttonClassNames.icon}`]: {
+      width: `${CB.iconSize}px`,
+      height: `${CB.iconSize}px`,
+      fontSize: `${CB.iconSize}px`,
+      marginRight: `${CB.iconGap}px`
+    }
+  },
+  // Measured colours — NOT applied to primary commands, whose on-brand colours Fluent owns.
+  commandColors: {
+    color: tokens8.colorNeutralForeground1,
+    [`& .${buttonClassNames.icon}`]: { color: tokens8.colorNeutralForeground2 }
+  },
+  menuCommand: { paddingRight: 0 },
+  chevronZone: {
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: `${CB.chevronZone - FLUENT_BORDER}px`,
+    flexShrink: 0
+  },
+  splitMain: { marginRight: `${CB.splitGap}px` },
+  iconOnly: {
+    height: `${CB.buttonHeight}px`,
+    minWidth: 0,
+    maxWidth: "none",
+    flexShrink: 0,
+    padding: 0,
+    color: tokens8.colorNeutralForeground1
+  },
+  far: { padding: `0 ${CB.farPadding}px` },
+  farButton: {
+    height: `${CB.shareHeight}px`,
+    minWidth: 0,
+    // Share's border is a real 1px #d1d1d1 border in Dynamics too (bl=1 alongside p=1,8).
+    padding: `1px ${CB.sharePaddingX}px`,
+    fontSize: `${CB.shareFontSize}px`,
+    lineHeight: `${CB.shareLineHeight}px`,
+    fontWeight: tokens8.fontWeightRegular,
+    color: tokens8.colorNeutralForeground2,
+    borderTopColor: tokens8.colorNeutralStroke1,
+    borderRightColor: tokens8.colorNeutralStroke1,
+    borderBottomColor: tokens8.colorNeutralStroke1,
+    borderLeftColor: tokens8.colorNeutralStroke1,
+    [`& .${buttonClassNames.icon}`]: {
+      width: `${CB.shareIconSize}px`,
+      height: `${CB.shareIconSize}px`,
+      fontSize: `${CB.shareIconSize}px`,
+      marginRight: "4px"
+    }
+  }
+});
+function CeCommandSurface({ items, overflowItems, farItems, className, onBack, onPopOut }) {
+  const styles = useStyles6();
+  const measuredColors = (item) => item.appearance !== "primary";
+  const commandClass = (item, ...extra) => mergeClasses4(styles.command, measuredColors(item) && styles.commandColors, ...extra);
+  const commandPart = (item) => ({
+    "data-surface-part": "command",
+    "data-measured-colors": measuredColors(item) ? "true" : void 0
+  });
+  const appearanceOf = (item) => item.appearance === "primary" ? "primary" : "subtle";
+  const command = (item) => {
+    if (item.menuItems?.length && item.split) {
+      return /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
+        /* @__PURE__ */ jsx9(
+          ToolbarButton2,
+          {
+            appearance: appearanceOf(item),
+            icon: item.icon,
+            disabled: item.disabled,
+            onClick: item.onClick,
+            className: commandClass(item, styles.splitMain),
+            ...commandPart(item),
+            children: item.label
+          }
+        ),
+        /* @__PURE__ */ jsx9(ToolbarDivider, { className: mergeClasses4(styles.divider, styles.splitDivider) }),
+        /* @__PURE__ */ jsx9(
+          ItemMenu,
+          {
+            items: item.menuItems,
+            trigger: /* @__PURE__ */ jsx9(
+              ToolbarButton2,
+              {
+                appearance: "subtle",
+                "aria-label": `More ${item.label} options`,
+                icon: /* @__PURE__ */ jsx9(ChevronDown16Regular, {}),
+                disabled: item.disabled,
+                className: styles.iconOnly,
+                style: { width: CB.chevronZone, marginRight: -CB.splitChevronOverhang },
+                "data-surface-part": "command-split-chevron"
+              }
+            )
+          }
+        )
+      ] }, item.id);
+    }
+    if (item.menuItems?.length) {
+      return /* @__PURE__ */ jsx9(
+        ItemMenu,
+        {
+          items: item.menuItems,
+          trigger: /* @__PURE__ */ jsxs6(
+            ToolbarButton2,
+            {
+              appearance: appearanceOf(item),
+              icon: item.icon,
+              disabled: item.disabled,
+              className: commandClass(item, styles.menuCommand),
+              ...commandPart(item),
+              children: [
+                item.label,
+                /* @__PURE__ */ jsx9("span", { className: styles.chevronZone, "aria-hidden": "true", children: /* @__PURE__ */ jsx9(ChevronDown12Regular2, {}) })
+              ]
+            }
+          )
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ jsx9(
+      ToolbarButton2,
+      {
+        appearance: appearanceOf(item),
+        icon: item.icon,
+        disabled: item.disabled,
+        onClick: item.onClick,
+        className: commandClass(item),
+        ...commandPart(item),
+        children: item.label
+      },
+      item.id
+    );
+  };
+  return /* @__PURE__ */ jsx9("div", { className: mergeClasses4(styles.root, className), "data-surface-part": "command-bar", "data-look": "ce", children: /* @__PURE__ */ jsxs6("div", { className: styles.card, "data-surface-part": "command-card", children: [
+    (onBack || onPopOut) && /* @__PURE__ */ jsxs6("div", { role: "group", "aria-label": "Navigation", className: mergeClasses4(styles.group, styles.nav), "data-surface-part": "command-nav", children: [
+      onBack && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(
+          Button3,
+          {
+            appearance: "subtle",
+            icon: /* @__PURE__ */ jsx9(ArrowLeft20Regular, {}),
+            "aria-label": "Back",
+            onClick: onBack,
+            className: styles.navButton,
+            style: { width: CB.backWidth },
+            "data-surface-part": "command-back"
+          }
+        ),
+        /* @__PURE__ */ jsx9(ToolbarDivider, { className: styles.divider })
+      ] }),
+      onPopOut && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(
+          Button3,
+          {
+            appearance: "subtle",
+            icon: /* @__PURE__ */ jsx9(WindowNew20Regular, {}),
+            "aria-label": "Open in new window",
+            onClick: onPopOut,
+            className: styles.navButton,
+            style: { width: CB.popOutWidth },
+            "data-surface-part": "command-popout"
+          }
+        ),
+        /* @__PURE__ */ jsx9(ToolbarDivider, { className: styles.divider })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6(Toolbar2, { "aria-label": "Commands", className: styles.commands, "data-surface-part": "command-list", children: [
+      items.map(command),
+      overflowItems && overflowItems.length > 0 && /* @__PURE__ */ jsx9(
+        ItemMenu,
+        {
+          items: overflowItems,
+          trigger: /* @__PURE__ */ jsx9(
+            ToolbarButton2,
+            {
+              appearance: "subtle",
+              "aria-label": "More commands",
+              icon: /* @__PURE__ */ jsx9(MoreVertical16Regular, {}),
+              className: styles.iconOnly,
+              style: { width: CB.overflowWidth },
+              "data-surface-part": "command-overflow"
+            }
+          )
+        }
+      )
+    ] }),
+    farItems && farItems.length > 0 && /* @__PURE__ */ jsx9("div", { role: "group", "aria-label": "Secondary commands", className: mergeClasses4(styles.group, styles.far), "data-surface-part": "command-far", children: farItems.map((f) => {
+      const btn = /* @__PURE__ */ jsxs6(
+        Button3,
+        {
+          appearance: "outline",
+          icon: f.icon,
+          disabled: f.disabled,
+          onClick: f.menuItems?.length ? void 0 : f.onClick,
+          className: styles.farButton,
+          "data-surface-part": "command-far-button",
+          children: [
+            f.label,
+            f.menuItems?.length ? /* @__PURE__ */ jsx9(ChevronDown12Regular2, { style: { marginLeft: 4 }, "aria-hidden": true }) : null
+          ]
+        },
+        f.id
+      );
+      return f.menuItems?.length ? /* @__PURE__ */ jsx9(ItemMenu, { items: f.menuItems, trigger: btn }, f.id) : btn;
+    }) })
+  ] }) });
+}
+var CommandSurface = (props) => {
+  if (props.look === "ce") return /* @__PURE__ */ jsx9(CeCommandSurface, { ...props });
+  const { items, overflowItems, farItems, size = "small", className } = props;
   const hasFar = Boolean(farItems && farItems.length > 0);
   const hasOverflow = Boolean(overflowItems && overflowItems.length > 0);
   const hasPrimary = items.length > 0 || hasOverflow;
-  return /* @__PURE__ */ jsxs5("div", { className, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-    hasPrimary && /* @__PURE__ */ jsxs5(Toolbar2, { "aria-label": "Commands", size, children: [
+  return /* @__PURE__ */ jsxs6("div", { className, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    hasPrimary && /* @__PURE__ */ jsxs6(Toolbar2, { "aria-label": "Commands", size, children: [
       items.map(renderToolbarButton),
-      hasOverflow && /* @__PURE__ */ jsxs5(Menu, { children: [
-        /* @__PURE__ */ jsx8(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx8(ToolbarButton2, { "aria-label": "More commands", icon: /* @__PURE__ */ jsx8(MoreHorizontal20Regular, {}) }) }),
-        /* @__PURE__ */ jsx8(MenuPopover, { children: /* @__PURE__ */ jsx8(MenuList, { children: overflowItems.map((item) => /* @__PURE__ */ jsx8(MenuItem, { icon: item.icon, disabled: item.disabled, onClick: item.onClick, children: item.label }, item.id)) }) })
+      hasOverflow && /* @__PURE__ */ jsxs6(Menu2, { children: [
+        /* @__PURE__ */ jsx9(MenuTrigger2, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx9(ToolbarButton2, { "aria-label": "More commands", icon: /* @__PURE__ */ jsx9(MoreHorizontal20Regular, {}) }) }),
+        /* @__PURE__ */ jsx9(MenuPopover2, { children: /* @__PURE__ */ jsx9(MenuList2, { children: overflowItems.map((item) => /* @__PURE__ */ jsx9(MenuItem, { icon: item.icon, disabled: item.disabled, onClick: item.onClick, children: item.label }, item.id)) }) })
       ] })
     ] }),
     hasFar && // marginLeft:auto keeps far items right-aligned whether or not a primary toolbar renders.
-    /* @__PURE__ */ jsx8(Toolbar2, { "aria-label": "Secondary commands", size, style: { marginLeft: "auto" }, children: farItems.map(renderToolbarButton) })
+    /* @__PURE__ */ jsx9(Toolbar2, { "aria-label": "Secondary commands", size, style: { marginLeft: "auto" }, children: farItems.map(renderToolbarButton) })
   ] });
 };
 
 // src/v9/containers/ActionBar.tsx
-import { Button as Button2, tokens as tokens6 } from "@fluentui/react-components";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Button as Button4, tokens as tokens9 } from "@fluentui/react-components";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function renderButton(b) {
   const appearance = b.appearance === "primary" ? "primary" : b.appearance === "subtle" ? "subtle" : "secondary";
-  return /* @__PURE__ */ jsx9(Button2, { appearance, icon: b.icon, disabled: b.disabled, onClick: b.onClick, children: b.label }, b.id);
+  return /* @__PURE__ */ jsx10(Button4, { appearance, icon: b.icon, disabled: b.disabled, onClick: b.onClick, children: b.label }, b.id);
 }
 var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) => {
   const justify = alignment === "left" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
@@ -624,19 +1661,19 @@ var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) =>
     justifyContent: left.length ? "space-between" : justify,
     gap: 8,
     padding: "12px 24px",
-    borderTop: `1px solid ${tokens6.colorNeutralStroke2}`,
-    backgroundColor: tokens6.colorNeutralBackground1,
+    borderTop: `1px solid ${tokens9.colorNeutralStroke2}`,
+    backgroundColor: tokens9.colorNeutralBackground1,
     ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
   };
-  return /* @__PURE__ */ jsxs6("div", { className, style: rootStyle, children: [
-    left.length > 0 && /* @__PURE__ */ jsx9("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
-    /* @__PURE__ */ jsx9("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
+  return /* @__PURE__ */ jsxs7("div", { className, style: rootStyle, children: [
+    left.length > 0 && /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
+    /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
   ] });
 };
 
 // src/v9/containers/Footer.tsx
-import { tokens as tokens7 } from "@fluentui/react-components";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { tokens as tokens10 } from "@fluentui/react-components";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Footer = ({ sticky = true, align = "right", className, children }) => {
   const justify = align === "left" ? "flex-start" : align === "center" ? "center" : "flex-end";
   const rootStyle = {
@@ -645,17 +1682,82 @@ var Footer = ({ sticky = true, align = "right", className, children }) => {
     justifyContent: justify,
     gap: 8,
     padding: "12px 24px",
-    borderTop: `1px solid ${tokens7.colorNeutralStroke2}`,
-    backgroundColor: tokens7.colorNeutralBackground1,
+    borderTop: `1px solid ${tokens10.colorNeutralStroke2}`,
+    backgroundColor: tokens10.colorNeutralBackground1,
     ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
   };
-  return /* @__PURE__ */ jsx10("div", { className, style: rootStyle, children });
+  return /* @__PURE__ */ jsx11("div", { className, style: rootStyle, children });
+};
+
+// src/v9/layouts/TabColumns.tsx
+import React5 from "react";
+import { makeStyles as makeStyles7, mergeClasses as mergeClasses5 } from "@fluentui/react-components";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var useStyles7 = makeStyles7({
+  row: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "flex-start"
+  },
+  column: {
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box"
+  }
+});
+function positional(children) {
+  const out = [];
+  const walk = (node) => {
+    if (Array.isArray(node)) node.forEach(walk);
+    else out.push(node);
+  };
+  walk(children);
+  return out;
+}
+var isEmpty2 = (n) => n === null || n === void 0 || typeof n === "boolean" || n === "";
+var TabColumns = ({
+  widths,
+  minColumnWidth,
+  gap,
+  look: lookProp,
+  className,
+  style,
+  children
+}) => {
+  const styles = useStyles7();
+  const ambientLook = useLook();
+  const ce = (lookProp ?? ambientLook) === "ce";
+  const floor = minColumnWidth ?? (ce ? ceForm.tabBody.columnMinWidth : 300);
+  const spacing2 = gap ?? (ce ? ceForm.tabBody.columnGap : 20);
+  const slots = positional(children);
+  const visible = slots.map((s, i) => ({ node: s, i })).filter(({ node }) => !isEmpty2(node));
+  const shares = normalizeColumnShares(visible.map(({ i }) => widths?.[i] ?? 1));
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: mergeClasses5(styles.row, className),
+      style: { gap: spacing2, ...style },
+      "data-surface-part": "tab-columns",
+      "data-look": ce ? "ce" : "default",
+      children: visible.map(({ node, i }, v) => /* @__PURE__ */ jsx12(
+        "div",
+        {
+          className: styles.column,
+          style: { flex: `${shares[v]} 1 0`, minWidth: `min(${floor}px, 100%)`, gap: ce ? ceForm.tabBody.sectionGap : spacing2 },
+          "data-surface-part": "tab-column",
+          "data-column-index": i,
+          children: node
+        },
+        React5.isValidElement(node) && node.key != null ? node.key : i
+      ))
+    }
+  );
 };
 
 // src/v9/overlays/FormDialogSurface.tsx
-import { Dialog, DialogSurface, Button as Button3, Text as Text3, tokens as tokens8 } from "@fluentui/react-components";
+import { Dialog, DialogSurface, Button as Button5, Text as Text3, tokens as tokens11 } from "@fluentui/react-components";
 import { Dismiss20Regular } from "@fluentui/react-icons";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormDialogSurface = ({
   isOpen,
   onDismiss,
@@ -679,10 +1781,10 @@ var FormDialogSurface = ({
     justifyContent: "space-between",
     gap: 12,
     padding: "12px 20px",
-    borderBottom: `1px solid ${tokens8.colorNeutralStroke2}`
+    borderBottom: `1px solid ${tokens11.colorNeutralStroke2}`
   };
-  const counterStyle = { fontSize: tokens8.fontSizeBase200, color: tokens8.colorNeutralForeground3 };
-  return /* @__PURE__ */ jsx11(
+  const counterStyle = { fontSize: tokens11.fontSizeBase200, color: tokens11.colorNeutralForeground3 };
+  return /* @__PURE__ */ jsx13(
     Dialog,
     {
       open: isOpen,
@@ -690,7 +1792,7 @@ var FormDialogSurface = ({
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(
         DialogSurface,
         {
           className,
@@ -704,22 +1806,22 @@ var FormDialogSurface = ({
             padding: 0
           },
           children: [
-            showHeader && /* @__PURE__ */ jsxs7("div", { style: headerStyle, children: [
-              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-                title && /* @__PURE__ */ jsx11(Text3, { weight: "semibold", size: 400, children: title }),
-                subheader && /* @__PURE__ */ jsx11("span", { style: { fontSize: tokens8.fontSizeBase200, color: tokens8.colorNeutralForeground3, marginTop: 2 }, children: subheader })
+            showHeader && /* @__PURE__ */ jsxs8("div", { style: headerStyle, children: [
+              /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+                title && /* @__PURE__ */ jsx13(Text3, { weight: "semibold", size: 400, children: title }),
+                subheader && /* @__PURE__ */ jsx13("span", { style: { fontSize: tokens11.fontSizeBase200, color: tokens11.colorNeutralForeground3, marginTop: 2 }, children: subheader })
               ] }),
-              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                recordCounter && /* @__PURE__ */ jsxs7("span", { style: counterStyle, children: [
+              /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                recordCounter && /* @__PURE__ */ jsxs8("span", { style: counterStyle, children: [
                   recordCounter.current,
                   " of ",
                   recordCounter.total
                 ] }),
-                onDismiss && /* @__PURE__ */ jsx11(Button3, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ jsx11(Dismiss20Regular, {}), onClick: onDismiss })
+                onDismiss && /* @__PURE__ */ jsx13(Button5, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ jsx13(Dismiss20Regular, {}), onClick: onDismiss })
               ] })
             ] }),
-            /* @__PURE__ */ jsx11("div", { style: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }, children }),
-            footer && /* @__PURE__ */ jsx11("div", { style: { borderTop: `1px solid ${tokens8.colorNeutralStroke2}`, padding: "12px 20px" }, children: footer })
+            /* @__PURE__ */ jsx13("div", { style: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }, children }),
+            footer && /* @__PURE__ */ jsx13("div", { style: { borderTop: `1px solid ${tokens11.colorNeutralStroke2}`, padding: "12px 20px" }, children: footer })
           ]
         }
       )
@@ -728,8 +1830,8 @@ var FormDialogSurface = ({
 };
 
 // src/v9/overlays/ModalSurface.tsx
-import { Dialog as Dialog2, DialogSurface as DialogSurface2, Text as Text4, tokens as tokens9 } from "@fluentui/react-components";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Dialog as Dialog2, DialogSurface as DialogSurface2, Text as Text4, tokens as tokens12 } from "@fluentui/react-components";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var ModalSurface = ({
   isOpen,
   onDismiss,
@@ -743,7 +1845,7 @@ var ModalSurface = ({
   children
 }) => {
   const sizing = autoSize ? { width: "auto", minWidth: MODAL_AUTOSIZE_MIN_WIDTH, maxWidth: "100%" } : { maxWidth: "95vw", width: `${dialogWidthPx({ width, size })}px` };
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     Dialog2,
     {
       open: isOpen,
@@ -751,14 +1853,14 @@ var ModalSurface = ({
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ jsxs8(DialogSurface2, { className, style: { ...sizing, padding: 0 }, children: [
-        title && /* @__PURE__ */ jsx12("div", { style: { padding: "16px 20px 0" }, children: /* @__PURE__ */ jsx12(Text4, { weight: "semibold", size: 500, children: title }) }),
-        /* @__PURE__ */ jsx12("div", { style: { padding: 20 }, children }),
-        footer && /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsxs9(DialogSurface2, { className, style: { ...sizing, padding: 0 }, children: [
+        title && /* @__PURE__ */ jsx14("div", { style: { padding: "16px 20px 0" }, children: /* @__PURE__ */ jsx14(Text4, { weight: "semibold", size: 500, children: title }) }),
+        /* @__PURE__ */ jsx14("div", { style: { padding: 20 }, children }),
+        footer && /* @__PURE__ */ jsx14(
           "div",
           {
             style: {
-              borderTop: `1px solid ${tokens9.colorNeutralStroke2}`,
+              borderTop: `1px solid ${tokens12.colorNeutralStroke2}`,
               padding: "12px 20px",
               display: "flex",
               justifyContent: "flex-end",
@@ -778,10 +1880,10 @@ import {
   DrawerHeader,
   DrawerHeaderTitle,
   DrawerBody,
-  Button as Button4
+  Button as Button6
 } from "@fluentui/react-components";
 import { Dismiss24Regular } from "@fluentui/react-icons";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var PanelSurface = ({
   isOpen,
   onDismiss,
@@ -796,7 +1898,7 @@ var PanelSurface = ({
 }) => {
   const size = drawerSize ?? (width != null && width > 500 ? "medium" : "small");
   const customWidthStyle = width != null ? { width: `${width}px` } : void 0;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     OverlayDrawer,
     {
       open: isOpen,
@@ -810,16 +1912,16 @@ var PanelSurface = ({
         onDismiss?.();
       },
       children: [
-        /* @__PURE__ */ jsx13(DrawerHeader, { children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx15(DrawerHeader, { children: /* @__PURE__ */ jsx15(
           DrawerHeaderTitle,
           {
-            action: hasCloseButton && onDismiss ? /* @__PURE__ */ jsx13(Button4, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ jsx13(Dismiss24Regular, {}), onClick: onDismiss }) : void 0,
+            action: hasCloseButton && onDismiss ? /* @__PURE__ */ jsx15(Button6, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ jsx15(Dismiss24Regular, {}), onClick: onDismiss }) : void 0,
             children: title
           }
         ) }),
-        /* @__PURE__ */ jsxs9(DrawerBody, { children: [
-          /* @__PURE__ */ jsx13("div", { style: { padding: "12px 0" }, children }),
-          footer && /* @__PURE__ */ jsx13("div", { style: { marginTop: "auto", paddingTop: 12 }, children: footer })
+        /* @__PURE__ */ jsxs10(DrawerBody, { children: [
+          /* @__PURE__ */ jsx15("div", { style: { padding: "12px 0" }, children }),
+          footer && /* @__PURE__ */ jsx15("div", { style: { marginTop: "auto", paddingTop: 12 }, children: footer })
         ] })
       ]
     }
@@ -828,7 +1930,7 @@ var PanelSurface = ({
 
 // src/v9/overlays/CalloutSurface.tsx
 import { Popover, PopoverSurface } from "@fluentui/react-components";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function resolveTarget(target) {
   if (!target) return null;
   if (typeof target === "string") return document.querySelector(target);
@@ -849,7 +1951,7 @@ var CalloutSurface = ({
   if (!isOpen) return null;
   const el = resolveTarget(target);
   const positioning = { position, align, ...el ? { target: el } : {} };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     Popover,
     {
       open: true,
@@ -859,14 +1961,14 @@ var CalloutSurface = ({
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ jsx14(PopoverSurface, { className, style: { width: calloutWidthPx(width), padding: 16 }, children })
+      children: /* @__PURE__ */ jsx16(PopoverSurface, { className, style: { width: calloutWidthPx(width), padding: 16 }, children })
     }
   );
 };
 
 // src/v9/overlays/TooltipSurface.tsx
 import { Tooltip } from "@fluentui/react-components";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var DELAY_MS = {
   zero: 0,
   medium: 250,
@@ -878,20 +1980,24 @@ var TooltipSurface = ({
   delay = "medium",
   relationship = "label",
   children
-}) => /* @__PURE__ */ jsx15(Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
+}) => /* @__PURE__ */ jsx17(Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
 export {
   ActionBar,
   BREAKPOINTS,
   CALLOUT_DEFAULT_WIDTH,
   CARD_REFLOW_WIDTH,
+  CE_LABEL_ABOVE_BELOW_ROW_WIDTH,
+  CE_TAB_COLUMN_MIN_WIDTH,
   CalloutSurface,
   CommandSurface,
   DIALOG_SIZE_PX,
   DensityContext,
+  FieldRow,
   Footer,
   FormDialogSurface,
   FormHeader,
   FormSurface,
+  LookContext,
   MODAL_AUTOSIZE_MIN_WIDTH,
   ModalSurface,
   PANEL_DEFAULT_WIDTH,
@@ -901,11 +2007,16 @@ export {
   Section,
   SectionCard,
   SectionHeader,
+  TabColumns,
   TooltipSurface,
   calloutFormDefaults,
   calloutWidthPx,
+  ceFieldRowFirstOffset,
+  ceForm,
+  cePresenceBadgeStyle,
   clampSpan,
   colors,
+  createDynamicsCeTheme,
   createDynamicsV9DarkTheme,
   createDynamicsV9Theme,
   densityScale,
@@ -913,16 +2024,20 @@ export {
   dialogWidthCss,
   dialogWidthPx,
   dynamicsBrandRamp,
+  dynamicsCeTheme,
+  dynamicsV9DarkTheme,
   dynamicsV9Theme,
   fieldGridStyle,
   fieldRowStyle,
   gridTemplateForColumns,
   layout,
+  normalizeColumnShares,
   panelCustomWidthPx,
   panelKindFromWidth,
   radius,
   resolveBreakpoint,
   resolveResponsiveValue,
+  resolveTabColumnWidths,
   scaleSpacing,
   sectionStackingStyle,
   spacing,
@@ -931,6 +2046,7 @@ export {
   useContainerSize,
   useContainerWidth,
   useDensity,
+  useLook,
   useMediaQuery,
   useResponsiveValue
 };