@muten/shadcn 0.1.2 → 0.1.3

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,144 @@ 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; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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/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/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

@@ -1144,6 +1144,44 @@
       "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": {