@mawaru/sdk 0.39.0 → 0.41.0

package/dist/views/_parts/SchemaForm.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { useViewBridge } from "../_bridge.js";
+import { isFileRef } from "./fileRef.js";
+import { isLongText, Markdown, useAutoGrow } from "./Markdown.js";
+const isFileSchema = (schema) => schema?.["x-mawaru-type"] === "file";
+/** フォーム描画できる schema（properties を持つ object）なら型を付けて返す */
+export const asFormSchema = (schema) => {
+    if (schema == null || typeof schema !== "object")
+        return null;
+    const s = schema;
+    if (s.type !== "object")
+        return null;
+    if (!s.properties || Object.keys(s.properties).length === 0)
+        return null;
+    return s;
+};
+const nameStyle = {
+    fontFamily: "var(--font-mono)",
+    fontSize: "var(--text-sm)",
+    fontWeight: "var(--weight-medium)",
+    color: "var(--ink)",
+    whiteSpace: "nowrap",
+};
+// 見出し行の右に置く小さな操作（「編集」「表示に戻す」）
+const headActionStyle = {
+    minHeight: "22px",
+    padding: "0 var(--space-2)",
+    fontSize: "var(--text-xs)",
+    fontWeight: "var(--weight-normal)",
+    flex: "none",
+};
+const FieldHead = ({ name, schema, required, marker, action, }) => (_jsxs("span", { style: {
+        display: "flex",
+        // boolean ではチェックボックスと横並びの flex アイテムになる。残り幅に広げて説明を出す
+        flex: 1,
+        minWidth: 0,
+        alignItems: "baseline",
+        gap: "var(--space-2)",
+        fontSize: "var(--text-xs)",
+        color: "var(--muted)",
+    }, children: [marker, _jsx("span", { style: nameStyle, children: name }), required && (_jsx("span", { style: { color: "var(--accent)", flex: "none" }, children: "*" })), _jsx("span", { style: {
+                flex: 1,
+                width: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+            }, children: schema.description }), action] }));
+// array・未知の型のフォールバック：フィールド単位の JSON 入力。
+// 入力途中の不正 JSON は text に留め、valid になった時点で親へ反映する。
+const JsonField = ({ value, onChange, }) => {
+    const [text, setText] = useState(() => JSON.stringify(value ?? null, null, 2));
+    const [invalid, setInvalid] = useState(false);
+    const ref = useAutoGrow(text);
+    return (_jsxs("div", { style: { display: "grid", gap: "2px" }, children: [_jsx("textarea", { ref: ref, rows: 3, value: text, onChange: (e) => {
+                    setText(e.target.value);
+                    try {
+                        onChange(JSON.parse(e.target.value));
+                        setInvalid(false);
+                    }
+                    catch {
+                        setInvalid(true);
+                    }
+                }, style: {
+                    fontFamily: "var(--font-mono)",
+                    fontSize: "var(--text-xs)",
+                    lineHeight: 1.6,
+                    maxHeight: "60vh",
+                    resize: "vertical",
+                } }), invalid && (_jsx("p", { role: "alert", style: { fontSize: "var(--text-xs)" }, children: "JSON \u3068\u3057\u3066\u4E0D\u6B63\u3067\u3059" }))] }));
+};
+// ---- file 型（x-mawaru-type: "file"）の添付フィールド ----
+// 選択と同時に backend（POST /tenants/:id/files）へアップロードし、フォーム値には
+// path 参照（fileRef）を入れる。実体は private バケットに置かれ、実行時に署名 URL が発行される
+const fileRefOf = (value) => isFileRef(value) ? value : null;
+const formatSize = (size) => {
+    if (size == null)
+        return null;
+    if (size >= 1024 * 1024)
+        return `${(size / 1024 / 1024).toFixed(1)}MB`;
+    return `${Math.max(1, Math.round(size / 1024))}KB`;
+};
+const useFileUpload = () => {
+    const bridge = useViewBridge();
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    const upload = async (list) => {
+        setUploading(true);
+        setError(null);
+        try {
+            const refs = [];
+            for (const file of Array.from(list)) {
+                refs.push(await bridge.uploadFile(file));
+            }
+            return refs;
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            return [];
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    return { upload, uploading, error };
+};
+const FileChip = ({ file, onRemove, }) => (_jsxs("span", { style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "var(--space-1)",
+        maxWidth: "100%",
+        border: "var(--border-w) solid var(--border)",
+        borderRadius: "var(--radius-s)",
+        background: "var(--surface-2)",
+        padding: "2px var(--space-2)",
+        fontSize: "var(--text-xs)",
+    }, children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDCCE" }), _jsx("span", { style: {
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+            }, children: file.name }), formatSize(file.size) && (_jsx("span", { style: { color: "var(--muted)", flex: "none" }, children: formatSize(file.size) })), _jsx("button", { type: "button", className: "ghost", onClick: onRemove, "aria-label": `${file.name} を外す`, style: {
+                minHeight: "18px",
+                padding: "0 4px",
+                fontSize: "var(--text-xs)",
+            }, children: "\u2715" })] }));
+// 破線のドロップゾーン兼選択ボタン。クリックで隠し input[type=file] を開き、
+// ドラッグ＆ドロップも受け付ける（アップロード中は無効化）
+const FilePicker = ({ label, multiple, uploading, onPick, }) => {
+    const inputRef = useRef(null);
+    // dragenter/leave は子要素をまたぐたびに発火するため深さを数えて判定する
+    const depthRef = useRef(0);
+    const [dragOver, setDragOver] = useState(false);
+    const hasFiles = (e) => Array.from(e.dataTransfer.types).includes("Files");
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, type: "file", multiple: multiple, style: { display: "none" }, onChange: (e) => {
+                    if (e.target.files && e.target.files.length > 0) {
+                        onPick(e.target.files);
+                    }
+                    e.target.value = "";
+                } }), _jsxs("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: uploading, onDragEnter: (e) => {
+                    if (uploading || !hasFiles(e))
+                        return;
+                    e.preventDefault();
+                    depthRef.current += 1;
+                    setDragOver(true);
+                }, onDragOver: (e) => {
+                    if (uploading || !hasFiles(e))
+                        return;
+                    e.preventDefault();
+                }, onDragLeave: () => {
+                    if (depthRef.current > 0)
+                        depthRef.current -= 1;
+                    if (depthRef.current === 0)
+                        setDragOver(false);
+                }, onDrop: (e) => {
+                    e.preventDefault();
+                    depthRef.current = 0;
+                    setDragOver(false);
+                    if (uploading)
+                        return;
+                    if (e.dataTransfer.files.length > 0)
+                        onPick(e.dataTransfer.files);
+                }, style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "var(--space-1)",
+                    width: "100%",
+                    minHeight: "40px",
+                    padding: "var(--space-2)",
+                    border: `var(--border-w) dashed ${dragOver ? "var(--accent)" : "var(--border)"}`,
+                    borderRadius: "var(--radius-s)",
+                    background: dragOver ? "var(--surface-2)" : "transparent",
+                    color: dragOver ? "var(--accent)" : "var(--muted)",
+                    fontSize: "var(--text-xs)",
+                }, children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDCCE" }), uploading ? "アップロード中…" : `${label}、またはドラッグ＆ドロップ`] })] }));
+};
+// file 単体：未選択（null）⇄ 選択済みチップ
+const FileField = ({ value, onChange, }) => {
+    const { upload, uploading, error } = useFileUpload();
+    const file = fileRefOf(value);
+    const pick = async (list) => {
+        const refs = await upload(list);
+        if (refs[0])
+            onChange(refs[0]);
+    };
+    return (_jsxs("div", { style: { display: "grid", gap: "var(--space-1)" }, children: [file ? (_jsx(FileChip, { file: file, onRemove: () => onChange(null) })) : (_jsx(FilePicker, { label: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E", uploading: uploading, onPick: pick })), error && (_jsx("p", { role: "alert", style: { margin: 0, fontSize: "var(--text-xs)" }, children: error }))] }));
+};
+// file 配列：チップのリスト＋追加（複数選択可）
+const FileArrayField = ({ value, onChange, }) => {
+    const { upload, uploading, error } = useFileUpload();
+    const files = Array.isArray(value)
+        ? value.map(fileRefOf).filter((f) => f !== null)
+        : [];
+    const pick = async (list) => {
+        const refs = await upload(list);
+        if (refs.length > 0)
+            onChange([...files, ...refs]);
+    };
+    return (_jsxs("div", { style: { display: "grid", gap: "var(--space-1)" }, children: [files.map((file, i) => (_jsx(FileChip, { file: file, onRemove: () => onChange(files.filter((_, j) => j !== i)) }, file.path))), _jsx(FilePicker, { label: "\u30D5\u30A1\u30A4\u30EB\u3092\u8FFD\u52A0", multiple: true, uploading: uploading, onPick: pick }), error && (_jsx("p", { role: "alert", style: { margin: 0, fontSize: "var(--text-xs)" }, children: error }))] }));
+};
+// 長文の raw 編集欄：内容の高さまで伸び、上限（60vh）を超えたらその中でスクロールする
+const LongTextArea = ({ value, onChange, autoFocus, }) => {
+    const ref = useAutoGrow(value);
+    return (_jsx("textarea", { ref: ref, 
+        // biome-ignore lint/a11y/noAutofocus: 「編集」を押して現れる欄なので即入力できる方が自然
+        autoFocus: autoFocus, rows: 3, value: value, onChange: (e) => onChange(e.target.value), style: {
+            fontSize: "var(--text-base)",
+            lineHeight: 1.9,
+            maxHeight: "60vh",
+            resize: "vertical",
+        } }));
+};
+// string フィールド：長文・改行入りの値は textarea に昇格する（AI の下書き等）。
+// 入力中に input ⇄ textarea が flip してフォーカスが飛ばないよう、昇格したら戻さない
+const StringInput = ({ value, onChange, }) => {
+    const long = isLongText(value);
+    const [multiline, setMultiline] = useState(long);
+    useEffect(() => {
+        if (long)
+            setMultiline(true);
+    }, [long]);
+    return multiline ? (_jsx(LongTextArea, { value: value, onChange: onChange })) : (_jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value) }));
+};
+// 値の入った長文 string＝読み物。既定は Markdown の整形表示で、「編集」を押した時だけ
+// raw に入れ替わる。長文が複数あるときの2つ目以降は畳んだ状態で始まる（見出しだけ出す）
+const LongTextField = ({ name, schema, required, value, editable, defaultCollapsed, onChange, }) => {
+    // 開閉は <details>：読み取り専用の局面で書類全体を <fieldset disabled> で包んでも
+    // （フォーム部品ではないので）畳んだ本文を開いて読める
+    const [open, setOpen] = useState(!defaultCollapsed);
+    const [editing, setEditing] = useState(false);
+    const lines = value.split("\n").length;
+    return (_jsxs("details", { open: open, onToggle: (e) => setOpen(e.currentTarget.open), children: [_jsx("summary", { style: { cursor: "pointer", listStyle: "none" }, children: _jsx(FieldHead, { name: name, schema: schema, required: required, marker: _jsx("span", { "aria-hidden": "true", style: { flex: "none" }, children: open ? "▾" : "▸" }), action: open ? (editable ? (_jsx("button", { type: "button", className: "ghost", 
+                        // summary の中なので、押しても開閉させない
+                        onClick: (e) => {
+                            e.preventDefault();
+                            setEditing((current) => !current);
+                        }, style: headActionStyle, children: editing ? "表示に戻す" : "編集" })) : null) : (_jsxs("span", { style: {
+                            flex: "none",
+                            fontVariantNumeric: "var(--numeric)",
+                        }, children: [lines, "\u884C"] })) }) }), _jsx("div", { style: {
+                    display: "grid",
+                    marginTop: "var(--space-3)",
+                    borderTop: "var(--border-w) solid var(--border)",
+                    paddingTop: "var(--space-3)",
+                }, children: editing ? (_jsx(LongTextArea, { value: value, onChange: onChange, autoFocus: true })) : (_jsx(Markdown, { text: value })) })] }));
+};
+const Field = ({ name, schema, required, value, readOnly, asDocument, defaultCollapsed, onChange, }) => {
+    const head = _jsx(FieldHead, { name: name, schema: schema, required: required });
+    // file 型は enum / type 判定より先に見る（実体は object / array なので）
+    if (isFileSchema(schema)) {
+        return (_jsxs("div", { style: { display: "grid", gap: "var(--space-1)" }, children: [head, _jsx(FileField, { value: value, onChange: onChange })] }));
+    }
+    if (schema.type === "array" && isFileSchema(schema.items)) {
+        return (_jsxs("div", { style: { display: "grid", gap: "var(--space-1)" }, children: [head, _jsx(FileArrayField, { value: value, onChange: onChange })] }));
+    }
+    const options = schema.enum;
+    if (options && options.length > 0) {
+        const idx = options.findIndex((opt) => JSON.stringify(opt) === JSON.stringify(value));
+        return (_jsxs("label", { children: [head, _jsxs("select", { value: String(idx), onChange: (e) => onChange(options[Number(e.target.value)]), children: [idx < 0 && (_jsx("option", { value: "-1", disabled: true, children: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044" })), options.map((opt, i) => (_jsx("option", { value: String(i), children: typeof opt === "string" ? opt : JSON.stringify(opt) }, JSON.stringify(opt))))] })] }));
+    }
+    switch (schema.type) {
+        case "string": {
+            const text = typeof value === "string" ? value : "";
+            if (asDocument) {
+                return (_jsx(LongTextField, { name: name, schema: schema, required: required, value: text, editable: !readOnly, defaultCollapsed: defaultCollapsed, onChange: onChange }));
+            }
+            return (_jsxs("div", { style: { display: "grid", gap: "var(--space-1)" }, children: [head, _jsx(StringInput, { value: text, onChange: onChange })] }));
+        }
+        case "number":
+        case "integer":
+            return (_jsxs("label", { children: [head, _jsx("input", { type: "number", step: schema.type === "integer" ? 1 : "any", value: typeof value === "number" ? value : "", onChange: (e) => {
+                            const raw = e.target.value;
+                            onChange(raw === "" ? null : Number(raw));
+                        } })] }));
+        case "boolean":
+            return (_jsxs("label", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "var(--space-2)",
+                }, children: [_jsx("input", { type: "checkbox", checked: Boolean(value), onChange: (e) => onChange(e.target.checked), style: { minHeight: 0, width: "14px", height: "14px" } }), head] }));
+        case "object": {
+            if (!schema.properties || Object.keys(schema.properties).length === 0) {
+                break;
+            }
+            const obj = (value != null && typeof value === "object" ? value : {});
+            return (_jsxs("div", { style: { display: "grid", gap: "var(--space-2)" }, children: [head, _jsx("div", { style: {
+                            borderLeft: "var(--border-w) solid var(--border)",
+                            paddingLeft: "var(--space-3)",
+                        }, children: _jsx(SchemaForm, { schema: schema, value: obj, readOnly: readOnly, onChange: onChange }) })] }));
+        }
+    }
+    return (_jsxs("div", { style: { display: "grid", gap: "var(--space-1)" }, children: [head, _jsx(JsonField, { value: value, onChange: onChange })] }));
+};
+export const SchemaForm = ({ schema, value, readOnly = false, onChange, }) => {
+    const fields = Object.entries(schema.properties ?? {});
+    // 中身の入った長文＝読み物（Markdown 表示）。開いた時点の値で決め、以後は変えない：
+    // 入力中に 80 文字を超えた瞬間に入力欄が表示に化けてフォーカスが飛ぶのを避ける
+    // （空欄から書き始める手動実行の入力フォームは従来どおり入力欄のまま）
+    const [documentKeys] = useState(() => fields
+        .filter(([key]) => {
+        const field = value[key];
+        return typeof field === "string" && isLongText(field);
+    })
+        .map(([key]) => key));
+    return (_jsx("div", { style: { display: "grid", gap: "var(--space-5)" }, children: fields.map(([key, child]) => (_jsx(Field, { name: key, schema: child, required: schema.required?.includes(key) ?? false, value: value[key], readOnly: readOnly, asDocument: documentKeys.includes(key), 
+            // 読み物が複数あるとき、先頭（＝主役の成果物）だけ開いて以降は畳む。
+            // key 名には依存せず、スキーマの並び順だけで決める
+            defaultCollapsed: key !== documentKeys[0], onChange: (v) => onChange({ ...value, [key]: v }) }, key))) }));
+};

package/dist/views/_parts/fileRef.d.ts

@@ -0,0 +1,7 @@
+export type FileRef = {
+    path: string;
+    name: string;
+    mime_type?: string;
+    size?: number;
+};
+export declare const isFileRef: (value: unknown) => value is FileRef;

package/dist/views/_parts/fileRef.js

@@ -0,0 +1,11 @@
+export const isFileRef = (value) => {
+    if (typeof value !== "object" || value === null)
+        return false;
+    const v = value;
+    return (typeof v.path === "string" &&
+        v.path !== "" &&
+        typeof v.name === "string" &&
+        v.name !== "" &&
+        (v.mime_type === undefined || typeof v.mime_type === "string") &&
+        (v.size === undefined || typeof v.size === "number"));
+};

package/dist/views/_parts/useNarrow.d.ts

@@ -0,0 +1,5 @@
+export declare const NARROW_WIDTH = 560;
+export declare const useNarrow: <T extends HTMLElement>() => {
+    ref: import("react").RefObject<T | null>;
+    narrow: boolean;
+};

package/dist/views/_parts/useNarrow.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef, useState } from "react";
+// 承認ビューの幅対応。判定は**ビューポートではなくコンテナの幅**で行う。
+//
+// 開発プレビュー（/dev/views/approval）は幅の確認を「狭いコンテナ」で再現するので、
+// media query で判定すると実機とプレビューで挙動がズレる（プレビューでは常に
+// デスクトップ扱いになる）。ResizeObserver でコンテナ自身を測れば両方で同じになる。
+export const NARROW_WIDTH = 560;
+export const useNarrow = () => {
+    const ref = useRef(null);
+    const [narrow, setNarrow] = useState(false);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            if (entry)
+                setNarrow(entry.contentRect.width < NARROW_WIDTH);
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    return { ref, narrow };
+};

package/dist/views/components.d.ts

@@ -0,0 +1,7 @@
+export { documentCardStyle } from "./_parts/DocumentCard.js";
+export { FilePreview } from "./_parts/FilePreview.js";
+export { type FileRef, isFileRef } from "./_parts/fileRef.js";
+export { isUrl, Linkify, linkify } from "./_parts/Linkify.js";
+export { isLongText, Markdown, useAutoGrow } from "./_parts/Markdown.js";
+export { asFormSchema, type JsonSchema as FormSchema, SchemaForm, } from "./_parts/SchemaForm.js";
+export { NARROW_WIDTH, useNarrow } from "./_parts/useNarrow.js";

package/dist/views/components.js

@@ -0,0 +1,12 @@
+// 共通の部品（`@mawaru/sdk/components`）。human ノードの約束（`@mawaru/sdk/human`）には依存しない。
+// mawaru の画面と顧客 repo の human ノードの実装が同じ部品を使う（mawaru が顧客 repo の実装をまとめるとき、
+// mawaru の今の版のこの部品を同梱する）。ファイルの表示・アップロードは、mawaru の画面ではホストの口、
+// sandbox iframe の中では mawaru の承認画面への頼みごととして裏で差し込まれる（_bridge.tsx）。
+// **公開 API**：部品の props は後方互換でしか変えない
+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";

package/dist/views/host.d.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+export { useViewBridge, type ViewBridge, ViewBridgeProvider, } from "./_bridge.js";
+export { type HumanOps, humanPropsOf } from "./_humanProps.js";
+export * from "./protocol.js";
+export declare const viewToHostSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    tag: z.ZodLiteral<"mawaru:view">;
+    type: z.ZodLiteral<"ready">;
+}, z.core.$strip>, z.ZodObject<{
+    tag: z.ZodLiteral<"mawaru:view">;
+    type: z.ZodLiteral<"error">;
+    message: z.ZodString;
+}, z.core.$strip>, z.ZodObject<{
+    tag: z.ZodLiteral<"mawaru:view">;
+    type: z.ZodLiteral<"request">;
+    id: z.ZodNumber;
+    method: z.ZodEnum<{
+        out: "out";
+        fetchFileUrl: "fetchFileUrl";
+        uploadFile: "uploadFile";
+        writeText: "writeText";
+    }>;
+    args: z.ZodUnknown;
+}, z.core.$strip>], "type">;

package/dist/views/host.js

@@ -0,0 +1,20 @@
+import { z } from "zod";
+import { VIEW_MESSAGE_TAG } from "./protocol.js";
+// ホスト（mawaru の画面）だけが使うもの（公開 API ではない）：sandbox iframe からのメッセージを確かめる形
+// （protocol.ts の型と同じ。iframe の中は信用できないコードなので、形を確かめてから使う）、
+// 部品が裏で使う口を差す提供部品、human ノードの実装に渡す props の組み立て（標準の承認画面も同じものを使う）
+export { useViewBridge, ViewBridgeProvider, } from "./_bridge.js";
+export { humanPropsOf } from "./_humanProps.js";
+export * from "./protocol.js";
+const tag = z.literal(VIEW_MESSAGE_TAG);
+export const viewToHostSchema = z.discriminatedUnion("type", [
+    z.object({ tag, type: z.literal("ready") }),
+    z.object({ tag, type: z.literal("error"), message: z.string() }),
+    z.object({
+        tag,
+        type: z.literal("request"),
+        id: z.number().int(),
+        method: z.enum(["out", "fetchFileUrl", "uploadFile", "writeText"]),
+        args: z.unknown(),
+    }),
+]);

package/dist/views/human.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import type { JsonSchema } from "../_schemas/node.js";
+import type { FileRef } from "./_parts/fileRef.js";
+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 が承認画面に描く、human ノードの画面（React のコンポーネント） */
+export type HumanView<TInput = unknown, TOutput = Record<string, unknown>, TRefs = Record<string, unknown>> = (props: HumanProps<TInput, TOutput, TRefs>) => ReactNode;
+/**
+ * human ノードの実装を定義する：input と out を受けて描く関数を渡すと、画面を返す。
+ * React では props を受けて描く関数がそのままコンポーネントなので、型を付けて返すだけ
+ */
+export declare const defineHuman: <TInput = unknown, TOutput = Record<string, unknown>, TRefs = Record<string, unknown>>(render: (props: HumanProps<TInput, TOutput, TRefs>) => ReactNode) => HumanView<TInput, TOutput, TRefs>;
+export type { FileRef };

package/dist/views/human.js

@@ -0,0 +1,5 @@
+/**
+ * human ノードの実装を定義する：input と out を受けて描く関数を渡すと、画面を返す。
+ * React では props を受けて描く関数がそのままコンポーネントなので、型を付けて返すだけ
+ */
+export const defineHuman = (render) => render;

package/dist/views/protocol.d.ts

@@ -0,0 +1,44 @@
+import type { JsonSchema } from "../_schemas/node.js";
+export declare const VIEW_MESSAGE_TAG = "mawaru:view";
+export type ThemeMode = "light" | "dark";
+export type HumanViewData = {
+    input: unknown;
+    inputSchema: JsonSchema;
+    outputSchema: Record<string, JsonSchema>;
+    refs: unknown;
+    isAssignee: boolean;
+    editable: boolean;
+};
+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;
+} | {
+    tag: typeof VIEW_MESSAGE_TAG;
+    type: "request";
+    id: number;
+    method: HumanRequestMethod;
+    args: unknown;
+};
+export type HostToView = {
+    tag: typeof VIEW_MESSAGE_TAG;
+    type: "data";
+    data: HumanViewData;
+    mode: ThemeMode;
+} | {
+    tag: typeof VIEW_MESSAGE_TAG;
+    type: "response";
+    id: number;
+    ok: true;
+    value: unknown;
+} | {
+    tag: typeof VIEW_MESSAGE_TAG;
+    type: "response";
+    id: number;
+    ok: false;
+    error: string;
+};

package/dist/views/protocol.js

@@ -0,0 +1,5 @@
+// sandbox iframe の中の実行部分（runtime.tsx）とホスト（mawaru の承認画面）とのメッセージの形。
+// **公開 API ではない**：iframe の中の実行部分とホストは同じデプロイの mawaru のコード（まとめるときに
+// その時点の版を同梱する）なので、いつ変えてもよい。
+// iframe に入る JS を小さく保つため、ここには型と定数だけを置く（ホストの検査は host.ts）
+export const VIEW_MESSAGE_TAG = "mawaru:view";

package/dist/views/runtime.d.ts

@@ -0,0 +1,2 @@
+import type { HumanView } from "./human.js";
+export declare const runHumanView: (View: HumanView) => void;

package/dist/views/runtime.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { createRoot } from "react-dom/client";
+import { ViewBridgeProvider } from "./_bridge.js";
+import { humanPropsOf } from "./_humanProps.js";
+import { VIEW_MESSAGE_TAG, } from "./protocol.js";
+const post = (message) => 
+// 受け手は親（ホスト）の window だけ。不透明オリジンの iframe からは親のオリジンを指定できない
+window.parent.postMessage({ tag: VIEW_MESSAGE_TAG, ...message }, "*");
+const messageOf = (err) => err instanceof Error ? err.message : String(err);
+let nextRequestId = 1;
+const pending = new Map();
+const dataListeners = new Set();
+const onHostMessage = (event) => {
+    if (event.source !== window.parent)
+        return;
+    const message = event.data;
+    if (message?.tag !== VIEW_MESSAGE_TAG)
+        return;
+    if (message.type === "response") {
+        const waiting = pending.get(message.id);
+        if (!waiting)
+            return;
+        pending.delete(message.id);
+        if (message.ok)
+            waiting.resolve(message.value);
+        else
+            waiting.reject(new Error(message.error));
+        return;
+    }
+    if (message.type === "data") {
+        document.documentElement.dataset.mode = message.mode;
+        for (const listener of dataListeners)
+            listener(message.data);
+    }
+};
+// ホストに頼む（返事が来るまで待つ）
+const requestHost = (method, args) => new Promise((resolve, reject) => {
+    const id = nextRequestId++;
+    pending.set(id, {
+        resolve: resolve,
+        reject,
+    });
+    post({ type: "request", id, method, args });
+});
+const ops = {
+    out: (output) => requestHost("out", { output }),
+    fetchFileUrl: (file) => requestHost("fetchFileUrl", { file }),
+    uploadFile: (file) => requestHost("uploadFile", { file }),
+    writeText: (text) => requestHost("writeText", { text }),
+};
+// 部品（FilePreview・SchemaForm のファイル欄）が裏で使う口も、同じ頼みごとにつなぐ
+const bridge = {
+    fileUrl: ops.fetchFileUrl,
+    uploadFile: ops.uploadFile,
+    copyText: ops.writeText,
+};
+// 描画の例外をホストへ知らせる（ホストはエラーと理由を出す）
+class ReportErrors extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        post({ type: "error", message: messageOf(error) });
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}
+// 実装はコンポーネント1つ。状態（直した値など）は実装が useState で持ち、材料が届き直しても
+// 同じコンポーネントとして描き直すので保たれる
+export const runHumanView = (View) => {
+    window.addEventListener("message", onHostMessage);
+    window.addEventListener("error", (event) => post({ type: "error", message: event.message }));
+    window.addEventListener("unhandledrejection", (event) => post({ type: "error", message: messageOf(event.reason) }));
+    const container = document.getElementById("root");
+    if (!container)
+        throw new Error("#root がありません");
+    const root = createRoot(container);
+    dataListeners.add((data) => {
+        const props = humanPropsOf(data, ops);
+        root.render(_jsx(ViewBridgeProvider, { bridge: bridge, children: _jsx(ReportErrors, { children: _jsx(View, { ...props }) }) }));
+    });
+    post({ type: "ready" });
+};