@dataverse-kit/surface-kit 0.4.0 → 0.5.0

package/dist/v9.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/v9/index.ts
@@ -24,14 +34,18 @@ __export(v9_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,
   CommandSurface: () => CommandSurface,
   DIALOG_SIZE_PX: () => DIALOG_SIZE_PX,
   DensityContext: () => DensityContext,
+  FieldRow: () => FieldRow,
   Footer: () => Footer,
   FormDialogSurface: () => FormDialogSurface,
   FormHeader: () => FormHeader,
   FormSurface: () => FormSurface,
+  LookContext: () => LookContext,
   MODAL_AUTOSIZE_MIN_WIDTH: () => MODAL_AUTOSIZE_MIN_WIDTH,
   ModalSurface: () => ModalSurface,
   PANEL_DEFAULT_WIDTH: () => PANEL_DEFAULT_WIDTH,
@@ -41,28 +55,37 @@ __export(v9_exports, {
   Section: () => Section,
   SectionCard: () => SectionCard,
   SectionHeader: () => SectionHeader,
+  TabColumns: () => TabColumns,
   TooltipSurface: () => TooltipSurface,
   calloutFormDefaults: () => calloutFormDefaults,
   calloutWidthPx: () => calloutWidthPx,
+  ceFieldRowFirstOffset: () => ceFieldRowFirstOffset,
+  ceForm: () => import_design_tokens.ceForm,
+  cePresenceBadgeStyle: () => cePresenceBadgeStyle,
   clampSpan: () => clampSpan,
   colors: () => import_design_tokens.colors,
-  createDynamicsV9DarkTheme: () => createDynamicsV9DarkTheme,
-  createDynamicsV9Theme: () => createDynamicsV9Theme,
+  createDynamicsCeTheme: () => import_fluent_theme.createDynamicsCeTheme,
+  createDynamicsV9DarkTheme: () => import_fluent_theme.createDynamicsV9DarkTheme,
+  createDynamicsV9Theme: () => import_fluent_theme.createDynamicsV9Theme,
   densityScale: () => densityScale,
   dialogHeightCss: () => dialogHeightCss,
   dialogWidthCss: () => dialogWidthCss,
   dialogWidthPx: () => dialogWidthPx,
-  dynamicsBrandRamp: () => dynamicsBrandRamp,
-  dynamicsV9Theme: () => dynamicsV9Theme,
+  dynamicsBrandRamp: () => import_fluent_theme.dynamicsBrandRamp,
+  dynamicsCeTheme: () => import_fluent_theme.dynamicsCeTheme,
+  dynamicsV9DarkTheme: () => import_fluent_theme.dynamicsV9DarkTheme,
+  dynamicsV9Theme: () => import_fluent_theme.dynamicsV9Theme,
   fieldGridStyle: () => fieldGridStyle,
   fieldRowStyle: () => fieldRowStyle,
   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,
@@ -71,6 +94,7 @@ __export(v9_exports, {
   useContainerSize: () => useContainerSize,
   useContainerWidth: () => useContainerWidth,
   useDensity: () => useDensity,
+  useLook: () => useLook,
   useMediaQuery: () => useMediaQuery,
   useResponsiveValue: () => useResponsiveValue
 });
@@ -122,6 +146,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,
@@ -272,45 +324,22 @@ var import_react4 = require("react");
 var DensityContext = (0, import_react4.createContext)("comfortable");
 var useDensity = () => (0, import_react4.useContext)(DensityContext);
 
+// src/hooks/useLook.ts
+var import_react5 = require("react");
+var LookContext = (0, import_react5.createContext)("default");
+var useLook = () => (0, import_react5.useContext)(LookContext);
+
 // src/v9/theme.ts
-var import_react_components = require("@fluentui/react-components");
-var dynamicsBrandRamp = {
-  10: "#061724",
-  20: "#082338",
-  30: "#0a2e4a",
-  40: "#0c3b5e",
-  50: "#0e4775",
-  60: import_design_tokens.colors.brandDark,
-  // #005a9e — colorBrandBackgroundPressed
-  70: import_design_tokens.colors.brandHover,
-  // #106ebe — colorBrandBackground(Hover/Selected)
-  80: import_design_tokens.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 (0, import_react_components.createLightTheme)(brand);
-}
-function createDynamicsV9DarkTheme(brand = dynamicsBrandRamp) {
-  return (0, import_react_components.createDarkTheme)(brand);
-}
-var dynamicsV9Theme = createDynamicsV9Theme();
+var import_fluent_theme = require("@dataverse-kit/fluent-theme");
 
 // src/v9/containers/FormSurface.tsx
-var import_react_components2 = require("@fluentui/react-components");
+var import_react_components = require("@fluentui/react-components");
 var import_jsx_runtime = require("react/jsx-runtime");
-var useStyles = (0, import_react_components2.makeStyles)({
+var useStyles = (0, import_react_components.makeStyles)({
   root: {
     display: "grid",
     alignItems: "start",
-    backgroundColor: import_react_components2.tokens.colorNeutralBackground2
+    backgroundColor: import_react_components.tokens.colorNeutralBackground2
   },
   // Container forced a single column: reset every child's span the same way the @media
   // fallback does, so a Section with `columnStart` doesn't escape the stack.
@@ -335,10 +364,11 @@ var VIEWPORT_STACK = {
 var FormSurface = ({
   columns = 12,
   gap = 20,
-  padding = 20,
+  padding,
   density = "comfortable",
   background,
   containerWidth,
+  look = "default",
   collapseBelow = "sm",
   maxWidth,
   className,
@@ -346,12 +376,31 @@ var FormSurface = ({
   children
 }) => {
   const styles = useStyles();
+  if (look === "ce") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LookContext.Provider, { value: look, children: /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react_components2.mergeClasses)(
+  const cls = (0, import_react_components.mergeClasses)(
     styles.root,
     forceStack && styles.forceStackChildren,
     viewportStackSlot ? styles[viewportStackSlot] : void 0,
@@ -365,7 +414,7 @@ var FormSurface = ({
     ...maxWidth != null ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {},
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cls, style: inlineStyle, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LookContext.Provider, { value: look, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cls, style: inlineStyle, children }) }) });
 };
 
 // src/v9/containers/PageSurface.tsx
@@ -373,13 +422,237 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var PageSurface = ({ centered, maxWidth, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormSurface, { maxWidth: maxWidth ?? (centered ? 1200 : void 0), ...rest });
 
 // src/v9/containers/Section.tsx
-var import_react5 = require("react");
+var import_react6 = __toESM(require("react"), 1);
 var import_react_components4 = require("@fluentui/react-components");
 
+// src/v9/layouts/FieldRow.tsx
+var import_react_components2 = require("@fluentui/react-components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var F = import_design_tokens.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 = (0, import_react_components2.makeStyles)({
+  // ── 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: import_react_components2.tokens.fontSizeBase300,
+    lineHeight: `${F.labelLineHeight}px`,
+    fontWeight: import_react_components2.tokens.fontWeightRegular,
+    color: import_react_components2.tokens.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: import_react_components2.tokens.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: import_react_components2.tokens.fontSizeBase200,
+    fontWeight: import_react_components2.tokens.fontWeightSemibold,
+    color: import_react_components2.tokens.colorNeutralForeground1,
+    lineHeight: "1.3",
+    overflowWrap: "anywhere"
+  },
+  // v8 FieldRow's marker: colors.danger, semibold, 2px after the text.
+  defaultRequired: {
+    color: import_design_tokens.colors.danger,
+    marginLeft: "2px",
+    fontWeight: import_react_components2.tokens.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__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: (0, import_react_components2.mergeClasses)(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__ */ (0, import_jsx_runtime3.jsxs)(LabelTag, { htmlFor, className: styles.defaultLabel, "data-surface-part": "label", children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: (0, import_react_components2.mergeClasses)(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__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: (0, import_react_components2.mergeClasses)(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__ */ (0, import_jsx_runtime3.jsxs)(
+              LabelTag,
+              {
+                htmlFor,
+                className: (0, import_react_components2.mergeClasses)(beside ? styles.ceLabelBeside : styles.ceLabelAbove, auto && styles.ceAutoLabel),
+                "data-surface-part": "label",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "span",
+                    {
+                      className: (0, import_react_components2.mergeClasses)(styles.ceLabelText, beside && styles.ceLabelTextFill, auto && styles.ceAutoLabelText),
+                      "data-surface-part": "label-text",
+                      children: label
+                    }
+                  ),
+                  required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "span",
+                    {
+                      className: (0, import_react_components2.mergeClasses)(styles.ceRequired, beside && styles.ceRequiredBeside, auto && styles.ceAutoRequired),
+                      "aria-hidden": "true",
+                      "data-surface-part": "required",
+                      children: "*"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: (0, import_react_components2.mergeClasses)(
+                  // 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
 var import_react_components3 = require("@fluentui/react-components");
 var import_react_icons = require("@fluentui/react-icons");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SectionHeader = ({
   title,
   statusText,
@@ -388,8 +661,20 @@ 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: import_design_tokens.ceForm.section.titlePaddingTop,
+    minHeight: import_design_tokens.ceForm.section.titleHeight - import_design_tokens.ceForm.section.titlePaddingTop,
+    width: "100%"
+  };
   const rootStyle = {
     display: "flex",
     justifyContent: "space-between",
@@ -406,23 +691,37 @@ var SectionHeader = ({
     fontSize: import_react_components3.tokens.fontSizeBase200,
     color: import_react_components3.tokens.colorNeutralForeground3
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: rootStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: leftStyle, children: [
-      collapsible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: ce ? ceRootStyle : rootStyle, "data-surface-part": "section-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: leftStyle, children: [
+      collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_react_components3.Button,
         {
           appearance: "subtle",
           size: "small",
-          icon: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.ChevronRight20Regular, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.ChevronDown20Regular, {}),
+          icon: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_icons.ChevronRight20Regular, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_icons.ChevronDown20Regular, {}),
           onClick: onToggle,
           "aria-label": collapsed ? "Expand section" : "Collapse section",
           "aria-expanded": !collapsed
         }
       ),
-      title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components3.Text, { weight: "semibold", size: 300, children: title }),
-      statusText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(
+          import_react_components3.Text,
+          {
+            as: "h2",
+            weight: "semibold",
+            size: 300,
+            style: { margin: 0, lineHeight: `${import_design_tokens.ceForm.section.titleLineHeight}px`, color: import_react_components3.tokens.colorNeutralForeground1 },
+            "data-surface-part": "section-title",
+            children: title
+          }
+        )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_components3.Text, { weight: "semibold", size: 300, children: title })),
+      statusText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: statusStyle, children: statusText })
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: actions }) : showCommandBar && commandItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_components3.Toolbar, { "aria-label": "Section commands", size: "small", children: commandItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: actions }) : showCommandBar && commandItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_components3.Toolbar, { "aria-label": "Section commands", size: "small", children: commandItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_components3.ToolbarButton,
       {
         icon: item.icon,
@@ -437,8 +736,18 @@ var SectionHeader = ({
 };
 
 // src/v9/containers/Section.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var useStyles2 = (0, import_react_components4.makeStyles)({
+var import_jsx_runtime5 = require("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 = (0, import_react_components4.makeStyles)({
   // Phone-stack the internal field grid below `sm` (griffel — inline can't do @media).
   bodyStack: {
     [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { "& > *": { gridColumn: "1 / -1" } }
@@ -449,7 +758,7 @@ var Section = ({
   columnSpan = 12,
   columnStart,
   rowPosition,
-  internalColumns = 12,
+  internalColumns: internalColumnsProp,
   showCommandBar,
   commandItems,
   statusText,
@@ -461,12 +770,16 @@ var Section = ({
   variant = "card",
   minHeight = 80,
   density: densityProp,
+  look: lookProp,
   className,
   style,
   children
 }) => {
-  const styles = useStyles2();
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react5.useState)(defaultCollapsed);
+  const styles = useStyles3();
+  const internalColumns = internalColumnsProp ?? 12;
+  const ambientLook = useLook();
+  const ce = (lookProp ?? ambientLook) === "ce" && variant === "card";
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react6.useState)(defaultCollapsed);
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const toggle = () => {
     const next = !collapsed;
@@ -492,7 +805,7 @@ var Section = ({
       width: "100%",
       background: "transparent"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: placeholderStyle });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: placeholderStyle });
   }
   const chrome = variant === "flat" ? {
     backgroundColor: import_react_components4.tokens.colorNeutralBackground1,
@@ -512,15 +825,76 @@ var Section = ({
     overflow: "hidden"
   };
   const showHeader = Boolean(title) || showCommandBar || collapsible;
+  if (ce) {
+    const n = Math.max(1, Math.round(internalColumnsProp ?? 1));
+    const ceChrome = {
+      backgroundColor: import_react_components4.tokens.colorNeutralBackground1,
+      border: "1px solid transparent",
+      borderRadius: import_react_components4.tokens.borderRadiusXLarge,
+      boxShadow: import_react_components4.tokens.shadow4,
+      padding: px(import_design_tokens.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__ */ (0, import_jsx_runtime5.jsxs)("section", { className, style: { ...ceChrome, ...rootStyle }, "data-surface-part": "section", "data-look": "ce", children: [
+      notification && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: notification }),
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        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__ */ (0, import_jsx_runtime5.jsx)(
+          "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__ */ (0, import_jsx_runtime5.jsx)(
+              "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 ? import_design_tokens.ceForm.section.columnGutter : 0,
+                  minWidth: 0
+                },
+                "data-surface-part": "section-column",
+                children: col
+              },
+              import_react6.default.isValidElement(col) && col.key != null ? col.key : `col-${i}`
+            ))
+          }
+        )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: -ceFieldRowFirstOffset }, "data-surface-part": "section-body", children }))
+    ] });
+  }
   const bodyStyle = {
     display: "grid",
     gridTemplateColumns: `repeat(${internalColumns}, 1fr)`,
     gap: bodyGap,
     alignItems: "start"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, style: { ...chrome, ...rootStyle }, children: [
-    notification && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginBottom: scaleSpacing(8, density) }, children: notification }),
-    showHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, style: { ...chrome, ...rootStyle }, children: [
+    notification && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginBottom: scaleSpacing(8, density) }, children: notification }),
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SectionHeader,
       {
         title,
@@ -532,20 +906,20 @@ var Section = ({
         onToggle: toggle
       }
     ),
-    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_react_components4.mergeClasses)(styles.bodyStack), style: bodyStyle, children })
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_react_components4.mergeClasses)(styles.bodyStack), style: bodyStyle, children })
   ] });
 };
 
 // src/v9/containers/SectionCard.tsx
 var import_react_components5 = require("@fluentui/react-components");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SectionCard = ({
   accentColor = import_react_components5.tokens.colorBrandStroke1,
   accentWidth = 3,
   variant = "card",
   style,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   Section,
   {
     variant,
@@ -555,18 +929,247 @@ var SectionCard = ({
 );
 
 // src/v9/containers/FormHeader.tsx
+var import_react7 = __toESM(require("react"), 1);
 var import_react_components6 = require("@fluentui/react-components");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var FormHeader = ({
-  title,
-  subtitle,
-  status,
-  titleColor,
-  subtitleColor,
-  persona,
-  actions,
-  className
-}) => {
+var import_react_icons2 = require("@fluentui/react-icons");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var H = import_design_tokens.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 ${import_react_components6.tokens.colorNeutralBackground1}`,
+  right: -PRESENCE_RING,
+  bottom: -PRESENCE_RING
+});
+var FIELDS_MIN_GAP = 16;
+var CE_TITLE_MIN_WIDTH = 120;
+var useStyles4 = (0, import_react_components6.makeStyles)({
+  // 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: import_react_components6.tokens.colorBrandForegroundLink,
+    cursor: "pointer",
+    ":hover": { color: import_react_components6.tokens.colorBrandForegroundLinkHover, textDecorationLine: "underline" },
+    ...(0, import_react_components6.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: import_react_components6.tokens.borderRadiusMedium,
+    background: "transparent",
+    color: import_react_components6.tokens.colorNeutralForeground2,
+    fontFamily: "inherit",
+    fontSize: import_react_components6.tokens.fontSizeBase300,
+    fontWeight: import_react_components6.tokens.fontWeightSemibold,
+    lineHeight: import_react_components6.tokens.lineHeightBase300,
+    cursor: "pointer",
+    ":hover": { backgroundColor: import_react_components6.tokens.colorSubtleBackgroundHover },
+    ...(0, import_react_components6.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: import_react_components6.tokens.colorSubtleBackgroundPressed,
+      color: import_react_components6.tokens.colorNeutralForeground1
+    }
+  }
+});
+var isEmpty = (v) => v === null || v === void 0 || v === "";
+function FieldTile({ field }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", paddingTop: FIELD_TOP, minWidth: 0 }, "data-surface-part": "header-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.Text, { weight: "semibold", size: 300, wrap: false, style: { color: import_react_components6.tokens.colorNeutralForeground1 }, "data-surface-part": "header-field-value", children: isEmpty(field.value) ? "---" : field.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.Text, { size: 200, wrap: false, style: { color: import_react_components6.tokens.colorNeutralForeground1 }, "data-surface-part": "header-field-label", children: field.label })
+  ] });
+}
+function Divider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        width: H.dividerWidth,
+        height: H.dividerHeight,
+        margin: `${DIVIDER_TOP}px ${H.dividerSpacing}px 0`,
+        backgroundColor: import_react_components6.tokens.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__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.Avatar, { name: title, color: "colorful", size: H.avatarSize, "aria-hidden": true }) : null);
+  const TitleTag = titleAs ?? "h1";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "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__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: H.avatarRing, marginRight: H.avatarToTitleGap, flexShrink: 0 }, "data-surface-part": "header-avatar", children: avatar }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { minWidth: CE_TITLE_MIN_WIDTH, flex: "1 1 auto" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "baseline", minWidth: 0 }, children: [
+            title != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_components6.Text,
+              {
+                as: TitleTag,
+                weight: "semibold",
+                size: 500,
+                truncate: true,
+                wrap: false,
+                style: { margin: 0, lineHeight: `${H.titleLineHeight}px`, color: titleColor ?? import_react_components6.tokens.colorNeutralForeground1 },
+                "data-surface-part": "header-title",
+                children: title
+              }
+            ),
+            status != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "span",
+              {
+                style: {
+                  paddingLeft: H.statusPaddingLeft,
+                  fontSize: import_react_components6.tokens.fontSizeBase300,
+                  lineHeight: `${H.titleLineHeight}px`,
+                  color: import_react_components6.tokens.colorNeutralForeground3,
+                  whiteSpace: "nowrap"
+                },
+                "data-surface-part": "header-status",
+                children: [
+                  "- ",
+                  status
+                ]
+              }
+            )
+          ] }),
+          (entity != null || activeForm) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", height: H.switcherHeight, marginTop: SUBTITLE_ROW_TOP }, "data-surface-part": "header-subtitle", children: [
+            entity != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: import_react_components6.tokens.fontSizeBase300, fontWeight: import_react_components6.tokens.fontWeightSemibold, color: import_react_components6.tokens.colorNeutralForeground2 }, children: entity }),
+            entity != null && activeForm && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", style: { margin: `0 ${SUBTITLE_DOT_SPACING}px`, color: import_react_components6.tokens.colorNeutralForeground2, lineHeight: "20px" }, children: "\xB7" }),
+            activeForm && (forms && forms.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              import_react_components6.Menu,
+              {
+                checkedValues: { form: [activeForm.id] },
+                onCheckedValueChange: (_e, data) => {
+                  const id = data.checkedItems[0];
+                  if (id && id !== activeForm.id) onFormChange?.(id);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: styles.switcher, "aria-label": `Form: ${activeForm.label}`, "data-surface-part": "form-switcher", children: [
+                    activeForm.label,
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.ChevronDown12Regular, {})
+                  ] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.MenuList, { children: forms.map((f) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.MenuItemRadio, { name: "form", value: f.id, children: f.label }, f.id)) }) })
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: import_react_components6.tokens.fontSizeBase300, fontWeight: import_react_components6.tokens.fontWeightSemibold, color: import_react_components6.tokens.colorNeutralForeground2 }, children: activeForm.label }))
+          ] })
+        ] }),
+        (headerFields?.length || owner || actions) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles.fields, style: { marginLeft: FIELDS_MIN_GAP }, "data-surface-part": "header-fields", children: [
+          headerFields?.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react7.default.Fragment, { children: [
+            i > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Divider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldTile, { field: f })
+          ] }, f.id ?? `${f.label}-${i}`)),
+          owner && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            headerFields?.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Divider, {}) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "flex-start" }, "data-surface-part": "header-owner", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { paddingTop: OWNER_AVATAR_TOP, marginRight: OWNER_NAME_GAP }, children: owner.avatar ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                import_react_components6.Avatar,
+                {
+                  name: owner.name,
+                  color: "colorful",
+                  size: H.ownerAvatarSize,
+                  badge: owner.presence ? { status: owner.presence, size: "extra-small", style: cePresenceBadgeStyle } : void 0
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                FieldTile,
+                {
+                  field: {
+                    label: owner.label ?? "Owner",
+                    value: owner.onClick ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: owner.onClick, className: styles.ownerLink, "data-surface-part": "header-owner-link", children: owner.name }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { color: import_react_components6.tokens.colorBrandForegroundLink }, children: owner.name })
+                  }
+                }
+              )
+            ] })
+          ] }),
+          actions != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: actions })
+        ] }),
+        onExpand && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_components6.Button,
+          {
+            appearance: "subtle",
+            icon: expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.ChevronUp20Regular, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons2.ChevronDown20Regular, {}),
+            "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__ */ (0, import_jsx_runtime7.jsx)(CeFormHeader, { ...props });
+  const { title, subtitle, status, titleColor, subtitleColor, persona, actions, className } = props;
   const rootStyle = {
     display: "flex",
     alignItems: "center",
@@ -584,25 +1187,87 @@ var FormHeader = ({
     color: subtitleColor || import_react_components6.tokens.colorNeutralForeground3,
     marginTop: 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: rootStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: mainStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, style: rootStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: mainStyle, children: [
       persona,
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: titleRowStyle, children: [
-          title != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_components6.Text, { weight: "semibold", size: 400, style: titleColor ? { color: titleColor } : void 0, children: title }),
-          status != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: statusStyle, children: status })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: titleRowStyle, children: [
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components6.Text, { weight: "semibold", size: 400, style: titleColor ? { color: titleColor } : void 0, children: title }),
+          status != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: statusStyle, children: status })
         ] }),
-        subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: subtitleStyle, children: subtitle })
+        subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: subtitleStyle, children: subtitle })
       ] })
     ] }),
-    actions != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: actions })
+    actions != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: actions })
   ] });
 };
 
 // src/v9/containers/PivotSurface.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_react_components7 = require("@fluentui/react-components");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FLUENT_TAB_RESERVED_SPACE_CLASS = "fui-Tab__content--reserved-space";
+var T = import_design_tokens.ceForm.tabs;
+var UNDERLINE_BOTTOM = 5;
+var useStyles5 = (0, import_react_components7.makeStyles)({
+  ceCard: {
+    minWidth: 0,
+    backgroundColor: import_react_components7.tokens.colorNeutralBackground1,
+    border: "1px solid transparent",
+    borderRadius: import_react_components7.tokens.borderRadiusXLarge,
+    boxShadow: import_react_components7.tokens.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: import_react_components7.tokens.colorNeutralForeground1,
+    [`& .${import_react_components7.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: import_react_components7.tokens.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,
@@ -610,10 +1275,17 @@ var PivotSurface = ({
   onTabChange,
   appearance = "transparent",
   size = "medium",
-  className
+  className,
+  look: lookProp,
+  header
 }) => {
+  const styles = useStyles5();
+  const ce = lookProp === "ce";
+  const baseId = (0, import_react8.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] = (0, import_react6.useState)(defaultSelectedId ?? firstEnabledId);
+  const [internal, setInternal] = (0, import_react8.useState)(defaultSelectedId ?? firstEnabledId);
   const selected = selectedId ?? internal;
   const handleSelect = (_e, data) => {
     const id = String(data.value);
@@ -621,58 +1293,411 @@ var PivotSurface = ({
     onTabChange?.(id);
   };
   const active = tabs.find((t) => t.id === selected) ?? tabs[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components7.TabList, { selectedValue: selected, onTabSelect: handleSelect, appearance, size, children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_components7.Tab, { value: t.id, icon: t.icon, disabled: t.disabled, children: t.label }, t.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: active?.content })
+  if (ce) {
+    const [bodyTop, , bodyBottom] = import_design_tokens.ceForm.tabBody.padding;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className,
+        style: { padding: `0 ${import_design_tokens.ceForm.page.insetRight}px 0 ${import_design_tokens.ceForm.page.insetLeft}px`, minWidth: 0 },
+        "data-surface-part": "pivot",
+        "data-look": "ce",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: styles.ceCard, "data-surface-part": "header-card", children: [
+            header,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_react_components7.TabList,
+              {
+                className: styles.ceStrip,
+                selectedValue: selected,
+                onTabSelect: handleSelect,
+                appearance: "transparent",
+                size: "large",
+                "data-surface-part": "tab-strip",
+                children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_react_components7.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__ */ (0, import_jsx_runtime8.jsx)(
+            "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__ */ (0, import_jsx_runtime8.jsxs)("div", { className, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components7.TabList, { selectedValue: selected, onTabSelect: handleSelect, appearance, size, children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_components7.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__ */ (0, import_jsx_runtime8.jsx)("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
+var import_react9 = __toESM(require("react"), 1);
 var import_react_components8 = require("@fluentui/react-components");
-var import_react_icons2 = require("@fluentui/react-icons");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react_icons3 = require("@fluentui/react-icons");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ItemMenu({ items, trigger }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_components8.Menu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.MenuTrigger, { disableButtonEnhancement: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.MenuList, { children: items.map((m) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.MenuItem, { icon: m.icon, disabled: m.disabled, onClick: m.onClick, children: m.label }, m.id)) }) })
+  ] });
+}
 function renderToolbarButton(item) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_react_components8.ToolbarButton,
     {
       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__ */ (0, import_jsx_runtime9.jsx)(ItemMenu, { items: item.menuItems, trigger: button }, item.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react9.default.Fragment, { children: [
+    import_react9.default.cloneElement(button, { onClick: item.onClick }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ItemMenu,
+      {
+        items: item.menuItems,
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_components8.ToolbarButton,
+          {
+            appearance: "subtle",
+            "aria-label": `More ${item.label} options`,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.ChevronDown16Regular, {}),
+            disabled: item.disabled
+          }
+        )
+      }
+    )
+  ] }, item.id);
 }
-var CommandSurface = ({
-  items,
-  overflowItems,
-  farItems,
-  size = "small",
-  className
-}) => {
+var CB = import_design_tokens.ceForm.commandBar;
+var FLUENT_BORDER = 1;
+var FOCUS_ROOM = 2;
+var useStyles6 = (0, import_react_components8.makeStyles)({
+  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 ${import_design_tokens.ceForm.page.insetRight}px ${import_design_tokens.ceForm.header.marginTop}px ${import_design_tokens.ceForm.page.commandBarInsetLeft}px`
+  },
+  card: {
+    display: "flex",
+    alignItems: "center",
+    minWidth: 0,
+    boxSizing: "border-box",
+    height: `${CB.cardHeight}px`,
+    backgroundColor: import_react_components8.tokens.colorNeutralBackground1,
+    border: "1px solid transparent",
+    borderRadius: import_react_components8.tokens.borderRadiusXLarge,
+    boxShadow: import_react_components8.tokens.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: import_react_components8.tokens.colorNeutralStroke1, borderLeftColor: import_react_components8.tokens.colorNeutralStroke1 },
+    "::after": { borderRightColor: import_react_components8.tokens.colorNeutralStroke1, borderLeftColor: import_react_components8.tokens.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: import_react_components8.tokens.fontSizeBase300,
+    fontWeight: import_react_components8.tokens.fontWeightRegular,
+    lineHeight: "21px",
+    [`& .${import_react_components8.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: import_react_components8.tokens.colorNeutralForeground1,
+    [`& .${import_react_components8.buttonClassNames.icon}`]: { color: import_react_components8.tokens.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: import_react_components8.tokens.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: import_react_components8.tokens.fontWeightRegular,
+    color: import_react_components8.tokens.colorNeutralForeground2,
+    borderTopColor: import_react_components8.tokens.colorNeutralStroke1,
+    borderRightColor: import_react_components8.tokens.colorNeutralStroke1,
+    borderBottomColor: import_react_components8.tokens.colorNeutralStroke1,
+    borderLeftColor: import_react_components8.tokens.colorNeutralStroke1,
+    [`& .${import_react_components8.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) => (0, import_react_components8.mergeClasses)(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__ */ (0, import_jsx_runtime9.jsxs)(import_react9.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_components8.ToolbarButton,
+          {
+            appearance: appearanceOf(item),
+            icon: item.icon,
+            disabled: item.disabled,
+            onClick: item.onClick,
+            className: commandClass(item, styles.splitMain),
+            ...commandPart(item),
+            children: item.label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.ToolbarDivider, { className: (0, import_react_components8.mergeClasses)(styles.divider, styles.splitDivider) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ItemMenu,
+          {
+            items: item.menuItems,
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_react_components8.ToolbarButton,
+              {
+                appearance: "subtle",
+                "aria-label": `More ${item.label} options`,
+                icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.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__ */ (0, import_jsx_runtime9.jsx)(
+        ItemMenu,
+        {
+          items: item.menuItems,
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            import_react_components8.ToolbarButton,
+            {
+              appearance: appearanceOf(item),
+              icon: item.icon,
+              disabled: item.disabled,
+              className: commandClass(item, styles.menuCommand),
+              ...commandPart(item),
+              children: [
+                item.label,
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.chevronZone, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.ChevronDown12Regular, {}) })
+              ]
+            }
+          )
+        },
+        item.id
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_components8.ToolbarButton,
+      {
+        appearance: appearanceOf(item),
+        icon: item.icon,
+        disabled: item.disabled,
+        onClick: item.onClick,
+        className: commandClass(item),
+        ...commandPart(item),
+        children: item.label
+      },
+      item.id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_react_components8.mergeClasses)(styles.root, className), "data-surface-part": "command-bar", "data-look": "ce", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.card, "data-surface-part": "command-card", children: [
+    (onBack || onPopOut) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { role: "group", "aria-label": "Navigation", className: (0, import_react_components8.mergeClasses)(styles.group, styles.nav), "data-surface-part": "command-nav", children: [
+      onBack && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_components8.Button,
+          {
+            appearance: "subtle",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.ArrowLeft20Regular, {}),
+            "aria-label": "Back",
+            onClick: onBack,
+            className: styles.navButton,
+            style: { width: CB.backWidth },
+            "data-surface-part": "command-back"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.ToolbarDivider, { className: styles.divider })
+      ] }),
+      onPopOut && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_components8.Button,
+          {
+            appearance: "subtle",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.WindowNew20Regular, {}),
+            "aria-label": "Open in new window",
+            onClick: onPopOut,
+            className: styles.navButton,
+            style: { width: CB.popOutWidth },
+            "data-surface-part": "command-popout"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.ToolbarDivider, { className: styles.divider })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_components8.Toolbar, { "aria-label": "Commands", className: styles.commands, "data-surface-part": "command-list", children: [
+      items.map(command),
+      overflowItems && overflowItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ItemMenu,
+        {
+          items: overflowItems,
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_react_components8.ToolbarButton,
+            {
+              appearance: "subtle",
+              "aria-label": "More commands",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.MoreVertical16Regular, {}),
+              className: styles.iconOnly,
+              style: { width: CB.overflowWidth },
+              "data-surface-part": "command-overflow"
+            }
+          )
+        }
+      )
+    ] }),
+    farItems && farItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "group", "aria-label": "Secondary commands", className: (0, import_react_components8.mergeClasses)(styles.group, styles.far), "data-surface-part": "command-far", children: farItems.map((f) => {
+      const btn = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        import_react_components8.Button,
+        {
+          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__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.ChevronDown12Regular, { style: { marginLeft: 4 }, "aria-hidden": true }) : null
+          ]
+        },
+        f.id
+      );
+      return f.menuItems?.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ItemMenu, { items: f.menuItems, trigger: btn }, f.id) : btn;
+    }) })
+  ] }) });
+}
+var CommandSurface = (props) => {
+  if (props.look === "ce") return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime8.jsxs)("div", { className, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-    hasPrimary && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_components8.Toolbar, { "aria-label": "Commands", size, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    hasPrimary && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_components8.Toolbar, { "aria-label": "Commands", size, children: [
       items.map(renderToolbarButton),
-      hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_components8.Menu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.ToolbarButton, { "aria-label": "More commands", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_icons2.MoreHorizontal20Regular, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuList, { children: overflowItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.MenuItem, { icon: item.icon, disabled: item.disabled, onClick: item.onClick, children: item.label }, item.id)) }) })
+      hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_components8.Menu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.ToolbarButton, { "aria-label": "More commands", icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons3.MoreHorizontal20Regular, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.MenuPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.MenuList, { children: overflowItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.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__ */ (0, import_jsx_runtime8.jsx)(import_react_components8.Toolbar, { "aria-label": "Secondary commands", size, style: { marginLeft: "auto" }, children: farItems.map(renderToolbarButton) })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components8.Toolbar, { "aria-label": "Secondary commands", size, style: { marginLeft: "auto" }, children: farItems.map(renderToolbarButton) })
   ] });
 };
 
 // src/v9/containers/ActionBar.tsx
 var import_react_components9 = require("@fluentui/react-components");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function renderButton(b) {
   const appearance = b.appearance === "primary" ? "primary" : b.appearance === "subtle" ? "subtle" : "secondary";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_components9.Button, { appearance, icon: b.icon, disabled: b.disabled, onClick: b.onClick, children: b.label }, b.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_components9.Button, { 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";
@@ -689,15 +1714,15 @@ var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) =>
     backgroundColor: import_react_components9.tokens.colorNeutralBackground1,
     ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className, style: rootStyle, children: [
-    left.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, style: rootStyle, children: [
+    left.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
   ] });
 };
 
 // src/v9/containers/Footer.tsx
 var import_react_components10 = require("@fluentui/react-components");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var Footer = ({ sticky = true, align = "right", className, children }) => {
   const justify = align === "left" ? "flex-start" : align === "center" ? "center" : "flex-end";
   const rootStyle = {
@@ -710,13 +1735,78 @@ var Footer = ({ sticky = true, align = "right", className, children }) => {
     backgroundColor: import_react_components10.tokens.colorNeutralBackground1,
     ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, style: rootStyle, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, style: rootStyle, children });
 };
 
-// src/v9/overlays/FormDialogSurface.tsx
+// src/v9/layouts/TabColumns.tsx
+var import_react10 = __toESM(require("react"), 1);
 var import_react_components11 = require("@fluentui/react-components");
-var import_react_icons3 = require("@fluentui/react-icons");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var useStyles7 = (0, import_react_components11.makeStyles)({
+  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 ? import_design_tokens.ceForm.tabBody.columnMinWidth : 300);
+  const spacing2 = gap ?? (ce ? import_design_tokens.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__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      className: (0, import_react_components11.mergeClasses)(styles.row, className),
+      style: { gap: spacing2, ...style },
+      "data-surface-part": "tab-columns",
+      "data-look": ce ? "ce" : "default",
+      children: visible.map(({ node, i }, v) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          className: styles.column,
+          style: { flex: `${shares[v]} 1 0`, minWidth: `min(${floor}px, 100%)`, gap: ce ? import_design_tokens.ceForm.tabBody.sectionGap : spacing2 },
+          "data-surface-part": "tab-column",
+          "data-column-index": i,
+          children: node
+        },
+        import_react10.default.isValidElement(node) && node.key != null ? node.key : i
+      ))
+    }
+  );
+};
+
+// src/v9/overlays/FormDialogSurface.tsx
+var import_react_components12 = require("@fluentui/react-components");
+var import_react_icons4 = require("@fluentui/react-icons");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FormDialogSurface = ({
   isOpen,
   onDismiss,
@@ -740,19 +1830,19 @@ var FormDialogSurface = ({
     justifyContent: "space-between",
     gap: 12,
     padding: "12px 20px",
-    borderBottom: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`
+    borderBottom: `1px solid ${import_react_components12.tokens.colorNeutralStroke2}`
   };
-  const counterStyle = { fontSize: import_react_components11.tokens.fontSizeBase200, color: import_react_components11.tokens.colorNeutralForeground3 };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_components11.Dialog,
+  const counterStyle = { fontSize: import_react_components12.tokens.fontSizeBase200, color: import_react_components12.tokens.colorNeutralForeground3 };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_components12.Dialog,
     {
       open: isOpen,
       modalType: isBlocking ? "modal" : "non-modal",
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        import_react_components11.DialogSurface,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        import_react_components12.DialogSurface,
         {
           className,
           style: {
@@ -765,22 +1855,22 @@ var FormDialogSurface = ({
             padding: 0
           },
           children: [
-            showHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: headerStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-                title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components11.Text, { weight: "semibold", size: 400, children: title }),
-                subheader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontSize: import_react_components11.tokens.fontSizeBase200, color: import_react_components11.tokens.colorNeutralForeground3, marginTop: 2 }, children: subheader })
+            showHeader && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: headerStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+                title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Text, { weight: "semibold", size: 400, children: title }),
+                subheader && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: import_react_components12.tokens.fontSizeBase200, color: import_react_components12.tokens.colorNeutralForeground3, marginTop: 2 }, children: subheader })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                recordCounter && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: counterStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                recordCounter && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { style: counterStyle, children: [
                   recordCounter.current,
                   " of ",
                   recordCounter.total
                 ] }),
-                onDismiss && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components11.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_icons3.Dismiss20Regular, {}), onClick: onDismiss })
+                onDismiss && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components12.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons4.Dismiss20Regular, {}), onClick: onDismiss })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }, children }),
-            footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { borderTop: `1px solid ${import_react_components11.tokens.colorNeutralStroke2}`, padding: "12px 20px" }, children: footer })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 }, children }),
+            footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { borderTop: `1px solid ${import_react_components12.tokens.colorNeutralStroke2}`, padding: "12px 20px" }, children: footer })
           ]
         }
       )
@@ -789,8 +1879,8 @@ var FormDialogSurface = ({
 };
 
 // src/v9/overlays/ModalSurface.tsx
-var import_react_components12 = require("@fluentui/react-components");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react_components13 = require("@fluentui/react-components");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var ModalSurface = ({
   isOpen,
   onDismiss,
@@ -804,22 +1894,22 @@ var ModalSurface = ({
   children
 }) => {
   const sizing = autoSize ? { width: "auto", minWidth: MODAL_AUTOSIZE_MIN_WIDTH, maxWidth: "100%" } : { maxWidth: "95vw", width: `${dialogWidthPx({ width, size })}px` };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_components12.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_components13.Dialog,
     {
       open: isOpen,
       modalType: isBlocking ? "modal" : "non-modal",
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_components12.DialogSurface, { className, style: { ...sizing, padding: 0 }, children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { padding: "16px 20px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_components12.Text, { weight: "semibold", size: 500, children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { padding: 20 }, children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_components13.DialogSurface, { className, style: { ...sizing, padding: 0 }, children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { padding: "16px 20px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components13.Text, { weight: "semibold", size: 500, children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { padding: 20 }, children }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
           {
             style: {
-              borderTop: `1px solid ${import_react_components12.tokens.colorNeutralStroke2}`,
+              borderTop: `1px solid ${import_react_components13.tokens.colorNeutralStroke2}`,
               padding: "12px 20px",
               display: "flex",
               justifyContent: "flex-end",
@@ -834,9 +1924,9 @@ var ModalSurface = ({
 };
 
 // src/v9/overlays/PanelSurface.tsx
-var import_react_components13 = require("@fluentui/react-components");
-var import_react_icons4 = require("@fluentui/react-icons");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_components14 = require("@fluentui/react-components");
+var import_react_icons5 = require("@fluentui/react-icons");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var PanelSurface = ({
   isOpen,
   onDismiss,
@@ -851,8 +1941,8 @@ var PanelSurface = ({
 }) => {
   const size = drawerSize ?? (width != null && width > 500 ? "medium" : "small");
   const customWidthStyle = width != null ? { width: `${width}px` } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-    import_react_components13.OverlayDrawer,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_react_components14.OverlayDrawer,
     {
       open: isOpen,
       position: "end",
@@ -865,16 +1955,16 @@ var PanelSurface = ({
         onDismiss?.();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react_components13.DrawerHeaderTitle,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.DrawerHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_react_components14.DrawerHeaderTitle,
           {
-            action: hasCloseButton && onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons4.Dismiss24Regular, {}), onClick: onDismiss }) : void 0,
+            action: hasCloseButton && onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components14.Button, { appearance: "subtle", "aria-label": "Close", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons5.Dismiss24Regular, {}), onClick: onDismiss }) : void 0,
             children: title
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components13.DrawerBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { padding: "12px 0" }, children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginTop: "auto", paddingTop: 12 }, children: footer })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_components14.DrawerBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { padding: "12px 0" }, children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { marginTop: "auto", paddingTop: 12 }, children: footer })
         ] })
       ]
     }
@@ -882,8 +1972,8 @@ var PanelSurface = ({
 };
 
 // src/v9/overlays/CalloutSurface.tsx
-var import_react_components14 = require("@fluentui/react-components");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react_components15 = require("@fluentui/react-components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function resolveTarget(target) {
   if (!target) return null;
   if (typeof target === "string") return document.querySelector(target);
@@ -904,8 +1994,8 @@ var CalloutSurface = ({
   if (!isOpen) return null;
   const el = resolveTarget(target);
   const positioning = { position, align, ...el ? { target: el } : {} };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_components14.Popover,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react_components15.Popover,
     {
       open: true,
       trapFocus: false,
@@ -914,14 +2004,14 @@ var CalloutSurface = ({
       onOpenChange: (_e, data) => {
         if (!data.open) onDismiss?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components14.PopoverSurface, { className, style: { width: calloutWidthPx(width), padding: 16 }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_components15.PopoverSurface, { className, style: { width: calloutWidthPx(width), padding: 16 }, children })
     }
   );
 };
 
 // src/v9/overlays/TooltipSurface.tsx
-var import_react_components15 = require("@fluentui/react-components");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react_components16 = require("@fluentui/react-components");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DELAY_MS = {
   zero: 0,
   medium: 250,
@@ -933,21 +2023,25 @@ var TooltipSurface = ({
   delay = "medium",
   relationship = "label",
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_components16.Tooltip, { content, relationship, positioning: position, showDelay: DELAY_MS[delay], children });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   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,
@@ -957,11 +2051,16 @@ var TooltipSurface = ({
   Section,
   SectionCard,
   SectionHeader,
+  TabColumns,
   TooltipSurface,
   calloutFormDefaults,
   calloutWidthPx,
+  ceFieldRowFirstOffset,
+  ceForm,
+  cePresenceBadgeStyle,
   clampSpan,
   colors,
+  createDynamicsCeTheme,
   createDynamicsV9DarkTheme,
   createDynamicsV9Theme,
   densityScale,
@@ -969,16 +2068,20 @@ var TooltipSurface = ({
   dialogWidthCss,
   dialogWidthPx,
   dynamicsBrandRamp,
+  dynamicsCeTheme,
+  dynamicsV9DarkTheme,
   dynamicsV9Theme,
   fieldGridStyle,
   fieldRowStyle,
   gridTemplateForColumns,
   layout,
+  normalizeColumnShares,
   panelCustomWidthPx,
   panelKindFromWidth,
   radius,
   resolveBreakpoint,
   resolveResponsiveValue,
+  resolveTabColumnWidths,
   scaleSpacing,
   sectionStackingStyle,
   spacing,
@@ -987,6 +2090,7 @@ var TooltipSurface = ({
   useContainerSize,
   useContainerWidth,
   useDensity,
+  useLook,
   useMediaQuery,
   useResponsiveValue
 });