pdfx-cli 0.4.0 → 0.4.2

package/README.md

@@ -0,0 +1,73 @@
+# pdfx-cli
+
+> The official CLI tool for [PDFx](https://pdfx.akashpise.dev), professional pre-built PDF React components.
+
+Create beautiful, dynamic, and perfectly typed PDFs in React using standard Tailwind-like utility classes and strict property interfaces. PDFx provides a library of copy-pasteable blocks (Invoices, Reports, Receipts) that you fully own and customize inside your project.
+
+Built on top of [@react-pdf/renderer](https://react-pdf.org/).
+
+## Installation
+
+Initialize the PDFx configuration and setup in your project:
+
+```bash
+npx pdfx-cli@latest init
+```
+
+## Adding Components
+
+Add specific PDFx components directly into your local codebase. You own the code!
+
+```bash
+npx pdfx-cli@latest add badge
+npx pdfx-cli@latest add table form qrcode
+```
+
+## Available Components
+- `alert`
+- `badge`
+- `card`
+- `data-table`
+- `divider`
+- `form`
+- `heading`
+- `keep-together`
+- `key-value`
+- `link`
+- `list`
+- `page-break`
+- `page-footer`
+- `page-header`
+- `page-number`
+- `pdf-image`
+- `qrcode`
+- `section`
+- `signature`
+- `stack`
+- `table`
+- `text`
+- `watermark`
+
+## Pre-Composed Blocks
+Start with full, gorgeous templates.
+
+```bash
+npx pdfx-cli@latest block add invoice-modern
+npx pdfx-cli@latest block add report-financial
+```
+
+## MCP & AI Agents
+
+PDFx comes with first-class AI Agent integration via MCP (Model Context Protocol). Connect your AI IDE or Agent directly to the PDFx registry to instantly gain fluent context about PDFx component structures.
+
+```bash
+npx pdfx-cli@latest mcp init --client cursor
+```
+
+## Documentation
+
+Full documentation, real-time PDF previews, and block gallery available at [pdfx.akashpise.dev](https://pdfx.akashpise.dev).
+
+## License
+
+MIT 

package/dist/index.js

@@ -4,7 +4,7 @@
 import { readFileSync as readFileSync2 } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
-import chalk10 from "chalk";
+import chalk11 from "chalk";
 import { Command as Command3 } from "commander";
 
 // src/commands/add.ts
@@ -2218,6 +2218,7 @@ import { existsSync } from "fs";
 import { mkdir, readFile, writeFile as writeFile2 } from "fs/promises";
 import path11 from "path";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import chalk8 from "chalk";
 import { Command } from "commander";
 import prompts5 from "prompts";
 
@@ -2385,8 +2386,21 @@ async function getAuditChecklist() {
     \`\`\`
 
     ### "Invalid hook call"
-    PDFx components render to PDF, not to the DOM — React hooks are not supported inside them.
-    Move hook calls to the parent component and pass data down as props.
+    \`@react-pdf/renderer\` renders synchronously. Hooks that depend on browser APIs or
+    async side effects do not work in the PDF render path.
+
+    **Do NOT use inside a PDFx component:**
+    - \`useEffect\` / \`useLayoutEffect\` — no browser lifecycle in PDF rendering
+    - \`useRef\` for DOM nodes — no DOM exists in the PDF render tree
+    - Any hook that calls browser globals (\`window\`, \`document\`, \`navigator\`)
+
+    **These ARE valid inside PDFx components:**
+    - PDFx framework hooks: \`usePdfxTheme()\`, \`useSafeMemo()\`
+    - Custom hooks that are pure functions with no browser-API dependencies
+    - Data passed down as props from a parent client component
+
+    If you see this error in a wrapper component you wrote, move the browser hook
+    to the nearest client component and pass the result down as a prop.
 
     ### "Text strings must be rendered inside \`<Text>\` component"
     Wrap all string literals in \`<Text>\` from \`@react-pdf/renderer\`:
@@ -2586,7 +2600,7 @@ async function getComponent(args) {
   const primaryContent = item.files[0]?.content ?? "";
   const primaryPath = item.files[0]?.path ?? "";
   const exportNames = extractAllExportNames(primaryContent);
-  const mainExport = extractExportName(primaryContent);
+  const mainExport = extractExportName(primaryContent, args.component);
   const exportSection = exportNames.length > 0 ? dedent4`
           ## Exports
           **Main component export:** \`${mainExport ?? exportNames[0]}\`
@@ -2631,11 +2645,18 @@ async function getComponent(args) {
     ${fileSources}
   `);
 }
-function extractExportName(source) {
+function extractExportName(source, componentName) {
   if (!source) return null;
-  const matches = [...source.matchAll(/export\s+(?:function|const)\s+([A-Z][A-Za-z0-9]*)/g)];
-  if (matches.length === 0) return null;
-  return matches[0][1] ?? null;
+  const matches = [...source.matchAll(/export\s+function\s+([A-Z][A-Za-z0-9]*)/g)];
+  const names = matches.map((m) => m[1]).filter(Boolean);
+  if (names.length === 0) return null;
+  if (!componentName) return names[0];
+  const norm = componentName.replace(/-/g, "").toLowerCase();
+  const exact = names.find((n) => n.toLowerCase() === norm);
+  if (exact) return exact;
+  const suffix = names.find((n) => n.toLowerCase().endsWith(norm));
+  if (suffix) return suffix;
+  return names[0];
 }
 function extractAllExportNames(source) {
   const seen = /* @__PURE__ */ new Set();
@@ -2844,7 +2865,7 @@ async function getInstallation(args) {
     | TypeScript errors on \`@react-pdf/renderer\` | \`${installCmd(pm, "@react-pdf/types", true)}\` |
     | "Cannot find module @/components/pdfx/..." | Run \`npx pdfx-cli@latest add <component>\` to install it |
     | PDF renders blank | Ensure root returns \`<Document><Page>...</Page></Document>\` |
-    | "Invalid hook call" | PDFx components cannot use React hooks — pass data as props |
+    | "Invalid hook call" | Browser-only hooks (\`useEffect\`, \`useRef\` for DOM) don't work in the PDF render path — move them to a parent client component and pass the result as a prop. PDFx framework hooks (\`usePdfxTheme\`, \`useSafeMemo\`) are valid inside PDF components. |
 
     ---
     Next: call \`get_audit_checklist\` to verify your setup is correct.
@@ -2968,14 +2989,13 @@ async function getTheme(args) {
 
     ## Usage in Components
     \`\`\`tsx
-    // Access theme values in a PDFx component
-    import type { PdfxTheme } from '@pdfx/shared';
-
-    interface Props {
-      theme: PdfxTheme;
-    }
+    // Access theme values in a PDFx component via the usePdfxTheme hook.
+    // @pdfx/shared is workspace-only — do NOT import from it in your components.
+    import { View, Text } from '@react-pdf/renderer';
+    import { usePdfxTheme } from '../lib/pdfx-theme-context';
 
-    export function MyComponent({ theme }: Props) {
+    export function MyComponent() {
+      const theme = usePdfxTheme();
       return (
         <View style={{ backgroundColor: theme.colors.background }}>
           <Text style={{ color: theme.colors.foreground, fontSize: theme.typography.body.fontSize }}>
@@ -3213,6 +3233,14 @@ function isPdfxAlreadyConfigured(config) {
   return withMcpServers.mcpServers?.pdfx !== void 0 || withServers.servers?.pdfx !== void 0 || withMcp.mcp?.pdfx !== void 0;
 }
 async function initMcpConfig(opts) {
+  const preFlightResult = runPreFlightChecks();
+  displayPreFlightResults(preFlightResult);
+  if (!preFlightResult.canProceed) {
+    console.error(
+      chalk8.red("\n  Cannot proceed due to blocking issues. Please fix them and try again.\n")
+    );
+    process.exit(1);
+  }
   let clientName = opts.client;
   if (!clientName) {
     const response = await prompts5({
@@ -3294,7 +3322,7 @@ mcpCommand.command("init").description("Add PDFx MCP server config to your AI ed
 import { existsSync as existsSync2, readFileSync } from "fs";
 import { mkdir as mkdir2, writeFile as writeFile3 } from "fs/promises";
 import path12 from "path";
-import chalk8 from "chalk";
+import chalk9 from "chalk";
 import { Command as Command2 } from "commander";
 import prompts6 from "prompts";
 
@@ -3997,6 +4025,14 @@ function fileHasPdfxContent(filePath) {
   }
 }
 async function skillsInit(opts) {
+  const preFlightResult = runPreFlightChecks();
+  displayPreFlightResults(preFlightResult);
+  if (!preFlightResult.canProceed) {
+    console.error(
+      chalk9.red("\n  Cannot proceed due to blocking issues. Please fix them and try again.\n")
+    );
+    process.exit(1);
+  }
   let platformName = opts.platform;
   if (!platformName) {
     const response = await prompts6({
@@ -4016,10 +4052,10 @@ async function skillsInit(opts) {
   }
   const platform = PLATFORMS.find((p) => p.name === platformName);
   if (!platform) {
-    process.stderr.write(chalk8.red(`\u2716 Unknown platform: "${platformName}"
+    process.stderr.write(chalk9.red(`\u2716 Unknown platform: "${platformName}"
 `));
     process.stderr.write(
-      chalk8.dim(`  Valid options: ${PLATFORMS.map((p) => p.name).join(", ")}
+      chalk9.dim(`  Valid options: ${PLATFORMS.map((p) => p.name).join(", ")}
 `)
     );
     process.exit(1);
@@ -4043,7 +4079,7 @@ async function skillsInit(opts) {
         ]
       });
       if (!action2 || action2 === "skip") {
-        process.stdout.write(chalk8.dim("\nSkipped \u2014 existing file kept.\n\n"));
+        process.stdout.write(chalk9.dim("\nSkipped \u2014 existing file kept.\n\n"));
         return;
       }
     } else {
@@ -4061,7 +4097,7 @@ async function skillsInit(opts) {
         ]
       });
       if (!action2 || action2 === "skip") {
-        process.stdout.write(chalk8.dim("\nSkipped \u2014 existing file kept.\n\n"));
+        process.stdout.write(chalk9.dim("\nSkipped \u2014 existing file kept.\n\n"));
         return;
       }
       if (action2 === "append") {
@@ -4088,15 +4124,15 @@ ${PDFX_SKILLS_CONTENT}`;
   }
   const action = shouldAppend && alreadyExists ? "Appended PDFx context to" : "Wrote";
   process.stdout.write(`
-${chalk8.green("\u2713")} ${action} ${chalk8.cyan(relativeFile)}
+${chalk9.green("\u2713")} ${action} ${chalk9.cyan(relativeFile)}
 `);
   process.stdout.write(`
-${chalk8.dim(platform.verifyStep)}
+${chalk9.dim(platform.verifyStep)}
 
 `);
   if (platform.name === "claude") {
     process.stdout.write(
-      chalk8.dim(
+      chalk9.dim(
         "Tip: if you also use the MCP server, CLAUDE.md + MCP gives the AI\nthe best possible PDFx knowledge \u2014 static props reference + live registry.\n\n"
       )
     );
@@ -4109,34 +4145,34 @@ skillsCommand.command("init").description("Write the PDFx skills file to your AI
 ).option("-y, --yes", "Overwrite existing file without prompting").option("-a, --append", "Append PDFx context to an existing file instead of overwriting").action(skillsInit);
 skillsCommand.command("list").description("List all supported AI editor platforms").action(() => {
   process.stdout.write("\n");
-  process.stdout.write(chalk8.bold("  Supported platforms\n\n"));
+  process.stdout.write(chalk9.bold("  Supported platforms\n\n"));
   for (const p of PLATFORMS) {
-    process.stdout.write(`  ${chalk8.cyan(p.name.padEnd(12))} ${chalk8.dim("\u2192")} ${p.file}
+    process.stdout.write(`  ${chalk9.cyan(p.name.padEnd(12))} ${chalk9.dim("\u2192")} ${p.file}
 `);
   }
   process.stdout.write("\n");
   process.stdout.write(
-    chalk8.dim("  Usage: npx pdfx-cli@latest skills init --platform <name>\n\n")
+    chalk9.dim("  Usage: npx pdfx-cli@latest skills init --platform <name>\n\n")
   );
 });
 
 // src/commands/theme.ts
 import fs8 from "fs";
 import path13 from "path";
-import chalk9 from "chalk";
+import chalk10 from "chalk";
 import ora7 from "ora";
 import prompts7 from "prompts";
 import ts from "typescript";
 async function themeInit() {
   const configPath = path13.join(process.cwd(), "pdfx.json");
   if (!checkFileExists(configPath)) {
-    console.error(chalk9.red("\nError: pdfx.json not found"));
-    console.log(chalk9.yellow("\n  PDFx is not initialized in this project.\n"));
-    console.log(chalk9.cyan("  Run: pdfx init"));
-    console.log(chalk9.dim("  This will set up your project configuration and theme.\n"));
+    console.error(chalk10.red("\nError: pdfx.json not found"));
+    console.log(chalk10.yellow("\n  PDFx is not initialized in this project.\n"));
+    console.log(chalk10.cyan("  Run: pdfx init"));
+    console.log(chalk10.dim("  This will set up your project configuration and theme.\n"));
     process.exit(1);
   }
-  console.log(chalk9.bold.cyan("\n  PDFx Theme Setup\n"));
+  console.log(chalk10.bold.cyan("\n  PDFx Theme Setup\n"));
   const answers = await prompts7(
     [
       {
@@ -4173,13 +4209,13 @@ async function themeInit() {
     ],
     {
       onCancel: () => {
-        console.log(chalk9.yellow("\nTheme setup cancelled."));
+        console.log(chalk10.yellow("\nTheme setup cancelled."));
         process.exit(0);
       }
     }
   );
   if (!answers.preset || !answers.themePath) {
-    console.error(chalk9.red("Missing required fields."));
+    console.error(chalk10.red("Missing required fields."));
     process.exit(1);
   }
   const presetName = answers.preset;
@@ -4199,19 +4235,19 @@ async function themeInit() {
         if (result.success) {
           const updatedConfig = { ...result.data, theme: themePath };
           writeFile(configPath, JSON.stringify(updatedConfig, null, 2));
-          console.log(chalk9.green("  Updated pdfx.json with theme path"));
+          console.log(chalk10.green("  Updated pdfx.json with theme path"));
         }
       } catch {
-        console.log(chalk9.yellow('  Could not update pdfx.json \u2014 add "theme" field manually'));
+        console.log(chalk10.yellow('  Could not update pdfx.json \u2014 add "theme" field manually'));
       }
     }
-    console.log(chalk9.dim(`
+    console.log(chalk10.dim(`
   Edit ${themePath} to customize your theme.
 `));
   } catch (error) {
     spinner.fail("Failed to create theme file");
     const message = error instanceof Error ? error.message : String(error);
-    console.error(chalk9.dim(`  ${message}`));
+    console.error(chalk10.dim(`  ${message}`));
     process.exit(1);
   }
 }
@@ -4219,28 +4255,28 @@ async function themeSwitch(presetName) {
   const resolvedPreset = presetName === "default" ? "professional" : presetName;
   const validPresets = Object.keys(themePresets);
   if (!validPresets.includes(resolvedPreset)) {
-    console.error(chalk9.red(`\u2716 Invalid theme preset: "${presetName}"`));
-    console.log(chalk9.dim(`  Available presets: ${validPresets.join(", ")}, default
+    console.error(chalk10.red(`\u2716 Invalid theme preset: "${presetName}"`));
+    console.log(chalk10.dim(`  Available presets: ${validPresets.join(", ")}, default
 `));
-    console.log(chalk9.dim("  Usage: pdfx theme switch <preset>"));
+    console.log(chalk10.dim("  Usage: pdfx theme switch <preset>"));
     process.exit(1);
   }
   const validatedPreset = resolvedPreset;
   const configPath = path13.join(process.cwd(), "pdfx.json");
   if (!checkFileExists(configPath)) {
-    console.error(chalk9.red('No pdfx.json found. Run "npx pdfx-cli@latest init" first.'));
+    console.error(chalk10.red('No pdfx.json found. Run "npx pdfx-cli@latest init" first.'));
     process.exit(1);
   }
   const rawConfig = readJsonFile(configPath);
   const result = configSchema.safeParse(rawConfig);
   if (!result.success) {
-    console.error(chalk9.red("Invalid pdfx.json configuration."));
+    console.error(chalk10.red("Invalid pdfx.json configuration."));
     process.exit(1);
   }
   const config = result.data;
   if (!config.theme) {
     console.error(
-      chalk9.red(
+      chalk10.red(
         'No theme path in pdfx.json. Run "npx pdfx-cli@latest theme init" to set up theming.'
       )
     );
@@ -4253,7 +4289,7 @@ async function themeSwitch(presetName) {
     initial: false
   });
   if (!answer.confirm) {
-    console.log(chalk9.yellow("Cancelled."));
+    console.log(chalk10.yellow("Cancelled."));
     return;
   }
   const spinner = ora7(`Switching to ${validatedPreset} theme...`).start();
@@ -4269,7 +4305,7 @@ async function themeSwitch(presetName) {
   } catch (error) {
     spinner.fail("Failed to switch theme");
     const message = error instanceof Error ? error.message : String(error);
-    console.error(chalk9.dim(`  ${message}`));
+    console.error(chalk10.dim(`  ${message}`));
     process.exit(1);
   }
 }
@@ -4339,18 +4375,18 @@ function parseThemeObject(themePath) {
 async function themeValidate() {
   const configPath = path13.join(process.cwd(), "pdfx.json");
   if (!checkFileExists(configPath)) {
-    console.error(chalk9.red('No pdfx.json found. Run "npx pdfx-cli@latest init" first.'));
+    console.error(chalk10.red('No pdfx.json found. Run "npx pdfx-cli@latest init" first.'));
     process.exit(1);
   }
   const rawConfig = readJsonFile(configPath);
   const configResult = configSchema.safeParse(rawConfig);
   if (!configResult.success) {
-    console.error(chalk9.red("Invalid pdfx.json configuration."));
+    console.error(chalk10.red("Invalid pdfx.json configuration."));
     process.exit(1);
   }
   if (!configResult.data.theme) {
     console.error(
-      chalk9.red(
+      chalk10.red(
         'No theme path in pdfx.json. Run "npx pdfx-cli@latest theme init" to set up theming.'
       )
     );
@@ -4358,7 +4394,7 @@ async function themeValidate() {
   }
   const absThemePath = path13.resolve(process.cwd(), configResult.data.theme);
   if (!checkFileExists(absThemePath)) {
-    console.error(chalk9.red(`Theme file not found: ${configResult.data.theme}`));
+    console.error(chalk10.red(`Theme file not found: ${configResult.data.theme}`));
     process.exit(1);
   }
   const spinner = ora7("Validating theme file...").start();
@@ -4366,21 +4402,21 @@ async function themeValidate() {
     const parsedTheme = parseThemeObject(absThemePath);
     const result = themeSchema.safeParse(parsedTheme);
     if (!result.success) {
-      const issues = result.error.issues.map((issue) => `  \u2192 ${chalk9.yellow(issue.path.join("."))}: ${issue.message}`).join("\n");
+      const issues = result.error.issues.map((issue) => `  \u2192 ${chalk10.yellow(issue.path.join("."))}: ${issue.message}`).join("\n");
       spinner.fail("Theme validation failed");
-      console.log(chalk9.red("\n  Missing or invalid fields:\n"));
+      console.log(chalk10.red("\n  Missing or invalid fields:\n"));
       console.log(issues);
-      console.log(chalk9.dim("\n  Fix these fields in your theme file and run validate again.\n"));
+      console.log(chalk10.dim("\n  Fix these fields in your theme file and run validate again.\n"));
       process.exit(1);
     }
     spinner.succeed("Theme file is valid");
-    console.log(chalk9.dim(`
+    console.log(chalk10.dim(`
   Validated: ${configResult.data.theme}
 `));
   } catch (error) {
     spinner.fail("Failed to validate theme");
     const message = error instanceof Error ? error.message : String(error);
-    console.error(chalk9.dim(`  ${message}`));
+    console.error(chalk10.dim(`  ${message}`));
     process.exit(1);
   }
 }
@@ -4400,7 +4436,7 @@ program.name("pdfx").description("CLI for PDFx components").version(getVersion()
 program.configureOutput({
   writeErr: (str) => {
     const message = str.replace(/^error:\s*/i, "").trimEnd();
-    process.stderr.write(chalk10.red(`\u2716 ${message}
+    process.stderr.write(chalk11.red(`\u2716 ${message}
 `));
   }
 });
@@ -4423,7 +4459,7 @@ try {
   await program.parseAsync();
 } catch (err) {
   const message = err instanceof Error ? err.message : String(err);
-  process.stderr.write(chalk10.red(`\u2716 ${message}
+  process.stderr.write(chalk11.red(`\u2716 ${message}
 `));
   process.exitCode = 1;
 }

package/dist/mcp/index.js

@@ -570,8 +570,21 @@ async function getAuditChecklist() {
     \`\`\`
 
     ### "Invalid hook call"
-    PDFx components render to PDF, not to the DOM — React hooks are not supported inside them.
-    Move hook calls to the parent component and pass data down as props.
+    \`@react-pdf/renderer\` renders synchronously. Hooks that depend on browser APIs or
+    async side effects do not work in the PDF render path.
+
+    **Do NOT use inside a PDFx component:**
+    - \`useEffect\` / \`useLayoutEffect\` — no browser lifecycle in PDF rendering
+    - \`useRef\` for DOM nodes — no DOM exists in the PDF render tree
+    - Any hook that calls browser globals (\`window\`, \`document\`, \`navigator\`)
+
+    **These ARE valid inside PDFx components:**
+    - PDFx framework hooks: \`usePdfxTheme()\`, \`useSafeMemo()\`
+    - Custom hooks that are pure functions with no browser-API dependencies
+    - Data passed down as props from a parent client component
+
+    If you see this error in a wrapper component you wrote, move the browser hook
+    to the nearest client component and pass the result down as a prop.
 
     ### "Text strings must be rendered inside \`<Text>\` component"
     Wrap all string literals in \`<Text>\` from \`@react-pdf/renderer\`:
@@ -771,7 +784,7 @@ async function getComponent(args) {
   const primaryContent = item.files[0]?.content ?? "";
   const primaryPath = item.files[0]?.path ?? "";
   const exportNames = extractAllExportNames(primaryContent);
-  const mainExport = extractExportName(primaryContent);
+  const mainExport = extractExportName(primaryContent, args.component);
   const exportSection = exportNames.length > 0 ? dedent4`
           ## Exports
           **Main component export:** \`${mainExport ?? exportNames[0]}\`
@@ -816,11 +829,18 @@ async function getComponent(args) {
     ${fileSources}
   `);
 }
-function extractExportName(source) {
+function extractExportName(source, componentName) {
   if (!source) return null;
-  const matches = [...source.matchAll(/export\s+(?:function|const)\s+([A-Z][A-Za-z0-9]*)/g)];
-  if (matches.length === 0) return null;
-  return matches[0][1] ?? null;
+  const matches = [...source.matchAll(/export\s+function\s+([A-Z][A-Za-z0-9]*)/g)];
+  const names = matches.map((m) => m[1]).filter(Boolean);
+  if (names.length === 0) return null;
+  if (!componentName) return names[0];
+  const norm = componentName.replace(/-/g, "").toLowerCase();
+  const exact = names.find((n) => n.toLowerCase() === norm);
+  if (exact) return exact;
+  const suffix = names.find((n) => n.toLowerCase().endsWith(norm));
+  if (suffix) return suffix;
+  return names[0];
 }
 function extractAllExportNames(source) {
   const seen = /* @__PURE__ */ new Set();
@@ -1029,7 +1049,7 @@ async function getInstallation(args) {
     | TypeScript errors on \`@react-pdf/renderer\` | \`${installCmd(pm, "@react-pdf/types", true)}\` |
     | "Cannot find module @/components/pdfx/..." | Run \`npx pdfx-cli@latest add <component>\` to install it |
     | PDF renders blank | Ensure root returns \`<Document><Page>...</Page></Document>\` |
-    | "Invalid hook call" | PDFx components cannot use React hooks — pass data as props |
+    | "Invalid hook call" | Browser-only hooks (\`useEffect\`, \`useRef\` for DOM) don't work in the PDF render path — move them to a parent client component and pass the result as a prop. PDFx framework hooks (\`usePdfxTheme\`, \`useSafeMemo\`) are valid inside PDF components. |
 
     ---
     Next: call \`get_audit_checklist\` to verify your setup is correct.
@@ -1153,14 +1173,13 @@ async function getTheme(args) {
 
     ## Usage in Components
     \`\`\`tsx
-    // Access theme values in a PDFx component
-    import type { PdfxTheme } from '@pdfx/shared';
-
-    interface Props {
-      theme: PdfxTheme;
-    }
+    // Access theme values in a PDFx component via the usePdfxTheme hook.
+    // @pdfx/shared is workspace-only — do NOT import from it in your components.
+    import { View, Text } from '@react-pdf/renderer';
+    import { usePdfxTheme } from '../lib/pdfx-theme-context';
 
-    export function MyComponent({ theme }: Props) {
+    export function MyComponent() {
+      const theme = usePdfxTheme();
       return (
         <View style={{ backgroundColor: theme.colors.background }}>
           <Text style={{ color: theme.colors.foreground, fontSize: theme.typography.body.fontSize }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdfx-cli",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "CLI for PDFx components",
   "type": "module",
   "bin": {