@kubohiroya/turbowarp-svg-text 0.2.1 → 0.4.0

package/README.md

@@ -1,112 +1,84 @@
 # TurboWarp SVG Text
 
-TurboWarp SVG Text provides responsive text with reusable named styles. The same style can be shared by say/think bubbles and SVG skins that turn a sprite itself into a text actor. Text remains proportional to the stage when its dimensions change.
+TurboWarp SVG Text provides responsive named styles and SVG text actors. It is a text provider for host extensions such as `turbowarp-bubble`; Bubble shape, placement, portraits, and animation belong to the host.
 
-See the [English guide](https://kubohiroya.github.io/turbowarp-svg-text/) or [Japanese guide](https://kubohiroya.github.io/turbowarp-svg-text/ja/) for usage and examples. The extension palette also opens the English guide through TurboWarp's `docsURI` feature.
+## Responsibilities
 
-## Features
+- Define reusable text styles for font, size, color, background, and alignment.
+- Create, replace, measure, and release SVG text skins.
+- Keep text actors proportional to the stage.
+- Restyle visible text actors when a named style changes.
 
-- Define background color, text color, font, relative font size, and left/center/right alignment under any style name.
-- Choose one of sixteen bubble directions, including the eight intermediate 22.5-degree positions.
-- Display say and think bubbles with a named style.
-- Replace the current sprite's skin with multiline SVG text using `set this sprite text`.
-- Apply the redefinable `default` style to standard say, think, and ask bubbles.
-- Convert literal `\n`, `\r\n`, and `\r` sequences in displayed strings into line breaks.
-- Immediately update visible bubbles and SVG text when a style is redefined or the stage size changes.
-- Keep legacy size-based say/think opcodes hidden but executable for saved-project compatibility.
-
-Animation is not included in version 0.1.0.
+This package does not provide `say` or `think` bubbles, bubble tails, actor-relative placement, portrait images, or bubble animation. Those responsibilities belong to the host package and its capabilities.
 
 ## Blocks
 
-### `define text style [STYLE] background [BACKGROUND] text [TEXT_COLOR] font [FONT] size [SIZE] align [ALIGN] bubble direction [DIRECTION]`
-
-Defines or replaces a named style. `ALIGN` accepts `left`, `center`, or `right`. `DIRECTION` accepts the following sixteen canonical values and their compass aliases; direction applies only to bubbles.
-
-| Canonical value    | Compass alias     |
-| ------------------ | ----------------- |
-| `up`               | `north`           |
-| `up-up-right`      | `north-northeast` |
-| `up-right`         | `northeast`       |
-| `right-up-right`   | `east-northeast`  |
-| `right`            | `east`            |
-| `right-down-right` | `east-southeast`  |
-| `down-right`       | `southeast`       |
-| `down-down-right`  | `south-southeast` |
-| `down`             | `south`           |
-| `down-down-left`   | `south-southwest` |
-| `down-left`        | `southwest`       |
-| `left-down-left`   | `west-southwest`  |
-| `left`             | `west`            |
-| `left-up-left`     | `west-northwest`  |
-| `up-left`          | `northwest`       |
-| `up-up-left`       | `north-northwest` |
-
-Direction input is trimmed and case-insensitive. Direction is measured from the actor center to the bubble body center. Changing the bubble width or height does not change the requested angle, although stage-edge clamping can move the bubble when necessary.
+### `define text style [STYLE] background [BACKGROUND] text [TEXT_COLOR] font [FONT] size [SIZE] align [ALIGN]`
 
-`DIRECTION` also accepts any number from `0` through `360` and uses Scratch sprite direction semantics: `0` is up, `90` is right, `180` is down, `270` is left, and `360` is up again. Values between the named directions are placed continuously without rounding to the nearest of the sixteen menu positions. Values outside this range fall back to the initial `up-right` direction.
-
-Redefining a name immediately redraws visible bubbles and SVG text actors that use it. Styles are runtime state, so projects should normally define them immediately after the green flag. A blank or unknown style name falls back to `default`.
+Defines or replaces a named text style. Alignment accepts `left`, `center`, or `right`. The background is the rectangle behind an SVG text actor; a host Bubble can define a transparent background and render its own outer shape.
 
 ### `set this sprite text [TEXT] with style [STYLE]`
 
-Creates an SVG skin and applies it to the current sprite's drawable, making the sprite itself a text actor. Background color, text color, font, size, and alignment come from the selected style. A string containing `\n` is rendered as multiple safely escaped SVG `<tspan>` elements.
-
-### `say [MESSAGE] with style [STYLE]`
+Creates an SVG skin and applies it to the current sprite's drawable. Newline characters render as separate lines. Reusing the same style name after redefinition redraws existing text actors.
 
-Displays a say bubble using the selected named style.
+## Composition API
 
-### `think [MESSAGE] with style [STYLE]`
+The composition API does not register the standalone extension. The host supplies a TurboWarp runtime and explicit targets.
 
-Displays a think bubble using the selected named style.
+```ts
+import { createSvgTextComposition } from "@kubohiroya/turbowarp-svg-text/composition";
 
-## Responsive sizing
+const svgText = createSvgTextComposition({ runtime: Scratch.vm.runtime });
 
-Size 100 is TurboWarp's default 14-pixel bubble font on a 480×360 stage. Bubbles and SVG text actors use the same formula:
+svgText.defineStyle({
+  name: "dialogue-text",
+  alignment: "left",
+  backgroundColor: "transparent",
+  font: "Noto Sans JP",
+  fontPercent: 100,
+  textColor: "#332200",
+});
 
-```text
-stageScale = min(stageWidth / 480, stageHeight / 360)
-fontSize = 14 × stageScale × styleSize / 100
-```
+svgText.setText({
+  styleName: "dialogue-text",
+  target,
+  text: "The End",
+});
 
-| Stage   | Style size | Font size |
-| ------- | ---------: | --------: |
-| 480×360 |        100 |      14px |
-| 960×720 |        100 |      28px |
-| 960×720 |        150 |      42px |
+const width = svgText.measureText({
+  styleName: "dialogue-text",
+  text: "The End",
+});
 
-Style sizes are clamped to 1–1000. A blank or non-finite value uses 100.
+svgText.releaseTarget(target);
+svgText.releaseAll();
+```
 
-## Usage
+`setText` creates or replaces the SVG skin owned by the composition. `measureText` returns the maximum measured line width in stage-relative pixels. `releaseTarget` and `releaseAll` destroy skins owned by the composition.
 
-Load the following URL as a TurboWarp custom extension and allow it to run unsandboxed:
+`SvgTextComposition` is intentionally suitable for a host Capability adapter:
 
-```text
-https://cdn.jsdelivr.net/npm/@kubohiroya/turbowarp-svg-text@0.1.0/dist/svg-text.js
+```ts
+interface TextCapability {
+  setText(input: {
+    styleName: string;
+    target: { drawableID: number };
+    text: string;
+  }): void;
+  measureText(input: { styleName: string; text: string }): number;
+  releaseTarget(target: { drawableID: number }): void;
+}
 ```
 
-```text
-define text style [narration] background [#fff4cc] text [#332200] font [Noto Sans JP] size [125] align [center] bubble direction [up]
-say [Once upon a time...\nIn a village by the sea...] with style [narration]
-set this sprite text [Act One\nUrashima Taro] with style [narration]
-```
+## Integration with TurboWarp Bubble
+
+`@kubohiroya/turbowarp-bubble` owns the Bubble outer shape, placement, portrait layers, and animation. It can use this package as its `BubbleTextCapability`, but the Bubble core does not depend on SVG Text itself.
 
 ## Development
 
-```bash
-corepack enable
-pnpm install --frozen-lockfile
+```sh
+pnpm install
 pnpm check
 ```
 
-The TypeScript source is built by `@kubohiroya/vite-plugin-turbowarp-extension` into a single `dist/svg-text.js` file. The build also generates `dist/extension-manifest.json` for saved-project API compatibility checks.
-
-## Compatibility and limitations
-
-The extension runs unsandboxed because it uses the TurboWarp VM and renderer. Bubble support feature-detects the `SAY` and `STAGE_SIZE_CHANGED` events, the `Scratch.looks` custom state, drawable positioning, and scratch-render's `TextBubbleSkin.setStyle()`. SVG text actors use `createSVGSkin`, `updateDrawableSkinId`, and `destroySkin`.
-
-If compatible private drawing hooks are unavailable, center/right bubble alignment falls back to left alignment. If drawable positioning is unavailable, TurboWarp's standard bubble placement is retained. `setText` reports an explicit error when SVG skin APIs are unavailable. Standard Scratch Looks continues to handle bubble stopping, replacement, target tracking, the 330-character limit, and number formatting.
-
-## License
-
-MPL-2.0
+The package is distributed under MPL-2.0. See `LICENSE` for the source code terms.

package/dist/composition.js

@@ -0,0 +1,424 @@
+var block_definitions_default = {
+	extensionName: "SVG Text",
+	blocks: [{
+		"opcode": "defineStyle",
+		"blockType": "COMMAND",
+		"text": "define text style [STYLE] background [BACKGROUND] text [TEXT_COLOR] font [FONT] size [SIZE] align [ALIGN]",
+		"description": "Defines or replaces a named text style for SVG text actors. Bubble shape and placement are owned by the host Bubble layer.",
+		"arguments": {
+			"STYLE": {
+				"type": "STRING",
+				"defaultValue": "default"
+			},
+			"BACKGROUND": {
+				"type": "COLOR",
+				"defaultValue": "#ffffff"
+			},
+			"TEXT_COLOR": {
+				"type": "COLOR",
+				"defaultValue": "#575e75"
+			},
+			"FONT": {
+				"type": "STRING",
+				"defaultValue": "Helvetica"
+			},
+			"SIZE": {
+				"type": "NUMBER",
+				"defaultValue": 100
+			},
+			"ALIGN": {
+				"type": "STRING",
+				"defaultValue": "left",
+				"menu": "alignment"
+			}
+		}
+	}, {
+		"opcode": "setText",
+		"blockType": "COMMAND",
+		"text": "set this sprite text [TEXT] with style [STYLE]",
+		"description": "Replaces this sprite's skin with responsive styled SVG text.",
+		"arguments": {
+			"TEXT": {
+				"type": "STRING",
+				"defaultValue": "Title\\nSubtitle"
+			},
+			"STYLE": {
+				"type": "STRING",
+				"defaultValue": "default"
+			}
+		}
+	}],
+	menus: { "alignment": {
+		"acceptReporters": true,
+		"items": [
+			"left",
+			"center",
+			"right"
+		]
+	} }
+};
+//#endregion
+//#region src/config.ts
+var extensionConfig = {
+	id: "kubohiroyasvgtext",
+	slug: "svg-text",
+	name: "SVG Text",
+	description: "Responsive named-style SVG text actors for TurboWarp.",
+	author: "Hiroya Kubo",
+	license: "MPL-2.0",
+	unsandboxed: true
+};
+//#endregion
+//#region src/extension.ts
+var blockDefinitions = block_definitions_default.blocks;
+var definitionMenus = block_definitions_default.menus;
+var EXTENSION_DOCS_URI = "https://kubohiroya.github.io/turbowarp-svg-text/";
+var defaultStyleName$1 = "default";
+var defaultFontPercent = 100;
+var minimumFontPercent = 1;
+var maximumFontPercent = 1e3;
+var maximumFontNameLength = 128;
+var baseStageWidth = 480;
+var baseStageHeight = 360;
+var textStyle = {
+	fontSize: 14,
+	lineHeight: 16,
+	padding: 12,
+	cornerRadius: 8
+};
+var initialDefaultStyle = {
+	alignment: "left",
+	backgroundColor: "#ffffff",
+	font: "Helvetica",
+	fontPercent: defaultFontPercent,
+	textColor: "#575e75"
+};
+var SvgTextExtension = class {
+	constructor(runtime = Scratch.vm?.runtime, options = {}) {
+		this.styles = /* @__PURE__ */ new Map([[defaultStyleName$1, initialDefaultStyle]]);
+		this.textActors = /* @__PURE__ */ new Map();
+		if (!runtime) throw new Error("SVG Text requires the TurboWarp VM.");
+		this.runtime = runtime;
+		this.castToString = options.castToString ?? Scratch.Cast.toString;
+		if (options.listenForRuntimeEvents ?? true) this.runtime.on("STAGE_SIZE_CHANGED", () => {
+			this.restyleTextActors();
+		});
+	}
+	getInfo() {
+		return {
+			id: extensionConfig.id,
+			name: Scratch.translate(block_definitions_default.extensionName),
+			docsURI: EXTENSION_DOCS_URI,
+			color1: "#9966ff",
+			blocks: blockDefinitions.map((block) => this.toScratchBlock(block)),
+			menus: definitionMenus
+		};
+	}
+	defineStyle(args) {
+		const styleName = this.normalizeStyleName(args.STYLE);
+		this.styles.set(styleName, {
+			alignment: this.normalizeAlignment(args.ALIGN),
+			backgroundColor: this.normalizeColor(args.BACKGROUND, initialDefaultStyle.backgroundColor),
+			font: this.normalizeFont(args.FONT),
+			fontPercent: this.normalizeFontPercent(args.SIZE),
+			textColor: this.normalizeColor(args.TEXT_COLOR, initialDefaultStyle.textColor)
+		});
+		this.restyleTextActors(styleName);
+	}
+	setText(args, util) {
+		this.applyTextActor(util.target, this.normalizeMessage(args.TEXT), this.resolveStyle(args.STYLE));
+	}
+	measureText(styleName, text) {
+		const selection = this.resolveStyle(styleName);
+		const normalizedText = this.normalizeMessage(text);
+		const stageScale = this.getStageScale();
+		const fontSize = textStyle.fontSize * stageScale * (selection.definition.fontPercent / defaultFontPercent);
+		return Math.max(0, ...normalizedText.split("\n").map((line) => this.measureTextWidth(line, fontSize)));
+	}
+	releaseTextActor(target) {
+		const state = this.textActors.get(target);
+		if (!state) return false;
+		this.textActors.delete(target);
+		this.runtime.renderer?.destroySkin?.(state.skinId);
+		this.runtime.requestRedraw?.();
+		return true;
+	}
+	toScratchBlock(block) {
+		return {
+			opcode: block.opcode,
+			blockType: Scratch.BlockType[block.blockType],
+			text: Scratch.translate(block.text),
+			hideFromPalette: block.hideFromPalette ?? false,
+			arguments: Object.fromEntries(Object.entries(block.arguments).map(([name, argument]) => [name, {
+				type: Scratch.ArgumentType[argument.type],
+				defaultValue: argument.defaultValue,
+				...argument.menu === void 0 ? {} : { menu: argument.menu }
+			}]))
+		};
+	}
+	normalizeStyleName(value) {
+		return this.castToString(value).trim() || defaultStyleName$1;
+	}
+	normalizeFontPercent(value) {
+		if (typeof value === "string" && value.trim() === "") return defaultFontPercent;
+		const numericValue = Number(value);
+		if (!Number.isFinite(numericValue)) return defaultFontPercent;
+		return Math.min(maximumFontPercent, Math.max(minimumFontPercent, numericValue));
+	}
+	normalizeMessage(value) {
+		return this.castToString(value).replace(/\\r\\n|\\n|\\r/gu, "\n");
+	}
+	normalizeAlignment(value) {
+		const alignment = this.castToString(value).trim().toLowerCase();
+		if (alignment === "center" || alignment === "right") return alignment;
+		return "left";
+	}
+	normalizeColor(value, fallback) {
+		const color = this.castToString(value).trim();
+		if (color === "") return fallback;
+		if (color.toLowerCase() === "transparent") return color;
+		if (/^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/iu.test(color)) return color;
+		if (globalThis.CSS?.supports?.("color", color)) return color;
+		return fallback;
+	}
+	normalizeFont(value) {
+		const font = this.castToString(value).trim();
+		const hasUnsafeCharacter = [...font].some((character) => {
+			const codePoint = character.codePointAt(0) ?? 0;
+			return codePoint <= 31 || codePoint === 127 || ",;{}".includes(character);
+		});
+		if (font === "" || font.length > maximumFontNameLength || hasUnsafeCharacter) return initialDefaultStyle.font;
+		return font;
+	}
+	getStageScale() {
+		const nativeSize = this.runtime.renderer?.getNativeSize?.();
+		if (!Array.isArray(nativeSize) || nativeSize.length < 2) return 1;
+		const width = Number(nativeSize[0]);
+		const height = Number(nativeSize[1]);
+		if (!(width > 0) || !(height > 0)) return 1;
+		return Math.min(width / baseStageWidth, height / baseStageHeight);
+	}
+	createTextActorSvg(text, definition) {
+		const stageScale = this.getStageScale();
+		const fontScale = stageScale * (definition.fontPercent / defaultFontPercent);
+		const fontSize = textStyle.fontSize * fontScale;
+		const lineHeight = textStyle.lineHeight * fontScale;
+		const padding = textStyle.padding * stageScale;
+		const cornerRadius = textStyle.cornerRadius * stageScale;
+		const lines = text.split("\n");
+		const contentWidth = Math.max(1, ...lines.map((line) => this.measureTextWidth(line, fontSize)));
+		const width = Math.max(1, Math.ceil(contentWidth + padding * 2));
+		const height = Math.max(1, Math.ceil(lineHeight * lines.length + padding * 2));
+		const textAnchor = definition.alignment === "center" ? "middle" : definition.alignment === "right" ? "end" : "start";
+		const x = definition.alignment === "center" ? width / 2 : definition.alignment === "right" ? width - padding : padding;
+		const title = this.escapeXml(text);
+		const tspans = lines.map((line, index) => {
+			const y = padding + fontSize + lineHeight * index;
+			return `<tspan x="${this.formatSvgNumber(x)}" y="${this.formatSvgNumber(y)}">${this.escapeXml(line)}</tspan>`;
+		}).join("");
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img"><title>${title}</title><rect width="${width}" height="${height}" rx="${this.formatSvgNumber(cornerRadius)}" fill="${this.escapeXml(definition.backgroundColor)}"/><text xml:space="preserve" fill="${this.escapeXml(definition.textColor)}" font-family="${this.escapeXml(definition.font)}" font-size="${this.formatSvgNumber(fontSize)}" text-anchor="${textAnchor}">${tspans}</text></svg>`;
+	}
+	measureTextWidth(text, fontSize) {
+		let units = 0;
+		for (const character of text) {
+			if (/\p{Mark}/u.test(character)) continue;
+			if (/\s/u.test(character)) {
+				units += .35;
+				continue;
+			}
+			const codePoint = character.codePointAt(0) ?? 0;
+			units += codePoint <= 127 ? .62 : 1;
+		}
+		return units * fontSize;
+	}
+	escapeXml(value) {
+		return value.replace(/[&<>"']/gu, (character) => {
+			switch (character) {
+				case "&": return "&amp;";
+				case "<": return "&lt;";
+				case ">": return "&gt;";
+				case "\"": return "&quot;";
+				default: return "&apos;";
+			}
+		});
+	}
+	formatSvgNumber(value) {
+		return String(Math.round(value * 1e3) / 1e3);
+	}
+	applyTextActor(target, text, selection) {
+		const renderer = this.runtime.renderer;
+		if (typeof target.drawableID !== "number" || typeof renderer?.createSVGSkin !== "function" || typeof renderer.updateDrawableSkinId !== "function") throw new Error("SVG Text requires SVG skin APIs from TurboWarp.");
+		const skinId = renderer.createSVGSkin(this.createTextActorSvg(text, selection.definition));
+		if (!Number.isInteger(skinId) || skinId < 0) throw new Error("TurboWarp did not create an SVG text skin.");
+		try {
+			renderer.updateDrawableSkinId(target.drawableID, skinId);
+		} catch (error) {
+			renderer.destroySkin?.(skinId);
+			throw error;
+		}
+		const previous = this.textActors.get(target);
+		this.textActors.set(target, {
+			skinId,
+			styleName: selection.styleName,
+			text
+		});
+		if (previous && previous.skinId !== skinId) renderer.destroySkin?.(previous.skinId);
+		this.runtime.requestRedraw?.();
+	}
+	resolveStyle(value) {
+		const requestedName = this.normalizeStyleName(value);
+		const definition = this.styles.get(requestedName);
+		if (definition) return {
+			definition,
+			styleName: requestedName
+		};
+		return {
+			definition: this.styles.get(defaultStyleName$1) ?? initialDefaultStyle,
+			styleName: defaultStyleName$1
+		};
+	}
+	restyleTextActors(styleName) {
+		for (const [target, state] of [...this.textActors]) {
+			if (styleName !== void 0 && state.styleName !== styleName) continue;
+			this.applyTextActor(target, state.text, this.resolveStyle(state.styleName));
+		}
+	}
+};
+//#endregion
+//#region src/composition.ts
+var defaultStyleName = "default";
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function compositionError(code, message) {
+	const error = new Error(message);
+	Object.defineProperty(error, "code", { value: code });
+	return error;
+}
+function requireExactKeys(value, required, optional, label) {
+	const allowed = /* @__PURE__ */ new Set([...required, ...optional]);
+	if (required.some((key) => !Object.prototype.hasOwnProperty.call(value, key)) || Object.keys(value).some((key) => !allowed.has(key))) throw compositionError("SVG-TEXT-COMPOSITION-001", `${label} has missing or unknown properties.`);
+}
+function requireName(value, label) {
+	if (typeof value !== "string" || value.trim().length === 0) throw compositionError("SVG-TEXT-COMPOSITION-001", `${label} must be a non-empty string.`);
+	return value.trim();
+}
+function validateRuntime(value) {
+	if (!isRecord(value) || !isRecord(value.renderer)) throw new TypeError("SVG Text composition runtime must provide a renderer.");
+	const renderer = value.renderer;
+	const methods = [
+		"createSVGSkin",
+		"destroySkin",
+		"updateDrawableSkinId"
+	];
+	if (methods.some((method) => typeof renderer[method] !== "function")) throw new TypeError(`SVG Text composition renderer must provide ${methods.join(", ")}.`);
+	if (value.requestRedraw !== void 0 && typeof value.requestRedraw !== "function") throw new TypeError("SVG Text composition requestRedraw must be a function.");
+	return value;
+}
+function validateTarget(value) {
+	if (!isRecord(value) || typeof value.drawableID !== "number" || !Number.isInteger(value.drawableID) || value.drawableID < 0) throw compositionError("SVG-TEXT-COMPOSITION-002", "SVG Text target must provide a non-negative integer drawableID.");
+	return value;
+}
+function validateOptionalString(value, label) {
+	if (value !== void 0 && (typeof value !== "string" || value.length === 0)) throw compositionError("SVG-TEXT-COMPOSITION-001", `${label} must be a non-empty string when provided.`);
+}
+function validateStyle(value) {
+	if (!isRecord(value)) throw compositionError("SVG-TEXT-COMPOSITION-001", "SVG Text style must be an object.");
+	requireExactKeys(value, ["name"], [
+		"alignment",
+		"backgroundColor",
+		"font",
+		"fontPercent",
+		"textColor"
+	], "SVG Text style");
+	const name = requireName(value.name, "SVG Text style name");
+	if (value.alignment !== void 0 && value.alignment !== "left" && value.alignment !== "center" && value.alignment !== "right") throw compositionError("SVG-TEXT-COMPOSITION-001", "SVG Text alignment is invalid.");
+	validateOptionalString(value.backgroundColor, "SVG Text backgroundColor");
+	validateOptionalString(value.font, "SVG Text font");
+	validateOptionalString(value.textColor, "SVG Text textColor");
+	if (value.fontPercent !== void 0 && (typeof value.fontPercent !== "number" || !Number.isFinite(value.fontPercent) || value.fontPercent < 1 || value.fontPercent > 1e3)) throw compositionError("SVG-TEXT-COMPOSITION-001", "SVG Text fontPercent must be a finite number from 1 to 1000.");
+	return {
+		...value,
+		name
+	};
+}
+function createSvgTextComposition(options) {
+	if (!isRecord(options)) throw new TypeError("SVG Text composition options must be an object.");
+	const extension = new SvgTextExtension(validateRuntime(options.runtime), {
+		castToString: (value) => String(value),
+		listenForRuntimeEvents: false
+	});
+	const styles = /* @__PURE__ */ new Set([defaultStyleName]);
+	const targets = /* @__PURE__ */ new Set();
+	let disposed = false;
+	function ensureActive() {
+		if (disposed) throw compositionError("SVG-TEXT-COMPOSITION-004", "SVG Text composition has been released.");
+	}
+	return Object.freeze({
+		defineStyle(input) {
+			ensureActive();
+			const style = validateStyle(input);
+			extension.defineStyle({
+				ALIGN: style.alignment ?? "",
+				BACKGROUND: style.backgroundColor ?? "",
+				FONT: style.font ?? "",
+				SIZE: style.fontPercent ?? "",
+				STYLE: style.name,
+				TEXT_COLOR: style.textColor ?? ""
+			});
+			styles.add(style.name);
+		},
+		measureText(input) {
+			ensureActive();
+			if (!isRecord(input)) throw compositionError("SVG-TEXT-COMPOSITION-001", "SVG Text measure input is invalid.");
+			requireExactKeys(input, ["styleName", "text"], [], "SVG Text measure input");
+			const styleName = requireName(input.styleName, "SVG Text styleName");
+			if (!styles.has(styleName)) throw compositionError("SVG-TEXT-COMPOSITION-003", `SVG Text style is not defined: ${styleName}`);
+			if (typeof input.text !== "string") throw compositionError("SVG-TEXT-COMPOSITION-001", "SVG Text text must be a string.");
+			return extension.measureText(styleName, input.text);
+		},
+		setText(input) {
+			ensureActive();
+			if (!isRecord(input)) throw compositionError("SVG-TEXT-COMPOSITION-001", "SVG Text actor input is invalid.");
+			requireExactKeys(input, [
+				"styleName",
+				"target",
+				"text"
+			], [], "SVG Text actor input");
+			const target = validateTarget(input.target);
+			const styleName = requireName(input.styleName, "SVG Text styleName");
+			if (!styles.has(styleName)) throw compositionError("SVG-TEXT-COMPOSITION-003", `SVG Text style is not defined: ${styleName}`);
+			if (typeof input.text !== "string") throw compositionError("SVG-TEXT-COMPOSITION-001", "SVG Text text must be a string.");
+			extension.setText({
+				STYLE: styleName,
+				TEXT: input.text
+			}, { target });
+			targets.add(target);
+		},
+		releaseTarget(value) {
+			ensureActive();
+			const target = validateTarget(value);
+			if (!targets.delete(target)) throw compositionError("SVG-TEXT-COMPOSITION-005", "SVG Text target is not owned by this composition.");
+			if (!extension.releaseTextActor(target)) throw compositionError("SVG-TEXT-COMPOSITION-005", "SVG Text target ownership is inconsistent.");
+		},
+		releaseAll() {
+			if (disposed) return;
+			disposed = true;
+			const errors = [];
+			for (const target of targets) try {
+				extension.releaseTextActor(target);
+			} catch (error) {
+				errors.push(error);
+			}
+			targets.clear();
+			styles.clear();
+			if (errors.length > 0) {
+				const error = compositionError("SVG-TEXT-COMPOSITION-006", "SVG Text composition failed to release one or more skins.");
+				Object.defineProperty(error, "errors", { value: Object.freeze([...errors]) });
+				throw error;
+			}
+		}
+	});
+}
+//#endregion
+export { createSvgTextComposition };

package/dist/extension-manifest.json

@@ -15,11 +15,6 @@
           "id": "BACKGROUND",
           "type": "COLOR"
         },
-        {
-          "id": "DIRECTION",
-          "type": "STRING",
-          "menu": "direction"
-        },
         {
           "id": "FONT",
           "type": "STRING"
@@ -38,34 +33,6 @@
         }
       ]
     },
-    {
-      "opcode": "say",
-      "blockType": "COMMAND",
-      "arguments": [
-        {
-          "id": "MESSAGE",
-          "type": "STRING"
-        },
-        {
-          "id": "SIZE",
-          "type": "NUMBER"
-        }
-      ]
-    },
-    {
-      "opcode": "sayWithStyle",
-      "blockType": "COMMAND",
-      "arguments": [
-        {
-          "id": "MESSAGE",
-          "type": "STRING"
-        },
-        {
-          "id": "STYLE",
-          "type": "STRING"
-        }
-      ]
-    },
     {
       "opcode": "setText",
       "blockType": "COMMAND",
@@ -79,44 +46,12 @@
           "type": "STRING"
         }
       ]
-    },
-    {
-      "opcode": "think",
-      "blockType": "COMMAND",
-      "arguments": [
-        {
-          "id": "MESSAGE",
-          "type": "STRING"
-        },
-        {
-          "id": "SIZE",
-          "type": "NUMBER"
-        }
-      ]
-    },
-    {
-      "opcode": "thinkWithStyle",
-      "blockType": "COMMAND",
-      "arguments": [
-        {
-          "id": "MESSAGE",
-          "type": "STRING"
-        },
-        {
-          "id": "STYLE",
-          "type": "STRING"
-        }
-      ]
     }
   ],
   "menus": [
     {
       "id": "alignment",
       "acceptReporters": true
-    },
-    {
-      "id": "direction",
-      "acceptReporters": true
     }
   ]
 }