@chuvenger/devdock 0.4.1 → 0.5.0

package/dist/react.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/react/DevDock.tsx
 
@@ -58,6 +60,27 @@ function el(tag, styles, props) {
   if (props) Object.assign(node, props);
   return node;
 }
+function sectionHeading(text) {
+  return el(
+    "div",
+    {
+      padding: "6px 8px 2px",
+      fontSize: "10px",
+      fontWeight: "700",
+      letterSpacing: "0.6px",
+      textTransform: "uppercase",
+      color: "#6b7280"
+    },
+    { textContent: text }
+  );
+}
+function viewLabel(text) {
+  return el(
+    "div",
+    { padding: "4px 8px 0", fontSize: "11px", color: "#8b909c" },
+    { textContent: text }
+  );
+}
 function cornerStyle(position) {
   const gap = "16px";
   switch (position) {
@@ -81,6 +104,15 @@ function panelAnchor(position) {
   };
 }
 var FONT = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+function keyViews(views) {
+  const used = /* @__PURE__ */ new Set();
+  return views.map((view, i) => {
+    let key = view.id ?? `#${i}`;
+    while (used.has(key)) key = `${key}#${i}`;
+    used.add(key);
+    return { view, key };
+  });
+}
 function createDevDock(initial = {}) {
   if (typeof document === "undefined") {
     return { update() {
@@ -94,9 +126,12 @@ function createDevDock(initial = {}) {
   let mounted = false;
   const host = el("div");
   host.setAttribute("data-devdock", "");
-  const useShadow = (initial.shadow ?? true) && typeof host.attachShadow === "function";
+  const shadowMode = initial.shadow ?? true;
+  const useShadow = shadowMode !== false && typeof host.attachShadow === "function";
   const shadowRoot = useShadow ? host.attachShadow({ mode: "open" }) : null;
   const mountPoint = shadowRoot ?? host;
+  const styleSlot = shadowRoot && shadowMode === "inherit" ? el("div", { display: "contents" }) : null;
+  if (styleSlot) mountPoint.appendChild(styleSlot);
   const root = el("div", { fontFamily: FONT });
   mountPoint.appendChild(root);
   const panel = el("div", {
@@ -135,8 +170,19 @@ function createDevDock(initial = {}) {
   });
   input.placeholder = "Filter\u2026";
   inputWrap.appendChild(input);
-  const list = el("div", { overflowY: "auto", padding: "0 6px 8px" });
-  panel.append(heading, inputWrap, list);
+  const list = el("div", { padding: "0 6px 8px" });
+  list.setAttribute("data-devdock-list", "");
+  const viewsBefore = el("div");
+  viewsBefore.setAttribute("data-devdock-views", "before");
+  const viewsAfter = el("div");
+  viewsAfter.setAttribute("data-devdock-views", "after");
+  const body = el("div", {
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column"
+  });
+  body.append(viewsBefore, list, viewsAfter);
+  panel.append(heading, inputWrap, body);
   const button = el("button", {
     display: "inline-flex",
     alignItems: "center",
@@ -177,20 +223,35 @@ function createDevDock(initial = {}) {
   const buildItems = () => {
     const out = [];
     (opts.routes ?? []).forEach((r, i) => {
+      const key = `route:${r.path}:${i}`;
+      const label = r.label ?? r.path;
       out.push({
         kind: "route",
-        key: `route:${r.path}:${i}`,
-        label: r.label ?? r.path,
+        key,
+        label,
         group: r.group ?? "Routes",
+        sig: [key, r.group ?? "Routes", label, r.path].join("\0"),
         route: r
       });
     });
     (opts.commands ?? []).forEach((c, i) => {
+      const live = typeof c.label === "function";
+      const label = typeof c.label === "function" ? c.label() : c.label;
+      const checked = c.checked ? c.checked() === true : null;
+      const key = `cmd:${c.id ?? (live ? "" : label)}:${i}`;
+      const group = c.group ?? "Commands";
       out.push({
         kind: "command",
-        key: `cmd:${c.id ?? c.label}:${i}`,
-        label: c.label,
-        group: c.group ?? "Commands",
+        key,
+        label,
+        group,
+        sig: [
+          key,
+          group,
+          live ? "\0live" : label,
+          checked === null ? "" : "\0checkable"
+        ].join("\0"),
+        checked,
         command: c
       });
     });
@@ -218,9 +279,17 @@ function createDevDock(initial = {}) {
   };
   let rows = [];
   let rowsSig = null;
-  const itemSig = (it) => [it.key, it.group, it.label, it.kind === "route" ? it.route.path : ""].join(
-    "\0"
-  );
+  const itemSig = (it) => it.sig;
+  const paintRow = (row) => {
+    const it = row.item;
+    if (row.labelSpan.textContent !== it.label)
+      row.labelSpan.textContent = it.label;
+    if (row.checkSpan && it.kind === "command") {
+      const on = it.checked === true;
+      row.checkSpan.textContent = on ? "\u2713" : "";
+      row.node.setAttribute("aria-checked", String(on));
+    }
+  };
   const paintActive = () => {
     rows.forEach((row, idx) => {
       const isActive = idx === active;
@@ -242,7 +311,9 @@ function createDevDock(initial = {}) {
     if (sig === rowsSig) {
       filtered.forEach((it, idx) => {
         const row = rows[idx];
-        if (row) row.item = it;
+        if (!row) return;
+        row.item = it;
+        paintRow(row);
       });
       paintActive();
       return;
@@ -268,20 +339,7 @@ function createDevDock(initial = {}) {
     }
     for (const [groupName, groupItems] of groups) {
       const section = el("div", { marginTop: "6px" });
-      section.appendChild(
-        el(
-          "div",
-          {
-            padding: "6px 8px 2px",
-            fontSize: "10px",
-            fontWeight: "700",
-            letterSpacing: "0.6px",
-            textTransform: "uppercase",
-            color: "#6b7280"
-          },
-          { textContent: groupName }
-        )
-      );
+      section.appendChild(sectionHeading(groupName));
       for (const it of groupItems) {
         const idx = filtered.indexOf(it);
         const row = el("button", {
@@ -300,15 +358,11 @@ function createDevDock(initial = {}) {
           cursor: "pointer"
         });
         row.type = "button";
-        const labelSpan = el(
-          "span",
-          {
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          },
-          { textContent: it.label }
-        );
+        const labelSpan = el("span", {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        });
         row.appendChild(labelSpan);
         let pathSpan = null;
         if (it.kind === "route" && it.route.path !== it.label) {
@@ -324,8 +378,20 @@ function createDevDock(initial = {}) {
           );
           row.appendChild(pathSpan);
         }
-        const rec = { item: it, node: row, pathSpan };
+        let checkSpan = null;
+        if (it.kind === "command" && it.checked !== null) {
+          row.setAttribute("role", "checkbox");
+          checkSpan = el("span", {
+            flexShrink: "0",
+            width: "12px",
+            textAlign: "center",
+            color: "#22c55e"
+          });
+          row.appendChild(checkSpan);
+        }
+        const rec = { item: it, node: row, labelSpan, pathSpan, checkSpan };
         rows[idx] = rec;
+        paintRow(rec);
         row.addEventListener("mouseenter", () => setActive(idx));
         row.addEventListener("click", () => void runItem(rec.item));
         section.appendChild(row);
@@ -334,6 +400,120 @@ function createDevDock(initial = {}) {
     }
     paintActive();
   };
+  const mountedViews = /* @__PURE__ */ new Map();
+  let viewsSig = null;
+  const viewOrder = (v) => v.order === "after" ? "after" : "before";
+  const unmountViews = () => {
+    for (const mv of mountedViews.values()) {
+      mv.teardown?.();
+      mv.host.remove();
+    }
+    mountedViews.clear();
+    viewsBefore.replaceChildren();
+    viewsAfter.replaceChildren();
+    viewsSig = null;
+  };
+  const renderViews = () => {
+    const keyed = keyViews(opts.views ?? []);
+    const sig = keyed.map(
+      ({ view, key }) => [key, viewOrder(view), view.group ?? "", view.label ?? ""].join(
+        "\0"
+      )
+    ).join("\n");
+    if (sig === viewsSig) return;
+    viewsSig = sig;
+    const live = new Set(keyed.map(({ key }) => key));
+    for (const [key, mv] of mountedViews) {
+      if (live.has(key)) continue;
+      mv.teardown?.();
+      mv.host.remove();
+      mountedViews.delete(key);
+    }
+    viewsBefore.replaceChildren();
+    viewsAfter.replaceChildren();
+    const pending = [];
+    for (const placement of ["before", "after"]) {
+      const container = placement === "before" ? viewsBefore : viewsAfter;
+      const here = keyed.filter(({ view }) => viewOrder(view) === placement);
+      const sections = /* @__PURE__ */ new Map();
+      for (const entry of here) {
+        const groupKey = entry.view.group ?? `\0${entry.key}`;
+        const section = sections.get(groupKey);
+        if (section) section.items.push(entry);
+        else
+          sections.set(groupKey, {
+            heading: entry.view.group ?? entry.view.label,
+            items: [entry]
+          });
+      }
+      for (const section of sections.values()) {
+        const wrap = el("div", { marginTop: "6px" });
+        if (section.heading) wrap.appendChild(sectionHeading(section.heading));
+        for (const { view, key } of section.items) {
+          if (view.group != null && view.label)
+            wrap.appendChild(viewLabel(view.label));
+          const existing = mountedViews.get(key);
+          if (existing) {
+            wrap.appendChild(existing.host);
+            continue;
+          }
+          const viewHost = el("div", { padding: "2px 8px 6px" });
+          viewHost.setAttribute("data-devdock-view", view.id ?? "");
+          wrap.appendChild(viewHost);
+          pending.push({ view, key, host: viewHost });
+        }
+        container.appendChild(wrap);
+      }
+    }
+    for (const { view, key, host: viewHost } of pending) {
+      const mv = { host: viewHost };
+      mountedViews.set(key, mv);
+      const teardown = view.mount(viewHost);
+      if (typeof teardown === "function") mv.teardown = teardown;
+    }
+  };
+  let clonesSig = null;
+  const syncStyles = () => {
+    if (!styleSlot || !shadowRoot) return;
+    const adopted = document.adoptedStyleSheets;
+    if (Array.isArray(adopted)) {
+      try {
+        const sr = shadowRoot;
+        sr.adoptedStyleSheets = [...adopted];
+      } catch {
+      }
+    }
+    const sheets = [
+      ...document.querySelectorAll('style, link[rel~="stylesheet" i]')
+    ];
+    const sig = sheets.map((n) => `${n.tagName}\0${n.getAttribute("href") ?? n.textContent}`).join("\n");
+    if (sig === clonesSig) return;
+    clonesSig = sig;
+    styleSlot.replaceChildren(...sheets.map((n) => n.cloneNode(true)));
+  };
+  let styleObserver = null;
+  let syncQueued = false;
+  const watchStyles = () => {
+    if (!styleSlot || styleObserver || !document.head || typeof MutationObserver === "undefined")
+      return;
+    styleObserver = new MutationObserver(() => {
+      if (syncQueued) return;
+      syncQueued = true;
+      queueMicrotask(() => {
+        syncQueued = false;
+        syncStyles();
+      });
+    });
+    styleObserver.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  };
+  const unwatchStyles = () => {
+    styleObserver?.disconnect();
+    styleObserver = null;
+  };
   const renderShell = () => {
     const position = opts.position ?? "bottom-right";
     const zIndex = opts.zIndex ?? 2147483e3;
@@ -363,9 +543,12 @@ function createDevDock(initial = {}) {
       panel.isConnected || root.insertBefore(panel, button);
       renderShell();
       renderList();
+      syncStyles();
+      renderViews();
       requestAnimationFrame(() => input.focus());
-    } else if (panel.isConnected) {
-      panel.remove();
+    } else {
+      unmountViews();
+      if (panel.isConnected) panel.remove();
     }
     renderShell();
   }
@@ -412,11 +595,14 @@ function createDevDock(initial = {}) {
     if (mounted) return;
     (opts.container ?? document.body).appendChild(host);
     addListeners();
+    syncStyles();
+    watchStyles();
     mounted = true;
   };
   const unmount = () => {
     if (!mounted) return;
     removeListeners();
+    unwatchStyles();
     host.remove();
     mounted = false;
   };
@@ -428,7 +614,10 @@ function createDevDock(initial = {}) {
       if (enabled()) {
         mount();
         renderShell();
-        if (open) renderList();
+        if (open) {
+          renderList();
+          renderViews();
+        }
       } else {
         setOpen(false);
         unmount();
@@ -440,24 +629,56 @@ function createDevDock(initial = {}) {
     }
   };
 }
-
-// src/react/DevDock.tsx
-function DevDock(props) {
+var NO_VIEWS = [];
+function DevDock({ views = NO_VIEWS, ...options }) {
   const instance = react.useRef(null);
-  const latest = react.useRef(props);
-  latest.current = props;
+  const [hosts, setHosts] = react.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const alive = react.useRef(true);
+  const keyed = react.useMemo(() => keyViews(views), [views]);
+  const coreViews = react.useMemo(
+    () => keyed.map(({ key, view }) => ({
+      id: key,
+      label: view.label,
+      group: view.group,
+      order: view.order,
+      mount: (host) => {
+        setHosts((prev) => new Map(prev).set(key, host));
+        return () => {
+          if (!alive.current) return;
+          setHosts((prev) => {
+            const next = new Map(prev);
+            next.delete(key);
+            return next;
+          });
+        };
+      }
+    })),
+    [keyed]
+  );
+  const latest = react.useRef({ options, coreViews });
+  latest.current = { options, coreViews };
   react.useEffect(() => {
-    const inst = createDevDock(latest.current);
+    alive.current = true;
+    const inst = createDevDock({
+      ...latest.current.options,
+      views: latest.current.coreViews
+    });
     instance.current = inst;
     return () => {
+      alive.current = false;
       inst.destroy();
       instance.current = null;
     };
   }, []);
   react.useEffect(() => {
-    instance.current?.update(props);
+    instance.current?.update({ ...options, views: coreViews });
   });
-  return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keyed.map(({ key, view }) => {
+    const host = hosts.get(key);
+    return host ? reactDom.createPortal(view.render(), host, key) : null;
+  }) });
 }
 
 exports.DevDock = DevDock;