dreative 0.1.0

package/dist/ui/assets/index-y0gVjC7u.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:ui-sans-serif,system-ui,Segoe UI,sans-serif;background:#0f1117;color:#e6e8ee;font-size:14px}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #23262f;background:#14161d}.topbar .logo{font-weight:700;letter-spacing:.5px;color:#a5b4fc}.topbar input{flex:1;max-width:560px;background:#0f1117;border:1px solid #2c2f3a;border-radius:8px;color:#e6e8ee;padding:8px 12px;outline:none}.topbar input:focus{border-color:#6366f1}button{background:#6366f1;color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:13px}button:hover{background:#575ae0}button:disabled{opacity:.5;cursor:default}button.ghost{background:transparent;border:1px solid #2c2f3a;color:#c7cad4}button.ghost:hover{border-color:#6366f1;color:#fff}button.danger{background:#3a2030;color:#f7a6b8}.main{flex:1;display:flex;min-height:0}.workspace{flex:1;min-width:0;position:relative}.inspector{width:320px;border-left:1px solid #23262f;background:#14161d;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.inspector h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#8b8fa3}.inspector textarea,.inspector input[type=text]{width:100%;background:#0f1117;border:1px solid #2c2f3a;border-radius:8px;color:#e6e8ee;padding:8px 10px;outline:none;resize:vertical;font-family:inherit}.inspector textarea:focus,.inspector input:focus{border-color:#6366f1}.inspector .hint{color:#8b8fa3;font-size:12px;line-height:1.5}.inspector .intent{background:#1c1f29;border-radius:6px;padding:6px 10px;font-size:12px;color:#c4b5fd;display:flex;align-items:center;gap:6px}.inspector .intent .intent-x{margin-left:auto;cursor:pointer;color:#8b8fa3;font-weight:700}.inspector .intent .intent-x:hover{color:#f87171}.inspector .btn-row{display:flex;gap:8px}.inspector .btn-row>*{flex:1}.inspector select{background:#0f1117;border:1px solid #2c2f3a;border-radius:8px;color:#e6e8ee;padding:8px 10px;outline:none}.hint-inline{color:#8b8fa3;font-size:12px}.inspector .steps{margin:0;padding-left:18px;color:#c7cad4;font-size:13px;line-height:1.7}.inspector kbd{background:#23262f;border-radius:4px;padding:1px 5px;font-size:11px}.empty-state{height:100%;display:flex;align-items:center;justify-content:center}.empty-card{max-width:520px;text-align:center;padding:32px}.empty-logo{font-size:40px;color:#6366f1;margin-bottom:8px}.empty-card h1{margin:0 0 10px;font-size:24px}.empty-card p{color:#9aa0b4;line-height:1.6}.empty-examples{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}.breadcrumb{display:flex;gap:4px;align-items:center;font-size:12px;color:#8b8fa3;margin-left:8px}.breadcrumb .crumb{cursor:pointer;padding:2px 6px;border-radius:4px}.breadcrumb .crumb:hover{background:#23262f;color:#fff}.breadcrumb .crumb.current{color:#a5b4fc;font-weight:600}.crumb-sep{color:#3b3f4d}.wf-block.has-ref:before{content:"🖼";position:absolute;top:3px;right:20px;font-size:10px;z-index:2}.page-node header .open-btn{padding:3px 10px;font-size:11px;background:#2c2f3a;color:#c7cad4;opacity:0;transition:opacity .12s}.page-node:hover header .open-btn{opacity:1}.page-node header .open-btn:hover{background:#6366f1;color:#fff}.statusbar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:#1c1f29;border:1px solid #6366f1;border-radius:999px;padding:8px 20px;z-index:50;display:flex;gap:10px;align-items:center}.statusbar .spinner{width:14px;height:14px;border:2px solid #6366f1;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.errorbar{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:#2a1420;border:1px solid #e11d48;color:#fda4af;border-radius:8px;padding:8px 16px;z-index:50;max-width:70vw;cursor:pointer}.page-node{width:420px;background:#171a22;border:1px solid #2c2f3a;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px #00000059}.page-node.selected{border-color:#6366f1}.page-node header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#1c1f29;cursor:grab}.page-node header .name{font-weight:600}.page-node header .badge{font-size:11px;padding:2px 8px;border-radius:999px;background:#2c2f3a;color:#8b8fa3}.page-node header .badge.designed{background:#14321f;color:#6ee7a0}.page-node .mini{padding:10px;pointer-events:none}.wf-paper{--fg: var(--wfp-fg, #35507a);--accent: var(--wfp-accent, #4f6ef7);background:var(--wfp-bg, linear-gradient(180deg, #f4f8ff, #e9f0fc));color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 25%,transparent);border-radius:14px;padding:14px;box-shadow:0 10px 40px #1e40af1f}.wf-block{position:relative;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:color-mix(in srgb,var(--fg) 7%,transparent);border:1.5px solid transparent;min-height:30px}.wf-block.leaf{background:transparent;padding:4px;justify-content:center}.wf-children{display:flex;gap:10px;flex:1;min-width:0}.wf-children>.wf-block,.wf-children>.wf-sortable{flex:1;min-width:0}.wf-block.selected{border-color:#4f6ef7;background:#6366f11f}.wf-block.has-intents:after{content:"⚡";position:absolute;top:3px;right:6px;font-size:10px;z-index:2}.wf-tag{position:absolute;top:-8px;left:8px;z-index:2;font-size:9px;font-weight:700;letter-spacing:.4px;background:#4f6ef7;color:#fff;border-radius:4px;padding:1px 6px;opacity:0;transition:opacity .12s;pointer-events:none}.wf-block:hover>.wf-tag,.wf-block.selected>.wf-tag{opacity:1}.wf-block:hover{outline:1px dashed rgba(79,110,247,.5);outline-offset:-1px}.g-line{height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 40%,transparent);margin:3px 0}.g-real{font-size:10px;line-height:1.35;color:color-mix(in srgb,var(--fg) 92%,transparent);overflow-wrap:anywhere}.g-real-lg{font-size:13px;font-weight:700}.g-hero-text{font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;color:var(--fg)}.g-text{display:flex;flex-direction:column;justify-content:center}.g-button{width:96px;max-width:70%;height:22px;border-radius:7px;background:var(--accent)}.g-image{width:100%;min-height:64px;flex:1;border-radius:8px;background:color-mix(in srgb,var(--fg) 22%,transparent)}.g-button-labeled{width:auto;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:600;white-space:nowrap}.g-nav{display:flex;align-items:center;gap:10px;width:100%;background:color-mix(in srgb,var(--accent) 85%,#1c1c22);border-radius:8px;padding:8px 12px}.g-nav-dot{width:18px;height:18px;border-radius:5px;background:#ffffffd9}.g-nav-links{display:flex;gap:8px;flex:1;justify-content:center}.g-nav-links span{width:34px;height:6px;border-radius:3px;background:#ffffffa6}.g-nav-cta{width:46px;height:16px;border-radius:6px;background:#ffffffe6}.g-hero{width:100%;min-height:110px;border-radius:10px;padding:18px;background:color-mix(in srgb,var(--fg) 10%,transparent);display:flex;flex-direction:column;justify-content:center}.g-hero-title{width:60%;height:16px;border-radius:6px;background:color-mix(in srgb,var(--fg) 45%,transparent);margin-bottom:8px}.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.g-card{background:color-mix(in srgb,var(--fg) 8%,transparent);border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);border-radius:9px;padding:8px;display:flex;flex-direction:column}.g-card-media{height:34px;border-radius:6px;background:color-mix(in srgb,var(--accent) 35%,transparent);margin-bottom:7px}.g-list{display:flex;flex-direction:column;gap:8px;width:100%}.g-list-row{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--fg) 8%,transparent);border-radius:8px;padding:7px 9px}.g-list-thumb{width:30px;height:30px;border-radius:6px;background:color-mix(in srgb,var(--accent) 40%,transparent);flex:none}.g-form{display:flex;flex-direction:column;gap:8px;width:100%}.g-input{height:22px;border-radius:6px;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}.g-footer{width:100%;border-radius:8px;padding:12px;background:color-mix(in srgb,var(--accent) 85%,#1c1c22);display:flex;align-items:center;justify-content:space-between;gap:16px}.g-footer .g-line{background:#fff9}.g-footer .g-nav-links{flex:none}.editor-view{height:100%;display:flex;flex-direction:column}.editor-toolbar{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid #23262f;align-items:center}.editor-scroll{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center}.editor-page{width:760px}.preview-frame{flex:1;border:0;width:100%;background:#fff}.drop-ref{border:1.5px dashed #2c2f3a;border-radius:8px;padding:14px;text-align:center;color:#8b8fa3;cursor:pointer}.drop-ref:hover{border-color:#6366f1}.drop-ref img{max-width:100%;border-radius:6px}.dial{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;font-size:12px;color:#8b8fa3}.dial span{display:flex;justify-content:space-between}.dial em{font-style:normal;color:#c9cbe0}.dial input[type=range]{width:100%;accent-color:#6366f1}.lint{font-size:12px;color:#fbbf24;background:#fbbf2414;border:1px solid rgba(251,191,36,.25);border-radius:6px;padding:6px 8px;margin:4px 0}.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #555;--xy-background-pattern-lines-color-default: #333;--xy-background-pattern-cross-color-default: #333;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;touch-action:none}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px) translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px) translateY(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) )}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:5px;height:5px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));translate:-50% -50%}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}

package/dist/ui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dreative</title>
+    <script type="module" crossorigin src="/assets/index--vztc_MR.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-y0gVjC7u.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "dreative",
+  "version": "0.1.0",
+  "description": "Layout-first visual editor skill for coding CLIs: extract your app's UI into editable wireframes, tweak with drag-drop + ref images, then the agent applies the diff back to your code.",
+  "type": "module",
+  "bin": {
+    "dreative": "dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "skill"
+  ],
+  "scripts": {
+    "build": "npm run build:server && npm run build:ui",
+    "prepublishOnly": "npm run build",
+    "build:server": "tsc -p tsconfig.json",
+    "build:ui": "vite build",
+    "dev": "concurrently \"tsx watch src/cli/index.ts --no-open\" \"vite\"",
+    "start": "node dist/cli/index.js"
+  },
+  "dependencies": {
+    "esbuild": "^0.24.0",
+    "express": "^4.21.0",
+    "open": "^10.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@xyflow/react": "^12.3.0",
+    "concurrently": "^9.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0",
+    "zustand": "^5.0.0"
+  }
+}

package/skill/dreative/DESIGN.md

@@ -0,0 +1,358 @@
+# Dreative Design Doctrine
+
+You MUST read this file before servicing any `propose-skeletons`, `propose-variants`,
+`design-page`, or `edit-element` request, and run §12 before every respond. It exists
+because LLM-designed UIs converge on one templated look. Every rule corrects a known
+model default; none is a suggestion. Requests may carry a `plan` (Dreative's
+pre-computed decision: dials, per-section layout families, budgets, lints) — execute
+the plan, apply this doctrine to everything the plan doesn't specify. When
+`plan.skills` names specialist skills (`motion`, `3d`, `interaction`), the matching
+`skills/<name>.md` files extend this doctrine for that request — read them first;
+where they go deeper than a section here, they win.
+
+## 1. Register: the first decision
+
+Every page is one of two registers. Misclassifying it is the biggest single error.
+
+**BRAND** (design IS the product): landing pages, marketing, portfolios, campaign
+pages, about pages, long-form content. Bar = distinctiveness. A visitor should ask
+"how was this made?", not "which AI made this?". Average is no longer findable;
+restraint without intent reads as mediocre. Go big or go home.
+
+**PRODUCT** (design SERVES the product): app UI, dashboards, settings, tables, tools,
+authenticated surfaces. Bar = earned familiarity. Would a user fluent in Linear,
+Figma, Notion, Stripe trust this instantly, or pause at every subtly-off component?
+Failure mode is not flatness, it is strangeness without purpose. The tool should
+disappear into the task.
+
+Pick by the page's job, not the project. One app can hold both registers.
+
+## 2. The design read and the slop tests
+
+Before generating, state a one-line read: "<page kind> for <audience>, <vibe>
+language, leaning <aesthetic family>". If the request carries a `brief`, obey it —
+it is the user's explicit direction.
+
+Then run three tests on your intended output; restart if any fails:
+
+1. **First-order reflex**: could someone guess your palette + theme from the category
+   alone ("cookware → cream + brass", "devtool → dark + mono")? That's the
+   training-data default. Rework. The three most-shipped default aesthetics: warm
+   cream + high-contrast serif + terracotta accent; near-black + acid-green/vermilion;
+   broadsheet hairline-rules-and-columns. Where the brief leaves an axis free, never
+   spend that freedom on one of these.
+2. **Second-order reflex**: could someone guess it from category + anti-reference
+   ("fintech that's not navy → terminal-dark", "SaaS that's not cream → editorial
+   serif + mono labels")? The trap one tier deeper. Rework again.
+3. **Competitor sentence**: describe what you're about to build as a competitor would
+   describe theirs. If the sentence fits the modal page in the category, restart.
+
+### The working process: commit before code
+
+Never design by accretion. Two passes:
+
+1. **Commit** — before any code, write a compact spec: 4-6 named colors (hex/OKLCH),
+   2+ type roles with actual font names, a one-sentence layout description per
+   section, and ONE **signature element** — the single memorable move (an
+   interaction, a typographic device, a composition) that carries the page's
+   distinctiveness. Spend your boldness there; keep everything around it disciplined
+   and quiet. Ground choices in the subject's world: its materials, instruments,
+   artifacts, and vernacular ("a coffee brand's world: burlap, roast curves,
+   thermometers, cupping notes") — not in web-design tropes.
+2. **Review** — test the spec against the slop tests below. If any part could apply
+   to any similar project, revise that part. Only then build.
+
+**Hero thesis:** open with the most characteristic thing in the subject's world —
+a headline, an image, a live demo, an interactive moment. Whatever form fits.
+
+### Aesthetic presets (brief.aesthetic)
+
+- `minimal` — Linear-clean: restrained neutrals, one accent, generous space.
+- `editorial` — magazine: strong type hierarchy, asymmetric grid, real imagery.
+  NOTE: editorial is ONE lane, not the default "tasteful" answer. The
+  serif-italic + mono-labels + ruled-columns look is now saturated AI grammar.
+- `premium` — confident type, rich imagery, refined motion, zero clutter.
+- `playful` — bold committed color, springy motion, asymmetry, still disciplined.
+- `brutalist` — raw 1px borders, mono, flat color, radius 0, no shadows/gradients.
+- `dark-tech` — off-black surfaces, restrained neon, terminal cues used sparingly.
+- `trust` — public-sector/regulated: symmetric, motion ≤2, maximum legibility.
+
+### The three dials (1-10, resolved in `plan.dials`)
+
+- `variance` — 1 symmetry → 10 masonry/offsets/20vw empty zones. >4 forbids the
+  centered-hero default. Any asymmetry collapses to clean single-column < 768px.
+- `motion` — 1 static → 10 scroll choreography. >3 requires reduced-motion fallbacks.
+- `density` — 1 art-gallery (py-32+) → 10 cockpit (hairlines, tabular-nums, no cards).
+
+## 3. Typography
+
+**Font selection procedure (brand register, never skip):**
+1. Write three physical-object brand-voice words ("warm, mechanical, opinionated" —
+   never "modern" or "elegant").
+2. List the three fonts you'd reach for by reflex. Reject any on the ban list below.
+3. Pick for the brand as a physical object (museum caption, 1970s terminal manual,
+   concert poster, mid-century receipt). Reject the first thing that "looks designy".
+4. If the final pick matches the original reflex, start over.
+
+**Reflex-reject fonts (training-data defaults, banned as defaults):** Fraunces,
+Newsreader, Lora, Crimson (all), Playfair Display, Cormorant (all), Syne, IBM Plex
+(all), Space Mono, Space Grotesk, Inter, DM Sans/Serif, Outfit, Plus Jakarta Sans,
+Instrument Sans/Serif. Inter/system stacks ARE legitimate in the product register
+and for trust briefs. When an existing app already uses one, identity-preservation
+wins — keep it.
+
+**Serif discipline:** "creative/premium brief = serif" is the most-tested AI tell.
+Default is sans display. Serif only when the brief is genuinely editorial/luxury/
+publication AND you can articulate why this serif fits this brand. Emphasis inside a
+headline = italic/bold of the SAME family, never a serif word dropped into a sans
+headline. Italic display words with descenders (y g j p q) need `leading-[1.1]`+ and
+bottom padding reserve.
+
+**Scale — pick by register:**
+- Brand: fluid `clamp()` headings, ratio ≥1.25 between steps, clamp max ≤ 6rem and
+  ≤ 2.5× its min. Display tracking floor −0.04em (tighter = letters touch).
+- Product: fixed rem scale, ratio 1.125–1.2, one family in 3-4 weights is usually
+  right. No fluid type in app UI — no major design system uses it.
+- Both: body ≥ 16px and fixed; 45–75ch measure (`max-width: 65ch`); headings
+  `text-wrap: balance`, prose `text-wrap: pretty`; ≤ 2-3 families total; never pair
+  two similar sans — contrast on a real axis (serif+sans, geometric+humanist) or use
+  one family.
+
+**Details that read as craft:** line-height 1.1–1.2 headings, 1.5–1.7 body; ALL-CAPS
+labels get `letter-spacing: 0.05–0.12em`; `tabular-nums` on data columns; vertical
+rhythm = spacing in multiples of the body line-box (16px × 1.5 → 24px grid);
+light-on-dark text compensates on three axes: +0.05–0.1 line-height, +0.01–0.02em
+tracking, one weight step down (400→350 effect). `font-display: swap`, preload only
+the critical weight, variable font when using 3+ weights.
+
+## 4. Color
+
+**Use OKLCH.** `oklch(L C H)` is perceptually uniform. Build ramps by holding
+chroma+hue and varying lightness; reduce chroma near white/black. The hue is a brand
+decision — never blue-250 or warm-60 by reflex.
+
+**Pick a color strategy before picking colors:**
+- **Restrained** — tinted neutrals + one accent ≤10% visual weight. Product floor.
+- **Committed** — one saturated color carries 30-60% of the surface. Brand default
+  for identity-driven pages.
+- **Full palette** — 3-4 named roles used deliberately. Campaigns, data viz.
+- **Drenched** — the surface IS the color. Brand heroes.
+
+Name a real reference before committing ("Stripe purple-on-white restraint", "Klim
+#ff4500 drench", "Vercel pure-black monochrome"). Unnamed ambition becomes beige.
+On brand surfaces, palette IS voice — don't hedge a Committed palette with neutral
+edges. On product surfaces, accent = primary action + selection + state, never
+decoration, with a full semantic state vocabulary (hover/focus/active/disabled/
+selected/loading/error/warning/success/info) and a second neutral layer for
+sidebars/panels.
+
+**Mechanics:**
+- Tinted neutrals: chroma 0.005–0.015 toward THIS brand's hue. Pure gray is dead;
+  reflex-warm or reflex-cool tinting is the monoculture move.
+- 60-30-10 by visual weight: 60% neutral surface, 30% text/borders, 10% accent.
+  Accents work because they are rare.
+- One accent, one neutral family, locked page-wide and project-wide. No blue CTA
+  appearing in section 7 of a warm-gray page.
+- Contrast: body 4.5:1 (AAA 7:1 target for hero copy), large text 3:1, UI components
+  3:1, placeholders 4.5:1. Gray text on colored backgrounds looks washed out — use a
+  darker shade of the background's own hue or alpha of the text color. Audit every
+  CTA and form before responding.
+- No pure #000/#fff. Dark mode is not inverted light mode: depth from a 3-step
+  surface-lightness scale (≈15/20/25% L, brand hue, chroma constant), desaturate
+  accents slightly, reduce body weight. Redefine only semantic tokens for dark.
+- Heavy alpha usage = incomplete palette. Define explicit overlay colors.
+
+**Banned palettes as default reaches:** AI-purple/violet gradients + glow; the
+premium-artisan cream/sand/beige bg (#f5f1ea family, OKLCH L .84-.97 C<.06 hue
+40-100) + brass/clay/oxblood accents + espresso text — token names like --cream,
+--sand, --bone are tells in themselves. Alternatives to rotate: cold luxury
+(silver/chrome/smoke), forest + bone + amber, true black + tan, cobalt + cream,
+terracotta + slate, olive + brick + paper, monochrome + one saturated pop. "Warmth"
+is carried by accent, type, and imagery — not by a beige body background.
+Override: a palette is fine when the existing brand or explicit brief names it.
+When redesigning an extracted app, its `theme` colors are the brand — preserve.
+
+## 5. Layout
+
+**Hard rules (failing any = broken work):**
+- Hero fits the initial viewport: headline ≤ 2 lines, subtext ≤ 20 words, CTA visible
+  without scroll, top padding ≤ pt-24. 4-line headline is a font-size error. Max 4
+  text elements (one eyebrow OR brand strip, headline, subtext, CTAs 1+1). Trust
+  strips, pricing teasers, feature bullets, avatar rows: all move below the hero.
+- Hero needs a real visual. Text + gradient blob is a placeholder, not a hero.
+- variance > 4 forbids centered-hero-over-gradient: split 50/50, left-content/
+  right-asset, or asymmetric whitespace. Centered is fine for manifesto/launch copy.
+- Nav: one line at desktop, height 64–72px (cap 80px).
+- A layout family appears at most ONCE per page; 8 sections need ≥ 4 families. Max 2
+  consecutive image+text zigzags. No 3-identical-cards row, ever — asymmetric grid,
+  2-col, bento, or horizontal scroll instead.
+- Bento: exactly as many cells as content (no filler tiles); 2-3 cells carry real
+  visual variation (image/tint/pattern), never all white-on-white text.
+- Cards only when elevation = hierarchy; otherwise border-t/divide-y/whitespace.
+  Nested cards are always wrong. Tint shadows to the background hue.
+- Lists > 5 items: group into chunks, 2-col card grid, tabs, or marquee — never one
+  hairline-divided stack, never border-t AND border-b per row.
+- Split-header pattern (big left headline + small floating right paragraph) banned
+  as default; stack vertically at 65ch.
+- Grid over flex-math (`grid-cols-3 gap-6`, never `w-[calc(33%-1rem)]`);
+  `repeat(auto-fit, minmax(280px, 1fr))` for breakpoint-free card grids;
+  `min-h-[100dvh]` never `h-screen`; explicit mobile collapse per section; contain
+  at `max-w-7xl mx-auto`; semantic z-index scale, no z-[999].
+- ONE radius system: all-sharp, all-soft (12-16px), or documented mixed rule
+  ("buttons pill, cards 16, inputs 8"). Cards never above 16px radius.
+- Spacing has rhythm: vary generous separations against tight groupings on a
+  consistent base unit; brand surfaces use fluid `clamp()` spacing that breathes.
+- Structure encodes truth, never decoration: numbering, eyebrows, dividers, and
+  labels appear only when they say something true about the content (a real
+  sequence, a real category). If removing the device loses nothing, remove it.
+- Product register: responsive behavior is structural (collapse sidebar, responsive
+  table), not fluid type.
+
+## 6. Motion
+
+Every animation answers "what does this communicate?" — hierarchy, storytelling,
+feedback, or state change. "It looked cool" = delete it.
+
+**The 100/300/500 rule:** 100-150ms instant feedback (press, toggle) · 200-300ms
+state changes (menu, tooltip, hover) · 300-500ms layout changes (accordion, modal)
+· 500-800ms entrances (hero reveal, brand only). Exits run ~75% of enter duration.
+Feedback over 500ms feels laggy. Micro-interactions target the 80ms "feels instant"
+threshold.
+
+**Easing:** ease-out exponential only — `cubic-bezier(0.25,1,0.5,1)` quart,
+`cubic-bezier(0.22,1,0.36,1)` quint, `cubic-bezier(0.16,1,0.3,1)` expo. Bounce and
+elastic are dated; banned.
+
+**Register:** brand = one well-orchestrated hero entrance beats scattered
+micro-interactions; the uniform fade-and-rise on every scrolled section is the
+saturated AI tell. Some brands skip entrance motion entirely — restraint as voice.
+Product = 150-250ms, state-conveying only, zero page-load choreography.
+
+**Mechanics:** animate transform/opacity by default; blur/backdrop-filter/clip-path/
+masks/shadow allowed when they materially improve the effect, bounded to small areas,
+verified smooth. Never casually animate width/height/top/left/margins (use FLIP or
+grid-template-rows). Sibling stagger `calc(var(--i) * 50ms)` capped at ~500ms total.
+IntersectionObserver (unobserve after firing), CSS scroll-driven animations, or
+Motion/GSAP scroll tools — `window.addEventListener("scroll")` is a hard ban. Reveals
+enhance an already-visible default; never gate content visibility on a JS-triggered
+class (hidden tabs and headless renderers ship blank sections). Max one marquee per
+page. `prefers-reduced-motion: reduce` alternative for everything. Optimistic UI for
+low-stakes actions; never for payments or destructive ops.
+
+## 7. Imagery
+
+When the brief implies imagery (restaurant, hotel, product, travel, fashion,
+portfolio), zero images is a bug, not restraint. Even a minimalist page needs 2-3
+real images. Priority: (1) image-gen tool if available in your environment, at the
+section's aspect ratio; (2) real photography —
+`https://picsum.photos/seed/<descriptive-seed>/<w>/<h>` always resolves; Unsplash
+only with verified photo IDs (guessed IDs 404 into broken placeholders); (3)
+clearly-labeled placeholder slots + tell the user what's needed. Search for the
+brand's physical object ("hand-cut pasta on a scratched wooden table"), not the
+category ("Italian food"). One decisive photo beats five mediocre ones. Alt text
+carries voice.
+
+Banned: div-built fake screenshots/terminals/dashboards (the #1 AI tell), hand-drawn
+"sketchy" SVG illustrations, `feTurbulence` paper-grain, repeating-gradient stripe
+backgrounds, decorative grid-line overlays, hand-rolled icon paths. Icons from ONE
+library (Phosphor/Radix/Tabler/HugeIcons; Lucide only on request), one strokeWidth
+globally. Logo walls: real SVG marks (`https://cdn.simpleicons.org/<slug>`) or
+generated monograms — logos only, no category captions, below the hero.
+
+## 8. Content and copy
+
+≤ 8-word section headlines, ≤ 25-word subtext, one copy register per page, quotes
+≤ 3 lines with name + role attribution. No filler verbs (elevate, seamless, unleash,
+revolutionize). No fake-precise numbers unless real or labeled mock; use believable
+messy data ("47.2%", not "99.99%"). No "Jane Doe"/"Acme"/generic avatars — realistic
+locale-appropriate names, credible invented brands. Re-read every visible string
+before responding; rewrite anything grammatically broken, cutely meta, or
+performative-craftsman ("From the field", "We respect the French ones"). Plain
+beats clever. Data-dump tables on marketing pages → top 3-5 + "view all".
+
+**UX writing:** write from the user's side of the screen — name things by what
+people control and recognize, never by how the system is built. Active voice ("Save
+changes", not "Submit"). Action names stay consistent through the flow (button
+"Publish" → toast "Published"). Errors and empty states are direction, not mood:
+say what happened and what to do next; never apologize vaguely. Sentence case,
+plain verbs, no filler.
+
+## 9. States and interaction (product floor)
+
+Every interactive component ships default/hover/focus/active/disabled/loading/error.
+Skeletons shaped like the final layout, not centered spinners. Empty states teach
+the interface. Errors inline for forms, toasts only for transient events. Labels
+above inputs; placeholder-as-label never; helper text present. `:active` gives
+tactile press (`scale-[0.98]`). Same button shape, form vocabulary, and icon style
+on every screen — if "save" looks different in two places, one is wrong. Modals are
+usually laziness; exhaust inline/progressive first. Dropdowns escape
+overflow-hidden ancestors via popover API/position-fixed/portal. Touch targets
+≥ 44px. Never disable zoom.
+
+## 10. Banned AI tells (match-and-refuse)
+
+- **Em-dash (—) and en-dash separators (–): zero anywhere visible.** Periods,
+  commas, colons, plain hyphens.
+- Eyebrow kickers (small caps tracked labels above headings) on every section — max
+  1 per 3 sections, and only as a deliberate system. Numbered section markers
+  (`01 · About`) unless the content is a real sequence.
+- Side-stripe borders (border-left > 1px as accent) — full hairline border, 4-8%
+  background tint, or leading glyph instead.
+- Gradient text (background-clip). Glassmorphism as default. Hero-metric template
+  (big number + label + gradient accent). Identical icon+heading+text card grids.
+- 1px border + soft ≥16px drop shadow on the same element ("ghost card") — pick one.
+- Hero version labels (BETA, V0.6), scroll cues ("↓ scroll to explore"),
+  locale/weather strips, decoration strips (`DESIGN · BUILD · SHIP`), vertical
+  rotated text, custom cursors, decorative status dots, pills overlaid on photos,
+  fake photo credits, version footers on marketing pages, "Quietly trusted by".
+- Duplicate CTA intent: one label per intent per page ("Get in touch" + "Let's
+  talk" = fail). CTA labels never wrap at desktop; 1-3 words.
+- Middle-dot separators rationed to 1 per line. Never hover-scale on `<img>`
+  elements (animate the card's border/background/shadow instead).
+- Headline text that overflows its container at any breakpoint — test the actual
+  copy; the viewport is part of the design.
+
+## 11. Redesign and preservation (extracted apps)
+
+Dreative pages usually come FROM a real app. Detect the mode: preserve (evolve the
+existing brand) vs overhaul (new language, same content/IA). When preserving: keep
+route slugs, nav labels, form field names, logo, legal copy; extract brand tokens
+before applying §4 (a purple brand stays purple); apply modernisation levers in
+order — typography → spacing/rhythm → color recalibration → motion layer → hero
+recomposition → full replacement only when unsalvageable. Honor existing
+accessibility wins and analytics hooks. Preserve prior element-level edits when
+`previousFile` is set.
+
+## 12. Pre-flight checklist (run before EVERY respond)
+
+Mentally verify; fix failures, then respond. If a box cannot be honestly ticked,
+the output is not done.
+
+0. Commit pass done: named palette, named fonts, one signature element, subject-
+   grounded. The quality floor (responsive to mobile, visible keyboard focus,
+   reduced motion) is built silently — never announced in copy or comments.
+1. Register named (brand/product); design read stated; brief and plan obeyed.
+2. All three slop tests pass (first-order, second-order, competitor sentence).
+3. Zero em/en-dashes visible. Zero banned tells from §10.
+4. One accent + one tinted-neutral family + one theme + one radius system + one
+   icon family, locked page-wide; matches sibling pages of this project.
+5. Fonts: not on the reflex-reject list (or justified by existing brand); scale
+   ratio committed; body ≥16px at 45-75ch; caps tracked; data tabular.
+6. Every CTA/form/placeholder passes WCAG AA; no CTA wraps; no duplicate CTA intent.
+7. Hero: ≤2-line headline, ≤20-word subtext, ≤4 elements, real visual, CTA above
+   fold; centered only if variance ≤ 4 or manifesto brief.
+8. Eyebrows ≤ ceil(sections/3); no two sections share a layout family; ≤2
+   consecutive zigzags; no 3-identical-cards; bento cells = content count.
+9. Real images or labeled slots; no div fake-screenshots; no sketchy SVG; logos are
+   real marks.
+10. Motion: each animation justified in one sentence; durations per 100/300/500;
+    ease-out curves; exits faster; reduced-motion safe; content visible without JS;
+    ≤1 marquee; no scroll-listener.
+11. States complete (loading/empty/error/disabled); labels above inputs; tactile
+    :active.
+12. Mobile collapse explicit; 100dvh; no text overflow at any breakpoint; semantic
+    z-index.
+13. Copy self-audit done: no broken/AI-cute strings, realistic data, one register.
+14. Every block id from the layout appears as `data-dreative-id` (design-page only).
+15. Dark mode (when in scope): semantic-token swap, surface-lightness depth,
+    desaturated accents, tested both modes.

package/skill/dreative/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: dreative
+description: Frontend design skill + optional visual round-trip editor. Use for ANY frontend design work — redesign/restyle/build pages, landing pages, animations, motion, 3D, micro-interactions, "make my UI look good" — and for visual editing when the user says "open dreative" or "let me edit the layout visually". Default is direct design: apply the design doctrine straight to the codebase. The browser editor (extract → wireframes → edit → apply diff) is an optional mode the user can ask for.
+---
+
+# Dreative — frontend design skill (+ optional visual editor)
+
+You (the coding agent) are the intelligence. Dreative has **two modes**:
+
+- **Mode A — Direct design (default).** The user asks you to design, redesign, restyle, animate, or build UI. Read `DESIGN.md` (and any specialist `skills/<name>.md` the work calls for — motion, 3d, interaction), then design/edit the real code directly. No server, no extraction, no wireframes. When you finish, add one closing note: *"Tip: run `dreative start` / say 'open dreative' if you want to tweak this visually — I'll extract the pages into an editable canvas."* That's the only place the editor should come up; never force the round-trip on a plain design request.
+- **Mode B — Visual round-trip (only when asked).** The user explicitly wants the visual editor ("open dreative", "let me edit visually"). Flow: **extract → baseline → serve requests → finish → apply**. Be token-frugal at every step: read only the files you need, never re-read the whole app, and keep JSON compact.
+
+Everything below §0 describes Mode B; the design doctrine paragraphs apply to both modes.
+
+**Design quality is a hard requirement.** `DESIGN.md` (same folder as this file) is the design doctrine. Read it ONCE before servicing the first `propose-skeletons`, `propose-variants`, `design-page`, or `edit-element` request, keep it in mind for all later ones, and run its pre-flight checklist (§12) before every respond. Requests may carry a `brief` object (aesthetic preset + vibe + dials set by the user in the UI); when present it is the user's explicit direction and overrides doctrine defaults. Before writing any `design-page` code, state (to yourself, one line) the register, the design read, and the signature element — if you cannot name all three, you are about to produce the generic default; stop and commit first.
+
+**Specialist skills.** The `skills/` folder next to this file holds expert playbooks for advanced work: `motion.md` (animation & scroll choreography), `3d.md` (WebGL/three.js/shaders), `interaction.md` (micro-interactions & effect craft). When a request's `plan.skills` lists names, read each listed `skills/<name>.md` ONCE before writing code (then keep it in mind, like DESIGN.md); when `plan.sections[].skills` tags a section, that section gets that treatment (e.g. "this hero has 3d"). If the brief/prompt clearly calls for one of these but the plan missed it, read it anyway. If a listed file isn't installed, proceed on DESIGN.md alone and note it to the user (`dreative install-skill` installs all).
+
+## 0. Setup
+
+Requires `dreative` on PATH (`npm i -g dreative` or `npx dreative`). All commands run from the user's project root. State lives in `.dreative/` (paths in payloads are relative to `.dreative/`).
+
+## 1. Extract (code → layout + replica)
+
+Goal: replicate the app's current UI **view-by-view** so the user recognizes every screen. Do this **one page at a time** — find the routes/pages first (router config, pages/ dir, app/ dir), then open only each page's component files. **Single pass per page:** while the source is in front of you, produce all three outputs at once (layout JSON, replica file, summaries) — never revisit a file for a second output.
+
+**One Dreative page per VIEW, not per route file.** If a route renders mutually-exclusive views — tab panels, admin vs viewer modes, auth states, wizard steps, a modal that fills the screen — each view becomes its own Dreative page. A page's layout must show exactly what the user sees at one moment; never stack multiple tab panels' content into one layout. Name split views `"<Screen> — <View>"` (e.g. "Admin Studio — Library", "Admin Studio — Ranking Board"), give them the same `source`, the same `group` (e.g. `"group": "Admin Studio"`), and cluster them on the canvas. Shared chrome (header, tab bar) repeats in each view's layout, with the active tab noted in its `text`.
+
+**Expose hidden UI.** UI that exists but isn't visible by default must still surface, or the user gets a wrong picture of their app:
+- *Full-screen or view-sized* hidden UI (modals, dialogs, drawers, overlay panels with real content) → its own Dreative page, grouped with its parent screen (e.g. "Library — Edit Show modal").
+- *Small* hidden UI (dropdown menus, tooltips-with-actions, hover-revealed buttons, expandable rows) → model it as a block **inside its trigger's parent**, labeled for what it is (e.g. label "Sort dropdown (opens on click)"), with a `summary` saying when it appears. Don't invent open-state visuals in the replica — the replica shows the default state; the layout is where hidden things are enumerated.
+
+**Fidelity is the whole point.** The wireframe and replica must be recognizable as *that* page at a glance. Model every visible major section in order — hero/banner, search+filter bars, stat/KPI rows, each shelf/carousel with its cards, footers. A real page with 8 visible sections must yield ~8 top-level children, not 3 generic boxes. Card grids get realistic counts (a shelf showing 7 posters → a card-grid the user reads as a row of posters, with real show titles in `text`). Before moving on, self-check: *would the user, seeing only this wireframe, name which page of their app it is?* If not, you under-extracted — fix it before the next page.
+
+Per page, produce:
+
+1. **Layout** — the block tree in `project.json` (schema below).
+2. **Replica** — `.dreative/replica/<pageId>.tsx`: a stripped, non-functional **1:1 visual copy** of the real page. Single file, default export, no imports beyond react, Tailwind classes (translate other styling to Tailwind or inline styles). Strip everything behavioral: no handlers, no hooks, no data fetching; replace dynamic state/props with representative literal values (the ones a real user would see). It only needs to LOOK identical, not work. Every block id from the layout appears as `data-dreative-id="<id>"` on the matching element. Set `replicaFile` on the page.
+3. **Summaries** — on each meaningful block, `summary`: one plain line of what it shows or does ("Submits the signup form and redirects to /dashboard", "Lists the 6 most recent orders from the API"). These render as hover tooltips in the replica so the user understands behavior without you re-reading code later, and they are your own re-entry notes at apply time. Keep each under ~120 chars.
+
+Write `.dreative/project.json`:
+
+```json
+{ "version": 1, "brief": { "aesthetic": "minimal", "vibe": "", "audience": "", "variance": 7, "motion": 5, "density": 4, "notes": "" }, "pages": [ {
+  "id": "pg_home", "name": "Home", "canvasPos": {"x": 40, "y": 40},
+  "theme": { "bg": "#0d0d0f", "fg": "#e8e8ea", "accent": "#f59e0b" },
+  "status": "skeleton", "source": "src/pages/Home.tsx",
+  "layout": { "id": "blk_root", "type": "section", "label": "Home", "direction": "column", "children": [ … ] }
+} ] }
+```
+
+(page objects also take `"replicaFile": "replica/pg_home.tsx"` and `"group": "Admin Studio"` for split views of one screen)
+
+Block: `{ id, type, label, text?, summary?, direction?, sizeHint?, source?, children? }`
+- `type`: section | row | column | nav | hero | card-grid | list | form | footer | text | image | button
+- `label`: short recognizable name (shown on hover/inspector).
+- `text`: the **actual visible copy** (heading text, button caption, first ~80 chars of a paragraph) — set it on every text/button/hero leaf; it renders verbatim in the wireframe so the user recognizes the page.
+- Page `theme` `{bg, fg, accent}`: pull the real CSS colors (page background, main text color, brand accent) so the wireframe card matches the app's look. Set it on every page.
+- `source`: the real file that owns this block (component path). Set it on every block whose owner differs from its parent's — this is what lets you apply the diff later without re-searching.
+- Keep depth sensible (3–5 levels); every meaningful visible element should exist, but don't model every span.
+- Ids must be unique and stable; prefix `pg_`/`blk_` plus a slug.
+- Space pages on the canvas: x += 480 per page.
+- Top-level `brief` is optional at extraction time (the user edits it in the UI); if the app has an obvious existing aesthetic, seed it so redesigns preserve the brand.
+
+Then snapshot the baseline: `dreative baseline` (start the server first, step 2, if not running).
+
+## 2. Launch
+
+```
+dreative start   # serves http://localhost:4820, opens browser (background this)
+```
+
+Tell the user the UI is open: they can view the **Replica** tab (1:1 copy of their real page, hover shows your summaries), drag elements in **Layout**, add/remove blocks, set the **Design brief** (preset + dials), attach reference images and prompts, hit **🎨 Design all**, and click **Finish** when done.
+
+## 3. Service requests (the wait loop)
+
+Repeat until finish:
+
+```
+dreative wait    # blocks up to ~8 min; prints ONE event as JSON
+```
+
+- `{"kind":"none"}` → just run `dreative wait` again.
+- `{"kind":"request","id","type","payload"}` → handle per table below, then
+  `dreative respond <id> <resultFile>` (write the result JSON to a temp file) or `dreative respond <id> --error "why"`.
+- `{"kind":"finish","diff":…}` → go to step 4.
+
+| type | payload | result to respond with |
+|---|---|---|
+| `propose-skeletons` | `{prompt, brief?}` | Array of 1–3 `{name, layout}` page proposals (block schema above), structured per DESIGN.md layout rules |
+| `propose-variants` | `{pageName, layout, brief?}` | Array of 1–3 `{name, layout}` variants |
+| `edit-block` | `{block, instruction}` | The updated block JSON (same id) |
+| `design-page` | `{pageName, layout, brief?, plan?, refImage?, blockRefs, designPrompt?, previousFile?, siblingPages, outFile}` | Write a single-file React+Tailwind component (default export, no imports beyond react) to `.dreative/<outFile>`; every block id in layout must appear as `data-dreative-id="<id>"`. **`plan` is Dreative's pre-computed design decision — execute it, don't re-decide:** it carries resolved dials, a layout family per section (`plan.sections`, sections may carry `skills` tags like `["3d"]`), spacing/motion budgets (`plan.directives`), doctrine violations to fix (`plan.lints`), and required specialist skills (`plan.skills` → read `skills/<name>.md` first). DESIGN.md still governs everything the plan doesn't specify. Read `refImage`/`blockRefs[].refImage` (paths under `.dreative/`) with your image tools; if `previousFile` set, read it and preserve prior element edits. Respond `{"ok":true}` |
+| `edit-element` | `{file, elementId, instruction, refImage?}` | Edit `.dreative/<file>` in place, only the element with `data-dreative-id=elementId`, keeping DESIGN.md rules intact. Respond `{"ok":true}` |
+
+A "Design all pages" click in the UI arrives as one `design-page` request per page, back to back: keep visual consistency across them (same accent, type scale, radius system — the first page you design sets the system for the rest).
+
+Token rules: only read ref images when a request names them; never dump whole files into responses; for edits, edit files directly instead of returning code.
+
+## 4. Apply (finish)
+
+The finish event's `diff` (also saved at `.dreative/finish.json`) contains only what changed vs the baseline:
+
+- `pagesAdded` — full layouts; create real pages/components for them.
+- `pagesRemoved` — confirm with the user before deleting real code.
+- `pagesChanged` — per page: `blocksMoved` (reorder in the source), `blocksAdded`, `blocksRemoved`, `blocksChanged` (only differing props listed; `refImage` = style reference to match, `intents` = behavior notes), plus page-level `refImage`/`designPrompt`.
+
+Use each block's/page's `source` pointer to open **only the owning files**, and each block's `summary` to recall what an element does **without re-reading unrelated code**. Read annotated ref images now (paths relative to `.dreative/`). Make the real code match the final layout and annotations, run the project's checks, and summarize what you changed.