treesap 0.1.5 → 0.1.6

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleLivePreview.d.ts","sourceRoot":"","sources":["../../src/components/SimpleLivePreview.tsx"],"names":[],"mappings":"AAAA,UAAU,sBAAsB;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAqB,EAAE,WAAkB,EAAE,EAAE,sBAAsB,kDAwBtG"}
+{"version":3,"file":"SimpleLivePreview.d.ts","sourceRoot":"","sources":["../../src/components/SimpleLivePreview.tsx"],"names":[],"mappings":"AAAA,UAAU,sBAAsB;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAqB,EAAE,WAAkB,EAAE,EAAE,sBAAsB,kDAkCtG"}

package/dist/components/SimpleLivePreview.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 export function SimpleLivePreview({ id = "simple-preview", previewPort = 5173 }) {
     const defaultSrc = `http://localhost:${previewPort}`;
     const baseUrl = `localhost:${previewPort}/`;
-    return (_jsxs("sapling-island", { loading: "visible", children: [_jsxs("template", { children: [_jsx("script", { type: "module", src: "https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js" }), _jsx("script", { type: "module", src: "/components/SimpleLivePreview.js" })] }), _jsx("div", { id: id, class: "flex-1 h-full bg-white transition-all duration-300", children: _jsx("iframe", { id: `${id}-iframe`, src: defaultSrc, class: "w-full h-full border-0 bg-white block", title: "Live Preview", sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-top-navigation allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-storage-access-by-user-activation", "data-preview-port": previewPort }) })] }));
+    return (_jsxs("sapling-island", { loading: "visible", children: [_jsxs("template", { children: [_jsx("script", { type: "module", src: "https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js" }), _jsx("script", { type: "module", src: "/components/SimpleLivePreview.js" })] }), _jsxs("div", { id: id, class: "flex-1 h-full bg-white transition-all duration-300 p-2 relative overflow-hidden", children: [_jsx("iframe", { id: `${id}-iframe`, src: defaultSrc, class: "w-full h-full border border-gray-300 bg-white block rounded-md", title: "Live Preview", sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-top-navigation allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-storage-access-by-user-activation", "data-preview-port": previewPort }), _jsx("button", { id: `${id}-floating-hide-sidebar-btn`, class: "absolute p-3 bg-white border-2 border-gray-400 rounded-lg shadow-xl hover:bg-gray-50 hover:shadow-2xl transition-all flex items-center justify-center z-50", title: "Toggle Sidebar", style: "position: absolute !important; z-index: 9999 !important; bottom: 16px; left: 16px;", children: _jsx("iconify-icon", { id: `${id}-floating-hide-sidebar-icon`, icon: "ph:sidebar-simple", width: "20", height: "20", class: "text-gray-800" }) })] })] }));
 }
 //# sourceMappingURL=SimpleLivePreview.js.map

package/dist/components/SimpleLivePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleLivePreview.js","sourceRoot":"","sources":["../../src/components/SimpleLivePreview.tsx"],"names":[],"mappings":";AAKA,MAAM,UAAU,iBAAiB,CAAC,EAAE,EAAE,GAAG,gBAAgB,EAAE,WAAW,GAAG,IAAI,EAA0B;IACrG,MAAM,UAAU,GAAG,oBAAoB,WAAW,EAAE,CAAC;IACrD,MAAM,OAAO,GAAG,aAAa,WAAW,GAAG,CAAC;IAE5C,OAAO,CACL,0BAAgB,OAAO,EAAC,SAAS,aAC/B,+BACE,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,oEAAoE,GAAU,EACxG,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,kCAAkC,GAAU,IAC7D,EAEX,cAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAC,oDAAoD,YAErE,iBACE,EAAE,EAAE,GAAG,EAAE,SAAS,EAClB,GAAG,EAAE,UAAU,EACf,KAAK,EAAC,uCAAuC,EAC7C,KAAK,EAAC,cAAc,EACpB,OAAO,EAAC,iNAAiN,uBACtM,WAAW,GACtB,GACN,IACS,CAClB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SimpleLivePreview.js","sourceRoot":"","sources":["../../src/components/SimpleLivePreview.tsx"],"names":[],"mappings":";AAKA,MAAM,UAAU,iBAAiB,CAAC,EAAE,EAAE,GAAG,gBAAgB,EAAE,WAAW,GAAG,IAAI,EAA0B;IACrG,MAAM,UAAU,GAAG,oBAAoB,WAAW,EAAE,CAAC;IACrD,MAAM,OAAO,GAAG,aAAa,WAAW,GAAG,CAAC;IAE5C,OAAO,CACL,0BAAgB,OAAO,EAAC,SAAS,aAC/B,+BACE,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,oEAAoE,GAAU,EACxG,iBAAQ,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,kCAAkC,GAAU,IAC7D,EAEX,eAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAC,iFAAiF,aAElG,iBACE,EAAE,EAAE,GAAG,EAAE,SAAS,EAClB,GAAG,EAAE,UAAU,EACf,KAAK,EAAC,gEAAgE,EACtE,KAAK,EAAC,cAAc,EACpB,OAAO,EAAC,iNAAiN,uBACtM,WAAW,GACtB,EAGV,iBACE,EAAE,EAAE,GAAG,EAAE,4BAA4B,EACrC,KAAK,EAAC,4JAA4J,EAClK,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAC,oFAAoF,YAE1F,uBAAc,EAAE,EAAE,GAAG,EAAE,6BAA6B,EAAE,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,GAAgB,GACpI,IACL,IACS,CAClB,CAAC;AACJ,CAAC"}

package/dist/pages/Code.js

@@ -3,6 +3,6 @@ import Layout from "../layouts/Layout.js";
 import { Terminal as TerminalComponent } from "../components/Terminal.js";
 import { SimpleLivePreview } from "../components/SimpleLivePreview.js";
 export function Code({ previewPort = 1234, workingDirectory }) {
-    return (_jsx(Layout, { title: "Code Editor", children: _jsxs("div", { id: "code-container", class: "h-screen flex bg-[#1e1e1e]", children: [_jsxs("div", { id: "sidebar-pane", class: "w-2/5-plus border-r border-[#3c3c3c] transition-all duration-300 flex flex-col bg-[#252526]", children: [_jsx("div", { class: "p-3 border-b border-[#3c3c3c]", children: _jsx("a", { href: "/", class: "text-[#cccccc] hover:text-white text-sm", children: "\u2190 Back to Home" }) }), _jsx("div", { class: "p-3 border-b border-[#3c3c3c] bg-[#2d2d30]", children: _jsxs("div", { class: "flex items-center gap-2", children: [_jsx("button", { id: "live-preview-hide-claude-btn", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex items-center text-[#cccccc] hover:text-white", title: "Hide Sidebar", children: _jsx("iconify-icon", { id: "live-preview-hide-claude-icon", icon: "ph:sidebar-simple", width: "16", height: "16" }) }), _jsx("button", { type: "button", id: "live-preview-refresh-btn", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Reload", children: _jsx("iconify-icon", { icon: "tabler:refresh", width: "16", height: "16" }) }), _jsxs("div", { class: "flex-1 flex items-center bg-[#1e1e1e] border border-[#3c3c3c] rounded px-3 py-2 hover:border-[#0e639c] focus-within:border-[#0e639c] transition-all", children: [_jsx("iconify-icon", { icon: "tabler:world", width: "16", height: "16", class: "text-[#cccccc] mr-2" }), _jsxs("span", { class: "text-[#cccccc] text-sm", children: ["localhost:", previewPort, "/"] }), _jsx("input", { id: "live-preview-url-input", type: "text", placeholder: "path", defaultValue: "", class: "flex-1 bg-transparent text-sm focus:outline-none text-[#cccccc] ml-1" }), _jsx("button", { type: "button", id: "live-preview-load-btn", class: "ml-2 p-1 hover:bg-[#3c3c3c] rounded transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Go", children: _jsx("iconify-icon", { icon: "tabler:chevron-right", width: "16", height: "16" }) })] })] }) }), _jsxs("div", { class: "flex py-2", children: [_jsx("button", { class: "px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:folder", width: "20", height: "20" }) }), _jsx("button", { class: "px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:search", width: "20", height: "20" }) }), _jsx("button", { class: "px-3 py-2 text-white flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:terminal", width: "20", height: "20" }) }), _jsx("button", { class: "px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:git-merge", width: "20", height: "20" }) })] }), _jsx("div", { class: "flex-1 overflow-hidden bg-[#1e1e1e]", children: _jsx("div", { class: "h-full p-4", children: _jsx(TerminalComponent, { id: "terminal", sessionId: "shared-terminal-session" }) }) })] }), _jsx(SimpleLivePreview, { id: "live-preview", previewPort: previewPort })] }) }));
+    return (_jsx(Layout, { title: "Code Editor", children: _jsxs("div", { id: "code-container", class: "h-screen flex bg-[#1e1e1e]", children: [_jsxs("div", { id: "sidebar-pane", class: "w-2/5-plus border-r border-[#3c3c3c] transition-all duration-300 flex flex-col bg-[#252526]", children: [_jsx("div", { class: "p-3 border-b border-[#3c3c3c]", children: _jsx("a", { href: "/", class: "text-[#cccccc] hover:text-white text-sm", children: "\u2190 Back to Home" }) }), _jsx("div", { class: "p-3 border-b border-[#3c3c3c] bg-[#2d2d30]", children: _jsxs("div", { class: "flex items-center gap-2", children: [_jsx("button", { id: "live-preview-hide-sidebar-btn", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex items-center text-[#cccccc] hover:text-white", title: "Hide Sidebar", children: _jsx("iconify-icon", { id: "live-preview-hide-sidebar-icon", icon: "ph:sidebar-simple", width: "16", height: "16" }) }), _jsx("button", { type: "button", id: "live-preview-refresh-btn", class: "p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Reload", children: _jsx("iconify-icon", { icon: "tabler:refresh", width: "16", height: "16" }) }), _jsxs("div", { class: "flex-1 flex items-center bg-[#1e1e1e] border border-[#3c3c3c] rounded px-3 py-2 hover:border-[#0e639c] focus-within:border-[#0e639c] transition-all", children: [_jsx("iconify-icon", { icon: "tabler:world", width: "16", height: "16", class: "text-[#cccccc] mr-2" }), _jsxs("span", { class: "text-[#cccccc] text-sm", children: ["localhost:", previewPort, "/"] }), _jsx("input", { id: "live-preview-url-input", type: "text", placeholder: "path", defaultValue: "", class: "flex-1 bg-transparent text-sm focus:outline-none text-[#cccccc] ml-1" }), _jsx("button", { type: "button", id: "live-preview-load-btn", class: "ml-2 p-1 hover:bg-[#3c3c3c] rounded transition-colors flex-shrink-0 text-[#cccccc] hover:text-white", title: "Go", children: _jsx("iconify-icon", { icon: "tabler:chevron-right", width: "16", height: "16" }) })] })] }) }), _jsxs("div", { class: "flex py-2", children: [_jsx("button", { class: "px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:folder", width: "20", height: "20" }) }), _jsx("button", { class: "px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:search", width: "20", height: "20" }) }), _jsx("button", { class: "px-3 py-2 text-white flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:terminal", width: "20", height: "20" }) }), _jsx("button", { class: "px-3 py-2 text-[#cccccc] disabled:opacity-50 cursor-not-allowed flex items-center justify-center", children: _jsx("iconify-icon", { icon: "tabler:git-merge", width: "20", height: "20" }) })] }), _jsx("div", { class: "flex-1 overflow-hidden bg-[#1e1e1e]", children: _jsx("div", { class: "h-full p-4", children: _jsx(TerminalComponent, { id: "terminal", sessionId: "shared-terminal-session" }) }) })] }), _jsx(SimpleLivePreview, { id: "live-preview", previewPort: previewPort })] }) }));
 }
 //# sourceMappingURL=Code.js.map

package/dist/pages/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/pages/Code.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAOvE,MAAM,UAAU,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,gBAAgB,EAAiB;IAC1E,OAAO,CACL,KAAC,MAAM,IAAC,KAAK,EAAC,aAAa,YACzB,eAAK,EAAE,EAAC,gBAAgB,EAAC,KAAK,EAAC,4BAA4B,aAEzD,eAAK,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,6FAA6F,aAExH,cAAK,KAAK,EAAC,+BAA+B,YACxC,YAAG,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,yCAAyC,oCAAmB,GAC1E,EAGN,cAAK,KAAK,EAAC,4CAA4C,YACrD,eAAK,KAAK,EAAC,yBAAyB,aAClC,iBACE,EAAE,EAAC,8BAA8B,EACjC,KAAK,EAAC,uGAAuG,EAC7G,KAAK,EAAC,cAAc,YAEpB,uBAAc,EAAE,EAAC,+BAA+B,EAAC,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACzG,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,mGAAmG,EACzG,KAAK,EAAC,QAAQ,YAEd,uBAAc,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACnE,EACT,eAAK,KAAK,EAAC,qJAAqJ,aAC9J,uBAAc,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,GAAgB,EACpG,gBAAM,KAAK,EAAC,wBAAwB,2BAAY,WAAW,SAAS,EACpE,gBACE,EAAE,EAAC,wBAAwB,EAC3B,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,MAAM,EAClB,YAAY,EAAC,EAAE,EACf,KAAK,EAAC,sEAAsE,GAC5E,EACF,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,qGAAqG,EAC3G,KAAK,EAAC,IAAI,YAEV,uBAAc,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACzE,IACL,IACF,GACF,EAGN,eAAK,KAAK,EAAC,WAAW,aACpB,iBAAQ,KAAK,EAAC,kGAAkG,YAC9G,uBAAc,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAClE,EACT,iBAAQ,KAAK,EAAC,kGAAkG,YAC9G,uBAAc,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAClE,EACT,iBAAQ,KAAK,EAAC,uDAAuD,YACnE,uBAAc,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACpE,EACT,iBAAQ,KAAK,EAAC,kGAAkG,YAC9G,uBAAc,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACrE,IACL,EAGN,cAAK,KAAK,EAAC,qCAAqC,YAE9C,cAAK,KAAK,EAAC,YAAY,YACrB,KAAC,iBAAiB,IAChB,EAAE,EAAC,UAAU,EACb,SAAS,EAAC,yBAAyB,GACnC,GACE,GACF,IACF,EAGN,KAAC,iBAAiB,IAAC,EAAE,EAAC,cAAc,EAAC,WAAW,EAAE,WAAW,GAAI,IAC7D,GACC,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/pages/Code.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAOvE,MAAM,UAAU,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,gBAAgB,EAAiB;IAC1E,OAAO,CACL,KAAC,MAAM,IAAC,KAAK,EAAC,aAAa,YACzB,eAAK,EAAE,EAAC,gBAAgB,EAAC,KAAK,EAAC,4BAA4B,aAEzD,eAAK,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,6FAA6F,aAExH,cAAK,KAAK,EAAC,+BAA+B,YACxC,YAAG,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,yCAAyC,oCAAmB,GAC1E,EAGN,cAAK,KAAK,EAAC,4CAA4C,YACrD,eAAK,KAAK,EAAC,yBAAyB,aAClC,iBACE,EAAE,EAAC,+BAA+B,EAClC,KAAK,EAAC,uGAAuG,EAC7G,KAAK,EAAC,cAAc,YAEpB,uBAAc,EAAE,EAAC,gCAAgC,EAAC,IAAI,EAAC,mBAAmB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAC1G,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,mGAAmG,EACzG,KAAK,EAAC,QAAQ,YAEd,uBAAc,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACnE,EACT,eAAK,KAAK,EAAC,qJAAqJ,aAC9J,uBAAc,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,GAAgB,EACpG,gBAAM,KAAK,EAAC,wBAAwB,2BAAY,WAAW,SAAS,EACpE,gBACE,EAAE,EAAC,wBAAwB,EAC3B,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,MAAM,EAClB,YAAY,EAAC,EAAE,EACf,KAAK,EAAC,sEAAsE,GAC5E,EACF,iBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,qGAAqG,EAC3G,KAAK,EAAC,IAAI,YAEV,uBAAc,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACzE,IACL,IACF,GACF,EAGN,eAAK,KAAK,EAAC,WAAW,aACpB,iBAAQ,KAAK,EAAC,kGAAkG,YAC9G,uBAAc,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAClE,EACT,iBAAQ,KAAK,EAAC,kGAAkG,YAC9G,uBAAc,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GAClE,EACT,iBAAQ,KAAK,EAAC,uDAAuD,YACnE,uBAAc,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACpE,EACT,iBAAQ,KAAK,EAAC,kGAAkG,YAC9G,uBAAc,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAgB,GACrE,IACL,EAGN,cAAK,KAAK,EAAC,qCAAqC,YAE9C,cAAK,KAAK,EAAC,YAAY,YACrB,KAAC,iBAAiB,IAChB,EAAE,EAAC,UAAU,EACb,SAAS,EAAC,yBAAyB,GACnC,GACE,GACF,IACF,EAGN,KAAC,iBAAiB,IAAC,EAAE,EAAC,cAAc,EAAC,WAAW,EAAE,WAAW,GAAI,IAC7D,GACC,CACV,CAAC;AACJ,CAAC"}

package/dist/static/components/SimpleLivePreview.js

@@ -5,8 +5,10 @@ class SimpleLivePreviewManager {
     
     // DOM elements
     this.container = document.getElementById(id);
-    this.hideClaudeBtn = document.getElementById(`${id}-hide-claude-btn`);
-    this.hideClaudeIcon = document.getElementById(`${id}-hide-claude-icon`);
+    this.hideSidebarBtn = document.getElementById(`${id}-hide-sidebar-btn`);
+    this.hideSidebarIcon = document.getElementById(`${id}-hide-sidebar-icon`);
+    this.floatingHideSidebarBtn = document.getElementById(`${id}-floating-hide-sidebar-btn`);
+    this.floatingHideSidebarIcon = document.getElementById(`${id}-floating-hide-sidebar-icon`);
     this.refreshBtn = document.getElementById(`${id}-refresh-btn`);
     this.urlInput = document.getElementById(`${id}-url-input`);
     this.loadBtn = document.getElementById(`${id}-load-btn`);
@@ -16,7 +18,7 @@ class SimpleLivePreviewManager {
     this.previewPort = this.iframe?.getAttribute('data-preview-port') || 5173;
     
     // State
-    this.isClaudeHidden = false;
+    this.isSidebarHidden = false;
     
     this.init();
   }
@@ -35,8 +37,9 @@ class SimpleLivePreviewManager {
   }
 
   setupEventListeners() {
-    // Hide Claude toggle
-    this.hideClaudeBtn?.addEventListener('click', () => this.toggleClaudeVisibility());
+    // Hide sidebar toggle (both sidebar and floating button)
+    this.hideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
+    this.floatingHideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
 
     // Refresh button
     this.refreshBtn?.addEventListener('click', () => this.refreshIframe());
@@ -66,10 +69,10 @@ class SimpleLivePreviewManager {
         e.preventDefault();
         this.refreshIframe();
       }
-      // Cmd/Ctrl + B to toggle Claude panel
+      // Cmd/Ctrl + B to toggle sidebar panel
       if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
         e.preventDefault();
-        this.toggleClaudeVisibility();
+        this.toggleSidebarVisibility();
       }
     });
 
@@ -126,38 +129,50 @@ class SimpleLivePreviewManager {
     }
   }
 
-  toggleClaudeVisibility() {
-    this.isClaudeHidden = !this.isClaudeHidden;
+  toggleSidebarVisibility() {
+    this.isSidebarHidden = !this.isSidebarHidden;
     
-    const terminalPane = document.getElementById('sidebar-pane');
+    const sidebarPane = document.getElementById('sidebar-pane');
     const previewPane = document.getElementById(this.id);
     
-    if (terminalPane && previewPane) {
-      if (this.isClaudeHidden) {
-        // Hide terminal pane and make preview full width
-        terminalPane.style.display = 'none';
+    if (sidebarPane && previewPane) {
+      if (this.isSidebarHidden) {
+        // Hide sidebar pane and make preview full width
+        sidebarPane.style.display = 'none';
         previewPane.classList.remove('flex-1');
         previewPane.classList.add('w-full');
         
-        // Update button icon and title
-        if (this.hideClaudeIcon) {
-          this.hideClaudeIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
+        // Update button icons and titles
+        if (this.hideSidebarIcon) {
+          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
         }
-        if (this.hideClaudeBtn) {
-          this.hideClaudeBtn.setAttribute('title', 'Show Terminal');
+        if (this.floatingHideSidebarIcon) {
+          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
+        }
+        if (this.hideSidebarBtn) {
+          this.hideSidebarBtn.setAttribute('title', 'Show Sidebar');
+        }
+        if (this.floatingHideSidebarBtn) {
+          this.floatingHideSidebarBtn.setAttribute('title', 'Show Sidebar');
         }
       } else {
-        // Show terminal pane and restore original widths
-        terminalPane.style.display = '';
+        // Show sidebar pane and restore original widths
+        sidebarPane.style.display = '';
         previewPane.classList.remove('w-full');
         previewPane.classList.add('flex-1');
         
-        // Update button icon and title
-        if (this.hideClaudeIcon) {
-          this.hideClaudeIcon.setAttribute('icon', 'ph:sidebar-simple');
+        // Update button icons and titles
+        if (this.hideSidebarIcon) {
+          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
+        }
+        if (this.floatingHideSidebarIcon) {
+          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
+        }
+        if (this.hideSidebarBtn) {
+          this.hideSidebarBtn.setAttribute('title', 'Hide Sidebar');
         }
-        if (this.hideClaudeBtn) {
-          this.hideClaudeBtn.setAttribute('title', 'Hide Terminal');
+        if (this.floatingHideSidebarBtn) {
+          this.floatingHideSidebarBtn.setAttribute('title', 'Hide Sidebar');
         }
       }
     }

package/dist/static/styles/main.css

@@ -1109,6 +1109,10 @@ video {
   position: relative;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1249,10 +1253,6 @@ video {
   border-width: 1px;
 }
 
-.border-0 {
-  border-width: 0px;
-}
-
 .border-2 {
   border-width: 2px;
 }
@@ -1270,6 +1270,16 @@ video {
   border-color: rgb(60 60 60 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+}
+
 .border-green-600 {
   --tw-border-opacity: 1;
   border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
@@ -1454,6 +1464,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1489,6 +1505,11 @@ video {
   background-color: rgb(60 60 60 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
@@ -1504,6 +1525,12 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "treesap",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "AI Agent Framework",
   "type": "module",
   "main": "dist/index.js",

package/src/components/SimpleLivePreview.tsx

@@ -14,16 +14,26 @@ export function SimpleLivePreview({ id = "simple-preview", previewPort = 5173 }:
         <script type="module" src="/components/SimpleLivePreview.js"></script>
       </template>
 
-      <div id={id} class="flex-1 h-full bg-white transition-all duration-300">
+      <div id={id} class="flex-1 h-full bg-white transition-all duration-300 p-2 relative overflow-hidden">
         {/* Iframe - Full Height */}
         <iframe
           id={`${id}-iframe`}
           src={defaultSrc}
-          class="w-full h-full border-0 bg-white block"
+          class="w-full h-full border border-gray-300 bg-white block rounded-md"
           title="Live Preview"
           sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-top-navigation allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-storage-access-by-user-activation"
           data-preview-port={previewPort}
         ></iframe>
+        
+        {/* Floating Sidebar Toggle */}
+        <button
+          id={`${id}-floating-hide-sidebar-btn`}
+          class="absolute p-3 bg-white border-2 border-gray-400 rounded-lg shadow-xl hover:bg-gray-50 hover:shadow-2xl transition-all flex items-center justify-center z-50"
+          title="Toggle Sidebar"
+          style="position: absolute !important; z-index: 9999 !important; bottom: 16px; left: 16px;"
+        >
+          <iconify-icon id={`${id}-floating-hide-sidebar-icon`} icon="ph:sidebar-simple" width="20" height="20" class="text-gray-800"></iconify-icon>
+        </button>
       </div>
     </sapling-island>
   );

package/src/pages/Code.tsx

@@ -22,11 +22,11 @@ export function Code({ previewPort = 1234, workingDirectory }: TerminalProps) {
           <div class="p-3 border-b border-[#3c3c3c] bg-[#2d2d30]">
             <div class="flex items-center gap-2">
               <button
-                id="live-preview-hide-claude-btn"
+                id="live-preview-hide-sidebar-btn"
                 class="p-2 hover:bg-[#3c3c3c] rounded-md transition-colors flex items-center text-[#cccccc] hover:text-white"
                 title="Hide Sidebar"
               >
-                <iconify-icon id="live-preview-hide-claude-icon" icon="ph:sidebar-simple" width="16" height="16"></iconify-icon>
+                <iconify-icon id="live-preview-hide-sidebar-icon" icon="ph:sidebar-simple" width="16" height="16"></iconify-icon>
               </button>
               <button
                 type="button"

package/src/static/components/SimpleLivePreview.js

@@ -5,8 +5,10 @@ class SimpleLivePreviewManager {
     
     // DOM elements
     this.container = document.getElementById(id);
-    this.hideClaudeBtn = document.getElementById(`${id}-hide-claude-btn`);
-    this.hideClaudeIcon = document.getElementById(`${id}-hide-claude-icon`);
+    this.hideSidebarBtn = document.getElementById(`${id}-hide-sidebar-btn`);
+    this.hideSidebarIcon = document.getElementById(`${id}-hide-sidebar-icon`);
+    this.floatingHideSidebarBtn = document.getElementById(`${id}-floating-hide-sidebar-btn`);
+    this.floatingHideSidebarIcon = document.getElementById(`${id}-floating-hide-sidebar-icon`);
     this.refreshBtn = document.getElementById(`${id}-refresh-btn`);
     this.urlInput = document.getElementById(`${id}-url-input`);
     this.loadBtn = document.getElementById(`${id}-load-btn`);
@@ -16,7 +18,7 @@ class SimpleLivePreviewManager {
     this.previewPort = this.iframe?.getAttribute('data-preview-port') || 5173;
     
     // State
-    this.isClaudeHidden = false;
+    this.isSidebarHidden = false;
     
     this.init();
   }
@@ -35,8 +37,9 @@ class SimpleLivePreviewManager {
   }
 
   setupEventListeners() {
-    // Hide Claude toggle
-    this.hideClaudeBtn?.addEventListener('click', () => this.toggleClaudeVisibility());
+    // Hide sidebar toggle (both sidebar and floating button)
+    this.hideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
+    this.floatingHideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
 
     // Refresh button
     this.refreshBtn?.addEventListener('click', () => this.refreshIframe());
@@ -66,10 +69,10 @@ class SimpleLivePreviewManager {
         e.preventDefault();
         this.refreshIframe();
       }
-      // Cmd/Ctrl + B to toggle Claude panel
+      // Cmd/Ctrl + B to toggle sidebar panel
       if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
         e.preventDefault();
-        this.toggleClaudeVisibility();
+        this.toggleSidebarVisibility();
       }
     });
 
@@ -126,38 +129,50 @@ class SimpleLivePreviewManager {
     }
   }
 
-  toggleClaudeVisibility() {
-    this.isClaudeHidden = !this.isClaudeHidden;
+  toggleSidebarVisibility() {
+    this.isSidebarHidden = !this.isSidebarHidden;
     
-    const terminalPane = document.getElementById('sidebar-pane');
+    const sidebarPane = document.getElementById('sidebar-pane');
     const previewPane = document.getElementById(this.id);
     
-    if (terminalPane && previewPane) {
-      if (this.isClaudeHidden) {
-        // Hide terminal pane and make preview full width
-        terminalPane.style.display = 'none';
+    if (sidebarPane && previewPane) {
+      if (this.isSidebarHidden) {
+        // Hide sidebar pane and make preview full width
+        sidebarPane.style.display = 'none';
         previewPane.classList.remove('flex-1');
         previewPane.classList.add('w-full');
         
-        // Update button icon and title
-        if (this.hideClaudeIcon) {
-          this.hideClaudeIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
+        // Update button icons and titles
+        if (this.hideSidebarIcon) {
+          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
         }
-        if (this.hideClaudeBtn) {
-          this.hideClaudeBtn.setAttribute('title', 'Show Terminal');
+        if (this.floatingHideSidebarIcon) {
+          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
+        }
+        if (this.hideSidebarBtn) {
+          this.hideSidebarBtn.setAttribute('title', 'Show Sidebar');
+        }
+        if (this.floatingHideSidebarBtn) {
+          this.floatingHideSidebarBtn.setAttribute('title', 'Show Sidebar');
         }
       } else {
-        // Show terminal pane and restore original widths
-        terminalPane.style.display = '';
+        // Show sidebar pane and restore original widths
+        sidebarPane.style.display = '';
         previewPane.classList.remove('w-full');
         previewPane.classList.add('flex-1');
         
-        // Update button icon and title
-        if (this.hideClaudeIcon) {
-          this.hideClaudeIcon.setAttribute('icon', 'ph:sidebar-simple');
+        // Update button icons and titles
+        if (this.hideSidebarIcon) {
+          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
+        }
+        if (this.floatingHideSidebarIcon) {
+          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
+        }
+        if (this.hideSidebarBtn) {
+          this.hideSidebarBtn.setAttribute('title', 'Hide Sidebar');
         }
-        if (this.hideClaudeBtn) {
-          this.hideClaudeBtn.setAttribute('title', 'Hide Terminal');
+        if (this.floatingHideSidebarBtn) {
+          this.floatingHideSidebarBtn.setAttribute('title', 'Hide Sidebar');
         }
       }
     }

package/src/static/styles/main.css

@@ -1109,6 +1109,10 @@ video {
   position: relative;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1249,10 +1253,6 @@ video {
   border-width: 1px;
 }
 
-.border-0 {
-  border-width: 0px;
-}
-
 .border-2 {
   border-width: 2px;
 }
@@ -1270,6 +1270,16 @@ video {
   border-color: rgb(60 60 60 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+}
+
 .border-green-600 {
   --tw-border-opacity: 1;
   border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
@@ -1454,6 +1464,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1489,6 +1505,11 @@ video {
   background-color: rgb(60 60 60 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
@@ -1504,6 +1525,12 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;