@visulima/dev-toolbar 1.0.20 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## @visulima/dev-toolbar [1.1.0](https://github.com/visulima/visulima/compare/@visulima/dev-toolbar@1.0.21...@visulima/dev-toolbar@1.1.0) (2026-09-21)
+
+### Features
+
+* **dev-toolbar:** render panels from a spec, and test the logic behind them ([#880](https://github.com/visulima/visulima/issues/880)) ([daf8a14](https://github.com/visulima/visulima/commit/daf8a142cb5896203319ea64ba373ac40817481f))
+
+## @visulima/dev-toolbar [1.0.21](https://github.com/visulima/visulima/compare/@visulima/dev-toolbar@1.0.20...@visulima/dev-toolbar@1.0.21) (2026-09-21)
+
+### Miscellaneous Chores
+
+* point every Discord link at the anolilab server ([#858](https://github.com/visulima/visulima/issues/858)) ([4002bfc](https://github.com/visulima/visulima/commit/4002bfcd8d3c748d7008efe208e6aaae7bd18753))
+
 ## @visulima/dev-toolbar [1.0.20](https://github.com/visulima/visulima/compare/@visulima/dev-toolbar@1.0.19...@visulima/dev-toolbar@1.0.20) (2026-09-07)
 
 ## @visulima/dev-toolbar [1.0.19](https://github.com/visulima/visulima/compare/@visulima/dev-toolbar@1.0.18...@visulima/dev-toolbar@1.0.19) (2026-09-06)

package/README.md

@@ -361,7 +361,7 @@ The visulima dev-toolbar is open-sourced software licensed under the [MIT][licen
 [npm-downloads]: https://www.npmjs.com/package/@visulima/dev-toolbar
 [prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
 [prs-welcome]: https://github.com/visulima/visulima/blob/main/.github/CONTRIBUTING.md
-[chat-badge]: https://img.shields.io/discord/932323359193186354.svg?style=for-the-badge
-[chat]: https://discord.gg/TtFJY8xkFK
+[chat-badge]: https://img.shields.io/discord/902465130518949899.svg?style=for-the-badge
+[chat]: https://discord.gg/eajEZvk2PG
 [typescript-badge]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
 [typescript-url]: https://www.typescriptlang.org/

package/dist/apps/assets/index.js

@@ -1,4 +1,4 @@
-import{addHookName as i}from"preact/devtools";import{clsx as c}from"../../packem_shared/clsx-BGQISBxA.js";import{useState as s,useRef as I,useEffect as k}from"preact/hooks";import{jsxs as o,jsx as e}from"preact/jsx-runtime";import d from"../../packem_shared/Button-C47WESqv.js";import L from"../../packem_shared/Input-ChP0V9d9.js";const R=`<!-- @license lucide-static v1.31.0 - ISC -->
+import{addHookName as i}from"preact/devtools";import{clsx as c}from"../../packem_shared/clsx-BGQISBxA.js";import{useState as s,useEffect as z}from"preact/hooks";import{f as y}from"../../packem_shared/index-DMbUhqea.js";import{jsx as e,jsxs as o}from"preact/jsx-runtime";import{useCopy as E}from"../../packem_shared/useCopy-3LQUaNDI.js";import I from"../../packem_shared/LoadingState-DQzchtCU.js";import d from"../../packem_shared/Button-C47WESqv.js";import B from"../../packem_shared/Input-ChP0V9d9.js";const R=`<!-- @license lucide-static v1.31.0 - ISC -->
 <svg
   class="lucide lucide-folder-open"
   xmlns="http://www.w3.org/2000/svg"
@@ -13,4 +13,4 @@ import{addHookName as i}from"preact/devtools";import{clsx as c}from"../../packem
 >
   <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" />
 </svg>
-`,P=t=>!Number.isFinite(t)||t<0?"–":t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`,C=t=>t.startsWith("/")&&!t.includes(":")?t:"#",N=[{label:"All",value:"all"},{label:"Images",value:"image"},{label:"Videos",value:"video"},{label:"Audio",value:"audio"},{label:"Fonts",value:"font"},{label:"Text",value:"text"},{label:"Other",value:"other"}],H={audio:"bg-yellow-500/15 text-yellow-400 border-yellow-500/30",font:"bg-orange-500/15 text-orange-400 border-orange-500/30",image:"bg-blue-500/15 text-blue-400 border-blue-500/30",other:"bg-foreground/6 text-muted-foreground border-border",text:"bg-emerald-500/15 text-emerald-400 border-emerald-500/30",video:"bg-purple-500/15 text-purple-400 border-purple-500/30"},T=({type:t})=>e("span",{class:c("inline-flex px-1.5 py-0.5 text-[0.6rem] font-mono font-bold uppercase border",H[t]),children:t}),O=({asset:t})=>{const n=C(t.publicPath);if(n!=="#"){if(t.type==="image")return e("div",{class:"flex items-center justify-center bg-foreground/4 border border-border h-32 overflow-hidden",children:e("img",{alt:t.publicPath,class:"max-w-full max-h-full object-contain",onError:u=>{u.target.style.display="none"},src:n})});if(t.type==="video")return e("div",{class:"flex items-center justify-center bg-foreground/4 border border-border h-32 overflow-hidden",children:e("video",{class:"max-w-full max-h-full",preload:"metadata",src:n})});if(t.type==="audio")return e("div",{class:"flex items-center justify-center bg-foreground/4 border border-border h-14 px-2",children:e("audio",{class:"w-full",controls:!0,preload:"none",src:n})})}},_=({helpers:t})=>{const[n,u]=i(s([]),"assets"),[j,p]=i(s(!0),"loading"),[x,g]=i(s(void 0),"error"),[v,A]=i(s(""),"search"),[a,F]=i(s("all"),"typeFilter"),[l,f]=i(s(void 0),"selected"),[S,y]=i(s(!1),"copied"),h=i(I(void 0),"copyTimerRef");k(()=>()=>{clearTimeout(h.current)},[]);const m=()=>{p(!0),g(void 0),f(void 0),t.rpc.getStaticAssets().then(r=>{u(r),p(!1)}).catch(r=>{g(r.message??"Failed to load assets"),p(!1)})};k(()=>{m()},[]);const b=n.filter(r=>{const w=v.toLowerCase(),B=!w||r.publicPath.toLowerCase().includes(w),E=a==="all"||r.type===a;return B&&E}),z=r=>{navigator.clipboard.writeText(r.publicPath).then(()=>{clearTimeout(h.current),y(!0),h.current=setTimeout(y,1500,!1)}).catch(()=>{})};return j?o("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 select-none",children:[e("div",{"aria-hidden":"true",class:"flex gap-1.5 items-center",children:[0,160,320].map(r=>e("span",{class:"size-1.5 bg-primary/50 rounded-full animate-pulse",style:{animationDelay:`${r}ms`}},r))}),e("span",{class:"text-[0.75rem] text-muted-foreground",children:"Scanning assets…"})]}):x?o("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 text-center",children:[e("p",{class:"text-[0.8rem] text-destructive",children:x}),e(d,{onClick:m,size:"sm",variant:"outline",children:"Retry"})]}):o("div",{class:"flex flex-col h-full",children:[o("div",{class:"flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0 flex-wrap",children:[e(L,{class:"flex-1 min-w-32 bg-foreground/4 font-mono text-[0.8rem] placeholder:text-muted-foreground/50 focus-visible:border-primary/50 border-border",onInput:r=>{A(r.target.value)},placeholder:"Filter assets…",type:"text",value:v}),o("span",{class:"text-[0.7rem] text-muted-foreground shrink-0",children:[b.length," / ",n.length]}),e(d,{onClick:m,size:"sm",variant:"outline",children:"Refresh"})]}),e("div",{"aria-label":"Filter by type",class:"flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0 flex-wrap",role:"group",children:N.map(r=>e("button",{"aria-pressed":a===r.value,class:c("px-2.5 py-0.5 text-[0.7rem] font-medium border cursor-pointer transition-colors duration-100",a===r.value?"bg-primary/15 text-primary border-primary/30":"bg-foreground/4 text-muted-foreground border-border hover:bg-foreground/8 hover:text-foreground"),onClick:()=>{F(r.value)},type:"button",children:r.label},r.value))}),o("div",{class:"flex flex-1 min-h-0 overflow-hidden",children:[e("div",{class:"flex-1 overflow-auto divide-y divide-border/30",role:"list",children:b.length===0?e("div",{class:"flex items-center justify-center p-8 text-[0.8rem] text-muted-foreground",children:n.length===0?"No assets found in public directory.":"No assets match the current filter."}):b.map(r=>o("button",{"aria-label":r.publicPath,"aria-selected":l?.publicPath===r.publicPath,class:c("w-full flex items-center gap-3 px-4 py-2.5 text-left border-0 bg-transparent cursor-pointer","hover:bg-foreground/4 transition-colors duration-100",l?.publicPath===r.publicPath&&"bg-primary/6"),onClick:()=>{f(l?.publicPath===r.publicPath?void 0:r)},role:"option",type:"button",children:[e(T,{type:r.type}),e("span",{class:"flex-1 text-[0.775rem] font-mono text-foreground/80 truncate min-w-0",children:r.publicPath}),e("span",{class:"shrink-0 text-[0.65rem] text-muted-foreground",children:P(r.size)})]},r.publicPath))}),l&&o("div",{class:"border-l border-border bg-background w-72 shrink-0 flex flex-col overflow-hidden",children:[o("div",{class:"flex items-center justify-between gap-2 px-4 py-3 border-b border-border shrink-0",children:[e("span",{class:"text-[0.7rem] font-semibold text-foreground uppercase tracking-wide",children:"Asset Info"}),e(d,{"aria-label":"Close",class:"h-6 w-6 text-xs",onClick:()=>{f(void 0)},size:"icon",variant:"ghost",children:"✕"})]}),o("div",{class:"flex-1 overflow-auto p-4 space-y-4",children:[e(O,{asset:l}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Path"}),e("code",{class:"text-[0.7rem] font-mono text-foreground/80 break-all",children:l.publicPath})]}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Type"}),e(T,{type:l.type})]}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Size"}),e("span",{class:"text-[0.8rem] font-mono text-foreground",children:P(l.size)})]}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Last Modified"}),e("span",{class:"text-[0.75rem] text-foreground/80",children:new Date(l.mtime).toLocaleString()})]}),o("div",{class:"flex flex-col gap-2 pt-1",children:[e(d,{class:"w-full text-[0.75rem]",onClick:()=>{z(l)},size:"sm",variant:"outline",children:S?"Copied!":"Copy URL"}),e("a",{class:c("w-full text-[0.75rem] inline-flex items-center justify-center","px-3 py-1.5 border border-border bg-transparent","text-foreground hover:bg-foreground/6 transition-colors duration-100"),href:C(l.publicPath),rel:"noopener noreferrer",target:"_blank",children:"Open in browser"})]})]})]})]})]})},G={component:_,icon:R,id:"dev-toolbar:assets",name:"Assets"};export{G as default};
+`,k=t=>{if(!t.startsWith("/"))return"#";try{return new URL(t,globalThis.location.origin).origin===globalThis.location.origin?t:"#"}catch{return"#"}},H=[{label:"All",value:"all"},{label:"Images",value:"image"},{label:"Videos",value:"video"},{label:"Audio",value:"audio"},{label:"Fonts",value:"font"},{label:"Text",value:"text"},{label:"Other",value:"other"}],N={audio:"bg-yellow-500/15 text-yellow-400 border-yellow-500/30",font:"bg-orange-500/15 text-orange-400 border-orange-500/30",image:"bg-blue-500/15 text-blue-400 border-blue-500/30",other:"bg-foreground/6 text-muted-foreground border-border",text:"bg-emerald-500/15 text-emerald-400 border-emerald-500/30",video:"bg-purple-500/15 text-purple-400 border-purple-500/30"},w=({type:t})=>e("span",{class:c("inline-flex px-1.5 py-0.5 text-[0.6rem] font-mono font-bold uppercase border",N[t]),children:t}),O=({asset:t})=>{const n=k(t.publicPath);if(n!=="#"){if(t.type==="image")return e("div",{class:"flex items-center justify-center bg-foreground/4 border border-border h-32 overflow-hidden",children:e("img",{alt:t.publicPath,class:"max-w-full max-h-full object-contain",onError:u=>{u.target.style.display="none"},src:n})});if(t.type==="video")return e("div",{class:"flex items-center justify-center bg-foreground/4 border border-border h-32 overflow-hidden",children:e("video",{class:"max-w-full max-h-full",preload:"metadata",src:n})});if(t.type==="audio")return e("div",{class:"flex items-center justify-center bg-foreground/4 border border-border h-14 px-2",children:e("audio",{class:"w-full",controls:!0,preload:"none",src:n})})}},_=({helpers:t})=>{const[n,u]=i(s([]),"assets"),[P,p]=i(s(!0),"loading"),[m,x]=i(s(void 0),"error"),[g,C]=i(s(""),"search"),[a,A]=i(s("all"),"typeFilter"),[l,f]=i(s(void 0),"selected"),{copied:j,copy:S}=E(),b=()=>{p(!0),x(void 0),f(void 0),t.rpc.getStaticAssets().then(r=>{u(r),p(!1)}).catch(r=>{x(r.message??"Failed to load assets"),p(!1)})};z(()=>{b()},[]);const h=n.filter(r=>{const v=g.toLowerCase(),L=!v||r.publicPath.toLowerCase().includes(v),F=a==="all"||r.type===a;return L&&F}),T=r=>{S(r.publicPath)};return P?e(I,{label:"Scanning assets…"}):m?o("div",{class:"flex flex-col items-center justify-center h-full gap-3 p-8 text-center",children:[e("p",{class:"text-[0.8rem] text-destructive",children:m}),e(d,{onClick:b,size:"sm",variant:"outline",children:"Retry"})]}):o("div",{class:"flex flex-col h-full",children:[o("div",{class:"flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0 flex-wrap",children:[e(B,{class:"flex-1 min-w-32 bg-foreground/4 font-mono text-[0.8rem] placeholder:text-muted-foreground/50 focus-visible:border-primary/50 border-border",onInput:r=>{C(r.target.value)},placeholder:"Filter assets…",type:"text",value:g}),o("span",{class:"text-[0.7rem] text-muted-foreground shrink-0",children:[h.length," / ",n.length]}),e(d,{onClick:b,size:"sm",variant:"outline",children:"Refresh"})]}),e("div",{"aria-label":"Filter by type",class:"flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0 flex-wrap",role:"group",children:H.map(r=>e("button",{"aria-pressed":a===r.value,class:c("px-2.5 py-0.5 text-[0.7rem] font-medium border cursor-pointer transition-colors duration-100",a===r.value?"bg-primary/15 text-primary border-primary/30":"bg-foreground/4 text-muted-foreground border-border hover:bg-foreground/8 hover:text-foreground"),onClick:()=>{A(r.value)},type:"button",children:r.label},r.value))}),o("div",{class:"flex flex-1 min-h-0 overflow-hidden",children:[e("div",{class:"flex-1 overflow-auto divide-y divide-border/30",role:"list",children:h.length===0?e("div",{class:"flex items-center justify-center p-8 text-[0.8rem] text-muted-foreground",children:n.length===0?"No assets found in public directory.":"No assets match the current filter."}):h.map(r=>o("button",{"aria-label":r.publicPath,"aria-selected":l?.publicPath===r.publicPath,class:c("w-full flex items-center gap-3 px-4 py-2.5 text-left border-0 bg-transparent cursor-pointer","hover:bg-foreground/4 transition-colors duration-100",l?.publicPath===r.publicPath&&"bg-primary/6"),onClick:()=>{f(l?.publicPath===r.publicPath?void 0:r)},role:"option",type:"button",children:[e(w,{type:r.type}),e("span",{class:"flex-1 text-[0.775rem] font-mono text-foreground/80 truncate min-w-0",children:r.publicPath}),e("span",{class:"shrink-0 text-[0.65rem] text-muted-foreground",children:y(r.size)})]},r.publicPath))}),l&&o("div",{class:"border-l border-border bg-background w-72 shrink-0 flex flex-col overflow-hidden",children:[o("div",{class:"flex items-center justify-between gap-2 px-4 py-3 border-b border-border shrink-0",children:[e("span",{class:"text-[0.7rem] font-semibold text-foreground uppercase tracking-wide",children:"Asset Info"}),e(d,{"aria-label":"Close",class:"h-6 w-6 text-xs",onClick:()=>{f(void 0)},size:"icon",variant:"ghost",children:"✕"})]}),o("div",{class:"flex-1 overflow-auto p-4 space-y-4",children:[e(O,{asset:l}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Path"}),e("code",{class:"text-[0.7rem] font-mono text-foreground/80 break-all",children:l.publicPath})]}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Type"}),e(w,{type:l.type})]}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Size"}),e("span",{class:"text-[0.8rem] font-mono text-foreground",children:y(l.size)})]}),o("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Last Modified"}),e("span",{class:"text-[0.75rem] text-foreground/80",children:new Date(l.mtime).toLocaleString()})]}),o("div",{class:"flex flex-col gap-2 pt-1",children:[e(d,{class:"w-full text-[0.75rem]",onClick:()=>{T(l)},size:"sm",variant:"outline",children:j?"Copied!":"Copy URL"}),e("a",{class:c("w-full text-[0.75rem] inline-flex items-center justify-center","px-3 py-1.5 border border-border bg-transparent","text-foreground hover:bg-foreground/6 transition-colors duration-100"),href:k(l.publicPath),rel:"noopener noreferrer",target:"_blank",children:"Open in browser"})]})]})]})]})]})},K={component:_,icon:R,id:"dev-toolbar:assets",name:"Assets"};export{K as default};