@component-anatomy/core 0.0.1

package/dist/index.js

@@ -0,0 +1,463 @@
+// src/registry.ts
+var AnatomyRegistry = class {
+  constructor(root) {
+    this.observer = null;
+    this.root = root;
+  }
+  /**
+   * Returns a Map of partId → matching HTMLElements.
+   * Always queries the live DOM — never returns a stale cache.
+   */
+  query() {
+    const map = /* @__PURE__ */ new Map();
+    const nodes = this.root.querySelectorAll("[data-part]");
+    nodes.forEach((el) => {
+      const id = el.dataset.part;
+      if (!id) return;
+      const existing = map.get(id) ?? [];
+      existing.push(el);
+      map.set(id, existing);
+    });
+    return map;
+  }
+  /**
+   * Returns all unique part IDs present in the DOM, in document order.
+   */
+  partIds() {
+    const seen = /* @__PURE__ */ new Set();
+    const result = [];
+    this.root.querySelectorAll("[data-part]").forEach((el) => {
+      const id = el.dataset.part;
+      if (id && !seen.has(id)) {
+        seen.add(id);
+        result.push(id);
+      }
+    });
+    return result;
+  }
+  /**
+   * Watches the root for DOM mutations and calls the callback when [data-part]
+   * elements are added or removed. Returns a cleanup function.
+   */
+  observe(callback) {
+    this.observer = new MutationObserver((mutations) => {
+      const relevant = mutations.some(
+        (m) => Array.from(m.addedNodes).concat(Array.from(m.removedNodes)).some(
+          (n) => n instanceof HTMLElement && (n.hasAttribute("data-part") || n.querySelector("[data-part]") !== null)
+        )
+      );
+      if (relevant) callback();
+    });
+    this.observer.observe(this.root, { childList: true, subtree: true });
+    return () => {
+      this.observer?.disconnect();
+      this.observer = null;
+    };
+  }
+  destroy() {
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+};
+
+// src/overlay.ts
+var OVERLAY_CLASS = "ca-overlay";
+var LABEL_CLASS = "ca-overlay-label";
+var STYLE_ID = "ca-overlay-styles";
+function injectStyles() {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    .${OVERLAY_CLASS} {
+      position: fixed;
+      pointer-events: none;
+      box-sizing: border-box;
+      border-radius: var(--ca-overlay-radius, 4px);
+      background: var(--ca-overlay-bg, rgba(99, 102, 241, 0.18));
+      outline: var(--ca-overlay-border-width, 2px)
+               var(--ca-overlay-border-style, solid)
+               var(--ca-overlay-border, rgba(99, 102, 241, 0.75));
+      outline-offset: 1px;
+      z-index: var(--ca-overlay-z, 9998);
+      transition: opacity var(--ca-transition, 150ms) ease;
+    }
+    .${OVERLAY_CLASS}.ca-overlay--hidden {
+      opacity: 0;
+    }
+
+    /* Name label chip \u2014 floats above the overlay */
+    .${LABEL_CLASS} {
+      position: fixed;
+      pointer-events: none;
+      z-index: var(--ca-overlay-z, 9999);
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 7px 2px 5px;
+      border-radius: 4px;
+      background: var(--ca-label-bg, rgba(79, 70, 229, 1));
+      color: var(--ca-label-fg, #fff);
+      font-family: var(--ca-label-font, ui-monospace, 'Cascadia Code', 'Fira Mono', monospace);
+      font-size: var(--ca-label-font-size, 11px);
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      white-space: nowrap;
+      line-height: 1.6;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
+      transition: opacity var(--ca-transition, 150ms) ease;
+    }
+    .${LABEL_CLASS}.ca-overlay--hidden {
+      opacity: 0;
+    }
+    .${LABEL_CLASS}::before {
+      content: '';
+      display: inline-block;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--ca-label-fg, #fff) 60%, transparent);
+      flex-shrink: 0;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function applyVars(el, vars) {
+  for (const [prop, value] of Object.entries(vars)) {
+    el.style.setProperty(prop, value);
+  }
+}
+var AnatomyOverlay = class {
+  constructor(vars = {}, options = {}) {
+    this.overlays = [];
+    this.labels = [];
+    this.activeElements = [];
+    this.activePart = null;
+    this.rafId = null;
+    this.vars = vars;
+    this.options = options;
+    injectStyles();
+  }
+  /**
+   * Replace the per-instance theme variables. Re-applies to any overlays
+   * currently on screen.
+   */
+  setVars(vars) {
+    this.vars = vars;
+    if (this.overlays.length > 0 || this.labels.length > 0) {
+      [...this.overlays, ...this.labels].forEach((el) => {
+        el.removeAttribute("style");
+        applyVars(el, vars);
+      });
+      this._position();
+    }
+  }
+  /**
+   * Show highlight overlays + label chip over each of the given elements.
+   */
+  show(elements, part) {
+    this.hide();
+    this.activeElements = elements;
+    this.activePart = part;
+    const showLabel = this.options.label !== false;
+    elements.forEach((element, index) => {
+      const ctx = { part, element, index };
+      const div = document.createElement("div");
+      div.className = `${OVERLAY_CLASS} ca-overlay--hidden`;
+      if (this.options.className) div.className += ` ${this.options.className}`;
+      div.setAttribute("aria-hidden", "true");
+      applyVars(div, this.vars);
+      document.body.appendChild(div);
+      this.overlays.push(div);
+      if (this.options.decorateOverlay) {
+        this.options.decorateOverlay(div, ctx);
+      }
+      if (showLabel) {
+        const label = document.createElement("div");
+        label.className = `${LABEL_CLASS} ca-overlay--hidden`;
+        label.setAttribute("aria-hidden", "true");
+        applyVars(label, this.vars);
+        const custom = this.options.renderLabel?.(ctx);
+        if (typeof custom === "string") label.textContent = custom;
+        else if (custom instanceof Node) label.appendChild(custom);
+        else label.textContent = part.name;
+        document.body.appendChild(label);
+        this.labels.push(label);
+      }
+    });
+    requestAnimationFrame(() => {
+      this._position();
+      this.overlays.forEach((o) => o.classList.remove("ca-overlay--hidden"));
+      this.labels.forEach((l) => l.classList.remove("ca-overlay--hidden"));
+    });
+  }
+  /**
+   * Remove all overlays and labels from the DOM.
+   */
+  hide() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.overlays.forEach((o) => o.remove());
+    this.labels.forEach((l) => l.remove());
+    this.overlays = [];
+    this.labels = [];
+    this.activeElements = [];
+    this.activePart = null;
+  }
+  /**
+   * Recompute overlay positions. Call on scroll or resize.
+   */
+  reposition() {
+    if (this.overlays.length === 0) return;
+    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+    this.rafId = requestAnimationFrame(() => {
+      this._position();
+      this.rafId = null;
+    });
+  }
+  destroy() {
+    this.hide();
+  }
+  _position() {
+    const LABEL_OFFSET = 6;
+    const LABEL_HEIGHT = 22;
+    const pad = this.options.padding ?? 0;
+    this.activeElements.forEach((el, i) => {
+      const overlay = this.overlays[i];
+      const label = this.labels[i];
+      if (!overlay) return;
+      const rect = el.getBoundingClientRect();
+      const top = rect.top - pad;
+      const left = rect.left - pad;
+      const width = rect.width + pad * 2;
+      const height = rect.height + pad * 2;
+      overlay.style.top = `${top}px`;
+      overlay.style.left = `${left}px`;
+      overlay.style.width = `${width}px`;
+      overlay.style.height = `${height}px`;
+      if (!label) return;
+      const labelTop = top - LABEL_HEIGHT - LABEL_OFFSET;
+      const finalTop = labelTop < 4 ? top + height + LABEL_OFFSET : labelTop;
+      label.style.top = `${finalTop}px`;
+      label.style.left = `${left}px`;
+    });
+  }
+};
+
+// src/theme.ts
+var TOKEN_TO_VAR = {
+  overlayBg: "--ca-overlay-bg",
+  overlayBorder: "--ca-overlay-border",
+  overlayBorderWidth: "--ca-overlay-border-width",
+  overlayRadius: "--ca-overlay-radius",
+  labelBg: "--ca-label-bg",
+  labelFg: "--ca-label-fg",
+  labelFont: "--ca-label-font",
+  labelFontSize: "--ca-label-font-size",
+  zIndex: "--ca-overlay-z",
+  transitionMs: "--ca-transition"
+};
+var presets = {
+  /** The built-in indigo look. Empty on purpose: it lives in the stylesheet defaults. */
+  default: {},
+  /** Quiet: no fill, thin neutral border, subdued label. */
+  minimal: {
+    overlayBg: "transparent",
+    overlayBorder: "rgba(107, 114, 128, 0.9)",
+    overlayBorderWidth: "1px",
+    overlayRadius: "2px",
+    labelBg: "#374151",
+    labelFg: "#f9fafb"
+  },
+  /** High-visibility: strong yellow/black, thick border. WCAG-friendly. */
+  contrast: {
+    overlayBg: "rgba(250, 204, 21, 0.25)",
+    overlayBorder: "#000000",
+    overlayBorderWidth: "3px",
+    overlayRadius: "0px",
+    labelBg: "#000000",
+    labelFg: "#facc15"
+  },
+  /** Technical drawing look: blue dashed outline on a light wash. */
+  blueprint: {
+    overlayBg: "rgba(37, 99, 235, 0.08)",
+    overlayBorder: "#2563eb",
+    overlayBorderWidth: "1.5px",
+    overlayRadius: "0px",
+    overlayBorderStyle: "dashed",
+    labelBg: "#1d4ed8",
+    labelFg: "#ffffff"
+  }
+};
+function resolveThemeVars(preset, theme) {
+  const merged = {
+    ...preset ? presets[preset] : void 0,
+    ...theme
+  };
+  const vars = {};
+  if (merged.accent) {
+    vars["--ca-overlay-border"] = merged.accent;
+    vars["--ca-overlay-bg"] = `color-mix(in srgb, ${merged.accent} 15%, transparent)`;
+    vars["--ca-label-bg"] = merged.accent;
+  }
+  for (const [token, cssVar] of Object.entries(TOKEN_TO_VAR)) {
+    const value = merged[token];
+    if (value !== void 0) {
+      vars[cssVar] = typeof value === "number" ? token === "zIndex" ? String(value) : token === "transitionMs" ? `${value}ms` : `${value}px` : String(value);
+    }
+  }
+  if (merged.overlayBorderStyle) {
+    vars["--ca-overlay-border-style"] = merged.overlayBorderStyle;
+  }
+  return vars;
+}
+
+// src/controller.ts
+function idToName(id) {
+  return id.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function createController(options) {
+  const { root, panel } = options;
+  const registry = new AnatomyRegistry(root);
+  const overlay = new AnatomyOverlay(
+    resolveThemeVars(options.preset, options.theme),
+    options.overlay ?? {}
+  );
+  let parts = options.parts ?? registry.partIds().map((id) => ({ id, name: idToName(id) }));
+  function findPart(partId) {
+    return parts.find((p) => p.id === partId) ?? { id: partId, name: idToName(partId) };
+  }
+  const listeners = /* @__PURE__ */ new Map();
+  function emit(event, partId) {
+    listeners.get(event)?.forEach((fn) => fn(partId));
+  }
+  const cleanupFns = [];
+  function highlight(partId, source = "panel") {
+    const elements = registry.query().get(partId) ?? [];
+    overlay.show(elements, findPart(partId));
+    if (panel) {
+      panel.querySelectorAll("[data-anatomy-item]").forEach((el) => {
+        if (el.dataset.anatomyItem === partId) {
+          el.setAttribute("data-active", "");
+          if (source === "preview") {
+            el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          }
+        } else {
+          el.removeAttribute("data-active");
+        }
+      });
+    }
+    emit("part:enter", partId);
+  }
+  function unhighlight() {
+    overlay.hide();
+    if (panel) {
+      panel.querySelectorAll("[data-anatomy-item]").forEach((el) => {
+        el.removeAttribute("data-active");
+      });
+    }
+    emit("part:leave", "");
+  }
+  function attachElementListeners() {
+    const map = registry.query();
+    map.forEach((elements, partId) => {
+      elements.forEach((el) => {
+        const enter = () => highlight(partId, "preview");
+        const leave = () => unhighlight();
+        el.addEventListener("mouseenter", enter);
+        el.addEventListener("mouseleave", leave);
+        cleanupFns.push(() => {
+          el.removeEventListener("mouseenter", enter);
+          el.removeEventListener("mouseleave", leave);
+        });
+      });
+    });
+  }
+  function attachPanelListeners() {
+    if (!panel) return;
+    panel.querySelectorAll("[data-anatomy-item]").forEach((el) => {
+      const partId = el.dataset.anatomyItem ?? "";
+      const enter = () => highlight(partId, "panel");
+      const leave = () => unhighlight();
+      el.addEventListener("mouseenter", enter);
+      el.addEventListener("mouseleave", leave);
+      el.addEventListener("focus", enter);
+      el.addEventListener("blur", leave);
+      cleanupFns.push(() => {
+        el.removeEventListener("mouseenter", enter);
+        el.removeEventListener("mouseleave", leave);
+        el.removeEventListener("focus", enter);
+        el.removeEventListener("blur", leave);
+      });
+    });
+  }
+  const onScroll = () => overlay.reposition();
+  const onResize = () => overlay.reposition();
+  const resizeObserver = new ResizeObserver(() => overlay.reposition());
+  function setup() {
+    attachElementListeners();
+    attachPanelListeners();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    window.addEventListener("resize", onResize, { passive: true });
+    resizeObserver.observe(root);
+    const stopObserving = registry.observe(() => {
+      teardownListeners();
+      if (!options.parts) {
+        parts = registry.partIds().map((id) => ({ id, name: idToName(id) }));
+      }
+      attachElementListeners();
+      attachPanelListeners();
+    });
+    cleanupFns.push(stopObserving);
+  }
+  function teardownListeners() {
+    const observerCleanup = cleanupFns.pop();
+    cleanupFns.forEach((fn) => fn());
+    cleanupFns.length = 0;
+    if (observerCleanup) cleanupFns.push(observerCleanup);
+  }
+  setup();
+  return {
+    highlight,
+    unhighlight,
+    refresh() {
+      unhighlight();
+      teardownListeners();
+      if (!options.parts) {
+        parts = registry.partIds().map((id) => ({ id, name: idToName(id) }));
+      }
+      attachElementListeners();
+      attachPanelListeners();
+    },
+    destroy() {
+      unhighlight();
+      cleanupFns.forEach((fn) => fn());
+      cleanupFns.length = 0;
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      window.removeEventListener("resize", onResize);
+      resizeObserver.disconnect();
+      overlay.destroy();
+      registry.destroy();
+      listeners.clear();
+    },
+    on(event, handler) {
+      if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
+      listeners.get(event).add(handler);
+      return () => listeners.get(event)?.delete(handler);
+    },
+    getParts() {
+      return parts.slice();
+    },
+    setTheme(theme, preset) {
+      overlay.setVars(resolveThemeVars(preset, theme));
+    }
+  };
+}
+export {
+  createController as createAnatomy,
+  presets,
+  resolveThemeVars
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/registry.ts", "../src/overlay.ts", "../src/theme.ts", "../src/controller.ts"],
+  "sourcesContent": ["/**\n * AnatomyRegistry \u2014 discovers and tracks [data-part] elements within a root.\n * Intentionally stateless between calls: query() always reads the live DOM.\n */\nexport class AnatomyRegistry {\n  private root: HTMLElement;\n  private observer: MutationObserver | null = null;\n\n  constructor(root: HTMLElement) {\n    this.root = root;\n  }\n\n  /**\n   * Returns a Map of partId \u2192 matching HTMLElements.\n   * Always queries the live DOM \u2014 never returns a stale cache.\n   */\n  query(): Map<string, HTMLElement[]> {\n    const map = new Map<string, HTMLElement[]>();\n    const nodes = this.root.querySelectorAll<HTMLElement>('[data-part]');\n\n    nodes.forEach((el) => {\n      const id = el.dataset.part;\n      if (!id) return;\n      const existing = map.get(id) ?? [];\n      existing.push(el);\n      map.set(id, existing);\n    });\n\n    return map;\n  }\n\n  /**\n   * Returns all unique part IDs present in the DOM, in document order.\n   */\n  partIds(): string[] {\n    const seen = new Set<string>();\n    const result: string[] = [];\n    this.root.querySelectorAll<HTMLElement>('[data-part]').forEach((el) => {\n      const id = el.dataset.part;\n      if (id && !seen.has(id)) {\n        seen.add(id);\n        result.push(id);\n      }\n    });\n    return result;\n  }\n\n  /**\n   * Watches the root for DOM mutations and calls the callback when [data-part]\n   * elements are added or removed. Returns a cleanup function.\n   */\n  observe(callback: () => void): () => void {\n    this.observer = new MutationObserver((mutations) => {\n      const relevant = mutations.some((m) =>\n        Array.from(m.addedNodes).concat(Array.from(m.removedNodes)).some(\n          (n) =>\n            n instanceof HTMLElement &&\n            (n.hasAttribute('data-part') ||\n              n.querySelector('[data-part]') !== null)\n        )\n      );\n      if (relevant) callback();\n    });\n\n    this.observer.observe(this.root, { childList: true, subtree: true });\n\n    return () => {\n      this.observer?.disconnect();\n      this.observer = null;\n    };\n  }\n\n  destroy() {\n    this.observer?.disconnect();\n    this.observer = null;\n  }\n}\n", "import type {\n  AnatomyPartDefinition,\n  OverlayOptions,\n  OverlayRenderContext,\n} from './types.js';\n\n/**\n * AnatomyOverlay \u2014 renders position:fixed highlight boxes + name label chips\n * over target elements. Injected into document.body to escape ancestor\n * stacking contexts and CSS transforms.\n *\n * Theming: the injected stylesheet reads `--ca-*` custom properties with\n * built-in fallbacks (the \"default\" look). Per-instance themes are applied\n * as inline custom properties on each overlay/label element, so multiple\n * controllers with different themes can coexist on one page while global\n * `--ca-*` variables keep working as a page-wide default.\n */\n\nconst OVERLAY_CLASS = 'ca-overlay';\nconst LABEL_CLASS = 'ca-overlay-label';\nconst STYLE_ID = 'ca-overlay-styles';\n\nfunction injectStyles() {\n  if (document.getElementById(STYLE_ID)) return;\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    .${OVERLAY_CLASS} {\n      position: fixed;\n      pointer-events: none;\n      box-sizing: border-box;\n      border-radius: var(--ca-overlay-radius, 4px);\n      background: var(--ca-overlay-bg, rgba(99, 102, 241, 0.18));\n      outline: var(--ca-overlay-border-width, 2px)\n               var(--ca-overlay-border-style, solid)\n               var(--ca-overlay-border, rgba(99, 102, 241, 0.75));\n      outline-offset: 1px;\n      z-index: var(--ca-overlay-z, 9998);\n      transition: opacity var(--ca-transition, 150ms) ease;\n    }\n    .${OVERLAY_CLASS}.ca-overlay--hidden {\n      opacity: 0;\n    }\n\n    /* Name label chip \u2014 floats above the overlay */\n    .${LABEL_CLASS} {\n      position: fixed;\n      pointer-events: none;\n      z-index: var(--ca-overlay-z, 9999);\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 2px 7px 2px 5px;\n      border-radius: 4px;\n      background: var(--ca-label-bg, rgba(79, 70, 229, 1));\n      color: var(--ca-label-fg, #fff);\n      font-family: var(--ca-label-font, ui-monospace, 'Cascadia Code', 'Fira Mono', monospace);\n      font-size: var(--ca-label-font-size, 11px);\n      font-weight: 500;\n      letter-spacing: 0.02em;\n      white-space: nowrap;\n      line-height: 1.6;\n      box-shadow: 0 1px 4px rgba(0,0,0,0.25);\n      transition: opacity var(--ca-transition, 150ms) ease;\n    }\n    .${LABEL_CLASS}.ca-overlay--hidden {\n      opacity: 0;\n    }\n    .${LABEL_CLASS}::before {\n      content: '';\n      display: inline-block;\n      width: 5px;\n      height: 5px;\n      border-radius: 50%;\n      background: color-mix(in srgb, var(--ca-label-fg, #fff) 60%, transparent);\n      flex-shrink: 0;\n    }\n  `;\n  document.head.appendChild(style);\n}\n\nfunction applyVars(el: HTMLElement, vars: Record<string, string>) {\n  for (const [prop, value] of Object.entries(vars)) {\n    el.style.setProperty(prop, value);\n  }\n}\n\nexport class AnatomyOverlay {\n  private overlays: HTMLDivElement[] = [];\n  private labels: HTMLDivElement[] = [];\n  private activeElements: HTMLElement[] = [];\n  private activePart: AnatomyPartDefinition | null = null;\n  private rafId: number | null = null;\n\n  private vars: Record<string, string>;\n  private options: OverlayOptions;\n\n  constructor(vars: Record<string, string> = {}, options: OverlayOptions = {}) {\n    this.vars = vars;\n    this.options = options;\n    injectStyles();\n  }\n\n  /**\n   * Replace the per-instance theme variables. Re-applies to any overlays\n   * currently on screen.\n   */\n  setVars(vars: Record<string, string>): void {\n    this.vars = vars;\n    if (this.overlays.length > 0 || this.labels.length > 0) {\n      [...this.overlays, ...this.labels].forEach((el) => {\n        el.removeAttribute('style'); // clear stale vars (positioning restored below)\n        applyVars(el, vars);\n      });\n      this._position();\n    }\n  }\n\n  /**\n   * Show highlight overlays + label chip over each of the given elements.\n   */\n  show(elements: HTMLElement[], part: AnatomyPartDefinition): void {\n    this.hide();\n    this.activeElements = elements;\n    this.activePart = part;\n\n    const showLabel = this.options.label !== false;\n\n    elements.forEach((element, index) => {\n      const ctx: OverlayRenderContext = { part, element, index };\n\n      const div = document.createElement('div');\n      div.className = `${OVERLAY_CLASS} ca-overlay--hidden`;\n      if (this.options.className) div.className += ` ${this.options.className}`;\n      div.setAttribute('aria-hidden', 'true');\n      applyVars(div, this.vars);\n      document.body.appendChild(div);\n      this.overlays.push(div);\n\n      if (this.options.decorateOverlay) {\n        this.options.decorateOverlay(div, ctx);\n      }\n\n      if (showLabel) {\n        const label = document.createElement('div');\n        label.className = `${LABEL_CLASS} ca-overlay--hidden`;\n        label.setAttribute('aria-hidden', 'true');\n        applyVars(label, this.vars);\n\n        const custom = this.options.renderLabel?.(ctx);\n        if (typeof custom === 'string') label.textContent = custom;\n        else if (custom instanceof Node) label.appendChild(custom);\n        else label.textContent = part.name;\n\n        document.body.appendChild(label);\n        this.labels.push(label);\n      }\n    });\n\n    // Position after paint so getBoundingClientRect is accurate\n    requestAnimationFrame(() => {\n      this._position();\n      this.overlays.forEach((o) => o.classList.remove('ca-overlay--hidden'));\n      this.labels.forEach((l) => l.classList.remove('ca-overlay--hidden'));\n    });\n  }\n\n  /**\n   * Remove all overlays and labels from the DOM.\n   */\n  hide(): void {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n    this.overlays.forEach((o) => o.remove());\n    this.labels.forEach((l) => l.remove());\n    this.overlays = [];\n    this.labels = [];\n    this.activeElements = [];\n    this.activePart = null;\n  }\n\n  /**\n   * Recompute overlay positions. Call on scroll or resize.\n   */\n  reposition(): void {\n    if (this.overlays.length === 0) return;\n    if (this.rafId !== null) cancelAnimationFrame(this.rafId);\n    this.rafId = requestAnimationFrame(() => {\n      this._position();\n      this.rafId = null;\n    });\n  }\n\n  destroy(): void {\n    this.hide();\n  }\n\n  private _position(): void {\n    const LABEL_OFFSET = 6; // px gap between label and overlay top edge\n    const LABEL_HEIGHT = 22; // approximate label height\n    const pad = this.options.padding ?? 0;\n\n    this.activeElements.forEach((el, i) => {\n      const overlay = this.overlays[i];\n      const label = this.labels[i];\n      if (!overlay) return;\n\n      const rect = el.getBoundingClientRect();\n      const top = rect.top - pad;\n      const left = rect.left - pad;\n      const width = rect.width + pad * 2;\n      const height = rect.height + pad * 2;\n\n      // Position the highlight box\n      overlay.style.top = `${top}px`;\n      overlay.style.left = `${left}px`;\n      overlay.style.width = `${width}px`;\n      overlay.style.height = `${height}px`;\n\n      if (!label) return;\n\n      // Place label chip above the overlay; flip below if too close to top\n      const labelTop = top - LABEL_HEIGHT - LABEL_OFFSET;\n      const finalTop = labelTop < 4 ? top + height + LABEL_OFFSET : labelTop;\n      label.style.top = `${finalTop}px`;\n      label.style.left = `${left}px`;\n    });\n  }\n}\n", "import type { AnatomyTheme, AnatomyPresetName } from './types.js';\n\n/**\n * Theming \u2014 resolves { preset, theme } into a set of CSS custom properties\n * applied per controller instance.\n *\n * Resolution order (lowest \u2192 highest priority):\n *   1. Stylesheet defaults (the `var(--ca-*, fallback)` chain \u2014 the \"default\" look)\n *   2. Global CSS variables set by the user on :root or an ancestor\n *   3. A named preset passed to createAnatomy()\n *   4. Individual `theme` tokens passed to createAnatomy()\n *\n * The `accent` token is a shorthand: when provided, overlay border, overlay\n * background and label background are derived from it (via color-mix) unless\n * they are explicitly set too.\n */\n\n/** Maps theme token names \u2192 CSS custom property names used by the stylesheet. */\nexport const TOKEN_TO_VAR: Record<\n  keyof Omit<AnatomyTheme, 'accent' | 'overlayBorderStyle'>,\n  string\n> = {\n  overlayBg: '--ca-overlay-bg',\n  overlayBorder: '--ca-overlay-border',\n  overlayBorderWidth: '--ca-overlay-border-width',\n  overlayRadius: '--ca-overlay-radius',\n  labelBg: '--ca-label-bg',\n  labelFg: '--ca-label-fg',\n  labelFont: '--ca-label-font',\n  labelFontSize: '--ca-label-font-size',\n  zIndex: '--ca-overlay-z',\n  transitionMs: '--ca-transition',\n};\n\n/**\n * Built-in presets. Each is a plain AnatomyTheme \u2014 you can also import these,\n * spread them, and tweak individual tokens.\n */\nexport const presets: Record<AnatomyPresetName, AnatomyTheme> = {\n  /** The built-in indigo look. Empty on purpose: it lives in the stylesheet defaults. */\n  default: {},\n\n  /** Quiet: no fill, thin neutral border, subdued label. */\n  minimal: {\n    overlayBg: 'transparent',\n    overlayBorder: 'rgba(107, 114, 128, 0.9)',\n    overlayBorderWidth: '1px',\n    overlayRadius: '2px',\n    labelBg: '#374151',\n    labelFg: '#f9fafb',\n  },\n\n  /** High-visibility: strong yellow/black, thick border. WCAG-friendly. */\n  contrast: {\n    overlayBg: 'rgba(250, 204, 21, 0.25)',\n    overlayBorder: '#000000',\n    overlayBorderWidth: '3px',\n    overlayRadius: '0px',\n    labelBg: '#000000',\n    labelFg: '#facc15',\n  },\n\n  /** Technical drawing look: blue dashed outline on a light wash. */\n  blueprint: {\n    overlayBg: 'rgba(37, 99, 235, 0.08)',\n    overlayBorder: '#2563eb',\n    overlayBorderWidth: '1.5px',\n    overlayRadius: '0px',\n    overlayBorderStyle: 'dashed',\n    labelBg: '#1d4ed8',\n    labelFg: '#ffffff',\n  },\n};\n\n/**\n * Resolve a { preset, theme } pair into a flat CSS-variable map.\n * Only *customized* tokens are returned \u2014 an empty result means\n * \"use the stylesheet defaults\", which keeps global `--ca-*` variables\n * set by users fully functional (backward compatible).\n */\nexport function resolveThemeVars(\n  preset?: AnatomyPresetName,\n  theme?: AnatomyTheme\n): Record<string, string> {\n  const merged: AnatomyTheme = {\n    ...(preset ? presets[preset] : undefined),\n    ...theme,\n  };\n\n  const vars: Record<string, string> = {};\n\n  // Accent shorthand \u2014 derive dependent tokens unless explicitly overridden.\n  if (merged.accent) {\n    vars['--ca-overlay-border'] = merged.accent;\n    vars['--ca-overlay-bg'] = `color-mix(in srgb, ${merged.accent} 15%, transparent)`;\n    vars['--ca-label-bg'] = merged.accent;\n  }\n\n  for (const [token, cssVar] of Object.entries(TOKEN_TO_VAR)) {\n    const value = merged[token as keyof AnatomyTheme];\n    if (value !== undefined) {\n      vars[cssVar] =\n        typeof value === 'number'\n          ? token === 'zIndex'\n            ? String(value)\n            : token === 'transitionMs'\n              ? `${value}ms`\n              : `${value}px`\n          : String(value);\n    }\n  }\n\n  if (merged.overlayBorderStyle) {\n    vars['--ca-overlay-border-style'] = merged.overlayBorderStyle;\n  }\n\n  return vars;\n}\n", "import { AnatomyRegistry } from './registry.js';\nimport { AnatomyOverlay } from './overlay.js';\nimport { resolveThemeVars } from './theme.js';\nimport type {\n  AnatomyOptions,\n  AnatomyController,\n  AnatomyEvent,\n  AnatomyEventHandler,\n  AnatomyPartDefinition,\n} from './types.js';\n\n/** Capitalizes an ID like \"slider-thumb\" \u2192 \"Slider Thumb\" */\nfunction idToName(id: string): string {\n  return id\n    .replace(/[-_]/g, ' ')\n    .replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n\nexport function createController(options: AnatomyOptions): AnatomyController {\n  const { root, panel } = options;\n\n  const registry = new AnatomyRegistry(root);\n  const overlay = new AnatomyOverlay(\n    resolveThemeVars(options.preset, options.theme),\n    options.overlay ?? {}\n  );\n\n  // Resolve part definitions: explicit or auto-discovered\n  let parts: AnatomyPartDefinition[] = options.parts ??\n    registry.partIds().map((id) => ({ id, name: idToName(id) }));\n\n  function findPart(partId: string): AnatomyPartDefinition {\n    return parts.find((p) => p.id === partId) ?? { id: partId, name: idToName(partId) };\n  }\n\n  // Event emitter\n  const listeners = new Map<AnatomyEvent, Set<AnatomyEventHandler>>();\n\n  function emit(event: AnatomyEvent, partId: string) {\n    listeners.get(event)?.forEach((fn) => fn(partId));\n  }\n\n  // Cleanup registry\n  const cleanupFns: Array<() => void> = [];\n\n  function highlight(partId: string, source: 'preview' | 'panel' = 'panel') {\n    const elements = registry.query().get(partId) ?? [];\n    overlay.show(elements, findPart(partId));\n\n    // Mark matching panel items active + scroll into view when triggered from preview\n    if (panel) {\n      panel.querySelectorAll<HTMLElement>('[data-anatomy-item]').forEach((el) => {\n        if (el.dataset.anatomyItem === partId) {\n          el.setAttribute('data-active', '');\n          // Only auto-scroll when hover comes from the component, not the panel itself\n          if (source === 'preview') {\n            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n          }\n        } else {\n          el.removeAttribute('data-active');\n        }\n      });\n    }\n\n    emit('part:enter', partId);\n  }\n\n  function unhighlight() {\n    overlay.hide();\n\n    if (panel) {\n      panel.querySelectorAll<HTMLElement>('[data-anatomy-item]').forEach((el) => {\n        el.removeAttribute('data-active');\n      });\n    }\n\n    // emit part:leave with empty string as signal (last active unknown at this point)\n    emit('part:leave', '');\n  }\n\n  function attachElementListeners() {\n    const map = registry.query();\n\n    map.forEach((elements, partId) => {\n      elements.forEach((el) => {\n        // Mouse only \u2014 no focus/blur here.\n        // Preview elements are a live component; adding tabstops breaks\n        // their natural tab order and confuses assistive technology.\n        // Keyboard navigation is handled via the panel entries only.\n        const enter = () => highlight(partId, 'preview');\n        const leave = () => unhighlight();\n        el.addEventListener('mouseenter', enter);\n        el.addEventListener('mouseleave', leave);\n        cleanupFns.push(() => {\n          el.removeEventListener('mouseenter', enter);\n          el.removeEventListener('mouseleave', leave);\n        });\n      });\n    });\n  }\n\n  function attachPanelListeners() {\n    if (!panel) return;\n\n    panel.querySelectorAll<HTMLElement>('[data-anatomy-item]').forEach((el) => {\n      const partId = el.dataset.anatomyItem ?? '';\n      const enter = () => highlight(partId, 'panel');\n      const leave = () => unhighlight();\n      el.addEventListener('mouseenter', enter);\n      el.addEventListener('mouseleave', leave);\n      el.addEventListener('focus', enter);\n      el.addEventListener('blur', leave);\n      cleanupFns.push(() => {\n        el.removeEventListener('mouseenter', enter);\n        el.removeEventListener('mouseleave', leave);\n        el.removeEventListener('focus', enter);\n        el.removeEventListener('blur', leave);\n      });\n    });\n  }\n\n  // Scroll + resize \u2192 reposition active overlays\n  const onScroll = () => overlay.reposition();\n  const onResize = () => overlay.reposition();\n\n  const resizeObserver = new ResizeObserver(() => overlay.reposition());\n\n  function setup() {\n    attachElementListeners();\n    attachPanelListeners();\n\n    window.addEventListener('scroll', onScroll, { passive: true, capture: true });\n    window.addEventListener('resize', onResize, { passive: true });\n    resizeObserver.observe(root);\n\n    // Watch for dynamic DOM changes\n    const stopObserving = registry.observe(() => {\n      teardownListeners();\n      // Re-resolve auto-discovered parts if none were explicitly provided\n      if (!options.parts) {\n        parts = registry.partIds().map((id) => ({ id, name: idToName(id) }));\n      }\n      attachElementListeners();\n      attachPanelListeners();\n    });\n    cleanupFns.push(stopObserving);\n  }\n\n  function teardownListeners() {\n    // Run all registered cleanup functions except the MutationObserver (last one)\n    // We rebuild element/panel listeners on refresh but keep the observer running\n    const observerCleanup = cleanupFns.pop(); // MutationObserver cleanup is last\n    cleanupFns.forEach((fn) => fn());\n    cleanupFns.length = 0;\n    if (observerCleanup) cleanupFns.push(observerCleanup); // put it back\n  }\n\n  setup();\n\n  return {\n    highlight,\n    unhighlight,\n\n    refresh() {\n      unhighlight();\n      teardownListeners();\n      if (!options.parts) {\n        parts = registry.partIds().map((id) => ({ id, name: idToName(id) }));\n      }\n      attachElementListeners();\n      attachPanelListeners();\n    },\n\n    destroy() {\n      unhighlight();\n      cleanupFns.forEach((fn) => fn());\n      cleanupFns.length = 0;\n      window.removeEventListener('scroll', onScroll, { capture: true });\n      window.removeEventListener('resize', onResize);\n      resizeObserver.disconnect();\n      overlay.destroy();\n      registry.destroy();\n      listeners.clear();\n    },\n\n    on(event, handler) {\n      if (!listeners.has(event)) listeners.set(event, new Set());\n      listeners.get(event)!.add(handler);\n      return () => listeners.get(event)?.delete(handler);\n    },\n\n    getParts() {\n      return parts.slice();\n    },\n\n    setTheme(theme, preset) {\n      overlay.setVars(resolveThemeVars(preset, theme));\n    },\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/overlay.d.ts

@@ -0,0 +1,31 @@
+import type { AnatomyPartDefinition, OverlayOptions } from './types.js';
+export declare class AnatomyOverlay {
+    private overlays;
+    private labels;
+    private activeElements;
+    private activePart;
+    private rafId;
+    private vars;
+    private options;
+    constructor(vars?: Record<string, string>, options?: OverlayOptions);
+    /**
+     * Replace the per-instance theme variables. Re-applies to any overlays
+     * currently on screen.
+     */
+    setVars(vars: Record<string, string>): void;
+    /**
+     * Show highlight overlays + label chip over each of the given elements.
+     */
+    show(elements: HTMLElement[], part: AnatomyPartDefinition): void;
+    /**
+     * Remove all overlays and labels from the DOM.
+     */
+    hide(): void;
+    /**
+     * Recompute overlay positions. Call on scroll or resize.
+     */
+    reposition(): void;
+    destroy(): void;
+    private _position;
+}
+//# sourceMappingURL=overlay.d.ts.map

package/dist/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,cAAc,EAEf,MAAM,YAAY,CAAC;AAmFpB,qBAAa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,UAAU,CAAsC;IACxD,OAAO,CAAC,KAAK,CAAuB;IAEpC,OAAO,CAAC,IAAI,CAAyB;IACrC,OAAO,CAAC,OAAO,CAAiB;gBAEpB,IAAI,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EAAE,OAAO,GAAE,cAAmB;IAM3E;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAW3C;;OAEG;IACH,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,qBAAqB,GAAG,IAAI;IA8ChE;;OAEG;IACH,IAAI,IAAI,IAAI;IAaZ;;OAEG;IACH,UAAU,IAAI,IAAI;IASlB,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,SAAS;CA+BlB"}

package/dist/registry.d.ts

@@ -0,0 +1,25 @@
+/**
+ * AnatomyRegistry — discovers and tracks [data-part] elements within a root.
+ * Intentionally stateless between calls: query() always reads the live DOM.
+ */
+export declare class AnatomyRegistry {
+    private root;
+    private observer;
+    constructor(root: HTMLElement);
+    /**
+     * Returns a Map of partId → matching HTMLElements.
+     * Always queries the live DOM — never returns a stale cache.
+     */
+    query(): Map<string, HTMLElement[]>;
+    /**
+     * Returns all unique part IDs present in the DOM, in document order.
+     */
+    partIds(): string[];
+    /**
+     * Watches the root for DOM mutations and calls the callback when [data-part]
+     * elements are added or removed. Returns a cleanup function.
+     */
+    observe(callback: () => void): () => void;
+    destroy(): void;
+}
+//# sourceMappingURL=registry.d.ts.map

package/dist/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/registry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,QAAQ,CAAiC;gBAErC,IAAI,EAAE,WAAW;IAI7B;;;OAGG;IACH,KAAK,IAAI,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC;IAenC;;OAEG;IACH,OAAO,IAAI,MAAM,EAAE;IAanB;;;OAGG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAqBzC,OAAO;CAIR"}

package/dist/theme.d.ts

@@ -0,0 +1,30 @@
+import type { AnatomyTheme, AnatomyPresetName } from './types.js';
+/**
+ * Theming — resolves { preset, theme } into a set of CSS custom properties
+ * applied per controller instance.
+ *
+ * Resolution order (lowest → highest priority):
+ *   1. Stylesheet defaults (the `var(--ca-*, fallback)` chain — the "default" look)
+ *   2. Global CSS variables set by the user on :root or an ancestor
+ *   3. A named preset passed to createAnatomy()
+ *   4. Individual `theme` tokens passed to createAnatomy()
+ *
+ * The `accent` token is a shorthand: when provided, overlay border, overlay
+ * background and label background are derived from it (via color-mix) unless
+ * they are explicitly set too.
+ */
+/** Maps theme token names → CSS custom property names used by the stylesheet. */
+export declare const TOKEN_TO_VAR: Record<keyof Omit<AnatomyTheme, 'accent' | 'overlayBorderStyle'>, string>;
+/**
+ * Built-in presets. Each is a plain AnatomyTheme — you can also import these,
+ * spread them, and tweak individual tokens.
+ */
+export declare const presets: Record<AnatomyPresetName, AnatomyTheme>;
+/**
+ * Resolve a { preset, theme } pair into a flat CSS-variable map.
+ * Only *customized* tokens are returned — an empty result means
+ * "use the stylesheet defaults", which keeps global `--ca-*` variables
+ * set by users fully functional (backward compatible).
+ */
+export declare function resolveThemeVars(preset?: AnatomyPresetName, theme?: AnatomyTheme): Record<string, string>;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAElE;;;;;;;;;;;;;GAaG;AAEH,iFAAiF;AACjF,eAAO,MAAM,YAAY,EAAE,MAAM,CAC/B,MAAM,IAAI,CAAC,YAAY,EAAE,QAAQ,GAAG,oBAAoB,CAAC,EACzD,MAAM,CAYP,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAkC3D,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,CAAC,EAAE,iBAAiB,EAC1B,KAAK,CAAC,EAAE,YAAY,GACnB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkCxB"}