@kubohiroya/turbowarp-svg-text 0.1.0

package/LICENSE

@@ -0,0 +1,5 @@
+Mozilla Public License Version 2.0
+
+This project is licensed under the Mozilla Public License, version 2.0.
+The full license text is available at https://www.mozilla.org/MPL/2.0/.
+

package/README.md

@@ -0,0 +1,89 @@
+# TurboWarp SVG Text
+
+TurboWarpのstageサイズに追従する、名前付きスタイル対応のテキスト機能拡張です。同じスタイルをsay／think吹き出しと、スプライト自身をテキスト表示にするSVGスキンで共有できます。
+
+利用方法と動作例は、[English guide](https://kubohiroya.github.io/turbowarp-svg-text/)または[日本語ガイド](https://kubohiroya.github.io/turbowarp-svg-text/ja/)を参照してください。TurboWarpの拡張パレットからも`docsURI`で英語ガイドを開けます。
+
+## 機能
+
+- 背景色・文字色・フォント・相対フォントサイズ・左／中央／右揃えを、任意のスタイル名で定義
+- 吹き出しの表示方向を、上下左右と斜め4方向の計8方向から指定
+- 名前付きスタイルでsay／think吹き出しを表示
+- `set this sprite text`でスプライト自身のスキンを複数行SVGテキストへ置換
+- 標準のsay／think／ask吹き出しには、再定義可能な`default`スタイルを適用
+- 文字列中のリテラル`\n`、`\r\n`、`\r`を実際の改行へ変換
+- 表示中のスタイル再定義やstageサイズ変更を、吹き出しとSVGテキストへ即時反映
+- 旧サイズ指定say／think opcodeを、保存済みプロジェクトとの互換性のため非表示で維持
+
+アニメーション機能は0.1.0の対象外です。
+
+## ブロック
+
+### `define text style [STYLE] background [BACKGROUND] text [TEXT_COLOR] font [FONT] size [SIZE] align [ALIGN] bubble direction [DIRECTION]`
+
+名前付きスタイルを定義または再定義します。`ALIGN`は`left`、`center`、`right`、`DIRECTION`は`up`、`up-right`、`right`、`down-right`、`down`、`down-left`、`left`、`up-left`です。方向は吹き出しだけに適用されます。
+
+同じ名前を再定義すると、そのスタイルを使用中の吹き出しとSVGテキストをすぐ再描画します。スタイル定義は実行時の状態なので、通常は緑の旗を押した直後に実行してください。空欄または未定義の名前は`default`へフォールバックします。
+
+### `set this sprite text [TEXT] with style [STYLE]`
+
+現在のスプライトのdrawableへ新しいSVGスキンを設定し、スプライト自身をテキスト表示にします。背景色・文字色・フォント・サイズ・文字揃えを指定したスタイルから取得します。`\n`を含む文字列は複数行の`<tspan>`として安全にエスケープして描画します。
+
+### `say [MESSAGE] with style [STYLE]`
+
+指定した名前のスタイルでsay吹き出しを表示します。
+
+### `think [MESSAGE] with style [STYLE]`
+
+指定した名前のスタイルでthink吹き出しを表示します。
+
+## サイズ計算
+
+480×360の標準stageにおけるTurboWarp既定の14pxをサイズ100とし、吹き出しとSVGテキストに同じ式を適用します。
+
+```text
+stageScale = min(stageWidth / 480, stageHeight / 360)
+fontSize = 14 × stageScale × styleSize / 100
+```
+
+| stage   | styleSize | fontSize |
+| ------- | --------: | -------: |
+| 480×360 |       100 |     14px |
+| 960×720 |       100 |     28px |
+| 960×720 |       150 |     42px |
+
+サイズは1〜1000に制限され、空文字や有限でない値は100として扱われます。
+
+## 利用方法
+
+TurboWarpの「カスタム拡張を読み込む」で次のURLを読み込み、unsandboxed実行を許可します。
+
+```text
+https://cdn.jsdelivr.net/npm/@kubohiroya/turbowarp-svg-text@0.1.0/dist/svg-text.js
+```
+
+```text
+define text style [narration] background [#fff4cc] text [#332200] font [Noto Sans JP] size [125] align [center] bubble direction [up]
+say [むかし、むかし\nあるところに…] with style [narration]
+set this sprite text [第一幕\n浦島太郎] with style [narration]
+```
+
+## 開発
+
+```bash
+corepack enable
+pnpm install --frozen-lockfile
+pnpm check
+```
+
+TypeScriptソースは、`@kubohiroya/vite-plugin-turbowarp-extension`を通して単一の`dist/svg-text.js`へビルドされます。ビルド時には保存プロジェクトとのAPI互換性確認用に`dist/extension-manifest.json`も生成します。
+
+## 互換性と制約
+
+この拡張はTurboWarp VMとrendererへアクセスするためunsandboxedで実行します。吹き出しは`SAY`／`STAGE_SIZE_CHANGED`イベント、`Scratch.looks` custom state、drawable位置更新、および`scratch-render`の`TextBubbleSkin.setStyle()`をfeature detectionして利用します。SVGテキストは`createSVGSkin`、`updateDrawableSkinId`、`destroySkin`を使用します。
+
+中央／右揃えの吹き出しでrenderer内部処理が互換でない場合は左揃えへ、位置更新APIがない場合はTurboWarp標準配置へフォールバックします。SVG skin APIがない環境では`setText`は明示的なエラーにします。通常のsay／think停止、位置追従、330文字制限、数値丸めは標準実装へ委譲します。
+
+## ライセンス
+
+MPL-2.0

package/dist/extension-manifest.json

@@ -0,0 +1,122 @@
+{
+  "formatVersion": 1,
+  "id": "kubohiroyasvgtext",
+  "blocks": [
+    {
+      "opcode": "defineStyle",
+      "blockType": "COMMAND",
+      "arguments": [
+        {
+          "id": "ALIGN",
+          "type": "STRING",
+          "menu": "alignment"
+        },
+        {
+          "id": "BACKGROUND",
+          "type": "COLOR"
+        },
+        {
+          "id": "DIRECTION",
+          "type": "STRING",
+          "menu": "direction"
+        },
+        {
+          "id": "FONT",
+          "type": "STRING"
+        },
+        {
+          "id": "SIZE",
+          "type": "NUMBER"
+        },
+        {
+          "id": "STYLE",
+          "type": "STRING"
+        },
+        {
+          "id": "TEXT_COLOR",
+          "type": "COLOR"
+        }
+      ]
+    },
+    {
+      "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",
+      "arguments": [
+        {
+          "id": "STYLE",
+          "type": "STRING"
+        },
+        {
+          "id": "TEXT",
+          "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
+    }
+  ]
+}

package/dist/svg-text.js

@@ -0,0 +1,653 @@
+// Name: SVG Text
+// ID: kubohiroyasvgtext
+// Description: Responsive named-style bubbles and SVG text actors for TurboWarp.
+// By: Hiroya Kubo
+// License: MPL-2.0
+
+(function (Scratch) {
+  'use strict';
+
+  //#region src/config.ts
+  var extensionConfig = {
+  	id: "kubohiroyasvgtext",
+  	slug: "svg-text",
+  	name: "SVG Text",
+  	description: "Responsive named-style bubbles and SVG text actors for TurboWarp.",
+  	author: "Hiroya Kubo",
+  	license: "MPL-2.0",
+  	unsandboxed: true
+  };
+  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] bubble direction [DIRECTION]",
+  			"description": "Defines or replaces a named responsive text style shared by bubbles and SVG text actors.",
+  			"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"
+  				},
+  				"DIRECTION": {
+  					"type": "STRING",
+  					"defaultValue": "up-right",
+  					"menu": "direction"
+  				}
+  			}
+  		},
+  		{
+  			"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"
+  				}
+  			}
+  		},
+  		{
+  			"opcode": "sayWithStyle",
+  			"blockType": "COMMAND",
+  			"text": "say [MESSAGE] with style [STYLE]",
+  			"description": "Shows a responsive say bubble using a named style.",
+  			"arguments": {
+  				"MESSAGE": {
+  					"type": "STRING",
+  					"defaultValue": "Hello!\\nHow are you?"
+  				},
+  				"STYLE": {
+  					"type": "STRING",
+  					"defaultValue": "default"
+  				}
+  			}
+  		},
+  		{
+  			"opcode": "thinkWithStyle",
+  			"blockType": "COMMAND",
+  			"text": "think [MESSAGE] with style [STYLE]",
+  			"description": "Shows a responsive think bubble using a named style.",
+  			"arguments": {
+  				"MESSAGE": {
+  					"type": "STRING",
+  					"defaultValue": "Hmm...\\nI wonder."
+  				},
+  				"STYLE": {
+  					"type": "STRING",
+  					"defaultValue": "default"
+  				}
+  			}
+  		},
+  		{
+  			"opcode": "say",
+  			"blockType": "COMMAND",
+  			"text": "say [MESSAGE] with font size [SIZE]",
+  			"description": "Legacy size-based say bubble kept for saved-project compatibility.",
+  			"hideFromPalette": true,
+  			"arguments": {
+  				"MESSAGE": {
+  					"type": "STRING",
+  					"defaultValue": "Hello!\\nHow are you?"
+  				},
+  				"SIZE": {
+  					"type": "NUMBER",
+  					"defaultValue": 100
+  				}
+  			}
+  		},
+  		{
+  			"opcode": "think",
+  			"blockType": "COMMAND",
+  			"text": "think [MESSAGE] with font size [SIZE]",
+  			"description": "Legacy size-based think bubble kept for saved-project compatibility.",
+  			"hideFromPalette": true,
+  			"arguments": {
+  				"MESSAGE": {
+  					"type": "STRING",
+  					"defaultValue": "Hmm...\\nI wonder."
+  				},
+  				"SIZE": {
+  					"type": "NUMBER",
+  					"defaultValue": 100
+  				}
+  			}
+  		}
+  	],
+  	menus: {
+  		"alignment": {
+  			"acceptReporters": true,
+  			"items": [
+  				"left",
+  				"center",
+  				"right"
+  			]
+  		},
+  		"direction": {
+  			"acceptReporters": true,
+  			"items": [
+  				"up",
+  				"up-right",
+  				"right",
+  				"down-right",
+  				"down",
+  				"down-left",
+  				"left",
+  				"up-left"
+  			]
+  		}
+  	}
+  };
+  //#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 bubbleStateKey = "Scratch.looks";
+  var defaultStyleName = "default";
+  var defaultFontPercent = 100;
+  var minimumFontPercent = 1;
+  var maximumFontPercent = 1e3;
+  var maximumFontNameLength = 128;
+  var baseStageWidth = 480;
+  var baseStageHeight = 360;
+  var baseStyle = {
+  	maxLineWidth: 170,
+  	minWidth: 50,
+  	strokeWidth: 4,
+  	padding: 10,
+  	cornerRadius: 16,
+  	tailHeight: 12,
+  	fontSize: 14,
+  	fontHeightRatio: .9,
+  	lineHeight: 16
+  };
+  var actorStyle = {
+  	minimumWidth: 1,
+  	padding: 12,
+  	cornerRadius: 8
+  };
+  var initialDefaultStyle = {
+  	alignment: "left",
+  	backgroundColor: "#ffffff",
+  	direction: "up-right",
+  	font: "Helvetica",
+  	fontPercent: defaultFontPercent,
+  	textColor: "#575e75"
+  };
+  var SvgTextExtension = class {
+  	constructor(runtime = Scratch.vm?.runtime) {
+  		this.styles = /* @__PURE__ */ new Map([[defaultStyleName, initialDefaultStyle]]);
+  		this.activeStyles = /* @__PURE__ */ new WeakMap();
+  		this.textActors = /* @__PURE__ */ new Map();
+  		this.pendingStyles = /* @__PURE__ */ new WeakMap();
+  		this.alignedSkins = /* @__PURE__ */ new WeakSet();
+  		this.targetPositionHooks = /* @__PURE__ */ new WeakMap();
+  		if (!runtime) throw new Error("SVG Text requires the TurboWarp VM.");
+  		this.runtime = runtime;
+  		this.handleSayOrThink = this.handleSayOrThink.bind(this);
+  		this.handleStageSizeChanged = this.handleStageSizeChanged.bind(this);
+  		this.runtime.on("SAY", this.handleSayOrThink);
+  		this.runtime.on("STAGE_SIZE_CHANGED", this.handleStageSizeChanged);
+  	}
+  	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);
+  		const definition = {
+  			alignment: this.normalizeAlignment(args.ALIGN),
+  			backgroundColor: this.normalizeColor(args.BACKGROUND, initialDefaultStyle.backgroundColor),
+  			direction: this.normalizeDirection(args.DIRECTION),
+  			font: this.normalizeFont(args.FONT),
+  			fontPercent: this.normalizeFontPercent(args.SIZE),
+  			textColor: this.normalizeColor(args.TEXT_COLOR, initialDefaultStyle.textColor)
+  		};
+  		this.styles.set(styleName, definition);
+  		this.restyleVisibleBubbles(styleName, definition);
+  		this.restyleTextActors(styleName);
+  	}
+  	setText(args, util) {
+  		const selection = this.resolveStyle(args.STYLE);
+  		this.applyTextActor(util.target, this.normalizeMessage(args.TEXT), selection);
+  	}
+  	sayWithStyle(args, util) {
+  		this.showStyledBubble("say", args, util);
+  	}
+  	thinkWithStyle(args, util) {
+  		this.showStyledBubble("think", args, util);
+  	}
+  	say(args, util) {
+  		this.showLegacyBubble("say", args, util);
+  	}
+  	think(args, util) {
+  		this.showLegacyBubble("think", args, util);
+  	}
+  	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 Scratch.Cast.toString(value).trim() || defaultStyleName;
+  	}
+  	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 Scratch.Cast.toString(value).replace(/\\r\\n|\\n|\\r/gu, "\n");
+  	}
+  	normalizeAlignment(value) {
+  		const alignment = Scratch.Cast.toString(value).trim().toLowerCase();
+  		if (alignment === "center" || alignment === "right") return alignment;
+  		return "left";
+  	}
+  	normalizeDirection(value) {
+  		const direction = Scratch.Cast.toString(value).trim().toLowerCase();
+  		if (direction === "up" || direction === "up-right" || direction === "right" || direction === "down-right" || direction === "down" || direction === "down-left" || direction === "left" || direction === "up-left") return direction;
+  		return initialDefaultStyle.direction;
+  	}
+  	normalizeColor(value, fallback) {
+  		const color = Scratch.Cast.toString(value).trim();
+  		if (color === "") return fallback;
+  		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 = Scratch.Cast.toString(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);
+  	}
+  	createRenderStyle(definition) {
+  		const stageScale = this.getStageScale();
+  		const fontScale = stageScale * (definition.fontPercent / defaultFontPercent);
+  		return {
+  			maxLineWidth: baseStyle.maxLineWidth * stageScale,
+  			minWidth: baseStyle.minWidth * stageScale,
+  			strokeWidth: baseStyle.strokeWidth * stageScale,
+  			padding: baseStyle.padding * stageScale,
+  			cornerRadius: baseStyle.cornerRadius * stageScale,
+  			tailHeight: baseStyle.tailHeight * stageScale,
+  			font: definition.font,
+  			fontSize: baseStyle.fontSize * fontScale,
+  			fontHeightRatio: baseStyle.fontHeightRatio,
+  			lineHeight: baseStyle.lineHeight * fontScale,
+  			bubbleFill: definition.backgroundColor,
+  			textFill: definition.textColor,
+  			textAlign: definition.alignment
+  		};
+  	}
+  	createTextActorSvg(text, definition) {
+  		const stageScale = this.getStageScale();
+  		const fontScale = stageScale * (definition.fontPercent / defaultFontPercent);
+  		const fontSize = baseStyle.fontSize * fontScale;
+  		const lineHeight = baseStyle.lineHeight * fontScale;
+  		const padding = actorStyle.padding * stageScale;
+  		const cornerRadius = actorStyle.cornerRadius * stageScale;
+  		const lines = text.split("\n");
+  		const contentWidth = Math.max(actorStyle.minimumWidth, ...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 alignment = definition.alignment;
+  		const textAnchor = alignment === "center" ? "middle" : alignment === "right" ? "end" : "start";
+  		const x = alignment === "center" ? width / 2 : 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 (typeof skinId !== "number") 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 ?? defaultStyleName,
+  			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) ?? initialDefaultStyle,
+  			styleName: defaultStyleName
+  		};
+  	}
+  	getBubbleState(target) {
+  		const state = target.getCustomState?.(bubbleStateKey);
+  		if (!state || typeof state !== "object") return null;
+  		return state;
+  	}
+  	getTextBubbleSkin(skinId) {
+  		const skins = this.runtime.renderer?._allSkins;
+  		if (!skins) return null;
+  		return (skins instanceof Map ? skins.get(skinId) : skins[skinId]) ?? null;
+  	}
+  	installAlignmentRenderer(skin) {
+  		if (this.alignedSkins.has(skin)) return;
+  		const originalRender = skin._renderTextBubble;
+  		if (typeof originalRender !== "function") return;
+  		skin._renderTextBubble = function renderAlignedTextBubble(scale) {
+  			const style = this._style;
+  			const alignment = style?.textAlign;
+  			const textFill = style?.textFill;
+  			if (!style || alignment !== "center" && alignment !== "right" || typeof textFill !== "string") {
+  				originalRender.call(this, scale);
+  				return;
+  			}
+  			style.textFill = "transparent";
+  			try {
+  				originalRender.call(this, scale);
+  			} finally {
+  				style.textFill = textFill;
+  			}
+  			const context = this._canvas?.getContext("2d");
+  			const lines = this._lines;
+  			const width = this._textAreaSize?.width;
+  			const padding = style.padding;
+  			const lineHeight = style.lineHeight;
+  			const fontHeightRatio = style.fontHeightRatio;
+  			const fontSize = style.fontSize;
+  			if (!context || !lines || typeof width !== "number" || typeof padding !== "number" || typeof lineHeight !== "number" || typeof fontHeightRatio !== "number" || typeof fontSize !== "number") return;
+  			context.save();
+  			context.fillStyle = textFill;
+  			context.textAlign = alignment;
+  			const x = alignment === "center" ? width / 2 : width - padding;
+  			for (let lineNumber = 0; lineNumber < lines.length; lineNumber += 1) {
+  				const line = lines[lineNumber];
+  				if (line === void 0) continue;
+  				context.fillText(line, x, padding + lineHeight * lineNumber + fontHeightRatio * fontSize);
+  			}
+  			context.restore();
+  		};
+  		this.alignedSkins.add(skin);
+  	}
+  	installTargetPositionHook(target) {
+  		const currentHook = target.onTargetVisualChange;
+  		if (currentHook === this.targetPositionHooks.get(target)) return;
+  		const originalHook = typeof currentHook === "function" ? currentHook : void 0;
+  		const positionHook = (changedTarget) => {
+  			originalHook?.(changedTarget);
+  			this.positionBubble(target);
+  		};
+  		this.targetPositionHooks.set(target, positionHook);
+  		target.onTargetVisualChange = positionHook;
+  	}
+  	positionBubble(target) {
+  		if (target.visible === false) return;
+  		const bubbleState = this.getBubbleState(target);
+  		const renderer = this.runtime.renderer;
+  		if (!bubbleState || typeof bubbleState.drawableId !== "number" || typeof renderer?.getCurrentSkinSize !== "function" || typeof renderer.updateDrawablePosition !== "function") return;
+  		const size = renderer.getCurrentSkinSize(bubbleState.drawableId);
+  		if (!Array.isArray(size) || size.length < 2) return;
+  		const bubbleWidth = Number(size[0]);
+  		const bubbleHeight = Number(size[1]);
+  		if (!(bubbleWidth > 0) || !(bubbleHeight > 0)) return;
+  		let targetBounds;
+  		try {
+  			targetBounds = target.getBoundsForBubble?.() ?? {
+  				bottom: target.y ?? 0,
+  				left: target.x ?? 0,
+  				right: target.x ?? 0,
+  				top: target.y ?? 0
+  			};
+  		} catch {
+  			targetBounds = {
+  				bottom: target.y ?? 0,
+  				left: target.x ?? 0,
+  				right: target.x ?? 0,
+  				top: target.y ?? 0
+  			};
+  		}
+  		const nativeSize = renderer.getNativeSize?.();
+  		if (!Array.isArray(nativeSize) || nativeSize.length < 2) return;
+  		const stageWidth = Number(nativeSize[0]);
+  		const stageHeight = Number(nativeSize[1]);
+  		if (!(stageWidth > 0) || !(stageHeight > 0)) return;
+  		const direction = this.activeStyles.get(target)?.definition.direction ?? initialDefaultStyle.direction;
+  		const centerX = (targetBounds.left + targetBounds.right) / 2;
+  		const centerY = (targetBounds.top + targetBounds.bottom) / 2;
+  		const gap = baseStyle.tailHeight * this.getStageScale();
+  		let x = centerX - bubbleWidth / 2;
+  		let y = targetBounds.top + gap + bubbleHeight;
+  		switch (direction) {
+  			case "up-right":
+  				x = targetBounds.right + gap;
+  				break;
+  			case "right":
+  				x = targetBounds.right + gap;
+  				y = centerY + bubbleHeight / 2;
+  				break;
+  			case "down-right":
+  				x = targetBounds.right + gap;
+  				y = targetBounds.bottom - gap;
+  				break;
+  			case "down":
+  				y = targetBounds.bottom - gap;
+  				break;
+  			case "down-left":
+  				x = targetBounds.left - gap - bubbleWidth;
+  				y = targetBounds.bottom - gap;
+  				break;
+  			case "left":
+  				x = targetBounds.left - gap - bubbleWidth;
+  				y = centerY + bubbleHeight / 2;
+  				break;
+  			case "up-left": x = targetBounds.left - gap - bubbleWidth;
+  		}
+  		if (direction.endsWith("right") && !bubbleState.onSpriteRight) {
+  			bubbleState.onSpriteRight = true;
+  			this.updateTextSkin(bubbleState);
+  		} else if (direction.endsWith("left") && bubbleState.onSpriteRight) {
+  			bubbleState.onSpriteRight = false;
+  			this.updateTextSkin(bubbleState);
+  		}
+  		const stageLeft = -stageWidth / 2;
+  		const stageRight = stageWidth / 2;
+  		const stageTop = stageHeight / 2;
+  		const stageBottom = -stageHeight / 2;
+  		x = this.clampPosition(x, stageLeft, stageRight - bubbleWidth);
+  		y = this.clampPosition(y, stageBottom + bubbleHeight, stageTop);
+  		renderer.updateDrawablePosition(bubbleState.drawableId, [x, y]);
+  	}
+  	updateTextSkin(bubbleState) {
+  		if (typeof bubbleState.skinId !== "number") return;
+  		this.runtime.renderer?.updateTextSkin?.(bubbleState.skinId, bubbleState.type, bubbleState.text, bubbleState.onSpriteRight, [0, 0]);
+  	}
+  	clampPosition(value, minimum, maximum) {
+  		if (maximum < minimum) return minimum;
+  		return Math.min(maximum, Math.max(minimum, value));
+  	}
+  	applyBubbleStyle(target, type, text, selection) {
+  		const bubbleState = this.getBubbleState(target);
+  		if (!bubbleState || typeof bubbleState.skinId !== "number") return;
+  		const normalizedText = this.normalizeMessage(text);
+  		if (bubbleState.text !== normalizedText) {
+  			bubbleState.text = normalizedText;
+  			this.runtime.renderer?.updateTextSkin?.(bubbleState.skinId, type, normalizedText, bubbleState.onSpriteRight, [0, 0]);
+  		}
+  		const skin = this.getTextBubbleSkin(bubbleState.skinId);
+  		if (typeof skin?.setStyle === "function") {
+  			this.installAlignmentRenderer(skin);
+  			skin.setStyle(this.createRenderStyle(selection.definition));
+  		}
+  		this.installTargetPositionHook(target);
+  		target.onTargetVisualChange?.(target);
+  		this.runtime.requestRedraw?.();
+  	}
+  	handleSayOrThink(target, type, text) {
+  		const selection = this.pendingStyles.get(target) ?? this.resolveStyle(defaultStyleName);
+  		this.pendingStyles.delete(target);
+  		const normalizedText = this.normalizeMessage(this.getBubbleState(target)?.text ?? text);
+  		if (normalizedText === "") {
+  			this.activeStyles.delete(target);
+  			return;
+  		}
+  		this.activeStyles.set(target, selection);
+  		this.applyBubbleStyle(target, type, normalizedText, selection);
+  	}
+  	handleStageSizeChanged() {
+  		for (const target of this.runtime.targets ?? []) {
+  			const bubbleState = this.getBubbleState(target);
+  			if (!bubbleState?.text) continue;
+  			const selection = this.activeStyles.get(target) ?? this.resolveStyle(defaultStyleName);
+  			this.applyBubbleStyle(target, bubbleState.type, bubbleState.text, selection);
+  		}
+  		for (const [target, state] of [...this.textActors]) this.applyTextActor(target, state.text, this.resolveStyle(state.styleName));
+  	}
+  	restyleVisibleBubbles(styleName, definition) {
+  		for (const target of this.runtime.targets ?? []) {
+  			const selection = this.activeStyles.get(target);
+  			const bubbleState = this.getBubbleState(target);
+  			if (selection?.styleName !== styleName || !bubbleState?.text) continue;
+  			const nextSelection = {
+  				definition,
+  				styleName
+  			};
+  			this.activeStyles.set(target, nextSelection);
+  			this.applyBubbleStyle(target, bubbleState.type, bubbleState.text, nextSelection);
+  		}
+  	}
+  	restyleTextActors(styleName) {
+  		const definition = this.styles.get(styleName);
+  		if (!definition) return;
+  		for (const [target, state] of [...this.textActors]) {
+  			if (state.styleName !== styleName) continue;
+  			this.applyTextActor(target, state.text, {
+  				definition,
+  				styleName
+  			});
+  		}
+  	}
+  	showStyledBubble(type, args, util) {
+  		this.showBubble(type, args.MESSAGE, this.resolveStyle(args.STYLE), util);
+  	}
+  	showLegacyBubble(type, args, util) {
+  		const defaultDefinition = this.styles.get(defaultStyleName) ?? initialDefaultStyle;
+  		this.showBubble(type, args.MESSAGE, {
+  			definition: {
+  				...defaultDefinition,
+  				fontPercent: this.normalizeFontPercent(args.SIZE)
+  			},
+  			styleName: null
+  		}, util);
+  	}
+  	showBubble(type, messageValue, selection, util) {
+  		const message = this.normalizeMessage(messageValue);
+  		this.pendingStyles.set(util.target, selection);
+  		try {
+  			this.runtime.emit("SAY", util.target, type, message);
+  		} finally {
+  			this.pendingStyles.delete(util.target);
+  		}
+  	}
+  };
+  //#endregion
+  //#region src/index.ts
+  if (extensionConfig.unsandboxed && !Scratch.extensions.unsandboxed) throw new Error(`${extensionConfig.name} must run unsandboxed.`);
+  Scratch.extensions.register(new SvgTextExtension());
+  //#endregion
+
+})(Scratch);

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@kubohiroya/turbowarp-svg-text",
+  "version": "0.1.0",
+  "description": "Responsive named-style bubbles and SVG text actors for TurboWarp.",
+  "author": "Hiroya Kubo <hiroya@cuc.ac.jp>",
+  "type": "module",
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/kubohiroya/turbowarp-svg-text#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kubohiroya/turbowarp-svg-text.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kubohiroya/turbowarp-svg-text/issues"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/svg-text.js",
+  "unpkg": "./dist/svg-text.js",
+  "jsdelivr": "./dist/svg-text.js",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@kubohiroya/vite-plugin-turbowarp-extension": "0.1.1",
+    "@types/node": "^26.1.2",
+    "eslint": "^10.8.0",
+    "prettier": "^3.9.6",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.66.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
+  },
+  "keywords": [
+    "turbowarp",
+    "scratch",
+    "extension",
+    "speech-bubble",
+    "svg-text",
+    "text-actor",
+    "named-styles",
+    "multiline"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "lint": "eslint src tests scripts vite.config.ts eslint.config.mjs",
+    "format": "prettier --check .",
+    "format:write": "prettier --write .",
+    "test": "vitest run",
+    "docs:site:check": "node scripts/check-site.mjs",
+    "check:dist": "pnpm build && node scripts/check-dist.mjs",
+    "pack:check": "npm pack --dry-run --ignore-scripts",
+    "release:check": "pnpm publish --dry-run --access public",
+    "check": "pnpm typecheck && pnpm lint && pnpm format && pnpm test && pnpm docs:site:check && pnpm check:dist && pnpm pack:check"
+  }
+}