pdfx-cli 0.4.1 → 0.4.2

package/dist/index.js

@@ -2386,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\`:
@@ -2587,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]}\`
@@ -2632,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();
@@ -2845,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.
@@ -2969,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 }}>

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.1",
+  "version": "0.4.2",
   "description": "CLI for PDFx components",
   "type": "module",
   "bin": {