@codingfactory/mediables-vue 2.12.0 → 2.15.0

package/dist/types/editor.d.ts

@@ -43,36 +43,45 @@ export interface VariantSavePayload {
 }
 /**
  * Event payload when saving an edited image.
- * `state` is the canonical serializable state (v3.0.0+).
- * `metadata` is kept for backward compatibility with existing consumers.
  */
 export interface SaveEventPayload {
-    imageData: string;
+    blob: Blob;
+    mimeType: string;
     dimensions: {
         width: number;
         height: number;
     };
     state: ImageEditorSessionState;
-    /** @deprecated Use `state` instead. Kept for backward compatibility. */
-    metadata?: {
-        hasCrop: boolean;
-        cropRect: CropRect | null;
-        filters: string[];
-        filterValues: Record<string, Record<string, any>>;
-        aspectRatio: string;
-        dimensions: {
-            width: number;
-            height: number;
-        };
-    };
+    document?: ImageEditorDocument | null;
+    documentId?: string | null;
+    documentRevisionId?: string | null;
+    documentRevisionNumber?: number | null;
+}
+export interface BackgroundRemovalConfig {
+    enabled?: boolean;
+    endpoint?: string;
+    optionsEndpoint?: string;
+    savedEndpoint?: string;
+    fallbackEndpoint?: string | null;
+    defaultTier?: 'fast' | 'balanced' | 'best';
+}
+export interface BackgroundReplacementConfig {
+    assetEndpoint?: string | null;
+    materializeEndpoint?: string | null;
+    targetMediaUuid?: string | null;
+    mediaChoices?: Array<{
+        id?: string;
+        label?: string;
+        source: ImageEditorLayerSource;
+        fit?: 'cover' | 'contain' | 'stretch' | 'tile';
+    }>;
 }
 /**
  * Request body for editor save endpoint
  */
 export interface EditorSaveRequest {
-    image_data: string;
-    filters?: string[];
-    crop_data?: CropRect | null;
+    image_file: Blob | File;
+    editor_state: ImageEditorSessionState;
     name?: string;
     save_as_new?: boolean;
     as_variant?: boolean;
@@ -207,25 +216,169 @@ export interface ImageEditorSessionState {
     transform?: ImageEditorTransformState;
     filters: ImageEditorFilterState[];
 }
-/**
- * Payload emitted when saving an edited image (v3.0.0+).
- * Uses Blob instead of base64 for better memory efficiency.
- */
-export interface ImageEditorSavePayload {
-    blob: Blob;
-    mimeType: string;
-    dimensions: {
+export type ImageEditorLayerRole = 'background' | 'subject' | 'overlay' | 'text';
+export type ImageEditorLayerType = 'background' | 'image' | 'text';
+export type ImageEditorBlendMode = 'normal' | 'multiply' | 'screen' | 'overlay';
+export interface ImageEditorLayerTransform {
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+}
+export type ImageEditorLayerSource = {
+    kind: 'media';
+    mediaUuid: string;
+    originalWidth: number;
+    originalHeight: number;
+    sourceHash: string;
+    url?: string;
+    previewUrl?: string;
+    sourceUrl?: string;
+} | {
+    kind: 'edit-asset';
+    assetId: string;
+    originalWidth: number;
+    originalHeight: number;
+    sourceHash: string;
+    url?: string;
+    previewUrl?: string;
+    sourceUrl?: string;
+} | {
+    kind: 'runtime';
+    runtimeRef: string;
+    originalWidth: number;
+    originalHeight: number;
+    sourceHash: string | null;
+    url?: string;
+    previewUrl?: string;
+    sourceUrl?: string;
+} | {
+    kind: 'color';
+    color: string;
+};
+export type ImageEditorBackgroundFill = {
+    kind: 'transparent';
+} | {
+    kind: 'color';
+    value: string;
+    fit?: 'cover' | 'contain' | 'stretch' | 'tile';
+} | {
+    kind: 'gradient';
+    gradientType: 'linear' | 'radial';
+    angle: number;
+    stops: Array<{
+        offset: number;
+        color: string;
+    }>;
+    fit: 'cover' | 'contain' | 'stretch' | 'tile';
+} | {
+    kind: 'media';
+    source: ImageEditorLayerSource;
+    fit: 'cover' | 'contain' | 'stretch' | 'tile';
+};
+export interface ImageEditorTextStyle {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number;
+    fontStyle: 'normal' | 'italic';
+    fill: string;
+    align: 'left' | 'center' | 'right';
+    lineHeight: number;
+    letterSpacing: number;
+}
+export interface ImageEditorTextEffects {
+    stroke: {
+        enabled: boolean;
+        color: string;
+        width: number;
+    };
+    shadow: {
+        enabled: boolean;
+        color: string;
+        alpha: number;
+        blur: number;
+        distance: number;
+        angle: number;
+    };
+    glow: {
+        enabled: boolean;
+        color: string;
+        alpha: number;
+        blur: number;
+    };
+    backdrop: {
+        enabled: boolean;
+        color: string;
+        opacity: number;
+        padding: number;
+        radius: number;
+        blur: number;
+    };
+}
+export interface ImageEditorTextBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ImageEditorTextPayload {
+    content: string;
+    box: ImageEditorTextBox;
+    style: ImageEditorTextStyle;
+    effects: ImageEditorTextEffects;
+}
+export interface ImageEditorLayer {
+    id: string;
+    type: ImageEditorLayerType;
+    role: ImageEditorLayerRole;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    opacity: number;
+    blendMode: ImageEditorBlendMode;
+    transform: ImageEditorLayerTransform;
+    effects: unknown[];
+    metadata: Record<string, unknown>;
+    source?: ImageEditorLayerSource;
+    fill?: ImageEditorBackgroundFill;
+    text?: ImageEditorTextPayload;
+    crop: CropRect | null;
+    filters: ImageEditorFilterState[];
+}
+export interface ImageEditorDocument {
+    version: 2;
+    id: string;
+    sourceMediaUuid: string | null;
+    canvas: {
         width: number;
         height: number;
+        backgroundPreviewColor: string | null;
     };
-    state: ImageEditorSessionState;
+    revision: number;
+    layers: ImageEditorLayer[];
+    activeLayerId: string | null;
+    export: {
+        mimeType: 'image/png' | 'image/jpeg' | 'image/webp';
+        quality: number | null;
+        preserveTransparency: boolean;
+        matteColor: string | null;
+        trimTransparentBounds: boolean;
+    };
+    createdAt?: string;
+    updatedAt?: string;
 }
+export type ImageEditorSavePayload = SaveEventPayload;
 /**
  * Options for opening the image editor.
  */
 export interface ImageEditorOpenOptions {
     image?: string | Blob | File | null;
     state?: ImageEditorSessionState | null;
+    document?: ImageEditorDocument | null;
+    documentId?: string | null;
+    documentRevisionId?: string | null;
+    documentRevisionNumber?: number | null;
     sessionKey?: string | number;
 }
 /**
@@ -237,6 +390,10 @@ export interface ImageEditorEditSessionResponse {
     editable_source_url: string;
     editor_source_media_uuid: string | null;
     editor_state: ImageEditorSessionState | null;
+    editor_document_id: string | null;
+    editor_document_revision_id: string | null;
+    editor_document_revision_number: number | null;
+    editor_document: ImageEditorDocument | null;
     urls: {
         original: string;
         large?: string;
@@ -252,6 +409,26 @@ export interface ImageEditorSaveAcceptedResponse {
     job_id: string;
     status_url: string;
 }
+/**
+ * Response from POST /media/{media}/editor-documents/save.
+ */
+export interface ImageEditorDocumentSaveResponse {
+    success: true;
+    media: Media;
+    document_id: string;
+    document_revision_id: string;
+    document_revision_number: number;
+}
+/**
+ * Response from POST /media/{media}/editor-documents/materialize.
+ */
+export interface ImageEditorDocumentMaterializeResponse {
+    success: true;
+    document_id: string;
+    document_revision_id: string;
+    document_revision_number: number;
+    document: ImageEditorDocument;
+}
 /**
  * Response from GET /editor/jobs/{jobId} (polling endpoint).
  */

package/dist/vanilla-editor/VanillaImageEditor.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Type declaration shim for VanillaImageEditor.js
+ * Re-exports everything from the index.d.ts so that direct imports of
+ * VanillaImageEditor.js resolve correctly under verbatimModuleSyntax.
+ */
+export { VanillaImageEditor } from './index';
+export type {
+  VanillaImageEditorOptions,
+  FilterRegistry,
+  FilterDefinition,
+  ControlDefinition,
+  SaveEventPayload,
+  ErrorEventPayload,
+  ImageEditorDocument,
+  ImageEditorLayer,
+  ImageEditorLayerSource,
+  ImageEditorSessionState,
+} from './index';

package/dist/vanilla-editor/VanillaImageEditorV2.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Type declaration shim for VanillaImageEditorV2.js
+ */
+export { VanillaImageEditorV2 } from './index';
+export type {
+  VanillaImageEditorOptions,
+  FilterRegistry,
+  FilterDefinition,
+  ControlDefinition,
+  SaveEventPayload,
+  ErrorEventPayload,
+  ImageEditorDocument,
+  ImageEditorLayer,
+  ImageEditorLayerSource,
+  ImageEditorSessionState,
+} from './index';

package/dist/vanilla-editor/core/EventEmitter.d.ts

@@ -0,0 +1,12 @@
+/**
+ * EventEmitter Type Declarations
+ */
+
+export class EventEmitter {
+  constructor();
+  on(event: string, callback: (...args: unknown[]) => void): void;
+  off(event: string, callback: (...args: unknown[]) => void): void;
+  emit(event: string, ...args: unknown[]): void;
+  once(event: string, callback: (...args: unknown[]) => void): void;
+  removeAllListeners(event?: string): void;
+}

package/dist/vanilla-editor/core/State.d.ts

@@ -0,0 +1,98 @@
+/**
+ * State Type Declarations
+ */
+
+import { EventEmitter } from './EventEmitter';
+
+export const TEXT_LAYER_FONT_FAMILIES: readonly string[];
+
+export interface EditorState {
+  hasImage: boolean;
+  imageUrl: string | null;
+  mode: 'filters' | 'crop';
+  zoom: number;
+  fitScale: number;
+  activeFilters: Set<string>;
+  filterValues: Record<string, Record<string, unknown>>;
+  selectedFilter: string | null;
+  selectedCategory: string;
+  crop: {
+    shape: 'free' | 'square' | 'circle';
+    aspect: string;
+    rect: { x: number; y: number; width: number; height: number } | null;
+    dirty: boolean;
+  };
+  transform?: {
+    rotation: number;
+  };
+  editorDocument: Record<string, unknown> | null;
+  editorDocumentId: string | null;
+  editorDocumentRevisionId: string | null;
+  editorDocumentRevisionNumber: number | null;
+  layers: Array<Record<string, unknown>>;
+  activeLayerId: string | null;
+  theme: 'light' | 'dark' | 'auto';
+  isDarkMode: boolean;
+  backgroundRemovalAvailable: boolean;
+  isProcessing: boolean;
+  isSaving: boolean;
+}
+
+/** Canonical serializable editor session state (v3.0.0+) */
+export interface SerializableEditorState {
+  version: 1;
+  crop: {
+    rect: { x: number; y: number; width: number; height: number } | null;
+    aspectRatio: string;
+    shape: 'free' | 'square' | 'circle';
+  };
+  transform: {
+    rotation: number;
+  };
+  filters: Array<{
+    id: string;
+    enabled: boolean;
+    values: Record<string, string | number | boolean>;
+  }>;
+}
+
+export class State extends EventEmitter {
+  constructor();
+  get<K extends keyof EditorState>(key: K): EditorState[K];
+  get(key: string): unknown;
+  set<K extends keyof EditorState>(key: K, value: EditorState[K]): void;
+  set(key: string, value: unknown): void;
+  getAll(): Record<string, unknown>;
+  getSerializableState(): SerializableEditorState;
+  setEditorDocument(document: Record<string, unknown> | null, binding?: { documentId?: string | null; documentRevisionId?: string | null; documentRevisionNumber?: number | null }): void;
+  clearEditorDocument(): void;
+  getSerializableDocument(): Record<string, unknown> | null;
+  getEditorDocumentBinding(): { documentId: string | null; documentRevisionId: string | null; documentRevisionNumber: number | null } | null;
+  getLayer(layerId: string): Record<string, unknown> | null;
+  setActiveLayer(layerId: string | null): boolean;
+  getActiveFilterLayerId(): string | null;
+  isActiveLayerLocked(): boolean;
+  setLayerVisibility(layerId: string, visible: boolean): boolean;
+  isBackgroundLayerLocked(): boolean;
+  renameLayer(layerId: string, name: string): boolean;
+  duplicateLayer(layerId: string): string | null;
+  deleteLayer(layerId: string): boolean;
+  moveLayer(layerId: string, direction: 'up' | 'down' | 'front' | 'back' | 'bring-forward' | 'send-backward' | 'bring-to-front' | 'send-to-back'): boolean;
+  setLayerLocked(layerId: string, locked: boolean): boolean;
+  replaceLayerSource(layerId: string, source: Record<string, unknown>): boolean;
+  addTextLayer(payload?: Record<string, unknown>): string | null;
+  updateTextLayer(layerId: string, patch?: Record<string, unknown>): boolean;
+  ensureBackgroundLayer(fill?: Record<string, unknown>): string | null;
+  setBackgroundFill(fill: Record<string, unknown>): string | null;
+  setBackgroundFit(fit: 'cover' | 'contain' | 'stretch' | 'tile'): boolean;
+  setBackgroundBlur(amount: number): boolean;
+  removeBackgroundLayer(): boolean;
+  toggleFilter(filterId: string, enabled: boolean, expectedLayerId?: string | null): boolean;
+  setFilterValue(filterId: string, controlId: string, value: unknown, expectedLayerId?: string | null): boolean;
+  getFilterValues(filterId: string): Record<string, unknown>;
+  initFilterValues(filterId: string, controls: Array<{ id: string; default?: unknown }>, expectedLayerId?: string | null): boolean;
+  resetFilters(expectedLayerId?: string | null): boolean;
+}
+
+export function createState(): State;
+export function getState(): State;

package/dist/vanilla-editor/filters/categories.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Resolve a UI category id to its list of registry categories.
+ * Falls back to treating the id as a registry category if not found.
+ *
+ * @param {string} uiCategoryId
+ * @returns {string[]}
+ */
+export function getRegistryCategoriesForUi(uiCategoryId: string): string[];
+/**
+ * Resolve a filter's registry category to its UI category id.
+ * Falls back to the registry category itself if no mapping exists.
+ *
+ * @param {string} registryCategoryId
+ * @returns {string}
+ */
+export function getUiCategoryForRegistry(registryCategoryId: string): string;
+/**
+ * Ordered list of UI categories shown in the editor.
+ * Each entry may include a list of registry categories that feed it.
+ * Categories without a `registryCategories` field (e.g. 'crop') don't
+ * consume filters from the registry.
+ *
+ * @typedef {Object} EditorCategory
+ * @property {string} id - UI category id
+ * @property {string} name - Display name
+ * @property {string} [icon] - SVG icon markup
+ * @property {string[]} [registryCategories] - Registry categories aggregated under this UI category
+ */
+/** @type {EditorCategory[]} */
+export const EDITOR_CATEGORIES: EditorCategory[];
+/**
+ * UI category id -> list of registry categories it aggregates.
+ * Used by FilterManager.getFiltersByCategory.
+ */
+export const UI_TO_REGISTRY: {
+    [k: string]: string[] | undefined;
+};
+/**
+ * Registry category id -> UI category id.
+ * Used when we have a filter's registry category and need to highlight the
+ * right UI chip (e.g. colorMatrix.category === 'advanced' -> UI 'adjust').
+ */
+export const REGISTRY_TO_UI: {
+    [k: string]: string;
+};
+/**
+ * Ordered list of UI categories shown in the editor.
+ * Each entry may include a list of registry categories that feed it.
+ * Categories without a `registryCategories` field (e.g. 'crop') don't
+ * consume filters from the registry.
+ */
+export type EditorCategory = {
+    /**
+     * - UI category id
+     */
+    id: string;
+    /**
+     * - Display name
+     */
+    name: string;
+    /**
+     * - SVG icon markup
+     */
+    icon?: string | undefined;
+    /**
+     * - Registry categories aggregated under this UI category
+     */
+    registryCategories?: string[] | undefined;
+};

package/dist/vanilla-editor/icons/icons.d.ts

@@ -0,0 +1,42 @@
+/**
+ * SVG Icons for the vanilla image editor
+ * Uses inline SVG for zero dependencies
+ */
+export const chevronLeft: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"48\" d=\"M328 112L184 256l144 144\"/></svg>";
+export const chevronRight: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"48\" d=\"M184 112l144 144-144 144\"/></svg>";
+export const zoomIn: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M338.29 338.29L448 448M256 184v74m-37-37h74\"/></svg>";
+export const zoomOut: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M338.29 338.29L448 448M184 221h74\"/></svg>";
+export const expand: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320\"/></svg>";
+export const settings: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z\"/></svg>";
+export const water: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M400 320c0 88.37-55.63 144-144 144s-144-55.63-144-144c0-94.83 103.23-222.85 134.89-259.88a12 12 0 0118.23 0C296.77 97.15 400 225.17 400 320z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M344 328a72 72 0 01-72 72\"/></svg>";
+export const colorPalette: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"32\" d=\"M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z\"/><circle cx=\"144\" cy=\"208\" r=\"32\"/><circle cx=\"152\" cy=\"311\" r=\"32\"/><circle cx=\"224\" cy=\"144\" r=\"32\"/><circle cx=\"256\" cy=\"367\" r=\"32\"/><circle cx=\"328\" cy=\"144\" r=\"32\"/></svg>";
+export const sparkles: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z\"/></svg>";
+export const move: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M176 112l80-80 80 80M255.98 32l.02 448M176 400l80 80 80-80M400 176l80 80-80 80M112 176l-80 80 80 80M32 256h448\"/></svg>";
+export const brush: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M452.37 59.63h0a40.49 40.49 0 00-57.26 0L184 294.74c23.08 4.7 46.12 27.29 49.26 49.26l219.11-227.11a40.49 40.49 0 000-57.26z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M138 336c-29.88 0-54 24.5-54 54.86 0 23.95-20.67 36.57-34 44.78 15.08 8.08 32.23 12.36 50 12.36 48.49 0 88-38.89 88-88 0-30.36-24.12-54-50-54z\"/></svg>";
+export const flash: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M315.27 33L96 304h128l-31.51 173.23a2.36 2.36 0 002.33 2.77h0a2.36 2.36 0 001.89-.95L416 208H288l31.66-173.25a2.45 2.45 0 00-2.44-2.75h0a2.42 2.42 0 00-1.95 1z\"/></svg>";
+export const crop: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M144 48v272a48 48 0 0048 48h272\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M368 464V192a48 48 0 00-48-48H48\"/></svg>";
+export const save: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z\"/></svg>";
+export const close: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M368 368L144 144M368 144L144 368\"/></svg>";
+export const refresh: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M320 146s24.36-12-64-12a160 160 0 10160 160\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M256 58l80 80-80 80\"/></svg>";
+export const rotateCcw: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M176 112l-64 64 64 64\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M112 176h176a112 112 0 110 224H160\"/></svg>";
+export const rotateCw: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M336 112l64 64-64 64\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M400 176H224a112 112 0 100 224h128\"/></svg>";
+export const trash: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"32\" d=\"M80 112h352\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224\"/></svg>";
+export const openFolder: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M64 192v-72a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H408a40 40 0 0140 40v40\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M479.9 226.55L463.68 392a40 40 0 01-39.93 40H88.25a40 40 0 01-39.93-40L32.1 226.55A32 32 0 0164 192h384.1a32 32 0 0131.8 34.55z\"/></svg>";
+export const checkmark: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M416 128L192 384l-96-96\"/></svg>";
+export const layers: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M48 256l208 112 208-112-208-112L48 256z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M48 336l208 112 208-112M48 176L256 64l208 112\"/></svg>";
+export const eye: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M48 256s80-144 208-144 208 144 208 144-80 144-208 144S48 256 48 256z\"/><circle cx=\"256\" cy=\"256\" r=\"64\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\"/></svg>";
+export const eyeOff: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M432 448L80 64M160 160c-67.2 36.8-112 96-112 96s80 144 208 144c35.8 0 68.4-11.3 96-28.1M224.4 113.8A199.6 199.6 0 01256 112c128 0 208 144 208 144a334.2 334.2 0 01-65.1 78.6\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M213.3 213.3A64 64 0 10298.7 298.7\"/></svg>";
+export const lockClosed: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><rect x=\"96\" y=\"208\" width=\"320\" height=\"240\" rx=\"32\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M160 208v-64a96 96 0 01192 0v64\"/></svg>";
+export const lockOpen: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><rect x=\"96\" y=\"208\" width=\"320\" height=\"240\" rx=\"32\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M160 208v-64a96 96 0 01168-63.7\"/></svg>";
+export const pencil: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M96 352l-32 96 96-32L421.5 154.5a45.3 45.3 0 000-64h0a45.3 45.3 0 00-64 0L96 352z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M320 128l64 64\"/></svg>";
+export const duplicate: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><rect x=\"144\" y=\"144\" width=\"288\" height=\"288\" rx=\"32\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M80 368V112a32 32 0 0132-32h256\"/></svg>";
+export const text: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M96 112V80h320v32M256 80v352M184 432h144\"/></svg>";
+export const square: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><rect x=\"64\" y=\"64\" width=\"384\" height=\"384\" rx=\"48\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\"/></svg>";
+export const circle: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><circle cx=\"256\" cy=\"256\" r=\"208\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\"/></svg>";
+export const freeform: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M80 96h64l64 320h64l64-160h96\"/></svg>";
+export const sunny: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"32\" d=\"M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94\"/><circle cx=\"256\" cy=\"256\" r=\"80\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"32\"/></svg>";
+export const moon: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z\"/></svg>";
+export const film: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M436 80H76a44.05 44.05 0 00-44 44v264a44.05 44.05 0 0044 44h360a44.05 44.05 0 0044-44V124a44.05 44.05 0 00-44-44z\"/><circle cx=\"256\" cy=\"256\" r=\"80\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M220 80v56M292 80v56M220 376v56M292 376v56M80 144h56M80 224h56M80 304h56M376 144h56M376 224h56M376 304h56\"/></svg>";
+export const contrast: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><circle cx=\"256\" cy=\"256\" r=\"208\" fill=\"none\" stroke=\"currentColor\" stroke-linejoin=\"round\" stroke-width=\"32\"/><path fill=\"currentColor\" d=\"M256 464c-114.88 0-208-93.12-208-208S141.12 48 256 48z\"/></svg>";
+export const filter: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M32 144h448M112 256h288M208 368h96\"/></svg>";
+export const personOutline: "<svg viewBox=\"0 0 512 512\" width=\"20\" height=\"20\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"32\" d=\"M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z\"/><path fill=\"none\" stroke=\"currentColor\" stroke-miterlimit=\"10\" stroke-width=\"32\" d=\"M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z\"/></svg>";