@muten/shadcn 0.1.1 → 0.1.3

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/zoom-control.muten

@@ -4,8 +4,8 @@
 # shadcn-for-muten · part · no deps · kit.css (.cx-zoom).
 part ZoomControl(value: number, onOut: action, onIn: action, onReset: action) {
   Stack class("cx-zoom") data(slot: "zoom-control") aria(role: "group", label: "Zoom") {
-    Button -> $onOut class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button") data(name: "Alejar") aria(label: "Alejar") { Icon "lucide:minus" }
-    Button "{$value} %" -> $onReset class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-zoom-value") data(name: "Volver a 100 %") aria(label: "Zoom {$value} %, volver a 100")
-    Button -> $onIn class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button") data(name: "Acercar") aria(label: "Acercar") { Icon "lucide:plus" }
+    Btn(variant: "ghost", size: "icon-sm", label: "Alejar", onClick: $onOut) { Icon "lucide:minus" }
+    Button "{$value} %" -> $onReset class("cn-button cn-button-variant-ghost cn-button-size-sm group/button cx-zoom-value") data(name: "Volver a 100 %") aria(label: "Zoom {$value} %, volver a 100")   # its words carry $value: a part arg cannot interpolate an outer param, so it stays a Button
+    Btn(variant: "ghost", size: "icon-sm", label: "Acercar", onClick: $onIn) { Icon "lucide:plus" }
   }
 }

package/registry.json

@@ -93,6 +93,20 @@
       "file": "registry/bento.muten",
       "description": "BLOCK: fixed-row-height tiling gallery; cells pick their col-span. Parts: BentoGallery, BentoCell."
     },
+    {
+      "name": "bio-play",
+      "deps": [],
+      "part": "BioPlay",
+      "file": "registry/bio-play.muten",
+      "description": "BioPlay - a social profile shown, not used: the photo, the handle, the followers, the bio with the store's link"
+    },
+    {
+      "name": "booking-play",
+      "deps": [],
+      "part": "BookingPlay",
+      "file": "registry/booking-play.muten",
+      "description": "BookingPlay - a booking shown, not used: one service, a few days and hours, and a booking that plays itself in a"
+    },
     {
       "name": "booking",
       "deps": [],
@@ -162,6 +176,13 @@
       "component": "Carousel",
       "description": "Carousel(label, perView, center, loop, autoplay, indicator, arrows) { CarouselSlide }: one component, options instead of copies."
     },
+    {
+      "name": "chat-play",
+      "deps": [],
+      "part": "ChatPlay",
+      "file": "registry/chat-play.muten",
+      "description": "ChatPlay - a conversation shown, not used: the messages come in one by one (in `step` order, 1-6) and the"
+    },
     {
       "name": "chatbot",
       "deps": [
@@ -258,6 +279,13 @@
       "component": "DateField",
       "description": "DateField(label, value, min, years, onChange): the long date; opens the date wheels."
     },
+    {
+      "name": "day-plan",
+      "deps": [],
+      "part": "DayPlan",
+      "file": "registry/day-plan.muten",
+      "description": "DayPlan - the owner's day as a list in order: hour, a dot on a line, who and what, a tag on the right. The hours"
+    },
     {
       "name": "device-frame",
       "deps": [],
@@ -386,6 +414,13 @@
       "component": "ImageUpload",
       "description": "ImageUpload(title, hint, maxMb, size, uploadUrl, sample, onReady): validate, decode, crop, shrink, upload with progress."
     },
+    {
+      "name": "inbox-play",
+      "deps": [],
+      "part": "InboxPlay",
+      "file": "registry/inbox-play.muten",
+      "description": "InboxPlay - a messages list shown, not used: the shop's inbox as the channel's app draws it (skin: instagram |"
+    },
     {
       "name": "indicator",
       "deps": [],
@@ -578,6 +613,20 @@
       "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": [],
@@ -602,6 +651,13 @@
       "component": "OrderBoard",
       "description": "OrderBoard(lanes, cards, onChange, onAction) / OrderCards(cards, sizes): order board and card with its modals."
     },
+    {
+      "name": "order-play",
+      "deps": [],
+      "part": "OrderPlay",
+      "file": "registry/order-play.muten",
+      "description": "OrderPlay - an order shown, not used: who ordered, the products with their photos, how it is paid and delivered,"
+    },
     {
       "name": "overlay-behavior",
       "deps": [],
@@ -689,6 +745,13 @@
       "file": "registry/pricing.muten",
       "description": "BLOCK: a row of pricing tiers (name/price/features/CTA), featured highlight. Parts: Pricing, PricingTier, PricingFeature."
     },
+    {
+      "name": "product-play",
+      "deps": [],
+      "part": "ProductPlay",
+      "file": "registry/product-play.muten",
+      "description": "ProductPlay - a product sheet shown, not used: the photo, the shop, the name with its price, a line about it, its"
+    },
     {
       "name": "progress",
       "deps": [],
@@ -759,6 +822,14 @@
       "component": "ScaleSlider",
       "description": "ScaleSlider(label, min, max, step, values, gap, format, onChange): value rides on the thumb; two bubbles merge."
     },
+    {
+      "name": "screen-tour",
+      "deps": [],
+      "part": "ScreenTour",
+      "file": "registry/screen-tour.muten",
+      "component": "ScreenTour",
+      "description": "ScreenTour - how a product is used, played on its real screens: numbered steps on one side, a phone on the other"
+    },
     {
       "name": "scroll-area",
       "deps": [],
@@ -1066,6 +1137,51 @@
       "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": {

package/scripts/reuse-audit.mjs

@@ -0,0 +1,37 @@
+// reuse-audit.mjs - atomic design kept honest: before something is written by hand, the library may already have it.
+//   node scripts/reuse-audit.mjs                                   the library's own parts (from plugins/shadcn)
+//   node node_modules/@muten/shadcn/scripts/reuse-audit.mjs src    an app's .muten files (from the app)
+// It lists the markup that re-draws an existing piece: a Button wearing cn-button classes where Btn would do, a
+// SearchField wearing cn-input where Input/GroupInput exist, a hand-made avatar, a phone or device frame of its own
+// (DeviceFrame is the one phone of the library). A finding is not always wrong (a tab passes its value to the action,
+// a close button carries its own role): each one is a question to answer before adding more.
+import fs from 'node:fs';
+import path from 'node:path';
+
+const REG = path.join(import.meta.dirname, '..', 'registry');
+const OWN = { 'button.muten': true, 'input.muten': true, 'input-group.muten': true, 'avatar.muten': true, 'device-frame.muten': true, 'skeleton.muten': true, 'kit-skeleton.muten': true };
+const RULES = [
+  { test: (l) => /\bButton\b/.test(l) && /->\s*[\w.$]+\s+class\("cn-button/.test(l) && !/aria\((pressed|role)|status:|marker:|"\{\$/.test(l), says: 'a Button with cn-button classes and a plain action: Btn(variant, size, label, onClick) does it' },
+  { re: /SearchField\b[^\n]*class\("cn-input/, says: 'a SearchField with cn-input classes: Input / GroupInput do it' },
+  { re: /class\("cn-avatar[ "]/, says: 'a hand-made avatar: Avatar / AvatarImage do it' },
+  { test: (l) => !/\bDeviceFrame\(/.test(l) && /class\("[^"]*\b(cx-phone-frame|cx-sphone[\w-]*|plt-phone|phone-frame|device-frame|iphone|bezel|notch)\b/.test(l), says: 'a phone frame of its own: DeviceFrame is the one phone of the library (island, href, shot, width)' },
+  { re: /class\("[^"]*\b(cx-sk|cn-skeleton)(?=[\s"])/, says: 'a skeleton drawn by hand: Skeleton / Skeletons(kind) / Loading do it' },
+];
+
+const walk = (dir) => fs.readdirSync(dir, { withFileTypes: true }).flatMap((e) => {
+  if (e.name === 'node_modules' || e.name.startsWith('.')) return [];
+  const full = path.join(dir, e.name);
+  return e.isDirectory() ? walk(full) : e.name.endsWith('.muten') ? [full] : [];
+});
+const roots = process.argv.slice(2);
+const files = roots.length ? roots.flatMap((r) => walk(path.resolve(r))) : fs.readdirSync(REG).filter((f) => f.endsWith('.muten') && !OWN[f]).map((f) => path.join(REG, f));
+
+let total = 0;
+for (const file of files.sort()) {
+  const lines = fs.readFileSync(file, 'utf8').split('\n');
+  lines.forEach((line, i) => {
+    if (line.trim().startsWith('#')) return;
+    for (const r of RULES) if (r.test ? r.test(line) : r.re.test(line)) { total++; console.log(`${path.relative(process.cwd(), file)}:${i + 1}  ${r.says}\n    ${line.trim().slice(0, 140)}`); }
+  });
+}
+console.log(total ? `\n${total} place(s) to look at.` : 'Nothing re-drawn by hand.');