@viax.io/uxm 4.36.0

package/dist/studio/editors/code-editor.js

@@ -0,0 +1,492 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo
+} from "react";
+import { Icon } from "../../ui/index.js";
+import { useUxm } from "../lib/context.js";
+import { getComponentDef } from "../lib/registry/index.js";
+function toKebab(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function stylesToCSS(componentId, props, resolved) {
+  const lines = [];
+  lines.push(`.${componentId} {`);
+  for (const prop of props) {
+    const val = resolved[prop.key];
+    if (typeof val === "boolean") {
+      lines.push(`  ${toKebab(prop.key)}: ${val ? "true" : "false"};`);
+    } else if (typeof val === "number") {
+      lines.push(`  ${toKebab(prop.key)}: ${val}${prop.unit ?? ""};`);
+    } else {
+      lines.push(`  ${toKebab(prop.key)}: ${val};`);
+    }
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+const PROP_LINE_REGEX = /^\s*([\w-]+)\s*:\s*(.+?)\s*;?\s*$/;
+function parseCSS(css, props) {
+  const values = {};
+  const linesByPropKey = /* @__PURE__ */ new Set();
+  const propMap = new Map(props.map((p) => [toKebab(p.key), p]));
+  for (const line of css.split("\n")) {
+    const m = line.match(PROP_LINE_REGEX);
+    if (!m) continue;
+    const [, name, rawVal] = m;
+    const prop = propMap.get(name);
+    if (!prop) continue;
+    linesByPropKey.add(prop.key);
+    if (prop.control === "toggle") {
+      values[prop.key] = rawVal === "true";
+    } else if (prop.control === "number" || prop.control === "slider") {
+      const num = parseFloat(rawVal);
+      if (!isNaN(num)) values[prop.key] = num;
+    } else {
+      values[prop.key] = rawVal;
+    }
+  }
+  return { values, linesByPropKey };
+}
+function classifyLine(line, propMap) {
+  const trimmed = line.trim();
+  if (!trimmed) return "decoration";
+  if (line.match(/^(\.[a-z][\w-]*)\s*\{\s*$/)) return "selector-open";
+  if (trimmed === "}") return "brace-close";
+  const m = line.match(PROP_LINE_REGEX);
+  if (!m) return "decoration";
+  const [, name, rawVal] = m;
+  const prop = propMap.get(name);
+  if (!prop) return "unknown-prop";
+  if (prop.control === "number" || prop.control === "slider") {
+    if (isNaN(parseFloat(rawVal))) return "invalid-value";
+  }
+  if (prop.control === "toggle") {
+    const t = rawVal.trim();
+    if (t !== "true" && t !== "false") return "invalid-value";
+  }
+  return "valid-prop";
+}
+function countErrors(code, propMap) {
+  let n = 0;
+  for (const line of code.split("\n")) {
+    const k = classifyLine(line, propMap);
+    if (k === "unknown-prop" || k === "invalid-value") n++;
+  }
+  return n;
+}
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function span(color, text) {
+  return `<span style="color:${color}">${esc(text)}</span>`;
+}
+function highlightLine(line) {
+  const selMatch = line.match(/^(\.[a-z][\w-]*)\s*(\{)\s*$/);
+  if (selMatch) {
+    return span("#7dd3fc", selMatch[1]) + " " + span("#6b7280", selMatch[2]);
+  }
+  if (line.trim() === "}") {
+    return span("#6b7280", "}");
+  }
+  const propMatch = line.match(/^(\s+)([\w-]+)(\s*:\s*)(.+?)(;)\s*$/);
+  if (propMatch) {
+    const [, indent, prop, colon, val, semi] = propMatch;
+    let coloredVal;
+    if (/^#[0-9a-fA-F]{3,8}$/.test(val.trim())) {
+      coloredVal = span("#fbbf24", val.trim());
+    } else if (/^-?\d+(?:\.\d+)?(?:px|rem|em|%|s|ms)$/.test(val.trim())) {
+      coloredVal = span("#34d399", val.trim());
+    } else if (/^-?\d+(?:\.\d+)?$/.test(val.trim())) {
+      coloredVal = span("#34d399", val.trim());
+    } else if (val.trim() === "true" || val.trim() === "false") {
+      coloredVal = span("#fb923c", val.trim());
+    } else {
+      coloredVal = span("#e5e5e5", val.trim());
+    }
+    return esc(indent) + span("#c084fc", prop) + esc(colon) + coloredVal + span("#6b7280", semi);
+  }
+  return esc(line);
+}
+function highlightCSS(code, propMap) {
+  return code.split("\n").map((line) => {
+    const colored = highlightLine(line);
+    if (!propMap) return colored;
+    const kind = classifyLine(line, propMap);
+    if (kind === "unknown-prop" || kind === "invalid-value") {
+      return `<span style="text-decoration: underline wavy #ef4444; text-underline-offset: 3px">${colored}</span>`;
+    }
+    return colored;
+  }).join("\n");
+}
+function SearchBar({
+  query,
+  setQuery,
+  matchCount,
+  currentMatch,
+  onNext,
+  onPrev,
+  onClose
+}) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "6px 10px",
+        backgroundColor: "#2a2a2a",
+        borderBottom: "1px solid #3a3a3a",
+        fontSize: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { glyph: "search", size: 13, strokeWidth: 1.5, style: { color: "#d4d4d8" } }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            placeholder: "Find...",
+            style: {
+              flex: 1,
+              background: "#1e1e1e",
+              border: "1px solid #3a3a3a",
+              borderRadius: 4,
+              padding: "3px 8px",
+              fontSize: 12,
+              color: "#e5e5e5",
+              outline: "none",
+              fontFamily: "inherit"
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                if (e.shiftKey) onPrev();
+                else onNext();
+              }
+              if (e.key === "Escape") onClose();
+            }
+          }
+        ),
+        query && /* @__PURE__ */ jsx("span", { style: { color: "#d4d4d8", fontSize: 11, whiteSpace: "nowrap" }, children: matchCount > 0 ? `${currentMatch + 1}/${matchCount}` : "0/0" }),
+        /* @__PURE__ */ jsx("button", { "aria-label": "Previous match", onClick: onPrev, style: { background: "none", border: "none", cursor: "pointer", color: "#d4d4d8", padding: 2, display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-up", size: 14, strokeWidth: 2 }) }),
+        /* @__PURE__ */ jsx("button", { "aria-label": "Next match", onClick: onNext, style: { background: "none", border: "none", cursor: "pointer", color: "#d4d4d8", padding: 2, display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 14, strokeWidth: 2 }) }),
+        /* @__PURE__ */ jsx("button", { "aria-label": "Close search", onClick: onClose, style: { background: "none", border: "none", cursor: "pointer", color: "#d4d4d8", padding: 2, display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 14, strokeWidth: 2 }) })
+      ]
+    }
+  );
+}
+function CodeEditor() {
+  const { selectedId, getOverrides, setOverride, resetOverride } = useUxm();
+  const def = getComponentDef(selectedId);
+  const overrides = getOverrides(selectedId);
+  const propMap = useMemo(
+    () => new Map((def?.styleProperties ?? []).map((p) => [toKebab(p.key), p])),
+    [def]
+  );
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentMatch, setCurrentMatch] = useState(0);
+  const textareaRef = useRef(null);
+  const preRef = useRef(null);
+  const debounceRef = useRef(void 0);
+  const resolved = useMemo(() => {
+    if (!def) return {};
+    const styles = {};
+    for (const prop of def.styleProperties) {
+      styles[prop.key] = overrides[prop.key] ?? prop.defaultValue;
+    }
+    return styles;
+  }, [def, overrides]);
+  const cssText = useMemo(() => {
+    if (!def) return "";
+    return stylesToCSS(def.id, def.styleProperties, resolved);
+  }, [def, resolved]);
+  const [code, setCode] = useState(cssText);
+  const lastAppliedCssTextRef = useRef(null);
+  useEffect(() => {
+    if (cssText === lastAppliedCssTextRef.current) return;
+    setCode(cssText);
+  }, [cssText]);
+  const handleCodeChange = useCallback(
+    (newCode) => {
+      setCode(newCode);
+      if (!def) return;
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        const { values, linesByPropKey } = parseCSS(newCode, def.styleProperties);
+        for (const [key, value] of Object.entries(values)) {
+          const current = overrides[key] ?? def.styleProperties.find((p) => p.key === key)?.defaultValue;
+          if (current !== value) {
+            setOverride(selectedId, key, value);
+          }
+        }
+        for (const prop of def.styleProperties) {
+          if (prop.key in overrides && !linesByPropKey.has(prop.key)) {
+            resetOverride(selectedId, prop.key);
+          }
+        }
+        const projected = { ...resolved, ...values };
+        for (const prop of def.styleProperties) {
+          if (prop.key in overrides && !linesByPropKey.has(prop.key)) {
+            projected[prop.key] = prop.defaultValue;
+          }
+        }
+        lastAppliedCssTextRef.current = stylesToCSS(def.id, def.styleProperties, projected);
+      }, 300);
+    },
+    [def, overrides, resolved, selectedId, setOverride, resetOverride]
+  );
+  const errorCount = useMemo(() => countErrors(code, propMap), [code, propMap]);
+  const handleScroll = useCallback(() => {
+    if (textareaRef.current && preRef.current) {
+      preRef.current.scrollTop = textareaRef.current.scrollTop;
+      preRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+      if (e.key === "Escape") {
+        setSearchOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+  const searchMatches = useMemo(() => {
+    if (!searchQuery) return [];
+    const matches = [];
+    const lower = code.toLowerCase();
+    const q = searchQuery.toLowerCase();
+    let idx = 0;
+    while ((idx = lower.indexOf(q, idx)) !== -1) {
+      matches.push(idx);
+      idx += q.length;
+    }
+    return matches;
+  }, [code, searchQuery]);
+  const highlighted = useMemo(() => {
+    if (!searchQuery || searchMatches.length === 0) {
+      return highlightCSS(code, propMap);
+    }
+    const q = searchQuery;
+    const parts = [];
+    let last = 0;
+    for (const idx of searchMatches) {
+      parts.push(code.slice(last, idx));
+      parts.push("
" + code.slice(idx, idx + q.length) + "");
+      last = idx + q.length;
+    }
+    parts.push(code.slice(last));
+    const marked = parts.join("");
+    let html = highlightCSS(marked, propMap);
+    html = html.replace(/\x01/g, '<mark style="background:#fbbf2480;color:#fbbf24;border-radius:2px">');
+    html = html.replace(/\x02/g, "</mark>");
+    return html;
+  }, [code, searchQuery, searchMatches, propMap]);
+  const lines = code.split("\n");
+  if (!def) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        backgroundColor: "#1e1e1e",
+        borderRadius: 8,
+        overflow: "hidden",
+        border: "1px solid #2a2a2a"
+      },
+      children: [
+        searchOpen && /* @__PURE__ */ jsx(
+          SearchBar,
+          {
+            query: searchQuery,
+            setQuery: (q) => {
+              setSearchQuery(q);
+              setCurrentMatch(0);
+            },
+            matchCount: searchMatches.length,
+            currentMatch,
+            onNext: () => setCurrentMatch((c) => (c + 1) % Math.max(1, searchMatches.length)),
+            onPrev: () => setCurrentMatch((c) => (c - 1 + searchMatches.length) % Math.max(1, searchMatches.length)),
+            onClose: () => {
+              setSearchOpen(false);
+              setSearchQuery("");
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                bottom: 0,
+                width: 40,
+                backgroundColor: "#1a1a1a",
+                borderRight: "1px solid #2a2a2a",
+                zIndex: 2,
+                overflow: "hidden",
+                paddingTop: 12
+              },
+              children: lines.map((_, i) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    height: 20,
+                    lineHeight: "20px",
+                    textAlign: "right",
+                    paddingRight: 8,
+                    fontSize: 11,
+                    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                    color: "#a1a1aa",
+                    userSelect: "none"
+                  },
+                  children: i + 1
+                },
+                i
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "pre",
+            {
+              ref: preRef,
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                left: 40,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                margin: 0,
+                padding: "12px 12px 12px 12px",
+                fontSize: 12,
+                lineHeight: "20px",
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                color: "#e5e5e5",
+                overflow: "auto",
+                whiteSpace: "pre",
+                pointerEvents: "none",
+                zIndex: 1
+              },
+              dangerouslySetInnerHTML: { __html: highlighted + "\n" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: code,
+              onChange: (e) => handleCodeChange(e.target.value),
+              onScroll: handleScroll,
+              spellCheck: false,
+              style: {
+                position: "absolute",
+                left: 40,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                margin: 0,
+                padding: "12px 12px 12px 12px",
+                fontSize: 12,
+                lineHeight: "20px",
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                color: "transparent",
+                caretColor: "#e5e5e5",
+                backgroundColor: "transparent",
+                border: "none",
+                outline: "none",
+                resize: "none",
+                overflow: "auto",
+                whiteSpace: "pre",
+                zIndex: 3,
+                WebkitTextFillColor: "transparent"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "4px 12px",
+              borderTop: "1px solid #2a2a2a",
+              backgroundColor: "#1a1a1a",
+              fontSize: 10,
+              color: "#a1a1aa"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  lines.length,
+                  " lines"
+                ] }),
+                errorCount > 0 && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: { display: "inline-flex", alignItems: "center", gap: 3, color: "#ef4444" },
+                    title: "Lines that don't match a known property name or have an invalid value type. They won't be applied \u2014 the override stays unchanged. Hover the line in the editor to see the squiggle.",
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { glyph: "exclamation-triangle", size: 10, strokeWidth: 2 }),
+                      errorCount,
+                      " ",
+                      errorCount === 1 ? "error" : "errors"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setSearchOpen(!searchOpen),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: searchOpen ? "#7dd3fc" : "#4a4a4a",
+                      fontSize: 10,
+                      padding: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 3
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { glyph: "search", size: 10, strokeWidth: 2 }),
+                      navigator.platform?.includes("Mac") ? "\u2318F" : "Ctrl+F"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: "CSS" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CodeEditor
+};
+//# sourceMappingURL=code-editor.js.map

package/dist/studio/editors/code-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/studio/editors/code-editor.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react';\n\nimport { Icon } from '@/ui';\n\nimport { useUxm } from '../lib/context';\nimport { getComponentDef } from '../lib/registry';\n\nimport type { StyleProperty } from '../lib/types';\n\n// ── Helpers: camelCase ↔ kebab-case ──\n\nfunction toKebab(str: string): string {\n  return str.replace(/([A-Z])/g, '-$1').toLowerCase();\n}\n\n// ── Generate CSS from resolved styles ──\n\nfunction stylesToCSS(\n  componentId: string,\n  props: StyleProperty[],\n  resolved: Record<string, string | number | boolean>,\n): string {\n  const lines: string[] = [];\n  lines.push(`.${componentId} {`);\n  for (const prop of props) {\n    const val = resolved[prop.key];\n    if (typeof val === 'boolean') {\n      lines.push(`  ${toKebab(prop.key)}: ${val ? 'true' : 'false'};`);\n    } else if (typeof val === 'number') {\n      lines.push(`  ${toKebab(prop.key)}: ${val}${prop.unit ?? ''};`);\n    } else {\n      lines.push(`  ${toKebab(prop.key)}: ${val};`);\n    }\n  }\n  lines.push('}');\n  return lines.join('\\n');\n}\n\n// ── Parse CSS back to overrides ──\n\nconst PROP_LINE_REGEX = /^\\s*([\\w-]+)\\s*:\\s*(.+?)\\s*;?\\s*$/;\n\ninterface ParseResult {\n  /** Prop keys that parsed to a valid value, ready to apply via setOverride. */\n  values: Record<string, string | number | boolean>;\n  /** Prop keys for which a recognizable line exists in the code. Used by the\n   *  caller to detect deletions: a key in `overrides` but not in this set was\n   *  removed from the editor and should reset to its default. NB: typo'd\n   *  property names (e.g. `bckground-color: red`) don't match `propMap` and\n   *  therefore won't add the canonical key here — meaning a typo over an\n   *  existing override will *also* trigger reset. The line-level error\n   *  indicator surfaces typos so users notice before deletion fires. */\n  linesByPropKey: Set<string>;\n}\n\nfunction parseCSS(css: string, props: StyleProperty[]): ParseResult {\n  const values: Record<string, string | number | boolean> = {};\n  const linesByPropKey = new Set<string>();\n  const propMap = new Map(props.map((p) => [toKebab(p.key), p]));\n\n  for (const line of css.split('\\n')) {\n    const m = line.match(PROP_LINE_REGEX);\n    if (!m) continue;\n    const [, name, rawVal] = m;\n    const prop = propMap.get(name);\n    if (!prop) continue;\n\n    linesByPropKey.add(prop.key);\n\n    if (prop.control === 'toggle') {\n      values[prop.key] = rawVal === 'true';\n    } else if (prop.control === 'number' || prop.control === 'slider') {\n      const num = parseFloat(rawVal);\n      if (!isNaN(num)) values[prop.key] = num;\n    } else {\n      values[prop.key] = rawVal;\n    }\n  }\n  return { values, linesByPropKey };\n}\n\n// ── Per-line classification (used by both the highlighter and the\n//    error count in the status bar) ──\n\ntype LineKind =\n  | 'selector-open'      // `.component-id {`\n  | 'brace-close'        // `}`\n  | 'valid-prop'         // recognized prop, parseable value\n  | 'unknown-prop'       // matches `name: value;` shape but name isn't in registry\n  | 'invalid-value'      // recognized prop but value is wrong type (e.g. NaN for number)\n  | 'decoration';        // empty line, comment, anything else (not flagged)\n\nfunction classifyLine(line: string, propMap: Map<string, StyleProperty>): LineKind {\n  const trimmed = line.trim();\n  if (!trimmed) return 'decoration';\n  if (line.match(/^(\\.[a-z][\\w-]*)\\s*\\{\\s*$/)) return 'selector-open';\n  if (trimmed === '}') return 'brace-close';\n\n  const m = line.match(PROP_LINE_REGEX);\n  if (!m) return 'decoration';\n\n  const [, name, rawVal] = m;\n  const prop = propMap.get(name);\n  if (!prop) return 'unknown-prop';\n\n  if (prop.control === 'number' || prop.control === 'slider') {\n    if (isNaN(parseFloat(rawVal))) return 'invalid-value';\n  }\n  if (prop.control === 'toggle') {\n    const t = rawVal.trim();\n    if (t !== 'true' && t !== 'false') return 'invalid-value';\n  }\n  return 'valid-prop';\n}\n\nfunction countErrors(code: string, propMap: Map<string, StyleProperty>): number {\n  let n = 0;\n  for (const line of code.split('\\n')) {\n    const k = classifyLine(line, propMap);\n    if (k === 'unknown-prop' || k === 'invalid-value') n++;\n  }\n  return n;\n}\n\n// ── Syntax highlighter ──\n\nfunction esc(s: string): string {\n  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n}\n\nfunction span(color: string, text: string): string {\n  return `<span style=\"color:${color}\">${esc(text)}</span>`;\n}\n\nfunction highlightLine(line: string): string {\n  // Selector line: .component-name {\n  const selMatch = line.match(/^(\\.[a-z][\\w-]*)\\s*(\\{)\\s*$/);\n  if (selMatch) {\n    return span('#7dd3fc', selMatch[1]) + ' ' + span('#6b7280', selMatch[2]);\n  }\n  // Closing brace\n  if (line.trim() === '}') {\n    return span('#6b7280', '}');\n  }\n  // Property line:   prop-name: value;\n  const propMatch = line.match(/^(\\s+)([\\w-]+)(\\s*:\\s*)(.+?)(;)\\s*$/);\n  if (propMatch) {\n    const [, indent, prop, colon, val, semi] = propMatch;\n    let coloredVal: string;\n    // Hex color value\n    if (/^#[0-9a-fA-F]{3,8}$/.test(val.trim())) {\n      coloredVal = span('#fbbf24', val.trim());\n    }\n    // Number with unit\n    else if (/^-?\\d+(?:\\.\\d+)?(?:px|rem|em|%|s|ms)$/.test(val.trim())) {\n      coloredVal = span('#34d399', val.trim());\n    }\n    // Plain number\n    else if (/^-?\\d+(?:\\.\\d+)?$/.test(val.trim())) {\n      coloredVal = span('#34d399', val.trim());\n    }\n    // true/false\n    else if (val.trim() === 'true' || val.trim() === 'false') {\n      coloredVal = span('#fb923c', val.trim());\n    }\n    // String value\n    else {\n      coloredVal = span('#e5e5e5', val.trim());\n    }\n    return esc(indent) + span('#c084fc', prop) + esc(colon) + coloredVal + span('#6b7280', semi);\n  }\n  return esc(line);\n}\n\n// When a propMap is supplied, wrap unknown-prop / invalid-value lines in\n// a wavy red underline so the user sees which lines won't apply. Using\n// `text-decoration` rather than border-bottom so it follows wrapping\n// (the textarea overlay matches char-for-char, which keeps the squiggle\n// pixel-aligned with the user's actual text).\nfunction highlightCSS(code: string, propMap?: Map<string, StyleProperty>): string {\n  return code.split('\\n').map((line) => {\n    const colored = highlightLine(line);\n    if (!propMap) return colored;\n    const kind = classifyLine(line, propMap);\n    if (kind === 'unknown-prop' || kind === 'invalid-value') {\n      return `<span style=\"text-decoration: underline wavy #ef4444; text-underline-offset: 3px\">${colored}</span>`;\n    }\n    return colored;\n  }).join('\\n');\n}\n\n// ── Search bar ──\n\nfunction SearchBar({\n  query,\n  setQuery,\n  matchCount,\n  currentMatch,\n  onNext,\n  onPrev,\n  onClose,\n}: {\n  query: string;\n  setQuery: (q: string) => void;\n  matchCount: number;\n  currentMatch: number;\n  onNext: () => void;\n  onPrev: () => void;\n  onClose: () => void;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => { inputRef.current?.focus(); }, []);\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 6,\n        padding: '6px 10px',\n        backgroundColor: '#2a2a2a',\n        borderBottom: '1px solid #3a3a3a',\n        fontSize: 12,\n      }}\n    >\n      <Icon glyph=\"search\" size={13} strokeWidth={1.5} style={{ color: '#d4d4d8' }} />\n      <input\n        ref={inputRef}\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        placeholder=\"Find...\"\n        style={{\n          flex: 1,\n          background: '#1e1e1e',\n          border: '1px solid #3a3a3a',\n          borderRadius: 4,\n          padding: '3px 8px',\n          fontSize: 12,\n          color: '#e5e5e5',\n          outline: 'none',\n          fontFamily: 'inherit',\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') { if (e.shiftKey) onPrev(); else onNext(); }\n          if (e.key === 'Escape') onClose();\n        }}\n      />\n      {query && (\n        <span style={{ color: '#d4d4d8', fontSize: 11, whiteSpace: 'nowrap' }}>\n          {matchCount > 0 ? `${currentMatch + 1}/${matchCount}` : '0/0'}\n        </span>\n      )}\n      <button aria-label=\"Previous match\" onClick={onPrev} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#d4d4d8', padding: 2, display: 'flex' }}>\n        <Icon glyph=\"chevron-up\" size={14} strokeWidth={2} />\n      </button>\n      <button aria-label=\"Next match\" onClick={onNext} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#d4d4d8', padding: 2, display: 'flex' }}>\n        <Icon glyph=\"chevron-down\" size={14} strokeWidth={2} />\n      </button>\n      <button aria-label=\"Close search\" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#d4d4d8', padding: 2, display: 'flex' }}>\n        <Icon glyph=\"close\" size={14} strokeWidth={2} />\n      </button>\n    </div>\n  );\n}\n\n// ── Main editor ──\n\nexport function CodeEditor() {\n  const { selectedId, getOverrides, setOverride, resetOverride } = useUxm();\n  const def = getComponentDef(selectedId);\n  const overrides = getOverrides(selectedId);\n\n  // Memoised lookup table: kebab-cased prop name → StyleProperty.\n  // Shared between parseCSS, the line classifier, and the highlighter\n  // so we build it once per def change instead of per keystroke.\n  const propMap = useMemo(\n    () => new Map((def?.styleProperties ?? []).map((p) => [toKebab(p.key), p])),\n    [def],\n  );\n\n  // Search state\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [currentMatch, setCurrentMatch] = useState(0);\n\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const preRef = useRef<HTMLPreElement>(null);\n  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  // Resolve styles\n  const resolved = useMemo(() => {\n    if (!def) return {};\n    const styles: Record<string, string | number | boolean> = {};\n    for (const prop of def.styleProperties) {\n      styles[prop.key] = overrides[prop.key] ?? prop.defaultValue;\n    }\n    return styles;\n  }, [def, overrides]);\n\n  // Generate CSS text\n  const cssText = useMemo(() => {\n    if (!def) return '';\n    return stylesToCSS(def.id, def.styleProperties, resolved);\n  }, [def, resolved]);\n\n  const [code, setCode] = useState(cssText);\n\n  // Tracks the CSS text the editor itself last produced by round-tripping\n  // the user's own edits through `setOverride`/`resetOverride` (see\n  // `handleCodeChange` below). When `cssText` recomputes to exactly this\n  // value, the change originated from the user's own typing, not an\n  // external source (Reset, component switch, cascade-sync) — so the sync\n  // effect below must skip `setCode`, or it clobbers whatever the user has\n  // typed since (the 300ms debounce means `cssText` can settle well after\n  // the user has moved on to their next keystroke).\n  const lastAppliedCssTextRef = useRef<string | null>(null);\n\n  // Sync from visual → code when resolved styles change\n  useEffect(() => {\n    if (cssText === lastAppliedCssTextRef.current) return;\n    setCode(cssText);\n  }, [cssText]);\n\n  // Parse code → overrides (debounced). Also handles deletion: a\n  // styleProperty currently in `overrides` whose line has disappeared\n  // from the editor is reset to its default. Caveat noted on\n  // `linesByPropKey` in parseCSS — typo'd property names look the\n  // same to the parser as a deleted line, so editing a name into a\n  // typo will *also* trigger reset. The line-error indicator\n  // surfaces typos so the user notices before that happens.\n  const handleCodeChange = useCallback(\n    (newCode: string) => {\n      setCode(newCode);\n      if (!def) return;\n\n      clearTimeout(debounceRef.current);\n      debounceRef.current = setTimeout(() => {\n        const { values, linesByPropKey } = parseCSS(newCode, def.styleProperties);\n\n        // Apply edits\n        for (const [key, value] of Object.entries(values)) {\n          const current = overrides[key] ?? def.styleProperties.find((p) => p.key === key)?.defaultValue;\n          if (current !== value) {\n            setOverride(selectedId, key, value);\n          }\n        }\n\n        // Detect deletions\n        for (const prop of def.styleProperties) {\n          if (prop.key in overrides && !linesByPropKey.has(prop.key)) {\n            resetOverride(selectedId, prop.key);\n          }\n        }\n\n        // Record the canonical CSS this transaction will produce once\n        // `resolved`/`cssText` recompute from the edits above, so the sync\n        // effect can recognize the resulting change as self-inflicted and\n        // leave `code` alone (see `lastAppliedCssTextRef`).\n        const projected: Record<string, string | number | boolean> = { ...resolved, ...values };\n        for (const prop of def.styleProperties) {\n          if (prop.key in overrides && !linesByPropKey.has(prop.key)) {\n            projected[prop.key] = prop.defaultValue;\n          }\n        }\n        lastAppliedCssTextRef.current = stylesToCSS(def.id, def.styleProperties, projected);\n      }, 300);\n    },\n    [def, overrides, resolved, selectedId, setOverride, resetOverride],\n  );\n\n  // Error count for the status bar — counts unknown-prop + invalid-value\n  // lines so the user sees at a glance how many lines won't apply.\n  const errorCount = useMemo(() => countErrors(code, propMap), [code, propMap]);\n\n  // Sync scrolling between textarea and pre\n  const handleScroll = useCallback(() => {\n    if (textareaRef.current && preRef.current) {\n      preRef.current.scrollTop = textareaRef.current.scrollTop;\n      preRef.current.scrollLeft = textareaRef.current.scrollLeft;\n    }\n  }, []);\n\n  // Keyboard shortcut for search\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {\n        e.preventDefault();\n        setSearchOpen(true);\n      }\n      if (e.key === 'Escape') {\n        setSearchOpen(false);\n      }\n    };\n    window.addEventListener('keydown', handler);\n    return () => window.removeEventListener('keydown', handler);\n  }, []);\n\n  // Search match positions\n  const searchMatches = useMemo(() => {\n    if (!searchQuery) return [];\n    const matches: number[] = [];\n    const lower = code.toLowerCase();\n    const q = searchQuery.toLowerCase();\n    let idx = 0;\n    while ((idx = lower.indexOf(q, idx)) !== -1) {\n      matches.push(idx);\n      idx += q.length;\n    }\n    return matches;\n  }, [code, searchQuery]);\n\n  // Highlighted code with search matches\n  const highlighted = useMemo(() => {\n    if (!searchQuery || searchMatches.length === 0) {\n      return highlightCSS(code, propMap);\n    }\n    // Insert markers in raw code, then highlight CSS, then convert markers to <mark>\n    const q = searchQuery;\n    const parts: string[] = [];\n    let last = 0;\n    for (const idx of searchMatches) {\n      parts.push(code.slice(last, idx));\n      parts.push('\\x01' + code.slice(idx, idx + q.length) + '\\x02');\n      last = idx + q.length;\n    }\n    parts.push(code.slice(last));\n    const marked = parts.join('');\n    let html = highlightCSS(marked, propMap);\n    // eslint-disable-next-line no-control-regex -- \\x01/\\x02 are internal sentinels marking search-highlight spans\n    html = html.replace(/\\x01/g, '<mark style=\"background:#fbbf2480;color:#fbbf24;border-radius:2px\">');\n    // eslint-disable-next-line no-control-regex -- matching sentinel for highlight-span close\n    html = html.replace(/\\x02/g, '</mark>');\n    return html;\n  }, [code, searchQuery, searchMatches, propMap]);\n\n  const lines = code.split('\\n');\n\n  if (!def) return null;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        height: '100%',\n        backgroundColor: '#1e1e1e',\n        borderRadius: 8,\n        overflow: 'hidden',\n        border: '1px solid #2a2a2a',\n      }}\n    >\n      {/* Search */}\n      {searchOpen && (\n        <SearchBar\n          query={searchQuery}\n          setQuery={(q) => { setSearchQuery(q); setCurrentMatch(0); }}\n          matchCount={searchMatches.length}\n          currentMatch={currentMatch}\n          onNext={() => setCurrentMatch((c) => (c + 1) % Math.max(1, searchMatches.length))}\n          onPrev={() => setCurrentMatch((c) => (c - 1 + searchMatches.length) % Math.max(1, searchMatches.length))}\n          onClose={() => { setSearchOpen(false); setSearchQuery(''); }}\n        />\n      )}\n\n      {/* Editor area */}\n      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>\n        {/* Line numbers */}\n        <div\n          style={{\n            position: 'absolute',\n            left: 0,\n            top: 0,\n            bottom: 0,\n            width: 40,\n            backgroundColor: '#1a1a1a',\n            borderRight: '1px solid #2a2a2a',\n            zIndex: 2,\n            overflow: 'hidden',\n            paddingTop: 12,\n          }}\n        >\n          {lines.map((_, i) => (\n            <div\n              key={i}\n              style={{\n                height: 20,\n                lineHeight: '20px',\n                textAlign: 'right',\n                paddingRight: 8,\n                fontSize: 11,\n                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n                color: '#a1a1aa',\n                userSelect: 'none',\n              }}\n            >\n              {i + 1}\n            </div>\n          ))}\n        </div>\n\n        {/* Highlighted overlay */}\n        <pre\n          ref={preRef}\n          aria-hidden\n          style={{\n            position: 'absolute',\n            left: 40,\n            top: 0,\n            right: 0,\n            bottom: 0,\n            margin: 0,\n            padding: '12px 12px 12px 12px',\n            fontSize: 12,\n            lineHeight: '20px',\n            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n            color: '#e5e5e5',\n            overflow: 'auto',\n            whiteSpace: 'pre',\n            pointerEvents: 'none',\n            zIndex: 1,\n          }}\n          dangerouslySetInnerHTML={{ __html: highlighted + '\\n' }}\n        />\n\n        {/* Textarea (actual editable layer) */}\n        <textarea\n          ref={textareaRef}\n          value={code}\n          onChange={(e) => handleCodeChange(e.target.value)}\n          onScroll={handleScroll}\n          spellCheck={false}\n          style={{\n            position: 'absolute',\n            left: 40,\n            top: 0,\n            right: 0,\n            bottom: 0,\n            margin: 0,\n            padding: '12px 12px 12px 12px',\n            fontSize: 12,\n            lineHeight: '20px',\n            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',\n            color: 'transparent',\n            caretColor: '#e5e5e5',\n            backgroundColor: 'transparent',\n            border: 'none',\n            outline: 'none',\n            resize: 'none',\n            overflow: 'auto',\n            whiteSpace: 'pre',\n            zIndex: 3,\n            WebkitTextFillColor: 'transparent',\n          }}\n        />\n      </div>\n\n      {/* Status bar */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: '4px 12px',\n          borderTop: '1px solid #2a2a2a',\n          backgroundColor: '#1a1a1a',\n          fontSize: 10,\n          color: '#a1a1aa',\n        }}\n      >\n        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>\n          <span>{lines.length} lines</span>\n          {errorCount > 0 && (\n            <span\n              style={{ display: 'inline-flex', alignItems: 'center', gap: 3, color: '#ef4444' }}\n              title=\"Lines that don't match a known property name or have an invalid value type. They won't be applied — the override stays unchanged. Hover the line in the editor to see the squiggle.\"\n            >\n              <Icon glyph=\"exclamation-triangle\" size={10} strokeWidth={2} />\n              {errorCount} {errorCount === 1 ? 'error' : 'errors'}\n            </span>\n          )}\n        </span>\n        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n          <button\n            onClick={() => setSearchOpen(!searchOpen)}\n            style={{\n              background: 'none',\n              border: 'none',\n              cursor: 'pointer',\n              color: searchOpen ? '#7dd3fc' : '#4a4a4a',\n              fontSize: 10,\n              padding: 0,\n              display: 'flex',\n              alignItems: 'center',\n              gap: 3,\n            }}\n          >\n            <Icon glyph=\"search\" size={10} strokeWidth={2} />\n            {navigator.platform?.includes('Mac') ? '⌘F' : 'Ctrl+F'}\n          </button>\n          <span>CSS</span>\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}