@arach/arc 0.4.2 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -5
- package/lib/arc.es.js +13574 -13405
- package/lib/arc.umd.js +110 -101
- package/lib/index.d.ts +702 -111
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -13,9 +13,9 @@ straight to text for a README. Same diagram, everywhere.
|
|
|
13
13
|
[](./LICENSE)
|
|
14
14
|
[](./lib/index.d.ts)
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
|
|
17
17
|
|
|
18
|
-
<sub>Not a screenshot of a drawing tool — that's the config in <a href="#example-output">Example Output</a>, rendered
|
|
18
|
+
<sub>Not a screenshot of a drawing tool — that's the config in <a href="#example-output">Example Output</a>, rendered by <code><ArcDiagram /></code> in the Engineering theme.</sub>
|
|
19
19
|
|
|
20
20
|
</div>
|
|
21
21
|
|
|
@@ -42,7 +42,7 @@ export function Architecture() {
|
|
|
42
42
|
return (
|
|
43
43
|
<ArcDiagram
|
|
44
44
|
data={diagram} // your ArcDiagramData (see below)
|
|
45
|
-
theme="default" //
|
|
45
|
+
theme="default" // seven themes, each with light & dark
|
|
46
46
|
mode="dark" // light · dark
|
|
47
47
|
defaultZoom="fit" // auto-fit to the container
|
|
48
48
|
/>
|
|
@@ -51,13 +51,38 @@ export function Architecture() {
|
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
You get pan/zoom, hover highlighting, light/dark modes, and seven color themes
|
|
54
|
-
out of the box.
|
|
54
|
+
out of the box.
|
|
55
|
+
|
|
56
|
+
### Key props
|
|
57
|
+
|
|
58
|
+
| Prop | Type | Notes |
|
|
59
|
+
|------|------|-------|
|
|
60
|
+
| `data` | `ArcDiagramData` | The diagram config (required) — see [Example Output](#example-output). |
|
|
61
|
+
| `theme` | `'default' \| 'warm' \| 'cool' \| 'mono' \| 'engineering' \| 'workbench' \| 'tactical'` | Palette + drafting grammar (grid, frame, type). |
|
|
62
|
+
| `mode` | `'light' \| 'dark'` | Appearance. |
|
|
63
|
+
| `frame` | `'hairline' \| 'inset' \| 'brackets' \| 'ticks' \| 'cropmarks' \| 'corners' \| 'sheet' \| 'none'` | Override the theme's edge treatment. |
|
|
64
|
+
| `interactive` | `boolean` | Pan/zoom controls. |
|
|
65
|
+
| `defaultZoom` | `number \| 'fit'` | Initial zoom, or `'fit'` to auto-fit (`maxFitZoom` caps it). |
|
|
66
|
+
| `showControls` / `showMinimap` | `boolean` | Zoom controls / minimap for read-only chrome. |
|
|
67
|
+
| `hoverEffects` | `boolean \| { dim, lift, glow, highlightEdges }` | Hover highlighting (granular). |
|
|
68
|
+
| `label` | `string` | Override the bottom-left label. |
|
|
69
|
+
|
|
70
|
+
## The Studio
|
|
71
|
+
|
|
72
|
+
Prefer to design visually? Arc ships a full drag-and-drop **studio** — infinite
|
|
73
|
+
canvas, floating toolbar, reusable connector styles, live properties panel, and
|
|
74
|
+
a minimap. Clone the repo and open it:
|
|
55
75
|
|
|
56
76
|
```bash
|
|
57
77
|
git clone https://github.com/arach/arc && cd arc
|
|
58
|
-
bun install && bun dev # → http://localhost:5188
|
|
78
|
+
bun install && bun dev # → http://localhost:5188/editor
|
|
59
79
|
```
|
|
60
80
|
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
Design on the canvas, then **Export** to TypeScript, JSON, SVG, PNG, or a
|
|
84
|
+
shareable link — and drop the result straight into `<ArcDiagram />`.
|
|
85
|
+
|
|
61
86
|
## Features
|
|
62
87
|
|
|
63
88
|
- **Visual Editor** - Drag-and-drop nodes, connect with arrows
|
|
@@ -69,6 +94,28 @@ bun install && bun dev # → http://localhost:5188
|
|
|
69
94
|
- **Groups & Images** - Visual grouping, background images
|
|
70
95
|
- **Templates** - Quick-start layouts
|
|
71
96
|
|
|
97
|
+
## Themes
|
|
98
|
+
|
|
99
|
+
One diagram, several drafting grammars. The nodes and palette stay the same —
|
|
100
|
+
what changes is the grid system, edge treatment, type, and geometry. Here's
|
|
101
|
+
Arc's own architecture rendered three ways:
|
|
102
|
+
|
|
103
|
+
<div align="center">
|
|
104
|
+
<img src="public/theme-engineering.png" alt="Arc's architecture in the Engineering theme" width="840" />
|
|
105
|
+
<br/>
|
|
106
|
+
<sub><strong>Engineering</strong> — graph grid, drawing-sheet border, title block, uppercase mono</sub>
|
|
107
|
+
<br/><br/>
|
|
108
|
+
<img src="public/theme-workbench.png" alt="Arc's architecture in the Workbench theme" width="840" />
|
|
109
|
+
<br/>
|
|
110
|
+
<sub><strong>Workbench</strong> — dot grid, hairline frame, soft corners</sub>
|
|
111
|
+
<br/><br/>
|
|
112
|
+
<img src="public/theme-tactical.png" alt="Arc's architecture in the Tactical theme" width="840" />
|
|
113
|
+
<br/>
|
|
114
|
+
<sub><strong>Tactical</strong> — crosshair grid, corner brackets, hard edges</sub>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
Plus `default`, `warm`, `cool`, and `mono` — seven in all, each with light and dark modes.
|
|
118
|
+
|
|
72
119
|
## Example Output
|
|
73
120
|
|
|
74
121
|
Arc stores diagrams as plain, typed data — the same config that renders the
|