@gabvdl/ui 0.0.14

package/dist/components/element-picker/element-preview.js

@@ -0,0 +1,72 @@
+import { jsxs as C, jsx as A } from "react/jsx-runtime";
+import * as m from "react";
+import { cn as T } from "../../lib/utils.js";
+const S = 'script, iframe, object, embed, link[rel="import"]';
+function k(e, r) {
+  const o = [e, ...Array.from(e.querySelectorAll("input, textarea, select"))], u = [r, ...Array.from(r.querySelectorAll("input, textarea, select"))];
+  o.forEach((s, d) => {
+    const t = u[d];
+    t && (s instanceof HTMLInputElement && t instanceof HTMLInputElement ? (t.setAttribute("value", s.value), s.checked ? t.setAttribute("checked", "") : t.removeAttribute("checked")) : s instanceof HTMLTextAreaElement && t instanceof HTMLTextAreaElement ? t.textContent = s.value : s instanceof HTMLSelectElement && t instanceof HTMLSelectElement && Array.from(t.options).forEach((f, h) => {
+      var c;
+      (c = s.options[h]) != null && c.selected ? f.setAttribute("selected", "") : f.removeAttribute("selected");
+    }));
+  });
+}
+function R(e) {
+  for (let r = e; r; r = r.parentElement) {
+    const o = getComputedStyle(r).backgroundColor;
+    if (o && o !== "transparent" && !/rgba\(0, 0, 0, 0\)/.test(o)) return o;
+  }
+}
+function L({
+  element: e,
+  height: r = 120,
+  shrinkOnly: o = !0,
+  minScale: u = 0,
+  className: s
+}) {
+  const d = m.useRef(null), t = m.useRef(null), [f, h] = m.useState(!0);
+  return m.useEffect(() => {
+    const c = d.current, a = t.current;
+    if (!c || !a) return;
+    if (a.replaceChildren(), !(e != null && e.isConnected)) {
+      h(!0);
+      return;
+    }
+    h(!1);
+    const n = e.getBoundingClientRect(), i = e.cloneNode(!0);
+    i.querySelectorAll(S).forEach((l) => l.remove()), k(e, i), i.style.width = `${n.width}px`, i.style.height = `${n.height}px`, i.style.margin = "0", i.style.flex = "0 0 auto", i.inert = !0, a.style.width = `${n.width}px`, a.style.height = `${n.height}px`, a.appendChild(i);
+    const g = R(e);
+    g && (c.style.backgroundColor = g);
+    const x = () => {
+      const l = c.getBoundingClientRect();
+      if (!n.width || !n.height) return;
+      const y = Math.min(l.width / n.width, l.height / n.height), v = o ? Math.min(y, 1) : y, p = Math.max(v, u), w = p > v, E = w ? 0 : Math.max((l.width - n.width * p) / 2, 0), M = w ? 0 : Math.max((l.height - n.height * p) / 2, 0);
+      a.style.transform = `translate(${E}px, ${M}px) scale(${p})`;
+    };
+    x();
+    const b = new ResizeObserver(x);
+    return b.observe(c), () => {
+      b.disconnect(), a.replaceChildren();
+    };
+  }, [e, o, u, r]), /* @__PURE__ */ C(
+    "div",
+    {
+      ref: d,
+      style: { height: r },
+      "aria-hidden": !0,
+      className: T(
+        "pointer-events-none relative overflow-hidden rounded-lg border border-border bg-muted/30",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ A("div", { ref: t, className: "absolute top-0 left-0 origin-top-left" }),
+        f && /* @__PURE__ */ A("span", { className: "absolute inset-0 flex items-center justify-center text-xs text-muted-foreground", children: "No preview" })
+      ]
+    }
+  );
+}
+export {
+  L as ElementPreview
+};
+//# sourceMappingURL=element-preview.js.map

package/dist/components/element-picker/element-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-preview.js","sources":["../../../src/components/element-picker/element-preview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/** Nothing that could run, load or navigate survives the clone. */\nconst STRIP = 'script, iframe, object, embed, link[rel=\"import\"]';\n\n/**\n * `cloneNode` copies the *attributes*, not the live state — a typed-in input\n * comes back empty, a checked box unchecked. Walk the pairs and put it back.\n */\nfunction copyFieldState(from: HTMLElement, to: HTMLElement) {\n  const originals = [from, ...Array.from(from.querySelectorAll<HTMLElement>('input, textarea, select'))];\n  const clones = [to, ...Array.from(to.querySelectorAll<HTMLElement>('input, textarea, select'))];\n\n  originals.forEach((el, i) => {\n    const clone = clones[i];\n    if (!clone) return;\n\n    if (el instanceof HTMLInputElement && clone instanceof HTMLInputElement) {\n      clone.setAttribute('value', el.value);\n      if (el.checked) clone.setAttribute('checked', '');\n      else clone.removeAttribute('checked');\n    } else if (el instanceof HTMLTextAreaElement && clone instanceof HTMLTextAreaElement) {\n      clone.textContent = el.value;\n    } else if (el instanceof HTMLSelectElement && clone instanceof HTMLSelectElement) {\n      Array.from(clone.options).forEach((o, oi) => {\n        if (el.options[oi]?.selected) o.setAttribute('selected', '');\n        else o.removeAttribute('selected');\n      });\n    }\n  });\n}\n\n/** The colour actually painted behind the element, so light text stays legible. */\nfunction backdropOf(el: HTMLElement): string | undefined {\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\n    const bg = getComputedStyle(node).backgroundColor;\n    if (bg && bg !== 'transparent' && !/rgba\\(0, 0, 0, 0\\)/.test(bg)) return bg;\n  }\n  return undefined;\n}\n\nexport interface ElementPreviewProps {\n  /** The element to mirror. A detached or null node renders the fallback. */\n  element: HTMLElement | null;\n  /** Height of the preview box, in px. Default 120. */\n  height?: number;\n  /** Never enlarge past 1:1, only shrink to fit. Default true. */\n  shrinkOnly?: boolean;\n  /**\n   * Floor on the scale. Below it the preview crops from the top-left instead of\n   * shrinking further — a 900px-wide heading fitted into a thumbnail is two\n   * pixels of grey, where its first few words are recognisable. Default 0.\n   */\n  minScale?: number;\n  className?: string;\n}\n\n/**\n * A live, inert clone of an element, scaled to fit its box. Because the copy\n * sits in the same document it inherits the same stylesheets, so it looks\n * exactly like the thing it came from — the page's CSS does the work.\n */\nexport function ElementPreview({\n  element,\n  height = 120,\n  shrinkOnly = true,\n  minScale = 0,\n  className,\n}: ElementPreviewProps) {\n  const host = React.useRef<HTMLDivElement>(null);\n  const stage = React.useRef<HTMLDivElement>(null);\n  const [empty, setEmpty] = React.useState(true);\n\n  React.useEffect(() => {\n    const frame = host.current;\n    const surface = stage.current;\n    if (!frame || !surface) return;\n\n    surface.replaceChildren();\n    if (!element?.isConnected) {\n      setEmpty(true);\n      return;\n    }\n    setEmpty(false);\n\n    const rect = element.getBoundingClientRect();\n    const clone = element.cloneNode(true) as HTMLElement;\n    clone.querySelectorAll(STRIP).forEach((n) => n.remove());\n    copyFieldState(element, clone);\n\n    // Freeze it at the size it really is — a clone out of its flex/grid parent\n    // would otherwise collapse or stretch to the preview box instead.\n    clone.style.width = `${rect.width}px`;\n    clone.style.height = `${rect.height}px`;\n    clone.style.margin = '0';\n    clone.style.flex = '0 0 auto';\n    clone.inert = true;\n\n    surface.style.width = `${rect.width}px`;\n    surface.style.height = `${rect.height}px`;\n    surface.appendChild(clone);\n\n    const backdrop = backdropOf(element);\n    if (backdrop) frame.style.backgroundColor = backdrop;\n\n    const fit = () => {\n      const box = frame.getBoundingClientRect();\n      if (!rect.width || !rect.height) return;\n\n      const raw = Math.min(box.width / rect.width, box.height / rect.height);\n      const fitted = shrinkOnly ? Math.min(raw, 1) : raw;\n      const scale = Math.max(fitted, minScale);\n\n      // Centre what fits; anchor what doesn't, so a crop starts at the corner\n      // you'd actually read from.\n      const cropped = scale > fitted;\n      const tx = cropped ? 0 : Math.max((box.width - rect.width * scale) / 2, 0);\n      const ty = cropped ? 0 : Math.max((box.height - rect.height * scale) / 2, 0);\n      surface.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;\n    };\n\n    fit();\n    const ro = new ResizeObserver(fit);\n    ro.observe(frame);\n    return () => {\n      ro.disconnect();\n      surface.replaceChildren();\n    };\n  }, [element, shrinkOnly, minScale, height]);\n\n  return (\n    <div\n      ref={host}\n      style={{ height }}\n      aria-hidden\n      className={cn(\n        'pointer-events-none relative overflow-hidden rounded-lg border border-border bg-muted/30',\n        className,\n      )}\n    >\n      <div ref={stage} className=\"absolute top-0 left-0 origin-top-left\" />\n      {empty && (\n        <span className=\"absolute inset-0 flex items-center justify-center text-xs text-muted-foreground\">\n          No preview\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["STRIP","copyFieldState","from","to","originals","clones","el","i","clone","o","oi","_a","backdropOf","node","bg","ElementPreview","element","height","shrinkOnly","minScale","className","host","React","stage","empty","setEmpty","frame","surface","rect","n","backdrop","fit","box","raw","fitted","scale","cropped","tx","ty","ro","jsxs","cn","jsx"],"mappings":"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"}

package/dist/components/element-picker/index.d.ts

@@ -0,0 +1,12 @@
+export { ElementPicker, ElementPickerOverlay } from './element-picker';
+export type { ElementPickerProps, ElementPickerOverlayProps } from './element-picker';
+export { ElementPickerField } from './element-picker-field';
+export type { ElementPickerFieldProps } from './element-picker-field';
+export { ElementPreview } from './element-preview';
+export type { ElementPreviewProps } from './element-preview';
+export { useElementPicker } from './use-element-picker';
+export type { UseElementPickerOptions, UseElementPickerResult } from './use-element-picker';
+export { classify, formatHtml, hierarchy, parseElement, uniqueSelector, STYLE_GROUPS, STYLE_PROPS } from './parse';
+export type { ParseOptions } from './parse';
+export type { ElementField, ElementInfo, ElementKind, ElementPathStep, PickedElement } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/element-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/element-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACvE,YAAY,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACnH,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/element-picker/parse.d.ts

@@ -0,0 +1,32 @@
+import { ElementInfo, ElementKind, ElementPathStep } from './types';
+/**
+ * The computed properties we read off a picked element, grouped the way the
+ * inspector shows them. Anything the browser reports as its initial value is
+ * dropped later, so a plain `<div>` doesn't come back with forty entries.
+ */
+export declare const STYLE_GROUPS: Record<string, string[]>;
+export declare const STYLE_PROPS: string[];
+/**
+ * The shortest selector that still lands on exactly this element. Tries an
+ * `#id` first, then a class-qualified path, and falls back to `:nth-of-type`
+ * when a step is still ambiguous — the same ladder devtools climbs.
+ */
+export declare function uniqueSelector(el: HTMLElement, root?: HTMLElement): string;
+/** The ancestor chain from the picker root down to the element itself. */
+export declare function hierarchy(el: HTMLElement, root: HTMLElement): ElementPathStep[];
+/** What the element *is*, as a human would name it. */
+export declare function classify(el: HTMLElement): ElementKind;
+export interface ParseOptions {
+    /** The subtree the selector and hierarchy are expressed relative to. */
+    root?: HTMLElement;
+    /** Override which computed properties are captured. */
+    styleProps?: string[];
+}
+/** Read an element down to plain, serializable data. */
+export declare function parseElement(el: HTMLElement, options?: ParseOptions): ElementInfo;
+/**
+ * Re-indent a serialized HTML string. `outerHTML` comes back as one line for
+ * anything the browser normalized, which is unreadable past a few nodes.
+ */
+export declare function formatHtml(html: string, indent?: string): string;
+//# sourceMappingURL=parse.d.ts.map

package/dist/components/element-picker/parse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../../../src/components/element-picker/parse.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAiDjD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,EAAuC,CAAC;AAmCxE;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,GAAE,WAA2B,GAAG,MAAM,CAyCzF;AAED,0EAA0E;AAC1E,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG,eAAe,EAAE,CAY/E;AAiBD,uDAAuD;AACvD,wBAAgB,QAAQ,CAAC,EAAE,EAAE,WAAW,GAAG,WAAW,CAmBrD;AAwED,MAAM,WAAW,YAAY;IAC3B,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,wDAAwD;AACxD,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,GAAE,YAAiB,GAAG,WAAW,CAgCrF;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,SAAO,GAAG,MAAM,CAsB9D"}

package/dist/components/element-picker/parse.js

@@ -0,0 +1,230 @@
+const h = {
+  Layout: [
+    "display",
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "zIndex",
+    "flexDirection",
+    "flexWrap",
+    "alignItems",
+    "justifyContent",
+    "gap",
+    "gridTemplateColumns",
+    "gridTemplateRows",
+    "overflow"
+  ],
+  Box: [
+    "width",
+    "height",
+    "boxSizing",
+    "padding",
+    "margin",
+    "border",
+    "borderRadius"
+  ],
+  Typography: [
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "lineHeight",
+    "letterSpacing",
+    "textAlign",
+    "textTransform",
+    "textDecorationLine",
+    "whiteSpace"
+  ],
+  Visual: [
+    "color",
+    "backgroundColor",
+    "backgroundImage",
+    "opacity",
+    "boxShadow",
+    "transform",
+    "transition",
+    "cursor"
+  ]
+}, g = Object.values(h).flat(), b = /* @__PURE__ */ new Set([
+  "",
+  "none",
+  "auto",
+  "normal",
+  "static",
+  "0px",
+  "visible",
+  "rgba(0, 0, 0, 0)",
+  "start",
+  "nowrap",
+  "row",
+  "stretch",
+  "flex-start",
+  "content-box",
+  "transparent"
+]), c = (t) => t.replace(/\s+/g, " ").trim(), y = (t) => Array.from(t.classList).filter((n) => /^[a-zA-Z_][\w-]*$/.test(n));
+function m(t) {
+  let n = 1;
+  for (let e = t.previousElementSibling; e; e = e.previousElementSibling)
+    e.tagName === t.tagName && n++;
+  return n;
+}
+function v(t, n = document.body) {
+  const e = t.ownerDocument, r = (i) => {
+    try {
+      return e.querySelectorAll(i).length;
+    } catch {
+      return 0;
+    }
+  };
+  if (t.id && /^[a-zA-Z_][\w-]*$/.test(t.id) && r(`#${t.id}`) === 1) return `#${t.id}`;
+  const o = [];
+  for (let i = t; i && i !== n.parentElement; i = i.parentElement) {
+    const s = i.tagName.toLowerCase();
+    if (i.id && /^[a-zA-Z_][\w-]*$/.test(i.id) && r(`#${i.id}`) === 1) {
+      o.unshift(`#${i.id}`);
+      break;
+    }
+    const a = i.parentElement, l = (u) => !!a && Array.from(a.children).filter((p) => p.matches(u)).length > 1;
+    let d = s;
+    if (l(d)) {
+      const u = y(i).slice(0, 2), p = u.length ? `${s}.${u.join(".")}` : s;
+      d = l(p) ? `${p}:nth-of-type(${m(i)})` : p;
+    }
+    o.unshift(d);
+    const f = o.join(" > ");
+    if (r(f) === 1) return f;
+  }
+  return o.join(" > ");
+}
+function x(t, n) {
+  const e = [];
+  for (let r = t; r && r !== n.parentElement && (e.unshift({
+    tag: r.tagName.toLowerCase(),
+    id: r.id || void 0,
+    classes: Array.from(r.classList),
+    nth: m(r)
+  }), r !== n); r = r.parentElement)
+    ;
+  return e;
+}
+const w = (t) => t.map((n) => {
+  let e = n.tag;
+  return n.id ? e += `#${n.id}` : n.classes.length && (e += `.${n.classes[0]}`), n.nth > 1 && (e += `:nth-of-type(${n.nth})`), e;
+}).join(" > "), S = /* @__PURE__ */ new Set(["nav", "header", "footer", "main", "aside", "section", "article", "dialog"]), A = /* @__PURE__ */ new Set(["p", "span", "strong", "em", "b", "i", "small", "label", "li", "dt", "dd", "blockquote", "code", "pre", "time", "figcaption"]), C = /* @__PURE__ */ new Set(["img", "svg", "video", "audio", "canvas", "picture", "iframe"]);
+function L(t) {
+  const n = t.tagName.toLowerCase(), e = t.getAttribute("role");
+  return n === "input" && /^(button|submit|reset|image)$/.test(t.type) ? "button" : n === "input" || n === "textarea" || n === "select" ? "input" : n === "button" || e === "button" ? "button" : n === "a" ? t.href ? "link" : "text" : C.has(n) ? "media" : /^h[1-6]$/.test(n) ? "heading" : n === "form" ? "form" : n === "table" ? "table" : n === "ul" || n === "ol" || n === "dl" || e === "list" ? "list" : S.has(n) ? "landmark" : A.has(n) || !t.children.length && c(t.textContent ?? "") ? "text" : "container";
+}
+function $(t) {
+  const n = t.tagName.toLowerCase();
+  if (n === "input") {
+    const e = t;
+    return {
+      type: e.type,
+      name: e.name || void 0,
+      value: e.value,
+      placeholder: e.placeholder || void 0,
+      checked: e.type === "checkbox" || e.type === "radio" ? e.checked : void 0,
+      required: e.required || void 0,
+      disabled: e.disabled || void 0
+    };
+  }
+  if (n === "textarea") {
+    const e = t;
+    return {
+      type: "textarea",
+      name: e.name || void 0,
+      value: e.value,
+      placeholder: e.placeholder || void 0,
+      required: e.required || void 0,
+      disabled: e.disabled || void 0
+    };
+  }
+  if (n === "select") {
+    const e = t;
+    return {
+      type: e.multiple ? "select-multiple" : "select",
+      name: e.name || void 0,
+      value: e.value,
+      required: e.required || void 0,
+      disabled: e.disabled || void 0,
+      options: Array.from(e.options).map((r) => [r.value, c(r.text)])
+    };
+  }
+}
+function k(t) {
+  const n = t.getAttribute("aria-label");
+  if (n) return c(n);
+  const e = t.getAttribute("aria-labelledby");
+  if (e) {
+    const o = t.ownerDocument.getElementById(e);
+    if (o) return c(o.textContent ?? "");
+  }
+  if (t.id) {
+    const o = t.ownerDocument.querySelector(`label[for="${CSS.escape(t.id)}"]`);
+    if (o) return c(o.textContent ?? "");
+  }
+  const r = t.getAttribute("alt") ?? t.getAttribute("title");
+  return r ? c(r) : void 0;
+}
+function T(t, n) {
+  const e = getComputedStyle(t), r = {};
+  for (const o of n) {
+    const i = e.getPropertyValue(
+      o.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`)
+    );
+    b.has(i.trim()) || (r[o] = i.trim());
+  }
+  return r;
+}
+function q(t, n = {}) {
+  const e = n.root ?? t.ownerDocument.body, r = x(t, e), o = t.getBoundingClientRect(), i = t.parentElement, s = {};
+  for (const a of Array.from(t.attributes)) s[a.name] = a.value;
+  return {
+    selector: v(t, e),
+    path: w(r),
+    tag: t.tagName.toLowerCase(),
+    kind: L(t),
+    id: t.id || void 0,
+    classes: Array.from(t.classList),
+    role: t.getAttribute("role") ?? void 0,
+    label: k(t),
+    text: c(t.textContent ?? ""),
+    outerHTML: t.outerHTML,
+    innerHTML: t.innerHTML,
+    attributes: s,
+    dataset: { ...t.dataset },
+    hierarchy: r,
+    depth: Math.max(r.length - 1, 0),
+    index: i ? Array.from(i.children).indexOf(t) + 1 : 1,
+    siblings: i ? i.children.length : 1,
+    children: t.children.length,
+    rect: { x: o.x, y: o.y, width: o.width, height: o.height },
+    styles: T(t, n.styleProps ?? g),
+    field: $(t)
+  };
+}
+const E = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+function D(t, n = "  ") {
+  var i, s;
+  const e = t.replace(/>\s+</g, "><").split(/(<[^>]+>)/).map((a) => a.trim()).filter(Boolean), r = [];
+  let o = 0;
+  for (const a of e) {
+    const l = a.startsWith("<"), d = a.startsWith("</"), f = l ? (s = (i = /^<\/?([a-zA-Z0-9-]+)/.exec(a)) == null ? void 0 : i[1]) == null ? void 0 : s.toLowerCase() : void 0, u = l && (a.endsWith("/>") || (f ? E.has(f) : !1));
+    d && (o = Math.max(o - 1, 0)), r.push(n.repeat(o) + a), l && !d && !u && !a.startsWith("<!") && o++;
+  }
+  return r.join(`
+`);
+}
+export {
+  h as STYLE_GROUPS,
+  g as STYLE_PROPS,
+  L as classify,
+  D as formatHtml,
+  x as hierarchy,
+  q as parseElement,
+  v as uniqueSelector
+};
+//# sourceMappingURL=parse.js.map

package/dist/components/element-picker/parse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse.js","sources":["../../../src/components/element-picker/parse.ts"],"sourcesContent":["import type { ElementField, ElementInfo, ElementKind, ElementPathStep } from './types';\n\n/**\n * The computed properties we read off a picked element, grouped the way the\n * inspector shows them. Anything the browser reports as its initial value is\n * dropped later, so a plain `<div>` doesn't come back with forty entries.\n */\nexport const STYLE_GROUPS: Record<string, string[]> = {\n  Layout: [\n    'display',\n    'position',\n    'top',\n    'right',\n    'bottom',\n    'left',\n    'zIndex',\n    'flexDirection',\n    'flexWrap',\n    'alignItems',\n    'justifyContent',\n    'gap',\n    'gridTemplateColumns',\n    'gridTemplateRows',\n    'overflow',\n  ],\n  Box: [\n    'width',\n    'height',\n    'boxSizing',\n    'padding',\n    'margin',\n    'border',\n    'borderRadius',\n  ],\n  Typography: [\n    'fontFamily',\n    'fontSize',\n    'fontWeight',\n    'fontStyle',\n    'lineHeight',\n    'letterSpacing',\n    'textAlign',\n    'textTransform',\n    'textDecorationLine',\n    'whiteSpace',\n  ],\n  Visual: [\n    'color',\n    'backgroundColor',\n    'backgroundImage',\n    'opacity',\n    'boxShadow',\n    'transform',\n    'transition',\n    'cursor',\n  ],\n};\n\nexport const STYLE_PROPS: string[] = Object.values(STYLE_GROUPS).flat();\n\n/** Values the browser reports when nothing was actually set. */\nconst BORING = new Set([\n  '',\n  'none',\n  'auto',\n  'normal',\n  'static',\n  '0px',\n  'visible',\n  'rgba(0, 0, 0, 0)',\n  'start',\n  'nowrap',\n  'row',\n  'stretch',\n  'flex-start',\n  'content-box',\n  'transparent',\n]);\n\nconst collapse = (s: string) => s.replace(/\\s+/g, ' ').trim();\n\n/** Class names that are safe (and useful) to put in a selector. */\nconst usableClasses = (el: Element) =>\n  Array.from(el.classList).filter((c) => /^[a-zA-Z_][\\w-]*$/.test(c));\n\nfunction nthOfType(el: Element): number {\n  let n = 1;\n  for (let sib = el.previousElementSibling; sib; sib = sib.previousElementSibling) {\n    if (sib.tagName === el.tagName) n++;\n  }\n  return n;\n}\n\n/**\n * The shortest selector that still lands on exactly this element. Tries an\n * `#id` first, then a class-qualified path, and falls back to `:nth-of-type`\n * when a step is still ambiguous — the same ladder devtools climbs.\n */\nexport function uniqueSelector(el: HTMLElement, root: HTMLElement = document.body): string {\n  const doc = el.ownerDocument;\n  const hits = (sel: string) => {\n    try {\n      return doc.querySelectorAll(sel).length;\n    } catch {\n      return 0;\n    }\n  };\n\n  if (el.id && /^[a-zA-Z_][\\w-]*$/.test(el.id) && hits(`#${el.id}`) === 1) return `#${el.id}`;\n\n  const steps: string[] = [];\n  for (let node: HTMLElement | null = el; node && node !== root.parentElement; node = node.parentElement) {\n    const tag = node.tagName.toLowerCase();\n    if (node.id && /^[a-zA-Z_][\\w-]*$/.test(node.id) && hits(`#${node.id}`) === 1) {\n      steps.unshift(`#${node.id}`);\n      break;\n    }\n\n    // Take the shortest step that still singles the node out among its\n    // siblings: the bare tag, then a class or two, then the positional index.\n    // Without that ladder a utility-class page yields selectors that are all\n    // noise — `div.flex.min-w-0 > p.mt-0.5.truncate.text-xs` and so on.\n    const parent: HTMLElement | null = node.parentElement;\n    const ambiguous = (sel: string) =>\n      !!parent && Array.from(parent.children).filter((c) => c.matches(sel)).length > 1;\n\n    let step = tag;\n    if (ambiguous(step)) {\n      const classes = usableClasses(node).slice(0, 2);\n      const qualified = classes.length ? `${tag}.${classes.join('.')}` : tag;\n      step = ambiguous(qualified) ? `${qualified}:nth-of-type(${nthOfType(node)})` : qualified;\n    }\n    steps.unshift(step);\n\n    const candidate = steps.join(' > ');\n    if (hits(candidate) === 1) return candidate;\n  }\n\n  return steps.join(' > ');\n}\n\n/** The ancestor chain from the picker root down to the element itself. */\nexport function hierarchy(el: HTMLElement, root: HTMLElement): ElementPathStep[] {\n  const chain: ElementPathStep[] = [];\n  for (let node: HTMLElement | null = el; node && node !== root.parentElement; node = node.parentElement) {\n    chain.unshift({\n      tag: node.tagName.toLowerCase(),\n      id: node.id || undefined,\n      classes: Array.from(node.classList),\n      nth: nthOfType(node),\n    });\n    if (node === root) break;\n  }\n  return chain;\n}\n\nconst pathString = (chain: ElementPathStep[]) =>\n  chain\n    .map((s) => {\n      let step = s.tag;\n      if (s.id) step += `#${s.id}`;\n      else if (s.classes.length) step += `.${s.classes[0]}`;\n      if (s.nth > 1) step += `:nth-of-type(${s.nth})`;\n      return step;\n    })\n    .join(' > ');\n\nconst LANDMARKS = new Set(['nav', 'header', 'footer', 'main', 'aside', 'section', 'article', 'dialog']);\nconst TEXTUAL = new Set(['p', 'span', 'strong', 'em', 'b', 'i', 'small', 'label', 'li', 'dt', 'dd', 'blockquote', 'code', 'pre', 'time', 'figcaption']);\nconst MEDIA = new Set(['img', 'svg', 'video', 'audio', 'canvas', 'picture', 'iframe']);\n\n/** What the element *is*, as a human would name it. */\nexport function classify(el: HTMLElement): ElementKind {\n  const tag = el.tagName.toLowerCase();\n  const role = el.getAttribute('role');\n\n  // A submit/reset/button input is a button first and a field second.\n  if (tag === 'input' && /^(button|submit|reset|image)$/.test((el as HTMLInputElement).type)) return 'button';\n  if (tag === 'input' || tag === 'textarea' || tag === 'select') return 'input';\n  if (tag === 'button' || role === 'button') return 'button';\n  if (tag === 'a') return (el as HTMLAnchorElement).href ? 'link' : 'text';\n  if (MEDIA.has(tag)) return 'media';\n  if (/^h[1-6]$/.test(tag)) return 'heading';\n  if (tag === 'form') return 'form';\n  if (tag === 'table') return 'table';\n  if (tag === 'ul' || tag === 'ol' || tag === 'dl' || role === 'list') return 'list';\n  if (LANDMARKS.has(tag)) return 'landmark';\n  if (TEXTUAL.has(tag)) return 'text';\n  // A div holding nothing but words is text; a div holding boxes is a container.\n  if (!el.children.length && collapse(el.textContent ?? '')) return 'text';\n  return 'container';\n}\n\nfunction readField(el: HTMLElement): ElementField | undefined {\n  const tag = el.tagName.toLowerCase();\n\n  if (tag === 'input') {\n    const input = el as HTMLInputElement;\n    return {\n      type: input.type,\n      name: input.name || undefined,\n      value: input.value,\n      placeholder: input.placeholder || undefined,\n      checked: input.type === 'checkbox' || input.type === 'radio' ? input.checked : undefined,\n      required: input.required || undefined,\n      disabled: input.disabled || undefined,\n    };\n  }\n  if (tag === 'textarea') {\n    const area = el as HTMLTextAreaElement;\n    return {\n      type: 'textarea',\n      name: area.name || undefined,\n      value: area.value,\n      placeholder: area.placeholder || undefined,\n      required: area.required || undefined,\n      disabled: area.disabled || undefined,\n    };\n  }\n  if (tag === 'select') {\n    const select = el as HTMLSelectElement;\n    return {\n      type: select.multiple ? 'select-multiple' : 'select',\n      name: select.name || undefined,\n      value: select.value,\n      required: select.required || undefined,\n      disabled: select.disabled || undefined,\n      options: Array.from(select.options).map((o) => [o.value, collapse(o.text)]),\n    };\n  }\n  return undefined;\n}\n\n/** The element's accessible-ish name: aria-label, then its `<label>`, then alt/title. */\nfunction labelOf(el: HTMLElement): string | undefined {\n  const aria = el.getAttribute('aria-label');\n  if (aria) return collapse(aria);\n\n  const labelledBy = el.getAttribute('aria-labelledby');\n  if (labelledBy) {\n    const target = el.ownerDocument.getElementById(labelledBy);\n    if (target) return collapse(target.textContent ?? '');\n  }\n  if (el.id) {\n    const label = el.ownerDocument.querySelector(`label[for=\"${CSS.escape(el.id)}\"]`);\n    if (label) return collapse(label.textContent ?? '');\n  }\n  const alt = el.getAttribute('alt') ?? el.getAttribute('title');\n  return alt ? collapse(alt) : undefined;\n}\n\nfunction readStyles(el: HTMLElement, props: string[]): Record<string, string> {\n  const computed = getComputedStyle(el);\n  const out: Record<string, string> = {};\n  for (const prop of props) {\n    const value = computed.getPropertyValue(\n      prop.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`),\n    );\n    if (!BORING.has(value.trim())) out[prop] = value.trim();\n  }\n  return out;\n}\n\nexport interface ParseOptions {\n  /** The subtree the selector and hierarchy are expressed relative to. */\n  root?: HTMLElement;\n  /** Override which computed properties are captured. */\n  styleProps?: string[];\n}\n\n/** Read an element down to plain, serializable data. */\nexport function parseElement(el: HTMLElement, options: ParseOptions = {}): ElementInfo {\n  const root = options.root ?? el.ownerDocument.body;\n  const chain = hierarchy(el, root);\n  const rect = el.getBoundingClientRect();\n  const parent = el.parentElement;\n\n  const attributes: Record<string, string> = {};\n  for (const attr of Array.from(el.attributes)) attributes[attr.name] = attr.value;\n\n  return {\n    selector: uniqueSelector(el, root),\n    path: pathString(chain),\n    tag: el.tagName.toLowerCase(),\n    kind: classify(el),\n    id: el.id || undefined,\n    classes: Array.from(el.classList),\n    role: el.getAttribute('role') ?? undefined,\n    label: labelOf(el),\n    text: collapse(el.textContent ?? ''),\n    outerHTML: el.outerHTML,\n    innerHTML: el.innerHTML,\n    attributes,\n    dataset: { ...el.dataset } as Record<string, string>,\n    hierarchy: chain,\n    depth: Math.max(chain.length - 1, 0),\n    index: parent ? Array.from(parent.children).indexOf(el) + 1 : 1,\n    siblings: parent ? parent.children.length : 1,\n    children: el.children.length,\n    rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },\n    styles: readStyles(el, options.styleProps ?? STYLE_PROPS),\n    field: readField(el),\n  };\n}\n\nconst VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);\n\n/**\n * Re-indent a serialized HTML string. `outerHTML` comes back as one line for\n * anything the browser normalized, which is unreadable past a few nodes.\n */\nexport function formatHtml(html: string, indent = '  '): string {\n  const tokens = html\n    .replace(/>\\s+</g, '><')\n    .split(/(<[^>]+>)/)\n    .map((t) => t.trim())\n    .filter(Boolean);\n\n  const lines: string[] = [];\n  let depth = 0;\n\n  for (const token of tokens) {\n    const isTag = token.startsWith('<');\n    const isClose = token.startsWith('</');\n    const tag = isTag ? /^<\\/?([a-zA-Z0-9-]+)/.exec(token)?.[1]?.toLowerCase() : undefined;\n    const selfClosing = isTag && (token.endsWith('/>') || (tag ? VOID_TAGS.has(tag) : false));\n\n    if (isClose) depth = Math.max(depth - 1, 0);\n    lines.push(indent.repeat(depth) + token);\n    if (isTag && !isClose && !selfClosing && !token.startsWith('<!')) depth++;\n  }\n\n  return lines.join('\\n');\n}\n"],"names":["STYLE_GROUPS","STYLE_PROPS","BORING","collapse","s","usableClasses","el","c","nthOfType","sib","uniqueSelector","root","doc","hits","sel","steps","node","tag","parent","ambiguous","step","classes","qualified","candidate","hierarchy","chain","pathString","LANDMARKS","TEXTUAL","MEDIA","classify","role","readField","input","area","select","o","labelOf","aria","labelledBy","target","label","alt","readStyles","props","computed","out","prop","value","parseElement","options","rect","attributes","attr","VOID_TAGS","formatHtml","html","indent","_a","_b","tokens","t","lines","depth","token","isTag","isClose","selfClosing"],"mappings":"AAOO,MAAMA,IAAyC;AAAA,EACpD,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,KAAK;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,GAEaC,IAAwB,OAAO,OAAOD,CAAY,EAAE,KAAA,GAG3DE,wBAAa,IAAI;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,GAEKC,IAAW,CAACC,MAAcA,EAAE,QAAQ,QAAQ,GAAG,EAAE,KAAA,GAGjDC,IAAgB,CAACC,MACrB,MAAM,KAAKA,EAAG,SAAS,EAAE,OAAO,CAACC,MAAM,oBAAoB,KAAKA,CAAC,CAAC;AAEpE,SAASC,EAAUF,GAAqB;AACtC,MAAI,IAAI;AACR,WAASG,IAAMH,EAAG,wBAAwBG,GAAKA,IAAMA,EAAI;AACvD,IAAIA,EAAI,YAAYH,EAAG,WAAS;AAElC,SAAO;AACT;AAOO,SAASI,EAAeJ,GAAiBK,IAAoB,SAAS,MAAc;AACzF,QAAMC,IAAMN,EAAG,eACTO,IAAO,CAACC,MAAgB;AAC5B,QAAI;AACF,aAAOF,EAAI,iBAAiBE,CAAG,EAAE;AAAA,IACnC,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,MAAIR,EAAG,MAAM,oBAAoB,KAAKA,EAAG,EAAE,KAAKO,EAAK,IAAIP,EAAG,EAAE,EAAE,MAAM,EAAG,QAAO,IAAIA,EAAG,EAAE;AAEzF,QAAMS,IAAkB,CAAA;AACxB,WAASC,IAA2BV,GAAIU,KAAQA,MAASL,EAAK,eAAeK,IAAOA,EAAK,eAAe;AACtG,UAAMC,IAAMD,EAAK,QAAQ,YAAA;AACzB,QAAIA,EAAK,MAAM,oBAAoB,KAAKA,EAAK,EAAE,KAAKH,EAAK,IAAIG,EAAK,EAAE,EAAE,MAAM,GAAG;AAC7E,MAAAD,EAAM,QAAQ,IAAIC,EAAK,EAAE,EAAE;AAC3B;AAAA,IACF;AAMA,UAAME,IAA6BF,EAAK,eAClCG,IAAY,CAACL,MACjB,CAAC,CAACI,KAAU,MAAM,KAAKA,EAAO,QAAQ,EAAE,OAAO,CAACX,MAAMA,EAAE,QAAQO,CAAG,CAAC,EAAE,SAAS;AAEjF,QAAIM,IAAOH;AACX,QAAIE,EAAUC,CAAI,GAAG;AACnB,YAAMC,IAAUhB,EAAcW,CAAI,EAAE,MAAM,GAAG,CAAC,GACxCM,IAAYD,EAAQ,SAAS,GAAGJ,CAAG,IAAII,EAAQ,KAAK,GAAG,CAAC,KAAKJ;AACnE,MAAAG,IAAOD,EAAUG,CAAS,IAAI,GAAGA,CAAS,gBAAgBd,EAAUQ,CAAI,CAAC,MAAMM;AAAA,IACjF;AACA,IAAAP,EAAM,QAAQK,CAAI;AAElB,UAAMG,IAAYR,EAAM,KAAK,KAAK;AAClC,QAAIF,EAAKU,CAAS,MAAM,EAAG,QAAOA;AAAA,EACpC;AAEA,SAAOR,EAAM,KAAK,KAAK;AACzB;AAGO,SAASS,EAAUlB,GAAiBK,GAAsC;AAC/E,QAAMc,IAA2B,CAAA;AACjC,WAAST,IAA2BV,GAAIU,KAAQA,MAASL,EAAK,kBAC5Dc,EAAM,QAAQ;AAAA,IACZ,KAAKT,EAAK,QAAQ,YAAA;AAAA,IAClB,IAAIA,EAAK,MAAM;AAAA,IACf,SAAS,MAAM,KAAKA,EAAK,SAAS;AAAA,IAClC,KAAKR,EAAUQ,CAAI;AAAA,EAAA,CACpB,GACGA,MAASL,IAP8DK,IAAOA,EAAK;AAOvF;AAEF,SAAOS;AACT;AAEA,MAAMC,IAAa,CAACD,MAClBA,EACG,IAAI,CAACrB,MAAM;AACV,MAAIgB,IAAOhB,EAAE;AACb,SAAIA,EAAE,KAAIgB,KAAQ,IAAIhB,EAAE,EAAE,KACjBA,EAAE,QAAQ,WAAQgB,KAAQ,IAAIhB,EAAE,QAAQ,CAAC,CAAC,KAC/CA,EAAE,MAAM,MAAGgB,KAAQ,gBAAgBhB,EAAE,GAAG,MACrCgB;AACT,CAAC,EACA,KAAK,KAAK,GAETO,IAAY,oBAAI,IAAI,CAAC,OAAO,UAAU,UAAU,QAAQ,SAAS,WAAW,WAAW,QAAQ,CAAC,GAChGC,wBAAc,IAAI,CAAC,KAAK,QAAQ,UAAU,MAAM,KAAK,KAAK,SAAS,SAAS,MAAM,MAAM,MAAM,cAAc,QAAQ,OAAO,QAAQ,YAAY,CAAC,GAChJC,IAAQ,oBAAI,IAAI,CAAC,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,QAAQ,CAAC;AAG9E,SAASC,EAASxB,GAA8B;AACrD,QAAMW,IAAMX,EAAG,QAAQ,YAAA,GACjByB,IAAOzB,EAAG,aAAa,MAAM;AAGnC,SAAIW,MAAQ,WAAW,gCAAgC,KAAMX,EAAwB,IAAI,IAAU,WAC/FW,MAAQ,WAAWA,MAAQ,cAAcA,MAAQ,WAAiB,UAClEA,MAAQ,YAAYc,MAAS,WAAiB,WAC9Cd,MAAQ,MAAaX,EAAyB,OAAO,SAAS,SAC9DuB,EAAM,IAAIZ,CAAG,IAAU,UACvB,WAAW,KAAKA,CAAG,IAAU,YAC7BA,MAAQ,SAAe,SACvBA,MAAQ,UAAgB,UACxBA,MAAQ,QAAQA,MAAQ,QAAQA,MAAQ,QAAQc,MAAS,SAAe,SACxEJ,EAAU,IAAIV,CAAG,IAAU,aAC3BW,EAAQ,IAAIX,CAAG,KAEf,CAACX,EAAG,SAAS,UAAUH,EAASG,EAAG,eAAe,EAAE,IAAU,SAC3D;AACT;AAEA,SAAS0B,EAAU1B,GAA2C;AAC5D,QAAMW,IAAMX,EAAG,QAAQ,YAAA;AAEvB,MAAIW,MAAQ,SAAS;AACnB,UAAMgB,IAAQ3B;AACd,WAAO;AAAA,MACL,MAAM2B,EAAM;AAAA,MACZ,MAAMA,EAAM,QAAQ;AAAA,MACpB,OAAOA,EAAM;AAAA,MACb,aAAaA,EAAM,eAAe;AAAA,MAClC,SAASA,EAAM,SAAS,cAAcA,EAAM,SAAS,UAAUA,EAAM,UAAU;AAAA,MAC/E,UAAUA,EAAM,YAAY;AAAA,MAC5B,UAAUA,EAAM,YAAY;AAAA,IAAA;AAAA,EAEhC;AACA,MAAIhB,MAAQ,YAAY;AACtB,UAAMiB,IAAO5B;AACb,WAAO;AAAA,MACL,MAAM;AAAA,MACN,MAAM4B,EAAK,QAAQ;AAAA,MACnB,OAAOA,EAAK;AAAA,MACZ,aAAaA,EAAK,eAAe;AAAA,MACjC,UAAUA,EAAK,YAAY;AAAA,MAC3B,UAAUA,EAAK,YAAY;AAAA,IAAA;AAAA,EAE/B;AACA,MAAIjB,MAAQ,UAAU;AACpB,UAAMkB,IAAS7B;AACf,WAAO;AAAA,MACL,MAAM6B,EAAO,WAAW,oBAAoB;AAAA,MAC5C,MAAMA,EAAO,QAAQ;AAAA,MACrB,OAAOA,EAAO;AAAA,MACd,UAAUA,EAAO,YAAY;AAAA,MAC7B,UAAUA,EAAO,YAAY;AAAA,MAC7B,SAAS,MAAM,KAAKA,EAAO,OAAO,EAAE,IAAI,CAACC,MAAM,CAACA,EAAE,OAAOjC,EAASiC,EAAE,IAAI,CAAC,CAAC;AAAA,IAAA;AAAA,EAE9E;AAEF;AAGA,SAASC,EAAQ/B,GAAqC;AACpD,QAAMgC,IAAOhC,EAAG,aAAa,YAAY;AACzC,MAAIgC,EAAM,QAAOnC,EAASmC,CAAI;AAE9B,QAAMC,IAAajC,EAAG,aAAa,iBAAiB;AACpD,MAAIiC,GAAY;AACd,UAAMC,IAASlC,EAAG,cAAc,eAAeiC,CAAU;AACzD,QAAIC,EAAQ,QAAOrC,EAASqC,EAAO,eAAe,EAAE;AAAA,EACtD;AACA,MAAIlC,EAAG,IAAI;AACT,UAAMmC,IAAQnC,EAAG,cAAc,cAAc,cAAc,IAAI,OAAOA,EAAG,EAAE,CAAC,IAAI;AAChF,QAAImC,EAAO,QAAOtC,EAASsC,EAAM,eAAe,EAAE;AAAA,EACpD;AACA,QAAMC,IAAMpC,EAAG,aAAa,KAAK,KAAKA,EAAG,aAAa,OAAO;AAC7D,SAAOoC,IAAMvC,EAASuC,CAAG,IAAI;AAC/B;AAEA,SAASC,EAAWrC,GAAiBsC,GAAyC;AAC5E,QAAMC,IAAW,iBAAiBvC,CAAE,GAC9BwC,IAA8B,CAAA;AACpC,aAAWC,KAAQH,GAAO;AACxB,UAAMI,IAAQH,EAAS;AAAA,MACrBE,EAAK,QAAQ,UAAU,CAACxC,MAAM,IAAIA,EAAE,YAAA,CAAa,EAAE;AAAA,IAAA;AAErD,IAAKL,EAAO,IAAI8C,EAAM,KAAA,CAAM,MAAGF,EAAIC,CAAI,IAAIC,EAAM,KAAA;AAAA,EACnD;AACA,SAAOF;AACT;AAUO,SAASG,EAAa3C,GAAiB4C,IAAwB,IAAiB;AACrF,QAAMvC,IAAOuC,EAAQ,QAAQ5C,EAAG,cAAc,MACxCmB,IAAQD,EAAUlB,GAAIK,CAAI,GAC1BwC,IAAO7C,EAAG,sBAAA,GACVY,IAASZ,EAAG,eAEZ8C,IAAqC,CAAA;AAC3C,aAAWC,KAAQ,MAAM,KAAK/C,EAAG,UAAU,EAAG,CAAA8C,EAAWC,EAAK,IAAI,IAAIA,EAAK;AAE3E,SAAO;AAAA,IACL,UAAU3C,EAAeJ,GAAIK,CAAI;AAAA,IACjC,MAAMe,EAAWD,CAAK;AAAA,IACtB,KAAKnB,EAAG,QAAQ,YAAA;AAAA,IAChB,MAAMwB,EAASxB,CAAE;AAAA,IACjB,IAAIA,EAAG,MAAM;AAAA,IACb,SAAS,MAAM,KAAKA,EAAG,SAAS;AAAA,IAChC,MAAMA,EAAG,aAAa,MAAM,KAAK;AAAA,IACjC,OAAO+B,EAAQ/B,CAAE;AAAA,IACjB,MAAMH,EAASG,EAAG,eAAe,EAAE;AAAA,IACnC,WAAWA,EAAG;AAAA,IACd,WAAWA,EAAG;AAAA,IACd,YAAA8C;AAAA,IACA,SAAS,EAAE,GAAG9C,EAAG,QAAA;AAAA,IACjB,WAAWmB;AAAA,IACX,OAAO,KAAK,IAAIA,EAAM,SAAS,GAAG,CAAC;AAAA,IACnC,OAAOP,IAAS,MAAM,KAAKA,EAAO,QAAQ,EAAE,QAAQZ,CAAE,IAAI,IAAI;AAAA,IAC9D,UAAUY,IAASA,EAAO,SAAS,SAAS;AAAA,IAC5C,UAAUZ,EAAG,SAAS;AAAA,IACtB,MAAM,EAAE,GAAG6C,EAAK,GAAG,GAAGA,EAAK,GAAG,OAAOA,EAAK,OAAO,QAAQA,EAAK,OAAA;AAAA,IAC9D,QAAQR,EAAWrC,GAAI4C,EAAQ,cAAcjD,CAAW;AAAA,IACxD,OAAO+B,EAAU1B,CAAE;AAAA,EAAA;AAEvB;AAEA,MAAMgD,IAAY,oBAAI,IAAI,CAAC,QAAQ,QAAQ,MAAM,OAAO,SAAS,MAAM,OAAO,SAAS,QAAQ,QAAQ,SAAS,UAAU,SAAS,KAAK,CAAC;AAMlI,SAASC,EAAWC,GAAcC,IAAS,MAAc;AAhTzD,MAAAC,GAAAC;AAiTL,QAAMC,IAASJ,EACZ,QAAQ,UAAU,IAAI,EACtB,MAAM,WAAW,EACjB,IAAI,CAACK,MAAMA,EAAE,MAAM,EACnB,OAAO,OAAO,GAEXC,IAAkB,CAAA;AACxB,MAAIC,IAAQ;AAEZ,aAAWC,KAASJ,GAAQ;AAC1B,UAAMK,IAAQD,EAAM,WAAW,GAAG,GAC5BE,IAAUF,EAAM,WAAW,IAAI,GAC/B/C,IAAMgD,KAAQN,KAAAD,IAAA,uBAAuB,KAAKM,CAAK,MAAjC,gBAAAN,EAAqC,OAArC,gBAAAC,EAAyC,gBAAgB,QACvEQ,IAAcF,MAAUD,EAAM,SAAS,IAAI,MAAM/C,IAAMqC,EAAU,IAAIrC,CAAG,IAAI;AAElF,IAAIiD,MAASH,IAAQ,KAAK,IAAIA,IAAQ,GAAG,CAAC,IAC1CD,EAAM,KAAKL,EAAO,OAAOM,CAAK,IAAIC,CAAK,GACnCC,KAAS,CAACC,KAAW,CAACC,KAAe,CAACH,EAAM,WAAW,IAAI,KAAGD;AAAA,EACpE;AAEA,SAAOD,EAAM,KAAK;AAAA,CAAI;AACxB;"}

package/dist/components/element-picker/types.d.ts

@@ -0,0 +1,72 @@
+/** What kind of thing the element is, judged from its tag, role and content. */
+export type ElementKind = 'input' | 'button' | 'link' | 'media' | 'heading' | 'text' | 'list' | 'table' | 'form' | 'landmark' | 'container';
+/** One rung of the ancestor chain, root-first. */
+export interface ElementPathStep {
+    tag: string;
+    id?: string;
+    classes: string[];
+    /** 1-based position among siblings of the same tag. */
+    nth: number;
+}
+/** The form state of an `<input>`/`<textarea>`/`<select>`, when there is one. */
+export interface ElementField {
+    /** `type` for an input, otherwise the tag: `textarea`, `select`. */
+    type: string;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** `<select>` options, as `[value, label]`. */
+    options?: [string, string][];
+}
+/**
+ * Everything we learn about a picked element — plain data, safe to
+ * `JSON.stringify`, post to an API or diff. The live node is kept beside it on
+ * {@link PickedElement}, never in here.
+ */
+export interface ElementInfo {
+    /** A CSS selector that resolves to this element, and only this element. */
+    selector: string;
+    /** The same thing spelled out: `main > section.cards > div.card:nth-of-type(2)`. */
+    path: string;
+    tag: string;
+    kind: ElementKind;
+    id?: string;
+    classes: string[];
+    role?: string;
+    label?: string;
+    /** Visible text, whitespace-collapsed. */
+    text: string;
+    outerHTML: string;
+    innerHTML: string;
+    attributes: Record<string, string>;
+    /** `data-*` attributes, camelCased, as the DOM exposes them. */
+    dataset: Record<string, string>;
+    /** Ancestors from the picker root down to (and including) the element. */
+    hierarchy: ElementPathStep[];
+    /** How deep below the picker root it sits — the root's children are 1. */
+    depth: number;
+    /** 1-based position among *all* siblings. */
+    index: number;
+    siblings: number;
+    children: number;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Computed styles worth reading — see `STYLE_PROPS`. */
+    styles: Record<string, string>;
+    field?: ElementField;
+}
+/** A selected element: the live node, plus what we parsed out of it. */
+export interface PickedElement {
+    /** Stable across re-picks of the same node. */
+    id: string;
+    element: HTMLElement;
+    info: ElementInfo;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/element-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/element-picker/types.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,MAAM,MAAM,WAAW,GACnB,OAAO,GACP,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,UAAU,GACV,WAAW,CAAC;AAEhB,kDAAkD;AAClD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,uDAAuD;IACvD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,iFAAiF;AACjF,MAAM,WAAW,YAAY;IAC3B,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;CAC9B;AAED;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,WAAW,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,0EAA0E;IAC1E,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED,wEAAwE;AACxE,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;CACnB"}

package/dist/components/element-picker/use-element-picker.d.ts

@@ -0,0 +1,56 @@
+import { PickedElement } from './types';
+export interface UseElementPickerOptions {
+    /** The subtree you can pick from. Defaults to `document.body`. */
+    root?: HTMLElement | null;
+    /** Keep picking after the first hit. Default true. */
+    multiple?: boolean;
+    /** Controlled selection. */
+    value?: PickedElement[];
+    defaultValue?: PickedElement[];
+    onChange?: (picked: PickedElement[]) => void;
+    onPick?: (picked: PickedElement) => void;
+    /** Controlled picking mode. */
+    active?: boolean;
+    onActiveChange?: (active: boolean) => void;
+    /**
+     * Which elements may be picked. When an element fails, the picker walks up to
+     * the nearest ancestor that passes — so `(el) => el.matches('.card')` turns it
+     * into a card picker, however deep the pointer actually lands.
+     */
+    filter?: (el: HTMLElement) => boolean;
+    /** Subtrees the picker won't look at — your own toolbar, typically. */
+    ignoreSelector?: string;
+    /** Override which computed properties get captured. */
+    styleProps?: string[];
+    /** Touch: how long to hold before hover mode engages, in ms. Default 350. */
+    holdDelay?: number;
+    /** Touch: movement (px) that reads as a scroll and cancels the hold. Default 12. */
+    moveTolerance?: number;
+    /** Cap the selection. Picking past it drops the oldest. */
+    max?: number;
+}
+export interface UseElementPickerResult {
+    active: boolean;
+    start: () => void;
+    stop: () => void;
+    toggle: () => void;
+    /** What the pointer is over right now — the live preview target. */
+    hovered: HTMLElement | null;
+    /** True while a touch hold has engaged hover mode. */
+    holding: boolean;
+    picked: PickedElement[];
+    pick: (el: HTMLElement) => void;
+    remove: (id: string) => void;
+    clear: () => void;
+    isPicked: (el: HTMLElement) => boolean;
+    root: HTMLElement | null;
+    /** Put this on any UI of your own that must stay clickable while picking. */
+    ignoreProps: Record<string, string>;
+}
+/**
+ * The machinery behind {@link ElementPicker}: hover tracking, click-to-select,
+ * and the press-and-hold gesture that turns a touchscreen — which has no hover
+ * — into one. Use it directly when you want the behaviour without the overlay.
+ */
+export declare function useElementPicker(options?: UseElementPickerOptions): UseElementPickerResult;
+//# sourceMappingURL=use-element-picker.d.ts.map

package/dist/components/element-picker/use-element-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-element-picker.d.ts","sourceRoot":"","sources":["../../../src/components/element-picker/use-element-picker.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAc7C,MAAM,WAAW,uBAAuB;IACtC,kEAAkE;IAClE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACtC,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,oEAAoE;IACpE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,sDAAsD;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,IAAI,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACvC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,6EAA6E;IAC7E,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAOD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,uBAA4B,GAAG,sBAAsB,CAiW9F"}