@visulima/dev-toolbar 1.0.0-alpha.8 → 1.0.0

package/README.md

@@ -83,32 +83,45 @@ Start your dev server and press **`Alt`+`Shift`+`D`** to open the toolbar.
 | **Tailwind**      | Browse all resolved Tailwind CSS design tokens and their values               |
 | **Settings**      | Theme, toolbar behaviour, panel sizing, and custom keyboard shortcuts         |
 
-All apps are enabled by default. Disable individual apps via plugin options:
+Most apps are **disabled by default** to keep the toolbar minimal. Out of the box
+only **Settings** and **Vite Config** are shown (and **Annotations**, which is
+auto-enabled whenever the inspector is). Opt into the apps you want:
 
 ```ts
 devToolbar({
     apps: {
-        performance: false,
-        seo: false,
+        inspector: true,
+        a11y: true,
+        seo: true,
     },
 });
 ```
 
+> Enabling `inspector` also auto-enables `annotations` (the inspector's badge
+> links to the annotations panel). Set `annotations: false` to suppress it.
+
 ## Plugin Options
 
 ```ts
 devToolbar({
-    // Built-in apps (all true by default)
+    // Master switch — `false` returns an empty plugin array, disabling the whole
+    // toolbar without removing it from vite.config.ts (handy for CI/preview).
+    enabled: true,
+
+    // Built-in apps. Only `settings` and `viteConfig` default to true; everything
+    // else defaults to false. Set an app to true to enable it.
     apps: {
-        a11y: true,
-        moduleGraph: true,
-        performance: true,
-        seo: true,
-        settings: true,
-        timeline: true,
-        viteConfig: true,
-        inspector: true,
-        tailwind: true,
+        a11y: false,
+        annotations: false, // auto-enabled when `inspector` is true
+        assets: false,
+        inspector: false,
+        moduleGraph: false,
+        performance: false,
+        seo: false,
+        settings: true, // enabled by default
+        tailwind: false,
+        timeline: false,
+        viteConfig: true, // enabled by default
     },
 
     // Register custom apps
@@ -118,9 +131,10 @@ devToolbar({
     placement: "bottom-center", // "bottom-left" | "bottom-center" | "bottom-right"
     position: "bottom", // "bottom" | "top" | "left" | "right"
 
-    // Panel defaults (users can override via Settings app)
-    height: 60, // % of viewport height
-    width: 80, // % of viewport width
+    // Panel defaults (users can override via Settings app).
+    // height/width are clamped to the 20–95 range.
+    height: 60, // % of viewport height (20–95)
+    width: 80, // % of viewport width (20–95)
     minimizePanelInactive: 5000, // ms; -1 = never auto-hide
     closeOnOutsideClick: true,
 
@@ -136,6 +150,11 @@ devToolbar({
     // Force a specific editor for "Open in editor" (auto-detected if omitted)
     editor: "webstorm",
 
+    // `readFile` RPC policy. Restricted to a curated extension allowlist by
+    // default. Set to `false` to remove it entirely (recommended with `vite --host`),
+    // or override the allowed extensions.
+    readFile: { extensions: ["ts", "tsx", "js", "jsx", "css", "json", "md"] },
+
     // JSX source injection for click-to-source in the inspector
     injectSource: {
         enabled: true, // set false to opt out
@@ -208,7 +227,35 @@ devToolbar({
 const routes = await helpers.rpc.getRoutes();
 ```
 
-Built-in RPC functions: `getViteConfig()`, `getModuleGraph()`, `openInEditor(file, line, col)`.
+Built-in RPC functions:
+
+| Function                          | Returns                                          |
+| --------------------------------- | ------------------------------------------------ |
+| `getViteConfig()`                 | Fully resolved Vite config (serializable subset) |
+| `getModuleGraph()`                | Vite's live module dependency graph              |
+| `getStaticAssets()`               | Files under `publicDir` (capped at 5000)         |
+| `getTailwindConfig()`             | Resolved Tailwind theme tokens                   |
+| `openInEditor(file, line?, col?)` | Opens the file in the configured editor          |
+| `readFile(path)`                  | Text file under the project root (allowlisted)   |
+| `getAnnotations()`                | All saved annotations                            |
+| `createAnnotation(data)`          | Creates an annotation                            |
+| `updateAnnotation(id, data)`      | Updates an annotation                            |
+| `deleteAnnotation(id)`            | Deletes an annotation + its screenshot           |
+| `saveScreenshot(id, dataUrl)`     | Stores a screenshot, returns its relative path   |
+| `getScreenshot(id)`               | Returns a screenshot as a base64 data URL        |
+
+## Security
+
+The dev toolbar runs only during `vite dev` and is stripped from production builds
+(`removeDevtoolsOnBuild`, default `true`). Still, be aware of the RPC surface:
+
+- **`readFile` returns project files to any connected WebSocket client.** It is
+  confined to the project root and a curated extension allowlist (no `.env`,
+  lockfiles, or key material by default), but if you run the dev server with
+  `vite --host` (e.g. for mobile testing) **any device on your LAN can call it**.
+  Disable it (`readFile: false`) or narrow `readFile.extensions` in that scenario.
+- Screenshot/annotation writes are path-traversal hardened and symlink escapes are
+  rejected; `openInEditor` confines paths to the project root and never shells out.
 
 ## Global API
 

package/bin/mcp.js

@@ -21,7 +21,7 @@
  */
 
 // eslint-disable-next-line antfu/no-import-dist -- bin entry point runs after build
-import { startMcpServer } from "../dist/mcp/server";
+import { startMcpServer } from "../dist/mcp/server.js";
 
 startMcpServer().catch((error) => {
     console.error("Failed to start MCP server:", error);

package/dist/apps/a11y/index.d.ts

@@ -1,3 +1,4 @@
-import type { DevToolbarApp } from "../../types/app.d.ts";
+import { D as DevToolbarApp } from "../../packem_shared/app.d-SmKEDxsI.js";
+import 'preact';
 declare const a11yApp: DevToolbarApp;
-export default a11yApp;
+export { a11yApp as default };

package/dist/apps/a11y/index.js

@@ -1,4 +1,4 @@
-var X=Object.defineProperty;var O=(a,e)=>X(a,"name",{value:e,configurable:!0});import{addHookName as k}from"preact/devtools";import{clsx as d}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as C,useEffect as L}from"preact/hooks";import{jsxs as i,jsx as t,Fragment as W}from"preact/jsx-runtime";import w from"../../packem_shared/Button-Bkx66Co7.js";import{Alert as Y,AlertDescription as Z}from"../../packem_shared/Alert-D2CvX4fw.js";const ee=`<!-- @license lucide-static v1.7.0 - ISC -->
+import{addHookName as w}from"preact/devtools";import{clsx as l}from"../../packem_shared/clsx-CtZWcPHt.js";import{useState as S,useEffect as U}from"preact/hooks";import{jsxs as a,jsx as t,Fragment as G}from"preact/jsx-runtime";import v from"../../packem_shared/Button-CAKvtfij.js";import{Alert as V,AlertDescription as F}from"../../packem_shared/Alert-CZq7C43v.js";const Y=`<!-- @license lucide-static v1.17.0 - ISC -->
 <svg
   class="lucide lucide-accessibility"
   xmlns="http://www.w3.org/2000/svg"
@@ -17,5 +17,5 @@ var X=Object.defineProperty;var O=(a,e)=>X(a,"name",{value:e,configurable:!0});i
   <path d="M4.24 14.5a5 5 0 0 0 6.88 6" />
   <path d="M13.76 17.5a5 5 0 0 0-6.88-6" />
 </svg>
-`;var te=Object.defineProperty,x=O((a,e)=>te(a,"name",{value:e,configurable:!0}),"i$3");const E=["critical","serious","moderate","minor"],re={critical:"rgb(239,68,68)",minor:"rgb(100,116,139)",moderate:"rgb(249,115,22)",serious:"rgb(234,179,8)"},se={"best-practice":["best-practice"],wcag2a:["wcag2a"],wcag21aa:["wcag2a","wcag2aa","wcag21a","wcag21aa"],wcag22aa:["wcag2a","wcag2aa","wcag21a","wcag21aa","wcag22a","wcag22aa"]},_="__vdt_a11y__",ne=x(()=>{try{const a=sessionStorage.getItem(_);if(a){const e=JSON.parse(a);if(Array.isArray(e.issues))return{issues:e.issues,lastScan:e.lastScan??void 0}}}catch{}return{issues:[],lastScan:void 0}},"loadFromSession"),z=x((a,e)=>{const n=a;n.dataset.vdtA11y=e,n.style.setProperty("outline",`2px solid ${re[e]}`,"important"),n.style.setProperty("outline-offset","2px","important")},"setHighlight"),I=x(()=>{for(const a of document.querySelectorAll("[data-vdt-a11y]")){const e=a;delete e.dataset.vdtA11y,e.style.removeProperty("outline"),e.style.removeProperty("outline-offset")}},"clearHighlightsDOM"),H=x(a=>{I();for(const e of a)for(const n of e.nodes)try{const r=document.querySelector(n.selector);r&&z(r,e.impact)}catch{}},"applyOverlaysDOM"),ae=x(a=>{const e=a.at(-1);return Array.isArray(e)?e.join(" "):String(e??"")},"nodeSelector"),ie=x((a,e)=>{const n=[];for(const r of a)e.includes(r.id)||n.push({helpUrl:r.helpUrl,id:r.id,impact:r.impact??"minor",message:r.help,nodes:r.nodes.map(o=>({html:o.html,selector:ae(o.target)})),wcagTags:r.tags.filter(o=>o.startsWith("wcag")||o==="best-practice")});return n},"convertViolations"),oe=x(async a=>{const e=await import("axe-core"),n=typeof e.default?.run=="function"?e.default:e;if(typeof n.run!="function")throw new TypeError("axe-core could not be loaded — .run is not available");return n.run(document,{exclude:[["dev-toolbar"]],runOnly:{type:"tag",values:se[a]}})},"runAxeScan");class ce{static{O(this,"v")}static{x(this,"A11yStore")}listeners=new Set;state;constructor(){const{issues:e,lastScan:n}=ne();this.state={isScanning:!1,issues:e,lastScan:n,scanError:void 0,showOverlays:!1,standard:"wcag21aa"}}clearHighlights(){I()}getState(){return this.state}highlightIssue(e){I();let n=!1;for(const r of e.nodes)try{const o=document.querySelector(r.selector);o&&(z(o,e.impact),n||(o.scrollIntoView({behavior:"smooth",block:"center"}),n=!0))}catch{}}async scan(e=[]){if(!this.state.isScanning){this.update({isScanning:!0,scanError:void 0});try{const n=await oe(this.state.standard),r=ie(n.violations,e);this.update({isScanning:!1,issues:r,lastScan:new Date().toISOString()}),this.persist(),this.state.showOverlays&&H(r)}catch(n){this.update({isScanning:!1,scanError:n instanceof Error?n.message:String(n)})}}}setShowOverlays(e){this.update({showOverlays:e}),e?H(this.state.issues):I()}setStandard(e){this.update({standard:e})}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}persist(){try{sessionStorage.setItem(_,JSON.stringify({issues:this.state.issues,lastScan:this.state.lastScan}))}catch{}}update(e){this.state={...this.state,...e},this.notify()}}const l=new ce;var le=Object.defineProperty,c=O((a,e)=>le(a,"name",{value:e,configurable:!0}),"i$2");const N={critical:"Critical",minor:"Minor",moderate:"Moderate",serious:"Serious"},J={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},de={critical:"bg-destructive/10 border-destructive/30",minor:"bg-foreground/4 border-border",moderate:"bg-warning/10 border-warning/30",serious:"bg-warning/10 border-warning/30"},ue={critical:"bg-destructive",minor:"bg-muted-foreground/50",moderate:"bg-warning",serious:"bg-warning"},ge=c(({count:a,isActive:e,onClick:n,severity:r})=>i("button",{class:d("flex flex-col items-center gap-1 px-3 py-2.5 border cursor-pointer transition-colors",e?"ring-1 ring-inset ring-primary/40":"hover:bg-foreground/6",de[r]),onClick:n,title:`${e?"Clear":"Filter by"} ${N[r]}`,type:"button",children:[t("span",{class:d("text-xl font-bold tabular-nums leading-none",J[r]),children:a}),t("span",{class:"text-[0.6rem] font-semibold uppercase tracking-wider text-muted-foreground",children:N[r]})]}),"SeverityBucket"),pe=c(({isSelected:a,issue:e,onClick:n,onDisable:r})=>i("div",{class:d("p-3 border cursor-pointer transition-colors",a?"bg-foreground/6 border-primary/30":"border-border hover:bg-foreground/3"),onClick:n,children:[i("div",{class:"flex items-start gap-2 mb-1.5",children:[t("span",{class:d("mt-1 size-2 rounded-full shrink-0",ue[e.impact])}),t("span",{class:"text-[0.75rem] font-semibold text-foreground flex-1 leading-snug",children:e.id}),t("span",{class:d("text-[0.6rem] font-bold uppercase tracking-wide shrink-0",J[e.impact]),children:N[e.impact]})]}),t("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed mb-2 ml-4",children:e.message}),e.nodes.length>0&&i("div",{class:"mb-2 ml-4 space-y-0.5",children:[e.nodes.slice(0,3).map((o,p)=>t("code",{class:"block text-[0.65rem] text-foreground/70 font-mono bg-foreground/5 px-2 py-1 truncate",children:o.selector},p)),e.nodes.length>3&&i("span",{class:"text-[0.62rem] text-muted-foreground/60",children:["+",e.nodes.length-3," more element",e.nodes.length>4?"s":""]})]}),i("div",{class:"flex items-center gap-2 flex-wrap ml-4",children:[e.wcagTags.slice(0,3).map(o=>t("span",{class:"text-[0.58rem] font-mono uppercase bg-primary/8 text-primary/70 border border-primary/20 px-1.5 py-0.5",children:o},o)),t("span",{class:"flex-1"}),t("a",{class:"text-[0.62rem] text-primary/70 hover:text-primary transition-colors",href:e.helpUrl,onClick:c(o=>o.stopPropagation(),"onClick"),rel:"noopener noreferrer",target:"_blank",children:"Learn more ↗"}),t("button",{class:"text-[0.62rem] text-muted-foreground/60 hover:text-muted-foreground transition-colors cursor-pointer bg-transparent border-0 p-0",onClick:c(o=>{o.stopPropagation(),r(e.id)},"onClick"),title:"Disable this rule for current session",type:"button",children:"Disable"})]})]}),"IssueCard"),me=c(a=>{const[e,n]=k(C(()=>l.getState()),"storeState"),[r,o]=k(C([]),"disabledRules"),[p,M]=k(C(void 0),"minSeverity"),[S,v]=k(C(void 0),"activeIssueId"),[m,f]=k(C(void 0),"filterSeverity");L(()=>l.subscribe(()=>n(l.getState())),[]),L(()=>l.clearHighlights.bind(l),[]);const{isScanning:b,issues:h,lastScan:u,scanError:$,showOverlays:T,standard:q}=e,U=u!==void 0||$!==void 0,P=c(()=>{f(void 0),v(void 0),l.scan(r).catch(()=>{})},"handleScan"),V=c(s=>{S===s.id?(v(void 0),l.clearHighlights(),T&&l.setShowOverlays(!0)):(v(s.id),l.highlightIssue(s))},"handleIssueClick"),F=c(s=>{o(g=>[...g,s])},"handleDisableRule"),R=h.filter(s=>!(r.includes(s.id)||m&&s.impact!==m||p&&E.indexOf(s.impact)>E.indexOf(p))),K=c(s=>h.filter(g=>!r.includes(g.id)&&g.impact===s).length,"countBy");return i("div",{class:"flex flex-col h-full",children:[i("div",{class:"shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-border bg-foreground/2 flex-wrap",children:[t(w,{class:d(b?"border-primary/30 text-primary/50 bg-primary/5":""),disabled:b,onClick:P,size:"sm",variant:"outline",children:b?"Scanning…":"Scan page"}),i("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Standard",i("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:c(s=>l.setStandard(s.target.value),"onChange"),style:"color-scheme: dark",value:q,children:[t("option",{value:"wcag21aa",children:"WCAG 2.1 AA"}),t("option",{value:"wcag22aa",children:"WCAG 2.2 AA"}),t("option",{value:"wcag2a",children:"WCAG 2.0 A"}),t("option",{value:"best-practice",children:"Best Practice"})]})]}),i("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Min",i("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:c(s=>{const{value:g}=s.target;M(g||void 0)},"onChange"),style:"color-scheme: dark",value:p??"",children:[t("option",{value:"",children:"All"}),t("option",{value:"critical",children:"Critical only"}),t("option",{value:"serious",children:"Serious+"}),t("option",{value:"moderate",children:"Moderate+"})]})]}),t(w,{class:d(T?"border-primary/30 text-primary bg-primary/8":""),onClick:c(()=>l.setShowOverlays(!T),"onClick"),size:"sm",title:"Toggle visual highlights on affected elements",variant:"outline",children:"Overlays"}),U&&h.length>0&&i(W,{children:[t(w,{class:"ml-auto",onClick:c(()=>{const s=new Blob([JSON.stringify(h,void 0,2)],{type:"application/json"}),g=URL.createObjectURL(s),A=document.createElement("a");A.href=g,A.download="a11y-audit.json",A.click(),URL.revokeObjectURL(g)},"onClick"),size:"sm",title:"Export audit results as JSON",variant:"outline",children:"JSON"}),t(w,{onClick:c(()=>{const s=c(y=>`"${y.replaceAll('"','""')}"`,"q"),g=["Rule ID","Severity","Message","Selector","HTML","WCAG Tags"].join(","),A=h.flatMap(y=>y.nodes.map(G=>[s(y.id),s(y.impact),s(y.message),s(G.selector),s(G.html),s(y.wcagTags.join("; "))].join(","))),Q=new Blob([[g,...A].join(`
-`)],{type:"text/csv"}),B=URL.createObjectURL(Q),D=document.createElement("a");D.href=B,D.download="a11y-audit.csv",D.click(),URL.revokeObjectURL(B)},"onClick"),size:"sm",title:"Export audit results as CSV",variant:"outline",children:"CSV"})]})]}),i("div",{class:"flex-1 overflow-y-auto devtools-content-scroll",children:[$&&t(Y,{class:"rounded-none border-x-0 border-t-0",variant:"destructive",children:i(Z,{children:["Scan failed: ",$]})}),!U&&!b&&i("div",{class:"flex flex-col items-center justify-center gap-4 p-8 min-h-48 text-center",children:[t("p",{class:"text-[0.8125rem] text-muted-foreground max-w-sm",children:"Run an accessibility audit using axe-core to detect WCAG violations on this page."}),t(w,{onClick:P,variant:"outline",children:"Start scan"})]}),b&&t("div",{class:"flex items-center justify-center gap-3 p-8 min-h-48",children:t("span",{class:"text-[0.8rem] text-muted-foreground",children:"Scanning for accessibility issues…"})}),U&&!b&&!$&&i("div",{class:"p-5 space-y-4",children:[t("div",{class:"grid grid-cols-4 gap-2",children:E.map(s=>t(ge,{count:K(s),isActive:m===s,onClick:c(()=>f(m===s?void 0:s),"onClick"),severity:s},s))}),R.length===0?i("div",{class:"p-6 text-center border border-border",children:[t("p",{class:"text-[0.8125rem] font-medium text-foreground/70",children:h.length===0?"No violations found!":"No issues match the current filters."}),h.length===0&&t("p",{class:"mt-1 text-[0.7rem] text-muted-foreground",children:"Great — the page passes all rules for the selected standard."})]}):i("section",{children:[i("div",{class:"flex items-center gap-2 mb-2",children:[i("span",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground",children:[t("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"})," ",R.length," issue",R.length===1?"":"s",m?` · ${N[m]} only`:""]}),m&&t(w,{class:"h-auto p-0 text-[0.62rem]",onClick:c(()=>f(void 0),"onClick"),variant:"link",children:"Clear ×"})]}),t("div",{class:"space-y-2",children:R.map(s=>t(pe,{isSelected:S===s.id,issue:s,onClick:c(()=>V(s),"onClick"),onDisable:F},s.id))})]}),r.length>0&&i("div",{class:"flex items-center gap-2 text-[0.65rem] text-muted-foreground/60",children:[i("span",{children:[r.length," rule",r.length===1?"":"s"," disabled this session."]}),t(w,{class:"h-auto p-0 text-[0.62rem]",onClick:c(()=>o([]),"onClick"),variant:"link",children:"Reset"})]})]})]})]})},"A11yApp");var he=Object.defineProperty,j=O((a,e)=>he(a,"name",{value:e,configurable:!0}),"i$1");const fe={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},be={critical:"Crit",minor:"Min",moderate:"Mod",serious:"Ser"},xe=j(a=>{const e=new Date(a).getTime();if(Number.isNaN(e))return"unknown";const n=Math.max(0,Math.floor((Date.now()-e)/1e3));if(n<10)return"just now";if(n<60)return`${n}s ago`;const r=Math.floor(n/60);return r<60?`${r} min ago`:`${Math.floor(r/60)} hr ago`},"formatElapsed"),ve=j(a=>{const[e,n]=k(C(()=>l.getState()),"state");L(()=>l.subscribe(()=>n(l.getState())),[]);const{isScanning:r,issues:o,lastScan:p,showOverlays:M}=e,S=o.length,v={critical:0,minor:0,moderate:0,serious:0};for(const u of o)v[u.impact]=(v[u.impact]??0)+1;const m=j(u=>v[u],"countBy");let f;r?f="Scanning…":p?f="Re-scan":f="Scan";const b=M?"border-primary/30 text-primary bg-primary/8":"border-border text-muted-foreground bg-transparent hover:text-foreground",h=o.length===0?"border-border/50 text-muted-foreground/40 bg-transparent cursor-not-allowed":d("cursor-pointer",b);return i("div",{class:"space-y-3 min-w-[200px]",children:[p?i(W,{children:[i("div",{class:"flex items-baseline gap-2",children:[t("span",{class:d("text-2xl font-bold tabular-nums leading-none",S>0?"text-destructive":"text-success-foreground"),children:S}),i("span",{class:"text-[0.65rem] text-muted-foreground",children:["violation",S===1?"":"s"]})]}),t("div",{class:"grid grid-cols-4 gap-1.5",children:E.map(u=>i("div",{class:"flex flex-col items-center gap-0.5",children:[t("span",{class:d("text-[0.85rem] font-bold tabular-nums leading-none",fe[u]),children:m(u)}),t("span",{class:"text-[0.55rem] uppercase tracking-wide text-muted-foreground/70",children:be[u]})]},u))}),i("p",{class:"text-[0.62rem] text-muted-foreground/50",children:["Scanned ",xe(p)]})]}):i("div",{children:[t("p",{class:"text-[0.72rem] text-muted-foreground",children:"No scan run yet."}),t("p",{class:"text-[0.65rem] text-muted-foreground/50 mt-0.5",children:"Scan this page to detect WCAG violations."})]}),i("div",{class:"flex items-center gap-2 pt-2 border-t border-border/50",children:[t("button",{class:d("flex-1 px-2.5 py-1.5 text-[0.7rem] font-medium border transition-colors cursor-pointer",r?"border-primary/30 text-primary/50 bg-primary/5 cursor-not-allowed":"border-border text-foreground bg-transparent hover:bg-foreground/5"),disabled:r,onClick:j(()=>{l.scan().catch(()=>{})},"onClick"),type:"button",children:f}),t("button",{class:d("px-2.5 py-1.5 text-[0.7rem] border transition-colors",h),disabled:o.length===0,onClick:j(()=>l.setShowOverlays(!M),"onClick"),title:"Toggle visual highlights on affected elements",type:"button",children:"Overlays"})]})]})},"A11yTooltip"),je={component:me,icon:ee,id:"dev-toolbar:a11y",name:"Accessibility",tooltip:ve};export{je as default};
+`,j=["critical","serious","moderate","minor"],K={critical:"rgb(239,68,68)",minor:"rgb(100,116,139)",moderate:"rgb(249,115,22)",serious:"rgb(234,179,8)"},Q={"best-practice":["best-practice"],wcag2a:["wcag2a"],wcag21aa:["wcag2a","wcag2aa","wcag21a","wcag21aa"],wcag22aa:["wcag2a","wcag2aa","wcag21a","wcag21aa","wcag22a","wcag22aa"]},P="__vdt_a11y__",X=()=>{try{const o=sessionStorage.getItem(P);if(o){const e=JSON.parse(o);if(Array.isArray(e.issues))return{issues:e.issues,lastScan:e.lastScan??void 0}}}catch{}return{issues:[],lastScan:void 0}},W=(o,e)=>{const n=o;n.dataset.vdtA11y=e,n.style.setProperty("outline",`2px solid ${K[e]}`,"important"),n.style.setProperty("outline-offset","2px","important")},$=()=>{for(const o of document.querySelectorAll("[data-vdt-a11y]")){const e=o;delete e.dataset.vdtA11y,e.style.removeProperty("outline"),e.style.removeProperty("outline-offset")}},T=o=>{$();for(const e of o)for(const n of e.nodes)try{const r=document.querySelector(n.selector);r&&W(r,e.impact)}catch{}},Z=o=>{const e=o.at(-1);return Array.isArray(e)?e.join(" "):String(e??"")},ee=(o,e)=>{const n=[];for(const r of o)e.includes(r.id)||n.push({helpUrl:r.helpUrl,id:r.id,impact:r.impact??"minor",message:r.help,nodes:r.nodes.map(i=>({html:i.html,selector:Z(i.target)})),wcagTags:r.tags.filter(i=>i.startsWith("wcag")||i==="best-practice")});return n},te=async o=>{const e=await import("axe-core"),n=typeof e.default?.run=="function"?e.default:e;if(typeof n.run!="function")throw new TypeError("axe-core could not be loaded — .run is not available");return n.run(document,{exclude:[["dev-toolbar"]],runOnly:{type:"tag",values:Q[o]}})};class re{listeners=new Set;state;constructor(){const{issues:e,lastScan:n}=X();this.state={isScanning:!1,issues:e,lastScan:n,scanError:void 0,showOverlays:!1,standard:"wcag21aa"}}clearHighlights(){$()}getState(){return this.state}highlightIssue(e){$();let n=!1;for(const r of e.nodes)try{const i=document.querySelector(r.selector);i&&(W(i,e.impact),n||(i.scrollIntoView({behavior:"smooth",block:"center"}),n=!0))}catch{}}async scan(e=[]){if(!this.state.isScanning){this.update({isScanning:!0,scanError:void 0});try{const n=await te(this.state.standard),r=ee(n.violations,e);this.update({isScanning:!1,issues:r,lastScan:new Date().toISOString()}),this.persist(),this.state.showOverlays&&T(r)}catch(n){this.update({isScanning:!1,scanError:n instanceof Error?n.message:String(n)})}}}setShowOverlays(e){this.update({showOverlays:e}),e?T(this.state.issues):$()}setStandard(e){this.update({standard:e})}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}persist(){try{sessionStorage.setItem(P,JSON.stringify({issues:this.state.issues,lastScan:this.state.lastScan}))}catch{}}update(e){this.state={...this.state,...e},this.notify()}}const c=new re,M={critical:"Critical",minor:"Minor",moderate:"Moderate",serious:"Serious"},_={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},se={critical:"bg-destructive/10 border-destructive/30",minor:"bg-foreground/4 border-border",moderate:"bg-warning/10 border-warning/30",serious:"bg-warning/10 border-warning/30"},ne={critical:"bg-destructive",minor:"bg-muted-foreground/50",moderate:"bg-warning",serious:"bg-warning"},ae=({count:o,isActive:e,onClick:n,severity:r})=>a("button",{class:l("flex flex-col items-center gap-1 px-3 py-2.5 border cursor-pointer transition-colors",e?"ring-1 ring-inset ring-primary/40":"hover:bg-foreground/6",se[r]),onClick:n,title:`${e?"Clear":"Filter by"} ${M[r]}`,type:"button",children:[t("span",{class:l("text-xl font-bold tabular-nums leading-none",_[r]),children:o}),t("span",{class:"text-[0.6rem] font-semibold uppercase tracking-wider text-muted-foreground",children:M[r]})]}),ie=({isSelected:o,issue:e,onClick:n,onDisable:r})=>a("div",{class:l("p-3 border cursor-pointer transition-colors",o?"bg-foreground/6 border-primary/30":"border-border hover:bg-foreground/3"),onClick:n,children:[a("div",{class:"flex items-start gap-2 mb-1.5",children:[t("span",{class:l("mt-1 size-2 rounded-full shrink-0",ne[e.impact])}),t("span",{class:"text-[0.75rem] font-semibold text-foreground flex-1 leading-snug",children:e.id}),t("span",{class:l("text-[0.6rem] font-bold uppercase tracking-wide shrink-0",_[e.impact]),children:M[e.impact]})]}),t("p",{class:"text-[0.7rem] text-muted-foreground leading-relaxed mb-2 ml-4",children:e.message}),e.nodes.length>0&&a("div",{class:"mb-2 ml-4 space-y-0.5",children:[e.nodes.slice(0,3).map((i,g)=>t("code",{class:"block text-[0.65rem] text-foreground/70 font-mono bg-foreground/5 px-2 py-1 truncate",children:i.selector},g)),e.nodes.length>3&&a("span",{class:"text-[0.62rem] text-muted-foreground/60",children:["+",e.nodes.length-3," more element",e.nodes.length>4?"s":""]})]}),a("div",{class:"flex items-center gap-2 flex-wrap ml-4",children:[e.wcagTags.slice(0,3).map(i=>t("span",{class:"text-[0.58rem] font-mono uppercase bg-primary/8 text-primary/70 border border-primary/20 px-1.5 py-0.5",children:i},i)),t("span",{class:"flex-1"}),t("a",{class:"text-[0.62rem] text-primary/70 hover:text-primary transition-colors",href:e.helpUrl,onClick:i=>i.stopPropagation(),rel:"noopener noreferrer",target:"_blank",children:"Learn more ↗"}),t("button",{class:"text-[0.62rem] text-muted-foreground/60 hover:text-muted-foreground transition-colors cursor-pointer bg-transparent border-0 p-0",onClick:i=>{i.stopPropagation(),r(e.id)},title:"Disable this rule for current session",type:"button",children:"Disable"})]})]}),oe=o=>{const[e,n]=w(S(()=>c.getState()),"storeState"),[r,i]=w(S([]),"disabledRules"),[g,C]=w(S(void 0),"minSeverity"),[y,b]=w(S(void 0),"activeIssueId"),[m,h]=w(S(void 0),"filterSeverity");U(()=>c.subscribe(()=>n(c.getState())),[]),U(()=>c.clearHighlights.bind(c),[]);const{isScanning:f,issues:p,lastScan:d,scanError:A,showOverlays:R,standard:H}=e,E=d!==void 0||A!==void 0,I=()=>{h(void 0),b(void 0),c.scan(r).catch(()=>{})},J=s=>{y===s.id?(b(void 0),c.clearHighlights(),R&&c.setShowOverlays(!0)):(b(s.id),c.highlightIssue(s))},z=s=>{i(u=>[...u,s])},O=p.filter(s=>!(r.includes(s.id)||m&&s.impact!==m||g&&j.indexOf(s.impact)>j.indexOf(g))),B=s=>p.filter(u=>!r.includes(u.id)&&u.impact===s).length;return a("div",{class:"flex flex-col h-full",children:[a("div",{class:"shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-border bg-foreground/2 flex-wrap",children:[t(v,{class:l(f?"border-primary/30 text-primary/50 bg-primary/5":""),disabled:f,onClick:I,size:"sm",variant:"outline",children:f?"Scanning…":"Scan page"}),a("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Standard",a("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:s=>c.setStandard(s.target.value),style:"color-scheme: dark",value:H,children:[t("option",{value:"wcag21aa",children:"WCAG 2.1 AA"}),t("option",{value:"wcag22aa",children:"WCAG 2.2 AA"}),t("option",{value:"wcag2a",children:"WCAG 2.0 A"}),t("option",{value:"best-practice",children:"Best Practice"})]})]}),a("label",{class:"flex items-center gap-1.5 text-[0.7rem] text-muted-foreground",children:["Min",a("select",{class:"bg-card border border-border text-foreground text-[0.7rem] px-1.5 py-1 cursor-pointer",onChange:s=>{const{value:u}=s.target;C(u||void 0)},style:"color-scheme: dark",value:g??"",children:[t("option",{value:"",children:"All"}),t("option",{value:"critical",children:"Critical only"}),t("option",{value:"serious",children:"Serious+"}),t("option",{value:"moderate",children:"Moderate+"})]})]}),t(v,{class:l(R?"border-primary/30 text-primary bg-primary/8":""),onClick:()=>c.setShowOverlays(!R),size:"sm",title:"Toggle visual highlights on affected elements",variant:"outline",children:"Overlays"}),E&&p.length>0&&a(G,{children:[t(v,{class:"ml-auto",onClick:()=>{const s=new Blob([JSON.stringify(p,void 0,2)],{type:"application/json"}),u=URL.createObjectURL(s),k=document.createElement("a");k.href=u,k.download="a11y-audit.json",k.click(),URL.revokeObjectURL(u)},size:"sm",title:"Export audit results as JSON",variant:"outline",children:"JSON"}),t(v,{onClick:()=>{const s=x=>`"${x.replaceAll('"','""')}"`,u=["Rule ID","Severity","Message","Selector","HTML","WCAG Tags"].join(","),k=p.flatMap(x=>x.nodes.map(D=>[s(x.id),s(x.impact),s(x.message),s(D.selector),s(D.html),s(x.wcagTags.join("; "))].join(","))),q=new Blob([[u,...k].join(`
+`)],{type:"text/csv"}),L=URL.createObjectURL(q),N=document.createElement("a");N.href=L,N.download="a11y-audit.csv",N.click(),URL.revokeObjectURL(L)},size:"sm",title:"Export audit results as CSV",variant:"outline",children:"CSV"})]})]}),a("div",{class:"flex-1 overflow-y-auto devtools-content-scroll",children:[A&&t(V,{class:"rounded-none border-x-0 border-t-0",variant:"destructive",children:a(F,{children:["Scan failed: ",A]})}),!E&&!f&&a("div",{class:"flex flex-col items-center justify-center gap-4 p-8 min-h-48 text-center",children:[t("p",{class:"text-[0.8125rem] text-muted-foreground max-w-sm",children:"Run an accessibility audit using axe-core to detect WCAG violations on this page."}),t(v,{onClick:I,variant:"outline",children:"Start scan"})]}),f&&t("div",{class:"flex items-center justify-center gap-3 p-8 min-h-48",children:t("span",{class:"text-[0.8rem] text-muted-foreground",children:"Scanning for accessibility issues…"})}),E&&!f&&!A&&a("div",{class:"p-5 space-y-4",children:[t("div",{class:"grid grid-cols-4 gap-2",children:j.map(s=>t(ae,{count:B(s),isActive:m===s,onClick:()=>h(m===s?void 0:s),severity:s},s))}),O.length===0?a("div",{class:"p-6 text-center border border-border",children:[t("p",{class:"text-[0.8125rem] font-medium text-foreground/70",children:p.length===0?"No violations found!":"No issues match the current filters."}),p.length===0&&t("p",{class:"mt-1 text-[0.7rem] text-muted-foreground",children:"Great — the page passes all rules for the selected standard."})]}):a("section",{children:[a("div",{class:"flex items-center gap-2 mb-2",children:[a("span",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground",children:[t("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"})," ",O.length," issue",O.length===1?"":"s",m?` · ${M[m]} only`:""]}),m&&t(v,{class:"h-auto p-0 text-[0.62rem]",onClick:()=>h(void 0),variant:"link",children:"Clear ×"})]}),t("div",{class:"space-y-2",children:O.map(s=>t(ie,{isSelected:y===s.id,issue:s,onClick:()=>J(s),onDisable:z},s.id))})]}),r.length>0&&a("div",{class:"flex items-center gap-2 text-[0.65rem] text-muted-foreground/60",children:[a("span",{children:[r.length," rule",r.length===1?"":"s"," disabled this session."]}),t(v,{class:"h-auto p-0 text-[0.62rem]",onClick:()=>i([]),variant:"link",children:"Reset"})]})]})]})]})},ce={critical:"text-destructive",minor:"text-muted-foreground",moderate:"text-warning-foreground",serious:"text-warning-foreground"},le={critical:"Crit",minor:"Min",moderate:"Mod",serious:"Ser"},de=o=>{const e=new Date(o).getTime();if(Number.isNaN(e))return"unknown";const n=Math.max(0,Math.floor((Date.now()-e)/1e3));if(n<10)return"just now";if(n<60)return`${n}s ago`;const r=Math.floor(n/60);return r<60?`${r} min ago`:`${Math.floor(r/60)} hr ago`},ue=o=>{const[e,n]=w(S(()=>c.getState()),"state");U(()=>c.subscribe(()=>n(c.getState())),[]);const{isScanning:r,issues:i,lastScan:g,showOverlays:C}=e,y=i.length,b={critical:0,minor:0,moderate:0,serious:0};for(const d of i)b[d.impact]=(b[d.impact]??0)+1;const m=d=>b[d];let h;r?h="Scanning…":g?h="Re-scan":h="Scan";const f=C?"border-primary/30 text-primary bg-primary/8":"border-border text-muted-foreground bg-transparent hover:text-foreground",p=i.length===0?"border-border/50 text-muted-foreground/40 bg-transparent cursor-not-allowed":l("cursor-pointer",f);return a("div",{class:"space-y-3 min-w-[200px]",children:[g?a(G,{children:[a("div",{class:"flex items-baseline gap-2",children:[t("span",{class:l("text-2xl font-bold tabular-nums leading-none",y>0?"text-destructive":"text-success-foreground"),children:y}),a("span",{class:"text-[0.65rem] text-muted-foreground",children:["violation",y===1?"":"s"]})]}),t("div",{class:"grid grid-cols-4 gap-1.5",children:j.map(d=>a("div",{class:"flex flex-col items-center gap-0.5",children:[t("span",{class:l("text-[0.85rem] font-bold tabular-nums leading-none",ce[d]),children:m(d)}),t("span",{class:"text-[0.55rem] uppercase tracking-wide text-muted-foreground/70",children:le[d]})]},d))}),a("p",{class:"text-[0.62rem] text-muted-foreground/50",children:["Scanned ",de(g)]})]}):a("div",{children:[t("p",{class:"text-[0.72rem] text-muted-foreground",children:"No scan run yet."}),t("p",{class:"text-[0.65rem] text-muted-foreground/50 mt-0.5",children:"Scan this page to detect WCAG violations."})]}),a("div",{class:"flex items-center gap-2 pt-2 border-t border-border/50",children:[t("button",{class:l("flex-1 px-2.5 py-1.5 text-[0.7rem] font-medium border transition-colors cursor-pointer",r?"border-primary/30 text-primary/50 bg-primary/5 cursor-not-allowed":"border-border text-foreground bg-transparent hover:bg-foreground/5"),disabled:r,onClick:()=>{c.scan().catch(()=>{})},type:"button",children:h}),t("button",{class:l("px-2.5 py-1.5 text-[0.7rem] border transition-colors",p),disabled:i.length===0,onClick:()=>c.setShowOverlays(!C),title:"Toggle visual highlights on affected elements",type:"button",children:"Overlays"})]})]})},xe={component:oe,icon:Y,id:"dev-toolbar:a11y",name:"Accessibility",tooltip:ue};export{xe as default};

package/dist/apps/annotations/index.d.ts

@@ -1,3 +1,4 @@
-import type { DevToolbarApp } from "../../types/app.d.ts";
+import { D as DevToolbarApp } from "../../packem_shared/app.d-SmKEDxsI.js";
+import 'preact';
 declare const annotationsApp: DevToolbarApp;
-export default annotationsApp;
+export { annotationsApp as default };

package/dist/apps/annotations/index.js

@@ -1,4 +1,4 @@
-var j=Object.defineProperty;var z=(t,s)=>j(t,"name",{value:s,configurable:!0});import{addHookName as c}from"preact/devtools";import{clsx as h}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as p,useCallback as S,useEffect as q}from"preact/hooks";import{s as Q,M as H,l as K}from"../../packem_shared/annotation-settings-Bv0TH4WI.js";import{jsx as e,jsxs as r}from"preact/jsx-runtime";import g from"../../packem_shared/Button-Bkx66Co7.js";import U from"../../packem_shared/Textarea-Yfg3dLZi.js";const V=`<!-- @license lucide-static v1.7.0 - ISC -->
+import{addHookName as d}from"preact/devtools";import{clsx as p}from"../../packem_shared/clsx-CtZWcPHt.js";import{useState as c,useCallback as C,useEffect as O}from"preact/hooks";import{l as P,M as T,s as j}from"../../packem_shared/annotation-settings-DlLZO5Zp.js";import{jsx as e,jsxs as r}from"preact/jsx-runtime";import u from"../../packem_shared/Button-CAKvtfij.js";import Q from"../../packem_shared/Textarea-DP9gpte-.js";const U=`<!-- @license lucide-static v1.17.0 - ISC -->
 <svg
   class="lucide lucide-message-square-plus"
   xmlns="http://www.w3.org/2000/svg"
@@ -15,4 +15,4 @@ var j=Object.defineProperty;var z=(t,s)=>j(t,"name",{value:s,configurable:!0});i
   <path d="M12 8v6" />
   <path d="M9 11h6" />
 </svg>
-`;var G=Object.defineProperty,a=z((t,s)=>G(t,"name",{value:s,configurable:!0}),"o");const I={approve:"Approve",change:"Change",fix:"Fix",question:"Question"},M={approve:"bg-green-500/20 text-green-400 border-green-500/30",change:"bg-yellow-500/20 text-yellow-400 border-yellow-500/30",fix:"bg-destructive/20 text-destructive border-destructive/30",question:"bg-blue-500/20 text-blue-400 border-blue-500/30"},F={blocking:"Blocking",important:"Important",suggestion:"Suggestion"},$={blocking:"text-destructive",important:"text-warning-foreground",suggestion:"text-muted-foreground"},A={acknowledged:"Acknowledged",dismissed:"Dismissed",pending:"Pending",resolved:"Resolved"},Y=a(({active:t,counts:s,onFilter:i})=>e("div",{class:"flex gap-1.5",children:["all","pending","acknowledged","resolved","dismissed"].map(n=>r("button",{class:h("px-2.5 py-1 text-[0.65rem] font-medium border cursor-pointer transition-colors",t===n?"bg-primary/10 border-primary/30 text-primary":"bg-foreground/3 border-border text-muted-foreground hover:bg-foreground/6"),onClick:a(()=>i(n),"onClick"),type:"button",children:[n==="all"?"All":A[n]," (",s[n],")"]},n))}),"StatusFilters"),_=a(({annotation:t,isSelected:s,onClick:i,onDelete:n,onDismiss:d,onResolve:m})=>r("div",{class:h("p-3 border cursor-pointer transition-colors",s?"bg-foreground/6 border-primary/30":"border-border hover:bg-foreground/3"),onClick:i,children:[r("div",{class:"flex items-start gap-2 mb-1.5",children:[e("span",{class:h("text-[0.6rem] font-bold uppercase px-1.5 py-0.5 border shrink-0",M[t.intent]),children:I[t.intent]}),e("span",{class:h("text-[0.6rem] font-semibold uppercase tracking-wide shrink-0",$[t.severity]),children:F[t.severity]}),e("span",{class:"flex-1"}),t.resolvedBy&&r("span",{class:"text-[0.58rem] text-muted-foreground/60",children:["by ",t.resolvedBy]}),e("span",{class:"text-[0.58rem] text-muted-foreground/60",children:A[t.status]})]}),e("p",{class:"text-[0.7rem] text-foreground leading-relaxed mb-1.5 line-clamp-2",children:t.comment}),e("div",{class:"flex items-center gap-2 mb-1.5",children:r("code",{class:"text-[0.62rem] text-foreground/60 font-mono bg-foreground/5 px-1.5 py-0.5 truncate",children:[t.elementTag,t.elementPath?` · ${t.elementPath}`:""]})}),t.source&&e("div",{class:"mb-1.5",children:e("code",{class:"text-[0.6rem] text-primary/60 font-mono",children:t.source})}),e("div",{class:"text-[0.58rem] text-muted-foreground/50 truncate mb-2",children:t.url}),t.thread&&t.thread.length>0&&r("div",{class:"text-[0.6rem] text-muted-foreground/60 mb-2",children:[t.thread.length," message",t.thread.length===1?"":"s"," in thread"]}),t.status==="pending"&&r("div",{class:"flex items-center gap-1.5",onClick:a(u=>u.stopPropagation(),"onClick"),children:[e(g,{class:"h-auto py-0.5 px-2 text-[0.6rem]",onClick:m,size:"sm",variant:"outline",children:"Resolve"}),e(g,{class:"h-auto py-0.5 px-2 text-[0.6rem]",onClick:d,size:"sm",variant:"outline",children:"Dismiss"}),e("span",{class:"flex-1"}),e(g,{class:"h-auto py-0.5 px-2 text-[0.6rem] text-destructive hover:text-destructive",onClick:n,size:"sm",variant:"ghost",children:"Delete"})]})]}),"AnnotationCard"),J=a(({annotation:t,helpers:s,onBack:i,onRefresh:n})=>{const[d,m]=c(p(""),"message"),u=S(async()=>{const l=d.trim();l&&(await s.rpc.updateAnnotation?.(t.id,{threadMessage:{content:l,role:"human",timestamp:new Date().toISOString()}}),m(""),n())},[t.id,s,d,n]);return r("div",{class:"p-4 space-y-3",children:[e(g,{class:"h-auto py-0.5 px-2 text-[0.65rem]",onClick:i,size:"sm",variant:"ghost",children:"← Back"}),r("div",{class:"flex items-center gap-2 flex-wrap",children:[e("span",{class:h("text-[0.65rem] font-bold uppercase px-2 py-0.5 border",M[t.intent]),children:I[t.intent]}),e("span",{class:h("text-[0.65rem] font-semibold",$[t.severity]),children:F[t.severity]}),e("span",{class:"text-[0.6rem] text-muted-foreground ml-auto",children:A[t.status]})]}),e("div",{class:"text-[0.75rem] text-foreground leading-relaxed border border-border p-3",children:t.comment}),r("div",{class:"space-y-1 text-[0.65rem]",children:[r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"Element"}),r("code",{class:"text-foreground/70 font-mono",children:[t.elementTag,t.cssClasses?` .${t.cssClasses}`:""]})]}),t.source&&r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"Source"}),e("code",{class:"text-primary/70 font-mono",children:t.source})]}),r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"URL"}),e("span",{class:"text-foreground/60 truncate",children:t.url})]}),r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"Created"}),e("span",{class:"text-foreground/60",children:new Date(t.createdAt).toLocaleString()})]})]}),r("div",{children:[r("div",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground mb-2",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"// "}),"Thread (",t.thread?.length??0,")"]}),t.thread&&t.thread.length>0&&e("div",{class:"space-y-2 mb-3",children:t.thread.map(l=>r("div",{class:"border border-border p-2",children:[r("div",{class:"flex items-center gap-2 mb-1",children:[e("span",{class:"text-[0.62rem] font-semibold text-primary/70",children:l.role}),e("span",{class:"text-[0.55rem] text-muted-foreground/50",children:new Date(l.timestamp).toLocaleString()})]}),e("p",{class:"text-[0.68rem] text-foreground/80 leading-relaxed whitespace-pre-wrap",children:l.content})]},`${l.role}-${l.timestamp}`))}),r("div",{class:"space-y-2",children:[e(U,{class:"text-[0.7rem] min-h-[60px]",onChange:a(l=>m(l.target.value),"onChange"),placeholder:"Add a message to the thread...",value:d}),e(g,{class:"text-[0.65rem]",disabled:!d.trim(),onClick:u,size:"sm",variant:"outline",children:"Send"})]})]})]})},"AnnotationDetail"),W=a(({onChange:t,settings:s})=>{const i=a(n=>{const d={...s,...n};Q(d),t(d)},"update");return r("div",{class:"space-y-3 p-4 border-t border-border",children:[r("div",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"// "}),"Settings"]}),r("label",{class:"flex items-center gap-2 text-[0.7rem] text-foreground",children:[e("span",{class:"text-muted-foreground w-24 shrink-0",children:"Output Detail"}),r("select",{class:"flex-1 bg-card border border-border text-foreground text-[0.65rem] px-1.5 py-1 cursor-pointer",onChange:a(n=>i({outputDetail:n.target.value}),"onChange"),style:"color-scheme: dark",value:s.outputDetail,children:[e("option",{value:"compact",children:"Compact"}),e("option",{value:"standard",children:"Standard"}),e("option",{value:"detailed",children:"Detailed"}),e("option",{value:"forensic",children:"Forensic"})]})]}),r("div",{class:"flex items-center gap-2 text-[0.7rem]",children:[e("span",{class:"text-muted-foreground w-24 shrink-0",children:"Marker Color"}),e("div",{class:"flex gap-1.5",children:H.map(n=>e("button",{class:h("w-5 h-5 rounded-full border-2 cursor-pointer p-0 transition-all",n.name===s.markerColorName?"border-foreground scale-110":"border-transparent hover:scale-110"),onClick:a(()=>i({markerColorName:n.name}),"onClick"),style:{background:n.bg},title:n.label,type:"button"},n.name))})]}),r("label",{class:"flex items-center gap-2 text-[0.7rem] text-foreground",children:[e("span",{class:"text-muted-foreground w-24 shrink-0",children:"Marker Click"}),r("select",{class:"flex-1 bg-card border border-border text-foreground text-[0.65rem] px-1.5 py-1 cursor-pointer",onChange:a(n=>i({markerClickBehavior:n.target.value}),"onChange"),style:"color-scheme: dark",value:s.markerClickBehavior,children:[e("option",{value:"detail",children:"Show Detail"}),e("option",{value:"edit",children:"Edit"}),e("option",{value:"delete",children:"Delete"})]})]}),r("label",{class:"flex items-center gap-2 text-[0.7rem] text-foreground cursor-pointer",children:[e("input",{checked:s.blockInteractions,class:"cursor-pointer",onChange:a(n=>i({blockInteractions:n.target.checked}),"onChange"),type:"checkbox"}),e("span",{children:"Block page interactions while inspecting"})]})]})},"AnnotationSettingsPanel"),X=a(({helpers:t})=>{const[s,i]=c(p([]),"annotations"),[n,d]=c(p(!1),"loading"),[m,u]=c(p(),"error"),[l,E]=c(p("pending"),"filterStatus"),[b,P]=c(p("all"),"filterIntent"),[k,D]=c(p(),"selectedId"),[y,L]=c(p(!1),"showSettings"),[N,O]=c(p(()=>K()),"settings"),x=S(async()=>{d(!0),u(void 0);try{const o=await t.rpc.getAnnotations?.();i(o??[])}catch(o){u(o instanceof Error?o.message:String(o))}finally{d(!1)}},[t]);q(()=>{x().catch(()=>{})},[x]);const R=s.filter(o=>!(l!=="all"&&o.status!==l||b!=="all"&&o.intent!==b)),f=a(o=>s.filter(v=>v.status===o).length,"countByStatus"),T={acknowledged:f("acknowledged"),all:s.length,dismissed:f("dismissed"),pending:f("pending"),resolved:f("resolved")},B=k?s.find(o=>o.id===k):void 0,C=S(async(o,v)=>{try{await(v==="delete"?t.rpc.deleteAnnotation?.(o):t.rpc.updateAnnotation?.(o,{status:v==="resolve"?"resolved":"dismissed"})),await x()}catch(w){console.error(`[annotations] ${v} failed for ${o}:`,w),u(w instanceof Error?w.message:`Failed to ${v} annotation`)}},[t,x]);return B?e(J,{annotation:B,helpers:t,onBack:a(()=>D(void 0),"onBack"),onRefresh:a(()=>x().catch(()=>{}),"onRefresh")}):r("div",{class:"flex flex-col h-full",children:[r("div",{class:"shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-border bg-foreground/2 flex-wrap",children:[e(g,{disabled:n,onClick:a(()=>x().catch(()=>{}),"onClick"),size:"sm",variant:"outline",children:n?"Loading…":"Refresh"}),e(g,{class:h("text-[0.65rem]",y&&"bg-primary/10 text-primary"),onClick:a(()=>L(!y),"onClick"),size:"sm",variant:"ghost",children:"Settings"}),e("span",{class:"flex-1"}),r("select",{class:"bg-card border border-border text-foreground text-[0.65rem] px-1.5 py-1 cursor-pointer",onChange:a(o=>P(o.target.value),"onChange"),style:"color-scheme: dark",value:b,children:[e("option",{value:"all",children:"All intents"}),e("option",{value:"fix",children:"Fix"}),e("option",{value:"change",children:"Change"}),e("option",{value:"question",children:"Question"}),e("option",{value:"approve",children:"Approve"})]})]}),r("div",{class:"flex-1 overflow-y-auto devtools-content-scroll",children:[m&&e("div",{class:"p-3 text-[0.7rem] text-destructive bg-destructive/10 border-b border-destructive/20",children:m}),r("div",{class:"p-4 space-y-3",children:[e(Y,{active:l,counts:T,onFilter:E}),R.length===0?r("div",{class:"p-6 text-center border border-border",children:[e("p",{class:"text-[0.8125rem] font-medium text-foreground/70",children:s.length===0?"No annotations yet":"No annotations match filters"}),e("p",{class:"mt-1 text-[0.7rem] text-muted-foreground",children:s.length===0?'Use the Inspector to click an element and select "Annotate".':"Try changing the status or intent filter."})]}):e("div",{class:"space-y-2",children:R.map(o=>e(_,{annotation:o,isSelected:k===o.id,onClick:a(()=>D(o.id),"onClick"),onDelete:a(()=>C(o.id,"delete").catch(()=>{}),"onDelete"),onDismiss:a(()=>C(o.id,"dismiss").catch(()=>{}),"onDismiss"),onResolve:a(()=>C(o.id,"resolve").catch(()=>{}),"onResolve")},o.id))})]})]}),y&&e(W,{onChange:O,settings:N})]})},"AnnotationsApp"),le={component:X,icon:V,id:"dev-toolbar:annotations",name:"Annotations"};export{le as default};
+`,B={approve:"Approve",change:"Change",fix:"Fix",question:"Question"},I={approve:"bg-green-500/20 text-green-400 border-green-500/30",change:"bg-yellow-500/20 text-yellow-400 border-yellow-500/30",fix:"bg-destructive/20 text-destructive border-destructive/30",question:"bg-blue-500/20 text-blue-400 border-blue-500/30"},M={blocking:"Blocking",important:"Important",suggestion:"Suggestion"},z={blocking:"text-destructive",important:"text-warning-foreground",suggestion:"text-muted-foreground"},S={acknowledged:"Acknowledged",dismissed:"Dismissed",pending:"Pending",resolved:"Resolved"},H=({active:t,counts:o,onFilter:l})=>e("div",{class:"flex gap-1.5",children:["all","pending","acknowledged","resolved","dismissed"].map(n=>r("button",{class:p("px-2.5 py-1 text-[0.65rem] font-medium border cursor-pointer transition-colors",t===n?"bg-primary/10 border-primary/30 text-primary":"bg-foreground/3 border-border text-muted-foreground hover:bg-foreground/6"),onClick:()=>l(n),type:"button",children:[n==="all"?"All":S[n]," (",o[n],")"]},n))}),V=({annotation:t,isSelected:o,onClick:l,onDelete:n,onDismiss:i,onResolve:h})=>r("div",{class:p("p-3 border cursor-pointer transition-colors",o?"bg-foreground/6 border-primary/30":"border-border hover:bg-foreground/3"),onClick:l,children:[r("div",{class:"flex items-start gap-2 mb-1.5",children:[e("span",{class:p("text-[0.6rem] font-bold uppercase px-1.5 py-0.5 border shrink-0",I[t.intent]),children:B[t.intent]}),e("span",{class:p("text-[0.6rem] font-semibold uppercase tracking-wide shrink-0",z[t.severity]),children:M[t.severity]}),e("span",{class:"flex-1"}),t.resolvedBy&&r("span",{class:"text-[0.58rem] text-muted-foreground/60",children:["by ",t.resolvedBy]}),e("span",{class:"text-[0.58rem] text-muted-foreground/60",children:S[t.status]})]}),e("p",{class:"text-[0.7rem] text-foreground leading-relaxed mb-1.5 line-clamp-2",children:t.comment}),e("div",{class:"flex items-center gap-2 mb-1.5",children:r("code",{class:"text-[0.62rem] text-foreground/60 font-mono bg-foreground/5 px-1.5 py-0.5 truncate",children:[t.elementTag,t.elementPath?` · ${t.elementPath}`:""]})}),t.source&&e("div",{class:"mb-1.5",children:e("code",{class:"text-[0.6rem] text-primary/60 font-mono",children:t.source})}),e("div",{class:"text-[0.58rem] text-muted-foreground/50 truncate mb-2",children:t.url}),t.thread&&t.thread.length>0&&r("div",{class:"text-[0.6rem] text-muted-foreground/60 mb-2",children:[t.thread.length," message",t.thread.length===1?"":"s"," in thread"]}),t.status==="pending"&&r("div",{class:"flex items-center gap-1.5",onClick:m=>m.stopPropagation(),children:[e(u,{class:"h-auto py-0.5 px-2 text-[0.6rem]",onClick:h,size:"sm",variant:"outline",children:"Resolve"}),e(u,{class:"h-auto py-0.5 px-2 text-[0.6rem]",onClick:i,size:"sm",variant:"outline",children:"Dismiss"}),e("span",{class:"flex-1"}),e(u,{class:"h-auto py-0.5 px-2 text-[0.6rem] text-destructive hover:text-destructive",onClick:n,size:"sm",variant:"ghost",children:"Delete"})]})]}),K=({annotation:t,helpers:o,onBack:l,onRefresh:n})=>{const[i,h]=d(c(""),"message"),m=C(async()=>{const a=i.trim();a&&(await o.rpc.updateAnnotation?.(t.id,{threadMessage:{content:a,role:"human",timestamp:new Date().toISOString()}}),h(""),n())},[t.id,o,i,n]);return r("div",{class:"p-4 space-y-3",children:[e(u,{class:"h-auto py-0.5 px-2 text-[0.65rem]",onClick:l,size:"sm",variant:"ghost",children:"← Back"}),r("div",{class:"flex items-center gap-2 flex-wrap",children:[e("span",{class:p("text-[0.65rem] font-bold uppercase px-2 py-0.5 border",I[t.intent]),children:B[t.intent]}),e("span",{class:p("text-[0.65rem] font-semibold",z[t.severity]),children:M[t.severity]}),e("span",{class:"text-[0.6rem] text-muted-foreground ml-auto",children:S[t.status]})]}),e("div",{class:"text-[0.75rem] text-foreground leading-relaxed border border-border p-3",children:t.comment}),r("div",{class:"space-y-1 text-[0.65rem]",children:[r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"Element"}),r("code",{class:"text-foreground/70 font-mono",children:[t.elementTag,t.cssClasses?` .${t.cssClasses}`:""]})]}),t.source&&r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"Source"}),e("code",{class:"text-primary/70 font-mono",children:t.source})]}),r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"URL"}),e("span",{class:"text-foreground/60 truncate",children:t.url})]}),r("div",{class:"flex gap-2",children:[e("span",{class:"text-muted-foreground w-16 shrink-0",children:"Created"}),e("span",{class:"text-foreground/60",children:new Date(t.createdAt).toLocaleString()})]})]}),r("div",{children:[r("div",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground mb-2",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"// "}),"Thread (",t.thread?.length??0,")"]}),t.thread&&t.thread.length>0&&e("div",{class:"space-y-2 mb-3",children:t.thread.map(a=>r("div",{class:"border border-border p-2",children:[r("div",{class:"flex items-center gap-2 mb-1",children:[e("span",{class:"text-[0.62rem] font-semibold text-primary/70",children:a.role}),e("span",{class:"text-[0.55rem] text-muted-foreground/50",children:new Date(a.timestamp).toLocaleString()})]}),e("p",{class:"text-[0.68rem] text-foreground/80 leading-relaxed whitespace-pre-wrap",children:a.content})]},`${a.role}-${a.timestamp}`))}),r("div",{class:"space-y-2",children:[e(Q,{class:"text-[0.7rem] min-h-[60px]",onChange:a=>h(a.target.value),placeholder:"Add a message to the thread...",value:i}),e(u,{class:"text-[0.65rem]",disabled:!i.trim(),onClick:m,size:"sm",variant:"outline",children:"Send"})]})]})]})},Y=({onChange:t,settings:o})=>{const l=n=>{const i={...o,...n};j(i),t(i)};return r("div",{class:"space-y-3 p-4 border-t border-border",children:[r("div",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"// "}),"Settings"]}),r("label",{class:"flex items-center gap-2 text-[0.7rem] text-foreground",children:[e("span",{class:"text-muted-foreground w-24 shrink-0",children:"Output Detail"}),r("select",{class:"flex-1 bg-card border border-border text-foreground text-[0.65rem] px-1.5 py-1 cursor-pointer",onChange:n=>l({outputDetail:n.target.value}),style:"color-scheme: dark",value:o.outputDetail,children:[e("option",{value:"compact",children:"Compact"}),e("option",{value:"standard",children:"Standard"}),e("option",{value:"detailed",children:"Detailed"}),e("option",{value:"forensic",children:"Forensic"})]})]}),r("div",{class:"flex items-center gap-2 text-[0.7rem]",children:[e("span",{class:"text-muted-foreground w-24 shrink-0",children:"Marker Color"}),e("div",{class:"flex gap-1.5",children:T.map(n=>e("button",{class:p("w-5 h-5 rounded-full border-2 cursor-pointer p-0 transition-all",n.name===o.markerColorName?"border-foreground scale-110":"border-transparent hover:scale-110"),onClick:()=>l({markerColorName:n.name}),style:{background:n.bg},title:n.label,type:"button"},n.name))})]}),r("label",{class:"flex items-center gap-2 text-[0.7rem] text-foreground",children:[e("span",{class:"text-muted-foreground w-24 shrink-0",children:"Marker Click"}),r("select",{class:"flex-1 bg-card border border-border text-foreground text-[0.65rem] px-1.5 py-1 cursor-pointer",onChange:n=>l({markerClickBehavior:n.target.value}),style:"color-scheme: dark",value:o.markerClickBehavior,children:[e("option",{value:"detail",children:"Show Detail"}),e("option",{value:"edit",children:"Edit"}),e("option",{value:"delete",children:"Delete"})]})]}),r("label",{class:"flex items-center gap-2 text-[0.7rem] text-foreground cursor-pointer",children:[e("input",{checked:o.blockInteractions,class:"cursor-pointer",onChange:n=>l({blockInteractions:n.target.checked}),type:"checkbox"}),e("span",{children:"Block page interactions while inspecting"})]})]})},_=({helpers:t})=>{const[o,l]=d(c([]),"annotations"),[n,i]=d(c(!1),"loading"),[h,m]=d(c(),"error"),[a,E]=d(c("pending"),"filterStatus"),[v,F]=d(c("all"),"filterIntent"),[b,D]=d(c(),"selectedId"),[k,$]=d(c(!1),"showSettings"),[L,N]=d(c(()=>P()),"settings"),g=C(async()=>{i(!0),m(void 0);try{const s=await t.rpc.getAnnotations?.();l(s??[])}catch(s){m(s instanceof Error?s.message:String(s))}finally{i(!1)}},[t]);O(()=>{g().catch(()=>{})},[g]);const A=o.filter(s=>!(a!=="all"&&s.status!==a||v!=="all"&&s.intent!==v)),f=s=>o.filter(x=>x.status===s).length,q={acknowledged:f("acknowledged"),all:o.length,dismissed:f("dismissed"),pending:f("pending"),resolved:f("resolved")},R=b?o.find(s=>s.id===b):void 0,y=C(async(s,x)=>{try{await(x==="delete"?t.rpc.deleteAnnotation?.(s):t.rpc.updateAnnotation?.(s,{status:x==="resolve"?"resolved":"dismissed"})),await g()}catch(w){console.error(`[annotations] ${x} failed for ${s}:`,w),m(w instanceof Error?w.message:`Failed to ${x} annotation`)}},[t,g]);return R?e(K,{annotation:R,helpers:t,onBack:()=>D(void 0),onRefresh:()=>g().catch(()=>{})}):r("div",{class:"flex flex-col h-full",children:[r("div",{class:"shrink-0 flex items-center gap-2 px-4 py-2.5 border-b border-border bg-foreground/2 flex-wrap",children:[e(u,{disabled:n,onClick:()=>g().catch(()=>{}),size:"sm",variant:"outline",children:n?"Loading…":"Refresh"}),e(u,{class:p("text-[0.65rem]",k&&"bg-primary/10 text-primary"),onClick:()=>$(!k),size:"sm",variant:"ghost",children:"Settings"}),e("span",{class:"flex-1"}),r("select",{class:"bg-card border border-border text-foreground text-[0.65rem] px-1.5 py-1 cursor-pointer",onChange:s=>F(s.target.value),style:"color-scheme: dark",value:v,children:[e("option",{value:"all",children:"All intents"}),e("option",{value:"fix",children:"Fix"}),e("option",{value:"change",children:"Change"}),e("option",{value:"question",children:"Question"}),e("option",{value:"approve",children:"Approve"})]})]}),r("div",{class:"flex-1 overflow-y-auto devtools-content-scroll",children:[h&&e("div",{class:"p-3 text-[0.7rem] text-destructive bg-destructive/10 border-b border-destructive/20",children:h}),r("div",{class:"p-4 space-y-3",children:[e(H,{active:a,counts:q,onFilter:E}),A.length===0?r("div",{class:"p-6 text-center border border-border",children:[e("p",{class:"text-[0.8125rem] font-medium text-foreground/70",children:o.length===0?"No annotations yet":"No annotations match filters"}),e("p",{class:"mt-1 text-[0.7rem] text-muted-foreground",children:o.length===0?'Use the Inspector to click an element and select "Annotate".':"Try changing the status or intent filter."})]}):e("div",{class:"space-y-2",children:A.map(s=>e(V,{annotation:s,isSelected:b===s.id,onClick:()=>D(s.id),onDelete:()=>y(s.id,"delete").catch(()=>{}),onDismiss:()=>y(s.id,"dismiss").catch(()=>{}),onResolve:()=>y(s.id,"resolve").catch(()=>{})},s.id))})]})]}),k&&e(Y,{onChange:N,settings:L})]})},re={component:_,icon:U,id:"dev-toolbar:annotations",name:"Annotations"};export{re as default};

package/dist/apps/assets/index.d.ts

@@ -1,3 +1,4 @@
-import type { DevToolbarApp } from "../../types/app.d.ts";
+import { D as DevToolbarApp } from "../../packem_shared/app.d-SmKEDxsI.js";
+import 'preact';
 declare const assetsApp: DevToolbarApp;
-export default assetsApp;
+export { assetsApp as default };

package/dist/apps/assets/index.js

@@ -1,4 +1,4 @@
-var B=Object.defineProperty;var P=(t,i)=>B(t,"name",{value:i,configurable:!0});import{addHookName as a}from"preact/devtools";import{clsx as u}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as s,useRef as N,useEffect as C}from"preact/hooks";import{jsx as e,jsxs as l}from"preact/jsx-runtime";import c from"../../packem_shared/Button-Bkx66Co7.js";import E from"../../packem_shared/Input-Cs6aduTi.js";const H=`<!-- @license lucide-static v1.7.0 - ISC -->
+import{addHookName as n}from"preact/devtools";import{clsx as c}from"../../packem_shared/clsx-CtZWcPHt.js";import{useState as a,useRef as N,useEffect as k}from"preact/hooks";import{jsxs as l,jsx as e}from"preact/jsx-runtime";import d from"../../packem_shared/Button-CAKvtfij.js";import R from"../../packem_shared/Input-Dc1WiT01.js";const H=`<!-- @license lucide-static v1.17.0 - ISC -->
 <svg
   class="lucide lucide-folder-open"
   xmlns="http://www.w3.org/2000/svg"
@@ -13,4 +13,4 @@ var B=Object.defineProperty;var P=(t,i)=>B(t,"name",{value:i,configurable:!0});i
 >
   <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>
-`;var O=Object.defineProperty,o=P((t,i)=>O(t,"name",{value:i,configurable:!0}),"o");const j=o(t=>!Number.isFinite(t)||t<0?"–":t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`,"formatSize"),A=o(t=>t.startsWith("/")&&!t.includes(":")?t:"#","safePublicPath"),M=[{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"}],D={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"},z=o(({type:t})=>e("span",{class:u("inline-flex px-1.5 py-0.5 text-[0.6rem] font-mono font-bold uppercase border",D[t]),children:t}),"TypeBadge"),V=o(({asset:t})=>{const i=A(t.publicPath);if(i!=="#"){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:o(p=>{p.target.style.display="none"},"onError"),src:i})});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:i})});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:i})})}},"AssetPreview"),K=o(({helpers:t})=>{const[i,p]=a(s([]),"assets"),[F,f]=a(s(!0),"loading"),[g,v]=a(s(void 0),"error"),[y,T]=a(s(""),"search"),[d,S]=a(s("all"),"typeFilter"),[n,b]=a(s(void 0),"selected"),[I,w]=a(s(!1),"copied"),m=a(N(void 0),"copyTimerRef");C(()=>()=>{clearTimeout(m.current)},[]);const h=o(()=>{f(!0),v(void 0),b(void 0),t.rpc.getStaticAssets().then(r=>{p(r),f(!1)}).catch(r=>{v(r.message??"Failed to load assets"),f(!1)})},"load");C(()=>{h()},[]);const x=i.filter(r=>{const k=y.toLowerCase(),R=!k||r.publicPath.toLowerCase().includes(k),$=d==="all"||r.type===d;return R&&$}),L=o(r=>{navigator.clipboard.writeText(r.publicPath).then(()=>{clearTimeout(m.current),w(!0),m.current=setTimeout(w,1500,!1)}).catch(()=>{})},"copyPath");return F?l("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…"})]}):g?l("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:g}),e(c,{onClick:h,size:"sm",variant:"outline",children:"Retry"})]}):l("div",{class:"flex flex-col h-full",children:[l("div",{class:"flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0 flex-wrap",children:[e(E,{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:o(r=>{T(r.target.value)},"onInput"),placeholder:"Filter assets…",type:"text",value:y}),l("span",{class:"text-[0.7rem] text-muted-foreground shrink-0",children:[x.length," / ",i.length]}),e(c,{onClick:h,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:M.map(r=>e("button",{"aria-pressed":d===r.value,class:u("px-2.5 py-0.5 text-[0.7rem] font-medium border cursor-pointer transition-colors duration-100",d===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:o(()=>{S(r.value)},"onClick"),type:"button",children:r.label},r.value))}),l("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:x.length===0?e("div",{class:"flex items-center justify-center p-8 text-[0.8rem] text-muted-foreground",children:i.length===0?"No assets found in public directory.":"No assets match the current filter."}):x.map(r=>l("button",{"aria-label":r.publicPath,"aria-selected":n?.publicPath===r.publicPath,class:u("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",n?.publicPath===r.publicPath&&"bg-primary/6"),onClick:o(()=>{b(n?.publicPath===r.publicPath?void 0:r)},"onClick"),role:"option",type:"button",children:[e(z,{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:j(r.size)})]},r.publicPath))}),n&&l("div",{class:"border-l border-border bg-background w-72 shrink-0 flex flex-col overflow-hidden",children:[l("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(c,{"aria-label":"Close",class:"h-6 w-6 text-xs",onClick:o(()=>{b(void 0)},"onClick"),size:"icon",variant:"ghost",children:"✕"})]}),l("div",{class:"flex-1 overflow-auto p-4 space-y-4",children:[e(V,{asset:n}),l("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:n.publicPath})]}),l("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Type"}),e(z,{type:n.type})]}),l("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:j(n.size)})]}),l("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(n.mtime).toLocaleString()})]}),l("div",{class:"flex flex-col gap-2 pt-1",children:[e(c,{class:"w-full text-[0.75rem]",onClick:o(()=>{L(n)},"onClick"),size:"sm",variant:"outline",children:I?"Copied!":"Copy URL"}),e("a",{class:u("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:A(n.publicPath),rel:"noopener noreferrer",target:"_blank",children:"Open in browser"})]})]})]})]})]})},"AssetsApp"),X={component:K,icon:H,id:"dev-toolbar:assets",name:"Assets"};export{X as default};
+`,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`,j=t=>t.startsWith("/")&&!t.includes(":")?t:"#",I=[{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"}],$={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"},C=({type:t})=>e("span",{class:c("inline-flex px-1.5 py-0.5 text-[0.6rem] font-mono font-bold uppercase border",$[t]),children:t}),E=({asset:t})=>{const i=j(t.publicPath);if(i!=="#"){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:i})});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:i})});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:i})})}},M=({helpers:t})=>{const[i,u]=n(a([]),"assets"),[z,p]=n(a(!0),"loading"),[x,g]=n(a(void 0),"error"),[v,F]=n(a(""),"search"),[s,T]=n(a("all"),"typeFilter"),[o,f]=n(a(void 0),"selected"),[A,y]=n(a(!1),"copied"),b=n(N(void 0),"copyTimerRef");k(()=>()=>{clearTimeout(b.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 h=i.filter(r=>{const w=v.toLowerCase(),L=!w||r.publicPath.toLowerCase().includes(w),B=s==="all"||r.type===s;return L&&B}),S=r=>{navigator.clipboard.writeText(r.publicPath).then(()=>{clearTimeout(b.current),y(!0),b.current=setTimeout(y,1500,!1)}).catch(()=>{})};return z?l("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?l("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"})]}):l("div",{class:"flex flex-col h-full",children:[l("div",{class:"flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0 flex-wrap",children:[e(R,{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=>{F(r.target.value)},placeholder:"Filter assets…",type:"text",value:v}),l("span",{class:"text-[0.7rem] text-muted-foreground shrink-0",children:[h.length," / ",i.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:I.map(r=>e("button",{"aria-pressed":s===r.value,class:c("px-2.5 py-0.5 text-[0.7rem] font-medium border cursor-pointer transition-colors duration-100",s===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:()=>{T(r.value)},type:"button",children:r.label},r.value))}),l("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:i.length===0?"No assets found in public directory.":"No assets match the current filter."}):h.map(r=>l("button",{"aria-label":r.publicPath,"aria-selected":o?.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",o?.publicPath===r.publicPath&&"bg-primary/6"),onClick:()=>{f(o?.publicPath===r.publicPath?void 0:r)},role:"option",type:"button",children:[e(C,{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))}),o&&l("div",{class:"border-l border-border bg-background w-72 shrink-0 flex flex-col overflow-hidden",children:[l("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:"✕"})]}),l("div",{class:"flex-1 overflow-auto p-4 space-y-4",children:[e(E,{asset:o}),l("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:o.publicPath})]}),l("div",{children:[e("div",{class:"text-[0.6rem] uppercase tracking-wider text-muted-foreground mb-1",children:"Type"}),e(C,{type:o.type})]}),l("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(o.size)})]}),l("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(o.mtime).toLocaleString()})]}),l("div",{class:"flex flex-col gap-2 pt-1",children:[e(d,{class:"w-full text-[0.75rem]",onClick:()=>{S(o)},size:"sm",variant:"outline",children:A?"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:j(o.publicPath),rel:"noopener noreferrer",target:"_blank",children:"Open in browser"})]})]})]})]})]})},W={component:M,icon:H,id:"dev-toolbar:assets",name:"Assets"};export{W as default};

package/dist/apps/inspector/index.d.ts

@@ -1,3 +1,4 @@
-import type { DevToolbarApp } from "../../types/app.d.ts";
+import { D as DevToolbarApp } from "../../packem_shared/app.d-SmKEDxsI.js";
+import 'preact';
 declare const inspectorApp: DevToolbarApp;
-export default inspectorApp;
+export { inspectorApp as default };