60:T5d5a,

import { ReportTemplateFrame } from "./report-layout";
import type { ReportTemplateProps } from "./report-layout";
import type { BaseReportData } from "./report.types";

const sampleOperationsData: BaseReportData = {
  author: "Delivery Office",
  generatedAt: "February 23, 2026",
  highlights: [
    "SLA improved after shift rebalancing and incident triage changes.",
    "Backlog grew in week 4 due to release-related ticket surge.",
    "Incident queue remediation plan has executive sponsorship and budget.",
  ],
  period: "February 2026",
  rows: [
    {
      label: "L1 Support",
      owner: "N. Mehta",
      progress: 91,
      risk: "Low",
      status: "On Track",
    },
    {
      label: "L2 Support",
      owner: "D. Chen",
      progress: 85,
      risk: "Low",
      status: "On Track",
    },
    {
      label: "Incident Queue",
      owner: "R. Walker",
      progress: 66,
      risk: "High",
      status: "At Risk",
    },
    {
      label: "Automation Rollout",
      owner: "M. Roy",
      progress: 77,
      risk: "Medium",
      status: "On Track",
    },
  ],
  series: [
    { label: "W1", value: 69 },
    { label: "W2", value: 71 },
    { label: "W3", value: 73 },
    { label: "W4", value: 74 },
    { label: "W5", value: 75 },
    { label: "W6", value: 76 },
    { label: "W7", value: 78 },
    { label: "W8", value: 79 },
    { label: "W9", value: 78 },
    { label: "W10", value: 80 },
    { label: "W11", value: 81 },
    { label: "W12", value: 83 },
  ],
  subtitle: "Delivery throughput, SLA adherence, and backlog visibility",
  summary: [
    {
      label: "Tickets Closed",
      tone: "success",
      trend: "+9.8% MoM",
      value: "1,284",
    },
    {
      label: "SLA Hit Rate",
      tone: "success",
      trend: "+1.4 pts",
      value: "96.1%",
    },
    { label: "Backlog", tone: "warning", trend: "+6.0%", value: "214" },
    { label: "Escalations", tone: "success", trend: "-18.5%", value: "17" },
  ],
  title: "Monthly Operations Report",
};

export const OperationsReportDocument = ({
  theme,
  data = sampleOperationsData,
}: ReportTemplateProps) => (
  <ReportTemplateFrame
    theme={theme}
    data={data}
    titlePrefix="Operations Report"
    statusLabel="Ops: Watch"
    statusTone="warning"
    graphVariant="horizontal-bar"
    graphTitle="Throughput by week"
    graphSubtitle="Resolved workload distribution"
    graphLegend="none"
    graphShowValues
    graphColors={["#2563EB"]}
    graphData={[
      { label: "Incident", value: 66 },
      { label: "Automation", value: 77 },
      { label: "L2 Support", value: 85 },
      { label: "L1 Support", value: 91 },
    ]}
  />
);

51:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$60"}}] 61:T444c,

import type { Style } from "@formepdf/react";
import { isValidElement } from "react";
import type { DependencyList, ReactNode } from "react";

import { professionalTheme } from "@/lib/pdf-themes/professional";

export type PdfcnTheme = typeof professionalTheme;

let serializedTheme = professionalTheme;

export interface PdfcnThemeProviderProps {
  theme?: PdfcnTheme;
  children: ReactNode;
}

type PdfStyleInput = Style | PdfStyleInput[] | false | null | undefined;

const mergeStyleInput = (target: Style, input: PdfStyleInput): void => {
  if (Array.isArray(input)) {
    for (const item of input) {
      mergeStyleInput(target, item);
    }
  } else if (input) {
    Object.assign(target, input);
  }
};

export const mergePdfStyles = (...inputs: PdfStyleInput[]): Style => {
  const merged: Style = {};
  for (const input of inputs) {
    mergeStyleInput(merged, input);
  }
  return merged;
};

const renderForSerializer = (
  children: ReactNode,
  theme: PdfcnTheme
): ReactNode => {
  serializedTheme = theme;

  if (!isValidElement(children) || typeof children.type !== "function") {
    return children;
  }
  if ((children.type as { __formeType?: string }).__formeType === "Document") {
    return children;
  }

  return (children.type as (props: unknown) => ReactNode)(children.props);
};

export const PdfcnThemeProvider = ({
  theme,
  children,
}: PdfcnThemeProviderProps) =>
  renderForSerializer(children, theme ?? professionalTheme);

export const usePdfcnTheme = (): PdfcnTheme => serializedTheme;

export const useSafeMemo = <T,>(factory: () => T, _deps: DependencyList): T =>
  factory();

54:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$61"}}] 62:Tac73,

export interface TypographyScale {
  /** 10pt — Captions, footnotes */
  xs: number;
  /** 12pt — Body text (PDF standard) */
  sm: number;
  /** 15pt — Large body, small headings */
  base: number;
  /** 18pt — H4 equivalent */
  lg: number;
  /** 22pt — H3 equivalent */
  xl: number;
  /** 28pt — H2 equivalent */
  "2xl": number;
  /** 36pt — H1 equivalent */
  "3xl": number;
}

/** Spacing scale based on a 4pt grid system */
export interface SpacingScale {
  /** 0pt */
  0: number;
  /** 2pt */
  0.5: number;
  /** 4pt */
  1: number;
  /** 8pt */
  2: number;
  /** 12pt */
  3: number;
  /** 16pt */
  4: number;
  /** 20pt */
  5: number;
  /** 24pt */
  6: number;
  /** 32pt */
  8: number;
  /** 40pt */
  10: number;
  /** 48pt */
  12: number;
  /** 64pt */
  16: number;
}

/** Font weight scale */
export interface FontWeights {
  regular: number;
  medium: number;
  semibold: number;
  bold: number;
}

/** Line height scale */
export interface LineHeights {
  /** 1.2 — Tight, for headings */
  tight: number;
  /** 1.4 — Normal, for body text */
  normal: number;
  /** 1.6 — Relaxed, for reading-heavy content */
  relaxed: number;
}

/** Border radius scale for rounded corners */
export interface BorderRadiusScale {
  /** 0pt — Sharp corners */
  none: number;
  /** 2pt — Subtle rounding */
  sm: number;
  /** 4pt — Standard rounding */
  md: number;
  /** 8pt — Pronounced rounding */
  lg: number;
  /** 9999pt — Pill/circle shape */
  full: number;
}

/** Letter spacing scale for typography adjustments */
export interface LetterSpacingScale {
  /** -0.025em — Tighter spacing */
  tight: number;
  /** 0em — Normal spacing */
  normal: number;
  /** 0.025em — Slightly wider spacing */
  wide: number;
  /** 0.05em — Much wider spacing (for uppercase) */
  wider: number;
}

/** Raw design scales shared across themes */
export interface PrimitiveTokens {
  typography: TypographyScale;
  spacing: SpacingScale;
  fontWeights: FontWeights;
  lineHeights: LineHeights;
  borderRadius: BorderRadiusScale;
  letterSpacing: LetterSpacingScale;
}

// ─── Semantic Tokens ────────────────────────────────────────────────────────
// These map primitives to design intent. Themes differ primarily here.

/**
 * Semantic color tokens using the foreground/background pair convention.
 * All values must be hex strings (e.g., '#1a1a1a').
 * react-pdf supports hex, rgb(), and hsl() — but NOT oklch.
 */
export interface ColorTokens {
  /** Primary text and content color */
  foreground: string;
  /** Page background color */
  background: string;
  /** Subtle background for secondary areas (e.g., code blocks, table headers) */
  muted: string;
  /** Text on muted backgrounds (captions, footnotes, timestamps) */
  mutedForeground: string;
  /** Brand/accent color for emphasis and highlights */
  primary: string;
  /** Text on primary-colored backgrounds */
  primaryForeground: string;
  /** Table borders, dividers, rules */
  border: string;
  /** Secondary accent for call-to-action elements, badges */
  accent: string;
  /** Error text, warning indicators */
  destructive: string;
  /** Success states (e.g., badges, confirmations) */
  success: string;
  /** Warning states (e.g., badges, alerts) */
  warning: string;
  /** Info states (e.g., badges, informational alerts) */
  info: string;
}

/** Typography semantic tokens — what fonts and sizes to use where */
export interface TypographyTokens {
  /** Body text settings */
  body: {
    /** Font family for body text (e.g., 'Helvetica') */
    fontFamily: string;
    /** Base font size in points */
    fontSize: number;
    /** Line height multiplier */
    lineHeight: number;
  };
  /** Heading text settings */
  heading: {
    /** Font family for headings (e.g., 'Times-Roman', 'Courier') */
    fontFamily: string;
    /** Font weight as numeric value (400-700) */
    fontWeight: number;
    /** Line height multiplier for headings */
    lineHeight: number;
    /** Font sizes for each heading level in points */
    fontSize: {
      h1: number;
      h2: number;
      h3: number;
      h4: number;
      h5: number;
      h6: number;
    };
  };
}

/** Spacing semantic tokens — consistent spacing across the document */
export interface SpacingTokens {
  /** Page margin settings in points */
  page: {
    marginTop: number;
    marginRight: number;
    marginBottom: number;
    marginLeft: number;
  };
  /** Space between major document sections (after h2, before new sections) */
  sectionGap: number;
  /** Space between paragraphs and after text blocks */
  paragraphGap: number;
  /** Space between inline components, list items, table rows */
  componentGap: number;
}

/** Page layout defaults */
export interface PageTokens {
  /** Default page size */
  size: "A4" | "LETTER" | "LEGAL";
  /** Default page orientation */
  orientation: "portrait" | "landscape";
}

// ─── Full Theme ─────────────────────────────────────────────────────────────

/**
 * The complete pdfcn theme object.
 *
 * Components import this and use its tokens for all style values.
 * Since React Context doesn't work in @react-pdf/renderer,
 * the theme is a plain TypeScript object imported directly by components.
 *
 * @example
 * ```tsx
 * // In a component:
 * import { theme } from '../lib/pdf-theme';
 *
 * function createStyles(t: PdfcnTheme) {
 *   return StyleSheet.create({
 *     text: {
 *       fontFamily: t.typography.body.fontFamily,
 *       fontSize: t.typography.body.fontSize,
 *       color: t.colors.foreground,
 *     },
 *   });
 * }
 *
 * const styles = createStyles(theme);
 * ```
 */
export interface PdfcnTheme {
  /** Theme name identifier */
  name: string;
  /** Raw design scales */
  primitives: PrimitiveTokens;
  /** Semantic color mappings */
  colors: ColorTokens;
  /** Typography settings for body and headings */
  typography: TypographyTokens;
  /** Spacing settings for page, sections, and components */
  spacing: SpacingTokens;
  /** Page layout defaults */
  page: PageTokens;
}

5f:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$62"}}] 63:T49c,M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z64:Tb79,

Report Operations

Installation

Usage