Pagefab

pagefab is a standalone package and CLI for blueprint-driven content, composition, and procedural asset generation.

It provides:

• blueprint loading and validation
• page model construction
• editable artifact SVG generation
• artifact-to-blueprint synchronization
• generated layout artifact production
• viewport-aware graph animation validation, frame expansion, and atlas manifest generation

Consumer projects configure the package with their project root and blueprint path, then use it as the single source of truth for blueprint/artifact/asset generation.

Expected consumer setup:

1. Add pagefab as a development dependency.
2. Add a pagefab.config.cjs file at the project root.
3. Add a blueprint file referenced by that config.
4. Run:
   • pagefab generate-artifacts
   • pagefab sync-blueprint
   • pagefab generate-assets

Example pagefab.config.cjs:

'use strict';

module.exports = {
  blueprint: 'data/blueprint.yaml',
  componentTypes: {
    graphAnimation: {
      runtimeScript: 'scripts/graph-generator-runtime.js',
      outputDir: 'assets/generated/graph-animations',
      publicBasePath: '/assets/generated/graph-animations',
      manifestScript: 'scripts/generated-graph-animations.js',
      manifestJson: 'data/generated-graph-animations.json',
      shaderLimits: {
        maxNodes: 12,
        maxLinks: 16,
        maxBridges: 8,
        maxGuides: 4,
        maxSparkles: 4
      },
      launchOptions: {
        headless: false,
        args: [
          '--ignore-gpu-blocklist',
          '--enable-gpu-rasterization',
          '--enable-zero-copy',
          '--use-angle=metal',
          '--disable-renderer-backgrounding',
          '--disable-background-timer-throttling'
        ]
      }
    }
  }
};