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.
- package/dist/mcp/agent-variants/SessionStore.d.ts +10 -2
- package/dist/mcp/agent-variants/SessionStore.d.ts.map +1 -1
- package/dist/mcp/agent-variants/SessionStore.js +82 -22
- package/dist/mcp/agent-variants/SessionStore.js.map +1 -1
- package/dist/mcp/agent-variants/WorktreeOrchestrator.d.ts +4 -0
- package/dist/mcp/agent-variants/WorktreeOrchestrator.d.ts.map +1 -1
- package/dist/mcp/agent-variants/WorktreeOrchestrator.js +432 -37
- package/dist/mcp/agent-variants/WorktreeOrchestrator.js.map +1 -1
- package/dist/mcp/agent-variants/contracts.d.ts +389 -129
- package/dist/mcp/agent-variants/contracts.d.ts.map +1 -1
- package/dist/mcp/agent-variants/contracts.js +90 -36
- package/dist/mcp/agent-variants/contracts.js.map +1 -1
- package/dist/mcp/agent-variants/createZeroToOneTool.d.ts +32 -13
- package/dist/mcp/agent-variants/createZeroToOneTool.d.ts.map +1 -1
- package/dist/mcp/agent-variants/createZeroToOneTool.js +1 -1
- package/dist/mcp/agent-variants/createZeroToOneTool.js.map +1 -1
- package/dist/mcp/agent-variants/tools.d.ts.map +1 -1
- package/dist/mcp/agent-variants/tools.js +9 -2
- package/dist/mcp/agent-variants/tools.js.map +1 -1
- package/dist/mcp/server.d.ts.map +1 -1
- package/dist/mcp/server.js +30 -2
- package/dist/mcp/server.js.map +1 -1
- package/dist/routes/agentVariants.d.ts.map +1 -1
- package/dist/routes/agentVariants.js +120 -37
- package/dist/routes/agentVariants.js.map +1 -1
- package/dist/routes/mcp.d.ts.map +1 -1
- package/dist/routes/mcp.js +175 -5
- package/dist/routes/mcp.js.map +1 -1
- package/dist/services/VariantHistoryService.d.ts +64 -1
- package/dist/services/VariantHistoryService.d.ts.map +1 -1
- package/dist/services/VariantHistoryService.js +148 -18
- package/dist/services/VariantHistoryService.js.map +1 -1
- package/dist/types/change-request-types.d.ts +67 -0
- package/dist/types/change-request-types.d.ts.map +1 -1
- package/dist/utils/skills/claude-skill.d.ts +1 -1
- package/dist/utils/skills/claude-skill.js +1 -1
- package/dist/utils/skills/cursor-rules.d.ts +1 -1
- package/dist/utils/skills/cursor-rules.js +1 -1
- package/dist/utils/skills/describe-motion-protocol.d.ts +11 -0
- package/dist/utils/skills/describe-motion-protocol.d.ts.map +1 -0
- package/dist/utils/skills/describe-motion-protocol.js +216 -0
- package/dist/utils/skills/describe-motion-protocol.js.map +1 -0
- package/dist/utils/skills/shared-variants-protocol.d.ts.map +1 -1
- package/dist/utils/skills/shared-variants-protocol.js +23 -17
- package/dist/utils/skills/shared-variants-protocol.js.map +1 -1
- package/package.json +2 -1
- package/src/ui/dist/assets/main-BZEruoyc.css +1 -0
- package/src/ui/dist/assets/{main-SuZlKEi0.js → main-CIqMI5Le.js} +65 -65
- package/src/ui/dist/index.html +2 -2
- 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":"
|
|
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) — \`
|
|
91
|
+
### Sub-flow C: Fresh project (source-grounded) — \`create_zero_to_one_project\`
|
|
91
92
|
|
|
92
|
-
|
|
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
|
-
|
|
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
|
-
- \`
|
|
97
|
-
- \`
|
|
98
|
-
- \`
|
|
99
|
-
|
|
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
|
-
|
|
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. **
|
|
104
|
-
-
|
|
105
|
-
-
|
|
106
|
-
- \`
|
|
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
|
-
|
|
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
|
-
|
|
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":";;;
|
|
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.
|
|
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))}}
|