@syntrologie/adapt-overlays 2.14.0 → 2.15.0

package/dist/WorkflowWidgetLit.js

@@ -0,0 +1,617 @@
+/**
+ * WorkflowWidgetLit — Lit web component for the WorkflowTracker.
+ *
+ * Lit equivalent of WorkflowWidget.tsx / WorkflowWidgetInner.
+ * Tag name: <syntro-workflow-tracker>
+ *
+ * Responsibilities (mirrors the React version):
+ * 1. Scan runtime.actions.getActive() for tours with `workflow` field
+ * 2. Re-scan on tour.started / tour.resumed events
+ * 3. Load persisted state from runtime.state.user namespace
+ * 4. Subscribe to tour.* events and update workflow entries
+ * 5. Render workflow cards with progress indicators and step lists
+ * 6. Handle step clicks (publish workflow:jump_to_step)
+ * 7. Handle dismiss (persist and re-render)
+ * 8. Show toast notifications for newly discovered workflows
+ *
+ * Decorator-free: uses `static override properties` (tsconfig has no
+ * experimentalDecorators).
+ *
+ * Uses createRenderRoot() { return this; } for light DOM so host-page CSS
+ * variables (--se-color-*, --se-font-family, etc.) flow through without a
+ * nested shadow boundary.
+ */
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _WorkflowTrackerLit_unsubTourStarted, _WorkflowTrackerLit_unsubTourEvents, _WorkflowTrackerLit_toastCleanups, _WorkflowTrackerLit_notified, _WorkflowTrackerLit_completedMap, _WorkflowTrackerLit_persistInitialized, _WorkflowTrackerLit_tourWorkflows;
+import { html, LitElement, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+// Design-system fallback tokens — inlined because this adaptive ships to
+// customer pages and themes via `--se-color-*` CSS variables. The TOKEN_*
+// values are only used when a customer hasn't set their own theme.
+// Values match packages/design-system/src/tokens/colors.ts.
+//   blue[4] #1969fe · green[4] #24ad32
+//   slateGrey[2] #0e1114 · slateGrey[7] #677384 · slateGrey[12] #f6f7f9
+//   slateGrey[9] #a8afba · base.white #ffffff
+const TOKEN_BLUE_4 = '#1969fe';
+const TOKEN_GREEN_4 = '#24ad32';
+const TOKEN_SLATE_2 = '#0e1114';
+const TOKEN_SLATE_7 = '#677384';
+const TOKEN_SLATE_9 = '#a8afba';
+const TOKEN_SLATE_12 = '#f6f7f9';
+const TOKEN_WHITE = '#ffffff';
+// ============================================================================
+// Helpers (mirrored from WorkflowWidget.tsx)
+// ============================================================================
+/**
+ * Show a toast notification for a workflow tour.
+ * Appends to document.body so position:fixed is scoped to the viewport,
+ * not to a shadow DOM container.
+ */
+function showWorkflowToast(notification) {
+    const toast = document.createElement('div');
+    toast.setAttribute('data-testid', 'workflow-toast');
+    Object.assign(toast.style, {
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: '2147483646',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        backgroundColor: `var(--se-color-bg-surface, ${TOKEN_WHITE})`,
+        color: `var(--se-color-text-primary, ${TOKEN_SLATE_2})`,
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        maxWidth: '320px',
+        fontFamily: 'var(--se-font-family, system-ui, sans-serif)',
+        fontSize: '14px',
+        lineHeight: '1.4',
+        transition: 'opacity 0.3s ease',
+    });
+    const titleEl = document.createElement('div');
+    titleEl.style.fontWeight = '600';
+    titleEl.textContent = notification.title;
+    toast.appendChild(titleEl);
+    if (notification.body) {
+        const bodyEl = document.createElement('div');
+        bodyEl.style.marginTop = '4px';
+        bodyEl.style.fontSize = '13px';
+        bodyEl.style.color = 'var(--se-color-text-secondary, #666)';
+        bodyEl.textContent = notification.body;
+        toast.appendChild(bodyEl);
+    }
+    document.body.appendChild(toast);
+    let removeTimer;
+    const fadeTimer = setTimeout(() => {
+        toast.style.opacity = '0';
+        removeTimer = setTimeout(() => {
+            toast.remove();
+        }, 300);
+    }, 4000);
+    return () => {
+        clearTimeout(fadeTimer);
+        clearTimeout(removeTimer);
+        toast.remove();
+    };
+}
+/**
+ * Extract workflow-enabled tours from active actions (runtime.actions.getActive()).
+ * Only actions with kind 'overlays:tour', a tourId, and a workflow field are included.
+ */
+function extractWorkflowsFromActive(activeActions) {
+    const workflows = new Map();
+    for (const entry of activeActions) {
+        const action = entry.action;
+        if (action.kind === 'overlays:tour' && action.workflow && action.tourId) {
+            const meta = action.workflow;
+            const rawSteps = action.steps || [];
+            const steps = rawSteps.map((s) => ({
+                id: s.id,
+                title: meta.stepTitles?.[s.id] || s.id,
+            }));
+            workflows.set(action.tourId, { meta, steps });
+        }
+    }
+    return workflows;
+}
+// ============================================================================
+// WorkflowTrackerLit — Lit Element
+// ============================================================================
+const TAG_NAME = 'syntro-workflow-tracker';
+export class WorkflowTrackerLit extends LitElement {
+    constructor() {
+        // ── Static properties (no decorators) ────────────────────────────────────
+        super(...arguments);
+        // ── Public properties ─────────────────────────────────────────────────────
+        this.runtimeRef = null;
+        // ── Internal reactive state ───────────────────────────────────────────────
+        /** @internal */ this._workflowEntries = [];
+        /**
+         * @internal
+         * Bumped on tour.started / tour.resumed to trigger re-scan of active actions.
+         */
+        /** @internal */ this._actionVersion = 0;
+        // ── Private (non-reactive) fields ─────────────────────────────────────────
+        // Subscription cleanup functions
+        _WorkflowTrackerLit_unsubTourStarted.set(this, null);
+        _WorkflowTrackerLit_unsubTourEvents.set(this, null);
+        // Toast cleanup tracking
+        _WorkflowTrackerLit_toastCleanups.set(this, []);
+        // Notifications already shown (mirrors notifiedRef)
+        _WorkflowTrackerLit_notified.set(this, new Set());
+        // Completed timestamps (mirrors completedMapRef)
+        _WorkflowTrackerLit_completedMap.set(this, {});
+        // Whether persisted state has been loaded
+        _WorkflowTrackerLit_persistInitialized.set(this, false);
+        // Cache of the last scanned tourWorkflows map (used by event handler)
+        _WorkflowTrackerLit_tourWorkflows.set(this, new Map());
+    }
+    // ── Light DOM ─────────────────────────────────────────────────────────────
+    /**
+     * Render into the element itself (light DOM) so host-page CSS variables
+     * flow through without a nested shadow boundary.
+     */
+    createRenderRoot() {
+        return this;
+    }
+    // ── Helpers ───────────────────────────────────────────────────────────────
+    get _stateNs() {
+        return this.runtimeRef?.state?.user?.ns?.('workflows') ?? null;
+    }
+    /**
+     * Re-scan active actions and update _tourWorkflows + entries.
+     * Called initially and whenever _actionVersion bumps.
+     */
+    _rescanWorkflows() {
+        const active = this.runtimeRef?.actions?.getActive?.() ?? [];
+        const workflows = extractWorkflowsFromActive(active);
+        __classPrivateFieldSet(this, _WorkflowTrackerLit_tourWorkflows, workflows, "f");
+        if (workflows.size === 0)
+            return;
+        const stateNs = this._stateNs;
+        const dismissed = stateNs?.get('dismissed') ?? [];
+        const completed = stateNs?.get('completed') ?? {};
+        this._workflowEntries = (() => {
+            const existingIds = new Set(this._workflowEntries.map((e) => e.tourId));
+            const newEntries = [];
+            for (const [tourId, { meta, steps }] of workflows) {
+                if (existingIds.has(tourId))
+                    continue;
+                let status = 'active';
+                if (dismissed.includes(tourId)) {
+                    status = 'dismissed';
+                }
+                else if (completed[tourId]) {
+                    status = 'completed';
+                }
+                newEntries.push({
+                    tourId,
+                    meta,
+                    steps,
+                    currentStepId: null,
+                    completedSteps: [],
+                    status,
+                    completedAt: completed[tourId] || undefined,
+                });
+            }
+            return newEntries.length > 0
+                ? [...this._workflowEntries, ...newEntries]
+                : this._workflowEntries;
+        })();
+        // Fire toast notifications for newly discovered active tours
+        for (const [tourId, { meta }] of workflows) {
+            const dismissed2 = stateNs?.get('dismissed') ?? [];
+            const completed2 = stateNs?.get('completed') ?? {};
+            if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").has(tourId) &&
+                meta.notification &&
+                !dismissed2.includes(tourId) &&
+                !completed2[tourId]) {
+                __classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").add(tourId);
+                stateNs?.set('notified', [...__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f")]);
+                const cleanup = showWorkflowToast(meta.notification);
+                __classPrivateFieldGet(this, _WorkflowTrackerLit_toastCleanups, "f").push(cleanup);
+            }
+        }
+    }
+    // ── Lifecycle ─────────────────────────────────────────────────────────────
+    connectedCallback() {
+        super.connectedCallback();
+        this._initSubscriptions();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._teardownSubscriptions();
+        for (const cleanup of __classPrivateFieldGet(this, _WorkflowTrackerLit_toastCleanups, "f")) {
+            cleanup();
+        }
+        __classPrivateFieldSet(this, _WorkflowTrackerLit_toastCleanups, [], "f");
+    }
+    updated(changed) {
+        if (changed.has('runtimeRef')) {
+            // Re-wire subscriptions when the runtime ref changes
+            this._teardownSubscriptions();
+            this._initSubscriptions();
+        }
+        if (changed.has('_actionVersion')) {
+            this._rescanWorkflows();
+        }
+    }
+    // ── Subscription management ───────────────────────────────────────────────
+    _initSubscriptions() {
+        if (!this.runtimeRef?.events?.subscribe)
+            return;
+        // Initialize persisted state once
+        if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_persistInitialized, "f") && this._stateNs) {
+            const notified = this._stateNs.get('notified') ?? [];
+            for (const id of notified) {
+                __classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").add(id);
+            }
+            const completed = this._stateNs.get('completed') ?? {};
+            __classPrivateFieldSet(this, _WorkflowTrackerLit_completedMap, { ...completed }, "f");
+            __classPrivateFieldSet(this, _WorkflowTrackerLit_persistInitialized, true, "f");
+        }
+        // Subscribe to tour.started / tour.resumed to re-scan getActive()
+        __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourStarted, this.runtimeRef.events.subscribe({ names: ['tour.started', 'tour.resumed'] }, () => {
+            this._actionVersion += 1;
+        }), "f");
+        // Subscribe to all tour.* events for state updates
+        __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourEvents, this.runtimeRef.events.subscribe({ patterns: ['^tour\\.'] }, (event) => {
+            this._handleTourEvent(event);
+        }), "f");
+        // Initial scan
+        this._rescanWorkflows();
+    }
+    _teardownSubscriptions() {
+        __classPrivateFieldGet(this, _WorkflowTrackerLit_unsubTourStarted, "f")?.call(this);
+        __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourStarted, null, "f");
+        __classPrivateFieldGet(this, _WorkflowTrackerLit_unsubTourEvents, "f")?.call(this);
+        __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourEvents, null, "f");
+    }
+    // ── Event handler ─────────────────────────────────────────────────────────
+    _handleTourEvent(event) {
+        const tourId = event.props?.tourId;
+        if (!tourId)
+            return;
+        // If the tour isn't tracked yet and this is a start event, bump actionVersion
+        // so updated() triggers a re-scan.
+        if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_tourWorkflows, "f").has(tourId) && event.name === 'tour.started') {
+            this._actionVersion += 1;
+            return;
+        }
+        if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_tourWorkflows, "f").has(tourId))
+            return;
+        const stateNs = this._stateNs;
+        this._workflowEntries = this._workflowEntries.map((entry) => {
+            if (entry.tourId !== tourId)
+                return entry;
+            switch (event.name) {
+                case 'tour.started': {
+                    const startStepId = event.props?.startStepId || entry.steps[0]?.id || null;
+                    // Show toast if not already notified
+                    if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").has(tourId)) {
+                        __classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").add(tourId);
+                        stateNs?.set('notified', [...__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f")]);
+                        const workflow = __classPrivateFieldGet(this, _WorkflowTrackerLit_tourWorkflows, "f").get(tourId);
+                        if (workflow?.meta.notification) {
+                            const cleanup = showWorkflowToast(workflow.meta.notification);
+                            __classPrivateFieldGet(this, _WorkflowTrackerLit_toastCleanups, "f").push(cleanup);
+                        }
+                    }
+                    // Persist active state
+                    const activeIds = this._workflowEntries
+                        .filter((e) => e.status === 'active' || e.tourId === tourId)
+                        .map((e) => e.tourId);
+                    if (!activeIds.includes(tourId)) {
+                        activeIds.push(tourId);
+                    }
+                    stateNs?.set('active', [...new Set(activeIds)]);
+                    return {
+                        ...entry,
+                        status: 'active',
+                        currentStepId: startStepId,
+                        completedSteps: entry.status === 'active' ? entry.completedSteps : [],
+                    };
+                }
+                case 'tour.step_started': {
+                    const stepId = event.props?.stepId;
+                    return {
+                        ...entry,
+                        currentStepId: stepId || entry.currentStepId,
+                    };
+                }
+                case 'tour.step_changed': {
+                    const previousStepId = event.props?.previousStepId;
+                    const nextStepId = event.props?.nextStepId;
+                    const completedSteps = previousStepId && !entry.completedSteps.includes(previousStepId)
+                        ? [...entry.completedSteps, previousStepId]
+                        : entry.completedSteps;
+                    return {
+                        ...entry,
+                        currentStepId: nextStepId || entry.currentStepId,
+                        completedSteps,
+                    };
+                }
+                case 'tour.completed': {
+                    const completedAt = Date.now();
+                    __classPrivateFieldGet(this, _WorkflowTrackerLit_completedMap, "f")[tourId] = completedAt;
+                    stateNs?.set('completed', { ...__classPrivateFieldGet(this, _WorkflowTrackerLit_completedMap, "f") });
+                    return {
+                        ...entry,
+                        status: 'completed',
+                        currentStepId: null,
+                        completedSteps: entry.steps.map((s) => s.id),
+                        completedAt,
+                    };
+                }
+                case 'tour.paused':
+                    return entry;
+                default:
+                    return entry;
+            }
+        });
+    }
+    // ── User action handlers ──────────────────────────────────────────────────
+    _handleStepClick(tourId, stepId) {
+        this.runtimeRef?.events?.publish('workflow:jump_to_step', { tourId, stepId });
+        this.dispatchEvent(new CustomEvent('workflow-step-click', {
+            bubbles: true,
+            detail: { tourId, stepId },
+        }));
+    }
+    _handleDismiss(tourId) {
+        this._workflowEntries = this._workflowEntries.map((entry) => entry.tourId === tourId ? { ...entry, status: 'dismissed' } : entry);
+        const dismissedIds = this._workflowEntries
+            .filter((e) => e.status === 'dismissed')
+            .map((e) => e.tourId);
+        this._stateNs?.set('dismissed', dismissedIds);
+        this.dispatchEvent(new CustomEvent('workflow-dismissed', {
+            bubbles: true,
+            detail: { tourId },
+        }));
+    }
+    // ── Render helpers ────────────────────────────────────────────────────────
+    _renderProgressBar(completed, total) {
+        const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
+        const trackStyles = {
+            width: '100%',
+            height: '6px',
+            borderRadius: '9999px',
+            background: 'rgba(255,255,255,0.08)',
+            overflow: 'hidden',
+        };
+        const fillStyles = {
+            height: '100%',
+            borderRadius: '9999px',
+            background: `var(--se-color-primary, ${TOKEN_BLUE_4})`,
+            transition: 'width 0.3s ease',
+            width: `${percent}%`,
+        };
+        return html `
+      <div style=${styleMap(trackStyles)}>
+        <div
+          role="progressbar"
+          aria-valuenow=${percent}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          style=${styleMap(fillStyles)}
+        ></div>
+      </div>
+    `;
+    }
+    _renderStepItem(step, isCompleted, isCurrent, tourId) {
+        const btnStyles = {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            width: '100%',
+            padding: '6px 8px',
+            borderRadius: '4px',
+            border: 'none',
+            background: 'transparent',
+            cursor: 'pointer',
+            textAlign: 'left',
+            fontSize: '12px',
+            lineHeight: '1.4',
+            color: isCurrent
+                ? `var(--se-color-text-primary, ${TOKEN_SLATE_12})`
+                : `var(--se-color-text-secondary, ${TOKEN_SLATE_9})`,
+            fontWeight: isCurrent ? '600' : '400',
+        };
+        const indicatorWrapStyles = {
+            flexShrink: '0',
+            width: '16px',
+            textAlign: 'center',
+        };
+        const dotStyles = {
+            display: 'inline-block',
+            width: '6px',
+            height: '6px',
+            borderRadius: '50%',
+            background: isCurrent ? `var(--se-color-primary, ${TOKEN_BLUE_4})` : 'rgba(255,255,255,0.12)',
+        };
+        const checkStyles = {
+            color: `var(--se-color-success, ${TOKEN_GREEN_4})`,
+        };
+        const labelStyles = {
+            flex: '1',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        };
+        const indicator = isCompleted
+            ? html `<span role="img" aria-label="completed" style=${styleMap(checkStyles)}>&#10003;</span>`
+            : isCurrent
+                ? html `<span style=${styleMap(dotStyles)}></span>`
+                : html `<span style=${styleMap(dotStyles)}></span>`;
+        return html `
+      <button
+        type="button"
+        data-testid=${`step-${step.id}`}
+        data-current=${isCurrent ? 'true' : nothing}
+        data-completed=${isCompleted ? 'true' : nothing}
+        aria-current=${isCurrent ? 'step' : nothing}
+        style=${styleMap(btnStyles)}
+        @click=${() => this._handleStepClick(tourId, step.id)}
+      >
+        <span style=${styleMap(indicatorWrapStyles)}>${indicator}</span>
+        <span style=${styleMap(labelStyles)}>${step.title}</span>
+      </button>
+    `;
+    }
+    _renderWorkflowCard(workflow) {
+        const completedCount = workflow.completedSteps.length;
+        const totalSteps = workflow.steps.length;
+        const cardStyles = {
+            padding: '12px',
+            borderRadius: '8px',
+            border: '1px solid rgba(255,255,255,0.08)',
+            background: 'rgba(255,255,255,0.02)',
+        };
+        const headerStyles = {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            marginBottom: '8px',
+        };
+        const titleStyles = {
+            flex: '1',
+            fontSize: '13px',
+            fontWeight: '600',
+            color: `var(--se-color-text-primary, ${TOKEN_SLATE_12})`,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        };
+        const dismissBtnStyles = {
+            flexShrink: '0',
+            padding: '2px 6px',
+            border: 'none',
+            borderRadius: '4px',
+            background: 'transparent',
+            color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`,
+            fontSize: '12px',
+            cursor: 'pointer',
+            lineHeight: '1',
+        };
+        const progressWrapStyles = {
+            marginBottom: '8px',
+        };
+        const progressLabelStyles = {
+            fontSize: '10px',
+            color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`,
+            marginTop: '4px',
+        };
+        const stepsColStyles = {
+            display: 'flex',
+            flexDirection: 'column',
+        };
+        return html `
+      <div style=${styleMap(cardStyles)}>
+        <!-- Header: icon + title + dismiss -->
+        <div style=${styleMap(headerStyles)}>
+          ${workflow.meta.icon
+            ? html `<span data-testid="workflow-icon" style="flex-shrink:0;font-size:14px">${workflow.meta.icon}</span>`
+            : nothing}
+          <span style=${styleMap(titleStyles)}>${workflow.meta.title}</span>
+          <button
+            type="button"
+            data-testid=${`dismiss-${workflow.tourId}`}
+            style=${styleMap(dismissBtnStyles)}
+            aria-label=${`Dismiss ${workflow.meta.title}`}
+            @click=${() => this._handleDismiss(workflow.tourId)}
+          >&#10005;</button>
+        </div>
+
+        <!-- Progress bar + label -->
+        <div style=${styleMap(progressWrapStyles)}>
+          ${this._renderProgressBar(completedCount, totalSteps)}
+          <div style=${styleMap(progressLabelStyles)}>
+            ${completedCount} of ${totalSteps} steps
+          </div>
+        </div>
+
+        <!-- Step list -->
+        <div style=${styleMap(stepsColStyles)}>
+          ${workflow.steps.map((step) => this._renderStepItem(step, workflow.completedSteps.includes(step.id), workflow.currentStepId === step.id, workflow.tourId))}
+        </div>
+      </div>
+    `;
+    }
+    // ── Render ────────────────────────────────────────────────────────────────
+    render() {
+        const activeWorkflows = this._workflowEntries.filter((w) => w.status === 'active');
+        if (activeWorkflows.length === 0) {
+            const emptyStyles = {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '24px 0',
+                fontSize: '12px',
+                color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`,
+            };
+            return html `<div style=${styleMap(emptyStyles)}>No active workflows</div>`;
+        }
+        const containerStyles = {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+        };
+        return html `
+      <div style=${styleMap(containerStyles)}>
+        ${activeWorkflows.map((workflow) => this._renderWorkflowCard(workflow))}
+      </div>
+    `;
+    }
+}
+_WorkflowTrackerLit_unsubTourStarted = new WeakMap(), _WorkflowTrackerLit_unsubTourEvents = new WeakMap(), _WorkflowTrackerLit_toastCleanups = new WeakMap(), _WorkflowTrackerLit_notified = new WeakMap(), _WorkflowTrackerLit_completedMap = new WeakMap(), _WorkflowTrackerLit_persistInitialized = new WeakMap(), _WorkflowTrackerLit_tourWorkflows = new WeakMap();
+WorkflowTrackerLit.properties = {
+    // Public input: runtime ref injected by MountableWidget
+    runtimeRef: { attribute: false },
+    // Internal reactive state
+    _workflowEntries: { state: true },
+    _actionVersion: { state: true },
+};
+// ── Custom element registration ───────────────────────────────────────────────
+if (typeof window !== 'undefined' && !customElements.get(TAG_NAME)) {
+    customElements.define(TAG_NAME, WorkflowTrackerLit);
+}
+// ============================================================================
+// WorkflowWidgetLitMountable — MountableWidget interface
+// ============================================================================
+/**
+ * MountableWidget that instantiates a <syntro-workflow-tracker> Lit element
+ * and injects the runtime ref.
+ *
+ * Follows the same MountableWidget contract as WorkflowMountableWidget.
+ * Config is enriched with `runtime` by WidgetRegistry.bindRuntime().
+ */
+export const WorkflowWidgetLitMountable = {
+    mount(container, config) {
+        const runtime = config?.runtime ?? null;
+        // Ensure the custom element is registered
+        if (typeof window !== 'undefined' && !customElements.get(TAG_NAME)) {
+            customElements.define(TAG_NAME, WorkflowTrackerLit);
+        }
+        const el = document.createElement(TAG_NAME);
+        el.runtimeRef = runtime;
+        container.appendChild(el);
+        return () => {
+            el.remove();
+        };
+    },
+    update(container, config) {
+        const el = container.querySelector(TAG_NAME);
+        if (!el)
+            return;
+        const runtime = config?.runtime ?? null;
+        el.runtimeRef = runtime;
+    },
+};