@visulima/dev-toolbar 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/apps/settings/index.js

@@ -1,4 +1,4 @@
-var k=Object.defineProperty;var f=(o,n)=>k(o,"name",{value:n,configurable:!0});import{addHookName as C}from"preact/devtools";import{clsx as h}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as D,useRef as y,useEffect as w}from"preact/hooks";import{h as E,r as c}from"../../packem_shared/use-frame-state-CxrlPUM5.js";import{_ as F}from"../../packem_shared/use-theme-zpm4zmqP.js";import v from"../../packem_shared/Icon-B6UHkC0o.js";import{jsxs as r,jsx as e}from"preact/jsx-runtime";import p from"../../packem_shared/Button-Bkx66Co7.js";const S=`<!-- @license lucide-static v0.577.0 - ISC -->
+var A=Object.defineProperty;var C=(t,l)=>A(t,"name",{value:l,configurable:!0});import{addHookName as x}from"preact/devtools";import{clsx as g}from"../../packem_shared/clsx-wGlvpUfw.js";import{useState as T,useRef as M,useEffect as j}from"preact/hooks";import{h as O,r as c}from"../../packem_shared/use-frame-state-CxrlPUM5.js";import{_ as P}from"../../packem_shared/use-theme-zpm4zmqP.js";import v from"../../packem_shared/Icon-B6UHkC0o.js";import{Select as y,SelectTrigger as w,SelectValue as E,SelectContent as F,SelectItem as S,useSelectContext as I}from"../../packem_shared/Select-C0CQOOqZ.js";import{jsxs as r,jsx as e,Fragment as N}from"preact/jsx-runtime";import p from"../../packem_shared/Button-Bkx66Co7.js";const R=`<!-- @license lucide-static v0.577.0 - ISC -->
 <svg
   class="lucide lucide-settings"
   xmlns="http://www.w3.org/2000/svg"
@@ -14,4 +14,4 @@ var k=Object.defineProperty;var f=(o,n)=>k(o,"name",{value:n,configurable:!0});i
   <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
   <circle cx="12" cy="12" r="3" />
 </svg>
-`,A="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-monitor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E",T="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-moon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401%22%20%2F%3E%20%3C%2Fsvg%3E",M="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-sun%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%20%2F%3E%20%3C%2Fsvg%3E";var P=Object.defineProperty,t=f((o,n)=>P(o,"name",{value:n,configurable:!0}),"l");const d=t(({control:o,description:n,label:l})=>r("div",{class:"flex items-center justify-between gap-6 py-3.5",children:[r("div",{class:"min-w-0",children:[e("div",{class:"text-[0.8125rem] font-medium text-foreground leading-none mb-0.5",children:l}),n&&e("div",{class:"text-[0.725rem] text-muted-foreground leading-snug mt-1",children:n})]}),e("div",{class:"shrink-0",children:o})]}),"SettingRow"),g=t(({children:o,title:n})=>r("section",{children:[r("h3",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground mb-2 px-1 flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"}),n]}),e("div",{class:"rounded-none border border-border bg-card divide-y divide-border overflow-hidden border-l-2 border-l-primary/20",children:e("div",{class:"px-4",children:o})})]}),"Section"),b=t(({checked:o,onChange:n})=>e("button",{"aria-checked":o,class:h("relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-none border-2 border-transparent","transition-colors duration-200 ease-in-out","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",o?"bg-primary":"bg-foreground/15"),onClick:t(()=>n(!o),"onClick"),role:"switch",type:"button",children:e("span",{class:h("pointer-events-none inline-block h-4 w-4 shadow-sm","transition-all duration-200 ease-in-out",o?"translate-x-4 bg-primary-foreground":"translate-x-0 bg-white")})}),"Toggle"),O=t(({onChange:o,value:n})=>{const l=[{icon:e(v,{size:13,src:M}),label:"Light",value:"light"},{icon:e(v,{size:13,src:T}),label:"Dark",value:"dark"},{icon:e(v,{size:13,src:A}),label:"System",value:"system"}];return e("div",{class:"flex items-center gap-0.5 bg-foreground/6 p-0.5",children:l.map(a=>r("button",{"aria-pressed":n===a.value,class:h("flex items-center gap-1.5 px-2.5 py-1.5 text-[0.75rem] font-medium","transition-all duration-150 cursor-pointer border-0",n===a.value?"bg-background text-foreground shadow-sm":"bg-transparent text-muted-foreground hover:text-foreground"),onClick:t(()=>o(a.value),"onClick"),type:"button",children:[a.icon,a.label]},a.value))})},"ThemeControl"),R=[{label:"Never",value:-1},{label:"Always",value:0},{label:"2s",value:2e3},{label:"5s",value:5e3},{label:"10s",value:1e4},{label:"30s",value:3e4}],j=t(({onChange:o,value:n})=>e("select",{class:h("bg-foreground/6 border border-border","text-[0.775rem] font-medium text-foreground","px-2.5 py-1.5 cursor-pointer","focus:outline-none focus:ring-1 focus:ring-ring","transition-colors duration-150"),onChange:t(l=>o(Number(l.target.value)),"onChange"),value:String(n),children:R.map(l=>e("option",{value:String(l.value),children:l.label},l.value))}),"HideDelayControl"),K=[{label:"Auto-detected",value:""},{label:"AppCode",value:"appcode"},{label:"Android Studio",value:"android-studio"},{label:"Atom",value:"atom"},{label:"Atom Beta",value:"atom-beta"},{label:"Brackets",value:"brackets"},{label:"CLion",value:"clion"},{label:"Visual Studio Code",value:"code"},{label:"Visual Studio Code Insiders",value:"code-insiders"},{label:"VSCodium",value:"codium"},{label:"Cursor",value:"cursor"},{label:"GNU Emacs",value:"emacs"},{label:"GNU Emacs for Mac OS X",value:"emacsforosx"},{label:"IntelliJ IDEA",value:"intellij"},{label:"GNU nano",value:"nano"},{label:"NeoVim",value:"neovim"},{label:"Notepad++",value:"notepad++"},{label:"PhpStorm",value:"phpstorm"},{label:"PyCharm",value:"pycharm"},{label:"Rider",value:"rider"},{label:"RubyMine",value:"rubymine"},{label:"SublimeText",value:"sublime"},{label:"TextMate",value:"textmate"},{label:"Vim",value:"vim"},{label:"Visual Studio",value:"visualstudio"},{label:"WebStorm",value:"webstorm"},{label:"Xcode",value:"xcode"},{label:"Zed",value:"zed"}],N=t(({onChange:o,value:n})=>e("select",{class:h("bg-foreground/6 border border-border","text-[0.775rem] font-medium text-foreground","px-2.5 py-1.5 cursor-pointer","focus:outline-none focus:ring-1 focus:ring-ring","transition-colors duration-150"),onChange:t(l=>o(l.target.value),"onChange"),value:n,children:K.map(l=>e("option",{value:l.value,children:l.label},l.value))}),"EditorControl"),z=t(o=>o.split("+"),"formatBinding"),B=t(({part:o})=>e("span",{class:"inline-flex items-center px-1.5 py-0.5 text-[0.65rem] font-mono font-medium bg-foreground/8 border border-border text-foreground",children:o}),"KeyBadge"),x=t(({onChange:o,value:n})=>{const[l,a]=C(D(!1),"capturing"),m=C(y(null),"buttonRef");return w(()=>{if(!l)return;const i=t(s=>{if(s.preventDefault(),s.stopPropagation(),["Alt","Control","Meta","Shift"].includes(s.key))return;const u=[];s.altKey&&u.push("Alt"),s.ctrlKey&&u.push("Control"),s.metaKey&&u.push("Meta"),s.shiftKey&&u.push("Shift"),u.push(s.key),o(u.join("+")),a(!1)},"handleKeyDown");return globalThis.addEventListener("keydown",i,!0),()=>globalThis.removeEventListener("keydown",i,!0)},[l,o]),r("div",{class:"flex items-center gap-2",children:[e("div",{class:"flex items-center gap-0.5",children:z(n).map((i,s)=>r("span",{class:"flex items-center gap-0.5",children:[s>0&&e("span",{class:"text-muted-foreground/40 text-[0.6rem] mx-0.5",children:"+"}),e(B,{part:i})]},s))}),e(p,{class:h("text-[0.7rem]",l?"border-primary text-primary bg-primary/8 animate-pulse":""),onClick:t(()=>a(i=>!i),"onClick"),ref:m,size:"sm",variant:"outline",children:l?"Press keys…":"Record"}),e(p,{class:"text-[0.7rem]",onClick:t(()=>{a(!1)},"onClick"),size:"sm",title:"Cancel",variant:"ghost",children:"✕"})]})},"KeyCapture"),I=t(o=>{const{state:n,updateState:l}=E(),{setTheme:a,theme:m}=F();return r("div",{class:"p-5 space-y-5 max-w-2xl",children:[r(g,{title:"Appearance",children:[e(d,{control:e(O,{onChange:a,value:m}),description:"Color scheme for the DevTools panel.",label:"Theme"}),e(d,{control:e(b,{checked:n.reduceMotion,onChange:t(i=>l({reduceMotion:i}),"onChange")}),description:"Disable animations and transitions throughout the toolbar.",label:"Reduce motion"})]}),r(g,{title:"Toolbar",children:[e(d,{control:e(j,{onChange:t(i=>l({minimizePanelInactive:i}),"onChange"),value:n.minimizePanelInactive}),description:"Collapse the toolbar pill after a period of inactivity. Set 'Never' to always keep it visible.",label:"Auto-hide when inactive"}),e(d,{control:e(b,{checked:n.preferShowFloatingPanel,onChange:t(i=>l({preferShowFloatingPanel:i}),"onChange")}),description:"Keep the toolbar pill visible even when the DevTools panel is not open.",label:"Show toolbar when panel is closed"})]}),e(g,{title:"Panel",children:e(d,{control:e(b,{checked:n.closeOnOutsideClick,onChange:t(i=>l({closeOnOutsideClick:i}),"onChange")}),description:"Close the DevTools panel when clicking outside of it.",label:"Close on outside click"})}),e(g,{title:"Editor",children:e(d,{control:e(N,{onChange:t(i=>l({editor:i}),"onChange"),value:n.editor}),description:"Editor to open when clicking 'Open in editor'. Select Auto-detected to use the running IDE or EDITOR environment variable.",label:"Preferred editor"})}),r(g,{title:"Keyboard Shortcuts",children:[e(d,{control:r("div",{class:"flex items-center gap-2",children:[e(x,{onChange:t(i=>l({keybindings:{...n.keybindings??c,toggle:i}}),"onChange"),value:n.keybindings?.toggle??c.toggle}),n.keybindings?.toggle!==c.toggle&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:t(()=>l({keybindings:{...n.keybindings??c,toggle:c.toggle}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Open or close the DevTools panel.",label:"Toggle toolbar"}),e(d,{control:r("div",{class:"flex items-center gap-2",children:[e(x,{onChange:t(i=>l({keybindings:{...n.keybindings??c,close:i}}),"onChange"),value:n.keybindings?.close??c.close}),n.keybindings?.close!==c.close&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:t(()=>l({keybindings:{...n.keybindings??c,close:c.close}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Dismiss the active app or close the panel.",label:"Close panel"})]})]})},"SettingsApp"),Z={component:I,defaultOpen:!0,icon:S,id:"dev-toolbar:settings",name:"Settings"};export{Z as default};
+`,V="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-monitor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E",B="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-moon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20.985%2012.486a9%209%200%201%201-9.473-9.472c.405-.022.617.46.402.803a6%206%200%200%200%208.268%208.268c.344-.215.825-.004.803.401%22%20%2F%3E%20%3C%2Fsvg%3E",K="data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22lucide%20lucide-sun%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20%2F%3E%20%3Cpath%20d%3D%22M12%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2020v2%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2012h2%22%20%2F%3E%20%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%20%2F%3E%20%3C%2Fsvg%3E";var z=Object.defineProperty,o=C((t,l)=>z(t,"name",{value:l,configurable:!0}),"t");const d=o(({control:t,description:l,label:n})=>r("div",{class:"flex items-center justify-between gap-6 py-3.5",children:[r("div",{class:"min-w-0",children:[e("div",{class:"text-[0.8125rem] font-medium text-foreground leading-none mb-0.5",children:n}),l&&e("div",{class:"text-[0.725rem] text-muted-foreground leading-snug mt-1",children:l})]}),e("div",{class:"shrink-0",children:t})]}),"SettingRow"),h=o(({children:t,title:l})=>r("section",{children:[r("h3",{class:"text-[0.65rem] font-bold uppercase tracking-[0.1em] text-muted-foreground mb-2 px-1 flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",class:"text-primary/50",children:"//"}),l]}),e("div",{class:"rounded-none border border-border bg-card divide-y divide-border overflow-hidden border-l-2 border-l-primary/20",children:e("div",{class:"px-4",children:t})})]}),"Section"),b=o(({checked:t,onChange:l})=>e("button",{"aria-checked":t,class:g("relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-none border-2 border-transparent","transition-colors duration-200 ease-in-out","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",t?"bg-primary":"bg-foreground/15"),onClick:o(()=>l(!t),"onClick"),role:"switch",type:"button",children:e("span",{class:g("pointer-events-none inline-block h-4 w-4 shadow-sm","transition-all duration-200 ease-in-out",t?"translate-x-4 bg-primary-foreground":"translate-x-0 bg-white")})}),"Toggle"),L=o(({onChange:t,value:l})=>{const n=[{icon:e(v,{size:13,src:K}),label:"Light",value:"light"},{icon:e(v,{size:13,src:B}),label:"Dark",value:"dark"},{icon:e(v,{size:13,src:V}),label:"System",value:"system"}];return e("div",{class:"flex items-center gap-0.5 bg-foreground/6 p-0.5",children:n.map(a=>r("button",{"aria-pressed":l===a.value,class:g("flex items-center gap-1.5 px-2.5 py-1.5 text-[0.75rem] font-medium","transition-all duration-150 cursor-pointer border-0",l===a.value?"bg-background text-foreground shadow-sm":"bg-transparent text-muted-foreground hover:text-foreground"),onClick:o(()=>t(a.value),"onClick"),type:"button",children:[a.icon,a.label]},a.value))})},"ThemeControl"),k=[{label:"Never",value:"-1"},{label:"Always",value:"0"},{label:"2s",value:"2000"},{label:"5s",value:"5000"},{label:"10s",value:"10000"},{label:"30s",value:"30000"}],G=o(({onChange:t,value:l})=>r(y,{onValueChange:o(n=>t(Number(n)),"onValueChange"),value:String(l),children:[e(w,{children:e(E,{options:k})}),e(F,{children:k.map(n=>e(S,{value:n.value,children:n.label},n.value))})]}),"HideDelayControl"),f=[{label:"Auto-detected",value:""},{label:"AppCode",value:"appcode"},{label:"Android Studio",value:"android-studio"},{label:"Atom",value:"atom"},{label:"Atom Beta",value:"atom-beta"},{label:"Brackets",value:"brackets"},{label:"CLion",value:"clion"},{label:"Visual Studio Code",value:"code"},{label:"Visual Studio Code Insiders",value:"code-insiders"},{label:"VSCodium",value:"codium"},{label:"Cursor",value:"cursor"},{label:"GNU Emacs",value:"emacs"},{label:"GNU Emacs for Mac OS X",value:"emacsforosx"},{label:"IntelliJ IDEA",value:"intellij"},{label:"GNU nano",value:"nano"},{label:"NeoVim",value:"neovim"},{label:"Notepad++",value:"notepad++"},{label:"PhpStorm",value:"phpstorm"},{label:"PyCharm",value:"pycharm"},{label:"Rider",value:"rider"},{label:"RubyMine",value:"rubymine"},{label:"SublimeText",value:"sublime"},{label:"TextMate",value:"textmate"},{label:"Vim",value:"vim"},{label:"Visual Studio",value:"visualstudio"},{label:"WebStorm",value:"webstorm"},{label:"Xcode",value:"xcode"},{label:"Zed",value:"zed"}],H=o(()=>{const{search:t}=I(),l=t.toLowerCase(),n=l?f.filter(a=>a.label.toLowerCase().includes(l)):f;return n.length===0?e("div",{class:"px-2 py-3 text-center text-[0.725rem] text-muted-foreground",children:"No editors found"}):e(N,{children:n.map(a=>e(S,{value:a.value,children:a.label},a.value))})},"EditorItems"),U=o(({onChange:t,value:l})=>r(y,{onValueChange:t,value:l,children:[e(w,{children:e(E,{options:f,placeholder:"Auto-detected"})}),e(F,{searchable:!0,children:e(H,{})})]}),"EditorControl"),_=o(t=>t.split("+"),"formatBinding"),X=o(({part:t})=>e("span",{class:"inline-flex items-center px-1.5 py-0.5 text-[0.65rem] font-mono font-medium bg-foreground/8 border border-border text-foreground",children:t}),"KeyBadge"),D=o(({onChange:t,value:l})=>{const[n,a]=x(T(!1),"capturing"),m=x(M(null),"buttonRef");return j(()=>{if(!n)return;const i=o(s=>{if(s.preventDefault(),s.stopPropagation(),["Alt","Control","Meta","Shift"].includes(s.key))return;const u=[];s.altKey&&u.push("Alt"),s.ctrlKey&&u.push("Control"),s.metaKey&&u.push("Meta"),s.shiftKey&&u.push("Shift"),u.push(s.key),t(u.join("+")),a(!1)},"handleKeyDown");return globalThis.addEventListener("keydown",i,!0),()=>globalThis.removeEventListener("keydown",i,!0)},[n,t]),r("div",{class:"flex items-center gap-2",children:[e("div",{class:"flex items-center gap-0.5",children:_(l).map((i,s)=>r("span",{class:"flex items-center gap-0.5",children:[s>0&&e("span",{class:"text-muted-foreground/40 text-[0.6rem] mx-0.5",children:"+"}),e(X,{part:i})]},s))}),e(p,{class:g("text-[0.7rem]",n?"border-primary text-primary bg-primary/8 animate-pulse":""),onClick:o(()=>a(i=>!i),"onClick"),ref:m,size:"sm",variant:"outline",children:n?"Press keys…":"Record"}),e(p,{class:"text-[0.7rem]",onClick:o(()=>{a(!1)},"onClick"),size:"sm",title:"Cancel",variant:"ghost",children:"✕"})]})},"KeyCapture"),$=o(t=>{const{state:l,updateState:n}=O(),{setTheme:a,theme:m}=P();return r("div",{class:"p-5 space-y-5 max-w-2xl",children:[r(h,{title:"Appearance",children:[e(d,{control:e(L,{onChange:a,value:m}),description:"Color scheme for the DevTools panel.",label:"Theme"}),e(d,{control:e(b,{checked:l.reduceMotion,onChange:o(i=>n({reduceMotion:i}),"onChange")}),description:"Disable animations and transitions throughout the toolbar.",label:"Reduce motion"})]}),r(h,{title:"Toolbar",children:[e(d,{control:e(G,{onChange:o(i=>n({minimizePanelInactive:i}),"onChange"),value:l.minimizePanelInactive}),description:"Collapse the toolbar pill after a period of inactivity. Set 'Never' to always keep it visible.",label:"Auto-hide when inactive"}),e(d,{control:e(b,{checked:l.preferShowFloatingPanel,onChange:o(i=>n({preferShowFloatingPanel:i}),"onChange")}),description:"Keep the toolbar pill visible even when the DevTools panel is not open.",label:"Show toolbar when panel is closed"})]}),e(h,{title:"Panel",children:e(d,{control:e(b,{checked:l.closeOnOutsideClick,onChange:o(i=>n({closeOnOutsideClick:i}),"onChange")}),description:"Close the DevTools panel when clicking outside of it.",label:"Close on outside click"})}),e(h,{title:"Editor",children:e(d,{control:e(U,{onChange:o(i=>n({editor:i}),"onChange"),value:l.editor}),description:"Editor to open when clicking 'Open in editor'. Select Auto-detected to use the running IDE or EDITOR environment variable.",label:"Preferred editor"})}),r(h,{title:"Keyboard Shortcuts",children:[e(d,{control:r("div",{class:"flex items-center gap-2",children:[e(D,{onChange:o(i=>n({keybindings:{...l.keybindings??c,toggle:i}}),"onChange"),value:l.keybindings?.toggle??c.toggle}),l.keybindings?.toggle!==c.toggle&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:o(()=>n({keybindings:{...l.keybindings??c,toggle:c.toggle}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Open or close the DevTools panel.",label:"Toggle toolbar"}),e(d,{control:r("div",{class:"flex items-center gap-2",children:[e(D,{onChange:o(i=>n({keybindings:{...l.keybindings??c,close:i}}),"onChange"),value:l.keybindings?.close??c.close}),l.keybindings?.close!==c.close&&e(p,{class:"h-auto p-0 text-[0.65rem]",onClick:o(()=>n({keybindings:{...l.keybindings??c,close:c.close}}),"onClick"),variant:"link",children:"Reset"})]}),description:"Dismiss the active app or close the panel.",label:"Close panel"})]})]})},"SettingsApp"),oe={component:$,defaultOpen:!0,icon:R,id:"dev-toolbar:settings",name:"Settings"};export{oe as default};

package/dist/client/overlay.js

@@ -1 +1 @@
-var g=Object.defineProperty;var s=(o,t)=>g(o,"name",{value:t,configurable:!0});import e from"virtual:visulima-dev-toolbar-options";var A=Object.defineProperty,r=s((o,t)=>A(o,"name",{value:t,configurable:!0}),"i");globalThis.__VISULIMA_DEV_TOOLBAR_OPTIONS__=e;const T=r(()=>{if(!e.requireUrlFlag)return!0;const o=e.urlFlagName??"devtools";return new URLSearchParams(globalThis.window?.location.search).get(o)==="true"},"isUrlFlagPresent"),L=r(o=>Promise.all([o.settings?import("virtual:visulima-dev-toolbar-path:apps/settings/index.js"):void 0,o.timeline?import("virtual:visulima-dev-toolbar-path:apps/timeline/index.js"):void 0,o.viteConfig?import("virtual:visulima-dev-toolbar-path:apps/vite-config/index.js"):void 0,o.moduleGraph?import("virtual:visulima-dev-toolbar-path:apps/module-graph/index.js"):void 0,o.seo?import("virtual:visulima-dev-toolbar-path:apps/seo/index.js"):void 0,o.performance?import("virtual:visulima-dev-toolbar-path:apps/performance/index.js"):void 0,o.a11y?import("virtual:visulima-dev-toolbar-path:apps/a11y/index.js"):void 0,o.inspector?import("virtual:visulima-dev-toolbar-path:apps/inspector/index.js"):void 0,o.tailwind?import("virtual:visulima-dev-toolbar-path:apps/tailwind/index.js"):void 0,o.assets?import("virtual:visulima-dev-toolbar-path:apps/assets/index.js"):void 0]),"loadAppModules"),b=r((o,t)=>{const[i,a,d,p,c,m,_,u,I,v]=t;if(!o.registerApp)return;const f=[a,d,p,c,m,_,u,I,v];for(const n of f)n&&o.registerApp(n.default,!0);i&&o.registerApp(i.default,!0)},"registerApps"),l=r(async()=>{if(globalThis.window===void 0||!T()||globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__)return;globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__=!0;let o;try{await import("virtual:visulima-dev-toolbar-path:toolbar/index.js");const{apps:t}=e,i=await L(t);if(o=document.createElement("dev-toolbar"),document.body.append(o),b(o,i),e.customApps)for(const a of e.customApps)o.registerApp(a,!1);o.init&&o.init(),console.log("[dev-toolbar] Initialized successfully")}catch(t){o?.isConnected&&o.remove(),globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__=!1,console.error("[dev-toolbar] Failed to initialize:",t)}},"initToolbar");typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",l):l().catch(()=>{}));import.meta.hot&&import.meta.hot.on("dev-toolbar:init",()=>{const o=document.querySelector("dev-toolbar");o&&o.remove(),globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__=!1,l().catch(()=>{})});
+var A=Object.defineProperty;var s=(o,t)=>A(o,"name",{value:t,configurable:!0});import e from"virtual:visulima-dev-toolbar-options";var T=Object.defineProperty,r=s((o,t)=>T(o,"name",{value:t,configurable:!0}),"i");globalThis.__VISULIMA_DEV_TOOLBAR_OPTIONS__=e;const b=r(()=>{if(!e.requireUrlFlag)return!0;const o=e.urlFlagName??"devtools";return new URLSearchParams(globalThis.window?.location.search).get(o)==="true"},"isUrlFlagPresent"),L=r(o=>Promise.all([o.settings?import("virtual:visulima-dev-toolbar-path:apps/settings/index.js"):void 0,o.timeline?import("virtual:visulima-dev-toolbar-path:apps/timeline/index.js"):void 0,o.viteConfig?import("virtual:visulima-dev-toolbar-path:apps/vite-config/index.js"):void 0,o.moduleGraph?import("virtual:visulima-dev-toolbar-path:apps/module-graph/index.js"):void 0,o.seo?import("virtual:visulima-dev-toolbar-path:apps/seo/index.js"):void 0,o.performance?import("virtual:visulima-dev-toolbar-path:apps/performance/index.js"):void 0,o.a11y?import("virtual:visulima-dev-toolbar-path:apps/a11y/index.js"):void 0,o.inspector?import("virtual:visulima-dev-toolbar-path:apps/inspector/index.js"):void 0,o.tailwind?import("virtual:visulima-dev-toolbar-path:apps/tailwind/index.js"):void 0,o.assets?import("virtual:visulima-dev-toolbar-path:apps/assets/index.js"):void 0,o.annotations?import("virtual:visulima-dev-toolbar-path:apps/annotations/index.js"):void 0]),"loadAppModules"),h=r((o,t)=>{const[i,a,d,p,c,m,_,u,I,v,f]=t;if(!o.registerApp)return;const g=[a,d,p,c,m,_,u,I,v,f];for(const l of g)l&&o.registerApp(l.default,!0);i&&o.registerApp(i.default,!0)},"registerApps"),n=r(async()=>{if(globalThis.window===void 0||!b()||globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__)return;globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__=!0;let o;try{await import("virtual:visulima-dev-toolbar-path:toolbar/index.js");const{apps:t}=e,i=await L(t);if(o=document.createElement("dev-toolbar"),document.body.append(o),h(o,i),e.customApps)for(const a of e.customApps)o.registerApp(a,!1);o.init&&o.init(),console.log("[dev-toolbar] Initialized successfully")}catch(t){o?.isConnected&&o.remove(),globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__=!1,console.error("[dev-toolbar] Failed to initialize:",t)}},"initToolbar");typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",n):n().catch(()=>{}));import.meta.hot&&import.meta.hot.on("dev-toolbar:init",()=>{const o=document.querySelector("dev-toolbar");o&&o.remove(),globalThis.__VISULIMA_DEVTOOLS_INITIALIZED__=!1,n().catch(()=>{})});

package/dist/index.js

@@ -1 +1 @@
-import{createClientRPCContext as t}from"./packem_shared/createClientRPCContext-DgRxrllw.js";import{createServerRPCContext as a}from"./packem_shared/createServerRPCContext-CJXa8ezf.js";import{DevToolbar as m}from"./toolbar/index.js";import{loadSettings as x,saveSettings as f,updateSettings as n}from"./packem_shared/loadSettings-hvjR4fcS.js";import{createDevToolbarHook as s}from"./packem_shared/createDevToolbarHook-4bZZiHPI.js";import{getGlobalHook as C,setupGlobalHook as S}from"./packem_shared/setupGlobalHook-CCf9Logv.js";import{m as v}from"./packem_shared/store-DaUtLjf3.js";export{m as DevToolbar,t as createClientRPCContext,s as createDevToolbarHook,a as createServerRPCContext,C as getGlobalHook,v as getTimelineStore,x as loadSettings,f as saveSettings,S as setupGlobalHook,n as updateSettings};
+import{createClientRPCContext as t}from"./packem_shared/createClientRPCContext-DgRxrllw.js";import{createServerRPCContext as a}from"./packem_shared/createServerRPCContext-CJ6F87o_.js";import{DevToolbar as m}from"./toolbar/index.js";import{loadSettings as x,saveSettings as f,updateSettings as n}from"./packem_shared/loadSettings-hvjR4fcS.js";import{createDevToolbarHook as s}from"./packem_shared/createDevToolbarHook-4bZZiHPI.js";import{getGlobalHook as C,setupGlobalHook as S}from"./packem_shared/setupGlobalHook-CCf9Logv.js";import{m as v}from"./packem_shared/store-DaUtLjf3.js";export{m as DevToolbar,t as createClientRPCContext,s as createDevToolbarHook,a as createServerRPCContext,C as getGlobalHook,v as getTimelineStore,x as loadSettings,f as saveSettings,S as setupGlobalHook,n as updateSettings};

package/dist/mcp/server.d.ts

@@ -0,0 +1,12 @@
+/**
+ * MCP (Model Context Protocol) server for AI agent integration.
+ *
+ * Provides tools for AI agents (e.g. Claude Code) to read, resolve, and
+ * interact with visual annotations created through the dev toolbar.
+ *
+ * Usage:
+ *   npx visulima-dev-toolbar-mcp
+ *
+ * Requires: @modelcontextprotocol/sdk (optional peer dependency)
+ */
+export declare const startMcpServer: () => Promise<void>;

package/dist/mcp/server.js

@@ -0,0 +1 @@
+var J=Object.defineProperty;var _=(c,s)=>J(c,"name",{value:s,configurable:!0});import{createRequire as A}from"node:module";import{r as l,S as j,a as M,i as P,w as x,d as R,b as S}from"../packem_shared/annotation-store-bLQRYMaI.js";const D=A(import.meta.url),f=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,N=_(c=>{if(typeof f<"u"&&f.versions&&f.versions.node){const[s,r]=f.versions.node.split(".").map(Number);if(s>22||s===22&&r>=3||s===20&&r>=16)return f.getBuiltinModule(c)}return D(c)},"__cjs_getBuiltinModule"),E=N("node:fs/promises"),I=N("node:path");var U=Object.defineProperty,B=_((c,s)=>U(c,"name",{value:s,configurable:!0}),"_");const F=B(async()=>{const{McpServer:c}=await import("@modelcontextprotocol/sdk/server/mcp.js"),{StdioServerTransport:s}=await import("@modelcontextprotocol/sdk/server/stdio.js"),{z:r}=await import("zod"),a=process.cwd(),h=new c({name:"visulima-dev-toolbar",version:"1.0.0-alpha.5"});h.tool("get_pending_annotations","Get all pending visual annotations from the dev toolbar. Returns annotations with metadata but not screenshot binary data — use get_screenshot for that.",{},async()=>{const i=(await l(a)).filter(t=>t.status==="pending").map(t=>({...t,screenshot:!!t.screenshot}));return{content:[{text:JSON.stringify({annotations:i,count:i.length},void 0,2),type:"text"}]}}),h.tool("get_screenshot","Get the screenshot image for an annotation as base64 data. Use this after get_pending_annotations to see what the user annotated.",{annotation_id:r.string().describe("The annotation ID to get the screenshot for")},async({annotation_id:i})=>{const t=(await l(a)).find(o=>o.id===i);if(!t)return{content:[{text:JSON.stringify({error:"Annotation not found"}),type:"text"}],isError:!0};if(!t.screenshot)return{content:[{text:JSON.stringify({error:"No screenshot for this annotation"}),type:"text"}],isError:!0};if(!t.screenshot.startsWith(`${j}/`))return{content:[{text:JSON.stringify({error:"Invalid screenshot path"}),type:"text"}],isError:!0};const{base:n}=M(a),e=I.join(n,t.screenshot);if(!P(e,n))return{content:[{text:JSON.stringify({error:"Invalid screenshot path"}),type:"text"}],isError:!0};try{const o=await E.readFile(e),d=I.extname(e).slice(1),p=d==="svg"?"image/svg+xml":d==="jpg"?"image/jpeg":`image/${d}`;return{content:[{data:o.toString("base64"),mimeType:p,type:"image"}]}}catch{return{content:[{text:JSON.stringify({error:"Screenshot file not found"}),type:"text"}],isError:!0}}}),h.tool("resolve_annotation","Mark an annotation as resolved after fixing the issue. Automatically deletes the associated screenshot.",{annotation_id:r.string().describe("The annotation ID to resolve")},async({annotation_id:i})=>x(async()=>{const t=await l(a),n=t.findIndex(o=>o.id===i);if(n===-1)return{content:[{text:JSON.stringify({error:"Annotation not found"}),type:"text"}],isError:!0};const e=t[n];return e.status="resolved",e.resolvedBy="agent",e.updatedAt=new Date().toISOString(),e.screenshot&&(await R(a,e.screenshot),e.screenshot=void 0),t[n]=e,await S(a,t),{content:[{text:JSON.stringify({annotation:e,ok:!0},void 0,2),type:"text"}]}})),h.tool("add_thread_message","Add a message to an annotation's conversation thread. Use this to communicate with the developer about the annotation.",{annotation_id:r.string().describe("The annotation ID to add a message to"),message:r.string().describe("The message content")},async({annotation_id:i,message:t})=>x(async()=>{const n=await l(a),e=n.findIndex(d=>d.id===i);if(e===-1)return{content:[{text:JSON.stringify({error:"Annotation not found"}),type:"text"}],isError:!0};const o=n[e];return o.thread||(o.thread=[]),o.thread.push({content:t,id:crypto.randomUUID(),role:"agent",timestamp:new Date().toISOString()}),o.updatedAt=new Date().toISOString(),n[e]=o,await S(a,n),{content:[{text:JSON.stringify({annotation:o,ok:!0},void 0,2),type:"text"}]}})),h.tool("acknowledge_annotation","Mark an annotation as acknowledged — signals to the developer that the agent has seen it and will work on it. Use this before starting to fix an issue.",{annotation_id:r.string().describe("The annotation ID to acknowledge")},async({annotation_id:i})=>x(async()=>{const t=await l(a),n=t.findIndex(o=>o.id===i);if(n===-1)return{content:[{text:JSON.stringify({error:"Annotation not found"}),type:"text"}],isError:!0};const e=t[n];return e.status="acknowledged",e.updatedAt=new Date().toISOString(),t[n]=e,await S(a,t),{content:[{text:JSON.stringify({annotation:e,ok:!0},void 0,2),type:"text"}]}})),h.tool("watch_annotations","Block until new pending annotations appear. Use this for hands-free mode: call in a loop to automatically detect when the developer adds feedback. Returns after the batch window (default 10s) to collect multiple annotations submitted in quick succession.",{batch_window_ms:r.number().optional().describe("How long to wait for additional annotations after the first one arrives (default: 10000ms)"),timeout_ms:r.number().optional().describe("Maximum time to wait before returning empty (default: 300000ms = 5 minutes)")},async({batch_window_ms:i,timeout_ms:t})=>{const n=i??1e4,e=t??3e5,o=2e3,d=new Set((await l(a)).filter(g=>g.status==="pending").map(g=>g.id));let p,w;const y=await Promise.race([new Promise(g=>{w=setTimeout(()=>g({timedOut:!0}),e)}),new Promise((g,b)=>{p=setInterval(()=>{l(a).then(v=>{v.filter(m=>m.status==="pending").filter(m=>!d.has(m.id)).map(m=>m.id).length>0&&(clearInterval(p),clearTimeout(w),setTimeout(()=>{l(a).then(m=>{const O=m.filter(u=>u.status==="pending"),k=O.filter(u=>!d.has(u.id)).map(u=>u.id);g({annotations:O.map(u=>({...u,screenshot:!!u.screenshot})),newIds:k})}).catch(b)},n))}).catch(v=>{clearInterval(p),clearTimeout(w),b(v)})},o)})]);return clearInterval(p),clearTimeout(w),"timedOut"in y?{content:[{text:JSON.stringify({annotations:[],count:0,newCount:0,timedOut:!0}),type:"text"}]}:{content:[{text:JSON.stringify({annotations:y.annotations,count:y.annotations.length,newCount:y.newIds.length},void 0,2),type:"text"}]}});const T=new s;await h.connect(T)},"startMcpServer");export{F as startMcpServer};