@ideare/kit

The engine behind ideare: it reads a brand (brand.json) and makes every file the brand needs. Icons, logos, share cards, social sizes, tokens, a business card and plain-words guidelines all come from one scene engine, so the studio, the CLI and the server draw the same pixels.

import { parseBrand } from "@ideare/kit";

const result = parseBrand(JSON.parse(text));
if (!result.ok) console.log(result.issues); // [{ path: "colors.light.ink", message: "Use a 6-digit hex color, like #1A2B3C." }]

Make the files

import { generate } from "@ideare/kit";
import { diskFontResolver } from "@ideare/kit/node";
import { resvgRasterizer } from "@ideare/kit/resvg";

const files = await generate(brand, { fonts: diskFontResolver(), rasterize: resvgRasterizer() });
// Map { "web/favicon.ico" => { bytes, mime, sha256, width, height }, "og/og.png" => ..., ... }

generate() writes nothing to disk; you decide where the bytes go. Pick groups with targets: ["web", "tokens"]. The groups are web, logo, og, social, tokens, registry, docs, email and print. When text would not fit or a letter is missing from a font, it refuses with a GenerateRefusal instead of making a cut file.

Check a brand

import { check } from "@ideare/kit";

const results = await check(brand, { fonts: diskFontResolver() });
// [{ id: "contrast.light.muted.surface", level: "error", title: "Quiet text on cards: hard to read. Fix it",
//    fix: { kind: "set", label: "Use #6b5e55", changes: [...] }, details: { ratio: "3.12:1", needed: "4.5:1" } }, ...]

Contrast (WCAG 2), the logo on its icon, 16 px legibility, glyph coverage, text fit in every language, safe zones, the copy check (no em dash, no machine-sounding words, sentence case, no exclamation marks, lengths) and upload limits.

Draw a scene

import { renderScene } from "@ideare/kit";

const { svg, boxes, checks, revision } = await renderScene(scene, brand, { fonts });

Text is shaped with HarfBuzz into glyph paths, so the browser and resvg show the same lines. Each layer sits in its own <g transform="translate(x y) rotate(r w/2 h/2)">, and a group's layers are placed in the group's own space. An editor passes one cache per stage, so a drag frame redraws only what changed:

import { createRenderCache } from "@ideare/kit";

const cache = createRenderCache();
const { svg } = await renderScene(scene, brand, { fonts, cache }); // the moved layer's transform, the rest from the cache

Make a post from a template

import { postTemplate } from "@ideare/kit";

const scene = postTemplate("promotion", brand); // an Instagram post, in the brand's language

There are 7 templates (POST_TEMPLATES): promotion, hours, menu, pix, new-product, status-offer and carousel (5 pages). Each comes in 5 sizes (POST_FORMATS): ig-post 1080x1350, ig-square 1080x1080, ig-story and wa-status 1080x1920, and share-card 1200x630. Pass { format: "ig-story", locale: "es" } for another size or language. They use only the brand's colors and its two fonts. The words the owner changes are slots (scene.slots), and the photo spot is an art layer called photo.

The Pix card needs the owner's Pix key, or its QR code shows a sample key that pays no one:

postTemplate("pix", brand, { pix: { key: "+5541999990000", city: "Curitiba" } });

pixCode({ key, name, city, amount }) gives the "copia e cola" code itself.

Edit a scene

Every edit is a plain function from a scene to a new scene, with no DOM, so an editor, an agent and a test edit the same way. Layers are found by id on a page (page 0 here), and positions are in the page's own pixels, even for a layer inside a turned group.

import { moveLayers } from "@ideare/kit";

const moved = moveLayers(scene, 0, ["title"], 40, 0); // 40 px to the right

The others: addLayer, removeLayers, duplicateLayers, resizeLayers (any corner or side, the opposite one held still), rotateLayers, groupLayers, ungroupLayers, reorderLayers, alignLayers, distributeLayers, lockLayers, setTextHeight, and addPage, duplicatePage, removePage and movePage for carousels. For a drag, compute each frame from the scene at the press, never from the last frame. snapTargets and snapBox snap within 12 screen pixels at the stage's scale, and turnAngle lands a turn on 45 degrees, or in 15 degree steps.

Undo keeps 50 steps, and a typing session is one step when its edits share a group:

import { emptyHistory, recordEdit, undoEdit } from "@ideare/kit";

let history = recordEdit(emptyHistory(), before, after, "typing:title");
const back = undoEdit(history, after); // { history, scene }

When a save comes back with someone else's change, mergeScenes(mine, base, theirs) brings it in and lists the fields you both changed, and rebaseHistory keeps Undo for everything they didn't.

Start from a name

import { draftBrand, newDraftSeed } from "@ideare/kit";

const brand = await draftBrand(
  { name: "Padaria Fermento", idea: "Pão de fermentação natural", locale: "pt-BR",
    seed: newDraftSeed(), picks: { colors: 0, fonts: 0, logo: 0 } },
  { fonts },
);

A whole draft brand from a name and one line, drawn by code: colors, a font pair, a logo (an icon or a monogram) and the copy. The same input always draws the same brand, so draftParams(input) puts it in a link and readDraftParams(params) reads it back anywhere. Each picks count is one "Try another" press. The font pairs are a short list (draftFontFiles() names every file), so a page can serve them itself.

Where it runs

• The core (@ideare/kit) runs in browsers, Node 20.3+, Bun and Workers. It loads the HarfBuzz wasm only when it first draws text. A bundler must keep harfbuzz.wasm next to harfbuzz.js, and a page's CSP needs 'wasm-unsafe-eval'.
• @ideare/kit/node: a font cache on disk (~/.cache/ideare/fonts).
• @ideare/kit/resvg: the rasterizer, on @resvg/resvg-js 2.6.2 (an optional peer).
• @ideare/kit/wasm: the same rasterizer built to wasm, on @resvg/resvg-wasm 2.6.2 (an optional peer), for browsers and for tools that must install nothing native. Pass it the wasm: wasmRasterizer({ wasm: readFile(require.resolve("@resvg/resvg-wasm/index_bg.wasm")) }) in Node, or a URL in the browser. It draws the same pixels as @ideare/kit/resvg.
• Under Bun, the bun export condition loads the TypeScript source, with no build step.

MIT. Lucide icons (ISC) and a QR encoder port (MIT) are inside; see THIRD_PARTY.md.