@booboo-brain/panel 0.4.0 → 0.5.1

package/dist/index.js

@@ -246,6 +246,7 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
 .oc-mac:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
 .oc-mac.sel { border-color: var(--accent); background: var(--accent-dim); color: var(--ink); }
 .oc-mac.more { color: var(--ink-3); font-style: italic; }
+.oc-mac.dragging { opacity: 0.45; cursor: grabbing; }
 .oc-mac.more:hover { color: var(--accent); }
 .mac-emoji { font-size: 11px; }
 .mac-name { white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
@@ -290,10 +291,11 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
 .pending-item { font-size: 11.5px; color: var(--warn); font-family: var(--mono); }
 .pnl-err { position: relative; z-index: 2; padding: 10px 26px; color: #e07b6a; font-size: 12.5px; }
 
-/* layout */
-.pnl { height: 100vh; }
+/* layout — 100% so a HOST container decides the height (embedded panel);
+   the standalone app gives html/body/#root 100%, so served behaviour is unchanged. */
+.pnl { height: 100%; min-height: 480px; }
 .body { position: relative; z-index: 1; flex: 1; display: flex; min-height: 0; }
-.tree { flex: 1; min-width: 0; padding: 24px 26px 24px; overflow: hidden;
+.tree { position: relative; flex: 1; min-width: 0; padding: 24px 26px 24px; overflow: hidden;
   display: flex; flex-direction: column;
   /* the ground plane: a faint dot grid (engineered surface, drag affordance)
      + a verdigris pool anchoring the eye at the root. Static — capture-safe. */
@@ -310,11 +312,23 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
 /* the measuring viewport — flex:1 + min-height:0 lets it consume the height
    .tree gives it; align/justify center the scaled block for narrow orgs. */
 .chart-fit { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
-.fit-badge {
-  position: absolute; right: 10px; bottom: 8px; font-size: 10px; font-family: var(--mono);
-  color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
-  padding: 2px 7px; opacity: 0.7; pointer-events: none; animation: settle 0.4s ease both;
+/* user-zoomed: native scroll is the pan; top-left origin keeps the scaled
+   overflow fully reachable (top/center origin would clip the left half). */
+.chart-fit.zoomed { overflow: auto; justify-content: flex-start; }
+.chart-fit.zoomed .chart { transform-origin: top left; }
+.zoomer {
+  position: absolute; right: 34px; bottom: 32px; z-index: 3; display: flex; align-items: center; gap: 2px;
+  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
+  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
 }
+.zoomer button {
+  all: unset; cursor: pointer; padding: 2px 8px; border-radius: 5px; color: var(--ink-2);
+  font-family: var(--mono); font-size: 12px; line-height: 1.4;
+}
+.zoomer button:hover { background: var(--accent-dim); color: var(--ink); }
+.zoomer button.on { color: var(--accent); }
+.zoomer-pct { min-width: 40px; text-align: center; color: var(--ink-3); }
 /* min-width:max-content keeps connectors geometrically correct at natural size
    BEFORE scaling; the measured --fit shrinks the whole block toward its head. */
 .chart {
@@ -804,8 +818,13 @@ function ChartNode({
         "button",
         {
           type: "button",
-          className: `oc-mac${cardProps.selected === m.id ? " sel" : ""}`,
-          title: `${m.name}${m.role ? ` \u2014 ${m.role}` : ""}`,
+          className: `oc-mac${cardProps.selected === m.id ? " sel" : ""}${cardProps.dragId === m.id ? " dragging" : ""}`,
+          title: `${m.name}${m.role ? ` \u2014 ${m.role}` : ""} \xB7 drag onto an agent to reallocate`,
+          draggable: true,
+          onDragStart: (e) => {
+            e.dataTransfer.effectAllowed = "move";
+            cardProps.onDragStart(m.id);
+          },
           onClick: (e) => {
             e.stopPropagation();
             cardProps.onSelect(m.id);
@@ -1184,6 +1203,8 @@ function OrgScreen({
   const fitRef = useRef(null);
   const chartRef = useRef(null);
   const [fit, setFit] = useState(1);
+  const [zoom, setZoom] = useState(null);
+  const eff = zoom ?? fit;
   useLayoutEffect(() => {
     const vp = fitRef.current, chart = chartRef.current;
     if (!vp || !chart) return;
@@ -1201,31 +1222,47 @@ function OrgScreen({
     ro.observe(chart);
     return () => ro.disconnect();
   }, [draft, health, selected]);
+  const effRef = useRef(eff);
+  effRef.current = eff;
+  useEffect(() => {
+    const vp = fitRef.current;
+    if (!vp) return;
+    const onWheel = (e) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const k = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+      setZoom(Math.min(2.5, Math.max(0.2, effRef.current * k)));
+    };
+    vp.addEventListener("wheel", onWheel, { passive: false });
+    return () => vp.removeEventListener("wheel", onWheel);
+  }, []);
   const root = draft.agents.find((a) => a.id === draft.root);
   return /* @__PURE__ */ jsxs("div", { className: "body", onClick: () => setSelected(null), children: [
     /* @__PURE__ */ jsxs("main", { className: "tree", onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx("p", { className: "tree-hint", children: "drag an agent onto its new parent \xB7 click for its dossier \xB7 machine trays show live health" }),
-      /* @__PURE__ */ jsxs("div", { className: "chart-fit", ref: fitRef, children: [
-        /* @__PURE__ */ jsx("div", { className: "chart", ref: chartRef, style: { ["--fit"]: fit }, children: root && /* @__PURE__ */ jsx(
-          ChartNode,
-          {
-            org: draft,
-            a: root,
-            depth: 0,
-            order: 0,
-            selected,
-            dragId,
-            health,
-            onSelect: setSelected,
-            onDragStart: setDragId,
-            onDropOn: dropOn
-          }
-        ) }),
-        fit < 0.999 && /* @__PURE__ */ jsxs("span", { className: "fit-badge", children: [
-          "fit ",
-          Math.round(fit * 100),
+      /* @__PURE__ */ jsx("p", { className: "tree-hint", children: "drag an agent \u2014 or a tray machine \u2014 onto its new parent \xB7 click for its dossier \xB7 machine trays show live health" }),
+      /* @__PURE__ */ jsx("div", { className: `chart-fit${zoom !== null ? " zoomed" : ""}`, ref: fitRef, children: /* @__PURE__ */ jsx("div", { className: "chart", ref: chartRef, style: { ["--fit"]: eff }, children: root && /* @__PURE__ */ jsx(
+        ChartNode,
+        {
+          org: draft,
+          a: root,
+          depth: 0,
+          order: 0,
+          selected,
+          dragId,
+          health,
+          onSelect: setSelected,
+          onDragStart: setDragId,
+          onDropOn: dropOn
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "zoomer", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", title: "zoom out (ctrl+wheel)", onClick: () => setZoom(Math.max(0.2, eff / 1.25)), children: "\u2212" }),
+        /* @__PURE__ */ jsxs("span", { className: "zoomer-pct", children: [
+          Math.round(eff * 100),
           "%"
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", title: "zoom in (ctrl+wheel)", onClick: () => setZoom(Math.min(2.5, eff * 1.25)), children: "\uFF0B" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: zoom === null ? "on" : "", title: "fit the whole org in view", onClick: () => setZoom(null), children: "fit" })
       ] })
     ] }),
     selected && /* @__PURE__ */ jsx(