@cartella/presets

Built-in document presets for Cartella — a field registry, default canvas, and preview data set per document kind, ready to drop into <Studio>.

Install

pnpm add @cartella/presets @cartella/core @cartella/studio

Shipped presets

| Preset | documentType | Size | Pages | Field groups | | ------------------- | -------------- | ------------------------------------- | ----------- | ------------------------------------ | | idCardPreset | id-card | 342 × 216 px (ISO ID-1 at ~4×) | Front, Back | Student, School, Guardian, Program | | certificatePreset | certificate | 1123 × 794 px (A4 landscape @ 96 DPI) | Certificate | Recipient, Program, Issuer, Ceremony |

Every preset ships with:

• A full FieldRegistry — every field has a realistic previewValue
• A complete defaultCanvas — every declared binding has a layer on the page
• At least one PreviewDataSet so the editor's live preview is legible without consumer data
• validatePreset(preset) passes with zero issues (every preset is unit-tested against its own registry)

Usage

Out-of-the-box

import { idCardPreset } from '@cartella/presets';
import { Studio } from '@cartella/studio';

function CardEditor() {
  return (
    <Studio
      preset={idCardPreset}
      onSave={async (canvas) => {
        /* persist to your backend */
      }}
    />
  );
}

The preset prop seeds the canvas, wires the field palette, and registers validators. <Studio> takes care of the rest.

Mix & match

Every piece is exported individually if you want to reuse one part and customise the others:

import { idCardFieldRegistry, ID_CARD_WIDTH, ID_CARD_HEIGHT } from '@cartella/presets';
import { definePreset } from '@cartella/core';

// Use Academia's registry with your own starter canvas.
const customPreset = definePreset({
  documentType: 'id-card',
  label: 'School ID (custom layout)',
  pages: [
    { label: 'Front', width: ID_CARD_WIDTH, height: ID_CARD_HEIGHT },
    { label: 'Back', width: ID_CARD_WIDTH, height: ID_CARD_HEIGHT },
  ],
  fieldRegistry: idCardFieldRegistry,
  defaultCanvas: myOwnCanvas,
});

Validating a custom preset

validatePreset performs the cheap structural checks that catch the mistakes that crash <Studio> at mount time:

import { validatePreset } from '@cartella/presets';
import { myPreset } from './my-preset.js';

const result = validatePreset(myPreset);
if (!result.ok) {
  for (const issue of result.issues) {
    console.error(`${issue.path}: ${issue.message}`);
  }
  throw new Error('Preset failed validation');
}

Checks:

• documentType + label non-empty
• fieldRegistry.documentType matches preset.documentType
• defaultCanvas passes core.validate() against the registry
• pages[] length + dimensions match defaultCanvas.pages
• No duplicate previewDataSets labels

Design

• Product spec §7.8–§7.9 — Preset API and catalogue

License

MIT