@schnsrw/casual-sheets 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js ADDED
@@ -0,0 +1,864 @@
1
+ // src/signing/SigningProvider.tsx
2
+ import { createContext, useContext, useEffect, useMemo, useState } from "react";
3
+
4
+ // src/signing/controller.ts
5
+ function createSigningController(fields, mode) {
6
+ if (fields.length === 0) {
7
+ throw new Error("createSigningController: at least one field required");
8
+ }
9
+ const fieldIds = new Set(fields.map((f) => f.fieldId));
10
+ if (fieldIds.size !== fields.length) {
11
+ throw new Error("createSigningController: duplicate fieldId");
12
+ }
13
+ const signed = {};
14
+ let activeFieldIndex = nextRequiredIndex(fields, signed);
15
+ let isComplete = false;
16
+ let isCancelled = false;
17
+ const listeners = /* @__PURE__ */ new Set();
18
+ function emit() {
19
+ const snap = snapshotInternal();
20
+ for (const l of listeners) l(snap);
21
+ }
22
+ function snapshotInternal() {
23
+ return {
24
+ fields,
25
+ mode,
26
+ signed: { ...signed },
27
+ activeFieldIndex,
28
+ canComplete: allRequiredSigned(fields, signed),
29
+ isComplete,
30
+ isCancelled
31
+ };
32
+ }
33
+ return {
34
+ snapshot: snapshotInternal,
35
+ subscribe(listener) {
36
+ listeners.add(listener);
37
+ return () => {
38
+ listeners.delete(listener);
39
+ };
40
+ },
41
+ signField(payload) {
42
+ if (isComplete || isCancelled) return;
43
+ if (!fieldIds.has(payload.fieldId)) {
44
+ throw new Error(`signField: unknown fieldId ${payload.fieldId}`);
45
+ }
46
+ signed[payload.fieldId] = payload;
47
+ activeFieldIndex = nextRequiredIndex(fields, signed);
48
+ emit();
49
+ },
50
+ focusField(fieldId) {
51
+ if (isComplete || isCancelled) return;
52
+ const idx = fields.findIndex((f) => f.fieldId === fieldId);
53
+ if (idx < 0) return;
54
+ if (mode === "sequential") {
55
+ const next = nextRequiredIndex(fields, signed);
56
+ if (idx !== next) return;
57
+ }
58
+ activeFieldIndex = idx;
59
+ emit();
60
+ },
61
+ complete() {
62
+ if (!allRequiredSigned(fields, signed)) {
63
+ throw new Error("complete: required fields are still unsigned");
64
+ }
65
+ isComplete = true;
66
+ activeFieldIndex = -1;
67
+ emit();
68
+ return snapshotInternal();
69
+ },
70
+ cancel() {
71
+ if (isComplete || isCancelled) return;
72
+ isCancelled = true;
73
+ activeFieldIndex = -1;
74
+ emit();
75
+ }
76
+ };
77
+ }
78
+ function allRequiredSigned(fields, signed) {
79
+ return fields.every((f) => !f.required || signed[f.fieldId] !== void 0);
80
+ }
81
+ function nextRequiredIndex(fields, signed) {
82
+ for (let i = 0; i < fields.length; i++) {
83
+ if (fields[i].required && !signed[fields[i].fieldId]) return i;
84
+ }
85
+ for (let i = 0; i < fields.length; i++) {
86
+ if (!signed[fields[i].fieldId]) return i;
87
+ }
88
+ return -1;
89
+ }
90
+
91
+ // src/signing/SigningProvider.tsx
92
+ import { Fragment, jsx } from "react/jsx-runtime";
93
+ var SigningContext = createContext(null);
94
+ function SigningProvider({ session, documentBytes, children }) {
95
+ if (!session) {
96
+ return /* @__PURE__ */ jsx(Fragment, { children });
97
+ }
98
+ return /* @__PURE__ */ jsx(SigningProviderInner, { session, documentBytes, children });
99
+ }
100
+ function SigningProviderInner({
101
+ session,
102
+ documentBytes,
103
+ children
104
+ }) {
105
+ const controller = useMemo(
106
+ () => createSigningController(session.fields, session.mode),
107
+ // eslint-disable-next-line react-hooks/exhaustive-deps
108
+ [session.fields, session.mode]
109
+ );
110
+ const [snapshot, setSnapshot] = useState(() => controller.snapshot());
111
+ useEffect(() => {
112
+ const unsub = controller.subscribe(setSnapshot);
113
+ return unsub;
114
+ }, [controller]);
115
+ const value = useMemo(
116
+ () => ({
117
+ controller,
118
+ snapshot,
119
+ signField: async (payload) => {
120
+ controller.signField(payload);
121
+ await session.onFieldSigned?.(payload);
122
+ },
123
+ completeIfReady: async () => {
124
+ if (!controller.snapshot().canComplete) return;
125
+ const final = controller.complete();
126
+ const completePayload = {
127
+ fieldIds: final.fields.map((f) => f.fieldId).filter((id) => final.signed[id] !== void 0),
128
+ bytes: documentBytes ?? new ArrayBuffer(0),
129
+ fields: final.signed
130
+ };
131
+ await session.onComplete?.(completePayload);
132
+ },
133
+ cancel: (reason) => {
134
+ controller.cancel();
135
+ session.onCancel?.({ reason });
136
+ },
137
+ baseDocumentBytes: documentBytes
138
+ }),
139
+ [controller, snapshot, session, documentBytes]
140
+ );
141
+ return /* @__PURE__ */ jsx(SigningContext.Provider, { value, children });
142
+ }
143
+ function useSigning() {
144
+ return useContext(SigningContext);
145
+ }
146
+
147
+ // src/signing/SigningPane.tsx
148
+ import { useEffect as useEffect3, useState as useState3 } from "react";
149
+
150
+ // src/signing/captures.tsx
151
+ import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
152
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
153
+ function DrawnSignaturePad({
154
+ onCapture,
155
+ clearLabel = "Clear",
156
+ saveLabel = "Use this signature",
157
+ width = 480,
158
+ height = 160
159
+ }) {
160
+ const canvasRef = useRef(null);
161
+ const drawingRef = useRef(false);
162
+ const [hasInk, setHasInk] = useState2(false);
163
+ useEffect2(() => {
164
+ const canvas = canvasRef.current;
165
+ if (!canvas) return;
166
+ const ctx = canvas.getContext("2d");
167
+ if (!ctx) return;
168
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
169
+ ctx.strokeStyle = "#0f172a";
170
+ ctx.lineWidth = 2;
171
+ ctx.lineCap = "round";
172
+ ctx.lineJoin = "round";
173
+ }, []);
174
+ const start = (e) => {
175
+ const canvas = canvasRef.current;
176
+ if (!canvas) return;
177
+ const ctx = canvas.getContext("2d");
178
+ if (!ctx) return;
179
+ const { x, y } = pointerPos(e, canvas);
180
+ ctx.beginPath();
181
+ ctx.moveTo(x, y);
182
+ drawingRef.current = true;
183
+ canvas.setPointerCapture(e.pointerId);
184
+ };
185
+ const move = (e) => {
186
+ if (!drawingRef.current) return;
187
+ const canvas = canvasRef.current;
188
+ if (!canvas) return;
189
+ const ctx = canvas.getContext("2d");
190
+ if (!ctx) return;
191
+ const { x, y } = pointerPos(e, canvas);
192
+ ctx.lineTo(x, y);
193
+ ctx.stroke();
194
+ if (!hasInk) setHasInk(true);
195
+ };
196
+ const end = (e) => {
197
+ drawingRef.current = false;
198
+ canvasRef.current?.releasePointerCapture(e.pointerId);
199
+ };
200
+ const clear = () => {
201
+ const canvas = canvasRef.current;
202
+ if (!canvas) return;
203
+ const ctx = canvas.getContext("2d");
204
+ if (!ctx) return;
205
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
206
+ setHasInk(false);
207
+ };
208
+ const save = async () => {
209
+ const canvas = canvasRef.current;
210
+ if (!canvas || !hasInk) return;
211
+ const blob = await new Promise((resolve) => {
212
+ canvas.toBlob((b) => resolve(b), "image/png");
213
+ });
214
+ if (!blob) return;
215
+ const bytes = await blob.arrayBuffer();
216
+ onCapture({ bytes, mime: "image/png" });
217
+ clear();
218
+ };
219
+ return /* @__PURE__ */ jsxs("div", { style: padWrapStyle, "data-testid": "drawn-signature-pad", children: [
220
+ /* @__PURE__ */ jsx2(
221
+ "canvas",
222
+ {
223
+ ref: canvasRef,
224
+ width,
225
+ height,
226
+ style: padCanvasStyle(width, height),
227
+ onPointerDown: start,
228
+ onPointerMove: move,
229
+ onPointerUp: end,
230
+ onPointerLeave: end,
231
+ "data-testid": "drawn-signature-canvas"
232
+ }
233
+ ),
234
+ /* @__PURE__ */ jsxs("div", { style: padActionsStyle, children: [
235
+ /* @__PURE__ */ jsx2("button", { type: "button", onClick: clear, style: secondaryBtnStyle(false), children: clearLabel }),
236
+ /* @__PURE__ */ jsx2(
237
+ "button",
238
+ {
239
+ type: "button",
240
+ onClick: save,
241
+ disabled: !hasInk,
242
+ style: primaryBtnStyle(!hasInk),
243
+ "data-testid": "drawn-signature-save",
244
+ children: saveLabel
245
+ }
246
+ )
247
+ ] })
248
+ ] });
249
+ }
250
+ function pointerPos(e, canvas) {
251
+ const rect = canvas.getBoundingClientRect();
252
+ const scaleX = canvas.width / rect.width;
253
+ const scaleY = canvas.height / rect.height;
254
+ return {
255
+ x: (e.clientX - rect.left) * scaleX,
256
+ y: (e.clientY - rect.top) * scaleY
257
+ };
258
+ }
259
+ function TypedSignatureField({
260
+ onCapture,
261
+ defaultText = "",
262
+ saveLabel = "Use this signature"
263
+ }) {
264
+ const [value, setValue] = useState2(defaultText);
265
+ const save = () => {
266
+ const trimmed = value.trim();
267
+ if (!trimmed) return;
268
+ const bytes = new TextEncoder().encode(trimmed).buffer;
269
+ onCapture({ bytes, mime: "text/plain" });
270
+ setValue("");
271
+ };
272
+ return /* @__PURE__ */ jsxs("div", { style: padWrapStyle, "data-testid": "typed-signature-field", children: [
273
+ /* @__PURE__ */ jsx2(
274
+ "input",
275
+ {
276
+ type: "text",
277
+ value,
278
+ onChange: (e) => setValue(e.target.value),
279
+ placeholder: "Type your full name",
280
+ style: typedInputStyle,
281
+ "data-testid": "typed-signature-input",
282
+ autoFocus: true
283
+ }
284
+ ),
285
+ /* @__PURE__ */ jsx2("div", { style: padActionsStyle, children: /* @__PURE__ */ jsx2(
286
+ "button",
287
+ {
288
+ type: "button",
289
+ onClick: save,
290
+ disabled: !value.trim(),
291
+ style: primaryBtnStyle(!value.trim()),
292
+ "data-testid": "typed-signature-save",
293
+ children: saveLabel
294
+ }
295
+ ) })
296
+ ] });
297
+ }
298
+ function UploadedSignatureField({
299
+ onCapture,
300
+ accept = "image/png,image/jpeg,image/svg+xml"
301
+ }) {
302
+ const inputRef = useRef(null);
303
+ const [fileName, setFileName] = useState2(null);
304
+ const onChange = async (e) => {
305
+ const file = e.target.files?.[0];
306
+ if (!file) return;
307
+ const bytes = await file.arrayBuffer();
308
+ onCapture({ bytes, mime: file.type || "application/octet-stream" });
309
+ setFileName(file.name);
310
+ if (inputRef.current) inputRef.current.value = "";
311
+ };
312
+ return /* @__PURE__ */ jsx2("div", { style: padWrapStyle, "data-testid": "uploaded-signature-field", children: /* @__PURE__ */ jsxs("label", { style: uploadLabelStyle, children: [
313
+ /* @__PURE__ */ jsx2(
314
+ "input",
315
+ {
316
+ ref: inputRef,
317
+ type: "file",
318
+ accept,
319
+ onChange,
320
+ style: { display: "none" },
321
+ "data-testid": "uploaded-signature-input"
322
+ }
323
+ ),
324
+ /* @__PURE__ */ jsx2("span", { children: fileName ?? "Choose image\u2026" })
325
+ ] }) });
326
+ }
327
+ var padWrapStyle = {
328
+ display: "flex",
329
+ flexDirection: "column",
330
+ gap: 10
331
+ };
332
+ var padCanvasStyle = (w, h) => ({
333
+ width: w,
334
+ height: h,
335
+ maxWidth: "100%",
336
+ border: "1px dashed var(--doc-border, #cbd5e1)",
337
+ borderRadius: 8,
338
+ background: "var(--doc-surface, #fff)",
339
+ cursor: "crosshair",
340
+ touchAction: "none"
341
+ });
342
+ var padActionsStyle = {
343
+ display: "flex",
344
+ justifyContent: "flex-end",
345
+ gap: 8
346
+ };
347
+ var typedInputStyle = {
348
+ width: "100%",
349
+ padding: "10px 12px",
350
+ border: "1px solid var(--doc-border, #cbd5e1)",
351
+ borderRadius: 6,
352
+ fontSize: 18,
353
+ fontFamily: '"Caveat", "Dancing Script", "Brush Script MT", cursive',
354
+ background: "var(--doc-surface, #fff)",
355
+ color: "var(--doc-text, #0f172a)"
356
+ };
357
+ var uploadLabelStyle = {
358
+ display: "inline-flex",
359
+ padding: "8px 14px",
360
+ border: "1px dashed var(--doc-border, #cbd5e1)",
361
+ borderRadius: 6,
362
+ background: "var(--doc-surface, #fff)",
363
+ color: "var(--doc-text, #0f172a)",
364
+ fontSize: 13,
365
+ cursor: "pointer",
366
+ alignSelf: "flex-start"
367
+ };
368
+ function primaryBtnStyle(disabled) {
369
+ return {
370
+ padding: "8px 16px",
371
+ borderRadius: 6,
372
+ border: "1px solid transparent",
373
+ background: disabled ? "var(--doc-border, #cbd5e1)" : "var(--doc-accent, #2563eb)",
374
+ color: disabled ? "var(--doc-text-muted, #64748b)" : "#fff",
375
+ fontSize: 13,
376
+ fontWeight: 600,
377
+ cursor: disabled ? "not-allowed" : "pointer",
378
+ fontFamily: "inherit"
379
+ };
380
+ }
381
+ function secondaryBtnStyle(disabled) {
382
+ return {
383
+ padding: "8px 16px",
384
+ borderRadius: 6,
385
+ border: "1px solid var(--doc-border, #cbd5e1)",
386
+ background: "transparent",
387
+ color: "var(--doc-text, #0f172a)",
388
+ fontSize: 13,
389
+ fontWeight: 500,
390
+ cursor: disabled ? "not-allowed" : "pointer",
391
+ fontFamily: "inherit"
392
+ };
393
+ }
394
+
395
+ // src/signing/SigningPane.tsx
396
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
397
+ function SigningPane({ banner, testId = "signing-pane" }) {
398
+ const ctx = useSigning();
399
+ if (!ctx) return null;
400
+ const { snapshot, signField, completeIfReady, cancel } = ctx;
401
+ if (snapshot.isComplete || snapshot.isCancelled) return null;
402
+ const active = snapshot.activeFieldIndex >= 0 ? snapshot.fields[snapshot.activeFieldIndex] : null;
403
+ return /* @__PURE__ */ jsxs2("aside", { style: paneStyle, role: "region", "aria-label": "Signing pane", "data-testid": testId, children: [
404
+ banner && /* @__PURE__ */ jsx3("div", { style: bannerStyle, "data-testid": `${testId}-banner`, children: banner }),
405
+ /* @__PURE__ */ jsx3("div", { style: listStyle, "data-testid": `${testId}-fields`, children: snapshot.fields.map((f, i) => {
406
+ const isSigned = !!snapshot.signed[f.fieldId];
407
+ const isActive = i === snapshot.activeFieldIndex;
408
+ return /* @__PURE__ */ jsxs2(
409
+ "div",
410
+ {
411
+ style: listItemStyle(isActive, isSigned),
412
+ "data-testid": `${testId}-field-${f.fieldId}`,
413
+ "data-state": isSigned ? "signed" : isActive ? "active" : "pending",
414
+ children: [
415
+ /* @__PURE__ */ jsx3("span", { style: listIconStyle(isSigned), "aria-hidden": "true", children: isSigned ? "\u2713" : i + 1 }),
416
+ /* @__PURE__ */ jsx3("span", { style: listLabelStyle, children: f.label }),
417
+ !f.required && /* @__PURE__ */ jsx3("span", { style: optionalChipStyle, "aria-label": "Optional", children: "optional" })
418
+ ]
419
+ },
420
+ f.fieldId
421
+ );
422
+ }) }),
423
+ active && /* @__PURE__ */ jsx3(
424
+ ActiveFieldEditor,
425
+ {
426
+ field: active,
427
+ testId,
428
+ onCapture: async (cap, method) => {
429
+ const payload = {
430
+ fieldId: active.fieldId,
431
+ method,
432
+ bytes: cap.bytes,
433
+ mime: cap.mime,
434
+ signedAt: (/* @__PURE__ */ new Date()).toISOString()
435
+ };
436
+ await signField(payload);
437
+ }
438
+ }
439
+ ),
440
+ !active && snapshot.canComplete && /* @__PURE__ */ jsx3("div", { style: completeBlockStyle, "data-testid": `${testId}-complete-block`, children: "All required signatures collected. Ready to finalise." }),
441
+ /* @__PURE__ */ jsxs2("footer", { style: footerStyle, children: [
442
+ /* @__PURE__ */ jsx3(
443
+ "button",
444
+ {
445
+ type: "button",
446
+ onClick: () => cancel("signer_cancelled"),
447
+ style: secondaryBtnStyle2(),
448
+ "data-testid": `${testId}-cancel`,
449
+ children: "Cancel"
450
+ }
451
+ ),
452
+ /* @__PURE__ */ jsx3(
453
+ "button",
454
+ {
455
+ type: "button",
456
+ onClick: () => void completeIfReady(),
457
+ disabled: !snapshot.canComplete,
458
+ style: primaryBtnStyle2(!snapshot.canComplete),
459
+ "data-testid": `${testId}-complete`,
460
+ children: "Complete"
461
+ }
462
+ )
463
+ ] })
464
+ ] });
465
+ }
466
+ function ActiveFieldEditor({
467
+ field,
468
+ testId,
469
+ onCapture
470
+ }) {
471
+ const [method, setMethod] = useState3(field.methods[0]);
472
+ useEffect3(() => {
473
+ setMethod(field.methods[0]);
474
+ }, [field]);
475
+ return /* @__PURE__ */ jsxs2("div", { style: editorStyle, "data-testid": `${testId}-editor`, children: [
476
+ /* @__PURE__ */ jsxs2("div", { style: editorHeaderStyle, children: [
477
+ /* @__PURE__ */ jsx3("div", { style: editorLabelStyle, children: field.label }),
478
+ field.signer?.name && /* @__PURE__ */ jsx3("div", { style: editorSignerStyle, children: field.signer.name })
479
+ ] }),
480
+ field.methods.length > 1 && /* @__PURE__ */ jsx3("div", { style: methodTabsStyle, role: "tablist", "data-testid": `${testId}-methods`, children: field.methods.map((m) => /* @__PURE__ */ jsx3(
481
+ "button",
482
+ {
483
+ type: "button",
484
+ role: "tab",
485
+ "aria-selected": method === m,
486
+ onClick: () => setMethod(m),
487
+ style: methodTabStyle(method === m),
488
+ "data-testid": `${testId}-method-${m}`,
489
+ children: methodLabel(m)
490
+ },
491
+ m
492
+ )) }),
493
+ /* @__PURE__ */ jsxs2("div", { style: captureWrapStyle, children: [
494
+ method === "drawn" && /* @__PURE__ */ jsx3(DrawnSignaturePad, { onCapture: (c) => onCapture(c, "drawn") }),
495
+ method === "typed" && /* @__PURE__ */ jsx3(
496
+ TypedSignatureField,
497
+ {
498
+ defaultText: field.signer?.name ?? "",
499
+ onCapture: (c) => onCapture(c, "typed")
500
+ }
501
+ ),
502
+ method === "uploaded" && /* @__PURE__ */ jsx3(UploadedSignatureField, { onCapture: (c) => onCapture(c, "uploaded") })
503
+ ] })
504
+ ] });
505
+ }
506
+ function methodLabel(m) {
507
+ switch (m) {
508
+ case "drawn":
509
+ return "Draw";
510
+ case "typed":
511
+ return "Type";
512
+ case "uploaded":
513
+ return "Upload";
514
+ }
515
+ }
516
+ var paneStyle = {
517
+ position: "fixed",
518
+ top: 16,
519
+ right: 16,
520
+ bottom: 16,
521
+ width: 360,
522
+ maxWidth: "100vw",
523
+ display: "flex",
524
+ flexDirection: "column",
525
+ gap: 14,
526
+ padding: 16,
527
+ background: "var(--doc-surface, #fff)",
528
+ border: "1px solid var(--doc-border, #cbd5e1)",
529
+ borderRadius: 12,
530
+ boxShadow: "0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(15, 23, 42, 0.12)",
531
+ fontFamily: "inherit",
532
+ zIndex: 9e3
533
+ };
534
+ var bannerStyle = {
535
+ padding: "8px 10px",
536
+ background: "var(--doc-surface-2, #f1f5f9)",
537
+ border: "1px solid var(--doc-border-light, #e2e8f0)",
538
+ borderRadius: 6,
539
+ fontSize: 12,
540
+ color: "var(--doc-text-muted, #475569)"
541
+ };
542
+ var listStyle = {
543
+ display: "flex",
544
+ flexDirection: "column",
545
+ gap: 4
546
+ };
547
+ function listItemStyle(active, signed) {
548
+ return {
549
+ display: "flex",
550
+ alignItems: "center",
551
+ gap: 10,
552
+ padding: "8px 10px",
553
+ borderRadius: 6,
554
+ background: active ? "var(--doc-surface-2, #f1f5f9)" : signed ? "transparent" : "transparent",
555
+ border: active ? "1px solid var(--doc-border, #cbd5e1)" : "1px solid transparent",
556
+ opacity: signed && !active ? 0.7 : 1
557
+ };
558
+ }
559
+ function listIconStyle(signed) {
560
+ return {
561
+ display: "inline-flex",
562
+ alignItems: "center",
563
+ justifyContent: "center",
564
+ width: 22,
565
+ height: 22,
566
+ borderRadius: "50%",
567
+ background: signed ? "var(--doc-accent, #2563eb)" : "var(--doc-surface-2, #f1f5f9)",
568
+ color: signed ? "#fff" : "var(--doc-text-muted, #475569)",
569
+ fontSize: 12,
570
+ fontWeight: 600,
571
+ flexShrink: 0
572
+ };
573
+ }
574
+ var listLabelStyle = {
575
+ flex: 1,
576
+ fontSize: 13,
577
+ color: "var(--doc-text, #0f172a)",
578
+ fontWeight: 500
579
+ };
580
+ var optionalChipStyle = {
581
+ fontSize: 11,
582
+ color: "var(--doc-text-muted, #64748b)",
583
+ padding: "2px 6px",
584
+ background: "var(--doc-surface-2, #f1f5f9)",
585
+ borderRadius: 4
586
+ };
587
+ var editorStyle = {
588
+ display: "flex",
589
+ flexDirection: "column",
590
+ gap: 12
591
+ };
592
+ var editorHeaderStyle = {
593
+ display: "flex",
594
+ flexDirection: "column",
595
+ gap: 2
596
+ };
597
+ var editorLabelStyle = {
598
+ fontSize: 13,
599
+ fontWeight: 600,
600
+ color: "var(--doc-text, #0f172a)"
601
+ };
602
+ var editorSignerStyle = {
603
+ fontSize: 12,
604
+ color: "var(--doc-text-muted, #64748b)"
605
+ };
606
+ var methodTabsStyle = {
607
+ display: "flex",
608
+ gap: 4,
609
+ padding: 2,
610
+ background: "var(--doc-surface-2, #f1f5f9)",
611
+ borderRadius: 6
612
+ };
613
+ function methodTabStyle(selected) {
614
+ return {
615
+ flex: 1,
616
+ padding: "6px 10px",
617
+ background: selected ? "var(--doc-surface, #fff)" : "transparent",
618
+ border: "none",
619
+ borderRadius: 4,
620
+ fontSize: 12,
621
+ fontWeight: 500,
622
+ color: selected ? "var(--doc-text, #0f172a)" : "var(--doc-text-muted, #475569)",
623
+ cursor: "pointer",
624
+ fontFamily: "inherit"
625
+ };
626
+ }
627
+ var captureWrapStyle = {
628
+ display: "flex",
629
+ flexDirection: "column",
630
+ gap: 8
631
+ };
632
+ var completeBlockStyle = {
633
+ padding: "10px 12px",
634
+ background: "rgba(34, 197, 94, 0.08)",
635
+ border: "1px solid rgba(34, 197, 94, 0.28)",
636
+ borderRadius: 6,
637
+ fontSize: 12,
638
+ color: "rgb(20, 83, 45)"
639
+ };
640
+ var footerStyle = {
641
+ display: "flex",
642
+ justifyContent: "flex-end",
643
+ gap: 8,
644
+ marginTop: "auto",
645
+ paddingTop: 12,
646
+ borderTop: "1px solid var(--doc-border-light, #e2e8f0)"
647
+ };
648
+ function primaryBtnStyle2(disabled) {
649
+ return {
650
+ padding: "8px 16px",
651
+ borderRadius: 6,
652
+ border: "1px solid transparent",
653
+ background: disabled ? "var(--doc-border, #cbd5e1)" : "var(--doc-accent, #2563eb)",
654
+ color: disabled ? "var(--doc-text-muted, #64748b)" : "#fff",
655
+ fontSize: 13,
656
+ fontWeight: 600,
657
+ cursor: disabled ? "not-allowed" : "pointer",
658
+ fontFamily: "inherit"
659
+ };
660
+ }
661
+ function secondaryBtnStyle2() {
662
+ return {
663
+ padding: "8px 16px",
664
+ borderRadius: 6,
665
+ border: "1px solid var(--doc-border, #cbd5e1)",
666
+ background: "transparent",
667
+ color: "var(--doc-text, #0f172a)",
668
+ fontSize: 13,
669
+ fontWeight: 500,
670
+ cursor: "pointer",
671
+ fontFamily: "inherit"
672
+ };
673
+ }
674
+
675
+ // src/embed/protocol.ts
676
+ function isCasualEnvelope(value) {
677
+ if (!value || typeof value !== "object") return false;
678
+ const v = value;
679
+ return typeof v.type === "string" && v.type.startsWith("casual.") && (v.app === "docs" || v.app === "sheet") && v.v === 1 && "data" in v;
680
+ }
681
+
682
+ // src/embed/EmbedTransport.ts
683
+ var EmbedTransport = class {
684
+ opts;
685
+ handlers = {};
686
+ destroyed = false;
687
+ pendingRequests = /* @__PURE__ */ new Map();
688
+ constructor(opts) {
689
+ this.opts = {
690
+ ...opts,
691
+ parentWindow: opts.parentWindow ?? (typeof window !== "undefined" ? window.parent : { postMessage: () => void 0 }),
692
+ hostWindow: opts.hostWindow ?? (typeof window !== "undefined" ? window : {
693
+ addEventListener: () => void 0,
694
+ removeEventListener: () => void 0
695
+ })
696
+ };
697
+ this.boundMessage = this.boundMessage.bind(this);
698
+ this.opts.hostWindow.addEventListener("message", this.boundMessage);
699
+ }
700
+ /** Replaces the handler set. Idempotent — call multiple times. */
701
+ on(handlers) {
702
+ this.handlers = { ...this.handlers, ...handlers };
703
+ }
704
+ /** Editor → Host: announce ourselves. Call once after handlers are wired. */
705
+ sendHello() {
706
+ const data = {
707
+ capabilities: this.opts.capabilities,
708
+ version: this.opts.version,
709
+ commit: this.opts.commit
710
+ };
711
+ this.post("casual.hello", data);
712
+ }
713
+ /** Editor → Host: editor is ready to receive commands. */
714
+ sendReady() {
715
+ this.post("casual.ready", {});
716
+ }
717
+ /** Editor → Host: ask the host to supply document bytes for `docId`. */
718
+ async requestLoad(docId, timeoutMs = 3e4) {
719
+ return this.request(
720
+ "casual.load.request",
721
+ { docId },
722
+ timeoutMs
723
+ );
724
+ }
725
+ /** Editor → Host: ask the host to persist `bytes`. */
726
+ async requestSave(req, timeoutMs = 3e4) {
727
+ return this.request("casual.save.request", req, timeoutMs, [req.bytes]);
728
+ }
729
+ /** Editor → Host: selection moved. Fire-and-forget. */
730
+ sendSelectionChanged(data) {
731
+ this.post("casual.selection.changed", data);
732
+ }
733
+ /** Editor → Host: a noteworthy event. */
734
+ sendTelemetry(data) {
735
+ this.post("casual.telemetry.event", data);
736
+ }
737
+ /** Editor → Host: per-field progress during a signing session. */
738
+ sendSignatureFieldSigned(data) {
739
+ this.post("casual.signature.field.signed", data, [data.bytes]);
740
+ }
741
+ /** Editor → Host: signing session is finished. */
742
+ sendSignatureComplete(data) {
743
+ this.post("casual.signature.complete", data, [data.bytes]);
744
+ }
745
+ /** Editor → Host: editor-side cancel of a signing session. */
746
+ sendSignatureCancel(reason) {
747
+ this.post("casual.signature.cancel", { reason });
748
+ }
749
+ /** Tear down listeners. Idempotent. */
750
+ destroy() {
751
+ if (this.destroyed) return;
752
+ this.opts.hostWindow.removeEventListener("message", this.boundMessage);
753
+ this.pendingRequests.clear();
754
+ this.destroyed = true;
755
+ }
756
+ // ---------------------------------------------------------------
757
+ // Internals
758
+ // ---------------------------------------------------------------
759
+ boundMessage(ev) {
760
+ const msg = ev;
761
+ if (msg.origin && msg.origin !== this.opts.hostOrigin) return;
762
+ if (!isCasualEnvelope(msg.data)) return;
763
+ void this.dispatch(msg.data);
764
+ }
765
+ async dispatch(env) {
766
+ if (env.id && this.pendingRequests.has(env.id)) {
767
+ const resolve = this.pendingRequests.get(env.id);
768
+ this.pendingRequests.delete(env.id);
769
+ resolve(env);
770
+ return;
771
+ }
772
+ switch (env.type) {
773
+ case "casual.hello":
774
+ await this.handlers.onHostHello?.(env.data);
775
+ this.sendReady();
776
+ return;
777
+ case "casual.command.setReadOnly":
778
+ await this.handlers.onCommandSetReadOnly?.(env.data);
779
+ return;
780
+ case "casual.command.setTheme":
781
+ await this.handlers.onCommandSetTheme?.(env.data);
782
+ return;
783
+ case "casual.command.setLocale":
784
+ await this.handlers.onCommandSetLocale?.(env.data);
785
+ return;
786
+ case "casual.command.focus":
787
+ await this.handlers.onCommandFocus?.();
788
+ return;
789
+ case "casual.command.save":
790
+ await this.handlers.onCommandSave?.();
791
+ return;
792
+ case "casual.command.load":
793
+ await this.handlers.onCommandLoad?.();
794
+ return;
795
+ case "casual.signature.request": {
796
+ const ack = await this.handlers.onSignatureRequest?.(
797
+ env.data
798
+ ) ?? {
799
+ ok: false,
800
+ code: "unhandled"
801
+ };
802
+ if (env.id) {
803
+ this.postReply(env.id, "casual.signature.request.ack", ack);
804
+ }
805
+ return;
806
+ }
807
+ case "casual.signature.cancel":
808
+ await this.handlers.onSignatureCancel?.(env.data);
809
+ return;
810
+ default:
811
+ return;
812
+ }
813
+ }
814
+ post(type, data, transfer) {
815
+ const env = { type, app: this.opts.app, v: 1, data };
816
+ try {
817
+ this.opts.parentWindow.postMessage(env, this.opts.hostOrigin, transfer);
818
+ } catch {
819
+ }
820
+ }
821
+ postReply(id, type, data) {
822
+ const env = { type, app: this.opts.app, id, v: 1, data };
823
+ try {
824
+ this.opts.parentWindow.postMessage(env, this.opts.hostOrigin);
825
+ } catch {
826
+ }
827
+ }
828
+ async request(type, data, timeoutMs, transfer) {
829
+ const id = newRequestId();
830
+ return new Promise((resolve, reject) => {
831
+ const timer = timeoutMs > 0 ? setTimeout(() => {
832
+ this.pendingRequests.delete(id);
833
+ reject(new Error(`Embed request ${type} timed out after ${timeoutMs}ms`));
834
+ }, timeoutMs) : null;
835
+ this.pendingRequests.set(id, (env2) => {
836
+ if (timer) clearTimeout(timer);
837
+ resolve(env2.data);
838
+ });
839
+ const env = { type, app: this.opts.app, id, v: 1, data };
840
+ try {
841
+ this.opts.parentWindow.postMessage(env, this.opts.hostOrigin, transfer);
842
+ } catch (err) {
843
+ if (timer) clearTimeout(timer);
844
+ this.pendingRequests.delete(id);
845
+ reject(err);
846
+ }
847
+ });
848
+ }
849
+ };
850
+ function newRequestId() {
851
+ return Math.random().toString(16).slice(2, 10);
852
+ }
853
+ export {
854
+ DrawnSignaturePad,
855
+ EmbedTransport,
856
+ SigningPane,
857
+ SigningProvider,
858
+ TypedSignatureField,
859
+ UploadedSignatureField,
860
+ createSigningController,
861
+ isCasualEnvelope,
862
+ useSigning
863
+ };
864
+ //# sourceMappingURL=index.js.map