{"_id":"@agentaily/design-kit","_rev":"2-8516eef3c7f6c83e918fcef0953ed072","name":"@agentaily/design-kit","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@agentaily/design-kit","version":"0.1.0","keywords":["mock","fetch","claude-design","prototype","tweaks","high-fidelity","agentaily"],"author":{"name":"agentaily"},"license":"MIT","_id":"@agentaily/design-kit@0.1.0","maintainers":[{"name":"yarnovo","email":"yarnb@qq.com"}],"homepage":"https://github.com/agentaily/design-kit#readme","bugs":{"url":"https://github.com/agentaily/design-kit/issues"},"dist":{"shasum":"64cacb51608797ebbe4cebdae065372034a585a7","tarball":"https://registry.npmjs.org/@agentaily/design-kit/-/design-kit-0.1.0.tgz","fileCount":8,"integrity":"sha512-5PuA8KUmVUt39KgU3isLomg0jpG7V38+6XkY1sBOncwbGkrlzCZkfbJJQbUgymSX2VIxByOZwWZgZJcbFubeHQ==","signatures":[{"sig":"MEUCIQCHvdqvF0KDmcWLZEavD9PUwxNBN7spg6hhFE2eaI38cQIgB7Zc2sLoaoNOBg6Vemi6aWdVSrJLmaZg08afUDoyL5Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@agentaily%2fdesign-kit@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":80798},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"7743e32d75a5b48150f22aa505b1ef5183ec23c9","scripts":{"test":"vitest run","build":"tsup","format":"prettier --write .","prepack":"npm run build","prepare":"lefthook install","release":"changeset publish","changeset":"changeset","typecheck":"tsc --noEmit","test:watch":"vitest","format:check":"prettier --check ."},"_npmUser":{"name":"yarnovo","email":"yarnb@qq.com"},"repository":{"url":"git+https://github.com/agentaily/design-kit.git","type":"git"},"_npmVersion":"10.9.8","description":"Claude-Design-only browser mock backend — patch window.fetch + Tweaks-driven scenarios for high-fidelity SPA prototypes (CDN-imported into Claude Design).","directories":{},"sideEffects":false,"_nodeVersion":"22.22.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","jsdom":"^25.0.1","vitest":"^2.1.8","lefthook":"^1.10.1","prettier":"^3.4.2","typescript":"^5.7.2","@changesets/cli":"^2.27.11","@changesets/changelog-github":"^0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/design-kit_0.1.0_1781589213158_0.40836940597618177","host":"s3://npm-registry-packages-npm-production"},"deprecated":"已弃用:架构收敛到单一上游 @agentaily/design-system;Claude Design 原型不再需要内置 mock 后端,无生产消费方。"}},"time":{"created":"2026-06-16T05:53:32.974Z","modified":"2026-06-16T16:24:45.930Z","0.1.0":"2026-06-16T05:53:33.295Z"},"bugs":{"url":"https://github.com/agentaily/design-kit/issues"},"author":{"name":"agentaily"},"license":"MIT","homepage":"https://github.com/agentaily/design-kit#readme","keywords":["mock","fetch","claude-design","prototype","tweaks","high-fidelity","agentaily"],"repository":{"url":"git+https://github.com/agentaily/design-kit.git","type":"git"},"description":"Claude-Design-only browser mock backend — patch window.fetch + Tweaks-driven scenarios for high-fidelity SPA prototypes (CDN-imported into Claude Design).","maintainers":[{"name":"yarnovo","email":"yarnb@qq.com"}],"readme":"# @agentaily/design-kit\n\nClaude-Design-only **browser mock backend** — gives high-fidelity SPA prototypes a fake backend.\n\nagentaily apps are pure SPAs: on boot they `fetch('/api/auth/me')` (etc.) against a real Cloudflare Worker. Claude Design prototypes are static HTML with **no backend**. design-kit fills that gap: it patches `window.fetch` to intercept `/api/*` and return **scenario-driven** mock responses (scenarios driven by Claude Design **Tweaks**), so the prototype runs the **real** client-side guard / data-fetch code against a fake backend — 设计端 ≈ 生产端, only the network is mocked.\n\nImported via **CDN inside Claude Design** (esm.sh); never shipped to production.\n\n## Target API\n\n```js\nimport { installMockBackend } from \"https://esm.sh/@agentaily/design-kit\";\n\ninstallMockBackend({ scenario: \"loggedOut\" });\n// fetch(\"/api/auth/me\") → 401 (per scenario); the real guard reacts (→ /login).\n// flip the Tweak → scenario changes → mock response changes → guard behaves differently.\n```\n\n## Design\n\n- **Mechanism**: save original `window.fetch`, replace it; `/api/*` → registered handler (scenario-aware), everything else (CDN imports, etc.) → original fetch.\n- **Scenarios** (driven by Tweaks): `loggedOut` → 401; `loggedInVerified` → 200 `{user:{...,emailVerified:true}}`; `loggedInPending` → 200 `emailVerified:false`; `serverError` → 500; configurable latency.\n- **In-memory state** (fake user + token) so flows work end-to-end (login → me → logout), not single-frame.\n- **Scope**: generic mock engine + shared **auth** handlers (`/api/auth/me|login|register|verify-email|password-reset`); product-specific routes registered by each design project.\n- **Contract**: MVP hand-mirrors the real Worker's auth routes (mark \"TODO: extract `@agentaily/api-contract`\" so the real Worker + design-kit share it and don't drift).\n\n## Build & develop\n\nFramework-agnostic TypeScript, built with **tsup** to dual-format `dist/` (ESM + CJS + `.d.ts`); `files:[\"dist\"]`, and the CDN (esm.sh) serves the dist ESM. No React — it's a pure browser logic library.\n\n```bash\nnpm run typecheck && npm test   # done-gate (vitest + jsdom)\nnpm run build                   # emit dist (ESM + CJS + .d.ts)\n```\n\n## Status\n\nImplemented (first release prepared via fleet PR). `installMockBackend` + scenario engine + in-memory auth handlers, with vitest (jsdom) coverage. Validated via spike (2026-06-16, form-design auth project: `_spike-auth-guard.card.html` + `_mock-backend.js` — flipping a Tweak made the real `fetch('/api/auth/me')` guard redirect vs. allow). Usage skill: `skill/SKILL.md` (also symlinked to `~/.claude/skills/agentaily-design-kit`). First publish (0.1.0) ships via the changesets CI release chain.\n","readmeFilename":"README.md"}