basis-design 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,177 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

package/NOTICE

@@ -0,0 +1,7 @@
+Basis
+Copyright 2026 Lucas Skog
+
+Licensed under the Apache License, Version 2.0 (see LICENSE). The starter
+components, patterns and views in template/ are licensed under MIT-0 (see
+template/LICENSE), so the design systems made from them belong to whoever
+makes them, without conditions.

package/README.md

@@ -1,3 +1,135 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<img src="src/icon.svg" width="72" height="72" alt="">
+
+# Basis
+
+Prompt a complete design system into existence, then refine it down to the last transition.
+
+Basis is a local web app with two halves. On the left you talk to a coding agent, either Claude Code or Codex. On the right is a live specimen of your design system: colour roles with contrast checks, type, spacing, shape, motion, and every component in every state (default, hover, pressed, focus, disabled, loading, invalid, checked, indeterminate…). Start broad ("warm editorial, serif headings") and go as deep as you like ("softer button press", "make the tab indicator slide").
+
+The agent owns both the tokens and the component source, so the result is a real starting point for a project rather than a theme.
+
+The agent runs over the [Agent Client Protocol](https://agentclientprotocol.com) on your machine, using the CLI login you already have. You need no API keys, and usage runs on your own Claude or ChatGPT subscription.
+
+## Run it
+
+```bash
+npx basis-design
+```
+
+Or install it once with `npm install -g basis-design` and start it with `basis`. Open http://localhost:5320. Basis starts Claude Code by default (shown as Claude in the picker above the chat); switch to Codex there. Basis needs Node.js 22.12 or later and `git` on the PATH.
+
+- **Claude Code:** log in once with `claude` in a terminal. Basis starts it through `@agentclientprotocol/claude-agent-acp`.
+- **Codex:** log in once with `codex login`. Basis starts it through `npx @agentclientprotocol/codex-acp`, at a fixed version that npx fetches on first use.
+
+Usage counts against your own plan. A turn can take up to three agent runs (the turn and up to two fix-ups), and ×2 or ×3 alternatives multiply that.
+
+The first install is large, about 300 MB, because the Claude adapter brings its own copy of Claude Code. To work on Basis itself, clone the repository and run `npm install` and `npm run dev`.
+
+| Variable | Default | Purpose |
+| --- | --- | --- |
+| `BASIS_HOME` | `~/.basis` | Where the project list (`basis.projects.json`) and new projects (`workspaces/`) live |
+| `BASIS_WORKSPACE` | | Opens just this workspace for one run, without touching the project list (for tests and one-off use) |
+| `BASIS_AGENT` | `claude` | Agent started on boot (`claude` or `codex`) |
+| `PORT` | `5320` | Port of the Basis app (bound to 127.0.0.1 only) |
+| `BASIS_PREVIEW_PORT` | `PORT + 1` | Port of the sandboxed preview origin |
+
+## Projects
+
+Each project is a workspace of its own: its own design system, history, chat and review. Switch, create and open projects from the menu with the project's name at the top left.
+
+A project can link the **product repo** it designs for (project menu, **Link product repo…**). The agent reads and searches it without asking, to match the product's look, components and terms, and never writes there: writes outside the workspace are refused. **New project…** can also start from a product repo: the project takes the repo folder's name unless you give one, links the repo and starts by bringing in its design. **Bring in its design** (offered when you link, and in the project menu) starts a guided turn: the agent maps the repo's tokens onto `design-system.json`, restyles the components and patterns to resemble the product's, writes what it learned to `product.md` (where the tokens live, an inventory of the product's components and their Basis counterparts, terms to reuse) and opens a review.
+
+- **New project** starts from Basis' defaults, or as a copy of the open project's tokens and components (not its history). It lives in `~/.basis/workspaces/`.
+- **Open folder** adds a workspace from anywhere, or an empty or new folder for Basis to set up, inside a product repo for instance. Basis refuses a folder that already has other files, so it never starts a history in someone's project.
+- Switching waits while the agent works. The agent of the project you leave stops, and coming back resumes its conversation, so it remembers where you were. The export remembers its target folder per project.
+- Removing a project from the list never deletes its folder. Earlier versions kept the project list in the Basis folder; it moves to `~/.basis` on first start, and its projects stay where they are. The `./workspace` of versions before projects becomes the first project.
+
+## The workspace
+
+```
+workspace/
+  design-system.json     tokens, validated against shared/design.ts
+  components/            React + CSS Modules source of every component (seeded from template/)
+    *.specimen.tsx       how the gallery shows each component: one section per specimen
+    contracts.ts         the API of every component added beyond the Basis baseline
+  patterns/              larger building blocks composed from components/ (seeded from template/)
+  review.json            written by the agent to open or update a review (not in history)
+  product.md             what the agent learned about a linked product repo
+  .git/                  history: one commit per agent turn, approved review, restore or hand edit
+  AGENTS.md, CLAUDE.md   the agent's instructions (generated)
+  tsconfig.json, .basis/ type-check setup and contracts (generated), the open review, its snapshot, the chat
+```
+
+The agent may edit `design-system.json`, `review.json` and anything under `components/` and `patterns/`, and nothing else. Components style themselves with the token CSS variables, so tokens stay the single source of truth for look and feel. Component code covers structure and behaviour. A component the agent adds gets a token group of its own under `components` in `design-system.json` (`components.starRating.iconSize` becomes `--star-rating-icon-size`), so it is tuned, reviewed and exported like the baseline ones.
+
+Every `components/*.specimen.tsx` file becomes a gallery section and a sidebar entry. A specimen lists blocks: a `matrix` of variants × states, a `grid` of labelled examples, a pattern's data `states` (populated, empty, loading, error, long content), or free `row` and `block` content for live demos (the format is in `components/specimen.ts`). The agent writes specimens alongside components, so a new component or variant shows up in the gallery as soon as it exists. Basis owns only the foundation sections: colour, type, shape and motion.
+
+`patterns/` holds composed components such as Navbar, SidebarNav, PageHeader, DataTable with Pagination, StatCard, FormSection, EmptyState, AppShell, and for AI products a Composer and a chat (ChatThread, ChatMessage, ChatWelcome). They import only from `../components`, have their own specimens, and appear on the gallery's **Patterns** page, which you switch to in the top bar. The agent edits and extends them like everything else, so a token or base-component change flows through to every pattern. **Show at** above the specimens renders every block at mobile, tablet or desktop width and in both themes at once. Each copy is a size container, so patterns respond with `@container` rules to the width they are shown at.
+
+`shared/contracts.ts` (copied to `.basis/contracts.ts`) is the baseline API every design system keeps. A component can change completely and gain props or variants, but it must keep its export and accept the contract's props. Components the design system adds get their contract in `components/contracts.ts`, which the agent writes when it creates them; every export of `components/index.ts` needs a contract in one of the two files. Patterns work the same way: `shared/pattern-contracts.ts` (copied to `.basis/pattern-contracts.ts`) is the baseline for the starter patterns, and `patterns/contracts.ts` holds the contracts of patterns the design system adds.
+
+`views/` holds **views**: whole screens of a product's flows, built only from the components and patterns, on the gallery's **Views** page. A view is a specimen with a `flow` block: its screens show one at a time with a strip to jump between them, and buttons in a screen move through the flow (a row opens its detail, Save goes back). Views fill with realistic made-up data, and they are left out of the export: they prototype a product, they are not part of the design system. **New view** at the bottom of the Views sidebar takes a name and the feature, or a whole ticket, and starts a guided turn: the agent works out the screens, builds the flow from your patterns (adding a pattern when one is missing), and opens it in a review. A review of a view can show just some of its screens, and its panes move through the flow together, so before and after, blink and alternatives always compare the same screen.
+
+**New component** and **New pattern** at the bottom of the sidebar ask for a name and what it is for, then start a guided agent turn: it checks for an existing component with the same job, creates the source, contract (for base components), export and specimen, and the result appears in the gallery. You can ask for the same thing in the chat.
+
+## How it works
+
+- **Live preview:** the gallery runs on its own origin (`BASIS_PREVIEW_PORT`) in a sandboxed iframe, because it executes code the agent writes. That code cannot reach the bridge to the agent or the Basis UI. Vite compiles `components/` on the fly, so saved edits hot-reload in place, and token changes arrive over `postMessage`.
+- **Problems loop:** after every turn Basis validates the tokens, type-checks `components/` and `patterns/`, checks the components against their contracts, and collects render errors and malformed specimens from the preview. A broken section shows its error instead of taking down the gallery. Anything wrong is sent back to the agent automatically, at most twice per turn, and is listed above the composer.
+  - **Accessibility checks** run alongside: the colour roles are checked for WCAG 2 AA contrast in both themes, and axe-core checks the live demos (gallery sections and the review's live side) for serious and critical WCAG A and AA violations once the preview settles. Findings are listed apart above the composer, with a button to ask the agent to fix them. The agent hears only about findings its own change introduced, so an existing one does not send it off on every turn, and a colour you asked for on purpose is kept.
+- **History:** the workspace is a git repository. Each agent turn becomes one commit, labelled with its prompt and with the tokens and files it changed. Click an entry to inspect it. The preview shows that version's tokens, and a banner lists the token and component-code differences from now. You can step through versions or restore one; restoring brings back tokens and code alike. Undo walks back through the steps instead of toggling between two of them.
+- **Reviews:** ask for something specific ("make the danger button feel more urgent") and the agent opens a review once it has a first version, by writing `review.json`. The preview then shows just that, narrowed to a block and its rows or columns, as it was when the review started next to how it is now. You keep iterating in the chat until you **Approve** (everything becomes one history entry) or **Discard** (everything goes back).
+  - While a review is open, every agent turn and hand edit becomes an iteration of it, not a history entry. Iterations live on a git ref outside the history, so you can go back to an earlier one, and the review survives a restart. Undo and History wait until the review ends.
+  - The "before" side runs the starting point's own component code with its own tokens, from a read-only copy in `.basis/snapshots/`. If the agent adds a block to show a new state, the before side runs today's demo on the starting point's components, so it still compares old with new.
+  - **Also changed** lists other sections that now look different, found by rendering them before and after offscreen and comparing structure and computed styles. Only sections the change can reach are checked: those whose specimen, through its imports, uses a changed file or a CSS variable whose value changed. Tokens are global, so this is where you see what else a change reached; click one to add it to the review.
+  - A review shows its targets **side by side**, **stacked**, or with **blink**, which shows one version at a time in the same place so subtle differences stand out: click a pane or tap B to switch, hold B to see before, or let it switch by itself. A target can ask for widths, like Show at; it shows one theme at a time, and you switch with Light and Dark in the top bar.
+  - **Alternatives:** pick ×2 or ×3 next to Send, and the agent makes that many takes on the request, one after another from the same starting point. The review shows where they started next to each one, and **Continue with** in the review bar picks the one to keep iterating on. Each take is an iteration, so the others stay reachable.
+  - Approve waits while the agent works, while there are problems, or until an alternative is chosen. Errors on the before side are shown in place and never sent to the agent, and Pick only attaches components from the live side.
+- **Composer:**
+  - The conversation survives a restart, and Claude Code picks up the same session, so it remembers what was said.
+  - Messages sent while the agent works are queued and run, in order, when it is done; remove one with its ×. Stop drops the queue too, and ends a set of alternatives after the take being made.
+  - Up and Down recall earlier messages, and an unsent message survives a reload.
+  - Paste, drop or attach images. They are sent as ACP image blocks when the agent supports them.
+  - Press **Pick** and click components in the preview. Each pick is attached as a numbered annotation carrying its variant, state, theme, driving tokens and computed styles, so "make [1] softer" is unambiguous. Pick mode stays on until Done or Esc, and you can click a component again to remove it.
+- **Layout:**
+  - The sidebar scrolls the preview to each section and can collapse to an icon rail.
+  - The chat can be resized by dragging its edge (double-click resets) and hidden with the toggle in the top bar or Ctrl+B.
+- **Permissions:** reads inside the workspace and edits to the files the agent may change are approved automatically. Anything else, such as shell commands, web fetches or other files, shows up in the chat for you to approve. Paths are compared after following links, so a link inside the workspace that leads out of it is not approved.
+  - The agent always starts in the mode that asks: Claude Code in its default mode and Codex in read-only mode, whatever your own settings default to. Codex still runs read-only commands in its sandbox without asking.
+  - Claude Code runs without your own `~/.claude` setup (CLAUDE.md, skills, hooks, permission rules, claude.ai connectors and auto memory), so rules meant for your coding neither steer the design agent nor approve anything for it. Basis' instructions arrive as its system prompt.
+  - A linked product repo is read without asking, so text in it can steer the agent like any prompt. Approve shell commands with that in mind.
+- **Export:** the **Starter kit** tab packages the whole design system for a new project. You can download it as a zip or write it straight into a project folder; if any file there would change, nothing is written until you confirm. The kit contains:
+  - `components/`, with imports rewritten to extensionless form so any bundler and default `tsconfig` accept them,
+  - `tokens.css`, CSS custom properties with dark mode via `data-theme` or the OS setting,
+  - `theme.tailwind.css`, a Tailwind v4 entry stylesheet,
+  - `design-system.json`,
+  - a README on wiring it up.
+
+  The kit needs React 18+ and CSS Modules, nothing else. The other tabs export the token formats one at a time.
+
+## Privacy
+
+Basis runs on your machine and answers only on localhost. It sends no telemetry. What leaves your machine is what the agent sends to Anthropic or OpenAI under your own account (your prompts, attachments, and the files it reads, including a linked product repo), web fonts that your design system imports from Google Fonts or Bunny Fonts, and the Codex adapter that npx downloads on first use.
+
+## Troubleshooting
+
+- **"Basis needs git on the PATH":** install git, then start Basis again.
+- **"Port 5320 is in use":** another Basis is probably running. Stop it, or start this one with another `PORT`. The preview takes `PORT + 1`.
+- **The agent asks you to log in:** run `claude` (or `codex login`) in a terminal, then pick the agent again in the picker.
+- **"Usage limit":** your plan's limit is reached. It resets after a while, and the conversation is kept until then.
+- **"Another Claude Code process is refreshing it":** several Claude Code processes refreshed their login at once. Send the message again.
+- **"A newer version of Basis has opened this project":** update Basis. An older Basis refuses such a project rather than misreading it.
+
+## Stack
+
+React 19 + Vite with CSS Modules and plain CSS custom properties. The server is plain Node (`server/`). It acts as an ACP client via `@agentclientprotocol/sdk` and runs two Vite instances in middleware mode, one for the app and one for the sandboxed preview. Basis always runs through Vite, because the preview compiles workspace code live.
+
+```bash
+npm run check
+```
+
+`npm run check` runs the type check, oxlint, Prettier and the tests. [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) covers the architecture, how to work on Basis, the gotchas and where the work stands.
+
+## License
+
+Basis is licensed under the [Apache License 2.0](LICENSE). The starter components, patterns and views in `template/` are licensed under [MIT-0](template/LICENSE): what you build from them and export is yours, with no attribution required.

package/bin/basis.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+// Starts Basis. The server is TypeScript run as it is (Vite compiles workspace code live anyway), so tsx loads it.
+import { register } from "tsx/esm/api";
+
+register();
+await import("../server/index.ts");

package/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Basis</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23121210'/%3E%3Crect x='12' y='12' width='18' height='18' rx='4' fill='%23c8f25a'/%3E%3Crect x='34' y='12' width='18' height='18' rx='9' fill='%23c8f25a'/%3E%3Crect x='12' y='35' width='40' height='17' rx='4' fill='%23c8f25a'/%3E%3C/svg%3E"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "basis-design",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Prompt a complete design system into existence with your own coding agent over ACP.",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "react",
+    "claude-code",
+    "codex",
+    "agent-client-protocol"
+  ],
+  "license": "Apache-2.0",
+  "author": "Lucas Skog",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sockulags/basis-design.git"
+  },
+  "type": "module",
+  "bin": {
+    "basis": "bin/basis.js"
+  },
+  "files": [
+    "bin",
+    "server",
+    "shared",
+    "src",
+    "template",
+    "index.html",
+    "preview.html",
+    "vite.config.ts",
+    "NOTICE"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "tsx server/index.ts",
+    "start": "tsx server/index.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "node --import tsx --test \"test/*.test.ts\"",
+    "lint": "oxlint",
+    "format": "prettier --write .",
+    "check": "tsc --noEmit && oxlint && prettier --check . && npm test"
+  },
+  "dependencies": {
+    "@agentclientprotocol/claude-agent-acp": "0.92.0",
+    "@agentclientprotocol/sdk": "^1.9.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "axe-core": "^4.14.0",
+    "fflate": "^0.8.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsx": "^4.23.15",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "ws": "^8.22.0",
+    "zod": "^4.6.7"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/ws": "^8.18.2",
+    "oxlint": "1.88.0",
+    "prettier": "3.9.10"
+  }
+}

package/preview.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Basis preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/preview/main.tsx"></script>
+  </body>
+</html>