@principal-ade/industry-theme 0.1.2

package/dist/cjs/index.js

@@ -0,0 +1,1798 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = 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 to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(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)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  withTheme: () => withTheme,
+  useTheme: () => useTheme,
+  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,
+  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
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/glassmorphismTheme.ts
+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
+    }
+  }
+};
+// src/defaultThemes.ts
+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
+    }
+  }
+};
+
+// src/themes.ts
+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
+    }
+  }
+};
+// src/ThemeProvider.tsx
+var import_react = __toESM(require("react"));
+
+// src/themeHelpers.ts
+function overrideColors(theme, colors) {
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      ...colors
+    }
+  };
+}
+function makeTheme(baseTheme, overrides) {
+  return {
+    ...baseTheme,
+    ...overrides,
+    colors: {
+      ...baseTheme.colors,
+      ...overrides.colors
+    },
+    fonts: {
+      ...baseTheme.fonts,
+      ...overrides.fonts
+    }
+  };
+}
+function addMode(theme, modeName, colors, baseMode) {
+  let baseColors;
+  if (baseMode && theme.modes && theme.modes[baseMode]) {
+    baseColors = {
+      ...theme.colors,
+      ...theme.modes[baseMode]
+    };
+  } else {
+    baseColors = theme.colors;
+  }
+  const newMode = {
+    ...baseColors,
+    ...colors
+  };
+  return {
+    ...theme,
+    modes: {
+      ...theme.modes,
+      [modeName]: newMode
+    }
+  };
+}
+function getMode(theme, mode) {
+  if (!mode || !theme.modes || !theme.modes[mode]) {
+    return theme.colors;
+  }
+  return {
+    ...theme.colors,
+    ...theme.modes[mode]
+  };
+}
+
+// src/ThemeProvider.tsx
+var ThemeContext;
+var getThemeContext = () => {
+  if (typeof window !== "undefined") {
+    const globalWindow = window;
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = import_react.createContext(undefined);
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    if (!ThemeContext) {
+      ThemeContext = import_react.createContext(undefined);
+    }
+    return ThemeContext;
+  }
+};
+var ThemeContextSingleton = getThemeContext();
+var useTheme = () => {
+  const context = import_react.useContext(ThemeContextSingleton);
+  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_react.useState(initialMode);
+  const activeTheme = import_react.default.useMemo(() => {
+    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+      return customTheme;
+    }
+    return {
+      ...customTheme,
+      colors: getMode(customTheme, mode)
+    };
+  }, [customTheme, mode]);
+  import_react.useEffect(() => {
+    if (!initialMode) {
+      const savedMode = localStorage.getItem("principlemd-theme-mode");
+      if (savedMode) {
+        setMode(savedMode);
+      }
+    }
+  }, [initialMode]);
+  import_react.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_react.default.createElement(ThemeContextSingleton.Provider, {
+    value
+  }, children);
+};
+var withTheme = (Component) => {
+  return (props) => {
+    const { theme: theme2 } = useTheme();
+    return /* @__PURE__ */ import_react.default.createElement(Component, {
+      ...props,
+      theme: theme2
+    });
+  };
+};
+// src/utils.ts
+var getColor = (theme2, colorKey) => {
+  const colors = theme2.colors;
+  const value = colors[colorKey];
+  return typeof value === "string" ? value : colorKey;
+};
+var getSpace = (theme2, index) => {
+  return theme2.space[index] || 0;
+};
+var getFontSize = (theme2, index) => {
+  return theme2.fontSizes[index] || theme2.fontSizes[2];
+};
+var getRadius = (theme2, index) => {
+  return theme2.radii[index] || 0;
+};
+var getShadow = (theme2, index) => {
+  return theme2.shadows[index] || "none";
+};
+var getZIndex = (theme2, index) => {
+  return theme2.zIndices[index] || 0;
+};
+var responsive = (values) => {
+  return values.reduce((acc, value, index) => {
+    if (index === 0) {
+      return value;
+    }
+    return {
+      ...acc,
+      [`@media screen and (min-width: ${values[index - 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);
+};
+// src/ThemeShowcase.tsx
+var import_react2 = __toESM(require("react"));
+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_react2.default.createElement("div", {
+    style: containerStyle
+  }, title && /* @__PURE__ */ import_react2.default.createElement("h1", {
+    style: {
+      ...headingStyle,
+      fontSize: theme2.fontSizes[6],
+      marginBottom: theme2.space[4]
+    }
+  }, title), sections.includes("colors") && /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: sectionStyle
+  }, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    style: headingStyle
+  }, "Colors"), /* @__PURE__ */ import_react2.default.createElement("h3", {
+    style: subheadingStyle
+  }, "Primary Colors"), /* @__PURE__ */ import_react2.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_react2.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_react2.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_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[1],
+        fontWeight: theme2.fontWeights.medium
+      }
+    }, key), showValues && /* @__PURE__ */ import_react2.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[0],
+        color: theme2.colors.textSecondary
+      }
+    }, color)));
+  })), /* @__PURE__ */ import_react2.default.createElement("h3", {
+    style: subheadingStyle
+  }, "Status Colors"), /* @__PURE__ */ import_react2.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_react2.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_react2.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_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[1],
+        fontWeight: theme2.fontWeights.medium
+      }
+    }, key), showValues && /* @__PURE__ */ import_react2.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[0],
+        color: theme2.colors.textSecondary
+      }
+    }, color)));
+  })), /* @__PURE__ */ import_react2.default.createElement("h3", {
+    style: subheadingStyle
+  }, "Background Colors"), /* @__PURE__ */ import_react2.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_react2.default.createElement("div", {
+      key,
+      style: {
+        padding: theme2.space[3],
+        backgroundColor: color,
+        border: `1px solid ${theme2.colors.border}`,
+        borderRadius: theme2.radii[1]
+      }
+    }, /* @__PURE__ */ import_react2.default.createElement("div", {
+      style: {
+        fontFamily: theme2.fonts.monospace,
+        fontSize: theme2.fontSizes[1],
+        fontWeight: theme2.fontWeights.medium
+      }
+    }, key), showValues && /* @__PURE__ */ import_react2.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_react2.default.createElement("div", {
+    style: sectionStyle
+  }, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    style: headingStyle
+  }, "Typography"), /* @__PURE__ */ import_react2.default.createElement("h3", {
+    style: subheadingStyle
+  }, "Font Families"), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: { marginBottom: theme2.space[4] }
+  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      fontFamily: theme2.fonts.heading,
+      fontSize: theme2.fontSizes[4],
+      marginBottom: theme2.space[2]
+    }
+  }, "Heading Font: ", showValues && /* @__PURE__ */ import_react2.default.createElement("span", {
+    style: {
+      fontFamily: theme2.fonts.monospace,
+      fontSize: theme2.fontSizes[1],
+      color: theme2.colors.textSecondary
+    }
+  }, " ", theme2.fonts.heading)), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      fontFamily: theme2.fonts.body,
+      fontSize: theme2.fontSizes[2],
+      marginBottom: theme2.space[2]
+    }
+  }, "Body Font: ", showValues && /* @__PURE__ */ import_react2.default.createElement("span", {
+    style: {
+      fontFamily: theme2.fonts.monospace,
+      fontSize: theme2.fontSizes[1],
+      color: theme2.colors.textSecondary
+    }
+  }, " ", theme2.fonts.body)), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      fontFamily: theme2.fonts.monospace,
+      fontSize: theme2.fontSizes[2]
+    }
+  }, "Monospace Font: ", showValues && /* @__PURE__ */ import_react2.default.createElement("span", {
+    style: {
+      fontSize: theme2.fontSizes[1],
+      color: theme2.colors.textSecondary
+    }
+  }, " ", theme2.fonts.monospace))), /* @__PURE__ */ import_react2.default.createElement("h3", {
+    style: subheadingStyle
+  }, "Font Sizes"), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: { marginBottom: theme2.space[4] }
+  }, theme2.fontSizes.map((size, index) => /* @__PURE__ */ import_react2.default.createElement("div", {
+    key: index,
+    style: {
+      fontSize: size,
+      lineHeight: theme2.lineHeights.body,
+      marginBottom: theme2.space[1]
+    }
+  }, "Size ", index, ": Sample Text ", showValues && `(${size}px)`))), /* @__PURE__ */ import_react2.default.createElement("h3", {
+    style: subheadingStyle
+  }, "Font Weights"), /* @__PURE__ */ import_react2.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_react2.default.createElement("div", {
+    key: name,
+    style: {
+      fontWeight: weight,
+      fontSize: theme2.fontSizes[2]
+    }
+  }, name, " ", showValues && `(${weight})`)))), sections.includes("spacing") && /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: sectionStyle
+  }, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    style: headingStyle
+  }, "Spacing"), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: { display: "flex", flexDirection: "column", gap: theme2.space[2] }
+  }, theme2.space.map((space, index) => /* @__PURE__ */ import_react2.default.createElement("div", {
+    key: index,
+    style: { display: "flex", alignItems: "center" }
+  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      width: 60,
+      fontFamily: theme2.fonts.monospace,
+      fontSize: theme2.fontSizes[1],
+      color: theme2.colors.textSecondary
+    }
+  }, "[", index, "]"), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      height: 24,
+      width: space,
+      backgroundColor: theme2.colors.primary,
+      borderRadius: theme2.radii[1]
+    }
+  }), showValues && /* @__PURE__ */ import_react2.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_react2.default.createElement("div", {
+    style: sectionStyle
+  }, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    style: headingStyle
+  }, "Border Radii"), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+      gap: theme2.space[3]
+    }
+  }, theme2.radii.map((radius, index) => /* @__PURE__ */ import_react2.default.createElement("div", {
+    key: index,
+    style: { textAlign: "center" }
+  }, /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      width: 80,
+      height: 80,
+      backgroundColor: theme2.colors.primary,
+      borderRadius: radius,
+      marginBottom: theme2.space[1],
+      margin: "0 auto"
+    }
+  }), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      fontFamily: theme2.fonts.monospace,
+      fontSize: theme2.fontSizes[0],
+      color: theme2.colors.textSecondary
+    }
+  }, "[", index, "] ", showValues && `${radius}px`))))), sections.includes("shadows") && /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: sectionStyle
+  }, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    style: headingStyle
+  }, "Shadows"), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
+      gap: theme2.space[4]
+    }
+  }, theme2.shadows.map((shadow, index) => /* @__PURE__ */ import_react2.default.createElement("div", {
+    key: index,
+    style: { textAlign: "center" }
+  }, /* @__PURE__ */ import_react2.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_react2.default.createElement("div", {
+    style: {
+      fontFamily: theme2.fonts.monospace,
+      fontSize: theme2.fontSizes[0],
+      color: theme2.colors.textSecondary
+    }
+  }, "Shadow [", index, "]"), showValues && /* @__PURE__ */ import_react2.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_react2.default.createElement("div", {
+    style: sectionStyle
+  }, /* @__PURE__ */ import_react2.default.createElement("h2", {
+    style: headingStyle
+  }, "Available Modes"), /* @__PURE__ */ import_react2.default.createElement("div", {
+    style: {
+      display: "flex",
+      gap: theme2.space[2],
+      flexWrap: "wrap"
+    }
+  }, /* @__PURE__ */ import_react2.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_react2.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)))));
+};
+
+// src/index.ts
+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;