@chuvenger/devdock 0.6.0 → 0.8.0

package/dist/react.cjs

@@ -2,26 +2,281 @@
 
 var react = require('react');
 var reactDom = require('react-dom');
+var cn = require('cn');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/react/DevDock.tsx
 
 // src/core/hotkey.ts
+var isMac = () => typeof navigator !== "undefined" && /mac/i.test(navigator.platform);
+var KEY_CODES = {
+  ".": "Period",
+  ",": "Comma",
+  "/": "Slash",
+  "\\": "Backslash",
+  ";": "Semicolon",
+  "'": "Quote",
+  "[": "BracketLeft",
+  "]": "BracketRight",
+  "-": "Minus",
+  "=": "Equal",
+  "`": "Backquote",
+  " ": "Space",
+  space: "Space"
+};
+var codeFor = (key) => {
+  if (/^[a-z]$/.test(key)) return `Key${key.toUpperCase()}`;
+  if (/^[0-9]$/.test(key)) return `Digit${key}`;
+  return KEY_CODES[key];
+};
 function matchHotkey(spec, e) {
   const parts = spec.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
   if (parts.length === 0) return false;
   const key = parts[parts.length - 1];
   const mods = new Set(parts.slice(0, -1));
-  const isMac = typeof navigator !== "undefined" && /mac/i.test(navigator.platform);
-  const wantMeta = mods.has("meta") || mods.has("cmd") || mods.has("mod") && isMac;
-  const wantCtrl = mods.has("ctrl") || mods.has("control") || mods.has("mod") && !isMac;
+  const mac = isMac();
+  const wantMeta = mods.has("meta") || mods.has("cmd") || mods.has("mod") && mac;
+  const wantCtrl = mods.has("ctrl") || mods.has("control") || mods.has("mod") && !mac;
   const wantShift = mods.has("shift");
   const wantAlt = mods.has("alt") || mods.has("option");
   if (e.metaKey !== wantMeta) return false;
   if (e.ctrlKey !== wantCtrl) return false;
   if (e.shiftKey !== wantShift) return false;
   if (e.altKey !== wantAlt) return false;
-  return e.key.toLowerCase() === key;
+  if (e.key.toLowerCase() === key) return true;
+  return wantAlt && e.code === codeFor(key);
+}
+var DEFAULT_HOTKEY = "alt+shift+d";
+var MAC_SYMBOL = {
+  meta: "\u2318",
+  cmd: "\u2318",
+  ctrl: "\u2303",
+  control: "\u2303",
+  shift: "\u21E7",
+  alt: "\u2325",
+  option: "\u2325"
+};
+var PC_NAME = {
+  meta: "Win",
+  cmd: "Win",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  option: "Alt"
+};
+function formatHotkey(spec) {
+  const parts = spec.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
+  if (parts.length === 0) return "";
+  const key = parts[parts.length - 1];
+  const mods = parts.slice(0, -1);
+  const mac = isMac();
+  const label = key.length === 1 ? key.toUpperCase() : key;
+  const shown = mods.map(
+    (m) => mac ? MAC_SYMBOL[m] ?? (m === "mod" ? "\u2318" : m) : PC_NAME[m] ?? (m === "mod" ? "Ctrl" : m)
+  );
+  return mac ? [...shown, label].join("") : [...shown, label].join("+");
+}
+
+// src/core/theme.ts
+var partClass = {
+  root: "devdock-root",
+  button: "devdock-button",
+  dot: "devdock-dot",
+  buttonLabel: "devdock-button-label",
+  panel: "devdock-panel",
+  title: "devdock-title",
+  hotkeyHint: "devdock-hotkey-hint",
+  inputWrap: "devdock-input-wrap",
+  input: "devdock-input",
+  body: "devdock-body",
+  list: "devdock-list",
+  section: "devdock-section",
+  group: "devdock-group",
+  row: "devdock-row",
+  rowActive: "",
+  rowLabel: "devdock-row-label",
+  rowPath: "devdock-row-path",
+  check: "devdock-check",
+  empty: "devdock-empty",
+  viewLabel: "devdock-view-label",
+  view: "devdock-view"
+};
+var STYLE_MARKER = "data-devdock-styles";
+var FONT = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+var BASE_CSS = `
+.devdock-root { font-family: var(--devdock-font, ${FONT}); }
+
+.devdock-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  color: var(--devdock-button-fg, #fff);
+  background: var(--devdock-button-bg, #111317);
+  border: 1px solid var(--devdock-border, #2a2e37);
+  border-radius: 999px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+  cursor: pointer;
+}
+.devdock-button:where([aria-expanded="true"]) {
+  background: var(--devdock-accent, #2563eb);
+}
+
+.devdock-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--devdock-success, #22c55e);
+  display: inline-block;
+}
+
+.devdock-panel {
+  width: var(--devdock-width, 280px);
+  max-height: var(--devdock-max-height, 70vh);
+  display: flex;
+  flex-direction: column;
+  background: var(--devdock-bg, #16181d);
+  color: var(--devdock-fg, #e7e9ee);
+  border: 1px solid var(--devdock-border, #2a2e37);
+  border-radius: var(--devdock-radius, 12px);
+  box-shadow: var(--devdock-shadow, 0 12px 40px rgba(0, 0, 0, 0.45));
+  overflow: hidden;
+}
+
+.devdock-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--devdock-border, #2a2e37);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--devdock-muted, #8b909c);
+}
+
+.devdock-hotkey-hint {
+  flex-shrink: 0;
+  padding: 1px 5px;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  /* The heading's tracking and casing are for words, not for a key cap. */
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--devdock-subtle, #6b7280);
+  border: 1px solid var(--devdock-border, #2a2e37);
+  border-radius: var(--devdock-radius-xs, 4px);
+}
+
+.devdock-input-wrap { padding: 8px; }
+
+.devdock-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  font-size: 13px;
+  color: var(--devdock-fg, #e7e9ee);
+  background: var(--devdock-input-bg, #0f1115);
+  border: 1px solid var(--devdock-border, #2a2e37);
+  border-radius: var(--devdock-radius-sm, 8px);
+  outline: none;
+}
+
+.devdock-body {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.devdock-list { padding: 0 6px 8px; }
+
+.devdock-section { margin-top: 6px; }
+
+.devdock-group {
+  padding: 6px 8px 2px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  color: var(--devdock-subtle, #6b7280);
+}
+
+.devdock-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  font-size: 13px;
+  color: var(--devdock-fg, #e7e9ee);
+  background: transparent;
+  border: none;
+  border-radius: var(--devdock-radius-sm, 8px);
+  cursor: pointer;
+}
+.devdock-row:where([data-active]) {
+  background: var(--devdock-accent, #2563eb);
+  color: var(--devdock-accent-fg, #e7e9ee);
+}
+
+.devdock-row-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.devdock-row-path {
+  font-size: 11px;
+  color: var(--devdock-subtle, #6b7280);
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  flex-shrink: 0;
+}
+:where(.devdock-row[data-active]) .devdock-row-path {
+  /* Whatever colour the row ended up with, stepped back: currentColor in the
+     color property means the inherited one, so this tracks the row however it
+     was set - a token, a class of yours - instead of guessing at the accent. */
+  color: color-mix(in oklab, currentColor 75%, transparent);
+}
+
+.devdock-check {
+  flex-shrink: 0;
+  width: 12px;
+  text-align: center;
+  color: var(--devdock-success, #22c55e);
+}
+
+.devdock-empty {
+  padding: 12px;
+  font-size: 13px;
+  color: var(--devdock-subtle, #6b7280);
+}
+
+.devdock-view-label {
+  padding: 4px 8px 0;
+  font-size: 11px;
+  color: var(--devdock-muted, #8b909c);
+}
+
+.devdock-view { padding: 2px 8px 6px; }
+`;
+var DEFAULT_LAYER = "devdock";
+function dockStyles(layer) {
+  if (!layer) return BASE_CSS;
+  const block = `@layer ${layer} {${BASE_CSS}}
+`;
+  if (layer !== DEFAULT_LAYER) return block;
+  const order = `@layer theme, base, components, ${layer}, utilities;`;
+  return `${order}
+${block}`;
 }
 
 // src/core/dock.ts
@@ -54,33 +309,12 @@ var isDevHost = () => {
   if (!host) return true;
   return host === "localhost" || host.endsWith(".localhost") || host.endsWith(".local") || host === "::1" || host === "0.0.0.0" || isLocalIPv4(host);
 };
-function el(tag, styles, props) {
+function el(tag, props) {
   const node = document.createElement(tag);
-  if (styles) Object.assign(node.style, styles);
   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 }
-  );
-}
+var PARTS = Object.keys(partClass);
 function cornerStyle(position) {
   const gap = "16px";
   switch (position) {
@@ -103,7 +337,6 @@ function panelAnchor(position) {
     [isRight ? "right" : "left"]: "0"
   };
 }
-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) => {
@@ -120,96 +353,72 @@ function createDevDock(initial = {}) {
     } };
   }
   let opts = { ...initial };
+  const cls = (...parts) => cn.cn(parts.map((part) => [partClass[part], opts.classNames?.[part]]));
+  const classSig = () => PARTS.map((p) => cn.cn(opts.classNames?.[p])).join("\0");
   let open = false;
   let query = "";
   let active = 0;
   let mounted = false;
   const host = el("div");
   host.setAttribute("data-devdock", "");
-  const shadowMode = initial.shadow ?? true;
+  const shadowMode = initial.shadow ?? (initial.classNames ? "inherit" : 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", {
-    width: "280px",
-    maxHeight: "min(70vh, 480px)",
-    display: "flex",
-    flexDirection: "column",
-    background: "#16181d",
-    color: "#e7e9ee",
-    border: "1px solid #2a2e37",
-    borderRadius: "12px",
-    boxShadow: "0 12px 40px rgba(0,0,0,0.45)",
-    overflow: "hidden"
+  const baseStyle = el("style", {
+    textContent: dockStyles(initial.cssLayer ?? DEFAULT_LAYER)
   });
+  baseStyle.setAttribute(STYLE_MARKER, "");
+  if (shadowRoot) mountPoint.appendChild(baseStyle);
+  const styleSlot = shadowRoot && shadowMode === "inherit" ? el("div") : null;
+  if (styleSlot) {
+    styleSlot.style.display = "contents";
+    mountPoint.appendChild(styleSlot);
+  }
+  const root = el("div");
+  mountPoint.appendChild(root);
+  const panel = el("div");
   panel.setAttribute("role", "dialog");
-  const heading = el("div", {
-    padding: "10px 12px",
-    borderBottom: "1px solid #2a2e37",
-    fontSize: "12px",
-    fontWeight: "600",
-    letterSpacing: "0.4px",
-    textTransform: "uppercase",
-    color: "#8b909c"
-  });
-  const inputWrap = el("div", { padding: "8px" });
-  const input = el("input", {
-    width: "100%",
-    boxSizing: "border-box",
-    padding: "8px 10px",
-    fontSize: "13px",
-    color: "#e7e9ee",
-    background: "#0f1115",
-    border: "1px solid #2a2e37",
-    borderRadius: "8px",
-    outline: "none"
-  });
+  const heading = el("div");
+  const headingText = el("span");
+  const hotkeyHint = el("kbd");
+  heading.append(headingText, hotkeyHint);
+  const inputWrap = el("div");
+  const input = el("input");
   input.placeholder = "Filter\u2026";
   inputWrap.appendChild(input);
-  const list = el("div", { padding: "0 6px 8px" });
+  const list = el("div");
   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"
-  });
+  const body = el("div");
   body.append(viewsBefore, list, viewsAfter);
   panel.append(heading, inputWrap, body);
-  const button = el("button", {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "6px",
-    padding: "8px 12px",
-    fontSize: "12px",
-    fontWeight: "700",
-    letterSpacing: "0.6px",
-    color: "#fff",
-    background: "#111317",
-    border: "1px solid #2a2e37",
-    borderRadius: "999px",
-    boxShadow: "0 4px 14px rgba(0,0,0,0.35)",
-    cursor: "pointer"
-  });
+  const button = el("button");
   button.type = "button";
   button.setAttribute("aria-label", "Toggle dev menu");
-  const dot = el("span", {
-    width: "8px",
-    height: "8px",
-    borderRadius: "999px",
-    background: "#22c55e",
-    display: "inline-block"
-  });
+  const dot = el("span");
   const buttonLabel = el("span");
   button.append(dot, buttonLabel);
   root.appendChild(button);
+  const sectionHeading = (text) => el("div", { className: cls("group"), textContent: text });
+  const viewLabel = (text) => el("div", { className: cls("viewLabel"), textContent: text });
+  const paintClasses = () => {
+    root.className = cls("root");
+    button.className = cls("button");
+    dot.className = cls("dot");
+    buttonLabel.className = cls("buttonLabel");
+    panel.className = cls("panel");
+    heading.className = cls("title");
+    hotkeyHint.className = cls("hotkeyHint");
+    inputWrap.className = cls("inputWrap");
+    input.className = cls("input");
+    body.className = cls("body");
+    list.className = cls("list");
+  };
+  const hotkey = () => opts.hotkey === void 0 ? DEFAULT_HOTKEY : opts.hotkey;
   const enabled = () => {
     const e = opts.enabled;
     if (typeof e === "function") return e();
@@ -293,9 +502,9 @@ function createDevDock(initial = {}) {
   const paintActive = () => {
     rows.forEach((row, idx) => {
       const isActive = idx === active;
-      row.node.style.background = isActive ? "#2563eb" : "transparent";
-      if (row.pathSpan)
-        row.pathSpan.style.color = isActive ? "#cfe0ff" : "#6b7280";
+      if (isActive) row.node.setAttribute("data-active", "");
+      else row.node.removeAttribute("data-active");
+      row.node.className = isActive ? cls("row", "rowActive") : cls("row");
     });
   };
   const setActive = (next, scroll = false) => {
@@ -307,7 +516,7 @@ function createDevDock(initial = {}) {
   const renderList = () => {
     const filtered = getFiltered();
     active = Math.min(active, Math.max(0, filtered.length - 1));
-    const sig = filtered.map(itemSig).join("\n");
+    const sig = [classSig(), ...filtered.map(itemSig)].join("\n");
     if (sig === rowsSig) {
       filtered.forEach((it, idx) => {
         const row = rows[idx];
@@ -323,11 +532,7 @@ function createDevDock(initial = {}) {
     list.replaceChildren();
     if (filtered.length === 0) {
       list.appendChild(
-        el(
-          "div",
-          { padding: "12px", fontSize: "13px", color: "#6b7280" },
-          { textContent: "Nothing here." }
-        )
+        el("div", { className: cls("empty"), textContent: "Nothing here." })
       );
       return;
     }
@@ -338,55 +543,26 @@ function createDevDock(initial = {}) {
       groups.set(it.group, arr);
     }
     for (const [groupName, groupItems] of groups) {
-      const section = el("div", { marginTop: "6px" });
+      const section = el("div", { className: cls("section") });
       section.appendChild(sectionHeading(groupName));
       for (const it of groupItems) {
         const idx = filtered.indexOf(it);
-        const row = el("button", {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: "8px",
-          width: "100%",
-          textAlign: "left",
-          padding: "8px 10px",
-          fontSize: "13px",
-          color: "#e7e9ee",
-          background: "transparent",
-          border: "none",
-          borderRadius: "8px",
-          cursor: "pointer"
-        });
+        const row = el("button", { className: cls("row") });
         row.type = "button";
-        const labelSpan = el("span", {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        });
+        const labelSpan = el("span", { className: cls("rowLabel") });
         row.appendChild(labelSpan);
         let pathSpan = null;
         if (it.kind === "route" && it.route.path !== it.label) {
-          pathSpan = el(
-            "span",
-            {
-              fontSize: "11px",
-              color: "#6b7280",
-              fontFamily: "ui-monospace, SFMono-Regular, monospace",
-              flexShrink: "0"
-            },
-            { textContent: it.route.path }
-          );
+          pathSpan = el("span", {
+            className: cls("rowPath"),
+            textContent: it.route.path
+          });
           row.appendChild(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"
-          });
+          checkSpan = el("span", { className: cls("check") });
           row.appendChild(checkSpan);
         }
         const rec = { item: it, node: row, labelSpan, pathSpan, checkSpan };
@@ -415,11 +591,14 @@ function createDevDock(initial = {}) {
   };
   const renderViews = () => {
     const keyed = keyViews(opts.views ?? []);
-    const sig = keyed.map(
-      ({ view, key }) => [key, viewOrder(view), view.group ?? "", view.label ?? ""].join(
-        "\0"
+    const sig = [
+      classSig(),
+      ...keyed.map(
+        ({ view, key }) => [key, viewOrder(view), view.group ?? "", view.label ?? ""].join(
+          "\0"
+        )
       )
-    ).join("\n");
+    ].join("\n");
     if (sig === viewsSig) return;
     viewsSig = sig;
     const live = new Set(keyed.map(({ key }) => key));
@@ -447,7 +626,7 @@ function createDevDock(initial = {}) {
           });
       }
       for (const section of sections.values()) {
-        const wrap = el("div", { marginTop: "6px" });
+        const wrap = el("div", { className: cls("section") });
         if (section.heading) wrap.appendChild(sectionHeading(section.heading));
         for (const { view, key } of section.items) {
           if (view.group != null && view.label)
@@ -457,7 +636,7 @@ function createDevDock(initial = {}) {
             wrap.appendChild(existing.host);
             continue;
           }
-          const viewHost = el("div", { padding: "2px 8px 6px" });
+          const viewHost = el("div", { className: cls("view") });
           viewHost.setAttribute("data-devdock-view", view.id ?? "");
           wrap.appendChild(viewHost);
           pending.push({ view, key, host: viewHost });
@@ -484,7 +663,9 @@ function createDevDock(initial = {}) {
       }
     }
     const sheets = [
-      ...document.querySelectorAll('style, link[rel~="stylesheet" i]')
+      ...document.querySelectorAll(
+        `style:not([${STYLE_MARKER}]), link[rel~="stylesheet" i]`
+      )
     ];
     const sig = sheets.map((n) => `${n.tagName}\0${n.getAttribute("href") ?? n.textContent}`).join("\n");
     if (sig === clonesSig) return;
@@ -526,12 +707,17 @@ function createDevDock(initial = {}) {
       right: ""
     });
     Object.assign(root.style, cornerStyle(position));
-    heading.textContent = opts.title ?? "Dev Menu";
+    headingText.textContent = opts.title ?? "Dev Menu";
     panel.setAttribute("aria-label", opts.title ?? "Dev Menu");
     Object.assign(panel.style, panelAnchor(position));
     buttonLabel.textContent = opts.label ?? "DEV";
-    button.style.background = open ? "#2563eb" : "#111317";
+    const spec = hotkey();
+    const chord = spec ? formatHotkey(spec) : "";
+    hotkeyHint.textContent = chord;
+    hotkeyHint.hidden = !chord;
+    button.title = chord ? `${opts.title ?? "Dev Menu"} (${chord})` : opts.title ?? "Dev Menu";
     button.setAttribute("aria-expanded", String(open));
+    paintClasses();
   };
   function setOpen(next) {
     if (open === next) return;
@@ -578,7 +764,8 @@ function createDevDock(initial = {}) {
     if (open && !e.composedPath().includes(root)) setOpen(false);
   };
   const onKeyDown = (e) => {
-    if (opts.hotkey && matchHotkey(opts.hotkey, e)) {
+    const spec = hotkey();
+    if (spec && matchHotkey(spec, e)) {
       e.preventDefault();
       setOpen(!open);
     }
@@ -593,6 +780,8 @@ function createDevDock(initial = {}) {
   };
   const mount = () => {
     if (mounted) return;
+    if (!shadowRoot)
+      (document.head ?? document.documentElement).prepend(baseStyle);
     (opts.container ?? document.body).appendChild(host);
     addListeners();
     syncStyles();
@@ -603,6 +792,7 @@ function createDevDock(initial = {}) {
     if (!mounted) return;
     removeListeners();
     unwatchStyles();
+    if (!shadowRoot) baseStyle.remove();
     host.remove();
     mounted = false;
   };