@fangxinyan/lumina 0.6.2 → 0.6.4

package/dist/Theme.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 
-type ThemeMode = "light" | "dark" | "system";
-type ResolvedThemeMode = "light" | "dark";
+type ThemeBaseMode = "light" | "dark";
+type BuiltInThemeMode = ThemeBaseMode | "system";
+type ThemeMode = BuiltInThemeMode | (string & {});
+type ResolvedThemeMode = ThemeBaseMode | (string & {});
 type AccentKey = "sky" | "coral" | "mint" | "violet" | "amber" | "rose";
 type DensityMode = "compact" | "comfortable" | "spacious";
 type FontKey = "system" | "sf" | "serif" | "mono";
@@ -30,8 +32,25 @@ type FontConfig = FontKey | string | {
 /** Arbitrary CSS variable overrides. Keys may be either a short name
  *  (e.g. `"bg"` → `--bg`) or a full var name (e.g. `"--bg"`). */
 type ThemeTokens = Record<string, string>;
+/** Named custom theme mode. `base` keeps dark/light specific component rules. */
+interface ThemePreset {
+    /** Optional display name used by ThemePanel or other theme pickers. */
+    label?: string;
+    /** Optional helper text used by ThemePanel or other theme pickers. */
+    description?: string;
+    base?: ThemeBaseMode;
+    accent?: AccentKey | CustomAccentInput;
+    density?: DensityMode;
+    intensity?: number;
+    radius?: number;
+    font?: FontConfig;
+    tokens?: ThemeTokens;
+}
+type ThemePresets = Record<string, ThemePreset>;
 interface ThemeConfig {
     mode?: ThemeMode;
+    /** Base light/dark color scheme used by custom modes. */
+    colorScheme?: ThemeBaseMode;
     accent?: AccentKey | CustomAccentInput;
     density?: DensityMode;
     /** Shadow strength, 1..10. Maps to `--d` (0.4..1.6). */
@@ -40,12 +59,16 @@ interface ThemeConfig {
     radius?: number;
     font?: FontConfig;
     tokens?: ThemeTokens;
+    /** Custom named modes addressable through `mode` / `setMode`. */
+    themes?: ThemePresets;
 }
 interface ThemeValue {
     /** Requested mode ("system" is preserved here). */
     mode: ThemeMode;
-    /** Resolved concrete mode ("system" → "light" | "dark" based on OS). */
+    /** Resolved concrete mode ("system" → "light" | "dark"; custom modes keep their name). */
     resolvedMode: ResolvedThemeMode;
+    /** The light/dark base currently used for component-specific selectors. */
+    colorScheme: ThemeBaseMode;
     /** Accent key or "custom" if a palette was supplied. */
     accent: AccentKey | "custom";
     /** Resolved palette currently in effect. */
@@ -55,6 +78,8 @@ interface ThemeValue {
     radius: number;
     font: FontConfig;
     tokens: ThemeTokens;
+    themes: ThemePresets;
+    activeTheme: ThemePreset | null;
     setMode: (m: ThemeMode) => void;
     toggleMode: () => void;
     setAccent: (a: AccentKey | CustomAccentInput) => void;
@@ -63,6 +88,7 @@ interface ThemeValue {
     setRadius: (n: number) => void;
     setFont: (f: FontConfig) => void;
     setTokens: (t: ThemeTokens) => void;
+    setThemes: (t: ThemePresets) => void;
     /** Shallow-merge a partial config. */
     update: (cfg: Partial<ThemeConfig>) => void;
     /** Reset to the initial props. */
@@ -75,10 +101,11 @@ declare const ACCENT_PRESETS: Record<AccentKey, AccentPalette>;
 declare const ACCENT_PRESETS_DARK: Record<AccentKey, Pick<AccentPalette, "ink" | "soft" | "glow">>;
 /** Built-in font family stacks. */
 declare const FONT_STACKS: Record<FontKey, string>;
-/** Resolve "system" mode against `prefers-color-scheme`. */
+/** Resolve "system" mode against `prefers-color-scheme`; custom modes keep their name. */
 declare function resolveThemeMode(mode: ThemeMode): ResolvedThemeMode;
+declare function resolveThemeColorScheme(mode: ThemeMode, themes?: ThemePresets, fallback?: ThemeBaseMode): ThemeBaseMode;
 /** Fill missing slots of a custom accent via color-mix. */
-declare function normalizeAccentInput(input: AccentKey | CustomAccentInput, resolvedMode: ResolvedThemeMode): {
+declare function normalizeAccentInput(input: AccentKey | CustomAccentInput, colorScheme: ThemeBaseMode): {
     key: AccentKey | "custom";
     palette: AccentPalette;
 };
@@ -100,7 +127,7 @@ interface ThemeProviderProps extends ThemeConfig {
     as?: keyof JSX.IntrinsicElements;
     className?: string;
     style?: React.CSSProperties;
-    /** If set, theme state is persisted to localStorage under this key. */
+    /** If set, theme state and custom named themes are persisted to localStorage under this key. */
     storageKey?: string;
     /** Called whenever the resolved theme value changes. */
     onChange?: (value: ThemeValue) => void;
@@ -124,4 +151,4 @@ interface ThemeProviderProps extends ThemeConfig {
  */
 declare const ThemeProvider: React.FC<ThemeProviderProps>;
 
-export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, type AccentKey, type AccentPalette, type CustomAccentInput, type DensityMode, FONT_STACKS, type FontConfig, type FontKey, type ResolvedThemeMode, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ThemeValue, applyTheme, normalizeAccentInput, resolveThemeMode, useTheme, useThemeOptional };
+export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, type AccentKey, type AccentPalette, type BuiltInThemeMode, type CustomAccentInput, type DensityMode, FONT_STACKS, type FontConfig, type FontKey, type ResolvedThemeMode, type ThemeBaseMode, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresets, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ThemeValue, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional };

package/dist/Theme.js

@@ -1 +1 @@
-export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeMode, useTheme, useThemeOptional } from './chunk-NN25YMOL.js';
+export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional } from './chunk-7NZ2A4MA.js';

package/dist/ThemePanel-76LB3YA5.css

@@ -0,0 +1,509 @@
+/* ============ ThemePanel ============ */
+.theme-panel {
+  width: min(100%, 340px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-3);
+  box-sizing: border-box;
+  padding: var(--gap-4);
+  border-radius: var(--r-xl);
+  color: var(--fg);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-lift);
+}
+
+.theme-panel.compact {
+  width: min(100%, 300px);
+  gap: var(--gap-2);
+  padding: var(--gap-3);
+}
+
+.theme-panel-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.theme-panel-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.theme-panel-title svg {
+  flex: 0 0 auto;
+  color: var(--accent);
+}
+
+.theme-panel-title span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-panel-desc {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.theme-panel-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: var(--gap-3);
+  border-top: 1px solid var(--divider);
+}
+
+.theme-panel-head + .theme-panel-row,
+.theme-panel-row:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+
+.theme-panel-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.theme-panel-label > span:last-child:not(:first-child) {
+  min-width: 0;
+  max-width: 54%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 8px;
+  border-radius: var(--r-pill);
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.theme-panel-presets {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--gap-2);
+}
+
+.theme-panel-preset-shell {
+  position: relative;
+  min-width: 0;
+}
+
+.theme-panel .theme-panel-preset.btn {
+  min-width: 0;
+  width: 100%;
+  height: auto;
+  min-height: 74px;
+  justify-content: stretch;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 8px;
+  padding: 9px;
+  color: var(--fg-muted);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-control);
+  text-align: left;
+  white-space: normal;
+  transition:
+    color var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+
+.theme-panel .theme-panel-preset.btn:hover {
+  color: var(--fg);
+  box-shadow: var(--neu-shadow-panel);
+  transform: translateY(-1px);
+}
+
+.theme-panel .theme-panel-preset.btn.active {
+  color: var(--accent-ink);
+  box-shadow: var(--neu-shadow-inset), 0 0 0 1px var(--accent-glow);
+  transform: none;
+}
+
+.theme-panel .theme-panel-preset.btn.active:hover {
+  color: var(--accent-ink);
+  box-shadow: var(--neu-shadow-inset), 0 0 0 1px var(--accent-glow);
+}
+
+.theme-panel .theme-panel-preset-shell.deletable .theme-panel-preset.btn {
+  padding-right: 28px;
+}
+
+.theme-panel .theme-panel-preset-delete.btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  padding: 0;
+  color: var(--fg-subtle);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-control);
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.theme-panel-preset-shell:hover .theme-panel-preset-delete.btn,
+.theme-panel-preset-shell:focus-within .theme-panel-preset-delete.btn {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.theme-panel .theme-panel-preset-delete.btn:hover {
+  box-shadow: var(--neu-shadow-inset);
+}
+
+.theme-panel-preset-ink {
+  display: grid;
+  grid-template-columns: 1fr 1fr 0.7fr;
+  gap: 4px;
+  width: 100%;
+}
+
+.theme-panel-preset-ink span {
+  height: 18px;
+  min-width: 0;
+  border-radius: var(--r-pill);
+  box-shadow: inset 0 0 0 1px var(--divider);
+}
+
+.theme-panel-preset-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  width: 100%;
+}
+
+.theme-panel-preset-copy > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.theme-panel-preset-copy small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-subtle);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.theme-panel-swatches {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.theme-panel .theme-panel-swatch.btn {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border-radius: var(--r-pill);
+  box-shadow: var(--neu-shadow-subtle);
+}
+
+.theme-panel-swatch.active {
+  box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow);
+}
+
+.theme-panel .radio-group.segmented {
+  width: 100%;
+}
+
+.theme-panel .btn.block {
+  margin-top: var(--gap-1);
+}
+
+.theme-panel-create {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+}
+
+.theme-panel-create-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.theme-panel-create-head > div {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.theme-panel-create-head span {
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.theme-panel-create-head small {
+  min-width: 0;
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-panel-create-field {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+
+.theme-panel-create-field .radio-group.segmented {
+  width: 100%;
+}
+
+.theme-panel-create-mode.radio-group.segmented {
+  width: 100%;
+}
+
+.theme-panel-create-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.theme-panel-create-grid .cp-trigger,
+.theme-panel-create-grid .cp-custom-trigger {
+  width: 100%;
+}
+
+.theme-panel-create-sliders {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.theme-panel-shadow {
+  gap: 7px;
+}
+
+.theme-panel-create-preview {
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 7px 9px;
+  border-radius: var(--preview-radius, var(--r-md));
+  color: var(--preview-fg, var(--fg));
+  background: var(--preview-bg, var(--bg));
+  box-shadow:
+    calc(var(--shadow-offset) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-offset) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-blur) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-dark, var(--shadow-dark)),
+    calc(var(--shadow-offset) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-offset) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-blur) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-light, var(--shadow-light));
+  font-family: var(--preview-font, var(--font-sans));
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.theme-panel-create-preview-label {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: inherit;
+}
+
+.theme-panel-create-preview-label > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-panel-create-preview i {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--r-pill);
+  background: var(--preview-accent, var(--accent));
+  box-shadow:
+    inset 1px 1px 2px color-mix(in oklch, var(--preview-accent, var(--accent)) 50%, white),
+    0 0 0 4px var(--preview-accent-glow, var(--accent-glow));
+}
+
+.theme-panel-create-actions {
+  display: grid;
+  grid-template-columns: 0.85fr 1fr;
+  gap: 8px;
+}
+
+.theme-panel-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 2px;
+}
+
+.theme-panel-advanced-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid var(--divider);
+}
+
+.theme-panel-advanced-section.compact {
+  padding-top: 0;
+  border-top: none;
+}
+
+.theme-panel-advanced-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.theme-panel-advanced-title span {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.theme-panel-advanced-title small {
+  min-width: 0;
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-panel-token-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.theme-panel-token-field {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+}
+
+.theme-panel-token-label {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.theme-panel-token-label span {
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.theme-panel-token-label code {
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-panel-token-input {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 7px;
+  align-items: center;
+}
+
+.theme-panel-token-field.scale {
+  align-items: start;
+}
+
+.theme-panel-token-scale {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 7px;
+  align-items: center;
+}
+
+.theme-panel-token-picker {
+  width: 24px;
+  height: 24px;
+}
+
+.theme-panel-token-picker .cp-custom-trigger {
+  width: 24px;
+  height: 24px;
+  display: block;
+  border-radius: 7px;
+}
+
+.theme-panel-token-swatch {
+  display: block;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  box-shadow: var(--neu-shadow-inset), inset 0 0 0 1px var(--border);
+  transition:
+    box-shadow var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+
+.theme-panel-token-picker .cp-custom-trigger:hover .theme-panel-token-swatch {
+  box-shadow: var(--neu-shadow-control), inset 0 0 0 1px var(--border);
+  transform: translateY(-1px);
+}
+
+.theme-panel-token-input .input-wrap,
+.theme-panel-create-field .input-wrap {
+  min-width: 0;
+}
+
+.theme-panel-token-input .input {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}

package/dist/ThemePanel.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var chunkLFTCK2VM_cjs = require('./chunk-LFTCK2VM.cjs');
+require('./chunk-ZWCDB5PP.cjs');
+require('./chunk-6EOSMK34.cjs');
+require('./chunk-N2COYOXE.cjs');
+require('./chunk-6GQPF3EI.cjs');
+require('./chunk-VSUMJX6Z.cjs');
+require('./chunk-MYHBC3HA.cjs');
+require('./chunk-YB3IWIOJ.cjs');
+require('./chunk-VAXWWJJP.cjs');
+require('./chunk-5NFSDFBB.cjs');
+require('./chunk-2ZADGBUN.cjs');
+require('./chunk-6LARTGLP.cjs');
+
+
+
+Object.defineProperty(exports, "THEME_PANEL_DEFAULT_PRESET_OPTIONS", {
+  enumerable: true,
+  get: function () { return chunkLFTCK2VM_cjs.THEME_PANEL_DEFAULT_PRESET_OPTIONS; }
+});
+Object.defineProperty(exports, "THEME_PANEL_DEFAULT_THEME_PRESETS", {
+  enumerable: true,
+  get: function () { return chunkLFTCK2VM_cjs.THEME_PANEL_DEFAULT_THEME_PRESETS; }
+});
+Object.defineProperty(exports, "ThemePanel", {
+  enumerable: true,
+  get: function () { return chunkLFTCK2VM_cjs.ThemePanel; }
+});