@muten/shadcn 0.1.3 → 0.1.5

package/kit.css

@@ -5057,7 +5057,8 @@ a.cx-bc-item:hover { color: var(--foreground); }
 .cx-heat-c[data-level="4"] { background: color-mix(in oklab, var(--series) 72%, var(--muted)); }
 .cx-heat-c[data-level="5"] { background: var(--series); }
 .cx-heat-c[data-level="6"] { background: color-mix(in oklab, var(--series) 78%, black); }
-.cx-heat-grid > .cx-heat-c:hover { outline: 2px solid var(--foreground); outline-offset: 1px; }
+/* only a cell with something to say reacts: never while loading or under the empty note */
+.cx-heat:not([data-busy="true"]) .cx-heat-grid:not(:has(> .cx-veil-note)) > .cx-heat-c[data-name]:not([data-name=""]):hover { outline: 2px solid var(--foreground); outline-offset: 1px; }
 .cx-heat-scale { display: flex; flex-direction: row; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted-foreground); }
 .cx-heat-scale > .cx-heat-c { width: 16px; aspect-ratio: auto; height: 12px; border-radius: 3px; }
 .cx-heat-scale > span:first-child { margin-right: 3px; } .cx-heat-scale > span:last-child { margin-left: 3px; }
@@ -5078,7 +5079,8 @@ a.cx-bc-item:hover { color: var(--foreground); }
 .cx-stb-bar:disabled { cursor: default; }
 .cx-stb-bar:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
 .cx-stb-stack { display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 6px 6px 3px 3px; overflow: hidden; transform-origin: bottom; opacity: .55; transition: height .5s cubic-bezier(.22, 1, .36, 1), opacity .2s; }
-.cx-stb-bars:not(:has([aria-pressed="true"])) .cx-stb-stack, .cx-stb-bar[aria-pressed="true"] .cx-stb-stack, .cx-stb-bar:hover .cx-stb-stack { opacity: 1; }
+.cx-stb-bars:not(:has([aria-pressed="true"])) .cx-stb-stack, .cx-stb-bar[aria-pressed="true"] .cx-stb-stack, .cx-stb-bar:not(:disabled):hover .cx-stb-stack { opacity: 1; }
+.cx-stb-bar:disabled { pointer-events: none; }
 .cx-stb-seg { display: block; flex: 1 1 0; min-height: 2px; background: var(--series); }
 .cx-stb-sk { display: block; width: 100%; border-radius: 6px 6px 3px 3px; }
 .cx-stb-x { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 14px); font-size: 12px; color: var(--muted-foreground); text-align: center; }
@@ -5147,3 +5149,60 @@ a.cx-bc-item:hover { color: var(--foreground); }
 /* StackedBars in a narrow card (a phone): twelve month labels still fit, a size smaller and never cut with «…» */
 .cx-stb { container-type: inline-size; }
 @container (max-width: 520px) { .cx-stb-x { gap: 2px; font-size: 10px; } .cx-stb-x > span { text-overflow: clip; overflow: visible; } .cx-stb-bars { gap: 4px; } .cx-stb-y { font-size: 10.5px; } }
+
+/* ── MARKETING PARTS (registry/marketing.muten) ──────────────────────────────────────────────────────────────────────
+   The pieces that had lived in Storio's landing as its own classes, now the library's: a lead under a section title,
+   a note after a block, the tag on a fund card, columns of facts, outlined boxes, a path of numbered steps and a
+   checked list with explanations. */
+.style-nova .cx-mk-sub { margin-top: -12px; max-width: 60ch; }
+.style-nova .cx-mk-note { margin: -8px 0 0; font-size: 14px; color: var(--muted-foreground); max-width: 70ch; }
+.style-nova .cx-mk-fund-c:has(> .cx-mk-fund-tag) { grid-row: span 3; }
+.style-nova .cx-mk-fund-tag { justify-self: start; align-self: start; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted-foreground); background: var(--background); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; }
+.style-nova .cx-mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
+.style-nova .cx-mk-fact { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 4px 0; min-width: 0; }
+.style-nova .cx-mk-fact + .cx-mk-fact { padding-left: 20px; border-left: 1px solid var(--border); }
+.style-nova .cx-mk-fact-k { font-weight: 700; font-size: 16px; }
+.style-nova .cx-mk-fact-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }
+.style-nova .cx-mk-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.style-nova .cx-mk-box { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border: 1px solid var(--border); border-radius: 18px; min-width: 0; }
+.style-nova .cx-mk-box-t { font-weight: 700; font-size: 16px; }
+.style-nova .cx-mk-box-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }
+.style-nova .cx-mk-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
+.style-nova .cx-mk-path-s { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.style-nova .cx-mk-path-n { width: 34px; height: 34px; border-radius: 50%; background: var(--foreground); color: var(--background); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
+.style-nova .cx-mk-path-p { margin: 0; font-size: 15px; line-height: 1.55; }
+.style-nova .cx-mk-donelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
+.style-nova .cx-mk-done { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px 0; border-top: 1px solid var(--border); min-width: 0; }
+.style-nova .cx-mk-done-i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: 15px; margin-top: 1px; }
+.style-nova .cx-mk-done-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.style-nova .cx-mk-done-t { font-weight: 700; font-size: 16px; }
+.style-nova .cx-mk-done-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }
+@media (max-width: 900px) {
+  .style-nova .cx-mk-facts, .style-nova .cx-mk-path { grid-template-columns: 1fr 1fr; row-gap: 22px; }
+  .style-nova .cx-mk-fact:nth-child(3) { padding-left: 0; border-left: 0; }
+  .style-nova .cx-mk-boxes { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 760px) { .style-nova .cx-mk-donelist { grid-template-columns: 1fr; gap: 0; } }
+@media (max-width: 560px) {
+  .style-nova .cx-mk-facts, .style-nova .cx-mk-path, .style-nova .cx-mk-boxes { grid-template-columns: 1fr; }
+  .style-nova .cx-mk-fact + .cx-mk-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
+}
+/* The pricing table's note under a value (cx-pr-*): how or how much, stacked under it, never beside it. */
+.style-nova .cx-pr-td .cx-pr-note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); font-weight: 400; }
+.style-nova .cx-pr-table > .cx-pr-tr > .cx-pr-td:has(> .cx-pr-note), .style-nova .cx-pr-table > .cx-pr-tr > .cx-pr-rh:has(> .cx-pr-note) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
+.style-nova .cx-pr-rh > .cx-pr-note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); font-weight: 400; max-width: 30ch; }
+
+/* Agenda: a week column says how many citas it holds and who waits; a cita card carries its price; the phone's week
+   strip can mark each day with a dot per cita in its service's colour (phoneStrip "dots") */
+.cx-ag-colhead { display: flex; flex-direction: column; align-items: center; gap: 1px; }
+.cx-ag-colday { font-weight: 600; }
+.cx-ag-colsub { font-size: 11px; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
+.cx-ag-colsub[data-queue] { color: var(--warning-foreground, var(--foreground)); }
+.cx-ag-ev { position: absolute; }
+.cx-ag-evprice { position: absolute; top: 5px; right: 7px; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; opacity: .85; }
+.cx-ag-dots { display: flex; flex-direction: row; justify-content: center; gap: 3px; min-height: 6px; }
+.cx-ag-dots > i { width: 6px; height: 6px; border-radius: 99px; flex: none; }
+.cx-ag-ev:has(> .cx-ag-evprice) { padding-right: 62px; }
+/* a narrow column (the week on a laptop) keeps the client's name: the price shows only where there is room for both */
+.cx-ag-col { container-type: inline-size; }
+@container (max-width: 190px) { .cx-ag-evprice { display: none; } .cx-ag-ev:has(> .cx-ag-evprice) { padding-right: 8px; } }

package/package.json

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

package/registry/agenda.js

@@ -4,7 +4,8 @@
 //     first), "person" (a worker, the default) or any other (a room: say its `group`, «Salas»). capacity = how many citas
 //     it holds at once: 1 (default, never overlap) · 3 (a class of three) · 0 (no limit). overlap "never" | "allow"
 //     overrides every capacity. Citas that break one (the server sent them crossed) say «Se cruza».
-//   resources [{id, name, photo}] · hours [{id, days: [1..6], ranges: [[540, 780], [840, 1140]]}]  (minutes from midnight)
+//   resources [{id, name, photo}] · hours [{id, days: [1..6], ranges: [[540, 780], [840, 1140]]}]  (minutes from midnight);
+//     a person can have several entries, one per group of days, when the days do not share one schedule
 //   events [{id, resource, with: [ids], day, start "HH:MM", dur, title, subtitle, price, status, tint, ink, tone, steps, actions, at, payment, contact}]
 //     day = "yyyy-mm-dd", or a number of days from today (it lands on the next day that person works)
 //     with = the other agendas the cita also takes (the room it uses, a second worker): checked and shown in each
@@ -20,6 +21,7 @@
 //     sends them back through `command`: "new", "block", "prev", "next", "today", "view:list", or an action id. The
 //     agenda runs a command when its value changes, so repeat one with a suffix after # ("new#1", "new#2"…)
 //   hour12 "yes" - times written 3:00 PM (the data stays "HH:MM") · timeZone "America/Bogota" - today and now are the shop's
+//   phoneStrip "dots" - the phone's week strip marks each day with a dot per cita in its service's colour (default: the count)
 //   phoneView "list" - a phone opens on the list until a view is picked · blockScope "all" - blocks are for the whole
 //     business (no «Para» picker: a backend with no per-person blocks)
 //   events also take tags ["A domicilio", "Llegó 10:02"] (words next to the time) and photo (the client's face, in the list)
@@ -42,8 +44,9 @@ export function mount(el, inputs, on) {
     const at = (s) => new Date(String(s) + 'T00:00:00');
     const yes = (v) => v === true || v === 'yes' || v === 'true';
     const data = (i) => {
-      const hours = Object.fromEntries(list(i.hours).map((h) => [h.id, h]));
-      const work = (rid, d) => { const h = hours[rid]; return h && list(h.days).includes(d.getDay()) ? list(h.ranges) : []; };
+      // a person can have several entries, one per group of days (Monday 9 to 18, Saturday 9 to 13): the first that names the day wins
+      const hours = list(i.hours);
+      const work = (rid, d) => { const h = hours.find((x) => x.id === rid && list(x.days).includes(d.getDay())); return h ? list(h.ranges) : []; };
       const land = (rid, off) => { let o = Number(off); for (let k = 0; k < 14 && !work(rid, addDays(today, o)).length; k++) o++; return addDays(today, o); };
       const plain = (d) => (typeof d === 'number' || /^-?\d+$/.test(String(d)) ? addDays(today, Number(d)) : at(d));
       const dayOf = (rid, d) => (typeof d === 'number' || /^-?\d+$/.test(String(d)) ? land(rid, d) : at(d));
@@ -67,7 +70,7 @@ export function mount(el, inputs, on) {
       from: Number(inputs.from) || 9, to: Number(inputs.to) || 19, slot: Number(inputs.slot) || 30, view: inputs.view || 'day',
       createSheet: inputs.create === 'sheet', services: list(inputs.services),
       sheet: inputs.sheet === 'app' ? 'app' : 'built-in', drag: inputs.drag !== 'off', start: inputs.start ? at(inputs.start) : null, phone: inputs.phone === 'nav' ? 'nav' : '',
-      resize: inputs.resize === 'off' ? 'off' : 'on', moveAcross: inputs.moveAcross === 'off' ? 'off' : 'on', hour12: yes(inputs.hour12), timeZone: inputs.timeZone || '', phoneView: ['list', 'day'].includes(inputs.phoneView) ? inputs.phoneView : '', blockScope: inputs.blockScope === 'all' ? 'all' : 'each',
+      resize: inputs.resize === 'off' ? 'off' : 'on', moveAcross: inputs.moveAcross === 'off' ? 'off' : 'on', hour12: yes(inputs.hour12), timeZone: inputs.timeZone || '', phoneStrip: inputs.phoneStrip === 'dots' ? 'dots' : '', phoneView: ['list', 'day'].includes(inputs.phoneView) ? inputs.phoneView : '', blockScope: inputs.blockScope === 'all' ? 'all' : 'each',
       onAction: (id) => send('action', id),
       onCreate: (x) => send('create', day1(x)),
       onOpen: on.open ? (e) => send('open', day1({ id: e.id, resource: e.resource, day: e.day, start: e.start, dur: e.dur, status: e.status || '' })) : null,

package/registry/agenda.muten

@@ -24,15 +24,17 @@ part AgendaDemo(resources: list, hours: list, events: list, blocks: list, action
 #   onOpen(json {id, …}) a cita tapped (open your sheet) · onCreate(json {resource, day, start}) a free hour tapped
 #   onBlock(json {resource, day, start, dur, reason}) · onMove(json {id, resource, day, start, dur}) dragged (answer with
 #   the data: it stays where it landed, or goes back if you send it unchanged) · onRange(json {from, to, view}) days shown
+#   actions [{id, label, icon, primary}] the toolbar's buttons (default: Bloquear and Nueva cita; [{id: "block", …}] alone
+#   leaves «Nueva cita» to the app's own button) · an id other than block or new fires onAction(id)
 #   phone "nav": on a phone its actions (Bloquear, Nueva cita, yours) and the arrows leave the toolbar for the app's
 #   phone bar (PhoneBar), which sends them back through `command` ("new", "block", "prev", "next", "today", "view:list",
 #   an action id; repeat one with a suffix after #: "new#2"). Nothing runs while loading.
 #   several agendas: resources carry kind (business | person | a room…) and capacity (1 never overlaps, 0 no limit);
 #   a cita takes its resource plus every id in `with`. overlap "never" | "allow" overrides all capacities.
-#   resize "off" · moveAcross "off" (a backend that only moves day and time) · hour12 "yes" (3:00 PM) · timeZone (the shop's today and now) · phoneView "list" · blockScope "all" · placing [{…}]
+#   resize "off" · moveAcross "off" (a backend that only moves day and time) · hour12 "yes" (3:00 PM) · timeZone (the shop's today and now) · phoneView "list" · phoneStrip "dots" (the phone's week: a dot per cita in its colour) · blockScope "all" · placing [{…}]
 #   (the dashed cita while the app's new-cita sheet is open) · events take tags [words] and photo; resources role, hideEmpty
 #   AgendaLive(resources: @team, hours: @hours, events: @citas, blocks: @blocks, free: @free, queue: @queue, closed: @closed,
 #              lang: ui.lang, currency: "USD", onOpen: openCita, onCreate: newCita, onBlock: block, onMove: moveCita, onRange: loadDays)
-part AgendaLive(resources: list, hours: list, events: list, blocks: list, free: list, queue: list, closed: list, lang: text = "es", currency: text = "", locale: text = "", cents: text = "", from: number = 9, to: number = 19, slot: number = 30, view: text = "day", loading: text = "", start: text = "", drag: text = "", phone: text = "", command: text = "", overlap: text = "", hour12: text = "", timeZone: text = "", phoneView: text = "", blockScope: text = "", resize: text = "", moveAcross: text = "", placing: list, onOpen: action, onCreate: action, onBlock: action, onMove: action, onRange: action) {
-  Custom Agenda inputs(resources: $resources, hours: $hours, events: $events, blocks: $blocks, free: $free, queue: $queue, closed: $closed, lang: $lang, currency: $currency, locale: $locale, cents: $cents, from: $from, to: $to, slot: $slot, view: $view, loading: $loading, start: $start, drag: $drag, phone: $phone, command: $command, overlap: $overlap, hour12: $hour12, timeZone: $timeZone, phoneView: $phoneView, blockScope: $blockScope, resize: $resize, moveAcross: $moveAcross, placing: $placing, sheet: "app") on(open: $onOpen, create: $onCreate, block: $onBlock, move: $onMove, range: $onRange) class("cx-agenda")
+part AgendaLive(resources: list, hours: list, events: list, blocks: list, actions: list, free: list, queue: list, closed: list, lang: text = "es", currency: text = "", locale: text = "", cents: text = "", from: number = 9, to: number = 19, slot: number = 30, view: text = "day", loading: text = "", start: text = "", drag: text = "", phone: text = "", command: text = "", overlap: text = "", hour12: text = "", timeZone: text = "", phoneView: text = "", phoneStrip: text = "", blockScope: text = "", resize: text = "", moveAcross: text = "", placing: list, onOpen: action, onCreate: action, onBlock: action, onMove: action, onRange: action, onAction: action) {
+  Custom Agenda inputs(resources: $resources, hours: $hours, events: $events, blocks: $blocks, actions: $actions, free: $free, queue: $queue, closed: $closed, lang: $lang, currency: $currency, locale: $locale, cents: $cents, from: $from, to: $to, slot: $slot, view: $view, loading: $loading, start: $start, drag: $drag, phone: $phone, command: $command, overlap: $overlap, hour12: $hour12, timeZone: $timeZone, phoneView: $phoneView, phoneStrip: $phoneStrip, blockScope: $blockScope, resize: $resize, moveAcross: $moveAcross, placing: $placing, sheet: "app") on(open: $onOpen, create: $onCreate, block: $onBlock, move: $onMove, range: $onRange, action: $onAction) class("cx-agenda")
 }

package/registry/info-table.muten

@@ -0,0 +1,19 @@
+# InfoTable - shadcn's Table for content (not a data grid: for rows from a list with filters, use TableView). A header row
+# of InfoHead, then rows of InfoCell. variant "compare" is the comparison look (first column strong, the rest
+# softer, stacked with their column's name on a phone); a cell's tone picks "strong" or "soft" inside it.
+#   InfoTable(variant: "compare") {
+#     InfoHeadRow { InfoHead(label: "")  InfoHead(label: "Storio")  InfoHead(label: "Linktree") }
+#     InfoRow { InfoCell(label: "Agenda", tone: "strong")  InfoCell(label: "Incluida")  InfoCell(label: "No", tone: "soft") }
+#   }
+# shadcn-for-muten · parts · no deps · Nova (.cn-table) + kit.css (.cx-mk-vs-table).
+part InfoTable(variant: text = "default") {
+  Stack class("cn-table-container") data(slot: "table-container") {
+    Stack class("cn-table", "cx-mk-vs-table" when $variant == "compare") data(slot: "table") aria(role: "table") { slot }
+  }
+}
+part InfoHeadRow() { Stack class("cn-table-row cx-mk-vs-head") data(slot: "table-row") aria(role: "row") { slot } }
+part InfoRow() { Stack class("cn-table-row") data(slot: "table-row") aria(role: "row") { slot } }
+part InfoHead(label: text) { Span "{$label}" class("cn-table-head") data(slot: "table-head") aria(role: "columnheader") }
+part InfoCell(label: text, tone: text = "") {
+  Span "{$label}" class("cn-table-cell", "cx-mk-vs-what" when $tone == "strong", "cx-mk-vs-them" when $tone == "soft") data(slot: "table-cell") aria(role: "cell")
+}

package/registry/kit/core.js

@@ -181,7 +181,7 @@ watchReveal();
 
 // ── tooltip on any [data-name] ──
   const tip = document.createElement('div'); tip.className = 'cx-tip'; tip.setAttribute('role', 'tooltip'); tip.hidden = true; lib.appendChild(tip);
-  const tipOn = (e) => { const w = e.target.closest?.('[data-name]'); if (!w) return; tip.textContent = w.dataset.name; tip.hidden = false; const r = w.getBoundingClientRect(); if (w.closest('[data-slot="sidebar"]')) { tip.style.left = (r.right + 8) + 'px'; tip.style.top = (r.top + r.height / 2 - tip.offsetHeight / 2) + 'px'; } else { place(tip, w, 'center', 6); tip.style.top = (r.top - tip.offsetHeight - 6) + 'px'; } requestAnimationFrame(() => tip.dataset.state = 'open'); };
+  const tipOn = (e) => { const w = e.target.closest?.('[data-name]'); if (!w || !w.dataset.name) return; /* an empty name (no data yet) says nothing */ tip.textContent = w.dataset.name; tip.hidden = false; const r = w.getBoundingClientRect(); if (w.closest('[data-slot="sidebar"]')) { tip.style.left = (r.right + 8) + 'px'; tip.style.top = (r.top + r.height / 2 - tip.offsetHeight / 2) + 'px'; } else { place(tip, w, 'center', 6); tip.style.top = (r.top - tip.offsetHeight - 6) + 'px'; } requestAnimationFrame(() => tip.dataset.state = 'open'); };
   const tipOff = (e) => { if (e.target.closest?.('[data-name]')) { tip.dataset.state = 'closed'; tip.hidden = true; } };
   ['pointerover', 'focusin'].forEach((t) => document.addEventListener(t, tipOn)); ['pointerout', 'focusout'].forEach((t) => document.addEventListener(t, tipOff));
 
@@ -491,7 +491,7 @@ let wheelsNow = [];
       weekOf: (d) => `Semana del ${d}`, dayTitle: (wd, n, m) => `${wd} ${n} de ${m}`,
       off: 'No trabaja este día', blocked: 'Bloqueado', minutes: 'minutos', with: 'con', notFree: 'no está libre', notFreeLong: 'Ese horario no está libre',
       nowLasts: (m) => `Ahora dura ${m} min`, movedTo: (t, who) => `Movida a las ${t}${who ? ` con ${who}` : ''}`,
-      free: 'Libre', freeFromTo: (a, b) => `Libre de ${a} a ${b}, agendar`, until: 'a', noHours: 'No hay horario este día', freeSlot: 'Hora libre',
+      free: 'Libre', freeFromTo: (a, b) => `Libre de ${a} a ${b}, agendar`, until: 'a', noHours: 'No hay horario este día', dayOver: 'Este día ya pasó', todayOver: 'Ya no quedan horas libres hoy', freeSlot: 'Hora libre',
       now: 'Ahora', waiting: (n) => (n === 1 ? '1 en espera' : `${n} en espera`), closed: 'Cerrado', countOf: (n) => (n === 1 ? '1 cita' : `${n} citas`),
       move: 'Cambiar la hora', day: 'Día', current: 'Es su hora actual', noneFree: 'No queda una hora libre ese día.', back: 'Volver', saveMove: 'Guardar nueva hora',
       cancelOf: 'Cancelar la cita', why: '¿Por qué?', reasons: ['El cliente pidió cancelar', 'No vino', 'Me surgió algo', 'Otro'], reasonLabel: 'Motivo', tellClient: 'Le avisamos al cliente con este motivo.',
@@ -514,7 +514,7 @@ let wheelsNow = [];
       weekOf: (d) => `Week of ${d}`, dayTitle: (wd, n, m) => `${wd}, ${m} ${n}`,
       off: 'Not working this day', blocked: 'Blocked', minutes: 'minutes', with: 'with', notFree: 'not free', notFreeLong: 'That time is not free',
       nowLasts: (m) => `Now ${m} min long`, movedTo: (t, who) => `Moved to ${t}${who ? ` with ${who}` : ''}`,
-      free: 'Free', freeFromTo: (a, b) => `Free from ${a} to ${b}, book`, until: 'to', noHours: 'No hours this day', freeSlot: 'Free time',
+      free: 'Free', freeFromTo: (a, b) => `Free from ${a} to ${b}, book`, until: 'to', noHours: 'No hours this day', dayOver: 'This day is over', todayOver: 'No free hours left today', freeSlot: 'Free time',
       now: 'Now', waiting: (n) => `${n} waiting`, closed: 'Closed', countOf: (n) => (n === 1 ? '1 appointment' : `${n} appointments`),
       move: 'Change the time', day: 'Day', current: 'Its current time', noneFree: 'No free time left that day.', back: 'Back', saveMove: 'Save new time',
       cancelOf: 'Cancel the appointment', why: 'Why?', reasons: ['The client asked to cancel', 'No-show', 'Something came up', 'Other'], reasonLabel: 'Reason', tellClient: 'We tell the client with this reason.',
@@ -543,7 +543,7 @@ let wheelsNow = [];
     const { from = 9, to = 19, slot = 30, hourPx = 56, onCreate = () => {}, onChange = () => {}, onAction = () => {}, onOpen = null, onBlock = null, onMove = null, onRange = () => {},
       actions = null, createSheet = false, services = [], view: startView = 'day', sheet: sheetMode = 'built-in', drag: dragOn = true,
       resize: resizeMode = 'on', moveAcross = 'on',
-      start: startDay = null, phone: phoneMode = '', hour12 = false, timeZone = '', phoneView = '', blockScope = 'each' } = opts;
+      start: startDay = null, phone: phoneMode = '', hour12 = false, timeZone = '', phoneView = '', blockScope = 'each', phoneStrip = '' } = opts;
     // THE SHOP'S CLOCK: with a timeZone, «today», «now» and «the past» are the shop's, not the browser's (an owner
     // travelling, or a phone set to another zone, still sees the shop's day)
     const clockNow = () => { if (!timeZone) return new Date(); try { const p = Object.fromEntries(new Intl.DateTimeFormat('en-US', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' }).formatToParts(new Date()).map((x) => [x.type, x.value])); return new Date(+p.year, +p.month - 1, +p.day, +p.hour % 24, +p.minute); } catch { return new Date(); } };
@@ -606,7 +606,7 @@ let wheelsNow = [];
     const tagsOf = (e) => (Array.isArray(e.tags) ? e.tags.filter(Boolean).join(' · ') : '');
     const SAY = ['started', 'awaiting_payment', 'noshow'];   // the statuses a cita SAYS in words (no stripes, no glow)
     const evHtml = (e, ln, showWho, rid = null, gut = false) => { const [l, n] = ln.get(e.id) || [0, 1]; const short = e.dur < 45; const said = clash.has(e.id) ? w.clashOne : SAY.includes(e.status) && w.status[e.status] ? w.status[e.status] : ''; const others = rid ? occ(e).filter((x) => x !== rid).map(resName).filter(Boolean).join(', ') : ''; const tg = tagsOf(e);
-      const span = gut ? '(100% - 22px)' : '100%'; /* an agenda with no limit keeps a strip on the right to book beside */ return `<button class="cx-ag-ev" data-ev="${e.id}" data-tone="${toneOf(e)}" ${e.status ? `data-status="${e.status}"` : ''}${paint1(e)}top:${y(toMin(e.start))}px;height:${(e.dur / 60) * hourPx - 3}px;left:calc(${span} * ${l / n} + 3px);width:calc(${span} / ${n} - 6px)"${clash.has(e.id) ? ' data-conflict' : ''} aria-label="${e.title}, ${clk(e.start)}, ${e.dur} ${w.minutes}${tg ? ', ' + tg : ''}${showWho ? `, ${w.with} ${resName(e.resource)}` : ''}${others ? `, ${w.with} ${others}` : ''}${e.status && w.status[e.status] ? `, ${w.status[e.status]}` : ''}${clash.has(e.id) ? `, ${w.clashOne}` : ''}">${short ? ui.text(`${e.title} · ${said || tg || clk(e.start)}`, 'label') : `${ui.text(e.title, 'label')}${ui.text(`${said ? said + ' · ' : ''}${tg ? tg + ' · ' : ''}${clk(e.start)} · ${e.subtitle || ''}${showWho ? ' · ' + resName(e.resource) : ''}${others ? ' · ' + others : ''}`, 'caption')}`}${dragOn && resizeMode !== 'off' ? '<span class="cx-ag-grip" aria-hidden="true"></span>' : ''}</button>`; };
+      const span = gut ? '(100% - 22px)' : '100%'; /* an agenda with no limit keeps a strip on the right to book beside */ return `<button class="cx-ag-ev" data-ev="${e.id}" data-tone="${toneOf(e)}" ${e.status ? `data-status="${e.status}"` : ''}${paint1(e)}top:${y(toMin(e.start))}px;height:${(e.dur / 60) * hourPx - 3}px;left:calc(${span} * ${l / n} + 3px);width:calc(${span} / ${n} - 6px)"${clash.has(e.id) ? ' data-conflict' : ''} aria-label="${e.title}, ${clk(e.start)}, ${e.dur} ${w.minutes}${tg ? ', ' + tg : ''}${showWho ? `, ${w.with} ${resName(e.resource)}` : ''}${others ? `, ${w.with} ${others}` : ''}${e.status && w.status[e.status] ? `, ${w.status[e.status]}` : ''}${clash.has(e.id) ? `, ${w.clashOne}` : ''}">${short ? ui.text(`${e.title} · ${said || tg || clk(e.start)}`, 'label') : `${ui.text(e.title, 'label')}${ui.text(`${said ? said + ' · ' : ''}${tg ? tg + ' · ' : ''}${clk(e.start)} · ${e.subtitle || ''}${showWho ? ' · ' + resName(e.resource) : ''}${others ? ' · ' + others : ''}`, 'caption')}`}${e.price && !short ? `<span class="cx-ag-evprice">${fmtMoney(e.price)}</span>` : ''}${dragOn && resizeMode !== 'off' ? '<span class="cx-ag-grip" aria-hidden="true"></span>' : ''}</button>`; };
     // the hours a person does not work: hatched. With server free hours, everything that is neither free nor booked.
     const offHtml = (d, rid) => {
       const av = freeList ? null : availability(rid, d);
@@ -641,7 +641,7 @@ let wheelsNow = [];
       return `<div class="cx-hstack cx-ag-who" role="radiogroup" aria-label="${w.whose}"><span class="cx-ag-wholabel" aria-hidden="true">${w.whose}</span>${all}${kinds.map((k) => { const rs = ordered().filter((r) => kindOf(r) === k); return `<span class="cx-ag-sep" aria-hidden="true"></span>${rs.length > 1 ? ui.button({ label: groupName(k), size: 'sm', variant: 'ghost', attrs: `role="radio" aria-checked="${who === 'kind:' + k}" data-who="kind:${k}"`, cls: 'cx-ag-group' }) : ''}${rs.map(personBtn).join('')}`; }).join('')}</div>`;
     };
     // the week strip: each day with how many citas it has (a plain number), closed days dimmed
-    const strip = () => `<div class="cx-ag-strip" role="group" aria-label="${w.days}">${weekDays().map((d) => { const evs = loading ? [] : evOn(d); const n = evs.length; const shut = isClosed(d); return `<button class="cn-button cn-button-variant-ghost cx-size-tile cx-ag-day" data-ag-day="${+d}" aria-pressed="${sameDay(d, day)}" ${sameDay(d, today) ? 'data-today' : ''} ${shut ? 'data-closed' : ''} aria-label="${w.dayL[d.getDay()]} ${d.getDate()}, ${shut && !n ? w.closed : w.countOf(n)}"${loading ? ' disabled aria-disabled="true"' : ''}><small>${sameDay(d, today) ? w.todayShort : w.dayS[d.getDay()]}</small><b>${d.getDate()}</b><span class="cx-ag-count" aria-hidden="true">${loading ? '<s class="skel"></s>' : n || ''}</span></button>`; }).join('')}</div>`;
+    const strip = () => `<div class="cx-ag-strip" role="group" aria-label="${w.days}">${weekDays().map((d) => { const evs = loading ? [] : evOn(d); const n = evs.length; const shut = isClosed(d); return `<button class="cn-button cn-button-variant-ghost cx-size-tile cx-ag-day" data-ag-day="${+d}" aria-pressed="${sameDay(d, day)}" ${sameDay(d, today) ? 'data-today' : ''} ${shut ? 'data-closed' : ''} aria-label="${w.dayL[d.getDay()]} ${d.getDate()}, ${shut && !n ? w.closed : w.countOf(n)}"${loading ? ' disabled aria-disabled="true"' : ''}><small>${sameDay(d, today) ? w.todayShort : w.dayS[d.getDay()]}</small><b>${d.getDate()}</b>${phoneStrip === 'dots' ? `<span class="cx-ag-dots" aria-hidden="true">${loading ? '' : evs.slice(0, 4).map((e) => `<i style="background:${e.tint || 'var(--selected, var(--primary))'}"></i>`).join('')}</span>` : `<span class="cx-ag-count" aria-hidden="true">${loading ? '<s class="skel"></s>' : n || ''}</span>`}</button>`; }).join('')}</div>`;
     // «Ahora»: on today, the cita in progress (started, or whose time is now), first thing, one tap to open it
     const nowCard = () => {
       if (!sameDay(day, today)) return '';
@@ -679,7 +679,7 @@ let wheelsNow = [];
         }
       }
       const html = rows.map((r) => (typeof r === 'string' ? r : `<button class="cx-ag-row" data-kind="free" data-free="${r.start}" data-rid="${r.free[0]}" aria-label="${w.freeFromTo(clk(toHM(r.start)), clk(toHM(r.end)))}"><span class="cx-ag-row-t">${ui.text(clk(toHM(r.start)), 'strong')}${r.end - r.start > slot ? ui.text(`${w.until} ${clk(toHM(r.end))}`, 'caption') : ''}</span>${ui.text(`${w.free}${rids.length > 1 ? ` · ${r.free.map(resName).join(', ')}` : ''}`, 'muted')}<span class="cx-grow"></span>${ui.icon('plus')}</button>`)).join('');
-      return `<div class="cx-ag-list" role="list">${html || `<div class="cn-empty" style="padding:32px 12px"><div class="cn-empty-header"><div class="cn-empty-title">${isClosed(day) ? w.closed : w.noHours}</div></div></div>`}</div>`;
+      return `<div class="cx-ag-list" role="list">${html || `<div class="cn-empty" style="padding:32px 12px"><div class="cn-empty-header"><div class="cn-empty-title">${isClosed(day) ? w.closed : !rids.some((rid) => availability(rid, day).length) ? w.noHours : +day < +today && !sameDay(day, today) ? w.dayOver : sameDay(day, today) ? w.todayOver : w.noHours}</div></div></div>`}</div>`;
     };
     // LOADING keeps the very layout it is about to show: the same toolbar, strip, column heads, hours and height,
     // with grey citas where the real ones will land. Nothing jumps when the data arrives, nothing shrinks while it loads.
@@ -704,17 +704,19 @@ let wheelsNow = [];
       else return onAction(k);
       paint();
     }
+    // a week column says its day and, under it, how many citas it holds and who waits for a free hour (closed: «Cerrado»)
+    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 = () => {
       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: `${w.dayS[d.getDay()]} ${d.getDate()}`, 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 }));
+      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 }));
       clash = loading ? new Set() : findClashes();
       const crossed = loading ? 0 : evOn(day).filter((e) => clash.has(e.id)).length;
       const top = loading ? skelTop() : nowCard() + queueLine();
       const alert = crossed ? ui.alert({ icon: 'info', title: w.clash(crossed), description: w.clashHow, action: ui.button({ label: w.clashSee, size: 'sm', variant: 'outline', attrs: 'data-ag-clash' }), tone: 'bad', attrs: 'data-ag-alert' }) : '';
       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()}${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.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);
       const now = $('.cx-ag-now', root); if (now) $('.cx-ag-scroll', root).scrollTop = Math.max(0, parseFloat(now.style.top) - 120);

package/registry/legal-doc.muten

@@ -4,7 +4,7 @@
 #   DocHead(title: "Términos y condiciones") { Text "Última actualización: 7 de octubre de 2026" class("cx-doc-line") }
 #   DocBody {
 #     DocToc(label: "Contenido") { DocTocLink(label: "1. Quiénes somos", to: "#s1")  DocTocLink(label: "2. Tus datos", to: "#s2") }
-#     DocArticle { DocSection(anchor: "s1", title: "1. Quiénes somos") { Text "Storio es un producto de Candhrly LLC." class("cx-doc-p") } }
+#     DocArticle { DocSection(anchor: "s1", title: "1. Quiénes somos") { DocText(text: "Storio es un producto de Candhrly LLC.") } }
 #   }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-doc-*).
 part DocHead(title: text) {
@@ -19,6 +19,8 @@ part DocTocLink(label: text, to: text) {
   Link "{$label}" -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-nav cx-doc-toc-item") data(slot: "button", marker: "fill")
 }
 part DocArticle() { Stack class("cx-doc-article") { slot } }
+# DocText - one paragraph of a section, at reading width.
+part DocText(text: text) { Text "{$text}" class("cx-doc-p") }
 part DocSection(anchor: text, title: text) {
   Stack class("cx-doc-sec") id("{$anchor}") {
     Title "{$title}" h2 class("cx-doc-h2")

package/registry/marketing.muten

@@ -0,0 +1,167 @@
+# Marketing - the pieces a site's pages are built from (the cx-mk-* system in kit.css): a section with its title, the
+# hero's pill and two-line headline, the address field with its button, a list of checks, numbered steps, cards,
+# columns of facts, a path of steps, a checked list with explanations and the closing call. Every argument is text,
+# so the words can come from a translation function: MkCheck(label: "{t(lang, "x")}").
+#   MkSection(anchor: "how", title: "Así funciona") {
+#     MkChecks { MkCheck(label: "Sin app para tu cliente")  MkCheck(label: "Confirma solo") }
+#   }
+#   MkHero { MkHeroCopy { MkPill(label: "Para músicos") { Icon "lucide:music" }  MkHeadline(first: "Tu música,", second: "en un link.")
+#     MkClaim(value: handle, to: joinUrl, cta: "Crear mi tienda") class("animate-rise") }  … }
+#   MkCta(title: "Tu negocio,", soft: "vende y agenda solo.") { MkClaim(value: handle, to: joinUrl, cta: "Crear mi tienda") }
+# shadcn-for-muten · parts · no deps · kit.css (.cx-mk-*), uses InputGroup and LinkBtn.
+
+# MkSection - a page section at reading width with its h2. anchor is its id (a link can go to #anchor).
+part MkSection(anchor: text, title: text = "") {
+  Section class("cx-mk-sec cx-mk-col") id("{$anchor}") {
+    when $title != "" { Title "{$title}" h2 class("cx-mk-h2") }
+    slot
+  }
+}
+# MkHead - a section's heading block when it has more than the title: an eyebrow above, a lead under it, and in the
+# slot whatever follows in the same block (a button, a field).
+part MkHead(title: text, lead: text = "", eyebrow: text = "") {
+  Stack class("cx-mk-head") {
+    when $eyebrow != "" { Span "{$eyebrow}" class("cx-mk-eyebrow") }
+    Title "{$title}" h2 class("cx-mk-h2")
+    when $lead != "" { Text "{$lead}" class("cx-mk-lead") }
+    slot
+  }
+}
+# MkLead - the line under a section's title, a little closer to it than a paragraph.
+part MkLead(text: text) { Text "{$text}" class("cx-mk-lead cx-mk-sub") }
+# MkNote - a small line after a block: where a thing comes from, what it depends on.
+part MkNote(text: text) { Text "{$text}" class("cx-mk-note") }
+
+# ── the hero ──
+part MkHero() { Section class("cx-mk-hero") { slot } }
+part MkHeroCopy() { Stack class("cx-mk-hero-copy") { slot } }
+# MkPill - the brand pill over a hero's headline; its icon goes in the slot.
+part MkPill(label: text) { Stack class("cx-pill animate-rise cx-mk-pill") data(slot: "pill", tone: "brand") { slot  Span "{$label}" } }
+# MkHeadline - an h1 in two lines that fit the column (the second is part of the same sentence). fit: false keeps
+# the poster size (a home page).
+part MkHeadline(first: text, second: text, fit: bool = true) {
+  Stack class("words cx-mk-title") {
+    Title "{$first}" h1 class("cx-mk-h1", "cx-mk-h1-fit" when $fit)
+    Span "{$second}" class("cx-mk-h1", "cx-mk-h1-fit" when $fit)
+  }
+}
+# MkTitle - an h1 in one line of text. size: "fit" fits the column, "wrap" lets a whole sentence wrap a size smaller,
+# "" keeps the poster size.
+part MkTitle(text: text, size: text = "") {
+  Title "{$text}" h1 class("cx-mk-h1 words", "cx-mk-h1-fit" when $size == "fit", "cx-mk-h1-wrap" when $size == "wrap")
+}
+# MkClaim - the address field and its button: «storio.ink/ [your-name] [Create]». value is the page's text state.
+part MkClaim(value: text, to: text, cta: text, placeholder: text = "", prefix: text = "storio.ink/") {
+  Stack class("cx-mk-claim") {
+    InputGroup(size: "2xl", variant: "filled") {
+      InputAddon { InputGroupText(label: $prefix) }
+      GroupInput(value: $value, placeholder: $placeholder)
+    }
+    LinkBtn(to: $to, variant: "default", size: "2xl") { Span "{$cta}" }
+  }
+}
+# MkCta - the closing call: two lines of title (the second softer) and, in the slot, what to do (an MkClaim).
+part MkCta(title: text, soft: text) {
+  Stack class("cx-mk-cta") {
+    Stack class("cx-mk-cta-copy") { Span "{$title}" class("cx-mk-h2")  Span "{$soft}" class("cx-mk-h2 cx-mk-soft") }
+    slot
+  }
+}
+
+# ── lists ──
+# MkChecks / MkCheck - short claims, each with a check.
+part MkChecks() { Stack class("cx-mk-checks") aria(role: "list") { slot } }
+part MkCheck(label: text) { Stack class("cx-mk-check") aria(role: "listitem") { Stack class("cx-mk-ic") { Icon "lucide:check" }  Span "{$label}" } }
+# MkCheckList / MkCheckRow - two columns of things a product does, each a check, a title and how it works.
+part MkCheckList() { Stack class("cx-mk-donelist") aria(role: "list") { slot } }
+part MkCheckRow(title: text, text: text) {
+  Stack class("cx-mk-done") aria(role: "listitem") {
+    Icon "lucide:check" class("cx-mk-done-i")
+    Stack class("cx-mk-done-tx") { Span "{$title}" class("cx-mk-done-t")  Text "{$text}" class("cx-mk-done-p") }
+  }
+}
+# MkSteps / MkStep - numbered steps in boxes; the step's picture goes in the slot (a Stack class("cx-mk-step-vis")).
+part MkSteps() { Stack class("cx-mk-steps") aria(role: "list") { slot } }
+part MkStep(n: text, title: text, text: text) {
+  Stack class("cx-mk-step") aria(role: "listitem") {
+    Span "{$n}" class("cx-mk-step-n") aria(hidden: true)
+    Span "{$title}" class("cx-mk-step-t")
+    Text "{$text}" class("cx-mk-step-p")
+    slot
+  }
+}
+# MkPath / MkPathStep - a short way through, one sentence per step, numbers in circles (four across, two, then one).
+part MkPath() { Stack class("cx-mk-path") aria(role: "list") { slot } }
+part MkPathStep(n: text, text: text) {
+  Stack class("cx-mk-path-s") aria(role: "listitem") { Span "{$n}" class("cx-mk-path-n") aria(hidden: true)  Text "{$text}" class("cx-mk-path-p") }
+}
+# MkFund / MkFundCard - cards in a grid, each with a title and its paragraph; tag is a small label above (the piece
+# that does it). MkFundSource is a card that also says where its number comes from.
+part MkFund() { Stack class("cx-mk-fund") aria(role: "list") { slot } }
+part MkFundCard(title: text, text: text, tag: text = "") {
+  Stack class("cx-mk-fund-c") aria(role: "listitem") {
+    when $tag != "" { Span "{$tag}" class("cx-mk-fund-tag") }
+    Title "{$title}" h3 class("cx-mk-fund-t")
+    Text "{$text}" class("cx-mk-fund-p")
+  }
+}
+part MkFundSource(n: text, title: text, text: text, source: text) {
+  Stack class("cx-mk-fund-c") aria(role: "listitem") {
+    Span "{$n}" class("cx-mk-fund-n")
+    Title "{$title}" h3 class("cx-mk-fund-t")
+    Text "{$text}" class("cx-mk-fund-p")
+    Span "{$source}" class("cx-mk-fund-src")
+  }
+}
+# MkFacts / MkFact - columns split by hairlines, a key word and its line (four across, two, then one).
+part MkFacts() { Stack class("cx-mk-facts") aria(role: "list") { slot } }
+part MkFact(key: text, text: text) { Stack class("cx-mk-fact") aria(role: "listitem") { Span "{$key}" class("cx-mk-fact-k")  Text "{$text}" class("cx-mk-fact-p") } }
+# MkBoxes / MkBox - outlined boxes with a title and a line (three across, two, then one).
+part MkBoxes() { Stack class("cx-mk-boxes") aria(role: "list") { slot } }
+part MkBox(title: text, text: text) { Stack class("cx-mk-box") aria(role: "listitem") { Span "{$title}" class("cx-mk-box-t")  Text "{$text}" class("cx-mk-box-p") } }
+
+# ── us and them ──
+# VsTable / VsRow - a comparison of one thing per row: what, how we do it (with a check), how they do it. On a phone
+# each row stacks and the cells carry their column's name. us is the first column's name, logo its picture.
+part VsTable(us: text, them: text, logo: text = "") {
+  Stack class("cn-table-container") data(slot: "table-container") {
+    Stack class("cn-table cx-mk-vs-table") data(slot: "table") aria(role: "table") {
+      Stack class("cn-table-row cx-mk-vs-head") data(slot: "table-row") aria(role: "row") {
+        Span "" class("cn-table-head") data(slot: "table-head") aria(role: "columnheader")
+        Stack class("cn-table-head") data(slot: "table-head") aria(role: "columnheader") { Image "{$logo}" alt("{$us}") class("cx-mk-vs-logo") }
+        Span "{$them}" class("cn-table-head") data(slot: "table-head") aria(role: "columnheader")
+      }
+      slot
+    }
+  }
+}
+part VsRow(what: text, us: text, them: text, usName: text, themName: text) {
+  Stack class("cn-table-row") data(slot: "table-row") aria(role: "row") {
+    Span "{$what}" class("cn-table-cell cx-mk-vs-what") data(slot: "table-cell") aria(role: "cell")
+    Stack class("cn-table-cell cx-mk-vs-us") data(slot: "table-cell", label: $usName) aria(role: "cell") { Icon "lucide:check"  Span "{$us}" }
+    Span "{$them}" class("cn-table-cell cx-mk-vs-them") data(slot: "table-cell", label: $themName) aria(role: "cell")
+  }
+}
+
+# ── rows, features, stores ──
+# MkRows / MkRow - zigzag rows: the words on one side and a picture on the other (MkStage); reverse puts the words on
+# the right. MkRowCopy is the words: its title (an h2, or h3 under a section that already has one), a line and, in the
+# slot, anything after it (MkChecks).
+#   MkRows { MkRow { MkRowCopy(title: "Tu agenda", text: "Se llena sola.") { MkChecks { … } }  MkStage { … } } }
+part MkRows() { Stack class("cx-mk-rows") { slot } }
+part MkRow(reverse: bool = false) { Stack class("cx-mk-row", "cx-mk-rev" when $reverse) { slot } }
+part MkRowCopy(title: text, text: text, level: text = "h2") {
+  Stack class("cx-mk-row-copy") {
+    when $level == "h2" { Title "{$title}" h2 class("cx-mk-h3") }
+    when $level != "h2" { Title "{$title}" h3 class("cx-mk-h3") }
+    Text "{$text}" class("cx-mk-p")
+    slot
+  }
+}
+# MkStage - the soft panel a row's picture sits on; tone "dark" for a dark one.
+part MkStage(tone: text = "") { Stack class("cx-mk-stage", "cx-mk-stage-dark" when $tone == "dark") { slot } }
+# MkFeats / MkFeat - a grid of short features, each with its icon (in the slot) and a label.
+part MkFeats() { Stack class("cx-mk-feats") aria(role: "list") { slot } }
+part MkFeat(label: text) { Stack class("cx-mk-feat") aria(role: "listitem") { Stack class("cx-mk-ic") { slot }  Span "{$label}" } }
+# MkStore - a store in a carousel: its phone (a DeviceFrame in the slot), its name and what it is.
+part MkStore(name: text, caption: text = "") { Stack class("cx-mk-store") { slot  Span "{$name}"  Span "{$caption}" } }

package/registry/nav-button.muten

@@ -12,3 +12,19 @@ part NavButton(label: text = "", current: bool, onClick: action, variant: text =
   }
 }
 part NavBar(label: text = "Secciones", orientation: text = "horizontal") { Nav class("cx-navbar") data(orientation: $orientation) aria(label: $label) { slot } }
+
+# NavLink - a NavButton that goes to another page (a Link): the tabs between sibling pages (Terms · Privacy · Delete).
+# NavHere - the tab of the page you are on, which goes nowhere (aria-current="page", marked like a current NavButton).
+#   NavBar(label: "Documentos") { NavHere(label: "Términos", marker: "fill")  NavLink(label: "Privacidad", to: "/privacy", marker: "fill") }
+part NavLink(label: text, to: text, variant: text = "ghost", size: text = "default", marker: text = "dot") {
+  Link "" -> "{$to}" class("cn-button cn-button-variant-{$variant} cn-button-size-{$size} group/button cx-nav") data(slot: "button", marker: $marker) {
+    slot
+    Span "{$label}" class("cx-nav-label")
+  }
+}
+part NavHere(label: text, variant: text = "ghost", size: text = "default", marker: text = "dot") {
+  Stack class("cn-button cn-button-variant-{$variant} cn-button-size-{$size} group/button cx-nav") data(slot: "button", marker: $marker) aria(current: "page") {
+    slot
+    Span "{$label}" class("cx-nav-label")
+  }
+}

package/registry/segmented-control.muten

@@ -4,9 +4,10 @@
 #   SegmentedControl { SegmentedItem(value: "select", current: tool, label: "Select", onSelect: setTool) … }
 # SegmentedTabs fills its width; IconTab holds an Icon instead of a label.
 # shadcn-for-muten · part + Custom (TabsBehavior) · kit.css (.cx-tabs).
-part SegmentedControl() { Stack class("cx-tabs") data(slot: "segmented") aria(role: "group") { slot  TabsBehavior() } }
-part SegmentedItem(value: text, current: text, label: text, onSelect: action) {
-  Button "{$label}" -> $onSelect($value) class("cn-button cn-button-variant-ghost cn-button-size-sm cx-tab") aria(pressed: $value == $current)
+# label names the group for a screen reader; fill: "phone" stretches it to its row on a phone (to line up with a field).
+part SegmentedControl(label: text = "", fill: text = "") { Stack class("cx-tabs") data(slot: "segmented", fill: $fill) aria(role: "group", label: $label) { slot  TabsBehavior() } }
+part SegmentedItem(value: text, current: text, label: text, onSelect: action, size: text = "sm") {
+  Button "{$label}" -> $onSelect($value) class("cn-button cn-button-variant-ghost cn-button-size-{$size} cx-tab") aria(pressed: $value == $current)
 }
 part SegmentedTabs() { Stack class("cx-tabs cx-tabs-fill") data(slot: "segmented") { slot  TabsBehavior() } }
 part IconTab(value: text, current: text, onSelect: action) {

package/registry/stacked-bars.js

@@ -40,7 +40,7 @@ export function mount(el, inputs, on) {
       : rows.map((r, i) => {
         const tip = `${r.label}: ${series.map((s) => `${s.label} ${fmt(Number(r[s.key]) || 0, unit, locale)}`).join(' · ')}`;
         const segs = series.map((s) => { const v = Number(r[s.key]) || 0; return v > 0 ? `<span class="${NS}-seg" data-tone="${esc(s.tone || 'brand')}" style="flex-grow:${v}"></span>` : ''; }).join('');
-        return `<button type="button" class="${NS}-bar" data-id="${esc(r.id)}" aria-pressed="${String(r.id) === String(sel)}" aria-label="${esc(tip)}" data-name="${esc(tip)}"${totals[i] && !state.readonly ? '' : ' disabled'}><span class="${NS}-stack" style="height:${(totals[i] / top) * 100}%">${segs}</span></button>`;
+        return `<button type="button" class="${NS}-bar" data-id="${esc(r.id)}" aria-pressed="${String(r.id) === String(sel)}" aria-label="${esc(tip)}"${totals[i] && !state.readonly ? ` data-name="${esc(tip)}"` : ' disabled'}><span class="${NS}-stack" style="height:${(totals[i] / top) * 100}%">${segs}</span></button>`;
       }).join('');
     const xs = (busy ? SKELETON.slice(0, Math.max(rows.length, 7)).map(() => ({ label: '' })) : rows).map((r) => `<span data-id="${esc(r.id ?? '')}"${String(r.id) === String(sel) ? ' data-on' : ''}>${esc(r.label)}</span>`).join('');
     const n = busy ? Math.max(rows.length, 7) : rows.length;

package/registry.json

@@ -391,6 +391,13 @@
       "component": "GradientBlinds",
       "description": "Animated WebGL gradient + diagonal-blinds hero background that follows the cursor and fades into the page (needs ogl)."
     },
+    {
+      "name": "heatmap",
+      "deps": [],
+      "part": "Heatmap",
+      "file": "registry/heatmap.muten",
+      "description": "Rows × columns (weekday × hour), each cell darker the more it holds, a less…more scale, a note while empty."
+    },
     {
       "name": "hotkey",
       "deps": [],
@@ -428,6 +435,13 @@
       "file": "registry/indicator.muten",
       "description": "Indicator(tone): the corner dot that says something needs you."
     },
+    {
+      "name": "info-table",
+      "deps": [],
+      "part": "InfoTable",
+      "file": "registry/info-table.muten",
+      "description": "InfoTable - shadcn's Table for content (not a data grid: for rows from a list with filters, use TableView). A header row"
+    },
     {
       "name": "input-group",
       "deps": [
@@ -505,6 +519,13 @@
       "component": "KitWidget",
       "description": "Host of the system kit widgets (Custom, kit core). Use the named parts."
     },
+    {
+      "name": "legal-doc",
+      "deps": [],
+      "part": "DocHead",
+      "file": "registry/legal-doc.muten",
+      "description": "A legal document (terms, privacy): the title and its line, the contents that follow the reading, the sections at reading width."
+    },
     {
       "name": "link-btn",
       "deps": [],
@@ -527,6 +548,13 @@
       "file": "registry/logo-cloud.muten",
       "description": "BLOCK: a 'trusted by' strip of logos, muted + grayscale until hover. Parts: LogoCloud, LogoCloudItem."
     },
+    {
+      "name": "marketing",
+      "deps": [],
+      "part": "MkSection",
+      "file": "registry/marketing.muten",
+      "description": "Marketing - the pieces a site's pages are built from (the cx-mk-* system in kit.css): a section with its title, the"
+    },
     {
       "name": "member-list",
       "deps": [
@@ -613,20 +641,6 @@
       "file": "registry/navpill.muten",
       "description": "BLOCK: the floating glass navbar (sticky wrapper + glass pill + scroll animation baked in). Drop logo/links/CTA inside."
     },
-    {
-      "name": "legal-doc",
-      "deps": [],
-      "part": "DocHead",
-      "file": "registry/legal-doc.muten",
-      "description": "A legal document (terms, privacy): the title and its line, the contents that follow the reading, the sections at reading width."
-    },
-    {
-      "name": "phone-bar",
-      "deps": [],
-      "part": "PhoneBar",
-      "file": "registry/phone-bar.muten",
-      "description": "The app's bar at the bottom of a phone: three fixed cells (menu · the screen's tools · its create). Screens hand it their toolbar buttons on a phone."
-    },
     {
       "name": "new-appointment",
       "deps": [],
@@ -699,6 +713,13 @@
       "file": "registry/permission-matrix.muten",
       "description": "PermissionMatrix - any rows × any roles; one role can be locked (always allowed)."
     },
+    {
+      "name": "phone-bar",
+      "deps": [],
+      "part": "PhoneBar",
+      "file": "registry/phone-bar.muten",
+      "description": "The app's bar at the bottom of a phone: three fixed cells (menu · the screen's tools · its create). Screens hand it their toolbar buttons on a phone."
+    },
     {
       "name": "phone-field",
       "deps": [],
@@ -783,6 +804,15 @@
       "component": "RangeSlider",
       "description": "RangeSlider(lo, hi, min, max, step, onLo, onHi): two thumbs on the kit ScaleSlider."
     },
+    {
+      "name": "rank-item",
+      "deps": [
+        "progress"
+      ],
+      "part": "RankItem",
+      "file": "registry/rank-item.muten",
+      "description": "A ranking row or a thing to act on: a lead (rank or count), title, tag, a line, an optional share bar, the value, and an action in the slot."
+    },
     {
       "name": "resizable",
       "deps": [],
@@ -853,6 +883,13 @@
       "file": "registry/separator.muten",
       "description": "Separator(orientation): a hairline. horizontal | vertical."
     },
+    {
+      "name": "share-bar",
+      "deps": [],
+      "part": "ShareBar",
+      "file": "registry/share-bar.muten",
+      "description": "How one whole splits: a bar at 100 % cut into its parts, each in its tone, with each part's value and name under it."
+    },
     {
       "name": "share-button",
       "deps": [],
@@ -875,6 +912,13 @@
       "file": "registry/sidebar.muten",
       "description": "AppSidebar - a collapsible nav panel (SidebarHeader / SidebarGroup / SidebarItem). Named AppSidebar so it never shadows muten's core Sidebar <aside> primitive."
     },
+    {
+      "name": "site-footer",
+      "deps": [],
+      "part": "SiteFooter",
+      "file": "registry/site-footer.muten",
+      "description": "A site's footer: the brand and its two ways in over a hairline, every group of links on one row, then a bar with the company and contacts (FooterHead, FooterBrand, FooterActions, FooterLinks, FooterCol, FooterBar)."
+    },
     {
       "name": "skeleton",
       "deps": [],
@@ -937,6 +981,14 @@
       "file": "registry/split-button.muten",
       "description": "A main action + a caret dropdown; page owns the open bool."
     },
+    {
+      "name": "stacked-bars",
+      "deps": [],
+      "part": "StackedBars",
+      "file": "registry/stacked-bars.muten",
+      "component": "StackedBars",
+      "description": "Bars over time with series stacked, an axis in the page's unit, a bar you can pick, an empty note and a skeleton."
+    },
     {
       "name": "stamp-card",
       "deps": [
@@ -1107,6 +1159,13 @@
       "file": "registry/vector-field.muten",
       "description": "Paired NumberFields (X/Y) for position or size."
     },
+    {
+      "name": "veil",
+      "deps": [],
+      "part": "Veil",
+      "file": "registry/veil.muten",
+      "description": "A calm note (title and line) over a card's content while it has nothing to show yet; the content stays faded behind."
+    },
     {
       "name": "virtual-list",
       "deps": [],
@@ -1137,51 +1196,6 @@
       "part": "ZoomControl",
       "file": "registry/zoom-control.muten",
       "description": "A - 100% + zoom widget; page owns the zoom number."
-    },
-    {
-      "name": "site-footer",
-      "deps": [],
-      "part": "SiteFooter",
-      "file": "registry/site-footer.muten",
-      "description": "A site's footer: the brand and its two ways in over a hairline, every group of links on one row, then a bar with the company and contacts (FooterHead, FooterBrand, FooterActions, FooterLinks, FooterCol, FooterBar)."
-    },
-    {
-      "name": "share-bar",
-      "deps": [],
-      "part": "ShareBar",
-      "file": "registry/share-bar.muten",
-      "description": "How one whole splits: a bar at 100 % cut into its parts, each in its tone, with each part's value and name under it."
-    },
-    {
-      "name": "heatmap",
-      "deps": [],
-      "part": "Heatmap",
-      "file": "registry/heatmap.muten",
-      "description": "Rows × columns (weekday × hour), each cell darker the more it holds, a less…more scale, a note while empty."
-    },
-    {
-      "name": "stacked-bars",
-      "deps": [],
-      "part": "StackedBars",
-      "file": "registry/stacked-bars.muten",
-      "description": "Bars over time with series stacked, an axis in the page's unit, a bar you can pick, an empty note and a skeleton.",
-      "component": "StackedBars"
-    },
-    {
-      "name": "rank-item",
-      "deps": [
-        "progress"
-      ],
-      "part": "RankItem",
-      "file": "registry/rank-item.muten",
-      "description": "A ranking row or a thing to act on: a lead (rank or count), title, tag, a line, an optional share bar, the value, and an action in the slot."
-    },
-    {
-      "name": "veil",
-      "deps": [],
-      "part": "Veil",
-      "file": "registry/veil.muten",
-      "description": "A calm note (title and line) over a card's content while it has nothing to show yet; the content stays faded behind."
     }
   ],
   "classComponents": {