@muten/shadcn 0.2.9 → 0.2.11

package/kit.css

@@ -771,12 +771,16 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
   .cx-dt td.cx-dt-check { grid-area: c; align-self: center; width: auto; }
   .cx-dt td.cx-dt-who { grid-area: who; }
   .cx-dt td.cx-dt-svc { grid-area: meta; color: var(--muted-foreground); font-size: 13px; }
+  /* the narrow row holds one text column in its place; any other text column gets a line of its own under it */
+  .cx-dt td.cx-dt-svc ~ td.cx-dt-svc { grid-area: auto; grid-column: 2 / -1; }
+  .cx-dt tbody tr { grid-auto-rows: min-content; }
   .cx-dt td.cx-dt-when { display: none; }
   .cx-dt td.cx-dt-st { grid-area: st; justify-self: end; }
   .cx-dt td.cx-dt-num { grid-area: amt; }
   .cx-dt td.cx-dt-act { display: none; }
   .cx-dt-who small { display: none; }
-  .cx-dt td.cx-dt-svc::after { content: " · " attr(data-when); }
+  .cx-dt td.cx-dt-svc[data-when]:not([data-when=""])::after { content: " · " attr(data-when); }
+  .cx-dt td.cx-dt-svc ~ td.cx-dt-svc[data-when]::after { content: none; }
 }
 
 /* ── Board ── */
@@ -5541,3 +5545,18 @@ a.cx-bc-item:hover { color: var(--foreground); }
 /* LangScope: a plain block; its host draws nothing */
 .cx-lang-scope { display: contents; }
 .cx-lang-host { display: none; }
+
+/* ── Field: a field that must be filled says so at its label ── */
+.cn-label.cx-required::after { content: " *"; color: var(--destructive); }
+
+/* ── Alert with an action: the action takes its own column (Nova's absolute corner reserves 72 px, and a wider button
+   covered the title); on a phone it goes under the text ── */
+.style-nova .cn-alert:has(> .cn-alert-action) { padding-right: 10px; grid-template-columns: 1fr auto; }
+.style-nova .cn-alert:has(> :is(svg, .mu-icon)):has(> .cn-alert-action) { grid-template-columns: auto 1fr auto; }
+.style-nova .cn-alert > .cn-alert-action { position: static; grid-column: -2; grid-row: 1 / span 9; align-self: center; margin-left: 8px; }
+@media (max-width: 560px) {
+  .style-nova .cn-alert:has(> .cn-alert-action) { grid-template-columns: 1fr; }
+  .style-nova .cn-alert:has(> :is(svg, .mu-icon)):has(> .cn-alert-action) { grid-template-columns: auto 1fr; }
+  .style-nova .cn-alert > .cn-alert-action { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin: 8px 0 0; }
+  .style-nova .cn-alert:has(> :is(svg, .mu-icon)) > .cn-alert-action { grid-column: 2; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",

package/registry/field.muten

@@ -3,15 +3,15 @@
 #   Field(label: "Description", description: "Shows in your shop.") { TextArea(value: desc) }
 # Two short fields side by side: FieldRow { Field(…) { … }  Field(…) { … } } (one column on a phone).
 # error: a message that replaces the description in the same place (nothing jumps) and marks the field invalid.
-# orientation: vertical | horizontal.
+# orientation: vertical | horizontal. required: true marks the label (a red asterisk) for a field that must be filled.
 # FieldSet - sets the size and the look of every field inside it, the kit's own too (PasswordField, PhoneField…):
 #   FieldSet(size: "2xl", variant: "filled") { Field(label: "Email") { … }  PasswordField(label: "Password") }
 # FieldSeparator - a line with a word in the middle, between two ways in:   FieldSeparator(label: "or with your email")
 # FieldHead - a label with an action beside it:   FieldHead(label: "Password") { LinkBtn(to: "/recover", variant: "link", size: "sm") { Span "Forgot it?" } }
 # shadcn-for-muten · part · no deps · Nova (.cn-field) + kit.css.
-part Field(label: text = "", description: text = "", error: text = "", orientation: text = "vertical") {
+part Field(label: text = "", description: text = "", error: text = "", orientation: text = "vertical", required: bool = false) {
   Stack class("cn-field cn-field-orientation-{$orientation} group/field") data(slot: "field", orientation: $orientation, invalid: $error != "") {
-    Span "{$label}" class("cn-label") data(slot: "label")
+    Span "{$label}" class("cn-label", "cx-required" when $required) data(slot: "label")
     slot
     when $error == "" { Text "{$description}" class("cn-field-description") data(slot: "field-description") }
     when $error != "" { Text "{$error}" class("cn-field-error") data(slot: "field-error") aria(role: "alert") }

package/registry/kit/table.js

@@ -2,7 +2,7 @@
 // and bulk actions are data. Everything else is the artifact's: filters from their type (search · facet · date ·
 // range) with counts, chips that leave with a fade, rows that fade out / slide / enter, the height easing, sort by
 // header, selection with its own bulk bar, the phone's “search + Filters” sheet, and a narrow box becoming Items.
-//   columns  [{key, label, type: person|text|date|status|money, sub (person: the key under the name), sortable}]
+//   columns  [{key, label, type: person|text|date|status|money, sub (person: the key under the name), sortable, sort: "desc" (opens newest first)}]
 //   rows     [{id, …keys}]   (a date is "yyyy-mm-ddTHH:MM"; a row's date may be "+N" days from today too)
 //   filters  [{id, type: search|facet|date|range, label, key | keys (search)}]
 //   statuses [{id, label, tone: ok|wait|info|bad}] · noun ["appointment", "appointments"] · bulk [{id, label, variant}]
@@ -37,10 +37,16 @@ export function dataTable(root, cfg, core, on) {
   };
   const SORTERS = Object.fromEntries(COLS.map((c) => [c.key, c.type === 'status' ? (r) => ST_ORDER.indexOf(r[c.key]) : c.type === 'date' ? (r) => +asDate(r[c.key]) : (r) => r[c.key]]));
   const cbHtml = (label, on) => `<button data-slot="checkbox" role="checkbox" data-state="${on ? 'checked' : 'unchecked'}" aria-checked="${on}" class="cn-checkbox" aria-label="${label}"><span data-slot="checkbox-indicator" class="cn-checkbox-indicator"><svg class="cb-mark" viewBox="0 0 24 24">${CB_CHECK}</svg></span></button>`;
-  const firstSort = dateCol ? { key: dateCol.key, dir: 1 } : { key: COLS[0]?.key, dir: 1 };
+  // the table opens sorted by its date column (else the first); a column with sort: "desc" opens newest first (a log)
+  const opening = dateCol ?? COLS[0];
+  const firstSort = { key: opening?.key, dir: opening?.sort === 'desc' ? -1 : 1 };
   const bulk = list(cfg.bulk);
+  // rows are selectable only when there is something to do with them: without bulk actions, no checkbox column
+  const picks = bulk.length > 0;
+  // the phone's «Filters» sheet only when there is a filter besides the search
+  const sheetFilters = () => FILTERS.some((f) => f.type !== 'search');
   const CELL_CLASS = { person: 'cx-dt-who', text: 'cx-dt-svc', date: 'cx-dt-when', status: 'cx-dt-st', money: 'cx-dt-num' };
-  root.innerHTML = `<div class="cx-dt-host"><div class="cx-dt-toolbar"><div class="cx-hstack cx-dt-tools" role="toolbar" aria-label="${T('Filters')}"></div><span class="cx-text" data-variant="caption" data-dt-shown aria-live="polite"></span></div><div class="cx-hstack cx-dt-chips" hidden></div><div class="cx-dt-bulk" aria-live="polite"><div><span data-dt-count></span><div class="cx-hstack" style="gap:6px">${bulk.map((b) => ui.button({ label: b.label, variant: b.variant || 'outline', size: 'xs', attrs: `data-dt-bulk="${b.id}"` })).join('')}${ui.button({ label: T('Clear selection'), variant: 'ghost', size: 'xs', attrs: 'data-dt-unselect' })}</div></div></div><div class="cx-dt-scroll cx-scroll"><table class="cx-dt"><thead><tr><th class="cx-dt-check">${cbHtml(T('Select all'), false).replace('class="cn-checkbox"', 'class="cn-checkbox" data-dt-all')}</th>${COLS.map((c) => `<th aria-sort="${c.key === firstSort.key ? 'ascending' : 'none'}" ${c.type === 'money' ? 'class="cx-dt-num"' : ''}>${c.sortable === false ? ui.text(c.label, 'label') : `<button class="cn-button cn-button-variant-ghost cn-button-size-xs cx-th" data-sort="${c.key}">${c.label}<svg><use href="#${c.key === firstSort.key ? 'arrowup' : 'sort'}"/></svg></button>`}</th>`).join('')}</tr></thead><tbody></tbody></table></div></div>`;
+  root.innerHTML = `<div class="cx-dt-host"><div class="cx-dt-toolbar"><div class="cx-hstack cx-dt-tools" role="toolbar" aria-label="${T('Filters')}"></div><span class="cx-text" data-variant="caption" data-dt-shown aria-live="polite"></span></div><div class="cx-hstack cx-dt-chips" hidden></div><div class="cx-dt-bulk" aria-live="polite"><div><span data-dt-count></span><div class="cx-hstack" style="gap:6px">${bulk.map((b) => ui.button({ label: b.label, variant: b.variant || 'outline', size: 'xs', attrs: `data-dt-bulk="${b.id}"` })).join('')}${ui.button({ label: T('Clear selection'), variant: 'ghost', size: 'xs', attrs: 'data-dt-unselect' })}</div></div></div><div class="cx-dt-scroll cx-scroll"><table class="cx-dt"><thead><tr>${picks ? `<th class="cx-dt-check">${cbHtml(T('Select all'), false).replace('class="cn-checkbox"', 'class="cn-checkbox" data-dt-all')}</th>` : ''}${COLS.map((c) => `<th aria-sort="${c.key === firstSort.key ? (firstSort.dir === 1 ? 'ascending' : 'descending') : 'none'}" ${c.type === 'money' ? 'class="cx-dt-num"' : ''}>${c.sortable === false ? ui.text(c.label, 'label') : `<button class="cn-button cn-button-variant-ghost cn-button-size-xs cx-th" data-sort="${c.key}">${c.label}<svg><use href="#${c.key === firstSort.key ? (firstSort.dir === 1 ? 'arrowup' : 'arrowdown') : 'sort'}"/></svg></button>`}</th>`).join('')}</tr></thead><tbody></tbody></table></div></div>`;
   const host = $('.cx-dt-host', root), dtTools = $('.cx-dt-tools', root), dtChips = $('.cx-dt-chips', root), dtCountEl = $('[data-dt-shown]', root), dtBody = $('tbody', root), dtAll = $('[data-dt-all]', root), dtBulk = $('.cx-dt-bulk', root);
   const dtSel = new Set(); let dtSort = firstSort;
   const passes = (r, except) => FILTERS.every((f) => f.id === except || PASS[f.type](f, fState[f.id], r));
@@ -53,7 +59,7 @@ export function dataTable(root, cfg, core, on) {
   const paintTools = () => {
     if (dtMobile) {
       const n = activeCount(), focused = document.activeElement?.dataset?.filter === searchF?.id;
-      dtTools.innerHTML = searchHtml() + ui.button({ label: `${ui.icon('filter')}${T('Filters')}${n ? ui.badge(String(n), { variant: 'default' }) : ''}`, size: 'sm', cls: 'cx-fbtn-m', attrs: 'data-fmobile aria-haspopup="dialog"' });
+      dtTools.innerHTML = searchHtml() + (sheetFilters() ? ui.button({ label: `${ui.icon('filter')}${T('Filters')}${n ? ui.badge(String(n), { variant: 'default' }) : ''}`, size: 'sm', cls: 'cx-fbtn-m', attrs: 'data-fmobile aria-haspopup="dialog"' }) : '');
       if (focused) { const i = dtTools.querySelector('[data-filter]'); i.focus(); i.setSelectionRange(i.value.length, i.value.length); }
       return;
     }
@@ -146,7 +152,7 @@ export function dataTable(root, cfg, core, on) {
     return `<td class="cx-dt-svc" ${dateCol ? `data-when="${whenText(r[dateCol.key])}"` : ''}>${v ?? ''}</td>`;
   };
   const who = (r) => r[colOf('person')?.key ?? COLS[0]?.key] ?? '';
-  const rowCells = (r) => `<td class="cx-dt-check">${cbHtml(T('Select {0}', who(r)), dtSel.has(r.id))}</td>${COLS.map((c) => cell(c, r)).join('')}`;
+  const rowCells = (r) => `${picks ? `<td class="cx-dt-check">${cbHtml(T('Select {0}', who(r)), dtSel.has(r.id))}</td>` : ''}${COLS.map((c) => cell(c, r)).join('')}`;
   const EASE = 'cubic-bezier(.23, 1, .32, 1)';
   let dtAnim = 0;
   const dtPaint = () => {
@@ -170,7 +176,7 @@ export function dataTable(root, cfg, core, on) {
     };
     if (leaving.length && dtBody.children.length) { leaving.forEach((tr) => tr.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 130, easing: 'ease-out', fill: 'forwards' })); setTimeout(apply, 130); } else apply();
     dtCountEl.textContent = rows.length === DT.length ? `${DT.length} ${DT.length === 1 ? ONE : MANY}` : `${rows.length} de ${DT.length} ${MANY}`; paintChips();
-    setCheck(dtAll, dtSel.size === 0 ? false : dtSel.size === DT.length ? true : 'mixed');
+    if (dtAll) setCheck(dtAll, dtSel.size === 0 ? false : dtSel.size === DT.length ? true : 'mixed');
     dtBulk.toggleAttribute('data-open', dtSel.size > 0);
     if (dtSel.size) $('[data-dt-count]', root).textContent = `${dtSel.size} ${dtSel.size === 1 ? 'seleccionada' : 'seleccionadas'}`;
     syncMobileCount(rows.length);
@@ -181,10 +187,10 @@ export function dataTable(root, cfg, core, on) {
     $$('thead [data-sort]', root).forEach((b) => { const on = b.dataset.sort === key; b.parentElement.setAttribute('aria-sort', on ? (dtSort.dir === 1 ? 'ascending' : 'descending') : 'none'); $('use', b).setAttribute('href', on ? (dtSort.dir === 1 ? '#arrowup' : '#arrowdown') : '#sort'); });
     dtPaint();
   });
-  dtAll.addEventListener('click', () => { if (dtSel.size === DT.length) dtSel.clear(); else DT.forEach((r) => dtSel.add(r.id)); dtPaint(); });
+  dtAll?.addEventListener('click', () => { if (dtSel.size === DT.length) dtSel.clear(); else DT.forEach((r) => dtSel.add(r.id)); dtPaint(); });
   dtBody.addEventListener('click', (e) => {
     if (e.target.closest('[data-fclear-empty]')) { dtTools.querySelector('[data-fclear]')?.click(); return; }
-    const tr = e.target.closest('tr'); if (!tr || tr.dataset.id === 'empty') return;
+    const tr = e.target.closest('tr'); if (!picks || !tr || tr.dataset.id === 'empty') return;
     if (!e.target.closest('.cn-checkbox') && !host.hasAttribute('data-narrow') && !matchMedia('(max-width: 640px)').matches) return;
     const raw = tr.dataset.id, id = DT.find((r) => String(r.id) === raw)?.id; dtSel.has(id) ? dtSel.delete(id) : dtSel.add(id); dtPaint();
   });
@@ -196,5 +202,12 @@ export function dataTable(root, cfg, core, on) {
     dtSel.clear(); dtPaint(); on?.action?.(JSON.stringify({ action: b.dataset.dtBulk, ids }));
   });
   paintTools(); dtPaint();
-  return { refresh: () => { dtPaint(); paintTools(); } };
+  // new rows from the page (a live list): the same table takes them, keeping its sort, filters and selection
+  const setRows = (rows) => {
+    DT.splice(0, DT.length, ...list(rows).map((r, i) => ({ id: r.id ?? i, ...r })));
+    const ids = new Set(DT.map((r) => r.id));
+    [...dtSel].forEach((id) => { if (!ids.has(id)) dtSel.delete(id); });
+    dtPaint(); paintTools();
+  };
+  return { refresh: () => { dtPaint(); paintTools(); }, setRows };
 }

package/registry/kit-widget.js

@@ -48,12 +48,14 @@ export function mount(el, inputs, on) {
       el.addEventListener('input', () => on.action?.(JSON.stringify(wh.value())));
     },
   };
-  RENDER.table = (core, i) => import('@muten/shadcn/registry/kit/table.js').then(({ dataTable }) => dataTable(el, { columns: i.columns, rows: i.rows, filters: i.filters, statuses: i.statuses, noun: [i.one || 'fila', i.many || 'filas'], bulk: i.bulk }, core, on));
+  RENDER.table = (core, i) => import('@muten/shadcn/registry/kit/table.js').then(({ dataTable }) => (shown = dataTable(el, { columns: i.columns, rows: i.rows, filters: i.filters, statuses: i.statuses, noun: [i.one || 'fila', i.many || 'filas'], bulk: i.bulk }, core, on)));
   // until the kit arrives the host keeps its final size with a shimmer (kit.css, :empty), then the widget fades in
   el.classList.add('cx-kw-wait');
   // its language: inputs.lang, else the nearest lang (the page's); a lang that changes repaints it in the new one
   if (inputs.lang) el.setAttribute('lang', inputs.lang);
   let core0 = null;
+  // what a widget hands back to be fed later (the table's setRows)
+  let shown = null;
   import('@muten/shadcn/registry/kit/core.js').then((core) => {
     core0 = core;
     const render = RENDER[inputs.name]; if (!render) return;
@@ -80,5 +82,6 @@ export function mount(el, inputs, on) {
     el.addEventListener('pointerdown', () => { stopped = true; clearTimeout(timer); }, { once: true, capture: true });
     timer = setTimeout(tick, d.every);
   }
-  return () => {};
+  // muten calls this when a bound state changes: a table takes its new rows in place, the rest keep their snapshot
+  return (next) => { if (inputs.name === 'table' && next && shown?.setRows) shown.setRows(next.rows); };
 }