@industry-theme/principal-view-panels 0.1.3 → 0.1.5

package/dist/panels.bundle.js

@@ -4454,12 +4454,14 @@ class EventProcessor {
     }
   }
   handleNodeEvent(event, timestamp2) {
+    var _a;
     const payload = event.payload;
     switch (payload.operation) {
       case "create":
         this.state.nodes.set(payload.nodeId, {
           id: payload.nodeId,
           type: payload.nodeType,
+          name: ((_a = payload.data) == null ? void 0 : _a.name) || payload.nodeId,
           data: payload.data || {},
           position: payload.position,
           createdAt: timestamp2,
@@ -5185,6 +5187,7 @@ class GraphConverter {
       nodes.push({
         id,
         type: id,
+        name: id,
         data: {
           label: id,
           shape: nodeType.shape,
@@ -5422,8 +5425,8 @@ class CanvasConverter {
         nodes.push({
           id: node.id,
           type: (pv == null ? void 0 : pv.nodeType) || node.type,
+          name: nodeName,
           data: {
-            name: nodeName,
             description: pv == null ? void 0 : pv.description,
             shape: (pv == null ? void 0 : pv.shape) || "rectangle",
             icon: pv == null ? void 0 : pv.icon,
@@ -5507,6 +5510,7 @@ class CanvasConverter {
       if (node.data.nodeType || node.data.shape || ((_c = node.data.sources) == null ? void 0 : _c.length)) {
         canvasNode.pv = {
           nodeType: node.data.nodeType || node.id,
+          description: node.data.description || `${node.data.nodeType || node.id} node`,
           shape: node.data.shape,
           icon: node.data.icon,
           states: node.data.states,
@@ -9197,6 +9201,7 @@ class LibraryConverter {
     const { id, x: x2, y: y2, label, data } = options;
     const pv = {
       nodeType: componentKey,
+      description: component.description,
       shape: component.shape,
       icon: component.icon,
       states: component.states,
@@ -10075,6 +10080,18 @@ const validNodeTypes = {
     }
     for (const [typeId, nodeType] of Object.entries(configuration.nodeTypes)) {
       const basePath = `nodeTypes.${typeId}`;
+      if (!nodeType.description) {
+        violations.push({
+          ruleId: "valid-node-types",
+          severity: "error",
+          file: configPath,
+          path: `${basePath}.description`,
+          message: `Node type "${typeId}" is missing required "description" field`,
+          impact: "Node type must have a description explaining its purpose",
+          suggestion: "Add a description field explaining what this node type represents",
+          fixable: false
+        });
+      }
       if (!nodeType.shape) {
         violations.push({
           ruleId: "valid-node-types",
@@ -10472,6 +10489,7 @@ const ALLOWED_FIELDS = {
   root: ["metadata", "nodeTypes", "edgeTypes", "allowedConnections", "validation", "display"],
   metadata: ["name", "version", "description"],
   nodeType: [
+    "description",
     "shape",
     "icon",
     "color",
@@ -11384,6 +11402,2000 @@ const dist = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   validatePrivuConfig
 }, Symbol.toStringTag, { value: "Module" }));
 const require$$4 = /* @__PURE__ */ getAugmentedNamespace(dist);
+var cjs;
+var hasRequiredCjs;
+function requireCjs() {
+  if (hasRequiredCjs) return cjs;
+  hasRequiredCjs = 1;
+  var __create = Object.create;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __toESM = (mod, isNodeMode, target) => {
+    target = mod != null ? __create(__getProtoOf(mod)) : {};
+    const to2 = !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target;
+    for (let key of __getOwnPropNames(mod))
+      if (!__hasOwnProp.call(to2, key))
+        __defProp2(to2, key, {
+          get: () => mod[key],
+          enumerable: true
+        });
+    return to2;
+  };
+  var __moduleCache = /* @__PURE__ */ new WeakMap();
+  var __toCommonJS = (from) => {
+    var entry = __moduleCache.get(from), desc;
+    if (entry)
+      return entry;
+    entry = __defProp2({}, "__esModule", { value: true });
+    if (from && typeof from === "object" || typeof from === "function")
+      __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp2(entry, key, {
+        get: () => from[key],
+        enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+      }));
+    __moduleCache.set(from, entry);
+    return entry;
+  };
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp2(target, name, {
+        get: all[name],
+        enumerable: true,
+        configurable: true,
+        set: (newValue) => all[name] = () => newValue
+      });
+  };
+  var exports_src = {};
+  __export(exports_src, {
+    withTheme: () => withTheme,
+    useTheme: () => useTheme2,
+    theme: () => theme,
+    terminalTheme: () => terminalTheme,
+    sx: () => sx,
+    slateTheme: () => slateTheme,
+    scaleThemeFonts: () => scaleThemeFonts,
+    responsive: () => responsive,
+    resetFontScale: () => resetFontScale,
+    regalTheme: () => regalTheme,
+    overrideColors: () => overrideColors,
+    mergeThemes: () => mergeThemes,
+    matrixTheme: () => matrixTheme,
+    matrixMinimalTheme: () => matrixMinimalTheme,
+    makeTheme: () => makeTheme,
+    landingPageTheme: () => landingPageTheme,
+    landingPageLightTheme: () => landingPageLightTheme,
+    increaseFontScale: () => increaseFontScale,
+    glassmorphismTheme: () => glassmorphismTheme,
+    getZIndex: () => getZIndex,
+    getSpace: () => getSpace,
+    getShadow: () => getShadow,
+    getRadius: () => getRadius,
+    getMode: () => getMode,
+    getFontSize: () => getFontSize,
+    getColor: () => getColor,
+    defaultTerminalTheme: () => defaultTerminalTheme,
+    defaultMarkdownTheme: () => defaultMarkdownTheme,
+    defaultEditorTheme: () => defaultEditorTheme,
+    default: () => src_default,
+    decreaseFontScale: () => decreaseFontScale,
+    createStyle: () => createStyle,
+    addMode: () => addMode,
+    ThemeShowcase: () => ThemeShowcase,
+    ThemeProvider: () => ThemeProvider
+  });
+  cjs = __toCommonJS(exports_src);
+  var glassmorphismTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 700,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.6,
+      heading: 1.3,
+      tight: 1.4,
+      relaxed: 1.8
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 8, 12, 16, 20, 24, 32, 40],
+    shadows: [
+      "none",
+      "0 8px 32px 0 rgba(31, 38, 135, 0.15)",
+      "0 12px 40px 0 rgba(31, 38, 135, 0.2)",
+      "0 16px 48px 0 rgba(31, 38, 135, 0.25)",
+      "0 20px 56px 0 rgba(31, 38, 135, 0.3)",
+      "0 24px 64px 0 rgba(31, 38, 135, 0.35)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "rgba(255, 255, 255, 0.95)",
+      background: "rgba(255, 255, 255, 0.1)",
+      primary: "rgba(99, 102, 241, 0.9)",
+      secondary: "rgba(139, 92, 246, 0.9)",
+      accent: "rgba(236, 72, 153, 0.9)",
+      highlight: "rgba(99, 102, 241, 0.2)",
+      muted: "rgba(255, 255, 255, 0.05)",
+      success: "rgba(34, 197, 94, 0.9)",
+      warning: "rgba(251, 146, 60, 0.9)",
+      error: "rgba(239, 68, 68, 0.9)",
+      info: "rgba(59, 130, 246, 0.9)",
+      border: "rgba(255, 255, 255, 0.18)",
+      backgroundSecondary: "rgba(255, 255, 255, 0.15)",
+      backgroundTertiary: "rgba(255, 255, 255, 0.2)",
+      backgroundLight: "rgba(255, 255, 255, 0.08)",
+      backgroundHover: "rgba(255, 255, 255, 0.25)",
+      surface: "rgba(255, 255, 255, 0.12)",
+      textSecondary: "rgba(255, 255, 255, 0.8)",
+      textTertiary: "rgba(255, 255, 255, 0.6)",
+      textMuted: "rgba(255, 255, 255, 0.5)",
+      highlightBg: "rgba(251, 191, 36, 0.3)",
+      highlightBorder: "rgba(251, 191, 36, 0.5)"
+    },
+    modes: {
+      dark: {
+        text: "rgba(255, 255, 255, 0.95)",
+        background: "rgba(0, 0, 0, 0.3)",
+        primary: "rgba(129, 140, 248, 0.9)",
+        secondary: "rgba(167, 139, 250, 0.9)",
+        accent: "rgba(244, 114, 182, 0.9)",
+        highlight: "rgba(129, 140, 248, 0.25)",
+        muted: "rgba(0, 0, 0, 0.15)",
+        success: "rgba(74, 222, 128, 0.9)",
+        warning: "rgba(251, 191, 36, 0.9)",
+        error: "rgba(248, 113, 113, 0.9)",
+        info: "rgba(96, 165, 250, 0.9)",
+        border: "rgba(255, 255, 255, 0.15)",
+        backgroundSecondary: "rgba(0, 0, 0, 0.4)",
+        backgroundTertiary: "rgba(0, 0, 0, 0.5)",
+        backgroundLight: "rgba(0, 0, 0, 0.2)",
+        backgroundHover: "rgba(255, 255, 255, 0.1)",
+        surface: "rgba(0, 0, 0, 0.35)",
+        textSecondary: "rgba(255, 255, 255, 0.8)",
+        textTertiary: "rgba(255, 255, 255, 0.6)",
+        textMuted: "rgba(255, 255, 255, 0.4)",
+        highlightBg: "rgba(251, 191, 36, 0.35)",
+        highlightBorder: "rgba(251, 191, 36, 0.6)"
+      },
+      frosted: {
+        text: "rgba(31, 41, 55, 0.95)",
+        background: "rgba(255, 255, 255, 0.3)",
+        primary: "rgba(79, 70, 229, 0.95)",
+        secondary: "rgba(124, 58, 237, 0.95)",
+        accent: "rgba(219, 39, 119, 0.95)",
+        highlight: "rgba(79, 70, 229, 0.15)",
+        muted: "rgba(255, 255, 255, 0.4)",
+        success: "rgba(16, 185, 129, 0.95)",
+        warning: "rgba(245, 158, 11, 0.95)",
+        error: "rgba(220, 38, 38, 0.95)",
+        info: "rgba(37, 99, 235, 0.95)",
+        border: "rgba(255, 255, 255, 0.5)",
+        backgroundSecondary: "rgba(255, 255, 255, 0.4)",
+        backgroundTertiary: "rgba(255, 255, 255, 0.5)",
+        backgroundLight: "rgba(255, 255, 255, 0.25)",
+        backgroundHover: "rgba(255, 255, 255, 0.6)",
+        surface: "rgba(255, 255, 255, 0.35)",
+        textSecondary: "rgba(31, 41, 55, 0.8)",
+        textTertiary: "rgba(31, 41, 55, 0.6)",
+        textMuted: "rgba(31, 41, 55, 0.5)",
+        highlightBg: "rgba(251, 191, 36, 0.4)",
+        highlightBorder: "rgba(251, 191, 36, 0.7)"
+      }
+    },
+    buttons: {
+      primary: {
+        color: "white",
+        bg: "primary",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        "&:hover": {
+          bg: "secondary"
+        }
+      },
+      secondary: {
+        color: "text",
+        bg: "rgba(255, 255, 255, 0.1)",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        "&:hover": {
+          bg: "rgba(255, 255, 255, 0.2)"
+        }
+      },
+      ghost: {
+        color: "text",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "transparent",
+        "&:hover": {
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          bg: "rgba(255, 255, 255, 0.05)"
+        }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 3
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 3
+      }
+    }
+  };
+  var defaultMarkdownTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      heading: '"Crimson Text", "Georgia", "Times New Roman", serif',
+      monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 700,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.6,
+      heading: 1.3,
+      tight: 1.25,
+      relaxed: 1.75
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#1a1a1a",
+      background: "#ffffff",
+      primary: "#007acc",
+      secondary: "#005a9e",
+      accent: "#1a1a1a",
+      highlight: "rgba(0, 122, 204, 0.1)",
+      muted: "#f0f0f0",
+      success: "#28a745",
+      warning: "#ffc107",
+      error: "#dc3545",
+      info: "#17a2b8",
+      border: "rgba(0, 0, 0, 0.1)",
+      backgroundSecondary: "#f8f9fa",
+      backgroundTertiary: "#e9ecef",
+      backgroundLight: "rgba(0, 0, 0, 0.03)",
+      backgroundHover: "rgba(0, 0, 0, 0.05)",
+      surface: "#ffffff",
+      textSecondary: "#555555",
+      textTertiary: "#888888",
+      textMuted: "#aaaaaa",
+      highlightBg: "rgba(255, 235, 59, 0.3)",
+      highlightBorder: "rgba(255, 235, 59, 0.6)"
+    },
+    buttons: {
+      primary: {
+        color: "white",
+        bg: "primary",
+        "&:hover": { bg: "secondary" }
+      },
+      secondary: {
+        color: "primary",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "primary",
+        "&:hover": { bg: "highlight" }
+      },
+      ghost: {
+        color: "text",
+        bg: "transparent",
+        "&:hover": { bg: "backgroundHover" }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 2
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 2
+      }
+    }
+  };
+  var defaultTerminalTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Courier New", Courier, monospace',
+      heading: '"Courier New", Courier, monospace',
+      monospace: '"Courier New", Courier, monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 500,
+      bold: 600,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.4,
+      heading: 1.2,
+      tight: 1.3,
+      relaxed: 1.6
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 0 5px rgba(255, 193, 7, 0.1)",
+      "0 0 10px rgba(255, 193, 7, 0.15)",
+      "0 0 15px rgba(255, 193, 7, 0.2)",
+      "0 0 20px rgba(255, 193, 7, 0.25)",
+      "0 0 30px rgba(255, 193, 7, 0.3)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#ffc107",
+      background: "#000000",
+      primary: "#ffc107",
+      secondary: "#ffb300",
+      accent: "#ffffff",
+      highlight: "rgba(255, 193, 7, 0.1)",
+      muted: "#1a1a1a",
+      success: "#4caf50",
+      warning: "#ff9800",
+      error: "#f44336",
+      info: "#2196f3",
+      border: "rgba(255, 193, 7, 0.2)",
+      backgroundSecondary: "#0a0a0a",
+      backgroundTertiary: "#111111",
+      backgroundLight: "rgba(255, 193, 7, 0.03)",
+      backgroundHover: "rgba(255, 193, 7, 0.05)",
+      surface: "#050505",
+      textSecondary: "#e0e0e0",
+      textTertiary: "#b0b0b0",
+      textMuted: "#808080",
+      highlightBg: "rgba(255, 193, 7, 0.2)",
+      highlightBorder: "rgba(255, 193, 7, 0.4)"
+    },
+    buttons: {
+      primary: {
+        color: "black",
+        bg: "primary",
+        borderWidth: 0,
+        "&:hover": { bg: "secondary" }
+      },
+      secondary: {
+        color: "primary",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "primary",
+        "&:hover": { bg: "highlight" }
+      },
+      ghost: {
+        color: "text",
+        bg: "transparent",
+        "&:hover": { bg: "backgroundHover" }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 0
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 0
+      }
+    }
+  };
+  var defaultEditorTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
+      heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 700,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.5,
+      heading: 1.2,
+      tight: 1.3,
+      relaxed: 1.7
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 1px 2px rgba(0, 0, 0, 0.05)",
+      "0 2px 4px rgba(0, 0, 0, 0.1)",
+      "0 4px 8px rgba(0, 0, 0, 0.15)",
+      "0 8px 16px rgba(0, 0, 0, 0.2)",
+      "0 12px 24px rgba(0, 0, 0, 0.25)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#d4d4d4",
+      background: "#1e1e1e",
+      primary: "#569cd6",
+      secondary: "#408ac9",
+      accent: "#c586c0",
+      highlight: "rgba(86, 156, 214, 0.1)",
+      muted: "#2a2a2a",
+      success: "#6a9955",
+      warning: "#d18616",
+      error: "#f44747",
+      info: "#569cd6",
+      border: "rgba(255, 255, 255, 0.1)",
+      backgroundSecondary: "#252526",
+      backgroundTertiary: "#333333",
+      backgroundLight: "rgba(255, 255, 255, 0.03)",
+      backgroundHover: "rgba(255, 255, 255, 0.05)",
+      surface: "#252526",
+      textSecondary: "#cccccc",
+      textTertiary: "#999999",
+      textMuted: "#666666",
+      highlightBg: "rgba(255, 235, 59, 0.2)",
+      highlightBorder: "rgba(255, 235, 59, 0.4)"
+    },
+    buttons: {
+      primary: {
+        color: "white",
+        bg: "primary",
+        "&:hover": { bg: "secondary" }
+      },
+      secondary: {
+        color: "primary",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "primary",
+        "&:hover": { bg: "highlight" }
+      },
+      ghost: {
+        color: "text",
+        bg: "transparent",
+        "&:hover": { bg: "backgroundHover" }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 1
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 1
+      }
+    }
+  };
+  var landingPageTheme = {
+    space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 100, 128],
+    fonts: {
+      body: 'Inter, "Geist Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      heading: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      monospace: '"SF Mono", Monaco, Inconsolata, "Fira Code", monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 700,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.6,
+      heading: 1.2,
+      tight: 1.05,
+      relaxed: 1.7
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px", "1400px"],
+    sizes: [16, 32, 64, 128, 200, 240, 256, 300, 512, 740, 768, 820, 900, 1024, 1200, 1400, 1536],
+    radii: [0, 2, 4, 6, 7, 8, 9, 10, 12, 14, 16, 24],
+    shadows: [
+      "none",
+      "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      "0 4px 12px rgba(0, 194, 255, 0.4)",
+      "0 6px 24px rgba(0, 194, 255, 0.1)",
+      "0 8px 32px rgba(0, 0, 0, 0.4)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50, 1e3],
+    colors: {
+      text: "#ffffff",
+      background: "#000000",
+      primary: "#00C2FF",
+      secondary: "#0098CC",
+      accent: "#0066FF",
+      highlight: "rgba(0, 194, 255, 0.15)",
+      muted: "#1a1a1a",
+      success: "#4caf50",
+      warning: "#ff9800",
+      error: "#f44336",
+      info: "#2196f3",
+      border: "rgba(0, 194, 255, 0.2)",
+      backgroundSecondary: "#0a1628",
+      backgroundTertiary: "#0f1c2e",
+      backgroundLight: "rgba(0, 194, 255, 0.04)",
+      backgroundHover: "rgba(0, 194, 255, 0.1)",
+      surface: "rgba(0, 0, 0, 0.4)",
+      textSecondary: "#d1d5db",
+      textTertiary: "#9ca3af",
+      textMuted: "#6b7280",
+      highlightBg: "rgba(255, 235, 59, 0.25)",
+      highlightBorder: "rgba(255, 235, 59, 0.5)"
+    },
+    buttons: {
+      primary: {
+        color: "#000000",
+        bg: "#00C2FF",
+        borderWidth: 0,
+        padding: "8px 20px",
+        fontSize: 14,
+        fontWeight: 600,
+        cursor: "pointer",
+        "&:hover": {
+          bg: "#00D9FF"
+        }
+      },
+      secondary: {
+        color: "#00C2FF",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "rgba(0, 194, 255, 0.3)",
+        padding: "8px 16px",
+        fontSize: 14,
+        fontWeight: 600,
+        cursor: "pointer",
+        "&:hover": {
+          bg: "rgba(0, 194, 255, 0.1)",
+          borderColor: "#00C2FF"
+        }
+      },
+      ghost: {
+        color: "#00C2FF",
+        bg: "transparent",
+        borderWidth: 0,
+        padding: "8px 16px",
+        fontSize: 14,
+        fontWeight: 500,
+        cursor: "pointer",
+        "&:hover": {
+          color: "#00D9FF",
+          bg: "rgba(0, 194, 255, 0.1)"
+        }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading",
+        color: "#ffffff"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body",
+        color: "text"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 4
+      },
+      secondary: {
+        bg: "rgba(0, 194, 255, 0.05)",
+        border: "1px solid",
+        borderColor: "rgba(0, 194, 255, 0.2)",
+        borderRadius: 4
+      }
+    }
+  };
+  var landingPageLightTheme = {
+    ...landingPageTheme,
+    colors: {
+      text: "#1a1a1a",
+      background: "#ffffff",
+      primary: "#0098CC",
+      secondary: "#00C2FF",
+      accent: "#0066FF",
+      highlight: "rgba(0, 152, 204, 0.1)",
+      muted: "#f0f0f0",
+      success: "#4caf50",
+      warning: "#ff9800",
+      error: "#f44336",
+      info: "#2196f3",
+      border: "rgba(0, 152, 204, 0.2)",
+      backgroundSecondary: "#f8f9fa",
+      backgroundTertiary: "#e9ecef",
+      backgroundLight: "rgba(0, 152, 204, 0.03)",
+      backgroundHover: "rgba(0, 152, 204, 0.05)",
+      surface: "rgba(255, 255, 255, 0.95)",
+      textSecondary: "#555555",
+      textTertiary: "#888888",
+      textMuted: "#aaaaaa",
+      highlightBg: "rgba(255, 235, 59, 0.3)",
+      highlightBorder: "rgba(255, 235, 59, 0.6)"
+    },
+    buttons: {
+      primary: {
+        color: "#ffffff",
+        bg: "#0098CC",
+        borderWidth: 0,
+        padding: "8px 20px",
+        fontSize: 14,
+        fontWeight: 600,
+        cursor: "pointer",
+        "&:hover": {
+          bg: "#007aa8"
+        }
+      },
+      secondary: {
+        color: "#0098CC",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "rgba(0, 152, 204, 0.3)",
+        padding: "8px 16px",
+        fontSize: 14,
+        fontWeight: 600,
+        cursor: "pointer",
+        "&:hover": {
+          bg: "rgba(0, 152, 204, 0.05)",
+          borderColor: "#0098CC"
+        }
+      },
+      ghost: {
+        color: "#0098CC",
+        bg: "transparent",
+        borderWidth: 0,
+        padding: "8px 16px",
+        fontSize: 14,
+        fontWeight: 500,
+        cursor: "pointer",
+        "&:hover": {
+          color: "#007aa8",
+          bg: "rgba(0, 152, 204, 0.05)"
+        }
+      }
+    }
+  };
+  var regalTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      heading: '"Crimson Text", "Georgia", "Times New Roman", serif',
+      monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 700,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.5,
+      heading: 1.2,
+      tight: 1.25,
+      relaxed: 1.75
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+      "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#f1e8dc",
+      background: "#1a1f2e",
+      primary: "#d4a574",
+      secondary: "#e0b584",
+      accent: "#c9b8a3",
+      highlight: "rgba(212, 165, 116, 0.15)",
+      muted: "#8b7968",
+      success: "#5c8a72",
+      warning: "#d4a574",
+      error: "#a85751",
+      info: "#d4a574",
+      border: "rgba(212, 165, 116, 0.2)",
+      backgroundSecondary: "#212738",
+      backgroundTertiary: "#2d3446",
+      backgroundLight: "rgba(212, 165, 116, 0.08)",
+      backgroundHover: "rgba(212, 165, 116, 0.15)",
+      surface: "#212738",
+      textSecondary: "#c9b8a3",
+      textTertiary: "#8b7968",
+      textMuted: "#8b7968",
+      highlightBg: "rgba(255, 193, 7, 0.25)",
+      highlightBorder: "rgba(255, 193, 7, 0.5)"
+    },
+    buttons: {
+      primary: {
+        color: "background",
+        bg: "primary",
+        "&:hover": {
+          bg: "secondary"
+        }
+      },
+      secondary: {
+        color: "text",
+        bg: "muted",
+        "&:hover": {
+          bg: "backgroundSecondary"
+        }
+      },
+      ghost: {
+        color: "primary",
+        bg: "transparent",
+        "&:hover": {
+          bg: "muted"
+        }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "background",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 2
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 2
+      }
+    }
+  };
+  var terminalTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+      heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+      monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 500,
+      bold: 600,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.6,
+      heading: 1.3,
+      tight: 1.4,
+      relaxed: 1.8
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+      "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
+      "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
+      "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#e4e4e4",
+      background: "rgba(10, 10, 10, 0.85)",
+      primary: "#66b3ff",
+      secondary: "#80c4ff",
+      accent: "#66ff99",
+      highlight: "rgba(102, 179, 255, 0.15)",
+      muted: "rgba(26, 26, 26, 0.8)",
+      success: "#66ff99",
+      warning: "#ffcc66",
+      error: "#ff6666",
+      info: "#66b3ff",
+      border: "rgba(255, 255, 255, 0.1)",
+      backgroundSecondary: "rgba(15, 15, 15, 0.9)",
+      backgroundTertiary: "rgba(20, 20, 20, 0.9)",
+      backgroundLight: "rgba(255, 255, 255, 0.05)",
+      backgroundHover: "rgba(102, 179, 255, 0.08)",
+      surface: "rgba(15, 15, 15, 0.95)",
+      textSecondary: "rgba(255, 255, 255, 0.7)",
+      textTertiary: "rgba(255, 255, 255, 0.5)",
+      textMuted: "rgba(255, 255, 255, 0.4)",
+      highlightBg: "rgba(255, 235, 59, 0.25)",
+      highlightBorder: "rgba(255, 235, 59, 0.5)"
+    },
+    modes: {
+      light: {
+        text: "#1a1a1a",
+        background: "rgba(255, 255, 255, 0.9)",
+        primary: "#0066cc",
+        secondary: "#0052a3",
+        accent: "#00cc88",
+        highlight: "rgba(0, 102, 204, 0.08)",
+        muted: "rgba(245, 245, 245, 0.8)",
+        success: "#00cc88",
+        warning: "#ffaa00",
+        error: "#ff3333",
+        info: "#0066cc",
+        border: "rgba(0, 0, 0, 0.1)",
+        backgroundSecondary: "rgba(250, 250, 250, 0.9)",
+        backgroundTertiary: "rgba(245, 245, 245, 0.9)",
+        backgroundLight: "rgba(0, 0, 0, 0.02)",
+        backgroundHover: "rgba(0, 102, 204, 0.04)",
+        surface: "rgba(255, 255, 255, 0.95)",
+        textSecondary: "rgba(0, 0, 0, 0.6)",
+        textTertiary: "rgba(0, 0, 0, 0.4)",
+        textMuted: "rgba(0, 0, 0, 0.3)",
+        highlightBg: "rgba(255, 235, 59, 0.3)",
+        highlightBorder: "rgba(255, 235, 59, 0.6)"
+      }
+    },
+    buttons: {
+      primary: {
+        color: "white",
+        bg: "primary",
+        borderWidth: 0,
+        "&:hover": {
+          bg: "secondary"
+        }
+      },
+      secondary: {
+        color: "primary",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "primary",
+        "&:hover": {
+          bg: "highlight"
+        }
+      },
+      ghost: {
+        color: "text",
+        bg: "transparent",
+        "&:hover": {
+          bg: "backgroundHover"
+        }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 1
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 1
+      }
+    }
+  };
+  var matrixTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
+      heading: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
+      monospace: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 500,
+      bold: 600,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.5,
+      heading: 1.2,
+      tight: 1.3,
+      relaxed: 1.7
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 0 5px rgba(0, 216, 53, 0.15)",
+      "0 0 10px rgba(0, 216, 53, 0.2)",
+      "0 0 15px rgba(0, 216, 53, 0.25)",
+      "0 0 20px rgba(0, 216, 53, 0.3)",
+      "0 0 30px rgba(0, 216, 53, 0.4)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#a8a8a8",
+      background: "#000000",
+      primary: "#00d835",
+      secondary: "#00a828",
+      accent: "#00d835",
+      highlight: "rgba(0, 216, 53, 0.15)",
+      muted: "#0a0a0a",
+      success: "#00d835",
+      warning: "#d4a000",
+      error: "#d63333",
+      info: "#00a8d6",
+      border: "rgba(0, 216, 53, 0.2)",
+      backgroundSecondary: "#0a0a0a",
+      backgroundTertiary: "#111111",
+      backgroundLight: "rgba(0, 216, 53, 0.03)",
+      backgroundHover: "rgba(0, 216, 53, 0.08)",
+      surface: "#050505",
+      textSecondary: "#808080",
+      textTertiary: "#606060",
+      textMuted: "#484848",
+      highlightBg: "rgba(0, 216, 53, 0.25)",
+      highlightBorder: "rgba(0, 216, 53, 0.5)"
+    },
+    buttons: {
+      primary: {
+        color: "black",
+        bg: "primary",
+        borderWidth: 0,
+        "&:hover": {
+          bg: "secondary"
+        }
+      },
+      secondary: {
+        color: "primary",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "primary",
+        "&:hover": {
+          bg: "highlight"
+        }
+      },
+      ghost: {
+        color: "text",
+        bg: "transparent",
+        "&:hover": {
+          bg: "backgroundHover"
+        }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 0
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 0
+      }
+    }
+  };
+  var matrixMinimalTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
+      heading: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace',
+      monospace: '"Courier New", "Courier", "Lucida Console", "Monaco", monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 500,
+      bold: 600,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.5,
+      heading: 1.2,
+      tight: 1.3,
+      relaxed: 1.7
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 1px 2px rgba(0, 0, 0, 0.05)",
+      "0 2px 4px rgba(0, 0, 0, 0.1)",
+      "0 4px 8px rgba(0, 0, 0, 0.15)",
+      "0 8px 16px rgba(0, 0, 0, 0.2)",
+      "0 0 20px rgba(0, 216, 53, 0.1)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#a8a8a8",
+      background: "#000000",
+      primary: "#b8b8b8",
+      secondary: "#909090",
+      accent: "#00d835",
+      highlight: "rgba(0, 216, 53, 0.1)",
+      muted: "#0a0a0a",
+      success: "#00d835",
+      warning: "#d4a000",
+      error: "#d63333",
+      info: "#00a8d6",
+      border: "rgba(184, 184, 184, 0.1)",
+      backgroundSecondary: "#0a0a0a",
+      backgroundTertiary: "#111111",
+      backgroundLight: "rgba(184, 184, 184, 0.02)",
+      backgroundHover: "rgba(0, 216, 53, 0.05)",
+      surface: "#050505",
+      textSecondary: "#808080",
+      textTertiary: "#606060",
+      textMuted: "#484848",
+      highlightBg: "rgba(0, 216, 53, 0.2)",
+      highlightBorder: "rgba(0, 216, 53, 0.4)"
+    },
+    buttons: {
+      primary: {
+        color: "black",
+        bg: "primary",
+        borderWidth: 0,
+        "&:hover": {
+          bg: "secondary"
+        }
+      },
+      secondary: {
+        color: "primary",
+        bg: "transparent",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "primary",
+        "&:hover": {
+          bg: "backgroundHover"
+        }
+      },
+      ghost: {
+        color: "text",
+        bg: "transparent",
+        "&:hover": {
+          bg: "backgroundHover"
+        }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textSecondary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 0
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 0
+      }
+    }
+  };
+  var slateTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace'
+    },
+    fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+    fontScale: 1,
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 700,
+      light: 300,
+      medium: 500,
+      semibold: 600
+    },
+    lineHeights: {
+      body: 1.6,
+      heading: 1.3,
+      tight: 1.25,
+      relaxed: 1.75
+    },
+    breakpoints: ["640px", "768px", "1024px", "1280px"],
+    sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+    radii: [0, 2, 4, 6, 8, 12, 16, 24],
+    shadows: [
+      "none",
+      "0 1px 3px 0 rgba(0, 0, 0, 0.2)",
+      "0 4px 6px -1px rgba(0, 0, 0, 0.2)",
+      "0 10px 15px -3px rgba(0, 0, 0, 0.2)",
+      "0 20px 25px -5px rgba(0, 0, 0, 0.25)",
+      "0 25px 50px -12px rgba(0, 0, 0, 0.3)"
+    ],
+    zIndices: [0, 1, 10, 20, 30, 40, 50],
+    colors: {
+      text: "#9ca3af",
+      background: "#1a1c1e",
+      primary: "#d1d5db",
+      secondary: "#6b7280",
+      accent: "#f59e0b",
+      highlight: "rgba(209, 213, 219, 0.15)",
+      muted: "#2d3134",
+      success: "#10b981",
+      warning: "#f59e0b",
+      error: "#ef4444",
+      info: "#3b82f6",
+      border: "rgba(156, 163, 175, 0.15)",
+      backgroundSecondary: "#22252a",
+      backgroundTertiary: "#2d3134",
+      backgroundLight: "rgba(156, 163, 175, 0.05)",
+      backgroundHover: "rgba(156, 163, 175, 0.1)",
+      surface: "#1f2124",
+      textSecondary: "#e5e7eb",
+      textTertiary: "#6b7280",
+      textMuted: "#4b5563",
+      highlightBg: "rgba(245, 158, 11, 0.25)",
+      highlightBorder: "rgba(245, 158, 11, 0.5)"
+    },
+    buttons: {
+      primary: {
+        color: "#1a1c1e",
+        bg: "primary",
+        borderWidth: 0,
+        "&:hover": {
+          bg: "#9ca3af"
+        }
+      },
+      secondary: {
+        color: "#e5e7eb",
+        bg: "secondary",
+        borderWidth: 0,
+        "&:hover": {
+          bg: "#4b5563"
+        }
+      },
+      ghost: {
+        color: "textSecondary",
+        bg: "transparent",
+        "&:hover": {
+          bg: "backgroundHover"
+        }
+      }
+    },
+    text: {
+      heading: {
+        fontFamily: "heading",
+        fontWeight: "heading",
+        lineHeight: "heading",
+        color: "textSecondary"
+      },
+      body: {
+        fontFamily: "body",
+        fontWeight: "body",
+        lineHeight: "body"
+      },
+      caption: {
+        fontSize: 1,
+        color: "textTertiary"
+      }
+    },
+    cards: {
+      primary: {
+        bg: "surface",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 3
+      },
+      secondary: {
+        bg: "backgroundSecondary",
+        border: "1px solid",
+        borderColor: "border",
+        borderRadius: 3
+      }
+    }
+  };
+  var import_react2 = __toESM(React2);
+  function overrideColors(theme2, colors) {
+    return {
+      ...theme2,
+      colors: {
+        ...theme2.colors,
+        ...colors
+      }
+    };
+  }
+  function makeTheme(baseTheme, overrides) {
+    return {
+      ...baseTheme,
+      ...overrides,
+      colors: {
+        ...baseTheme.colors,
+        ...overrides.colors
+      },
+      fonts: {
+        ...baseTheme.fonts,
+        ...overrides.fonts
+      }
+    };
+  }
+  function addMode(theme2, modeName, colors, baseMode) {
+    let baseColors;
+    if (baseMode && theme2.modes && theme2.modes[baseMode]) {
+      baseColors = {
+        ...theme2.colors,
+        ...theme2.modes[baseMode]
+      };
+    } else {
+      baseColors = theme2.colors;
+    }
+    const newMode = {
+      ...baseColors,
+      ...colors
+    };
+    return {
+      ...theme2,
+      modes: {
+        ...theme2.modes,
+        [modeName]: newMode
+      }
+    };
+  }
+  function getMode(theme2, mode) {
+    if (!mode || !theme2.modes || !theme2.modes[mode]) {
+      return theme2.colors;
+    }
+    return {
+      ...theme2.colors,
+      ...theme2.modes[mode]
+    };
+  }
+  var ThemeContext2;
+  var getThemeContext2 = () => {
+    if (typeof window !== "undefined") {
+      const globalWindow = window;
+      if (!globalWindow.__principlemd_theme_context__) {
+        globalWindow.__principlemd_theme_context__ = import_react2.createContext(void 0);
+      }
+      return globalWindow.__principlemd_theme_context__;
+    } else {
+      if (!ThemeContext2) {
+        ThemeContext2 = import_react2.createContext(void 0);
+      }
+      return ThemeContext2;
+    }
+  };
+  var ThemeContextSingleton2 = getThemeContext2();
+  var useTheme2 = () => {
+    const context = import_react2.useContext(ThemeContextSingleton2);
+    if (!context) {
+      throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+  };
+  var ThemeProvider = ({
+    children,
+    theme: customTheme = theme,
+    initialMode
+  }) => {
+    const [mode, setMode] = import_react2.useState(initialMode);
+    const activeTheme = import_react2.default.useMemo(() => {
+      if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+        return customTheme;
+      }
+      return {
+        ...customTheme,
+        colors: getMode(customTheme, mode)
+      };
+    }, [customTheme, mode]);
+    import_react2.useEffect(() => {
+      if (!initialMode) {
+        const savedMode = localStorage.getItem("principlemd-theme-mode");
+        if (savedMode) {
+          setMode(savedMode);
+        }
+      }
+    }, [initialMode]);
+    import_react2.useEffect(() => {
+      if (mode) {
+        localStorage.setItem("principlemd-theme-mode", mode);
+      } else {
+        localStorage.removeItem("principlemd-theme-mode");
+      }
+    }, [mode]);
+    const value = {
+      theme: activeTheme,
+      mode,
+      setMode
+    };
+    return /* @__PURE__ */ import_react2.default.createElement(ThemeContextSingleton2.Provider, {
+      value
+    }, children);
+  };
+  var withTheme = (Component2) => {
+    return (props) => {
+      const { theme: theme2 } = useTheme2();
+      return /* @__PURE__ */ import_react2.default.createElement(Component2, {
+        ...props,
+        theme: theme2
+      });
+    };
+  };
+  var getColor = (theme2, colorKey) => {
+    const colors = theme2.colors;
+    const value = colors[colorKey];
+    return typeof value === "string" ? value : colorKey;
+  };
+  var getSpace = (theme2, index2) => {
+    return theme2.space[index2] || 0;
+  };
+  var getFontSize = (theme2, index2) => {
+    return theme2.fontSizes[index2] || theme2.fontSizes[2];
+  };
+  var getRadius = (theme2, index2) => {
+    return theme2.radii[index2] || 0;
+  };
+  var getShadow = (theme2, index2) => {
+    return theme2.shadows[index2] || "none";
+  };
+  var getZIndex = (theme2, index2) => {
+    return theme2.zIndices[index2] || 0;
+  };
+  var responsive = (values) => {
+    return values.reduce((acc, value, index2) => {
+      if (index2 === 0) {
+        return value;
+      }
+      return {
+        ...acc,
+        [`@media screen and (min-width: ${values[index2 - 1]})`]: value
+      };
+    }, {});
+  };
+  var sx = (styles) => styles;
+  var createStyle = (theme2, styleObj) => {
+    const processValue = (value) => {
+      if (typeof value === "string") {
+        if (value in theme2.colors) {
+          return getColor(theme2, value);
+        }
+        return value;
+      }
+      if (typeof value === "number") {
+        return value;
+      }
+      if (Array.isArray(value)) {
+        return value.map(processValue);
+      }
+      if (typeof value === "object" && value !== null) {
+        const processed2 = {};
+        for (const [key, val] of Object.entries(value)) {
+          processed2[key] = processValue(val);
+        }
+        return processed2;
+      }
+      return value;
+    };
+    const processed = {};
+    for (const [key, val] of Object.entries(styleObj)) {
+      processed[key] = processValue(val);
+    }
+    return processed;
+  };
+  var mergeThemes = (baseTheme, ...overrides) => {
+    return overrides.reduce((theme2, override) => ({
+      space: override.space || theme2.space,
+      fonts: { ...theme2.fonts, ...override.fonts || {} },
+      fontSizes: override.fontSizes || theme2.fontSizes,
+      fontWeights: { ...theme2.fontWeights, ...override.fontWeights || {} },
+      lineHeights: { ...theme2.lineHeights, ...override.lineHeights || {} },
+      breakpoints: override.breakpoints || theme2.breakpoints,
+      sizes: override.sizes || theme2.sizes,
+      radii: override.radii || theme2.radii,
+      shadows: override.shadows || theme2.shadows,
+      zIndices: override.zIndices || theme2.zIndices,
+      colors: {
+        ...theme2.colors,
+        ...override.colors || {}
+      },
+      buttons: { ...theme2.buttons, ...override.buttons || {} },
+      text: { ...theme2.text, ...override.text || {} },
+      cards: { ...theme2.cards, ...override.cards || {} }
+    }), baseTheme);
+  };
+  var import_react22 = __toESM(React2);
+  var ThemeShowcase = ({
+    theme: theme2,
+    title,
+    showValues = true,
+    sections = ["colors", "typography", "spacing", "shadows", "radii"]
+  }) => {
+    const containerStyle = {
+      fontFamily: theme2.fonts.body,
+      color: theme2.colors.text,
+      backgroundColor: theme2.colors.background,
+      padding: theme2.space[4],
+      minHeight: "100vh"
+    };
+    const sectionStyle = {
+      marginBottom: theme2.space[5],
+      padding: theme2.space[4],
+      backgroundColor: theme2.colors.surface || theme2.colors.backgroundSecondary,
+      borderRadius: theme2.radii[2],
+      border: `1px solid ${theme2.colors.border}`
+    };
+    const headingStyle = {
+      fontFamily: theme2.fonts.heading,
+      fontSize: theme2.fontSizes[5],
+      fontWeight: theme2.fontWeights.heading,
+      marginBottom: theme2.space[3],
+      color: theme2.colors.primary
+    };
+    const subheadingStyle = {
+      fontFamily: theme2.fonts.heading,
+      fontSize: theme2.fontSizes[3],
+      fontWeight: theme2.fontWeights.medium,
+      marginBottom: theme2.space[2],
+      marginTop: theme2.space[3],
+      color: theme2.colors.text
+    };
+    return /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: containerStyle
+    }, title && /* @__PURE__ */ import_react22.default.createElement("h1", {
+      style: {
+        ...headingStyle,
+        fontSize: theme2.fontSizes[6],
+        marginBottom: theme2.space[4]
+      }
+    }, title), sections.includes("colors") && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: sectionStyle
+    }, /* @__PURE__ */ import_react22.default.createElement("h2", {
+      style: headingStyle
+    }, "Colors"), /* @__PURE__ */ import_react22.default.createElement("h3", {
+      style: subheadingStyle
+    }, "Primary Colors"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+        gap: theme2.space[3],
+        marginBottom: theme2.space[3]
+      }
+    }, ["text", "background", "primary", "secondary", "accent", "muted"].map((key) => {
+      const color = theme2.colors[key];
+      if (!color)
+        return null;
+      return /* @__PURE__ */ import_react22.default.createElement("div", {
+        key,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: theme2.space[2],
+          backgroundColor: theme2.colors.backgroundLight || theme2.colors.backgroundTertiary,
+          borderRadius: theme2.radii[1]
+        }
+      }, /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          width: 40,
+          height: 40,
+          backgroundColor: color,
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: theme2.radii[1],
+          marginRight: theme2.space[2]
+        }
+      }), /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[1],
+          fontWeight: theme2.fontWeights.medium
+        }
+      }, key), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textSecondary
+        }
+      }, color)));
+    })), /* @__PURE__ */ import_react22.default.createElement("h3", {
+      style: subheadingStyle
+    }, "Status Colors"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+        gap: theme2.space[3],
+        marginBottom: theme2.space[3]
+      }
+    }, ["success", "warning", "error", "info"].map((key) => {
+      const color = theme2.colors[key];
+      if (!color)
+        return null;
+      return /* @__PURE__ */ import_react22.default.createElement("div", {
+        key,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: theme2.space[2],
+          backgroundColor: theme2.colors.backgroundLight || theme2.colors.backgroundTertiary,
+          borderRadius: theme2.radii[1]
+        }
+      }, /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          width: 40,
+          height: 40,
+          backgroundColor: color,
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: theme2.radii[1],
+          marginRight: theme2.space[2]
+        }
+      }), /* @__PURE__ */ import_react22.default.createElement("div", null, /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[1],
+          fontWeight: theme2.fontWeights.medium
+        }
+      }, key), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textSecondary
+        }
+      }, color)));
+    })), /* @__PURE__ */ import_react22.default.createElement("h3", {
+      style: subheadingStyle
+    }, "Background Colors"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+        gap: theme2.space[3]
+      }
+    }, ["backgroundSecondary", "backgroundTertiary", "backgroundLight", "backgroundHover", "surface"].map((key) => {
+      const color = theme2.colors[key];
+      if (!color)
+        return null;
+      return /* @__PURE__ */ import_react22.default.createElement("div", {
+        key,
+        style: {
+          padding: theme2.space[3],
+          backgroundColor: color,
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: theme2.radii[1]
+        }
+      }, /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[1],
+          fontWeight: theme2.fontWeights.medium
+        }
+      }, key), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
+        style: {
+          fontFamily: theme2.fonts.monospace,
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textSecondary,
+          marginTop: theme2.space[1]
+        }
+      }, color));
+    }))), sections.includes("typography") && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: sectionStyle
+    }, /* @__PURE__ */ import_react22.default.createElement("h2", {
+      style: headingStyle
+    }, "Typography"), /* @__PURE__ */ import_react22.default.createElement("h3", {
+      style: subheadingStyle
+    }, "Font Families"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: { marginBottom: theme2.space[4] }
+    }, /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.heading,
+        fontSize: theme2.fontSizes[4],
+        marginBottom: theme2.space[2]
+      }
+    }, "Heading Font: ", showValues && /* @__PURE__ */ import_react22.default.createElement("span", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[1],
+        color: theme2.colors.textSecondary
+      }
+    }, " ", theme2.fonts.heading)), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[2],
+        marginBottom: theme2.space[2]
+      }
+    }, "Body Font: ", showValues && /* @__PURE__ */ import_react22.default.createElement("span", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[1],
+        color: theme2.colors.textSecondary
+      }
+    }, " ", theme2.fonts.body)), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[2]
+      }
+    }, "Monospace Font: ", showValues && /* @__PURE__ */ import_react22.default.createElement("span", {
+      style: {
+        fontSize: theme2.fontSizes[1],
+        color: theme2.colors.textSecondary
+      }
+    }, " ", theme2.fonts.monospace))), /* @__PURE__ */ import_react22.default.createElement("h3", {
+      style: subheadingStyle
+    }, "Font Sizes"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: { marginBottom: theme2.space[4] }
+    }, theme2.fontSizes.map((size, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
+      key: index2,
+      style: {
+        fontSize: size,
+        lineHeight: theme2.lineHeights.body,
+        marginBottom: theme2.space[1]
+      }
+    }, "Size ", index2, ": Sample Text ", showValues && `(${size}px)`))), /* @__PURE__ */ import_react22.default.createElement("h3", {
+      style: subheadingStyle
+    }, "Font Weights"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+        gap: theme2.space[2]
+      }
+    }, Object.entries(theme2.fontWeights).map(([name, weight]) => /* @__PURE__ */ import_react22.default.createElement("div", {
+      key: name,
+      style: {
+        fontWeight: weight,
+        fontSize: theme2.fontSizes[2]
+      }
+    }, name, " ", showValues && `(${weight})`)))), sections.includes("spacing") && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: sectionStyle
+    }, /* @__PURE__ */ import_react22.default.createElement("h2", {
+      style: headingStyle
+    }, "Spacing"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: { display: "flex", flexDirection: "column", gap: theme2.space[2] }
+    }, theme2.space.map((space, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
+      key: index2,
+      style: { display: "flex", alignItems: "center" }
+    }, /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        width: 60,
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[1],
+        color: theme2.colors.textSecondary
+      }
+    }, "[", index2, "]"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        height: 24,
+        width: space,
+        backgroundColor: theme2.colors.primary,
+        borderRadius: theme2.radii[1]
+      }
+    }), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        marginLeft: theme2.space[2],
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[1],
+        color: theme2.colors.textSecondary
+      }
+    }, space, "px"))))), sections.includes("radii") && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: sectionStyle
+    }, /* @__PURE__ */ import_react22.default.createElement("h2", {
+      style: headingStyle
+    }, "Border Radii"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+        gap: theme2.space[3]
+      }
+    }, theme2.radii.map((radius, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
+      key: index2,
+      style: { textAlign: "center" }
+    }, /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        width: 80,
+        height: 80,
+        backgroundColor: theme2.colors.primary,
+        borderRadius: radius,
+        marginBottom: theme2.space[1],
+        margin: "0 auto"
+      }
+    }), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[0],
+        color: theme2.colors.textSecondary
+      }
+    }, "[", index2, "] ", showValues && `${radius}px`))))), sections.includes("shadows") && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: sectionStyle
+    }, /* @__PURE__ */ import_react22.default.createElement("h2", {
+      style: headingStyle
+    }, "Shadows"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
+        gap: theme2.space[4]
+      }
+    }, theme2.shadows.map((shadow, index2) => /* @__PURE__ */ import_react22.default.createElement("div", {
+      key: index2,
+      style: { textAlign: "center" }
+    }, /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        width: 100,
+        height: 100,
+        backgroundColor: theme2.colors.background,
+        boxShadow: shadow,
+        borderRadius: theme2.radii[2],
+        margin: "0 auto",
+        marginBottom: theme2.space[2],
+        border: `1px solid ${theme2.colors.border}`
+      }
+    }), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[0],
+        color: theme2.colors.textSecondary
+      }
+    }, "Shadow [", index2, "]"), showValues && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[0],
+        color: theme2.colors.textMuted,
+        marginTop: theme2.space[1]
+      }
+    }, shadow === "none" ? "none" : "..."))))), theme2.modes && Object.keys(theme2.modes).length > 0 && /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: sectionStyle
+    }, /* @__PURE__ */ import_react22.default.createElement("h2", {
+      style: headingStyle
+    }, "Available Modes"), /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        display: "flex",
+        gap: theme2.space[2],
+        flexWrap: "wrap"
+      }
+    }, /* @__PURE__ */ import_react22.default.createElement("div", {
+      style: {
+        padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
+        backgroundColor: theme2.colors.primary,
+        color: "#ffffff",
+        borderRadius: theme2.radii[2],
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[1]
+      }
+    }, "default"), Object.keys(theme2.modes).map((modeName) => /* @__PURE__ */ import_react22.default.createElement("div", {
+      key: modeName,
+      style: {
+        padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
+        backgroundColor: theme2.colors.secondary,
+        color: theme2.colors.text,
+        borderRadius: theme2.radii[2],
+        fontFamily: theme2.fonts.body,
+        fontSize: theme2.fontSizes[1]
+      }
+    }, modeName)))));
+  };
+  var theme = terminalTheme;
+  function scaleThemeFonts(theme2, scale) {
+    const currentScale = theme2.fontScale || 1;
+    const effectiveScale = scale / currentScale;
+    return {
+      ...theme2,
+      fontSizes: theme2.fontSizes.map((size) => Math.round(size * effectiveScale)),
+      fontScale: scale
+    };
+  }
+  function increaseFontScale(theme2) {
+    const currentScale = theme2.fontScale || 1;
+    const newScale = Math.min(currentScale * 1.1, 2);
+    return scaleThemeFonts(theme2, newScale);
+  }
+  function decreaseFontScale(theme2) {
+    const currentScale = theme2.fontScale || 1;
+    const newScale = Math.max(currentScale * 0.9, 0.5);
+    return scaleThemeFonts(theme2, newScale);
+  }
+  function resetFontScale(theme2) {
+    return scaleThemeFonts(theme2, 1);
+  }
+  var src_default = theme;
+  return cjs;
+}
 var CustomNode = {};
 var iconResolver = {};
 /**
@@ -45093,11 +47105,12 @@ function requireCustomNode() {
       }
     };
     const animationClass = getAnimationClass();
+    const isGroup = nodeData.canvasType === "group";
     const getShapeStyles = () => {
       var _a2, _b2, _c2, _d2, _e3;
       const baseStyles = {
         padding: "12px 16px",
-        backgroundColor: "white",
+        backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : "white",
         color: "#000",
         border: `2px solid ${hasViolations ? "#D0021B" : strokeColor}`,
         fontSize: "12px",
@@ -45107,7 +47120,7 @@ function requireCustomNode() {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        justifyContent: "center",
+        justifyContent: isGroup ? "flex-start" : "center",
         gap: "4px",
         boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
         transition: "all 0.2s ease",
@@ -45231,7 +47244,16 @@ function requireCustomNode() {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: isDiamond ? { transform: "rotate(-45deg)" } : {}, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+      ...isDiamond ? { transform: "rotate(-45deg)" } : {},
+      ...isGroup ? { width: "100%" } : {}
+    }, children: [isGroup ? (0, jsx_runtime_1.jsxs)("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "6px",
+      width: "100%"
+    }, children: [icon && (0, iconResolver_1.resolveIcon)(icon, 18), (0, jsx_runtime_1.jsx)("div", { style: { wordBreak: "break-word" }, children: displayName })] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName })] }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
@@ -45535,20 +47557,24 @@ function requireGraphConverter() {
   const react_1 = /* @__PURE__ */ requireUmd();
   function convertToXYFlowNodes(nodes, configuration, violations = []) {
     return nodes.map((node) => {
+      var _a;
       const typeDefinition = configuration.nodeTypes[node.type];
       if (!typeDefinition) {
         console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
       }
       const hasViolations = violations.some((v) => {
-        var _a;
-        return ((_a = v.context) == null ? void 0 : _a.nodeId) === node.id;
+        var _a2;
+        return ((_a2 = v.context) == null ? void 0 : _a2.nodeId) === node.id;
       });
+      const isGroup = ((_a = node.data) == null ? void 0 : _a.canvasType) === "group";
       return {
         id: node.id,
         type: "custom",
         position: node.position || { x: 0, y: 0 },
+        // Groups have lower zIndex to render behind edges
+        zIndex: isGroup ? -1 : void 0,
         data: {
-          name: node.data.name || node.id,
+          name: node.name || node.id,
           typeDefinition,
           state: node.state,
           hasViolations,
@@ -45694,8 +47720,10 @@ function requireEdgeInfoPanel() {
   Object.defineProperty(EdgeInfoPanel, "__esModule", { value: true });
   EdgeInfoPanel.EdgeInfoPanel = void 0;
   const jsx_runtime_1 = require$$0;
+  const industry_theme_1 = requireCjs();
   const EdgeInfoPanel$1 = ({ edge, typeDefinition, sourceNodeId, targetNodeId, onClose, onDelete }) => {
-    const color = typeDefinition.color || "#888";
+    const { theme } = (0, industry_theme_1.useTheme)();
+    const edgeColor = typeDefinition.color || theme.colors.primary;
     const displayFields = typeDefinition.dataSchema ? Object.entries(typeDefinition.dataSchema).filter(([, schema2]) => schema2.displayInInfo).map(([field, schema2]) => {
       var _a;
       return {
@@ -45710,48 +47738,76 @@ function requireEdgeInfoPanel() {
       position: "absolute",
       top: "60px",
       right: "20px",
-      backgroundColor: "white",
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
       borderRadius: "8px",
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
       padding: "16px",
       minWidth: "250px",
       maxWidth: "350px",
-      zIndex: 1e3
+      zIndex: 1e3,
+      border: `1px solid ${theme.colors.border}`
     }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       marginBottom: "12px",
       paddingBottom: "8px",
-      borderBottom: `2px solid ${color}`
-    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px" }, children: "Edge Information" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
+      borderBottom: `2px solid ${edgeColor}`
+    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px", color: edgeColor }, children: "Edge Information" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
       border: "none",
       background: "none",
       cursor: "pointer",
       fontSize: "18px",
-      color: "#666",
+      color: theme.colors.textSecondary,
       padding: "0",
       width: "24px",
       height: "24px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }, children: "×" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: "×" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "12px",
       padding: "4px 8px",
-      backgroundColor: color,
-      color: "white",
+      backgroundColor: edgeColor,
+      color: theme.colors.background,
       borderRadius: "4px",
       display: "inline-block"
-    }, children: edge.type })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Connection" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px", color: "#333" }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontFamily: "monospace", backgroundColor: "#f0f0f0", padding: "2px 6px", borderRadius: "3px" }, children: sourceNodeId }), (0, jsx_runtime_1.jsx)("span", { style: { margin: "0 8px", color: "#888" }, children: "→" }), (0, jsx_runtime_1.jsx)("span", { style: { fontFamily: "monospace", backgroundColor: "#f0f0f0", padding: "2px 6px", borderRadius: "3px" }, children: targetNodeId })] })] }), hasSchemaFields && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Properties" }), displayFields.map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && edgeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Data" }), edgeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "10px", color: "#999", marginTop: "12px", paddingTop: "8px", borderTop: "1px solid #eee" }, children: ["ID: ", edge.id] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+    }, children: edge.type })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Connection" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px" }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+      fontFamily: theme.fonts.monospace,
+      backgroundColor: theme.colors.muted,
+      padding: "2px 6px",
+      borderRadius: "3px"
+    }, children: sourceNodeId }), (0, jsx_runtime_1.jsx)("span", { style: { margin: "0 8px", color: theme.colors.textMuted }, children: "→" }), (0, jsx_runtime_1.jsx)("span", { style: {
+      fontFamily: theme.fonts.monospace,
+      backgroundColor: theme.colors.muted,
+      padding: "2px 6px",
+      borderRadius: "3px"
+    }, children: targetNodeId })] })] }), hasSchemaFields && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textSecondary,
+      marginBottom: "8px",
+      fontWeight: "bold"
+    }, children: "Properties" }), displayFields.map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && edgeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textSecondary,
+      marginBottom: "8px",
+      fontWeight: "bold"
+    }, children: "Data" }), edgeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textMuted,
+      marginTop: "12px",
+      paddingTop: "8px",
+      borderTop: `1px solid ${theme.colors.border}`
+    }, children: ["ID: ", edge.id] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
       onDelete(edge.id);
       onClose();
     }, style: {
       marginTop: "12px",
       width: "100%",
       padding: "8px 12px",
-      backgroundColor: "#dc3545",
-      color: "white",
+      backgroundColor: theme.colors.error,
+      color: theme.colors.background,
       border: "none",
       borderRadius: "4px",
       cursor: "pointer",
@@ -45771,6 +47827,7 @@ function requireNodeInfoPanel() {
   NodeInfoPanel.NodeInfoPanel = void 0;
   const jsx_runtime_1 = require$$0;
   const react_1 = React2;
+  const industry_theme_1 = requireCjs();
   const iconResolver_1 = requireIconResolver();
   const COMMON_ICONS = [
     "Settings",
@@ -45823,12 +47880,13 @@ function requireNodeInfoPanel() {
   ];
   const NodeInfoPanel$1 = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate }) => {
     var _a, _b, _c, _d, _e2, _f, _g, _h, _i;
-    const color = (typeDefinition == null ? void 0 : typeDefinition.color) || "#888";
+    const { theme } = (0, industry_theme_1.useTheme)();
+    const nodeColor = ((_a = node.data) == null ? void 0 : _a.color) || (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.primary;
     const canEdit = Boolean(onUpdate);
     const [showIconPicker, setShowIconPicker] = (0, react_1.useState)(false);
     const [showDetails, setShowDetails] = (0, react_1.useState)(false);
-    const currentIcon = ((_a = node.data) == null ? void 0 : _a.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
-    const nameField = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? (_b = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _b[0] : null;
+    const currentIcon = ((_b = node.data) == null ? void 0 : _b.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
+    const nameField = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? (_c = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _c[0] : null;
     const displayFields = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? Object.entries(typeDefinition.dataSchema).filter(([, schema2]) => schema2.displayInLabel).map(([field]) => {
       var _a2;
       return {
@@ -45838,8 +47896,26 @@ function requireNodeInfoPanel() {
       };
     }) : [];
     const hasSchemaFields = displayFields.length > 0;
-    const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !["icon", "name", "description", "sources"].includes(key)) : [];
-    const sources = ((_c = node.data) == null ? void 0 : _c.sources) || [];
+    const internalFields = [
+      "icon",
+      "name",
+      "description",
+      "sources",
+      "color",
+      "stroke",
+      "width",
+      "height",
+      "canvasType",
+      "text",
+      "file",
+      "url",
+      "shape",
+      "states",
+      "actions",
+      "nodeType"
+    ];
+    const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key)) : [];
+    const sources = ((_d = node.data) == null ? void 0 : _d.sources) || [];
     const handleTypeChange = (newType) => {
       if (onUpdate && newType !== node.type) {
         onUpdate(node.id, { type: newType });
@@ -45857,75 +47933,78 @@ function requireNodeInfoPanel() {
       position: "absolute",
       top: "60px",
       right: "20px",
-      backgroundColor: "white",
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
       borderRadius: "8px",
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
       padding: "16px",
       minWidth: "250px",
       maxWidth: "350px",
-      zIndex: 1e3
+      zIndex: 1e3,
+      border: `1px solid ${theme.colors.border}`
     }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       marginBottom: "12px",
       paddingBottom: "8px",
-      borderBottom: `2px solid ${color}`
-    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px" }, children: ((_d = node.data) == null ? void 0 : _d.name) || node.id }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
+      borderBottom: `2px solid ${nodeColor}`
+    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px", color: nodeColor }, children: node.name || node.id }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
       border: "none",
       background: "none",
       cursor: "pointer",
       fontSize: "18px",
-      color: "#666",
+      color: theme.colors.textSecondary,
       padding: "0",
       width: "24px",
       height: "24px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: {
-      fontSize: "12px",
-      color: "#333"
-    }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => (0, jsx_runtime_1.jsx)("span", { style: {
+    }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => (0, jsx_runtime_1.jsx)("span", { style: {
       fontSize: "11px",
       padding: "2px 8px",
-      backgroundColor: "#f0f0f0",
+      backgroundColor: theme.colors.muted,
       borderRadius: "4px",
-      color: "#555"
+      color: theme.colors.textSecondary
     }, children: source }, index2)) })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowDetails(!showDetails), style: {
       width: "100%",
       padding: "8px",
-      backgroundColor: "#f5f5f5",
-      border: "1px solid #ddd",
+      backgroundColor: theme.colors.surface,
+      border: `1px solid ${theme.colors.border}`,
       borderRadius: "4px",
       cursor: "pointer",
       fontSize: "12px",
-      color: "#666",
+      color: theme.colors.textSecondary,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       gap: "6px",
       marginBottom: showDetails ? "12px" : "0"
-    }, children: [(0, jsx_runtime_1.jsx)("span", { style: { transform: showDetails ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }, children: "▼" }), showDetails ? "Hide Details" : "Show Details"] }), showDetails && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => canEdit && setShowIconPicker(!showIconPicker), disabled: !canEdit, style: {
+    }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+      transform: showDetails ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform 0.2s"
+    }, children: "▼" }), showDetails ? "Hide Details" : "Show Details"] }), showDetails && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => canEdit && setShowIconPicker(!showIconPicker), disabled: !canEdit, style: {
       display: "flex",
       alignItems: "center",
       gap: "8px",
       padding: "6px 10px",
-      backgroundColor: "#f5f5f5",
-      border: canEdit ? "1px dashed #ccc" : "1px solid #eee",
+      backgroundColor: theme.colors.surface,
+      border: canEdit ? `1px dashed ${theme.colors.border}` : `1px solid ${theme.colors.border}`,
       borderRadius: "4px",
       cursor: canEdit ? "pointer" : "default",
       fontSize: "12px",
       width: "100%",
-      justifyContent: "flex-start"
-    }, children: [(0, jsx_runtime_1.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(currentIcon, 18) }), (0, jsx_runtime_1.jsx)("span", { children: currentIcon || "No icon" }), canEdit && (0, jsx_runtime_1.jsx)("span", { style: { marginLeft: "auto", color: "#999", fontSize: "10px" }, children: "✎" })] }), showIconPicker && (0, jsx_runtime_1.jsx)("div", { style: {
+      justifyContent: "flex-start",
+      color: theme.colors.text
+    }, children: [(0, jsx_runtime_1.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(currentIcon, 18) }), (0, jsx_runtime_1.jsx)("span", { children: currentIcon || "No icon" }), canEdit && (0, jsx_runtime_1.jsx)("span", { style: { marginLeft: "auto", color: theme.colors.textMuted, fontSize: "10px" }, children: "✎" })] }), showIconPicker && (0, jsx_runtime_1.jsx)("div", { style: {
       position: "absolute",
       top: "100%",
       left: 0,
       right: 0,
       marginTop: "4px",
-      backgroundColor: "white",
-      border: "1px solid #ddd",
+      backgroundColor: theme.colors.background,
+      border: `1px solid ${theme.colors.border}`,
       borderRadius: "4px",
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
       padding: "8px",
@@ -45938,44 +48017,70 @@ function requireNodeInfoPanel() {
       gap: "4px"
     }, children: COMMON_ICONS.map((iconName) => (0, jsx_runtime_1.jsx)("button", { onClick: () => handleIconSelect(iconName), title: iconName, style: {
       padding: "6px",
-      border: currentIcon === iconName ? `2px solid ${color}` : "1px solid #eee",
+      border: currentIcon === iconName ? `2px solid ${nodeColor}` : `1px solid ${theme.colors.border}`,
       borderRadius: "4px",
-      backgroundColor: currentIcon === iconName ? "#f0f7ff" : "white",
+      backgroundColor: currentIcon === iconName ? theme.colors.highlight : theme.colors.background,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
-    }, children: (0, iconResolver_1.resolveIcon)(iconName, 16) }, iconName)) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Type" }), canEdit && availableNodeTypes && Object.keys(availableNodeTypes).length > 1 ? (0, jsx_runtime_1.jsx)("select", { value: node.type, onChange: (e) => handleTypeChange(e.target.value), style: {
+      justifyContent: "center",
+      color: theme.colors.text
+    }, children: (0, iconResolver_1.resolveIcon)(iconName, 16) }, iconName)) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Type" }), canEdit && availableNodeTypes && Object.keys(availableNodeTypes).length > 1 ? (0, jsx_runtime_1.jsx)("select", { value: node.type, onChange: (e) => handleTypeChange(e.target.value), style: {
       fontSize: "12px",
       padding: "4px 8px",
       borderRadius: "4px",
-      border: "1px solid #ccc",
-      backgroundColor: "white",
+      border: `1px solid ${theme.colors.border}`,
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
       cursor: "pointer",
       width: "100%"
     }, children: Object.entries(availableNodeTypes).map(([typeName, typeDef]) => (0, jsx_runtime_1.jsxs)("option", { value: typeName, children: [typeName, " (", typeDef.shape, ")"] }, typeName)) }) : (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "12px",
       padding: "4px 8px",
-      backgroundColor: color,
-      color: "white",
+      backgroundColor: nodeColor,
+      color: theme.colors.background,
       borderRadius: "4px",
       display: "inline-block"
-    }, children: node.type })] }), node.state && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "State" }), (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: node.type })] }), node.state && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "State" }), (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "12px",
       padding: "4px 8px",
-      backgroundColor: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node.state]) == null ? void 0 : _g.color) || "#888",
-      color: "white",
+      backgroundColor: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node.state]) == null ? void 0 : _g.color) || theme.colors.secondary,
+      color: theme.colors.background,
       borderRadius: "4px",
       display: "inline-block"
-    }, children: ((_i = (_h = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _h[node.state]) == null ? void 0 : _i.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Properties" }), displayFields.filter((f) => f.field !== nameField).map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && nodeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Data" }), nodeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "10px", color: "#999", marginTop: "12px", paddingTop: "8px", borderTop: "1px solid #eee" }, children: ["ID: ", node.id] })] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+    }, children: ((_i = (_h = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _h[node.state]) == null ? void 0 : _i.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textSecondary,
+      marginBottom: "8px",
+      fontWeight: "bold"
+    }, children: "Properties" }), displayFields.filter((f) => f.field !== nameField).map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textSecondary,
+      marginBottom: "2px"
+    }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && nodeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textSecondary,
+      marginBottom: "8px",
+      fontWeight: "bold"
+    }, children: "Data" }), nodeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textSecondary,
+      marginBottom: "2px"
+    }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+      fontSize: "10px",
+      color: theme.colors.textMuted,
+      marginTop: "12px",
+      paddingTop: "8px",
+      borderTop: `1px solid ${theme.colors.border}`
+    }, children: ["ID: ", node.id] })] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
       onDelete(node.id);
       onClose();
     }, style: {
       marginTop: "12px",
       width: "100%",
       padding: "8px 12px",
-      backgroundColor: "#dc3545",
-      color: "white",
+      backgroundColor: theme.colors.error,
+      color: theme.colors.background,
       border: "none",
       borderRadius: "4px",
       cursor: "pointer",
@@ -45997,6 +48102,7 @@ function requireGraphRenderer() {
     const react_1 = React2;
     const react_2 = /* @__PURE__ */ requireUmd();
     const principal_view_core_1 = require$$4;
+    const industry_theme_1 = requireCjs();
     const CustomNode_1 = requireCustomNode();
     const CustomEdge_1 = requireCustomEdge();
     const graphConverter_1 = requireGraphConverter();
@@ -46017,6 +48123,7 @@ function requireGraphRenderer() {
     });
     const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = true, showControls = true, showBackground = true, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef }) => {
       const { fitView } = (0, react_2.useReactFlow)();
+      const { theme } = (0, industry_theme_1.useTheme)();
       const [animationState, setAnimationState] = (0, react_1.useState)({
         nodeAnimations: {},
         edgeAnimations: {}
@@ -46125,12 +48232,15 @@ function requireGraphRenderer() {
             return { ...prev, createdEdges: newCreatedEdges };
           }
           if (edgeToDelete) {
-            const newDeletedEdges = [...prev.deletedEdges, {
-              id: edgeId,
-              from: edgeToDelete.from,
-              to: edgeToDelete.to,
-              type: edgeToDelete.type
-            }];
+            const newDeletedEdges = [
+              ...prev.deletedEdges,
+              {
+                id: edgeId,
+                from: edgeToDelete.from,
+                to: edgeToDelete.to,
+                type: edgeToDelete.type
+              }
+            ];
             return { ...prev, deletedEdges: newDeletedEdges };
           }
           return prev;
@@ -46178,7 +48288,10 @@ function requireGraphRenderer() {
         setLocalEdges((prev) => [...prev, newEdge]);
         updateEditState((prev) => ({
           ...prev,
-          createdEdges: [...prev.createdEdges, { id: edgeId, from, to: to2, type: type2, sourceHandle, targetHandle }]
+          createdEdges: [
+            ...prev.createdEdges,
+            { id: edgeId, from, to: to2, type: type2, sourceHandle, targetHandle }
+          ]
         }));
       }, [updateEditState]);
       const handleEdgeTypeSelect = (0, react_1.useCallback)((type2) => {
@@ -46236,20 +48349,26 @@ function requireGraphRenderer() {
             };
             return { ...prev, createdEdges: newCreatedEdges2 };
           }
-          const newDeletedEdges = [...prev.deletedEdges, {
-            id: oldEdge.id,
-            from: originalEdge.from,
-            to: originalEdge.to,
-            type: originalEdge.type
-          }];
-          const newCreatedEdges = [...prev.createdEdges, {
-            id: oldEdge.id,
-            from: newConnection.source,
-            to: newConnection.target,
-            type: originalEdge.type,
-            sourceHandle: newConnection.sourceHandle ?? void 0,
-            targetHandle: newConnection.targetHandle ?? void 0
-          }];
+          const newDeletedEdges = [
+            ...prev.deletedEdges,
+            {
+              id: oldEdge.id,
+              from: originalEdge.from,
+              to: originalEdge.to,
+              type: originalEdge.type
+            }
+          ];
+          const newCreatedEdges = [
+            ...prev.createdEdges,
+            {
+              id: oldEdge.id,
+              from: newConnection.source,
+              to: newConnection.target,
+              type: originalEdge.type,
+              sourceHandle: newConnection.sourceHandle ?? void 0,
+              targetHandle: newConnection.targetHandle ?? void 0
+            }
+          ];
           return { ...prev, deletedEdges: newDeletedEdges, createdEdges: newCreatedEdges };
         });
       }, [editable, localEdges, nodes, configuration.allowedConnections, updateEditState]);
@@ -46453,27 +48572,29 @@ function requireGraphRenderer() {
         }, 100);
         return () => clearTimeout(timeoutId);
       }, [baseNodesKey, fitView]);
-      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: "#e5e5e5", gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
         var _a;
         const nodeData = node.data;
-        return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || "#888";
+        return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
       }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0 }), selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
         position: "absolute",
         top: "50%",
         left: "50%",
         transform: "translate(-50%, -50%)",
-        backgroundColor: "white",
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
         borderRadius: "8px",
         boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
         padding: "16px",
         minWidth: "200px",
-        zIndex: 1e3
-      }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", marginBottom: "12px", fontSize: "14px" }, children: "Select Edge Type" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px", color: "#666", marginBottom: "12px" }, children: [pendingConnection.from, " → ", pendingConnection.to] }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: pendingConnection.validTypes.map((type2) => {
+        zIndex: 1e3,
+        border: `1px solid ${theme.colors.border}`
+      }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", marginBottom: "12px", fontSize: "14px" }, children: "Select Edge Type" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "12px", color: theme.colors.textSecondary, marginBottom: "12px" }, children: [pendingConnection.from, " → ", pendingConnection.to] }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: pendingConnection.validTypes.map((type2) => {
         const typeDefinition = configuration.edgeTypes[type2];
         return (0, jsx_runtime_1.jsx)("button", { onClick: () => handleEdgeTypeSelect(type2), style: {
           padding: "8px 12px",
-          backgroundColor: (typeDefinition == null ? void 0 : typeDefinition.color) || "#888",
-          color: "white",
+          backgroundColor: (typeDefinition == null ? void 0 : typeDefinition.color) || theme.colors.secondary,
+          color: theme.colors.background,
           border: "none",
           borderRadius: "4px",
           cursor: "pointer",
@@ -46485,9 +48606,9 @@ function requireGraphRenderer() {
         marginTop: "12px",
         width: "100%",
         padding: "8px 12px",
-        backgroundColor: "#f0f0f0",
-        color: "#666",
-        border: "none",
+        backgroundColor: theme.colors.surface,
+        color: theme.colors.textSecondary,
+        border: `1px solid ${theme.colors.border}`,
         borderRadius: "4px",
         cursor: "pointer",
         fontSize: "12px"
@@ -46504,6 +48625,7 @@ function requireGraphRenderer() {
         if (library == null ? void 0 : library.nodeComponents) {
           for (const [id, component] of Object.entries(library.nodeComponents)) {
             nodeTypes2[id] = {
+              description: component.description,
               shape: component.shape || "rectangle",
               icon: component.icon,
               color: component.color,
@@ -46528,6 +48650,7 @@ function requireGraphRenderer() {
         if ((_a = canvas.pv) == null ? void 0 : _a.nodeTypes) {
           for (const [id, def] of Object.entries(canvas.pv.nodeTypes)) {
             nodeTypes2[id] = {
+              description: def.description,
               shape: def.shape || "rectangle",
               icon: def.icon,
               color: def.color,
@@ -46540,7 +48663,16 @@ function requireGraphRenderer() {
           const nodeType = (vv == null ? void 0 : vv.nodeType) || node.type;
           if (!nodeTypes2[nodeType]) {
             const fillColor = (vv == null ? void 0 : vv.fill) || (typeof node.color === "string" ? node.color : void 0) || ((_c = (_b = vv == null ? void 0 : vv.states) == null ? void 0 : _b.idle) == null ? void 0 : _c.color);
+            let nodeDescription = `${nodeType} node`;
+            if (node.type === "text" && "text" in node) {
+              const lines = node.text.split("\n");
+              const descFromText = lines.slice(1).join("\n").trim();
+              if (descFromText) {
+                nodeDescription = descFromText;
+              }
+            }
             nodeTypes2[nodeType] = {
+              description: nodeDescription,
               shape: (vv == null ? void 0 : vv.shape) || "rectangle",
               icon: vv == null ? void 0 : vv.icon,
               color: fillColor,
@@ -46606,11 +48738,8 @@ function requireGraphRenderer() {
     }
     exports$1.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
       const { canvas, library, className, width = "100%", height = "100%" } = props;
+      const { theme } = (0, industry_theme_1.useTheme)();
       const canvasData = useCanvasToLegacy(canvas, library);
-      if (!canvasData) {
-        return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: (0, jsx_runtime_1.jsx)("p", { style: { color: "#666" }, children: "No canvas data provided." }) });
-      }
-      const { configuration, nodes, edges } = canvasData;
       const editStateRef = (0, react_1.useRef)(createEmptyEditState());
       (0, react_1.useImperativeHandle)(ref, () => ({
         getPendingChanges: () => {
@@ -46644,6 +48773,18 @@ function requireGraphRenderer() {
           return state.positionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
         }
       }), []);
+      if (!canvasData) {
+        return (0, jsx_runtime_1.jsx)("div", { className, style: {
+          width,
+          height,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: theme.colors.background,
+          color: theme.colors.textSecondary
+        }, children: (0, jsx_runtime_1.jsx)("p", { children: "No canvas data provided." }) });
+      }
+      const { configuration, nodes, edges } = canvasData;
       const { violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, onPendingChangesChange } = props;
       return (0, jsx_runtime_1.jsx)("div", { className, style: { width, height, position: "relative" }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, onPendingChangesChange, editStateRef }) }) });
     });