vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

frontend: one component = one dir for hive-btn/hive-dialog/hive-toast

Browse source 
Splits the shadow-DOM custom elements out of the flat shared/src layout
into per-component directories:

  hive-btn/hive-btn.{js,css}
  hive-dialog/hive-dialog.{js,css}
  hive-toast/hive-toast.{js,css}

hive-dialog and hive-toast were previously defined inline inside
modal.js alongside the openDialog/themedConfirm/themedPrompt/themedToast
orchestration helpers; modal.js is now a slim entry point that imports
the two component modules for their customElements.define side effect
and keeps only the orchestration functions, which aren't components
themselves. hive-dialog.js now imports hive-btn.js directly (it's the
actual consumer that creates <hive-btn> elements), instead of modal.js
importing it on hive-dialog's behalf.

Pulled the identical shadow-root-plus-adopted-stylesheet boilerplate
(previously duplicated between modal.js's local attachShadow() and
hive-btn.js's inline version) into a shared shadow-css.js helper,
attachShadowCss(host, cssText, shadowInit), used by all three
components. Behaviorally identical — same attachShadow() options per
component, just deduplicated.

No external import paths changed: every consumer only ever imported
the package-level @hive/shared/modal.js entry point, never the
component internals directly, so this is fully internal to the shared
package. Verified with a full frontend build (dashboard + agent
bundles).
This commit is contained in:
iris 2026-07-31 21:29:45 +02:00
commit edf1c5a17f
8 changed files with 172 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

172
frontend/packages/shared/src/modal.js
View file

@ -1,133 +1,27 @@
// modal.js — reusable themed modal/dialog component, shared by the
// modal.js — reusable themed modal/dialog helpers, shared by the
// dashboard and the per-agent UI. An in-theme replacement for the
// browser's native `confirm()` / `alert()` overlays so destructive
// actions and prompts match each page's chrome instead of a jarring OS
// dialog.
//
// Implemented as three shadow-DOM custom elements (`<hive-dialog>`,
// `<hive-toast>`, and `<hive-btn>` for the dialog's own buttons) — real
// per-component style encapsulation, CSS in real `.css` files imported
// as raw text (see each component's own header comment for the design
// rationale). Other `.btn` consumers across the app stay on the
// light-DOM `.btn` class for now — migrating them is a separate
// follow-up.
// The custom elements themselves (`<hive-dialog>`, `<hive-toast>`,
// `<hive-btn>`) each live in their own directory (one component = one
// dir: `hive-dialog/`, `hive-toast/`, `hive-btn/`) — real per-component
// style encapsulation, CSS in real `.css` files imported as raw text
// (see each component's own header comment for the design rationale).
// This file is the orchestration layer on top: `openDialog` is the
// general primitive (any title/message/content + a row of buttons);
// `themedConfirm`/`themedPrompt`/`themedToast` are thin wrappers built on
// it. It's the single entry point external packages import
// (`@hive/shared/modal.js`) — the component internals aren't exported
// individually.
//
// `openDialog` is the general primitive (any title/message/content + a row of
// buttons); `themedConfirm` is a thin cancel/confirm wrapper with optional
// checkboxes built on top of it.
// Other `.btn` consumers across the app stay on the light-DOM `.btn`
// class for now — migrating them is a separate follow-up.
import { el } from './dom.js';
import './hive-btn.js'; // registers <hive-btn> — side-effect import, no named export needed
import dialogCss from './hive-dialog.css';
import toastCss from './hive-toast.css';
// Attach an open shadow root to `host`, adopt `ownCssText` (a scoped
// stylesheet built fresh per call from a real .css file's contents,
// imported as raw text), and return the shadow root for the caller to
// populate.
function attachShadow(host, ownCssText) {
const root = host.attachShadow({ mode: 'open' });
const sheet = new CSSStyleSheet();
sheet.replaceSync(ownCssText);
root.adoptedStyleSheets = [sheet];
return root;
}
// <hive-dialog> — the backdrop + box custom element behind `openDialog`.
// Not exported; constructed and configured by `openDialog` only. Callers
// set `._opts` before `append()`ing it (custom elements can't take
// constructor args when created via `document.createElement`), then the
// element renders itself in `connectedCallback` and reports the outcome
// via a `hive-dialog-close` CustomEvent (`detail` = the resolved value)
// rather than exposing a resolve/reject pair directly — that keeps the
// element a normal DOM node with a normal event contract instead of a
// bespoke Promise-ish object. The element itself *is* the backdrop
// (`:host` carries the fixed-position/centering rules); the box, title,
// message, content, and buttons all render inside its shadow root.
class HiveDialog extends HTMLElement {
connectedCallback() {
const {
title = '', message = '', content = null,
buttons = [{ label: 'ok', value: true }],
danger = false, dismissable = true,
} = this._opts || {};
const root = attachShadow(this, dialogCss);
let settled = false;
const done = (value) => {
if (settled) return;
settled = true;
document.removeEventListener('keydown', onKey, true);
this.dispatchEvent(new CustomEvent('hive-dialog-close', { detail: value }));
this.remove();
};
const onKey = (e) => {
if (dismissable && e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
done(null);
}
};
this._done = done; // exposed for close-on-escape-elsewhere callers, if ever needed
const btnEls = buttons.map((b) => {
// `b.class` names the variant ('cancel' | 'confirm'); `b.danger`
// overrides it to the 'danger' look regardless (a destructive
// confirm button reads as danger, not as a plain confirm).
const variant = b.danger ? 'danger' : b.class;
const btn = el('hive-btn', {
type: 'button',
...(variant ? { variant } : {}),
}, b.label);
btn.addEventListener('click', () => done(b.value));
return { spec: b, btn };
});
// Give the dialog an accessible name: label it by its title if present,
// else by its message, via `aria-labelledby` (a11y — role=dialog needs a
// name). Only the labelling element carries the id. IDs are scoped to
// this shadow root, so no cross-instance collision risk even without
// the random suffix — kept anyway since it costs nothing and guards
// against a future shared-DOM edge case (e.g. `::part()` piercing).
const labelId = 'dlg-' + Math.random().toString(36).slice(2, 9);
const titleEl = title ? el('div', { class: 'title', id: labelId }, title) : null;
const messageEl = message
? el('div', title ? { class: 'message' } : { class: 'message', id: labelId }, message)
: null;
const boxAttrs = { class: 'box', role: 'dialog', 'aria-modal': 'true' };
if (titleEl || messageEl) boxAttrs['aria-labelledby'] = labelId;
const box = el('div', boxAttrs,
titleEl,
messageEl,
content || null,
el('div', { class: 'actions' }, ...btnEls.map((b) => b.btn)));
root.append(box);
this.addEventListener('click', (e) => {
// `e.target` is retargeted to `this` (the host) for ANY click that
// originated inside the shadow tree, once it bubbles out to a
// listener attached on the host itself — per spec, retargeting
// applies to every ancestor outside the shadow tree, and the host
// element's own light-DOM-side listeners count as outside. So
// `e.target === this` was true for every click inside `.box` too
// (title, message, a bare checkbox row with no button to consume
// it first), not just genuine backdrop clicks — dismissing the
// whole dialog on, say, a checkbox click. `composedPath()[0]` is
// the true original target, unaffected by retargeting: it's `this`
// only when nothing inside the shadow tree was actually under the
// cursor, i.e. a real backdrop click.
if (dismissable && e.composedPath()[0] === this) done(null);
});
document.addEventListener('keydown', onKey, true);
const focusTarget = btnEls.find((b) => b.spec.autofocus)
|| (danger ? btnEls.find((b) => !b.spec.danger) : null)
|| btnEls[btnEls.length - 1];
if (focusTarget) focusTarget.btn.focus();
}
}
customElements.define('hive-dialog', HiveDialog);
import './hive-dialog/hive-dialog.js'; // registers <hive-dialog> — side-effect import
import './hive-toast/hive-toast.js'; // registers <hive-toast> — side-effect import
// openDialog({ title, message, content, buttons, danger, dismissable })
// → Promise resolving to the clicked button's `value`, or `null` when the
@ -235,40 +129,6 @@ export function themedPrompt(opts = {}) {
return result;
}
// <hive-toast> — one transient notification entry. Owns its own
// auto-dismiss timer via connectedCallback/disconnectedCallback (cleared
// on removal so a toast dismissed early by click doesn't leave a stray
// timer), rather than the closure-captured timer handle the pre-custom-
// element version used. Callers set `._message`/`._opts` before append —
// same reason as `<hive-dialog>` above. The element itself is the visible
// toast box (`:host` carries the styling, `:host(.error)` etc. switch on
// a plain class the host carries) — the message text renders directly in
// the shadow root rather than via a `<slot>`, since there's no external
// light-DOM content to project.
class HiveToast extends HTMLElement {
connectedCallback() {
const { type = 'info', duration } = this._opts || {};
const ms = duration != null ? duration : (type === 'error' ? 8000 : 4000);
const root = attachShadow(this, toastCss);
this.classList.add(type);
this.setAttribute('role', type === 'error' ? 'alert' : 'status');
root.textContent = this._message || '';
let removed = false;
this._remove = () => {
if (removed) return;
removed = true;
this.classList.add('out');
setTimeout(() => this.remove(), 200);
};
this.addEventListener('click', this._remove);
if (ms > 0) this._timer = setTimeout(this._remove, ms);
}
disconnectedCallback() {
clearTimeout(this._timer);
}
}
customElements.define('hive-toast', HiveToast);
// themedToast(message, { type, duration }) — non-blocking transient
// notification; a lighter alternative to a modal for feedback that needs no
// decision (errors, validation, status). Stacks in a fixed top-right