egaki 0.6.0 → 0.7.0

package/dist/cli/transcription-models.js

@@ -0,0 +1,100 @@
+// Transcription model registry for egaki.
+// Maps transcription model IDs to their provider and direct HTTP provider factory.
+// Follows the same pattern as speech-models.ts: provider factory map with lazy
+// imports, auth source detection, and key validation.
+//
+// No AI SDK dependency — all providers use direct HTTP calls via
+// TranscriptionProvider implementations in transcription-providers.ts.
+import pc from 'picocolors';
+import { PROVIDERS, injectCredentialsToEnv, } from './credentials.js';
+import { ValidationError } from './models.js';
+import { TRANSCRIPTION_CATALOG, findTranscriptionModel, } from './transcription-catalog.js';
+export {};
+export const TRANSCRIPTION_MODELS = TRANSCRIPTION_CATALOG.map((m) => m.id);
+export const DEFAULT_TRANSCRIPTION_MODEL = 'whisper-1';
+const TRANSCRIPTION_PROVIDER_FACTORIES = {
+    openai: async () => {
+        const { createOpenAITranscriptionProvider } = await import('./transcription-providers.js');
+        return createOpenAITranscriptionProvider();
+    },
+    elevenlabs: async () => {
+        const { createElevenLabsTranscriptionProvider } = await import('./transcription-providers.js');
+        return createElevenLabsTranscriptionProvider();
+    },
+    deepgram: async () => {
+        const { createDeepgramTranscriptionProvider } = await import('./transcription-providers.js');
+        return createDeepgramTranscriptionProvider();
+    },
+    groq: async () => {
+        const { createGroqTranscriptionProvider } = await import('./transcription-providers.js');
+        return createGroqTranscriptionProvider();
+    },
+    cartesia: async () => {
+        const { createCartesiaTranscriptionProvider } = await import('./transcription-providers.js');
+        return createCartesiaTranscriptionProvider();
+    },
+};
+// ─── key checking ────────────────────────────────────────────────────────────
+function hasDirectProviderKey(providerName) {
+    const info = PROVIDERS[providerName];
+    if (!info)
+        return false;
+    return Boolean(process.env[info.envVar]);
+}
+// ─── config lookup ───────────────────────────────────────────────────────────
+export function getTranscriptionModelConfig(modelId) {
+    const entry = findTranscriptionModel(modelId);
+    if (!entry) {
+        return new ValidationError(`Unknown transcription model: ${modelId}`);
+    }
+    return entry;
+}
+function resolveAuthSource(providerName) {
+    const info = PROVIDERS[providerName];
+    if (info && process.env[info.envVar]) {
+        return { type: 'api-key', label: info.envVar };
+    }
+    return { type: 'api-key', label: 'unknown' };
+}
+function logAuthSource(source) {
+    console.error(pc.dim(`Auth: ${source.label}`));
+}
+// ─── ensure key ──────────────────────────────────────────────────────────────
+export function ensureTranscriptionProviderKey(providerName) {
+    if (hasDirectProviderKey(providerName))
+        return undefined;
+    const info = PROVIDERS[providerName];
+    const label = info?.label || providerName;
+    return new ValidationError(`Missing API key for ${label}. ` +
+        `Run: egaki login --provider ${providerName} --key <key>. ` +
+        (info ? info.hint : ''));
+}
+// ─── provider cache ──────────────────────────────────────────────────────────
+/** Global cache of provider instances, keyed by provider name. */
+const providerCache = globalThis.__egakiTranscriptionProviderCache ??= new Map();
+// ─── public factory ──────────────────────────────────────────────────────────
+export function getTranscriptionProvider(providerName) {
+    injectCredentialsToEnv();
+    const keyError = ensureTranscriptionProviderKey(providerName);
+    if (keyError)
+        return keyError;
+    const authSource = resolveAuthSource(providerName);
+    logAuthSource(authSource);
+    const factory = TRANSCRIPTION_PROVIDER_FACTORIES[providerName];
+    if (!factory) {
+        return new Error(`Transcription is not supported for provider: ${providerName}`);
+    }
+    // Return a lazy provider: the factory is async but we want getTranscriptionProvider
+    // to be sync for ergonomic use in transcribeAudioUncached. The provider promise
+    // is cached globally per provider name so the factory runs once across all calls.
+    return {
+        async transcribe(options) {
+            const cached = providerCache.get(providerName);
+            if (cached)
+                return (await cached).transcribe(options);
+            const promise = factory();
+            providerCache.set(providerName, promise);
+            return (await promise).transcribe(options);
+        },
+    };
+}

package/dist/cli/transcription-providers.d.ts

@@ -0,0 +1,22 @@
+import type { TranscriptionSegment } from './transcription-generate.js';
+export interface TranscriptionProviderOptions {
+    audio: Uint8Array;
+    modelId: string;
+    language?: string;
+    abortSignal?: AbortSignal;
+}
+export interface TranscriptionProviderResult {
+    text: string;
+    segments: TranscriptionSegment[];
+    language?: string;
+    durationInSeconds?: number;
+}
+export interface TranscriptionProvider {
+    transcribe(options: TranscriptionProviderOptions): Promise<TranscriptionProviderResult>;
+}
+export declare function createOpenAITranscriptionProvider(): TranscriptionProvider;
+export declare function createGroqTranscriptionProvider(): TranscriptionProvider;
+export declare function createElevenLabsTranscriptionProvider(): TranscriptionProvider;
+export declare function createDeepgramTranscriptionProvider(): TranscriptionProvider;
+export declare function createCartesiaTranscriptionProvider(): TranscriptionProvider;
+//# sourceMappingURL=transcription-providers.d.ts.map

package/dist/cli/transcription-providers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcription-providers.d.ts","sourceRoot":"","sources":["../../src/cli/transcription-providers.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAIvE,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,UAAU,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,oBAAoB,EAAE,CAAA;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,OAAO,EAAE,4BAA4B,GAAG,OAAO,CAAC,2BAA2B,CAAC,CAAA;CACxF;AAiED,wBAAgB,iCAAiC,IAAI,qBAAqB,CAkDzE;AAgBD,wBAAgB,+BAA+B,IAAI,qBAAqB,CA6CvE;AAmBD,wBAAgB,qCAAqC,IAAI,qBAAqB,CAqD7E;AAsBD,wBAAgB,mCAAmC,IAAI,qBAAqB,CAmD3E;AAmBD,wBAAgB,mCAAmC,IAAI,qBAAqB,CA+C3E"}

package/dist/cli/transcription-providers.js

@@ -0,0 +1,290 @@
+// Direct HTTP transcription providers for egaki.
+// Each provider sends multipart form or raw audio to the provider API
+// and parses the response, including word-level timestamps.
+//
+// This replaces the AI SDK's experimental_transcribe + @ai-sdk/* provider
+// packages, giving us full control over request/response handling.
+// In particular, we can:
+//   - Send verbose_json + word timestamp granularities for whisper-1
+//   - Avoid verbose_json for gpt-4o-transcribe models, which only support json/text
+//   - Parse the top-level `words` array from Groq responses (the AI SDK
+//     Groq provider only parses `segments`)
+//
+// API reference / OpenAPI specs:
+//   OpenAI:     https://platform.openai.com/docs/api-reference/audio/createTranscription
+//   Groq:       https://console.groq.com/docs/api-reference#audio-transcription
+//               (OpenAI-compatible endpoint at /openai/v1/audio/transcriptions)
+//   ElevenLabs: https://elevenlabs.io/docs/api-reference/speech-to-text/convert
+//   Deepgram:   https://developers.deepgram.com/reference/listen-file
+// ─── shared helpers ──────────────────────────────────────────────────────────
+function mediaTypeFromAudioBytes(audio) {
+    if (audio.length >= 3 && audio[0] === 0x49 && audio[1] === 0x44 && audio[2] === 0x33)
+        return 'audio/mpeg'; // ID3 header
+    if (audio.length >= 2 && audio[0] === 0xff && (audio[1] & 0xe0) === 0xe0)
+        return 'audio/mpeg'; // MP3 sync word
+    // MP4/M4A: ftyp box at byte offset 4 (box size in first 4 bytes, then 'ftyp')
+    if (audio.length >= 12 && audio[4] === 0x66 && audio[5] === 0x74 && audio[6] === 0x79 && audio[7] === 0x70)
+        return 'audio/mp4';
+    // WebM: EBML header magic bytes
+    if (audio.length >= 4 && audio[0] === 0x1a && audio[1] === 0x45 && audio[2] === 0xdf && audio[3] === 0xa3)
+        return 'audio/webm';
+    if (audio.length >= 4 && audio[0] === 0x52 && audio[1] === 0x49 && audio[2] === 0x46 && audio[3] === 0x46)
+        return 'audio/wav'; // RIFF
+    if (audio.length >= 4 && audio[0] === 0x4f && audio[1] === 0x67 && audio[2] === 0x67 && audio[3] === 0x53)
+        return 'audio/ogg'; // OggS
+    if (audio.length >= 4 && audio[0] === 0x66 && audio[1] === 0x4c && audio[2] === 0x61 && audio[3] === 0x43)
+        return 'audio/flac'; // fLaC
+    return 'audio/mpeg';
+}
+function extensionFromMediaType(mediaType) {
+    const map = {
+        'audio/mpeg': 'mp3',
+        'audio/mp3': 'mp3',
+        'audio/wav': 'wav',
+        'audio/x-wav': 'wav',
+        'audio/ogg': 'ogg',
+        'audio/flac': 'flac',
+        'audio/webm': 'webm',
+        'audio/mp4': 'm4a',
+        'audio/m4a': 'm4a',
+        'audio/x-m4a': 'm4a',
+    };
+    return map[mediaType] || 'mp3';
+}
+function buildAudioFormData(audio, modelId) {
+    const mediaType = mediaTypeFromAudioBytes(audio);
+    const ext = extensionFromMediaType(mediaType);
+    const formData = new FormData();
+    // Copy into a fresh ArrayBuffer to satisfy TypeScript's BlobPart constraint
+    // (Uint8Array backed by SharedArrayBuffer is not assignable to BlobPart).
+    const buf = new Uint8Array(audio);
+    const blob = new Blob([buf], { type: mediaType });
+    formData.append('file', new File([blob], `audio.${ext}`, { type: mediaType }), `audio.${ext}`);
+    formData.append('model', modelId);
+    return { formData, mediaType };
+}
+// ─── OpenAI ──────────────────────────────────────────────────────────────────
+// POST https://api.openai.com/v1/audio/transcriptions
+// Multipart form: file, model, response_format, timestamp_granularities[], language
+//
+// gpt-4o-transcribe and gpt-4o-mini-transcribe only support response_format=json
+// (NOT verbose_json). Word timestamps require verbose_json, so these models
+// cannot return word-level timestamps. This is an OpenAI API limitation, not ours.
+// whisper-1 supports verbose_json and returns word timestamps.
+const GPT4O_TRANSCRIBE_MODELS = ['gpt-4o-transcribe', 'gpt-4o-mini-transcribe'];
+export function createOpenAITranscriptionProvider() {
+    return {
+        async transcribe(options) {
+            const apiKey = process.env['OPENAI_API_KEY'];
+            if (!apiKey) {
+                throw new Error('Missing OPENAI_API_KEY. Run: egaki login --provider openai --key <key>');
+            }
+            const { formData } = buildAudioFormData(options.audio, options.modelId);
+            // gpt-4o-transcribe models only support "json" format;
+            // whisper-1 supports "verbose_json" which enables word timestamps.
+            const isGpt4oTranscribe = GPT4O_TRANSCRIBE_MODELS.includes(options.modelId);
+            formData.append('response_format', isGpt4oTranscribe ? 'json' : 'verbose_json');
+            if (!isGpt4oTranscribe) {
+                formData.append('timestamp_granularities[]', 'word');
+            }
+            if (options.language) {
+                formData.append('language', options.language);
+            }
+            const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
+                method: 'POST',
+                headers: { 'Authorization': `Bearer ${apiKey}` },
+                body: formData,
+                signal: options.abortSignal,
+            });
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => '');
+                throw new Error(`OpenAI transcription API error ${response.status}: ${errorText || response.statusText}`);
+            }
+            const json = await response.json();
+            // Prefer word-level segments from the `words` array; fall back to
+            // sentence-level `segments` if words are not present.
+            const segments = json.words?.map((w) => ({ text: w.word, startSecond: w.start, endSecond: w.end }))
+                ?? json.segments?.map((s) => ({ text: s.text, startSecond: s.start, endSecond: s.end }))
+                ?? [];
+            return {
+                text: json.text,
+                segments,
+                language: json.language,
+                durationInSeconds: json.duration,
+            };
+        },
+    };
+}
+export function createGroqTranscriptionProvider() {
+    return {
+        async transcribe(options) {
+            const apiKey = process.env['GROQ_API_KEY'];
+            if (!apiKey) {
+                throw new Error('Missing GROQ_API_KEY. Run: egaki login --provider groq --key <key>');
+            }
+            const { formData } = buildAudioFormData(options.audio, options.modelId);
+            formData.append('response_format', 'verbose_json');
+            formData.append('timestamp_granularities[]', 'word');
+            formData.append('timestamp_granularities[]', 'segment');
+            if (options.language) {
+                formData.append('language', options.language);
+            }
+            const response = await fetch('https://api.groq.com/openai/v1/audio/transcriptions', {
+                method: 'POST',
+                headers: { 'Authorization': `Bearer ${apiKey}` },
+                body: formData,
+                signal: options.abortSignal,
+            });
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => '');
+                throw new Error(`Groq transcription API error ${response.status}: ${errorText || response.statusText}`);
+            }
+            const json = await response.json();
+            // Prefer word-level from the `words` array (now parsed correctly);
+            // fall back to sentence-level `segments`.
+            const segments = json.words?.map((w) => ({ text: w.word, startSecond: w.start, endSecond: w.end }))
+                ?? json.segments?.map((s) => ({ text: s.text, startSecond: s.start, endSecond: s.end }))
+                ?? [];
+            return {
+                text: json.text,
+                segments,
+                language: json.language,
+                durationInSeconds: json.duration,
+            };
+        },
+    };
+}
+export function createElevenLabsTranscriptionProvider() {
+    return {
+        async transcribe(options) {
+            const apiKey = process.env['ELEVENLABS_API_KEY'];
+            if (!apiKey) {
+                throw new Error('Missing ELEVENLABS_API_KEY. Run: egaki login --provider elevenlabs --key <key>');
+            }
+            const mediaType = mediaTypeFromAudioBytes(options.audio);
+            const ext = extensionFromMediaType(mediaType);
+            const formData = new FormData();
+            const buf = new Uint8Array(options.audio);
+            const blob = new Blob([buf], { type: mediaType });
+            formData.append('file', new File([blob], `audio.${ext}`, { type: mediaType }), `audio.${ext}`);
+            formData.append('model_id', options.modelId);
+            formData.append('timestamps_granularity', 'word');
+            formData.append('tag_audio_events', 'true');
+            if (options.language) {
+                formData.append('language_code', options.language);
+            }
+            const response = await fetch('https://api.elevenlabs.io/v1/speech-to-text', {
+                method: 'POST',
+                headers: { 'xi-api-key': apiKey },
+                body: formData,
+                signal: options.abortSignal,
+            });
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => '');
+                throw new Error(`ElevenLabs transcription API error ${response.status}: ${errorText || response.statusText}`);
+            }
+            const json = await response.json();
+            // Filter to only 'word' type entries (skip 'spacing' and 'audio_event')
+            const segments = json.words
+                ?.filter((w) => w.type === 'word' && w.text.trim())
+                .map((w) => ({ text: w.text, startSecond: w.start ?? 0, endSecond: w.end ?? 0 }))
+                ?? [];
+            // Duration is the end time of the last word
+            const lastWord = json.words?.findLast((w) => w.type === 'word' && w.end != null);
+            const durationInSeconds = lastWord?.end ?? undefined;
+            return {
+                text: json.text,
+                segments,
+                language: json.language_code,
+                durationInSeconds,
+            };
+        },
+    };
+}
+export function createDeepgramTranscriptionProvider() {
+    return {
+        async transcribe(options) {
+            const apiKey = process.env['DEEPGRAM_API_KEY'];
+            if (!apiKey) {
+                throw new Error('Missing DEEPGRAM_API_KEY. Run: egaki login --provider deepgram --key <key>');
+            }
+            const mediaType = mediaTypeFromAudioBytes(options.audio);
+            const params = new URLSearchParams();
+            params.append('model', options.modelId);
+            params.append('smart_format', 'true');
+            if (options.language) {
+                params.append('language', options.language);
+            }
+            else {
+                params.append('detect_language', 'true');
+            }
+            const response = await fetch(`https://api.deepgram.com/v1/listen?${params}`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Token ${apiKey}`,
+                    'Content-Type': mediaType,
+                },
+                body: new Uint8Array(options.audio),
+                signal: options.abortSignal,
+            });
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => '');
+                throw new Error(`Deepgram transcription API error ${response.status}: ${errorText || response.statusText}`);
+            }
+            const json = await response.json();
+            const channel = json.results?.channels?.[0];
+            const alt = channel?.alternatives?.[0];
+            const segments = alt?.words?.map((w) => ({ text: w.word, startSecond: w.start, endSecond: w.end }))
+                ?? [];
+            return {
+                text: alt?.transcript ?? '',
+                segments,
+                language: channel?.detected_language,
+                durationInSeconds: json.metadata?.duration,
+            };
+        },
+    };
+}
+const CARTESIA_API_BASE = 'https://api.cartesia.ai';
+const CARTESIA_API_VERSION = '2026-03-01';
+export function createCartesiaTranscriptionProvider() {
+    return {
+        async transcribe(options) {
+            const apiKey = process.env['CARTESIA_API_KEY'];
+            if (!apiKey) {
+                throw new Error('Missing CARTESIA_API_KEY. Run: egaki login --provider cartesia --key <key>');
+            }
+            const mediaType = mediaTypeFromAudioBytes(options.audio);
+            const ext = extensionFromMediaType(mediaType);
+            const formData = new FormData();
+            const buf = new Uint8Array(options.audio);
+            const blob = new Blob([buf], { type: mediaType });
+            formData.append('file', new File([blob], `audio.${ext}`, { type: mediaType }), `audio.${ext}`);
+            formData.append('model', options.modelId);
+            formData.append('language', options.language || 'en');
+            formData.append('timestamp_granularities[]', 'word');
+            const response = await fetch(`${CARTESIA_API_BASE}/stt`, {
+                method: 'POST',
+                headers: {
+                    'Cartesia-Version': CARTESIA_API_VERSION,
+                    'Authorization': `Bearer ${apiKey}`,
+                },
+                body: formData,
+                signal: options.abortSignal,
+            });
+            if (!response.ok) {
+                const errorText = await response.text().catch(() => '');
+                throw new Error(`Cartesia STT API error ${response.status}: ${errorText || response.statusText}`);
+            }
+            const json = await response.json();
+            const segments = json.words?.map((w) => ({ text: w.word, startSecond: w.start, endSecond: w.end }))
+                ?? [];
+            return {
+                text: json.text,
+                segments,
+                language: json.language,
+                durationInSeconds: json.duration,
+            };
+        },
+    };
+}

package/dist/cli/video-model-catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-model-catalog.d.ts","sourceRoot":"","sources":["../../src/cli/video-model-catalog.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,aAAa,EACb,cAAc,EACd,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,WAAW,IAAI,gBAAgB,EACpC,KAAK,wBAAwB,GAC9B,MAAM,oBAAoB,CAAA"}

package/dist/cli/xai-auth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xai-auth.d.ts","sourceRoot":"","sources":["../../src/cli/xai-auth.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAwBvB,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,mBAAmB;;;;;iBAKvB,CAAA;AAEF,KAAK,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAA;AA+DxD,8EAA8E;AAC9E,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,GAAE,MAAqC,GAC5C,OAAO,CAKT;AA6BD,wBAAsB,eAAe,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAelF;AAwHD;;;GAGG;AACH,wBAAsB,aAAa,IAAI,OAAO,CAAC,OAAO,CAAC,CAoEtD;AAID;;;GAGG;AACH,wBAAsB,eAAe,CACnC,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,GAC5B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,CAuB1B"}

package/dist/{xai-auth.js → cli/xai-auth.js}

@@ -15,7 +15,7 @@ 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' };
+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.

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,
+                } }))] }));
+}