@dloizides/poster-render 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 0.2.0
+
+- Layouts `arch`, `phone-clock-safe`, `phone-arch`, `desktop-safe`, `desktop-arch` (FLIER-1 D4 "Keep all layouts"); `LAYOUT_CATALOGUE` + `defaultLayoutFor`.
+- Critic r2 nits: arch prices moved up beside the arch top, lighter arch fill, phone arch top at 63% height, desktop arch 40 px right, logo top on the title cap top.
+- Includes block uses one size for every line; `RenderReport.backdrop`; `Palette.arch`.
+
+## 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,13 @@
-# 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` (E-A), `picture-left` (E-B), `arch` (E-C), `picture-bottom`, `list`, `phone-clock-safe` (P-A, top kept clear for the lock-screen clock), `phone-arch` (P-B), `desktop-safe` (D-A, text clear of desktop icons and the taskbar), `desktop-arch` (D-B). `LAYOUT_CATALOGUE` lists id, design id, label, description and designed formats (for the app picker and the LLM prompt); `defaultLayoutFor(format)` gives E-A / P-A / D-A.
+- Arch layouts paint a soft arch (palette `arch`, about 4% off the ground) behind the picture only, inside the picture region; prices sit large on either side. The includes block is set at one size for every line. 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,224 @@
+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",
+    Arch = "arch",
+    PhoneClockSafe = "phone-clock-safe",
+    PhoneArch = "phone-arch",
+    DesktopSafe = "desktop-safe",
+    DesktopArch = "desktop-arch"
+}
+
+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[];
+    backdrop: Rect | null;
+}
+interface Palette {
+    background: string;
+    tint: string;
+    title: string;
+    accent: string;
+    ink: string;
+    soft: string;
+    card: string;
+    arch: 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;
+
+interface LayoutCatalogueEntry {
+    id: LayoutId;
+    designId: string;
+    label: string;
+    description: string;
+    formats: readonly FormatId[];
+}
+declare const LAYOUT_CATALOGUE: readonly LayoutCatalogueEntry[];
+/** The default layout for a format (D4: E-A for posters, P-A for phone, D-A for desktop). */
+declare function defaultLayoutFor(format: FormatId): LayoutId;
+
+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, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, 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, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };

package/dist/index.d.ts

@@ -0,0 +1,224 @@
+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",
+    Arch = "arch",
+    PhoneClockSafe = "phone-clock-safe",
+    PhoneArch = "phone-arch",
+    DesktopSafe = "desktop-safe",
+    DesktopArch = "desktop-arch"
+}
+
+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[];
+    backdrop: Rect | null;
+}
+interface Palette {
+    background: string;
+    tint: string;
+    title: string;
+    accent: string;
+    ink: string;
+    soft: string;
+    card: string;
+    arch: 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;
+
+interface LayoutCatalogueEntry {
+    id: LayoutId;
+    designId: string;
+    label: string;
+    description: string;
+    formats: readonly FormatId[];
+}
+declare const LAYOUT_CATALOGUE: readonly LayoutCatalogueEntry[];
+/** The default layout for a format (D4: E-A for posters, P-A for phone, D-A for desktop). */
+declare function defaultLayoutFor(format: FormatId): LayoutId;
+
+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, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, 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, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };