はじめに · picola

picola は高速・型安全・拡張可能な Lightbox / 画像ビューワーです。依存ゼロでフレームワーク非依存のコアに、第一級の Svelte 5 アダプタを組み合わせ、フレームワークや CSS と衝突せずに、モダンでジェスチャー駆動の画像表示を実現します。

<script lang="ts">
  import { Lightbox, type Slide } from 'picola/svelte';
  import 'picola/picola.css';

  const slides: Slide[] = [
    { src: '/photos/1.jpg', width: 2400, height: 1600, alt: 'A river at dusk.' }
  ];

  let open = $state(false);
</script>

<button onclick={() => (open = true)}>Open gallery</button>
<Lightbox bind:open {slides} />

これだけで、キーボードとジェスチャーで操作できる完全なビューワーです。以降の内容はすべて任意の作り込みです。

picola を選ぶ理由

コンポジタ駆動のトランジション — 開閉、クリップ展開、背景フェード、スライド送りは Web Animations API によりコンポジタで実行されます。メインスレッドで画像をデコード中でも、フレームレートが落ちません。
サムネイルから展開 — 開閉は起点のサムネイルからアニメーションします。object-fit: cover の切り抜きなら、拡大縮小ではなくクリップで画像全体を映し出します。
メモリを抱え込まない — 表示するのはアクティブなスライド±1枚のみ。範囲外の画像は切り離し、デコード済みのピクセルをブラウザが回収できます。ソースを差し替えるときは、新しい画像のデコードが済むまで前の画像を表示し続けます。
段階的な読み込み — placeholder を即時表示し、フル解像度は zoomintent イベントまで遅らせます。ズームとパンを保ったままソースを差し替え、slides はリアクティブなのでページネーションが開いたビューワーに同期します。
アプリのような操作感 — 焦点を中心とするピンチ／ダブルタップ／ホイールズーム、ラバーバンド、勢いを反映したフリック、ドラッグやピンチで閉じる操作。0–1 の進捗値は CSS から読み取れます。
本物の Svelte 5 実装 — ツールバーとキャプションを snippet と実コンポーネントで組みます({@attach} で接続)。ジェネリックな Slide<T> が独自のスライドデータを型付きのイベントまで届けます。SVG 文字列の注入も、手動の mount/unmount も不要です。
スタイルが衝突しない — フラットな単一クラスセレクタと、詳細度ゼロ(:where)のカスタムプロパティ既定値。通常のカスケード順で上書きでき、!important も、グローバルリセットに負ける @layer も使いません。
依存ゼロのコア — コアは依存ゼロで、ジェスチャー・物理・変形を担います。picola/svelte アダプタはアイコン込みで約 15.6 KB(min+gzip)、土台のコアは約 11 KB(スタイルシートは約 1.3 KB)。どんなフレームワーク向けのアダプタも構築できます。

仕組み

コアはジェスチャー認識、ズーム／パンの物理演算、トランスフォームのレンダリングを担い、アダプタ は DOM 構造を担います。picola/svelte にある Svelte アダプタはリファレンス実装であり、UI の外枠（クローム）をレンダリングし、スニペットを接続し、すべてのインタラクションをコアに委譲します。

コアはフレームワーク非依存で依存ゼロであるため、直接操作することも（フレームワーク非依存のコアを参照）、他の任意のフレームワーク向けにアダプタを構築することもできます。

次のステップ

インストール — picola をプロジェクトに追加します。
クイックスタート — 数行で完全なビューワーを作成します。
レシピ集 — サムネイルから飛び出すアニメーション、カスタムツールバー、遅延読み込み、ヘッドレスモードなど。
API リファレンス — すべての prop、イベント、スニペット、型。

開発初期段階です。 picola は 1.0 未満のバージョンであり、安定版のリリース前に API が変更される可能性があります。