@muten/shadcn 0.1.2 → 0.1.4

package/AGENTS.md

@@ -45,6 +45,11 @@ its own bugs, and is one more thing to fix. So before you write any UI piece, wa
 | a menu, a searchable picker | `DropdownMenu`, `Combobox` | a native `<select>` |
 | dates and times, an agenda | `Calendar`, `DateField`, `TimeField`, `AgendaLive` | an input with a library |
 | a KPI, a price, a status | `StatCard`, `Price`, `Badge` / `StatusBadge` | a styled number |
+| a chart: bars, line, area, pie, donut, scatter | muten's `Chart` primitive (styled by the library) | an SVG or a chart library |
+| bars over time with stacked series, a pickable bar, an axis in money | `StackedBars(rows, series, selected, unit, empty, busy, onPick)` | bars of divs |
+| how a whole splits (citas vs pedidos, new vs returning) | `ShareBar(parts)` | two flex boxes |
+| how much happens where two things cross (day × hour) | `Heatmap(rows, cols, cells)` | a grid of coloured cells |
+| a bar per row (channels, a ranking) | `Progress(value, tone)` | a width in % |
 | a legal or long document | `DocHead`, `DocToc` + `DocTocLink`, `DocSection` | a wall of paragraphs |
 | a hero background, a product tour | `GradientBlinds(colors, from)`, `ScreenTour` | your own canvas or gradient |
 | text with the library's type scale | `Txt(value, variant: "title" \| "heading" \| "muted" \| "caption")` | font sizes in your CSS |

package/kit.css

@@ -5006,22 +5006,186 @@ a.cx-bc-item:hover { color: var(--foreground); }
 /* ScreenTour: the step's bar is placed by left/right; the progress part's own width: 100% pushed it 40px past the step. */
 .cx-tour-steps > li > .cx-stp-bar { width: auto; }
 
-/* ═════ CHART (muten's native primitive) ═════
+/* ═════ CHART (muten's native primitive) and THE SERIES PALETTE ═════
+   One palette for every chart of the library: Chart's series (mu-chart-sN) and the tone of Progress, ShareBar,
+   StackedBars and Heatmap (data-tone="brand|coral|teal|amber|blue|pink"), so a series keeps its colour everywhere. */
+/* (Chart) 
    One series wears the skin's accent (the area's fill follows it, it is currentColor); a series per colour (pie, donut,
    color(field)) takes the palette below, chosen to stay apart from the accent in light and dark. The legend is swatch + name. */
 .mu-chart-wrap { width: 100%; max-width: 640px; margin: 0; gap: 14px; }
 .mu-chart { color: var(--selected, var(--primary)); }
 .mu-chart-bar, .mu-chart-dot { fill: currentColor; }
 .mu-chart-line { stroke: currentColor; }
-.mu-chart-s0 { --s: var(--selected, var(--primary)); }
-.mu-chart-s1 { --s: oklch(0.7 0.14 168); }
-.mu-chart-s2 { --s: oklch(0.78 0.15 78); }
-.mu-chart-s3 { --s: oklch(0.66 0.19 22); }
-.mu-chart-s4 { --s: oklch(0.68 0.13 238); }
-.mu-chart-s5 { --s: oklch(0.7 0.16 330); }
-.mu-chart-s6 { --s: oklch(0.62 0.05 260); }
-.mu-chart-s7 { --s: oklch(0.8 0.1 120); }
-:is(.mu-chart-bar, .mu-chart-dot, .mu-chart-slice)[class*="mu-chart-s"] { fill: var(--s); }
+.mu-chart-s0 { --series: var(--selected, var(--primary)); }
+.mu-chart-s1, [data-tone="coral"] { --series: oklch(0.66 0.19 22); }
+.mu-chart-s2, [data-tone="teal"] { --series: oklch(0.7 0.14 168); }
+.mu-chart-s3, [data-tone="amber"] { --series: oklch(0.78 0.15 78); }
+.mu-chart-s4, [data-tone="blue"] { --series: oklch(0.68 0.13 238); }
+.mu-chart-s5, [data-tone="pink"] { --series: oklch(0.7 0.16 330); }
+.mu-chart-s6 { --series: oklch(0.62 0.05 260); }
+.mu-chart-s7 { --series: oklch(0.8 0.1 120); }
+[data-tone="brand"] { --series: var(--selected, var(--primary)); }
+:is(.mu-chart-bar, .mu-chart-dot, .mu-chart-slice)[class*="mu-chart-s"] { fill: var(--series); }
 .mu-chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; color: var(--muted-foreground); }
 .mu-chart-legend-item { display: flex; flex-direction: row; align-items: center; gap: 7px; }
-.mu-chart-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--s); flex: none; }
+.mu-chart-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--series); flex: none; }
+
+/* Progress with a tone: the bar takes the series colour */
+.cn-progress[data-tone]:not([data-tone=""]) > .cn-progress-indicator { background: var(--series); }
+
+/* ShareBar (share-bar.muten): one whole cut into its parts, each part's value and name under it */
+.cx-split { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
+.cx-split-bar { display: flex; flex-direction: row; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--muted); }
+.cx-split-seg { flex: var(--f, 0) 1 0; min-width: 0; background: var(--series, var(--primary)); transition: flex-grow .5s cubic-bezier(.22, 1, .36, 1); }
+.cx-split-seg[style*="--f: 0;"], .cx-split-seg[style*="--f:0;"] { display: none; }
+.cx-split-keys { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 32px; }
+.cx-split-key { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.cx-split-v { font-size: 18px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
+.cx-split-l { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 13px; color: var(--muted-foreground); }
+.cx-split-l::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--series, var(--primary)); flex: none; }
+@media (prefers-reduced-motion: reduce) { .cx-split-seg { transition: none; } }
+
+/* Heatmap (heatmap.muten): rows × columns, seven levels of the tone, a scale under it */
+.cx-heat { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
+.cx-heat-grid { position: relative; display: grid; grid-template-columns: 40px repeat(var(--n, 12), minmax(0, 1fr)); gap: 4px; align-items: center; }
+.cx-heat-x { font-size: 11.5px; color: var(--muted-foreground); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.cx-heat-y { font-size: 12px; color: var(--muted-foreground); }
+.cx-heat-c { display: block; aspect-ratio: 1.4; min-width: 0; border-radius: 5px; background: var(--muted); }
+.cx-heat-c[data-level="1"] { background: color-mix(in oklab, var(--series) 18%, var(--muted)); }
+.cx-heat-c[data-level="2"] { background: color-mix(in oklab, var(--series) 34%, var(--muted)); }
+.cx-heat-c[data-level="3"] { background: color-mix(in oklab, var(--series) 52%, var(--muted)); }
+.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; }
+.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; }
+
+/* StackedBars (stacked-bars.js): series stacked per bar, an axis in the page's unit, a bar that can be picked */
+.cx-stb { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
+.cx-stb-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; font-size: 13px; color: var(--muted-foreground); }
+.cx-stb-legend li { display: flex; align-items: center; gap: 7px; }
+.cx-stb-legend li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--series); }
+.cx-stb-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; }
+.cx-stb-y { display: flex; flex-direction: column; justify-content: space-between; height: 220px; font-size: 11.5px; color: var(--muted-foreground); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.cx-stb-y > span { line-height: 1; transform: translateY(-50%); } .cx-stb-y > span:first-child { transform: none; } .cx-stb-y > span:last-child { transform: translateY(0); }
+.cx-stb-plot { position: relative; height: 220px; }
+.cx-stb-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
+.cx-stb-grid i { border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
+.cx-stb-bars { position: relative; height: 100%; display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 14px); align-items: end; }
+.cx-stb-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
+.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-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; }
+.cx-stb-x > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cx-stb-x > span[data-on] { color: var(--foreground); font-weight: 700; }
+@media (prefers-reduced-motion: reduce) { .cx-stb-stack { transition: none; } }
+
+/* StatCard: the line under the number, the one thing to do at its foot, the skeleton while it loads */
+.cx-stat { display: flex; flex-direction: column; }
+.cx-stat > .cx-stat-body { flex: 1; }
+.cx-stat-line:empty, .cx-stat-delta:has(> .cn-badge:empty):has(> .cx-text:empty), .cx-stat-delta > .cn-badge:empty { display: none; }
+.cx-stat-go { margin-top: auto; padding-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--selected, var(--primary)); text-decoration: none; }
+.cx-stat-go::after { content: "→"; transition: transform .15s; }
+.cx-stat-go:hover::after { transform: translateX(2px); }
+.cx-stat-go:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
+.cx-stat-sk-v { width: 55%; height: 26px; border-radius: 6px; }
+.cx-stat-sk-l { width: 80%; height: 12px; border-radius: 6px; }
+
+/* RankItem (rank-item.muten): a ranking row or a thing to act on */
+.cx-rank { padding-inline: 0; align-items: center; }
+.cx-rank-lead { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 32px; width: auto; padding-inline: 6px; }
+.cx-rank-mid { gap: 6px; min-width: 0; }
+.cx-rank-t { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
+.cx-rank-t > .cn-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cx-rank-t > .cn-badge { flex: none; }
+.cx-rank-sub:empty { display: none; }
+.cx-rank-end { flex-direction: row; align-items: center; gap: 10px; }
+.cx-rank-v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.cx-rank-v:empty { display: none; }
+.cx-rank-sk-t { width: 60%; height: 13px; border-radius: 6px; }
+.cx-rank-sk-s { width: 35%; height: 11px; border-radius: 6px; }
+.cx-rank-sk-v { width: 64px; height: 13px; border-radius: 6px; }
+
+/* Veil (veil.muten): a note over content that has nothing to show yet */
+.cx-veil { position: relative; width: 100%; display: block; }
+.cx-veil-body { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
+.cx-veil-body > * { width: 100%; }
+.cx-veil[data-on="true"] > .cx-veil-body { opacity: .45; filter: saturate(.4); pointer-events: none; user-select: none; }
+.cx-veil-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; text-align: center; pointer-events: none; }
+.cx-veil-note > * { max-width: 34ch; }
+.cx-veil-t { font-size: 15px; font-weight: 650; }
+.cx-veil-s { font-size: 13.5px; color: var(--muted-foreground); line-height: 1.45; }
+.cx-veil-note * { text-wrap: balance; }
+
+/* the one empty note of the charts (Veil, Heatmap, StackedBars): a floating box over the faded content */
+.cx-veil-box { display: flex; flex-direction: column; gap: 4px; max-width: 36ch; padding: 14px 18px; border-radius: 14px; background: var(--popover, var(--background)); box-shadow: 0 10px 30px -14px rgb(0 0 0 / .3), 0 0 0 1px var(--border); text-align: center; }
+.cx-veil-t:empty { display: none; }
+.cx-heat-grid > .cx-veil-note { inset: 0 0 0 44px; }
+.cx-heat:has(.cx-veil-note) .cx-heat-c:not(.cx-heat-scale > *) { background: var(--muted); }
+/* skeletons */
+.cx-heat[data-busy="true"] .cx-heat-grid > .cx-heat-c { background: var(--muted); animation: cx-sk-pulse 1.4s ease-in-out infinite; }
+.cx-split[data-busy="true"] .cx-split-seg { visibility: hidden; }
+.cx-split[data-busy="true"] .cx-split-bar { animation: cx-sk-pulse 1.4s ease-in-out infinite; }
+.cx-split[data-busy="true"] .cx-split-v { color: transparent; border-radius: 6px; background: var(--muted); animation: cx-sk-pulse 1.4s ease-in-out infinite; }
+@keyframes cx-sk-pulse { 50% { opacity: .55; } }
+@media (prefers-reduced-motion: reduce) { .cx-heat[data-busy="true"] .cx-heat-c, .cx-split[data-busy="true"] .cx-split-bar, .cx-split[data-busy="true"] .cx-split-v { animation: none; } }
+
+.cx-stats { width: 100%; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-auto-rows: 1fr; }
+
+/* StatBand look "tiles": each number on a soft tile, left-aligned (a card inside an app) */
+.cx-statband[data-look="tiles"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; border-block: 0; }
+.cx-statband[data-look="tiles"] > .cx-statband-cell { align-items: flex-start; text-align: left; gap: 2px; padding: 14px 16px; border-radius: calc(var(--radius) * 1.2); background: var(--muted); }
+.cx-statband[data-look="tiles"] > .cx-statband-cell + .cx-statband-cell { border-left: 0; }
+.cx-statband[data-look="tiles"] .cx-statband-value { font-size: 26px; }
+.cx-statband[data-look="tiles"] .cx-statband-value > .cn-skeleton { width: 48px; height: 26px; border-radius: 6px; background: color-mix(in oklab, var(--foreground) 12%, var(--muted)); }
+/* 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; }

package/package.json

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

package/registry/heatmap.muten

@@ -0,0 +1,30 @@
+# Heatmap - how much happens where two things cross: rows × columns (weekday × hour, week × day), each cell darker the
+# more it holds, a «less … more» scale under it. A cell says its count to a screen reader and on hover. With `empty`,
+# a calm note sits over the grid until there is something to show (emptyTitle on top of it). busy: true shows the grid
+# as a skeleton while it loads.
+#   Heatmap(rows: days, cols: hours, cells: heat, less: "Menos", more: "Más citas", label: "Citas por día y hora")
+# rows {id, label} · cols {label} (an empty label keeps the column unlabelled) · cells {row, level 0-6, tip}, row by row,
+# as many per row as there are cols. tone: the scale's colour (brand by default; coral | teal | amber | blue | pink).
+# shadcn-for-muten · part · no deps · kit.css (.cx-heat).
+part Heatmap(rows: list, cols: list, cells: list, label: text = "", less: text = "Menos", more: text = "Más", empty: text = "", emptyTitle: text = "", tone: text = "brand", busy: bool = false) {
+  Stack class("cx-heat") data(tone: $tone, busy: $busy) aria(busy: $busy) {
+    Stack class("cx-heat-grid") style(n: "{$cols.length}") aria(role: "img", label: $label) {
+      Span "" class("cx-heat-corner")
+      each $cols as col { Span "{col.label}" class("cx-heat-x") }
+      each $rows as row {
+        Span "{row.label}" class("cx-heat-y")
+        each $cells as cell where cell.row == row.id { Span "" class("cx-heat-c") data(level: cell.level, name: cell.tip) aria(label: cell.tip) }
+      }
+      when $empty != "" and not $busy { Stack class("cx-veil-note") { Stack class("cx-veil-box") { Span "{$emptyTitle}" class("cx-veil-t")  Span "{$empty}" class("cx-veil-s") } } }
+    }
+    Stack class("cx-heat-scale") aria(hidden: true) {
+      Span "{$less}"
+      Span "" class("cx-heat-c") data(level: 0)
+      Span "" class("cx-heat-c") data(level: 2)
+      Span "" class("cx-heat-c") data(level: 4)
+      Span "" class("cx-heat-c") data(level: 5)
+      Span "" class("cx-heat-c") data(level: 6)
+      Span "{$more}"
+    }
+  }
+}

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/marketing.muten

@@ -0,0 +1,144 @@
+# 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")
+  }
+}

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/progress.muten

@@ -1,7 +1,10 @@
 # Progress - a determinate bar, value 0-100; it eases between values.  Progress(value: done, label: "Pasos hechos")
+# tone: the bar's colour from the series palette: brand (the skin's accent) | coral | teal | amber | blue | pink. Empty: the
+# primary colour. A row of channels or a ranking is a Progress per row, each in its tone.
+#   Progress(value: 46, tone: "coral", label: "Instagram")
 # shadcn-for-muten · part · no deps · Nova (.cn-progress) + kit.css (the value rides --w).
-part Progress(value: number, label: text = "Progreso") {
-  Stack class("cn-progress") data(slot: "progress") aria(role: "progressbar", label: $label, valuemin: 0, valuemax: 100, valuenow: $value) {
+part Progress(value: number, label: text = "Progreso", tone: text = "") {
+  Stack class("cn-progress") data(slot: "progress", tone: $tone) aria(role: "progressbar", label: $label, valuemin: 0, valuemax: 100, valuenow: $value) {
     Stack class("cn-progress-indicator") data(slot: "progress-indicator") style(w: "{$value}%")
   }
 }

package/registry/rank-item.muten

@@ -0,0 +1,32 @@
+# RankItem - one row of a ranking or a short list of things to act on: a lead (the rank «1», or a count «13»), the title
+# with an optional tag, a line under it, an optional bar for its share, and the value on the right. Whatever goes in
+# the slot sits at the end of the row (an action: «Agregar», «Responder»).
+#   RankItem(lead: "1", title: "Corte clásico", tag: "Servicio", sub: "38 veces", value: "USD 760", share: 100)
+#   RankItem(lead: "13", title: "«tinte»", sub: "No está entre tus servicios") { Btn(variant: "outline", size: "sm", onClick: addService) { Span "Agregar" } }
+# share: 0-100 draws a Progress under the title (leave it at -1 for none). tone: the bar's colour (series palette).
+# busy: true keeps the row's shape with a skeleton.
+# shadcn-for-muten · part · no deps · kit.css (.cx-rank) + Item, Badge, Progress.
+part RankItem(lead: text, title: text = "", tag: text = "", sub: text = "", value: text = "", share: number = -1, tone: text = "brand", busy: bool = false) {
+  Stack class("cn-item cn-item-variant-default cn-item-size-sm cx-rank") data(slot: "item", size: "sm", busy: $busy) {
+    Stack class("cn-item-media cn-item-media-variant-icon cx-rank-lead") data(slot: "item-media", variant: "icon") { Span "{$lead}" }
+    Stack class("cn-item-content cx-rank-mid") data(slot: "item-content") {
+      when $busy {
+        Skeleton() class("cx-rank-sk-t")
+        Skeleton() class("cx-rank-sk-s")
+      }
+      when not $busy {
+        Stack class("cx-rank-t") {
+          Span "{$title}" class("cn-item-title") data(slot: "item-title")
+          when $tag != "" { Span "{$tag}" class("cn-badge cn-badge-variant-secondary group/badge") data(slot: "badge") }
+        }
+        Text "{$sub}" class("cn-item-description cx-rank-sub") data(slot: "item-description")
+        when $share >= 0 { Progress(value: $share, label: $title, tone: $tone) }
+      }
+    }
+    Stack class("cn-item-actions cx-rank-end") data(slot: "item-actions") {
+      when $busy { Skeleton() class("cx-rank-sk-v") }
+      when not $busy { Span "{$value}" class("cx-rank-v") }
+      slot
+    }
+  }
+}

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/share-bar.muten

@@ -0,0 +1,22 @@
+# ShareBar - how one whole splits: a bar at 100 % cut into its parts, each in its tone, and under it each part's value
+# and name. Citas against pedidos, new clients against returning ones. All parts at 0 leave the empty track. busy: true
+# shows the bar and the values as a skeleton while they load.
+#   ShareBar(parts: split, label: "Ganado por tipo")
+# parts {label, value (a number: the part's weight), text (what is written: "USD 3.240", "28"), tone}
+# tone: brand | coral | teal | amber | blue | pink (the series palette; Chart and StackedBars use the same colours).
+# shadcn-for-muten · part · no deps · kit.css (.cx-split).
+part ShareBar(parts: list, label: text = "", busy: bool = false) {
+  Stack class("cx-split") data(busy: $busy) aria(busy: $busy) {
+    Stack class("cx-split-bar") aria(role: "img", label: $label) {
+      each $parts as part { Span "" class("cx-split-seg") data(tone: part.tone) style(f: "{part.value}") }
+    }
+    Stack class("cx-split-keys") {
+      each $parts as part {
+        Stack class("cx-split-key") {
+          Span "{part.text}" class("cx-split-v")
+          Span "{part.label}" class("cx-split-l") data(tone: part.tone)
+        }
+      }
+    }
+  }
+}

package/registry/stacked-bars.js

@@ -0,0 +1,75 @@
+// StackedBars (muten Custom) - bars over time with one or more series stacked in each (citas + pedidos by month), an
+// axis in the page's unit (USD 8K), a bar you can pick (it says so with aria-pressed and sends its id), a note over the
+// plot while there is nothing to show, and a skeleton while it loads. The data changes in place: the bars slide to their
+// new height, nothing blinks. inputs: rows [{id, label, <key>: number, …}], series [{key, label, tone}], selected,
+// unit ("USD", "$" or empty for plain numbers), locale, empty, emptyTitle, busy, readonly, label. on: pick(id).
+const NS = 'cx-stb';
+const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const list = (v) => (Array.isArray(v) ? v : []);
+const SKELETON = [38, 52, 44, 61, 57, 70, 48, 66, 59, 74, 30, 22];
+
+// a round top for the axis: 4 steps of 1, 2, 2.5 or 5 × a power of ten
+const niceTop = (max) => {
+  if (max <= 0) return 4;
+  const rough = max / 4, mag = Math.pow(10, Math.floor(Math.log10(rough))), norm = rough / mag;
+  const step = (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10) * mag;
+  return step * 4;
+};
+
+export function mount(el, inputs, on) {
+  let state = { ...inputs }, sel = inputs.selected ?? '', drawn = false;
+  const num = (locale) => new Intl.NumberFormat(locale || 'es', { useGrouping: 'always' });   // 1.800, not 1800 (es leaves 4 digits ungrouped)
+  // a word unit takes a space (USD 40), a symbol does not ($40)
+  const withUnit = (text, unit) => (!unit ? text : /^[A-Za-z]{2,}$/.test(unit) ? `${unit} ${text}` : `${unit}${text}`);
+  const fmt = (v, unit, locale) => withUnit(num(locale).format(v), unit);
+  const short = (v, unit, locale) => {
+    const a = Math.abs(v), r = (x) => num(locale).format(Math.round(x * 10) / 10);
+    const s = a >= 1e6 ? r(v / 1e6) + 'M' : a >= 1e3 ? r(v / 1e3) + 'K' : num(locale).format(v);
+    return v === 0 ? '0' : withUnit(s, unit);
+  };
+
+  const paint = () => {
+    const rows = list(state.rows), series = list(state.series), unit = state.unit || '', locale = state.locale || 'es';
+    const totals = rows.map((r) => series.reduce((sum, s) => sum + (Number(r[s.key]) || 0), 0));
+    const top = niceTop(Math.max(0, ...totals)), busy = !!state.busy, none = !busy && totals.every((t) => t === 0);
+    const legend = series.length > 1 ? `<ul class="${NS}-legend">${series.map((s) => `<li data-tone="${esc(s.tone || 'brand')}">${esc(s.label)}</li>`).join('')}</ul>` : '';
+    // nothing to measure yet: only the 0 stays on the axis
+    const ticks = [4, 3, 2, 1, 0].map((k) => `<span>${busy || (none && k) ? '' : esc(short((top / 4) * k, unit, locale))}</span>`).join('');
+    const bars = busy
+      ? SKELETON.slice(0, Math.max(rows.length, 7)).map((h) => `<span class="${NS}-bar"><span class="cn-skeleton ${NS}-sk" style="height:${h}%"></span></span>`).join('')
+      : 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>`;
+      }).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;
+    el.innerHTML = `${legend}<div class="${NS}-body"><div class="${NS}-y" aria-hidden="true">${ticks}</div><div class="${NS}-plot"><div class="${NS}-grid" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div><div class="${NS}-bars" role="group" aria-label="${esc(state.label || '')}" style="--n:${n}"${busy ? ' aria-busy="true"' : ''}>${bars}</div>${none && state.empty ? `<div class="cx-veil-note"><div class="cx-veil-box">${state.emptyTitle ? `<span class="cx-veil-t">${esc(state.emptyTitle)}</span>` : ''}<span class="cx-veil-s">${esc(state.empty)}</span></div></div>` : ''}</div><span></span><div class="${NS}-x" aria-hidden="true" style="--n:${n}">${xs}</div></div>`;
+    if (!drawn && !busy && rows.length && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      el.querySelectorAll(`.${NS}-stack`).forEach((s, i) => s.animate([{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }], { duration: 480, delay: i * 24, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' }));
+      drawn = true;
+    }
+  };
+
+  // only the pressed state moves on a pick: the bars stay where they are
+  const mark = () => {
+    el.querySelectorAll(`.${NS}-bar[data-id]`).forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.id === String(sel))));
+    el.querySelectorAll(`.${NS}-x > span`).forEach((x) => x.toggleAttribute('data-on', x.dataset.id === String(sel)));
+  };
+  el.addEventListener('click', (e) => {
+    const bar = e.target.closest(`.${NS}-bar[data-id]`);
+    if (!bar || bar.disabled) return;
+    sel = bar.dataset.id; mark(); on?.pick?.(sel);
+  });
+
+  paint();
+  return (next) => {
+    const selChanged = (next.selected ?? '') !== (state.selected ?? '');
+    state = { ...next };
+    if (selChanged) sel = next.selected ?? '';
+    // same rows and series, only the pick moved: no repaint
+    const old = el.querySelectorAll(`.${NS}-bar[data-id]`).length;
+    paint();
+    if (old && !state.busy) mark();
+  };
+}

package/registry/stacked-bars.muten

@@ -0,0 +1,13 @@
+# StackedBars - bars over time with one or more series stacked in each: the year by month, citas and pedidos together.
+# The axis is in the page's unit (USD 8K), a bar can be picked (it is pressed, and onPick gets its id), while nothing
+# is there yet a calm note sits over the plot (`empty`, with `emptyTitle` on top), and while it loads (`busy`) a skeleton keeps the shape. When the
+# data changes the bars slide to their new height. Each bar says its values to a screen reader and on hover.
+#   StackedBars(rows: @months, series: @kinds, selected: monthId, unit: "USD", onPick: pickMonth, label: "Ventas por mes")
+# rows {id, label, <key>: number…} · series {key, label, tone}: tone brand | coral | teal | amber | blue | pink, the
+# series palette (the first series sits at the bottom). One series is a plain bar chart. A legend shows from two.
+# readonly: true shows the pick but lets no bar be pressed (a plan that cannot change month).
+# For a single quick chart with no picking, muten's own `Chart` primitive is enough.
+# shadcn-for-muten · Custom · no deps · host JS stacked-bars.js · kit.css (.cx-stb).
+part StackedBars(rows: list, series: list, selected: text = "", unit: text = "", locale: text = "es", empty: text = "", emptyTitle: text = "", busy: bool = false, readonly: bool = false, label: text = "", onPick: action) {
+  Custom StackedBars inputs(rows: $rows, series: $series, selected: $selected, unit: $unit, locale: $locale, empty: $empty, emptyTitle: $emptyTitle, busy: $busy, readonly: $readonly, label: $label) on(pick: $onPick) class("cx-stb")
+}

package/registry/stat-band.muten

@@ -1,6 +1,10 @@
 # StatBand - a row of big numbers split by hairlines (two per row on a phone). Each Stat holds its value in the slot
 # (a Span, or a CountUp that counts up when it comes into view) and its label under it.
 #   StatBand { Stat(label: "citas al mes") { CountUp(to: "12,400") }  Stat(label: "tiendas") { Span "850" } }
+# look: "tiles" puts each number on its own soft tile, left-aligned, for a card inside an app (what the bot did this
+# month: «0 reservas que cerró solo»); the default is the landing's band, centred between hairlines.
+#   StatBand(look: "tiles") { Stat(label: "reservas que cerró solo") { Span "12" }  Stat(label: "pedidos que tomó solo") { Span "5" } }
+# While the numbers load, put a Skeleton in each Stat's slot.
 # shadcn-for-muten · parts · no deps · kit.css (.cx-statband).
-part StatBand() { Stack class("cx-statband") { slot } }
+part StatBand(look: text = "") { Stack class("cx-statband") data(look: $look) { slot } }
 part Stat(label: text) { Stack class("cx-statband-cell") { Stack class("cx-statband-value") { slot }  Span "{$label}" class("cx-statband-label") } }

package/registry/stat.muten

@@ -2,21 +2,33 @@
 # its line. The icon goes in the slot (or leave it empty). `tone` says if the change is good (ok) or bad (bad) -
 # for a cost or a wait, going down is the good one.
 #   StatCard(label: "Ventas", value: "$1.284.000", delta: "▲ 12 %", tone: "ok", compare: "vs. semana pasada", series: "3,5,4,6,5,8,9") { Icon "lucide:credit-card" }
+# A card that asks for something (what is owed, orders to confirm): `line` says what the number means and `to` + `cta`
+# is the one thing to do about it, written at the foot of the card.
+#   StatCard(label: "Por cobrar", value: "USD 305", line: "4 citas sin marcar como pagadas", to: "/close-day", cta: "Cerrar el día") { Icon "lucide:clock" }
+# busy: true keeps the card's shape with a skeleton while the number loads (the label stays).
 # Lay several in a StatGrid. Spark draws the series alone: Spark(series: "3,5,4", tone: "success").
 # shadcn-for-muten · part + Custom (Spark.js) · kit.css (.cx-stat).
-part StatCard(label: text, value: text, delta: text, tone: text = "ok", compare: text = "", series: text = "") {
-  Section class("cn-card cx-stat") data(slot: "card", size: "sm") {
+part StatCard(label: text, value: text = "", delta: text = "", tone: text = "ok", compare: text = "", series: text = "", line: text = "", to: text = "", cta: text = "", busy: bool = false) {
+  Section class("cn-card cx-stat") data(slot: "card", size: "sm", busy: $busy) {
     Stack class("cx-stat-body") {
       Stack class("cx-stat-row") {
         Span "{$label}" class("cx-text") data(slot: "text", variant: "muted")
         Stack class("cx-stat-ic") { slot }
       }
-      Span "{$value}" class("cx-text") data(slot: "text", variant: "title")
-      Stack class("cx-stat-row") {
-        Span "{$delta}" class("cn-badge cn-badge-variant-ghost group/badge") data(slot: "badge", variant: "status", tone: $tone)
-        Span "{$compare}" class("cx-text") data(slot: "text", variant: "caption")
+      when $busy {
+        Skeleton() class("cx-stat-sk-v")
+        Skeleton() class("cx-stat-sk-l")
+      }
+      when not $busy {
+        Span "{$value}" class("cx-text") data(slot: "text", variant: "title")
+        Span "{$line}" class("cx-text cx-stat-line") data(slot: "text", variant: "caption")
+        Stack class("cx-stat-row cx-stat-delta") {
+          Span "{$delta}" class("cn-badge cn-badge-variant-ghost group/badge") data(slot: "badge", variant: "status", tone: $tone)
+          Span "{$compare}" class("cx-text") data(slot: "text", variant: "caption")
+        }
+        Spark(series: $series, tone: $tone)
+        when $to != "" { Link "{$cta}" -> "{$to}" class("cx-stat-go") }
       }
-      Spark(series: $series, tone: $tone)
     }
   }
 }

package/registry/veil.muten

@@ -0,0 +1,18 @@
+# Veil - a calm note over a card's content while it has nothing to show yet: the content stays behind, faded (ghost
+# rows, an empty chart), and a title and a line say what will appear. With `on` false it is the content alone.
+#   Veil(on: noSales, title: "Nada vendido todavía", text: "Lo que más te reserven y te compren aparece aquí.") { … }
+# StackedBars and Heatmap carry their own (empty / emptyTitle); use Veil for anything else.
+# shadcn-for-muten · part · no deps · kit.css (.cx-veil).
+part Veil(on: bool, title: text = "", text: text = "") {
+  Stack class("cx-veil") data(on: $on) {
+    Stack class("cx-veil-body") aria(hidden: $on) { slot }
+    when $on {
+      Stack class("cx-veil-note") {
+        Stack class("cx-veil-box") {
+          Span "{$title}" class("cx-veil-t")
+          Span "{$text}" class("cx-veil-s")
+        }
+      }
+    }
+  }
+}

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,13 +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)."
     }
   ],
   "classComponents": {