svelte-pdf-view 0.1.0

package/dist/pdf-viewer/renderer-styles.css

@@ -0,0 +1,203 @@
+/* Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * PDF Renderer Styles - Shadow DOM Isolated
+ * This is a derivative work based on PDF.js text_layer_builder.css
+ */
+
+/* CSS Custom Properties with defaults */
+.pdf-renderer-container {
+	--pdf-background-color: #e8e8e8;
+	--pdf-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
+	--pdf-scrollbar-track-color: #f1f1f1;
+	--pdf-scrollbar-thumb-color: #c1c1c1;
+	--pdf-scrollbar-thumb-hover-color: #a1a1a1;
+	--pdf-scrollbar-width: 10px;
+
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	background-color: var(--pdf-background-color);
+	overflow: hidden;
+}
+
+/* Scroll container */
+.pdf-scroll-container {
+	flex: 1;
+	overflow: auto;
+	position: relative;
+	background-color: var(--pdf-background-color);
+}
+
+/* Custom scrollbar styling */
+.pdf-scroll-container::-webkit-scrollbar {
+	width: var(--pdf-scrollbar-width);
+	height: var(--pdf-scrollbar-width);
+}
+
+.pdf-scroll-container::-webkit-scrollbar-track {
+	background: var(--pdf-scrollbar-track-color);
+	border-radius: calc(var(--pdf-scrollbar-width) / 2);
+}
+
+.pdf-scroll-container::-webkit-scrollbar-thumb {
+	background: var(--pdf-scrollbar-thumb-color);
+	border-radius: calc(var(--pdf-scrollbar-width) / 2);
+}
+
+.pdf-scroll-container::-webkit-scrollbar-thumb:hover {
+	background: var(--pdf-scrollbar-thumb-hover-color);
+}
+
+/* Firefox scrollbar */
+.pdf-scroll-container {
+	scrollbar-width: thin;
+	scrollbar-color: var(--pdf-scrollbar-thumb-color) var(--pdf-scrollbar-track-color);
+}
+
+/* Viewer - dynamically created */
+.pdfViewer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px;
+	gap: 16px;
+}
+
+/* Page - dynamically created with CSS variables for text layer */
+.page {
+	--user-unit: 1;
+	--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));
+	--scale-round-x: 1px;
+	--scale-round-y: 1px;
+
+	position: relative;
+	background-color: white;
+	box-shadow: var(--pdf-page-shadow);
+	border-radius: 2px;
+	margin: 0;
+	direction: ltr;
+}
+
+.page .loadingIcon {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: #666;
+	font-size: 14px;
+}
+
+.page .canvasWrapper {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+	z-index: 0;
+}
+
+.page .pdf-canvas {
+	display: block;
+}
+
+/* Text layer - essential styles from PDF.js */
+.textLayer {
+	position: absolute;
+	text-align: initial;
+	inset: 0;
+	overflow: clip;
+	opacity: 1;
+	line-height: 1;
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
+	text-size-adjust: none;
+	forced-color-adjust: none;
+	transform-origin: 0 0;
+	caret-color: CanvasText;
+	z-index: 2;
+}
+
+/* Text layer rotation transforms */
+.textLayer[data-main-rotation='90'] {
+	transform: rotate(90deg) translateY(-100%);
+}
+
+.textLayer[data-main-rotation='180'] {
+	transform: rotate(180deg) translate(-100%, -100%);
+}
+
+.textLayer[data-main-rotation='270'] {
+	transform: rotate(270deg) translateX(-100%);
+}
+
+.textLayer :is(span, br) {
+	color: transparent;
+	position: absolute;
+	white-space: pre;
+	cursor: text;
+	transform-origin: 0% 0%;
+}
+
+.textLayer > :not(.markedContent),
+.textLayer .markedContent span:not(.markedContent) {
+	z-index: 1;
+}
+
+.textLayer span.markedContent {
+	top: 0;
+	height: 0;
+}
+
+.textLayer ::-moz-selection {
+	background: rgba(0, 0, 255, 0.25);
+}
+
+.textLayer ::selection {
+	background: rgba(0, 0, 255, 0.25);
+}
+
+.textLayer br::-moz-selection,
+.textLayer br::selection {
+	background: transparent;
+}
+
+/* Search highlights */
+.textLayer .highlight {
+	margin: -1px;
+	padding: 1px;
+	background-color: rgba(255, 255, 0, 0.4);
+	border-radius: 4px;
+}
+
+.textLayer .highlight.appended {
+	position: initial;
+}
+
+.textLayer .highlight.selected {
+	background-color: rgba(255, 128, 0, 0.6);
+}
+
+.textLayer .highlight.begin {
+	border-radius: 4px 0 0 4px;
+}
+
+.textLayer .highlight.end {
+	border-radius: 0 4px 4px 0;
+}
+
+.textLayer .highlight.middle {
+	border-radius: 0;
+}

package/dist/pdf-viewer/styles.css

@@ -0,0 +1,281 @@
+/* PDF Viewer Styles - Sandboxed for Shadow DOM */
+
+/* Container */
+.pdf-viewer-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	background-color: #f0f0f0;
+	overflow: hidden;
+}
+
+/* Toolbar */
+.pdf-toolbar {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 1rem;
+	padding: 0.625rem 1rem;
+	background-color: #ffffff;
+	color: #333;
+	flex-shrink: 0;
+	flex-wrap: wrap;
+	border-bottom: 1px solid #e0e0e0;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.pdf-toolbar-group {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
+.pdf-toolbar button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	padding: 0;
+	border: 1px solid #e0e0e0;
+	background-color: #fafafa;
+	color: #555;
+	border-radius: 6px;
+	cursor: pointer;
+	transition: all 0.15s ease;
+}
+
+.pdf-toolbar button:hover:not(:disabled) {
+	background-color: #f0f0f0;
+	border-color: #d0d0d0;
+	color: #333;
+}
+
+.pdf-toolbar button:active:not(:disabled) {
+	background-color: #e8e8e8;
+}
+
+.pdf-toolbar button:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.pdf-toolbar input[type='text'],
+.pdf-toolbar input[type='number'] {
+	height: 28px;
+	padding: 0 0.5rem;
+	border: 1px solid #e0e0e0;
+	border-radius: 6px;
+	background-color: #fff;
+	color: #333;
+	font-size: 0.8rem;
+	outline: none;
+	transition:
+		border-color 0.15s,
+		box-shadow 0.15s;
+}
+
+.pdf-toolbar input[type='text']:focus,
+.pdf-toolbar input[type='number']:focus {
+	border-color: #0066cc;
+	box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+}
+
+.pdf-toolbar input[type='number'] {
+	width: 40px;
+	text-align: center;
+	appearance: textfield;
+	-moz-appearance: textfield;
+}
+
+.pdf-toolbar input[type='number']::-webkit-outer-spin-button,
+.pdf-toolbar input[type='number']::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.pdf-toolbar .search-input {
+	width: 160px;
+}
+
+.pdf-toolbar .zoom-level {
+	min-width: 48px;
+	text-align: center;
+	font-size: 0.8rem;
+	color: #666;
+	font-weight: 500;
+}
+
+.pdf-toolbar .page-info {
+	font-size: 0.8rem;
+	color: #888;
+	margin-left: 0.25rem;
+}
+
+.pdf-toolbar .match-info {
+	font-size: 0.75rem;
+	color: #888;
+	min-width: 60px;
+	margin-left: 0.25rem;
+}
+
+/* Scroll container */
+.pdf-scroll-container {
+	flex: 1;
+	overflow: auto;
+	position: relative;
+	background-color: #e8e8e8;
+}
+
+/* Viewer - dynamically created */
+.pdfViewer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px;
+	gap: 16px;
+}
+
+/* Page - dynamically created with CSS variables for text layer */
+.page {
+	--user-unit: 1;
+	--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));
+	--scale-round-x: 1px;
+	--scale-round-y: 1px;
+
+	position: relative;
+	background-color: white;
+	box-shadow:
+		0 2px 8px rgba(0, 0, 0, 0.12),
+		0 1px 3px rgba(0, 0, 0, 0.08);
+	border-radius: 2px;
+	margin: 0;
+	direction: ltr;
+}
+
+.page .loadingIcon {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: #666;
+	font-size: 14px;
+}
+
+.page .canvasWrapper {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+	z-index: 0;
+}
+
+.page .pdf-canvas {
+	display: block;
+}
+
+/* Text layer - essential styles from PDF.js */
+.textLayer {
+	position: absolute;
+	text-align: initial;
+	inset: 0;
+	overflow: clip;
+	opacity: 1;
+	line-height: 1;
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
+	text-size-adjust: none;
+	forced-color-adjust: none;
+	transform-origin: 0 0;
+	caret-color: CanvasText;
+	z-index: 2;
+}
+
+/* Text layer rotation transforms - text is rendered in raw page coordinates,
+   then rotated via CSS to match the canvas orientation */
+.textLayer[data-main-rotation='90'] {
+	transform: rotate(90deg) translateY(-100%);
+}
+
+.textLayer[data-main-rotation='180'] {
+	transform: rotate(180deg) translate(-100%, -100%);
+}
+
+.textLayer[data-main-rotation='270'] {
+	transform: rotate(270deg) translateX(-100%);
+}
+
+.textLayer :is(span, br) {
+	color: transparent;
+	position: absolute;
+	white-space: pre;
+	cursor: text;
+	transform-origin: 0% 0%;
+}
+
+.textLayer > :not(.markedContent),
+.textLayer .markedContent span:not(.markedContent) {
+	z-index: 1;
+}
+
+.textLayer span.markedContent {
+	top: 0;
+	height: 0;
+}
+
+.textLayer ::-moz-selection {
+	background: rgba(0, 0, 255, 0.25);
+}
+
+.textLayer ::selection {
+	background: rgba(0, 0, 255, 0.25);
+}
+
+.textLayer br::-moz-selection,
+.textLayer br::selection {
+	background: transparent;
+}
+
+/* Search highlights */
+.textLayer .highlight {
+	margin: -1px;
+	padding: 1px;
+	background-color: rgba(255, 255, 0, 0.4);
+	border-radius: 4px;
+}
+
+.textLayer .highlight.appended {
+	position: initial;
+}
+
+.textLayer .highlight.selected {
+	background-color: rgba(255, 128, 0, 0.6);
+}
+
+.textLayer .highlight.begin {
+	border-radius: 4px 0 0 4px;
+}
+
+.textLayer .highlight.end {
+	border-radius: 0 4px 4px 0;
+}
+
+.textLayer .highlight.middle {
+	border-radius: 0;
+}
+
+/* Loading state */
+.pdf-loading,
+.pdf-error {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	min-height: 200px;
+	color: #666;
+	font-size: 1rem;
+}
+
+.pdf-error {
+	color: #dc3545;
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+	"name": "svelte-pdf-view",
+	"version": "0.1.0",
+	"description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
+	"author": "Louis Li",
+	"license": "Apache-2.0",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/nullpointerexceptionkek/svelte-pdf-view.git"
+	},
+	"bugs": {
+		"url": "https://github.com/nullpointerexceptionkek/svelte-pdf-view/issues"
+	},
+	"homepage": "https://github.com/nullpointerexceptionkek/svelte-pdf-view#readme",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"LICENSE.md",
+		"README.md"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"@lucide/svelte": "^0.400.0"
+	},
+	"peerDependenciesMeta": {
+		"@lucide/svelte": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.39.1",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.48.5",
+		"@sveltejs/package": "^2.5.6",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@types/node": "^22",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.0",
+		"globals": "^16.5.0",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"publint": "^0.3.15",
+		"svelte": "^5.43.8",
+		"svelte-check": "^4.3.4",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.47.0",
+		"vite": "^7.2.2"
+	},
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"pdf",
+		"pdf-viewer",
+		"pdfjs",
+		"pdf.js",
+		"document-viewer",
+		"svelte-component"
+	],
+	"dependencies": {
+		"pdfjs-dist": "^5.4.394"
+	}
+}