@frayme/catalog

Zod schemas + descriptions for the Frayme component vocabulary. Zero React deps. Single source of truth for training, runtime, and all framework adapters.

What's inside

fraymeCatalog          The catalog instance — validate, prompt, componentNames
FraymeSpec             TypeScript type of a Frayme spec
CATALOG_VERSION        Bumped when schemas change (currently 'frayme-0.1.0')
JSON_RENDER_PIN        Pinned upstream @json-render/core version ('0.19.x')

What's NOT inside

This package ships schemas ONLY. React/Vue/Svelte component implementations live in separate framework-specific packages:

• @frayme/components-react (planned) — React implementations matching these schemas
• @frayme/components-vue (planned) — Vue implementations
• @frayme/components-svelte (planned) — Svelte implementations

Splitting schemas from implementations means:

• Training infra (e.g. frayme-training/) installs only this package — no React.
• Swapping/adding framework renderers doesn't require changing the catalog.
• The same catalog drives validation, prompt generation, and Studio UI.

Composition

The catalog combines 52 components across three layers:

| Layer | Count | Source | |-------|-------|--------| | shadcn-style schemas | 36 | Ported from @json-render/shadcn v0.19.0 (now Frayme-owned) | | Docs-extension stubs | 12 | Passthrough stubs for components used in json-render's upstream docs (Metric, Page, Hero, etc.) — Phase A yield maximization. Phase B reviews keep-or-strip. | | Frayme overlay stubs | 4 | StripeCheckout, MagicLinkAuth, NangoConnect, ConnectSlack — Phase A placeholders, full schemas in Phase B when React impls exist. |

Usage

import { fraymeCatalog, CATALOG_VERSION, type FraymeSpec } from '@frayme/catalog';

// Validate a json-render spec
const result = fraymeCatalog.validate(spec);
if (!result.success) {
  console.error(result.error.issues);
}

// Generate LLM system prompt
const systemPrompt = fraymeCatalog.prompt({
  mode: 'standalone',
  customRules: ['Output only JSONL operations, no prose.'],
});

// Inspect available components
console.log(fraymeCatalog.componentNames);
// → ['Card', 'Stack', 'Grid', ..., 'StripeCheckout']

Maintenance

Bump CATALOG_VERSION whenever:

• A component's prop schema changes (added/removed/renamed prop, changed enum values).
• A component is added or removed from the catalog.
• A component's description changes substantively (LLM output may drift).

Do NOT bump for:

• Comment-only changes.
• Description typos.
• Internal refactors that don't change the runtime catalog shape.

When CATALOG_VERSION bumps, downstream LoRA adapters trained against the previous version may need re-training to recognize the new vocabulary.

License

MIT