open-press

Runtime

Slides アーキテクチャ

Slide Press の構造：Press marker、folder-per-slide source、theme CSS、core objects、安定した object identity。

OpenPress は deck の順序、各 slide の source、deck 内で共有する UI、theme CSS を分離します。各 slide は直接編集でき、Press 全体では一貫した視覚表現を保てます。

press.tsx は順序を記述する

press/<slug>/press.tsx は deck の index です。<Slide id="..." /> で再生順序を登録し、各 slide の実際の composition は個別の source file に置きます。

import { Press, Slide } from "@open-press/core";

export default function SlidePress() {
  return (
    <Press slug="slide" title="Deck Title" type="slides" page="slide-16-9">
      <Slide id="cover" />
      <Slide id="agenda" />
    </Press>
  );
}

各 slide は独立した source file を持つ

各 slide は press/<slug>/slides/<id>/slide.tsx にあります。この file が実際の visual source で、通常は Slide、Frame、Text、Line、MediaObject などの core objects を組み合わせます。

Folder-per-slide は次の点で有効です：

  1. 作者と Agent は deck 全体を変更せずに 1 枚の slide を編集できます。
  2. Git diff と履歴が読みやすくなります。
  3. Workbench の add、delete、skip が明確な source folder に対応します。

新しい slide は blank source から始める

open-press slide add <id> --press <slug> は最小の slide source を作成し、その ID を登録します。その source を直接編集して実際の composition を作ります。

一度しか使わない visual treatment は slide 内に残します。content-free な visual primitive に 2 回目の実利用がある場合だけ、press/<slug>/ui/ または press/<slug>/components/ に切り出します。deck 全体の typography、color、spacing、effects は press/<slug>/theme/default.css に置きます。

Object identity は primitives で表現する

編集可能 object を大きな compound wrapper の props に隠さないでください。source では core objects を直接使います：

  • Frame の identity には frameKey を使います。
  • Text、Line、MediaObject には安定した label を指定します。
  • 固定配置には box を使います。16:9 slide の base canvas は 1920 x 1080 です。
  • フロー配置には Frame layout を使います。
  • Typography、color、spacing、visual effects は theme CSS に置きます。

Engine はこれらの primitives から Workbench の inline editing、comments、thumbnails、preview のための locator を生成します。作者と Agent の責任は、安定した local ID と明確な source structure を提供することです。

詳細は Core Object API を参照してください。