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

package/out/preview/shell.js

@@ -0,0 +1,70 @@
+"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=`
+    <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>
+    </div>
+    <div class="od-panel-body">
+      <textarea id="od-comment-text" class="od-textarea" rows="3" placeholder="What should change here?"></textarea>
+    </div>
+    <div class="od-panel-footer">
+      <span class="od-spacer"></span>
+      <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=`
+    <div class="od-panel-header">
+      <span class="od-panel-header-title">Comment \xB7 ${l(a)}</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>
+    </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">
+    <h1>Open Design preview</h1>
+    <p>${t?l(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 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>
+    </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>
+    <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>
+  </div>
+  <div class="od-stage">
+    <div id="od-errors" class="od-errors" role="status" hidden>
+      <div class="od-errors-text"><strong>This design has errors</strong><span id="od-errors-list"></span></div>
+      <button id="od-errors-close" class="od-panel-close" aria-label="Dismiss">\xD7</button>
+    </div>
+    <iframe id="od-preview" class="od-preview" title="Design"></iframe>
+    <div id="od-pins" class="od-pins"></div>
+  </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 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-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-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();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feimacode/open-design-agent-kit",
-  "version": "0.2.0",
+  "version": "0.3.0-beta.3",
   "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.2.0"
+    "@feimacode/open-design-agent-kit-content": "^0.3.0-beta.3"
   },
   "devDependencies": {
     "@feimacode/open-design-agent-kit-core": "*"