@pixerate/flair 0.2.0 → 0.4.0

package/dist/editor/index.d.ts

@@ -1,11 +1,11 @@
-import { V as VectorControl, c as EffectPreset, E as EffectDefinition } from '../types-CkKkavvB.js';
-import { C as ControlValue, a as ControlDef, b as ControlType } from '../controls-DdXMbovi.js';
+import { d as VectorControl, c as EffectPreset, E as EffectDefinition } from '../types-CsFUZZIv.js';
+import { C as ControlValue, a as ControlDef, b as ControlType } from '../controls-Syr6drzO.js';
 import { S as SvgMotion } from '../motion-D0TVv2CF.js';
 import { AnimationEasingPreset, AnimationEasing, AnimationTrack, AnimationKeyframe, cubicBezierAt as cubicBezierAt$1, evaluateEasing as evaluateEasing$1 } from '@pixerate/editor/animation';
 export { CubicBezierEasing, SpringEasing } from '@pixerate/editor/animation';
 import { CommandRegistry, CommandSpec } from '@pixerate/editor/commands';
 import { HistoryManager, HistoryState } from '@pixerate/editor/history';
-import { C as CompileError, a as CompileStatus } from '../renderer-Oyynz-fs.js';
+import { C as CompileError, a as CompileStatus } from '../renderer-DtnFkpkf.js';
 import { C as Clock } from '../clock-BhdXWH-n.js';
 import { AgentToolProvider, McpToolResult, ToolRegistryOptions, ToolRegistry, McpToolDefinition } from '@pixerate/editor/tools';
 import { ParameterImageOption, ParametersController, ParameterField, ParameterSchema, ParameterValue, ParameterValues } from '@pixerate/editor/parameters';
@@ -62,14 +62,18 @@ declare function keyframeTimes(tracks: Record<string, Track>): number[];
  * diffed, and written by an agent.
  */
 
-/** What is being edited: a fragment shader, or an animated SVG with declared controls. */
+/**
+ * What is being edited: a fragment shader, or an animated SVG. Both declare
+ * their controls in themselves (`// @control`, `{{name: type …}}`); a vector
+ * effect's optional `controls` list is for pictures written before that.
+ */
 type EffectSource = {
     kind: "shader";
     source: string;
 } | {
     kind: "vector";
     motion: SvgMotion;
-    controls: VectorControl[];
+    controls?: VectorControl[];
     hold?: number;
 };
 interface EffectDocument {
@@ -208,7 +212,7 @@ declare class EffectEditor {
     rename(name: string): EditResult;
     /** Replaces a shader's source. Compile errors arrive later, from the renderer (see `reportCompile`). */
     setSource(source: string): EditResult;
-    /** Replaces a vector effect's picture (and optionally its controls). */
+    /** Replaces a vector effect's picture, whose `{{name: type …}}` placeholders declare its controls (and optionally a `controls` list). */
     setMotion(motion: SvgMotion, controls?: Extract<EffectDocument["effect"], {
         kind: "vector";
     }>["controls"]): EditResult;
@@ -224,7 +228,7 @@ declare class EffectEditor {
     setValues(values: Record<string, unknown>): EditResult;
     /** Back to defaults: the named controls, or all of them (values only; tracks stay). */
     resetValues(names?: readonly string[]): EditResult;
-    /** Random values in each control's range (colours anywhere), for exploring. */
+    /** Random values in each control's range (colours anywhere), for exploring. Images and text keep theirs. */
     randomize(names?: readonly string[], random?: () => number): EditResult;
     applyPreset(name: string): EditResult;
     /** Saves the current values (all, or the named ones) as a preset, replacing one of the same name. */
@@ -333,8 +337,8 @@ declare function describeEditor(editor: EffectEditor): {
         canUndo: boolean;
         canRedo: boolean;
     };
+    vectorControls?: VectorControl[] | undefined;
     motion: SvgMotion;
-    vectorControls: VectorControl[];
     name: string;
     basedOn: string | undefined;
     kind: "shader" | "vector";

package/dist/editor/index.js

@@ -3,8 +3,9 @@ import {
   findEffects,
   getEffect,
   renderVectorEffect,
-  vectorControlDef
-} from "../chunk-MWVTQFV5.js";
+  vectorControlIssues,
+  vectorEffectControls
+} from "../chunk-IWKM5FJK.js";
 import {
   svgMotionIssues,
   svgView
@@ -12,7 +13,7 @@ import {
 import {
   BUILTIN_UNIFORMS,
   interpolateOklab
-} from "../chunk-HKXOHRCD.js";
+} from "../chunk-VA74HBPK.js";
 import "../chunk-EHDJ3CPJ.js";
 import {
   realClock
@@ -21,7 +22,7 @@ import {
   checkControlValue,
   controlValue,
   parseControls
-} from "../chunk-J55UBNAT.js";
+} from "../chunk-WC3VADZC.js";
 
 // src/editor/timeline.ts
 import {
@@ -98,7 +99,12 @@ function createEffectDocument(from) {
     version: 1,
     name: effect.name,
     basedOn: effect.id,
-    effect: effect.kind === "shader" ? { kind: "shader", source: effect.source } : { kind: "vector", motion: structuredClone(effect.motion), controls: effect.controls.map((c) => ({ ...c })), hold: effect.hold },
+    effect: effect.kind === "shader" ? { kind: "shader", source: effect.source } : {
+      kind: "vector",
+      motion: structuredClone(effect.motion),
+      ...effect.controls && { controls: effect.controls.map((c) => ({ ...c })) },
+      hold: effect.hold
+    },
     values: {},
     tracks: {},
     duration: effect.kind === "shader" && effect.loop ? Math.round(effect.loop * 1e3) : DEFAULT_DURATION,
@@ -111,7 +117,7 @@ function blankDocument(name, source) {
 }
 function documentControls(doc) {
   if (doc.effect.kind === "shader") return parseControls(doc.effect.source);
-  return doc.effect.controls.map((c, i) => vectorControlDef(c, i + 1));
+  return vectorEffectControls(doc.effect);
 }
 function valuesAt(doc, time, controls = documentControls(doc)) {
   const out = {};
@@ -151,7 +157,7 @@ function documentIssues(doc) {
   for (const preset of doc.presets) for (const [name, value] of Object.entries(preset.values)) check(`preset "${preset.name}"`, name, value);
   if (doc.effect.kind === "vector") {
     const motion = motionAt(doc, 0);
-    issues.push(...svgMotionIssues(motion));
+    issues.push(...vectorControlIssues(doc.effect.motion), ...svgMotionIssues(motion));
     if (/\{\{[^}]+\}\}/.test(JSON.stringify(motion))) issues.push("the picture has placeholders no control fills");
   }
   return issues;
@@ -175,7 +181,7 @@ function parseEffectDocument(input) {
   else if (effect.kind === "vector") {
     const v = effect;
     if (!v.motion || typeof v.motion.svg !== "string") errors.push("`effect.motion.svg` must be a string");
-    if (!Array.isArray(v.controls)) errors.push("`effect.controls` must be a list");
+    if (v.controls !== void 0 && !Array.isArray(v.controls)) errors.push("`effect.controls` must be a list");
   }
   const isRecord = (v) => !!v && typeof v === "object" && !Array.isArray(v);
   if (o.values !== void 0 && !isRecord(o.values)) errors.push("`values` must be an object");
@@ -216,7 +222,7 @@ var easingSchema = {
   description: `An easing preset (${EASING_PRESETS.join(", ")}) or {"type":"cubic-bezier","x1","y1","x2","y2"} or {"type":"spring","stiffness","damping","mass"}.`
 };
 var valueSchema = {
-  description: 'A control value: a number (float, int), true/false (bool), an array of numbers (vec2\u2013vec4; colours 0\u20131), a "#RRGGBB" colour, or an image URL (sampler2D).'
+  description: 'A control value: a number (float, int), true/false (bool), an array of numbers (vec2\u2013vec4; colours 0\u20131), a "#RRGGBB" colour, an image URL (sampler2D), or a string (text).'
 };
 function describeEditor(editor) {
   const state = editor.getState();
@@ -225,13 +231,13 @@ function describeEditor(editor) {
     name: doc.name,
     basedOn: doc.basedOn,
     kind: doc.effect.kind,
-    ...doc.effect.kind === "shader" ? { source: doc.effect.source } : { motion: doc.effect.motion, vectorControls: doc.effect.controls },
+    ...doc.effect.kind === "shader" ? { source: doc.effect.source } : { motion: doc.effect.motion, ...doc.effect.controls && { vectorControls: doc.effect.controls } },
     controls: state.controls.map((c) => ({
       name: c.name,
       type: c.type,
       label: c.label,
       ...c.color && { color: true },
-      ...c.type !== "bool" && c.type !== "sampler2D" && { min: c.min, max: c.max, step: c.step },
+      ...c.type !== "bool" && c.type !== "sampler2D" && c.type !== "text" && { min: c.min, max: c.max, step: c.step },
       default: c.default
     })),
     values: state.values,
@@ -575,7 +581,7 @@ var EffectEditor = class {
     this.commit("Edit source", { ...this.doc, effect: { kind: "shader", source } }, "source");
     return ok;
   }
-  /** Replaces a vector effect's picture (and optionally its controls). */
+  /** Replaces a vector effect's picture, whose `{{name: type …}}` placeholders declare its controls (and optionally a `controls` list). */
   setMotion(motion, controls) {
     if (this.doc.effect.kind !== "vector") return fail("This is a shader effect; use setSource.");
     this.commit("Edit picture", { ...this.doc, effect: { ...this.doc.effect, motion, controls: controls ?? this.doc.effect.controls } });
@@ -626,17 +632,17 @@ var EffectEditor = class {
     this.commit("Reset values", { ...this.doc, values });
     return ok;
   }
-  /** Random values in each control's range (colours anywhere), for exploring. */
+  /** Random values in each control's range (colours anywhere), for exploring. Images and text keep theirs. */
   randomize(names, random = Math.random) {
     const values = {};
     for (const control of this.controls) {
-      if (names ? !names.includes(control.name) : control.type === "sampler2D") continue;
+      if (names ? !names.includes(control.name) : control.type === "sampler2D" || control.type === "text") continue;
       const pick = () => {
         const v = control.min + random() * (control.max - control.min);
         return control.type === "int" ? Math.round(v) : +v.toFixed(3);
       };
       if (control.type === "bool") values[control.name] = random() < 0.5;
-      else if (control.type === "sampler2D") continue;
+      else if (control.type === "sampler2D" || control.type === "text") continue;
       else if (control.color) values[control.name] = Array.from({ length: control.type === "vec4" ? 4 : 3 }, () => +random().toFixed(3));
       else if (control.type === "float" || control.type === "int") values[control.name] = pick();
       else values[control.name] = Array.from({ length: Number(control.type.slice(3)) }, pick);
@@ -921,7 +927,9 @@ Shader effects are GLSL ES 3.00 fragment shaders written Shadertoy-style:
 - Write float literals with a decimal point (1.0, not 1); GLSL does not convert int to float implicitly. Use \`texture()\`, not \`texture2D()\`.
 - After \`effect.setSource\`, call \`effect.describe\` and read \`compile\`: fix any errors (their line numbers match your source) before going on.
 
-Vector effects are animated SVG pictures: change their controls' values; their picture is edited with care, keeping element ids that animations refer to.
+Vector effects are animated SVG pictures that declare their controls in themselves, like shader uniforms: the first \`{{name: type \u2026}}\` declares a control (types: float, int, bool, color, text; attributes as for \`@control\`, values with spaces in single quotes), and every \`{{name}}\` is replaced by its value, e.g.
+  <!-- {{title: text default='Hello' label='Title'}} {{accent: color default=#6366F1}} --><text fill="{{accent}}">{{title}}</text>
+Change their controls' values freely (a text control takes any words); edit the picture with care, keeping element ids that animations refer to.
 
 Make effects that loop smoothly and read well behind content: keep motion calm unless asked otherwise, keep contrast where text may sit, and expose the few controls a designer would actually want (colours, speed, scale, intensity) with sensible ranges. Use keyframes (\`keyframe.set\`, in ms) for changes over the timeline. When you can, look at the result with \`view_effect\` and refine it.`;
 
@@ -986,6 +994,8 @@ function parameterFieldFor(control, options = {}) {
       return { ...base, type: "number", min: control.min, max: control.max, step: control.step, default: Number(control.default) };
     case "sampler2D":
       return { ...base, type: "image", default: String(control.default), ...options.images && { options: options.images } };
+    case "text":
+      return { ...base, type: "text", default: String(control.default) };
     default: {
       const value = control.default;
       if (control.color) {