@spaceinvoices/react-ui 0.4.10 → 0.4.12

package/src/components/documents/public/public-document-summary.tsx

@@ -0,0 +1,343 @@
+import type { AdvanceInvoice, CreditNote, DeliveryNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import { Badge } from "@/ui/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { getDocumentConfig, type DocumentTypes } from "../types";
+import { getDocumentPaymentStatus } from "../view/document-details-card";
+import de from "../view/locales/de";
+import es from "../view/locales/es";
+import fr from "../view/locales/fr";
+import hr from "../view/locales/hr";
+import it from "../view/locales/it";
+import nl from "../view/locales/nl";
+import pl from "../view/locales/pl";
+import pt from "../view/locales/pt";
+import sl from "../view/locales/sl";
+
+const translations = {
+  sl,
+  de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
+  sv: {
+    Type: "Typ",
+    Number: "Nummer",
+    Date: "Datum",
+    "Due date": "Förfallodatum",
+    "Service date": "Tjänstedatum",
+    "Service period": "Tjänsteperiod",
+    "Valid until": "Giltig till",
+    Customer: "Kund",
+    Status: "Status",
+    Total: "Totalt",
+    Paid: "Betalt",
+    Due: "Att betala",
+    "Paid in full": "Betald i sin helhet",
+    "Partially paid": "Delvis betald",
+    Unpaid: "Obetald",
+    Voided: "Makulerad",
+    Overdue: "Förfallen",
+    Invoice: "Faktura",
+    Estimate: "Offert",
+    "Credit Note": "Kreditnota",
+    "Advance Invoice": "Förskottsfaktura",
+    "Delivery Note": "Följesedel",
+  },
+  fi: {
+    Type: "Tyyppi",
+    Number: "Numero",
+    Date: "Päivämäärä",
+    "Due date": "Eräpäivä",
+    "Service date": "Palvelupäivä",
+    "Service period": "Palvelujakso",
+    "Valid until": "Voimassa asti",
+    Customer: "Asiakas",
+    Status: "Tila",
+    Total: "Yhteensä",
+    Paid: "Maksettu",
+    Due: "Maksamatta",
+    "Paid in full": "Maksettu kokonaan",
+    "Partially paid": "Osittain maksettu",
+    Unpaid: "Maksamatta",
+    Voided: "Mitätöity",
+    Overdue: "Erääntynyt",
+    Invoice: "Lasku",
+    Estimate: "Tarjous",
+    "Credit Note": "Hyvityslasku",
+    "Advance Invoice": "Ennakkolasku",
+    "Delivery Note": "Lähete",
+  },
+  et: {
+    Type: "Tüüp",
+    Number: "Number",
+    Date: "Kuupäev",
+    "Due date": "Tähtaeg",
+    "Service date": "Teenuse kuupäev",
+    "Service period": "Teenuse periood",
+    "Valid until": "Kehtiv kuni",
+    Customer: "Klient",
+    Status: "Olek",
+    Total: "Kokku",
+    Paid: "Makstud",
+    Due: "Tasumata",
+    "Paid in full": "Täielikult makstud",
+    "Partially paid": "Osaliselt makstud",
+    Unpaid: "Tasumata",
+    Voided: "Tühistatud",
+    Overdue: "Üle tähtaja",
+    Invoice: "Arve",
+    Estimate: "Hinnapakkumine",
+    "Credit Note": "Kreeditarve",
+    "Advance Invoice": "Ettemaksuarve",
+    "Delivery Note": "Saateleht",
+  },
+  bg: {
+    Type: "Вид",
+    Number: "Номер",
+    Date: "Дата",
+    "Due date": "Краен срок",
+    "Service date": "Дата на услугата",
+    "Service period": "Период на услугата",
+    "Valid until": "Валидно до",
+    Customer: "Клиент",
+    Status: "Статус",
+    Total: "Общо",
+    Paid: "Платено",
+    Due: "Дължимо",
+    "Paid in full": "Платено изцяло",
+    "Partially paid": "Частично платено",
+    Unpaid: "Неплатено",
+    Voided: "Анулирано",
+    Overdue: "Просрочено",
+    Invoice: "Фактура",
+    Estimate: "Оферта",
+    "Credit Note": "Кредитно известие",
+    "Advance Invoice": "Авансова фактура",
+    "Delivery Note": "Доставна бележка",
+  },
+  cs: {
+    Type: "Typ",
+    Number: "Číslo",
+    Date: "Datum",
+    "Due date": "Datum splatnosti",
+    "Service date": "Datum služby",
+    "Service period": "Období služby",
+    "Valid until": "Platné do",
+    Customer: "Zákazník",
+    Status: "Stav",
+    Total: "Celkem",
+    Paid: "Uhrazeno",
+    Due: "K úhradě",
+    "Paid in full": "Uhrazeno v plné výši",
+    "Partially paid": "Částečně uhrazeno",
+    Unpaid: "Neuhrazeno",
+    Voided: "Stornováno",
+    Overdue: "Po splatnosti",
+    Invoice: "Faktura",
+    Estimate: "Nabídka",
+    "Credit Note": "Dobropis",
+    "Advance Invoice": "Zálohová faktura",
+    "Delivery Note": "Dodací list",
+  },
+  sk: {
+    Type: "Typ",
+    Number: "Číslo",
+    Date: "Dátum",
+    "Due date": "Dátum splatnosti",
+    "Service date": "Dátum služby",
+    "Service period": "Obdobie služby",
+    "Valid until": "Platné do",
+    Customer: "Zákazník",
+    Status: "Stav",
+    Total: "Celkom",
+    Paid: "Uhradené",
+    Due: "Na úhradu",
+    "Paid in full": "Uhradené v plnej výške",
+    "Partially paid": "Čiastočne uhradené",
+    Unpaid: "Neuhradené",
+    Voided: "Stornované",
+    Overdue: "Po splatnosti",
+    Invoice: "Faktura",
+    Estimate: "Cenová ponuka",
+    "Credit Note": "Dobropis",
+    "Advance Invoice": "Zálohová faktúra",
+    "Delivery Note": "Dodací list",
+  },
+  nb: {
+    Type: "Type",
+    Number: "Nummer",
+    Date: "Dato",
+    "Due date": "Forfallsdato",
+    "Service date": "Tjenestedato",
+    "Service period": "Tjenesteperiode",
+    "Valid until": "Gyldig til",
+    Customer: "Kunde",
+    Status: "Status",
+    Total: "Totalt",
+    Paid: "Betalt",
+    Due: "Til betaling",
+    "Paid in full": "Fullt betalt",
+    "Partially paid": "Delvis betalt",
+    Unpaid: "Ubetalt",
+    Voided: "Annullert",
+    Overdue: "Forfalt",
+    Invoice: "Faktura",
+    Estimate: "Tilbud",
+    "Credit Note": "Kreditnota",
+    "Advance Invoice": "Forskuddsfaktura",
+    "Delivery Note": "Følgeseddel",
+  },
+  is: {
+    Type: "Tegund",
+    Number: "Númer",
+    Date: "Dagsetning",
+    "Due date": "Gjalddagi",
+    "Service date": "Þjónustudagsetning",
+    "Service period": "Þjónustutímabil",
+    "Valid until": "Gildir til",
+    Customer: "Viðskiptavinur",
+    Status: "Staða",
+    Total: "Samtals",
+    Paid: "Greitt",
+    Due: "Til greiðslu",
+    "Paid in full": "Greitt að fullu",
+    "Partially paid": "Greitt að hluta",
+    Unpaid: "Ógreitt",
+    Voided: "Ógilt",
+    Overdue: "Gjaldfallið",
+    Invoice: "Reikningur",
+    Estimate: "Tilboð",
+    "Credit Note": "Kreditreikningur",
+    "Advance Invoice": "Fyrirframreikningur",
+    "Delivery Note": "Afhendingarseðill",
+  },
+} as const;
+
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
+
+type PublicDocumentSummaryProps = ComponentTranslationProps & {
+  document: Document;
+  documentType: DocumentTypes;
+  locale?: string;
+  documentTypeLabel?: string;
+};
+
+function formatCurrency(amount: number, currencyCode: string, locale: string): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: currencyCode,
+  }).format(amount);
+}
+
+function formatDate(date: Date | string | null | undefined, locale: string): string {
+  if (!date) return "-";
+  const d = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }).format(d);
+}
+
+export function PublicDocumentSummary({
+  document,
+  documentType,
+  locale = "en",
+  documentTypeLabel,
+  ...i18nProps
+}: PublicDocumentSummaryProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+  const currencyCode = document.currency_code;
+  const sign = documentType === "credit_note" ? -1 : 1;
+  const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
+  const fmtDate = (date: Date | string | null | undefined) => formatDate(date, locale);
+  const config = getDocumentConfig(documentType);
+  const resolvedDocumentTypeLabel = documentTypeLabel ?? t(config.singularName);
+  const isInvoiceLike = documentType === "invoice" || documentType === "advance_invoice";
+  const isEstimate = documentType === "estimate";
+  const invoiceDoc = document as Invoice | AdvanceInvoice;
+
+  const statusBadge = (() => {
+    if (isInvoiceLike) {
+      return getDocumentPaymentStatus(invoiceDoc, t);
+    }
+    if (document.voided_at && new Date(document.voided_at).getTime() > 0) {
+      return { label: t("Voided"), variant: "secondary" as const };
+    }
+    return { label: resolvedDocumentTypeLabel, variant: "outline" as const };
+  })();
+
+  const rows: Array<{ label: string; value: string }> = [
+    { label: t("Type"), value: resolvedDocumentTypeLabel },
+    { label: t("Number"), value: document.number },
+    { label: t("Date"), value: fmtDate(document.date) },
+  ];
+
+  if (isInvoiceLike && invoiceDoc.date_due) {
+    rows.push({ label: t("Due date"), value: fmtDate(invoiceDoc.date_due) });
+  }
+
+  if (isEstimate) {
+    const estimateDoc = document as Estimate;
+    if (estimateDoc.date_valid_till) {
+      rows.push({ label: t("Valid until"), value: fmtDate(estimateDoc.date_valid_till) });
+    }
+  }
+
+  if (documentType === "invoice" || documentType === "credit_note") {
+    const serviceDoc = document as Invoice | CreditNote;
+    if (serviceDoc.date_service) {
+      rows.push({
+        label: serviceDoc.date_service_to ? t("Service period") : t("Service date"),
+        value: serviceDoc.date_service_to
+          ? `${fmtDate(serviceDoc.date_service)} - ${fmtDate(serviceDoc.date_service_to)}`
+          : fmtDate(serviceDoc.date_service),
+      });
+    }
+  }
+
+  if (document.customer?.name) {
+    rows.push({ label: t("Customer"), value: document.customer.name });
+  }
+
+  if (isInvoiceLike) {
+    rows.push({ label: t("Status"), value: statusBadge.label });
+  }
+
+  rows.push({ label: t("Total"), value: fmt(document.total_with_tax * sign) });
+
+  if (isInvoiceLike && invoiceDoc.total_paid > 0) {
+    rows.push({ label: t("Paid"), value: fmt(invoiceDoc.total_paid) });
+    rows.push({ label: t("Due"), value: fmt(invoiceDoc.total_due) });
+  }
+
+  return (
+    <Card size="sm" className="border-border/70 bg-background/95 shadow-sm">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1">
+            <CardTitle>{resolvedDocumentTypeLabel}</CardTitle>
+            <p className="text-muted-foreground text-sm">{document.number}</p>
+          </div>
+          <Badge variant={statusBadge.variant}>{statusBadge.label}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <dl className="grid gap-3 sm:grid-cols-2">
+          {rows.map((row) => (
+            <div key={`${row.label}-${row.value}`} className="space-y-1 rounded-lg border border-border/60 bg-muted/20 p-3">
+              <dt className="text-muted-foreground text-xs uppercase tracking-[0.08em]">{row.label}</dt>
+              <dd className="font-medium text-sm">{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/documents/shared/document-preview-display.tsx

@@ -1,12 +1,22 @@
 "use client";
 
-import { getClientHeaders, type AdvanceInvoice, type CreditNote, type Estimate, type Invoice } from "@spaceinvoices/js-sdk";
+import {
+  type AdvanceInvoice,
+  type CreditNote,
+  type DeliveryNote,
+  type Estimate,
+  type Invoice,
+  invoices,
+} from "@spaceinvoices/js-sdk";
+import { getClientHeaders } from "@spaceinvoices/js-sdk/client-headers";
 import { useQuery } from "@tanstack/react-query";
 import { AlertCircle, FileText } from "lucide-react";
 import { useEffect, useMemo } from "react";
+import { getEntityCountryCapabilities } from "@/ui/lib/country-capabilities";
 import { cn } from "@/ui/lib/utils";
 import { useEntitiesOptional } from "@/ui/providers/entities-context";
-import { useSDK } from "@/ui/providers/sdk-provider";
+import { useSpaceInvoicesRuntimeOptional } from "@/ui/providers/space-invoices-provider";
+import { getDocumentConfigFromShareableId } from "../types";
 import { DocumentPreviewSkeleton } from "./document-preview-skeleton";
 import { ScaledDocumentPreview } from "./scaled-document-preview";
 import { useA4Scaling } from "./use-a4-scaling";
@@ -21,21 +31,7 @@ function emitSavedPreviewDebug(detail: Record<string, unknown>) {
   window.dispatchEvent(new CustomEvent(SAVED_PREVIEW_TIMING_EVENT, { detail }));
 }
 
-type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
-
-/**
- * Get API path segment from shareable ID prefix
- * Shareable IDs are prefixed with document type: inv_share_, est_share_, cre_share_, adv_share_
- */
-function getDocTypePathFromShareableId(shareableId: string): string {
-  if (shareableId.startsWith("inv_share_")) return "invoices";
-  if (shareableId.startsWith("est_share_")) return "estimates";
-  if (shareableId.startsWith("cre_share_")) return "credit-notes";
-  if (shareableId.startsWith("adv_share_")) return "advance-invoices";
-  // Fallback to invoices for backwards compatibility
-  return "invoices";
-}
-
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
 export function getSavedDocumentPreviewQueryKey({
   documentId,
   documentUpdatedAt,
@@ -62,14 +58,18 @@ export function getSavedDocumentPreviewQueryKey({
   ] as const;
 }
 
+export function getSavedDocumentPreviewQueryPrefix(documentId: string) {
+  return [SAVED_DOCUMENT_PREVIEW_QUERY_KEY, documentId] as const;
+}
+
 type DocumentPreviewDisplayProps = {
   /** The document to display (invoice, estimate, credit note, or advance invoice) */
   document: Document;
   template?: "modern" | "classic" | "condensed" | "minimal" | "fashion";
   className?: string;
   apiBaseUrl?: string;
-  /** Locale for document rendering (e.g., "en-US", "sl-SI"). Uses user's UI language. */
-  locale?: string;
+  /** Language for translated labels in public preview rendering. */
+  language?: string;
   /** Whether this is a public view (no auth required) */
   isPublicView?: boolean;
   /** Shareable ID for public view (required when isPublicView is true) */
@@ -80,12 +80,16 @@ type DocumentPreviewDisplayProps = {
   documentTypeLabel?: string;
   /** Whether preview fetching is currently allowed */
   fetchEnabled?: boolean;
+  /** When true, keep the preview card fixed and scroll only the PDF viewport inside it */
+  containedScroll?: boolean;
 };
 
 /**
  * Document Preview Display Component
  *
  * Fetches and displays the HTML preview of a saved document.
+ * Saved previews use backend/entity defaults for document output.
+ * Public previews may pass a language override while leaving formatting locale to the backend default.
  * Works with any document type (invoice, estimate, credit note, advance invoice).
  * Document type is auto-detected from the ID prefix.
  */
@@ -94,32 +98,39 @@ export function DocumentPreviewDisplay({
   template,
   className,
   apiBaseUrl,
-  locale: _locale,
+  language,
   isPublicView = false,
   shareableId,
   t: tProp,
   documentTypeLabel,
   fetchEnabled = true,
+  containedScroll = false,
 }: DocumentPreviewDisplayProps) {
   const t = tProp ?? ((key: string) => key);
   const entitiesContext = useEntitiesOptional();
   const activeEntity = entitiesContext?.activeEntity;
-  const { sdk } = useSDK();
+  const runtime = useSpaceInvoicesRuntimeOptional();
+  const countryCapabilities = getEntityCountryCapabilities(activeEntity);
   const documentId = document?.id;
   const documentUpdatedAt = document?.updated_at ?? null;
+  const effectiveTemplate = countryCapabilities.allowPdfTemplateSelection
+    ? template
+    : countryCapabilities.resolvedPdfTemplate;
 
   const queryKey = useMemo(() => {
     return getSavedDocumentPreviewQueryKey({
       documentId: documentId ?? shareableId ?? "",
       documentUpdatedAt,
       entityId: activeEntity?.id,
-      template,
+      template: effectiveTemplate,
       isPublicView,
       shareableId,
     });
-  }, [activeEntity?.id, documentId, documentUpdatedAt, isPublicView, shareableId, template]);
+  }, [activeEntity?.id, documentId, documentUpdatedAt, effectiveTemplate, isPublicView, shareableId]);
 
-  const prerequisitesReady = isPublicView ? !!shareableId && !!apiBaseUrl : !!documentId && !!activeEntity?.id && !!sdk;
+  const prerequisitesReady = isPublicView
+    ? !!shareableId && !!apiBaseUrl
+    : !!documentId && !!activeEntity?.id && !!runtime?.hasAccessToken;
 
   const previewQuery = useQuery({
     queryKey,
@@ -133,18 +144,21 @@ export function DocumentPreviewDisplay({
 
       try {
         if (isPublicView && shareableId && apiBaseUrl) {
-          const docTypePath = getDocTypePathFromShareableId(shareableId);
-          const response = await fetch(`${apiBaseUrl}/${docTypePath}/shareable/${shareableId}/html`, {
-            headers: getClientHeaders("ui"),
-            signal: abortController.signal,
-          });
+          const params = language ? `?${new URLSearchParams({ language }).toString()}` : "";
+          const response = await fetch(
+            `${apiBaseUrl}/${getDocumentConfigFromShareableId(shareableId).apiEndpoint}/shareable/${shareableId}/html${params}`,
+            {
+              headers: getClientHeaders("ui"),
+              signal: abortController.signal,
+            },
+          );
           if (!response.ok) {
             throw new Error("Failed to load preview");
           }
           return await response.text();
         }
 
-        if (!documentId || !activeEntity?.id || !sdk) {
+        if (!documentId || !activeEntity?.id || !runtime?.hasAccessToken) {
           throw new Error("Preview context unavailable");
         }
 
@@ -154,9 +168,9 @@ export function DocumentPreviewDisplay({
           documentId,
         });
 
-        const html = await sdk.invoices.renderHtml(
+        const html = await invoices.renderHtml(
           documentId,
-          { template },
+          { template: effectiveTemplate },
           {
             entity_id: activeEntity.id,
             signal: abortController.signal,
@@ -204,22 +218,33 @@ export function DocumentPreviewDisplay({
       reason: "missing_context",
       documentId,
       hasEntityId: !!activeEntity?.id,
-      hasSdk: !!sdk,
+      hasRuntimeToken: !!runtime?.hasAccessToken,
     });
-  }, [activeEntity?.id, documentId, isPublicView, prerequisitesReady, sdk]);
+  }, [activeEntity?.id, documentId, isPublicView, prerequisitesReady, runtime?.hasAccessToken]);
 
   return (
-    <div ref={containerRef} className={cn("relative min-h-full", className)}>
+    <div
+      ref={containerRef}
+      className={cn("relative", containedScroll ? "flex h-full min-h-0 flex-col" : "min-h-full", className)}
+    >
       {/* Loading state */}
       {isLoading && <DocumentPreviewSkeleton />}
 
       {/* Error state */}
       {error && !isLoading && (
-        <div className="flex h-full items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10 p-8">
+        <div
+          className={cn(
+            "flex h-full items-center justify-center rounded-lg p-8",
+            isPublicView ? "border border-border/70 bg-muted/20" : "border border-destructive/50 bg-destructive/10",
+          )}
+        >
           <div className="flex flex-col items-center gap-2 text-center">
-            <AlertCircle className="h-8 w-8 text-destructive" />
-            <p className="font-semibold text-destructive">{t("Preview Error")}</p>
-            <p className="text-muted-foreground text-sm">{error}</p>
+            <AlertCircle className={cn("h-8 w-8", isPublicView ? "text-muted-foreground" : "text-destructive")} />
+            <p className={cn("font-semibold", isPublicView ? "text-foreground" : "text-destructive")}>
+              {t("Preview Error")}
+            </p>
+            <p className="text-muted-foreground text-sm">{isPublicView ? t("Preview unavailable") : error}</p>
+            {!isPublicView && <p className="text-muted-foreground text-sm">{error}</p>}
           </div>
         </div>
       )}
@@ -248,6 +273,7 @@ export function DocumentPreviewDisplay({
           A4_WIDTH_PX={A4_WIDTH_PX}
           contentRef={contentRef}
           entityUpdatedAt={activeEntity?.updated_at ? new Date(activeEntity.updated_at) : null}
+          containedScroll={containedScroll}
         />
       )}
     </div>

package/src/components/documents/shared/index.ts

@@ -1,4 +1,9 @@
-export { DocumentPreviewDisplay, InvoicePreviewDisplay } from "./document-preview-display";
+export {
+  DocumentPreviewDisplay,
+  getSavedDocumentPreviewQueryKey,
+  getSavedDocumentPreviewQueryPrefix,
+  InvoicePreviewDisplay,
+} from "./document-preview-display";
 export { DocumentPreviewSkeleton } from "./document-preview-skeleton";
 export { ScaledDocumentPreview } from "./scaled-document-preview";
 export { useA4Scaling } from "./use-a4-scaling";

package/src/components/documents/shared/scaled-document-preview.tsx

@@ -9,6 +9,7 @@ interface ScaledDocumentPreviewProps {
   A4_WIDTH_PX: number;
   contentRef: React.RefObject<HTMLDivElement | null>;
   entityUpdatedAt?: Date | null;
+  containedScroll?: boolean;
 }
 
 /** Extract @font-face rules from CSS so they can be hoisted to the document head */
@@ -53,7 +54,12 @@ function hoistFontFaces(html: string): string {
  * Uses Shadow DOM to completely isolate template CSS from the parent page.
  * @font-face rules are hoisted to document <head> for reliable font loading.
  */
-export const ScaledDocumentPreview: FC<ScaledDocumentPreviewProps> = ({ htmlContent, scale, A4_WIDTH_PX }) => {
+export const ScaledDocumentPreview: FC<ScaledDocumentPreviewProps> = ({
+  htmlContent,
+  scale,
+  A4_WIDTH_PX,
+  containedScroll = false,
+}) => {
   const shadowHostRef = useRef<HTMLDivElement>(null);
   const shadowRootRef = useRef<ShadowRoot | null>(null);
   // A4 height in pixels at 96 DPI (297mm)
@@ -84,27 +90,35 @@ export const ScaledDocumentPreview: FC<ScaledDocumentPreviewProps> = ({ htmlCont
     setTimeout(measureHeight, 100);
   }, [htmlContent]);
 
-  return (
-    <div className="rounded-lg border bg-neutral-100 p-4">
+  const scaledPage = (
+    <div
+      style={{
+        width: A4_WIDTH_PX * scale,
+        height: contentHeight * scale,
+        margin: "0 auto",
+        overflow: "hidden",
+      }}
+    >
       <div
+        ref={shadowHostRef}
         style={{
-          width: A4_WIDTH_PX * scale,
-          height: contentHeight * scale,
-          margin: "0 auto",
-          overflow: "hidden",
+          width: A4_WIDTH_PX,
+          minHeight: contentHeight,
+          transform: `scale(${scale})`,
+          transformOrigin: "top left",
+          background: "white",
         }}
-      >
-        <div
-          ref={shadowHostRef}
-          style={{
-            width: A4_WIDTH_PX,
-            minHeight: contentHeight,
-            transform: `scale(${scale})`,
-            transformOrigin: "top left",
-            background: "white",
-          }}
-        />
-      </div>
+      />
     </div>
   );
+
+  if (containedScroll) {
+    return (
+      <div className="flex h-full min-h-0 flex-col rounded-lg border bg-neutral-100 p-4">
+        <div className="min-h-0 flex-1 overflow-y-auto">{scaledPage}</div>
+      </div>
+    );
+  }
+
+  return <div className="rounded-lg border bg-neutral-100 p-4">{scaledPage}</div>;
 };

package/src/components/documents/types.ts

@@ -68,3 +68,27 @@ export const DOCUMENT_CONFIGS: Record<DocumentTypes, DocumentConfig> = {
 export function getDocumentConfig(type: DocumentTypes): DocumentConfig {
   return DOCUMENT_CONFIGS[type];
 }
+
+export function getDocumentSingularName(type: DocumentTypes): string {
+  return DOCUMENT_CONFIGS[type].singularName;
+}
+
+export function getDocumentPluralName(type: DocumentTypes): string {
+  return DOCUMENT_CONFIGS[type].pluralName;
+}
+
+/**
+ * Infer document type from shareable ID prefix.
+ * Falls back to invoices for backwards compatibility.
+ */
+export function getDocumentTypeFromShareableId(shareableId: string): DocumentTypes {
+  if (shareableId.startsWith("est_share_")) return "estimate";
+  if (shareableId.startsWith("cre_share_")) return "credit_note";
+  if (shareableId.startsWith("adv_share_")) return "advance_invoice";
+  if (shareableId.startsWith("del_share_")) return "delivery_note";
+  return "invoice";
+}
+
+export function getDocumentConfigFromShareableId(shareableId: string): DocumentConfig {
+  return getDocumentConfig(getDocumentTypeFromShareableId(shareableId));
+}