@muten/shadcn 0.1.3 → 0.1.4

package/kit.css

@@ -5147,3 +5147,45 @@ a.cx-bc-item:hover { color: var(--foreground); }
 /* StackedBars in a narrow card (a phone): twelve month labels still fit, a size smaller and never cut with «…» */
 .cx-stb { container-type: inline-size; }
 @container (max-width: 520px) { .cx-stb-x { gap: 2px; font-size: 10px; } .cx-stb-x > span { text-overflow: clip; overflow: visible; } .cx-stb-bars { gap: 4px; } .cx-stb-y { font-size: 10.5px; } }
+
+/* ── MARKETING PARTS (registry/marketing.muten) ──────────────────────────────────────────────────────────────────────
+   The pieces that had lived in Storio's landing as its own classes, now the library's: a lead under a section title,
+   a note after a block, the tag on a fund card, columns of facts, outlined boxes, a path of numbered steps and a
+   checked list with explanations. */
+.style-nova .cx-mk-sub { margin-top: -12px; max-width: 60ch; }
+.style-nova .cx-mk-note { margin: -8px 0 0; font-size: 14px; color: var(--muted-foreground); max-width: 70ch; }
+.style-nova .cx-mk-fund-c:has(> .cx-mk-fund-tag) { grid-row: span 3; }
+.style-nova .cx-mk-fund-tag { justify-self: start; align-self: start; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted-foreground); background: var(--background); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; }
+.style-nova .cx-mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
+.style-nova .cx-mk-fact { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 4px 0; min-width: 0; }
+.style-nova .cx-mk-fact + .cx-mk-fact { padding-left: 20px; border-left: 1px solid var(--border); }
+.style-nova .cx-mk-fact-k { font-weight: 700; font-size: 16px; }
+.style-nova .cx-mk-fact-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }
+.style-nova .cx-mk-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.style-nova .cx-mk-box { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border: 1px solid var(--border); border-radius: 18px; min-width: 0; }
+.style-nova .cx-mk-box-t { font-weight: 700; font-size: 16px; }
+.style-nova .cx-mk-box-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }
+.style-nova .cx-mk-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
+.style-nova .cx-mk-path-s { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.style-nova .cx-mk-path-n { width: 34px; height: 34px; border-radius: 50%; background: var(--foreground); color: var(--background); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
+.style-nova .cx-mk-path-p { margin: 0; font-size: 15px; line-height: 1.55; }
+.style-nova .cx-mk-donelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
+.style-nova .cx-mk-done { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px 0; border-top: 1px solid var(--border); min-width: 0; }
+.style-nova .cx-mk-done-i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: 15px; margin-top: 1px; }
+.style-nova .cx-mk-done-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.style-nova .cx-mk-done-t { font-weight: 700; font-size: 16px; }
+.style-nova .cx-mk-done-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }
+@media (max-width: 900px) {
+  .style-nova .cx-mk-facts, .style-nova .cx-mk-path { grid-template-columns: 1fr 1fr; row-gap: 22px; }
+  .style-nova .cx-mk-fact:nth-child(3) { padding-left: 0; border-left: 0; }
+  .style-nova .cx-mk-boxes { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 760px) { .style-nova .cx-mk-donelist { grid-template-columns: 1fr; gap: 0; } }
+@media (max-width: 560px) {
+  .style-nova .cx-mk-facts, .style-nova .cx-mk-path, .style-nova .cx-mk-boxes { grid-template-columns: 1fr; }
+  .style-nova .cx-mk-fact + .cx-mk-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
+}
+/* The pricing table's note under a value (cx-pr-*): how or how much, stacked under it, never beside it. */
+.style-nova .cx-pr-td .cx-pr-note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); font-weight: 400; }
+.style-nova .cx-pr-table > .cx-pr-tr > .cx-pr-td:has(> .cx-pr-note), .style-nova .cx-pr-table > .cx-pr-tr > .cx-pr-rh:has(> .cx-pr-note) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
+.style-nova .cx-pr-rh > .cx-pr-note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); font-weight: 400; max-width: 30ch; }

package/package.json

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

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