admin-ui-starter-kit 0.7.0 → 0.7.1

package/dist/showcase/assets/media-library-CUI_IPkM.js

@@ -0,0 +1,699 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-C_rLy6Zn.js";import{t as s}from"./arrow-left-DBxsWbzL.js";import{t as c}from"./arrow-right-Dk80zKWl.js";import{Or as l,r as u,t as d}from"./example-BsDQngs7.js";import{t as f}from"./circle-check-BjuHEm7p.js";import{n as p,t as m}from"./dropzone-CJHqIcHB.js";import{t as h}from"./file-D4d3b9bx.js";import{t as g}from"./image-DCpC2weW.js";import{t as _}from"./info-DXwnIz56.js";import{t as v}from"./layers-hYbCFSpT.js";import{t as y}from"./lock-BwI_fNQW.js";import{t as b}from"./plus-Dp_nZNjk.js";import{t as x}from"./star-BzQGhFDT.js";import{t as S}from"./trash-2-C-6T17-B.js";import{t as C}from"./video-fYZEPex_.js";import{t as w}from"./x-C5_SzMQM.js";import{N as T,P as ee,a as E,d as te,l as D,n as O}from"./index-B4sKWDcN.js";import{t as ne}from"./props-table-aynAz90t.js";import{i as k,r as A,t as j}from"./alert--MONSwFW.js";import{t as re}from"./smart-card-CwDYx0xj.js";import{t as M}from"./input-CLQIEOQ4.js";import{t as N}from"./select-J0hPSc5B.js";import{n as P}from"./switch-BOlIXIn9.js";import{n as F}from"./form-field-D5kwgD4P.js";import{t as ie}from"./dialog-CoJdLYZ8.js";var ae=D(`grid-2x2`,[[`path`,{d:`M12 3v18`,key:`108xh3`}],[`path`,{d:`M3 12h18`,key:`1i2n21`}],[`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`,key:`h1oib`}]]),oe=D(`image-plus`,[[`path`,{d:`M16 5h6`,key:`1vod17`}],[`path`,{d:`M19 2v6`,key:`4bpg5p`}],[`path`,{d:`M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5`,key:`1ue2ih`}],[`path`,{d:`m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21`,key:`1xmnt7`}],[`circle`,{cx:`9`,cy:`9`,r:`2`,key:`af1f0g`}]]),se=D(`images`,[[`path`,{d:`m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16`,key:`9kzy35`}],[`path`,{d:`M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2`,key:`1t0f0t`}],[`circle`,{cx:`13`,cy:`7`,r:`1`,fill:`currentColor`,key:`1obus6`}],[`rect`,{x:`8`,y:`2`,width:`14`,height:`14`,rx:`2`,key:`1gvhby`}]]),ce=D(`layout-list`,[[`rect`,{width:`7`,height:`7`,x:`3`,y:`3`,rx:`1`,key:`1g98yp`}],[`rect`,{width:`7`,height:`7`,x:`3`,y:`14`,rx:`1`,key:`1bb6yr`}],[`path`,{d:`M14 4h7`,key:`3xa0d5`}],[`path`,{d:`M14 9h7`,key:`1icrd9`}],[`path`,{d:`M14 15h7`,key:`1mj8o2`}],[`path`,{d:`M14 20h7`,key:`11slyb`}]]),I=D(`play`,[[`path`,{d:`M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z`,key:`10ikf1`}]]),le={title:`Add media`,description:`Pick from the library, or upload new files.`,close:`Close media library`,tabs:{library:`Library`,upload:`Upload`},searchPlaceholder:`Search by name or tag...`,clearSearch:`Clear search`,typeFilterLabel:`Type`,collectionFilterLabel:`Collection`,sortLabel:`Sort`,viewLabel:`View`,allTypes:`All`,images:`Images`,videos:`Videos`,files:`Files`,allCollections:`All collections`,sortNewest:`Newest`,sortName:`Name`,sortSize:`Size`,sortUsage:`Most used`,gridView:`Grid view`,tableView:`Table view`,countAll:`{count} items`,countFiltered:`{count} of {total} items`,countSearch:`{count} of {total} items for "{query}"`,activeSearchLabel:`Search`,emptyLibraryTitle:`Library is empty`,emptyLibraryDescription:`Upload images or videos to start building the library.`,emptyFilteredTitle:`No media matches`,emptyFilteredDescription:`Try a different search term, or clear the filters.`,clearFilters:`Clear filters`,uploadMedia:`Upload media`,loading:`Loading media...`,errorTitle:`Media could not load`,errorDescription:`Try again or adjust your filters.`,cardDetails:`Details for {name}`,privateLabel:`Private`,publicLabel:`Public`,typeImage:`Image`,typeVideo:`Video`,typeFile:`File`,unknownSize:`Unknown`,notUsed:`Not used yet`,usedIn:`{count} {count, plural, one {place} other {places}}`,table:{name:`Name`,type:`Type`,size:`Size`,collection:`Collection`,used:`Used`},detail:{title:`Details`,altText:`Alt text`,altPlaceholder:`Describe this media for screen readers`,collection:`Collection`,tags:`Tags`,tagsPlaceholder:`Comma-separated`,public:`Public`,publicHint:`Served from the public CDN`,privateHint:`Only visible in the admin`,type:`Type`,size:`Size`,dimensions:`Dimensions`,uploaded:`Uploaded`,usedIn:`Used in`,replace:`Replace file`,delete:`Delete`,close:`Close details`},upload:{dropTitle:`Drag files here or click to browse`,dropHint:`JPG, PNG, WebP, SVG and MP4 up to 50 MB per file`,dragOver:`Release to stage files`,collection:`Collection`,tags:`Tags`,tagsPlaceholder:`Comma-separated`,public:`Public`,publicHint:`Serve from the public CDN`,noFiles:`No files staged`,stagedCount:`{count} {count, plural, one {file} other {files}}`,removeFile:`Remove {name}`,uploading:`Uploading`,done:`Done`},footer:{pickOne:`Pick one item`,pickMany:`Pick one or more items`,selectedCount:`{count} selected`,clear:`Clear`,cancel:`Cancel`,confirmEmpty:`Add to product`,confirmOne:`Add 1 item`,confirmMany:`Add {count} items`,noFiles:`No files staged`,stagedSummary:`{count} {count, plural, one {file} other {files}} · {size}`,upload:`Upload`,uploadMany:`Upload {count} files`,uploading:`Uploading...`},gallery:{emptyTitle:`No media attached`,emptyDescription:`Add images, video, or files to this resource.`,add:`Add media`,addMore:`Add more`,addTile:`Add another media item`,cover:`Cover`,primary:`Primary`,setPrimary:`Set primary`,remove:`Remove`,movePrevious:`Move previous`,moveNext:`Move next`,itemPosition:`{index} of {total}`,maxReached:`Maximum reached`}};function L(e,t){return e.replace(/\{(\w+), plural, one \{([^}]*)\} other \{([^}]*)\}\}/g,(e,n,r,i)=>Number(t[n])===1?r:i).replace(/\{(\w+)\}/g,(e,n)=>String(t[n]??``))}var R=t(n(),1),z={collection:void 0,tags:[],public:!0},ue=[],B={getId:e=>e.id,getName:e=>e.name,getType:e=>e.type,getSrc:e=>e.src,getAlt:e=>e.alt,getSize:e=>e.size,getWidth:e=>e.width,getHeight:e=>e.height,getDuration:e=>e.duration,getCollection:e=>e.collection,getTags:e=>e.tags??[],getPublic:e=>e.public,getUploadedAt:e=>e.uploadedAt,getUsageCount:e=>e.usageCount,getTint:e=>e.tint,getMimeType:e=>e.mimeType};function V(e){return{...B,...e??{}}}function H(e){return!e||e<=0?``:e>=1048576?`${(e/1048576).toFixed(1)} MB`:`${Math.max(1,Math.round(e/1024))} KB`}function U(e,t){let n=t.getWidth(e),r=t.getHeight(e);return!n||!r?``:`${n} x ${r}`}function W(e,t){let n=t.getUploadedAt(e);if(!n)return 0;let r=(n instanceof Date?n:new Date(n)).getTime();return Number.isFinite(r)?r:0}function de(e){return e.type.startsWith(`image/`)?`image`:e.type.startsWith(`video/`)?`video`:`file`}function fe(e){if(e.type.startsWith(`image/`)&&!(typeof URL>`u`||typeof URL.createObjectURL!=`function`))return URL.createObjectURL(e)}function pe(e){!e||typeof URL>`u`||typeof URL.revokeObjectURL!=`function`||URL.revokeObjectURL(e)}function me(e){return Array.isArray(e)?{items:e,total:e.length}:e}function he(e,t){return t&&typeof e==`object`&&e?{...e,...t}:e}function ge(e,t,n,r,i){let a=n.trim().toLowerCase();return e.filter(e=>r!==`all`&&t.getType(e)!==r||i!==`all`&&t.getCollection(e)!==i?!1:a?[t.getName(e),t.getAlt(e),t.getCollection(e),...t.getTags(e)].filter(Boolean).join(` `).toLowerCase().includes(a):!0)}function _e(e,t,n){let r=e.slice();return n===`name`?r.sort((e,n)=>t.getName(e).localeCompare(t.getName(n))):n===`size`?r.sort((e,n)=>(t.getSize(n)??0)-(t.getSize(e)??0)):n===`usage`?r.sort((e,n)=>(t.getUsageCount(n)??0)-(t.getUsageCount(e)??0)):r.sort((e,n)=>W(n,t)-W(e,t)),r}function ve({items:e=ue,fetcher:t,accessors:n,selectionMode:r=`multiple`,value:i,defaultValue:a=[],onValueChange:o,onItemUpdate:s,onItemDelete:c,onUpload:l,onError:u,initialTab:d=`library`,defaultView:f=`grid`,defaultQuery:p=``,defaultType:m=`all`,defaultCollection:h=`all`,defaultSort:g=`newest`,defaultUploadOptions:_}={}){let v=(0,R.useMemo)(()=>V(n),[n]),[y,b]=(0,R.useState)(d),[x,S]=(0,R.useState)(f),[C,w]=(0,R.useState)(p),[T,ee]=(0,R.useState)(m),[E,te]=(0,R.useState)(h),[D,O]=(0,R.useState)(g),[ne,k]=(0,R.useState)(null),[A,j]=(0,R.useState)(()=>[...a]),[re,M]=(0,R.useState)([]),[N,P]=(0,R.useState)(),[F,ie]=(0,R.useState)(!1),[ae,oe]=(0,R.useState)(null),[se,ce]=(0,R.useState)([]),[I,le]=(0,R.useState)(()=>new Set),[L,B]=(0,R.useState)({}),[H,U]=(0,R.useState)([]),[W,ve]=(0,R.useState)(!1),[G,ye]=(0,R.useState)({...z,..._,tags:_?.tags??z.tags}),K=i!==void 0,q=(0,R.useMemo)(()=>K?[...i??[]]:A,[A,K,i]),J=(0,R.useMemo)(()=>new Set(q),[q]),be=(0,R.useRef)(new Set);(0,R.useEffect)(()=>{if(!t)return;let e=new AbortController;return ie(!0),oe(null),t({query:C,type:T,collection:E===`all`?void 0:E,sort:D,signal:e.signal}).then(t=>{if(e.signal.aborted)return;let n=me(t);M(n.items),P(n.total)}).catch(t=>{e.signal.aborted||(oe(t),u?.(t))}).finally(()=>{e.signal.aborted||ie(!1)}),()=>e.abort()},[E,t,u,C,D,T]),(0,R.useEffect)(()=>{let e=be.current;return()=>{for(let t of e)pe(t);e.clear()}},[]);let xe=(0,R.useMemo)(()=>t?re:[...se,...e],[se,re,t,e]),Y=(0,R.useMemo)(()=>xe.filter(e=>!I.has(v.getId(e))).map(e=>he(e,L[v.getId(e)])),[v,L,I,xe]),Se=(0,R.useMemo)(()=>{let e=t?Y:ge(Y,v,C,T,E);return t?e:_e(e,v,D)},[v,E,t,Y,C,D,T]),Ce=N??Y.length,we=Se.length,Te=(0,R.useMemo)(()=>Y.filter(e=>J.has(v.getId(e))),[v,Y,J]),Ee=!!C.trim()||T!==`all`||E!==`all`,X=(0,R.useCallback)(e=>{K||j(e);let t=new Set(e),n=Y.filter(e=>t.has(v.getId(e)));o?.(e,n)},[v,K,o,Y]),De=(0,R.useCallback)(e=>{let t=new Set(r===`single`?[]:J);J.has(e)&&r!==`single`?t.delete(e):t.add(e),X(Array.from(t))},[X,J,r]),Oe=(0,R.useCallback)(()=>X([]),[X]),ke=(0,R.useCallback)(()=>{w(``),ee(`all`),te(`all`)},[]),Ae=(0,R.useCallback)(e=>{U(t=>[...t,...e.map((e,t)=>{let n=fe(e);return n&&be.current.add(n),{id:`staged-${Date.now()}-${t}`,file:e,name:e.name,size:e.size,type:de(e),src:n,progress:0,status:`staged`}})])},[]),je=(0,R.useCallback)(e=>{U(t=>{let n=t.find(t=>t.id===e);return n?.src&&(pe(n.src),be.current.delete(n.src)),t.filter(t=>t.id!==e)})},[]),Me=(0,R.useCallback)(()=>{U(e=>{for(let t of e)t.src&&(pe(t.src),be.current.delete(t.src));return[]})},[]),Ne=(0,R.useCallback)(e=>{ye(t=>({...t,...e}))},[]),Pe=(0,R.useCallback)((e,t)=>{U(n=>n.map(n=>n.id===e?{...n,...t}:n))},[]);return{tab:y,setTab:b,view:x,setView:S,query:C,setQuery:w,type:T,setType:ee,collection:E,setCollection:te,sort:D,setSort:O,detailId:ne,setDetailId:k,items:Y,visibleItems:Se,selectedIds:q,selectedItems:Te,selectedSet:J,toggleSelection:De,clearSelection:Oe,clearFilters:ke,loading:F,error:ae,hasFilters:Ee,totalCount:Ce,filteredCount:we,stagedFiles:H,addFiles:Ae,removeStagedFile:je,clearStagedFiles:Me,updateUploadOptions:Ne,uploadOptions:G,uploading:W,startUpload:(0,R.useCallback)(async()=>{if(W||H.length===0)return;ve(!0),U(e=>e.map(e=>({...e,status:`uploading`,progress:0})));let e={setProgress:(e,t)=>{Pe(e,{progress:Math.max(0,Math.min(100,t))})},setFileStatus:(e,t,n)=>Pe(e,{status:t,error:n})};try{let t=H.map(e=>e.file),n=await l?.(t,G,e);if(U(e=>e.map(e=>({...e,status:`done`,progress:100}))),n?.length){ce(e=>[...n,...e]);let e=n.map(e=>v.getId(e));X(r===`single`?e.slice(0,1):Array.from(new Set([...e,...q])))}Me(),b(`library`)}catch(e){oe(e),U(e=>e.map(e=>e.status===`uploading`?{...e,status:`error`,error:`Upload failed`}:e)),u?.(e)}finally{ve(!1)}},[v,X,Me,u,l,q,r,Pe,H,G,W]),updateItem:(0,R.useCallback)((e,t)=>{let n=v.getId(e);B(e=>({...e,[n]:{...e[n],...t}})),s?.(e,t)},[v,s]),removeItem:(0,R.useCallback)(e=>{let t=v.getId(e);le(e=>new Set(e).add(t)),J.has(t)&&X(q.filter(e=>e!==t)),c?.(e)},[v,X,c,q,J]),accessors:v}}var G=te();function ye(e,t){return e===`image`?(0,G.jsx)(g,{className:t??`size-4`}):e===`video`?(0,G.jsx)(C,{className:t??`size-4`}):(0,G.jsx)(h,{className:t??`size-4`})}function K(e,t){return e===`image`?t.typeImage:e===`video`?t.typeVideo:t.typeFile}function q(e,t){return e?L(t.usedIn,{count:e}):t.notUsed}function J({children:e,tint:t,className:n}){return(0,G.jsx)(`div`,{className:O(`media-library-preview relative overflow-hidden bg-muted`,n),style:t?{background:t}:void 0,children:e})}function be({src:e,alt:t,type:n,className:r,loading:i=`lazy`}){let[a,o]=(0,R.useState)(!1);return(0,R.useEffect)(()=>{o(!1)},[e]),!e||a?(0,G.jsx)(`div`,{className:`media-library-preview--fallback flex size-full items-center justify-center text-muted-foreground`,children:ye(n,`size-6`)}):(0,G.jsx)(`img`,{src:e,alt:t,loading:i,className:r,onError:()=>o(!0)})}function xe({icon:e,title:t,description:n,action:r,className:i}){return(0,G.jsxs)(`div`,{className:O(`media-library-empty-state--component flex min-h-64 flex-col items-center justify-center rounded-lg border border-dashed border-border bg-muted/20 px-6 py-10 text-center`,i),children:[(0,G.jsx)(`div`,{className:`mb-3 inline-flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground`,children:e??(0,G.jsx)(g,{className:`size-5`})}),(0,G.jsx)(a,{tag:`div`,weight:`semibold`,children:t}),!!n&&(0,G.jsx)(a,{type:`secondary`,size:`xs`,className:`mt-1 max-w-sm`,children:n}),!!r&&(0,G.jsx)(`div`,{className:`mt-4`,children:r})]})}function Y({query:e,type:t,typeFilters:n,collection:r,sort:a,view:o,collections:s=[],strings:c,onQueryChange:l,onTypeChange:d,onCollectionChange:f,onSortChange:p,onViewChange:m,onClearFilters:_,toolbarEnd:v}){let y=[{value:`all`,label:c.allTypes,icon:null},{value:`image`,label:c.images,icon:g},{value:`video`,label:c.videos,icon:C},{value:`file`,label:c.files,icon:h}].filter(e=>(n??[`all`,`image`,`video`]).includes(e.value)),b=[{value:`all`,label:c.allCollections},...s.map(e=>({value:e.value,label:String(e.label)}))],x=[{value:`newest`,label:c.sortNewest},{value:`name`,label:c.sortName},{value:`size`,label:c.sortSize},{value:`usage`,label:c.sortUsage}],S=e.trim(),w=S.length>0,T=w||t!==`all`||r!==`all`;return(0,G.jsxs)(`div`,{className:`media-library-toolbar--component flex flex-wrap items-center gap-2`,children:[(0,G.jsxs)(`div`,{className:`media-library-toolbar--search flex min-w-52 flex-1 flex-col gap-space-xs`,children:[(0,G.jsx)(M,{value:e,onChange:e=>l(e.target.value),placeholder:c.searchPlaceholder,startIcon:E,clearable:!0,onClear:()=>l(``),strings:{clear:c.clearSearch},className:O(`rounded-radius bg-background`,w&&`border-info/60 bg-info/5 text-foreground shadow-xs ring-1 ring-info/15`)}),!!w&&(0,G.jsx)(`div`,{className:`media-library-toolbar--search-value flex min-w-0 items-center gap-space-xs px-space-xs`,children:(0,G.jsxs)(i,{variant:`info`,className:`max-w-full`,children:[(0,G.jsx)(E,{className:`size-3`,"aria-hidden":`true`}),(0,G.jsx)(`span`,{children:c.activeSearchLabel}),(0,G.jsx)(`span`,{className:`min-w-0 truncate font-normal`,children:S})]})})]}),(0,G.jsx)(`div`,{className:`media-library-toolbar--type-toggle flex h-9 items-center rounded-md bg-muted p-0.5`,role:`tablist`,"aria-label":c.typeFilterLabel,children:y.map(e=>{let n=e.icon,r=t===e.value;return(0,G.jsxs)(u,{type:`button`,role:`tab`,"aria-selected":r,variant:`secondary`,buttonStyle:`ghost`,className:O(`h-8 rounded-sm px-3 text-xs shadow-none`,r?`bg-background text-foreground shadow-xs hover:bg-background`:`text-muted-foreground hover:bg-transparent hover:text-foreground`),onClick:()=>d(e.value),children:[n&&(0,G.jsx)(n,{className:`size-3.5`}),e.label]},e.value)})}),(0,G.jsx)(`div`,{className:`min-w-40`,children:(0,G.jsx)(N,{value:r,options:b,onChange:e=>f(e??`all`),placeholder:c.collectionFilterLabel,"aria-label":c.collectionFilterLabel,className:`bg-background`})}),(0,G.jsx)(`div`,{className:`min-w-32`,children:(0,G.jsx)(N,{value:a,options:x,onChange:e=>p(e??`newest`),placeholder:c.sortLabel,"aria-label":c.sortLabel,className:`bg-background`})}),(0,G.jsxs)(`div`,{className:`media-library-toolbar--view-toggle ml-auto flex h-9 items-center rounded-md bg-muted p-0.5`,children:[(0,G.jsx)(u,{type:`button`,variant:o===`grid`?`dark`:`secondary`,buttonStyle:o===`grid`?`solid`:`ghost`,size:`icon-small`,className:O(o===`grid`&&`bg-background text-foreground shadow-xs hover:bg-background`),"aria-label":c.gridView,onClick:()=>m(`grid`),children:(0,G.jsx)(ae,{className:`size-3.5`})}),(0,G.jsx)(u,{type:`button`,variant:o===`table`?`dark`:`secondary`,buttonStyle:o===`table`?`solid`:`ghost`,size:`icon-small`,className:O(o===`table`&&`bg-background text-foreground shadow-xs hover:bg-background`),"aria-label":c.tableView,onClick:()=>m(`table`),children:(0,G.jsx)(ce,{className:`size-3.5`})})]}),!!T&&(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:_,children:c.clearFilters}),v]})}function Se({item:e,selected:t=!1,density:n=`comfortable`,showMeta:r=!0,accessors:o,strings:s,onToggle:c,onDetails:d,className:f}){let p=o.getType(e),m=o.getName(e),h=o.getSrc(e),g=o.getAlt(e)||m,b=o.getSize(e),x=o.getUsageCount(e),S=o.getPublic(e)===!1,C=o.getDuration(e);return(0,G.jsxs)(`div`,{"data-selected":t||void 0,"data-density":n,className:O(`media-library-card--component group/card overflow-hidden rounded-xl border border-border/70 bg-card text-left shadow-xs transition-all`,`hover:border-primary/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,t&&`media-library-card--selected border-primary ring-1 ring-primary`,f),onClick:c,children:[(0,G.jsxs)(J,{tint:o.getTint(e),className:O(n===`compact`?`aspect-square`:`aspect-[4/3]`),children:[(0,G.jsx)(be,{src:h,alt:g,type:p,className:`size-full object-cover`}),(0,G.jsx)(`span`,{className:O(`media-library-card--check absolute left-2 top-2 inline-flex size-5 items-center justify-center rounded-md border border-border bg-background/95 text-transparent opacity-0 shadow-xs backdrop-blur transition-opacity group-hover/card:opacity-100 group-focus-visible/card:opacity-100`,t&&`bg-primary text-primary-foreground opacity-100`),"aria-hidden":`true`,children:(0,G.jsx)(l,{className:`size-3`})}),!!d&&(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`solid`,size:`icon-small`,className:`media-library-card--details absolute right-2 top-2 opacity-0 shadow-sm transition-opacity group-hover/card:opacity-100 group-focus-within/card:opacity-100`,"aria-label":L(s.cardDetails,{name:m}),onClick:e=>{e.stopPropagation(),d()},children:(0,G.jsx)(_,{className:`size-3.5`})}),p===`video`&&!!C&&(0,G.jsxs)(i,{variant:`secondary`,className:`media-library-card--duration absolute bottom-2 left-2 bg-foreground text-background`,children:[(0,G.jsx)(I,{className:`size-3 fill-current`}),C]}),S&&(0,G.jsx)(i,{variant:`secondary`,className:`media-library-card--private absolute bottom-2 right-2 bg-background/90`,children:(0,G.jsx)(y,{className:`size-3`})})]}),(0,G.jsxs)(`div`,{className:`media-library-card--body grid gap-1 px-3 py-2.5`,children:[(0,G.jsx)(a,{tag:`div`,weight:`semibold`,size:`xs`,className:`truncate`,children:m}),r&&(0,G.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`truncate`,children:H(b)||s.unknownSize}),!!x&&(0,G.jsxs)(a,{tag:`span`,size:`xs`,type:`secondary`,className:`ml-auto inline-flex items-center gap-1`,children:[(0,G.jsx)(v,{className:`size-3`}),x]})]})]})]})}function Ce({items:e,selectedSet:t,accessors:n,strings:r,onToggle:o,onDetails:s}){return(0,G.jsxs)(`div`,{className:`media-library-table--component min-w-180`,children:[(0,G.jsxs)(`div`,{className:`sticky top-0 z-10 grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-3 border-b border-border bg-background px-3 py-2`,children:[(0,G.jsx)(`span`,{}),(0,G.jsx)(`span`,{}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,weight:`semibold`,children:r.table.name}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,weight:`semibold`,children:r.table.type}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,weight:`semibold`,children:r.table.size}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,weight:`semibold`,children:r.table.collection}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,weight:`semibold`,children:r.table.used}),(0,G.jsx)(`span`,{})]}),e.map(e=>{let c=n.getId(e),d=t.has(c),f=n.getType(e),p=n.getName(e),m=n.getSrc(e),h=n.getPublic(e)===!1;return(0,G.jsxs)(`div`,{"data-selected":d||void 0,className:O(`media-library-table--row grid grid-cols-[32px_42px_minmax(0,1fr)_86px_88px_120px_72px_34px] items-center gap-3 border-b border-border/60 px-3 py-2 last:border-b-0`,`cursor-pointer rounded-lg transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset`,d&&`bg-primary/10`),onClick:()=>o(c),children:[(0,G.jsx)(`span`,{className:O(`inline-flex size-5 items-center justify-center rounded-md border border-border text-transparent`,d&&`border-primary bg-primary text-primary-foreground`),"aria-hidden":`true`,children:(0,G.jsx)(l,{className:`size-3`})}),(0,G.jsx)(J,{tint:n.getTint(e),className:`size-9 rounded-md`,children:m?(0,G.jsx)(`img`,{src:m,alt:``,loading:`lazy`,className:`size-full object-cover`}):(0,G.jsx)(`div`,{className:`flex size-full items-center justify-center text-muted-foreground`,children:ye(f,`size-4`)})}),(0,G.jsxs)(a,{tag:`div`,weight:`semibold`,size:`xs`,className:`flex min-w-0 items-center gap-1 truncate`,children:[(0,G.jsx)(`span`,{className:`truncate`,children:p}),h&&(0,G.jsx)(y,{className:`size-3 shrink-0 text-muted-foreground`})]}),(0,G.jsx)(i,{variant:`secondary`,children:K(f,r)}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,children:H(n.getSize(e))||r.unknownSize}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`truncate`,children:n.getCollection(e)||`-`}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,children:n.getUsageCount(e)?n.getUsageCount(e):`-`}),(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":L(r.cardDetails,{name:p}),onClick:e=>{e.stopPropagation(),s(c)},children:(0,G.jsx)(_,{className:`size-3.5`})})]},c)})]})}function we({item:e,collections:t=[],accessors:n,strings:r,onClose:o,onUpdate:c,onRemove:l,renderDetail:d}){if(!e)return null;let f=n.getName(e),m=n.getType(e),h=n.getSrc(e),g=n.getCollection(e)??t[0]?.value??``,_=n.getTags(e),v=n.getPublic(e)??!0,y=d?.(e,{accessors:n,update:c,remove:l,close:o});return y?(0,G.jsx)(G.Fragment,{children:y}):(0,G.jsxs)(`aside`,{className:`media-library-detail-panel--component flex min-h-0 w-full flex-col border-l border-border bg-background lg:w-72`,children:[(0,G.jsxs)(`div`,{className:`media-library-detail-panel--header flex items-center gap-2 border-b border-border px-3 py-2.5`,children:[(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":r.detail.close,onClick:o,children:(0,G.jsx)(s,{className:`size-3.5`})}),(0,G.jsx)(a,{weight:`semibold`,children:r.detail.title})]}),(0,G.jsxs)(`div`,{className:`media-library-detail-panel--body grid min-h-0 gap-4 overflow-y-auto p-4`,children:[(0,G.jsxs)(J,{tint:n.getTint(e),className:`aspect-[4/3] rounded-lg border border-border`,children:[(0,G.jsx)(be,{src:h,alt:n.getAlt(e)||f,type:m,className:`size-full object-cover`}),m===`video`&&!!n.getDuration(e)&&(0,G.jsxs)(i,{className:`absolute bottom-2 right-2 bg-foreground text-background`,children:[(0,G.jsx)(I,{className:`size-3 fill-current`}),n.getDuration(e)]})]}),(0,G.jsx)(a,{tag:`div`,weight:`semibold`,className:`break-words`,children:f}),(0,G.jsx)(`dl`,{className:`media-library-detail-panel--facts grid gap-2`,children:[[r.detail.type,K(m,r)],[r.detail.size,H(n.getSize(e))||r.unknownSize],[r.detail.dimensions,U(e,n)||`-`],[r.detail.uploaded,String(n.getUploadedAt(e)??`-`)],[r.detail.usedIn,q(n.getUsageCount(e),r)]].map(([e,t])=>(0,G.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,G.jsx)(`dt`,{children:(0,G.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,children:e})}),(0,G.jsx)(`dd`,{className:`m-0 text-right`,children:(0,G.jsx)(a,{tag:`span`,size:`xs`,weight:`medium`,children:t})})]},e))}),(0,G.jsx)(F,{label:r.detail.altText,children:(0,G.jsx)(M,{value:n.getAlt(e)??``,placeholder:r.detail.altPlaceholder,onChange:e=>c({alt:e.target.value})})}),(0,G.jsx)(F,{label:r.detail.collection,children:(0,G.jsx)(N,{value:g,options:t.map(e=>({value:e.value,label:String(e.label)})),"aria-label":r.detail.collection,onChange:e=>c({collection:e})})}),(0,G.jsx)(F,{label:r.detail.tags,children:(0,G.jsx)(M,{value:_.join(`, `),placeholder:r.detail.tagsPlaceholder,onChange:e=>c({tags:e.target.value.split(`,`).map(e=>e.trim()).filter(Boolean)})})}),(0,G.jsxs)(`div`,{className:`media-library-detail-panel--public flex items-center justify-between gap-4 rounded-lg border border-border bg-muted/20 p-3`,children:[(0,G.jsxs)(`div`,{children:[(0,G.jsx)(a,{weight:`semibold`,size:`xs`,children:r.detail.public}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,children:v?r.detail.publicHint:r.detail.privateHint})]}),(0,G.jsx)(P,{checked:v,onCheckedChange:e=>c({public:e})})]}),(0,G.jsxs)(`div`,{className:`media-library-detail-panel--actions flex flex-wrap gap-2`,children:[(0,G.jsxs)(u,{type:`button`,variant:`secondary`,buttonStyle:`outline`,children:[(0,G.jsx)(p,{className:`size-3.5`}),r.detail.replace]}),(0,G.jsxs)(u,{type:`button`,variant:`error`,buttonStyle:`ghost`,onClick:l,children:[(0,G.jsx)(S,{className:`size-3.5`}),r.detail.delete]})]})]})]})}function Te({stagedFiles:e,uploadOptions:t,collections:n=[],uploading:r=!1,strings:o,onFiles:s,onRemoveFile:c,onOptionsChange:l,empty:d}){return(0,G.jsxs)(`div`,{className:`media-library-upload-panel--component grid gap-4 p-4`,children:[(0,G.jsx)(m,{onDrop:s,accept:`image/*,video/*`,multiple:!0,size:`default`,strings:{instruction:o.upload.dropTitle,helper:o.upload.dropHint,dragOver:o.upload.dragOver}}),e.length>0?(0,G.jsx)(`div`,{className:`media-library-upload-panel--staged grid gap-2`,children:e.map(e=>(0,G.jsxs)(`div`,{className:`media-library-upload-panel--staged-file flex items-center gap-3 rounded-lg border border-border bg-card p-2`,children:[(0,G.jsx)(J,{className:`size-10 rounded-md`,children:e.src?(0,G.jsx)(`img`,{src:e.src,alt:e.name,className:`size-full object-cover`}):(0,G.jsx)(`div`,{className:`flex size-full items-center justify-center text-muted-foreground`,children:ye(e.type,`size-4`)})}),(0,G.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,G.jsxs)(`div`,{className:`flex items-baseline gap-3`,children:[(0,G.jsx)(a,{weight:`semibold`,size:`xs`,className:`truncate`,children:e.name}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`ml-auto shrink-0`,children:H(e.size)})]}),(e.status===`uploading`||e.status===`done`)&&(0,G.jsx)(`div`,{className:`mt-2 h-1 overflow-hidden rounded-full bg-muted`,children:(0,G.jsx)(`div`,{className:`h-full rounded-full bg-primary transition-[width]`,style:{width:`${e.progress}%`}})}),e.status===`error`&&(0,G.jsx)(a,{size:`xs`,type:`error`,children:e.error})]}),e.status===`done`?(0,G.jsx)(i,{variant:`success`,children:o.upload.done}):e.status===`uploading`?(0,G.jsxs)(a,{size:`xs`,type:`secondary`,className:`tabular-nums`,children:[Math.round(e.progress),`%`]}):(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,disabled:r,"aria-label":L(o.upload.removeFile,{name:e.name}),onClick:()=>c(e.id),children:(0,G.jsx)(w,{className:`size-3.5`})})]},e.id))}):d,(0,G.jsxs)(`div`,{className:`media-library-upload-panel--options grid gap-3 rounded-lg border border-border bg-muted/20 p-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]`,children:[(0,G.jsx)(F,{label:o.upload.collection,children:(0,G.jsx)(N,{value:t.collection??n[0]?.value,options:n.map(e=>({value:e.value,label:String(e.label)})),"aria-label":o.upload.collection,onChange:e=>l({collection:e})})}),(0,G.jsx)(F,{label:o.upload.tags,children:(0,G.jsx)(M,{value:t.tags.join(`, `),placeholder:o.upload.tagsPlaceholder,onChange:e=>l({tags:e.target.value.split(`,`).map(e=>e.trim()).filter(Boolean)})})}),(0,G.jsxs)(`div`,{className:`flex items-center justify-between gap-4 md:self-end`,children:[(0,G.jsxs)(`div`,{children:[(0,G.jsx)(a,{weight:`semibold`,size:`xs`,children:o.upload.public}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,children:o.upload.publicHint})]}),(0,G.jsx)(P,{checked:t.public,onCheckedChange:e=>l({public:e})})]})]})]})}function Ee({tab:e,selectedIds:t,selectionMode:n,stagedFiles:r,strings:i,onClearSelection:o,className:s}){let c=t.length,l=r.reduce((e,t)=>e+t.size,0),d=r.length,f=O(`media-library-footer-summary--component flex min-w-0 items-center gap-3`,s);return e===`upload`?(0,G.jsx)(`div`,{className:f,"aria-live":`polite`,children:(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`truncate`,children:d===0?i.footer.noFiles:L(i.footer.stagedSummary,{count:d,size:H(l)})})}):(0,G.jsx)(`div`,{className:f,"aria-live":`polite`,children:c>0?(0,G.jsxs)(G.Fragment,{children:[(0,G.jsx)(a,{weight:`semibold`,size:`xs`,className:`whitespace-nowrap`,children:L(i.footer.selectedCount,{count:c})}),(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:o,children:i.footer.clear})]}):(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`truncate`,children:n===`single`?i.footer.pickOne:i.footer.pickMany})})}function X({tab:e,selectedItems:t,selectedIds:n,stagedFiles:r,uploading:i=!1,strings:a,confirmLabel:o,cancelLabel:s,onCancel:c,onConfirm:l,onUpload:d,onCancelUpload:f,className:p}){let m=n.length,h=r.length;return e===`upload`?(0,G.jsxs)(`div`,{className:O(`media-library-footer-actions--component flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,p),children:[(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,disabled:i,onClick:f,children:s??a.footer.cancel}),(0,G.jsx)(u,{type:`button`,disabled:h===0||i,onClick:d,loading:i,loadingLabels:{loading:a.footer.uploading},children:h<=1?a.footer.upload:L(a.footer.uploadMany,{count:h})})]}):(0,G.jsxs)(`div`,{className:O(`media-library-footer-actions--component flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,p),children:[(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:c,children:s??a.footer.cancel}),(0,G.jsx)(u,{type:`button`,disabled:m===0,onClick:l,children:o??(m===0?a.footer.confirmEmpty:t.length===1?a.footer.confirmOne:L(a.footer.confirmMany,{count:m}))})]})}function De({tab:e,selectedItems:t,selectedIds:n,selectionMode:r,stagedFiles:i,uploading:a=!1,strings:o,confirmLabel:s,cancelLabel:c,onCancel:l,onConfirm:u,onClearSelection:d,onUpload:f,onCancelUpload:p,chrome:m=`section`,className:h}){return(0,G.jsxs)(`footer`,{className:O(`media-library-footer--component flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between`,m===`section`&&`border-t border-border bg-background px-4 py-3`,h),children:[(0,G.jsx)(Ee,{tab:e,selectedIds:n,selectionMode:r,stagedFiles:i,strings:o,onClearSelection:d}),(0,G.jsx)(X,{tab:e,selectedItems:t,selectedIds:n,stagedFiles:i,uploading:a,strings:o,confirmLabel:s,cancelLabel:c,onCancel:l,onConfirm:u,onUpload:f,onCancelUpload:p})]})}var Oe=t(ee(),1),ke=(0,R.createContext)(null);function Ae(e,t,n){return(0,R.useMemo)(()=>{if(e)return e;let r=new Set;for(let e of t){let t=n(e);t&&r.add(t)}return Array.from(r).map(e=>({value:e,label:e}))},[e,n,t])}function je({title:e,description:t,confirmLabel:n,cancelLabel:r,selectionMode:i=`multiple`,density:o=`comfortable`,showMeta:s=!0,allowUpload:c=!0,typeFilters:l,confirmOnSelect:d=!1,onConfirm:f,onCancel:m,onClose:h,strings:_,slots:v,heightClassName:y,className:b,items:x,fetcher:S,accessors:C,collections:w,value:ee,defaultValue:E,onValueChange:te,onItemUpdate:D,onItemDelete:ne,onUpload:re,onError:M,initialTab:N,defaultView:P,defaultQuery:F,defaultType:ie,defaultCollection:ae,defaultSort:oe,defaultUploadOptions:se,...ce}){let I=T(le,_),z=ve({items:x,fetcher:S,accessors:C,collections:w,selectionMode:i,value:ee,defaultValue:E,onValueChange:te,onItemUpdate:D,onItemDelete:ne,onUpload:re,onError:M,initialTab:N,defaultView:P,defaultQuery:F,defaultType:ie,defaultCollection:ae,defaultSort:oe,defaultUploadOptions:se}),ue=Ae(w,z.items,z.accessors.getCollection),B=c?z.tab:`library`,V=z.detailId?z.items.find(e=>z.accessors.getId(e)===z.detailId)??null:null,H=(0,R.useContext)(ke),U=!v?.footer,W=H&&U?(0,G.jsx)(Ee,{tab:B,selectedIds:z.selectedIds,selectionMode:i,stagedFiles:z.stagedFiles,strings:I,onClearSelection:z.clearSelection,className:`media-library-dialog--selection-summary shrink-0 justify-end`}):null,de=!!(e||t||v?.headerStart),fe=!!(c||v?.headerEnd||W),pe=de||fe,me=()=>{f?.(z.selectedItems,z.selectedIds),h?.()},he=()=>{m?.(),h?.()},ge=e=>{let t=z.accessors.getId(e);z.toggleSelection(t),d&&(f?.([e],[t]),h?.())},_e=z.query.trim(),ye=_e.length>0?L(I.countSearch,{count:z.filteredCount,total:z.totalCount,query:_e}):z.filteredCount===z.totalCount?L(I.countAll,{count:z.totalCount}):L(I.countFiltered,{count:z.filteredCount,total:z.totalCount}),K=v?.footer??(H?(0,G.jsx)(X,{tab:B,selectedItems:z.selectedItems,selectedIds:z.selectedIds,stagedFiles:z.stagedFiles,uploading:z.uploading,strings:I,confirmLabel:n,cancelLabel:r,onCancel:he,onConfirm:me,onUpload:z.startUpload,onCancelUpload:()=>{z.clearStagedFiles(),z.setTab(`library`)},className:`ml-auto`}):(0,G.jsx)(De,{tab:B,selectedItems:z.selectedItems,selectedIds:z.selectedIds,selectionMode:i,stagedFiles:z.stagedFiles,uploading:z.uploading,strings:I,confirmLabel:n,cancelLabel:r,onCancel:he,onConfirm:me,onClearSelection:z.clearSelection,onUpload:z.startUpload,onCancelUpload:()=>{z.clearStagedFiles(),z.setTab(`library`)}}));return(0,G.jsxs)(`section`,{className:O(`media-library--component flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-background`,y??`h-190 max-h-[calc(100vh-7rem)]`,b),...ce,children:[pe&&(0,G.jsxs)(`header`,{className:`media-library--header flex flex-col gap-3 border-b border-border px-4 py-3 lg:flex-row lg:items-center lg:justify-between`,children:[de&&(0,G.jsxs)(`div`,{className:`flex min-w-0 items-start gap-3`,children:[v?.headerStart,(e||t)&&(0,G.jsxs)(`div`,{className:`min-w-0`,children:[!!e&&(0,G.jsx)(a,{tag:`div`,weight:`semibold`,children:e}),!!t&&(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:t})]})]}),fe&&(0,G.jsxs)(`div`,{className:O(`flex min-w-0 flex-wrap items-center gap-2`,W?`flex-1 justify-between`:`lg:justify-end`),children:[(0,G.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center gap-2`,children:[c&&(0,G.jsxs)(`div`,{className:`media-library--tabs flex items-center rounded-md bg-muted p-0.5`,role:`tablist`,children:[(0,G.jsxs)(u,{type:`button`,role:`tab`,"aria-selected":B===`library`,variant:`secondary`,buttonStyle:`ghost`,className:O(`h-8 rounded-sm px-3 shadow-none`,B===`library`?`bg-background text-foreground shadow-xs hover:bg-background`:`text-muted-foreground hover:bg-transparent hover:text-foreground`),onClick:()=>z.setTab(`library`),children:[(0,G.jsx)(g,{className:`size-3.5`}),I.tabs.library]}),(0,G.jsxs)(u,{type:`button`,role:`tab`,"aria-selected":B===`upload`,variant:`secondary`,buttonStyle:`ghost`,className:O(`h-8 rounded-sm px-3 shadow-none`,B===`upload`?`bg-background text-foreground shadow-xs hover:bg-background`:`text-muted-foreground hover:bg-transparent hover:text-foreground`),onClick:()=>z.setTab(`upload`),children:[(0,G.jsx)(p,{className:`size-3.5`}),I.tabs.upload,z.stagedFiles.length>0&&(0,G.jsx)(`span`,{className:`rounded-full bg-background/20 px-1.5 text-xs tabular-nums`,children:z.stagedFiles.length})]})]}),v?.headerEnd]}),W]})]}),(0,G.jsxs)(`div`,{className:`media-library--body flex min-h-0 flex-1`,children:[B===`upload`?(0,G.jsx)(`div`,{className:`min-w-0 flex-1 overflow-y-auto`,children:(0,G.jsx)(Te,{stagedFiles:z.stagedFiles,uploadOptions:z.uploadOptions,collections:ue,uploading:z.uploading,strings:I,onFiles:z.addFiles,onRemoveFile:z.removeStagedFile,onOptionsChange:z.updateUploadOptions,empty:v?.uploadEmpty})}):(0,G.jsxs)(`div`,{className:O(`media-library--library min-w-0 flex-1 flex-col`,V?`hidden lg:flex`:`flex`),children:[(0,G.jsxs)(`div`,{className:`media-library--toolbar border-b border-border/70 px-4 py-3`,children:[(0,G.jsx)(Y,{query:z.query,type:z.type,typeFilters:l,collection:z.collection,sort:z.sort,view:z.view,collections:ue,strings:I,onQueryChange:z.setQuery,onTypeChange:z.setType,onCollectionChange:z.setCollection,onSortChange:z.setSort,onViewChange:z.setView,onClearFilters:z.clearFilters,toolbarEnd:v?.toolbarEnd}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-2`,"aria-live":`polite`,children:ye})]}),(0,G.jsx)(`div`,{className:`media-library--results min-h-0 flex-1 overflow-y-auto p-4`,children:z.loading?v?.loading??(0,G.jsx)(`div`,{className:`flex min-h-64 items-center justify-center`,children:(0,G.jsx)(a,{type:`secondary`,children:I.loading})}):z.error?v?.error??(0,G.jsxs)(j,{variant:`destructive`,children:[(0,G.jsx)(k,{children:I.errorTitle}),(0,G.jsx)(A,{children:I.errorDescription})]}):z.visibleItems.length===0?v?.empty??(0,G.jsx)(xe,{title:z.hasFilters?I.emptyFilteredTitle:I.emptyLibraryTitle,description:z.hasFilters?I.emptyFilteredDescription:I.emptyLibraryDescription,action:z.hasFilters?(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`outline`,onClick:z.clearFilters,children:I.clearFilters}):c?(0,G.jsxs)(u,{type:`button`,onClick:()=>z.setTab(`upload`),children:[(0,G.jsx)(p,{className:`size-3.5`}),I.uploadMedia]}):void 0}):z.view===`table`?(0,G.jsx)(`div`,{className:`overflow-x-auto`,children:(0,G.jsx)(Ce,{items:z.visibleItems,selectedSet:z.selectedSet,selectionMode:i,accessors:z.accessors,strings:I,onToggle:e=>{let t=z.items.find(t=>z.accessors.getId(t)===e);t&&ge(t)},onDetails:z.setDetailId})}):(0,G.jsx)(`div`,{className:O(`media-library--grid grid gap-3`,o===`compact`?`grid-cols-[repeat(auto-fill,minmax(136px,1fr))]`:`grid-cols-[repeat(auto-fill,minmax(168px,1fr))]`),children:z.visibleItems.map(e=>{let t=z.accessors.getId(e),n={id:t,selected:z.selectedSet.has(t),selectionMode:i,accessors:z.accessors,toggle:()=>ge(e),openDetails:()=>z.setDetailId(t)},r=v?.renderItem?.(e,n);return r?(0,G.jsx)(`div`,{children:r},t):(0,G.jsx)(Se,{item:e,selected:n.selected,density:o,showMeta:s,selectionMode:i,accessors:z.accessors,strings:I,onToggle:n.toggle,onDetails:n.openDetails},t)})})})]}),B===`library`&&(0,G.jsx)(we,{item:V,collections:ue,accessors:z.accessors,strings:I,onClose:()=>z.setDetailId(null),onUpdate:e=>V&&z.updateItem(V,e),onRemove:()=>{V&&(z.removeItem(V),z.setDetailId(null))},renderDetail:v?.renderDetail})]}),H?H.element?(0,Oe.createPortal)(K,H.element):null:K]})}function Me({open:e,onOpenChange:t,trigger:n,dialogTitle:r,dialogDescription:i,onClose:a,className:o,dialogClassName:s,contentClassName:c,closeOnEscape:l=!0,closeOnBackdropClick:u=!0,...d}){let f=T(le,d.strings),[p,m]=(0,R.useState)(!1),[h,g]=(0,R.useState)(null),_=e!==void 0,v=_?e:p,y=e=>{_||m(e),t?.(e)},b=()=>{y(!1),a?.()};return(0,G.jsx)(ke.Provider,{value:{element:h},children:(0,G.jsx)(ie,{open:v,onOpenChange:y,onClose:a,trigger:n,title:r??f.title,description:i??f.description,size:`full`,showCancel:!1,showConfirm:!1,footer:(0,G.jsx)(`div`,{ref:g,className:`media-library-dialog--footer`}),className:O(`media-library-dialog--component max-h-[calc(100vh-2rem)] max-w-[min(1060px,calc(100vw-2rem))]`,s),contentClassName:O(`media-library-dialog--body flex min-h-0 flex-col overflow-hidden p-0`,c),closeOnBackdropClick:u,closeOnEscape:l,children:(0,G.jsx)(je,{...d,onClose:b,className:O(`media-library-dialog--library rounded-none border-0`,o),heightClassName:d.heightClassName??`min-h-0 flex-1`,strings:d.strings})})})}function Ne(e,t,n){let r=e.slice(),[i]=r.splice(t,1);return i===void 0||r.splice(n,0,i),r}function Pe({items:e,accessors:t,title:n,description:r,primaryId:o,onPrimaryChange:l,onRemove:d,onReorder:f,onAdd:p,maxItems:m,layout:g=`field`,density:_=`comfortable`,readOnly:v=!1,empty:C,action:ee,renderItem:E,strings:te,className:D,...ne}){let k=T(le,te),A=V(t),j=e.length,re=o??(j>0?A.getId(e[0]):void 0),M=!v&&!!p&&(m===void 0||j<m),N=M&&(g===`field`||j>0)?(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`outline`,icon:b,onClick:p,children:k.gallery.add}):m!==void 0&&j>=m?(0,G.jsx)(i,{variant:`secondary`,children:k.gallery.maxReached}):null,P=(t,n)=>{if(n<0||n>=j||t===n)return;let r=Ne(e,t,n);f?.(r.map(e=>A.getId(e)),r)},F=!!(n||r||ee||N),ie=j===0&&g!==`field`,ae=()=>!M||g!==`field`?null:(0,G.jsxs)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,className:O(`media-resource-gallery--add-tile h-auto min-h-24 w-full flex-col rounded-lg border border-dashed border-border bg-background text-muted-foreground shadow-none`,`aspect-square hover:border-primary/50 hover:bg-primary/5 hover:text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`),"aria-label":k.gallery.addTile,onClick:p,children:[(0,G.jsx)(b,{className:`size-4`}),(0,G.jsx)(`span`,{className:`sr-only`,children:k.gallery.addTile})]});return(0,G.jsxs)(`section`,{className:O(`media-resource-gallery--component rounded-lg border border-border bg-card shadow-xs`,D),"data-layout":g,"data-density":_,...ne,children:[F&&(0,G.jsxs)(`header`,{className:`media-resource-gallery--header flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-start sm:justify-between`,children:[(0,G.jsxs)(`div`,{className:`min-w-0`,children:[!!n&&(0,G.jsx)(a,{tag:`div`,weight:`semibold`,children:n}),!!r&&(0,G.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-0.5`,children:r})]}),(0,G.jsx)(`div`,{className:`media-resource-gallery--actions flex flex-wrap items-center gap-2`,children:ee??N})]}),ie?(0,G.jsx)(`div`,{className:`media-resource-gallery--empty p-4 pt-0`,children:C??(0,G.jsx)(xe,{title:k.gallery.emptyTitle,description:k.gallery.emptyDescription,action:M?(0,G.jsx)(u,{type:`button`,icon:oe,onClick:p,children:k.gallery.add}):void 0})}):(0,G.jsxs)(`div`,{className:O(`media-resource-gallery--items p-4`,F&&`pt-0`,g===`list`?`grid gap-2`:g===`field`?`grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-3 sm:grid-cols-[repeat(auto-fill,minmax(108px,1fr))]`:_===`compact`?`grid grid-cols-[repeat(auto-fill,minmax(132px,1fr))] gap-3`:`grid grid-cols-[repeat(auto-fill,minmax(164px,1fr))] gap-3`),children:[e.map((e,t)=>{let n=A.getId(e),r=A.getName(e),o=A.getType(e),f=A.getSrc(e),p=A.getAlt(e)||r,m=n===re,_=A.getPublic(e)===!1,b=A.getDuration(e),C=t>0,T=t<j-1,ee=E?.(e,{id:n,index:t,total:j,primary:m,accessors:A,canMovePrevious:C,canMoveNext:T,setPrimary:()=>l?.(n,e),remove:()=>d?.(n,e),movePrevious:()=>P(t,t-1),moveNext:()=>P(t,t+1)});return ee?(0,G.jsx)(`div`,{children:ee},n):g===`field`?(0,G.jsxs)(`div`,{className:O(`media-resource-gallery--item group/gallery relative aspect-square overflow-hidden rounded-lg border border-border bg-background shadow-xs`,`transition-colors hover:border-primary/40 focus-within:border-primary/50`,m&&`col-span-2 row-span-2 min-h-52`),"data-primary":m||void 0,children:[f?(0,G.jsx)(`img`,{src:f,alt:p,loading:`lazy`,className:`size-full object-cover`}):(0,G.jsx)(`div`,{className:`flex size-full items-center justify-center bg-muted text-muted-foreground`,children:(0,G.jsx)(h,{className:m?`size-7`:`size-5`})}),m&&(0,G.jsx)(i,{variant:`secondary`,className:`absolute left-2 top-2 bg-background/90 shadow-xs`,children:k.gallery.cover}),o===`video`&&!!b&&(0,G.jsxs)(i,{variant:`secondary`,className:`absolute bottom-2 left-2 bg-foreground text-background`,children:[(0,G.jsx)(I,{className:`size-3 fill-current`}),b]}),_&&(0,G.jsx)(`span`,{className:`absolute bottom-2 right-2 inline-flex size-6 items-center justify-center rounded-full border border-border bg-background/90 text-muted-foreground shadow-xs`,children:(0,G.jsx)(y,{className:`size-3`})}),!v&&(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`solid`,size:`icon-small`,className:`absolute right-2 top-2 opacity-0 shadow-sm transition-opacity group-hover/gallery:opacity-100 group-focus-within/gallery:opacity-100`,"aria-label":k.gallery.remove,onClick:()=>d?.(n,e),children:(0,G.jsx)(w,{className:`size-3.5`})})]},n):g===`list`?(0,G.jsxs)(`div`,{className:`media-resource-gallery--item flex min-w-0 items-center gap-3 rounded-lg border border-border bg-background p-2`,"data-primary":m||void 0,children:[(0,G.jsx)(`div`,{className:`relative size-12 shrink-0 overflow-hidden rounded-md bg-muted`,children:f?(0,G.jsx)(`img`,{src:f,alt:p,loading:`lazy`,className:`size-full object-cover`}):(0,G.jsx)(`div`,{className:`flex size-full items-center justify-center text-muted-foreground`,children:(0,G.jsx)(h,{className:`size-4`})})}),(0,G.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,G.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,G.jsx)(a,{tag:`div`,weight:`semibold`,size:`xs`,className:`truncate`,children:r}),m&&(0,G.jsx)(i,{variant:`info`,children:k.gallery.primary})]}),(0,G.jsxs)(a,{size:`xs`,type:`secondary`,children:[L(k.gallery.itemPosition,{index:t+1,total:j}),` · `,H(A.getSize(e))||k.unknownSize]})]}),!v&&(0,G.jsxs)(`div`,{className:`flex shrink-0 items-center gap-1`,children:[(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,disabled:m,"aria-label":k.gallery.setPrimary,onClick:()=>l?.(n,e),children:(0,G.jsx)(x,{className:`size-3.5`})}),(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,disabled:!C,"aria-label":k.gallery.movePrevious,onClick:()=>P(t,t-1),children:(0,G.jsx)(s,{className:`size-3.5`})}),(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,disabled:!T,"aria-label":k.gallery.moveNext,onClick:()=>P(t,t+1),children:(0,G.jsx)(c,{className:`size-3.5`})}),(0,G.jsx)(u,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":k.gallery.remove,onClick:()=>d?.(n,e),children:(0,G.jsx)(S,{className:`size-3.5`})})]})]},n):(0,G.jsxs)(`div`,{className:`media-resource-gallery--item group/gallery overflow-hidden rounded-lg border border-border bg-background shadow-xs transition-colors hover:border-primary/40`,"data-primary":m||void 0,children:[(0,G.jsxs)(`div`,{className:`relative aspect-[4/3] bg-muted`,children:[f?(0,G.jsx)(`img`,{src:f,alt:p,loading:`lazy`,className:`size-full object-cover`}):(0,G.jsx)(`div`,{className:`flex size-full items-center justify-center text-muted-foreground`,children:(0,G.jsx)(h,{className:`size-6`})}),(0,G.jsxs)(`div`,{className:`absolute left-2 top-2 flex flex-wrap gap-1`,children:[m&&(0,G.jsx)(i,{variant:`info`,children:k.gallery.primary}),(0,G.jsx)(i,{variant:`secondary`,children:L(k.gallery.itemPosition,{index:t+1,total:j})})]})]}),(0,G.jsxs)(`div`,{className:`media-resource-gallery--item-body grid gap-2 p-3`,children:[(0,G.jsxs)(`div`,{className:`min-w-0`,children:[(0,G.jsx)(a,{tag:`div`,weight:`semibold`,size:`xs`,className:`truncate`,children:r}),(0,G.jsx)(a,{size:`xs`,type:`secondary`,children:H(A.getSize(e))||k.unknownSize})]}),!v&&(0,G.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,disabled:m,"aria-label":k.gallery.setPrimary,onClick:()=>l?.(n,e),children:(0,G.jsx)(x,{className:`size-3.5`})}),(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,disabled:!C,"aria-label":k.gallery.movePrevious,onClick:()=>P(t,t-1),children:(0,G.jsx)(s,{className:`size-3.5`})}),(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,disabled:!T,"aria-label":k.gallery.moveNext,onClick:()=>P(t,t+1),children:(0,G.jsx)(c,{className:`size-3.5`})}),(0,G.jsx)(u,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`icon-small`,className:`ml-auto`,"aria-label":k.gallery.remove,onClick:()=>d?.(n,e),children:(0,G.jsx)(S,{className:`size-3.5`})})]})]})]},n)}),ae()]})]})}var Fe=e({AsyncFetcherLibrary:()=>Ye,ConfirmOnSelectDialog:()=>Je,EmbeddedLibrary:()=>We,EmptyAndErrorStates:()=>Xe,ExternalResourceGallery:()=>qe,HeadlessSelection:()=>Ze,ProductMediaDialog:()=>Ge,ResourceGalleryList:()=>Ke}),Ie=[{value:`Products`,label:`Products`},{value:`Lifestyle`,label:`Lifestyle`},{value:`Banners`,label:`Banners`}];function Z(e,t,n){let r=`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360">
+	<defs>
+		<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
+			<stop offset="0" stop-color="${t}"/>
+			<stop offset="1" stop-color="${n}"/>
+		</linearGradient>
+	</defs>
+	<rect width="480" height="360" fill="url(#g)"/>
+	<circle cx="386" cy="78" r="92" fill="rgba(255,255,255,.22)"/>
+	<circle cx="94" cy="304" r="138" fill="rgba(0,0,0,.12)"/>
+	<path d="M42 270c68-54 126-58 176-12s111 42 220-12v114H42V270Z" fill="rgba(255,255,255,.18)"/>
+	<text x="40" y="58" fill="rgba(255,255,255,.92)" font-family="Inter, ui-sans-serif, system-ui" font-size="28" font-weight="700">${e}</text>
+	<text x="40" y="91" fill="rgba(255,255,255,.72)" font-family="Inter, ui-sans-serif, system-ui" font-size="15" font-weight="500">Preview asset</text>
+</svg>`;return`data:image/svg+xml,${encodeURIComponent(r)}`}var Le=[{id:`m01`,name:`balsamic-bottle-front.jpg`,type:`image`,src:Z(`Bottle front`,`#a16207`,`#f5d0a9`),alt:`Front view of aged balsamic bottle on white`,size:318500,width:1600,height:2e3,collection:`Products`,tags:[`bottle`,`primary`],public:!0,uploadedAt:`May 28, 2026`,usageCount:5},{id:`m02`,name:`balsamic-bottle-back.jpg`,type:`image`,src:Z(`Bottle back`,`#78350f`,`#d6a15f`),alt:`Back label with ingredients`,size:287200,width:1600,height:2e3,collection:`Products`,tags:[`bottle`,`label`],public:!0,uploadedAt:`May 28, 2026`,usageCount:2},{id:`m03`,name:`label-detail-macro.jpg`,type:`image`,src:Z(`Label detail`,`#7f1d1d`,`#fca5a5`),alt:`Macro shot of embossed label`,size:412800,width:2e3,height:1500,collection:`Products`,tags:[`label`,`macro`],public:!0,uploadedAt:`May 26, 2026`,usageCount:3},{id:`m04`,name:`olive-grove-hero.jpg`,type:`image`,src:Z(`Olive grove`,`#365314`,`#bef264`),alt:`Olive grove at golden hour`,size:1228800,width:2400,height:1600,collection:`Lifestyle`,tags:[`hero`,`estate`],public:!0,uploadedAt:`May 24, 2026`,usageCount:3},{id:`m05`,name:`tasting-set-overhead.jpg`,type:`image`,src:Z(`Tasting set`,`#334155`,`#cbd5e1`),alt:`Overhead tasting set on linen`,size:689400,width:2e3,height:2e3,collection:`Lifestyle`,tags:[`tasting`,`flat-lay`],public:!0,uploadedAt:`May 22, 2026`,usageCount:1},{id:`m06`,name:`harvest-table.mp4`,type:`video`,src:Z(`Harvest table`,`#166534`,`#86efac`),alt:``,size:155e5,width:1920,height:1080,duration:`0:42`,collection:`Lifestyle`,tags:[`harvest`,`b-roll`],public:!1,uploadedAt:`May 20, 2026`,usageCount:0},{id:`m07`,name:`press-room-tour.mp4`,type:`video`,src:Z(`Press room`,`#1e3a8a`,`#93c5fd`),alt:``,size:3796e4,width:1920,height:1080,duration:`1:58`,collection:`Lifestyle`,tags:[`tour`,`process`],public:!0,uploadedAt:`May 18, 2026`,usageCount:1},{id:`m08`,name:`gift-box-closed.jpg`,type:`image`,src:Z(`Gift closed`,`#581c87`,`#d8b4fe`),alt:`Closed gift box with ribbon`,size:254100,width:1600,height:1200,collection:`Products`,tags:[`gift`,`packaging`],public:!0,uploadedAt:`May 15, 2026`,usageCount:2},{id:`m09`,name:`gift-box-open.jpg`,type:`image`,src:Z(`Gift open`,`#831843`,`#f9a8d4`),alt:`Open gift box showing two bottles`,size:301700,width:1600,height:1200,collection:`Products`,tags:[`gift`,`packaging`],public:!0,uploadedAt:`May 15, 2026`,usageCount:2},{id:`m10`,name:`vineyard-autumn.jpg`,type:`image`,src:Z(`Vineyard autumn`,`#7c2d12`,`#fdba74`),alt:`Wide autumn vineyard banner`,size:2867200,width:2880,height:1200,collection:`Banners`,tags:[`banner`,`seasonal`],public:!0,uploadedAt:`May 12, 2026`,usageCount:1},{id:`m11`,name:`spring-menu-banner.jpg`,type:`image`,src:Z(`Spring menu`,`#14532d`,`#bbf7d0`),alt:`Spring menu campaign banner`,size:1945600,width:2880,height:1200,collection:`Banners`,tags:[`banner`,`campaign`],public:!1,uploadedAt:`May 10, 2026`,usageCount:0},{id:`m12`,name:`pour-shot-slowmo.mp4`,type:`video`,src:Z(`Pour shot`,`#4c0519`,`#fb7185`),alt:``,size:829e4,width:1080,height:1350,duration:`0:15`,collection:`Products`,tags:[`pour`,`social`],public:!0,uploadedAt:`May 8, 2026`,usageCount:4},{id:`m13`,name:`cellar-barrels.jpg`,type:`image`,src:Z(`Cellar barrels`,`#3f2a1d`,`#a16207`),alt:`Oak barrels in the aging cellar`,size:874500,width:2400,height:1600,collection:`Lifestyle`,tags:[`cellar`,`aging`],public:!0,uploadedAt:`May 5, 2026`,usageCount:1},{id:`m14`,name:`chef-pairing-event.jpg`,type:`image`,src:Z(`Chef pairing`,`#111827`,`#9ca3af`),alt:`Chef plating at pairing event`,size:763900,width:2e3,height:1334,collection:`Lifestyle`,tags:[`event`,`pairing`],public:!1,uploadedAt:`May 2, 2026`,usageCount:0},{id:`m15`,name:`bottle-trio-white.jpg`,type:`image`,src:Z(`Bottle trio`,`#f8fafc`,`#64748b`),alt:`Three bottles on white backdrop`,size:356200,width:2e3,height:1500,collection:`Products`,tags:[`trio`,`primary`],public:!0,uploadedAt:`Apr 29, 2026`,usageCount:6},{id:`m16`,name:`cork-and-wax-seal.jpg`,type:`image`,src:Z(`Wax seal`,`#7f1d1d`,`#f87171`),alt:`Wax seal close-up`,size:298300,width:1600,height:1600,collection:`Products`,tags:[`detail`,`seal`],public:!0,uploadedAt:`Apr 25, 2026`,usageCount:1},{id:`m17`,name:`estate-map-illustrated.png`,type:`image`,src:Z(`Estate map`,`#0f766e`,`#99f6e4`),alt:`Illustrated map of the estate`,size:1126400,width:2400,height:1800,collection:`Banners`,tags:[`map`,`illustration`],public:!0,uploadedAt:`Apr 20, 2026`,usageCount:1},{id:`m18`,name:`winter-campaign.jpg`,type:`image`,src:Z(`Winter campaign`,`#1e3a8a`,`#bfdbfe`),alt:`Winter campaign banner`,size:2150400,width:2880,height:1200,collection:`Banners`,tags:[`banner`,`seasonal`],public:!1,uploadedAt:`Apr 14, 2026`,usageCount:0}],Re=[{assetKey:`dam:landing-hero`,label:`landing-page-hero.avif`,kind:`image`,previewUrl:Z(`DAM hero`,`#0f172a`,`#38bdf8`),altText:`Hero image prepared by the external DAM`,bytes:124e4,folder:`DAM / Marketing`,references:14},{assetKey:`dam:press-kit`,label:`brand-press-kit.zip`,kind:`file`,bytes:462e4,folder:`DAM / Documents`,references:6}];function ze(e){return e.type.startsWith(`image/`)?`image`:e.type.startsWith(`video/`)?`video`:`file`}function Be(e){if(e.type.startsWith(`image/`)&&!(typeof URL>`u`||typeof URL.createObjectURL!=`function`))return URL.createObjectURL(e)}function Ve(e,t){return e.map((e,n)=>({id:`uploaded-${Date.now()}-${n}`,name:e.name,type:ze(e),src:Be(e),size:e.size,collection:t.collection??`Products`,tags:t.tags,public:t.public,uploadedAt:new Date().toISOString(),usageCount:0}))}function He(e,t){let n=t.query.trim().toLowerCase();return e.filter(e=>t.type!==`all`&&e.type!==t.type||t.collection&&e.collection!==t.collection?!1:n?[e.name,e.alt,e.collection,...e.tags??[]].filter(Boolean).join(` `).toLowerCase().includes(n):!0).sort((e,n)=>t.sort===`name`?e.name.localeCompare(n.name):t.sort===`size`?(n.size??0)-(e.size??0):t.sort===`usage`?(n.usageCount??0)-(e.usageCount??0):new Date(n.uploadedAt??0).getTime()-new Date(e.uploadedAt??0).getTime())}function Ue(e,t){let n=new Map(t.map((e,t)=>[e.id,t]));return e.slice().sort((e,t)=>(n.get(e)??0)-(n.get(t)??0))}function We(){let[e,t]=(0,R.useState)([`m01`]);return(0,G.jsx)(je,{title:`Campaign media`,description:`Search, inspect metadata, edit alt text, and stage uploads from one surface.`,items:Le,collections:Ie,value:e,onValueChange:t,onUpload:(e,t)=>Ve(e,t),onConfirm:e=>{t(e.map(e=>e.id))},onItemUpdate:()=>void 0,onItemDelete:()=>void 0,defaultUploadOptions:{collection:`Products`,tags:[`product`]},slots:{headerEnd:(0,G.jsxs)(i,{variant:`info`,children:[(0,G.jsx)(f,{className:`size-3`}),`Admin ready`]})}})}function Ge(){let[e,t]=(0,R.useState)(!1),[n,r]=(0,R.useState)([`m01`,`m03`]),[i,a]=(0,R.useState)(`m01`),o=(0,R.useMemo)(()=>Le.filter(e=>n.includes(e.id)),[n]);return(0,G.jsxs)(G.Fragment,{children:[(0,G.jsx)(Pe,{items:o,primaryId:i,title:`Media`,description:`Images and videos shown on the product page`,onAdd:()=>t(!0),onPrimaryChange:a,onRemove:e=>{r(t=>{let n=t.filter(t=>t!==e);return i===e&&a(n[0]??``),n})},onReorder:(e,t)=>r(e=>Ue(e,t)),maxItems:5}),(0,G.jsx)(Me,{open:e,onOpenChange:t,dialogTitle:`Add media`,dialogDescription:`Pick from the library, or upload new files`,items:Le,collections:Ie,value:n,onValueChange:r,onConfirm:(e,n)=>{r(n),a(e=>n.includes(e)?e:n[0]??``),t(!1)},onClose:()=>t(!1),onUpload:(e,t)=>Ve(e,t),defaultUploadOptions:{collection:`Products`,public:!0}})]})}function Ke(){let[e,t]=(0,R.useState)([`m04`,`m06`,`m15`]),[n,r]=(0,R.useState)(`m04`);return(0,G.jsx)(Pe,{items:(0,R.useMemo)(()=>Le.filter(t=>e.includes(t.id)),[e]),primaryId:n,title:`CMS resource gallery`,description:`List mode keeps filenames, position, size, cover state, and row actions scannable in dense admin forms.`,layout:`list`,onAdd:()=>void 0,onPrimaryChange:r,onRemove:e=>t(t=>t.filter(t=>t!==e)),onReorder:(e,n)=>t(e=>Ue(e,n)),maxItems:3,strings:{gallery:{maxReached:`3 of 3 attached`}}})}function qe(){return(0,G.jsx)(Pe,{items:Re,title:`External DAM attachments`,description:`Accessors let app-owned media records render without reshaping API responses.`,layout:`grid`,primaryId:`dam:landing-hero`,readOnly:!0,accessors:{getId:e=>e.assetKey,getName:e=>e.label,getType:e=>e.kind,getSrc:e=>e.previewUrl,getAlt:e=>e.altText,getSize:e=>e.bytes,getCollection:e=>e.folder,getUsageCount:e=>e.references}})}function Je(){let[e,t]=(0,R.useState)(null);return(0,G.jsx)(re,{icon:(0,G.jsx)(x,{className:`size-4`}),title:`Single-pick strategy`,description:`Use confirmOnSelect for avatar, cover, or logo pickers where clicking one asset should commit and close.`,headerEnd:e?(0,G.jsx)(i,{variant:`success`,children:e.name}):(0,G.jsx)(i,{variant:`secondary`,children:`No asset`}),children:(0,G.jsx)(Me,{trigger:(0,G.jsx)(u,{type:`button`,icon:oe,children:`Pick cover`}),items:Le,collections:Ie,selectionMode:`single`,confirmOnSelect:!0,allowUpload:!1,dialogTitle:`Pick cover media`,dialogDescription:`The dialog closes immediately after the selected item is confirmed.`,onConfirm:e=>t(e[0]??null)})})}function Ye(){return(0,G.jsx)(je,{title:`Remote media source`,description:`The fetcher receives query, type, collection, sort, and abort signal; the consumer owns the API call.`,fetcher:(0,R.useCallback)(async e=>{await new Promise(e=>window.setTimeout(e,240));let t=He(Le,e);return{items:t,total:t.length}},[]),collections:Ie,selectionMode:`single`,allowUpload:!1,defaultView:`table`,slots:{headerStart:(0,G.jsx)(`span`,{className:`inline-flex size-9 items-center justify-center rounded-lg bg-info/10 text-info`,children:(0,G.jsx)(E,{className:`size-4`})})}})}function Xe(){let e=(0,R.useCallback)(async()=>{throw await new Promise(e=>window.setTimeout(e,120)),Error(`Preview fetch failed`)},[]);return(0,G.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-2`,children:[(0,G.jsx)(je,{title:`Empty asset library`,description:`Empty state gives users a route into upload when no assets exist yet.`,items:[],collections:Ie,heightClassName:`h-130`}),(0,G.jsx)(je,{title:`Remote error`,description:`Fetcher errors render a tokenized alert while the consumer handles retry strategy.`,fetcher:e,collections:Ie,allowUpload:!1,heightClassName:`h-130`})]})}function Ze(){let e=ve({items:Le,selectionMode:`single`,defaultValue:[`m04`],defaultType:`image`});return(0,G.jsxs)(re,{icon:(0,G.jsx)(se,{className:`size-4`}),title:`Headless selection`,description:`useMediaLibrary exposes the same filtering, selection, and accessors for custom layouts.`,headerEnd:(0,G.jsxs)(i,{variant:`secondary`,children:[e.visibleItems.length,` images`]}),children:[(0,G.jsx)(`div`,{className:`grid grid-cols-2 gap-3 sm:grid-cols-4`,children:e.visibleItems.slice(0,4).map(t=>{let n=e.accessors.getId(t);return(0,G.jsx)(Se,{item:t,selected:e.selectedSet.has(n),selectionMode:`single`,accessors:e.accessors,strings:le,onToggle:()=>e.toggleSelection(n),onDetails:()=>e.setDetailId(n)},n)})}),(0,G.jsxs)(`div`,{className:`mt-3 flex items-center justify-between rounded-lg border border-border bg-muted/20 px-3 py-2`,children:[(0,G.jsxs)(a,{size:`xs`,type:`secondary`,children:[`Selected: `,e.selectedItems[0]?e.accessors.getName(e.selectedItems[0]):`None`]}),(0,G.jsx)(u,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,icon:p,onClick:e.clearSelection,children:`Clear`})]})]})}var Q=`import { useCallback, useMemo, useState } from 'react';
+import {
+	CheckCircle2,
+	ImagePlus,
+	Images,
+	Search,
+	Star,
+	UploadCloud,
+} from 'lucide-react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import {
+	defaultMediaLibraryStrings,
+	MediaLibrary,
+	MediaLibraryCard,
+	MediaLibraryDialog,
+	MediaResourceGallery,
+	useMediaLibrary,
+} from '@/components/features/media-library';
+import type {
+	MediaLibraryFetchParams,
+	MediaLibraryItem,
+	MediaLibraryUploadOptions,
+} from '@/components/features/media-library';
+import { Text } from '@/components/typography';
+
+const collections = [
+	{ value: 'Products', label: 'Products' },
+	{ value: 'Lifestyle', label: 'Lifestyle' },
+	{ value: 'Banners', label: 'Banners' },
+];
+
+function demoMediaSource(label: string, from: string, to: string) {
+	const svg = \`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 360">
+	<defs>
+		<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
+			<stop offset="0" stop-color="\${from}"/>
+			<stop offset="1" stop-color="\${to}"/>
+		</linearGradient>
+	</defs>
+	<rect width="480" height="360" fill="url(#g)"/>
+	<circle cx="386" cy="78" r="92" fill="rgba(255,255,255,.22)"/>
+	<circle cx="94" cy="304" r="138" fill="rgba(0,0,0,.12)"/>
+	<path d="M42 270c68-54 126-58 176-12s111 42 220-12v114H42V270Z" fill="rgba(255,255,255,.18)"/>
+	<text x="40" y="58" fill="rgba(255,255,255,.92)" font-family="Inter, ui-sans-serif, system-ui" font-size="28" font-weight="700">\${label}</text>
+	<text x="40" y="91" fill="rgba(255,255,255,.72)" font-family="Inter, ui-sans-serif, system-ui" font-size="15" font-weight="500">Preview asset</text>
+</svg>\`;
+	return \`data:image/svg+xml,\${encodeURIComponent(svg)}\`;
+}
+
+const mediaItems: MediaLibraryItem[] = [
+	{
+		id: 'm01',
+		name: 'balsamic-bottle-front.jpg',
+		type: 'image',
+		src: demoMediaSource('Bottle front', '#a16207', '#f5d0a9'),
+		alt: 'Front view of aged balsamic bottle on white',
+		size: 318_500,
+		width: 1600,
+		height: 2000,
+		collection: 'Products',
+		tags: ['bottle', 'primary'],
+		public: true,
+		uploadedAt: 'May 28, 2026',
+		usageCount: 5,
+	},
+	{
+		id: 'm02',
+		name: 'balsamic-bottle-back.jpg',
+		type: 'image',
+		src: demoMediaSource('Bottle back', '#78350f', '#d6a15f'),
+		alt: 'Back label with ingredients',
+		size: 287_200,
+		width: 1600,
+		height: 2000,
+		collection: 'Products',
+		tags: ['bottle', 'label'],
+		public: true,
+		uploadedAt: 'May 28, 2026',
+		usageCount: 2,
+	},
+	{
+		id: 'm03',
+		name: 'label-detail-macro.jpg',
+		type: 'image',
+		src: demoMediaSource('Label detail', '#7f1d1d', '#fca5a5'),
+		alt: 'Macro shot of embossed label',
+		size: 412_800,
+		width: 2000,
+		height: 1500,
+		collection: 'Products',
+		tags: ['label', 'macro'],
+		public: true,
+		uploadedAt: 'May 26, 2026',
+		usageCount: 3,
+	},
+	{
+		id: 'm04',
+		name: 'olive-grove-hero.jpg',
+		type: 'image',
+		src: demoMediaSource('Olive grove', '#365314', '#bef264'),
+		alt: 'Olive grove at golden hour',
+		size: 1_228_800,
+		width: 2400,
+		height: 1600,
+		collection: 'Lifestyle',
+		tags: ['hero', 'estate'],
+		public: true,
+		uploadedAt: 'May 24, 2026',
+		usageCount: 3,
+	},
+	{
+		id: 'm05',
+		name: 'tasting-set-overhead.jpg',
+		type: 'image',
+		src: demoMediaSource('Tasting set', '#334155', '#cbd5e1'),
+		alt: 'Overhead tasting set on linen',
+		size: 689_400,
+		width: 2000,
+		height: 2000,
+		collection: 'Lifestyle',
+		tags: ['tasting', 'flat-lay'],
+		public: true,
+		uploadedAt: 'May 22, 2026',
+		usageCount: 1,
+	},
+	{
+		id: 'm06',
+		name: 'harvest-table.mp4',
+		type: 'video',
+		src: demoMediaSource('Harvest table', '#166534', '#86efac'),
+		alt: '',
+		size: 15_500_000,
+		width: 1920,
+		height: 1080,
+		duration: '0:42',
+		collection: 'Lifestyle',
+		tags: ['harvest', 'b-roll'],
+		public: false,
+		uploadedAt: 'May 20, 2026',
+		usageCount: 0,
+	},
+	{
+		id: 'm07',
+		name: 'press-room-tour.mp4',
+		type: 'video',
+		src: demoMediaSource('Press room', '#1e3a8a', '#93c5fd'),
+		alt: '',
+		size: 37_960_000,
+		width: 1920,
+		height: 1080,
+		duration: '1:58',
+		collection: 'Lifestyle',
+		tags: ['tour', 'process'],
+		public: true,
+		uploadedAt: 'May 18, 2026',
+		usageCount: 1,
+	},
+	{
+		id: 'm08',
+		name: 'gift-box-closed.jpg',
+		type: 'image',
+		src: demoMediaSource('Gift closed', '#581c87', '#d8b4fe'),
+		alt: 'Closed gift box with ribbon',
+		size: 254_100,
+		width: 1600,
+		height: 1200,
+		collection: 'Products',
+		tags: ['gift', 'packaging'],
+		public: true,
+		uploadedAt: 'May 15, 2026',
+		usageCount: 2,
+	},
+	{
+		id: 'm09',
+		name: 'gift-box-open.jpg',
+		type: 'image',
+		src: demoMediaSource('Gift open', '#831843', '#f9a8d4'),
+		alt: 'Open gift box showing two bottles',
+		size: 301_700,
+		width: 1600,
+		height: 1200,
+		collection: 'Products',
+		tags: ['gift', 'packaging'],
+		public: true,
+		uploadedAt: 'May 15, 2026',
+		usageCount: 2,
+	},
+	{
+		id: 'm10',
+		name: 'vineyard-autumn.jpg',
+		type: 'image',
+		src: demoMediaSource('Vineyard autumn', '#7c2d12', '#fdba74'),
+		alt: 'Wide autumn vineyard banner',
+		size: 2_867_200,
+		width: 2880,
+		height: 1200,
+		collection: 'Banners',
+		tags: ['banner', 'seasonal'],
+		public: true,
+		uploadedAt: 'May 12, 2026',
+		usageCount: 1,
+	},
+	{
+		id: 'm11',
+		name: 'spring-menu-banner.jpg',
+		type: 'image',
+		src: demoMediaSource('Spring menu', '#14532d', '#bbf7d0'),
+		alt: 'Spring menu campaign banner',
+		size: 1_945_600,
+		width: 2880,
+		height: 1200,
+		collection: 'Banners',
+		tags: ['banner', 'campaign'],
+		public: false,
+		uploadedAt: 'May 10, 2026',
+		usageCount: 0,
+	},
+	{
+		id: 'm12',
+		name: 'pour-shot-slowmo.mp4',
+		type: 'video',
+		src: demoMediaSource('Pour shot', '#4c0519', '#fb7185'),
+		alt: '',
+		size: 8_290_000,
+		width: 1080,
+		height: 1350,
+		duration: '0:15',
+		collection: 'Products',
+		tags: ['pour', 'social'],
+		public: true,
+		uploadedAt: 'May 8, 2026',
+		usageCount: 4,
+	},
+	{
+		id: 'm13',
+		name: 'cellar-barrels.jpg',
+		type: 'image',
+		src: demoMediaSource('Cellar barrels', '#3f2a1d', '#a16207'),
+		alt: 'Oak barrels in the aging cellar',
+		size: 874_500,
+		width: 2400,
+		height: 1600,
+		collection: 'Lifestyle',
+		tags: ['cellar', 'aging'],
+		public: true,
+		uploadedAt: 'May 5, 2026',
+		usageCount: 1,
+	},
+	{
+		id: 'm14',
+		name: 'chef-pairing-event.jpg',
+		type: 'image',
+		src: demoMediaSource('Chef pairing', '#111827', '#9ca3af'),
+		alt: 'Chef plating at pairing event',
+		size: 763_900,
+		width: 2000,
+		height: 1334,
+		collection: 'Lifestyle',
+		tags: ['event', 'pairing'],
+		public: false,
+		uploadedAt: 'May 2, 2026',
+		usageCount: 0,
+	},
+	{
+		id: 'm15',
+		name: 'bottle-trio-white.jpg',
+		type: 'image',
+		src: demoMediaSource('Bottle trio', '#f8fafc', '#64748b'),
+		alt: 'Three bottles on white backdrop',
+		size: 356_200,
+		width: 2000,
+		height: 1500,
+		collection: 'Products',
+		tags: ['trio', 'primary'],
+		public: true,
+		uploadedAt: 'Apr 29, 2026',
+		usageCount: 6,
+	},
+	{
+		id: 'm16',
+		name: 'cork-and-wax-seal.jpg',
+		type: 'image',
+		src: demoMediaSource('Wax seal', '#7f1d1d', '#f87171'),
+		alt: 'Wax seal close-up',
+		size: 298_300,
+		width: 1600,
+		height: 1600,
+		collection: 'Products',
+		tags: ['detail', 'seal'],
+		public: true,
+		uploadedAt: 'Apr 25, 2026',
+		usageCount: 1,
+	},
+	{
+		id: 'm17',
+		name: 'estate-map-illustrated.png',
+		type: 'image',
+		src: demoMediaSource('Estate map', '#0f766e', '#99f6e4'),
+		alt: 'Illustrated map of the estate',
+		size: 1_126_400,
+		width: 2400,
+		height: 1800,
+		collection: 'Banners',
+		tags: ['map', 'illustration'],
+		public: true,
+		uploadedAt: 'Apr 20, 2026',
+		usageCount: 1,
+	},
+	{
+		id: 'm18',
+		name: 'winter-campaign.jpg',
+		type: 'image',
+		src: demoMediaSource('Winter campaign', '#1e3a8a', '#bfdbfe'),
+		alt: 'Winter campaign banner',
+		size: 2_150_400,
+		width: 2880,
+		height: 1200,
+		collection: 'Banners',
+		tags: ['banner', 'seasonal'],
+		public: false,
+		uploadedAt: 'Apr 14, 2026',
+		usageCount: 0,
+	},
+];
+
+interface ExternalMediaRecord {
+	assetKey: string;
+	label: string;
+	kind: MediaLibraryItem['type'];
+	previewUrl?: string;
+	altText?: string;
+	bytes?: number;
+	folder: string;
+	references: number;
+}
+
+const externalMediaRecords: ExternalMediaRecord[] = [
+	{
+		assetKey: 'dam:landing-hero',
+		label: 'landing-page-hero.avif',
+		kind: 'image',
+		previewUrl: demoMediaSource('DAM hero', '#0f172a', '#38bdf8'),
+		altText: 'Hero image prepared by the external DAM',
+		bytes: 1_240_000,
+		folder: 'DAM / Marketing',
+		references: 14,
+	},
+	{
+		assetKey: 'dam:press-kit',
+		label: 'brand-press-kit.zip',
+		kind: 'file',
+		bytes: 4_620_000,
+		folder: 'DAM / Documents',
+		references: 6,
+	},
+];
+
+function inferUploadType(file: File): MediaLibraryItem['type'] {
+	if (file.type.startsWith('image/')) return 'image';
+	if (file.type.startsWith('video/')) return 'video';
+	return 'file';
+}
+
+function filePreview(file: File) {
+	if (!file.type.startsWith('image/')) return undefined;
+	if (typeof URL === 'undefined' || typeof URL.createObjectURL !== 'function') {
+		return undefined;
+	}
+	return URL.createObjectURL(file);
+}
+
+function uploadedItems(files: File[], options: MediaLibraryUploadOptions): MediaLibraryItem[] {
+	return files.map((file, index) => ({
+		id: \`uploaded-\${Date.now()}-\${index}\`,
+		name: file.name,
+		type: inferUploadType(file),
+		src: filePreview(file),
+		size: file.size,
+		collection: options.collection ?? 'Products',
+		tags: options.tags,
+		public: options.public,
+		uploadedAt: new Date().toISOString(),
+		usageCount: 0,
+	}));
+}
+
+function filterForFetcher(items: MediaLibraryItem[], params: MediaLibraryFetchParams) {
+	const query = params.query.trim().toLowerCase();
+	return items
+		.filter((item) => {
+			if (params.type !== 'all' && item.type !== params.type) return false;
+			if (params.collection && item.collection !== params.collection) return false;
+			if (!query) return true;
+			return [item.name, item.alt, item.collection, ...(item.tags ?? [])]
+				.filter(Boolean)
+				.join(' ')
+				.toLowerCase()
+				.includes(query);
+		})
+		.sort((a, b) => {
+			if (params.sort === 'name') return a.name.localeCompare(b.name);
+			if (params.sort === 'size') return (b.size ?? 0) - (a.size ?? 0);
+			if (params.sort === 'usage') return (b.usageCount ?? 0) - (a.usageCount ?? 0);
+			return new Date(b.uploadedAt ?? 0).getTime() - new Date(a.uploadedAt ?? 0).getTime();
+		});
+}
+
+function moveByIds(ids: string[], nextItems: MediaLibraryItem[]) {
+	const order = new Map(nextItems.map((item, index) => [item.id, index]));
+	return ids.slice().sort((a, b) => (order.get(a) ?? 0) - (order.get(b) ?? 0));
+}
+
+export function EmbeddedLibrary() {
+	const [selectedIds, setSelectedIds] = useState<string[]>(['m01']);
+
+	return (
+		<MediaLibrary
+			title="Campaign media"
+			description="Search, inspect metadata, edit alt text, and stage uploads from one surface."
+			items={mediaItems}
+			collections={collections}
+			value={selectedIds}
+			onValueChange={setSelectedIds}
+			onUpload={(files, options) => uploadedItems(files, options)}
+			onConfirm={(items) => {
+				setSelectedIds(items.map((item) => item.id));
+			}}
+			onItemUpdate={() => undefined}
+			onItemDelete={() => undefined}
+			defaultUploadOptions={{ collection: 'Products', tags: ['product'] }}
+			slots={{
+				headerEnd: (
+					<Badge variant="info">
+						<CheckCircle2 className="size-3" />
+						Admin ready
+					</Badge>
+				),
+			}}
+		/>
+	);
+}
+
+export function ProductMediaDialog() {
+	const [open, setOpen] = useState(false);
+	const [selectedIds, setSelectedIds] = useState<string[]>([
+		'm01',
+		'm03',
+	]);
+	const [primaryId, setPrimaryId] = useState('m01');
+	const selectedItems = useMemo(
+		() => mediaItems.filter((item) => selectedIds.includes(item.id)),
+		[selectedIds],
+	);
+	const handleRemove = (id: string) => {
+		setSelectedIds((current) => {
+			const next = current.filter((selectedId) => selectedId !== id);
+			if (primaryId === id) setPrimaryId(next[0] ?? '');
+			return next;
+		});
+	};
+
+	return (
+		<>
+			<MediaResourceGallery
+				items={selectedItems}
+				primaryId={primaryId}
+				title="Media"
+				description="Images and videos shown on the product page"
+				onAdd={() => setOpen(true)}
+				onPrimaryChange={setPrimaryId}
+				onRemove={handleRemove}
+				onReorder={(_, nextItems) => setSelectedIds((current) => moveByIds(current, nextItems))}
+				maxItems={5}
+			/>
+			<MediaLibraryDialog
+				open={open}
+				onOpenChange={setOpen}
+				dialogTitle="Add media"
+				dialogDescription="Pick from the library, or upload new files"
+				items={mediaItems}
+				collections={collections}
+				value={selectedIds}
+				onValueChange={setSelectedIds}
+				onConfirm={(_, ids) => {
+					setSelectedIds(ids);
+					setPrimaryId((current) => ids.includes(current) ? current : ids[0] ?? '');
+					setOpen(false);
+				}}
+				onClose={() => setOpen(false)}
+				onUpload={(files, options) => uploadedItems(files, options)}
+				defaultUploadOptions={{ collection: 'Products', public: true }}
+			/>
+		</>
+	);
+}
+
+export function ResourceGalleryList() {
+	const [selectedIds, setSelectedIds] = useState<string[]>([
+		'm04',
+		'm06',
+		'm15',
+	]);
+	const [primaryId, setPrimaryId] = useState('m04');
+	const selectedItems = useMemo(
+		() => mediaItems.filter((item) => selectedIds.includes(item.id)),
+		[selectedIds],
+	);
+
+	return (
+		<MediaResourceGallery
+			items={selectedItems}
+			primaryId={primaryId}
+			title="CMS resource gallery"
+			description="List mode keeps filenames, position, size, cover state, and row actions scannable in dense admin forms."
+			layout="list"
+			onAdd={() => undefined}
+			onPrimaryChange={setPrimaryId}
+			onRemove={(id) => setSelectedIds((current) => current.filter((selectedId) => selectedId !== id))}
+			onReorder={(_, nextItems) => setSelectedIds((current) => moveByIds(current, nextItems))}
+			maxItems={3}
+			strings={{ gallery: { maxReached: '3 of 3 attached' } }}
+		/>
+	);
+}
+
+export function ExternalResourceGallery() {
+	return (
+		<MediaResourceGallery
+			items={externalMediaRecords}
+			title="External DAM attachments"
+			description="Accessors let app-owned media records render without reshaping API responses."
+			layout="grid"
+			primaryId="dam:landing-hero"
+			readOnly
+			accessors={{
+				getId: (item) => item.assetKey,
+				getName: (item) => item.label,
+				getType: (item) => item.kind,
+				getSrc: (item) => item.previewUrl,
+				getAlt: (item) => item.altText,
+				getSize: (item) => item.bytes,
+				getCollection: (item) => item.folder,
+				getUsageCount: (item) => item.references,
+			}}
+		/>
+	);
+}
+
+export function ConfirmOnSelectDialog() {
+	const [picked, setPicked] = useState<MediaLibraryItem | null>(null);
+
+	return (
+		<SmartCard
+			icon={<Star className="size-4" />}
+			title="Single-pick strategy"
+			description="Use confirmOnSelect for avatar, cover, or logo pickers where clicking one asset should commit and close."
+			headerEnd={picked ? <Badge variant="success">{picked.name}</Badge> : <Badge variant="secondary">No asset</Badge>}
+		>
+			<MediaLibraryDialog
+				trigger={<Button type="button" icon={ImagePlus}>Pick cover</Button>}
+				items={mediaItems}
+				collections={collections}
+				selectionMode="single"
+				confirmOnSelect
+				allowUpload={false}
+				dialogTitle="Pick cover media"
+				dialogDescription="The dialog closes immediately after the selected item is confirmed."
+				onConfirm={(items) => setPicked(items[0] ?? null)}
+			/>
+		</SmartCard>
+	);
+}
+
+export function AsyncFetcherLibrary() {
+	const fetcher = useCallback(async (params: MediaLibraryFetchParams) => {
+		await new Promise((resolve) => window.setTimeout(resolve, 240));
+		const items = filterForFetcher(mediaItems, params);
+		return { items, total: items.length };
+	}, []);
+
+	return (
+		<MediaLibrary
+			title="Remote media source"
+			description="The fetcher receives query, type, collection, sort, and abort signal; the consumer owns the API call."
+			fetcher={fetcher}
+			collections={collections}
+			selectionMode="single"
+			allowUpload={false}
+			defaultView="table"
+			slots={{
+				headerStart: (
+					<span className="inline-flex size-9 items-center justify-center rounded-lg bg-info/10 text-info">
+						<Search className="size-4" />
+					</span>
+				),
+			}}
+		/>
+	);
+}
+
+export function EmptyAndErrorStates() {
+	const failingFetcher = useCallback(async () => {
+		await new Promise((resolve) => window.setTimeout(resolve, 120));
+		throw new Error('Preview fetch failed');
+	}, []);
+
+	return (
+		<div className="grid gap-4 lg:grid-cols-2">
+			<MediaLibrary
+				title="Empty asset library"
+				description="Empty state gives users a route into upload when no assets exist yet."
+				items={[]}
+				collections={collections}
+				heightClassName="h-130"
+			/>
+			<MediaLibrary
+				title="Remote error"
+				description="Fetcher errors render a tokenized alert while the consumer handles retry strategy."
+				fetcher={failingFetcher}
+				collections={collections}
+				allowUpload={false}
+				heightClassName="h-130"
+			/>
+		</div>
+	);
+}
+
+export function HeadlessSelection() {
+	const state = useMediaLibrary({
+		items: mediaItems,
+		selectionMode: 'single',
+		defaultValue: ['m04'],
+		defaultType: 'image',
+	});
+
+	return (
+		<SmartCard
+			icon={<Images className="size-4" />}
+			title="Headless selection"
+			description="useMediaLibrary exposes the same filtering, selection, and accessors for custom layouts."
+			headerEnd={<Badge variant="secondary">{state.visibleItems.length} images</Badge>}
+		>
+			<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+				{state.visibleItems.slice(0, 4).map((item) => {
+					const id = state.accessors.getId(item);
+					return (
+						<MediaLibraryCard
+							key={id}
+							item={item}
+							selected={state.selectedSet.has(id)}
+							selectionMode="single"
+							accessors={state.accessors}
+							strings={defaultMediaLibraryStrings}
+							onToggle={() => state.toggleSelection(id)}
+							onDetails={() => state.setDetailId(id)}
+						/>
+					);
+				})}
+			</div>
+			<div className="mt-3 flex items-center justify-between rounded-lg border border-border bg-muted/20 px-3 py-2">
+				<Text size="xs" type="secondary">
+					Selected: {state.selectedItems[0] ? state.accessors.getName(state.selectedItems[0]) : 'None'}
+				</Text>
+				<Button
+					type="button"
+					variant="secondary"
+					buttonStyle="ghost"
+					icon={UploadCloud}
+					onClick={state.clearSelection}
+				>
+					Clear
+				</Button>
+			</div>
+		</SmartCard>
+	);
+}
+`;function Qe(e){let t={code:`code`,h4:`h4`,p:`p`,...e.components};return Fe||$(`Examples`,!1),Ye||$(`Examples.AsyncFetcherLibrary`,!0),Je||$(`Examples.ConfirmOnSelectDialog`,!0),We||$(`Examples.EmbeddedLibrary`,!0),Xe||$(`Examples.EmptyAndErrorStates`,!0),qe||$(`Examples.ExternalResourceGallery`,!0),Ze||$(`Examples.HeadlessSelection`,!0),Ge||$(`Examples.ProductMediaDialog`,!0),Ke||$(`Examples.ResourceGalleryList`,!0),(0,G.jsxs)(r,{title:`Features · Media Library`,description:`Framework-agnostic media picker for admin product, CMS, and campaign flows. Provides an embeddable library surface, a Dialog-backed picker wrapper, upload staging, details editing, controlled selection, async fetching, slots, render hooks, and headless state through useMediaLibrary.`,layer:`features`,status:`ready`,children:[(0,G.jsx)(o,{title:`Embedded library`,id:`embedded`,children:(0,G.jsx)(d,{name:`EmbeddedLibrary`,source:Q,children:(0,G.jsx)(We,{})})}),(0,G.jsxs)(o,{title:`Dialog picker`,id:`dialog`,children:[(0,G.jsx)(d,{name:`ProductMediaDialog`,source:Q,children:(0,G.jsx)(Ge,{})}),(0,G.jsx)(d,{name:`ConfirmOnSelectDialog`,source:Q,children:(0,G.jsx)(Je,{})})]}),(0,G.jsxs)(o,{title:`Resource galleries`,id:`resource-galleries`,children:[(0,G.jsx)(d,{name:`ResourceGalleryList`,source:Q,children:(0,G.jsx)(Ke,{})}),(0,G.jsx)(d,{name:`ExternalResourceGallery`,source:Q,children:(0,G.jsx)(qe,{})})]}),(0,G.jsxs)(o,{title:`Async and states`,id:`async-states`,children:[(0,G.jsx)(d,{name:`AsyncFetcherLibrary`,source:Q,children:(0,G.jsx)(Ye,{})}),(0,G.jsx)(d,{name:`EmptyAndErrorStates`,source:Q,children:(0,G.jsx)(Xe,{})})]}),(0,G.jsx)(o,{title:`Headless selection`,id:`headless-selection`,children:(0,G.jsx)(d,{name:`HeadlessSelection`,source:Q,children:(0,G.jsx)(Ze,{})})}),(0,G.jsxs)(o,{title:`Usage Notes`,id:`usage-notes`,children:[(0,G.jsxs)(t.p,{children:[`Use `,(0,G.jsx)(t.code,{children:`MediaLibrary`}),` when the picker is part of a page, drawer, or feature shell. Use `,(0,G.jsx)(t.code,{children:`MediaLibraryDialog`}),` only when you need modal behavior; it delegates to `,(0,G.jsx)(t.code,{children:`features/overlays/Dialog`}),` for portal, backdrop, escape handling, trigger support, and overlay chrome.`]}),(0,G.jsxs)(t.p,{children:[`Use `,(0,G.jsx)(t.code,{children:`MediaResourceGallery`}),` for the resource field that sits beside the picker: selected media order, primary/cover asset, remove controls, and add-more entry points. Its default `,(0,G.jsx)(t.code,{children:`layout="field"`}),` is the product-form shape with a cover tile and inline add tile; use `,(0,G.jsx)(t.code,{children:`layout="list"`}),` for dense CMS/resource rows and `,(0,G.jsx)(t.code,{children:`layout="grid"`}),` when filenames and metadata should remain visible.`]}),(0,G.jsx)(t.p,{children:`Gallery spacing, badge scale, thumbnail/avatar sizing, row density, and action
+controls inherit from shared spacing, media, row, surface, and control
+variables. Consumers should adjust those variables or density wrappers when
+they need a tighter product form or roomier asset gallery, rather than adding
+repeated size classes around each gallery item.`}),(0,G.jsxs)(t.p,{children:[`Consumers own persistence and routing. Pass `,(0,G.jsx)(t.code,{children:`items`}),` for local collections or `,(0,G.jsx)(t.code,{children:`fetcher`}),` for remote search. Pass `,(0,G.jsx)(t.code,{children:`value`}),` and `,(0,G.jsx)(t.code,{children:`onValueChange`}),` for controlled form fields, `,(0,G.jsx)(t.code,{children:`onConfirm`}),` to commit the selected items, `,(0,G.jsx)(t.code,{children:`onUpload`}),` to stage uploads into your storage flow, and `,(0,G.jsx)(t.code,{children:`onItemUpdate`}),` / `,(0,G.jsx)(t.code,{children:`onItemDelete`}),` for metadata actions.`]}),(0,G.jsxs)(t.p,{children:[`The picker toolbar uses segmented type filters. By default it shows `,(0,G.jsx)(t.code,{children:`all`}),`, `,(0,G.jsx)(t.code,{children:`image`}),`, and `,(0,G.jsx)(t.code,{children:`video`}),`; pass `,(0,G.jsx)(t.code,{children:`typeFilters={['all', 'image', 'video', 'file']}`}),` when documents or generic files should be filterable.`]}),(0,G.jsxs)(t.p,{children:[`The feature is generic. Use `,(0,G.jsx)(t.code,{children:`accessors`}),` to adapt app-owned media records without reshaping data before render.`]})]}),(0,G.jsxs)(o,{title:`API`,id:`api`,children:[(0,G.jsx)(t.h4,{children:`MediaLibrary`}),(0,G.jsx)(ne,{component:`MediaLibrary`}),(0,G.jsx)(t.h4,{children:`MediaLibraryDialog`}),(0,G.jsx)(ne,{component:`MediaLibraryDialog`}),(0,G.jsx)(t.h4,{children:`MediaLibraryCard`}),(0,G.jsx)(ne,{component:`MediaLibraryCard`}),(0,G.jsx)(t.h4,{children:`MediaResourceGallery`}),(0,G.jsx)(ne,{component:`MediaResourceGallery`})]})]})}function $e(e={}){let{wrapper:t}=e.components||{};return t?(0,G.jsx)(t,{...e,children:(0,G.jsx)(Qe,{...e})}):Qe(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{$e as default};