@yanqirenshi/ihub.core 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# 更新履歴 (@yanqirenshi/ihub.core)
+
+`@yanqirenshi/ihub.srv` と同じ版にそろえて出します。
+版は [semver](https://semver.org/lang/ja/) で付けます。0.x の間は、設定の形・公開する部品・データのフォーマットを変えるときに、minor を上げます。
+(リポジトリ全体の更新履歴は、[ルートの CHANGELOG.md](https://github.com/yanqirenshi/iHub/blob/main/CHANGELOG.md) にあります)
+
+## 0.1.0 (2026-11)
+
+iHub のコア (`src/ihub/`) を、npm のパッケージにした、最初の版です。
+iHub をフォルダごとコピーして使っていたアプリは、[コピー版からの移行](https://github.com/yanqirenshi/iHub/blob/main/docs/src/content/migrate.md) を見てください。
+
+### 切り出し
+
+- `src/ihub/` を、パッケージにした。Babel で変換した ESM を `dist/` に入れて配布する。(`type: module` は付けていない。CRA の webpack で、CommonJS のパッケージの既定の import が壊れるため)
+- 公開する名前: `IHub`・`createStore`・`ConfigProvider`・`useConfig`・`resolveConfig`・`pages`・`docPages`・`panels`・`Frame` などの中間の部品・`ItemWbsNode` などの小さな部品・`usePageTabs`・`manegers`・`wbs`・`useWbs`・`sogh`・`dataApi` のフック・`fetchRepositories`・`fetchProjectsV2`。
+- 雛形を入れた。(`examples/data`・`examples/wbs`・`examples/app`。`ihub-srv init` / `init --app` がコピーする)
+
+### 設定の形
+
+- アプリは、設定 (`config`) を組み立てて、`<IHub config={config}>` に渡す。コアは、アプリのファイルを import しない。
+- 設定の項目: `app`・`menus` (必須)・`menuColors`・`colors`・`operators` (必須)・`wbs` (必須)・`tabs`・`panels`・`help`・`github`。
+- 書き込んだ画面の id を送るヘッダー名は、`app.name` から作る。(`X-{app.name}-Client`)
+- bulma と `index.css` は、`<IHub>` が読む。アプリの `index.css` は、`<IHub>` の import より後に読む。
+
+### 拡張点
+
+- ページのタブとパネルを、設定の `tabs`・`panels` で、足す・差し替える・消せる。`TabbedPage` を公開した。
+- Help の内容を、設定の `help.sections` で差し替えられる。
+
+### ER 図
+
+- ER のテーブルの色 (`color: { base, inner }`) に対応した。(`@yanqirenshi/model.er` 0.2.0・`@yanqirenshi/d3.er` 0.6.0)
+  `er/entities.json` に書くと、その色で描かれる。インスペクタ (テーブルの見出しを右クリック) の「背景色 (外枠)」「背景色 (内側)」で書き換えられる。書いていないときは、既定の色。
+
+### GitHub の OAuth
+
+- OAuth のトークン (API サーバーが持つ) を先に使い、無ければ個人用アクセストークン (`github.token`) を使う。
+- `GithubOAuth` (認証・切断のボタンと状態) を、Scrum のページの Account タブに出す。公開もしている。

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Satoshi Iwasaki (yanqirenshi@gmail.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,275 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @yanqirenshi/ihub.core
+
+iHub のコア (画面の部品) です。
+アプリの設計データ (ER 図・TM・画面遷移図・システム構成図・Systemic Design・WBS など) を、図や表で見て、編集する画面を作ります。
+データは、API サーバー ([@yanqirenshi/ihub.srv](../ihub.srv/README.md)) から読み書きします。
+
+親の issue: [#65](https://github.com/yanqirenshi/iHub/issues/65)
+
+## 入れる
+
+新しいアプリは、雛形から作ります。(マニュアルの「導入のしかた」)
+
+```
+npx --yes --legacy-peer-deps --package=@yanqirenshi/ihub.core --package=@yanqirenshi/ihub.srv -- ihub-srv init --app
+npm install
+npx ihub-srv init
+npm start
+```
+
+`ihub-srv init --app` が、`package.json` (下の `overrides` も入ります)・`src/index.js` などのアプリのファイルを作ります。
+すでにあるアプリに入れるときは、次のとおりです。
+
+```
+npm install @yanqirenshi/ihub.core @yanqirenshi/ihub.srv
+```
+
+iHub をコピーして使っていたアプリは、マニュアルの「コピー版からの移行」を見てください。
+
+次のパッケージは、アプリのものと 1 つにするため、アプリで入れます。(peerDependencies)
+
+`react`・`react-dom`・`react-redux`・`@reduxjs/toolkit`・`react-router`・`react-router-dom`・`@mui/material`・`@mui/icons-material`・`@emotion/react`・`@emotion/styled`
+
+`tion` (iHub が使うパッケージ) は、`react-router-dom` の 6 を求めているため、`react-router-dom` の 7 を使うときは、アプリの `package.json` に次の `overrides` が要ります。
+(無いと、`npm install` が `ERESOLVE` で失敗します)
+
+```json
+{
+  "overrides": {
+    "tion": {
+      "react-router-dom": "$react-router-dom"
+    }
+  }
+}
+```
+
+## 使う
+
+アプリの `src/index.js` で、設定 (`config`) を組み立てて、`<IHub>` に渡します。
+参照アプリ (このリポジトリのルートの `src/index.js`) が、そのまま見本です。
+
+```jsx
+import { IHub, pages } from '@yanqirenshi/ihub.core';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Routes, Route } from 'react-router-dom';
+
+import { PAGES, makePages } from './config/ACCOUNT_MENUS.js';
+import OPERATOR_ITEMS from './config/OPERATOR_ITEMS.js';
+import Operators from './operators/Operators.js';
+import { withIcons, withoutIcons } from './operators/labels.js';
+import NotFoundWbsNodeData from './wbs/NotFoundWbsNodeData.js';
+import NotFoundWbsNodeComponent from './wbs/NotFoundWbsNodeComponent.js';
+import './index.css';
+
+// 設定は、モジュールの中で 1 つだけ作ります。(作り直すと、ストアも作り直されます)
+const config = {
+    app:       { name: 'my-app' },
+    menus:     { pages: PAGES, makePages },
+    operators: { items: OPERATOR_ITEMS, Leafs: Operators, labels: { withIcons, withoutIcons } },
+    wbs: {
+        page: (path)=> import(`./wbs/${path}.js`),
+        NotFoundData: NotFoundWbsNodeData,
+        NotFoundComponent: NotFoundWbsNodeComponent,
+    },
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+      <IHub config={config}>
+        <Routes>
+          <Route path='/'     element={<pages.Cockpit/>} />
+          <Route path='/data' element={<pages.Data/>} />
+          <Route path='/wbs/:wbs_id' element={<pages.WbsNode/>} />
+        </Routes>
+      </IHub>
+    </React.StrictMode>
+);
+```
+
+### 設定 (config)
+
+| 項目 | 内容 | 既定 |
+|---|---|---|
+| `app.name` | 画面の名前。書き込んだ画面の id を API サーバーへ送るヘッダー名 (`X-{name}-Client`) に使う。API サーバー (`ihub-srv --app-name`・`createApp` の `app_name`) と同じ名前にする | `iHub` |
+| `menus` | サイドメニュー。`pages` は既定のページ、`makePages` は個人の設定 (on/off) を反映したページを作る関数 | (必須) |
+| `menuColors` | サイドメニューの色 (`background`・`text`・`avatar`) | `{}` |
+| `colors` | 配色 (`base`・`main`・`sub`・`accent`)。CSS の色 (`'#rrggbb'`) | `{}` |
+| `operators` | ドック。`items` はボタンの一覧、`Leafs` は吹き出しの中身、`labels` は `{ withIcons, withoutIcons }` | (必須) |
+| `wbs` | WBS のノードのページ。`page` はページを読み込む関数、`NotFoundData`・`NotFoundComponent` はページが無いときの表示 | (必須) |
+| `tabs` | ページのタブ。`{ ページの id: { selected, list } }`。既定のタブに重ねる ([ページのタブとパネルを足す](#ページのタブとパネルを足す)) | `{}` |
+| `panels` | タブの code → パネルの部品。`{ ページの id: { code: 部品 } }`。既定に重ねる | `{}` |
+| `help` | Help の内容 (`sections`。部品の配列) | iHub の 3 つ |
+| `github` | GitHub の個人用アクセストークン (`token`) | 無し |
+
+- 動的 `import()` (`wbs.page`) は、ページのあるアプリ側に書きます。(webpack がアプリのフォルダを束ねるため)
+- 必須の項目が無いときは、起動したときに、どの項目が無いかを示すエラーになります。
+- 詳しくは、`src/config.js` のコメントを見てください。
+
+## ページのタブとパネルを足す
+
+タブのあるページ (`pages.Data`・`pages.Batchs`・`pages.Business` など) は、タブの一覧と、タブごとのパネルの表で描いています。
+アプリは、コアの中を触らずに、`config.tabs` でタブを、`config.panels` でパネルを重ねられます。
+(ページの id は、`hooks/usePageTabs.js` の `TAB_DEFS` の名前です。`PAGE_DATA`・`PAGE_BATCHS`・`PAGE_BUSINESS`・`PAGE_DESIGN` など)
+
+例: Data のページに、DFD のタブを足します。(UkiyoSnow/hub が、`usePageTabs.js` と `pages/Data.js` を書き換えて足していたものです)
+
+```jsx
+import Dfd from './components/panels/Dfd.js';
+
+const config = {
+    // (省略)
+    tabs:   { PAGE_DATA: { list: [{ code: 'dfd', label: 'DFD' }] } },   // タブを足す
+    panels: { PAGE_DATA: { dfd: Dfd } },                                // そのタブに出すパネル
+};
+```
+
+- パネルは、`({ tab })` を受け取る関数の部品です。`tab` は、選んでいるタブ (`{ code, label }`) です。
+- パネルの部品は、モジュールの中で 1 つだけ作ります。(描画のたびに作り直すと、タブを切り替えるたびに作り直されます)
+- 選んだタブは、URL の `?tab=` で決まります。(例: `/data?tab=dfd`)
+
+`tabs[ページの id]` の重ね方:
+
+| 項目 | 内容 |
+|---|---|
+| `selected` | 初めに開くタブの code。既定を上書きします |
+| `list` | タブの一覧。`code` が同じものは差し替え、無いものは末尾に足します |
+| `{ code, hidden: true }` | そのタブを消します。(消したタブが初めに開くタブのときは、先頭のタブになります) |
+
+```jsx
+tabs: {
+    PAGE_DATA: {
+        selected: 'dfd',                                  // 初めに DFD を開く
+        list: [
+            { code: 'dfd', label: 'DFD' },                // 足す
+            { code: 'wbs', label: '作業' },               // 名前を変える (差し替え)
+            { code: 'help', hidden: true },               // Help のタブを消す
+        ],
+    },
+},
+```
+
+`panels[ページの id][code]` は、既定のパネルを上書きします。
+(既定のタブのパネルも、同じ code で差し替えられます。例: `panels: { PAGE_DATA: { 'er-diagram': MyEr } }`)
+設定を渡さないときは、いままでどおりのタブとパネルです。
+
+アプリのページも、同じ形で作れます。
+
+```jsx
+import { TabbedPage } from '@yanqirenshi/ihub.core';
+
+const PANELS = { overview: Overview, notes: Notes };
+
+export default function MyPage () {
+    return <TabbedPage pageId="PAGE_MY" panels={PANELS}/>;
+}
+
+// 設定: tabs: { PAGE_MY: { selected: 'overview', list: [{ code: 'overview', label: '概要' }, { code: 'notes', label: 'メモ' }] } }
+```
+
+## Help を差し替える
+
+`config.help.sections` に、部品の配列を渡すと、Help のページの内容 (縦に並ぶスライド) が変わります。
+各部品は、`{ size }` (画面に収まる大きさ `{ w, h }`) を受け取ります。
+既定は、iHub の 3 つです。
+
+```jsx
+import Section01 from './components/help/Section01.js';
+import Section02 from './components/help/Section02.js';
+
+const config = {
+    // (省略)
+    help: { sections: [Section01, Section02] },
+};
+```
+
+### ページの id
+
+| ページの id | ページ | タブの code | 初めに開くタブ |
+|---|---|---|---|
+| `PAGE_API` | `pages.Api` (参照アプリでは `/api`) | `wbs`・`help` | `wbs` |
+| `PAGE_BATCHS` | `pages.Batchs` (参照アプリでは `/batchs`) | `wbs`・`help` | `wbs` |
+| `PAGE_BPMN` | `docPages.BPMN` (参照アプリでは `/bpmn`) | `palettes`・`styles`・`methods`・`overview` | `palettes` |
+| `PAGE_BUSINESS` | `pages.Business` (参照アプリでは `/business`) | `systemic-design`・`tm`・`procedures`・`wbs`・`help` | `tm` |
+| `PAGE_COCKPIT` | `pages.Cockpit` (参照アプリでは `/`) | `cockpit`・`overview` | `cockpit` |
+| `PAGE_CLASSES` | `pages.Classes` (参照アプリでは `/classes`) | `class-diagram`・`wbs`・`help` | `class-diagram` |
+| `PAGE_DATA` | `pages.Data` (参照アプリでは `/data`) | `er-diagram`・`wbs`・`help` | `er-diagram` |
+| `PAGE_DDD` | `pages.DDD` (参照アプリでは `/ddd`) | `ubiquitous-language`・`model-driven-design`・`hands-on-modeler`・`declarative-design`・`layer-architecture`・`overview` | `layer-architecture` |
+| `PAGE_DESIGN` | `pages.Design` (参照アプリでは `/design`) | `ui-panels`・`ui-assemblies`・`ui-parts`・`ui-events`・`wbs`・`help` | `ui-parts` |
+| `PAGE_DEVOPS` | `pages.DevOps` (参照アプリでは `/devops`) | `bpmn`・`wbs`・`help` | `bpmn` |
+| `PAGE_MARKETS` | `pages.Markets` (参照アプリでは `/markets`) | `user-scenario`・`customer-journey-map`・`use-case`・`wbs`・`help` | `user-scenario` |
+| `PAGE_MESSAGES` | `pages.Messages` (参照アプリでは `/message`) | `model`・`wbs`・`help` | `wbs` |
+| `PAGE_ORGANIZATIONS` | `pages.Organizations` (参照アプリでは `/organizations`) | `wbs`・`help` | `wbs` |
+| `PAGE_SCREENS` | `pages.Screens` (参照アプリでは `/screens`) | `screen-transition-diagram`・`screens`・`wbs`・`help` | `screen-transition-diagram` |
+| `PAGE_SYSTEMS` | `pages.SystemEnvironment` (参照アプリでは `/system-environment`) | `system-configuration-diagram`・`wbs`・`help` | `system-configuration-diagram` |
+| `PAGE_ACCOUNT` | `pages.Account` (参照アプリでは `/account`) | `menus`・`operators`・`pages` | `menus` |
+| `PAGE_EXTERNAL_RESOURCES` | `pages.ExternalResources` (参照アプリでは `/external-resources`) | `wbs` | `wbs` |
+| `PAGE_SCRUM` | `pages.Scrum` (参照アプリでは `/scrum`) | `timeline`・`gantt-chart`・`issues`・`pull-requests`・`repositories`・`projects`・`account`・`help` | `projects` |
+
+タブの名前 (label) は、`hooks/usePageTabs.js` の `TAB_DEFS` にあります。
+`TabbedPage` で作った自分のページは、`pageId` に、好きな id (`PAGE_MY` など) を付けられます。
+
+## GitHub との接続
+
+画面は、GitHub (Scrum・コックピット・Issue の追加) に、次のどちらかのトークンで接続します。
+両方あるときは、OAuth のトークンを先に使います。
+
+1. OAuth で得たトークン。API サーバー ([@yanqirenshi/ihub.srv](../ihub.srv/README.md)) に OAuth App の Client ID と Client secret を設定すると使えます。(環境変数 `GITHUB_OAUTH_CLIENT_ID`・`GITHUB_OAUTH_CLIENT_SECRET`、または `createApp({ github })`)
+Scrum のページの Account タブの `GithubOAuth` (認証・切断のボタンと状態) で、認証します。
+2. 個人用アクセストークン。設定の `github.token` に渡します。
+
+どちらも設定しないときは、GitHub には接続しません。(ほかの機能は、いままでどおり使えます)
+OAuth App の作り方と環境変数は、[GitHub との連携](https://github.com/yanqirenshi/iHub/blob/main/docs/src/content/github.md) を見てください。
+`GithubOAuth` は、自分のページにも置けます。(`import { GithubOAuth } from '@yanqirenshi/ihub.core'`)
+
+## 公開しているもの
+
+```js
+import { IHub, pages, Frame } from '@yanqirenshi/ihub.core';
+```
+
+| 名前 | 内容 |
+|---|---|
+| `IHub` | 画面全体。テーマ・全体のスタイル・Redux のストア・ルーター・データの読み込み・GitHub の接続をまとめて、`children` を描く |
+| `ConfigProvider`・`useConfig`・`resolveConfig`・`DEFAULT_CONFIG`・`clientHeaderName` | 設定 |
+| `createStore` | 設定からストアを作る (`IHub` が使う) |
+| `pages` | ページ (`pages.Cockpit`・`pages.Data`・`pages.WbsNode` など) |
+| `docPages` | ドキュメントのページ (`docPages.ER`・`docPages.TM` など) |
+| `panels` | ページの中身 (`panels.ER`・`panels.TM` など) |
+| `GithubOAuth`・`Frame`・`FrameTabs`・`FrameWbsNode`・`FrameWbsNodeTabs`・`TabbedPage`・`Link`・`TableTMRelationships` など | 中間の部品 (`components/assemblies/index.js`) |
+| `ItemWbsNode`・`LinkWBS`・`Tabs` など | 小さな部品 (`components/parts/index.js`) |
+| `usePageTabs`・`mergeTabs` | ページのタブ |
+| `manegers`・`wbs`・`useWbs`・`sogh` | データのマネージャ |
+| `dataApi`・`useGetDataQuery`・`usePatchCollectionMutation`・`useAddRecordMutation`・`usePatchRecordMutation`・`useCollections`・`errorMessage` | API サーバーからのデータの読み書き |
+| `fetchRepositories`・`fetchProjectsV2` | GitHub (Scrum) |
+
+## CSS
+
+`<IHub>` が、bulma と iHub の CSS (`index.css`) を読みます。
+アプリの `index.css` は、iHub の CSS のあとに読み込んで、見た目を上書きします。
+そのため、`src/index.js` では、`@yanqirenshi/ihub.core` の import より後に、アプリの `index.css` を import してください。
+
+`index.css` だけを読みたいときは、`@yanqirenshi/ihub.core/index.css` で読めます。
+
+## 雛形 (examples)
+
+| パス | 内容 |
+|---|---|
+| `examples/data/` | `data/` の雛形。`ihub-srv init` がコピーします |
+| `examples/wbs/` | WBS のノードのページの例。`src/wbs/` にコピーして使えます |
+| `examples/app/` | アプリのファイル (`src/`・`public/`・`.gitignore` など) の雛形。`ihub-srv init --app` がコピーします。`src/` と `public/` は、iHub のリポジトリの参照アプリから、ビルドのときに作ります |
+
+`@yanqirenshi/ihub.core/examples/*` から、パスで読めます。
+
+## ビルド
+
+`src/` を、Babel で `dist/` (ESM) に変換します。
+(CRA は、`node_modules` の JSX を変換しないため)
+
+```
+npm run build -w @yanqirenshi/ihub.core
+```
+
+- 開発中は、`npm run build:watch -w @yanqirenshi/ihub.core` で、直すたびに自動でビルドします。(iHub のリポジトリのルートの `npm start` が、一緒に動かします)
+- `dist/` は、git に入れません。
+- `package.json` に `"type": "module"` は書いていません。(webpack が、`dist/` を厳密な ESM として扱い、`import sogh from 'sogh'` のように、CommonJS のパッケージの既定の import が動かなくなるため)

package/dist/DataGate.js

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useStore } from 'react-redux';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Snackbar from '@mui/material/Snackbar';
+import S from '@mui/material/Typography';
+import Loading from './components/panels/Loading.js';
+import { CLIENT_ID, collectionUpdated, dataApi, useGetDataQuery } from './redux/api/dataApi.js';
+import { menuPagesChanged } from './redux/slices/accountMenuSlice.js';
+import { setWbsData } from './manegers/wbs.js';
+import { useConfig } from './config.js';
+
+// API サーバーからデータを読み込んでから、画面を表示する。
+// そのあとは変更の通知を受けて、変わったコレクションだけを読み直す。
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DataGate(props) {
+  const {
+    menus
+  } = useConfig();
+  const {
+    data,
+    error
+  } = useGetDataQuery();
+  const dispatch = useDispatch();
+  const [notice, closeNotice] = useDataEvents();
+  const actives = data?.collections['local/account_menus'];
+
+  // サイドメニューに、個人の設定 (on/off) を反映する。
+  useEffect(() => {
+    if (actives) dispatch(menuPagesChanged(menus.makePages(actives)));
+  }, [actives, menus, dispatch]);
+  if (error) return /*#__PURE__*/_jsx(LoadError, {
+    error: error
+  });
+  if (!data) return /*#__PURE__*/_jsx(Loading, {});
+
+  // WBS のマネージャは描画の中でそのまま使われるので、描画の前に作り直す。(同じデータなら何もしない)
+  setWbsData(data.collections);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [props.children, /*#__PURE__*/_jsx(DataNotice, {
+      notice: notice,
+      onClose: closeNotice
+    })]
+  });
+}
+
+// API サーバーからの変更の通知 (GET /api/events) を受ける。
+// 戻り値は、フォーマットに合わないデータの知らせと、それを閉じる関数。
+function useDataEvents() {
+  const dispatch = useDispatch();
+  const store = useStore();
+  const [notice, setNotice] = useState(null);
+  useEffect(() => {
+    const etagOf = name => dataApi.endpoints.getData.select()(store.getState()).data?.etags[name];
+    const reload = async name => {
+      const res = await fetch(`/api/${name}`);
+      if (res.ok) dispatch(collectionUpdated(await res.json()));
+    };
+    const source = new EventSource('/api/events');
+
+    // 接続したとき (つながり直したときも) は、取りこぼした変更を読み直す。
+    source.addEventListener('ready', e => {
+      const {
+        etags
+      } = JSON.parse(e.data);
+      for (const [name, etag] of Object.entries(etags)) if (etagOf(name) && etagOf(name) !== etag) reload(name);
+    });
+
+    // ほかで変わったコレクションを読み直す。(このタブの書き込みは、書き込んだときに反映済み)
+    source.addEventListener('changed', e => {
+      const event = JSON.parse(e.data);
+      setNotice(current => current?.name === event.name ? null : current);
+      if (event.client === CLIENT_ID || etagOf(event.name) === event.etag) return;
+      reload(event.name);
+    });
+
+    // フォーマットやルールに合わないデータは、画面に反映せずに知らせる。
+    source.addEventListener('invalid', e => setNotice(JSON.parse(e.data)));
+    return () => source.close();
+  }, [dispatch, store]);
+  return [notice, () => setNotice(null)];
+}
+function DataNotice(props) {
+  const notice = props.notice;
+  return /*#__PURE__*/_jsx(Snackbar, {
+    open: !!notice,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    children: /*#__PURE__*/_jsx(Alert, {
+      severity: "warning",
+      onClose: props.onClose,
+      sx: {
+        whiteSpace: 'pre-wrap'
+      },
+      children: notice && [`data/${notice.name}.json がフォーマットやルールに合っていないため、画面に反映していません。`, ...notice.errors.slice(0, 5)].join('\n')
+    })
+  });
+}
+function LoadError(props) {
+  const error = props.error;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 6
+    },
+    children: [/*#__PURE__*/_jsx(S, {
+      variant: "h5",
+      children: "データを読み込めませんでした。"
+    }), /*#__PURE__*/_jsx(S, {
+      sx: {
+        mt: 2
+      },
+      children: "API サーバーが起動しているか、確かめてください。(npm start で、画面と一緒に起動します)"
+    }), /*#__PURE__*/_jsx(S, {
+      sx: {
+        mt: 2,
+        color: '#888',
+        whiteSpace: 'pre-wrap'
+      },
+      children: error.data?.message || `${error.status} ${error.error || ''}`
+    })]
+  });
+}

package/dist/Github.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useConfig } from './config.js';
+import { authStarted, oauthConfigured, authSucceeded, authFailed } from './redux/slices/githubAuthSlice.js';
+import sogh from './manegers/sogh.js';
+
+// 接続に使うトークンを決める。
+// OAuth で得たトークン (API サーバーがメモリに持つ) を先に使い、無ければ個人用アクセストークン (設定の github.token) を使う。
+// API サーバーに OAuth App が設定されていない (configured: false) ときは、個人用アクセストークンだけで接続する。
+async function chooseToken(dispatch, pat) {
+  try {
+    const res = await fetch('/api/github/token');
+    if (res.ok) {
+      const {
+        configured,
+        token
+      } = await res.json();
+      dispatch(oauthConfigured(configured));
+      if (token) return {
+        token,
+        source: 'oauth'
+      };
+    }
+  } catch (e) {
+    // API サーバーが動いていないときは、個人用アクセストークンだけで試す。
+  }
+  return pat ? {
+    token: pat,
+    source: 'pat'
+  } : null;
+}
+export default function Github(props) {
+  const dispatch = useDispatch();
+  const {
+    github
+  } = useConfig();
+  const auth = useSelector(s => s.githubAuth.value);
+  React.useEffect(() => {
+    if (null !== auth) return;
+    dispatch(authStarted());
+    chooseToken(dispatch, github.token).then(chosen => {
+      if (!chosen) {
+        dispatch(authFailed());
+        return;
+      }
+      sogh.connect(chosen.token, viewer => dispatch(authSucceeded({
+        avatarUrl: viewer.avatarUrl(),
+        login: viewer.login(),
+        source: chosen.source
+      })), error => dispatch(authFailed()));
+    });
+  }, [auth, github, dispatch]); // TODO: setAuthed これ入れたないなぁ。。。
+
+  return null;
+}

package/dist/IHub.js

@@ -0,0 +1,77 @@
+// WBS の表 (@yanqirenshi/table.wbs) の見た目。index.css より先に読み、iHub 側で上書きできるようにする
+import 'bulma/css/bulma.min.css';
+import './index.css';
+import React from 'react';
+import { Provider, useDispatch } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { ThemeProvider } from '@mui/material/styles';
+import { ConfigProvider, resolveConfig } from './config.js';
+import { createStore } from './redux/store.js';
+import { globalStyles, makeTheme } from './manegers/colors.js';
+import { windowResized } from './redux/slices/windowSlice.js';
+import DataGate from './DataGate.js';
+import Github from './Github.js';
+
+// 窓の大きさを、ストアに知らせ続ける。
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function useWindowSize() {
+  const dispatch = useDispatch();
+  React.useEffect(() => {
+    const handleResize = () => dispatch(windowResized({
+      w: window.innerWidth,
+      h: window.innerHeight
+    }));
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [dispatch]);
+}
+function Body({
+  children
+}) {
+  useWindowSize();
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "theme-color5",
+    children: [/*#__PURE__*/_jsx(Github, {}), children]
+  });
+}
+
+// iHub の画面全体。
+// テーマ・全体のスタイル・Redux のストア・ルーター・データの読み込み・GitHub の接続・窓の大きさの監視をまとめ、
+// children (アプリの Router など) を描く。
+//
+//   <IHub config={config}>
+//     <Router/>
+//   </IHub>
+//
+// config は、config.js の形。モジュールの中で 1 つだけ作って渡す。(作り直すと、ストアも作り直される)
+export default function IHub({
+  config,
+  children
+}) {
+  const resolved = React.useMemo(() => resolveConfig(config), [config]);
+  const store = React.useMemo(() => createStore(resolved), [resolved]);
+  const theme = React.useMemo(() => makeTheme(resolved.colors), [resolved]);
+  const styles = React.useMemo(() => globalStyles(resolved.colors), [resolved]);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    config: resolved,
+    children: /*#__PURE__*/_jsxs(ThemeProvider, {
+      theme: theme,
+      children: [/*#__PURE__*/_jsx(GlobalStyles, {
+        styles: styles
+      }), /*#__PURE__*/_jsx(Provider, {
+        store: store,
+        children: /*#__PURE__*/_jsx(BrowserRouter, {
+          children: /*#__PURE__*/_jsx(DataGate, {
+            children: /*#__PURE__*/_jsx(Body, {
+              children: children
+            })
+          })
+        })
+      })]
+    })
+  });
+}
+export { IHub };

package/dist/components/assemblies/Account/Avater.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import AvatarIcon from '@mui/material/Avatar';
+import Beach from '@yanqirenshi/beach';
+// import * as u from '../../libs/yutils/index.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+const u = new Beach();
+export default function Avater(props) {
+  const menu = props.menu;
+  const actions = props.actions;
+  const change = actions.menu.change;
+  const click = () => change(u.catom(menu, new_menu => {
+    new_menu.avater.clicked = !new_menu.avater.clicked;
+    if (new_menu.avater.clicked) return;
+    new_menu.avater.enterd = false;
+    new_menu.menu.enterd = false;
+  }));
+  const enterd = () => change(u.catom(menu, new_menu => {
+    new_menu.avater.enterd = true;
+    new_menu.menu.enterd = true;
+  }));
+  const leaved = () => change(u.catom(menu, new_menu => {
+    new_menu.avater.enterd = false;
+  }));
+  return /*#__PURE__*/_jsx(Box, {
+    className: menu.avater.clicked ? 'pair-color1' : 'theme-color3',
+    sx: sx(menu),
+    children: /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: '#fff',
+        width: 44,
+        height: 44,
+        borderRadius: 44
+      },
+      children: /*#__PURE__*/_jsx(AvatarIcon, {
+        alt: "Yanqirenshi",
+        src: "https://avatars.githubusercontent.com/u/346975?s=400&u=9689e695c587cadccb01c45a8d5df58d4d61cf1e&v=4",
+        onClick: click,
+        onMouseEnter: enterd,
+        onMouseLeave: leaved
+      })
+    })
+  });
+}
+function sx(menu) {
+  return {
+    position: 'fixed',
+    top: 18,
+    left: 22,
+    padding: 0.5,
+    borderRadius: 44,
+    zIndex: 8888888,
+    boxSizing: 'border-box'
+  };
+}

package/dist/components/assemblies/Account/Menu/Foot.js

@@ -0,0 +1,16 @@
+import Box from '@mui/material/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Foot(props) {
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      borderTop: '1px solid #eee',
+      pt: 1,
+      pb: 1,
+      paddingLeft: '22px',
+      paddingRight: '22px'
+    },
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Sign Out"
+    })
+  });
+}