@muten/shadcn 0.1.7 → 0.1.8

package/package.json

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

package/registry/agenda.js

@@ -40,6 +40,11 @@
 //   lang, currency, locale and cents change live too.
 export function mount(el, inputs, on) {
   let api = null, map = null, pending = null, lastCmd = String(inputs.command || '');   // the command it was born with never runs
+  // an app sends its inputs again on every change of its own, often the same data: repaint only when something drawn
+  // changed (`start` only places the first paint, `command` runs apart)
+  const SKIP = new Set(['command', 'start']);
+  const sigOf = (i) => JSON.stringify(Object.keys(i).filter((k) => !SKIP.has(k)).sort().map((k) => [k, i[k]]));
+  let lastSig = sigOf(inputs);
   import('@muten/shadcn/registry/kit/core.js').then(({ kit, today, addDays }) => {
     const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
     const list = (v) => (Array.isArray(v) ? v : []);
@@ -82,8 +87,8 @@ export function mount(el, inputs, on) {
       onRange: (r) => send('range', { from: iso(r.from), to: iso(r.to), view: r.view }),
       onChange: (evs) => send('change', evs.map((e) => ({ id: e.id, resource: e.resource, day: iso(e.day), start: e.start, dur: e.dur, status: e.status || '' }))),
     });
-    if (pending) { api.update(data(pending)); pending = null; }
+    if (pending) { const sig = sigOf(pending); if (sig !== lastSig) { lastSig = sig; api.update(data(pending)); } pending = null; }
   });
   const command = (next) => { const c = String(next.command || ''); if (c === lastCmd) return; lastCmd = c; if (c) api.run(c.split('#')[0]); };
-  return (next) => { if (api && map) { api.update(map(next)); command(next); } else pending = next; };
+  return (next) => { if (!api || !map) { pending = next; return; } const sig = sigOf(next); if (sig !== lastSig) { lastSig = sig; api.update(map(next)); } command(next); };
 }

package/registry/kit/core.js

@@ -152,7 +152,8 @@ watchReveal();
   };
 
 // ── tabs with a sliding indicator (for panels a Custom builds) ──
-  const initTabs = (list) => {
+  // redraws: the owner paints the tabs again on a click (the agenda), so a click does not animate tabs about to go
+  const initTabs = (list, { redraws = false } = {}) => {
     const tabs = $$('.cx-tab', list);
     const ind = document.createElement('span'); ind.className = 'cx-tab-ind'; list.prepend(ind);
     const place = (animate) => {
@@ -168,14 +169,15 @@ watchReveal();
       place(true);
       list.dispatchEvent(new CustomEvent('pick', { detail: tabs.indexOf(tab) }));
     };
-    tabs.forEach((t) => { t.tabIndex = t.getAttribute('aria-selected') === 'true' ? 0 : -1; t.onclick = () => pick(t); });
+    tabs.forEach((t) => { t.tabIndex = t.getAttribute('aria-selected') === 'true' ? 0 : -1; if (!redraws) t.onclick = () => pick(t); });
     list.addEventListener('keydown', (e) => {
       const i = tabs.indexOf(document.activeElement); if (i < 0) return;
       const to = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
       if (to === undefined) return; e.preventDefault(); pick(tabs[(to + tabs.length) % tabs.length], true);
     });
+    // the first placing comes from the observer too: it runs once the browser has laid the tabs out, so it measures
+    // without forcing a layout of the whole page (a list painted again and again paid two each time)
     new ResizeObserver(() => place(false)).observe(list);
-    place(false);
     return pick;
   };
 
@@ -717,7 +719,7 @@ let wheelsNow = [];
     const weekHead = (d, rid) => { const n = evOn(d, rid).length, q = queue.filter((x) => sameDay(x.day, d)).length, shut = isClosed(d); const sub = [shut && !n ? w.closed : n ? w.countOf(n) : '', q ? w.waiting(q) : ''].filter(Boolean).join(' · '); return `<span class="cx-ag-colday">${w.dayS[d.getDay()]} ${d.getDate()}</span>${sub ? `<small class="cx-ag-colsub"${q ? ' data-queue' : ''}>${sub}</small>` : ''}`; };
     const tellRange = () => { const v = eff(); const a = v === 'range' ? rangeSel[0] : v === 'week' ? weekDays()[0] : day, b = v === 'range' ? rangeSel[1] : v === 'week' ? weekDays()[6] : day; const key = `${v}|${+a}|${+b}`; if (key === lastRange) return; lastRange = key; onRange({ from: a, to: b, view: v }); };
     const paint = () => {
-      refit();
+      if (fit) { const k = `${eff()}|${from}|${to}|${narrow}`; if (k !== fitKey && fitSeen.has(k)) { hourPx = fitSeen.get(k); fitKey = k; } }
       if (typeof drag !== 'undefined' && drag) { const d = drag; drag = null; clearTimeout(d.timer); cancelAnimationFrame(scrollRaf); d.ghost?.remove(); }
       const v = eff(); // the phone keeps the calendar: day grid or list, the week needs a wide screen
       const cols = v === 'week' ? weekDays().map((d) => ({ day: d, rid: who === 'all' || who.startsWith('kind:') ? 'all' : who, head: weekHead(d, who === 'all' || who.startsWith('kind:') ? null : who), label: `${w.dayL[d.getDay()]} ${d.getDate()}`, today: sameDay(d, today), closed: isClosed(d) })) : dayCols().map((r) => ({ day, rid: r.id, head: `${r.photo ? `<span class="cn-avatar cx-ag-face" style="background-image:url('${r.photo}')"></span>` : ui.avatar(r.name, { size: 'sm' })}<span class="cx-ag-colname"><b>${r.name}</b>${roleOf(r) ? `<small>${roleOf(r)}</small>` : ''}</span>`, label: r.name }));
@@ -728,8 +730,9 @@ let wheelsNow = [];
       if (!loading) { hadNow = top.includes('cx-ag-nowcard'); hadQueue = top.includes('cx-ag-queue'); }
       root.innerHTML = toolbar() + `<div class="cx-ag-frame"${loading ? ` aria-busy="true" aria-label="${w.loading}"` : ''}><div class="cx-ag-top">${people()}${v === 'week' ? '' : strip()}${top}${alert}</div>${v === 'range' ? `<div class="cx-ag-listwrap">${loading ? skelList() : rangeList()}</div>` : v === 'list' ? `<div class="cx-ag-listwrap">${loading ? skelList() : list()}</div>` : grid(cols)}</div>`;
       root.toggleAttribute('data-loading', !!loading);
-      $$('.cx-tabs', root).forEach(initTabs);
+      $$('.cx-tabs', root).forEach((tl) => initTabs(tl, { redraws: true }));
       const now = $('.cx-ag-now', root); if (now) $('.cx-ag-scroll', root).scrollTop = Math.max(0, parseFloat(now.style.top) - 120);
+      if (refit()) { paint(); return; }   // the hours' height changed: once more at the right size
       tellRange();
     };
     // drag to move · drag the bottom edge to resize (15 min). A ghost shows where it lands and turns red where the
@@ -848,7 +851,7 @@ let wheelsNow = [];
       $$('.cx-ag-now', root).forEach((x) => { x.style.top = y(m) + 'px'; }); const t = $('.cx-ag-nowtime', root); if (t) { t.style.top = y(m) + 'px'; t.textContent = clk(toHM(m)); }
       $$('.cx-ag-col', root).forEach((c) => { if (!sameDay(new Date(+c.dataset.day), today)) return; const g = $('.cx-ag-gone', c); if (g) g.style.height = y(m) + 'px'; });
     }, 30000);
-    new ResizeObserver(() => requestAnimationFrame(() => { const n = root.clientWidth < 700; const h = fit ? root.querySelector('.cx-ag-scroll')?.clientHeight || 0 : 0; if (n !== narrow) { narrow = n; paint(); } else if (fit && h && h !== fitH) paint(); })).observe(root);
+    new ResizeObserver(() => requestAnimationFrame(() => { const n = root.clientWidth < 700; const h = fit ? root.querySelector('.cx-ag-scroll')?.clientHeight || 0 : 0; if (n !== narrow) { narrow = n; paint(); } else if (fit && h && h !== fitH) { fitKey = ''; fitSeen.clear(); paint(); } })).observe(root);
 
     // ── the event sheet (showcase): detail · lifecycle · payment · move (second step) · cancel (second step).
     // In app mode a tapped cita goes to onOpen and the app opens its own sheet. ──
@@ -971,16 +974,23 @@ let wheelsNow = [];
       body.innerHTML = '<div class="cx-ag-datesheet"></div>';
       dateUI($('.cx-ag-datesheet', body), (r) => { closeModal(); applyDate(r); });
     };
-    // fit: the hours share the height the app gives the agenda (never under baseHour), as a day view on a monitor should
-    let hourPx = baseHour, fitH = 0;
+    // fit: the hours share the height the app gives the agenda (never under baseHour), as a day view on a monitor should.
+    // Measured after a paint and only when what decides it changed (view, hours, width, the agenda's height): reading
+    // the layout on every paint forced the whole page to lay out each time
+    let hourPx = baseHour, fitH = 0, fitKey = '';
+    const fitSeen = new Map();   // each view's measured hour, so going back to a view paints once at its size
     const refit = () => {
-      if (!fit) return;
+      if (!fit) return false;
+      const key = `${eff()}|${from}|${to}|${narrow}`; if (key === fitKey) return false;
       const sc = root.querySelector('.cx-ag-scroll'), ag = sc ? sc.querySelector('.cx-ag') : null, hours = sc ? sc.querySelector('.cx-ag-body') : null;
-      if (!sc || !sc.clientHeight || !ag || !hours) return;
-      fitH = sc.clientHeight;
+      if (!sc || !sc.clientHeight || !ag || !hours) return false;
+      fitKey = key; fitH = sc.clientHeight;
       // everything in the scroll that is not the hours (the day heads, gaps, padding) keeps its height
       const around = ag.offsetHeight - hours.offsetHeight;
-      hourPx = Math.max(baseHour, Math.floor((sc.clientHeight - around) / Math.max(1, to - from)));
+      const next = Math.max(baseHour, Math.floor((sc.clientHeight - around) / Math.max(1, to - from)));
+      fitSeen.set(key, next);
+      if (next === hourPx) return false;
+      hourPx = next; return true;
     };
     let blockDay = null;   // the one open day of the week, when the form had nothing to choose from
     const openBlock = () => { blockOpen = true; sheetOf('agBlock'); };