themelia-ui 1.0.0

package/dist/features/media-library.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../typography-kBzTy-jM.cjs"),t=require("../feedback-lBKIc2cQ.cjs"),n=require("../buttons-CQc0AVpb.cjs"),r=require("../display-BPuD0OAo.cjs"),i=require("../structure-C4IX5OuO.cjs"),a=require("../primitives-Bcjsjg7A.cjs"),o=require("../badge-CSoXP1oV.cjs"),s=require("../upload-CO0k8Nbo.cjs"),c=require("../forms-v1IKhZJj.cjs"),l=require("../strings-BiKL6k6b.cjs"),u=require("../text-inputs-Dp4Fczk4.cjs"),d=require("../navigation-Zce9nqTO.cjs"),f=require("../choice-inputs-DNcJJXTp.cjs"),p=require("../value-inputs-DA-f9CJK.cjs"),m=require("../batch-action-bar-CjPA1H9i.cjs"),h=require("../spinner-Bc_A0cRc.cjs"),g=require("../overlays-SoQf4DDt.cjs"),_=require("../use-synced-state-CoPfjLRG.cjs");let v=require("lucide-react"),y=require("react"),b=require("react/jsx-runtime"),x=require("clsx");var S={collection:void 0,tags:[],public:!0},C=[];function w(e,t,n){let[r,i]=(0,y.useState)(t),a=e??r;return[a,(0,y.useCallback)(t=>{let r=typeof t==`function`?t(a):t;e===void 0&&i(r),n?.(r)},[e,n,a])]}var T={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 E(e){return{...T,...e??{}}}function D(e){return e===void 0?``:a.C(e)}function O(e,t){let n=t.getWidth(e),r=t.getHeight(e);return!n||!r?``:`${n} × ${r}`}function k(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 A(e){return e.type.startsWith(`image/`)?`image`:e.type.startsWith(`video/`)?`video`:`file`}function j(e){if(e.type.startsWith(`image/`)&&!(typeof URL>`u`||typeof URL.createObjectURL!=`function`))return URL.createObjectURL(e)}function M(e){!e||typeof URL>`u`||typeof URL.revokeObjectURL!=`function`||URL.revokeObjectURL(e)}function ee(e){return Array.isArray(e)?{items:e,total:e.length}:e}function te(e,t){return t&&typeof e==`object`&&e?{...e,...t}:e}function ne(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))}function re(e,t,n){let r=[...e];switch(n){case`name`:return r.sort((e,n)=>t.getName(e).localeCompare(t.getName(n)));case`size`:return r.sort((e,n)=>(t.getSize(n)??0)-(t.getSize(e)??0));case`usage`:return r.sort((e,n)=>(t.getUsageCount(n)??0)-(t.getUsageCount(e)??0));default:return r.sort((e,n)=>k(n,t)-k(e,t))}}function ie({items:e=C,fetcher:t,accessors:n,selectionMode:r=`multiple`,value:i,defaultValue:a,onValueChange:o,onItemUpdate:s,onItemDelete:c,onUpload:l,onError:u,tab:d,defaultTab:f=`library`,onTabChange:p,view:m,defaultView:h=`grid`,onViewChange:g,query:_,defaultQuery:v=``,onQueryChange:b,type:x,defaultType:T=`all`,onTypeChange:D,collection:O,defaultCollection:k=`all`,onCollectionChange:ie,sort:N,defaultSort:ae=`newest`,onSortChange:oe,uploadOptions:P,defaultUploadOptions:F,onUploadOptionsChange:se}){let I=(0,y.useMemo)(()=>E(n),[n]),[ce,le]=w(d,f,p),[ue,de]=w(m,h,g),[L,R]=w(_,v,b),[z,B]=w(x,T,D),[V,H]=w(O,k,ie),[U,fe]=w(N,ae,oe),[W,pe]=(0,y.useState)(null),[me,he]=(0,y.useState)(()=>[...a??[]]),[ge,_e]=(0,y.useState)([]),[ve,ye]=(0,y.useState)(),[be,xe]=(0,y.useState)(!1),[Se,G]=(0,y.useState)(null),[K,Ce]=(0,y.useState)([]),[q,we]=(0,y.useState)(()=>new Set),[Te,Ee]=(0,y.useState)({}),[De,J]=(0,y.useState)([]),[Oe,ke]=(0,y.useState)(!1),Ae=(0,y.useMemo)(()=>({...S,...F,tags:F?.tags??S.tags}),[F]),[je,Me]=w((0,y.useMemo)(()=>P?{...S,...P,tags:P.tags??S.tags}:void 0,[P]),Ae,se),Ne=i!==void 0,Y=(0,y.useMemo)(()=>Ne?[...i??[]]:me,[me,Ne,i]),X=(0,y.useMemo)(()=>new Set(Y),[Y]),Pe=(0,y.useRef)(new Set),Z=(0,y.useRef)(null),Fe=(0,y.useRef)(new Map);(0,y.useEffect)(()=>{if(!t)return;let e=new AbortController;return xe(!0),G(null),t({query:L,type:z,collection:V===`all`?void 0:V,sort:U,signal:e.signal}).then(t=>{if(e.signal.aborted)return;let n=ee(t);_e(n.items),ye(n.total)}).catch(t=>{e.signal.aborted||(G(t),u?.(t))}).finally(()=>{e.signal.aborted||xe(!1)}),()=>e.abort()},[V,t,u,L,U,z]),(0,y.useEffect)(()=>{let e=Pe.current;return()=>{Z.current?.abort();for(let t of e)M(t);e.clear()}},[]);let Ie=(0,y.useMemo)(()=>t?ge:[...K,...e],[K,ge,t,e]),Q=(0,y.useMemo)(()=>Ie.filter(e=>!q.has(I.getId(e))).map(e=>te(e,Te[I.getId(e)])),[I,Te,q,Ie]),Le=(0,y.useMemo)(()=>t?Q:re(ne(Q,I,L,z,V),I,U),[I,V,t,Q,L,U,z]),Re=(0,y.useMemo)(()=>Q.filter(e=>X.has(I.getId(e))),[I,Q,X]),$=(0,y.useCallback)(e=>{Ne||he(e);let t=new Set(e);o?.(e,Q.filter(e=>t.has(I.getId(e))))},[I,Ne,Q,o]),ze=(0,y.useCallback)(e=>{if(r===`single`){$([e]);return}let t=new Set(X);t.has(e)?t.delete(e):t.add(e),$([...t])},[$,X,r]),Be=(0,y.useCallback)(()=>$([]),[$]),Ve=(0,y.useCallback)(()=>{R(``),B(`all`),H(`all`)},[H,R,B]),He=(0,y.useCallback)(e=>{J(t=>[...t,...e.map((e,t)=>{let n=j(e);return n&&Pe.current.add(n),{id:`staged-${Date.now()}-${t}`,file:e,name:e.name,size:e.size,type:A(e),src:n,progress:0,status:`staged`}})])},[]),Ue=(0,y.useCallback)(e=>{J(t=>{let n=t.find(t=>t.id===e);return n?.src&&(M(n.src),Pe.current.delete(n.src)),t.filter(t=>t.id!==e)})},[]),We=(0,y.useCallback)(()=>{J(e=>{for(let t of e)t.src&&(M(t.src),Pe.current.delete(t.src));return[]})},[]),Ge=(0,y.useCallback)(e=>{Me(t=>({...t,...e}))},[Me]),Ke=(0,y.useCallback)((e,t)=>{J(n=>n.map(n=>n.id===e?{...n,...t}:n))},[]),qe=(0,y.useCallback)(async()=>{if(Oe||De.length===0)return;let e=new AbortController;Z.current?.abort(),Z.current=e,G(null),ke(!0),J(e=>e.map(e=>({...e,status:`uploading`,progress:0})));let t={signal:e.signal,setProgress:(t,n)=>{e.signal.aborted||Ke(t,{progress:Math.max(0,Math.min(100,n))})},setFileStatus:(t,n,r)=>{e.signal.aborted||Ke(t,{status:n,error:r})}};try{let n=await l?.(De.map(e=>e.file),je,t);if(e.signal.aborted)return;if(J(e=>e.map(e=>({...e,status:`done`,progress:100}))),n?.length){Ce(e=>[...n,...e]);let e=n.map(e=>I.getId(e));$(r===`single`?e.slice(0,1):[...new Set([...e,...Y])])}We(),le(`library`)}catch(t){if(e.signal.aborted)return;G(t),J(e=>e.map(e=>e.status===`uploading`?{...e,status:`error`}:e)),u?.(t)}finally{Z.current===e&&(Z.current=null,ke(!1))}},[I,$,We,u,l,Ke,Y,r,le,De,je,Oe]),Je=(0,y.useCallback)(()=>{Z.current?.abort(),Z.current=null,ke(!1),J(e=>e.map(e=>e.status===`uploading`?{...e,status:`staged`,progress:0,error:void 0}:e))},[]),Ye=(0,y.useCallback)(async(e,t)=>{let n=I.getId(e),r=`update:${n}`,i=(Fe.current.get(r)??0)+1;Fe.current.set(r,i);let a=Te[n];G(null),Ee(e=>({...e,[n]:{...e[n],...t}}));try{return await s?.(e,t),!0}catch(e){return Fe.current.get(r)===i&&Ee(e=>{let t={...e};return a?t[n]=a:delete t[n],t}),G(e),u?.(e),!1}},[I,Te,u,s]),Xe=(0,y.useCallback)(async e=>{let t=I.getId(e),n=`delete:${t}`,r=(Fe.current.get(n)??0)+1;Fe.current.set(n,r);let i=q.has(t);G(null),we(e=>new Set(e).add(t));try{return await c?.(e),X.has(t)&&$(Y.filter(e=>e!==t)),!0}catch(e){return!i&&Fe.current.get(n)===r&&we(e=>{let n=new Set(e);return n.delete(t),n}),G(e),u?.(e),!1}},[I,$,u,c,q,Y,X]);return{tab:ce,setTab:le,view:ue,setView:de,query:L,setQuery:R,type:z,setType:B,collection:V,setCollection:H,sort:U,setSort:fe,detailId:W,setDetailId:pe,items:Q,visibleItems:Le,selectedIds:Y,selectedItems:Re,selectedSet:X,toggleSelection:ze,clearSelection:Be,clearFilters:Ve,loading:be,error:Se,hasFilters:!!L.trim()||z!==`all`||V!==`all`,totalCount:ve??Q.length,filteredCount:Le.length,stagedFiles:De,addFiles:He,removeStagedFile:Ue,clearStagedFiles:We,uploadOptions:je,updateUploadOptions:Ge,uploading:Oe,startUpload:qe,cancelUpload:Je,updateItem:Ye,removeItem:Xe,accessors:I}}var N={light:`media-library-module__light___1k5sk`,dark:`media-library-module__dark___vKbfb`,root:`media-library-module__root___sjsf-`,header:`media-library-module__header___t4NAN`,headerText:`media-library-module__headerText___CYVAo`,toolbar:`media-library-module__toolbar___7G9c3`,toolbarSearch:`media-library-module__toolbarSearch___4QrOx`,toolbarField:`media-library-module__toolbarField___mmRpG`,toolbarQuery:`media-library-module__toolbarQuery___9F2TZ`,queryTerm:`media-library-module__queryTerm___75-RH`,toolbarSelect:`media-library-module__toolbarSelect___FgcKt`,toolbarEnd:`media-library-module__toolbarEnd___BZbzf`,segmented:`media-library-module__segmented___x7tHR`,segment:`media-library-module__segment___eq11T`,browse:`media-library-module__browse___5XJJn`,workspace:`media-library-module__workspace___zABmI`,results:`media-library-module__results___QNwLd`,state:`media-library-module__state___nL-be`,grid:`media-library-module__grid___w-xfh`,card:`media-library-module__card___uW87f`,cardTile:`media-library-module__cardTile___adjQ-`,cardTileWrap:`media-library-module__cardTileWrap___08F-T`,cardCheck:`media-library-module__cardCheck___iaUsU`,cardBody:`media-library-module__cardBody___boYU5`,cardDetails:`media-library-module__cardDetails___QdGSq`,cardBadge:`media-library-module__cardBadge___o8QEV`,preview:`media-library-module__preview___RNCBz`,previewFallback:`media-library-module__previewFallback___jfzYS`,list:`media-library-module__list___8v-xA`,row:`media-library-module__row___FVxtf`,rowMain:`media-library-module__rowMain___QzWbA`,rowPreview:`media-library-module__rowPreview___YuuzF`,rowBody:`media-library-module__rowBody___4JCuS`,rowSize:`media-library-module__rowSize___0ZR2e`,detail:`media-library-module__detail___hNRtt`,detailHeader:`media-library-module__detailHeader___P2GwW`,detailBody:`media-library-module__detailBody___KLVfF`,detailPreview:`media-library-module__detailPreview___jBCfq`,detailFacts:`media-library-module__detailFacts___uEJMC`,detailFooter:`media-library-module__detailFooter___68DEX`,upload:`media-library-module__upload___iRNoq`,uploadOptions:`media-library-module__uploadOptions___tWsgk`,uploadOptionsGrid:`media-library-module__uploadOptionsGrid___ajBDu`,stagedList:`media-library-module__stagedList___xNnZ3`,staged:`media-library-module__staged___Pmwya`,stagedIcon:`media-library-module__stagedIcon___rN3-r`,stagedBody:`media-library-module__stagedBody___drl8n`,uploadActions:`media-library-module__uploadActions___-QfBQ`,footer:`media-library-module__footer___fdBEK`,footerSummary:`media-library-module__footerSummary___OYe3C`,footerActions:`media-library-module__footerActions___yOUMZ`,gallery:`media-library-module__gallery___WRPLN`,galleryHeader:`media-library-module__galleryHeader___04u-a`,galleryActions:`media-library-module__galleryActions___PF---`,galleryList:`media-library-module__galleryList___OIrln`,galleryItem:`media-library-module__galleryItem___6AD9R`,galleryPreview:`media-library-module__galleryPreview___hy9Sh`,galleryBadge:`media-library-module__galleryBadge___a6CYg`,galleryControls:`media-library-module__galleryControls___zPxiQ`,emptyState:`media-library-module__emptyState___lHHlS`},ae={image:(0,b.jsx)(v.ImageIcon,{}),video:(0,b.jsx)(v.FilmIcon,{}),file:(0,b.jsx)(v.FileIcon,{})};function oe(e,t){return t.types[e]}function P({item:e,accessors:t,className:n}){let r=t.getSrc(e),i=t.getType(e),a=t.getTint(e),[o,s]=(0,y.useState)(!1),[c,l]=_.t(r);return r!==c&&(l(r),s(!1)),r&&i===`image`&&!o?(0,b.jsx)(`img`,{src:r,alt:t.getAlt(e)??``,loading:`lazy`,className:(0,x.clsx)(N.preview,n),onError:()=>s(!0)}):(0,b.jsx)(`span`,{className:(0,x.clsx)(`media-preview--component`,N.preview,N.previewFallback,n),style:a?{backgroundColor:a}:void 0,children:ae[i]})}function F({label:e,options:t,value:r,onValueChange:i,role:a=`group`,className:o}){return(0,b.jsx)(`div`,{role:a,"aria-label":e,className:(0,x.clsx)(N.segmented,o),children:t.map(e=>{let t=e.value===r;return(0,b.jsxs)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,iconOnly:e.iconOnly,role:a===`tablist`?`tab`:void 0,"aria-selected":a===`tablist`?t:void 0,"aria-pressed":a===`group`?t:void 0,"aria-label":e.iconOnly?String(e.label):void 0,"data-active":t||void 0,className:N.segment,onClick:()=>i(e.value),children:[e.icon,!e.iconOnly&&e.label]},e.value)})})}function se({title:e,description:n,icon:r,action:i,className:a}){return(0,b.jsx)(t.p,{title:e,description:n??!1,media:r??(0,b.jsx)(v.ImageIcon,{}),mediaVariant:`icon-soft`,padding:`md`,border:!0,action:i,className:(0,x.clsx)(`media-library-empty-state--component`,N.emptyState,a)})}function I({query:e,onQueryChange:t,type:r,onTypeChange:i,typeFilters:a,collection:s,onCollectionChange:c,collections:l,sort:d,onSortChange:p,view:m,onViewChange:h,hasFilters:g,onClearFilters:_,strings:y,end:S,className:C}){let w=e.trim();return(0,b.jsxs)(`div`,{className:(0,x.clsx)(`media-library-toolbar--component`,N.toolbar,C),children:[(0,b.jsxs)(`div`,{className:N.toolbarSearch,children:[(0,b.jsx)(u.l,{value:e,onChange:e=>t(e.target.value),placeholder:y.searchPlaceholder,"aria-label":y.searchPlaceholder,startIcon:v.SearchIcon,clearable:!0,onClear:()=>t(``),strings:{clear:y.clearSearch},"data-active":w?!0:void 0,className:N.toolbarField}),!!w&&(0,b.jsx)(`div`,{className:N.toolbarQuery,children:(0,b.jsxs)(o.t,{tone:`info`,children:[(0,b.jsx)(v.SearchIcon,{"aria-hidden":!0}),y.activeSearchLabel,(0,b.jsx)(`span`,{className:N.queryTerm,children:w})]})})]}),a.length>1&&(0,b.jsx)(F,{role:`tablist`,label:y.typeLabel,value:r,onValueChange:e=>i(e),options:a.map(e=>({value:e,label:e===`all`?y.types.all:oe(e,y),icon:e===`all`?void 0:ae[e]}))}),l.length>0&&(0,b.jsx)(f.s,{"aria-label":y.collectionLabel,value:s,options:[{value:`all`,label:y.collectionAll},...l.map(e=>({value:e.value,label:typeof e.label==`string`?e.label:e.value}))],onValueChange:e=>e&&c(e),className:N.toolbarSelect}),(0,b.jsx)(f.s,{"aria-label":y.sortLabel,value:d,options:[{value:`newest`,label:y.sorts.newest},{value:`name`,label:y.sorts.name},{value:`size`,label:y.sorts.size},{value:`usage`,label:y.sorts.usage}],onValueChange:e=>e&&p(e),className:N.toolbarSelect}),g&&(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,onClick:_,children:y.clearFilters}),(0,b.jsxs)(`div`,{className:N.toolbarEnd,children:[S,(0,b.jsx)(F,{label:y.viewLabel,value:m,onValueChange:e=>h(e),options:[{value:`grid`,label:y.views.grid,icon:(0,b.jsx)(v.LayoutGridIcon,{}),iconOnly:!0},{value:`table`,label:y.views.table,icon:(0,b.jsx)(v.ListIcon,{}),iconOnly:!0}]})]})]})}function ce({item:t,selected:r=!1,density:i=`comfortable`,showMeta:a=!0,selectionMode:s=`multiple`,accessors:c,strings:l,onToggle:u,onDetails:d,className:p}){let m=c.getName(t),h=c.getSize(t),g=O(t,c);return(0,b.jsxs)(`div`,{"data-selected":r||void 0,"data-density":i,className:(0,x.clsx)(`media-library-card--component`,N.card,p),children:[(0,b.jsxs)(`span`,{className:N.cardTileWrap,children:[(0,b.jsx)(`button`,{type:`button`,className:N.cardTile,"aria-pressed":r,"aria-label":`${r?l.deselect:l.select}: ${m}`,onClick:u,children:(0,b.jsx)(P,{item:t,accessors:c})}),(0,b.jsx)(`span`,{"aria-hidden":!0,className:N.cardCheck,children:(0,b.jsx)(f.x,{checked:r,readOnly:!0,tabIndex:-1,"aria-hidden":!0})})]}),(0,b.jsxs)(`div`,{className:N.cardBody,children:[(0,b.jsx)(e.o,{tag:`span`,size:`sm`,weight:`medium`,truncate:!0,title:m,children:m}),a&&(0,b.jsx)(e.o,{tag:`span`,size:`xs`,type:`secondary`,truncate:!0,children:[g,h===void 0?``:D(h)].filter(Boolean).join(` · `)})]}),!!d&&(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,onClick:d,className:N.cardDetails,children:l.details}),s===`single`&&r&&(0,b.jsx)(o.t,{tone:`primary`,className:N.cardBadge,children:l.select})]})}function le({items:t,selectedSet:r,accessors:i,strings:o,onToggle:s,onDetails:c}){return(0,b.jsx)(`ul`,{className:(0,x.clsx)(`media-library-list--component`,N.list),children:t.map(t=>{let l=i.getId(t),u=i.getName(t),d=r.has(l);return(0,b.jsx)(`li`,{children:(0,b.jsxs)(`div`,{"data-selected":d||void 0,className:N.row,children:[(0,b.jsxs)(`button`,{type:`button`,className:N.rowMain,"aria-pressed":d,"aria-label":`${d?o.deselect:o.select}: ${u}`,onClick:()=>s(l),children:[(0,b.jsx)(P,{item:t,accessors:i,className:N.rowPreview}),(0,b.jsxs)(`span`,{className:N.rowBody,children:[(0,b.jsx)(e.o,{tag:`span`,size:`sm`,weight:`medium`,truncate:!0,children:u}),(0,b.jsx)(e.o,{tag:`span`,size:`xs`,type:`secondary`,children:[oe(i.getType(t),o),O(t,i),i.getCollection(t)].filter(Boolean).join(` · `)})]})]}),(0,b.jsx)(`span`,{className:N.rowSize,children:(0,b.jsx)(a.S,{value:i.getSize(t),size:`xs`,type:`secondary`})}),(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,onClick:()=>c(l),children:o.details})]})},l)})})}function ue({item:t,collections:i=[],accessors:o,strings:s,onClose:l,onUpdate:d,onRemove:m,renderDetail:h}){let[g,_]=(0,y.useState)(``),[S,C]=(0,y.useState)(``),[w,T]=(0,y.useState)([]),[E,D]=(0,y.useState)(!1),[k,A]=(0,y.useState)(!1),[j,M]=(0,y.useState)(!1),[ee,te]=(0,y.useState)(t);if(t&&t!==ee&&(te(t),_(o.getAlt(t)??``),C(o.getCollection(t)??``),T(o.getTags(t)),D(o.getPublic(t)??!1)),!t)return null;if(h)return(0,b.jsx)(`div`,{className:N.detail,children:h(t,{accessors:o,update:d,remove:m,close:l})});let ne=o.getName(t);return(0,b.jsxs)(`aside`,{"aria-label":ne,className:(0,x.clsx)(`media-library-detail--component`,N.detail),children:[(0,b.jsxs)(`div`,{className:N.detailHeader,children:[(0,b.jsx)(e.o,{weight:`semibold`,truncate:!0,children:ne}),(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,iconOnly:!0,"aria-label":s.close,onClick:l,children:(0,b.jsx)(v.XIcon,{})})]}),(0,b.jsxs)(`div`,{className:N.detailBody,children:[(0,b.jsx)(P,{item:t,accessors:o,className:N.detailPreview}),(0,b.jsx)(r.n,{layout:`rows`,columns:1,density:`compact`,className:N.detailFacts,items:[{id:`type`,label:s.detail.type,value:oe(o.getType(t),s)},{id:`size`,label:s.detail.size,render:()=>(0,b.jsx)(a.S,{value:o.getSize(t),size:`sm`})},{id:`dimensions`,label:s.detail.dimensions,value:O(t,o)||void 0},{id:`uploaded`,label:s.detail.uploaded,render:()=>(0,b.jsx)(a.f,{value:o.getUploadedAt(t),size:`sm`})}]}),(0,b.jsx)(c.u,{label:s.detail.altLabel,children:(0,b.jsx)(u.c,{value:g,rows:2,placeholder:s.detail.altPlaceholder,onChange:e=>_(e.target.value)})}),i.length>0&&(0,b.jsx)(c.u,{label:s.detail.collectionLabel,children:(0,b.jsx)(f.s,{value:S,options:i.map(e=>({value:e.value,label:typeof e.label==`string`?e.label:e.value})),onValueChange:e=>C(e??``)})}),(0,b.jsx)(c.u,{label:s.detail.tagsLabel,children:(0,b.jsx)(p.s,{value:w,onValueChange:T,placeholder:s.detail.tagsPlaceholder})}),(0,b.jsx)(f.t,{label:s.detail.publicLabel,description:s.detail.publicDescription,value:E,onValueChange:D})]}),(0,b.jsxs)(`div`,{className:N.detailFooter,children:[(0,b.jsxs)(n.c,{type:`button`,tone:`destructive`,buttonStyle:`ghost`,loading:j,disabled:k,onClick:async()=>{M(!0);let e=await m();M(!1),e&&l()},children:[(0,b.jsx)(v.Trash2Icon,{}),j?s.detail.deleting:s.detail.delete]}),(0,b.jsx)(n.c,{type:`button`,loading:k,disabled:j,onClick:async()=>{A(!0),await d({alt:g,collection:S||void 0,tags:w,public:E}),A(!1)},children:k?s.detail.saving:s.detail.save})]})]})}function de({stagedFiles:r,uploading:o,uploadOptions:l,collections:u=[],strings:d,onAddFiles:m,onRemoveFile:h,onClear:g,onOptionsChange:_,onStart:y,onCancel:S,empty:C}){return(0,b.jsxs)(`div`,{className:(0,x.clsx)(`media-library-upload--component`,N.upload),children:[(0,b.jsx)(s.t,{multiple:!0,onDrop:m,strings:{instructionMultiple:d.upload.dropTitle,helper:d.upload.dropDescription}}),(0,b.jsxs)(`section`,{className:N.uploadOptions,children:[(0,b.jsx)(e.o,{size:`sm`,weight:`semibold`,children:d.upload.optionsTitle}),(0,b.jsxs)(`div`,{className:N.uploadOptionsGrid,children:[u.length>0&&(0,b.jsx)(c.u,{label:d.detail.collectionLabel,children:(0,b.jsx)(f.s,{value:l.collection??``,options:u.map(e=>({value:e.value,label:typeof e.label==`string`?e.label:e.value})),onValueChange:e=>_({collection:e||void 0})})}),(0,b.jsx)(c.u,{label:d.detail.tagsLabel,children:(0,b.jsx)(p.s,{value:l.tags,onValueChange:e=>_({tags:e}),placeholder:d.detail.tagsPlaceholder})}),(0,b.jsx)(f.t,{label:d.detail.publicLabel,description:d.detail.publicDescription,value:l.public,onValueChange:e=>_({public:e})})]})]}),r.length===0?C??(0,b.jsx)(t.p,{title:d.upload.emptyTitle,description:d.upload.emptyDescription,padding:`md`}):(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(`ul`,{className:N.stagedList,children:r.map(r=>(0,b.jsxs)(`li`,{className:N.staged,children:[(0,b.jsx)(`span`,{className:N.stagedIcon,children:ae[r.type]}),(0,b.jsxs)(`span`,{className:N.stagedBody,children:[(0,b.jsx)(e.o,{tag:`span`,size:`sm`,weight:`medium`,truncate:!0,children:r.name}),r.status===`error`?(0,b.jsx)(e.o,{tag:`span`,size:`xs`,type:`error`,children:r.error??d.upload.failed}):r.status===`uploading`?(0,b.jsx)(t.s,{value:r.progress}):(0,b.jsx)(a.S,{value:r.size,size:`xs`,type:`secondary`})]}),(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,iconOnly:!0,"aria-label":`${d.upload.remove}: ${r.name}`,disabled:o,onClick:()=>h(r.id),children:(0,b.jsx)(v.XIcon,{})})]},r.id))}),(0,b.jsxs)(`div`,{className:N.uploadActions,children:[(0,b.jsx)(e.o,{size:`sm`,type:`secondary`,children:d.upload.staged(r.length)}),(0,b.jsxs)(i.o,{direction:`horizontal`,gap:`md`,children:[o?(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`outline`,onClick:S,children:d.upload.cancel}):(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,onClick:g,children:d.upload.clear}),(0,b.jsx)(n.c,{type:`button`,loading:o,onClick:y,children:o?d.upload.uploading:d.upload.start})]})]})]})]})}function L({tab:t,selectedIds:r,selectionMode:i,stagedFiles:a,strings:o,visibleCount:s,totalCount:c,onClearSelection:l,className:u}){let d=t===`upload`?(0,b.jsx)(e.o,{size:`xs`,type:`secondary`,children:a.length===0?o.footer.noFiles:o.footer.stagedSummary(a.length,D(a.reduce((e,t)=>e+t.size,0)))}):r.length>0?(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(e.o,{weight:`semibold`,children:o.selectedCount(r.length)}),!!l&&(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,onClick:l,children:o.clearSelection})]}):s!==void 0&&c!==void 0&&s!==c?(0,b.jsx)(e.o,{size:`xs`,type:`secondary`,children:o.showingCount(s,c)}):(0,b.jsx)(e.o,{size:`xs`,type:`secondary`,children:i===`single`?o.footer.pickOne:o.footer.pickMany});return(0,b.jsx)(`div`,{"aria-live":`polite`,className:(0,x.clsx)(`media-library-footer-summary--component`,N.footerSummary,u),children:d})}function R({tab:e,selectedIds:t,stagedFiles:r,uploading:i=!1,strings:a,confirmLabel:o,cancelLabel:s,onCancel:c,onConfirm:l,onUpload:u,onCancelUpload:d,className:f}){let p=(0,x.clsx)(`media-library-footer-actions--component`,N.footerActions,f);return e===`upload`?(0,b.jsxs)(`div`,{className:p,children:[(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,disabled:i,onClick:d,children:s??a.cancel}),(0,b.jsx)(n.c,{type:`button`,disabled:r.length===0||i,loading:i,onClick:u,children:a.footer.uploadStaged(r.length)})]}):(0,b.jsxs)(`div`,{className:p,children:[(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`outline`,onClick:c,children:s??a.cancel}),(0,b.jsx)(n.c,{type:`button`,disabled:t.length===0,onClick:l,children:o??a.confirm})]})}function z({tab:e,selectedItems:t,selectedIds:n,selectionMode:r,stagedFiles:i,uploading:a,strings:o,visibleCount:s,totalCount:c,confirmLabel:l,cancelLabel:u,onCancel:d,onConfirm:f,onClearSelection:p,onUpload:m,onCancelUpload:h,chrome:g=`section`,className:_}){return(0,b.jsxs)(`footer`,{"data-chrome":g,className:(0,x.clsx)(`media-library-footer--component`,N.footer,_),children:[(0,b.jsx)(L,{tab:e,selectedIds:n,selectionMode:r,stagedFiles:i,strings:o,visibleCount:s,totalCount:c,onClearSelection:p}),(0,b.jsx)(R,{tab:e,selectedItems:t,selectedIds:n,stagedFiles:i,uploading:a,strings:o,confirmLabel:l,cancelLabel:u,onCancel:d,onConfirm:f,onUpload:m,onCancelUpload:h})]})}var B={title:`Media library`,description:`Browse, upload, and pick assets.`,tabs:{library:`Library`,upload:`Upload`},views:{grid:`Grid view`,table:`Table view`},searchPlaceholder:`Search assets…`,clearSearch:`Clear search`,clearFilters:`Clear filters`,types:{all:`All types`,image:`Images`,video:`Video`,file:`Files`},sorts:{newest:`Newest`,name:`Name`,size:`Size`,usage:`Most used`},collectionAll:`All collections`,collectionLabel:`Collection`,sortLabel:`Sort`,typeLabel:`Type`,viewLabel:`Layout`,activeSearchLabel:`Searching`,loading:`Loading assets…`,error:`Could not load assets.`,emptyTitle:`Nothing here yet`,emptyDescription:`Upload an asset to get started.`,emptyFilteredTitle:`No assets match`,emptyFilteredDescription:`Try a different search, type, or collection.`,selectedCount:e=>`${e} selected`,showingCount:(e,t)=>`${e} of ${t}`,select:`Select`,deselect:`Deselect`,details:`Details`,close:`Close`,confirm:`Use selected`,cancel:`Cancel`,clearSelection:`Clear selection`,footer:{pickOne:`Choose one asset.`,pickMany:`Choose one or more assets.`,noFiles:`No files staged.`,stagedSummary:(e,t)=>`${e} ${e===1?`file`:`files`} staged · ${t}`,uploadStaged:e=>e<=1?`Upload`:`Upload ${e} files`},detail:{altLabel:`Alt text`,altPlaceholder:`Describe the image for screen readers`,collectionLabel:`Collection`,tagsLabel:`Tags`,tagsPlaceholder:`Add a tag and press Enter`,publicLabel:`Public`,publicDescription:`Anyone with the link can view this asset.`,save:`Save changes`,saving:`Saving…`,delete:`Delete`,deleting:`Deleting…`,dimensions:`Dimensions`,size:`Size`,uploaded:`Uploaded`,type:`Type`},upload:{dropTitle:`Drop files here`,dropDescription:`or browse from your device`,browse:`Browse files`,staged:e=>`${e} file${e===1?``:`s`} ready`,start:`Upload`,uploading:`Uploading…`,cancel:`Cancel upload`,clear:`Clear`,remove:`Remove`,failed:`Upload failed`,emptyTitle:`No files chosen`,emptyDescription:`Drop files above, or browse from your device.`,optionsTitle:`Applied to every file`},gallery:{title:`Media`,description:`Attached assets, in display order.`,add:`Add media`,remove:`Remove`,primary:`Cover`,makePrimary:`Make cover`,moveEarlier:`Move earlier`,moveLater:`Move later`,emptyTitle:`No media attached`,emptyDescription:`Add an asset to show it here.`,limitReached:e=>`${e} is the maximum.`}},V=[`all`,`image`,`video`,`file`];function H({title:r,description:i,confirmLabel:a,cancelLabel:o,density:s=`comfortable`,showMeta:c=!0,allowUpload:u=!0,typeFilters:f=V,confirmOnSelect:p=!1,onConfirm:g,onCancel:_,onClose:v,bulkActions:S,strings:C,slots:w,className:T,collections:E=[],selectionMode:D=`multiple`,...O}){let k=(0,y.useMemo)(()=>l.t(B,C),[C]),A=ie({...O,collections:E,selectionMode:D}),{tab:j,setTab:M,view:ee,setView:te,query:ne,setQuery:re,type:ae,setType:oe,collection:P,setCollection:F,sort:L,setSort:R,detailId:H,setDetailId:U,visibleItems:fe,selectedIds:W,selectedItems:pe,selectedSet:me,toggleSelection:he,clearSelection:ge,clearFilters:_e,loading:ve,error:ye,hasFilters:be,totalCount:xe,filteredCount:Se,accessors:G}=A,K=(0,y.useMemo)(()=>A.items.find(e=>G.getId(e)===H)??null,[G,H,A.items]),Ce=!p&&!!g,q=e=>{if(he(e),!p)return;let t=A.items.find(t=>G.getId(t)===e);t&&g?.([t],[e]),v?.()},we=ve?w?.loading??(0,b.jsxs)(`div`,{className:N.state,children:[(0,b.jsx)(h.t,{}),(0,b.jsx)(e.o,{type:`secondary`,children:k.loading})]}):ye?w?.error??(0,b.jsx)(t.p,{title:k.error,description:!1,padding:`md`,action:be?(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`outline`,onClick:_e,children:k.clearFilters}):void 0}):fe.length===0?w?.empty??(0,b.jsx)(se,{title:be?k.emptyFilteredTitle:k.emptyTitle,description:be?k.emptyFilteredDescription:k.emptyDescription,action:be?(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`outline`,onClick:_e,children:k.clearFilters}):void 0}):ee===`table`?(0,b.jsx)(le,{items:fe,selectedSet:me,selectionMode:D,accessors:G,strings:k,onToggle:q,onDetails:U}):(0,b.jsx)(`div`,{"data-density":s,className:N.grid,children:fe.map(e=>{let t=G.getId(e),n=me.has(t);return w?.renderItem?(0,b.jsx)(`div`,{children:w.renderItem(e,{id:t,selected:n,selectionMode:D,accessors:G,toggle:()=>q(t),openDetails:()=>U(t)})},t):(0,b.jsx)(ce,{item:e,selected:n,density:s,showMeta:c,selectionMode:D,accessors:G,strings:k,onToggle:()=>q(t),onDetails:()=>U(t)},t)})}),Te=(0,b.jsxs)(`div`,{className:N.browse,children:[(0,b.jsx)(I,{query:ne,onQueryChange:re,type:ae,onTypeChange:oe,typeFilters:f,collection:P,onCollectionChange:F,collections:E,sort:L,onSortChange:R,view:ee,onViewChange:te,hasFilters:be,onClearFilters:_e,strings:k,end:w?.toolbarEnd}),(0,b.jsxs)(`div`,{className:N.workspace,"data-detail":K?``:void 0,children:[(0,b.jsx)(`div`,{className:N.results,children:we}),!!K&&(0,b.jsx)(ue,{item:K,collections:E,accessors:G,strings:k,onClose:()=>U(null),onUpdate:e=>A.updateItem(K,e),onRemove:()=>A.removeItem(K),renderDetail:w?.renderDetail})]})]});return(0,b.jsxs)(`section`,{"data-slot":`media-library`,className:(0,x.clsx)(`media-library--component`,N.root,T),children:[!!(r||i||w?.headerStart||w?.headerEnd)&&(0,b.jsxs)(`header`,{className:N.header,children:[(0,b.jsxs)(`div`,{className:N.headerText,children:[w?.headerStart,!!r&&(0,b.jsx)(e.o,{weight:`semibold`,children:r}),!!i&&(0,b.jsx)(e.o,{size:`sm`,type:`secondary`,children:i})]}),w?.headerEnd]}),u?(0,b.jsxs)(d.h,{value:j,onValueChange:e=>M(e),children:[(0,b.jsxs)(d.p,{children:[(0,b.jsx)(d.f,{value:`library`,children:k.tabs.library}),(0,b.jsx)(d.f,{value:`upload`,children:k.tabs.upload})]}),(0,b.jsx)(d.m,{value:`library`,children:Te}),(0,b.jsx)(d.m,{value:`upload`,children:(0,b.jsx)(de,{stagedFiles:A.stagedFiles,uploading:A.uploading,uploadOptions:A.uploadOptions,collections:E,strings:k,onAddFiles:A.addFiles,onRemoveFile:A.removeStagedFile,onClear:A.clearStagedFiles,onOptionsChange:A.updateUploadOptions,onStart:()=>void A.startUpload(),onCancel:A.cancelUpload,empty:w?.uploadEmpty})})]}):Te,w?.footer,!!S&&!Ce&&(0,b.jsx)(m.t,{selectedCount:W.length,totalCount:xe,onClear:ge,strings:{summary:e=>k.selectedCount(e),clear:k.clearSelection},children:S({selectedItems:pe,selectedIds:W,selectedCount:W.length,visibleCount:Se,totalCount:xe,clearSelection:ge})}),Ce&&(0,b.jsx)(z,{tab:j,selectedItems:pe,selectedIds:W,selectionMode:D,stagedFiles:A.stagedFiles,uploading:A.uploading,strings:k,visibleCount:Se,totalCount:xe,confirmLabel:a,cancelLabel:o,onClearSelection:W.length>0?ge:void 0,onCancel:()=>{_?.(),v?.()},onConfirm:()=>{g(pe,W),v?.()},onUpload:()=>void A.startUpload(),onCancelUpload:A.cancelUpload})]})}function U({open:e,onOpenChange:t,trigger:n,dialogTitle:r,dialogDescription:i,dialogClassName:a,contentClassName:o,closeOnEscape:s,closeOnBackdropClick:c,onClose:u,strings:d,...f}){let p=l.t(B,d);return(0,b.jsx)(g.r,{open:e,onOpenChange:t,trigger:n,title:r??p.title,description:i??p.description,width:`xl`,closeOnEscape:s,closeOnBackdropClick:c,showCancel:!1,showConfirm:!1,className:(0,x.clsx)(`media-library-dialog--component`,a),contentClassName:o,children:(0,b.jsx)(H,{...f,strings:d,onClose:()=>{u?.(),t?.(!1)}})})}function fe({items:r,accessors:i,title:a,description:s,primaryId:c,onPrimaryChange:u,onRemove:d,onReorder:f,onAdd:p,maxItems:m,layout:h=`grid`,density:g=`comfortable`,readOnly:_=!1,empty:y,action:S,renderItem:C,strings:w,className:T,...D}){let O=l.t(B,w),k=E(i),A=m!==void 0&&r.length>=m,j=!_&&!!p&&!A,M=(e,t)=>{if(t<0||t>=r.length)return;let n=[...r],[i]=n.splice(e,1);i&&(n.splice(t,0,i),f?.(n.map(e=>k.getId(e)),n))};return(0,b.jsxs)(`section`,{"data-slot":`media-resource-gallery`,className:(0,x.clsx)(`media-resource-gallery--component`,N.gallery,T),...D,children:[!!(a||s||S||j)&&(0,b.jsxs)(`header`,{className:N.galleryHeader,children:[(0,b.jsxs)(`div`,{className:N.headerText,children:[!!a&&(0,b.jsx)(e.o,{weight:`semibold`,children:a}),!!s&&(0,b.jsx)(e.o,{size:`sm`,type:`secondary`,children:s})]}),(0,b.jsxs)(`div`,{className:N.galleryActions,children:[S,j&&(0,b.jsxs)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`outline`,onClick:p,children:[(0,b.jsx)(v.PlusIcon,{}),O.gallery.add]}),A&&m!==void 0&&(0,b.jsx)(e.o,{size:`xs`,type:`secondary`,children:O.gallery.limitReached(m)})]})]}),r.length===0?y??(0,b.jsx)(t.p,{title:O.gallery.emptyTitle,description:O.gallery.emptyDescription,padding:`md`,border:!0,action:j?(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`outline`,onClick:p,children:O.gallery.add}):void 0}):(0,b.jsx)(`ul`,{"data-layout":h,"data-density":g,className:N.galleryList,children:r.map((e,t)=>{let i=k.getId(e),a=i===c,s={id:i,index:t,total:r.length,primary:a,accessors:k,canMovePrevious:t>0,canMoveNext:t<r.length-1,setPrimary:()=>u?.(i,e),remove:()=>d?.(i,e),movePrevious:()=>M(t,t-1),moveNext:()=>M(t,t+1)};return C?(0,b.jsx)(`li`,{children:C(e,s)},i):(0,b.jsxs)(`li`,{"data-primary":a||void 0,className:N.galleryItem,children:[(0,b.jsx)(P,{item:e,accessors:k,className:N.galleryPreview}),a&&(0,b.jsx)(o.t,{tone:`primary`,className:N.galleryBadge,children:O.gallery.primary}),!_&&(0,b.jsxs)(`div`,{className:N.galleryControls,children:[!!f&&(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,iconOnly:!0,"aria-label":O.gallery.moveEarlier,disabled:!s.canMovePrevious,onClick:s.movePrevious,children:(0,b.jsx)(v.ChevronLeftIcon,{})}),(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,iconOnly:!0,"aria-label":O.gallery.moveLater,disabled:!s.canMoveNext,onClick:s.moveNext,children:(0,b.jsx)(v.ChevronRightIcon,{})})]}),!!u&&!a&&(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,iconOnly:!0,"aria-label":O.gallery.makePrimary,onClick:s.setPrimary,children:(0,b.jsx)(v.StarIcon,{})}),!!d&&(0,b.jsx)(n.c,{type:`button`,tone:`neutral`,buttonStyle:`ghost`,iconOnly:!0,"aria-label":`${O.gallery.remove}: ${k.getName(e)}`,onClick:s.remove,children:(0,b.jsx)(v.XIcon,{})})]})]},i)})})]})}exports.MediaLibrary=H,exports.MediaLibraryCard=ce,exports.MediaLibraryDetailPanel=ue,exports.MediaLibraryDialog=U,exports.MediaLibraryEmptyState=se,exports.MediaLibraryFooter=z,exports.MediaLibraryFooterActions=R,exports.MediaLibraryFooterSummary=L,exports.MediaLibraryList=le,exports.MediaLibraryToolbar=I,exports.MediaLibraryUploadPanel=de,exports.MediaPreview=P,exports.MediaResourceGallery=fe,exports.defaultMediaLibraryStrings=B,exports.formatMediaLibrarySize=D,exports.getMediaLibraryDimensions=O,exports.resolveMediaLibraryAccessors=E,exports.useMediaLibrary=ie;

package/dist/features/media-library.css

@@ -0,0 +1,27 @@
+@import "../core.css";
+@import "../css/media-library.css";
+@import "../css/typography.css";
+@import "../css/feedback.css";
+@import "../css/buttons.css";
+@import "../css/tooltip.css";
+@import "../css/display.css";
+@import "../css/structure.css";
+@import "../css/primitives.css";
+@import "../css/badge.css";
+@import "../css/upload.css";
+@import "../css/forms.css";
+@import "../css/cards.css";
+@import "../css/action-menu.css";
+@import "../css/dropdown-menu.css";
+@import "../css/skeleton.css";
+@import "../css/text-inputs.css";
+@import "../css/navigation.css";
+@import "../css/choice-inputs.css";
+@import "../css/label.css";
+@import "../css/value-inputs.css";
+@import "../css/date-pickers.css";
+@import "../css/popover.css";
+@import "../css/batch-action-bar.css";
+@import "../css/spinner.css";
+@import "../css/overlays.css";
+@import "../css/overlay.css";