@treble-app/cli 1.0.0 → 1.1.0

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 ADDED
@@ -0,0 +1,173 @@
1
+ # treble
2
+
3
+ Figma to production code. Syncs your design to disk, analyzes it with AI, builds every component, and visually verifies the result — all from your terminal.
4
+
5
+ ```bash
6
+ npm install -g @treble-app/cli
7
+ ```
8
+
9
+ ## How it works
10
+
11
+ ```mermaid
12
+ flowchart LR
13
+ A["🎨 Figma"] -->|treble sync| B["📁 Local files"]
14
+ B -->|/treble:plan| C["📋 Analysis"]
15
+ C -->|/treble:dev| D["⚡ Code"]
16
+ D -->|/treble:cms| E["🚀 Production"]
17
+ ```
18
+
19
+ 1. **`treble sync`** pulls your Figma frames to disk — screenshots, layer trees, and visual properties. No API calls after the first sync.
20
+ 2. **`/treble:plan`** reads the synced data and produces a component inventory with design tokens, build order, and responsive rules.
21
+ 3. **`/treble:dev`** classifies your design, picks the right stack, scaffolds the project, and runs the build loop.
22
+ 4. **`/treble:cms`** wires up content editability — Sanity, Prismic, or WordPress.
23
+
24
+ ### The build loop
25
+
26
+ Each component goes through a code → review → fix cycle until it matches the Figma reference:
27
+
28
+ ```mermaid
29
+ flowchart TD
30
+ A["Pick next component"] --> B["Generate code"]
31
+ B --> C["Screenshot implementation"]
32
+ C --> D{"Matches\nFigma?"}
33
+ D -- "No" --> B
34
+ D -- "Yes" --> E["Commit & advance"]
35
+ E --> A
36
+ ```
37
+
38
+ The output is a real project — `npm run dev` works, components match the Figma design, and the code follows feature-based architecture.
39
+
40
+ ## Quick start
41
+
42
+ ### 1. Install the Claude Code plugin
43
+
44
+ In [Claude Code](https://claude.ai/code):
45
+
46
+ ```
47
+ /install-plugin treble-app/cli
48
+ ```
49
+
50
+ ### 2. Install the CLI
51
+
52
+ ```bash
53
+ npm install -g @treble-app/cli
54
+ ```
55
+
56
+ ### 3. Authenticate with Figma
57
+
58
+ ```bash
59
+ treble login --pat
60
+ ```
61
+
62
+ ### 4. Go
63
+
64
+ ```
65
+ /treble:sync # Checks CLI + auth, helps you pick frames, syncs to disk
66
+ /treble:plan # Analyzes your design → component inventory + build order
67
+ /treble:dev # Picks the right stack, scaffolds, builds every component
68
+ /treble:cms # Wires up CMS (Sanity, Prismic, or WordPress)
69
+ ```
70
+
71
+ That's it. `/treble:sync` handles initialization, frame selection, and preflight checks — it will tell you if anything is missing.
72
+
73
+ ## CLI reference
74
+
75
+ ```bash
76
+ treble login --pat # Store Figma personal access token
77
+ treble login # OAuth via treble.build (if available)
78
+ treble status # Check auth + project state
79
+ treble status --json # Machine-readable (for agents)
80
+ treble init --figma "FIGMA_URL_OR_KEY" # Initialize .treble/ in current directory
81
+ treble sync # Pull all Figma frames to disk
82
+ treble sync -i # Interactive frame picker (TUI)
83
+ treble sync --frame "Contact" # Sync one frame by name
84
+ treble sync --page "Homepage" # Sync all frames from one page
85
+ treble sync --force # Re-sync even if already cached
86
+ treble tree "Contact" # Layer outline (top-level)
87
+ treble tree "Contact" --depth 3 # Layer outline (3 levels deep)
88
+ treble tree "Contact" --verbose # With fills, fonts, layout, radius
89
+ treble tree "Contact" --root "55:1234" # Subtree from a specific node
90
+ treble tree "Contact" --root "55:1234" --json # Machine-readable output
91
+ treble show "NavBar" --frame "Contact" # Render a node as PNG
92
+ treble show "55:1234" # Render by node ID
93
+ treble extract # Extract image assets from synced frames
94
+ ```
95
+
96
+ ## Plugin commands
97
+
98
+ These run inside Claude Code with the treble plugin installed:
99
+
100
+ | Command | What it does |
101
+ |---------|-------------|
102
+ | `/treble:sync` | Preflight checks, smart frame selection, sync Figma to disk |
103
+ | `/treble:plan` | Analyze synced Figma data → component inventory, design tokens, build order |
104
+ | `/treble:dev` | Classify design → pick stack → scaffold → build loop with visual review |
105
+ | `/treble:cms` | Wire up CMS editability (Sanity, Prismic, or WordPress) |
106
+ | `/treble:tree` | Interactive layer outline explorer |
107
+ | `/treble:show` | Render a specific Figma node as a screenshot |
108
+ | `/treble:compare` | Visual comparison between Figma reference and implementation |
109
+
110
+ ## Supported stacks
111
+
112
+ **Deployment targets** (chosen during `/treble:dev`):
113
+
114
+ | Target | UI Library | Best for |
115
+ |--------|-----------|----------|
116
+ | Next.js | shadcn/ui + Tailwind | Apps, marketing sites, e-commerce — works for everything |
117
+ | Astro | shadcn/ui + Tailwind | Content-heavy sites, blogs, portfolios |
118
+ | WordPress | Basecoat + Tailwind | WordPress hosting, existing WP infrastructure |
119
+
120
+ **CMS integrations** (wired during `/treble:cms`):
121
+
122
+ | CMS | Works with | Setup |
123
+ |-----|-----------|-------|
124
+ | Sanity | Next.js, Astro | TypeScript schemas, embedded Studio |
125
+ | Prismic | Next.js, Astro | Slice Machine, slice-based editing |
126
+ | WordPress | WordPress | Gutenberg blocks, ACF fields |
127
+
128
+ ## What gets synced to disk
129
+
130
+ ```
131
+ .treble/
132
+ ├── config.toml # Figma file key
133
+ ├── analysis.json # AI analysis output (components, design system, build order)
134
+ ├── build-state.json # Build progress + deployment config
135
+ └── figma/
136
+ ├── manifest.json # Frame inventory
137
+ └── {frame-slug}/
138
+ ├── reference.png # Full frame screenshot
139
+ ├── nodes.json # Complete layer tree with visual properties
140
+ ├── sections/ # Section-level screenshots
141
+ └── snapshots/ # On-demand screenshots
142
+ ```
143
+
144
+ All Figma data lives on disk after `treble sync`. The AI agents read local files — no API calls during planning or building.
145
+
146
+ ## CLI without the plugin
147
+
148
+ The CLI works standalone as a Figma development tool:
149
+
150
+ - `treble sync` — snapshot your design to disk
151
+ - `treble tree` — inspect layer hierarchy with visual properties
152
+ - `treble show` — render any node as a PNG
153
+ - `treble extract` — pull image assets
154
+
155
+ You just won't get the AI-powered analysis and code generation.
156
+
157
+ ## Plugin without the CLI
158
+
159
+ The plugin needs the CLI to access Figma data. If the CLI isn't installed, the plugin will warn you on session start:
160
+
161
+ ```
162
+ WARNING: treble CLI not found. Install it: npm install -g @treble-app/cli
163
+ ```
164
+
165
+ ## Requirements
166
+
167
+ - Node.js 18+
168
+ - [Claude Code](https://claude.ai/code) (for the plugin)
169
+ - A Figma account with a [personal access token](https://www.figma.com/settings)
170
+
171
+ ## License
172
+
173
+ MIT
Binary file
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@treble-app/cli-darwin-arm64",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "treble CLI binary for macOS ARM64",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
8
- "url": "git+https://github.com/treble-app/treble-cli.git"
8
+ "url": "git+https://github.com/treble-app/cli.git"
9
9
  },
10
10
  "os": [
11
11
  "darwin"
Binary file
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@treble-app/cli-darwin-x64",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "treble CLI binary for macOS x64",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
8
- "url": "git+https://github.com/treble-app/treble-cli.git"
8
+ "url": "git+https://github.com/treble-app/cli.git"
9
9
  },
10
10
  "os": [
11
11
  "darwin"
Binary file
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@treble-app/cli-linux-arm64",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "treble CLI binary for Linux ARM64",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
8
- "url": "git+https://github.com/treble-app/treble-cli.git"
8
+ "url": "git+https://github.com/treble-app/cli.git"
9
9
  },
10
10
  "os": [
11
11
  "linux"
Binary file
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@treble-app/cli-linux-x64",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "treble CLI binary for Linux x64",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
8
- "url": "git+https://github.com/treble-app/treble-cli.git"
8
+ "url": "git+https://github.com/treble-app/cli.git"
9
9
  },
10
10
  "os": [
11
11
  "linux"
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "name": "@treble-app/cli",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Figma-to-code CLI — plan, implement, compare",
5
5
  "author": "treble.build",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
9
- "url": "git+https://github.com/treble-app/treble-cli.git"
9
+ "url": "git+https://github.com/treble-app/cli.git"
10
10
  },
11
11
  "homepage": "https://treble.build",
12
12
  "bugs": {
13
- "url": "https://github.com/treble-app/treble-cli/issues"
13
+ "url": "https://github.com/treble-app/cli/issues"
14
14
  },
15
15
  "keywords": [
16
16
  "cli",
@@ -27,14 +27,13 @@
27
27
  "npm"
28
28
  ],
29
29
  "scripts": {
30
- "test": "cargo test",
31
- "postinstall": "node scripts/postinstall.js"
30
+ "test": "cargo test"
32
31
  },
33
32
  "optionalDependencies": {
34
- "@treble-app/cli-darwin-arm64": "1.0.0",
35
- "@treble-app/cli-darwin-x64": "1.0.0",
36
- "@treble-app/cli-linux-x64": "1.0.0",
37
- "@treble-app/cli-linux-arm64": "1.0.0"
33
+ "@treble-app/cli-darwin-arm64": "1.1.0",
34
+ "@treble-app/cli-darwin-x64": "1.1.0",
35
+ "@treble-app/cli-linux-x64": "1.1.0",
36
+ "@treble-app/cli-linux-arm64": "1.1.0"
38
37
  },
39
38
  "devDependencies": {
40
39
  "@commitlint/cli": "^19.0.0",