@schnsrw/casual-sheets 0.2.0

package/dist/index.cjs

@@ -0,0 +1,899 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DrawnSignaturePad: () => DrawnSignaturePad,
+  EmbedTransport: () => EmbedTransport,
+  SigningPane: () => SigningPane,
+  SigningProvider: () => SigningProvider,
+  TypedSignatureField: () => TypedSignatureField,
+  UploadedSignatureField: () => UploadedSignatureField,
+  createSigningController: () => createSigningController,
+  isCasualEnvelope: () => isCasualEnvelope,
+  useSigning: () => useSigning
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/signing/SigningProvider.tsx
+var import_react = require("react");
+
+// src/signing/controller.ts
+function createSigningController(fields, mode) {
+  if (fields.length === 0) {
+    throw new Error("createSigningController: at least one field required");
+  }
+  const fieldIds = new Set(fields.map((f) => f.fieldId));
+  if (fieldIds.size !== fields.length) {
+    throw new Error("createSigningController: duplicate fieldId");
+  }
+  const signed = {};
+  let activeFieldIndex = nextRequiredIndex(fields, signed);
+  let isComplete = false;
+  let isCancelled = false;
+  const listeners = /* @__PURE__ */ new Set();
+  function emit() {
+    const snap = snapshotInternal();
+    for (const l of listeners) l(snap);
+  }
+  function snapshotInternal() {
+    return {
+      fields,
+      mode,
+      signed: { ...signed },
+      activeFieldIndex,
+      canComplete: allRequiredSigned(fields, signed),
+      isComplete,
+      isCancelled
+    };
+  }
+  return {
+    snapshot: snapshotInternal,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    signField(payload) {
+      if (isComplete || isCancelled) return;
+      if (!fieldIds.has(payload.fieldId)) {
+        throw new Error(`signField: unknown fieldId ${payload.fieldId}`);
+      }
+      signed[payload.fieldId] = payload;
+      activeFieldIndex = nextRequiredIndex(fields, signed);
+      emit();
+    },
+    focusField(fieldId) {
+      if (isComplete || isCancelled) return;
+      const idx = fields.findIndex((f) => f.fieldId === fieldId);
+      if (idx < 0) return;
+      if (mode === "sequential") {
+        const next = nextRequiredIndex(fields, signed);
+        if (idx !== next) return;
+      }
+      activeFieldIndex = idx;
+      emit();
+    },
+    complete() {
+      if (!allRequiredSigned(fields, signed)) {
+        throw new Error("complete: required fields are still unsigned");
+      }
+      isComplete = true;
+      activeFieldIndex = -1;
+      emit();
+      return snapshotInternal();
+    },
+    cancel() {
+      if (isComplete || isCancelled) return;
+      isCancelled = true;
+      activeFieldIndex = -1;
+      emit();
+    }
+  };
+}
+function allRequiredSigned(fields, signed) {
+  return fields.every((f) => !f.required || signed[f.fieldId] !== void 0);
+}
+function nextRequiredIndex(fields, signed) {
+  for (let i = 0; i < fields.length; i++) {
+    if (fields[i].required && !signed[fields[i].fieldId]) return i;
+  }
+  for (let i = 0; i < fields.length; i++) {
+    if (!signed[fields[i].fieldId]) return i;
+  }
+  return -1;
+}
+
+// src/signing/SigningProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SigningContext = (0, import_react.createContext)(null);
+function SigningProvider({ session, documentBytes, children }) {
+  if (!session) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SigningProviderInner, { session, documentBytes, children });
+}
+function SigningProviderInner({
+  session,
+  documentBytes,
+  children
+}) {
+  const controller = (0, import_react.useMemo)(
+    () => createSigningController(session.fields, session.mode),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [session.fields, session.mode]
+  );
+  const [snapshot, setSnapshot] = (0, import_react.useState)(() => controller.snapshot());
+  (0, import_react.useEffect)(() => {
+    const unsub = controller.subscribe(setSnapshot);
+    return unsub;
+  }, [controller]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      controller,
+      snapshot,
+      signField: async (payload) => {
+        controller.signField(payload);
+        await session.onFieldSigned?.(payload);
+      },
+      completeIfReady: async () => {
+        if (!controller.snapshot().canComplete) return;
+        const final = controller.complete();
+        const completePayload = {
+          fieldIds: final.fields.map((f) => f.fieldId).filter((id) => final.signed[id] !== void 0),
+          bytes: documentBytes ?? new ArrayBuffer(0),
+          fields: final.signed
+        };
+        await session.onComplete?.(completePayload);
+      },
+      cancel: (reason) => {
+        controller.cancel();
+        session.onCancel?.({ reason });
+      },
+      baseDocumentBytes: documentBytes
+    }),
+    [controller, snapshot, session, documentBytes]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SigningContext.Provider, { value, children });
+}
+function useSigning() {
+  return (0, import_react.useContext)(SigningContext);
+}
+
+// src/signing/SigningPane.tsx
+var import_react3 = require("react");
+
+// src/signing/captures.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DrawnSignaturePad({
+  onCapture,
+  clearLabel = "Clear",
+  saveLabel = "Use this signature",
+  width = 480,
+  height = 160
+}) {
+  const canvasRef = (0, import_react2.useRef)(null);
+  const drawingRef = (0, import_react2.useRef)(false);
+  const [hasInk, setHasInk] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = "#0f172a";
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+  }, []);
+  const start = (e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = pointerPos(e, canvas);
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    drawingRef.current = true;
+    canvas.setPointerCapture(e.pointerId);
+  };
+  const move = (e) => {
+    if (!drawingRef.current) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { x, y } = pointerPos(e, canvas);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    if (!hasInk) setHasInk(true);
+  };
+  const end = (e) => {
+    drawingRef.current = false;
+    canvasRef.current?.releasePointerCapture(e.pointerId);
+  };
+  const clear = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setHasInk(false);
+  };
+  const save = async () => {
+    const canvas = canvasRef.current;
+    if (!canvas || !hasInk) return;
+    const blob = await new Promise((resolve) => {
+      canvas.toBlob((b) => resolve(b), "image/png");
+    });
+    if (!blob) return;
+    const bytes = await blob.arrayBuffer();
+    onCapture({ bytes, mime: "image/png" });
+    clear();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: padWrapStyle, "data-testid": "drawn-signature-pad", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "canvas",
+      {
+        ref: canvasRef,
+        width,
+        height,
+        style: padCanvasStyle(width, height),
+        onPointerDown: start,
+        onPointerMove: move,
+        onPointerUp: end,
+        onPointerLeave: end,
+        "data-testid": "drawn-signature-canvas"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: padActionsStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: clear, style: secondaryBtnStyle(false), children: clearLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: save,
+          disabled: !hasInk,
+          style: primaryBtnStyle(!hasInk),
+          "data-testid": "drawn-signature-save",
+          children: saveLabel
+        }
+      )
+    ] })
+  ] });
+}
+function pointerPos(e, canvas) {
+  const rect = canvas.getBoundingClientRect();
+  const scaleX = canvas.width / rect.width;
+  const scaleY = canvas.height / rect.height;
+  return {
+    x: (e.clientX - rect.left) * scaleX,
+    y: (e.clientY - rect.top) * scaleY
+  };
+}
+function TypedSignatureField({
+  onCapture,
+  defaultText = "",
+  saveLabel = "Use this signature"
+}) {
+  const [value, setValue] = (0, import_react2.useState)(defaultText);
+  const save = () => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    const bytes = new TextEncoder().encode(trimmed).buffer;
+    onCapture({ bytes, mime: "text/plain" });
+    setValue("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: padWrapStyle, "data-testid": "typed-signature-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => setValue(e.target.value),
+        placeholder: "Type your full name",
+        style: typedInputStyle,
+        "data-testid": "typed-signature-input",
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: padActionsStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: save,
+        disabled: !value.trim(),
+        style: primaryBtnStyle(!value.trim()),
+        "data-testid": "typed-signature-save",
+        children: saveLabel
+      }
+    ) })
+  ] });
+}
+function UploadedSignatureField({
+  onCapture,
+  accept = "image/png,image/jpeg,image/svg+xml"
+}) {
+  const inputRef = (0, import_react2.useRef)(null);
+  const [fileName, setFileName] = (0, import_react2.useState)(null);
+  const onChange = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const bytes = await file.arrayBuffer();
+    onCapture({ bytes, mime: file.type || "application/octet-stream" });
+    setFileName(file.name);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: padWrapStyle, "data-testid": "uploaded-signature-field", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: uploadLabelStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        onChange,
+        style: { display: "none" },
+        "data-testid": "uploaded-signature-input"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: fileName ?? "Choose image\u2026" })
+  ] }) });
+}
+var padWrapStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 10
+};
+var padCanvasStyle = (w, h) => ({
+  width: w,
+  height: h,
+  maxWidth: "100%",
+  border: "1px dashed var(--doc-border, #cbd5e1)",
+  borderRadius: 8,
+  background: "var(--doc-surface, #fff)",
+  cursor: "crosshair",
+  touchAction: "none"
+});
+var padActionsStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: 8
+};
+var typedInputStyle = {
+  width: "100%",
+  padding: "10px 12px",
+  border: "1px solid var(--doc-border, #cbd5e1)",
+  borderRadius: 6,
+  fontSize: 18,
+  fontFamily: '"Caveat", "Dancing Script", "Brush Script MT", cursive',
+  background: "var(--doc-surface, #fff)",
+  color: "var(--doc-text, #0f172a)"
+};
+var uploadLabelStyle = {
+  display: "inline-flex",
+  padding: "8px 14px",
+  border: "1px dashed var(--doc-border, #cbd5e1)",
+  borderRadius: 6,
+  background: "var(--doc-surface, #fff)",
+  color: "var(--doc-text, #0f172a)",
+  fontSize: 13,
+  cursor: "pointer",
+  alignSelf: "flex-start"
+};
+function primaryBtnStyle(disabled) {
+  return {
+    padding: "8px 16px",
+    borderRadius: 6,
+    border: "1px solid transparent",
+    background: disabled ? "var(--doc-border, #cbd5e1)" : "var(--doc-accent, #2563eb)",
+    color: disabled ? "var(--doc-text-muted, #64748b)" : "#fff",
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontFamily: "inherit"
+  };
+}
+function secondaryBtnStyle(disabled) {
+  return {
+    padding: "8px 16px",
+    borderRadius: 6,
+    border: "1px solid var(--doc-border, #cbd5e1)",
+    background: "transparent",
+    color: "var(--doc-text, #0f172a)",
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontFamily: "inherit"
+  };
+}
+
+// src/signing/SigningPane.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SigningPane({ banner, testId = "signing-pane" }) {
+  const ctx = useSigning();
+  if (!ctx) return null;
+  const { snapshot, signField, completeIfReady, cancel } = ctx;
+  if (snapshot.isComplete || snapshot.isCancelled) return null;
+  const active = snapshot.activeFieldIndex >= 0 ? snapshot.fields[snapshot.activeFieldIndex] : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("aside", { style: paneStyle, role: "region", "aria-label": "Signing pane", "data-testid": testId, children: [
+    banner && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: bannerStyle, "data-testid": `${testId}-banner`, children: banner }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: listStyle, "data-testid": `${testId}-fields`, children: snapshot.fields.map((f, i) => {
+      const isSigned = !!snapshot.signed[f.fieldId];
+      const isActive = i === snapshot.activeFieldIndex;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          style: listItemStyle(isActive, isSigned),
+          "data-testid": `${testId}-field-${f.fieldId}`,
+          "data-state": isSigned ? "signed" : isActive ? "active" : "pending",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: listIconStyle(isSigned), "aria-hidden": "true", children: isSigned ? "\u2713" : i + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: listLabelStyle, children: f.label }),
+            !f.required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: optionalChipStyle, "aria-label": "Optional", children: "optional" })
+          ]
+        },
+        f.fieldId
+      );
+    }) }),
+    active && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ActiveFieldEditor,
+      {
+        field: active,
+        testId,
+        onCapture: async (cap, method) => {
+          const payload = {
+            fieldId: active.fieldId,
+            method,
+            bytes: cap.bytes,
+            mime: cap.mime,
+            signedAt: (/* @__PURE__ */ new Date()).toISOString()
+          };
+          await signField(payload);
+        }
+      }
+    ),
+    !active && snapshot.canComplete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: completeBlockStyle, "data-testid": `${testId}-complete-block`, children: "All required signatures collected. Ready to finalise." }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("footer", { style: footerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => cancel("signer_cancelled"),
+          style: secondaryBtnStyle2(),
+          "data-testid": `${testId}-cancel`,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => void completeIfReady(),
+          disabled: !snapshot.canComplete,
+          style: primaryBtnStyle2(!snapshot.canComplete),
+          "data-testid": `${testId}-complete`,
+          children: "Complete"
+        }
+      )
+    ] })
+  ] });
+}
+function ActiveFieldEditor({
+  field,
+  testId,
+  onCapture
+}) {
+  const [method, setMethod] = (0, import_react3.useState)(field.methods[0]);
+  (0, import_react3.useEffect)(() => {
+    setMethod(field.methods[0]);
+  }, [field]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: editorStyle, "data-testid": `${testId}-editor`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: editorHeaderStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: editorLabelStyle, children: field.label }),
+      field.signer?.name && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: editorSignerStyle, children: field.signer.name })
+    ] }),
+    field.methods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: methodTabsStyle, role: "tablist", "data-testid": `${testId}-methods`, children: field.methods.map((m) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": method === m,
+        onClick: () => setMethod(m),
+        style: methodTabStyle(method === m),
+        "data-testid": `${testId}-method-${m}`,
+        children: methodLabel(m)
+      },
+      m
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: captureWrapStyle, children: [
+      method === "drawn" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DrawnSignaturePad, { onCapture: (c) => onCapture(c, "drawn") }),
+      method === "typed" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        TypedSignatureField,
+        {
+          defaultText: field.signer?.name ?? "",
+          onCapture: (c) => onCapture(c, "typed")
+        }
+      ),
+      method === "uploaded" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UploadedSignatureField, { onCapture: (c) => onCapture(c, "uploaded") })
+    ] })
+  ] });
+}
+function methodLabel(m) {
+  switch (m) {
+    case "drawn":
+      return "Draw";
+    case "typed":
+      return "Type";
+    case "uploaded":
+      return "Upload";
+  }
+}
+var paneStyle = {
+  position: "fixed",
+  top: 16,
+  right: 16,
+  bottom: 16,
+  width: 360,
+  maxWidth: "100vw",
+  display: "flex",
+  flexDirection: "column",
+  gap: 14,
+  padding: 16,
+  background: "var(--doc-surface, #fff)",
+  border: "1px solid var(--doc-border, #cbd5e1)",
+  borderRadius: 12,
+  boxShadow: "0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(15, 23, 42, 0.12)",
+  fontFamily: "inherit",
+  zIndex: 9e3
+};
+var bannerStyle = {
+  padding: "8px 10px",
+  background: "var(--doc-surface-2, #f1f5f9)",
+  border: "1px solid var(--doc-border-light, #e2e8f0)",
+  borderRadius: 6,
+  fontSize: 12,
+  color: "var(--doc-text-muted, #475569)"
+};
+var listStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4
+};
+function listItemStyle(active, signed) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 10px",
+    borderRadius: 6,
+    background: active ? "var(--doc-surface-2, #f1f5f9)" : signed ? "transparent" : "transparent",
+    border: active ? "1px solid var(--doc-border, #cbd5e1)" : "1px solid transparent",
+    opacity: signed && !active ? 0.7 : 1
+  };
+}
+function listIconStyle(signed) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 22,
+    height: 22,
+    borderRadius: "50%",
+    background: signed ? "var(--doc-accent, #2563eb)" : "var(--doc-surface-2, #f1f5f9)",
+    color: signed ? "#fff" : "var(--doc-text-muted, #475569)",
+    fontSize: 12,
+    fontWeight: 600,
+    flexShrink: 0
+  };
+}
+var listLabelStyle = {
+  flex: 1,
+  fontSize: 13,
+  color: "var(--doc-text, #0f172a)",
+  fontWeight: 500
+};
+var optionalChipStyle = {
+  fontSize: 11,
+  color: "var(--doc-text-muted, #64748b)",
+  padding: "2px 6px",
+  background: "var(--doc-surface-2, #f1f5f9)",
+  borderRadius: 4
+};
+var editorStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 12
+};
+var editorHeaderStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var editorLabelStyle = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: "var(--doc-text, #0f172a)"
+};
+var editorSignerStyle = {
+  fontSize: 12,
+  color: "var(--doc-text-muted, #64748b)"
+};
+var methodTabsStyle = {
+  display: "flex",
+  gap: 4,
+  padding: 2,
+  background: "var(--doc-surface-2, #f1f5f9)",
+  borderRadius: 6
+};
+function methodTabStyle(selected) {
+  return {
+    flex: 1,
+    padding: "6px 10px",
+    background: selected ? "var(--doc-surface, #fff)" : "transparent",
+    border: "none",
+    borderRadius: 4,
+    fontSize: 12,
+    fontWeight: 500,
+    color: selected ? "var(--doc-text, #0f172a)" : "var(--doc-text-muted, #475569)",
+    cursor: "pointer",
+    fontFamily: "inherit"
+  };
+}
+var captureWrapStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var completeBlockStyle = {
+  padding: "10px 12px",
+  background: "rgba(34, 197, 94, 0.08)",
+  border: "1px solid rgba(34, 197, 94, 0.28)",
+  borderRadius: 6,
+  fontSize: 12,
+  color: "rgb(20, 83, 45)"
+};
+var footerStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: 8,
+  marginTop: "auto",
+  paddingTop: 12,
+  borderTop: "1px solid var(--doc-border-light, #e2e8f0)"
+};
+function primaryBtnStyle2(disabled) {
+  return {
+    padding: "8px 16px",
+    borderRadius: 6,
+    border: "1px solid transparent",
+    background: disabled ? "var(--doc-border, #cbd5e1)" : "var(--doc-accent, #2563eb)",
+    color: disabled ? "var(--doc-text-muted, #64748b)" : "#fff",
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontFamily: "inherit"
+  };
+}
+function secondaryBtnStyle2() {
+  return {
+    padding: "8px 16px",
+    borderRadius: 6,
+    border: "1px solid var(--doc-border, #cbd5e1)",
+    background: "transparent",
+    color: "var(--doc-text, #0f172a)",
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: "pointer",
+    fontFamily: "inherit"
+  };
+}
+
+// src/embed/protocol.ts
+function isCasualEnvelope(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return typeof v.type === "string" && v.type.startsWith("casual.") && (v.app === "docs" || v.app === "sheet") && v.v === 1 && "data" in v;
+}
+
+// src/embed/EmbedTransport.ts
+var EmbedTransport = class {
+  opts;
+  handlers = {};
+  destroyed = false;
+  pendingRequests = /* @__PURE__ */ new Map();
+  constructor(opts) {
+    this.opts = {
+      ...opts,
+      parentWindow: opts.parentWindow ?? (typeof window !== "undefined" ? window.parent : { postMessage: () => void 0 }),
+      hostWindow: opts.hostWindow ?? (typeof window !== "undefined" ? window : {
+        addEventListener: () => void 0,
+        removeEventListener: () => void 0
+      })
+    };
+    this.boundMessage = this.boundMessage.bind(this);
+    this.opts.hostWindow.addEventListener("message", this.boundMessage);
+  }
+  /** Replaces the handler set. Idempotent — call multiple times. */
+  on(handlers) {
+    this.handlers = { ...this.handlers, ...handlers };
+  }
+  /** Editor → Host: announce ourselves. Call once after handlers are wired. */
+  sendHello() {
+    const data = {
+      capabilities: this.opts.capabilities,
+      version: this.opts.version,
+      commit: this.opts.commit
+    };
+    this.post("casual.hello", data);
+  }
+  /** Editor → Host: editor is ready to receive commands. */
+  sendReady() {
+    this.post("casual.ready", {});
+  }
+  /** Editor → Host: ask the host to supply document bytes for `docId`. */
+  async requestLoad(docId, timeoutMs = 3e4) {
+    return this.request(
+      "casual.load.request",
+      { docId },
+      timeoutMs
+    );
+  }
+  /** Editor → Host: ask the host to persist `bytes`. */
+  async requestSave(req, timeoutMs = 3e4) {
+    return this.request("casual.save.request", req, timeoutMs, [req.bytes]);
+  }
+  /** Editor → Host: selection moved. Fire-and-forget. */
+  sendSelectionChanged(data) {
+    this.post("casual.selection.changed", data);
+  }
+  /** Editor → Host: a noteworthy event. */
+  sendTelemetry(data) {
+    this.post("casual.telemetry.event", data);
+  }
+  /** Editor → Host: per-field progress during a signing session. */
+  sendSignatureFieldSigned(data) {
+    this.post("casual.signature.field.signed", data, [data.bytes]);
+  }
+  /** Editor → Host: signing session is finished. */
+  sendSignatureComplete(data) {
+    this.post("casual.signature.complete", data, [data.bytes]);
+  }
+  /** Editor → Host: editor-side cancel of a signing session. */
+  sendSignatureCancel(reason) {
+    this.post("casual.signature.cancel", { reason });
+  }
+  /** Tear down listeners. Idempotent. */
+  destroy() {
+    if (this.destroyed) return;
+    this.opts.hostWindow.removeEventListener("message", this.boundMessage);
+    this.pendingRequests.clear();
+    this.destroyed = true;
+  }
+  // ---------------------------------------------------------------
+  // Internals
+  // ---------------------------------------------------------------
+  boundMessage(ev) {
+    const msg = ev;
+    if (msg.origin && msg.origin !== this.opts.hostOrigin) return;
+    if (!isCasualEnvelope(msg.data)) return;
+    void this.dispatch(msg.data);
+  }
+  async dispatch(env) {
+    if (env.id && this.pendingRequests.has(env.id)) {
+      const resolve = this.pendingRequests.get(env.id);
+      this.pendingRequests.delete(env.id);
+      resolve(env);
+      return;
+    }
+    switch (env.type) {
+      case "casual.hello":
+        await this.handlers.onHostHello?.(env.data);
+        this.sendReady();
+        return;
+      case "casual.command.setReadOnly":
+        await this.handlers.onCommandSetReadOnly?.(env.data);
+        return;
+      case "casual.command.setTheme":
+        await this.handlers.onCommandSetTheme?.(env.data);
+        return;
+      case "casual.command.setLocale":
+        await this.handlers.onCommandSetLocale?.(env.data);
+        return;
+      case "casual.command.focus":
+        await this.handlers.onCommandFocus?.();
+        return;
+      case "casual.command.save":
+        await this.handlers.onCommandSave?.();
+        return;
+      case "casual.command.load":
+        await this.handlers.onCommandLoad?.();
+        return;
+      case "casual.signature.request": {
+        const ack = await this.handlers.onSignatureRequest?.(
+          env.data
+        ) ?? {
+          ok: false,
+          code: "unhandled"
+        };
+        if (env.id) {
+          this.postReply(env.id, "casual.signature.request.ack", ack);
+        }
+        return;
+      }
+      case "casual.signature.cancel":
+        await this.handlers.onSignatureCancel?.(env.data);
+        return;
+      default:
+        return;
+    }
+  }
+  post(type, data, transfer) {
+    const env = { type, app: this.opts.app, v: 1, data };
+    try {
+      this.opts.parentWindow.postMessage(env, this.opts.hostOrigin, transfer);
+    } catch {
+    }
+  }
+  postReply(id, type, data) {
+    const env = { type, app: this.opts.app, id, v: 1, data };
+    try {
+      this.opts.parentWindow.postMessage(env, this.opts.hostOrigin);
+    } catch {
+    }
+  }
+  async request(type, data, timeoutMs, transfer) {
+    const id = newRequestId();
+    return new Promise((resolve, reject) => {
+      const timer = timeoutMs > 0 ? setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error(`Embed request ${type} timed out after ${timeoutMs}ms`));
+      }, timeoutMs) : null;
+      this.pendingRequests.set(id, (env2) => {
+        if (timer) clearTimeout(timer);
+        resolve(env2.data);
+      });
+      const env = { type, app: this.opts.app, id, v: 1, data };
+      try {
+        this.opts.parentWindow.postMessage(env, this.opts.hostOrigin, transfer);
+      } catch (err) {
+        if (timer) clearTimeout(timer);
+        this.pendingRequests.delete(id);
+        reject(err);
+      }
+    });
+  }
+};
+function newRequestId() {
+  return Math.random().toString(16).slice(2, 10);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DrawnSignaturePad,
+  EmbedTransport,
+  SigningPane,
+  SigningProvider,
+  TypedSignatureField,
+  UploadedSignatureField,
+  createSigningController,
+  isCasualEnvelope,
+  useSigning
+});
+//# sourceMappingURL=index.cjs.map