@ggui-ai/iframe-runtime 0.1.0-rc.1

package/dist/canvas/animator/animator-pill.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Animator pill.
+ *
+ * Visual component that renders the current `AnimatorState`. Two
+ * layouts:
+ *
+ *   - centered (when canvas navStack is empty): pill at ~40% top
+ *   - navbar (when canvas has content): pill compressed into top chrome
+ *
+ * V1 ships PLACEHOLDER visuals per the design doc. Behavioral spec is
+ * locked; the designer pass refines exact motion + sizing. Engineering
+ * baseline: pill shape, brand accent dot, label text, pulse animation
+ * via CSS keyframes.
+ *
+ * Boundary discipline:
+ *   - Pure view component. Takes `state` + `layout` props, renders DOM.
+ *   - No state, no effects, no subscriptions. Parent (animator-host)
+ *     owns those.
+ *   - Accessibility: `aria-live="polite"` for routine transitions;
+ *     `assertive` for error. Reduced-motion honored via CSS.
+ */
+import { type ReactNode } from 'react';
+import type { AnimatorState } from './state-machine.js';
+export interface AnimatorPillProps {
+    readonly state: AnimatorState;
+    /**
+     * Where to draw the pill. The shell decides based on navStack
+     * emptiness:
+     *   - `'centered'` — canvas empty; pill fills (vertically offset
+     *     above center).
+     *   - `'navbar'` — canvas has content; pill compressed into the
+     *     top chrome.
+     */
+    readonly layout: 'centered' | 'navbar';
+    /**
+     * Brand label shown when state is `ready` (otherwise the active
+     * label is derived from state). Falls back to `'ggui'` per
+     * decisions.md.
+     */
+    readonly readyLabel?: string;
+}
+export declare function AnimatorPill({ state, layout, readyLabel, }: AnimatorPillProps): ReactNode;

package/dist/canvas/animator/animator-pill.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Derive the user-facing label from the state. Centralized so the
+ * announcement text + visible text stay in lockstep.
+ */
+function labelForState(state, readyLabel) {
+    switch (state.kind) {
+        case 'ready':
+            return readyLabel;
+        case 'handshake':
+            return `Negotiating: ${state.intent}`;
+        case 'constructing':
+            return `Building: ${state.intent}`;
+        case 'listening':
+            return 'Listening…';
+        case 'content':
+            switch (state.substate.kind) {
+                case 'idle':
+                    return state.activeItemId;
+                case 'handshake':
+                    return `Negotiating: ${state.substate.intent}`;
+                case 'constructing':
+                    return `Building: ${state.substate.intent}`;
+                case 'listening':
+                    return 'Listening…';
+            }
+        // eslint-disable-next-line no-fallthrough
+        case 'error':
+            return `Error: ${state.message}`;
+        case 'offline':
+            return 'Offline — reconnecting…';
+    }
+}
+/**
+ * The dot animation depends on outer state OR the active substate
+ * when on `content`.
+ */
+function indicatorClassFor(state) {
+    switch (state.kind) {
+        case 'ready':
+            return 'ggui-animator-dot--ready';
+        case 'handshake':
+            return 'ggui-animator-dot--handshake';
+        case 'constructing':
+            return 'ggui-animator-dot--constructing';
+        case 'listening':
+            return 'ggui-animator-dot--listening';
+        case 'content':
+            switch (state.substate.kind) {
+                case 'idle':
+                    return 'ggui-animator-dot--content-idle';
+                case 'handshake':
+                    return 'ggui-animator-dot--handshake';
+                case 'constructing':
+                    return 'ggui-animator-dot--constructing';
+                case 'listening':
+                    return 'ggui-animator-dot--listening';
+            }
+        // eslint-disable-next-line no-fallthrough
+        case 'error':
+            return 'ggui-animator-dot--error';
+        case 'offline':
+            return 'ggui-animator-dot--offline';
+    }
+}
+/**
+ * Inline styles for the placeholder visual. Replaced by the designer
+ * pass with a real CSS module. Keeping them inline avoids the
+ * CSS-loader plumbing question for v1.
+ */
+const pillStyles = {
+    centered: {
+        position: 'absolute',
+        top: '40%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '8px 16px',
+        borderRadius: 9999,
+        background: 'var(--ggui-color-surface, rgba(245, 245, 245, 0.95))',
+        border: '1px solid var(--ggui-color-outlineVariant, rgba(148, 163, 184, 0.3))',
+        fontSize: 13,
+        color: 'var(--ggui-color-onSurface, #1a1a1a)',
+        fontFamily: 'inherit',
+    },
+    navbar: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '4px 12px',
+        borderRadius: 9999,
+        background: 'var(--ggui-color-surface, rgba(245, 245, 245, 0.95))',
+        border: '1px solid var(--ggui-color-outlineVariant, rgba(148, 163, 184, 0.3))',
+        fontSize: 12,
+        color: 'var(--ggui-color-onSurface, #1a1a1a)',
+        fontFamily: 'inherit',
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: '50%',
+        background: 'var(--ggui-color-primary, #2563eb)',
+        flexShrink: 0,
+    },
+    errorDot: {
+        background: 'var(--ggui-color-error, #b91c1c)',
+    },
+};
+export function AnimatorPill({ state, layout, readyLabel = 'ggui', }) {
+    const label = labelForState(state, readyLabel);
+    const dotClass = indicatorClassFor(state);
+    const dotStyle = {
+        ...pillStyles.dot,
+        ...(state.kind === 'error' ? pillStyles.errorDot : {}),
+    };
+    return (_jsxs("div", { role: "status", "aria-live": state.kind === 'error' ? 'assertive' : 'polite', "aria-label": label, style: layout === 'centered' ? pillStyles.centered : pillStyles.navbar, "data-ggui-animator-state": state.kind, "data-ggui-animator-layout": layout, children: [_jsx("span", { className: dotClass, style: dotStyle, "aria-hidden": "true" }), _jsx("span", { children: label })] }));
+}

package/dist/canvas/animator/state-machine.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Animator state machine.
+ *
+ * Pure-function reducer driving the ggui-animator pill's state. Inputs:
+ *   - live-channel `_ggui:lifecycle` envelopes (handshake_started,
+ *     handshake_completed, push_started, consume_polling)
+ *   - the existing `push` envelope (stack item appended) → content
+ *   - the existing `drain_ack` envelope (consume drained) → exit listening
+ *   - canvas-local events (navStack changes, mount, error overlay)
+ *
+ * Output: the next `AnimatorState`. No DOM, no timers, no side effects.
+ * Visual presentation (pill / navbar) lives in `animator-pill.tsx`.
+ * Subscription wiring lives in `animator-host.tsx`. Timer-based
+ * flicker suppression lives in the host with a small queue +
+ * clearTimeout helper.
+ *
+ * The machine has five primary states plus a `content` state with
+ * substates and error/offline overlays.
+ */
+import type { ConsumePollingPayload, HandshakeCompletedPayload, HandshakeStartedPayload, PushStartedPayload } from '@ggui-ai/protocol';
+export type AnimatorContentSubstate = {
+    readonly kind: 'idle';
+} | {
+    readonly kind: 'handshake';
+    readonly intent: string;
+} | {
+    readonly kind: 'constructing';
+    readonly intent: string;
+    readonly stackItemId: string;
+} | {
+    readonly kind: 'listening';
+    readonly stackItemId: string;
+};
+export type AnimatorState = {
+    readonly kind: 'ready';
+} | {
+    readonly kind: 'handshake';
+    readonly handshakeId: string;
+    readonly intent: string;
+} | {
+    readonly kind: 'constructing';
+    readonly stackItemId: string;
+    readonly intent: string;
+} | {
+    readonly kind: 'listening';
+    readonly stackItemId: string;
+} | {
+    readonly kind: 'content';
+    readonly activeItemId: string;
+    readonly substate: AnimatorContentSubstate;
+} | {
+    readonly kind: 'error';
+    readonly message: string;
+    readonly recoveryTo: AnimatorState;
+} | {
+    readonly kind: 'offline';
+};
+export declare const INITIAL_STATE: AnimatorState;
+/**
+ * Discriminated union of every event the reducer accepts. The host
+ * fans these in from live-channel + canvas-local sources. Wire types
+ * (HandshakeStartedPayload etc.) are reused verbatim so the reducer
+ * doesn't introduce a parallel type vocabulary.
+ */
+export type AnimatorEvent = {
+    readonly kind: 'handshake_started';
+    readonly payload: HandshakeStartedPayload;
+} | {
+    readonly kind: 'handshake_completed';
+    readonly payload: HandshakeCompletedPayload;
+} | {
+    readonly kind: 'push_started';
+    readonly payload: PushStartedPayload;
+} | {
+    readonly kind: 'consume_polling';
+    readonly payload: ConsumePollingPayload;
+} | {
+    readonly kind: 'stack_item_appended';
+    readonly stackItemId: string;
+} | {
+    readonly kind: 'action_drained';
+    readonly stackItemId: string;
+} | {
+    readonly kind: 'stack_emptied';
+} | {
+    readonly kind: 'contract_error';
+    readonly message: string;
+} | {
+    readonly kind: 'error_dismissed';
+} | {
+    readonly kind: 'transport_offline';
+} | {
+    readonly kind: 'transport_online';
+};
+/**
+ * Compute the next animator state for an event. Pure function.
+ *
+ * Decision-log refs (from canvas-mode-decisions.md):
+ *
+ *   - Substate priority on `content`: constructing > handshake > listening > idle.
+ *   - drain_ack is the close signal for listening (no separate
+ *     `consume_polling: closed` envelope today).
+ *   - Listening during agent reasoning: stay in `ready` post-drain_ack.
+ *     Honest signal; don't fake activity the server can't observe.
+ */
+export declare function transition(state: AnimatorState, event: AnimatorEvent): AnimatorState;

package/dist/canvas/animator/state-machine.js

@@ -0,0 +1,150 @@
+/**
+ * Animator state machine.
+ *
+ * Pure-function reducer driving the ggui-animator pill's state. Inputs:
+ *   - live-channel `_ggui:lifecycle` envelopes (handshake_started,
+ *     handshake_completed, push_started, consume_polling)
+ *   - the existing `push` envelope (stack item appended) → content
+ *   - the existing `drain_ack` envelope (consume drained) → exit listening
+ *   - canvas-local events (navStack changes, mount, error overlay)
+ *
+ * Output: the next `AnimatorState`. No DOM, no timers, no side effects.
+ * Visual presentation (pill / navbar) lives in `animator-pill.tsx`.
+ * Subscription wiring lives in `animator-host.tsx`. Timer-based
+ * flicker suppression lives in the host with a small queue +
+ * clearTimeout helper.
+ *
+ * The machine has five primary states plus a `content` state with
+ * substates and error/offline overlays.
+ */
+export const INITIAL_STATE = { kind: 'ready' };
+// =============================================================================
+// Reducer
+// =============================================================================
+/**
+ * Compute the next animator state for an event. Pure function.
+ *
+ * Decision-log refs (from canvas-mode-decisions.md):
+ *
+ *   - Substate priority on `content`: constructing > handshake > listening > idle.
+ *   - drain_ack is the close signal for listening (no separate
+ *     `consume_polling: closed` envelope today).
+ *   - Listening during agent reasoning: stay in `ready` post-drain_ack.
+ *     Honest signal; don't fake activity the server can't observe.
+ */
+export function transition(state, event) {
+    // Error + offline overlays — apply first, regardless of current state.
+    if (event.kind === 'contract_error') {
+        return {
+            kind: 'error',
+            message: event.message,
+            recoveryTo: state.kind === 'error' ? state.recoveryTo : state,
+        };
+    }
+    if (event.kind === 'error_dismissed') {
+        if (state.kind === 'error')
+            return state.recoveryTo;
+        return state;
+    }
+    if (event.kind === 'transport_offline') {
+        if (state.kind === 'offline')
+            return state;
+        return { kind: 'offline' };
+    }
+    if (event.kind === 'transport_online') {
+        if (state.kind === 'offline')
+            return INITIAL_STATE;
+        return state;
+    }
+    // From `content`: substate transitions instead of replacing the outer state.
+    if (state.kind === 'content') {
+        switch (event.kind) {
+            case 'handshake_started':
+                return {
+                    ...state,
+                    substate: { kind: 'handshake', intent: event.payload.intent },
+                };
+            case 'handshake_completed':
+                // Drop to idle — `push_started` arrives next when gen is expected.
+                return { ...state, substate: { kind: 'idle' } };
+            case 'push_started':
+                return {
+                    ...state,
+                    substate: {
+                        kind: 'constructing',
+                        intent: event.payload.intent,
+                        stackItemId: event.payload.stackItemId,
+                    },
+                };
+            case 'consume_polling':
+                return {
+                    ...state,
+                    substate: {
+                        kind: 'listening',
+                        stackItemId: event.payload.stackItemId,
+                    },
+                };
+            case 'stack_item_appended':
+                // New item arrived (e.g. push completed). activeItem moves;
+                // substate drops to idle.
+                return {
+                    kind: 'content',
+                    activeItemId: event.stackItemId,
+                    substate: { kind: 'idle' },
+                };
+            case 'action_drained':
+                // Listening close signal. Drop substate to idle if it was
+                // listening for THIS item; otherwise no-op (out-of-order drain
+                // for a popped item).
+                if (state.substate.kind === 'listening' && state.substate.stackItemId === event.stackItemId) {
+                    return { ...state, substate: { kind: 'idle' } };
+                }
+                return state;
+            case 'stack_emptied':
+                return INITIAL_STATE;
+        }
+    }
+    // From any non-content state: outer state transitions.
+    switch (event.kind) {
+        case 'handshake_started':
+            return {
+                kind: 'handshake',
+                handshakeId: event.payload.handshakeId,
+                intent: event.payload.intent,
+            };
+        case 'handshake_completed':
+            // Only honor completion that matches the current handshake's id —
+            // a stale completion (from a race) doesn't displace newer state.
+            if (state.kind !== 'handshake')
+                return state;
+            if (state.handshakeId !== event.payload.handshakeId)
+                return state;
+            // genExpected pre-warms `constructing`? The `push_started`
+            // envelope carries the authoritative stackItemId + intent —
+            // wait for it.
+            return INITIAL_STATE;
+        case 'push_started':
+            return {
+                kind: 'constructing',
+                stackItemId: event.payload.stackItemId,
+                intent: event.payload.intent,
+            };
+        case 'consume_polling':
+            return { kind: 'listening', stackItemId: event.payload.stackItemId };
+        case 'stack_item_appended':
+            return {
+                kind: 'content',
+                activeItemId: event.stackItemId,
+                substate: { kind: 'idle' },
+            };
+        case 'action_drained':
+            // Drained while in listening for THIS item → drop to ready.
+            // Otherwise no-op.
+            if (state.kind === 'listening' && state.stackItemId === event.stackItemId) {
+                return INITIAL_STATE;
+            }
+            return state;
+        case 'stack_emptied':
+            return INITIAL_STATE;
+    }
+}

package/dist/canvas/canvas-shell.d.ts

@@ -0,0 +1,77 @@
+/**
+ * CanvasShell.
+ *
+ * Top-level component for canvas-mode iframes. Owns:
+ *
+ *   1. Layout: animator chrome (centered or navbar) + content area
+ *   2. Navigation state via {@link NavStackModel}
+ *   3. Active stack-item mount (one at a time — the top of navStack)
+ *   4. Display-mode escalation requests (escalation policy applied at
+ *      navStack transitions + on host-context-changed)
+ *
+ * Subscriptions/transport are wired by the parent boot path
+ * (`bootProduction` branching on `bootstrap.canvasMode`) — the shell
+ * receives a pre-built navStack model, an AnimatorEventStream
+ * (subscribed to live-channel lifecycle envelopes), and callbacks for
+ * the side-effecting concerns (display-mode requests, live-channel
+ * `canvas_navigated` envelope emission).
+ *
+ * Active-item rendering reuses the existing stack-item dispatcher
+ * via a render-prop slot.
+ *
+ * Boundary discipline:
+ *
+ *   - The shell renders the animator pill via `<AnimatorHost>` — but
+ *     doesn't subscribe to the live channel itself. Caller passes the
+ *     event stream + nav model in.
+ *   - Display-mode requests fire through a caller-supplied callback,
+ *     not directly via `requestDisplayModeInParent` from `runtime.ts`.
+ *     Keeps the shell testable without DOM/postMessage.
+ *   - Back-arrow click → caller-supplied `onBackGesture()` (also lets
+ *     the caller emit the `canvas_navigated` envelope).
+ */
+import { type ReactNode } from 'react';
+import type { McpUiDisplayMode, SessionStackEntry } from '@ggui-ai/protocol';
+import { type AnimatorEventStream } from './animator/animator-host.js';
+import { NavStackModel } from './nav-stack.js';
+export interface CanvasShellProps {
+    readonly navStack: NavStackModel;
+    readonly events: AnimatorEventStream;
+    /**
+     * Host's `availableDisplayModes` from `HostContext`. Drives the
+     * display-mode escalation policy. Undefined when the host doesn't
+     * speak the spec — escalation collapses to a no-op.
+     */
+    readonly availableDisplayModes?: readonly McpUiDisplayMode[];
+    /** Host's current display mode. Tracks updates from `host-context-changed`. */
+    readonly currentDisplayMode?: McpUiDisplayMode;
+    /**
+     * Fire a `ui/request-display-mode` postMessage to the host. The
+     * shell calls this when {@link reconcileDisplayMode} returns a
+     * `request` decision. Tests inject a recorder; production wires it
+     * to `requestDisplayModeInParent` from `runtime.ts`.
+     */
+    readonly onRequestDisplayMode: (mode: McpUiDisplayMode) => void;
+    /**
+     * Called when the user back-navigates. The shell handles the local
+     * `navStack.pop()`; this callback lets the caller emit the
+     * `canvas_navigated` envelope on the live channel + any other side effects.
+     */
+    readonly onBackGesture: (args: {
+        readonly previousActiveItemId: string;
+        readonly activeItemId: string | null;
+    }) => void;
+    /**
+     * Render-prop for the active stack item. Called with the current
+     * top of navStack (or null when empty); production wires this to
+     * `mountStackItem` from `stack-item-renderer.ts`. Tests inject a
+     * simple component.
+     *
+     * Why a render-prop: keeps the shell testable without the full
+     * `mountStackItem` dependency graph (WireConfig, StreamBus, theme
+     * resolution, ContextStateHost) — those are bootProduction's
+     * concern, not the shell's.
+     */
+    readonly renderActiveItem: (item: SessionStackEntry | null) => ReactNode;
+}
+export declare function CanvasShell({ navStack, events, onBackGesture, renderActiveItem, }: CanvasShellProps): ReactNode;

package/dist/canvas/canvas-shell.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CanvasShell.
+ *
+ * Top-level component for canvas-mode iframes. Owns:
+ *
+ *   1. Layout: animator chrome (centered or navbar) + content area
+ *   2. Navigation state via {@link NavStackModel}
+ *   3. Active stack-item mount (one at a time — the top of navStack)
+ *   4. Display-mode escalation requests (escalation policy applied at
+ *      navStack transitions + on host-context-changed)
+ *
+ * Subscriptions/transport are wired by the parent boot path
+ * (`bootProduction` branching on `bootstrap.canvasMode`) — the shell
+ * receives a pre-built navStack model, an AnimatorEventStream
+ * (subscribed to live-channel lifecycle envelopes), and callbacks for
+ * the side-effecting concerns (display-mode requests, live-channel
+ * `canvas_navigated` envelope emission).
+ *
+ * Active-item rendering reuses the existing stack-item dispatcher
+ * via a render-prop slot.
+ *
+ * Boundary discipline:
+ *
+ *   - The shell renders the animator pill via `<AnimatorHost>` — but
+ *     doesn't subscribe to the live channel itself. Caller passes the
+ *     event stream + nav model in.
+ *   - Display-mode requests fire through a caller-supplied callback,
+ *     not directly via `requestDisplayModeInParent` from `runtime.ts`.
+ *     Keeps the shell testable without DOM/postMessage.
+ *   - Back-arrow click → caller-supplied `onBackGesture()` (also lets
+ *     the caller emit the `canvas_navigated` envelope).
+ */
+import { useEffect, useState } from 'react';
+import { AnimatorHost, } from './animator/animator-host.js';
+export function CanvasShell({ navStack, events, onBackGesture, renderActiveItem, }) {
+    // Subscribe to navStack's version counter so React re-renders when
+    // it mutates. Mirrors useSyncExternalStore pattern with a manual
+    // useState bridge (avoids a React 18+ requirement for the
+    // dependency that's not necessarily satisfied in older callers).
+    //
+    // Uses `onMutation` (not `onNavChange`) so in-place replaces from
+    // `ggui_update` props patches re-render too — otherwise the active
+    // item shows stale props after the first turn. The version value
+    // itself is unread — only the setVersion side effect matters.
+    const [, setVersion] = useState(navStack.version());
+    useEffect(() => {
+        const unsubscribe = navStack.onMutation(() => {
+            setVersion(navStack.version());
+        });
+        return unsubscribe;
+    }, [navStack]);
+    // Layout selector — centered animator pill (empty) vs. navbar
+    // (content present). The version-tracked `useState` above ensures
+    // this re-evaluates on every navStack mutation.
+    const contentState = navStack.size() === 0 ? 'empty' : 'has-content';
+    // Display-mode escalation is policy-driven by `reconcileDisplayMode`,
+    // but auto-firing it on every navStack transition is too aggressive:
+    // a canvas with one item would silently request `fullscreen`, taking
+    // over the host's viewport without user intent. The policy stays in
+    // the codebase + remains tested for the eventual user-driven trigger
+    // (e.g. a fullscreen-toggle control in the animator chrome), but the
+    // shell does NOT auto-fire it. `onRequestDisplayMode` is wired on
+    // the props; the call site moves from here to whatever UI affordance
+    // gives the user explicit consent. Until then: display mode only
+    // changes when the user requests it manually.
+    const activeItem = navStack.peek();
+    const handleBack = () => {
+        const previous = navStack.peek();
+        if (!previous)
+            return;
+        const newActive = navStack.pop();
+        onBackGesture({
+            previousActiveItemId: previous.id,
+            activeItemId: newActive?.id ?? null,
+        });
+    };
+    // Inline layout styles for the placeholder shell. Designer pass
+    // refines exact dimensions / transitions.
+    const containerStyle = {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+    };
+    const navbarStyle = {
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '8px 12px',
+        borderBottom: '1px solid var(--ggui-color-outlineVariant, rgba(148, 163, 184, 0.2))',
+        background: 'var(--ggui-color-surface, rgba(255, 255, 255, 0.98))',
+    };
+    const contentStyle = {
+        flex: 1,
+        overflow: 'auto',
+        position: 'relative',
+    };
+    const emptyStateStyle = {
+        flex: 1,
+        position: 'relative',
+    };
+    if (contentState === 'empty') {
+        return (_jsx("div", { style: containerStyle, "data-ggui-canvas-shell": "empty", children: _jsx("div", { style: emptyStateStyle, children: _jsx(AnimatorHost, { events: events, layout: "centered" }) }) }));
+    }
+    return (_jsxs("div", { style: containerStyle, "data-ggui-canvas-shell": "content", children: [_jsxs("div", { style: navbarStyle, "data-ggui-canvas-navbar": "true", children: [navStack.size() > 1 ? (_jsx("button", { type: "button", onClick: handleBack, "aria-label": "Go back", "data-ggui-canvas-back": "true", style: {
+                            background: 'transparent',
+                            border: 'none',
+                            cursor: 'pointer',
+                            padding: '4px 8px',
+                            fontSize: 16,
+                            color: 'var(--ggui-color-onSurface, #1a1a1a)',
+                        }, children: "\u2190" })) : null, _jsx(AnimatorHost, { events: events, layout: "navbar" })] }), _jsx("div", { style: contentStyle, "data-ggui-canvas-content": "true", children: renderActiveItem(activeItem) })] }));
+}