カルーセルの作り方

ノードの構成

以下を参考に、ノードを構成した上でAIに指示を出すとスムーズかも。

プロンプト

あなたは KARTE Craft Studio の実装担当です。

【前提】
対象ページには、すでにカルーセルのノードだけが置かれている（画像・viewport 幅・gap はデザイン済み）。
あなたは prev/next の挙動と初期位置だけを実装する。ノードの追加・ラップ用 DOM の createElement は禁止。

【対象カルーセル】（最低限これだけ埋める）
- アプリ / ページ: __________（例: kono-test /works）
- セクション Frame の名前（ルート）: __________（例: carousel-demo2）
- ループ: あり / なし

【ノードの特定方法】
1. セクションルート Frame を名前で特定する（上記 {section}）。
2. その子孫から名前で探す（プレフィックスはセクション名に合わせる）:
   - 前へ: `{section}-prev`
   - 次へ: `{section}-next`
   - 窓: `{section}-viewport`
   - トラック: viewport 直下で名前が `carousel-track` の Frame
   - スライド: carousel-track の直下の子（Image。名前は `*-image-placeholder*` など任意）
3. 公開サイトでは nodeId がプレフィックス付きになることがある。要素取得は findById（完全一致 + id suffix 照合）を使う。ボタンから viewport/track を辿るフォールバックも可。
4. 同一ページに別セクションのカルーセルがある場合、上記は「このセクションルート内」にスコープすること。グローバルな index を共有しない。

【寸法・枚数は測って決める（ハードコードしない）】
初回 init（ページ onMount または初回操作前）で、このセクションだけを対象に:

- `track`: carousel-track の DOM
- `viewport`: `{section}-viewport` の DOM
- `slides`: track の直下の要素（Image）を DOM 順
- `total` = slides.length（0 なら何もしない）
- 1 枚目の `slideWidth` = slides[0].getBoundingClientRect().width（または offsetWidth）
- `gap` = parseFloat(getComputedStyle(track).columnGap || getComputedStyle(track).gap) || 0
- `stepPx` = slideWidth + gap
- `visible` = 少なくとも 1。目安: floor((viewport.clientWidth + gap) / stepPx) をクランプ（全枚数以下）
  ※ viewport 幅は既にデザインされているので、ノードの width props を書き換えなくてよい。ズレる場合は測定値を優先。
- ループなし: `maxIndex = max(0, total - visible)`。index は 0..maxIndex
- ループあり: index は 0..total-1 で % total

translateX は **carousel-track のみ**: `translateX(-index * stepPx)`（transition は任意）

【ワークフロー】
- prev / next は各 Button の onClick に workflow.placement.add で紐づける（壊れやすい inline の workflow.action.update だけに頼らない）。
- 既存の別カルーセル用 onMount / WF がある場合は壊さず、対象セクション用の init を追加する。
- 各カルーセルは専用の window 状態オブジェクトに { index, total, stepPx, visible, maxIndex, trackId, viewportId, ... } を保持。

【完了条件】
- プレビュー・公開で当該セクションの prev/next が動く
- 同ページの他カルーセルも引き続き動く
- コンソールに指定 prefix の init / prev / next ログがある
- 当該セクションで、画像が prev / next の下に被らない

【成果物】
変更内容の要約と、必要なら main 向け MR。