pat/wursor
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

improved a lot of things

Browse Source
This commit is contained in:
SinachPat
2026-04-26 16:53:56 +01:00
parent 855ca56f5a
commit 7c160e853e
14 changed files with 179 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/public/features/live-artboard.html
+15 -15
View File
@@ -79,7 +79,7 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;}
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
.nav-dd-item:hover{background:var(--bg-muted);}
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:var(--blue);}
.nav-dd-text{display:flex;flex-direction:column;}
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
.nav-dd-desc{font-size:0.6875rem;color:var(--fg-3);margin-top:1px;line-height:1.4;}
@@ -238,28 +238,28 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
</a>
<div class="nav-dropdown-menu">
<a class="nav-dd-item" href="/features/live-artboard.html">
<div class="nav-dd-icon">⬜</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="2.5" width="11" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M5 6.5l1.8 2 1.2-1.6 1.4 2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
</a>
<a class="nav-dd-item" href="/features/origin-graph.html">
<div class="nav-dd-icon">◉</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
</a>
<a class="nav-dd-item" href="/features/intent-diff.html">
<div class="nav-dd-icon">△</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="4" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/><rect x="6" y="2.5" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
</a>
<div class="nav-dd-sep"></div>
<a class="nav-dd-item" href="/features/completion-zone.html">
<div class="nav-dd-icon">◈</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
</a>
<a class="nav-dd-item" href="/features/agent-bridge.html">
<div class="nav-dd-icon">⇄</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 5h11M9.5 2.5l3 2.5-3 2.5"/><path d="M12.5 9h-11M4.5 6.5L1.5 9l3 2.5"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code & more</span></div>
</a>
<a class="nav-dd-item" href="/features/integrations.html">
<div class="nav-dd-icon">🔗</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><path d="M5.5 8.5l3-3"/><path d="M3.8 6.8L2.8 7.8A2.5 2.5 0 006.3 11l1-1"/><path d="M10.2 7.2l1-1A2.5 2.5 0 007.7 3l-1 1"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma & more</span></div>
</a>
</div>
@@ -414,8 +414,8 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
<h2 class="d3">Not a mockup.<br>The actual component tree.</h2>
<p class="subtitle">Every artboard runs your actual React components in a sandboxed iframe. Your real styles, your real tokens, your real data — all visible and editable from the canvas.</p>
<ul class="feat-pts">
<li><span class="feat-pt-icon">⬜</span>Open any route from your dev server, staging URL, or production app.</li>
<li><span class="feat-pt-icon">◉</span>The full fiber tree is mapped — every component, hook, and context value.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="2.5" width="11" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M5 6.5l1.8 2 1.2-1.6 1.4 2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Open any route from your dev server, staging URL, or production app.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span>The full fiber tree is mapped — every component, hook, and context value.</li>
<li><span class="feat-pt-icon">⚡</span>Hot module reload propagates instantly. The canvas always reflects the current build.</li>
</ul>
<a href="#" class="btn btn-primary">Request early access</a>
@@ -453,9 +453,9 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
<h2 class="d3">Click. Edit. See it.<br>No context switch.</h2>
<p class="subtitle">Click any component in the canvas — the inspector populates with its live props. Change a value and the iframe re-renders in under 16ms. All edits accumulate into an Intent Diff automatically.</p>
<ul class="feat-pts">
<li><span class="feat-pt-icon">◈</span>Selection handles show the exact DOM rect reported by the fiber hook.</li>
<li><span class="feat-pt-icon">△</span>Every prop change is recorded as an entry in the artboard's undo stack.</li>
<li><span class="feat-pt-icon">⇄</span>Cmd+Z / Cmd+Shift+Z for full undo/redo — applied live to the iframe.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Selection handles show the exact DOM rect reported by the fiber hook.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="4" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/><rect x="6" y="2.5" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/></svg></span>Every prop change is recorded as an entry in the artboard's undo stack.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 5h11M9.5 2.5l3 2.5-3 2.5"/><path d="M12.5 9h-11M4.5 6.5L1.5 9l3 2.5"/></svg></span>Cmd+Z / Cmd+Shift+Z for full undo/redo — applied live to the iframe.</li>
</ul>
</div>
<div class="feat-vis feat-vis-light reveal" style="overflow:visible;">
@@ -548,19 +548,19 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
</div>
<div class="related-grid stagger">
<a class="related-card" href="/features/origin-graph.html">
<div class="related-icon">◉</div>
<div class="related-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></div>
<h3>Origin Graph</h3>
<p>The fiber tree feeds directly into the Origin Graph — building a queryable index of every component, token, and relationship in your app.</p>
<span class="related-link">Explore Origin Graph →</span>
</a>
<a class="related-card" href="/features/intent-diff.html">
<div class="related-icon">△</div>
<div class="related-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="4" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/><rect x="6" y="2.5" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/></svg></div>
<h3>Intent Diff</h3>
<p>Every visual edit in a live artboard generates an Intent Diff — a machine-readable, component-level description of exactly what changed.</p>
<span class="related-link">Explore Intent Diff →</span>
</a>
<a class="related-card" href="/features/completion-zone.html">
<div class="related-icon">◈</div>
<div class="related-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></div>
<h3>Completion Zone</h3>
<p>Mark any region of the artboard. AI fills it using your design language constraints, then renders the result live in the same artboard.</p>
<span class="related-link">Explore Completion Zone →</span>