@cesdk/cesdk-js 1.3.0 → 1.4.0-alpha.0

package/BlockAPI.d.ts

@@ -0,0 +1,232 @@
+type Vec2 = { x: number; y: number };
+type DesignElementId = number;
+type DesignElementType = string;
+type MimeType = 'image/png' | 'image/jpeg';
+type Size = number; // | 'auto';
+type Size2 = {
+  width: Size;
+  height: Size;
+};
+
+export default class BlockAPI {
+  /**
+   * Exports a design block element as a file of the given mime type.
+   * Performs an internal update to resolve the final layout for the blocks.
+   * @param handle The design block element to export.
+   * @param mimeType The mime type of the output file.
+   * @returns A promise that resolves with the exported image or is rejected with an error.
+   */
+  export(handle: DesignElementId, mimeType: MimeType): Promise<Blob>;
+
+  /**
+   * Create a new block, fails if type is unknown.
+   * @param type The type of the block that shall be created.
+   * @returns The created blocks handle.
+   */
+  create(type: DesignElementType): DesignElementId;
+
+  /**
+
+   * Get the type of the given block, fails if the block is invalid.
+   * @param id The block to query.
+   * @returns The blocks type.
+   */
+  getType(id: DesignElementId): DesignElementType;
+
+  /**
+   * Update the selection state of a block.
+   * Fails for invalid blocks.
+   * @param id The block to query.
+   * @param selected Whether or not the block should be selected.
+   */
+  setSelected(id: DesignElementId, selected: boolean): void;
+
+  /**
+   * Get the selected state of a block.
+   * @param id The block to query.
+   * @returns True if the block is selected, false otherwise.
+   */
+  isSelected(id: DesignElementId): boolean;
+
+  /**
+   * Get all currently selected blocks.
+   * @returns An array of block ids.
+   */
+  findAllSelected(): DesignElementId[];
+
+  /**
+   * Update a block's name.
+   * @param id The block to update.
+   * @param name The name to set.
+   */
+  setName(id: DesignElementId, name: string);
+
+  /**
+   * Get a block's name.
+   * @param id The block to update.
+   */
+  getName(id: DesignElementId): string;
+
+  /**
+   * Finds all blocks with the given name.
+   * @param name The name to search for.
+   * @returns A list of block ids.
+   */
+  findByName(name: string): DesignElementId[];
+
+  /**
+   * Finds all blocks with the given type.
+   * @param type The type to search for.
+   * @returns A list of block ids.
+   */
+  findByType(type: DesignElementType): DesignElementId[];
+
+  /**
+   * Return all blocks currently known to the engine.
+   * @returns A list of block ids.
+   */
+  findAll(): /* filterSpec?: unknown */ DesignElementId[];
+
+  // Element
+
+  /**
+   * Query a block's visibility.
+   * @param id The block to query.
+   * @returns True if visible, false otherwise.
+   */
+  isVisible(id: DesignElementId): boolean;
+
+  /**
+   * Update a block's visibility.
+   * @param id The block to update.
+   * @param visible Whether the block shall be visible.
+   */
+  setVisible(id: DesignElementId, visible: boolean): void;
+
+  /**
+   * Query a block's absolute position in design units.
+   * @param id The block to query.
+   * @returns
+   */
+  getPosition(id: DesignElementId): Vec2;
+
+  /**
+   * Update a block's absolute position.
+   * @param id The block to update.
+   * @param { x, y } pos The new position in design units.
+   */
+  setPosition(id: DesignElementId, { x, y }: Vec2): void;
+
+  /**
+   * Query a block's rotation in radians.
+   * @param id The block to query.
+   * @returns The block's rotation around its center in radians.
+   */
+  getRotation(id: DesignElementId): number;
+
+  /**
+   * Update a block's rotation.
+   * @param id The block to update.
+   * @param radians The new rotation in radians. Rotation is applied around the block's center.
+   */
+  setRotation(id: DesignElementId, radians: number): void;
+
+  /**
+   * Query a block's horizontal flip state.
+   * @param id The block to query.
+   * @returns A boolean indicating for whether the block is flipped in the queried direction
+   */
+  getFlipHorizontal(id: DesignElementId): boolean;
+
+  /**
+   * Query a block's vertical flip state.
+   * @param id The block to query.
+   * @returns A boolean indicating for whether the block is flipped in the queried direction
+   */
+  getFlipVertical(id: DesignElementId): boolean;
+
+  /**
+   * Update a block's horizontal flip.
+   * @param id The block to update.
+   * @param horizontal Whether the block should be flipped along its x-axis.
+   * @returns
+   */
+  setFlipHorizontal(id: DesignElementId, flip: boolean): void;
+
+  /**
+   * Update a block's vertical flip.
+   * @param id The block to update.
+   * @param vertical Whether the block should be flipped along its y-axis.
+   * @returns
+   */
+  setFlipVertical(id: DesignElementId, flip: boolean): void;
+
+  /**
+   * Query a block's absolute size in design units.
+   * @param id The block to query.
+   * @returns A `Size2` object.
+   */
+  getSize(id: DesignElementId): Size2;
+
+  /**
+   * Update a block's absolute size in design units.
+   * @param id The block to update.
+   * @param size A size object defining width and height.
+   */
+  setSize(id: DesignElementId, size: Size2): void;
+
+  /**
+   * Get a block's layouted size. Requires an `engine.render()` beforehand.
+   * @param id The block to query.
+   * @returns A `Size2` object holding the size.
+   */
+  getFrameSize(id: DesignElementId): Size2;
+
+  /**
+   * Duplicates a block including its children.
+   * @param id The block to duplicate.
+   * @returns The handle of the duplicate.
+   */
+  duplicate(id: DesignElementId): DesignElementId;
+
+  /**
+   * Destroys a block.
+   * @param id The block to destroy.
+   */
+  destroy(id: DesignElementId): void;
+
+  /**
+   * Query a block's parent.
+   * @param id The block to query.
+   * @returns The parent's handle.
+   */
+  getParent(id: DesignElementId): DesignElementId;
+
+  /**
+   * Get all children of the given block. Children
+   * are sorted in their rendering order: Last child is rendered
+   * in front of other children.
+   * @param id The block to query.
+   * @returns A list of block ids.
+   */
+  getChildren(id: DesignElementId): DesignElementId[];
+
+  /**
+   * Insert a new or existing child at a certain position in the parent's children.
+   * @param parent The block whose children should be updated.
+   * @param child The child to insert. Can be an existing child of `parent`.
+   * @param index The index to insert or move to.
+   */
+  insertChild(
+    parent: DesignElementId,
+    child: DesignElementId,
+    index: number
+  ): void;
+
+  /**
+   * Appends a new or existing child to a block's children.
+   * @param parent The block whose children should be updated.
+   * @param child The child to insert. Can be an existing child of `parent`.
+   */
+  appendChild(parent: DesignElementId, child: DesignElementId): void;
+}

package/SceneAPI.d.ts

@@ -0,0 +1,52 @@
+type DesignBlockId = number;
+
+export default class SceneAPI {
+  /**
+   * Load the contents of a scene file.
+   * @param sceneContent The scene file contents, a base64 string.
+   * @returns A handle to the loaded scene.
+   */
+  loadFromString(sceneContent: string): DesignBlockId;
+
+  /**
+   * Load a scene from the URL to the scene file.
+   * The scene file will be fetched asynchronously by the engine. This requires continous `render`
+   * calls on this engines instance.
+   * @param url The URL of the scene file.
+   * @returns scene A promise that resolves once the scene was loaded or rejects with an error otherwise.
+   */
+  loadFromURL(url: string): Promise<DesignBlockId>;
+
+  /**
+   * Serializes the current scene into a string. Selection is discarded.
+   * @returns A promise that resolves with a string on success or an error on failure.
+   */
+  saveToString(): Promise<string>;
+
+  /**
+   * Create a new scene, along with its own camera.
+   * @returns The scenes handle.
+   */
+  create(): DesignBlockId;
+
+  /**
+   * Loads the given image and creates a scene with a single page showing the image.
+   * Fetching the image may take an arbitrary amount of time, so the scene isn't immediately
+   * available.
+   * @param url The image URL.
+   * @param dpi The scenes DPI.
+   * @param pixelScaleFactor The displays pixel scale factor.
+   * @returns A promise that resolves with the scene ID on success or rejected with an error otherwise.
+   */
+  createFromImage(
+    url: string,
+    dpi?: number,
+    pixelScaleFactor?: number
+  ): Promise<DesignBlockId>;
+
+  /**
+   * Return the currently active scene.
+   * @returns The scene or null, if none was created yet.
+   */
+  get(): DesignBlockId | null;
+}

package/VariableAPI.d.ts

@@ -0,0 +1,21 @@
+export default class VariableAPI {
+  /**
+   * Get all text variables currently stored in the engine.
+   * @returns Return a list of variable names
+   */
+  findAll(): string[];
+
+  /**
+   * Set a text variable.
+   * @param key The variable's key.
+   * @param value The text to replace the variable with.
+   */
+  set(key: string, value: string): void;
+
+  /**
+   * Set a text variable.
+   * @param key The variable's key.
+   * @returns  The text value of the variable.
+   */
+  get(key: string): string;
+}

package/api.d.ts

@@ -0,0 +1,11 @@
+import BlockAPI from './BlockAPI';
+import SceneAPI from './SceneAPI';
+import VariableAPI from './VariableAPI';
+
+export default class API {
+  block: BlockAPI;
+
+  scene: SceneAPI;
+
+  variable: VariableAPI;
+}

package/assets/i18n/de.json

@@ -499,7 +499,7 @@
             "label": "Texthintergrundfarbe"
           }
         },
-        "adjustableImage": {
+        "image": {
           "crop": {
             "label": "Bildausschnitt"
           },
@@ -722,7 +722,7 @@
           }
         }
       },
-      "adjustableImage": {
+      "image": {
         "label": "Bild",
         "select": { "label": "$t(common.select)" },
         "scope": {
@@ -749,7 +749,7 @@
               "description": " Höhe vom Zuschneidebereich in {{unit}}"
             }
           },
-          "adjustableImage": {
+          "image": {
             "heading": "Bild",
             "x": {
               "label": "X Versatz",
@@ -1114,7 +1114,7 @@
           "fixedFrame": { "description": "Feste Größe aktivieren" }
         },
 
-        "adjustableImage": {
+        "image": {
           "crop": { "description": "Bild beschneiden" },
           "filter": { "description": "Filter anwenden" }
         },

package/assets/i18n/en.json

@@ -499,7 +499,7 @@
             "label": "Text Background Color"
           }
         },
-        "adjustableImage": {
+        "image": {
           "crop": {
             "label": "Image Crop"
           },
@@ -722,7 +722,7 @@
           }
         }
       },
-      "adjustableImage": {
+      "image": {
         "label": "Image",
         "select": { "label": "$t(common.select)" },
         "scope": {
@@ -749,7 +749,7 @@
               "description": "Height of the crop frame in {{unit}}"
             }
           },
-          "adjustableImage": {
+          "image": {
             "heading": "Image",
             "x": {
               "label": "X Offset",
@@ -1187,7 +1187,7 @@
           "fixedFrame": { "description": "Enable fixed frame" }
         },
 
-        "adjustableImage": {
+        "image": {
           "crop": { "description": "Crop image" },
           "filter": { "description": "Apply filter" }
         },

package/assets/ui/stylesheets/cesdk-themes.css

@@ -1 +1 @@
-.ubq-dark{--ubq-elevation-2: hsl(210, 7.5%, 20%);--ubq-elevation-1: hsl(210, 15%, 15%);--ubq-canvas: hsl(210, 30%, 10%);--ubq-foreground-default: hsla(210, 0%, 100%, 0.9);--ubq-foreground-light: hsla(210, 0%, 100%, 0.7);--ubq-foreground-info: hsla(210, 0%, 100%, 0.5);--ubq-foreground-active: hsla(210, 30%, 10%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.1);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.15);--ubq-interactive-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.02);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.88);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(210, 100%, 95%, 0.98);--ubq-interactive-active-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.5);--ubq-interactive-accent-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.8);--ubq-interactive-accent-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 1);--ubq-interactive-accent-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.7);--ubq-interactive-template-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.4);--ubq-interactive-template-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.6);--ubq-interactive-template-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.3);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.2);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.4);--ubq-interactive-group-active: rgba(255, 255, 255, 0.05);--ubq-border-outline: hsla(210, 0%, 100%, 0.16);--ubq-border-divider: hsla(210, 0%, 100%, 0.08);--ubq-border-contrast: hsla(210, 0%, 100%, 0.25);--ubq-focus-default: hsl(230, 90%, 80%);--ubq-focus-outline: hsl(210, 30%, 10%);--ubq-overlay: hsla(210, 30%, 10%, 0.8);--ubq-notice-info: hsla(0, 0%, 100%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(40, 100%, 60%, 1);--ubq-notice-error: hsla(338, 64%, 62%, 1);--ubq-effect-shadow: 0px 4px 16px -4px rgba(16, 22, 28, 0.14), 0px 1px 20px -4px rgba(16, 22, 28, 0.12), 0px 2px 12px -4px rgba(16, 22, 28, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 100%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 100%, 0.08 );--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(210, 0%, 100%);--ubq-static-contrast-black: hsl(210, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% )}.ubq-light{--ubq-elevation-2: hsl(210, 10%, 95%);--ubq-elevation-1: hsl(210, 10%, 90%);--ubq-canvas: hsl(210, 10%, 85%);--ubq-foreground-default: hsla(210, 30%, 10%, 0.9);--ubq-foreground-light: hsla(210, 30%, 10%, 0.7);--ubq-foreground-info: hsla(210, 30%, 10%, 0.5);--ubq-foreground-active: hsla(210, 0%, 100%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) ), hsla(0, 50%, 100%, 0.6);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 0%, 0.15);--ubq-interactive-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.02%);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.85);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 8%, 0.8);--ubq-interactive-active-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.95);--ubq-interactive-accent-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.8);--ubq-interactive-accent-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 1);--ubq-interactive-accent-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.7);--ubq-interactive-template-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.4);--ubq-interactive-template-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.6);--ubq-interactive-template-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.3);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.08);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.2);--ubq-border-outline: hsla(210, 0%, 0%, 0.16);--ubq-border-divider: hsla(210, 0%, 0%, 0.08);--ubq-border-contrast: hsla(210, 0%, 0%, 0.25);--ubq-focus-default: hsl(230, 100%, 60%);--ubq-focus-outline: hsl(210, 10%, 85%);--ubq-overlay: hsla(210, 10%, 85%, 0.8);--ubq-notice-info: hsla(208, 29%, 10%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(46, 100%, 29%, 1);--ubq-notice-error: hsla(338, 64%, 51%, 1);--ubq-effect-shadow: 0px 4px 16px -4px rgba(16, 22, 28, 0.14), 0px 1px 20px -4px rgba(16, 22, 28, 0.12), 0px 2px 12px -4px rgba(16, 22, 28, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 0%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 0%, 0.08 );--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(210, 0%, 100%);--ubq-static-contrast-black: hsl(210, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% )}.ubq-normal{--ubq-typography-headline-l-size: 16px;--ubq-typography-headline-l-line_height: 20px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 12px;--ubq-typography-headline-m-line_height: 16px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 12px;--ubq-typography-label-m-line_height: 16px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 10px;--ubq-typography-label-s-line_height: 14px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-line_height: 18px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 12px;--ubq-typography-input-m-line_height: 16px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 12px;--ubq-typography-button-m-line_height: 16px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 4px;--ubq-margin-base: 4px;--ubq-margin-xs: 4px;--ubq-margin-s: 8px;--ubq-margin-m: 12px;--ubq-margin-l: 16px;--ubq-border_radius-base: 3px;--ubq-border_radius-s: 3px;--ubq-border_radius-m: 6px;--ubq-border_radius-l: 12px}.ubq-large{--ubq-typography-headline-l-size: 20px;--ubq-typography-headline-l-line_height: 25px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 15px;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 15px;--ubq-typography-label-m-line_height: 20px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 12.5px;--ubq-typography-label-s-line_height: 17.5px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 15px;--ubq-typography-body-m-line_height: 22.5px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 15px;--ubq-typography-input-m-line_height: 20px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 15px;--ubq-typography-button-m-line_height: 20px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 5px;--ubq-margin-base: 5px;--ubq-margin-xs: 5px;--ubq-margin-s: 10px;--ubq-margin-m: 15px;--ubq-margin-l: 20px;--ubq-border_radius-base: 3.75px;--ubq-border_radius-s: 3.75px;--ubq-border_radius-m: 7.5px;--ubq-border_radius-l: 15px}
+.ubq-dark{--ubq-elevation-2: hsl(210, 7.5%, 20%);--ubq-elevation-1: hsl(210, 15%, 15%);--ubq-canvas: hsl(210, 30%, 10%);--ubq-foreground-default: hsla(210, 0%, 100%, 0.9);--ubq-foreground-light: hsla(210, 0%, 100%, 0.7);--ubq-foreground-info: hsla(210, 0%, 100%, 0.5);--ubq-foreground-active: hsla(210, 30%, 10%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.1);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.15);--ubq-interactive-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.02);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.88);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(210, 100%, 95%, 0.98);--ubq-interactive-active-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.5);--ubq-interactive-accent-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.8);--ubq-interactive-accent-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 1);--ubq-interactive-accent-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.7);--ubq-interactive-template-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.4);--ubq-interactive-template-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.6);--ubq-interactive-template-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(165, 54, 252, 0.3);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.2);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.4);--ubq-interactive-group-active: rgba(255, 255, 255, 0.05);--ubq-border-outline: hsla(210, 0%, 100%, 0.16);--ubq-border-divider: hsla(210, 0%, 100%, 0.08);--ubq-border-contrast: hsla(210, 0%, 100%, 0.25);--ubq-focus-default: hsl(230, 90%, 80%);--ubq-focus-outline: hsl(210, 30%, 10%);--ubq-overlay: hsla(210, 30%, 10%, 0.8);--ubq-notice-info: hsla(0, 0%, 100%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(40, 100%, 60%, 1);--ubq-notice-error: hsla(338, 64%, 62%, 1);--ubq-effect-shadow: 0px 4px 16px -4px rgba(16, 22, 28, 0.14), 0px 1px 20px -4px rgba(16, 22, 28, 0.12), 0px 2px 12px -4px rgba(16, 22, 28, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2 - 0.01px) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 100%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 100%, 0.08 );--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(210, 0%, 100%);--ubq-static-contrast-black: hsl(210, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% )}.ubq-light{--ubq-elevation-2: hsl(210, 10%, 95%);--ubq-elevation-1: hsl(210, 10%, 90%);--ubq-canvas: hsl(210, 10%, 85%);--ubq-foreground-default: hsla(210, 30%, 10%, 0.9);--ubq-foreground-light: hsla(210, 30%, 10%, 0.7);--ubq-foreground-info: hsla(210, 30%, 10%, 0.5);--ubq-foreground-active: hsla(210, 0%, 100%, 0.9);--ubq-foreground-accent: hsla(210, 0%, 100%, 1);--ubq-interactive-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) ), hsla(0, 50%, 100%, 0.6);--ubq-interactive-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 0%, 0.15);--ubq-interactive-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0) ), hsla(0, 0%, 100%, 0.02%);--ubq-interactive-active-default: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.85);--ubq-interactive-active-hover: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 8%, 0.8);--ubq-interactive-active-pressed: linear-gradient( to bottom, hsla(0, 0%, 100%, 0.04), hsla(0, 0%, 100%, 0) ), hsla(210, 60%, 5%, 0.95);--ubq-interactive-accent-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.8);--ubq-interactive-accent-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 1);--ubq-interactive-accent-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(61, 92, 245, 0.7);--ubq-interactive-template-default: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.4);--ubq-interactive-template-hover: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.6);--ubq-interactive-template-pressed: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100% ), rgba(142, 4, 251, 0.3);--ubq-input-default: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.08);--ubq-input-hover: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.04), hsla(0, 0%, 0%, 0) ), hsla(0, 0%, 0%, 0.2);--ubq-border-outline: hsla(210, 0%, 0%, 0.16);--ubq-border-divider: hsla(210, 0%, 0%, 0.08);--ubq-border-contrast: hsla(210, 0%, 0%, 0.25);--ubq-focus-default: hsl(230, 100%, 60%);--ubq-focus-outline: hsl(210, 10%, 85%);--ubq-overlay: hsla(210, 10%, 85%, 0.8);--ubq-notice-info: hsla(208, 29%, 10%, 1);--ubq-notice-success: hsla(166, 90%, 37%, 1);--ubq-notice-warning: hsla(46, 100%, 29%, 1);--ubq-notice-error: hsla(338, 64%, 51%, 1);--ubq-effect-shadow: 0px 4px 16px -4px rgba(16, 22, 28, 0.14), 0px 1px 20px -4px rgba(16, 22, 28, 0.12), 0px 2px 12px -4px rgba(16, 22, 28, 0.2);--ubq-effect-focus: 0 0 0 calc(var(--ubq-scale-base) / 2 - 0.01px) var(--ubq-focus-outline), 0 0 0 var(--ubq-scale-base) var(--ubq-focus-default);--ubq-Slider-track-progress-color: hsla( 210, 0%, 0%, 0.16 );--ubq-Slider-background-color: hsla( 210, 0%, 0%, 0.08 );--ubq-static-selection-frame: hsl(230, 100%, 60%);--ubq-static-contrast-white: hsl(210, 0%, 100%);--ubq-static-contrast-black: hsl(210, 0%, 0%);--ubq-static-snapping: hsl(338, 100%, 50%);--ubq-static-bleed: hsl(334, 73%, 43%);--ubq-static-text-variable: hsl(274, 97%, 60%);--ubq-static-card-label-background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 14.46%, rgba(0, 0, 0, 0.6) 100% )}.ubq-normal{--ubq-typography-headline-l-size: 16px;--ubq-typography-headline-l-line_height: 20px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 12px;--ubq-typography-headline-m-line_height: 16px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 12px;--ubq-typography-label-m-line_height: 16px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 10px;--ubq-typography-label-s-line_height: 14px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 12px;--ubq-typography-body-m-line_height: 18px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 12px;--ubq-typography-input-m-line_height: 16px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 12px;--ubq-typography-button-m-line_height: 16px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 4px;--ubq-margin-base: 4px;--ubq-margin-xs: 4px;--ubq-margin-s: 8px;--ubq-margin-m: 12px;--ubq-margin-l: 16px;--ubq-border_radius-base: 3px;--ubq-border_radius-s: 3px;--ubq-border_radius-m: 6px;--ubq-border_radius-l: 12px}.ubq-large{--ubq-typography-headline-l-size: 20px;--ubq-typography-headline-l-line_height: 25px;--ubq-typography-headline-l-letter_spacing: 0.01em;--ubq-typography-headline-l-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-l-weight: 600;--ubq-typography-headline-m-size: 15px;--ubq-typography-headline-m-line_height: 20px;--ubq-typography-headline-m-letter_spacing: 0.03em;--ubq-typography-headline-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-headline-m-weight: 600;--ubq-typography-label-m-size: 15px;--ubq-typography-label-m-line_height: 20px;--ubq-typography-label-m-letter_spacing: 0.02em;--ubq-typography-label-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-m-weight: normal;--ubq-typography-label-s-size: 12.5px;--ubq-typography-label-s-line_height: 17.5px;--ubq-typography-label-s-letter_spacing: 0.02em;--ubq-typography-label-s-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-label-s-weight: normal;--ubq-typography-body-m-size: 15px;--ubq-typography-body-m-line_height: 22.5px;--ubq-typography-body-m-letter_spacing: 0.02em;--ubq-typography-body-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-body-m-weight: normal;--ubq-typography-input-m-size: 15px;--ubq-typography-input-m-line_height: 20px;--ubq-typography-input-m-letter_spacing: 0.02em;--ubq-typography-input-m-font_family: var( --ubq-typography-font_family, "Overpass Mono", monospace );--ubq-typography-input-m-weight: 500;--ubq-typography-button-m-size: 15px;--ubq-typography-button-m-line_height: 20px;--ubq-typography-button-m-letter_spacing: 0.02em;--ubq-typography-button-m-font_family: var( --ubq-typography-font_family, "Inter", sans-serif );--ubq-typography-button-m-weight: normal;--ubq-scale-base: 5px;--ubq-margin-base: 5px;--ubq-margin-xs: 5px;--ubq-margin-s: 10px;--ubq-margin-m: 15px;--ubq-margin-l: 20px;--ubq-border_radius-base: 3.75px;--ubq-border_radius-s: 3.75px;--ubq-border_radius-m: 7.5px;--ubq-border_radius-l: 15px}

package/cesdk-engine.umd.d.ts

@@ -0,0 +1,34 @@
+import BlockAPI from './BlockAPI';
+import SceneAPI from './SceneAPI';
+import VariableAPI from './VariableAPI';
+import { UserConfiguration } from './types';
+
+/**
+ * A headless implementation that just initializes & exposes the Document API
+ */
+export default class CreativeEngine {
+  block: BlockAPI;
+
+  scene: SceneAPI;
+
+  variable: VariableAPI;
+
+  private constructor(...args: unknown[]);
+
+  /**
+   * Dispose the engine.
+   */
+  dispose(): void;
+
+  /**
+   * Initialize a `CreativeEngine` using the given `canvas` element and an optional config.
+   * @param canvas The canvas to use for drawing. Optional, if no canvas is provided,
+   *               the engine works with an internal offscreen-canvas.
+   * @param config A configuration object.
+   * @returns An engine instance.
+   */
+  static init(
+    canvas?: HTMLCanvasElement,
+    config?: UserConfiguration
+  ): Promise<CreativeEngine>;
+}