# シェルを合わせる

Company OSの共通部分を持つ画面で使う。対象に正式なシェルがあれば、そのsourceと版を使う。同梱の [シェルの見本](../shell.html) は、原版のブランド・ヘッダー・サイドバー・状態表現を選択抽出したローカル見本。出所と変更は [provenance.json](../provenance.json) にある。見た目だけで別実装を作り直さず、対象に必要な依存と接続を確かめる。

公開の接続口は [shell/mount.mjs](../shell/mount.mjs) と [shell/shell.css](../shell/shell.css)。[動く最小例](../shell/example.html) と [対象adapter](../shell/example.mjs) で、対象のナビ・現在地・保存先を渡す形を確認できる。[READMEの接続例](../README.md) に必要なファイルを示す。[chrome.mjs](../chrome.mjs) は同じ mount を使うライブラリー専用の薄いadapterで、既存の `#chrome` と `main` への自動mountを保つ。共通CSS・開閉・背景は `assets/shell/` に一つだけ置き、ライブラリー用と一般利用用の二つの正本を作らない。

ページ名・説明・ページナビも共通にする時は、対象が用意した `main` の先頭要素を `pageHeader` に渡す。省略すれば従来の外枠だけを接続する。対象の要素・文言・event handlerは保持し、共通側が本文やタイトルを生成し直すことはない。[page-header.mjs](../shell/page-header.mjs) と [page-header.css](../shell/page-header.css) が配置・文字階層・選択下線を持つ。

```js
const shell = mountShell({
  ...targetShellOptions,
  pageHeader: document.getElementById('page-header'),
});
```

対象は `co-page-heading` 内に必要な `co-page-title`・`co-page-description`、任意の `co-page-eyebrow` と `co-page-actions` を置き、その下の `co-page-nav` にリンクを置く。タイトル・説明・操作・ナビは必要なものだけを使い、ラベル・数・遷移先は対象が決める。本文と同じ左右の基準線を使い、headerの実際の高さに続いて本文が始まる。ページ全体のh1を二重にしない。

ページ移動は通常のanchorと `aria-current="page"` を使う。同じ画面の切替は `role="tablist"` 内の `role="tab"` と `aria-selected` を使い、対象が選択・キーボード・tabpanel・URL復元を実装する。共通側は選択表示を追うだけで、リンクをARIA tabへ変更しない。本文内の選択部品にはページナビの指定を広げない。

ラベルや現在地の属性、項目の追加・差替え、幅・フォントの変化には下線が追従する。対象の独自更新後に同期で計測したい時は `shell.pageHeader.refresh()` を使える。初期表示は正式なmain幅で計測する。ページ間のView Transitionや外観queryの引継ぎはLibrary側のadapterで、汎用mountから対象のURLや画面全体の遷移を変更しない。

`navigation` のグループとitemを渡すと、sourceの行・SVG・selected/hover/focusをそのまま使える。itemにhrefがあればanchor、なければbutton。対象のdata属性やonActivateを接続し、形だけの無動作buttonを置かない。`counter` は行末の補助表示、`navigation.setCurrent(id)` / `setCounter(id, value)` は対象の状態を表示へ反映する。検索は既定ナビとピンが対象で、必要なら `searchRows: () => HTMLElement[]` で対象を絞れる。

ピンとコピーは、対象が返す現在地へ接続する。`pin.current()` の `{href, title}` がコピーと表示名、`pin.normalizeHref(value)` の同一origin・復元可能なURLがpinの識別、`pin.storageKey` が対象専用の保存先。正規化では対象外をnullにし、pinに含むstateを対象が決める。共通側はURL/titleの最大40件をlocalStorageへ保存し、保存できない時はページ内だけの反映と伝える。URLで復元できない追記や業務データまで保存したとは表示しない。

対象がURL/titleを変更したら、本文更新後に `shell.refresh()` でpin状態とコピー対象を読み直す。戻る/進むでの本文復元は対象のpopstate処理が持つ。外観の選択をページ移動後も保つ時は `onAppearanceChange(value)` で対象専用の設定へ保存し、次のmountで `appearance` へ戻す。例は別のkeyを使い、pin識別と外観の保存範囲を分けている。共通側に業務stateのserializerやアカウント同期はない。

1documentに1mount。HTTP(S)とES modules、現行ブラウザーのinert/matchMediaを前提とし、背景はsourceのWebGLとfallbackを使う。Navigation API未対応時の履歴可否はsourceと同じfallback。シェル全体のdestroy/unmount、クロスorigin pin、業務データ同期は含まない。mainは既存DOMとevent handlerを保ってcontent内へ移る。完全なCSS隔離ではないので、本文のstyleを自分のclassへ閉じる。

シェルを採用する画面では、その存在、折りたたみ状態、最終的に使える領域を確かめ、その領域で本文を設計する。実装順序は固定せず、外枠の実装詳細で発想を狭めない。接続によって本文の使える幅が変わる時は、構図・情報量・操作を実物で確かめて調整する。

共通の選択表現を使っても、本文のタブ・表・パネルのサイズ、向き、位置、情報量へシェルの指定を拡張しない。寸法まで一致させる範囲は、対象の仕様と今回の指定で確かめる。

ライブラリーの見出し・説明・制作リンク・3つのページ名はLibrary adapterが持ち、その配置と選択表現に同じpageHeaderを使う。対象にはLibraryの文言や3分類を持ち込まず、共通の見た目と動きを接続する。本文の構図・素材・図解・パネルの配置は対象が設計する。開閉の連続した動き、選択の青水色の文字と移動する縁・下線、現在地のコピーやピン留めも、形だけでなく実操作で合わせる。

表示・テーマ・ナビゲーションの操作は対象側の正式な状態とつなぐ。見本の操作は外観と手応えを確認するためのもので、アカウント同期や業務データの保存を実装した証拠にはしない。