マニフェスト駆動インスペクタ

ビルダーのプロパティインスペクタには「各コンポーネントのどの属性がどの値を取るか」の知識が必要です。それはまさにコアのマニフェストが公開しているものです: すべての components[] エントリが attributeValues{}(値を取る各 data-* 属性 → 列挙値)と cssVars[](テーマ可能なカスタムプロパティ面)を持ちます。CSS のパースも手書きの表も不要 — マニフェストはスタイルシートから生成され、 CI が実装との一致を強制します。

ライブデモ

このページでは実物の editor-kit が動いています。キャンバス上のコンポーネントをクリックすると、インスペクタがその attributeValues をセレクトとして列挙します。すべての編集は CommandStack を通るので、Undo/Redo はそのまま動きます。選択マーカーは足場属性 data-hc-editor-selected です — 下部のシリアライズ出力に注目してください。serialize() が data-hc-editor-* 名前空間を剥がすため、そこには決して現れません。

Release ready

Three checks passed.

stable

serialize() — 足場は除去済み

仕組み

インスペクタ全体は、マニフェストエントリを巡るループです:

import { createEditor, setAttribute, removeAttribute } from '@hypermedia-components/editor-kit';
import manifest from '@hypermedia-components/core/manifest.json' with { type: 'json' };

const byBlock = new Map(manifest.components.map((c) => [c.block, c]));
const editor = createEditor({ root: canvas, manifest });

function renderInspector(node) {
  const block = [...node.classList].find((c) => byBlock.has(c));
  const { attributeValues } = byBlock.get(block);

  for (const [attr, values] of Object.entries(attributeValues)) {
    const select = buildSelect(attr, values, node.getAttribute(attr));
    select.addEventListener('change', () => {
      editor.stack.apply(
        select.value === ''
          ? removeAttribute(node, attr)   // デフォルトに戻す
          : setAttribute(node, attr, select.value),
      );
    });
  }
}

ここで効くスタックの性質は 3 つ:

Coalescing — 自由入力(aria-label フィールドなど)には { coalesce: true } を渡すと、タイピングが undo 1 ステップにまとまります。
transact() — インスペクタの 1 操作が複数の属性書き込みを伴うときはグループ化し、Undo 1 回で操作全体が戻るようにします。
change イベント — スタック変更時にインスペクタを再描画してください。undo/redo は選択中ノードの属性を裏で書き換えます。

テーマのつまみ

cssVars[] は、そのコンポーネントのスタイルシートが読むすべての --hc-* カスタムプロパティ — トークンシステムのマニフェスト側 — を列挙します。インスペクタはこれを「デザイン」タブとして出せます: インスタンス単位の上書きはインライン style のカスタムプロパティへ、アプリ単位の上書きはスタイルシートへ。どちらも普通の属性/DOM 編集なので、同じコマンドスタックを流れます。

デモの先へ

同じマニフェストデータがビルダーの残りも駆動します:

パレット — components[] + docsPath はそのままカタログになります。htmx 連携パターンは recipes[](機械検証つき契約)がカバーします。
ドロップ規則 — ドラッグ&ドロップコントローラの canAccept(container, payload) フックから parts[] と独自の合成規則を参照できます。
構造化生成 — マニフェストは JSON なので、スキーマ制約つき生成 (LLM の structured output → fromJson())を文書化された語彙の内側に保てます。