@viax.io/uxm 4.38.0 → 4.40.0

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

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card } from "../../../ui/index.js";
+import { Icon } from "../../../ui/index.js";
+import { InlineAction } from "../../../ui/index.js";
+import { SectionHeader } from "../../../ui/index.js";
+import { VariantMatrix } from "./variant-matrix.js";
+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 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}>`;
+}
+export {
+  DevTab
+};
+//# sourceMappingURL=dev-tab.js.map

package/dist/studio/shell/properties-panel/dev-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/studio/shell/properties-panel/dev-tab.tsx"],"sourcesContent":["import { Card } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InlineAction } from '@/ui';\nimport { SectionHeader } from '@/ui';\n\nimport { VariantMatrix } from './variant-matrix';\n\nimport type { LoggedEvent } from '../../lib/context';\nimport type { ComponentDef, StyleOverrides } from '../../lib/types';\n\n/**\n * Events tab — Storybook-style API + activity panel. Two sections:\n *\n *   1. EMITS — the static event spec from the registry. Reads like\n *      a method-signature table: each row is one event name, its\n *      payload, and a short description of when it fires.\n *   2. LIVE LOG — runtime capture from the canvas. Updated whenever\n *      the user interacts with the rendered atom. Capped at 200\n *      entries (see EVENT_LOG_LIMIT). Latest at top.\n *\n * The capture itself lives in canvas.tsx — we just render what's in\n * the context-managed `eventLog` here. That separation keeps the\n * Properties pane independent of the rendered atom's DOM tree.\n */\nexport function DevTab({\n  def,\n  api,\n  events,\n  eventLog,\n  onClearLog,\n  orientation,\n  currentVariants,\n  overrides,\n}: {\n  def: ComponentDef;\n  api: ComponentDef['api'];\n  events: ComponentDef['events'];\n  eventLog: LoggedEvent[];\n  onClearLog: () => void;\n  orientation: 'horizontal' | 'vertical';\n  currentVariants: Record<string, string | number | boolean>;\n  overrides: StyleOverrides;\n}) {\n  // Resolved styles for the variant matrix — overrides win over\n  // defaults, same logic the canvas applies. Reused by every cell so\n  // they all reflect the user's current theming, just with different\n  // variant values locked in.\n  const resolvedStyles: Record<string, string | number | boolean> = {};\n  for (const prop of def.styleProperties) {\n    resolvedStyles[prop.key] = overrides[prop.key] ?? prop.defaultValue;\n  }\n  return (\n    <div className=\"flex-1 overflow-y-auto px-5 py-4\">\n      {/* Bottom-dock (`orientation === \"vertical\"`) gives the pane the\n          full canvas width. Match the Visual tab's auto-fit grid so\n          API / Emits / Live Log sit side-by-side instead of stacking.\n          Same `mb-6` ↔ `min-w-0` swap as the Visual tab: grid `gap-y-4`\n          handles spacing in grid mode, so the section's own bottom\n          margin would double-space wrapped rows. */}\n      <div\n        className={\n          orientation === 'vertical'\n            ? 'grid items-start gap-x-6 gap-y-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]'\n            : ''\n        }\n      >\n      {/* API section — renders when the registry entry carries an\n          `api` slot. Built first because it's the developer's \"how do\n          I use this?\" entry point; Emits + Live Log are the runtime\n          observation layer below. */}\n      {api && (\n        <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n          <ApiSection api={api} currentVariants={currentVariants} />\n        </div>\n      )}\n\n      {/* Variant Matrix — renders only when the atom has variants\n          (atoms without any layoutVariants would just show a single\n          duplicate of the canvas preview, which is noise). */}\n      {def.layoutVariants.length > 0 && (\n        <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n          <VariantMatrix def={def} styles={resolvedStyles} currentVariants={currentVariants} />\n        </div>\n      )}\n\n      <div className={orientation === 'vertical' ? 'min-w-0' : 'mb-6'}>\n        <SectionHeader>Emits</SectionHeader>\n        {events && events.length > 0 ? (\n          <div className=\"space-y-2 text-[12px]\">\n            {events.map((ev) => (\n              // Card atom (uxm-card surface) instead of a hand-rolled div\n              // so the spec rows pick up the design system's bg/border/\n              // radius tokens and flow through Card's registry knobs.\n              // Padding + radius are tightened inline to keep the dense\n              // panel-row feel — Card's 24px default is meant for full\n              // page cards, not list rows.\n              <Card\n                key={ev.name}\n                style={{ padding: '8px 12px', borderRadius: 6 }}\n              >\n                <div className=\"flex items-baseline gap-2\">\n                  <code className=\"text-[12px] font-semibold text-accent-bold\">\n                    {ev.name}\n                  </code>\n                  {ev.payload && (\n                    <code className=\"text-[11px] text-text-muted\">\n                      ({ev.payload})\n                    </code>\n                  )}\n                </div>\n                <p className=\"mt-1 text-[11px] text-text-muted leading-relaxed\">\n                  {ev.description}\n                </p>\n              </Card>\n            ))}\n          </div>\n        ) : (\n          <p className=\"text-[12px] text-text-muted leading-relaxed\">\n            No event spec yet for this component. Interact with the canvas\n            to see the live activity log below.\n          </p>\n        )}\n      </div>\n\n      <div className={orientation === 'vertical' ? 'min-w-0' : ''}>\n        <SectionHeader\n          trailing={\n            eventLog.length > 0 ? (\n              <InlineAction\n                onClick={onClearLog}\n                icon={<Icon glyph=\"refresh\" strokeWidth={2.25} aria-hidden />}\n              >\n                Clear\n              </InlineAction>\n            ) : undefined\n          }\n        >\n          Live Log\n        </SectionHeader>\n        {eventLog.length === 0 ? (\n          <p className=\"text-[12px] text-text-muted leading-relaxed\">\n            Interact with the preview to see events appear here.\n          </p>\n        ) : (\n          // Dark-theme log surface — same hardcoded palette the CSS\n          // editor uses (#1e1e1e bg / #2a2a2a border / #d4d4d8 text).\n          // Intentionally bypasses design tokens for the same reason\n          // the code editor does: a developer-output surface should\n          // read as a developer-output surface regardless of the\n          // product's light/dark theme.\n          //\n          // Row layout: header row (time + name + target) plus an\n          // optional payload row indented to align under the event name\n          // (58px time column + 8px gap = 66px). `tabular-nums` keeps\n          // the timestamp column steady as digits change; `break-all`\n          // lets long payloads wrap rather than overflow. Single\n          // consumer for now — if a second log surface lands, extract\n          // `LogRow` then.\n          <div\n            style={{\n              backgroundColor: '#1e1e1e',\n              border: '1px solid #2a2a2a',\n              borderRadius: 8,\n              padding: '6px 10px',\n            }}\n          >\n            <ol className=\"font-mono text-[11px]\" style={{ color: '#d4d4d8' }}>\n              {eventLog.map((entry, i) => (\n                <li\n                  key={entry.id}\n                  className=\"py-1.5\"\n                  style={{\n                    // Thin divider in the dark palette — only between\n                    // entries, not above the first one.\n                    borderTop: i === 0 ? undefined : '1px solid #2a2a2a',\n                  }}\n                >\n                  <div className=\"flex items-baseline gap-2\">\n                    <span\n                      className=\"tabular-nums text-[10px] w-[58px] shrink-0\"\n                      style={{ color: '#71717a' }}\n                    >\n                      {new Date(entry.ts).toLocaleTimeString(undefined, {\n                        hour12: false,\n                        hour: '2-digit',\n                        minute: '2-digit',\n                        second: '2-digit',\n                      })}\n                    </span>\n                    <span className=\"font-semibold\" style={{ color: '#a5e8c2' }}>\n                      {entry.name}\n                    </span>\n                    <span\n                      className=\"ml-auto text-[10px] shrink-0\"\n                      style={{ color: '#71717a' }}\n                    >\n                      &lt;{entry.target}&gt;\n                    </span>\n                  </div>\n                  {entry.payload && entry.payload !== '{}' && (\n                    <div\n                      className=\"pl-[66px] mt-0.5 break-all\"\n                      style={{ color: '#d4d4d8' }}\n                    >\n                      {entry.payload}\n                    </div>\n                  )}\n                </li>\n              ))}\n            </ol>\n          </div>\n        )}\n      </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Dev tab — API section. Shows the developer-facing component API:\n *\n *   1. **Import** — copy-button block with the exact `import { ... }` line.\n *   2. **Props** — table of props with type / required / default / desc.\n *   3. **Usage** — JSX snippet seeded from the current variant selection\n *      (so what's shown matches what's previewed).\n *\n * Authored alongside the atom in the registry (`api` slot on\n * `ComponentDef`). A future build-time extractor could populate the\n * same slot from TypeScript interface declarations — the consumer\n * shape stays the same.\n *\n * Uses the same dark surface as the CSS editor for the code blocks\n * (#1e1e1e / #2a2a2a / #d4d4d8). Reads as \"developer output\" rather\n * than \"themable card content\" — matches what the user expects from\n * Storybook's Docs addon.\n */\nfunction ApiSection({\n  api,\n  currentVariants,\n}: {\n  api: NonNullable<ComponentDef['api']>;\n  currentVariants: Record<string, string | number | boolean>;\n}) {\n  const importLine = formatImport(api);\n  const usageSnippet = formatUsage(api, currentVariants);\n  return (\n    <div>\n      <SectionHeader>API</SectionHeader>\n      <CodeBlock label=\"Import\" code={importLine} />\n      {api.props.length > 0 && (\n        <div className=\"mt-4\">\n          <div className=\"mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle\">\n            Props\n          </div>\n          <div className=\"space-y-2\">\n            {api.props.map((p) => (\n              // Card atom for each prop row — same treatment as the\n              // Emits cards so the two sections read as one family.\n              <Card key={p.name} style={{ padding: '8px 12px', borderRadius: 6 }}>\n                <div className=\"flex items-baseline gap-2 flex-wrap\">\n                  <code className=\"text-[12px] font-semibold text-accent-bold\">\n                    {p.name}\n                  </code>\n                  {p.required && (\n                    <span className=\"text-[9px] font-semibold uppercase tracking-wider text-warm\">\n                      required\n                    </span>\n                  )}\n                  <code className=\"text-[11px] text-text-muted break-all\">\n                    {p.type}\n                  </code>\n                </div>\n                {p.defaultValue !== undefined && (\n                  <div className=\"mt-0.5 text-[11px]\">\n                    <span className=\"text-text-subtle\">default: </span>\n                    <code className=\"text-text\">{p.defaultValue}</code>\n                  </div>\n                )}\n                {p.description && (\n                  <p className=\"mt-1 text-[11px] text-text-muted leading-relaxed\">\n                    {p.description}\n                  </p>\n                )}\n              </Card>\n            ))}\n          </div>\n        </div>\n      )}\n      <div className=\"mt-4\">\n        <CodeBlock label=\"Usage\" code={usageSnippet} />\n      </div>\n    </div>\n  );\n}\n\n/**\n * Compact dark-surface code-block for the API section — used for both\n * the import line and the usage snippet. Same hardcoded VS Code-ish\n * palette as the Live Log: a developer-output surface should read\n * the same regardless of the product's light/dark theme.\n */\nfunction CodeBlock({ label, code }: { label: string; code: string }) {\n  return (\n    <div>\n      <div className=\"mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-text-subtle\">\n        {label}\n      </div>\n      <pre\n        className=\"font-mono text-[11px] whitespace-pre-wrap break-all\"\n        style={{\n          backgroundColor: '#1e1e1e',\n          border: '1px solid #2a2a2a',\n          borderRadius: 8,\n          padding: '8px 10px',\n          color: '#d4d4d8',\n          margin: 0,\n        }}\n      >\n        {code}\n      </pre>\n    </div>\n  );\n}\n\n/** Build the `import { X } from \"path\"` line from the api slot. */\nfunction formatImport(api: NonNullable<ComponentDef['api']>): string {\n  const names = Array.isArray(api.importNames)\n    ? api.importNames.join(', ')\n    : api.importNames;\n  return `import { ${names} } from \"${api.importPath}\";`;\n}\n\n/**\n * Build a JSX usage snippet from the api slot + the user's current\n * variant selection in the editor. Variants flow in as props, which\n * matches how the atoms actually consume them (Chip's `mode`, Slider's\n * `mode`, button family's nothing — variants are visual previews).\n *\n * Variants whose value equals the canonical default (\"default\" state,\n * etc.) are omitted to keep the snippet readable. The user can always\n * see them in the Props table.\n */\nfunction formatUsage(\n  api: NonNullable<ComponentDef['api']>,\n  variants: Record<string, string | number | boolean>,\n): string {\n  const name = Array.isArray(api.importNames) ? api.importNames[0] : api.importNames;\n  const variantProps = Object.entries(variants)\n    // Skip the boilerplate-y \"state\" variant — it's a visual preview\n    // selector in the editor, not a real prop on most atoms.\n    .filter(([k, v]) => k !== 'state' && v !== 'default')\n    .map(([k, v]) => (typeof v === 'string' ? `${k}=\"${v}\"` : `${k}={${v}}`));\n  const attrs = variantProps.length > 0 ? ' ' + variantProps.join(' ') : '';\n  return `<${name}${attrs}>\\n  …\\n</${name}>`;\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,398 @@
+"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_code_editor = require("../../editors/code-editor.cjs");
+var import_select_input = require("../../editors/select-input.cjs");
+var import_context = require("../../lib/context.cjs");
+var import_registry = require("../../lib/registry/index.cjs");
+var import_wcag_panel = require("../wcag-panel.cjs");
+var import_dev_tab = require("./dev-tab.cjs");
+var import_property_row = require("./property-row.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_ui4.SectionHeader,
+        {
+          trailing: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+            onToggleOrientation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ui2.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_ui.Icon,
+                  {
+                    glyph: orientation === "horizontal" ? "dock-bottom" : "dock-right",
+                    size: 14
+                  }
+                )
+              }
+            ),
+            hasOverrides && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.InlineAction, { onClick: () => resetOverrides(selectedId), children: "Reset all" })
+          ] }),
+          children: "Properties"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui5.Tabs,
+        {
+          className: "w-full",
+          value: tab,
+          onChange: (v) => setTab(v),
+          options: [
+            {
+              value: "visual",
+              label: "Visual",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "list", size: 12 })
+            },
+            {
+              value: "dev",
+              label: "Dev",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "bolt", size: 12 })
+            },
+            {
+              value: "code",
+              label: "CSS",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.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_ui4.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_ui4.SectionHeader,
+                      {
+                        subtitle,
+                        trailing: hasSectionOverrides && sectionGroups.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_ui3.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_ui.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 = (0, import_property_row.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)(
+                      import_property_row.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)(
+      import_dev_tab.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, {}) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PropertiesPanel
+});
+//# sourceMappingURL=index.cjs.map