Repository navigation
Expand file tree
/
Copy pathpdf-extractor.html
More file actions
3021 lines (2886 loc) · 167 KB
/
Copy pathpdf-extractor.html
File metadata and controls
3021 lines (2886 loc) · 167 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Extractor: Spatial Text & JSON with Bounding Boxes | Secutils.dev</title>
<meta name="description" content="Free in-browser PDF extractor with grid-projected text and structured JSON (bounding boxes, per-page items). Optional OCR for scanned PDFs. No uploads, no signup.">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://{{TOOLS_HOST}}/pdf">
<meta name="su-tool-path" content="/pdf">
<meta name="su-tool-name" content="PDF Extractor">
<meta name="su-tool-description" content="Extract spatial text and structured JSON (bounding boxes, per-page items) from PDFs in your browser. Optional OCR for scanned pages. Powered by liteparse, no uploads, no signup.">
<meta name="su-tool-promote" content="true">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Secutils.dev">
<meta property="og:title" content="PDF Extractor: Spatial Text & JSON with Bounding Boxes">
<meta property="og:description" content="Free in-browser PDF extractor. Grid-projected text or structured JSON with bounding boxes. Optional OCR. No uploads.">
<meta property="og:url" content="https://{{TOOLS_HOST}}/pdf">
<meta property="og:image" content="https://secutils.dev/docs/img/og/og-pdf.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="PDF Extractor on Secutils.dev: spatial text and JSON with bounding boxes, in the browser.">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="PDF Extractor: Spatial Text & JSON with Bounding Boxes">
<meta name="twitter:description" content="Free in-browser PDF extractor. Grid-projected text or structured JSON with bounding boxes. Optional OCR.">
<meta name="twitter:image" content="https://secutils.dev/docs/img/og/og-pdf.png">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"PDF Extractor","url":"https://{{TOOLS_HOST}}/pdf","applicationCategory":"DeveloperApplication","operatingSystem":"Any","browserRequirements":"Requires JavaScript","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"publisher":{"@type":"Organization","name":"Secutils.dev","url":"https://secutils.dev"},"sameAs":"https://github.com/secutils-dev/secutils/blob/main/dev/tools/pdf-extractor.html","description":"Free in-browser PDF extractor with grid-projected text and structured JSON output. Includes per-page items, bounding boxes, and optional Tesseract.js OCR for scanned PDFs. Powered by liteparse, runs entirely client-side."}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Roboto+Mono:wght@400..700&display=swap" rel="stylesheet">
<!-- Privacy-friendly analytics by Plausible -->
<script defer src="https://tools.secutils.dev/js/script.js" fetchpriority="low"></script>
<script>
window.plausible = window.plausible || function () { (plausible.q = plausible.q || []).push(arguments) };
plausible.init = plausible.init || function (i) { plausible.o = i || {} };
plausible.init();
</script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root, [data-theme="dark"] {
--bg: #141519; --surface: #1d1e24; --surface-hover: #2c2d33;
--border: #343741; --text: #dfe5ef; --text-muted: #98a2b3;
--primary: #fed047; --primary-hover: #fdc615;
--primary-text: #642340;
--primary-glow: rgba(254,208,71,0.10);
--accent: #642340;
--badge-bg: #2B394F; --badge-text: #98A8C3;
--radius: 12px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mono: 'Roboto Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
--code-bg: #16171c;
--danger: #e07b7b;
--success: #7bcf9f;
}
[data-theme="light"] {
--bg: #f5f7fa; --surface: #ffffff; --surface-hover: #f1f3f5;
--border: #d3dae6; --text: #343741; --text-muted: #69707d;
--primary: #fed047; --primary-hover: #fdc615;
--primary-text: #642340;
--primary-glow: rgba(254,208,71,0.15);
--accent: #642340;
--badge-bg: #E3E8F2; --badge-text: #505F79;
--code-bg: #f6f8fa;
--danger: #d04848;
--success: #2e8855;
}
/* `min-height: 100vh` is a floor, not a cap -- without a hard upper bound,
a column-flex container grows with its children, which means a tall JSON
<pre> deep inside .output-panel makes <body> grow, <main> follow (its
`flex: 1` happily fills whatever body became), and the inner
`overflow: hidden` chain never gets to clip anything. The desktop layout
wants a strict viewport-sized chrome with internal scroll in the result
pane, so cap body's height at 100vh in the wide breakpoint (see media
query below). Mobile (≤768px) keeps the default scroll-the-page behaviour
because the single-column stack puts the result pane below the dropzone
and the user is expected to scroll. */
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; transition: background .25s, color .25s; }
header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 48px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; transition: background .25s, border-color .25s; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-svg { flex-shrink: 0; }
.logo-svg .logo-text-fill { fill: var(--text); }
.logo-badge { display: inline-flex; align-items: center; padding: 4px 16px; border-radius: 4px; border: none; background: var(--badge-bg); color: var(--badge-text); font-size: 12px; font-weight: 450; line-height: 16px; white-space: nowrap; }
.header-right { display: flex; gap: 8px; align-items: center; }
/* `height` is load-bearing: without an explicit pixel value, the yellow
`.btn-primary` variant renders 1-2 px taller than the outlined regular
variant because the heavier font-weight expands the line box's strut
metrics. Pinning `height` makes both weights resolve to the same outer
size so the primary buttons line up flush with the outlined regular
ones in the same row. See dev/tools/guides/chrome.md -> "Buttons" / "Control
heights (load-bearing)". With box-sizing: border-box (global) padding +
border sit inside this height; `align-items: center` centres the label.
`font-weight: 500` on .btn-primary (down from the obvious-looking 600)
AND `border-color: var(--primary-text)` (the dark plum used for the
label, instead of matching the fill) together collapse the perceptual
size bump that a saturated yellow fill + bold label inflicts on the
eye -- two 24 px boxes look the same size when type weights are 400
vs 500 and both have a visible 1 px edge, but the 400-vs-600 +
edgeless-fill pairing reads as "Parse is bigger than Options" even
though both boxes are exactly the same pixel height. See dev/tools/guides/chrome.md
-> "Buttons" for the full rationale (including why --primary-text
is the only palette token with enough contrast against yellow); do
not revert either change in isolation. */
.btn { padding: 7px 14px; height: 29px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 13px/1 var(--font); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-muted); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--primary); border-color: var(--primary-text); color: var(--primary-text); font-weight: 500; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-sm { padding: 5px 10px; height: 24px; font-size: 12px; }
.theme-toggle { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all .2s; }
.theme-toggle:hover { background: var(--surface-hover); color: var(--text); }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.skill-link { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text-muted); font: 12px var(--font, system-ui), sans-serif; text-decoration: none; transition: all .15s; cursor: pointer; }
.skill-link:hover { color: var(--text); border-color: var(--text-muted); background: var(--surface-hover); }
.skill-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
.su-more-tools { margin: 8px 0 0; padding: 12px 18px; text-align: center; border: 1px solid rgba(254, 208, 71, 0.35); border-radius: 12px; background: rgba(254, 208, 71, 0.06); font: 13px/1.55 var(--font); color: var(--text); transition: border-color .25s, background-color .25s, color .25s; }
.su-more-tools p { margin: 0; }
.su-more-tools a { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.su-more-tools a:hover { color: var(--primary-hover); text-decoration: underline; }
@media (max-width: 600px) { .su-more-tools { padding: 12px 14px; } .su-more-tools a { white-space: normal; } }
.su-noscript { max-width: 720px; margin: 24px auto; padding: 16px; border: 1px solid var(--border); border-radius: 8px; font: 14px/1.5 var(--font, system-ui), sans-serif; background: var(--surface); color: var(--text); }
/* Two-pane layout */
/* `min-height: 0` is critical: <main> is a column-flex child of <body>, so its
default `min-height: auto` resolves to its min-content height -- i.e. the
full height of the tallest descendant, including a many-thousand-px JSON
<pre>. That defeats the inner `overflow: hidden` chain because <main>
itself silently grows past the viewport and drags <body> with it (body
uses `min-height: 100vh`, not a hard cap). With `min-height: 0`, <main>
strictly takes its `flex: 1` share of body's 100vh and the inner panels'
own scroll containers (.output-scroll, .output-textarea) clip + scroll. */
main { flex: 1; min-height: 0; padding: 24px 16px; display: flex; flex-direction: column; overflow: hidden; }
/* `minmax(0, 1fr)` lets each grid track shrink below its content's min-content
width. Without this, a long line in the JSON pane (white-space: pre on the
<pre>) would expand the right column past 1fr and squeeze the dropzone
column down to 0 width, hiding the entire left pane. */
/* `grid-template-rows: minmax(0, 1fr)` mirrors the column trick: without
it, the implicit single row defaults to `auto` and sizes to the tallest
cell's min-content -- so a tall JSON <pre> would still blow the row
open even after we constrain columns and the outer chain. With this,
the row strictly takes its `flex: 1` share of <main> and the inner
.output-scroll handles its own overflow. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; flex: 1; min-height: 0; }
/* `min-width: 0` opts panels (flex containers) out of the default
`min-content` floor so the inner scroll container (.output-scroll) can
actually clip + scroll wide JSON instead of forcing the grid track wider. */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.panel-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; gap: 8px; height: 38px; box-sizing: content-box; flex-shrink: 0; }
.panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-label { font-size: 13px; font-weight: 600; color: var(--text); }
.link-btn { border: none; background: none; font: 12px var(--font); color: var(--text-muted); cursor: pointer; padding: 2px 4px; transition: color .15s; }
.link-btn:hover { color: var(--text); }
.splitter { cursor: col-resize; background: transparent; position: relative; z-index: 1; }
.splitter::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); transition: width .15s, background .15s; transform: translateX(-50%); }
.splitter:hover::after, .splitter.active::after { width: 3px; background: var(--primary); border-radius: 2px; }
/* Drop zone (left pane) */
.dropzone { flex: 1; min-height: 300px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; transition: border-color .15s, background .25s; cursor: pointer; }
.dropzone.dragover, .dropzone:hover { border-color: var(--primary); background: var(--primary-glow); }
/* Block click / hover / drop while a parse is in flight. `setParsingBusy()`
toggles this class; `pointer-events: none` short-circuits the JS click and
drag handlers (and `aria-busy="true"` on the same element surfaces the
state to assistive tech). The cursor reverts so users get visual feedback
that the upload affordance is temporarily inert. */
.dropzone.is-busy { pointer-events: none; cursor: default; opacity: .85; }
.dropzone.is-busy.dragover { border-color: var(--border); background: var(--surface); }
.dropzone-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--surface-hover); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.dropzone-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }
.dropzone-title { font: 600 16px/1.3 var(--font); color: var(--text); }
.dropzone-sub { font: 13px/1.5 var(--font); color: var(--text-muted); max-width: 360px; }
.dropzone-formats { font: 11px var(--mono); color: var(--text-muted); opacity: 0.8; margin-top: 6px; }
.dropzone-active { display: none; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; max-width: 360px; }
.dropzone.has-file .dropzone-prompt { display: none; }
.dropzone.has-file .dropzone-active { display: flex; }
.file-info { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); text-align: left; font: 13px var(--font); display: flex; align-items: center; gap: 12px; }
.file-info-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; background: var(--surface-hover); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.file-info-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.file-info-name { flex: 1; min-width: 0; word-break: break-all; font-weight: 500; color: var(--text); }
.file-info-meta { font-size: 11px; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }
/* Post-parse stats line ("4 pages · 1339 bbox · 7579ms"). Lives under
.file-info so it sits next to the file the numbers describe rather
than competing for space with Share/Copy/Export in the right toolbar. */
.parse-stats { font: 11px var(--mono); color: var(--text-muted); text-align: center; padding: 0 4px; line-height: 1.4; word-break: break-word; }
.parse-stats[hidden] { display: none; }
/* Render the shared-link pseudo-file in a slightly muted style so users
can tell at a glance that no PDF bytes are actually loaded. */
.dropzone.from-shared-link .file-info { border-style: dashed; }
.dropzone.from-shared-link .file-info-name { color: var(--text-muted); font-style: italic; font-weight: 400; }
.dropzone-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* OCR options popover (re-used styling from the Markdown Preview tool) */
.options-anchor { position: relative; display: inline-flex; }
/* Fixed width (not just min-width) so opening/closing the language-
suggestions list inside the OCR popover doesn't reflow the popover
itself -- a few of the longer Tesseract entries (e.g. "Chinese --
Simplified (vertical)") otherwise nudged the box wider, and removing
them via the chip × then snapped it back. */
/* [popover] is positioned in the top layer; the UA stylesheet applies
`position: fixed; inset: 0; margin: auto;` (centered). We override `margin`
to 0 and pin the popover next to its invoker from JS on the `toggle`
event (see positionPopover() below). `position-area` is Chromium-only at
time of writing so the manual positioning is the portable path. */
.options-popover { margin: 0; width: 320px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.options-popover h4 { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.options-popover label { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.4; }
.options-popover input[type="radio"], .options-popover input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; margin-top: 2px; flex-shrink: 0; }
.options-popover .opt-desc { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.options-popover .opt-section + .opt-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
/* OCR language picker: chip row + searchable suggestions list, in place of
the previous free-text input. Codes still join with `+` when handed to
tesseract.js (see selectedOcrLangs.join('+') in getOcrOptions). */
.lang-picker { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px; }
.lang-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.lang-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; background: var(--primary-glow); border: 1px solid var(--primary); color: var(--text); border-radius: 4px; font: 11px/1 var(--font); }
.lang-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; font: 13px/1 var(--mono); border-radius: 3px; }
.lang-chip-remove:hover { background: var(--surface-hover); color: var(--text); }
.lang-chips-empty { color: var(--text-muted); font: italic 11px var(--font); padding: 4px; }
.lang-search-wrap { position: relative; }
.lang-search-wrap input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: 12px var(--mono); }
.lang-search-wrap input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.lang-suggestions { max-height: 196px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 4px; }
.lang-suggestions[hidden] { display: none; }
.lang-suggestion { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; background: none; border: none; border-radius: 4px; cursor: pointer; text-align: left; color: var(--text); font: 12px var(--font); }
.lang-suggestion:hover, .lang-suggestion.active { background: var(--surface-hover); }
.lang-suggestion .lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-suggestion .lang-code { color: var(--text-muted); font-family: var(--mono); font-size: 11px; flex-shrink: 0; }
.lang-suggestion .lang-check { display: inline-flex; align-items: center; justify-content: center; width: 14px; flex-shrink: 0; color: var(--primary); }
.lang-suggestion .lang-check svg { width: 12px; height: 12px; }
.lang-suggestion.is-selected { color: var(--text); }
.lang-suggestion-empty { padding: 8px 10px; color: var(--text-muted); font: italic 11px var(--font); }
/* Export dropdown menu: reuses the .options-popover positioning + shell
(anchor, drop shadow, z-index) but lays out clickable menu items rather
than form controls. The chevron next to the Export label tracks the
menu's open state via [aria-expanded]. */
.export-menu { min-width: 260px; padding: 6px; }
.export-menu-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: 6px; cursor: pointer; text-align: left; color: var(--text); font: inherit; transition: background-color .12s; }
.export-menu-item:hover:not(:disabled) { background: var(--surface-hover); }
.export-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.export-menu-item:disabled { opacity: .45; cursor: not-allowed; }
.export-menu-icon { flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.export-menu-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.export-menu-title { font-size: 13px; line-height: 1.3; color: var(--text); }
.export-menu-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
#exportBtn .export-caret { margin-left: 2px; opacity: .7; transition: transform .15s; }
/* :popover-open wins in the native path; [aria-expanded] covers the no-popover JS fallback. */
.options-anchor:has(#exportMenu:popover-open) .export-caret,
#exportBtn[aria-expanded="true"] .export-caret { transform: rotate(180deg); }
/* Result tabs (Text / JSON / Screenshots) */
.view-tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.view-tab { padding: 3px 10px; border: none; background: transparent; color: var(--text-muted); font: 12px/1 var(--font); font-weight: 500; cursor: pointer; border-radius: 4px; transition: all .15s; }
.view-tab:hover:not(:disabled) { color: var(--text); }
.view-tab.active { background: var(--surface-hover); color: var(--text); font-weight: 600; }
.view-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn { padding: 4px; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 4px; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text); background: var(--surface-hover); }
.icon-btn svg { width: 16px; height: 16px; }
#resultPane:fullscreen { background: var(--bg); padding: 16px; display: flex; flex-direction: column; overflow: hidden; }
#resultPane:fullscreen .output-panel { flex: 1; min-height: 0; }
/* Result pane */
.output-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 300px; transition: background .25s, border-color .25s; position: relative; }
/* `min-height: 0` opts the scroll container out of its default `min-content`
floor as a column-flex child, so tall JSON actually clips + scrolls inside
.output-panel instead of pushing the whole page taller. The textarea
variant doesn't need this because it has its own `height: 100%` and
native scroll. `min-width: 0` mirrors the same fix for very long JSON
lines on the horizontal axis (the .panel already does this for grid
tracks, but a row-flex parent further down the tree would still apply
the min-content floor without this). */
.output-scroll { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 14px 16px; }
.output-textarea { width: 100%; height: 100%; min-height: 100%; padding: 14px 16px; font: 13px/1.55 var(--mono); background: var(--surface); color: var(--text); border: none; outline: none; resize: none; white-space: pre; tab-size: 4; }
.output-pre { font: 12.5px/1.5 var(--mono); color: var(--text); white-space: pre; }
/* Screenshots view. `#resultShotsWrap` is a column-flex inside the output
panel: a fixed-height sticky toolbar on top, then the scrollable grid.
Pages stream in one at a time as PDF.js renders them; each one is a
<figure> with the rendered <img>, an optional bbox + search overlay
canvas positioned over it, the page caption, and a per-page download
link. The canvas + image are siblings inside `.shots-img-wrap` so they
scale together when CSS resizes the figure. */
#resultShotsWrap { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.shots-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.shots-search { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.shots-search:focus-within { border-color: var(--primary); }
.shots-search svg { color: var(--text-muted); flex-shrink: 0; }
.shots-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: 12px var(--font); padding: 2px 0; }
.shots-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--text-muted); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 3l10 10M13 3L3 13' stroke-width='1.8' stroke='black' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 3l10 10M13 3L3 13' stroke-width='1.8' stroke='black' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat; cursor: pointer; flex-shrink: 0; }
.shots-search-count { font: 11px var(--mono); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.shots-search-count.has-matches { color: var(--text); }
.shots-search-count.no-matches { color: var(--danger); }
.shots-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font: 12px var(--font); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; user-select: none; transition: all .15s; }
.shots-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.shots-toggle input { accent-color: var(--primary); margin: 0; cursor: pointer; }
.shots-toggle:has(input:checked) { color: var(--text); background: var(--surface-hover); border-color: var(--text-muted); }
.shots-grid { display: flex; flex-direction: column; gap: 16px; padding: 16px; align-items: center; flex: 1; min-height: 0; min-width: 0; overflow: auto; }
/* `flex-shrink: 0` is critical: without it, the column-flex container would
distribute the (constrained) scroll-pane height across all figures and
squeeze each one into a thin band instead of letting them stack at their
natural image-determined heights. The parent .shots-grid has overflow:
auto from .output-scroll, so the column overflows into the scrollbar. */
/* Skip rendering for off-screen page captures + outline branches; the browser
uses contain-intrinsic-size as a placeholder until the element scrolls
close to the viewport. See dev/tools/guides/javascript.md → "Long tasks". */
.shots-figure { width: 100%; max-width: 100%; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; content-visibility: auto; contain-intrinsic-size: auto 800px; }
/* `.shots-img-wrap` is the canvas overlay's positioning context: the wrap
keeps `position: relative` so the canvas absolutely covers the image
pixel-for-pixel, and `line-height: 0` collapses the inline strut the
<img> would otherwise inject (which would push the canvas down by a few
pixels in some browsers and create a visible offset between bboxes and
the underlying glyphs). */
.shots-img-wrap { position: relative; display: block; line-height: 0; background: #fff; }
.shots-img { display: block; width: 100%; height: auto; background: #fff; }
.shots-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.shots-caption { padding: 6px 12px; font: 11px var(--mono); color: var(--text-muted); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shots-caption a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; transition: all .15s; }
.shots-caption a:hover { color: var(--text); background: var(--surface-hover); }
.shots-caption a svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.shots-pending { padding: 14px 16px; font: 12px var(--mono); color: var(--text-muted); text-align: center; border: 1px dashed var(--border); border-radius: 8px; width: 100%; flex-shrink: 0; }
.shots-error { padding: 14px 16px; font: 12px var(--font); color: var(--danger); text-align: center; border: 1px solid var(--danger); border-radius: 8px; width: 100%; flex-shrink: 0; }
/* Outline tab: tree of bookmarks with click-to-jump. Children indent via
left padding, not nested <ul>, so deep nesting doesn't run out of
horizontal room. Each leaf is a button so it's keyboard-navigable
(Tab + Enter / Space). */
.outline-tree { padding: 16px; }
.outline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.outline-list .outline-list { padding-left: 18px; border-left: 1px dashed var(--border); margin-left: 6px; margin-top: 2px; content-visibility: auto; contain-intrinsic-size: auto 200px; }
.outline-item { display: flex; align-items: baseline; gap: 8px; }
.outline-item-row { flex: 1; display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; background: transparent; border: none; color: var(--text); font: 13px/1.4 var(--font); text-align: left; cursor: pointer; border-radius: 4px; transition: background .15s; min-width: 0; }
.outline-item-row:hover { background: var(--surface-hover); }
.outline-item-row:disabled { color: var(--text-muted); cursor: default; }
.outline-item-row:disabled:hover { background: transparent; }
.outline-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-item-page { font: 11px var(--mono); color: var(--text-muted); flex-shrink: 0; }
.outline-item-page::before { content: 'p.'; opacity: .7; }
.outline-item-row.level-0 .outline-item-title { font-weight: 600; }
.outline-item-row.level-1 .outline-item-title { font-weight: 500; }
/* Empty / progress / error states */
.empty-state, .progress-state, .error-state { height: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; gap: 12px; }
.empty-state, .progress-state { color: var(--text-muted); }
.error-state { color: var(--danger); }
.empty-state-icon, .progress-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--surface-hover); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.empty-state-icon svg, .progress-icon svg, .error-state svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }
.empty-state-title, .progress-title, .error-title { font-size: 14px; font-weight: 600; color: var(--text); }
.empty-state-sub, .progress-sub, .error-sub { font-size: 12px; max-width: 380px; }
.error-sub { color: var(--text-muted); }
.progress-spin { animation: su-spin 1s linear infinite; }
@keyframes su-spin { to { transform: rotate(360deg); } }
@keyframes su-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.progress-state .progress-title { animation: su-pulse 1.8s ease-in-out infinite; }
/* Toast */
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--surface); color: var(--text); padding: 10px 18px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 8px; animation: toastIn .2s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
#fileInput { display: none; }
.su-footer { text-align: center; padding: 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; transition: border-color .25s, color .25s; }
.su-footer p { margin: 0; }
.su-footer-fineprint { margin-top: 6px !important; font-size: 0.7rem; opacity: 0.75; }
.su-footer-link { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.su-footer-link:hover { color: var(--text); }
.su-dialog { max-width: 560px; width: calc(100% - 32px); max-height: calc(100% - 32px); inset: 0; margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.su-dialog::backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.su-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.su-dialog-header h2 { font-size: 1rem; font-weight: 600; }
.su-dialog-close { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all .15s; }
.su-dialog-close:hover { background: var(--surface-hover); color: var(--text); }
.su-dialog-body { padding: 16px 18px; font-size: 0.875rem; line-height: 1.55; color: var(--text); }
.su-dialog-body p { margin-bottom: 12px; }
.su-dialog-body p:last-child { margin-bottom: 0; }
.su-dialog-body code { font-family: var(--mono); background: var(--surface-hover); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.su-dialog-body a { color: var(--primary); text-decoration: none; }
.su-dialog-body a:hover { text-decoration: underline; }
.su-dialog-fineprint { font-size: 0.8rem; color: var(--text-muted); }
/* Typography polish (Baseline; selectors that don't exist in this tool are no-ops). See dev/tools/guides/chrome.md → "Typography polish". */
.page-title, .panel-label, .su-dialog-header h2, .card-header { text-wrap: balance; }
.su-dialog-body p, .su-more-tools p, .tool-desc, .empty-state-sub, .progress-sub, .error-sub { text-wrap: pretty; }
/* Respect prefers-reduced-motion. See dev/tools/guides/chrome.md → "Reduced motion". */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.su-credits-list { margin: 0 0 12px; padding-left: 20px; }
.su-credits-list li { margin-bottom: 6px; }
.su-credits-list li:last-child { margin-bottom: 0; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* Desktop: pin the page to viewport height so the tall-JSON chain has a
hard upper bound to clip against. See the body comment above for the
rationale. The mobile breakpoint (below 769px) leaves body uncapped so
the single-column stack scrolls naturally. */
@media (min-width: 769px) {
body { height: 100vh; overflow: hidden; }
}
@media (max-width: 880px) {
#ocrBtn .opt-label { display: none; }
#ocrBtn { padding: 4px 8px; }
.panel-actions { gap: 6px; }
}
@media (max-width: 768px) {
main { padding: 16px 12px; }
.grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.splitter { display: none; }
.dropzone { min-height: 220px; }
.output-panel { min-height: 320px; }
.panel-bar { flex-wrap: wrap; row-gap: 8px; padding-bottom: 10px; height: auto; min-height: 38px; }
.panel-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; }
.btn-sm { padding: 5px 9px; height: 23px; font-size: 11px; }
.options-popover { width: min(320px, calc(100vw - 24px)); }
#copyBtn .btn-label, #exportBtn .btn-label { display: none; }
#exportBtn { padding: 4px 9px; }
.export-menu { min-width: 220px; }
}
@media (max-width: 640px) {
header { padding: 0 12px; }
.logo-svg { height: 20px; }
.logo-badge { font-size: 11px; padding: 2px 7px; }
.btn { padding: 6px 10px; font-size: 12px; }
.view-tab { padding: 3px 8px; font-size: 11px; }
}
</style>
</head>
<body>
<noscript>
<p class="su-noscript"><strong>PDF Extractor</strong> — Extract spatial text and structured JSON from PDFs in your browser, with optional OCR for scanned pages. Requires JavaScript; please enable it. Source on <a href="https://github.com/secutils-dev/secutils/blob/main/dev/tools/pdf-extractor.html">GitHub</a>.</p>
</noscript>
<header>
<a class="logo" href="https://secutils.dev" target="_blank" rel="noopener">
<svg class="logo-svg" height="24" role="img" viewBox="0 0 98 16" xmlns="http://www.w3.org/2000/svg">
<path d="m3 0h10c1.662 0 3 1.338 3 3v10c0 1.662-1.338 3-3 3h-10c-1.662 0-3-1.338-3-3v-10c0-1.662 1.338-3 3-3z" fill="#fed047"/>
<path aria-label="SU" d="m11.285 12q-1.12 0-1.728-0.608-0.608-0.61867-0.608-1.6747v-5.6107h1.152v5.6q0 0.59733 0.29867 0.93867 0.29867 0.34133 0.88534 0.34133 0.58667 0 0.88534-0.34133 0.29867-0.34134 0.29867-0.93867v-5.6h1.152v5.6107q0 1.0667-0.608 1.6747t-1.728 0.608zm-6.368 0q-1.152 0-1.8453-0.608-0.69334-0.608-0.69334-1.664h1.1307q0 0.58667 0.384 0.928 0.384 0.33067 1.024 0.33067 0.62934 0 0.992-0.34133 0.36267-0.34134 0.36267-0.90667 0-0.42667-0.23467-0.74667t-0.672-0.43733l-1.12-0.29867q-0.78934-0.21333-1.248-0.77867-0.448-0.56534-0.448-1.3547 0-0.64 0.27733-1.1093 0.288-0.48 0.81067-0.74667t1.216-0.26667 1.216 0.26667q0.53334 0.26667 0.82134 0.74667 0.29867 0.46933 0.29867 1.0987h-1.1307q0-0.50133-0.34133-0.8-0.33067-0.30933-0.864-0.30933t-0.864 0.30933q-0.32 0.29867-0.32 0.78934 0 0.39467 0.21333 0.66134 0.224 0.26667 0.61867 0.37333l1.152 0.30933q0.81067 0.21333 1.28 0.832t0.46933 1.4613q0 0.69334-0.30933 1.2053-0.30933 0.50133-0.864 0.77867-0.55467 0.27733-1.312 0.27733z" fill="#642340"/>
<path class="logo-text-fill" aria-label="SECUTILS.DEV" d="m93.158 12.117-1.9733-7.7867h1.1733l1.2587 5.184q0.11733 0.46933 0.20267 0.91734 0.08533 0.448 0.128 0.69334 0.04267-0.24533 0.128-0.69334 0.096-0.45867 0.21333-0.928l1.2053-5.1733h1.184l-1.984 7.7867zm-7.8294 0v-7.7867h4.576v1.024h-3.4453v2.2187h3.072v0.992h-3.072v2.528h3.4453v1.024zm-6.5174 0v-7.7867h2.176q0.768 0 1.3333 0.29867 0.56534 0.288 0.87467 0.832 0.32 0.53334 0.32 1.248v3.008q0 0.736-0.32 1.2693-0.30933 0.53334-0.87467 0.832-0.56534 0.29867-1.3333 0.29867zm1.152-1.0347h1.024q0.62934 0 1.0027-0.36267 0.37333-0.36267 0.37333-1.0027v-3.008q0-0.61867-0.37333-0.98134-0.37334-0.37333-1.0027-0.37333h-1.024zm-5.2374 1.1413q-0.416 0-0.68267-0.24533-0.256-0.256-0.256-0.672 0-0.416 0.256-0.672 0.26667-0.26667 0.68267-0.26667 0.416 0 0.672 0.26667 0.26667 0.256 0.26667 0.672 0 0.416-0.26667 0.672-0.256 0.24533-0.672 0.24533zm-6.368 0q-1.152 0-1.8453-0.608-0.69334-0.608-0.69334-1.664h1.1307q0 0.58667 0.384 0.928 0.384 0.33067 1.024 0.33067 0.62934 0 0.992-0.34133 0.36267-0.34134 0.36267-0.90667 0-0.42667-0.23467-0.74667t-0.672-0.43733l-1.12-0.29867q-0.78934-0.21333-1.248-0.77867-0.448-0.56534-0.448-1.3547 0-0.64 0.27733-1.1093 0.288-0.48 0.81067-0.74667 0.52267-0.26667 1.216-0.26667 0.69334 0 1.216 0.26667 0.53334 0.26667 0.82134 0.74667 0.29867 0.46933 0.29867 1.0987h-1.1307q0-0.50134-0.34133-0.8-0.33067-0.30933-0.864-0.30933t-0.864 0.30933q-0.32 0.29867-0.32 0.78934 0 0.39467 0.21333 0.66134 0.224 0.26667 0.61867 0.37333l1.152 0.30933q0.81067 0.21333 1.28 0.832 0.46934 0.61867 0.46934 1.4613 0 0.69334-0.30934 1.2053-0.30933 0.50134-0.864 0.77867-0.55467 0.27733-1.312 0.27733zm-8.288-0.10667v-7.7867h1.152v6.7414h3.4027v1.0453zm-6.6987 0v-1.0453h1.568v-5.696h-1.568v-1.0453h4.32v1.0453h-1.5787v5.696h1.5787v1.0453zm-4.8214 0v-6.7414h-2.08v-1.0453h5.3227v1.0453h-2.0907v6.7414zm-5.824 0.10667q-1.12 0-1.728-0.608-0.608-0.61867-0.608-1.6747v-5.6107h1.152v5.6q0 0.59733 0.29867 0.93867 0.29867 0.34133 0.88534 0.34133 0.58667 0 0.88534-0.34133 0.29867-0.34134 0.29867-0.93867v-5.6h1.152v5.6107q0 1.0667-0.608 1.6747t-1.728 0.608zm-6.3147 0q-1.0987 0-1.7493-0.608-0.64-0.61867-0.64-1.664v-3.456q0-1.056 0.64-1.664 0.65067-0.608 1.7493-0.608 1.088 0 1.728 0.61867 0.65067 0.608 0.65067 1.6533h-1.152q0-0.608-0.33067-0.928-0.32-0.32-0.896-0.32-0.58667 0-0.91734 0.32-0.32 0.32-0.32 0.928v3.456q0 0.608 0.32 0.928 0.33067 0.32 0.91734 0.32 0.576 0 0.896-0.32 0.33067-0.32 0.33067-0.928h1.152q0 1.0453-0.65067 1.664-0.64 0.608-1.728 0.608zm-8.6827-0.10667v-7.7867h4.576v1.024h-3.4453v2.2187h3.072v0.992h-3.072v2.528h3.4453v1.024zm-4.1707 0.10667q-1.152 0-1.8453-0.608-0.69334-0.608-0.69334-1.664h1.1307q0 0.58667 0.384 0.928 0.384 0.33067 1.024 0.33067 0.62934 0 0.992-0.34133 0.36267-0.34134 0.36267-0.90667 0-0.42667-0.23467-0.74667-0.23467-0.32-0.672-0.43733l-1.12-0.29867q-0.78934-0.21333-1.248-0.77867-0.448-0.56534-0.448-1.3547 0-0.64 0.27733-1.1093 0.288-0.48 0.81067-0.74667 0.52267-0.26667 1.216-0.26667 0.69334 0 1.216 0.26667 0.53334 0.26667 0.82134 0.74667 0.29867 0.46933 0.29867 1.0987h-1.1307q0-0.50134-0.34134-0.8-0.33067-0.30933-0.864-0.30933t-0.864 0.30933q-0.32 0.29867-0.32 0.78934 0 0.39467 0.21333 0.66134 0.224 0.26667 0.61867 0.37333l1.152 0.30933q0.81067 0.21333 1.28 0.832 0.46934 0.61867 0.46934 1.4613 0 0.69334-0.30934 1.2053-0.30933 0.50134-0.864 0.77867-0.55467 0.27733-1.312 0.27733z"/>
</svg>
<span class="logo-badge">PDF → Text / JSON</span>
</a>
<div class="header-right">
<a id="skillLink" class="skill-link" href="#" target="_blank" rel="noopener"
title="View AI agent skill (skill.md, opens in new tab)"
aria-label="View AI agent skill (opens in new tab)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
<path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>
</svg>
<span>Skill</span>
</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.5 15h-1v-2h1v2Zm-3.674-3.107-1.414 1.414-.707-.707 1.414-1.415.707.708Zm8.479.707-.707.707-1.414-1.414.707-.708 1.414 1.415Z"/><path fill-rule="evenodd" d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 1a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z" clip-rule="evenodd"/><path d="M3.005 8.505h-2v-1h2v1Zm12 0h-2v-1h2v1ZM4.82 4.114l-.708.707-1.414-1.414.707-.707L4.82 4.114Zm8.492-.707-1.414 1.414-.708-.707L12.605 2.7l.707.707ZM8.5 3h-1V1h1v2Z"/></svg>
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.05 12.95A6.982 6.982 0 0 1 2 8c0-1.79.684-3.583 2.05-4.95A6.982 6.982 0 0 1 9 1a1 1 0 0 1 .708 1.707 4.982 4.982 0 0 0-1.465 3.536 4.98 4.98 0 0 0 1.465 3.535 4.98 4.98 0 0 0 3.535 1.465 1 1 0 0 1 .707 1.707A6.981 6.981 0 0 1 9 15a6.983 6.983 0 0 1-4.95-2.05Zm.708-.707A5.983 5.983 0 0 0 9 14c1.535 0 3.07-.586 4.242-1.757a5.98 5.98 0 0 1-4.018-1.545L9 10.485a5.982 5.982 0 0 1-1.758-4.242A5.986 5.986 0 0 1 9 2a5.983 5.983 0 0 0-4.243 1.757A5.98 5.98 0 0 0 3 8l.006.288a5.978 5.978 0 0 0 1.75 3.955Z"/></svg>
</button>
</div>
</header>
<main>
<div class="grid">
<div class="panel">
<div class="panel-bar">
<span class="panel-label">PDF</span>
<div class="panel-actions">
<button class="link-btn" id="clearBtn" disabled>Clear</button>
<div class="options-anchor">
<button id="ocrBtn" class="btn btn-sm" commandfor="ocrPopover" command="toggle-popover" aria-haspopup="true" title="OCR & parse options">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></svg>
<span class="opt-label">Options</span>
</button>
<div id="ocrPopover" popover class="options-popover" role="dialog" aria-label="Parse options">
<div class="opt-section">
<h4>OCR for scanned pages</h4>
<label>
<input type="radio" name="ocrMode" value="auto" checked>
<span>Auto
<span class="opt-desc">Run OCR only on pages with very little embedded text. Recommended.</span>
</span>
</label>
<label>
<input type="radio" name="ocrMode" value="always">
<span>Always
<span class="opt-desc">Run OCR on every page even if it already has text. Slow.</span>
</span>
</label>
<label>
<input type="radio" name="ocrMode" value="never">
<span>Never
<span class="opt-desc">Use embedded text only. Fastest. Scanned PDFs will appear empty.</span>
</span>
</label>
</div>
<div class="opt-section">
<h4>OCR languages</h4>
<div class="lang-picker">
<div id="langChips" class="lang-chips" role="list" aria-label="Selected OCR languages"></div>
<div class="lang-search-wrap">
<input id="langSearch" type="text" placeholder="Search or pick a language..." autocomplete="off" spellcheck="false"
aria-controls="langSuggestions" aria-expanded="false" role="combobox" aria-haspopup="listbox">
</div>
<div id="langSuggestions" class="lang-suggestions" role="listbox" aria-label="Available OCR languages" hidden></div>
</div>
</div>
</div>
</div>
<button id="parseBtn" class="btn btn-primary btn-sm" disabled title="Parse the loaded PDF (Cmd/Ctrl+Enter)">Parse</button>
</div>
</div>
<div id="dropzone" class="dropzone" role="button" tabindex="0" aria-label="Drop a PDF here or click to upload">
<div class="dropzone-prompt" style="display:flex;flex-direction:column;align-items:center;gap:12px;">
<div class="dropzone-icon">
<svg viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<path d="M14 2v6h6"/>
<path d="M12 18v-6"/>
<path d="M9 15l3-3 3 3"/>
</svg>
</div>
<div class="dropzone-title">Drop a PDF here, or click to choose</div>
<div class="dropzone-sub">Parsing happens entirely in your browser. Nothing is uploaded.</div>
<div class="dropzone-formats">Accepts <code>.pdf</code> (any size, pages render at 150 DPI).</div>
</div>
<div class="dropzone-active">
<div class="file-info">
<div class="file-info-icon">
<svg viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<path d="M14 2v6h6"/>
</svg>
</div>
<span id="fileName" class="file-info-name"></span>
<span id="fileMeta" class="file-info-meta"></span>
</div>
<div id="parseStats" class="parse-stats" hidden></div>
<div class="dropzone-actions">
<button class="btn btn-sm" id="replaceBtn">Replace</button>
<button class="btn btn-primary btn-sm" id="parseBtn2">Parse</button>
</div>
</div>
</div>
</div>
<div class="splitter" id="splitter"></div>
<div id="resultPane" class="panel">
<div class="panel-bar">
<div class="view-tabs" role="tablist" aria-label="Result view">
<button id="tabText" class="view-tab active" role="tab" aria-selected="true" aria-controls="resultText" title="Spatial text (liteparse grid projection)">Text</button>
<button id="tabJson" class="view-tab" role="tab" aria-selected="false" aria-controls="resultJson" title="Structured JSON with per-page items and bounding boxes">JSON</button>
<button id="tabMd" class="view-tab" role="tab" aria-selected="false" aria-controls="resultMd" title="Heuristic Markdown reconstruction (headings, lists, tables, links)">Markdown</button>
<button id="tabOutline" class="view-tab" role="tab" aria-selected="false" aria-controls="resultOutline" title="PDF outline / bookmarks tree (Table of Contents)">Outline</button>
<button id="tabShots" class="view-tab" role="tab" aria-selected="false" aria-controls="resultShots" title="Per-page PNG renders with optional bbox overlay and full-text search">Screenshots</button>
</div>
<div class="panel-actions">
<button id="shareBtn" class="btn btn-primary btn-sm" disabled title="Copy a shareable link with the result encoded in the URL">Share</button>
<button id="copyBtn" class="btn btn-sm" disabled title="Copy the current result to your clipboard">
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="9" height="10" rx="1.5"/><path d="M3 11V3.5A1.5 1.5 0 0 1 4.5 2H10"/></svg>
<span class="btn-label">Copy</span>
</button>
<div class="options-anchor">
<button id="exportBtn" class="btn btn-sm" commandfor="exportMenu" command="toggle-popover" aria-haspopup="true" disabled title="Export the current result">
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v9"/><path d="M4.5 7.5 8 11l3.5-3.5"/><path d="M3 13.5h10"/></svg>
<span class="btn-label">Export</span>
<svg class="export-caret" viewBox="0 0 10 6" width="8" height="6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg>
</button>
<div id="exportMenu" popover class="options-popover export-menu" role="menu" aria-label="Export options">
<button id="exportDownload" class="export-menu-item" role="menuitem" type="button">
<svg class="export-menu-icon" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v9"/><path d="M4.5 7.5 8 11l3.5-3.5"/><path d="M3 13.5h10"/></svg>
<span class="export-menu-body">
<span class="export-menu-title">Download</span>
<span class="export-menu-desc" id="exportDownloadDesc">Save the current view as a file</span>
</span>
</button>
<button id="exportOpenMd" class="export-menu-item" role="menuitem" type="button">
<svg class="export-menu-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></svg>
<span class="export-menu-body">
<span class="export-menu-title">Open in Markdown Preview</span>
<span class="export-menu-desc" id="exportOpenMdDesc">Render the current text in the sibling tool</span>
</span>
</button>
</div>
</div>
<button id="fullscreenBtn" class="icon-btn" title="Toggle fullscreen" aria-label="Toggle fullscreen">
<svg id="fullscreenEnterIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
<svg id="fullscreenExitIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>
</button>
</div>
</div>
<div class="output-panel">
<div id="resultEmpty" class="empty-state">
<div class="empty-state-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<path d="M14 2v6h6"/>
<path d="M9 13h6"/>
<path d="M9 17h6"/>
</svg>
</div>
<div class="empty-state-title">Drop a PDF and press Parse</div>
<div class="empty-state-sub">Extracted text or JSON will appear here. Sharing the result puts it in the URL fragment (the PDF itself never leaves the browser).</div>
</div>
<div id="resultProgress" class="progress-state" style="display:none">
<div class="progress-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="progress-spin" aria-hidden="true">
<circle cx="12" cy="12" r="9" opacity=".25"/>
<path d="M21 12a9 9 0 0 1-9 9"/>
</svg>
</div>
<div class="progress-title" id="progressTitle">Parsing PDF...</div>
<div class="progress-sub" id="progressSub">Loading the liteparse engine. First run may take a moment.</div>
</div>
<div id="resultError" class="error-state" style="display:none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<path d="M12 8v4"/>
<path d="M12 16h0"/>
</svg>
<div class="error-title">Failed to parse PDF</div>
<div class="error-sub" id="errorSub"></div>
</div>
<textarea id="resultText" class="output-textarea" style="display:none" readonly aria-label="Extracted text" role="tabpanel" aria-labelledby="tabText"></textarea>
<div id="resultJson" class="output-scroll" style="display:none" role="tabpanel" aria-labelledby="tabJson"><pre class="output-pre" id="resultJsonPre"></pre></div>
<textarea id="resultMd" class="output-textarea" style="display:none" readonly aria-label="Heuristic Markdown reconstruction" role="tabpanel" aria-labelledby="tabMd"></textarea>
<div id="resultMdPending" class="progress-state" style="display:none" role="status">
<div class="progress-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="progress-spin" aria-hidden="true">
<circle cx="12" cy="12" r="9" opacity=".25"/>
<path d="M21 12a9 9 0 0 1-9 9"/>
</svg>
</div>
<div class="progress-title" id="mdProgressTitle">Reconstructing Markdown...</div>
<div class="progress-sub" id="mdProgressSub">Detecting headings, lists, tables, and link annotations.</div>
</div>
<div id="resultOutline" class="output-scroll outline-tree" style="display:none" role="tabpanel" aria-labelledby="tabOutline"></div>
<div id="resultOutlineEmpty" class="empty-state" style="display:none" role="status">
<div class="empty-state-icon">
<svg viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h11"/><path d="M4 12h11"/><path d="M4 18h11"/>
<circle cx="19" cy="6" r="1.4"/><circle cx="19" cy="12" r="1.4"/><circle cx="19" cy="18" r="1.4"/>
</svg>
</div>
<div class="empty-state-title" id="resultOutlineEmptyTitle">No outline in this PDF</div>
<div class="empty-state-sub" id="resultOutlineEmptySub">This PDF has no bookmarks (Table of Contents). Most PDFs don't -- bookmarks are an authoring-time feature most LaTeX / Office workflows skip.</div>
</div>
<div id="resultOutlinePending" class="progress-state" style="display:none" role="status">
<div class="progress-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="progress-spin" aria-hidden="true">
<circle cx="12" cy="12" r="9" opacity=".25"/>
<path d="M21 12a9 9 0 0 1-9 9"/>
</svg>
</div>
<div class="progress-title">Reading outline...</div>
<div class="progress-sub">Resolving PDF bookmarks to page numbers.</div>
</div>
<div id="resultShotsWrap" style="display:none" role="tabpanel" aria-labelledby="tabShots">
<div id="resultShotsToolbar" class="shots-toolbar">
<div class="shots-search">
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="7" cy="7" r="5"/><path d="M11 11l3 3"/></svg>
<input id="shotsSearchInput" type="search" placeholder="Search text in pages..." aria-label="Search text in pages" autocomplete="off" spellcheck="false">
<span id="shotsSearchCount" class="shots-search-count" aria-live="polite"></span>
</div>
<label class="shots-toggle" title="Outline every text item with its bounding box (in PDF points, scaled to render DPI)">
<input id="shotsBoxesToggle" type="checkbox">
<span>Show boxes</span>
</label>
</div>
<div id="resultShots" class="output-scroll shots-grid"></div>
</div>
<div id="resultShotsEmpty" class="empty-state" style="display:none" role="status">
<div class="empty-state-icon">
<svg viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="5" width="18" height="14" rx="2"/>
<circle cx="12" cy="12" r="3"/>
</svg>
</div>
<div class="empty-state-title">Screenshots need the original PDF</div>
<div class="empty-state-sub">This view was opened from a shared link, which only carries the extracted Text or JSON. Drop the PDF to generate per-page renders.</div>
</div>
</div>
</div>
</div>
<aside class="su-more-tools" aria-label="More free tools">
<p>Other free, no-signup Secutils.dev tools for JWT, SAML, certificates, Markdown, HTTP echo, and more - <a href="https://{{TOOLS_HOST}}/">Browse all tools →</a></p>
</aside>
</main>
<footer class="su-footer">
<p>Extract text and structured JSON from PDFs, in your browser.</p>
<p class="su-footer-fineprint">
<button type="button" class="su-footer-link" id="privacyOpen">Privacy</button>
<span aria-hidden="true"> · </span>
<button type="button" class="su-footer-link" id="creditsOpen">Credits</button>
</p>
</footer>
<dialog id="privacyDialog" class="su-dialog" closedby="any" aria-labelledby="privacyDialogTitle">
<header class="su-dialog-header">
<h2 id="privacyDialogTitle">Privacy</h2>
<button type="button" class="su-dialog-close" id="privacyClose" aria-label="Close">
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13"/></svg>
</button>
</header>
<div class="su-dialog-body">
<p><strong>Your PDF stays in your browser.</strong> Parsing runs entirely client-side via the bundled <a href="https://github.com/run-llama/liteparse" target="_blank" rel="noopener noreferrer">liteparse</a> + <a href="https://github.com/mozilla/pdf.js" target="_blank" rel="noopener noreferrer">PDF.js</a> engine. The PDF bytes are never uploaded. Shareable links carry only the extracted text or JSON (and only when you click Share), encoded in the URL fragment (<code>#…</code>), which browsers never transmit to the server.</p>
<p><strong>OCR fetches from public CDNs.</strong> When OCR is enabled and a page needs it, the bundled <a href="https://tesseract.projectnaptha.com/" target="_blank" rel="noopener noreferrer">tesseract.js</a> engine fetches its language data from the public <code>cdn.jsdelivr.net/npm/@tesseract.js-data/<lang>/</code> mirror. The PDF content itself is never sent anywhere, only those static asset URLs are requested. Disable OCR in <em>Options</em> if you'd rather not contact any third party.</p>
<p><strong>Anonymous usage analytics.</strong> We use <a href="https://plausible.io/" target="_blank" rel="noopener noreferrer">Plausible Analytics</a>, a privacy-first, GDPR-compliant tool, to collect aggregate usage data. No cookies, no personal data, no individual tracking. Limited to top pages, referral sources, visit duration, and device-class metadata.</p>
<p class="su-dialog-fineprint">See the full <a href="https://secutils.dev/privacy" target="_blank" rel="noopener noreferrer">Secutils.dev privacy policy</a> for details on the wider service.</p>
</div>
</dialog>
<dialog id="creditsDialog" class="su-dialog" closedby="any" aria-labelledby="creditsDialogTitle">
<header class="su-dialog-header">
<h2 id="creditsDialogTitle">Credits</h2>
<button type="button" class="su-dialog-close" id="creditsClose" aria-label="Close">
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13"/></svg>
</button>
</header>
<div class="su-dialog-body">
<p>This tool is powered by the following open-source libraries:</p>
<ul class="su-credits-list">
<li><a href="https://github.com/run-llama/liteparse" target="_blank" rel="noopener noreferrer"><strong>liteparse</strong></a> - lightweight PDF text and layout extractor, orchestrates parsing and the OCR fallback inside the browser.</li>
<li><a href="https://github.com/mozilla/pdf.js" target="_blank" rel="noopener noreferrer"><strong>PDF.js</strong></a> - Mozilla's pure-JavaScript PDF renderer, used to parse the document structure and rasterise pages for OCR.</li>
<li><a href="https://github.com/naptha/tesseract.js" target="_blank" rel="noopener noreferrer"><strong>tesseract.js</strong></a> - pure-JavaScript port of the Tesseract OCR engine, used to extract text from image-only PDF pages when OCR is enabled.</li>
</ul>
<p class="su-dialog-fineprint">All trademarks are property of their respective owners.</p>
</div>
</dialog>
<input type="file" id="fileInput" accept=".pdf,application/pdf">
<div id="toast" class="toast" style="display:none">
<span id="toastMsg"></span>
</div>
<!-- Inlined at deploy time by dev/tools/deploy.ts (data-su-bundle). See
dev/tools/guides/platform.md -> "Embedded JS bundles". Sub-package source lives
in dev/tools/js/liteparse/. Body is empty in source and stays empty
after `npm run build`; the deploy inliner fills it with the built
ESM module. `type="text/plain"` keeps the browser from executing the
multi-MB source on initial parse -- our `loadLiteparseBundle()`
helper Blob-URLs it on demand. -->
<script id="su-bundle-liteparse" type="text/plain" data-su-bundle="liteparse" data-su-bundle-encoding="gzip-base64"></script>
<script>
const $ = (id) => document.getElementById(id);
const els = {
dropzone: $('dropzone'),
fileInput: $('fileInput'),
fileName: $('fileName'),
fileMeta: $('fileMeta'),
clearBtn: $('clearBtn'),
replaceBtn: $('replaceBtn'),
parseBtn: $('parseBtn'),
parseBtn2: $('parseBtn2'),
ocrBtn: $('ocrBtn'),
ocrPopover: $('ocrPopover'),
langChips: $('langChips'),
langSearch: $('langSearch'),
langSuggestions: $('langSuggestions'),
themeToggle: $('themeToggle'),
skillLink: $('skillLink'),
tabText: $('tabText'),
tabJson: $('tabJson'),
tabMd: $('tabMd'),
tabOutline: $('tabOutline'),
tabShots: $('tabShots'),
resultText: $('resultText'),
resultJson: $('resultJson'),
resultJsonPre: $('resultJsonPre'),
resultMd: $('resultMd'),
resultMdPending: $('resultMdPending'),
mdProgressTitle: $('mdProgressTitle'),
mdProgressSub: $('mdProgressSub'),
resultOutline: $('resultOutline'),
resultOutlineEmpty: $('resultOutlineEmpty'),
resultOutlineEmptyTitle: $('resultOutlineEmptyTitle'),
resultOutlineEmptySub: $('resultOutlineEmptySub'),
resultOutlinePending: $('resultOutlinePending'),
resultShotsWrap: $('resultShotsWrap'),
resultShots: $('resultShots'),
resultShotsToolbar: $('resultShotsToolbar'),
resultShotsEmpty: $('resultShotsEmpty'),
shotsSearchInput: $('shotsSearchInput'),
shotsSearchCount: $('shotsSearchCount'),
shotsBoxesToggle: $('shotsBoxesToggle'),
resultEmpty: $('resultEmpty'),
resultProgress: $('resultProgress'),
resultError: $('resultError'),
progressTitle: $('progressTitle'),
progressSub: $('progressSub'),
errorSub: $('errorSub'),
parseStats: $('parseStats'),
resultPane: $('resultPane'),
shareBtn: $('shareBtn'),
copyBtn: $('copyBtn'),
exportBtn: $('exportBtn'),
exportMenu: $('exportMenu'),
exportDownload: $('exportDownload'),
exportDownloadDesc: $('exportDownloadDesc'),
exportOpenMd: $('exportOpenMd'),
exportOpenMdDesc: $('exportOpenMdDesc'),
fullscreenBtn: $('fullscreenBtn'),
fullscreenEnterIcon: $('fullscreenEnterIcon'),
fullscreenExitIcon: $('fullscreenExitIcon'),
splitter: $('splitter'),
toast: $('toast'),
toastMsg: $('toastMsg'),
};
// State
let pdfFile = null; // { name, bytes: Uint8Array, sizeBytes }
let result = null; // { text: string, json: object, srcName: string, ocrMode: string, ocrLang: string }
let activeTab = 'text';
let liteparseModule = null; // resolved on first parse, cached after
let toastTimer = null;
// Screenshots state. Populated lazily the first time the user clicks the
// Screenshots tab after a successful parse. Pages stream in one at a time
// rather than blocking on all-at-once render (10 pages at 150 DPI is ~1 GB
// of intermediate canvas memory in the worst case). Each entry is a
// `{ page, url, width, height }` object; `url` is a Blob URL we must revoke
// on clear / replace / re-parse to avoid leaking 5-50 MB per session.
let shots = null; // null | { status: 'idle'|'rendering'|'ready'|'error', items: [...], total, error? }
let shotsAbort = null; // AbortController-ish flag; set to true to cancel an in-flight render loop
// Markdown reconstruction cache. The heuristic engine (buildMarkdown) is
// pure but the per-PDF link-annotation pass (getPdfLinks) is async, so we
// cache the rendered string and skip recomputation while the same result
// is in scope. Invalidated on clear / replace / re-parse, and rebuilt on
// the next setActiveTab('md') click.
let markdownCache = null; // null | string
let markdownAbort = null; // AbortController-ish flag for the in-flight render
// PDF outline (bookmarks / Table of Contents) state. Populated lazily on
// first click of the Outline tab from the live PDF bytes; cached for the
// lifetime of the result. Shared links may carry the outline tree
// directly in the URL fragment (v3 schema, `o` field) -- in that case
// `outlineCache` is set immediately at hydrate time and the tab opens
// instantly. The Markdown engine also picks up `outlineCache` (when
// available) as an authoritative heading hierarchy that overrides the
// font-size heuristic; see buildMarkdown(json, links, outline).
let outlineCache = null; // null | PdfOutlineItem[] (empty array means "fetched, none found")
let outlineAbort = null; // AbortController-ish flag for the in-flight fetch
// Screenshots overlay state. The same `<canvas>` we draw onto serves both
// the bbox-overlay toggle and the full-text search highlight; they layer
// in that order (search highlights paint on top of bbox outlines so a
// matched item stays visible even when boxes are on). The toggle persists
// across re-renders but resets on clear / replace / re-parse.
let shotsBoxesEnabled = false; // bbox overlay toggle state
let shotsSearchQuery = ''; // current search query (case-insensitive substring)
let shotsSearchDebounce = null; // debounce timer for the search input
// Practical cap for what we will encode into the URL fragment. ~64 KB of UTF-8
// is well within every modern browser's URL length limit, doesn't generate a
// pathologically long anchor, and matches the guidance in
// dev/tools/guides/url-state.md ("URL state encoding"). Larger results are kept in
// memory but Share is disabled (with a hint) -- the user can still copy /
// download the result manually.
const MAX_URL_STATE_BYTES = 64 * 1024;
// URL state encoding: see dev/tools/guides/url-state.md -> "URL state encoding".
const utf8Enc = new TextEncoder();
const utf8Dec = new TextDecoder();
const toBase64Url = (bytes) => {
let s = '';
for (const b of bytes) s += String.fromCharCode(b);
return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
};
const fromBase64Url = (str) => {
const b64 = str.replace(/-/g, '+').replace(/_/g, '/');
const padded = b64 + '==='.slice(0, (4 - b64.length % 4) % 4);
const bin = atob(padded);
const out = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
return out;
};
const encodeState = async (text) => {
const bytes = utf8Enc.encode(text);
const stream = new Blob([bytes]).stream().pipeThrough(new CompressionStream('deflate-raw'));
const deflated = new Uint8Array(await new Response(stream).arrayBuffer());
const out = new Uint8Array(4 + deflated.length);
new DataView(out.buffer).setUint32(0, bytes.length, true);
out.set(deflated, 4);
return toBase64Url(out);
};
const decodeState = async (str) => {
try {
const bytes = fromBase64Url(str);
if (bytes.length < 4) return null;
const stream = new Blob([bytes.subarray(4)]).stream()
.pipeThrough(new DecompressionStream('deflate-raw'));
const inflated = new Uint8Array(await new Response(stream).arrayBuffer());
return utf8Dec.decode(inflated);
} catch { return null; }
};
// Theme toggle + skill link wiring (copied from md.html).
(() => {
const root = document.documentElement;
const setTheme = (t) => {
root.setAttribute('data-theme', t);
try { localStorage.setItem('su-tool-theme', t); } catch {}
};
els.themeToggle.addEventListener('click', () => {
setTheme(root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
});
if (els.skillLink) {
const p = location.pathname;
els.skillLink.href = (p === '/' || p === '') ? '/llms.txt' : p.replace(/\/$/, '') + '.md';
}
try {
const saved = localStorage.getItem('su-tool-theme');
if (saved) setTheme(saved);
else if (window.matchMedia('(prefers-color-scheme: light)').matches) setTheme('light');
} catch {}
})();
(() => {
const dlg = $('privacyDialog');
$('privacyOpen').addEventListener('click', () => dlg.showModal());
$('privacyClose').addEventListener('click', () => dlg.close());
})();
(() => {
const dlg = $('creditsDialog');
$('creditsOpen').addEventListener('click', () => dlg.showModal());
$('creditsClose').addEventListener('click', () => dlg.close());
})();
// Safari fallback for closedby="any" (Newly Baseline elsewhere; limited in Safari as of Q2 2026).
if (!('closedBy' in HTMLDialogElement.prototype)) {
for (const dlg of document.querySelectorAll('dialog.su-dialog')) {
dlg.addEventListener('click', (e) => {
if (e.target !== dlg) return;
const r = dlg.getBoundingClientRect();
if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) dlg.close();
});
}
}
function toast(msg) {
clearTimeout(toastTimer);
els.toastMsg.textContent = msg;
els.toast.style.display = 'flex';
toastTimer = setTimeout(() => { els.toast.style.display = 'none'; }, 2400);
}
// Yield to the event loop so progress updates / freshly-appended images paint
// before the next chunk of synchronous work. Prefers `scheduler.yield()` (resumes
// in the same priority queue, lower latency than rAF) and falls back to rAF for
// the visual-frame-aligned semantics on browsers without the API.
// See dev/tools/guides/javascript.md → "Long tasks (scheduler.yield)".
const yieldToMain = () => 'scheduler' in window && typeof scheduler.yield === 'function'
? scheduler.yield()
: new Promise((r) => requestAnimationFrame(() => r()));
function formatBytes(n) {
if (n < 1024) return `${n} B`;
const kb = n / 1024;
return kb < 1024 ? `${kb.toFixed(1)} KB` : `${(kb / 1024).toFixed(2)} MB`;
}
// Lazy-loads the inlined liteparse bundle. The `<script data-su-bundle>` tag
// holds the ESM source as text/plain so it's never parsed on initial page
// load; we Blob-URL it on first use. Cached for subsequent calls. When the
// placeholder carries `data-su-bundle-encoding="gzip-base64"`, we base64-
// decode and gunzip it first (the deploy pipeline picks this encoding when
// the raw bundle would exceed the responder JSON payload cap; see
// dev/tools/guides/platform.md -> "Embedded JS bundles").
async function loadLiteparseBundle() {
if (liteparseModule) return liteparseModule;
const el = document.getElementById('su-bundle-liteparse');
const raw = el?.textContent?.trim();
if (!raw) {
throw new Error('liteparse bundle is missing -- the deploy step inlines it into <script id="su-bundle-liteparse">.');
}
const encoding = el.getAttribute('data-su-bundle-encoding');
let src;
if (!encoding) {
src = raw;
} else if (encoding === 'gzip-base64') {
const bin = atob(raw);
const bytes = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream('gzip'));
src = await new Response(stream).text();
} else {
throw new Error(`liteparse bundle: unsupported data-su-bundle-encoding="${encoding}"`);
}
const blob = new Blob([src], { type: 'text/javascript' });
const url = URL.createObjectURL(blob);