@fluixi/devtools 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/kind-filter.mjs

@@ -0,0 +1,151 @@
+// src/kind-filter.ts
+var FILTERABLE_KINDS = [
+  "state",
+  "memo",
+  "effect",
+  "store",
+  "resource",
+  "component",
+  "provider",
+  "control",
+  "router",
+  "handler",
+  "context",
+  "directive"
+];
+var LABEL = { handler: "route" };
+function createKindFilter(host, options) {
+  const doc = host.ownerDocument;
+  const kinds = options.kinds ?? FILTERABLE_KINDS;
+  const on = new Set(kinds);
+  const root = doc.createElement("div");
+  root.className = "fx-kinds";
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-kinds-button fx-dropdown-btn";
+  button.setAttribute("aria-haspopup", "true");
+  button.setAttribute("aria-expanded", "false");
+  button.title = "Choose which kinds of node the graph draws";
+  const caret = doc.createElement("div");
+  caret.className = "fx-dropdown-caret";
+  const panel = doc.createElement("div");
+  panel.className = "fx-kinds-panel";
+  if (options.panelClass) {
+    panel.classList.add(...options.panelClass.split(/\s+/).filter((c) => c));
+  }
+  panel.hidden = true;
+  const all = doc.createElement("input");
+  all.type = "checkbox";
+  const allRow = doc.createElement("label");
+  allRow.className = "fx-kinds-all";
+  allRow.append(all, doc.createTextNode("all"));
+  const boxes = /* @__PURE__ */ new Map();
+  for (const kind of kinds) {
+    const box = doc.createElement("input");
+    box.type = "checkbox";
+    box.checked = true;
+    const row = doc.createElement("label");
+    row.append(box, doc.createTextNode(LABEL[kind] ?? kind));
+    panel.append(row);
+    boxes.set(kind, box);
+  }
+  panel.prepend(allRow);
+  root.append(button, panel);
+  host.append(root);
+  const everything = () => on.size === kinds.length;
+  const chosen = () => kinds.filter((kind) => on.has(kind));
+  function paint() {
+    const name = options.label ?? "Kinds";
+    button.textContent = everything() ? name : `${name} · ${on.size}`;
+    button.classList.toggle("on", !everything());
+    all.checked = everything();
+    button.appendChild(caret);
+    all.indeterminate = on.size > 0 && !everything();
+    for (const [kind, box] of boxes) box.checked = on.has(kind);
+  }
+  function report() {
+    options.onChange(everything() ? null : chosen());
+  }
+  for (const [kind, box] of boxes) {
+    box.addEventListener("change", () => {
+      if (box.checked) on.add(kind);
+      else on.delete(kind);
+      paint();
+      report();
+    });
+  }
+  all.addEventListener("change", () => {
+    for (const kind of kinds) on.add(kind);
+    paint();
+    report();
+  });
+  const close = () => {
+    panel.hidden = true;
+    button.setAttribute("aria-expanded", "false");
+  };
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    panel.hidden = !panel.hidden;
+    button.setAttribute("aria-expanded", String(!panel.hidden));
+  });
+  panel.addEventListener("click", (event) => event.stopPropagation());
+  const away = () => close();
+  const key = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("click", away);
+  doc.addEventListener("keydown", key);
+  paint();
+  return {
+    get selected() {
+      return chosen();
+    },
+    select(next) {
+      on.clear();
+      for (const kind of next ?? kinds) on.add(kind);
+      paint();
+    },
+    destroy() {
+      doc.removeEventListener("click", away);
+      doc.removeEventListener("keydown", key);
+      root.remove();
+    }
+  };
+}
+var KIND_FILTER_CSS = `
+.fx-kinds { position: relative; display: inline-flex; }
+.fx-kinds-button { white-space: nowrap; }
+/* The hidden attribute is display:none from the user agent, which a class setting display outranks. */
+.fx-kinds-panel[hidden] { display: none; }
+.fx-kinds-panel {
+  position: absolute; top: calc(100% + 4px); z-index: 40;
+  display: grid; gap: 2px; padding: 6px 8px; min-width: 132px;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
+  }
+.fx-kinds-panel:not(.fx-panel-left){ right: 0; }
+.fx-kinds-panel.fx-panel-left { left: 0; }
+.fx-kinds-panel label {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-kinds-panel label:hover { color: var(--fx-label, #e7e9ee); }
+.fx-kinds-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-kinds-all {
+  padding-bottom: 4px; margin-bottom: 2px;
+  border-bottom: 1px solid var(--fx-line, #262a35);
+  color: var(--fx-label, #e7e9ee) !important;
+}
+`;
+var DROPDOWN_FILTER_CSS = `
+.fx-dropdown-btn { background-color: transparent; appearance: none; border: 1px solid var(--line-strong); outline: none; border-radius: .25rem; padding-block: .25rem; padding-inline: .875rem; font-size: .75rem; cursor: pointer }
+.fx-dropdown-btn:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background-color: var(--bg); }
+.fx-dropdown-caret { width: 0;height: 0;border-left: .15rem solid transparent; border-right: .15rem solid transparent; border-top: .15rem solid currentColor; transition: transform 0.2s ease; right: .4rem; top: 50%; color: color-mix(in oklab, var(--muted) 50%, transparent); position: absolute; }
+`;
+export {
+  DROPDOWN_FILTER_CSS,
+  FILTERABLE_KINDS,
+  KIND_FILTER_CSS,
+  createKindFilter
+};

package/dist/menu.cjs

@@ -0,0 +1,141 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menu.ts
+var menu_exports = {};
+__export(menu_exports, {
+  MENU_CSS: () => MENU_CSS,
+  createMenu: () => createMenu
+});
+module.exports = __toCommonJS(menu_exports);
+function createMenu(host, options) {
+  const doc = host.ownerDocument;
+  const root = doc.createElement("div");
+  root.className = "fx-menu";
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-menu-button fx-dropdown-btn";
+  button.setAttribute("aria-haspopup", "true");
+  button.setAttribute("aria-expanded", "false");
+  if (options.hint) button.title = options.hint;
+  const caret = doc.createElement("div");
+  caret.className = "fx-dropdown-caret";
+  const panel = doc.createElement("div");
+  panel.className = "fx-menu-panel";
+  if (options.menuClass) {
+    panel.classList.add(...options.menuClass.split(/\s+/).filter((c) => c));
+  }
+  panel.hidden = true;
+  const boxes = /* @__PURE__ */ new Map();
+  for (const item of options.items) {
+    if (item.type === "action") {
+      const run = doc.createElement("button");
+      run.type = "button";
+      run.className = "fx-menu-action";
+      run.textContent = item.label;
+      if (item.hint) run.title = item.hint;
+      run.addEventListener("click", () => {
+        close();
+        item.onRun();
+      });
+      panel.append(run);
+      continue;
+    }
+    const box = doc.createElement("input");
+    box.type = "checkbox";
+    box.checked = item.on === true;
+    const row = doc.createElement("label");
+    if (item.hint) row.title = item.hint;
+    row.append(box, doc.createTextNode(item.label));
+    box.addEventListener("change", () => {
+      paint();
+      item.onChange(box.checked);
+    });
+    panel.append(row);
+    boxes.set(item.label, box);
+  }
+  root.append(button, panel);
+  host.append(root);
+  function paint() {
+    let on = 0;
+    for (const box of boxes.values()) if (box.checked) on++;
+    button.textContent = on ? `${options.label} · ${on}` : options.label;
+    button.appendChild(caret);
+    button.classList.toggle("on", on > 0);
+  }
+  function close() {
+    panel.hidden = true;
+    button.setAttribute("aria-expanded", "false");
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    panel.hidden = !panel.hidden;
+    button.setAttribute("aria-expanded", String(!panel.hidden));
+  });
+  panel.addEventListener("click", (event) => event.stopPropagation());
+  const away = () => close();
+  const key = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("click", away);
+  doc.addEventListener("keydown", key);
+  paint();
+  return {
+    set(label, on) {
+      const box = boxes.get(label);
+      if (!box) return;
+      box.checked = on;
+      paint();
+    },
+    destroy() {
+      doc.removeEventListener("click", away);
+      doc.removeEventListener("keydown", key);
+      root.remove();
+    }
+  };
+}
+var MENU_CSS = `
+/* The button itself is styled by DROPDOWN_FILTER_CSS, shared with the kind filter. */
+.fx-menu { position: relative; display: inline-flex; }
+.fx-menu-button { white-space: nowrap; position: relative; padding-inline-end: 1.1rem; }
+/* hidden is display:none from the user agent, which a class setting display outranks. */
+.fx-menu-panel[hidden] { display: none; }
+.fx-menu-panel {
+  position: absolute; top: calc(100% + 4px); z-index: 40;
+  display: grid; gap: 2px; padding: 6px 8px; min-width: 150px;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
+}
+.fx-menu-panel:not(.fx-panel-left){ right: 0; }
+.fx-menu-panel.fx-panel-left { left: 0; }
+.fx-menu-panel label {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-menu-panel label:hover { color: var(--fx-label, #e7e9ee); }
+.fx-menu-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-menu-action {
+  text-align: left; padding: 2px 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 11px; color: var(--fx-muted, #8a90a2);
+  /* A button does not inherit this, so an action read lowercase beside uppercase toggles. */
+  text-transform: inherit; letter-spacing: inherit;
+}
+.fx-menu-action:hover { color: var(--fx-accent, #5eead4); }
+`;

package/dist/menu.mjs

@@ -0,0 +1,120 @@
+// src/menu.ts
+function createMenu(host, options) {
+  const doc = host.ownerDocument;
+  const root = doc.createElement("div");
+  root.className = "fx-menu";
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-menu-button fx-dropdown-btn";
+  button.setAttribute("aria-haspopup", "true");
+  button.setAttribute("aria-expanded", "false");
+  if (options.hint) button.title = options.hint;
+  const caret = doc.createElement("div");
+  caret.className = "fx-dropdown-caret";
+  const panel = doc.createElement("div");
+  panel.className = "fx-menu-panel";
+  if (options.menuClass) {
+    panel.classList.add(...options.menuClass.split(/\s+/).filter((c) => c));
+  }
+  panel.hidden = true;
+  const boxes = /* @__PURE__ */ new Map();
+  for (const item of options.items) {
+    if (item.type === "action") {
+      const run = doc.createElement("button");
+      run.type = "button";
+      run.className = "fx-menu-action";
+      run.textContent = item.label;
+      if (item.hint) run.title = item.hint;
+      run.addEventListener("click", () => {
+        close();
+        item.onRun();
+      });
+      panel.append(run);
+      continue;
+    }
+    const box = doc.createElement("input");
+    box.type = "checkbox";
+    box.checked = item.on === true;
+    const row = doc.createElement("label");
+    if (item.hint) row.title = item.hint;
+    row.append(box, doc.createTextNode(item.label));
+    box.addEventListener("change", () => {
+      paint();
+      item.onChange(box.checked);
+    });
+    panel.append(row);
+    boxes.set(item.label, box);
+  }
+  root.append(button, panel);
+  host.append(root);
+  function paint() {
+    let on = 0;
+    for (const box of boxes.values()) if (box.checked) on++;
+    button.textContent = on ? `${options.label} · ${on}` : options.label;
+    button.appendChild(caret);
+    button.classList.toggle("on", on > 0);
+  }
+  function close() {
+    panel.hidden = true;
+    button.setAttribute("aria-expanded", "false");
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    panel.hidden = !panel.hidden;
+    button.setAttribute("aria-expanded", String(!panel.hidden));
+  });
+  panel.addEventListener("click", (event) => event.stopPropagation());
+  const away = () => close();
+  const key = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("click", away);
+  doc.addEventListener("keydown", key);
+  paint();
+  return {
+    set(label, on) {
+      const box = boxes.get(label);
+      if (!box) return;
+      box.checked = on;
+      paint();
+    },
+    destroy() {
+      doc.removeEventListener("click", away);
+      doc.removeEventListener("keydown", key);
+      root.remove();
+    }
+  };
+}
+var MENU_CSS = `
+/* The button itself is styled by DROPDOWN_FILTER_CSS, shared with the kind filter. */
+.fx-menu { position: relative; display: inline-flex; }
+.fx-menu-button { white-space: nowrap; position: relative; padding-inline-end: 1.1rem; }
+/* hidden is display:none from the user agent, which a class setting display outranks. */
+.fx-menu-panel[hidden] { display: none; }
+.fx-menu-panel {
+  position: absolute; top: calc(100% + 4px); z-index: 40;
+  display: grid; gap: 2px; padding: 6px 8px; min-width: 150px;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
+}
+.fx-menu-panel:not(.fx-panel-left){ right: 0; }
+.fx-menu-panel.fx-panel-left { left: 0; }
+.fx-menu-panel label {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-menu-panel label:hover { color: var(--fx-label, #e7e9ee); }
+.fx-menu-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-menu-action {
+  text-align: left; padding: 2px 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 11px; color: var(--fx-muted, #8a90a2);
+  /* A button does not inherit this, so an action read lowercase beside uppercase toggles. */
+  text-transform: inherit; letter-spacing: inherit;
+}
+.fx-menu-action:hover { color: var(--fx-accent, #5eead4); }
+`;
+export {
+  MENU_CSS,
+  createMenu
+};