@icen.ai/ui 0.1.1 → 0.2.0

package/README.md

@@ -30,6 +30,17 @@ initCopy();    // .copy-btn[data-copy] 委托
 toast.ok('已保存');
 ```
 
+## 文档站（已上线 <https://ui.icen.ai>）
+
+`site/` 是公开文档站（首页 / 色彩预设色板 / 组件演示，导航栏实时换肤换明暗）。部署：
+
+```bash
+cd site && bun install && bun run build
+bunx wrangler pages deploy dist --project-name=icen-ui   # 需 CLOUDFLARE_ACCOUNT_ID
+```
+
+Pages 项目 `icen-ui`（aidoll 账号），自定义域 `ui.icen.ai` → CNAME `icen-ui.pages.dev`。**已接 Git 自动部署**：push 到 `main` 即由 Cloudflare 构建（根目录 `site`，命令 `bun install && bun run build`，输出 `dist`），无需 wrangler 手动部署、无需任何 token/secret。
+
 ## 构建
 
 ```bash

package/dist/base.css

@@ -53,3 +53,75 @@ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--token-te
 .mono { font-family: var(--font-mono); }
 .dim { color: var(--token-text-muted); }
 .faint { color: var(--token-text-faint); }
+
+/* ── z-index 标尺（全组件统一引用，浮层一律 portal 到 body） ── */
+:root {
+  --z-base: 0;
+  --z-raised: 10;
+  --z-toast: 100;
+  --z-chrome: 200;
+  --z-dialog: 500;
+  --z-popover: 620;
+  --z-tooltip: 700;
+}
+
+/* ── 交互基元（全组件地基，规格源自 opengal interaction-classes） ── */
+
+/* 可按压：hover 顶部高光 + active 下陷缩放 */
+.pressable {
+  position: relative; overflow: hidden; will-change: transform;
+  transition: background-color var(--duration-normal) var(--ease-out),
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out),
+    color var(--duration-normal) var(--ease-out),
+    opacity var(--duration-normal) var(--ease-out),
+    transform var(--duration-normal) var(--ease-out);
+}
+.pressable::after {
+  content: ''; position: absolute; inset: 0; border-radius: inherit;
+  opacity: 0; pointer-events: none;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--token-surface) 24%, transparent), transparent 46%);
+  transition: opacity var(--duration-normal) var(--ease-out);
+}
+.pressable:hover::after, .pressable:focus-visible::after { opacity: 1; }
+.pressable:active { transform: translateY(1px) scale(0.985); }
+.pressable:disabled, .pressable[aria-disabled='true'], .pressable[data-disabled] {
+  transform: none;
+}
+.pressable:disabled::after, .pressable[aria-disabled='true']::after, .pressable[data-disabled]::after { display: none; }
+
+/* 控件聚焦光晕（wrapper 式表单控件用 :focus-within） */
+.control {
+  transition: background-color var(--duration-normal) var(--ease-out),
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out);
+}
+.control:focus-within {
+  box-shadow: var(--token-shadow-inset), 0 0 0 3px color-mix(in srgb, var(--token-accent) 12%, transparent);
+}
+
+/* 悬停浮起（可交互卡片） */
+.lift {
+  transition: border-color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+}
+.lift:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--token-accent) 26%, var(--token-outline-soft));
+  box-shadow: var(--token-shadow-card);
+}
+
+/* 聚焦环（ring-2 + offset-1 等价） */
+.focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--token-bg), 0 0 0 3px color-mix(in srgb, var(--token-accent) 60%, transparent);
+}
+
+/* 动效开关（reduced-motion 时全部关闭） */
+@media (prefers-reduced-motion: no-preference) {
+  .motion { transition: all var(--duration-normal) var(--ease-out); }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}

package/dist/behaviors/accordion.mjs

@@ -0,0 +1,34 @@
+// src/behaviors/accordion.ts
+function setup(container) {
+  const el = container;
+  if (el.__icenAccordionInit) return;
+  el.__icenAccordionInit = true;
+  const single = container.hasAttribute("data-single");
+  container.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const trigger = target.closest(".accordion-trigger");
+    if (!trigger) return;
+    const item = trigger.closest(".accordion-item");
+    if (!item || trigger.closest(".accordion") !== container) return;
+    const open = item.classList.toggle("is-open");
+    trigger.setAttribute("aria-expanded", String(open));
+    if (single && open) {
+      container.querySelectorAll(".accordion-item.is-open").forEach((other) => {
+        if (other === item) return;
+        other.classList.remove("is-open");
+        other.querySelector(".accordion-trigger")?.setAttribute("aria-expanded", "false");
+      });
+    }
+  });
+}
+function initAccordion(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches(".accordion")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".accordion")));
+  for (const c of containers) setup(c);
+}
+export {
+  initAccordion
+};

package/dist/behaviors/carousel.mjs

@@ -0,0 +1,50 @@
+// src/behaviors/carousel.ts
+function setup(carousel) {
+  const el = carousel;
+  if (el.__icenCarouselInit) return;
+  el.__icenCarouselInit = true;
+  const track = carousel.querySelector(":scope > .carousel-track");
+  if (!track) return;
+  const slides = Array.from(track.querySelectorAll(":scope > .carousel-slide"));
+  const count = slides.length;
+  if (count === 0) return;
+  const prev = carousel.querySelector(".carousel-arrow--prev");
+  const next = carousel.querySelector(".carousel-arrow--next");
+  const dotsBox = carousel.querySelector(".carousel-dots");
+  let index = 0;
+  const dots = [];
+  if (dotsBox && count > 1) {
+    for (let i = 0; i < count; i++) {
+      const dot = document.createElement("button");
+      dot.type = "button";
+      dot.className = "carousel-dot";
+      dot.setAttribute("aria-label", `\u7B2C ${i + 1} \u5F20`);
+      dot.addEventListener("click", () => go(i));
+      dotsBox.appendChild(dot);
+      dots.push(dot);
+    }
+  }
+  function render() {
+    if (!track) return;
+    track.style.transform = `translateX(${-index * 100}%)`;
+    slides.forEach((s, i) => s.setAttribute("aria-hidden", String(i !== index)));
+    dots.forEach((d, i) => d.classList.toggle("active", i === index));
+  }
+  function go(i) {
+    index = (i % count + count) % count;
+    render();
+  }
+  prev?.addEventListener("click", () => go(index - 1));
+  next?.addEventListener("click", () => go(index + 1));
+  render();
+}
+function initCarousel(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches(".carousel")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".carousel")));
+  for (const c of containers) setup(c);
+}
+export {
+  initCarousel
+};

package/dist/behaviors/charts.mjs

@@ -0,0 +1,267 @@
+// src/behaviors/charts.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function toneVar(tone = "accent") {
+  switch (tone) {
+    case "success":
+      return "var(--token-success)";
+    case "warning":
+      return "var(--token-warning)";
+    case "error":
+      return "var(--token-error)";
+    case "muted":
+      return "var(--token-text-faint)";
+    case "accent":
+    default:
+      return "var(--token-accent)";
+  }
+}
+function fmt(opts, value) {
+  return opts.formatValue ? opts.formatValue(value) : String(value);
+}
+function svgEl(tag, attrs) {
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  return el;
+}
+function renderEmpty(el, label) {
+  const box = document.createElement("div");
+  box.className = "chart-empty";
+  box.textContent = label ?? "\u6682\u65E0\u6570\u636E";
+  el.appendChild(box);
+}
+function legendItem(label, valueText, tone) {
+  const row = document.createElement("div");
+  row.className = "chart-legend-item";
+  const dot = document.createElement("span");
+  dot.className = "chart-legend-dot";
+  if (tone) dot.style.setProperty("--chart-tone", toneVar(tone));
+  const name = document.createElement("span");
+  name.className = "chart-legend-label";
+  name.textContent = label;
+  const val = document.createElement("span");
+  val.className = "chart-legend-value";
+  val.textContent = valueText;
+  row.append(dot, name, val);
+  return row;
+}
+function labelsRow(labels) {
+  const row = document.createElement("div");
+  row.className = "chart-labels";
+  for (const label of labels) {
+    const span = document.createElement("span");
+    span.textContent = label;
+    row.appendChild(span);
+  }
+  return row;
+}
+function renderVBar(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const max = Math.max(...values, 1);
+  const wrap = document.createElement("div");
+  wrap.className = "chart-vbar";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  values.forEach((value, i) => {
+    const track = document.createElement("div");
+    track.className = "chart-vbar-track";
+    const bar = document.createElement("div");
+    bar.className = "chart-vbar-bar";
+    bar.style.height = `${Math.max(6, value / max * 100)}%`;
+    bar.setAttribute("title", `${labels[i]}: ${fmt(opts, value)}`);
+    track.appendChild(bar);
+    wrap.appendChild(track);
+  });
+  el.append(wrap, labelsRow(labels));
+}
+function renderHBar(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const max = Math.max(...values, 1);
+  const wrap = document.createElement("div");
+  wrap.className = "chart-hbar";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  values.forEach((value, i) => {
+    const row = document.createElement("div");
+    row.className = "chart-hbar-row";
+    const label = document.createElement("span");
+    label.className = "chart-hbar-label";
+    label.textContent = labels[i] ?? "";
+    const track = document.createElement("div");
+    track.className = "chart-hbar-track";
+    const bar = document.createElement("div");
+    bar.className = "chart-hbar-bar";
+    bar.style.width = `${Math.max(2, value / max * 100)}%`;
+    const val = document.createElement("span");
+    val.className = "chart-hbar-value";
+    val.textContent = fmt(opts, value);
+    track.appendChild(bar);
+    row.append(label, track, val);
+    wrap.appendChild(row);
+  });
+  el.appendChild(wrap);
+}
+function renderStack(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
+  if (opts.segments.length === 0 || total <= 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const bar = document.createElement("div");
+  bar.className = "chart-stack";
+  for (const seg of opts.segments) {
+    const s = document.createElement("div");
+    s.className = "chart-stack-seg";
+    s.style.width = `${seg.value / total * 100}%`;
+    if (seg.tone) s.style.setProperty("--chart-tone", toneVar(seg.tone));
+    s.setAttribute("title", `${seg.label}: ${fmt(opts, seg.value)}`);
+    bar.appendChild(s);
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-legend";
+  for (const seg of opts.segments) {
+    legend.appendChild(legendItem(seg.label, fmt(opts, seg.value), seg.tone));
+  }
+  el.append(bar, legend);
+}
+function renderDonut(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
+  if (opts.segments.length === 0 || total <= 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const radius = 42;
+  const circumference = 2 * Math.PI * radius;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-donut";
+  const svg = svgEl("svg", { viewBox: "0 0 120 120", role: "img" });
+  svg.style.transform = "rotate(-90deg)";
+  svg.appendChild(svgEl("circle", {
+    cx: "60",
+    cy: "60",
+    r: String(radius),
+    fill: "none",
+    stroke: "var(--token-line-soft)",
+    "stroke-width": "14"
+  }));
+  let offset = 0;
+  for (const seg of opts.segments) {
+    const dash = seg.value / total * circumference;
+    svg.appendChild(svgEl("circle", {
+      cx: "60",
+      cy: "60",
+      r: String(radius),
+      fill: "none",
+      stroke: toneVar(seg.tone),
+      "stroke-width": "14",
+      "stroke-dasharray": `${dash} ${circumference - dash}`,
+      "stroke-dashoffset": String(-offset),
+      "stroke-linecap": "butt"
+    }));
+    offset += dash;
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-legend";
+  for (const seg of opts.segments) {
+    legend.appendChild(legendItem(seg.label, `${Math.round(seg.value / total * 100)}%`, seg.tone));
+  }
+  wrap.append(svg, legend);
+  el.appendChild(wrap);
+}
+var lineGradientSeq = 0;
+function renderLine(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const width = 360;
+  const height = 150;
+  const pad = 14;
+  const max = Math.max(...values, 1);
+  const tone = toneVar(opts.tone);
+  const points = values.map((value, i) => ({
+    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
+    y: height - pad - value / max * (height - pad * 2),
+    value,
+    label: labels[i] ?? ""
+  }));
+  const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+  const last = points[points.length - 1];
+  const first = points[0];
+  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+  const gradientId = `icen-chart-line-${++lineGradientSeq}`;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-line";
+  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+  const defs = svgEl("defs", {});
+  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.32" }));
+  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  for (let i = 0; i < 4; i++) {
+    const y = pad + i * (height - pad * 2) / 3;
+    svg.appendChild(svgEl("line", {
+      x1: String(pad),
+      x2: String(width - pad),
+      y1: String(y),
+      y2: String(y),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+  }
+  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+  svg.appendChild(svgEl("path", {
+    d: line,
+    fill: "none",
+    stroke: tone,
+    "stroke-width": "2.5",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }));
+  for (const p of points) {
+    const dot = svgEl("circle", {
+      cx: p.x.toFixed(1),
+      cy: p.y.toFixed(1),
+      r: "3",
+      fill: "var(--token-card)",
+      stroke: tone,
+      "stroke-width": "2"
+    });
+    const title = svgEl("title", {});
+    title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
+    dot.appendChild(title);
+    svg.appendChild(dot);
+  }
+  wrap.append(svg, labelsRow(labels.slice(-7)));
+  el.appendChild(wrap);
+}
+export {
+  renderDonut,
+  renderHBar,
+  renderLine,
+  renderStack,
+  renderVBar
+};

package/dist/behaviors/context-menu.mjs

@@ -0,0 +1,223 @@
+// src/behaviors/context-menu.ts
+var LONG_PRESS_DELAY = 520;
+var LONG_PRESS_MOVE_LIMIT = 12;
+var FLIP_MARGIN = 10;
+var CLAMP_MARGIN = 8;
+var registry = /* @__PURE__ */ new Map();
+var fallbackItems = null;
+var initialized = false;
+var panel = null;
+var focusableItems = [];
+var focusedIndex = -1;
+var longPress = null;
+function registerContextMenu(id, items) {
+  registry.set(id, items);
+}
+function defaultItems() {
+  return [
+    {
+      label: "\u540E\u9000",
+      shortcut: "Alt \u2190",
+      disabled: window.history.length <= 1,
+      onClick: () => window.history.back()
+    },
+    { label: "\u524D\u8FDB", shortcut: "Alt \u2192", onClick: () => window.history.forward() },
+    { type: "separator" },
+    { label: "\u5237\u65B0", shortcut: "Ctrl R", onClick: () => window.location.reload() },
+    {
+      label: "\u590D\u5236\u9875\u9762\u94FE\u63A5",
+      onClick: () => {
+        void navigator.clipboard?.writeText(window.location.href);
+      }
+    }
+  ];
+}
+function resolveItems(target) {
+  const host = target?.closest("[data-context-menu]");
+  const id = host?.dataset.contextMenu;
+  if (id) {
+    const items = registry.get(id);
+    if (items) return items;
+  }
+  return fallbackItems ?? defaultItems();
+}
+function isEditable(target) {
+  return Boolean(target?.closest('input, textarea, [contenteditable="true"]'));
+}
+function buildItem(item) {
+  if ("type" in item && item.type === "separator") {
+    const sep = document.createElement("div");
+    sep.className = "menu-separator";
+    sep.setAttribute("role", "separator");
+    return sep;
+  }
+  if ("type" in item && item.type === "header") {
+    const header = document.createElement("div");
+    header.className = "menu-header";
+    const label2 = document.createElement("span");
+    label2.className = "menu-header-label";
+    label2.textContent = item.label;
+    header.appendChild(label2);
+    if (item.description) {
+      const desc = document.createElement("span");
+      desc.className = "menu-header-desc";
+      desc.textContent = item.description;
+      header.appendChild(desc);
+    }
+    return header;
+  }
+  const entry = item;
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = entry.danger ? "menu-item pressable menu-item--danger" : "menu-item pressable";
+  if (entry.disabled) btn.disabled = true;
+  btn.setAttribute("role", "menuitem");
+  btn.tabIndex = -1;
+  const icon = document.createElement("span");
+  icon.className = "menu-item-icon";
+  if (entry.icon) icon.innerHTML = entry.icon;
+  btn.appendChild(icon);
+  const label = document.createElement("span");
+  label.className = "menu-item-label";
+  label.textContent = entry.label;
+  if (entry.subLabel) {
+    const sub = document.createElement("span");
+    sub.className = "menu-item-sub";
+    sub.textContent = entry.subLabel;
+    label.appendChild(sub);
+  }
+  btn.appendChild(label);
+  if (entry.shortcut) {
+    const shortcut = document.createElement("span");
+    shortcut.className = "menu-item-shortcut";
+    shortcut.textContent = entry.shortcut;
+    btn.appendChild(shortcut);
+  }
+  btn.addEventListener("click", () => {
+    entry.onClick?.();
+    closeMenu();
+  });
+  return btn;
+}
+function openContextMenu(x, y, items) {
+  if (typeof document === "undefined") return;
+  closeMenu();
+  panel = document.createElement("div");
+  panel.className = "menu menu--context";
+  panel.setAttribute("role", "menu");
+  panel.style.visibility = "hidden";
+  for (const item of items) panel.appendChild(buildItem(item));
+  document.body.appendChild(panel);
+  const rect = panel.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let nx = x;
+  let ny = y;
+  if (x + rect.width > vw - FLIP_MARGIN) nx = x - rect.width;
+  if (y + rect.height > vh - FLIP_MARGIN) ny = y - rect.height;
+  if (nx < CLAMP_MARGIN) nx = CLAMP_MARGIN;
+  if (ny < CLAMP_MARGIN) ny = CLAMP_MARGIN;
+  panel.style.left = `${nx}px`;
+  panel.style.top = `${ny}px`;
+  panel.style.visibility = "";
+  focusableItems = Array.from(panel.querySelectorAll(".menu-item:not(:disabled)"));
+  focusedIndex = -1;
+  requestAnimationFrame(() => {
+    if (!panel || focusableItems.length === 0) return;
+    setFocused(0);
+  });
+  document.addEventListener("pointerdown", onOutsidePointerDown, true);
+  document.addEventListener("scroll", onCloseSignal, true);
+  window.addEventListener("resize", onCloseSignal);
+  window.addEventListener("keydown", onKeyDown);
+}
+function closeMenu() {
+  if (!panel) return;
+  panel.remove();
+  panel = null;
+  focusableItems = [];
+  focusedIndex = -1;
+  document.removeEventListener("pointerdown", onOutsidePointerDown, true);
+  document.removeEventListener("scroll", onCloseSignal, true);
+  window.removeEventListener("resize", onCloseSignal);
+  window.removeEventListener("keydown", onKeyDown);
+}
+function setFocused(next) {
+  if (!panel || focusableItems.length === 0) return;
+  focusedIndex = (next % focusableItems.length + focusableItems.length) % focusableItems.length;
+  focusableItems[focusedIndex].focus();
+}
+function onOutsidePointerDown(e) {
+  if (!panel) return;
+  const target = e.target;
+  if (!(target instanceof Node) || !panel.contains(target)) closeMenu();
+}
+function onCloseSignal() {
+  closeMenu();
+}
+function onKeyDown(e) {
+  if (!panel) return;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    closeMenu();
+    return;
+  }
+  if (focusableItems.length === 0) return;
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    setFocused(focusedIndex + 1);
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    setFocused(focusedIndex - 1);
+  } else if (e.key === "Enter" && focusedIndex >= 0) {
+    e.preventDefault();
+    focusableItems[focusedIndex].click();
+  }
+}
+function clearLongPress() {
+  if (!longPress) return;
+  window.clearTimeout(longPress.timer);
+  longPress = null;
+}
+function openForTarget(target, x, y) {
+  openContextMenu(x, y, resolveItems(target));
+}
+function initContextMenu(opts = {}) {
+  if (typeof document === "undefined") return;
+  if (opts.items) fallbackItems = opts.items;
+  if (initialized) return;
+  initialized = true;
+  document.addEventListener("contextmenu", (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (isEditable(target)) return;
+    e.preventDefault();
+    openForTarget(target, e.clientX, e.clientY);
+  });
+  document.addEventListener("pointerdown", (e) => {
+    if (e.pointerType !== "touch") return;
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target || isEditable(target)) return;
+    clearLongPress();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const timer = window.setTimeout(() => {
+      longPress = null;
+      openForTarget(target, startX, startY);
+    }, LONG_PRESS_DELAY);
+    longPress = { timer, x: startX, y: startY, target };
+  });
+  document.addEventListener("pointermove", (e) => {
+    if (!longPress) return;
+    if (Math.hypot(e.clientX - longPress.x, e.clientY - longPress.y) > LONG_PRESS_MOVE_LIMIT) {
+      clearLongPress();
+    }
+  });
+  document.addEventListener("pointerup", clearLongPress);
+  document.addEventListener("pointercancel", clearLongPress);
+}
+export {
+  closeMenu,
+  initContextMenu,
+  openContextMenu,
+  registerContextMenu
+};