@casualoffice/sheets 0.9.0

package/dist/signing.js

@@ -0,0 +1,683 @@
+// src/signing/SigningProvider.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "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
+import { Fragment, jsx } from "react/jsx-runtime";
+var SigningContext = createContext(null);
+function SigningProvider({ session, documentBytes, children }) {
+  if (!session) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(SigningProviderInner, { session, documentBytes, children });
+}
+function SigningProviderInner({
+  session,
+  documentBytes,
+  children
+}) {
+  const controller = useMemo(
+    () => createSigningController(session.fields, session.mode),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [session.fields, session.mode]
+  );
+  const [snapshot, setSnapshot] = useState(() => controller.snapshot());
+  useEffect(() => {
+    const unsub = controller.subscribe(setSnapshot);
+    return unsub;
+  }, [controller]);
+  const value = 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__ */ jsx(SigningContext.Provider, { value, children });
+}
+function useSigning() {
+  return useContext(SigningContext);
+}
+
+// src/signing/SigningPane.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/signing/captures.tsx
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DrawnSignaturePad({
+  onCapture,
+  clearLabel = "Clear",
+  saveLabel = "Use this signature",
+  width = 480,
+  height = 160
+}) {
+  const canvasRef = useRef(null);
+  const drawingRef = useRef(false);
+  const [hasInk, setHasInk] = useState2(false);
+  useEffect2(() => {
+    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__ */ jsxs("div", { style: padWrapStyle, "data-testid": "drawn-signature-pad", children: [
+    /* @__PURE__ */ jsx2(
+      "canvas",
+      {
+        ref: canvasRef,
+        width,
+        height,
+        style: padCanvasStyle(width, height),
+        onPointerDown: start,
+        onPointerMove: move,
+        onPointerUp: end,
+        onPointerLeave: end,
+        "data-testid": "drawn-signature-canvas"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: padActionsStyle, children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", onClick: clear, style: secondaryBtnStyle(false), children: clearLabel }),
+      /* @__PURE__ */ jsx2(
+        "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] = useState2(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__ */ jsxs("div", { style: padWrapStyle, "data-testid": "typed-signature-field", children: [
+    /* @__PURE__ */ jsx2(
+      "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__ */ jsx2("div", { style: padActionsStyle, children: /* @__PURE__ */ jsx2(
+      "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 = useRef(null);
+  const [fileName, setFileName] = useState2(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__ */ jsx2("div", { style: padWrapStyle, "data-testid": "uploaded-signature-field", children: /* @__PURE__ */ jsxs("label", { style: uploadLabelStyle, children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        onChange,
+        style: { display: "none" },
+        "data-testid": "uploaded-signature-input"
+      }
+    ),
+    /* @__PURE__ */ jsx2("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
+import { jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsxs2("aside", { style: paneStyle, role: "region", "aria-label": "Signing pane", "data-testid": testId, children: [
+    banner && /* @__PURE__ */ jsx3("div", { style: bannerStyle, "data-testid": `${testId}-banner`, children: banner }),
+    /* @__PURE__ */ jsx3("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__ */ jsxs2(
+        "div",
+        {
+          style: listItemStyle(isActive, isSigned),
+          "data-testid": `${testId}-field-${f.fieldId}`,
+          "data-state": isSigned ? "signed" : isActive ? "active" : "pending",
+          children: [
+            /* @__PURE__ */ jsx3("span", { style: listIconStyle(isSigned), "aria-hidden": "true", children: isSigned ? "\u2713" : i + 1 }),
+            /* @__PURE__ */ jsx3("span", { style: listLabelStyle, children: f.label }),
+            !f.required && /* @__PURE__ */ jsx3("span", { style: optionalChipStyle, "aria-label": "Optional", children: "optional" })
+          ]
+        },
+        f.fieldId
+      );
+    }) }),
+    active && /* @__PURE__ */ jsx3(
+      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__ */ jsx3("div", { style: completeBlockStyle, "data-testid": `${testId}-complete-block`, children: "All required signatures collected. Ready to finalise." }),
+    /* @__PURE__ */ jsxs2("footer", { style: footerStyle, children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: () => cancel("signer_cancelled"),
+          style: secondaryBtnStyle2(),
+          "data-testid": `${testId}-cancel`,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "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] = useState3(field.methods[0]);
+  useEffect3(() => {
+    setMethod(field.methods[0]);
+  }, [field]);
+  return /* @__PURE__ */ jsxs2("div", { style: editorStyle, "data-testid": `${testId}-editor`, children: [
+    /* @__PURE__ */ jsxs2("div", { style: editorHeaderStyle, children: [
+      /* @__PURE__ */ jsx3("div", { style: editorLabelStyle, children: field.label }),
+      field.signer?.name && /* @__PURE__ */ jsx3("div", { style: editorSignerStyle, children: field.signer.name })
+    ] }),
+    field.methods.length > 1 && /* @__PURE__ */ jsx3("div", { style: methodTabsStyle, role: "tablist", "data-testid": `${testId}-methods`, children: field.methods.map((m) => /* @__PURE__ */ jsx3(
+      "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__ */ jsxs2("div", { style: captureWrapStyle, children: [
+      method === "drawn" && /* @__PURE__ */ jsx3(DrawnSignaturePad, { onCapture: (c) => onCapture(c, "drawn") }),
+      method === "typed" && /* @__PURE__ */ jsx3(
+        TypedSignatureField,
+        {
+          defaultText: field.signer?.name ?? "",
+          onCapture: (c) => onCapture(c, "typed")
+        }
+      ),
+      method === "uploaded" && /* @__PURE__ */ jsx3(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"
+  };
+}
+export {
+  DrawnSignaturePad,
+  SigningPane,
+  SigningProvider,
+  TypedSignatureField,
+  UploadedSignatureField,
+  createSigningController,
+  useSigning
+};
+//# sourceMappingURL=signing.js.map