@toonstrip/core 0.1.0

package/dist/render.js

@@ -0,0 +1,511 @@
+/**
+ * A panel, drawn. The renderer is a pure function of a {@link Panel} plus the
+ * cast: it reads no external state, which is what makes it testable in Node
+ * without a caller-side game loop or session — a shot arrives as a name
+ * (`establishing`, `close-up`) chosen by the caller, and this file decides
+ * what that shot looks like at the current panel size.
+ */
+import { drawFigure, figureFor, newCycle } from "./figure.js";
+import { BALLOON_FONT, drawBalloon, measureBalloon } from "./balloon.js";
+import { canvasMetrics, layoutBalloons, } from "./balloon-layout.js";
+/** The bodiless caption channel — a line with no speaking body. */
+export const CAPTION = "caption";
+/** The six camera presets, as framing. */
+const SHOTS = {
+    // Tight on the subject: the head fills the frame and the body is cropped
+    // away. Carries no balloon, so nothing else holds the head to one size.
+    reaction: { headFill: 0.54, headTop: 0.27, backdrop: 0.18 },
+    // A new location is the one moment the backdrop is the subject.
+    establishing: { fill: 0.5, reveal: 1, backdrop: 1 },
+    // A location already seen: both figures, small, the backdrop incidental.
+    wide: { fill: 0.58, reveal: 1, backdrop: 0.9 },
+    "close-up": { fill: 1.35, reveal: 0.62, backdrop: 0.5 },
+    "over-shoulder": { fill: 0.86, reveal: 0.78, backdrop: 0.6 },
+    medium: { fill: 0.78, reveal: 0.95, backdrop: 0.75 },
+};
+/**
+ * Panel scale is capped rather than free: this art is roughly 400x400 at
+ * native size, so the common case on any real viewport is downscaling, and
+ * the narrow risk is a large panel blowing a figure up into its own pixels.
+ */
+const MAX_SCALE = 1.6;
+/**
+ * When a panel carries a speech or thought balloon, no figure may grow wider
+ * than this fraction of the panel — a speech balloon straddles the head from
+ * above, so it needs to be wider than the head to sit over it and still
+ * read. Left uncapped on a panel with no such balloon (a `reaction` beat,
+ * whose whole point is a face that fills the frame).
+ */
+export const MAX_FIGURE_WIDTH = 0.55;
+/**
+ * When a panel carries a speech or thought balloon, no head may grow taller
+ * than this fraction of the panel — `fill` scales a figure by its *body*
+ * height, but what a reader reads as "how close is this" is head size, and
+ * heads vary as a fraction of figure height across a cast. This is a
+ * per-figure clamp on top of `fill`, binding hardest at `close-up`.
+ */
+export const MAX_HEAD_HEIGHT = 0.38;
+/**
+ * Reserved band at the top of the panel for a straddling speech balloon and
+ * its tail. A speech balloon sits above its speaker and drops a near-
+ * vertical tail, which only works if the head is far enough down to leave
+ * room — so when such a balloon is present, a figure is pushed down until
+ * its head-top clears this fraction of the panel height.
+ */
+export const BALLOON_HEADROOM = 0.44;
+/** A gesture sentinel angle per {@link Body.pose} value — outside the emotion wheel's metric. */
+const GESTURE_ANGLE = {
+    wave: 1001,
+    point: 1002,
+    shrug: 1005,
+};
+/**
+ * The priority-ordered emotion options a body's pose selection reads. A
+ * gesture (if present) is offered first — it only ever resolves a torso —
+ * and the body's own emotion is always offered too, so the face still
+ * expresses it even while the torso gestures.
+ */
+function emotionOptionsFor(body) {
+    const options = [{ ...body.emotion, priority: 1 }];
+    if (body.pose)
+        options.unshift({ angle: GESTURE_ANGLE[body.pose], intensity: 1, priority: 2 });
+    return options;
+}
+export function renderPanel(ctx, panel, cast, width, height, options = {}) {
+    const shot = SHOTS[panel.camera ?? "medium"];
+    const cycles = options.cycles ?? new Map();
+    // A speech or thought balloon needs a column beside the head; a caption is
+    // a top box and does not, so a caption-only panel never shrinks its figures.
+    const hasColumnBalloon = panel.speakers.some((line) => line.balloon !== "caption");
+    const widthCap = hasColumnBalloon ? width * MAX_FIGURE_WIDTH : Infinity;
+    ctx.save();
+    ctx.clearRect(0, 0, width, height);
+    ctx.beginPath();
+    ctx.rect(0, 0, width, height);
+    ctx.clip();
+    if (panel.dark)
+        drawDarkness(ctx, width, height);
+    else
+        drawBackdrop(ctx, cast, width, height, shot, panel.backdrop);
+    const bodies = selectFigures(panel, cast, cycles);
+    const placed = layoutAvatars(bodies, width, height, shot, widthCap);
+    // Reserve headroom for a straddling speech balloon: push each figure down
+    // until its head-top clears the top band, so the balloon has room to sit
+    // above and drop its tail. Only when such a balloon exists.
+    if (hasColumnBalloon)
+        applyHeadroom(placed, height);
+    if (options.trace) {
+        options.trace.bodies = placed.map(({ speaker, x, y, scale, mirror }) => ({ speaker, x, y, scale, mirror }));
+        options.trace.balloons = [];
+        options.trace.stacked = false;
+    }
+    // The figures are laid out in the dark and then not drawn, deliberately,
+    // and in that order: balloons are placed *over their speakers*, so
+    // skipping the layout would move every balloon in an unlit panel and the
+    // tails would point at nothing. Darkness removes what the reader can see,
+    // not where anyone is standing.
+    if (!panel.dark) {
+        for (const item of placed) {
+            const sheet = cast.sheets.get(item.speaker);
+            if (sheet)
+                drawFigure(ctx, sheet, item.figure, item.x, item.y, item.scale, item.mirror);
+        }
+    }
+    // Metadata, over the figures and under nothing: it owns its band, so it
+    // can never be covered by a balloon or a body.
+    if (panel.roomTitle !== undefined)
+        drawLocationTitle(ctx, panel.roomTitle, width);
+    drawBalloons(ctx, panel, width, height, placed, options.trace);
+    // The panel border last, so nothing overdraws it.
+    ctx.strokeStyle = "#000";
+    ctx.lineWidth = 2;
+    ctx.strokeRect(1, 1, width - 2, height - 2);
+    ctx.restore();
+}
+/** A body earns the stage if requested, or if it speaks this panel. */
+export function isSpeaker(body, speakers) {
+    if (body.requested)
+        return true;
+    return speakers.some((line) => line.speaker === body.character);
+}
+/**
+ * Stage order and facing. Order is stable by insertion (no talk-to graph
+ * exists to score a better one). Facing is scored: a body is charged for
+ * each neighbour it does not face and each neighbour that does not face it;
+ * reduced over a fixed row this means each body faces its **larger side** —
+ * the leftmost faces right, the rightmost faces left, and the row turns
+ * inward. An exact tie (the middle of an odd row) keeps the rightward default.
+ */
+export function orderBodies(bodies) {
+    const n = bodies.length;
+    return bodies.map((body, i) => {
+        const left = i;
+        const right = n - 1 - i;
+        return { body, flip: right < left };
+    });
+}
+/**
+ * Reserve the top band for a straddling speech balloon, and keep the head
+ * that sits under it small enough to leave a body in frame.
+ *
+ * 1. Push down to the band: a figure whose head-top is above
+ *    {@link BALLOON_HEADROOM} is moved down until it clears. A figure
+ *    already below the band is left alone.
+ * 2. Cap the head: with the head-top pinned, head size is the whole of "how
+ *    close are we", and `shot.fill` scales by *body* height — a poor proxy
+ *    across a cast whose head-to-body ratio varies. See {@link MAX_HEAD_HEIGHT}.
+ *
+ * Only figures the band actually pinned are capped, and they shrink about
+ * their own centre so the balloon column stays over them.
+ */
+export function applyHeadroom(placed, height) {
+    const minHeadTop = height * BALLOON_HEADROOM;
+    const headCap = height * MAX_HEAD_HEIGHT;
+    for (const item of placed) {
+        if (item.y >= minHeadTop)
+            continue;
+        item.y = minHeadTop;
+        const head = item.figure.headHeight * item.scale;
+        if (head <= headCap)
+            continue;
+        const centre = item.x + (item.figure.width * item.scale) / 2;
+        item.scale *= headCap / head;
+        item.x = centre - (item.figure.width * item.scale) / 2;
+    }
+}
+/**
+ * Place N bodies across the panel floor. Each body is scaled to the
+ * camera's fill height, normalized to a common target height across the
+ * cast. Widths are summed; if the row overruns the panel the whole set is
+ * reduced by one factor. Bodies are then spread with equal margins,
+ * including the two edges.
+ */
+export function layoutAvatars(bodies, width, height, shot, widthCap = Infinity) {
+    const n = bodies.length;
+    if (n === 0)
+        return [];
+    const ordered = orderBodies(bodies);
+    const scales = bodies.map((b) => fit(b.figure, height, shot.fill ?? 0, widthCap, shot.headFill));
+    const widths = bodies.map((b, i) => b.figure.width * scales[i]);
+    const sumWidth = widths.reduce((a, w) => a + w, 0);
+    // Shrink the whole row to fit when it overruns the panel.
+    if (sumWidth > width) {
+        const reduction = width / sumWidth;
+        for (let i = 0; i < n; i++) {
+            scales[i] *= reduction;
+            widths[i] *= reduction;
+        }
+    }
+    const bodyWidth = widths.reduce((a, w) => a + w, 0);
+    const margin = (width - bodyWidth) / (n + 1);
+    const placed = [];
+    let x = margin;
+    for (let i = 0; i < n; i++) {
+        const { body, figure } = bodies[i];
+        const scale = scales[i];
+        const w = widths[i];
+        placed.push({
+            speaker: body.character, figure, scale, x,
+            y: shot.headTop === undefined
+                ? height - figure.height * scale * shot.reveal
+                : height * shot.headTop,
+            mirror: ordered[i].flip,
+        });
+        x += w + margin;
+    }
+    return placed;
+}
+/**
+ * Who is on stage in this panel, and posed how. Each figure's pose comes
+ * from its **own** body's emotion, so N participants pose independently,
+ * never sharing one panel emotion. Unknown character ids (no sheet, no
+ * manifest entry) are skipped.
+ *
+ * Exported because it is the step that advances `cycles`, and it takes no
+ * width — a caller that needs a panel's round-robin advanced without
+ * drawing it (a virtualized strip that stages every panel but paints only
+ * the ones on screen) can call this and get exactly what {@link renderPanel}
+ * would have consumed. Calling it mutates `cycles`; pass a copy to avoid that.
+ */
+export function selectFigures(panel, cast, cycles) {
+    const bodies = [];
+    for (const body of panel.bodies) {
+        if (!isSpeaker(body, panel.speakers))
+            continue;
+        const avatar = cast.manifest.cast[body.character];
+        if (!avatar || !cast.sheets.get(body.character))
+            continue;
+        const figure = figureFor(avatar, emotionOptionsFor(body), cycleFor(cycles, body.character));
+        if (figure)
+            bodies.push({ body, figure });
+    }
+    return bodies;
+}
+function cycleFor(cycles, character) {
+    let cycle = cycles.get(character);
+    if (!cycle) {
+        cycle = newCycle();
+        cycles.set(character, cycle);
+    }
+    return cycle;
+}
+export function fit(figure, height, fill, widthCap = Infinity, headFill) {
+    // `headFill` replaces the body term rather than joining it as another
+    // clamp: it is a different way of asking for the same thing.
+    const wanted = headFill === undefined
+        ? (height * fill) / figure.height
+        : (height * headFill) / figure.headHeight;
+    return Math.min(wanted, MAX_SCALE, widthCap / figure.width);
+}
+/**
+ * An unlit panel: the frame is black, and that is the whole drawing. Not a
+ * dimmed backdrop and not a silhouette — total darkness means no figures are
+ * drawn either, just balloons over a black frame. `#0b0b0b` rather than
+ * `#000` so the panel border (a 2px `#000` stroke) still reads as a border
+ * against it.
+ */
+function drawDarkness(ctx, width, height) {
+    ctx.fillStyle = "#0b0b0b";
+    ctx.fillRect(0, 0, width, height);
+}
+function drawBackdrop(ctx, cast, width, height, shot, id) {
+    ctx.fillStyle = "#fdfcf7";
+    ctx.fillRect(0, 0, width, height);
+    const image = id ? cast.backdrops.get(id) : undefined;
+    if (!image)
+        return;
+    // Cover, anchored low: backdrops are square and the horizon typically sits
+    // in their lower half, so anchoring to the top would put figures in the
+    // sky on any panel wider than it is tall.
+    const scale = Math.max(width / 315, height / 315);
+    const w = 315 * scale;
+    const h = 315 * scale;
+    ctx.save();
+    ctx.globalAlpha = shot.backdrop;
+    ctx.drawImage(image, (width - w) / 2, height - h, w, h);
+    ctx.restore();
+}
+/**
+ * Balloons live in the top band; the figures own the bottom — the
+ * arrangement that keeps a tail short enough to read. Placement inside that
+ * band is the layout driver's ({@link "./balloon-layout.js".layoutBalloons});
+ * {@link stackBalloons} is the fallback for the one case the driver has no
+ * answer for — a panel it refuses.
+ */
+function drawBalloons(ctx, panel, width, height, placed, trace) {
+    ctx.font = BALLOON_FONT;
+    const heads = headGeometry(placed);
+    const free = balloonRect(width, height, panel.roomTitle !== undefined);
+    const inputs = panel.speakers.map((balloon) => ({
+        speaker: balloon.speaker,
+        isBox: balloon.balloon === "caption",
+        // A caption points at nobody; so does a line whose speaker has no body
+        // on stage. Both are placed at the free rect's left edge and block no route.
+        arrowX: balloon.speaker === CAPTION
+            ? null
+            : (heads.anchors.get(balloon.speaker)?.x ?? null),
+        text: balloon.text,
+        metrics: canvasMetrics(ctx, balloon),
+    }));
+    const laid = layoutBalloons(inputs, free);
+    if (!laid.fits) {
+        if (trace)
+            trace.stacked = true;
+        stackBalloons(ctx, panel, width, heads);
+        return;
+    }
+    for (const [i, item] of laid.balloons.entries()) {
+        const balloon = panel.speakers[i];
+        // Force-fit may have shortened the text; draw the lines the driver measured.
+        const face = balloon.speaker === CAPTION ? undefined : heads.faceBox.get(balloon.speaker);
+        const isSpeech = balloon.balloon === "speech";
+        const target = isSpeech && face
+            ? headEdgeTip(item.box, face)
+            : (heads.anchors.get(balloon.speaker) ?? null);
+        drawBalloon(ctx, balloon, item.box, item.lines, target);
+        trace?.balloons.push({
+            speaker: balloon.speaker, box: item.box, lines: item.lines.length,
+            tail: target ? { x: target.x, y: target.y } : null,
+        });
+    }
+}
+/** The band balloons may occupy, from the panel's top down to {@link BALLOON_HEADROOM}. */
+export function balloonRect(width, height, titled = false) {
+    return {
+        left: BALLOON_MARGIN,
+        // A location title is metadata drawn over the top-left corner, so the
+        // band gives way to it rather than a balloon landing on it.
+        top: BALLOON_MARGIN + (titled ? TITLE_HEIGHT : 0),
+        right: width - BALLOON_MARGIN,
+        bottom: height * BALLOON_HEADROOM,
+    };
+}
+/** The inset from the panel border. */
+export const BALLOON_MARGIN = 10;
+/** The location title's height, and the type it is set in. Not a balloon: no tail, no draw order. */
+export const TITLE_HEIGHT = 22;
+const TITLE_FONT = 'bold 12px "Comic Sans MS", "Comic Neue", ui-rounded, cursive';
+const TITLE_PAD = 6;
+/** Draw the location title, clipped to the panel's width. */
+export function drawLocationTitle(ctx, title, width) {
+    ctx.save();
+    ctx.font = TITLE_FONT;
+    const text = ctx.measureText(title).width > width - BALLOON_MARGIN * 2 - TITLE_PAD * 2
+        ? ellipsize(ctx, title, width - BALLOON_MARGIN * 2 - TITLE_PAD * 2)
+        : title;
+    const boxWidth = ctx.measureText(text).width + TITLE_PAD * 2;
+    ctx.fillStyle = "#fff";
+    ctx.strokeStyle = "#000";
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.rect(BALLOON_MARGIN, BALLOON_MARGIN, boxWidth, TITLE_HEIGHT);
+    ctx.fill();
+    ctx.stroke();
+    ctx.fillStyle = "#000";
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, BALLOON_MARGIN + TITLE_PAD, BALLOON_MARGIN + TITLE_HEIGHT / 2);
+    ctx.restore();
+}
+function ellipsize(ctx, text, max) {
+    let out = text;
+    while (out.length > 1 && ctx.measureText(`${out}…`).width > max)
+        out = out.slice(0, -1);
+    return `${out}…`;
+}
+/** Each on-stage head as a tail anchor and a keep-out box, in panel space. */
+function headGeometry(placed) {
+    // A balloon over a face is the one thing comics never do, so balloons
+    // route *around* these; a speech tail lands on the box's near edge.
+    const anchors = new Map();
+    const faceBox = new Map();
+    const faces = [];
+    for (const item of placed) {
+        // A mirrored figure's face is at `width - faceX` from its left edge, so
+        // the balloon tail must follow it or it would point at the back of the head.
+        const faceX = item.mirror ? item.figure.width - item.figure.faceX : item.figure.faceX;
+        const ax = item.x + faceX * item.scale;
+        const headH = item.figure.headHeight * item.scale;
+        anchors.set(item.speaker, {
+            x: ax,
+            // The crown anchor, used by *thought* balloons. Depth is a capped
+            // fraction of head height so the cap stays in the hairline at any
+            // scale — a speech tail does not use this, it lands via {@link headEdgeTip}.
+            y: item.y + Math.min(headH * 0.2, 16),
+        });
+        const halfW = headH * 0.44;
+        const box = { left: ax - halfW, right: ax + halfW, top: item.y, bottom: item.y + headH };
+        faceBox.set(item.speaker, box);
+        faces.push(box);
+    }
+    return { anchors, faceBox, faces };
+}
+/**
+ * The pre-driver vertical stack, kept as {@link drawBalloons}'s fallback for
+ * a panel the layout driver refuses. Not the driver's algorithm — nothing
+ * but the fallback path calls it.
+ */
+function stackBalloons(ctx, panel, width, heads) {
+    const { anchors, faceBox, faces } = heads;
+    const faceCentre = (f) => f ? (f.left + f.right) / 2 : null;
+    // Empty margins, still used to float a *thought* aside off in open space;
+    // a *speech* balloon straddles its speaker.
+    const faceLeft = faces.length > 0 ? Math.min(...faces.map((f) => f.left)) : width;
+    const faceRight = faces.length > 0 ? Math.max(...faces.map((f) => f.right)) : 0;
+    const asideSide = width - 10 - faceRight >= faceLeft - 10 ? "right" : "left";
+    // The panel's balloons in draw order, each bound to its speaker's head:
+    // the caption and any bodiless speaker route with no anchor, the rest straddle.
+    const queue = panel.speakers.map((balloon) => {
+        const face = balloon.speaker === CAPTION ? undefined : faceBox.get(balloon.speaker);
+        const anchor = balloon.speaker === CAPTION ? null : (anchors.get(balloon.speaker) ?? null);
+        return { balloon, anchor, face, headX: faceCentre(face) };
+    });
+    // A balloon that owns the panel spreads across most of it; the original
+    // only tightens the free rect when *other* balloons share the width.
+    // Since balloons always stack vertically here, "shares the width" reduces
+    // to "there is more than one".
+    const cap = queue.length === 1 ? width - 20 : width * 0.66;
+    // The tail is capped, not stretched: a balloon docks near its head with a
+    // short tail. We pin balloons to the panel top while figures stand at the
+    // bottom, so `TAIL_MAX` drops a tailed balloon toward its head until the
+    // tail is no longer than this, leaving the empty space above it.
+    const TAIL_MAX = 70;
+    let y = 8;
+    for (const item of queue) {
+        const balloon = item.balloon;
+        const isSpeech = balloon.balloon === "speech";
+        // A thought balloon's scallops bulge outward; keep that bulge clear too.
+        const bulge = balloon.balloon === "thought" ? 14 : 0;
+        const measured = measureBalloon(ctx, balloon, cap);
+        // Drop a tailed balloon toward its speaker so the tail stays short. The
+        // head top is the face box's top for speech, the crown anchor for a thought.
+        const headTopY = item.face ? item.face.top : (item.anchor ? item.anchor.y : null);
+        if (headTopY !== null && balloon.balloon !== "caption") {
+            y = Math.max(y, headTopY - TAIL_MAX - measured.height);
+        }
+        let x;
+        if (isSpeech && item.headX !== null) {
+            // Straddle the speaker: the head's x sits inside the balloon's span,
+            // so the bottom tail drops straight to it. The symmetric midpoint of
+            // the legal range is taken deterministically rather than rolled.
+            x = Math.max(10, Math.min(item.headX - measured.width / 2, width - measured.width - 10));
+        }
+        else if (balloon.balloon === "caption") {
+            x = 10; // a caption is a top box, pinned left, spoken by nobody.
+        }
+        else {
+            // A thought aside floats in the roomier margin, clear of every face.
+            x = asideSide === "right" ? width - measured.width - 10 : 10;
+            x = clearOfFaces(x, y, measured.width, measured.height, bulge, faces, width);
+        }
+        const box = { x, y, width: measured.width, height: measured.height };
+        // A speech tail lands on the head's silhouette nearest the balloon (its
+        // crown, since the balloon straddles from above); a thought aside keeps
+        // the crown anchor.
+        const target = isSpeech && item.face ? headEdgeTip(box, item.face) : item.anchor;
+        drawBalloon(ctx, balloon, box, measured.lines, target);
+        y += measured.height + 8;
+    }
+}
+/**
+ * Where a speech tail should end: the point on the head's silhouette (its
+ * face keep-out box) nearest the balloon — the crown when the balloon is
+ * above, the temple when it is to the side. Aiming at the head's centre
+ * would cross the face and land on the nose when the balloon sits beside it.
+ */
+function headEdgeTip(box, face) {
+    const headCx = (face.left + face.right) / 2;
+    // The tail root rides the balloon's bottom edge, as near the head as it fits.
+    const rootX = Math.min(Math.max(headCx, box.x), box.x + box.width);
+    const rootY = box.y + box.height;
+    return {
+        x: Math.min(Math.max(rootX, face.left), face.right),
+        y: Math.min(Math.max(rootY, face.top), face.bottom),
+    };
+}
+/**
+ * Slide a box horizontally until it no longer overlaps any face box, moving
+ * it toward whichever side needs less travel and still fits the panel. When
+ * the box is too wide to clear at all, it is left where it was and only
+ * nudged back inside the panel edges.
+ */
+export function clearOfFaces(x, y, w, h, bulge, faces, width) {
+    for (const f of faces) {
+        const top = y - bulge;
+        const bottom = y + h + bulge + 24; // the tail can reach below the box
+        if (bottom <= f.top || top >= f.bottom)
+            continue; // clears vertically
+        const left = x - bulge;
+        const right = x + w + bulge;
+        if (right <= f.left || left >= f.right)
+            continue; // already clears horizontally
+        const toRight = f.right + bulge + 6 - left; // x delta to sit right of the head
+        const toLeft = f.left - bulge - 6 - right; // (negative) to sit left of it
+        const canRight = x + toRight + w + 10 <= width;
+        const canLeft = x + toLeft >= 10;
+        if (canRight && (!canLeft || toRight <= -toLeft))
+            x += toRight;
+        else if (canLeft)
+            x += toLeft;
+    }
+    return Math.max(10, Math.min(x, width - w - 10));
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@toonstrip/core",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "lint": "tsc -p tsconfig.json --noEmit",
+    "example:render-fixture": "node --experimental-strip-types examples/render-fixture.ts"
+  },
+  "dependencies": {
+    "@toonstrip/schema": "workspace:*",
+    "@napi-rs/canvas": "^0.1.65"
+  },
+  "devDependencies": {
+    "@toonstrip/pack-comic-chat": "workspace:*",
+    "@toonstrip/pack-example": "workspace:*",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}