c5610b075a
The dashboard's Panel singleton and the per-agent UI's own inline Panel IIFE each had their own near-identical implementation of the right-side slide-in drawer used for file previews, diffs, logs, and inbox/todo lists. Both are now thin wrappers around a new <hive-side-panel> shadow-DOM custom element in @hive/shared, following the same house pattern as <hive-menu>: the element owns and builds all its structural chrome itself (backdrop, drawer, resize handle, header, title, close button) in connectedCallback, and only the caller's opaque content node is projected in via a default <slot> so each package's own content-type-specific CSS keeps reaching it. Public API is the union of both originals: open(title, content), openNamed(name, title, content), refresh(name, title, content), close(), and currentOwner(). Drag-to-resize + localStorage width persistence (ported verbatim from the dashboard's original implementation, the only one of the two that had it) is now available to both consumers by default — a deliberate behavior widening for the agent UI, which didn't have resize before. Along the way, fixed a latent bug in the ported CSS: the resize handle was setting a --side-panel-w custom property that no width rule ever consumed, so dragging never actually resized the drawer even though it looked wired up; the new shared stylesheet's width rule reads it properly. Each package's own global stylesheet keeps its content-specific rules (common.css's .side-panel-body .md, agent.css's .side-panel-body .agent-inbox) exactly where they were — those can never be reached from the shared element's shadow tree, same architectural floor as <hive-menu>'s item-row styling. Each wrapper applies a plain 'side-panel-body' compatibility class to its own <hive-side-panel> instance so those existing selectors keep matching by ordinary light-DOM descendant matching, with the shared element itself having no knowledge of what that class name means. Panel.bind() is gone from both packages' public API — the shared element wires its own listeners in connectedCallback, so there's no bind step left to call. tabs.js's one call site (the only bind() caller in either package) was updated to drop it. The two original chrome CSS blocks disagreed on several purely visual details beyond the resize-handle rules (z-index, backdrop color, drawer border/box-shadow, title typography) — the dashboard's values (the more feature-complete of the two) were kept as canonical, which is a small visible style change for the agent UI's panel chrome (thinner border, no box-shadow, no bold purple title). Flagged for visibility since nothing in the original two implementations called this out explicitly. Verified with a real headless-Chromium/CDP harness (bundled the actual component + built page CSS, served statically, drove via raw CDP) for both usage shapes: open/close, backdrop-click dismiss, Escape dismiss, refresh() owner-matching (no-op on wrong owner, applies on matching owner), and drag-to-resize (drawer width updates live during drag and persists to localStorage on release).
28 lines
974 B
JSON
28 lines
974 B
JSON
{
|
|
"name": "@hive/shared",
|
|
"version": "0.0.0",
|
|
"private": true,
|
|
"description": "Shared frontend modules used by both the dashboard and the per-agent UI: terminal log pane, Catppuccin palette, base typography. Imported by sibling workspaces; not bundled standalone.",
|
|
"type": "module",
|
|
"main": "./src/index.js",
|
|
"exports": {
|
|
".": "./src/index.js",
|
|
"./terminal.js": "./src/terminal.js",
|
|
"./tabs.js": "./src/tabs.js",
|
|
"./tabs.css": "./src/tabs.css",
|
|
"./colors.css": "./src/colors.css",
|
|
"./theme.css": "./src/theme.css",
|
|
"./base.css": "./src/base.css",
|
|
"./terminal.css": "./src/terminal.css",
|
|
"./chrome.css": "./src/chrome.css",
|
|
"./forms.js": "./src/forms.js",
|
|
"./dom.js": "./src/dom.js",
|
|
"./modal.js": "./src/modal.js",
|
|
"./shadow-css.js": "./src/shadow-css.js",
|
|
"./hive-menu.js": "./src/hive-menu/hive-menu.js",
|
|
"./side-panel.js": "./src/side-panel/hive-side-panel.js"
|
|
},
|
|
"files": [
|
|
"src/"
|
|
]
|
|
}
|