egaki 0.5.0 → 0.7.0

package/dist/cli/xai-auth.js

@@ -0,0 +1,325 @@
+// xAI OAuth authentication for egaki.
+// Implements the same OAuth 2.0 PKCE browser flow used by xAI's Grok CLI
+// and the OpenCode xAI plugin. Tokens grant access to the full xAI API
+// (api.x.ai/v1) including image and video generation endpoints.
+//
+// Two auth methods:
+//   1. Browser flow: loopback server on 127.0.0.1:56121 (pinned to match Grok-CLI registration)
+//   2. Device code flow (RFC 8628): headless/VPS environments, no loopback needed
+//
+// Tokens are stored in credentials.json under the 'xai-oauth' key as a structured
+// XaiAuth object. The access token is injected as a bearer token via custom fetch
+// when creating the @ai-sdk/xai provider instance.
+import { createServer } from 'node:http';
+import { spinner, log, note } from '@clack/prompts';
+import pc from 'picocolors';
+import { z } from 'zod';
+import { openUrlInBrowser } from './open-browser.js';
+import pkg from '../../package.json' with { type: 'json' };
+// Public Grok-CLI OAuth client. xAI's auth server rejects loopback OAuth from
+// non-allowlisted clients, so we reuse the Grok-CLI client_id that xAI ships
+// for desktop OAuth flows.
+const CLIENT_ID = 'b1a00492-073a-47ea-816f-4c329264a828';
+const AUTHORIZE_URL = 'https://auth.x.ai/oauth2/authorize';
+const TOKEN_URL = 'https://auth.x.ai/oauth2/token';
+const DEVICE_AUTHORIZATION_URL = 'https://auth.x.ai/oauth2/device/code';
+const SCOPE = 'openid profile email offline_access grok-cli:access api:access';
+// The loopback server must bind to this exact host:port pair — it's registered
+// with xAI for the Grok-CLI client.
+const OAUTH_HOST = '127.0.0.1';
+const OAUTH_PORT = 56121;
+const OAUTH_REDIRECT_PATH = '/callback';
+const REDIRECT_URI = `http://${OAUTH_HOST}:${OAUTH_PORT}${OAUTH_REDIRECT_PATH}`;
+const ACCESS_TOKEN_REFRESH_SKEW_MS = 120_000;
+const tokenResponseSchema = z.object({
+    access_token: z.string(),
+    refresh_token: z.string().optional(),
+    id_token: z.string().optional(),
+    expires_in: z.number().optional(),
+});
+// ─── PKCE helpers ────────────────────────────────────────────────────────────
+function randomString(length) {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+    const bytes = crypto.getRandomValues(new Uint8Array(length));
+    return Array.from(bytes)
+        .map((b) => chars[b % chars.length])
+        .join('');
+}
+function base64UrlEncode(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const binary = String.fromCharCode(...bytes);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+async function generatePKCE() {
+    const verifier = randomString(64);
+    const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
+    return { verifier, challenge: base64UrlEncode(hash) };
+}
+function generateState() {
+    return base64UrlEncode(crypto.getRandomValues(new Uint8Array(32)).buffer);
+}
+function authHeaders() {
+    return {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Accept: 'application/json',
+        'User-Agent': `egaki/${pkg.version}`,
+    };
+}
+// ─── JWT helpers ─────────────────────────────────────────────────────────────
+function parseJwtClaims(token) {
+    const parts = token.split('.');
+    if (parts.length < 2)
+        return undefined;
+    let payload = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+    while (payload.length % 4 !== 0)
+        payload += '=';
+    try {
+        return JSON.parse(Buffer.from(payload, 'base64').toString('utf8'));
+    }
+    catch {
+        return undefined;
+    }
+}
+function extractEmailFromToken(idToken) {
+    if (!idToken)
+        return undefined;
+    const claims = parseJwtClaims(idToken);
+    return typeof claims?.email === 'string' ? claims.email : undefined;
+}
+/** Returns true if the access token's exp claim is within the skew window. */
+export function accessTokenIsExpiring(token, skewMs = ACCESS_TOKEN_REFRESH_SKEW_MS) {
+    if (!token)
+        return false;
+    const claims = parseJwtClaims(token);
+    if (typeof claims?.exp !== 'number')
+        return false;
+    return claims.exp * 1000 <= Date.now() + Math.max(0, skewMs);
+}
+// ─── token exchange ──────────────────────────────────────────────────────────
+async function exchangeCodeForTokens(code, verifier) {
+    const response = await fetch(TOKEN_URL, {
+        method: 'POST',
+        headers: authHeaders(),
+        body: new URLSearchParams({
+            grant_type: 'authorization_code',
+            code,
+            redirect_uri: REDIRECT_URI,
+            client_id: CLIENT_ID,
+            code_verifier: verifier,
+        }).toString(),
+    });
+    if (!response.ok) {
+        const detail = await response.text().catch(() => '');
+        throw new Error(`xAI token exchange failed (${response.status})${detail ? `: ${detail}` : ''}`);
+    }
+    const tokens = tokenResponseSchema.parse(await response.json());
+    const refreshToken = tokens.refresh_token;
+    if (!refreshToken)
+        throw new Error('xAI token response was missing refresh_token');
+    return { ...tokens, refresh_token: refreshToken };
+}
+export async function refreshXaiToken(refreshToken) {
+    const response = await fetch(TOKEN_URL, {
+        method: 'POST',
+        headers: authHeaders(),
+        body: new URLSearchParams({
+            grant_type: 'refresh_token',
+            refresh_token: refreshToken,
+            client_id: CLIENT_ID,
+        }).toString(),
+    });
+    if (!response.ok) {
+        const detail = await response.text().catch(() => '');
+        throw new Error(`xAI token refresh failed (${response.status})${detail ? `: ${detail}` : ''}`);
+    }
+    return tokenResponseSchema.parse(await response.json());
+}
+// ─── loopback server + browser flow ──────────────────────────────────────────
+const HTML_SUCCESS = `<!doctype html>
+<html><head><title>egaki - xAI Authorization Successful</title>
+<style>body{font-family:system-ui,-apple-system,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#131010;color:#f1ecec}.container{text-align:center;padding:2rem}h1{margin-bottom:1rem}p{color:#b7b1b1}</style>
+</head><body><div class="container"><h1>Authorization Successful</h1><p>You can close this window and return to egaki.</p></div>
+<script>setTimeout(()=>window.close(),2000)</script></body></html>`;
+function htmlError(error) {
+    const escaped = error.replace(/[&<>"']/g, (c) => {
+        const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+        return map[c] || c;
+    });
+    return `<!doctype html>
+<html><head><title>egaki - xAI Authorization Failed</title>
+<style>body{font-family:system-ui,-apple-system,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#131010;color:#f1ecec}.container{text-align:center;padding:2rem}h1{color:#fc533a;margin-bottom:1rem}p{color:#b7b1b1}.error{color:#ff917b;font-family:monospace;margin-top:1rem;padding:1rem;background:#3c140d;border-radius:.5rem}</style>
+</head><body><div class="container"><h1>Authorization Failed</h1><p>An error occurred during authorization.</p><div class="error">${escaped}</div></div></body></html>`;
+}
+let pendingOAuth;
+function startOAuthServer() {
+    return new Promise((resolve, reject) => {
+        const server = createServer((req, res) => {
+            const url = new URL(req.url || '/', `http://${OAUTH_HOST}:${OAUTH_PORT}`);
+            if (url.pathname !== OAUTH_REDIRECT_PATH) {
+                res.writeHead(404);
+                res.end('Not found');
+                return;
+            }
+            const code = url.searchParams.get('code');
+            const state = url.searchParams.get('state');
+            const error = url.searchParams.get('error');
+            const errorDescription = url.searchParams.get('error_description');
+            if (error) {
+                const msg = errorDescription || error;
+                pendingOAuth?.reject(new Error(msg));
+                pendingOAuth = undefined;
+                res.writeHead(200, { 'Content-Type': 'text/html' });
+                res.end(htmlError(msg));
+                return;
+            }
+            if (!code) {
+                // Missing code but no explicit error. Don't destroy pendingOAuth;
+                // could be a stray browser request, not the real callback.
+                res.writeHead(400, { 'Content-Type': 'text/html' });
+                res.end(htmlError('Missing authorization code'));
+                return;
+            }
+            if (!pendingOAuth || state !== pendingOAuth.state) {
+                // Bad state: respond 400 but keep pendingOAuth intact so the real
+                // callback can still succeed. Clearing it here would let a random
+                // local request to :56121/callback?code=x&state=bad kill the
+                // legitimate login attempt (local DoS).
+                res.writeHead(400, { 'Content-Type': 'text/html' });
+                res.end(htmlError('Invalid state — potential CSRF attack'));
+                return;
+            }
+            const current = pendingOAuth;
+            pendingOAuth = undefined;
+            exchangeCodeForTokens(code, current.verifier)
+                .then((tokens) => current.resolve(tokens))
+                .catch((err) => current.reject(err));
+            res.writeHead(200, { 'Content-Type': 'text/html' });
+            res.end(HTML_SUCCESS);
+        });
+        server.once('error', reject);
+        server.listen(OAUTH_PORT, OAUTH_HOST, () => {
+            server.removeListener('error', reject);
+            // Swallow subsequent errors so they don't crash the process
+            server.on('error', () => { });
+            resolve(server);
+        });
+    });
+}
+function waitForOAuthCallback(verifier, state) {
+    if (pendingOAuth) {
+        pendingOAuth.reject(new Error('Superseded by a newer xAI authorize request'));
+        pendingOAuth = undefined;
+    }
+    return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            if (pendingOAuth) {
+                pendingOAuth = undefined;
+                reject(new Error('OAuth callback timeout — authorization took too long'));
+            }
+        }, 5 * 60 * 1000);
+        pendingOAuth = {
+            verifier,
+            state,
+            resolve: (tokens) => {
+                clearTimeout(timeout);
+                resolve(tokens);
+            },
+            reject: (error) => {
+                clearTimeout(timeout);
+                reject(error);
+            },
+        };
+    });
+}
+// ─── public login function ───────────────────────────────────────────────────
+/**
+ * Run the xAI OAuth browser flow. Opens the system browser for authorization,
+ * waits for the callback, and returns an XaiAuth object with tokens.
+ */
+export async function xaiOAuthLogin() {
+    const s = spinner();
+    s.start('Starting xAI OAuth server...');
+    let server;
+    try {
+        server = await startOAuthServer();
+    }
+    catch (err) {
+        s.stop('Failed to start OAuth server');
+        throw new Error(`Could not bind to ${OAUTH_HOST}:${OAUTH_PORT}. Is Grok CLI or another egaki instance running? (${err})`);
+    }
+    const pkce = await generatePKCE();
+    const state = generateState();
+    const nonce = generateState();
+    // `plan=generic` opts into xAI's generic OAuth plan tier.
+    // `referrer=egaki` lets xAI attribute egaki-originated logins.
+    const params = new URLSearchParams({
+        response_type: 'code',
+        client_id: CLIENT_ID,
+        redirect_uri: REDIRECT_URI,
+        scope: SCOPE,
+        code_challenge: pkce.challenge,
+        code_challenge_method: 'S256',
+        state,
+        nonce,
+        plan: 'generic',
+        referrer: 'egaki',
+    });
+    const authUrl = `${AUTHORIZE_URL}?${params.toString()}`;
+    s.stop('OAuth server ready');
+    log.info('Opening browser for xAI authorization...');
+    note(authUrl, 'If the browser does not open, visit this URL manually');
+    // Register the callback listener BEFORE opening the browser. If the user
+    // already has an active xAI session, the browser can redirect back to
+    // the loopback server almost instantly. Registering after openUrlInBrowser
+    // creates a race where the callback arrives before pendingOAuth exists.
+    const callbackPromise = waitForOAuthCallback(pkce.verifier, state);
+    await openUrlInBrowser(authUrl);
+    s.start('Waiting for authorization...');
+    try {
+        const tokens = await callbackPromise;
+        s.stop('Authorization successful');
+        const email = extractEmailFromToken(tokens.id_token);
+        if (email) {
+            log.info(`Signed in as ${pc.bold(email)}`);
+        }
+        return {
+            email,
+            access: tokens.access_token,
+            refresh: tokens.refresh_token,
+            expires: Date.now() + (tokens.expires_in ?? 3600) * 1000,
+        };
+    }
+    catch (err) {
+        s.stop('Authorization failed');
+        throw err;
+    }
+    finally {
+        server.close();
+    }
+}
+// ─── token refresh ───────────────────────────────────────────────────────────
+/**
+ * Returns a valid XaiAuth, refreshing the access token if it's expired or
+ * about to expire. Calls `save` to persist the refreshed tokens.
+ */
+export async function getValidXaiAuth(auth, save) {
+    const expiresSoon = !auth.expires ||
+        auth.expires - Date.now() <= ACCESS_TOKEN_REFRESH_SKEW_MS ||
+        accessTokenIsExpiring(auth.access);
+    if (!expiresSoon)
+        return auth;
+    try {
+        const tokens = await refreshXaiToken(auth.refresh);
+        const refreshed = {
+            email: auth.email,
+            access: tokens.access_token,
+            refresh: tokens.refresh_token || auth.refresh,
+            expires: Date.now() + (tokens.expires_in ?? 3600) * 1000,
+        };
+        save(refreshed);
+        return refreshed;
+    }
+    catch (err) {
+        return new Error(`Failed to refresh xAI token. Please run \`egaki login\` and select xAI again. (${err})`);
+    }
+}

package/dist/vite/angled-screen.d.ts

@@ -0,0 +1,57 @@
+/**
+ * AngledScreen — CSS 3D perspective wrapper with fake bokeh depth-of-field.
+ *
+ * Wraps any children (images, videos, divs) in a 3D-transformed plane using
+ * CSS `perspective` + `transform: rotateX/Y/Z`. Simulates depth-of-field
+ * via `backdrop-filter: blur()` masked with `mask-image: linear-gradient()`
+ * so only the far edge of the content gets blurred.
+ *
+ * The blur direction is auto-detected from the rotation angles: whichever
+ * edge is furthest from the camera gets blurred. Override with bokehDirection.
+ *
+ * IMPORTANT: the blur overlay lives OUTSIDE the 3D transform as a sibling
+ * in the outer container. backdrop-filter does not work inside CSS 3D
+ * transformed elements (the transform compositing layer breaks backdrop
+ * sampling and blurs everything regardless of mask). Placing it outside
+ * means it blurs the already-composited 3D scene in normal 2D space.
+ *
+ * Set `debug` to visualize the mask gradient as green (sharp) / red (blur).
+ */
+import { type CSSProperties, type ReactNode } from 'react';
+export interface AngledScreenProps {
+    children: ReactNode;
+    /** CSS perspective distance in px. Smaller = more dramatic. Default 1200. */
+    perspective?: number;
+    /** X-axis rotation in degrees (tilts top/bottom). Default 8. */
+    rotateX?: number;
+    /** Y-axis rotation in degrees (angles left/right). Default -12. */
+    rotateY?: number;
+    /** Z-axis rotation in degrees. Default 0. */
+    rotateZ?: number;
+    /** Push the plane forward/back in px. Positive = closer/larger,
+     *  negative = further/smaller (same visual effect as scale). Default 0. */
+    translateZ?: number;
+    /** Transform origin. Default '50% 50%'. */
+    transformOrigin?: string;
+    /** Enable bokeh blur overlay. Default true. */
+    bokeh?: boolean;
+    /** Max blur radius in px at the far edge. Default 12. */
+    bokehBlur?: number;
+    /** Override which edge gets blurred. Auto-detected from rotation if omitted. */
+    bokehDirection?: 'top' | 'bottom' | 'left' | 'right';
+    /** Where blur starts (0-1). 0 = blur from the very near edge, 1 = no blur.
+     *  The transition ramp is a fixed 25% after this point. Default 0.3. */
+    bokehOffset?: number;
+    /** Background color behind the tilted screen. Default '#000000'. */
+    backgroundColor?: string;
+    /** Width of the screen content. Default '80%'. */
+    width?: string | number;
+    /** Height of the screen content. Default 'auto'. */
+    height?: string | number;
+    /** Show the blur mask as green (sharp) / red (blur) overlay for debugging. */
+    debug?: boolean;
+    /** Optional inline style on the outer container. */
+    style?: CSSProperties;
+}
+export declare function AngledScreen(props: AngledScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=angled-screen.d.ts.map

package/dist/vite/angled-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"angled-screen.d.ts","sourceRoot":"","sources":["../../src/vite/angled-screen.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG1D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAA;IAGnB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;+EAC2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACpD;4EACwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;IAGpB,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAwBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAwHpD"}

package/dist/vite/angled-screen.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AngledScreen — CSS 3D perspective wrapper with fake bokeh depth-of-field.
+ *
+ * Wraps any children (images, videos, divs) in a 3D-transformed plane using
+ * CSS `perspective` + `transform: rotateX/Y/Z`. Simulates depth-of-field
+ * via `backdrop-filter: blur()` masked with `mask-image: linear-gradient()`
+ * so only the far edge of the content gets blurred.
+ *
+ * The blur direction is auto-detected from the rotation angles: whichever
+ * edge is furthest from the camera gets blurred. Override with bokehDirection.
+ *
+ * IMPORTANT: the blur overlay lives OUTSIDE the 3D transform as a sibling
+ * in the outer container. backdrop-filter does not work inside CSS 3D
+ * transformed elements (the transform compositing layer breaks backdrop
+ * sampling and blurs everything regardless of mask). Placing it outside
+ * means it blurs the already-composited 3D scene in normal 2D space.
+ *
+ * Set `debug` to visualize the mask gradient as green (sharp) / red (blur).
+ */
+import {} from 'react';
+import { useTweakpane } from "./tweakpane-hook.js";
+const GRADIENT_DIRECTIONS = {
+    top: 'to top',
+    bottom: 'to bottom',
+    left: 'to left',
+    right: 'to right',
+};
+/**
+ * Auto-detect which edge is furthest from camera based on rotation.
+ * CSS rotateY(-20deg): right edge comes toward viewer, LEFT is far → blur left.
+ * CSS rotateY(+20deg): left edge comes toward viewer, RIGHT is far → blur right.
+ * CSS rotateX(+10deg): top edge comes toward viewer, BOTTOM is far → blur bottom.
+ * CSS rotateX(-10deg): bottom edge comes toward viewer, TOP is far → blur top.
+ * Picks the axis with the larger rotation angle.
+ */
+function autoDirection(rotateX, rotateY) {
+    if (Math.abs(rotateY) >= Math.abs(rotateX)) {
+        return rotateY < 0 ? 'left' : 'right';
+    }
+    return rotateX > 0 ? 'bottom' : 'top';
+}
+export function AngledScreen(props) {
+    const { children, transformOrigin = '50% 50%', bokehDirection, backgroundColor = '#000000', width = '80%', height = 'auto', style, } = props;
+    const tp = useTweakpane('AngledScreen', {
+        perspective: { value: props.perspective ?? 1200, min: 100, max: 3000, step: 10 },
+        rotateX: { value: props.rotateX ?? 8, min: -90, max: 90, step: 0.5 },
+        rotateY: { value: props.rotateY ?? -12, min: -90, max: 90, step: 0.5 },
+        rotateZ: { value: props.rotateZ ?? 0, min: -180, max: 180, step: 0.5 },
+        translateZ: { value: props.translateZ ?? 0, min: -500, max: 500, step: 1 },
+        bokeh: props.bokeh ?? true,
+        bokehBlur: { value: props.bokehBlur ?? 12, min: 0, max: 50, step: 0.5 },
+        bokehOffset: { value: props.bokehOffset ?? 0.3, min: 0, max: 1, step: 0.01 },
+        debug: props.debug ?? false,
+    });
+    const { perspective, rotateX, rotateY, rotateZ, translateZ } = tp;
+    const { bokeh, bokehBlur, bokehOffset } = tp;
+    const showDebug = tp.debug;
+    const direction = bokehDirection ?? autoDirection(rotateX, rotateY);
+    const gradientDir = GRADIENT_DIRECTIONS[direction] || 'to right';
+    const startPct = `${bokehOffset * 100}%`;
+    const endPct = `${Math.min((bokehOffset + 0.25) * 100, 100)}%`;
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundColor,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    ...style,
+                }, children: _jsx("div", { style: {
+                        perspective: `${perspective}px`,
+                        perspectiveOrigin: '50% 50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '100%',
+                        height: '100%',
+                    }, children: _jsx("div", { style: {
+                            transform: [
+                                `rotateX(${rotateX}deg)`,
+                                `rotateY(${rotateY}deg)`,
+                                `rotateZ(${rotateZ}deg)`,
+                                translateZ !== 0 ? `translateZ(${translateZ}px)` : '',
+                            ]
+                                .filter(Boolean)
+                                .join(' '),
+                            transformOrigin,
+                            width: typeof width === 'number' ? `${width}px` : width,
+                            height: typeof height === 'number' ? `${height}px` : height,
+                            position: 'relative',
+                            borderRadius: '12px',
+                            overflow: 'hidden',
+                        }, children: children }) }) }), bokeh && bokehBlur > 0 && !showDebug && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backdropFilter: `blur(${bokehBlur}px)`,
+                    WebkitBackdropFilter: `blur(${bokehBlur}px)`,
+                    maskImage: `linear-gradient(${gradientDir}, transparent ${startPct}, black ${endPct})`,
+                    WebkitMaskImage: `linear-gradient(${gradientDir}, transparent ${startPct}, black ${endPct})`,
+                    pointerEvents: 'none',
+                } })), showDebug && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    background: `linear-gradient(${gradientDir}, rgba(0,255,0,0.4) ${startPct}, rgba(255,0,0,0.4) ${endPct})`,
+                    pointerEvents: 'none',
+                    zIndex: 999,
+                } }))] }));
+}

package/dist/vite/app.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Spiceflow entry for the video framework.
+ *
+ * The server has two jobs:
+ *
+ * 1. Deliver the MDX source string to the client through the RSC flight
+ *    payload. All regular MDX processing (parsing, section splitting,
+ *    expression evaluation, safe-mdx rendering) happens in the browser
+ *    inside MdxClientApp (mdx-client.tsx, 'use client'), so MDX expression
+ *    props can be functions and user components don't need 'use client'.
+ *
+ * 2. Render <Server> slots. <Server> is a reserved MDX element marking a
+ *    subtree as server components: its children are rendered HERE in the
+ *    RSC environment (async allowed, promises stream through flight) and
+ *    passed to the client as serverSlots keyed by the node's start
+ *    position. The MDX string sent to the client has each <Server> block
+ *    blanked to a self-closing marker with newline padding, so every
+ *    position (slot keys, data-markdown-line, sourcemaps) stays aligned
+ *    with the original file and the client never parses server-only
+ *    content.
+ *
+ * NOTE: Relative imports MUST include file extensions (.tsx, .ts) for the
+ * RSC module runner to resolve them correctly within noExternal packages.
+ */
+import { Spiceflow } from 'spiceflow';
+import { type GenerationProgressEvent } from '../cli/cached-generate.js';
+export declare const app: Spiceflow<"", true, {
+    state: {};
+}, {
+    type: {};
+    error: {};
+}, {
+    schema: {};
+    macro: {};
+    macroFn: {};
+    loaderData: {};
+}, {
+    api: {
+        "generation-progress": {
+            get: {
+                request: unknown;
+                params: {};
+                query: unknown;
+                response: {
+                    200: AsyncGenerator<GenerationProgressEvent, any, any>;
+                };
+            };
+        };
+    };
+}, "" | "/" | "/api/generation-progress", Record<"/api/generation-progress", unknown>>;
+//# sourceMappingURL=app.d.ts.map

package/dist/vite/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/vite/app.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAKH,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAqBrC,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,2BAA2B,CAAA;AA+IlC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;sFAAa,CAAA"}