@dataverse-kit/surface-kit 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1202 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ActionBar: () => ActionBar,
+  BREAKPOINTS: () => BREAKPOINTS,
+  CALLOUT_DEFAULT_WIDTH: () => CALLOUT_DEFAULT_WIDTH,
+  CARD_REFLOW_WIDTH: () => CARD_REFLOW_WIDTH,
+  CalloutSurface: () => CalloutSurface,
+  ColumnLayout: () => ColumnLayout,
+  CommandSurface: () => CommandSurface,
+  DIALOG_SIZE_PX: () => DIALOG_SIZE_PX,
+  DashboardSurface: () => DashboardSurface,
+  FieldRow: () => FieldRow,
+  Footer: () => Footer,
+  FormDialogSurface: () => FormDialogSurface,
+  FormHeader: () => FormHeader,
+  FormSurface: () => FormSurface,
+  MODAL_AUTOSIZE_MIN_WIDTH: () => MODAL_AUTOSIZE_MIN_WIDTH,
+  MasterDetailSurface: () => MasterDetailSurface,
+  ModalSurface: () => ModalSurface,
+  PANEL_DEFAULT_WIDTH: () => PANEL_DEFAULT_WIDTH,
+  PageSurface: () => PageSurface,
+  PanelSurface: () => PanelSurface,
+  PivotSurface: () => PivotSurface,
+  Section: () => Section,
+  SectionCard: () => SectionCard,
+  SectionHeader: () => SectionHeader,
+  TooltipSurface: () => TooltipSurface,
+  TwoColumnLayout: () => TwoColumnLayout,
+  calloutFormDefaults: () => calloutFormDefaults,
+  calloutWidthPx: () => calloutWidthPx,
+  clampSpan: () => clampSpan,
+  colors: () => colors,
+  createDynamicsTheme: () => createDynamicsTheme,
+  densityScale: () => densityScale,
+  dialogHeightCss: () => dialogHeightCss,
+  dialogWidthCss: () => dialogWidthCss,
+  dialogWidthPx: () => dialogWidthPx,
+  fieldGridStyle: () => fieldGridStyle,
+  fieldRowStyle: () => fieldRowStyle,
+  fromFormDefinition: () => fromFormDefinition,
+  gridTemplateForColumns: () => gridTemplateForColumns,
+  layout: () => layout,
+  panelCustomWidthPx: () => panelCustomWidthPx,
+  panelKindFromWidth: () => panelKindFromWidth,
+  radius: () => radius,
+  resolveBreakpoint: () => resolveBreakpoint,
+  resolveResponsiveValue: () => resolveResponsiveValue,
+  scaleSpacing: () => scaleSpacing,
+  sectionStackingStyle: () => sectionStackingStyle,
+  spacing: () => spacing,
+  typography: () => typography,
+  useContainerBreakpoint: () => useContainerBreakpoint,
+  useContainerSize: () => useContainerSize,
+  useContainerWidth: () => useContainerWidth,
+  useMediaQuery: () => useMediaQuery,
+  useResponsiveValue: () => useResponsiveValue
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/sizePresets.ts
+var DIALOG_SIZE_PX = {
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1600
+};
+function dialogWidthPx(opts = {}) {
+  if (typeof opts.width === "number") return opts.width;
+  const size = opts.size ?? "lg";
+  if (size === "fullscreen") return DIALOG_SIZE_PX.xl;
+  return DIALOG_SIZE_PX[size];
+}
+function dialogWidthCss(opts = {}) {
+  if (opts.size === "fullscreen" && opts.width == null) return "95vw";
+  return `${dialogWidthPx(opts)}px`;
+}
+function dialogHeightCss(height) {
+  return height != null && height <= 100 ? `${height}vh` : "95vh";
+}
+var MODAL_AUTOSIZE_MIN_WIDTH = 1e3;
+var PANEL_DEFAULT_WIDTH = 480;
+function panelKindFromWidth(width) {
+  return (width ?? PANEL_DEFAULT_WIDTH) > 500 ? "medium" : "custom";
+}
+function panelCustomWidthPx(width) {
+  return width ?? PANEL_DEFAULT_WIDTH;
+}
+var CALLOUT_DEFAULT_WIDTH = 320;
+var calloutFormDefaults = {
+  width: CALLOUT_DEFAULT_WIDTH,
+  directionalHint: "bottomLeftEdge"
+};
+function calloutWidthPx(width) {
+  return width ?? CALLOUT_DEFAULT_WIDTH;
+}
+
+// src/core/columns.ts
+function gridTemplateForColumns(columns) {
+  return `repeat(${columns}, 1fr)`;
+}
+function clampSpan(span, columns) {
+  if (!Number.isFinite(span)) return 1;
+  return Math.max(1, Math.min(Math.round(span), columns));
+}
+
+// src/responsive/breakpoints.ts
+var BREAKPOINTS = {
+  xs: 0,
+  sm: 480,
+  md: 768,
+  lg: 1024,
+  xl: 1366
+};
+var CARD_REFLOW_WIDTH = 900;
+var DESCENDING = ["xl", "lg", "md", "sm", "xs"];
+var ASCENDING = ["xs", "sm", "md", "lg", "xl"];
+function resolveBreakpoint(width) {
+  for (const bp of DESCENDING) {
+    if (width >= BREAKPOINTS[bp]) return bp;
+  }
+  return "xs";
+}
+function isResponsiveMap(v) {
+  return typeof v === "object" && v !== null && ASCENDING.some((bp) => bp in v);
+}
+function resolveResponsiveValue(value, breakpoint) {
+  if (!isResponsiveMap(value)) return value;
+  const map = value;
+  const idx = ASCENDING.indexOf(breakpoint);
+  for (let i = idx; i >= 0; i--) {
+    const v = map[ASCENDING[i]];
+    if (v !== void 0) return v;
+  }
+  for (let i = idx + 1; i < ASCENDING.length; i++) {
+    const v = map[ASCENDING[i]];
+    if (v !== void 0) return v;
+  }
+  return void 0;
+}
+
+// src/responsive/builders.ts
+function atRule(mode, maxPx) {
+  return mode === "container" ? `@container (max-width: ${maxPx}px)` : `@media (max-width: ${maxPx}px)`;
+}
+function fieldGridStyle(columns, mode = "media") {
+  const capped = Math.min(columns, 2);
+  return {
+    display: "grid",
+    gridTemplateColumns: gridTemplateForColumns(columns),
+    gap: "4px 24px",
+    selectors: {
+      [atRule(mode, BREAKPOINTS.md)]: { gridTemplateColumns: gridTemplateForColumns(capped) },
+      [atRule(mode, BREAKPOINTS.sm)]: { gridTemplateColumns: "1fr" }
+    }
+  };
+}
+function sectionStackingStyle(gridTemplateColumns, mode = "media") {
+  return {
+    display: "grid",
+    gridTemplateColumns,
+    gap: 16,
+    alignItems: "start",
+    selectors: {
+      [atRule(mode, BREAKPOINTS.md)]: { gridTemplateColumns: "1fr" }
+    }
+  };
+}
+function fieldRowStyle(labelWidth = "130px", mode = "media") {
+  return {
+    display: "grid",
+    gridTemplateColumns: `${labelWidth} 1fr`,
+    alignItems: "center",
+    gap: 8,
+    minHeight: 38,
+    selectors: {
+      [atRule(mode, BREAKPOINTS.sm)]: { gridTemplateColumns: "1fr", alignItems: "flex-start", minHeight: 0, gap: 4 }
+    }
+  };
+}
+
+// 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"
+};
+
+// 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
+    },
+    defaultFontStyle: {
+      fontFamily: typography.fontFamily
+    },
+    semanticColors: {
+      errorText: colors.danger,
+      inputBorder: colors.fieldBorder,
+      inputBackground: colors.fieldFill,
+      bodyBackground: colors.surface
+    }
+  });
+}
+
+// src/tokens/density.ts
+var densityScale = {
+  comfortable: 1,
+  compact: 0.75
+};
+function scaleSpacing(value, density = "comfortable") {
+  return Math.round(value * densityScale[density]);
+}
+
+// src/hooks/useContainerSize.ts
+var import_react2 = require("react");
+function useContainerSize(ref) {
+  const [size, setSize] = (0, import_react2.useState)({ width: 0, height: 0, inlineSize: 0, blockSize: 0 });
+  (0, import_react2.useEffect)(() => {
+    if (!ref.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const inlineSize = entry.borderBoxSize?.[0]?.inlineSize ?? width;
+        const blockSize = entry.borderBoxSize?.[0]?.blockSize ?? height;
+        setSize({ width, height, inlineSize, blockSize });
+      }
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
+
+// src/hooks/useContainerWidth.ts
+var import_react3 = require("react");
+function useContainerWidth() {
+  const ref = (0, import_react3.useRef)(null);
+  const { width } = useContainerSize(ref);
+  return [ref, width];
+}
+
+// src/hooks/useContainerBreakpoint.ts
+function useContainerBreakpoint() {
+  const [ref, width] = useContainerWidth();
+  return [ref, resolveBreakpoint(width), width];
+}
+
+// src/hooks/useResponsiveValue.ts
+function useResponsiveValue(value) {
+  const [ref, breakpoint] = useContainerBreakpoint();
+  return [ref, resolveResponsiveValue(value, breakpoint)];
+}
+
+// src/hooks/useMediaQuery.ts
+var import_react4 = require("react");
+function useMediaQuery(query) {
+  const [matches, setMatches] = (0, import_react4.useState)(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+    return window.matchMedia(query).matches;
+  });
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+
+// src/layouts/ColumnLayout.tsx
+var import_react5 = require("@fluentui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ColumnLayout = ({
+  columns,
+  gap = "4px 24px",
+  responsive = true,
+  mode = "media",
+  className,
+  style,
+  children
+}) => {
+  const base = responsive ? fieldGridStyle(columns, mode) : { display: "grid", gridTemplateColumns: gridTemplateForColumns(columns) };
+  const cls = (0, import_react5.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_jsx_runtime2 = require("react/jsx-runtime");
+var TwoColumnLayout = ({
+  gap = 16,
+  collapseBelow = "sm",
+  className,
+  style,
+  children
+}) => {
+  const cls = (0, import_react6.mergeStyles)(
+    {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap,
+      alignItems: "start",
+      selectors: {
+        [`@media (max-width: ${BREAKPOINTS[collapseBelow]}px)`]: { gridTemplateColumns: "1fr" }
+      }
+    },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cls, style, children });
+};
+
+// src/layouts/FieldRow.tsx
+var import_react7 = require("@fluentui/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FieldRow = ({
+  label,
+  required,
+  fullWidth,
+  labelWidth = "130px",
+  labelPosition = "beside",
+  className,
+  children
+}) => {
+  const styles = (0, import_react7.mergeStyleSets)({
+    // The beside layout IS the shared responsive builder (130px label grid + @480
+    // stack) — no hand-written breakpoint here.
+    rowBeside: fieldRowStyle(labelWidth, "media"),
+    rowAbove: {
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      gap: 2,
+      minHeight: 38
+    },
+    label: {
+      fontSize: typography.fontSize.sm,
+      fontWeight: typography.fontWeight.semibold,
+      color: colors.textPrimary,
+      fontFamily: typography.fontFamily,
+      lineHeight: "1.3",
+      wordBreak: "break-word"
+    },
+    required: { color: colors.danger, marginLeft: 2, fontWeight: typography.fontWeight.semibold },
+    full: { gridColumn: "1 / -1" }
+  });
+  const cls = [
+    labelPosition === "above" ? styles.rowAbove : styles.rowBeside,
+    fullWidth ? styles.full : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cls, children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles.label, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.required, children: "*" })
+    ] }),
+    children
+  ] });
+};
+
+// src/containers/FormSurface.tsx
+var import_react8 = require("@fluentui/react");
+
+// src/internal/styles.ts
+var sharedTitleStyle = {
+  fontWeight: typography.fontWeight.semibold,
+  fontSize: typography.fontSize.md,
+  color: colors.textPrimary,
+  fontFamily: typography.fontFamilySemibold,
+  paddingBottom: 0,
+  marginBottom: 0
+};
+var dynamicsCardStyle = {
+  background: colors.surface,
+  border: `1px solid ${colors.borderNeutral}`,
+  borderRadius: 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)";
+function stackChildrenBelow(maxPx) {
+  return {
+    selectors: {
+      [`@media (max-width: ${maxPx}px)`]: {
+        selectors: { "> *": { gridColumn: "1 / -1" } }
+      }
+    }
+  };
+}
+
+// src/containers/FormSurface.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FormSurface = ({
+  columns = 12,
+  gap = 20,
+  padding = 20,
+  background = colors.canvas,
+  containerWidth,
+  collapseBelow = "sm",
+  maxWidth,
+  className,
+  style,
+  children
+}) => {
+  const collapsePx = BREAKPOINTS[collapseBelow];
+  const forceStack = containerWidth != null && containerWidth <= collapsePx;
+  const cls = (0, import_react8.mergeStyles)(
+    {
+      display: "grid",
+      gridTemplateColumns: forceStack ? "1fr" : `repeat(${columns}, 1fr)`,
+      gap,
+      padding,
+      background,
+      alignItems: "start",
+      ...maxWidth != null ? { maxWidth, marginLeft: "auto", marginRight: "auto" } : {},
+      // When the container forces a single column, reset child spans the same way the
+      // viewport fallback does — otherwise a Section with `columnStart` references grid
+      // lines that no longer exist and escapes the stack. (Mutually exclusive with the
+      // @media fallback below, which only applies when containerWidth is unset.)
+      ...forceStack ? { selectors: { "> *": { gridColumn: "1 / -1" } } } : {},
+      // Viewport fallback only when the container width isn't explicitly provided.
+      ...containerWidth == null ? stackChildrenBelow(collapsePx) : {}
+    },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cls, style, children });
+};
+
+// src/containers/PageSurface.tsx
+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");
+
+// src/containers/SectionHeader.tsx
+var import_react9 = require("@fluentui/react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SectionHeader = ({
+  title,
+  statusText,
+  showCommandBar,
+  commandBarItems = [],
+  actions,
+  collapsible,
+  collapsed,
+  onToggle
+}) => {
+  const styles = (0, import_react9.mergeStyleSets)({
+    root: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      borderBottom: `1px solid ${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 },
+    chevron: {
+      cursor: "pointer",
+      border: "none",
+      background: "transparent",
+      padding: 4,
+      display: "flex",
+      alignItems: "center",
+      color: colors.textSecondary
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles.left, children: [
+      collapsible && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: styles.chevron,
+          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" })
+        }
+      ),
+      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,
+      {
+        items: commandBarItems.slice(0, 2),
+        overflowItems: commandBarItems.slice(2),
+        styles: { root: { background: "transparent", padding: 0, height: "auto" } }
+      }
+    ) : null
+  ] });
+};
+
+// src/containers/Section.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Section = ({
+  title,
+  columnSpan = 12,
+  columnStart,
+  rowPosition,
+  internalColumns = 12,
+  showCommandBar,
+  commandBarItems,
+  statusText,
+  notification,
+  collapsible,
+  defaultCollapsed = false,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  variant = "card",
+  minHeight = 80,
+  className,
+  style,
+  children
+}) => {
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react10.useState)(defaultCollapsed);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const toggle = () => {
+    const next = !collapsed;
+    if (controlledCollapsed == null) setInternalCollapsed(next);
+    onCollapsedChange?.(next);
+  };
+  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%" },
+    flat: {
+      background: colors.surface,
+      borderRadius: radius.card,
+      padding: "3px 20px 20px 20px",
+      minWidth: 300,
+      width: "100%",
+      overflow: "hidden"
+    },
+    placeholder: {
+      border: `1px dashed ${colors.borderNeutral}`,
+      borderRadius: radius.card,
+      minHeight,
+      width: "100%",
+      background: "transparent"
+    },
+    notification: { marginBottom: 8 },
+    body: {
+      display: "grid",
+      gridTemplateColumns: `repeat(${internalColumns}, 1fr)`,
+      gap: 7,
+      alignItems: "start",
+      selectors: {
+        [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { selectors: { "> *": { gridColumn: "1 / -1" } } }
+      }
+    }
+  });
+  if (variant === "placeholder") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: [styles.placeholder, className].filter(Boolean).join(" "), style: rootStyle });
+  }
+  const showHeader = Boolean(title) || showCommandBar || collapsible;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: [variant === "flat" ? styles.flat : styles.card, className].filter(Boolean).join(" "), style: rootStyle, children: [
+    notification && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles.notification, children: notification }),
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      SectionHeader,
+      {
+        title,
+        statusText,
+        showCommandBar,
+        commandBarItems,
+        collapsible,
+        collapsed,
+        onToggle: toggle
+      }
+    ),
+    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles.body, children })
+  ] });
+};
+
+// src/containers/SectionCard.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SectionCard = ({
+  accentColor = colors.brand,
+  accentWidth = 3,
+  variant = "card",
+  style,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  Section,
+  {
+    variant,
+    ...rest,
+    style: { borderTop: `${accentWidth}px solid ${accentColor}`, ...style }
+  }
+);
+
+// src/containers/FormHeader.tsx
+var import_react12 = require("@fluentui/react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FormHeader = ({
+  title,
+  subtitle,
+  status,
+  titleColor,
+  subtitleColor,
+  persona,
+  actions,
+  className
+}) => {
+  const styles = (0, import_react12.mergeStyleSets)({
+    root: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 12,
+      padding: "12px 24px",
+      borderBottom: `1px solid ${colors.borderNeutral}`,
+      background: 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,
+      lineHeight: "1.3"
+    },
+    status: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary },
+    subtitle: { fontSize: typography.fontSize.smPlus, color: subtitleColor || 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: [
+      persona,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: styles.titleRow, children: [
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.title, children: title }),
+          status != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: styles.status, children: status })
+        ] }),
+        subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.subtitle, children: subtitle })
+      ] })
+    ] }),
+    actions != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: actions })
+  ] });
+};
+
+// src/containers/PivotSurface.tsx
+var import_react13 = require("react");
+var import_react14 = require("@fluentui/react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PivotSurface = ({
+  tabs,
+  selectedId,
+  defaultSelectedId,
+  onTabChange,
+  linkFormat = "links",
+  className
+}) => {
+  const firstEnabledId = tabs.find((t) => !t.disabled)?.id ?? tabs[0]?.id;
+  const [internal, setInternal] = (0, import_react13.useState)(defaultSelectedId ?? firstEnabledId);
+  const selected = selectedId ?? internal;
+  const handleLinkClick = (item) => {
+    const id = item?.props.itemKey;
+    if (!id) return;
+    if (selectedId == null) setInternal(id);
+    onTabChange?.(id);
+  };
+  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,
+      {
+        selectedKey: selected,
+        onLinkClick: handleLinkClick,
+        linkFormat,
+        headersOnly: true,
+        children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react14.PivotItem,
+          {
+            itemKey: t.id,
+            headerText: t.label,
+            itemIcon: t.iconName,
+            headerButtonProps: t.disabled ? { disabled: true } : void 0
+          },
+          t.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: active?.content })
+  ] });
+};
+
+// src/containers/CommandSurface.tsx
+var import_react15 = 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 } } }) });
+
+// src/containers/ActionBar.tsx
+var import_react16 = require("@fluentui/react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function renderButton(b) {
+  const common = {
+    text: b.label,
+    disabled: b.disabled,
+    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);
+}
+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)(
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: left.length ? "space-between" : justify,
+      gap: 8,
+      padding: "12px 24px",
+      borderTop: `1px solid ${colors.borderNeutral}`,
+      background: colors.surface,
+      ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
+    },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cls, children: [
+    left.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", gap: 8 }, children: left.map(renderButton) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", gap: 8, justifyContent: justify }, children: right.map(renderButton) })
+  ] });
+};
+
+// src/containers/Footer.tsx
+var import_react17 = 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)(
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap: 8,
+      padding: "12px 24px",
+      borderTop: `1px solid ${colors.borderNeutral}`,
+      background: colors.surface,
+      ...sticky ? { position: "sticky", bottom: 0, zIndex: 1 } : {}
+    },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls, children });
+};
+
+// src/overlays/FormDialogSurface.tsx
+var import_react18 = require("@fluentui/react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FormDialogSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  subheader,
+  size,
+  width,
+  height,
+  isBlocking = true,
+  recordCounter,
+  footer,
+  className,
+  children
+}) => {
+  const widthCss = dialogWidthCss({ width, size });
+  const heightCss = dialogHeightCss(height);
+  const styles = (0, import_react18.mergeStyleSets)({
+    header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 12,
+      padding: "12px 20px",
+      borderBottom: `1px solid ${colors.borderNeutral}`
+    },
+    headerLeft: { display: "flex", flexDirection: "column", minWidth: 0 },
+    title: {
+      fontSize: typography.fontSize.lg,
+      fontWeight: typography.fontWeight.semibold,
+      fontFamily: typography.fontFamilySemibold,
+      color: colors.textPrimary
+    },
+    subheader: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary, marginTop: 2 },
+    headerRight: { display: "flex", alignItems: "center", gap: 8 },
+    counter: { fontSize: typography.fontSize.smPlus, color: colors.textSecondary },
+    content: { flex: 1, minHeight: 0, overflow: "auto", padding: 20 },
+    footer: { borderTop: `1px solid ${colors.borderNeutral}`, padding: "12px 20px" }
+  });
+  const showHeader = Boolean(title) || Boolean(recordCounter) || Boolean(onDismiss);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    import_react18.Modal,
+    {
+      isOpen,
+      onDismiss,
+      isBlocking,
+      className,
+      styles: {
+        main: {
+          maxWidth: "95vw",
+          width: widthCss,
+          height: heightCss,
+          maxHeight: "95vh",
+          display: "flex",
+          flexDirection: "column"
+        },
+        scrollableContent: {
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          minHeight: 0
+        }
+      },
+      children: [
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: styles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: styles.headerLeft, children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: styles.title, children: title }),
+            subheader && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: styles.subheader, children: subheader })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: styles.headerRight, children: [
+            recordCounter && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: styles.counter, children: [
+              recordCounter.current,
+              " of ",
+              recordCounter.total
+            ] }),
+            onDismiss && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_react18.IconButton,
+              {
+                iconProps: { iconName: "Cancel" },
+                ariaLabel: "Close",
+                onClick: onDismiss,
+                styles: { root: { color: colors.textSecondary } }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.content, children }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.footer, children: footer })
+      ]
+    }
+  );
+};
+
+// src/overlays/ModalSurface.tsx
+var import_react19 = require("@fluentui/react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ModalSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  size,
+  width,
+  isBlocking = true,
+  autoSize,
+  footer,
+  className,
+  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)({
+    title: {
+      fontSize: typography.fontSize.lg,
+      fontWeight: typography.fontWeight.semibold,
+      fontFamily: typography.fontFamilySemibold,
+      color: colors.textPrimary,
+      padding: "16px 20px 0"
+    },
+    content: { padding: 20 },
+    footer: {
+      borderTop: `1px solid ${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: [
+    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 })
+  ] });
+};
+
+// src/overlays/PanelSurface.tsx
+var import_react20 = require("@fluentui/react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PanelSurface = ({
+  isOpen,
+  onDismiss,
+  title,
+  panelType,
+  width,
+  hasCloseButton = true,
+  isLightDismiss = false,
+  isFooterAtBottom = true,
+  isNonModal = false,
+  footer,
+  children
+}) => {
+  const kind = panelType ?? panelKindFromWidth(width);
+  const resolvedType = import_react20.PanelType[kind];
+  const customWidth = kind === "custom" || kind === "customNear" ? `${panelCustomWidthPx(width)}px` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react20.Panel,
+    {
+      isOpen,
+      onDismiss,
+      headerText: title,
+      type: resolvedType,
+      customWidth,
+      hasCloseButton,
+      isLightDismiss,
+      isFooterAtBottom,
+      isBlocking: !isNonModal,
+      onRenderFooterContent: footer ? () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: footer }) : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { padding: "12px 0" }, children })
+    }
+  );
+};
+
+// src/overlays/CalloutSurface.tsx
+var import_react21 = require("@fluentui/react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var CalloutSurface = ({
+  target,
+  isOpen = true,
+  onDismiss,
+  width,
+  directionalHint = "bottomLeftEdge",
+  isBeakVisible = true,
+  beakWidth = 16,
+  gapSpace = 0,
+  className,
+  children
+}) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react21.Callout,
+    {
+      target: target ?? void 0,
+      onDismiss,
+      directionalHint: import_react21.DirectionalHint[directionalHint],
+      isBeakVisible,
+      beakWidth,
+      gapSpace,
+      className,
+      styles: { root: { width: calloutWidthPx(width), padding: 16 } },
+      children
+    }
+  );
+};
+
+// src/overlays/TooltipSurface.tsx
+var import_react22 = 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
+};
+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 });
+
+// src/composites/MasterDetailSurface.tsx
+var import_react23 = require("@fluentui/react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var MasterDetailSurface = ({
+  master,
+  detail,
+  detailFallback,
+  splitRatio = 0.38,
+  collapseBelow = "md",
+  className
+}) => {
+  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)(
+    {
+      display: "grid",
+      gridTemplateColumns: `${masterFr}fr ${detailFr}fr`,
+      minHeight: 0,
+      selectors: { [`@media (max-width: ${collapsePx}px)`]: { gridTemplateColumns: "1fr" } }
+    },
+    className
+  );
+  const masterCls = (0, import_react23.mergeStyles)({
+    minWidth: 0,
+    overflow: "auto",
+    borderRight: `1px solid ${colors.borderNeutral}`,
+    selectors: {
+      [`@media (max-width: ${collapsePx}px)`]: {
+        borderRight: "none",
+        borderBottom: `1px solid ${colors.borderNeutral}`
+      }
+    }
+  });
+  const detailCls = (0, import_react23.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 })
+  ] });
+};
+
+// src/composites/DashboardSurface.tsx
+var import_react24 = 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)(
+    {
+      display: "grid",
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+      gap,
+      alignItems: "start",
+      selectors: {
+        [`@media (max-width: ${CARD_REFLOW_WIDTH}px)`]: { gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
+        [`@media (max-width: ${BREAKPOINTS.sm}px)`]: { gridTemplateColumns: "1fr" }
+      }
+    },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cls, children: tiles.map((tile, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: tile }, `tile-${i}`)) });
+};
+
+// src/adapters/fromFormDefinition.ts
+function fromFormDefinition(def) {
+  const s = def.settings ?? {};
+  switch (def.type) {
+    case "dialog":
+      return {
+        kind: "dialog",
+        widthPx: dialogWidthPx({ width: s.width }),
+        heightCss: dialogHeightCss(s.height),
+        title: def.name
+      };
+    case "panel": {
+      const panelType = s.panelType ?? panelKindFromWidth(s.width);
+      return {
+        kind: "panel",
+        panelType,
+        customWidthPx: panelType === "custom" ? panelCustomWidthPx(s.width) : void 0,
+        title: def.name
+      };
+    }
+    case "callout":
+      return { kind: "callout", widthPx: calloutWidthPx(s.width), title: def.name };
+    case "main":
+    default:
+      return { kind: "main" };
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionBar,
+  BREAKPOINTS,
+  CALLOUT_DEFAULT_WIDTH,
+  CARD_REFLOW_WIDTH,
+  CalloutSurface,
+  ColumnLayout,
+  CommandSurface,
+  DIALOG_SIZE_PX,
+  DashboardSurface,
+  FieldRow,
+  Footer,
+  FormDialogSurface,
+  FormHeader,
+  FormSurface,
+  MODAL_AUTOSIZE_MIN_WIDTH,
+  MasterDetailSurface,
+  ModalSurface,
+  PANEL_DEFAULT_WIDTH,
+  PageSurface,
+  PanelSurface,
+  PivotSurface,
+  Section,
+  SectionCard,
+  SectionHeader,
+  TooltipSurface,
+  TwoColumnLayout,
+  calloutFormDefaults,
+  calloutWidthPx,
+  clampSpan,
+  colors,
+  createDynamicsTheme,
+  densityScale,
+  dialogHeightCss,
+  dialogWidthCss,
+  dialogWidthPx,
+  fieldGridStyle,
+  fieldRowStyle,
+  fromFormDefinition,
+  gridTemplateForColumns,
+  layout,
+  panelCustomWidthPx,
+  panelKindFromWidth,
+  radius,
+  resolveBreakpoint,
+  resolveResponsiveValue,
+  scaleSpacing,
+  sectionStackingStyle,
+  spacing,
+  typography,
+  useContainerBreakpoint,
+  useContainerSize,
+  useContainerWidth,
+  useMediaQuery,
+  useResponsiveValue
+});
+//# sourceMappingURL=index.cjs.map