npm - @feimacode/open-design-agent-kit - Versions diffs - 0.3.0-beta.3 → 0.4.0-beta.1 - Mend

@feimacode/open-design-agent-kit 0.3.0-beta.3 → 0.4.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/out/preview/shell.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";(()=>{function $(t,o){let r=t.getBoundingClientRect();return{left:r.left+o.left,top:r.top+o.top,width:o.width,height:o.height}}function F(t,o){let r=document.createElement("div");return r.className=o,r.style.left=`${t.left}px`,r.style.top=`${t.top}px`,r.style.width=`${t.width}px`,r.style.height=`${t.height}px`,r}function oe(t,o){let r=t.getBoundingClientRect(),s=p=>{let m=document.createElement("div");return m.className="od-guide-line od-guide-h",m.style.left=`${r.left}px`,m.style.top=`${p}px`,m.style.width=`${r.width}px`,m},v=p=>{let m=document.createElement("div");return m.className="od-guide-line od-guide-v",m.style.top=`${r.top}px`,m.style.left=`${p}px`,m.style.height=`${r.height}px`,m};return[s(o.top),s(o.top+o.height),v(o.left),v(o.left+o.width)]}function l(t){return t.replace(/[&<>"']/g,o=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[o])}function fe(){return`c-${Math.random().toString(36).slice(2,10)}`}function ye(t,o,r,s=new Date().toISOString()){return{id:fe(),...t.sourceElementId?{elementId:t.sourceElementId}:{},selector:t.selector,htmlHint:t.htmlHint,note:o,status:"open",createdAt:s,updatedAt:s,text:t.textExcerpt||void 0,rect:{x:Math.round(t.docRect.left),y:Math.round(t.docRect.top),width:Math.round(t.docRect.width),height:Math.round(t.docRect.height)},viewport:t.viewport,host:r}}function se(t){let{panel:o,iframe:r}=t,s=[],v=(i,a=[])=>{t.persist(i,a),t.onListChanged()},p=i=>{o.hidden=!1,o.innerHTML=`
+"use strict";(()=>{function re(t){let o=t.findings.length;if(o===0)return`Second look: ${t.verdict}`;let r=t.verdict==="ship"?o===1?"note":"notes":o===1?"fix":"fixes";return`Second look: ${t.verdict}, ${o} ${r}`}function A(t,o){let r=t.getBoundingClientRect();return{left:r.left+o.left,top:r.top+o.top,width:o.width,height:o.height}}function j(t,o){let r=document.createElement("div");return r.className=o,r.style.left=`${t.left}px`,r.style.top=`${t.top}px`,r.style.width=`${t.width}px`,r.style.height=`${t.height}px`,r}function se(t,o){let r=t.getBoundingClientRect(),i=p=>{let m=document.createElement("div");return m.className="od-guide-line od-guide-h",m.style.left=`${r.left}px`,m.style.top=`${p}px`,m.style.width=`${r.width}px`,m},y=p=>{let m=document.createElement("div");return m.className="od-guide-line od-guide-v",m.style.top=`${r.top}px`,m.style.left=`${p}px`,m.style.height=`${r.height}px`,m};return[i(o.top),i(o.top+o.height),y(o.left),y(o.left+o.width)]}function a(t){return t.replace(/[&<>"']/g,o=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[o])}function be(){return`c-${Math.random().toString(36).slice(2,10)}`}function we(t,o,r,i=new Date().toISOString()){return{id:be(),...t.sourceElementId?{elementId:t.sourceElementId}:{},selector:t.selector,htmlHint:t.htmlHint,note:o,status:"open",createdAt:i,updatedAt:i,text:t.textExcerpt||void 0,rect:{x:Math.round(t.docRect.left),y:Math.round(t.docRect.top),width:Math.round(t.docRect.width),height:Math.round(t.docRect.height)},viewport:t.viewport,host:r}}function de(t){let{panel:o,iframe:r}=t,i=[],y=(d,c=[])=>{t.persist(d,c),t.onListChanged()},p=d=>{o.hidden=!1,o.innerHTML=`
     <div class="od-panel-header">
       <span class="od-panel-header-title">Add comment</span>
       <button id="od-comment-close" class="od-panel-close" aria-label="Close">\xD7</button>
@@ -11,37 +11,37 @@
       <button id="od-comment-cancel" class="od-btn">Cancel</button>
       <button id="od-comment-save" class="od-btn od-btn-primary">Add</button>
     </div>
-  `;let a=document.getElementById("od-comment-text");a.focus();let h=()=>{let u=a.value.trim();if(!u)return;let g=ye(i,u,t.host);s.push(g),v([g]),t.closePanel(),t.onAdded?.(g,i)};document.getElementById("od-comment-close").addEventListener("click",t.closePanel),document.getElementById("od-comment-cancel").addEventListener("click",t.closePanel),document.getElementById("od-comment-save").addEventListener("click",h),a.addEventListener("keydown",u=>{u.key==="Enter"&&(u.metaKey||u.ctrlKey)&&h(),u.key==="Escape"&&t.closePanel()})},m=i=>{o.hidden=!1;let a=i.status==="sent"?"Sent to the agent":"Open";o.innerHTML=`
+  `;let c=document.getElementById("od-comment-text");c.focus();let u=()=>{let h=c.value.trim();if(!h)return;let g=we(d,h,t.host);i.push(g),y([g]),t.closePanel(),t.onAdded?.(g,d)};document.getElementById("od-comment-close").addEventListener("click",t.closePanel),document.getElementById("od-comment-cancel").addEventListener("click",t.closePanel),document.getElementById("od-comment-save").addEventListener("click",u),c.addEventListener("keydown",h=>{h.key==="Enter"&&(h.metaKey||h.ctrlKey)&&u(),h.key==="Escape"&&t.closePanel()})},m=d=>{o.hidden=!1;let c=d.status==="sent"?"Sent to the agent":"Open";o.innerHTML=`
     <div class="od-panel-header">
-      <span class="od-panel-header-title">Comment \xB7 ${l(a)}</span>
+      <span class="od-panel-header-title">Comment \xB7 ${a(c)}</span>
       <button id="od-pin-close" class="od-panel-close" aria-label="Close">\xD7</button>
     </div>
     <div class="od-panel-body">
-      <p class="od-comment-note">${l(i.note)}</p>
-      <code class="od-comment-target">${l(i.selector)}</code>
+      <p class="od-comment-note">${a(d.note)}</p>
+      <code class="od-comment-target">${a(d.selector)}</code>
     </div>
     <div class="od-panel-footer">
       <button id="od-pin-delete" class="od-btn od-btn-danger">Delete</button>
       <span class="od-spacer"></span>
       <button id="od-pin-resolve" class="od-btn">Resolve</button>
-    </div>`,document.getElementById("od-pin-close").addEventListener("click",t.closePanel),document.getElementById("od-pin-delete").addEventListener("click",()=>{s=s.filter(h=>h.id!==i.id),v([],[i.id]),t.closePanel()}),document.getElementById("od-pin-resolve").addEventListener("click",()=>{I.patch(i.id,{status:"resolved"}),t.closePanel()})},I={setComments(i){s=Array.isArray(i)?[...i]:[],t.onListChanged()},all:()=>s,open:()=>s.filter(i=>i.status==="open"),openInput:p,forBridge:()=>s.map(i=>({id:i.id,elementId:i.elementId,selector:i.selector,status:i.status,text:i.text,htmlHint:i.htmlHint})),pins(i){let a=[];for(let h of s){if(h.status==="resolved")continue;let u=i.find(b=>b.commentId===h.id)?.rect,g=u?$(r,u):null,f=document.createElement("div");f.className=`od-pin ${g?"anchored":"lost"}${h.status==="sent"?" sent":""}`,f.title=h.note,f.style.left=g?`${g.left+g.width/2}px`:"8px",f.style.top=g?`${g.top}px`:"8px",t.pinDetails&&(f.style.pointerEvents="auto",f.addEventListener("click",b=>{b.stopPropagation(),m(h)})),a.push(f)}return a},markOpenSent(){let i=new Date().toISOString(),a=[];return s=s.map(h=>{if(h.status!=="open")return h;let u={...h,status:"sent",updatedAt:i};return a.push(u),u}),a.length&&v(a),a},patch(i,a){let h=new Date().toISOString(),u;s=s.map(g=>g.id===i?u={...g,...a,updatedAt:h}:g),u&&v([u])},upsertLocal(i){let a=s.findIndex(h=>h.id===i.id);a===-1?s.push(i):s[a]=i,t.onListChanged()}};return I}var ve={eye:'<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',comment:'<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',pencil:'<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>',chevronLeft:'<path d="m15 18-6-6 6-6"/>',chevronRight:'<path d="m9 18 6-6-6-6"/>',chevronDown:'<path d="m6 9 6 6 6-6"/>',refresh:'<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',expand:'<path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/>',code:'<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',share:'<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/>',export:'<path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/>',layers:'<path d="m12 2 10 5-10 5L2 7Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/>',image:'<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',users:'<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',link:'<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',check:'<path d="M20 6 9 17l-5-5"/>',arrowLeft:'<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',palette:'<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>',sliders:'<line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/>',send:'<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',mail:'<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',clipboard:'<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>'};function T(t,o=16){return`<svg class="od-icon" width="${o}" height="${o}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ve[t]}</svg>`}var q="bridge";function ie(t){return typeof t=="object"&&t!==null&&t.od===q&&typeof t.type=="string"}var j=document.getElementById("root"),P=JSON.parse(j.dataset.odConfig??"{}"),de=window.matchMedia("(prefers-color-scheme: dark)"),ae=()=>{document.body.classList.toggle("od-dark",de.matches)};ae();de.addEventListener("change",ae);async function R(t,o){let r=await fetch(t,{method:o?.method??"GET",headers:o?.body!==void 0?{"Content-Type":"application/json"}:void 0,body:o?.body!==void 0?JSON.stringify(o.body):void 0}),s=await r.json().catch(()=>({}));if(!r.ok)throw new Error(s.error??`HTTP ${r.status}`);return s}var L=document.createElement("div");L.className="od-toast";L.hidden=!0;L.setAttribute("role","status");document.body.appendChild(L);var re=0;function D(t){L.textContent=t,L.hidden=!1,clearTimeout(re),re=window.setTimeout(()=>{L.hidden=!0},4e3)}async function ce(t){j.innerHTML=`<div class="od-picker"><div class="od-picker-inner">
+    </div>`,document.getElementById("od-pin-close").addEventListener("click",t.closePanel),document.getElementById("od-pin-delete").addEventListener("click",()=>{i=i.filter(u=>u.id!==d.id),y([],[d.id]),t.closePanel()}),document.getElementById("od-pin-resolve").addEventListener("click",()=>{$.patch(d.id,{status:"resolved"}),t.closePanel()})},$={setComments(d){i=Array.isArray(d)?[...d]:[],t.onListChanged()},all:()=>i,open:()=>i.filter(d=>d.status==="open"),openInput:p,forBridge:()=>i.map(d=>({id:d.id,elementId:d.elementId,selector:d.selector,status:d.status,text:d.text,htmlHint:d.htmlHint})),pins(d){let c=[];for(let u of i){if(u.status==="resolved")continue;let h=d.find(b=>b.commentId===u.id)?.rect,g=h?A(r,h):null,f=document.createElement("div");f.className=`od-pin ${g?"anchored":"lost"}${u.status==="sent"?" sent":""}`,f.title=u.note,f.style.left=g?`${g.left+g.width/2}px`:"8px",f.style.top=g?`${g.top}px`:"8px",t.pinDetails&&(f.style.pointerEvents="auto",f.addEventListener("click",b=>{b.stopPropagation(),m(u)})),c.push(f)}return c},markOpenSent(){let d=new Date().toISOString(),c=[];return i=i.map(u=>{if(u.status!=="open")return u;let h={...u,status:"sent",updatedAt:d};return c.push(h),h}),c.length&&y(c),c},patch(d,c){let u=new Date().toISOString(),h;i=i.map(g=>g.id===d?h={...g,...c,updatedAt:u}:g),h&&y([h])},upsertLocal(d){let c=i.findIndex(u=>u.id===d.id);c===-1?i.push(d):i[c]=d,t.onListChanged()}};return $}var Ee={eye:'<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',comment:'<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',pencil:'<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>',chevronLeft:'<path d="m15 18-6-6 6-6"/>',chevronRight:'<path d="m9 18 6-6-6-6"/>',chevronDown:'<path d="m6 9 6 6 6-6"/>',refresh:'<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',expand:'<path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/>',code:'<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',share:'<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/>',export:'<path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/>',layers:'<path d="m12 2 10 5-10 5L2 7Z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/>',image:'<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',users:'<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',link:'<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',check:'<path d="M20 6 9 17l-5-5"/>',arrowLeft:'<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',palette:'<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>',sliders:'<line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/>',send:'<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',mail:'<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',clipboard:'<rect width="8" height="4" x="8" y="2" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>'};function L(t,o=16){return`<svg class="od-icon" width="${o}" height="${o}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${Ee[t]}</svg>`}var Q="bridge";function ae(t){return typeof t=="object"&&t!==null&&t.od===Q&&typeof t.type=="string"}var V=document.getElementById("root"),G=JSON.parse(V.dataset.odConfig??"{}"),le=window.matchMedia("(prefers-color-scheme: dark)"),pe=()=>{document.body.classList.toggle("od-dark",le.matches)};pe();le.addEventListener("change",pe);async function S(t,o){let r=await fetch(t,{method:o?.method??"GET",headers:o?.body!==void 0?{"Content-Type":"application/json"}:void 0,body:o?.body!==void 0?JSON.stringify(o.body):void 0}),i=await r.json().catch(()=>({}));if(!r.ok)throw new Error(i.error??`HTTP ${r.status}`);return i}var R=document.createElement("div");R.className="od-toast";R.hidden=!0;R.setAttribute("role","status");document.body.appendChild(R);var ce=0;function D(t){R.textContent=t,R.hidden=!1,clearTimeout(ce),ce=window.setTimeout(()=>{R.hidden=!0},4e3)}async function me(t){V.innerHTML=`<div class="od-picker"><div class="od-picker-inner">
     <h1>Open Design preview</h1>
-    <p>${t?l(t):"Pick a design to preview and comment on."}</p>
+    <p>${t?a(t):"Pick a design to preview and comment on."}</p>
     <ul class="od-picker-list" id="od-picker-list"><li><p>Loading\u2026</p></li></ul>
-  </div></div>`;let o=document.getElementById("od-picker-list");try{let{artifacts:r}=await R("api/artifacts");o.innerHTML=r.length?r.map(s=>`<li><a href="?entry=${encodeURIComponent(s.entryPath)}">${l(s.title)}<small>${l(s.entryPath)}</small></a></li>`).join(""):"<li><p>No designs are registered in this workspace yet. Ask your agent to make one.</p></li>"}catch(r){o.innerHTML=`<li><p>${l(r instanceof Error?r.message:String(r))}</p></li>`}}async function be(t){let o;try{o=await R(`api/state?entry=${encodeURIComponent(t)}`)}catch(e){await ce(e instanceof Error?e.message:String(e));return}document.title=`${o.title} \xB7 Open Design`;let r=`entry=${encodeURIComponent(t)}`;j.innerHTML=`
+  </div></div>`;let o=document.getElementById("od-picker-list");try{let{artifacts:r}=await S("api/artifacts");o.innerHTML=r.length?r.map(i=>`<li><a href="?entry=${encodeURIComponent(i.entryPath)}">${a(i.title)}<small>${a(i.entryPath)}</small></a></li>`).join(""):"<li><p>No designs are registered in this workspace yet. Ask your agent to make one.</p></li>"}catch(r){o.innerHTML=`<li><p>${a(r instanceof Error?r.message:String(r))}</p></li>`}}async function xe(t){let o;try{o=await S(`api/state?entry=${encodeURIComponent(t)}`)}catch(e){await me(e instanceof Error?e.message:String(e));return}document.title=`${o.title} \xB7 Open Design`;let r=`entry=${encodeURIComponent(t)}`;V.innerHTML=`
   <div class="od-shell" style="display:flex;flex-direction:column;height:100%">
   <div class="od-toolbar" role="toolbar" aria-label="Preview">
     <div class="od-segmented" role="radiogroup" aria-label="Mode">
-      <button data-mode="view" class="od-seg-btn active" role="radio" aria-checked="true" title="View">${T("eye")}<span class="od-label">View</span></button>
-      <button data-mode="comment" class="od-seg-btn" role="radio" aria-checked="false" tabindex="-1" title="Comment on elements">${T("comment")}<span class="od-label">Comment</span></button>
+      <button data-mode="view" class="od-seg-btn active" role="radio" aria-checked="true" title="View">${L("eye")}<span class="od-label">View</span></button>
+      <button data-mode="comment" class="od-seg-btn" role="radio" aria-checked="false" tabindex="-1" title="Comment on elements">${L("comment")}<span class="od-label">Comment</span></button>
     </div>
-    <a class="od-icon-btn" href="./" title="All designs" aria-label="All designs">${T("chevronLeft")}</a>
-    <span class="od-title">${l(o.title)}</span>
-    <span class="od-path">${l(t)}</span>
+    <a class="od-icon-btn" href="./" title="All designs" aria-label="All designs">${L("chevronLeft")}</a>
+    <span class="od-title">${a(o.title)}</span>
+    <span class="od-path">${a(t)}</span>
     <span class="od-toolbar-spacer"></span>
     <span id="od-live" class="od-live off" title="Reloads when the design changes"><span>Live</span></span>
-    <button id="od-checks-toggle" class="od-btn" title="Check screenshots: before and after" aria-pressed="false">${T("check")}<span class="od-label">Checks</span><span id="od-checks-dot" class="od-dot" hidden></span></button>
-    <button id="od-send-comments" class="od-btn od-btn-primary" title="Copy an instruction for your agent to apply the open comments" hidden>${T("send")}<span class="od-label">Send to agent</span><span id="od-send-count" class="od-count"></span></button>
+    <button id="od-checks-toggle" class="od-btn" title="Check screenshots: before and after" aria-pressed="false">${L("check")}<span class="od-label">Checks</span><span id="od-checks-dot" class="od-dot" hidden></span></button>
+    <button id="od-send-comments" class="od-btn od-btn-primary" title="Copy an instruction for your agent to apply the open comments" hidden>${L("send")}<span class="od-label">Send to agent</span><span id="od-send-count" class="od-count"></span></button>
   </div>
   <div class="od-stage">
     <div id="od-errors" class="od-errors" role="status" hidden>
@@ -53,18 +53,18 @@
   </div>
   <div id="od-panel" class="od-panel" hidden></div>
   <div id="od-checks" class="od-panel od-checks" hidden></div>
-  </div>`;let s=document.getElementById("od-preview"),v=document.getElementById("od-pins"),p=document.getElementById("od-panel"),m=document.getElementById("od-checks"),I=document.getElementById("od-checks-toggle"),i=document.getElementById("od-checks-dot"),a=document.getElementById("od-send-comments"),h=document.getElementById("od-send-count"),u=document.getElementById("od-live"),g="view",f=null,b=null,k=null,S=[],G=!1,O=!1,N=!1,z={x:0,y:0},H,w=e=>{s.contentWindow?.postMessage({od:q,...e},P.designOrigin)},le=()=>{p.hidden=!0,b=null,k=null,w({type:"clear-selection"}),x()},V=()=>{let e=E.open().length;a.hidden=g!=="comment"&&e===0,a.disabled=e===0,h.textContent=e?String(e):""},E=se({panel:p,iframe:s,host:"browser",pinDetails:!0,persist:(e,n)=>{R(`api/comments?${r}`,{method:"POST",body:{changed:e,deletedIds:n}}).catch(c=>D(`Couldn't save the comment: ${c instanceof Error?c.message:String(c)}`))},closePanel:le,onListChanged:()=>{V(),w({type:"set-comments",comments:E.forBridge()}),x()},onAdded:(e,n)=>void pe(e,n)});function x(){if(v.innerHTML="",!(g==="view"||N)){if(f&&v.appendChild(F($(s,f),"od-hover-box")),b&&k){let e=$(s,k);oe(s,e).forEach(n=>v.appendChild(n)),v.appendChild(F(e,"od-select-box"))}E.pins(S).forEach(e=>v.appendChild(e))}}let W=()=>new Promise(e=>requestAnimationFrame(()=>e()));async function pe(e,n){if(o.cropSupport==="none")return;N=!0,x(),await W(),await W();let c=s.getBoundingClientRect(),d=$(s,n.rect);try{let y=await R(`api/crop?${r}`,{method:"POST",body:{commentId:e.id,element:{x:d.left,y:d.top,width:d.width,height:d.height},stage:{x:c.left,y:c.top,width:c.width,height:c.height},docRect:{x:n.docRect.left,y:n.docRect.top,width:n.docRect.width,height:n.docRect.height},viewport:n.viewport}});y.comment?E.upsertLocal(y.comment):y.reason&&D(y.reason)}catch(y){D(`The comment was saved without a screenshot: ${y instanceof Error?y.message:String(y)}`)}finally{N=!1,x()}}function me(){p.hidden=!1,p.innerHTML=`
+  </div>`;let i=document.getElementById("od-preview"),y=document.getElementById("od-pins"),p=document.getElementById("od-panel"),m=document.getElementById("od-checks"),$=document.getElementById("od-checks-toggle"),d=document.getElementById("od-checks-dot"),c=document.getElementById("od-send-comments"),u=document.getElementById("od-send-count"),h=document.getElementById("od-live"),g="view",f=null,b=null,k=null,H=[],P=!1,_=!1,O=!1,J={x:0,y:0},q,x=e=>{i.contentWindow?.postMessage({od:Q,...e},G.designOrigin)},ue=()=>{p.hidden=!0,b=null,k=null,x({type:"clear-selection"}),E()},X=()=>{let e=w.open().length;c.hidden=g!=="comment"&&e===0,c.disabled=e===0,u.textContent=e?String(e):""},w=de({panel:p,iframe:i,host:"browser",pinDetails:!0,persist:(e,n)=>{S(`api/comments?${r}`,{method:"POST",body:{changed:e,deletedIds:n}}).catch(l=>D(`Couldn't save the comment: ${l instanceof Error?l.message:String(l)}`))},closePanel:ue,onListChanged:()=>{X(),x({type:"set-comments",comments:w.forBridge()}),E()},onAdded:(e,n)=>void he(e,n)});function E(){if(y.innerHTML="",!(g==="view"||O)){if(f&&y.appendChild(j(A(i,f),"od-hover-box")),b&&k){let e=A(i,k);se(i,e).forEach(n=>y.appendChild(n)),y.appendChild(j(e,"od-select-box"))}w.pins(H).forEach(e=>y.appendChild(e))}}let z=()=>new Promise(e=>requestAnimationFrame(()=>e()));async function he(e,n){if(o.cropSupport==="none")return;O=!0,E(),await z(),await z();let l=i.getBoundingClientRect(),v=A(i,n.rect);try{let s=await S(`api/crop?${r}`,{method:"POST",body:{commentId:e.id,element:{x:v.left,y:v.top,width:v.width,height:v.height},stage:{x:l.left,y:l.top,width:l.width,height:l.height},docRect:{x:n.docRect.left,y:n.docRect.top,width:n.docRect.width,height:n.docRect.height},viewport:n.viewport}});s.comment?w.upsertLocal(s.comment):s.reason&&D(s.reason)}catch(s){D(`The comment was saved without a screenshot: ${s instanceof Error?s.message:String(s)}`)}finally{O=!1,E()}}function ge(){p.hidden=!1,p.innerHTML=`
     <div class="od-panel-header">
       <span class="od-panel-header-title">Comment unavailable</span>
       <button id="od-bridge-close" class="od-panel-close" aria-label="Close">\xD7</button>
     </div>
-    <div class="od-panel-body"><p>This design's page didn't start the preview helper that Comment relies on, usually because one of its own scripts failed first. Check the error banner, or ask your agent to fix the page.</p></div>`,document.getElementById("od-bridge-close").addEventListener("click",()=>{p.hidden=!0})}let A=Array.from(document.querySelectorAll(".od-seg-btn[data-mode]"));function J(e){if(e!=="view"&&O&&!G){me();return}g=e,A.forEach(n=>{let c=n.dataset.mode===e;n.classList.toggle("active",c),n.setAttribute("aria-checked",String(c)),n.tabIndex=c?0:-1}),p.hidden=!0,b=null,k=null,f=null,S=[],V(),w({type:"set-mode",mode:e}),w({type:"set-comments",comments:E.forBridge()}),x()}A.forEach((e,n)=>{e.addEventListener("click",()=>J(e.dataset.mode)),e.addEventListener("keydown",c=>{let d=c.key==="ArrowRight"?1:c.key==="ArrowLeft"?-1:0;if(!d)return;c.preventDefault();let y=A[(n+d+A.length)%A.length];J(y.dataset.mode),y.focus()})});let Z=document.getElementById("od-errors"),he=document.getElementById("od-errors-list"),C=[],K=()=>{Z.hidden=C.length===0,he.innerHTML=C.slice(0,3).map(e=>`<code>${l(e)}</code>`).join("")+(C.length>3?`<span>and ${C.length-3} more</span>`:"")};document.getElementById("od-errors-close").addEventListener("click",()=>{Z.hidden=!0}),window.addEventListener("message",e=>{if(e.source!==s.contentWindow||e.origin!==P.designOrigin)return;if(typeof e.data?.odPreviewError=="string"){let c=e.data.odPreviewError;!C.includes(c)&&C.length<20&&(C.push(c),K());return}if(!ie(e.data))return;let n=e.data;switch(n.type){case"ready":G=!0,w({type:"set-mode",mode:g}),w({type:"set-comments",comments:E.forBridge()}),H&&(w({type:"scroll-to",...H}),H=void 0);break;case"select":if(g==="view")break;b=n.element,k=n.element.rect,f=null,x(),E.openInput(b);break;case"rects":f=n.hover,k=b?n.selection:null,S=Array.isArray(n.pins)?n.pins:[],x();break;case"scroll":Number.isFinite(n.x)&&Number.isFinite(n.y)&&(z={x:n.x,y:n.y});break;case"open-local-link":ue(String(n.href??""));break}});async function ue(e){let n=new URL(e,o.designUrl),c=`/${new URL(o.designUrl).pathname.split("/")[1]}/`,d=decodeURIComponent(n.pathname.slice(c.length));try{await R(`api/state?entry=${encodeURIComponent(d)}`),location.search=`?entry=${encodeURIComponent(d)}`}catch{s.src=n.href}}let Q=0;function Y(e){G=!1,O=!1,C=[],K(),f=null,b=null,k=null,S=[],!p.hidden&&p.querySelector("#od-comment-text")||(p.hidden=!0),H=e?z:void 0,Q++,s.src=`${o.designUrl}?v=${Q}`,x()}s.addEventListener("load",()=>{O=!0,w({type:"hello"}),x()}),window.addEventListener("resize",x),a.addEventListener("click",async()=>{let e=E.open();if(e.length===0)return;let n=`Apply my ${e.length===1?"comment":`${e.length} comments`} on the Open Design artifact "${t}": call get_open_design_artifact for it, address each open comment, then pass their ids as resolvedCommentIds when you re-register it.`;E.markOpenSent();try{await navigator.clipboard.writeText(n),D("Copied. Paste it into your agent.")}catch{p.hidden=!1,p.innerHTML=`
+    <div class="od-panel-body"><p>This design's page didn't start the preview helper that Comment relies on, usually because one of its own scripts failed first. Check the error banner, or ask your agent to fix the page.</p></div>`,document.getElementById("od-bridge-close").addEventListener("click",()=>{p.hidden=!0})}let M=Array.from(document.querySelectorAll(".od-seg-btn[data-mode]"));function W(e){if(e!=="view"&&_&&!P){ge();return}g=e,M.forEach(n=>{let l=n.dataset.mode===e;n.classList.toggle("active",l),n.setAttribute("aria-checked",String(l)),n.tabIndex=l?0:-1}),p.hidden=!0,b=null,k=null,f=null,H=[],X(),x({type:"set-mode",mode:e}),x({type:"set-comments",comments:w.forBridge()}),E()}M.forEach((e,n)=>{e.addEventListener("click",()=>W(e.dataset.mode)),e.addEventListener("keydown",l=>{let v=l.key==="ArrowRight"?1:l.key==="ArrowLeft"?-1:0;if(!v)return;l.preventDefault();let s=M[(n+v+M.length)%M.length];W(s.dataset.mode),s.focus()})});let Y=document.getElementById("od-errors"),fe=document.getElementById("od-errors-list"),C=[],Z=()=>{Y.hidden=C.length===0,fe.innerHTML=C.slice(0,3).map(e=>`<code>${a(e)}</code>`).join("")+(C.length>3?`<span>and ${C.length-3} more</span>`:"")};document.getElementById("od-errors-close").addEventListener("click",()=>{Y.hidden=!0}),window.addEventListener("message",e=>{if(e.source!==i.contentWindow||e.origin!==G.designOrigin)return;if(typeof e.data?.odPreviewError=="string"){let l=e.data.odPreviewError;!C.includes(l)&&C.length<20&&(C.push(l),Z());return}if(!ae(e.data))return;let n=e.data;switch(n.type){case"ready":P=!0,x({type:"set-mode",mode:g}),x({type:"set-comments",comments:w.forBridge()}),q&&(x({type:"scroll-to",...q}),q=void 0);break;case"select":if(g==="view")break;b=n.element,k=n.element.rect,f=null,E(),w.openInput(b);break;case"rects":f=n.hover,k=b?n.selection:null,H=Array.isArray(n.pins)?n.pins:[],E();break;case"scroll":Number.isFinite(n.x)&&Number.isFinite(n.y)&&(J={x:n.x,y:n.y});break;case"open-local-link":ye(String(n.href??""));break}});async function ye(e){let n=new URL(e,o.designUrl),l=`/${new URL(o.designUrl).pathname.split("/")[1]}/`,v=decodeURIComponent(n.pathname.slice(l.length));try{await S(`api/state?entry=${encodeURIComponent(v)}`),location.search=`?entry=${encodeURIComponent(v)}`}catch{i.src=n.href}}let K=0;function ee(e){P=!1,_=!1,C=[],Z(),f=null,b=null,k=null,H=[],!p.hidden&&p.querySelector("#od-comment-text")||(p.hidden=!0),q=e?J:void 0,K++,i.src=`${o.designUrl}?v=${K}`,E()}i.addEventListener("load",()=>{_=!0,x({type:"hello"}),E()}),window.addEventListener("resize",E),c.addEventListener("click",async()=>{let e=w.open();if(e.length===0)return;let n=`Apply my ${e.length===1?"comment":`${e.length} comments`} on the Open Design artifact "${t}": call get_open_design_artifact for it, address each open comment, then pass their ids as resolvedCommentIds when you re-register it.`;w.markOpenSent();try{await navigator.clipboard.writeText(n),D("Copied. Paste it into your agent.")}catch{p.hidden=!1,p.innerHTML=`
       <div class="od-panel-header"><span class="od-panel-header-title">Paste this into your agent</span><button id="od-copy-close" class="od-panel-close" aria-label="Close">\xD7</button></div>
-      <div class="od-panel-body"><textarea class="od-textarea od-copy-text" readonly>${l(n)}</textarea></div>`,p.querySelector("textarea").select(),document.getElementById("od-copy-close").addEventListener("click",()=>{p.hidden=!0})}});let B=[],_;async function X(){try{B=(await R(`api/checks?${r}`)).runs}catch{B=[]}m.hidden||U()}let ee=(e,n)=>`api/check-image?${r}&run=${encodeURIComponent(e.id)}&file=${encodeURIComponent(n)}`,te=e=>`${new Date(e.createdAt).toLocaleString()} \xB7 ${e.errors} error${e.errors===1?"":"s"}, ${e.warnings} warning${e.warnings===1?"":"s"}`;function U(){let e=B.find(d=>d.id===_)??B[0],n=e?B[B.indexOf(e)+1]:void 0,c=e?`<div class="od-check-runs">${B.map(d=>`<button class="od-btn od-check-run${d===e?" active":""}" data-run="${l(d.id)}">${l(new Date(d.createdAt).toLocaleTimeString())}</button>`).join("")}</div>
-        <p class="od-check-summary">After: ${l(te(e))}${n?`<br>Before: ${l(te(n))}`:"<br>No earlier check to compare with."}</p>
-        ${e.images.map(d=>{let y=n?.images.find(ge=>ge.label===d.label);return`<div class="od-check-label">${l(d.label)}</div><div class="od-check-pair">
-              <figure>${y?`<img src="${ee(n,y.file)}" alt="Before: ${l(d.label)}" loading="lazy">`:'<div class="od-check-empty">No earlier image</div>'}<figcaption>Before</figcaption></figure>
-              <figure><img src="${ee(e,d.file)}" alt="After: ${l(d.label)}" loading="lazy"><figcaption>After</figcaption></figure></div>`}).join("")}
-        ${e.findings.length?`<div class="od-panel-section-title">Findings</div><ul class="od-shape-findings">${e.findings.map(d=>`<li class="od-shape-finding od-sev-${l(d.severity)}"><b>${l(d.severity)}</b> [${l(d.check)}] ${l(d.message)}</li>`).join("")}</ul>`:""}`:'<p class="od-check-empty">No checks yet. Your agent runs one after making or changing a design.</p>';m.innerHTML=`
+      <div class="od-panel-body"><textarea class="od-textarea od-copy-text" readonly>${a(n)}</textarea></div>`,p.querySelector("textarea").select(),document.getElementById("od-copy-close").addEventListener("click",()=>{p.hidden=!0})}});let I=[],T,U;async function N(){try{({runs:I,critique:T}=await S(`api/checks?${r}`))}catch{I=[],T=void 0}m.hidden||F()}let te=(e,n)=>`api/check-image?${r}&run=${encodeURIComponent(e.id)}&file=${encodeURIComponent(n)}`,ne=e=>`${new Date(e.createdAt).toLocaleString()} \xB7 ${e.errors} error${e.errors===1?"":"s"}, ${e.warnings} warning${e.warnings===1?"":"s"}`;function F(){let e=I.find(s=>s.id===U)??I[0],n=e?I[I.indexOf(e)+1]:void 0,l=e?`<div class="od-check-runs">${I.map(s=>`<button class="od-btn od-check-run${s===e?" active":""}" data-run="${a(s.id)}">${a(new Date(s.createdAt).toLocaleTimeString())}</button>`).join("")}</div>
+        <p class="od-check-summary">After: ${a(ne(e))}${n?`<br>Before: ${a(ne(n))}`:"<br>No earlier check to compare with."}</p>
+        ${e.images.map(s=>{let ie=n?.images.find(ve=>ve.label===s.label);return`<div class="od-check-label">${a(s.label)}</div><div class="od-check-pair">
+              <figure>${ie?`<img src="${te(n,ie.file)}" alt="Before: ${a(s.label)}" loading="lazy">`:'<div class="od-check-empty">No earlier image</div>'}<figcaption>Before</figcaption></figure>
+              <figure><img src="${te(e,s.file)}" alt="After: ${a(s.label)}" loading="lazy"><figcaption>After</figcaption></figure></div>`}).join("")}
+        ${e.findings.length?`<div class="od-panel-section-title">Findings</div><ul class="od-shape-findings">${e.findings.map(s=>`<li class="od-shape-finding od-sev-${a(s.severity)}"><b>${a(s.severity)}</b> [${a(s.check)}] ${a(s.message)}</li>`).join("")}</ul>`:""}`:'<p class="od-check-empty">No checks yet. Your agent runs one after making or changing a design.</p>',v=T?`<div class="od-panel-section-title">${a(re(T))}</div>${T.findings.length?`<ul class="od-shape-findings">${T.findings.map(s=>`<li class="od-shape-finding">${s.where?`<b>${a(s.where)}</b> `:""}${s.problem?`${a(s.problem)}. `:""}${a(s.fix)}</li>`).join("")}</ul>`:""}`:"";m.innerHTML=`
       <div class="od-panel-header"><span class="od-panel-header-title">Checks</span><button id="od-checks-close" class="od-panel-close" aria-label="Close">\xD7</button></div>
-      <div class="od-panel-body">${c}</div>`,document.getElementById("od-checks-close").addEventListener("click",()=>ne(!1)),m.querySelectorAll("[data-run]").forEach(d=>d.addEventListener("click",()=>{_=d.dataset.run,U()}))}function ne(e=m.hidden){m.hidden=!e,I.classList.toggle("active",e),I.setAttribute("aria-pressed",String(e)),e&&(i.hidden=!0,p.hidden=!0,U())}I.addEventListener("click",()=>ne());let M=new EventSource(`events?${r}`);M.addEventListener("open",()=>u.classList.remove("off")),M.addEventListener("error",()=>u.classList.add("off")),M.addEventListener("source-updated",()=>Y(!0)),M.addEventListener("comments-updated",e=>{let n=JSON.parse(e.data);E.setComments(n.comments??[])}),M.addEventListener("checks-updated",e=>{_=JSON.parse(e.data).runId,m.hidden&&(i.hidden=!1),X()}),E.setComments(o.comments),Y(!1),X()}P.entryPath?be(P.entryPath):ce();})();
+      <div class="od-panel-body">${v}${l}</div>`,document.getElementById("od-checks-close").addEventListener("click",()=>oe(!1)),m.querySelectorAll("[data-run]").forEach(s=>s.addEventListener("click",()=>{U=s.dataset.run,F()}))}function oe(e=m.hidden){m.hidden=!e,$.classList.toggle("active",e),$.setAttribute("aria-pressed",String(e)),e&&(d.hidden=!0,p.hidden=!0,F())}$.addEventListener("click",()=>oe());let B=new EventSource(`events?${r}`);B.addEventListener("open",()=>h.classList.remove("off")),B.addEventListener("error",()=>h.classList.add("off")),B.addEventListener("source-updated",()=>ee(!0)),B.addEventListener("manifest-updated",()=>void N()),B.addEventListener("comments-updated",e=>{let n=JSON.parse(e.data);w.setComments(n.comments??[])}),B.addEventListener("checks-updated",e=>{U=JSON.parse(e.data).runId,m.hidden&&(d.hidden=!1),N()}),w.setComments(o.comments),ee(!1),N()}G.entryPath?xe(G.entryPath):me();})();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@feimacode/open-design-agent-kit",
-  "version": "0.3.0-beta.3",
+  "version": "0.4.0-beta.1",
   "description": "npx @feimacode/open-design-agent-kit init — sets up Open Design's Claude Code and/or Codex integration directly in your own project, no marketplace or manual copying required. Also `export` (artifact → upload-ready PNG/JPEG) and `render-video` (HyperFrames → MP4) for scripted social-post pipelines.",
   "license": "MIT",
   "engines": {
@@ -45,7 +45,7 @@
     "@inquirer/prompts": "^7.8.0",
     "commander": "^14.0.0",
     "smol-toml": "^1.8.0",
-    "@feimacode/open-design-agent-kit-content": "^0.3.0-beta.3"
+    "@feimacode/open-design-agent-kit-content": "^0.4.0-beta.1"
   },
   "devDependencies": {
     "@feimacode/open-design-agent-kit-core": "*"