storeshot 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storeshot",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A local-first, agent-native CLI for creating App Store screenshots.",
   "keywords": [
     "app-store",
@@ -29,6 +29,7 @@
     "CONTRIBUTING.md",
     "dist",
     "docs",
+    "fonts",
     "LICENSE",
     "README.md",
     "SECURITY.md",
@@ -54,6 +55,7 @@
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@fontsource-variable/geist": "^5.2.9",
+    "canvas": "^3.2.3",
     "commander": "^15.0.0",
     "fabric": "^7.4.0",
     "open": "^11.0.0",

package/dist/ui/assets/AssetsView-D0lbK5rm.js

@@ -1 +0,0 @@
-import{a as e,i as t,r as n,t as r}from"./shared-BiRg4I01.js";import{$n as i,Dr as a,En as o,Gn as s,I as c,Jt as l,Mr as u,N as d,Nr as f,On as p,P as m,Qn as h,R as g,Sr as _,Xn as v,Yn as y,Yt as b,Zn as x,_ as S,_n as C,_r as w,_t as T,ar as E,br as D,cr as O,dr as k,f as A,g as j,gn as M,gr as N,gt as ee,h as P,hr as F,ht as I,ir as L,it as R,jr as z,kr as te,m as ne,mn as B,mt as re,p as ie,qt as V,rr as ae,sr as H,v as oe,vr as U,vt as se,wr as ce,xr as W,y as le,yr as ue,z as de,zn as fe}from"./index-DPDaBFld.js";var G=z(`badge-check`,[[`path`,{d:`M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z`,key:`3c2336`}],[`path`,{d:`m9 12 2 2 4-4`,key:`dzmm74`}]]),pe=z(`circle-question-mark`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3`,key:`1u773s`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]]),me=z(`eye`,[[`path`,{d:`M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0`,key:`1nclc0`}],[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}]]),he=z(`monitor`,[[`rect`,{width:`20`,height:`14`,x:`2`,y:`3`,rx:`2`,key:`48i651`}],[`line`,{x1:`8`,x2:`16`,y1:`21`,y2:`21`,key:`1svkeh`}],[`line`,{x1:`12`,x2:`12`,y1:`17`,y2:`21`,key:`vw1qmm`}]]),ge=z(`palette`,[[`path`,{d:`M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z`,key:`e79jfc`}],[`circle`,{cx:`13.5`,cy:`6.5`,r:`.5`,fill:`currentColor`,key:`1okk4w`}],[`circle`,{cx:`17.5`,cy:`10.5`,r:`.5`,fill:`currentColor`,key:`f64h9f`}],[`circle`,{cx:`6.5`,cy:`12.5`,r:`.5`,fill:`currentColor`,key:`qy21gx`}],[`circle`,{cx:`8.5`,cy:`7.5`,r:`.5`,fill:`currentColor`,key:`fotxhn`}]]),_e=z(`shapes`,[[`path`,{d:`M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z`,key:`1bo67w`}],[`rect`,{x:`3`,y:`14`,width:`7`,height:`7`,rx:`1`,key:`1bkyp8`}],[`circle`,{cx:`17.5`,cy:`17.5`,r:`3.5`,key:`w3z12y`}]]),ve=z(`tablet`,[[`rect`,{width:`16`,height:`20`,x:`4`,y:`2`,rx:`2`,ry:`2`,key:`76otgf`}],[`line`,{x1:`12`,x2:`12.01`,y1:`18`,y2:`18`,key:`1dp563`}]]),ye=z(`upload`,[[`path`,{d:`M12 3v12`,key:`1x0j5s`}],[`path`,{d:`m17 8-5-5-5 5`,key:`7q97r8`}],[`path`,{d:`M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4`,key:`ih7n3h`}]]),be=z(`watch`,[[`path`,{d:`M12 10v2.2l1.6 1`,key:`n3r21l`}],[`path`,{d:`m16.13 7.66-.81-4.05a2 2 0 0 0-2-1.61h-2.68a2 2 0 0 0-2 1.61l-.78 4.05`,key:`18k57s`}],[`path`,{d:`m7.88 16.36.8 4a2 2 0 0 0 2 1.61h2.72a2 2 0 0 0 2-1.61l.81-4.05`,key:`16ny36`}],[`circle`,{cx:`12`,cy:`12`,r:`6`,key:`1vlfrh`}]]),K=f(u(),1);function xe(e){let{open:t,defaultOpen:n,onOpenChange:r,disabled:i}=e,[a,c]=R({controlled:t,default:n,name:`Collapsible`,state:`open`}),{mounted:l,setMounted:u,transitionStatus:d}=b(a,!0,!0),f=o(),[m,h]=K.useState(),g=m??f,_=O(e=>{let t=!a,n=p(s,e.nativeEvent);r(t,n),!n.isCanceled&&c(t)});return K.useMemo(()=>({disabled:i,handleTrigger:_,mounted:l,open:a,panelId:g,setMounted:u,setOpen:c,setPanelIdState:h,transitionStatus:d}),[i,_,l,a,g,u,c,h,d])}var Se=K.createContext(void 0);function Ce(){let e=K.useContext(Se);if(e===void 0)throw Error(E(15));return e}var q=function(e){return e.open=`data-open`,e.closed=`data-closed`,e[e.startingStyle=y.startingStyle]=`startingStyle`,e[e.endingStyle=y.endingStyle]=`endingStyle`,e}({}),we=function(e){return e.panelOpen=`data-panel-open`,e}({}),Te={[q.open]:``},Ee={[q.closed]:``},De={open(e){return e?{[we.panelOpen]:``}:null}},Oe={open(e){return e?Te:Ee}},J={height:void 0,width:void 0};function ke(e){let{externalRef:t,hiddenUntilFound:n,id:r,keepMounted:i,mounted:a,onOpenChange:o,open:s,setMounted:c,setOpen:u,transitionStatus:d}=e,f=K.useRef(null),m=K.useRef(null),[h,g]=K.useState(J),_=K.useRef(J),v=K.useRef(!1),y=K.useRef(s),b=K.useRef(!1),[x,S]=K.useState(!1),w=K.useRef(null),T=ae(t,f),E=M({mounted:a,open:s}),D=l(f,!1,!1),k=!s&&!a,A=x?`idle`:d,j=s&&(y.current||b.current),N=!s&&a&&m.current===`css-animation`&&h.height===void 0&&h.width===void 0?_.current:h,ee=n&&k&&m.current!==`css-animation`,P=O((e,t=!0)=>{t&&(_.current=e),g(e)}),F=O(()=>{w.current?.(),w.current=null}),I=O(e=>{F(),w.current=()=>{w.current=null,e()}}),L=O(()=>{s&&a&&m.current===`css-animation`&&(b.current=!0)});H(()=>{!x||d===`starting`||S(!1)},[x,d]),K.useEffect(()=>()=>{L(),F()},[L,F]),H(()=>{let e=f.current;if(!e)return;!s&&w.current&&F();let t=Ae(e,j);if(m.current=t,s&&d===`idle`&&y.current&&t===`css-animation`){_.current=Y(e);return}if(s&&d===`starting`){let n=v.current;if(v.current=!1,t===`none`){P(Y(e)),S(!0);return}if(t===`css-transition`){let t=Me(e);if(P(Y(e)),!n)return t;let r=X(e,`transition-duration`,`0s`);return I(r),S(!0),t}if(t===`css-animation`){if(P(Y(e)),!n){X(e,`animation-name`,`none`)();return}let t=X(e,`animation-name`,`none`),r=X(e,`animation-duration`,`0s`);t(),I(r),S(!0);return}}if(!s&&a&&(d===`idle`||d===`starting`)){if(y.current=!1,b.current=!1,t===`none`){P(J,!1),c(!1);return}P(Y(e));return}if(d!==`ending`)return;if(t===`none`){c(!1);return}let n=Y(e);if(!((n.height??0)>0||(n.width??0)>0)){c(!1);return}P(n),t===`css-animation`&&X(e,`animation-name`,`none`)()},[a,s,F,P,c,I,j,d]),V({enabled:s&&a&&A===`idle`,open:!0,ref:f,onComplete(){s&&P(J,!1)}}),K.useEffect(()=>{if(s||!a||A!==`ending`||!f.current)return;let e=new AbortController,t=-1;function n(){E.current.open||(c(!1),P(J,!1))}return t=B.request(()=>{e.signal.aborted||D(n,e.signal)}),()=>{B.cancel(t),e.abort()}},[E,a,s,A,D,P,c]),H(()=>{let e=f.current;!e||!n||!k||e.setAttribute(`hidden`,`until-found`)},[k,n]),K.useEffect(function(){let e=f.current;if(!e)return;function t(e){let t=p(fe,e);o(!0,t),!t.isCanceled&&(v.current=!0,u(!0))}return C(e,`beforematch`,t)},[o,u]);let R=i||n||a||s;return{height:N.height,props:{...ee?{[q.startingStyle]:``}:void 0,hidden:k,id:r},ref:T,shouldPreventOpenAnimation:j,shouldRender:R,transitionStatus:A,width:N.width}}function Y(e){return{height:e.scrollHeight,width:e.scrollWidth}}function Ae(e,t=!1){let n=k(e).getComputedStyle(e),r=(n.animationName.split(`,`).map(e=>e.trim()).some(e=>e!==``&&e!==`none`)||t)&&je(n.animationDuration),i=je(n.transitionDuration);return r&&i||i?`css-transition`:r?`css-animation`:`none`}function je(e){return e.split(`,`).map(e=>e.trim()).some(e=>e!==``&&Number.parseFloat(e)>0)}function X(e,t,n){let r=e.style.getPropertyValue(t),i=e.style.getPropertyPriority(t);return e.style.setProperty(t,n),()=>{if(r===``){e.style.removeProperty(t);return}e.style.setProperty(t,r,i)}}function Me(e){let t={"justify-content":e.style.justifyContent,"align-items":e.style.alignItems,"align-content":e.style.alignContent,"justify-items":e.style.justifyItems};Object.keys(t).forEach(t=>{e.style.setProperty(t,`initial`,`important`)});function n(){Object.entries(t).forEach(([t,n])=>{if(n===``){e.style.removeProperty(t);return}e.style.setProperty(t,n)})}let r=B.request(n);return()=>{B.cancel(r),n()}}var Ne={...Oe,...v},Z=w(),Pe=K.forwardRef(function(e,t){let{render:n,className:r,defaultOpen:i=!1,disabled:a=!1,onOpenChange:o,open:s,style:c,...l}=e,u=O(o),d=xe({open:s,defaultOpen:i,onOpenChange:u,disabled:a}),f=K.useMemo(()=>({open:d.open,disabled:d.disabled,transitionStatus:d.transitionStatus}),[d.open,d.disabled,d.transitionStatus]),p=K.useMemo(()=>({...d,onOpenChange:u,state:f}),[d,u,f]),m=h(`div`,e,{state:f,ref:t,props:l,stateAttributesMapping:Ne});return(0,Z.jsx)(Se.Provider,{value:p,children:m})}),Fe={...De,...v},Ie=K.forwardRef(function(e,t){let{panelId:n,open:r,handleTrigger:i,state:a,disabled:o}=Ce(),{className:s,disabled:c=o,render:l,nativeButton:u=!0,style:d,...f}=e,{getButtonProps:p,buttonRef:m}=L({disabled:c,focusableWhenDisabled:!0,native:u});return h(`button`,e,{state:a,ref:[t,m],props:[{"aria-controls":r?n:void 0,"aria-expanded":r,onClick:i},f,p],stateAttributesMapping:Fe})}),Le=function(e){return e.collapsiblePanelHeight=`--collapsible-panel-height`,e.collapsiblePanelWidth=`--collapsible-panel-width`,e}({}),Re=K.forwardRef(function(e,t){let{className:n,hiddenUntilFound:r,keepMounted:a,render:o,id:s,style:c,...l}=e,{mounted:u,onOpenChange:d,open:f,panelId:p,setMounted:m,setPanelIdState:g,setOpen:_,state:v,transitionStatus:y}=Ce(),b=r??!1,x=a??!1;H(()=>{if(s)return g(s),()=>{g(void 0)}},[s,g]);let{height:S,props:C,ref:w,shouldPreventOpenAnimation:T,shouldRender:E,transitionStatus:D,width:O}=ke({externalRef:t,hiddenUntilFound:b,id:p,keepMounted:x,mounted:u,onOpenChange:d,open:f,setMounted:m,setOpen:_,transitionStatus:y}),k={...v,transitionStatus:D},A=i(c,k),j=h(`div`,{...e,style:void 0},{state:k,ref:w,props:[C,{style:{[Le.collapsiblePanelHeight]:S===void 0?`auto`:`${S}px`,[Le.collapsiblePanelWidth]:O===void 0?`auto`:`${O}px`}},l,A?{style:A}:void 0,T?{style:{animationName:`none`}}:void 0],stateAttributesMapping:Ne});return E?j:null});function ze({className:e,size:t=`default`,...n}){return(0,Z.jsx)(`div`,{"data-slot":`card`,"data-size":t,className:U(`group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl`,e),...n})}function Be({className:e,...t}){return(0,Z.jsx)(`div`,{"data-slot":`card-header`,className:U(`group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)`,e),...t})}function Ve({className:e,...t}){return(0,Z.jsx)(`div`,{"data-slot":`card-title`,className:U(`font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm`,e),...t})}function He({className:e,...t}){return(0,Z.jsx)(`div`,{"data-slot":`card-description`,className:U(`text-sm text-muted-foreground`,e),...t})}function Ue({className:e,...t}){return(0,Z.jsx)(`div`,{"data-slot":`card-content`,className:U(`px-(--card-spacing)`,e),...t})}var We=Pe;function Ge({className:e,...t}){return(0,Z.jsx)(Ie,{"data-slot":`collapsible-trigger`,className:U(e),...t})}function Ke({className:e,...t}){return(0,Z.jsx)(Re,{"data-slot":`collapsible-content`,className:U(e),...t})}var Q={screenshots:{label:`Raw screenshots`,description:`Unframed captures from your app`,icon:a},brand:{label:`Brand assets`,description:`Photography, illustrations, and artwork`,icon:ge},logos:{label:`Logos`,description:`App marks and partner logos`,icon:G},other:{label:`Other`,description:`Reusable supporting imagery`,icon:_e}},qe=/\.(png|jpe?g|webp|svg)$/i,$={iphone:`iPhone`,ipad:`iPad`,mac:`Mac`,watch:`Watch`},Je=[`iphone`,`ipad`,`mac`,`watch`,`unknown`],Ye={iphone:`1290 / 2796`,ipad:`3 / 4`,mac:`16 / 10`,watch:`422 / 514`,unknown:`4 / 3`};function Xe({project:t,onProjectChange:i}){let[a,o]=(0,K.useState)(`screenshots`),[s,l]=(0,K.useState)(!1),[u,f]=(0,K.useState)(null),[p,h]=(0,K.useState)(null),[v,y]=(0,K.useState)(!1),[b,C]=(0,K.useState)(null),[w,E]=(0,K.useState)(null),[O,k]=(0,K.useState)(()=>new Set),M=(0,K.useRef)(0),L=(0,K.useRef)(null),R=t.assets[a],z=a===`screenshots`?Je.map(e=>({id:e,label:e===`unknown`?`Unknown device`:$[e],assets:R.filter(t=>(t.deviceType??`unknown`)===e)})).filter(e=>e.assets.length>0):[{id:a,label:null,assets:R}];async function B(e){let t=Array.from(e.target.files??[]);e.target.value=``,await V(t)}async function V(e){if(e.length===0)return;let n=e.filter(e=>qe.test(e.name)),r=e.length-n.length;l(!0),f(null),h(null);let o=0,s=0,c=0,u=new Set(t.assets[a].map(e=>e.name)),d=[];try{for(let e of n)try{await _(`/api/assets?category=${a}&filename=${encodeURIComponent(e.name)}`,{method:`POST`,headers:{"Content-Type":e.type||`application/octet-stream`},body:e}),u.has(e.name)?s+=1:o+=1,u.add(e.name)}catch(t){t instanceof ue&&t.code===`DUPLICATE_ASSET`?c+=1:d.push(`${e.name}: ${W(t)}`)}(o>0||s>0)&&i(await _(`/api/project`));let e=[o>0?`Added ${o} ${o===1?`asset`:`assets`}.`:``,s>0?`Replaced ${s} ${s===1?`asset`:`assets`}.`:``,c>0?`Skipped ${c} ${c===1?`duplicate`:`duplicates`}.`:``,r>0?`Ignored ${r} unsupported ${r===1?`file`:`files`}.`:``].filter(Boolean).join(` `);e&&h(e),d.length>0&&f(d.join(` `))}finally{l(!1)}}function ae(e){e.dataTransfer.types.includes(`Files`)&&(e.preventDefault(),M.current+=1,y(!0))}function H(e){e.dataTransfer.types.includes(`Files`)&&(e.preventDefault(),M.current=Math.max(0,M.current-1),M.current===0&&y(!1))}function fe(e){e.dataTransfer.types.includes(`Files`)&&(e.preventDefault(),e.dataTransfer.dropEffect=`copy`)}async function G(e){if(e.preventDefault(),M.current=0,y(!1),!s)try{await V(await Qe(e.dataTransfer))}catch(e){f(W(e))}}async function pe(e){l(!0);try{await _(`/api/assets/${e.category}/${encodeURIComponent(e.name)}`,{method:`DELETE`}),i(await _(`/api/project`)),E(null)}catch(e){f(W(e))}finally{l(!1)}}async function he(e,t){l(!0),f(null);try{let n=await _(`/api/assets/${e.category}/${encodeURIComponent(e.name)}`,{method:`PATCH`,body:JSON.stringify({deviceType:t===`auto`?null:t})});i(n),C(t=>t?.id===e.id?n.assets.screenshots.find(t=>t.id===e.id)??null:t)}catch(e){f(W(e))}finally{l(!1)}}return(0,Z.jsxs)(`div`,{className:`relative h-full overflow-auto`,onDragEnter:ae,onDragLeave:H,onDragOver:fe,onDrop:G,children:[(0,Z.jsxs)(`div`,{className:`mx-auto max-w-7xl space-y-6 p-8`,children:[(0,Z.jsxs)(`div`,{className:`flex flex-wrap items-start justify-between gap-4`,children:[(0,Z.jsxs)(`div`,{children:[(0,Z.jsx)(`p`,{className:`mb-1 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground`,children:`Project library`}),(0,Z.jsx)(`h1`,{className:`text-2xl font-semibold tracking-tight`,children:`Asset catalog`}),(0,Z.jsx)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:`Source files stay reusable and separate from the final screenshot sets.`})]}),(0,Z.jsx)(`input`,{ref:L,className:`hidden`,type:`file`,multiple:!0,accept:`image/png,image/jpeg,image/webp,image/svg+xml`,onChange:B}),(0,Z.jsxs)(x,{disabled:s,onClick:()=>L.current?.click(),children:[(0,Z.jsx)(ye,{className:`size-4`}),`Add to `,Q[a].label.toLowerCase()]})]}),(0,Z.jsx)(`div`,{className:`grid grid-cols-2 gap-2 lg:grid-cols-4`,children:r.map(e=>{let n=Q[e],r=n.icon,i=a===e;return(0,Z.jsxs)(x,{"aria-pressed":i,className:U(`h-11 w-full flex-row justify-start gap-2 rounded-lg px-2.5 text-left`,i&&`border-foreground/50 bg-muted/40 hover:border-foreground/50 hover:bg-muted/40`),type:`button`,variant:`outline`,onClick:()=>o(e),children:[(0,Z.jsx)(`span`,{className:U(`grid size-7 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground`,i&&`bg-foreground text-background`),children:(0,Z.jsx)(r,{className:`size-3.5`})}),(0,Z.jsx)(`span`,{className:`min-w-0 flex-1 truncate text-xs font-semibold`,children:n.label}),(0,Z.jsx)(A,{className:`h-5 px-1.5 text-[10px]`,variant:`secondary`,children:t.assets[e].length})]},e)})}),p&&(0,Z.jsx)(F,{role:`status`,variant:`muted`,children:(0,Z.jsx)(N,{children:p})}),u&&(0,Z.jsx)(F,{variant:`destructive`,children:(0,Z.jsx)(N,{children:u})}),(0,Z.jsxs)(ze,{className:`relative overflow-hidden`,children:[v&&(0,Z.jsx)(`div`,{className:`pointer-events-none absolute inset-0 z-10 grid place-items-center border-2 border-dashed border-primary bg-background/90 backdrop-blur-sm`,children:(0,Z.jsxs)(`div`,{className:`text-center`,children:[(0,Z.jsx)(`span`,{className:`mx-auto mb-3 grid size-12 place-items-center rounded-full bg-primary text-primary-foreground`,children:(0,Z.jsx)(ye,{className:`size-5`})}),(0,Z.jsx)(`p`,{className:`font-semibold`,children:`Drop files or folders here`}),(0,Z.jsxs)(`p`,{className:`mt-1 text-sm text-muted-foreground`,children:[`Supported images will be added to `,Q[a].label.toLowerCase(),`.`]})]})}),(0,Z.jsxs)(Be,{children:[(0,Z.jsx)(Ve,{children:Q[a].label}),(0,Z.jsxs)(He,{children:[Q[a].description,`. Add files or drop a folder; PNG, JPEG, WebP, and SVG up to 25 MB.`]})]}),(0,Z.jsx)(Ue,{children:R.length===0?(0,Z.jsxs)(x,{className:`h-auto min-h-72 w-full flex-col gap-3 rounded-xl border-dashed bg-muted/20 text-center whitespace-normal hover:bg-muted/40`,type:`button`,variant:`outline`,onClick:()=>L.current?.click(),children:[(0,Z.jsx)(`span`,{className:`grid size-12 place-items-center rounded-full border bg-background shadow-sm`,children:(0,Z.jsx)(e,{className:`size-5 text-muted-foreground`})}),(0,Z.jsxs)(`span`,{className:`text-sm font-medium`,children:[`Add your first `,Q[a].label.toLowerCase()]}),(0,Z.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`Choose files or drop files and folders anywhere on this page.`})]}):(0,Z.jsx)(`div`,{className:`space-y-7`,children:z.map(e=>(0,Z.jsx)(`section`,{"aria-labelledby":e.label?`asset-group-${e.id}`:void 0,children:(0,Z.jsxs)(We,{open:!O.has(e.id),onOpenChange:t=>k(n=>{let r=new Set(n);return t?r.delete(e.id):r.add(e.id),r}),children:[e.label&&(0,Z.jsxs)(Ge,{className:`mb-3 flex w-full items-center gap-2 rounded-md py-1 text-left outline-none hover:text-foreground/70 focus-visible:ring-2 focus-visible:ring-ring [&[data-panel-open]>svg]:rotate-180`,id:`asset-group-${e.id}`,children:[(0,Z.jsx)(`span`,{className:`text-sm font-semibold`,children:e.label}),(0,Z.jsx)(A,{className:`h-5 px-2 text-[11px]`,variant:`secondary`,children:e.assets.length}),(0,Z.jsx)(te,{className:`ml-auto size-4 text-muted-foreground transition-transform`})]}),(0,Z.jsx)(Ke,{children:(0,Z.jsx)(`div`,{className:U(`grid gap-4`,a===`screenshots`?`grid-cols-[repeat(auto-fill,minmax(9rem,1fr))]`:`sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4`),children:e.assets.map(e=>(0,Z.jsxs)(`article`,{className:`group overflow-hidden rounded-xl border bg-background`,children:[(0,Z.jsxs)(x,{"aria-label":`Preview ${e.name}`,className:`relative grid h-auto w-full place-items-center overflow-hidden rounded-none bg-[linear-gradient(45deg,#f4f4f5_25%,transparent_25%),linear-gradient(-45deg,#f4f4f5_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#f4f4f5_75%),linear-gradient(-45deg,transparent_75%,#f4f4f5_75%)] bg-[length:20px_20px] bg-[position:0_0,0_10px,10px_-10px,-10px_0px] p-0 hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset active:translate-y-0`,style:{aspectRatio:a===`screenshots`?Ye[e.deviceType??`unknown`]:`4 / 3`},type:`button`,variant:`ghost`,onClick:()=>C(e),children:[(0,Z.jsx)(`img`,{className:`h-full w-full object-contain`,src:e.url,alt:e.name}),(0,Z.jsxs)(`span`,{className:`absolute inset-0 grid place-items-center bg-black/0 opacity-0 transition-all group-hover:bg-black/20 group-hover:opacity-100 group-focus-within:bg-black/20 group-focus-within:opacity-100`,children:[(0,Z.jsx)(`span`,{className:`grid size-10 place-items-center rounded-full bg-background/90 shadow-sm`,children:(0,Z.jsx)(me,{className:`size-4`})}),(0,Z.jsxs)(`span`,{className:`absolute bottom-2 left-2 rounded-md bg-black/70 px-2 py-1 text-[10px] font-medium text-white shadow-sm backdrop-blur-sm`,children:[e.width&&e.height?`${e.width} × ${e.height} · `:``,D(e.size)]})]})]}),(0,Z.jsxs)(`div`,{className:`flex items-center justify-between gap-1.5 px-2 py-1.5`,children:[(0,Z.jsx)(`div`,{className:`min-w-0`,children:(0,Z.jsx)(`p`,{className:`truncate text-xs font-medium`,title:e.name,children:e.name})}),(0,Z.jsxs)(`div`,{className:`flex shrink-0 items-center gap-0.5`,children:[a===`screenshots`&&(0,Z.jsxs)(d,{disabled:s,value:e.deviceTypeOverride??`auto`,onValueChange:t=>{t!==null&&he(e,t)},children:[(0,Z.jsx)(g,{"aria-label":`Device type for ${e.name}`,className:`justify-center border-0 bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground [&>svg:last-child]:hidden`,title:e.deviceType&&e.deviceType!==`unknown`?$[e.deviceType]:`Unknown device`,size:`icon-xs`,children:(0,Z.jsx)(de,{children:(0,Z.jsx)(Ze,{deviceType:e.deviceType??`unknown`})})}),(0,Z.jsxs)(m,{children:[(0,Z.jsxs)(c,{value:`auto`,children:[`Auto · `,e.detectedDeviceType&&e.detectedDeviceType!==`unknown`?$[e.detectedDeviceType]:`Unknown`]}),n.map(e=>(0,Z.jsx)(c,{value:e,children:$[e]},e))]})]}),(0,Z.jsx)(x,{"aria-label":`Delete ${e.name}`,className:`text-muted-foreground hover:text-foreground`,disabled:s,size:`icon-xs`,variant:`ghost`,onClick:()=>E(e),children:(0,Z.jsx)(ce,{className:`size-3.5`})})]})]})]},e.id))})})]})},e.id))})})]})]}),(0,Z.jsx)(re,{open:!!b,onOpenChange:e=>{e||C(null)},children:b&&(0,Z.jsxs)(I,{className:`h-[calc(100vh-2rem)] max-w-7xl grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden p-0`,children:[(0,Z.jsxs)(T,{className:`border-b px-4 py-3 pr-14`,children:[(0,Z.jsx)(se,{className:`truncate text-sm`,children:b.name}),(0,Z.jsxs)(ee,{className:`text-xs`,children:[Q[b.category].label,` · `,D(b.size)]})]}),(0,Z.jsx)(`div`,{className:`relative min-h-0 overflow-hidden bg-black/85 p-4`,children:(0,Z.jsx)(`img`,{className:`size-full object-contain`,src:b.url,alt:b.name})})]})}),(0,Z.jsx)(ie,{open:!!w,onOpenChange:e=>{!e&&!s&&E(null)},children:(0,Z.jsxs)(P,{children:[(0,Z.jsxs)(oe,{children:[(0,Z.jsx)(le,{children:`Delete this asset?`}),(0,Z.jsxs)(j,{children:[w?.name,` will be removed from the local asset catalog. Existing canvas layers that use it will no longer render.`]})]}),(0,Z.jsxs)(S,{children:[(0,Z.jsx)(ne,{render:(0,Z.jsx)(x,{disabled:s,variant:`outline`}),children:`Cancel`}),(0,Z.jsx)(x,{disabled:s||!w,variant:`destructive`,onClick:()=>{w&&pe(w)},children:`Delete asset`})]})]})})]})}function Ze({deviceType:e}){let n={iphone:t,ipad:ve,mac:he,watch:be,unknown:pe}[e];return(0,Z.jsx)(n,{className:`size-3.5`})}async function Qe(e){let t=Array.from(e.items).map(e=>e.webkitGetAsEntry?.()).filter(e=>!!e);return t.length===0?Array.from(e.files):(await Promise.all(t.map($e))).flat()}async function $e(e){if(e.isFile){let t=e;return[await new Promise((e,n)=>t.file(e,n))]}if(!e.isDirectory)return[];let t=e.createReader(),n=[];for(;;){let e=await new Promise((e,n)=>t.readEntries(e,n));if(e.length===0)break;n.push(...e)}return(await Promise.all(n.map($e))).flat()}export{Xe as AssetsView};