@natsuneko-laboratory/fleet-renderer-core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kanon Mochizuki
+
+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/dist/index.cjs

@@ -0,0 +1,250 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/constants.ts
+/** Fleet canvases are always rendered/edited at a fixed 9:16 portrait aspect ratio. */
+const FLEET_ASPECT_RATIO = 9 / 16;
+/** Reference output resolution used by the server-side renderer (also a good default preview canvas size). */
+const FLEET_CANVAS_WIDTH = 1080;
+const FLEET_CANVAS_HEIGHT = 1920;
+/** Scale bounds for text and sticker layers, matching the server-enforced schema. */
+const FLEET_TEXT_STICKER_SCALE_MIN = .1;
+const FLEET_TEXT_STICKER_SCALE_MAX = 5;
+/** Scale bounds for the media (background) layer — allowed to zoom out further to support crop/pan editing. */
+const FLEET_MEDIA_SCALE_MIN = .05;
+const FLEET_MEDIA_SCALE_MAX = 5;
+/** Rotation range exposed by the compose UI (the server schema itself allows -360..360). */
+const FLEET_ROTATION_UI_MIN = -180;
+const FLEET_ROTATION_UI_MAX = 180;
+/** Server-enforced maximums (`FLEET_SCHEMA` in teyvat's `foreign-model`). */
+const FLEET_MAX_TEXTS = 10;
+const FLEET_MAX_STICKERS = 20;
+const FLEET_TEXT_MAX_LENGTH = 500;
+const FLEET_DEFAULT_BACKGROUND_COLORS = [
+	"#000000",
+	"#1a1a2e",
+	"#0d3b66",
+	"#1b4332",
+	"#7b2d8b",
+	"#c0392b",
+	"#e67e22",
+	"#ffffff"
+];
+const FLEET_DEFAULT_PLACEMENT = {
+	posX: .5,
+	posY: .5,
+	scale: 1,
+	rotation: 0
+};
+/** Minimum on-screen sizes (px) so text/stickers stay legible on small containers. Set to `0` to disable. */
+const FLEET_DEFAULT_MIN_FONT_SIZE_PX = 14;
+const FLEET_DEFAULT_MIN_STICKER_SIZE_PX = 28;
+/** Fixed floors (px) for a text layer's background "pill" padding/corner radius. */
+const FLEET_TEXT_PADDING_VERTICAL_PX = 8;
+const FLEET_TEXT_PADDING_HORIZONTAL_PX = 12;
+const FLEET_TEXT_BORDER_RADIUS_PX = 10;
+//#endregion
+//#region src/fonts.ts
+/**
+* Canonical font mapping for the three shipped Fleet text styles' font. Unifies three previously
+* divergent naming schemes (RN font family strings, Tailwind font classes, satori-registered names).
+* `serif` intentionally maps to the same font as `default` until a dedicated serif asset exists.
+*/
+const FLEET_FONTS = {
+	default: {
+		style: "default",
+		weight: 400,
+		reactNativeFontFamily: "Noto Sans JP Regular",
+		cssFontFamily: "Noto Sans JP",
+		satoriFontName: "Noto Sans JP"
+	},
+	bold: {
+		style: "bold",
+		weight: 700,
+		reactNativeFontFamily: "Noto Sans JP Bold",
+		cssFontFamily: "Noto Sans JP",
+		satoriFontName: "Noto Sans JP"
+	},
+	serif: {
+		style: "serif",
+		weight: 400,
+		reactNativeFontFamily: "Noto Sans JP Regular",
+		cssFontFamily: "Noto Sans JP",
+		satoriFontName: "Noto Sans JP"
+	},
+	handwriting: {
+		style: "handwriting",
+		weight: 400,
+		reactNativeFontFamily: "HunyaJi-Re",
+		cssFontFamily: "HunyaJi-Re",
+		satoriFontName: "HunyaJi-Re"
+	}
+};
+const getFleetFontDescriptor = (style) => FLEET_FONTS[style];
+//#endregion
+//#region src/container-units.ts
+/**
+* CSS container-query-unit equivalents (`cqw`/`cqh`/`cqmin`/`cqmax`) computed from a raw
+* `{ width, height }` pair, so the same formulas work whether the size comes from a browser
+* `ResizeObserver`, React Native's `onLayout`, or a fixed server-side render target.
+*/
+const createContainerUnits = (container) => ({
+	cqw: (value) => container.width * value / 100,
+	cqh: (value) => container.height * value / 100,
+	cqmin: (value) => Math.min(container.width, container.height) * value / 100,
+	cqmax: (value) => Math.max(container.width, container.height) * value / 100
+});
+//#endregion
+//#region src/placement.ts
+/**
+* Converts a normalized `FleetPlacement` into a container-relative pixel transform:
+* `translate = (pos - 0.5) * containerSize`. This is the transform every layer kind
+* (media/text/sticker) applies identically, anchored at the layer's own center.
+*/
+const placementToPixelTransform = (placement, container) => ({
+	translateX: (placement.posX - .5) * container.width,
+	translateY: (placement.posY - .5) * container.height,
+	scale: placement.scale,
+	rotationDeg: placement.rotation
+});
+/**
+* Inverse of {@link placementToPixelTransform}'s translation: converts a container-relative pixel
+* offset (e.g. accumulated from a drag gesture, starting at the container center) back into a
+* normalized `FleetPlacement`. Used by editors while a layer is being dragged/pinched/rotated.
+*/
+const pixelOffsetToPlacement = (offsetXPx, offsetYPx, container, scale, rotation) => ({
+	posX: container.width > 0 ? offsetXPx / container.width + .5 : .5,
+	posY: container.height > 0 ? offsetYPx / container.height + .5 : .5,
+	scale,
+	rotation
+});
+/**
+* Radius (px) of the circle that fully contains a `width` x `height` box at the given `scale`,
+* regardless of rotation — i.e. the box's diagonal half-length. Rotation-safe by construction,
+* since a box's bounding circle doesn't change as it spins about its own center.
+*/
+const computeBoundingRadiusPx = (box, scale) => Math.hypot(box.width / 2, box.height / 2) * scale;
+/**
+* Pulls a layer's center inward, per axis, so its bounding circle never crosses the canvas edge.
+* If the circle is larger than the canvas along an axis, that axis is centered instead of clamped.
+*/
+const clampCenterToCanvas = ({ centerXPx, centerYPx, radiusPx, container }) => {
+	const clampAxis = (center, size) => {
+		if (radiusPx * 2 >= size) return size / 2;
+		return Math.min(Math.max(center, radiusPx), size - radiusPx);
+	};
+	return {
+		x: clampAxis(centerXPx, container.width),
+		y: clampAxis(centerYPx, container.height)
+	};
+};
+/**
+* Convenience wrapper combining {@link placementToPixelTransform}, {@link computeBoundingRadiusPx},
+* and {@link clampCenterToCanvas}: returns a `FleetPlacement` whose `posX`/`posY` have been pulled
+* inward so the box never visually clips the canvas edge. Scale/rotation pass through unchanged.
+*/
+const clampPlacementToCanvas = (placement, box, container) => {
+	const transform = placementToPixelTransform(placement, container);
+	const radiusPx = computeBoundingRadiusPx(box, placement.scale);
+	const centerXPx = container.width / 2 + transform.translateX;
+	const centerYPx = container.height / 2 + transform.translateY;
+	const clamped = clampCenterToCanvas({
+		centerXPx,
+		centerYPx,
+		radiusPx,
+		container
+	});
+	return {
+		...placement,
+		posX: container.width > 0 ? clamped.x / container.width : placement.posX,
+		posY: container.height > 0 ? clamped.y / container.height : placement.posY
+	};
+};
+//#endregion
+//#region src/layout.ts
+/**
+* The core layout engine: takes a platform-agnostic `FleetContentData` document plus the current
+* container size, and returns fully-resolved pixel geometry for every layer (position, size, font
+* size, padding, border radius). Adapters only need to map this to their own render primitives —
+* no positioning/sizing math should live in an adapter.
+*/
+const resolveFleetLayout = (content, container, options = {}) => {
+	const units = createContainerUnits(container);
+	const minFontSizePx = options.minFontSizePx ?? 14;
+	const minStickerSizePx = options.minStickerSizePx ?? 28;
+	return {
+		backgroundColor: content.backgroundColor,
+		container,
+		media: resolveMediaLayer(content.media, container, units),
+		texts: content.texts.map((text, index) => resolveTextLayer(text, index, container, units, minFontSizePx)),
+		stickers: content.stickers.map((sticker, index) => resolveStickerLayer(sticker, index, container, units, minStickerSizePx))
+	};
+};
+const resolveMediaLayer = (media, container, units) => {
+	if (!media) return null;
+	const placement = media.placement ?? FLEET_DEFAULT_PLACEMENT;
+	const widthPx = units.cqw(100);
+	const heightPx = widthPx * (media.height ?? container.height) / (media.width ?? container.width);
+	return {
+		type: "media",
+		transform: placementToPixelTransform(placement, container),
+		widthPx,
+		heightPx,
+		url: media.url,
+		alt: media.alt
+	};
+};
+const resolveTextLayer = (text, index, container, units, minFontSizePx) => {
+	const fontSizePx = Math.max(units.cqh(3), minFontSizePx);
+	return {
+		type: "text",
+		key: text.id ?? `${index}-${text.body}`,
+		transform: placementToPixelTransform(text, container),
+		body: text.body,
+		textAlignment: text.textAlignment,
+		color: text.color,
+		backgroundColor: text.backgroundColor ?? "transparent",
+		font: FLEET_FONTS[text.textStyle],
+		fontSizePx,
+		lineHeightPx: fontSizePx * 1.25,
+		paddingVerticalPx: Math.max(units.cqh(1.2), 8),
+		paddingHorizontalPx: Math.max(units.cqw(3.2), 12),
+		borderRadiusPx: Math.max(units.cqw(1.5), 10),
+		maxWidthPx: units.cqw(90)
+	};
+};
+const resolveStickerLayer = (sticker, index, container, units, minStickerSizePx) => ({
+	type: "sticker",
+	key: sticker.id ?? `${index}-${sticker.emoji}`,
+	transform: placementToPixelTransform(sticker, container),
+	emoji: sticker.emoji,
+	imageUrl: sticker.imageUrl,
+	sizePx: Math.max(units.cqw(8), minStickerSizePx)
+});
+//#endregion
+exports.FLEET_ASPECT_RATIO = FLEET_ASPECT_RATIO;
+exports.FLEET_CANVAS_HEIGHT = FLEET_CANVAS_HEIGHT;
+exports.FLEET_CANVAS_WIDTH = FLEET_CANVAS_WIDTH;
+exports.FLEET_DEFAULT_BACKGROUND_COLORS = FLEET_DEFAULT_BACKGROUND_COLORS;
+exports.FLEET_DEFAULT_MIN_FONT_SIZE_PX = FLEET_DEFAULT_MIN_FONT_SIZE_PX;
+exports.FLEET_DEFAULT_MIN_STICKER_SIZE_PX = FLEET_DEFAULT_MIN_STICKER_SIZE_PX;
+exports.FLEET_DEFAULT_PLACEMENT = FLEET_DEFAULT_PLACEMENT;
+exports.FLEET_FONTS = FLEET_FONTS;
+exports.FLEET_MAX_STICKERS = FLEET_MAX_STICKERS;
+exports.FLEET_MAX_TEXTS = FLEET_MAX_TEXTS;
+exports.FLEET_MEDIA_SCALE_MAX = FLEET_MEDIA_SCALE_MAX;
+exports.FLEET_MEDIA_SCALE_MIN = FLEET_MEDIA_SCALE_MIN;
+exports.FLEET_ROTATION_UI_MAX = FLEET_ROTATION_UI_MAX;
+exports.FLEET_ROTATION_UI_MIN = FLEET_ROTATION_UI_MIN;
+exports.FLEET_TEXT_BORDER_RADIUS_PX = FLEET_TEXT_BORDER_RADIUS_PX;
+exports.FLEET_TEXT_MAX_LENGTH = FLEET_TEXT_MAX_LENGTH;
+exports.FLEET_TEXT_PADDING_HORIZONTAL_PX = FLEET_TEXT_PADDING_HORIZONTAL_PX;
+exports.FLEET_TEXT_PADDING_VERTICAL_PX = FLEET_TEXT_PADDING_VERTICAL_PX;
+exports.FLEET_TEXT_STICKER_SCALE_MAX = FLEET_TEXT_STICKER_SCALE_MAX;
+exports.FLEET_TEXT_STICKER_SCALE_MIN = FLEET_TEXT_STICKER_SCALE_MIN;
+exports.clampCenterToCanvas = clampCenterToCanvas;
+exports.clampPlacementToCanvas = clampPlacementToCanvas;
+exports.computeBoundingRadiusPx = computeBoundingRadiusPx;
+exports.createContainerUnits = createContainerUnits;
+exports.getFleetFontDescriptor = getFleetFontDescriptor;
+exports.pixelOffsetToPlacement = pixelOffsetToPlacement;
+exports.placementToPixelTransform = placementToPixelTransform;
+exports.resolveFleetLayout = resolveFleetLayout;

package/dist/index.d.cts

@@ -0,0 +1,235 @@
+//#region src/types.d.ts
+/**
+ * A Fleet text layer's visual style. `serif` currently has no dedicated font asset upstream and
+ * falls back to the same font as `default` — kept as a distinct value since the data model (and
+ * the eventual dedicated font) already exists.
+ */
+type FleetTextStyle = "default" | "bold" | "serif" | "handwriting";
+type FleetTextAlignment = "left" | "center" | "right";
+/**
+ * Normalized position/transform shared by every layer kind (media, text, sticker).
+ * `posX`/`posY` are fractional coordinates where `0.5` is the container center; a layer's own
+ * center is placed at that fraction, then scaled and rotated about its own center.
+ *
+ * Unlike text/sticker layers (which are expected to stay within `[0, 1]`), media placement is
+ * intentionally allowed to range outside `[0, 1]` to support pannable/zoomable background crop.
+ */
+interface FleetPlacement {
+  posX: number;
+  posY: number;
+  scale: number;
+  rotation: number;
+}
+interface FleetMediaEntity {
+  url: string;
+  alt?: string;
+  /** Intrinsic width/height, used to preserve aspect ratio. Falls back to the container's own aspect ratio when absent. */
+  width?: number;
+  height?: number;
+  placement?: FleetPlacement;
+}
+interface FleetTextEntity extends FleetPlacement {
+  id?: string;
+  body: string;
+  textStyle: FleetTextStyle;
+  textAlignment: FleetTextAlignment;
+  color: string;
+  /** Hex color or `"transparent"`. */
+  backgroundColor?: string;
+}
+interface FleetStickerEntity extends FleetPlacement {
+  id?: string;
+  /** Unicode emoji codepoints, or a reaction "symbol" resolved to an image via `resolveStickerImageUrl`. */
+  emoji: string;
+  /** Pre-resolved image URL, when the consumer already knows it. */
+  imageUrl?: string;
+}
+/** The platform-agnostic "Fleet document" — everything needed to lay out and render a single Fleet. */
+interface FleetContentData {
+  backgroundColor: string;
+  media: FleetMediaEntity | null;
+  texts: FleetTextEntity[];
+  stickers: FleetStickerEntity[];
+}
+interface ContainerSize {
+  width: number;
+  height: number;
+}
+//#endregion
+//#region src/constants.d.ts
+/** Fleet canvases are always rendered/edited at a fixed 9:16 portrait aspect ratio. */
+declare const FLEET_ASPECT_RATIO: number;
+/** Reference output resolution used by the server-side renderer (also a good default preview canvas size). */
+declare const FLEET_CANVAS_WIDTH = 1080;
+declare const FLEET_CANVAS_HEIGHT = 1920;
+/** Scale bounds for text and sticker layers, matching the server-enforced schema. */
+declare const FLEET_TEXT_STICKER_SCALE_MIN = 0.1;
+declare const FLEET_TEXT_STICKER_SCALE_MAX = 5;
+/** Scale bounds for the media (background) layer — allowed to zoom out further to support crop/pan editing. */
+declare const FLEET_MEDIA_SCALE_MIN = 0.05;
+declare const FLEET_MEDIA_SCALE_MAX = 5;
+/** Rotation range exposed by the compose UI (the server schema itself allows -360..360). */
+declare const FLEET_ROTATION_UI_MIN = -180;
+declare const FLEET_ROTATION_UI_MAX = 180;
+/** Server-enforced maximums (`FLEET_SCHEMA` in teyvat's `foreign-model`). */
+declare const FLEET_MAX_TEXTS = 10;
+declare const FLEET_MAX_STICKERS = 20;
+declare const FLEET_TEXT_MAX_LENGTH = 500;
+declare const FLEET_DEFAULT_BACKGROUND_COLORS: readonly string[];
+declare const FLEET_DEFAULT_PLACEMENT: {
+  readonly posX: 0.5;
+  readonly posY: 0.5;
+  readonly scale: 1;
+  readonly rotation: 0;
+};
+/** Minimum on-screen sizes (px) so text/stickers stay legible on small containers. Set to `0` to disable. */
+declare const FLEET_DEFAULT_MIN_FONT_SIZE_PX = 14;
+declare const FLEET_DEFAULT_MIN_STICKER_SIZE_PX = 28;
+/** Fixed floors (px) for a text layer's background "pill" padding/corner radius. */
+declare const FLEET_TEXT_PADDING_VERTICAL_PX = 8;
+declare const FLEET_TEXT_PADDING_HORIZONTAL_PX = 12;
+declare const FLEET_TEXT_BORDER_RADIUS_PX = 10;
+//#endregion
+//#region src/fonts.d.ts
+interface FleetFontDescriptor {
+  style: FleetTextStyle;
+  weight: 400 | 700;
+  /** React Native `fontFamily` value (installed font name). */
+  reactNativeFontFamily: string;
+  /** CSS `font-family` value for web. */
+  cssFontFamily: string;
+  /** Font name to register/reference when rendering via satori. */
+  satoriFontName: string;
+}
+/**
+ * Canonical font mapping for the three shipped Fleet text styles' font. Unifies three previously
+ * divergent naming schemes (RN font family strings, Tailwind font classes, satori-registered names).
+ * `serif` intentionally maps to the same font as `default` until a dedicated serif asset exists.
+ */
+declare const FLEET_FONTS: Record<FleetTextStyle, FleetFontDescriptor>;
+declare const getFleetFontDescriptor: (style: FleetTextStyle) => FleetFontDescriptor;
+//#endregion
+//#region src/container-units.d.ts
+interface ContainerUnits {
+  /** `value`% of the container width, in px. */
+  cqw: (value: number) => number;
+  /** `value`% of the container height, in px. */
+  cqh: (value: number) => number;
+  /** `value`% of `min(width, height)`, in px. */
+  cqmin: (value: number) => number;
+  /** `value`% of `max(width, height)`, in px. */
+  cqmax: (value: number) => number;
+}
+/**
+ * CSS container-query-unit equivalents (`cqw`/`cqh`/`cqmin`/`cqmax`) computed from a raw
+ * `{ width, height }` pair, so the same formulas work whether the size comes from a browser
+ * `ResizeObserver`, React Native's `onLayout`, or a fixed server-side render target.
+ */
+declare const createContainerUnits: (container: ContainerSize) => ContainerUnits;
+//#endregion
+//#region src/placement.d.ts
+interface PixelTransform {
+  /** Translation from container center, in px. */
+  translateX: number;
+  translateY: number;
+  scale: number;
+  rotationDeg: number;
+}
+/**
+ * Converts a normalized `FleetPlacement` into a container-relative pixel transform:
+ * `translate = (pos - 0.5) * containerSize`. This is the transform every layer kind
+ * (media/text/sticker) applies identically, anchored at the layer's own center.
+ */
+declare const placementToPixelTransform: (placement: FleetPlacement, container: ContainerSize) => PixelTransform;
+/**
+ * Inverse of {@link placementToPixelTransform}'s translation: converts a container-relative pixel
+ * offset (e.g. accumulated from a drag gesture, starting at the container center) back into a
+ * normalized `FleetPlacement`. Used by editors while a layer is being dragged/pinched/rotated.
+ */
+declare const pixelOffsetToPlacement: (offsetXPx: number, offsetYPx: number, container: ContainerSize, scale: number, rotation: number) => FleetPlacement;
+interface BoundingBoxPx {
+  width: number;
+  height: number;
+}
+/**
+ * Radius (px) of the circle that fully contains a `width` x `height` box at the given `scale`,
+ * regardless of rotation — i.e. the box's diagonal half-length. Rotation-safe by construction,
+ * since a box's bounding circle doesn't change as it spins about its own center.
+ */
+declare const computeBoundingRadiusPx: (box: BoundingBoxPx, scale: number) => number;
+interface ClampCenterToCanvasOptions {
+  centerXPx: number;
+  centerYPx: number;
+  radiusPx: number;
+  container: ContainerSize;
+}
+/**
+ * Pulls a layer's center inward, per axis, so its bounding circle never crosses the canvas edge.
+ * If the circle is larger than the canvas along an axis, that axis is centered instead of clamped.
+ */
+declare const clampCenterToCanvas: ({ centerXPx, centerYPx, radiusPx, container }: ClampCenterToCanvasOptions) => {
+  x: number;
+  y: number;
+};
+/**
+ * Convenience wrapper combining {@link placementToPixelTransform}, {@link computeBoundingRadiusPx},
+ * and {@link clampCenterToCanvas}: returns a `FleetPlacement` whose `posX`/`posY` have been pulled
+ * inward so the box never visually clips the canvas edge. Scale/rotation pass through unchanged.
+ */
+declare const clampPlacementToCanvas: (placement: FleetPlacement, box: BoundingBoxPx, container: ContainerSize) => FleetPlacement;
+//#endregion
+//#region src/layout.d.ts
+interface ResolveFleetLayoutOptions {
+  /** Minimum text font size in px (floor). Set to `0` to disable. */
+  minFontSizePx?: number;
+  /** Minimum sticker size in px (floor). Set to `0` to disable. */
+  minStickerSizePx?: number;
+}
+interface ResolvedFleetMediaLayer {
+  type: "media";
+  transform: PixelTransform;
+  widthPx: number;
+  heightPx: number;
+  url: string;
+  alt?: string;
+}
+interface ResolvedFleetTextLayer {
+  type: "text";
+  key: string;
+  transform: PixelTransform;
+  body: string;
+  textAlignment: FleetTextAlignment;
+  color: string;
+  backgroundColor: string;
+  font: FleetFontDescriptor;
+  fontSizePx: number;
+  lineHeightPx: number;
+  paddingVerticalPx: number;
+  paddingHorizontalPx: number;
+  borderRadiusPx: number;
+  maxWidthPx: number;
+}
+interface ResolvedFleetStickerLayer {
+  type: "sticker";
+  key: string;
+  transform: PixelTransform;
+  emoji: string;
+  imageUrl?: string;
+  sizePx: number;
+}
+interface ResolvedFleetLayout {
+  backgroundColor: string;
+  container: ContainerSize;
+  media: ResolvedFleetMediaLayer | null;
+  texts: ResolvedFleetTextLayer[];
+  stickers: ResolvedFleetStickerLayer[];
+}
+/**
+ * The core layout engine: takes a platform-agnostic `FleetContentData` document plus the current
+ * container size, and returns fully-resolved pixel geometry for every layer (position, size, font
+ * size, padding, border radius). Adapters only need to map this to their own render primitives —
+ * no positioning/sizing math should live in an adapter.
+ */
+declare const resolveFleetLayout: (content: FleetContentData, container: ContainerSize, options?: ResolveFleetLayoutOptions) => ResolvedFleetLayout;
+//#endregion
+export { BoundingBoxPx, ClampCenterToCanvasOptions, ContainerSize, ContainerUnits, FLEET_ASPECT_RATIO, FLEET_CANVAS_HEIGHT, FLEET_CANVAS_WIDTH, FLEET_DEFAULT_BACKGROUND_COLORS, FLEET_DEFAULT_MIN_FONT_SIZE_PX, FLEET_DEFAULT_MIN_STICKER_SIZE_PX, FLEET_DEFAULT_PLACEMENT, FLEET_FONTS, FLEET_MAX_STICKERS, FLEET_MAX_TEXTS, FLEET_MEDIA_SCALE_MAX, FLEET_MEDIA_SCALE_MIN, FLEET_ROTATION_UI_MAX, FLEET_ROTATION_UI_MIN, FLEET_TEXT_BORDER_RADIUS_PX, FLEET_TEXT_MAX_LENGTH, FLEET_TEXT_PADDING_HORIZONTAL_PX, FLEET_TEXT_PADDING_VERTICAL_PX, FLEET_TEXT_STICKER_SCALE_MAX, FLEET_TEXT_STICKER_SCALE_MIN, FleetContentData, FleetFontDescriptor, FleetMediaEntity, FleetPlacement, FleetStickerEntity, FleetTextAlignment, FleetTextEntity, FleetTextStyle, PixelTransform, ResolveFleetLayoutOptions, ResolvedFleetLayout, ResolvedFleetMediaLayer, ResolvedFleetStickerLayer, ResolvedFleetTextLayer, clampCenterToCanvas, clampPlacementToCanvas, computeBoundingRadiusPx, createContainerUnits, getFleetFontDescriptor, pixelOffsetToPlacement, placementToPixelTransform, resolveFleetLayout };

package/dist/index.d.mts

@@ -0,0 +1,235 @@
+//#region src/types.d.ts
+/**
+ * A Fleet text layer's visual style. `serif` currently has no dedicated font asset upstream and
+ * falls back to the same font as `default` — kept as a distinct value since the data model (and
+ * the eventual dedicated font) already exists.
+ */
+type FleetTextStyle = "default" | "bold" | "serif" | "handwriting";
+type FleetTextAlignment = "left" | "center" | "right";
+/**
+ * Normalized position/transform shared by every layer kind (media, text, sticker).
+ * `posX`/`posY` are fractional coordinates where `0.5` is the container center; a layer's own
+ * center is placed at that fraction, then scaled and rotated about its own center.
+ *
+ * Unlike text/sticker layers (which are expected to stay within `[0, 1]`), media placement is
+ * intentionally allowed to range outside `[0, 1]` to support pannable/zoomable background crop.
+ */
+interface FleetPlacement {
+  posX: number;
+  posY: number;
+  scale: number;
+  rotation: number;
+}
+interface FleetMediaEntity {
+  url: string;
+  alt?: string;
+  /** Intrinsic width/height, used to preserve aspect ratio. Falls back to the container's own aspect ratio when absent. */
+  width?: number;
+  height?: number;
+  placement?: FleetPlacement;
+}
+interface FleetTextEntity extends FleetPlacement {
+  id?: string;
+  body: string;
+  textStyle: FleetTextStyle;
+  textAlignment: FleetTextAlignment;
+  color: string;
+  /** Hex color or `"transparent"`. */
+  backgroundColor?: string;
+}
+interface FleetStickerEntity extends FleetPlacement {
+  id?: string;
+  /** Unicode emoji codepoints, or a reaction "symbol" resolved to an image via `resolveStickerImageUrl`. */
+  emoji: string;
+  /** Pre-resolved image URL, when the consumer already knows it. */
+  imageUrl?: string;
+}
+/** The platform-agnostic "Fleet document" — everything needed to lay out and render a single Fleet. */
+interface FleetContentData {
+  backgroundColor: string;
+  media: FleetMediaEntity | null;
+  texts: FleetTextEntity[];
+  stickers: FleetStickerEntity[];
+}
+interface ContainerSize {
+  width: number;
+  height: number;
+}
+//#endregion
+//#region src/constants.d.ts
+/** Fleet canvases are always rendered/edited at a fixed 9:16 portrait aspect ratio. */
+declare const FLEET_ASPECT_RATIO: number;
+/** Reference output resolution used by the server-side renderer (also a good default preview canvas size). */
+declare const FLEET_CANVAS_WIDTH = 1080;
+declare const FLEET_CANVAS_HEIGHT = 1920;
+/** Scale bounds for text and sticker layers, matching the server-enforced schema. */
+declare const FLEET_TEXT_STICKER_SCALE_MIN = 0.1;
+declare const FLEET_TEXT_STICKER_SCALE_MAX = 5;
+/** Scale bounds for the media (background) layer — allowed to zoom out further to support crop/pan editing. */
+declare const FLEET_MEDIA_SCALE_MIN = 0.05;
+declare const FLEET_MEDIA_SCALE_MAX = 5;
+/** Rotation range exposed by the compose UI (the server schema itself allows -360..360). */
+declare const FLEET_ROTATION_UI_MIN = -180;
+declare const FLEET_ROTATION_UI_MAX = 180;
+/** Server-enforced maximums (`FLEET_SCHEMA` in teyvat's `foreign-model`). */
+declare const FLEET_MAX_TEXTS = 10;
+declare const FLEET_MAX_STICKERS = 20;
+declare const FLEET_TEXT_MAX_LENGTH = 500;
+declare const FLEET_DEFAULT_BACKGROUND_COLORS: readonly string[];
+declare const FLEET_DEFAULT_PLACEMENT: {
+  readonly posX: 0.5;
+  readonly posY: 0.5;
+  readonly scale: 1;
+  readonly rotation: 0;
+};
+/** Minimum on-screen sizes (px) so text/stickers stay legible on small containers. Set to `0` to disable. */
+declare const FLEET_DEFAULT_MIN_FONT_SIZE_PX = 14;
+declare const FLEET_DEFAULT_MIN_STICKER_SIZE_PX = 28;
+/** Fixed floors (px) for a text layer's background "pill" padding/corner radius. */
+declare const FLEET_TEXT_PADDING_VERTICAL_PX = 8;
+declare const FLEET_TEXT_PADDING_HORIZONTAL_PX = 12;
+declare const FLEET_TEXT_BORDER_RADIUS_PX = 10;
+//#endregion
+//#region src/fonts.d.ts
+interface FleetFontDescriptor {
+  style: FleetTextStyle;
+  weight: 400 | 700;
+  /** React Native `fontFamily` value (installed font name). */
+  reactNativeFontFamily: string;
+  /** CSS `font-family` value for web. */
+  cssFontFamily: string;
+  /** Font name to register/reference when rendering via satori. */
+  satoriFontName: string;
+}
+/**
+ * Canonical font mapping for the three shipped Fleet text styles' font. Unifies three previously
+ * divergent naming schemes (RN font family strings, Tailwind font classes, satori-registered names).
+ * `serif` intentionally maps to the same font as `default` until a dedicated serif asset exists.
+ */
+declare const FLEET_FONTS: Record<FleetTextStyle, FleetFontDescriptor>;
+declare const getFleetFontDescriptor: (style: FleetTextStyle) => FleetFontDescriptor;
+//#endregion
+//#region src/container-units.d.ts
+interface ContainerUnits {
+  /** `value`% of the container width, in px. */
+  cqw: (value: number) => number;
+  /** `value`% of the container height, in px. */
+  cqh: (value: number) => number;
+  /** `value`% of `min(width, height)`, in px. */
+  cqmin: (value: number) => number;
+  /** `value`% of `max(width, height)`, in px. */
+  cqmax: (value: number) => number;
+}
+/**
+ * CSS container-query-unit equivalents (`cqw`/`cqh`/`cqmin`/`cqmax`) computed from a raw
+ * `{ width, height }` pair, so the same formulas work whether the size comes from a browser
+ * `ResizeObserver`, React Native's `onLayout`, or a fixed server-side render target.
+ */
+declare const createContainerUnits: (container: ContainerSize) => ContainerUnits;
+//#endregion
+//#region src/placement.d.ts
+interface PixelTransform {
+  /** Translation from container center, in px. */
+  translateX: number;
+  translateY: number;
+  scale: number;
+  rotationDeg: number;
+}
+/**
+ * Converts a normalized `FleetPlacement` into a container-relative pixel transform:
+ * `translate = (pos - 0.5) * containerSize`. This is the transform every layer kind
+ * (media/text/sticker) applies identically, anchored at the layer's own center.
+ */
+declare const placementToPixelTransform: (placement: FleetPlacement, container: ContainerSize) => PixelTransform;
+/**
+ * Inverse of {@link placementToPixelTransform}'s translation: converts a container-relative pixel
+ * offset (e.g. accumulated from a drag gesture, starting at the container center) back into a
+ * normalized `FleetPlacement`. Used by editors while a layer is being dragged/pinched/rotated.
+ */
+declare const pixelOffsetToPlacement: (offsetXPx: number, offsetYPx: number, container: ContainerSize, scale: number, rotation: number) => FleetPlacement;
+interface BoundingBoxPx {
+  width: number;
+  height: number;
+}
+/**
+ * Radius (px) of the circle that fully contains a `width` x `height` box at the given `scale`,
+ * regardless of rotation — i.e. the box's diagonal half-length. Rotation-safe by construction,
+ * since a box's bounding circle doesn't change as it spins about its own center.
+ */
+declare const computeBoundingRadiusPx: (box: BoundingBoxPx, scale: number) => number;
+interface ClampCenterToCanvasOptions {
+  centerXPx: number;
+  centerYPx: number;
+  radiusPx: number;
+  container: ContainerSize;
+}
+/**
+ * Pulls a layer's center inward, per axis, so its bounding circle never crosses the canvas edge.
+ * If the circle is larger than the canvas along an axis, that axis is centered instead of clamped.
+ */
+declare const clampCenterToCanvas: ({ centerXPx, centerYPx, radiusPx, container }: ClampCenterToCanvasOptions) => {
+  x: number;
+  y: number;
+};
+/**
+ * Convenience wrapper combining {@link placementToPixelTransform}, {@link computeBoundingRadiusPx},
+ * and {@link clampCenterToCanvas}: returns a `FleetPlacement` whose `posX`/`posY` have been pulled
+ * inward so the box never visually clips the canvas edge. Scale/rotation pass through unchanged.
+ */
+declare const clampPlacementToCanvas: (placement: FleetPlacement, box: BoundingBoxPx, container: ContainerSize) => FleetPlacement;
+//#endregion
+//#region src/layout.d.ts
+interface ResolveFleetLayoutOptions {
+  /** Minimum text font size in px (floor). Set to `0` to disable. */
+  minFontSizePx?: number;
+  /** Minimum sticker size in px (floor). Set to `0` to disable. */
+  minStickerSizePx?: number;
+}
+interface ResolvedFleetMediaLayer {
+  type: "media";
+  transform: PixelTransform;
+  widthPx: number;
+  heightPx: number;
+  url: string;
+  alt?: string;
+}
+interface ResolvedFleetTextLayer {
+  type: "text";
+  key: string;
+  transform: PixelTransform;
+  body: string;
+  textAlignment: FleetTextAlignment;
+  color: string;
+  backgroundColor: string;
+  font: FleetFontDescriptor;
+  fontSizePx: number;
+  lineHeightPx: number;
+  paddingVerticalPx: number;
+  paddingHorizontalPx: number;
+  borderRadiusPx: number;
+  maxWidthPx: number;
+}
+interface ResolvedFleetStickerLayer {
+  type: "sticker";
+  key: string;
+  transform: PixelTransform;
+  emoji: string;
+  imageUrl?: string;
+  sizePx: number;
+}
+interface ResolvedFleetLayout {
+  backgroundColor: string;
+  container: ContainerSize;
+  media: ResolvedFleetMediaLayer | null;
+  texts: ResolvedFleetTextLayer[];
+  stickers: ResolvedFleetStickerLayer[];
+}
+/**
+ * The core layout engine: takes a platform-agnostic `FleetContentData` document plus the current
+ * container size, and returns fully-resolved pixel geometry for every layer (position, size, font
+ * size, padding, border radius). Adapters only need to map this to their own render primitives —
+ * no positioning/sizing math should live in an adapter.
+ */
+declare const resolveFleetLayout: (content: FleetContentData, container: ContainerSize, options?: ResolveFleetLayoutOptions) => ResolvedFleetLayout;
+//#endregion
+export { BoundingBoxPx, ClampCenterToCanvasOptions, ContainerSize, ContainerUnits, FLEET_ASPECT_RATIO, FLEET_CANVAS_HEIGHT, FLEET_CANVAS_WIDTH, FLEET_DEFAULT_BACKGROUND_COLORS, FLEET_DEFAULT_MIN_FONT_SIZE_PX, FLEET_DEFAULT_MIN_STICKER_SIZE_PX, FLEET_DEFAULT_PLACEMENT, FLEET_FONTS, FLEET_MAX_STICKERS, FLEET_MAX_TEXTS, FLEET_MEDIA_SCALE_MAX, FLEET_MEDIA_SCALE_MIN, FLEET_ROTATION_UI_MAX, FLEET_ROTATION_UI_MIN, FLEET_TEXT_BORDER_RADIUS_PX, FLEET_TEXT_MAX_LENGTH, FLEET_TEXT_PADDING_HORIZONTAL_PX, FLEET_TEXT_PADDING_VERTICAL_PX, FLEET_TEXT_STICKER_SCALE_MAX, FLEET_TEXT_STICKER_SCALE_MIN, FleetContentData, FleetFontDescriptor, FleetMediaEntity, FleetPlacement, FleetStickerEntity, FleetTextAlignment, FleetTextEntity, FleetTextStyle, PixelTransform, ResolveFleetLayoutOptions, ResolvedFleetLayout, ResolvedFleetMediaLayer, ResolvedFleetStickerLayer, ResolvedFleetTextLayer, clampCenterToCanvas, clampPlacementToCanvas, computeBoundingRadiusPx, createContainerUnits, getFleetFontDescriptor, pixelOffsetToPlacement, placementToPixelTransform, resolveFleetLayout };

package/dist/index.mjs

@@ -0,0 +1,222 @@
+//#region src/constants.ts
+/** Fleet canvases are always rendered/edited at a fixed 9:16 portrait aspect ratio. */
+const FLEET_ASPECT_RATIO = 9 / 16;
+/** Reference output resolution used by the server-side renderer (also a good default preview canvas size). */
+const FLEET_CANVAS_WIDTH = 1080;
+const FLEET_CANVAS_HEIGHT = 1920;
+/** Scale bounds for text and sticker layers, matching the server-enforced schema. */
+const FLEET_TEXT_STICKER_SCALE_MIN = .1;
+const FLEET_TEXT_STICKER_SCALE_MAX = 5;
+/** Scale bounds for the media (background) layer — allowed to zoom out further to support crop/pan editing. */
+const FLEET_MEDIA_SCALE_MIN = .05;
+const FLEET_MEDIA_SCALE_MAX = 5;
+/** Rotation range exposed by the compose UI (the server schema itself allows -360..360). */
+const FLEET_ROTATION_UI_MIN = -180;
+const FLEET_ROTATION_UI_MAX = 180;
+/** Server-enforced maximums (`FLEET_SCHEMA` in teyvat's `foreign-model`). */
+const FLEET_MAX_TEXTS = 10;
+const FLEET_MAX_STICKERS = 20;
+const FLEET_TEXT_MAX_LENGTH = 500;
+const FLEET_DEFAULT_BACKGROUND_COLORS = [
+	"#000000",
+	"#1a1a2e",
+	"#0d3b66",
+	"#1b4332",
+	"#7b2d8b",
+	"#c0392b",
+	"#e67e22",
+	"#ffffff"
+];
+const FLEET_DEFAULT_PLACEMENT = {
+	posX: .5,
+	posY: .5,
+	scale: 1,
+	rotation: 0
+};
+/** Minimum on-screen sizes (px) so text/stickers stay legible on small containers. Set to `0` to disable. */
+const FLEET_DEFAULT_MIN_FONT_SIZE_PX = 14;
+const FLEET_DEFAULT_MIN_STICKER_SIZE_PX = 28;
+/** Fixed floors (px) for a text layer's background "pill" padding/corner radius. */
+const FLEET_TEXT_PADDING_VERTICAL_PX = 8;
+const FLEET_TEXT_PADDING_HORIZONTAL_PX = 12;
+const FLEET_TEXT_BORDER_RADIUS_PX = 10;
+//#endregion
+//#region src/fonts.ts
+/**
+* Canonical font mapping for the three shipped Fleet text styles' font. Unifies three previously
+* divergent naming schemes (RN font family strings, Tailwind font classes, satori-registered names).
+* `serif` intentionally maps to the same font as `default` until a dedicated serif asset exists.
+*/
+const FLEET_FONTS = {
+	default: {
+		style: "default",
+		weight: 400,
+		reactNativeFontFamily: "Noto Sans JP Regular",
+		cssFontFamily: "Noto Sans JP",
+		satoriFontName: "Noto Sans JP"
+	},
+	bold: {
+		style: "bold",
+		weight: 700,
+		reactNativeFontFamily: "Noto Sans JP Bold",
+		cssFontFamily: "Noto Sans JP",
+		satoriFontName: "Noto Sans JP"
+	},
+	serif: {
+		style: "serif",
+		weight: 400,
+		reactNativeFontFamily: "Noto Sans JP Regular",
+		cssFontFamily: "Noto Sans JP",
+		satoriFontName: "Noto Sans JP"
+	},
+	handwriting: {
+		style: "handwriting",
+		weight: 400,
+		reactNativeFontFamily: "HunyaJi-Re",
+		cssFontFamily: "HunyaJi-Re",
+		satoriFontName: "HunyaJi-Re"
+	}
+};
+const getFleetFontDescriptor = (style) => FLEET_FONTS[style];
+//#endregion
+//#region src/container-units.ts
+/**
+* CSS container-query-unit equivalents (`cqw`/`cqh`/`cqmin`/`cqmax`) computed from a raw
+* `{ width, height }` pair, so the same formulas work whether the size comes from a browser
+* `ResizeObserver`, React Native's `onLayout`, or a fixed server-side render target.
+*/
+const createContainerUnits = (container) => ({
+	cqw: (value) => container.width * value / 100,
+	cqh: (value) => container.height * value / 100,
+	cqmin: (value) => Math.min(container.width, container.height) * value / 100,
+	cqmax: (value) => Math.max(container.width, container.height) * value / 100
+});
+//#endregion
+//#region src/placement.ts
+/**
+* Converts a normalized `FleetPlacement` into a container-relative pixel transform:
+* `translate = (pos - 0.5) * containerSize`. This is the transform every layer kind
+* (media/text/sticker) applies identically, anchored at the layer's own center.
+*/
+const placementToPixelTransform = (placement, container) => ({
+	translateX: (placement.posX - .5) * container.width,
+	translateY: (placement.posY - .5) * container.height,
+	scale: placement.scale,
+	rotationDeg: placement.rotation
+});
+/**
+* Inverse of {@link placementToPixelTransform}'s translation: converts a container-relative pixel
+* offset (e.g. accumulated from a drag gesture, starting at the container center) back into a
+* normalized `FleetPlacement`. Used by editors while a layer is being dragged/pinched/rotated.
+*/
+const pixelOffsetToPlacement = (offsetXPx, offsetYPx, container, scale, rotation) => ({
+	posX: container.width > 0 ? offsetXPx / container.width + .5 : .5,
+	posY: container.height > 0 ? offsetYPx / container.height + .5 : .5,
+	scale,
+	rotation
+});
+/**
+* Radius (px) of the circle that fully contains a `width` x `height` box at the given `scale`,
+* regardless of rotation — i.e. the box's diagonal half-length. Rotation-safe by construction,
+* since a box's bounding circle doesn't change as it spins about its own center.
+*/
+const computeBoundingRadiusPx = (box, scale) => Math.hypot(box.width / 2, box.height / 2) * scale;
+/**
+* Pulls a layer's center inward, per axis, so its bounding circle never crosses the canvas edge.
+* If the circle is larger than the canvas along an axis, that axis is centered instead of clamped.
+*/
+const clampCenterToCanvas = ({ centerXPx, centerYPx, radiusPx, container }) => {
+	const clampAxis = (center, size) => {
+		if (radiusPx * 2 >= size) return size / 2;
+		return Math.min(Math.max(center, radiusPx), size - radiusPx);
+	};
+	return {
+		x: clampAxis(centerXPx, container.width),
+		y: clampAxis(centerYPx, container.height)
+	};
+};
+/**
+* Convenience wrapper combining {@link placementToPixelTransform}, {@link computeBoundingRadiusPx},
+* and {@link clampCenterToCanvas}: returns a `FleetPlacement` whose `posX`/`posY` have been pulled
+* inward so the box never visually clips the canvas edge. Scale/rotation pass through unchanged.
+*/
+const clampPlacementToCanvas = (placement, box, container) => {
+	const transform = placementToPixelTransform(placement, container);
+	const radiusPx = computeBoundingRadiusPx(box, placement.scale);
+	const centerXPx = container.width / 2 + transform.translateX;
+	const centerYPx = container.height / 2 + transform.translateY;
+	const clamped = clampCenterToCanvas({
+		centerXPx,
+		centerYPx,
+		radiusPx,
+		container
+	});
+	return {
+		...placement,
+		posX: container.width > 0 ? clamped.x / container.width : placement.posX,
+		posY: container.height > 0 ? clamped.y / container.height : placement.posY
+	};
+};
+//#endregion
+//#region src/layout.ts
+/**
+* The core layout engine: takes a platform-agnostic `FleetContentData` document plus the current
+* container size, and returns fully-resolved pixel geometry for every layer (position, size, font
+* size, padding, border radius). Adapters only need to map this to their own render primitives —
+* no positioning/sizing math should live in an adapter.
+*/
+const resolveFleetLayout = (content, container, options = {}) => {
+	const units = createContainerUnits(container);
+	const minFontSizePx = options.minFontSizePx ?? 14;
+	const minStickerSizePx = options.minStickerSizePx ?? 28;
+	return {
+		backgroundColor: content.backgroundColor,
+		container,
+		media: resolveMediaLayer(content.media, container, units),
+		texts: content.texts.map((text, index) => resolveTextLayer(text, index, container, units, minFontSizePx)),
+		stickers: content.stickers.map((sticker, index) => resolveStickerLayer(sticker, index, container, units, minStickerSizePx))
+	};
+};
+const resolveMediaLayer = (media, container, units) => {
+	if (!media) return null;
+	const placement = media.placement ?? FLEET_DEFAULT_PLACEMENT;
+	const widthPx = units.cqw(100);
+	const heightPx = widthPx * (media.height ?? container.height) / (media.width ?? container.width);
+	return {
+		type: "media",
+		transform: placementToPixelTransform(placement, container),
+		widthPx,
+		heightPx,
+		url: media.url,
+		alt: media.alt
+	};
+};
+const resolveTextLayer = (text, index, container, units, minFontSizePx) => {
+	const fontSizePx = Math.max(units.cqh(3), minFontSizePx);
+	return {
+		type: "text",
+		key: text.id ?? `${index}-${text.body}`,
+		transform: placementToPixelTransform(text, container),
+		body: text.body,
+		textAlignment: text.textAlignment,
+		color: text.color,
+		backgroundColor: text.backgroundColor ?? "transparent",
+		font: FLEET_FONTS[text.textStyle],
+		fontSizePx,
+		lineHeightPx: fontSizePx * 1.25,
+		paddingVerticalPx: Math.max(units.cqh(1.2), 8),
+		paddingHorizontalPx: Math.max(units.cqw(3.2), 12),
+		borderRadiusPx: Math.max(units.cqw(1.5), 10),
+		maxWidthPx: units.cqw(90)
+	};
+};
+const resolveStickerLayer = (sticker, index, container, units, minStickerSizePx) => ({
+	type: "sticker",
+	key: sticker.id ?? `${index}-${sticker.emoji}`,
+	transform: placementToPixelTransform(sticker, container),
+	emoji: sticker.emoji,
+	imageUrl: sticker.imageUrl,
+	sizePx: Math.max(units.cqw(8), minStickerSizePx)
+});
+//#endregion
+export { FLEET_ASPECT_RATIO, FLEET_CANVAS_HEIGHT, FLEET_CANVAS_WIDTH, FLEET_DEFAULT_BACKGROUND_COLORS, FLEET_DEFAULT_MIN_FONT_SIZE_PX, FLEET_DEFAULT_MIN_STICKER_SIZE_PX, FLEET_DEFAULT_PLACEMENT, FLEET_FONTS, FLEET_MAX_STICKERS, FLEET_MAX_TEXTS, FLEET_MEDIA_SCALE_MAX, FLEET_MEDIA_SCALE_MIN, FLEET_ROTATION_UI_MAX, FLEET_ROTATION_UI_MIN, FLEET_TEXT_BORDER_RADIUS_PX, FLEET_TEXT_MAX_LENGTH, FLEET_TEXT_PADDING_HORIZONTAL_PX, FLEET_TEXT_PADDING_VERTICAL_PX, FLEET_TEXT_STICKER_SCALE_MAX, FLEET_TEXT_STICKER_SCALE_MIN, clampCenterToCanvas, clampPlacementToCanvas, computeBoundingRadiusPx, createContainerUnits, getFleetFontDescriptor, pixelOffsetToPlacement, placementToPixelTransform, resolveFleetLayout };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@natsuneko-laboratory/fleet-renderer-core",
+  "version": "0.1.0",
+  "description": "Platform-agnostic types, constants, and layout engine for Fleet rendering",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "fleet",
+    "catalyst",
+    "renderer",
+    "layout"
+  ],
+  "repository": {
+    "url": "https://github.com/mika-f/fleet-renderer/"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "tsdown": "^0.22.7",
+    "typescript": "^5.6.0",
+    "vitest": "^2.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format cjs,esm --dts",
+    "dev": "tsdown src/index.ts --format cjs,esm --dts --watch",
+    "test": "vitest run",
+    "lint": "tsc --noEmit"
+  }
+}