rivet-design 0.9.5 → 0.9.7

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.
Files changed (50) hide show
  1. package/dist/mcp/agent-variants/SessionStore.d.ts +10 -2
  2. package/dist/mcp/agent-variants/SessionStore.d.ts.map +1 -1
  3. package/dist/mcp/agent-variants/SessionStore.js +82 -22
  4. package/dist/mcp/agent-variants/SessionStore.js.map +1 -1
  5. package/dist/mcp/agent-variants/WorktreeOrchestrator.d.ts +4 -0
  6. package/dist/mcp/agent-variants/WorktreeOrchestrator.d.ts.map +1 -1
  7. package/dist/mcp/agent-variants/WorktreeOrchestrator.js +432 -37
  8. package/dist/mcp/agent-variants/WorktreeOrchestrator.js.map +1 -1
  9. package/dist/mcp/agent-variants/contracts.d.ts +389 -129
  10. package/dist/mcp/agent-variants/contracts.d.ts.map +1 -1
  11. package/dist/mcp/agent-variants/contracts.js +90 -36
  12. package/dist/mcp/agent-variants/contracts.js.map +1 -1
  13. package/dist/mcp/agent-variants/createZeroToOneTool.d.ts +32 -13
  14. package/dist/mcp/agent-variants/createZeroToOneTool.d.ts.map +1 -1
  15. package/dist/mcp/agent-variants/createZeroToOneTool.js +1 -1
  16. package/dist/mcp/agent-variants/createZeroToOneTool.js.map +1 -1
  17. package/dist/mcp/agent-variants/tools.d.ts.map +1 -1
  18. package/dist/mcp/agent-variants/tools.js +9 -2
  19. package/dist/mcp/agent-variants/tools.js.map +1 -1
  20. package/dist/mcp/server.d.ts.map +1 -1
  21. package/dist/mcp/server.js +30 -2
  22. package/dist/mcp/server.js.map +1 -1
  23. package/dist/routes/agentVariants.d.ts.map +1 -1
  24. package/dist/routes/agentVariants.js +120 -37
  25. package/dist/routes/agentVariants.js.map +1 -1
  26. package/dist/routes/mcp.d.ts.map +1 -1
  27. package/dist/routes/mcp.js +175 -5
  28. package/dist/routes/mcp.js.map +1 -1
  29. package/dist/services/VariantHistoryService.d.ts +64 -1
  30. package/dist/services/VariantHistoryService.d.ts.map +1 -1
  31. package/dist/services/VariantHistoryService.js +148 -18
  32. package/dist/services/VariantHistoryService.js.map +1 -1
  33. package/dist/types/change-request-types.d.ts +67 -0
  34. package/dist/types/change-request-types.d.ts.map +1 -1
  35. package/dist/utils/skills/claude-skill.d.ts +1 -1
  36. package/dist/utils/skills/claude-skill.js +1 -1
  37. package/dist/utils/skills/cursor-rules.d.ts +1 -1
  38. package/dist/utils/skills/cursor-rules.js +1 -1
  39. package/dist/utils/skills/describe-motion-protocol.d.ts +11 -0
  40. package/dist/utils/skills/describe-motion-protocol.d.ts.map +1 -0
  41. package/dist/utils/skills/describe-motion-protocol.js +216 -0
  42. package/dist/utils/skills/describe-motion-protocol.js.map +1 -0
  43. package/dist/utils/skills/shared-variants-protocol.d.ts.map +1 -1
  44. package/dist/utils/skills/shared-variants-protocol.js +23 -17
  45. package/dist/utils/skills/shared-variants-protocol.js.map +1 -1
  46. package/package.json +2 -1
  47. package/src/ui/dist/assets/main-BZEruoyc.css +1 -0
  48. package/src/ui/dist/assets/{main-SuZlKEi0.js → main-CIqMI5Le.js} +65 -65
  49. package/src/ui/dist/index.html +2 -2
  50. package/src/ui/dist/assets/main-OdmwI8Od.css +0 -1
@@ -0,0 +1,216 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DESCRIBE_MOTION_PROTOCOL = void 0;
4
+ /**
5
+ * Reusable protocol for turning a video (or other motion artifact) into a
6
+ * structured motion spec the variants flow can consume. Imported by the
7
+ * shared variants protocol so Claude Code and Cursor receive the same
8
+ * instructions. Adapted from the standalone `describe-motion` Claude Code
9
+ * skill; this version is trimmed for Rivet's video-input path and emits
10
+ * the spec in a shape that drops cleanly into a `motionBrief`
11
+ * sourceArtifact.
12
+ */
13
+ exports.DESCRIBE_MOTION_PROTOCOL = `### Describe Motion protocol (video / motion artifact -> motionBrief)
14
+
15
+ Use this protocol when the user attaches a video, gif, screen recording, or
16
+ frame sequence to a variants request. The output is a structured motion spec
17
+ the agent passes back to Rivet as a \`sourceArtifacts\` entry with
18
+ \`kind: 'motionBrief'\`. Run this BEFORE \`start_variants\` so the spec is
19
+ available to per-variant briefs and codegen.
20
+
21
+ If the user provided ONLY a static image or a URL, this protocol is the wrong
22
+ tool — describe the image as \`visualBrief\` / \`screenshotNotes\` instead.
23
+
24
+ #### Step 1 — Get frames you can inspect
25
+
26
+ Guessing from memory of a single playback is the most common failure mode.
27
+ Pull stills before describing anything.
28
+
29
+ - **Video (.mov/.mp4/.webm):** \`ffmpeg -i <input> -vf "fps=30" frames/%04d.png\`
30
+ to step through, or \`ffmpeg -i <input> -ss <timestamp> -frames:v 1 frame.png\`
31
+ for a single frame around a state change.
32
+ - **GIF:** \`magick <input> -coalesce frames/%04d.png\` (ImageMagick) for
33
+ per-frame stills.
34
+ - **Unknown framerate:** assume 30 or 60fps. 33ms per frame at 30fps,
35
+ 16ms per frame at 60fps. Multiply frame count between state-change
36
+ boundaries to get duration.
37
+ - **Frame sequence already supplied:** read every frame. The middle frames
38
+ carry the easing.
39
+
40
+ If you cannot extract frames in the current environment, say so explicitly in
41
+ the spec and mark timing / easing fields with \`~estimated\`.
42
+
43
+ #### Step 2 — Five-phase pass
44
+
45
+ Run these in order. Later phases depend on earlier observations.
46
+
47
+ 1. **Elements & trigger.** Which DOM nodes change between frames, what
48
+ initiates the motion (\`hover\`, \`click\`, \`focus\`, \`mount\`, \`unmount\`,
49
+ \`scroll\`, \`intersection\`, \`drag\`, \`route change\`, \`state change\`,
50
+ \`keypress\`), and the direction (entrance / exit / hover / toggle / loop).
51
+ 2. **States.** Enumerate discrete states. Most interactions are A -> B
52
+ or A -> B -> A. Some have intermediates (idle -> loading -> success).
53
+ For each state, note every property that will animate.
54
+ 3. **Per-property motion.** For each animated property on each element:
55
+ - **Property** — prefer compositor-friendly (\`transform\`, \`opacity\`).
56
+ - **From -> to** — concrete values (\`opacity: 0 -> 1\`, \`translateY: 8px -> 0\`).
57
+ - **Duration** — milliseconds, measured from frame count. Round to common
58
+ UI durations when within 1 frame: 150, 200, 250, 300, 400, 500ms.
59
+ - **Easing** — identify by shape (see easing guide below), not by guessing
60
+ a cubic-bezier from memory.
61
+ - **Delay** — t=0 or later?
62
+ 4. **Choreography.** How per-property animations relate across elements:
63
+ parallel (default), sequence (B starts after A), stagger (siblings with a
64
+ fixed offset — note interval and direction), overlap (B starts before A
65
+ finishes — note overlap duration), anchor / transform origin if non-default.
66
+ 5. **Edge cases & quality.** Cover all of these, even if the answer is
67
+ "not visible in artifact — recommend default":
68
+ - **Reduced motion** — what \`prefers-reduced-motion: reduce\` should do.
69
+ Default: skip transforms, keep opacity, shorten to ~0ms.
70
+ - **Interrupt** — re-trigger mid-animation: snap, reverse from current,
71
+ or queue?
72
+ - **Exit symmetry** — is the exit the reverse of the entrance, or different?
73
+ - **Loop** — one-shot, loop, ping-pong, or on-demand?
74
+ - **Performance flags** — any property that would force layout
75
+ (\`height\`, \`width\`, \`top\`)? Flag and suggest a transform alternative
76
+ if visually equivalent.
77
+
78
+ #### Easing identification guide
79
+
80
+ Watch the speed across the animation, not just the endpoints.
81
+
82
+ - **Linear** — constant speed. Mechanical-feeling. Rare in good UI.
83
+ - **Ease-out** — fast start, slow end. Most common entrance.
84
+ - **Ease-in** — slow start, fast end. Best for exits.
85
+ - **Ease-in-out** — slow-fast-slow. For transitions between two non-home states.
86
+ - **Spring** — overshoots, then settles. Look for any frame where the element
87
+ passes its final position. Springs cross the target; ease-out approaches
88
+ monotonically.
89
+ - **Back-out / overshoot** — ease-out with a slight overshoot before settling.
90
+
91
+ #### Library recommendation
92
+
93
+ Pick one based on what you observed; the downstream codegen may override.
94
+
95
+ - **CSS transitions** — simple state change, single property, no interrupt
96
+ complexity.
97
+ - **CSS keyframes** — loops, multi-step sequences with fixed timing.
98
+ - **Framer Motion** — springs, gestures, layout animations, exit animations
99
+ via \`AnimatePresence\`, stagger via \`staggerChildren\`.
100
+ - **React Spring** — physics-driven motion where spring feel matters more
101
+ than precise timing.
102
+ - **GSAP** — complex sequences, timeline choreography, SVG morphing.
103
+ - **Native View Transitions API** — page / route transitions where browser
104
+ support allows.
105
+
106
+ #### Spec template (the motionBrief \`content\` payload)
107
+
108
+ Always produce this exact shape. If a field is not observable, write
109
+ \`not visible in artifact\` — do not omit the field. The content string is
110
+ what you pass as \`sourceArtifacts[i].content\`.
111
+
112
+ \`\`\`
113
+ # Motion spec: <short name>
114
+
115
+ ## Source
116
+ - Artifact: <filename or description>
117
+ - Input type: video | gif | recording | frame-sequence
118
+ - Frames inspected: <count or "single playback only">
119
+ - Estimated framerate: <30 | 60 | unknown>
120
+
121
+ ## Trigger
122
+ - Event: <hover | click | mount | scroll | intersection | ...>
123
+ - Element receiving event: <selector or description>
124
+
125
+ ## Elements animated
126
+ 1. <element name> — role in interaction
127
+ 2. ...
128
+
129
+ ## States
130
+ - A (initial): <description>
131
+ - B (final): <description>
132
+ - (intermediate states if any)
133
+
134
+ ## Per-property motion
135
+ ### <element 1>
136
+ - \\\`<property>\\\`: <from> -> <to>, duration <ms>, easing <type>, delay <ms>
137
+ - ...
138
+
139
+ ### <element 2>
140
+ - ...
141
+
142
+ ## Choreography
143
+ - <parallel | sequence | stagger | overlap with details>
144
+ - Transform origin: <if non-default>
145
+
146
+ ## Edge cases
147
+ - Reduced motion: <behavior>
148
+ - Interrupt: <snap | reverse | queue>
149
+ - Exit: <symmetric reverse | different — describe>
150
+ - Loop: <one-shot | loop | ping-pong>
151
+ - Performance flags: <any layout-thrashing properties>
152
+
153
+ ## Recommended implementation
154
+ - Library: <css | framer-motion | gsap | react-spring | view-transitions>
155
+ - Reason: <one line>
156
+
157
+ ## Confidence
158
+ - High / Medium / Low on: <which fields>
159
+ - Estimates flagged with ~ in the spec above
160
+ \`\`\`
161
+
162
+ #### Working principles
163
+
164
+ - **Numbers over adjectives.** "Fast" is useless; "180ms" is implementable.
165
+ If you cannot get a number, write \`~estimated\` and a range.
166
+ - **Frame counting beats vibes.** Snappy ~ 150-250ms; deliberate ~ 300-500ms.
167
+ Measure when you can.
168
+ - **Identify easing by shape, not by name.** Watch where the element sits
169
+ at 25%, 50%, 75% of the duration. Even spacing = linear. Compressed at
170
+ the end = ease-out.
171
+ - **Distinguish observed from inferred.** Anything not seen in the artifact
172
+ is inference. Mark it.
173
+ - **One spec per interaction.** If the video shows three interactions,
174
+ produce three motionBrief entries, not one merged blob.
175
+
176
+ #### Handing the spec back to Rivet
177
+
178
+ Pass each finished spec as one entry in \`sourceArtifacts\`:
179
+
180
+ \`\`\`
181
+ sourceArtifacts: [
182
+ {
183
+ kind: 'motionBrief',
184
+ label: '<short interaction name, <= 60 chars>',
185
+ content: '<the full spec from the template above>',
186
+ },
187
+ // ... one entry per distinct interaction in the video
188
+ ]
189
+ \`\`\`
190
+
191
+ **Routing.** A request that carries any \`sourceArtifacts\` (motionBrief,
192
+ visualBrief, screenshotNotes, siteBrief, urlText) is source-grounded.
193
+ Source-grounded fresh-project sessions go through
194
+ \`create_zero_to_one_project\` — its tool description explicitly lists
195
+ \`motionBrief\` alongside the other artifact kinds. Pass the artifacts under
196
+ \`sourceContext.sourceArtifacts\` on that call.
197
+
198
+ Do **NOT** call \`start_variants({ mode: 'zero_to_one' })\` directly with a
199
+ \`sourceContext\` containing any \`sourceArtifacts\` — that handler rejects
200
+ the request with \`INVALID_STAGE_ACTION\` and instructs you to use
201
+ \`create_zero_to_one_project\` instead, because the source-research
202
+ (\`source_plan\`) and brief-approval hops are only wired into the
203
+ \`create_zero_to_one_project\` path. \`start_variants(mode='zero_to_one')\`
204
+ is for prompt-only fresh projects.
205
+
206
+ If the video is supplementary to an existing project (the user wants
207
+ variants of a specific element / file / route in their open project and
208
+ attached a video for motion reference), use
209
+ \`start_variants({ mode: 'existing', target: ... })\` instead and embed the
210
+ motion spec into each variant's \`briefs[i].body\` — \`sourceArtifacts\` are
211
+ not part of the existing-project flow.
212
+
213
+ Per-variant briefs and codegen should treat the motionBrief as authoritative
214
+ timing / easing / choreography guidance — visual styling can diverge per
215
+ variant, motion fidelity should not.`;
216
+ //# sourceMappingURL=describe-motion-protocol.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"describe-motion-protocol.js","sourceRoot":"","sources":["../../../src/utils/skills/describe-motion-protocol.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;GAQG;AACU,QAAA,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA0MH,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"shared-variants-protocol.d.ts","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAGgF,CAAC;AAEtH,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,mzBAQoK,CAAC;AAExM;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE;IAC9C,2DAA2D;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,8FAA8F;IAC9F,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,MAAM,CAsGT"}
1
+ {"version":3,"file":"shared-variants-protocol.d.ts","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAGgF,CAAC;AAEtH,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,mzBAQoK,CAAC;AAExM;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE;IAC9C,2DAA2D;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,8FAA8F;IAC9F,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,MAAM,CA2GT"}
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.PICKING_THE_FLOW_TABLE = exports.BRIEF_FORMAT_INSTRUCTION = void 0;
4
4
  exports.buildAgentVariantsSection = buildAgentVariantsSection;
5
+ const describe_motion_protocol_1 = require("./describe-motion-protocol");
5
6
  /**
6
7
  * Canonical brief format instruction — single source of truth.
7
8
  * Imported by claude-skill.ts, cursor-rules.ts, and tools.ts so the
@@ -87,30 +88,35 @@ For brand-new projects the user describes from scratch ("build me a Vite todo ap
87
88
 
88
89
  ---
89
90
 
90
- ### Sub-flow C: Fresh project (source-grounded) — \`extract_inspiration_context\` → \`start_variants({ mode: 'zero_to_one' })\`
91
+ ### Sub-flow C: Fresh project (source-grounded) — \`create_zero_to_one_project\`
91
92
 
92
- For brand-new projects where the user provides inspiration URLs ("build me a dashboard like stripe.com"), reference designs, or custom design context. Two calls total no in-chat approval gate, no multi-step brief protocol.
93
+ **Trigger:** the user provided inspiration URLs ("like stripe.com"), attached an image in chat (pasted screenshot/mockup), attached a video/gif/screen recording ("match this animation", "build the hover from this clip"), referenced an image or video file path (e.g. \`~/Desktop/mockup.png\`, \`~/Desktop/hover.mov\`), or supplied written design context. Image-only and video-only requests with no URLs are valid and belong in this sub-flow do not fall back to Sub-flow B.
93
94
 
94
- 1. **Call \`extract_inspiration_context\`** with:
95
+ Use \`create_zero_to_one_project\` for this sub-flow. \`start_variants({ mode: 'zero_to_one' })\` rejects any request whose \`sourceContext\` carries \`sourceUrls\`, \`sourceArtifacts\`, or \`sourceIntent\` — that handler is prompt-only (Sub-flow B). The source-research and brief-approval hops are only wired into \`create_zero_to_one_project\`.
96
+
97
+ 1. **Call \`create_zero_to_one_project\`** with:
95
98
  - \`prompt\`: the user's request verbatim
96
- - \`count\`: the same value you plan to pass to \`start_variants\`
97
- - \`urls\`: every inspiration URL the user provided
98
- - \`preserveBrand\` (optional): true when the user wants brand colors/type/voice preserved exactly
99
- - \`sourceArtifacts\` (optional): pasted briefs, screenshot notes, or written design context
99
+ - \`framework\` (optional, defaults to \`'vite'\`)
100
+ - \`destinationParent\` (optional, absolute path)
101
+ - \`sourceContext\`:
102
+ - \`sourceUrls\` (optional): every inspiration URL the user provided
103
+ - \`preserveBrand\` (optional): true when the user wants brand colors/type/voice preserved exactly
104
+ - \`sourceArtifacts\` (optional): pasted briefs, screenshot notes, written design context, **agent-described images**, OR **agent-described videos**. If the user attached one or more images in chat OR referenced an image file path: for path references, open the file with your \`Read\` tool first; then in both cases describe what you see — layout, colour palette, typography, component patterns, voice — and pass each image as a \`sourceArtifacts\` entry with \`kind: 'visualBrief'\` (overall design system) or \`kind: 'screenshotNotes'\` (specific screen). If the user attached a video, gif, screen recording, or frame sequence OR referenced a video file path: run the **Describe Motion protocol** (see section below) to extract a structured motion spec, and pass each spec as a \`sourceArtifacts\` entry with \`kind: 'motionBrief'\`. One \`motionBrief\` per distinct interaction in the video — do not merge multiple interactions into one entry. Do not invent a URL for an image or video. \`sourceArtifacts\` can fully replace \`sourceUrls\` — image-only and video-only calls (no URLs) are supported.
100
105
 
101
- Rivet fetches each URL server-side, extracts per-slot design context, and returns \`{ designContext, warnings, sourceContext }\`. Surface any \`warnings\` to the user (e.g. "couldn't fetch site X — proceeding without it").
106
+ Response (source-grounded): \`{ sessionId, stage: 'awaiting_source_plan', sourcePlanWorkItem, nextAction: 'continue_variants', visualEditor? }\`. Share \`visualEditor.url\` with the user immediately.
102
107
 
103
- 2. **Call \`start_variants\`** with:
104
- - \`prompt\`, \`mode: 'zero_to_one'\`
105
- - \`briefs\`: an array of N \`{ label, body }\` objects, one per variant. \`briefs.length\` sets the variant count (3-5, default 4) do NOT also pass \`count\`. ${exports.BRIEF_FORMAT_INSTRUCTION} Bodies should diverge per slot based on the \`designContext\` from step 1; do NOT copy the user's prompt verbatim.
106
- - \`framework\` (optional, defaults to \`'vite'\`)
107
- - \`destinationParent\` (optional)
108
- - \`designContext\`: the array returned by step 1
109
- - \`sourceContext\`: the object returned by step 1 (forward as-is)
108
+ 2. **Process the source_plan work item.** Classify the inspiration sources, produce per-slot DESIGN.md, and choose \`executionPlan.mode\`:
109
+ - DESIGN.md per slot matches the bundled catalog shape under \`src/services/templates/designmd/*.md\` (Visual Theme & Atmosphere → Color Palette & Roles → Typography Rules → Component Stylings → Layout Principles → Depth & Elevation → Do's & Don'ts → Responsive Behavior → Agent Prompt Guide). For sections you cannot determine from the source, write \`Not observed\` rather than inventing values.
110
+ - When a \`motionBrief\` is present, fold its timing / easing / choreography into the **Component Stylings** and any motion-related guidance sections of the matching DESIGN.md slot, and treat the motionBrief as authoritative for those properties visual styling can diverge per variant, motion fidelity should not.
111
+ - \`executionPlan.mode\`: \`vite_app\` for requests needing large assets / Three.js / package dependencies / routing; \`static_preview\` for self-contained HTML/CSS/JS prototypes. If ambiguous, set \`executionPlan.userQuestion\` instead of guessing — Rivet surfaces it as a clarification blocker.
110
112
 
111
- Same response shape as Sub-flow B — \`{ sessionId, stage: 'work_items_ready', leaseId, variants, destinationPath, visualEditor? }\`. No \`awaiting_briefs\`/\`awaiting_approval\`, no in-chat approval gate.
113
+ 3. **Call \`report_source_plan\`** with \`{ sessionId, workItemId, leaseId, attempt, sourcePlan }\`. Response: \`{ stage: 'awaiting_briefs', briefWorkItem, executionPlan, nextAction: 'report_variant_briefs' }\`.
114
+
115
+ 4. **From here, follow the brief-approval gate from Sub-flow A** (\`report_variant_briefs\` with N briefs, show in chat, \`approve_variant_briefs\` with \`confirmedByUser: true\` after the user confirms, then \`continue_variants({ action: 'request_work' })\`). Work items are \`static_preview\` or \`code_gen\` depending on \`executionPlan.mode\`. On commit, the apply payload is \`payload.kind === 'project-created'\` — the server materialized the chosen variant to \`destinationPath\`.
116
+
117
+ ---
112
118
 
113
- 3. **From here, follow Sub-flow B step 2** (parallel code-gen with the shared \`leaseId\`, then ready, watch, apply). The work items are \`static_preview\`, output is self-contained HTML/CSS/JS, and the apply payload is \`payload.kind === 'project-created'\`.
119
+ ${describe_motion_protocol_1.DESCRIBE_MOTION_PROTOCOL}
114
120
 
115
121
  ---
116
122
 
@@ -1 +1 @@
1
- {"version":3,"file":"shared-variants-protocol.js","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":";;;AAyBA,8DA+GC;AAxID;;;;GAIG;AACU,QAAA,wBAAwB,GACnC,kGAAkG;IAClG,0FAA0F;IAC1F,mHAAmH,CAAC;AAEtH,0DAA0D;AAC7C,QAAA,sBAAsB,GAAG;;;;;;;;uMAQiK,CAAC;AAExM;;;GAGG;AACH,SAAgB,yBAAyB,CAAC,IASzC;IACC,OAAO;;oMAE2L,IAAI,CAAC,cAAc,uJAAuJ,IAAI,CAAC,cAAc;;;;;;;;;;;;;;uKAc1N,gCAAwB;;;;;;;KAO1L,IAAI,CAAC,KAAK;;;;;;;;;;;KAWV,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;uKAiBiJ,gCAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;uKA0BxB,gCAAwB;;;;;;;;;;;;;;0CAcrJ,IAAI,CAAC,cAAc;;;;;;;;;oMASuI,CAAC;AACrM,CAAC"}
1
+ {"version":3,"file":"shared-variants-protocol.js","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":";;;AA2BA,8DAoHC;AA/ID,yEAAsE;AAEtE;;;;GAIG;AACU,QAAA,wBAAwB,GACnC,kGAAkG;IAClG,0FAA0F;IAC1F,mHAAmH,CAAC;AAEtH,0DAA0D;AAC7C,QAAA,sBAAsB,GAAG;;;;;;;;uMAQiK,CAAC;AAExM;;;GAGG;AACH,SAAgB,yBAAyB,CAAC,IASzC;IACC,OAAO;;oMAE2L,IAAI,CAAC,cAAc,uJAAuJ,IAAI,CAAC,cAAc;;;;;;;;;;;;;;uKAc1N,gCAAwB;;;;;;;KAO1L,IAAI,CAAC,KAAK;;;;;;;;;;;KAWV,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;uKAiBiJ,gCAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC7L,mDAAwB;;;;;;0CAMgB,IAAI,CAAC,cAAc;;;;;;;;;oMASuI,CAAC;AACrM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rivet-design",
3
- "version": "0.9.5",
3
+ "version": "0.9.7",
4
4
  "description": "Local visual web development tool with AI-powered code modification",
5
5
  "main": "dist/index.js",
6
6
  "workspaces": [
@@ -40,6 +40,7 @@
40
40
  "bench:run": "tsx benchmarks/runner.ts",
41
41
  "bench:review": "tsx benchmarks/review/server.ts",
42
42
  "bench:list": "tsx benchmarks/list.ts",
43
+ "smoke:mcp": "node scripts/smoke-mcp-tools.mjs",
43
44
  "check:pre-commit": "npx lint-staged && yarn build && cd src/ui && yarn typecheck && cd ../.. && cd src/proxy && yarn build && cd ../.. && cd desktop/renderer && yarn build && cd ../..",
44
45
  "check:pre-push": "yarn test",
45
46
  "desktop": "yarn build && cd desktop && yarn dev",
@@ -0,0 +1 @@
1
+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media(min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media(min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media(min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media(min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media(min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.-right-0\.5{right:-.125rem}.-right-1{right:-.25rem}.-top-0\.5{top:-.125rem}.-top-1{top:-.25rem}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-4{left:1rem}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-3{right:.75rem}.right-6{right:1.5rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.top-2\.5{top:.625rem}.top-3{top:.75rem}.top-4{top:1rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[47\]{z-index:47}.z-\[48\]{z-index:48}.z-\[60\]{z-index:60}.z-comment-preview{z-index:55}.z-max{z-index:999999}.z-tooltip{z-index:70}.z-ui-primary{z-index:50}.order-1{order:1}.order-2{order:2}.col-start-1{grid-column-start:1}.row-start-1{grid-row-start:1}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.-ml-2\.5{margin-left:-.625rem}.-mr-0\.5{margin-right:-.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-1\.5{margin-left:.375rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-\[1px\]{margin-top:1px}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.hidden{display:none}.aspect-\[4\/3\]{aspect-ratio:4/3}.h-0{height:0px}.h-10{height:2.5rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-44{height:11rem}.h-5{height:1.25rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-80{height:20rem}.h-96{height:24rem}.h-\[450px\]{height:450px}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-10{max-height:2.5rem}.max-h-20{max-height:5rem}.max-h-24{max-height:6rem}.max-h-28{max-height:7rem}.max-h-32{max-height:8rem}.max-h-36{max-height:9rem}.max-h-40{max-height:10rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-96{max-height:24rem}.max-h-\[80vh\]{max-height:80vh}.min-h-0{min-height:0px}.min-h-\[2\.5rem\]{min-height:2.5rem}.min-h-screen{min-height:100vh}.w-0{width:0px}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[1px\]{width:1px}.w-\[280px\]{width:280px}.w-\[380px\]{width:380px}.w-\[420px\]{width:420px}.w-\[480px\]{width:480px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0px}.min-w-4{min-width:1rem}.min-w-\[140px\]{min-width:140px}.max-w-7xl{max-width:80rem}.max-w-\[180px\]{max-width:180px}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.max-w-\[80\%\]{max-width:80%}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes token-highlight{0%{transform:scale(1.05);box-shadow:0 0 0 2px #facc15,0 0 0 6px #facc1580}50%{transform:scale(1.02);box-shadow:0 0 0 2px #facc15,0 0 0 8px #facc1599}to{transform:scale(1);box-shadow:0 0 #facc1500,0 0 #facc1500}}.animate-token-highlight{animation:token-highlight 1.5s ease-in-out}.cursor-auto{cursor:auto}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[80px_1fr\]{grid-template-columns:80px 1fr}.grid-cols-\[80px_1fr_auto\]{grid-template-columns:80px 1fr auto}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-main-border>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(35 35 40 / var(--tw-divide-opacity, 1))}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[1px\]{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-b-\[1px\]{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-\[4px\]{border-left-width:4px}.border-r-0{border-right-width:0px}.border-r-\[4px\]{border-right-width:4px}.border-t,.border-t-\[1px\]{border-top-width:1px}.border-t-\[6px\]{border-top-width:6px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-content-muted\/30{border-color:#d1d5db4d}.border-content-muted\/40{border-color:#d1d5db66}.border-divider{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-main-border{--tw-border-opacity: 1;border-color:rgb(35 35 40 / var(--tw-border-opacity, 1))}.border-primary{--tw-border-opacity: 1;border-color:rgb(255 51 0 / var(--tw-border-opacity, 1))}.border-primary-border{--tw-border-opacity: 1;border-color:rgb(255 107 53 / var(--tw-border-opacity, 1))}.border-primary\/30{border-color:#ff33004d}.border-transparent{border-color:transparent}.border-white\/10{border-color:#ffffff1a}.border-white\/20{border-color:#fff3}.border-l-transparent{border-left-color:transparent}.border-r-transparent{border-right-color:transparent}.border-t-transparent{border-top-color:transparent}.bg-\[\#1c1c20\]{--tw-bg-opacity: 1;background-color:rgb(28 28 32 / var(--tw-bg-opacity, 1))}.bg-accent-error{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-accent-success{--tw-bg-opacity: 1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-black\/40{background-color:#0006}.bg-black\/45{background-color:#00000073}.bg-black\/50{background-color:#00000080}.bg-divider{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.bg-divider\/20{background-color:#4b556333}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-main{--tw-bg-opacity: 1;background-color:rgb(28 28 32 / var(--tw-bg-opacity, 1))}.bg-main-border{--tw-bg-opacity: 1;background-color:rgb(35 35 40 / var(--tw-bg-opacity, 1))}.bg-main-hover{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}.bg-main-hover\/50{background-color:#40404080}.bg-main-input{--tw-bg-opacity: 1;background-color:rgb(46 46 46 / var(--tw-bg-opacity, 1))}.bg-main-input\/80{background-color:#2e2e2ecc}.bg-main-light{--tw-bg-opacity: 1;background-color:rgb(30 30 34 / var(--tw-bg-opacity, 1))}.bg-main\/90{background-color:#1c1c20e6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(255 51 0 / var(--tw-bg-opacity, 1))}.bg-primary\/10{background-color:#ff33001a}.bg-primary\/20{background-color:#f303}.bg-readOnly{--tw-bg-opacity: 1;background-color:rgb(35 35 35 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-500\/80{background-color:#ef4444cc}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/15{background-color:#ffffff26}.fill-black{fill:#000}.fill-main{fill:#1c1c20}.fill-main-input{fill:#2e2e2e}.fill-primary\/30{fill:#ff33004d}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-8{padding-right:2rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-main{font-family:Satoshi,Inter,system-ui,-apple-system,Segoe UI,sans-serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.leading-4{line-height:1rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-accent-error{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-content{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-content-muted{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-content-subtle{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-emerald-500{--tw-text-opacity: 1;color:rgb(16 185 129 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-primary{--tw-text-opacity: 1;color:rgb(255 51 0 / var(--tw-text-opacity, 1))}.text-red-200{--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/60{color:#fff9}.text-white\/70{color:#ffffffb3}.underline{text-decoration-line:underline}.placeholder-content-subtle::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.placeholder-content-subtle::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-1{outline-width:1px}.outline-transparent{outline-color:transparent}.ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-primary{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 51 0 / var(--tw-ring-opacity, 1))}.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)}.brightness-110{--tw-brightness: brightness(1.1);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)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));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)}.invert{--tw-invert: invert(100%);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)}.backdrop-blur-\[2px\]{--tw-backdrop-blur: blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[filter\]{transition-property:filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[outline-color\]{transition-property:outline-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.will-change-transform{will-change:transform}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}html,body{overflow:hidden;font-family:Satoshi,Inter,system-ui,sans-serif}@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Variable.woff2) format("woff2-variations");font-weight:300 900;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-VariableItalic.woff2) format("woff2-variations");font-weight:300 900;font-style:italic;font-display:swap}@font-face{font-family:Goldman;src:url(/fonts/Goldman-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Goldman;src:url(/fonts/Goldman-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@keyframes rivet-token-highlight{0%{transform:scale(1.05);box-shadow:0 0 0 2px #facc15,0 0 0 6px #facc1580}50%{transform:scale(1.02);box-shadow:0 0 0 2px #facc15,0 0 0 8px #facc1599}to{transform:scale(1);box-shadow:0 0 #facc1500,0 0 #facc1500}}*{scrollbar-width:thin;scrollbar-color:#404040 transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent;border-radius:4px}*::-webkit-scrollbar-thumb{background:#3a3a3f;border-radius:4px;border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-thumb:hover{background:#505058;border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-corner{background:transparent}.markdown-content{color:#fff;font-size:.875rem;line-height:1.625;word-break:break-word;overflow-wrap:anywhere;min-width:0}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{color:#fff;font-weight:600;margin-top:1rem;margin-bottom:.25rem;line-height:1.3}.markdown-content h1{font-size:1.25rem}.markdown-content h2{font-size:1.125rem}.markdown-content h3{font-size:1rem}.markdown-content p{margin:.5rem 0}.markdown-content strong{color:#fff;font-weight:600}.markdown-content em{font-style:italic}.markdown-content a{color:#60a5fa;text-decoration:underline}.markdown-content a:hover{color:#93bbfd}.markdown-content ul,.markdown-content ol{margin:.5rem 0;padding-left:1.25rem}.markdown-content ul{list-style-type:disc}.markdown-content ol{list-style-type:decimal}.markdown-content li{margin:.25rem 0}.markdown-content li>ul,.markdown-content li>ol{margin:0}.markdown-inline-code{background:#ffffff1a;color:#e5e7eb;padding:.125rem .375rem;border-radius:.25rem;font-size:.8125rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,monospace;overflow-wrap:anywhere}.markdown-content blockquote{border-left:3px solid #4b5563;padding-left:.75rem;margin:.5rem 0;color:#9ca3af}.markdown-content table{border-collapse:collapse;margin:.5rem 0;width:100%;font-size:.8125rem}.markdown-content th,.markdown-content td{border:1px solid #4b5563;padding:.375rem .625rem;text-align:left}.markdown-content th{color:#fff;font-weight:600;background:#ffffff0d}.markdown-content hr{border:none;border-top:1px solid #4b5563;margin:.75rem 0}.markdown-content del{text-decoration:line-through;color:#9ca3af}.markdown-content>*:first-child{margin-top:0}.markdown-content>*:last-child{margin-bottom:0}@keyframes rivet-sparkle-scroll{0%{transform:translateY(0)}to{transform:translateY(-6em)}}.rivet-sparkle-strip{animation:rivet-sparkle-scroll .9s steps(6) infinite}@media(prefers-reduced-motion:reduce){.rivet-sparkle-strip{animation:none}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer-text{background:linear-gradient(90deg,#ffffff80,#ffffffbf,#fff,#ffffffbf,#ffffff80);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2s linear infinite}.glass-panel{background:#ffffff04;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.03)}.active-push:active{transform:scale(.98);transition:transform .1s ease}:root{--variant-split-ease: cubic-bezier(.4, 0, .2, 1);--variant-split-accent: var(--color-primary, #ff3300);--variant-split-zone-bg: rgba(38, 38, 42, .92);--variant-split-zone-border: rgba(255, 255, 255, .04);--variant-split-zone-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 90px 10px rgba(255, 220, 160, .05)}.variant-preview-region{isolation:isolate}.variant-preview-primary{transition:filter .2s var(--variant-split-ease)}.variant-preview-region.is-dragging .variant-preview-primary{filter:brightness(.92) saturate(.92)}.variant-preview-region.is-dragging iframe{pointer-events:none}.variant-preview-atmosphere{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 50%,#0000,#00000059);opacity:0;z-index:30;transition:opacity .2s var(--variant-split-ease)}.variant-preview-region.is-dragging .variant-preview-atmosphere{opacity:1}.variant-drop-zones{position:absolute;top:16px;right:16px;bottom:16px;left:16px;pointer-events:none;z-index:50}.variant-drop-zone{position:absolute;top:0;bottom:0;width:14%;min-width:130px;max-width:180px;background:var(--variant-split-zone-bg);border-radius:14px;border:1px solid var(--variant-split-zone-border);display:flex;align-items:center;justify-content:center;pointer-events:auto;opacity:0;transform:scale(.94);filter:blur(12px);box-shadow:var(--variant-split-zone-shadow);transition:opacity .32s var(--variant-split-ease),transform .32s var(--variant-split-ease),filter .32s var(--variant-split-ease),box-shadow .24s var(--variant-split-ease)}.variant-drop-zone.is-left{left:8px}.variant-drop-zone.is-right{right:8px}.variant-drop-zones.is-visible .variant-drop-zone{opacity:1;transform:scale(1);filter:blur(0)}.variant-drop-zones.is-exiting .variant-drop-zone{opacity:0;transform:scale(.97);filter:blur(8px);transition:opacity .2s var(--variant-split-ease),transform .2s var(--variant-split-ease),filter .2s var(--variant-split-ease)}.variant-drop-zone.is-disabled{opacity:.6;filter:blur(2px) saturate(.6)}.variant-drop-zone-inner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateY(6px);filter:blur(4px);transition:opacity .22s var(--variant-split-ease),transform .22s var(--variant-split-ease),filter .22s var(--variant-split-ease)}.variant-drop-zones.is-visible .variant-drop-zone-inner{opacity:1;transform:translateY(0);filter:blur(0);transition-delay:.18s}.variant-drop-zone.is-hover .variant-drop-zone-caption{color:var(--variant-split-accent)}.variant-drop-zone-icon{width:36px;height:28px;border-radius:6px;border:1.5px solid rgba(255,255,255,.45);position:relative;overflow:hidden}.variant-drop-zone-icon:after{content:"";position:absolute;top:0;bottom:0;width:1.5px;background:#ffffff73}.variant-drop-zone-icon.is-left:after{left:11px}.variant-drop-zone-icon.is-right:after{right:11px}.variant-drop-zone-icon.is-left:before{content:"";position:absolute;top:0;bottom:0;left:0;width:11px;background:#ffffff14}.variant-drop-zone-icon.is-right:before{content:"";position:absolute;top:0;bottom:0;right:0;width:11px;background:#ffffff14}.variant-drop-zone.is-hover .variant-drop-zone-icon{border-color:var(--variant-split-accent)}.variant-drop-zone.is-hover .variant-drop-zone-icon:after{background:var(--variant-split-accent)}.variant-drop-zone.is-hover .variant-drop-zone-icon.is-left:before,.variant-drop-zone.is-hover .variant-drop-zone-icon.is-right:before{background:color-mix(in srgb,var(--variant-split-accent) 22%,transparent)}.variant-drop-zone-caption{font-size:11.5px;letter-spacing:.02em;color:#fff9;max-width:80%;text-align:center;line-height:1.35}.variant-drop-zone-border{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:10px;border:2px dashed var(--variant-split-accent);opacity:0;transition:opacity .24s var(--variant-split-ease);pointer-events:none}.variant-drop-zone.is-hover .variant-drop-zone-border{opacity:1}.variant-drop-zone-preview{display:none}.variant-drag-ghost{position:fixed;top:0;left:0;border-radius:10px;background:#1f1f21f5;border:1px solid rgba(255,255,255,.06);box-shadow:0 0 0 1px #ffffff05 inset,0 24px 60px -10px #0009,0 0 80px 10px #ffdc8c0f;padding:10px 12px;pointer-events:none;z-index:60;display:flex;align-items:center}.variant-drag-ghost-row{display:flex;align-items:center;gap:9px;min-width:0;flex:1}.variant-drag-ghost-title{font-size:11.5px;color:#ffffffeb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.variant-split-secondary{display:flex;flex:1 1 0;min-width:0;flex-direction:column;border-left:1px solid var(--main-border, rgba(255, 255, 255, .06));background:var(--bg-main, #0d0d0e);position:relative;animation:variantSplitSecondaryEnter .42s var(--variant-split-ease) both}.variant-preview-region.is-split>.variant-preview-row>.variant-preview-primary{border-right:1px solid var(--main-border, rgba(255, 255, 255, .06))}@keyframes variantSplitSecondaryEnter{0%{opacity:0}to{opacity:1}}.variant-split-secondary-toolbar{flex:0 0 32px;height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#ffffff05;border-bottom:1px solid rgba(255,255,255,.04);font-size:11.5px;color:#ffffffb3}.variant-split-secondary-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.variant-split-secondary-close{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:#ffffff8c;padding:4px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .14s var(--variant-split-ease),background-color .14s var(--variant-split-ease)}.variant-split-secondary-close:hover{color:#ffffffeb;background:#ffffff0f}.variant-split-secondary-iframe{flex:1;border:0;width:100%;height:100%;background:#fff}@media(prefers-reduced-motion:reduce){.variant-drop-zone,.variant-drop-zone-inner,.variant-drop-zone-preview,.variant-drop-zone-border,.variant-preview-primary,.variant-preview-atmosphere,.variant-split-secondary,.variant-split-secondary-close{transition-duration:80ms!important;animation-duration:80ms!important;filter:none!important;transform:none!important}.variant-drop-zones.is-visible .variant-drop-zone-inner{transition-delay:0ms}}.placeholder\:text-content-subtle::-moz-placeholder{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.placeholder\:text-content-subtle::placeholder{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.last\:border-b-0:last-child{border-bottom-width:0px}.focus-within\:outline-white\/20:focus-within{outline-color:#fff3}.hover\:border-main-border:hover{--tw-border-opacity: 1;border-color:rgb(35 35 40 / var(--tw-border-opacity, 1))}.hover\:border-primary-border:hover{--tw-border-opacity: 1;border-color:rgb(255 107 53 / var(--tw-border-opacity, 1))}.hover\:bg-black\/70:hover{background-color:#000000b3}.hover\:bg-divider:hover{--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}.hover\:bg-main:hover{--tw-bg-opacity: 1;background-color:rgb(28 28 32 / var(--tw-bg-opacity, 1))}.hover\:bg-main-border:hover{--tw-bg-opacity: 1;background-color:rgb(35 35 40 / var(--tw-bg-opacity, 1))}.hover\:bg-main-hover:hover{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}.hover\:bg-main-input:hover{--tw-bg-opacity: 1;background-color:rgb(46 46 46 / var(--tw-bg-opacity, 1))}.hover\:bg-main\/80:hover{background-color:#1c1c20cc}.hover\:bg-primary-hover:hover{--tw-bg-opacity: 1;background-color:rgb(194 65 12 / var(--tw-bg-opacity, 1))}.hover\:bg-primary\/90:hover{background-color:#ff3300e6}.hover\:bg-red-600:hover{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/10:hover{background-color:#ffffff1a}.hover\:text-accent-error:hover{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.hover\:text-content:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-red-400:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.focus\:border-primary:focus{--tw-border-opacity: 1;border-color:rgb(255 51 0 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary\/30:focus{--tw-ring-color: rgb(255 51 0 / .3)}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-content-muted\/40:focus-visible{--tw-ring-color: rgb(209 213 219 / .4)}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-80:disabled{opacity:.8}.group:hover .group-hover\:border-content-muted{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.group:hover .group-hover\:text-content{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:brightness-75{--tw-brightness: brightness(.75);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)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[side\=bottom\]\:origin-top[data-side=bottom]{transform-origin:top}.data-\[side\=left\]\:origin-right[data-side=left]{transform-origin:right}.data-\[side\=right\]\:origin-left[data-side=right]{transform-origin:left}.data-\[side\=top\]\:origin-bottom[data-side=top]{transform-origin:bottom}@keyframes tooltip-pop-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95) translateY(2px)}}.data-\[state\=closed\]\:animate-tooltip-pop-out[data-state=closed]{animation:tooltip-pop-out .11s ease-out}.data-\[state\=delayed-open\]\:animate-tooltip-pop-in[data-state=delayed-open]{animation:tooltip-pop-in .18s cubic-bezier(.34,1.56,.64,1)}@keyframes tooltip-pop-in{0%{opacity:0;transform:scale(.82) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.data-\[state\=instant-open\]\:animate-tooltip-pop-in[data-state=instant-open]{animation:tooltip-pop-in .18s cubic-bezier(.34,1.56,.64,1)}.data-\[highlighted\]\:border-primary-border[data-highlighted]{--tw-border-opacity: 1;border-color:rgb(255 107 53 / var(--tw-border-opacity, 1))}.data-\[state\=active\]\:border-primary[data-state=active]{--tw-border-opacity: 1;border-color:rgb(255 51 0 / var(--tw-border-opacity, 1))}.data-\[highlighted\]\:bg-main-hover[data-highlighted]{--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}.data-\[highlighted\]\:bg-main-input[data-highlighted]{--tw-bg-opacity: 1;background-color:rgb(46 46 46 / var(--tw-bg-opacity, 1))}.data-\[state\=checked\]\:bg-transparent[data-state=checked]{background-color:transparent}.data-\[highlighted\]\:text-content[data-highlighted],.data-\[state\=active\]\:text-white[data-state=active]{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[highlighted\]\:ring-1[data-highlighted]{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.data-\[highlighted\]\:ring-primary-border[data-highlighted]{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 107 53 / var(--tw-ring-opacity, 1))}.group[data-state=open] .group-data-\[state\=open\]\:rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media(min-width:640px){.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(min-width:1024px){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}