@widgetstools/dock-manager-core 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -36,6 +36,7 @@ __export(src_exports, {
   countPanels: () => countPanels,
   createDefaultState: () => createDefaultState,
   createPreventableEvent: () => createPreventableEvent,
+  createTheme: () => createTheme,
   defaultResourceStrings: () => defaultResourceStrings,
   deserialize: () => deserialize,
   detectPanelEdge: () => detectPanelEdge,
@@ -4231,9 +4232,8 @@ var UnpinnedStripView = class {
       this.stripEl.removeEventListener("click", this.boundStripClick);
       this.boundStripClick = null;
     }
-    if (this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
-    }
+    this.stripEl.remove();
+    this.element.remove();
   }
   // ── Private: Event delegation ──────────────────────────────────
   /** Set up event delegation on stripEl for all tab interactions */
@@ -4458,328 +4458,166 @@ function applyTheme(container, theme) {
   container.style.setProperty("--dock-scrollbar-thumb", colors.textMuted);
   container.style.setProperty("--dock-scrollbar-track", "transparent");
 }
-var vsCodeLight = {
-  name: "VS Code Light",
-  mode: "light",
-  colors: {
-    bg: "220 20% 96%",
-    surface: "0 0% 100%",
-    surfaceAlt: "220 14% 95%",
-    panelHeader: "220 14% 92%",
-    tabBar: "220 14% 93%",
-    tabActive: "0 0% 100%",
-    tabText: "0 0% 38%",
-    tabTextActive: "217 91% 50%",
-    text: "0 0% 15%",
-    textSecondary: "0 0% 35%",
-    textMuted: "0 0% 50%",
-    border: "220 13% 82%",
-    splitter: "220 13% 87%",
-    splitterHover: "217 91% 60%",
-    hover: "220 14% 93%",
-    primary: "217 91% 50%",
-    floatShadow: "0 0% 0%"
-  }
-};
-var githubLight = {
-  name: "GitHub Light",
-  mode: "light",
-  colors: {
-    bg: "210 20% 97%",
-    surface: "0 0% 100%",
-    surfaceAlt: "210 18% 96%",
-    panelHeader: "210 18% 92%",
-    tabBar: "210 15% 94%",
-    tabActive: "0 0% 100%",
-    tabText: "210 10% 35%",
-    tabTextActive: "212 92% 45%",
-    text: "210 12% 16%",
-    textSecondary: "210 10% 32%",
-    textMuted: "210 8% 48%",
-    border: "210 14% 80%",
-    splitter: "210 14% 89%",
-    splitterHover: "212 92% 55%",
-    hover: "210 15% 94%",
-    primary: "212 92% 45%",
-    floatShadow: "210 20% 20%"
+var hsl = (h, s, l) => `${h} ${s}% ${l}%`;
+function createTheme(name, mode, base, accent, overrides) {
+  const { hue: h, sat: s } = base;
+  const { hue: ah, sat: as_ } = accent;
+  let colors;
+  if (mode === "light") {
+    const bl = base.light ?? 96;
+    const al = accent.light ?? 50;
+    const ts = Math.max(s - 6, 0);
+    colors = {
+      bg: hsl(h, s, bl),
+      surface: hsl(h, Math.max(s - 5, 0), Math.min(bl + 3, 100)),
+      surfaceAlt: hsl(h, Math.max(s - 2, 0), bl - 1),
+      panelHeader: hsl(h, Math.max(s - 2, 0), bl - 4),
+      tabBar: hsl(h, Math.max(s - 5, 0), bl - 3),
+      tabActive: hsl(h, Math.max(s - 5, 0), Math.min(bl + 3, 100)),
+      tabText: hsl(h - 10, Math.max(ts - 8, 0), 35),
+      tabTextActive: hsl(ah, as_, al),
+      text: hsl(h - 10, Math.max(ts - 2, 0), 15),
+      textSecondary: hsl(h - 10, Math.max(ts - 8, 0), 32),
+      textMuted: hsl(h - 10, Math.max(ts - 12, 0), 48),
+      border: hsl(h, Math.max(s - 6, 0), 80),
+      splitter: hsl(h, Math.max(s - 6, 0), 87),
+      splitterHover: hsl(ah, as_, al + 8),
+      hover: hsl(h, Math.max(s - 5, 0), bl - 3),
+      primary: hsl(ah, as_, al),
+      floatShadow: hsl(h, Math.max(s, 0), 15)
+    };
+  } else {
+    const bl = base.light ?? 10;
+    const al = accent.light ?? 65;
+    const ts = Math.round(s * 0.5);
+    colors = {
+      bg: hsl(h, s, bl),
+      surface: hsl(h, s, bl + 3),
+      surfaceAlt: hsl(h, Math.max(s - 2, 0), bl + 5),
+      panelHeader: hsl(h, Math.max(s - 2, 0), bl + 8),
+      tabBar: hsl(h, s, bl + 1),
+      tabActive: hsl(h, s, bl + 3),
+      tabText: hsl(h - 5, Math.max(ts, 8), 65),
+      tabTextActive: hsl(ah, as_, al),
+      text: hsl(h - 5, Math.round(s * 0.8), 90),
+      textSecondary: hsl(h - 5, Math.max(ts, 8), 68),
+      textMuted: hsl(h - 5, Math.max(ts - 3, 6), 50),
+      border: hsl(h, Math.max(s - 2, 0), bl + 14),
+      splitter: hsl(h, Math.max(s - 2, 0), bl + 10),
+      splitterHover: hsl(ah, as_, al - 8),
+      hover: hsl(h, Math.max(s - 2, 0), bl + 8),
+      primary: hsl(ah, as_, al),
+      floatShadow: hsl(h, Math.min(s + 5, 100), Math.max(bl - 7, 0))
+    };
   }
-};
-var warmLight = {
-  name: "Warm Light",
-  mode: "light",
-  colors: {
-    bg: "40 30% 96%",
-    surface: "40 20% 99%",
-    surfaceAlt: "40 25% 95%",
-    panelHeader: "40 25% 91%",
-    tabBar: "40 20% 93%",
-    tabActive: "40 20% 99%",
-    tabText: "30 10% 35%",
-    tabTextActive: "25 80% 45%",
-    text: "30 15% 15%",
-    textSecondary: "30 10% 32%",
-    textMuted: "30 8% 48%",
-    border: "35 15% 80%",
-    splitter: "35 15% 87%",
-    splitterHover: "25 80% 55%",
-    hover: "40 20% 93%",
-    primary: "25 80% 45%",
-    floatShadow: "30 20% 15%"
+  if (overrides) {
+    Object.assign(colors, overrides);
   }
-};
-var solarizedLight = {
-  name: "Solarized Light",
-  mode: "light",
-  colors: {
-    bg: "44 87% 94%",
-    surface: "44 87% 97%",
-    surfaceAlt: "44 60% 93%",
-    panelHeader: "44 60% 89%",
-    tabBar: "44 50% 91%",
-    tabActive: "44 87% 97%",
+  return { name, mode, colors };
+}
+var vsCodeLight = createTheme(
+  "VS Code Light",
+  "light",
+  { hue: 220, sat: 20 },
+  { hue: 217, sat: 91, light: 50 },
+  { floatShadow: "0 0% 0%" }
+);
+var githubLight = createTheme(
+  "GitHub Light",
+  "light",
+  { hue: 210, sat: 20, light: 97 },
+  { hue: 212, sat: 92, light: 45 },
+  { floatShadow: "210 20% 20%" }
+);
+var warmLight = createTheme(
+  "Warm Light",
+  "light",
+  { hue: 40, sat: 30 },
+  { hue: 25, sat: 80, light: 45 }
+);
+var solarizedLight = createTheme(
+  "Solarized Light",
+  "light",
+  { hue: 44, sat: 87, light: 94 },
+  { hue: 175, sat: 59, light: 35 },
+  {
     tabText: "194 14% 35%",
-    tabTextActive: "175 59% 35%",
     text: "192 81% 14%",
     textSecondary: "194 14% 32%",
     textMuted: "180 8% 48%",
-    border: "44 30% 80%",
-    splitter: "44 30% 85%",
-    splitterHover: "175 59% 45%",
-    hover: "44 50% 91%",
-    primary: "175 59% 35%",
     floatShadow: "44 20% 30%"
   }
-};
-var sepiaLight = {
-  name: "Sepia",
-  mode: "light",
-  colors: {
-    bg: "35 35% 94%",
-    surface: "35 30% 97%",
-    surfaceAlt: "35 28% 93%",
-    panelHeader: "35 28% 88%",
-    tabBar: "35 25% 90%",
-    tabActive: "35 30% 97%",
-    tabText: "25 12% 35%",
-    tabTextActive: "18 60% 42%",
-    text: "25 20% 18%",
-    textSecondary: "25 12% 32%",
-    textMuted: "25 8% 48%",
-    border: "30 18% 80%",
-    splitter: "30 18% 85%",
-    splitterHover: "18 60% 50%",
-    hover: "35 25% 91%",
-    primary: "18 60% 42%",
-    floatShadow: "25 15% 25%"
-  }
-};
-var mintLight = {
-  name: "Mint",
-  mode: "light",
-  colors: {
-    bg: "150 20% 96%",
-    surface: "150 15% 99%",
-    surfaceAlt: "150 18% 95%",
-    panelHeader: "150 18% 90%",
-    tabBar: "150 15% 92%",
-    tabActive: "150 15% 99%",
-    tabText: "160 10% 35%",
-    tabTextActive: "162 63% 35%",
-    text: "160 18% 14%",
-    textSecondary: "160 10% 32%",
-    textMuted: "155 8% 48%",
-    border: "150 14% 80%",
-    splitter: "150 14% 87%",
-    splitterHover: "162 63% 45%",
-    hover: "150 15% 93%",
-    primary: "162 63% 35%",
-    floatShadow: "155 15% 20%"
-  }
-};
-var lavenderLight = {
-  name: "Lavender",
-  mode: "light",
-  colors: {
-    bg: "260 20% 96%",
-    surface: "260 15% 99%",
-    surfaceAlt: "260 16% 95%",
-    panelHeader: "260 16% 90%",
-    tabBar: "260 14% 92%",
-    tabActive: "260 15% 99%",
-    tabText: "265 10% 35%",
-    tabTextActive: "262 52% 50%",
-    text: "265 18% 16%",
-    textSecondary: "265 10% 32%",
-    textMuted: "260 8% 48%",
-    border: "260 14% 80%",
-    splitter: "260 14% 87%",
-    splitterHover: "262 52% 58%",
-    hover: "260 14% 93%",
-    primary: "262 52% 50%",
-    floatShadow: "260 15% 22%"
-  }
-};
-var vsCodeDark = {
-  name: "VS Code Dark",
-  mode: "dark",
-  colors: {
-    bg: "222 47% 7%",
-    surface: "222 47% 10%",
-    surfaceAlt: "222 47% 12%",
-    panelHeader: "222 47% 15%",
-    tabBar: "222 47% 11%",
-    tabActive: "222 47% 10%",
-    tabText: "215 20% 65%",
-    tabTextActive: "217 91% 70%",
-    text: "210 40% 96%",
-    textSecondary: "215 20% 68%",
-    textMuted: "215 15% 50%",
-    border: "217 33% 24%",
-    splitter: "217 33% 20%",
-    splitterHover: "217 91% 60%",
-    hover: "217 33% 16%",
-    primary: "217 91% 70%",
-    floatShadow: "0 0% 0%"
-  }
-};
-var draculaDark = {
-  name: "Dracula Dark",
-  mode: "dark",
-  colors: {
-    bg: "231 15% 14%",
-    surface: "231 15% 17%",
-    surfaceAlt: "231 15% 19%",
-    panelHeader: "231 15% 22%",
-    tabBar: "231 15% 16%",
-    tabActive: "231 15% 17%",
-    tabText: "225 15% 65%",
-    tabTextActive: "265 90% 72%",
-    text: "60 30% 92%",
-    textSecondary: "225 15% 68%",
-    textMuted: "225 12% 50%",
-    border: "231 15% 28%",
-    splitter: "231 15% 24%",
-    splitterHover: "265 90% 60%",
-    hover: "231 15% 22%",
-    primary: "265 90% 72%",
-    floatShadow: "231 20% 5%"
-  }
-};
-var nordDark = {
-  name: "Nord Dark",
-  mode: "dark",
-  colors: {
-    bg: "220 16% 16%",
-    surface: "220 16% 20%",
-    surfaceAlt: "220 16% 22%",
-    panelHeader: "220 16% 25%",
-    tabBar: "220 16% 19%",
-    tabActive: "220 16% 20%",
-    tabText: "219 14% 65%",
-    tabTextActive: "193 43% 60%",
-    text: "219 28% 88%",
-    textSecondary: "219 14% 68%",
-    textMuted: "219 12% 50%",
-    border: "220 16% 30%",
-    splitter: "220 16% 26%",
-    splitterHover: "193 43% 50%",
-    hover: "220 16% 24%",
-    primary: "193 43% 60%",
-    floatShadow: "220 20% 8%"
-  }
-};
-var solarizedDark = {
-  name: "Solarized Dark",
-  mode: "dark",
-  colors: {
-    bg: "192 81% 8%",
-    surface: "192 81% 11%",
-    surfaceAlt: "192 60% 13%",
-    panelHeader: "192 60% 16%",
-    tabBar: "192 70% 10%",
-    tabActive: "192 81% 11%",
+);
+var sepiaLight = createTheme(
+  "Sepia",
+  "light",
+  { hue: 35, sat: 35, light: 94 },
+  { hue: 18, sat: 60, light: 42 }
+);
+var mintLight = createTheme(
+  "Mint",
+  "light",
+  { hue: 150, sat: 20 },
+  { hue: 162, sat: 63, light: 35 }
+);
+var lavenderLight = createTheme(
+  "Lavender",
+  "light",
+  { hue: 260, sat: 20 },
+  { hue: 262, sat: 52, light: 50 }
+);
+var vsCodeDark = createTheme(
+  "VS Code Dark",
+  "dark",
+  { hue: 222, sat: 47, light: 7 },
+  { hue: 217, sat: 91, light: 70 },
+  { text: "210 40% 96%", floatShadow: "0 0% 0%" }
+);
+var draculaDark = createTheme(
+  "Dracula Dark",
+  "dark",
+  { hue: 231, sat: 15, light: 14 },
+  { hue: 265, sat: 90, light: 72 },
+  { text: "60 30% 92%" }
+);
+var nordDark = createTheme(
+  "Nord Dark",
+  "dark",
+  { hue: 220, sat: 16, light: 16 },
+  { hue: 193, sat: 43, light: 60 },
+  { text: "219 28% 88%" }
+);
+var solarizedDark = createTheme(
+  "Solarized Dark",
+  "dark",
+  { hue: 192, sat: 81, light: 8 },
+  { hue: 175, sat: 59, light: 55 },
+  {
     tabText: "180 8% 65%",
-    tabTextActive: "175 59% 55%",
     text: "44 87% 94%",
     textSecondary: "180 8% 68%",
     textMuted: "194 14% 50%",
-    border: "192 50% 24%",
-    splitter: "192 50% 16%",
-    splitterHover: "175 59% 50%",
-    hover: "192 60% 15%",
-    primary: "175 59% 55%",
     floatShadow: "192 60% 3%"
   }
-};
-var midnightDark = {
-  name: "Midnight Blue",
-  mode: "dark",
-  colors: {
-    bg: "225 30% 10%",
-    surface: "225 28% 13%",
-    surfaceAlt: "225 26% 15%",
-    panelHeader: "225 26% 18%",
-    tabBar: "225 28% 12%",
-    tabActive: "225 28% 13%",
-    tabText: "220 15% 65%",
-    tabTextActive: "210 60% 65%",
-    text: "220 25% 90%",
-    textSecondary: "220 15% 68%",
-    textMuted: "220 12% 50%",
-    border: "225 25% 24%",
-    splitter: "225 25% 20%",
-    splitterHover: "210 60% 55%",
-    hover: "225 26% 18%",
-    primary: "210 60% 65%",
-    floatShadow: "225 30% 4%"
-  }
-};
-var forestDark = {
-  name: "Forest Dark",
-  mode: "dark",
-  colors: {
-    bg: "160 18% 9%",
-    surface: "160 16% 12%",
-    surfaceAlt: "160 14% 14%",
-    panelHeader: "160 14% 17%",
-    tabBar: "160 16% 11%",
-    tabActive: "160 16% 12%",
-    tabText: "155 10% 65%",
-    tabTextActive: "152 50% 55%",
-    text: "150 15% 90%",
-    textSecondary: "155 10% 68%",
-    textMuted: "155 8% 50%",
-    border: "160 14% 24%",
-    splitter: "160 14% 18%",
-    splitterHover: "152 50% 48%",
-    hover: "160 14% 16%",
-    primary: "152 50% 55%",
-    floatShadow: "160 18% 3%"
-  }
-};
-var slateDark = {
-  name: "Slate Dark",
-  mode: "dark",
-  colors: {
-    bg: "215 12% 11%",
-    surface: "215 10% 14%",
-    surfaceAlt: "215 9% 16%",
-    panelHeader: "215 9% 19%",
-    tabBar: "215 10% 13%",
-    tabActive: "215 10% 14%",
-    tabText: "210 8% 65%",
-    tabTextActive: "205 40% 62%",
-    text: "210 15% 90%",
-    textSecondary: "210 8% 68%",
-    textMuted: "210 6% 50%",
-    border: "215 9% 24%",
-    splitter: "215 9% 20%",
-    splitterHover: "205 40% 52%",
-    hover: "215 9% 18%",
-    primary: "205 40% 62%",
-    floatShadow: "215 12% 4%"
-  }
-};
+);
+var midnightDark = createTheme(
+  "Midnight Blue",
+  "dark",
+  { hue: 225, sat: 30 },
+  { hue: 210, sat: 60, light: 65 }
+);
+var forestDark = createTheme(
+  "Forest Dark",
+  "dark",
+  { hue: 160, sat: 18, light: 9 },
+  { hue: 152, sat: 50, light: 55 }
+);
+var slateDark = createTheme(
+  "Slate Dark",
+  "dark",
+  { hue: 215, sat: 12, light: 11 },
+  { hue: 205, sat: 40, light: 62 }
+);
 var themes = {
   // Light
   vsCodeLight,
@@ -6253,6 +6091,7 @@ var PaneNavigator = class {
   countPanels,
   createDefaultState,
   createPreventableEvent,
+  createTheme,
   defaultResourceStrings,
   deserialize,
   detectPanelEdge,

package/dist/index.d.cts

@@ -856,6 +856,7 @@ declare class PanelApi {
  *   1. Use a built-in theme: `theme: themes.vsCodeLight`
  *   2. Create a custom theme: `theme: { name: 'custom', mode: 'light', colors: { ... } }`
  *   3. Extend a built-in theme: `theme: { ...themes.vsCodeLight, colors: { ...themes.vsCodeLight.colors, primary: '#ff0000' } }`
+ *   4. Use createTheme factory: `theme: createTheme('My Theme', 'dark', { hue: 220, sat: 16 }, { hue: 193, sat: 43, light: 60 })`
  */
 interface DockThemeColors {
     /** Main background behind all panels */
@@ -906,33 +907,39 @@ interface DockTheme {
  * This scopes the theme to that element's subtree.
  */
 declare function applyTheme(container: HTMLElement, theme: DockTheme): void;
-/** VS Code-inspired light theme — clean whites and grays */
+interface ThemeBase {
+    hue: number;
+    sat: number;
+    light?: number;
+}
+interface ThemeAccent {
+    hue: number;
+    sat: number;
+    light?: number;
+}
+/**
+ * Create a theme from a base palette and accent color.
+ *
+ * @param name - Human-readable theme name
+ * @param mode - 'light' or 'dark'
+ * @param base - Background hue/saturation (lightness auto-derived from mode)
+ * @param accent - Primary accent hue/saturation
+ * @param overrides - Optional per-color overrides for special themes
+ */
+declare function createTheme(name: string, mode: 'light' | 'dark', base: ThemeBase, accent: ThemeAccent, overrides?: Partial<DockThemeColors>): DockTheme;
 declare const vsCodeLight: DockTheme;
-/** GitHub-inspired light theme — warm grays with subtle blue accent */
 declare const githubLight: DockTheme;
-/** Soft warm light theme — cream tones with amber accent */
 declare const warmLight: DockTheme;
-/** Solarized Light — low-contrast cream with teal accents, designed for all-day use */
 declare const solarizedLight: DockTheme;
-/** Sepia — book-like warmth with brown tones, very gentle on eyes */
 declare const sepiaLight: DockTheme;
-/** Mint — soft green tones, refreshing and calming */
 declare const mintLight: DockTheme;
-/** Lavender — soft purple-gray, elegant and easy on eyes */
 declare const lavenderLight: DockTheme;
-/** VS Code-inspired dark theme — deep blues and grays */
 declare const vsCodeDark: DockTheme;
-/** Dracula-inspired dark theme — purple accents on dark gray */
 declare const draculaDark: DockTheme;
-/** Nord-inspired dark theme — arctic blue-gray palette */
 declare const nordDark: DockTheme;
-/** Solarized Dark — low-contrast dark with teal accents, designed for all-day use */
 declare const solarizedDark: DockTheme;
-/** Midnight Blue — deep navy with soft blue accents, very easy on eyes at night */
 declare const midnightDark: DockTheme;
-/** Forest — deep green-gray with emerald accents, nature-inspired calm */
 declare const forestDark: DockTheme;
-/** Slate — neutral gray with warm undertones, minimalist and gentle */
 declare const slateDark: DockTheme;
 /** All built-in themes */
 declare const themes: {
@@ -1475,4 +1482,4 @@ declare class PanelFinder {
     dispose(): void;
 }
 
-export { AddPanelOptions, ContextMenuManager, ContextMenuManagerOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, KeyboardManager, KeyboardManagerOptions, LayoutConstraints, LayoutNode, MovePanelOptions, PaneNavigator, PaneNavigatorOptions, PanelApi, PanelConfig, PanelFinder, PanelFinderOptions, PopoutPanel, PreventableDockEvent, SerializedDockLayout, SplitDirection, SplitNode, StateHistoryManager, TabGroupNode, UnpinnedPanel, applyTheme, clearLocalStorage, collectAllPanelsOrdered, collectLayoutPanelIds, countPanels, createDefaultState, createPreventableEvent, defaultResourceStrings, deserialize, detectPanelEdge, dockReducer, draculaDark, exportAsUrl, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupByEdge, findTabGroupById, findTabGroupForPanel, forestDark, genId, getThemeByName, getThemesByMode, githubLight, importFromFile, importFromUrl, insertAtEdge, insertBySplit, insertInGroup, isPanelPlaced, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, movePanel, nordDark, removePanel, resetIdCounter, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight };
+export { AddPanelOptions, ContextMenuManager, ContextMenuManagerOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, KeyboardManager, KeyboardManagerOptions, LayoutConstraints, LayoutNode, MovePanelOptions, PaneNavigator, PaneNavigatorOptions, PanelApi, PanelConfig, PanelFinder, PanelFinderOptions, PopoutPanel, PreventableDockEvent, SerializedDockLayout, SplitDirection, SplitNode, StateHistoryManager, TabGroupNode, UnpinnedPanel, applyTheme, clearLocalStorage, collectAllPanelsOrdered, collectLayoutPanelIds, countPanels, createDefaultState, createPreventableEvent, createTheme, defaultResourceStrings, deserialize, detectPanelEdge, dockReducer, draculaDark, exportAsUrl, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupByEdge, findTabGroupById, findTabGroupForPanel, forestDark, genId, getThemeByName, getThemesByMode, githubLight, importFromFile, importFromUrl, insertAtEdge, insertBySplit, insertInGroup, isPanelPlaced, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, movePanel, nordDark, removePanel, resetIdCounter, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight };

package/dist/index.d.ts

@@ -856,6 +856,7 @@ declare class PanelApi {
  *   1. Use a built-in theme: `theme: themes.vsCodeLight`
  *   2. Create a custom theme: `theme: { name: 'custom', mode: 'light', colors: { ... } }`
  *   3. Extend a built-in theme: `theme: { ...themes.vsCodeLight, colors: { ...themes.vsCodeLight.colors, primary: '#ff0000' } }`
+ *   4. Use createTheme factory: `theme: createTheme('My Theme', 'dark', { hue: 220, sat: 16 }, { hue: 193, sat: 43, light: 60 })`
  */
 interface DockThemeColors {
     /** Main background behind all panels */
@@ -906,33 +907,39 @@ interface DockTheme {
  * This scopes the theme to that element's subtree.
  */
 declare function applyTheme(container: HTMLElement, theme: DockTheme): void;
-/** VS Code-inspired light theme — clean whites and grays */
+interface ThemeBase {
+    hue: number;
+    sat: number;
+    light?: number;
+}
+interface ThemeAccent {
+    hue: number;
+    sat: number;
+    light?: number;
+}
+/**
+ * Create a theme from a base palette and accent color.
+ *
+ * @param name - Human-readable theme name
+ * @param mode - 'light' or 'dark'
+ * @param base - Background hue/saturation (lightness auto-derived from mode)
+ * @param accent - Primary accent hue/saturation
+ * @param overrides - Optional per-color overrides for special themes
+ */
+declare function createTheme(name: string, mode: 'light' | 'dark', base: ThemeBase, accent: ThemeAccent, overrides?: Partial<DockThemeColors>): DockTheme;
 declare const vsCodeLight: DockTheme;
-/** GitHub-inspired light theme — warm grays with subtle blue accent */
 declare const githubLight: DockTheme;
-/** Soft warm light theme — cream tones with amber accent */
 declare const warmLight: DockTheme;
-/** Solarized Light — low-contrast cream with teal accents, designed for all-day use */
 declare const solarizedLight: DockTheme;
-/** Sepia — book-like warmth with brown tones, very gentle on eyes */
 declare const sepiaLight: DockTheme;
-/** Mint — soft green tones, refreshing and calming */
 declare const mintLight: DockTheme;
-/** Lavender — soft purple-gray, elegant and easy on eyes */
 declare const lavenderLight: DockTheme;
-/** VS Code-inspired dark theme — deep blues and grays */
 declare const vsCodeDark: DockTheme;
-/** Dracula-inspired dark theme — purple accents on dark gray */
 declare const draculaDark: DockTheme;
-/** Nord-inspired dark theme — arctic blue-gray palette */
 declare const nordDark: DockTheme;
-/** Solarized Dark — low-contrast dark with teal accents, designed for all-day use */
 declare const solarizedDark: DockTheme;
-/** Midnight Blue — deep navy with soft blue accents, very easy on eyes at night */
 declare const midnightDark: DockTheme;
-/** Forest — deep green-gray with emerald accents, nature-inspired calm */
 declare const forestDark: DockTheme;
-/** Slate — neutral gray with warm undertones, minimalist and gentle */
 declare const slateDark: DockTheme;
 /** All built-in themes */
 declare const themes: {
@@ -1475,4 +1482,4 @@ declare class PanelFinder {
     dispose(): void;
 }
 
-export { AddPanelOptions, ContextMenuManager, ContextMenuManagerOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, KeyboardManager, KeyboardManagerOptions, LayoutConstraints, LayoutNode, MovePanelOptions, PaneNavigator, PaneNavigatorOptions, PanelApi, PanelConfig, PanelFinder, PanelFinderOptions, PopoutPanel, PreventableDockEvent, SerializedDockLayout, SplitDirection, SplitNode, StateHistoryManager, TabGroupNode, UnpinnedPanel, applyTheme, clearLocalStorage, collectAllPanelsOrdered, collectLayoutPanelIds, countPanels, createDefaultState, createPreventableEvent, defaultResourceStrings, deserialize, detectPanelEdge, dockReducer, draculaDark, exportAsUrl, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupByEdge, findTabGroupById, findTabGroupForPanel, forestDark, genId, getThemeByName, getThemesByMode, githubLight, importFromFile, importFromUrl, insertAtEdge, insertBySplit, insertInGroup, isPanelPlaced, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, movePanel, nordDark, removePanel, resetIdCounter, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight };
+export { AddPanelOptions, ContextMenuManager, ContextMenuManagerOptions, DockAction, DockEdge, DockManagerState, DockPosition, DockResourceStrings, DockTheme, DockThemeColors, DockviewApi, DockviewComponent, DockviewComponentOptions, EventEmitter, FloatPanelOptions, FloatingPanel, HeaderPosition, IDisposable, KeyboardManager, KeyboardManagerOptions, LayoutConstraints, LayoutNode, MovePanelOptions, PaneNavigator, PaneNavigatorOptions, PanelApi, PanelConfig, PanelFinder, PanelFinderOptions, PopoutPanel, PreventableDockEvent, SerializedDockLayout, SplitDirection, SplitNode, StateHistoryManager, TabGroupNode, UnpinnedPanel, applyTheme, clearLocalStorage, collectAllPanelsOrdered, collectLayoutPanelIds, countPanels, createDefaultState, createPreventableEvent, createTheme, defaultResourceStrings, deserialize, detectPanelEdge, dockReducer, draculaDark, exportAsUrl, exportToFile, findAllTabGroups, findFirstTabGroup, findTabGroupByEdge, findTabGroupById, findTabGroupForPanel, forestDark, genId, getThemeByName, getThemesByMode, githubLight, importFromFile, importFromUrl, insertAtEdge, insertBySplit, insertInGroup, isPanelPlaced, lavenderLight, loadFromLocalStorage, midnightDark, mintLight, movePanel, nordDark, removePanel, resetIdCounter, saveToLocalStorage, sepiaLight, serialize, slateDark, solarizedDark, solarizedLight, themes, validateState, vsCodeDark, vsCodeLight, warmLight };

package/dist/index.js

@@ -4148,9 +4148,8 @@ var UnpinnedStripView = class {
       this.stripEl.removeEventListener("click", this.boundStripClick);
       this.boundStripClick = null;
     }
-    if (this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
-    }
+    this.stripEl.remove();
+    this.element.remove();
   }
   // ── Private: Event delegation ──────────────────────────────────
   /** Set up event delegation on stripEl for all tab interactions */
@@ -4375,328 +4374,166 @@ function applyTheme(container, theme) {
   container.style.setProperty("--dock-scrollbar-thumb", colors.textMuted);
   container.style.setProperty("--dock-scrollbar-track", "transparent");
 }
-var vsCodeLight = {
-  name: "VS Code Light",
-  mode: "light",
-  colors: {
-    bg: "220 20% 96%",
-    surface: "0 0% 100%",
-    surfaceAlt: "220 14% 95%",
-    panelHeader: "220 14% 92%",
-    tabBar: "220 14% 93%",
-    tabActive: "0 0% 100%",
-    tabText: "0 0% 38%",
-    tabTextActive: "217 91% 50%",
-    text: "0 0% 15%",
-    textSecondary: "0 0% 35%",
-    textMuted: "0 0% 50%",
-    border: "220 13% 82%",
-    splitter: "220 13% 87%",
-    splitterHover: "217 91% 60%",
-    hover: "220 14% 93%",
-    primary: "217 91% 50%",
-    floatShadow: "0 0% 0%"
-  }
-};
-var githubLight = {
-  name: "GitHub Light",
-  mode: "light",
-  colors: {
-    bg: "210 20% 97%",
-    surface: "0 0% 100%",
-    surfaceAlt: "210 18% 96%",
-    panelHeader: "210 18% 92%",
-    tabBar: "210 15% 94%",
-    tabActive: "0 0% 100%",
-    tabText: "210 10% 35%",
-    tabTextActive: "212 92% 45%",
-    text: "210 12% 16%",
-    textSecondary: "210 10% 32%",
-    textMuted: "210 8% 48%",
-    border: "210 14% 80%",
-    splitter: "210 14% 89%",
-    splitterHover: "212 92% 55%",
-    hover: "210 15% 94%",
-    primary: "212 92% 45%",
-    floatShadow: "210 20% 20%"
+var hsl = (h, s, l) => `${h} ${s}% ${l}%`;
+function createTheme(name, mode, base, accent, overrides) {
+  const { hue: h, sat: s } = base;
+  const { hue: ah, sat: as_ } = accent;
+  let colors;
+  if (mode === "light") {
+    const bl = base.light ?? 96;
+    const al = accent.light ?? 50;
+    const ts = Math.max(s - 6, 0);
+    colors = {
+      bg: hsl(h, s, bl),
+      surface: hsl(h, Math.max(s - 5, 0), Math.min(bl + 3, 100)),
+      surfaceAlt: hsl(h, Math.max(s - 2, 0), bl - 1),
+      panelHeader: hsl(h, Math.max(s - 2, 0), bl - 4),
+      tabBar: hsl(h, Math.max(s - 5, 0), bl - 3),
+      tabActive: hsl(h, Math.max(s - 5, 0), Math.min(bl + 3, 100)),
+      tabText: hsl(h - 10, Math.max(ts - 8, 0), 35),
+      tabTextActive: hsl(ah, as_, al),
+      text: hsl(h - 10, Math.max(ts - 2, 0), 15),
+      textSecondary: hsl(h - 10, Math.max(ts - 8, 0), 32),
+      textMuted: hsl(h - 10, Math.max(ts - 12, 0), 48),
+      border: hsl(h, Math.max(s - 6, 0), 80),
+      splitter: hsl(h, Math.max(s - 6, 0), 87),
+      splitterHover: hsl(ah, as_, al + 8),
+      hover: hsl(h, Math.max(s - 5, 0), bl - 3),
+      primary: hsl(ah, as_, al),
+      floatShadow: hsl(h, Math.max(s, 0), 15)
+    };
+  } else {
+    const bl = base.light ?? 10;
+    const al = accent.light ?? 65;
+    const ts = Math.round(s * 0.5);
+    colors = {
+      bg: hsl(h, s, bl),
+      surface: hsl(h, s, bl + 3),
+      surfaceAlt: hsl(h, Math.max(s - 2, 0), bl + 5),
+      panelHeader: hsl(h, Math.max(s - 2, 0), bl + 8),
+      tabBar: hsl(h, s, bl + 1),
+      tabActive: hsl(h, s, bl + 3),
+      tabText: hsl(h - 5, Math.max(ts, 8), 65),
+      tabTextActive: hsl(ah, as_, al),
+      text: hsl(h - 5, Math.round(s * 0.8), 90),
+      textSecondary: hsl(h - 5, Math.max(ts, 8), 68),
+      textMuted: hsl(h - 5, Math.max(ts - 3, 6), 50),
+      border: hsl(h, Math.max(s - 2, 0), bl + 14),
+      splitter: hsl(h, Math.max(s - 2, 0), bl + 10),
+      splitterHover: hsl(ah, as_, al - 8),
+      hover: hsl(h, Math.max(s - 2, 0), bl + 8),
+      primary: hsl(ah, as_, al),
+      floatShadow: hsl(h, Math.min(s + 5, 100), Math.max(bl - 7, 0))
+    };
   }
-};
-var warmLight = {
-  name: "Warm Light",
-  mode: "light",
-  colors: {
-    bg: "40 30% 96%",
-    surface: "40 20% 99%",
-    surfaceAlt: "40 25% 95%",
-    panelHeader: "40 25% 91%",
-    tabBar: "40 20% 93%",
-    tabActive: "40 20% 99%",
-    tabText: "30 10% 35%",
-    tabTextActive: "25 80% 45%",
-    text: "30 15% 15%",
-    textSecondary: "30 10% 32%",
-    textMuted: "30 8% 48%",
-    border: "35 15% 80%",
-    splitter: "35 15% 87%",
-    splitterHover: "25 80% 55%",
-    hover: "40 20% 93%",
-    primary: "25 80% 45%",
-    floatShadow: "30 20% 15%"
+  if (overrides) {
+    Object.assign(colors, overrides);
   }
-};
-var solarizedLight = {
-  name: "Solarized Light",
-  mode: "light",
-  colors: {
-    bg: "44 87% 94%",
-    surface: "44 87% 97%",
-    surfaceAlt: "44 60% 93%",
-    panelHeader: "44 60% 89%",
-    tabBar: "44 50% 91%",
-    tabActive: "44 87% 97%",
+  return { name, mode, colors };
+}
+var vsCodeLight = createTheme(
+  "VS Code Light",
+  "light",
+  { hue: 220, sat: 20 },
+  { hue: 217, sat: 91, light: 50 },
+  { floatShadow: "0 0% 0%" }
+);
+var githubLight = createTheme(
+  "GitHub Light",
+  "light",
+  { hue: 210, sat: 20, light: 97 },
+  { hue: 212, sat: 92, light: 45 },
+  { floatShadow: "210 20% 20%" }
+);
+var warmLight = createTheme(
+  "Warm Light",
+  "light",
+  { hue: 40, sat: 30 },
+  { hue: 25, sat: 80, light: 45 }
+);
+var solarizedLight = createTheme(
+  "Solarized Light",
+  "light",
+  { hue: 44, sat: 87, light: 94 },
+  { hue: 175, sat: 59, light: 35 },
+  {
     tabText: "194 14% 35%",
-    tabTextActive: "175 59% 35%",
     text: "192 81% 14%",
     textSecondary: "194 14% 32%",
     textMuted: "180 8% 48%",
-    border: "44 30% 80%",
-    splitter: "44 30% 85%",
-    splitterHover: "175 59% 45%",
-    hover: "44 50% 91%",
-    primary: "175 59% 35%",
     floatShadow: "44 20% 30%"
   }
-};
-var sepiaLight = {
-  name: "Sepia",
-  mode: "light",
-  colors: {
-    bg: "35 35% 94%",
-    surface: "35 30% 97%",
-    surfaceAlt: "35 28% 93%",
-    panelHeader: "35 28% 88%",
-    tabBar: "35 25% 90%",
-    tabActive: "35 30% 97%",
-    tabText: "25 12% 35%",
-    tabTextActive: "18 60% 42%",
-    text: "25 20% 18%",
-    textSecondary: "25 12% 32%",
-    textMuted: "25 8% 48%",
-    border: "30 18% 80%",
-    splitter: "30 18% 85%",
-    splitterHover: "18 60% 50%",
-    hover: "35 25% 91%",
-    primary: "18 60% 42%",
-    floatShadow: "25 15% 25%"
-  }
-};
-var mintLight = {
-  name: "Mint",
-  mode: "light",
-  colors: {
-    bg: "150 20% 96%",
-    surface: "150 15% 99%",
-    surfaceAlt: "150 18% 95%",
-    panelHeader: "150 18% 90%",
-    tabBar: "150 15% 92%",
-    tabActive: "150 15% 99%",
-    tabText: "160 10% 35%",
-    tabTextActive: "162 63% 35%",
-    text: "160 18% 14%",
-    textSecondary: "160 10% 32%",
-    textMuted: "155 8% 48%",
-    border: "150 14% 80%",
-    splitter: "150 14% 87%",
-    splitterHover: "162 63% 45%",
-    hover: "150 15% 93%",
-    primary: "162 63% 35%",
-    floatShadow: "155 15% 20%"
-  }
-};
-var lavenderLight = {
-  name: "Lavender",
-  mode: "light",
-  colors: {
-    bg: "260 20% 96%",
-    surface: "260 15% 99%",
-    surfaceAlt: "260 16% 95%",
-    panelHeader: "260 16% 90%",
-    tabBar: "260 14% 92%",
-    tabActive: "260 15% 99%",
-    tabText: "265 10% 35%",
-    tabTextActive: "262 52% 50%",
-    text: "265 18% 16%",
-    textSecondary: "265 10% 32%",
-    textMuted: "260 8% 48%",
-    border: "260 14% 80%",
-    splitter: "260 14% 87%",
-    splitterHover: "262 52% 58%",
-    hover: "260 14% 93%",
-    primary: "262 52% 50%",
-    floatShadow: "260 15% 22%"
-  }
-};
-var vsCodeDark = {
-  name: "VS Code Dark",
-  mode: "dark",
-  colors: {
-    bg: "222 47% 7%",
-    surface: "222 47% 10%",
-    surfaceAlt: "222 47% 12%",
-    panelHeader: "222 47% 15%",
-    tabBar: "222 47% 11%",
-    tabActive: "222 47% 10%",
-    tabText: "215 20% 65%",
-    tabTextActive: "217 91% 70%",
-    text: "210 40% 96%",
-    textSecondary: "215 20% 68%",
-    textMuted: "215 15% 50%",
-    border: "217 33% 24%",
-    splitter: "217 33% 20%",
-    splitterHover: "217 91% 60%",
-    hover: "217 33% 16%",
-    primary: "217 91% 70%",
-    floatShadow: "0 0% 0%"
-  }
-};
-var draculaDark = {
-  name: "Dracula Dark",
-  mode: "dark",
-  colors: {
-    bg: "231 15% 14%",
-    surface: "231 15% 17%",
-    surfaceAlt: "231 15% 19%",
-    panelHeader: "231 15% 22%",
-    tabBar: "231 15% 16%",
-    tabActive: "231 15% 17%",
-    tabText: "225 15% 65%",
-    tabTextActive: "265 90% 72%",
-    text: "60 30% 92%",
-    textSecondary: "225 15% 68%",
-    textMuted: "225 12% 50%",
-    border: "231 15% 28%",
-    splitter: "231 15% 24%",
-    splitterHover: "265 90% 60%",
-    hover: "231 15% 22%",
-    primary: "265 90% 72%",
-    floatShadow: "231 20% 5%"
-  }
-};
-var nordDark = {
-  name: "Nord Dark",
-  mode: "dark",
-  colors: {
-    bg: "220 16% 16%",
-    surface: "220 16% 20%",
-    surfaceAlt: "220 16% 22%",
-    panelHeader: "220 16% 25%",
-    tabBar: "220 16% 19%",
-    tabActive: "220 16% 20%",
-    tabText: "219 14% 65%",
-    tabTextActive: "193 43% 60%",
-    text: "219 28% 88%",
-    textSecondary: "219 14% 68%",
-    textMuted: "219 12% 50%",
-    border: "220 16% 30%",
-    splitter: "220 16% 26%",
-    splitterHover: "193 43% 50%",
-    hover: "220 16% 24%",
-    primary: "193 43% 60%",
-    floatShadow: "220 20% 8%"
-  }
-};
-var solarizedDark = {
-  name: "Solarized Dark",
-  mode: "dark",
-  colors: {
-    bg: "192 81% 8%",
-    surface: "192 81% 11%",
-    surfaceAlt: "192 60% 13%",
-    panelHeader: "192 60% 16%",
-    tabBar: "192 70% 10%",
-    tabActive: "192 81% 11%",
+);
+var sepiaLight = createTheme(
+  "Sepia",
+  "light",
+  { hue: 35, sat: 35, light: 94 },
+  { hue: 18, sat: 60, light: 42 }
+);
+var mintLight = createTheme(
+  "Mint",
+  "light",
+  { hue: 150, sat: 20 },
+  { hue: 162, sat: 63, light: 35 }
+);
+var lavenderLight = createTheme(
+  "Lavender",
+  "light",
+  { hue: 260, sat: 20 },
+  { hue: 262, sat: 52, light: 50 }
+);
+var vsCodeDark = createTheme(
+  "VS Code Dark",
+  "dark",
+  { hue: 222, sat: 47, light: 7 },
+  { hue: 217, sat: 91, light: 70 },
+  { text: "210 40% 96%", floatShadow: "0 0% 0%" }
+);
+var draculaDark = createTheme(
+  "Dracula Dark",
+  "dark",
+  { hue: 231, sat: 15, light: 14 },
+  { hue: 265, sat: 90, light: 72 },
+  { text: "60 30% 92%" }
+);
+var nordDark = createTheme(
+  "Nord Dark",
+  "dark",
+  { hue: 220, sat: 16, light: 16 },
+  { hue: 193, sat: 43, light: 60 },
+  { text: "219 28% 88%" }
+);
+var solarizedDark = createTheme(
+  "Solarized Dark",
+  "dark",
+  { hue: 192, sat: 81, light: 8 },
+  { hue: 175, sat: 59, light: 55 },
+  {
     tabText: "180 8% 65%",
-    tabTextActive: "175 59% 55%",
     text: "44 87% 94%",
     textSecondary: "180 8% 68%",
     textMuted: "194 14% 50%",
-    border: "192 50% 24%",
-    splitter: "192 50% 16%",
-    splitterHover: "175 59% 50%",
-    hover: "192 60% 15%",
-    primary: "175 59% 55%",
     floatShadow: "192 60% 3%"
   }
-};
-var midnightDark = {
-  name: "Midnight Blue",
-  mode: "dark",
-  colors: {
-    bg: "225 30% 10%",
-    surface: "225 28% 13%",
-    surfaceAlt: "225 26% 15%",
-    panelHeader: "225 26% 18%",
-    tabBar: "225 28% 12%",
-    tabActive: "225 28% 13%",
-    tabText: "220 15% 65%",
-    tabTextActive: "210 60% 65%",
-    text: "220 25% 90%",
-    textSecondary: "220 15% 68%",
-    textMuted: "220 12% 50%",
-    border: "225 25% 24%",
-    splitter: "225 25% 20%",
-    splitterHover: "210 60% 55%",
-    hover: "225 26% 18%",
-    primary: "210 60% 65%",
-    floatShadow: "225 30% 4%"
-  }
-};
-var forestDark = {
-  name: "Forest Dark",
-  mode: "dark",
-  colors: {
-    bg: "160 18% 9%",
-    surface: "160 16% 12%",
-    surfaceAlt: "160 14% 14%",
-    panelHeader: "160 14% 17%",
-    tabBar: "160 16% 11%",
-    tabActive: "160 16% 12%",
-    tabText: "155 10% 65%",
-    tabTextActive: "152 50% 55%",
-    text: "150 15% 90%",
-    textSecondary: "155 10% 68%",
-    textMuted: "155 8% 50%",
-    border: "160 14% 24%",
-    splitter: "160 14% 18%",
-    splitterHover: "152 50% 48%",
-    hover: "160 14% 16%",
-    primary: "152 50% 55%",
-    floatShadow: "160 18% 3%"
-  }
-};
-var slateDark = {
-  name: "Slate Dark",
-  mode: "dark",
-  colors: {
-    bg: "215 12% 11%",
-    surface: "215 10% 14%",
-    surfaceAlt: "215 9% 16%",
-    panelHeader: "215 9% 19%",
-    tabBar: "215 10% 13%",
-    tabActive: "215 10% 14%",
-    tabText: "210 8% 65%",
-    tabTextActive: "205 40% 62%",
-    text: "210 15% 90%",
-    textSecondary: "210 8% 68%",
-    textMuted: "210 6% 50%",
-    border: "215 9% 24%",
-    splitter: "215 9% 20%",
-    splitterHover: "205 40% 52%",
-    hover: "215 9% 18%",
-    primary: "205 40% 62%",
-    floatShadow: "215 12% 4%"
-  }
-};
+);
+var midnightDark = createTheme(
+  "Midnight Blue",
+  "dark",
+  { hue: 225, sat: 30 },
+  { hue: 210, sat: 60, light: 65 }
+);
+var forestDark = createTheme(
+  "Forest Dark",
+  "dark",
+  { hue: 160, sat: 18, light: 9 },
+  { hue: 152, sat: 50, light: 55 }
+);
+var slateDark = createTheme(
+  "Slate Dark",
+  "dark",
+  { hue: 215, sat: 12, light: 11 },
+  { hue: 205, sat: 40, light: 62 }
+);
 var themes = {
   // Light
   vsCodeLight,
@@ -6169,6 +6006,7 @@ export {
   countPanels,
   createDefaultState,
   createPreventableEvent,
+  createTheme,
   defaultResourceStrings,
   deserialize,
   detectPanelEdge,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widgetstools/dock-manager-core",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Zero-dependency layout manager supporting tabs, splits, floating windows, and auto-hide panels. Framework-agnostic core.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -25,7 +25,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "npx tsup src/index.ts --format esm,cjs --dts --clean && cp -r src/styles dist/",
+    "build": "npx tsup src/index.ts --format esm,cjs --dts --clean && node -e \"const fs=require('fs');fs.cpSync('src/styles','dist/styles',{recursive:true})\"",
     "dev": "npx tsup src/index.ts --format esm,cjs --dts --watch"
   },
   "devDependencies": {
@@ -57,4 +57,4 @@
     "access": "public"
   },
   "sideEffects": false
-}
+}