@muten/shadcn 0.0.2 → 0.0.4

package/package.json

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

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/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/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/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/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")
+    }
+  }
+}

package/registry/tree-view.js

@@ -1,6 +1,12 @@
-// TreeView host (muten Custom). inputs: { data } (nested nodes: { name, children?: [...] }). handlers: { select(path) }.
-// Folders expand/collapse; clicking selects and emits its "/path". Falls back to a sample tree when no data is
-// passed - edit SAMPLE or feed your own `data` (e.g. your project's file tree) for the real thing.
+// TreeView host (muten Custom). TWO modes, chosen by whether you pass key names:
+//   nested (default): data = [{ name, children? }] - folders expand, a leaf emits its "/path".
+//   flat (pass keys):  data = a FLAT list of records; `groupKey` buckets them into folders, `labelKey` is the
+//                      visible text, `valueKey` is the payload - a leaf emits node[valueKey] (NOT a path). This is
+//                      how you feed a `query` of rows straight in (e.g. tilesets) without nesting them in muten.
+// `selected` (optional, controlled): highlights the matching leaf (its value in flat mode, its path in nested) and
+//   auto-expands the folder holding it - for the row your app auto-opens on load.
+// Folders ONLY expand; only leaves emit `select`. inputs: { data, labelKey, valueKey, groupKey, selected }.
+// handlers: { select(value) }. A `query` passed as data arrives as { loading, data:[…] } - unwrapped here.
 export function mount(el, inputs, handlers) {
   const FOLDER = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>';
   const FILE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>';
@@ -15,18 +21,55 @@ export function mount(el, inputs, handlers) {
     { name: 'package.json' },
   ];
 
-  let data = Array.isArray(inputs.data) && inputs.data.length ? inputs.data : SAMPLE;
-  let selected = '';
+  // A query arrives as { loading, data:[…] }; a plain list as the array; else nothing.
+  const rows = (d) => Array.isArray(d) ? d : (d && Array.isArray(d.data) ? d.data : null);
+
+  // Normalize either mode into the internal nested shape: folder = { name, children:[…] }, leaf = { name, value }.
+  const toTree = (ins) => {
+    const lk = ins.labelKey, vk = ins.valueKey, gk = ins.groupKey;
+    const list = rows(ins.data);
+    if ((lk || vk || gk) && list) {
+      const groups = new Map(); const loose = [];
+      for (const row of list) {
+        const label = lk ? row[lk] : (row && row.name != null ? row.name : String(row));
+        const value = vk ? row[vk] : label;
+        const leaf = { name: String(label), value };
+        const g = gk ? row[gk] : '';
+        if (g == null || g === '') { loose.push(leaf); continue; }
+        if (!groups.has(g)) groups.set(g, { name: String(g), children: [] });
+        groups.get(g).children.push(leaf);
+      }
+      return [...groups.values(), ...loose];
+    }
+    return list && list.length ? list : SAMPLE;
+  };
+
+  const idOf = (node, path) => Array.isArray(node.children) ? path : (node.value != null ? String(node.value) : path);
+
+  let data = toTree(inputs);
+  let selected = inputs.selected != null ? String(inputs.selected) : '';
   const expanded = new Set();
-  for (const n of data) if (Array.isArray(n.children)) expanded.add('/' + n.name); // first level open
+
+  // expand the ancestor folders of the leaf whose id === selected; true if found in this subtree
+  const expandTo = (nodes, parent) => {
+    for (const node of nodes) {
+      const path = parent + '/' + node.name;
+      if (Array.isArray(node.children)) { if (expandTo(node.children, path)) { expanded.add(path); return true; } }
+      else if (idOf(node, path) === selected) return true;
+    }
+    return false;
+  };
+  const seed = () => { for (const n of data) if (Array.isArray(n.children)) expanded.add('/' + n.name); if (selected) expandTo(data, ''); };
+  seed();
 
   const build = (nodes, container, depth, parent) => {
     for (const node of nodes) {
       const path = parent + '/' + node.name;
       const isFolder = Array.isArray(node.children);
+      const id = idOf(node, path);
       const row = document.createElement('button'); row.type = 'button'; row.className = 'tree-row';
       row.style.paddingLeft = (depth * 16 + 6) + 'px';
-      if (path === selected) row.classList.add('tree-row-selected');
+      if (!isFolder && id === selected) row.classList.add('tree-row-selected');
       const chev = document.createElement('span'); chev.className = 'tree-chevron' + (isFolder ? '' : ' tree-chevron-hidden');
       // lucide chevron-down (open) / chevron-right (closed)
       chev.innerHTML = isFolder ? '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="' + (expanded.has(path) ? 'm6 9 6 6 6-6' : 'm9 18 6-6-6-6') + '"/></svg>' : '';
@@ -34,8 +77,8 @@ export function mount(el, inputs, handlers) {
       const label = document.createElement('span'); label.className = 'tree-label'; label.textContent = node.name;
       row.appendChild(chev); row.appendChild(ic); row.appendChild(label);
       row.addEventListener('click', () => {
-        if (isFolder) { expanded.has(path) ? expanded.delete(path) : expanded.add(path); }
-        selected = path; if (handlers.select) handlers.select(path);
+        if (isFolder) { expanded.has(path) ? expanded.delete(path) : expanded.add(path); }   // folders: expand only
+        else { selected = id; if (handlers.select) handlers.select(node.value != null ? node.value : path); } // leaves emit
         render();
       });
       container.appendChild(row);
@@ -45,5 +88,9 @@ export function mount(el, inputs, handlers) {
   const render = () => { el.innerHTML = ''; const root = document.createElement('div'); root.className = 'tree'; build(data, root, 0, ''); el.appendChild(root); };
 
   render();
-  return (n) => { if (Array.isArray(n.data) && n.data.length) data = n.data; render(); };
+  return (n) => {
+    data = toTree(n);
+    if (n.selected != null) { selected = String(n.selected); if (selected) expandTo(data, ''); } // re-open to the controlled leaf
+    render();
+  };
 }

package/registry/tree-view.muten

@@ -1,8 +1,14 @@
-# TreeView - a nested folder/file tree (expandable, selectable, icons + indent). The PAGE owns the selected path:
-#   state { tree = [] : list<text>  picked = "" : text }   action onPick(p: text) mutates picked { picked.set(p) }
-#   TreeView(data: tree, onSelect: onPick)
-# Pass your own nested data ({ name, children?: [...] }); with an empty list it renders a sample file tree you
-# can edit in src/components/TreeView.js. shadcn-for-muten · Custom · multilevel (Collapsible/Accordion are single-level).
-part TreeView(data: list, onSelect: action) {
-  Custom TreeView inputs(data: $data) on(select: $onSelect) class("tree-view")
+# Tree View - a file/folder tree (Custom). TWO modes:
+#   nested (default): pass a nested `data` of { name, children }; leaves emit their "/path". Leave the keys "".
+#     TreeView(data: fileTree, labelKey: "", valueKey: "", groupKey: "", selected: "", onSelect: pick)
+#   flat (pass keys): feed a FLAT list (e.g. a `query` of rows) and let the tree group + key it for you -
+#     groupKey buckets rows into folders, labelKey is the text, valueKey is the payload a leaf emits:
+#     state { tiles = query tilesets : list<Tile>  tileUrl = "" : text }
+#     action pick(u: text) mutates tileUrl { tileUrl.set(u) }
+#     TreeView(data: tiles, labelKey: "tname", valueKey: "url", groupKey: "folder", selected: tileUrl, onSelect: pick)
+# `selected` highlights + auto-opens that leaf. Folders only expand; only leaves emit select. (muten parts need
+# every arg, so pass "" for the keys you don't use - an empty key = nested mode.)
+# shadcn-for-muten · Custom · host JS is src/components/TreeView.js (copied by `muten add tree-view`).
+part TreeView(data: list, labelKey: text, valueKey: text, groupKey: text, selected: text, onSelect: action) {
+  Custom TreeView inputs(data: $data, labelKey: $labelKey, valueKey: $valueKey, groupKey: $groupKey, selected: $selected) on(select: $onSelect) class("tree-view")
 }