@chuvenger/devdock 0.7.0 → 0.9.0

package/dist/{match-C8MsaP6h.d.ts → match-gTnXtOUP.d.ts}

@@ -1,4 +1,4 @@
-import { d as DevRoute } from './types-B8WgSe7o.js';
+import { d as DevRoute } from './types-D9BBBI7v.js';
 
 /**
  * Restricts which auto-detected routes appear. A string is treated as a glob

package/dist/{match-Dw1CSS0G.d.cts → match-zABwk1Ai.d.cts}

@@ -1,4 +1,4 @@
-import { d as DevRoute } from './types-B8WgSe7o.cjs';
+import { d as DevRoute } from './types-D9BBBI7v.cjs';
 
 /**
  * Restricts which auto-detected routes appear. A string is treated as a glob

package/dist/react-router.cjs

@@ -9,21 +9,74 @@ var jsxRuntime = require('react/jsx-runtime');
 // src/react/react-router.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
@@ -34,6 +87,7 @@ var partClass = {
   buttonLabel: "devdock-button-label",
   panel: "devdock-panel",
   title: "devdock-title",
+  hotkeyHint: "devdock-hotkey-hint",
   inputWrap: "devdock-input-wrap",
   input: "devdock-input",
   body: "devdock-body",
@@ -95,6 +149,10 @@ var BASE_CSS = `
 }
 
 .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;
@@ -104,6 +162,20 @@ var BASE_CSS = `
   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 {
@@ -244,27 +316,37 @@ function el(tag, props) {
   return node;
 }
 var PARTS = Object.keys(partClass);
+function edgesOf(position) {
+  return position.split("-");
+}
+var CENTER_ALONG = {
+  top: { left: "50%", transform: "translateX(-50%)" },
+  bottom: { left: "50%", transform: "translateX(-50%)" },
+  left: { top: "50%", transform: "translateY(-50%)" },
+  right: { top: "50%", transform: "translateY(-50%)" }
+};
+var CLEAR = { top: "", bottom: "", left: "", right: "", transform: "" };
 function cornerStyle(position) {
   const gap = "16px";
-  switch (position) {
-    case "bottom-left":
-      return { bottom: gap, left: gap };
-    case "top-left":
-      return { top: gap, left: gap };
-    case "top-right":
-      return { top: gap, right: gap };
-    default:
-      return { bottom: gap, right: gap };
-  }
+  const edges = edgesOf(position);
+  const styles = { ...CLEAR };
+  for (const edge of edges) styles[edge] = gap;
+  if (edges.length === 1) Object.assign(styles, CENTER_ALONG[edges[0]]);
+  return styles;
 }
 function panelAnchor(position) {
-  const isTop = position.startsWith("top");
-  const isRight = position.endsWith("right");
-  return {
-    position: "absolute",
-    [isTop ? "top" : "bottom"]: "calc(100% + 8px)",
-    [isRight ? "right" : "left"]: "0"
-  };
+  const edges = edgesOf(position);
+  const styles = { ...CLEAR, position: "absolute" };
+  if (edges.length === 2) {
+    const [vertical, horizontal] = edges;
+    styles[vertical] = "calc(100% + 8px)";
+    styles[horizontal] = "0";
+    return styles;
+  }
+  const edge = edges[0];
+  styles[edge] = "calc(100% + 8px)";
+  Object.assign(styles, CENTER_ALONG[edge]);
+  return styles;
 }
 function keyViews(views) {
   const used = /* @__PURE__ */ new Set();
@@ -309,6 +391,9 @@ function createDevDock(initial = {}) {
   const panel = el("div");
   panel.setAttribute("role", "dialog");
   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";
@@ -338,11 +423,13 @@ function createDevDock(initial = {}) {
     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();
@@ -626,15 +713,18 @@ function createDevDock(initial = {}) {
       position: "fixed",
       zIndex: String(zIndex),
       top: "",
-      bottom: "",
-      left: "",
-      right: ""
+      bottom: ""
     });
     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";
+    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();
   };
@@ -683,7 +773,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);
     }