@imgly/plugin-ai-generation-web 0.1.0-rc.0

package/dist/generation/provider.d.ts

@@ -0,0 +1,373 @@
+import { type OpenAPIV3 } from 'openapi-types';
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { type NotificationDuration, type BuilderRenderFunctionContext, type CreativeEngine, Scope } from '@cesdk/cesdk-js';
+import { GetPropertyInput, Property } from './openapi/types';
+import { Middleware } from './middleware/middleware';
+interface Provider<K extends OutputKind, I, O extends Output, C = O> {
+    /**
+     * Defines the kind of the generated asset. Maps to the kind
+     * CE.SDK
+     */
+    kind: K;
+    /**
+     * The unique identifier of the provider. Is used to generate other
+     * identifiers, like the panel ID or keys for translation.
+     */
+    id: string;
+    /**
+     * The human-readable name of the provider.
+     */
+    name?: string;
+    /**
+     * Initialize the provider when the plugin is loaded.
+     * Can be used to initialize libraries, and register additional UI components.
+     */
+    initialize: (options: {
+        engine: CreativeEngine;
+        /**
+         * If undefined, this indicates that the plugin was loaded
+         * just with the engine and probably without an UI.
+         */
+        cesdk?: CreativeEditorSDK;
+    }) => Promise<void>;
+    /**
+     * Defines what inputs are needed for the generation and how
+     * to create an UI for them.
+     */
+    input: {
+        /**
+         * Is used to generate panel content for the input.
+         */
+        panel?: PanelInput<K, I>;
+        quickActions?: QuickActionsInput<I, O>;
+    };
+    /**
+     * Defines the output of the provider, i.e. the asset gneration.
+     */
+    output: {
+        /**
+         * Can the generation of the output be aborted?
+         */
+        abortable?: boolean;
+        /**
+         * Defines if a generated asset should be stored in the history.
+         *
+         * - false: The generated asset is not stored in the history.
+         * - `@imgly/local`: The asset is stored in a local asset source. On reload, the generated assets are gone.
+         * - '@imgly/indexedDB': The asset is stored in the browser's indexed db. On reload, the generated assets are still available, but only in the same browser.
+         * - string: Any other string is used as the asset source ID. The user has to add the asset source during initialization. This can be used for instance to store generated assets in a outside database.
+         */
+        history?: false | '@imgly/local' | '@imgly/indexedDB' | string;
+        /**
+         * Configure if and what notification is shown after success and error.
+         */
+        notification?: {
+            /**
+             * Configure if and what notification is shown when the asset is generated.
+             */
+            success?: {
+                /**
+                 * If true, the notification is shown. If false, the notification is not shown.
+                 * Can be a function that returns a boolean.
+                 */
+                show?: boolean | ((context: {
+                    input: I;
+                    output: O;
+                }) => boolean);
+                /**
+                 * The message that is shown when the asset generation was successful. Can be a i18n key.
+                 * A function can be used to dynamically generate the message based on the input and output.
+                 */
+                message?: string | ((context: {
+                    input: I;
+                    output: O;
+                }) => string);
+                /**
+                 * The action that is shown when the asset generation was successful.
+                 */
+                action?: {
+                    label: string | ((context: {
+                        input: I;
+                        output: O;
+                    }) => string);
+                    onClick: (context: {
+                        input: I;
+                        output: O;
+                    }) => void;
+                };
+                /**
+                 * The duration the notification is shown.
+                 */
+                duration?: NotificationDuration;
+            };
+            /**
+             * Configure if and what notification is shown when generation failed
+             * If not set, a generic error message is shown.
+             */
+            error?: {
+                show?: boolean | ((context: {
+                    input?: I;
+                    error: unknown;
+                }) => boolean);
+                /**
+                 * The message that is shown when the asset generation failed. Can be a i18n key.
+                 * A function can be used to dynamically generate the message based on the input and output.
+                 */
+                message?: string | ((context: {
+                    input?: I;
+                    error: unknown;
+                }) => string);
+                /**
+                 * The action that is shown when the asset generation failed.
+                 */
+                action?: {
+                    label: string | ((context: {
+                        input?: I;
+                        error: unknown;
+                    }) => string);
+                    onClick: (context: {
+                        input?: I;
+                        error: unknown;
+                    }) => void;
+                };
+                /**
+                 * The duration the notification is shown.
+                 */
+                duration?: NotificationDuration;
+            };
+        };
+        /**
+         * Generate the asset given the input.
+         *
+         * @returns The generated asset
+         */
+        generate: (input: I, options: GenerationOptions) => Promise<GenerationResult<O, C>>;
+        /**
+         * Short informational text to display below the generation button.
+         */
+        generationHintText?: string;
+        /**
+         * Middlware functions that can be used to hook into the
+         * generation process.
+         */
+        middleware?: Middleware<I, O>[];
+    };
+}
+/**
+ * The result of the generation function.
+ *
+ * Is either a promise that is directly returning
+ * the result of the generation, or an async generator
+ * that streams the result in chunks (C) and finally
+ * returns the final result (O).
+ */
+export type GenerationResult<O extends Output, C = O> = O | AsyncGenerator<O, C>;
+/**
+ * The options for the generation function.
+ */
+export type GenerationOptions = {
+    abortSignal: AbortSignal;
+    engine: CreativeEngine;
+    cesdk?: CreativeEditorSDK;
+};
+export type RenderCustomProperty = {
+    [key: string]: (context: BuilderRenderFunctionContext<any>, property: Property) => GetPropertyInput;
+};
+export type PanelInput<K extends OutputKind, I> = PanelInputCustom<K, I> | PanelInputSchema<K, I>;
+interface PanelInputBase {
+    /**
+     * Determines the flow of the asset generation.
+     *
+     * - `placeholder`: When `Generate` is clicked, the asset generation is triggered and a block is created as a placeholder with a loading state. Once the asset is generated, the block is updated with the asset and we add a history entry.
+     * - `generation-only`: When `Generate` is clicked, only the asset generation is triggered. No block is created.
+     *
+     *   @default 'generation-only'
+     */
+    userFlow?: 'placeholder' | 'generation-only';
+    /**
+     * If true, the history library is appended to the panel.
+     *
+     * @default true
+     */
+    includeHistoryLibrary?: boolean;
+}
+export interface PanelInputSchema<K extends OutputKind, I> extends PanelInputBase {
+    type: 'schema';
+    /**
+     * The OpenAPI document/schema for a service.
+     */
+    document: OpenAPIV3.Document;
+    /**
+     * The reference to the input in the OpenAPI document.
+     * This is used to determine the input components for the generation panel.
+     *
+     * @example
+     * `#/components/schemas/GenerationInput`
+     */
+    inputReference: string;
+    /**
+     * The keyword that determines the order of properties. the
+     * referenced extension keyword should contain an array of strings
+     * representing the properties.
+     */
+    orderExtensionKeyword?: string | string[];
+    /**
+     * Returns the necessary input for the creation of a block.
+     *
+     */
+    getBlockInput: GetBlockInput<K, I>;
+    /**
+     * Allows to customize the components for some properties.
+     */
+    renderCustomProperty?: RenderCustomProperty;
+}
+export interface PanelInputCustom<K extends OutputKind, I> extends PanelInputBase {
+    type: 'custom';
+    /**
+     * Is called to render custom UI components for the generation panel.
+     *
+     * @returns A function that returns the current input state and the context when called.
+     *
+     * @example
+     *
+       ```ts
+       render: ({ builder, state }, options) => {
+         const promptState = state('prompt', '');
+         builder.TextArea('prompt', {
+           label: 'Prompt',
+           ...promptState
+         });
+  
+         return {
+           getInput: () => ({ prompt: promptState.value }),
+           getBlockInput: () => ({ image: { width: 1024, height: 1024 } })
+         };
+       }
+       ```
+     */
+    render: (context: BuilderRenderFunctionContext<any>, options: {
+        cesdk: CreativeEditorSDK;
+        isGenerating: boolean;
+    }) => {
+        getInput: GetInput<I>;
+        getBlockInput: GetBlockInput<K, I>;
+    };
+}
+/**
+ * Returns the current input state when called.
+ * This input is used for the AI generation
+ */
+export type GetInput<I> = () => {
+    input: I;
+};
+/**
+ * Returns the input that is needed to create a block
+ * for a given output kind.
+ */
+export type GetBlockInput<K extends OutputKind, I> = (input: I) => Promise<GetBlockInputResult<K>>;
+export type GetBlockInputResult<K extends OutputKind> = Record<K, InputByKind[K]>;
+/**
+ * All possible output kinds.
+ */
+export type OutputKind = 'image' | 'video' | 'audio' | 'text';
+/**
+ * Mandatory kind-specific input needed for the generation.
+ */
+export type InputByKind = {
+    image: {
+        label?: string;
+        width: number;
+        height: number;
+    };
+    video: {
+        label?: string;
+        width: number;
+        height: number;
+        duration: number;
+    };
+    audio: {
+        label?: string;
+        thumbnailUrl?: string;
+        duration?: number;
+    };
+    text: {
+        label?: string;
+        length: number;
+    };
+};
+/**
+ * The generated output of the provider.
+ */
+export type Output = ImageOutput | VideoOutput | AudioOutput | TextOutput;
+type OutputBase<K extends OutputKind> = {
+    kind: K;
+};
+export interface ImageOutput extends OutputBase<'image'> {
+    kind: 'image';
+    url: string;
+}
+export interface VideoOutput extends OutputBase<'video'> {
+    kind: 'video';
+    url: string;
+}
+export interface AudioOutput extends OutputBase<'audio'> {
+    kind: 'audio';
+    url: string;
+    duration: number;
+    thumbnailUrl?: string;
+}
+export interface TextOutput extends OutputBase<'text'> {
+    kind: 'text';
+    text: string;
+}
+export type QuickActionContext<I, O extends Output> = {
+    blockIds: number[];
+    closeMenu: () => void;
+    toggleExpand: () => void;
+    /**
+     * Trigger generation with the given input.
+     *
+     * @param input The input for the generation.
+     * @param options The options for the generation.
+     * @param options.blockIds Use these blocks ids for the generation instead of the currently selected blocks.
+     */
+    generate: (input: I, options?: {
+        blockIds?: number[];
+    }) => Promise<O>;
+    /**
+     * Can be called to show a notification after the generation as it is
+     * configured for the provider.
+     */
+    handleGenerationError: (error: unknown) => void;
+};
+export type QuickActionsInput<I, O extends Output> = {
+    actions: QuickAction<I, O>[];
+};
+export type QuickAction<I, O extends Output> = {
+    id: string;
+    version: '1';
+    /**
+     * Defines if the quick action is enabled or not by using the
+     * feature api.
+     */
+    enable: boolean | ((contxt: {
+        engine: CreativeEngine;
+    }) => boolean);
+    /**
+     * Define the necessary scopes for this quick action.
+     */
+    scopes?: Scope[];
+    /**
+     * If set to `true`, after the generation, the canvas menu
+     * will show a confirmation UI to confirm the generation.
+     */
+    confirmation?: boolean;
+    /**
+     * If set to `true`, the selection is locked during the confirmation.
+     * The user cannot change the selection until the confirmation is done.
+     */
+    lockDuringConfirmation?: boolean;
+    render: (context: BuilderRenderFunctionContext<any>, quickActionContext: QuickActionContext<I, O>) => void;
+    renderExpanded?: (context: BuilderRenderFunctionContext<any>, quickActionContext: QuickActionContext<I, O>) => void;
+};
+export default Provider;

package/dist/generation/quickAction/consumeGeneratedResult.d.ts

@@ -0,0 +1,23 @@
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { GenerationResult, type Output, type OutputKind } from '../provider';
+import { ApplyCallbacks } from './types';
+type ConsumeGeneratedResultOptions = {
+    kind: OutputKind;
+    blockIds: number[];
+    cesdk: CreativeEditorSDK;
+    abortSignal: AbortSignal;
+};
+type ReturnValue<O extends Output> = {
+    consumedGenerationResult: O;
+    applyCallbacks: ApplyCallbacks;
+};
+/**
+ * This method is used in the quick action menu to handle the result of the generation
+ * and providing methods for the comparision of the result.
+ *
+ * Different output kinds require different handling. E.g. the text generation
+ * is streamed to the text block, while the image generation is applied to the fill
+ * block with a source set and the same crop applied.
+ */
+declare function consumeGeneratedResult<O extends Output>(result: GenerationResult<O>, options: ConsumeGeneratedResultOptions): Promise<ReturnValue<O>>;
+export default consumeGeneratedResult;

package/dist/generation/quickAction/getQuickActionMenu.d.ts

@@ -0,0 +1,10 @@
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import { QuickActionMenu } from './types';
+/**
+ * Returns an object representing the quick action menu. Can be called and
+ * retrieved multiple times.
+ *
+ * It's backed up by the global state.
+ */
+declare function getQuickActionMenu(cesdk: CreativeEditorSDK, id: string): QuickActionMenu;
+export default getQuickActionMenu;

package/dist/generation/quickAction/registerQuickActionMenuComponent.d.ts

@@ -0,0 +1,12 @@
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import { QuickActionMenu } from './types';
+import Provider, { Output, OutputKind } from '../provider';
+import { InitProviderConfiguration } from '../types';
+declare function registerQuickActionMenuComponent<K extends OutputKind, I, O extends Output>(options: {
+    cesdk: CreativeEditorSDK;
+    quickActionMenu: QuickActionMenu;
+    provider: Provider<K, I, O>;
+}, config: InitProviderConfiguration): {
+    canvasMenuComponentId: string;
+};
+export default registerQuickActionMenuComponent;

package/dist/generation/quickAction/types.d.ts

@@ -0,0 +1,25 @@
+import { Output, type QuickAction } from '../provider';
+export type QuickActionId = 'ly.img.separator' | (string & {});
+export type ApplyCallbacks = {
+    onBefore?: () => void;
+    onAfter?: () => void;
+    onCancel?: () => void;
+    onApply: () => void;
+};
+export interface QuickActionMenu {
+    id: string;
+    registerQuickAction: <I, O extends Output>(quickAction: QuickAction<I, O>) => void;
+    setQuickActionMenuOrder: (quickActionIds: QuickActionId[]) => void;
+    getQuickActionMenuOrder: () => string[];
+    getQuickAction: <I, O extends Output>(magicId: QuickActionId) => QuickAction<I, O> | undefined;
+}
+export type InferenceStatus = 'processing' | 'confirmation';
+export type InferenceProcessingMetadata = {
+    status: 'processing';
+    quickActionId: string;
+};
+export type InferenceConfirmationMetadata = {
+    status: 'confirmation';
+    quickActionId: string;
+};
+export type InferenceMetadata = InferenceProcessingMetadata | InferenceConfirmationMetadata;

package/dist/generation/quickAction/utils.d.ts

@@ -0,0 +1,13 @@
+import { Output, QuickAction } from '../provider';
+export declare const INFERENCE_AI_EDIT_MODE = "ly.img.ai.inference.editMode";
+export declare const INFERENCE_AI_METADATA_KEY = "ly.img.ai.inference.metadata";
+export declare const INFERENCE_CONFIRMATION_COMPONENT_ID = "ly.img.ai.inference.confirmation.canvasMenu";
+export declare function getFeatureIdForQuickAction(options: {
+    quickActionId: string;
+    quickActionMenuId: string;
+}): string;
+/**
+ * Removes all two following `ly.img.separator` entries from the quick
+ * actions array or if it is first or last in the array.
+ */
+export declare function removeDuplicatedSeparators<I, O extends Output>(quickActions: (QuickAction<I, O> | 'ly.img.separator')[]): (QuickAction<I, O> | 'ly.img.separator')[];

package/dist/generation/registerPanelInputCustom.d.ts

@@ -0,0 +1,6 @@
+import { BuilderRenderFunction } from '@cesdk/cesdk-js';
+import type Provider from './provider';
+import { OutputKind, PanelInputCustom, type Output } from './provider';
+import { InitProviderConfiguration, UIOptions } from './types';
+declare function registerPanelInputCustom<K extends OutputKind, I, O extends Output>(provider: Provider<K, I, O>, panelInput: PanelInputCustom<K, I>, options: UIOptions, config: InitProviderConfiguration): Promise<BuilderRenderFunction<any>>;
+export default registerPanelInputCustom;

package/dist/generation/registerPanelInputSchema.d.ts

@@ -0,0 +1,9 @@
+import { type OutputKind, type Output, type PanelInputSchema } from './provider';
+import type Provider from './provider';
+import { InitProviderConfiguration, UIOptions } from './types';
+import { BuilderRenderFunction } from '@cesdk/cesdk-js';
+/**
+ * Registers a schema-based panel input for a provider
+ */
+declare function registerPanelInputSchema<K extends OutputKind, I, O extends Output>(provider: Provider<K, I, O>, panelInput: PanelInputSchema<K, I>, options: UIOptions, config: InitProviderConfiguration): Promise<BuilderRenderFunction<any>>;
+export default registerPanelInputSchema;

package/dist/generation/renderGenerationComponents.d.ts

@@ -0,0 +1,15 @@
+import { type BuilderRenderFunctionContext } from '@cesdk/cesdk-js';
+import type Provider from './provider';
+import { type GetInput, type OutputKind, type Output, type GetBlockInput } from './provider';
+import { InitProviderConfiguration, UIOptions } from './types';
+export declare function isGeneratingStateKey(providerId: string): string;
+export declare function abortGenerationStateKey(providerId: string): string;
+/**
+ * Renders the generation UI components and sets up event handlers
+ */
+declare function renderGenerationComponents<K extends OutputKind, I, O extends Output>(context: BuilderRenderFunctionContext<any>, provider: Provider<K, I, O>, getInput: GetInput<I>, getBlockInput: GetBlockInput<K, I>, options: UIOptions & {
+    createPlaceholderBlock?: boolean;
+    includeHistoryLibrary?: boolean;
+    requiredInputs?: string[];
+}, config: InitProviderConfiguration): void;
+export default renderGenerationComponents;

package/dist/generation/types.d.ts

@@ -0,0 +1,56 @@
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { type CreativeEngine } from '@cesdk/cesdk-js';
+import type Provider from './provider';
+/**
+ * Configuration options for provider initialization
+ */
+export type InitProviderConfiguration = {
+    /**
+     * Whether to enable debug mode
+     */
+    debug?: boolean;
+    /**
+     * If true the generation process wll be replaced with a dummy generation.
+     * Useful for testing the UI without actually generating images.
+     */
+    dryRun?: boolean;
+    /**
+     * Is called after an error occurred during the generation process.
+     * Can be used to show an error message to the user, e.g. with the
+     * Dialog or Notification API
+     *
+     * The default implementation logs the error to the console and
+     * shows a notification to the user.
+     */
+    onError?: (error: unknown) => void;
+    /**
+     * Is called when the generation process is started. Can be used to
+     * extend the generation process with additional steps.
+     *
+     * @param generate A function that starts the actual generation process.
+     */
+    middleware?: GenerationMiddleware;
+};
+export type GenerationMiddleware = (generate: () => Promise<void>, context: {
+    provider: Provider<any, any, any>;
+    abort: () => void;
+}) => Promise<void>;
+/**
+ * Options for UI interactions
+ */
+export type UIOptions = {
+    cesdk: CreativeEditorSDK;
+    engine: CreativeEngine;
+    historyAssetSourceId?: string;
+    historyAssetLibraryEntryId?: string;
+    i18n?: {
+        prompt?: string;
+    };
+};
+/**
+ * Basic context for provider initialization
+ */
+export type Options = {
+    cesdk?: CreativeEditorSDK;
+    engine: CreativeEngine;
+};

package/dist/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const PLUGIN_ICON_SET_ID = "@imgly/plugin-ai-generation";
+export declare const ICON_SPRITE = "\n<svg>\n  <symbol\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    id=\"@imgly/Sparkle\"\n  >\n  <path d=\"M5.35545 2.06745C5.24149 1.72556 4.7579 1.72556 4.64394 2.06745L4.05898 3.82232C4.02166 3.93429 3.9338 4.02215 3.82184 4.05948L2.06694 4.64459C1.72506 4.75858 1.72509 5.24217 2.06699 5.3561L3.82179 5.9409C3.93378 5.97822 4.02166 6.06609 4.05899 6.17808L4.64394 7.93291C4.7579 8.2748 5.24149 8.2748 5.35545 7.93291L5.9404 6.17806C5.97773 6.06608 6.06559 5.97821 6.17757 5.94089L7.93242 5.35594C8.27431 5.24198 8.27431 4.75839 7.93242 4.64442L6.17757 4.05947C6.06559 4.02215 5.97773 3.93428 5.9404 3.8223L5.35545 2.06745Z\" fill=\"currentColor\"/>\n<path d=\"M17.9632 3.23614C17.8026 2.80788 17.1968 2.80788 17.0362 3.23614L16.0787 5.78951C16.0285 5.92337 15.9229 6.02899 15.789 6.07918L13.2356 7.0367C12.8074 7.19729 12.8074 7.80307 13.2356 7.96366L15.789 8.92118C15.9229 8.97138 16.0285 9.077 16.0787 9.21085L17.0362 11.7642C17.1968 12.1925 17.8026 12.1925 17.9632 11.7642L18.9207 9.21086C18.9709 9.077 19.0765 8.97138 19.2104 8.92118L21.7637 7.96366C22.192 7.80307 22.192 7.1973 21.7637 7.0367L19.2104 6.07918C19.0765 6.02899 18.9709 5.92337 18.9207 5.78951L17.9632 3.23614Z\" fill=\"currentColor\"/>\n<path d=\"M9.30058 7.82012C9.54712 7.1791 10.454 7.1791 10.7006 7.82012L12.3809 12.189C12.4571 12.3871 12.6136 12.5436 12.8117 12.6198L17.1806 14.3001C17.8216 14.5466 17.8216 15.4536 17.1806 15.7001L12.8117 17.3804C12.6136 17.4566 12.4571 17.6131 12.3809 17.8112L10.7006 22.1801C10.454 22.8211 9.54712 22.8211 9.30058 22.1801L7.62024 17.8112C7.54406 17.6131 7.38754 17.4566 7.18947 17.3804L2.82061 15.7001C2.17959 15.4536 2.17959 14.5466 2.82061 14.3001L7.18947 12.6198C7.38754 12.5436 7.54406 12.3871 7.62024 12.189L9.30058 7.82012Z\" fill=\"currentColor\"/>\n\n  </symbol>\n\n  <symbol\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    id=\"@imgly/plugin-ai-generation/image\"\n  >\n  <path d=\"M3 16.5V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3L17.999 5C18.5513 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V16.5H3Z\" fill=\"currentColor\"/>\n<path d=\"M13.0982 0.884877C12.9734 0.568323 12.5254 0.568322 12.4005 0.884876L11.7485 2.53819C11.7104 2.63483 11.6339 2.71134 11.5372 2.74945L9.8839 3.40151C9.56735 3.52636 9.56734 3.97436 9.8839 4.09921L11.5372 4.75126C11.6339 4.78938 11.7104 4.86588 11.7485 4.96253L12.4005 6.61584C12.5254 6.93239 12.9734 6.9324 13.0982 6.61584L13.7503 4.96253C13.7884 4.86588 13.8649 4.78938 13.9616 4.75126L15.6149 4.09921C15.9314 3.97436 15.9314 3.52636 15.6149 3.40151L13.9616 2.74945C13.8649 2.71134 13.7884 2.63483 13.7503 2.53819L13.0982 0.884877Z\" fill=\"currentColor\"/>\n<path d=\"M6.40053 5.38488C6.52538 5.06832 6.97338 5.06832 7.09823 5.38488L8.17455 8.11392C8.21267 8.21057 8.28917 8.28707 8.38582 8.32519L11.1149 9.40151C11.4314 9.52636 11.4314 9.97436 11.1149 10.0992L8.38582 11.1755C8.28917 11.2136 8.21267 11.2901 8.17455 11.3868L7.09823 14.1158C6.97338 14.4324 6.52538 14.4324 6.40053 14.1158L5.32421 11.3868C5.2861 11.2901 5.20959 11.2136 5.11295 11.1755L2.3839 10.0992C2.06735 9.97436 2.06735 9.52636 2.3839 9.40151L5.11295 8.32519C5.20959 8.28707 5.2861 8.21057 5.32421 8.11392L6.40053 5.38488Z\" fill=\"currentColor\"/>\n<path d=\"M18.9994 16.5008V18.0004C18.9994 18.5526 18.5517 19.0004 17.9994 19.0004H9.33302L14.3753 11.4369C14.6722 10.9916 15.3266 10.9916 15.6234 11.4369L18.9994 16.5008Z\" fill=\"currentColor\"/>\n\n  </symbol>\n  <symbol\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    id=\"@imgly/plugin-ai-generation/video\"\n  >\n<path d=\"M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V16.5H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V6C5 5.44772 5.44772 5 6 5V3Z\" fill=\"currentColor\"/>\n<path d=\"M10.9025 0.8839C11.0273 0.567345 11.4753 0.567346 11.6002 0.883901L12.2522 2.53721C12.2904 2.63386 12.3669 2.71036 12.4635 2.74848L14.1168 3.40053C14.4334 3.52538 14.4334 3.97338 14.1168 4.09823L12.4635 4.75029C12.3669 4.7884 12.2904 4.86491 12.2522 4.96155L11.6002 6.61486C11.4753 6.93142 11.0273 6.93142 10.9025 6.61486L10.2504 4.96155C10.2123 4.86491 10.1358 4.7884 10.0392 4.75029L8.38585 4.09823C8.0693 3.97338 8.0693 3.52538 8.38585 3.40053L10.0392 2.74848C10.1358 2.71036 10.2123 2.63386 10.2504 2.53721L10.9025 0.8839Z\" fill=\"currentColor\"/>\n<path d=\"M18.9019 3.3845C19.0267 3.06795 19.4747 3.06795 19.5996 3.3845L20.6759 6.11355C20.714 6.2102 20.7905 6.2867 20.8872 6.32482L23.6162 7.40114C23.9328 7.52598 23.9328 7.97399 23.6162 8.09883L20.8872 9.17515C20.7905 9.21327 20.714 9.28977 20.6759 9.38642L19.5996 12.1155C19.4747 12.432 19.0267 12.432 18.9019 12.1155L17.8255 9.38642C17.7874 9.28977 17.7109 9.21327 17.6143 9.17515L14.8852 8.09883C14.5687 7.97399 14.5687 7.52598 14.8852 7.40114L17.6143 6.32482C17.7109 6.2867 17.7874 6.2102 17.8255 6.11355L18.9019 3.3845Z\" fill=\"currentColor\"/>\n<path d=\"M14.9994 13.2862C15.5089 12.8859 15.5089 12.1141 14.9995 11.7137L10.618 8.27047C9.96188 7.75485 9.00011 8.22225 9.00011 9.05673L9.00011 15.9429C9.00011 16.7773 9.96185 17.2448 10.618 16.7292L14.9994 13.2862Z\" fill=\"currentColor\"/>\n  </symbol>\n  <symbol\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    id=\"@imgly/plugin-ai-generation/audio\"\n  >\n  <path d=\"M6 3.80273C4.2066 4.84016 3 6.77919 3 9.00004V12.8153C3 15.931 5.39501 18.4873 8.44444 18.7436V20.9645C8.44444 22.2198 9.89427 22.9198 10.8773 22.1392L15.1265 18.7647H15.5C17.8285 18.7647 19.8472 17.4384 20.8417 15.5H18.4187C17.6889 16.2784 16.6512 16.7647 15.5 16.7647H14.9522C14.6134 16.7647 14.2846 16.8794 14.0193 17.0901L10.4444 19.929V18.2597C10.4444 17.4341 9.77513 16.7647 8.9495 16.7647C7.80494 16.7647 6.77409 16.2779 6.05276 15.5H6V15.4419C5.37798 14.7439 5 13.8237 5 12.8153V9.00004C5 7.98559 5.37764 7.05935 6 6.35422V3.80273Z\" fill=\"currentColor\"/>\n<path d=\"M11.6002 1.8839C11.4753 1.56735 11.0273 1.56735 10.9025 1.8839L10.2504 3.53721C10.2123 3.63386 10.1358 3.71036 10.0392 3.74848L8.38585 4.40053C8.0693 4.52538 8.0693 4.97338 8.38585 5.09823L10.0392 5.75029C10.1358 5.7884 10.2123 5.86491 10.2504 5.96155L10.9025 7.61486C11.0273 7.93142 11.4753 7.93142 11.6002 7.61486L12.2522 5.96155C12.2904 5.86491 12.3669 5.7884 12.4635 5.75029L14.1168 5.09823C14.4334 4.97338 14.4334 4.52538 14.1168 4.40053L12.4635 3.74848C12.3669 3.71036 12.2904 3.63386 12.2522 3.53721L11.6002 1.8839Z\" fill=\"currentColor\"/>\n<path d=\"M19.5996 4.3845C19.4747 4.06795 19.0267 4.06795 18.9019 4.3845L17.8255 7.11355C17.7874 7.2102 17.7109 7.2867 17.6143 7.32482L14.8852 8.40114C14.5687 8.52598 14.5687 8.97399 14.8852 9.09883L17.6143 10.1752C17.7109 10.2133 17.7874 10.2898 17.8255 10.3864L18.9019 13.1155C19.0267 13.432 19.4747 13.432 19.5996 13.1155L20.6759 10.3864C20.714 10.2898 20.7905 10.2133 20.8872 10.1752L23.6162 9.09883C23.9328 8.97399 23.9328 8.52598 23.6162 8.40114L20.8872 7.32482C20.7905 7.2867 20.714 7.2102 20.6759 7.11355L19.5996 4.3845Z\" fill=\"currentColor\"/>\n  </symbol>\n  <symbol\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    id=\"@imgly/MixingPlate\"\n  >\n  <path d=\"M9.75 9C10.5784 9 11.25 8.32843 11.25 7.5C11.25 6.67157 10.5784 6 9.75 6C8.92157 6 8.25 6.67157 8.25 7.5C8.25 8.32843 8.92157 9 9.75 9Z\" fill=\"currentColor\"/>\n<path d=\"M7 13C7.82843 13 8.5 12.3284 8.5 11.5C8.5 10.6716 7.82843 10 7 10C6.17157 10 5.5 10.6716 5.5 11.5C5.5 12.3284 6.17157 13 7 13Z\" fill=\"currentColor\"/>\n<path d=\"M15.75 7.5C15.75 8.32843 15.0784 9 14.25 9C13.4216 9 12.75 8.32843 12.75 7.5C12.75 6.67157 13.4216 6 14.25 6C15.0784 6 15.75 6.67157 15.75 7.5Z\" fill=\"currentColor\"/>\n<path d=\"M17 13C17.8284 13 18.5 12.3284 18.5 11.5C18.5 10.6716 17.8284 10 17 10C16.1716 10 15.5 10.6716 15.5 11.5C15.5 12.3284 16.1716 13 17 13Z\" fill=\"currentColor\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.26309 2.77709C10.6681 1.77921 13.4829 1.7322 15.9209 2.64297C18.1572 3.47923 20.0876 5.09285 21.1766 7.28598C22.3395 9.62772 22.4889 13.1077 20.3864 15.2982C19.2693 16.4621 17.7657 16.9982 16.0026 16.9997C15.7897 16.9997 15.5555 16.9864 15.3497 16.9745C15.309 16.9722 15.2694 16.9699 15.2313 16.9679C14.9817 16.9542 14.761 16.9455 14.5569 16.9539C14.124 16.9718 13.9598 17.0612 13.89 17.1324C13.718 17.3081 13.6946 17.6672 13.8854 17.8895C14.2899 18.3608 14.5016 18.9277 14.5016 19.5497C14.5016 20.2206 14.3086 20.9011 13.7542 21.3896C13.2471 21.837 12.6082 21.9997 11.9635 21.9997C10.6049 21.9997 9.31155 21.7367 8.0934 21.2067C6.89058 20.6831 5.84501 19.9687 4.94363 19.0666C4.04281 18.1651 3.31836 17.107 2.79369 15.8978C1.72761 13.4409 1.72662 10.5261 2.81247 8.07034C3.88024 5.65548 5.84206 3.78161 8.26309 2.77709ZM15.2207 4.51639C13.2556 3.78239 10.9651 3.82132 9.02956 4.62439C7.06888 5.43791 5.49559 6.94785 4.64163 8.87914C3.78373 10.8194 3.78253 13.1522 4.62841 15.1017C5.05312 16.0805 5.63511 16.9291 6.35838 17.6529C7.08102 18.3761 7.91671 18.9484 8.89123 19.3728C9.8492 19.7895 10.87 19.9997 11.9635 19.9997C12.2815 19.9997 12.394 19.9225 12.431 19.8899L12.4319 19.8891C12.4367 19.8849 12.4487 19.8743 12.4631 19.8359C12.4799 19.7911 12.5016 19.7024 12.5016 19.5497C12.5016 19.4091 12.4633 19.3034 12.3677 19.192C11.5353 18.222 11.5272 16.6868 12.4611 15.7331C13.0741 15.1071 13.8844 14.98 14.4745 14.9556C14.7819 14.943 15.085 14.9568 15.3409 14.9709C15.3906 14.9736 15.4379 14.9763 15.4832 14.9788C15.6876 14.9904 15.8508 14.9997 16.0009 14.9997C17.3405 14.9986 18.2792 14.6054 18.9435 13.9133C20.2633 12.5382 20.3186 10.055 19.3853 8.1755C18.5436 6.48051 17.0293 5.19281 15.2207 4.51639Z\" fill=\"currentColor\"/>\n\n  </symbol>\n</svg>\n";
+export default ICON_SPRITE;

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import renderImageUrlProperty from './common/renderImageUrlProperty';
+declare const CommonProperties: {
+    ImageUrl: typeof renderImageUrlProperty;
+};
+export { CommonProperties };
+export { type default as Provider, type ImageOutput, type VideoOutput, type TextOutput, type AudioOutput, type Output, type OutputKind, type PanelInputSchema, type RenderCustomProperty, type GetBlockInput, type GetBlockInputResult, type GetInput, type QuickAction, type QuickActionsInput } from './generation/provider';
+export { type GetPropertyInput, type Property } from './generation/openapi/types';
+export { default as initProvider } from './generation/initProvider';
+export { type GenerationMiddleware } from './generation/types';
+export { composeMiddlewares, type Middleware } from './generation/middleware/middleware';
+export { default as loggingMiddleware } from './generation/middleware/loggingMiddleware';
+export { default as rateLimitMiddleware, type RateLimitOptions } from './generation/middleware/rateLimitMiddleware';
+export { getPanelId, getDurationForVideo, getThumbnailForVideo, getLabelFromId } from './utils';
+export { default as registerDockComponent } from './registerDockComponent';
+export { default as getQuickActionMenu } from './generation/quickAction/getQuickActionMenu';
+export { default as registerQuickActionMenuComponent } from './generation/quickAction/registerQuickActionMenuComponent';
+export { isGeneratingStateKey, abortGenerationStateKey } from './generation/renderGenerationComponents';