@syntrologie/adapt-overlays 2.14.0 → 2.16.0

package/dist/runtime-lit.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Adaptive Overlays - Runtime Module (Lit)
+ *
+ * Visual overlay actions: highlight, pulse, badge, tooltip, celebrations.
+ * Uses the Lit web component mountable instead of the React one.
+ */
+import { executeTour } from './executors/tour';
+import { executeModal } from './modal';
+import type { ActionExecutor, BadgeAction, HighlightAction, PulseAction, TooltipAction } from './types';
+export { executeModal, executeTour };
+export type { TourAction, TourStep, WorkflowMeta } from './tour-types';
+/**
+ * Execute a highlight action
+ */
+export declare const executeHighlight: ActionExecutor<HighlightAction>;
+/**
+ * Execute a pulse action
+ */
+export declare const executePulse: ActionExecutor<PulseAction>;
+/**
+ * Execute a badge action
+ */
+export declare const executeBadge: ActionExecutor<BadgeAction>;
+/**
+ * Execute a tooltip action
+ */
+export declare const executeTooltip: ActionExecutor<TooltipAction>;
+/**
+ * All executors provided by this app.
+ * These are registered with the runtime's ExecutorRegistry.
+ */
+export declare const executors: readonly [{
+    readonly kind: "overlays:highlight";
+    readonly executor: ActionExecutor<HighlightAction>;
+}, {
+    readonly kind: "overlays:pulse";
+    readonly executor: ActionExecutor<PulseAction>;
+}, {
+    readonly kind: "overlays:badge";
+    readonly executor: ActionExecutor<BadgeAction>;
+}, {
+    readonly kind: "overlays:tooltip";
+    readonly executor: ActionExecutor<TooltipAction>;
+}, {
+    readonly kind: "overlays:modal";
+    readonly executor: ActionExecutor<import("./types").ModalAction>;
+}, {
+    readonly kind: "overlays:tour";
+    readonly executor: ActionExecutor<import("./tour-types").TourAction>;
+}, {
+    readonly kind: "overlays:celebrate";
+    readonly executor: ActionExecutor<import("./types").CelebrateAction>;
+}];
+/**
+ * App runtime manifest (Lit variant).
+ */
+export declare const runtime: {
+    id: string;
+    version: string;
+    name: string;
+    description: string;
+    executors: readonly [{
+        readonly kind: "overlays:highlight";
+        readonly executor: ActionExecutor<HighlightAction>;
+    }, {
+        readonly kind: "overlays:pulse";
+        readonly executor: ActionExecutor<PulseAction>;
+    }, {
+        readonly kind: "overlays:badge";
+        readonly executor: ActionExecutor<BadgeAction>;
+    }, {
+        readonly kind: "overlays:tooltip";
+        readonly executor: ActionExecutor<TooltipAction>;
+    }, {
+        readonly kind: "overlays:modal";
+        readonly executor: ActionExecutor<import("./types").ModalAction>;
+    }, {
+        readonly kind: "overlays:tour";
+        readonly executor: ActionExecutor<import("./tour-types").TourAction>;
+    }, {
+        readonly kind: "overlays:celebrate";
+        readonly executor: ActionExecutor<import("./types").CelebrateAction>;
+    }];
+    widgets: {
+        id: string;
+        component: import("./WorkflowWidgetLit").MountableWidget;
+        metadata: {
+            name: string;
+            icon: string;
+            description: string;
+        };
+    }[];
+};
+//# sourceMappingURL=runtime-lit.d.ts.map

package/dist/runtime-lit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-lit.d.ts","sourceRoot":"","sources":["../src/runtime-lit.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EAEX,eAAe,EACf,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAC;AAIjB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAGrC,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAMvE;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,eAAe,CAsE5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CA0GpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CAoGpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwFxD,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;EAQZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBnB,CAAC"}

package/dist/runtime-lit.js

@@ -0,0 +1,402 @@
+/**
+ * Adaptive Overlays - Runtime Module (Lit)
+ *
+ * Visual overlay actions: highlight, pulse, badge, tooltip, celebrations.
+ * Uses the Lit web component mountable instead of the React one.
+ */
+import { executeCelebrate } from './celebrations';
+import { executeTour } from './executors/tour';
+import { showHighlight } from './highlight';
+import { executeModal } from './modal';
+import { sanitizeHtml } from './sanitizer';
+import { showTooltip } from './tooltip';
+import { WorkflowWidgetLitMountable } from './WorkflowWidgetLit';
+// Re-export executeModal and executeTour for use by other packages
+export { executeModal, executeTour };
+// ============================================================================
+// Executors
+// ============================================================================
+/**
+ * Execute a highlight action
+ */
+export const executeHighlight = async (action, context) => {
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
+    if (!anchorEl) {
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
+    }
+    // Skip re-application if the user previously dismissed this highlight.
+    // The dismissed attribute is set by onDismiss (user click-outside / Esc)
+    // and survives config-driven revert+reapply cycles.
+    if (anchorEl.getAttribute('data-syntro-highlight-dismissed')) {
+        return { cleanup: () => { } };
+    }
+    // Self-guard: destroy any existing highlight on this anchor to prevent duplicates
+    // (batch re-apply on navigation can call this executor multiple times for the same anchor)
+    const existing = anchorEl.getAttribute('data-syntro-highlight');
+    if (existing) {
+        const prev = context.overlayRoot.querySelectorAll('.syntro-spotlight-scrim, .syntro-spotlight-ring');
+        prev.forEach((el) => el.remove());
+    }
+    anchorEl.setAttribute('data-syntro-highlight', 'true');
+    // Resolve ring color: action override → theme primary → host page var → fallback
+    let ringColor = action.style?.color;
+    if (!ringColor) {
+        try {
+            const primary = getComputedStyle(context.overlayRoot)
+                .getPropertyValue('--sc-color-primary')
+                ?.trim();
+            if (primary)
+                ringColor = primary;
+        }
+        catch {
+            /* fallback to showHighlight default */
+        }
+    }
+    const handle = showHighlight(anchorEl, context.overlayRoot, {
+        paddingPx: action.style?.paddingPx ?? 12,
+        radiusPx: action.style?.radiusPx ?? 12,
+        scrimOpacity: action.style?.scrimOpacity ?? 0.55,
+        ringColor,
+        blocking: action.blocking ?? false,
+        onClickOutside: action.onClickOutside ?? true,
+        onEsc: action.onEsc ?? true,
+        onDismiss: () => {
+            anchorEl.setAttribute('data-syntro-highlight-dismissed', 'true');
+        },
+    });
+    context.publishEvent('action.applied', {
+        id: context.generateId(),
+        kind: 'overlays:highlight',
+        anchorId: action.anchorId,
+    });
+    return {
+        cleanup: () => {
+            handle.destroy();
+            anchorEl.removeAttribute('data-syntro-highlight');
+            anchorEl.removeAttribute('data-syntro-highlight-dismissed');
+        },
+    };
+};
+/**
+ * Execute a pulse action
+ */
+export const executePulse = async (action, context) => {
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
+    if (!anchorEl) {
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
+    }
+    const duration = action.duration ?? 4000;
+    // Wait one frame so ThemeProvider's useEffect has injected CSS vars
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    // Read primary + secondary colors from theme (shadow DOM overlay root has --sc-* vars)
+    const parseHex = (hex) => ({
+        r: parseInt(hex.slice(1, 3), 16),
+        g: parseInt(hex.slice(3, 5), 16),
+        b: parseInt(hex.slice(5, 7), 16),
+    });
+    const fallback = { r: 79, g: 70, b: 229 }; // indigo-600
+    let primary = fallback;
+    let secondary = null;
+    try {
+        const styles = getComputedStyle(context.overlayRoot);
+        const pHex = styles.getPropertyValue('--sc-color-primary')?.trim();
+        const sHex = styles.getPropertyValue('--sc-color-primary-hover')?.trim();
+        if (pHex?.startsWith('#') && pHex.length >= 7) {
+            primary = parseHex(pHex);
+        }
+        if (sHex?.startsWith('#') && sHex.length >= 7) {
+            secondary = parseHex(sHex);
+        }
+    }
+    catch {
+        /* fallback to default */
+    }
+    // Inject/update pulse animation with theme colors
+    // Two-tone pulse when both primary and secondary are available
+    const existing = document.querySelector('[data-syntro-pulse-styles]');
+    if (existing)
+        existing.remove();
+    const style = document.createElement('style');
+    style.setAttribute('data-syntro-pulse-styles', '');
+    const { r: pr, g: pg, b: pb } = primary;
+    if (secondary) {
+        const { r: sr, g: sg, b: sb } = secondary;
+        style.textContent = `
+      @keyframes syntro-pulse-anim {
+        0%, 100% {
+          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
+        }
+        25% {
+          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
+        }
+        50% {
+          box-shadow: 0 0 0 0 rgba(${sr}, ${sg}, ${sb}, 0.35);
+        }
+        75% {
+          box-shadow: 0 0 0 12px rgba(${sr}, ${sg}, ${sb}, 0);
+        }
+      }
+    `;
+    }
+    else {
+        style.textContent = `
+      @keyframes syntro-pulse-anim {
+        0%, 100% {
+          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
+        }
+        50% {
+          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
+        }
+      }
+    `;
+    }
+    document.head.appendChild(style);
+    // Apply pulse animation via inline style (scoped to this element)
+    const originalAnimation = anchorEl.style.animation;
+    anchorEl.style.animation = 'syntro-pulse-anim 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite';
+    anchorEl.setAttribute('data-syntro-pulse', 'true');
+    // Set up auto-remove timeout
+    const timeoutId = setTimeout(() => {
+        anchorEl.style.animation = originalAnimation;
+        anchorEl.removeAttribute('data-syntro-pulse');
+    }, duration);
+    context.publishEvent('action.applied', {
+        id: context.generateId(),
+        kind: 'overlays:pulse',
+        anchorId: action.anchorId,
+        duration,
+    });
+    return {
+        cleanup: () => {
+            clearTimeout(timeoutId);
+            if (!anchorEl.isConnected)
+                return;
+            anchorEl.style.animation = originalAnimation;
+            anchorEl.removeAttribute('data-syntro-pulse');
+        },
+    };
+};
+/**
+ * Execute a badge action
+ */
+export const executeBadge = async (action, context) => {
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
+    if (!anchorEl) {
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
+    }
+    // Read primary color from theme (overlay root has --sc-* vars from shadow DOM)
+    let badgeColor = '#4f46e5';
+    try {
+        const primary = getComputedStyle(context.overlayRoot)
+            .getPropertyValue('--sc-color-primary')
+            ?.trim();
+        if (primary?.startsWith('#') && primary.length >= 7) {
+            badgeColor = primary;
+        }
+    }
+    catch {
+        /* fallback to default */
+    }
+    // Create badge element with inline styles (no global style injection)
+    const badge = document.createElement('div');
+    badge.textContent = action.content;
+    badge.setAttribute('data-syntro-badge', action.anchorId.selector);
+    // Apply styles directly to element
+    Object.assign(badge.style, {
+        position: 'absolute',
+        padding: '2px 6px',
+        fontSize: '12px',
+        fontWeight: '600',
+        lineHeight: '1',
+        color: 'white',
+        background: badgeColor,
+        borderRadius: '9999px',
+        pointerEvents: 'none',
+        zIndex: '2147483646',
+        whiteSpace: 'nowrap',
+    });
+    // Position badge relative to anchor
+    const position = action.position ?? 'top-right';
+    // Ensure anchor has relative positioning for badge
+    const originalPosition = anchorEl.style.position;
+    if (getComputedStyle(anchorEl).position === 'static') {
+        anchorEl.style.position = 'relative';
+    }
+    // Append to anchor for relative positioning
+    anchorEl.appendChild(badge);
+    // Position based on config
+    switch (position) {
+        case 'top-left':
+            Object.assign(badge.style, { top: '-8px', left: '-8px' });
+            break;
+        case 'top-right':
+            Object.assign(badge.style, { top: '-8px', right: '-8px' });
+            break;
+        case 'bottom-left':
+            Object.assign(badge.style, { bottom: '-8px', left: '-8px' });
+            break;
+        case 'bottom-right':
+            Object.assign(badge.style, { bottom: '-8px', right: '-8px' });
+            break;
+    }
+    context.publishEvent('action.applied', {
+        id: context.generateId(),
+        kind: 'overlays:badge',
+        anchorId: action.anchorId,
+        content: action.content,
+        position,
+    });
+    return {
+        cleanup: () => {
+            try {
+                badge.remove();
+            }
+            catch {
+                /* already detached */
+            }
+            if (!anchorEl.isConnected)
+                return;
+            if (originalPosition !== undefined) {
+                anchorEl.style.position = originalPosition;
+            }
+        },
+        updateFn: (changes) => {
+            if ('content' in changes && typeof changes.content === 'string') {
+                badge.textContent = changes.content;
+            }
+        },
+    };
+};
+/**
+ * Execute a tooltip action
+ */
+export const executeTooltip = async (action, context) => {
+    let anchorEl = context.resolveAnchor(action.anchorId);
+    if (!anchorEl && context.waitForAnchor) {
+        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+    }
+    if (!anchorEl) {
+        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+        return { cleanup: () => { } };
+    }
+    // Build tooltip HTML
+    const { content } = action;
+    let html = '';
+    if (content.title) {
+        html += `<div class="syntro-tt-title">${sanitizeHtml(content.title)}</div>`;
+    }
+    html += `<div class="syntro-tt-body">${sanitizeHtml(content.body)}</div>`;
+    // Add CTA buttons if provided (new multi-button support)
+    if (content.ctaButtons && content.ctaButtons.length > 0) {
+        html += `<div class="syntro-tt-actions">`;
+        for (const btn of content.ctaButtons) {
+            const isPrimary = btn.primary ?? false;
+            html += `
+        <button
+          class="syntro-tt-btn ${isPrimary ? 'syntro-tt-btn-primary' : ''}"
+          data-syntro-action="${sanitizeHtml(btn.actionId)}"
+        >
+          ${sanitizeHtml(btn.label)}
+        </button>
+      `;
+        }
+        html += `</div>`;
+    }
+    else if (content.cta) {
+        // Legacy single CTA support
+        html += `<div class="syntro-tt-actions">
+      <button class="syntro-tt-btn syntro-tt-btn-primary" data-syntro-action="cta">
+        ${sanitizeHtml(content.cta.label)}
+      </button>
+    </div>`;
+    }
+    const handle = showTooltip(anchorEl, context.overlayRoot, {
+        html,
+        placement: action.placement ?? 'top',
+        trigger: action.trigger ?? 'immediate',
+        onAction: (actionId) => {
+            // Handle dismiss CTA — destroy the tooltip
+            if (actionId === 'dismiss') {
+                handle.destroy();
+                return;
+            }
+            if (actionId === 'cta' && content.cta) {
+                context.publishEvent('action.cta_clicked', {
+                    anchorId: action.anchorId,
+                    ctaLabel: content.cta.label,
+                });
+            }
+            else if (content.ctaButtons) {
+                const clickedBtn = content.ctaButtons.find((b) => b.actionId === actionId);
+                if (clickedBtn) {
+                    context.publishEvent('action.tooltip_cta_clicked', {
+                        anchorId: action.anchorId,
+                        actionId,
+                        label: clickedBtn.label,
+                    });
+                }
+            }
+            handle.destroy();
+        },
+    });
+    context.publishEvent('action.applied', {
+        id: context.generateId(),
+        kind: 'overlays:tooltip',
+        anchorId: action.anchorId,
+        trigger: action.trigger ?? 'immediate',
+    });
+    return {
+        cleanup: () => {
+            handle.destroy();
+        },
+    };
+};
+// ============================================================================
+// Executor Definitions for Registration
+// ============================================================================
+/**
+ * All executors provided by this app.
+ * These are registered with the runtime's ExecutorRegistry.
+ */
+export const executors = [
+    { kind: 'overlays:highlight', executor: executeHighlight },
+    { kind: 'overlays:pulse', executor: executePulse },
+    { kind: 'overlays:badge', executor: executeBadge },
+    { kind: 'overlays:tooltip', executor: executeTooltip },
+    { kind: 'overlays:modal', executor: executeModal },
+    { kind: 'overlays:tour', executor: executeTour },
+    { kind: 'overlays:celebrate', executor: executeCelebrate },
+];
+/**
+ * App runtime manifest (Lit variant).
+ */
+export const runtime = {
+    id: 'adaptive-overlays',
+    version: '1.0.0',
+    name: 'Overlays',
+    description: 'Tooltips, highlights, badges, modals, celebrations, visual overlays, and workflow tracking',
+    executors,
+    widgets: [
+        {
+            id: 'adaptive-overlays:workflow-tracker',
+            component: WorkflowWidgetLitMountable,
+            metadata: {
+                name: 'Workflow Tracker',
+                icon: '📋',
+                description: 'Tracks multi-step workflow progress across tours',
+            },
+        },
+    ],
+};

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EAEX,eAAe,EACf,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAC;AAIjB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAGrC,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAMvE;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,eAAe,CAsE5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CA0GpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CAoGpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwFxD,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;EAQZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBnB,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EAEX,eAAe,EACf,WAAW,EACX,aAAa,EACd,MAAM,SAAS,CAAC;AAKjB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAGrC,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAMvE;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,eAAe,CAsE5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CA0GpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,cAAc,CAAC,WAAW,CAoGpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,aAAa,CAwFxD,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;EAQZ,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnB,CAAC"}

package/dist/runtime.js

@@ -10,6 +10,7 @@ import { executeModal } from './modal';
 import { sanitizeHtml } from './sanitizer';
 import { showTooltip } from './tooltip';
 import { WorkflowMountableWidget } from './WorkflowWidget';
+import { WorkflowWidgetLitMountable } from './WorkflowWidgetLit';
 // Re-export executeModal and executeTour for use by other packages
 export { executeModal, executeTour };
 // ============================================================================
@@ -397,5 +398,14 @@ export const runtime = {
                 description: 'Tracks multi-step workflow progress across tours',
             },
         },
+        {
+            id: 'adaptive-overlays:workflow-tracker-lit',
+            component: WorkflowWidgetLitMountable,
+            metadata: {
+                name: 'Workflow Tracker (Lit)',
+                icon: '📋',
+                description: 'Lit web component equivalent of the Workflow Tracker — decorator-free, light DOM',
+            },
+        },
     ],
 };

package/dist/schema.d.ts

@@ -121,7 +121,7 @@ export declare const configSchema: z.ZodObject<{
             } | undefined;
         };
         trigger?: "click" | "immediate" | "hover" | undefined;
-        placement?: "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
+        placement?: "left" | "bottom" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
     }, {
         summary: string;
         anchorId: {
@@ -137,7 +137,7 @@ export declare const configSchema: z.ZodObject<{
             } | undefined;
         };
         trigger?: "click" | "immediate" | "hover" | undefined;
-        placement?: "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
+        placement?: "left" | "bottom" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
     }>, "many">>;
     /** Badge configurations */
     badges: z.ZodOptional<z.ZodArray<z.ZodObject<{
@@ -365,7 +365,7 @@ export declare const configSchema: z.ZodObject<{
             } | undefined;
         };
         trigger?: "click" | "immediate" | "hover" | undefined;
-        placement?: "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
+        placement?: "left" | "bottom" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
     }[] | undefined;
     badges?: {
         summary: string;
@@ -447,7 +447,7 @@ export declare const configSchema: z.ZodObject<{
             } | undefined;
         };
         trigger?: "click" | "immediate" | "hover" | undefined;
-        placement?: "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
+        placement?: "left" | "bottom" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | undefined;
     }[] | undefined;
     badges?: {
         summary: string;

package/node_modules/@syntro/design-system/dist/tokens/index.d.ts

@@ -7,4 +7,6 @@ export * from './colors';
 export { default as colors } from './colors';
 export * from './effects';
 export { default as effects } from './effects';
+export * from './panel-shell';
+export { default as panelShell } from './panel-shell';
 //# sourceMappingURL=index.d.ts.map

package/node_modules/@syntro/design-system/dist/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAE/C,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/node_modules/@syntro/design-system/dist/tokens/index.js

@@ -7,3 +7,5 @@ export * from './colors';
 export { default as colors } from './colors';
 export * from './effects';
 export { default as effects } from './effects';
+export * from './panel-shell';
+export { default as panelShell } from './panel-shell';

package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Syntro Design System — Editor Panel Shell Tokens
+ *
+ * Single source of truth for the floating editor panel's visuals and behavior.
+ * Consumed by:
+ *   - packages/shared-editor-ui/src/components/EditorPanelShell.tsx   (React)
+ *   - packages/shared-editor-ui/src/controllers/PanelShellController.ts (Lit)
+ *
+ * Any change here updates both React and Lit panels in one step — no drift.
+ */
+/** Dark gradient rendered behind the panel contents (backdrop-blur layered on). */
+export declare const panelBackground = "linear-gradient(160deg, rgba(7,8,10,0.84) 0%, rgba(14,17,20,0.88) 45%, rgba(15,19,24,0.84) 100%)";
+/** Outer shadows for the panel, indexed by dock state. */
+export declare const panelShadows: {
+    /** Free-floating panel — shadow all sides. */
+    readonly floating: "0 8px 60px rgba(0,0,0,0.5)";
+    /** Docked to left — shadow cast rightward into page. */
+    readonly dockedLeft: "20px 0 60px rgba(0,0,0,0.5)";
+    /** Docked to right — shadow cast leftward into page. */
+    readonly dockedRight: "-20px 0 60px rgba(0,0,0,0.5)";
+};
+/** Backdrop-filter blur radius applied to the panel surface. */
+export declare const panelBackdropBlur = "12px";
+export declare const fab: {
+    /** Diameter in pixels. */
+    readonly size: 56;
+    /** Inset from the panel's top-left corner in pixels. */
+    readonly inset: 12;
+    /** Background color (always the brand black). */
+    readonly background: "#000000";
+    /** Icon / logo color. */
+    readonly color: "#ffffff";
+    /** Border — 2px brand red ring. */
+    readonly border: "2px solid #b72e2a";
+    /** Shadow when the panel is open (inner ring for "active" state). */
+    readonly shadowOpen: "0 4px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08)";
+    /** Shadow when the panel is closed. */
+    readonly shadowClosed: "0 4px 24px rgba(0,0,0,0.6)";
+};
+export declare const panelBehavior: {
+    /** Minimum panel width when resizing or undocked. */
+    readonly minWidth: 480;
+    /** Minimum panel height when resizing or undocked. */
+    readonly minHeight: 400;
+    /** Edge thickness of resize handles in pixels. */
+    readonly handleSize: 8;
+    /** Pixels the FAB must move before a press becomes a drag (vs a click). */
+    readonly dragThreshold: 5;
+    /** Distance from a viewport edge that triggers edge-dock snapping. */
+    readonly snapThreshold: 20;
+};
+export declare const panelShell: {
+    readonly background: "linear-gradient(160deg, rgba(7,8,10,0.84) 0%, rgba(14,17,20,0.88) 45%, rgba(15,19,24,0.84) 100%)";
+    readonly shadows: {
+        /** Free-floating panel — shadow all sides. */
+        readonly floating: "0 8px 60px rgba(0,0,0,0.5)";
+        /** Docked to left — shadow cast rightward into page. */
+        readonly dockedLeft: "20px 0 60px rgba(0,0,0,0.5)";
+        /** Docked to right — shadow cast leftward into page. */
+        readonly dockedRight: "-20px 0 60px rgba(0,0,0,0.5)";
+    };
+    readonly backdropBlur: "12px";
+    readonly fab: {
+        /** Diameter in pixels. */
+        readonly size: 56;
+        /** Inset from the panel's top-left corner in pixels. */
+        readonly inset: 12;
+        /** Background color (always the brand black). */
+        readonly background: "#000000";
+        /** Icon / logo color. */
+        readonly color: "#ffffff";
+        /** Border — 2px brand red ring. */
+        readonly border: "2px solid #b72e2a";
+        /** Shadow when the panel is open (inner ring for "active" state). */
+        readonly shadowOpen: "0 4px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08)";
+        /** Shadow when the panel is closed. */
+        readonly shadowClosed: "0 4px 24px rgba(0,0,0,0.6)";
+    };
+    readonly behavior: {
+        /** Minimum panel width when resizing or undocked. */
+        readonly minWidth: 480;
+        /** Minimum panel height when resizing or undocked. */
+        readonly minHeight: 400;
+        /** Edge thickness of resize handles in pixels. */
+        readonly handleSize: 8;
+        /** Pixels the FAB must move before a press becomes a drag (vs a click). */
+        readonly dragThreshold: 5;
+        /** Distance from a viewport edge that triggers edge-dock snapping. */
+        readonly snapThreshold: 20;
+    };
+};
+export default panelShell;
+//# sourceMappingURL=panel-shell.d.ts.map