# Longwire

A publication of guides drawn before they are written. The catalogue is a grid of boxes, three to a line, each carrying its own wiring. A guide lays that wiring out beside the steps and lights the wire the step builds. The agent's side of each step sits on the same blueprint, and one line installs the guide as a skill. The pictures are drawn. There is no photograph.

The code is MIT. The names are not licensed. See `LICENSE.md`.

## What you get

Unzip `longwire.zip`. `index.html` is at the top of the archive, and it is the study, running. Open it through a web server. The page fetches its catalogue, so a `file:` address will not load it.

The same folder is the design system. A person unzips it and has the site. A design tool reads the same files and has the tokens, the guideline and the component previews.

## Minimum install

The page needs `main#view`. `longwire.js` fills it from the files under `copy/`. The toast can be left out. Copying still writes to the clipboard; the confirmation line is skipped. The demo is the catalogue, with no masthead and no toast.

Barlow and JetBrains Mono are loaded from Google Fonts. They are not in the zip. IBM Plex Mono is in `assets/fonts/` because every kit carries it. This page does not set it.

## Files

| Path | What it is |
|---|---|
| `index.html` | The study page, rewired to this folder. |
| `styles.css` | The study's stylesheet. |
| `longwire.css` | The same styles, for the demo and the component previews. |
| `longwire.js` | The catalogue, the drawing and the routing. Byte for byte with the study. |
| `copy/` | The publication's own files: `index.json`, `guides/doorman.md`, `notes/hallway.md`, `skills/doorman/SKILL.md`, `llms.txt`. |
| `tokens/tokens.json` | The kit's colours, type and sizes in the W3C Design Tokens format (2025.10). |
| `tokens/tokens.css` | The same values as CSS custom properties. |
| `DESIGN.md` | The guideline: colour, type, spacing, layout, components, motion, voice, brand, anti-patterns. |
| `design-system-spec.json` | The manifest Claude Design reads. |
| `manifest.json`, `tokens.css`, `design-tokens.json`, `components.html`, `USAGE.md`, `preview/` | The Open Design layer: its manifest, its token contract, its token JSON, a component fixture, a usage guide and preview pages (the site, colors, typography, spacing). |
| `assets/fonts/` | IBM Plex Mono, under the SIL Open Font License, with the license text. This page does not set that face. |
| `LICENSE.md` | MIT for the code, and what is not licensed. |

## Loading it into a design tool

The kit carries two layers, one for each tool, describing the same system.

**Open Design.** Import `longwire.zip` and it opens on `index.html`, the site, with every other page listed alongside it. Read as a design system, the same archive supplies `manifest.json`, `DESIGN.md`, `tokens.css`, `components.html`, `USAGE.md` and the pages under `preview/`, and Longwire becomes a system other work can be rendered in.

**Claude Design.** Reads `design-system-spec.json`, the component previews under `components/` with their first-line `@dsCard` markers, and `tokens/tokens.json` in the W3C Design Tokens format.

## Making it yours

The catalogue lives in `copy/index.json`. A live entry points at a markdown file under `copy/`. A queued entry has `lanes` and `flow` for its box and no file. Two entries are live: the Doorman guide, which installs as a skill, and the hallway note, which does not.

`data-dir` on the `<html>` element is the folder the script fetches. The study sets it to `../assets/studies/longwire/`. Leave it off and the script still asks for that path, which 404s inside the kit.

The drawing reads `--signal`, `--blue` and the lane colours from the stylesheet. `--signal #e0331f` is 3.76:1 on the ground, so it stays the wire and is not the contract accent. The contract accent is `#c92e1c`, 4.51:1. Editing `tokens.css` does not recolour a page that also loads `longwire.css`, because that stylesheet sets the wire colour again.

`Longwire.filter`, `Longwire.search`, `Longwire.side` and `Longwire.activate` settle in the same turn. `Longwire.go` to a guide fetches the file, so wait on `state().loaded`. The observer moves the lit wire as the reader scrolls. Do not read that light after a wait.

There is no photograph to replace. The `h1` arrives with the catalogue. A title plate opened before that fetch has no heading to grow from.