archik 0.7.0 → 0.7.1
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/.claude/commands/archik/accept.md +1 -1
- package/.claude/commands/archik/describe.md +1 -1
- package/.claude/commands/archik/dev.md +1 -1
- package/.claude/commands/archik/evolve.md +127 -0
- package/.claude/commands/archik/reject.md +1 -1
- package/.claude/commands/archik/spawn.md +144 -0
- package/.claude/commands/archik/suggest.md +1 -1
- package/.claude/skills/archik/SKILL.md +26 -6
- package/README.md +53 -19
- package/dist/ui/assets/index-s04yHjLy.css +1 -0
- package/dist/ui/index.html +2 -2
- package/package.json +1 -1
- package/dist/ui/assets/index-UZ_JijeQ.css +0 -1
- /package/dist/ui/assets/{index-BAIgFELp.js → index-DnHchl8n.js} +0 -0
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Propose a cleaner modular architecture
|
|
3
|
+
argument-hint: [optional focus area, e.g. "payments domain"]
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# /archik:evolve — propose a cleaner, bounded architecture
|
|
7
|
+
|
|
8
|
+
The user wants you to look at the current diagram with a critical
|
|
9
|
+
eye and **propose a refactor toward a cleaner modular architecture
|
|
10
|
+
with clear bounded contexts**. Stage the proposal as a sidecar so
|
|
11
|
+
the diff overlay highlights what would change, then **wait for the
|
|
12
|
+
user to discuss before they accept** — evolve is a conversation,
|
|
13
|
+
not a one-shot.
|
|
14
|
+
|
|
15
|
+
If `$ARGUMENTS` is non-empty, treat it as the area to focus on
|
|
16
|
+
(e.g. *"payments domain"*, *"the orders module"*, *"async wiring
|
|
17
|
+
between services"*). If empty, evaluate the whole diagram.
|
|
18
|
+
|
|
19
|
+
## CLI-only — do not touch archik files directly
|
|
20
|
+
|
|
21
|
+
You MUST interact with archik exclusively through the `npx archik`
|
|
22
|
+
CLI. Drafts go to a workspace temp file, then `npx archik suggest
|
|
23
|
+
set` stages them. Do NOT use `Read`, `Write`, or `Edit` against
|
|
24
|
+
any file under `.archik/`.
|
|
25
|
+
|
|
26
|
+
## Steps
|
|
27
|
+
|
|
28
|
+
1. **Make sure the canvas is running**: `npx archik status` →
|
|
29
|
+
`npx archik start` if needed. Note the URL for step 6.
|
|
30
|
+
|
|
31
|
+
2. **Ground yourself in the current shape** via the query CLI:
|
|
32
|
+
```
|
|
33
|
+
npx archik q stats
|
|
34
|
+
npx archik q list
|
|
35
|
+
npx archik q edges
|
|
36
|
+
```
|
|
37
|
+
If `$ARGUMENTS` names a specific area, also:
|
|
38
|
+
```
|
|
39
|
+
npx archik q describe <id>
|
|
40
|
+
npx archik q deps <id>
|
|
41
|
+
npx archik q dependents <id>
|
|
42
|
+
npx archik q impact <id>
|
|
43
|
+
```
|
|
44
|
+
Refuse politely and stop if the diagram has fewer than 3 nodes
|
|
45
|
+
— there's nothing meaningful to evolve. Suggest `/archik:spawn`
|
|
46
|
+
first.
|
|
47
|
+
|
|
48
|
+
3. **Identify smells and missing structure.** Don't propose change
|
|
49
|
+
for change's sake — every modification should fix one of:
|
|
50
|
+
|
|
51
|
+
- **Bounded contexts unclear.** Several services share a
|
|
52
|
+
domain language but aren't grouped → wrap in a `module`
|
|
53
|
+
container per context.
|
|
54
|
+
- **God service.** One node owns too many responsibilities or
|
|
55
|
+
reaches into too many domains → split along bounded
|
|
56
|
+
contexts, with the original kept only as the API surface
|
|
57
|
+
facing the outside.
|
|
58
|
+
- **Leaky boundaries.** Cross-context `reads` / `writes`
|
|
59
|
+
directly on another context's database → introduce a `port`
|
|
60
|
+
+ `adapter` pair, or replace with `publishes` / `subscribes`
|
|
61
|
+
events.
|
|
62
|
+
- **Missing hexagonal structure** at external boundaries.
|
|
63
|
+
Direct `http_call` to Stripe / OpenAI / payment processor →
|
|
64
|
+
introduce a `port` (the abstract contract) and an `adapter`
|
|
65
|
+
(the concrete impl), with `implements` between them.
|
|
66
|
+
- **Cyclic dependencies** between modules — should be inverted
|
|
67
|
+
(events) or broken (extract shared kernel).
|
|
68
|
+
- **Anaemic queues.** Two services connected by `http_call`
|
|
69
|
+
for what's clearly an async fire-and-forget → introduce a
|
|
70
|
+
`queue` or `topic` and rewire to `publishes` / `subscribes`.
|
|
71
|
+
|
|
72
|
+
Aim for 3–8 changes — enough to be meaningful, few enough that
|
|
73
|
+
the user can reason about each. If you'd need more, propose
|
|
74
|
+
the highest-impact subset and tell the user the rest is round
|
|
75
|
+
two.
|
|
76
|
+
|
|
77
|
+
4. **Author the full proposed end-state** in a workspace temp file:
|
|
78
|
+
`/tmp/archik-evolve-<short-id>.yaml`. Constraints:
|
|
79
|
+
|
|
80
|
+
- Preserve every existing node id you keep — only add or remove
|
|
81
|
+
ids, never rename. Renames break diff and require the user to
|
|
82
|
+
manually re-link references in code.
|
|
83
|
+
- Don't drop `description`, `responsibilities`, or `notes`
|
|
84
|
+
fields the user authored. Carry them over verbatim.
|
|
85
|
+
- Every change should be motivated by step 3, not by aesthetics.
|
|
86
|
+
|
|
87
|
+
5. **Stage the draft via the CLI**:
|
|
88
|
+
```
|
|
89
|
+
npx archik suggest set --note "evolve: <one-line summary>" /tmp/archik-evolve-<id>.yaml
|
|
90
|
+
```
|
|
91
|
+
Fix and re-run on validation errors. Never patch the sidecar
|
|
92
|
+
directly.
|
|
93
|
+
|
|
94
|
+
6. **Open the discussion.** Print, in this order:
|
|
95
|
+
|
|
96
|
+
a. The canvas URL with: *"📝 Evolved diagram staged — open
|
|
97
|
+
<URL> and toggle Review to see green / red / amber overlays."*
|
|
98
|
+
b. A numbered, plain-English summary of the proposed changes,
|
|
99
|
+
grouped by motivation (e.g. *"1. Extract a `payments`
|
|
100
|
+
bounded context from `orders`. Why: payment logic was leaking
|
|
101
|
+
into order placement…"*). Keep each item to 2–3 sentences.
|
|
102
|
+
c. An explicit invitation: *"Tell me what you'd like to keep,
|
|
103
|
+
drop, or rework before you accept. I can re-stage with
|
|
104
|
+
changes — `/archik:accept` is whenever you're ready."*
|
|
105
|
+
|
|
106
|
+
**Do NOT auto-accept.** Even if the user said "evolve and apply"
|
|
107
|
+
in shorthand, evolve always stops at the staged sidecar so the
|
|
108
|
+
diff is reviewable.
|
|
109
|
+
|
|
110
|
+
## Iterating
|
|
111
|
+
|
|
112
|
+
If the user pushes back on specific items ("keep the orders
|
|
113
|
+
service whole; only fix the Stripe integration"), update the
|
|
114
|
+
draft in the same temp file and re-run `npx archik suggest set` —
|
|
115
|
+
it overwrites the previous sidecar. Acknowledge what you changed
|
|
116
|
+
since the last round so the user doesn't have to re-read the
|
|
117
|
+
whole diff.
|
|
118
|
+
|
|
119
|
+
## Notes
|
|
120
|
+
|
|
121
|
+
- Evolve is bounded-context-aware but doesn't blindly apply DDD.
|
|
122
|
+
If the project is genuinely small and a single service is the
|
|
123
|
+
right answer, say so and stage no changes — better than
|
|
124
|
+
inventing structure for its own sake.
|
|
125
|
+
- If you'd need to look at code (not just the diagram) to make a
|
|
126
|
+
responsible recommendation, say so up front and ask for
|
|
127
|
+
permission to read specific files. Don't silently expand scope.
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Bootstrap the diagram from the source tree
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# /archik:spawn — mirror the codebase as an archik diagram
|
|
6
|
+
|
|
7
|
+
The user wants a first-pass archik diagram that **reflects the
|
|
8
|
+
project as it actually is right now**, not as it should be. Read
|
|
9
|
+
the source tree, infer the components and the wiring, stage the
|
|
10
|
+
result as a suggestion sidecar so the user can review it on the
|
|
11
|
+
canvas before accepting.
|
|
12
|
+
|
|
13
|
+
Use `/archik:evolve` afterwards if they want a cleaner version.
|
|
14
|
+
Spawn = mirror. Evolve = improve.
|
|
15
|
+
|
|
16
|
+
## CLI-only — do not touch archik files directly
|
|
17
|
+
|
|
18
|
+
You MUST interact with archik exclusively through the `npx archik`
|
|
19
|
+
CLI. Do NOT use `Read`, `Write`, or `Edit` on any file under
|
|
20
|
+
`.archik/`. Your draft goes to a workspace temp file, then `npx
|
|
21
|
+
archik suggest set` stages it.
|
|
22
|
+
|
|
23
|
+
## Steps
|
|
24
|
+
|
|
25
|
+
1. **Make sure the canvas is running** so the user can review:
|
|
26
|
+
```
|
|
27
|
+
npx archik status
|
|
28
|
+
```
|
|
29
|
+
If nothing is running, start it detached: `npx archik start`.
|
|
30
|
+
Note the URL.
|
|
31
|
+
|
|
32
|
+
2. **Check what's already there** — if the project already has a
|
|
33
|
+
meaningful archik file, this command will *replace* it via the
|
|
34
|
+
suggestion workflow. Confirm with the user before proceeding
|
|
35
|
+
when the diagram has substance:
|
|
36
|
+
```
|
|
37
|
+
npx archik q stats
|
|
38
|
+
```
|
|
39
|
+
- 0 nodes / starter scaffold (web + api + db, the `archik init`
|
|
40
|
+
default) → proceed silently.
|
|
41
|
+
- Real content → tell the user "I'm about to replace the
|
|
42
|
+
current diagram with a fresh one mirroring the source tree —
|
|
43
|
+
this will produce a sidecar you can review or reject. Want me
|
|
44
|
+
to continue?" Wait for confirmation.
|
|
45
|
+
|
|
46
|
+
3. **Map the source tree.** Walk the project from cwd, paying
|
|
47
|
+
attention to conventional layouts. Don't recurse into
|
|
48
|
+
`node_modules`, `dist`, `build`, `.git`, `.next`,
|
|
49
|
+
`target`, `venv`, `.venv`, or `vendor`.
|
|
50
|
+
|
|
51
|
+
Useful signals (apply only if they fit the project — never
|
|
52
|
+
invent structure):
|
|
53
|
+
- **Top-level dirs**: `apps/`, `services/`, `packages/`, `src/`,
|
|
54
|
+
`cmd/`, `internal/`, `lambdas/`, `workers/`, `agents/`.
|
|
55
|
+
Each child usually maps to one node.
|
|
56
|
+
- **Manifest files**: `package.json` `name`, `Cargo.toml`,
|
|
57
|
+
`go.mod`, `pyproject.toml` give canonical component names.
|
|
58
|
+
- **`README` / `description`**: pull a one-line summary if
|
|
59
|
+
present; otherwise omit `description` rather than fabricate.
|
|
60
|
+
- **Stack hints**: `package.json` deps (Next.js, Express, Fastify,
|
|
61
|
+
Hono → service/frontend), `go.mod`, `requirements.txt`,
|
|
62
|
+
`Gemfile`. Set `stack` only when the signal is clear.
|
|
63
|
+
- **Datastores**: a `migrations/` folder, a `schema.sql`,
|
|
64
|
+
`prisma/`, `drizzle/`, `flyway/`, references to Postgres /
|
|
65
|
+
MySQL / Redis / Mongo / S3 / Pinecone / pgvector in deps or
|
|
66
|
+
env files → corresponding `database` / `cache` / `vectordb` /
|
|
67
|
+
`storage` node.
|
|
68
|
+
- **Queues / streams**: SQS / RabbitMQ / Kafka / Kinesis client
|
|
69
|
+
deps or config → `queue` / `topic` / `stream` node.
|
|
70
|
+
- **External APIs**: Stripe, OpenAI, Anthropic, Twilio, GitHub
|
|
71
|
+
SDKs in deps → `external` (or `llm` for OpenAI / Anthropic)
|
|
72
|
+
nodes.
|
|
73
|
+
- **Frontends**: `apps/web`, `apps/mobile`, `client/`,
|
|
74
|
+
`packages/ui` apps that ship a UI → `frontend`.
|
|
75
|
+
|
|
76
|
+
4. **Choose the kind for each node.** Default: `service`. Use the
|
|
77
|
+
taxonomy from the skill — `function` for serverless, `worker`
|
|
78
|
+
for background consumers, `agent` for LLM-driven agents, etc.
|
|
79
|
+
When unsure, pick the closest fit and add a `notes:` entry
|
|
80
|
+
explaining the inference rather than picking `custom`.
|
|
81
|
+
|
|
82
|
+
5. **Nest by structure**, mirroring the directories.
|
|
83
|
+
- Top-level grouping dir (e.g. `services/`) → a `module` container.
|
|
84
|
+
- Each child dir → a node with `parentId` pointing at the container.
|
|
85
|
+
- If a node has substantial internal structure (e.g.
|
|
86
|
+
`services/orders/{api,domain,db}`), emit a stub
|
|
87
|
+
`archikFile: .archik/<id>.archik.yaml` and *also* draft that
|
|
88
|
+
sub-file. Don't nest beyond two levels in the main file —
|
|
89
|
+
drill-down is what `archikFile` is for.
|
|
90
|
+
|
|
91
|
+
6. **Wire the edges.** Be conservative — only add an edge when you
|
|
92
|
+
have actual evidence:
|
|
93
|
+
- Cross-package imports → `depends_on` or a more specific
|
|
94
|
+
relationship (`uses`, `invokes`).
|
|
95
|
+
- HTTP route handlers calling another service's endpoint →
|
|
96
|
+
`http_call`.
|
|
97
|
+
- DB client usage → `reads` / `writes`.
|
|
98
|
+
- Queue producer / consumer code → `publishes` / `subscribes`.
|
|
99
|
+
- Webhook handlers (e.g. `/webhooks/stripe`) → `webhook` from
|
|
100
|
+
the external node.
|
|
101
|
+
|
|
102
|
+
When in doubt, leave the edge out. The user will add it via
|
|
103
|
+
`/archik:suggest` later.
|
|
104
|
+
|
|
105
|
+
7. **Stage the draft.** Write the full proposed end-state to
|
|
106
|
+
`/tmp/archik-spawn-<short-id>.yaml`. If you generated sub-files,
|
|
107
|
+
write each one to its own temp file (`/tmp/archik-spawn-<sub>-<id>.yaml`)
|
|
108
|
+
and `suggest set` them too — but only the main file becomes a
|
|
109
|
+
sidecar. The sub-files need to live at their final
|
|
110
|
+
`.archik/<id>.archik.yaml` paths *before* you stage the main
|
|
111
|
+
draft, otherwise cross-file validation fails. So:
|
|
112
|
+
|
|
113
|
+
a. For each `archikFile: .archik/<id>.archik.yaml` you reference,
|
|
114
|
+
stage that sub-file first with its own
|
|
115
|
+
`npx archik suggest set` … then accept it immediately
|
|
116
|
+
(`npx archik suggest accept`) so the file is on disk under
|
|
117
|
+
`.archik/<id>.archik.yaml`. Yes, this is a chain of
|
|
118
|
+
micro-commits — that's the only CLI-blessed way to land
|
|
119
|
+
sub-files.
|
|
120
|
+
b. After all sub-files exist, stage the main draft:
|
|
121
|
+
```
|
|
122
|
+
npx archik suggest set --note "spawn: mirror source tree" /tmp/archik-spawn-<id>.yaml
|
|
123
|
+
```
|
|
124
|
+
c. If `suggest set` reports validation errors, fix the temp
|
|
125
|
+
file and re-run. Never edit the sidecar by hand.
|
|
126
|
+
|
|
127
|
+
8. **Tell the user how to review.** Surface the canvas URL plus:
|
|
128
|
+
- "📝 Initial diagram staged from source tree — open the
|
|
129
|
+
canvas at <URL> and use Review to see the proposed nodes."
|
|
130
|
+
- "Looks wrong? Run `/archik:reject` and we'll iterate. Or run
|
|
131
|
+
`/archik:evolve` after accepting if you want a cleaner
|
|
132
|
+
bounded-context version."
|
|
133
|
+
|
|
134
|
+
## Notes
|
|
135
|
+
|
|
136
|
+
- Spawn is descriptive, not prescriptive. Don't reorganize, split,
|
|
137
|
+
or merge components — just mirror what's there. Cleanup is
|
|
138
|
+
`/archik:evolve`'s job.
|
|
139
|
+
- Don't fabricate edges to fill gaps in the diagram. An incomplete
|
|
140
|
+
but accurate diagram is more useful than a complete-looking but
|
|
141
|
+
wrong one.
|
|
142
|
+
- If the source tree is one big monolith with no obvious
|
|
143
|
+
decomposition, output a single node and tell the user — don't
|
|
144
|
+
invent fake sub-services.
|
|
@@ -51,12 +51,32 @@ If `npx archik` is unreachable (offline, sandboxed, missing), STOP
|
|
|
51
51
|
and tell the user. Do NOT fall back to reading or editing YAML by
|
|
52
52
|
hand — that breaks the contract and silently desyncs the canvas.
|
|
53
53
|
|
|
54
|
-
The user-facing slash commands
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
The user-facing slash commands are thin shims over this same CLI:
|
|
55
|
+
|
|
56
|
+
| Command | Purpose |
|
|
57
|
+
| ---------------------- | --------------------------------------------- |
|
|
58
|
+
| `/archik:spawn` | Bootstrap a diagram from the source tree |
|
|
59
|
+
| `/archik:evolve` | Propose a cleaner bounded-context refactor |
|
|
60
|
+
| `/archik:suggest <…>` | Propose changes from a feature description |
|
|
61
|
+
| `/archik:describe <id>`| Explain a node and its connections |
|
|
62
|
+
| `/archik:accept` | Apply the pending suggestion |
|
|
63
|
+
| `/archik:reject` | Discard the pending suggestion |
|
|
64
|
+
| `/archik:dev` | Start the live canvas |
|
|
65
|
+
|
|
66
|
+
When a user types `/archik:suggest <description>`, `/archik:spawn`,
|
|
67
|
+
or `/archik:evolve`, treat it as direct authorisation to run the
|
|
68
|
+
sidecar workflow now — skip the "want me to update the YAML?"
|
|
69
|
+
question. Each command's body file under `.claude/commands/archik/`
|
|
70
|
+
has the detailed protocol for that specific verb; follow it.
|
|
71
|
+
|
|
72
|
+
Three things separate the proposal commands:
|
|
73
|
+
|
|
74
|
+
- **`spawn`** is *descriptive* — mirror the source tree as it is.
|
|
75
|
+
- **`evolve`** is *prescriptive* — propose a cleaner shape, then
|
|
76
|
+
wait for the user to discuss before they accept. Never
|
|
77
|
+
auto-accepts.
|
|
78
|
+
- **`suggest`** is *targeted* — apply one feature-sized change
|
|
79
|
+
from a user description.
|
|
60
80
|
|
|
61
81
|
## Protocol
|
|
62
82
|
|
package/README.md
CHANGED
|
@@ -26,10 +26,11 @@ queues, agents, LLMs, the edges between them. Plain YAML, schema-
|
|
|
26
26
|
validated, no coordinates, no proprietary format.
|
|
27
27
|
|
|
28
28
|
Open it in your browser for a live canvas. Render it in CI for a
|
|
29
|
-
self-contained SVG.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
self-contained SVG. The [Claude Code skill and `/archik:*` slash
|
|
30
|
+
commands](#for-claude-code--other-llms) install automatically with
|
|
31
|
+
`archik init`, so the model edits the same file you do — *the
|
|
32
|
+
diagram and the codebase stop drifting because Claude treats the
|
|
33
|
+
diagram as the spec*.
|
|
33
34
|
|
|
34
35
|
If you've ever asked an AI agent "where would I add X?" and watched
|
|
35
36
|
it guess from filenames, archik is the fix: the YAML answers the
|
|
@@ -38,13 +39,25 @@ work.
|
|
|
38
39
|
|
|
39
40
|
## Quickstart
|
|
40
41
|
|
|
42
|
+
Two terminal commands, then talk to Claude:
|
|
43
|
+
|
|
41
44
|
```bash
|
|
42
|
-
npx archik init #
|
|
43
|
-
|
|
44
|
-
npx archik
|
|
45
|
+
npx archik@latest init # scaffolds .archik/main.archik.yaml +
|
|
46
|
+
# installs the Claude skill + /archik:* slash commands
|
|
47
|
+
npx archik@latest start # opens the live canvas at http://localhost:5173
|
|
45
48
|
```
|
|
46
49
|
|
|
47
|
-
|
|
50
|
+
Then in Claude Code, type:
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
/archik:spawn # mirror your real source tree as the first diagram
|
|
54
|
+
/archik:evolve # propose a cleaner bounded-context refactor
|
|
55
|
+
/archik:suggest <feature> # propose changes for a specific feature
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Each `/archik:*` command stages a suggestion sidecar — **Review** in the canvas, then **Accept** or **Reject**. No manual YAML editing on either side: you click in the browser, Claude drives through the CLI.
|
|
59
|
+
|
|
60
|
+
Done with the canvas? `npx archik stop`.
|
|
48
61
|
|
|
49
62
|
<p align="center">
|
|
50
63
|
<video src="https://github.com/bacharSalleh/archik/raw/main/docs/record.mp4" poster="https://cdn.jsdelivr.net/gh/bacharSalleh/archik@main/docs/archik.gif" width="780" controls muted autoplay loop playsinline>
|
|
@@ -90,28 +103,49 @@ No `x` / `y` / `width` — layout is computed by [ELK](https://eclipse.dev/elk/)
|
|
|
90
103
|
- **12 relationships** with distinct visual styling — `http_call`, `invokes`, `reads`, `writes`, `publishes`, `subscribes`, `streams_to`, `routes_to`, `implements`, `depends_on`, `has_a`, `uses`.
|
|
91
104
|
- **Drag-to-connect, multi-select, undo/redo, compact view, themed (dark / light), notes per node, color overrides on edges.**
|
|
92
105
|
- **CI-ready CLI** — `validate`, `render` (headless SVG), `watch`, `check` (drift between YAML and source dirs).
|
|
93
|
-
- **AI skill + slash commands** — `archik
|
|
106
|
+
- **AI skill + slash commands** — `archik init` installs both automatically. Seven `/archik:*` commands (`spawn`, `evolve`, `suggest`, `describe`, `dev`, `accept`, `reject`) drive the diagram entirely through the CLI, so Claude never edits YAML by hand.
|
|
94
107
|
|
|
95
108
|
## For Claude Code & other LLMs
|
|
96
109
|
|
|
97
|
-
The whole reason
|
|
110
|
+
The whole reason archik uses YAML instead of a binary format: **the file is the shared map between you and the model**. `npx archik@latest init` drops both the Claude skill and the seven slash commands into your project — no separate setup.
|
|
98
111
|
|
|
99
|
-
|
|
100
|
-
archik skill --user # install the skill into ~/.claude/skills
|
|
101
|
-
archik commands --user # install the /archik:* slash commands into ~/.claude/commands
|
|
102
|
-
```
|
|
112
|
+
The skill enforces a hard rule: **Claude talks to archik only through the `npx archik` CLI** — never `Read`, `Write`, or `Edit` on a YAML directly. Queries go through `npx archik q`, suggestions through `npx archik suggest set`, lifecycle through `npx archik suggest accept | reject`. You own the file; the CLI is the contract.
|
|
103
113
|
|
|
104
|
-
|
|
114
|
+
### The seven slash commands
|
|
105
115
|
|
|
106
|
-
|
|
116
|
+
| Command | What it does |
|
|
117
|
+
| --------------------------- | ----------------------------------------------------------- |
|
|
118
|
+
| `/archik:spawn` | Bootstrap a diagram by mirroring your real source tree |
|
|
119
|
+
| `/archik:evolve` | Propose a cleaner bounded-context refactor |
|
|
120
|
+
| `/archik:suggest <feature>` | Propose changes for a specific feature |
|
|
121
|
+
| `/archik:describe <id>` | Explain a node and its connections |
|
|
122
|
+
| `/archik:dev` | Open the live canvas |
|
|
123
|
+
| `/archik:accept` | Apply the pending suggestion |
|
|
124
|
+
| `/archik:reject` | Discard the pending suggestion |
|
|
107
125
|
|
|
108
|
-
|
|
126
|
+
A typical first-day flow:
|
|
109
127
|
|
|
110
128
|
```
|
|
111
|
-
/archik:
|
|
129
|
+
/archik:spawn # mirror what's there now
|
|
130
|
+
# → review on the canvas, accept
|
|
131
|
+
/archik:evolve # propose a cleaner shape
|
|
132
|
+
# → discuss with Claude, accept (or iterate)
|
|
133
|
+
/archik:suggest add Stripe webhook handler
|
|
134
|
+
# → small, targeted change
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Each command stages a sidecar via `npx archik suggest set`. The canvas shows a green/red/amber diff overlay; you click Accept or Reject — or `/archik:accept` / `/archik:reject` from the terminal. Same outcome either way.
|
|
138
|
+
|
|
139
|
+
### Manual install (existing projects without `archik init`)
|
|
140
|
+
|
|
141
|
+
If you already have an archik file and just want to add the Claude integration:
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
npx archik@latest skill --user # install skill into ~/.claude/skills (all projects)
|
|
145
|
+
npx archik@latest commands --user # install /archik:* into ~/.claude/commands (all projects)
|
|
112
146
|
```
|
|
113
147
|
|
|
114
|
-
|
|
148
|
+
Drop the `--user` flag to scope to the current project only.
|
|
115
149
|
|
|
116
150
|
## Commands
|
|
117
151
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-rose-700:oklch(51.4% .222 16.935);--spacing:.25rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--tracking-tight:-.025em;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-auto{margin-top:auto}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.flex-1{flex:1}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-pre-wrap{white-space:pre-wrap}.text-rose-700{color:var(--color-rose-700)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}@media(hover:hover){.hover\:no-underline:hover{text-decoration-line:none}}}:root,[data-theme=light]{--archik-canvas:#f8fafc;--archik-panel:#fff;--archik-surface:#f1f5f9;--archik-surface-hover:#e2e8f0;--archik-fg:#0f172a;--archik-fg-dim:#475569;--archik-fg-muted:#94a3b8;--archik-border:#e2e8f0;--archik-border-strong:#cbd5e1;--archik-accent:#2563eb;--archik-accent-bright:#3b82f6;--archik-magenta:#db2777;--archik-success:#10b981;--archik-warning:#d97706;--archik-danger:#e11d48;--archik-node-fill:#fff;--archik-node-fill-tinted:#f1f5f9;--archik-node-fill-frame:#fff;--archik-node-stroke:#0f172a;--archik-node-stroke-soft:#475569;--archik-container-border:#94a3b8;--archik-node-text:#0f172a;--archik-node-text-dim:#475569;--archik-node-caption:#64748b;--archik-node-chrome-dot:#cbd5f5;--archik-edge-filled:#0f172a;--archik-edge-open:#334155;--archik-edge-dim:#64748b;--archik-edge-async:#2563eb;--archik-grid-minor:#e2e8f0;--archik-grid-major:#cbd5e1;--archik-selected:#2563eb;--archik-selected-glow:#2563eb2e;color-scheme:light}[data-theme=dark]{--archik-canvas:#050912;--archik-panel:#0c1426;--archik-surface:#14203a;--archik-surface-hover:#1c2c4d;--archik-fg:#e6edf7;--archik-fg-dim:#8b9bb8;--archik-fg-muted:#5b6a87;--archik-border:#1d2b48;--archik-border-strong:#2c3e63;--archik-accent:#22d3ee;--archik-accent-bright:#67e8f9;--archik-magenta:#f472b6;--archik-success:#34d399;--archik-warning:#fbbf24;--archik-danger:#fb7185;--archik-node-fill:#0c1426;--archik-node-fill-tinted:#142037;--archik-node-fill-frame:#14203a;--archik-node-stroke:#2c3e63;--archik-node-stroke-soft:#1d2b48;--archik-container-border:#3a4f7a;--archik-node-text:#e6edf7;--archik-node-text-dim:#b6c2d8;--archik-node-caption:#67e8f9;--archik-node-chrome-dot:#475878;--archik-edge-filled:#cbd5e1;--archik-edge-open:#94a3b8;--archik-edge-dim:#64748b;--archik-edge-async:#67e8f9;--archik-grid-minor:#0d1830;--archik-grid-major:#182748;--archik-selected:#22d3ee;--archik-selected-glow:#22d3ee47;color-scheme:dark}html,body,#root{background:var(--archik-canvas);height:100%;color:var(--archik-fg);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,sans-serif}.archik-panel{background:var(--archik-panel);border:1px solid var(--archik-border);border-radius:8px}.archik-input{background:var(--archik-surface);color:var(--archik-fg);border:1px solid var(--archik-border);font:inherit;border-radius:4px;outline:none;padding:4px 8px;font-size:12px;transition:border-color .12s,box-shadow .12s}.archik-input:focus{border-color:var(--archik-accent);box-shadow:0 0 0 3px var(--archik-selected-glow)}.archik-btn{background:var(--archik-surface);color:var(--archik-fg);border:1px solid var(--archik-border);cursor:pointer;border-radius:4px;align-items:center;gap:4px;padding:5px 10px;font-size:12px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.archik-btn:hover{background:var(--archik-surface-hover);border-color:var(--archik-border-strong)}.archik-btn:disabled{opacity:.5;cursor:not-allowed}.archik-btn-primary{background:var(--archik-accent);border-color:var(--archik-accent);color:#050912}.archik-btn-primary:hover{background:var(--archik-accent-bright);border-color:var(--archik-accent-bright)}[data-theme=light] .archik-btn-primary{color:#fff}.archik-btn-danger{color:var(--archik-danger);border-color:var(--archik-danger);background:0 0;border-style:dashed}.archik-btn-danger:hover{background:var(--archik-danger);color:#050912;border-style:solid}.archik-pill{letter-spacing:.02em;border:1px solid #0000;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;display:inline-flex}.archik-pill--info{color:var(--archik-accent);border-color:var(--archik-border-strong);background:var(--archik-accent)}@supports (color:color-mix(in lab,red,red)){.archik-pill--info{background:color-mix(in oklab,var(--archik-accent) 8%,transparent)}}.archik-pill--success{color:var(--archik-success);background:var(--archik-success)}@supports (color:color-mix(in lab,red,red)){.archik-pill--success{background:color-mix(in oklab,var(--archik-success) 12%,transparent)}}.archik-pill--warning{color:var(--archik-warning);background:var(--archik-warning)}@supports (color:color-mix(in lab,red,red)){.archik-pill--warning{background:color-mix(in oklab,var(--archik-warning) 14%,transparent)}}.archik-pill--danger{color:var(--archik-danger);background:var(--archik-danger)}@supports (color:color-mix(in lab,red,red)){.archik-pill--danger{background:color-mix(in oklab,var(--archik-danger) 14%,transparent)}}.archik-label{letter-spacing:.12em;text-transform:uppercase;color:var(--archik-fg-muted);margin-bottom:4px;font-size:10px;display:block}.archik-mono{color:var(--archik-fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.archik-divider{border-top:1px solid var(--archik-border)}.archik-grid{background-color:var(--archik-canvas);background-image:radial-gradient(var(--archik-grid-minor) 1px,transparent 1px),radial-gradient(var(--archik-grid-major) 1px,transparent 1px);background-position:0 0,0 0;background-size:20px 20px,100px 100px}.archik-selected-glow{filter:drop-shadow(0 0 6px var(--archik-selected-glow)) drop-shadow(0 0 2px var(--archik-selected-glow));animation:1.8s ease-in-out infinite archikPulse}@keyframes archikPulse{0%,to{filter:drop-shadow(0 0 4px var(--archik-selected-glow)) drop-shadow(0 0 1px var(--archik-selected-glow))}50%{filter:drop-shadow(0 0 12px var(--archik-selected-glow)) drop-shadow(0 0 3px var(--archik-selected-glow))}}.archik-modal-overlay{z-index:50;background:var(--archik-canvas);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@supports (color:color-mix(in lab,red,red)){.archik-modal-overlay{background:color-mix(in oklab,var(--archik-canvas) 70%,transparent)}}.archik-modal-overlay{-webkit-backdrop-filter:blur(4px);animation:.14s ease-out archikFadeIn}.archik-modal{background:var(--archik-panel);border:1px solid var(--archik-border);width:360px;max-width:calc(100vw - 32px);box-shadow:0 12px 40px #00000059,0 0 0 1px var(--archik-border-strong);border-radius:8px;padding:16px;animation:.2s cubic-bezier(.2,.8,.2,1) archikModalIn}.archik-selected-outline{fill:none;stroke:var(--archik-selected);stroke-width:2px;pointer-events:none}@keyframes archikEdgeFlow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-16px}}.archik-edge-flowing{animation:1.4s linear infinite archikEdgeFlow}.archik-edge-flowing-fast{animation:.6s linear infinite archikEdgeFlow}@media(prefers-reduced-motion:reduce){.archik-edge-flowing,.archik-edge-flowing-fast{animation:none}}.archik-popover{background:var(--archik-panel);border:1px solid var(--archik-border-strong);border-radius:6px;flex-direction:column;max-height:min(80vh,600px);padding:4px;animation:.16s cubic-bezier(.2,.8,.2,1) archikModalIn;display:flex;overflow:hidden;box-shadow:0 12px 32px #00000059}.archik-menu-item{width:100%;color:var(--archik-fg);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:4px;align-items:center;gap:8px;padding:6px 10px;font-size:12px;display:flex}.archik-menu-item:hover{background:var(--archik-surface-hover)}.archik-menu-item--danger{color:var(--archik-danger)}@keyframes archikFadeIn{0%{opacity:0}to{opacity:1}}@keyframes archikModalIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}.archik-drawer-shell{flex-direction:column;min-width:0;transition:width .22s cubic-bezier(.2,.8,.2,1),opacity .2s,margin-left .22s cubic-bezier(.2,.8,.2,1);display:flex;overflow:hidden}.archik-drawer-shell--open{opacity:1;width:320px;margin-left:16px}.archik-drawer-shell--closed{opacity:0;pointer-events:none;width:0;margin-left:0}.archik-drawer-content{flex-shrink:0;width:320px;height:100%}.archik-drawer-fade{animation:.22s ease-out archikFadeIn}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
|
package/dist/ui/index.html
CHANGED
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
}
|
|
15
15
|
} catch {}
|
|
16
16
|
</script>
|
|
17
|
-
<script type="module" crossorigin src="/assets/index-
|
|
18
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
17
|
+
<script type="module" crossorigin src="/assets/index-DnHchl8n.js"></script>
|
|
18
|
+
<link rel="stylesheet" crossorigin href="/assets/index-s04yHjLy.css">
|
|
19
19
|
</head>
|
|
20
20
|
<body>
|
|
21
21
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "archik",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "The shared vocabulary between you and Claude Code, at the engineering level. Plain-YAML architecture diagrams with a live browser canvas, headless SVG render in CI, and an installable Claude skill so the model treats the diagram as the spec.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"architecture",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-rose-700:oklch(51.4% .222 16.935);--spacing:.25rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--tracking-tight:-.025em;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-auto{margin-top:auto}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.flex-1{flex:1}.grow{flex-grow:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-pre-wrap{white-space:pre-wrap}.text-rose-700{color:var(--color-rose-700)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}@media(hover:hover){.hover\:no-underline:hover{text-decoration-line:none}}}:root,[data-theme=light]{--archik-canvas:#f8fafc;--archik-panel:#fff;--archik-surface:#f1f5f9;--archik-surface-hover:#e2e8f0;--archik-fg:#0f172a;--archik-fg-dim:#475569;--archik-fg-muted:#94a3b8;--archik-border:#e2e8f0;--archik-border-strong:#cbd5e1;--archik-accent:#2563eb;--archik-accent-bright:#3b82f6;--archik-magenta:#db2777;--archik-success:#10b981;--archik-warning:#d97706;--archik-danger:#e11d48;--archik-node-fill:#fff;--archik-node-fill-tinted:#f1f5f9;--archik-node-fill-frame:#fff;--archik-node-stroke:#0f172a;--archik-node-stroke-soft:#475569;--archik-container-border:#94a3b8;--archik-node-text:#0f172a;--archik-node-text-dim:#475569;--archik-node-caption:#64748b;--archik-node-chrome-dot:#cbd5f5;--archik-edge-filled:#0f172a;--archik-edge-open:#334155;--archik-edge-dim:#64748b;--archik-edge-async:#2563eb;--archik-grid-minor:#e2e8f0;--archik-grid-major:#cbd5e1;--archik-selected:#2563eb;--archik-selected-glow:#2563eb2e;color-scheme:light}[data-theme=dark]{--archik-canvas:#050912;--archik-panel:#0c1426;--archik-surface:#14203a;--archik-surface-hover:#1c2c4d;--archik-fg:#e6edf7;--archik-fg-dim:#8b9bb8;--archik-fg-muted:#5b6a87;--archik-border:#1d2b48;--archik-border-strong:#2c3e63;--archik-accent:#22d3ee;--archik-accent-bright:#67e8f9;--archik-magenta:#f472b6;--archik-success:#34d399;--archik-warning:#fbbf24;--archik-danger:#fb7185;--archik-node-fill:#0c1426;--archik-node-fill-tinted:#142037;--archik-node-fill-frame:#14203a;--archik-node-stroke:#2c3e63;--archik-node-stroke-soft:#1d2b48;--archik-container-border:#3a4f7a;--archik-node-text:#e6edf7;--archik-node-text-dim:#b6c2d8;--archik-node-caption:#67e8f9;--archik-node-chrome-dot:#475878;--archik-edge-filled:#cbd5e1;--archik-edge-open:#94a3b8;--archik-edge-dim:#64748b;--archik-edge-async:#67e8f9;--archik-grid-minor:#0d1830;--archik-grid-major:#182748;--archik-selected:#22d3ee;--archik-selected-glow:#22d3ee47;color-scheme:dark}html,body,#root{background:var(--archik-canvas);height:100%;color:var(--archik-fg);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,sans-serif}.archik-panel{background:var(--archik-panel);border:1px solid var(--archik-border);border-radius:8px}.archik-input{background:var(--archik-surface);color:var(--archik-fg);border:1px solid var(--archik-border);font:inherit;border-radius:4px;outline:none;padding:4px 8px;font-size:12px;transition:border-color .12s,box-shadow .12s}.archik-input:focus{border-color:var(--archik-accent);box-shadow:0 0 0 3px var(--archik-selected-glow)}.archik-btn{background:var(--archik-surface);color:var(--archik-fg);border:1px solid var(--archik-border);cursor:pointer;border-radius:4px;align-items:center;gap:4px;padding:5px 10px;font-size:12px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.archik-btn:hover{background:var(--archik-surface-hover);border-color:var(--archik-border-strong)}.archik-btn:disabled{opacity:.5;cursor:not-allowed}.archik-btn-primary{background:var(--archik-accent);border-color:var(--archik-accent);color:#050912}.archik-btn-primary:hover{background:var(--archik-accent-bright);border-color:var(--archik-accent-bright)}[data-theme=light] .archik-btn-primary{color:#fff}.archik-btn-danger{color:var(--archik-danger);border-color:var(--archik-danger);background:0 0;border-style:dashed}.archik-btn-danger:hover{background:var(--archik-danger);color:#050912;border-style:solid}.archik-pill{letter-spacing:.02em;border:1px solid #0000;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:11px;display:inline-flex}.archik-pill--info{color:var(--archik-accent);border-color:var(--archik-border-strong);background:var(--archik-accent)}@supports (color:color-mix(in lab,red,red)){.archik-pill--info{background:color-mix(in oklab,var(--archik-accent) 8%,transparent)}}.archik-pill--success{color:var(--archik-success);background:var(--archik-success)}@supports (color:color-mix(in lab,red,red)){.archik-pill--success{background:color-mix(in oklab,var(--archik-success) 12%,transparent)}}.archik-pill--warning{color:var(--archik-warning);background:var(--archik-warning)}@supports (color:color-mix(in lab,red,red)){.archik-pill--warning{background:color-mix(in oklab,var(--archik-warning) 14%,transparent)}}.archik-pill--danger{color:var(--archik-danger);background:var(--archik-danger)}@supports (color:color-mix(in lab,red,red)){.archik-pill--danger{background:color-mix(in oklab,var(--archik-danger) 14%,transparent)}}.archik-label{letter-spacing:.12em;text-transform:uppercase;color:var(--archik-fg-muted);margin-bottom:4px;font-size:10px;display:block}.archik-mono{color:var(--archik-fg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.archik-divider{border-top:1px solid var(--archik-border)}.archik-grid{background-color:var(--archik-canvas);background-image:radial-gradient(var(--archik-grid-minor) 1px,transparent 1px),radial-gradient(var(--archik-grid-major) 1px,transparent 1px);background-position:0 0,0 0;background-size:20px 20px,100px 100px}.archik-selected-glow{filter:drop-shadow(0 0 6px var(--archik-selected-glow)) drop-shadow(0 0 2px var(--archik-selected-glow));animation:1.8s ease-in-out infinite archikPulse}@keyframes archikPulse{0%,to{filter:drop-shadow(0 0 4px var(--archik-selected-glow)) drop-shadow(0 0 1px var(--archik-selected-glow))}50%{filter:drop-shadow(0 0 12px var(--archik-selected-glow)) drop-shadow(0 0 3px var(--archik-selected-glow))}}.archik-modal-overlay{z-index:50;background:var(--archik-canvas);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@supports (color:color-mix(in lab,red,red)){.archik-modal-overlay{background:color-mix(in oklab,var(--archik-canvas) 70%,transparent)}}.archik-modal-overlay{-webkit-backdrop-filter:blur(4px);animation:.14s ease-out archikFadeIn}.archik-modal{background:var(--archik-panel);border:1px solid var(--archik-border);width:360px;max-width:calc(100vw - 32px);box-shadow:0 12px 40px #00000059,0 0 0 1px var(--archik-border-strong);border-radius:8px;padding:16px;animation:.2s cubic-bezier(.2,.8,.2,1) archikModalIn}.archik-selected-outline{fill:none;stroke:var(--archik-selected);stroke-width:2px;pointer-events:none}@keyframes archikEdgeFlow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-16px}}.archik-edge-flowing{animation:1.4s linear infinite archikEdgeFlow}.archik-edge-flowing-fast{animation:.6s linear infinite archikEdgeFlow}@media(prefers-reduced-motion:reduce){.archik-edge-flowing,.archik-edge-flowing-fast{animation:none}}.archik-popover{background:var(--archik-panel);border:1px solid var(--archik-border-strong);border-radius:6px;flex-direction:column;max-height:min(80vh,600px);padding:4px;animation:.16s cubic-bezier(.2,.8,.2,1) archikModalIn;display:flex;overflow:hidden;box-shadow:0 12px 32px #00000059}.archik-menu-item{width:100%;color:var(--archik-fg);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:4px;align-items:center;gap:8px;padding:6px 10px;font-size:12px;display:flex}.archik-menu-item:hover{background:var(--archik-surface-hover)}.archik-menu-item--danger{color:var(--archik-danger)}@keyframes archikFadeIn{0%{opacity:0}to{opacity:1}}@keyframes archikModalIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}.archik-drawer-shell{flex-direction:column;min-width:0;transition:width .22s cubic-bezier(.2,.8,.2,1),opacity .2s,margin-left .22s cubic-bezier(.2,.8,.2,1);display:flex;overflow:hidden}.archik-drawer-shell--open{opacity:1;width:320px;margin-left:16px}.archik-drawer-shell--closed{opacity:0;pointer-events:none;width:0;margin-left:0}.archik-drawer-content{flex-shrink:0;width:320px;height:100%}.archik-drawer-fade{animation:.22s ease-out archikFadeIn}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
|
|
File without changes
|