@genn-inc/cluebase-frontend-sdk 0.0.1

package/dist/instrumentation/dom.js

@@ -0,0 +1,640 @@
+export const buildDomPath = (element) => {
+    const segments = [];
+    let current = element;
+    while (current && segments.length < 8) {
+        const tag = current.tagName.toLowerCase();
+        const id = current.id ? `#${current.id}` : "";
+        const className = typeof current.className === "string" && current.className.trim()
+            ? `.${current.className.trim().split(/\s+/).slice(0, 2).join(".")}`
+            : "";
+        segments.unshift(`${tag}${id}${className}`);
+        current = current.parentElement;
+    }
+    return segments.join(" > ");
+};
+export const getTextPreview = (element) => {
+    const text = element.textContent?.trim() ?? "";
+    if (!text) {
+        return null;
+    }
+    return text.slice(0, 120);
+};
+export const getElementClassList = (element) => {
+    if (typeof element.className !== "string") {
+        return null;
+    }
+    const classList = element.className.trim().split(/\s+/).filter(Boolean);
+    return classList.length > 0 ? classList : null;
+};
+export const getElementRole = (element) => {
+    const explicitRole = element.getAttribute("role");
+    if (explicitRole) {
+        return explicitRole;
+    }
+    if (element instanceof HTMLAnchorElement && element.hasAttribute("href")) {
+        return "link";
+    }
+    if (element instanceof HTMLButtonElement) {
+        return "button";
+    }
+    if (element instanceof HTMLSelectElement) {
+        return element.multiple ? "listbox" : "combobox";
+    }
+    if (element instanceof HTMLTextAreaElement) {
+        return "textbox";
+    }
+    if (element instanceof HTMLInputElement) {
+        switch (element.type) {
+            case "button":
+            case "image":
+            case "reset":
+            case "submit":
+                return "button";
+            case "checkbox":
+                return "checkbox";
+            case "radio":
+                return "radio";
+            case "range":
+                return "slider";
+            case "hidden":
+                return null;
+            default:
+                return "textbox";
+        }
+    }
+    if (element.tagName.toLowerCase() === "summary") {
+        return "button";
+    }
+    return null;
+};
+export const getElementPlaceholder = (element) => {
+    if (element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement) {
+        return element.placeholder || null;
+    }
+    return null;
+};
+export const getElementAriaLabel = (element) => {
+    return element.getAttribute("aria-label") || null;
+};
+const getElementTitle = (element) => element.getAttribute("title") || null;
+const normalizeHumanText = (value) => {
+    const normalized = value?.replace(/\s+/g, " ").trim() ?? "";
+    return normalized ? normalized.slice(0, 120) : null;
+};
+const getSelectSelectionLabel = (element) => {
+    const labels = Array.from(element.selectedOptions)
+        .map((option) => normalizeHumanText(option.label || option.textContent))
+        .filter((value) => Boolean(value));
+    const uniqueLabels = Array.from(new Set(labels));
+    if (uniqueLabels.length === 0) {
+        return null;
+    }
+    if (uniqueLabels.length <= 3) {
+        return uniqueLabels.join(", ");
+    }
+    return `${uniqueLabels.slice(0, 3).join(", ")} +${uniqueLabels.length - 3}`;
+};
+const SECTION_CONTAINER_SELECTOR = [
+    "section",
+    "article",
+    "aside",
+    "nav",
+    "main",
+    "form",
+    "fieldset",
+    "dialog",
+    "[role='dialog']",
+    "[role='region']",
+].join(",");
+const SECTION_HEADING_SELECTOR = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "legend",
+].join(",");
+const readSectionHeadingLabel = (container) => {
+    const labelledBy = container.getAttribute("aria-labelledby");
+    if (labelledBy) {
+        const text = readAriaLabelledBy(container);
+        if (text) {
+            return text;
+        }
+    }
+    const headingNode = container.querySelector(SECTION_HEADING_SELECTOR);
+    if (headingNode instanceof Element) {
+        const text = getTextPreview(headingNode);
+        if (text) {
+            return text;
+        }
+    }
+    return (container.getAttribute("aria-label") ||
+        container.getAttribute("title") ||
+        null);
+};
+export const getElementSectionHeading = (element) => {
+    let container = element.closest(SECTION_CONTAINER_SELECTOR);
+    while (container) {
+        const label = readSectionHeadingLabel(container);
+        if (label) {
+            return label;
+        }
+        container =
+            container.parentElement?.closest(SECTION_CONTAINER_SELECTOR) ?? null;
+    }
+    return null;
+};
+const readAriaLabelledBy = (element) => {
+    const labelledBy = element.getAttribute("aria-labelledby");
+    if (!labelledBy) {
+        return null;
+    }
+    const text = labelledBy
+        .split(/\s+/)
+        .map((id) => element.ownerDocument?.getElementById(id))
+        .filter((node) => node instanceof HTMLElement)
+        .map((node) => getTextPreview(node))
+        .filter((value) => Boolean(value))
+        .join(" ")
+        .replace(/\s+/g, " ")
+        .trim();
+    return text || null;
+};
+const getAssociatedLabel = (element) => {
+    if (element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement) {
+        const label = element.labels?.[0]?.textContent?.trim();
+        if (label) {
+            return label.replace(/\s+/g, " ").slice(0, 120);
+        }
+    }
+    const closestLabel = element.closest("label");
+    const closestLabelText = closestLabel?.textContent?.trim();
+    if (closestLabelText) {
+        return closestLabelText.replace(/\s+/g, " ").slice(0, 120);
+    }
+    return null;
+};
+const readElementContentLabel = (element) => {
+    if (element instanceof HTMLSelectElement) {
+        return getSelectSelectionLabel(element);
+    }
+    const ownText = Array.from(element.childNodes)
+        .filter((node) => node.nodeType === Node.TEXT_NODE)
+        .map((node) => node.textContent?.trim() ?? "")
+        .filter((value) => value.length > 0)
+        .join(" ")
+        .trim();
+    if (ownText) {
+        return ownText.slice(0, 120);
+    }
+    const isInteractiveDisplayTarget = element instanceof HTMLButtonElement ||
+        element instanceof HTMLAnchorElement ||
+        element.getAttribute("role") === "button" ||
+        element.getAttribute("role") === "link";
+    const descendantCandidates = Array.from(element.querySelectorAll("label, p, span, strong, em, small, button, a, [role='button'], [role='link']"))
+        .map((candidate) => candidate.textContent?.trim() ?? "")
+        .map((value) => value.replace(/\s+/g, " ").trim())
+        .filter((value) => value.length > 0 && value.length <= 80);
+    if (isInteractiveDisplayTarget && descendantCandidates.length > 0) {
+        return descendantCandidates[0] ?? null;
+    }
+    if (descendantCandidates.length > 0) {
+        descendantCandidates.sort((left, right) => {
+            const leftWordCount = left.split(/\s+/).length;
+            const rightWordCount = right.split(/\s+/).length;
+            if (leftWordCount !== rightWordCount) {
+                return leftWordCount - rightWordCount;
+            }
+            return left.length - right.length;
+        });
+        return descendantCandidates[0] ?? null;
+    }
+    return getTextPreview(element);
+};
+const readNativeHostLabel = (element) => {
+    const associatedLabel = getAssociatedLabel(element);
+    if (associatedLabel) {
+        return associatedLabel;
+    }
+    if (element instanceof HTMLButtonElement ||
+        (element instanceof HTMLInputElement &&
+            ["button", "submit", "reset"].includes(element.type))) {
+        const value = element.getAttribute("value");
+        if (value?.trim()) {
+            return value.trim().replace(/\s+/g, " ").slice(0, 120);
+        }
+    }
+    if (element instanceof HTMLImageElement) {
+        const alt = element.getAttribute("alt");
+        if (alt?.trim()) {
+            return alt.trim().replace(/\s+/g, " ").slice(0, 120);
+        }
+    }
+    return null;
+};
+/**
+ * 要素の名前を **1 本**に決めます。
+ *
+ * 順序は W3C の名前算出 (Accessible Name Computation) に従います。
+ * `aria-labelledby` → `aria-label` → 対応ラベル / `alt` → 要素内の文言 → `title`。
+ * **自前の優先順を作ってはいけません。** 顧客の画面を読み上げる道具が名乗る名前と
+ * 食い違う名前を保管すると、行動の名付けが「利用者が見ている名前」から離れます。
+ *
+ * 生の候補を並べて持たないのも同じ理由です。どれを採るかを後段でもう一度決めると、
+ * 決め方が 2 つになります。
+ */
+export const getAccessibleName = (element) => {
+    const labelledBy = readAriaLabelledBy(element);
+    if (labelledBy) {
+        return { name: labelledBy.slice(0, 120), source: "aria_labelledby" };
+    }
+    const ariaLabel = getElementAriaLabel(element);
+    if (ariaLabel?.trim()) {
+        return { name: ariaLabel.trim().slice(0, 120), source: "aria_label" };
+    }
+    const nativeLabel = readNativeHostLabel(element);
+    if (nativeLabel) {
+        return { name: nativeLabel, source: "native_label" };
+    }
+    const content = readElementContentLabel(element);
+    if (content) {
+        return { name: content, source: "content" };
+    }
+    const title = getElementTitle(element);
+    if (title?.trim()) {
+        return { name: title.trim().replace(/\s+/g, " ").slice(0, 120), source: "title" };
+    }
+    return null;
+};
+export const getElementLabel = (element) => getAccessibleName(element)?.name ?? null;
+// 祖先の並びは深さと長さの両方で止めます。深い画面ほど並びが伸びるため、
+// 深さだけで止めると 1 件あたりの大きさが顧客の画面構造に引きずられます。
+const MAX_ANCESTOR_CHAIN_DEPTH = 6;
+const MAX_ANCESTOR_CHAIN_LENGTH = 200;
+/**
+ * 押された要素の**祖先の並び**。`main > form[role=search] > button` の形で返します。
+ *
+ * 綴りは**機械が決めた値だけ**で作ります (要素の種類と役割)。顧客が書いた文言を
+ * 混ぜないので、文言を伏せた状態でも「画面のどのまとまりの中の操作か」が残ります。
+ */
+export const getAncestorChain = (element) => {
+    const segments = [];
+    let current = element.parentElement;
+    while (current && segments.length < MAX_ANCESTOR_CHAIN_DEPTH) {
+        if (current instanceof HTMLHtmlElement) {
+            break;
+        }
+        const tag = current.tagName.toLowerCase();
+        const role = current.getAttribute("role");
+        segments.unshift(role ? `${tag}[role=${role}]` : tag);
+        current = current.parentElement;
+    }
+    if (segments.length === 0) {
+        return null;
+    }
+    return segments.join(" > ").slice(0, MAX_ANCESTOR_CHAIN_LENGTH);
+};
+/** 画面の題。頁が何の画面かを表す、顧客が書いた文言です。 */
+export const getDocumentTitle = (element) => normalizeHumanText(element.ownerDocument?.title ?? null);
+/**
+ * 押した後に行く先。`href` を持つ要素はその値を返します。
+ *
+ * 問い合わせ文字列は落とします。**そこに載るのは利用者ごとに違う値**で、
+ * 名前に入れると行動の型が利用者の数だけ増えます。
+ */
+export const getNavigationHref = (element) => {
+    const href = element.getAttribute("href");
+    if (!href?.trim()) {
+        return null;
+    }
+    const trimmed = href.trim();
+    try {
+        const url = new URL(trimmed, element.ownerDocument?.baseURI);
+        return `${url.origin}${url.pathname}`.slice(0, 200);
+    }
+    catch {
+        return trimmed.split("?")[0]?.slice(0, 200) ?? null;
+    }
+};
+const CLICKABLE_DISPLAY_SELECTOR = [
+    "a[href]",
+    "button",
+    "input",
+    "textarea",
+    "select",
+    "summary",
+    "[role='button']",
+    "[role='link']",
+    "[role='menuitem']",
+    "[role='menuitemcheckbox']",
+    "[role='menuitemradio']",
+    "[role='tab']",
+    "[role='switch']",
+    "[role='checkbox']",
+    "[role='radio']",
+    "[role='option']",
+].join(",");
+const CLICK_ACTION_ROLES = new Set([
+    "button",
+    "link",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "tab",
+    "switch",
+    "checkbox",
+    "radio",
+    "option",
+]);
+const PORTALLED_SCOPE_CONTINUATION_SELECTOR = [
+    "[popover]",
+    "[data-slot='calendar']",
+    "[data-slot='command-list']",
+    "[data-slot='dropdown-menu-content']",
+    "[data-slot='popover-content']",
+    "[data-slot='select-content']",
+    "[data-day]",
+    "[role='grid']",
+    "[role='listbox']",
+    "[role='menu']",
+    "[role='tree']",
+    ".rdp-root",
+    ".rdp-months",
+    ".rdp-month",
+    ".rdp-month_grid",
+    ".rdp-day",
+    ".rdp-day_button",
+    ".rdp-button_next",
+    ".rdp-button_previous",
+    "[data-radix-popper-content-wrapper]",
+    "[data-radix-select-content]",
+    "[data-radix-popover-content]",
+    "[data-radix-menu-content]",
+    "[data-side][data-align]",
+].join(",");
+export const resolveClickDisplayTarget = (element) => {
+    const matched = element.closest(CLICKABLE_DISPLAY_SELECTOR);
+    return matched ?? element;
+};
+export const shouldCaptureClickTarget = (element) => {
+    if (element instanceof HTMLHtmlElement ||
+        element instanceof HTMLBodyElement) {
+        return false;
+    }
+    const role = getElementRole(element);
+    if (role && CLICK_ACTION_ROLES.has(role)) {
+        return true;
+    }
+    if (isEditableElement(element)) {
+        return true;
+    }
+    if (getElementLabel(element) ||
+        getElementAriaLabel(element) ||
+        getElementPlaceholder(element) ||
+        getElementTitle(element)) {
+        return true;
+    }
+    return false;
+};
+const SAFE_FALLBACK_STABLE_IDENTIFIER = /^[a-z0-9._:-]{1,80}$/i;
+const toSafeFallbackStableSegment = (value) => {
+    if (!value) {
+        return null;
+    }
+    const normalized = value.trim();
+    if (!normalized || !SAFE_FALLBACK_STABLE_IDENTIFIER.test(normalized)) {
+        return null;
+    }
+    return normalized.toLowerCase();
+};
+const buildCoarsePosition = (element) => {
+    const segments = [];
+    let current = element;
+    let depth = 0;
+    while (current && depth < 4) {
+        const parent = current.parentElement;
+        if (!parent) {
+            break;
+        }
+        const siblings = Array.from(parent.children);
+        const currentTagName = current.tagName;
+        const sameTagSiblings = siblings.filter((child) => child.tagName === currentTagName);
+        const positionIndex = siblings.indexOf(current) + 1;
+        const sameTagIndex = sameTagSiblings.indexOf(current) + 1;
+        segments.unshift(`p${positionIndex}-t${sameTagIndex}`);
+        current = parent;
+        depth += 1;
+    }
+    if (segments.length === 0) {
+        return "root";
+    }
+    return segments.join("/");
+};
+const buildStructuralStableKey = (element) => {
+    const tag = element.tagName.toLowerCase();
+    const role = toSafeFallbackStableSegment(getElementRole(element)) || "none";
+    const inputType = (element instanceof HTMLInputElement && element.type) ||
+        (element instanceof HTMLTextAreaElement && "textarea") ||
+        (element instanceof HTMLSelectElement && "select") ||
+        (element instanceof HTMLElement &&
+            element.isContentEditable &&
+            "contenteditable") ||
+        "na";
+    return `struct:${tag}:${role}:${inputType}:${buildCoarsePosition(element)}`;
+};
+export const getFormKey = (element) => {
+    return toSafeFallbackStableSegment(findParentFormId(element));
+};
+export const resolveStableKeyDescriptor = (element) => {
+    const dataTestId = toSafeFallbackStableSegment(element.getAttribute("data-testid"));
+    if (dataTestId) {
+        return {
+            stableKey: `dtid:${dataTestId}`,
+            stableKeyQuality: "compat",
+            formKey: getFormKey(element),
+        };
+    }
+    const dataQa = toSafeFallbackStableSegment(element.getAttribute("data-qa"));
+    if (dataQa) {
+        return {
+            stableKey: `dqa:${dataQa}`,
+            stableKeyQuality: "compat",
+            formKey: getFormKey(element),
+        };
+    }
+    const safeName = toSafeFallbackStableSegment(element.getAttribute("name"));
+    if (safeName) {
+        return {
+            stableKey: `name:${safeName}`,
+            stableKeyQuality: "structural",
+            formKey: getFormKey(element),
+        };
+    }
+    const safeAriaLabel = toSafeFallbackStableSegment(getElementAriaLabel(element));
+    if (safeAriaLabel) {
+        return {
+            stableKey: `aria:${safeAriaLabel}`,
+            stableKeyQuality: "structural",
+            formKey: getFormKey(element),
+        };
+    }
+    const safeId = toSafeFallbackStableSegment(element.id);
+    if (safeId) {
+        return {
+            stableKey: `id:${safeId}`,
+            stableKeyQuality: "structural",
+            formKey: getFormKey(element),
+        };
+    }
+    return {
+        stableKey: buildStructuralStableKey(element),
+        stableKeyQuality: "structural",
+        formKey: getFormKey(element),
+    };
+};
+export const getStableKey = (element) => {
+    return resolveStableKeyDescriptor(element).stableKey;
+};
+const resolveOwnerForm = (element) => {
+    if (element instanceof HTMLFormElement) {
+        return element;
+    }
+    if (element instanceof HTMLButtonElement ||
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLSelectElement ||
+        element instanceof HTMLTextAreaElement) {
+        return element.form;
+    }
+    const closestForm = element.closest("form");
+    return closestForm instanceof HTMLFormElement ? closestForm : null;
+};
+const resolveDirectInteractionScopeDescriptor = (element) => {
+    const form = resolveOwnerForm(element);
+    if (form) {
+        return {
+            interactionScopeKind: "form",
+            interactionScopeKey: `form:${resolveStableKeyDescriptor(form).stableKey}`,
+        };
+    }
+    const fieldset = element.closest("fieldset");
+    if (fieldset instanceof HTMLFieldSetElement) {
+        return {
+            interactionScopeKind: "fieldset",
+            interactionScopeKey: `fieldset:${resolveStableKeyDescriptor(fieldset).stableKey}`,
+        };
+    }
+    if (element.closest(PORTALLED_SCOPE_CONTINUATION_SELECTOR)) {
+        return null;
+    }
+    const dialog = element.closest("dialog, [role='dialog']");
+    if (dialog instanceof Element) {
+        return {
+            interactionScopeKind: "dialog",
+            interactionScopeKey: `dialog:${resolveStableKeyDescriptor(dialog).stableKey}`,
+        };
+    }
+    return null;
+};
+const escapeAttributeValue = (value) => value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+const resolveControlledPortalScopeDescriptor = (element) => {
+    const portal = element.closest(PORTALLED_SCOPE_CONTINUATION_SELECTOR);
+    const portalId = portal?.id || element.id || null;
+    if (!portalId || !element.ownerDocument) {
+        return null;
+    }
+    const escapedId = escapeAttributeValue(portalId);
+    const controller = element.ownerDocument.querySelector(`[aria-controls="${escapedId}"], [aria-owns="${escapedId}"]`);
+    if (!(controller instanceof Element)) {
+        return null;
+    }
+    return resolveDirectInteractionScopeDescriptor(controller);
+};
+export const resolveInteractionScopeDescriptor = (element) => resolveDirectInteractionScopeDescriptor(element) ??
+    resolveControlledPortalScopeDescriptor(element);
+export const extractFieldName = (element) => {
+    if (element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement) {
+        return (element.getAttribute("name") ||
+            element.getAttribute("id") ||
+            element.getAttribute("aria-label") ||
+            null);
+    }
+    if (element instanceof HTMLElement && element.isContentEditable) {
+        return (element.getAttribute("data-field-name") ||
+            element.getAttribute("aria-label") ||
+            element.getAttribute("id") ||
+            null);
+    }
+    return null;
+};
+export const extractFieldType = (element) => {
+    if (element instanceof HTMLInputElement) {
+        return element.type || "input";
+    }
+    if (element instanceof HTMLTextAreaElement) {
+        return "textarea";
+    }
+    if (element instanceof HTMLSelectElement) {
+        return "select";
+    }
+    if (element instanceof HTMLElement && element.isContentEditable) {
+        return "contenteditable";
+    }
+    return null;
+};
+export const findParentFormId = (element) => {
+    if (element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement) {
+        const form = element.form;
+        return form ? form.id || form.getAttribute("name") || null : null;
+    }
+    if (element instanceof HTMLElement) {
+        const form = element.closest("form");
+        return form instanceof HTMLFormElement
+            ? form.id || form.getAttribute("name") || null
+            : null;
+    }
+    return null;
+};
+export const isEditableElement = (element) => {
+    return Boolean(element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement ||
+        (element instanceof HTMLElement && element.isContentEditable));
+};
+export const getElementValue = (element) => {
+    if (element instanceof HTMLInputElement) {
+        if (element.type === "checkbox") {
+            return element.checked;
+        }
+        if (element.type === "radio") {
+            return element.checked ? element.value : null;
+        }
+        if (element.type === "file") {
+            return {
+                fileCount: element.files?.length ?? 0,
+            };
+        }
+        return element.value;
+    }
+    if (element instanceof HTMLTextAreaElement) {
+        return element.value;
+    }
+    if (element instanceof HTMLSelectElement) {
+        if (element.multiple) {
+            return Array.from(element.selectedOptions).map((option) => option.value);
+        }
+        return element.value;
+    }
+    if (element instanceof HTMLElement && element.isContentEditable) {
+        return element.textContent?.trim() ?? null;
+    }
+    return null;
+};

package/dist/instrumentation/drag.d.ts

@@ -0,0 +1,2 @@
+import type { CaptureModuleContext, CaptureStopHandle } from "../provider/types.js";
+export declare const startDragCapture: (context: CaptureModuleContext) => CaptureStopHandle;