@fangxinyan/lumina 0.1.6 → 0.2.0

package/dist/styles.css

@@ -277,6 +277,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .btn.sm.icon { width: 30px; padding: 0; }
 .btn.lg { height: 52px; padding: 0 24px; font-size: 15px; border-radius: var(--r-lg); }
 .btn.lg.icon { width: 52px; padding: 0; }
+.btn.block { width: 100%; flex-shrink: 1; }
 .btn[disabled], .btn.disabled, .btn:disabled {
   color: var(--fg-subtle);
   cursor: not-allowed;
@@ -294,50 +295,113 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: inline-block;
 }
 /* ============ Input / Textarea ============ */
+.input-shell {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+.input-count {
+  font-size: 11px;
+  color: var(--fg-subtle);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
 .input-wrap {
   position: relative;
   display: inline-flex;
   align-items: center;
   width: 100%;
+  height: var(--ctrl-h);
+  padding: 0 var(--ctrl-pad-x);
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  transition: box-shadow var(--dur) var(--ease);
+  gap: 8px;
 }
+.input-wrap.sm { height: 32px; padding: 0 12px; border-radius: var(--r-sm); gap: 6px; }
+.input-wrap.lg { height: 48px; padding: 0 18px; border-radius: var(--r-lg); gap: 10px; }
+.input-wrap:focus-within { box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow); }
+.input-wrap.invalid { box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
+.input-wrap.disabled { opacity: 0.6; cursor: not-allowed; }
 .input-wrap .lead,
 .input-wrap .trail {
-  position: absolute;
   color: var(--fg-subtle);
-  pointer-events: none;
+  flex-shrink: 0;
+  display: inline-flex;
 }
-.input-wrap .lead { left: 14px; }
-.input-wrap .trail { right: 14px; pointer-events: auto; cursor: pointer; }
+.input-wrap .lead.interactive,
+.input-wrap .trail.interactive { cursor: pointer; pointer-events: auto; }
 .input-wrap .trail:hover { color: var(--fg); }
-.input,
-.input-wrap > input {
+.input-wrap .lead:not(.interactive),
+.input-wrap .trail:not(.interactive) { pointer-events: none; }
+.input-wrap .input-affix {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg-muted);
+  font-size: 13px;
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0;
+}
+.input-wrap.sm .input-affix { font-size: 12px; }
+.input-wrap.lg .input-affix { font-size: 14px; }
+.input-wrap .input-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  color: var(--fg-subtle);
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+}
+.input-wrap .input-clear:hover {
+  color: var(--fg);
+  background: var(--bg-sunken);
+}
+.input-wrap > .input {
+  flex: 1;
+  min-width: 0;
   width: 100%;
-  height: var(--ctrl-h);
-  padding: 0 var(--ctrl-pad-x);
+  height: 100%;
+  padding: 0;
   border: none;
-  border-radius: var(--r-md);
-  background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  background: transparent;
+  box-shadow: none;
   color: var(--fg);
   font-size: 13px;
   font-family: inherit;
   outline: none;
-  transition: box-shadow var(--dur) var(--ease);
 }
-.input-wrap:has(.lead) > input,
-.input-wrap.with-leading > input { padding-left: 40px; }
-.input-wrap:has(.trail) > input,
-.input-wrap.with-trailing > input { padding-right: 40px; }
-.input:focus,
-.input-wrap > input:focus { box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow); }
-.input::placeholder,
-.input-wrap > input::placeholder { color: var(--fg-subtle); }
-.input[disabled],
-.input-wrap.disabled > input { opacity: 0.6; cursor: not-allowed; }
-.input-wrap.invalid > input,
-.input.invalid { box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
-.input-wrap.sm > input { height: 32px; padding-left: 12px; padding-right: 12px; font-size: 12px; border-radius: var(--r-sm); }
-.input-wrap.lg > input { height: 48px; padding-left: 18px; padding-right: 18px; font-size: 14px; border-radius: var(--r-lg); }
+.input-wrap.sm > .input { font-size: 12px; }
+.input-wrap.lg > .input { font-size: 14px; }
+.input-wrap > .input::placeholder { color: var(--fg-subtle); }
+.input-wrap.disabled > .input { cursor: not-allowed; }
+.textarea-wrap { position: relative; width: 100%; }
+.textarea-wrap .textarea-clear {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  color: var(--fg-subtle);
+  background: transparent;
+  cursor: pointer;
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+}
+.textarea-wrap .textarea-clear:hover {
+  color: var(--fg);
+  background: var(--bg-sunken);
+}
 .textarea {
   width: 100%;
   min-height: 96px;
@@ -385,6 +449,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .switch.sm { --w: 36px; --h: 20px; }
 .switch.lg { --w: 58px; --h: 32px; }
+/* When checkedChildren / unCheckedChildren are present, widen the track to fit. */
+.switch.with-children { --w: 60px; }
+.switch.with-children.sm { --w: 46px; }
+.switch.with-children.lg { --w: 74px; }
 .switch-thumb {
   position: absolute;
   top: 3px;
@@ -395,12 +463,54 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: var(--bg-raised);
   box-shadow: var(--neu-out-sm);
   transition: all var(--dur) var(--ease);
+  z-index: 1;
 }
 .switch.on .switch-thumb {
   transform: translateX(calc(var(--w) - var(--h)));
   background: var(--accent);
   box-shadow: 0 2px 8px var(--accent-glow), 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
 }
+/* Inline content (checkedChildren / unCheckedChildren) */
+.switch-inner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  line-height: 1;
+  pointer-events: none;
+}
+.switch.sm .switch-inner { font-size: 10px; }
+.switch-inner-on,
+.switch-inner-off {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+/* Checked label sits on the left side of the track (thumb pushes right). */
+.switch-inner-on {
+  left: 8px;
+  right: calc(var(--h) - 2px);
+  color: white;
+  opacity: 0;
+  transform: translateX(-4px);
+}
+/* Unchecked label sits on the right side (thumb is at left). */
+.switch-inner-off {
+  right: 8px;
+  left: calc(var(--h) - 2px);
+  color: var(--fg-muted);
+  opacity: 1;
+  transform: translateX(0);
+}
+.switch.sm .switch-inner-on { left: 5px; right: calc(var(--h) - 2px); }
+.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 {
   display: inline-flex;
@@ -480,6 +590,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   align-items: center;
   cursor: pointer;
 }
+.slider.has-marks { padding-bottom: 26px; }
 .slider.disabled { opacity: 0.5; cursor: not-allowed; }
 .slider-track {
   position: relative;
@@ -492,11 +603,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .slider-fill {
   position: absolute;
-  top: 0; left: 0; bottom: 0;
+  top: 0; bottom: 0;
   background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 70%, white), var(--accent));
   box-shadow: 0 0 12px var(--accent-glow);
   border-radius: 999px;
-  transition: width var(--dur-fast) var(--ease);
+  transition: left var(--dur-fast) var(--ease), right var(--dur-fast) var(--ease);
 }
 .slider-thumb {
   position: absolute;
@@ -508,7 +619,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transform: translate(-50%, -50%);
   transition: all var(--dur-fast) var(--ease);
   display: grid; place-items: center;
+  pointer-events: none;
 }
+.slider.has-marks .slider-thumb { top: calc(50% - 13px); }
+.slider.has-marks .slider-track { margin-top: -26px; }
 .slider-thumb::after {
   content: "";
   width: 6px; height: 6px;
@@ -522,7 +636,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%; height: 100%;
   opacity: 0;
   cursor: inherit;
+  margin: 0;
+  pointer-events: auto;
 }
+/* In range mode (two stacked inputs), split the hit zones by half so the user can drag either thumb */
+.slider input[type="range"]:nth-of-type(1):not(:only-of-type) { right: 50%; }
+.slider input[type="range"]:nth-of-type(2) { left: 50%; }
+.slider.has-marks input[type="range"] { height: calc(100% - 26px); }
 .slider-value { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); margin-left: 10px; }
 .slider.success .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--success) 70%, white), var(--success)); box-shadow: 0 0 10px color-mix(in oklch, var(--success) 35%, transparent); }
 .slider.success .slider-thumb::after { background: var(--success); }
@@ -530,6 +650,44 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .slider.warning .slider-thumb::after { background: var(--warning); }
 .slider.danger  .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 70%, white), var(--danger));  box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 35%, transparent); }
 .slider.danger  .slider-thumb::after { background: var(--danger); }
+/* Marks */
+.slider-marks {
+  position: absolute;
+  left: 0; right: 0;
+  bottom: 0;
+  height: 22px;
+  pointer-events: none;
+}
+.slider-mark {
+  position: absolute;
+  transform: translateX(-50%);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  pointer-events: auto;
+  cursor: pointer;
+  color: var(--fg-subtle);
+  font-size: 11px;
+  user-select: none;
+}
+.slider-mark-dot {
+  width: 6px; height: 6px;
+  border-radius: 999px;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  margin-top: -18px;
+  position: relative;
+  z-index: 1;
+}
+.slider-mark.active .slider-mark-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
+.slider.success .slider-mark.active .slider-mark-dot { background: var(--success); box-shadow: 0 0 6px color-mix(in oklch, var(--success) 35%, transparent); }
+.slider.warning .slider-mark.active .slider-mark-dot { background: var(--warning); box-shadow: 0 0 6px color-mix(in oklch, var(--warning) 35%, transparent); }
+.slider.danger  .slider-mark.active .slider-mark-dot { background: var(--danger);  box-shadow: 0 0 6px color-mix(in oklch, var(--danger) 35%, transparent); }
+.slider-mark-label { white-space: nowrap; }
+.slider-mark.active .slider-mark-label { color: var(--accent-ink); font-weight: 500; }
+.slider-mark:hover .slider-mark-label { color: var(--fg); }
+.slider.disabled .slider-mark { pointer-events: none; }
 /* ============ Progress ============ */
 .progress {
   width: 100%;
@@ -616,7 +774,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .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.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 .x { cursor: pointer; color: var(--fg-subtle); margin-left: 2px; display: inline-flex; }
 .tag .x:hover { color: var(--fg); }
 .badge {
@@ -658,6 +818,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .avatar.sm { --size: 28px; }
 .avatar.lg { --size: 56px; }
 .avatar.xl { --size: 80px; }
+.avatar.square { border-radius: var(--r-md); }
+.avatar.square.sm { border-radius: var(--r-sm); }
+.avatar.square.lg,
+.avatar.square.xl { border-radius: var(--r-lg); }
 .avatar img { width: 100%; height: 100%; object-fit: cover; }
 .avatar-status {
   position: absolute;
@@ -701,6 +865,28 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .divider.sunken:has(.divider-label) { background: transparent; box-shadow: none; }
 .divider.sunken:has(.divider-label)::before,
 .divider.sunken:has(.divider-label)::after { height: 2px; background: transparent; box-shadow: var(--neu-in-sm); }
+/* ---- Dashed variant ---- */
+.divider.dashed {
+  background: transparent;
+  box-shadow: none;
+  border-top: 1px dashed var(--divider);
+  border-radius: 0;
+  height: 0;
+}
+.divider.dashed.vertical {
+  width: 0;
+  border-top: none;
+  border-left: 1px dashed var(--divider);
+}
+.divider.dashed:has(.divider-label) { border-top: none; }
+.divider.dashed:has(.divider-label)::before,
+.divider.dashed:has(.divider-label)::after {
+  background: transparent;
+  box-shadow: none;
+  border-top: 1px dashed var(--divider);
+  height: 0;
+  border-radius: 0;
+}
 .divider-label {
   display: flex; align-items: center; gap: 12px;
   height: auto; background: transparent; box-shadow: none;
@@ -724,6 +910,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: 999px;
   box-shadow: 0 1px 0 var(--shadow-light);
 }
+/* ---- Label orientation ---- */
+.divider.orient-left::before { flex: 0 0 var(--gap-4); }
+.divider.orient-left::after { flex: 1; }
+.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 {
   background: var(--bg);
@@ -736,6 +928,16 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .card.pad-none { padding: 0; }
 .card.pad-sm   { padding: var(--gap-3); }
 .card.pad-lg   { padding: var(--gap-6); }
+.card.hoverable {
+  cursor: pointer;
+  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
+}
+.card.hoverable:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--neu-out-lg);
+}
+.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);
@@ -809,6 +1011,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: var(--accent); border-radius: 999px;
   box-shadow: 0 0 8px var(--accent-glow);
 }
+/* Centered nav — works for pill / segmented (self-align) and line (flex-center) */
+.tabs.centered .tabs-nav { align-self: center; }
+.tabs.centered.line .tabs-nav,
+.tabs.centered.underline .tabs-nav { align-self: stretch; justify-content: center; }
+.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 {
@@ -851,6 +1059,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: var(--neu-out-sm);
   overflow: hidden;
 }
+.accordion-item.disabled { opacity: 0.5; }
 .accordion-head {
   width: 100%;
   border: none;
@@ -866,6 +1075,8 @@ 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 {
   max-height: 0;
   overflow: hidden;
@@ -876,10 +1087,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .accordion-item.open .accordion-body { max-height: 320px; }
 .accordion-body-inner { padding: 0 18px 16px; }
 .accordion-chev {
-  transition: transform var(--dur) var(--ease);
+  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
   color: var(--fg-subtle);
   display: inline-flex;
+  border-radius: 6px;
+  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); }
 /* ============ Select ============ */
 .select {
@@ -1402,6 +1617,15 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .alert-desc  { font-size: 12px; color: var(--fg-muted); line-height: 1.55; }
 .alert.no-title { align-items: center; }
 .alert.no-title .alert-ico { margin-top: 0; }
+.alert.no-icon { gap: 0; }
+.alert-action {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+.alert:has(.alert-close) .alert-action { margin-right: 26px; }
 .alert-close {
   position: absolute; top: 10px; right: 10px;
   width: 22px; height: 22px; border-radius: 7px;
@@ -1424,6 +1648,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: var(--neu-in-sm);
   overflow: auto;
 }
+/* When scroll=y is on, the wrap itself becomes the scroll region. */
+.table-wrap.scroll-y { overflow-y: auto; }
+.table-wrap.scroll-x { overflow-x: auto; }
 .table {
   width: 100%;
   border-collapse: separate;
@@ -1443,8 +1670,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   position: sticky; top: 0;
   z-index: 1;
 }
+/* When the wrap is the scroll container (scroll.y), position:sticky on th needs
+   top:0 relative to the wrap — browsers already handle that. Adding a stronger
+   bg so content under the header doesn't bleed through. */
+.table.sticky-head th { background: var(--bg); }
 .table th.sortable { cursor: pointer; user-select: none; }
 .table th.sortable:hover { color: var(--fg); }
+.table th .th-label { vertical-align: middle; }
 .table th .sort-ind {
   display: inline-flex;
   width: 16px; height: 16px;
@@ -1505,8 +1737,142 @@ input, textarea, select { font-family: inherit; color: inherit; }
   box-shadow: 0 4px 8px var(--shadow-dark), 0 -4px 8px var(--shadow-light);
 }
 .table.cards.hoverable tbody tr:hover td { background: var(--bg); transform: translateY(-1px); }
-.table .row-check { width: 36px; }
+.table .row-check { width: 44px; }
+.table .row-check .checkbox { display: inline-flex; }
+.table .row-expand { width: 40px; text-align: center; }
 .table-empty { padding: 60px 20px; text-align: center; color: var(--fg-muted); }
+/* Expand button */
+.expand-btn {
+  width: 22px; height: 22px;
+  border: none;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  box-shadow: var(--neu-flat);
+  color: var(--fg-subtle);
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.expand-btn:hover { color: var(--accent-ink); box-shadow: var(--neu-out-sm); }
+.expand-btn.open { transform: rotate(90deg); color: var(--accent-ink); box-shadow: var(--neu-in-sm); }
+/* Expanded row panel */
+.table tbody tr.expanded-row td {
+  padding: 0 18px 14px 18px;
+  border-bottom: 1px solid var(--divider);
+  background: color-mix(in oklch, var(--bg-sunken) 25%, transparent);
+}
+.expanded-panel {
+  padding: 14px 16px;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  color: var(--fg);
+  font-size: 13px;
+}
+/* Radio-style row selector */
+.table .row-check .radio-dot {
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  transition: box-shadow var(--dur-fast) var(--ease);
+}
+.table .row-check .radio-dot:disabled { opacity: 0.5; cursor: not-allowed; }
+.table .row-check .radio-dot.checked {
+  box-shadow: var(--neu-out-sm);
+}
+.table .row-check .radio-dot.checked::after {
+  content: "";
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+/* Filter button on header */
+.table th.filterable .filter-ind {
+  display: inline-flex;
+  width: 18px; height: 18px;
+  border-radius: 5px;
+  background: var(--bg);
+  box-shadow: var(--neu-flat);
+  color: var(--fg-subtle);
+  align-items: center; justify-content: center;
+  margin-left: 6px;
+  cursor: pointer;
+  border: none;
+  vertical-align: middle;
+  padding: 0;
+  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+}
+.table th.filterable .filter-ind:hover { color: var(--fg); }
+.table th.filterable .filter-ind.active {
+  color: var(--accent-ink);
+  box-shadow: var(--neu-in-sm);
+}
+/* Filter popover panel (portaled to body) */
+.table-filter-panel {
+  z-index: 1001;
+  min-width: 200px;
+  max-width: 260px;
+  background: var(--bg);
+  border-radius: var(--r-md);
+  box-shadow: var(--neu-out-lg);
+  padding: 10px;
+  animation: menuIn var(--dur) var(--ease);
+}
+.table-filter-options {
+  display: flex;
+  flex-direction: column;
+  max-height: 220px;
+  overflow-y: auto;
+  gap: 4px;
+  padding: 4px;
+}
+.table-filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--r-sm);
+  font-size: 13px;
+  color: var(--fg);
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease);
+}
+.table-filter-item:hover {
+  background: color-mix(in oklch, var(--accent-soft) 40%, transparent);
+}
+.table-filter-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--divider);
+}
+.table-filter-actions .tf-btn {
+  border: none;
+  padding: 6px 12px;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--fg);
+  cursor: pointer;
+  transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.table-filter-actions .tf-btn:hover { box-shadow: var(--neu-in-sm); }
+.table-filter-actions .tf-btn.primary { color: var(--accent-ink); font-weight: 600; }
+.table-filter-actions .tf-btn.ghost { color: var(--fg-muted); box-shadow: var(--neu-flat); }
+.table-filter-actions .tf-btn.ghost:hover { box-shadow: var(--neu-in-sm); }
+/* Built-in pagination bar */
+.table-pagination {
+  margin-top: 12px;
+}
 /* Pro: card-wrap with toolbar + table + footer */
 .table-card {
   border-radius: var(--r-lg);
@@ -1516,6 +1882,13 @@ 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;
+  border-top: 1px solid var(--divider);
+  background: color-mix(in oklch, var(--bg-sunken) 30%, transparent);
+}
 .table-toolbar {
   display: flex;
   align-items: center;
@@ -1581,6 +1954,37 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .pagination .pg.disabled { color: var(--fg-subtle); cursor: not-allowed; box-shadow: var(--neu-flat); }
 .pagination .ellipsis { padding: 0 4px; color: var(--fg-subtle); }
+/* size changer — compact Select inline with the page buttons */
+.pagination .pg-size-changer { margin-left: 8px; min-width: 108px; }
+/* quick jumper */
+.pagination .pg-jumper {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 8px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+.pagination .pg-jumper-label { color: var(--fg-muted); }
+.pagination .pg-jumper-input {
+  width: 44px;
+  height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+  transition: box-shadow var(--dur-fast) var(--ease);
+}
+.pagination .pg-jumper-input:focus-visible {
+  box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow);
+}
 /* ============ List ============ */
 .list {
   display: flex;
@@ -1739,6 +2143,27 @@ 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;
+  gap: 16px;
+  width: 100%;
+}
+.skeleton-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.skeleton-box .skeleton-title {
+  display: block;
+  margin-bottom: 4px;
+}
+.skeleton-box .skeleton-row {
+  display: block;
+}
 /* ============ Calendar ============ */
 .calendar {
   background: var(--bg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fangxinyan/lumina",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Lumina — Neumorphic component library for Electron & React apps",
   "type": "module",
   "main": "./dist/index.cjs",