@casualoffice/sheets 0.9.0

package/dist/index.js

@@ -0,0 +1,1530 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// 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"
+  };
+}
+
+// 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 {
+  constructor(opts) {
+    __publicField(this, "opts");
+    __publicField(this, "handlers", {});
+    __publicField(this, "destroyed", false);
+    __publicField(this, "pendingRequests", /* @__PURE__ */ new Map());
+    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: format flags on the active cell changed (bold,
+   *  italic, …). Drive's custom toolbar mirrors this state in its
+   *  "pressed" indicators. v0.6+. */
+  sendSelectionFormatState(data) {
+    this.post("casual.selection.format-state", 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 });
+  }
+  /** Editor → Host: fatal boot / load error. Host surfaces via wrapper
+   *  `onError` callback. Fire-and-forget. */
+  sendError(data) {
+    this.post("casual.error", data);
+  }
+  /** 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.set.viewmode":
+        await this.handlers.onCommandSetViewMode?.(env.data);
+        return;
+      case "casual.command.execute":
+        await this.handlers.onCommandExecute?.(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);
+}
+
+// src/sheets/CasualSheets.tsx
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import {
+  ICommandService,
+  LocaleType,
+  LogLevel,
+  ThemeService as ThemeService2,
+  Univer,
+  UniverInstanceType
+} from "@univerjs/core";
+import { FUniver } from "@univerjs/core/facade";
+import { defaultTheme } from "@univerjs/themes";
+import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
+import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
+import { UniverUIPlugin } from "@univerjs/ui";
+import { UniverDocsPlugin } from "@univerjs/docs";
+import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
+import { UniverSheetsPlugin } from "@univerjs/sheets";
+import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
+import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
+import { UniverSheetsFormulaUIPlugin } from "@univerjs/sheets-formula-ui";
+import { UniverSheetsNumfmtPlugin } from "@univerjs/sheets-numfmt";
+import { UniverSheetsNumfmtUIPlugin } from "@univerjs/sheets-numfmt-ui";
+
+// src/sheets/api.ts
+import "@univerjs/sheets/facade";
+import { ThemeService } from "@univerjs/core";
+function createCasualSheetsAPI(univerAPI) {
+  return {
+    univer: univerAPI,
+    getSnapshot() {
+      return univerAPI.getActiveWorkbook()?.save() ?? null;
+    },
+    loadSnapshot(data) {
+      const current = univerAPI.getActiveWorkbook();
+      if (current) univerAPI.disposeUnit(current.getId());
+      univerAPI.createWorkbook(data);
+    },
+    getSelection() {
+      const wb = univerAPI.getActiveWorkbook();
+      const range = wb?.getActiveRange();
+      if (!wb || !range) return null;
+      return {
+        unitId: wb.getId(),
+        sheetId: wb.getActiveSheet().getSheetId(),
+        range: range.getRange()
+      };
+    },
+    executeCommand(id, params) {
+      return univerAPI.executeCommand(id, params);
+    },
+    setTheme(appearance) {
+      const dark = appearance === "dark";
+      const injector = univerAPI._injector;
+      const themeService = injector?.get(ThemeService);
+      if (themeService && themeService.darkMode !== dark) themeService.setDarkMode(dark);
+    }
+  };
+}
+
+// src/univer/lazy-plugins.ts
+var LOADERS = {
+  cf: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-conditional-formatting"),
+      import("@univerjs/sheets-conditional-formatting-ui")
+    ]);
+    return [
+      [base.UniverSheetsConditionalFormattingPlugin],
+      [ui.UniverSheetsConditionalFormattingUIPlugin]
+    ];
+  },
+  dv: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-data-validation"),
+      import("@univerjs/sheets-data-validation-ui")
+    ]);
+    return [
+      [base.UniverSheetsDataValidationPlugin],
+      [ui.UniverSheetsDataValidationUIPlugin]
+    ];
+  },
+  hyperlink: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-hyper-link"),
+      import("@univerjs/sheets-hyper-link-ui")
+    ]);
+    return [
+      [base.UniverSheetsHyperLinkPlugin],
+      [ui.UniverSheetsHyperLinkUIPlugin]
+    ];
+  },
+  note: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-note"),
+      import("@univerjs/sheets-note-ui")
+    ]);
+    return [[base.UniverSheetsNotePlugin], [ui.UniverSheetsNoteUIPlugin]];
+  },
+  table: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-table"),
+      import("@univerjs/sheets-table-ui")
+    ]);
+    return [[base.UniverSheetsTablePlugin], [ui.UniverSheetsTableUIPlugin]];
+  },
+  threadComment: async () => {
+    const [tc, tcUi, sheetsTc, sheetsTcUi] = await Promise.all([
+      import("@univerjs/thread-comment"),
+      import("@univerjs/thread-comment-ui"),
+      import("@univerjs/sheets-thread-comment"),
+      import("@univerjs/sheets-thread-comment-ui")
+    ]);
+    return [
+      [tc.UniverThreadCommentPlugin],
+      [tcUi.UniverThreadCommentUIPlugin],
+      [sheetsTc.UniverSheetsThreadCommentPlugin],
+      [sheetsTcUi.UniverSheetsThreadCommentUIPlugin]
+    ];
+  },
+  drawing: async () => {
+    const [d, dUi, sd, sdUi] = await Promise.all([
+      import("@univerjs/drawing"),
+      import("@univerjs/drawing-ui"),
+      import("@univerjs/sheets-drawing"),
+      import("@univerjs/sheets-drawing-ui"),
+      // Side-effect imports: install FWorksheet.insertImage / getImages /
+      // updateImages on the facade prototype. Without these, code that
+      // reaches in via the FUniver facade (e2e specs, future shell glue)
+      // sees an undefined method even though the plugin is registered.
+      import("@univerjs/sheets-drawing/facade"),
+      import("@univerjs/sheets-drawing-ui/facade")
+    ]);
+    return [
+      [d.UniverDrawingPlugin],
+      [dUi.UniverDrawingUIPlugin],
+      [sd.UniverSheetsDrawingPlugin],
+      [sdUi.UniverSheetsDrawingUIPlugin]
+    ];
+  },
+  sort: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-sort"),
+      import("@univerjs/sheets-sort-ui")
+    ]);
+    return [[base.UniverSheetsSortPlugin], [ui.UniverSheetsSortUIPlugin]];
+  },
+  filter: async () => {
+    const [base, ui] = await Promise.all([
+      import("@univerjs/sheets-filter"),
+      import("@univerjs/sheets-filter-ui")
+    ]);
+    return [[base.UniverSheetsFilterPlugin], [ui.UniverSheetsFilterUIPlugin]];
+  },
+  findReplace: async () => {
+    const [base, sheets] = await Promise.all([
+      import("@univerjs/find-replace"),
+      import("@univerjs/sheets-find-replace")
+    ]);
+    return [[base.UniverFindReplacePlugin], [sheets.UniverSheetsFindReplacePlugin]];
+  }
+};
+var RESOURCE_NAME_TO_GROUP = {
+  SHEET_CONDITIONAL_FORMATTING_PLUGIN: "cf",
+  SHEET_DATA_VALIDATION_PLUGIN: "dv",
+  SHEET_HYPER_LINK_PLUGIN: "hyperlink",
+  SHEET_NOTE_PLUGIN: "note",
+  SHEET_TABLE_PLUGIN: "table",
+  SHEET_THREAD_COMMENT_BASE_PLUGIN: "threadComment",
+  SHEET_DRAWING_PLUGIN: "drawing",
+  SHEET_SORT_PLUGIN: "sort",
+  SHEET_FILTER_PLUGIN: "filter"
+};
+var loaded = /* @__PURE__ */ new Set();
+var inflight = /* @__PURE__ */ new Map();
+var currentUniver = null;
+function setUniverForLazyLoad(univer) {
+  currentUniver = univer;
+}
+function ensurePlugin(univer, group) {
+  if (loaded.has(group)) return Promise.resolve();
+  const existing = inflight.get(group);
+  if (existing) return existing;
+  const loader = LOADERS[group];
+  if (!loader) return Promise.resolve();
+  const p = loader().then((plugins) => {
+    for (const [PluginCtor, config] of plugins) {
+      univer.registerPlugin(PluginCtor, config);
+    }
+    loaded.add(group);
+    inflight.delete(group);
+  });
+  inflight.set(group, p);
+  return p;
+}
+async function eagerLoadForSnapshot(univer, snapshot) {
+  const groups = /* @__PURE__ */ new Set();
+  const resources = snapshot.resources ?? [];
+  for (const r of resources) {
+    const g = RESOURCE_NAME_TO_GROUP[r.name];
+    if (g) groups.add(g);
+  }
+  if (snapshotHasHyperlinks(snapshot)) groups.add("hyperlink");
+  await Promise.all(Array.from(groups).map((g) => ensurePlugin(univer, g)));
+}
+function idleLoadAll(univer) {
+  const groups = Object.keys(LOADERS);
+  schedule(() => {
+    for (const g of groups) {
+      void ensurePlugin(univer, g);
+    }
+  });
+}
+function schedule(fn) {
+  const ric = globalThis.requestIdleCallback;
+  if (ric) ric(fn, { timeout: 500 });
+  else setTimeout(fn, 0);
+}
+function snapshotHasHyperlinks(snapshot) {
+  const sheetOrder = snapshot.sheetOrder ?? [];
+  for (const sid of sheetOrder) {
+    const sheet = snapshot.sheets?.[sid];
+    if (!sheet?.cellData) continue;
+    const cellData = sheet.cellData;
+    for (const r of Object.keys(cellData)) {
+      const row = cellData[r];
+      for (const c of Object.keys(row)) {
+        const ranges = row[c]?.p?.body?.customRanges ?? [];
+        if (ranges.some((cr) => cr.rangeType === 0)) return true;
+      }
+    }
+  }
+  return false;
+}
+
+// src/sheets/CasualSheets.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DEFAULT_STYLE = {
+  width: "100%",
+  height: "100%",
+  position: "relative"
+};
+var DEFAULT_UI = {
+  header: false,
+  toolbar: false,
+  footer: false,
+  contextMenu: true
+};
+function CasualSheets({
+  initialData,
+  onReady,
+  onChange,
+  onChangeDebounceMs = 400,
+  lazyPlugins = true,
+  locale = LocaleType.EN_US,
+  locales,
+  logLevel = LogLevel.WARN,
+  ui,
+  theme = defaultTheme,
+  appearance = "light",
+  style,
+  className,
+  testId = "casual-sheets"
+}) {
+  const hostRef = useRef2(null);
+  const onChangeRef = useRef2(onChange);
+  onChangeRef.current = onChange;
+  const hasOnChange = useRef2(!!onChange).current;
+  const apiRef = useRef2(null);
+  useEffect4(() => {
+    const container = hostRef.current;
+    if (!container) return;
+    const univer = new Univer({
+      theme,
+      locale,
+      locales,
+      logLevel
+    });
+    const uiOpts = { ...DEFAULT_UI, ...ui, container };
+    univer.registerPlugin(UniverRenderEnginePlugin);
+    univer.registerPlugin(UniverFormulaEnginePlugin);
+    univer.registerPlugin(UniverUIPlugin, uiOpts);
+    univer.registerPlugin(UniverDocsPlugin);
+    univer.registerPlugin(UniverDocsUIPlugin);
+    univer.registerPlugin(UniverSheetsPlugin);
+    univer.registerPlugin(UniverSheetsUIPlugin);
+    univer.registerPlugin(UniverSheetsFormulaPlugin);
+    univer.registerPlugin(UniverSheetsFormulaUIPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtPlugin);
+    univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
+    if (lazyPlugins) setUniverForLazyLoad(univer);
+    let cancelled = false;
+    let changeTimer = null;
+    let changeSub;
+    void (async () => {
+      if (lazyPlugins) {
+        await eagerLoadForSnapshot(univer, initialData);
+        if (cancelled) return;
+      }
+      univer.createUnit(UniverInstanceType.UNIVER_SHEET, initialData);
+      const api = createCasualSheetsAPI(FUniver.newAPI(univer));
+      apiRef.current = api;
+      applyAppearance(api, container, appearance);
+      onReady?.(api);
+      if (hasOnChange) {
+        const injector = api.univer._injector;
+        const cmdSvc = injector?.get(ICommandService);
+        changeSub = cmdSvc?.onMutationExecutedForCollab(() => {
+          if (changeTimer) clearTimeout(changeTimer);
+          changeTimer = setTimeout(() => {
+            const snap = api.getSnapshot();
+            if (snap) onChangeRef.current?.(snap);
+          }, onChangeDebounceMs);
+        });
+        if (cancelled) changeSub?.dispose();
+      }
+      if (lazyPlugins) idleLoadAll(univer);
+    })();
+    return () => {
+      cancelled = true;
+      if (changeTimer) clearTimeout(changeTimer);
+      changeSub?.dispose();
+      apiRef.current = null;
+      if (lazyPlugins) setUniverForLazyLoad(null);
+      const toDispose = univer;
+      queueMicrotask(() => toDispose.dispose());
+    };
+  }, []);
+  useEffect4(() => {
+    const api = apiRef.current;
+    const container = hostRef.current;
+    if (!api || !container) return;
+    applyAppearance(api, container, appearance);
+  }, [appearance]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: hostRef,
+      style: { ...DEFAULT_STYLE, ...style },
+      className,
+      "data-testid": testId
+    }
+  );
+}
+function applyAppearance(api, container, appearance) {
+  const dark = appearance === "dark";
+  container.classList.toggle("univer-dark", dark);
+  try {
+    const injector = api.univer._injector;
+    const themeService = injector?.get(ThemeService2);
+    if (themeService && themeService.darkMode !== dark) themeService.setDarkMode(dark);
+  } catch {
+  }
+}
+
+// src/sheets/CasualSheetsIframe.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect5,
+  useRef as useRef3
+} from "react";
+
+// src/embed/EmbedHostTransport.ts
+var EmbedHostTransport = class {
+  constructor(opts) {
+    __publicField(this, "opts");
+    __publicField(this, "handlers", {});
+    __publicField(this, "boundOnMessage");
+    __publicField(this, "destroyed", false);
+    this.opts = opts;
+    this.boundOnMessage = this.onMessage.bind(this);
+    const target = opts.hostWindow ?? window;
+    target.addEventListener("message", this.boundOnMessage);
+  }
+  on(handlers) {
+    this.handlers = { ...this.handlers, ...handlers };
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    const target = this.opts.hostWindow ?? window;
+    target.removeEventListener("message", this.boundOnMessage);
+  }
+  sendHostHello(data) {
+    this.post("casual.hello", data);
+  }
+  sendSetViewMode(data) {
+    this.post("casual.command.set.viewmode", data);
+  }
+  sendSetReadOnly(data) {
+    this.post("casual.command.set.readonly", data);
+  }
+  sendSetTheme(data) {
+    this.post("casual.command.set.theme", data);
+  }
+  sendSetLocale(data) {
+    this.post("casual.command.set.locale", data);
+  }
+  sendCommandSave() {
+    this.post("casual.command.save", null);
+  }
+  sendCommandFocus() {
+    this.post("casual.command.focus", null);
+  }
+  /** Host → Editor: run a formatting / navigation command (bold,
+   *  italic, undo, …) against the active selection. v0.6+. */
+  sendCommandExecute(data) {
+    this.post("casual.command.execute", data);
+  }
+  sendSignatureRequest(id, data) {
+    this.post("casual.signature.request", data, id);
+  }
+  sendSignatureCancel(data) {
+    this.post("casual.signature.cancel", data);
+  }
+  onMessage(ev) {
+    if (this.destroyed) return;
+    if (ev.origin !== this.opts.embedOrigin) return;
+    if (ev.source !== this.opts.iframeWindow) return;
+    if (!isCasualEnvelope(ev.data)) return;
+    if (ev.data.app !== this.opts.app) return;
+    void this.dispatch(ev.data);
+  }
+  async dispatch(env) {
+    switch (env.type) {
+      case "casual.ready":
+        this.handlers.onEditorReady?.(env.data);
+        return;
+      case "casual.load.request": {
+        if (!this.handlers.onLoadRequest) return;
+        const id = env.id ?? "";
+        try {
+          const resp = await this.handlers.onLoadRequest(env.data);
+          const transfer = resp.ok ? [resp.bytes] : [];
+          this.post("casual.load.response", resp, id, transfer);
+        } catch (err) {
+          this.post(
+            "casual.load.response",
+            {
+              ok: false,
+              code: "host_error",
+              message: err instanceof Error ? err.message : String(err)
+            },
+            id
+          );
+        }
+        return;
+      }
+      case "casual.save.request": {
+        if (!this.handlers.onSaveRequest) return;
+        const id = env.id ?? "";
+        try {
+          const resp = await this.handlers.onSaveRequest(env.data);
+          this.post("casual.save.response", resp, id);
+        } catch (err) {
+          this.post(
+            "casual.save.response",
+            {
+              ok: false,
+              code: "host_error",
+              message: err instanceof Error ? err.message : String(err)
+            },
+            id
+          );
+        }
+        return;
+      }
+      case "casual.selection.changed":
+        this.handlers.onSelectionChanged?.(env.data);
+        return;
+      case "casual.selection.format-state":
+        this.handlers.onSelectionFormatState?.(env.data);
+        return;
+      case "casual.telemetry.event":
+        this.handlers.onTelemetry?.(env.data);
+        return;
+      case "casual.signature.field.signed":
+        this.handlers.onSignatureFieldSigned?.(env.data);
+        return;
+      case "casual.signature.complete":
+        this.handlers.onSignatureComplete?.(env.data);
+        return;
+      case "casual.signature.cancel":
+        this.handlers.onSignatureCancel?.(env.data);
+        return;
+      case "casual.signature.request.ack":
+        return;
+      case "casual.error":
+        this.handlers.onError?.(env.data);
+        return;
+      default:
+        return;
+    }
+  }
+  post(type, data, id, transfer) {
+    const env = {
+      type,
+      app: this.opts.app,
+      v: 1,
+      data,
+      ...id ? { id } : {}
+    };
+    const send = this.opts.iframeWindow.postMessage.bind(
+      this.opts.iframeWindow
+    );
+    send(env, this.opts.embedOrigin, transfer);
+  }
+};
+
+// src/sheets/CasualSheetsIframe.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DEFAULT_STYLE2 = {
+  width: "100%",
+  height: "100%",
+  border: "none",
+  display: "block"
+};
+var CasualSheetsIframe = forwardRef(
+  function CasualSheetsIframe2(props, ref) {
+    const {
+      fileSource,
+      docId,
+      viewMode = "editor",
+      embedBasePath = "/embed/sheets",
+      onSelectionChanged,
+      onSelectionFormatState,
+      onTelemetry,
+      onError,
+      style,
+      className,
+      testId = "casual-sheets-iframe"
+    } = props;
+    const iframeRef = useRef3(null);
+    const transportRef = useRef3(null);
+    const fileSourceRef = useRef3(fileSource);
+    fileSourceRef.current = fileSource;
+    const onLoad = useCallback(async (req) => {
+      try {
+        const { bytes, name, etag } = await fileSourceRef.current.open(req.docId);
+        return {
+          ok: true,
+          bytes,
+          fileName: name,
+          ...etag !== void 0 ? { etag } : {}
+        };
+      } catch (err) {
+        return {
+          ok: false,
+          code: "open_failed",
+          message: err instanceof Error ? err.message : String(err)
+        };
+      }
+    }, []);
+    const onSave = useCallback(
+      async (req) => {
+        try {
+          if (!fileSourceRef.current.save) {
+            return {
+              ok: false,
+              code: "save_unsupported",
+              message: "host fileSource does not implement save"
+            };
+          }
+          const opts = req.baseEtag !== void 0 ? { etag: req.baseEtag } : void 0;
+          const { etag } = await fileSourceRef.current.save(req.docId, req.bytes, opts);
+          return { ok: true, etag };
+        } catch (err) {
+          return {
+            ok: false,
+            code: "save_failed",
+            message: err instanceof Error ? err.message : String(err)
+          };
+        }
+      },
+      []
+    );
+    const onIframeLoad = useCallback(() => {
+      const iframe = iframeRef.current;
+      if (!iframe?.contentWindow) return;
+      transportRef.current?.destroy();
+      const transport = new EmbedHostTransport({
+        app: "sheet",
+        iframeWindow: iframe.contentWindow,
+        embedOrigin: window.location.origin
+      });
+      transport.on({
+        onLoadRequest: onLoad,
+        onSaveRequest: onSave,
+        ...onSelectionChanged ? { onSelectionChanged } : {},
+        ...onSelectionFormatState ? { onSelectionFormatState } : {},
+        ...onTelemetry ? { onTelemetry } : {},
+        ...onError ? { onError } : {},
+        onEditorReady: () => {
+          transport.sendHostHello({ capabilities: ["load", "save"] });
+          transport.sendSetViewMode({ viewMode });
+        }
+      });
+      transportRef.current = transport;
+    }, [
+      onLoad,
+      onSave,
+      onSelectionChanged,
+      onSelectionFormatState,
+      onTelemetry,
+      onError,
+      viewMode
+    ]);
+    useEffect5(() => {
+      transportRef.current?.sendSetViewMode({ viewMode });
+    }, [viewMode]);
+    useEffect5(() => {
+      return () => {
+        transportRef.current?.destroy();
+        transportRef.current = null;
+      };
+    }, []);
+    if (ref) {
+      const apiRef = ref;
+      apiRef.current = {
+        setViewMode: (mode) => transportRef.current?.sendSetViewMode({ viewMode: mode }),
+        iframe: () => iframeRef.current,
+        executeCommand: (command) => transportRef.current?.sendCommandExecute({ command })
+      };
+    }
+    const url = `${embedBasePath}/embed.html?app=sheet&docId=${encodeURIComponent(docId)}&viewMode=${viewMode}`;
+    return /* @__PURE__ */ jsx5(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: url,
+        onLoad: onIframeLoad,
+        title: "Casual Sheets",
+        sandbox: "allow-scripts allow-same-origin allow-downloads allow-modals",
+        style: { ...DEFAULT_STYLE2, ...style },
+        className,
+        "data-testid": testId
+      }
+    );
+  }
+);
+export {
+  CasualSheets,
+  CasualSheetsIframe,
+  DrawnSignaturePad,
+  EmbedTransport,
+  SigningPane,
+  SigningProvider,
+  TypedSignatureField,
+  UploadedSignatureField,
+  createCasualSheetsAPI,
+  createSigningController,
+  isCasualEnvelope,
+  useSigning
+};
+//# sourceMappingURL=index.js.map