@orangecatai/element 0.0.3 → 0.0.4

package/dist/types/excalidraw/types.d.ts

@@ -454,6 +454,8 @@ export type CustomFontSpec = {
  * When provided, the AI agent uses these guidelines when creating ads.
  */
 export type BrandContext = {
+    /** Brand name — injected as a system-level constraint so the model stays on-brand. */
+    name?: string;
     colors?: {
         primary?: string;
         secondary?: string;
@@ -503,6 +505,21 @@ export type BrandContext = {
         environment?: string;
         negativeSpace?: string;
     };
+    /** Data URL of the master brand logo — passed as a visual reference to the image generation model. */
+    logoDataUrl?: string;
+    /** Data URL of text rendered in the brand headline font — passed as a visual reference to the image generation model. */
+    headlineFontPreviewDataUrl?: string;
+    /** Data URL of text rendered in the brand body font — passed as a second visual reference alongside the headline preview. */
+    bodyFontPreviewDataUrl?: string;
+    /**
+     * Fetchable URL (e.g. a short-lived presigned S3 URL) of the actual headline
+     * font file (.ttf/.otf). Passed to image models that accept a font file as
+     * input (Sourceful Riverflow v2+ via OpenRouter `image_config.font_inputs`).
+     * Unlike `headlineFontPreviewDataUrl` (a rendered preview image), this is the
+     * real font file the provider's servers fetch directly, so it must be a URL
+     * reachable without auth cookies — not the private `/api/brand/font` proxy.
+     */
+    headlineFontUrl?: string;
 };
 export interface ExcalidrawProps {
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
@@ -566,26 +583,29 @@ export interface ExcalidrawProps {
     showDeprecatedFonts?: boolean;
     renderScrollbars?: boolean;
     /**
-     * Gemini API key for image generation.
-     * When provided, takes precedence over the VITE_APP_GEMINI_API_KEY env variable.
-     * Required for image generation when using this package as an npm dependency.
+     * Host proxy URL for OpenRouter image generation (ImageGeneratorPanel,
+     * ImageQuickEditPanel). The SDK POSTs the OpenRouter request body here; the
+     * host injects the API key and forwards. Keeps the provider key out of the
+     * browser.
      */
-    geminiApiKey?: string;
+    imageGenUrl?: string;
     /**
-     * Leonardo API key for image toolbar upscale action.
-     * When provided, takes precedence over the VITE_APP_LEONARDO_API_KEY env variable.
+     * Brand context (colors, typography, logo, font preview) passed to every
+     * image generation surface (ImageGeneratorPanel, ImageQuickEditPanel, and the
+     * AI chat agent). When present, the logo and font preview are sent as visual
+     * references to the image model.
      */
-    leonardoApiKey?: string;
+    brandContext?: BrandContext;
     /**
-     * OpenRouter API key for auto-resize layout planning.
-     * When provided, takes precedence over the VITE_APP_OPEN_ROUTER_API_KEY env variable.
+     * Host proxy URL for the auto-resize engine's OpenRouter calls (layout
+     * planning, vision tagging, HTML generation, reviewer). Key stays server-side.
      */
-    openRouterApiKey?: string;
+    autoResizeUrl?: string;
     /**
-     * remove.bg API key for the remove background toolbar action.
-     * When provided, takes precedence over the VITE_APP_REMOVE_BG_API_KEY env variable.
+     * Host proxy URL for the remove.bg toolbar action. The SDK POSTs
+     * `{ imageDataUrl }` and receives `{ imageDataUrl }`. Key stays server-side.
      */
-    removeBgApiKey?: string;
+    removeBgUrl?: string;
     /**
      * Called before any image generation (ImageGeneratorPanel, ImageQuickEditPanel,
      * or agent loop generate_image tool). Return `{ allowed: false }` to block.
@@ -600,15 +620,34 @@ export interface ExcalidrawProps {
      */
     onAfterImageGen?: () => void;
     /**
-     * Called before an upscale is run (deduct credits, check quota).
-     * Return `{ allowed: false, error: "..." }` to block the operation.
+     * Host proxy URL for video uploads. The SDK POSTs multipart/form-data with
+     * a `file` field; the host stores the video and returns `{ url: string }`.
+     * Without this prop, video upload via drag-and-drop is silently ignored.
      */
-    onBeforeUpscale?: () => Promise<{
+    videoUploadUrl?: string;
+    /**
+     * Called before a video upload begins. Return `{ allowed: false }` to block
+     * (e.g. quota exceeded). Host uses this for credit gating.
+     */
+    onBeforeVideoUpload?: () => Promise<{
         allowed: boolean;
         error?: string;
     }>;
-    /** Called after a successful upscale. */
-    onAfterUpscale?: () => void;
+    /** Called after a video is successfully uploaded and placed on the canvas. */
+    onAfterVideoUpload?: () => void;
+    /** Host proxy URL for video generation jobs (POST). */
+    videoGenUrl?: string;
+    /** Host proxy URL for polling video generation job status (GET {url}/{jobId}). */
+    videoGenStatusUrl?: string;
+    /** Called before a video generation job is submitted (credit gate). */
+    onBeforeVideoGen?: () => Promise<{
+        allowed: boolean;
+        error?: string;
+    }>;
+    /** Called after a video is successfully generated and inserted into the canvas. */
+    onAfterVideoGen?: () => void;
+    /** Host proxy URL for video downloads — works around S3 CORS / presigned-URL expiry. */
+    videoDownloadProxyUrl?: string;
     /**
      * Called before a background removal is run (deduct credits, check quota).
      * Return `{ allowed: false, error: "..." }` to block the operation.
@@ -630,12 +669,12 @@ export interface ExcalidrawProps {
     /** Called after each successfully generated auto-resize dimension. */
     onAfterAutoResize?: () => void;
     /**
-     * Gemini model ID used for AI image generation — covers both the auto-resize
+     * OpenRouter model ID used for AI image generation — covers both the auto-resize
      * background regeneration and the agent chat `generate_image` tool.
      * Pass the same value here and to `AIChatPanel.agentImageModel` to keep
      * both surfaces on the same model with a single configuration.
-     * @default "gemini-3.1-flash-image-preview"
-     * @example "gemini-3.1-flash-image-preview"
+     * @default "google/gemini-3.1-flash-image-preview"
+     * @example "google/gemini-2.5-flash-image"
      */
     agentImageModel?: string;
     /**
@@ -714,6 +753,21 @@ export interface ExcalidrawProps {
     onGetTemplateVariant?: (templateId: string) => Promise<{
         canvasJson: string;
     }>;
+    /**
+     * Search brand image assets, ad creatives, or templates by keywords and
+     * return top 3 matches with base64 preview images. Used by the agent's
+     * `find_brand_asset` tool.
+     */
+    onFindBrandAssets?: (type: "image-asset" | "ad-creative" | "template", keywords: string[]) => Promise<{
+        results: Array<{
+            id: string;
+            name: string;
+            tags?: string[];
+            width?: number | null;
+            height?: number | null;
+            previewDataUrl: string;
+        }>;
+    }>;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -797,8 +851,10 @@ export type AppClassProperties = {
     insertEmbeddableElement: App["insertEmbeddableElement"];
     onMagicframeToolSelect: App["onMagicframeToolSelect"];
     onImageGeneratorSelect: App["onImageGeneratorSelect"];
+    onVideoGeneratorSelect: App["onVideoGeneratorSelect"];
     insertGeneratedImageIntoFrame: App["insertGeneratedImageIntoFrame"];
     insertGeneratedImageNearElement: App["insertGeneratedImageNearElement"];
+    insertGeneratedVideoIntoFrame: App["insertGeneratedVideoIntoFrame"];
     getName: App["getName"];
     dismissLinearEditor: App["dismissLinearEditor"];
     flowChartCreator: App["flowChartCreator"];
@@ -815,6 +871,12 @@ export type AppClassProperties = {
     onPointerDownEmitter: App["onPointerDownEmitter"];
     lastPointerMoveCoords: App["lastPointerMoveCoords"];
     bindModeHandler: App["bindModeHandler"];
+    refresh: App["refresh"];
+    refreshEditorInterface: App["refreshEditorInterface"];
+    lassoTrail: App["lassoTrail"];
+    toggleSidebar: App["toggleSidebar"];
+    insertVideos: App["insertVideos"];
+    onVideoToolbarButtonClick: App["onVideoToolbarButtonClick"];
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{

package/dist/types/excalidraw/utils/brandContextUtils.d.ts

@@ -0,0 +1,23 @@
+import type { BrandContext } from "../types";
+/**
+ * Converts a BrandContext object to a concise text block describing brand
+ * identity guidelines. Used as a system/prompt prefix for both the agent loop
+ * and direct image generation panels.
+ */
+export declare function buildBrandContextMessage(ctx: BrandContext): string;
+/**
+ * Augments a raw user prompt with strong brand asset instructions — identical to
+ * the approach used by execGenerateImage in the AI chat agent. Call this in
+ * ImageGeneratorPanel and ImageQuickEditPanel before invoking callOpenRouterImageAPI
+ * so that direct-generation panels produce the same brand-faithful output as the
+ * agent loop.
+ *
+ * Brand DNA text (colors, visual style, etc.) should be passed separately as
+ * `brandImages.brandContextText` in callOpenRouterImageAPI so it's prepended as a
+ * block before the prompt. This function only appends the per-asset mandatory
+ * instructions that reference the visual attachments by position.
+ */
+export declare function buildImageGenSafePrompt(prompt: string, brandContext: BrandContext, dimensions?: {
+    width: number;
+    height: number;
+}): string;

package/dist/types/excalidraw/utils/imageApi.d.ts

@@ -0,0 +1,19 @@
+export declare function callOpenRouterImageAPI(prompt: string, modelId: string, aspectRatio: string, imageSize: string | null, textOutput: boolean, imageGenUrl: string, referenceImageDataUrl?: string, signal?: AbortSignal, brandImages?: {
+    logo?: string;
+    fontPreview?: string;
+    /** Optional second font preview (brand body typeface) shown as a reference. */
+    fontPreviewBody?: string;
+    /**
+     * Fetchable URL of the real headline font file (.ttf/.otf). Only Sourceful
+     * Riverflow v2+ consumes this — sent via `image_config.font_inputs` so the
+     * model renders text in the actual brand typeface (not just a preview img).
+     */
+    fontUrl?: string;
+    /** Text to render with `fontUrl` for the font_inputs entry. */
+    fontText?: string;
+    /**
+     * Full brand identity context text (colors, typography, visual style, etc.)
+     * prepended to the prompt so the model applies brand guidelines to the image.
+     */
+    brandContextText?: string;
+}): Promise<string>;

package/dist/types/excalidraw/utils/videoApi.d.ts

@@ -0,0 +1,30 @@
+export interface VideoJobParams {
+    model: string;
+    prompt: string;
+    aspectRatio: string;
+    duration?: number;
+    resolution?: string;
+    firstFrameDataUrl?: string;
+    lastFrameDataUrl?: string;
+    audio?: boolean;
+    negativePrompt?: string;
+    inputReferences?: string[];
+    seed?: number;
+}
+export interface VideoJobResult {
+    videoPresignedUrl: string;
+}
+/**
+ * Submit a video generation job to the host proxy.
+ * Returns { jobId } immediately — the job runs async on OpenRouter.
+ */
+export declare function submitVideoJob(params: VideoJobParams, videoGenUrl: string): Promise<{
+    jobId: string;
+}>;
+/**
+ * Poll the host status endpoint until the job is done or failed.
+ * onProgress is called with values 0–1 as they arrive.
+ * Resolves with { videoPresignedUrl } on success.
+ * Rejects with an Error on failure or abort.
+ */
+export declare function pollVideoJob(jobId: string, videoGenStatusUrl: string, onProgress: (progress: number) => void, signal?: AbortSignal): Promise<VideoJobResult>;

package/dist/types/utils/src/shape.d.ts

@@ -1,5 +1,5 @@
 import { type GlobalPoint, type LocalPoint } from "@orangecatai/math";
-import type { ElementsMap, ExcalidrawBindableElement, ExcalidrawDiamondElement, ExcalidrawElement, ExcalidrawEllipseElement, ExcalidrawEmbeddableElement, ExcalidrawFrameLikeElement, ExcalidrawFreeDrawElement, ExcalidrawIframeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawRectangleElement, ExcalidrawSelectionElement, ExcalidrawTextElement } from "@orangecatai/element/types";
+import type { ElementsMap, ExcalidrawBindableElement, ExcalidrawDiamondElement, ExcalidrawElement, ExcalidrawEllipseElement, ExcalidrawEmbeddableElement, ExcalidrawFrameLikeElement, ExcalidrawFreeDrawElement, ExcalidrawIframeElement, ExcalidrawImageElement, ExcalidrawVideoElement, ExcalidrawLinearElement, ExcalidrawRectangleElement, ExcalidrawSelectionElement, ExcalidrawTextElement } from "@orangecatai/element/types";
 import type { Curve, LineSegment, Polygon, Radians } from "@orangecatai/math";
 import type { Drawable, Op } from "roughjs/bin/core";
 export type Polyline<Point extends GlobalPoint | LocalPoint> = LineSegment<Point>[];
@@ -29,7 +29,7 @@ export type GeometricShape<Point extends GlobalPoint | LocalPoint> = {
     type: "polycurve";
     data: Polycurve<Point>;
 };
-type RectangularElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawFrameLikeElement | ExcalidrawEmbeddableElement | ExcalidrawImageElement | ExcalidrawIframeElement | ExcalidrawTextElement | ExcalidrawSelectionElement;
+type RectangularElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawFrameLikeElement | ExcalidrawEmbeddableElement | ExcalidrawImageElement | ExcalidrawVideoElement | ExcalidrawIframeElement | ExcalidrawTextElement | ExcalidrawSelectionElement;
 export declare const getPolygonShape: <Point extends GlobalPoint | LocalPoint>(element: RectangularElement) => GeometricShape<Point>;
 export declare const getSelectionBoxShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawElement, elementsMap: ElementsMap, padding?: number) => GeometricShape<Point>;
 export declare const getEllipseShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawEllipseElement) => GeometricShape<Point>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangecatai/element",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "types": "./dist/types/element/src/index.d.ts",
   "main": "./dist/prod/index.js",
@@ -63,7 +63,7 @@
     "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
   },
   "dependencies": {
-    "@orangecatai/common": "0.0.3",
+    "@orangecatai/common": "0.0.4",
     "@orangecatai/math": "0.0.2"
   }
 }

package/dist/types/excalidraw/utils/geminiApiKey.d.ts

@@ -1 +0,0 @@
-export declare function resolveGeminiApiKey(propKey?: string): string;

package/dist/types/excalidraw/utils/leonardoApiKey.d.ts

@@ -1 +0,0 @@
-export declare function resolveLeonardoApiKey(propKey?: string): string;

package/dist/types/excalidraw/utils/openRouterApiKey.d.ts

@@ -1 +0,0 @@
-export declare function resolveOpenRouterApiKey(propKey?: string): string;

package/dist/types/excalidraw/utils/removeBgApiKey.d.ts

@@ -1 +0,0 @@
-export declare function resolveRemoveBgApiKey(propKey?: string): string;