@pixerate/editor 0.145.0 → 0.147.0

package/dist/vector/index.js

@@ -38,7 +38,7 @@ import {
   reverseMorphContour,
   subpathToMorphContour,
   turnMorphContour
-} from "../chunk-DAS7M4RY.js";
+} from "../chunk-UILRJQFD.js";
 import {
   DEFAULT_VECTOR_FONT,
   IDENTITY_MATRIX,
@@ -507,7 +507,7 @@ import {
   withVectorStrokes,
   withVectorTargetPaint,
   zigzagPaths
-} from "../chunk-77SG47WT.js";
+} from "../chunk-FLOGD3QB.js";
 import "../chunk-ORDXMBD4.js";
 import {
   createProvenance
@@ -562,10 +562,12 @@ import {
   HistoryManager
 } from "../chunk-RNSANXPT.js";
 import "../chunk-5UJHB3BW.js";
-import "../chunk-45VRG4RB.js";
+import "../chunk-KY3FYKP3.js";
 import {
   hexToRgba
 } from "../chunk-2WPNAGHI.js";
+import "../chunk-AA34BA7G.js";
+import "../chunk-6ONMQ6WF.js";
 
 // src/vector/trace.ts
 var VECTOR_TRACE_MAX_PIXELS = 4e6;

package/dist/video-editor/index.cjs

@@ -150,10 +150,12 @@ require('../chunk-WOFXZ3XU.cjs');
 var _chunkFJ2MSI43cjs = require('../chunk-FJ2MSI43.cjs');
 
 
-var _chunkUUTTJK77cjs = require('../chunk-UUTTJK77.cjs');
+var _chunkSUF6WRXRcjs = require('../chunk-SUF6WRXR.cjs');
 require('../chunk-DWJJI6RT.cjs');
-require('../chunk-5FXOR7F2.cjs');
+require('../chunk-LEUZ4FRC.cjs');
 require('../chunk-A6QWKBJP.cjs');
+require('../chunk-UKCJ43YL.cjs');
+require('../chunk-IPJ3TEYR.cjs');
 
 // src/video-editor/parse.ts
 var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
@@ -2807,7 +2809,7 @@ var VideoEditorController = (_class6 = class {
     this.readOnly = _nullishCoalesce(options.readOnly, () => ( false));
     this.previewScale = checkPreviewScale(_nullishCoalesce(options.previewScale, () => ( "auto")));
     this.onChange = options.onChange;
-    this.player = new (0, _chunkUUTTJK77cjs.AnimationPlayer)({ clock: options.clock, duration: () => _chunkVKF3PWKRcjs.videoProjectDuration.call(void 0, this.project), loop: "none" });
+    this.player = new (0, _chunkSUF6WRXRcjs.AnimationPlayer)({ clock: options.clock, duration: () => _chunkVKF3PWKRcjs.videoProjectDuration.call(void 0, this.project), loop: "none" });
     this.state = this.computeState();
     this.connect();
   }

package/dist/video-editor/index.js

@@ -150,10 +150,12 @@ import {
 } from "../chunk-RNSANXPT.js";
 import {
   AnimationPlayer
-} from "../chunk-QX25HWFL.js";
+} from "../chunk-AY65VQSU.js";
 import "../chunk-5UJHB3BW.js";
-import "../chunk-45VRG4RB.js";
+import "../chunk-KY3FYKP3.js";
 import "../chunk-2WPNAGHI.js";
+import "../chunk-AA34BA7G.js";
+import "../chunk-6ONMQ6WF.js";
 
 // src/video-editor/parse.ts
 var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.145.0",
+  "version": "0.147.0",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",
@@ -234,6 +234,26 @@
         "default": "./dist/tokens/index.cjs"
       }
     },
+    "./color": {
+      "import": {
+        "types": "./dist/color/index.d.ts",
+        "default": "./dist/color/index.js"
+      },
+      "require": {
+        "types": "./dist/color/index.d.cts",
+        "default": "./dist/color/index.cjs"
+      }
+    },
+    "./gradient": {
+      "import": {
+        "types": "./dist/gradient/index.d.ts",
+        "default": "./dist/gradient/index.js"
+      },
+      "require": {
+        "types": "./dist/gradient/index.d.cts",
+        "default": "./dist/gradient/index.cjs"
+      }
+    },
     "./export": {
       "import": {
         "types": "./dist/export/index.d.ts",

package/skills/README.md

@@ -20,6 +20,7 @@ that uses the tools can load the matching skill.
 | [`pixerate-video-editor`](pixerate-video-editor/SKILL.md) | Non-linear video editing: tracks, clips, transitions, export. |
 | [`pixerate-generation`](pixerate-generation/SKILL.md) | Planning, estimating and running paid media generation. |
 | [`pixerate-parameters`](pixerate-parameters/SKILL.md) | Effect parameters, presets and keyframes. |
+| [`pixerate-color`](pixerate-color/SKILL.md) | Colour inspection, WCAG accessibility and contrast optimization, CVD simulation, palette audits, harmonies, and OKLab/OKLCH blends. |
 
 ## Using them
 

package/skills/pixerate-agent-tools/SKILL.md

@@ -61,6 +61,27 @@ editor's, or (in discovery mode) only `list_toolsets`, `search_tools`, `enable_t
 6. **Undo your own mistakes** with the domain's `undo_*` tool or the `history.undo` command, not
    by hand-reverting with more edits.
 
+## Saving, loading and undo
+
+Every editor can share the same document tools, named after its kind (`diagram`, `chart`,
+`spreadsheet`...). The editor's skill lists the ones it has.
+
+- `get_<kind>_document` returns the whole document as plain JSON
+  (`{ kind, formatVersion, revision, document }`). Use it to keep a copy before a risky change
+  or to hand the document on, not to read it: the editor's own read tools are smaller and more
+  precise. It refuses very large documents and says so.
+- `load_<kind>_document` puts such a copy back. The document is checked first and nothing
+  changes when it does not fit. It is one undo step when the result says `undoable: true`.
+- `undo_<kind>` / `redo_<kind>` step through the editor's history. They fail with
+  "Nothing to undo." / "Nothing to redo." when there is nothing to step over.
+- With host storage: `save_<kind>_document` (by `name`; the same name replaces that copy),
+  `list_saved_<kind>_documents`, then `open_saved_<kind>_document` with a `key` from either.
+  Save when the user asks. Opening replaces the current document, so ask first when it has
+  changes the user has not saved.
+
+A read-only document keeps its read tools; its write tools fail with the reason. `revision`
+goes up on every change, so comparing two results tells you whether the document changed.
+
 ## Playback
 
 The host may act your calls out on screen (agent playback): your cursor glides to what a call

package/skills/pixerate-color/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: pixerate-color
+description: How to inspect colours, check and optimize WCAG contrast and accessibility, check palette distinctness across colour-vision deficiencies, generate harmonic color palettes, and blend colours across OKLab, OKLCH, and sRGB color spaces. Use when asked to evaluate contrast, choose accessible colours, create colour palettes, simulate colour blindness, or blend colours.
+---
+
+# Colour tools
+
+The colour module provides DOM-free colour tools for inspection, WCAG accessibility validation, colour-vision deficiency simulation, palette audits, colour harmony suggestions, and perceptual blending.
+
+## Working method
+
+1. **Inspect and convert.** Run `inspect_color` to parse any hex, `rgb()`, `hsl()`, `oklch()`, or CSS named colour into standard formats (hex, rgb, hsl, oklch) and relative luminance, and to check if it fits within the sRGB gamut.
+2. **Validate contrast.** Use `check_color_contrast` to compare text foreground against a background surface. It checks against WCAG 2 AA (4.5:1 regular, 3:1 large) and AAA (7:1 regular, 4.5:1 large). If AA contrast fails, it automatically calculates and suggests an adjusted lightness in OKLCH that preserves the hue and chroma while meeting accessibility standards.
+3. **Audit palettes.** For multi-colour sets (such as chart series, UI accents, or status tags), run `check_color_palette` with the array of colours. This checks mutual perceptual distinctness under normal vision as well as protanopia, deuteranopia, and tritanopia, and verifies adequate contrast against the background surface.
+4. **Harmonies and palettes.** Run `suggest_color_harmony` with a base colour and harmony kind (`complementary`, `split-complementary`, `analogous`, `triadic`, `tetradic`, `square`, or `monochromatic`) using either standard RGB or artistic RYB colour wheels.
+5. **Perceptual blending.** Run `blend_colors` to interpolate between two colours in OKLab, OKLCH, sRGB, or sRGB-linear. Pass a factor `t` (0..1) for a single midpoint, or `steps` (2..32) for an even ramp.
+6. **Design dual colours (light and dark mode).**
+   - Design the light mode colour.
+   - Run `derive_dual_color` with the app's real surfaces to automatically generate an accessible dark mode counterpart that matches contrast.
+   - Run `check_dual_color_contrast` for each text and background pair across both modes.
+   - Fix whichever mode fails using the suggested lightness.
+   - Run `export_dual_colors_css` to output clean CSS custom properties using `light-dark()`, `@media (prefers-color-scheme: dark)`, or `.dark` class rules.
+7. **Inspect and edit gradients.**
+   - Run `get_gradient` to inspect the active gradient model, CSS output, SVG def markup, and dual-colour status.
+   - Run `check_gradient` to audit for crowded stops, banding risk, out-of-gamut colours, and text contrast along the ramp.
+   - Run `list_gradient_presets` and `apply_gradient_preset` to quickly set tested gradient compositions.
+   - Modify gradient structure using `set_gradient`, `set_gradient_geometry`, `add_gradient_stop`, `update_gradient_stop`, `remove_gradient_stop`, `reverse_gradient`, or `distribute_gradient_stops`.
+
+## Best practices
+
+- **Accessibility first.** Always check text and icon contrast against the actual background surface. Use the suggested foreground colour when `passesAA` is false.
+- **Check both modes every time.** When authoring themes, verify contrast in both light and dark modes. Never assume dark mode passes just because light mode does.
+- **Don't simply invert lightness for brand colours.** When creating dark-mode variants, keep the hue and lower the chroma slightly rather than just inverting RGB channels.
+- **Perceptual spaces.** Use OKLab / OKLCH for interpolation and distance metrics to avoid muddy midpoints and hue shifts common in linear RGB or HSL blending.
+- **Palette distinctness.** In data visualizations and charts, ensure colours can be distinguished not only under normal vision but also under deuteranopia and protanopia.
+- **Alpha in contrast checks.** A translucent foreground is composited over the background, and a translucent background over white, before the ratio is taken. If the real backdrop behind a translucent background isn't white, pass the opaque colour the user actually sees.
+
+## Tool reference
+
+| Tool | When to use | Returns |
+| --- | --- | --- |
+| `inspect_color` | Inspects a colour string and converts between hex, rgb, hsl, and oklch, checking sRGB gamut and relative luminance | `{ hex, rgb, hsl, oklch, css, inSrgbGamut, relativeLuminance }` |
+| `check_color_contrast` | Evaluates WCAG 2 contrast ratio between foreground and background, returning AA/AAA pass status and an OKLCH lightness suggestion if failing | `{ ratio, level, passesAA, passesAAA, suggestion? }` |
+| `check_color_palette` | Audits an array of colours for pairwise distinctness across normal vision and CVD (protanopia, deuteranopia, tritanopia), and surface contrast | `{ ok, closest, contrast, issues, skipped }` |
+| `suggest_color_harmony` | Generates harmonic colour combinations on RGB or RYB colour wheels | `{ colors: [{ hex, angle }] }` |
+| `blend_colors` | Interpolates between two colours in OKLab, OKLCH, sRGB, or sRGB-linear at factor `t` or as an even `steps` ramp | `{ color }` or `{ colors }` |
+| `derive_dual_color` | Automatically derives the opposing scheme colour (light or dark) from a base colour, optionally preserving contrast against background surfaces | `{ light, dark, css, contrast: { light, dark } }` |
+| `check_dual_color_contrast` | Evaluates WCAG contrast compliance for a foreground and background dual colour across both light and dark modes, with suggestions | `{ light: { ratio, level }, dark: { ratio, level }, issues, suggestion? }` |
+| `export_dual_colors_css` | Generates CSS custom properties for dual colours using light-dark(), media queries, or darkSelector class | `{ css }` |
+| `get_gradient` | Returns the current gradient model, CSS string, SVG def, and dual status | `{ gradient, css, svgDef, isDual, selectedStopId, readOnly }` |
+| `check_gradient` | Audits gradient for crowded stops, banding risk, out-of-gamut colours, and text contrast | `{ pass, issueCount, issues }` |
+| `list_gradient_presets` | Returns the collection of built-in gradient presets | `{ presets: [{ id, name, category, css, gradient }] }` |
+| `set_gradient` | Replaces the entire gradient with a new gradient object or CSS string | `{ gradient, css }` |
+| `set_gradient_geometry` | Changes any of type, angle, center, shape, interpolation, repeating in one undo step; pass only the fields to change. Angle applies to linear and conic, center to radial and conic, shape to radial only; a field that doesn't fit the (new) type fails the whole call and changes nothing | `{ gradient, css }` |
+| `add_gradient_stop` | Adds a new color stop to the gradient ramp | `{ stop, gradient, css }` |
+| `update_gradient_stop` | Updates an existing stop's color, offset, or midpoint | `{ stop, gradient, css }` |
+| `remove_gradient_stop` | Removes a color stop by ID | `{ gradient, css }` |
+| `reverse_gradient` | Reverses the order and offsets of all stops | `{ gradient, css }` |
+| `distribute_gradient_stops` | Evenly distributes all color stops between 0 and 1 | `{ gradient, css }` |
+| `apply_gradient_preset` | Applies a built-in gradient preset by ID | `{ preset, gradient, css }` |
+
+## Pitfalls
+
+- **`light-dark()` requires `color-scheme`.** CSS `light-dark()` only resolves the dark colour when `color-scheme: light dark;` is set on the element or an ancestor (such as `:root`). Without `color-scheme`, browsers always render the light colour.
+- **JavaScript resolution required for non-CSS targets.** Canvas 2D, WebGL, SVG presentation attributes, and raster image exporters cannot read `light-dark()` strings; resolve them in JavaScript with `resolveColor(value, scheme)`.
+- **Gamut clipping.** Colours specified in wide-gamut spaces (e.g. high-chroma OKLCH) will be mapped into sRGB for hex representations. Check `inSrgbGamut` if exact fidelity is required.
+- **Large text thresholds.** WCAG allows 3:1 for large text (18pt / 24px or 14pt / 18.5px bold); pass `large: true` to avoid overly aggressive contrast suggestions.
+- **Geometry fields depend on the type.** To make a radial circle, send `type: "radial"` and `shape: "circle"` in the same `set_gradient_geometry` call; sending `shape` to a linear gradient is an error.
+- **Ramp steps bounds.** `blend_colors` requires `steps` to be between 2 and 32 when generating a ramp.

package/skills/pixerate-diagram/SKILL.md

@@ -111,6 +111,19 @@ text-only families.
 | `undo_diagram` | Undo the last diagram edit; returns its label. |
 | `redo_diagram` | Redo the last undone diagram edit. |
 
+### Save and open
+
+The host may add the shared document tools (see `pixerate-agent-tools`). A diagram document is
+`{ source }`: the Mermaid text with its `%% @pixerate` layout comment.
+
+| Tool | Use |
+| --- | --- |
+| `get_diagram_document` | Take a copy of the whole diagram as `{ kind, formatVersion, revision, document }` before a risky rewrite, or to hand it to another session. To read the diagram, use `get_diagram`. |
+| `load_diagram_document` | Put back a copy from `get_diagram_document` (its `document`, or the whole result). Checked first; one undo step (`undo_diagram` brings the previous diagram back). For new Mermaid text use `load_diagram_mermaid`. |
+| `save_diagram_document` | Save the diagram under a `name` in the host's storage (same name replaces that copy). Returns the `key`. Only listed when the host has storage. Save when the user asks, not after every edit. |
+| `list_saved_diagram_documents` | List saved diagrams (`key`, `name`, `savedAt`), newest first. |
+| `open_saved_diagram_document` | Replace the diagram with a saved one by `key` from the list. One undo step. Ask before opening over unsaved work the user has not saved. |
+
 ## Pitfalls
 
 - Ids are Mermaid ids, not labels. Always take them from `get_diagram` or from what a write

package/dist/chunk-45VRG4RB.js

@@ -1,65 +0,0 @@
-import {
-  hexToRgba,
-  normalizeTokenColor,
-  rgbaToHex
-} from "./chunk-2WPNAGHI.js";
-
-// src/animation/color.ts
-var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-var toGamma = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * Math.sign(c) * Math.abs(c) ** (1 / 2.4) - 0.055;
-function rgbToOklab(r, g, b, alpha = 1) {
-  const lr = toLinear(r);
-  const lg = toLinear(g);
-  const lb = toLinear(b);
-  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
-  return {
-    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
-    alpha
-  };
-}
-function oklabToRgb(color) {
-  const l_ = color.l + 0.3963377774 * color.a + 0.2158037573 * color.b;
-  const m_ = color.l - 0.1055613458 * color.a - 0.0638541728 * color.b;
-  const s_ = color.l - 0.0894841775 * color.a - 1.291485548 * color.b;
-  const l = l_ ** 3;
-  const m = m_ ** 3;
-  const s = s_ ** 3;
-  const clamp01 = (v) => Math.min(1, Math.max(0, v));
-  return {
-    r: clamp01(toGamma(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)),
-    g: clamp01(toGamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)),
-    b: clamp01(toGamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)),
-    a: clamp01(color.alpha)
-  };
-}
-function parseOklab(input) {
-  const hex = normalizeTokenColor(input);
-  if (hex === null) return null;
-  const c = hexToRgba(hex);
-  return rgbToOklab(c.r, c.g, c.b, c.a);
-}
-function formatOklab(color) {
-  const { r, g, b, a } = oklabToRgb(color);
-  return rgbaToHex(r, g, b, a);
-}
-function mixColorsOklab(from, to, t) {
-  const a = parseOklab(from);
-  const b = parseOklab(to);
-  if (!a || !b) return null;
-  const alpha = a.alpha + (b.alpha - a.alpha) * t;
-  const premul = (k) => a[k] * a.alpha + (b[k] * b.alpha - a[k] * a.alpha) * t;
-  if (alpha <= 1e-9) return formatOklab({ l: a.l + (b.l - a.l) * t, a: 0, b: 0, alpha: 0 });
-  return formatOklab({ l: premul("l") / alpha, a: premul("a") / alpha, b: premul("b") / alpha, alpha });
-}
-
-export {
-  rgbToOklab,
-  oklabToRgb,
-  parseOklab,
-  formatOklab,
-  mixColorsOklab
-};

package/dist/chunk-5FXOR7F2.cjs

@@ -1,65 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-var _chunkA6QWKBJPcjs = require('./chunk-A6QWKBJP.cjs');
-
-// src/animation/color.ts
-var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-var toGamma = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * Math.sign(c) * Math.abs(c) ** (1 / 2.4) - 0.055;
-function rgbToOklab(r, g, b, alpha = 1) {
-  const lr = toLinear(r);
-  const lg = toLinear(g);
-  const lb = toLinear(b);
-  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
-  return {
-    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
-    alpha
-  };
-}
-function oklabToRgb(color) {
-  const l_ = color.l + 0.3963377774 * color.a + 0.2158037573 * color.b;
-  const m_ = color.l - 0.1055613458 * color.a - 0.0638541728 * color.b;
-  const s_ = color.l - 0.0894841775 * color.a - 1.291485548 * color.b;
-  const l = l_ ** 3;
-  const m = m_ ** 3;
-  const s = s_ ** 3;
-  const clamp01 = (v) => Math.min(1, Math.max(0, v));
-  return {
-    r: clamp01(toGamma(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)),
-    g: clamp01(toGamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)),
-    b: clamp01(toGamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)),
-    a: clamp01(color.alpha)
-  };
-}
-function parseOklab(input) {
-  const hex = _chunkA6QWKBJPcjs.normalizeTokenColor.call(void 0, input);
-  if (hex === null) return null;
-  const c = _chunkA6QWKBJPcjs.hexToRgba.call(void 0, hex);
-  return rgbToOklab(c.r, c.g, c.b, c.a);
-}
-function formatOklab(color) {
-  const { r, g, b, a } = oklabToRgb(color);
-  return _chunkA6QWKBJPcjs.rgbaToHex.call(void 0, r, g, b, a);
-}
-function mixColorsOklab(from, to, t) {
-  const a = parseOklab(from);
-  const b = parseOklab(to);
-  if (!a || !b) return null;
-  const alpha = a.alpha + (b.alpha - a.alpha) * t;
-  const premul = (k) => a[k] * a.alpha + (b[k] * b.alpha - a[k] * a.alpha) * t;
-  if (alpha <= 1e-9) return formatOklab({ l: a.l + (b.l - a.l) * t, a: 0, b: 0, alpha: 0 });
-  return formatOklab({ l: premul("l") / alpha, a: premul("a") / alpha, b: premul("b") / alpha, alpha });
-}
-
-
-
-
-
-
-
-exports.rgbToOklab = rgbToOklab; exports.oklabToRgb = oklabToRgb; exports.parseOklab = parseOklab; exports.formatOklab = formatOklab; exports.mixColorsOklab = mixColorsOklab;