@viax.io/uxm 4.36.0

package/dist/studio/shell/properties-panel.js

@@ -0,0 +1,849 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useEffect, useMemo, useRef, useState } from "react";
+import { Card } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { IconButton } from "../../ui/index.js";
+import { InlineAction } from "../../ui/index.js";
+import { SectionHeader } from "../../ui/index.js";
+import { Tabs } from "../../ui/index.js";
+import { CodeEditor } from "../editors/code-editor.js";
+import { ColorPicker } from "../editors/color-picker.js";
+import { NumberInput } from "../editors/number-input.js";
+import { SelectInput } from "../editors/select-input.js";
+import { SliderInput } from "../editors/slider-input.js";
+import { TextInput } from "../editors/text-input.js";
+import { ToggleInput } from "../editors/toggle-input.js";
+import { useUxm } from "../lib/context.js";
+import { usePreviewShell } from "../lib/preview-shell.js";
+import { getComponentDef, registry } from "../lib/registry/index.js";
+import { previewMap } from "./canvas.js";
+import { WcagPanel } from "./wcag-panel.js";
+function PropertiesPanel({
+  orientation = "horizontal",
+  onToggleOrientation
+}) {
+  const [tab, setTab] = useState("visual");
+  const {
+    selectedId,
+    getOverrides,
+    setOverride,
+    resetOverride,
+    resetOverrides,
+    getCurrentVariants,
+    setVariant,
+    eventLog,
+    clearEvents
+  } = useUxm();
+  const def = getComponentDef(selectedId);
+  const overrides = getOverrides(selectedId);
+  const currentVariants = getCurrentVariants();
+  const [syncedKeys, setSyncedKeys] = useState(/* @__PURE__ */ new Set());
+  const [justMatchedKey, setJustMatchedKey] = useState(null);
+  const justMatchedTimer = useRef(null);
+  useEffect(() => {
+    setSyncedKeys(/* @__PURE__ */ new Set());
+    setJustMatchedKey(null);
+    if (justMatchedTimer.current) {
+      clearTimeout(justMatchedTimer.current);
+      justMatchedTimer.current = null;
+    }
+  }, [selectedId]);
+  useEffect(() => () => {
+    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);
+  }, []);
+  const peers = useMemo(
+    () => def ? registry.filter((c) => c.category === def.category && c.id !== def.id) : [],
+    [def]
+  );
+  const peersByKey = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (!def) return map;
+    for (const prop of def.styleProperties) {
+      const matches = peers.filter((p) => p.styleProperties.some((pp) => pp.key === prop.key));
+      if (matches.length) map.set(prop.key, matches);
+    }
+    return map;
+  }, [def, peers]);
+  if (!def) return null;
+  const resolve = (key, fallback) => {
+    const isVariantKey = def.layoutVariants.some((v) => v.key === key);
+    if (isVariantKey) return currentVariants[key] ?? fallback;
+    return overrides[key] ?? fallback;
+  };
+  const handleChange = (key) => (value) => {
+    const variant = def.layoutVariants.find((v) => v.key === key);
+    if (variant) {
+      setVariant(key, value);
+      return;
+    }
+    const prop = def.styleProperties.find((p) => p.key === key);
+    if (prop !== void 0 && value === prop.defaultValue) {
+      resetOverride(selectedId, key);
+    } else {
+      setOverride(selectedId, key, value);
+    }
+    setSyncedKeys((prev) => {
+      if (!prev.has(key)) return prev;
+      const next = new Set(prev);
+      next.delete(key);
+      return next;
+    });
+  };
+  const hasOverrides = Object.keys(overrides).length > 0;
+  const SECTION_LABELS = {
+    colors: "Colors",
+    states: "States",
+    style: "Style",
+    frame: "Frame",
+    header: "Header",
+    weekday: "Weekday Row",
+    "shared-states": "Shared States",
+    "day-cell": "Date Cell",
+    "month-year-cells": "Month & Year Cells",
+    text: "Text",
+    uncheckedColors: "Unchecked",
+    checkedColors: "Checked",
+    offColors: "Off",
+    onColors: "On",
+    unselectedColors: "Unselected",
+    selectedColors: "Selected",
+    fieldColors: "Field Colors",
+    dropAreaColors: "Drop Area",
+    dropOutline: "Drop Outline",
+    triggerColors: "Trigger Colors",
+    popover: "Popover",
+    option: "Option",
+    focusState: "Focus",
+    disabledState: "Disabled",
+    errorState: "Error Message",
+    rangeOptions: "Range Options",
+    dragState: "Drag Over",
+    fileList: "File List",
+    fileListProgress: "File List Progress",
+    fileListStatus: "File List Status",
+    headerSlot: "Header Slot",
+    footerSlot: "Footer Slot"
+  };
+  const allShowWhenKeys = Array.from(
+    new Set(def.styleProperties.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : []))
+  );
+  const labelize = (vKey) => def.layoutVariants.find((v) => v.key === vKey)?.label ?? vKey;
+  const sectionScopeKeys = (props) => Array.from(new Set(props.flatMap((p) => p.showWhen ? Object.keys(p.showWhen) : [])));
+  const sectionTitleFor = (slug) => SECTION_LABELS[slug] ?? slug.charAt(0).toUpperCase() + slug.slice(1);
+  const sectionSubtitleFor = (props) => {
+    const keys = sectionScopeKeys(props);
+    if (keys.length > 0) {
+      const scope = `Per ${keys.map(labelize).join(" \xD7 ")}`;
+      const current = keys.map((vKey) => {
+        const variant = def.layoutVariants.find((v2) => v2.key === vKey);
+        if (!variant) return null;
+        const v = resolve(vKey, variant.defaultValue);
+        return variant.options.find((o) => o.value === v)?.label ?? v;
+      }).filter(Boolean).join(" / ");
+      return { scope, current: current || null };
+    }
+    if (allShowWhenKeys.length > 0) {
+      const variantNames = allShowWhenKeys.map((k) => labelize(k).toLowerCase() + "s").join(" / ");
+      return { scope: `Shared across all ${variantNames}`, current: null };
+    }
+    return null;
+  };
+  const sectionBarCategoryFor = (props) => {
+    const keys = sectionScopeKeys(props);
+    if (keys.length === 0) return "shared";
+    if (keys.length === allShowWhenKeys.length) return "full";
+    return "partial";
+  };
+  const BAR_COLOR = {
+    full: "var(--color-highlight-cool)",
+    partial: "var(--color-highlight-warm)"
+  };
+  const matchesShowWhen = (showWhen) => {
+    if (!showWhen) return true;
+    for (const [vKey, vVal] of Object.entries(showWhen)) {
+      const current = resolve(
+        vKey,
+        def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? ""
+      );
+      const allowed = Array.isArray(vVal) ? vVal : [vVal];
+      if (!allowed.includes(current)) return false;
+    }
+    return true;
+  };
+  const visibleStyleProps = def.styleProperties.filter(
+    (prop) => matchesShowWhen(prop.showWhen)
+  );
+  const visibleEvents = (def.events ?? []).filter(
+    (ev) => matchesShowWhen(ev.showWhen)
+  );
+  const visibleVariants = def.layoutVariants.filter(
+    (v) => matchesShowWhen(v.showWhen)
+  );
+  const sectionsMap = /* @__PURE__ */ new Map();
+  for (const prop of visibleStyleProps) {
+    const slug = prop.section ?? "style";
+    if (!sectionsMap.has(slug)) sectionsMap.set(slug, []);
+    sectionsMap.get(slug).push(prop);
+  }
+  const sectionGroups = Array.from(sectionsMap.entries());
+  const cascadeKey = (key, value) => {
+    const targets = peersByKey.get(key) ?? [];
+    if (targets.length === 0) return;
+    for (const p of targets) setOverride(p.id, key, value);
+    setSyncedKeys((prev) => new Set(prev).add(key));
+    setJustMatchedKey(key);
+    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);
+    justMatchedTimer.current = setTimeout(() => setJustMatchedKey(null), 1400);
+  };
+  return /* @__PURE__ */ jsxs("aside", { className: `flex flex-col overflow-hidden w-full h-full ${orientation === "horizontal" ? "border-l" : "border-t"} border-border bg-card`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 border-b border-border px-5 py-3 bg-card", children: [
+      /* @__PURE__ */ jsx(
+        SectionHeader,
+        {
+          trailing: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            onToggleOrientation && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onToggleOrientation,
+                "aria-label": orientation === "horizontal" ? "Move panel to bottom" : "Move panel to right",
+                title: orientation === "horizontal" ? "Dock to bottom" : "Dock to right",
+                style: { ["--uxm-icon-button-size"]: "20px" },
+                children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    glyph: orientation === "horizontal" ? "dock-bottom" : "dock-right",
+                    size: 14
+                  }
+                )
+              }
+            ),
+            hasOverrides && /* @__PURE__ */ jsx(InlineAction, { onClick: () => resetOverrides(selectedId), children: "Reset all" })
+          ] }),
+          children: "Properties"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          className: "w-full",
+          value: tab,
+          onChange: (v) => setTab(v),
+          options: [
+            {
+              value: "visual",
+              label: "Visual",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "list", size: 12 })
+            },
+            {
+              value: "dev",
+              label: "Dev",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "bolt", size: 12 })
+            },
+            {
+              value: "code",
+              label: "CSS",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: "code", size: 12 })
+            }
+          ]
+        }
+      )
+    ] }),
+    tab === "visual" ? /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: orientation === "vertical" ? "grid items-start gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]" : "",
+        children: [
+          visibleVariants.length > 0 && /* @__PURE__ */ jsxs("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: [
+            /* @__PURE__ */ jsx(SectionHeader, { children: visibleVariants.length === 1 ? "Variant" : "Variants" }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3", children: visibleVariants.map((variant) => {
+              const rawValue = resolve(variant.key, variant.defaultValue);
+              const visibleOptions = variant.options.filter((opt) => {
+                if (!opt.showWhen) return true;
+                for (const [vKey, vVal] of Object.entries(opt.showWhen)) {
+                  const current = resolve(
+                    vKey,
+                    def.layoutVariants.find((v) => v.key === vKey)?.defaultValue ?? ""
+                  );
+                  const allowed = Array.isArray(vVal) ? vVal : [vVal];
+                  if (!allowed.includes(current)) return false;
+                }
+                return true;
+              });
+              const valid = visibleOptions.some((o) => o.value === rawValue);
+              const value = valid ? rawValue : visibleOptions.some((o) => o.value === variant.defaultValue) ? variant.defaultValue : visibleOptions[0]?.value ?? rawValue;
+              if (!valid && value !== rawValue) {
+                queueMicrotask(() => setVariant(variant.key, value));
+              }
+              return /* @__PURE__ */ jsx("div", { "data-variant-key": variant.key, children: /* @__PURE__ */ jsx(
+                SelectInput,
+                {
+                  label: variant.label,
+                  value,
+                  onChange: handleChange(variant.key),
+                  options: visibleOptions
+                }
+              ) }, variant.key);
+            }) })
+          ] }),
+          sectionGroups.map(([slug, props]) => {
+            const overriddenInSection = props.filter((p) => p.key in overrides);
+            const hasSectionOverrides = overriddenInSection.length > 0;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${orientation === "vertical" ? "min-w-0" : "mb-6"} ${sectionBarCategoryFor(props) === "shared" ? "" : "border-l-2 pl-3 -ml-3"}`,
+                style: sectionBarCategoryFor(props) === "shared" ? void 0 : { borderColor: BAR_COLOR[sectionBarCategoryFor(props)] },
+                children: [
+                  (() => {
+                    const sub = sectionSubtitleFor(props);
+                    const subtitle = sub ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { children: sub.scope }),
+                      sub.current && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: "var(--color-text-subtle)" }, children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--color-text-strong)" }, children: sub.current })
+                      ] })
+                    ] }) : null;
+                    return /* @__PURE__ */ jsx(
+                      SectionHeader,
+                      {
+                        subtitle,
+                        trailing: hasSectionOverrides && sectionGroups.length > 1 ? /* @__PURE__ */ jsx(
+                          InlineAction,
+                          {
+                            onClick: () => {
+                              for (const p of overriddenInSection) resetOverride(selectedId, p.key);
+                            },
+                            title: `Reset ${overriddenInSection.length} field${overriddenInSection.length === 1 ? "" : "s"} in this section to default`,
+                            icon: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
+                            children: "Reset section"
+                          }
+                        ) : void 0,
+                        children: sectionTitleFor(slug)
+                      }
+                    );
+                  })(),
+                  /* @__PURE__ */ jsx("div", { className: "space-y-3", children: props.map((prop) => {
+                    const value = resolve(prop.key, prop.defaultValue);
+                    const onChange = handleChange(prop.key);
+                    const editor = renderEditor(prop.control, {
+                      label: prop.label,
+                      value,
+                      onChange,
+                      prop
+                    });
+                    const peerCount = peersByKey.get(prop.key)?.length ?? 0;
+                    const isOverridden = prop.key in overrides;
+                    const isSynced = syncedKeys.has(prop.key);
+                    const isJustMatched = justMatchedKey === prop.key;
+                    return /* @__PURE__ */ jsx(
+                      PropertyRow,
+                      {
+                        cascadeCount: isOverridden ? peerCount : 0,
+                        onCascade: () => cascadeKey(prop.key, value),
+                        category: def.category,
+                        propLabel: prop.label,
+                        synced: isSynced,
+                        justMatched: isJustMatched,
+                        isOverridden,
+                        onReset: () => resetOverride(selectedId, prop.key),
+                        children: editor
+                      },
+                      prop.key
+                    );
+                  }) })
+                ]
+              },
+              slug
+            );
+          }),
+          /* @__PURE__ */ jsx("div", { className: orientation === "vertical" ? "min-w-0 col-span-2" : "", children: /* @__PURE__ */ jsx(WcagPanel, { def }) })
+        ]
+      }
+    ) }) : tab === "dev" ? /* @__PURE__ */ jsx(
+      DevTab,
+      {
+        def,
+        api: def.api,
+        events: visibleEvents,
+        eventLog,
+        onClearLog: clearEvents,
+        orientation,
+        currentVariants,
+        overrides
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden p-3", children: /* @__PURE__ */ jsx(CodeEditor, {}) })
+  ] });
+}
+function DevTab({
+  def,
+  api,
+  events,
+  eventLog,
+  onClearLog,
+  orientation,
+  currentVariants,
+  overrides
+}) {
+  const resolvedStyles = {};
+  for (const prop of def.styleProperties) {
+    resolvedStyles[prop.key] = overrides[prop.key] ?? prop.defaultValue;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: orientation === "vertical" ? "grid items-start gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]" : "",
+      children: [
+        api && /* @__PURE__ */ jsx("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: /* @__PURE__ */ jsx(ApiSection, { api, currentVariants }) }),
+        def.layoutVariants.length > 0 && /* @__PURE__ */ jsx("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: /* @__PURE__ */ jsx(VariantMatrix, { def, styles: resolvedStyles, currentVariants }) }),
+        /* @__PURE__ */ jsxs("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Emits" }),
+          events && events.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2 text-[12px]", children: events.map((ev) => (
+            // Card atom (uxm-card surface) instead of a hand-rolled div
+            // so the spec rows pick up the design system's bg/border/
+            // radius tokens and flow through Card's registry knobs.
+            // Padding + radius are tightened inline to keep the dense
+            // panel-row feel — Card's 24px default is meant for full
+            // page cards, not list rows.
+            /* @__PURE__ */ jsxs(
+              Card,
+              {
+                style: { padding: "8px 12px", borderRadius: 6 },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                    /* @__PURE__ */ jsx("code", { className: "text-[12px] font-semibold text-accent-bold", children: ev.name }),
+                    ev.payload && /* @__PURE__ */ jsxs("code", { className: "text-[11px] text-text-muted", children: [
+                      "(",
+                      ev.payload,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-text-muted leading-relaxed", children: ev.description })
+                ]
+              },
+              ev.name
+            )
+          )) }) : /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-muted leading-relaxed", children: "No event spec yet for this component. Interact with the canvas to see the live activity log below." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: orientation === "vertical" ? "min-w-0" : "", children: [
+          /* @__PURE__ */ jsx(
+            SectionHeader,
+            {
+              trailing: eventLog.length > 0 ? /* @__PURE__ */ jsx(
+                InlineAction,
+                {
+                  onClick: onClearLog,
+                  icon: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
+                  children: "Clear"
+                }
+              ) : void 0,
+              children: "Live Log"
+            }
+          ),
+          eventLog.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-text-muted leading-relaxed", children: "Interact with the preview to see events appear here." }) : (
+            // Dark-theme log surface — same hardcoded palette the CSS
+            // editor uses (#1e1e1e bg / #2a2a2a border / #d4d4d8 text).
+            // Intentionally bypasses design tokens for the same reason
+            // the code editor does: a developer-output surface should
+            // read as a developer-output surface regardless of the
+            // product's light/dark theme.
+            //
+            // Row layout: header row (time + name + target) plus an
+            // optional payload row indented to align under the event name
+            // (58px time column + 8px gap = 66px). `tabular-nums` keeps
+            // the timestamp column steady as digits change; `break-all`
+            // lets long payloads wrap rather than overflow. Single
+            // consumer for now — if a second log surface lands, extract
+            // `LogRow` then.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  backgroundColor: "#1e1e1e",
+                  border: "1px solid #2a2a2a",
+                  borderRadius: 8,
+                  padding: "6px 10px"
+                },
+                children: /* @__PURE__ */ jsx("ol", { className: "font-mono text-[11px]", style: { color: "#d4d4d8" }, children: eventLog.map((entry, i) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: "py-1.5",
+                    style: {
+                      // Thin divider in the dark palette — only between
+                      // entries, not above the first one.
+                      borderTop: i === 0 ? void 0 : "1px solid #2a2a2a"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "tabular-nums text-[10px] w-[58px] shrink-0",
+                            style: { color: "#71717a" },
+                            children: new Date(entry.ts).toLocaleTimeString(void 0, {
+                              hour12: false,
+                              hour: "2-digit",
+                              minute: "2-digit",
+                              second: "2-digit"
+                            })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "font-semibold", style: { color: "#a5e8c2" }, children: entry.name }),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: "ml-auto text-[10px] shrink-0",
+                            style: { color: "#71717a" },
+                            children: [
+                              "<",
+                              entry.target,
+                              ">"
+                            ]
+                          }
+                        )
+                      ] }),
+                      entry.payload && entry.payload !== "{}" && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "pl-[66px] mt-0.5 break-all",
+                          style: { color: "#d4d4d8" },
+                          children: entry.payload
+                        }
+                      )
+                    ]
+                  },
+                  entry.id
+                )) })
+              }
+            )
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function renderEditor(control, args) {
+  const { label, value, onChange, prop } = args;
+  switch (control) {
+    case "color":
+      return /* @__PURE__ */ jsx(ColorPicker, { label, value, onChange });
+    case "number":
+      return /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          label,
+          value,
+          onChange,
+          min: prop.min,
+          max: prop.max,
+          step: prop.step,
+          unit: prop.unit
+        }
+      );
+    case "slider":
+      return /* @__PURE__ */ jsx(
+        SliderInput,
+        {
+          label,
+          value,
+          onChange,
+          min: prop.min ?? 0,
+          max: prop.max ?? 100,
+          step: prop.step ?? 1,
+          unit: prop.unit
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx(
+        SelectInput,
+        {
+          label,
+          value,
+          onChange,
+          options: (prop.options ?? []).map((o) => ({ value: o, label: o }))
+        }
+      );
+    case "toggle":
+      return /* @__PURE__ */ jsx(ToggleInput, { label, value, onChange });
+    case "text":
+      return /* @__PURE__ */ jsx(TextInput, { label, value, onChange });
+  }
+}
+function PropertyRow({
+  cascadeCount,
+  onCascade,
+  category,
+  propLabel,
+  synced,
+  justMatched,
+  isOverridden,
+  onReset,
+  children
+}) {
+  const resetIconStyle = {
+    ["--uxm-icon-button-size"]: "16px",
+    color: "var(--color-text-subtle)",
+    position: "absolute",
+    right: 0,
+    top: "50%",
+    transform: "translateY(-50%)"
+  };
+  const resetButton = isOverridden ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onReset,
+      title: `Reset ${propLabel} to default`,
+      "aria-label": `Reset ${propLabel} to default`,
+      style: resetIconStyle,
+      children: /* @__PURE__ */ jsx(Icon, { glyph: "refresh", size: 12, strokeWidth: 2.25, "aria-hidden": true })
+    }
+  ) : null;
+  if (cascadeCount === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "relative pr-5", children: [
+      children,
+      resetButton
+    ] });
+  }
+  const hideLink = synced && !justMatched;
+  return /* @__PURE__ */ jsxs("div", { className: "pl-3 -ml-3 border-l-2 border-accent-bold/30", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative pr-5", children: [
+      children,
+      resetButton
+    ] }),
+    !hideLink && (justMatched ? (
+      // The success-state confirmation is intentionally left as a plain
+      // span — it's a one-off transient state ("just matched"), not a
+      // tappable action, so it doesn't fit InlineAction's button shape.
+      /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 text-[10px] font-medium text-accent-bold", children: [
+        /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 10, strokeWidth: 3 }),
+        "Matched in ",
+        cascadeCount,
+        " other ",
+        category
+      ] })
+    ) : /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsxs(
+      InlineAction,
+      {
+        onClick: onCascade,
+        title: `Apply "${propLabel}" to ${cascadeCount} other ${category}`,
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "arrow-down", strokeWidth: 2.5 }),
+        children: [
+          "Match in ",
+          cascadeCount,
+          " other ",
+          category
+        ]
+      }
+    ) }))
+  ] });
+}
+function ApiSection({
+  api,
+  currentVariants
+}) {
+  const importLine = formatImport(api);
+  const usageSnippet = formatUsage(api, currentVariants);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "API" }),
+    /* @__PURE__ */ jsx(CodeBlock, { label: "Import", code: importLine }),
+    api.props.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle", children: "Props" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: api.props.map((p) => (
+        // Card atom for each prop row — same treatment as the
+        // Emits cards so the two sections read as one family.
+        /* @__PURE__ */ jsxs(Card, { style: { padding: "8px 12px", borderRadius: 6 }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+            /* @__PURE__ */ jsx("code", { className: "text-[12px] font-semibold text-accent-bold", children: p.name }),
+            p.required && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-warm", children: "required" }),
+            /* @__PURE__ */ jsx("code", { className: "text-[11px] text-text-muted break-all", children: p.type })
+          ] }),
+          p.defaultValue !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 text-[11px]", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-text-subtle", children: "default: " }),
+            /* @__PURE__ */ jsx("code", { className: "text-text", children: p.defaultValue })
+          ] }),
+          p.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-text-muted leading-relaxed", children: p.description })
+        ] }, p.name)
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(CodeBlock, { label: "Usage", code: usageSnippet }) })
+  ] });
+}
+function CodeBlock({ label, code }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle", children: label }),
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: "font-mono text-[11px] whitespace-pre-wrap break-all",
+        style: {
+          backgroundColor: "#1e1e1e",
+          border: "1px solid #2a2a2a",
+          borderRadius: 8,
+          padding: "8px 10px",
+          color: "#d4d4d8",
+          margin: 0
+        },
+        children: code
+      }
+    )
+  ] });
+}
+function formatImport(api) {
+  const names = Array.isArray(api.importNames) ? api.importNames.join(", ") : api.importNames;
+  return `import { ${names} } from "${api.importPath}";`;
+}
+function formatUsage(api, variants) {
+  const name = Array.isArray(api.importNames) ? api.importNames[0] : api.importNames;
+  const variantProps = Object.entries(variants).filter(([k, v]) => k !== "state" && v !== "default").map(([k, v]) => typeof v === "string" ? `${k}="${v}"` : `${k}={${v}}`);
+  const attrs = variantProps.length > 0 ? " " + variantProps.join(" ") : "";
+  return `<${name}${attrs}>
+  \u2026
+</${name}>`;
+}
+function VariantMatrix({
+  def,
+  styles,
+  currentVariants
+}) {
+  const Preview = previewMap[def.id];
+  const shell = usePreviewShell();
+  if (!Preview) {
+    return null;
+  }
+  const MATRIX_AXIS_OPTION_CAP = 8;
+  const gateLocks = {};
+  for (const v of def.layoutVariants) {
+    const showWhen = v.showWhen;
+    if (!showWhen) continue;
+    for (const [gateKey, gateVal] of Object.entries(showWhen)) {
+      if (!(gateKey in gateLocks)) gateLocks[gateKey] = gateVal;
+    }
+  }
+  const expandable = def.layoutVariants.filter(
+    (v) => v.options.length <= MATRIX_AXIS_OPTION_CAP && !(v.key in gateLocks)
+  );
+  if (expandable.length === 0) {
+    return null;
+  }
+  const [axisX, axisY] = expandable;
+  const baseVariants = {};
+  for (const v of def.layoutVariants) {
+    baseVariants[v.key] = gateLocks[v.key] ?? currentVariants[v.key] ?? v.defaultValue;
+  }
+  const xs = axisX.options;
+  const ys = axisY ? axisY.options : null;
+  const renderCell = (cellVariants, caption) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded border border-border bg-card overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex items-center justify-center p-3",
+            style: {
+              // Read-only thumbnail. Clip wide atoms so they don't blow up
+              // the cell width; centred so small atoms stay readable.
+              //
+              // Sizing: minHeight gives small atoms (icon buttons, chips) a
+              // consistent visual weight; maxHeight caps tall atoms (Card,
+              // LifecycleNodeCard) so a single oversized atom can't make
+              // every row in a 2D grid 200px tall. Scale 0.6 is the sweet
+              // spot for the atoms we ship today — wide ones (SideFlexpane,
+              // AppSidebar) still clip, but everything fits the cell width
+              // budget at typical panel sizes.
+              pointerEvents: "none",
+              minHeight: 80,
+              maxHeight: 140,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "uxm-matrix-cell-preview",
+                style: { transform: "scale(0.6)", transformOrigin: "center" },
+                children: /* @__PURE__ */ jsx(
+                  Preview,
+                  {
+                    styles,
+                    variants: cellVariants,
+                    componentId: def.id,
+                    shell
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 px-2 py-1 text-[10px] font-medium text-text-muted truncate text-center", children: caption })
+      ]
+    },
+    caption
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(SectionHeader, { children: "Variant Matrix" }),
+    /* @__PURE__ */ jsx("div", { className: "-mx-5 overflow-x-auto px-5", children: ys ? (
+      // 2D grid: ys as rows, xs as columns. Each row has a leading
+      // row-label cell so the user can read both axes without
+      // hovering captions. `minmax(120px, 1fr)` gives cells a
+      // legible floor — narrower than that and atoms (esp. Card,
+      // StatCard, button-with-icon) lose meaningful detail even at
+      // 0.6 scale.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid gap-1.5",
+          style: {
+            gridTemplateColumns: `auto repeat(${xs.length}, minmax(120px, 1fr))`,
+            minWidth: "min-content"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", {}),
+            xs.map((x) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-center truncate",
+                children: x.label
+              },
+              `xh-${x.value}`
+            )),
+            ys.map((y) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+              /* @__PURE__ */ jsx("div", { className: "self-center pr-1 text-[10px] font-semibold uppercase tracking-wider text-text-subtle text-right truncate", children: y.label }),
+              xs.map((x) => {
+                const cellV = {
+                  ...baseVariants,
+                  [axisX.key]: x.value,
+                  [axisY.key]: y.value
+                };
+                return renderCell(cellV, `${x.label} / ${y.label}`);
+              })
+            ] }, `row-${y.value}`))
+          ]
+        }
+      )
+    ) : (
+      // 1D row of thumbnails. `auto-fit` lets it reflow to multiple
+      // rows on narrow panes — when the parent is wide enough we
+      // get one row; when it isn't, cells wrap rather than scroll.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid gap-1.5",
+          style: {
+            gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))"
+          },
+          children: xs.map((x) => {
+            const cellV = {
+              ...baseVariants,
+              [axisX.key]: x.value
+            };
+            return renderCell(cellV, x.label);
+          })
+        }
+      )
+    ) })
+  ] });
+}
+export {
+  PropertiesPanel
+};
+//# sourceMappingURL=properties-panel.js.map