@cutcraft/player 0.0.0-stage → 0.1.0

package/dist/overlays.d.mts

@@ -0,0 +1,201 @@
+import { E as TransitionRole, N as layerClock, a as Motion, i as GraphicAnimation, l as motionAt, m as Matrix2D, r as ClipRect, t as OVERLAY_KINDS, u as Box } from "./backdrop-BqrzCzTB.mjs";
+import { t as indexLayerInteriors } from "./layer-interiors-r4SeMbp2.mjs";
+import { FitMode, Placement, ResolvedState, ResolvedTheme } from "@cutcraft/kit";
+import { CSSProperties, ReactNode } from "react";
+import { Label } from "@cutcraft/graphics";
+interface ElementProps {
+  readonly placement: Placement;
+  readonly children: readonly Placement[];
+  readonly state: ResolvedState;
+  /** Composition time. */
+  readonly time: number;
+  /** The transition the element is in, if any. */
+  readonly transition?: TransitionRole | undefined;
+}
+/** Where and how an overlay of `size` composition pixels is drawn: its box, matrix, opacity, filter, blend and corner radius. */
+interface OverlayLayout {
+  readonly rect: {
+    readonly w: number;
+    readonly h: number;
+  };
+  readonly matrix: Matrix2D;
+  readonly opacity: number;
+  /** A CSS filter list, or null. */
+  readonly filter: string | null;
+  /** A canvas compositing operation, or null for normal. */
+  readonly blend: GlobalCompositeOperation | null;
+  readonly borderRadius: number;
+  /** The part shown while an entrance or exit wipes or reveals it, in the element's own pixels; null for all. */
+  readonly clip: readonly ClipRect[] | null;
+  /** How much of its strokes are drawn (0..1) during a `draw` entrance or exit; null when not drawing. */
+  readonly draw: number | null;
+}
+/**
+ * `drawable` elements (shapes, SVG) draw their strokes progressively for a `draw` entrance;
+ * others fade instead.
+ */
+export declare function overlayLayout(p: ElementProps, size: Box, fit?: FitMode, drawable?: boolean): OverlayLayout;
+/** A clip as a CSS `path()`: rectangles in the element's own pixels, an empty one when nothing shows. */
+export declare function clipPathCss(clip: readonly ClipRect[]): string;
+/** A title's box: its width and height props, the whole frame when left out. */
+export declare function titleBox(props: Readonly<Record<string, unknown>>, comp: {
+  width: number;
+  height: number;
+}): {
+  width: number;
+  height: number;
+};
+/** Text title: the file's text content with font props; entrance/exit presets as CSS transforms. */
+export declare function titleContent(p: ElementProps & {
+  readonly text: string;
+}): ReactNode;
+/** The active caption lines, positioned by the captions style; karaoke colours words by their timing. */
+export declare function captionsContent(p: {
+  readonly placement: Placement;
+  readonly state: ElementProps["state"];
+  readonly time: number;
+}): ReactNode;
+/** The interior as written, with the Layer's handles (edited props) applied to its one component. */
+export declare function layerContent(interior: ReactNode, props: Readonly<Record<string, unknown>> | undefined): ReactNode;
+/** The labelled box shown for a sticker with no media. */
+export declare function stickerPlaceholder(label: string): ReactNode;
+/** Side length of the box a sticker is drawn in. */
+export declare function stickerSize(p: ElementProps): number;
+/**
+ * SVG markup as both surfaces draw it. The browser preview inlines the string,
+ * the Node export rasterises it with skia, so whatever this module returns is
+ * what both show: it parses the markup once, drops what must not run, sizes the
+ * root to the element's box, renames ids so two elements never share one, puts
+ * theme tokens in, and applies the colour mode as an SVG filter (skia and the
+ * browser both implement the filters used here).
+ */
+interface SvgNode {
+  readonly name: string;
+  readonly attrs: Record<string, string>;
+  readonly children: (SvgNode | string)[];
+}
+interface SvgViewBox {
+  readonly minX: number;
+  readonly minY: number;
+  readonly width: number;
+  readonly height: number;
+}
+interface SvgColor {
+  readonly mode: "none" | "tint" | "replace";
+  readonly tint?: string;
+  readonly opacity?: number;
+}
+interface PrepareSvgOptions {
+  /** The box the root is drawn into, in pixels. */
+  readonly box: {
+    readonly width: number;
+    readonly height: number;
+  };
+  readonly viewBox?: SvgViewBox | undefined;
+  readonly preserveAspectRatio?: string | undefined;
+  readonly color?: SvgColor | undefined;
+  /** Values for `$name` and `var(--cc-name)` in attributes and styles. */
+  readonly tokens?: Readonly<Record<string, string>> | undefined;
+  /** Prefixed to every id, so two inline SVGs on one page cannot collide. */
+  readonly idPrefix?: string | undefined;
+  /** How much of the strokes are drawn (0..1); fills fade in over the last 40%. Omit for all of it. */
+  readonly draw?: number | null | undefined;
+  /** Room, in pixels, kept on every side of the box for strokes and shadows that reach past it. */
+  readonly bleed?: number | undefined;
+  /** Seconds into the element, for SMIL animation (see `svgAnimated`); 0 when omitted. */
+  readonly time?: number | undefined;
+}
+interface PreparedSvg {
+  readonly markup: string;
+  /** Whether the markup changes over time (SMIL), so a cached picture is not enough. */
+  readonly animated: boolean;
+  readonly warnings: readonly string[];
+}
+interface Parsed {
+  readonly root: SvgNode | null;
+  readonly warnings: readonly string[];
+}
+/** Parses SVG markup into a small tree; the result is cached by the markup string. */
+export declare function parseSvg(markup: string): Parsed;
+/** Whether markup animates (SMIL or CSS animations): such markup is prepared for each moment, the rest once. */
+export declare function svgAnimated(markup: string): boolean;
+/** The size an SVG asks for: its width and height, else its viewBox, else the HTML default of 300 by 150. */
+export declare function svgIntrinsicSize(markup: string, viewBox?: SvgViewBox): {
+  width: number;
+  height: number;
+};
+/** The markup to draw for an SVG element in a box of `options.box` pixels. Results are cached by markup and options. */
+export declare function prepareSvg(markup: string, options: PrepareSvgOptions): PreparedSvg;
+/** A CSS colour as 0..1 channels; named colours other than black and white count as white. */
+export declare function rgb(color: string): [number, number, number];
+export declare function serialize(node: SvgNode | string): string;
+interface ShapeMarkup {
+  readonly markup: string;
+  readonly size: {
+    readonly width: number;
+    readonly height: number;
+  };
+  /** Pixels the stroke and shadows reach past the box on any side. */
+  readonly bleed: number;
+  readonly warnings: readonly string[];
+}
+/** The size a shape draws at, before layout. */
+export declare function shapeSize(p: ElementProps): {
+  width: number;
+  height: number;
+};
+export declare function shapeMarkup(props: Readonly<Record<string, unknown>>, size: {
+  width: number;
+  height: number;
+}): ShapeMarkup;
+interface ShapeDrawing {
+  readonly layout: OverlayLayout;
+  readonly prepared: PreparedSvg;
+  readonly bleed: number;
+}
+/** How a `<Shape>` element draws at its time: its layout, and the markup with entrance drawing applied. */
+export declare function shapeDrawing(p: ElementProps, tokens?: Readonly<Record<string, string>>): ShapeDrawing;
+interface SvgDrawing {
+  /** The size the SVG asks for, before `fit`. */
+  readonly size: {
+    readonly width: number;
+    readonly height: number;
+  };
+  readonly fit: FitMode;
+  readonly layout: OverlayLayout;
+  readonly prepared: PreparedSvg;
+}
+/**
+ * How an `<Svg>` element draws its markup: at the size the SVG asks for (or fitted to the
+ * composition with `fit`), with its `viewBox`, `preserveAspectRatio` and `color` applied, and
+ * `$name` / `var(--cc-name)` filled from `tokens` (by default the composition's theme).
+ */
+export declare function svgDrawing(p: ElementProps, markup: string, tokens?: Readonly<Record<string, string>>): SvgDrawing;
+/** A theme's tokens as SVG attribute values. */
+export declare function themeTokens(theme: ResolvedTheme | undefined): Readonly<Record<string, string>>;
+/** Whether a tree has SMIL animations in it. */
+export declare function hasSmil(node: SvgNode): boolean;
+/** The tree with every animation applied at `time` seconds and removed. Returns a copy; the input is not changed. */
+export declare function freezeSmil(root: SvgNode, time: number, warnings: string[]): SvgNode;
+/** Two values `k` of the way from `a` to `b`: numbers in the same places interpolate, colours mix, anything else switches halfway. */
+export declare function interpolate(a: string, b: string, k: number): string;
+/** A SMIL clock value in seconds: `2s`, `500ms`, `1.5`, `1min`, `0.1h`, `01:02.5`, `00:01:02`. */
+export declare function clock(v: string): number | null;
+interface GraphicDrawing {
+  readonly layout: OverlayLayout;
+  /** The art, sized to the layout's box. */
+  readonly prepared: PreparedSvg;
+  /** Text above the art, in the box's pixels. */
+  readonly labels: readonly Label[];
+}
+/**
+ * How a `<Graphic>` draws at the element's time: the kind's art through the
+ * same SVG preparation as `<Svg>` (so `draw` and the theme apply), and its
+ * labels, which both surfaces lay out as text the way they lay out titles.
+ */
+export declare function graphicDrawing(p: ElementProps): GraphicDrawing;
+/** A sticker whose `src` is `icon:name`, drawn as the icon graphic in the sticker's square. Null for other stickers. */
+export declare function iconStickerDrawing(p: ElementProps, side: number): GraphicDrawing | null;
+/** A graphic's labels as positioned text, a tree both the DOM and Satori lay out. */
+export declare function graphicLabels(labels: readonly Label[]): ReactNode;
+export { type ClipRect, type ElementProps, type GraphicAnimation, type GraphicDrawing, type Motion, OVERLAY_KINDS, type OverlayLayout, type PrepareSvgOptions, type PreparedSvg, type ShapeDrawing, type ShapeMarkup, type SvgColor, type SvgDrawing, type SvgNode, type SvgViewBox, indexLayerInteriors, layerClock, motionAt };

package/dist/overlays.mjs

@@ -0,0 +1,3 @@
+import { P as layerClock, i as OVERLAY_KINDS, u as motionAt } from "./frame-plan-BNwblf1s.mjs";
+import { A as indexLayerInteriors, C as titleBox, O as overlayLayout, S as stickerSize, T as clipPathCss, _ as hasSmil, a as iconStickerDrawing, b as layerContent, c as shapeSize, d as rgb, f as serialize, g as freezeSmil, h as clock, i as graphicLabels, l as parseSvg, m as svgIntrinsicSize, n as themeTokens, o as shapeDrawing, p as svgAnimated, r as graphicDrawing, s as shapeMarkup, t as svgDrawing, u as prepareSvg, v as interpolate, w as titleContent, x as stickerPlaceholder, y as captionsContent } from "./svg-element-BUXbz-U5.mjs";
+export { OVERLAY_KINDS, captionsContent, clipPathCss, clock, freezeSmil, graphicDrawing, graphicLabels, hasSmil, iconStickerDrawing, indexLayerInteriors, interpolate, layerClock, layerContent, motionAt, overlayLayout, parseSvg, prepareSvg, rgb, serialize, shapeDrawing, shapeMarkup, shapeSize, stickerPlaceholder, stickerSize, svgAnimated, svgDrawing, svgIntrinsicSize, themeTokens, titleBox, titleContent };