@work-rjkashyap/unified-ui 0.3.2 → 0.3.4

package/dist/{chunk-5TP7J7T4.cjs → chunk-RUG3BW2B.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZBGR7MUW_cjs = require('./chunk-ZBGR7MUW.cjs');
+var chunk6ZZZBOCH_cjs = require('./chunk-6ZZZBOCH.cjs');
 var chunkECIGDEAH_cjs = require('./chunk-ECIGDEAH.cjs');
 var chunkXCKK6P46_cjs = require('./chunk-XCKK6P46.cjs');
 var chunk4ON3M3OM_cjs = require('./chunk-4ON3M3OM.cjs');
@@ -138,10 +138,10 @@ function mapRecord(varNames, values) {
 }
 function buildLightThemeVars() {
   return {
-    ...mapRecord(colorVarNames, chunkZBGR7MUW_cjs.semanticLight),
-    ...mapRecord(radiusVarNames, chunkZBGR7MUW_cjs.radius),
-    ...mapRecord(shadowVarNames, chunkZBGR7MUW_cjs.shadow),
-    ...mapRecord(zIndexVarNames, chunkZBGR7MUW_cjs.zIndex),
+    ...mapRecord(colorVarNames, chunk6ZZZBOCH_cjs.semanticLight),
+    ...mapRecord(radiusVarNames, chunk6ZZZBOCH_cjs.radius),
+    ...mapRecord(shadowVarNames, chunk6ZZZBOCH_cjs.shadow),
+    ...mapRecord(zIndexVarNames, chunk6ZZZBOCH_cjs.zIndex),
     ...mapRecord(durationVarNames, chunkXCKK6P46_cjs.durationCSS),
     ...mapRecord(easingVarNames, chunkXCKK6P46_cjs.easingCSS),
     ...mapRecord(fontFamilyVarNames, chunkECIGDEAH_cjs.fontFamily)
@@ -149,10 +149,10 @@ function buildLightThemeVars() {
 }
 function buildDarkThemeVars() {
   return {
-    ...mapRecord(colorVarNames, chunkZBGR7MUW_cjs.semanticDark),
-    ...mapRecord(radiusVarNames, chunkZBGR7MUW_cjs.radius),
-    ...mapRecord(shadowVarNames, chunkZBGR7MUW_cjs.shadowDark),
-    ...mapRecord(zIndexVarNames, chunkZBGR7MUW_cjs.zIndex),
+    ...mapRecord(colorVarNames, chunk6ZZZBOCH_cjs.semanticDark),
+    ...mapRecord(radiusVarNames, chunk6ZZZBOCH_cjs.radius),
+    ...mapRecord(shadowVarNames, chunk6ZZZBOCH_cjs.shadowDark),
+    ...mapRecord(zIndexVarNames, chunk6ZZZBOCH_cjs.zIndex),
     ...mapRecord(durationVarNames, chunkXCKK6P46_cjs.durationCSS),
     ...mapRecord(easingVarNames, chunkXCKK6P46_cjs.easingCSS),
     ...mapRecord(fontFamilyVarNames, chunkECIGDEAH_cjs.fontFamily)
@@ -215,48 +215,48 @@ var cssVar = {
 
 // src/theme/presets.ts
 var STATUS_LIGHT = {
-  success: chunkZBGR7MUW_cjs.green[600],
+  success: chunk6ZZZBOCH_cjs.green[600],
   successForeground: "oklch(0.145 0 0)",
-  successMuted: chunkZBGR7MUW_cjs.green[50],
-  successMutedForeground: chunkZBGR7MUW_cjs.green[700],
-  warning: chunkZBGR7MUW_cjs.amber[500],
+  successMuted: chunk6ZZZBOCH_cjs.green[50],
+  successMutedForeground: chunk6ZZZBOCH_cjs.green[700],
+  warning: chunk6ZZZBOCH_cjs.amber[500],
   warningForeground: "oklch(0.145 0 0)",
-  warningMuted: chunkZBGR7MUW_cjs.amber[50],
-  warningMutedForeground: chunkZBGR7MUW_cjs.amber[700],
-  danger: chunkZBGR7MUW_cjs.red[600],
+  warningMuted: chunk6ZZZBOCH_cjs.amber[50],
+  warningMutedForeground: chunk6ZZZBOCH_cjs.amber[700],
+  danger: chunk6ZZZBOCH_cjs.red[600],
   dangerForeground: "oklch(0.985 0 0)",
-  dangerHover: chunkZBGR7MUW_cjs.red[700],
-  dangerActive: chunkZBGR7MUW_cjs.red[800],
-  dangerMuted: chunkZBGR7MUW_cjs.red[50],
-  dangerMutedForeground: chunkZBGR7MUW_cjs.red[700],
-  destructive: chunkZBGR7MUW_cjs.red[600],
+  dangerHover: chunk6ZZZBOCH_cjs.red[700],
+  dangerActive: chunk6ZZZBOCH_cjs.red[800],
+  dangerMuted: chunk6ZZZBOCH_cjs.red[50],
+  dangerMutedForeground: chunk6ZZZBOCH_cjs.red[700],
+  destructive: chunk6ZZZBOCH_cjs.red[600],
   destructiveForeground: "oklch(0.985 0 0)",
-  info: chunkZBGR7MUW_cjs.blue[600],
+  info: chunk6ZZZBOCH_cjs.blue[600],
   infoForeground: "oklch(0.985 0 0)",
-  infoMuted: chunkZBGR7MUW_cjs.blue[50],
-  infoMutedForeground: chunkZBGR7MUW_cjs.blue[700]
+  infoMuted: chunk6ZZZBOCH_cjs.blue[50],
+  infoMutedForeground: chunk6ZZZBOCH_cjs.blue[700]
 };
 var STATUS_DARK = {
-  success: chunkZBGR7MUW_cjs.green[500],
+  success: chunk6ZZZBOCH_cjs.green[500],
   successForeground: "oklch(0.145 0 0)",
-  successMuted: chunkZBGR7MUW_cjs.green[950],
-  successMutedForeground: chunkZBGR7MUW_cjs.green[300],
-  warning: chunkZBGR7MUW_cjs.amber[400],
+  successMuted: chunk6ZZZBOCH_cjs.green[950],
+  successMutedForeground: chunk6ZZZBOCH_cjs.green[300],
+  warning: chunk6ZZZBOCH_cjs.amber[400],
   warningForeground: "oklch(0.145 0 0)",
-  warningMuted: chunkZBGR7MUW_cjs.amber[950],
-  warningMutedForeground: chunkZBGR7MUW_cjs.amber[300],
-  danger: chunkZBGR7MUW_cjs.red[500],
+  warningMuted: chunk6ZZZBOCH_cjs.amber[950],
+  warningMutedForeground: chunk6ZZZBOCH_cjs.amber[300],
+  danger: chunk6ZZZBOCH_cjs.red[500],
   dangerForeground: "oklch(0.985 0 0)",
-  dangerHover: chunkZBGR7MUW_cjs.red[400],
-  dangerActive: chunkZBGR7MUW_cjs.red[300],
-  dangerMuted: chunkZBGR7MUW_cjs.red[950],
-  dangerMutedForeground: chunkZBGR7MUW_cjs.red[300],
-  destructive: chunkZBGR7MUW_cjs.red[500],
+  dangerHover: chunk6ZZZBOCH_cjs.red[400],
+  dangerActive: chunk6ZZZBOCH_cjs.red[300],
+  dangerMuted: chunk6ZZZBOCH_cjs.red[950],
+  dangerMutedForeground: chunk6ZZZBOCH_cjs.red[300],
+  destructive: chunk6ZZZBOCH_cjs.red[500],
   destructiveForeground: "oklch(0.985 0 0)",
-  info: chunkZBGR7MUW_cjs.blue[400],
+  info: chunk6ZZZBOCH_cjs.blue[400],
   infoForeground: "oklch(0.145 0 0)",
-  infoMuted: chunkZBGR7MUW_cjs.blue[950],
-  infoMutedForeground: chunkZBGR7MUW_cjs.blue[300]
+  infoMuted: chunk6ZZZBOCH_cjs.blue[950],
+  infoMutedForeground: chunk6ZZZBOCH_cjs.blue[300]
 };
 var CHART_LIGHT = {
   chart1: "oklch(0.646 0.222 41.116)",
@@ -416,7 +416,7 @@ function buildNeutralPreset(name, key, palette) {
       disabledForeground: palette[600],
       sidebar: palette[900],
       sidebarForeground: palette[50],
-      sidebarPrimary: chunkZBGR7MUW_cjs.blue[600],
+      sidebarPrimary: chunk6ZZZBOCH_cjs.blue[600],
       sidebarPrimaryForeground: palette[50],
       sidebarAccent: palette[800],
       sidebarAccentForeground: palette[50],
@@ -425,7 +425,7 @@ function buildNeutralPreset(name, key, palette) {
     }
   };
 }
-function buildChromaticPreset(name, key, primary, surface = chunkZBGR7MUW_cjs.zinc) {
+function buildChromaticPreset(name, key, primary, surface = chunk6ZZZBOCH_cjs.zinc) {
   return {
     name,
     key,
@@ -527,16 +527,16 @@ var COLOR_PRESETS = [
   // Neutral Presets (achromatic primaries)
   // -------------------------------------------------------------------------
   {
-    swatch: chunkZBGR7MUW_cjs.zinc[900],
-    ...buildNeutralPreset("Zinc", "zinc", chunkZBGR7MUW_cjs.zinc)
+    swatch: chunk6ZZZBOCH_cjs.zinc[900],
+    ...buildNeutralPreset("Zinc", "zinc", chunk6ZZZBOCH_cjs.zinc)
   },
   {
-    swatch: chunkZBGR7MUW_cjs.slate[900],
-    ...buildNeutralPreset("Slate", "slate", chunkZBGR7MUW_cjs.slate)
+    swatch: chunk6ZZZBOCH_cjs.slate[900],
+    ...buildNeutralPreset("Slate", "slate", chunk6ZZZBOCH_cjs.slate)
   },
   {
-    swatch: chunkZBGR7MUW_cjs.gray[900],
-    ...buildNeutralPreset("Gray", "gray", chunkZBGR7MUW_cjs.gray)
+    swatch: chunk6ZZZBOCH_cjs.gray[900],
+    ...buildNeutralPreset("Gray", "gray", chunk6ZZZBOCH_cjs.gray)
   },
   {
     swatch: stone[900],
@@ -550,12 +550,12 @@ var COLOR_PRESETS = [
   // Chromatic Presets (colored primaries)
   // -------------------------------------------------------------------------
   {
-    swatch: chunkZBGR7MUW_cjs.blue[600],
-    ...buildChromaticPreset("Blue", "blue", chunkZBGR7MUW_cjs.blue)
+    swatch: chunk6ZZZBOCH_cjs.blue[600],
+    ...buildChromaticPreset("Blue", "blue", chunk6ZZZBOCH_cjs.blue)
   },
   {
-    swatch: chunkZBGR7MUW_cjs.green[600],
-    ...buildChromaticPreset("Green", "green", chunkZBGR7MUW_cjs.green)
+    swatch: chunk6ZZZBOCH_cjs.green[600],
+    ...buildChromaticPreset("Green", "green", chunk6ZZZBOCH_cjs.green)
   },
   {
     swatch: violet[600],
@@ -570,16 +570,56 @@ var COLOR_PRESETS = [
     ...buildChromaticPreset("Orange", "orange", orange)
   },
   {
-    swatch: chunkZBGR7MUW_cjs.red[600],
-    ...buildChromaticPreset("Red", "red", chunkZBGR7MUW_cjs.red)
+    swatch: chunk6ZZZBOCH_cjs.red[600],
+    ...buildChromaticPreset("Red", "red", chunk6ZZZBOCH_cjs.red)
   },
   {
-    swatch: chunkZBGR7MUW_cjs.teal[600],
-    ...buildChromaticPreset("Teal", "teal", chunkZBGR7MUW_cjs.teal)
+    swatch: chunk6ZZZBOCH_cjs.teal[600],
+    ...buildChromaticPreset("Teal", "teal", chunk6ZZZBOCH_cjs.teal)
   },
   {
-    swatch: chunkZBGR7MUW_cjs.brand[600],
-    ...buildChromaticPreset("Brand", "brand", chunkZBGR7MUW_cjs.brand)
+    swatch: chunk6ZZZBOCH_cjs.brand[600],
+    ...buildChromaticPreset("Brand", "brand", chunk6ZZZBOCH_cjs.brand)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.indigo[600],
+    ...buildChromaticPreset("Indigo", "indigo", chunk6ZZZBOCH_cjs.indigo)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.purple[600],
+    ...buildChromaticPreset("Purple", "purple", chunk6ZZZBOCH_cjs.purple)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.pink[600],
+    ...buildChromaticPreset("Pink", "pink", chunk6ZZZBOCH_cjs.pink)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.cyan[600],
+    ...buildChromaticPreset("Cyan", "cyan", chunk6ZZZBOCH_cjs.cyan)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.emerald[600],
+    ...buildChromaticPreset("Emerald", "emerald", chunk6ZZZBOCH_cjs.emerald)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.yellow[600],
+    ...buildChromaticPreset("Yellow", "yellow", chunk6ZZZBOCH_cjs.yellow)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.fuchsia[600],
+    ...buildChromaticPreset("Fuchsia", "fuchsia", chunk6ZZZBOCH_cjs.fuchsia)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.sky[600],
+    ...buildChromaticPreset("Sky", "sky", chunk6ZZZBOCH_cjs.sky)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.lime[600],
+    ...buildChromaticPreset("Lime", "lime", chunk6ZZZBOCH_cjs.lime)
+  },
+  {
+    swatch: chunk6ZZZBOCH_cjs.amber[600],
+    ...buildChromaticPreset("Amber", "amber", chunk6ZZZBOCH_cjs.amber)
   }
 ];
 function getColorPreset(key) {
@@ -600,6 +640,7 @@ function getRadiusPreset(key) {
   return RADIUS_PRESETS.find((r) => r.key === key) ?? RADIUS_PRESETS[4];
 }
 var FONT_PRESETS = [
+  // ---- Built-in fonts (loaded via next/font in the docs app) ----
   {
     name: "Outfit",
     key: "outfit",
@@ -612,6 +653,164 @@ var FONT_PRESETS = [
     value: 'var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     sample: "Aa"
   },
+  {
+    name: "Geist Sans",
+    key: "geist-sans",
+    value: 'var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "DM Sans",
+    key: "dm-sans",
+    value: 'var(--font-dm-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Plus Jakarta Sans",
+    key: "plus-jakarta-sans",
+    value: 'var(--font-plus-jakarta-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Open Sans",
+    key: "open-sans",
+    value: 'var(--font-open-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Poppins",
+    key: "poppins",
+    value: 'var(--font-poppins), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Montserrat",
+    key: "montserrat",
+    value: 'var(--font-montserrat), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Lato",
+    key: "lato",
+    value: 'var(--font-lato), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Nunito",
+    key: "nunito",
+    value: 'var(--font-nunito), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Raleway",
+    key: "raleway",
+    value: 'var(--font-raleway), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Rubik",
+    key: "rubik",
+    value: 'var(--font-rubik), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Source Sans 3",
+    key: "source-sans-3",
+    value: 'var(--font-source-sans-3), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Work Sans",
+    key: "work-sans",
+    value: 'var(--font-work-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Manrope",
+    key: "manrope",
+    value: 'var(--font-manrope), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Space Grotesk",
+    key: "space-grotesk",
+    value: 'var(--font-space-grotesk), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  // ---- Additional popular fonts ----
+  {
+    name: "Figtree",
+    key: "figtree",
+    value: 'var(--font-figtree), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "IBM Plex Sans",
+    key: "ibm-plex-sans",
+    value: 'var(--font-ibm-plex-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Quicksand",
+    key: "quicksand",
+    value: 'var(--font-quicksand), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Cabin",
+    key: "cabin",
+    value: 'var(--font-cabin), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Barlow",
+    key: "barlow",
+    value: 'var(--font-barlow), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Josefin Sans",
+    key: "josefin-sans",
+    value: 'var(--font-josefin-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Karla",
+    key: "karla",
+    value: 'var(--font-karla), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Mulish",
+    key: "mulish",
+    value: 'var(--font-mulish), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Noto Sans",
+    key: "noto-sans",
+    value: 'var(--font-noto-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Ubuntu",
+    key: "ubuntu",
+    value: 'var(--font-ubuntu), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Sora",
+    key: "sora",
+    value: 'var(--font-sora), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  {
+    name: "Lexend",
+    key: "lexend",
+    value: 'var(--font-lexend), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    sample: "Aa"
+  },
+  // ---- Generic stacks ----
   {
     name: "System",
     key: "system",
@@ -751,6 +950,53 @@ var SURFACE_STYLE_PRESETS = [
   }
 ];
 var DEFAULT_SURFACE_STYLE_KEY = "bordered";
+var MENU_COLOR_PRESETS = [
+  {
+    name: "Default",
+    key: "default",
+    description: "Uses the color preset's built-in sidebar colors"
+  },
+  {
+    name: "Muted",
+    key: "muted",
+    description: "Sidebar matches the muted/surface tone \u2014 blends with content"
+  },
+  {
+    name: "Inverted",
+    key: "inverted",
+    description: "Dark sidebar in light mode, lighter sidebar in dark mode for contrast"
+  },
+  {
+    name: "Primary",
+    key: "primary",
+    description: "Sidebar uses the primary color as its background"
+  }
+];
+var DEFAULT_MENU_COLOR_KEY = "default";
+function getMenuColorPreset(key) {
+  return MENU_COLOR_PRESETS.find((p) => p.key === key) ?? MENU_COLOR_PRESETS[0];
+}
+var MENU_ACCENT_PRESETS = [
+  {
+    name: "None",
+    key: "none",
+    description: "No visual accent highlight on sidebar items"
+  },
+  {
+    name: "Subtle",
+    key: "subtle",
+    description: "Soft background tint on hover and active sidebar items"
+  },
+  {
+    name: "Bold",
+    key: "bold",
+    description: "Prominent primary-colored accent on active sidebar items"
+  }
+];
+var DEFAULT_MENU_ACCENT_KEY = "subtle";
+function getMenuAccentPreset(key) {
+  return MENU_ACCENT_PRESETS.find((p) => p.key === key) ?? MENU_ACCENT_PRESETS[1];
+}
 var STYLE_PRESETS = [
   {
     name: "Vega",
@@ -868,7 +1114,9 @@ var DEFAULT_THEME_CONFIG = {
   radius: DEFAULT_RADIUS_KEY,
   font: DEFAULT_FONT_KEY,
   shadow: DEFAULT_SHADOW_KEY,
-  surfaceStyle: DEFAULT_SURFACE_STYLE_KEY
+  surfaceStyle: DEFAULT_SURFACE_STYLE_KEY,
+  menuColor: DEFAULT_MENU_COLOR_KEY,
+  menuAccent: DEFAULT_MENU_ACCENT_KEY
 };
 function buildThemeOverrides(config, mode) {
   const vars = {};
@@ -978,6 +1226,76 @@ function buildThemeOverrides(config, mode) {
   vars["--ds-gap-default"] = sv.gapDefault;
   vars["--ds-border-width"] = sv.borderWidth;
   vars["--ds-control-height"] = sv.controlHeight;
+  const colorPresetObj = getColorPreset(config.colorPreset);
+  const presetColors = mode === "dark" ? colorPresetObj.dark : colorPresetObj.light;
+  if (config.menuColor === "muted") {
+    if (mode === "light") {
+      vars["--sidebar"] = presetColors.muted;
+      vars["--sidebar-foreground"] = presetColors.foreground;
+      vars["--sidebar-border"] = presetColors.border;
+    } else {
+      vars["--sidebar"] = presetColors.muted;
+      vars["--sidebar-foreground"] = presetColors.foreground;
+      vars["--sidebar-border"] = presetColors.border;
+    }
+  } else if (config.menuColor === "inverted") {
+    if (mode === "light") {
+      vars["--sidebar"] = "oklch(0.205 0 0)";
+      vars["--sidebar-foreground"] = "oklch(0.95 0 0)";
+      vars["--sidebar-primary"] = presetColors.primary;
+      vars["--sidebar-primary-foreground"] = "oklch(0.985 0 0)";
+      vars["--sidebar-border"] = "oklch(1 0 0 / 10%)";
+      vars["--sidebar-ring"] = "oklch(0.439 0 0)";
+    } else {
+      vars["--sidebar"] = "oklch(0.269 0 0)";
+      vars["--sidebar-foreground"] = "oklch(0.95 0 0)";
+      vars["--sidebar-primary"] = presetColors.primary;
+      vars["--sidebar-primary-foreground"] = "oklch(0.985 0 0)";
+      vars["--sidebar-border"] = "oklch(1 0 0 / 8%)";
+      vars["--sidebar-ring"] = "oklch(0.5 0 0)";
+    }
+  } else if (config.menuColor === "primary") {
+    if (mode === "light") {
+      vars["--sidebar"] = presetColors.primary;
+      vars["--sidebar-foreground"] = presetColors.primaryForeground;
+      vars["--sidebar-primary"] = presetColors.primaryForeground;
+      vars["--sidebar-primary-foreground"] = presetColors.primary;
+      vars["--sidebar-border"] = `color-mix(in oklch, ${presetColors.primaryForeground} 15%, transparent)`;
+      vars["--sidebar-ring"] = presetColors.primaryForeground;
+    } else {
+      vars["--sidebar"] = presetColors.primary;
+      vars["--sidebar-foreground"] = presetColors.primaryForeground;
+      vars["--sidebar-primary"] = presetColors.primaryForeground;
+      vars["--sidebar-primary-foreground"] = presetColors.primary;
+      vars["--sidebar-border"] = `color-mix(in oklch, ${presetColors.primaryForeground} 15%, transparent)`;
+      vars["--sidebar-ring"] = presetColors.primaryForeground;
+    }
+  }
+  if (config.menuAccent === "none") {
+    vars["--sidebar-accent"] = "transparent";
+    vars["--sidebar-accent-foreground"] = vars["--sidebar-foreground"] ?? presetColors.sidebarForeground;
+  } else if (config.menuAccent === "bold") {
+    if (config.menuColor === "primary") {
+      if (mode === "light") {
+        vars["--sidebar-accent"] = `color-mix(in oklch, ${presetColors.primaryForeground} 20%, transparent)`;
+        vars["--sidebar-accent-foreground"] = presetColors.primaryForeground;
+      } else {
+        vars["--sidebar-accent"] = `color-mix(in oklch, ${presetColors.primaryForeground} 20%, transparent)`;
+        vars["--sidebar-accent-foreground"] = presetColors.primaryForeground;
+      }
+    } else if (config.menuColor === "inverted") {
+      vars["--sidebar-accent"] = presetColors.primary;
+      vars["--sidebar-accent-foreground"] = presetColors.primaryForeground;
+    } else {
+      if (mode === "light") {
+        vars["--sidebar-accent"] = presetColors.primaryMuted;
+        vars["--sidebar-accent-foreground"] = presetColors.primary;
+      } else {
+        vars["--sidebar-accent"] = presetColors.primaryMuted;
+        vars["--sidebar-accent-foreground"] = presetColors.primaryMutedForeground;
+      }
+    }
+  }
   if (config.surfaceStyle === "elevated") {
     vars["--card"] = mode === "dark" ? "oklch(0.205 0 0)" : "oklch(1 0 0)";
     vars["--border"] = mode === "dark" ? "oklch(0.205 0 0 / 0)" : "oklch(0.922 0 0 / 0)";
@@ -1000,6 +1318,8 @@ function generateThemeCSS(config) {
     ` * Radius: ${getRadiusPreset(config.radius).label}`,
     ` * Font: ${getFontPreset(config.font).name}`,
     ` * Shadows: ${getShadowPreset(config.shadow).name}`,
+    ` * Menu Color: ${getMenuColorPreset(config.menuColor).name}`,
+    ` * Menu Accent: ${getMenuAccentPreset(config.menuAccent).name}`,
     " * ============================================ */",
     "",
     ":root {",
@@ -1009,7 +1329,7 @@ function generateThemeCSS(config) {
     ".dark {",
     formatVars(darkVars),
     "}"
-  ].join("\n");
+  ].filter(Boolean).join("\n");
 }
 var STORAGE_KEY = "ds-theme-customizer";
 var STYLE_ELEMENT_ID = "ds-theme-customizer";
@@ -1037,7 +1357,9 @@ function loadConfig() {
       shadow: SHADOW_PRESETS.some((s) => s.key === parsed.shadow) ? parsed.shadow : DEFAULT_THEME_CONFIG.shadow,
       surfaceStyle: SURFACE_STYLE_PRESETS.some(
         (s) => s.key === parsed.surfaceStyle
-      ) ? parsed.surfaceStyle : DEFAULT_THEME_CONFIG.surfaceStyle
+      ) ? parsed.surfaceStyle : DEFAULT_THEME_CONFIG.surfaceStyle,
+      menuColor: MENU_COLOR_PRESETS.some((p) => p.key === parsed.menuColor) ? parsed.menuColor : DEFAULT_THEME_CONFIG.menuColor,
+      menuAccent: MENU_ACCENT_PRESETS.some((p) => p.key === parsed.menuAccent) ? parsed.menuAccent : DEFAULT_THEME_CONFIG.menuAccent
     };
   } catch {
     return DEFAULT_THEME_CONFIG;
@@ -1081,7 +1403,7 @@ function removeStyles() {
   }
 }
 function configsEqual(a, b) {
-  return a.style === b.style && a.colorPreset === b.colorPreset && a.radius === b.radius && a.font === b.font && a.shadow === b.shadow && a.surfaceStyle === b.surfaceStyle;
+  return a.style === b.style && a.colorPreset === b.colorPreset && a.radius === b.radius && a.font === b.font && a.shadow === b.shadow && a.surfaceStyle === b.surfaceStyle && a.menuColor === b.menuColor && a.menuAccent === b.menuAccent;
 }
 function ThemeCustomizerProvider({
   children,
@@ -1187,6 +1509,18 @@ function ThemeCustomizerProvider({
       return { ...prev, surfaceStyle: key };
     });
   }, []);
+  const setMenuColor = react.useCallback((key) => {
+    setConfigState((prev) => {
+      if (prev.menuColor === key) return prev;
+      return { ...prev, menuColor: key };
+    });
+  }, []);
+  const setMenuAccent = react.useCallback((key) => {
+    setConfigState((prev) => {
+      if (prev.menuAccent === key) return prev;
+      return { ...prev, menuAccent: key };
+    });
+  }, []);
   const resetConfig = react.useCallback(() => {
     setConfigState(DEFAULT_THEME_CONFIG);
   }, []);
@@ -1204,6 +1538,8 @@ function ThemeCustomizerProvider({
       setFont,
       setShadow,
       setSurfaceStyle,
+      setMenuColor,
+      setMenuAccent,
       resetConfig,
       isDefault,
       generateCSS: generateCSSFn
@@ -1217,6 +1553,8 @@ function ThemeCustomizerProvider({
       setFont,
       setShadow,
       setSurfaceStyle,
+      setMenuColor,
+      setMenuAccent,
       resetConfig,
       isDefault,
       generateCSSFn
@@ -1251,50 +1589,6 @@ function CheckIcon({ className }) {
     }
   );
 }
-function ColorSwatch({
-  preset,
-  isActive,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: chunk4ON3M3OM_cjs.cn(
-        "group relative flex items-center gap-2 rounded-md border px-3 py-2 text-left text-sm transition-all duration-fast ease-standard",
-        "hover:border-border-strong hover:bg-muted/50",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        isActive ? "border-primary bg-muted/60 shadow-sm" : "border-border bg-transparent"
-      ),
-      title: preset.name,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: chunk4ON3M3OM_cjs.cn(
-              "size-5 shrink-0 rounded-full border shadow-xs",
-              isActive ? "border-primary/50 ring-2 ring-primary/20" : "border-border"
-            ),
-            style: { backgroundColor: preset.swatch },
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: chunk4ON3M3OM_cjs.cn(
-              "text-sm font-medium",
-              isActive ? "text-foreground" : "text-muted-foreground"
-            ),
-            children: preset.name
-          }
-        ),
-        isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "ml-auto text-primary" })
-      ]
-    }
-  );
-}
 function RadiusOption({
   preset,
   isActive,
@@ -1335,49 +1629,433 @@ function RadiusOption({
     }
   );
 }
-function FontOption({
-  preset,
-  isActive,
-  onClick
-}) {
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: chunk4ON3M3OM_cjs.cn("size-4 shrink-0", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function SearchIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    "svg",
     {
-      type: "button",
-      onClick,
-      className: chunk4ON3M3OM_cjs.cn(
-        "flex items-center gap-2 rounded-md border px-3 py-2 text-left transition-all duration-fast ease-standard",
-        "hover:border-border-strong hover:bg-muted/50",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        isActive ? "border-primary bg-muted/60 shadow-sm" : "border-border bg-transparent"
-      ),
-      title: preset.name,
+      className: chunk4ON3M3OM_cjs.cn("size-4 shrink-0", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: chunk4ON3M3OM_cjs.cn(
-              "text-base font-semibold leading-none",
-              isActive ? "text-foreground" : "text-muted-foreground"
-            ),
-            style: { fontFamily: preset.value },
-            children: preset.sample
-          }
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
+      ]
+    }
+  );
+}
+function FontCombobox({
+  presets,
+  activeKey,
+  onSelect
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [search, setSearch] = react.useState("");
+  const [highlightIndex, setHighlightIndex] = react.useState(-1);
+  const containerRef = react.useRef(null);
+  const listRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const activePreset = react.useMemo(
+    () => presets.find((p) => p.key === activeKey) ?? presets[0],
+    [presets, activeKey]
+  );
+  const filtered = react.useMemo(() => {
+    if (!search.trim()) return presets;
+    const q = search.toLowerCase();
+    return presets.filter((p) => p.name.toLowerCase().includes(q));
+  }, [presets, search]);
+  react.useEffect(() => {
+    setHighlightIndex(0);
+  }, [filtered]);
+  react.useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    function handleKey(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  react.useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    } else {
+      setSearch("");
+      setHighlightIndex(-1);
+    }
+  }, [open]);
+  react.useEffect(() => {
+    if (!open || highlightIndex < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll("[data-font-item]");
+    items[highlightIndex]?.scrollIntoView({ block: "nearest" });
+  }, [highlightIndex, open]);
+  const handleSelect = react.useCallback(
+    (key) => {
+      onSelect(key);
+      setOpen(false);
+    },
+    [onSelect]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (highlightIndex >= 0 && highlightIndex < filtered.length) {
+          handleSelect(filtered[highlightIndex].key);
+        }
+      }
+    },
+    [filtered, highlightIndex, handleSelect]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        className: chunk4ON3M3OM_cjs.cn(
+          "flex w-full items-center gap-2 rounded-md border px-3 py-2 text-left text-sm transition-all duration-fast ease-standard",
+          "hover:border-border-strong hover:bg-muted/50",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          open ? "border-primary shadow-sm" : "border-border"
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: chunk4ON3M3OM_cjs.cn(
-              "text-sm",
-              isActive ? "text-foreground font-medium" : "text-muted-foreground"
-            ),
-            children: preset.name
-          }
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "text-sm font-semibold leading-none text-muted-foreground",
+              style: { fontFamily: activePreset.value },
+              children: activePreset.sample
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate font-medium text-foreground", children: activePreset.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronDownIcon,
+            {
+              className: chunk4ON3M3OM_cjs.cn(
+                "text-muted-foreground transition-transform duration-fast",
+                open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunk4ON3M3OM_cjs.cn(
+          "absolute left-0 z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md",
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2"
         ),
-        isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "ml-auto text-primary" })
-      ]
+        role: "dialog",
+        "aria-label": "Select font",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder: "Search fonts\u2026",
+                className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none",
+                "aria-label": "Search fonts",
+                autoComplete: "off",
+                spellCheck: false
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              className: "max-h-52 overflow-y-auto overscroll-contain p-1",
+              role: "listbox",
+              children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No fonts found" }) : filtered.map((preset, index) => {
+                const isActive = preset.key === activeKey;
+                const isHighlighted = index === highlightIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-font-item": "",
+                    role: "option",
+                    "aria-selected": isActive,
+                    onClick: () => handleSelect(preset.key),
+                    onMouseEnter: () => setHighlightIndex(index),
+                    className: chunk4ON3M3OM_cjs.cn(
+                      "flex w-full items-center gap-2.5 rounded-sm px-2.5 py-1.5 text-left text-sm transition-colors",
+                      "outline-none",
+                      isHighlighted && "bg-muted",
+                      isActive && "text-foreground font-medium",
+                      !isActive && "text-muted-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "w-6 text-center text-base font-semibold leading-none",
+                          style: { fontFamily: preset.value },
+                          "aria-hidden": "true",
+                          children: preset.sample
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: preset.name }),
+                      isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-primary shrink-0" })
+                    ]
+                  },
+                  preset.key
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ColorCombobox({
+  presets,
+  activeKey,
+  onSelect
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [search, setSearch] = react.useState("");
+  const [highlightIndex, setHighlightIndex] = react.useState(-1);
+  const containerRef = react.useRef(null);
+  const listRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const activePreset = react.useMemo(
+    () => presets.find((p) => p.key === activeKey) ?? presets[0],
+    [presets, activeKey]
+  );
+  const filtered = react.useMemo(() => {
+    if (!search.trim()) return presets;
+    const q = search.toLowerCase();
+    return presets.filter((p) => p.name.toLowerCase().includes(q));
+  }, [presets, search]);
+  react.useEffect(() => {
+    setHighlightIndex(0);
+  }, [filtered]);
+  react.useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    function handleKey(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
     }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  react.useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    } else {
+      setSearch("");
+      setHighlightIndex(-1);
+    }
+  }, [open]);
+  react.useEffect(() => {
+    if (!open || highlightIndex < 0 || !listRef.current) return;
+    const items = listRef.current.querySelectorAll("[data-color-item]");
+    items[highlightIndex]?.scrollIntoView({ block: "nearest" });
+  }, [highlightIndex, open]);
+  const handleSelect = react.useCallback(
+    (key) => {
+      onSelect(key);
+      setOpen(false);
+    },
+    [onSelect]
   );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (highlightIndex >= 0 && highlightIndex < filtered.length) {
+          handleSelect(filtered[highlightIndex].key);
+        }
+      }
+    },
+    [filtered, highlightIndex, handleSelect]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        className: chunk4ON3M3OM_cjs.cn(
+          "flex w-full items-center gap-2 rounded-md border px-3 py-2 text-left text-sm transition-all duration-fast ease-standard",
+          "hover:border-border-strong hover:bg-muted/50",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          open ? "border-primary shadow-sm" : "border-border"
+        ),
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk4ON3M3OM_cjs.cn(
+                "size-5 shrink-0 rounded-full border shadow-xs",
+                "border-border"
+              ),
+              style: { backgroundColor: activePreset.swatch },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate font-medium text-foreground", children: activePreset.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronDownIcon,
+            {
+              className: chunk4ON3M3OM_cjs.cn(
+                "text-muted-foreground transition-transform duration-fast",
+                open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunk4ON3M3OM_cjs.cn(
+          "absolute left-0 z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md",
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2"
+        ),
+        role: "dialog",
+        "aria-label": "Select color",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder: "Search colors\u2026",
+                className: "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none",
+                "aria-label": "Search colors",
+                autoComplete: "off",
+                spellCheck: false
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              className: "max-h-52 overflow-y-auto overscroll-contain p-1",
+              role: "listbox",
+              children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No colors found" }) : filtered.map((preset, index) => {
+                const isActive = preset.key === activeKey;
+                const isHighlighted = index === highlightIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-color-item": "",
+                    role: "option",
+                    "aria-selected": isActive,
+                    onClick: () => handleSelect(preset.key),
+                    onMouseEnter: () => setHighlightIndex(index),
+                    className: chunk4ON3M3OM_cjs.cn(
+                      "flex w-full items-center gap-2.5 rounded-sm px-2.5 py-1.5 text-left text-sm transition-colors",
+                      "outline-none",
+                      isHighlighted && "bg-muted",
+                      isActive && "text-foreground font-medium",
+                      !isActive && "text-muted-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: chunk4ON3M3OM_cjs.cn(
+                            "size-4 shrink-0 rounded-full border shadow-xs",
+                            isActive ? "border-primary/50 ring-2 ring-primary/20" : "border-border"
+                          ),
+                          style: { backgroundColor: preset.swatch },
+                          "aria-hidden": "true"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: preset.name }),
+                      isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-primary shrink-0" })
+                    ]
+                  },
+                  preset.key
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 function PillToggle({
   label,
@@ -1535,6 +2213,8 @@ function ThemeCustomizer({
     setFont,
     setShadow,
     setSurfaceStyle,
+    setMenuColor,
+    setMenuAccent,
     resetConfig,
     isDefault,
     generateCSS
@@ -1555,15 +2235,14 @@ function ThemeCustomizer({
           },
           preset.key
         )) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Color", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: COLOR_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
-          ColorSwatch,
+        /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Color", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ColorCombobox,
           {
-            preset,
-            isActive: config.colorPreset === preset.key,
-            onClick: () => setColorPreset(preset.key)
-          },
-          preset.key
-        )) }) }),
+            presets: COLOR_PRESETS,
+            activeKey: config.colorPreset,
+            onSelect: setColorPreset
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Radius", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: RADIUS_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
           RadiusOption,
           {
@@ -1573,15 +2252,14 @@ function ThemeCustomizer({
           },
           preset.key
         )) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Font", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: FONT_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
-          FontOption,
+        /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Font", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FontCombobox,
           {
-            preset,
-            isActive: config.font === preset.key,
-            onClick: () => setFont(preset.key)
-          },
-          preset.key
-        )) }) }),
+            presets: FONT_PRESETS,
+            activeKey: config.font,
+            onSelect: setFont
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Shadow", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: SHADOW_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
           PillToggle,
           {
@@ -1602,6 +2280,26 @@ function ThemeCustomizer({
           },
           preset.key
         )) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Menu Color", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: MENU_COLOR_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+          PillToggle,
+          {
+            label: preset.name,
+            isActive: config.menuColor === preset.key,
+            onClick: () => setMenuColor(preset.key),
+            description: preset.description
+          },
+          preset.key
+        )) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Menu Accent", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: MENU_ACCENT_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+          PillToggle,
+          {
+            label: preset.name,
+            isActive: config.menuAccent === preset.key,
+            onClick: () => setMenuAccent(preset.key),
+            description: preset.description
+          },
+          preset.key
+        )) }) }),
         (showCopyButton || showResetButton) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-t border-border pt-4", children: [
           showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { getText: generateCSS, className: "flex-1" }),
           showResetButton && !isDefault && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1737,6 +2435,8 @@ function DSThemeProvider({
 exports.COLOR_PRESETS = COLOR_PRESETS;
 exports.COLOR_PRESET_KEYS = COLOR_PRESET_KEYS;
 exports.DEFAULT_FONT_KEY = DEFAULT_FONT_KEY;
+exports.DEFAULT_MENU_ACCENT_KEY = DEFAULT_MENU_ACCENT_KEY;
+exports.DEFAULT_MENU_COLOR_KEY = DEFAULT_MENU_COLOR_KEY;
 exports.DEFAULT_RADIUS_KEY = DEFAULT_RADIUS_KEY;
 exports.DEFAULT_SHADOW_KEY = DEFAULT_SHADOW_KEY;
 exports.DEFAULT_STYLE_KEY = DEFAULT_STYLE_KEY;
@@ -1744,11 +2444,14 @@ exports.DEFAULT_SURFACE_STYLE_KEY = DEFAULT_SURFACE_STYLE_KEY;
 exports.DEFAULT_THEME_CONFIG = DEFAULT_THEME_CONFIG;
 exports.DSThemeProvider = DSThemeProvider;
 exports.FONT_PRESETS = FONT_PRESETS;
+exports.MENU_ACCENT_PRESETS = MENU_ACCENT_PRESETS;
+exports.MENU_COLOR_PRESETS = MENU_COLOR_PRESETS;
 exports.RADIUS_PRESETS = RADIUS_PRESETS;
 exports.SHADOW_PRESETS = SHADOW_PRESETS;
 exports.STYLE_PRESETS = STYLE_PRESETS;
 exports.SURFACE_STYLE_PRESETS = SURFACE_STYLE_PRESETS;
 exports.ThemeCustomizer = ThemeCustomizer;
+exports.ThemeCustomizerContext = ThemeCustomizerContext;
 exports.ThemeCustomizerProvider = ThemeCustomizerProvider;
 exports.buildDarkThemeVars = buildDarkThemeVars;
 exports.buildLightThemeVars = buildLightThemeVars;
@@ -1759,6 +2462,8 @@ exports.cssVar = cssVar;
 exports.generateThemeCSS = generateThemeCSS;
 exports.getColorPreset = getColorPreset;
 exports.getFontPreset = getFontPreset;
+exports.getMenuAccentPreset = getMenuAccentPreset;
+exports.getMenuColorPreset = getMenuColorPreset;
 exports.getRadiusPreset = getRadiusPreset;
 exports.getShadowPreset = getShadowPreset;
 exports.getStylePreset = getStylePreset;