@monkey-mini-app/ui 0.1.0

package/dist/src/products/sortable-list.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import {
+  DndContext,
+  closestCenter,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  SortableContext,
+  arrayMove,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { GripVertical } from "lucide-react"
+
+export type SortableItem = { id: string; label: string }
+
+function Row({ item }: { item: SortableItem }) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.id })
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className="flex items-center gap-2 rounded-lg border bg-card px-2 py-1.5 text-sm"
+    >
+      <button type="button" className="text-muted-foreground" {...attributes} {...listeners}>
+        <GripVertical className="size-3.5" />
+      </button>
+      {item.label}
+    </div>
+  )
+}
+
+export function SortableList({
+  items,
+  onChange,
+}: {
+  items: SortableItem[]
+  onChange?: (items: SortableItem[]) => void
+}) {
+  const onDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const oldIndex = items.findIndex((item) => item.id === active.id)
+    const newIndex = items.findIndex((item) => item.id === over.id)
+    onChange?.(arrayMove(items, oldIndex, newIndex))
+  }
+  return (
+    <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+      <SortableContext items={items.map((item) => item.id)} strategy={verticalListSortingStrategy}>
+        <div className="flex flex-col gap-1.5" data-testid="sortable-list">
+          {items.map((item) => (
+            <Row key={item.id} item={item} />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  )
+}

package/dist/src/products/stepper.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { Check } from "lucide-react"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export type Step = { id: string; title: string; description?: string }
+
+export function Stepper({
+  steps,
+  current,
+  orientation = "vertical",
+  onStepClick,
+}: {
+  steps: Step[]
+  current: number
+  orientation?: "vertical" | "horizontal"
+  onStepClick?: (index: number) => void
+}) {
+  const horizontal = orientation === "horizontal"
+
+  return (
+    <ol
+      data-testid="stepper"
+      data-orientation={orientation}
+      className={cn(horizontal ? "flex items-start gap-0" : "flex flex-col gap-3")}
+    >
+      {steps.map((step, index) => {
+        const state =
+          index < current ? "done" : index === current ? "current" : "todo"
+        const clickable = Boolean(onStepClick)
+        return (
+          <li
+            key={step.id}
+            className={cn(
+              horizontal
+                ? "flex min-w-0 flex-1 flex-col items-center text-center"
+                : "flex gap-3"
+            )}
+          >
+            <div
+              className={cn(
+                "flex items-center",
+                horizontal ? "w-full justify-center" : "flex-col"
+              )}
+            >
+              {horizontal && index > 0 ? (
+                <span
+                  className={cn(
+                    "mr-2 h-px min-w-4 flex-1",
+                    index <= current ? "bg-primary" : "bg-border"
+                  )}
+                />
+              ) : null}
+              <button
+                type="button"
+                disabled={!clickable}
+                onClick={() => onStepClick?.(index)}
+                className={cn(
+                  "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-medium",
+                  state === "done" && "bg-primary text-primary-foreground",
+                  state === "current" && "border-2 border-primary text-primary",
+                  state === "todo" && "border text-muted-foreground",
+                  clickable && "cursor-pointer"
+                )}
+              >
+                {state === "done" ? <Check className="size-3.5" /> : index + 1}
+              </button>
+              {horizontal && index < steps.length - 1 ? (
+                <span
+                  className={cn(
+                    "ml-2 h-px min-w-4 flex-1",
+                    index < current ? "bg-primary" : "bg-border"
+                  )}
+                />
+              ) : null}
+            </div>
+            <div className={cn(horizontal ? "mt-2 px-1" : "")}>
+              <div className="text-sm font-medium">{step.title}</div>
+              {step.description ? (
+                <p className="text-muted-foreground text-xs">{step.description}</p>
+              ) : null}
+            </div>
+          </li>
+        )
+      })}
+    </ol>
+  )
+}

package/dist/src/products/timeline.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export type TimelineItem = {
+  id: string
+  title: string
+  description?: string
+  time?: string
+}
+
+export function Timeline({ items }: { items: TimelineItem[] }) {
+  return (
+    <ol className="relative space-y-4 border-l pl-4" data-testid="timeline">
+      {items.map((item, index) => (
+        <li key={item.id} className="relative">
+          <span
+            className={cn(
+              "absolute top-1.5 -left-[21px] size-2.5 rounded-full border bg-background",
+              index === 0 ? "border-primary bg-primary" : "border-muted-foreground/40"
+            )}
+          />
+          <div className="text-sm font-medium">{item.title}</div>
+          {item.description ? (
+            <p className="text-muted-foreground text-xs">{item.description}</p>
+          ) : null}
+          {item.time ? (
+            <p className="text-muted-foreground mt-0.5 text-[11px]">{item.time}</p>
+          ) : null}
+        </li>
+      ))}
+    </ol>
+  )
+}

package/dist/src/products/tree-view.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+export type TreeNode = {
+  id: string
+  label: string
+  children?: TreeNode[]
+}
+
+function Node({
+  node,
+  depth,
+}: {
+  node: TreeNode
+  depth: number
+}) {
+  const [open, setOpen] = React.useState(true)
+  const hasChildren = Boolean(node.children?.length)
+  return (
+    <div>
+      <button
+        type="button"
+        className="flex w-full items-center gap-1 rounded-md px-1 py-0.5 text-left text-sm hover:bg-muted"
+        style={{ paddingLeft: depth * 12 }}
+        onClick={() => hasChildren && setOpen((value) => !value)}
+      >
+        <ChevronRight
+          className={cn(
+            "size-3.5 text-muted-foreground transition",
+            hasChildren ? (open ? "rotate-90" : "") : "opacity-0"
+          )}
+        />
+        {node.label}
+      </button>
+      {open && hasChildren
+        ? node.children!.map((child) => (
+            <Node key={child.id} node={child} depth={depth + 1} />
+          ))
+        : null}
+    </div>
+  )
+}
+
+export function TreeView({ nodes }: { nodes: TreeNode[] }) {
+  return (
+    <div data-testid="tree-view">
+      {nodes.map((node) => (
+        <Node key={node.id} node={node} depth={0} />
+      ))}
+    </div>
+  )
+}

package/dist/src/styles/globals.css

@@ -0,0 +1,352 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+/* No @source directives: generate the FULL default Tailwind utility set (incl. all
+   responsive variants). Runtime mini-apps live outside this repo and would otherwise
+   miss any class that never appears here (e.g. lg:grid-cols-2) — the per-app Tailwind
+   re-scan was unreliable. A single comprehensive stylesheet served to every app is
+   ~480KB but shared/cached, covers all standard classes, and removes the fragile
+   per-app compile. Arbitrary values (w-[320px]) are NOT auto-generated by Tailwind;
+   apps should stick to standard utilities. */
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+    --font-sans: 'Geist Variable', sans-serif;
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+/* 草莓抹茶：奶油纸 + 抹茶底 + 草莓主色 */
+[data-theme="strawberry-matcha"] {
+    --background: oklch(0.985 0.012 95);
+    --foreground: oklch(0.24 0.035 40);
+    --card: oklch(0.995 0.008 95);
+    --card-foreground: oklch(0.24 0.035 40);
+    --popover: oklch(0.995 0.008 95);
+    --popover-foreground: oklch(0.24 0.035 40);
+    --primary: oklch(0.58 0.175 18);
+    --primary-foreground: oklch(0.99 0.01 95);
+    --secondary: oklch(0.93 0.045 132);
+    --secondary-foreground: oklch(0.32 0.06 142);
+    --muted: oklch(0.95 0.028 128);
+    --muted-foreground: oklch(0.48 0.03 50);
+    --accent: oklch(0.90 0.065 138);
+    --accent-foreground: oklch(0.28 0.055 142);
+    --destructive: oklch(0.55 0.2 25);
+    --border: oklch(0.90 0.03 125);
+    --input: oklch(0.90 0.03 125);
+    --ring: oklch(0.58 0.14 18);
+    --chart-1: oklch(0.62 0.17 18);
+    --chart-2: oklch(0.62 0.11 140);
+    --chart-3: oklch(0.72 0.08 85);
+    --chart-4: oklch(0.45 0.06 40);
+    --chart-5: oklch(0.70 0.12 8);
+    --radius: 0.75rem;
+    --sidebar: oklch(0.96 0.035 132);
+    --sidebar-foreground: oklch(0.24 0.035 40);
+    --sidebar-primary: oklch(0.58 0.175 18);
+    --sidebar-primary-foreground: oklch(0.99 0.01 95);
+    --sidebar-accent: oklch(0.91 0.05 138);
+    --sidebar-accent-foreground: oklch(0.28 0.055 142);
+    --sidebar-border: oklch(0.88 0.035 128);
+    --sidebar-ring: oklch(0.58 0.14 18);
+}
+
+.dark[data-theme="strawberry-matcha"] {
+    --background: oklch(0.18 0.028 148);
+    --foreground: oklch(0.96 0.015 95);
+    --card: oklch(0.23 0.032 148);
+    --card-foreground: oklch(0.96 0.015 95);
+    --popover: oklch(0.23 0.032 148);
+    --popover-foreground: oklch(0.96 0.015 95);
+    --primary: oklch(0.74 0.14 16);
+    --primary-foreground: oklch(0.20 0.04 20);
+    --secondary: oklch(0.28 0.04 145);
+    --secondary-foreground: oklch(0.94 0.02 95);
+    --muted: oklch(0.27 0.03 148);
+    --muted-foreground: oklch(0.72 0.03 120);
+    --accent: oklch(0.32 0.055 142);
+    --accent-foreground: oklch(0.95 0.02 95);
+    --destructive: oklch(0.68 0.16 20);
+    --border: oklch(0.35 0.03 145);
+    --input: oklch(0.35 0.03 145);
+    --ring: oklch(0.70 0.12 16);
+    --chart-1: oklch(0.72 0.14 16);
+    --chart-2: oklch(0.70 0.1 140);
+    --chart-3: oklch(0.75 0.07 85);
+    --chart-4: oklch(0.62 0.05 40);
+    --chart-5: oklch(0.68 0.1 8);
+    --sidebar: oklch(0.20 0.03 148);
+    --sidebar-foreground: oklch(0.96 0.015 95);
+    --sidebar-primary: oklch(0.74 0.14 16);
+    --sidebar-primary-foreground: oklch(0.20 0.04 20);
+    --sidebar-accent: oklch(0.30 0.05 142);
+    --sidebar-accent-foreground: oklch(0.95 0.02 95);
+    --sidebar-border: oklch(0.35 0.03 145);
+    --sidebar-ring: oklch(0.70 0.12 16);
+}
+
+/* 苔原：霜白 + 地衣绿 + 泥炭 / 冷石 */
+[data-theme="tundra"] {
+    --background: oklch(0.97 0.012 210);
+    --foreground: oklch(0.23 0.025 80);
+    --card: oklch(0.985 0.008 210);
+    --card-foreground: oklch(0.23 0.025 80);
+    --popover: oklch(0.985 0.008 210);
+    --popover-foreground: oklch(0.23 0.025 80);
+    --primary: oklch(0.42 0.065 155);
+    --primary-foreground: oklch(0.98 0.01 210);
+    --secondary: oklch(0.92 0.018 85);
+    --secondary-foreground: oklch(0.28 0.03 80);
+    --muted: oklch(0.94 0.012 210);
+    --muted-foreground: oklch(0.50 0.02 210);
+    --accent: oklch(0.89 0.04 160);
+    --accent-foreground: oklch(0.28 0.04 155);
+    --destructive: oklch(0.52 0.14 30);
+    --border: oklch(0.88 0.018 210);
+    --input: oklch(0.88 0.018 210);
+    --ring: oklch(0.45 0.06 155);
+    --chart-1: oklch(0.50 0.07 155);
+    --chart-2: oklch(0.68 0.06 220);
+    --chart-3: oklch(0.58 0.07 75);
+    --chart-4: oklch(0.62 0.03 80);
+    --chart-5: oklch(0.72 0.05 165);
+    --radius: 0.5rem;
+    --sidebar: oklch(0.95 0.014 210);
+    --sidebar-foreground: oklch(0.23 0.025 80);
+    --sidebar-primary: oklch(0.42 0.065 155);
+    --sidebar-primary-foreground: oklch(0.98 0.01 210);
+    --sidebar-accent: oklch(0.90 0.035 160);
+    --sidebar-accent-foreground: oklch(0.28 0.04 155);
+    --sidebar-border: oklch(0.86 0.018 210);
+    --sidebar-ring: oklch(0.45 0.06 155);
+}
+
+.dark[data-theme="tundra"] {
+    --background: oklch(0.17 0.022 225);
+    --foreground: oklch(0.93 0.012 210);
+    --card: oklch(0.22 0.025 225);
+    --card-foreground: oklch(0.93 0.012 210);
+    --popover: oklch(0.22 0.025 225);
+    --popover-foreground: oklch(0.93 0.012 210);
+    --primary: oklch(0.72 0.075 155);
+    --primary-foreground: oklch(0.18 0.03 155);
+    --secondary: oklch(0.26 0.02 80);
+    --secondary-foreground: oklch(0.93 0.012 210);
+    --muted: oklch(0.26 0.02 225);
+    --muted-foreground: oklch(0.70 0.02 210);
+    --accent: oklch(0.30 0.04 160);
+    --accent-foreground: oklch(0.93 0.012 210);
+    --destructive: oklch(0.65 0.14 28);
+    --border: oklch(0.32 0.02 220);
+    --input: oklch(0.32 0.02 220);
+    --ring: oklch(0.70 0.06 155);
+    --chart-1: oklch(0.68 0.08 155);
+    --chart-2: oklch(0.70 0.06 220);
+    --chart-3: oklch(0.62 0.07 75);
+    --chart-4: oklch(0.58 0.03 80);
+    --chart-5: oklch(0.74 0.05 165);
+    --sidebar: oklch(0.19 0.022 225);
+    --sidebar-foreground: oklch(0.93 0.012 210);
+    --sidebar-primary: oklch(0.72 0.075 155);
+    --sidebar-primary-foreground: oklch(0.18 0.03 155);
+    --sidebar-accent: oklch(0.28 0.035 160);
+    --sidebar-accent-foreground: oklch(0.93 0.012 210);
+    --sidebar-border: oklch(0.32 0.02 220);
+    --sidebar-ring: oklch(0.70 0.06 155);
+}
+
+/* 石墨青：石墨灰底 + 青/teal 点缀 */
+[data-theme="graphite-qing"] {
+    --background: oklch(0.975 0.006 240);
+    --foreground: oklch(0.20 0.018 255);
+    --card: oklch(0.99 0.004 240);
+    --card-foreground: oklch(0.20 0.018 255);
+    --popover: oklch(0.99 0.004 240);
+    --popover-foreground: oklch(0.20 0.018 255);
+    --primary: oklch(0.40 0.075 205);
+    --primary-foreground: oklch(0.98 0.01 205);
+    --secondary: oklch(0.93 0.012 255);
+    --secondary-foreground: oklch(0.25 0.02 255);
+    --muted: oklch(0.94 0.01 250);
+    --muted-foreground: oklch(0.50 0.02 250);
+    --accent: oklch(0.90 0.04 205);
+    --accent-foreground: oklch(0.28 0.04 205);
+    --destructive: oklch(0.55 0.18 25);
+    --border: oklch(0.88 0.015 250);
+    --input: oklch(0.88 0.015 250);
+    --ring: oklch(0.45 0.07 205);
+    --chart-1: oklch(0.50 0.08 205);
+    --chart-2: oklch(0.45 0.02 255);
+    --chart-3: oklch(0.58 0.06 230);
+    --chart-4: oklch(0.62 0.04 190);
+    --chart-5: oklch(0.70 0.03 250);
+    --radius: 0.45rem;
+    --sidebar: oklch(0.95 0.01 250);
+    --sidebar-foreground: oklch(0.20 0.018 255);
+    --sidebar-primary: oklch(0.40 0.075 205);
+    --sidebar-primary-foreground: oklch(0.98 0.01 205);
+    --sidebar-accent: oklch(0.91 0.03 205);
+    --sidebar-accent-foreground: oklch(0.28 0.04 205);
+    --sidebar-border: oklch(0.86 0.015 250);
+    --sidebar-ring: oklch(0.45 0.07 205);
+}
+
+.dark[data-theme="graphite-qing"] {
+    --background: oklch(0.16 0.018 255);
+    --foreground: oklch(0.93 0.01 240);
+    --card: oklch(0.21 0.02 255);
+    --card-foreground: oklch(0.93 0.01 240);
+    --popover: oklch(0.21 0.02 255);
+    --popover-foreground: oklch(0.93 0.01 240);
+    --primary: oklch(0.76 0.085 198);
+    --primary-foreground: oklch(0.16 0.02 255);
+    --secondary: oklch(0.26 0.02 255);
+    --secondary-foreground: oklch(0.93 0.01 240);
+    --muted: oklch(0.26 0.018 255);
+    --muted-foreground: oklch(0.70 0.02 250);
+    --accent: oklch(0.30 0.04 205);
+    --accent-foreground: oklch(0.93 0.01 240);
+    --destructive: oklch(0.68 0.16 22);
+    --border: oklch(1 0.01 250 / 12%);
+    --input: oklch(1 0.01 250 / 16%);
+    --ring: oklch(0.70 0.07 198);
+    --chart-1: oklch(0.72 0.08 198);
+    --chart-2: oklch(0.62 0.02 255);
+    --chart-3: oklch(0.65 0.06 230);
+    --chart-4: oklch(0.68 0.05 190);
+    --chart-5: oklch(0.55 0.02 250);
+    --sidebar: oklch(0.18 0.02 255);
+    --sidebar-foreground: oklch(0.93 0.01 240);
+    --sidebar-primary: oklch(0.76 0.085 198);
+    --sidebar-primary-foreground: oklch(0.16 0.02 255);
+    --sidebar-accent: oklch(0.28 0.035 205);
+    --sidebar-accent-foreground: oklch(0.93 0.01 240);
+    --sidebar-border: oklch(1 0.01 250 / 12%);
+    --sidebar-ring: oklch(0.70 0.07 198);
+}
+
+/* unDraw illustrations (vendor, free/MIT) use --primary-svg-color for their accent.
+   Point it at --primary so empty states follow the active palette in light/dark.
+   Other unDraw colors are replaced with theme tokens at vendor time (vendor-undraw.mjs). */
+:root {
+  --primary-svg-color: var(--primary);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@monkey-mini-app/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "skill:gen": "node ../../scripts/generate-skill.mjs",
+    "build:dist": "node ../../scripts/build-ui.mjs",
+    "build": "node ../../scripts/build-ui.mjs",
+    "prepack": "node ../../scripts/build-ui.mjs"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@shadcn/react": "^0.3.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@tiptap/extension-placeholder": "^3.30.3",
+    "@tiptap/pm": "^3.30.3",
+    "@tiptap/react": "^3.30.3",
+    "@tiptap/starter-kit": "^3.30.3",
+    "@uiw/react-codemirror": "^4.25.11",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "diff": "^9.0.0",
+    "lucide-react": "^0.544.0",
+    "react": "^19.2.6",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.6",
+    "react-dropzone": "^20.1.1",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.12.3",
+    "recharts": "^3.8.0",
+    "remark-gfm": "^4.0.1",
+    "shadcn": "^4.19.0",
+    "shiki": "^4.4.3",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/diff": "^8.0.0",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9",
+    "jsdom": "^26.1.0",
+    "tailwindcss": "^4",
+    "typescript": "~5.9.2",
+    "vite": "^7",
+    "vitest": "^3.2.4"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./globals.css": "./dist/globals.css",
+    "./*": {
+      "types": "./dist/src/*",
+      "default": "./dist/src/*"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.css.js",
+    "**/*.woff",
+    "**/*.woff2"
+  ],
+  "files": [
+    "dist",
+    "components.json"
+  ]
+}