@snagtag/design-system 0.2.0

package/dist/index.cjs

@@ -0,0 +1,3239 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BUILT_IN_PRESETS: () => BUILT_IN_PRESETS,
+  COLOUR_BLINDNESS_TYPES: () => COLOUR_BLINDNESS_TYPES,
+  DENSITY_CONFIGS: () => DENSITY_CONFIGS,
+  EASING_PRESETS: () => EASING_PRESETS,
+  FONT_PAIRINGS: () => FONT_PAIRINGS,
+  SCALE_RATIOS: () => SCALE_RATIOS,
+  SURFACE_DEFINITIONS: () => SURFACE_DEFINITIONS,
+  THEME_CATEGORIES: () => THEME_CATEGORIES,
+  THEME_DEFAULTS: () => THEME_DEFAULTS,
+  THEME_KEY_TO_CSS: () => THEME_KEY_TO_CSS,
+  TOKEN_REGISTRY: () => TOKEN_REGISTRY,
+  addCustomCategory: () => addCustomCategory,
+  addExtractedToken: () => addExtractedToken,
+  adjustSemanticForDark: () => adjustSemanticForDark,
+  applyAddCategory: () => applyAddCategory,
+  applyBulkChange: () => applyBulkChange,
+  applyBulkMove: () => applyBulkMove,
+  applyChange: () => applyChange,
+  applyDarkModeToDOM: () => applyDarkModeToDOM,
+  applyDensity: () => applyDensity,
+  applyDensityToDOM: () => applyDensityToDOM,
+  applyExtract: () => applyExtract,
+  applyMove: () => applyMove,
+  applySurface: () => applySurface,
+  applySurfaceToDOM: () => applySurfaceToDOM,
+  applyThemeToDOM: () => applyThemeToDOM,
+  auditReportToMarkdown: () => auditReportToMarkdown,
+  bulkMoveTokens: () => bulkMoveTokens,
+  calculateQualityScore: () => calculateQualityScore2,
+  captureSnapshot: () => captureSnapshot,
+  checkConsistency: () => checkConsistency2,
+  clampControlPoint: () => clampControlPoint,
+  clearSnapshots: () => clearSnapshots,
+  clearSurface: () => clearSurface,
+  clearThemeFromDOM: () => clearThemeFromDOM,
+  clearUsageCache: () => clearUsageCache,
+  contrastRatio: () => contrastRatio,
+  countTokenUsage: () => countTokenUsage,
+  createOverlay: () => createOverlay,
+  createReassignmentState: () => createReassignmentState,
+  createThemeEditorState: () => createThemeEditorState,
+  darken: () => darken,
+  downloadAuditReport: () => downloadAuditReport,
+  downloadStyleGuide: () => downloadStyleGuide,
+  downloadThemeAsJSON: () => downloadThemeAsJSON,
+  downloadW3CTokens: () => downloadW3CTokens,
+  ensureContrastOnWhite: () => ensureContrastOnWhite,
+  exportTheme: () => exportTheme,
+  exportToW3CFormat: () => exportToW3CFormat,
+  extractToken: () => extractToken,
+  findContrastIssues: () => findContrastIssues2,
+  findPreset: () => findPreset,
+  findPresetByValue: () => findPresetByValue,
+  findToken: () => findToken,
+  findUnusedTokens: () => findUnusedTokens,
+  formatCubicBezier: () => formatCubicBezier,
+  generateAuditReport: () => generateAuditReport,
+  generateDarkTheme: () => generateDarkTheme,
+  generateScale: () => generateScale,
+  generateStyleGuide: () => generateStyleGuide,
+  generateTypeScale: () => generateTypeScale,
+  getActiveDensity: () => getActiveDensity,
+  getActiveSurface: () => getActiveSurface,
+  getAllCategoryLabels: () => getAllCategoryLabels,
+  getDensityCSS: () => getDensityCSS,
+  getDependents: () => getDependents,
+  getEffectiveCategories: () => getEffectiveCategories,
+  getOpeningSnapshot: () => getOpeningSnapshot,
+  getPresetsByCategory: () => getPresetsByCategory,
+  getSnapshot: () => getSnapshot,
+  getSurfaceDefinition: () => getSurfaceDefinition,
+  getSurfaceOverrides: () => getSurfaceOverrides,
+  getTokenCategory: () => getTokenCategory,
+  getTokenChain: () => getTokenChain,
+  getTokenUsageCount: () => getTokenUsageCount,
+  getTokenUsageStats: () => getTokenUsageStats,
+  hasExtractedToken: () => hasExtractedToken,
+  hexToHSL: () => hexToHSL,
+  hexToHsl: () => hexToHsl,
+  hslToHex: () => hslToHex,
+  hslToHexDark: () => hslToHex2,
+  invertLightness: () => invertLightness,
+  isDark: () => isDark,
+  isDarkMode: () => isDarkMode,
+  lighten: () => lighten,
+  luminance: () => luminance,
+  makePreset: () => makePreset,
+  markSaved: () => markSaved,
+  moveToken: () => moveToken,
+  parseCubicBezier: () => parseCubicBezier,
+  readSnapshots: () => readSnapshots,
+  readThemeFromFile: () => readThemeFromFile,
+  redo: () => redo,
+  redoReassignment: () => redoReassignment,
+  resetToDefaults: () => resetToDefaults,
+  resolveMode: () => resolveMode,
+  rotateHue: () => rotateHue,
+  sampleBezierCurve: () => sampleBezierCurve,
+  setDarkMode: () => setDarkMode,
+  simulateColourBlindness: () => simulateColourBlindness,
+  simulateThemeColourBlindness: () => simulateThemeColourBlindness,
+  snapToGrid: () => snapToGrid,
+  suggestFix: () => suggestFix,
+  suggestPairings: () => suggestPairings,
+  suggestPalettes: () => suggestPalettes,
+  suggestTokenName: () => suggestTokenName,
+  systemPrefersDark: () => systemPrefersDark,
+  themesAreEqual: () => themesAreEqual,
+  typeScaleToCSSVars: () => typeScaleToCSSVars,
+  undo: () => undo,
+  undoReassignment: () => undoReassignment,
+  validateImport: () => validateImport,
+  validateTokenName: () => validateTokenName
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/colour-utils.ts
+function lighten(hex, amount) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const lr = Math.round(r + (255 - r) * amount);
+  const lg = Math.round(g + (255 - g) * amount);
+  const lb = Math.round(b + (255 - b) * amount);
+  return `#${lr.toString(16).padStart(2, "0")}${lg.toString(16).padStart(2, "0")}${lb.toString(16).padStart(2, "0")}`;
+}
+function darken(hex, amount) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const dr = Math.round(r * (1 - amount));
+  const dg = Math.round(g * (1 - amount));
+  const db = Math.round(b * (1 - amount));
+  return `#${dr.toString(16).padStart(2, "0")}${dg.toString(16).padStart(2, "0")}${db.toString(16).padStart(2, "0")}`;
+}
+function luminance(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const sR = r <= 0.03928 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4;
+  const sG = g <= 0.03928 ? g / 12.92 : ((g + 0.055) / 1.055) ** 2.4;
+  const sB = b <= 0.03928 ? b / 12.92 : ((b + 0.055) / 1.055) ** 2.4;
+  return 0.2126 * sR + 0.7152 * sG + 0.0722 * sB;
+}
+function isDark(hex) {
+  return luminance(hex) < 0.4;
+}
+function contrastRatio(fg, bg) {
+  const l1 = luminance(fg);
+  const l2 = luminance(bg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function ensureContrastOnWhite(hex) {
+  const white = "#ffffff";
+  let colour = hex;
+  let attempts = 0;
+  while (contrastRatio(colour, white) < 4.5 && attempts < 20) {
+    colour = darken(colour, 0.05);
+    attempts++;
+  }
+  return colour;
+}
+function hexToHSL(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+        break;
+      case g:
+        h = ((b - r) / d + 2) * 60;
+        break;
+      case b:
+        h = ((r - g) / d + 4) * 60;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 10) / 10,
+    s: Math.round(s * 1e3) / 10,
+    l: Math.round(l * 1e3) / 10
+  };
+}
+function hslToHex(hsl) {
+  const { h, s: sp, l: lp } = hsl;
+  const s = sp / 100;
+  const l = lp / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toHex = (v) => Math.round((v + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function rotateHue(hsl, degrees) {
+  return {
+    ...hsl,
+    h: ((hsl.h + degrees) % 360 + 360) % 360
+  };
+}
+function generateScale(hex) {
+  return [
+    lighten(hex, 0.95),
+    lighten(hex, 0.9),
+    lighten(hex, 0.8),
+    lighten(hex, 0.65),
+    lighten(hex, 0.45),
+    hex,
+    darken(hex, 0.1),
+    darken(hex, 0.2),
+    darken(hex, 0.35),
+    darken(hex, 0.5),
+    darken(hex, 0.65)
+  ];
+}
+function averageContrast(colours) {
+  const white = "#ffffff";
+  const dark = "#1e293b";
+  let total = 0;
+  let count = 0;
+  for (const c of colours) {
+    total += contrastRatio(c, white);
+    total += contrastRatio(c, dark);
+    count += 2;
+  }
+  return count > 0 ? Math.round(total / count * 10) / 10 : 0;
+}
+function suggestPalettes(primaryHex) {
+  const hsl = hexToHSL(primaryHex);
+  const complementary = hslToHex(rotateHue(hsl, 180));
+  const analogous1 = hslToHex(rotateHue(hsl, 30));
+  const analogous2 = hslToHex(rotateHue(hsl, -30));
+  const triadic1 = hslToHex(rotateHue(hsl, 120));
+  const triadic2 = hslToHex(rotateHue(hsl, -120));
+  const split1 = hslToHex(rotateHue(hsl, 150));
+  const split2 = hslToHex(rotateHue(hsl, 210));
+  return [
+    {
+      type: "complementary",
+      colours: [primaryHex, complementary],
+      label: "Complementary palette",
+      description: "Opposite on the colour wheel - maximum contrast and visual energy.",
+      contrastScore: averageContrast([primaryHex, complementary])
+    },
+    {
+      type: "analogous",
+      colours: [analogous2, primaryHex, analogous1],
+      label: "Analogous palette",
+      description: "Neighbouring hues - harmonious and easy on the eye.",
+      contrastScore: averageContrast([analogous2, primaryHex, analogous1])
+    },
+    {
+      type: "triadic",
+      colours: [primaryHex, triadic1, triadic2],
+      label: "Triadic palette",
+      description: "Three equally-spaced hues - vibrant and balanced.",
+      contrastScore: averageContrast([primaryHex, triadic1, triadic2])
+    },
+    {
+      type: "split-complementary",
+      colours: [primaryHex, split1, split2],
+      label: "Split-complementary palette",
+      description: "Primary plus two colours adjacent to its complement - strong contrast with less tension.",
+      contrastScore: averageContrast([primaryHex, split1, split2])
+    }
+  ];
+}
+
+// src/theme-defaults.ts
+var THEME_DEFAULTS = {
+  // Primitives
+  primaryColor: "#2563eb",
+  primaryHoverColor: "#1d4ed8",
+  primaryLightColor: "#dbeafe",
+  secondaryColor: "#64748b",
+  accentColor: "#f59e0b",
+  // Sidebar
+  sidebarBg: "#ffffff",
+  sidebarText: "#475569",
+  sidebarActiveBg: "",
+  // empty = auto-derive from primary
+  // Semantic colours
+  successColor: "#10b981",
+  successLightColor: "#d1fae5",
+  warningColor: "#f59e0b",
+  warningLightColor: "#fef3c7",
+  errorColor: "#ef4444",
+  errorLightColor: "#fee2e2",
+  infoColor: "#3b82f6",
+  infoLightColor: "#dbeafe",
+  // Surface
+  surfacePageColor: "#f8fafc",
+  surfaceCardColor: "#ffffff",
+  surfaceModalColor: "#ffffff",
+  // Interactive
+  focusRingColor: "#3b82f6",
+  linkColor: "#2563eb",
+  linkHoverColor: "#1d4ed8",
+  // Button - primary
+  btnPrimaryBg: "#2563eb",
+  btnPrimaryText: "#ffffff",
+  btnPrimaryHover: "#1d4ed8",
+  btnPrimaryDisabled: "#93c5fd",
+  // Button - secondary
+  btnSecondaryBg: "#ffffff",
+  btnSecondaryText: "#334155",
+  btnSecondaryBorder: "#cbd5e1",
+  btnSecondaryHover: "#f8fafc",
+  // Button - danger
+  btnDangerBg: "#ef4444",
+  btnDangerText: "#ffffff",
+  btnDangerHover: "#dc2626",
+  btnDangerDisabled: "#fca5a5",
+  // Button - ghost
+  btnGhostText: "#475569",
+  btnGhostHoverBg: "#f1f5f9",
+  btnGhostHoverText: "#0f172a",
+  // Input
+  inputBg: "#ffffff",
+  inputText: "#0f172a",
+  inputBorder: "#cbd5e1",
+  inputPlaceholder: "#94a3b8",
+  inputFocusBorder: "#3b82f6",
+  inputFocusRing: "#3b82f6",
+  inputDisabledBg: "#f8fafc",
+  inputDisabledText: "#64748b",
+  inputErrorBorder: "#f87171",
+  inputErrorFocus: "#ef4444",
+  // Card
+  cardBg: "#ffffff",
+  cardBorder: "#e2e8f0",
+  // Modal
+  modalBg: "#ffffff",
+  modalBorder: "#e2e8f0",
+  // Table
+  tableHeaderBg: "#f8fafc",
+  tableHeaderText: "#334155",
+  tableBorder: "#e2e8f0",
+  tableRowHover: "#f8fafc",
+  tableRowSelected: "#eff6ff",
+  tableStripe: "#f8fafc",
+  // Badge
+  badgeNeutralBg: "#f1f5f9",
+  badgeNeutralText: "#334155",
+  badgeInfoBg: "#dbeafe",
+  badgeInfoText: "#1d4ed8",
+  badgeSuccessBg: "#d1fae5",
+  badgeSuccessText: "#047857",
+  badgeWarningBg: "#fef3c7",
+  badgeWarningText: "#b45309",
+  badgeDangerBg: "#fee2e2",
+  badgeDangerText: "#b91c1c"
+};
+var THEME_KEY_TO_CSS = {
+  // Primitives
+  primaryColor: "--color-brand-600",
+  primaryHoverColor: "--color-brand-700",
+  primaryLightColor: "--color-brand-100",
+  secondaryColor: "--color-ink-500",
+  accentColor: "--color-accent",
+  // Sidebar
+  sidebarBg: "--color-sidebar-bg",
+  sidebarText: "--color-sidebar-text",
+  // Semantic colours
+  successColor: "--color-success",
+  successLightColor: "--color-success-light",
+  warningColor: "--color-warning",
+  warningLightColor: "--color-warning-light",
+  errorColor: "--color-error",
+  errorLightColor: "--color-error-light",
+  infoColor: "--color-info",
+  infoLightColor: "--color-info-light",
+  // Surface
+  surfacePageColor: "--color-surface-page",
+  surfaceCardColor: "--color-surface-card",
+  surfaceModalColor: "--color-surface-modal",
+  // Interactive
+  focusRingColor: "--color-focus-ring",
+  linkColor: "--color-link",
+  linkHoverColor: "--color-link-hover",
+  // Button - primary
+  btnPrimaryBg: "--color-btn-primary-bg",
+  btnPrimaryText: "--color-btn-primary-text",
+  btnPrimaryHover: "--color-btn-primary-hover",
+  btnPrimaryDisabled: "--color-btn-primary-disabled",
+  // Button - secondary
+  btnSecondaryBg: "--color-btn-secondary-bg",
+  btnSecondaryText: "--color-btn-secondary-text",
+  btnSecondaryBorder: "--color-btn-secondary-border",
+  btnSecondaryHover: "--color-btn-secondary-hover",
+  // Button - danger
+  btnDangerBg: "--color-btn-danger-bg",
+  btnDangerText: "--color-btn-danger-text",
+  btnDangerHover: "--color-btn-danger-hover",
+  btnDangerDisabled: "--color-btn-danger-disabled",
+  // Button - ghost
+  btnGhostText: "--color-btn-ghost-text",
+  btnGhostHoverBg: "--color-btn-ghost-hover-bg",
+  btnGhostHoverText: "--color-btn-ghost-hover-text",
+  // Input
+  inputBg: "--color-input-bg",
+  inputText: "--color-input-text",
+  inputBorder: "--color-input-border",
+  inputPlaceholder: "--color-input-placeholder",
+  inputFocusBorder: "--color-input-focus-border",
+  inputFocusRing: "--color-input-focus-ring",
+  inputDisabledBg: "--color-input-disabled-bg",
+  inputDisabledText: "--color-input-disabled-text",
+  inputErrorBorder: "--color-input-error-border",
+  inputErrorFocus: "--color-input-error-focus",
+  // Card
+  cardBg: "--color-card-bg",
+  cardBorder: "--color-card-border",
+  // Modal
+  modalBg: "--color-modal-bg",
+  modalBorder: "--color-modal-border",
+  // Table
+  tableHeaderBg: "--color-table-header-bg",
+  tableHeaderText: "--color-table-header-text",
+  tableBorder: "--color-table-border",
+  tableRowHover: "--color-table-row-hover",
+  tableRowSelected: "--color-table-row-selected",
+  tableStripe: "--color-table-stripe",
+  // Badge
+  badgeNeutralBg: "--color-badge-neutral-bg",
+  badgeNeutralText: "--color-badge-neutral-text",
+  badgeInfoBg: "--color-badge-info-bg",
+  badgeInfoText: "--color-badge-info-text",
+  badgeSuccessBg: "--color-badge-success-bg",
+  badgeSuccessText: "--color-badge-success-text",
+  badgeWarningBg: "--color-badge-warning-bg",
+  badgeWarningText: "--color-badge-warning-text",
+  badgeDangerBg: "--color-badge-danger-bg",
+  badgeDangerText: "--color-badge-danger-text"
+};
+var THEME_CATEGORIES = [
+  {
+    label: "Brand",
+    keys: ["primaryColor", "primaryHoverColor", "primaryLightColor", "secondaryColor", "accentColor"]
+  },
+  {
+    label: "Sidebar",
+    keys: ["sidebarBg", "sidebarText", "sidebarActiveBg"]
+  },
+  {
+    label: "Semantic Colours",
+    keys: [
+      "successColor",
+      "successLightColor",
+      "warningColor",
+      "warningLightColor",
+      "errorColor",
+      "errorLightColor",
+      "infoColor",
+      "infoLightColor"
+    ]
+  },
+  {
+    label: "Surface",
+    keys: ["surfacePageColor", "surfaceCardColor", "surfaceModalColor"]
+  },
+  {
+    label: "Interactive",
+    keys: ["focusRingColor", "linkColor", "linkHoverColor"]
+  },
+  {
+    label: "Button - Primary",
+    keys: ["btnPrimaryBg", "btnPrimaryText", "btnPrimaryHover", "btnPrimaryDisabled"]
+  },
+  {
+    label: "Button - Secondary",
+    keys: ["btnSecondaryBg", "btnSecondaryText", "btnSecondaryBorder", "btnSecondaryHover"]
+  },
+  {
+    label: "Button - Danger",
+    keys: ["btnDangerBg", "btnDangerText", "btnDangerHover", "btnDangerDisabled"]
+  },
+  {
+    label: "Button - Ghost",
+    keys: ["btnGhostText", "btnGhostHoverBg", "btnGhostHoverText"]
+  },
+  {
+    label: "Input",
+    keys: [
+      "inputBg",
+      "inputText",
+      "inputBorder",
+      "inputPlaceholder",
+      "inputFocusBorder",
+      "inputFocusRing",
+      "inputDisabledBg",
+      "inputDisabledText",
+      "inputErrorBorder",
+      "inputErrorFocus"
+    ]
+  },
+  {
+    label: "Card",
+    keys: ["cardBg", "cardBorder"]
+  },
+  {
+    label: "Modal",
+    keys: ["modalBg", "modalBorder"]
+  },
+  {
+    label: "Table",
+    keys: ["tableHeaderBg", "tableHeaderText", "tableBorder", "tableRowHover", "tableRowSelected", "tableStripe"]
+  },
+  {
+    label: "Badge",
+    keys: [
+      "badgeNeutralBg",
+      "badgeNeutralText",
+      "badgeInfoBg",
+      "badgeInfoText",
+      "badgeSuccessBg",
+      "badgeSuccessText",
+      "badgeWarningBg",
+      "badgeWarningText",
+      "badgeDangerBg",
+      "badgeDangerText"
+    ]
+  }
+];
+
+// src/theme-editor-state.ts
+var MAX_UNDO = 10;
+function computeDirty(current, saved) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(current), ...Object.keys(saved)]);
+  for (const key of keys) {
+    if ((current[key] ?? "") !== (saved[key] ?? "")) return true;
+  }
+  return false;
+}
+function createThemeEditorState(initial) {
+  return {
+    current: { ...initial },
+    saved: { ...initial },
+    undoStack: [],
+    redoStack: [],
+    isDirty: false
+  };
+}
+function applyChange(state, key, value) {
+  const undoStack = [...state.undoStack, { ...state.current }];
+  if (undoStack.length > MAX_UNDO) undoStack.shift();
+  const current = { ...state.current, [key]: value };
+  return {
+    current,
+    saved: state.saved,
+    undoStack,
+    redoStack: [],
+    // new change clears redo
+    isDirty: computeDirty(current, state.saved)
+  };
+}
+function applyBulkChange(state, changes) {
+  const undoStack = [...state.undoStack, { ...state.current }];
+  if (undoStack.length > MAX_UNDO) undoStack.shift();
+  const current = { ...state.current, ...changes };
+  return {
+    current,
+    saved: state.saved,
+    undoStack,
+    redoStack: [],
+    isDirty: computeDirty(current, state.saved)
+  };
+}
+function undo(state) {
+  if (state.undoStack.length === 0) return state;
+  const undoStack = [...state.undoStack];
+  const previous = undoStack.pop();
+  return {
+    current: previous,
+    saved: state.saved,
+    undoStack,
+    redoStack: [...state.redoStack, { ...state.current }],
+    isDirty: computeDirty(previous, state.saved)
+  };
+}
+function redo(state) {
+  if (state.redoStack.length === 0) return state;
+  const redoStack = [...state.redoStack];
+  const next = redoStack.pop();
+  return {
+    current: next,
+    saved: state.saved,
+    undoStack: [...state.undoStack, { ...state.current }],
+    redoStack,
+    isDirty: computeDirty(next, state.saved)
+  };
+}
+function markSaved(state) {
+  return {
+    ...state,
+    saved: { ...state.current },
+    isDirty: false
+  };
+}
+function resetToDefaults(state, defaults) {
+  const undoStack = [...state.undoStack, { ...state.current }];
+  if (undoStack.length > MAX_UNDO) undoStack.shift();
+  return {
+    current: { ...defaults },
+    saved: state.saved,
+    undoStack,
+    redoStack: [],
+    isDirty: computeDirty(defaults, state.saved)
+  };
+}
+
+// src/token-registry.ts
+var BRAND_PRIMITIVES = [
+  { cssVar: "--color-brand-50", label: "Brand 50", category: "colour", defaultValue: "#eff6ff" },
+  { cssVar: "--color-brand-100", label: "Brand 100", category: "colour", defaultValue: "#dbeafe", themeKey: "primaryLightColor" },
+  { cssVar: "--color-brand-200", label: "Brand 200", category: "colour", defaultValue: "#bfdbfe" },
+  { cssVar: "--color-brand-300", label: "Brand 300", category: "colour", defaultValue: "#93c5fd" },
+  { cssVar: "--color-brand-400", label: "Brand 400", category: "colour", defaultValue: "#60a5fa" },
+  { cssVar: "--color-brand-500", label: "Brand 500", category: "colour", defaultValue: "#3b82f6" },
+  { cssVar: "--color-brand-600", label: "Brand 600", category: "colour", defaultValue: "#2563eb", themeKey: "primaryColor" },
+  { cssVar: "--color-brand-700", label: "Brand 700", category: "colour", defaultValue: "#1d4ed8", themeKey: "primaryHoverColor" },
+  { cssVar: "--color-brand-800", label: "Brand 800", category: "colour", defaultValue: "#1e40af" },
+  { cssVar: "--color-brand-900", label: "Brand 900", category: "colour", defaultValue: "#1e3a8a" },
+  { cssVar: "--color-brand-950", label: "Brand 950", category: "colour", defaultValue: "#172554" }
+];
+var INK_PRIMITIVES = [
+  { cssVar: "--color-ink-50", label: "Ink 50", category: "colour", defaultValue: "#f8fafc" },
+  { cssVar: "--color-ink-100", label: "Ink 100", category: "colour", defaultValue: "#f1f5f9" },
+  { cssVar: "--color-ink-200", label: "Ink 200", category: "colour", defaultValue: "#e2e8f0" },
+  { cssVar: "--color-ink-300", label: "Ink 300", category: "colour", defaultValue: "#cbd5e1" },
+  { cssVar: "--color-ink-400", label: "Ink 400", category: "colour", defaultValue: "#94a3b8" },
+  { cssVar: "--color-ink-500", label: "Ink 500", category: "colour", defaultValue: "#64748b", themeKey: "secondaryColor" },
+  { cssVar: "--color-ink-600", label: "Ink 600", category: "colour", defaultValue: "#475569" },
+  { cssVar: "--color-ink-700", label: "Ink 700", category: "colour", defaultValue: "#334155" },
+  { cssVar: "--color-ink-800", label: "Ink 800", category: "colour", defaultValue: "#1e293b" },
+  { cssVar: "--color-ink-900", label: "Ink 900", category: "colour", defaultValue: "#0f172a" },
+  { cssVar: "--color-ink-950", label: "Ink 950", category: "colour", defaultValue: "#020617" }
+];
+var ACCENT_PRIMITIVES = [
+  { cssVar: "--color-accent", label: "Accent", category: "colour", defaultValue: "#f59e0b", themeKey: "accentColor" },
+  { cssVar: "--color-accent-light", label: "Accent Light", category: "colour", defaultValue: "#fef3c7" },
+  { cssVar: "--color-accent-hover", label: "Accent Hover", category: "colour", defaultValue: "#d97706" }
+];
+var SIDEBAR_TOKENS = [
+  { cssVar: "--color-sidebar-bg", label: "Sidebar Background", category: "colour", defaultValue: "#ffffff", themeKey: "sidebarBg" },
+  { cssVar: "--color-sidebar-text", label: "Sidebar Text", category: "colour", defaultValue: "#475569", themeKey: "sidebarText" },
+  { cssVar: "--color-sidebar-border", label: "Sidebar Border", category: "colour", defaultValue: "#e2e8f0" },
+  { cssVar: "--color-sidebar-hover", label: "Sidebar Hover", category: "colour", defaultValue: "#f1f5f9" },
+  { cssVar: "--color-sidebar-active-bg", label: "Sidebar Active Background", category: "colour", defaultValue: "#eff6ff", references: "--color-brand-50", themeKey: "sidebarActiveBg" },
+  { cssVar: "--color-sidebar-active-text", label: "Sidebar Active Text", category: "colour", defaultValue: "#1d4ed8", references: "--color-brand-700" }
+];
+var SEMANTIC_COLOURS = [
+  { cssVar: "--color-success", label: "Success", category: "colour", defaultValue: "#10b981", themeKey: "successColor" },
+  { cssVar: "--color-success-light", label: "Success Light", category: "colour", defaultValue: "#d1fae5", themeKey: "successLightColor" },
+  { cssVar: "--color-warning", label: "Warning", category: "colour", defaultValue: "#f59e0b", themeKey: "warningColor" },
+  { cssVar: "--color-warning-light", label: "Warning Light", category: "colour", defaultValue: "#fef3c7", themeKey: "warningLightColor" },
+  { cssVar: "--color-error", label: "Error", category: "colour", defaultValue: "#ef4444", themeKey: "errorColor" },
+  { cssVar: "--color-error-light", label: "Error Light", category: "colour", defaultValue: "#fee2e2", themeKey: "errorLightColor" },
+  { cssVar: "--color-info", label: "Info", category: "colour", defaultValue: "#3b82f6", themeKey: "infoColor" },
+  { cssVar: "--color-info-light", label: "Info Light", category: "colour", defaultValue: "#dbeafe", themeKey: "infoLightColor" }
+];
+var SURFACE_TOKENS = [
+  { cssVar: "--color-surface-page", label: "Page Background", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "surfacePageColor" },
+  { cssVar: "--color-surface-card", label: "Card Surface", category: "colour", defaultValue: "#ffffff", themeKey: "surfaceCardColor" },
+  { cssVar: "--color-surface-modal", label: "Modal Surface", category: "colour", defaultValue: "#ffffff", themeKey: "surfaceModalColor" },
+  { cssVar: "--color-surface-overlay", label: "Overlay", category: "colour", defaultValue: "rgb(15 23 42 / 0.4)" }
+];
+var INTERACTIVE_TOKENS = [
+  { cssVar: "--color-focus-ring", label: "Focus Ring", category: "colour", defaultValue: "#3b82f6", references: "--color-brand-500", themeKey: "focusRingColor" },
+  { cssVar: "--color-link", label: "Link", category: "colour", defaultValue: "#2563eb", references: "--color-brand-600", themeKey: "linkColor" },
+  { cssVar: "--color-link-hover", label: "Link Hover", category: "colour", defaultValue: "#1d4ed8", references: "--color-brand-700", themeKey: "linkHoverColor" }
+];
+var BUTTON_TOKENS = [
+  { cssVar: "--color-btn-primary-bg", label: "Button Primary Background", category: "colour", defaultValue: "#2563eb", references: "--color-brand-600", themeKey: "btnPrimaryBg" },
+  { cssVar: "--color-btn-primary-text", label: "Button Primary Text", category: "colour", defaultValue: "#ffffff", themeKey: "btnPrimaryText" },
+  { cssVar: "--color-btn-primary-hover", label: "Button Primary Hover", category: "colour", defaultValue: "#1d4ed8", references: "--color-brand-700", themeKey: "btnPrimaryHover" },
+  { cssVar: "--color-btn-primary-disabled", label: "Button Primary Disabled", category: "colour", defaultValue: "#93c5fd", references: "--color-brand-300", themeKey: "btnPrimaryDisabled" },
+  { cssVar: "--color-btn-secondary-bg", label: "Button Secondary Background", category: "colour", defaultValue: "#ffffff", themeKey: "btnSecondaryBg" },
+  { cssVar: "--color-btn-secondary-text", label: "Button Secondary Text", category: "colour", defaultValue: "#334155", references: "--color-ink-700", themeKey: "btnSecondaryText" },
+  { cssVar: "--color-btn-secondary-border", label: "Button Secondary Border", category: "colour", defaultValue: "#cbd5e1", references: "--color-ink-300", themeKey: "btnSecondaryBorder" },
+  { cssVar: "--color-btn-secondary-hover", label: "Button Secondary Hover", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "btnSecondaryHover" },
+  { cssVar: "--color-btn-danger-bg", label: "Button Danger Background", category: "colour", defaultValue: "#ef4444", references: "--color-error", themeKey: "btnDangerBg" },
+  { cssVar: "--color-btn-danger-text", label: "Button Danger Text", category: "colour", defaultValue: "#ffffff", themeKey: "btnDangerText" },
+  { cssVar: "--color-btn-danger-hover", label: "Button Danger Hover", category: "colour", defaultValue: "#dc2626", themeKey: "btnDangerHover" },
+  { cssVar: "--color-btn-danger-disabled", label: "Button Danger Disabled", category: "colour", defaultValue: "#fca5a5", themeKey: "btnDangerDisabled" },
+  { cssVar: "--color-btn-ghost-text", label: "Button Ghost Text", category: "colour", defaultValue: "#475569", references: "--color-ink-600", themeKey: "btnGhostText" },
+  { cssVar: "--color-btn-ghost-hover-bg", label: "Button Ghost Hover Background", category: "colour", defaultValue: "#f1f5f9", references: "--color-ink-100", themeKey: "btnGhostHoverBg" },
+  { cssVar: "--color-btn-ghost-hover-text", label: "Button Ghost Hover Text", category: "colour", defaultValue: "#0f172a", references: "--color-ink-900", themeKey: "btnGhostHoverText" }
+];
+var INPUT_TOKENS = [
+  { cssVar: "--color-input-bg", label: "Input Background", category: "colour", defaultValue: "#ffffff", themeKey: "inputBg" },
+  { cssVar: "--color-input-text", label: "Input Text", category: "colour", defaultValue: "#0f172a", references: "--color-ink-900", themeKey: "inputText" },
+  { cssVar: "--color-input-border", label: "Input Border", category: "colour", defaultValue: "#cbd5e1", references: "--color-ink-300", themeKey: "inputBorder" },
+  { cssVar: "--color-input-placeholder", label: "Input Placeholder", category: "colour", defaultValue: "#94a3b8", references: "--color-ink-400", themeKey: "inputPlaceholder" },
+  { cssVar: "--color-input-focus-border", label: "Input Focus Border", category: "colour", defaultValue: "#3b82f6", references: "--color-brand-500", themeKey: "inputFocusBorder" },
+  { cssVar: "--color-input-focus-ring", label: "Input Focus Ring", category: "colour", defaultValue: "#3b82f6", references: "--color-brand-500", themeKey: "inputFocusRing" },
+  { cssVar: "--color-input-disabled-bg", label: "Input Disabled Background", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "inputDisabledBg" },
+  { cssVar: "--color-input-disabled-text", label: "Input Disabled Text", category: "colour", defaultValue: "#64748b", references: "--color-ink-500", themeKey: "inputDisabledText" },
+  { cssVar: "--color-input-error-border", label: "Input Error Border", category: "colour", defaultValue: "#f87171", themeKey: "inputErrorBorder" },
+  { cssVar: "--color-input-error-focus", label: "Input Error Focus", category: "colour", defaultValue: "#ef4444", references: "--color-error", themeKey: "inputErrorFocus" }
+];
+var CARD_TOKENS = [
+  { cssVar: "--color-card-bg", label: "Card Background", category: "colour", defaultValue: "#ffffff", themeKey: "cardBg" },
+  { cssVar: "--color-card-border", label: "Card Border", category: "colour", defaultValue: "#e2e8f0", references: "--color-ink-200", themeKey: "cardBorder" }
+];
+var MODAL_TOKENS = [
+  { cssVar: "--color-modal-bg", label: "Modal Background", category: "colour", defaultValue: "#ffffff", themeKey: "modalBg" },
+  { cssVar: "--color-modal-border", label: "Modal Border", category: "colour", defaultValue: "#e2e8f0", references: "--color-ink-200", themeKey: "modalBorder" },
+  { cssVar: "--color-modal-overlay", label: "Modal Overlay", category: "colour", defaultValue: "rgb(15 23 42 / 0.4)" }
+];
+var TABLE_TOKENS = [
+  { cssVar: "--color-table-header-bg", label: "Table Header Background", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "tableHeaderBg" },
+  { cssVar: "--color-table-header-text", label: "Table Header Text", category: "colour", defaultValue: "#334155", references: "--color-ink-700", themeKey: "tableHeaderText" },
+  { cssVar: "--color-table-border", label: "Table Border", category: "colour", defaultValue: "#e2e8f0", references: "--color-ink-200", themeKey: "tableBorder" },
+  { cssVar: "--color-table-row-hover", label: "Table Row Hover", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "tableRowHover" },
+  { cssVar: "--color-table-row-selected", label: "Table Row Selected", category: "colour", defaultValue: "#eff6ff", references: "--color-brand-50", themeKey: "tableRowSelected" },
+  { cssVar: "--color-table-stripe", label: "Table Stripe", category: "colour", defaultValue: "#f8fafc", references: "--color-ink-50", themeKey: "tableStripe" }
+];
+var BADGE_TOKENS = [
+  { cssVar: "--color-badge-neutral-bg", label: "Badge Neutral Background", category: "colour", defaultValue: "#f1f5f9", references: "--color-ink-100", themeKey: "badgeNeutralBg" },
+  { cssVar: "--color-badge-neutral-text", label: "Badge Neutral Text", category: "colour", defaultValue: "#334155", references: "--color-ink-700", themeKey: "badgeNeutralText" },
+  { cssVar: "--color-badge-info-bg", label: "Badge Info Background", category: "colour", defaultValue: "#dbeafe", references: "--color-info-light", themeKey: "badgeInfoBg" },
+  { cssVar: "--color-badge-info-text", label: "Badge Info Text", category: "colour", defaultValue: "#1d4ed8", themeKey: "badgeInfoText" },
+  { cssVar: "--color-badge-success-bg", label: "Badge Success Background", category: "colour", defaultValue: "#d1fae5", references: "--color-success-light", themeKey: "badgeSuccessBg" },
+  { cssVar: "--color-badge-success-text", label: "Badge Success Text", category: "colour", defaultValue: "#047857", themeKey: "badgeSuccessText" },
+  { cssVar: "--color-badge-warning-bg", label: "Badge Warning Background", category: "colour", defaultValue: "#fef3c7", references: "--color-warning-light", themeKey: "badgeWarningBg" },
+  { cssVar: "--color-badge-warning-text", label: "Badge Warning Text", category: "colour", defaultValue: "#b45309", themeKey: "badgeWarningText" },
+  { cssVar: "--color-badge-danger-bg", label: "Badge Danger Background", category: "colour", defaultValue: "#fee2e2", references: "--color-error-light", themeKey: "badgeDangerBg" },
+  { cssVar: "--color-badge-danger-text", label: "Badge Danger Text", category: "colour", defaultValue: "#b91c1c", themeKey: "badgeDangerText" }
+];
+var TYPOGRAPHY_TOKENS = [
+  { cssVar: "--font-sans", label: "Font Sans", category: "typography", defaultValue: 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' },
+  { cssVar: "--font-mono", label: "Font Mono", category: "typography", defaultValue: 'ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace' },
+  { cssVar: "--font-display", label: "Font Display", category: "typography", defaultValue: "var(--font-sans)", references: "--font-sans" },
+  { cssVar: "--text-h1", label: "Heading 1 Size", category: "typography", defaultValue: "1.875rem" },
+  { cssVar: "--text-h2", label: "Heading 2 Size", category: "typography", defaultValue: "1.5rem" },
+  { cssVar: "--text-h3", label: "Heading 3 Size", category: "typography", defaultValue: "1.25rem" },
+  { cssVar: "--text-h4", label: "Heading 4 Size", category: "typography", defaultValue: "1.125rem" },
+  { cssVar: "--text-body-lg", label: "Body Large", category: "typography", defaultValue: "1rem" },
+  { cssVar: "--text-body-md", label: "Body Medium", category: "typography", defaultValue: "0.875rem" },
+  { cssVar: "--text-body-sm", label: "Body Small", category: "typography", defaultValue: "0.75rem" },
+  { cssVar: "--text-label", label: "Label", category: "typography", defaultValue: "0.875rem" },
+  { cssVar: "--text-caption", label: "Caption", category: "typography", defaultValue: "0.75rem" },
+  { cssVar: "--leading-h1", label: "Heading 1 Line Height", category: "typography", defaultValue: "1.2" },
+  { cssVar: "--leading-h2", label: "Heading 2 Line Height", category: "typography", defaultValue: "1.25" },
+  { cssVar: "--leading-h3", label: "Heading 3 Line Height", category: "typography", defaultValue: "1.3" },
+  { cssVar: "--leading-body", label: "Body Line Height", category: "typography", defaultValue: "1.5" },
+  { cssVar: "--leading-tight", label: "Tight Line Height", category: "typography", defaultValue: "1.25" },
+  { cssVar: "--weight-normal", label: "Weight Normal", category: "typography", defaultValue: "400" },
+  { cssVar: "--weight-medium", label: "Weight Medium", category: "typography", defaultValue: "500" },
+  { cssVar: "--weight-semibold", label: "Weight Semibold", category: "typography", defaultValue: "600" },
+  { cssVar: "--weight-bold", label: "Weight Bold", category: "typography", defaultValue: "700" }
+];
+var SPACING_TOKENS = [
+  { cssVar: "--space-xs", label: "Space Extra Small", category: "spacing", defaultValue: "0.25rem" },
+  { cssVar: "--space-sm", label: "Space Small", category: "spacing", defaultValue: "0.5rem" },
+  { cssVar: "--space-md", label: "Space Medium", category: "spacing", defaultValue: "1rem" },
+  { cssVar: "--space-lg", label: "Space Large", category: "spacing", defaultValue: "1.5rem" },
+  { cssVar: "--space-xl", label: "Space Extra Large", category: "spacing", defaultValue: "2rem" },
+  { cssVar: "--space-2xl", label: "Space 2x Large", category: "spacing", defaultValue: "3rem" }
+];
+var BORDER_TOKENS = [
+  { cssVar: "--border-width-none", label: "Border None", category: "border", defaultValue: "0px" },
+  { cssVar: "--border-width-thin", label: "Border Thin", category: "border", defaultValue: "1px" },
+  { cssVar: "--border-width-medium", label: "Border Medium", category: "border", defaultValue: "2px" },
+  { cssVar: "--radius-none", label: "Radius None", category: "border", defaultValue: "0px" },
+  { cssVar: "--radius-sm", label: "Radius Small", category: "border", defaultValue: "0.25rem" },
+  { cssVar: "--radius-md", label: "Radius Medium", category: "border", defaultValue: "0.375rem" },
+  { cssVar: "--radius-lg", label: "Radius Large", category: "border", defaultValue: "0.5rem" },
+  { cssVar: "--radius-xl", label: "Radius Extra Large", category: "border", defaultValue: "0.75rem" },
+  { cssVar: "--radius-full", label: "Radius Full", category: "border", defaultValue: "9999px" }
+];
+var SHADOW_TOKENS = [
+  { cssVar: "--shadow-none", label: "Shadow None", category: "shadow", defaultValue: "none" },
+  { cssVar: "--shadow-sm", label: "Shadow Small", category: "shadow", defaultValue: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
+  { cssVar: "--shadow-md", label: "Shadow Medium", category: "shadow", defaultValue: "0 4px 6px -1px rgb(0 0 0 / 0.1)" },
+  { cssVar: "--shadow-lg", label: "Shadow Large", category: "shadow", defaultValue: "0 10px 15px -3px rgb(0 0 0 / 0.1)" },
+  { cssVar: "--shadow-xl", label: "Shadow Extra Large", category: "shadow", defaultValue: "0 20px 25px -5px rgb(0 0 0 / 0.1)" }
+];
+var MOTION_TOKENS = [
+  { cssVar: "--duration-instant", label: "Duration Instant", category: "motion", defaultValue: "0ms" },
+  { cssVar: "--duration-fast", label: "Duration Fast", category: "motion", defaultValue: "100ms" },
+  { cssVar: "--duration-normal", label: "Duration Normal", category: "motion", defaultValue: "200ms" },
+  { cssVar: "--duration-moderate", label: "Duration Moderate", category: "motion", defaultValue: "300ms" },
+  { cssVar: "--duration-slow", label: "Duration Slow", category: "motion", defaultValue: "500ms" },
+  { cssVar: "--ease-sharp", label: "Ease Sharp", category: "motion", defaultValue: "cubic-bezier(0.4, 0, 0.2, 1)" },
+  { cssVar: "--ease-smooth", label: "Ease Smooth", category: "motion", defaultValue: "cubic-bezier(0.4, 0, 0, 1)" },
+  { cssVar: "--ease-bounce", label: "Ease Bounce", category: "motion", defaultValue: "cubic-bezier(0.34, 1.56, 0.64, 1)" }
+];
+var TOKEN_REGISTRY = [
+  { label: "Brand Colours", tokens: BRAND_PRIMITIVES },
+  { label: "Ink (Neutral) Colours", tokens: INK_PRIMITIVES },
+  { label: "Accent Colours", tokens: ACCENT_PRIMITIVES },
+  { label: "Sidebar", tokens: SIDEBAR_TOKENS },
+  { label: "Semantic Colours", tokens: SEMANTIC_COLOURS },
+  { label: "Surface", tokens: SURFACE_TOKENS },
+  { label: "Interactive", tokens: INTERACTIVE_TOKENS },
+  { label: "Button", tokens: BUTTON_TOKENS },
+  { label: "Input", tokens: INPUT_TOKENS },
+  { label: "Card", tokens: CARD_TOKENS },
+  { label: "Modal", tokens: MODAL_TOKENS },
+  { label: "Table", tokens: TABLE_TOKENS },
+  { label: "Badge", tokens: BADGE_TOKENS },
+  { label: "Typography", tokens: TYPOGRAPHY_TOKENS },
+  { label: "Spacing", tokens: SPACING_TOKENS },
+  { label: "Border", tokens: BORDER_TOKENS },
+  { label: "Shadow", tokens: SHADOW_TOKENS },
+  { label: "Motion", tokens: MOTION_TOKENS }
+];
+var ALL_TOKENS = TOKEN_REGISTRY.flatMap((c) => c.tokens);
+var TOKEN_MAP = /* @__PURE__ */ new Map();
+for (const token of ALL_TOKENS) {
+  TOKEN_MAP.set(token.cssVar, token);
+}
+function findToken(cssVar) {
+  return TOKEN_MAP.get(cssVar);
+}
+function getTokenChain(cssVar) {
+  const chain = [];
+  const visited = /* @__PURE__ */ new Set();
+  let current = cssVar;
+  while (current && !visited.has(current)) {
+    visited.add(current);
+    const token = TOKEN_MAP.get(current);
+    if (!token) break;
+    chain.push(token);
+    if (token.references) {
+      current = token.references;
+    } else {
+      break;
+    }
+  }
+  return chain;
+}
+function getDependents(cssVar) {
+  return ALL_TOKENS.filter((t) => t.references === cssVar);
+}
+
+// src/colour-blindness.ts
+var COLOUR_BLINDNESS_TYPES = [
+  { type: "protanopia", label: "Protanopia", description: "Red-blind - difficulty distinguishing red and green", prevalence: "1% of males" },
+  { type: "deuteranopia", label: "Deuteranopia", description: "Green-blind - most common form of colour blindness", prevalence: "5% of males" },
+  { type: "tritanopia", label: "Tritanopia", description: "Blue-blind - difficulty distinguishing blue and yellow", prevalence: "0.01% of population" },
+  { type: "achromatopsia", label: "Achromatopsia", description: "Total colour blindness - sees only shades of grey", prevalence: "0.003% of population" }
+];
+function hexToRGB(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return [r, g, b];
+}
+function rgbToHex(r, g, b) {
+  const clamp = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`;
+}
+var MATRICES = {
+  protanopia: [
+    [0.567, 0.433, 0],
+    [0.558, 0.442, 0],
+    [0, 0.242, 0.758]
+  ],
+  deuteranopia: [
+    [0.625, 0.375, 0],
+    [0.7, 0.3, 0],
+    [0, 0.3, 0.7]
+  ],
+  tritanopia: [
+    [0.95, 0.05, 0],
+    [0, 0.433, 0.567],
+    [0, 0.475, 0.525]
+  ]
+};
+function applyMatrix(rgb, matrix) {
+  return [
+    rgb[0] * matrix[0][0] + rgb[1] * matrix[0][1] + rgb[2] * matrix[0][2],
+    rgb[0] * matrix[1][0] + rgb[1] * matrix[1][1] + rgb[2] * matrix[1][2],
+    rgb[0] * matrix[2][0] + rgb[1] * matrix[2][1] + rgb[2] * matrix[2][2]
+  ];
+}
+function simulateColourBlindness(hex, type) {
+  if (!hex || !hex.startsWith("#") || hex.length < 7) return hex;
+  const rgb = hexToRGB(hex);
+  if (type === "achromatopsia") {
+    const grey = Math.round(0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]);
+    return rgbToHex(grey, grey, grey);
+  }
+  const transformed = applyMatrix(rgb, MATRICES[type]);
+  return rgbToHex(transformed[0], transformed[1], transformed[2]);
+}
+function simulateThemeColourBlindness(theme, type) {
+  const result = {};
+  for (const [key, value] of Object.entries(theme)) {
+    if (value.startsWith("#") && value.length >= 7) {
+      result[key] = simulateColourBlindness(value, type);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+// src/theme-snapshots.ts
+var STORAGE_PREFIX = "snagtag-ds-snapshots";
+var MAX_SNAPSHOTS = 50;
+function storageKey(tenantId) {
+  return `${STORAGE_PREFIX}:${tenantId}`;
+}
+function generateId() {
+  return `snap-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 5)}`;
+}
+function countDiffs(a, b) {
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  let count = 0;
+  for (const key of allKeys) {
+    if ((a[key] ?? "") !== (b[key] ?? "")) count++;
+  }
+  return count;
+}
+function themesAreEqual(a, b) {
+  return countDiffs(a, b) === 0;
+}
+function readSnapshots(tenantId) {
+  try {
+    const raw = localStorage.getItem(storageKey(tenantId));
+    if (!raw) return [];
+    return JSON.parse(raw);
+  } catch {
+    return [];
+  }
+}
+function writeSnapshots(tenantId, snapshots) {
+  while (snapshots.length > MAX_SNAPSHOTS) {
+    const firstNonOpening = snapshots.findIndex((s, i) => i > 0 && s.label !== "opening");
+    if (firstNonOpening > 0) {
+      snapshots.splice(firstNonOpening, 1);
+    } else {
+      snapshots.shift();
+    }
+  }
+  try {
+    localStorage.setItem(storageKey(tenantId), JSON.stringify(snapshots));
+  } catch {
+    const half = Math.floor(snapshots.length / 2);
+    snapshots.splice(1, half);
+    try {
+      localStorage.setItem(storageKey(tenantId), JSON.stringify(snapshots));
+    } catch {
+    }
+  }
+}
+function captureSnapshot(tenantId, values, label) {
+  const snapshots = readSnapshots(tenantId);
+  if (label === "auto" && snapshots.length > 0) {
+    const last = snapshots[snapshots.length - 1];
+    if (themesAreEqual(last.values, values)) return null;
+  }
+  const previous = snapshots.length > 0 ? snapshots[snapshots.length - 1].values : {};
+  const snapshot = {
+    id: generateId(),
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    label,
+    values: { ...values },
+    changedKeysFromPrevious: countDiffs(previous, values)
+  };
+  snapshots.push(snapshot);
+  writeSnapshots(tenantId, snapshots);
+  return snapshot;
+}
+function getSnapshot(tenantId, snapshotId) {
+  const snapshots = readSnapshots(tenantId);
+  return snapshots.find((s) => s.id === snapshotId) ?? null;
+}
+function clearSnapshots(tenantId) {
+  try {
+    localStorage.removeItem(storageKey(tenantId));
+  } catch {
+  }
+}
+function getOpeningSnapshot(tenantId) {
+  const snapshots = readSnapshots(tenantId);
+  return snapshots.find((s) => s.label === "opening") ?? null;
+}
+
+// src/font-pairings.ts
+var FONT_PAIRINGS = [
+  {
+    display: "Georgia, serif",
+    body: "system-ui, -apple-system, sans-serif",
+    label: "Classic editorial",
+    description: "Georgia headings with system sans body - a timeless pairing that balances warmth with clarity.",
+    category: "mixed"
+  },
+  {
+    display: "system-ui, -apple-system, sans-serif",
+    body: "system-ui, -apple-system, sans-serif",
+    label: "System native",
+    description: "Uses the operating system font throughout - fastest loading and feels native on every device.",
+    category: "sans"
+  },
+  {
+    display: '"Segoe UI", Tahoma, Geneva, sans-serif',
+    body: '"Segoe UI", Tahoma, Geneva, sans-serif',
+    label: "Segoe modern",
+    description: "Clean, modern look popular in business applications. Excellent readability at all sizes.",
+    category: "sans"
+  },
+  {
+    display: '"Trebuchet MS", "Lucida Sans", sans-serif',
+    body: "Verdana, Geneva, sans-serif",
+    label: "Friendly sans",
+    description: "Approachable and informal - works well for consumer-facing products.",
+    category: "sans"
+  },
+  {
+    display: '"Palatino Linotype", "Book Antiqua", Palatino, serif',
+    body: '"Lucida Sans", "Lucida Grande", sans-serif',
+    label: "Elegant contrast",
+    description: "Serif headings with sans-serif body - classic typographic hierarchy with strong personality.",
+    category: "mixed"
+  },
+  {
+    display: 'Cambria, "Hoefler Text", serif',
+    body: 'Calibri, "Gill Sans", sans-serif',
+    label: "Office classic",
+    description: "Professional and readable - familiar from office documents, well-kerned at all sizes.",
+    category: "mixed"
+  },
+  {
+    display: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+    body: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+    label: "Swiss minimal",
+    description: "Clean Helvetica throughout - a design industry standard for neutral, professional UIs.",
+    category: "sans"
+  },
+  {
+    display: 'Impact, "Arial Black", sans-serif',
+    body: 'Arial, "Helvetica Neue", sans-serif',
+    label: "Bold statement",
+    description: "High-impact headings with clean body text - ideal for dashboards and marketing.",
+    category: "sans"
+  },
+  {
+    display: '"Times New Roman", Times, serif',
+    body: "Georgia, serif",
+    label: "Traditional serif",
+    description: "All-serif pairing with strong heritage - suits formal, document-heavy applications.",
+    category: "serif"
+  },
+  {
+    display: "Verdana, Geneva, sans-serif",
+    body: "Georgia, serif",
+    label: "Screen optimised",
+    description: "Both fonts designed for screen readability - excellent at small sizes and low resolutions.",
+    category: "mixed"
+  }
+];
+function relevanceScore(pairing, currentFont) {
+  const current = currentFont.toLowerCase();
+  const display = pairing.display.toLowerCase();
+  const body = pairing.body.toLowerCase();
+  if (display.includes(current) || body.includes(current)) return 0;
+  const currentIsSerif = current.includes("serif") && !current.includes("sans-serif");
+  const currentIsSans = current.includes("sans") || current.includes("system-ui");
+  if (pairing.category === "mixed") return 1;
+  if (currentIsSerif && pairing.category === "serif") return 2;
+  if (currentIsSans && pairing.category === "sans") return 2;
+  return 3;
+}
+function suggestPairings(currentFont) {
+  return [...FONT_PAIRINGS].sort(
+    (a, b) => relevanceScore(a, currentFont) - relevanceScore(b, currentFont)
+  );
+}
+
+// src/type-scale.ts
+var SCALE_RATIOS = {
+  "minor-third": { value: 1.2, label: "Minor Third", description: "Subtle, compact - good for data-heavy UIs" },
+  "major-third": { value: 1.25, label: "Major Third", description: "Balanced, readable - good default" },
+  "perfect-fourth": { value: 1.333, label: "Perfect Fourth", description: "Clear hierarchy - good for content sites" },
+  "augmented-fourth": { value: 1.414, label: "Augmented Fourth", description: "Strong hierarchy - editorial feel" },
+  "perfect-fifth": { value: 1.5, label: "Perfect Fifth", description: "Dramatic hierarchy - display/portfolio" },
+  "golden-ratio": { value: 1.618, label: "Golden Ratio", description: "Maximum contrast - hero/landing pages" }
+};
+var LEVEL_DEFS = [
+  { name: "h1", step: 4, lineHeight: 1.15, weight: 700 },
+  { name: "h2", step: 3, lineHeight: 1.2, weight: 600 },
+  { name: "h3", step: 2, lineHeight: 1.25, weight: 600 },
+  { name: "h4", step: 1, lineHeight: 1.3, weight: 600 },
+  { name: "body-lg", step: 0.5, lineHeight: 1.5, weight: 400 },
+  { name: "body-md", step: 0, lineHeight: 1.5, weight: 400 },
+  { name: "body-sm", step: -1, lineHeight: 1.5, weight: 400 },
+  { name: "caption", step: -2, lineHeight: 1.4, weight: 400 }
+];
+function roundTo(value, decimals) {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+function pxToRem(px) {
+  return `${roundTo(px / 16, 3)}rem`;
+}
+function generateTypeScale(baseSizePx, ratio) {
+  const ratioValue = SCALE_RATIOS[ratio].value;
+  const levels = LEVEL_DEFS.map((def) => {
+    const size = roundTo(baseSizePx * Math.pow(ratioValue, def.step), 2);
+    return {
+      name: def.name,
+      size,
+      sizeRem: pxToRem(size),
+      lineHeight: def.lineHeight,
+      weight: def.weight
+    };
+  });
+  return { baseSizePx, ratio, levels };
+}
+function typeScaleToCSSVars(scale) {
+  const vars = {};
+  for (const level of scale.levels) {
+    const key = level.name;
+    vars[`--font-size-${key}`] = level.sizeRem;
+    vars[`--line-height-${key}`] = String(level.lineHeight);
+    vars[`--font-weight-${key}`] = String(level.weight);
+  }
+  return vars;
+}
+
+// src/bezier-utils.ts
+function parseCubicBezier(value) {
+  if (!value) return null;
+  const named = {
+    "linear": [0, 0, 1, 1],
+    "ease": [0.25, 0.1, 0.25, 1],
+    "ease-in": [0.42, 0, 1, 1],
+    "ease-out": [0, 0, 0.58, 1],
+    "ease-in-out": [0.42, 0, 0.58, 1]
+  };
+  const trimmed = value.trim().toLowerCase();
+  if (named[trimmed]) return named[trimmed];
+  const match = trimmed.match(
+    /cubic-bezier\s*\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)/
+  );
+  if (match) {
+    const nums = [
+      parseFloat(match[1]),
+      parseFloat(match[2]),
+      parseFloat(match[3]),
+      parseFloat(match[4])
+    ];
+    if (nums.some(isNaN)) return null;
+    return nums;
+  }
+  const parts = trimmed.split(",").map((s) => parseFloat(s.trim()));
+  if (parts.length === 4 && parts.every((n) => !isNaN(n))) {
+    return parts;
+  }
+  return null;
+}
+function formatCubicBezier(x1, y1, x2, y2) {
+  const fmt = (n) => parseFloat(n.toFixed(2)).toString();
+  return `cubic-bezier(${fmt(x1)}, ${fmt(y1)}, ${fmt(x2)}, ${fmt(y2)})`;
+}
+function sampleBezierCurve(x1, y1, x2, y2, steps = 50) {
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const u = 1 - t;
+    const x = 3 * x1 * t * u * u + 3 * x2 * t * t * u + t * t * t;
+    const y = 3 * y1 * t * u * u + 3 * y2 * t * t * u + t * t * t;
+    points.push({ x, y });
+  }
+  return points;
+}
+function clampControlPoint(value, axis) {
+  if (axis === "x") {
+    return Math.max(0, Math.min(1, value));
+  }
+  return Math.max(-0.5, Math.min(1.5, value));
+}
+function snapToGrid(value, gridSize) {
+  return Math.round(value / gridSize) * gridSize;
+}
+
+// src/easing-presets.ts
+var EASING_PRESETS = [
+  // Basic
+  {
+    label: "Linear",
+    value: "linear",
+    description: "No acceleration or deceleration",
+    category: "basic"
+  },
+  {
+    label: "Ease",
+    value: "ease",
+    description: "Default browser easing",
+    category: "basic"
+  },
+  {
+    label: "Ease In",
+    value: "ease-in",
+    description: "Starts slow, ends fast",
+    category: "basic"
+  },
+  {
+    label: "Ease Out",
+    value: "ease-out",
+    description: "Starts fast, ends slow",
+    category: "basic"
+  },
+  {
+    label: "Ease In Out",
+    value: "ease-in-out",
+    description: "Slow start and end, fast middle",
+    category: "basic"
+  },
+  // Material Design
+  {
+    label: "Standard",
+    value: "cubic-bezier(0.4, 0, 0.2, 1)",
+    description: "Material Design standard curve",
+    category: "material"
+  },
+  {
+    label: "Decelerate",
+    value: "cubic-bezier(0, 0, 0.2, 1)",
+    description: "Material Design deceleration curve",
+    category: "material"
+  },
+  {
+    label: "Accelerate",
+    value: "cubic-bezier(0.4, 0, 1, 1)",
+    description: "Material Design acceleration curve",
+    category: "material"
+  },
+  // Expressive
+  {
+    label: "Bounce Out",
+    value: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    description: "Overshoots then settles",
+    category: "expressive"
+  },
+  {
+    label: "Spring",
+    value: "cubic-bezier(0.5, 1.5, 0.5, 1)",
+    description: "Spring-like overshoot",
+    category: "expressive"
+  },
+  {
+    label: "Snap",
+    value: "cubic-bezier(0.1, 0.85, 0.15, 1)",
+    description: "Quick snap into place",
+    category: "expressive"
+  }
+];
+function getPresetsByCategory() {
+  const groups = {
+    basic: [],
+    material: [],
+    expressive: []
+  };
+  for (const preset of EASING_PRESETS) {
+    groups[preset.category].push(preset);
+  }
+  return groups;
+}
+function findPresetByValue(value) {
+  const normalised = value.trim().toLowerCase();
+  return EASING_PRESETS.find((p) => p.value.toLowerCase() === normalised);
+}
+
+// src/registry-overlay.ts
+function createOverlay() {
+  return {
+    moves: /* @__PURE__ */ new Map(),
+    customCategories: [],
+    extractedTokens: []
+  };
+}
+function moveToken(overlay, cssVar, targetCategory) {
+  const moves = new Map(overlay.moves);
+  moves.set(cssVar, targetCategory);
+  return { ...overlay, moves };
+}
+function bulkMoveTokens(overlay, cssVars, targetCategory) {
+  const moves = new Map(overlay.moves);
+  for (const cssVar of cssVars) {
+    moves.set(cssVar, targetCategory);
+  }
+  return { ...overlay, moves };
+}
+function addCustomCategory(overlay, label) {
+  if (overlay.customCategories.includes(label)) return overlay;
+  if (TOKEN_REGISTRY.some((c) => c.label === label)) return overlay;
+  return { ...overlay, customCategories: [...overlay.customCategories, label] };
+}
+function addExtractedToken(overlay, token) {
+  return { ...overlay, extractedTokens: [...overlay.extractedTokens, token] };
+}
+function getEffectiveCategories(overlay) {
+  const categoryMap = /* @__PURE__ */ new Map();
+  for (const cat of TOKEN_REGISTRY) {
+    categoryMap.set(cat.label, []);
+  }
+  for (const label of overlay.customCategories) {
+    if (!categoryMap.has(label)) {
+      categoryMap.set(label, []);
+    }
+  }
+  for (const cat of TOKEN_REGISTRY) {
+    for (const token of cat.tokens) {
+      const targetLabel = overlay.moves.get(token.cssVar) ?? cat.label;
+      if (!categoryMap.has(targetLabel)) {
+        categoryMap.set(targetLabel, []);
+      }
+      categoryMap.get(targetLabel).push(token);
+    }
+  }
+  for (const ext of overlay.extractedTokens) {
+    if (!categoryMap.has(ext.category)) {
+      categoryMap.set(ext.category, []);
+    }
+    const tokenDef = {
+      cssVar: ext.cssVar,
+      label: ext.label,
+      category: "colour",
+      defaultValue: ext.defaultValue,
+      ...ext.referencesVar ? { references: ext.referencesVar } : {}
+    };
+    categoryMap.get(ext.category).push(tokenDef);
+  }
+  const result = [];
+  for (const cat of TOKEN_REGISTRY) {
+    const tokens = categoryMap.get(cat.label) ?? [];
+    if (tokens.length > 0) {
+      result.push({ label: cat.label, tokens });
+    }
+  }
+  for (const label of overlay.customCategories) {
+    if (TOKEN_REGISTRY.some((c) => c.label === label)) continue;
+    const tokens = categoryMap.get(label) ?? [];
+    if (tokens.length > 0) {
+      result.push({ label, tokens });
+    }
+  }
+  for (const label of overlay.customCategories) {
+    if (!result.some((c) => c.label === label)) {
+      result.push({ label, tokens: [] });
+    }
+  }
+  return result;
+}
+function getAllCategoryLabels(overlay) {
+  const labels = TOKEN_REGISTRY.map((c) => c.label);
+  for (const label of overlay.customCategories) {
+    if (!labels.includes(label)) {
+      labels.push(label);
+    }
+  }
+  return labels;
+}
+function getTokenCategory(overlay, cssVar) {
+  const moved = overlay.moves.get(cssVar);
+  if (moved) return moved;
+  const extracted = overlay.extractedTokens.find((t) => t.cssVar === cssVar);
+  if (extracted) return extracted.category;
+  for (const cat of TOKEN_REGISTRY) {
+    if (cat.tokens.some((t) => t.cssVar === cssVar)) {
+      return cat.label;
+    }
+  }
+  return void 0;
+}
+
+// src/token-extraction.ts
+function validateTokenName(name) {
+  if (!name) {
+    return { valid: false, error: "Token name is required" };
+  }
+  if (!name.startsWith("--")) {
+    return { valid: false, error: "Token name must start with --" };
+  }
+  if (name.length < 4) {
+    return { valid: false, error: "Token name is too short" };
+  }
+  if (!/^--[a-z][a-z0-9-]*$/.test(name)) {
+    return { valid: false, error: "Token name must be lowercase with hyphens only (e.g. --color-my-token)" };
+  }
+  if (findToken(name)) {
+    return { valid: false, error: "A token with this name already exists in the registry" };
+  }
+  return { valid: true };
+}
+function suggestTokenName(value, category) {
+  const prefix = categoryToPrefix(category);
+  const suffix = valueToSuffix(value);
+  return `--${prefix}-${suffix}`;
+}
+function categoryToPrefix(category) {
+  const lower = category.toLowerCase();
+  if (lower.includes("colour") || lower.includes("color")) return "color";
+  if (lower.includes("brand")) return "color-brand";
+  if (lower.includes("ink") || lower.includes("neutral")) return "color-ink";
+  if (lower.includes("accent")) return "color-accent";
+  if (lower.includes("button") || lower.includes("btn")) return "color-btn";
+  if (lower.includes("input")) return "color-input";
+  if (lower.includes("surface")) return "color-surface";
+  if (lower.includes("typography")) return "font";
+  if (lower.includes("spacing")) return "space";
+  if (lower.includes("border")) return "border";
+  if (lower.includes("shadow")) return "shadow";
+  if (lower.includes("motion")) return "duration";
+  return "custom";
+}
+function valueToSuffix(value) {
+  const trimmed = value.trim().toLowerCase();
+  if (trimmed.startsWith("#")) {
+    return trimmed.slice(1, 4);
+  }
+  const numMatch = trimmed.match(/^([\d.]+)(rem|px|em|ms|s|%)$/);
+  if (numMatch) {
+    return numMatch[1].replace(".", "-") + numMatch[2];
+  }
+  return "custom";
+}
+function extractToken(overlay, token) {
+  const allStaticLabels = TOKEN_REGISTRY.map((c) => c.label);
+  let updated = overlay;
+  if (!allStaticLabels.includes(token.category) && !overlay.customCategories.includes(token.category)) {
+    updated = addCustomCategory(updated, token.category);
+  }
+  return addExtractedToken(updated, token);
+}
+function hasExtractedToken(overlay, cssVar) {
+  return overlay.extractedTokens.some((t) => t.cssVar === cssVar);
+}
+
+// src/reassignment-state.ts
+var MAX_UNDO2 = 20;
+function createReassignmentState() {
+  return {
+    overlay: createOverlay(),
+    undoStack: [],
+    redoStack: []
+  };
+}
+function pushAction(state, action) {
+  const undoStack = [...state.undoStack, action];
+  if (undoStack.length > MAX_UNDO2) undoStack.shift();
+  return {
+    overlay: action.after,
+    undoStack,
+    redoStack: []
+  };
+}
+function applyMove(state, cssVar, targetCategory, tokenLabel) {
+  const before = state.overlay;
+  const after = moveToken(before, cssVar, targetCategory);
+  return pushAction(state, {
+    type: "move",
+    before,
+    after,
+    description: `Moved ${tokenLabel ?? cssVar} to ${targetCategory}`
+  });
+}
+function applyBulkMove(state, cssVars, targetCategory) {
+  const before = state.overlay;
+  const after = bulkMoveTokens(before, cssVars, targetCategory);
+  return pushAction(state, {
+    type: "bulk-move",
+    before,
+    after,
+    description: `Moved ${cssVars.length} token${cssVars.length === 1 ? "" : "s"} to ${targetCategory}`
+  });
+}
+function applyExtract(state, token) {
+  const before = state.overlay;
+  const after = extractToken(before, token);
+  return pushAction(state, {
+    type: "extract",
+    before,
+    after,
+    description: `Extracted ${token.label} (${token.cssVar})`
+  });
+}
+function applyAddCategory(state, label) {
+  const before = state.overlay;
+  const after = addCustomCategory(before, label);
+  if (after === before) return state;
+  return pushAction(state, {
+    type: "add-category",
+    before,
+    after,
+    description: `Created category "${label}"`
+  });
+}
+function undoReassignment(state) {
+  if (state.undoStack.length === 0) return state;
+  const undoStack = [...state.undoStack];
+  const action = undoStack.pop();
+  return {
+    overlay: action.before,
+    undoStack,
+    redoStack: [...state.redoStack, action]
+  };
+}
+function redoReassignment(state) {
+  if (state.redoStack.length === 0) return state;
+  const redoStack = [...state.redoStack];
+  const action = redoStack.pop();
+  return {
+    overlay: action.after,
+    undoStack: [...state.undoStack, action],
+    redoStack
+  };
+}
+
+// src/token-usage.ts
+var usageCache = null;
+var lastScanTime = 0;
+var MIN_SCAN_INTERVAL_MS = 2e3;
+function getPropertiesForCategory(category) {
+  switch (category) {
+    case "colour":
+      return ["color", "background-color", "border-color", "outline-color", "fill", "stroke"];
+    case "typography":
+      return ["font-family", "font-size", "font-weight", "line-height"];
+    case "spacing":
+      return ["padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "gap"];
+    case "border":
+      return ["border-width", "border-radius"];
+    case "shadow":
+      return ["box-shadow"];
+    case "motion":
+      return ["transition-duration", "animation-duration"];
+  }
+}
+function normaliseColour(value) {
+  if (!value || value === "transparent" || value === "none") return value;
+  const trimmed = value.trim().toLowerCase();
+  if (trimmed.startsWith("#")) {
+    const temp = document.createElement("div");
+    temp.style.color = trimmed;
+    document.body.appendChild(temp);
+    const normalised = getComputedStyle(temp).color;
+    document.body.removeChild(temp);
+    return normalised;
+  }
+  return trimmed;
+}
+function countTokenUsage(cssVar) {
+  const now = Date.now();
+  if (!cssVar && usageCache && now - lastScanTime < MIN_SCAN_INTERVAL_MS) {
+    return usageCache;
+  }
+  const tokensToCheck = cssVar ? (() => {
+    const t = findToken(cssVar);
+    return t ? [t] : [];
+  })() : TOKEN_REGISTRY.flatMap((c) => c.tokens);
+  if (tokensToCheck.length === 0) return [];
+  const root = document.documentElement;
+  const rootStyles = getComputedStyle(root);
+  const results = /* @__PURE__ */ new Map();
+  const resolvedTokens = /* @__PURE__ */ new Map();
+  for (const token of tokensToCheck) {
+    const resolvedValue = rootStyles.getPropertyValue(token.cssVar).trim();
+    if (!resolvedValue) continue;
+    const normalised = token.category === "colour" ? normaliseColour(resolvedValue) : resolvedValue;
+    resolvedTokens.set(token.cssVar, {
+      token,
+      resolvedValue: normalised,
+      props: getPropertiesForCategory(token.category)
+    });
+    results.set(token.cssVar, { cssVar: token.cssVar, label: token.label, count: 0, elements: [] });
+  }
+  const elements = document.body.querySelectorAll("*");
+  for (const el of elements) {
+    if (!(el instanceof HTMLElement)) continue;
+    const computed = getComputedStyle(el);
+    for (const [varName, { token, resolvedValue, props }] of resolvedTokens) {
+      let matched = false;
+      for (const prop of props) {
+        let computedValue = computed.getPropertyValue(prop).trim();
+        if (!computedValue) continue;
+        if (token.category === "colour") {
+          computedValue = computedValue.toLowerCase();
+        }
+        if (computedValue === resolvedValue) {
+          matched = true;
+          break;
+        }
+      }
+      if (matched) {
+        const result = results.get(varName);
+        result.count++;
+        if (result.elements.length < 5) {
+          result.elements.push(el);
+        }
+      }
+    }
+  }
+  const sorted = Array.from(results.values()).filter((r) => r.count > 0).sort((a, b) => b.count - a.count);
+  if (!cssVar) {
+    usageCache = sorted;
+    lastScanTime = now;
+  }
+  return sorted;
+}
+function getTokenUsageCount(cssVar) {
+  if (usageCache) {
+    const cached = usageCache.find((r) => r.cssVar === cssVar);
+    if (cached) return cached.count;
+  }
+  const results = countTokenUsage(cssVar);
+  return results.length > 0 ? results[0].count : 0;
+}
+function clearUsageCache() {
+  usageCache = null;
+  lastScanTime = 0;
+}
+
+// src/unused-tokens.ts
+function scanUsedProperties() {
+  const used = /* @__PURE__ */ new Set();
+  try {
+    for (const sheet of document.styleSheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          const text = rule.cssText;
+          const varMatches = text.matchAll(/var\((--[^,)]+)/g);
+          for (const match of varMatches) {
+            used.add(match[1]);
+          }
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+  const allElements = document.querySelectorAll("*");
+  for (const el of allElements) {
+    const style = el.style?.cssText;
+    if (style) {
+      const varMatches = style.matchAll(/var\((--[^,)]+)/g);
+      for (const match of varMatches) {
+        used.add(match[1]);
+      }
+    }
+  }
+  return used;
+}
+function findChainDependencies() {
+  const deps = /* @__PURE__ */ new Set();
+  const allTokens = TOKEN_REGISTRY.flatMap((c) => c.tokens);
+  for (const token of allTokens) {
+    if (token.references) {
+      deps.add(token.references);
+    }
+  }
+  return deps;
+}
+function findUnusedTokens() {
+  const usedProperties = scanUsedProperties();
+  const chainDeps = findChainDependencies();
+  const allTokens = TOKEN_REGISTRY.flatMap((c) => c.tokens);
+  const unused = [];
+  for (const token of allTokens) {
+    if (!usedProperties.has(token.cssVar)) {
+      unused.push({
+        token,
+        isChainDependency: chainDeps.has(token.cssVar)
+      });
+    }
+  }
+  return unused;
+}
+function getTokenUsageStats() {
+  const usedProperties = scanUsedProperties();
+  const chainDeps = findChainDependencies();
+  const allTokens = TOKEN_REGISTRY.flatMap((c) => c.tokens);
+  let used = 0;
+  let chainOnly = 0;
+  for (const token of allTokens) {
+    if (usedProperties.has(token.cssVar)) {
+      used++;
+    } else if (chainDeps.has(token.cssVar)) {
+      chainOnly++;
+    }
+  }
+  return {
+    total: allTokens.length,
+    used,
+    unused: allTokens.length - used,
+    chainDependencies: chainOnly,
+    usageRate: Math.round(used / allTokens.length * 100)
+  };
+}
+
+// src/dark-mode.ts
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hslToHex2(h, s, l) {
+  const sn = s / 100;
+  const ln = l / 100;
+  const c = (1 - Math.abs(2 * ln - 1)) * sn;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = ln - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const toHex = (v) => Math.round((v + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function invertLightness(hex) {
+  const { h, s, l } = hexToHsl(hex);
+  return hslToHex2(h, s, 100 - l);
+}
+function adjustSemanticForDark(hex, _semanticType) {
+  const { h, s, l } = hexToHsl(hex);
+  const newL = l < 50 ? Math.min(l + 30, 75) : Math.min(l + 10, 80);
+  const newS = Math.max(s - 10, 20);
+  return hslToHex2(h, newS, newL);
+}
+var SURFACE_VARS = {
+  "--color-ink-50": "#f8fafc",
+  "--color-ink-100": "#f1f5f9",
+  "--color-sidebar-bg": "#ffffff",
+  "--color-sidebar-hover": "#f1f5f9"
+};
+var TEXT_VARS = {
+  "--color-ink-900": "#0f172a",
+  "--color-ink-800": "#1e293b",
+  "--color-ink-700": "#334155",
+  "--color-ink-600": "#475569",
+  "--color-ink-500": "#64748b",
+  "--color-sidebar-text": "#475569"
+};
+var BORDER_VARS = {
+  "--color-ink-200": "#e2e8f0",
+  "--color-ink-300": "#cbd5e1",
+  "--color-sidebar-border": "#e2e8f0"
+};
+var SEMANTIC_VARS = {
+  "--color-brand-500": "#3b82f6",
+  "--color-brand-600": "#2563eb",
+  "--color-brand-700": "#1d4ed8",
+  "--color-accent": "#f59e0b",
+  "--color-accent-hover": "#d97706"
+};
+function generateDarkTheme(lightTheme) {
+  const result = {};
+  const theme = lightTheme ?? {};
+  for (const [cssVar, defaultHex] of Object.entries(SURFACE_VARS)) {
+    const hex = theme[cssVar] || defaultHex;
+    result[cssVar] = invertLightness(hex);
+  }
+  for (const [cssVar, defaultHex] of Object.entries(TEXT_VARS)) {
+    const hex = theme[cssVar] || defaultHex;
+    result[cssVar] = invertLightness(hex);
+  }
+  for (const [cssVar, defaultHex] of Object.entries(BORDER_VARS)) {
+    const hex = theme[cssVar] || defaultHex;
+    const { h, s } = hexToHsl(hex);
+    result[cssVar] = hslToHex2(h, Math.max(s - 5, 0), 25);
+  }
+  for (const [cssVar, defaultHex] of Object.entries(SEMANTIC_VARS)) {
+    const hex = theme[cssVar] || defaultHex;
+    result[cssVar] = adjustSemanticForDark(hex);
+  }
+  result["--color-brand-50"] = "#0c1929";
+  result["--color-brand-100"] = "#132744";
+  result["--color-brand-200"] = "#1a3a5c";
+  result["--color-brand-300"] = "#2a5a8a";
+  result["--color-brand-800"] = "#93bbf0";
+  result["--color-brand-900"] = "#bdd5f7";
+  result["--color-brand-950"] = "#dbeafe";
+  result["--color-ink-400"] = "#64748b";
+  result["--color-ink-950"] = "#f8fafc";
+  result["--color-sidebar-active-bg"] = "#1a3a5c";
+  result["--color-sidebar-active-text"] = "#93bbf0";
+  result["--color-accent-light"] = "#422006";
+  return result;
+}
+function isDarkMode() {
+  return document.documentElement.classList.contains("dark");
+}
+function setDarkMode(enabled) {
+  const root = document.documentElement;
+  if (enabled) {
+    root.classList.add("dark");
+    root.classList.remove("light");
+  } else {
+    root.classList.remove("dark");
+    root.classList.add("light");
+  }
+}
+function systemPrefersDark() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function resolveMode(mode) {
+  if (mode === "system") return systemPrefersDark() ? "dark" : "light";
+  return mode;
+}
+function applyDarkModeToDOM(mode) {
+  const resolved = resolveMode(mode);
+  setDarkMode(resolved === "dark");
+}
+
+// src/surface-overrides.ts
+var SURFACE_DEFINITIONS = [
+  {
+    id: "default",
+    name: "Default",
+    description: "Standard display - no overrides applied.",
+    overrides: {},
+    cssClass: ""
+  },
+  {
+    id: "kiosk",
+    name: "Kiosk",
+    description: "Larger text, high contrast for touchscreen and distance viewing.",
+    overrides: {
+      // Font size multipliers applied via CSS custom properties
+      "--surface-font-scale": "1.25",
+      "--surface-min-tap-target": "48px",
+      "--surface-border-width": "2px",
+      // High contrast overrides
+      "--color-ink-900": "#000000",
+      "--color-ink-800": "#0a0a0a",
+      "--color-ink-50": "#ffffff",
+      "--color-ink-100": "#fafafa"
+    },
+    cssClass: "surface-kiosk"
+  },
+  {
+    id: "print",
+    name: "Print",
+    description: "No backgrounds, black text, thin borders - optimised for printing.",
+    overrides: {
+      "--color-ink-50": "#ffffff",
+      "--color-ink-100": "#ffffff",
+      "--color-ink-200": "#cccccc",
+      "--color-ink-300": "#cccccc",
+      "--color-ink-900": "#000000",
+      "--color-ink-800": "#111111",
+      "--color-ink-700": "#222222",
+      "--color-ink-600": "#333333",
+      "--color-sidebar-bg": "#ffffff",
+      "--color-sidebar-text": "#000000",
+      "--surface-shadow": "none",
+      "--surface-border-width": "1px"
+    },
+    cssClass: "surface-print"
+  },
+  {
+    id: "outdoor",
+    name: "Outdoor",
+    description: "Maximum contrast and saturation for visibility in sunlight.",
+    overrides: {
+      "--color-ink-900": "#000000",
+      "--color-ink-800": "#050505",
+      "--color-ink-50": "#ffffff",
+      "--color-ink-100": "#fcfcfc",
+      "--surface-font-weight-adjust": "100",
+      "--surface-saturation-boost": "1.2"
+    },
+    cssClass: "surface-outdoor"
+  },
+  {
+    id: "low-light",
+    name: "Low Light",
+    description: "Reduced brightness and warmer tones for low-light environments.",
+    overrides: {
+      "--color-ink-50": "#f5f0e8",
+      "--color-ink-100": "#ebe5d9",
+      "--color-ink-900": "#2a2520",
+      "--color-ink-800": "#3d362e",
+      "--surface-brightness": "0.85",
+      "--surface-warmth": "1.1"
+    },
+    cssClass: "surface-low-light"
+  }
+];
+function getSurfaceOverrides(surfaceType) {
+  const def = SURFACE_DEFINITIONS.find((s) => s.id === surfaceType);
+  return def?.overrides ?? {};
+}
+function getSurfaceDefinition(surfaceType) {
+  return SURFACE_DEFINITIONS.find((s) => s.id === surfaceType);
+}
+function applySurface(surfaceType) {
+  const root = document.documentElement;
+  clearSurface();
+  if (surfaceType === "default") return;
+  const def = getSurfaceDefinition(surfaceType);
+  if (!def) return;
+  if (def.cssClass) {
+    root.classList.add(def.cssClass);
+  }
+  for (const [prop, value] of Object.entries(def.overrides)) {
+    root.style.setProperty(prop, value);
+  }
+}
+function clearSurface() {
+  const root = document.documentElement;
+  for (const def of SURFACE_DEFINITIONS) {
+    if (def.cssClass) {
+      root.classList.remove(def.cssClass);
+    }
+  }
+  for (const def of SURFACE_DEFINITIONS) {
+    for (const prop of Object.keys(def.overrides)) {
+      root.style.removeProperty(prop);
+    }
+  }
+}
+function getActiveSurface() {
+  const root = document.documentElement;
+  for (const def of SURFACE_DEFINITIONS) {
+    if (def.cssClass && root.classList.contains(def.cssClass)) {
+      return def.id;
+    }
+  }
+  return "default";
+}
+function applySurfaceToDOM(surface) {
+  applySurface(surface);
+}
+
+// src/density-modes.ts
+var DENSITY_CONFIGS = {
+  compact: {
+    mode: "compact",
+    label: "Compact",
+    description: "Tighter spacing - more content visible at once.",
+    spacingMultiplier: 0.75,
+    fontSizeAdjust: 0.95,
+    lineHeightAdjust: 0.95
+  },
+  default: {
+    mode: "default",
+    label: "Default",
+    description: "Standard spacing for everyday use.",
+    spacingMultiplier: 1,
+    fontSizeAdjust: 1,
+    lineHeightAdjust: 1
+  },
+  comfortable: {
+    mode: "comfortable",
+    label: "Comfortable",
+    description: "More breathing room between elements.",
+    spacingMultiplier: 1.25,
+    fontSizeAdjust: 1.05,
+    lineHeightAdjust: 1.1
+  }
+};
+var SPACING_TOKENS2 = {
+  "--spacing-0": 0,
+  "--spacing-0-5": 0.125,
+  "--spacing-1": 0.25,
+  "--spacing-1-5": 0.375,
+  "--spacing-2": 0.5,
+  "--spacing-2-5": 0.625,
+  "--spacing-3": 0.75,
+  "--spacing-3-5": 0.875,
+  "--spacing-4": 1,
+  "--spacing-5": 1.25,
+  "--spacing-6": 1.5,
+  "--spacing-7": 1.75,
+  "--spacing-8": 2,
+  "--spacing-9": 2.25,
+  "--spacing-10": 2.5,
+  "--spacing-11": 2.75,
+  "--spacing-12": 3,
+  "--spacing-14": 3.5,
+  "--spacing-16": 4,
+  "--spacing-20": 5,
+  "--spacing-24": 6,
+  "--spacing-28": 7,
+  "--spacing-32": 8
+};
+function getDensityCSS(mode) {
+  const config = DENSITY_CONFIGS[mode];
+  const result = {};
+  for (const [token, baseRem] of Object.entries(SPACING_TOKENS2)) {
+    const adjusted = baseRem * config.spacingMultiplier;
+    result[token] = `${adjusted}rem`;
+  }
+  result["--density-font-scale"] = String(config.fontSizeAdjust);
+  result["--density-line-height-scale"] = String(config.lineHeightAdjust);
+  result["--density-spacing-multiplier"] = String(config.spacingMultiplier);
+  return result;
+}
+function applyDensity(mode) {
+  const root = document.documentElement;
+  root.classList.remove("density-compact", "density-comfortable");
+  if (mode === "compact") root.classList.add("density-compact");
+  if (mode === "comfortable") root.classList.add("density-comfortable");
+  if (mode === "default") {
+    for (const token of Object.keys(SPACING_TOKENS2)) {
+      root.style.removeProperty(token);
+    }
+    root.style.removeProperty("--density-font-scale");
+    root.style.removeProperty("--density-line-height-scale");
+    root.style.removeProperty("--density-spacing-multiplier");
+  } else {
+    const css = getDensityCSS(mode);
+    for (const [prop, value] of Object.entries(css)) {
+      root.style.setProperty(prop, value);
+    }
+  }
+}
+function getActiveDensity() {
+  const root = document.documentElement;
+  if (root.classList.contains("density-compact")) return "compact";
+  if (root.classList.contains("density-comfortable")) return "comfortable";
+  return "default";
+}
+function applyDensityToDOM(density) {
+  applyDensity(density);
+}
+
+// src/theme-presets.ts
+function makePreset(base) {
+  return {
+    id: base.id,
+    name: base.name,
+    description: base.description,
+    category: base.category,
+    preview: base.preview,
+    values: { ...THEME_DEFAULTS, ...base.overrides }
+  };
+}
+var BUILT_IN_PRESETS = [
+  makePreset({
+    id: "professional-blue",
+    name: "Professional Blue",
+    description: "Corporate and trustworthy with blue primary and grey surfaces",
+    category: "professional",
+    preview: { primary: "#2563eb", surface: "#f8fafc", text: "#0f172a", accent: "#f59e0b" },
+    overrides: {}
+  }),
+  makePreset({
+    id: "warm-earth",
+    name: "Warm Earth",
+    description: "Terracotta and amber tones with cream surfaces for an organic feel",
+    category: "warm",
+    preview: { primary: "#c2410c", surface: "#fefce8", text: "#431407", accent: "#d97706" },
+    overrides: {
+      primaryColor: "#c2410c",
+      primaryHoverColor: "#9a3412",
+      primaryLightColor: "#ffedd5",
+      secondaryColor: "#78716c",
+      accentColor: "#d97706",
+      sidebarBg: "#fef3c7",
+      sidebarText: "#78716c",
+      surfacePageColor: "#fefce8",
+      surfaceCardColor: "#fffbeb",
+      surfaceModalColor: "#ffffff",
+      focusRingColor: "#c2410c",
+      linkColor: "#c2410c",
+      linkHoverColor: "#9a3412",
+      btnPrimaryBg: "#c2410c",
+      btnPrimaryText: "#ffffff",
+      btnPrimaryHover: "#9a3412",
+      btnPrimaryDisabled: "#fdba74",
+      btnSecondaryBg: "#fffbeb",
+      btnSecondaryText: "#431407",
+      btnSecondaryBorder: "#fed7aa",
+      btnSecondaryHover: "#fef3c7",
+      btnGhostText: "#78716c",
+      btnGhostHoverBg: "#fef3c7",
+      btnGhostHoverText: "#431407",
+      inputBg: "#fffbeb",
+      inputText: "#431407",
+      inputBorder: "#fed7aa",
+      inputFocusBorder: "#c2410c",
+      inputFocusRing: "#c2410c",
+      cardBg: "#fffbeb",
+      cardBorder: "#fed7aa",
+      tableHeaderBg: "#fef3c7",
+      tableHeaderText: "#431407",
+      tableBorder: "#fed7aa",
+      tableRowHover: "#fef3c7",
+      tableRowSelected: "#ffedd5",
+      tableStripe: "#fef3c7"
+    }
+  }),
+  makePreset({
+    id: "festival-bright",
+    name: "Festival Bright",
+    description: "High-energy saturated colours with a festival vibe",
+    category: "vibrant",
+    preview: { primary: "#7c3aed", surface: "#faf5ff", text: "#1e1b4b", accent: "#f43f5e" },
+    overrides: {
+      primaryColor: "#7c3aed",
+      primaryHoverColor: "#6d28d9",
+      primaryLightColor: "#ede9fe",
+      secondaryColor: "#6366f1",
+      accentColor: "#f43f5e",
+      sidebarBg: "#faf5ff",
+      sidebarText: "#6366f1",
+      surfacePageColor: "#faf5ff",
+      surfaceCardColor: "#ffffff",
+      surfaceModalColor: "#ffffff",
+      focusRingColor: "#7c3aed",
+      linkColor: "#7c3aed",
+      linkHoverColor: "#6d28d9",
+      btnPrimaryBg: "#7c3aed",
+      btnPrimaryText: "#ffffff",
+      btnPrimaryHover: "#6d28d9",
+      btnPrimaryDisabled: "#c4b5fd",
+      btnSecondaryBg: "#ffffff",
+      btnSecondaryText: "#4c1d95",
+      btnSecondaryBorder: "#c4b5fd",
+      btnSecondaryHover: "#ede9fe",
+      btnGhostText: "#6366f1",
+      btnGhostHoverBg: "#ede9fe",
+      btnGhostHoverText: "#4c1d95",
+      inputBg: "#ffffff",
+      inputText: "#1e1b4b",
+      inputBorder: "#c4b5fd",
+      inputFocusBorder: "#7c3aed",
+      inputFocusRing: "#7c3aed",
+      cardBg: "#ffffff",
+      cardBorder: "#e9d5ff",
+      tableHeaderBg: "#ede9fe",
+      tableHeaderText: "#4c1d95",
+      tableBorder: "#e9d5ff",
+      tableRowHover: "#ede9fe",
+      tableRowSelected: "#f5f3ff",
+      tableStripe: "#faf5ff",
+      badgeInfoBg: "#ede9fe",
+      badgeInfoText: "#6d28d9"
+    }
+  }),
+  makePreset({
+    id: "midnight-dark",
+    name: "Midnight Dark",
+    description: "Dark surfaces with bright accents for a modern feel",
+    category: "dark",
+    preview: { primary: "#6366f1", surface: "#0f172a", text: "#e2e8f0", accent: "#22d3ee" },
+    overrides: {
+      primaryColor: "#6366f1",
+      primaryHoverColor: "#818cf8",
+      primaryLightColor: "#312e81",
+      secondaryColor: "#94a3b8",
+      accentColor: "#22d3ee",
+      sidebarBg: "#1e293b",
+      sidebarText: "#94a3b8",
+      surfacePageColor: "#0f172a",
+      surfaceCardColor: "#1e293b",
+      surfaceModalColor: "#1e293b",
+      successColor: "#34d399",
+      successLightColor: "#064e3b",
+      warningColor: "#fbbf24",
+      warningLightColor: "#78350f",
+      errorColor: "#f87171",
+      errorLightColor: "#7f1d1d",
+      infoColor: "#60a5fa",
+      infoLightColor: "#1e3a5f",
+      focusRingColor: "#6366f1",
+      linkColor: "#818cf8",
+      linkHoverColor: "#a5b4fc",
+      btnPrimaryBg: "#6366f1",
+      btnPrimaryText: "#ffffff",
+      btnPrimaryHover: "#818cf8",
+      btnPrimaryDisabled: "#4338ca",
+      btnSecondaryBg: "#1e293b",
+      btnSecondaryText: "#e2e8f0",
+      btnSecondaryBorder: "#334155",
+      btnSecondaryHover: "#334155",
+      btnDangerBg: "#dc2626",
+      btnDangerText: "#ffffff",
+      btnDangerHover: "#f87171",
+      btnDangerDisabled: "#991b1b",
+      btnGhostText: "#94a3b8",
+      btnGhostHoverBg: "#334155",
+      btnGhostHoverText: "#e2e8f0",
+      inputBg: "#1e293b",
+      inputText: "#e2e8f0",
+      inputBorder: "#334155",
+      inputPlaceholder: "#64748b",
+      inputFocusBorder: "#6366f1",
+      inputFocusRing: "#6366f1",
+      inputDisabledBg: "#0f172a",
+      inputDisabledText: "#475569",
+      inputErrorBorder: "#f87171",
+      inputErrorFocus: "#ef4444",
+      cardBg: "#1e293b",
+      cardBorder: "#334155",
+      modalBg: "#1e293b",
+      modalBorder: "#334155",
+      tableHeaderBg: "#1e293b",
+      tableHeaderText: "#e2e8f0",
+      tableBorder: "#334155",
+      tableRowHover: "#334155",
+      tableRowSelected: "#312e81",
+      tableStripe: "#1e293b",
+      badgeNeutralBg: "#334155",
+      badgeNeutralText: "#e2e8f0",
+      badgeInfoBg: "#1e3a5f",
+      badgeInfoText: "#60a5fa",
+      badgeSuccessBg: "#064e3b",
+      badgeSuccessText: "#34d399",
+      badgeWarningBg: "#78350f",
+      badgeWarningText: "#fbbf24",
+      badgeDangerBg: "#7f1d1d",
+      badgeDangerText: "#f87171"
+    }
+  }),
+  makePreset({
+    id: "forest-green",
+    name: "Forest Green",
+    description: "Nature-inspired greens with warm neutrals",
+    category: "warm",
+    preview: { primary: "#15803d", surface: "#f0fdf4", text: "#14532d", accent: "#eab308" },
+    overrides: {
+      primaryColor: "#15803d",
+      primaryHoverColor: "#166534",
+      primaryLightColor: "#dcfce7",
+      secondaryColor: "#57534e",
+      accentColor: "#eab308",
+      sidebarBg: "#f0fdf4",
+      sidebarText: "#57534e",
+      surfacePageColor: "#f0fdf4",
+      surfaceCardColor: "#ffffff",
+      surfaceModalColor: "#ffffff",
+      focusRingColor: "#15803d",
+      linkColor: "#15803d",
+      linkHoverColor: "#166534",
+      btnPrimaryBg: "#15803d",
+      btnPrimaryText: "#ffffff",
+      btnPrimaryHover: "#166534",
+      btnPrimaryDisabled: "#86efac",
+      btnSecondaryBg: "#ffffff",
+      btnSecondaryText: "#14532d",
+      btnSecondaryBorder: "#bbf7d0",
+      btnSecondaryHover: "#dcfce7",
+      btnGhostText: "#57534e",
+      btnGhostHoverBg: "#dcfce7",
+      btnGhostHoverText: "#14532d",
+      inputBg: "#ffffff",
+      inputText: "#14532d",
+      inputBorder: "#bbf7d0",
+      inputFocusBorder: "#15803d",
+      inputFocusRing: "#15803d",
+      cardBg: "#ffffff",
+      cardBorder: "#bbf7d0",
+      tableHeaderBg: "#dcfce7",
+      tableHeaderText: "#14532d",
+      tableBorder: "#bbf7d0",
+      tableRowHover: "#dcfce7",
+      tableRowSelected: "#f0fdf4",
+      tableStripe: "#f0fdf4"
+    }
+  }),
+  makePreset({
+    id: "sunset-orange",
+    name: "Sunset Orange",
+    description: "Warm gradient feel with orange and coral primary",
+    category: "vibrant",
+    preview: { primary: "#ea580c", surface: "#fff7ed", text: "#431407", accent: "#e11d48" },
+    overrides: {
+      primaryColor: "#ea580c",
+      primaryHoverColor: "#c2410c",
+      primaryLightColor: "#fed7aa",
+      secondaryColor: "#78716c",
+      accentColor: "#e11d48",
+      sidebarBg: "#fff7ed",
+      sidebarText: "#78716c",
+      surfacePageColor: "#fff7ed",
+      surfaceCardColor: "#ffffff",
+      surfaceModalColor: "#ffffff",
+      focusRingColor: "#ea580c",
+      linkColor: "#ea580c",
+      linkHoverColor: "#c2410c",
+      btnPrimaryBg: "#ea580c",
+      btnPrimaryText: "#ffffff",
+      btnPrimaryHover: "#c2410c",
+      btnPrimaryDisabled: "#fdba74",
+      btnSecondaryBg: "#ffffff",
+      btnSecondaryText: "#431407",
+      btnSecondaryBorder: "#fdba74",
+      btnSecondaryHover: "#fed7aa",
+      btnGhostText: "#78716c",
+      btnGhostHoverBg: "#fed7aa",
+      btnGhostHoverText: "#431407",
+      inputBg: "#ffffff",
+      inputText: "#431407",
+      inputBorder: "#fdba74",
+      inputFocusBorder: "#ea580c",
+      inputFocusRing: "#ea580c",
+      cardBg: "#ffffff",
+      cardBorder: "#fdba74",
+      tableHeaderBg: "#fed7aa",
+      tableHeaderText: "#431407",
+      tableBorder: "#fdba74",
+      tableRowHover: "#fed7aa",
+      tableRowSelected: "#ffedd5",
+      tableStripe: "#fff7ed"
+    }
+  })
+];
+function findPreset(id) {
+  return BUILT_IN_PRESETS.find((p) => p.id === id);
+}
+
+// src/theme-export.ts
+function exportTheme(current, name, metadata) {
+  return {
+    version: 1,
+    name,
+    exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    values: { ...current },
+    metadata
+  };
+}
+function validateImport(data) {
+  const errors = [];
+  const warnings = [];
+  if (!data || typeof data !== "object") {
+    return { valid: false, errors: ["Invalid JSON structure - expected an object"], warnings };
+  }
+  const obj = data;
+  if (obj.version !== 1) {
+    errors.push(`Unsupported version: ${String(obj.version ?? "missing")}. Expected 1.`);
+  }
+  if (typeof obj.name !== "string" || !obj.name) {
+    errors.push('Missing or invalid "name" field');
+  }
+  if (!obj.values || typeof obj.values !== "object") {
+    errors.push('Missing or invalid "values" field - expected an object');
+    return { valid: false, errors, warnings };
+  }
+  const values = obj.values;
+  const knownKeys = new Set(Object.keys(THEME_DEFAULTS));
+  const parsedValues = {};
+  for (const [key, value] of Object.entries(values)) {
+    if (typeof value !== "string") {
+      errors.push(`Value for key "${key}" must be a string, got ${typeof value}`);
+      continue;
+    }
+    if (!knownKeys.has(key)) {
+      warnings.push(`Unknown key "${key}" - will be ignored`);
+    } else {
+      parsedValues[key] = value;
+    }
+  }
+  if (errors.length > 0) {
+    return { valid: false, errors, warnings };
+  }
+  return {
+    valid: true,
+    errors: [],
+    warnings,
+    parsed: {
+      version: 1,
+      name: obj.name,
+      exportedAt: obj.exportedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+      values: parsedValues,
+      metadata: obj.metadata
+    }
+  };
+}
+function downloadThemeAsJSON(theme) {
+  const json = JSON.stringify(theme, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const dateStr = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const safeName = theme.name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+  const filename = `snagtag-theme-${safeName}-${dateStr}.json`;
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+async function readThemeFromFile(file) {
+  const text = await file.text();
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    throw new Error("Invalid JSON file - could not parse");
+  }
+  const result = validateImport(data);
+  if (!result.valid || !result.parsed) {
+    throw new Error(`Invalid theme file: ${result.errors.join("; ")}`);
+  }
+  return result.parsed;
+}
+
+// src/w3c-tokens.ts
+function categoryToW3CType(category) {
+  switch (category) {
+    case "colour":
+      return "color";
+    case "typography":
+      return "dimension";
+    case "spacing":
+      return "dimension";
+    case "border":
+      return "dimension";
+    case "shadow":
+      return "shadow";
+    case "motion":
+      return "duration";
+    default:
+      return "dimension";
+  }
+}
+function cssVarToTokenName(cssVar) {
+  return cssVar.replace(/^--/, "").replace(/-/g, ".");
+}
+function resolveValue(token, overrides) {
+  if (token.themeKey && overrides?.[token.themeKey]) {
+    return overrides[token.themeKey];
+  }
+  if (token.themeKey && THEME_DEFAULTS[token.themeKey]) {
+    return THEME_DEFAULTS[token.themeKey];
+  }
+  return token.defaultValue;
+}
+function setNestedValue(obj, path, value) {
+  const parts = path.split(".");
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    if (!current[parts[i]] || typeof current[parts[i]] !== "object" || "$type" in current[parts[i]]) {
+      current[parts[i]] = {};
+    }
+    current = current[parts[i]];
+  }
+  current[parts[parts.length - 1]] = value;
+}
+function exportToW3CFormat(overrides) {
+  const root = {};
+  for (const category of TOKEN_REGISTRY) {
+    for (const token of category.tokens) {
+      const name = cssVarToTokenName(token.cssVar);
+      const w3cToken = {
+        $type: categoryToW3CType(token.category),
+        $value: resolveValue(token, overrides),
+        $description: token.label
+      };
+      if (token.references) {
+        w3cToken.$extensions = {
+          "com.snagtag.references": token.references
+        };
+      }
+      if (token.themeKey) {
+        w3cToken.$extensions = {
+          ...w3cToken.$extensions,
+          "com.snagtag.themeKey": token.themeKey
+        };
+      }
+      setNestedValue(root, name, w3cToken);
+    }
+  }
+  return root;
+}
+function downloadW3CTokens(overrides) {
+  const tokens = exportToW3CFormat(overrides);
+  const json = JSON.stringify(tokens, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const dateStr = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `snagtag-design-tokens-w3c-${dateStr}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// src/style-guide-export.ts
+function generateStyleGuide(overrides) {
+  const theme = { ...THEME_DEFAULTS, ...overrides };
+  const qualityScore = 0;
+  const lines = [];
+  lines.push("# SnagTag Design System Style Guide");
+  lines.push("");
+  lines.push(`Quality score: ${qualityScore}/100`);
+  lines.push("");
+  lines.push("## Colour Palette");
+  lines.push("");
+  for (const cat of THEME_CATEGORIES) {
+    lines.push(`### ${cat.label}`);
+    lines.push("");
+    lines.push("| Token | Value |");
+    lines.push("|-------|-------|");
+    for (const key of cat.keys) {
+      const value = theme[key] ?? THEME_DEFAULTS[key] ?? "";
+      lines.push(`| ${key} | ${value} |`);
+    }
+    lines.push("");
+  }
+  lines.push("## Token Reference");
+  lines.push("");
+  for (const category of TOKEN_REGISTRY) {
+    lines.push(`### ${category.label}`);
+    lines.push("");
+    lines.push("| CSS Variable | Label | Default | Themeable |");
+    lines.push("|-------------|-------|---------|-----------|");
+    for (const token of category.tokens) {
+      const themeable = token.themeKey ? `Yes (${token.themeKey})` : "No";
+      lines.push(`| \`${token.cssVar}\` | ${token.label} | ${token.defaultValue} | ${themeable} |`);
+    }
+    lines.push("");
+  }
+  lines.push("## Typography");
+  lines.push("");
+  const typoTokens = TOKEN_REGISTRY.flatMap((c) => c.tokens).filter((t) => t.category === "typography");
+  if (typoTokens.length > 0) {
+    lines.push("| Token | Value |");
+    lines.push("|-------|-------|");
+    for (const t of typoTokens) {
+      lines.push(`| \`${t.cssVar}\` | ${t.defaultValue} |`);
+    }
+    lines.push("");
+  }
+  lines.push("## Spacing Scale");
+  lines.push("");
+  const spacingTokens = TOKEN_REGISTRY.flatMap((c) => c.tokens).filter((t) => t.category === "spacing");
+  if (spacingTokens.length > 0) {
+    lines.push("| Token | Value |");
+    lines.push("|-------|-------|");
+    for (const t of spacingTokens) {
+      lines.push(`| \`${t.cssVar}\` | ${t.defaultValue} |`);
+    }
+    lines.push("");
+  }
+  lines.push("## Customisation");
+  lines.push("");
+  lines.push("Theme values can be customised at three levels:");
+  lines.push("");
+  lines.push("1. **Platform defaults** - set by the platform administrator");
+  lines.push("2. **Tenant defaults** - set per vendor via Settings > Design System");
+  lines.push("3. **User overrides** - personal preferences per user");
+  lines.push("");
+  lines.push("Higher layers override lower layers. Locked tokens (set by platform admin) cannot be overridden.");
+  lines.push("");
+  lines.push(`Total themeable tokens: ${TOKEN_REGISTRY.flatMap((c) => c.tokens).filter((t) => t.themeKey).length}`);
+  return lines.join("\n");
+}
+function downloadStyleGuide(overrides) {
+  const md = generateStyleGuide(overrides);
+  const blob = new Blob([md], { type: "text/markdown" });
+  const url = URL.createObjectURL(blob);
+  const dateStr = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `snagtag-style-guide-${dateStr}.md`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// src/audit-report.ts
+function gradeLabel(score) {
+  if (score >= 90) return "Excellent";
+  if (score >= 80) return "Good";
+  if (score >= 60) return "Needs improvement";
+  return "Poor";
+}
+function calculateQualityScore(_overrides) {
+  return { overall: 0, colourHarmony: 0, contrastCompliance: 0, typographyConsistency: 0, spacingRegularity: 0 };
+}
+function findContrastIssues(_overrides) {
+  return [];
+}
+function checkConsistency(_overrides) {
+  return [];
+}
+function generateAuditReport(overrides) {
+  const _theme = { ...THEME_DEFAULTS, ...overrides };
+  const quality = calculateQualityScore(overrides);
+  const contrastIssues = findContrastIssues(overrides);
+  const consistencyIssues = checkConsistency(overrides);
+  const allTokens = TOKEN_REGISTRY.flatMap((c) => c.tokens);
+  const byCategory = {};
+  for (const token of allTokens) {
+    byCategory[token.category] = (byCategory[token.category] ?? 0) + 1;
+  }
+  const themeable = allTokens.filter((t) => t.themeKey).length;
+  const summary = [
+    `Design system quality: ${quality.overall}/100 (${gradeLabel(quality.overall)})`,
+    `Contrast compliance: ${quality.contrastCompliance}% (${contrastIssues.length} failing pair${contrastIssues.length !== 1 ? "s" : ""})`,
+    `Consistency issues: ${consistencyIssues.length}`,
+    `Token coverage: ${allTokens.length} tokens across ${Object.keys(byCategory).length} categories (${themeable} themeable)`
+  ].join(". ");
+  return {
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    quality,
+    contrastIssues,
+    consistencyIssues,
+    tokenStats: { total: allTokens.length, byCategory, themeable },
+    summary
+  };
+}
+function auditReportToMarkdown(report) {
+  const lines = [];
+  const date = new Date(report.generatedAt).toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+  lines.push("# Design System Audit Report");
+  lines.push(`Generated: ${date}`);
+  lines.push("");
+  lines.push("## Summary");
+  lines.push(report.summary);
+  lines.push("");
+  lines.push("## Quality Score");
+  lines.push("| Metric | Score | Grade |");
+  lines.push("|--------|-------|-------|");
+  lines.push(`| Overall | ${report.quality.overall}/100 | ${gradeLabel(report.quality.overall)} |`);
+  lines.push(`| Colour Harmony | ${report.quality.colourHarmony}/100 | ${gradeLabel(report.quality.colourHarmony)} |`);
+  lines.push(`| Contrast Compliance | ${report.quality.contrastCompliance}/100 | ${gradeLabel(report.quality.contrastCompliance)} |`);
+  lines.push(`| Typography Consistency | ${report.quality.typographyConsistency}/100 | ${gradeLabel(report.quality.typographyConsistency)} |`);
+  lines.push(`| Spacing Regularity | ${report.quality.spacingRegularity}/100 | ${gradeLabel(report.quality.spacingRegularity)} |`);
+  lines.push("");
+  if (report.contrastIssues.length > 0) {
+    lines.push("## Contrast Issues");
+    lines.push(`${report.contrastIssues.length} pair${report.contrastIssues.length !== 1 ? "s" : ""} failing WCAG AA:`);
+    lines.push("");
+    lines.push("| Foreground | Background | Ratio | Required | Suggested Fix |");
+    lines.push("|------------|------------|-------|----------|---------------|");
+    for (const issue of report.contrastIssues) {
+      lines.push(`| ${issue.foregroundLabel} (${issue.foregroundHex}) | ${issue.backgroundLabel} (${issue.backgroundHex}) | ${issue.ratio}:1 | ${issue.requiredRatio}:1 | ${issue.suggestedFix} |`);
+    }
+    lines.push("");
+  }
+  if (report.consistencyIssues.length > 0) {
+    lines.push("## Consistency Issues");
+    for (const issue of report.consistencyIssues) {
+      lines.push(`- **${issue.severity.toUpperCase()}** (${issue.category}): ${issue.message}`);
+      lines.push(`  Suggestion: ${issue.suggestion}`);
+    }
+    lines.push("");
+  }
+  lines.push("## Token Statistics");
+  lines.push(`- Total tokens: ${report.tokenStats.total}`);
+  lines.push(`- Themeable: ${report.tokenStats.themeable}`);
+  for (const [cat, count] of Object.entries(report.tokenStats.byCategory)) {
+    lines.push(`- ${cat}: ${count}`);
+  }
+  return lines.join("\n");
+}
+function downloadAuditReport(report) {
+  const md = auditReportToMarkdown(report);
+  const blob = new Blob([md], { type: "text/markdown" });
+  const url = URL.createObjectURL(blob);
+  const dateStr = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `snagtag-audit-report-${dateStr}.md`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// src/dom.ts
+function applyThemeToDOM(merged) {
+  const root = document.documentElement;
+  if (merged.primaryColor) {
+    merged.primaryColor = ensureContrastOnWhite(merged.primaryColor);
+  }
+  if (merged.primaryHoverColor) {
+    merged.primaryHoverColor = ensureContrastOnWhite(merged.primaryHoverColor);
+  }
+  for (const [key, cssVar] of Object.entries(THEME_KEY_TO_CSS)) {
+    const value = merged[key];
+    if (value) {
+      root.style.setProperty(cssVar, value);
+    } else {
+      root.style.removeProperty(cssVar);
+    }
+  }
+  const sidebarBg = merged.sidebarBg || THEME_DEFAULTS.sidebarBg;
+  const dark = isDark(sidebarBg);
+  root.style.setProperty("--color-sidebar-border", dark ? lighten(sidebarBg, 0.15) : "#e2e8f0");
+  root.style.setProperty("--color-sidebar-hover", dark ? lighten(sidebarBg, 0.1) : "#f1f5f9");
+  const explicitActiveBg = merged.sidebarActiveBg;
+  const primaryColor = merged.primaryColor || THEME_DEFAULTS.primaryColor;
+  const primaryLight = merged.primaryLightColor || THEME_DEFAULTS.primaryLightColor;
+  const primaryHover = merged.primaryHoverColor || THEME_DEFAULTS.primaryHoverColor;
+  if (explicitActiveBg) {
+    root.style.setProperty("--color-sidebar-active-bg", explicitActiveBg);
+    root.style.setProperty("--color-sidebar-active-text", isDark(explicitActiveBg) ? "#ffffff" : primaryHover);
+  } else if (dark) {
+    root.style.setProperty("--color-sidebar-active-bg", primaryColor + "30");
+    root.style.setProperty("--color-sidebar-active-text", primaryLight);
+  } else {
+    root.style.setProperty("--color-sidebar-active-bg", primaryLight);
+    root.style.setProperty("--color-sidebar-active-text", primaryHover);
+  }
+  const accent = merged.accentColor || THEME_DEFAULTS.accentColor;
+  root.style.setProperty("--color-accent-light", lighten(accent, 0.85));
+  root.style.setProperty("--color-accent-hover", darken(accent, 0.15));
+}
+function clearThemeFromDOM() {
+  const root = document.documentElement;
+  for (const cssVar of Object.values(THEME_KEY_TO_CSS)) {
+    root.style.removeProperty(cssVar);
+  }
+  for (const v of [
+    "--color-sidebar-border",
+    "--color-sidebar-hover",
+    "--color-sidebar-active-bg",
+    "--color-sidebar-active-text",
+    "--color-accent-light",
+    "--color-accent-hover"
+  ]) {
+    root.style.removeProperty(v);
+  }
+}
+
+// src/contrast-checker.ts
+var CONTRAST_PAIRS = [
+  // Button text on button bg
+  { fgKey: "btnPrimaryText", bgKey: "btnPrimaryBg", fgLabel: "Button Primary Text", bgLabel: "Button Primary Background", fgVar: "--color-btn-primary-text", bgVar: "--color-btn-primary-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "btnSecondaryText", bgKey: "btnSecondaryBg", fgLabel: "Button Secondary Text", bgLabel: "Button Secondary Background", fgVar: "--color-btn-secondary-text", bgVar: "--color-btn-secondary-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "btnDangerText", bgKey: "btnDangerBg", fgLabel: "Button Danger Text", bgLabel: "Button Danger Background", fgVar: "--color-btn-danger-text", bgVar: "--color-btn-danger-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "btnGhostText", bgKey: "surfaceCardColor", fgLabel: "Button Ghost Text", bgLabel: "Card Surface", fgVar: "--color-btn-ghost-text", bgVar: "--color-surface-card", requiredRatio: 4.5, level: "AA" },
+  // Input text on input bg
+  { fgKey: "inputText", bgKey: "inputBg", fgLabel: "Input Text", bgLabel: "Input Background", fgVar: "--color-input-text", bgVar: "--color-input-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "inputPlaceholder", bgKey: "inputBg", fgLabel: "Input Placeholder", bgLabel: "Input Background", fgVar: "--color-input-placeholder", bgVar: "--color-input-bg", requiredRatio: 3, level: "AA" },
+  // Badge text on badge bg (all 5 tones)
+  { fgKey: "badgeNeutralText", bgKey: "badgeNeutralBg", fgLabel: "Badge Neutral Text", bgLabel: "Badge Neutral Background", fgVar: "--color-badge-neutral-text", bgVar: "--color-badge-neutral-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "badgeInfoText", bgKey: "badgeInfoBg", fgLabel: "Badge Info Text", bgLabel: "Badge Info Background", fgVar: "--color-badge-info-text", bgVar: "--color-badge-info-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "badgeSuccessText", bgKey: "badgeSuccessBg", fgLabel: "Badge Success Text", bgLabel: "Badge Success Background", fgVar: "--color-badge-success-text", bgVar: "--color-badge-success-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "badgeWarningText", bgKey: "badgeWarningBg", fgLabel: "Badge Warning Text", bgLabel: "Badge Warning Background", fgVar: "--color-badge-warning-text", bgVar: "--color-badge-warning-bg", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "badgeDangerText", bgKey: "badgeDangerBg", fgLabel: "Badge Danger Text", bgLabel: "Badge Danger Background", fgVar: "--color-badge-danger-text", bgVar: "--color-badge-danger-bg", requiredRatio: 4.5, level: "AA" },
+  // Body text on surface colours
+  { fgKey: "inputText", bgKey: "surfacePageColor", fgLabel: "Body Text", bgLabel: "Page Background", fgVar: "--color-input-text", bgVar: "--color-surface-page", requiredRatio: 4.5, level: "AA" },
+  { fgKey: "inputText", bgKey: "surfaceCardColor", fgLabel: "Body Text", bgLabel: "Card Surface", fgVar: "--color-input-text", bgVar: "--color-surface-card", requiredRatio: 4.5, level: "AA" },
+  // Sidebar text on sidebar bg
+  { fgKey: "sidebarText", bgKey: "sidebarBg", fgLabel: "Sidebar Text", bgLabel: "Sidebar Background", fgVar: "--color-sidebar-text", bgVar: "--color-sidebar-bg", requiredRatio: 4.5, level: "AA" },
+  // Link colour on card surface
+  { fgKey: "linkColor", bgKey: "surfaceCardColor", fgLabel: "Link", bgLabel: "Card Surface", fgVar: "--color-link", bgVar: "--color-surface-card", requiredRatio: 4.5, level: "AA" },
+  // Table header text on table header bg
+  { fgKey: "tableHeaderText", bgKey: "tableHeaderBg", fgLabel: "Table Header Text", bgLabel: "Table Header Background", fgVar: "--color-table-header-text", bgVar: "--color-table-header-bg", requiredRatio: 4.5, level: "AA" }
+];
+function suggestFix(fg, bg, targetRatio) {
+  const bgLum = luminance(bg);
+  const adjustFn = bgLum < 0.5 ? lighten : darken;
+  let adjusted = fg;
+  let step = 0.02;
+  let attempts = 0;
+  while (contrastRatio(adjusted, bg) < targetRatio && attempts < 50) {
+    adjusted = adjustFn(adjusted, step);
+    attempts++;
+    if (attempts % 10 === 0) step += 0.01;
+  }
+  return adjusted;
+}
+function findContrastIssues2(overrides) {
+  const theme = { ...THEME_DEFAULTS, ...overrides };
+  const issues = [];
+  for (const pair of CONTRAST_PAIRS) {
+    const fg = theme[pair.fgKey];
+    const bg = theme[pair.bgKey];
+    if (!fg || !bg || !fg.startsWith("#") || !bg.startsWith("#")) continue;
+    if (fg.length < 7 || bg.length < 7) continue;
+    const ratio = contrastRatio(fg, bg);
+    if (ratio < pair.requiredRatio) {
+      issues.push({
+        foregroundVar: pair.fgVar,
+        backgroundVar: pair.bgVar,
+        foregroundLabel: pair.fgLabel,
+        backgroundLabel: pair.bgLabel,
+        foregroundHex: fg,
+        backgroundHex: bg,
+        ratio: Math.round(ratio * 10) / 10,
+        requiredRatio: pair.requiredRatio,
+        suggestedFix: suggestFix(fg, bg, pair.requiredRatio),
+        level: pair.level,
+        themeKey: pair.fgKey
+      });
+    }
+  }
+  return issues;
+}
+
+// src/consistency-checker.ts
+function parseToPx(value) {
+  if (value === "none" || value === "0" || value === "0px") return 0;
+  const remMatch = value.match(/^([\d.]+)rem$/);
+  if (remMatch) return parseFloat(remMatch[1]) * 16;
+  const pxMatch = value.match(/^([\d.]+)px$/);
+  if (pxMatch) return parseFloat(pxMatch[1]);
+  return null;
+}
+function getTokensByCategory(category) {
+  return TOKEN_REGISTRY.flatMap((c) => c.tokens).filter((t) => t.category === category);
+}
+function checkRadiusConsistency(overrides) {
+  const issues = [];
+  const borderTokens = getTokensByCategory("border");
+  const radiusTokens = borderTokens.filter((t) => t.cssVar.startsWith("--radius-"));
+  const radiusValues = /* @__PURE__ */ new Map();
+  for (const token of radiusTokens) {
+    if (token.cssVar === "--radius-none" || token.cssVar === "--radius-full") continue;
+    const value = overrides?.[token.cssVar] ?? token.defaultValue;
+    const px = parseToPx(value);
+    if (px !== null) {
+      radiusValues.set(token.cssVar, px);
+    }
+  }
+  const ordered = ["--radius-sm", "--radius-md", "--radius-lg", "--radius-xl"];
+  const values = ordered.map((v) => radiusValues.get(v)).filter((v) => v !== null && v !== void 0);
+  for (let i = 1; i < values.length; i++) {
+    if (values[i] <= values[i - 1]) {
+      issues.push({
+        severity: "warning",
+        category: "radius",
+        message: `Radius scale is not strictly increasing: ${ordered[i - 1]} (${values[i - 1]}px) is not smaller than ${ordered[i]} (${values[i]}px).`,
+        affectedTokens: [ordered[i - 1], ordered[i]],
+        suggestion: `Ensure radius values increase progressively: sm < md < lg < xl.`
+      });
+    }
+  }
+  return issues;
+}
+function checkBorderWidthConsistency(overrides) {
+  const issues = [];
+  const borderTokens = getTokensByCategory("border");
+  const widthTokens = borderTokens.filter((t) => t.cssVar.startsWith("--border-width-"));
+  const widthMap = /* @__PURE__ */ new Map();
+  for (const token of widthTokens) {
+    const value = overrides?.[token.cssVar] ?? token.defaultValue;
+    const px = parseToPx(value);
+    if (px !== null) {
+      widthMap.set(token.cssVar, px);
+    }
+  }
+  const ordered = ["--border-width-none", "--border-width-thin", "--border-width-medium"];
+  const values = ordered.map((v) => widthMap.get(v)).filter((v) => v !== null && v !== void 0);
+  for (let i = 1; i < values.length; i++) {
+    if (values[i] <= values[i - 1]) {
+      issues.push({
+        severity: "warning",
+        category: "border",
+        message: `Border width scale is not strictly increasing: ${ordered[i - 1]} (${values[i - 1]}px) vs ${ordered[i]} (${values[i]}px).`,
+        affectedTokens: [ordered[i - 1], ordered[i]],
+        suggestion: `Ensure border widths increase: none (0) < thin (1px) < medium (2px).`
+      });
+    }
+  }
+  const nonZeroVals = /* @__PURE__ */ new Map();
+  for (const [name, px] of widthMap) {
+    if (px === 0) continue;
+    const existing = nonZeroVals.get(px) ?? [];
+    existing.push(name);
+    nonZeroVals.set(px, existing);
+  }
+  for (const [px, names] of nonZeroVals) {
+    if (names.length > 1) {
+      issues.push({
+        severity: "info",
+        category: "border",
+        message: `Multiple border width tokens share the same value (${px}px): ${names.join(", ")}.`,
+        affectedTokens: names,
+        suggestion: `Consider differentiating these values or consolidating to a single token.`
+      });
+    }
+  }
+  return issues;
+}
+function checkSpacingConsistency(overrides) {
+  const issues = [];
+  const spacingTokens = getTokensByCategory("spacing");
+  const values = [];
+  for (const token of spacingTokens) {
+    const value = overrides?.[token.cssVar] ?? token.defaultValue;
+    const px = parseToPx(value);
+    if (px !== null) {
+      values.push({ name: token.cssVar, px });
+    }
+  }
+  for (let i = 1; i < values.length; i++) {
+    if (values[i].px < values[i - 1].px) {
+      issues.push({
+        severity: "warning",
+        category: "spacing",
+        message: `Spacing scale is not increasing: ${values[i - 1].name} (${values[i - 1].px}px) > ${values[i].name} (${values[i].px}px).`,
+        affectedTokens: [values[i - 1].name, values[i].name],
+        suggestion: `Ensure spacing tokens increase progressively from xs to 2xl.`
+      });
+    }
+  }
+  if (values.length >= 3) {
+    const ratios = [];
+    for (let i = 1; i < values.length; i++) {
+      if (values[i - 1].px > 0) {
+        ratios.push(values[i].px / values[i - 1].px);
+      }
+    }
+    if (ratios.length >= 2) {
+      const avg = ratios.reduce((a, b) => a + b, 0) / ratios.length;
+      for (let i = 0; i < ratios.length; i++) {
+        if (Math.abs(ratios[i] - avg) > avg * 0.5) {
+          issues.push({
+            severity: "info",
+            category: "spacing",
+            message: `Spacing ratio between ${values[i].name} and ${values[i + 1].name} (${ratios[i].toFixed(2)}x) differs significantly from the average (${avg.toFixed(2)}x).`,
+            affectedTokens: [values[i].name, values[i + 1].name],
+            suggestion: `Consider using a consistent multiplier across your spacing scale for visual rhythm.`
+          });
+        }
+      }
+    }
+  }
+  return issues;
+}
+function checkConsistency2(overrides) {
+  return [
+    ...checkRadiusConsistency(overrides),
+    ...checkBorderWidthConsistency(overrides),
+    ...checkSpacingConsistency(overrides)
+  ];
+}
+
+// src/quality-score.ts
+function scoreColourHarmony(theme) {
+  let score = 100;
+  const primary = theme.primaryColor;
+  const accent = theme.accentColor;
+  const success = theme.successColor;
+  const warning = theme.warningColor;
+  const error = theme.errorColor;
+  if (!primary || !accent) return 50;
+  const colours = [primary, accent, success, warning, error].filter(
+    (c) => c && c.startsWith("#") && c.length >= 7
+  );
+  if (colours.length < 2) return 50;
+  const semanticHues = [success, warning, error].filter((c) => !!c && c.startsWith("#") && c.length >= 7).map((c) => hexToHSL(c).h);
+  for (let i = 0; i < semanticHues.length; i++) {
+    for (let j = i + 1; j < semanticHues.length; j++) {
+      const diff = Math.abs(semanticHues[i] - semanticHues[j]);
+      const hueDist = Math.min(diff, 360 - diff);
+      if (hueDist < 15) {
+        score -= 15;
+      }
+    }
+  }
+  const primaryHue = hexToHSL(primary).h;
+  const accentHue = hexToHSL(accent).h;
+  const primaryAccentDist = Math.min(
+    Math.abs(primaryHue - accentHue),
+    360 - Math.abs(primaryHue - accentHue)
+  );
+  if (primaryAccentDist < 20) {
+    score -= 20;
+  }
+  for (const c of colours) {
+    const hsl = hexToHSL(c);
+    if (hsl.s < 20) score -= 5;
+    if (hsl.s > 95) score -= 5;
+  }
+  return Math.max(0, Math.min(100, score));
+}
+function scoreContrastCompliance(theme) {
+  const issues = findContrastIssues2(theme);
+  const totalPairs = 17;
+  const failingPairs = issues.length;
+  const passingPairs = totalPairs - failingPairs;
+  return Math.round(passingPairs / totalPairs * 100);
+}
+function scoreTypographyConsistency() {
+  let score = 100;
+  const typographyTokens = TOKEN_REGISTRY.flatMap((c) => c.tokens).filter((t) => t.category === "typography");
+  const sizeTokens = typographyTokens.filter((t) => t.cssVar.startsWith("--text-"));
+  const sizes = [];
+  for (const token of sizeTokens) {
+    const remMatch = token.defaultValue.match(/^([\d.]+)rem$/);
+    if (remMatch) {
+      sizes.push(parseFloat(remMatch[1]));
+    }
+  }
+  if (sizes.length > 0) {
+    const min = Math.min(...sizes);
+    const max = Math.max(...sizes);
+    const ratio = max / min;
+    if (ratio > 5) score -= 10;
+    if (ratio < 1.5) score -= 10;
+  }
+  const lineHeightTokens = typographyTokens.filter((t) => t.cssVar.startsWith("--leading-"));
+  if (lineHeightTokens.length < 3) {
+    score -= 15;
+  }
+  const weightTokens = typographyTokens.filter((t) => t.cssVar.startsWith("--weight-"));
+  if (weightTokens.length < 3) {
+    score -= 15;
+  }
+  return Math.max(0, Math.min(100, score));
+}
+function scoreSpacingRegularity() {
+  let score = 100;
+  const consistencyIssues = checkConsistency2();
+  const spacingIssues = consistencyIssues.filter((i) => i.category === "spacing");
+  for (const issue of spacingIssues) {
+    score -= issue.severity === "warning" ? 15 : 5;
+  }
+  const otherIssues = consistencyIssues.filter((i) => i.category !== "spacing");
+  for (const issue of otherIssues) {
+    score -= issue.severity === "warning" ? 10 : 3;
+  }
+  return Math.max(0, Math.min(100, score));
+}
+function calculateQualityScore2(overrides) {
+  const theme = { ...THEME_DEFAULTS, ...overrides };
+  const colourHarmony = scoreColourHarmony(theme);
+  const contrastCompliance = scoreContrastCompliance(theme);
+  const typographyConsistency = scoreTypographyConsistency();
+  const spacingRegularity = scoreSpacingRegularity();
+  const overall = Math.round(
+    colourHarmony * 0.2 + contrastCompliance * 0.4 + typographyConsistency * 0.2 + spacingRegularity * 0.2
+  );
+  return {
+    overall,
+    colourHarmony,
+    contrastCompliance,
+    typographyConsistency,
+    spacingRegularity
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BUILT_IN_PRESETS,
+  COLOUR_BLINDNESS_TYPES,
+  DENSITY_CONFIGS,
+  EASING_PRESETS,
+  FONT_PAIRINGS,
+  SCALE_RATIOS,
+  SURFACE_DEFINITIONS,
+  THEME_CATEGORIES,
+  THEME_DEFAULTS,
+  THEME_KEY_TO_CSS,
+  TOKEN_REGISTRY,
+  addCustomCategory,
+  addExtractedToken,
+  adjustSemanticForDark,
+  applyAddCategory,
+  applyBulkChange,
+  applyBulkMove,
+  applyChange,
+  applyDarkModeToDOM,
+  applyDensity,
+  applyDensityToDOM,
+  applyExtract,
+  applyMove,
+  applySurface,
+  applySurfaceToDOM,
+  applyThemeToDOM,
+  auditReportToMarkdown,
+  bulkMoveTokens,
+  calculateQualityScore,
+  captureSnapshot,
+  checkConsistency,
+  clampControlPoint,
+  clearSnapshots,
+  clearSurface,
+  clearThemeFromDOM,
+  clearUsageCache,
+  contrastRatio,
+  countTokenUsage,
+  createOverlay,
+  createReassignmentState,
+  createThemeEditorState,
+  darken,
+  downloadAuditReport,
+  downloadStyleGuide,
+  downloadThemeAsJSON,
+  downloadW3CTokens,
+  ensureContrastOnWhite,
+  exportTheme,
+  exportToW3CFormat,
+  extractToken,
+  findContrastIssues,
+  findPreset,
+  findPresetByValue,
+  findToken,
+  findUnusedTokens,
+  formatCubicBezier,
+  generateAuditReport,
+  generateDarkTheme,
+  generateScale,
+  generateStyleGuide,
+  generateTypeScale,
+  getActiveDensity,
+  getActiveSurface,
+  getAllCategoryLabels,
+  getDensityCSS,
+  getDependents,
+  getEffectiveCategories,
+  getOpeningSnapshot,
+  getPresetsByCategory,
+  getSnapshot,
+  getSurfaceDefinition,
+  getSurfaceOverrides,
+  getTokenCategory,
+  getTokenChain,
+  getTokenUsageCount,
+  getTokenUsageStats,
+  hasExtractedToken,
+  hexToHSL,
+  hexToHsl,
+  hslToHex,
+  hslToHexDark,
+  invertLightness,
+  isDark,
+  isDarkMode,
+  lighten,
+  luminance,
+  makePreset,
+  markSaved,
+  moveToken,
+  parseCubicBezier,
+  readSnapshots,
+  readThemeFromFile,
+  redo,
+  redoReassignment,
+  resetToDefaults,
+  resolveMode,
+  rotateHue,
+  sampleBezierCurve,
+  setDarkMode,
+  simulateColourBlindness,
+  simulateThemeColourBlindness,
+  snapToGrid,
+  suggestFix,
+  suggestPairings,
+  suggestPalettes,
+  suggestTokenName,
+  systemPrefersDark,
+  themesAreEqual,
+  typeScaleToCSSVars,
+  undo,
+  undoReassignment,
+  validateImport,
+  validateTokenName
+});