@dataverse-kit/surface-kit 0.1.0 → 0.2.1

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(src_exports, {
   CommandSurface: () => CommandSurface,
   DIALOG_SIZE_PX: () => DIALOG_SIZE_PX,
   DashboardSurface: () => DashboardSurface,
+  DensityContext: () => DensityContext,
   FieldRow: () => FieldRow,
   Footer: () => Footer,
   FormDialogSurface: () => FormDialogSurface,
@@ -49,7 +50,7 @@ __export(src_exports, {
   calloutFormDefaults: () => calloutFormDefaults,
   calloutWidthPx: () => calloutWidthPx,
   clampSpan: () => clampSpan,
-  colors: () => colors,
+  colors: () => import_design_tokens.colors,
   createDynamicsTheme: () => createDynamicsTheme,
   densityScale: () => densityScale,
   dialogHeightCss: () => dialogHeightCss,
@@ -59,19 +60,20 @@ __export(src_exports, {
   fieldRowStyle: () => fieldRowStyle,
   fromFormDefinition: () => fromFormDefinition,
   gridTemplateForColumns: () => gridTemplateForColumns,
-  layout: () => layout,
+  layout: () => import_design_tokens.layout,
   panelCustomWidthPx: () => panelCustomWidthPx,
   panelKindFromWidth: () => panelKindFromWidth,
-  radius: () => radius,
+  radius: () => import_design_tokens.radius,
   resolveBreakpoint: () => resolveBreakpoint,
   resolveResponsiveValue: () => resolveResponsiveValue,
   scaleSpacing: () => scaleSpacing,
   sectionStackingStyle: () => sectionStackingStyle,
-  spacing: () => spacing,
-  typography: () => typography,
+  spacing: () => import_design_tokens.spacing,
+  typography: () => import_design_tokens.typography,
   useContainerBreakpoint: () => useContainerBreakpoint,
   useContainerSize: () => useContainerSize,
   useContainerWidth: () => useContainerWidth,
+  useDensity: () => useDensity,
   useMediaQuery: () => useMediaQuery,
   useResponsiveValue: () => useResponsiveValue
 });
@@ -199,80 +201,32 @@ function fieldRowStyle(labelWidth = "130px", mode = "media") {
 }
 
 // src/tokens/tokens.ts
-var colors = {
-  brand: "#0078d4",
-  brandHover: "#106ebe",
-  brandDark: "#005a9e",
-  borderNeutral: "#edebe9",
-  textPrimary: "#323130",
-  textSecondary: "#605e5c",
-  surface: "#ffffff",
-  surfaceAlt: "#f5f5f5",
-  // App canvas behind cards/forms (matches the Dynamics model-driven form background).
-  canvas: "#fafafa",
-  // Required-field asterisk / error accent (Fluent error red).
-  danger: "#a4262c",
-  // Field input: subtle idle fill + neutral border (Dynamics-style).
-  fieldFill: "#faf9f8",
-  fieldFillReadonly: "#f3f2f1",
-  fieldBorder: "#e1dfdd"
-};
-var spacing = {
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 24,
-  xxl: 40
-};
-var typography = {
-  fontFamily: '"Segoe UI", Arial, sans-serif',
-  fontFamilySemibold: '"Segoe UI Semibold", "Segoe UI", sans-serif',
-  fontSize: {
-    sm: "12px",
-    smPlus: "13px",
-    md: "14px",
-    lg: "17px"
-  },
-  fontWeight: {
-    regular: 400,
-    semibold: 600
-  }
-};
-var radius = {
-  card: "4px",
-  // Softer rounding for the outer form shell (matches Dynamics cards).
-  lg: "8px"
-};
-var layout = {
-  // Width of the label column in a two-column "Label : input" field row.
-  labelColWidth: "130px"
-};
+var import_design_tokens = require("@dataverse-kit/design-tokens");
 
 // src/tokens/theme.ts
 var import_react = require("@fluentui/react");
 function createDynamicsTheme() {
   return (0, import_react.createTheme)({
     palette: {
-      themePrimary: colors.brand,
-      themeDarkAlt: colors.brandHover,
-      themeDark: colors.brandDark,
-      themeDarker: colors.brandDark,
-      neutralPrimary: colors.textPrimary,
-      neutralSecondary: colors.textSecondary,
-      neutralLight: colors.borderNeutral,
-      neutralLighter: colors.surfaceAlt,
-      white: colors.surface,
-      redDark: colors.danger
+      themePrimary: import_design_tokens.colors.brand,
+      themeDarkAlt: import_design_tokens.colors.brandHover,
+      themeDark: import_design_tokens.colors.brandDark,
+      themeDarker: import_design_tokens.colors.brandDark,
+      neutralPrimary: import_design_tokens.colors.textPrimary,
+      neutralSecondary: import_design_tokens.colors.textSecondary,
+      neutralLight: import_design_tokens.colors.borderNeutral,
+      neutralLighter: import_design_tokens.colors.surfaceAlt,
+      white: import_design_tokens.colors.surface,
+      redDark: import_design_tokens.colors.danger
     },
     defaultFontStyle: {
-      fontFamily: typography.fontFamily
+      fontFamily: import_design_tokens.typography.fontFamily
     },
     semanticColors: {
-      errorText: colors.danger,
-      inputBorder: colors.fieldBorder,
-      inputBackground: colors.fieldFill,
-      bodyBackground: colors.surface
+      errorText: import_design_tokens.colors.danger,
+      inputBorder: import_design_tokens.colors.fieldBorder,
+      inputBackground: import_design_tokens.colors.fieldFill,
+      bodyBackground: import_design_tokens.colors.surface
     }
   });
 }
@@ -344,8 +298,13 @@ function useMediaQuery(query) {
   return matches;
 }
 
+// src/hooks/useDensity.ts
+var import_react5 = require("react");
+var DensityContext = (0, import_react5.createContext)("comfortable");
+var useDensity = () => (0, import_react5.useContext)(DensityContext);
+
 // src/layouts/ColumnLayout.tsx
-var import_react5 = require("@fluentui/react");
+var import_react6 = require("@fluentui/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ColumnLayout = ({
   columns,
@@ -357,12 +316,12 @@ var ColumnLayout = ({
   children
 }) => {
   const base = responsive ? fieldGridStyle(columns, mode) : { display: "grid", gridTemplateColumns: gridTemplateForColumns(columns) };
-  const cls = (0, import_react5.mergeStyles)(base, { gap }, className);
+  const cls = (0, import_react6.mergeStyles)(base, { gap }, className);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cls, style, children });
 };
 
 // src/layouts/TwoColumnLayout.tsx
-var import_react6 = require("@fluentui/react");
+var import_react7 = require("@fluentui/react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TwoColumnLayout = ({
   gap = 16,
@@ -371,7 +330,7 @@ var TwoColumnLayout = ({
   style,
   children
 }) => {
-  const cls = (0, import_react6.mergeStyles)(
+  const cls = (0, import_react7.mergeStyles)(
     {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
@@ -387,7 +346,7 @@ var TwoColumnLayout = ({
 };
 
 // src/layouts/FieldRow.tsx
-var import_react7 = require("@fluentui/react");
+var import_react8 = require("@fluentui/react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var FieldRow = ({
   label,
@@ -398,7 +357,7 @@ var FieldRow = ({
   className,
   children
 }) => {
-  const styles = (0, import_react7.mergeStyleSets)({
+  const styles = (0, import_react8.mergeStyleSets)({
     // The beside layout IS the shared responsive builder (130px label grid + @480
     // stack) — no hand-written breakpoint here.
     rowBeside: fieldRowStyle(labelWidth, "media"),
@@ -409,14 +368,14 @@ var FieldRow = ({
       minHeight: 38
     },
     label: {
-      fontSize: typography.fontSize.sm,
-      fontWeight: typography.fontWeight.semibold,
-      color: colors.textPrimary,
-      fontFamily: typography.fontFamily,
+      fontSize: import_design_tokens.typography.fontSize.sm,
+      fontWeight: import_design_tokens.typography.fontWeight.semibold,
+      color: import_design_tokens.colors.textPrimary,
+      fontFamily: import_design_tokens.typography.fontFamily,
       lineHeight: "1.3",
       wordBreak: "break-word"
     },
-    required: { color: colors.danger, marginLeft: 2, fontWeight: typography.fontWeight.semibold },
+    required: { color: import_design_tokens.colors.danger, marginLeft: 2, fontWeight: import_design_tokens.typography.fontWeight.semibold },
     full: { gridColumn: "1 / -1" }
   });
   const cls = [
@@ -434,21 +393,21 @@ var FieldRow = ({
 };
 
 // src/containers/FormSurface.tsx
-var import_react8 = require("@fluentui/react");
+var import_react9 = require("@fluentui/react");
 
 // src/internal/styles.ts
 var sharedTitleStyle = {
-  fontWeight: typography.fontWeight.semibold,
-  fontSize: typography.fontSize.md,
-  color: colors.textPrimary,
-  fontFamily: typography.fontFamilySemibold,
+  fontWeight: import_design_tokens.typography.fontWeight.semibold,
+  fontSize: import_design_tokens.typography.fontSize.md,
+  color: import_design_tokens.colors.textPrimary,
+  fontFamily: import_design_tokens.typography.fontFamilySemibold,
   paddingBottom: 0,
   marginBottom: 0
 };
 var dynamicsCardStyle = {
-  background: colors.surface,
-  border: `1px solid ${colors.borderNeutral}`,
-  borderRadius: radius.card,
+  background: import_design_tokens.colors.surface,
+  border: `1px solid ${import_design_tokens.colors.borderNeutral}`,
+  borderRadius: import_design_tokens.radius.card,
   overflow: "hidden"
 };
 var cardShadow = "0 1.6px 3.6px rgba(0, 0, 0, 0.08), 0 0.3px 0.9px rgba(0, 0, 0, 0.05)";
@@ -468,7 +427,8 @@ var FormSurface = ({
   columns = 12,
   gap = 20,
   padding = 20,
-  background = colors.canvas,
+  density = "comfortable",
+  background = import_design_tokens.colors.canvas,
   containerWidth,
   collapseBelow = "sm",
   maxWidth,
@@ -478,12 +438,14 @@ var FormSurface = ({
 }) => {
   const collapsePx = BREAKPOINTS[collapseBelow];
   const forceStack = containerWidth != null && containerWidth <= collapsePx;
-  const cls = (0, import_react8.mergeStyles)(
+  const scaledGap = scaleSpacing(gap, density);
+  const scaledPadding = scaleSpacing(padding, density);
+  const cls = (0, import_react9.mergeStyles)(
     {
       display: "grid",
       gridTemplateColumns: forceStack ? "1fr" : `repeat(${columns}, 1fr)`,
-      gap,
-      padding,
+      gap: scaledGap,
+      padding: scaledPadding,
       background,
       alignItems: "start",
       ...maxWidth != null ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {},
@@ -497,7 +459,7 @@ var FormSurface = ({
     },
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cls, style, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cls, style, children }) });
 };
 
 // src/containers/PageSurface.tsx
@@ -505,11 +467,11 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var PageSurface = ({ centered, maxWidth, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormSurface, { maxWidth: maxWidth ?? (centered ? 1200 : void 0), ...rest });
 
 // src/containers/Section.tsx
-var import_react10 = require("react");
-var import_react11 = require("@fluentui/react");
+var import_react11 = require("react");
+var import_react12 = require("@fluentui/react");
 
 // src/containers/SectionHeader.tsx
-var import_react9 = require("@fluentui/react");
+var import_react10 = require("@fluentui/react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var SectionHeader = ({
   title,
@@ -521,20 +483,20 @@ var SectionHeader = ({
   collapsed,
   onToggle
 }) => {
-  const styles = (0, import_react9.mergeStyleSets)({
+  const styles = (0, import_react10.mergeStyleSets)({
     root: {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       flexWrap: "nowrap",
-      borderBottom: `1px solid ${colors.borderNeutral}`,
+      borderBottom: `1px solid ${import_design_tokens.colors.borderNeutral}`,
       marginBottom: 16,
       minHeight: 48,
       width: "100%"
     },
     left: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 },
     title: sharedTitleStyle,
-    status: { marginLeft: 8, fontSize: "0.9em", color: colors.textSecondary },
+    status: { marginLeft: 8, fontSize: "0.9em", color: import_design_tokens.colors.textSecondary },
     chevron: {
       cursor: "pointer",
       border: "none",
@@ -542,7 +504,7 @@ var SectionHeader = ({
       padding: 4,
       display: "flex",
       alignItems: "center",
-      color: colors.textSecondary
+      color: import_design_tokens.colors.textSecondary
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles.root, children: [
@@ -555,14 +517,14 @@ var SectionHeader = ({
           onClick: onToggle,
           "aria-label": collapsed ? "Expand section" : "Collapse section",
           "aria-expanded": !collapsed,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react9.Icon, { iconName: collapsed ? "ChevronRight" : "ChevronDown" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Icon, { iconName: collapsed ? "ChevronRight" : "ChevronDown" })
         }
       ),
       title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.title, children: title }),
       statusText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles.status, children: statusText })
     ] }),
     actions ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: actions }) : showCommandBar && commandBarItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react9.CommandBar,
+      import_react10.CommandBar,
       {
         items: commandBarItems.slice(0, 2),
         overflowItems: commandBarItems.slice(2),
@@ -590,45 +552,50 @@ var Section = ({
   onCollapsedChange,
   variant = "card",
   minHeight = 80,
+  density: densityProp,
   className,
   style,
   children
 }) => {
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react10.useState)(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react11.useState)(defaultCollapsed);
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const toggle = () => {
     const next = !collapsed;
     if (controlledCollapsed == null) setInternalCollapsed(next);
     onCollapsedChange?.(next);
   };
+  const ctxDensity = useDensity();
+  const density = densityProp ?? ctxDensity;
+  const cardPad = `${scaleSpacing(3, density)}px ${scaleSpacing(20, density)}px ${scaleSpacing(20, density)}px ${scaleSpacing(20, density)}px`;
+  const bodyGap = scaleSpacing(7, density);
   const gridColumn = columnStart ? `${columnStart} / span ${columnSpan}` : `span ${columnSpan}`;
   const rootStyle = {
     gridColumn,
     ...rowPosition ? { gridRowStart: rowPosition } : {},
     ...style
   };
-  const styles = (0, import_react11.mergeStyleSets)({
-    card: { ...dynamicsCardStyle, boxShadow: cardShadow, padding: "3px 20px 20px 20px", minWidth: 300, width: "100%" },
+  const styles = (0, import_react12.mergeStyleSets)({
+    card: { ...dynamicsCardStyle, boxShadow: cardShadow, padding: cardPad, minWidth: 300, width: "100%" },
     flat: {
-      background: colors.surface,
-      borderRadius: radius.card,
-      padding: "3px 20px 20px 20px",
+      background: import_design_tokens.colors.surface,
+      borderRadius: import_design_tokens.radius.card,
+      padding: cardPad,
       minWidth: 300,
       width: "100%",
       overflow: "hidden"
     },
     placeholder: {
-      border: `1px dashed ${colors.borderNeutral}`,
-      borderRadius: radius.card,
+      border: `1px dashed ${import_design_tokens.colors.borderNeutral}`,
+      borderRadius: import_design_tokens.radius.card,
       minHeight,
       width: "100%",
       background: "transparent"
     },
-    notification: { marginBottom: 8 },
+    notification: { marginBottom: scaleSpacing(8, density) },
     body: {
       display: "grid",
       gridTemplateColumns: `repeat(${internalColumns}, 1fr)`,
-      gap: 7,
+      gap: bodyGap,
       alignItems: "start",
       selectors: {
         [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { selectors: { "> *": { gridColumn: "1 / -1" } } }
@@ -660,7 +627,7 @@ var Section = ({
 // src/containers/SectionCard.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SectionCard = ({
-  accentColor = colors.brand,
+  accentColor = import_design_tokens.colors.brand,
   accentWidth = 3,
   variant = "card",
   style,
@@ -675,7 +642,7 @@ var SectionCard = ({
 );
 
 // src/containers/FormHeader.tsx
-var import_react12 = require("@fluentui/react");
+var import_react13 = require("@fluentui/react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormHeader = ({
   title,
@@ -687,27 +654,27 @@ var FormHeader = ({
   actions,
   className
 }) => {
-  const styles = (0, import_react12.mergeStyleSets)({
+  const styles = (0, import_react13.mergeStyleSets)({
     root: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       gap: 12,
       padding: "12px 24px",
-      borderBottom: `1px solid ${colors.borderNeutral}`,
-      background: colors.surface
+      borderBottom: `1px solid ${import_design_tokens.colors.borderNeutral}`,
+      background: import_design_tokens.colors.surface
     },
     main: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 },
     titleRow: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" },
     title: {
-      fontSize: typography.fontSize.lg,
-      fontWeight: typography.fontWeight.semibold,
-      fontFamily: typography.fontFamilySemibold,
-      color: titleColor || colors.textPrimary,
+      fontSize: import_design_tokens.typography.fontSize.lg,
+      fontWeight: import_design_tokens.typography.fontWeight.semibold,
+      fontFamily: import_design_tokens.typography.fontFamilySemibold,
+      color: titleColor || import_design_tokens.colors.textPrimary,
       lineHeight: "1.3"
     },
-    status: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary },
-    subtitle: { fontSize: typography.fontSize.smPlus, color: subtitleColor || colors.textSecondary, marginTop: 2 }
+    status: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: import_design_tokens.colors.textSecondary },
+    subtitle: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: subtitleColor || import_design_tokens.colors.textSecondary, marginTop: 2 }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: [styles.root, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.main, children: [
@@ -725,8 +692,8 @@ var FormHeader = ({
 };
 
 // src/containers/PivotSurface.tsx
-var import_react13 = require("react");
-var import_react14 = require("@fluentui/react");
+var import_react14 = require("react");
+var import_react15 = require("@fluentui/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var PivotSurface = ({
   tabs,
@@ -737,7 +704,7 @@ var PivotSurface = ({
   className
 }) => {
   const firstEnabledId = tabs.find((t) => !t.disabled)?.id ?? tabs[0]?.id;
-  const [internal, setInternal] = (0, import_react13.useState)(defaultSelectedId ?? firstEnabledId);
+  const [internal, setInternal] = (0, import_react14.useState)(defaultSelectedId ?? firstEnabledId);
   const selected = selectedId ?? internal;
   const handleLinkClick = (item) => {
     const id = item?.props.itemKey;
@@ -748,14 +715,14 @@ var PivotSurface = ({
   const active = tabs.find((t) => t.id === selected) ?? tabs[0];
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react14.Pivot,
+      import_react15.Pivot,
       {
         selectedKey: selected,
         onLinkClick: handleLinkClick,
         linkFormat,
         headersOnly: true,
         children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react14.PivotItem,
+          import_react15.PivotItem,
           {
             itemKey: t.id,
             headerText: t.label,
@@ -771,12 +738,12 @@ var PivotSurface = ({
 };
 
 // src/containers/CommandSurface.tsx
-var import_react15 = require("@fluentui/react");
+var import_react16 = require("@fluentui/react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var CommandSurface = ({ items, overflowItems, farItems, className }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react15.CommandBar, { items, overflowItems, farItems, styles: { root: { padding: 0 } } }) });
+var CommandSurface = ({ items, overflowItems, farItems, className }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react16.CommandBar, { items, overflowItems, farItems, styles: { root: { padding: 0 } } }) });
 
 // src/containers/ActionBar.tsx
-var import_react16 = require("@fluentui/react");
+var import_react17 = require("@fluentui/react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function renderButton(b) {
   const common = {
@@ -785,24 +752,24 @@ function renderButton(b) {
     onClick: b.onClick,
     iconProps: b.iconName ? { iconName: b.iconName } : void 0
   };
-  if (b.appearance === "primary") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react16.PrimaryButton, { ...common }, b.id);
-  if (b.appearance === "subtle") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react16.ActionButton, { ...common }, b.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react16.DefaultButton, { ...common }, b.id);
+  if (b.appearance === "primary") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.PrimaryButton, { ...common }, b.id);
+  if (b.appearance === "subtle") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.ActionButton, { ...common }, b.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.DefaultButton, { ...common }, b.id);
 }
 var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) => {
   const justify = alignment === "left" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
   const visible = buttons.filter((b) => !b.hidden);
   const left = visible.filter((b) => b.position === "left");
   const right = visible.filter((b) => b.position !== "left");
-  const cls = (0, import_react16.mergeStyles)(
+  const cls = (0, import_react17.mergeStyles)(
     {
       display: "flex",
       alignItems: "center",
       justifyContent: left.length ? "space-between" : justify,
       gap: 8,
       padding: "12px 24px",
-      borderTop: `1px solid ${colors.borderNeutral}`,
-      background: colors.surface,
+      borderTop: `1px solid ${import_design_tokens.colors.borderNeutral}`,
+      background: import_design_tokens.colors.surface,
       ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
     },
     className
@@ -814,19 +781,19 @@ var ActionBar = ({ buttons, alignment = "right", sticky = true, className }) =>
 };
 
 // src/containers/Footer.tsx
-var import_react17 = require("@fluentui/react");
+var import_react18 = require("@fluentui/react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Footer = ({ sticky = true, align = "right", className, children }) => {
   const justify = align === "left" ? "flex-start" : align === "center" ? "center" : "flex-end";
-  const cls = (0, import_react17.mergeStyles)(
+  const cls = (0, import_react18.mergeStyles)(
     {
       display: "flex",
       alignItems: "center",
       justifyContent: justify,
       gap: 8,
       padding: "12px 24px",
-      borderTop: `1px solid ${colors.borderNeutral}`,
-      background: colors.surface,
+      borderTop: `1px solid ${import_design_tokens.colors.borderNeutral}`,
+      background: import_design_tokens.colors.surface,
       ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
     },
     className
@@ -835,7 +802,7 @@ var Footer = ({ sticky = true, align = "right", className, children }) => {
 };
 
 // src/overlays/FormDialogSurface.tsx
-var import_react18 = require("@fluentui/react");
+var import_react19 = require("@fluentui/react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormDialogSurface = ({
   isOpen,
@@ -853,31 +820,31 @@ var FormDialogSurface = ({
 }) => {
   const widthCss = dialogWidthCss({ width, size });
   const heightCss = dialogHeightCss(height);
-  const styles = (0, import_react18.mergeStyleSets)({
+  const styles = (0, import_react19.mergeStyleSets)({
     header: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       gap: 12,
       padding: "12px 20px",
-      borderBottom: `1px solid ${colors.borderNeutral}`
+      borderBottom: `1px solid ${import_design_tokens.colors.borderNeutral}`
     },
     headerLeft: { display: "flex", flexDirection: "column", minWidth: 0 },
     title: {
-      fontSize: typography.fontSize.lg,
-      fontWeight: typography.fontWeight.semibold,
-      fontFamily: typography.fontFamilySemibold,
-      color: colors.textPrimary
+      fontSize: import_design_tokens.typography.fontSize.lg,
+      fontWeight: import_design_tokens.typography.fontWeight.semibold,
+      fontFamily: import_design_tokens.typography.fontFamilySemibold,
+      color: import_design_tokens.colors.textPrimary
     },
-    subheader: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary, marginTop: 2 },
+    subheader: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: import_design_tokens.colors.textSecondary, marginTop: 2 },
     headerRight: { display: "flex", alignItems: "center", gap: 8 },
-    counter: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary },
+    counter: { fontSize: import_design_tokens.typography.fontSize.smPlus, color: import_design_tokens.colors.textSecondary },
     content: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 },
-    footer: { borderTop: `1px solid ${colors.borderNeutral}`, padding: "12px 20px" }
+    footer: { borderTop: `1px solid ${import_design_tokens.colors.borderNeutral}`, padding: "12px 20px" }
   });
   const showHeader = Boolean(title) || Boolean(recordCounter) || Boolean(onDismiss);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    import_react18.Modal,
+    import_react19.Modal,
     {
       isOpen,
       onDismiss,
@@ -913,12 +880,12 @@ var FormDialogSurface = ({
               recordCounter.total
             ] }),
             onDismiss && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_react18.IconButton,
+              import_react19.IconButton,
               {
                 iconProps: { iconName: "Cancel" },
                 ariaLabel: "Close",
                 onClick: onDismiss,
-                styles: { root: { color: colors.textSecondary } }
+                styles: { root: { color: import_design_tokens.colors.textSecondary } }
               }
             )
           ] })
@@ -931,7 +898,7 @@ var FormDialogSurface = ({
 };
 
 // src/overlays/ModalSurface.tsx
-var import_react19 = require("@fluentui/react");
+var import_react20 = require("@fluentui/react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var ModalSurface = ({
   isOpen,
@@ -946,24 +913,24 @@ var ModalSurface = ({
   children
 }) => {
   const main = autoSize ? { width: "auto", minWidth: MODAL_AUTOSIZE_MIN_WIDTH, maxWidth: "100%" } : { maxWidth: "95vw", width: `${dialogWidthPx({ width, size })}px` };
-  const styles = (0, import_react19.mergeStyleSets)({
+  const styles = (0, import_react20.mergeStyleSets)({
     title: {
-      fontSize: typography.fontSize.lg,
-      fontWeight: typography.fontWeight.semibold,
-      fontFamily: typography.fontFamilySemibold,
-      color: colors.textPrimary,
+      fontSize: import_design_tokens.typography.fontSize.lg,
+      fontWeight: import_design_tokens.typography.fontWeight.semibold,
+      fontFamily: import_design_tokens.typography.fontFamilySemibold,
+      color: import_design_tokens.colors.textPrimary,
       padding: "16px 20px 0"
     },
     content: { padding: 20 },
     footer: {
-      borderTop: `1px solid ${colors.borderNeutral}`,
+      borderTop: `1px solid ${import_design_tokens.colors.borderNeutral}`,
       padding: "12px 20px",
       display: "flex",
       justifyContent: "flex-end",
       gap: 8
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react19.Modal, { isOpen, onDismiss, isBlocking, className, styles: { main }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react20.Modal, { isOpen, onDismiss, isBlocking, className, styles: { main }, children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.title, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.content, children }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.footer, children: footer })
@@ -971,7 +938,7 @@ var ModalSurface = ({
 };
 
 // src/overlays/PanelSurface.tsx
-var import_react20 = require("@fluentui/react");
+var import_react21 = require("@fluentui/react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var PanelSurface = ({
   isOpen,
@@ -987,10 +954,10 @@ var PanelSurface = ({
   children
 }) => {
   const kind = panelType ?? panelKindFromWidth(width);
-  const resolvedType = import_react20.PanelType[kind];
+  const resolvedType = import_react21.PanelType[kind];
   const customWidth = kind === "custom" || kind === "customNear" ? `${panelCustomWidthPx(width)}px` : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react20.Panel,
+    import_react21.Panel,
     {
       isOpen,
       onDismiss,
@@ -1008,7 +975,7 @@ var PanelSurface = ({
 };
 
 // src/overlays/CalloutSurface.tsx
-var import_react21 = require("@fluentui/react");
+var import_react22 = require("@fluentui/react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var CalloutSurface = ({
   target,
@@ -1024,11 +991,11 @@ var CalloutSurface = ({
 }) => {
   if (!isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react21.Callout,
+    import_react22.Callout,
     {
       target: target ?? void 0,
       onDismiss,
-      directionalHint: import_react21.DirectionalHint[directionalHint],
+      directionalHint: import_react22.DirectionalHint[directionalHint],
       isBeakVisible,
       beakWidth,
       gapSpace,
@@ -1040,22 +1007,22 @@ var CalloutSurface = ({
 };
 
 // src/overlays/TooltipSurface.tsx
-var import_react22 = require("@fluentui/react");
+var import_react23 = require("@fluentui/react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var DELAY_MAP = {
-  zero: import_react22.TooltipDelay.zero,
-  medium: import_react22.TooltipDelay.medium,
-  long: import_react22.TooltipDelay.long
+  zero: import_react23.TooltipDelay.zero,
+  medium: import_react23.TooltipDelay.medium,
+  long: import_react23.TooltipDelay.long
 };
 var TooltipSurface = ({
   content,
   directionalHint = "bottomCenter",
   delay = "medium",
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react22.TooltipHost, { content, directionalHint: import_react22.DirectionalHint[directionalHint], delay: DELAY_MAP[delay], children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react23.TooltipHost, { content, directionalHint: import_react23.DirectionalHint[directionalHint], delay: DELAY_MAP[delay], children });
 
 // src/composites/MasterDetailSurface.tsx
-var import_react23 = require("@fluentui/react");
+var import_react24 = require("@fluentui/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var MasterDetailSurface = ({
   master,
@@ -1068,7 +1035,7 @@ var MasterDetailSurface = ({
   const masterFr = Math.min(90, Math.max(10, Math.round(splitRatio * 100)));
   const detailFr = 100 - masterFr;
   const collapsePx = BREAKPOINTS[collapseBelow];
-  const rootCls = (0, import_react23.mergeStyles)(
+  const rootCls = (0, import_react24.mergeStyles)(
     {
       display: "grid",
       gridTemplateColumns: `${masterFr}fr ${detailFr}fr`,
@@ -1077,18 +1044,18 @@ var MasterDetailSurface = ({
     },
     className
   );
-  const masterCls = (0, import_react23.mergeStyles)({
+  const masterCls = (0, import_react24.mergeStyles)({
     minWidth: 0,
     overflow: "auto",
-    borderRight: `1px solid ${colors.borderNeutral}`,
+    borderRight: `1px solid ${import_design_tokens.colors.borderNeutral}`,
     selectors: {
       [`@media (max-width: ${collapsePx}px)`]: {
         borderRight: "none",
-        borderBottom: `1px solid ${colors.borderNeutral}`
+        borderBottom: `1px solid ${import_design_tokens.colors.borderNeutral}`
       }
     }
   });
-  const detailCls = (0, import_react23.mergeStyles)({ minWidth: 0, overflow: "auto" });
+  const detailCls = (0, import_react24.mergeStyles)({ minWidth: 0, overflow: "auto" });
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: rootCls, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: masterCls, children: master }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: detailCls, children: detail ?? detailFallback })
@@ -1096,10 +1063,10 @@ var MasterDetailSurface = ({
 };
 
 // src/composites/DashboardSurface.tsx
-var import_react24 = require("@fluentui/react");
+var import_react25 = require("@fluentui/react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DashboardSurface = ({ tiles, columns = 2, gap = 16, className }) => {
-  const cls = (0, import_react24.mergeStyles)(
+  const cls = (0, import_react25.mergeStyles)(
     {
       display: "grid",
       gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
@@ -1153,6 +1120,7 @@ function fromFormDefinition(def) {
   CommandSurface,
   DIALOG_SIZE_PX,
   DashboardSurface,
+  DensityContext,
   FieldRow,
   Footer,
   FormDialogSurface,
@@ -1196,6 +1164,7 @@ function fromFormDefinition(def) {
   useContainerBreakpoint,
   useContainerSize,
   useContainerWidth,
+  useDensity,
   useMediaQuery,
   useResponsiveValue
 });