@viax.io/uxm 4.36.0

package/dist/studio/shell/preview-modal.js

@@ -0,0 +1,762 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { Banner } from "../../ui/index.js";
+import { ButtonPrimary } from "../../ui/index.js";
+import { Checkbox } from "../../ui/index.js";
+import { Chip } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { IconButton } from "../../ui/index.js";
+import { InputWithIcon } from "../../ui/index.js";
+import { Select, TextInput } from "../../ui/index.js";
+import { Tag } from "../../ui/index.js";
+import { ToggleSwitch } from "../../ui/index.js";
+import { useUxm } from "../lib/context.js";
+import { getComponentDef, registry } from "../lib/registry/index.js";
+import { useGlobalTheme } from "../lib/use-global-theme.js";
+const scaled = (px, role) => {
+  const base = typeof px === "number" ? `${px}px` : px;
+  return `calc(${base}${role ? ` * var(--type-${role}-scale, 1)` : ""} * var(--type-scale, 1))`;
+};
+const derived = (px, offset) => scaled(`(${px}px - ${offset}px)`);
+const roleFont = (role) => `var(--type-${role}-font, var(--brand-heading-font, inherit))`;
+const roleWeight = (role, fallback) => `var(--type-${role}-weight, var(--brand-heading-weight, ${fallback}))`;
+function useResolved(componentId) {
+  const { getOverrides } = useUxm();
+  const def = getComponentDef(componentId);
+  const overrides = getOverrides(componentId);
+  return useMemo(() => {
+    if (!def) return {};
+    const styles = {};
+    for (const prop of def.styleProperties) {
+      styles[prop.key] = overrides[prop.key] ?? prop.defaultValue;
+    }
+    return styles;
+  }, [def, overrides]);
+}
+function MiniButton({
+  label,
+  variant = "primary",
+  onClick,
+  icon
+}) {
+  const [hover, setHover] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const sP = useResolved("button-primary");
+  const sS = useResolved("button-secondary");
+  const sT = useResolved("button-tertiary");
+  const sG = useResolved("button-ghost");
+  const s = variant === "secondary" ? sS : variant === "tertiary" ? sT : variant === "ghost" ? sG : sP;
+  const fallback = (stateValue, base) => stateValue !== void 0 ? stateValue : base;
+  const currentBg = pressed ? fallback(s.activeBackgroundColor, s.backgroundColor) : hover ? fallback(s.hoverBackgroundColor, s.backgroundColor) : s.backgroundColor;
+  const currentColor = pressed ? fallback(s.activeColor, s.color) : hover ? fallback(s.hoverColor, s.color) : s.color;
+  const currentBorderColor = pressed ? fallback(s.activeBorderColor, s.borderColor) : hover ? fallback(s.hoverBorderColor, s.borderColor) : s.borderColor;
+  const border = variant === "secondary" ? `1.5px solid ${currentBorderColor}` : variant === "tertiary" ? `1px solid ${currentBorderColor}` : "none";
+  const baseStyle = {
+    backgroundColor: currentBg,
+    color: currentColor,
+    border,
+    borderRadius: s.borderRadius,
+    padding: `${s.paddingY}px ${s.paddingX}px`,
+    fontSize: scaled(`${s.fontSize}px`),
+    fontWeight: s.fontWeight,
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    transition: "background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.08s",
+    transform: pressed ? "scale(0.97)" : "none"
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => {
+        setHover(false);
+        setPressed(false);
+      },
+      onMouseDown: () => setPressed(true),
+      onMouseUp: () => setPressed(false),
+      style: baseStyle,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+}
+function MiniStatCard({ label, value, trend, up }) {
+  const s = useResolved("stat-card");
+  const [hover, setHover] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: {
+        backgroundColor: s.backgroundColor,
+        border: `1px solid ${hover ? "var(--color-accent-light)" : s.borderColor}`,
+        borderRadius: s.borderRadius,
+        padding: s.padding,
+        flex: 1,
+        transition: "border-color 0.15s, transform 0.15s",
+        transform: hover ? "translateY(-1px)" : "none",
+        cursor: "default"
+      },
+      children: [
+        /* @__PURE__ */ jsx("p", { style: { fontSize: scaled(`${s.labelSize}px`), color: "var(--color-text-muted)", fontWeight: 500, margin: 0 }, children: label }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 6, marginTop: 6 }, children: [
+          /* @__PURE__ */ jsx("span", { style: {
+            fontFamily: roleFont("display"),
+            fontSize: scaled(`${s.valueSize * 0.8}px`, "display"),
+            fontWeight: roleWeight("display", 700),
+            color: "var(--color-text)"
+          }, children: value }),
+          /* @__PURE__ */ jsxs("span", { style: {
+            fontSize: scaled(11),
+            fontWeight: 600,
+            color: up ? s.trendUpColor : s.trendDownColor,
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 2
+          }, children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                glyph: "arrow-up",
+                size: 10,
+                strokeWidth: 2.5,
+                style: { transform: up ? "none" : "rotate(180deg)" }
+              }
+            ),
+            trend
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function MiniCard() {
+  const s = useResolved("card");
+  const [hover, setHover] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: {
+        backgroundColor: s.backgroundColor,
+        border: `1px solid ${s.borderColor}`,
+        borderRadius: s.borderRadius,
+        padding: s.padding,
+        boxShadow: hover ? "var(--shadow-md)" : s.shadow ? "var(--shadow-sm)" : "none",
+        transition: "box-shadow 0.2s, transform 0.15s",
+        transform: hover ? "translateY(-1px)" : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { width: 32, height: 32, borderRadius: 8, backgroundColor: "var(--color-accent-subtle)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--color-accent-bold)" }, children: /* @__PURE__ */ jsx(Icon, { glyph: "bolt", size: 16 }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { style: {
+              fontFamily: roleFont("section-title"),
+              fontSize: scaled(13, "section-title"),
+              fontWeight: roleWeight("section-title", 600),
+              color: "var(--color-text)",
+              margin: 0
+            }, children: "Quick Analytics" }),
+            /* @__PURE__ */ jsx("p", { style: { fontSize: scaled(11), color: "var(--color-text-muted)", margin: 0 }, children: "Updated 2h ago" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: scaled(12), color: "var(--color-text-muted)", lineHeight: "var(--type-body-line-height, 1.5)", margin: 0 }, children: "Track key metrics and performance across active motions." })
+      ]
+    }
+  );
+}
+function MiniInput({ label, placeholder, icon }) {
+  const id = icon ? "input-with-icon" : "input-text";
+  const s = useResolved(id);
+  const cssVars = icon ? {
+    "--uxm-input-with-icon-bg": s.backgroundColor,
+    "--uxm-input-with-icon-border-color": s.borderColor,
+    "--uxm-input-with-icon-color": s.color,
+    "--uxm-input-with-icon-radius": s.borderRadius != null ? `${s.borderRadius}px` : void 0,
+    "--uxm-input-with-icon-padding-x": s.paddingX != null ? `${s.paddingX}px` : void 0,
+    "--uxm-input-with-icon-padding-y": s.paddingY != null ? `${s.paddingY}px` : void 0,
+    "--uxm-input-with-icon-font-size": s.fontSize != null ? `${s.fontSize}px` : void 0,
+    "--uxm-input-with-icon-icon-color": s.iconColor,
+    "--uxm-input-with-icon-icon-size": s.iconSize != null ? `${s.iconSize}px` : void 0,
+    "--uxm-input-with-icon-icon-offset": s.iconOffset != null ? `${s.iconOffset}px` : void 0,
+    "--uxm-input-with-icon-hover-bg": s.hoverBg,
+    "--uxm-input-with-icon-hover-border": s.hoverBorder,
+    "--uxm-input-with-icon-focus-border": s.focusBorder,
+    "--uxm-input-with-icon-focus-ring": s.focusRing,
+    "--uxm-input-with-icon-disabled-bg": s.disabledBg,
+    "--uxm-input-with-icon-disabled-border": s.disabledBorder,
+    "--uxm-input-with-icon-disabled-color": s.disabledColor,
+    "--uxm-input-with-icon-disabled-opacity": s.disabledOpacity != null ? String(s.disabledOpacity) : void 0
+  } : {
+    "--uxm-input-text-bg": s.backgroundColor,
+    "--uxm-input-text-border-color": s.borderColor,
+    "--uxm-input-text-color": s.color,
+    "--uxm-input-text-border-radius": s.borderRadius != null ? `${s.borderRadius}px` : void 0,
+    "--uxm-input-text-padding-x": s.paddingX != null ? `${s.paddingX}px` : void 0,
+    "--uxm-input-text-padding-y": s.paddingY != null ? `${s.paddingY}px` : void 0,
+    "--uxm-input-text-font-size": s.fontSize != null ? `${s.fontSize}px` : void 0,
+    "--uxm-input-text-hover-bg": s.hoverBg,
+    "--uxm-input-text-hover-border": s.hoverBorder,
+    "--uxm-input-text-focus-border": s.focusBorder,
+    "--uxm-input-text-focus-ring": s.focusRing,
+    "--uxm-input-text-disabled-bg": s.disabledBg,
+    "--uxm-input-text-disabled-border": s.disabledBorder,
+    "--uxm-input-text-disabled-color": s.disabledColor,
+    "--uxm-input-text-disabled-opacity": s.disabledOpacity != null ? String(s.disabledOpacity) : void 0
+  };
+  return /* @__PURE__ */ jsxs("div", { style: cssVars, children: [
+    /* @__PURE__ */ jsx("label", { style: { fontSize: scaled(12), fontWeight: 500, color: s.labelColor ?? "var(--color-text)", display: "block", marginBottom: 5 }, children: label }),
+    icon ? /* @__PURE__ */ jsx(InputWithIcon, { placeholder, icon }) : /* @__PURE__ */ jsx(TextInput, { placeholder })
+  ] });
+}
+function MiniSelect({ label, options, initial }) {
+  const s = useResolved("select-dropdown");
+  const [value, setValue] = useState(initial ?? options[0]);
+  const cssVars = {
+    "--uxm-select-dropdown-bg": s.backgroundColor,
+    "--uxm-select-dropdown-border-color": s.borderColor,
+    "--uxm-select-dropdown-color": s.color,
+    "--uxm-select-dropdown-border-radius": s.borderRadius != null ? `${s.borderRadius}px` : void 0,
+    "--uxm-select-dropdown-padding-x": s.paddingX != null ? `${s.paddingX}px` : void 0,
+    "--uxm-select-dropdown-padding-y": s.paddingY != null ? `${s.paddingY}px` : void 0,
+    "--uxm-select-dropdown-font-size": s.fontSize != null ? `${s.fontSize}px` : void 0,
+    "--uxm-select-dropdown-hover-bg": s.hoverBg,
+    "--uxm-select-dropdown-hover-border": s.hoverBorder,
+    "--uxm-select-dropdown-focus-border": s.focusBorder,
+    "--uxm-select-dropdown-focus-ring": s.focusRing,
+    "--uxm-select-dropdown-disabled-bg": s.disabledBg,
+    "--uxm-select-dropdown-disabled-border": s.disabledBorder,
+    "--uxm-select-dropdown-disabled-color": s.disabledColor,
+    "--uxm-select-dropdown-disabled-opacity": s.disabledOpacity != null ? String(s.disabledOpacity) : void 0
+  };
+  return /* @__PURE__ */ jsxs("div", { style: cssVars, children: [
+    /* @__PURE__ */ jsx("label", { style: { fontSize: scaled(12), fontWeight: 500, color: s.labelColor ?? "var(--color-text)", display: "block", marginBottom: 5 }, children: label }),
+    /* @__PURE__ */ jsx(Select, { value, onChange: (e) => setValue(e.target.value), children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o)) })
+  ] });
+}
+function MiniCheckbox({ label, initial = false }) {
+  const s = useResolved("checkbox");
+  const [checked, setChecked] = useState(initial);
+  const cssVars = {
+    "--uxm-checkbox-size": s.size != null ? `${s.size}px` : void 0,
+    "--uxm-checkbox-border-radius": s.borderRadius != null ? `${s.borderRadius}px` : void 0,
+    "--uxm-checkbox-gap": s.gap != null ? `${s.gap}px` : void 0,
+    "--uxm-checkbox-unchecked-bg": s.uncheckedBg,
+    "--uxm-checkbox-unchecked-border": s.uncheckedBorder,
+    "--uxm-checkbox-checked-bg": s.checkedBg,
+    "--uxm-checkbox-checked-border": s.checkedBorder,
+    "--uxm-checkbox-check-glyph-color": s.checkGlyphColor,
+    "--uxm-checkbox-hover-unchecked-bg": s.hoverUncheckedBg,
+    "--uxm-checkbox-hover-unchecked-border": s.hoverUncheckedBorder,
+    "--uxm-checkbox-hover-checked-bg": s.hoverCheckedBg,
+    "--uxm-checkbox-hover-checked-border": s.hoverCheckedBorder,
+    "--uxm-checkbox-hover-check-glyph-color": s.hoverCheckGlyphColor,
+    "--uxm-checkbox-focus-ring": s.focusRing,
+    "--uxm-checkbox-disabled-opacity": s.disabledOpacity != null ? String(s.disabledOpacity) : void 0,
+    fontSize: scaled(12)
+  };
+  return /* @__PURE__ */ jsx("span", { style: cssVars, children: /* @__PURE__ */ jsx(Checkbox, { checked, onChange: (v) => setChecked(v), children: label }) });
+}
+function MiniToggle({ label = "Notifications", initial = true }) {
+  const s = useResolved("toggle-switch");
+  const [on, setOn] = useState(initial);
+  const cssVars = {
+    "--uxm-toggle-switch-width": s.width != null ? `${s.width}px` : void 0,
+    "--uxm-toggle-switch-height": s.height != null ? `${s.height}px` : void 0,
+    "--uxm-toggle-switch-off-track": s.offTrack,
+    "--uxm-toggle-switch-off-thumb": s.offThumb,
+    "--uxm-toggle-switch-on-track": s.onTrack,
+    "--uxm-toggle-switch-on-thumb": s.onThumb,
+    "--uxm-toggle-switch-hover-off-track": s.hoverOffTrack,
+    "--uxm-toggle-switch-hover-off-thumb": s.hoverOffThumb,
+    "--uxm-toggle-switch-hover-on-track": s.hoverOnTrack,
+    "--uxm-toggle-switch-hover-on-thumb": s.hoverOnThumb,
+    "--uxm-toggle-switch-focus-ring": s.focusRing,
+    "--uxm-toggle-switch-disabled-opacity": s.disabledOpacity != null ? String(s.disabledOpacity) : void 0,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    fontSize: scaled(12),
+    color: "var(--color-text)"
+  };
+  return /* @__PURE__ */ jsxs("span", { style: cssVars, children: [
+    /* @__PURE__ */ jsx(ToggleSwitch, { checked: on, onChange: (v) => setOn(v) }),
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+}
+function MiniButtonGroup() {
+  const s = useResolved("button-group");
+  const opts = ["Day", "Week", "Month"];
+  const [active, setActive] = useState(1);
+  return /* @__PURE__ */ jsx("div", { style: { display: "inline-flex", border: `1px solid ${s.borderColor}`, borderRadius: s.borderRadius, overflow: "hidden" }, children: opts.map((o, i) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => setActive(i),
+      style: {
+        backgroundColor: i === active ? s.activeBg : s.inactiveBg,
+        color: i === active ? s.activeText : s.inactiveText,
+        padding: `${s.paddingY * 0.75}px ${s.paddingX * 0.85}px`,
+        fontSize: derived(s.fontSize, 1),
+        fontWeight: i === active ? 600 : 500,
+        border: "none",
+        borderRight: i < 2 ? `1px solid ${s.borderColor}` : "none",
+        cursor: "pointer",
+        transition: "background-color 0.15s, color 0.15s"
+      },
+      children: o
+    },
+    o
+  )) });
+}
+function MiniFilterChips() {
+  const s = useResolved("inline-filter");
+  const chips = ["All", "Active", "Draft", "Archived"];
+  const [active, setActive] = useState(0);
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: s.gap * 0.75 }, children: chips.map((c, i) => /* @__PURE__ */ jsx(
+    Chip,
+    {
+      mode: "filter",
+      selected: i === active,
+      onClick: () => setActive(i),
+      children: c
+    },
+    c
+  )) });
+}
+function MiniTabs() {
+  const s = useResolved("tabs");
+  const tabs = ["Overview", "Motions", "Pipelines"];
+  const [active, setActive] = useState(0);
+  return /* @__PURE__ */ jsx("div", { style: {
+    display: "inline-flex",
+    padding: s.trackPadding,
+    backgroundColor: s.trackBg,
+    border: `1px solid ${s.trackBorder}`,
+    borderRadius: s.trackRadius,
+    gap: 2
+  }, children: tabs.map((t, i) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setActive(i),
+      style: {
+        backgroundColor: i === active ? s.activeBg : "transparent",
+        color: i === active ? s.activeText : s.inactiveText,
+        border: "none",
+        borderRadius: s.tabRadius,
+        padding: `${s.paddingY}px ${s.paddingX}px`,
+        fontSize: derived(s.fontSize, 1),
+        fontWeight: i === active ? 600 : 500,
+        cursor: "pointer",
+        boxShadow: i === active ? "var(--shadow-xs)" : "none",
+        transition: "background-color 0.15s, color 0.15s"
+      },
+      children: t
+    },
+    t
+  )) });
+}
+function MiniAvatar({ initials = "LR" }) {
+  const s = useResolved("avatar");
+  const [hover, setHover] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: s.size * 0.75,
+        height: s.size * 0.75,
+        borderRadius: s.borderRadius,
+        backgroundColor: s.backgroundColor,
+        color: s.color,
+        border: hover ? `2px solid var(--color-accent)` : "2px solid transparent",
+        fontSize: derived(s.fontSize, 2),
+        fontWeight: s.fontWeight,
+        cursor: "pointer",
+        transition: "border-color 0.15s"
+      },
+      children: initials
+    }
+  );
+}
+function MiniTable() {
+  const s = useResolved("data-table");
+  const rows = [
+    { name: "Enterprise SaaS", status: "Active", amount: "$84,500" },
+    { name: "Product-Led Growth", status: "Active", amount: "$215,000" },
+    { name: "Channel Partner", status: "Draft", amount: "$32,750" }
+  ];
+  const [hoverRow, setHoverRow] = useState(null);
+  const STATUS_TO_TAG_TYPE = {
+    Active: "accent",
+    Draft: "warning"
+  };
+  return /* @__PURE__ */ jsx("div", { style: { border: `1px solid ${s.borderColor}`, borderRadius: s.borderRadius, overflow: "hidden" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: derived(s.fontSize, 1) }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { style: { backgroundColor: s.headerBg }, children: ["Name", "Status", "Amount"].map((h) => /* @__PURE__ */ jsx("th", { style: {
+      textAlign: "left",
+      padding: `${s.cellPaddingY * 0.75}px ${s.cellPaddingX}px`,
+      fontWeight: 600,
+      color: s.headerText,
+      borderBottom: `1px solid ${s.borderColor}`,
+      fontSize: derived(s.fontSize, 2)
+    }, children: h }, h)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        onMouseEnter: () => setHoverRow(i),
+        onMouseLeave: () => setHoverRow(null),
+        style: {
+          backgroundColor: hoverRow === i ? "var(--color-surface-alt)" : "transparent",
+          cursor: "pointer",
+          transition: "background-color 0.12s"
+        },
+        children: [
+          /* @__PURE__ */ jsx("td", { style: { padding: `${s.cellPaddingY * 0.75}px ${s.cellPaddingX}px`, fontWeight: 500, color: "var(--color-text)", borderBottom: `1px solid ${s.borderColor}` }, children: r.name }),
+          /* @__PURE__ */ jsx("td", { style: { padding: `${s.cellPaddingY * 0.75}px ${s.cellPaddingX}px`, borderBottom: `1px solid ${s.borderColor}` }, children: /* @__PURE__ */ jsx(Tag, { type: STATUS_TO_TAG_TYPE[r.status] ?? "neutral", size: "small", children: r.status }) }),
+          /* @__PURE__ */ jsx("td", { style: { padding: `${s.cellPaddingY * 0.75}px ${s.cellPaddingX}px`, fontWeight: 500, color: "var(--color-text)", borderBottom: `1px solid ${s.borderColor}` }, children: r.amount })
+        ]
+      },
+      r.name
+    )) })
+  ] }) });
+}
+function BuildSuccess({ onClose }) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    gap: 16,
+    textAlign: "center"
+  }, children: [
+    /* @__PURE__ */ jsx("div", { style: {
+      width: 72,
+      height: 72,
+      borderRadius: "50%",
+      backgroundColor: "var(--color-accent-subtle)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      animation: "scaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)"
+    }, children: /* @__PURE__ */ jsx("svg", { width: 36, height: 36, fill: "none", viewBox: "0 0 24 24", strokeWidth: 2.5, stroke: "var(--color-accent-bold)", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M4.5 12.75l6 6 9-13.5",
+        style: {
+          strokeDasharray: 30,
+          strokeDashoffset: 0,
+          animation: "drawCheck 0.4s ease-out 0.2s both"
+        }
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { id: "uxm-preview-modal-title", style: {
+        fontFamily: roleFont("page-title"),
+        fontSize: scaled(22, "page-title"),
+        fontWeight: roleWeight("page-title", 700),
+        color: "var(--color-text)",
+        margin: "0 0 6px"
+      }, children: "Design system ready" }),
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: scaled(14), color: "var(--color-text-muted)", margin: 0 }, children: [
+        registry.length,
+        " components configured"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ButtonPrimary, { onClick: onClose, style: { marginTop: 8 }, children: "Close" })
+  ] });
+}
+function PreviewModal({ onClose }) {
+  const { getAllOverrides, brand, persistence, capabilities } = useUxm();
+  const globalTheme = useGlobalTheme();
+  const activeLogo = globalTheme === "dark" ? brand.logoUrlDark || brand.logoUrl : brand.logoUrl;
+  const activeFavicon = globalTheme === "dark" ? brand.faviconUrlDark || brand.faviconUrl : brand.faviconUrl;
+  const [built, setBuilt] = useState(false);
+  const [building, setBuilding] = useState(false);
+  const [buildError, setBuildError] = useState(null);
+  const [bannerVisible, setBannerVisible] = useState(true);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+  const handleBuild = useCallback(async () => {
+    setBuilding(true);
+    setBuildError(null);
+    try {
+      await persistence.save({ overrides: getAllOverrides(), brand });
+      setBuilt(true);
+    } catch (err) {
+      setBuildError(err instanceof Error ? err.message : "Build failed");
+    } finally {
+      setBuilding(false);
+    }
+  }, [getAllOverrides, brand, persistence]);
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- modal backdrop click-to-dismiss; the close control inside is keyboard-accessible
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 50,
+          backgroundColor: "rgba(0,0,0,0.4)",
+          backdropFilter: "blur(4px)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          animation: "fadeIn 0.2s ease-out"
+        },
+        onClick: onClose,
+        children: [
+          /* @__PURE__ */ jsx("style", { children: `
+        @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
+        @keyframes scaleIn { from { transform: scale(0) } to { transform: scale(1) } }
+        @keyframes drawCheck { from { stroke-dashoffset: 30 } to { stroke-dashoffset: 0 } }
+        @keyframes alertSlide { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: translateY(0) } }
+
+        .uxm-browser-tab {
+          position: relative;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          max-width: 240px;
+          padding: 6px 16px 6px 12px;
+          background-color: var(--color-card);
+          border-top-left-radius: 10px;
+          border-top-right-radius: 10px;
+        }
+        .uxm-browser-tab::before,
+        .uxm-browser-tab::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          width: 10px;
+          height: 10px;
+          background-color: transparent;
+        }
+        .uxm-browser-tab::before {
+          left: -10px;
+          border-bottom-right-radius: 10px;
+          box-shadow: 4px 0 0 0 var(--color-card);
+        }
+        .uxm-browser-tab::after {
+          right: -10px;
+          border-bottom-left-radius: 10px;
+          box-shadow: -4px 0 0 0 var(--color-card);
+        }
+      ` }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": "uxm-preview-modal-title",
+              onClick: (e) => e.stopPropagation(),
+              style: {
+                width: "90vw",
+                maxWidth: 960,
+                height: "85vh",
+                maxHeight: 680,
+                backgroundColor: "var(--color-surface)",
+                borderRadius: 16,
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden",
+                boxShadow: "var(--shadow-2xl)",
+                animation: "slideUp 0.25s ease-out"
+              },
+              children: built ? /* @__PURE__ */ jsx(BuildSuccess, { onClose }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { style: {
+                  display: "flex",
+                  alignItems: "flex-end",
+                  gap: 0,
+                  paddingTop: 8,
+                  paddingLeft: 24,
+                  paddingRight: 12,
+                  backgroundColor: "var(--color-surface-alt)"
+                }, children: [
+                  /* @__PURE__ */ jsxs("div", { className: "uxm-browser-tab", children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: activeFavicon || "/favicon.ico",
+                        alt: "",
+                        width: 14,
+                        height: 14,
+                        style: { flexShrink: 0, objectFit: "contain" },
+                        onError: (e) => {
+                          e.currentTarget.style.visibility = "hidden";
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      fontSize: scaled(12),
+                      color: "var(--color-text)",
+                      fontWeight: 500,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    }, children: "Modo \u2014 Dashboard" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      "aria-label": "Close preview",
+                      onClick: onClose,
+                      style: { marginLeft: "auto", marginBottom: 6 },
+                      children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 16, strokeWidth: 1.5 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: 24 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16, gap: 16 }, children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: activeLogo || "/viax-logo.svg",
+                          alt: "Logo",
+                          style: { height: 22, maxWidth: 140, objectFit: "contain", flexShrink: 0 },
+                          onError: (e) => {
+                            e.currentTarget.style.display = "none";
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { style: { height: 22, width: 1, backgroundColor: "var(--color-border)", flexShrink: 0 } }),
+                      /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                        /* @__PURE__ */ jsx("h3", { id: "uxm-preview-modal-title", style: {
+                          fontFamily: roleFont("page-title"),
+                          fontSize: scaled(18, "page-title"),
+                          fontWeight: roleWeight("page-title", 700),
+                          color: "var(--color-text)",
+                          margin: 0
+                        }, children: "Dashboard" }),
+                        /* @__PURE__ */ jsx("p", { style: { fontSize: scaled(12), color: "var(--color-text-muted)", margin: "2px 0 0" }, children: "Revenue overview for Q1 2026" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                      /* @__PURE__ */ jsx(MiniButtonGroup, {}),
+                      /* @__PURE__ */ jsx(MiniButton, { label: "Export", variant: "secondary" }),
+                      /* @__PURE__ */ jsx(MiniButton, { label: "New Report" }),
+                      /* @__PURE__ */ jsx(MiniAvatar, {})
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx(MiniTabs, {}) }),
+                  bannerVisible && /* @__PURE__ */ jsx("div", { style: { marginBottom: 16, animation: "alertSlide 0.25s ease-out" }, children: /* @__PURE__ */ jsx(
+                    Banner,
+                    {
+                      variant: "success",
+                      title: "Q1 forecast beat target by 12%. Nice work.",
+                      onDismiss: () => setBannerVisible(false)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 14, marginBottom: 20 }, children: [
+                    /* @__PURE__ */ jsx(MiniStatCard, { label: "Total Revenue", value: "$48.2K", trend: "+12.5%", up: true }),
+                    /* @__PURE__ */ jsx(MiniStatCard, { label: "Active Users", value: "2,847", trend: "+8.2%", up: true }),
+                    /* @__PURE__ */ jsx(MiniStatCard, { label: "Churn Rate", value: "3.1%", trend: "+0.4%", up: false })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 280px", gap: 16, marginBottom: 20 }, children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }, children: /* @__PURE__ */ jsx(MiniFilterChips, {}) }),
+                      /* @__PURE__ */ jsx(MiniTable, {})
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
+                      /* @__PURE__ */ jsx(MiniCard, {}),
+                      /* @__PURE__ */ jsxs("div", { style: {
+                        backgroundColor: "var(--color-card)",
+                        border: "1px solid var(--color-border)",
+                        borderRadius: 10,
+                        padding: 16
+                      }, children: [
+                        /* @__PURE__ */ jsx("h4", { style: {
+                          fontFamily: roleFont("section-title"),
+                          fontSize: scaled(13, "section-title"),
+                          fontWeight: roleWeight("section-title", 600),
+                          color: "var(--color-text)",
+                          margin: "0 0 12px"
+                        }, children: "Quick Add" }),
+                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+                          /* @__PURE__ */ jsx(
+                            MiniInput,
+                            {
+                              label: "Name",
+                              placeholder: "Motion name",
+                              icon: /* @__PURE__ */ jsx(Icon, { glyph: "pencil", size: 14 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(MiniSelect, { label: "Segment", options: ["Enterprise", "Mid-Market", "SMB", "Startup"] }),
+                          /* @__PURE__ */ jsx(MiniCheckbox, { label: "Send confirmation email", initial: true }),
+                          /* @__PURE__ */ jsx(MiniToggle, { label: "Auto-publish", initial: false }),
+                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                            /* @__PURE__ */ jsx(MiniButton, { label: "Cancel", variant: "tertiary" }),
+                            /* @__PURE__ */ jsx(MiniButton, { label: "Create" })
+                          ] })
+                        ] })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: scaled(12), color: "var(--color-text-muted)", marginRight: 4 }, children: "Tags:" }),
+                    /* @__PURE__ */ jsx(Tag, { type: "success", children: "Active" }),
+                    /* @__PURE__ */ jsx(Tag, { type: "warning", children: "Draft" }),
+                    /* @__PURE__ */ jsx(Tag, { type: "info", children: "Q1 2026" }),
+                    /* @__PURE__ */ jsx(Tag, { type: "neutral", children: "Revenue" })
+                  ] })
+                ] }),
+                capabilities.persist && /* @__PURE__ */ jsxs("div", { style: {
+                  padding: "16px 24px",
+                  borderTop: "1px solid var(--color-border)",
+                  backgroundColor: "var(--color-card)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                }, children: [
+                  /* @__PURE__ */ jsx("p", { style: { fontSize: scaled(13), color: buildError ? "var(--color-danger-text)" : "var(--color-text-muted)", margin: 0 }, children: buildError ?? "Publish saves your changes to the environment" }),
+                  /* @__PURE__ */ jsxs(
+                    ButtonPrimary,
+                    {
+                      onClick: handleBuild,
+                      disabled: building,
+                      style: {
+                        cursor: building ? "not-allowed" : "pointer",
+                        opacity: building ? 0.6 : 1
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, { glyph: "cursor-arrow-rays", size: 16, strokeWidth: 2 }),
+                        building ? "Publishing\u2026" : "Publish"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  PreviewModal
+};
+//# sourceMappingURL=preview-modal.js.map