@mawaru/sdk 0.38.0 → 0.40.0

package/docs/development.md

@@ -19,6 +19,7 @@ nodes/
   program/<dir>/   # Program ノード：config.json ＋ main.ts（＋任意で package.json）
   ai/<dir>/        # AI ノード定義：config.json
   hook/<dir>/      # NodeIOHook：config.json ＋ main.ts（ノードに付く観測フック）
+  human/<dir>/     # Human ノードの実装（承認画面）：config.json ＋ index.tsx（＋手元プレビュー用の cases.ts）
 skills/<dir>/      # AI ノードが参照する skill（SKILL.md）
 views/
   slack/<name>/    # Slack ビュー：index.ts（＋手元プレビュー用の cases.ts）
@@ -56,10 +57,12 @@ views/
   走り続ける）。省略時は `claude-opus`。認証は repo の Actions secrets に置く：Claude Code は
   `ANTHROPIC_API_KEY`（または `CLAUDE_CODE_OAUTH_TOKEN`）、Codex は明示的な `auth_mode` と対応する認証情報（下記「Codex の認証方式」参照）
   （`env` に宣言しなくても渡される）
-- `inputs` は1件以上・key 自由。値は `{ "schema": <JSON Schema>, "resume": true }` の形
+- `inputs` は1件以上・key 自由。値は `{ "schema": <JSON Schema>, "resume": true, "flexible": true }` の形
   （`resume` は省略可。true の口から入力が届いた実行は、同じノードの直近セッションを
-  復元して再開する——差し戻し→修正の続き実行に使う）。旧形式（値が素の JSON Schema）も
-  読める
+  復元して再開する——差し戻し→修正の続き実行に使う。`flexible` も省略可。true の口は
+  `schema` を推奨型として維持し、接続で型が上書きされず型の違う接続も通る——この AI が
+  先頭のループを他のループや API から型を揃えずに呼べるようにする）。旧形式（値が素の
+  JSON Schema）も読める
 - 実行時はラッパーがエージェント CLI（Claude Code / Codex、非対話）を起動し、`outputs` の
   スキーマに適合する output を検証して報告する。出口が複数あれば AI が1つ選ぶ（複数出口＝分岐）
 - **文体の既定は「短く」**：出力の文章は承認画面・Slack・顧客への回答としてそのまま人が読むため、
@@ -79,10 +82,10 @@ views/
   ディレクトリ名で出る）。タイトル行・追加出口のボタン・投稿は mawaru が描く
 - `index.ts` — `export default { files?, renderRunning?, renderCompleted? } satisfies SlackView<入力の型>`。
   契約（型・ctx の中身・決定ボタンの `decisionActionId` / `decisionFormActionId`）の正は
-  `@mawaru/sdk/slack-view`。実装した関数の面だけが変わる
+  `@mawaru/sdk/views/slack`。実装した関数の面だけが変わる
 - **純関数**にする：mawaru が隔離環境（QuickJS）で動かすので、`fetch` / `process` / `require` / タイマー /
   `console` は無い。1回の呼び出しは 200ms・32MB まで。ctx も戻り値も JSON で受け渡す
-- import できるのは同じディレクトリ内の相対パスと `@mawaru/sdk/slack-view` だけ（npm パッケージは不可）。
+- import できるのは同じディレクトリ内の相対パスと `@mawaru/sdk/views/slack` だけ（npm パッケージは不可）。
   ビルドしない（mawaru が TypeScript の型を外して読む。`enum` など型を外すだけで JS にならない書き方は不可）
 - 入力は崩れて届くことがある（`input` が `null` 等）。例外を投げない書き方にする。失敗すると、承認待ちは
   承認ボタンだけ・完了は1行のフォールバックになる
@@ -97,6 +100,43 @@ views/
   - 端末に1通ごとの結果が出る（`✔` 成功・`⚠` 描画に失敗して理由つき・`–` 未実装の面）。失敗が1つでもあれば exit 1。
     ビューを直したら同じコマンドで送り直して確かめる
 
+## Human ノード（`nodes/human/<dir>/`）
+
+- human ノードの実装＝承認画面の、上の帯より下の全部（書類と承認バー）を描く React のビュー。ノードの「承認画面」に
+  ディレクトリ名を選ぶと使われる（program / AI と同じく、ブランチ（ref）も指せる）。選ばなければ mawaru の標準の承認画面。
+  右上の閉じるボタン・差し戻しと追加の出口のダイアログ・承認の送信は mawaru が持つ
+- `config.json` — 宣言（human のポート型）。形は AI の config.json に揃える：
+  `{ "inputs": { "in": { "schema": … } }, "outputs": { "approve": …, "reject": … } }`。
+  `inputs.in` を省略すると上流の型をそのまま受ける、`outputs.approve` を省略すると in と同型、`outputs.reject` を省略すると
+  標準の差し戻し（指示＋参考ファイル）。`type` の配列（nullable）は使えない（任意の値は required から外す）。
+  エディタでディレクトリを選んだときに宣言がノードへ写る。**config.json を変えたら、エディタで選び直してから publish する**
+  （固定する commit の宣言とノードの写しが違うと publish が 422 になる。program / AI と同じ）
+- `index.tsx` — `export default defineApprovalView<In>(({ ctx }) => …)`。ビューはコンポーネント1つで、状態（直した値・選択など）は
+  `useState` で持つ。**承認バーは `<ApprovalBar ctx={ctx} label=… disabled=… output=… />` を自分で置く**（置かないと
+  承認バーは出ない）。`output` は承認で approve に流す値（省略時は `ctx.output`）。書き方の例：
+  `<div style={{ minHeight: "100%", display: "flex", flexDirection: "column" }}><div style={{ flex: 1 }}>…</div><ApprovalBar ctx={ctx} /></div>`
+  （承認バーは下に貼り付く）
+- 契約（型・ctx の中身）と部品（`ApprovalBar`・`SchemaForm`・`Markdown`・`Linkify`・`FilePreview`・`useNarrow` など）は
+  すべて `@mawaru/sdk/human` から import する。型は `npx mawaru typegen` が config.json から
+  `types.d.ts`（`In` / `Approve` / `Reject`。file は `FileRef`）を作る
+- エディタの型検査には repo ルートの `tsconfig.json`（`jsx: react-jsx`・`moduleResolution: Bundler`・`include: ["nodes/human", "views"]`）と
+  devDependencies の `@types/react` が要る。`npx mawaru init` が作る（init より前からある repo は自分で足す）
+- 承認画面の上の帯より下を余白なしで全部使える。余白・最大幅・スクロールはビューが決める
+  （縦いっぱいに使うなら `100vh`）。右上の角には mawaru の閉じるボタンが重なるので、大事なものを置かない
+- mawaru がまとめて（ビルドして）**sandbox iframe の中で動かす**：mawaru のログインや API には届かない。`fetch` も CSP で止まる。
+  要るものは部品キットに頼む：`useViewBridge()` の `fileUrl`（署名付き URL）・`uploadFile`・`copyText`、
+  `useApprovalActions()` の `decide(port, value)`（承認・差し戻し・追加の出口を決める。決定できるとき
+  （`ctx.decision.canDecide`）、人が押した直後だけ通る）・`openRejectDialog()`・`openExitDialog(key, value)`・`close()`。
+  `ApprovalBar` はこれらを使っているので、置くだけなら呼ばなくてよい
+- import できるのは `nodes/human/` の中の相対パス・`react`・`@mawaru/sdk/human` だけ
+  （npm パッケージは不可）。複数の human ノードで使う部品は `nodes/human/_<名前>/` に置ける（`_` 始まりはノードではない）
+- 例外を投げる・まとめられないと、その承認画面は標準に落ちる。URL に `?view=standard` を付けると標準で開ける
+- 版：program / AI と同じ。公開版は publish 時の commit に固定され、テスト実行は push だけで変わる
+- `cases.ts` — 手元プレビューのケース（`ApprovalViewCase[]` を `export default`。`{ name, input, refs?, nodeName?, phase? }`）
+- 手元プレビュー：`npx mawaru login` のあと、repo ルートで `npx mawaru preview human/<dir>`。push せずに手元のファイルを
+  本番と同じまとめ方・同じ隔離で、承認画面と同じ形で開く（ケースと局面を切り替えられ、承認は送らずに approve に載る値を出す）。
+  保存するたびに送り直し、開いている画面が読み直す。まとめられないと理由を出して exit 1。`--once` は1回送って終わる
+
 ## loop（回路）の作成・更新
 
 - `.claude/skills/create-loop` スキルに従う（graph API の契約は `_schemas/graph.ts` が正）

package/index.ts

@@ -6,6 +6,7 @@ export * from "./_schemas/duplicate-selection.js"
 export * from "./_schemas/extract-component.js"
 export * from "./_schemas/graph.js"
 export * from "./_schemas/hook-manifest.js"
+export * from "./_schemas/human-manifest.js"
 export * from "./_schemas/node.js"
 export * from "./_schemas/port-spec.js"
 export * from "./_schemas/program-manifest.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mawaru/sdk",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "description": "mawaru 実行 repo の開発 SDK。契約スキーマ（config.json 規約・ループ graph API）の正 ＋ typegen / validate CLI",
   "type": "module",
   "bin": {
@@ -11,9 +11,25 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./human": {
+      "types": "./dist/views/human.d.ts",
+      "default": "./dist/views/human.js"
+    },
+    "./views/slack": {
+      "types": "./dist/views/slack.d.ts",
+      "default": "./dist/views/slack.js"
+    },
     "./slack-view": {
-      "types": "./dist/slack-view.d.ts",
-      "default": "./dist/slack-view.js"
+      "types": "./dist/views/slack.d.ts",
+      "default": "./dist/views/slack.js"
+    },
+    "./views/runtime": {
+      "types": "./dist/views/runtime.d.ts",
+      "default": "./dist/views/runtime.js"
+    },
+    "./views/host": {
+      "types": "./dist/views/host.d.ts",
+      "default": "./dist/views/host.js"
     }
   },
   "files": [
@@ -23,7 +39,7 @@
     "docs",
     "_schemas",
     "index.ts",
-    "slack-view.ts"
+    "views"
   ],
   "engines": {
     "node": ">=20"
@@ -32,8 +48,24 @@
     "zod": "^4.4.3",
     "zod-from-json-schema": "^0.5.3"
   },
+  "peerDependencies": {
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^26.1.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9"
   },

package/skills/create-loop/SKILL.md

@@ -49,8 +49,8 @@ secret）でも、**足りない値を推測・生成・空文字で代用しな
   ノード・接続・refs（ループ変数）・hooks の形と、superRefine 内の全整合性ルール（日本語コメント付き）
 - `node_modules/@mawaru/sdk/_schemas/node.ts` — ポートの形（`graphPortSchema`）と key の規則
 - `node_modules/@mawaru/sdk/_schemas/port-spec.ts` — **kind 別の必須ポート構成**（`kindPortsViolation`）と
-  接続の型規則（human の in は承認ビューの宣言型、program の in はスキーマ包含 等）
-- `node_modules/@mawaru/sdk/_schemas/program-manifest.ts` / `ai-manifest.ts` — repo 側 config.json の規約
+  接続の型規則（human の in は実装（nodes/human/）の宣言型、program の in はスキーマ包含 等）
+- `node_modules/@mawaru/sdk/_schemas/program-manifest.ts` / `ai-manifest.ts` / `human-manifest.ts` — repo 側 config.json の規約
 - 同ディレクトリの `*.test.ts` — 通る graph / 弾かれる graph の実例集として読める
 
 ## API（パスとボディは openapi.json が正）
@@ -122,7 +122,10 @@ graph の保存（`PUT loops/{loopId}/graph`）は常に下書き（draft）に
    graph 保存の書き戻しと食い違って 409 になり、テスト実行も古い中身で走る）。
 2. **ノードに結びつける**：graph の該当ノードに `program.program_dir` / `ai.ai_dir` を設定し、
    ports を config.json の inputs / outputs の写しにして保存する（in ポート key は `in`、
-   out ポートは outputs の各 key）。human は承認ビュー、wait は待ち方もここで設定する。
+   out ポートは outputs の各 key）。human は承認画面、wait は待ち方もここで設定する。
+   human は標準の承認画面なら `human.human_dir` を省略する。この repo に専用の承認画面が要るなら
+   `nodes/human/<dir>/` に作り（`docs/development.md` の「Human ノード」）、push してから `human.human_dir`（＋任意で `ref`）に
+   ディレクトリ名を入れる（`GET github/humans` が候補を返す）。`human.declaration` は省略してよい（保存時に mawaru が repo から読む）。
 3. **単体で確かめる**：そのノードだけをテスト実行する。`POST runs/start` に `kind: "test"`・
    `test_scope: "only"`・`start_node_id`（そのノード）・`payload`（サンプル入力。上流を確かめ済みなら
    その output を使う）・`start_by`（ユーザーの user_id。`GET members` で引く。API キー起動では必須）を

package/views/_approval/ApprovalBar.tsx

@@ -0,0 +1,239 @@
+import { type ReactNode, useState } from "react"
+import { useApprovalActions } from "../_approvalActions.js"
+import type { ApprovalViewContext } from "../human.js"
+
+// 承認バー（承認画面の下の帯）。ビューが自分で置く部品で、内蔵の標準ビューも同じものを使う
+// （docs/tasks/wip/承認ビューの顧客repo配置.md の「承認バーもビューが描く」）。
+// 材料は ctx.decision、操作は useApprovalActions()。送信中とエラーは decide の結果からここで持つ
+
+const errorMessage = (err: unknown) =>
+  err instanceof Error ? err.message : "送信に失敗しました"
+
+/**
+ * 承認バー。書類の領域の下に貼り付く（`position: sticky; bottom: 0`）。外側を `minHeight: 100%` の縦の flex にして
+ * 中身を `flex: 1` にすると、中身が短くても下端に来る。
+ */
+export const ApprovalBar = <TOut = unknown>({
+  ctx,
+  label,
+  disabled = false,
+  output,
+  value,
+  children,
+}: {
+  /** ビューが受け取った ctx */
+  ctx: ApprovalViewContext<unknown>
+  /** 承認ボタンの文言（省略時は「承認して〈次のノード〉へ」） */
+  label?: string
+  /** 承認ボタンを押せない */
+  disabled?: boolean
+  /** 承認したとき approve に流す値（宣言の outputs.approve の形。省略時は value）。`<ApprovalBar<Approve> …>` で型を検査できる */
+  output?: TOut
+  /** 今の値（ビューで直した値。in の形。省略時は ctx.output）。型の合う追加の出口にはこれが流れる */
+  value?: unknown
+  /** バーの左側に足すもの */
+  children?: ReactNode
+}) => {
+  const actions = useApprovalActions()
+  const [sending, setSending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const { phase, decision } = ctx
+  const current = value === undefined ? ctx.output : value
+  const approveValue = output === undefined ? current : output
+
+  const send = (request: Promise<void>) => {
+    setSending(true)
+    setError(null)
+    request
+      .catch((err: unknown) => setError(errorMessage(err)))
+      .finally(() => setSending(false))
+  }
+  const open = (request: Promise<void>) =>
+    request.catch((err: unknown) => setError(errorMessage(err)))
+
+  return (
+    <div
+      style={{
+        position: "sticky",
+        bottom: 0,
+        zIndex: 1,
+        flex: "none",
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--space-3)",
+        padding: "var(--space-3) var(--space-6)",
+        borderTop:
+          phase === "waiting"
+            ? "var(--border-w-strong) solid var(--human)"
+            : "var(--border-w) solid var(--border)",
+        background: "var(--surface)",
+      }}
+    >
+      {phase === "waiting" ? (
+        <>
+          {/* 承認できない理由だけ出す（渡し先はボタンのラベルが言っている） */}
+          {decision.otherAssignees && (
+            <span style={{ fontSize: "var(--text-sm)", color: "var(--muted)" }}>
+              <span style={{ color: "var(--ink)" }}>
+                {decision.otherAssignees.join("・")}
+              </span>
+              {" さんの担当です — あなたは承認・差し戻しができません"}
+            </span>
+          )}
+          {children}
+          <div style={{ flex: 1 }} />
+          {decision.progress && (
+            // 全員の承認が要るときの進み具合。自分が承認済みなら残りを待つ
+            <span
+              style={{
+                fontFamily: "var(--font-mono)",
+                fontSize: "var(--text-xs)",
+                color: "var(--muted)",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {decision.progress.done}/{decision.progress.total}人 承認済み
+            </span>
+          )}
+          {error && (
+            <span role="alert" style={{ color: "var(--fail)" }}>
+              {error}
+            </span>
+          )}
+          {decision.exits.map((exit) => (
+            <button
+              key={exit.key}
+              type="button"
+              className="ghost"
+              disabled={!decision.canDecide || sending}
+              onClick={() =>
+                exit.needsInput
+                  ? open(actions.openExitDialog(exit.key, current))
+                  : send(actions.decide(exit.key, current))
+              }
+              style={{ fontSize: "var(--text-sm)", whiteSpace: "nowrap" }}
+            >
+              {exit.name}
+            </button>
+          ))}
+          {decision.rejectTargetName && (
+            <button
+              type="button"
+              className="ghost"
+              disabled={!decision.canDecide || sending}
+              onClick={() => open(actions.openRejectDialog())}
+              style={{ fontSize: "var(--text-sm)", whiteSpace: "nowrap" }}
+            >
+              AIへ差し戻す（reject）
+            </button>
+          )}
+          <button
+            type="button"
+            className="primary"
+            disabled={!decision.canDecide || sending || disabled}
+            onClick={() => send(actions.decide("approve", approveValue))}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "var(--space-2)",
+              paddingLeft: "var(--space-5)",
+              paddingRight: "var(--space-5)",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {sending
+              ? "承認しています…"
+              : decision.progress?.approvedByMe
+                ? "承認済み — 全員の承認待ち"
+                : (label ?? `承認して${decision.approveTargetName ?? "次"}へ`)}
+            <svg width="12" height="12" viewBox="0 0 16 16" aria-hidden="true">
+              <path
+                d="M4.5 3L12.5 8L4.5 13V3Z"
+                style={{ fill: "var(--on-accent)" }}
+              />
+            </svg>
+          </button>
+        </>
+      ) : phase === "rejected" ? (
+        <>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            style={{ flex: "none" }}
+            aria-hidden="true"
+          >
+            <rect
+              x="3.5"
+              y="7"
+              width="9"
+              height="6"
+              rx="1.5"
+              style={{ fill: "none", stroke: "var(--muted)", strokeWidth: 1.5 }}
+            />
+            <path
+              d="M5.5 7V5.5C5.5 4 6.5 3 8 3C9.5 3 10.5 4 10.5 5.5V7"
+              style={{ fill: "none", stroke: "var(--muted)", strokeWidth: 1.5 }}
+            />
+          </svg>
+          <span style={{ fontSize: "var(--text-xs)", color: "var(--muted)" }}>
+            再実行が完了して新しい下書きが届くと、承認待ちに戻り通知されます
+          </span>
+          <div style={{ flex: 1 }} />
+          <button
+            type="button"
+            className="ghost"
+            disabled
+            style={{
+              fontSize: "var(--text-sm)",
+              opacity: 0.5,
+              whiteSpace: "nowrap",
+            }}
+          >
+            差し戻す（reject）
+          </button>
+          <button
+            type="button"
+            className="primary"
+            disabled
+            style={{ opacity: 0.5, whiteSpace: "nowrap" }}
+          >
+            承認して次へ
+          </button>
+        </>
+      ) : (
+        <>
+          <span
+            style={{
+              color:
+                phase === "failed"
+                  ? "var(--fail)"
+                  : phase === "cancelled"
+                    ? "var(--muted)"
+                    : "var(--ok)",
+              fontSize: "var(--text-sm)",
+            }}
+          >
+            {phase === "failed" ? "✕" : phase === "cancelled" ? "◼" : "✓"}
+          </span>
+          <span style={{ fontSize: "var(--text-sm)", color: "var(--muted)" }}>
+            {phase === "failed"
+              ? (decision.failedReason ?? "この step は失敗しました")
+              : phase === "cancelled"
+                ? "キャンセル済み — この run は中断されました"
+                : "対応済み — 承認して次のノードへ渡しました"}
+          </span>
+          <div style={{ flex: 1 }} />
+          <button
+            type="button"
+            className="ghost"
+            onClick={() => open(actions.close())}
+            style={{ fontSize: "var(--text-sm)", whiteSpace: "nowrap" }}
+          >
+            run の進行を見る →
+          </button>
+        </>
+      )}
+    </div>
+  )
+}

package/views/_approvalActions.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext } from "react"
+
+// 承認ビューからホスト（mawaru の承認画面）に頼む口。提供（Provider）はホストと iframe の中の実行部分だけが使うので
+// host.ts から出し、ビューを書く人向けの approval.ts からは型と useApprovalActions だけを出す
+
+/**
+ * ビューから承認画面の操作を頼む口。決定の送信はホストが行う。
+ * ホストは、この step で・見ている人が決定できる（`ctx.decision.canDecide`）ときだけ受け、
+ * `decide` はさらに人がビューの中で押した直後のときだけ受ける（開いただけで決定するビューは書けない）。
+ */
+export type ApprovalActions = {
+  /** 決定する。`port` は `approve` / `reject` / 追加の出口の key。送り終わると承認画面は run の画面へ戻る */
+  decide: (port: string, value: unknown) => Promise<void>
+  /** ホストの差し戻しダイアログを開く（理由と参考ファイルを入れて差し戻す） */
+  openRejectDialog: () => Promise<void>
+  /** 追加の出口に流す値を入れるダイアログを開く（`value` が初期値）。値の型が出口と合わないときに使う */
+  openExitDialog: (key: string, value: unknown) => Promise<void>
+  /** 承認画面を閉じて run の画面へ戻る（右上の × と同じ） */
+  close: () => Promise<void>
+}
+
+const ApprovalActionsContext = createContext<ApprovalActions | null>(null)
+
+export const ApprovalActionsProvider = ApprovalActionsContext.Provider
+
+/** 承認画面の操作を頼む口（承認画面の中でだけ使える） */
+export const useApprovalActions = (): ApprovalActions => {
+  const actions = useContext(ApprovalActionsContext)
+  if (!actions) throw new Error("承認画面の中で使ってください")
+  return actions
+}

package/views/_bridge.tsx

@@ -0,0 +1,36 @@
+import { createContext, type ReactNode, useContext } from "react"
+import type { FileRef } from "./_parts/fileRef.js"
+
+// ビューがホスト（mawaru の画面）に頼めること。顧客 repo のビューは sandbox iframe の中で動き、
+// API を叩けない（認証が付かない）ので、要るものはここ経由でホストに頼む
+// （docs/tasks/wip/承認ビューの顧客repo配置.md の「ビューがホストに頼めること」）。
+// ホストの画面の中では API を直接呼ぶ実装を、iframe の中では postMessage の実装を差す。
+// 部品（FilePreview・SchemaForm のファイル欄）もこれを使うので、どちらで描いても同じに動く
+export type ViewBridge = {
+  // Storage の署名付き URL（private バケットなので描画のたびに取る）
+  fileUrl: (file: FileRef) => Promise<string>
+  // ファイルを上げて参照を返す（SchemaForm のファイル欄と同じアップロード先）
+  uploadFile: (file: File) => Promise<FileRef>
+  // クリップボードに書く（sandbox の中からは書けない）
+  copyText: (text: string) => Promise<void>
+}
+
+const ViewBridgeContext = createContext<ViewBridge | null>(null)
+
+export const ViewBridgeProvider = ({
+  bridge,
+  children,
+}: {
+  bridge: ViewBridge
+  children: ReactNode
+}) => (
+  <ViewBridgeContext.Provider value={bridge}>
+    {children}
+  </ViewBridgeContext.Provider>
+)
+
+export const useViewBridge = (): ViewBridge => {
+  const bridge = useContext(ViewBridgeContext)
+  if (!bridge) throw new Error("ViewBridgeProvider の中で使ってください")
+  return bridge
+}

package/views/_parts/DocumentCard.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from "react"
+
+// 承認画面の「書類」カードの枠（標準ビュー・回答レビュー・お問い合わせ回答で同じ形）。
+// 狭い幅（useNarrow）では左右の余白を詰めて本文の幅を確保する
+export const documentCardStyle = (narrow: boolean): CSSProperties => ({
+  maxWidth: "720px",
+  margin: "0 auto",
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--space-4)",
+  background: "var(--surface)",
+  border: "var(--border-w) solid var(--border)",
+  borderRadius: "var(--radius-m)",
+  boxShadow: "var(--shadow)",
+  padding: narrow
+    ? "var(--space-5) var(--space-4) var(--space-6)"
+    : "var(--space-6) var(--space-10) var(--space-8)",
+})