@clue-ai/browser-sdk 0.0.1

package/dist/authoring/toolbar-view.js

@@ -0,0 +1,2584 @@
+import { ChevronDown, ChevronUp, PauseCircle } from "lucide";
+import { SERVICE_LOGO_URL } from "./service-logo";
+import { AUTHORING_ROOT_ATTRIBUTE, AUTHORING_ROOT_ATTRIBUTE_VALUE, markAuthoringRoot, } from "./surface";
+import { AUTHORING_ACTIONS, TOOLBAR_ACTION_BUTTON_SIZE, TOOLBAR_BASE_BUTTON_EDGE_OFFSET, TOOLBAR_BASE_BUTTON_SIZE, TOOLBAR_COLLAPSED_HEIGHT, TOOLBAR_COLLAPSED_WIDTH, TOOLBAR_DOCK_GAP, TOOLBAR_INITIAL_TOP, TOOLBAR_PANEL_HEIGHT, TOOLBAR_PANEL_WIDTH, TOOLBAR_ROOT_ID, TOOLBAR_VIEWPORT_GUTTER, } from "./toolbar-constants";
+import { applyToolbarPosition, clampToolbarPosition, getViewportSize, installToolbarDrag, measureToolbar, } from "./toolbar-drag";
+const toolbarDisposers = new WeakMap();
+const AUTHORING_GLASS_BACKGROUND = "rgba(255,255,255,0.16)";
+const AUTHORING_GLASS_BACKGROUND_STRONG = "rgba(255,253,249,0.2)";
+const AUTHORING_GLASS_BACKGROUND_SOFT = "rgba(255,255,255,0.12)";
+const AUTHORING_GLASS_BORDER = "1px solid rgba(255,255,255,0.24)";
+const AUTHORING_GLASS_BLUR = "saturate(145%) blur(8px)";
+function applyGlassSurfaceStyles(element, variant = "default") {
+    element.style.background =
+        variant === "strong"
+            ? AUTHORING_GLASS_BACKGROUND_STRONG
+            : variant === "soft"
+                ? AUTHORING_GLASS_BACKGROUND_SOFT
+                : AUTHORING_GLASS_BACKGROUND;
+    element.style.border = AUTHORING_GLASS_BORDER;
+    element.style.backdropFilter = AUTHORING_GLASS_BLUR;
+    element.style.setProperty("-webkit-backdrop-filter", AUTHORING_GLASS_BLUR);
+}
+function createSvgIcon(markup, size) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("aria-hidden", "true");
+    svg.style.display = "block";
+    svg.innerHTML = markup;
+    return svg;
+}
+function createLucideIcon(icon, size) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "1.9");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("aria-hidden", "true");
+    svg.style.display = "block";
+    for (const [tagName, attrs] of icon) {
+        const node = document.createElementNS("http://www.w3.org/2000/svg", tagName);
+        for (const [name, value] of Object.entries(attrs)) {
+            if (value === undefined) {
+                continue;
+            }
+            node.setAttribute(name, String(value));
+        }
+        svg.append(node);
+    }
+    return svg;
+}
+function createFallbackLogo(size) {
+    return createSvgIcon([
+        '<path d="M4.6 6.2c0-.66.54-1.2 1.2-1.2h11.7c.97 0 1.45 1.18.77 1.86l-4.58 4.58a1.2 1.2 0 0 1-1.7 0L7.06 6.9A1.2 1.2 0 0 0 4.6 6.2Z" fill="currentColor"/>',
+        '<path d="M19.4 17.8c0 .66-.54 1.2-1.2 1.2H6.5c-.97 0-1.45-1.18-.77-1.86l4.58-4.58a1.2 1.2 0 0 1 1.7 0l4.93 4.56a1.2 1.2 0 0 0 2.46.68Z" fill="currentColor"/>',
+    ].join(""), size);
+}
+function createServiceLogo(size) {
+    const image = document.createElement("img");
+    image.src = SERVICE_LOGO_URL;
+    image.alt = "";
+    image.width = size;
+    image.height = size;
+    image.decoding = "async";
+    image.setAttribute("aria-hidden", "true");
+    image.style.display = "block";
+    image.style.width = `${size}px`;
+    image.style.height = `${size}px`;
+    image.style.objectFit = "contain";
+    image.style.objectPosition = "center";
+    image.style.flexShrink = "0";
+    image.addEventListener("error", () => {
+        image.replaceWith(createFallbackLogo(size));
+    }, { once: true });
+    return image;
+}
+function escapeAttributeValue(value) {
+    return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function escapeCssIdentifier(value) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(value);
+    }
+    return value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+}
+function buildStructuralPosition(element) {
+    const parent = element.parentElement;
+    if (!parent) {
+        return "root";
+    }
+    const siblings = Array.from(parent.children);
+    const sameTagSiblings = siblings.filter((child) => child.tagName === element.tagName);
+    return `p${siblings.indexOf(element) + 1}-t${sameTagSiblings.indexOf(element) + 1}`;
+}
+function matchesStructuralStableKey(element, stableKey) {
+    const match = /^struct:([^:]+):([^:]+):([^:]+):(.+)$/.exec(stableKey);
+    if (!match) {
+        return false;
+    }
+    const [, tag, role, inputType, position] = match;
+    if (element.tagName.toLowerCase() !== tag.toLowerCase()) {
+        return false;
+    }
+    const elementRole = (element.getAttribute("role") ?? "none").toLowerCase();
+    if (elementRole !== role.toLowerCase()) {
+        return false;
+    }
+    const elementInputType = element instanceof HTMLInputElement
+        ? element.type || "na"
+        : element instanceof HTMLTextAreaElement
+            ? "textarea"
+            : element instanceof HTMLSelectElement
+                ? "select"
+                : element instanceof HTMLElement && element.isContentEditable
+                    ? "contenteditable"
+                    : "na";
+    if (elementInputType.toLowerCase() !== inputType.toLowerCase()) {
+        return false;
+    }
+    return buildStructuralPosition(element) === position;
+}
+function resolveUiTargetIdTargets(uiTargetId) {
+    if (!uiTargetId) {
+        return [];
+    }
+    const escapedId = escapeCssIdentifier(uiTargetId);
+    const escapedValue = escapeAttributeValue(uiTargetId);
+    return Array.from(new Set([
+        ...Array.from(document.querySelectorAll(`#${escapedId}`)),
+        ...Array.from(document.querySelectorAll(`[data-testid="${escapedValue}"]`)),
+        ...Array.from(document.querySelectorAll(`[data-qa="${escapedValue}"]`)),
+    ].filter((candidate) => candidate instanceof HTMLElement)));
+}
+function resolveStableKeyTargets(stableKey) {
+    if (!stableKey) {
+        return [];
+    }
+    const [prefix, ...rest] = stableKey.split(":");
+    const value = rest.join(":");
+    if (!value) {
+        return [];
+    }
+    const escapedValue = escapeAttributeValue(value);
+    switch (prefix) {
+        case "dtid":
+            return Array.from(document.querySelectorAll(`[data-testid="${escapedValue}"]`));
+        case "dqa":
+            return Array.from(document.querySelectorAll(`[data-qa="${escapedValue}"]`));
+        case "name":
+            return Array.from(document.querySelectorAll(`[name="${escapedValue}"]`));
+        case "aria":
+            return Array.from(document.querySelectorAll(`[aria-label="${escapedValue}"]`));
+        case "struct":
+            return Array.from(document.querySelectorAll(value.split(":")[0] || "*")).filter((element) => matchesStructuralStableKey(element, stableKey));
+        default:
+            return [];
+    }
+}
+function getEntryAnchorAtom(entry) {
+    return (entry.actionUnit.atoms.find((atom) => atom.event_role === "anchor" && (atom.stable_key || atom.ui_target_id)) ??
+        entry.actionUnit.atoms.find((atom) => atom.stable_key || atom.ui_target_id) ??
+        null);
+}
+function readAtomRawProperties(record) {
+    return record && typeof record === "object" && !Array.isArray(record)
+        ? record
+        : null;
+}
+function readStringAttribute(record, keys) {
+    for (const key of keys) {
+        const value = record?.[key];
+        if (typeof value === "string" && value.trim().length > 0) {
+            return value.trim();
+        }
+    }
+    return null;
+}
+function normalizeComparableLabel(value) {
+    if (!value) {
+        return null;
+    }
+    const normalized = value
+        .trim()
+        .replace(/\s+/g, " ")
+        .replace(/[·•]/g, " ")
+        .toLowerCase();
+    return normalized.length > 0 ? normalized : null;
+}
+function readElementComparableLabel(element) {
+    return (normalizeComparableLabel(element.getAttribute("aria-label")) ??
+        normalizeComparableLabel(element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement
+            ? element.placeholder
+            : null) ??
+        normalizeComparableLabel(element.textContent));
+}
+function buildEntryTargetSignature(entry) {
+    const anchorAtom = getEntryAnchorAtom(entry);
+    const attributes = readAtomRawProperties(anchorAtom?.raw_properties_json);
+    const targetRecord = attributes?.target && typeof attributes.target === "object" && !Array.isArray(attributes.target)
+        ? attributes.target
+        : null;
+    return {
+        uiTargetId: entry.actionUnit.primary_ui_target_id ?? anchorAtom?.ui_target_id ?? null,
+        stableKey: anchorAtom?.stable_key ?? null,
+        tag: readStringAttribute(attributes, ["element_tag", "tag"]) ??
+            readStringAttribute(targetRecord, ["element_tag", "tag"]),
+        role: readStringAttribute(attributes, ["element_role", "role"]) ??
+            readStringAttribute(targetRecord, ["element_role", "role"]),
+        label: normalizeComparableLabel(readStringAttribute(attributes, [
+            "target_label",
+            "ui_target_display_name",
+            "field_label",
+            "button_text",
+            "visible_text",
+            "aria_label",
+            "placeholder",
+        ]) ??
+            readStringAttribute(targetRecord, [
+                "target_label",
+                "ui_target_display_name",
+                "field_label",
+                "button_text",
+                "label",
+                "text",
+                "aria_label",
+                "placeholder",
+            ])),
+    };
+}
+function queryLabelTargets(label) {
+    if (!label) {
+        return [];
+    }
+    return Array.from(document.querySelectorAll('button, a, input, textarea, select, [role="button"], [aria-label], [placeholder]')).filter((element) => readElementComparableLabel(element) === label);
+}
+function scoreTargetCandidate(candidate, signature) {
+    let score = 0;
+    if (signature.uiTargetId) {
+        if (candidate.id === signature.uiTargetId) {
+            score += 8;
+        }
+        if (candidate.getAttribute("data-testid") === signature.uiTargetId ||
+            candidate.getAttribute("data-qa") === signature.uiTargetId) {
+            score += 8;
+        }
+    }
+    if (signature.stableKey?.startsWith("name:")) {
+        const nameValue = signature.stableKey.slice("name:".length);
+        if (candidate.getAttribute("name") === nameValue) {
+            score += 6;
+        }
+    }
+    if (signature.stableKey?.startsWith("aria:")) {
+        const ariaValue = signature.stableKey.slice("aria:".length);
+        if (candidate.getAttribute("aria-label") === ariaValue) {
+            score += 6;
+        }
+    }
+    if (signature.tag && candidate.tagName.toLowerCase() === signature.tag.toLowerCase()) {
+        score += 2;
+    }
+    if (signature.role && (candidate.getAttribute("role") ?? "").toLowerCase() === signature.role.toLowerCase()) {
+        score += 2;
+    }
+    if (signature.label && readElementComparableLabel(candidate) === signature.label) {
+        score += 4;
+    }
+    const rect = candidate.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+        score += 1;
+    }
+    return score;
+}
+function normalizeComparablePath(value) {
+    if (!value) {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return null;
+    }
+    let pathname = trimmed;
+    try {
+        pathname = new URL(trimmed, window.location.origin).pathname;
+    }
+    catch {
+        pathname = trimmed.split("#")[0]?.split("?")[0] ?? trimmed;
+    }
+    if (!pathname.startsWith("/")) {
+        return null;
+    }
+    if (pathname.length > 1 && pathname.endsWith("/")) {
+        return pathname.slice(0, -1);
+    }
+    return pathname || "/";
+}
+function entryMatchesCurrentScreen(entry) {
+    const anchorAtom = getEntryAnchorAtom(entry);
+    const currentPath = normalizeComparablePath(window.location.pathname);
+    if (!currentPath) {
+        return false;
+    }
+    const screenCandidates = [
+        anchorAtom?.screen_key ?? null,
+        anchorAtom?.url_canonical ?? null,
+        entry.actionUnit.route_from ?? null,
+    ]
+        .map((candidate) => normalizeComparablePath(candidate))
+        .filter((candidate) => candidate !== null);
+    if (screenCandidates.length === 0) {
+        return false;
+    }
+    return screenCandidates.includes(currentPath);
+}
+function resolveEntryTarget(entry) {
+    if (!entryMatchesCurrentScreen(entry)) {
+        return null;
+    }
+    const anchorAtom = getEntryAnchorAtom(entry);
+    const signature = buildEntryTargetSignature(entry);
+    const primaryUiTargets = resolveUiTargetIdTargets(entry.actionUnit.primary_ui_target_id);
+    const anchorUiTargets = resolveUiTargetIdTargets(anchorAtom?.ui_target_id);
+    const stableKeyTargets = resolveStableKeyTargets(anchorAtom?.stable_key ?? null);
+    const labelTargets = queryLabelTargets(signature.label);
+    const uniqueUiTarget = primaryUiTargets.length === 1
+        ? primaryUiTargets[0]
+        : anchorUiTargets.length === 1
+            ? anchorUiTargets[0]
+            : null;
+    const uniqueStableTarget = stableKeyTargets.length === 1 &&
+        stableKeyTargets[0] instanceof HTMLElement
+        ? stableKeyTargets[0]
+        : null;
+    if (uniqueUiTarget && uniqueStableTarget && uniqueUiTarget !== uniqueStableTarget) {
+        return null;
+    }
+    if (uniqueUiTarget) {
+        return uniqueUiTarget;
+    }
+    if (uniqueStableTarget) {
+        return uniqueStableTarget;
+    }
+    const candidatePool = Array.from(new Set([
+        ...primaryUiTargets.filter((candidate) => candidate instanceof HTMLElement),
+        ...anchorUiTargets.filter((candidate) => candidate instanceof HTMLElement),
+        ...stableKeyTargets.filter((candidate) => candidate instanceof HTMLElement),
+        ...labelTargets,
+    ]));
+    if (candidatePool.length === 0) {
+        return null;
+    }
+    const scored = candidatePool
+        .map((candidate) => ({
+        candidate,
+        score: scoreTargetCandidate(candidate, signature),
+    }))
+        .filter((entryScore) => entryScore.score >= 6)
+        .sort((left, right) => right.score - left.score);
+    const best = scored[0] ?? null;
+    const second = scored[1] ?? null;
+    if (!best) {
+        return null;
+    }
+    if (second && second.score === best.score) {
+        return null;
+    }
+    return best.candidate;
+}
+function parseNumericZIndex(value) {
+    if (!value || value === "auto") {
+        return null;
+    }
+    const parsed = Number.parseInt(value, 10);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function readEffectiveZIndex(element) {
+    let maxValue = 0;
+    let current = element;
+    while (current) {
+        const computed = window.getComputedStyle(current);
+        const zIndex = parseNumericZIndex(computed.zIndex);
+        if (zIndex !== null) {
+            maxValue = Math.max(maxValue, zIndex);
+        }
+        current = current.parentElement;
+    }
+    return maxValue;
+}
+function readElementSurfaceTitle(root) {
+    const directTitle = root.getAttribute("aria-label")?.trim() ||
+        root.getAttribute("title")?.trim() ||
+        root.getAttribute("data-title")?.trim();
+    if (directTitle) {
+        return directTitle;
+    }
+    const labelledBy = root.getAttribute("aria-labelledby");
+    if (labelledBy) {
+        for (const id of labelledBy.split(/\s+/).filter(Boolean)) {
+            const labelledElement = document.getElementById(id);
+            if (labelledElement?.textContent?.trim()) {
+                return labelledElement.textContent.trim();
+            }
+        }
+    }
+    const titleCandidate = root.querySelector('h1, h2, h3, h4, h5, h6, [aria-current="page"], [aria-selected="true"], [data-title]');
+    return titleCandidate?.textContent?.trim() || null;
+}
+function inferSurfaceContextKind(root) {
+    const role = (root.getAttribute("role") ?? "").trim().toLowerCase();
+    const dataSide = root.getAttribute("data-side")?.trim().toLowerCase() ?? null;
+    const computed = window.getComputedStyle(root);
+    const isPortalSurface = root.parentElement === document.body || root.parentElement === document.documentElement;
+    const isFloating = (computed.position === "fixed" || computed.position === "absolute") &&
+        readEffectiveZIndex(root) > 0;
+    if (role === "dialog" || role === "alertdialog" || root.getAttribute("aria-modal") === "true") {
+        if (dataSide === "left" || dataSide === "right") {
+            return "drawer";
+        }
+        if (dataSide === "top" || dataSide === "bottom") {
+            return "sheet";
+        }
+        return "dialog";
+    }
+    if (role === "menu" || role === "listbox") {
+        return "dropdown";
+    }
+    if (root.getAttribute("popover") !== null || role === "tooltip") {
+        return "popover";
+    }
+    if (isFloating && isPortalSurface) {
+        const rect = root.getBoundingClientRect();
+        if (rect.width >= window.innerWidth * 0.9 && rect.height >= window.innerHeight * 0.9) {
+            return "overlay";
+        }
+        return "portal";
+    }
+    return "unknown";
+}
+const GENERATED_SURFACE_IDS = new WeakMap();
+let generatedSurfaceId = 0;
+function resolveGeneratedSurfaceId(root) {
+    const existing = GENERATED_SURFACE_IDS.get(root);
+    if (existing) {
+        return existing;
+    }
+    generatedSurfaceId += 1;
+    const next = `surface-${generatedSurfaceId}`;
+    GENERATED_SURFACE_IDS.set(root, next);
+    return next;
+}
+function isHighlightCandidateElement(element) {
+    if (element.closest(`[${AUTHORING_ROOT_ATTRIBUTE}="${AUTHORING_ROOT_ATTRIBUTE_VALUE}"]`)) {
+        return false;
+    }
+    const computed = window.getComputedStyle(element);
+    if (computed.display === "none" || computed.visibility === "hidden") {
+        return false;
+    }
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+}
+function resolveSurfaceContext(element) {
+    const surfaces = [];
+    let current = element;
+    while (current) {
+        const kind = inferSurfaceContextKind(current);
+        if (kind !== "unknown") {
+            surfaces.push(current);
+        }
+        current = current.parentElement;
+    }
+    const nearest = surfaces[0] ?? null;
+    if (!nearest) {
+        return {
+            kind: "page",
+            root: null,
+            rootId: `page:${normalizeComparablePath(window.location.pathname) ?? "/"}`,
+            depth: 0,
+            title: document.title || null,
+            isPortalSurface: false,
+            effectiveZIndex: 0,
+        };
+    }
+    const kind = inferSurfaceContextKind(nearest);
+    const title = readElementSurfaceTitle(nearest);
+    const directId = nearest.id.trim() ||
+        nearest.getAttribute("data-surface-id")?.trim() ||
+        nearest.getAttribute("aria-label")?.trim() ||
+        title ||
+        resolveGeneratedSurfaceId(nearest);
+    return {
+        kind,
+        root: nearest,
+        rootId: `${kind}:${normalizeComparableLabel(directId) ?? directId}`,
+        depth: surfaces.length,
+        title,
+        isPortalSurface: nearest.parentElement === document.body ||
+            nearest.parentElement === document.documentElement,
+        effectiveZIndex: readEffectiveZIndex(nearest),
+    };
+}
+function readStableAttributesFromElement(element) {
+    const attributes = [];
+    const specs = [
+        ["id", element.id || null],
+        ["name", element.getAttribute("name")],
+        ["aria-label", element.getAttribute("aria-label")],
+        ["placeholder", element.getAttribute("placeholder")],
+        ["data-testid", element.getAttribute("data-testid")],
+        ["data-qa", element.getAttribute("data-qa")],
+    ];
+    for (const [kind, value] of specs) {
+        if (value && value.trim()) {
+            attributes.push({ kind, value: value.trim() });
+        }
+    }
+    return attributes;
+}
+function buildContainerSignature(element) {
+    const tokens = [];
+    let current = element.parentElement;
+    while (current && tokens.length < 3) {
+        if (current.closest(`[${AUTHORING_ROOT_ATTRIBUTE}="${AUTHORING_ROOT_ATTRIBUTE_VALUE}"]`)) {
+            break;
+        }
+        const tag = current.tagName.toLowerCase();
+        const role = (current.getAttribute("role") ?? "").trim().toLowerCase();
+        tokens.push(role ? `${tag}:${role}` : tag);
+        current = current.parentElement;
+    }
+    return tokens.length > 0 ? tokens.join(">") : null;
+}
+function buildHighlightCandidate(element) {
+    const surface = resolveSurfaceContext(element);
+    return {
+        element,
+        surfaceContextKind: surface.kind,
+        surfaceRootId: surface.rootId,
+        surfaceDepth: surface.depth,
+        surfaceTitle: surface.title,
+        isPortalSurface: surface.isPortalSurface,
+        tagName: element.tagName.toLowerCase(),
+        role: (element.getAttribute("role") ?? "").trim().toLowerCase() || null,
+        uiTargetId: element.id ||
+            element.getAttribute("data-testid") ||
+            element.getAttribute("data-qa"),
+        stableKey: null,
+        stableAttributes: readStableAttributesFromElement(element),
+        normalizedText: readElementComparableLabel(element),
+        ariaLabel: normalizeComparableLabel(element.getAttribute("aria-label")),
+        placeholder: normalizeComparableLabel(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement
+            ? element.placeholder
+            : null),
+        containerSignature: buildContainerSignature(element),
+        effectiveZIndex: readEffectiveZIndex(element),
+    };
+}
+function collectHighlightCandidates() {
+    return Array.from(document.querySelectorAll('button, a, input, textarea, select, [role], [tabindex], [contenteditable="true"], summary'))
+        .filter((element) => isHighlightCandidateElement(element))
+        .map(buildHighlightCandidate);
+}
+function buildSurfaceAwareSignature(entry) {
+    const baseSignature = buildEntryTargetSignature(entry);
+    const anchorAtom = getEntryAnchorAtom(entry);
+    const attributes = readAtomRawProperties(anchorAtom?.raw_properties_json);
+    const stableAttributes = [];
+    const pushAttribute = (kind, value) => {
+        if (value && value.trim()) {
+            stableAttributes.push({ kind, value: value.trim() });
+        }
+    };
+    pushAttribute("name", anchorAtom?.stable_key?.startsWith("name:")
+        ? anchorAtom.stable_key.slice("name:".length)
+        : null);
+    pushAttribute("aria-label", anchorAtom?.stable_key?.startsWith("aria:")
+        ? anchorAtom.stable_key.slice("aria:".length)
+        : null);
+    pushAttribute("name", readStringAttribute(attributes, ["name"]));
+    pushAttribute("aria-label", readStringAttribute(attributes, ["aria_label", "accessibility_label"]));
+    pushAttribute("placeholder", readStringAttribute(attributes, ["placeholder", "placeholder_text"]));
+    pushAttribute("data-testid", readStringAttribute(attributes, ["data_testid", "test_id"]));
+    pushAttribute("data-qa", readStringAttribute(attributes, ["data_qa", "qa_key"]));
+    return {
+        ...baseSignature,
+        stableAttributes,
+        containerSignature: readStringAttribute(attributes, ["container_signature"]) ?? null,
+        ariaLabel: normalizeComparableLabel(readStringAttribute(attributes, ["aria_label", "accessibility_label"])),
+        placeholder: normalizeComparableLabel(readStringAttribute(attributes, ["placeholder", "placeholder_text"])),
+    };
+}
+function matchStableAttribute(candidate, attribute) {
+    return candidate.stableAttributes.some((candidateAttribute) => candidateAttribute.kind === attribute.kind &&
+        normalizeComparableLabel(candidateAttribute.value) ===
+            normalizeComparableLabel(attribute.value));
+}
+function deriveExpectedSurfaceContext(candidates) {
+    const first = candidates[0] ?? null;
+    if (!first) {
+        return null;
+    }
+    if (candidates.every((candidate) => candidate.surfaceRootId === first.surfaceRootId)) {
+        return {
+            rootId: first.surfaceRootId,
+            kind: first.surfaceContextKind,
+            title: first.surfaceTitle,
+            effectiveZIndex: first.effectiveZIndex,
+        };
+    }
+    if (candidates.every((candidate) => candidate.surfaceContextKind === first.surfaceContextKind &&
+        candidate.surfaceTitle === first.surfaceTitle)) {
+        return {
+            rootId: null,
+            kind: first.surfaceContextKind,
+            title: first.surfaceTitle,
+            effectiveZIndex: first.effectiveZIndex,
+        };
+    }
+    if (candidates.every((candidate) => candidate.surfaceContextKind === first.surfaceContextKind)) {
+        return {
+            rootId: null,
+            kind: first.surfaceContextKind,
+            title: null,
+            effectiveZIndex: first.effectiveZIndex,
+        };
+    }
+    return null;
+}
+function scoreSurfaceAwareCandidate(candidate, signature, expectedSurface) {
+    let score = scoreTargetCandidate(candidate.element, signature);
+    if (signature.uiTargetId && candidate.uiTargetId === signature.uiTargetId) {
+        score += 12;
+    }
+    for (const attribute of signature.stableAttributes) {
+        if (matchStableAttribute(candidate, attribute)) {
+            score += 10;
+        }
+    }
+    if (signature.tag && candidate.tagName === signature.tag.toLowerCase()) {
+        score += 3;
+    }
+    if (signature.role && candidate.role === signature.role.toLowerCase()) {
+        score += 3;
+    }
+    if (signature.label && candidate.normalizedText === signature.label) {
+        score += 6;
+    }
+    if (signature.ariaLabel && candidate.ariaLabel === signature.ariaLabel) {
+        score += 4;
+    }
+    if (signature.placeholder && candidate.placeholder === signature.placeholder) {
+        score += 4;
+    }
+    if (signature.containerSignature &&
+        candidate.containerSignature === signature.containerSignature) {
+        score += 4;
+    }
+    if (expectedSurface?.title &&
+        candidate.surfaceTitle &&
+        normalizeComparableLabel(expectedSurface.title) ===
+            normalizeComparableLabel(candidate.surfaceTitle)) {
+        score += 4;
+    }
+    if (expectedSurface && candidate.surfaceContextKind === expectedSurface.kind) {
+        score += 3;
+    }
+    if (expectedSurface && candidate.surfaceDepth === 1) {
+        score += 1;
+    }
+    return score;
+}
+function resolveEntryTargetWithSurfaceContext(entry) {
+    const baseTrace = {
+        highlightSurfaceContextKind: "unknown",
+        highlightSurfaceRootId: null,
+        highlightSurfaceTitle: null,
+        candidateCountTotal: 0,
+        candidateCountAfterContextFilter: 0,
+        highlightMatchStage: "init",
+        highlightRenderMode: "none",
+        highlightRejectReason: null,
+        top1Score: null,
+        top2Score: null,
+        usedSameSurfaceFilter: false,
+        overlayZIndex: null,
+        targetEffectiveZIndex: null,
+        surfaceEffectiveZIndex: null,
+    };
+    if (!entryMatchesCurrentScreen(entry)) {
+        return {
+            candidate: null,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "context_filter_screen",
+                highlightRejectReason: "screen_mismatch",
+            },
+        };
+    }
+    const anchorAtom = getEntryAnchorAtom(entry);
+    const signature = buildSurfaceAwareSignature(entry);
+    const strongCandidates = [
+        ...resolveUiTargetIdTargets(entry.actionUnit.primary_ui_target_id),
+        ...resolveUiTargetIdTargets(anchorAtom?.ui_target_id),
+        ...resolveStableKeyTargets(anchorAtom?.stable_key ?? null),
+    ]
+        .filter((candidate, index, all) => all.indexOf(candidate) === index)
+        .filter((candidate) => candidate instanceof HTMLElement)
+        .map(buildHighlightCandidate);
+    const expectedSurface = deriveExpectedSurfaceContext(strongCandidates);
+    const totalCandidates = collectHighlightCandidates();
+    baseTrace.candidateCountTotal = totalCandidates.length;
+    let filteredCandidates = totalCandidates;
+    if (expectedSurface?.rootId) {
+        const next = totalCandidates.filter((candidate) => candidate.surfaceRootId === expectedSurface.rootId);
+        if (next.length > 0) {
+            filteredCandidates = next;
+            baseTrace.usedSameSurfaceFilter = true;
+            baseTrace.highlightMatchStage = "context_filter_surface_root";
+        }
+    }
+    else if (expectedSurface?.title) {
+        const next = totalCandidates.filter((candidate) => candidate.surfaceContextKind === expectedSurface.kind &&
+            normalizeComparableLabel(candidate.surfaceTitle) ===
+                normalizeComparableLabel(expectedSurface.title));
+        if (next.length > 0) {
+            filteredCandidates = next;
+            baseTrace.usedSameSurfaceFilter = true;
+            baseTrace.highlightMatchStage = "context_filter_kind_title";
+        }
+    }
+    else if (expectedSurface) {
+        const next = totalCandidates.filter((candidate) => candidate.surfaceContextKind === expectedSurface.kind);
+        if (next.length > 0) {
+            filteredCandidates = next;
+            baseTrace.usedSameSurfaceFilter = true;
+            baseTrace.highlightMatchStage = "context_filter_kind";
+        }
+    }
+    baseTrace.candidateCountAfterContextFilter = filteredCandidates.length;
+    if (filteredCandidates.length === 0) {
+        return {
+            candidate: null,
+            trace: {
+                ...baseTrace,
+                highlightRejectReason: "candidate_not_found",
+            },
+        };
+    }
+    const strictUiMatches = filteredCandidates.filter((candidate) => signature.uiTargetId && candidate.uiTargetId === signature.uiTargetId);
+    if (strictUiMatches.length === 1) {
+        const candidate = strictUiMatches[0];
+        return {
+            candidate,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "strict_ui_target_id",
+                highlightSurfaceContextKind: candidate.surfaceContextKind,
+                highlightSurfaceRootId: candidate.surfaceRootId,
+                highlightSurfaceTitle: candidate.surfaceTitle,
+            },
+        };
+    }
+    if (strictUiMatches.length > 1) {
+        return {
+            candidate: null,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "strict_ui_target_id",
+                highlightRejectReason: "ambiguous_ui_target_id",
+            },
+        };
+    }
+    const strictStableMatches = filteredCandidates.filter((candidate) => signature.stableAttributes.some((attribute) => matchStableAttribute(candidate, attribute)));
+    if (strictStableMatches.length === 1) {
+        const candidate = strictStableMatches[0];
+        return {
+            candidate,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "strict_stable_attributes",
+                highlightSurfaceContextKind: candidate.surfaceContextKind,
+                highlightSurfaceRootId: candidate.surfaceRootId,
+                highlightSurfaceTitle: candidate.surfaceTitle,
+            },
+        };
+    }
+    if (strictStableMatches.length > 1) {
+        return {
+            candidate: null,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "strict_stable_attributes",
+                highlightRejectReason: "ambiguous_stable_attributes",
+            },
+        };
+    }
+    const scored = filteredCandidates
+        .map((candidate) => ({
+        candidate,
+        score: scoreSurfaceAwareCandidate(candidate, signature, expectedSurface),
+    }))
+        .sort((left, right) => right.score - left.score);
+    const top1 = scored[0] ?? null;
+    const top2 = scored[1] ?? null;
+    baseTrace.top1Score = top1?.score ?? null;
+    baseTrace.top2Score = top2?.score ?? null;
+    if (!top1) {
+        return {
+            candidate: null,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "scored_match",
+                highlightRejectReason: "candidate_not_found",
+            },
+        };
+    }
+    if (top1.score < 14) {
+        return {
+            candidate: null,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "scored_match",
+                highlightRejectReason: "below_threshold",
+            },
+        };
+    }
+    if (top2 && top1.score - top2.score < 3) {
+        return {
+            candidate: null,
+            trace: {
+                ...baseTrace,
+                highlightMatchStage: "scored_match",
+                highlightRejectReason: top1.score === top2.score ? "score_tie" : "score_margin_too_small",
+            },
+        };
+    }
+    return {
+        candidate: top1.candidate,
+        trace: {
+            ...baseTrace,
+            highlightMatchStage: "scored_match",
+            highlightSurfaceContextKind: top1.candidate.surfaceContextKind,
+            highlightSurfaceRootId: top1.candidate.surfaceRootId,
+            highlightSurfaceTitle: top1.candidate.surfaceTitle,
+        },
+    };
+}
+function createTargetSpotlight() {
+    const ring = document.createElement("div");
+    markAuthoringRoot(ring);
+    ring.dataset.clueAuthoringTargetHighlight = "true";
+    ring.style.position = "fixed";
+    ring.style.left = "0px";
+    ring.style.top = "0px";
+    ring.style.width = "0px";
+    ring.style.height = "0px";
+    ring.style.borderRadius = "16px";
+    ring.style.border = "1.5px solid rgba(244,150,39,0.95)";
+    ring.style.background = "rgba(255,250,244,0.12)";
+    ring.style.boxShadow =
+        "rgba(255,255,255,0.96) 0px 1px 0px inset, rgba(244,150,39,0.18) 0px 0px 0px 1px, rgba(244,150,39,0.24) 0px 10px 30px";
+    ring.style.pointerEvents = "none";
+    ring.style.opacity = "0";
+    ring.style.transform = "scale(0.98)";
+    ring.style.transition =
+        "opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1)";
+    ring.style.zIndex = "2147483300";
+    const badge = document.createElement("div");
+    markAuthoringRoot(badge);
+    badge.style.position = "fixed";
+    badge.style.left = "0px";
+    badge.style.top = "0px";
+    badge.style.display = "inline-flex";
+    badge.style.alignItems = "center";
+    badge.style.padding = "6px 10px";
+    badge.style.borderRadius = "9999px";
+    badge.style.background = "rgba(255,253,249,0.98)";
+    badge.style.border = "1px solid rgba(244,150,39,0.22)";
+    badge.style.boxShadow =
+        "rgba(255,255,255,0.96) 0px 1px 0px inset, rgba(17,24,39,0.06) 0px 10px 24px";
+    badge.style.fontSize = "11px";
+    badge.style.fontWeight = "600";
+    badge.style.letterSpacing = "0.08em";
+    badge.style.textTransform = "uppercase";
+    badge.style.color = "#8f5b2f";
+    badge.style.pointerEvents = "none";
+    badge.style.opacity = "0";
+    badge.style.transform = "translateY(4px)";
+    badge.style.transition =
+        "opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1)";
+    badge.style.zIndex = "2147483301";
+    badge.textContent = "対象要素";
+    (document.body ?? document.documentElement).append(ring, badge);
+    let activeElement = null;
+    let activeTrace = null;
+    let activeInlineElement = null;
+    const inlineRestoreState = new WeakMap();
+    const hide = () => {
+        ring.style.opacity = "0";
+        ring.style.transform = "scale(0.98)";
+        badge.style.opacity = "0";
+        badge.style.transform = "translateY(4px)";
+    };
+    const clearInlineOutline = () => {
+        if (!activeInlineElement) {
+            return;
+        }
+        const previous = inlineRestoreState.get(activeInlineElement);
+        if (previous) {
+            activeInlineElement.style.outline = previous.outline;
+            activeInlineElement.style.outlineOffset = previous.outlineOffset;
+            activeInlineElement.style.boxShadow = previous.boxShadow;
+        }
+        else {
+            activeInlineElement.style.outline = "";
+            activeInlineElement.style.outlineOffset = "";
+            activeInlineElement.style.boxShadow = "";
+        }
+        inlineRestoreState.delete(activeInlineElement);
+        activeInlineElement = null;
+    };
+    const hasProblematicHighlightAncestors = (element) => {
+        const hasMeaningfulComputedValue = (value) => {
+            const normalized = (value ?? "").trim().toLowerCase();
+            return normalized.length > 0 && normalized !== "none" && normalized !== "auto";
+        };
+        let current = element.parentElement;
+        while (current) {
+            const computed = window.getComputedStyle(current);
+            if (computed.overflowX === "hidden" ||
+                computed.overflowY === "hidden" ||
+                computed.overflowX === "clip" ||
+                computed.overflowY === "clip" ||
+                hasMeaningfulComputedValue(computed.transform) ||
+                hasMeaningfulComputedValue(computed.filter) ||
+                hasMeaningfulComputedValue(computed.backdropFilter) ||
+                hasMeaningfulComputedValue(computed.perspective) ||
+                hasMeaningfulComputedValue(computed.clipPath) ||
+                computed.isolation === "isolate") {
+                return true;
+            }
+            current = current.parentElement;
+        }
+        return false;
+    };
+    const applyInlineOutline = (element) => {
+        clearInlineOutline();
+        inlineRestoreState.set(element, {
+            outline: element.style.outline,
+            outlineOffset: element.style.outlineOffset,
+            boxShadow: element.style.boxShadow,
+        });
+        element.style.outline = "2px solid rgba(244,150,39,0.96)";
+        element.style.outlineOffset = "3px";
+        element.style.boxShadow =
+            "rgba(244,150,39,0.22) 0px 0px 0px 4px, rgba(255,255,255,0.78) 0px 0px 0px 1px";
+        activeInlineElement = element;
+    };
+    const update = () => {
+        if (!activeElement || !activeElement.isConnected) {
+            hide();
+            return;
+        }
+        const rect = activeElement.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+            hide();
+            return;
+        }
+        const ringInset = 8;
+        const left = Math.max(8, rect.left - ringInset);
+        const top = Math.max(8, rect.top - ringInset);
+        const width = rect.width + ringInset * 2;
+        const height = rect.height + ringInset * 2;
+        const badgeTop = top > 42 ? top - 36 : top + height + 8;
+        const badgeLeft = Math.max(8, Math.min(left, window.innerWidth - 120));
+        const surface = resolveSurfaceContext(activeElement);
+        const targetEffectiveZIndex = readEffectiveZIndex(activeElement);
+        const surfaceEffectiveZIndex = surface.effectiveZIndex;
+        const overlayZIndex = Math.max(2147483300, targetEffectiveZIndex, surfaceEffectiveZIndex) + 2;
+        ring.style.left = `${Math.round(left)}px`;
+        ring.style.top = `${Math.round(top)}px`;
+        ring.style.width = `${Math.round(width)}px`;
+        ring.style.height = `${Math.round(height)}px`;
+        ring.style.borderRadius = `${Math.max(12, Math.min(20, height / 4))}px`;
+        ring.style.opacity = "1";
+        ring.style.transform = "scale(1)";
+        ring.style.zIndex = String(overlayZIndex);
+        badge.style.left = `${Math.round(badgeLeft)}px`;
+        badge.style.top = `${Math.round(badgeTop)}px`;
+        badge.style.opacity = "1";
+        badge.style.transform = "translateY(0px)";
+        badge.style.zIndex = String(overlayZIndex + 1);
+        if (activeTrace) {
+            activeTrace.highlightRenderMode = "overlay_box";
+            activeTrace.overlayZIndex = overlayZIndex;
+            activeTrace.targetEffectiveZIndex = targetEffectiveZIndex;
+            activeTrace.surfaceEffectiveZIndex = surfaceEffectiveZIndex;
+        }
+    };
+    const handleViewportChange = () => {
+        window.requestAnimationFrame(update);
+    };
+    window.addEventListener("scroll", handleViewportChange, true);
+    window.addEventListener("resize", handleViewportChange);
+    return {
+        clear() {
+            activeElement = null;
+            activeTrace = null;
+            clearInlineOutline();
+            hide();
+        },
+        focusEntry(entry) {
+            clearInlineOutline();
+            const match = resolveEntryTargetWithSurfaceContext(entry);
+            activeTrace = match.trace;
+            if (!(match.candidate?.element instanceof HTMLElement)) {
+                activeElement = null;
+                hide();
+                return match.trace;
+            }
+            const target = match.candidate.element;
+            activeElement = target;
+            if (typeof target.scrollIntoView === "function") {
+                target.scrollIntoView({
+                    block: "center",
+                    inline: "center",
+                    behavior: "smooth",
+                });
+            }
+            if (hasProblematicHighlightAncestors(target)) {
+                applyInlineOutline(target);
+                hide();
+                match.trace.highlightRenderMode = "inline_outline";
+                match.trace.highlightSurfaceContextKind = match.candidate.surfaceContextKind;
+                match.trace.highlightSurfaceRootId = match.candidate.surfaceRootId;
+                match.trace.highlightSurfaceTitle = match.candidate.surfaceTitle;
+                match.trace.targetEffectiveZIndex = match.candidate.effectiveZIndex;
+                match.trace.surfaceEffectiveZIndex = resolveSurfaceContext(target).effectiveZIndex;
+                match.trace.overlayZIndex = null;
+                return match.trace;
+            }
+            const surface = resolveSurfaceContext(target);
+            const targetEffectiveZIndex = readEffectiveZIndex(target);
+            const surfaceEffectiveZIndex = surface.effectiveZIndex;
+            const overlayZIndex = Math.max(2147483300, targetEffectiveZIndex, surfaceEffectiveZIndex) + 2;
+            match.trace.highlightRenderMode = "overlay_box";
+            match.trace.overlayZIndex = overlayZIndex;
+            match.trace.targetEffectiveZIndex = targetEffectiveZIndex;
+            match.trace.surfaceEffectiveZIndex = surfaceEffectiveZIndex;
+            update();
+            window.requestAnimationFrame(() => {
+                update();
+                window.requestAnimationFrame(update);
+            });
+            return match.trace;
+        },
+        dispose() {
+            clearInlineOutline();
+            window.removeEventListener("scroll", handleViewportChange, true);
+            window.removeEventListener("resize", handleViewportChange);
+            ring.remove();
+            badge.remove();
+        },
+    };
+}
+function getTooltipPlacement(x, y) {
+    if (Math.abs(x) < 4) {
+        return "right";
+    }
+    if (Math.abs(y) > Math.abs(x)) {
+        return y < 0 ? "top" : "bottom";
+    }
+    return x < 0 ? "left" : "right";
+}
+function createActionTooltip(label, placement) {
+    const tooltip = document.createElement("div");
+    tooltip.dataset.clueAuthoringActionTooltip = "true";
+    tooltip.textContent = label;
+    tooltip.setAttribute("aria-hidden", "true");
+    tooltip.style.position = "absolute";
+    tooltip.style.display = "inline-flex";
+    tooltip.style.alignItems = "center";
+    tooltip.style.justifyContent = "center";
+    tooltip.style.width = "max-content";
+    tooltip.style.maxWidth = "176px";
+    tooltip.style.padding = "8px 10px";
+    tooltip.style.borderRadius = "12px";
+    tooltip.style.background = "rgba(255,255,255,0.98)";
+    tooltip.style.border = "1px solid rgba(17,24,39,0.12)";
+    tooltip.style.boxShadow =
+        "rgba(255,255,255,0.96) 0px 1px 0px inset, rgba(17,24,39,0.08) 0px 0px 0px 1px, rgba(17,24,39,0.05) 0px 10px 22px";
+    tooltip.style.fontSize = "12px";
+    tooltip.style.fontWeight = "500";
+    tooltip.style.lineHeight = "1.35";
+    tooltip.style.letterSpacing = "0.12px";
+    tooltip.style.color = "#111827";
+    tooltip.style.whiteSpace = "nowrap";
+    tooltip.style.pointerEvents = "none";
+    tooltip.style.opacity = "0";
+    tooltip.style.transition =
+        "opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1)";
+    tooltip.style.zIndex = "40";
+    switch (placement) {
+        case "top":
+            tooltip.style.left = "50%";
+            tooltip.style.bottom = "calc(100% + 12px)";
+            tooltip.style.transform = "translate(-50%, 8px) scale(0.96)";
+            break;
+        case "bottom":
+            tooltip.style.left = "50%";
+            tooltip.style.top = "calc(100% + 12px)";
+            tooltip.style.transform = "translate(-50%, -8px) scale(0.96)";
+            break;
+        case "left":
+            tooltip.style.right = "calc(100% + 12px)";
+            tooltip.style.top = "50%";
+            tooltip.style.transform = "translate(8px, -50%) scale(0.96)";
+            break;
+        case "right":
+            tooltip.style.left = "calc(100% + 12px)";
+            tooltip.style.top = "50%";
+            tooltip.style.transform = "translate(-8px, -50%) scale(0.96)";
+            break;
+    }
+    return tooltip;
+}
+function setTooltipVisibility(tooltip, placement, visible) {
+    tooltip.style.opacity = visible ? "1" : "0";
+    switch (placement) {
+        case "top":
+            tooltip.style.transform = visible
+                ? "translate(-50%, 0px) scale(1)"
+                : "translate(-50%, 8px) scale(0.96)";
+            break;
+        case "bottom":
+            tooltip.style.transform = visible
+                ? "translate(-50%, 0px) scale(1)"
+                : "translate(-50%, -8px) scale(0.96)";
+            break;
+        case "left":
+            tooltip.style.transform = visible
+                ? "translate(0px, -50%) scale(1)"
+                : "translate(8px, -50%) scale(0.96)";
+            break;
+        case "right":
+            tooltip.style.transform = visible
+                ? "translate(0px, -50%) scale(1)"
+                : "translate(-8px, -50%) scale(0.96)";
+            break;
+    }
+}
+function createActionButton(label, x, y) {
+    const button = document.createElement("button");
+    const placement = getTooltipPlacement(x, y);
+    const tooltip = createActionTooltip(label, placement);
+    const actionIconSize = Math.round(TOOLBAR_ACTION_BUTTON_SIZE * 0.41);
+    const actionAnchor = TOOLBAR_BASE_BUTTON_EDGE_OFFSET + TOOLBAR_BASE_BUTTON_SIZE / 2;
+    button.type = "button";
+    button.setAttribute("aria-label", label);
+    button.style.display = "grid";
+    button.style.placeItems = "center";
+    button.style.width = `${TOOLBAR_ACTION_BUTTON_SIZE}px`;
+    button.style.height = `${TOOLBAR_ACTION_BUTTON_SIZE}px`;
+    button.style.border = "none";
+    button.style.borderRadius = "9999px";
+    button.style.padding = "0";
+    button.style.color = "#111827";
+    button.style.cursor = "pointer";
+    button.style.position = "absolute";
+    button.style.left = `${actionAnchor}px`;
+    button.style.top = `${actionAnchor}px`;
+    button.style.marginLeft = `${-TOOLBAR_ACTION_BUTTON_SIZE / 2}px`;
+    button.style.marginTop = `${-TOOLBAR_ACTION_BUTTON_SIZE / 2}px`;
+    button.style.opacity = "0";
+    button.style.transform = "translate(0px, 0px) scale(0.72)";
+    button.style.transformOrigin = "center";
+    button.style.transition =
+        "transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, box-shadow 220ms ease";
+    button.style.boxShadow =
+        "rgba(17,24,39,0.08) 0px 10px 24px, rgba(17,24,39,0.06) 0px 0px 0px 1px";
+    button.style.pointerEvents = "none";
+    button.style.willChange = "transform, opacity";
+    button.style.overflow = "visible";
+    button.style.zIndex = "30";
+    applyGlassSurfaceStyles(button);
+    const showTooltip = () => setTooltipVisibility(tooltip, placement, true);
+    const hideTooltip = () => setTooltipVisibility(tooltip, placement, false);
+    button.addEventListener("mouseenter", showTooltip);
+    button.addEventListener("mouseleave", hideTooltip);
+    button.addEventListener("focus", showTooltip);
+    button.addEventListener("blur", hideTooltip);
+    button.append(tooltip);
+    return button;
+}
+function setActionButtonVisual(button, label, icon) {
+    const actionIconSize = Math.round(TOOLBAR_ACTION_BUTTON_SIZE * 0.41);
+    button.setAttribute("aria-label", label);
+    const tooltip = button.querySelector("[data-clue-authoring-action-tooltip='true']");
+    if (tooltip) {
+        tooltip.textContent = label;
+    }
+    const existingIcon = button.querySelector("svg");
+    if (existingIcon) {
+        existingIcon.remove();
+    }
+    button.append(createLucideIcon(icon, actionIconSize));
+}
+function createRecordedEventCard(entry, options) {
+    const card = document.createElement("div");
+    card.dataset.clueAuthoringEventId = entry.id;
+    if (entry.highlightTrace) {
+        card.dataset.clueAuthoringHighlightTrace = JSON.stringify(entry.highlightTrace);
+    }
+    card.style.position = "relative";
+    card.style.display = "grid";
+    card.style.width = "100%";
+    card.style.gap = "10px";
+    card.style.padding = "14px";
+    card.style.borderRadius = "14px";
+    card.style.border = entry.selected
+        ? "1.5px solid rgba(244,150,39,0.9)"
+        : "1px solid rgba(17,24,39,0.08)";
+    card.style.boxShadow = entry.selected
+        ? "rgba(244,150,39,0.12) 0px 14px 30px, rgba(244,150,39,0.08) 0px 0px 0px 1px"
+        : "rgba(17,24,39,0.08) 0px 10px 24px, rgba(17,24,39,0.05) 0px 0px 0px 1px";
+    card.style.textAlign = "left";
+    card.style.cursor = "pointer";
+    card.style.transition =
+        "border-color 180ms ease, background 180ms ease, box-shadow 220ms ease, transform 220ms ease";
+    card.style.color = "#111827";
+    applyGlassSurfaceStyles(card, entry.selected ? "strong" : "default");
+    if (entry.selected) {
+        card.style.border = "1.5px solid rgba(244,150,39,0.58)";
+    }
+    if (entry.pendingRemoval) {
+        card.style.opacity = "0.56";
+        card.style.transform = "translateY(0px)";
+    }
+    const cardButton = document.createElement("button");
+    cardButton.type = "button";
+    cardButton.style.display = "grid";
+    cardButton.style.gap = "10px";
+    cardButton.style.padding = "0";
+    cardButton.style.margin = "0";
+    cardButton.style.border = "none";
+    cardButton.style.background = "transparent";
+    cardButton.style.textAlign = "left";
+    cardButton.style.cursor = "pointer";
+    cardButton.style.color = "inherit";
+    const topRow = document.createElement("div");
+    topRow.style.display = "flex";
+    topRow.style.alignItems = "center";
+    topRow.style.justifyContent = "space-between";
+    topRow.style.gap = "12px";
+    const title = document.createElement("p");
+    title.textContent = entry.title;
+    title.style.margin = "0";
+    title.style.fontSize = "14px";
+    title.style.fontWeight = "600";
+    title.style.lineHeight = "1.5";
+    const screenLabel = document.createElement("p");
+    screenLabel.textContent = entry.screenLabel;
+    screenLabel.style.margin = "0";
+    screenLabel.style.fontSize = "11px";
+    screenLabel.style.fontWeight = "600";
+    screenLabel.style.lineHeight = "1.4";
+    screenLabel.style.letterSpacing = "0.02em";
+    screenLabel.style.color = "#777169";
+    const time = document.createElement("span");
+    time.textContent = entry.occurredAtLabel;
+    time.style.fontSize = "12px";
+    time.style.fontWeight = "500";
+    time.style.color = "#777169";
+    time.style.flexShrink = "0";
+    const actionMeta = document.createElement("div");
+    actionMeta.style.display = "inline-flex";
+    actionMeta.style.alignItems = "center";
+    actionMeta.style.gap = "8px";
+    const removeButton = document.createElement("button");
+    removeButton.dataset.clueAuthoringRemoveAction = entry.id;
+    removeButton.type = "button";
+    removeButton.textContent = "削除";
+    removeButton.style.display = entry.pendingRemoval ? "none" : "inline-flex";
+    removeButton.style.alignItems = "center";
+    removeButton.style.justifyContent = "center";
+    removeButton.style.padding = "4px 8px";
+    removeButton.style.borderRadius = "9999px";
+    removeButton.style.border = "1px solid rgba(17,24,39,0.08)";
+    removeButton.style.background = "rgba(255,255,255,0.34)";
+    removeButton.style.fontSize = "11px";
+    removeButton.style.fontWeight = "600";
+    removeButton.style.color = "#8d3d2e";
+    removeButton.style.cursor = "pointer";
+    actionMeta.append(removeButton, time);
+    const badge = document.createElement("span");
+    badge.textContent = entry.badgeLabel;
+    badge.style.display = "inline-flex";
+    badge.style.alignItems = "center";
+    badge.style.width = "fit-content";
+    badge.style.padding = "3px 8px";
+    badge.style.borderRadius = "9999px";
+    badge.style.background = entry.selected
+        ? "rgba(244,150,39,0.12)"
+        : "rgba(244,244,244,0.96)";
+    badge.style.border = "1px solid rgba(17,24,39,0.06)";
+    badge.style.fontSize = "11px";
+    badge.style.lineHeight = "1.2";
+    badge.style.fontWeight = "500";
+    badge.style.color = "#777169";
+    const relatedDisclosure = document.createElement("div");
+    relatedDisclosure.style.display = "grid";
+    relatedDisclosure.style.gap = "0";
+    relatedDisclosure.style.borderRadius = "10px";
+    relatedDisclosure.style.overflow = "hidden";
+    applyGlassSurfaceStyles(relatedDisclosure, "soft");
+    const relatedButton = document.createElement("button");
+    relatedButton.type = "button";
+    relatedButton.style.display = "flex";
+    relatedButton.style.alignItems = "center";
+    relatedButton.style.justifyContent = "space-between";
+    relatedButton.style.width = "100%";
+    relatedButton.style.gap = "12px";
+    relatedButton.style.padding = "10px 12px";
+    relatedButton.style.margin = "0";
+    relatedButton.style.border = "none";
+    relatedButton.style.background = "transparent";
+    relatedButton.style.cursor = "pointer";
+    relatedButton.style.color = "inherit";
+    relatedButton.style.textAlign = "left";
+    const relatedLabel = document.createElement("span");
+    relatedLabel.textContent = "関連イベント";
+    relatedLabel.style.fontSize = "11px";
+    relatedLabel.style.fontWeight = "600";
+    relatedLabel.style.color = "#111827";
+    const relatedMeta = document.createElement("div");
+    relatedMeta.style.display = "inline-flex";
+    relatedMeta.style.alignItems = "center";
+    relatedMeta.style.gap = "8px";
+    const relatedCount = document.createElement("span");
+    relatedCount.textContent = `${entry.actionUnit.atom_count}件`;
+    relatedCount.style.fontSize = "11px";
+    relatedCount.style.fontWeight = "600";
+    relatedCount.style.color = "#111827";
+    const relatedChevron = createLucideIcon(options.expanded ? ChevronUp : ChevronDown, 16);
+    relatedChevron.style.color = "rgba(119,113,105,0.7)";
+    relatedMeta.append(relatedCount, relatedChevron);
+    relatedButton.append(relatedLabel, relatedMeta);
+    const relatedContentWrap = document.createElement("div");
+    relatedContentWrap.style.display = "grid";
+    relatedContentWrap.style.overflow = "hidden";
+    relatedContentWrap.style.maxHeight = "0px";
+    relatedContentWrap.style.opacity = "0";
+    relatedContentWrap.style.transition =
+        "max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease";
+    const evidence = document.createElement("div");
+    evidence.style.display = "grid";
+    evidence.style.gap = "10px";
+    evidence.style.padding = "10px 12px 12px";
+    evidence.style.borderTop = "1px solid rgba(17,24,39,0.08)";
+    applyGlassSurfaceStyles(evidence, "soft");
+    topRow.append(badge, actionMeta);
+    cardButton.append(topRow);
+    if (entry.screenLabel) {
+        cardButton.append(screenLabel);
+    }
+    cardButton.append(title);
+    relatedDisclosure.append(relatedButton, relatedContentWrap);
+    card.append(cardButton, relatedDisclosure);
+    if (entry.atoms.length > 0) {
+        const atomSection = document.createElement("div");
+        atomSection.style.display = "grid";
+        atomSection.style.gap = "8px";
+        const atomHeading = document.createElement("p");
+        atomHeading.textContent = "関連イベント詳細";
+        atomHeading.style.margin = "0";
+        atomHeading.style.fontSize = "11px";
+        atomHeading.style.fontWeight = "700";
+        atomHeading.style.letterSpacing = "0.08em";
+        atomHeading.style.textTransform = "uppercase";
+        atomHeading.style.color = "#777169";
+        atomSection.append(atomHeading);
+        for (const atom of entry.atoms) {
+            const atomRow = document.createElement("div");
+            atomRow.style.display = "grid";
+            atomRow.style.gap = "4px";
+            atomRow.style.padding = "10px 12px";
+            atomRow.style.borderRadius = "12px";
+            applyGlassSurfaceStyles(atomRow, "soft");
+            const atomTop = document.createElement("div");
+            atomTop.style.display = "flex";
+            atomTop.style.alignItems = "center";
+            atomTop.style.justifyContent = "space-between";
+            atomTop.style.gap = "12px";
+            const atomTitle = document.createElement("p");
+            atomTitle.textContent = atom.title;
+            atomTitle.style.margin = "0";
+            atomTitle.style.fontSize = "12px";
+            atomTitle.style.fontWeight = "600";
+            atomTitle.style.color = "#111827";
+            const atomTime = document.createElement("span");
+            atomTime.textContent = atom.occurredAtLabel;
+            atomTime.style.fontSize = "11px";
+            atomTime.style.color = "#777169";
+            const atomMeta = document.createElement("p");
+            atomMeta.textContent = atom.detailLabel ?? atom.subtitle ?? atom.badgeLabel;
+            atomMeta.style.margin = "0";
+            atomMeta.style.fontSize = "11px";
+            atomMeta.style.lineHeight = "1.5";
+            atomMeta.style.color = "#4e4e4e";
+            atomMeta.style.wordBreak = "break-word";
+            atomTop.append(atomTitle, atomTime);
+            atomRow.append(atomTop, atomMeta);
+            atomSection.append(atomRow);
+        }
+        evidence.append(atomSection);
+    }
+    relatedContentWrap.append(evidence);
+    let isExpanded = options.expanded;
+    const setExpanded = (nextExpanded, immediate = false) => {
+        isExpanded = nextExpanded;
+        relatedChevron.replaceWith(createLucideIcon(nextExpanded ? ChevronUp : ChevronDown, 16));
+        const nextChevron = relatedMeta.querySelector("svg");
+        if (nextChevron instanceof SVGElement) {
+            nextChevron.style.display = "block";
+            nextChevron.style.color = "rgba(119,113,105,0.7)";
+        }
+        if (immediate) {
+            relatedContentWrap.style.transition = "none";
+        }
+        else {
+            relatedContentWrap.style.transition =
+                "max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease";
+        }
+        if (nextExpanded) {
+            relatedContentWrap.style.display = "grid";
+            relatedContentWrap.style.maxHeight = "0px";
+            relatedContentWrap.style.opacity = "0";
+            window.requestAnimationFrame(() => {
+                relatedContentWrap.style.maxHeight = `${evidence.scrollHeight}px`;
+                relatedContentWrap.style.opacity = "1";
+            });
+        }
+        else {
+            const currentHeight = evidence.scrollHeight;
+            relatedContentWrap.style.maxHeight = `${currentHeight}px`;
+            relatedContentWrap.style.opacity = "1";
+            window.requestAnimationFrame(() => {
+                relatedContentWrap.style.maxHeight = "0px";
+                relatedContentWrap.style.opacity = "0";
+            });
+        }
+        if (immediate) {
+            window.requestAnimationFrame(() => {
+                relatedContentWrap.style.transition =
+                    "max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease";
+            });
+        }
+    };
+    relatedContentWrap.addEventListener("transitionend", (event) => {
+        if (event.propertyName !== "max-height") {
+            return;
+        }
+        if (isExpanded) {
+            relatedContentWrap.style.maxHeight = "none";
+            relatedContentWrap.style.opacity = "1";
+        }
+    });
+    setExpanded(options.expanded, true);
+    cardButton.addEventListener("click", () => {
+        if (entry.pendingRemoval) {
+            return;
+        }
+        options.onSelect();
+    });
+    relatedButton.addEventListener("click", () => {
+        const nextExpanded = !isExpanded;
+        setExpanded(nextExpanded);
+        options.onToggleExpanded();
+    });
+    removeButton.addEventListener("click", (event) => {
+        event.stopPropagation();
+        options.onMarkPendingRemoval();
+    });
+    if (entry.pendingRemoval) {
+        const pendingOverlay = document.createElement("div");
+        pendingOverlay.dataset.clueAuthoringPendingRemoval = entry.id;
+        pendingOverlay.style.position = "absolute";
+        pendingOverlay.style.inset = "0";
+        pendingOverlay.style.display = "grid";
+        pendingOverlay.style.alignContent = "center";
+        pendingOverlay.style.justifyItems = "center";
+        pendingOverlay.style.gap = "10px";
+        pendingOverlay.style.borderRadius = "14px";
+        pendingOverlay.style.background = "rgba(255,253,249,0.46)";
+        pendingOverlay.style.backdropFilter = "blur(6px)";
+        pendingOverlay.style.setProperty("-webkit-backdrop-filter", "blur(6px)");
+        pendingOverlay.style.pointerEvents = "auto";
+        const pendingBadge = document.createElement("div");
+        pendingBadge.textContent = "削除予定";
+        pendingBadge.style.display = "inline-flex";
+        pendingBadge.style.alignItems = "center";
+        pendingBadge.style.justifyContent = "center";
+        pendingBadge.style.padding = "7px 12px";
+        pendingBadge.style.borderRadius = "9999px";
+        pendingBadge.style.background = "rgba(255,255,255,0.78)";
+        pendingBadge.style.border = "1px solid rgba(17,24,39,0.08)";
+        pendingBadge.style.fontSize = "12px";
+        pendingBadge.style.fontWeight = "700";
+        pendingBadge.style.color = "#7a5540";
+        const restoreButton = document.createElement("button");
+        restoreButton.dataset.clueAuthoringRestoreAction = entry.id;
+        restoreButton.type = "button";
+        restoreButton.textContent = "元に戻す";
+        restoreButton.style.display = "inline-flex";
+        restoreButton.style.alignItems = "center";
+        restoreButton.style.justifyContent = "center";
+        restoreButton.style.padding = "8px 12px";
+        restoreButton.style.borderRadius = "10px";
+        restoreButton.style.border = "1px solid rgba(17,24,39,0.08)";
+        restoreButton.style.background = "rgba(255,255,255,0.86)";
+        restoreButton.style.fontSize = "12px";
+        restoreButton.style.fontWeight = "600";
+        restoreButton.style.color = "#111827";
+        restoreButton.style.cursor = "pointer";
+        restoreButton.addEventListener("click", (event) => {
+            event.stopPropagation();
+            options.onRestorePendingRemoval();
+        });
+        pendingOverlay.append(pendingBadge, restoreButton);
+        card.append(pendingOverlay);
+    }
+    card.addEventListener("mouseenter", () => {
+        if (entry.pendingRemoval) {
+            return;
+        }
+        card.style.transform = "translateY(-1px)";
+    });
+    card.addEventListener("mouseleave", () => {
+        card.style.transform = "translateY(0px)";
+    });
+    return card;
+}
+function createEntrySection(titleText, entries, options) {
+    const section = document.createElement("section");
+    section.style.display = "grid";
+    section.style.gap = "10px";
+    const heading = document.createElement("h3");
+    heading.textContent = titleText;
+    heading.style.margin = "0";
+    heading.style.fontSize = "13px";
+    heading.style.fontWeight = "700";
+    heading.style.lineHeight = "1.4";
+    heading.style.color = "#111827";
+    const cards = document.createElement("div");
+    cards.style.display = "grid";
+    cards.style.gap = "10px";
+    cards.append(...entries.map((entry) => createRecordedEventCard(entry, {
+        expanded: options.isExpanded(entry.id),
+        onSelect: () => options.onSelect(entry.id),
+        onToggleExpanded: () => options.onToggleExpanded(entry.id),
+        onMarkPendingRemoval: () => options.onMarkPendingRemoval(entry.id),
+        onRestorePendingRemoval: () => options.onRestorePendingRemoval(entry.id),
+    })));
+    section.append(heading, cards);
+    return section;
+}
+function createPanel(session, recording, options) {
+    const targetSpotlight = createTargetSpotlight();
+    const panelWrap = document.createElement("div");
+    panelWrap.style.position = "absolute";
+    panelWrap.style.left = "0px";
+    panelWrap.style.top = "0px";
+    panelWrap.style.boxSizing = "border-box";
+    panelWrap.style.width = "0";
+    panelWrap.style.height = `${TOOLBAR_PANEL_HEIGHT}px`;
+    panelWrap.style.opacity = "0";
+    panelWrap.style.transform = "translateX(-26px) scale(0.96)";
+    panelWrap.style.transformOrigin = "left center";
+    panelWrap.style.overflow = "hidden";
+    panelWrap.style.borderRadius = "16px";
+    panelWrap.style.boxShadow = "rgba(17,24,39,0.08) 0px 16px 40px";
+    panelWrap.style.zIndex = "10";
+    panelWrap.style.transition =
+        "width 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1)";
+    panelWrap.style.pointerEvents = "none";
+    panelWrap.style.willChange = "width, transform, opacity";
+    applyGlassSurfaceStyles(panelWrap, "strong");
+    const panel = document.createElement("div");
+    panel.dataset.clueAuthoringPanel = "true";
+    panel.style.boxSizing = "border-box";
+    panel.style.width = `${TOOLBAR_PANEL_WIDTH}px`;
+    panel.style.minWidth = `${TOOLBAR_PANEL_WIDTH}px`;
+    panel.style.height = "100%";
+    panel.style.padding = "10px";
+    panel.style.borderRadius = "16px";
+    panel.style.display = "grid";
+    panel.style.gridTemplateRows = "auto 1fr";
+    panel.style.gap = "12px";
+    panel.style.pointerEvents = "auto";
+    panel.style.background = "transparent";
+    panel.style.border = "none";
+    panel.style.backdropFilter = "none";
+    panel.style.setProperty("-webkit-backdrop-filter", "none");
+    const panelHeader = document.createElement("div");
+    panelHeader.style.display = "grid";
+    panelHeader.style.gap = "0";
+    const eventList = document.createElement("div");
+    eventList.dataset.clueAuthoringEventList = "true";
+    eventList.style.display = "grid";
+    eventList.style.width = "100%";
+    eventList.style.minWidth = "0";
+    eventList.style.alignContent = "start";
+    eventList.style.gap = "10px";
+    eventList.style.padding = "0";
+    eventList.style.minHeight = "0";
+    eventList.style.background = "rgba(255,255,255,0.08)";
+    eventList.style.border = "1px solid rgba(255,255,255,0.14)";
+    eventList.style.borderRadius = "14px";
+    eventList.style.overflowY = "auto";
+    const statusRow = document.createElement("div");
+    statusRow.style.display = "flex";
+    statusRow.style.alignItems = "center";
+    statusRow.style.justifyContent = "space-between";
+    statusRow.style.gap = "12px";
+    statusRow.style.padding = "4px 4px 12px";
+    statusRow.style.borderBottom = "1px solid rgba(17,24,39,0.08)";
+    const statusPill = document.createElement("span");
+    statusPill.style.display = "inline-flex";
+    statusPill.style.alignItems = "center";
+    statusPill.style.padding = "6px 10px";
+    statusPill.style.borderRadius = "9999px";
+    statusPill.style.fontSize = "10px";
+    statusPill.style.fontWeight = "600";
+    statusPill.style.letterSpacing = "0.22em";
+    statusPill.style.textTransform = "uppercase";
+    applyGlassSurfaceStyles(statusPill, "soft");
+    const statusSummary = document.createElement("p");
+    statusSummary.style.margin = "0";
+    statusSummary.style.fontSize = "11px";
+    statusSummary.style.color = "#777169";
+    statusSummary.style.flexShrink = "0";
+    const headerActions = document.createElement("div");
+    headerActions.style.display = "inline-flex";
+    headerActions.style.alignItems = "center";
+    headerActions.style.gap = "8px";
+    const resetButton = document.createElement("button");
+    resetButton.type = "button";
+    resetButton.dataset.clueAuthoringResetButton = "true";
+    resetButton.textContent = "リセット";
+    resetButton.style.display = "inline-flex";
+    resetButton.style.alignItems = "center";
+    resetButton.style.justifyContent = "center";
+    resetButton.style.padding = "6px 10px";
+    resetButton.style.borderRadius = "9999px";
+    resetButton.style.border = "1px solid rgba(255,255,255,0.2)";
+    resetButton.style.background = "rgba(255,255,255,0.18)";
+    resetButton.style.fontSize = "11px";
+    resetButton.style.fontWeight = "600";
+    resetButton.style.letterSpacing = "0.02em";
+    resetButton.style.color = "#777169";
+    resetButton.style.cursor = "pointer";
+    resetButton.style.backdropFilter = AUTHORING_GLASS_BLUR;
+    resetButton.style.setProperty("-webkit-backdrop-filter", AUTHORING_GLASS_BLUR);
+    resetButton.addEventListener("click", () => {
+        void options.onResetRequested();
+    });
+    const emptyState = document.createElement("div");
+    emptyState.style.minHeight = "260px";
+    emptyState.style.borderRadius = "0";
+    emptyState.style.border = "none";
+    emptyState.style.background = "transparent";
+    emptyState.style.display = "grid";
+    emptyState.style.alignContent = "center";
+    emptyState.style.justifyItems = "center";
+    emptyState.style.gap = "12px";
+    emptyState.style.padding = "12px 12px 18px";
+    emptyState.style.textAlign = "center";
+    const emptyIconWrap = document.createElement("div");
+    emptyIconWrap.style.display = "grid";
+    emptyIconWrap.style.placeItems = "center";
+    emptyIconWrap.style.width = "44px";
+    emptyIconWrap.style.height = "44px";
+    emptyIconWrap.style.borderRadius = "12px";
+    emptyIconWrap.style.boxShadow = "rgba(17,24,39,0.05) 0px 6px 16px";
+    emptyIconWrap.style.color = "#777169";
+    applyGlassSurfaceStyles(emptyIconWrap, "soft");
+    emptyIconWrap.append(createLucideIcon(AUTHORING_ACTIONS[0]?.icon ?? [], 22));
+    const emptyCopy = document.createElement("p");
+    emptyCopy.style.margin = "0";
+    emptyCopy.style.fontSize = "13px";
+    emptyCopy.style.lineHeight = "1.6";
+    emptyCopy.style.letterSpacing = "0.12px";
+    emptyCopy.style.color = "#777169";
+    const entriesList = document.createElement("div");
+    entriesList.style.display = "grid";
+    entriesList.style.width = "100%";
+    entriesList.style.minWidth = "0";
+    entriesList.style.gap = "18px";
+    emptyState.append(emptyIconWrap, emptyCopy);
+    headerActions.append(statusSummary, resetButton);
+    statusRow.append(statusPill, headerActions);
+    panelHeader.append(statusRow);
+    eventList.append(emptyState, entriesList);
+    panel.append(panelHeader, eventList);
+    panelWrap.append(panel);
+    let previousEntryCount = 0;
+    let lastSnapshot = null;
+    let spotlightEventId = null;
+    const expandedEventIds = new Set();
+    const renderSnapshot = (snapshot) => {
+        lastSnapshot = snapshot;
+        statusPill.textContent = snapshot.hasRecordedWindow
+            ? snapshot.isRecording
+                ? "Recording"
+                : "Paused"
+            : "Ready";
+        statusPill.style.background = snapshot.hasRecordedWindow
+            ? snapshot.isRecording
+                ? "rgba(181,129,79,0.18)"
+                : "rgba(245,242,239,0.5)"
+            : "rgba(245,242,239,0.5)";
+        statusPill.style.color =
+            snapshot.hasRecordedWindow && snapshot.isRecording
+                ? "#8f5b2f"
+                : "#777169";
+        statusSummary.textContent = `${snapshot.entries.length}件記録`;
+        emptyCopy.textContent = !snapshot.hasRecordedWindow
+            ? "イベントを記録するを押すと、その時点以降の action unit をここに表示します"
+            : snapshot.isRecording
+                ? "このまま操作を続けると、記録開始以降の action unit が時系列でここに追加されます"
+                : "記録は一時停止中です。再開すると、その時点以降の action unit がここに追加されます";
+        const shouldAutoScroll = snapshot.entries.length > previousEntryCount &&
+            eventList.scrollHeight - eventList.scrollTop - eventList.clientHeight < 120;
+        const nextEntryIds = new Set(snapshot.entries.map((entry) => entry.id));
+        for (const expandedId of expandedEventIds) {
+            if (!nextEntryIds.has(expandedId)) {
+                expandedEventIds.delete(expandedId);
+            }
+        }
+        if (spotlightEventId && !nextEntryIds.has(spotlightEventId)) {
+            spotlightEventId = null;
+            targetSpotlight.clear();
+        }
+        if (spotlightEventId) {
+            const spotlightEntry = snapshot.entries.find((entry) => entry.id === spotlightEventId) ?? null;
+            if (!spotlightEntry?.selected) {
+                spotlightEventId = null;
+                targetSpotlight.clear();
+            }
+        }
+        const toggleSelected = (eventId) => {
+            const targetEntry = lastSnapshot?.entries.find((candidate) => candidate.id === eventId) ?? null;
+            if (targetEntry?.pendingRemoval) {
+                return;
+            }
+            const isCurrentlySelected = targetEntry?.selected ?? false;
+            if (isCurrentlySelected) {
+                recording.toggleSelected(eventId);
+                if (spotlightEventId === eventId) {
+                    spotlightEventId = null;
+                    targetSpotlight.clear();
+                }
+                recording.setHighlightTrace(eventId, null);
+            }
+            else if (targetEntry) {
+                recording.toggleSelected(eventId);
+                if (spotlightEventId && spotlightEventId !== eventId) {
+                    recording.setHighlightTrace(spotlightEventId, null);
+                }
+                spotlightEventId = eventId;
+                const trace = targetSpotlight.focusEntry(targetEntry);
+                recording.setHighlightTrace(eventId, trace);
+            }
+        };
+        const toggleExpanded = (eventId) => {
+            if (expandedEventIds.has(eventId)) {
+                expandedEventIds.delete(eventId);
+            }
+            else {
+                expandedEventIds.add(eventId);
+            }
+            if (lastSnapshot) {
+                renderSnapshot(lastSnapshot);
+            }
+        };
+        const markPendingRemoval = (eventId) => {
+            if (spotlightEventId === eventId) {
+                recording.setHighlightTrace(eventId, null);
+                spotlightEventId = null;
+                targetSpotlight.clear();
+            }
+            recording.markPendingRemoval(eventId);
+        };
+        const restorePendingRemoval = (eventId) => {
+            recording.restorePendingRemoval(eventId);
+        };
+        const groupedSections = [];
+        for (const entry of snapshot.entries) {
+            const sectionTitle = entry.screenLabel ?? "イベント";
+            const previousSection = groupedSections[groupedSections.length - 1] ?? null;
+            if (previousSection && previousSection.title === sectionTitle) {
+                previousSection.entries.push(entry);
+                continue;
+            }
+            groupedSections.push({
+                title: sectionTitle,
+                entries: [entry],
+            });
+        }
+        const sectionNodes = groupedSections.map((section) => createEntrySection(section.title, section.entries, {
+            isExpanded: (eventId) => expandedEventIds.has(eventId),
+            onSelect: toggleSelected,
+            onToggleExpanded: toggleExpanded,
+            onMarkPendingRemoval: markPendingRemoval,
+            onRestorePendingRemoval: restorePendingRemoval,
+        }));
+        entriesList.replaceChildren(...sectionNodes);
+        emptyState.style.display = snapshot.entries.length === 0 ? "grid" : "none";
+        previousEntryCount = snapshot.entries.length;
+        if (shouldAutoScroll) {
+            window.requestAnimationFrame(() => {
+                eventList.scrollTop = eventList.scrollHeight;
+            });
+        }
+    };
+    const unsubscribe = recording.subscribe(renderSnapshot);
+    return {
+        panelWrap,
+        dispose: () => {
+            unsubscribe();
+            targetSpotlight.dispose();
+        },
+    };
+}
+function createBaseButton() {
+    const logoSlotSize = Math.round((TOOLBAR_BASE_BUTTON_SIZE * 2) / 3);
+    const logoSize = Math.round(TOOLBAR_BASE_BUTTON_SIZE * 0.53);
+    const baseButton = document.createElement("button");
+    baseButton.type = "button";
+    baseButton.dataset.clueAuthoringBaseButton = "true";
+    baseButton.setAttribute("aria-label", "Authoring toolbar");
+    baseButton.setAttribute("aria-expanded", "false");
+    baseButton.style.position = "absolute";
+    baseButton.style.left = `${TOOLBAR_BASE_BUTTON_EDGE_OFFSET}px`;
+    baseButton.style.top = `${TOOLBAR_BASE_BUTTON_EDGE_OFFSET}px`;
+    baseButton.style.width = `${TOOLBAR_BASE_BUTTON_SIZE}px`;
+    baseButton.style.height = `${TOOLBAR_BASE_BUTTON_SIZE}px`;
+    baseButton.style.marginLeft = "0px";
+    baseButton.style.marginTop = "0px";
+    baseButton.style.display = "grid";
+    baseButton.style.placeItems = "center";
+    baseButton.style.borderRadius = `${Math.round(TOOLBAR_BASE_BUTTON_SIZE * 0.31)}px`;
+    baseButton.style.boxShadow =
+        "rgba(17,24,39,0.1) 0px 12px 28px, rgba(17,24,39,0.08) 0px 0px 0px 1px";
+    baseButton.style.color = "#050505";
+    baseButton.style.cursor = "grab";
+    baseButton.style.pointerEvents = "auto";
+    baseButton.style.transition =
+        "transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease";
+    baseButton.style.touchAction = "none";
+    applyGlassSurfaceStyles(baseButton, "strong");
+    const logoSlot = document.createElement("div");
+    logoSlot.style.display = "grid";
+    logoSlot.style.placeItems = "center";
+    logoSlot.style.width = `${logoSlotSize}px`;
+    logoSlot.style.height = `${logoSlotSize}px`;
+    logoSlot.style.justifySelf = "center";
+    logoSlot.style.alignSelf = "center";
+    logoSlot.style.borderRadius = `${Math.round(logoSlotSize * 0.4)}px`;
+    applyGlassSurfaceStyles(logoSlot);
+    logoSlot.append(createServiceLogo(logoSize));
+    baseButton.append(logoSlot);
+    return baseButton;
+}
+function createSaveDialog(options) {
+    const backdrop = document.createElement("div");
+    backdrop.dataset.clueAuthoringSaveDialog = "true";
+    markAuthoringRoot(backdrop);
+    backdrop.style.position = "fixed";
+    backdrop.style.inset = "0";
+    backdrop.style.display = "none";
+    backdrop.style.placeItems = "center";
+    backdrop.style.padding = "24px";
+    backdrop.style.background = "rgba(255,251,247,0.24)";
+    backdrop.style.backdropFilter = "blur(8px)";
+    backdrop.style.setProperty("-webkit-backdrop-filter", "blur(8px)");
+    backdrop.style.zIndex = "2147483400";
+    const dialog = document.createElement("div");
+    markAuthoringRoot(dialog);
+    dialog.style.width = "min(560px, 100%)";
+    dialog.style.maxHeight = "min(680px, calc(100vh - 48px))";
+    dialog.style.display = "grid";
+    dialog.style.gridTemplateRows = "auto auto auto 1fr auto";
+    dialog.style.gap = "14px";
+    dialog.style.padding = "18px";
+    dialog.style.borderRadius = "20px";
+    dialog.style.overflow = "hidden";
+    dialog.style.boxShadow = "rgba(17,24,39,0.12) 0px 22px 48px";
+    dialog.style.color = "#111827";
+    applyGlassSurfaceStyles(dialog, "strong");
+    const heading = document.createElement("div");
+    heading.style.display = "grid";
+    heading.style.gap = "4px";
+    const title = document.createElement("h3");
+    title.textContent = "Business Event を保存";
+    title.style.margin = "0";
+    title.style.fontSize = "18px";
+    title.style.fontWeight = "700";
+    title.style.lineHeight = "1.4";
+    const description = document.createElement("p");
+    description.textContent = "保存対象の action_unit を確認して、下書きまたは公開を選択します。";
+    description.style.margin = "0";
+    description.style.fontSize = "12px";
+    description.style.lineHeight = "1.6";
+    description.style.color = "#777169";
+    heading.append(title, description);
+    const titleInput = document.createElement("input");
+    titleInput.dataset.clueAuthoringSaveTitle = "true";
+    titleInput.type = "text";
+    titleInput.placeholder = "Business Event タイトル";
+    titleInput.style.width = "100%";
+    titleInput.style.borderRadius = "12px";
+    titleInput.style.border = "1px solid rgba(17,24,39,0.08)";
+    titleInput.style.padding = "10px 12px";
+    titleInput.style.background = "rgba(255,255,255,0.48)";
+    titleInput.style.fontSize = "14px";
+    titleInput.style.color = "#111827";
+    const descriptionInput = document.createElement("textarea");
+    descriptionInput.dataset.clueAuthoringSaveDescription = "true";
+    descriptionInput.placeholder = "Business Event 説明";
+    descriptionInput.rows = 3;
+    descriptionInput.style.width = "100%";
+    descriptionInput.style.resize = "vertical";
+    descriptionInput.style.borderRadius = "12px";
+    descriptionInput.style.border = "1px solid rgba(17,24,39,0.08)";
+    descriptionInput.style.padding = "10px 12px";
+    descriptionInput.style.background = "rgba(255,255,255,0.42)";
+    descriptionInput.style.fontSize = "13px";
+    descriptionInput.style.color = "#111827";
+    const modeRow = document.createElement("div");
+    modeRow.style.display = "inline-flex";
+    modeRow.style.alignItems = "center";
+    modeRow.style.gap = "10px";
+    const draftButton = document.createElement("button");
+    draftButton.dataset.clueAuthoringSaveMode = "draft";
+    draftButton.type = "button";
+    draftButton.textContent = "下書き";
+    draftButton.style.padding = "8px 12px";
+    draftButton.style.borderRadius = "9999px";
+    draftButton.style.border = "1px solid rgba(17,24,39,0.08)";
+    draftButton.style.background = "rgba(255,255,255,0.56)";
+    draftButton.style.fontSize = "12px";
+    draftButton.style.fontWeight = "600";
+    draftButton.style.cursor = "pointer";
+    const publishButton = document.createElement("button");
+    publishButton.dataset.clueAuthoringSaveMode = "publish";
+    publishButton.type = "button";
+    publishButton.textContent = "公開";
+    publishButton.style.padding = "8px 12px";
+    publishButton.style.borderRadius = "9999px";
+    publishButton.style.border = "1px solid rgba(17,24,39,0.08)";
+    publishButton.style.background = "rgba(255,255,255,0.32)";
+    publishButton.style.fontSize = "12px";
+    publishButton.style.fontWeight = "600";
+    publishButton.style.cursor = "pointer";
+    const listWrap = document.createElement("div");
+    listWrap.dataset.clueAuthoringSaveSelectionList = "true";
+    listWrap.style.display = "grid";
+    listWrap.style.gap = "10px";
+    listWrap.style.minHeight = "120px";
+    listWrap.style.maxHeight = "240px";
+    listWrap.style.overflow = "auto";
+    listWrap.style.padding = "4px";
+    const validation = document.createElement("p");
+    validation.style.margin = "0";
+    validation.style.fontSize = "12px";
+    validation.style.color = "#8d3d2e";
+    const footer = document.createElement("div");
+    footer.style.display = "flex";
+    footer.style.justifyContent = "flex-end";
+    footer.style.gap = "10px";
+    const cancelButton = document.createElement("button");
+    cancelButton.dataset.clueAuthoringSaveCancel = "true";
+    cancelButton.type = "button";
+    cancelButton.textContent = "Cancel";
+    cancelButton.style.padding = "9px 12px";
+    cancelButton.style.borderRadius = "10px";
+    cancelButton.style.border = "1px solid rgba(17,24,39,0.08)";
+    cancelButton.style.background = "rgba(255,255,255,0.54)";
+    cancelButton.style.fontSize = "12px";
+    cancelButton.style.fontWeight = "600";
+    cancelButton.style.cursor = "pointer";
+    const confirmButton = document.createElement("button");
+    confirmButton.dataset.clueAuthoringSaveConfirm = "true";
+    confirmButton.type = "button";
+    confirmButton.textContent = "保存";
+    confirmButton.style.padding = "9px 14px";
+    confirmButton.style.borderRadius = "10px";
+    confirmButton.style.border = "1px solid rgba(181,129,79,0.14)";
+    confirmButton.style.background = "rgba(181,129,79,0.16)";
+    confirmButton.style.fontSize = "12px";
+    confirmButton.style.fontWeight = "700";
+    confirmButton.style.color = "#8f5b2f";
+    confirmButton.style.cursor = "pointer";
+    let saveMode = "draft";
+    const resetForm = () => {
+        titleInput.value = "";
+        descriptionInput.value = "";
+        saveMode = "draft";
+        syncSaveMode();
+    };
+    const syncSaveMode = () => {
+        draftButton.style.background =
+            saveMode === "draft" ? "rgba(181,129,79,0.16)" : "rgba(255,255,255,0.56)";
+        draftButton.style.color = saveMode === "draft" ? "#8f5b2f" : "#111827";
+        publishButton.style.background =
+            saveMode === "publish"
+                ? "rgba(181,129,79,0.16)"
+                : "rgba(255,255,255,0.32)";
+        publishButton.style.color = saveMode === "publish" ? "#8f5b2f" : "#111827";
+        confirmButton.textContent = saveMode === "publish" ? "公開する" : "下書き保存";
+    };
+    const renderSelectionList = () => {
+        const snapshot = options.recording.getSnapshot();
+        const activeEntries = snapshot.entries.filter((entry) => !entry.pendingRemoval);
+        listWrap.replaceChildren(...activeEntries.map((entry) => {
+            const row = document.createElement("div");
+            row.style.display = "grid";
+            row.style.gap = "2px";
+            row.style.padding = "10px 12px";
+            row.style.borderRadius = "12px";
+            row.style.background = "rgba(255,255,255,0.36)";
+            row.style.border = "1px solid rgba(17,24,39,0.06)";
+            const rowTitle = document.createElement("p");
+            rowTitle.textContent = entry.title;
+            rowTitle.style.margin = "0";
+            rowTitle.style.fontSize = "13px";
+            rowTitle.style.fontWeight = "600";
+            const rowMeta = document.createElement("p");
+            rowMeta.textContent = entry.screenLabel ?? entry.badgeLabel;
+            rowMeta.style.margin = "0";
+            rowMeta.style.fontSize = "11px";
+            rowMeta.style.color = "#777169";
+            row.append(rowTitle, rowMeta);
+            return row;
+        }));
+        validation.textContent =
+            activeEntries.length === 0
+                ? "保存対象の action_unit がありません。削除予定を戻してください。"
+                : titleInput.value.trim().length === 0
+                    ? "タイトルを入力してください。"
+                    : "";
+        confirmButton.disabled =
+            activeEntries.length === 0 || titleInput.value.trim().length === 0;
+        confirmButton.style.opacity = confirmButton.disabled ? "0.5" : "1";
+    };
+    titleInput.addEventListener("input", renderSelectionList);
+    draftButton.addEventListener("click", () => {
+        saveMode = "draft";
+        syncSaveMode();
+    });
+    publishButton.addEventListener("click", () => {
+        saveMode = "publish";
+        syncSaveMode();
+    });
+    cancelButton.addEventListener("click", () => {
+        backdrop.style.display = "none";
+    });
+    confirmButton.addEventListener("click", async () => {
+        const snapshot = options.recording.getSnapshot();
+        const activeEntries = snapshot.entries.filter((entry) => !entry.pendingRemoval);
+        if (activeEntries.length === 0 || titleInput.value.trim().length === 0) {
+            renderSelectionList();
+            return;
+        }
+        confirmButton.disabled = true;
+        try {
+            await options.onSave({
+                title: titleInput.value.trim(),
+                description: descriptionInput.value.trim(),
+                saveMode,
+                selectedActionUnitIds: activeEntries.map((entry) => entry.id),
+            });
+            backdrop.style.display = "none";
+            await options.onSaveCompleted({ saveMode });
+            resetForm();
+        }
+        finally {
+            confirmButton.disabled = false;
+            renderSelectionList();
+        }
+    });
+    backdrop.addEventListener("click", (event) => {
+        if (event.target === backdrop) {
+            backdrop.style.display = "none";
+        }
+    });
+    modeRow.append(draftButton, publishButton);
+    footer.append(cancelButton, confirmButton);
+    dialog.append(heading, titleInput, descriptionInput, modeRow, listWrap, validation, footer);
+    backdrop.append(dialog);
+    syncSaveMode();
+    return {
+        root: backdrop,
+        open() {
+            backdrop.style.display = "grid";
+            renderSelectionList();
+            window.requestAnimationFrame(() => {
+                titleInput.focus();
+            });
+        },
+        close() {
+            backdrop.style.display = "none";
+        },
+        dispose() {
+            backdrop.remove();
+        },
+    };
+}
+function createSaveCompleteDialog(options) {
+    const backdrop = document.createElement("div");
+    backdrop.dataset.clueAuthoringSaveCompleteDialog = "true";
+    markAuthoringRoot(backdrop);
+    backdrop.style.position = "fixed";
+    backdrop.style.inset = "0";
+    backdrop.style.display = "none";
+    backdrop.style.placeItems = "center";
+    backdrop.style.padding = "24px";
+    backdrop.style.background = "rgba(255,251,247,0.22)";
+    backdrop.style.backdropFilter = "blur(8px)";
+    backdrop.style.setProperty("-webkit-backdrop-filter", "blur(8px)");
+    backdrop.style.zIndex = "2147483410";
+    const dialog = document.createElement("div");
+    markAuthoringRoot(dialog);
+    dialog.style.width = "min(420px, 100%)";
+    dialog.style.display = "grid";
+    dialog.style.gap = "14px";
+    dialog.style.padding = "18px";
+    dialog.style.borderRadius = "18px";
+    dialog.style.boxShadow = "rgba(17,24,39,0.12) 0px 22px 48px";
+    dialog.style.color = "#111827";
+    applyGlassSurfaceStyles(dialog, "strong");
+    const title = document.createElement("h3");
+    title.style.margin = "0";
+    title.style.fontSize = "18px";
+    title.style.fontWeight = "700";
+    title.style.lineHeight = "1.4";
+    const description = document.createElement("p");
+    description.style.margin = "0";
+    description.style.fontSize = "13px";
+    description.style.lineHeight = "1.7";
+    description.style.color = "#5b554e";
+    description.textContent = "このまま終了しますか？";
+    const footer = document.createElement("div");
+    footer.style.display = "flex";
+    footer.style.justifyContent = "flex-end";
+    footer.style.gap = "10px";
+    const continueButton = document.createElement("button");
+    continueButton.dataset.clueAuthoringSaveCompleteContinue = "true";
+    continueButton.type = "button";
+    continueButton.textContent = "続けて記録する";
+    continueButton.style.padding = "9px 12px";
+    continueButton.style.borderRadius = "10px";
+    continueButton.style.border = "1px solid rgba(17,24,39,0.08)";
+    continueButton.style.background = "rgba(255,255,255,0.54)";
+    continueButton.style.fontSize = "12px";
+    continueButton.style.fontWeight = "600";
+    continueButton.style.cursor = "pointer";
+    const finishButton = document.createElement("button");
+    finishButton.dataset.clueAuthoringSaveCompleteFinish = "true";
+    finishButton.type = "button";
+    finishButton.textContent = "終了する";
+    finishButton.style.padding = "9px 14px";
+    finishButton.style.borderRadius = "10px";
+    finishButton.style.border = "1px solid rgba(181,129,79,0.14)";
+    finishButton.style.background = "rgba(181,129,79,0.16)";
+    finishButton.style.fontSize = "12px";
+    finishButton.style.fontWeight = "700";
+    finishButton.style.color = "#8f5b2f";
+    finishButton.style.cursor = "pointer";
+    const setPending = (pending) => {
+        continueButton.disabled = pending;
+        finishButton.disabled = pending;
+        continueButton.style.opacity = pending ? "0.5" : "1";
+        finishButton.style.opacity = pending ? "0.5" : "1";
+    };
+    continueButton.addEventListener("click", () => {
+        setPending(true);
+        void options
+            .onRestartAuthoring()
+            .then(() => {
+            backdrop.style.display = "none";
+        })
+            .finally(() => {
+            setPending(false);
+        });
+    });
+    finishButton.addEventListener("click", () => {
+        options.onCloseAuthoring();
+    });
+    backdrop.addEventListener("click", (event) => {
+        if (event.target === backdrop) {
+            backdrop.style.display = "none";
+        }
+    });
+    footer.append(continueButton, finishButton);
+    dialog.append(title, description, footer);
+    backdrop.append(dialog);
+    return {
+        root: backdrop,
+        open(params) {
+            title.textContent =
+                params.saveMode === "publish" ? "公開が完了しました" : "下書き保存が完了しました";
+            description.textContent = "このまま終了しますか？";
+            backdrop.style.display = "grid";
+            setPending(false);
+        },
+        close() {
+            backdrop.style.display = "none";
+        },
+        dispose() {
+            backdrop.remove();
+        },
+    };
+}
+function createResetConfirmDialog(options) {
+    const backdrop = document.createElement("div");
+    backdrop.dataset.clueAuthoringResetDialog = "true";
+    markAuthoringRoot(backdrop);
+    backdrop.style.position = "fixed";
+    backdrop.style.inset = "0";
+    backdrop.style.display = "none";
+    backdrop.style.placeItems = "center";
+    backdrop.style.padding = "24px";
+    backdrop.style.background = "rgba(255,251,247,0.22)";
+    backdrop.style.backdropFilter = "blur(8px)";
+    backdrop.style.setProperty("-webkit-backdrop-filter", "blur(8px)");
+    backdrop.style.zIndex = "2147483405";
+    const dialog = document.createElement("div");
+    markAuthoringRoot(dialog);
+    dialog.style.width = "min(420px, 100%)";
+    dialog.style.display = "grid";
+    dialog.style.gap = "14px";
+    dialog.style.padding = "18px";
+    dialog.style.borderRadius = "18px";
+    dialog.style.boxShadow = "rgba(17,24,39,0.12) 0px 22px 48px";
+    dialog.style.color = "#111827";
+    applyGlassSurfaceStyles(dialog, "strong");
+    const title = document.createElement("h3");
+    title.style.margin = "0";
+    title.style.fontSize = "18px";
+    title.style.fontWeight = "700";
+    title.style.lineHeight = "1.4";
+    title.textContent = "イベントをリセット";
+    const description = document.createElement("p");
+    description.style.margin = "0";
+    description.style.fontSize = "13px";
+    description.style.lineHeight = "1.7";
+    description.style.color = "#5b554e";
+    description.textContent = "現在のイベントをすべてリセットします。よろしいですか？";
+    const footer = document.createElement("div");
+    footer.style.display = "flex";
+    footer.style.justifyContent = "flex-end";
+    footer.style.gap = "10px";
+    const cancelButton = document.createElement("button");
+    cancelButton.dataset.clueAuthoringResetCancel = "true";
+    cancelButton.type = "button";
+    cancelButton.textContent = "キャンセル";
+    cancelButton.style.padding = "9px 12px";
+    cancelButton.style.borderRadius = "10px";
+    cancelButton.style.border = "1px solid rgba(17,24,39,0.08)";
+    cancelButton.style.background = "rgba(255,255,255,0.54)";
+    cancelButton.style.fontSize = "12px";
+    cancelButton.style.fontWeight = "600";
+    cancelButton.style.cursor = "pointer";
+    const confirmButton = document.createElement("button");
+    confirmButton.dataset.clueAuthoringResetConfirm = "true";
+    confirmButton.type = "button";
+    confirmButton.textContent = "はい";
+    confirmButton.style.padding = "9px 14px";
+    confirmButton.style.borderRadius = "10px";
+    confirmButton.style.border = "1px solid rgba(181,129,79,0.14)";
+    confirmButton.style.background = "rgba(181,129,79,0.16)";
+    confirmButton.style.fontSize = "12px";
+    confirmButton.style.fontWeight = "700";
+    confirmButton.style.color = "#8f5b2f";
+    confirmButton.style.cursor = "pointer";
+    const setPending = (pending) => {
+        cancelButton.disabled = pending;
+        confirmButton.disabled = pending;
+        cancelButton.style.opacity = pending ? "0.5" : "1";
+        confirmButton.style.opacity = pending ? "0.5" : "1";
+    };
+    cancelButton.addEventListener("click", () => {
+        backdrop.style.display = "none";
+    });
+    confirmButton.addEventListener("click", () => {
+        setPending(true);
+        void options
+            .onConfirm()
+            .then(() => {
+            backdrop.style.display = "none";
+        })
+            .finally(() => {
+            setPending(false);
+        });
+    });
+    backdrop.addEventListener("click", (event) => {
+        if (event.target === backdrop) {
+            backdrop.style.display = "none";
+        }
+    });
+    footer.append(cancelButton, confirmButton);
+    dialog.append(title, description, footer);
+    backdrop.append(dialog);
+    return {
+        root: backdrop,
+        open() {
+            backdrop.style.display = "grid";
+            setPending(false);
+        },
+        close() {
+            backdrop.style.display = "none";
+        },
+        dispose() {
+            backdrop.remove();
+        },
+    };
+}
+export function mountToolbar(session, options) {
+    const existingRoot = document.getElementById(TOOLBAR_ROOT_ID);
+    if (existingRoot) {
+        options.onReady();
+        return Promise.resolve({
+            root: existingRoot,
+            dispose: toolbarDisposers.get(existingRoot) ?? (() => undefined),
+        });
+    }
+    const shell = document.createElement("div");
+    shell.id = TOOLBAR_ROOT_ID;
+    markAuthoringRoot(shell);
+    shell.style.position = "fixed";
+    shell.style.top = `${TOOLBAR_INITIAL_TOP}px`;
+    shell.style.left = `${TOOLBAR_VIEWPORT_GUTTER}px`;
+    shell.style.zIndex = "2147483000";
+    shell.style.pointerEvents = "none";
+    shell.style.width = `${TOOLBAR_COLLAPSED_WIDTH}px`;
+    shell.style.height = `${TOOLBAR_COLLAPSED_HEIGHT}px`;
+    const toolbar = document.createElement("div");
+    toolbar.style.position = "relative";
+    toolbar.style.pointerEvents = "none";
+    toolbar.style.width = "100%";
+    toolbar.style.height = "100%";
+    toolbar.style.overflow = "visible";
+    toolbar.style.fontFamily =
+        'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    toolbar.style.userSelect = "none";
+    const cluster = document.createElement("div");
+    cluster.style.position = "relative";
+    cluster.style.width = `${TOOLBAR_COLLAPSED_WIDTH}px`;
+    cluster.style.height = `${TOOLBAR_COLLAPSED_HEIGHT}px`;
+    cluster.style.pointerEvents = "none";
+    let closeToolbarAndEnd = () => undefined;
+    const saveCompleteDialog = createSaveCompleteDialog({
+        onCloseAuthoring: () => {
+            closeToolbarAndEnd();
+        },
+        onRestartAuthoring: async () => {
+            const snapshot = options.recording.getSnapshot();
+            if (!snapshot.isRecording) {
+                await options.onSetRecording(true);
+            }
+            options.recording.replaceActionUnits([]);
+        },
+    });
+    const resetConfirmDialog = createResetConfirmDialog({
+        onConfirm: async () => {
+            await options.onResetRecording();
+        },
+    });
+    const saveDialog = createSaveDialog({
+        recording: options.recording,
+        onSave: options.onSave,
+        onSaveCompleted: async ({ saveMode }) => {
+            saveCompleteDialog.open({ saveMode });
+        },
+    });
+    const panelHandle = createPanel(session, options.recording, {
+        onResetRequested: async () => {
+            saveDialog.close();
+            saveCompleteDialog.close();
+            resetConfirmDialog.open();
+        },
+    });
+    const panelWrap = panelHandle.panelWrap;
+    const baseButton = createBaseButton();
+    const actionElements = AUTHORING_ACTIONS.map((action) => {
+        const button = createActionButton(action.label, action.x, action.y);
+        button.dataset.clueAuthoringAction = action.key;
+        button.append(createLucideIcon(action.icon, 20));
+        cluster.append(button);
+        return {
+            ...action,
+            button,
+        };
+    });
+    let isDisposed = false;
+    let isExpanded = false;
+    const baseAnchorX = TOOLBAR_BASE_BUTTON_EDGE_OFFSET + TOOLBAR_BASE_BUTTON_SIZE / 2;
+    const baseAnchorY = TOOLBAR_BASE_BUTTON_EDGE_OFFSET + TOOLBAR_BASE_BUTTON_SIZE / 2;
+    const maxActionOffset = Math.max(...AUTHORING_ACTIONS.map((action) => action.y));
+    const syncFloatingLayout = () => {
+        const shellLeft = Number.parseFloat(shell.style.left) || shell.offsetLeft;
+        const shellTop = Number.parseFloat(shell.style.top) || shell.offsetTop;
+        const viewport = getViewportSize();
+        const anchorViewportX = shellLeft + baseAnchorX;
+        const anchorViewportY = shellTop + baseAnchorY;
+        const bottomMostActionBottom = anchorViewportY + maxActionOffset + TOOLBAR_ACTION_BUTTON_SIZE / 2;
+        const shouldStackUp = bottomMostActionBottom > viewport.height - TOOLBAR_VIEWPORT_GUTTER;
+        const direction = shouldStackUp ? -1 : 1;
+        actionElements.forEach((action) => {
+            action.button.dataset.clueAuthoringStackDirection = shouldStackUp ? "up" : "down";
+            action.button.style.transform = isExpanded
+                ? `translate(${action.x}px, ${action.y * direction}px) scale(1)`
+                : "translate(0px, 0px) scale(0.72)";
+        });
+        if (!isExpanded) {
+            return;
+        }
+        const preferredRightPanelLeft = anchorViewportX + TOOLBAR_BASE_BUTTON_SIZE / 2 + TOOLBAR_DOCK_GAP;
+        const preferredLeftPanelLeft = anchorViewportX -
+            TOOLBAR_BASE_BUTTON_SIZE / 2 -
+            TOOLBAR_DOCK_GAP -
+            TOOLBAR_PANEL_WIDTH;
+        const maxPanelLeft = Math.max(TOOLBAR_VIEWPORT_GUTTER, viewport.width - TOOLBAR_PANEL_WIDTH - TOOLBAR_VIEWPORT_GUTTER);
+        const rightPanelLeft = Math.min(Math.max(preferredRightPanelLeft, TOOLBAR_VIEWPORT_GUTTER), maxPanelLeft);
+        const leftPanelLeft = Math.min(Math.max(preferredLeftPanelLeft, TOOLBAR_VIEWPORT_GUTTER), maxPanelLeft);
+        const canPlaceRight = preferredRightPanelLeft + TOOLBAR_PANEL_WIDTH <=
+            viewport.width - TOOLBAR_VIEWPORT_GUTTER;
+        const canPlaceLeft = preferredLeftPanelLeft >= TOOLBAR_VIEWPORT_GUTTER;
+        const nextPanelLeft = canPlaceRight || !canPlaceLeft ? rightPanelLeft : leftPanelLeft;
+        const preferredPanelTop = anchorViewportY - TOOLBAR_BASE_BUTTON_SIZE / 2;
+        const maxPanelTop = Math.max(TOOLBAR_INITIAL_TOP, viewport.height - TOOLBAR_PANEL_HEIGHT - TOOLBAR_VIEWPORT_GUTTER);
+        const nextPanelTop = Math.min(Math.max(preferredPanelTop, TOOLBAR_INITIAL_TOP), maxPanelTop);
+        panelWrap.style.left = `${Math.round(nextPanelLeft - shellLeft)}px`;
+        panelWrap.style.top = `${Math.round(nextPanelTop - shellTop)}px`;
+        panelWrap.style.transformOrigin =
+            nextPanelLeft >= anchorViewportX ? "left top" : "right top";
+    };
+    const syncExpandedState = (toolbarDrag) => {
+        baseButton.setAttribute("aria-expanded", isExpanded ? "true" : "false");
+        baseButton.style.transform = isExpanded ? "scale(1.04)" : "scale(1)";
+        baseButton.style.boxShadow = isExpanded
+            ? "rgba(17,24,39,0.14) 0px 16px 34px, rgba(17,24,39,0.1) 0px 0px 0px 1px"
+            : "rgba(17,24,39,0.1) 0px 12px 28px, rgba(17,24,39,0.08) 0px 0px 0px 1px";
+        panelWrap.style.width = isExpanded ? `${TOOLBAR_PANEL_WIDTH}px` : "0";
+        panelWrap.style.opacity = isExpanded ? "1" : "0";
+        panelWrap.style.transform = isExpanded
+            ? "translateX(0px) scale(1)"
+            : "translateX(-26px) scale(0.96)";
+        panelWrap.style.pointerEvents = isExpanded ? "auto" : "none";
+        actionElements.forEach((action, index) => {
+            action.button.style.transitionDelay = isExpanded
+                ? `${index * 28}ms`
+                : `${(actionElements.length - index - 1) * 18}ms`;
+            action.button.style.opacity = isExpanded ? "1" : "0";
+            action.button.style.pointerEvents = isExpanded ? "auto" : "none";
+        });
+        syncFloatingLayout();
+        window.requestAnimationFrame(() => {
+            toolbarDrag.updateBounds();
+        });
+    };
+    cluster.append(baseButton);
+    toolbar.append(cluster, panelWrap);
+    shell.append(toolbar);
+    (document.body ?? document.documentElement).append(shell);
+    (document.body ?? document.documentElement).append(saveDialog.root);
+    (document.body ?? document.documentElement).append(resetConfirmDialog.root);
+    (document.body ?? document.documentElement).append(saveCompleteDialog.root);
+    const initialPosition = clampToolbarPosition({
+        x: Math.round((getViewportSize().width - measureToolbar(shell).width) / 2),
+        y: TOOLBAR_INITIAL_TOP,
+        ...measureToolbar(shell),
+    });
+    applyToolbarPosition(shell, initialPosition);
+    return installToolbarDrag(shell, baseButton, {
+        onPositionChange: () => {
+            syncFloatingLayout();
+        },
+    }).then((toolbarDrag) => {
+        const handleResize = () => {
+            syncFloatingLayout();
+            toolbarDrag.updateBounds();
+        };
+        const dispose = () => {
+            if (isDisposed) {
+                return;
+            }
+            isDisposed = true;
+            toolbarDisposers.delete(shell);
+            window.removeEventListener("resize", handleResize);
+            panelHandle.dispose();
+            saveDialog.dispose();
+            resetConfirmDialog.dispose();
+            saveCompleteDialog.dispose();
+            toolbarDrag.dispose();
+        };
+        const recordAction = actionElements.find((action) => action.key === "record");
+        recordAction?.button.addEventListener("click", () => {
+            if (!recordButton || recordButton.dataset.pending === "true") {
+                return;
+            }
+            recordButton.dataset.pending = "true";
+            recordButton.disabled = true;
+            void options
+                .onSetRecording(!options.recording.getSnapshot().isRecording)
+                .finally(() => {
+                recordButton.dataset.pending = "false";
+                recordButton.disabled = false;
+            });
+        });
+        const recordButton = recordAction?.button ?? null;
+        const unsubscribeRecordingState = options.recording.subscribe((snapshot) => {
+            if (recordButton) {
+                setActionButtonVisual(recordButton, snapshot.isRecording
+                    ? "イベント記録を一時停止する"
+                    : "イベントを記録する", snapshot.isRecording ? PauseCircle : recordAction?.icon ?? []);
+                recordButton.setAttribute("aria-pressed", snapshot.isRecording ? "true" : "false");
+                recordButton.style.background = snapshot.isRecording
+                    ? "rgba(181,129,79,0.14)"
+                    : "#ffffff";
+                recordButton.style.color = snapshot.isRecording
+                    ? "#8f5b2f"
+                    : "#111827";
+            }
+        });
+        const disposeToolbar = () => {
+            unsubscribeRecordingState();
+            dispose();
+        };
+        closeToolbarAndEnd = () => {
+            saveDialog.close();
+            resetConfirmDialog.close();
+            saveCompleteDialog.close();
+            disposeToolbar();
+            shell.remove();
+            delete document.documentElement.dataset.clueBusinessEventAuthoring;
+            options.onClose();
+        };
+        const closeAction = actionElements.find((action) => action.key === "close");
+        const saveAction = actionElements.find((action) => action.key === "save");
+        saveAction?.button.addEventListener("click", () => {
+            saveCompleteDialog.close();
+            saveDialog.open();
+        });
+        closeAction?.button.addEventListener("click", () => {
+            closeToolbarAndEnd();
+        });
+        baseButton.addEventListener("click", () => {
+            if (toolbarDrag.consumeSuppressedClick()) {
+                return;
+            }
+            isExpanded = !isExpanded;
+            syncExpandedState(toolbarDrag);
+        });
+        syncExpandedState(toolbarDrag);
+        window.addEventListener("resize", handleResize);
+        toolbarDisposers.set(shell, disposeToolbar);
+        document.documentElement.dataset.clueBusinessEventAuthoring =
+            session.session_id;
+        options.onReady();
+        return {
+            root: shell,
+            dispose: disposeToolbar,
+        };
+    });
+}