@multicomma/arkcn 0.1.0 → 0.1.2

package/README.md

@@ -69,6 +69,13 @@ react-day-picker, input-otp, react-resizable-panels, sonner, next-themes) are op
 
 The demo application lives in the `arkcn-demo` repository.
 
+## Docs
+
+The documentation site lives in `docs/` (Vite, base path `/arkcn/`) and reads the registry, so component
+pages are generated; live examples are in `docs/src/examples`. `npm run docs:dev` serves it,
+`npm run docs:build` writes `docs/dist` with an `index.html` per route (no SPA fallback needed): upload
+that folder to `multicomma.com/arkcn`.
+
 ## Develop
 
 ```bash

package/cli/commands.mjs

@@ -4,6 +4,7 @@ import {
   CONFIG_FILE,
   defaultConfig,
   detectBundlerAlias,
+  ensureViteConfig,
   detectPackageManager,
   ensureTsconfigAlias,
   installDependencies,
@@ -96,12 +97,17 @@ export async function init(cwd, registry, flags) {
   else if (alias === "ok") ok(`tsconfig already maps "${config.alias}/*"`)
   else warn(`Add "paths": { "${config.alias}/*": ["./${config.srcDir}/*"] } to your tsconfig compilerOptions.`)
   const bundler = detectBundlerAlias(cwd, config.alias)
-  if (bundler.framework === "vite" && !bundler.ok)
-    warn(
-      `Add the alias to ${bundler.file}: resolve.alias { "${config.alias}": path.resolve(__dirname, "./${config.srcDir}") }`
-    )
+  if (bundler.framework === "vite") {
+    const vite = ensureViteConfig(cwd, config.alias, config.srcDir)
+    if (vite.added.length) ok(`Added ${vite.added.join(" and ")} to ${vite.file}`)
+    else if (vite.manual)
+      warn(
+        `Add to ${vite.file}: the @tailwindcss/vite plugin and resolve.alias { "${config.alias}": "./${config.srcDir}" }`
+      )
+    else ok(`${vite.file} already has the alias and the Tailwind plugin`)
+  }
 
-  const { items } = await registry.closure(["utils"])
+  const { items } = await registry.closure(["lib/utils"])
   for (const item of items) writeItem(cwd, config, item, { overwrite: false })
   ok(`Wrote ${targetPath(config, "lib/utils.ts")}`)
 
@@ -118,6 +124,7 @@ export async function init(cwd, registry, flags) {
   const deps = Object.entries(index.baseDependencies)
     .filter(([dep]) => !installedVersion(cwd, dep))
     .map(([dep, version]) => `${dep}@${version}`)
+  if (bundler.framework === "vite" && !installedVersion(cwd, "@tailwindcss/vite")) deps.push("@tailwindcss/vite")
   await install(cwd, deps, flags)
   log(`\nNext: ${c.cyan("npx @multicomma/arkcn add button card dialog")}`)
 }

package/cli/project.mjs

@@ -120,33 +120,79 @@ export function installDependencies(cwd, deps) {
   return { ok: result.status === 0, pm, args }
 }
 
-/** Ensure tsconfig paths has "<alias>/*": ["./<srcDir>/*"]. Returns "ok" | "added" | "manual". */
+/**
+ * Ensure tsconfig paths has "<alias>/*": ["./<srcDir>/*"]. Works on JSON with comments (Vite's
+ * templates) by inserting text instead of re-serialising. Returns "ok" | "added" | "manual".
+ */
 export function ensureTsconfigAlias(cwd, alias, srcDir = "src") {
   for (const name of ["tsconfig.app.json", "tsconfig.json"]) {
     const file = join(cwd, name)
     if (!existsSync(file)) continue
     const raw = readFileSync(file, "utf8")
-    let json
-    try {
-      json = JSON.parse(
-        raw
-          .replace(/\/\*[\s\S]*?\*\//g, "")
-          .replace(/^\s*\/\/.*$/gm, "")
-          .replace(/,(\s*[}\]])/g, "$1")
-      )
-    } catch {
-      return "manual"
+    const key = `"${alias}/*"`
+    if (raw.includes(key)) return "ok"
+    const entry = `${key}: ["./${srcDir}/*"]`
+    const pathsMatch = raw.match(/"paths"\s*:\s*\{/)
+    if (pathsMatch) {
+      const at = pathsMatch.index + pathsMatch[0].length
+      const rest = raw.slice(at)
+      const empty = /^\s*\}/.test(rest)
+      writeFileSync(file, raw.slice(0, at) + `\n      ${entry}${empty ? "" : ","}` + rest)
+      return "added"
     }
-    const paths = json.compilerOptions?.paths ?? {}
-    if (paths[`${alias}/*`]) return "ok"
-    if (raw.includes("//") || raw.includes("/*")) return "manual"
-    json.compilerOptions = { ...json.compilerOptions, paths: { ...paths, [`${alias}/*`]: [`./${srcDir}/*`] } }
-    writeFileSync(file, JSON.stringify(json, null, 2) + "\n")
+    const optionsMatch = raw.match(/"compilerOptions"\s*:\s*\{/)
+    if (!optionsMatch) continue
+    const at = optionsMatch.index + optionsMatch[0].length
+    const rest = raw.slice(at)
+    const empty = /^\s*\}/.test(rest)
+    writeFileSync(file, raw.slice(0, at) + `\n    "paths": {\n      ${entry}\n    }${empty ? "" : ","}` + rest)
     return "added"
   }
   return "manual"
 }
 
+/**
+ * Ensure a Vite config has the "@" alias and the Tailwind plugin. Returns what was added.
+ * Next.js reads tsconfig paths on its own, so it only needs the tsconfig step.
+ */
+export function ensureViteConfig(cwd, alias, srcDir = "src") {
+  const name = ["vite.config.ts", "vite.config.mts", "vite.config.js", "vite.config.mjs"].find((n) =>
+    existsSync(join(cwd, n))
+  )
+  if (!name) return { file: null, added: [] }
+  const file = join(cwd, name)
+  let raw = readFileSync(file, "utf8")
+  const added = []
+  const hasAlias = raw.includes(`"${alias}"`) || raw.includes(`'${alias}'`) || raw.includes("tsconfigPaths")
+  const hasTailwind = raw.includes("@tailwindcss/vite")
+  const config = raw.match(/defineConfig\(\s*\{/)
+  if (!config) return { file: name, added, manual: !hasAlias || !hasTailwind }
+  if (!hasTailwind) {
+    raw = `import tailwindcss from "@tailwindcss/vite"\n` + raw
+    const plugins = raw.match(/plugins\s*:\s*\[/)
+    if (plugins) {
+      const at = plugins.index + plugins[0].length
+      raw = raw.slice(0, at) + "tailwindcss(), " + raw.slice(at)
+    } else {
+      const m = raw.match(/defineConfig\(\s*\{/)
+      raw = raw.slice(0, m.index + m[0].length) + "\n  plugins: [tailwindcss()]," + raw.slice(m.index + m[0].length)
+    }
+    added.push("tailwind plugin")
+  }
+  if (!hasAlias) {
+    if (!/from ["']node:path["']|from ["']path["']/.test(raw)) raw = `import path from "node:path"\n` + raw
+    const m = raw.match(/defineConfig\(\s*\{/)
+    const at = m.index + m[0].length
+    raw =
+      raw.slice(0, at) +
+      `\n  resolve: {\n    alias: { "${alias}": path.resolve(import.meta.dirname, "./${srcDir}") },\n  },` +
+      raw.slice(at)
+    added.push("alias")
+  }
+  if (added.length) writeFileSync(file, raw)
+  return { file: name, added }
+}
+
 export function detectBundlerAlias(cwd, alias) {
   const candidates = [
     "vite.config.ts",

package/cli/registry.mjs

@@ -26,6 +26,7 @@ export function createRegistry(base) {
     source: remote ? base : "bundled",
     index: () => cached("index.json", JSON.parse),
     item: (name) => cached(`items/${name}.json`, JSON.parse).catch(() => null),
+    itemPath: (name) => `items/${name}.json`,
     baseCss: () => cached("base.css", (s) => s),
     /** Every item needed to install `names`, dependencies first, each once. */
     async closure(names) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multicomma/arkcn",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "arkcn: shadcn/ui-style components ported to Ark UI, plus data-heavy primitives (data grid, kanban, gantt, scheduler, node graph, ...). Tailwind v4. Ships a copy-into-your-project CLI and an MCP server.",
   "type": "module",
   "license": "MIT",
@@ -24,29 +24,24 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p docs/tsconfig.json --noEmit",
     "lint": "oxlint --deny-warnings && node scripts/check-quotes.mjs && node scripts/check-ark-parts.mjs && npm run -s format:check",
-    "format": "prettier --write \"src/**/*.{ts,tsx,css}\" \"{scripts,cli,bin,mcp}/**/*.mjs\" \"*.{json,md}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\" \"{scripts,cli,bin,mcp}/**/*.mjs\" \"*.{json,md}\"",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\" \"docs/src/**/*.{ts,tsx,css}\" \"docs/content/*.md\" \"{scripts,cli,bin,mcp}/**/*.mjs\" \"*.{json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\" \"docs/src/**/*.{ts,tsx,css}\" \"docs/content/*.md\" \"{scripts,cli,bin,mcp}/**/*.mjs\" \"*.{json,md}\"",
     "check": "npm run -s build:registry && npm run -s typecheck && npm run -s lint && npm run -s test:cli",
     "build:registry": "node scripts/build-registry.mjs",
     "test:cli": "node scripts/test-cli.mjs",
-    "prepublishOnly": "npm run -s check"
+    "prepublishOnly": "npm run -s check",
+    "docs:dev": "vite --config docs/vite.config.ts --port 5180",
+    "docs:build": "npm run -s build:registry && vite build --config docs/vite.config.ts && node scripts/docs-routes.mjs",
+    "docs:preview": "vite preview --config docs/vite.config.ts --port 5181"
   },
   "peerDependencies": {
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
     "@ark-ui/react": "^5.39.1",
-    "tailwindcss": "^4.3.3",
-    "lucide-react": "^1.41.0",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.6.0",
-    "class-variance-authority": "^0.7.1",
-    "tw-animate-css": "^1.4.0",
-    "@tailwindcss/typography": "^0.5.20",
     "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.0",
+    "@tailwindcss/typography": "^0.5.20",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",
     "@tiptap/extension-table": "^3.31.3",
@@ -60,14 +55,22 @@
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
+    "lucide-react": "^1.41.0",
     "next-themes": "^0.4.6",
+    "react": "^19.2.8",
     "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.8",
     "react-resizable-panels": "^4.12.3",
     "recharts": "^3.8.0",
-    "sonner": "^2.0.8"
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0"
   },
   "peerDependenciesMeta": {
     "@atlaskit/pragmatic-drag-and-drop": {
@@ -144,19 +147,13 @@
     }
   },
   "devDependencies": {
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
     "@ark-ui/react": "^5.39.1",
-    "tailwindcss": "^4.3.3",
-    "lucide-react": "^1.41.0",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.6.0",
-    "class-variance-authority": "^0.7.1",
-    "tw-animate-css": "^1.4.0",
-    "@tailwindcss/typography": "^0.5.20",
     "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tailwindcss/vite": "^4.3.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",
     "@tiptap/extension-table": "^3.31.3",
@@ -170,22 +167,35 @@
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",
+    "@types/node": "^24.13.3",
+    "@types/prismjs": "^1.26.6",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
+    "eslint-plugin-better-tailwindcss": "^4.7.0",
     "input-otp": "^1.5.0",
+    "lucide-react": "^1.41.0",
+    "marked": "^18.0.11",
     "next-themes": "^0.4.6",
+    "oxlint": "^1.79.0",
+    "prettier": "^3.9.6",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "prismjs": "^1.30.0",
+    "react": "^19.2.8",
     "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.8",
     "react-resizable-panels": "^4.12.3",
     "recharts": "^3.8.0",
     "sonner": "^2.0.8",
-    "@types/node": "^24.13.3",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "eslint-plugin-better-tailwindcss": "^4.7.0",
-    "oxlint": "^1.79.0",
-    "prettier": "^3.9.6",
-    "prettier-plugin-tailwindcss": "^0.8.1",
-    "typescript": "~6.0.2"
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2"
   },
   "bin": {
     "arkcn": "bin/arkcn.mjs"