npm - draft-ole - Versions diffs - 0.9.0 - Mend

draft-ole 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/LICENSE +21 -0
package/README.ja.md +134 -0
package/README.md +128 -0
package/dist/chunk-5BNNDTRT.js +95 -0
package/dist/chunk-5BNNDTRT.js.map +1 -0
package/dist/chunk-STLTIBMA.js +7658 -0
package/dist/chunk-STLTIBMA.js.map +1 -0
package/dist/chunk-YK4Y4ENL.js +389 -0
package/dist/chunk-YK4Y4ENL.js.map +1 -0
package/dist/entries/app.cjs +7337 -0
package/dist/entries/app.cjs.map +1 -0
package/dist/entries/app.d.cts +115 -0
package/dist/entries/app.d.ts +115 -0
package/dist/entries/app.js +10 -0
package/dist/entries/app.js.map +1 -0
package/dist/entries/page.cjs +7558 -0
package/dist/entries/page.cjs.map +1 -0
package/dist/entries/page.d.cts +2 -0
package/dist/entries/page.d.ts +2 -0
package/dist/entries/page.js +30 -0
package/dist/entries/page.js.map +1 -0
package/dist/index.cjs +10524 -0
package/dist/index.cjs.map +1 -0
package/dist/index.d.cts +4700 -0
package/dist/index.d.ts +4700 -0
package/dist/index.js +2573 -0
package/dist/index.js.map +1 -0
package/dist/page-DylNkWXm.d.ts +366 -0
package/dist/page-h3DPzs8l.d.cts +366 -0
package/dist/transformer/call-detector.d.ts +38 -0
package/dist/transformer/call-detector.d.ts.map +1 -0
package/dist/transformer/call-detector.js +151 -0
package/dist/transformer/call-detector.js.map +1 -0
package/dist/transformer/command-injector.d.ts +27 -0
package/dist/transformer/command-injector.d.ts.map +1 -0
package/dist/transformer/command-injector.js +111 -0
package/dist/transformer/command-injector.js.map +1 -0
package/dist/transformer/diagnostic-reporter.d.ts +81 -0
package/dist/transformer/diagnostic-reporter.d.ts.map +1 -0
package/dist/transformer/diagnostic-reporter.js +330 -0
package/dist/transformer/diagnostic-reporter.js.map +1 -0
package/dist/transformer/each-scope-branch.d.ts +28 -0
package/dist/transformer/each-scope-branch.d.ts.map +1 -0
package/dist/transformer/each-scope-branch.js +95 -0
package/dist/transformer/each-scope-branch.js.map +1 -0
package/dist/transformer/each-state-rewriter.d.ts +117 -0
package/dist/transformer/each-state-rewriter.d.ts.map +1 -0
package/dist/transformer/each-state-rewriter.js +393 -0
package/dist/transformer/each-state-rewriter.js.map +1 -0
package/dist/transformer/format-diagnostics.d.ts +27 -0
package/dist/transformer/format-diagnostics.d.ts.map +1 -0
package/dist/transformer/format-diagnostics.js +50 -0
package/dist/transformer/format-diagnostics.js.map +1 -0
package/dist/transformer/handler-ir-extractor.d.ts +71 -0
package/dist/transformer/handler-ir-extractor.d.ts.map +1 -0
package/dist/transformer/handler-ir-extractor.js +171 -0
package/dist/transformer/handler-ir-extractor.js.map +1 -0
package/dist/transformer/handler-serializer.d.ts +56 -0
package/dist/transformer/handler-serializer.d.ts.map +1 -0
package/dist/transformer/handler-serializer.js +315 -0
package/dist/transformer/handler-serializer.js.map +1 -0
package/dist/transformer/helper-context-resolver.d.ts +180 -0
package/dist/transformer/helper-context-resolver.d.ts.map +1 -0
package/dist/transformer/helper-context-resolver.js +376 -0
package/dist/transformer/helper-context-resolver.js.map +1 -0
package/dist/transformer/helper-decl-utils.d.ts +28 -0
package/dist/transformer/helper-decl-utils.d.ts.map +1 -0
package/dist/transformer/helper-decl-utils.js +92 -0
package/dist/transformer/helper-decl-utils.js.map +1 -0
package/dist/transformer/identifier-collector.d.ts +28 -0
package/dist/transformer/identifier-collector.d.ts.map +1 -0
package/dist/transformer/identifier-collector.js +184 -0
package/dist/transformer/identifier-collector.js.map +1 -0
package/dist/transformer/index.d.ts +56 -0
package/dist/transformer/index.d.ts.map +1 -0
package/dist/transformer/index.js +333 -0
package/dist/transformer/index.js.map +1 -0
package/dist/transformer/inline-recovery.d.ts +109 -0
package/dist/transformer/inline-recovery.d.ts.map +1 -0
package/dist/transformer/inline-recovery.js +369 -0
package/dist/transformer/inline-recovery.js.map +1 -0
package/dist/transformer/label-injector.d.ts +105 -0
package/dist/transformer/label-injector.d.ts.map +1 -0
package/dist/transformer/label-injector.js +221 -0
package/dist/transformer/label-injector.js.map +1 -0
package/dist/transformer/package.json +3 -0
package/dist/transformer/per-call-context.d.ts +95 -0
package/dist/transformer/per-call-context.d.ts.map +1 -0
package/dist/transformer/per-call-context.js +3 -0
package/dist/transformer/per-call-context.js.map +1 -0
package/dist/transformer/state-id-fallback.d.ts +85 -0
package/dist/transformer/state-id-fallback.d.ts.map +1 -0
package/dist/transformer/state-id-fallback.js +132 -0
package/dist/transformer/state-id-fallback.js.map +1 -0
package/dist/transformer/state-id-resolver.d.ts +104 -0
package/dist/transformer/state-id-resolver.d.ts.map +1 -0
package/dist/transformer/state-id-resolver.js +222 -0
package/dist/transformer/state-id-resolver.js.map +1 -0
package/dist/transformer/theme-class-detector.d.ts +47 -0
package/dist/transformer/theme-class-detector.d.ts.map +1 -0
package/dist/transformer/theme-class-detector.js +242 -0
package/dist/transformer/theme-class-detector.js.map +1 -0
package/dist/transformer/varname-resolver.d.ts +53 -0
package/dist/transformer/varname-resolver.d.ts.map +1 -0
package/dist/transformer/varname-resolver.js +231 -0
package/dist/transformer/varname-resolver.js.map +1 -0
package/dist/transformer/whitelist-registry.d.ts +68 -0
package/dist/transformer/whitelist-registry.d.ts.map +1 -0
package/dist/transformer/whitelist-registry.js +122 -0
package/dist/transformer/whitelist-registry.js.map +1 -0
package/dist/transformer/whitelist-validator.d.ts +59 -0
package/dist/transformer/whitelist-validator.d.ts.map +1 -0
package/dist/transformer/whitelist-validator.js +493 -0
package/dist/transformer/whitelist-validator.js.map +1 -0
package/dist/types-BXV3vhHS.d.cts +4590 -0
package/dist/types-BXV3vhHS.d.ts +4590 -0
package/package.json +121 -0

package/dist/types-BXV3vhHS.d.cts ADDED Viewed

@@ -0,0 +1,4590 @@
+/**
+ * Represents an object that can be rendered to a string representation.
+ *
+ * This interface corresponds to the Swift Renderable protocol and serves as
+ * the foundation for all elements that can produce string output (e.g., HTML, CSS).
+ *
+ * @example
+ * ```typescript
+ * class MyElement implements Renderable {
+ *   render(): string {
+ *     return '<div>Hello</div>';
+ *   }
+ * }
+ *
+ * const element = new MyElement();
+ * console.log(element.render()); // '<div>Hello</div>'
+ * ```
+ */
+interface Renderable {
+    /**
+     * Renders the object to its string representation.
+     *
+     * @returns The string representation of the object
+     */
+    render(): string;
+}
+/**
+ * Represents an object that can be exported to a file.
+ *
+ * This interface is used by publishers and other components that need to
+ * write content to the filesystem. It provides both the content to export
+ * and the method to perform the export operation.
+ *
+ * @example
+ * ```typescript
+ * class HtmlDocument implements Exportable {
+ *   readonly content: string;
+ *
+ *   constructor(html: string) {
+ *     this.content = html;
+ *   }
+ *
+ *   exportTo(fileName: string, path?: string): void {
+ *     // Export logic here
+ *   }
+ * }
+ *
+ * const doc = new HtmlDocument('<html>...</html>');
+ * doc.exportTo('index.html', './dist');
+ * ```
+ */
+interface Exportable {
+    /**
+     * The content to be exported.
+     *
+     * This property holds the string content that will be written to the file.
+     */
+    readonly content: string;
+    /**
+     * Exports the content to a file.
+     *
+     * @param fileName - The name of the file to create
+     * @param path - Optional directory path where the file should be created.
+     *               If not provided, the file is created in the current directory.
+     *
+     * @throws {ExportableError} When the export operation fails
+     */
+    exportTo(fileName: string, path?: string): void;
+}
+/**
+ * CSS単位型の定義と変換関数
+ *
+ * CSS値に使用する単位の型安全な表現と、
+ * HlUnit から CSS 文字列への変換を提供する。
+ */
+/**
+ * CSS values unit types.
+ *
+ * Represents the allowed unit types for CSS dimensional values.
+ * The 'none' value is used for unitless numbers (e.g., line-height, opacity).
+ *
+ * @example
+ * ```typescript
+ * const pixelUnit: UnitStyle = 'px';
+ * const percentUnit: UnitStyle = '%';
+ * const unitless: UnitStyle = 'none';
+ * ```
+ */
+type UnitStyle = 'px' | 'em' | 'rem' | '%' | 'vw' | 'vh' | 'fr' | 'none';
+/**
+ * CSS position property values.
+ *
+ * Represents the allowed values for the CSS `position` property,
+ * defining how an element is positioned in the document.
+ *
+ * @example
+ * ```typescript
+ * const position: RelationShip = 'absolute';
+ * const stickyHeader: RelationShip = 'sticky';
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position | MDN position}
+ */
+type RelationShip = 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
+/**
+ * Represents a numeric value with its associated CSS unit.
+ *
+ * This interface provides type-safe representation of CSS dimensional values
+ * by pairing a numeric value with its unit type.
+ *
+ * @example
+ * ```typescript
+ * const width: HlUnit = { value: 100, unit: 'px' };
+ * const height: HlUnit = { value: 50, unit: '%' };
+ * const opacity: HlUnit = { value: 0.5, unit: 'none' };
+ * ```
+ */
+interface HlUnit {
+    /**
+     * The numeric value.
+     */
+    value: number;
+    /**
+     * The unit type for the value.
+     */
+    unit: UnitStyle;
+}
+/**
+ * Converts an HlUnit to a CSS-compatible string.
+ *
+ * This function transforms a structured unit value into its string representation
+ * for use in CSS. When the unit is 'none', only the numeric value is returned.
+ *
+ * @param hlUnit - The HlUnit to convert
+ * @returns A CSS-compatible string representation
+ *
+ * @example
+ * ```typescript
+ * hlUnitToCssString({ value: 16, unit: 'px' })   // '16px'
+ * hlUnitToCssString({ value: 50, unit: '%' })    // '50%'
+ * hlUnitToCssString({ value: 1.5, unit: 'rem' }) // '1.5rem'
+ * hlUnitToCssString({ value: 0, unit: 'none' })  // '0'
+ * hlUnitToCssString({ value: 2, unit: 'none' })  // '2' (for unitless values like line-height)
+ * ```
+ */
+declare function hlUnitToCssString(hlUnit: HlUnit): string;
+/**
+ * Tag structure classification.
+ *
+ * - **pair**: Elements with opening and closing tags (e.g., `<div>...</div>`)
+ * - **selfClosing**: Self-closing (void) elements (e.g., `<br>`)
+ */
+type TagStructure = 'pair' | 'selfClosing';
+/**
+ * Constant object defining all 97 HTML tag types.
+ *
+ * This object uses HTML standard tag names as keys (unlike Swift version which used
+ * enum aliases like `paragraph="p"`, `bold="b"`). As a result, TypeScript version
+ * has 97 unique entries vs Swift's 66 cases (including aliases).
+ *
+ * **Categories:**
+ * - **Basic (10):** html, head, body, div, p, span, script, root, text, doctype
+ * - **Semantic (9):** header, footer, nav, main, section, article, aside, figure, figcaption
+ * - **Table (9):** table, thead, tbody, tfoot, tr, th, td, caption, colgroup
+ * - **List (6):** ul, ol, li, dl, dt, dd
+ * - **Form (11):** form, label, button, select, option, optgroup, textarea, fieldset, legend, datalist, output
+ * - **Text Decoration (20):** strong, em, b, i, u, s, mark, small, sub, sup, code, pre, blockquote, q, cite, abbr, address, time, kbd, samp
+ * - **Heading (6):** h1, h2, h3, h4, h5, h6
+ * - **Media (5):** video, audio, picture, canvas, svg
+ * - **Interactive (5):** details, summary, dialog, iframe, noscript
+ * - **Self-Closing (13):** br, hr, img, input, meta, link, source, track, area, col, base, embed, wbr
+ * - **Other (3):** a, title, var
+ *
+ * **Total:** 10 + 9 + 9 + 6 + 11 + 20 + 6 + 5 + 5 + 13 + 3 = 97
+ *
+ * @example
+ * ```typescript
+ * import { TAG_TYPES } from './tag-type.js';
+ *
+ * console.log(TAG_TYPES.div);    // 'div'
+ * console.log(TAG_TYPES.p);      // 'p'
+ * console.log(TAG_TYPES.br);     // 'br'
+ * ```
+ */
+declare const TAG_TYPES: {
+    readonly html: "html";
+    readonly head: "head";
+    readonly body: "body";
+    readonly div: "div";
+    readonly p: "p";
+    readonly span: "span";
+    readonly script: "script";
+    readonly root: "root";
+    readonly text: "text";
+    readonly doctype: "doctype";
+    readonly header: "header";
+    readonly footer: "footer";
+    readonly nav: "nav";
+    readonly main: "main";
+    readonly section: "section";
+    readonly article: "article";
+    readonly aside: "aside";
+    readonly figure: "figure";
+    readonly figcaption: "figcaption";
+    readonly table: "table";
+    readonly thead: "thead";
+    readonly tbody: "tbody";
+    readonly tfoot: "tfoot";
+    readonly tr: "tr";
+    readonly th: "th";
+    readonly td: "td";
+    readonly caption: "caption";
+    readonly colgroup: "colgroup";
+    readonly ul: "ul";
+    readonly ol: "ol";
+    readonly li: "li";
+    readonly dl: "dl";
+    readonly dt: "dt";
+    readonly dd: "dd";
+    readonly form: "form";
+    readonly label: "label";
+    readonly button: "button";
+    readonly select: "select";
+    readonly option: "option";
+    readonly optgroup: "optgroup";
+    readonly textarea: "textarea";
+    readonly fieldset: "fieldset";
+    readonly legend: "legend";
+    readonly datalist: "datalist";
+    readonly output: "output";
+    readonly strong: "strong";
+    readonly em: "em";
+    readonly b: "b";
+    readonly i: "i";
+    readonly u: "u";
+    readonly s: "s";
+    readonly mark: "mark";
+    readonly small: "small";
+    readonly sub: "sub";
+    readonly sup: "sup";
+    readonly code: "code";
+    readonly pre: "pre";
+    readonly blockquote: "blockquote";
+    readonly q: "q";
+    readonly cite: "cite";
+    readonly abbr: "abbr";
+    readonly address: "address";
+    readonly time: "time";
+    readonly kbd: "kbd";
+    readonly samp: "samp";
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly h6: "h6";
+    readonly video: "video";
+    readonly audio: "audio";
+    readonly picture: "picture";
+    readonly canvas: "canvas";
+    readonly svg: "svg";
+    readonly details: "details";
+    readonly summary: "summary";
+    readonly dialog: "dialog";
+    readonly iframe: "iframe";
+    readonly noscript: "noscript";
+    readonly br: "br";
+    readonly hr: "hr";
+    readonly img: "img";
+    readonly input: "input";
+    readonly meta: "meta";
+    readonly link: "link";
+    readonly source: "source";
+    readonly track: "track";
+    readonly area: "area";
+    readonly col: "col";
+    readonly base: "base";
+    readonly embed: "embed";
+    readonly wbr: "wbr";
+    readonly a: "a";
+    readonly title: "title";
+    readonly var: "var";
+};
+/**
+ * Union type of all HTML tag types.
+ *
+ * Derived from the values of {@link TAG_TYPES} as a string literal union.
+ *
+ * @example
+ * ```typescript
+ * const tagName: TagType = 'div';  // Valid
+ * const invalid: TagType = 'foo';  // Type error
+ * ```
+ */
+type TagType = typeof TAG_TYPES[keyof typeof TAG_TYPES];
+/**
+ * Set of all 13 standard HTML void (self-closing) elements.
+ *
+ * **Included Tags:**
+ * br, hr, img, input, meta, link, source, track, area, col, base, embed, wbr
+ *
+ * **Note:** `doctype` is not included (handled as a special case).
+ *
+ * @example
+ * ```typescript
+ * import { SELF_CLOSING_TAGS } from './tag-type.js';
+ *
+ * console.log(SELF_CLOSING_TAGS.has('br'));    // true
+ * console.log(SELF_CLOSING_TAGS.has('div'));   // false
+ * ```
+ */
+declare const SELF_CLOSING_TAGS: ReadonlySet<TagType>;
+/**
+ * Determines the structure type of a given HTML tag.
+ *
+ * @param tag - The tag type to check
+ * @returns 'selfClosing' if the tag is a void element, 'pair' otherwise
+ *
+ * @example
+ * ```typescript
+ * import { getTagStructure, TAG_TYPES } from './tag-type.js';
+ *
+ * console.log(getTagStructure(TAG_TYPES.br));   // 'selfClosing'
+ * console.log(getTagStructure(TAG_TYPES.div));  // 'pair'
+ * console.log(getTagStructure(TAG_TYPES.img));  // 'selfClosing'
+ * console.log(getTagStructure(TAG_TYPES.p));    // 'pair'
+ * ```
+ */
+declare function getTagStructure(tag: TagType): TagStructure;
+/**
+ * HTML属性値のdiscriminated union型と factory 関数
+ *
+ * Swift版 HtmlAttributeValue に対応する TypeScript 型定義と、
+ * 各 variant の安全な生成を支援する factory 関数群を提供する。
+ */
+/**
+ * Represents a boolean HTML attribute (e.g., disabled, checked, hidden).
+ *
+ * @remarks
+ * Boolean attributes render as just the attribute name without a value.
+ *
+ * @example
+ * ```typescript
+ * const value: BooleanAttributeValue = { type: 'boolean' };
+ * // Renders as: 'disabled' (not 'disabled="true"')
+ * ```
+ */
+interface BooleanAttributeValue {
+    readonly type: 'boolean';
+}
+/**
+ * Represents a key-value HTML attribute (e.g., id="main", class="container").
+ *
+ * @remarks
+ * Key-value attributes render as `key="value"` with the value automatically HTML-escaped.
+ *
+ * @example
+ * ```typescript
+ * const value: KeyValueAttributeValue = { type: 'keyValue', value: 'main-content' };
+ * // Renders as: 'id="main-content"'
+ * ```
+ */
+interface KeyValueAttributeValue {
+    readonly type: 'keyValue';
+    readonly value: string;
+}
+/**
+ * Represents a custom data-* HTML attribute (e.g., data-theme="dark").
+ *
+ * @remarks
+ * Custom attributes render as `data-{name}="{value}"` with the value automatically HTML-escaped.
+ *
+ * @example
+ * ```typescript
+ * const value: CustomAttributeValue = { type: 'custom', name: 'theme', value: 'dark' };
+ * // Renders as: 'data-theme="dark"'
+ * ```
+ */
+interface CustomAttributeValue {
+    readonly type: 'custom';
+    readonly name: string;
+    readonly value: string;
+}
+/**
+ * Discriminated union type for all HTML attribute value types.
+ *
+ * @remarks
+ * This type enables type-safe handling of different attribute value types
+ * using TypeScript's discriminated union pattern.
+ *
+ * @example
+ * ```typescript
+ * function renderValue(attrValue: HtmlAttributeValue): string {
+ *   switch (attrValue.type) {
+ *     case 'boolean':
+ *       return 'attribute-name';
+ *     case 'keyValue':
+ *       return `attribute-name="${attrValue.value}"`;
+ *     case 'custom':
+ *       return `data-${attrValue.name}="${attrValue.value}"`;
+ *   }
+ * }
+ * ```
+ */
+type HtmlAttributeValue = BooleanAttributeValue | KeyValueAttributeValue | CustomAttributeValue;
+/**
+ * Creates a boolean attribute value.
+ *
+ * @returns A BooleanAttributeValue instance
+ *
+ * @example
+ * ```typescript
+ * const disabled = createBooleanValue();
+ * // Returns: { type: 'boolean' }
+ * ```
+ */
+declare function createBooleanValue(): BooleanAttributeValue;
+/**
+ * Creates a key-value attribute value.
+ *
+ * @param value - The attribute value
+ * @returns A KeyValueAttributeValue instance
+ *
+ * @example
+ * ```typescript
+ * const id = createKeyValueValue('main-content');
+ * // Returns: { type: 'keyValue', value: 'main-content' }
+ * ```
+ */
+declare function createKeyValueValue(value: string): KeyValueAttributeValue;
+/**
+ * Creates a custom data-* attribute value.
+ *
+ * @param name - The data attribute name (without 'data-' prefix)
+ * @param value - The attribute value
+ * @returns A CustomAttributeValue instance
+ *
+ * @example
+ * ```typescript
+ * const theme = createCustomValue('theme', 'dark');
+ * // Returns: { type: 'custom', name: 'theme', value: 'dark' }
+ * ```
+ */
+declare function createCustomValue(name: string, value: string): CustomAttributeValue;
+/**
+ * ChildManageable: 子要素管理の責務インターフェース
+ *
+ * HTMLタグの子要素追加・管理に関する操作を定義する。
+ * HTMLTagProtocol はこのインターフェースを継承して子要素管理機能を提供する。
+ *
+ * Task 5.1: HTMLTagProtocol の責務明確化（Requirement 4.4）
+ *
+ * Preconditions: children は追加順に保持される
+ * Postconditions: addChild/addChildren は this を返却（メソッドチェーン可能）
+ * Invariants: 子要素の順序は変更されない
+ */
+/**
+ * 子要素管理の責務インターフェース
+ *
+ * @remarks
+ * このインターフェースは、HTMLタグの子要素を管理する責務を定義します。
+ * メソッドチェーンをサポートするため、すべてのメソッドは `this` を返します。
+ *
+ * @example
+ * ```typescript
+ * const div = new PairType('div');
+ * div.addChild(new TextType('Hello'))
+ *    .addChild(new TextType('World'));
+ *
+ * console.log(div.children.length); // 2
+ * ```
+ */
+interface ChildManageable {
+    /**
+     * 子要素の読み取り専用配列
+     *
+     * @remarks
+     * 子要素は追加順に保持されます。
+     * 直接配列を変更することはできません。addChild/addChildren メソッドを使用してください。
+     */
+    readonly children: ReadonlyArray<HTMLTagProtocol>;
+    /**
+     * 子要素を1つ追加
+     *
+     * @param child - 追加する子要素
+     * @returns メソッドチェーンのため、this を返す
+     *
+     * @remarks
+     * 子要素は配列の末尾に追加されます。
+     *
+     * @example
+     * ```typescript
+     * div.addChild(new TextType('Hello'));
+     * ```
+     */
+    addChild(child: HTMLTagProtocol): this;
+    /**
+     * 子要素を複数追加
+     *
+     * @param children - 追加する子要素の配列
+     * @returns メソッドチェーンのため、this を返す
+     *
+     * @remarks
+     * 子要素は配列の順序通りに追加されます。
+     *
+     * @example
+     * ```typescript
+     * div.addChildren([
+     *   new TextType('Hello'),
+     *   new TextType('World')
+     * ]);
+     * ```
+     */
+    addChildren(children: ReadonlyArray<HTMLTagProtocol>): this;
+}
+/**
+ * AttributeManageable: 属性管理の責務インターフェース
+ *
+ * HTMLタグの属性追加・管理に関する操作を定義する。
+ * HTMLTagProtocol はこのインターフェースを継承して属性管理機能を提供する。
+ *
+ * Task 5.1: HTMLTagProtocol の責務明確化（Requirement 4.4）
+ *
+ * Preconditions: attributes は追加順に保持される
+ * Postconditions: addHtmlAttribute は this を返却（メソッドチェーン可能）
+ * Invariants: 属性の順序は変更されない
+ */
+/**
+ * 属性管理の責務インターフェース
+ *
+ * @remarks
+ * このインターフェースは、HTMLタグの属性を管理する責務を定義します。
+ * メソッドチェーンをサポートするため、すべてのメソッドは `this` を返します。
+ *
+ * @example
+ * ```typescript
+ * const div = new PairType('div');
+ * div.addHtmlAttribute(new HtmlAttribute('id', 'test-id'))
+ *    .addHtmlAttribute(new HtmlAttribute('class', 'test-class'));
+ *
+ * console.log(div.attributes.length); // 2
+ * ```
+ */
+interface AttributeManageable {
+    /**
+     * 属性の読み取り専用配列
+     *
+     * @remarks
+     * 属性は追加順に保持されます。
+     * 直接配列を変更することはできません。addHtmlAttribute メソッドを使用してください。
+     */
+    readonly attributes: ReadonlyArray<HtmlAttributeShape>;
+    /**
+     * HTML属性を1つ追加
+     *
+     * @param attribute - 追加する属性オブジェクト
+     * @returns メソッドチェーンのため、this を返す
+     *
+     * @remarks
+     * 属性は配列の末尾に追加されます。
+     * 同じ key の属性を複数追加した場合、後の属性が優先されます（HTML仕様に従う）。
+     *
+     * @example
+     * ```typescript
+     * div.addHtmlAttribute(new HtmlAttribute('id', 'test-id'));
+     * ```
+     */
+    addHtmlAttribute(attribute: HtmlAttributeShape): this;
+}
+/**
+ * IdRegistry の公開インターフェイス
+ */
+interface IdRegistryProtocol {
+    /**
+     * id を登録する。既に同じ id が登録されている場合は HtmlError をスローする。
+     *
+     * @param id - 登録対象の id 文字列
+     * @param tagPath - 当該 id を持つタグの構造パス（エラー時の特定用）
+     * @throws {HtmlError} 既に同じ id が登録済みの場合
+     */
+    register(id: string, tagPath: string): void;
+    /**
+     * 指定 id が登録済みかを返す。
+     */
+    has(id: string): boolean;
+    /**
+     * 登録済み id をすべて破棄する。
+     */
+    reset(): void;
+}
+/**
+ * 内部 Map で id を管理する IdRegistry の標準実装。
+ */
+declare class IdRegistry implements IdRegistryProtocol {
+    /** id → 最初に登録された tagPath */
+    private readonly entries;
+    /**
+     * id を登録する。重複検出時は HtmlError をスローする。
+     */
+    register(id: string, tagPath: string): void;
+    /**
+     * 登録済みかを返す。
+     */
+    has(id: string): boolean;
+    /**
+     * 登録をすべて破棄する。
+     */
+    reset(): void;
+}
+/**
+ * 識別子リゾルバ（IdentifierResolver）
+ *
+ * 構造パス（tagPath）から CSS クラス名と HTML id を決定的に生成する純関数群。
+ * 同じ入力に対して常に同じ出力を返し、副作用を持たない（ビルド間で安定）。
+ *
+ * ## 設計方針
+ *
+ * - **バイト等価（受動追従）**: `resolveClassName(tagPath)` の bodyHash 省略経路は
+ *   `generateScopedClassName(tagPath)` の出力に **バイト等価** な値を返す。
+ *   THEMECLASS-3 で `generateScopedClassName` が debuggable prefix 形式
+ *   （例: `_body-div-header__a1b2c3d4`）に拡張された場合、本関数は委譲によって
+ *   受動的に新フォーマットへ追従する（自関数内で prefix 生成ロジックを持たない）。
+ * - **bodyHash 付き経路の据え置き**: `bodyHash` 指定時は現フォーマット
+ *   `_<djb2(tagPath)>_<djb2(bodyHash)>` を維持する。本経路は THEMECLASS-3 の
+ *   debuggable prefix 適用対象外（本 spec のスコープ外）であり、新 prefix は
+ *   付与しない。
+ * - **id 生成**: `resolveId(tagPath)` は `_id_<djb2(tagPath)>` 形式を返し、
+ *   クラス名空間とは `_id_` プレフィックスで名前空間が分離される（要件 3.5）。
+ *
+ * 要件: 1.2, 1.3, 2.3, 3.1, 3.3, 3.4, 3.5, 3.6, 3.7, 5.1, 5.2
+ *
+ * @module identifier-resolver
+ */
+/**
+ * 識別子リゾルバのインターフェース
+ *
+ * tagPath からクラス名・ID を決定的に生成する責務を持つ。
+ * 純関数の集合体としてふるまい、状態を持たない。
+ */
+interface IdentifierResolver {
+    /**
+     * tagPath（と任意の bodyHash, varName）から CSS クラス名を解決する。
+     *
+     * @param tagPath - 要素の構造パス（例: `'html>body>div'`）
+     * @param bodyHash - スタイル本体の djb2 ハッシュ（省略可）
+     * @param varName - `theme.class()` 呼び出し由来の変数名（省略可）。
+     *   `bodyHash === undefined && varName !== undefined && varName !== ''` の場合のみ
+     *   `generateScopedClassNameWithVarName(tagPath, varName)` 経路に分岐する。
+     */
+    resolveClassName(tagPath: string, bodyHash?: string, varName?: string): string;
+    /**
+     * tagPath から HTML id 文字列を解決する。
+     *
+     * @param tagPath - 要素の構造パス
+     */
+    resolveId(tagPath: string): string;
+}
+/**
+ * CSS出力設定クラス
+ *
+ * CSS出力の振る舞いを制御する設定を管理する。
+ * スコープドCSSの有効/無効と出力モードを設定できる。
+ *
+ * ## 設定項目
+ *
+ * - **scopedCssEnabled**: スコープドCSSの有効/無効
+ *   - `true`: タグパスからハッシュクラス名を生成してCSSをラップ
+ *   - `false`: インラインスタイル形式で出力
+ * - **outputMode**: 出力モード
+ *   - `'inline'`: インラインスタイルとして出力
+ *   - `'external'`: 外部CSSファイル用の出力
+ *
+ * @example
+ * ```ts
+ * // デフォルト設定（スコープドCSS有効、インラインモード）
+ * const config1 = new CssConfig();
+ * console.log(config1.scopedCssEnabled); // → true
+ * console.log(config1.outputMode); // → 'inline'
+ *
+ * // カスタム設定
+ * const config2 = new CssConfig({
+ *   scopedCssEnabled: false,
+ *   outputMode: 'external'
+ * });
+ *
+ * const manager = new CssManager('html>body>div', config2);
+ * ```
+ */
+/**
+ * CSS出力モード
+ *
+ * - `'inline'`: インラインスタイルとして出力
+ * - `'external'`: 外部CSSファイル用の出力
+ */
+type CssConfigOutputMode = 'inline' | 'external';
+/**
+ * CssConfig コンストラクタオプション
+ */
+interface CssConfigOptions {
+    /** スコープドCSSの有効/無効 */
+    scopedCssEnabled: boolean;
+    /** 出力モード */
+    outputMode: CssConfigOutputMode;
+    /**
+     * scoped CSS クラス名の minify モード
+     *
+     * - `true`: `_<8hex>` 形式（コンパクト、production 向け）
+     * - `false`: debuggable 形式（既定）
+     * - 省略時は `process.env.NODE_ENV === 'production'` を fallback として参照する
+     */
+    minifyClassNames?: boolean;
+}
+/**
+ * CSS出力設定
+ */
+declare class CssConfig {
+    /**
+     * スコープドCSSの有効/無効
+     *
+     * `true` の場合、タグパスからハッシュクラス名を生成してCSSをラップする。
+     * `false` の場合、インラインスタイル形式で出力する。
+     *
+     * @default true
+     */
+    scopedCssEnabled: boolean;
+    /**
+     * 出力モード
+     *
+     * - `'inline'`: インラインスタイルとして出力
+     * - `'external'`: 外部CSSファイル用の出力
+     *
+     * @default 'inline'
+     */
+    outputMode: CssConfigOutputMode;
+    /**
+     * scoped CSS クラス名の minify モード（解決済み）
+     *
+     * コンストラクタで `options.minifyClassNames` と `process.env.NODE_ENV` から
+     * 一度だけ解決され、以後は不変。
+     *
+     * - `true`: `_<8hex>` 形式（コンパクト）
+     * - `false`: debuggable 形式
+     *
+     * @default false（NODE_ENV !== 'production' のとき）
+     */
+    readonly minifyClassNames: boolean;
+    /**
+     * CssConfig を構築する
+     *
+     * @param options - 設定オプション（省略時はデフォルト値を使用）
+     */
+    constructor(options?: Partial<CssConfigOptions>);
+}
+/**
+ * RenderContext — protoRender 系メソッドが共有する単一コンテキスト。
+ *
+ * Requirements: 3.1（id 自動生成）、3.4（id 重複検出）
+ *
+ * 設計メモ:
+ * - `IdRegistry` と `IdentifierResolver` をひとつのオブジェクトに束ねて
+ *   レンダーツリー全体で同一インスタンスを伝搬させるための器。
+ * - 既存の `protoRender` シグネチャに **optional 引数** として追加できる
+ *   形にしてあり、ctx 省略時は呼び出し側が `createDefaultRenderContext()`
+ *   などで自前生成して旧挙動互換を保つ運用を想定する。
+ * - サブクラス（Root / PairType / SelfClosingType / TextType）の override は、
+ *   受け取った ctx を子要素 `protoRender(ctx)` に **必ず伝搬する責務**を持つ。
+ *   伝搬漏れは Req 3.4 の不達につながる（design.md 参照）。
+ *
+ * このファイルは純粋な型定義 + 軽量ファクトリのみで、副作用や
+ * ランタイム依存を持たない。
+ */
+/**
+ * レンダーフェーズ全体で共有するコンテキスト。
+ *
+ * - `registry`: ツリー単位で id 重複を検出するためのレジストリ。
+ *   Root.protoRender() の冒頭で `reset()` され、以降の子要素レンダーで
+ *   同一インスタンスを共有する。
+ * - `resolver`: tagPath からクラス名・id を決定的に生成する純関数群。
+ *   ステートレスなので使い回し可能。
+ */
+interface RenderContext {
+    readonly registry: IdRegistry;
+    readonly resolver: IdentifierResolver;
+    /**
+     * ファクトリ抽出モードフラグ。
+     *
+     * `true` の場合、`each` などの factory 由来コンポーネントの
+     * 抽出経路を有効化する（後続タスクで実装）。
+     * 未設定または `false` の場合は従来挙動を維持する。
+     *
+     * Requirements: 1.1, 2.1
+     */
+    readonly factoryExtraction?: boolean;
+}
+/**
+ * HTMLTagProtocol: HTMLタグの共通操作を定義する複合インターフェース
+ *
+ * Phase 1の Renderable を拡張し、HTMLタグ固有の操作を追加する。
+ * CSS/JS機能はスタブとして定義し、Phase 3/4で具象化する。
+ *
+ * Task 5.1: ChildManageable と AttributeManageable を継承して責務を明確化
+ *
+ * Requirements: 1.1, 1.7, 4.4
+ */
+/**
+ * HTML属性の構造を定義する型
+ *
+ * このインターフェースは、HTML属性の最小限の形状を定義します。
+ * 具象クラス（HtmlAttribute）は Task 2.1 で実装されます。
+ *
+ * @remarks
+ * HTMLTagProtocol が参照する属性の契約を定義し、
+ * 属性のキー、値、およびレンダリング機能を提供します。
+ *
+ * @example
+ * ```typescript
+ * class HtmlAttribute implements HtmlAttributeShape {
+ *   constructor(
+ *     readonly key: string,
+ *     readonly attributeValue: HtmlAttributeValue
+ *   ) {}
+ *
+ *   renderAttribute(): string {
+ *     return `${this.key}="${this.attributeValue}"`;
+ *   }
+ * }
+ *
+ * const attr = new HtmlAttribute('id', 'test-id');
+ * console.log(attr.renderAttribute()); // 'id="test-id"'
+ * ```
+ */
+interface HtmlAttributeShape {
+    /**
+     * 属性のキー名（例: 'id', 'class', 'href'）
+     */
+    readonly key: string;
+    /**
+     * 属性の値（文字列、数値、ブール値など）
+     */
+    readonly attributeValue: HtmlAttributeValue;
+    /**
+     * 属性をHTML文字列としてレンダリング
+     *
+     * @returns HTML形式の属性文字列（例: `id="test"`）
+     *
+     * @remarks
+     * 属性のキーと値を `key="value"` 形式の文字列に変換します。
+     * ブール属性（例: hidden, disabled）の場合は、値の有無に応じて処理されます。
+     *
+     * @example
+     * ```typescript
+     * const idAttr = new HtmlAttribute('id', 'my-id');
+     * console.log(idAttr.renderAttribute()); // 'id="my-id"'
+     *
+     * const classAttr = new HtmlAttribute('class', 'btn btn-primary');
+     * console.log(classAttr.renderAttribute()); // 'class="btn btn-primary"'
+     * ```
+     */
+    renderAttribute(): string;
+}
+/**
+ * HTMLタグの共通操作インターフェース
+ *
+ * Renderable, ChildManageable, AttributeManageable を継承し、
+ * タグ種別とレンダリング機能を追加する。
+ *
+ * @remarks
+ * このインターフェースは、責務の明確化のため以下の3つのインターフェースを継承します:
+ * - Renderable: レンダリング基本機能
+ * - ChildManageable: 子要素管理
+ * - AttributeManageable: 属性管理
+ *
+ * Preconditions: tagType は有効な TagType 値
+ * Postconditions: render()/protoRender() は有効な HTML 文字列を返す
+ * Invariants: children の順序は追加順に保持
+ */
+interface HTMLTagProtocol extends Renderable, ChildManageable, AttributeManageable {
+    /**
+     * HTMLタグの種別（例: 'div', 'p', 'span'）
+     */
+    readonly tagType: TagType;
+    /**
+     * フォーマット済みHTML文字列を生成
+     *
+     * @returns インデント・改行を含む整形済みHTML
+     *
+     * @remarks
+     * protoRender() の出力を HTMLFormatter で整形して返します。
+     */
+    render(): string;
+    /**
+     * ミニファイ（最小化）されたHTML文字列を生成
+     *
+     * @returns インデント・改行を含まないHTML
+     *
+     * @remarks
+     * タグ、属性、子要素を連結したHTML文字列を返します。
+     * render() メソッドはこの出力を整形して返します。
+     */
+    protoRender(ctx?: RenderContext): string;
+}
+/**
+ * レイアウト配置方向型
+ *
+ * レイアウト配置の方向を表す文字列リテラルユニオン型。
+ * {@link LayoutRegisteredItem} の basePosition / targetPosition で使用され、
+ * 要素間の位置関係を定義する。
+ *
+ * ## 値
+ *
+ * - `'top'`: 上端
+ * - `'bottom'`: 下端
+ * - `'left'`: 左端
+ * - `'right'`: 右端
+ * - `'none'`: 方向なし（値のみ保持）
+ *
+ * @example
+ * ```ts
+ * const item: LayoutRegisteredItem = {
+ *   relationShip: 'absolute',
+ *   baseTagPath: 'html>body>div.a',
+ *   basePosition: 'left',  // Positioning型
+ *   targetTagPath: 'html>body>div.b',
+ *   targetPosition: 'right', // Positioning型
+ *   value: { value: 10, unit: 'px' }
+ * };
+ * ```
+ *
+ * @see {@link LayoutRegisteredItem}
+ * @see {@link LazyLayoutManager}
+ */
+type Positioning = 'top' | 'bottom' | 'left' | 'right' | 'none';
+/**
+ * Task 1.3: LayoutRegisteredItem & LazyLayoutRegister インターフェース
+ *
+ * 遅延レイアウト解決に必要なデータ構造とレジスタインターフェース。
+ * LayoutRegisteredItem は要素間の位置関係を記述し、
+ * LazyLayoutRegister はそれらを登録・解決・レンダリングする。
+ */
+/**
+ * レイアウト登録アイテム。
+ * 基準要素とターゲット要素の位置関係を記述する。
+ */
+interface LayoutRegisteredItem {
+    relationShip: RelationShip;
+    baseTagPath: string;
+    basePosition: Positioning;
+    targetTagPath?: string;
+    targetPosition: Positioning;
+    value?: HlUnit;
+}
+/**
+ * 遅延レイアウト登録・解決インターフェース。
+ * レイアウトアイテムの登録、検索、レンダリング、一括解決を提供する。
+ */
+interface LazyLayoutRegister {
+    registerItem(item: LayoutRegisteredItem): void;
+    getRelationShip(tagPath: string): RelationShip | undefined;
+    renderItemsBy(tagPath: string): string;
+    renderAllItems(): string;
+    resolveAllLayout(): void;
+}
+/**
+ * CSS配置記述インターフェース
+ *
+ * 要素の配置情報（top, left, width, height）を表現する。
+ * {@link CssPositionMaker.description} プロパティで現在の配置設定を取得する際に使用される。
+ *
+ * ## プロパティ
+ *
+ * すべてのプロパティはオプショナルで、設定された値のみが含まれる。
+ * 未設定のプロパティは `undefined` となる。
+ *
+ * @example
+ * ```ts
+ * const maker = new CssPositionMaker('html>body>div');
+ * maker.placeAbsoluteWith(b => {
+ *   b.top(10, 'px').left(20, 'px');
+ * });
+ *
+ * const desc = maker.description;
+ * console.log(desc.top);    // → { value: 10, unit: 'px' }
+ * console.log(desc.left);   // → { value: 20, unit: 'px' }
+ * console.log(desc.width);  // → undefined
+ * console.log(desc.height); // → undefined
+ * ```
+ *
+ * @see {@link CssPositionMaker}
+ * @see {@link HlUnit}
+ */
+interface CssPlaceDescription {
+    /** 上端からの位置 */
+    top?: HlUnit;
+    /** 左端からの位置 */
+    left?: HlUnit;
+    /** 幅 */
+    width?: HlUnit;
+    /** 高さ */
+    height?: HlUnit;
+}
+/**
+ * CSSレイアウトビルダーインターフェース
+ *
+ * CSS レイアウトプロパティをメソッドチェーンで構築するビルダーパターン。
+ * {@link CssPositionMaker} の placeXxxWith() メソッドで使用される。
+ *
+ * ## メソッドチェーン
+ *
+ * 各メソッドは自身を返すため、流暢なインターフェースで連続的に呼び出せる。
+ *
+ * @example
+ * ```ts
+ * maker.placeAbsoluteWith(builder => {
+ *   builder
+ *     .top(0, 'px')
+ *     .left(0, 'px')
+ *     .width(100, '%')
+ *     .height(100, 'vh');
+ * });
+ * ```
+ *
+ * @see {@link CssPositionMaker}
+ */
+interface CssLayoutBuilder {
+    /**
+     * top プロパティを設定する
+     * @param value - 数値
+     * @param unit - CSS単位
+     * @returns this（メソッドチェーン用）
+     */
+    top(value: number, unit: UnitStyle): CssLayoutBuilder;
+    /**
+     * left プロパティを設定する
+     * @param value - 数値
+     * @param unit - CSS単位
+     * @returns this（メソッドチェーン用）
+     */
+    left(value: number, unit: UnitStyle): CssLayoutBuilder;
+    /**
+     * width プロパティを設定する
+     * @param value - 数値
+     * @param unit - CSS単位
+     * @returns this（メソッドチェーン用）
+     */
+    width(value: number, unit: UnitStyle): CssLayoutBuilder;
+    /**
+     * height プロパティを設定する
+     * @param value - 数値
+     * @param unit - CSS単位
+     * @returns this（メソッドチェーン用）
+     */
+    height(value: number, unit: UnitStyle): CssLayoutBuilder;
+    /**
+     * bottom プロパティを設定する
+     * @param value - 数値
+     * @param unit - CSS単位
+     * @returns this（メソッドチェーン用）
+     */
+    bottom(value: number, unit: UnitStyle): CssLayoutBuilder;
+    /**
+     * right プロパティを設定する
+     * @param value - 数値
+     * @param unit - CSS単位
+     * @returns this（メソッドチェーン用）
+     */
+    right(value: number, unit: UnitStyle): CssLayoutBuilder;
+}
+/**
+ * Task 1.3: CssPositionMakerType インターフェース
+ *
+ * CSS 配置管理の抽象インターフェース。
+ * Renderable を拡張し、absolute/relative/static/fixed の配置と
+ * 遅延レイアウト登録を管理する。
+ */
+interface CssPositionMakerType extends Renderable {
+    tagPath: string;
+    readonly description: CssPlaceDescription;
+    updateLLRegister(register: LazyLayoutRegister | undefined): void;
+    getLLRegister(): LazyLayoutRegister | undefined;
+    placeAbsoluteWith(closure: (builder: CssLayoutBuilder) => void): void;
+    placeRelativeWith(closure: (builder: CssLayoutBuilder) => void): void;
+    placeStaticWith(closure: (builder: CssLayoutBuilder) => void): void;
+    placeFixedWith(closure: (builder: CssLayoutBuilder) => void): void;
+}
+/**
+ * Task 1.3: CssStyleManagerType インターフェース
+ *
+ * スタイル管理の抽象インターフェース。
+ * Renderable を拡張し、フォントサイズ単位の取得機能を持つ。
+ */
+/**
+ * HtmlStyle の前方宣言型。
+ * 後続タスク(6.1)で具象化される。
+ * 現時点では Renderable のサブタイプとして定義する。
+ */
+type HtmlStyleType = Renderable;
+/**
+ * CSS スタイル管理の抽象インターフェース。
+ *
+ * HtmlTag に紐づくスタイル情報を保持し、
+ * CSS 文字列へのレンダリングとフォントサイズ単位の参照を提供する。
+ */
+interface CssStyleManagerType extends Renderable {
+    readonly style: HtmlStyleType;
+    getFontSizeUnit(): HlUnit | undefined;
+}
+/**
+ * CssManagerInstance インターフェース
+ *
+ * HtmlTag が保持する CSS マネージャーのコンポジション型。
+ * Renderable を拡張し、CSS レンダリング機能を提供する。
+ *
+ * 依存方向: html/protocols/ が定義を所有し、css/manager/ が実装する。
+ */
+interface CssManagerInstance extends Renderable {
+    readonly layout: CssPositionMakerType;
+    readonly styleManager: CssStyleManagerType;
+    tagPath: string;
+    updateTagPath(newPath: string): void;
+    updateLazyLayoutRegister(register: LazyLayoutRegister | undefined): void;
+    /**
+     * スコープド CSS を出力する。
+     *
+     * `resolver` が指定された場合、wrapper class 名は resolver 経由で取得する
+     * （minify モード等が反映される）。省略時は従来通り純関数 `generateScopedClassName`
+     * を直接呼ぶ（バイト等価）。
+     */
+    renderCss(resolver?: IdentifierResolver): string;
+    addMediaRule(breakpointPx: number, props: Record<string, string>): void;
+}
+/**
+ * CssManagerType: CSS 管理インターフェース
+ *
+ * Task 0.2: CssManagerInstance をコンポジションで保持し、
+ * collectCssStyleString() は css.render() に委譲する。
+ *
+ * Requirements: 1.4
+ */
+/**
+ * CSS管理機能を提供するインターフェース
+ *
+ * このインターフェースは、HTML要素のCSS管理を担当します。
+ * CssManagerInstanceをコンポジションで保持し、CSS文字列の収集とレンダリングをサポートします。
+ *
+ * @remarks
+ * - `collectCssStyleString()` は後方互換性のために提供されており、内部的には `css.render()` に委譲します
+ * - `css` アクセサを通じて直接CssManagerInstanceにアクセスできます
+ * - HTMLタグの要素ツリー全体からCSSスタイルを収集します
+ *
+ * @example
+ * ```typescript
+ * class MyElement implements CssManagerType {
+ *   readonly css: CssManagerInstance = new CssManagerInstance();
+ *
+ *   collectCssStyleString(): string {
+ *     return this.css.render();
+ *   }
+ * }
+ *
+ * const element = new MyElement();
+ * element.css.setBackgroundColor('#fff');
+ * console.log(element.collectCssStyleString()); // "background-color: #fff;"
+ * ```
+ */
+interface CssManagerType {
+    /**
+     * この要素とその子孫から生成されたCSSスタイル文字列を収集
+     *
+     * @returns 統合されたCSSスタイル文字列
+     *
+     * @remarks
+     * このメソッドは後方互換性のために提供されています。
+     * 内部的には `css.render()` に委譲して、要素とその子孫すべてのCSSスタイルを収集します。
+     * 新しいコードでは `css.render()` を直接使用することを推奨します。
+     *
+     * @example
+     * ```typescript
+     * const div = new PairType('div');
+     * div.css.setWidth('100px');
+     * div.css.setHeight('50px');
+     * console.log(div.collectCssStyleString()); // "width: 100px; height: 50px;"
+     * ```
+     */
+    collectCssStyleString(): string;
+    /**
+     * CssManagerInstanceへの読み取り専用アクセサ
+     *
+     * @remarks
+     * このアクセサを通じて、CSS管理インスタンスに直接アクセスできます。
+     * スタイルの設定やレンダリングなど、CssManagerInstanceの全機能を利用できます。
+     *
+     * @example
+     * ```typescript
+     * const div = new PairType('div');
+     * div.css.setBackgroundColor('#f0f0f0');
+     * div.css.setPadding('10px');
+     * console.log(div.css.render()); // "background-color: #f0f0f0; padding: 10px;"
+     * ```
+     */
+    readonly css: CssManagerInstance;
+}
+/**
+ * jQuery method types supported by DraftOle
+ *
+ * 依存方向: html/protocols/ が定義を所有し、js/ が実装する。
+ */
+type JQueryMethodType = 'css' | 'height' | 'on' | 'text' | 'html' | 'addClass' | 'removeClass' | 'toggleClass';
+declare const JQUERY_METHOD_TYPES: readonly JQueryMethodType[];
+/**
+ * JQueryManagerInstance インターフェース
+ *
+ * HtmlTag が保持する jQuery マネージャーのコンポジション型。
+ * Renderable を拡張し、jQuery風DOM操作コードの蓄積・出力を提供する。
+ *
+ * 依存方向: html/protocols/ が定義を所有し、js/ が実装する。
+ */
+interface JQueryManagerInstance extends Renderable {
+    readonly path: string;
+    readonly usedMethods: ReadonlySet<JQueryMethodType>;
+    css(properties: Record<string, string>): string;
+    height(value: number, unit?: string): string;
+    on(eventType: string, handler: string): string;
+    click(handler: string): string;
+    keydown(handler: string): string;
+    keyup(handler: string): string;
+    text(value: string, isVariable?: boolean): string;
+    html(value: string): string;
+    addClass(className: string): string;
+    removeClass(className: string): string;
+    toggleClass(className: string, force?: boolean): string;
+    needsHelper(): boolean;
+    updatePath(newPath: string): void;
+    render(): string;
+}
+/**
+ * JQueryManagerProtocol: jQuery管理インターフェース
+ *
+ * Task 3.1 で型安全化: Set<string> → Set<JQueryMethodType>
+ * jqm アクセサを追加して JQueryManagerInstance への参照を提供
+ *
+ * Requirements: 1.5, 1.9, 6.1, 6.2
+ */
+/**
+ * jQuery管理機能を提供するインターフェース
+ *
+ * このインターフェースは、HTML要素のjQuery機能管理を担当します。
+ * JQueryManagerInstanceをコンポジションで保持し、JavaScript生成とTree-shakingサポートを提供します。
+ *
+ * @remarks
+ * - HTML要素ツリー全体からjQueryコードを収集します
+ * - 使用されたjQueryメソッドを追跡してTree-shakingを可能にします
+ * - `jqm` アクセサは `css` アクセサと対称的な設計です
+ *
+ * Preconditions: JQueryManagerInstanceが適切に初期化されていること
+ * Postconditions: collectJsContent()は要素とその子孫すべてのjQueryコードを返す
+ * Invariants: 収集されたメソッドセットは重複を含まない
+ *
+ * @example
+ * ```typescript
+ * const div = new PairType('div');
+ * div.jqm.addClass('active');
+ * div.jqm.onClick('alert("clicked")');
+ *
+ * console.log(div.collectJsContent());
+ * // $('#element').addClass('active').on('click', function() { alert("clicked"); });
+ *
+ * const methods = div.collectUsedMethods();
+ * console.log(methods); // Set { 'addClass', 'on' }
+ * ```
+ */
+interface JQueryManagerProtocol {
+    /**
+     * この要素とその子孫から生成されたjQueryコードを収集
+     *
+     * @returns 統合されたJavaScript文字列（jQuery形式）
+     *
+     * @remarks
+     * 要素ツリーを再帰的に走査し、各要素のjQueryコードを収集して統合します。
+     * 生成されるコードは、DOMの準備完了後（$(document).ready()）に実行されることを前提としています。
+     *
+     * @example
+     * ```typescript
+     * const div = new PairType('div');
+     * div.addHtmlAttribute(new HtmlAttribute('id', 'myDiv'));
+     * div.jqm.addClass('container');
+     * div.jqm.setCss('background-color', '#fff');
+     *
+     * console.log(div.collectJsContent());
+     * // $('#myDiv').addClass('container').css('background-color', '#fff');
+     * ```
+     */
+    collectJsContent(): string;
+    /**
+     * この要素とその子孫で使用されたjQueryメソッド種別を収集
+     *
+     * @returns JQueryMethodTypeのSet（重複なし）
+     *
+     * @remarks
+     * この情報はTree-shakingに使用され、実際に使用されたjQueryメソッドだけを
+     * 最終的なバンドルに含めることができます。
+     * 要素ツリー全体を走査し、すべての使用済みメソッドを収集します。
+     *
+     * @example
+     * ```typescript
+     * const div = new PairType('div');
+     * div.jqm.addClass('container');
+     * div.jqm.onClick('handleClick()');
+     *
+     * const methods = div.collectUsedMethods();
+     * console.log(methods); // Set { 'addClass', 'on' }
+     * ```
+     */
+    collectUsedMethods(): Set<JQueryMethodType>;
+    /**
+     * JQueryManagerInstanceへの読み取り専用アクセサ
+     *
+     * @remarks
+     * このアクセサを通じて、jQuery管理インスタンスに直接アクセスできます。
+     * jQueryメソッドの設定や管理など、JQueryManagerInstanceの全機能を利用できます。
+     * CssManagerTypeの `css` アクセサと対称的な設計になっています。
+     *
+     * @example
+     * ```typescript
+     * const div = new PairType('div');
+     * div.jqm.addClass('active');
+     * div.jqm.onClick('handleClick()');
+     * div.jqm.setData('userId', '123');
+     *
+     * console.log(div.jqm.render());
+     * // .addClass('active').on('click', function() { handleClick(); }).data('userId', '123')
+     * ```
+     */
+    readonly jqm: JQueryManagerInstance;
+}
+/**
+ * CSS スタイルクラスの共通基底クラス。
+ *
+ * プロパティ保存・重複検知ガード・レンダリングを提供する。
+ * 全 CSS スタイルクラス（CSSFont, CSSText 等）はこのクラスを継承する。
+ *
+ * @remarks
+ * - `_props` は `private readonly` のため、サブクラスは `setProp` / `getProp` 経由でのみアクセスする
+ * - `setProp` は `guardDuplicateCssProperty` を必ず呼んでから Map に書き込む
+ * - `render()` は `renderCssProperties` に委譲し、サニタイズ・ソートを引き継ぐ
+ */
+declare abstract class CSSPropertyGroup implements Renderable {
+    private readonly _props;
+    /**
+     * CSS プロパティを保存する。重複設定は DEV モードで検知される。
+     *
+     * @param cssKey - CSS プロパティキー（例: 'font-size'）
+     * @param value - プロパティ値
+     */
+    protected setProp(cssKey: string, value: string): this;
+    /**
+     * 保存済み CSS プロパティ値を取得する。
+     * 公開 getter が必要なサブクラス（例: CSSFont.getFontSize()）で使用する。
+     *
+     * @param cssKey - CSS プロパティキー
+     * @returns 設定済みの値、または未設定の場合は undefined
+     */
+    protected getProp(cssKey: string): string | undefined;
+    /**
+     * string | HlUnit を CSS 文字列に変換するヘルパー。
+     *
+     * @param value - CSS 値文字列または HlUnit
+     * @returns CSS 値文字列
+     */
+    protected resolveUnit(value: string | HlUnit): string;
+    /**
+     * string | HlUnit を受け取り、resolveUnit で変換した後に setProp で保存するヘルパー。
+     *
+     * @param cssKey - CSS プロパティキー（例: 'margin-top'）
+     * @param value - CSS 値文字列または HlUnit
+     * @returns this（メソッドチェーン用）
+     */
+    protected setUnitProp(cssKey: string, value: string | HlUnit): this;
+    /**
+     * 設定済みプロパティを CSS 文字列としてレンダリングする。
+     * renderCssProperties に委譲: アルファベットソート・サニタイズ・フォーマット。
+     *
+     * @returns CSS プロパティ文字列（例: `color: red;\nfont-size: 16px;`）、未設定の場合は空文字列
+     */
+    render(): string;
+}
+/**
+ * Task 4.1: CSSAnimation -- アニメーション・トランジションプロパティ
+ *
+ * CSSPropertyGroup を継承し、共通の setProp/render パターンを利用する。
+ * 14のAnimation/Transition関連CSSプロパティを型安全に管理し、
+ * 設定済みプロパティのみをアルファベット順でCSS文字列として出力する。
+ *
+ * Requirements: 6.2, 6.3, 6.5
+ */
+/**
+ * アニメーション・トランジションプロパティを管理するクラス
+ *
+ * アニメーション系: animation-name, animation-duration, animation-timing-function,
+ *   animation-delay, animation-iteration-count, animation-direction,
+ *   animation-fill-mode, animation-play-state, animation
+ * トランジション系: transition-property, transition-duration,
+ *   transition-timing-function, transition-delay, transition
+ */
+declare class CSSAnimation extends CSSPropertyGroup {
+    /** animation-name を設定する */
+    setAnimationName(value: string): this;
+    /** animation-duration を設定する */
+    setAnimationDuration(value: string): this;
+    /** animation-timing-function を設定する */
+    setAnimationTimingFunction(value: string): this;
+    /** animation-delay を設定する */
+    setAnimationDelay(value: string): this;
+    /** animation-iteration-count を設定する */
+    setAnimationIterationCount(value: string): this;
+    /** animation-direction を設定する */
+    setAnimationDirection(value: string): this;
+    /** animation-fill-mode を設定する */
+    setAnimationFillMode(value: string): this;
+    /** animation-play-state を設定する */
+    setAnimationPlayState(value: string): this;
+    /** animation ショートハンドを設定する */
+    setAnimation(value: string): this;
+    /** transition-property を設定する */
+    setTransitionProperty(value: string): this;
+    /** transition-duration を設定する */
+    setTransitionDuration(value: string): this;
+    /** transition-timing-function を設定する */
+    setTransitionTimingFunction(value: string): this;
+    /** transition-delay を設定する */
+    setTransitionDelay(value: string): this;
+    /** transition ショートハンドを設定する */
+    setTransition(value: string): this;
+}
+/**
+ * CSS標準色名定数
+ *
+ * 主要なCSS色名とCSS特殊キーワードを型安全に定義する。
+ * {@link CSSColor.named}() メソッドで使用される。
+ *
+ * ## カテゴリ
+ *
+ * - **基本色**: black, white, red, green, blue, yellow, cyan, magenta, orange, pink, purple, brown
+ * - **グレー系**: gray, grey, darkGray, lightGray, dimGray, silver
+ * - **拡張色**: navy, teal, maroon, olive, lime, aqua, fuchsia, coral, salmon, gold, indigo, violet, crimson, turquoise
+ * - **CSS特殊キーワード**: transparent, currentColor
+ *
+ * @example
+ * ```ts
+ * // 基本的な使用
+ * CSSColorName.red // → "red"
+ * CSSColorName.transparent // → "transparent"
+ *
+ * // CSSColorと組み合わせて使用
+ * const color = CSSColor.named(CSSColorName.blue);
+ * console.log(color.toString()); // → "blue"
+ *
+ * // プロパティクラスでの使用
+ * const font = new CSSFont();
+ * font.setColorValue(CSSColor.named(CSSColorName.red));
+ * ```
+ *
+ * @see {@link CSSColor}
+ * @see {@link CSSColorNameValue}
+ */
+declare const CSSColorName: {
+    readonly black: "black";
+    readonly white: "white";
+    readonly red: "red";
+    readonly green: "green";
+    readonly blue: "blue";
+    readonly yellow: "yellow";
+    readonly cyan: "cyan";
+    readonly magenta: "magenta";
+    readonly orange: "orange";
+    readonly pink: "pink";
+    readonly purple: "purple";
+    readonly brown: "brown";
+    readonly gray: "gray";
+    readonly grey: "grey";
+    readonly darkGray: "darkgray";
+    readonly darkGrey: "darkgrey";
+    readonly lightGray: "lightgray";
+    readonly lightGrey: "lightgrey";
+    readonly dimGray: "dimgray";
+    readonly dimGrey: "dimgrey";
+    readonly silver: "silver";
+    readonly navy: "navy";
+    readonly teal: "teal";
+    readonly maroon: "maroon";
+    readonly olive: "olive";
+    readonly lime: "lime";
+    readonly aqua: "aqua";
+    readonly fuchsia: "fuchsia";
+    readonly coral: "coral";
+    readonly salmon: "salmon";
+    readonly gold: "gold";
+    readonly indigo: "indigo";
+    readonly violet: "violet";
+    readonly crimson: "crimson";
+    readonly turquoise: "turquoise";
+    readonly transparent: "transparent";
+    readonly currentColor: "currentColor";
+    readonly inherit: "inherit";
+};
+/**
+ * CSSColorName の値の型（ユニオン型）
+ */
+type CSSColorNameValue = (typeof CSSColorName)[keyof typeof CSSColorName];
+/**
+ * CSS色値オブジェクト
+ *
+ * HEX、RGB、RGBA、CSS色名、任意のCSS色文字列を統一的に扱える
+ * イミュータブルな値オブジェクト。型安全なファクトリメソッドと
+ * 検証メソッドを提供する。
+ *
+ * ## サポートする色形式
+ *
+ * - **HEX**: `#RGB`, `#RRGGBB`, `#RRGGBBAA`
+ * - **RGB**: `rgb(r, g, b)`
+ * - **RGBA**: `rgba(r, g, b, a)`
+ * - **色名**: CSS標準色名（{@link CSSColorName}）
+ * - **その他**: `hsl()`, `var()`, `currentColor` など
+ *
+ * @example
+ * ```ts
+ * // HEX形式
+ * const hex = CSSColor.hex('#ff0000');
+ * console.log(hex.toString()); // → "#ff0000"
+ * console.log(hex.isHex()); // → true
+ *
+ * // RGB形式
+ * const rgb = CSSColor.rgb(255, 0, 0);
+ * console.log(rgb.toString()); // → "rgb(255, 0, 0)"
+ * console.log(rgb.isRgb()); // → true
+ *
+ * // RGBA形式
+ * const rgba = CSSColor.rgba(255, 0, 0, 0.5);
+ * console.log(rgba.toString()); // → "rgba(255, 0, 0, 0.5)"
+ *
+ * // CSS色名
+ * const named = CSSColor.named('red');
+ * console.log(named.toString()); // → "red"
+ * console.log(named.isColorName()); // → true
+ *
+ * // 任意のCSS色文字列
+ * const custom = CSSColor.raw('hsl(0, 100%, 50%)');
+ * console.log(custom.toString()); // → "hsl(0, 100%, 50%)"
+ *
+ * // CSSプロパティクラスでの使用
+ * const font = new CSSFont();
+ * font.setColorValue(CSSColor.hex('#333'));
+ * ```
+ *
+ * @see {@link CSSColorName}
+ * @see {@link CSSColorNameValue}
+ */
+declare class CSSColor {
+    private readonly value;
+    /**
+     * @internal
+     * コンストラクタはプライベート。ファクトリメソッドを使用すること。
+     */
+    private constructor();
+    /**
+     * HEX値から CSSColor を生成する
+     *
+     * @param value - HEX色値（'#RGB', '#RRGGBB', '#RRGGBBAA' 形式）
+     * @returns CSSColor インスタンス
+     *
+     * @example
+     * ```ts
+     * CSSColor.hex('#f00');      // → "#f00" (短縮形)
+     * CSSColor.hex('#ff0000');   // → "#ff0000"
+     * CSSColor.hex('#ff0000ff'); // → "#ff0000ff" (アルファ付き)
+     * ```
+     */
+    static hex(value: string): CSSColor;
+    /**
+     * RGB値から CSSColor を生成する
+     *
+     * @param r - Red (0-255)
+     * @param g - Green (0-255)
+     * @param b - Blue (0-255)
+     * @returns CSSColor インスタンス
+     *
+     * @example
+     * ```ts
+     * CSSColor.rgb(255, 0, 0); // → "rgb(255, 0, 0)"
+     * ```
+     */
+    static rgb(r: number, g: number, b: number): CSSColor;
+    /**
+     * RGBA値から CSSColor を生成する
+     *
+     * @param r - Red (0-255)
+     * @param g - Green (0-255)
+     * @param b - Blue (0-255)
+     * @param a - Alpha (0-1)
+     * @returns CSSColor インスタンス
+     *
+     * @example
+     * ```ts
+     * CSSColor.rgba(255, 0, 0, 0.5); // → "rgba(255, 0, 0, 0.5)"
+     * ```
+     */
+    static rgba(r: number, g: number, b: number, a: number): CSSColor;
+    /**
+     * CSS標準色名から CSSColor を生成する
+     *
+     * @param name - CSS標準色名（{@link CSSColorNameValue}）
+     * @returns CSSColor インスタンス
+     *
+     * @example
+     * ```ts
+     * CSSColor.named('red');
+     * CSSColor.named('transparent');
+     * CSSColor.named('currentColor');
+     * ```
+     */
+    static named(name: CSSColorNameValue): CSSColor;
+    /**
+     * 任意のCSS色文字列から CSSColor を生成する
+     *
+     * hsl(), var(), カスタムプロパティなど、任意のCSS色表現に対応。
+     *
+     * @param value - 任意のCSS色文字列
+     * @returns CSSColor インスタンス
+     *
+     * @example
+     * ```ts
+     * CSSColor.raw('hsl(0, 100%, 50%)');
+     * CSSColor.raw('var(--primary-color)');
+     * CSSColor.raw('currentColor');
+     * ```
+     */
+    static raw(value: string): CSSColor;
+    /**
+     * 値が HEX 形式かどうかを判定する
+     *
+     * @returns HEX形式の場合 true
+     */
+    isHex(): boolean;
+    /**
+     * 値が rgb() 形式かどうかを判定する
+     *
+     * @returns rgb() 形式の場合 true
+     */
+    isRgb(): boolean;
+    /**
+     * 値が rgba() 形式かどうかを判定する
+     *
+     * @returns rgba() 形式の場合 true
+     */
+    isRgba(): boolean;
+    /**
+     * 値が CSS 標準色名かどうかを判定する
+     *
+     * @returns CSS標準色名の場合 true
+     */
+    isColorName(): boolean;
+    /**
+     * CSS色値の文字列表現を返す
+     *
+     * @returns CSS色値文字列
+     */
+    toString(): string;
+}
+/**
+ * CSSBackground -- 背景プロパティクラス
+ *
+ * background-color, background-image, background-size,
+ * background-position, background-repeat を管理する。
+ * 線形グラデーション（linear-gradient）のヘルパーメソッドを提供する。
+ * CSSColor 連携による型安全な色指定をサポートする。
+ *
+ * CSSPropertyGroup を継承し、共通の setProp/render パターンを利用する。
+ * Fluent setter（メソッドチェーン）対応。
+ * 設定プロパティのみ出力し、未設定は出力しない。
+ *
+ * Requirements: 5.4, 5.5, 5.7
+ */
+/** Options for setBackground() shorthand. */
+interface BackgroundOptions {
+    color?: string;
+    image?: string;
+    size?: string;
+    position?: string;
+    repeat?: string;
+}
+declare class CSSBackground extends CSSPropertyGroup {
+    setBackgroundColor(value: string): this;
+    setBackgroundImage(value: string): this;
+    setBackgroundSize(value: string): this;
+    setBackgroundPosition(value: string): this;
+    setBackgroundRepeat(value: string): this;
+    /**
+     * background ショートハンド設定。
+     * - 文字列: CSS `background:` ショートハンドとして出力（例: `'#fff url(...) no-repeat center/cover'`, `'radial-gradient(...), #000'`）
+     * - オブジェクト: 個別の background-* プロパティを一括設定
+     */
+    setBackground(value: string | BackgroundOptions): this;
+    setBackgroundColorValue(color: CSSColor): this;
+    setLinearGradient(direction: string, ...stops: string[]): this;
+    setRadialGradient(shape: string, ...stops: string[]): this;
+}
+/**
+ * CSSBorder -- 枠線プロパティクラス
+ *
+ * border-width, border-style, border-color（各方向個別対応）、
+ * border-radius（各角個別対応）を管理する。
+ *
+ * CSSPropertyGroup を継承し、共通の setProp/render パターンを利用する。
+ * Fluent setter（メソッドチェーン）対応。
+ * 設定プロパティのみ出力し、未設定は出力しない。
+ * CSSColor連携による型安全な色指定をサポート。
+ *
+ * Requirements: 5.6, 5.7
+ */
+/** Options for setBorder() shorthand. */
+interface BorderOptions {
+    width?: string;
+    style?: string;
+    color?: string;
+    radius?: string;
+}
+declare class CSSBorder extends CSSPropertyGroup {
+    /** 主要 border プロパティ（width/style/color/radius）を一括設定するショートハンド */
+    setBorder(options?: BorderOptions): this;
+    /** border-width を一括設定する */
+    setBorderWidth(value: string): this;
+    /** border-style を一括設定する */
+    setBorderStyle(value: string): this;
+    /** border-color を文字列で一括設定する */
+    setBorderColor(value: string): this;
+    /** border-radius を一括設定する */
+    setBorderRadius(value: string): this;
+    /** border-top-width を設定する */
+    setBorderTopWidth(value: string): this;
+    /** border-right-width を設定する */
+    setBorderRightWidth(value: string): this;
+    /** border-bottom-width を設定する */
+    setBorderBottomWidth(value: string): this;
+    /** border-left-width を設定する */
+    setBorderLeftWidth(value: string): this;
+    /** border-top-style を設定する */
+    setBorderTopStyle(value: string): this;
+    /** border-right-style を設定する */
+    setBorderRightStyle(value: string): this;
+    /** border-bottom-style を設定する */
+    setBorderBottomStyle(value: string): this;
+    /** border-left-style を設定する */
+    setBorderLeftStyle(value: string): this;
+    /** border-top-color を文字列で設定する */
+    setBorderTopColor(value: string): this;
+    /** border-right-color を文字列で設定する */
+    setBorderRightColor(value: string): this;
+    /** border-bottom-color を文字列で設定する */
+    setBorderBottomColor(value: string): this;
+    /** border-left-color を文字列で設定する */
+    setBorderLeftColor(value: string): this;
+    /** border-top-left-radius を設定する */
+    setBorderTopLeftRadius(value: string): this;
+    /** border-top-right-radius を設定する */
+    setBorderTopRightRadius(value: string): this;
+    /** border-bottom-right-radius を設定する */
+    setBorderBottomRightRadius(value: string): this;
+    /** border-bottom-left-radius を設定する */
+    setBorderBottomLeftRadius(value: string): this;
+    /** border-color を CSSColor で一括設定する */
+    setBorderColorValue(color: CSSColor): this;
+    /** border-top-color を CSSColor で設定する */
+    setBorderTopColorValue(color: CSSColor): this;
+    /** border-right-color を CSSColor で設定する */
+    setBorderRightColorValue(color: CSSColor): this;
+    /** border-bottom-color を CSSColor で設定する */
+    setBorderBottomColorValue(color: CSSColor): this;
+    /** border-left-color を CSSColor で設定する */
+    setBorderLeftColorValue(color: CSSColor): this;
+}
+/**
+ * CSSFlex -- Flexboxレイアウトプロパティ
+ *
+ * CSSPropertyGroup を継承し、setProp/getProp 経由でプロパティを管理する。
+ * Fluent setter（メソッドチェーン）対応。
+ * 設定プロパティのみ出力し、未設定は出力しない。
+ *
+ * Requirements: 4.1, 4.2, 4.3, 4.4, 4.5
+ */
+/**
+ * Flexboxレイアウトプロパティを管理するクラス
+ *
+ * コンテナプロパティ: flex-direction, justify-content, align-items,
+ *   align-content, flex-wrap, gap
+ * アイテムプロパティ: flex-grow, flex-shrink, flex-basis, align-self, order
+ */
+/** Options for setFlex() shorthand. */
+interface FlexOptions {
+    direction?: string;
+    justify?: string;
+    align?: string;
+    wrap?: string;
+    gap?: string;
+}
+declare class CSSFlex extends CSSPropertyGroup {
+    /** CSS flex ショートハンドプロパティを設定する（アイテム用: e.g. '1 1 auto'） */
+    setFlexValue(value: string): this;
+    /** display:flex + 主要プロパティを一括設定するショートハンド */
+    setFlex(options?: FlexOptions): this;
+    /** flex-direction を設定する */
+    setFlexDirection(value: string): this;
+    /** justify-content を設定する */
+    setJustifyContent(value: string): this;
+    /** align-items を設定する */
+    setAlignItems(value: string): this;
+    /** align-content を設定する */
+    setAlignContent(value: string): this;
+    /** flex-wrap を設定する */
+    setFlexWrap(value: string): this;
+    /** gap を設定する */
+    setGap(value: string): this;
+    /** flex-grow を設定する */
+    setFlexGrow(value: string): this;
+    /** flex-shrink を設定する */
+    setFlexShrink(value: string): this;
+    /** flex-basis を設定する */
+    setFlexBasis(value: string): this;
+    /** align-self を設定する */
+    setAlignSelf(value: string): this;
+    /** order を設定する */
+    setOrder(value: string): this;
+}
+/**
+ * CSSFont -- フォント・文字色プロパティクラス
+ *
+ * font-family, font-size, font-weight, font-style,
+ * color, line-height, letter-spacing を管理する。
+ *
+ * CSSPropertyGroup を継承し、setProp/getProp 経由でプロパティを管理する。
+ * Fluent setter（メソッドチェーン）対応。
+ * 設定プロパティのみ出力し、未設定は出力しない。
+ *
+ * Requirements: 5.1, 5.2, 5.7
+ */
+/** Options for setFont() shorthand. */
+interface FontOptions {
+    size?: string;
+    weight?: string;
+    family?: string;
+    lineHeight?: string;
+    color?: string;
+}
+declare class CSSFont extends CSSPropertyGroup {
+    /** 主要フォント・文字色プロパティを一括設定するショートハンド */
+    setFont(options?: FontOptions): this;
+    setFontFamily(value: string): this;
+    setFontSize(value: string): this;
+    setFontWeight(value: string): this;
+    setFontStyle(value: string): this;
+    setColor(value: string): this;
+    setLineHeight(value: string): this;
+    setLetterSpacing(value: string): this;
+    getFontSize(): string | undefined;
+    setColorValue(color: CSSColor): this;
+}
+/**
+ * CSSGrid -- グリッドレイアウトプロパティ
+ *
+ * CSSPropertyGroup を継承し、setProp/getProp 経由でプロパティを管理する。
+ * Fluent setter（メソッドチェーン）対応。
+ * 設定プロパティのみ出力し、未設定は出力しない。
+ *
+ * Requirements: 6.1, 6.5
+ */
+/** Options for setGrid() shorthand. */
+interface GridOptions {
+    columns?: number | string;
+    rows?: number | string;
+    gap?: string;
+    areas?: string;
+    autoFlow?: string;
+}
+/**
+ * グリッドレイアウトプロパティを管理するクラス
+ *
+ * コンテナプロパティ: grid-template-columns, grid-template-rows, grid-gap,
+ *   grid-template-areas, grid-auto-flow, grid-auto-columns, grid-auto-rows
+ * アイテムプロパティ: grid-column, grid-row, grid-column-start, grid-column-end,
+ *   grid-row-start, grid-row-end, grid-area
+ */
+declare class CSSGrid extends CSSPropertyGroup {
+    /** display:grid + 主要プロパティを一括設定するショートハンド */
+    setGrid(options?: GridOptions): this;
+    /** grid-template-columns を設定する */
+    setGridTemplateColumns(value: string): this;
+    /** grid-template-rows を設定する */
+    setGridTemplateRows(value: string): this;
+    /** grid-gap を設定する */
+    setGridGap(value: string): this;
+    /** grid-column を設定する */
+    setGridColumn(value: string): this;
+    /** grid-row を設定する */
+    setGridRow(value: string): this;
+    /** grid-column-start を設定する */
+    setGridColumnStart(value: string): this;
+    /** grid-column-end を設定する */
+    setGridColumnEnd(value: string): this;
+    /** grid-row-start を設定する */
+    setGridRowStart(value: string): this;
+    /** grid-row-end を設定する */
+    setGridRowEnd(value: string): this;
+    /** grid-template-areas を設定する */
+    setGridTemplateAreas(value: string): this;
+    /** grid-area を設定する */
+    setGridArea(value: string): this;
+    /** grid-auto-flow を設定する */
+    setGridAutoFlow(value: string): this;
+    /** grid-auto-columns を設定する */
+    setGridAutoColumns(value: string): this;
+    /** grid-auto-rows を設定する */
+    setGridAutoRows(value: string): this;
+}
+/**
+ * CSSList -- リストスタイルプロパティ
+ *
+ * CSSPropertyGroup を継承し、setProp/getProp 経由でプロパティを管理する。
+ * Fluent setter（メソッドチェーン）対応。
+ * 設定プロパティのみ出力し、未設定は出力しない。
+ *
+ * Requirements: 7.5, 7.7
+ */
+/**
+ * リストスタイルプロパティを管理するクラス
+ *
+ * プロパティ: list-style-type, list-style-position,
+ *   list-style-image, list-style (shorthand)
+ */
+declare class CSSList extends CSSPropertyGroup {
+    /** list-style-type を設定する */
+    setListStyleType(value: string): this;
+    /** list-style-position を設定する */
+    setListStylePosition(value: string): this;
+    /** list-style-image を設定する */
+    setListStyleImage(value: string): this;
+    /** list-style (shorthand) を設定する */
+    setListStyle(value: string): this;
+}
+/**
+ * 疑似クラス（:hover / :focus / :active）用 fluent スタイルビルダー。
+ *
+ * `Map<string, string>` に直接 CSS プロパティ（kebab-case）を書き込む。
+ * `CSSPseudo.applyBuilder()` がこの Map を消費する。
+ *
+ * エスケープハッチ `.set(property, value)` により、メソッドに未定義の
+ * CSS プロパティも任意に設定できる。
+ */
+declare class PseudoStyleBuilder {
+    private readonly _props;
+    color(v: string): this;
+    background(v: string): this;
+    backgroundColor(v: string): this;
+    opacity(v: string): this;
+    transform(v: string): this;
+    boxShadow(v: string): this;
+    border(v: string): this;
+    borderColor(v: string): this;
+    borderRadius(v: string): this;
+    fontSize(v: string): this;
+    fontWeight(v: string): this;
+    textDecoration(v: string): this;
+    padding(v: string | number): this;
+    width(v: string): this;
+    height(v: string): this;
+    cursor(v: string): this;
+    transition(v: string): this;
+    /** 任意の CSS プロパティを kebab-case で直接設定するエスケープハッチ */
+    set(property: string, value: string): this;
+    /** @internal CSSPseudo が Map を取得するための内部 API */
+    toMap(): ReadonlyMap<string, string>;
+}
+declare class CSSPseudo {
+    private _states;
+    setHover(builder: PseudoStyleBuilder): this;
+    setFocus(builder: PseudoStyleBuilder): this;
+    setActive(builder: PseudoStyleBuilder): this;
+    hasAny(): boolean;
+    renderForScope(scopeClass: string): string[];
+    private applyBuilder;
+}
+/**
+ * Task 3: CSSSpacing - HlUnit 統合と CSSPropertyGroup 移行
+ *
+ * CSSPropertyGroup を継承し、string | HlUnit の union 型セッターを提供する。
+ * setXxxUnit メソッドは後方互換エイリアスとして維持する。
+ *
+ * Requirements: 1.1, 1.2, 1.3, 2.1, 2.4, 3.1, 5.1, 5.2, 5.3, 5.4, 6.1
+ */
+/**
+ * CSS 余白プロパティ（margin / padding）を管理するクラス。
+ *
+ * CSSPropertyGroup を継承し、プロパティ保存・重複検知・レンダリングを委譲する。
+ * setXxx(value: string | HlUnit) の union 型セッターと、
+ * 後方互換のための setXxxUnit(hlUnit: HlUnit) エイリアスを提供する。
+ *
+ * @example
+ * ```ts
+ * const spacing = new CSSSpacing();
+ * spacing.setMarginTop('10px').setPaddingBottom('20px');
+ * spacing.render();
+ * // → 'margin-top: 10px;\npadding-bottom: 20px;'
+ * ```
+ */
+declare class CSSSpacing extends CSSPropertyGroup {
+    /** margin-top を設定する */
+    setMarginTop(value: string | HlUnit): this;
+    /** margin-right を設定する */
+    setMarginRight(value: string | HlUnit): this;
+    /** margin-bottom を設定する */
+    setMarginBottom(value: string | HlUnit): this;
+    /** margin-left を設定する */
+    setMarginLeft(value: string | HlUnit): this;
+    /** margin 一括指定を設定する */
+    setMargin(value: string): this;
+    /** padding-top を設定する */
+    setPaddingTop(value: string | HlUnit): this;
+    /** padding-right を設定する */
+    setPaddingRight(value: string | HlUnit): this;
+    /** padding-bottom を設定する */
+    setPaddingBottom(value: string | HlUnit): this;
+    /** padding-left を設定する */
+    setPaddingLeft(value: string | HlUnit): this;
+    /** padding 一括指定を設定する */
+    setPadding(value: string): this;
+    /** margin-top を HlUnit で設定する（後方互換エイリアス） */
+    setMarginTopUnit(hlUnit: HlUnit): this;
+    /** margin-right を HlUnit で設定する（後方互換エイリアス） */
+    setMarginRightUnit(hlUnit: HlUnit): this;
+    /** margin-bottom を HlUnit で設定する（後方互換エイリアス） */
+    setMarginBottomUnit(hlUnit: HlUnit): this;
+    /** margin-left を HlUnit で設定する（後方互換エイリアス） */
+    setMarginLeftUnit(hlUnit: HlUnit): this;
+    /** padding-top を HlUnit で設定する（後方互換エイリアス） */
+    setPaddingTopUnit(hlUnit: HlUnit): this;
+    /** padding-right を HlUnit で設定する（後方互換エイリアス） */
+    setPaddingRightUnit(hlUnit: HlUnit): this;
+    /** padding-bottom を HlUnit で設定する（後方互換エイリアス） */
+    setPaddingBottomUnit(hlUnit: HlUnit): this;
+    /** padding-left を HlUnit で設定する（後方互換エイリアス） */
+    setPaddingLeftUnit(hlUnit: HlUnit): this;
+}
+/**
+ * Task 5.3: CSSTable -- テーブルレイアウトプロパティ
+ *
+ * CSSPropertyGroup を継承することで、collectProperties() と render() の
+ * 重複実装を排除したリファクタリング済みクラス。
+ * 5つのTable関連CSSプロパティを型安全に管理し、
+ * 設定済みプロパティのみをアルファベット順でCSS文字列として出力する。
+ *
+ * Requirements: 7.4, 7.7
+ */
+/**
+ * テーブルレイアウトプロパティを管理するクラス
+ *
+ * プロパティ: border-collapse, border-spacing, table-layout,
+ *   caption-side, empty-cells
+ */
+declare class CSSTable extends CSSPropertyGroup {
+    /** border-collapse を設定する */
+    setBorderCollapse(value: string): this;
+    /** border-spacing を設定する */
+    setBorderSpacing(value: string): this;
+    /** table-layout を設定する */
+    setTableLayout(value: string): this;
+    /** caption-side を設定する */
+    setCaptionSide(value: string): this;
+    /** empty-cells を設定する */
+    setEmptyCells(value: string): this;
+}
+/**
+ * Task 4.3: CSSText -- テキスト装飾プロパティ
+ *
+ * CSSPropertyGroup を継承することで、collectProperties() と render() の
+ * 重複実装を排除したリファクタリング済みクラス。
+ * 13のText関連CSSプロパティを型安全に管理し、
+ * 設定済みプロパティのみをアルファベット順でCSS文字列として出力する。
+ *
+ * Requirements: 6.4, 6.5
+ */
+/**
+ * テキスト装飾プロパティを管理するクラス
+ *
+ * 基本プロパティ: text-align, text-decoration, text-transform, text-indent,
+ *   word-spacing, white-space, text-overflow
+ * 拡張プロパティ: text-decoration-color, text-decoration-style,
+ *   text-decoration-line, word-break, overflow-wrap, text-shadow
+ */
+declare class CSSText extends CSSPropertyGroup {
+    /** text-align を設定する */
+    setTextAlign(value: string): this;
+    /** text-decoration を設定する */
+    setTextDecoration(value: string): this;
+    /** text-transform を設定する */
+    setTextTransform(value: string): this;
+    /** text-indent を設定する */
+    setTextIndent(value: string): this;
+    /** word-spacing を設定する */
+    setWordSpacing(value: string): this;
+    /** white-space を設定する */
+    setWhiteSpace(value: string): this;
+    /** text-overflow を設定する */
+    setTextOverflow(value: string): this;
+    /** text-decoration-color を設定する */
+    setTextDecorationColor(value: string): this;
+    /** text-decoration-style を設定する */
+    setTextDecorationStyle(value: string): this;
+    /** text-decoration-line を設定する */
+    setTextDecorationLine(value: string): this;
+    /** word-break を設定する */
+    setWordBreak(value: string): this;
+    /** overflow-wrap を設定する */
+    setOverflowWrap(value: string): this;
+    /** text-shadow を設定する */
+    setTextShadow(value: string): this;
+}
+/**
+ * Task 5.1: CSSTransform -- 変形・フィルタプロパティ
+ *
+ * CSSPropertyGroup を継承することで、collectProperties() と render() の
+ * 重複実装を排除したリファクタリング済みクラス。
+ * 6つのTransform関連CSSプロパティを型安全に管理し、
+ * 設定済みプロパティのみをアルファベット順でCSS文字列として出力する。
+ *
+ * Requirements: 7.1, 7.2, 7.7
+ */
+/**
+ * 変形・フィルタプロパティを管理するクラス
+ *
+ * 変形プロパティ: transform, transform-origin
+ * フィルタプロパティ: filter, backdrop-filter
+ * パースペクティブプロパティ: perspective, perspective-origin
+ */
+declare class CSSTransform extends CSSPropertyGroup {
+    /** transform を設定する */
+    setTransform(value: string): this;
+    /** transform-origin を設定する */
+    setTransformOrigin(value: string): this;
+    /** filter を設定する */
+    setFilter(value: string): this;
+    /** backdrop-filter を設定する */
+    setBackdropFilter(value: string): this;
+    /** perspective を設定する */
+    setPerspective(value: string): this;
+    /** perspective-origin を設定する */
+    setPerspectiveOrigin(value: string): this;
+}
+/**
+ * CSSVisibility -- 表示制御・サイズ・可視性プロパティクラス
+ *
+ * display, width/height/min/max, visibility, z-index,
+ * overflow/overflowX/overflowY, float, clear を管理する。
+ *
+ * CSSPropertyGroup を継承し、setProp/getProp 経由でプロパティを管理する。
+ * Fluent setter（メソッドチェーン）対応。
+ * 設定プロパティのみ出力し、未設定は出力しない。
+ *
+ * Requirements: 3.1, 3.2, 3.5, 3.6, 7.6
+ */
+declare class CSSVisibility extends CSSPropertyGroup {
+    setDisplay(value: string): this;
+    setWidth(value: string): this;
+    setHeight(value: string): this;
+    setMinWidth(value: string): this;
+    setMaxWidth(value: string): this;
+    setMinHeight(value: string): this;
+    setMaxHeight(value: string): this;
+    setVisibility(value: string): this;
+    setZIndex(value: string): this;
+    setFloat(value: string): this;
+    setClear(value: string): this;
+}
+/**
+ * CSSVisual -- 視覚効果プロパティ
+ *
+ * CSSPropertyGroup を継承し、setProp/getProp 経由でプロパティを管理する。
+ * 6のVisual関連CSSプロパティを型安全に管理し、
+ * 設定済みプロパティのみをアルファベット順でCSS文字列として出力する。
+ *
+ * Requirements: 7.3, 7.7
+ */
+/**
+ * 視覚効果プロパティを管理するクラス
+ *
+ * プロパティ: box-shadow, opacity, cursor, overflow, overflow-x, overflow-y
+ */
+declare class CSSVisual extends CSSPropertyGroup {
+    /** box-shadow を設定する */
+    setBoxShadow(value: string): this;
+    /** opacity を設定する */
+    setOpacity(value: string): this;
+    /** cursor を設定する */
+    setCursor(value: string): this;
+    /** overflow を設定する */
+    setOverflow(value: string): this;
+    /** overflow-x を設定する */
+    setOverflowX(value: string): this;
+    /** overflow-y を設定する */
+    setOverflowY(value: string): this;
+}
+/**
+ * HTML要素のスタイル統合管理クラス
+ *
+ * 13種類のCSSプロパティクラスを統合的に保持し、一元的なCSS文字列出力を提供する。
+ * 各プロパティクラスは独立してメソッドチェーン可能で、設定されたプロパティのみが出力される。
+ *
+ * ## プロパティクラス一覧
+ *
+ * | カテゴリ | クラス | 管理プロパティ数 |
+ * |---------|--------|-----------------|
+ * | フォント | {@link CSSFont} | 7 |
+ * | 背景 | {@link CSSBackground} | 5 |
+ * | テキスト | {@link CSSText} | 13 |
+ * | 余白 | {@link CSSSpacing} | 10 |
+ * | 枠線 | {@link CSSBorder} | 20 |
+ * | 表示制御 | {@link CSSVisibility} | 31 |
+ * | Flexbox | {@link CSSFlex} | 11 |
+ * | Grid | {@link CSSGrid} | 14 |
+ * | 視覚効果 | {@link CSSVisual} | 6 |
+ * | 変形 | {@link CSSTransform} | 6 |
+ * | アニメーション | {@link CSSAnimation} | 14 |
+ * | テーブル | {@link CSSTable} | 5 |
+ * | リスト | {@link CSSList} | 4 |
+ *
+ * ## 出力順序
+ *
+ * レンダリング時のプロパティ出力順序（Swift版と同一）:
+ *
+ * 1. font → 2. backgroundColor → 3. text → 4. spacing → 5. border →
+ * 6. position → 7. flex → 8. grid → 9. visual → 10. transform →
+ * 11. animation → 12. table → 13. list
+ *
+ * @example
+ * ```ts
+ * const style = new HtmlStyle();
+ *
+ * // メソッドチェーンで複数プロパティを設定
+ * style.font
+ *   .setFontSize('16px')
+ *   .setFontWeight('bold')
+ *   .setColor('#333');
+ *
+ * style.spacing
+ *   .setMarginTop('10px')
+ *   .setPaddingLeft('20px');
+ *
+ * style.flex
+ *   .setFlexDirection('column')
+ *   .setJustifyContent('center');
+ *
+ * // 設定されたプロパティのみを出力
+ * console.log(style.render());
+ * // → "color: #333;
+ * //    font-size: 16px;
+ * //    font-weight: bold;
+ * //    margin-top: 10px;
+ * //    padding-left: 20px;
+ * //    align-items: center;
+ * //    flex-direction: column;"
+ * ```
+ *
+ * @see {@link HtmlStyleType}
+ */
+declare class HtmlStyle implements HtmlStyleType {
+    /** フォント・文字色プロパティ（7プロパティ） */
+    readonly font: CSSFont;
+    /** 背景プロパティ（5プロパティ） */
+    readonly backgroundColor: CSSBackground;
+    /** テキスト装飾プロパティ（13プロパティ） */
+    readonly text: CSSText;
+    /** 余白プロパティ（10プロパティ） */
+    readonly spacing: CSSSpacing;
+    /** 枠線プロパティ（20プロパティ） */
+    readonly border: CSSBorder;
+    /** 表示制御・可視性プロパティ（31プロパティ） */
+    readonly position: CSSVisibility;
+    /** Flexboxレイアウトプロパティ（11プロパティ） */
+    readonly flex: CSSFlex;
+    /** Gridレイアウトプロパティ（14プロパティ） */
+    readonly grid: CSSGrid;
+    /** 視覚効果プロパティ（6プロパティ） */
+    readonly visual: CSSVisual;
+    /** 変形・フィルタプロパティ（6プロパティ） */
+    readonly transform: CSSTransform;
+    /** アニメーション・トランジションプロパティ（14プロパティ） */
+    readonly animation: CSSAnimation;
+    /** テーブルレイアウトプロパティ（5プロパティ） */
+    readonly table: CSSTable;
+    /** リストスタイルプロパティ（4プロパティ） */
+    readonly list: CSSList;
+    /**
+     * 擬似クラス（:hover / :focus / :active）スタイル。
+     *
+     * Anti-Invariant:
+     *   CSSPseudo は意図的に `Renderable` を実装せず、`render()` の outputs 配列にも
+     *   含めない。擬似クラスは body-level プロパティ集約ではなく CSS ルールブロック
+     *   （セレクタ付き）であり、`CssManager.renderCss()` から `renderForScope(scopeClass)` を
+     *   直接呼び出して出力する。
+     */
+    readonly pseudo: CSSPseudo;
+    /**
+     * すべてのプロパティをCSS文字列としてレンダリングする
+     *
+     * 各プロパティクラスの出力を順序通りに結合し、空文字列のものは除外する。
+     * 未設定のプロパティは出力されない。
+     *
+     * @returns CSS文字列（全プロパティ未設定の場合は空文字列）
+     */
+    render(): string;
+}
+type EdgeSet = 'horizontal' | 'vertical' | 'top' | 'right' | 'bottom' | 'left';
+declare const Breakpoints: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+type BreakpointKey = keyof typeof Breakpoints;
+interface BreakpointStyles {
+    sm?: Partial<CSSStyleDeclaration>;
+    md?: Partial<CSSStyleDeclaration>;
+    lg?: Partial<CSSStyleDeclaration>;
+    xl?: Partial<CSSStyleDeclaration>;
+    [customPx: number]: Partial<CSSStyleDeclaration> | undefined;
+}
+/**
+ * `src/js/vanilla` モジュール全体で共有される型定義。
+ *
+ * - `JsExpr` / `JsBoolExpr`: JS 式を表す値オブジェクト型。
+ * - `ElementEventName`: `HTMLElementEventMap` のキーに制約されたイベント名。
+ * - `EventArgRef<K>`: `on()` ハンドラの第 2 引数として注入される型付きイベント参照。
+ * - `StringKeysOf<T>`: 文字列/数値/真偽プロパティのキーのみを抽出する内部ユーティリティ型。
+ * - `WritableStyleKey`: `CSSStyleDeclaration` の書き込み可能プロパティキーのみを抽出した型。
+ *
+ * 本ファイルは設計書 `design.md` の「types」セクションに対応する。
+ */
+/**
+ * JS 式を表す値オブジェクト。`.code` で生文字列を、メソッドで合成式を得る。
+ * 具体的なチェーンメソッド（`eq` / `ne` / `or` / `trim` / `isFalsy` / `isTruthy`）は
+ * 後続タスクで実装する。
+ */
+interface JsExpr {
+    readonly __jsExpr: true;
+    readonly code: string;
+    eq(other: string | number | JsExpr): JsBoolExpr;
+    ne(other: string | number | JsExpr): JsBoolExpr;
+    or(fallback: string | JsExpr): JsExpr;
+    trim(): JsExpr;
+    isFalsy(): JsBoolExpr;
+    isTruthy(): JsBoolExpr;
+}
+/**
+ * JS 真偽値式を表す値オブジェクト。`JsExpr` のサブタイプ。
+ * `ifThen` / `toggleClass(force)` などで型レベルに真偽式のみを許容するための標識。
+ */
+interface JsBoolExpr extends JsExpr {
+    readonly __jsBool: true;
+}
+/**
+ * 入力系要素（`value` プロパティを持つ要素）を表す内部型。
+ * `ElementRef.value` の条件付き公開のために使用する。
+ */
+type InputLikeElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+/**
+ * 要素参照を「変数参照 / セレクタ / 任意の JS 式」の 3 形態で統一表現する値オブジェクト。
+ * 不透明型として扱い、`kind` と `code` のみを外部に露出する。
+ *
+ * - `kind: 'var'`: `jsName` 由来の変数参照。`code === varName`。
+ * - `kind: 'selector'`: `document.querySelector(sel)` のインライン展開。
+ * - `kind: 'expr'`: 任意の JS 式（内部用）。
+ *
+ * `textContent` / `value` は `JsExpr` として遅延的に露出する。
+ * `value` は要素型 `E` が入力系要素のときのみ型レベルでアクセス可能。
+ */
+interface ElementRef<E extends Element = Element> {
+    readonly __ref: true;
+    readonly kind: 'var' | 'selector' | 'expr';
+    readonly code: string;
+    readonly textContent: JsExpr;
+    readonly value: E extends InputLikeElement ? JsExpr : never;
+    cache(name?: string): ElementRef<E>;
+    /**
+     * `element.classList.contains(name)` を `JsBoolExpr` として返す。
+     * `ifThen` / `toggleClass(force)` / `filterNot` 等の真偽式引数に使用する。
+     */
+    containsClass(name: string): JsBoolExpr;
+}
+/**
+ * `ElementTarget` 判別共用体の定義。
+ *
+ * 設計書 `design.md` の「Target 抽象」「ElementTarget union」に対応。
+ * バインドコマンドが対象 DOM 要素を指す方法を 2 種類のバリアントで表現する：
+ *
+ * - `'sel'`: CSS セレクタ文字列で指定（既存挙動・後方互換）。
+ *   ランタイムでは `document.querySelector(selector)` で解決される。
+ * - `'closure-ref'`: クロージャ内ローカル変数名で指定（each テンプレート等）。
+ *   ランタイムではコード生成時の裸の識別子（例: `_e0`）として埋め込まれる。
+ * - `'deferred-self'`: 生成時点で対象要素が未確定。ランタイムに `this` として解決される。
+ *
+ * このモジュールは型のみを export する純粋な型定義ファイルであり、
+ * 後続タスク（5.3 `_getTargetCode` リファクタ、5.4 `binding-emitter`
+ * 各 emit 関数の引数型統一）から canonical な型として import される。
+ *
+ * NOTE: `commands.ts` の `ElementTarget`（`'var' | 'sel'`）とは別の union。
+ * 5.3 / 5.4 のリファクタで両者を整合させる予定（本タスクでは触らない）。
+ *
+ * Requirements: 4.1, 4.2, 4.4, 4.5
+ */
+/**
+ * CSS セレクタ文字列で対象要素を指すバリアント。
+ *
+ * 既存の `{ kind: 'sel', selector }` 構造をそのまま踏襲する（後方互換）。
+ */
+type SelectorTarget = {
+    readonly kind: 'sel';
+    readonly selector: string;
+};
+/**
+ * クロージャ内ローカル変数名で対象要素を指すバリアント。
+ *
+ * `varName` は factory コード内のローカル変数名（`_e0`, `_e1` 等）。
+ * ランタイムには裸の識別子としてそのまま埋め込まれる。
+ */
+type ClosureRefTarget = {
+    readonly kind: 'closure-ref';
+    readonly varName: string;
+};
+/**
+ * 遅延解決バリアント。バインドコマンド生成時点では対象要素が未確定で、
+ * ランタイムに `this`（自身の要素）として解決されることを示す。
+ *
+ * Requirements: 1.1, 1.2, 1.3, 4.1
+ */
+type DeferredSelfTarget = {
+    readonly kind: 'deferred-self';
+};
+/**
+ * 要素ターゲットの判別共用体。
+ *
+ * `kind` フィールドによる discriminated union として narrow できる。
+ */
+type ElementTarget = SelectorTarget | ClosureRefTarget | DeferredSelfTarget;
+/**
+ * 内部命令レコード `VanillaCommand` 判別共用体と JS 文字列化関数。
+ *
+ * 設計書 `design.md` の「commands: VanillaCommand」「renderCommand」「renderCommands」に対応。
+ * 本モジュールは全 API が発行する命令の代数的データ型と、それらを JS 文字列へ
+ * 変換する純関数を 1 箇所に集約する。`jQuery` / `$` を出力に含めない制約を
+ * コードレビュー可能にする責務を負う（Req 1.5, 7.1）。
+ */
+/**
+ * each テンプレートの捕捉情報。
+ * `each-template.ts` との循環 import を避けるためここで独立定義する。
+ * （`each-template.ts` が `commands.ts` を import するため循環になる）
+ *
+ * - `itemStateIdPattern`: "{parent}.item{i}" パターン
+ * - `templateCommands`: テンプレート HtmlTag の `_pending` から取り出した命令列
+ */
+interface EachTemplateSnapshot {
+    /** スロット ID パターン。ランタイムが "{i}" を実際のインデックスに置換する */
+    itemStateIdPattern: string;
+    /** テンプレート内の VanillaCommand（_pending からスナップショット） */
+    templateCommands: VanillaCommand[];
+    /**
+     * 6.1: closure 形式 factory 関数文字列。
+     * `function(arrayId, idx, draftole) { ... return _e0; }` 形式。
+     */
+    factoryCode?: string;
+    /** factory コード生成方式。closure（新形）/ static-placeholder（旧形）。 */
+    factoryKind?: 'closure' | 'static-placeholder';
+    /**
+     * each-closure-fix: closure 経路で build-phase 直後に保持する template HtmlTag。
+     * emit-phase で tagPath 注入と factoryCode 生成のために再走査する。
+     * factoryCode 確定後は不要となるため optional。
+     */
+    _templateRoot?: HtmlTag;
+}
+/**
+ * バニラ JS ビルダーが発行する内部命令の判別共用体。
+ * 各バリアントは `type` で識別され、`renderCommand` により JS 文字列に変換される。
+ */
+type VanillaCommand = {
+    type: 'addEventListener';
+    target: ElementTarget;
+    event: string;
+    handlerCode: string;
+} | {
+    type: 'domReady';
+    bodyCode: string;
+} | {
+    type: 'declareFunction';
+    name: string;
+    params: readonly string[];
+    bodyCode: string;
+} | {
+    type: 'declareConst';
+    name: string;
+    expr: string;
+} | {
+    type: 'classListToggle';
+    target: ElementTarget;
+    name: string;
+    force?: string;
+} | {
+    type: 'classListAdd';
+    target: ElementTarget;
+    name: string;
+} | {
+    type: 'classListRemove';
+    target: ElementTarget;
+    name: string;
+} | {
+    type: 'setProp';
+    target: ElementTarget;
+    prop: 'textContent' | 'value';
+    expr: string;
+} | {
+    type: 'setStyle';
+    target: ElementTarget;
+    key: string;
+    expr: string;
+} | {
+    type: 'appendChild';
+    parent: ElementTarget;
+    child: ElementTarget;
+} | {
+    type: 'remove';
+    target: ElementTarget;
+} | {
+    type: 'forEach';
+    listExpr: string;
+    itemVar: string;
+    bodyCode: string;
+} | {
+    type: 'if';
+    condition: string;
+    thenCode: string;
+    elseCode?: string;
+} | {
+    type: 'expr';
+    code: string;
+} | {
+    type: 'raw';
+    code: string;
+} | {
+    type: 'state-init';
+    id: string;
+    initial: JsExpr;
+} | {
+    type: 'state-set';
+    id: string;
+    value: JsExpr;
+} | {
+    type: 'state-update';
+    id: string;
+    body: JsExpr;
+} | {
+    type: 'bind-text';
+    target: ElementTarget;
+    stateId: string;
+    transform?: JsExpr;
+} | {
+    type: 'bind-value';
+    target: ElementTarget;
+    stateId: string;
+    transform?: JsExpr;
+} | {
+    type: 'bind-checked';
+    target: ElementTarget;
+    stateId: string;
+    transform?: JsExpr;
+} | {
+    type: 'bind-class-all';
+    target: ElementTarget;
+    stateId: string;
+    transform?: JsExpr;
+} | {
+    type: 'bind-class-add';
+    target: ElementTarget;
+    stateId: string;
+    transform?: JsExpr;
+} | {
+    type: 'bind-style';
+    target: ElementTarget;
+    prop: string;
+    stateId: string;
+    transform?: JsExpr;
+} | {
+    type: 'bind-attr';
+    target: ElementTarget;
+    attr: string;
+    stateId: string;
+    transform?: JsExpr;
+} | {
+    type: 'bind-each';
+    target: ElementTarget;
+    stateId: string;
+    template: EachTemplateSnapshot;
+} | {
+    type: 'derive-state';
+    sourceId: string;
+    derivedId: string;
+    transformBody: JsExpr;
+} | {
+    type: 'handler-body';
+    target: ElementTarget;
+    event: string;
+    code: string;
+    params: readonly string[];
+};
+/**
+ * `VanillaScriptBuilder` クラス本体（命令蓄積器 + `render()`）。
+ *
+ * 設計書 `design.md` の「vanilla-script-builder」「VanillaScope」節に対応する。
+ *
+ * 責務:
+ * - トップレベル命令キュー、`onDomReady` ブロック用の単一キュー、子 Builder を用いた
+ *   関数本体 / `onDomReady` / `forEach` / `ifThen` / イベントハンドラ本体の組み立て。
+ * - `render()` は冪等で副作用を持たず、`append` 順を保った JS 文字列を返す（Req 7.4）。
+ * - `hasDomReady` は `onDomReady` が 1 度でも呼ばれたかを反映する（wrapDOMReady 併用判定に使用）。
+ * - 出力に `jQuery` / `$` を含まない（Req 1.5, 7.1、`commands.ts` の語彙集約による担保）。
+ *
+ * 公開 API は `createVanillaScript()` ファクトリのみ。クラス本体は外部 import しない。
+ */
+/**
+ * `ifThen` の条件や `let` の値、`call` の引数に渡す最小インターフェース。
+ * `.code` を備えた任意の値オブジェクト（`JsExpr` / `ElementRef` 等）が適合する。
+ */
+interface ScopeExpr {
+    readonly code: string;
+}
+/**
+ * スコープ内で利用できる制御・値組み立て API。
+ *
+ * Task 3.1 で提供する最小セット：`raw` / `let` / `call` / `return` / `ifThen`。
+ * `query` / `on` / `classList.*` 等は後続タスクで別ファイルから拡張される想定。
+ */
+interface VanillaScope {
+    /**
+     * 内部 API：現在スコープのキューに任意の `VanillaCommand` を追加する。
+     *
+     * このフックは `event-api` / `query-api` / `dom-api` / `tree-api` などの
+     * ユーザ向け関数が、Scope インターフェース自体を `on` / `query` / `classList.*`
+     * 等で肥大化させずに命令を append できるようにするためのエスケープハッチ。
+     * 利用者コードからの直接呼び出しは非推奨（命令種別は内部詳細）。
+     */
+    _append(cmd: VanillaCommand): void;
+    /**
+     * 内部 API：現在スコープ用に子スコープを構築するためのフック。
+     * `event-api` のハンドラ本体組み立てなど、子キューで命令を蓄積して
+     * まとめて `renderCommands` に掛ける用途に利用する。
+     */
+    _childScope(queue: VanillaCommand[]): VanillaScope;
+    /** 任意 JS 式を式として埋め込む。副作用として命令は発行しない（`JsExpr` 相当を返す）。 */
+    raw(code: string): ScopeExpr;
+    /**
+     * `const name = <value.code>;` 命令を現在スコープに append し、`name` を指す値オブジェクトを返す。
+     * 設計では `const`/`let` の区別は内部詳細であり、常に `const` を出力する。
+     */
+    let(name: string, value: ScopeExpr): ScopeExpr;
+    /**
+     * 関数呼び出し式 `name(args...)` を現在スコープに `expr` 命令として append する。
+     * 戻り値は式として再利用可能なオブジェクト（呼び出し結果を別文脈で使いたい場合）。
+     */
+    call(name: string, args?: readonly ScopeExpr[]): ScopeExpr;
+    /** `return;` を発行する。 */
+    return(): void;
+    /** `if (cond) { then } else? { orElse }` を発行する。 */
+    ifThen(condition: ScopeExpr, then: (s: VanillaScope) => void, orElse?: (s: VanillaScope) => void): void;
+}
+/**
+ * `render()` で JS 文字列を得るアキュムレータの公開ビュー。
+ */
+interface VanillaScript {
+    /** 生成される JS 文字列。末尾改行は含めない。 */
+    render(): string;
+    /**
+     * `render()` 出力が最外層で `DOMContentLoaded` リスナーを含むか。
+     * `wrapDOMReady` 併用の要否判定に利用する。
+     */
+    readonly hasDomReady: boolean;
+}
+/**
+ * `VanillaScript` に加えて命令 append と制御フロー API を公開する Builder 型。
+ * 公開 API からは `createVanillaScript()` 経由でのみ取得できる。
+ */
+interface VanillaScriptBuilder extends VanillaScript {
+    /** 内部 API：任意の `VanillaCommand` をトップレベルキューに追加する。 */
+    append(cmd: VanillaCommand): void;
+    /** `onDomReady` ブロックを開き、ハンドラ内で append された命令を DOMContentLoaded 内に合流する。 */
+    onDomReady(body: (s: VanillaScope) => void): void;
+    /** トップレベルに関数定義を追加する。 */
+    declareFunction(name: string, params: readonly string[], body: (s: VanillaScope) => void): void;
+    /** `declareFunction` の省略形。`fn(name, body)` なら params は空配列。 */
+    fn(name: string, body: (s: VanillaScope) => void): void;
+    fn(name: string, params: readonly string[], body: (s: VanillaScope) => void): void;
+}
+/**
+ * `VanillaScriptBuilder` インスタンスを生成する公開ファクトリ。
+ *
+ * クラス実装は非公開であり、このファクトリ経由でのみ取得できる。
+ * `Root` は内部でこのファクトリを使用して単一の builder を遅延生成する。
+ * 直接利用する場合は `append` / `fn` / `onDomReady` / `render` を呼ぶ。
+ *
+ * @returns 新しい `VanillaScriptBuilder` インスタンス
+ *
+ * @example
+ * ```typescript
+ * const builder = createVanillaScript();
+ * builder.onDomReady(s => s.call('init'));
+ * console.log(builder.render());
+ * ```
+ */
+declare function createVanillaScript(): VanillaScriptBuilder;
+/**
+ * StateRegistry — 状態エントリの管理と状態 ID 採番を担うクラス。
+ *
+ * 設計書 `design.md` の「Components and Interfaces: StateRegistry」に対応。
+ * - 状態 ID → StateEntry のマッピングを管理する
+ * - 状態 ID を "s0", "s1", ... の形式で一意に採番する
+ * - state-init コマンド列を生成して FileExporter に提供する（Req 1.2, 1.3, 5.4）
+ *
+ * Note: StateInitCommand は tasks 3.1 で commands.ts に移動予定のため、
+ * 現時点ではこのファイル内にローカル定義する。
+ */
+/**
+ * 状態エントリ（StateRegistry 内部）。
+ * design.md の Data Models セクションに対応。
+ */
+interface StateEntry {
+    /** ランタイム状態 ID（例: "s0", "s1"）*/
+    runtimeId: string;
+    /** JSON.stringify された初期値を表す JS 式 */
+    initialExpr: JsExpr;
+    /** 型名（デバッグ用、optional）*/
+    typeHint?: string;
+}
+/**
+ * state-init コマンドを表すローカル型。
+ * タスク 3.1 で VanillaCommand に統合予定。
+ */
+interface StateInitCommand {
+    type: 'state-init';
+    id: string;
+    initial: JsExpr;
+}
+/**
+ * Computed 派生状態のエントリ。
+ * 方針 B: .map() で生成された Computed をランタイム状態として管理する。
+ * sourceId の変化を購読して derivedId を更新するサブスクリプションを生成する。
+ */
+interface DerivedEntry {
+    /** 派生状態の ID（allocateId() で採番済み）*/
+    derivedId: string;
+    /** 購読元の状態 ID（直接の親状態）*/
+    sourceId: string;
+    /** _v を入力変数とした変換式（例: `((_v).filter(...).length)`）*/
+    transformBody: JsExpr;
+}
+/**
+ * derive-state コマンドを表す型。
+ * file-exporter が renderCommand に渡すために使用する。
+ */
+interface DeriveStateCommand {
+    type: 'derive-state';
+    sourceId: string;
+    derivedId: string;
+    transformBody: JsExpr;
+}
+/**
+ * StateRegistry クラス。
+ *
+ * - `allocateId()`: "s0", "s1", ... の形式で一意な状態 ID を採番
+ * - `register(entry)`: StateEntry を entries マップに登録
+ * - `isEmpty()`: 状態が 1 つも宣言されていないか確認（Req 5.4）
+ * - `listInitCommands()`: state-init コマンド列を返す（FileExporter が利用）
+ */
+declare class StateRegistry {
+    private _nextId;
+    readonly entries: Map<string, StateEntry>;
+    private readonly _derivedEntries;
+    /**
+     * 次の一意な状態 ID を採番して返す（"s0", "s1", ...）。
+     * 採番のみ行い、エントリへの登録は行わない。
+     * Req 1.3: 同一 Root から root.state(...) を複数回呼び出すと、呼び出しごとに異なる状態 ID を採番。
+     */
+    allocateId(): string;
+    /**
+     * StateEntry を entries マップに追加する。
+     * runtimeId をキーとして Map に格納する。
+     */
+    register(entry: StateEntry): void;
+    /**
+     * Computed 派生エントリを登録する。
+     * .map() で生成された Computed ごとに呼ばれる（方針 B）。
+     */
+    registerDerived(entry: DerivedEntry): void;
+    /**
+     * derive-state コマンド列を返す。
+     * file-exporter が state-init の直後に出力して親→派生のサブスクリプションを確立する。
+     * 登録順で返すことで依存関係の解決順序を保証する。
+     */
+    listDeriveCommands(): DeriveStateCommand[];
+    /**
+     * 状態が 1 つも宣言されていないか確認する。
+     * Req 5.4: Root に状態が 1 つも宣言されていない場合、FileExporter はプレリュードを出力しない。
+     */
+    isEmpty(): boolean;
+    /**
+     * state-init コマンド列を返す。
+     * FileExporter が script.js に初期化コードを出力するために利用する（Req 1.2）。
+     * エントリの登録順でコマンドを返す。
+     */
+    listInitCommands(): StateInitCommand[];
+}
+/**
+ * StateJsAccessor — State 値を読み書きする JS 文字列アクセサ
+ *
+ * 設計書 `design.md` の「Component: StateJsAccessor (NEW)」に対応。
+ *
+ * - `get()` → `"__draftole__.state('<runtimeId>').get()"`
+ * - `set(expr)` → `"__draftole__.state('<runtimeId>').set(<expr>)"`
+ * - `update(body)` → `"__draftole__.state('<runtimeId>').set((__v) => { <body> })"`
+ *
+ * Requirements: 1.1, 1.2, 1.3, 1.4
+ */
+interface StateJsAccessor {
+    /** `"__draftole__.state('<runtimeId>').get()"` を返す */
+    get(): string;
+    /** `"__draftole__.state('<runtimeId>').set(<expr>)"` を返す */
+    set(expr: string): string;
+    /** `"__draftole__.state('<runtimeId>').set((__v) => { <body> })"` を返す */
+    update(body: string): string;
+}
+/**
+ * State<T> / Computed<T> の実装
+ *
+ * 設計書 `design.md` の「Components and Interfaces: State<T> / Computed<T>」に対応。
+ *
+ * - `State<T>`: 読み書き可能な観測可能値オブジェクト（ビルド時）
+ * - `Computed<T>`: 読み取り専用の派生値オブジェクト（`.set` を持たない）
+ * - `createStateExpr`: runtimeId から `__draftole__.state(id).get()` 形式の JsExpr を生成
+ *
+ * 設計上の決定事項:
+ * - `.get()` は JsExpr を返す（ランタイム API 呼び出し式）
+ * - `.set(v)` / `.update(body)` は ScriptScope 内で呼ばれることを前提としたコマンド生成 API
+ *   （このタスクでは no-op / stub として実装）
+ * - `.map(fn)` は Computed<U> を返す（fn はビルド時に呼ばれる）
+ * - `.field(key)` は State/Computed の派生を返す（_parent / _fieldKey チェーンを保持）
+ * - `.each(fn)` は EachBinding<U> を返す（タスク 2.3 で詳細実装）
+ *
+ * Requirements: 1.4, 2.1, 2.2, 2.3, 3.1, 3.2, 3.4, 6.3
+ */
+/**
+ * ReadableState<T> を識別するための構造的マーカーシンボル。
+ *
+ * `declare const` なのでランタイムには存在しない（型レイヤのみ）。
+ * transformer の TypeChecker から 1 回の getTypeAtLocation で
+ * State / Computed / ScriptStateHandle を判別可能にする（Design D-7）。
+ */
+declare const DraftoleStateMarker: unique symbol;
+/** 配列要素型の抽出（design.md の ArrayItem<T>）*/
+type ArrayItem<T> = T extends readonly (infer U)[] ? U : never;
+/** each バインディングの戻り値型（design.md の EachBinding<U>）*/
+interface EachBinding<U> {
+    readonly _kind: 'each';
+    readonly _stateId: string;
+    readonly _template: U;
+}
+/**
+ * 読み取り専用の観測可能値インタフェース。
+ * State<T> / Computed<T> 共通。
+ *
+ * design.md: ReadableState<T>
+ */
+interface ReadableState<T> {
+    /** 構造的マーカー（Design D-7）: transformer の TypeChecker が State 型を識別するために使用。
+     * `declare const DraftoleStateMarker: unique symbol` なのでランタイムには存在しない。 */
+    readonly [DraftoleStateMarker]: 'state';
+    /**
+     * build 時の状態 ID（handler-serialization から参照可、Req 6.3）
+     * @deprecated Use state.js.get() / state.js.set() instead
+     */
+    readonly _runtimeId: string;
+    /** JS 文字列アクセサ（Req 1.1, 1.2, 1.5）*/
+    readonly js: StateJsAccessor;
+    /**
+     * ハンドラ内で呼び出すと現在の状態値（T）を返す（state-handler-typing Req 1.1）。
+     *
+     * 注意: ハンドラ外（モジュールトップレベル等）で呼び出すと、
+     *       transformer の whitelist-validator により静的エラーになる。
+     *       ビルド時に JS コード片が必要な場合は `state.js.get()` を使う。
+     */
+    get(): T;
+    /** 派生値 Computed<U>（Req 3.1）*/
+    map<U>(fn: (t: T) => U): Computed<U>;
+    /** オブジェクトフィールドの読み取り専用派生（Computed として返す）*/
+    field<K extends keyof T>(key: K): T extends object ? Computed<T[K]> : never;
+}
+/**
+ * 読み書き可能な観測可能値インタフェース。
+ *
+ * design.md: State<T>
+ */
+interface State<T> extends ReadableState<T> {
+    /** 書き込み: T の即値 または JsExpr（Req 2.2）*/
+    set(value: T): void;
+    set(value: JsExpr): void;
+    /** 更新関数: 本仕様では JsExpr 形式のみ（Req 2.3, R-2）*/
+    update(body: JsExpr): void;
+    /** 書き戻し可能なフィールド派生（State として返す、R-1 決定）*/
+    field<K extends keyof T>(key: K): T extends object ? State<T[K]> : never;
+    /** 配列要素を State<Item> として受け取る要素ビルダテンプレート（Req 3.5）*/
+    each<U extends HtmlTag | readonly HtmlTag[]>(fn: (item: State<ArrayItem<T>>) => U): EachBinding<U>;
+}
+/**
+ * 読み取り専用の派生値インタフェース。
+ *
+ * design.md: Computed<T>
+ * Req 3.2: set を持たない
+ */
+type Computed<T> = ReadableState<T>;
+/**
+ * `ScriptStateHandle<T>` の実装。
+ *
+ * 設計書 `design.md` の「ScriptScope.state / ScriptStateHandle<T>」に対応。
+ * ScriptScope 内でハンドラが `s.state(ref).set(v)` / `.update(body)` / `.get()` / `.field(k)`
+ * を呼び出すための軽量ファサード。
+ *
+ * - `.set(value)` → `state-set` コマンドを `VanillaScope._append` に積む
+ * - `.update(body)` → `state-update` コマンドを `VanillaScope._append` に積む
+ * - `.get()` → `State.get()` と等価な JsExpr を返す（_append しない）
+ * - `.field(key)` → フィールドに対応する派生 ScriptStateHandle を返す
+ *
+ * R-4 決定: 実体は `{ ref: ReadableState<T>, scope: VanillaScope }` のみ。
+ *
+ * Requirements: 6.1, 6.2, 6.3
+ */
+/**
+ * ハンドラ内から状態を更新するための軽量ハンドルインタフェース。
+ *
+ * design.md: ScriptStateHandle<T>
+ */
+interface ScriptStateHandle<T> {
+    /** 参照のみ（State.get と等価）。_append しない */
+    get(): JsExpr;
+    /** `state-set` コマンドを scope に _append する（Req 6.2）*/
+    set(value: T | JsExpr): void;
+    /** `state-update` コマンドを scope に _append する（Req 6.2）*/
+    update(body: JsExpr): void;
+    /** フィールドに対応する派生 ScriptStateHandle を返す（Req 6.1）*/
+    field<K extends keyof T>(key: K): ScriptStateHandle<T[K]>;
+}
+/**
+ * `ScriptScope`: `root.script` および要素メソッド `on` ハンドラの `s` 引数として
+ * 公開されるスクリプトスコープ API。
+ *
+ * 本ファイルは `unified-element-api` 仕様の Task 3.1 に対応する薄いアダプタであり、
+ * 既存 `VanillaScriptBuilder` / `VanillaScope` の実装をパススルーで露出する。
+ *
+ * 対応 requirement: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6
+ * 対応 design.md セクション: 「ScriptScope」
+ *
+ * 方針:
+ * - `ScriptScope` インターフェースは `VanillaScope` を拡張し、さらに
+ *   `VanillaScriptBuilder` のトップレベル API (`fn` / `onDomReady`) を表面化する。
+ * - `.if` は内部 `VanillaScope.ifThen` へのエイリアスである（design の公開語彙に揃える）。
+ * - 実装はクラスを作らず、既存オブジェクトに不足メソッドを合成する薄いラッパで与える。
+ * - `VanillaCommand` / `VanillaScope` の既存コントラクトは一切変更しない。
+ */
+/**
+ * `root.script` 相当の API。`VanillaScope` の制御フロー API に、
+ * トップレベル関数宣言 `fn` / DOMContentLoaded ブロック `onDomReady` と
+ * `.if` エイリアスを加えたもの。
+ *
+ * design.md のサービスインターフェースが公開する語彙
+ * （`fn` / `onDomReady` / `if` / `let` / `return` / `call` / `raw`）は
+ * すべて本インターフェース上で型解決可能である。
+ */
+interface ScriptScope extends VanillaScope {
+    /**
+     * トップレベルに関数定義を追加する。
+     * `VanillaScriptBuilder.fn` のパススルー。
+     */
+    fn(name: string, body: (s: ScriptScope) => void): void;
+    fn(name: string, params: readonly string[], body: (s: ScriptScope) => void): void;
+    /**
+     * `DOMContentLoaded` リスナー本体ブロックを登録する。
+     * `VanillaScriptBuilder.onDomReady` のパススルー。
+     */
+    onDomReady(body: (s: ScriptScope) => void): void;
+    /**
+     * `if (cond) { then } else? { orElse }` を現在スコープに発行する。
+     * 内部実装は `VanillaScope.ifThen` と同一（design の公開語彙 `.if` に揃えたエイリアス）。
+     */
+    if(condition: ScopeExpr, then: (s: ScriptScope) => void, orElse?: (s: ScriptScope) => void): void;
+    /**
+     * 状態参照から `ScriptStateHandle<T>` を取得する。
+     * ハンドラ内で `s.state(ref).set(v)` / `.update(body)` の形で状態を更新する（Req 6.1）。
+     */
+    state<T>(ref: ReadableState<T>): ScriptStateHandle<T>;
+    /**
+     * transformer が生成したシリアライズ済みハンドラ本体を `handler-body` コマンドとして発行する。
+     *
+     * transformer は `.on(event, arrowFn)` の第 2 引数を
+     * `(s) => s._emitHandlerBody(serialized, params)` の形に書き換える。
+     * `.on` 実装側の dispatcher がその関数を呼ぶとき `s` に本メソッドが存在する専用スコープが渡される。
+     *
+     * @param code - シリアライズ済みハンドラ本体の JS コード文字列
+     * @param params - ハンドラ引数名の配列（例: `["e"]` または `[]`）
+     */
+    _emitHandlerBody(code: string, params: readonly string[]): void;
+}
+/**
+ * `ElementMethods<Self>` 型と `ElementMixin` の実装。
+ *
+ * 本モジュールは `unified-element-api` 仕様の Task 3.3 に対応し、
+ * `HtmlTag` サブクラスへの DOM 操作メソッドの mixin 差し込みを提供する。
+ * Task 4.1 で reactive-state 仕様の状態受容オーバーロードを追加した。
+ *
+ * 設計方針:
+ * - `ElementMethods<Self>` は `.on/.setText/.setValue/.setStyle/.addClass/.toggleClass
+ *   /.removeClass/.appendChild` を定義するジェネリックインターフェース。
+ * - `applyElementMixin(proto)` は `HtmlTag` の prototype 上に各メソッドを直接差し込む
+ *   （module augmentation ではなく composition-root 側で呼び出す）。
+ * - 各メソッドは `_scope === undefined` の間は `_pending` バッファに追加し、
+ *   `_scope` が設定済みの場合は即時 `_scope._append` を呼び出す（遅延解決モデル）。
+ * - 文字列引数は `encodeLiteral`（= JSON.stringify）でリテラル化し、`JsExpr` は `.code` を素通し（Req 4.5）。
+ * - `on` ハンドラは `ScriptScope` 型の子スコープを受け取り、本体を即時評価してから
+ *   文字列化した `handlerCode` を `addEventListener` 命令に埋め込む。
+ * - 状態受容経路: `ReadableState<T>` を受け取った場合は `binding-emitter` 経由で
+ *   `bind-*` コマンドを生成し、`appendCmd` で PendingBuffer に積む（Req 4.1–4.7）。
+ *
+ * 対応 requirement: 1.1, 1.2, 1.3, 1.4, 1.5, 4.1–4.7 (reactive-state)
+ * 依存: Task 2.2 (PendingBuffer), Task 3.1 (ScriptScope), Task 3.2 (ExprFactory.encodeLiteral),
+ *        Task 3.3 (binding-emitter), Task 2.3 (each-template)
+ */
+/** `on` ハンドラのコールバック型。ハンドラ内では ScriptScope の制御フロー API を利用できる。 */
+type HandlerCallback = (s: ScriptScope) => void;
+/**
+ * アロー関数形式のイベントハンドラ型（handler-serialization Task 2.1）。
+ *
+ * イベント引数を受け取る形式（`(e: Ev) => void`）と
+ * ゼロ引数形式（`() => void`）の両方を受け付ける。
+ * `Ev` は `HTMLElementEventMap` のイベント型（例: `MouseEvent`, `InputEvent`）。
+ */
+type ArrowHandler<Ev extends Event = Event> = (() => void) | ((e: Ev) => void);
+/**
+ * DOM 操作メソッド群を定義するジェネリックインターフェース。
+ *
+ * `Self` は戻り値型（メソッドチェーンのため）。HtmlTag サブクラスでは `Self = HtmlTag`、
+ * `SelectorRef<E>` では `Self = SelectorRef<E>` を渡す。
+ * 未定義メソッドはコンパイル時に型エラーとして検出可能（Req 1.4）。
+ * 各メソッドは `Self`（= `this`）を返し、CSS チェーンと連結可能（Req 1.5）。
+ */
+interface ElementMethods<Self> {
+    /**
+     * 要素にイベントリスナを追加する JS 文を生成する（既存: HandlerCallback 形式）。
+     *
+     * @param event - `addEventListener` に渡すイベント名（例: `'click'`）
+     * @param handler - ハンドラ本体を構築するコールバック。引数 `s` は `ScriptScope`
+     */
+    on(event: string, handler: HandlerCallback): Self;
+    /**
+     * 要素にイベントリスナを追加する JS 文を生成する（ArrowHandler: keyof HTMLElementEventMap 形式）。
+     *
+     * イベント名 `K` が `HTMLElementEventMap` のキーのとき、ハンドラ引数 `e` が
+     * `HTMLElementEventMap[K]`（例: `click` → `MouseEvent`）として推論される（Req 1.3）。
+     *
+     * @param event - `HTMLElementEventMap` のキー（例: `'click'`, `'input'`）
+     * @param handler - アロー関数形式のハンドラ。`(e: MouseEvent) => void` または `() => void`
+     */
+    on<K extends keyof HTMLElementEventMap>(event: K, handler: ArrowHandler<HTMLElementEventMap[K]>): Self;
+    /**
+     * 要素にイベントリスナを追加する JS 文を生成する（ArrowHandler: 任意イベント名フォールバック）。
+     *
+     * `HTMLElementEventMap` に存在しないカスタムイベント名向けのフォールバック。
+     * ハンドラ引数型は `Event` になる。
+     *
+     * @param event - 任意のイベント名文字列
+     * @param handler - アロー関数形式のハンドラ
+     */
+    on(event: string, handler: ArrowHandler<Event>): Self;
+    /**
+     * `element.textContent = value` に対応する JS 文を生成する。
+     * `ReadableState<string>` を渡すと bind-text コマンドを発行する（Req 4.1）。
+     * 即値（string / JsExpr）の場合は setProp textContent を生成する（Req 4.6）。
+     */
+    setText(value: string | JsExpr | ReadableState<string>): Self;
+    /**
+     * `setText` の便宜エイリアス（R-3 決定）。
+     */
+    text(value: string | JsExpr | ReadableState<string>): Self;
+    /**
+     * `element.value = value` に対応する JS 文を生成する。
+     * `ReadableState<string>` を渡すと bind-value コマンドを発行する（Req 4.2）。
+     * 即値（string / JsExpr）の場合は setProp value を生成する（Req 4.6）。
+     */
+    setValue(value: string | JsExpr | ReadableState<string>): Self;
+    /**
+     * `setValue` の便宜エイリアス（R-3 決定）。
+     */
+    value(value: string | JsExpr | ReadableState<string>): Self;
+    /**
+     * `element.style[prop] = value` に対応する JS 文を生成する。
+     * `ReadableState<string>` を渡すと bind-style コマンドを発行する（Req 4.4）。
+     * 即値（string / JsExpr）の場合は setStyle コマンドを生成する（Req 4.6）。
+     */
+    setStyle(prop: string, value: string | JsExpr | ReadableState<string>): Self;
+    /**
+     * `element.classList.add(name)` に対応する JS 文を生成する。
+     * `ReadableState<string>` を渡すと bind-class-add コマンドを発行する（Req 4.3）。
+     * 即値（string）の場合は classListAdd を生成する（Req 4.6）。
+     */
+    addClass(name: string | ReadableState<string>): Self;
+    /**
+     * クラス名全体を状態値で置換する便宜エイリアス（Req 4.5, R-3 決定）。
+     * `ReadableState<string>` は bind-class-all コマンドを発行する。
+     */
+    class(name: string | JsExpr | ReadableState<string>): Self;
+    /**
+     * `input.checked` を状態値にバインドする（Req 4.x）。
+     * `ReadableState<boolean>` を受け取り bind-attr（checked）コマンドを発行する。
+     */
+    checked(value: ReadableState<boolean>): Self;
+    /**
+     * `element.classList.toggle(name, force?)` に対応する JS 文を生成する。
+     *
+     * @param name - トグル対象のクラス名
+     * @param force - 省略時は無条件トグル。`JsBoolExpr` を渡すと force 引数として埋め込む
+     */
+    toggleClass(name: string, force?: JsBoolExpr): Self;
+    /**
+     * `element.classList.remove(name)` に対応する JS 文を生成する。
+     *
+     * @param name - 削除するクラス名
+     */
+    removeClass(name: string): Self;
+    /**
+     * `parent.appendChild(child)` に対応する JS 文を生成する。
+     * `EachBinding<U>` を渡すと bind-each コマンドを発行する（Req 4.7）。
+     * `HtmlTag` を渡すと通常の appendChild コマンドを生成する（Req 1.1）。
+     *
+     * @param child - 子として追加する `HtmlTag`（`id` 属性必須）または `EachBinding<U>`
+     */
+    appendChild<U extends HtmlTag | readonly HtmlTag[]>(child: HtmlTag | EachBinding<U>): Self;
+}
+/**
+ * CSS共有スタイル定義
+ *
+ * createStyle() でクラスベースのCSSルールを定義し、
+ * 複数要素に同じスタイルを適用する。
+ * 疑似セレクタ（:hover, :focus, :active）もサポート。
+ * SwiftUI の ViewModifier に相当。
+ *
+ * @example
+ * ```typescript
+ * import { Root } from '../html/elements/root.js';
+ * const btn = createStyle('btn', {
+ *   padding: '10px 12px',
+ *   cursor: 'pointer',
+ * }, {
+ *   hover: { background: 'rgba(255,255,255,0.10)' },
+ * });
+ *
+ * const root = new Root({ css: [btn.css] });
+ * // → .btn { padding: 10px 12px; cursor: pointer; }
+ * // → .btn:hover { background: rgba(255,255,255,0.10); }
+ * ```
+ */
+/**
+ * Style selector definitions.
+ *
+ * Key formats:
+ * - `hover`, `focus`, etc. → pseudo selector (`.name:hover`)
+ * - `&.modifier` → compound selector (`.name.modifier`)
+ * - ` .child` → descendant selector (`.name .child`)
+ * - `&.state .child` → compound + descendant (`.name.state .child`)
+ */
+type StyleSelectors = {
+    [key: string]: Record<string, string>;
+};
+/**
+ * Represents a shared CSS style that can be applied to multiple elements.
+ */
+interface SharedStyle {
+    /** The CSS class name. */
+    readonly className: string;
+    /** The complete CSS rule block(s) including pseudo-selectors. */
+    readonly css: string;
+    /**
+     * Internal `StyleTemplate` representation.
+     *
+     * Maintained for the new colocated-style pipeline (Req 2.1, 2.2, 2.4, 2.5).
+     * 既存の `className` / `css` / `toString()` 経路は従来どおり機能するため、
+     * 旧 API 利用者は `_template` を意識する必要はない。
+     *
+     * @internal
+     */
+    readonly _template: StyleTemplate;
+    /** Returns the class name (for template literal usage). */
+    toString(): string;
+}
+/**
+ * StyleTemplate オブジェクト。
+ *
+ * 名前あり/なしの両 `createStyle` 戻り値を統一する中間表現。
+ * 生成後は freeze され、外部からの変更は受け付けない。
+ *
+ * - `hasExplicitName === true` ⇔ `name !== undefined`
+ * - `bodyHash` は `(properties, selectors)` の決定的ハッシュ
+ */
+interface StyleTemplate {
+    readonly _kind: 'styleTemplate';
+    readonly hasExplicitName: boolean;
+    readonly name?: string;
+    readonly properties: Readonly<Record<string, string>>;
+    readonly selectors?: Readonly<StyleSelectors>;
+    readonly bodyHash: string;
+    readonly debugVarName?: string;
+}
+/**
+ * HtmlTag 抽象基底クラス
+ *
+ * 全タグ共通のレンダリングロジックと属性管理を集約する。
+ * HTMLTagProtocol を実装し、サブクラス（Root, PairType, SelfClosingType, TextType）の
+ * 共通動作を提供する。
+ *
+ * レンダリングフロー:
+ *   render() → protoRender() → HTMLFormatter.format()
+ *
+ * Task 0.2: CssManagerInstance をコンポジションで保持。
+ *   collectCssStyleString() は this._css.render() に委譲する。
+ *
+ * Requirements: 6.1, 6.2, 6.7
+ */
+/**
+ * HtmlTag コンストラクタのオプション引数。
+ * テスト時に CssManager / JQueryManager をモック注入するために使用。
+ */
+interface HtmlTagOptions {
+    css?: CssManagerInstance;
+    jqm?: JQueryManagerInstance;
+}
+/**
+ * `.frame()` 修飾子のオプション型。
+ *
+ * 各プロパティは省略可能。省略されたプロパティは既存の設定値を変更しない。
+ *
+ * 変換ルール:
+ * - `number` → `{n}px`
+ * - `Infinity` (maxWidth / maxHeight のみ) → `'100%'`
+ * - `string` → そのまま CSS 値として使用
+ *
+ * Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 6.6
+ */
+interface FrameOptions {
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+}
+/**
+ * Abstract base class for all HTML elements.
+ *
+ * This class provides the common rendering logic and attribute/child management
+ * for all HTML tag types. It implements {@link HTMLTagProtocol}, {@link CssManagerType},
+ * and {@link JQueryManagerProtocol}.
+ *
+ * **Rendering Flow:**
+ * - `render()` → `protoRender()` → `HTMLFormatter.format()`
+ *
+ * **Composition Pattern:**
+ * - CSS management is delegated to {@link CssManagerInstance}
+ * - JavaScript/jQuery management is delegated to {@link JQueryManagerInstance}
+ *
+ * **Subclasses:**
+ * - {@link Root} - Document root element
+ * - {@link PairType} - Elements with opening and closing tags (e.g., `<div>...</div>`)
+ * - {@link SelfClosingType} - Self-closing elements (e.g., `<br>`)
+ * - {@link TextType} - Text nodes
+ *
+ * @example
+ * ```typescript
+ * // Typically used through factory functions, not instantiated directly
+ * const element = div(
+ *   p('Hello'),
+ *   span('World')
+ * );
+ * console.log(element.render());
+ * ```
+ *
+ * @remarks
+ * **Preconditions:** tagType must be a valid {@link TagType} value
+ *
+ * **Postconditions:** `render()`/`protoRender()` return valid HTML strings
+ *
+ * **Invariants:** Children order is preserved in insertion order
+ */
+declare abstract class HtmlTag implements HTMLTagProtocol, CssManagerType, JQueryManagerProtocol {
+    /**
+     * The HTML tag type (e.g., 'div', 'p', 'span').
+     */
+    readonly tagType: TagType;
+    /**
+     * Child elements managed by this tag.
+     * @internal
+     */
+    protected _children: HTMLTagProtocol[];
+    /**
+     * HTML attributes managed by this tag.
+     * @internal
+     */
+    protected _attributes: HtmlAttributeShape[];
+    /**
+     * CSS manager instance (composition pattern).
+     * @internal
+     */
+    private _css;
+    /**
+     * jQuery manager instance (composition pattern).
+     * @internal
+     */
+    private _jqm;
+    /**
+     * 遅延解決モデル用の未フラッシュ DOM 操作コマンドバッファ。
+     *
+     * `Root.addChild(this)` 以前に要素ビルダメソッド（`on` / `setText` 等）から
+     * 積まれた {@link VanillaCommand} を保持する。`FlushOrchestrator.flush()` が
+     * 呼ばれた時点で `_scope._append` に転送し、本配列は空になる。
+     *
+     * Requirements: 1.6, 1.7, 1.8 (unified-element-api)
+     * Design: 遅延解決モデル / PendingBuffer
+     *
+     * @internal
+     */
+    _pending: VanillaCommand[];
+    /**
+     * each-modifier-css-extraction: bind-each コマンドの永続スナップショット。
+     *
+     * `_pending` 内 bind-each は protoRender 後に `_scope` へ転送されて `_pending`
+     * から消えるため、CSS 収集 phase（`collectCssStyleString`）に到達した時点では
+     * 参照不能になる。本配列は bind-each コマンドの参照を append-only で保持し、
+     * 後段の CSS 収集が templateRoot を辿れるようにする。
+     *
+     * @internal
+     */
+    _eachTemplateSnapshots: VanillaCommand[];
+    /**
+     * element-methods.ts の `appendChild` で追加された子 `HtmlTag` 群。
+     *
+     * `addChild` を経由しない `.appendChild(child)` 呼び出しは `_children` に
+     * 追加されないが、each テンプレート factory コード生成時には子要素ツリーが
+     * 必要になる。本配列はその目的（factory コード生成）専用の追跡バッファ。
+     *
+     * @internal
+     */
+    _appendedChildren: HtmlTag[];
+    /**
+     * `css` 属性経由で受理した {@link StyleTemplate} 群の未フラッシュバッファ。
+     *
+     * `applyAttributeMap` 経路（あるいは `addStyleTemplates`）で push 順に保持され、
+     * **この時点では `CssManager` には流さない**。tagPath が確定する render 時
+     * （Task 3.4）に初めて `_css.registerTemplate(tpl, ...)` へ転送される。
+     *
+     * Requirements: 1.1, 1.4
+     * Design: 遅延解決モデル / `_pendingStyleTemplates`
+     *
+     * @internal
+     */
+    _pendingStyleTemplates: StyleTemplate[];
+    /**
+     * フラッシュ済み要素が保持する {@link VanillaScope} 参照。
+     *
+     * `undefined` の間は未登録（バッファ経路）、`VanillaScope` 値が入った後は
+     * 以降の要素ビルダメソッド呼び出しが即時 `_append` される。
+     *
+     * Requirements: 1.6, 1.7 (unified-element-api)
+     * Design: 遅延解決モデル / FlushOrchestrator
+     *
+     * @internal
+     */
+    _scope: VanillaScope | undefined;
+    /**
+     * Creates a new HtmlTag instance.
+     *
+     * @param tagType - The HTML tag type
+     * @param options - Optional DI options for injecting CssManager/JQueryManager (mainly for testing)
+     */
+    constructor(tagType: TagType, options?: HtmlTagOptions);
+    /**
+     * Gets the CSS manager for this element.
+     *
+     * @returns The {@link CssManagerInstance} for managing CSS styles
+     *
+     * @example
+     * ```typescript
+     * const element = div();
+     * element.css.addRule('.my-class', { color: 'red' });
+     * ```
+     */
+    get css(): CssManagerInstance;
+    /**
+     * Shortcut to HtmlStyle (3-level chain: element.style.font.setFontSize()).
+     * Equivalent to element.css.styleManager.style.
+     */
+    get style(): HtmlStyle;
+    padding(v: string): this;
+    padding(v: number): this;
+    padding(edge: EdgeSet, v: number): this;
+    paddingTop(v: string): this;
+    paddingRight(v: string): this;
+    paddingBottom(v: string): this;
+    paddingLeft(v: string): this;
+    margin(v: string): this;
+    marginTop(v: string): this;
+    marginRight(v: string): this;
+    marginBottom(v: string): this;
+    marginLeft(v: string): this;
+    background(v: string | BackgroundOptions): this;
+    backgroundColor(v: string): this;
+    color(v: string): this;
+    foregroundStyle(v: string): this;
+    fontSize(v: string): this;
+    fontWeight(v: string): this;
+    fontFamily(v: string): this;
+    lineHeight(v: string): this;
+    cornerRadius(v: string): this;
+    display(v: string): this;
+    width(v: string): this;
+    height(v: string): this;
+    minWidth(v: string): this;
+    minHeight(v: string): this;
+    maxWidth(v: string): this;
+    maxHeight(v: string): this;
+    textAlign(v: string): this;
+    textDecoration(v: string): this;
+    overflow(v: string): this;
+    opacity(v: string): this;
+    boxShadow(v: string): this;
+    gap(v: string): this;
+    flexGrow(v: string): this;
+    flex(v: string): this;
+    flex(options?: FlexOptions): this;
+    grid(options?: GridOptions): this;
+    font(options?: FontOptions): this;
+    border(options?: BorderOptions): this;
+    hover(configure: (s: PseudoStyleBuilder) => void): this;
+    focus(configure: (s: PseudoStyleBuilder) => void): this;
+    active(configure: (s: PseudoStyleBuilder) => void): this;
+    /**
+     * ブレークポイントごとのスタイルをメディアクエリとして登録する。
+     *
+     * - 名前付きキー（'sm' / 'md' / 'lg' / 'xl'）は `Breakpoints` 定数で数値に解決する
+     * - 数値キーはそのままブレークポイント（px 値）として使用する
+     * - 各ブレークポイントの CSS プロパティを `this._css.addMediaRule(bp, props)` に渡す
+     * - `renderCss()` 出力の末尾に `@media (min-width: {bp}px) { .{scopedClass} { ... } }` ブロックが追加される
+     *
+     * @example
+     * ```typescript
+     * div()
+     *   .responsive({ md: { padding: '16px' }, xl: { fontSize: '18px' } })
+     * ```
+     *
+     * Requirements: 9.1, 9.2, 9.3, 9.4, 9.5
+     */
+    responsive(options: BreakpointStyles): this;
+    /**
+     * 条件付き修飾子。`condition` が `true` のとき `modifier(this)` を呼び出し、
+     * `false` のときは modifier を呼び出さず `this` をそのまま返す。
+     *
+     * modifier が `null` / `undefined` を返した場合は元の要素（`this`）を返す。
+     *
+     * @example
+     * ```typescript
+     * div()
+     *   .if(isActive, el => el.background('#f00'))
+     *   .padding('16px')
+     * ```
+     *
+     * Requirements: 10.1, 10.2, 10.3, 10.4, 10.5
+     */
+    if<T extends HtmlTag>(this: T, condition: boolean, modifier: (el: T) => T | null | undefined): T;
+    /**
+     * 幅・高さ・最小/最大サイズを1つのメソッド呼び出しで設定する。
+     *
+     * - `number` → `{n}px` に変換する
+     * - `Infinity` → `'100%'` に変換する（maxWidth / maxHeight のみ）
+     * - `string` → そのまま CSS 値として使用する
+     * - 省略されたプロパティは既存の設定値を変更しない
+     *
+     * Requirements: 6.1, 6.2, 6.3, 6.4, 6.5, 6.6
+     *
+     * @param options - 設定するフレームオプション
+     * @returns This instance for method chaining
+     *
+     * @example
+     * ```typescript
+     * div().frame({ width: 700, maxWidth: Infinity })
+     * // → width:700px; max-width:100%
+     * ```
+     */
+    frame(options: FrameOptions): this;
+    /**
+     * Gets the jQuery manager for this element.
+     *
+     * @returns The {@link JQueryManagerInstance} for managing JavaScript/jQuery operations
+     *
+     * @example
+     * ```typescript
+     * const element = div();
+     * element.jqm.on('click', () => console.log('Clicked!'));
+     * ```
+     */
+    get jqm(): JQueryManagerInstance;
+    /**
+     * Gets the child elements of this tag.
+     *
+     * @returns Read-only array of child elements
+     */
+    get children(): ReadonlyArray<HTMLTagProtocol>;
+    /**
+     * Adds a child element to this tag.
+     *
+     * @param child - The child element to add
+     * @returns This instance for method chaining
+     *
+     * @example
+     * ```typescript
+     * const container = div();
+     * container.addChild(p('Hello'));
+     * container.addChild(span('World'));
+     * ```
+     */
+    addChild(child: HTMLTagProtocol): this;
+    /** @internal */
+    _propagateTagPaths(): void;
+    /**
+     * Adds multiple child elements to this tag.
+     *
+     * @param children - Array of child elements to add
+     * @returns This instance for method chaining
+     *
+     * @example
+     * ```typescript
+     * const container = div();
+     * container.addChildren([
+     *   p('First paragraph'),
+     *   p('Second paragraph')
+     * ]);
+     * ```
+     */
+    addChildren(children: ReadonlyArray<HTMLTagProtocol>): this;
+    /**
+     * Gets the HTML attributes of this tag.
+     *
+     * @returns Read-only array of HTML attributes
+     */
+    get attributes(): ReadonlyArray<HtmlAttributeShape>;
+    /**
+     * Adds an HTML attribute to this tag.
+     *
+     * @param attribute - The attribute to add
+     * @returns This instance for method chaining
+     *
+     * @example
+     * ```typescript
+     * const element = div();
+     * element.addHtmlAttribute(HtmlAttribute.className('container'));
+     * element.addHtmlAttribute(HtmlAttribute.keyValue('id', 'main'));
+     * ```
+     */
+    addHtmlAttribute(attribute: HtmlAttributeShape): this;
+    /**
+     * `css` 属性由来の {@link StyleTemplate} 群を `_pendingStyleTemplates` に
+     * push 順を保持して追加する。
+     *
+     * **重要**：本メソッドは保持のみを行い、`CssManager` への登録は行わない。
+     * tagPath が確定する render フェーズ（Task 3.4）で `_css.registerTemplate`
+     * へ転送される。
+     *
+     * Requirements: 1.1, 1.4
+     *
+     * @param tpls - 追加する StyleTemplate の配列（順序保持）
+     * @returns This instance for method chaining
+     */
+    addStyleTemplates(tpls: StyleTemplate[]): this;
+    /**
+     * Renders all attributes as an HTML string.
+     *
+     * @returns A space-prefixed string of attributes, or empty string if no attributes
+     *
+     * @example
+     * ```typescript
+     * // Returns: ' class="btn" id="submit"'
+     * const element = div({ class: 'btn', id: 'submit' });
+     * console.log(element.renderAttributes());
+     * ```
+     */
+    renderAttributes(): string;
+    /**
+     * Renders the element as a minified HTML string (without formatting).
+     *
+     * This method generates the raw HTML output based on the tag type:
+     * - **root**: Concatenates child elements (no tag wrapper)
+     * - **text**: Returns content as-is (overridden in {@link TextType})
+     * - **selfClosing**: Returns `<tag attrs>` format
+     * - **pair**: Returns `<tag attrs>children</tag>` format
+     *
+     * @returns Minified HTML string
+     *
+     * @remarks
+     * This method is typically called internally by {@link render}.
+     * Use {@link render} for formatted output.
+     */
+    protoRender(ctx?: RenderContext): string;
+    /**
+     * Renders the element as a formatted HTML string.
+     *
+     * This method applies HTML formatting (indentation, line breaks) to the
+     * minified output from {@link protoRender}.
+     *
+     * @returns Formatted HTML string
+     *
+     * @example
+     * ```typescript
+     * const element = div(
+     *   p('Hello'),
+     *   p('World')
+     * );
+     * console.log(element.render());
+     * // Output:
+     * // <div>
+     * //   <p>Hello</p>
+     * //   <p>World</p>
+     * // </div>
+     * ```
+     */
+    render(): string;
+    /**
+     * Recursively collects CSS style strings from this element and its descendants.
+     *
+     * 実装は `_internal/css-collector.ts` の {@link collectCss} 純関数に委譲する。
+     *
+     * @param resolver - optional minify-aware identifier resolver
+     * @returns Concatenated CSS string from this element and all descendants
+     */
+    collectCssStyleString(resolver?: IdentifierResolver): string;
+    /**
+     * Recursively collects JavaScript content from this element and its descendants.
+     *
+     * 実装は `_internal/js-collector.ts` の {@link collectJs} 純関数に委譲する。
+     *
+     * @returns Concatenated JavaScript string (separated by `;\n`)
+     *
+     * @example
+     * ```typescript
+     * const element = div();
+     * element.jqm.on('click', () => console.log('Clicked'));
+     * const js = element.collectJsContent();
+     * ```
+     */
+    collectJsContent(): string;
+    /**
+     * Recursively collects jQuery method types used by this element and its descendants.
+     *
+     * This is used for tree-shaking to include only the necessary jQuery helper functions.
+     *
+     * 実装は `_internal/used-methods-collector.ts` の {@link collectUsedMethodsHelper}
+     * （helper export 名 `collectUsedMethods` を本メソッドとの衝突回避のため alias 化）
+     * 純関数に委譲する。
+     *
+     * @returns Set of {@link JQueryMethodType} used in the element tree
+     *
+     * @example
+     * ```typescript
+     * const element = div();
+     * element.jqm.on('click', handler);
+     * const methods = element.collectUsedMethods();
+     * // methods includes: Set(['on'])
+     * ```
+     */
+    collectUsedMethods(): Set<JQueryMethodType>;
+}
+interface HtmlTag extends ElementMethods<HtmlTag> {
+}
+/**
+ * GlobalCss branded type と内部ヘルパ
+ *
+ * `GlobalCss` は string の subtype として branded nominal 型を提供する。
+ * 外部コードが生 string を `GlobalCss` として渡すことをコンパイル時に阻止する。
+ *
+ * 内部 `brand()` がこのモジュールにおける唯一のキャスト発生点。
+ * DSL 関数群（global-dsl.ts）はこのモジュールの内部 API を通じてのみ GlobalCss を生成する。
+ */
+/**
+ * GlobalCss branded type。
+ * `string & { readonly __globalCss: unique symbol }` により、
+ * 生 string との代入非互換性を型システムで保証する。
+ *
+ * @example
+ * ```typescript
+ * // コンパイルエラー（生 string は渡せない）
+ * const css: GlobalCss = "body { color: red; }";  // Error!
+ *
+ * // 正しい使い方（DSL 経由）
+ * import { rule } from './global-dsl.js';
+ * const css: GlobalCss = rule("body", { color: "red" });
+ * ```
+ */
+type GlobalCss = string & {
+    readonly __globalCss: unique symbol;
+};
+/**
+ * Publisher が Root から受け取る read-only export snapshot。
+ * FileExporter はこの型からすべての必要情報を取得し、Root._stateRegistry などの
+ * 内部状態へ直接アクセスしない。
+ */
+interface ExportContext {
+    /** レンダリング済み HTML 文字列 */
+    readonly html: string;
+    /** 収集済み CSS 文字列（グローバル + スコープド） */
+    readonly css: string;
+    /** ユーザー定義 Vanilla JS（VanillaScriptBuilder 出力） */
+    readonly userJs: string;
+    /** ランタイムプレリュード（状態あり時のみ存在） */
+    readonly runtimePrelude?: string;
+    /** 状態初期化 JS（state-init + derive コマンド列） */
+    readonly runtimeInitJs?: string;
+}
+/**
+ * FileExporterのオプション
+ *
+ * {@link FileExporter}の動作をカスタマイズするためのオプション定義です。
+ *
+ * @remarks
+ * 全てのプロパティはオプションで、デフォルト値が設定されています。
+ *
+ * @example カスタムファイル名
+ * ```typescript
+ * const options: FileExporterOptions = {
+ *   htmlFileName: 'page.html',
+ *   cssFileName: 'main.css',
+ *   jsFileName: 'app.js',
+ * };
+ * ```
+ *
+ * @example reset.cssを含める
+ * ```typescript
+ * const options: FileExporterOptions = {
+ *   includeResetCss: true, // Eric Meyer's Reset CSSを自動挿入
+ * };
+ * ```
+ *
+ * @public
+ */
+interface FileExporterOptions {
+    /** HTMLファイル名（デフォルト: 'index.html'） */
+    readonly htmlFileName?: string;
+    /** CSSファイル名（デフォルト: 'style.css'） */
+    readonly cssFileName?: string;
+    /** JSファイル名（デフォルト: 'script.js'） */
+    readonly jsFileName?: string;
+    /** reset.cssを含めるか（デフォルト: false） */
+    readonly includeResetCss?: boolean;
+    /** JSをDOMContentLoadedでラップするか（デフォルト: false） */
+    readonly wrapDOMReady?: boolean;
+}
+/**
+ * FileExporter
+ *
+ * HTML、CSS、JavaScriptの3ファイルを統合的に出力するエクスポーターです。
+ *
+ * @remarks
+ * DraftOleで生成されたコンテンツを、実行可能なWebページとして出力します。
+ * 以下の機能を提供します:
+ *
+ * ### 主要機能
+ * - **自動リンク挿入**: HTMLに`<link>`と`<script>`タグを自動挿入
+ * - **スマートスキップ**: 空のCSS/JSはファイル出力とタグ挿入をスキップ
+ * - **reset.cssバンドル**: オプションでEric Meyer's Reset CSSを自動追加
+ * - **ディレクトリ自動作成**: 出力先が存在しない場合は再帰的に作成
+ * - **エラーハンドリング**: {@link ExportableError}による詳細なエラー報告
+ *
+ * ### ファイル出力パターン
+ *
+ * **通常出力** (全ファイル非空時):
+ * ```
+ * output/
+ *   ├── index.html  (with <link> and <script> tags)
+ *   ├── style.css
+ *   └── script.js
+ * ```
+ *
+ * **CSS/JS空の場合**:
+ * ```
+ * output/
+ *   └── index.html  (タグなし)
+ * ```
+ *
+ * @example 基本的な使用方法
+ * ```typescript
+ * const exporter = new FileExporter();
+ * exporter.export(
+ *   '<html><head></head><body>Hello</body></html>',
+ *   'body { color: red; }',
+ *   'console.log("Hello");',
+ *   './output'
+ * );
+ * // → output/index.html, output/style.css, output/script.js が生成される
+ * ```
+ *
+ * @example カスタムファイル名
+ * ```typescript
+ * const exporter = new FileExporter({
+ *   htmlFileName: 'page.html',
+ *   cssFileName: 'main.css',
+ *   jsFileName: 'app.js',
+ * });
+ * exporter.export(html, css, js, './dist');
+ * // → dist/page.html, dist/main.css, dist/app.js
+ * ```
+ *
+ * @example reset.cssを含める
+ * ```typescript
+ * const exporter = new FileExporter({
+ *   includeResetCss: true,
+ * });
+ * exporter.export(html, css, js, './output');
+ * // → style.css の先頭にreset.cssが自動追加される
+ * ```
+ *
+ * @example エラーハンドリング
+ * ```typescript
+ * const exporter = new FileExporter();
+ * try {
+ *   exporter.export(html, css, js, '');
+ * } catch (error) {
+ *   if (error instanceof ExportableError) {
+ *     console.error(`Error [${error.code}]: ${error.message}`);
+ *     console.error(`File path: ${error.filePath}`);
+ *   }
+ * }
+ * ```
+ *
+ * @example 空のCSS/JSをスキップ
+ * ```typescript
+ * const exporter = new FileExporter();
+ * exporter.export(
+ *   '<html><head></head><body>Static page</body></html>',
+ *   '', // 空のCSS
+ *   '', // 空のJS
+ *   './output'
+ * );
+ * // → output/index.html のみ生成（<link>/<script>タグなし）
+ * ```
+ *
+ * @public
+ */
+declare class FileExporter {
+    private readonly htmlFileName;
+    private readonly cssFileName;
+    private readonly jsFileName;
+    private readonly includeResetCss;
+    private readonly _wrapDOMReady;
+    constructor(options?: FileExporterOptions);
+    /**
+     * HTML、CSS、JSを統合出力する
+     *
+     * DraftOleで生成されたコンテンツを、実行可能なWebページとして出力します。
+     *
+     * @param htmlContent - HTML内容（完全なHTML文書）
+     * @param cssContent - CSS内容（空文字列の場合はスキップ）
+     * @param jsContent - JS内容（空文字列の場合はスキップ）
+     * @param outputPath - 出力先ディレクトリパス（存在しない場合は自動作成）
+     *
+     * @throws {@link ExportableError}
+     * - `invalidPath`: outputPathが空文字列または無効
+     * - `writeFailed`: ディレクトリ作成またはファイル書き込み失敗
+     *
+     * @remarks
+     * ### 処理フロー
+     * 1. 出力パスの検証
+     * 2. ディレクトリの作成（存在しない場合）
+     * 3. CSS処理（reset.css挿入判定）
+     * 4. HTMLにタグ挿入（CSS/JS非空時）
+     * 5. ファイル書き込み
+     *
+     * ### タグ挿入位置
+     * - `<link>`: `</head>`タグの直前
+     * - `<script>`: `</body>`タグの直前
+     *
+     * ### ファイル出力条件
+     * - **HTML**: 常に出力
+     * - **CSS**: `cssContent.trim().length > 0` または `includeResetCss === true`
+     * - **JS**: `jsContent.trim().length > 0`
+     *
+     * @example 完全な出力
+     * ```typescript
+     * const exporter = new FileExporter();
+     * exporter.export(
+     *   '<!DOCTYPE html><html><head></head><body><h1>Hello</h1></body></html>',
+     *   'h1 { color: blue; }',
+     *   'console.log("Loaded");',
+     *   './output'
+     * );
+     * ```
+     *
+     * @example HTMLのみ（静的ページ）
+     * ```typescript
+     * const exporter = new FileExporter();
+     * exporter.export(
+     *   '<!DOCTYPE html><html><head></head><body><h1>Static</h1></body></html>',
+     *   '', // CSS空
+     *   '', // JS空
+     *   './output'
+     * );
+     * // → index.htmlのみ生成、<link>/<script>タグなし
+     * ```
+     *
+     * @example エラーハンドリング
+     * ```typescript
+     * const exporter = new FileExporter();
+     * try {
+     *   exporter.export(html, css, js, '/invalid/readonly/path');
+     * } catch (error) {
+     *   if (error instanceof ExportableError) {
+     *     if (error.code === 'writeFailed') {
+     *       console.error('Failed to write files:', error.message);
+     *       console.error('Path:', error.filePath);
+     *     }
+     *   }
+     * }
+     * ```
+     *
+     * @example ネストされたディレクトリ
+     * ```typescript
+     * const exporter = new FileExporter();
+     * exporter.export(html, css, js, './output/nested/deep/directory');
+     * // → ディレクトリが自動的に再帰作成される
+     * ```
+     *
+     * @public
+     */
+    /**
+     * Root オブジェクトから ExportContext を取得し、ファイル出力する。
+     *
+     * @param root - DraftOle Root インスタンス
+     * @param outputPath - 出力先ディレクトリパス
+     */
+    exportFromRoot(root: Root, outputPath: string): void;
+    /**
+     * ExportContext からコンテンツを組み立ててファイル出力する。
+     *
+     * - `runtimePrelude` が存在する場合、JS の先頭にプレリュードと state-init JS を挿入する。
+     * - `runtimePrelude` が存在しない場合、`userJs` をそのまま使用する。
+     *
+     * @param ctx - ExportContext スナップショット
+     * @param outputPath - 出力先ディレクトリパス
+     */
+    exportContext(ctx: ExportContext, outputPath: string): void;
+    export(htmlContent: string, cssContent: string, jsContent: string, outputPath: string): void;
+}
+/**
+ * `ExprFactory` の実装。
+ *
+ * 設計書 `design.md` の「ExprFactory」節に対応し、以下の API を提供する：
+ *   - `createExprFactory()`: callable な関数オブジェクトに `.bool` プロパティを
+ *     付与して返す。`root.expr(code)` / `root.expr.bool(code)` のエントリポイント。
+ *   - `encodeLiteral(value)`: 文字列/数値は `JSON.stringify` でリテラル化し、
+ *     `JsExpr` は `.code` を素通しする共通ヘルパ。要素メソッド側（`setText` 等）
+ *     からも再利用される想定（Req 4.5）。
+ *
+ * 対応 requirement:
+ *   - 4.1: `root.expr(code)` が `.code === code` の `JsExpr` を返す
+ *   - 4.2: 返された `JsExpr` は `eq`/`ne`/`or`/`trim`/`isFalsy`/`isTruthy` を提供
+ *   - 4.3: `.bool(code)` が `JsBoolExpr` を返す
+ *   - 4.5: 文字列リテラルを `JSON.stringify` でエンコードする共通経路を提供
+ *
+ * 実装方針: 既存の内部ファクトリ `_makeJsExpr` / `_makeJsBoolExpr`（`element-ref.ts`）
+ * を再利用し、式オブジェクトの振る舞いを単一化する（R-6 決定）。
+ */
+/**
+ * `root.expr` の型。callable + `.bool` namespace 構造（design.md §ExprFactory）。
+ */
+interface ExprFactory {
+    /** 任意の JS 式コードを `.code` としてそのまま保持する `JsExpr` を生成する。 */
+    (code: string): JsExpr;
+    /** 真偽式として扱う生コードを `JsBoolExpr` として生成する。 */
+    bool(code: string): JsBoolExpr;
+}
+/**
+ * `SelectorRef<E>` / `CollectionRef<E>` の実装。
+ *
+ * 本モジュールは `unified-element-api` 仕様の Task 3.4 に対応し、
+ * `root.$` / `root.$$` の戻り値として公開するセレクタ参照ノードを提供する。
+ *
+ * 設計方針:
+ * - `SelectorRef<E>` は `ElementMethods<SelectorRef<E>>` を実装し、内部で
+ *   `VanillaScope` と `ElementRef<E>` を保持して DOM 操作メソッドを提供する。
+ * - `CollectionRef<E>` は `VanillaScope` と `ElementListRef<E>` を保持し、
+ *   `filterNot` / `length` / `removeAll` / `forEach` を提供する。
+ * - 内部実装は `internal/dom-api` / `internal/query-api` / `internal/tree-api` に委譲する。
+ * - `on` ハンドラ / `forEach` 本体のスコープは `_makeHandlerScope` を再利用する。
+ *
+ * 対応 requirement: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6 (unified-element-api)
+ * 依存: Task 3.3 (ElementMethods, _makeHandlerScope, renderElementTarget, HasPending)
+ *       Task 1.2 (internal/query-api, dom-api, tree-api)
+ */
+/**
+ * `root.$<E>(selector)` の戻り値。
+ *
+ * `ElementMethods<SelectorRef<E>>` を実装し、セレクタ対象要素への
+ * DOM 操作メソッドを提供する。加えて `containsClass` / `cache` を追加する。
+ *
+ * 設計: SelectorRef は常に scope に紐付いており、バッファを持たない
+ *（Root への登録が前提のため、即時 scope._append する）。
+ */
+interface SelectorRef<E extends Element = HTMLElement> extends ElementMethods<SelectorRef<E>> {
+    /** `element.classList.contains(name)` を `JsBoolExpr` として返す（Req 2.4）。 */
+    containsClass(name: string): JsBoolExpr;
+    /**
+     * セレクタ結果をローカル変数にキャッシュし、新しい `SelectorRef` を返す（Req 2.5）。
+     * 同一セレクタを複数回埋め込む副作用を避けたい場合に使用する。
+     */
+    cache(name: string): SelectorRef<E>;
+}
+/**
+ * `root.$$<E>(selector)` の戻り値。
+ *
+ * `filterNot` / `length` / `removeAll` / `forEach` を提供するコレクション参照。
+ */
+interface CollectionRef<E extends Element = HTMLElement> {
+    /**
+     * 述語に一致しない要素だけを残す新しい `CollectionRef` を返す（Req 2.3）。
+     * 式の合成のみを行い、scope にコマンドを追加しない。
+     */
+    filterNot(predicate: (ref: SelectorRef<E>) => JsBoolExpr): CollectionRef<E>;
+    /** コレクション内の要素数を `JsExpr` として返す（Req 2.3）。 */
+    readonly length: JsExpr;
+    /** コレクション内の全要素を削除する命令を scope に追加する（Req 2.3）。 */
+    removeAll(): void;
+    /**
+     * コレクションを反復する `forEach` 命令を scope に追加する（Req 2.3）。
+     * コールバックは `SelectorRef<E>` と `ScriptScope` を受け取る。
+     */
+    forEach(body: (ref: SelectorRef<E>, s: ScriptScope) => void): void;
+}
+/**
+ * Task 4.5: Root ドキュメントルート要素
+ *
+ * HTML文書のトップレベル要素。Root自身のタグは出力せず、
+ * 子要素のレンダリング結果を連結して返す。
+ *
+ * CSS出力モード（default/inline/external）を管理し、
+ * ツリー全体のCSS/JSコンテンツ収集スタブ（Phase 3/4接続点）を提供する。
+ *
+ * レンダリング:
+ *   protoRender() → 子要素の protoRender() を連結（Root自体のタグは出力しない）
+ *   render()      → protoRender() → HTMLFormatter.format()
+ *
+ * Requirements: 3.1, 3.7, 3.8, 3.9, 6.6, 6.1, 6.2, 6.3, 6.4
+ */
+/**
+ * Constructor options for Root.
+ *
+ * Extends {@link HtmlTagOptions} with document-level settings.
+ * Note: the `css` property from HtmlTagOptions is omitted and replaced
+ * with `css?: readonly GlobalCss[]` for global CSS injection.
+ */
+interface RootOptions extends Omit<HtmlTagOptions, 'css'> {
+    /** Global CSS rules to inject before scoped styles. */
+    css?: readonly GlobalCss[];
+    /**
+     * Whether to inject a CSS reset before all other styles.
+     * @defaultValue false
+     */
+    reset?: boolean;
+    /**
+     * CSS 出力設定（minify モード等）。
+     *
+     * 省略時は `new CssConfig()` の default を使用する（`NODE_ENV` fallback 適用）。
+     * Root constructor 時点で評価され、以後不変。
+     *
+     * @see CssConfig
+     */
+    cssConfig?: CssConfig;
+}
+/**
+ * CSS output mode for the document.
+ *
+ * - **default**: Default behavior (defined in Phase 3)
+ * - **inline**: Inline CSS output (styles in `<style>` tags)
+ * - **external**: External CSS output (separate `.css` file)
+ */
+type CssOutputMode = 'default' | 'inline' | 'external';
+/**
+ * Represents the root element of an HTML document.
+ *
+ * Root is a special element that doesn't render its own tag, but instead
+ * concatenates the rendering output of its child elements. It serves as the
+ * top-level container for the entire HTML document tree.
+ *
+ * **Key Features:**
+ * - Manages CSS output mode (default/inline/external)
+ * - Collects CSS and JavaScript from entire document tree
+ * - Provides `renderJs()` for complete JavaScript output with tree-shaking
+ *
+ * **Rendering Format:**
+ * ```html
+ * <!-- No root tag is rendered, only children: -->
+ * <child1>...</child1>
+ * <child2>...</child2>
+ * ```
+ *
+ * @example
+ * Basic document structure:
+ * ```typescript
+ * const doc = new Root();
+ * doc.addChild(html(
+ *   head(title('My Page')),
+ *   body(
+ *     h1('Hello World'),
+ *     p('Welcome to my page')
+ *   )
+ * ));
+ *
+ * console.log(doc.render());
+ * ```
+ *
+ * @example
+ * With JavaScript tree-shaking:
+ * ```typescript
+ * const doc = new Root();
+ * const button = div();
+ * button.jqm.on('click', () => console.log('Clicked'));
+ * doc.addChild(button);
+ *
+ * // Only includes helper for 'on' method
+ * const js = doc.renderJs();
+ * ```
+ *
+ * @remarks
+ * **Preconditions:** None (no constructor arguments required)
+ *
+ * **Postconditions:** `protoRender()` returns concatenated child output (no root tag)
+ *
+ * **Invariants:** `cssOutputMode` is one of {@link CssOutputMode} values
+ */
+declare class Root extends HtmlTag {
+    /**
+     * CSS output mode for this document.
+     *
+     * @defaultValue 'default'
+     */
+    cssOutputMode: CssOutputMode;
+    /** Document-level policy: doctype flag, global CSS, reset baseline. */
+    private _documentContext;
+    /**
+     * Root が保持する単一の JS スクリプトスコープ。
+     *
+     * 初回アクセス時に遅延生成され、以後は同一インスタンスを返す。
+     * 実装は `RuntimeContext.getScope()` への委譲。
+     *
+     * @example
+     * ```typescript
+     * const root = new Root();
+     * root.script.onDomReady(s => {
+     *   s.call('init');
+     * });
+     * ```
+     */
+    get script(): ScriptScope;
+    /**
+     * JS 式 / 真偽式を生成するファクトリ。
+     *
+     * 初回アクセス時に遅延生成され、以後は同一インスタンスを返す。
+     * 実装は `RuntimeContext.getExprFactory()` への委譲。
+     *
+     * @example
+     * ```typescript
+     * const root = new Root();
+     * const isActive = root.expr.bool('el.classList.contains("active")');
+     * ```
+     */
+    get expr(): ExprFactory;
+    /**
+     * CSS セレクタで単一要素を参照する `SelectorRef` を返す。
+     *
+     * 実装は `RuntimeContext.querySelector()` への委譲。
+     *
+     * @param selector - `document.querySelector` に渡すセレクタ文字列
+     * @returns `SelectorRef<E>` — セレクタ参照ノード
+     *
+     * @example
+     * ```typescript
+     * const root = new Root();
+     * root.$('#my-btn').on('click', s => s.call('handleClick'));
+     * ```
+     */
+    $<E extends Element = HTMLElement>(selector: string): SelectorRef<E>;
+    /**
+     * CSS セレクタで複数要素を参照する `CollectionRef` を返す。
+     *
+     * 実装は `RuntimeContext.querySelectorAll()` への委譲。
+     *
+     * @param selector - `document.querySelectorAll` に渡すセレクタ文字列
+     * @returns `CollectionRef<E>` — コレクション参照ノード
+     *
+     * @example
+     * ```typescript
+     * const root = new Root();
+     * root.$$('.todo-item').removeAll();
+     * ```
+     */
+    $$<E extends Element = HTMLElement>(selector: string): CollectionRef<E>;
+    /**
+     * Creates a new Root element.
+     *
+     * @param options - Optional options including css rules and DI overrides (for testing)
+     *
+     * @example
+     * ```typescript
+     * import { rule } from '../../css/variables/global-css.js';
+     * const root = new Root({ css: [rule('.foo', { color: 'red' })] });
+     * ```
+     */
+    /**
+     * RuntimeContext — state registry / JS aggregation の受け皿（task 3.2 委譲）。
+     * @internal
+     */
+    private _runtimeContext;
+    constructor(options?: RootOptions);
+    /**
+     * CSS 出力設定（解決済み）。Root constructor 時点で fix される。
+     * @internal
+     */
+    private readonly _cssConfig;
+    /**
+     * 子要素を追加し、要素のバッファ済み Vanilla JS コマンドを Root の script スコープへフラッシュする。
+     *
+     * `HtmlTag.addChild` の CSS tagPath 設定処理を維持しつつ、
+     * `FlushOrchestrator.flush(el, scope)` を追加実行する（Req 1.6, 1.7）。
+     */
+    addChild(child: HTMLTagProtocol): this;
+    /**
+     * Root ツリーに既に追加済みの子要素配下に後から追加された要素のコマンドをフラッシュする。
+     * `app()` の `exportTo()` など、Root.addChild 経由でない addChild の後に呼ぶ。
+     * @internal
+     */
+    flushDescendants(child: HTMLTagProtocol): void;
+    /**
+     * StateRegistry への package-private アクセス（FileExporter が参照）。
+     *
+     * `state()` を一度も呼んでいない場合は `undefined` を返す（遅延初期化と整合）。
+     * 実態は `_runtimeContext.stateRegistry` へ委譲する（task 3.2）。
+     * @internal
+     */
+    get _stateRegistry(): StateRegistry | undefined;
+    /**
+     * 一意な状態 ID を採番し、State<T> オブジェクトを返す。
+     *
+     * Req 1.1: root.state<T>(initial) を呼び出すと一意な状態 ID を採番した State<T> を返す。
+     * Req 1.3: 同一 Root から複数回呼び出すと異なる状態 ID を採番。
+     *
+     * `_runtimeContext.state(initial)` へ委譲する（task 3.2）。
+     *
+     * @param initial - 状態の初期値
+     * @returns State<T> — 一意な `_runtimeId` を持つ観測可能値オブジェクト
+     */
+    state<T>(initial: T): State<T>;
+    /**
+     * Vanilla JS Builder の出力を文字列として返す。
+     *
+     * 実装は `RuntimeContext.renderUserJs()` への委譲。
+     * `script` にアクセスしていない場合（Builder が未初期化）は空文字列を返す。
+     */
+    renderVanillaScript(): string;
+    /**
+     * Enables or disables <!DOCTYPE html> output.
+     * Default is false (backward compatible).
+     */
+    setDoctype(enabled?: boolean): this;
+    /**
+     * Task 3.2: Root の protoRender override。
+     *
+     * 受け取った ctx を子要素の `protoRender(ctx)` に必ず伝搬する。
+     * ctx 省略時はツリー全体で共有する RenderContext を 1 つだけ生成し、
+     * 全子要素に同一インスタンスとして渡す（registry の共有を保証する）。
+     *
+     * 出力は子要素 protoRender の連結（Root 自身のタグは出力しない）。
+     *
+     * @remarks
+     * Task 3.3: Root はレンダーツリー境界の所有者であり、`protoRender` 開始時に
+     * `ctx.registry.reset()` を呼んで前回レンダーで蓄積された id 集合を破棄する。
+     * これにより同一 Root インスタンスを複数回 protoRender しても結果が
+     * バイト等価になり（Req 3.7 ビルド間安定性）、外部から渡された ctx に既存 id が
+     * 登録されていても Root 配下のレンダーには影響しない（Req 3.4 id 重複検出を
+     * Root 境界内に閉じる）。
+     */
+    protoRender(ctx?: RenderContext): string;
+    /**
+     * Renders the document tree to formatted HTML.
+     * Prepends <!DOCTYPE html> if enabled via setDoctype().
+     */
+    render(): string;
+    /**
+     * Recursively collects CSS styles from the entire document tree.
+     *
+     * Traverses all child elements and concatenates their CSS output.
+     *
+     * @returns Concatenated CSS string from all elements
+     *
+     * @example
+     * ```typescript
+     * const doc = new Root();
+     * const element = div();
+     * element.css.addRule('.my-class', { color: 'red' });
+     * doc.addChild(element);
+     *
+     * const css = doc.collectCssStyleString();
+     * ```
+     */
+    collectCssStyleString(): string;
+    /**
+     * Recursively collects JavaScript content from the entire document tree.
+     *
+     * Traverses all child elements and concatenates their JavaScript output.
+     *
+     * @returns Concatenated JavaScript string from all elements
+     *
+     * @example
+     * ```typescript
+     * const doc = new Root();
+     * const button = div();
+     * button.jqm.on('click', () => console.log('Clicked'));
+     * doc.addChild(button);
+     *
+     * const js = doc.collectJsContent();
+     * ```
+     */
+    collectJsContent(): string;
+    /**
+     * Recursively collects jQuery method types used in the entire document tree.
+     *
+     * Aggregates all jQuery methods used by descendant elements for tree-shaking.
+     *
+     * @returns Set of {@link JQueryMethodType} used in the document
+     */
+    collectUsedMethods(): Set<JQueryMethodType>;
+    /**
+     * Generates complete JavaScript output with tree-shaking.
+     *
+     * Combines jQuery helper functions (only for used methods) with the actual
+     * JavaScript content from the document tree.
+     *
+     * **Output Format:**
+     * - If no methods used: returns empty string
+     * - If no content but methods used: returns helper only
+     * - Otherwise: returns `helper + "\n\n" + jsContent`
+     *
+     * @returns Complete JavaScript string ready for embedding
+     *
+     * @example
+     * ```typescript
+     * const doc = new Root();
+     * const button = div();
+     * button.jqm.on('click', () => console.log('Clicked'));
+     * button.jqm.addClass('active');
+     * doc.addChild(button);
+     *
+     * const js = doc.renderJs();
+     * // Output includes:
+     * // - Helper functions for 'on' and 'addClass' only (tree-shaken)
+     * // - Actual event handler and addClass call
+     * ```
+     *
+     * @remarks
+     * **Preconditions:** None
+     *
+     * **Postconditions:**
+     * - Empty string if no methods used
+     * - `helper + "\n\n" + jsContent` format if methods used
+     *
+     * **Invariants:** Helper and jsContent separator is always `"\n\n"`
+     */
+    renderJs(): string;
+    /**
+     * Publisher 用の export snapshot を組み立てて返す。
+     *
+     * runtime registry の内部構造をここで吸収し、FileExporter には漏らさない。
+     * FileExporter は `ExportContext` 経由でのみ必要情報を受け取る（Req 3.1, 3.2）。
+     *
+     * - `html`: `this.render()` の出力
+     * - `css`: `this.collectCssStyleString()` の出力
+     * - `userJs`: `this.renderVanillaScript()` の出力
+     * - `runtimePrelude`: 状態あり時のみ `RUNTIME_PRELUDE` を設定
+     * - `runtimeInitJs`: 状態あり時のみ state-init + derive コマンド列を設定
+     *
+     * @returns ExportContext — publisher が必要とする read-only snapshot
+     */
+    buildExportContext(): ExportContext;
+    /**
+     * ドキュメントツリーを HTML / CSS / JS ファイルとして出力する。
+     *
+     * `new FileExporter(options).exportFromRoot(this, outputPath)` と等価なショートカットメソッド。
+     * `FileExporter` はそのまま残し、高度な制御（カスタムファイル名・reset.css・DOMContentLoaded ラップ等）
+     * が必要な場合の entry point として引き続き利用できる。
+     *
+     * @param outputPath - 出力先ディレクトリパス（存在しない場合は自動作成）
+     * @param options - {@link FileExporterOptions} オプション（省略可）
+     *
+     * @throws {@link ExportableError}
+     * - `invalidPath`: outputPath が空文字列または無効
+     * - `writeFailed`: ディレクトリ作成またはファイル書き込み失敗
+     *
+     * @example 基本的な使用方法
+     * ```typescript
+     * const root = new Root();
+     * root.addChild(html(head(title('My Page')), body(h1('Hello'))));
+     * root.export('./output/demo');
+     * // 上記は以下と等価:
+     * // new FileExporter().exportFromRoot(root, './output/demo');
+     * ```
+     *
+     * @example カスタムオプション付き
+     * ```typescript
+     * const root = new Root();
+     * root.export('./output/demo', { htmlFileName: 'page.html', includeResetCss: true });
+     * // 上記は以下と等価:
+     * // new FileExporter({ htmlFileName: 'page.html', includeResetCss: true }).exportFromRoot(root, './output/demo');
+     * ```
+     *
+     * @remarks
+     * **Preconditions:** `outputPath` は出力先ディレクトリパス
+     *
+     * **Postconditions:** `FileExporter.exportFromRoot` と同一の副作用（HTML/CSS/JS ファイル出力）
+     *
+     * **Error:** `FileExporter` から伝播するエラーはそのまま再スローされる
+     */
+    export(outputPath: string, options?: FileExporterOptions): void;
+}
+type View = HtmlTag;
+/**
+ * `page` 公開面で受け付ける静的ビューの narrow interface（design.md §6.1）。
+ *
+ * `HtmlTag` を直接 `View` として再エクスポートせず、静的レンダリングに必要な
+ * 能力のみを露出する。`HtmlTag` は構造的部分型としてこの interface を満たすため
+ * `VStack()` / `Page()` / `div()` 等の戻り値はそのまま `StaticView` に代入可能だが、
+ * `StaticView` 経由で取り出せるシンボルは static 系メソッドのみとなり、
+ * `jqm` / `state` / `script` / `$` / `$$` 等の runtime 面は型レベルで不可達となる。
+ *
+ * 対応 requirement: 1.1, 1.2, 6.1, 6.2 (page-runtime-separation-spec)
+ */
+interface StaticView {
+    /** 内部実装が静的 HTML をレンダリングするための最小契約 */
+    protoRender(ctx?: RenderContext): string;
+    /** 静的 CSS の収集（runtime JS 収集系は意図的に含めない） */
+    collectCssStyleString(): string;
+}
+interface PageOptions {
+    lang?: string;
+    title?: string;
+    description?: string;
+    viewport?: string;
+    charset?: string;
+}
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface LinkOptions {
+    href: string;
+    target?: '_blank' | '_self';
+    rel?: string;
+}
+interface ButtonOptions {
+    type?: 'button' | 'submit' | 'reset';
+}
+export { type CssConfigOutputMode as $, type AttributeManageable as A, type BooleanAttributeValue as B, type CssPositionMakerType as C, CSSColorName as D, type ElementRef as E, CSSFlex as F, type GlobalCss as G, type HtmlAttributeShape as H, type IdentifierResolver as I, type JQueryManagerInstance as J, CSSFont as K, type LazyLayoutRegister as L, CSSGrid as M, CSSList as N, CSSSpacing as O, CSSTable as P, CSSText as Q, type RenderContext as R, type StyleTemplate as S, type TagType as T, CSSTransform as U, CSSVisibility as V, CSSVisual as W, type ChildManageable as X, type CollectionRef as Y, type Computed as Z, type CssConfigOptions as _, type HTMLTagProtocol as a, type CssManagerType as a0, type CssOutputMode as a1, type CustomAttributeValue as a2, type EachBinding as a3, type EdgeSet as a4, type Exportable as a5, type ExprFactory as a6, FileExporter as a7, type FileExporterOptions as a8, type FlexOptions as a9, createCustomValue as aA, createKeyValueValue as aB, createVanillaScript as aC, getTagStructure as aD, hlUnitToCssString as aE, Root as aF, type StaticView as aG, type FontOptions as aa, type FrameOptions as ab, type GridOptions as ac, type HeadingLevel as ad, type HtmlStyleType as ae, JQUERY_METHOD_TYPES as af, type JQueryManagerProtocol as ag, type JsBoolExpr as ah, type JsExpr as ai, type KeyValueAttributeValue as aj, type LinkOptions as ak, type PageOptions as al, type Positioning as am, PseudoStyleBuilder as an, type ReadableState as ao, type Renderable as ap, SELF_CLOSING_TAGS as aq, type ScriptStateHandle as ar, type SelectorRef as as, type State as at, type StateJsAccessor as au, TAG_TYPES as av, type TagStructure as aw, type UnitStyle as ax, type View as ay, createBooleanValue as az, HtmlTag as b, type HtmlAttributeValue as c, type SharedStyle as d, type HtmlTagOptions as e, type CssPlaceDescription as f, type CssLayoutBuilder as g, type CssStyleManagerType as h, HtmlStyle as i, type HlUnit as j, type CssManagerInstance as k, CssConfig as l, type LayoutRegisteredItem as m, type RelationShip as n, type StyleSelectors as o, type JQueryMethodType as p, type ScriptScope as q, type BorderOptions as r, type BreakpointKey as s, type BreakpointStyles as t, Breakpoints as u, type ButtonOptions as v, CSSAnimation as w, CSSBackground as x, CSSBorder as y, CSSColor as z };