feat: initial commit — crema-app-aifirst-template

Hybrid traditional + AI-first webapp scaffold. Sibling to crema-app-template,
adds the AI assistant surface, command bus, scripts dialog, and virtual
cursor.

What's pre-wired:
- 6 routes: Overview, Resources, Activity, Assistant, Library, Settings
- Collapsible rail + appbar + avatar dropdown shell (template code, not a lib)
- Mobile sheet at <md
- /assistant: streaming chat via @crema/llm-ui, mock fallback, model selector,
  token meter, retry probe, stop-while-streaming, persistent UI Control toggle
- /settings: editable LM Studio endpoint + context window + response cap, with
  test-connection button
- Markdown rendering for assistant replies; ```action``` blocks rendered as a
  small "Ran N actions" pill
- ⌘⇧P script runner dialog + Play icon in the appbar
- Two demo scripts in public/scripts/
- mightypix theme as default, scoped via <AppShell theme="mightypix">

Libs wired in tsconfig + app.css:
- @crema/action-bus (the bus, parser, runner, cursor, provider, ws, llm-bridge)
- @crema/llm-ui, @crema/chat-ui, @crema/aifirst-ui, @crema/notification-ui
- lib-theme-mightypix

Docs:
- README.md — pitch + quick start + structure
- docs/AI_FIRST.md — full system tour (data-action contract, bus, DSL, scripts,
  cursor, LLM integration)
- app/components/layout/THEME_CONTRACT.md — every CSS variable a theme must declare
- CLAUDE.md — orientation for an LLM working in the repo

Genericized from comfy-cloud (the original prototype):
- Brand defaults to "App" / Sparkles icon (override via app/lib/identity.ts)
- User defaults to a stub (swap useUser() for real auth)
- localStorage namespace is "crema.*" (was "comfy.*")

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/components/ui/signature-pad.tsx

@@ -0,0 +1,164 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  type ComponentProps,
+} from "react"
+
+import { Button } from "~/components/ui/button"
+import { cn } from "~/lib/utils"
+
+type SignaturePadProps = Omit<ComponentProps<"div">, "onChange"> & {
+  width?: number
+  height?: number
+  strokeColor?: string
+  strokeWidth?: number
+  disabled?: boolean
+  onChange?: (dataUrl: string | null) => void
+  onClear?: () => void
+}
+
+function SignaturePad({
+  width = 400,
+  height = 160,
+  strokeColor,
+  strokeWidth = 2,
+  disabled = false,
+  onChange,
+  onClear,
+  className,
+  ...props
+}: SignaturePadProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const drawing = useRef(false)
+  const empty = useRef(true)
+
+  const getCtx = useCallback(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return null
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return null
+    ctx.strokeStyle = strokeColor ?? "currentColor"
+    ctx.lineWidth = strokeWidth
+    ctx.lineCap = "round"
+    ctx.lineJoin = "round"
+    return ctx
+  }, [strokeColor, strokeWidth])
+
+  const getPos = (e: MouseEvent | TouchEvent, canvas: HTMLCanvasElement) => {
+    const rect = canvas.getBoundingClientRect()
+    const scaleX = canvas.width / rect.width
+    const scaleY = canvas.height / rect.height
+    const source = "touches" in e ? e.touches[0] : e
+    return {
+      x: (source.clientX - rect.left) * scaleX,
+      y: (source.clientY - rect.top) * scaleY,
+    }
+  }
+
+  const startDraw = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (disabled) return
+      const canvas = canvasRef.current
+      if (!canvas) return
+      const ctx = getCtx()
+      if (!ctx) return
+      drawing.current = true
+      const { x, y } = getPos(e, canvas)
+      ctx.beginPath()
+      ctx.moveTo(x, y)
+      e.preventDefault()
+    },
+    [disabled, getCtx]
+  )
+
+  const draw = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (!drawing.current || disabled) return
+      const canvas = canvasRef.current
+      if (!canvas) return
+      const ctx = getCtx()
+      if (!ctx) return
+      const { x, y } = getPos(e, canvas)
+      ctx.lineTo(x, y)
+      ctx.stroke()
+      empty.current = false
+      e.preventDefault()
+    },
+    [disabled, getCtx]
+  )
+
+  const endDraw = useCallback(() => {
+    if (!drawing.current) return
+    drawing.current = false
+    const canvas = canvasRef.current
+    if (!canvas) return
+    onChange?.(empty.current ? null : canvas.toDataURL())
+  }, [onChange])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    canvas.addEventListener("mousedown", startDraw)
+    canvas.addEventListener("mousemove", draw)
+    canvas.addEventListener("mouseup", endDraw)
+    canvas.addEventListener("mouseleave", endDraw)
+    canvas.addEventListener("touchstart", startDraw, { passive: false })
+    canvas.addEventListener("touchmove", draw, { passive: false })
+    canvas.addEventListener("touchend", endDraw)
+    return () => {
+      canvas.removeEventListener("mousedown", startDraw)
+      canvas.removeEventListener("mousemove", draw)
+      canvas.removeEventListener("mouseup", endDraw)
+      canvas.removeEventListener("mouseleave", endDraw)
+      canvas.removeEventListener("touchstart", startDraw)
+      canvas.removeEventListener("touchmove", draw)
+      canvas.removeEventListener("touchend", endDraw)
+    }
+  }, [startDraw, draw, endDraw])
+
+  const clear = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    ctx?.clearRect(0, 0, canvas.width, canvas.height)
+    empty.current = true
+    onChange?.(null)
+    onClear?.()
+  }
+
+  return (
+    <div
+      data-slot="signature-pad"
+      data-disabled={disabled || undefined}
+      className={cn(
+        "inline-flex flex-col overflow-hidden rounded-lg border bg-background data-[disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        className="block touch-none bg-card"
+        style={{ width, height }}
+      />
+      <div className="flex items-center justify-between border-t bg-muted/30 px-3 py-1.5">
+        <span className="text-xs text-muted-foreground">Sign above</span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="xs"
+          onClick={clear}
+          disabled={disabled}
+        >
+          Clear
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export { SignaturePad }
+export type { SignaturePadProps }