@visulima/dev-toolbar 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist/apps/settings/index.js

@@ -1,4 +1,4 @@
-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-DgQ4ss-s.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 v1.16.0 - ISC -->
+var A=Object.defineProperty;var f=(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,_ as P,r as c}from"../../packem_shared/use-theme-Dm1M0rKT.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-DgQ4ss-s.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 v1.16.0 - ISC -->
 <svg
   class="lucide lucide-settings"
   xmlns="http://www.w3.org/2000/svg"
@@ -14,4 +14,4 @@ var A=Object.defineProperty;var C=(t,l)=>A(t,"name",{value:l,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>
-`,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};
+`,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=f((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"),C=[{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?C.filter(a=>a.label.toLowerCase().includes(l)):C;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:C,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"),ne={component:$,defaultOpen:!0,icon:R,id:"dev-toolbar:settings",name:"Settings"};export{ne as default};

package/dist/index.d.ts

@@ -1,11 +1,54 @@
 import { D as DevToolbarApp, T as ToolbarSettings } from "./packem_shared/app.d-SmKEDxsI.js";
 export { A as AppView, b as DEFAULT_TOOLBAR_SETTINGS, a as DevToolbarAppState, F as FrameState, N as NotificationLevel, P as PositionAnchor, S as ServerFunctions, c as ServerHelpers, d as ToolbarAppEventTarget, e as ToolbarPlacement } from "./packem_shared/app.d-SmKEDxsI.js";
-import { T as TimelineEvent, D as DevToolbarHook, C as ClientFunctions, a as ClientRPCContext, S as ServerFunctions, b as ServerRPCContext, c as TimelineGroup } from "./packem_shared/global-api.d-DG2WYakl.js";
-export { A as AccessibilityInfo, d as Annotation, e as AnnotationIntent, f as AnnotationSeverity, g as AnnotationStatus, B as BoundingBox, h as CreateAnnotationData, i as DEFAULT_TIMELINE_GROUPS, F as FrameworkContext, H as HookEvents, j as ThreadMessage, k as TimelineEventLevel, U as UpdateAnnotationData, V as VisulimaDevTools } from "./packem_shared/global-api.d-DG2WYakl.js";
+import { T as TimelineEvent, D as DevToolbarHook, C as ClientFunctions, a as ClientRPCContext, S as ServerFunctions, b as ServerRPCContext, c as TimelineGroup } from "./packem_shared/global-api.d-BgSWkF5h.js";
+export { A as AccessibilityInfo, d as Annotation, e as AnnotationIntent, f as AnnotationSeverity, g as AnnotationStatus, B as BoundingBox, h as CreateAnnotationData, i as DEFAULT_TIMELINE_GROUPS, F as FrameworkContext, H as HookEvents, j as ThreadMessage, k as TimelineEventLevel, U as UpdateAnnotationData, V as VisulimaDevTools } from "./packem_shared/global-api.d-BgSWkF5h.js";
 import { ViteDevServer } from 'vite';
 export { DevToolbar } from "./toolbar/index.js";
 import 'preact';
 /**
+* Message channel interface for bidirectional communication
+*/
+interface MessageChannel<TEvents extends Record<string, (...args: any[]) => void>> {
+  /**
+  * Unsubscribe from an event
+  * @param event Event name
+  * @param handler Optional specific handler to remove
+  */
+  off: <K extends keyof TEvents>(event: K, handler?: TEvents[K]) => void;
+  /**
+  * Subscribe to an event
+  * @param event Event name
+  * @param handler Event handler
+  * @returns Unsubscribe function
+  */
+  on: <K extends keyof TEvents>(event: K, handler: TEvents[K]) => () => void;
+  /**
+  * Subscribe to an event once
+  * @param event Event name
+  * @param handler Event handler
+  */
+  once: <K extends keyof TEvents>(event: K, handler: TEvents[K]) => void;
+  /**
+  * Send a message/event
+  * @param event Event name
+  * @param data Event data
+  */
+  send: <K extends keyof TEvents>(event: K, ...args: Parameters<TEvents[K]>) => void;
+}
+/**
+* Channel factory function
+*/
+type ChannelFactory<TEvents extends Record<string, (...args: any[]) => void>> = () => MessageChannel<TEvents>;
+/**
+* Factory result providing a method to instantiate named message channels.
+*/
+interface MessageChannelContext<TEvents extends Record<string, (...args: any[]) => void>> {
+  /**
+  * Creates and returns a new channel instance.
+  */
+  createChannel: () => MessageChannel<TEvents>;
+}
+/**
 * Creates a dev toolbar hook instance.
 * @param onRegisterApp Callback when app is registered.
 * @param onTimelineEvent Callback when timeline event is added.
@@ -82,49 +125,6 @@ declare class TimelineStore {
 */
 declare const getTimelineStore: () => TimelineStore;
 /**
-* Message channel interface for bidirectional communication
-*/
-interface MessageChannel<TEvents extends Record<string, (...args: any[]) => void>> {
-  /**
-  * Unsubscribe from an event
-  * @param event Event name
-  * @param handler Optional specific handler to remove
-  */
-  off: <K extends keyof TEvents>(event: K, handler?: TEvents[K]) => void;
-  /**
-  * Subscribe to an event
-  * @param event Event name
-  * @param handler Event handler
-  * @returns Unsubscribe function
-  */
-  on: <K extends keyof TEvents>(event: K, handler: TEvents[K]) => () => void;
-  /**
-  * Subscribe to an event once
-  * @param event Event name
-  * @param handler Event handler
-  */
-  once: <K extends keyof TEvents>(event: K, handler: TEvents[K]) => void;
-  /**
-  * Send a message/event
-  * @param event Event name
-  * @param data Event data
-  */
-  send: <K extends keyof TEvents>(event: K, ...args: Parameters<TEvents[K]>) => void;
-}
-/**
-* Channel factory function
-*/
-type ChannelFactory<TEvents extends Record<string, (...args: any[]) => void>> = () => MessageChannel<TEvents>;
-/**
-* Factory result providing a method to instantiate named message channels.
-*/
-interface MessageChannelContext<TEvents extends Record<string, (...args: any[]) => void>> {
-  /**
-  * Creates and returns a new channel instance.
-  */
-  createChannel: () => MessageChannel<TEvents>;
-}
-/**
 * Loads settings from localStorage, merging with defaults.
 * @returns Toolbar settings.
 */

package/dist/index.js

@@ -1 +1 @@
-import{createClientRPCContext as t}from"./packem_shared/createClientRPCContext-DgRxrllw.js";import{createServerRPCContext as a}from"./packem_shared/createServerRPCContext-D-yZrEjs.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-DoUxFMox.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};