@viax.io/uxm 4.38.0 → 4.40.0

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

@@ -1,873 +0,0 @@
-"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);
-var properties_panel_exports = {};
-__export(properties_panel_exports, {
-  PropertiesPanel: () => PropertiesPanel
-});
-module.exports = __toCommonJS(properties_panel_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ui = require("../../ui/index.cjs");
-var import_ui2 = require("../../ui/index.cjs");
-var import_ui3 = require("../../ui/index.cjs");
-var import_ui4 = require("../../ui/index.cjs");
-var import_ui5 = require("../../ui/index.cjs");
-var import_ui6 = require("../../ui/index.cjs");
-var import_code_editor = require("../editors/code-editor.cjs");
-var import_color_picker = require("../editors/color-picker.cjs");
-var import_number_input = require("../editors/number-input.cjs");
-var import_select_input = require("../editors/select-input.cjs");
-var import_slider_input = require("../editors/slider-input.cjs");
-var import_text_input = require("../editors/text-input.cjs");
-var import_toggle_input = require("../editors/toggle-input.cjs");
-var import_context = require("../lib/context.cjs");
-var import_preview_shell = require("../lib/preview-shell.cjs");
-var import_registry = require("../lib/registry/index.cjs");
-var import_canvas = require("./canvas.cjs");
-var import_wcag_panel = require("./wcag-panel.cjs");
-function PropertiesPanel({
-  orientation = "horizontal",
-  onToggleOrientation
-}) {
-  const [tab, setTab] = (0, import_react.useState)("visual");
-  const {
-    selectedId,
-    getOverrides,
-    setOverride,
-    resetOverride,
-    resetOverrides,
-    getCurrentVariants,
-    setVariant,
-    eventLog,
-    clearEvents
-  } = (0, import_context.useUxm)();
-  const def = (0, import_registry.getComponentDef)(selectedId);
-  const overrides = getOverrides(selectedId);
-  const currentVariants = getCurrentVariants();
-  const [syncedKeys, setSyncedKeys] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  const [justMatchedKey, setJustMatchedKey] = (0, import_react.useState)(null);
-  const justMatchedTimer = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    setSyncedKeys(/* @__PURE__ */ new Set());
-    setJustMatchedKey(null);
-    if (justMatchedTimer.current) {
-      clearTimeout(justMatchedTimer.current);
-      justMatchedTimer.current = null;
-    }
-  }, [selectedId]);
-  (0, import_react.useEffect)(() => () => {
-    if (justMatchedTimer.current) clearTimeout(justMatchedTimer.current);
-  }, []);
-  const peers = (0, import_react.useMemo)(
-    () => def ? import_registry.registry.filter((c) => c.category === def.category && c.id !== def.id) : [],
-    [def]
-  );
-  const peersByKey = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("aside", { className: `flex flex-col overflow-hidden w-full h-full ${orientation === "horizontal" ? "border-l" : "border-t"} border-border bg-card`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sticky top-0 z-10 border-b border-border px-5 py-3 bg-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ui5.SectionHeader,
-        {
-          trailing: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
-            onToggleOrientation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ui3.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__ */ (0, import_jsx_runtime.jsx)(
-                  import_ui2.Icon,
-                  {
-                    glyph: orientation === "horizontal" ? "dock-bottom" : "dock-right",
-                    size: 14
-                  }
-                )
-              }
-            ),
-            hasOverrides && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui4.InlineAction, { onClick: () => resetOverrides(selectedId), children: "Reset all" })
-          ] }),
-          children: "Properties"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ui6.Tabs,
-        {
-          className: "w-full",
-          value: tab,
-          onChange: (v) => setTab(v),
-          options: [
-            {
-              value: "visual",
-              label: "Visual",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "list", size: 12 })
-            },
-            {
-              value: "dev",
-              label: "Dev",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "bolt", size: 12 })
-            },
-            {
-              value: "code",
-              label: "CSS",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "code", size: 12 })
-            }
-          ]
-        }
-      )
-    ] }),
-    tab === "visual" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui5.SectionHeader, { children: visibleVariants.length === 1 ? "Variant" : "Variants" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { "data-variant-key": variant.key, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_select_input.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: sub.scope }),
-                      sub.current && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--color-text-subtle)" }, children: "\xB7" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, color: "var(--color-text-strong)" }, children: sub.current })
-                      ] })
-                    ] }) : null;
-                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_ui5.SectionHeader,
-                      {
-                        subtitle,
-                        trailing: hasSectionOverrides && sectionGroups.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          import_ui4.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__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
-                            children: "Reset section"
-                          }
-                        ) : void 0,
-                        children: sectionTitleFor(slug)
-                      }
-                    );
-                  })(),
-                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: orientation === "vertical" ? "min-w-0 col-span-2" : "", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wcag_panel.WcagPanel, { def }) })
-        ]
-      }
-    ) }) : tab === "dev" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      DevTab,
-      {
-        def,
-        api: def.api,
-        events: visibleEvents,
-        eventLog,
-        onClearLog: clearEvents,
-        orientation,
-        currentVariants,
-        overrides
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 overflow-hidden p-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_code_editor.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 overflow-y-auto px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiSection, { api, currentVariants }) }),
-        def.layoutVariants.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariantMatrix, { def, styles: resolvedStyles, currentVariants }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: orientation === "vertical" ? "min-w-0" : "mb-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui5.SectionHeader, { children: "Emits" }),
-          events && events.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
-              import_ui.Card,
-              {
-                style: { padding: "8px 12px", borderRadius: 6 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[12px] font-semibold text-accent-bold", children: ev.name }),
-                    ev.payload && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("code", { className: "text-[11px] text-text-muted", children: [
-                      "(",
-                      ev.payload,
-                      ")"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-[11px] text-text-muted leading-relaxed", children: ev.description })
-                ]
-              },
-              ev.name
-            )
-          )) }) : /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: orientation === "vertical" ? "min-w-0" : "", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ui5.SectionHeader,
-            {
-              trailing: eventLog.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_ui4.InlineAction,
-                {
-                  onClick: onClearLog,
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "refresh", strokeWidth: 2.25, "aria-hidden": true }),
-                  children: "Clear"
-                }
-              ) : void 0,
-              children: "Live Log"
-            }
-          ),
-          eventLog.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                style: {
-                  backgroundColor: "#1e1e1e",
-                  border: "1px solid #2a2a2a",
-                  borderRadius: 8,
-                  padding: "6px 10px"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "font-mono text-[11px]", style: { color: "#d4d4d8" }, children: eventLog.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline gap-2", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold", style: { color: "#a5e8c2" }, children: entry.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "span",
-                          {
-                            className: "ml-auto text-[10px] shrink-0",
-                            style: { color: "#71717a" },
-                            children: [
-                              "<",
-                              entry.target,
-                              ">"
-                            ]
-                          }
-                        )
-                      ] }),
-                      entry.payload && entry.payload !== "{}" && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_color_picker.ColorPicker, { label, value, onChange });
-    case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_number_input.NumberInput,
-        {
-          label,
-          value,
-          onChange,
-          min: prop.min,
-          max: prop.max,
-          step: prop.step,
-          unit: prop.unit
-        }
-      );
-    case "slider":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_slider_input.SliderInput,
-        {
-          label,
-          value,
-          onChange,
-          min: prop.min ?? 0,
-          max: prop.max ?? 100,
-          step: prop.step ?? 1,
-          unit: prop.unit
-        }
-      );
-    case "select":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_select_input.SelectInput,
-        {
-          label,
-          value,
-          onChange,
-          options: (prop.options ?? []).map((o) => ({ value: o, label: o }))
-        }
-      );
-    case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_toggle_input.ToggleInput, { label, value, onChange });
-    case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text_input.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__ */ (0, import_jsx_runtime.jsx)(
-    import_ui3.IconButton,
-    {
-      onClick: onReset,
-      title: `Reset ${propLabel} to default`,
-      "aria-label": `Reset ${propLabel} to default`,
-      style: resetIconStyle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "refresh", size: 12, strokeWidth: 2.25, "aria-hidden": true })
-    }
-  ) : null;
-  if (cascadeCount === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative pr-5", children: [
-      children,
-      resetButton
-    ] });
-  }
-  const hideLink = synced && !justMatched;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pl-3 -ml-3 border-l-2 border-accent-bold/30", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("span", { className: "mt-1.5 inline-flex items-center gap-1 text-[10px] font-medium text-accent-bold", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "check", size: 10, strokeWidth: 3 }),
-        "Matched in ",
-        cascadeCount,
-        " other ",
-        category
-      ] })
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_ui4.InlineAction,
-      {
-        onClick: onCascade,
-        title: `Apply "${propLabel}" to ${cascadeCount} other ${category}`,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.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__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui5.SectionHeader, { children: "API" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeBlock, { label: "Import", code: importLine }),
-    api.props.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle", children: "Props" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_ui.Card, { style: { padding: "8px 12px", borderRadius: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[12px] font-semibold text-accent-bold", children: p.name }),
-            p.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] font-semibold uppercase tracking-wider text-warm", children: "required" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-[11px] text-text-muted break-all", children: p.type })
-          ] }),
-          p.defaultValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-0.5 text-[11px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-text-subtle", children: "default: " }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "text-text", children: p.defaultValue })
-          ] }),
-          p.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-[11px] text-text-muted leading-relaxed", children: p.description })
-        ] }, p.name)
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeBlock, { label: "Usage", code: usageSnippet }) })
-  ] });
-}
-function CodeBlock({ label, code }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.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 = import_canvas.previewMap[def.id];
-  const shell = (0, import_preview_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__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: "rounded border border-border bg-card overflow-hidden",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                className: "uxm-matrix-cell-preview",
-                style: { transform: "scale(0.6)", transformOrigin: "center" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  Preview,
-                  {
-                    styles,
-                    variants: cellVariants,
-                    componentId: def.id,
-                    shell
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui5.SectionHeader, { children: "Variant Matrix" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: "grid gap-1.5",
-          style: {
-            gridTemplateColumns: `auto repeat(${xs.length}, minmax(120px, 1fr))`,
-            minWidth: "min-content"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-            xs.map((x) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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);
-          })
-        }
-      )
-    ) })
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PropertiesPanel
-});
-//# sourceMappingURL=properties-panel.cjs.map