@effing/effie-preview 0.1.0

package/LICENSE

@@ -0,0 +1,11 @@
+O'Saasy License
+
+Copyright © 2026, Trackuity BV.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+1. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+2. No licensee or downstream recipient may use the Software (including any modified or derivative versions) to directly compete with the original Licensor by offering it to third parties as a hosted, managed, or Software-as-a-Service (SaaS) product or cloud service where the primary value of the service is the functionality of the Software itself.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,317 @@
+# @effing/effie-preview
+
+**Preview components for Effie video compositions.**
+
+> Part of the [**Effing**](../../README.md) family — programmatic video creation with TypeScript.
+
+Preview covers, backgrounds, layers, and segments before rendering. Uses `@effing/annie-player` for animation playback.
+
+## Installation
+
+```bash
+npm install @effing/effie-preview @effing/effie @effing/annie-player
+```
+
+## Quick Start
+
+Components support two usage patterns:
+
+### Simple API (built-in styles)
+
+```tsx
+import { createEffieSourceResolver } from "@effing/effie-preview";
+import {
+  EffieCoverPreview,
+  EffieBackgroundPreview,
+  EffieSegmentPreview,
+} from "@effing/effie-preview/react";
+
+function EffiePreview({ effieJson, renderedVideoUrl }) {
+  const resolveSource = createEffieSourceResolver(effieJson.sources);
+
+  return (
+    <div>
+      <h2>Cover</h2>
+      <EffieCoverPreview cover={effieJson.cover} video={renderedVideoUrl} />
+
+      <h2>Background</h2>
+      <EffieBackgroundPreview
+        background={effieJson.background}
+        resolveSource={resolveSource}
+      />
+
+      <h2>Segments</h2>
+      {effieJson.segments.map((segment, i) => (
+        <EffieSegmentPreview
+          key={i}
+          segment={segment}
+          index={i}
+          resolveSource={resolveSource}
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+### Compound API (full control)
+
+For custom layouts, use the compound sub-components:
+
+```tsx
+import {
+  EffieBackgroundPreview,
+  EffieSegmentPreview,
+  EffieLayerPreview,
+} from "@effing/effie-preview/react";
+
+function CustomLayout({ effieJson }) {
+  const resolveSource = createEffieSourceResolver(effieJson.sources);
+
+  return (
+    <div>
+      {/* Background with custom layout */}
+      <EffieBackgroundPreview.Root style={{ display: "grid", gap: "2rem" }}>
+        <EffieBackgroundPreview.Media
+          background={effieJson.background}
+          resolveSource={resolveSource}
+          style={{ height: 300, objectFit: "cover" }}
+        />
+        <EffieBackgroundPreview.Info
+          background={effieJson.background}
+          style={{ fontSize: "0.9rem" }}
+        />
+      </EffieBackgroundPreview.Root>
+
+      {/* Segments with custom layer layout */}
+      {effieJson.segments.map((segment, i) => (
+        <EffieSegmentPreview.Root key={i} style={{ padding: "2rem" }}>
+          <EffieSegmentPreview.Header style={{ fontWeight: 700 }}>
+            Segment {i + 1} — {segment.duration}s
+          </EffieSegmentPreview.Header>
+          <EffieSegmentPreview.Layers
+            style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)" }}
+          >
+            {segment.layers.map((layer, j) => (
+              <EffieLayerPreview.Root key={j}>
+                <EffieLayerPreview.Media
+                  layer={layer}
+                  index={j}
+                  resolveSource={resolveSource}
+                  resolution={{ width: 356, height: 200 }}
+                />
+                <EffieLayerPreview.Info layer={layer} index={j} />
+              </EffieLayerPreview.Root>
+            ))}
+          </EffieSegmentPreview.Layers>
+        </EffieSegmentPreview.Root>
+      ))}
+    </div>
+  );
+}
+```
+
+## Concepts
+
+### Source Resolution
+
+Effie compositions can reference sources by name (`#mySource`) instead of full URLs. The preview components use a source resolver to look up these references:
+
+```typescript
+import { createEffieSourceResolver } from "@effing/effie-preview";
+
+const resolve = createEffieSourceResolver(effieJson.sources);
+resolve("#background"); // Returns the actual URL
+resolve("https://..."); // Returns as-is
+```
+
+## API Overview
+
+### Core
+
+#### `createEffieSourceResolver(sources?)`
+
+Create a function that resolves source references:
+
+```typescript
+function createEffieSourceResolver(sources?: EffieSources): EffieSourceResolver;
+
+type EffieSourceResolver = (src: string) => string;
+```
+
+### React Components
+
+All preview components support both simple and compound usage patterns.
+
+#### `EffieCoverPreview`
+
+Display the cover image, or a video player if a rendered video is available.
+
+```tsx
+<EffieCoverPreview
+  cover={EffieWebUrl}         // Cover image URL
+  resolution={{ width, height }} // Preview resolution
+  video={string | null}       // Optional rendered video URL
+  onPlay={() => void}         // Callback when video starts playing
+  onFullyBuffered={() => void} // Callback when video is fully buffered
+  className={string}          // Class name for img/video element
+  style={CSSProperties}       // Style for img/video element
+/>
+```
+
+#### `EffieBackgroundPreview`
+
+Preview the composition background (color, image, or video).
+
+**Simple:**
+
+```tsx
+<EffieBackgroundPreview
+  background={EffieBackground}
+  resolveSource={EffieSourceResolver}
+  resolution={{ width, height }}
+  className={string}
+  style={CSSProperties}
+/>
+```
+
+**Compound:**
+
+```tsx
+<EffieBackgroundPreview.Root className={string} style={CSSProperties}>
+  <EffieBackgroundPreview.Media
+    background={EffieBackground}
+    resolveSource={EffieSourceResolver}
+    className={string}
+    style={CSSProperties}
+  />
+  <EffieBackgroundPreview.Info
+    background={EffieBackground}
+    className={string}
+    style={CSSProperties}
+  />
+</EffieBackgroundPreview.Root>
+```
+
+#### `EffieSegmentPreview`
+
+Preview a segment with all its layers. The `stacking` prop controls how layers are arranged:
+
+- `"vertical"` (default): layers stack vertically, info beside each layer
+- `"horizontal"`: layers flow horizontally, info below each layer
+
+**Simple:**
+
+```tsx
+<EffieSegmentPreview
+  segment={EffieSegment}
+  index={number}
+  resolveSource={EffieSourceResolver}
+  resolution={{ width, height }}
+  stacking={"vertical" | "horizontal"} // Default: "vertical"
+  className={string}
+  style={CSSProperties}
+/>
+```
+
+**Compound:**
+
+```tsx
+<EffieSegmentPreview.Root className={string} style={CSSProperties}>
+  <EffieSegmentPreview.Header className={string} style={CSSProperties}>
+    {children}
+  </EffieSegmentPreview.Header>
+  <EffieSegmentPreview.Layers className={string} style={CSSProperties}>
+    {children}
+  </EffieSegmentPreview.Layers>
+</EffieSegmentPreview.Root>
+```
+
+#### `EffieLayerPreview`
+
+Preview a single layer (image or animation). The `stacking` prop controls layout:
+
+- `"horizontal"` (default): info beside media (flex row)
+- `"vertical"`: info below media (flex column)
+
+**Simple:**
+
+```tsx
+<EffieLayerPreview
+  layer={EffieLayer}
+  index={number}
+  resolveSource={EffieSourceResolver}
+  resolution={{ width, height }}
+  stacking={"vertical" | "horizontal"} // Default: "horizontal"
+  className={string}
+  style={CSSProperties}
+/>
+```
+
+**Compound:**
+
+```tsx
+<EffieLayerPreview.Root className={string} style={CSSProperties}>
+  <EffieLayerPreview.Media
+    layer={EffieLayer}
+    index={number}
+    resolveSource={EffieSourceResolver}
+    resolution={{ width, height }}
+    className={string}
+    style={CSSProperties}
+  />
+  <EffieLayerPreview.Info
+    layer={EffieLayer}
+    index={number}
+    className={string}
+    style={CSSProperties}
+  />
+</EffieLayerPreview.Root>
+```
+
+For animation layers, `EffieLayerPreview.Media` renders an `AnniePlayer` with load/play controls.
+
+### Validation Errors
+
+#### `parseEffieValidationIssues(issues)`
+
+Parse validation issues from an error response:
+
+```typescript
+import { parseEffieValidationIssues } from "@effing/effie-preview";
+
+const response = await fetch("ffs.example.com/render", {
+  method: "POST",
+  body,
+});
+if (!response.ok) {
+  const errorBody = await response.json();
+  const issues = parseEffieValidationIssues(errorBody.issues);
+  // issues: EffieValidationIssue[] | undefined
+}
+```
+
+#### `EffieValidationErrors`
+
+Display validation errors with detailed issue breakdown:
+
+```tsx
+import { EffieValidationErrors } from "@effing/effie-preview/react";
+
+<EffieValidationErrors
+  error={string}                    // Error message (e.g., "Invalid effie data")
+  issues={EffieValidationIssue[]}   // Optional list of validation issues
+  className={string}
+  style={CSSProperties}
+/>
+```
+
+Each `EffieValidationIssue` contains:
+
+- `path` — Path to the field that failed validation (e.g., `"segments.0.transition.sweep"`)
+- `message` — Human-readable error message
+
+## Related Packages
+
+- [`@effing/effie`](../effie) — Video composition types
+- [`@effing/annie-player`](../annie-player) — Animation playback (used internally)

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+import { EffieSources } from '@effing/effie';
+
+/**
+ * Create a source resolver function that handles #reference lookups
+ * in effie source fields.
+ *
+ * @param sources - The sources map from an EffieData object
+ * @returns A function that resolves source references to URLs
+ *
+ * @example
+ * ```ts
+ * const resolve = createEffieSourceResolver(effieJson.sources);
+ * const url = resolve(layer.source); // Handles both "#ref" and direct URLs
+ * ```
+ */
+declare function createEffieSourceResolver(sources?: EffieSources): (src: string) => string;
+/**
+ * Type alias for a source resolver function
+ */
+type EffieSourceResolver = ReturnType<typeof createEffieSourceResolver>;
+/**
+ * Represents a validation issue from EffieData schema validation.
+ */
+type EffieValidationIssue = {
+    /** Path to the field that failed validation (e.g., "segments.0.transition.sweep") */
+    path: string;
+    /** Human-readable error message */
+    message: string;
+};
+/**
+ * Parse an unknown value as an array of validation issues.
+ *
+ * @param issues - The issues value to parse (typically from errorBody.issues)
+ * @returns Array of validation issues, or undefined if not a valid array
+ *
+ * @example
+ * ```ts
+ * const errorBody = await response.json();
+ * const issues = parseEffieValidationIssues(errorBody.issues);
+ * ```
+ */
+declare function parseEffieValidationIssues(issues: unknown): EffieValidationIssue[] | undefined;
+
+/** Progress event when a source is processed */
+type EffieWarmupProgressEvent = {
+    url: string;
+    status: "hit" | "cached" | "error";
+    cached: number;
+    failed: number;
+    total: number;
+    ms?: number;
+    error?: string;
+};
+/** Downloading event during source fetch */
+type EffieWarmupDownloadingEvent = {
+    url: string;
+    status: "started" | "downloading";
+    bytesReceived: number;
+};
+/** Union of all SSE event types */
+type EffieWarmupEvent = {
+    type: "start";
+    total: number;
+} | {
+    type: "progress";
+    data: EffieWarmupProgressEvent;
+} | {
+    type: "downloading";
+    data: EffieWarmupDownloadingEvent;
+} | {
+    type: "keepalive";
+    cached: number;
+    failed: number;
+    total: number;
+} | {
+    type: "summary";
+    cached: number;
+    failed: number;
+    total: number;
+} | {
+    type: "complete";
+    status: "ready";
+} | {
+    type: "error";
+    message: string;
+};
+/** Current warmup state */
+type EffieWarmupState = {
+    status: "idle" | "connecting" | "warming" | "ready" | "error";
+    total: number;
+    cached: number;
+    failed: number;
+    downloading: Map<string, {
+        url: string;
+        bytesReceived: number;
+    }>;
+    error?: string;
+    startTime?: number;
+    endTime?: number;
+};
+
+export { type EffieSourceResolver, type EffieValidationIssue, type EffieWarmupEvent, type EffieWarmupState, createEffieSourceResolver, parseEffieValidationIssues };

package/dist/index.js

@@ -0,0 +1,27 @@
+// src/core.ts
+function createEffieSourceResolver(sources) {
+  return (src) => {
+    if (src.startsWith("#")) {
+      const key = src.slice(1);
+      return sources?.[key] ?? src;
+    }
+    return src;
+  };
+}
+function parseEffieValidationIssues(issues) {
+  if (issues && Array.isArray(issues)) {
+    if (issues.every(
+      (issue) => typeof issue === "object" && issue !== null && "path" in issue && "message" in issue
+    )) {
+      return issues;
+    } else {
+      throw new Error("Invalid validation issues");
+    }
+  }
+  return void 0;
+}
+export {
+  createEffieSourceResolver,
+  parseEffieValidationIssues
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core.ts"],"sourcesContent":["import type { EffieSources } from \"@effing/effie\";\n\n/**\n * Create a source resolver function that handles #reference lookups\n * in effie source fields.\n *\n * @param sources - The sources map from an EffieData object\n * @returns A function that resolves source references to URLs\n *\n * @example\n * ```ts\n * const resolve = createEffieSourceResolver(effieJson.sources);\n * const url = resolve(layer.source); // Handles both \"#ref\" and direct URLs\n * ```\n */\nexport function createEffieSourceResolver(sources?: EffieSources) {\n  return (src: string): string => {\n    if (src.startsWith(\"#\")) {\n      const key = src.slice(1);\n      return sources?.[key] ?? src;\n    }\n    return src;\n  };\n}\n\n/**\n * Type alias for a source resolver function\n */\nexport type EffieSourceResolver = ReturnType<typeof createEffieSourceResolver>;\n\n/**\n * Represents a validation issue from EffieData schema validation.\n */\nexport type EffieValidationIssue = {\n  /** Path to the field that failed validation (e.g., \"segments.0.transition.sweep\") */\n  path: string;\n  /** Human-readable error message */\n  message: string;\n};\n\n/**\n * Parse an unknown value as an array of validation issues.\n *\n * @param issues - The issues value to parse (typically from errorBody.issues)\n * @returns Array of validation issues, or undefined if not a valid array\n *\n * @example\n * ```ts\n * const errorBody = await response.json();\n * const issues = parseEffieValidationIssues(errorBody.issues);\n * ```\n */\nexport function parseEffieValidationIssues(\n  issues: unknown,\n): EffieValidationIssue[] | undefined {\n  if (issues && Array.isArray(issues)) {\n    if (\n      issues.every(\n        (issue) =>\n          typeof issue === \"object\" &&\n          issue !== null &&\n          \"path\" in issue &&\n          \"message\" in issue,\n      )\n    ) {\n      return issues as EffieValidationIssue[];\n    } else {\n      throw new Error(\"Invalid validation issues\");\n    }\n  }\n  return undefined;\n}\n"],"mappings":";AAeO,SAAS,0BAA0B,SAAwB;AAChE,SAAO,CAAC,QAAwB;AAC9B,QAAI,IAAI,WAAW,GAAG,GAAG;AACvB,YAAM,MAAM,IAAI,MAAM,CAAC;AACvB,aAAO,UAAU,GAAG,KAAK;AAAA,IAC3B;AACA,WAAO;AAAA,EACT;AACF;AA6BO,SAAS,2BACd,QACoC;AACpC,MAAI,UAAU,MAAM,QAAQ,MAAM,GAAG;AACnC,QACE,OAAO;AAAA,MACL,CAAC,UACC,OAAO,UAAU,YACjB,UAAU,QACV,UAAU,SACV,aAAa;AAAA,IACjB,GACA;AACA,aAAO;AAAA,IACT,OAAO;AACL,YAAM,IAAI,MAAM,2BAA2B;AAAA,IAC7C;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/dist/react/index.d.ts

@@ -0,0 +1,229 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { EffieWebUrl, EffieBackground, EffieSources, EffieLayer, EffieSegment } from '@effing/effie';
+import { EffieSourceResolver, EffieValidationIssue, EffieWarmupState } from '../index.js';
+
+type EffieCoverPreviewProps = {
+    /** Cover image URL */
+    cover: EffieWebUrl;
+    /** Resolution for preview */
+    resolution: {
+        width: number;
+        height: number;
+    };
+    /** Optional video URL to show instead of cover image (e.g., after rendering) */
+    video?: string | null;
+    /** Callback when video starts playing */
+    onPlay?: () => void;
+    /** Callback when video is fully buffered (entire video downloaded) */
+    onFullyBuffered?: () => void;
+    /** Class name for the img/video element */
+    className?: string;
+    /** Style for the img/video element */
+    style?: React.CSSProperties;
+};
+/**
+ * Displays the effie cover image, or a video if provided.
+ * Simple component with built-in inline styles.
+ */
+declare function EffieCoverPreview({ cover, resolution, video, onPlay, onFullyBuffered, className, style, }: EffieCoverPreviewProps): react_jsx_runtime.JSX.Element;
+type EffieBackgroundPreviewRootProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+declare function EffieBackgroundPreviewRoot({ className, style, children, }: EffieBackgroundPreviewRootProps): react_jsx_runtime.JSX.Element;
+type EffieBackgroundPreviewMediaProps = {
+    /** Background configuration from effie JSON */
+    background: EffieBackground<EffieSources>;
+    /** Function to resolve source references */
+    resolveSource: EffieSourceResolver;
+    /** Class name for the media element */
+    className?: string;
+    /** Style for the media element */
+    style?: React.CSSProperties;
+};
+declare function EffieBackgroundPreviewMedia({ background, resolveSource, className, style, }: EffieBackgroundPreviewMediaProps): react_jsx_runtime.JSX.Element | null;
+type EffieBackgroundPreviewInfoProps = {
+    /** Background configuration from effie JSON */
+    background: EffieBackground<EffieSources>;
+    /** Class name for the info section */
+    className?: string;
+    /** Style for the info section */
+    style?: React.CSSProperties;
+};
+declare function EffieBackgroundPreviewInfo({ background, className, style, }: EffieBackgroundPreviewInfoProps): react_jsx_runtime.JSX.Element;
+type EffieBackgroundPreviewProps = {
+    /** Background configuration from effie JSON */
+    background: EffieBackground<EffieSources>;
+    /** Function to resolve source references */
+    resolveSource: EffieSourceResolver;
+    /** Resolution for preview */
+    resolution: {
+        width: number;
+        height: number;
+    };
+    /** Class name for the container */
+    className?: string;
+    /** Style for the container */
+    style?: React.CSSProperties;
+};
+declare function EffieBackgroundPreviewSimple({ background, resolveSource, resolution, className, style, }: EffieBackgroundPreviewProps): react_jsx_runtime.JSX.Element;
+/**
+ * Displays a preview of the effie background (color, image, or video).
+ *
+ * Usage:
+ * - Simple: `<EffieBackgroundPreview background={...} resolveSource={...} />`
+ * - Compound: `<EffieBackgroundPreview.Root>...</EffieBackgroundPreview.Root>`
+ */
+declare const EffieBackgroundPreview: typeof EffieBackgroundPreviewSimple & {
+    Root: typeof EffieBackgroundPreviewRoot;
+    Media: typeof EffieBackgroundPreviewMedia;
+    Info: typeof EffieBackgroundPreviewInfo;
+};
+type EffieLayerPreviewRootProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+declare function EffieLayerPreviewRoot({ className, style, children, }: EffieLayerPreviewRootProps): react_jsx_runtime.JSX.Element;
+type EffieLayerPreviewMediaProps = {
+    /** Layer configuration from effie JSON */
+    layer: EffieLayer<EffieSources>;
+    /** Layer index (0-based) for alt text */
+    index: number;
+    /** Function to resolve source references */
+    resolveSource: EffieSourceResolver;
+    /** Resolution for preview */
+    resolution: {
+        width: number;
+        height: number;
+    };
+    /** Class name for the media element */
+    className?: string;
+    /** Style for the media element */
+    style?: React.CSSProperties;
+};
+declare function EffieLayerPreviewMedia({ layer, index, resolveSource, resolution, className, style, }: EffieLayerPreviewMediaProps): react_jsx_runtime.JSX.Element;
+type EffieLayerPreviewInfoProps = {
+    /** Layer configuration from effie JSON */
+    layer: EffieLayer<EffieSources>;
+    /** Layer index (0-based) */
+    index: number;
+    /** Class name for the info section */
+    className?: string;
+    /** Style for the info section */
+    style?: React.CSSProperties;
+};
+declare function EffieLayerPreviewInfo({ layer, index, className, style, }: EffieLayerPreviewInfoProps): react_jsx_runtime.JSX.Element;
+type EffieLayerPreviewProps = {
+    /** Layer configuration from effie JSON */
+    layer: EffieLayer<EffieSources>;
+    /** Layer index (0-based) */
+    index: number;
+    /** Function to resolve source references */
+    resolveSource: EffieSourceResolver;
+    /** Resolution for preview */
+    resolution: {
+        width: number;
+        height: number;
+    };
+    /** How to stack info relative to media: "horizontal" (default, info beside) or "vertical" (info below) */
+    stacking?: "vertical" | "horizontal";
+    /** Class name for the container */
+    className?: string;
+    /** Style for the container */
+    style?: React.CSSProperties;
+};
+declare function EffieLayerPreviewSimple({ layer, index, resolveSource, resolution, stacking, className, style, }: EffieLayerPreviewProps): react_jsx_runtime.JSX.Element;
+/**
+ * Displays a preview of a single layer, including its metadata.
+ * Uses AnniePlayer for animation layers.
+ *
+ * Usage:
+ * - Simple: `<EffieLayerPreview layer={...} index={...} resolveSource={...} />`
+ * - Compound: `<EffieLayerPreview.Root>...</EffieLayerPreview.Root>`
+ */
+declare const EffieLayerPreview: typeof EffieLayerPreviewSimple & {
+    Root: typeof EffieLayerPreviewRoot;
+    Media: typeof EffieLayerPreviewMedia;
+    Info: typeof EffieLayerPreviewInfo;
+};
+type EffieSegmentPreviewRootProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+declare function EffieSegmentPreviewRoot({ className, style, children, }: EffieSegmentPreviewRootProps): react_jsx_runtime.JSX.Element;
+type EffieSegmentPreviewHeaderProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+declare function EffieSegmentPreviewHeader({ className, style, children, }: EffieSegmentPreviewHeaderProps): react_jsx_runtime.JSX.Element;
+type EffieSegmentPreviewLayersProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+};
+declare function EffieSegmentPreviewLayers({ className, style, children, }: EffieSegmentPreviewLayersProps): react_jsx_runtime.JSX.Element;
+type EffieSegmentPreviewProps = {
+    /** Segment configuration from effie JSON */
+    segment: EffieSegment<EffieSources>;
+    /** Segment index (0-based) */
+    index: number;
+    /** Function to resolve source references */
+    resolveSource: EffieSourceResolver;
+    /** Resolution for preview */
+    resolution: {
+        width: number;
+        height: number;
+    };
+    /** How to stack layers: "vertical" (default) or "horizontal" */
+    stacking?: "vertical" | "horizontal";
+    /** Class name for the container */
+    className?: string;
+    /** Style for the container */
+    style?: React.CSSProperties;
+};
+declare function EffieSegmentPreviewSimple({ segment, index, resolveSource, resolution, stacking, className, style, }: EffieSegmentPreviewProps): react_jsx_runtime.JSX.Element;
+/**
+ * Displays a preview of a segment with all its layers.
+ *
+ * Usage:
+ * - Simple: `<EffieSegmentPreview segment={...} index={...} resolveSource={...} />`
+ * - Compound: `<EffieSegmentPreview.Root>...</EffieSegmentPreview.Root>`
+ */
+declare const EffieSegmentPreview: typeof EffieSegmentPreviewSimple & {
+    Root: typeof EffieSegmentPreviewRoot;
+    Header: typeof EffieSegmentPreviewHeader;
+    Layers: typeof EffieSegmentPreviewLayers;
+};
+type EffieValidationErrorsProps = {
+    /** Error message (e.g., "Invalid effie data") */
+    error: string;
+    /** List of validation issues */
+    issues?: EffieValidationIssue[];
+    /** Class name for the container */
+    className?: string;
+    /** Style for the container */
+    style?: React.CSSProperties;
+};
+/**
+ * Displays validation errors with detailed issue breakdown.
+ * Simple component with built-in inline styles.
+ */
+declare function EffieValidationErrors({ error, issues, className, style, }: EffieValidationErrorsProps): react_jsx_runtime.JSX.Element;
+type UseEffieWarmupResult = {
+    state: EffieWarmupState;
+    isReady: boolean;
+    isWarming: boolean;
+    hasError: boolean;
+};
+/**
+ * Hook to connect to a warmup SSE stream and track progress.
+ *
+ * @param streamUrl - The full SSE stream URL returned by the FFS server (null if FFS not configured)
+ */
+declare function useEffieWarmup(streamUrl: string | null): UseEffieWarmupResult;
+
+export { EffieBackgroundPreview, type EffieBackgroundPreviewProps, EffieCoverPreview, type EffieCoverPreviewProps, EffieLayerPreview, type EffieLayerPreviewProps, EffieSegmentPreview, type EffieSegmentPreviewProps, EffieValidationErrors, type EffieValidationErrorsProps, type UseEffieWarmupResult, useEffieWarmup };