@muten/shadcn 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",
@@ -15,7 +15,8 @@
     "registry",
     "registry.json",
     "globals.css",
-    "README.md"
+    "README.md",
+    "AGENTS.md"
   ],
   "exports": {
     "./globals.css": "./globals.css",

package/registry/bento.muten

@@ -0,0 +1,9 @@
+# BentoGallery - a tiling gallery on a fixed row-height grid, so cells of different column widths always line up.
+# Each BentoCell picks its own col-span (and bg / content) via class:
+#   BentoGallery {
+#     BentoCell class("col-span-4 bg-muted") { Span "01" }
+#     BentoCell class("col-span-2 bg-accent") { Span "02" }
+#   }
+# shadcn-for-muten · block · no deps · uses .bento-gallery / .bento-cell from globals.css.
+part BentoGallery() { Stack class("bento-gallery") { slot } }
+part BentoCell() { Stack class("bento-cell") { slot } }

package/registry/button-group.muten

@@ -0,0 +1,4 @@
+# ButtonGroup - segmented row of buttons that share borders. Put `btn btn-outline` buttons inside:
+#   ButtonGroup { Button "Bold" -> b class("btn btn-outline")  Button "Italic" -> i class("btn btn-outline") }
+# shadcn-for-muten · part · no deps · uses .btn-group from globals.css.
+part ButtonGroup() { Stack class("btn-group") { slot } }

package/registry/button.muten

@@ -0,0 +1,8 @@
+# Button (part name Btn - `Button` is a muten primitive, so a part can't reuse that name) - a plug-and-play
+# button. No class props: pass a `variant` + your action, put the label/icon in the slot.
+#   Btn(variant: "default", onClick: save) { Span "Save" }
+#   Btn(variant: "outline", onClick: cancel) { Icon "lucide:x" class("size-4")  Span "Cancel" }
+# variant: default | secondary | outline | ghost | destructive | link. For a link that looks like a button use
+# `Link "..." -> "/path" class("btn btn-default")`; for sizes add btn-sm|btn-lg on the primitive.
+# shadcn-for-muten · part · no deps · wraps the Button primitive + the .btn recipe.
+part Btn(variant: text, onClick: action) { Button -> $onClick class("btn btn-{$variant}") { slot } }

package/registry/code.js

@@ -0,0 +1,14 @@
+// Code block host (muten Custom). inputs: { code, lang }. Highlights with the muten grammar via the shared
+// highlight.js (lazy-loaded, so the token rules live in one place). See code.muten.
+export function mount(el, inputs) {
+  const code = String(inputs.code == null ? "" : inputs.code);
+  const lang = inputs.lang == null ? "muten" : String(inputs.lang);
+  el.className = "rounded-lg border bg-muted/40 px-4 py-3 font-mono text-foreground overflow-x-auto";
+  const pre = document.createElement("pre");
+  pre.className = "m-0 text-sm leading-relaxed";
+  pre.textContent = code;                                  // plain until the highlighter loads (progressive)
+  el.appendChild(pre);
+  import("@muten/shadcn/registry/highlight.js")
+    .then((m) => { pre.innerHTML = m.highlight(code, lang); })
+    .catch(() => { /* keep the plain text */ });
+}

package/registry/code.muten

@@ -0,0 +1,7 @@
+# Code - a syntax-highlighted code block. `lang` defaults to "muten" (the muten grammar, matching the VS Code
+# extension); pass another lang to render plain. NOTE: muten strings can't hold `{` or `"`, so feed muten source
+# from a .md file (a Markdown component) or a .js snippet, not an inline muten string.
+# shadcn-for-muten · Custom · host JS is src/components/Code.js (copied by `muten add code`); shares highlight.js.
+part Code(code: text, lang: text) {
+  Custom Code inputs(code: $code, lang: $lang) class("code-block")
+}

package/registry/count-up.js

@@ -0,0 +1,36 @@
+// CountUp - a muten Custom that animates a formatted stat from 0 to its target the first time it scrolls into
+// view. inputs: { to } - the final display string (e.g. "2.4M", "94%", "120K", "58", "99.99%", "40ms", "12B").
+// It splits an optional prefix + number (decimals/commas ok) + suffix, animates the number, then restores the
+// EXACT target string so formatting like "2.4M" is preserved. Pure vanilla JS - this is muten's 20% escape for
+// something CSS can't do (animating a formatted number). Respects prefers-reduced-motion.
+export function mount(el, inputs) {
+  const target = String(inputs && inputs.to != null ? inputs.to : '0');
+  const m = target.match(/^([^\d]*)([\d.,]+)(.*)$/);
+  if (!m) { el.textContent = target; return; }
+  const prefix = m[1], numStr = m[2], suffix = m[3];
+  const end = parseFloat(numStr.replace(/,/g, ''));
+  const decimals = (numStr.split('.')[1] || '').length;
+  const grouped = numStr.indexOf(',') !== -1;
+  const fmt = (v) => prefix + (decimals ? v.toFixed(decimals) : (grouped ? Math.round(v).toLocaleString() : String(Math.round(v)))) + suffix;
+
+  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (reduce || !('IntersectionObserver' in window) || !isFinite(end)) { el.textContent = target; return; }
+
+  el.textContent = fmt(0);
+  let started = false;
+  const run = () => {
+    if (started) return; started = true;
+    const dur = 1400, t0 = performance.now();
+    const tick = (now) => {
+      const p = Math.min(1, (now - t0) / dur);
+      const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
+      if (p < 1) { el.textContent = fmt(end * eased); requestAnimationFrame(tick); }
+      else el.textContent = target; // land on the exact target (keeps "2.4M"/"99.99%" formatting)
+    };
+    requestAnimationFrame(tick);
+  };
+  const io = new IntersectionObserver((entries) => {
+    for (const e of entries) if (e.isIntersecting) { run(); io.disconnect(); }
+  }, { threshold: 0.5 });
+  io.observe(el);
+}

package/registry/count-up.muten

@@ -0,0 +1,10 @@
+# CountUp - animate a formatted stat from 0 to its target when it scrolls into view (Custom, keeps the exact
+# formatting: 2.4M / 94% / 40ms / 99.99% / 120K). For a STYLED number use the Custom form directly (it takes the
+# class - a part with params can't), which is what stat bands and hero metrics want:
+#   Stack class("items-center gap-1") {
+#     Custom CountUp inputs(to: "2.4M") class("text-4xl font-bold text-primary")
+#     Span "trees planted" class("text-sm text-muted-foreground")
+#   }
+# The `CountUp(to: ...)` part below is a thin convenience for the unstyled/inherit case (wrap it in a styled Stack).
+# shadcn-for-muten · Custom · no deps · host JS: src/components/CountUp.js.
+part CountUp(to: text) { Custom CountUp inputs(to: $to) }

package/registry/feature-grid.muten

@@ -0,0 +1,14 @@
+# FeatureGrid - a responsive grid of feature cards. FeatureCard takes title + desc and a slot for the icon:
+#   FeatureGrid {
+#     FeatureCard(title: "Locatable", desc: "Every screen has a name and a place.") { Icon "lucide:scan-text" class("size-5") }
+#     …
+#   }
+# shadcn-for-muten · block · no deps · styles via the semantic .feature-* classes in globals.css.
+part FeatureGrid() { Stack class("feature-grid") { slot } }
+part FeatureCard(title: text, desc: text) {
+  Stack class("feature-card") {
+    Stack class("feature-card-icon") { slot }
+    Title "{$title}" h3 class("feature-card-title")
+    Text "{$desc}" class("feature-card-desc")
+  }
+}

package/registry/feature-rows.muten

@@ -0,0 +1,8 @@
+# FeatureRows - a divided list of numbered feature/schedule rows, each with its own side gutters so the index
+# never kisses the edge. A FeatureRow is a 12-col grid (index · title · copy); it stacks on mobile.
+#   FeatureRows {
+#     FeatureRow { Span "01" class("col-span-1")  Title "One command" h3 class("col-span-4")  Text "..." class("col-span-7") }
+#   }
+# shadcn-for-muten · block · no deps · uses .feature-rows / .feature-row from globals.css.
+part FeatureRows() { Stack class("feature-rows") { slot } }
+part FeatureRow() { Stack class("feature-row") { slot } }

package/registry/gradient-blinds.js

@@ -0,0 +1,129 @@
+// GradientBlinds - ported from React Bits (reactbits.dev) to a muten Custom. A WebGL fragment shader (via `ogl`)
+// draws diagonal blinds over an animated gradient with a spotlight that FOLLOWS THE MOUSE + grain. Faithful and
+// GPU-fast. A Custom (graphics = the vanilla-JS escape); ogl loads via dynamic import() (a Custom is inlined into
+// an IIFE, so a top-level import is illegal). Inputs mirror the React props: colors, angle, noise, blindCount,
+// blindMinWidth, spotlightRadius/Softness/Opacity, mouseDampening, distort, shineDirection, mirror. Needs `ogl`.
+const MAX_COLORS = 8;
+const hexToRGB = (hex) => {
+  const c = String(hex).replace("#", "").padEnd(6, "0");
+  return [parseInt(c.slice(0, 2), 16) / 255, parseInt(c.slice(2, 4), 16) / 255, parseInt(c.slice(4, 6), 16) / 255];
+};
+const prepStops = (stops) => {
+  const base = (stops && stops.length ? stops : ["#FF9FFC", "#5227FF"]).slice(0, MAX_COLORS);
+  if (base.length === 1) base.push(base[0]);
+  while (base.length < MAX_COLORS) base.push(base[base.length - 1]);
+  return { arr: base.map(hexToRGB), count: Math.max(2, Math.min(MAX_COLORS, stops && stops.length ? stops.length : 2)) };
+};
+
+export function mount(el, inputs) {
+  const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
+  const I = inputs || {};
+  const colors = (I.colors ? String(I.colors) : "#FF9FFC,#5227FF").split(",").map((s) => s.trim()).filter(Boolean);
+  const angle = num(I.angle, -25), noise = num(I.noise, 0.22);
+  const blindCount = num(I.blindCount, 16), blindMinWidth = num(I.blindMinWidth, 55);
+  const spotRadius = num(I.spotlightRadius, 0.6), spotSoft = num(I.spotlightSoftness, 1), spotOpacity = num(I.spotlightOpacity, 0.75);
+  const damp = num(I.mouseDampening, 0.15), distort = num(I.distort, 0);
+  const shineFlip = I.shineDirection === "right" ? 1 : 0, mirror = I.mirror ? 1 : 0;
+
+  import("ogl").then(({ Renderer, Program, Mesh, Triangle }) => {
+    const renderer = new Renderer({ dpr: Math.min(2, window.devicePixelRatio || 1), alpha: true, antialias: true });
+    const gl = renderer.gl;
+    const canvas = gl.canvas;
+    canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 94%);mask-image:linear-gradient(to bottom,#000 42%,transparent 94%)";
+    el.appendChild(canvas);
+
+    const vertex = "attribute vec2 position;attribute vec2 uv;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.0,1.0);}";
+    const fragment = `#ifdef GL_ES
+precision mediump float;
+#endif
+uniform vec3 iResolution; uniform vec2 iMouse; uniform float iTime;
+uniform float uAngle, uNoise, uBlindCount, uSpotlightRadius, uSpotlightSoftness, uSpotlightOpacity, uMirror, uDistort, uShineFlip;
+uniform vec3 uColor0,uColor1,uColor2,uColor3,uColor4,uColor5,uColor6,uColor7; uniform int uColorCount;
+varying vec2 vUv;
+float rand(vec2 co){ return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); }
+vec2 rotate2D(vec2 p, float a){ float c=cos(a), s=sin(a); return mat2(c,-s,s,c)*p; }
+vec3 getGradientColor(float t){
+  float tt=clamp(t,0.0,1.0); int count=uColorCount; if(count<2) count=2;
+  float scaled=tt*float(count-1); float seg=floor(scaled); float f=fract(scaled);
+  if(seg<1.0) return mix(uColor0,uColor1,f);
+  if(seg<2.0 && count>2) return mix(uColor1,uColor2,f);
+  if(seg<3.0 && count>3) return mix(uColor2,uColor3,f);
+  if(seg<4.0 && count>4) return mix(uColor3,uColor4,f);
+  if(seg<5.0 && count>5) return mix(uColor4,uColor5,f);
+  if(seg<6.0 && count>6) return mix(uColor5,uColor6,f);
+  if(seg<7.0 && count>7) return mix(uColor6,uColor7,f);
+  if(count>7) return uColor7; if(count>6) return uColor6; if(count>5) return uColor5;
+  if(count>4) return uColor4; if(count>3) return uColor3; if(count>2) return uColor2; return uColor1;
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord){
+  vec2 uv0 = fragCoord.xy / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 p = uv0*2.0-1.0; p.x*=aspect; vec2 pr = rotate2D(p, uAngle); pr.x/=aspect; vec2 uv = pr*0.5+0.5;
+  vec2 uvMod = uv;
+  if(uDistort>0.0){ float a=uvMod.y*6.0, b=uvMod.x*6.0, w=0.01*uDistort; uvMod.x+=sin(a)*w; uvMod.y+=cos(b)*w; }
+  float t = uvMod.x; if(uMirror>0.5){ t = 1.0 - abs(1.0 - 2.0*fract(t)); }
+  vec3 base = getGradientColor(t);
+  vec2 offset = vec2(iMouse.x/iResolution.x, iMouse.y/iResolution.y);
+  float d = length(uv0-offset); float r = max(uSpotlightRadius, 1e-4); float dn = d/r;
+  float spot = (1.0 - 2.0*pow(dn, uSpotlightSoftness)) * uSpotlightOpacity;
+  vec3 cir = vec3(spot);
+  float stripe = fract(uvMod.x * max(uBlindCount,1.0)); if(uShineFlip>0.5) stripe = 1.0-stripe;
+  vec3 ran = vec3(stripe);
+  vec3 col = cir + base - ran;
+  col += (rand(gl_FragCoord.xy + iTime) - 0.5) * uNoise;
+  fragColor = vec4(col, 1.0);
+}
+void main(){ vec4 color; mainImage(color, vUv*iResolution.xy); gl_FragColor = color; }`;
+
+    const { arr, count } = prepStops(colors);
+    const uniforms = {
+      iResolution: { value: [gl.drawingBufferWidth, gl.drawingBufferHeight, 1] },
+      iMouse: { value: [0, 0] }, iTime: { value: 0 },
+      uAngle: { value: (angle * Math.PI) / 180 }, uNoise: { value: noise },
+      uBlindCount: { value: Math.max(1, blindCount) },
+      uSpotlightRadius: { value: spotRadius }, uSpotlightSoftness: { value: spotSoft }, uSpotlightOpacity: { value: spotOpacity },
+      uMirror: { value: mirror }, uDistort: { value: distort }, uShineFlip: { value: shineFlip },
+      uColor0: { value: arr[0] }, uColor1: { value: arr[1] }, uColor2: { value: arr[2] }, uColor3: { value: arr[3] },
+      uColor4: { value: arr[4] }, uColor5: { value: arr[5] }, uColor6: { value: arr[6] }, uColor7: { value: arr[7] },
+      uColorCount: { value: count },
+    };
+    const program = new Program(gl, { vertex, fragment, uniforms });
+    const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });
+
+    let first = true;
+    const resize = () => {
+      const rect = el.getBoundingClientRect();
+      renderer.setSize(rect.width || 1, rect.height || 1);
+      uniforms.iResolution.value = [gl.drawingBufferWidth, gl.drawingBufferHeight, 1];
+      const maxByMin = blindMinWidth > 0 ? Math.max(1, Math.floor((rect.width || 1) / blindMinWidth)) : blindCount;
+      uniforms.uBlindCount.value = Math.max(1, blindCount ? Math.min(blindCount, maxByMin) : maxByMin);
+      if (first) { first = false; const cx = gl.drawingBufferWidth / 2, cy = gl.drawingBufferHeight / 2; uniforms.iMouse.value = [cx, cy]; tx = cx; ty = cy; }
+    };
+    let tx = 0, ty = 0, last = 0;
+    resize();
+    try { new ResizeObserver(resize).observe(el); } catch (_) {}
+
+    // listen on window so the spotlight tracks the cursor even through the hero content overlaid on top.
+    window.addEventListener("pointermove", (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const scale = renderer.dpr || 1;
+      tx = (e.clientX - rect.left) * scale;
+      ty = (rect.height - (e.clientY - rect.top)) * scale;
+      if (damp <= 0) uniforms.iMouse.value = [tx, ty];
+    });
+
+    const loop = (t) => {
+      requestAnimationFrame(loop);
+      uniforms.iTime.value = t * 0.001;
+      if (damp > 0) {
+        if (!last) last = t;
+        const dt = (t - last) / 1000; last = t;
+        let factor = 1 - Math.exp(-dt / Math.max(1e-4, damp)); if (factor > 1) factor = 1;
+        const cur = uniforms.iMouse.value;
+        cur[0] += (tx - cur[0]) * factor; cur[1] += (ty - cur[1]) * factor;
+      }
+      try { renderer.render({ scene: mesh }); } catch (e) { /* context lost */ }
+    };
+    requestAnimationFrame(loop);
+  }).catch(() => { /* no ogl - the hero just has a flat background */ });
+}

package/registry/gradient-blinds.muten

@@ -0,0 +1,13 @@
+# GradientBlinds - an animated WebGL gradient with diagonal blinds and a spotlight that follows the cursor
+# (ported from React Bits). Use it as a hero background: make it the first child of a
+# `relative overflow-hidden` box and it fills the box, then fades out at the bottom to blend into the page.
+#   Stack class("relative overflow-hidden") {
+#     GradientBlinds(colors: "#FF9FFC,#5227FF")
+#     Section class("relative z-10 ...") { ...hero content... }
+#   }
+# `colors` = a comma-separated list of hex stops. Angle, blind count, spotlight and grain are tuned defaults in
+# the ejected host JS - edit src/components/GradientBlinds.js to change them.
+# shadcn-for-muten · Custom · needs `ogl` (npm i ogl). Host JS: src/components/GradientBlinds.js.
+part GradientBlinds(colors: text) {
+  Custom GradientBlinds inputs(colors: $colors) class("absolute inset-0 z-0 pointer-events-none opacity-75")
+}

package/registry/highlight.js

@@ -0,0 +1,47 @@
+// A muten-aware syntax highlighter for the browser - the same token classes the muten VS Code grammar uses
+// (keywords, primitives, types, modifiers, methods, components, strings, params, refs, numbers, operators,
+// comments). `highlight(code, lang)` returns HTML with .tk-* spans; the colors live in globals.css so they
+// follow the theme. Non-muten languages are returned escaped (no highlight). Shared by the Code Custom + docs.
+const KEYWORDS = "screen entity state store const theme get effect action mutates mock sources api meta routes shell guard else part param query every live persist post put delete body into if when each as where by with and or not contains use from".split(" ");
+const PRIMITIVES = "Stack Header Nav Sidebar Footer Page Section Article List Details Text Title Span Image Icon Video SearchField DataTable RowAction Button Form Link slot When Each Custom".split(" ");
+const MODIFIERS = "bind submit where columns class alt inputs on aria style".split(" ");
+const METHODS = "push remove patch reset toggle set create update delete refetch".split(" ");
+const TYPES = "text email string number bool uuid list".split(" ");
+
+const grp = (a) => "(?:" + a.join("|") + ")";
+// Ordered like the grammar: first match wins, specific before generic. Each: [regex source, token class].
+const RULES = [
+  ["#[^\\n]*", "comment"],
+  ['"(?:[^"\\\\]|\\\\.)*"', "string"],
+  ["\\$[A-Za-z_]\\w*", "variable"],
+  ["@[A-Za-z_]\\w*", "variable"],
+  ["\\b" + grp(KEYWORDS) + "\\b", "keyword"],
+  ["\\b(?:true|false)\\b", "constant"],
+  ["\\b" + grp(TYPES) + "\\b", "type"],
+  ["\\b" + grp(PRIMITIVES) + "\\b", "primitive"],
+  ["\\b" + grp(MODIFIERS) + "\\b", "modifier"],
+  ["\\." + grp(METHODS) + "\\b", "method"],
+  ["\\b[A-Z][A-Za-z0-9_]*\\b", "component"],
+  ["-?\\b\\d+(?:\\.\\d+)?\\b", "number"],
+  ["->|<-|==|!=|<=|>=|[-+*/<>=|?]", "operator"],
+];
+const MASTER = new RegExp(RULES.map((r) => "(" + r[0] + ")").join("|"), "g");
+const CLASSES = RULES.map((r) => r[1]);
+
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+export function highlight(code, lang) {
+  const src = String(code == null ? "" : code);
+  if (lang && lang !== "muten" && lang !== "store") return esc(src);
+  let out = "", last = 0, m;
+  MASTER.lastIndex = 0;
+  while ((m = MASTER.exec(src))) {
+    if (m.index > last) out += esc(src.slice(last, m.index));
+    let cls = "variable";
+    for (let i = 1; i < m.length; i++) { if (m[i] !== undefined) { cls = CLASSES[i - 1]; break; } }
+    out += '<span class="tk-' + cls + '">' + esc(m[0]) + "</span>";
+    last = m.index + m[0].length;
+  }
+  if (last < src.length) out += esc(src.slice(last));
+  return out;
+}

package/registry/input-group.muten

@@ -0,0 +1,4 @@
+# InputGroup - an input with a leading icon / addon in one bordered field:
+#   InputGroup { Icon "lucide:search"  SearchField bind(q) "Search..." class("input-group-control") }
+# shadcn-for-muten · part · no deps · uses .input-group from globals.css.
+part InputGroup() { Stack class("input-group") { slot } }

package/registry/input.muten

@@ -0,0 +1,7 @@
+# Input (part name Input - muten's text-input primitive is `SearchField`, so this wraps it) - a plug-and-play
+# text input. No class props: pass a state to `value` (two-way bound) + a placeholder.
+#   state { email = "" : text }
+#   Input(value: email, placeholder: "you@example.com")
+# For typed fields (email/number/password/date) or validation, use a `Form` over an entity instead.
+# shadcn-for-muten · part · no deps · wraps SearchField + the .input recipe.
+part Input(value: text, placeholder: text) { SearchField bind($value) "{$placeholder}" class("input") }

package/registry/kbd.muten

@@ -0,0 +1,3 @@
+# Kbd - a keyboard key hint. `Kbd { Span "Ctrl" }` or with class for combos.
+# shadcn-for-muten · part · no deps · uses .kbd from globals.css.
+part Kbd() { Span class("kbd") { slot } }

package/registry/link-btn.muten

@@ -0,0 +1,7 @@
+# LinkBtn - a navigation link that looks like a button (plug-and-play, no class props). For CTAs that go to a
+# route. Put the label/icon in the slot.
+#   LinkBtn(to: "/signup", variant: "default") { Span "Get started" }
+#   LinkBtn(to: "/docs", variant: "outline") { Span "Read the docs"  Icon "lucide:arrow-right" class("size-4") }
+# variant: default | secondary | outline | ghost | destructive | link.
+# shadcn-for-muten · part · no deps · wraps the Link primitive + the .btn recipe.
+part LinkBtn(to: text, variant: text) { Link -> "{$to}" class("btn btn-{$variant}") { slot } }

package/registry/logo-cloud.muten

@@ -0,0 +1,11 @@
+# LogoCloud - the "trusted by" strip: a wrapping row of logos, muted + grayscale until hover. GENERIC - a
+# LogoCloudItem holds ANY logo type: an Image, an Icon, or a plain text wordmark (Span). All normalize to one
+# height. Give it a heading above via a plain Text.
+#   LogoCloud {
+#     LogoCloudItem { Image "~/logos/acme.svg" alt("Acme") }   # image logo
+#     LogoCloudItem { Icon "simple-icons:vercel" }             # icon logo
+#     LogoCloudItem { Span "Globex" class("text-lg font-bold tracking-tight") }   # text wordmark
+#   }
+# shadcn-for-muten · block · no deps · styles via .logo-cloud / .logo-cloud-item in globals.css.
+part LogoCloud() { Stack class("logo-cloud") { slot } }
+part LogoCloudItem() { Stack class("logo-cloud-item") { slot } }

package/registry/navpill.muten

@@ -0,0 +1,10 @@
+# NavPill - the floating glass navbar, batteries included: a sticky + padded wrapper, the glass pill, AND the
+# scroll animation (settles + returns to rest at the top). Just drop your logo / links / CTA inside; it lays them
+# out with space-between (logo left, the rest right).
+#   NavPill {
+#     Stack class("flex flex-row items-center gap-2") { Icon "lucide:hexagon" class("size-5 text-primary")  Span "Acme" class("font-bold") }
+#     Stack class("flex flex-row items-center gap-6 text-sm text-muted-foreground max-md:hidden") { Link "Features" -> "/" class("link-underline")  Link "Pricing" -> "/" class("link-underline") }
+#     Link "Get started" -> "/" class("btn btn-default btn-sm press")
+#   }
+# shadcn-for-muten · part · no deps · uses .nav-pill + nav-scroll from globals.css.
+part NavPill() { Stack class("sticky top-0 z-50 px-4 pt-4") { Header class("nav-pill nav-scroll mx-auto w-full max-w-5xl") { slot } } }

package/registry/pill.muten

@@ -0,0 +1,5 @@
+# Pill - a hero eyebrow chip (bigger than a Badge, rounded-full). Slot-based so you drop an icon + text:
+#   Pill { Icon "lucide:sparkles" class("size-4")  Span "For freelancers, studios and agencies" }
+# Tint it per brand with extra classes: Pill class("bg-blue-50 border-blue-100 text-blue-700").
+# shadcn-for-muten · part · no deps · styles via the semantic .pill class in globals.css.
+part Pill() { Stack class("pill") { slot } }

package/registry/pricing.muten

@@ -0,0 +1,25 @@
+# Pricing - a row of tiers. PricingTier / PricingTierFeatured take name/price/period/description; the slot holds
+# the feature list (PricingFeature items) + the CTA. Use PricingTierFeatured to highlight the recommended plan.
+#   Pricing {
+#     PricingTierFeatured(name: "Pro", price: "$20", period: "/mo", description: "for pro sites") {
+#       Stack class("pricing-features") { PricingFeature { Span "Image optimization" }  PricingFeature { Span "Bot protection" } }
+#       Button "See Pro plan" -> choose class("btn btn-default w-full mt-auto")
+#     }
+#   }
+# shadcn-for-muten · block · no deps · styles via the semantic .pricing-* classes in globals.css.
+part Pricing() { Stack class("pricing-grid") { slot } }
+part PricingTier(name: text, price: text, period: text, description: text) {
+  Stack class("pricing-tier") {
+    Stack class("gap-1") { Span "{$name}" class("pricing-name")  Span "{$description}" class("pricing-desc") }
+    Stack class("flex flex-row items-baseline gap-1.5") { Span "{$price}" class("pricing-price")  Span "{$period}" class("pricing-period") }
+    slot
+  }
+}
+part PricingTierFeatured(name: text, price: text, period: text, description: text) {
+  Stack class("pricing-tier pricing-tier-featured") {
+    Stack class("gap-1") { Span "{$name}" class("pricing-name")  Span "{$description}" class("pricing-desc") }
+    Stack class("flex flex-row items-baseline gap-1.5") { Span "{$price}" class("pricing-price")  Span "{$period}" class("pricing-period") }
+    slot
+  }
+}
+part PricingFeature() { Stack class("pricing-feature") { Icon "lucide:check" class("size-4 text-primary shrink-0")  slot } }

package/registry/segmented-control.muten

@@ -6,3 +6,9 @@ part SegmentedControl() { Stack class("segmented") { slot } }
 part SegmentedItem(value: text, current: text, label: text, onSelect: action) {
   Button "{$label}" -> $onSelect($value) aria(pressed: $value == $current) class("segmented-item", "segmented-item-active" when $value == $current)
 }
+# Full-width tab bar with icon + label (Forms · Scheduling · PDF …). IconTab is slot-based so you drop an
+# Icon + Span inside:  SegmentedTabs { IconTab(value: "forms", current: tab, onSelect: setTab) { Icon "lucide:file-text"  Span "Forms" } … }
+part SegmentedTabs() { Stack class("segmented segmented-fill") { slot } }
+part IconTab(value: text, current: text, onSelect: action) {
+  Button -> $onSelect($value) aria(pressed: $value == $current) class("segmented-item", "segmented-item-active" when $value == $current) { slot }
+}

package/registry/sidebar.muten

@@ -1,18 +1,19 @@
-# Sidebar - a collapsible nav panel. The PAGE owns a collapsed bool + the active item:
+# AppSidebar - a collapsible nav panel (named AppSidebar, NOT Sidebar, so it never shadows muten's core `Sidebar`
+# <aside> primitive). The PAGE owns a collapsed bool + the active item:
 #   state { collapsed = false : bool  nav = "sprites" : text }   action setNav(v: text) mutates nav { nav.set(v) }
-#   Sidebar(collapsed: collapsed) {
+#   AppSidebar(collapsed: collapsed) {
 #     SidebarHeader { Span "Studio" }
 #     SidebarGroup { SidebarGroupLabel(label: "Assets")
 #       SidebarItem(label: "Sprites", value: "sprites", current: nav, onSelect: setNav) { Icon "lucide:image" class("size-4 shrink-0") } … }
 #   }
 # shadcn-for-muten · part · no deps · styles via the semantic .sidebar* classes in globals.css.
-part Sidebar(collapsed: bool) { Stack class("sidebar", "sidebar-collapsed" when $collapsed) { slot } }
+part AppSidebar(collapsed: bool) { Stack class("sidebar", "sidebar-collapsed" when $collapsed) { slot } }
 part SidebarHeader() { Stack class("sidebar-header") { slot } }
 part SidebarGroup() { Stack class("sidebar-group") { slot } }
 part SidebarGroupLabel(label: text) { Span "{$label}" class("sidebar-group-label") }
 part SidebarItem(label: text, value: text, current: text, onSelect: action) {
   Button -> $onSelect($value) aria(pressed: $value == $current) class("sidebar-item", "sidebar-item-active" when $value == $current) {
     slot
-    Span "{$label}" class("truncate")
+    Span "{$label}" class("sidebar-item-label truncate")
   }
 }

package/registry/skeleton.muten

@@ -0,0 +1,4 @@
+# Skeleton - a loading placeholder. Add the size utilities via class (paramless part, so class() works):
+#   Skeleton class("h-4 w-32")   ·   Skeleton class("size-10 rounded-full")
+# shadcn-for-muten · part · no deps · uses .skeleton (pulse) from globals.css.
+part Skeleton() { Stack class("skeleton") { slot } }

package/registry/stat-band.muten

@@ -0,0 +1,9 @@
+# StatBand - a divided row of stats (KPIs), uniform + responsive (2-up on mobile). Each Stat holds its value in
+# the slot (a Span, or a `Custom CountUp` for the count-up animation) plus a label:
+#   StatBand {
+#     Stat(label: "trees planted") { Custom CountUp inputs(to: "2.4M") class("stat-value") }
+#     Stat(label: "countries")     { Span "58" class("stat-value") }
+#   }
+# shadcn-for-muten · block · no deps · uses .stat-band / .stat / .stat-value / .stat-label from globals.css.
+part StatBand() { Stack class("stat-band") { slot } }
+part Stat(label: text) { Stack class("stat") { slot  Span "{$label}" class("stat-label") } }

package/registry/stepper.muten

@@ -0,0 +1,17 @@
+# Stepper - a horizontal (default) or vertical progress indicator. Wrap the steps in Stepper (or
+# StepperVertical) and render each with the Step part; state is "done" | "active" | "upcoming".
+#   state { steps = query steps : list<StepItem> }
+#   Stepper { each steps as s { Step(num: s.num, label: s.label, state: s.state) } }
+# A completed step shows a check (the number hides); the current step is ringed. Own it with `muten add stepper`.
+# shadcn-for-muten · part · no deps · styles via .stepper / .stepper-step* in globals.css.
+part Stepper() { Stack class("stepper") { slot } }
+part StepperVertical() { Stack class("stepper stepper-vertical") { slot } }
+part Step(num: text, label: text, state: text) {
+  Stack class("stepper-step stepper-step-{$state}") {
+    Stack class("stepper-indicator") {
+      when $state == "done" { Icon "lucide:check" class("size-4") }
+      Span "{$num}" class("stepper-num")
+    }
+    Span "{$label}" class("stepper-label")
+  }
+}

package/registry/timeline.muten

@@ -0,0 +1,16 @@
+# Timeline - a vertical list of events, each a dot on a connector line + content (title, time, description).
+#   state { events = query events : list<Event> }
+#   Timeline { each events as e { TimelineItem(title: e.title, time: e.time, desc: e.desc) } }
+# Own it with `muten add timeline`.
+# shadcn-for-muten · part · no deps · styles via .timeline / .timeline-* in globals.css.
+part Timeline() { Stack class("timeline") { slot } }
+part TimelineItem(title: text, time: text, desc: text) {
+  Stack class("timeline-item") {
+    Stack class("timeline-dot")
+    Stack class("timeline-content") {
+      Span "{$time}" class("timeline-time")
+      Span "{$title}" class("timeline-title")
+      Span "{$desc}" class("timeline-desc")
+    }
+  }
+}