@arach/arc 0.4.2 → 0.4.4

package/README.md

@@ -1,21 +1,22 @@
 <div align="center">
 
+<img src="https://raw.githubusercontent.com/arach/arc/master/public/arc-mark.svg" alt="Arc" width="52" height="52" />
+
 # Arc
 
-### Design architecture diagrams visually. Ship them as code.
+### Diagrams as code.
 
-Arc is a React component **and** a visual editor for building clean, themeable
-architecture diagrams — then exporting them as **TypeScript, JSON, SVG, PNG, or
-crisp ASCII**. Design in the canvas, drop the component in your app, or render
-straight to text for a README. Same diagram, everywhere.
+Arc turns typed, diffable config into clean, themeable architecture diagrams.
+Design in the visual editor, render with React, or export as **TypeScript, JSON,
+SVG, PNG, or crisp ASCII**. The diagram lives with the system it describes.
 
 [![npm version](https://img.shields.io/npm/v/@arach/arc.svg?color=6d5efc&label=%40arach%2Farc)](https://www.npmjs.com/package/@arach/arc)
 [![license](https://img.shields.io/npm/l/@arach/arc.svg?color=41b883)](./LICENSE)
 [![types](https://img.shields.io/npm/types/@arach/arc.svg?color=3b82f6)](./lib/index.d.ts)
 
-![A microservices architecture rendered by Arc's ArcDiagram component](public/hero.png)
+![A microservices architecture rendered by Arc's ArcDiagram component in the Engineering theme](https://raw.githubusercontent.com/arach/arc/master/public/hero.png)
 
-<sub>Not a screenshot of a drawing tool — that's the config in <a href="#example-output">Example Output</a>, rendered live by <code>&lt;ArcDiagram /&gt;</code>.</sub>
+<sub>Not a screenshot of a drawing tool — that's the config in <a href="#example-output">Example Output</a>, rendered by <code>&lt;ArcDiagram /&gt;</code> in the Engineering theme.</sub>
 
 </div>
 
@@ -42,7 +43,7 @@ export function Architecture() {
   return (
     <ArcDiagram
       data={diagram}      // your ArcDiagramData (see below)
-      theme="default"     // default · warm · cool · mono · ibm · palantir · anduril
+      theme="default"     // seven themes, each with light & dark
       mode="dark"         // light · dark
       defaultZoom="fit"   // auto-fit to the container
     />
@@ -51,13 +52,38 @@ export function Architecture() {
 ```
 
 You get pan/zoom, hover highlighting, light/dark modes, and seven color themes
-out of the box. Prefer to design visually? Clone the repo and open the editor:
+out of the box.
+
+### Key props
+
+| Prop | Type | Notes |
+|------|------|-------|
+| `data` | `ArcDiagramData` | The diagram config (required) — see [Example Output](#example-output). |
+| `theme` | `'default' \| 'warm' \| 'cool' \| 'mono' \| 'engineering' \| 'workbench' \| 'tactical'` | Palette + drafting grammar (grid, frame, type). |
+| `mode` | `'light' \| 'dark'` | Appearance. |
+| `frame` | `'hairline' \| 'inset' \| 'brackets' \| 'ticks' \| 'cropmarks' \| 'corners' \| 'sheet' \| 'none'` | Override the theme's edge treatment. |
+| `interactive` | `boolean` | Pan/zoom controls. |
+| `defaultZoom` | `number \| 'fit'` | Initial zoom, or `'fit'` to auto-fit (`maxFitZoom` caps it). |
+| `showControls` / `showMinimap` | `boolean` | Zoom controls / minimap for read-only chrome. |
+| `hoverEffects` | `boolean \| { dim, lift, glow, highlightEdges }` | Hover highlighting (granular). |
+| `label` | `string` | Override the bottom-left label. |
+
+## The Studio
+
+Prefer to design visually? Arc ships a full drag-and-drop **studio** — infinite
+canvas, floating toolbar, reusable connector styles, live properties panel, and
+a minimap. Clone the repo and open it:
 
 ```bash
 git clone https://github.com/arach/arc && cd arc
-bun install && bun dev      # → http://localhost:5188
+bun install && bun dev      # → http://localhost:5188/editor
 ```
 
+![The Arc Studio — a drag-and-drop editor for architecture diagrams](https://raw.githubusercontent.com/arach/arc/master/public/studio.png)
+
+Design on the canvas, then **Export** to TypeScript, JSON, SVG, PNG, or a
+shareable link — and drop the result straight into `<ArcDiagram />`.
+
 ## Features
 
 - **Visual Editor** - Drag-and-drop nodes, connect with arrows
@@ -69,6 +95,52 @@ bun install && bun dev      # → http://localhost:5188
 - **Groups & Images** - Visual grouping, background images
 - **Templates** - Quick-start layouts
 
+## Native Mermaid Sequences
+
+`@arach/arc-viewer` turns canonical Mermaid `sequenceDiagram` source into a
+typed Arc document and a native, interactive React player—without embedding the
+generic Mermaid runtime.
+
+```bash
+npm install @arach/arc-viewer
+```
+
+```tsx
+import { ArcMermaidPlayer } from '@arach/arc-viewer'
+
+const source = `sequenceDiagram
+  participant App
+  participant API
+  App->>API: Load architecture
+  API-->>App: Typed diagram`
+
+export function Sequence() {
+  return <ArcMermaidPlayer source={source} mode="light" />
+}
+```
+
+## Themes
+
+One diagram, several drafting grammars. The nodes and palette stay the same —
+what changes is the grid system, edge treatment, type, and geometry. Here's
+Arc's own architecture rendered three ways:
+
+<div align="center">
+  <img src="https://raw.githubusercontent.com/arach/arc/master/public/theme-engineering.png" alt="Arc's architecture in the Engineering theme" width="840" />
+  <br/>
+  <sub><strong>Engineering</strong> — graph grid, drawing-sheet border, title block, uppercase mono</sub>
+  <br/><br/>
+  <img src="https://raw.githubusercontent.com/arach/arc/master/public/theme-workbench.png" alt="Arc's architecture in the Workbench theme" width="840" />
+  <br/>
+  <sub><strong>Workbench</strong> — dot grid, hairline frame, soft corners</sub>
+  <br/><br/>
+  <img src="https://raw.githubusercontent.com/arach/arc/master/public/theme-tactical.png" alt="Arc's architecture in the Tactical theme" width="840" />
+  <br/>
+  <sub><strong>Tactical</strong> — crosshair grid, corner brackets, hard edges</sub>
+</div>
+
+Plus `default`, `warm`, `cool`, and `mono` — seven in all, each with light and dark modes.
+
 ## Example Output
 
 Arc stores diagrams as plain, typed data — the same config that renders the