@htmlos-next/ui 0.0.7 → 0.0.8

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,11 +1,10 @@
 import { default as React } from 'react';
 interface ContextMenuProps {
     open: boolean;
-    x?: number;
-    y?: number;
-    from?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    x: number;
+    y: number;
     children: React.ReactNode;
 }
-export declare function ContextMenu({ open, x, y, from, children, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextMenu({ open, x, y, children }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ContextMenu.d.ts.map

package/dist/components/ContextMenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,gBAAgB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,CAAM,EACN,CAAM,EACN,IAAiB,EACjB,QAAQ,GACT,EAAE,gBAAgB,2CAiClB"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,UAAU,gBAAgB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAmDrE"}

package/dist/htmlos-ui.cjs

@@ -1,10 +1,10 @@
 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(`:root{--accent: #0088ff;--button-primary-bg: var(--accent);--button-primary-bg-hover: color-mix(in srgb, var(--accent), black 15%);--button-primary-bg-active: color-mix(in srgb, var(--accent), black 30%);--button-secondary-bg-hover: color-mix(in srgb, var(--accent), white 90%);--button-secondary-bg-active: color-mix(in srgb, var(--accent), white 90%);--button-disabled-bg: color-mix(in srgb, var(--accent), white 60%);--text-disabled: color-mix(in srgb, var(--text-primary), white 40%);--icon-color: var(--accent);--border-color: #0000001a;--surface-bg: #ffffff7a;--surface-bg-hover: #ffffffa1;--surface-bg-active: #ffffffd5;--card-bg: #e5e5e5;--card-bg-secondary: #f5f5f5;--overlay-bg: rgba(0, 0, 0, .4);--muted-bg: rgba(0, 0, 0, .06);--text-primary: #000000;--text-secondary: #8b8b8b;--text-inverse: #ffffff;--sidebar-width: 200px}[data-theme=dark]{--button-secondary-bg-hover: #252628;--button-secondary-bg-active: #2b2f35;--button-disabled-bg: color-mix(in srgb, var(--accent), black 60%);--text-disabled: color-mix(in srgb, var(--text-primary), black 40%);--surface-bg: #1e1e1e7a;--surface-bg-hover: #2a2a2aa1;--surface-bg-active: #3a3a3ad5;--card-bg: #1d1d1d;--card-bg-secondary: #2a2a2a;--overlay-bg: rgba(255, 255, 255, .4);--muted-bg: rgba(255, 255, 255, .12);--text-primary: #ffffff;--text-inverse: #000000;--text-secondary: #b3b3b3}body{color:var(--text-primary);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[device-type=mobile] body{background-color:var(--card-bg-secondary)!important}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}._sidebar_yoln4_1{width:var(--sidebar-width);background-color:var(--surface-bg);position:absolute;top:0;bottom:5px;height:auto;left:5px;border-radius:9px;transition:left .3s;display:flex;flex-direction:column;z-index:999;border:solid 1px var(--border-color);transform:translate(0)}._sidebarCollapsed_yoln4_18{left:calc(-1 * var(--sidebar-width) - 10px)}[device-type=mobile] ._sidebar_yoln4_1._sidebarMobile_yoln4_22{position:absolute;inset:0;width:auto;height:auto;border-radius:0;transition:transform .25s ease;background-color:var(--card-bg)}[device-type=mobile] ._sidebar_yoln4_1._sidebarMobile_yoln4_22._sidebarMobileHidden_yoln4_35{transform:translate(-105%)}._sidebarContent_yoln4_39{height:100%;padding:0 4px;display:flex;flex-direction:column;overflow-y:auto;gap:2px}._sidebarFooter_yoln4_48{padding:4px}._sidebarTitle_azx8n_1{font-size:.8rem;font-weight:600;margin:8px 8px 8px 4px;color:var(--text-secondary)}[device-type=mobile] ._sidebarTitle_azx8n_1{font-size:1.2rem}._sidebarItem_1e3ru_1{padding:6px;transition:background-color .1s;border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:row;justify-content:start;align-items:center;gap:8px}[device-type=mobile] ._sidebarItem_1e3ru_1{font-size:1.4rem}._sidebarItem_1e3ru_1:hover{background-color:var(--surface-bg-hover)}._sidebarItem_1e3ru_1._selected_1e3ru_22{background-color:var(--surface-bg-active);color:var(--icon-color)}._sidebarMainBtn_65l8c_1{width:calc(100% - 8px);background-color:var(--button-primary-bg);border:none;outline:none;color:var(--text-inverse);border-radius:5px;height:32px;margin:4px;font-weight:600;font-size:.9rem;transition:background-color .2s;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;cursor:pointer}[device-type=mobile] ._sidebarMainBtn_65l8c_1{font-size:1.4rem;height:48px}._sidebarMainBtn_65l8c_1:hover{background-color:var(--button-primary-bg-hover)}._sidebarMainBtn_65l8c_1:active{background-color:var(--button-primary-bg-active)}._popupContainer_vz8rg_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-bg);z-index:9999;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:1;transition:.2s;pointer-events:auto}._popupClosed_vz8rg_18{opacity:0;pointer-events:none}._popup_vz8rg_1{background-color:var(--card-bg);border-radius:8px;padding:12px;width:300px;height:auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}._popupIconContainer_vz8rg_35{display:flex;justify-content:center}._popupIcon_vz8rg_35{color:var(--icon-color)}._popupContent_vz8rg_44{display:flex;flex-direction:column;gap:8px}._popupTitle_4z5vb_1{margin:0;text-align:center;font-size:large;font-weight:700}[device-type=mobile] ._popupTitle_4z5vb_1{font-size:1.4rem}._popupDescription_4ewx1_1{text-align:center}[device-type=mobile] ._popupDescription_4ewx1_1{font-size:1.4rem}._popupInput_1b42s_1{width:100%;height:32px;background-color:var(--muted-bg);border:none;border-radius:5px;padding:4px 8px;font-size:1rem;color:var(--text-primary)}[device-type=mobile] ._popupInput_1b42s_1{font-size:1.4rem;height:48px}._popupActions_84v2b_1{display:flex;gap:8px}._popupBtn_ouvtc_1{width:100%;height:32px;border:none;border-radius:5px;font-weight:600;font-size:.9rem;background-color:var(--button-primary-bg);transition:background-color .2s;color:var(--text-inverse);cursor:pointer}[device-type=mobile] ._popupBtn_ouvtc_1{font-size:1.4rem;height:48px}._popupBtn_ouvtc_1:hover{background-color:var(--button-primary-bg-hover)}._popupBtn_ouvtc_1:active{background-color:var(--button-primary-bg-active)}._popupBtn_ouvtc_1._secondary_ouvtc_27{background-color:transparent;color:var(--text-primary);border:solid 1px var(--button-primary-bg);font-weight:400}._popupBtn_ouvtc_1._secondary_ouvtc_27:hover{background-color:var(--button-secondary-bg-hover)}._popupBtn_ouvtc_1._secondary_ouvtc_27:active{background-color:var(--button-secondary-bg-active)}._toolbar_1rbls_1{position:absolute;top:0;left:calc(var(--sidebar-width) + 10px);width:calc(100% - calc(var(--sidebar-width) + 15px));height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;z-index:9999;transition:top .3s,left .3s,width .3s}._toolbarCollapsed_1rbls_18{top:-100%}[device-type=mobile] ._toolbar_1rbls_1{top:5px;height:48px}._toolbarExpanded_1rbls_27{left:5px;width:calc(100% - 10px)}._toolbarTitle_1rbls_32{margin:0;font-size:1rem;font-weight:600}._toolbarActions_1rbls_38{background-color:var(--surface-bg);border-radius:16px;display:flex;flex-direction:row}._toolbarActions_1rbls_38 button{width:32px;height:32px;background-color:transparent;border:none;outline:none;color:var(--icon-color);cursor:pointer}._toolbarTitle_14yia_1{overflow-x:scroll;scrollbar-width:none;-ms-overflow-style:none}._toolbarTitle_14yia_1::-webkit-scrollbar{display:none}[device-type=mobile] ._toolbarTitle_14yia_1{font-size:1.4rem}._toolbarActions_l0jv2_1{background-color:var(--surface-bg);border-radius:16px;display:flex;flex-direction:row}[device-type=mobile] ._toolbarActions_l0jv2_1{border-radius:24px}._toolbarActions_l0jv2_1 button{background-color:transparent}._toolbarBtn_8jy1b_1{width:32px;height:32px;border:none;outline:none;padding:0;display:flex;justify-content:center;align-items:center;background-color:var(--surface-bg);border-radius:16px;color:var(--icon-color);transition:background-color .2s;cursor:pointer}._toolbarBtn_8jy1b_1:hover{background-color:var(--surface-bg-hover)}._toolbarBtn_8jy1b_1:active{background-color:var(--surface-bg-active)}[device-type=mobile] ._toolbarBtn_8jy1b_1{width:48px;height:48px;border-radius:24px}._sidebarIcon_1lib1_1{rotate:0deg;transition:rotate .3s}._sidebarIconExpanded_1lib1_6{rotate:180deg}._content_to68z_1{position:absolute;top:0;left:calc(var(--sidebar-width) + 10px);height:100%;width:calc(100% - calc(var(--sidebar-width) + 15px));transition:left .3s,width .3s;display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:auto;padding-bottom:5px}._contentExpanded_to68z_18{left:5px;width:calc(100% - 10px)}._toolbarPresent_to68z_23{top:37px;height:calc(100% - 37px)}[device-type=mobile] ._content_to68z_1._toolbarPresent_to68z_23{top:58px;height:calc(100% - 58px)}._contentNoMargin_to68z_33{padding:0;left:calc(var(--sidebar-width))}._contentExpanded_to68z_18._contentNoMargin_to68z_33{left:0;width:100%}._contextMenu_vtnpl_1{background-color:var(--surface-bg-active);position:fixed;border-radius:9px;transition:opacity .1s,transform .1s;display:flex;flex-direction:column;z-index:9999;border:solid 1px var(--border-color);transform:scale(.7) translate(var(--tx-start)) translateY(var(--ty-start));opacity:0;visibility:hidden;pointer-events:none;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:4px}._contextMenuOpen_vtnpl_22{visibility:visible;pointer-events:auto;transform:scale(1) translate(0) translateY(0);opacity:1}._listItem_7ga7e_1{padding:10px;transition:background-color .1s;border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:row;justify-content:start;align-items:center;gap:8px;width:100%}[device-type=mobile] ._listItem_7ga7e_1{font-size:1.4rem}._listItem_7ga7e_1:hover{background-color:var(--surface-bg-hover)}._listItem_7ga7e_1._selected_7ga7e_23{background-color:var(--surface-bg-active)}._emptyView_1synn_1{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;color:var(--text-secondary)}._card_zjz9h_1{background-color:var(--surface-bg);border-radius:9px;display:flex;flex-direction:column;border:solid 1px var(--border-color);padding:14px;margin:0 8px;width:calc(100% - 16px);gap:8px}._textInput_on5q4_1{width:100%;height:32px;background-color:var(--muted-bg);border:none;border-radius:5px;padding:4px 8px;font-size:.9rem;color:var(--text-primary);transition:background-color .2s}._textInput_on5q4_1:focus{outline:none;background-color:var(--surface-bg)}._textInput_on5q4_1:disabled{opacity:.5;cursor:not-allowed}._textInput_on5q4_1::placeholder{color:var(--text-secondary)}[device-type=mobile] ._textInput_on5q4_1{font-size:1.4rem;height:48px}._selectInput_3f04b_1{height:32px;background-color:var(--muted-bg);border:none;border-radius:5px;padding:4px 32px 4px 8px;font-size:.9rem;color:var(--text-primary);cursor:pointer;transition:background-color .2s;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-position:right 8px center}._selectInput_3f04b_1:hover{background-color:var(--surface-bg-hover)}._selectInput_3f04b_1:focus{outline:none;background-color:var(--surface-bg)}._selectInput_3f04b_1:disabled{opacity:.5;cursor:not-allowed}[device-type=mobile] ._selectInput_3f04b_1{font-size:1.4rem;height:48px}._button_g5rur_1{width:100%;height:32px;border:none;border-radius:5px;font-weight:600;font-size:.9rem;background-color:var(--button-primary-bg);transition:background-color .2s;color:var(--text-inverse);cursor:pointer}[device-type=mobile] ._button_g5rur_1{font-size:1.4rem;height:48px}._button_g5rur_1:hover{background-color:var(--button-primary-bg-hover)}._button_g5rur_1:active{background-color:var(--button-primary-bg-active)}._button_g5rur_1._secondary_g5rur_27{background-color:transparent;color:var(--text-primary);border:solid 1px var(--button-primary-bg);font-weight:400}._button_g5rur_1._secondary_g5rur_27:hover{background-color:var(--button-secondary-bg-hover)}._button_g5rur_1._secondary_g5rur_27:active{background-color:var(--button-secondary-bg-active)}._button_g5rur_1:disabled{background-color:var(--button-disabled-bg);color:var(--text-disabled);cursor:not-allowed;opacity:.6}._balloon_1jdjr_1{position:fixed;z-index:1000;display:flex;flex-direction:column;width:256px;padding:14px;gap:8px;border-radius:9px;background-color:var(--surface-bg);border:solid 1px var(--border-color);align-items:center;box-sizing:border-box;transform-origin:50% calc(100% + 8px);transform:translate(-50%,calc(-100% - 8px)) scale(.1);filter:opacity(0);transition:.3s;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}._balloonOpen_1jdjr_22{transform:translate(-50%,calc(-100% - 8px)) scale(1);filter:opacity(1);pointer-events:auto}._balloon_1jdjr_1:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background-color:var(--surface-bg);border-right:solid 1px var(--border-color);border-bottom:solid 1px var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}[device-type=mobile] ._balloon_1jdjr_1{font-size:1.4rem}`)),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),C=require("lucide-react"),I=i.createContext({isMobile:!1}),d=()=>i.useContext(I);function B({isMobile:t,sidebar:e,children:o,accentColor:n="#0088ff"}){return i.useLayoutEffect(()=>{n&&document.documentElement.style.setProperty("--accent",n)},[n]),s.jsx(I.Provider,{value:{isMobile:t},children:s.jsxs("div",{children:[s.jsx("aside",{children:e}),s.jsx("main",{children:o})]})})}const E="_sidebar_yoln4_1",g="_sidebarCollapsed_yoln4_18",S="_sidebarMobile_yoln4_22",P="_sidebarMobileHidden_yoln4_35",z="_sidebarContent_yoln4_39",D="_sidebarFooter_yoln4_48",u={sidebar:E,sidebarCollapsed:g,sidebarMobile:S,sidebarMobileHidden:P,sidebarContent:z,sidebarFooter:D};function A({open:t,footer:e,children:o}){const{isMobile:n}=d();return s.jsxs("div",{className:`
-        ${u.sidebar}
-        ${t?"":u.sidebarCollapsed}
-        ${n?u.sidebarMobile:""}
-        ${!t&&n?u.sidebarMobileHidden:""}`,children:[s.jsx("div",{className:u.sidebarContent,children:o}),e&&s.jsx("div",{className:u.sidebarFooter,children:e})]})}const w="_sidebarTitle_azx8n_1",R={sidebarTitle:w};function O({children:t}){return s.jsx("h2",{className:R.sidebarTitle,children:t})}const V="_sidebarItem_1e3ru_1",k="_selected_1e3ru_22",m={sidebarItem:V,selected:k};function q({onClick:t,onContextMenu:e,selected:o=!1,children:n}){const c=i.useRef(null),a=r=>{c.current=setTimeout(()=>{e&&(r.preventDefault(),e(r))},500)},l=()=>{c.current&&clearTimeout(c.current)};return s.jsx("div",{className:`${m.sidebarItem} ${o?m.selected:""}`,onClick:t,onContextMenu:r=>{r.preventDefault(),e&&e(r)},onTouchStart:a,onTouchEnd:l,onTouchMove:l,children:n})}const H="_sidebarMainBtn_65l8c_1",F={sidebarMainBtn:H};function L({onClick:t,children:e}){return s.jsx("button",{className:F.sidebarMainBtn,onClick:t,children:e})}const W="_popupContainer_vz8rg_1",K="_popupClosed_vz8rg_18",G="_popup_vz8rg_1",J="_popupContent_vz8rg_44",b={popupContainer:W,popupClosed:K,popup:G,popupContent:J};function Q({open:t=!1,children:e}){return s.jsx("div",{className:`${b.popupContainer} ${t?"":b.popupClosed}`,children:s.jsx("div",{className:b.popup,children:s.jsx("div",{className:b.popupContent,children:e})})})}const U="_popupTitle_4z5vb_1",X={popupTitle:U};function Y({children:t}){return s.jsx("span",{className:X.popupTitle,children:t})}const Z="_popupDescription_4ewx1_1",tt={popupDescription:Z};function et({children:t}){return s.jsx("span",{className:tt.popupDescription,children:t})}const ot="_popupInput_1b42s_1",nt={popupInput:ot},st=i.forwardRef(({placeholder:t="Enter text...",value:e,onChange:o,onSubmit:n,autoFocus:c},a)=>{const l=i.useRef(null),r=a||l;return i.useEffect(()=>{c&&r.current&&r.current.focus()},[c,r]),s.jsx("input",{ref:r,type:"text",className:nt.popupInput,placeholder:t,value:e,onChange:p=>o?.(p.target.value),onKeyDown:p=>{p.key==="Enter"&&n&&n(e||"")}})}),rt="_popupActions_84v2b_1",ct={popupActions:rt};function lt({orientation:t="vertical",children:e}){return s.jsx("div",{className:ct.popupActions,style:{flexDirection:t=="vertical"?"column":"row"},children:e})}const at="_popupBtn_ouvtc_1",it="_secondary_ouvtc_27",$={popupBtn:at,secondary:it};function pt({type:t="primary",onClick:e,children:o}){return s.jsx("button",{className:`${$.popupBtn} ${t=="secondary"?$.secondary:""}`,onClick:e,children:o})}const ut="_toolbar_1rbls_1",dt="_toolbarCollapsed_1rbls_18",bt="_toolbarExpanded_1rbls_27",_={toolbar:ut,toolbarCollapsed:dt,toolbarExpanded:bt};function _t({expanded:t=!0,collapsed:e=!1,children:o}){const{isMobile:n}=d();return s.jsx("div",{className:`${_.toolbar} ${t||n?_.toolbarExpanded:""} ${n?_.toolbarMobile:""} ${e?_.toolbarCollapsed:""}`,children:o})}const ft="_toolbarTitle_14yia_1",xt={toolbarTitle:ft};function yt({children:t}){return s.jsx("h3",{className:xt.toolbarTitle,children:t})}const mt="_toolbarActions_l0jv2_1",$t={toolbarActions:mt};function jt({children:t}){return s.jsx("div",{className:$t.toolbarActions,children:t})}const vt="_toolbarBtn_8jy1b_1",Tt={toolbarBtn:vt};function M({onClick:t,children:e}){return s.jsx("button",{onClick:o=>{o.preventDefault(),t&&t(o)},className:Tt.toolbarBtn,children:e})}const ht="_sidebarIcon_1lib1_1",It="_sidebarIconExpanded_1lib1_6",j={sidebarIcon:ht,sidebarIconExpanded:It};function Mt({onToggleSidebar:t,expanded:e=!1}){const{isMobile:o}=d();return s.jsx(M,{onClick:t,children:s.jsx(C.Menu,{size:o?24:18,className:`${j.sidebarIcon} ${e?j.sidebarIconExpanded:""}`})})}const Nt="_content_to68z_1",Ct="_contentExpanded_to68z_18",Bt="_toolbarPresent_to68z_23",Et="_contentNoMargin_to68z_33",f={content:Nt,contentExpanded:Ct,toolbarPresent:Bt,contentNoMargin:Et};function gt({expanded:t=!0,toolbar:e=!0,margin:o="default",children:n}){return s.jsx("div",{className:`${f.content} ${t?f.contentExpanded:""} ${e?f.toolbarPresent:""} ${o==="none"?f.contentNoMargin:""}`,children:n})}const St="_contextMenu_vtnpl_1",Pt="_contextMenuOpen_vtnpl_22",y={contextMenu:St,contextMenuOpen:Pt};function zt({open:t,x:e=20,y:o=20,from:n="top-left",children:c}){const{isMobile:a}=d(),l={"top-left":{tx:"-30%",ty:"-30%"},"top-right":{tx:"30%",ty:"-30%"},"bottom-left":{tx:"-30%",ty:"30%"},"bottom-right":{tx:"30%",ty:"30%"}},{tx:r,ty:p}=l[n],x={top:n.includes("top")?`${o}px`:"auto",bottom:n.includes("bottom")?`${o}px`:"auto",left:n.includes("left")?`${e}px`:"auto",right:n.includes("right")?`${e}px`:"auto","--tx-start":r,"--ty-start":p};return s.jsx("div",{className:`
-        ${y.contextMenu}
-        ${t?y.contextMenuOpen:""}
-        ${a?y.contextMenuMobile:""}
-        `,style:x,children:c})}const Dt="_listItem_7ga7e_1",At="_selected_7ga7e_23",v={listItem:Dt,selected:At};function wt({onClick:t,onContextMenu:e,selected:o=!1,children:n}){const c=i.useRef(null),a=r=>{c.current=setTimeout(()=>{e&&(r.preventDefault(),e(r))},500)},l=()=>{c.current&&clearTimeout(c.current)};return s.jsx("div",{className:`${v.listItem} ${o?v.selected:""}`,onClick:t,onContextMenu:r=>{r.preventDefault(),e&&e(r)},onTouchStart:a,onTouchEnd:l,onTouchMove:l,children:n})}function N({icon:t,size:e="default",color:o="default",className:n}){const{isMobile:c}=d(),a=e==="default"?c?24:18:e,l=o==="selected"?"var(--icon-color)":o;return o==="default"?s.jsx(t,{size:a,className:n,strokeWidth:c?2.5:2}):s.jsx(t,{size:a,color:l,className:n,strokeWidth:c?2.5:2})}const Rt="_emptyView_1synn_1",Ot={emptyView:Rt};function Vt({icon:t,label:e}){const{isMobile:o}=d(),n=o?64:48;return s.jsxs("div",{className:Ot.emptyView,children:[s.jsx(N,{icon:t,size:n,color:"var(--text-secondary)"}),s.jsx("h2",{children:e})]})}const kt="_card_zjz9h_1",qt={card:kt};function Ht({children:t}){return s.jsx("div",{className:qt.card,children:t})}const Ft="_textInput_on5q4_1",Lt={textInput:Ft},Wt=i.forwardRef(({placeholder:t,value:e,onChange:o,onFocus:n,onBlur:c,disabled:a=!1,type:l="text",className:r},p)=>s.jsx("input",{ref:p,type:l,className:`${Lt.textInput} ${r||""}`,placeholder:t,value:e,onChange:x=>o?.(x.target.value),onFocus:n,onBlur:c,disabled:a})),Kt="_selectInput_3f04b_1",Gt={selectInput:Kt},Jt=i.forwardRef(({className:t,children:e,...o},n)=>s.jsx("select",{ref:n,className:`${Gt.selectInput} ${t||""}`,...o,children:e})),Qt="_button_g5rur_1",Ut="_secondary_g5rur_27",T={button:Qt,secondary:Ut};function Xt({disabled:t=!1,type:e="primary",onClick:o,children:n,style:c}){return s.jsx("button",{className:`${T.button} ${e=="secondary"?T.secondary:""}`,onClick:o,disabled:t,style:c,children:n})}const Yt="_balloon_1jdjr_1",Zt="_balloonOpen_1jdjr_22",h={balloon:Yt,balloonOpen:Zt};function te({open:t,x:e,y:o,children:n,className:c,style:a,...l}){const r={};typeof e=="number"&&(r.left=e),typeof o=="number"&&(r.top=o);const p=[h.balloon,t?h.balloonOpen:"",c??""].filter(Boolean).join(" ");return s.jsx("div",{...l,className:p,style:{...a,...r},children:n})}exports.AppShell=B;exports.Balloon=te;exports.Button=Xt;exports.Card=Ht;exports.Content=gt;exports.ContextMenu=zt;exports.EmptyView=Vt;exports.Icon=N;exports.ListItem=wt;exports.Popup=Q;exports.PopupActions=lt;exports.PopupButton=pt;exports.PopupDescription=et;exports.PopupInput=st;exports.PopupTitle=Y;exports.SelectInput=Jt;exports.Sidebar=A;exports.SidebarButton=L;exports.SidebarItem=q;exports.SidebarTitle=O;exports.TextInput=Wt;exports.Toolbar=_t;exports.ToolbarActions=jt;exports.ToolbarButton=M;exports.ToolbarExpandSidebarButton=Mt;exports.ToolbarTitle=yt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),S=require("lucide-react"),C=a.createContext({isMobile:!1}),b=()=>a.useContext(C);function w({isMobile:t,sidebar:e,children:o,accentColor:s="#0088ff"}){return a.useLayoutEffect(()=>{s&&document.documentElement.style.setProperty("--accent",s)},[s]),n.jsx(C.Provider,{value:{isMobile:t},children:n.jsxs("div",{children:[n.jsx("aside",{children:e}),n.jsx("main",{children:o})]})})}const P="_sidebar_yoln4_1",z="_sidebarCollapsed_yoln4_18",R="_sidebarMobile_yoln4_22",D="_sidebarMobileHidden_yoln4_35",A="_sidebarContent_yoln4_39",O="_sidebarFooter_yoln4_48",d={sidebar:P,sidebarCollapsed:z,sidebarMobile:R,sidebarMobileHidden:D,sidebarContent:A,sidebarFooter:O};function H({open:t,footer:e,children:o}){const{isMobile:s}=b();return n.jsxs("div",{className:`
+        ${d.sidebar}
+        ${t?"":d.sidebarCollapsed}
+        ${s?d.sidebarMobile:""}
+        ${!t&&s?d.sidebarMobileHidden:""}`,children:[n.jsx("div",{className:d.sidebarContent,children:o}),e&&n.jsx("div",{className:d.sidebarFooter,children:e})]})}const V="_sidebarTitle_azx8n_1",k={sidebarTitle:V};function L({children:t}){return n.jsx("h2",{className:k.sidebarTitle,children:t})}const q="_sidebarItem_1e3ru_1",W="_selected_1e3ru_22",v={sidebarItem:q,selected:W};function F({onClick:t,onContextMenu:e,selected:o=!1,children:s}){const i=a.useRef(null),c=r=>{i.current=setTimeout(()=>{e&&(r.preventDefault(),e(r))},500)},l=()=>{i.current&&clearTimeout(i.current)};return n.jsx("div",{className:`${v.sidebarItem} ${o?v.selected:""}`,onClick:t,onContextMenu:r=>{r.preventDefault(),e&&e(r)},onTouchStart:c,onTouchEnd:l,onTouchMove:l,children:s})}const K="_sidebarMainBtn_65l8c_1",G={sidebarMainBtn:K};function J({onClick:t,children:e}){return n.jsx("button",{className:G.sidebarMainBtn,onClick:t,children:e})}const Q="_popupContainer_vz8rg_1",U="_popupClosed_vz8rg_18",X="_popup_vz8rg_1",Y="_popupContent_vz8rg_44",x={popupContainer:Q,popupClosed:U,popup:X,popupContent:Y};function Z({open:t=!1,children:e}){return n.jsx("div",{className:`${x.popupContainer} ${t?"":x.popupClosed}`,children:n.jsx("div",{className:x.popup,children:n.jsx("div",{className:x.popupContent,children:e})})})}const tt="_popupTitle_4z5vb_1",et={popupTitle:tt};function ot({children:t}){return n.jsx("span",{className:et.popupTitle,children:t})}const nt="_popupDescription_4ewx1_1",st={popupDescription:nt};function rt({children:t}){return n.jsx("span",{className:st.popupDescription,children:t})}const it="_popupInput_1b42s_1",ct={popupInput:it},lt=a.forwardRef(({placeholder:t="Enter text...",value:e,onChange:o,onSubmit:s,autoFocus:i},c)=>{const l=a.useRef(null),r=c||l;return a.useEffect(()=>{i&&r.current&&r.current.focus()},[i,r]),n.jsx("input",{ref:r,type:"text",className:ct.popupInput,placeholder:t,value:e,onChange:p=>o?.(p.target.value),onKeyDown:p=>{p.key==="Enter"&&s&&s(e||"")}})}),at="_popupActions_84v2b_1",pt={popupActions:at};function ut({orientation:t="vertical",children:e}){return n.jsx("div",{className:pt.popupActions,style:{flexDirection:t=="vertical"?"column":"row"},children:e})}const dt="_popupBtn_ouvtc_1",bt="_secondary_ouvtc_27",h={popupBtn:dt,secondary:bt};function _t({type:t="primary",onClick:e,children:o}){return n.jsx("button",{className:`${h.popupBtn} ${t=="secondary"?h.secondary:""}`,onClick:e,children:o})}const ft="_toolbar_1rbls_1",xt="_toolbarCollapsed_1rbls_18",mt="_toolbarExpanded_1rbls_27",m={toolbar:ft,toolbarCollapsed:xt,toolbarExpanded:mt};function yt({expanded:t=!0,collapsed:e=!1,children:o}){const{isMobile:s}=b();return n.jsx("div",{className:`${m.toolbar} ${t||s?m.toolbarExpanded:""} ${s?m.toolbarMobile:""} ${e?m.toolbarCollapsed:""}`,children:o})}const $t="_toolbarTitle_14yia_1",vt={toolbarTitle:$t};function ht({children:t}){return n.jsx("h3",{className:vt.toolbarTitle,children:t})}const jt="_toolbarActions_l0jv2_1",Tt={toolbarActions:jt};function It({children:t}){return n.jsx("div",{className:Tt.toolbarActions,children:t})}const Mt="_toolbarBtn_8jy1b_1",Ct={toolbarBtn:Mt};function N({onClick:t,children:e}){return n.jsx("button",{onClick:o=>{o.preventDefault(),t&&t(o)},className:Ct.toolbarBtn,children:e})}const Nt="_sidebarIcon_1lib1_1",Bt="_sidebarIconExpanded_1lib1_6",j={sidebarIcon:Nt,sidebarIconExpanded:Bt};function Et({onToggleSidebar:t,expanded:e=!1}){const{isMobile:o}=b();return n.jsx(N,{onClick:t,children:n.jsx(S.Menu,{size:o?24:18,className:`${j.sidebarIcon} ${e?j.sidebarIconExpanded:""}`})})}const gt="_content_to68z_1",St="_contentExpanded_to68z_18",wt="_toolbarPresent_to68z_23",Pt="_contentNoMargin_to68z_33",y={content:gt,contentExpanded:St,toolbarPresent:wt,contentNoMargin:Pt};function zt({expanded:t=!0,toolbar:e=!0,margin:o="default",children:s}){return n.jsx("div",{className:`${y.content} ${t?y.contentExpanded:""} ${e?y.toolbarPresent:""} ${o==="none"?y.contentNoMargin:""}`,children:s})}const Rt="_contextMenu_vtnpl_1",Dt="_contextMenuOpen_vtnpl_22",$={contextMenu:Rt,contextMenuOpen:Dt};function At({open:t,x:e,y:o,children:s}){const{isMobile:i}=b(),c=a.useRef(null),[l,r]=a.useState({top:0,left:0});a.useLayoutEffect(()=>{if(t&&c.current){const u=c.current.getBoundingClientRect(),E=window.innerWidth,g=window.innerHeight;let _=e,f=o;e+u.width>E&&(_=e-u.width),o+u.height>g&&(f=o-u.height),_=Math.max(5,_),f=Math.max(5,f),r({top:f,left:_})}},[t,e,o]);const p={top:`${l.top}px`,left:`${l.left}px`,position:"fixed",visibility:t?"visible":"hidden",opacity:t?1:0};return n.jsx("div",{ref:c,className:`
+        ${$.contextMenu}
+        ${t?$.contextMenuOpen:""}
+        ${i?$.contextMenuMobile:""}
+      `,style:p,children:s})}const Ot="_listItem_7ga7e_1",Ht="_selected_7ga7e_23",T={listItem:Ot,selected:Ht};function Vt({onClick:t,onContextMenu:e,selected:o=!1,children:s}){const i=a.useRef(null),c=r=>{i.current=setTimeout(()=>{e&&(r.preventDefault(),e(r))},500)},l=()=>{i.current&&clearTimeout(i.current)};return n.jsx("div",{className:`${T.listItem} ${o?T.selected:""}`,onClick:t,onContextMenu:r=>{r.preventDefault(),e&&e(r)},onTouchStart:c,onTouchEnd:l,onTouchMove:l,children:s})}function B({icon:t,size:e="default",color:o="default",className:s}){const{isMobile:i}=b(),c=e==="default"?i?24:18:e,l=o==="selected"?"var(--icon-color)":o;return o==="default"?n.jsx(t,{size:c,className:s,strokeWidth:i?2.5:2}):n.jsx(t,{size:c,color:l,className:s,strokeWidth:i?2.5:2})}const kt="_emptyView_1synn_1",Lt={emptyView:kt};function qt({icon:t,label:e}){const{isMobile:o}=b(),s=o?64:48;return n.jsxs("div",{className:Lt.emptyView,children:[n.jsx(B,{icon:t,size:s,color:"var(--text-secondary)"}),n.jsx("h2",{children:e})]})}const Wt="_card_zjz9h_1",Ft={card:Wt};function Kt({children:t}){return n.jsx("div",{className:Ft.card,children:t})}const Gt="_textInput_on5q4_1",Jt={textInput:Gt},Qt=a.forwardRef(({placeholder:t,value:e,onChange:o,onFocus:s,onBlur:i,disabled:c=!1,type:l="text",className:r},p)=>n.jsx("input",{ref:p,type:l,className:`${Jt.textInput} ${r||""}`,placeholder:t,value:e,onChange:u=>o?.(u.target.value),onFocus:s,onBlur:i,disabled:c})),Ut="_selectInput_3f04b_1",Xt={selectInput:Ut},Yt=a.forwardRef(({className:t,children:e,...o},s)=>n.jsx("select",{ref:s,className:`${Xt.selectInput} ${t||""}`,...o,children:e})),Zt="_button_g5rur_1",te="_secondary_g5rur_27",I={button:Zt,secondary:te};function ee({disabled:t=!1,type:e="primary",onClick:o,children:s,style:i}){return n.jsx("button",{className:`${I.button} ${e=="secondary"?I.secondary:""}`,onClick:o,disabled:t,style:i,children:s})}const oe="_balloon_1jdjr_1",ne="_balloonOpen_1jdjr_22",M={balloon:oe,balloonOpen:ne};function se({open:t,x:e,y:o,children:s,className:i,style:c,...l}){const r={};typeof e=="number"&&(r.left=e),typeof o=="number"&&(r.top=o);const p=[M.balloon,t?M.balloonOpen:"",i??""].filter(Boolean).join(" ");return n.jsx("div",{...l,className:p,style:{...c,...r},children:s})}exports.AppShell=w;exports.Balloon=se;exports.Button=ee;exports.Card=Kt;exports.Content=zt;exports.ContextMenu=At;exports.EmptyView=qt;exports.Icon=B;exports.ListItem=Vt;exports.Popup=Z;exports.PopupActions=ut;exports.PopupButton=_t;exports.PopupDescription=rt;exports.PopupInput=lt;exports.PopupTitle=ot;exports.SelectInput=Yt;exports.Sidebar=H;exports.SidebarButton=J;exports.SidebarItem=F;exports.SidebarTitle=L;exports.TextInput=Qt;exports.Toolbar=yt;exports.ToolbarActions=It;exports.ToolbarButton=N;exports.ToolbarExpandSidebarButton=Et;exports.ToolbarTitle=ht;

package/dist/htmlos-ui.js

@@ -1,150 +1,150 @@
 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(`:root{--accent: #0088ff;--button-primary-bg: var(--accent);--button-primary-bg-hover: color-mix(in srgb, var(--accent), black 15%);--button-primary-bg-active: color-mix(in srgb, var(--accent), black 30%);--button-secondary-bg-hover: color-mix(in srgb, var(--accent), white 90%);--button-secondary-bg-active: color-mix(in srgb, var(--accent), white 90%);--button-disabled-bg: color-mix(in srgb, var(--accent), white 60%);--text-disabled: color-mix(in srgb, var(--text-primary), white 40%);--icon-color: var(--accent);--border-color: #0000001a;--surface-bg: #ffffff7a;--surface-bg-hover: #ffffffa1;--surface-bg-active: #ffffffd5;--card-bg: #e5e5e5;--card-bg-secondary: #f5f5f5;--overlay-bg: rgba(0, 0, 0, .4);--muted-bg: rgba(0, 0, 0, .06);--text-primary: #000000;--text-secondary: #8b8b8b;--text-inverse: #ffffff;--sidebar-width: 200px}[data-theme=dark]{--button-secondary-bg-hover: #252628;--button-secondary-bg-active: #2b2f35;--button-disabled-bg: color-mix(in srgb, var(--accent), black 60%);--text-disabled: color-mix(in srgb, var(--text-primary), black 40%);--surface-bg: #1e1e1e7a;--surface-bg-hover: #2a2a2aa1;--surface-bg-active: #3a3a3ad5;--card-bg: #1d1d1d;--card-bg-secondary: #2a2a2a;--overlay-bg: rgba(255, 255, 255, .4);--muted-bg: rgba(255, 255, 255, .12);--text-primary: #ffffff;--text-inverse: #000000;--text-secondary: #b3b3b3}body{color:var(--text-primary);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[device-type=mobile] body{background-color:var(--card-bg-secondary)!important}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}._sidebar_yoln4_1{width:var(--sidebar-width);background-color:var(--surface-bg);position:absolute;top:0;bottom:5px;height:auto;left:5px;border-radius:9px;transition:left .3s;display:flex;flex-direction:column;z-index:999;border:solid 1px var(--border-color);transform:translate(0)}._sidebarCollapsed_yoln4_18{left:calc(-1 * var(--sidebar-width) - 10px)}[device-type=mobile] ._sidebar_yoln4_1._sidebarMobile_yoln4_22{position:absolute;inset:0;width:auto;height:auto;border-radius:0;transition:transform .25s ease;background-color:var(--card-bg)}[device-type=mobile] ._sidebar_yoln4_1._sidebarMobile_yoln4_22._sidebarMobileHidden_yoln4_35{transform:translate(-105%)}._sidebarContent_yoln4_39{height:100%;padding:0 4px;display:flex;flex-direction:column;overflow-y:auto;gap:2px}._sidebarFooter_yoln4_48{padding:4px}._sidebarTitle_azx8n_1{font-size:.8rem;font-weight:600;margin:8px 8px 8px 4px;color:var(--text-secondary)}[device-type=mobile] ._sidebarTitle_azx8n_1{font-size:1.2rem}._sidebarItem_1e3ru_1{padding:6px;transition:background-color .1s;border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:row;justify-content:start;align-items:center;gap:8px}[device-type=mobile] ._sidebarItem_1e3ru_1{font-size:1.4rem}._sidebarItem_1e3ru_1:hover{background-color:var(--surface-bg-hover)}._sidebarItem_1e3ru_1._selected_1e3ru_22{background-color:var(--surface-bg-active);color:var(--icon-color)}._sidebarMainBtn_65l8c_1{width:calc(100% - 8px);background-color:var(--button-primary-bg);border:none;outline:none;color:var(--text-inverse);border-radius:5px;height:32px;margin:4px;font-weight:600;font-size:.9rem;transition:background-color .2s;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:8px;cursor:pointer}[device-type=mobile] ._sidebarMainBtn_65l8c_1{font-size:1.4rem;height:48px}._sidebarMainBtn_65l8c_1:hover{background-color:var(--button-primary-bg-hover)}._sidebarMainBtn_65l8c_1:active{background-color:var(--button-primary-bg-active)}._popupContainer_vz8rg_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-bg);z-index:9999;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:1;transition:.2s;pointer-events:auto}._popupClosed_vz8rg_18{opacity:0;pointer-events:none}._popup_vz8rg_1{background-color:var(--card-bg);border-radius:8px;padding:12px;width:300px;height:auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}._popupIconContainer_vz8rg_35{display:flex;justify-content:center}._popupIcon_vz8rg_35{color:var(--icon-color)}._popupContent_vz8rg_44{display:flex;flex-direction:column;gap:8px}._popupTitle_4z5vb_1{margin:0;text-align:center;font-size:large;font-weight:700}[device-type=mobile] ._popupTitle_4z5vb_1{font-size:1.4rem}._popupDescription_4ewx1_1{text-align:center}[device-type=mobile] ._popupDescription_4ewx1_1{font-size:1.4rem}._popupInput_1b42s_1{width:100%;height:32px;background-color:var(--muted-bg);border:none;border-radius:5px;padding:4px 8px;font-size:1rem;color:var(--text-primary)}[device-type=mobile] ._popupInput_1b42s_1{font-size:1.4rem;height:48px}._popupActions_84v2b_1{display:flex;gap:8px}._popupBtn_ouvtc_1{width:100%;height:32px;border:none;border-radius:5px;font-weight:600;font-size:.9rem;background-color:var(--button-primary-bg);transition:background-color .2s;color:var(--text-inverse);cursor:pointer}[device-type=mobile] ._popupBtn_ouvtc_1{font-size:1.4rem;height:48px}._popupBtn_ouvtc_1:hover{background-color:var(--button-primary-bg-hover)}._popupBtn_ouvtc_1:active{background-color:var(--button-primary-bg-active)}._popupBtn_ouvtc_1._secondary_ouvtc_27{background-color:transparent;color:var(--text-primary);border:solid 1px var(--button-primary-bg);font-weight:400}._popupBtn_ouvtc_1._secondary_ouvtc_27:hover{background-color:var(--button-secondary-bg-hover)}._popupBtn_ouvtc_1._secondary_ouvtc_27:active{background-color:var(--button-secondary-bg-active)}._toolbar_1rbls_1{position:absolute;top:0;left:calc(var(--sidebar-width) + 10px);width:calc(100% - calc(var(--sidebar-width) + 15px));height:32px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;z-index:9999;transition:top .3s,left .3s,width .3s}._toolbarCollapsed_1rbls_18{top:-100%}[device-type=mobile] ._toolbar_1rbls_1{top:5px;height:48px}._toolbarExpanded_1rbls_27{left:5px;width:calc(100% - 10px)}._toolbarTitle_1rbls_32{margin:0;font-size:1rem;font-weight:600}._toolbarActions_1rbls_38{background-color:var(--surface-bg);border-radius:16px;display:flex;flex-direction:row}._toolbarActions_1rbls_38 button{width:32px;height:32px;background-color:transparent;border:none;outline:none;color:var(--icon-color);cursor:pointer}._toolbarTitle_14yia_1{overflow-x:scroll;scrollbar-width:none;-ms-overflow-style:none}._toolbarTitle_14yia_1::-webkit-scrollbar{display:none}[device-type=mobile] ._toolbarTitle_14yia_1{font-size:1.4rem}._toolbarActions_l0jv2_1{background-color:var(--surface-bg);border-radius:16px;display:flex;flex-direction:row}[device-type=mobile] ._toolbarActions_l0jv2_1{border-radius:24px}._toolbarActions_l0jv2_1 button{background-color:transparent}._toolbarBtn_8jy1b_1{width:32px;height:32px;border:none;outline:none;padding:0;display:flex;justify-content:center;align-items:center;background-color:var(--surface-bg);border-radius:16px;color:var(--icon-color);transition:background-color .2s;cursor:pointer}._toolbarBtn_8jy1b_1:hover{background-color:var(--surface-bg-hover)}._toolbarBtn_8jy1b_1:active{background-color:var(--surface-bg-active)}[device-type=mobile] ._toolbarBtn_8jy1b_1{width:48px;height:48px;border-radius:24px}._sidebarIcon_1lib1_1{rotate:0deg;transition:rotate .3s}._sidebarIconExpanded_1lib1_6{rotate:180deg}._content_to68z_1{position:absolute;top:0;left:calc(var(--sidebar-width) + 10px);height:100%;width:calc(100% - calc(var(--sidebar-width) + 15px));transition:left .3s,width .3s;display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:auto;padding-bottom:5px}._contentExpanded_to68z_18{left:5px;width:calc(100% - 10px)}._toolbarPresent_to68z_23{top:37px;height:calc(100% - 37px)}[device-type=mobile] ._content_to68z_1._toolbarPresent_to68z_23{top:58px;height:calc(100% - 58px)}._contentNoMargin_to68z_33{padding:0;left:calc(var(--sidebar-width))}._contentExpanded_to68z_18._contentNoMargin_to68z_33{left:0;width:100%}._contextMenu_vtnpl_1{background-color:var(--surface-bg-active);position:fixed;border-radius:9px;transition:opacity .1s,transform .1s;display:flex;flex-direction:column;z-index:9999;border:solid 1px var(--border-color);transform:scale(.7) translate(var(--tx-start)) translateY(var(--ty-start));opacity:0;visibility:hidden;pointer-events:none;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:4px}._contextMenuOpen_vtnpl_22{visibility:visible;pointer-events:auto;transform:scale(1) translate(0) translateY(0);opacity:1}._listItem_7ga7e_1{padding:10px;transition:background-color .1s;border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:row;justify-content:start;align-items:center;gap:8px;width:100%}[device-type=mobile] ._listItem_7ga7e_1{font-size:1.4rem}._listItem_7ga7e_1:hover{background-color:var(--surface-bg-hover)}._listItem_7ga7e_1._selected_7ga7e_23{background-color:var(--surface-bg-active)}._emptyView_1synn_1{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;color:var(--text-secondary)}._card_zjz9h_1{background-color:var(--surface-bg);border-radius:9px;display:flex;flex-direction:column;border:solid 1px var(--border-color);padding:14px;margin:0 8px;width:calc(100% - 16px);gap:8px}._textInput_on5q4_1{width:100%;height:32px;background-color:var(--muted-bg);border:none;border-radius:5px;padding:4px 8px;font-size:.9rem;color:var(--text-primary);transition:background-color .2s}._textInput_on5q4_1:focus{outline:none;background-color:var(--surface-bg)}._textInput_on5q4_1:disabled{opacity:.5;cursor:not-allowed}._textInput_on5q4_1::placeholder{color:var(--text-secondary)}[device-type=mobile] ._textInput_on5q4_1{font-size:1.4rem;height:48px}._selectInput_3f04b_1{height:32px;background-color:var(--muted-bg);border:none;border-radius:5px;padding:4px 32px 4px 8px;font-size:.9rem;color:var(--text-primary);cursor:pointer;transition:background-color .2s;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 10L12 6" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');background-repeat:no-repeat;background-position:right 8px center}._selectInput_3f04b_1:hover{background-color:var(--surface-bg-hover)}._selectInput_3f04b_1:focus{outline:none;background-color:var(--surface-bg)}._selectInput_3f04b_1:disabled{opacity:.5;cursor:not-allowed}[device-type=mobile] ._selectInput_3f04b_1{font-size:1.4rem;height:48px}._button_g5rur_1{width:100%;height:32px;border:none;border-radius:5px;font-weight:600;font-size:.9rem;background-color:var(--button-primary-bg);transition:background-color .2s;color:var(--text-inverse);cursor:pointer}[device-type=mobile] ._button_g5rur_1{font-size:1.4rem;height:48px}._button_g5rur_1:hover{background-color:var(--button-primary-bg-hover)}._button_g5rur_1:active{background-color:var(--button-primary-bg-active)}._button_g5rur_1._secondary_g5rur_27{background-color:transparent;color:var(--text-primary);border:solid 1px var(--button-primary-bg);font-weight:400}._button_g5rur_1._secondary_g5rur_27:hover{background-color:var(--button-secondary-bg-hover)}._button_g5rur_1._secondary_g5rur_27:active{background-color:var(--button-secondary-bg-active)}._button_g5rur_1:disabled{background-color:var(--button-disabled-bg);color:var(--text-disabled);cursor:not-allowed;opacity:.6}._balloon_1jdjr_1{position:fixed;z-index:1000;display:flex;flex-direction:column;width:256px;padding:14px;gap:8px;border-radius:9px;background-color:var(--surface-bg);border:solid 1px var(--border-color);align-items:center;box-sizing:border-box;transform-origin:50% calc(100% + 8px);transform:translate(-50%,calc(-100% - 8px)) scale(.1);filter:opacity(0);transition:.3s;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}._balloonOpen_1jdjr_22{transform:translate(-50%,calc(-100% - 8px)) scale(1);filter:opacity(1);pointer-events:auto}._balloon_1jdjr_1:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background-color:var(--surface-bg);border-right:solid 1px var(--border-color);border-bottom:solid 1px var(--border-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}[device-type=mobile] ._balloon_1jdjr_1{font-size:1.4rem}`)),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
-import { createContext as E, useContext as g, useLayoutEffect as B, useRef as $, forwardRef as v, useEffect as z } from "react";
-import { Menu as D } from "lucide-react";
-const C = E({ isMobile: !1 }), u = () => g(C);
-function Vt({
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { createContext as S, useContext as D, useLayoutEffect as E, useRef as $, forwardRef as x, useEffect as P, useState as j } from "react";
+import { Menu as A } from "lucide-react";
+const B = S({ isMobile: !1 }), d = () => D(B);
+function qt({
   isMobile: t,
   sidebar: e,
-  children: o,
-  accentColor: n = "#0088ff"
+  children: n,
+  accentColor: s = "#0088ff"
 }) {
-  return B(() => {
-    n && document.documentElement.style.setProperty("--accent", n);
-  }, [n]), /* @__PURE__ */ s(C.Provider, { value: { isMobile: t }, children: /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ s("aside", { children: e }),
-    /* @__PURE__ */ s("main", { children: o })
+  return E(() => {
+    s && document.documentElement.style.setProperty("--accent", s);
+  }, [s]), /* @__PURE__ */ o(B.Provider, { value: { isMobile: t }, children: /* @__PURE__ */ h("div", { children: [
+    /* @__PURE__ */ o("aside", { children: e }),
+    /* @__PURE__ */ o("main", { children: n })
   ] }) });
 }
-const S = "_sidebar_yoln4_1", P = "_sidebarCollapsed_yoln4_18", j = "_sidebarMobile_yoln4_22", A = "_sidebarMobileHidden_yoln4_35", w = "_sidebarContent_yoln4_39", O = "_sidebarFooter_yoln4_48", p = {
-  sidebar: S,
-  sidebarCollapsed: P,
-  sidebarMobile: j,
-  sidebarMobileHidden: A,
-  sidebarContent: w,
-  sidebarFooter: O
+const R = "_sidebar_yoln4_1", O = "_sidebarCollapsed_yoln4_18", H = "_sidebarMobile_yoln4_22", k = "_sidebarMobileHidden_yoln4_35", V = "_sidebarContent_yoln4_39", W = "_sidebarFooter_yoln4_48", u = {
+  sidebar: R,
+  sidebarCollapsed: O,
+  sidebarMobile: H,
+  sidebarMobileHidden: k,
+  sidebarContent: V,
+  sidebarFooter: W
 };
-function Ht({ open: t, footer: e, children: o }) {
-  const { isMobile: n } = u();
-  return /* @__PURE__ */ m(
+function Kt({ open: t, footer: e, children: n }) {
+  const { isMobile: s } = d();
+  return /* @__PURE__ */ h(
     "div",
     {
       className: `
-        ${p.sidebar}
-        ${t ? "" : p.sidebarCollapsed}
-        ${n ? p.sidebarMobile : ""}
-        ${!t && n ? p.sidebarMobileHidden : ""}`,
+        ${u.sidebar}
+        ${t ? "" : u.sidebarCollapsed}
+        ${s ? u.sidebarMobile : ""}
+        ${!t && s ? u.sidebarMobileHidden : ""}`,
       children: [
-        /* @__PURE__ */ s("div", { className: p.sidebarContent, children: o }),
-        e && /* @__PURE__ */ s("div", { className: p.sidebarFooter, children: e })
+        /* @__PURE__ */ o("div", { className: u.sidebarContent, children: n }),
+        e && /* @__PURE__ */ o("div", { className: u.sidebarFooter, children: e })
       ]
     }
   );
 }
-const R = "_sidebarTitle_azx8n_1", k = {
-  sidebarTitle: R
+const F = "_sidebarTitle_azx8n_1", L = {
+  sidebarTitle: F
 };
-function Ft({ children: t }) {
-  return /* @__PURE__ */ s("h2", { className: k.sidebarTitle, children: t });
+function Gt({ children: t }) {
+  return /* @__PURE__ */ o("h2", { className: L.sidebarTitle, children: t });
 }
-const V = "_sidebarItem_1e3ru_1", H = "_selected_1e3ru_22", x = {
-  sidebarItem: V,
-  selected: H
+const q = "_sidebarItem_1e3ru_1", K = "_selected_1e3ru_22", M = {
+  sidebarItem: q,
+  selected: K
 };
-function Lt({
+function Jt({
   onClick: t,
   onContextMenu: e,
-  selected: o = !1,
-  children: n
+  selected: n = !1,
+  children: s
 }) {
-  const r = $(null), a = (c) => {
-    r.current = setTimeout(() => {
-      e && (c.preventDefault(), e(c));
+  const c = $(null), i = (r) => {
+    c.current = setTimeout(() => {
+      e && (r.preventDefault(), e(r));
     }, 500);
   }, l = () => {
-    r.current && clearTimeout(r.current);
+    c.current && clearTimeout(c.current);
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `${x.sidebarItem} ${o ? x.selected : ""}`,
+      className: `${M.sidebarItem} ${n ? M.selected : ""}`,
       onClick: t,
-      onContextMenu: (c) => {
-        c.preventDefault(), e && e(c);
+      onContextMenu: (r) => {
+        r.preventDefault(), e && e(r);
       },
-      onTouchStart: a,
+      onTouchStart: i,
       onTouchEnd: l,
       onTouchMove: l,
-      children: n
+      children: s
     }
   );
 }
-const F = "_sidebarMainBtn_65l8c_1", L = {
-  sidebarMainBtn: F
+const G = "_sidebarMainBtn_65l8c_1", J = {
+  sidebarMainBtn: G
 };
-function Wt({ onClick: t, children: e }) {
-  return /* @__PURE__ */ s("button", { className: L.sidebarMainBtn, onClick: t, children: e });
+function Qt({ onClick: t, children: e }) {
+  return /* @__PURE__ */ o("button", { className: J.sidebarMainBtn, onClick: t, children: e });
 }
-const W = "_popupContainer_vz8rg_1", q = "_popupClosed_vz8rg_18", K = "_popup_vz8rg_1", G = "_popupContent_vz8rg_44", d = {
-  popupContainer: W,
-  popupClosed: q,
-  popup: K,
-  popupContent: G
+const Q = "_popupContainer_vz8rg_1", U = "_popupClosed_vz8rg_18", X = "_popup_vz8rg_1", Y = "_popupContent_vz8rg_44", f = {
+  popupContainer: Q,
+  popupClosed: U,
+  popup: X,
+  popupContent: Y
 };
-function qt({ open: t = !1, children: e }) {
-  return /* @__PURE__ */ s(
+function Ut({ open: t = !1, children: e }) {
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `${d.popupContainer} ${t ? "" : d.popupClosed}`,
-      children: /* @__PURE__ */ s("div", { className: d.popup, children: /* @__PURE__ */ s("div", { className: d.popupContent, children: e }) })
+      className: `${f.popupContainer} ${t ? "" : f.popupClosed}`,
+      children: /* @__PURE__ */ o("div", { className: f.popup, children: /* @__PURE__ */ o("div", { className: f.popupContent, children: e }) })
     }
   );
 }
-const J = "_popupTitle_4z5vb_1", Q = {
-  popupTitle: J
+const Z = "_popupTitle_4z5vb_1", tt = {
+  popupTitle: Z
 };
-function Kt({ children: t }) {
-  return /* @__PURE__ */ s("span", { className: Q.popupTitle, children: t });
+function Xt({ children: t }) {
+  return /* @__PURE__ */ o("span", { className: tt.popupTitle, children: t });
 }
-const U = "_popupDescription_4ewx1_1", X = {
-  popupDescription: U
+const et = "_popupDescription_4ewx1_1", nt = {
+  popupDescription: et
 };
-function Gt({ children: t }) {
-  return /* @__PURE__ */ s("span", { className: X.popupDescription, children: t });
+function Yt({ children: t }) {
+  return /* @__PURE__ */ o("span", { className: nt.popupDescription, children: t });
 }
-const Y = "_popupInput_1b42s_1", Z = {
-  popupInput: Y
-}, Jt = v(
-  ({ placeholder: t = "Enter text...", value: e, onChange: o, onSubmit: n, autoFocus: r }, a) => {
-    const l = $(null), c = a || l;
-    return z(() => {
-      r && c.current && c.current.focus();
-    }, [r, c]), /* @__PURE__ */ s(
+const ot = "_popupInput_1b42s_1", st = {
+  popupInput: ot
+}, Zt = x(
+  ({ placeholder: t = "Enter text...", value: e, onChange: n, onSubmit: s, autoFocus: c }, i) => {
+    const l = $(null), r = i || l;
+    return P(() => {
+      c && r.current && r.current.focus();
+    }, [c, r]), /* @__PURE__ */ o(
       "input",
       {
-        ref: c,
+        ref: r,
         type: "text",
-        className: Z.popupInput,
+        className: st.popupInput,
         placeholder: t,
         value: e,
-        onChange: (i) => o?.(i.target.value),
-        onKeyDown: (i) => {
-          i.key === "Enter" && n && n(e || "");
+        onChange: (a) => n?.(a.target.value),
+        onKeyDown: (a) => {
+          a.key === "Enter" && s && s(e || "");
         }
       }
     );
   }
-), tt = "_popupActions_84v2b_1", et = {
-  popupActions: tt
+), rt = "_popupActions_84v2b_1", ct = {
+  popupActions: rt
 };
-function Qt({
+function te({
   orientation: t = "vertical",
   children: e
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: et.popupActions,
+      className: ct.popupActions,
       style: {
         flexDirection: t == "vertical" ? "column" : "row"
       },
@@ -152,331 +152,329 @@ function Qt({
     }
   );
 }
-const ot = "_popupBtn_ouvtc_1", nt = "_secondary_ouvtc_27", h = {
-  popupBtn: ot,
-  secondary: nt
+const it = "_popupBtn_ouvtc_1", lt = "_secondary_ouvtc_27", T = {
+  popupBtn: it,
+  secondary: lt
 };
-function Ut({
+function ee({
   type: t = "primary",
   onClick: e,
-  children: o
+  children: n
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "button",
     {
-      className: `${h.popupBtn} ${t == "secondary" ? h.secondary : ""}`,
+      className: `${T.popupBtn} ${t == "secondary" ? T.secondary : ""}`,
       onClick: e,
-      children: o
+      children: n
     }
   );
 }
-const st = "_toolbar_1rbls_1", ct = "_toolbarCollapsed_1rbls_18", rt = "_toolbarExpanded_1rbls_27", b = {
-  toolbar: st,
-  toolbarCollapsed: ct,
-  toolbarExpanded: rt
+const at = "_toolbar_1rbls_1", pt = "_toolbarCollapsed_1rbls_18", ut = "_toolbarExpanded_1rbls_27", m = {
+  toolbar: at,
+  toolbarCollapsed: pt,
+  toolbarExpanded: ut
 };
-function Xt({
+function ne({
   expanded: t = !0,
   collapsed: e = !1,
-  children: o
+  children: n
 }) {
-  const { isMobile: n } = u();
-  return /* @__PURE__ */ s(
+  const { isMobile: s } = d();
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `${b.toolbar} ${t || n ? b.toolbarExpanded : ""} ${n ? b.toolbarMobile : ""} ${e ? b.toolbarCollapsed : ""}`,
-      children: o
+      className: `${m.toolbar} ${t || s ? m.toolbarExpanded : ""} ${s ? m.toolbarMobile : ""} ${e ? m.toolbarCollapsed : ""}`,
+      children: n
     }
   );
 }
-const lt = "_toolbarTitle_14yia_1", at = {
-  toolbarTitle: lt
+const dt = "_toolbarTitle_14yia_1", _t = {
+  toolbarTitle: dt
 };
-function Yt({ children: t }) {
-  return /* @__PURE__ */ s("h3", { className: at.toolbarTitle, children: t });
+function oe({ children: t }) {
+  return /* @__PURE__ */ o("h3", { className: _t.toolbarTitle, children: t });
 }
-const it = "_toolbarActions_l0jv2_1", pt = {
-  toolbarActions: it
+const bt = "_toolbarActions_l0jv2_1", ft = {
+  toolbarActions: bt
 };
-function Zt({ children: t }) {
-  return /* @__PURE__ */ s("div", { className: pt.toolbarActions, children: t });
+function se({ children: t }) {
+  return /* @__PURE__ */ o("div", { className: ft.toolbarActions, children: t });
 }
-const ut = "_toolbarBtn_8jy1b_1", dt = {
-  toolbarBtn: ut
+const mt = "_toolbarBtn_8jy1b_1", yt = {
+  toolbarBtn: mt
 };
-function bt({ onClick: t, children: e }) {
-  return /* @__PURE__ */ s(
+function $t({ onClick: t, children: e }) {
+  return /* @__PURE__ */ o(
     "button",
     {
-      onClick: (o) => {
-        o.preventDefault(), t && t(o);
+      onClick: (n) => {
+        n.preventDefault(), t && t(n);
       },
-      className: dt.toolbarBtn,
+      className: yt.toolbarBtn,
       children: e
     }
   );
 }
-const _t = "_sidebarIcon_1lib1_1", ft = "_sidebarIconExpanded_1lib1_6", T = {
-  sidebarIcon: _t,
-  sidebarIconExpanded: ft
+const vt = "_sidebarIcon_1lib1_1", ht = "_sidebarIconExpanded_1lib1_6", I = {
+  sidebarIcon: vt,
+  sidebarIconExpanded: ht
 };
-function te({
+function re({
   onToggleSidebar: t,
   expanded: e = !1
 }) {
-  const { isMobile: o } = u();
-  return /* @__PURE__ */ s(bt, { onClick: t, children: /* @__PURE__ */ s(
-    D,
+  const { isMobile: n } = d();
+  return /* @__PURE__ */ o($t, { onClick: t, children: /* @__PURE__ */ o(
+    A,
     {
-      size: o ? 24 : 18,
-      className: `${T.sidebarIcon} ${e ? T.sidebarIconExpanded : ""}`
+      size: n ? 24 : 18,
+      className: `${I.sidebarIcon} ${e ? I.sidebarIconExpanded : ""}`
     }
   ) });
 }
-const yt = "_content_to68z_1", mt = "_contentExpanded_to68z_18", $t = "_toolbarPresent_to68z_23", vt = "_contentNoMargin_to68z_33", _ = {
-  content: yt,
-  contentExpanded: mt,
-  toolbarPresent: $t,
-  contentNoMargin: vt
+const xt = "_content_to68z_1", Mt = "_contentExpanded_to68z_18", Tt = "_toolbarPresent_to68z_23", It = "_contentNoMargin_to68z_33", y = {
+  content: xt,
+  contentExpanded: Mt,
+  toolbarPresent: Tt,
+  contentNoMargin: It
 };
-function ee({
+function ce({
   expanded: t = !0,
   toolbar: e = !0,
-  margin: o = "default",
-  children: n
+  margin: n = "default",
+  children: s
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `${_.content} ${t ? _.contentExpanded : ""} ${e ? _.toolbarPresent : ""} ${o === "none" ? _.contentNoMargin : ""}`,
-      children: n
+      className: `${y.content} ${t ? y.contentExpanded : ""} ${e ? y.toolbarPresent : ""} ${n === "none" ? y.contentNoMargin : ""}`,
+      children: s
     }
   );
 }
-const xt = "_contextMenu_vtnpl_1", ht = "_contextMenuOpen_vtnpl_22", y = {
-  contextMenu: xt,
-  contextMenuOpen: ht
+const Nt = "_contextMenu_vtnpl_1", Ct = "_contextMenuOpen_vtnpl_22", v = {
+  contextMenu: Nt,
+  contextMenuOpen: Ct
 };
-function oe({
-  open: t,
-  x: e = 20,
-  y: o = 20,
-  from: n = "top-left",
-  children: r
-}) {
-  const { isMobile: a } = u(), l = {
-    "top-left": { tx: "-30%", ty: "-30%" },
-    "top-right": { tx: "30%", ty: "-30%" },
-    "bottom-left": { tx: "-30%", ty: "30%" },
-    "bottom-right": { tx: "30%", ty: "30%" }
-  }, { tx: c, ty: i } = l[n], f = {
-    top: n.includes("top") ? `${o}px` : "auto",
-    bottom: n.includes("bottom") ? `${o}px` : "auto",
-    left: n.includes("left") ? `${e}px` : "auto",
-    right: n.includes("right") ? `${e}px` : "auto",
-    "--tx-start": c,
-    "--ty-start": i
+function ie({ open: t, x: e, y: n, children: s }) {
+  const { isMobile: c } = d(), i = $(null), [l, r] = j({ top: 0, left: 0 });
+  E(() => {
+    if (t && i.current) {
+      const p = i.current.getBoundingClientRect(), w = window.innerWidth, z = window.innerHeight;
+      let _ = e, b = n;
+      e + p.width > w && (_ = e - p.width), n + p.height > z && (b = n - p.height), _ = Math.max(5, _), b = Math.max(5, b), r({ top: b, left: _ });
+    }
+  }, [t, e, n]);
+  const a = {
+    top: `${l.top}px`,
+    left: `${l.left}px`,
+    position: "fixed",
+    // Fixed is usually safer for global context menus
+    visibility: t ? "visible" : "hidden",
+    opacity: t ? 1 : 0
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
+      ref: i,
       className: `
-        ${y.contextMenu}
-        ${t ? y.contextMenuOpen : ""}
-        ${a ? y.contextMenuMobile : ""}
-        `,
-      style: f,
-      children: r
+        ${v.contextMenu}
+        ${t ? v.contextMenuOpen : ""}
+        ${c ? v.contextMenuMobile : ""}
+      `,
+      style: a,
+      children: s
     }
   );
 }
-const Tt = "_listItem_7ga7e_1", Mt = "_selected_7ga7e_23", M = {
-  listItem: Tt,
-  selected: Mt
+const gt = "_listItem_7ga7e_1", Et = "_selected_7ga7e_23", N = {
+  listItem: gt,
+  selected: Et
 };
-function ne({
+function le({
   onClick: t,
   onContextMenu: e,
-  selected: o = !1,
-  children: n
+  selected: n = !1,
+  children: s
 }) {
-  const r = $(null), a = (c) => {
-    r.current = setTimeout(() => {
-      e && (c.preventDefault(), e(c));
+  const c = $(null), i = (r) => {
+    c.current = setTimeout(() => {
+      e && (r.preventDefault(), e(r));
     }, 500);
   }, l = () => {
-    r.current && clearTimeout(r.current);
+    c.current && clearTimeout(c.current);
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `${M.listItem} ${o ? M.selected : ""}`,
+      className: `${N.listItem} ${n ? N.selected : ""}`,
       onClick: t,
-      onContextMenu: (c) => {
-        c.preventDefault(), e && e(c);
+      onContextMenu: (r) => {
+        r.preventDefault(), e && e(r);
       },
-      onTouchStart: a,
+      onTouchStart: i,
       onTouchEnd: l,
       onTouchMove: l,
-      children: n
+      children: s
     }
   );
 }
-function It({
+function Bt({
   icon: t,
   size: e = "default",
-  color: o = "default",
-  className: n
+  color: n = "default",
+  className: s
 }) {
-  const { isMobile: r } = u(), a = e === "default" ? r ? 24 : 18 : e, l = o === "selected" ? "var(--icon-color)" : o;
-  return o === "default" ? /* @__PURE__ */ s(
+  const { isMobile: c } = d(), i = e === "default" ? c ? 24 : 18 : e, l = n === "selected" ? "var(--icon-color)" : n;
+  return n === "default" ? /* @__PURE__ */ o(
     t,
     {
-      size: a,
-      className: n,
-      strokeWidth: r ? 2.5 : 2
+      size: i,
+      className: s,
+      strokeWidth: c ? 2.5 : 2
     }
-  ) : /* @__PURE__ */ s(
+  ) : /* @__PURE__ */ o(
     t,
     {
-      size: a,
+      size: i,
       color: l,
-      className: n,
-      strokeWidth: r ? 2.5 : 2
+      className: s,
+      strokeWidth: c ? 2.5 : 2
     }
   );
 }
-const Nt = "_emptyView_1synn_1", Ct = {
-  emptyView: Nt
+const wt = "_emptyView_1synn_1", zt = {
+  emptyView: wt
 };
-function se({ icon: t, label: e }) {
-  const { isMobile: o } = u(), n = o ? 64 : 48;
-  return /* @__PURE__ */ m("div", { className: Ct.emptyView, children: [
-    /* @__PURE__ */ s(It, { icon: t, size: n, color: "var(--text-secondary)" }),
-    /* @__PURE__ */ s("h2", { children: e })
+function ae({ icon: t, label: e }) {
+  const { isMobile: n } = d(), s = n ? 64 : 48;
+  return /* @__PURE__ */ h("div", { className: zt.emptyView, children: [
+    /* @__PURE__ */ o(Bt, { icon: t, size: s, color: "var(--text-secondary)" }),
+    /* @__PURE__ */ o("h2", { children: e })
   ] });
 }
-const Et = "_card_zjz9h_1", gt = {
-  card: Et
+const St = "_card_zjz9h_1", Dt = {
+  card: St
 };
-function ce({ children: t }) {
-  return /* @__PURE__ */ s("div", { className: gt.card, children: t });
+function pe({ children: t }) {
+  return /* @__PURE__ */ o("div", { className: Dt.card, children: t });
 }
-const Bt = "_textInput_on5q4_1", zt = {
-  textInput: Bt
-}, re = v(
+const Pt = "_textInput_on5q4_1", jt = {
+  textInput: Pt
+}, ue = x(
   ({
     placeholder: t,
     value: e,
-    onChange: o,
-    onFocus: n,
-    onBlur: r,
-    disabled: a = !1,
+    onChange: n,
+    onFocus: s,
+    onBlur: c,
+    disabled: i = !1,
     type: l = "text",
-    className: c
-  }, i) => /* @__PURE__ */ s(
+    className: r
+  }, a) => /* @__PURE__ */ o(
     "input",
     {
-      ref: i,
+      ref: a,
       type: l,
-      className: `${zt.textInput} ${c || ""}`,
+      className: `${jt.textInput} ${r || ""}`,
       placeholder: t,
       value: e,
-      onChange: (f) => o?.(f.target.value),
-      onFocus: n,
-      onBlur: r,
-      disabled: a
+      onChange: (p) => n?.(p.target.value),
+      onFocus: s,
+      onBlur: c,
+      disabled: i
     }
   )
-), Dt = "_selectInput_3f04b_1", St = {
-  selectInput: Dt
-}, le = v(
-  ({ className: t, children: e, ...o }, n) => /* @__PURE__ */ s(
+), At = "_selectInput_3f04b_1", Rt = {
+  selectInput: At
+}, de = x(
+  ({ className: t, children: e, ...n }, s) => /* @__PURE__ */ o(
     "select",
     {
-      ref: n,
-      className: `${St.selectInput} ${t || ""}`,
-      ...o,
+      ref: s,
+      className: `${Rt.selectInput} ${t || ""}`,
+      ...n,
       children: e
     }
   )
-), Pt = "_button_g5rur_1", jt = "_secondary_g5rur_27", I = {
-  button: Pt,
-  secondary: jt
+), Ot = "_button_g5rur_1", Ht = "_secondary_g5rur_27", C = {
+  button: Ot,
+  secondary: Ht
 };
-function ae({
+function _e({
   disabled: t = !1,
   type: e = "primary",
-  onClick: o,
-  children: n,
-  style: r
+  onClick: n,
+  children: s,
+  style: c
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "button",
     {
-      className: `${I.button} ${e == "secondary" ? I.secondary : ""}`,
-      onClick: o,
+      className: `${C.button} ${e == "secondary" ? C.secondary : ""}`,
+      onClick: n,
       disabled: t,
-      style: r,
-      children: n
+      style: c,
+      children: s
     }
   );
 }
-const At = "_balloon_1jdjr_1", wt = "_balloonOpen_1jdjr_22", N = {
-  balloon: At,
-  balloonOpen: wt
+const kt = "_balloon_1jdjr_1", Vt = "_balloonOpen_1jdjr_22", g = {
+  balloon: kt,
+  balloonOpen: Vt
 };
-function ie({
+function be({
   open: t,
   x: e,
-  y: o,
-  children: n,
-  className: r,
-  style: a,
+  y: n,
+  children: s,
+  className: c,
+  style: i,
   ...l
 }) {
-  const c = {};
-  typeof e == "number" && (c.left = e), typeof o == "number" && (c.top = o);
-  const i = [
-    N.balloon,
-    t ? N.balloonOpen : "",
-    r ?? ""
+  const r = {};
+  typeof e == "number" && (r.left = e), typeof n == "number" && (r.top = n);
+  const a = [
+    g.balloon,
+    t ? g.balloonOpen : "",
+    c ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
       ...l,
-      className: i,
-      style: { ...a, ...c },
-      children: n
+      className: a,
+      style: { ...i, ...r },
+      children: s
     }
   );
 }
 export {
-  Vt as AppShell,
-  ie as Balloon,
-  ae as Button,
-  ce as Card,
-  ee as Content,
-  oe as ContextMenu,
-  se as EmptyView,
-  It as Icon,
-  ne as ListItem,
-  qt as Popup,
-  Qt as PopupActions,
-  Ut as PopupButton,
-  Gt as PopupDescription,
-  Jt as PopupInput,
-  Kt as PopupTitle,
-  le as SelectInput,
-  Ht as Sidebar,
-  Wt as SidebarButton,
-  Lt as SidebarItem,
-  Ft as SidebarTitle,
-  re as TextInput,
-  Xt as Toolbar,
-  Zt as ToolbarActions,
-  bt as ToolbarButton,
-  te as ToolbarExpandSidebarButton,
-  Yt as ToolbarTitle
+  qt as AppShell,
+  be as Balloon,
+  _e as Button,
+  pe as Card,
+  ce as Content,
+  ie as ContextMenu,
+  ae as EmptyView,
+  Bt as Icon,
+  le as ListItem,
+  Ut as Popup,
+  te as PopupActions,
+  ee as PopupButton,
+  Yt as PopupDescription,
+  Zt as PopupInput,
+  Xt as PopupTitle,
+  de as SelectInput,
+  Kt as Sidebar,
+  Qt as SidebarButton,
+  Jt as SidebarItem,
+  Gt as SidebarTitle,
+  ue as TextInput,
+  ne as Toolbar,
+  se as ToolbarActions,
+  $t as ToolbarButton,
+  re as ToolbarExpandSidebarButton,
+  oe as ToolbarTitle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlos-next/ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "./dist/htmlos-ui.cjs",
   "module": "./dist/htmlos-ui.js",