@hachej/boring-workspace 0.1.17 → 0.1.18

package/dist/{WorkspaceLoadingState-zLzh1tGc.js → WorkspaceLoadingState-DYDxUYnx.js}

@@ -1,10 +1,10 @@
-import { jsxs as d, jsx as a, Fragment as V } from "react/jsx-runtime";
-import { useCallback as b, useMemo as F, useEffect as I, useState as q, Suspense as Q, useRef as Y } from "react";
-import { LoadingState as ee, ResizeHandle as te, IconButton as Z, Button as ne, Kbd as re } from "@hachej/boring-ui-kit";
+import { jsxs as l, jsx as a, Fragment as V } from "react/jsx-runtime";
+import { useCallback as b, useMemo as E, useEffect as z, useState as q, useSyncExternalStore as Q, Suspense as Y, useRef as ee } from "react";
+import { LoadingState as te, ResizeHandle as ne, IconButton as Z, Button as re, Kbd as ae } from "@hachej/boring-ui-kit";
 import { c as g } from "./utils-B6yFEsav.js";
-import { a0 as ae, a7 as oe, B as ie, an as se, al as ce, u as de } from "./CommandPalette-CJHuTJlD.js";
-import { Search as le, Plus as ue } from "lucide-react";
-function ke(e, t, r = !0) {
+import { $ as oe, a6 as ie, z as se, an as ce, al as de, u as le, ag as ue } from "./WorkspaceProvider-CDPaAO5u.js";
+import { Search as he, Plus as me } from "lucide-react";
+function _e(e, t, r = !0) {
   if (!r || typeof window > "u") return t;
   try {
     const n = window.localStorage.getItem(e);
@@ -14,40 +14,40 @@ function ke(e, t, r = !0) {
   }
   return t;
 }
-function _e(e, t, r = !0) {
+function Se(e, t, r = !0) {
   if (!(!r || typeof window > "u"))
     try {
       window.localStorage.setItem(e, t ? "1" : "0");
     } catch {
     }
 }
-function T(e, t, r = !0) {
+function $(e, t, r = !0) {
   if (!r || typeof window > "u") return t;
   try {
     const n = window.localStorage.getItem(e);
     if (n === null) return t;
-    const i = Number(n);
-    return Number.isFinite(i) ? i : t;
+    const s = Number(n);
+    return Number.isFinite(s) ? s : t;
   } catch {
   }
   return t;
 }
-function he(e, t, r = !0) {
+function fe(e, t, r = !0) {
   if (!(!r || typeof window > "u"))
     try {
       window.localStorage.setItem(e, String(Math.round(t)));
     } catch {
     }
 }
-function Ce(e = {}) {
+function We(e = {}) {
   const {
     nav: t = "session-list",
     navParams: r,
     center: n = "chat",
-    centerParams: i,
+    centerParams: s,
     surface: c,
-    surfaceParams: l,
-    sidebar: s,
+    surfaceParams: d,
+    sidebar: i,
     sidebarParams: x
   } = e, w = [];
   return t && w.push({
@@ -62,12 +62,12 @@ function Ce(e = {}) {
     id: "center",
     position: "center",
     panel: n,
-    params: i,
+    params: s,
     hideHeader: !0
-  }), s && w.push({
+  }), i && w.push({
     id: "sidebar",
     position: "left",
-    panel: s,
+    panel: i,
     params: x,
     hideHeader: !0,
     collapsible: !0,
@@ -77,34 +77,34 @@ function Ce(e = {}) {
     id: "surface",
     position: "right",
     panel: c,
-    params: l,
+    params: d,
     hideHeader: !0,
     dynamic: !0,
     placeholder: "empty"
   }), { version: "2.0", groups: w };
 }
-function Se(e) {
-  const t = e.nav !== null, r = e.surface !== void 0, n = !!e.surface, i = e.nav || "session-list", c = e.center ?? "chat", l = e.surface || "artifact-surface", s = me(), [x, w] = $(
+function Ne(e) {
+  const t = e.nav !== null, r = e.surface !== void 0, n = !!e.surface, s = e.nav || "session-list", c = e.center ?? "chat", d = e.surface || "artifact-surface", i = ge(), [x, w] = T(
     e.storageKey ? `${e.storageKey}:drawerWidth` : void 0,
     260
-  ), [G, J] = $(
+  ), [G, J] = T(
     e.storageKey ? `${e.storageKey}:surfaceWidth` : void 0,
     680
-  ), u = ae(), z = O(x, 200, 360), K = Math.max(480, Math.floor(s * 0.72)), L = O(G, 480, K), R = y(e.centerParams, "getSurface"), D = y(e.centerParams, "isWorkbenchOpen"), A = y(e.centerParams, "openWorkbench"), j = y(e.centerParams, "closeWorkbench"), h = B(e.navParams, "onClose"), m = B(e.surfaceParams, "onClose"), p = B(e.sidebarParams, "onClose"), M = B(e.navParams, "onCreate"), v = !!e.sidebar, k = t ? !!h : !!e.onOpenNav, _ = n ? !!m : !!e.onOpenSurface, C = v ? !!p : !!e.onOpenSidebar, S = b(() => {
+  ), u = oe(), I = O(x, 200, 360), K = Math.max(480, Math.floor(i * 0.72)), L = O(G, 480, K), R = y(e.centerParams, "getSurface"), D = y(e.centerParams, "isWorkbenchOpen"), A = y(e.centerParams, "openWorkbench"), j = y(e.centerParams, "closeWorkbench"), h = B(e.navParams, "onClose"), m = B(e.surfaceParams, "onClose"), p = B(e.sidebarParams, "onClose"), M = B(e.navParams, "onCreate"), v = !!e.sidebar, k = t ? !!h : !!e.onOpenNav, C = n ? !!m : !!e.onOpenSurface, _ = v ? !!p : !!e.onOpenSidebar, S = b(() => {
     var o;
     if (t) {
       h == null || h();
       return;
     }
     (o = e.onOpenNav) == null || o.call(e);
-  }, [h, t, e.onOpenNav]), N = b(() => {
+  }, [h, t, e.onOpenNav]), W = b(() => {
     var o;
     if (n) {
       m == null || m();
       return;
     }
     (o = e.onOpenSurface) == null || o.call(e);
-  }, [m, e.onOpenSurface, n]), W = b(() => {
+  }, [m, e.onOpenSurface, n]), N = b(() => {
     var o;
     if (v) {
       p == null || p();
@@ -112,14 +112,14 @@ function Se(e) {
     }
     (o = e.onOpenSidebar) == null || o.call(e);
   }, [p, e.onOpenSidebar, v]), P = b(() => {
-    t && (h == null || h()), n && (m == null || m()), E(), fe();
+    t && (h == null || h()), n && (m == null || m()), F(), be();
   }, [h, m, t, n]);
-  return oe({
-    shortcuts: F(() => {
+  return ie({
+    shortcuts: E(() => {
       const o = [];
-      return k && o.push({ key: "1", mod: !0, handler: S }), _ && o.push({ key: "2", mod: !0, handler: N }), C && o.push({ key: "3", mod: !0, allowInEditable: !0, handler: W }), c === "chat" && o.push({ key: "Escape", allowInEditable: !0, handler: P }), o;
-    }, [k, C, _, c, P, S, W, N])
-  }), I(() => {
+      return k && o.push({ key: "1", mod: !0, handler: S }), C && o.push({ key: "2", mod: !0, handler: W }), _ && o.push({ key: "3", mod: !0, allowInEditable: !0, handler: N }), c === "chat" && o.push({ key: "Escape", allowInEditable: !0, handler: P }), o;
+    }, [k, _, C, c, P, S, N, W])
+  }), z(() => {
     const o = "workspace:chat-layout", f = "agent:chat-layout";
     return u.unregisterByPluginId(o), u.unregisterByPluginId(f), u.registerCommand({
       id: "workspace:open-session-history",
@@ -135,16 +135,16 @@ function Se(e) {
       keywords: ["surface", "artifacts", "sources", "workbench", n ? "close" : "open"],
       shortcut: "⌘2",
       pluginId: o,
-      when: () => _,
-      run: N
+      when: () => C,
+      run: W
     }), u.registerCommand({
       id: "workspace:toggle-workbench-left-panel",
       title: v ? "Close Workbench Left Panel" : "Open Workbench Left Panel",
       keywords: ["left", "sidebar", "tabs", "workbench", v ? "close" : "open"],
       shortcut: "⌘3",
       pluginId: o,
-      when: () => C,
-      run: W
+      when: () => _,
+      run: N
     }), c === "chat" && u.registerCommand({
       id: "agent:focus-chat",
       title: "Focus Chat",
@@ -172,8 +172,8 @@ function Se(e) {
     e.onOpenSurface,
     e.onOpenSidebar,
     k,
-    _,
     C,
+    _,
     h,
     m,
     p,
@@ -181,9 +181,9 @@ function Se(e) {
     P,
     v,
     S,
-    N,
-    W
-  ]), I(() => {
+    W,
+    N
+  ]), z(() => {
     if (!R || !D || !A) return;
     const o = {
       surface: R,
@@ -191,17 +191,17 @@ function Se(e) {
       openWorkbench: A,
       closeWorkbench: j
     };
-    return ie.on(se.uiCommand, ({ command: f }) => {
-      ce(f, o);
+    return se.on(ce.uiCommand, ({ command: f }) => {
+      de(f, o);
     });
-  }, [R, D, A, j]), /* @__PURE__ */ d(
+  }, [R, D, A, j]), /* @__PURE__ */ l(
     "div",
     {
       "data-boring-workspace": "",
       "data-boring-workspace-part": "shell",
       className: g("relative flex h-full min-h-0 w-full overflow-hidden bg-background", e.className),
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ l(
           "aside",
           {
             "data-boring-workspace-part": "session-drawer",
@@ -214,9 +214,9 @@ function Se(e) {
               t && "border-r border-[color:oklch(from_var(--border)_l_c_h/0.6)]"
             ),
             style: {
-              width: t ? z : 0,
-              minWidth: t ? z : 0,
-              maxWidth: t ? z : 0,
+              width: t ? I : 0,
+              minWidth: t ? I : 0,
+              maxWidth: t ? I : 0,
               willChange: "width"
             },
             children: [
@@ -228,7 +228,7 @@ function Se(e) {
                     "transition-opacity duration-[200ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
                     t ? "opacity-100" : "opacity-0"
                   ),
-                  children: /* @__PURE__ */ a(H, { id: i, params: e.navParams })
+                  children: /* @__PURE__ */ a(H, { id: s, params: e.navParams })
                 }
               ),
               t ? /* @__PURE__ */ a(
@@ -242,7 +242,7 @@ function Se(e) {
             ]
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ l(
           "main",
           {
             "data-boring-workspace-part": "chat-stage",
@@ -273,7 +273,7 @@ function Se(e) {
             ]
           }
         ),
-        r ? /* @__PURE__ */ d(
+        r ? /* @__PURE__ */ l(
           "aside",
           {
             "data-boring-workspace-part": "workbench",
@@ -300,7 +300,7 @@ function Se(e) {
                     "transition-opacity duration-[200ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
                     n ? "opacity-100" : "opacity-0"
                   ),
-                  children: /* @__PURE__ */ a(H, { id: l, params: e.surfaceParams })
+                  children: /* @__PURE__ */ a(H, { id: d, params: e.surfaceParams })
                 }
               ),
               n ? /* @__PURE__ */ a(
@@ -321,50 +321,50 @@ function Se(e) {
 function O(e, t, r) {
   return Math.max(t, Math.min(r, e));
 }
-function $(e, t) {
+function T(e, t) {
   const [r, n] = q(
-    () => e ? T(e, t) : t
+    () => e ? $(e, t) : t
   );
-  I(() => {
-    n(e ? T(e, t) : t);
+  z(() => {
+    n(e ? $(e, t) : t);
   }, [e, t]);
-  const i = b(
+  const s = b(
     (c) => {
-      n((l) => {
-        const s = typeof c == "function" ? c(l) : c;
-        return e && he(e, s), s;
+      n((d) => {
+        const i = typeof c == "function" ? c(d) : c;
+        return e && fe(e, i), i;
       });
     },
     [e]
   );
-  return [r, i];
+  return [r, s];
 }
-function me() {
+function ge() {
   const [e, t] = q(() => typeof window < "u" ? window.innerWidth : 1200);
-  return I(() => {
+  return z(() => {
     const r = () => t(window.innerWidth);
     return window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
   }, []), e;
 }
 function X({ side: e, ariaLabel: t, onResize: r }) {
-  const n = Y(null), i = b((s) => {
-    s.preventDefault(), n.current = s.clientX, s.currentTarget.setPointerCapture(s.pointerId), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
-  }, []), c = b((s) => {
+  const n = ee(null), s = b((i) => {
+    i.preventDefault(), n.current = i.clientX, i.currentTarget.setPointerCapture(i.pointerId), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+  }, []), c = b((i) => {
     if (n.current === null) return;
-    const x = s.clientX - n.current;
-    n.current = s.clientX, r(x);
-  }, [r]), l = b((s) => {
-    n.current !== null && (n.current = null, s.currentTarget.releasePointerCapture(s.pointerId), document.body.style.cursor = "", document.body.style.userSelect = "");
+    const x = i.clientX - n.current;
+    n.current = i.clientX, r(x);
+  }, [r]), d = b((i) => {
+    n.current !== null && (n.current = null, i.currentTarget.releasePointerCapture(i.pointerId), document.body.style.cursor = "", document.body.style.userSelect = "");
   }, []);
   return /* @__PURE__ */ a(
-    te,
+    ne,
     {
       "aria-label": t,
       orientation: "vertical",
-      onResizeStart: i,
+      onResizeStart: s,
       onPointerMove: c,
-      onPointerUp: l,
-      onPointerCancel: l,
+      onPointerUp: d,
+      onPointerCancel: d,
       className: g(
         "absolute top-0 bottom-0 z-20 bg-transparent",
         "transition-colors duration-200",
@@ -382,30 +382,34 @@ function y(e, t) {
 function B(e, t) {
   return y(e, t);
 }
-function E() {
+function F() {
   if (typeof document > "u") return;
   const e = document.querySelector(
     '[data-boring-agent] textarea[name="message"], textarea[name="message"]'
   );
   e == null || e.focus();
 }
-function fe() {
+function be() {
   typeof window > "u" || window.requestAnimationFrame(() => {
-    E(), window.setTimeout(E, 320);
+    F(), window.setTimeout(F, 320);
   });
 }
 function H({ id: e, params: t }) {
-  const r = de(), i = F(() => r.getComponents(), [r])[e], c = F(() => ge(e), [e]);
-  return i ? /* @__PURE__ */ a(Q, { fallback: /* @__PURE__ */ a(ee, { centered: !0 }), children: /* @__PURE__ */ a(
-    i,
+  const r = le(), { debug: n } = ue(), s = Q(
+    r.subscribe,
+    r.getSnapshot,
+    r.getSnapshot
+  ), d = E(() => r.getComponents(), [r, s])[e], i = E(() => we(e), [e]);
+  return d ? /* @__PURE__ */ a(Y, { fallback: /* @__PURE__ */ a(te, { centered: !0 }), children: /* @__PURE__ */ a(
+    d,
     {
-      params: t,
-      api: c,
+      params: { ...t, debug: n },
+      api: i,
       containerApi: {}
     }
   ) }) : null;
 }
-function ge(e) {
+function we(e) {
   return {
     id: e,
     title: e,
@@ -446,7 +450,7 @@ function U({
   icon: t,
   onClick: r,
   label: n,
-  hint: i
+  hint: s
 }) {
   return /* @__PURE__ */ a(
     Z,
@@ -456,7 +460,7 @@ function U({
       size: "icon-sm",
       onClick: r,
       "aria-label": n,
-      title: i ? `${n} (${i})` : n,
+      title: s ? `${n} (${s})` : n,
       className: g(
         "absolute top-1/2 z-30 h-9 w-9 -translate-y-1/2 gap-0.5 rounded-lg bg-background text-muted-foreground",
         e === "left" ? "left-2" : "right-2",
@@ -464,36 +468,36 @@ function U({
         "hover:-translate-y-[calc(50%+1px)] hover:bg-muted/60 hover:text-foreground hover:shadow-[0_2px_4px_-1px_oklch(0_0_0/0.08),0_4px_12px_-4px_oklch(0_0_0/0.10),inset_0_0_0_1px_oklch(from_var(--border)_l_c_h/0.9)]",
         "focus-visible:ring-ring/40"
       ),
-      children: t === "sessions" ? /* @__PURE__ */ d("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+      children: t === "sessions" ? /* @__PURE__ */ l("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
         /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "1.8" }),
         /* @__PURE__ */ a("path", { d: "M12 7v5l3.2 2", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
       ] }) : /* @__PURE__ */ a("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M3 7.5 A1.5 1.5 0 0 1 4.5 6 h4 l2 2 h9 A1.5 1.5 0 0 1 21 9.5 V17.5 A1.5 1.5 0 0 1 19.5 19 H4.5 A1.5 1.5 0 0 1 3 17.5 Z", stroke: "currentColor", strokeWidth: "1.8", strokeLinejoin: "round" }) })
     }
   );
 }
-function Ne({
+function Pe({
   appTitle: e = "Boring",
   sessionTitle: t,
   onCommandPalette: r,
   onNewChat: n,
-  topBarLeft: i,
+  topBarLeft: s,
   topBarRight: c,
-  className: l
+  className: d
 }) {
-  const s = c ?? null;
-  return /* @__PURE__ */ d(
+  const i = c ?? null;
+  return /* @__PURE__ */ l(
     "header",
     {
       "data-boring-workspace-part": "topbar",
       className: g(
         "relative flex items-center justify-between gap-2 px-3",
         "bg-background border-b border-[color:oklch(from_var(--border)_l_c_h/0.4)]",
-        l
+        d
       ),
       style: { height: 40 },
       "aria-label": "App top bar",
       children: [
-        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: i ?? /* @__PURE__ */ d(V, { children: [
+        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: s ?? /* @__PURE__ */ l(V, { children: [
           /* @__PURE__ */ a(
             "img",
             {
@@ -503,13 +507,13 @@ function Ne({
             }
           ),
           /* @__PURE__ */ a("span", { className: "truncate text-[12px] font-medium tracking-tight text-foreground", children: e }),
-          t && /* @__PURE__ */ d(V, { children: [
+          t && /* @__PURE__ */ l(V, { children: [
             /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "text-muted-foreground/30", children: "/" }),
             /* @__PURE__ */ a("span", { className: "truncate text-[12px] font-normal text-muted-foreground", children: t })
           ] })
         ] }) }),
-        /* @__PURE__ */ d(
-          ne,
+        /* @__PURE__ */ l(
+          re,
           {
             type: "button",
             variant: "ghost",
@@ -519,13 +523,13 @@ function Ne({
             "aria-label": "Search catalogs and commands",
             title: "Command palette (⌘K)",
             children: [
-              /* @__PURE__ */ a(le, { className: "h-3 w-3 shrink-0 opacity-70", strokeWidth: 1.75 }),
+              /* @__PURE__ */ a(he, { className: "h-3 w-3 shrink-0 opacity-70", strokeWidth: 1.75 }),
               /* @__PURE__ */ a("span", { className: "font-normal tracking-tight", children: "Search" }),
-              /* @__PURE__ */ a(re, { className: "ml-1 border-0 bg-transparent p-0 text-[10px] shadow-none group-hover:text-muted-foreground", children: "⌘K" })
+              /* @__PURE__ */ a(ae, { className: "ml-1 border-0 bg-transparent p-0 text-[10px] shadow-none group-hover:text-muted-foreground", children: "⌘K" })
             ]
           }
         ),
-        /* @__PURE__ */ d("div", { className: "flex flex-1 shrink-0 items-center justify-end gap-1", children: [
+        /* @__PURE__ */ l("div", { className: "flex flex-1 shrink-0 items-center justify-end gap-1", children: [
           n && /* @__PURE__ */ a(
             Z,
             {
@@ -535,21 +539,21 @@ function Ne({
               onClick: n,
               "aria-label": "New chat",
               title: "New chat",
-              children: /* @__PURE__ */ a(ue, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ a(me, { className: "h-4 w-4" })
             }
           ),
-          s
+          i
         ] })
       ]
     }
   );
 }
-function We({
+function Oe({
   title: e = "Loading workspace",
   description: t = "Preparing the workspace context.",
   status: r = "Loading",
   fullscreen: n = !0,
-  className: i
+  className: s
 }) {
   return /* @__PURE__ */ a(
     "section",
@@ -560,9 +564,9 @@ function We({
       className: g(
         "flex h-full w-full items-center justify-center bg-background px-6 text-foreground",
         n ? "min-h-screen" : "min-h-[240px]",
-        i
+        s
       ),
-      children: /* @__PURE__ */ d("div", { className: "flex w-full max-w-sm flex-col items-center gap-5 text-center", children: [
+      children: /* @__PURE__ */ l("div", { className: "flex w-full max-w-sm flex-col items-center gap-5 text-center", children: [
         /* @__PURE__ */ a("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg border border-border bg-card text-foreground", children: /* @__PURE__ */ a(
           "span",
           {
@@ -570,7 +574,7 @@ function We({
             className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
           }
         ) }),
-        /* @__PURE__ */ d("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ l("div", { className: "space-y-2", children: [
           /* @__PURE__ */ a("h2", { className: "text-base font-medium text-foreground", children: e }),
           t ? /* @__PURE__ */ a("p", { className: "text-sm leading-6 text-muted-foreground", children: t }) : null
         ] }),
@@ -580,10 +584,10 @@ function We({
   );
 }
 export {
-  Se as C,
-  Ne as T,
-  We as W,
-  Ce as b,
-  ke as r,
-  _e as w
+  Ne as C,
+  Pe as T,
+  Oe as W,
+  We as b,
+  _e as r,
+  Se as w
 };