@clue-ai/browser-sdk 0.0.1

package/dist/authoring/surface.js

@@ -0,0 +1,63 @@
+export const AUTHORING_ROOT_ATTRIBUTE = "data-clue-authoring-root";
+export const AUTHORING_ROOT_ATTRIBUTE_VALUE = "true";
+export const AUTHORING_INTERNAL_REQUEST_HEADER = "x-clue-authoring-request";
+export const AUTHORING_INTERNAL_REQUEST_HEADER_VALUE = "true";
+export const AUTHORING_INTERNAL_REQUEST_PATH_SEGMENT = "/business-events/authoring";
+function debugAuthoringExclusion(payload) {
+    if (typeof console === "undefined" || typeof console.debug !== "function") {
+        return;
+    }
+    console.debug("[clue] excluded authoring observation", payload);
+}
+export function markAuthoringRoot(element) {
+    element.setAttribute(AUTHORING_ROOT_ATTRIBUTE, AUTHORING_ROOT_ATTRIBUTE_VALUE);
+}
+export function resolveAuthoringSurfaceRoot(target) {
+    if (!(target instanceof Element)) {
+        return null;
+    }
+    const markerSelector = `[${AUTHORING_ROOT_ATTRIBUTE}="${AUTHORING_ROOT_ATTRIBUTE_VALUE}"]`;
+    const markedRoot = target.closest(markerSelector);
+    if (markedRoot instanceof HTMLElement) {
+        return markedRoot;
+    }
+    return null;
+}
+export function isWithinAuthoringSurface(target) {
+    const root = resolveAuthoringSurfaceRoot(target);
+    if (!root) {
+        return false;
+    }
+    debugAuthoringExclusion({
+        excluded: true,
+        exclusion_reason: target === root ? "authoring_surface_dom" : "authoring_surface_descendant",
+        matched_authoring_root: root.id || root.getAttribute(AUTHORING_ROOT_ATTRIBUTE),
+    });
+    return true;
+}
+export function hasAuthoringInternalRequestHeader(headers) {
+    return Object.entries(headers).some(([key, value]) => {
+        return (key.trim().toLowerCase() === AUTHORING_INTERNAL_REQUEST_HEADER &&
+            value.trim().length > 0 &&
+            value.trim().toLowerCase() !== "false");
+    });
+}
+export function isAuthoringInternalRequestUrl(rawUrl) {
+    if (!rawUrl) {
+        return false;
+    }
+    try {
+        const resolved = new URL(rawUrl, globalThis.location?.href);
+        return resolved.pathname.includes(AUTHORING_INTERNAL_REQUEST_PATH_SEGMENT);
+    }
+    catch {
+        return rawUrl.includes(AUTHORING_INTERNAL_REQUEST_PATH_SEGMENT);
+    }
+}
+export function logAuthoringRequestExclusion(matchedRequestRule) {
+    debugAuthoringExclusion({
+        excluded: true,
+        exclusion_reason: "authoring_internal_request",
+        matched_request_rule: matchedRequestRule,
+    });
+}

package/dist/authoring/toolbar-constants.d.ts

@@ -0,0 +1,23 @@
+import { type IconNode } from "lucide";
+export declare const TOOLBAR_ROOT_ID = "clue-business-event-authoring-toolbar";
+export declare const TOOLBAR_INITIAL_TOP = 20;
+export declare const TOOLBAR_VIEWPORT_GUTTER = 24;
+export declare const TOOLBAR_CLUSTER_SIZE = 176;
+export declare const TOOLBAR_CLUSTER_HEIGHT = 220;
+export declare const TOOLBAR_PANEL_WIDTH = 288;
+export declare const TOOLBAR_PANEL_HEIGHT = 540;
+export declare const TOOLBAR_DOCK_GAP = 24;
+export declare const TOOLBAR_BASE_BUTTON_SIZE = 40;
+export declare const TOOLBAR_BASE_BUTTON_EDGE_OFFSET = 18;
+export declare const TOOLBAR_COLLAPSED_WIDTH: number;
+export declare const TOOLBAR_COLLAPSED_HEIGHT: number;
+export declare const TOOLBAR_ACTION_BUTTON_SIZE = 44;
+export declare const TOOLBAR_FALLBACK_HEIGHT = 540;
+export type ToolbarActionDefinition = {
+    key: string;
+    label: string;
+    icon: IconNode;
+    x: number;
+    y: number;
+};
+export declare const AUTHORING_ACTIONS: readonly ToolbarActionDefinition[];

package/dist/authoring/toolbar-constants.js

@@ -0,0 +1,42 @@
+import { CircleDot, Download, LogOut } from "lucide";
+export const TOOLBAR_ROOT_ID = "clue-business-event-authoring-toolbar";
+export const TOOLBAR_INITIAL_TOP = 20;
+export const TOOLBAR_VIEWPORT_GUTTER = 24;
+export const TOOLBAR_CLUSTER_SIZE = 176;
+export const TOOLBAR_CLUSTER_HEIGHT = 220;
+export const TOOLBAR_PANEL_WIDTH = 288;
+export const TOOLBAR_PANEL_HEIGHT = 540;
+export const TOOLBAR_DOCK_GAP = 24;
+export const TOOLBAR_BASE_BUTTON_SIZE = 40;
+export const TOOLBAR_BASE_BUTTON_EDGE_OFFSET = 18;
+export const TOOLBAR_COLLAPSED_WIDTH = TOOLBAR_BASE_BUTTON_EDGE_OFFSET * 2 + TOOLBAR_BASE_BUTTON_SIZE;
+export const TOOLBAR_COLLAPSED_HEIGHT = TOOLBAR_BASE_BUTTON_EDGE_OFFSET * 2 + TOOLBAR_BASE_BUTTON_SIZE;
+export const TOOLBAR_ACTION_BUTTON_SIZE = 44;
+export const TOOLBAR_FALLBACK_HEIGHT = TOOLBAR_PANEL_HEIGHT;
+const AUTHORING_ACTION_STACK_GAP = 8;
+const AUTHORING_ACTION_STACK_START = (TOOLBAR_BASE_BUTTON_SIZE + TOOLBAR_ACTION_BUTTON_SIZE) / 2 +
+    AUTHORING_ACTION_STACK_GAP;
+const AUTHORING_ACTION_STACK_STEP = TOOLBAR_ACTION_BUTTON_SIZE + AUTHORING_ACTION_STACK_GAP;
+export const AUTHORING_ACTIONS = [
+    {
+        key: "record",
+        label: "イベントを記録する",
+        icon: CircleDot,
+        x: 0,
+        y: AUTHORING_ACTION_STACK_START,
+    },
+    {
+        key: "save",
+        label: "保存/下書き保存する",
+        icon: Download,
+        x: 0,
+        y: AUTHORING_ACTION_STACK_START + AUTHORING_ACTION_STACK_STEP,
+    },
+    {
+        key: "close",
+        label: "終了する",
+        icon: LogOut,
+        x: 0,
+        y: AUTHORING_ACTION_STACK_START + AUTHORING_ACTION_STACK_STEP * 2,
+    },
+];

package/dist/authoring/toolbar-drag.d.ts

@@ -0,0 +1,29 @@
+export type ToolbarDragHandle = {
+    dispose: () => void;
+    updateBounds: () => void;
+    consumeSuppressedClick: () => boolean;
+};
+export declare function getViewportSize(): {
+    width: number;
+    height: number;
+};
+export declare function measureToolbar(toolbar: HTMLElement): {
+    width: number;
+    height: number;
+};
+export declare function clampToolbarPosition(input: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+};
+export declare function applyToolbarPosition(shell: HTMLElement, position: {
+    x: number;
+    y: number;
+}): void;
+export declare function installToolbarDrag(shell: HTMLElement, handle: HTMLElement, options?: {
+    onPositionChange?: () => void;
+}): Promise<ToolbarDragHandle>;

package/dist/authoring/toolbar-drag.js

@@ -0,0 +1,270 @@
+import { TOOLBAR_FALLBACK_HEIGHT, TOOLBAR_INITIAL_TOP, TOOLBAR_VIEWPORT_GUTTER, } from "./toolbar-constants";
+export function getViewportSize() {
+    return {
+        width: Math.max(document.documentElement.clientWidth, window.innerWidth, 0),
+        height: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
+    };
+}
+function readConfiguredSize(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+export function measureToolbar(toolbar) {
+    const viewport = getViewportSize();
+    return {
+        width: toolbar.offsetWidth ||
+            readConfiguredSize(toolbar.style.width) ||
+            Math.max(0, viewport.width - TOOLBAR_VIEWPORT_GUTTER * 2),
+        height: toolbar.offsetHeight ||
+            readConfiguredSize(toolbar.style.height) ||
+            TOOLBAR_FALLBACK_HEIGHT,
+    };
+}
+export function clampToolbarPosition(input) {
+    const viewport = getViewportSize();
+    const minX = TOOLBAR_VIEWPORT_GUTTER;
+    const minY = TOOLBAR_INITIAL_TOP;
+    const maxX = Math.max(minX, viewport.width - input.width - TOOLBAR_VIEWPORT_GUTTER);
+    const maxY = Math.max(minY, viewport.height - input.height - TOOLBAR_VIEWPORT_GUTTER);
+    return {
+        x: Math.min(Math.max(input.x, minX), maxX),
+        y: Math.min(Math.max(input.y, minY), maxY),
+    };
+}
+export function applyToolbarPosition(shell, position) {
+    shell.style.left = `${position.x}px`;
+    shell.style.top = `${position.y}px`;
+}
+function readToolbarPosition(shell) {
+    const styleLeft = Number.parseFloat(shell.style.left);
+    const styleTop = Number.parseFloat(shell.style.top);
+    return {
+        x: Number.isFinite(styleLeft) ? styleLeft : shell.offsetLeft,
+        y: Number.isFinite(styleTop) ? styleTop : shell.offsetTop,
+    };
+}
+async function loadPlainDraggable() {
+    const module = (await import("plain-draggable/plain-draggable.esm.js"));
+    if (typeof module.default !== "function") {
+        throw new TypeError("plain-draggable constructor is unavailable");
+    }
+    return module.default;
+}
+function waitForNextFrame() {
+    return new Promise((resolve) => {
+        window.requestAnimationFrame(() => {
+            resolve();
+        });
+    });
+}
+async function ensureConnectedElement(element) {
+    if (element.isConnected) {
+        return;
+    }
+    await waitForNextFrame();
+    if (element.isConnected) {
+        return;
+    }
+    await waitForNextFrame();
+}
+function installNativeToolbarDrag(shell, handle, options) {
+    let suppressClick = false;
+    let pointerId = null;
+    let startPointerX = 0;
+    let startPointerY = 0;
+    let startLeft = 0;
+    let startTop = 0;
+    const readCurrentPosition = () => {
+        const currentToolbarPosition = readToolbarPosition(shell);
+        const nextPosition = clampToolbarPosition({
+            x: currentToolbarPosition.x,
+            y: currentToolbarPosition.y,
+            ...measureToolbar(shell),
+        });
+        applyToolbarPosition(shell, nextPosition);
+        return nextPosition;
+    };
+    const removeWindowListeners = () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerUp);
+        window.removeEventListener("pointercancel", handlePointerUp);
+    };
+    const handlePointerMove = (event) => {
+        if (pointerId === null || event.pointerId !== pointerId) {
+            return;
+        }
+        const deltaX = event.clientX - startPointerX;
+        const deltaY = event.clientY - startPointerY;
+        const nextPosition = clampToolbarPosition({
+            x: startLeft + deltaX,
+            y: startTop + deltaY,
+            ...measureToolbar(shell),
+        });
+        applyToolbarPosition(shell, nextPosition);
+        if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
+            suppressClick = true;
+        }
+        options?.onPositionChange?.();
+    };
+    const handlePointerUp = (event) => {
+        if (pointerId === null || event.pointerId !== pointerId) {
+            return;
+        }
+        if (typeof handle.releasePointerCapture === "function") {
+            try {
+                handle.releasePointerCapture(pointerId);
+            }
+            catch {
+                // Ignore release failures from already-finished pointer sessions.
+            }
+        }
+        pointerId = null;
+        handle.style.cursor = "grab";
+        removeWindowListeners();
+        options?.onPositionChange?.();
+    };
+    const handlePointerDown = (event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        const currentPosition = readCurrentPosition();
+        pointerId = event.pointerId;
+        startPointerX = event.clientX;
+        startPointerY = event.clientY;
+        startLeft = currentPosition.x;
+        startTop = currentPosition.y;
+        suppressClick = false;
+        handle.style.cursor = "grabbing";
+        if (typeof handle.setPointerCapture === "function") {
+            try {
+                handle.setPointerCapture(pointerId);
+            }
+            catch {
+                // Ignore capture failures and continue with window listeners.
+            }
+        }
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
+        event.preventDefault();
+    };
+    handle.style.cursor = "grab";
+    handle.addEventListener("pointerdown", handlePointerDown);
+    return {
+        dispose() {
+            handle.style.cursor = "grab";
+            handle.removeEventListener("pointerdown", handlePointerDown);
+            removeWindowListeners();
+        },
+        updateBounds() {
+            readCurrentPosition();
+            options?.onPositionChange?.();
+        },
+        consumeSuppressedClick() {
+            if (!suppressClick) {
+                return false;
+            }
+            suppressClick = false;
+            return true;
+        },
+    };
+}
+export async function installToolbarDrag(shell, handle, options) {
+    let suppressClick = false;
+    let dragStartedFromMove = false;
+    await ensureConnectedElement(shell);
+    const PlainDraggable = await loadPlainDraggable().catch(() => null);
+    const buildContainmentRect = () => {
+        const size = measureToolbar(shell);
+        const viewport = getViewportSize();
+        return {
+            left: TOOLBAR_VIEWPORT_GUTTER,
+            top: TOOLBAR_INITIAL_TOP,
+            right: Math.max(TOOLBAR_VIEWPORT_GUTTER + size.width, viewport.width - TOOLBAR_VIEWPORT_GUTTER),
+            bottom: Math.max(TOOLBAR_INITIAL_TOP + size.height, viewport.height - TOOLBAR_VIEWPORT_GUTTER),
+        };
+    };
+    let draggable;
+    if (!PlainDraggable) {
+        return installNativeToolbarDrag(shell, handle, options);
+    }
+    const PlainDraggableConstructor = PlainDraggable;
+    const createDraggable = () => new PlainDraggableConstructor(shell, {
+        handle,
+        leftTop: true,
+        zIndex: false,
+        containment: buildContainmentRect(),
+        onMoveStart() {
+            dragStartedFromMove = true;
+            handle.style.cursor = "grabbing";
+        },
+        onDrag(position) {
+            const nextPosition = clampToolbarPosition({
+                x: position.left,
+                y: position.top,
+                ...measureToolbar(shell),
+            });
+            if (nextPosition.x === position.left &&
+                nextPosition.y === position.top) {
+                return;
+            }
+            draggable.left = nextPosition.x;
+            draggable.top = nextPosition.y;
+            draggable.position();
+            options?.onPositionChange?.();
+        },
+        onDragEnd() {
+            handle.style.cursor = "grab";
+            suppressClick = dragStartedFromMove;
+            dragStartedFromMove = false;
+            options?.onPositionChange?.();
+        },
+    });
+    try {
+        draggable = createDraggable();
+    }
+    catch (error) {
+        if (error instanceof Error &&
+            error.message.includes("This element is not accepted")) {
+            await waitForNextFrame();
+            try {
+                draggable = createDraggable();
+            }
+            catch {
+                return installNativeToolbarDrag(shell, handle, options);
+            }
+        }
+        else {
+            return installNativeToolbarDrag(shell, handle, options);
+        }
+    }
+    return {
+        dispose() {
+            handle.style.cursor = "grab";
+            draggable.remove();
+        },
+        updateBounds() {
+            const currentToolbarPosition = readToolbarPosition(shell);
+            const nextPosition = clampToolbarPosition({
+                x: currentToolbarPosition.x,
+                y: currentToolbarPosition.y,
+                ...measureToolbar(shell),
+            });
+            applyToolbarPosition(shell, nextPosition);
+            draggable.setOptions({
+                containment: buildContainmentRect(),
+                left: nextPosition.x,
+                top: nextPosition.y,
+            });
+            draggable.position();
+            options?.onPositionChange?.();
+        },
+        consumeSuppressedClick() {
+            if (!suppressClick) {
+                return false;
+            }
+            suppressClick = false;
+            return true;
+        },
+    };
+}

package/dist/authoring/toolbar-view.d.ts

@@ -0,0 +1,21 @@
+import type { AuthoringRecordingController } from "./recording";
+import type { BusinessEventAuthoringSession } from "./session";
+export type ToolbarMountHandle = {
+    root: HTMLElement;
+    dispose: () => void;
+};
+type MountToolbarOptions = {
+    onClose: () => void;
+    onReady: () => void;
+    recording: AuthoringRecordingController;
+    onSetRecording: (isRecording: boolean) => Promise<void>;
+    onResetRecording: () => Promise<void>;
+    onSave: (input: {
+        title: string;
+        description: string;
+        saveMode: "draft" | "publish";
+        selectedActionUnitIds: string[];
+    }) => Promise<void>;
+};
+export declare function mountToolbar(session: BusinessEventAuthoringSession, options: MountToolbarOptions): Promise<ToolbarMountHandle>;
+export {};