@pixerate/editor 0.174.1 → 0.176.0

package/dist/parameters/index.js

@@ -1358,6 +1358,35 @@ function createParametersEditorDocument(controller) {
     }
   });
 }
+
+// src/parameters/theme.ts
+var parameterThemeStyles = {
+  input: {
+    backgroundColor: "var(--pixerate-parameter-input-bg, var(--background, transparent))",
+    color: "var(--pixerate-parameter-input-fg, var(--foreground, currentColor))",
+    borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))"
+  },
+  select: {
+    backgroundColor: "var(--pixerate-parameter-select-bg, var(--pixerate-parameter-input-bg, var(--background, transparent)))",
+    color: "var(--pixerate-parameter-select-fg, var(--pixerate-parameter-input-fg, var(--foreground, currentColor)))",
+    borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))"
+  },
+  button: {
+    color: "var(--pixerate-parameter-button-fg, var(--foreground, currentColor))",
+    borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))"
+  },
+  range: {
+    accentColor: "var(--pixerate-parameter-accent, var(--primary, currentColor))"
+  }
+};
+function parameterThemeStyleText(part) {
+  return Object.entries(parameterThemeStyles[part]).map(([key, value]) => `${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}: ${value};`).join(" ");
+}
+
+// src/parameters/options.ts
+function matchParameterOptionValue(options, value) {
+  return options.find((o) => o.value === value)?.value ?? options.find((o) => String(o.value) === String(value))?.value ?? value;
+}
 export {
   PARAMETER_KEY_TOLERANCE,
   ParameterSchemaError,
@@ -1387,6 +1416,7 @@ export {
   isParameterGroup,
   isSliderField,
   mapRange,
+  matchParameterOptionValue,
   normalizeHexColor,
   parameterDecimals,
   parameterFieldFromShaderControl,
@@ -1395,6 +1425,8 @@ export {
   parameterSchemaFromShaderControls,
   parameterSchemaToJsonSchema,
   parameterStep,
+  parameterThemeStyleText,
+  parameterThemeStyles,
   parameterValueFromShaderControl,
   parameterValuesEqual,
   parseParameterNumberInput,

package/dist/parameters/options.d.cts

@@ -0,0 +1,7 @@
+/**
+ * The option value a select reported: the option whose value is `value`, else the one whose
+ * string form is (a string-only host select turns `2` into `"2"`), else `value` itself.
+ */
+export declare function matchParameterOptionValue(options: readonly {
+    value: string | number;
+}[], value: string | number): string | number;

package/dist/parameters/options.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The option value a select reported: the option whose value is `value`, else the one whose
+ * string form is (a string-only host select turns `2` into `"2"`), else `value` itself.
+ */
+export declare function matchParameterOptionValue(options: readonly {
+    value: string | number;
+}[], value: string | number): string | number;

package/dist/parameters/theme.d.cts

@@ -0,0 +1,30 @@
+/**
+ * Theme tokens for the parameter controls in `@pixerate/editor-react` and `@pixerate/editor-svelte`.
+ * Each `--pixerate-parameter-*` property falls back to the common host tokens (`--background`,
+ * `--foreground`, `--input`, `--border`, `--primary`) and then to the browser default. The values
+ * are CSS declarations keyed by camelCase property, applied as inline styles by both bindings.
+ *
+ * Buttons set no background so their `hover:` classes keep working.
+ */
+export declare const parameterThemeStyles: {
+    readonly input: {
+        readonly backgroundColor: "var(--pixerate-parameter-input-bg, var(--background, transparent))";
+        readonly color: "var(--pixerate-parameter-input-fg, var(--foreground, currentColor))";
+        readonly borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))";
+    };
+    readonly select: {
+        readonly backgroundColor: "var(--pixerate-parameter-select-bg, var(--pixerate-parameter-input-bg, var(--background, transparent)))";
+        readonly color: "var(--pixerate-parameter-select-fg, var(--pixerate-parameter-input-fg, var(--foreground, currentColor)))";
+        readonly borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))";
+    };
+    readonly button: {
+        readonly color: "var(--pixerate-parameter-button-fg, var(--foreground, currentColor))";
+        readonly borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))";
+    };
+    readonly range: {
+        readonly accentColor: "var(--pixerate-parameter-accent, var(--primary, currentColor))";
+    };
+};
+export type ParameterThemePart = keyof typeof parameterThemeStyles;
+/** One part's declarations as an inline `style` string (`background-color: …; color: …`). */
+export declare function parameterThemeStyleText(part: ParameterThemePart): string;

package/dist/parameters/theme.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Theme tokens for the parameter controls in `@pixerate/editor-react` and `@pixerate/editor-svelte`.
+ * Each `--pixerate-parameter-*` property falls back to the common host tokens (`--background`,
+ * `--foreground`, `--input`, `--border`, `--primary`) and then to the browser default. The values
+ * are CSS declarations keyed by camelCase property, applied as inline styles by both bindings.
+ *
+ * Buttons set no background so their `hover:` classes keep working.
+ */
+export declare const parameterThemeStyles: {
+    readonly input: {
+        readonly backgroundColor: "var(--pixerate-parameter-input-bg, var(--background, transparent))";
+        readonly color: "var(--pixerate-parameter-input-fg, var(--foreground, currentColor))";
+        readonly borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))";
+    };
+    readonly select: {
+        readonly backgroundColor: "var(--pixerate-parameter-select-bg, var(--pixerate-parameter-input-bg, var(--background, transparent)))";
+        readonly color: "var(--pixerate-parameter-select-fg, var(--pixerate-parameter-input-fg, var(--foreground, currentColor)))";
+        readonly borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))";
+    };
+    readonly button: {
+        readonly color: "var(--pixerate-parameter-button-fg, var(--foreground, currentColor))";
+        readonly borderColor: "var(--pixerate-parameter-border, var(--input, var(--border, currentColor)))";
+    };
+    readonly range: {
+        readonly accentColor: "var(--pixerate-parameter-accent, var(--primary, currentColor))";
+    };
+};
+export type ParameterThemePart = keyof typeof parameterThemeStyles;
+/** One part's declarations as an inline `style` string (`background-color: …; color: …`). */
+export declare function parameterThemeStyleText(part: ParameterThemePart): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.174.1",
+  "version": "0.176.0",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",

package/skills/pixerate-image-editor/SKILL.md

@@ -390,7 +390,8 @@ in the source frame at the document's bit depth, colour mode and profile. Read
 | `apply_effect` | Run a provider filter effect on a layer as a smart filter (`target`, `effect`, `values`, `index`, `enabled`, `opacity`); a pixel, shape or type layer becomes a smart object in the same undo step (`converted`). Returns the filter id. |
 | `update_effect` | Change an effect smart filter (`values` merged, `null` resets; `enabled`, `opacity`, `index`) or redraw an effect layer (`effect: "generator"`, values only). |
 | `remove_effect` | Remove an effect smart filter, or (`generator`) keep an effect layer's pixels as a plain layer. |
-| `add_effect_layer` | Add a layer drawn by a generator, overlay or title effect at the document's size and bit depth (`values`, `time`, `name`, `aboveId` / `belowId`, `opacity`, `blend`). Returns the layer id. |
+| `add_effect_layer` | Add a layer drawn by a generator, overlay or title effect at the document's size and bit depth (`values`, `time`, `animate`, `name`, `aboveId` / `belowId`, `opacity`, `blend`). An effect with its own background (`backgroundOpacity` in `describe_effect`) starts with it transparent when there are layers below. Returns the layer id. |
+| `set_effect_layer` | Change an effect layer: swap its `effect` (its defaults plus `values`), pick the still frame (`time`, ms), or make it play in an animation (`animate: { duration }`; `null` for a still frame). The longest animating layer sets the animation's length. |
 | `apply_selection_as_mask` | Mask a layer with the current selection: pass `layerId` to mask an existing layer, or `kind` (plus optional `params`) to create a new masked layer in one step. `density` 0..1 and `feather` px soften the mask non-destructively. Returns `layerId`, kind, mask info and the selection summary. |
 
 ### Save and open