@mawaru/sdk 0.38.0 → 0.40.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/host.d.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+export { ApprovalActionsProvider } from "./_approvalActions.js";
+export { ViewBridgeProvider } from "./_bridge.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.ZodString;
+    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";
+export { ApprovalActionsProvider } from "./_approvalActions.js";
+// ホスト（mawaru の画面）だけが使うもの（公開 API ではない）：sandbox iframe からのメッセージを確かめる形
+// （protocol.ts の型と同じ。iframe の中は信用できないコードなので、形を確かめてから使う）と、
+// ビューに頼む口を差す提供部品
+export { ViewBridgeProvider } from "./_bridge.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.string(),
+        args: z.unknown(),
+    }),
+]);

package/dist/views/human.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import type { JsonSchema } from "../_schemas/node.js";
+/** 承認画面の局面：承認待ち／承認済み／差し戻し後（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;
+};
+/** 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;
+};
+/**
+ * 承認ビュー：ctx を受けて承認画面（上の帯より下の全部）を描く React コンポーネント。
+ * 承認バーは `<ApprovalBar ctx={ctx} />` を置く（置かなければ承認バーは出ない）。
+ */
+export type ApprovalView<TIn = unknown> = {
+    bivariance(props: {
+        ctx: ApprovalViewContext<TIn>;
+    }): ReactNode;
+}["bivariance"];
+/** 承認ビューを定義する。型を付けるためだけの関数（値はそのまま返す） */
+export declare const defineApprovalView: <TIn = unknown>(view: ApprovalView<TIn>) => ApprovalView<TIn>;
+/** 手元プレビュー（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 { ApprovalBar } from "./_approval/ApprovalBar.js";
+export { type ApprovalActions, useApprovalActions } from "./_approvalActions.js";
+export * from "./index.js";

package/dist/views/human.js

@@ -0,0 +1,6 @@
+/** 承認ビューを定義する。型を付けるためだけの関数（値はそのまま返す） */
+export const defineApprovalView = (view) => view;
+export { ApprovalBar } from "./_approval/ApprovalBar.js";
+export { useApprovalActions } from "./_approvalActions.js";
+// 部品キット（土台）もここから import できる
+export * from "./index.js";

package/dist/views/index.d.ts

@@ -0,0 +1,8 @@
+export { useViewBridge, type ViewBridge } from "./_bridge.js";
+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/index.js

@@ -0,0 +1,12 @@
+// ビューの部品キット（`@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";

package/dist/views/protocol.d.ts

@@ -0,0 +1,34 @@
+export declare const VIEW_MESSAGE_TAG = "mawaru:view";
+export type ThemeMode = "light" | "dark";
+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: string;
+    args: unknown;
+};
+export type HostToView = {
+    tag: typeof VIEW_MESSAGE_TAG;
+    type: "ctx";
+    ctx: unknown;
+    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 のコード（まとめるときに
+// その時点の版を同梱する）なので、いつ変えてもよい（docs/tasks/wip/承認ビューの顧客repo配置.md の「互換の管理」）。
+// iframe に入る JS を小さく保つため、ここには型と定数だけを置く（ホストの検査は host.ts）
+export const VIEW_MESSAGE_TAG = "mawaru:view";

package/dist/views/runtime.d.ts

@@ -0,0 +1,3 @@
+import type { ApprovalView } from "./human.js";
+export declare const requestHost: <T>(method: string, args: unknown) => Promise<T>;
+export declare const runApprovalView: (View: ApprovalView) => 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 { ApprovalActionsProvider, } from "./_approvalActions.js";
+import { ViewBridgeProvider } from "./_bridge.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 ctxListeners = 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 === "ctx") {
+        document.documentElement.dataset.mode = message.mode;
+        for (const listener of ctxListeners)
+            listener(message.ctx, message.mode);
+    }
+};
+// ホストに頼む（返事が来るまで待つ）
+export const requestHost = (method, args) => new Promise((resolve, reject) => {
+    const id = nextRequestId++;
+    pending.set(id, {
+        resolve: resolve,
+        reject,
+    });
+    post({ type: "request", id, method, args });
+});
+const bridge = {
+    fileUrl: (file) => requestHost("fileUrl", { file }),
+    uploadFile: (file) => requestHost("uploadFile", { file }),
+    copyText: (text) => requestHost("copyText", { text }),
+};
+// 描画の例外をホストへ知らせる（ホストは標準ビューに差し替える）
+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;
+    }
+}
+// iframe の中の共通の準備：ホストからのメッセージ・例外の報告。
+// 最初の ctx が届いたら render を呼ぶ（以降の ctx も同じ render に渡す）
+const startView = (render) => {
+    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);
+    ctxListeners.add((ctx) => root.render(_jsx(ViewBridgeProvider, { bridge: bridge, children: _jsx(ReportErrors, { children: render(ctx) }) })));
+    post({ type: "ready" });
+};
+// ---- 承認ビュー ----
+const actions = {
+    decide: (port, value) => requestHost("decide", { port, value }),
+    openRejectDialog: () => requestHost("openRejectDialog", {}),
+    openExitDialog: (key, value) => requestHost("openExitDialog", { key, value }),
+    close: () => requestHost("close", {}),
+};
+// ビューはコンポーネント1つ。状態（直した値・選択など）はビューが useState で持ち、ctx が変わっても
+// （局面・担当の更新）同じコンポーネントとして描き直すので保たれる
+export const runApprovalView = (View) => startView((ctx) => (_jsx(ApprovalActionsProvider, { value: actions, children: _jsx(View, { ctx: ctx }) })));

package/dist/{slack-view.d.ts → views/slack.d.ts}

@@ -1,4 +1,4 @@
-import type { JsonSchema, NodeKind } from "./_schemas/node.js";
+import type { JsonSchema, NodeKind } from "../_schemas/node.js";
 export type SlackBlocks = unknown[];
 export type FileRef = {
     path: string;