@muten/shadcn 0.0.1 → 0.0.2

package/globals.css

@@ -37,6 +37,14 @@
 /* shadcn's base: every border/outline defaults to the token (so a bare `border` is subtle, not currentColor). */
 @layer base {
   * { border-color: var(--color-border); outline-color: color-mix(in srgb, var(--color-ring) 50%, transparent); }
+
+  /* Fully themed scrollbars (track + thumb), so the OS default never clashes with the theme. */
+  * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--color-muted) 60%, transparent); border-radius: 9999px; }
+  ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--color-muted-foreground); background-clip: padding-box; }
+  ::-webkit-scrollbar-corner { background: transparent; }
 }
 
 @layer components {
@@ -46,11 +54,13 @@
   .btn-destructive { @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90; }
   .btn-outline { @apply border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground; }
   .btn-secondary { @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80; }
-  .btn-ghost { @apply hover:bg-accent hover:text-accent-foreground; }
+  .btn-ghost { @apply text-foreground hover:bg-accent hover:text-accent-foreground; }
   .btn-link { @apply text-primary underline-offset-4 hover:underline; }
   .btn-sm { @apply h-8 rounded-md px-3 text-xs; }
   .btn-lg { @apply h-10 rounded-md px-8; }
-  .btn-icon { @apply h-9 w-9 px-0; }
+  .btn-icon { @apply h-9 w-9 shrink-0 px-0; }
+  /* shadcn sizes any icon inside a button (its [&_svg]:size-4); so `Button { Icon } class("btn btn-ghost btn-icon")` just works */
+  .btn svg, .btn .mu-icon, .btn iconify-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
 
   /* ---- Form controls ---- */
   .input { @apply flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none transition-[color,box-shadow] duration-200 placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50; }
@@ -72,6 +82,11 @@
   .badge-secondary { @apply border-transparent bg-secondary text-secondary-foreground; }
   .badge-destructive { @apply border-transparent bg-destructive text-destructive-foreground; }
   .badge-outline { @apply text-foreground; }
+  /* Notification count pill (rounded-full, for an unseen counter) + a bare status dot. Default primary;
+     add .badge-count-destructive for a red alert count. */
+  .badge-count { @apply inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[10px] font-semibold leading-none text-primary-foreground; }
+  .badge-count-destructive { @apply bg-destructive text-white; }
+  .badge-dot { @apply inline-block size-2 shrink-0 rounded-full bg-primary; }
 
   /* ---- Alert ---- */
   .alert { @apply relative w-full rounded-lg border px-4 py-3 text-sm flex flex-row gap-3 items-start; }
@@ -354,6 +369,133 @@
   .context-menu-open { @apply opacity-100 visible; }
   .context-item { @apply flex rounded-sm px-2 py-1.5 text-sm text-left outline-none transition-colors duration-200 hover:bg-accent hover:text-accent-foreground; }
 
+  /* ---- NumberField / Stepper (Custom; host builds [-] input[number] [+]) ---- */
+  .number-field { @apply inline-flex flex-row h-9 items-center rounded-md border border-input bg-transparent shadow-sm overflow-hidden outline-none transition-[color,box-shadow] duration-200 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50; }
+  .number-field-btn { @apply flex size-8 shrink-0 items-center justify-center text-base text-muted-foreground outline-none transition-colors duration-200 hover:bg-accent hover:text-foreground; }
+  .number-field-input { @apply h-full w-14 min-w-0 border-0 bg-transparent text-center text-sm outline-none; -moz-appearance: textfield; }
+  .number-field-input::-webkit-inner-spin-button, .number-field-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+
+  /* ---- Segmented Control (single-select toolbar; like Tabs but for a toolbar) ---- */
+  .segmented { @apply inline-flex flex-row items-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground; }
+  .segmented-item { @apply inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap outline-none transition-all duration-200 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50; }
+  .segmented-item-active { @apply bg-background text-foreground shadow-sm; }
+
+  /* ---- File Input / Dropzone (Custom; click or drag-drop) ---- */
+  .dropzone { @apply flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-input p-8 text-center text-sm text-muted-foreground cursor-pointer transition-colors duration-200 hover:border-ring hover:bg-accent/30; }
+  .dropzone-over { @apply border-ring bg-accent/50; }
+  .dropzone-label { @apply pointer-events-none; }
+
+  /* ---- Color Picker (Custom; swatch + popover with a saturation/value square + hue slider + hex) ---- */
+  .color-picker { @apply relative inline-flex; }
+  .color-swatch { @apply inline-flex h-9 items-center gap-2 rounded-md border border-input bg-transparent px-2 text-sm shadow-sm outline-none transition-colors duration-200 hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50; }
+  .color-swatch-dot { @apply size-5 rounded-sm border border-border shrink-0; }
+  .color-popover { @apply absolute top-full left-0 z-50 mt-1 w-56 rounded-md border bg-popover p-3 text-popover-foreground shadow-md flex flex-col gap-3 origin-top opacity-0 invisible scale-95; transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease; }
+  .color-popover-open { @apply opacity-100 visible scale-100; }
+  .color-sv { position: relative; width: 100%; height: 8rem; border-radius: calc(var(--radius) - 2px); cursor: crosshair; }
+  .color-sv-cursor, .color-hue-cursor { position: absolute; border: 2px solid #fff; border-radius: 9999px; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
+  .color-sv-cursor { width: 12px; height: 12px; }
+  .color-hue { position: relative; height: 0.75rem; border-radius: 9999px; cursor: pointer; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
+  .color-hue-cursor { top: 50%; width: 14px; height: 14px; }
+  .color-hex { @apply h-8 w-full rounded-md border border-input bg-transparent px-2 text-sm uppercase outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50; }
+
+  /* ---- Vector Field (paired NumberFields with axis labels) ---- */
+  .vector-field { @apply inline-flex flex-row items-center gap-2; }
+  .vector-axis { @apply inline-flex flex-row items-center gap-1.5; }
+  .vector-axis-label { @apply text-xs font-medium text-muted-foreground w-3 text-center; }
+
+  /* ---- TreeView (Custom; nested folder/file tree, expandable + selectable) ---- */
+  .tree-view { @apply w-full overflow-auto; }
+  .tree { @apply flex flex-col text-sm select-none; }
+  .tree-row { @apply flex flex-row items-center gap-1.5 rounded-md py-1 pr-2 text-left outline-none transition-colors duration-150 hover:bg-accent; }
+  .tree-row-selected { @apply bg-accent text-accent-foreground; }
+  .tree-chevron { @apply flex size-4 shrink-0 items-center justify-center text-[10px] text-muted-foreground; }
+  .tree-chevron-hidden { @apply opacity-0; }
+  .tree-icon { @apply flex size-4 shrink-0 items-center justify-center text-muted-foreground; }
+  .tree-icon svg { width: 1rem; height: 1rem; }
+  .tree-label { @apply truncate; }
+
+  /* ---- Toolbar (grouped buttons with separators) ---- */
+  .toolbar { @apply inline-flex flex-row items-center gap-1 rounded-md border bg-background p-1 shadow-sm; }
+  .toolbar-group { @apply inline-flex flex-row items-center gap-0.5; }
+  .toolbar-separator { @apply mx-1 h-5 w-px shrink-0 bg-border; }
+
+  /* ---- Canvas Viewport (Custom <canvas> with pan/zoom + a muten toolbar slot on top) ---- */
+  .canvas-viewport { @apply relative w-full h-80 overflow-hidden rounded-lg border bg-muted; }
+  .canvas-host { @apply absolute inset-0; }
+  .canvas-host canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
+  .canvas-host canvas:active { cursor: grabbing; }
+  .canvas-overlay { @apply absolute inset-0 p-3 flex flex-col items-start gap-2 pointer-events-none; }
+  .canvas-overlay > * { pointer-events: auto; }
+
+  /* ---- Status Bar ---- */
+  .status-bar { @apply flex flex-row items-center gap-4 h-7 px-3 rounded-md border bg-background text-xs text-muted-foreground; }
+  .status-item { @apply inline-flex flex-row items-center gap-1; }
+  .status-spacer { @apply flex-1; }
+
+  /* ---- Zoom Control ( - 100% + ) ---- */
+  .zoom-control { @apply inline-flex flex-row items-center rounded-md border bg-background shadow-sm overflow-hidden; }
+  .zoom-btn { @apply flex size-7 items-center justify-center text-base text-muted-foreground outline-none transition-colors duration-200 hover:bg-accent hover:text-foreground; }
+  .zoom-value { @apply min-w-12 px-1 text-center text-sm tabular-nums; }
+
+  /* ---- Split Button (main action + dropdown caret) ---- */
+  .split-button { @apply relative inline-flex flex-row items-stretch; }
+  .split-button-main { @apply rounded-r-none; }
+  .split-button-caret { @apply rounded-l-none border-l border-l-white/15 px-2; }
+
+  /* ---- Progress (indeterminate) ---- */
+  .progress-indeterminate { @apply relative h-2 w-full overflow-hidden rounded-full bg-primary/20; }
+  .progress-indeterminate::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 9999px; background: var(--color-primary); animation: progress-indeterminate 1.2s ease-in-out infinite; }
+
+  /* ---- Tabs (vertical variant - use with TabsTrigger / TabsContent) ---- */
+  .tabs-list-vertical { @apply inline-flex flex-col items-stretch gap-1 rounded-lg bg-muted p-1 text-muted-foreground; }
+
+  /* ---- Tag Input (Custom; chips + a typing field, Enter adds, Backspace/x removes) ---- */
+  .tag-input { @apply flex flex-row flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent p-1.5 text-sm shadow-sm min-h-9 outline-none transition-[color,box-shadow] duration-200 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50; }
+  .tag-chip { @apply inline-flex flex-row items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground; }
+  .tag-chip-x { @apply cursor-pointer opacity-60 transition-opacity hover:opacity-100; }
+  .tag-input-field { @apply flex-1 min-w-20 border-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground; }
+
+  /* ---- Swatch / Swatch Palette (single-select color grid; the swatch bg is set via style(bg)) ---- */
+  .swatch-palette { @apply inline-flex flex-row flex-wrap items-center gap-1.5; }
+  .swatch { @apply size-7 rounded-md border border-border shrink-0 outline-none transition-transform duration-150 hover:scale-110 focus-visible:ring-[3px] focus-visible:ring-ring/50; background: var(--bg); }
+  .swatch-active { @apply ring-2 ring-ring ring-offset-2 ring-offset-background; }
+
+  /* ---- Range Slider (Custom; two thumbs, emits lo/hi) ---- */
+  .range-slider { @apply relative h-2 w-full rounded-full bg-primary/20 select-none; touch-action: none; }
+  .range-slider-fill { @apply absolute top-0 h-full rounded-full bg-primary; }
+  .range-slider-thumb { @apply absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow cursor-grab; }
+
+  /* ---- Sidebar (collapsible nav panel) ---- */
+  .sidebar { @apply flex flex-col w-60 shrink-0 border-r bg-card text-card-foreground overflow-hidden; transition: width 200ms ease; }
+  .sidebar-collapsed { @apply w-14; }
+  .sidebar-header { @apply flex flex-row items-center gap-2 h-12 shrink-0 px-3 border-b font-semibold; }
+  .sidebar-group { @apply flex flex-col p-2 gap-0.5; }
+  .sidebar-group-label { @apply px-2 py-1 text-xs font-medium text-muted-foreground; }
+  .sidebar-item { @apply flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm whitespace-nowrap outline-none transition-colors duration-200 hover:bg-accent; }
+  .sidebar-item-active { @apply bg-accent text-accent-foreground font-medium; }
+
+  /* ---- Sortable List (Custom; drag rows to reorder, e.g. layers) ---- */
+  .sortable-list { @apply flex flex-col gap-1; }
+  .sortable-row { @apply flex flex-row items-center gap-2 rounded-md border bg-card px-2 py-1.5 text-sm cursor-grab transition-colors duration-150 hover:bg-accent; }
+  .sortable-dragging { @apply opacity-40; }
+  .sortable-handle { @apply flex size-4 shrink-0 items-center justify-center text-muted-foreground; }
+  .sortable-handle svg { width: 1rem; height: 1rem; }
+  .sortable-label { @apply truncate; }
+
+  /* ---- Inspector / Property Grid (label : value rows, collapsible sections) ---- */
+  .inspector { @apply flex flex-col rounded-lg border bg-card text-card-foreground text-sm divide-y; }
+  .inspector-section { @apply flex flex-col; }
+  .inspector-section-header { @apply flex flex-row items-center justify-between gap-2 px-3 py-2 font-medium outline-none transition-colors duration-200 hover:bg-accent; }
+  .inspector-chevron { @apply size-4 shrink-0 text-muted-foreground transition-transform duration-200; }
+  .inspector-chevron-open { @apply rotate-180; }
+  .inspector-body { @apply flex flex-col gap-2 px-3 pb-3 pt-1; }
+  .inspector-row { @apply flex flex-row items-center justify-between gap-3; }
+  .inspector-row-label { @apply text-muted-foreground shrink-0; }
+
+  /* ---- Command Palette (a Command in a top-anchored modal, opened with a hotkey) ---- */
+  .command-palette { align-items: flex-start; }
+  .command-palette-content { @apply relative z-10 mx-auto w-full max-w-lg; margin-top: 14vh; }
+
   /* ---- Typography (prose scale) ---- */
   .prose-h1 { @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl; }
   .prose-h2 { @apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0; }
@@ -377,3 +519,5 @@
   .input-group { @apply flex flex-row h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-sm outline-none transition-[color,box-shadow] duration-200 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50; }
   .input-group-control { @apply h-full flex-1 border-0 bg-transparent p-0 text-sm shadow-none outline-none placeholder:text-muted-foreground; }
 }
+
+@keyframes progress-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",
@@ -11,12 +11,24 @@
     "access": "public"
   },
   "type": "module",
-  "files": ["registry", "registry.json", "globals.css", "README.md"],
+  "files": [
+    "registry",
+    "registry.json",
+    "globals.css",
+    "README.md"
+  ],
   "exports": {
     "./globals.css": "./globals.css",
     "./registry.json": "./registry.json",
     "./registry/*": "./registry/*"
   },
-  "keywords": ["muten", "muten-plugin", "muten-registry", "components", "ui", "shadcn"],
+  "keywords": [
+    "muten",
+    "muten-plugin",
+    "muten-registry",
+    "components",
+    "ui",
+    "shadcn"
+  ],
   "license": "MIT"
 }

package/registry/calendar.js

@@ -78,8 +78,9 @@ export function mount(el, inputs, handlers) {
 
   function render() {
     el.innerHTML = '';
-    const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'calendar-nav-prev'; prev.textContent = '‹';
-    const next = document.createElement('button'); next.type = 'button'; next.className = 'calendar-nav-next'; next.textContent = '›';
+    const SVG = (p) => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + p + '</svg>';
+    const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'calendar-nav-prev'; prev.innerHTML = SVG('<path d="m15 18-6-6 6-6"/>'); // lucide chevron-left
+    const next = document.createElement('button'); next.type = 'button'; next.className = 'calendar-nav-next'; next.innerHTML = SVG('<path d="m9 18 6-6-6-6"/>'); // lucide chevron-right
     prev.addEventListener('click', () => { vm--; if (vm < 0) { vm = 11; vy--; } render(); });
     next.addEventListener('click', () => { vm++; if (vm > 11) { vm = 0; vy++; } render(); });
     el.appendChild(prev); el.appendChild(next);

package/registry/canvas-viewport.js

@@ -0,0 +1,44 @@
+// CanvasHost (muten Custom). A <canvas> with pan (drag) + zoom (wheel). handlers: { view(zoomPercent) }.
+// Draws a checkerboard + a sample sprite as a placeholder - replace draw() with your scene render.
+export function mount(el, inputs, handlers) {
+  const canvas = document.createElement('canvas');
+  el.appendChild(canvas);
+  const ctx = canvas.getContext('2d');
+  let scale = 1, ox = 0, oy = 0;
+  const dpr = () => window.devicePixelRatio || 1;
+
+  const draw = () => {
+    const w = canvas.width / dpr(), h = canvas.height / dpr();
+    ctx.clearRect(0, 0, w, h);
+    ctx.save();
+    ctx.translate(ox, oy); ctx.scale(scale, scale);
+    const cell = 16;
+    const sx = Math.floor((-ox / scale) / cell) - 1, sy = Math.floor((-oy / scale) / cell) - 1;
+    const cols = Math.ceil(w / cell / scale) + 3, rows = Math.ceil(h / cell / scale) + 3;
+    for (let i = sx; i < sx + cols; i++) for (let j = sy; j < sy + rows; j++) {
+      ctx.fillStyle = (i + j) % 2 ? 'rgba(255,255,255,.05)' : 'rgba(255,255,255,.02)';
+      ctx.fillRect(i * cell, j * cell, cell, cell);
+    }
+    ctx.fillStyle = '#3b82f6'; ctx.fillRect(-32, -32, 64, 64);
+    ctx.strokeStyle = 'rgba(255,255,255,.6)'; ctx.lineWidth = 1 / scale; ctx.strokeRect(-32, -32, 64, 64);
+    ctx.restore();
+  };
+  const resize = () => { const r = el.getBoundingClientRect(); canvas.width = r.width * dpr(); canvas.height = r.height * dpr(); ctx.setTransform(dpr(), 0, 0, dpr(), 0, 0); draw(); };
+
+  let drag = false, lx = 0, ly = 0;
+  canvas.addEventListener('pointerdown', (e) => { drag = true; lx = e.clientX; ly = e.clientY; canvas.setPointerCapture(e.pointerId); });
+  canvas.addEventListener('pointermove', (e) => { if (!drag) return; ox += e.clientX - lx; oy += e.clientY - ly; lx = e.clientX; ly = e.clientY; draw(); });
+  canvas.addEventListener('pointerup', () => drag = false);
+  canvas.addEventListener('wheel', (e) => {
+    e.preventDefault();
+    const f = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+    const r = el.getBoundingClientRect(), cx = e.clientX - r.left, cy = e.clientY - r.top;
+    const ns = Math.min(8, Math.max(0.2, scale * f));
+    const k = ns / scale; ox = cx - (cx - ox) * k; oy = cy - (cy - oy) * k; scale = ns;
+    draw(); if (handlers.view) handlers.view(Math.round(scale * 100));
+  }, { passive: false });
+
+  requestAnimationFrame(() => { const r = el.getBoundingClientRect(); ox = r.width / 2; oy = r.height / 2; resize(); });
+  window.addEventListener('resize', resize);
+  return () => {};
+}

package/registry/canvas-viewport.muten

@@ -0,0 +1,11 @@
+# CanvasViewport - a <canvas> host with pan (drag) + zoom (wheel), and a muten toolbar slot floating on top.
+# The PAGE can react to zoom via onView. The canvas draws a placeholder scene - edit src/components/CanvasHost.js.
+#   action onView(z: number) mutates zoom { zoom.set(z) }
+#   CanvasViewport(onView: onView) { Toolbar { … } }   # the slot renders over the canvas (pointer-events re-enabled)
+# shadcn-for-muten · Custom (the canvas) wrapped in a muten part (the overlay). host JS is src/components/CanvasHost.js.
+part CanvasViewport(onView: action) {
+  Stack class("canvas-viewport") {
+    Custom CanvasHost on(view: $onView) class("canvas-host")
+    Stack class("canvas-overlay") { slot }
+  }
+}

package/registry/carousel.js

@@ -4,8 +4,9 @@ export function mount(el, inputs, handlers) {
   const viewport = document.createElement('div'); viewport.className = 'carousel-viewport';
   const track = document.createElement('div'); track.className = 'carousel-track';
   viewport.appendChild(track); el.appendChild(viewport);
-  const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'carousel-prev'; prev.textContent = '‹';
-  const next = document.createElement('button'); next.type = 'button'; next.className = 'carousel-next'; next.textContent = '›';
+  const SVG = (p) => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + p + '</svg>';
+  const prev = document.createElement('button'); prev.type = 'button'; prev.className = 'carousel-prev'; prev.innerHTML = SVG('<path d="m15 18-6-6 6-6"/>'); // lucide chevron-left
+  const next = document.createElement('button'); next.type = 'button'; next.className = 'carousel-next'; next.innerHTML = SVG('<path d="m9 18 6-6-6-6"/>'); // lucide chevron-right
   el.appendChild(prev); el.appendChild(next);
 
   let idx = 0;

package/registry/color-picker.js

@@ -0,0 +1,48 @@
+// ColorPicker host (muten Custom). inputs: { value } (hex). handlers: { input(hex) }.
+// A swatch button opens a popover with a saturation/value square + a hue slider + a hex field.
+export function mount(el, inputs, handlers) {
+  const swatch = document.createElement('button'); swatch.type = 'button'; swatch.className = 'color-swatch';
+  const dot = document.createElement('span'); dot.className = 'color-swatch-dot';
+  const txt = document.createElement('span'); swatch.appendChild(dot); swatch.appendChild(txt);
+  const pop = document.createElement('div'); pop.className = 'color-popover';
+  const sv = document.createElement('div'); sv.className = 'color-sv';
+  const svc = document.createElement('div'); svc.className = 'color-sv-cursor'; sv.appendChild(svc);
+  const hue = document.createElement('div'); hue.className = 'color-hue';
+  const huec = document.createElement('div'); huec.className = 'color-hue-cursor'; hue.appendChild(huec);
+  const hex = document.createElement('input'); hex.className = 'color-hex'; hex.maxLength = 7;
+  pop.appendChild(sv); pop.appendChild(hue); pop.appendChild(hex);
+  el.appendChild(swatch); el.appendChild(pop);
+
+  let h = 0, s = 100, v = 100;
+  const hsv2rgb = (h, s, v) => { s /= 100; v /= 100; const c = v * s, x = c * (1 - Math.abs((h / 60) % 2 - 1)), m = v - c; let r, g, b; if (h < 60) [r, g, b] = [c, x, 0]; else if (h < 120) [r, g, b] = [x, c, 0]; else if (h < 180) [r, g, b] = [0, c, x]; else if (h < 240) [r, g, b] = [0, x, c]; else if (h < 300) [r, g, b] = [x, 0, c]; else [r, g, b] = [c, 0, x]; return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)]; };
+  const toHex = (r, g, b) => '#' + [r, g, b].map((n) => n.toString(16).padStart(2, '0')).join('');
+  const fromHex = (str) => { const m = /^#?([0-9a-f]{6})$/i.exec(String(str || '')); if (!m) return null; const n = parseInt(m[1], 16); const r = (n >> 16) / 255, g = ((n >> 8) & 255) / 255, b = (n & 255) / 255; const mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn; let hh = 0; if (d) { if (mx === r) hh = ((g - b) / d) % 6; else if (mx === g) hh = (b - r) / d + 2; else hh = (r - g) / d + 4; hh *= 60; if (hh < 0) hh += 360; } return [hh, mx ? d / mx * 100 : 0, mx * 100]; };
+  const curHex = () => toHex.apply(null, hsv2rgb(h, s, v));
+
+  const paint = () => {
+    const [r, g, b] = hsv2rgb(h, 100, 100);
+    sv.style.background = 'linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, rgb(' + r + ',' + g + ',' + b + '))';
+    svc.style.left = s + '%'; svc.style.top = (100 - v) + '%';
+    huec.style.left = (h / 360 * 100) + '%';
+    const hx = curHex(); dot.style.background = hx; txt.textContent = hx; hex.value = hx;
+  };
+  const emit = () => { paint(); if (handlers.input) handlers.input(curHex()); };
+
+  const init = fromHex(inputs.value || '#3b82f6'); if (init) [h, s, v] = init;
+  paint();
+
+  let open = false;
+  const show = () => { pop.classList.add('color-popover-open'); open = true; };
+  const hide = () => { pop.classList.remove('color-popover-open'); open = false; };
+  swatch.addEventListener('click', (e) => { e.stopPropagation(); open ? hide() : show(); });
+  pop.addEventListener('click', (e) => e.stopPropagation());
+  document.addEventListener('click', () => { if (open) hide(); });
+
+  const svPick = (e) => { const r = sv.getBoundingClientRect(); if (!r.width) return; s = Math.min(100, Math.max(0, (e.clientX - r.left) / r.width * 100)); v = Math.min(100, Math.max(0, (1 - (e.clientY - r.top) / r.height) * 100)); emit(); };
+  let svDrag = false; sv.addEventListener('pointerdown', (e) => { svDrag = true; sv.setPointerCapture(e.pointerId); svPick(e); }); sv.addEventListener('pointermove', (e) => { if (svDrag) svPick(e); }); sv.addEventListener('pointerup', () => svDrag = false);
+  const huePick = (e) => { const r = hue.getBoundingClientRect(); if (!r.width) return; h = Math.min(360, Math.max(0, (e.clientX - r.left) / r.width * 360)); emit(); };
+  let hueDrag = false; hue.addEventListener('pointerdown', (e) => { hueDrag = true; hue.setPointerCapture(e.pointerId); huePick(e); }); hue.addEventListener('pointermove', (e) => { if (hueDrag) huePick(e); }); hue.addEventListener('pointerup', () => hueDrag = false);
+  hex.addEventListener('change', () => { const r = fromHex(hex.value); if (r) { [h, s, v] = r; emit(); } });
+
+  return (n) => { const r = fromHex(n.value); if (r) { [h, s, v] = r; paint(); } };
+}

package/registry/color-picker.muten

@@ -0,0 +1,7 @@
+# Color Picker - a swatch that opens a saturation/value + hue picker. The PAGE owns the hex value (text):
+#   state { color = "#3b82f6" : text }   action setColor(v: text) mutates color { color.set(v) }
+#   ColorPicker(value: color, onInput: setColor)
+# shadcn-for-muten · Custom · host JS is src/components/ColorPicker.js (copied by `muten add color-picker`).
+part ColorPicker(value: text, onInput: action) {
+  Custom ColorPicker inputs(value: $value) on(input: $onInput) class("color-picker")
+}

package/registry/command-palette.muten

@@ -0,0 +1,14 @@
+# Command Palette - a top-anchored modal holding a Command (search + items). The PAGE owns the open bool;
+# pair it with Hotkey to open on Cmd/Ctrl+K:
+#   state { open = false : bool }   action openP mutates open { open.set(true) }   action closeP mutates open { open.set(false) }
+#   Hotkey(keys: "k", onPress: openP)
+#   CommandPalette(open: open, onClose: closeP) {
+#     Command { SearchField bind(q) "Type a command…" class("command-input")  CommandList { CommandItem(onSelect: closeP) { … } } }
+#   }
+# shadcn-for-muten · part · no deps · reuses the .dialog* + .command* classes; backdrop click closes.
+part CommandPalette(open: bool, onClose: action) {
+  Stack class("dialog-overlay command-palette", "dialog-overlay-open" when $open) {
+    Button -> $onClose class("dialog-backdrop")
+    Stack class("command-palette-content") { slot }
+  }
+}

package/registry/file-input.js

@@ -0,0 +1,23 @@
+// FileInput / Dropzone host (muten Custom). inputs: { label, accept, multiple }. handlers: { files(names) }.
+// Click or drag-drop. Emits the comma-joined file NAMES (muten actions take strings); to read the bytes,
+// edit this file to FileReader the files and emit the result (data URL / text) instead.
+export function mount(el, inputs, handlers) {
+  const placeholder = inputs.label == null ? 'Drop files here, or click to browse' : String(inputs.label);
+  const input = document.createElement('input'); input.type = 'file'; input.hidden = true;
+  if (inputs.accept) input.accept = String(inputs.accept);
+  if (inputs.multiple) input.multiple = true;
+  const label = document.createElement('div'); label.className = 'dropzone-label'; label.textContent = placeholder;
+  el.appendChild(input); el.appendChild(label);
+
+  const emit = (fileList) => {
+    const names = Array.from(fileList || []).map((f) => f.name);
+    label.textContent = names.length ? names.join(', ') : placeholder;
+    if (handlers.files) handlers.files(names.join(', '));
+  };
+
+  el.addEventListener('click', () => input.click());
+  input.addEventListener('change', () => emit(input.files));
+  el.addEventListener('dragover', (e) => { e.preventDefault(); el.classList.add('dropzone-over'); });
+  el.addEventListener('dragleave', () => el.classList.remove('dropzone-over'));
+  el.addEventListener('drop', (e) => { e.preventDefault(); el.classList.remove('dropzone-over'); emit(e.dataTransfer && e.dataTransfer.files); });
+}

package/registry/file-input.muten

@@ -0,0 +1,8 @@
+# File Input / Dropzone - click or drag-drop files. The PAGE gets the file names (text):
+#   state { picked = "" : text }   action onFiles(v: text) mutates picked { picked.set(v) }
+#   FileInput(label: "Drop a sprite sheet here", accept: "image/*", onFiles: onFiles)
+# Emits the file NAMES; to read bytes, edit src/components/FileInput.js (FileReader -> emit a data URL).
+# shadcn-for-muten · Custom · host JS is src/components/FileInput.js (copied by `muten add file-input`).
+part FileInput(label: text, accept: text, onFiles: action) {
+  Custom FileInput inputs(label: $label, accept: $accept) on(files: $onFiles) class("dropzone")
+}

package/registry/folder-picker.js

@@ -0,0 +1,18 @@
+// FolderPicker host (muten Custom). inputs: { label }. handlers: { pick(folderName) }.
+// Uses the File System Access API (showDirectoryPicker) to connect a local folder; emits its name. The directory
+// handle stays here in JS - edit this file to read/write files in the chosen folder (the studio's "connect folder").
+export function mount(el, inputs, handlers) {
+  const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'btn btn-outline gap-2';
+  const idle = inputs.label == null ? 'Connect folder' : String(inputs.label);
+  btn.textContent = idle;
+  el.appendChild(btn);
+
+  btn.addEventListener('click', async () => {
+    if (!window.showDirectoryPicker) { btn.textContent = 'Not supported in this browser'; return; }
+    try {
+      const handle = await window.showDirectoryPicker();
+      btn.textContent = handle.name;
+      if (handlers.pick) handlers.pick(handle.name);
+    } catch (e) { /* user cancelled */ }
+  });
+}

package/registry/folder-picker.muten

@@ -0,0 +1,8 @@
+# Folder Picker - connect a local folder via the File System Access API (showDirectoryPicker). The PAGE gets the
+# folder name; the directory handle stays in the host JS for reading/writing:
+#   state { folder = "" : text }   action onPick(name: text) mutates folder { folder.set(name) }
+#   FolderPicker(label: "Connect folder", onPick: onPick)
+# shadcn-for-muten · Custom · host JS is src/components/FolderPicker.js (copied by `muten add folder-picker`).
+part FolderPicker(label: text, onPick: action) {
+  Custom FolderPicker inputs(label: $label) on(pick: $onPick) class("inline-flex")
+}

package/registry/hotkey.js

@@ -0,0 +1,10 @@
+// Hotkey host (muten Custom, invisible). inputs: { keys } (e.g. "k" -> Cmd/Ctrl+K). handlers: { press }.
+// A global keyboard shortcut: useful to open a CommandPalette. Renders nothing.
+export function mount(el, inputs, handlers) {
+  const key = String(inputs.keys == null ? 'k' : inputs.keys).toLowerCase();
+  const onKey = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) { e.preventDefault(); if (handlers.press) handlers.press(); }
+  };
+  document.addEventListener('keydown', onKey);
+  return () => {};
+}

package/registry/hotkey.muten

@@ -0,0 +1,6 @@
+# Hotkey - a global keyboard shortcut (Cmd/Ctrl + a key), invisible. The PAGE provides the action to run:
+#   Hotkey(keys: "k", onPress: openPalette)   # Cmd/Ctrl + K
+# shadcn-for-muten · Custom · host JS is src/components/Hotkey.js (copied by `muten add hotkey`).
+part Hotkey(keys: text, onPress: action) {
+  Custom Hotkey inputs(keys: $keys) on(press: $onPress) class("hidden")
+}

package/registry/inspector.muten

@@ -0,0 +1,19 @@
+# Inspector / Property Grid - label:value rows in collapsible sections (the right panel of an editor). The PAGE
+# owns a bool per section + the value states; the row's slot is the value control (a NumberField, Switch, …):
+#   InspectorSection(label: "Transform", open: t, onToggle: tt) {
+#     InspectorRow(label: "X") { NumberField(value: x, …) }   InspectorRow(label: "Y") { NumberField(value: y, …) }
+#   }
+# shadcn-for-muten · part · no deps · styles via the semantic .inspector* classes in globals.css.
+part Inspector() { Stack class("inspector") { slot } }
+part InspectorSection(label: text, open: bool, onToggle: action) {
+  Stack class("inspector-section") {
+    Button -> $onToggle aria(expanded: $open) class("inspector-section-header") {
+      Span "{$label}"
+      Icon "lucide:chevron-down" class("inspector-chevron", "inspector-chevron-open" when $open)
+    }
+    when $open { Stack class("inspector-body") { slot } }
+  }
+}
+part InspectorRow(label: text) {
+  Stack class("inspector-row") { Span "{$label}" class("inspector-row-label")  slot }
+}

package/registry/number-field.js

@@ -0,0 +1,30 @@
+// NumberField host (muten Custom). inputs: { value, min, max, step }. handlers: { input(value) }.
+// [-] <input type=number> [+] - clamps to [min,max], steps on buttons / arrows / wheel, emits on change.
+const ico = (p) => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + p + '</svg>';
+export function mount(el, inputs, handlers) {
+  const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
+  let min = num(inputs.min, -Infinity), max = num(inputs.max, Infinity), step = num(inputs.step, 1) || 1;
+
+  const dec = document.createElement('button'); dec.type = 'button'; dec.className = 'number-field-btn'; dec.innerHTML = ico('<path d="M5 12h14"/>'); // lucide minus
+  const input = document.createElement('input'); input.type = 'number'; input.className = 'number-field-input';
+  const inc = document.createElement('button'); inc.type = 'button'; inc.className = 'number-field-btn'; inc.innerHTML = ico('<path d="M5 12h14"/><path d="M12 5v14"/>'); // lucide plus
+  el.appendChild(dec); el.appendChild(input); el.appendChild(inc);
+  if (Number.isFinite(min)) input.min = String(min);
+  if (Number.isFinite(max)) input.max = String(max);
+  input.step = String(step);
+
+  const clamp = (v) => Math.min(max, Math.max(min, v));
+  let value = clamp(num(inputs.value, 0));
+  input.value = String(value);
+
+  const emit = (v) => { value = clamp(v); input.value = String(value); if (handlers.input) handlers.input(value); };
+  dec.addEventListener('click', () => emit(value - step));
+  inc.addEventListener('click', () => emit(value + step));
+  input.addEventListener('change', () => emit(num(input.value, value)));
+  input.addEventListener('wheel', (e) => { if (document.activeElement === input) { e.preventDefault(); emit(value + (e.deltaY < 0 ? step : -step)); } }, { passive: false });
+
+  return (n) => {
+    min = num(n.min, min); max = num(n.max, max); step = num(n.step, step) || step;
+    value = clamp(num(n.value, value)); input.value = String(value);
+  };
+}

package/registry/number-field.muten

@@ -0,0 +1,7 @@
+# NumberField - a numeric input with -/+ steppers. The PAGE owns the value (number) + the action:
+#   state { size = 16 : number }   action setSize(v: number) mutates size { size.set(v) }
+#   NumberField(value: size, min: 1, max: 512, step: 1, onInput: setSize)
+# shadcn-for-muten · Custom · host JS is src/components/NumberField.js (copied by `muten add number-field`).
+part NumberField(value: number, min: number, max: number, step: number, onInput: action) {
+  Custom NumberField inputs(value: $value, min: $min, max: $max, step: $step) on(input: $onInput) class("number-field")
+}

package/registry/range-slider.js

@@ -0,0 +1,25 @@
+// RangeSlider host (muten Custom). inputs: { lo, hi, min, max, step }. handlers: { lo(v), hi(v) }.
+// Two thumbs; drag the nearer one. The page owns two numbers (the low + high bounds).
+export function mount(el, inputs, handlers) {
+  const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
+  const min = num(inputs.min, 0), max = num(inputs.max, 100), step = num(inputs.step, 1) || 1;
+  let lo = num(inputs.lo, min), hi = num(inputs.hi, max);
+
+  const fill = document.createElement('div'); fill.className = 'range-slider-fill';
+  const tlo = document.createElement('div'); tlo.className = 'range-slider-thumb';
+  const thi = document.createElement('div'); thi.className = 'range-slider-thumb';
+  el.appendChild(fill); el.appendChild(tlo); el.appendChild(thi);
+
+  const pct = (v) => (max === min ? 0 : (v - min) / (max - min) * 100);
+  const paint = () => { fill.style.left = pct(lo) + '%'; fill.style.width = (pct(hi) - pct(lo)) + '%'; tlo.style.left = pct(lo) + '%'; thi.style.left = pct(hi) + '%'; };
+  paint();
+
+  const valAt = (clientX) => { const r = el.getBoundingClientRect(); if (!r.width) return lo; const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width)); return Math.round((min + ratio * (max - min)) / step) * step; };
+  let dragging = null;
+  const move = (e) => { const v = valAt(e.clientX); if (dragging === 'lo') { lo = Math.min(v, hi); if (handlers.lo) handlers.lo(lo); } else { hi = Math.max(v, lo); if (handlers.hi) handlers.hi(hi); } paint(); };
+  el.addEventListener('pointerdown', (e) => { const v = valAt(e.clientX); dragging = Math.abs(v - lo) <= Math.abs(v - hi) ? 'lo' : 'hi'; el.setPointerCapture(e.pointerId); move(e); });
+  el.addEventListener('pointermove', (e) => { if (dragging) move(e); });
+  el.addEventListener('pointerup', () => dragging = null);
+
+  return (n) => { lo = num(n.lo, lo); hi = num(n.hi, hi); paint(); };
+}

package/registry/range-slider.muten

@@ -0,0 +1,7 @@
+# Range Slider - two thumbs (a low + high bound). The PAGE owns two numbers + two actions:
+#   state { lo = 20 : number  hi = 80 : number }   action setLo(v: number) mutates lo { lo.set(v) }   action setHi(v: number) mutates hi { hi.set(v) }
+#   RangeSlider(lo: lo, hi: hi, min: 0, max: 100, step: 1, onLo: setLo, onHi: setHi)
+# shadcn-for-muten · Custom · host JS is src/components/RangeSlider.js (copied by `muten add range-slider`).
+part RangeSlider(lo: number, hi: number, min: number, max: number, step: number, onLo: action, onHi: action) {
+  Custom RangeSlider inputs(lo: $lo, hi: $hi, min: $min, max: $max, step: $step) on(lo: $onLo, hi: $onHi) class("range-slider")
+}

package/registry/segmented-control.muten

@@ -0,0 +1,8 @@
+# Segmented Control - a single-select toolbar (tool picker, view switch). The PAGE owns a text state:
+#   state { tool = "select" : text }   action setTool(v: text) mutates tool { tool.set(v) }
+#   SegmentedControl { SegmentedItem(value: "select", current: tool, label: "Select", onSelect: setTool) … }
+# shadcn-for-muten · part · no deps · styles via the semantic .segmented* classes in globals.css.
+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)
+}

package/registry/sidebar.muten

@@ -0,0 +1,18 @@
+# Sidebar - a collapsible nav panel. 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) {
+#     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 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")
+  }
+}

package/registry/sortable-list.js

@@ -0,0 +1,27 @@
+// SortableList host (muten Custom). inputs: { items (comma-joined) }. handlers: { reorder(commaJoined) }.
+// Drag a row by its grip to reorder; emits the new order. The page owns a comma-joined text (e.g. layer order).
+export function mount(el, inputs, handlers) {
+  const GRIP = '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.4"/><circle cx="9" cy="12" r="1.4"/><circle cx="9" cy="18" r="1.4"/><circle cx="15" cy="6" r="1.4"/><circle cx="15" cy="12" r="1.4"/><circle cx="15" cy="18" r="1.4"/></svg>';
+  const parse = (v) => String(v == null ? '' : v).split(',').map((s) => s.trim()).filter(Boolean);
+  let items = parse(inputs.items);
+  let dragIdx = -1;
+
+  const emit = () => { if (handlers.reorder) handlers.reorder(items.join(',')); };
+  const render = () => {
+    el.innerHTML = '';
+    items.forEach((it, i) => {
+      const row = document.createElement('div'); row.className = 'sortable-row'; row.draggable = true;
+      const handle = document.createElement('span'); handle.className = 'sortable-handle'; handle.innerHTML = GRIP;
+      const label = document.createElement('span'); label.className = 'sortable-label'; label.textContent = it;
+      row.appendChild(handle); row.appendChild(label);
+      row.addEventListener('dragstart', () => { dragIdx = i; row.classList.add('sortable-dragging'); });
+      row.addEventListener('dragend', () => row.classList.remove('sortable-dragging'));
+      row.addEventListener('dragover', (e) => e.preventDefault());
+      row.addEventListener('drop', (e) => { e.preventDefault(); if (dragIdx >= 0 && dragIdx !== i) { const [m] = items.splice(dragIdx, 1); items.splice(i, 0, m); dragIdx = -1; render(); emit(); } });
+      el.appendChild(row);
+    });
+  };
+
+  render();
+  return (n) => { items = parse(n.items); render(); };
+}

package/registry/sortable-list.muten

@@ -0,0 +1,7 @@
+# Sortable List - drag rows by the grip to reorder (layers, steps). The PAGE owns a comma-joined order:
+#   state { layers = "Background,Player,UI" : text }   action reorder(v: text) mutates layers { layers.set(v) }
+#   SortableList(items: layers, onReorder: reorder)
+# shadcn-for-muten · Custom · host JS is src/components/SortableList.js (copied by `muten add sortable-list`).
+part SortableList(items: text, onReorder: action) {
+  Custom SortableList inputs(items: $items) on(reorder: $onReorder) class("sortable-list")
+}

package/registry/split-button.muten

@@ -0,0 +1,12 @@
+# Split Button - a main action + a caret that opens a dropdown. The PAGE owns the main action + the open bool:
+#   state { open = false : bool }   action t mutates open { open.toggle() }
+#   SplitButton(label: "Export", open: open, onMain: doExport, onToggle: t) { DropdownItem(label: "Export as PNG", onSelect: …) … }
+# shadcn-for-muten · part · no deps · reuses the .btn + .dropdown* classes.
+part SplitButton(label: text, open: bool, onMain: action, onToggle: action) {
+  Stack class("split-button") {
+    Button "{$label}" -> $onMain class("btn btn-default split-button-main")
+    Button -> $onToggle aria(expanded: $open) class("btn btn-default split-button-caret") { Icon "lucide:chevron-down" class("size-4") }
+    when $open { Button -> $onToggle class("dropdown-backdrop") }
+    Stack class("dropdown-content", "dropdown-content-open" when $open) { slot }
+  }
+}

package/registry/status-bar.muten

@@ -0,0 +1,6 @@
+# Status Bar - a thin bottom bar of status items (zoom %, coords, dimensions). Use StatusSpacer to push items apart.
+#   StatusBar { StatusItem(label: "Ready") StatusSpacer StatusItem(label: "32 x 32") StatusItem(label: "100%") }
+# shadcn-for-muten · part · no deps · styles via the semantic .status-* classes in globals.css.
+part StatusBar() { Stack class("status-bar") { slot } }
+part StatusItem(label: text) { Span "{$label}" class("status-item") }
+part StatusSpacer() { Stack class("status-spacer") }

package/registry/swatch.muten

@@ -0,0 +1,10 @@
+# Swatch / Swatch Palette - a grid of selectable color swatches (recent colors, a pixel palette). The PAGE owns
+# the selected hex + the list of colors:
+#   state { colors = ["#ef4444", "#3b82f6", "#22c55e"] : list<text>  active = "#3b82f6" : text }
+#   action pick(c: text) mutates active { active.set(c) }
+#   SwatchPalette { each colors as c { Swatch(color: c, current: active, onSelect: pick) } }
+# shadcn-for-muten · part · no deps · the swatch background is set via style(bg).
+part SwatchPalette() { Stack class("swatch-palette") { slot } }
+part Swatch(color: text, current: text, onSelect: action) {
+  Button -> $onSelect($color) aria(pressed: $color == $current) class("swatch", "swatch-active" when $color == $current) style(bg: "{$color}")
+}

package/registry/tag-input.js

@@ -0,0 +1,28 @@
+// TagInput host (muten Custom). inputs: { value (comma-joined), placeholder }. handlers: { change(commaJoined) }.
+// Type + Enter adds a chip; the x or Backspace (on an empty field) removes one. The page owns a comma-joined text.
+export function mount(el, inputs, handlers) {
+  const parse = (v) => String(v == null ? '' : v).split(',').map((s) => s.trim()).filter(Boolean);
+  let tags = parse(inputs.value);
+  const input = document.createElement('input'); input.className = 'tag-input-field';
+  input.placeholder = inputs.placeholder == null ? 'Add tag…' : String(inputs.placeholder);
+
+  const emit = () => { if (handlers.change) handlers.change(tags.join(',')); render(); };
+  const render = () => {
+    el.innerHTML = '';
+    for (const t of tags) {
+      const chip = document.createElement('span'); chip.className = 'tag-chip'; chip.textContent = t;
+      const x = document.createElement('span'); x.className = 'tag-chip-x'; x.innerHTML = '<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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'; // lucide x
+      x.addEventListener('click', (e) => { e.stopPropagation(); tags = tags.filter((z) => z !== t); emit(); });
+      chip.appendChild(x); el.appendChild(chip);
+    }
+    el.appendChild(input);
+  };
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && input.value.trim()) { e.preventDefault(); const v = input.value.trim(); if (!tags.includes(v)) tags.push(v); input.value = ''; emit(); }
+    else if (e.key === 'Backspace' && !input.value && tags.length) { tags.pop(); emit(); }
+  });
+  el.addEventListener('click', () => input.focus());
+
+  render();
+  return (n) => { tags = parse(n.value); render(); };
+}

package/registry/tag-input.muten

@@ -0,0 +1,7 @@
+# Tag Input - chips you add by typing + Enter, remove with x / Backspace. The PAGE owns a comma-joined text:
+#   state { tags = "sprite,enemy" : text }   action setTags(v: text) mutates tags { tags.set(v) }
+#   TagInput(value: tags, placeholder: "Add tag…", onChange: setTags)
+# shadcn-for-muten · Custom · host JS is src/components/TagInput.js (copied by `muten add tag-input`).
+part TagInput(value: text, placeholder: text, onChange: action) {
+  Custom TagInput inputs(value: $value, placeholder: $placeholder) on(change: $onChange) class("tag-input")
+}

package/registry/toolbar.muten

@@ -0,0 +1,6 @@
+# Toolbar - a grouped button bar with separators. Put icon buttons inside (class("btn btn-ghost btn-icon")).
+#   Toolbar { ToolbarGroup { Button { Icon "lucide:mouse-pointer-2" } class("btn btn-ghost btn-icon") … } ToolbarSeparator ToolbarGroup { … } }
+# shadcn-for-muten · part · no deps · styles via the semantic .toolbar* classes in globals.css.
+part Toolbar() { Stack class("toolbar") { slot } }
+part ToolbarGroup() { Stack class("toolbar-group") { slot } }
+part ToolbarSeparator() { Stack class("toolbar-separator") }

package/registry/tree-view.js

@@ -0,0 +1,49 @@
+// 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.
+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>';
+  const SAMPLE = [
+    { name: 'src', children: [
+      { name: 'app.muten' },
+      { name: 'pages', children: [{ name: 'home.muten' }, { name: 'editor.muten' }] },
+      { name: 'components', children: [{ name: 'Canvas.js' }] },
+      { name: 'styles.css' },
+    ] },
+    { name: 'theme.muten' },
+    { name: 'package.json' },
+  ];
+
+  let data = Array.isArray(inputs.data) && inputs.data.length ? inputs.data : SAMPLE;
+  let selected = '';
+  const expanded = new Set();
+  for (const n of data) if (Array.isArray(n.children)) expanded.add('/' + n.name); // first level open
+
+  const build = (nodes, container, depth, parent) => {
+    for (const node of nodes) {
+      const path = parent + '/' + node.name;
+      const isFolder = Array.isArray(node.children);
+      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');
+      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>' : '';
+      const ic = document.createElement('span'); ic.className = 'tree-icon'; ic.innerHTML = isFolder ? FOLDER : FILE;
+      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);
+        render();
+      });
+      container.appendChild(row);
+      if (isFolder && expanded.has(path)) build(node.children, container, depth + 1, path);
+    }
+  };
+  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(); };
+}

package/registry/tree-view.muten

@@ -0,0 +1,8 @@
+# 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")
+}

package/registry/vector-field.muten

@@ -0,0 +1,10 @@
+# Vector Field - paired NumberFields (X / Y) for position or size. The PAGE owns two number states + two actions:
+#   state { px = 0 : number  py = 0 : number }   action setX(v: number) mutates px { px.set(v) }   action setY(v: number) mutates py { py.set(v) }
+#   VectorField(x: px, y: py, min: -9999, max: 9999, step: 1, onX: setX, onY: setY)
+# shadcn-for-muten · part · depends on number-field · styles via the semantic .vector* classes.
+part VectorField(x: number, y: number, min: number, max: number, step: number, onX: action, onY: action) {
+  Stack class("vector-field") {
+    Stack class("vector-axis") { Span "X" class("vector-axis-label")  NumberField(value: $x, min: $min, max: $max, step: $step, onInput: $onX) }
+    Stack class("vector-axis") { Span "Y" class("vector-axis-label")  NumberField(value: $y, min: $min, max: $max, step: $step, onInput: $onY) }
+  }
+}

package/registry/zoom-control.muten

@@ -0,0 +1,11 @@
+# Zoom Control - a  -  100%  +  widget. The PAGE owns the zoom number + the -/+ actions:
+#   state { zoom = 100 : number }   action zOut mutates zoom { zoom.set(zoom - 10) }   action zIn mutates zoom { zoom.set(zoom + 10) }
+#   ZoomControl(value: zoom, onOut: zOut, onIn: zIn)
+# shadcn-for-muten · part · no deps · styles via the semantic .zoom-* classes in globals.css.
+part ZoomControl(value: number, onOut: action, onIn: action) {
+  Stack class("zoom-control") {
+    Button -> $onOut class("zoom-btn") { Icon "lucide:minus" class("size-4") }
+    Span "{$value}%" class("zoom-value")
+    Button -> $onIn class("zoom-btn") { Icon "lucide:plus" class("size-4") }
+  }
+}

package/registry.json

@@ -47,7 +47,27 @@
     { "name": "carousel",     "part": "Carousel",     "file": "registry/carousel.muten",     "component": "Carousel", "description": "A slide carousel over a list (Custom). Page owns the slides list.", "deps": [] },
     { "name": "chart",        "part": "Chart",        "file": "registry/chart.muten",        "component": "Chart", "description": "An SVG bar chart over a list of { label, value } (Custom).", "deps": [] },
     { "name": "resizable",    "part": "Resizable",    "file": "registry/resizable.muten",    "component": "Resizable", "description": "Two panels with a draggable splitter (Custom).", "deps": [] },
-    { "name": "context-menu", "part": "ContextMenu",  "file": "registry/context-menu.muten", "component": "ContextMenu", "description": "Right-click an area to open a menu of items (Custom).", "deps": [] }
+    { "name": "context-menu", "part": "ContextMenu",  "file": "registry/context-menu.muten", "component": "ContextMenu", "description": "Right-click an area to open a menu of items (Custom).", "deps": [] },
+    { "name": "number-field",      "part": "NumberField",      "file": "registry/number-field.muten",      "component": "NumberField", "description": "A numeric input with -/+ steppers, min/max/step (Custom).", "deps": [] },
+    { "name": "segmented-control", "part": "SegmentedControl", "file": "registry/segmented-control.muten", "description": "A single-select toolbar (SegmentedItem); page owns a text state.", "deps": [] },
+    { "name": "file-input",        "part": "FileInput",        "file": "registry/file-input.muten",        "component": "FileInput", "description": "A click/drag-drop file dropzone (Custom); emits file names.", "deps": [] },
+    { "name": "color-picker",      "part": "ColorPicker",      "file": "registry/color-picker.muten",      "component": "ColorPicker", "description": "A swatch + saturation/value + hue popover (Custom); page owns the hex.", "deps": [] },
+    { "name": "vector-field",      "part": "VectorField",      "file": "registry/vector-field.muten",      "description": "Paired NumberFields (X/Y) for position or size.", "deps": ["number-field"] },
+    { "name": "tree-view",         "part": "TreeView",         "file": "registry/tree-view.muten",         "component": "TreeView", "description": "A nested folder/file tree (Custom): expandable, selectable, icons + indent.", "deps": [] },
+    { "name": "toolbar",           "part": "Toolbar",          "file": "registry/toolbar.muten",           "description": "A grouped button bar with ToolbarGroup / ToolbarSeparator.", "deps": [] },
+    { "name": "canvas-viewport",   "part": "CanvasViewport",   "file": "registry/canvas-viewport.muten",   "component": "CanvasHost", "description": "A <canvas> with pan/zoom (Custom) + a muten toolbar slot floating on top.", "deps": [] },
+    { "name": "status-bar",        "part": "StatusBar",        "file": "registry/status-bar.muten",        "description": "A thin bottom bar with StatusItem / StatusSpacer.", "deps": [] },
+    { "name": "zoom-control",      "part": "ZoomControl",      "file": "registry/zoom-control.muten",      "description": "A - 100% + zoom widget; page owns the zoom number.", "deps": [] },
+    { "name": "split-button",      "part": "SplitButton",      "file": "registry/split-button.muten",      "description": "A main action + a caret dropdown; page owns the open bool.", "deps": [] },
+    { "name": "tag-input",         "part": "TagInput",         "file": "registry/tag-input.muten",         "component": "TagInput", "description": "Chips you add by typing + Enter (Custom); page owns a comma-joined text.", "deps": [] },
+    { "name": "swatch",            "part": "SwatchPalette",    "file": "registry/swatch.muten",            "description": "A grid of selectable color swatches (Swatch); page owns the selected hex + colors.", "deps": [] },
+    { "name": "range-slider",      "part": "RangeSlider",      "file": "registry/range-slider.muten",      "component": "RangeSlider", "description": "A two-thumb range slider (Custom); page owns the low + high numbers.", "deps": [] },
+    { "name": "sidebar",           "part": "Sidebar",          "file": "registry/sidebar.muten",           "description": "A collapsible nav panel: SidebarHeader / SidebarGroup / SidebarItem.", "deps": [] },
+    { "name": "sortable-list",     "part": "SortableList",     "file": "registry/sortable-list.muten",     "component": "SortableList", "description": "Drag rows to reorder (Custom); page owns a comma-joined order.", "deps": [] },
+    { "name": "inspector",         "part": "Inspector",        "file": "registry/inspector.muten",         "description": "Property grid: InspectorSection (collapsible) / InspectorRow (label : value slot).", "deps": [] },
+    { "name": "folder-picker",     "part": "FolderPicker",     "file": "registry/folder-picker.muten",     "component": "FolderPicker", "description": "Connect a local folder via showDirectoryPicker (Custom); emits the name.", "deps": [] },
+    { "name": "command-palette",   "part": "CommandPalette",   "file": "registry/command-palette.muten",   "description": "A top-anchored modal holding a Command; page owns the open bool.", "deps": [] },
+    { "name": "hotkey",            "part": "Hotkey",           "file": "registry/hotkey.muten",            "component": "Hotkey", "description": "A global keyboard shortcut (Cmd/Ctrl+key), invisible (Custom).", "deps": [] }
   ],
   "classComponents": {
     "note": "Size/spacing-driven primitives ship as classes in globals.css (no `muten add` needed once you @import it). Style the muten primitive with these:",