npm - @booboo-brain/panel - Versions diffs - 0.5.4 → 0.5.6 - Mend

@booboo-brain/panel 0.5.4 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.d.ts +2 -1
package/dist/index.js +104 -36
package/dist-app/assets/index-CMTXU3r8.js +1130 -0
package/dist-app/index.html +22 -22
package/package.json +1 -1
package/dist-app/assets/index-CgJZeTDV.js +0 -1079

package/dist/index.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import * as react from 'react';
 type ApiFn = (path: string, init?: RequestInit) => Promise<any>;
-declare function Panel({ api }?: {
+declare function Panel({ api, theme }?: {
     api?: ApiFn;
+    theme?: "dark" | "light";
 }): react.JSX.Element;
 declare const PANEL_VERSION: string;

package/dist/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { orgBootSlice, relTime } from "@booboo-brain/spec";
 // src/panel-css.ts
 var PANEL_CSS = String.raw`
 /* GENERATED from design/tokens.json by scripts/gen-tokens.mjs — DO NOT EDIT */
-:root {
+.pnl, .pnl-fatal {
   --bg: #06080e;
   --bg-lift: #0a0d15;
   --card: #0f131c;
@@ -59,7 +59,12 @@ var PANEL_CSS = String.raw`
    the dachshund's collar), a slow aurora breathing behind everything, cards
    that lift and settle, numbers that count up. Dark by default. */
-:root {
+/* Scoped to the panel's own roots, NEVER :root — see scripts/gen-tokens.mjs.
+   A custom property on :root is shadowed by any ancestor declaring the same
+   name, so a host whose shell declares --bg-1/--line/--gold silently repaints
+   the board. Declaring them here means nothing can sit between these names and
+   the elements that read them. */
+.pnl, .pnl-fatal {
   /* THE STAFF BOARD — a master-key rack, not a dashboard.
      Structure comes from two real artefacts: a master-key hierarchy (passe
      général → passe partiel → cylinder, which is literally how a hotel is
@@ -118,8 +123,10 @@ var PANEL_CSS = String.raw`
 }
 /* DARK — the wine-and-brass board, now one toggle away instead of the default.
-   Same structure, same shadows-as-depth logic, inverted ground. */
-:root[data-theme="dark"] {
+   Same structure, same shadows-as-depth logic, inverted ground.
+   Scoped to the panel's own root (not :root) for two reasons: the panel must
+   not read a HOST's data-theme as its own, and it must not write one either. */
+.pnl[data-theme="dark"], .pnl-fatal[data-theme="dark"] {
   --bg: var(--wine);
   --bg-1: var(--plate);
   --bg-2: var(--wine2);
@@ -146,15 +153,19 @@ var PANEL_CSS = String.raw`
   --sh-2: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 34px -18px rgba(0, 0, 0, .85);
   --sh-3: 0 4px 8px rgba(0, 0, 0, .5), 0 22px 48px -18px rgba(0, 0, 0, .9);
 }
-[data-theme="dark"] body { background: var(--wine); }
-[data-theme="dark"] .ag { background: linear-gradient(168deg, var(--plate-lift), #180e16); }
-[data-theme="dark"] .bar, [data-theme="dark"] .tabs { background: rgba(11, 5, 9, 0.72); }
-[data-theme="dark"] .rack .wt { background: #fff; border-color: transparent; }
-[data-theme="dark"] .pnl-stars { opacity: .45; }
+/* The [data-theme="dark"] body rule that used to live here is GONE. A mounted
+   component has no business repainting its host's <body> — in Dionisos OS it
+   turned the cockpit's body white while the cards stayed dark, which is half of
+   what "split-brain" looked like. The standalone app paints its own body in
+   app/index.html, which is the page that actually owns it. */
+.pnl[data-theme="dark"] .ag { background: linear-gradient(168deg, var(--plate-lift), #180e16); }
+.pnl[data-theme="dark"] .bar, .pnl[data-theme="dark"] .tabs { background: rgba(11, 5, 9, 0.72); }
+.pnl[data-theme="dark"] .rack .wt { background: #fff; border-color: transparent; }
+.pnl[data-theme="dark"] .pnl-stars { opacity: .45; }
-* { box-sizing: border-box; }
-body { font-family: var(--font); color: var(--ink); background: var(--bg); overflow-x: hidden; }
+.pnl, .pnl-fatal, .pnl *, .pnl-fatal * { box-sizing: border-box; }
+.pnl, .pnl-fatal { font-family: var(--font); color: var(--ink); background: var(--bg); }
 .pnl { display: flex; flex-direction: column; position: relative; overflow: hidden; }
 /* the ground — warm wine light pooling from the top-left, exactly as the hero
@@ -422,7 +433,8 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
 .pending-item:hover i { background: var(--warn); color: var(--bg-1); }
 /* the lane lights up as a drop target, so a near-miss is impossible */
-.oc-row.lanes > .oc-child.lane-over {
+.oc-row.lanes > .oc-child.lane-over,
+.oc-row.solo-pack > .oc-child.lane-over {
   border-color: var(--accent); background: var(--accent-dim);
   box-shadow: 0 0 0 3px var(--accent-dim), var(--sh-2);
 }
@@ -585,12 +597,21 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
      row — 2,400px natural width, which fit-to-width then scaled to 52% and made
      every plate unreadable. Rank IV wraps; the board stays legible. */
   grid-template-columns: max-content var(--rail-w, 56px) minmax(420px, 940px);
-  grid-template-areas: "gm rail lanes";
+  /* Row 2 carries the PACK (childless rank-III units). It is a second row and
+     not a second area on row 1 because two items cannot share one named area
+     without overlapping — and the gm/rail cells are deliberately left EMPTY on
+     row 2 so the GM stays in row 1 rather than stretching down the whole board
+     (the C18 defect, in reverse: there the lanes spanned two rows and pinned
+     the GM to the top of the first). */
+  grid-template-areas:
+    "gm rail lanes"
+    ".  .    pack";
   align-items: start;
 }
 .cascade > .ocn > .casc-head { grid-area: gm; display: flex; flex-direction: column; align-items: stretch; }
 .cascade > .ocn > .oc-down { grid-area: rail; }
 .cascade > .ocn > .oc-row.lanes { grid-area: lanes; }
+.cascade > .ocn > .oc-row.solo-pack { grid-area: pack; }
 /* the SVG rail plane — sits under the plates, never intercepts a click */
 .rails { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; width: 100%; height: 100%; }
@@ -631,6 +652,36 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
   transition: border-color .25s ease, box-shadow .35s var(--ease);
 }
 .oc-row.lanes > .oc-child:hover { border-color: var(--line-2, #d9d3c9); box-shadow: var(--sh-2); }
+/* ── THE PACK: rank-III units that have no staff ───────────────────────────
+   A lane is a shelf for a department AND ITS PEOPLE. A unit with nobody under
+   it has no shelf to fill — it is a card, and 43 cards each claiming a
+   940px-wide tray is what turned the live fleet into a 12,000px queue
+   (GAPS C34). They pack instead: same tray material, sized to the card, wrapped
+   into rows. Still drop targets, still railed. */
+.oc-row.solo-pack {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+  gap: 14px;
+  width: 100%;
+  margin-top: 14px;
+  align-items: stretch;
+}
+.oc-row.solo-pack > .oc-child {
+  position: relative;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface-tray);
+  padding: 14px;
+  transition: border-color .25s ease, box-shadow .35s var(--ease);
+}
+.oc-row.solo-pack > .oc-child:hover { border-color: var(--line-2, #d9d3c9); box-shadow: var(--sh-2); }
+/* the pack owns its connectors, exactly as the lanes do */
+.oc-row.solo-pack > .oc-child::before,
+.oc-row.solo-pack > .oc-child::after { display: none; }
+.oc-row.solo-pack > .oc-child > .ocn > .oc-down { display: none; }
+.oc-row.solo-pack > .oc-child > .ocn { display: block; }
+.oc-row.solo-pack > .oc-child > .ocn > .ag { width: 100%; }
 @media (prefers-reduced-motion: reduce) {
   .oc-row.lanes > .oc-child:hover { transform: none; }
 }
@@ -1161,17 +1212,18 @@ function readTheme() {
     return "light";
   }
 }
-function useTheme() {
+function useTheme(pinned) {
   const [theme, setTheme] = useState(readTheme);
   const chosen = useRef(false);
   useEffect(() => {
-    document.documentElement.setAttribute("data-theme", theme);
+    if (pinned) return;
     if (!chosen.current) return;
     try {
       localStorage.setItem(THEME_KEY, theme);
     } catch {
     }
-  }, [theme]);
+  }, [theme, pinned]);
+  if (pinned) return [pinned, null];
   return [theme, () => {
     chosen.current = true;
     setTheme((t) => t === "dark" ? "light" : "dark");
@@ -1527,6 +1579,9 @@ function ChartNode({
 }) {
   const kidsRaw = org.agents.filter((c) => c.parent === a.id && c.kind !== "automation");
   const kids = depth === 0 ? [...kidsRaw].sort((x, y) => x.id.localeCompare(y.id)) : kidsRaw;
+  const hasStaff = (k) => org.agents.some((x) => x.parent === k.id && x.kind !== "automation");
+  const laneKids = depth === 0 ? kids.filter(hasStaff) : kids;
+  const soloKids = depth === 0 ? kids.filter((k) => !hasStaff(k)) : [];
   const machines = (() => {
     const out = [];
     const walk = (pid) => {
@@ -1652,17 +1707,30 @@ function ChartNode({
             " staff \xB7 folded to department level \u2014 click to expand"
           ]
         }
-      ) : /* @__PURE__ */ jsx("div", { className: `oc-row${depth > 0 && kids.length > 3 ? " wrap" : ""}${depth === 0 ? " lanes" : ""}`, children: kids.map((k, i) => /* @__PURE__ */ jsx(
-        Lane,
-        {
-          laneId: k.id,
-          isLane: depth === 0,
-          dragId: cardProps.dragId,
-          onDropOn: cardProps.onDropOn,
-          children: /* @__PURE__ */ jsx(ChartNode, { org, a: k, depth: depth + 1, order: i, ...cardProps })
-        },
-        k.id
-      )) })
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: `oc-row${depth > 0 && kids.length > 3 ? " wrap" : ""}${depth === 0 ? " lanes" : ""}`, children: laneKids.map((k, i) => /* @__PURE__ */ jsx(
+          Lane,
+          {
+            laneId: k.id,
+            isLane: depth === 0,
+            dragId: cardProps.dragId,
+            onDropOn: cardProps.onDropOn,
+            children: /* @__PURE__ */ jsx(ChartNode, { org, a: k, depth: depth + 1, order: i, ...cardProps })
+          },
+          k.id
+        )) }),
+        soloKids.length > 0 && /* @__PURE__ */ jsx("div", { className: "oc-row solo-pack", children: soloKids.map((k, i) => /* @__PURE__ */ jsx(
+          Lane,
+          {
+            laneId: k.id,
+            isLane: true,
+            dragId: cardProps.dragId,
+            onDropOn: cardProps.onDropOn,
+            children: /* @__PURE__ */ jsx(ChartNode, { org, a: k, depth: depth + 1, order: laneKids.length + i, ...cardProps })
+          },
+          k.id
+        )) })
+      ] })
     ] })
   ] });
 }
@@ -2422,7 +2490,7 @@ function GraphScreen({ hasSnapshot }) {
     ] });
   return /* @__PURE__ */ jsx("div", { className: "graph-wrap", children: /* @__PURE__ */ jsx("iframe", { className: "graph-frame", src: "/view/?file=/snapshot.json", title: "Booboo 3D brain" }) });
 }
-function App() {
+function App({ theme: pinnedTheme }) {
   const api = useApi();
   const [tab, param] = useRoute();
   const [saved, setSaved] = useState(null);
@@ -2553,11 +2621,11 @@ function App() {
   const nodeCount = useCountUp(stats?.nodes ?? 0, 1200);
   const memTotal = useCountUp(totals?.mem ?? 0, 1100);
   const repTotal = useCountUp(totals?.rep ?? 0, 1300);
-  const [theme, toggleTheme] = useTheme();
+  const [theme, toggleTheme] = useTheme(pinnedTheme);
   const [showLaw, setShowLaw] = useState(false);
-  if (err && !draft) return /* @__PURE__ */ jsx("div", { className: "pnl-fatal", children: err });
-  if (!draft) return /* @__PURE__ */ jsx("div", { className: "pnl-fatal calm", children: "waking the organigram\u2026" });
-  return /* @__PURE__ */ jsxs("div", { className: "pnl", children: [
+  if (err && !draft) return /* @__PURE__ */ jsx("div", { className: "pnl-fatal", "data-theme": theme, children: err });
+  if (!draft) return /* @__PURE__ */ jsx("div", { className: "pnl-fatal calm", "data-theme": theme, children: "waking the organigram\u2026" });
+  return /* @__PURE__ */ jsxs("div", { className: "pnl", "data-theme": theme, children: [
     /* @__PURE__ */ jsx("div", { className: "pnl-aurora", "aria-hidden": true }),
     /* @__PURE__ */ jsx(Constellation, {}),
     /* @__PURE__ */ jsxs("header", { className: "bar", children: [
@@ -2594,7 +2662,7 @@ function App() {
             children: "\u2696 show the law"
           }
         ),
-        /* @__PURE__ */ jsx("button", { className: "btn ghost theme-toggle", title: "light / dark", "aria-label": "toggle light or dark theme", onClick: toggleTheme, children: theme === "dark" ? "\u2600" : "\u263E" }),
+        toggleTheme && /* @__PURE__ */ jsx("button", { className: "btn ghost theme-toggle", title: "light / dark", "aria-label": "toggle light or dark theme", onClick: toggleTheme, children: theme === "dark" ? "\u2600" : "\u263E" }),
         changes.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("span", { className: "bar-draft", children: [
             changes.length,
@@ -2653,17 +2721,17 @@ function App() {
     ] }, tab + (param ?? ""))
   ] });
 }
-function Panel({ api = defaultApi } = {}) {
+function Panel({ api = defaultApi, theme } = {}) {
   return /* @__PURE__ */ jsxs(ApiCtx.Provider, { value: api, children: [
     /* @__PURE__ */ jsx("style", { children: PANEL_CSS }),
-    /* @__PURE__ */ jsx(App, {})
+    /* @__PURE__ */ jsx(App, { theme })
   ] });
 }
 // package.json
 var package_default = {
   name: "@booboo-brain/panel",
-  version: "0.5.4",
+  version: "0.5.6",
   description: "Booboo panel \u2014 the organigram. Run your agents like a company: a drag-drop hierarchy your agents boot from, with buckets, reports, rules and the 3D graph, over one org file + snapshot.",
   license: "MIT",
   repository: {