@dloizides/poster-render 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0
+
+- FlierDoc schema + validator, render, exportPng, 4 layouts, 5 formats, palettes, font sets, Kizomba example.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 dloizides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,12 @@
-# Temporary Holding Version
+# @dloizides/poster-render
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+One JSON document (`FlierDoc`) in, one poster out. Used by Flier Studio (FLIER-1 "Flier Studio").
+
+- `flierDocSchema`: JSON Schema of `FlierDoc` (give it to an LLM as `response_format`).
+- `validateFlierDoc(input)`: `{ ok, doc }` or `{ ok: false, errors }`; errors read `blocks.title: is required`.
+- `render(doc, assets, canvas)`: validates first (throws `FlierDocError` before touching the canvas), resizes the canvas to the format, draws, returns a `RenderReport` (picture rect, text and card boxes).
+- `exportPng(canvas)`: PNG `Blob` of the canvas size.
+- Formats: story 1080x1920, post 1080x1350, square 1080x1080, phone 1170x2532, desktop 2560x1440.
+- Layouts: `picture-right`, `picture-left`, `picture-bottom`, `list`. Palettes: `sand`, `night`, `sea`, `rose`. Font sets: `classic`, `modern`, `elegant` (the app loads the web fonts).
+- The picture is placed contain + anchor in its own region: never cropped, never faded, drawn last, and no text or card is laid out in its region. Text shrinks to fit, never overflows.
+- Example: `kizombaWorkshopDocs` (3 workshops + list flier), `kizombaWorkshop` (the list flier).

package/dist/index.d.mts

@@ -0,0 +1,206 @@
+declare enum BackgroundStyle {
+    Solid = "solid",
+    Tint = "tint"
+}
+
+declare enum FontSetId {
+    Classic = "classic",
+    Modern = "modern",
+    Elegant = "elegant"
+}
+
+declare enum FormatId {
+    Story = "story",
+    Post = "post",
+    Square = "square",
+    Phone = "phone",
+    Desktop = "desktop"
+}
+
+declare enum LayoutId {
+    PictureRight = "picture-right",
+    PictureLeft = "picture-left",
+    PictureBottom = "picture-bottom",
+    List = "list"
+}
+
+declare enum PaletteId {
+    Sand = "sand",
+    Night = "night",
+    Sea = "sea",
+    Rose = "rose"
+}
+
+declare enum PictureAnchor {
+    Top = "top",
+    Center = "center",
+    Bottom = "bottom"
+}
+
+interface FormatSize {
+    width: number;
+    height: number;
+}
+declare const FORMAT_SIZES: Readonly<Record<FormatId, FormatSize>>;
+
+interface ScheduleRow {
+    label: string;
+    time: string;
+}
+interface PriceRow {
+    amount: string;
+    label: string;
+}
+interface IncludesBlock {
+    heading: string;
+    items: string[];
+}
+interface FlierBlocks {
+    title: string;
+    titleBottom?: string;
+    script?: string;
+    venue?: string[];
+    schedule?: ScheduleRow[];
+    prices?: PriceRow[];
+    includes?: IncludesBlock;
+    footer?: string;
+}
+interface ListItem {
+    date: string;
+    schedule: ScheduleRow[];
+    price?: string;
+}
+interface PictureSlot {
+    imageId: string;
+    anchor: PictureAnchor;
+    scale: number;
+}
+interface LogoSlot {
+    imageId: string;
+}
+interface FlierDoc {
+    version: 1;
+    format: FormatId;
+    layout: LayoutId;
+    palette: PaletteId;
+    fonts: FontSetId;
+    background: BackgroundStyle;
+    picture?: PictureSlot;
+    logo?: LogoSlot;
+    blocks: FlierBlocks;
+    items?: ListItem[];
+}
+interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface PosterImage {
+    readonly width: number;
+    readonly height: number;
+}
+type PosterAssets = Record<string, PosterImage | undefined>;
+interface TextMetricsLike {
+    width: number;
+}
+interface PosterContext {
+    font: string;
+    fillStyle: string;
+    textAlign: string;
+    textBaseline: string;
+    globalAlpha: number;
+    save(): void;
+    restore(): void;
+    fillRect(x: number, y: number, w: number, h: number): void;
+    fillText(text: string, x: number, y: number): void;
+    measureText(text: string): TextMetricsLike;
+    drawImage(image: PosterImage, dx: number, dy: number, dw: number, dh: number): void;
+    beginPath(): void;
+    moveTo(x: number, y: number): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, r: number): void;
+    arc(x: number, y: number, r: number, start: number, end: number): void;
+    closePath(): void;
+    fill(): void;
+}
+interface PosterCanvas {
+    width: number;
+    height: number;
+    getContext(kind: '2d'): PosterContext | null;
+}
+interface RenderReport {
+    width: number;
+    height: number;
+    picture: Rect | null;
+    pictureRegion: Rect;
+    textBoxes: Rect[];
+    cardBoxes: Rect[];
+}
+interface Palette {
+    background: string;
+    tint: string;
+    title: string;
+    accent: string;
+    ink: string;
+    soft: string;
+    card: string;
+}
+interface FontSet {
+    display: string;
+    script: string;
+    body: string;
+}
+
+declare const PALETTES: Readonly<Record<PaletteId, Palette>>;
+
+declare const FONT_SETS: Readonly<Record<FontSetId, FontSet>>;
+
+interface JsonSchema {
+    $schema?: string;
+    $id?: string;
+    title?: string;
+    description?: string;
+    type?: 'object' | 'array' | 'string' | 'number' | 'integer';
+    properties?: Record<string, JsonSchema>;
+    required?: string[];
+    additionalProperties?: boolean;
+    enum?: readonly (string | number)[];
+    const?: string | number;
+    minLength?: number;
+    maxLength?: number;
+    minimum?: number;
+    maximum?: number;
+    items?: JsonSchema;
+    minItems?: number;
+    maxItems?: number;
+}
+
+declare const flierDocSchema: JsonSchema;
+
+type FlierDocResult = {
+    ok: true;
+    doc: FlierDoc;
+} | {
+    ok: false;
+    errors: string[];
+};
+declare class FlierDocError extends Error {
+    readonly errors: string[];
+    constructor(errors: string[]);
+}
+/** Checks any input (form, preset file, LLM output) against the FlierDoc schema; errors read "path: problem". */
+declare function validateFlierDoc(input: unknown): FlierDocResult;
+
+/** Validates the doc, then draws it on the canvas (resized to the format); throws FlierDocError before touching the canvas. */
+declare function render(input: unknown, assets: PosterAssets, canvas: PosterCanvas): RenderReport;
+
+interface DataUrlCanvas {
+    toDataURL(type: string): string;
+}
+/** Encodes the canvas as a PNG Blob of the canvas's exact pixel size. */
+declare function exportPng(canvas: DataUrlCanvas): Blob;
+
+declare const kizombaWorkshop: FlierDoc;
+declare const kizombaWorkshopDocs: FlierDoc[];
+
+export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };

package/dist/index.d.ts

@@ -0,0 +1,206 @@
+declare enum BackgroundStyle {
+    Solid = "solid",
+    Tint = "tint"
+}
+
+declare enum FontSetId {
+    Classic = "classic",
+    Modern = "modern",
+    Elegant = "elegant"
+}
+
+declare enum FormatId {
+    Story = "story",
+    Post = "post",
+    Square = "square",
+    Phone = "phone",
+    Desktop = "desktop"
+}
+
+declare enum LayoutId {
+    PictureRight = "picture-right",
+    PictureLeft = "picture-left",
+    PictureBottom = "picture-bottom",
+    List = "list"
+}
+
+declare enum PaletteId {
+    Sand = "sand",
+    Night = "night",
+    Sea = "sea",
+    Rose = "rose"
+}
+
+declare enum PictureAnchor {
+    Top = "top",
+    Center = "center",
+    Bottom = "bottom"
+}
+
+interface FormatSize {
+    width: number;
+    height: number;
+}
+declare const FORMAT_SIZES: Readonly<Record<FormatId, FormatSize>>;
+
+interface ScheduleRow {
+    label: string;
+    time: string;
+}
+interface PriceRow {
+    amount: string;
+    label: string;
+}
+interface IncludesBlock {
+    heading: string;
+    items: string[];
+}
+interface FlierBlocks {
+    title: string;
+    titleBottom?: string;
+    script?: string;
+    venue?: string[];
+    schedule?: ScheduleRow[];
+    prices?: PriceRow[];
+    includes?: IncludesBlock;
+    footer?: string;
+}
+interface ListItem {
+    date: string;
+    schedule: ScheduleRow[];
+    price?: string;
+}
+interface PictureSlot {
+    imageId: string;
+    anchor: PictureAnchor;
+    scale: number;
+}
+interface LogoSlot {
+    imageId: string;
+}
+interface FlierDoc {
+    version: 1;
+    format: FormatId;
+    layout: LayoutId;
+    palette: PaletteId;
+    fonts: FontSetId;
+    background: BackgroundStyle;
+    picture?: PictureSlot;
+    logo?: LogoSlot;
+    blocks: FlierBlocks;
+    items?: ListItem[];
+}
+interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface PosterImage {
+    readonly width: number;
+    readonly height: number;
+}
+type PosterAssets = Record<string, PosterImage | undefined>;
+interface TextMetricsLike {
+    width: number;
+}
+interface PosterContext {
+    font: string;
+    fillStyle: string;
+    textAlign: string;
+    textBaseline: string;
+    globalAlpha: number;
+    save(): void;
+    restore(): void;
+    fillRect(x: number, y: number, w: number, h: number): void;
+    fillText(text: string, x: number, y: number): void;
+    measureText(text: string): TextMetricsLike;
+    drawImage(image: PosterImage, dx: number, dy: number, dw: number, dh: number): void;
+    beginPath(): void;
+    moveTo(x: number, y: number): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, r: number): void;
+    arc(x: number, y: number, r: number, start: number, end: number): void;
+    closePath(): void;
+    fill(): void;
+}
+interface PosterCanvas {
+    width: number;
+    height: number;
+    getContext(kind: '2d'): PosterContext | null;
+}
+interface RenderReport {
+    width: number;
+    height: number;
+    picture: Rect | null;
+    pictureRegion: Rect;
+    textBoxes: Rect[];
+    cardBoxes: Rect[];
+}
+interface Palette {
+    background: string;
+    tint: string;
+    title: string;
+    accent: string;
+    ink: string;
+    soft: string;
+    card: string;
+}
+interface FontSet {
+    display: string;
+    script: string;
+    body: string;
+}
+
+declare const PALETTES: Readonly<Record<PaletteId, Palette>>;
+
+declare const FONT_SETS: Readonly<Record<FontSetId, FontSet>>;
+
+interface JsonSchema {
+    $schema?: string;
+    $id?: string;
+    title?: string;
+    description?: string;
+    type?: 'object' | 'array' | 'string' | 'number' | 'integer';
+    properties?: Record<string, JsonSchema>;
+    required?: string[];
+    additionalProperties?: boolean;
+    enum?: readonly (string | number)[];
+    const?: string | number;
+    minLength?: number;
+    maxLength?: number;
+    minimum?: number;
+    maximum?: number;
+    items?: JsonSchema;
+    minItems?: number;
+    maxItems?: number;
+}
+
+declare const flierDocSchema: JsonSchema;
+
+type FlierDocResult = {
+    ok: true;
+    doc: FlierDoc;
+} | {
+    ok: false;
+    errors: string[];
+};
+declare class FlierDocError extends Error {
+    readonly errors: string[];
+    constructor(errors: string[]);
+}
+/** Checks any input (form, preset file, LLM output) against the FlierDoc schema; errors read "path: problem". */
+declare function validateFlierDoc(input: unknown): FlierDocResult;
+
+/** Validates the doc, then draws it on the canvas (resized to the format); throws FlierDocError before touching the canvas. */
+declare function render(input: unknown, assets: PosterAssets, canvas: PosterCanvas): RenderReport;
+
+interface DataUrlCanvas {
+    toDataURL(type: string): string;
+}
+/** Encodes the canvas as a PNG Blob of the canvas's exact pixel size. */
+declare function exportPng(canvas: DataUrlCanvas): Blob;
+
+declare const kizombaWorkshop: FlierDoc;
+declare const kizombaWorkshopDocs: FlierDoc[];
+
+export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };