@fangxinyan/lumina 0.6.3 → 0.6.4

package/dist/Tabs.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkKD4YYIIO_cjs = require('./chunk-KD4YYIIO.cjs');
+var chunkIHK2FRTS_cjs = require('./chunk-IHK2FRTS.cjs');
 
 
 
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
-  get: function () { return chunkKD4YYIIO_cjs.Tabs; }
+  get: function () { return chunkIHK2FRTS_cjs.Tabs; }
 });

package/dist/Tabs.js

@@ -1 +1 @@
-export { Tabs } from './chunk-OBEKX4VR.js';
+export { Tabs } from './chunk-TVUBGXWA.js';

package/dist/{Tag-HDYCDPFS.css → Tag-G2XWAL7A.css}

@@ -9,7 +9,7 @@
   font-size: 11px;
   font-weight: 500;
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   color: var(--fg-muted);
 }
 .tag.accent  { color: var(--accent-ink); }

package/dist/Tag.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk5DKRY67M_cjs = require('./chunk-5DKRY67M.cjs');
-require('./chunk-V272XR3F.cjs');
+var chunkSYWTT5TY_cjs = require('./chunk-SYWTT5TY.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "Tag", {
   enumerable: true,
-  get: function () { return chunk5DKRY67M_cjs.Tag; }
+  get: function () { return chunkSYWTT5TY_cjs.Tag; }
 });

package/dist/Tag.js

@@ -1,2 +1,2 @@
-export { Tag } from './chunk-5H5YP2TB.js';
-import './chunk-47VG2P34.js';
+export { Tag } from './chunk-VNNQYJLT.js';
+import './chunk-YT5NLCRC.js';

package/dist/{Textarea-YNET7IBH.css → Textarea-YHWKHIFE.css}

@@ -40,7 +40,7 @@
   border: none;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--fg);
   font-size: 13px;
   font-family: inherit;
@@ -49,6 +49,6 @@
   outline: none;
   transition: box-shadow var(--dur) var(--ease);
 }
-.textarea:focus { box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow); }
-.textarea.invalid { box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
+.textarea:focus { box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow); }
+.textarea.invalid { box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
 .textarea::placeholder { color: var(--fg-subtle); }

package/dist/Textarea.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
-var chunkMPVCYU2K_cjs = require('./chunk-MPVCYU2K.cjs');
-require('./chunk-V272XR3F.cjs');
+var chunk5NFSDFBB_cjs = require('./chunk-5NFSDFBB.cjs');
+require('./chunk-6LARTGLP.cjs');
 
 
 
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
-  get: function () { return chunkMPVCYU2K_cjs.TextArea; }
+  get: function () { return chunk5NFSDFBB_cjs.TextArea; }
 });
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
-  get: function () { return chunkMPVCYU2K_cjs.Textarea; }
+  get: function () { return chunk5NFSDFBB_cjs.Textarea; }
 });

package/dist/Textarea.js

@@ -1,2 +1,2 @@
-export { TextArea, Textarea } from './chunk-HLFH5HWR.js';
-import './chunk-47VG2P34.js';
+export { TextArea, Textarea } from './chunk-56PHETWO.js';
+import './chunk-YT5NLCRC.js';

package/dist/Theme.cjs

@@ -1,46 +1,46 @@
 'use strict';
 
-var chunk6ZXQJRAT_cjs = require('./chunk-6ZXQJRAT.cjs');
+var chunkN2COYOXE_cjs = require('./chunk-N2COYOXE.cjs');
 
 
 
 Object.defineProperty(exports, "ACCENT_PRESETS", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.ACCENT_PRESETS; }
+  get: function () { return chunkN2COYOXE_cjs.ACCENT_PRESETS; }
 });
 Object.defineProperty(exports, "ACCENT_PRESETS_DARK", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.ACCENT_PRESETS_DARK; }
+  get: function () { return chunkN2COYOXE_cjs.ACCENT_PRESETS_DARK; }
 });
 Object.defineProperty(exports, "FONT_STACKS", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.FONT_STACKS; }
+  get: function () { return chunkN2COYOXE_cjs.FONT_STACKS; }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.ThemeProvider; }
+  get: function () { return chunkN2COYOXE_cjs.ThemeProvider; }
 });
 Object.defineProperty(exports, "applyTheme", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.applyTheme; }
+  get: function () { return chunkN2COYOXE_cjs.applyTheme; }
 });
 Object.defineProperty(exports, "normalizeAccentInput", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.normalizeAccentInput; }
+  get: function () { return chunkN2COYOXE_cjs.normalizeAccentInput; }
 });
 Object.defineProperty(exports, "resolveThemeColorScheme", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.resolveThemeColorScheme; }
+  get: function () { return chunkN2COYOXE_cjs.resolveThemeColorScheme; }
 });
 Object.defineProperty(exports, "resolveThemeMode", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.resolveThemeMode; }
+  get: function () { return chunkN2COYOXE_cjs.resolveThemeMode; }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.useTheme; }
+  get: function () { return chunkN2COYOXE_cjs.useTheme; }
 });
 Object.defineProperty(exports, "useThemeOptional", {
   enumerable: true,
-  get: function () { return chunk6ZXQJRAT_cjs.useThemeOptional; }
+  get: function () { return chunkN2COYOXE_cjs.useThemeOptional; }
 });

package/dist/Theme.d.cts

@@ -34,6 +34,10 @@ type FontConfig = FontKey | string | {
 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;
@@ -123,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;

package/dist/Theme.d.ts

@@ -34,6 +34,10 @@ type FontConfig = FontKey | string | {
 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;
@@ -123,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;

package/dist/Theme.js

@@ -1 +1 @@
-export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional } from './chunk-J5ZGYQZK.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;
+}