@mawaru/sdk 0.40.0 → 0.41.0

package/views/_approval/ApprovalBar.tsx

@@ -1,239 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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/index.ts

@@ -1,16 +0,0 @@
-// ビューの部品キット（`@mawaru/sdk/views`）。種類（承認・…）に依らない土台：部品・ホストに頼む口。
-// mawaru が顧客 repo のビューをまとめるとき、mawaru の今の版のこのキットを同梱する。
-// **公開 API**：部品の props とホストに頼む口は後方互換でしか変えない
-// （docs/tasks/wip/承認ビューの顧客repo配置.md の「互換の管理」）
-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"