@useprint/preview 0.1.1 → 0.1.3

package/src/app/preview/[...slug]/page.tsx

@@ -2,20 +2,13 @@ import path from "node:path";
 import type { PAGE_SIZES } from "@useprint/shared";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
-import {
-	type CompatibilityCheckingResult,
-	checkCompatibility,
-} from "../../../actions/document-validation/check-compatibility";
 import { getDocumentPathFromSlug } from "../../../actions/get-document-path-from-slug";
 import { renderDocumentByPath } from "../../../actions/render-document-by-path";
 import { Shell } from "../../../components/shell";
-import type { LintingRow } from "../../../components/toolbar/linter";
 
 import { PreviewProvider } from "../../../contexts/preview";
 import { getDocumentsDirectoryMetadata } from "../../../utils/get-documents-directory-metadata";
-import { getLintingSources, loadLintingRowsFrom } from "../../../utils/linting";
-import { loadStream } from "../../../utils/load-stream";
-import { documentsDirectoryAbsolutePath, isBuilding } from "../../env";
+import { documentsDirectoryAbsolutePath } from "../../env";
 import Preview from "./preview";
 
 export const dynamicParams = true;
@@ -35,7 +28,6 @@ const Page = async ({
 }) => {
 	const params = await paramsPromise;
 	const searchParams = await searchParamsPromise;
-	console.log("searchParams", searchParams);
 	// will come in here as segments of a relative path to the document
 	// ex: ['authentication', 'verify-password.tsx']
 	const slug = decodeURIComponent(params.slug.join("/"));
@@ -73,44 +65,6 @@ This is most likely not an issue with the preview server. Maybe there was a typo
 		pageSize,
 		isLandscape,
 	);
-	let lintingRows: LintingRow[] | undefined;
-	let compatibilityCheckingResults: CompatibilityCheckingResult[] | undefined;
-
-	if (isBuilding) {
-		if ("error" in serverDocumentRenderingResult) {
-			throw new Error(serverDocumentRenderingResult.error.message, {
-				cause: serverDocumentRenderingResult.error,
-			});
-		}
-		const lintingSources = getLintingSources(
-			serverDocumentRenderingResult.markup,
-			"",
-		);
-		lintingRows = [];
-		for await (const row of loadLintingRowsFrom(lintingSources)) {
-			lintingRows.push(row);
-		}
-		lintingRows.sort((a, b) => {
-			if (a.result.status === "error" && b.result.status === "warning") {
-				return -1;
-			}
-
-			if (a.result.status === "warning" && b.result.status === "error") {
-				return 1;
-			}
-
-			return 0;
-		});
-		compatibilityCheckingResults = [];
-		for await (const result of loadStream(
-			await checkCompatibility(
-				serverDocumentRenderingResult.reactMarkup,
-				documentPath,
-			),
-		)) {
-			compatibilityCheckingResults.push(result);
-		}
-	}
 
 	return (
 		<PreviewProvider
@@ -125,20 +79,14 @@ This is most likely not an issue with the preview server. Maybe there was a typo
 				{/* This suspense is so that this page doesn't throw warnings */}
 				{/* on the build of the preview server de-opting into         */}
 				{/* client-side rendering on build                            */}
-				<Suspense>
-					<Preview
-						documentTitle={path.basename(documentPath)}
-						pageSize={pageSize || "A4"}
-					/>
-
-					{/* <Toolbar
-            serverLintingRows={lintingRows}
-            serverSpamCheckingResult={spamCheckingResult}
-            serverCompatibilityResults={compatibilityCheckingResults}
-          /> */}
-				</Suspense>
-			</Shell>
-		</PreviewProvider>
+					<Suspense>
+						<Preview
+							documentTitle={path.basename(documentPath)}
+							pageSize={pageSize || "A4"}
+						/>
+					</Suspense>
+				</Shell>
+			</PreviewProvider>
 	);
 };
 

package/src/app/preview/[...slug]/preview.tsx

@@ -11,7 +11,6 @@ import { CodeContainer } from "../../../components/code-container";
 import { PdfViewer } from "../../../components/pdf-viewer";
 import { Print } from "../../../components/print";
 
-import { useToolbarState } from "../../../components/toolbar";
 import { Tooltip } from "../../../components/tooltip";
 import { ActiveViewToggleGroup } from "../../../components/topbar/active-view-toggle-group";
 import { LandscapeToggle } from "../../../components/topbar/landscape-toggle";
@@ -109,15 +108,14 @@ const Preview = ({
 		router.push(`${pathname}?${params.toString()}${location.hash}`);
 	}, 300);
 
-	const { toggled: toolbarToggled } = useToolbarState();
 	const effectiveDimensions = isLandscape
 		? { width: currentPreset.dimensions.height, height: currentPreset.dimensions.width }
 		: currentPreset.dimensions;
-	console.log(effectiveDimensions)
 	return (
 		<>
 			<PrintPreview documentTitle={documentTitle} />
 
+			<div className="flex min-h-0 flex-1 flex-col">
 			<Topbar documentTitle={documentTitle} className="print:hidden">
 				<ViewSizeControls
 					setViewHeight={(height) => {
@@ -160,13 +158,12 @@ const Preview = ({
 			<div
 				{...props}
 				className={cn(
-					"h-[calc(100%-3.5rem-2.375rem)] will-change-[height] flex transition-[height] duration-300",
+					"min-h-0 flex-1 will-change-[height] flex transition-[height] duration-300",
 					activeView === "preview" && "bg-gray-200",
 					activeView === "preview" &&
 						renderedDocumentMetadata?.pdfData &&
-						"p-0",
+						"flex-col overflow-hidden p-0",
 					activeView !== "preview" && "p-4 overflow-auto",
-					toolbarToggled && "h-[calc(100%-3.5rem-13rem)]",
 					className,
 				)}
 				ref={(element) => {
@@ -195,6 +192,7 @@ const Preview = ({
 							renderedDocumentMetadata.pdfData &&
 							PdfViewer && (
 								<PdfViewer
+									className="min-h-0 min-w-0 flex-1"
 									pdfData={renderedDocumentMetadata.pdfData}
 									width={effectiveDimensions.width}
 									height={effectiveDimensions.height}
@@ -236,6 +234,7 @@ const Preview = ({
 
 				<Toaster />
 			</div>
+			</div>
 		</>
 	);
 };

package/src/components/logo.tsx

@@ -3,17 +3,25 @@ import * as React from "react";
 import logo from "../app/logo.png";
 
 export const Logo = () => {
-	return (
-		<div className="flex flex-col items-start justify-center py-4 px-6">
-		<span className="flex flex-row items-center  gap-2 text-white">
-
-		<svg width="24" height="24" viewBox="0 0 1000 1043" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="1000" height="1042.55"/>
-<path d="M276.594 425.53V177.303M702.126 425.53V177.303M843.97 744.679V425.53M134.75 744.679V425.53M276.594 886.523V602.835M702.126 886.523V602.835" stroke="white" stroke-width="70.922"/>
-</svg>
-useprint.dev
-
-		</span>
-		</div>
-	);
+  return (
+    <div className="flex flex-col items-start justify-center py-4 px-6">
+      <span className="flex flex-row items-center  gap-2 text-white">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 1000 1043"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect width="1000" height="1042.55" />
+          <path
+            d="M276.594 425.53V177.303M702.126 425.53V177.303M843.97 744.679V425.53M134.75 744.679V425.53M276.594 886.523V602.835M702.126 886.523V602.835"
+            stroke="white"
+            strokeWidth="70.922"
+          />
+        </svg>
+        usePrint
+      </span>
+    </div>
+  );
 };

package/src/components/pdf-viewer.tsx

@@ -2,6 +2,7 @@
 import type React from "react";
 import { useMemo, useState } from "react";
 import { Document, Page, pdfjs} from "react-pdf";
+import { cn } from "../utils";
 import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/esm/Page/TextLayer.css";
 // Set up the worker for react-pdf (which uses pdfjs-dist under the hood)
@@ -16,20 +17,58 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   import.meta.url,
 ).toString();
 
+/** Letter height/width using the same mm proportions as PAGE_SIZES (279mm × 216mm). */
+const DEFAULT_PAGE_ASPECT = 279 / 216;
+
+function PdfPageSkeleton({
+	width,
+	height,
+}: {
+	width: string | number;
+	height?: string | number;
+}) {
+	const wNum = typeof width === "number" ? width : null;
+	const hNum =
+		typeof height === "number" && Number.isFinite(height) ? height : null;
+	const boxHeight =
+		hNum ?? (wNum != null ? Math.round(wNum * DEFAULT_PAGE_ASPECT) : null);
+
+	const style: React.CSSProperties = {};
+	if (wNum != null) {
+		style.width = wNum;
+	} else {
+		style.width = typeof width === "string" ? width : "100%";
+	}
+	if (boxHeight != null) {
+		style.height = boxHeight;
+	} else {
+		style.aspectRatio = `216 / 279`;
+	}
+
+	return (
+		<div
+			aria-busy="true"
+			aria-label="Loading PDF"
+			className="mb-6 shrink-0 animate-pulse rounded-sm bg-gray-300/80 shadow-sm ring-1 ring-black/5"
+			style={style}
+		/>
+	);
+}
+
 type PdfViewerProps = {
 	pdfData: string; // base64 encoded PDF
 	width?: string | number;
 	height?: string | number;
-	style?: React.CSSProperties;
 	zoom?: number;
-};
+} & Omit<React.ComponentProps<"div">, "children">;
 
 export const PdfViewer = ({
 	pdfData,
 	width = "100%",
 	height,
 	style,
-	zoom: initialZoom,
+	zoom: _zoom,
+	className,
 	...props
 }: PdfViewerProps) => {
 	const [numPages, setNumPages] = useState<number | null>(null);
@@ -47,40 +86,42 @@ export const PdfViewer = ({
 	const pageWidth = typeof width === "number" ? width : undefined;
 
 	return (
-		<div className="flex flex-col h-full min-w-full" style={style} {...props}>
+		<div
+			className={cn("flex min-h-0 min-w-0 flex-1 flex-col", className)}
+			style={style}
+			{...props}
+		>
 			<div
-				className="flex-1 overflow-auto flex flex-col items-center px-4 min-w-full"
+				className="flex min-h-0 min-w-0 flex-1 flex-col items-center overflow-auto px-4 pb-12 pt-2"
 				style={{
 					width: typeof width === "string" ? width : "100%",
 				}}
 			>
-				<div className="flex flex-col w-full items-center min-h-full justify-center py-12">
+				<div className="flex w-full flex-col items-center pt-10">
 					{pdfFile && (
 						<Document
-
 							file={pdfFile}
 							onLoadSuccess={onDocumentLoadSuccess}
-							loading={<div className="text-center p-5">Loading PDF...</div>}
+							loading={<PdfPageSkeleton width={width} height={height} />}
 							error={
 								<div className="p-5 text-center text-red-500">
 									Error loading PDF
 								</div>
 							}
-							className="flex flex-col items-center w-full max-h-full"
+							className="flex w-full flex-col items-center"
 						>
 							{numPages &&
 								Array.from({ length: numPages }, (_, i) => i + 1).map((pageNum) => (
-										<Page
-											pageNumber={pageNum}
-											width={pageWidth}
-											height={Number(height)}
-											scale={1}
-											// scale={scale}
-											renderTextLayer
-											renderAnnotationLayer
-											className="mb-6"
-											key={pageNum}
-										/>
+									<Page
+										pageNumber={pageNum}
+										width={pageWidth}
+										height={Number(height)}
+										scale={1}
+										renderTextLayer
+										renderAnnotationLayer
+										className="mb-6"
+										key={pageNum}
+									/>
 								))}
 						</Document>
 					)}

package/src/components/print.tsx

@@ -1,20 +1,32 @@
+"use client";
+
 import { PageSize } from "@useprint/shared";
 import type * as React from "react";
+import { useCallback, useEffect } from "react";
 import { toast } from "sonner";
 
+function isEditableElement(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) {
+		return false;
+	}
+	if (target.isContentEditable) {
+		return true;
+	}
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
+
 export const Print = ({ pdfData, options }: { pdfData?: string; options?: { pageSize?: PageSize["name"], landscape?: boolean } }) => {
-	const onFormSubmit = async (e: React.FormEvent) => {
+	const triggerPrint = useCallback(async () => {
 		if (typeof window === "undefined") {
 			return;
 		}
-		e.preventDefault();
 		if (!pdfData) {
 			toast.error("No PDF data available to print!");
 			return;
 		}
 
 		try {
-			// Convert base64 to blob
 			const binaryString = atob(pdfData);
 			const bytes = new Uint8Array(binaryString.length);
 			for (let i = 0; i < binaryString.length; i++) {
@@ -23,12 +35,10 @@ export const Print = ({ pdfData, options }: { pdfData?: string; options?: { page
 			const blob = new Blob([bytes], { type: "application/pdf" });
 			const url = URL.createObjectURL(blob);
 
-			// Open PDF in new window and trigger print
 			const printWindow = window.open(url, "_blank");
 			if (printWindow) {
 				printWindow.onload = () => {
 					printWindow.print();
-					// Clean up the URL after a delay to allow printing
 					setTimeout(() => {
 						URL.revokeObjectURL(url);
 					}, 1000);
@@ -41,6 +51,28 @@ export const Print = ({ pdfData, options }: { pdfData?: string; options?: { page
 			console.error("Error printing PDF:", error);
 			toast.error("Failed to print PDF");
 		}
+	}, [pdfData]);
+
+	useEffect(() => {
+		const onKeyDown = (e: KeyboardEvent) => {
+			const isPrintShortcut =
+				(e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "p";
+			if (!isPrintShortcut) {
+				return;
+			}
+			if (isEditableElement(e.target)) {
+				return;
+			}
+			e.preventDefault();
+			void triggerPrint();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [triggerPrint]);
+
+	const onFormSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		await triggerPrint();
 	};
 
 	return (

package/src/components/shell.tsx

@@ -78,11 +78,10 @@ export const Shell = ({ children, currentDocumentOpenSlug }: ShellProps) => {
         </React.Suspense>
         <main
           className={cn(
-            'inline-block relative overflow-hidden will-change-[width]',
+            'relative flex min-h-0 flex-1 flex-col overflow-hidden will-change-[width]',
             'w-full h-full',
             '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
             {
-              'lg:w-[calc(100%-16rem)]': sidebarToggled,
               'opacity-0 lg:opacity-100': !sidebarToggled,
             },
           )}

package/src/utils/__snapshots__/get-document-component.spec.ts.snap

@@ -1,185 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`getDocumentComponent() > with a demo document template 1`] = `
-"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html dir="ltr" lang="en">
-  <head>
-    <link rel="preload" as="image" href="/static/vercel-logo.png" />
-    <link rel="preload" as="image" href="/static/vercel-user.png" />
-    <link rel="preload" as="image" href="/static/vercel-arrow.png" />
-    <link rel="preload" as="image" href="/static/vercel-team.png" />
-    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-    <meta name="x-apple-disable-message-reformatting" />
-    <!--$-->
-  </head>
-  <body
-    style='margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;background-color:rgb(255,255,255);padding-left:0.5rem;padding-right:0.5rem;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'>
-    <div
-      style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
-      data-skip-in-text="true">
-      Join Alan on Vercel
-      <div>
-         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
-      </div>
-    </div>
-    <table
-      align="center"
-      width="100%"
-      border="0"
-      cellpadding="0"
-      cellspacing="0"
-      role="presentation"
-      style="margin-left:auto;margin-right:auto;margin-top:40px;margin-bottom:40px;max-width:465px;border-radius:0.25rem;border-width:1px;border-color:rgb(234,234,234);border-style:solid;padding:20px">
-      <tbody>
-        <tr style="width:100%">
-          <td>
-            <table
-              align="center"
-              width="100%"
-              border="0"
-              cellpadding="0"
-              cellspacing="0"
-              role="presentation"
-              style="margin-top:32px">
-              <tbody>
-                <tr>
-                  <td>
-                    <img
-                      alt="Vercel Logo"
-                      height="37"
-                      src="/static/vercel-logo.png"
-                      style="margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:block;outline:none;border:none;text-decoration:none"
-                      width="40" />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h1
-              style="margin-left:0px;margin-right:0px;margin-top:30px;margin-bottom:30px;padding:0px;text-align:center;font-weight:400;font-size:24px;color:rgb(0,0,0)">
-              Join <strong>Enigma</strong> on <strong>Vercel</strong>
-            </h1>
-            <p
-              style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
-              Hello
-              <!-- -->alanturing<!-- -->,
-            </p>
-            <p
-              style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
-              <strong>Alan</strong> (<a
-                href="mailto:alan.turing@example.com"
-                style="color:rgb(37,99,235);text-decoration-line:none"
-                target="_blank"
-                >alan.turing@example.com</a
-              >) has invited you to the <strong>Enigma</strong> team on<!-- -->
-              <strong>Vercel</strong>.
-            </p>
-            <table
-              align="center"
-              width="100%"
-              border="0"
-              cellpadding="0"
-              cellspacing="0"
-              role="presentation">
-              <tbody>
-                <tr>
-                  <td>
-                    <table
-                      align="center"
-                      width="100%"
-                      border="0"
-                      cellpadding="0"
-                      cellspacing="0"
-                      role="presentation">
-                      <tbody style="width:100%">
-                        <tr style="width:100%">
-                          <td align="right" data-id="__useprint-column">
-                            <img
-                              alt="alanturing&#x27;s profile picture"
-                              height="64"
-                              src="/static/vercel-user.png"
-                              style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
-                              width="64" />
-                          </td>
-                          <td align="center" data-id="__useprint-column">
-                            <img
-                              alt="Arrow indicating invitation"
-                              height="9"
-                              src="/static/vercel-arrow.png"
-                              style="display:block;outline:none;border:none;text-decoration:none"
-                              width="12" />
-                          </td>
-                          <td align="left" data-id="__useprint-column">
-                            <img
-                              alt="Enigma team logo"
-                              height="64"
-                              src="/static/vercel-team.png"
-                              style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
-                              width="64" />
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <table
-              align="center"
-              width="100%"
-              border="0"
-              cellpadding="0"
-              cellspacing="0"
-              role="presentation"
-              style="margin-top:32px;margin-bottom:32px;text-align:center">
-              <tbody>
-                <tr>
-                  <td>
-                    <a
-                      href="https://vercel.com"
-                      style="border-radius:0.25rem;background-color:rgb(0,0,0);padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px;text-align:center;font-weight:600;font-size:12px;color:rgb(255,255,255);text-decoration-line:none;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px"
-                      target="_blank"
-                      ><span
-                        ><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span
-                      ><span
-                        style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"
-                        >Join the team</span
-                      ><span
-                        ><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span
-                      ></a
-                    >
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <p
-              style="font-size:14px;color:rgb(0,0,0);line-height:24px;margin-top:16px;margin-bottom:16px">
-              or copy and paste this URL into your browser:<!-- -->
-              <a
-                href="https://vercel.com"
-                style="color:rgb(37,99,235);text-decoration-line:none"
-                target="_blank"
-                >https://vercel.com</a
-              >
-            </p>
-            <hr
-              style="margin-left:0px;margin-right:0px;margin-top:26px;margin-bottom:26px;width:100%;border-width:1px;border-color:rgb(234,234,234);border-style:solid;border:none;border-top:1px solid #eaeaea" />
-            <p
-              style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-top:16px;margin-bottom:16px">
-              This invitation was intended for<!-- -->
-              <span style="color:rgb(0,0,0)">alanturing</span>. This invite was
-              sent from <span style="color:rgb(0,0,0)">204.13.186.218</span>
-              <!-- -->located in<!-- -->
-              <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you
-              were not expecting this invitation, you can ignore this document. If
-              you are concerned about your account&#x27;s safety, please reply
-              to this document to get in touch with us.
-            </p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <!--/$-->
-  </body>
-</html>
-"
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html style="margin:0;padding:0" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>
+          html {
+            background-color: rgb(229 231 235);
+          }
+          @media print {
+            background-color: white;
+          }
+            div[title="end of content"] {
+              display: none !important;
+            }
+            </style></head><body style="background-color:#09090b;margin:0;padding:0"><div class="useprint-unbreakable useprint-page" style="background-color:rgb(9,9,11);padding-left:2.5rem;padding-right:2.5rem;padding-top:3rem;padding-bottom:3rem;color:rgb(250,250,250);break-inside:avoid;break-after:auto;break-before:auto;page-break-inside:avoid;width:794px;height:1123px" data-unbreakable="true"><p style="margin:0px;font-size:0.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:0.3em;color:rgb(113,113,122)">Proposal ready</p><h1 style="margin-bottom:2rem;margin-top:0.75rem;text-align:center;font-size:34px;font-weight:600">Project proposal</h1><p>Hello <!-- -->Northwind Studio<!-- -->,</p><p>We prepared a printable proposal for <strong>Summer product launch</strong>. Use this version for review, approval, or export to PDF.</p><div style="border-radius:0.75rem;border-width:1px;border-color:rgb(39,39,42);background-color:rgb(24,24,27);padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem">A concise scope, timeline, and delivery plan for a multi-page printable proposal.</div><div style="margin-top:2rem;margin-bottom:2rem;text-align:center"><a href="https://useprint.dev/docs/getting-started/your-first-document" style="display:inline-block;border-radius:0.5rem;background-color:rgb(255,255,255);padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;color:rgb(9,9,11);text-decoration-line:none">Open proposal</a></div><p style="font-size:0.875rem;line-height:1.25rem;color:rgb(161,161,170)">Tip: this document is designed to preview well in the browser and render cleanly through Chromium-based PDF generation.</p></div><!--/$--></body></html>"
+`;
+
+exports[`getDocumentComponent() with a demo document template 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html style="margin:0;padding:0" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--><style>
+          html {
+            background-color: rgb(229 231 235);
+          }
+          @media print {
+            background-color: white;
+          }
+            div[title="end of content"] {
+              display: none !important;
+            }
+            </style></head><body style="background-color:#09090b;margin:0;padding:0"><div class="useprint-unbreakable useprint-page" style="background-color:rgb(9,9,11);padding-left:2.5rem;padding-right:2.5rem;padding-top:3rem;padding-bottom:3rem;color:rgb(250,250,250);break-inside:avoid;break-after:auto;break-before:auto;page-break-inside:avoid;width:794px;height:1123px" data-unbreakable="true"><p style="margin:0px;font-size:0.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:0.3em;color:rgb(113,113,122)">Proposal ready</p><h1 style="margin-bottom:2rem;margin-top:0.75rem;text-align:center;font-size:34px;font-weight:600">Project proposal</h1><p>Hello <!-- -->Northwind Studio<!-- -->,</p><p>We prepared a printable proposal for <strong>Summer product launch</strong>. Use this version for review, approval, or export to PDF.</p><div style="border-radius:0.75rem;border-width:1px;border-color:rgb(39,39,42);background-color:rgb(24,24,27);padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem">A concise scope, timeline, and delivery plan for a multi-page printable proposal.</div><div style="margin-top:2rem;margin-bottom:2rem;text-align:center"><a href="https://useprint.dev/docs/getting-started/your-first-document" style="display:inline-block;border-radius:0.5rem;background-color:rgb(255,255,255);padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;color:rgb(9,9,11);text-decoration-line:none">Open proposal</a></div><p style="font-size:0.875rem;line-height:1.25rem;color:rgb(161,161,170)">Tip: this document is designed to preview well in the browser and render cleanly through Chromium-based PDF generation.</p></div><!--/$--></body></html>"
 `;

package/src/utils/canidocument/ast/get-object-variables.ts

@@ -1,6 +1,6 @@
 import type { Node } from '@babel/traverse';
 import traverse from '@babel/traverse';
-import type { AST } from '../../../actions/document-validation/check-compatibility';
+import type { AST } from '../types';
 
 export interface Position {
   line: number;

package/src/utils/canidocument/ast/get-used-style-properties.ts

@@ -1,6 +1,6 @@
 /** biome-ignore-all lint/nursery/noNestedComponentDefinitions: There are no components here, just visitor functions */
 import traverse from '@babel/traverse';
-import type { AST } from '../../../actions/document-validation/check-compatibility';
+import type { AST } from '../types';
 import { generateTailwindCssRules } from '../tailwind/generate-tailwind-rules';
 import { getTailwindMetadata } from '../tailwind/get-tailwind-metadata';
 import type { ObjectVariables, SourceLocation } from './get-object-variables';