@booboo-brain/panel 0.5.0 → 0.5.2

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; }
@@ -510,10 +511,34 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
 .pnl-fatal.calm { color: var(--ink-2); }
 
 @media (max-width: 760px) {
-  .doss { position: fixed; right: 0; top: 0; bottom: 0; z-index: 5; width: min(340px, 88vw); box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5); }
-  .tree { padding: 20px 14px 60px; }
+  /* compact chrome */
+  .bar { gap: 8px 14px; padding: 9px 12px; }
+  .bar-brand { font-size: 13px; }
+  .bar-stats { gap: 11px; font-size: 11px; }
+  .bar-stats b { font-size: 12.5px; }
+  .bar-actions { gap: 6px; }
+  .btn { padding: 6px 11px; font-size: 11.5px; }
+  .tabs { padding: 0 4px; }
+  .tab { padding: 10px 9px 9px; font-size: 11.5px; }
+  .tree { padding: 12px 8px 40px; }
+  .tree-hint { display: none; }
   .ag { max-width: 100%; }
   .ag-role { display: none; }
+  .screen { padding: 18px 13px 60px; }
+  /* the dossier becomes a BOTTOM SHEET inside the pane — the chart above stays
+     tappable to switch agents; the ✕ closes. ABSOLUTE (not fixed) so it can
+     never overlap an embedding host's chrome. */
+  .doss {
+    position: absolute; left: 0; right: 0; bottom: 0; top: 34%;
+    width: auto; z-index: 6; border-radius: 16px 16px 0 0;
+    border-top: 1px solid var(--line);
+    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
+  }
+  .doss { animation: sheetup 0.25s ease both; }
+  @keyframes sheetup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
+  .doss-close { display: grid; }
+  /* zoom control clears the sheet — top-right of the chart */
+  .zoomer { top: 4px; right: 8px; bottom: auto; }
 }
 `;
 
@@ -817,8 +842,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);
@@ -867,6 +897,7 @@ function Dossier({
   onAdd,
   onRemove,
   onSelect,
+  onClose,
   health = null
 }) {
   const api = useApi();
@@ -957,7 +988,8 @@ function Dossier({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "doss-head-actions", children: [
         !edit && /* @__PURE__ */ jsx("button", { className: "doss-3d", title: "edit this agent", onClick: startEdit, children: "\u270E edit" }),
-        hasSnapshot && /* @__PURE__ */ jsx("button", { className: "doss-3d", title: "see the whole brain in 3D", onClick: () => nav("/graph"), children: "\u25C9 3D" })
+        hasSnapshot && /* @__PURE__ */ jsx("button", { className: "doss-3d", title: "see the whole brain in 3D", onClick: () => nav("/graph"), children: "\u25C9 3D" }),
+        /* @__PURE__ */ jsx("button", { className: "doss-close", title: "close the dossier", "aria-label": "close the dossier", onClick: onClose, children: "\u2715" })
       ] })
     ] }),
     edit && /* @__PURE__ */ jsxs("div", { className: "doss-edit", children: [
@@ -1233,7 +1265,7 @@ function OrgScreen({
   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__ */ 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,
         {
@@ -1269,6 +1301,7 @@ function OrgScreen({
         onAdd,
         onRemove,
         onSelect: setSelected,
+        onClose: () => setSelected(null),
         health
       }
     )