@fangxinyan/lumina 0.6.1 → 0.6.3

package/dist/styles.css

@@ -219,7 +219,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   gap: 8px;
   height: var(--ctrl-h);
   padding: 0 var(--ctrl-pad-x);
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--r-md);
   font-size: 13px;
   font-weight: 500;
@@ -231,55 +231,67 @@ input, textarea, select { font-family: inherit; color: inherit; }
   user-select: none;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: all var(--dur-fast) var(--ease);
+  transition:
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+.btn > svg,
+.btn-icon-slot {
+  flex-shrink: 0;
+}
+.btn-icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.btn-icon-slot img {
+  display: block;
+  max-width: 1.25em;
+  max-height: 1.25em;
+  object-fit: contain;
 }
-.btn > svg { flex-shrink: 0; }
 .btn.icon {
   flex-shrink: 0;
   overflow: visible;
 }
-.btn:hover { color: var(--accent-ink); }
-.btn:active, .btn.pressed {
-  box-shadow: var(--neu-in-sm);
-  color: var(--accent-ink);
-}
 .btn.primary {
   color: var(--accent-ink);
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 80%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent-soft) 92%, var(--bg)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 60%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 15%, transparent);
+  background: color-mix(in oklch, var(--accent-soft) 62%, var(--bg));
   font-weight: 600;
 }
-.btn.primary:hover {
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 70%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent) 18%, var(--accent-soft)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 70%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 20%, transparent),
-    0 0 16px -6px var(--accent-glow);
-}
-.btn.primary:active, .btn.primary.pressed {
-  box-shadow:
-    inset 2px 2px 4px color-mix(in oklch, var(--accent) 25%, var(--shadow-dark)),
-    inset -1px -1px 2px var(--shadow-light);
-  transform: none;
-}
 .btn.ghost {
   background: transparent;
   box-shadow: none;
   color: var(--fg-muted);
 }
-.btn.ghost:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--fg); }
 .btn.danger { color: var(--danger); }
-.btn.danger:hover { color: var(--danger); }
+.btn:hover {
+  box-shadow: var(--neu-out);
+}
+.btn.ghost:hover {
+  background: var(--bg);
+  border-color: transparent;
+  box-shadow: var(--neu-flat);
+  color: var(--fg);
+}
+.btn.danger:hover {
+  color: var(--danger);
+}
+.btn:active,
+.btn.pressed {
+  box-shadow: var(--neu-in);
+}
+.btn.ghost:active,
+.btn.ghost.pressed {
+  background: var(--bg);
+  color: var(--fg);
+}
+.btn.danger:active,
+.btn.danger.pressed {
+  color: var(--danger);
+}
 .btn.icon { width: var(--ctrl-h); padding: 0; }
 .btn.sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--r-sm); }
 .btn.sm.icon { width: 30px; padding: 0; }
@@ -289,10 +301,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .btn[disabled], .btn.disabled, .btn:disabled {
   color: var(--fg-subtle);
   cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: var(--neu-flat);
+  transform: none;
+}
+.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover {
+  color: var(--fg-subtle);
+  background: var(--bg);
+  border-color: transparent;
   box-shadow: var(--neu-flat);
   transform: none;
 }
-.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover { transform: none; color: var(--fg-subtle); background: var(--bg); }
 .btn.loading { cursor: wait; }
 .btn .spinner {
   width: 14px; height: 14px;
@@ -302,7 +321,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   animation: spin 0.8s linear infinite;
   display: inline-block;
 }
-/* ============ Input / Textarea ============ */
+/* ============ Input ============ */
 .input-shell {
   display: inline-flex;
   flex-direction: column;
@@ -338,6 +357,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg-subtle);
   flex-shrink: 0;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.input-wrap .lead img,
+.input-wrap .trail img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 .input-wrap .lead.interactive,
 .input-wrap .trail.interactive { cursor: pointer; pointer-events: auto; }
@@ -372,6 +401,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg);
   background: var(--bg-sunken);
 }
+.input-password-toggle {
+  border: none;
+  background: transparent;
+  color: var(--fg-subtle);
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+.input-password-toggle:hover { color: var(--fg); }
 .input-wrap > .input {
   flex: 1;
   min-width: 0;
@@ -390,6 +432,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .input-wrap.lg > .input { font-size: 14px; }
 .input-wrap > .input::placeholder { color: var(--fg-subtle); }
 .input-wrap.disabled > .input { cursor: not-allowed; }
+/* ============ Textarea ============ */
+.textarea-shell {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+.textarea-count {
+  font-size: 11px;
+  color: var(--fg-subtle);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
 .textarea-wrap { position: relative; width: 100%; }
 .textarea-wrap .textarea-clear {
   position: absolute;
@@ -519,8 +574,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .switch.sm .switch-inner-off { right: 5px; left: calc(var(--h) - 2px); }
 .switch.on .switch-inner-on { opacity: 1; transform: translateX(0); }
 .switch.on .switch-inner-off { opacity: 0; transform: translateX(4px); }
-/* ============ Checkbox & Radio ============ */
-.checkbox, .radio {
+/* ============ Checkbox ============ */
+.checkbox {
   display: inline-flex;
   align-items: center;
   gap: 10px;
@@ -529,7 +584,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-size: 13px;
   color: var(--fg);
 }
-.checkbox.disabled, .radio.disabled { opacity: 0.5; cursor: not-allowed; }
+.checkbox.disabled { opacity: 0.5; cursor: not-allowed; }
 .checkbox-box {
   width: 20px; height: 20px;
   border: none;
@@ -541,7 +596,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   place-items: center;
   flex-shrink: 0;
   cursor: inherit;
-  color: white;
+  color: var(--bg);
   transition: all var(--dur) var(--ease);
 }
 .checkbox-box svg { opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
@@ -557,10 +612,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .checkbox.indeterminate .checkbox-box::after {
   content: "";
   width: 10px; height: 2px;
-  background: white;
+  background: var(--bg);
   border-radius: 2px;
 }
 .checkbox.indeterminate .checkbox-box svg { display: none; }
+/* ============ Radio ============ */
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  color: var(--fg);
+}
+.radio.disabled { opacity: 0.5; cursor: not-allowed; }
 .radio-dot {
   width: 20px; height: 20px;
   border: none;
@@ -584,11 +650,62 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transform: translate(-50%, -50%);
   width: 8px; height: 8px;
   border-radius: 999px;
-  background: white;
+  background: var(--bg);
 }
 .radio-group { display: flex; gap: 14px; }
 .radio-group.vertical { flex-direction: column; gap: 10px; }
 .radio-group.horizontal { flex-direction: row; flex-wrap: wrap; }
+.radio-group.segmented {
+  position: relative;
+  display: inline-flex;
+  padding: 4px;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  gap: 2px;
+  flex-wrap: nowrap;
+}
+.radio-group.segmented .radio {
+  position: relative;
+  z-index: 1;
+  height: 32px;
+  padding: 6px 14px;
+  border-radius: calc(var(--r-md) - 4px);
+  color: var(--fg-muted);
+  font-size: 12px;
+  gap: 6px;
+  transition: all var(--dur-fast) var(--ease);
+}
+.radio-group.segmented .radio:hover { color: var(--fg); }
+.radio-group.segmented .radio.checked {
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+.radio-group.segmented .radio-dot { display: none; }
+.radio-group.segmented .radio-label { line-height: 1; }
+.radio-group.segmented .radio.disabled { opacity: 0.4; }
+.radio-group.segmented.sm .radio { height: 26px; padding: 4px 10px; font-size: 11px; }
+.radio-group.segmented.lg .radio { height: 38px; padding: 8px 18px; font-size: 13px; }
+.radio-segment-thumb {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  border-radius: calc(var(--r-md) - 4px);
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  pointer-events: none;
+  transition:
+    transform var(--dur-slow) var(--ease),
+    width var(--dur-slow) var(--ease),
+    opacity var(--dur-fast) var(--ease);
+  will-change: transform, width;
+}
+@media (prefers-reduced-motion: reduce) {
+  .radio-segment-thumb {
+    transition: none;
+  }
+}
 /* ============ Slider ============ */
 .slider {
   position: relative;
@@ -789,7 +906,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   );
   pointer-events: none;
 }
-/* ============ Tag & Badge ============ */
+/* ============ Tag ============ */
 .tag {
   display: inline-flex;
   align-items: center;
@@ -808,16 +925,30 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tag.success { color: var(--success); }
 .tag.warning { color: var(--warning); }
 .tag.danger  { color: var(--danger); }
-.tag.solid          { background: var(--accent); color: white; box-shadow: 0 2px 6px var(--accent-glow); }
-.tag.solid.info     { background: var(--info);    color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--info) 35%, transparent); }
-.tag.solid.success  { background: var(--success); color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--success) 35%, transparent); }
-.tag.solid.warning  { background: var(--warning); color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--warning) 35%, transparent); }
-.tag.solid.danger   { background: var(--danger);  color: white; box-shadow: 0 2px 6px color-mix(in oklch, var(--danger) 35%, transparent); }
+.tag.solid          { background: var(--accent); color: var(--bg); box-shadow: 0 2px 6px var(--accent-glow); }
+.tag.solid.info     { background: var(--info);    color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--info) 35%, transparent); }
+.tag.solid.success  { background: var(--success); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--success) 35%, transparent); }
+.tag.solid.warning  { background: var(--warning); color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--warning) 35%, transparent); }
+.tag.solid.danger   { background: var(--danger);  color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--danger) 35%, transparent); }
 .tag.borderless { background: transparent; box-shadow: none; }
 .tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
-.tag .tag-ico { color: currentColor; display: inline-flex; }
+.tag .tag-ico {
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.tag .tag-ico img {
+  display: block;
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
 .tag .x { cursor: pointer; color: var(--fg-subtle); margin-left: 2px; display: inline-flex; }
 .tag .x:hover { color: var(--fg); }
+/* ============ Badge ============ */
 .badge {
   display: inline-flex;
   align-items: center; justify-content: center;
@@ -827,8 +958,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-size: 10px;
   font-weight: 700;
   background: var(--danger);
-  color: white;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+  color: var(--bg);
+  box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-dark) 35%, transparent);
   font-variant-numeric: tabular-nums;
 }
 .badge.dot { min-width: 10px; height: 10px; padding: 0; }
@@ -836,7 +967,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .badge.info    { background: var(--info);    box-shadow: 0 1px 4px color-mix(in oklch, var(--info) 35%, transparent); }
 .badge.success { background: var(--success); box-shadow: 0 1px 4px color-mix(in oklch, var(--success) 35%, transparent); }
 .badge.warning { background: var(--warning); box-shadow: 0 1px 4px color-mix(in oklch, var(--warning) 35%, transparent); }
-.badge.neutral { background: var(--fg-muted); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
+.badge.neutral { background: var(--fg-muted); box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-dark) 35%, transparent); }
 .badge-wrap { position: relative; display: inline-block; }
 .badge-wrap > .badge { position: absolute; top: -4px; right: -4px; }
 /* ============ Avatar ============ */
@@ -955,7 +1086,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .divider.orient-right::before { flex: 1; }
 .divider.orient-right::after { flex: 0 0 var(--gap-4); }
 /* center is default (both flex: 1) */
-/* ============ Card & Panel ============ */
+/* ============ Card ============ */
 .card {
   background: var(--bg);
   border-radius: var(--r-lg);
@@ -977,21 +1108,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .card.hoverable.flat:hover { box-shadow: var(--neu-out-sm); }
 .card.hoverable.sunken:hover { box-shadow: var(--neu-out); }
-.panel {
-  background: var(--bg);
-  border-radius: var(--r-lg);
-  box-shadow: var(--neu-out);
-  padding: var(--gap-5);
-}
-.panel-head {
+.card-head {
   display: flex; align-items: flex-start; justify-content: space-between;
   gap: var(--gap-3); margin-bottom: var(--gap-4);
 }
-.panel-titles { display: flex; flex-direction: column; gap: 2px; }
-.panel-title { font-size: 15px; font-weight: 600; }
-.panel-desc  { font-size: 12px; color: var(--fg-muted); }
-.panel-actions { display: flex; gap: 6px; }
-.panel-body { font-size: 13px; }
+.card-titles { display: flex; flex-direction: column; gap: 2px; }
+.card-title { font-size: 15px; font-weight: 600; }
+.card-desc  { font-size: 12px; color: var(--fg-muted); }
+.card-actions { display: flex; gap: 6px; }
+.card-body { font-size: 13px; }
 /* ============ Tabs ============ */
 .tabs { display: flex; flex-direction: column; gap: var(--gap-3); }
 .tabs-nav {
@@ -1057,49 +1182,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tabs.centered.line .tabs-nav .tab,
 .tabs.centered.underline .tabs-nav .tab { margin-right: 11px; margin-left: 11px; }
 .tabs-content { padding: var(--gap-2) 0; }
-/* Segmented (owned by Tabs.tsx — Segmented is co-exported) */
-.segmented {
-  display: inline-flex;
-  padding: 4px;
-  border-radius: var(--r-md);
-  background: var(--bg);
-  box-shadow: var(--neu-in-sm);
-  gap: 2px;
-}
-.segmented .seg {
-  padding: 6px 14px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: none;
-  background: transparent;
-  border-radius: calc(var(--r-md) - 4px);
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--fg-muted);
-  cursor: pointer;
-  transition: all var(--dur-fast) var(--ease);
-}
-.segmented .seg:hover { color: var(--fg); }
-.segmented .seg.active {
-  color: var(--accent-ink);
-  background: var(--bg);
-  box-shadow: var(--neu-out-sm);
-  font-weight: 600;
-}
-.segmented.sm .seg { height: 26px; padding: 4px 10px; font-size: 11px; }
-.segmented.lg .seg { height: 38px; padding: 8px 18px; font-size: 13px; }
-/* ============ Accordion ============ */
-.accordion { display: flex; flex-direction: column; gap: 10px; }
-.accordion-item {
+/* ============ Collapse ============ */
+.collapse { display: flex; flex-direction: column; gap: 10px; }
+.collapse-item {
   background: var(--bg);
   border-radius: var(--r-md);
   box-shadow: var(--neu-out-sm);
   overflow: hidden;
 }
-.accordion-item.disabled { opacity: 0.5; }
-.accordion-head {
+.collapse.ghost .collapse-item {
+  background: transparent;
+  box-shadow: none;
+  border-radius: var(--r-sm);
+}
+.collapse-item.disabled { opacity: 0.5; }
+.collapse-head {
   width: 100%;
   border: none;
   background: transparent;
@@ -1114,26 +1211,30 @@ input, textarea, select { font-family: inherit; color: inherit; }
   color: var(--fg);
   text-align: left;
 }
-.accordion-item.disabled .accordion-head { cursor: not-allowed; }
-.accordion-item.icon-only .accordion-head:not(:disabled) { cursor: default; }
-.accordion-body {
+.collapse.small .collapse-head { padding: 10px 14px; font-size: 12px; }
+.collapse.large .collapse-head { padding: 18px 22px; font-size: 14px; }
+.collapse-item.disabled .collapse-head { cursor: not-allowed; }
+.collapse-item.icon-only .collapse-head:not(:disabled) { cursor: default; }
+.collapse-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--dur) var(--ease);
   color: var(--fg-muted);
   font-size: 13px;
 }
-.accordion-body-inner { padding: 0 18px 16px; }
-.accordion-chev {
+.collapse-body-inner { padding: 0 18px 16px; }
+.collapse.small .collapse-body-inner { padding: 0 14px 12px; }
+.collapse.large .collapse-body-inner { padding: 0 22px 20px; }
+.collapse-chev {
   transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
   color: var(--fg-subtle);
   display: inline-flex;
-  border-radius: 6px;
+  border-radius: var(--r-xs);
   padding: 2px;
 }
-.accordion-chev.clickable { cursor: pointer; }
-.accordion-chev.clickable:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
-.accordion-item.open .accordion-chev { transform: rotate(180deg); color: var(--accent); }
+.collapse-chev.clickable { cursor: pointer; }
+.collapse-chev.clickable:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
+.collapse-item.open .collapse-chev { transform: rotate(180deg); color: var(--accent); }
 /* ============ Select ============ */
 .select {
   position: relative;
@@ -1169,11 +1270,36 @@ input, textarea, select { font-family: inherit; color: inherit; }
   flex: 1;
   min-width: 0;
 }
-.select-value > span {
+.select-value-label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.select-icon,
+.menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.select-icon img,
+.menu-item-icon img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+.select.sm .select-icon img,
+.select.sm .menu-item-icon img {
+  width: 14px;
+  height: 14px;
+}
+.select.lg .select-icon img,
+.select.lg .menu-item-icon img {
+  width: 18px;
+  height: 18px;
+}
 .select.invalid .select-trigger {
   box-shadow: var(--neu-out-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
 }
@@ -1261,32 +1387,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 /* Menu search — flush with menu, single subtle separator (no nested frame) */
 .menu-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 32px;
-  padding: 0 6px;
+  display: block;
+  padding: 4px 2px 8px;
   margin: -2px -2px 4px;
   border-bottom: 1px solid var(--divider);
-  color: var(--fg-subtle);
-  transition: color var(--dur) var(--ease);
-}
-.menu-search:focus-within { color: var(--accent); }
-.menu-search input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--fg);
-  font-size: 13px;
-  font-family: inherit;
-  height: 100%;
-  padding: 0;
 }
-.menu-search input::placeholder { color: var(--fg-subtle); }
-.menu-search input:focus,
-.menu-search input:focus-visible { box-shadow: none; }
+.menu-search .input-wrap { width: 100%; }
 /* Menu state (loading / empty) */
 .menu-state {
   display: flex;
@@ -1311,8 +1417,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .menu-state .menu-state-ico .spinner {
   width: 16px;
   height: 16px;
+  display: inline-block;
+  border-radius: 999px;
+  border: 2px solid var(--accent);
   border-color: var(--accent);
   border-right-color: transparent;
+  animation: spin 0.8s linear infinite;
 }
 /* Option body — supports description line under label */
 .menu-item-body {
@@ -1459,6 +1569,29 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: var(--bg);
   box-shadow: var(--neu-flat);
 }
+.modal-static-body {
+  display: flex;
+  gap: var(--gap-3);
+  align-items: flex-start;
+}
+.modal-static-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--r-md);
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  color: var(--accent);
+}
+.modal-static-icon.success { color: var(--success); }
+.modal-static-icon.warning { color: var(--warning); }
+.modal-static-icon.error { color: var(--danger); }
+.modal-static-content {
+  min-width: 0;
+  color: var(--fg-muted);
+}
 /* ============ Drawer ============ */
 .drawer-overlay {
   position: fixed;
@@ -1575,8 +1708,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   animation: fadeIn var(--dur) var(--ease);
   z-index: 1000;
 }
-/* ============ Toast ============ */
-.toast-container {
+/* ============ Message ============ */
+.message-container {
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -1584,12 +1717,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
   z-index: 300;
   pointer-events: none;
 }
-.toast-container.top-right    { top: 56px; right: 20px; }
-.toast-container.top-left     { top: 56px; left: 20px; }
-.toast-container.bottom-right { bottom: 20px; right: 20px; }
-.toast-container.bottom-left  { bottom: 20px; left: 20px; }
-.toast-container.top-center   { top: 56px; left: 50%; transform: translateX(-50%); align-items: center; }
-.toast {
+.message-container.top-right    { top: 56px; right: 20px; }
+.message-container.top-left     { top: 56px; left: 20px; }
+.message-container.bottom-right { bottom: 20px; right: 20px; }
+.message-container.bottom-left  { bottom: 20px; left: 20px; }
+.message-container.top-center   { top: 56px; left: 50%; transform: translateX(-50%); align-items: center; }
+.message {
   background: var(--bg);
   border-radius: var(--r-md);
   box-shadow: var(--neu-float);
@@ -1598,28 +1731,28 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: flex; align-items: center; gap: 10px;
   font-size: 13px;
   pointer-events: auto;
-  animation: toastIn var(--dur-slow) var(--ease);
+  animation: messageIn var(--dur-slow) var(--ease);
   border-left: 3px solid var(--accent);
 }
-.toast.success { border-color: var(--success); }
-.toast.warning { border-color: var(--warning); }
-.toast.danger  { border-color: var(--danger); }
-.toast .toast-icon { color: var(--accent); flex-shrink: 0; }
-.toast.success .toast-icon { color: var(--success); }
-.toast.warning .toast-icon { color: var(--warning); }
-.toast.danger  .toast-icon { color: var(--danger); }
-.toast-body { flex: 1; min-width: 0; }
-.toast-title { font-weight: 600; margin-bottom: 2px; }
-.toast-msg { color: var(--fg-muted); font-size: 12px; }
-.toast-close {
+.message.success { border-color: var(--success); }
+.message.warning { border-color: var(--warning); }
+.message.error   { border-color: var(--danger); }
+.message .message-icon { color: var(--accent); flex-shrink: 0; }
+.message.success .message-icon { color: var(--success); }
+.message.warning .message-icon { color: var(--warning); }
+.message.error   .message-icon { color: var(--danger); }
+.message-body { flex: 1; min-width: 0; }
+.message-title { font-weight: 600; margin-bottom: 2px; }
+.message-content { color: var(--fg-muted); font-size: 12px; }
+.message-close {
   background: transparent; border: none;
   color: var(--fg-subtle); cursor: pointer;
   padding: 0 2px; font-family: inherit;
 }
-.toast-close:hover { color: var(--fg); }
-.toast.leaving { animation: toastOut var(--dur) var(--ease) forwards; }
-@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } }
-@keyframes toastOut { to   { opacity: 0; transform: translateX(20px); } }
+.message-close:hover { color: var(--fg); }
+.message.leaving { animation: messageOut var(--dur) var(--ease) forwards; }
+@keyframes messageIn  { from { opacity: 0; transform: translateX(20px); } }
+@keyframes messageOut { to   { opacity: 0; transform: translateX(20px); } }
 /* ============ Popover ============ */
 .popover {
   z-index: 1000;
@@ -1727,6 +1860,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: grid; place-items: center;
   flex-shrink: 0;
   margin-top: 1px;
+  line-height: 0;
+}
+.alert-ico img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 .alert.info    .alert-ico { color: var(--info); }
 .alert.success .alert-ico { color: var(--success); }
@@ -1756,12 +1896,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
 /* ============ Table ============ */
-.table-card {
-  border-radius: var(--r-lg);
-  background: var(--bg);
-  box-shadow: var(--neu-out-sm);
-  overflow: hidden;
-}
 .table-wrap {
   border-radius: var(--r-lg);
   background: var(--bg);
@@ -1993,7 +2127,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .table-pagination {
   margin-top: 12px;
 }
-/* Pro: card-wrap with toolbar + table + footer */
+/* ============ TablePro ============ */
 .table-card {
   border-radius: var(--r-lg);
   background: var(--bg);
@@ -2002,7 +2136,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .table-card .table-wrap { background: transparent; box-shadow: none; border-radius: 0; }
 .table-card .table-wrap.joined { border-radius: 0; }
-/* When TablePro hosts the built-in pagination, seat it inside the card. */
 .table-card .table-pagination {
   margin-top: 0;
   padding: 6px 16px;
@@ -2131,52 +2264,21 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .list-item-desc  { font-size: 12px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .list-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
 .list-item-avatar { display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); flex-shrink: 0; }
-/* ============ Empty / Spinner / Skeleton ============ */
-/* .spinner base — legacy border-ring used internally by Select/Button.
-   The public <Spinner> component always sets a variant class (`ring`|`dots`)
-   which overrides this via the more specific rules below. */
-.spinner {
-  width: 14px; height: 14px;
+/* ============ Spin ============ */
+.spin {
+  width: 14px;
+  height: 14px;
   border-radius: 999px;
   border: 2px solid currentColor;
   border-right-color: transparent;
   animation: spin 0.8s linear infinite;
   display: inline-block;
 }
-.empty {
-  padding: 60px 20px;
-  display: grid; place-items: center;
-  gap: 12px;
-  color: var(--fg-muted);
-  text-align: center;
-}
-.empty.sm { padding: 28px 16px; gap: 8px; }
-.empty.sm .empty-ico { width: 40px; height: 40px; }
-.empty.sm .empty-title { font-size: 13px; }
-.empty.sm .empty-desc  { font-size: 11px; }
-.empty.lg { padding: 96px 24px; gap: 16px; }
-.empty.lg .empty-ico { width: 72px; height: 72px; }
-.empty.lg .empty-title { font-size: 16px; }
-.empty.lg .empty-desc  { font-size: 13px; }
-.empty.subtle .empty-ico { background: transparent; box-shadow: none; }
-.empty-ico {
-  width: 56px; height: 56px;
-  border-radius: var(--r-lg);
-  background: var(--bg);
-  box-shadow: var(--neu-in-sm);
-  display: grid; place-items: center;
-  color: var(--fg-subtle);
-}
-.empty-title { font-size: 14px; font-weight: 600; color: var(--fg); }
-.empty-desc  { font-size: 12px; }
-.empty-action { margin-top: 8px; }
-/* Spinner tones */
-.spinner.accent  { color: var(--accent); }
-.spinner.success { color: var(--success); }
-.spinner.warning { color: var(--warning); }
-.spinner.danger  { color: var(--danger); }
-/* --- Ring variant: neumorphic pressed track + rotating arc --- */
-.spinner.ring {
+.spin.accent  { color: var(--accent); }
+.spin.success { color: var(--success); }
+.spin.warning { color: var(--warning); }
+.spin.danger  { color: var(--danger); }
+.spin.ring {
   position: relative;
   display: inline-block;
   border: none;
@@ -2185,7 +2287,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: var(--neu-in-sm);
   animation: none;
 }
-.spinner.ring::before {
+.spin.ring::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -2197,54 +2299,84 @@ input, textarea, select { font-family: inherit; color: inherit; }
     currentColor 220deg,
     currentColor 340deg,
     transparent 360deg);
-  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
-  mask: radial-gradient(circle, transparent 60%, #000 61%);
+  -webkit-mask: radial-gradient(circle, transparent 60%, currentColor 61%);
+  mask: radial-gradient(circle, transparent 60%, currentColor 61%);
   animation: spin 0.9s linear infinite;
 }
-.spinner.ring.accent::before,
-.spinner.ring.success::before,
-.spinner.ring.warning::before,
-.spinner.ring.danger::before {
+.spin.ring.accent::before,
+.spin.ring.success::before,
+.spin.ring.warning::before,
+.spin.ring.danger::before {
   filter: drop-shadow(0 0 4px color-mix(in oklch, currentColor 50%, transparent));
 }
-/* --- Dots variant: raised neumorphic spheres (container is transparent) --- */
-.spinner.dots {
+.spin.dots {
   display: inline-flex;
   align-items: center;
   gap: 0.34em;
   border: none;
   background: none;
   box-shadow: none;
-  width: auto; height: auto;
+  width: auto;
+  height: auto;
   animation: none;
   line-height: 1;
 }
-.spinner.dots i {
-  width: 0.4em; height: 0.4em;
+.spin.dots i {
+  width: 0.4em;
+  height: 0.4em;
   border-radius: 999px;
   background: radial-gradient(circle at 32% 28%,
-    color-mix(in oklch, currentColor 40%, white),
+    color-mix(in oklch, currentColor 40%, var(--bg)),
     currentColor 62%,
-    color-mix(in oklch, currentColor 82%, black) 100%);
+    color-mix(in oklch, currentColor 82%, var(--fg)) 100%);
   box-shadow:
     0 0.06em 0.14em color-mix(in oklch, currentColor 45%, transparent),
     0 0 0.35em color-mix(in oklch, currentColor 50%, transparent);
   display: inline-block;
-  animation: dot-bounce 1.2s ease-in-out infinite;
+  animation: spin-dot-bounce 1.2s ease-in-out infinite;
 }
-.spinner.dots i:nth-child(2) { animation-delay: 0.15s; }
-.spinner.dots i:nth-child(3) { animation-delay: 0.3s; }
-@keyframes dot-bounce {
+.spin.dots i:nth-child(2) { animation-delay: 0.15s; }
+.spin.dots i:nth-child(3) { animation-delay: 0.3s; }
+@keyframes spin-dot-bounce {
   0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
   40% { transform: translateY(-30%); opacity: 1; }
 }
-.spinner-wrap {
+.spin-wrap {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--fg-muted);
 }
-.spinner-label { font-size: 12px; }
+.spin-label { font-size: 12px; }
+/* ============ Empty ============ */
+.empty {
+  padding: 60px 20px;
+  display: grid; place-items: center;
+  gap: 12px;
+  color: var(--fg-muted);
+  text-align: center;
+}
+.empty.sm { padding: 28px 16px; gap: 8px; }
+.empty.sm .empty-ico { width: 40px; height: 40px; }
+.empty.sm .empty-title { font-size: 13px; }
+.empty.sm .empty-desc  { font-size: 11px; }
+.empty.lg { padding: 96px 24px; gap: 16px; }
+.empty.lg .empty-ico { width: 72px; height: 72px; }
+.empty.lg .empty-title { font-size: 16px; }
+.empty.lg .empty-desc  { font-size: 13px; }
+.empty.subtle .empty-ico { background: transparent; box-shadow: none; }
+.empty-ico {
+  width: 56px; height: 56px;
+  border-radius: var(--r-lg);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  display: grid; place-items: center;
+  color: var(--fg-subtle);
+}
+.empty-title { font-size: 14px; font-weight: 600; color: var(--fg); }
+.empty-desc  { font-size: 12px; }
+.empty-action { margin-top: 8px; }
+/* ============ Skeleton ============ */
 .skeleton {
   display: block;
   background: color-mix(in oklch, var(--accent-soft) 55%, var(--bg-sunken));
@@ -2263,7 +2395,6 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .skeleton.circle { border-radius: 999px; }
 @keyframes skel-wave  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 @keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-/* Composite skeleton — avatar + title + paragraph layout */
 .skeleton-box {
   display: flex;
   align-items: flex-start;
@@ -2360,6 +2491,18 @@ input, textarea, select { font-family: inherit; color: inherit; }
   overflow: hidden;
   line-height: 0;
 }
+.n-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-image.icon {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image-frame {
   position: relative;
   overflow: hidden;
@@ -2367,6 +2510,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: var(--neu-in-sm);
   background: var(--bg-sunken);
 }
+.n-image.raw .n-image-frame {
+  border-radius: 0;
+}
+.n-image.icon .n-image-frame {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed .n-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image img {
   display: block;
   width: 100%;
@@ -2455,6 +2608,61 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: var(--r-lg);
   box-shadow: var(--neu-float);
 }
+/* ============ SpriteImage / LayeredImage ============ */
+.n-sprite-image,
+.n-layered-image {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  padding: 6px;
+  box-shadow: var(--neu-out-sm);
+  overflow: hidden;
+  line-height: 0;
+}
+.n-sprite-image.raw,
+.n-layered-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image.unframed,
+.n-layered-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-frame,
+.n-layered-image-frame {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--r-sm);
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-in-sm);
+}
+.n-sprite-image.raw .n-sprite-image-frame,
+.n-layered-image.raw .n-layered-image-frame {
+  border-radius: 0;
+}
+.n-sprite-image.unframed .n-sprite-image-frame,
+.n-layered-image.unframed .n-layered-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-sprite {
+  display: block;
+  background-repeat: no-repeat;
+  transform-origin: top left;
+}
+.n-layered-image-layer {
+  position: absolute;
+  display: block;
+}
+.n-layered-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 /* ============ Cascader ============ */
 .cascader {
   position: relative;
@@ -2481,6 +2689,24 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .cascader-trigger.placeholder { color: var(--fg-subtle); }
 .cascader.open .cascader-trigger { box-shadow: var(--neu-in-sm); color: var(--accent-ink); }
+.cascader-clear {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  display: inline-grid;
+  place-items: center;
+  color: var(--fg-subtle);
+  opacity: 0;
+  transition: all var(--dur-fast) var(--ease);
+}
+.cascader:hover .cascader-clear { opacity: 1; }
+.cascader-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-in-sm); }
 .cascader-panel {
   z-index: 1000;
   display: flex;
@@ -2491,6 +2717,52 @@ input, textarea, select { font-family: inherit; color: inherit; }
   animation: menuIn var(--dur) var(--ease);
   gap: 4px;
 }
+.cascader-panel.with-search {
+  flex-direction: column;
+  min-width: 320px;
+}
+.cascader-columns {
+  display: flex;
+  gap: 4px;
+}
+.cascader-search {
+  padding: 4px 2px 8px;
+  border-bottom: 1px solid var(--divider);
+}
+.cascader-search-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.cascader-search-item {
+  border: none;
+  background: transparent;
+  color: var(--fg);
+  border-radius: var(--r-sm);
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.cascader-search-item:hover {
+  background: var(--bg);
+  box-shadow: var(--neu-flat);
+  color: var(--accent-ink);
+}
+.cascader-path-sep { color: var(--fg-subtle); }
+.cascader-empty {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
 .cascader-col {
   min-width: 160px;
   max-height: 280px;
@@ -2519,6 +2791,19 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%;
   text-align: left;
 }
+.cascader-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.cascader-icon img {
+  display: block;
+  width: 15px;
+  height: 15px;
+  object-fit: contain;
+}
 .cascader-item:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--accent-ink); }
 .cascader-item.active {
   background: var(--bg);