@mawaru/sdk 0.40.0 → 0.41.0

package/views/human.ts

@@ -1,91 +1,83 @@
 import type { ReactNode } from "react"
 import type { JsonSchema } from "../_schemas/node.js"
+import type { FileRef } from "./_parts/fileRef.js"
 
-// human ノードの実装（nodes/human/<dir>/index.tsx）の約束（`@mawaru/sdk/human`）。承認画面（ビュー）は React の
-// コンポーネント1つで、承認画面の上の帯より下の全部（書類と承認バー）を描く。右上の閉じるボタン・差し戻し後の帯・
-// 差し戻しと追加の出口のダイアログ・認可・decision の POST・Broadcast の購読はホスト（mawaru の承認画面）に残る
-// （docs/tasks/wip/承認ビューの顧客repo配置.md の「承認バーもビューが描く」）。
+// human ノードの実装（顧客 repo の nodes/human/<dir>/index.tsx）の約束（`@mawaru/sdk/human`）。
+// human ノードは「input を受け取り、人の操作で出口（approve・reject・追加の出口）に値を出す」。
+// program の run(input) が { <出口ポートのkey>: <データ> } を返すのと同じ形で、human はそれを人が画面で選ぶ。
 //
-// ctx に入るのは JSON で表現できる値だけ（React 要素・クラスインスタンス・ホストの関数は無い）。
-// 顧客 repo のビューは sandbox iframe の中で動き、ctx は postMessage で届く。
-// ホストに頼みたいこと（ファイルの URL・アップロード・コピー）は useViewBridge()、承認の操作は useApprovalActions() から
+// 実装は React のコンポーネント1つで、承認画面の上の帯より下を全部描く。mawaru が esbuild でまとめ、
+// sandbox iframe の中で動かす（mawaru のログイン・API・fetch には届かない）。
+// 局面・担当・全員承認の進み具合は mawaru の承認画面の帯が出し、実装が描かれるのは承認待ちのときだけ。
 //
-// TIn は実装が宣言（config.json の inputs.in）した形。宣言と型引数が食い違ってもコンパイルは通るので、
-// **一致はビュー実装の責任**（typegen の types.d.ts を使うと揃う）
+// 型は mawaru typegen が config.json から作る types.d.ts（Input / Outputs / Output / Refs。program と同じ）を使う：
+//   export default defineHuman<Input, Output, Refs>(({ input, out, ctx }) => …)
 
-/** 承認画面の局面：承認待ち／承認済み／差し戻し後（AI 再実行待ち）／失敗／キャンセル */
-export type ApprovalPhase =
-  | "waiting"
-  | "approved"
-  | "rejected"
-  | "failed"
-  | "cancelled"
-
-/**
- * 承認バーの材料。部品の `ApprovalBar` はこれをそのまま使う。承認バーを自分で書くときに読む。
- */
-export type ApprovalDecisionContext = {
-  /** 見ている人が今決定できる（担当で承認待ち）。全員の承認が要るノードでも true（値を直せるかは `editable`） */
-  canDecide: boolean
-  /** 承認したあとに流れる先のノード名（つながっていなければ null） */
-  approveTargetName: string | null
-  /** 差し戻し先のノード名（無ければ差し戻せない） */
-  rejectTargetName: string | null
-  /** 承認・差し戻し以外の出口。`needsInput` は、今の値の型が出口と合わず、値を入れるダイアログが要るもの */
-  exits: { key: string; name: string; needsInput: boolean }[]
-  /** 担当でない人が開いたときの、担当の名前（担当なら null） */
-  otherAssignees: string[] | null
-  /** 全員の承認が要るときの進み具合（`approvedByMe` は自分がもう承認したか）。要らなければ null */
-  progress: { done: number; total: number; approvedByMe: boolean } | null
-  /** 失敗した step の理由（失敗していなければ null） */
-  failedReason: string | null
+export type HumanProps<
+  TInput = unknown,
+  TOutput = Record<string, unknown>,
+  TRefs = Record<string, unknown>,
+> = {
+  /** 届いた値（in ポートの値＝ step の input） */
+  input: TInput
+  /**
+   * 人の操作を mawaru に渡す。`{ <出口ポートのkey>: <データ> }`（program の run の戻り値と同じ1キーのオブジェクト）。
+   * 人がボタンを押した直後の呼び出しだけを受け付ける（開いただけで決定する画面は書けない）。
+   * 送れたら承認画面は run の画面へ戻る。断られたら（担当でない・もう決まっている など）理由つきで失敗する
+   */
+  out: (output: TOutput) => Promise<void>
+  /** input 以外の材料（program の run の ctx と同じ位置づけ） */
+  ctx: {
+    input: {
+      /** input の型（in ポートの JSON Schema） */
+      schema: JsonSchema
+      /** input に含まれるファイルを表示する URL を取る（sandbox の中からは mawaru のファイルを直接読めない） */
+      fetchFileUrl: (file: FileRef) => Promise<string>
+    }
+    output: {
+      /** 出口ごとの型（out ポートの key → JSON Schema。approve・reject・追加の出口） */
+      schema: Record<string, JsonSchema>
+      /** 出す値に入れるファイル（差し戻しの参考ファイルなど）を上げて、参照を受け取る */
+      uploadFile: (file: File) => Promise<FileRef>
+    }
+    clipboard: {
+      /** クリップボードに書く（sandbox の中では使えない navigator.clipboard.writeText の代わり） */
+      writeText: (text: string) => Promise<void>
+    }
+    /**
+     * ループ変数（この step が始まった時点の値。program の ctx.refs と同じ）。
+     * 予約キー `input` が run の起動入力
+     */
+    refs: TRefs
+    step: {
+      /** 見ている人がこの step の担当か（担当でなければ out は断られる） */
+      isAssignee: boolean
+      /**
+       * 値を直してよいか：担当で、全員承認のノードでないとき true
+       * （全員承認は全員が同じ値を承認するので、届いた値のまま決める）
+       */
+      editable: boolean
+    }
+  }
 }
 
-/** mawaru から承認ビューへ渡す材料 */
-export type ApprovalViewContext<TIn = unknown> = {
-  /** 届いた値（step の input そのもの）。ビューで直した値はビューの state に持つ */
-  output: TIn
-  /** `output` の型＝ human の in ポートの型（ビューの宣言が写っている）。`SchemaForm` に渡すとフォームになる */
-  outputSchema: JsonSchema | null
-  /** ループ変数（この step が始まった時点の写し）。予約キー `input` が run の起動入力 */
-  refs: unknown
-  /** この human ノードの名前 */
-  nodeName: string
-  /** 局面 */
-  phase: ApprovalPhase
-  /** 値を直してよい（承認待ちで、見ている人が担当。全員の承認が要るノードでは false） */
-  editable: boolean
-  /** 承認バーの材料 */
-  decision: ApprovalDecisionContext
-}
+/** mawaru が承認画面に描く、human ノードの画面（React のコンポーネント） */
+export type HumanView<
+  TInput = unknown,
+  TOutput = Record<string, unknown>,
+  TRefs = Record<string, unknown>,
+> = (props: HumanProps<TInput, TOutput, TRefs>) => ReactNode
 
 /**
- * 承認ビュー：ctx を受けて承認画面（上の帯より下の全部）を描く React コンポーネント。
- * 承認バーは `<ApprovalBar ctx={ctx} />` を置く（置かなければ承認バーは出ない）。
+ * human ノードの実装を定義する：input と out を受けて描く関数を渡すと、画面を返す。
+ * React では props を受けて描く関数がそのままコンポーネントなので、型を付けて返すだけ
  */
-// 引数を双変にする（メソッドの形で宣言する）：どの TIn のビューも ApprovalView<unknown> として持てるようにするため
-export type ApprovalView<TIn = unknown> = {
-  bivariance(props: { ctx: ApprovalViewContext<TIn> }): ReactNode
-}["bivariance"]
-
-/** 承認ビューを定義する。型を付けるためだけの関数（値はそのまま返す） */
-export const defineApprovalView = <TIn = unknown>(
-  view: ApprovalView<TIn>,
-): ApprovalView<TIn> => view
-
-/** 手元プレビュー（npx mawaru preview human/<dir>）のケース。nodes/human/<dir>/cases.ts の export default */
-export type ApprovalViewCase = {
-  name: string
-  /** `ctx.output`（＝ step の input） */
-  input: unknown
-  refs?: unknown
-  /** 省略時は name */
-  nodeName?: string
-  /** 省略時は承認待ち */
-  phase?: ApprovalPhase
-}
+export const defineHuman = <
+  TInput = unknown,
+  TOutput = Record<string, unknown>,
+  TRefs = Record<string, unknown>,
+>(
+  render: (props: HumanProps<TInput, TOutput, TRefs>) => ReactNode,
+): HumanView<TInput, TOutput, TRefs> => render
 
-export { ApprovalBar } from "./_approval/ApprovalBar.js"
-export { type ApprovalActions, useApprovalActions } from "./_approvalActions.js"
-// 部品キット（土台）もここから import できる
-export * from "./index.js"
+export type { FileRef }

package/views/protocol.ts

@@ -1,29 +1,52 @@
-// sandbox iframe の中の実行部分（runtime.tsx）とホスト（mawaru の画面）とのメッセージの形。
+import type { JsonSchema } from "../_schemas/node.js"
+
+// sandbox iframe の中の実行部分（runtime.tsx）とホスト（mawaru の承認画面）とのメッセージの形。
 // **公開 API ではない**：iframe の中の実行部分とホストは同じデプロイの mawaru のコード（まとめるときに
-// その時点の版を同梱する）なので、いつ変えてもよい（docs/tasks/wip/承認ビューの顧客repo配置.md の「互換の管理」）。
+// その時点の版を同梱する）なので、いつ変えてもよい。
 // iframe に入る JS を小さく保つため、ここには型と定数だけを置く（ホストの検査は host.ts）
 
 export const VIEW_MESSAGE_TAG = "mawaru:view"
 
 export type ThemeMode = "light" | "dark"
 
+// human ノードの実装に渡す材料のうち、JSON で送れるもの（関数はホストへの頼みごととして iframe の中で組み立てる）
+export type HumanViewData = {
+  input: unknown
+  inputSchema: JsonSchema
+  outputSchema: Record<string, JsonSchema>
+  refs: unknown
+  isAssignee: boolean
+  editable: boolean
+}
+
+// ビューからホストへの頼みごと（HumanProps の関数と、部品が裏で使う口）
+export type HumanRequestMethod =
+  | "out"
+  | "fetchFileUrl"
+  | "uploadFile"
+  | "writeText"
+
 // ビュー → ホスト
 export type ViewToHost =
   | { tag: typeof VIEW_MESSAGE_TAG; type: "ready" }
-  // 描画の例外（ホストは標準ビューに差し替える）
+  // 描画の例外（ホストはエラーと理由を出す）
   | { tag: typeof VIEW_MESSAGE_TAG; type: "error"; message: string }
-  // ホストに頼む（fileUrl / uploadFile / copyText、承認ビューは decide / openRejectDialog / openExitDialog / close も）
   | {
       tag: typeof VIEW_MESSAGE_TAG
       type: "request"
       id: number
-      method: string
+      method: HumanRequestMethod
       args: unknown
     }
 
 // ホスト → ビュー
 export type HostToView =
-  | { tag: typeof VIEW_MESSAGE_TAG; type: "ctx"; ctx: unknown; mode: ThemeMode }
+  | {
+      tag: typeof VIEW_MESSAGE_TAG
+      type: "data"
+      data: HumanViewData
+      mode: ThemeMode
+    }
   | {
       tag: typeof VIEW_MESSAGE_TAG
       type: "response"

package/views/runtime.tsx

@@ -1,24 +1,19 @@
 import { Component, type ReactNode } from "react"
 import { createRoot } from "react-dom/client"
-import {
-  type ApprovalActions,
-  ApprovalActionsProvider,
-} from "./_approvalActions.js"
 import { ViewBridgeProvider } from "./_bridge.js"
+import { type HumanOps, humanPropsOf } from "./_humanProps.js"
 import type { FileRef } from "./_parts/fileRef.js"
-import type { ApprovalView, ApprovalViewContext } from "./human.js"
+import type { HumanView } from "./human.js"
 import {
   type HostToView,
-  type ThemeMode,
+  type HumanRequestMethod,
+  type HumanViewData,
   VIEW_MESSAGE_TAG,
   type ViewToHost,
 } from "./protocol.js"
 
-// sandbox iframe の中の実行部分（docs/tasks/wip/承認ビューの顧客repo配置.md の「隔離」）。
-// mawaru が顧客 repo のビューをまとめるとき、入口からここの runXxxView を呼ぶ。
-// ホストとのメッセージの形は protocol.ts（公開 API ではない）
-
-// ---- iframe の中 ----
+// sandbox iframe の中の実行部分。mawaru が顧客 repo の human ノードの実装をまとめるとき、
+// 入口から runHumanView を呼ぶ。ホストとのメッセージの形は protocol.ts（公開 API ではない）
 
 // union のまま tag だけを外す（Omit は union を潰す）
 type WithoutTag<T> = T extends unknown ? Omit<T, "tag"> : never
@@ -35,7 +30,7 @@ const pending = new Map<
   number,
   { resolve: (value: unknown) => void; reject: (err: Error) => void }
 >()
-const ctxListeners = new Set<(ctx: unknown, mode: ThemeMode) => void>()
+const dataListeners = new Set<(data: HumanViewData) => void>()
 
 const onHostMessage = (event: MessageEvent) => {
   if (event.source !== window.parent) return
@@ -49,14 +44,17 @@ const onHostMessage = (event: MessageEvent) => {
     else waiting.reject(new Error(message.error))
     return
   }
-  if (message.type === "ctx") {
+  if (message.type === "data") {
     document.documentElement.dataset.mode = message.mode
-    for (const listener of ctxListeners) listener(message.ctx, message.mode)
+    for (const listener of dataListeners) listener(message.data)
   }
 }
 
 // ホストに頼む（返事が来るまで待つ）
-export const requestHost = <T,>(method: string, args: unknown): Promise<T> =>
+const requestHost = <T,>(
+  method: HumanRequestMethod,
+  args: unknown,
+): Promise<T> =>
   new Promise<T>((resolve, reject) => {
     const id = nextRequestId++
     pending.set(id, {
@@ -66,13 +64,22 @@ export const requestHost = <T,>(method: string, args: unknown): Promise<T> =>
     post({ type: "request", id, method, args })
   })
 
-const bridge = {
-  fileUrl: (file: FileRef) => requestHost<string>("fileUrl", { file }),
+const ops: HumanOps = {
+  out: (output) => requestHost<void>("out", { output }),
+  fetchFileUrl: (file: FileRef) =>
+    requestHost<string>("fetchFileUrl", { file }),
   uploadFile: (file: File) => requestHost<FileRef>("uploadFile", { file }),
-  copyText: (text: string) => requestHost<void>("copyText", { text }),
+  writeText: (text: string) => requestHost<void>("writeText", { text }),
+}
+
+// 部品（FilePreview・SchemaForm のファイル欄）が裏で使う口も、同じ頼みごとにつなぐ
+const bridge = {
+  fileUrl: ops.fetchFileUrl,
+  uploadFile: ops.uploadFile,
+  copyText: ops.writeText,
 }
 
-// 描画の例外をホストへ知らせる（ホストは標準ビューに差し替える）
+// 描画の例外をホストへ知らせる（ホストはエラーと理由を出す）
 class ReportErrors extends Component<
   { children: ReactNode },
   { failed: boolean }
@@ -89,9 +96,9 @@ class ReportErrors extends Component<
   }
 }
 
-// iframe の中の共通の準備：ホストからのメッセージ・例外の報告。
-// 最初の ctx が届いたら render を呼ぶ（以降の ctx も同じ render に渡す）
-const startView = (render: (ctx: unknown) => ReactNode) => {
+// 実装はコンポーネント1つ。状態（直した値など）は実装が useState で持ち、材料が届き直しても
+// 同じコンポーネントとして描き直すので保たれる
+export const runHumanView = (View: HumanView) => {
   window.addEventListener("message", onHostMessage)
   window.addEventListener("error", (event) =>
     post({ type: "error", message: event.message }),
@@ -102,31 +109,15 @@ const startView = (render: (ctx: unknown) => ReactNode) => {
   const container = document.getElementById("root")
   if (!container) throw new Error("#root がありません")
   const root = createRoot(container)
-  ctxListeners.add((ctx) =>
+  dataListeners.add((data) => {
+    const props = humanPropsOf(data, ops)
     root.render(
       <ViewBridgeProvider bridge={bridge}>
-        <ReportErrors>{render(ctx)}</ReportErrors>
+        <ReportErrors>
+          <View {...props} />
+        </ReportErrors>
       </ViewBridgeProvider>,
-    ),
-  )
+    )
+  })
   post({ type: "ready" })
 }
-
-// ---- 承認ビュー ----
-
-const actions: ApprovalActions = {
-  decide: (port, value) => requestHost<void>("decide", { port, value }),
-  openRejectDialog: () => requestHost<void>("openRejectDialog", {}),
-  openExitDialog: (key, value) =>
-    requestHost<void>("openExitDialog", { key, value }),
-  close: () => requestHost<void>("close", {}),
-}
-
-// ビューはコンポーネント1つ。状態（直した値・選択など）はビューが useState で持ち、ctx が変わっても
-// （局面・担当の更新）同じコンポーネントとして描き直すので保たれる
-export const runApprovalView = (View: ApprovalView) =>
-  startView((ctx) => (
-    <ApprovalActionsProvider value={actions}>
-      <View ctx={ctx as ApprovalViewContext} />
-    </ApprovalActionsProvider>
-  ))

package/views/sample.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react"
+import { defineHuman } from "./human.js"
+
+// サンプル：AI が下書きした返信を、人が直してから送る（approve）か、理由を書いて差し戻す（reject）。
+// 顧客 repo では Input / Outputs / Output は typegen が config.json から作る（nodes/human/<dir>/types.d.ts）。
+// ここでは同じものを手で書いている
+
+type Input = { subject: string; body: string }
+
+type Outputs = {
+  approve: { subject: string; body: string }
+  reject: { prompt: string }
+}
+
+type Output =
+  | { approve: Outputs["approve"]; reject?: never }
+  | { reject: Outputs["reject"]; approve?: never }
+
+export default defineHuman<Input, Output>(({ input, out }) => {
+  const [reply, setReply] = useState(input)
+  const [prompt, setPrompt] = useState("")
+  return (
+    <div
+      style={{
+        maxWidth: "720px",
+        margin: "0 auto",
+        padding: "var(--space-8) var(--space-6)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--space-3)",
+      }}
+    >
+      <input
+        value={reply.subject}
+        onChange={(e) => setReply({ ...reply, subject: e.target.value })}
+        style={{
+          padding: "var(--space-2) var(--space-3)",
+          border: "var(--border-w) solid var(--border)",
+          borderRadius: "var(--radius-s)",
+          background: "var(--surface)",
+          color: "var(--ink)",
+          font: "inherit",
+        }}
+      />
+      <textarea
+        value={reply.body}
+        onChange={(e) => setReply({ ...reply, body: e.target.value })}
+        style={{
+          minHeight: "16em",
+          padding: "var(--space-2) var(--space-3)",
+          border: "var(--border-w) solid var(--border)",
+          borderRadius: "var(--radius-s)",
+          background: "var(--surface)",
+          color: "var(--ink)",
+          font: "inherit",
+        }}
+      />
+      <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <button
+          type="button"
+          className="primary"
+          disabled={reply.body.trim() === ""}
+          onClick={() => out({ approve: reply })}
+        >
+          この内容で送信
+        </button>
+      </div>
+      <div style={{ display: "flex", gap: "var(--space-2)" }}>
+        <input
+          value={prompt}
+          placeholder="差し戻しの理由"
+          onChange={(e) => setPrompt(e.target.value)}
+          style={{
+            flex: 1,
+            padding: "var(--space-2) var(--space-3)",
+            border: "var(--border-w) solid var(--border)",
+            borderRadius: "var(--radius-s)",
+            background: "var(--surface)",
+            color: "var(--ink)",
+            font: "inherit",
+          }}
+        />
+        <button
+          type="button"
+          className="ghost"
+          disabled={prompt.trim() === ""}
+          onClick={() => out({ reject: { prompt } })}
+        >
+          差し戻す
+        </button>
+      </div>
+    </div>
+  )
+})

package/dist/_cli/openBrowser.d.ts

@@ -1 +0,0 @@
-export declare const openBrowser: (url: string) => void;

package/dist/_cli/openBrowser.js

@@ -1,15 +0,0 @@
-import { spawn } from "node:child_process";
-// ブラウザを開く（開けなければ URL を出して手で開いてもらう。依存は足さない）
-export const openBrowser = (url) => {
-    const [command, args] = process.platform === "darwin"
-        ? ["open", [url]]
-        : process.platform === "win32"
-            ? ["cmd", ["/c", "start", "", url]]
-            : ["xdg-open", [url]];
-    try {
-        spawn(command, args, { stdio: "ignore", detached: true }).unref();
-    }
-    catch {
-        // 何もしない（URL は既に印字済み）
-    }
-};

package/dist/views/_approval/ApprovalBar.d.ts

@@ -1,20 +0,0 @@
-import { type ReactNode } from "react";
-import type { ApprovalViewContext } from "../human.js";
-/**
- * 承認バー。書類の領域の下に貼り付く（`position: sticky; bottom: 0`）。外側を `minHeight: 100%` の縦の flex にして
- * 中身を `flex: 1` にすると、中身が短くても下端に来る。
- */
-export declare const ApprovalBar: <TOut = unknown>({ ctx, label, disabled, 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;
-}) => import("react").JSX.Element;

package/dist/views/_approval/ApprovalBar.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { useApprovalActions } from "../_approvalActions.js";
-// 承認バー（承認画面の下の帯）。ビューが自分で置く部品で、内蔵の標準ビューも同じものを使う
-// （docs/tasks/wip/承認ビューの顧客repo配置.md の「承認バーもビューが描く」）。
-// 材料は ctx.decision、操作は useApprovalActions()。送信中とエラーは decide の結果からここで持つ
-const errorMessage = (err) => err instanceof Error ? err.message : "送信に失敗しました";
-/**
- * 承認バー。書類の領域の下に貼り付く（`position: sticky; bottom: 0`）。外側を `minHeight: 100%` の縦の flex にして
- * 中身を `flex: 1` にすると、中身が短くても下端に来る。
- */
-export const ApprovalBar = ({ ctx, label, disabled = false, output, value, children, }) => {
-    const actions = useApprovalActions();
-    const [sending, setSending] = useState(false);
-    const [error, setError] = useState(null);
-    const { phase, decision } = ctx;
-    const current = value === undefined ? ctx.output : value;
-    const approveValue = output === undefined ? current : output;
-    const send = (request) => {
-        setSending(true);
-        setError(null);
-        request
-            .catch((err) => setError(errorMessage(err)))
-            .finally(() => setSending(false));
-    };
-    const open = (request) => request.catch((err) => setError(errorMessage(err)));
-    return (_jsx("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)",
-        }, children: phase === "waiting" ? (_jsxs(_Fragment, { children: [decision.otherAssignees && (_jsxs("span", { style: { fontSize: "var(--text-sm)", color: "var(--muted)" }, children: [_jsx("span", { style: { color: "var(--ink)" }, children: decision.otherAssignees.join("・") }), " さんの担当です — あなたは承認・差し戻しができません"] })), children, _jsx("div", { style: { flex: 1 } }), decision.progress && (_jsxs("span", { style: {
-                        fontFamily: "var(--font-mono)",
-                        fontSize: "var(--text-xs)",
-                        color: "var(--muted)",
-                        whiteSpace: "nowrap",
-                    }, children: [decision.progress.done, "/", decision.progress.total, "\u4EBA \u627F\u8A8D\u6E08\u307F"] })), error && (_jsx("span", { role: "alert", style: { color: "var(--fail)" }, children: error })), decision.exits.map((exit) => (_jsx("button", { 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" }, children: exit.name }, exit.key))), decision.rejectTargetName && (_jsx("button", { type: "button", className: "ghost", disabled: !decision.canDecide || sending, onClick: () => open(actions.openRejectDialog()), style: { fontSize: "var(--text-sm)", whiteSpace: "nowrap" }, children: "AI\u3078\u5DEE\u3057\u623B\u3059\uFF08reject\uFF09" })), _jsxs("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",
-                    }, children: [sending
-                            ? "承認しています…"
-                            : decision.progress?.approvedByMe
-                                ? "承認済み — 全員の承認待ち"
-                                : (label ?? `承認して${decision.approveTargetName ?? "次"}へ`), _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "M4.5 3L12.5 8L4.5 13V3Z", style: { fill: "var(--on-accent)" } }) })] })] })) : phase === "rejected" ? (_jsxs(_Fragment, { children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", style: { flex: "none" }, "aria-hidden": "true", children: [_jsx("rect", { x: "3.5", y: "7", width: "9", height: "6", rx: "1.5", style: { fill: "none", stroke: "var(--muted)", strokeWidth: 1.5 } }), _jsx("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 } })] }), _jsx("span", { style: { fontSize: "var(--text-xs)", color: "var(--muted)" }, children: "\u518D\u5B9F\u884C\u304C\u5B8C\u4E86\u3057\u3066\u65B0\u3057\u3044\u4E0B\u66F8\u304D\u304C\u5C4A\u304F\u3068\u3001\u627F\u8A8D\u5F85\u3061\u306B\u623B\u308A\u901A\u77E5\u3055\u308C\u307E\u3059" }), _jsx("div", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "ghost", disabled: true, style: {
-                        fontSize: "var(--text-sm)",
-                        opacity: 0.5,
-                        whiteSpace: "nowrap",
-                    }, children: "\u5DEE\u3057\u623B\u3059\uFF08reject\uFF09" }), _jsx("button", { type: "button", className: "primary", disabled: true, style: { opacity: 0.5, whiteSpace: "nowrap" }, children: "\u627F\u8A8D\u3057\u3066\u6B21\u3078" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { style: {
-                        color: phase === "failed"
-                            ? "var(--fail)"
-                            : phase === "cancelled"
-                                ? "var(--muted)"
-                                : "var(--ok)",
-                        fontSize: "var(--text-sm)",
-                    }, children: phase === "failed" ? "✕" : phase === "cancelled" ? "◼" : "✓" }), _jsx("span", { style: { fontSize: "var(--text-sm)", color: "var(--muted)" }, children: phase === "failed"
-                        ? (decision.failedReason ?? "この step は失敗しました")
-                        : phase === "cancelled"
-                            ? "キャンセル済み — この run は中断されました"
-                            : "対応済み — 承認して次のノードへ渡しました" }), _jsx("div", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "ghost", onClick: () => open(actions.close()), style: { fontSize: "var(--text-sm)", whiteSpace: "nowrap" }, children: "run \u306E\u9032\u884C\u3092\u898B\u308B \u2192" })] })) }));
-};

package/dist/views/_approvalActions.d.ts

@@ -1,18 +0,0 @@
-/**
- * ビューから承認画面の操作を頼む口。決定の送信はホストが行う。
- * ホストは、この 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>;
-};
-export declare const ApprovalActionsProvider: import("react").Provider<ApprovalActions | null>;
-/** 承認画面の操作を頼む口（承認画面の中でだけ使える） */
-export declare const useApprovalActions: () => ApprovalActions;

package/dist/views/_approvalActions.js

@@ -1,10 +0,0 @@
-import { createContext, useContext } from "react";
-const ApprovalActionsContext = createContext(null);
-export const ApprovalActionsProvider = ApprovalActionsContext.Provider;
-/** 承認画面の操作を頼む口（承認画面の中でだけ使える） */
-export const useApprovalActions = () => {
-    const actions = useContext(ApprovalActionsContext);
-    if (!actions)
-        throw new Error("承認画面の中で使ってください");
-    return actions;
-};

package/dist/views/index.js

@@ -1,12 +0,0 @@
-// ビューの部品キット（`@mawaru/sdk/views`）。種類（承認・…）に依らない土台：部品・ホストに頼む口。
-// mawaru が顧客 repo のビューをまとめるとき、mawaru の今の版のこのキットを同梱する。
-// **公開 API**：部品の props とホストに頼む口は後方互換でしか変えない
-// （docs/tasks/wip/承認ビューの顧客repo配置.md の「互換の管理」）
-export { useViewBridge } from "./_bridge.js";
-export { documentCardStyle } from "./_parts/DocumentCard.js";
-export { FilePreview } from "./_parts/FilePreview.js";
-export { isFileRef } from "./_parts/fileRef.js";
-export { isUrl, Linkify, linkify } from "./_parts/Linkify.js";
-export { isLongText, Markdown, useAutoGrow } from "./_parts/Markdown.js";
-export { asFormSchema, SchemaForm, } from "./_parts/SchemaForm.js";
-export { NARROW_WIDTH, useNarrow } from "./_parts/useNarrow.js";