procedural-paper 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Maks Surguy
+
+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,206 @@
-# Temporary Holding Version
+# procedural-paper API
 
-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.
+MIT © 2026 Maks Surguy. [Source](https://github.com/msurguy/procedural-paper) · [Demo](https://msurguy.github.io/procedural-paper/)
+
+Seamless procedural paper textures and 25 paper UI components, generated from
+code without source images.
+
+```sh
+npm install procedural-paper
+```
+
+## Entry points
+
+| Import | Purpose |
+| --- | --- |
+| `procedural-paper` | Dependency-free texture/sheet rendering, stock recipes, card presets |
+| `procedural-paper/dom` | `createPaperSheet`, `createPaperCard`, shared `renderPaperLayers` compositor |
+| `procedural-paper/react` | `PaperSheet`, `PaperCard`; requires React 18.2+ or 19 |
+| `procedural-paper/styles.css` | Required, namespaced component styling |
+
+Build output is ESM with TypeScript declarations. CPU texture generation works in
+Node without a DOM. DOM helpers must be called in the browser. React components
+are SSR-safe and hydrate a plain paper container before rendering textures.
+
+## Textures
+
+```ts
+import { generatePaper, encodePNG } from 'procedural-paper';
+const paper = await generatePaper({
+  preset: 'watercolor-cold-press', width: 1024, height: 768, seed: 7,
+  outputs: ['color', 'albedo', 'overlay', 'height', 'normal'],
+  params: { color: { base: '#f4efe4' } },
+  backend: 'auto', // or 'webgl2' / 'cpu'
+});
+const png = await encodePNG(paper.maps.color!);
+```
+
+`presets`, `paramSchema`, `buildParams`, `mergeParams`, `getParam` and `setParam`
+provide discovery and editing. `toBlob` and `toCanvas` provide browser outputs.
+Reuse `PaperRenderer` for repeated work and call `dispose()` when finished.
+`preview()` and `renderSheet()` require WebGL2; CPU rendering covers repeating maps.
+
+## Vanilla components
+
+```ts
+import { createPaperCard, createPaperSheet } from 'procedural-paper/dom';
+import 'procedural-paper/styles.css';
+const card = createPaperCard({ preset: 'polaroid', seed: 4 });
+const photo = document.createElement('img');
+photo.src = '/my-photo.jpg'; photo.alt = 'A mountain lake';
+card.slots.photo.append(photo);
+card.slots.content.textContent = 'Summer';
+document.body.append(card.element);
+card.update({ seed: 5 }); // preserves content nodes and listeners
+// card.dispose(); // removes element and releases its owned renderer
+
+const sheet = createPaperSheet({ width: 240, height: 320, preset: 'kraft',
+  sheet: { shape: { edges: { left: 'torn' } } } });
+```
+
+Card options: `preset`, optional `width`, `height`, `seed`, paper `params`, sheet
+`sheet` overrides, and optional borrowed `renderer`. Sheet options require
+`width` and `height`; their `preset` is a texture preset instead of a card ID.
+Dimensions are explicit CSS pixels, not automatically measured from children.
+Pixel ratio defaults to device pixel ratio capped at 2; override with `sheet.pixelRatio`.
+Card geometry and content regions scale with width/height. Hole radii and edge
+texture detail remain in CSS pixels. `params` merges into the stock recipe;
+`sheet` replaces top-level preset sheet groups. `update` shallow-merges options;
+pass `undefined` to clear an optional override. `sheet.seed` overrides the outline seed.
+
+`slots` contains live DOM containers for all regions. Unused regions are empty;
+when switching preset, former slots are hidden and retained for reuse. Caller
+content is never interpreted as HTML strings. Text remains selectable and controls
+remain interactive; canvases and shading do not intercept pointer events.
+Consumers own their content's event handlers and any object URLs they create.
+A borrowed renderer is never disposed by a component.
+
+If the GPU is unavailable, components retain readable content on a solid paper
+background. Rendering failures emit `papererror` on the vanilla element. Invalid
+preset IDs or non-positive/non-finite dimensions throw before rendering.
+
+## React
+
+```tsx
+import { PaperCard, PaperSheet } from 'procedural-paper/react';
+import 'procedural-paper/styles.css';
+export function Example() {
+  return <PaperCard preset="polaroid" seed={4}
+    slots={{ photo: <img src="/my-photo.jpg" alt="A mountain lake" /> }}>
+    Summer
+  </PaperCard>;
+}
+```
+
+Props mirror vanilla options plus `children`, `slots`, `className`, `style`, and
+`aria-label`. `children` fills `content`; `slots` supplies named React regions.
+React owns the children throughout updates. Memoize parameter/sheet objects and
+borrow a renderer when rendering many components. Effects clean up on unmount
+and support Strict Mode. The wrapper is marked as a client entry point for React
+server-component frameworks; CSS should be imported at the application's entry.
+
+## Card presets
+
+`cardPresetIds` and `cardPresets` enumerate all 25 styles. `getCardPreset(id)`
+returns an independent copy. `resolveCard(options)` returns paper parameters,
+sheet settings and named content regions without accessing the DOM.
+
+| IDs | Regions in addition to `content` |
+| --- | --- |
+| sticky, notebook, napkin, scrap, graph, biz, quote, tag, receipt | none |
+| index | title |
+| ticket | stub |
+| memo | signature |
+| watercolor, clipping, stamp, tracing, tapelabel, print | none |
+| polaroid, photonote, vintage, tear | photo |
+| album | photo1, photo2, caption2 |
+| booth | photo1, photo2, photo3, photo4 |
+| film | photo1, photo2, photo3 |
+
+`paperStocks` and `stockParams(key)` expose the desk's paper recipes. Presets
+include outlines, relief, photo regions and ruled/grid decorations. Supply your
+own content and images. The library doesn't bundle photos, fonts, sample prose,
+photo grading, text fitting, attachments, physics, or handwriting animations.
+
+## Low-level sheets
+
+```ts
+import { PaperRenderer, buildParams } from 'procedural-paper';
+const renderer = new PaperRenderer();
+const result = renderer.renderSheet(buildParams('kraft'), {
+  width: 240, height: 320, pixelRatio: 2,
+  shape: { edges: { left: 'torn' } },
+}, ['base', 'shade', 'shadow']);
+renderer.dispose();
+```
+
+Place live content between base and shade; shade uses `mix-blend-mode: hard-light`.
+`renderPaperLayers(renderer, params, sheet)` performs the browser canvas conversion
+and returns canvases plus mask CSS. Its output includes the transparent margin;
+the helper creates no object URLs. This is also how the desk integrates its own
+interaction layers with the library.
+
+## Export an exact desk component
+
+Select a rendered card in the **Desk** tab, then choose **Export React** or
+**Export Vanilla**. The dialog previews that card independently, including its
+paper, editable text, photographs, tape, pins, cords, shadows and content motion.
+Choose a file to copy, or download the ZIP to get the complete example.
+
+The ZIP contains both framework examples, `composition.json`, a static asset
+resolver, selected local photographs and fonts, optional pen data, credits and
+licenses, and a small Vite application. Run `npm install` then `npm run dev` in
+that folder. Assets work without Google
+Fonts or other external services; installing dependencies still requires an
+available package source.
+
+```ts
+import { createPaperComposition } from 'procedural-paper/composition';
+import 'procedural-paper/composition.css';
+import { resolveAsset } from './assets';
+import data from './composition.json';
+import type { PaperComposition } from 'procedural-paper/composition';
+
+const paper = createPaperComposition({
+  composition: data as unknown as PaperComposition,
+  resolveAsset,
+  fit: 'contain',
+});
+document.querySelector('#app')!.append(paper.element);
+await paper.ready;
+// paper.play(), paper.pause(), paper.replay(), paper.seek(0.5)
+// paper.dispose() when removing the component.
+```
+
+React uses `PaperComposition` from `procedural-paper/composition/react`, with the
+same options and an optional ref exposing playback controls. It cleans up on
+unmount and reports asynchronous failures through `onError`. `onReady` signals
+completion. The vanilla handle supports `update(options)` and `ready`.
+
+Composition entry points are optional and do not add their renderers or motion
+libraries to the base texture API. Install `@chenglou/pretext@0.0.9` for composition
+text fitting, `brushmark@0.1.2`, and `tegaki@1.1.0` when bundling the composition
+entry. Motion and pen engines load lazily at runtime; bundlers still need these
+peers available to resolve their chunks. React itself remains an optional peer dependency.
+
+The version 1 composition model records local dimensions, material parameters,
+lighting, texture scale, rotation, stable content node IDs, fitting inputs,
+attachment geometry, photo grading, asset metadata and resolved motion steps.
+The desk and exported components share the same rendering algorithms. Texture
+images are generated; desk background scans are never part of a component export.
+The runtime renders at fixed dimensions and can scale the entire result to its
+container with `fit: 'contain'`.
+
+Use `setCompositionText(composition, nodeId, newText)` to create an edited copy.
+Fitted text is measured again and animation references within the changed block
+are moved to that block. For richer changes, edit the node tree directly and keep
+its animation references valid. To change photos, update their asset records,
+resolver URLs and photo specifications. Exported JSON is configuration for your
+own application; it is not a general HTML import format.
+
+The asset resolver must return a URL for every declared asset. Missing assets
+reject `ready` instead of silently substituting photos. WebGL2 is required for
+full visual fidelity; the runtime marks a readable material/content fallback with
+`data-rendered="fallback"` and `rendered === false`. Reduced-motion preferences
+finish content immediately. Dragging, peeling, selection highlights and the desk
+background belong to the demo and are excluded from component exports.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,51 @@
+# Third-party notices
+
+Original project code is MIT © 2026 Maks Surguy. Third-party materials retain
+their own licenses; the MIT license does not replace those terms.
+
+## Paper Shaders
+
+The paper overlay algorithms acknowledge the paper-texture shader in
+[Paper Shaders](https://github.com/paper-design/shaders), by Paper Design,
+licensed under Apache-2.0. This project's implementation reworks the overlays
+for periodic tiling and matching CPU/GPU rendering. Attribution appears in
+`src/params.ts` and `src/cpu/overlays.ts` in the library source. The upstream
+license is included in `licenses/Apache-2.0.txt` in both repository and package.
+
+## Demo-only materials (not included in the npm library)
+
+- Desk scan derivatives: Poly Haven CC0. Full author, source and modification
+  records: `apps/demo/public/textures/README.md`.
+- Sample photo derivatives: StockSnap CC0, found through Openverse. Full author
+  and source records: `apps/demo/public/photos/README.md`.
+- Hershey stroke font data: acknowledgements and redistribution conditions in
+  each `apps/demo/src/desk/pen-fonts/hershey-*/LICENSE.txt`.
+- EMS fonts: Sheldon B. Michaels; SVG conversion by Windell H. Oskay. Derived
+  from Allura (Rob Leuschke), Covered By Your Grace (Kimberly Geswein), and
+  Source Sans (Paul D. Hunt / Adobe). Attribution and full OFL text accompany
+  each font under `apps/demo/src/desk/pen-fonts/ems-*`. Tegaki generates pen
+  outlines and the generation script merges overlapping strokes.
+- Self-hosted Google Fonts retain their upstream licenses. The npm library
+  does not bundle font binaries; composition consumers supply their own asset URLs.
+- Brushmark, Tegaki and Pretext are demo dependencies and optional library
+  composition peers. The texture core has no runtime dependencies.
+  Their upstream licenses remain with their distributions. A demo build copies
+  available package license files and bundled font notices into `licenses/`.
+
+Only the documented CC0 derivatives belong in the demo's image directories.
+Private scans, reference photographs, and original source collections must not
+be committed. The release check enforces the current image allowlist.
+
+## Desk example exports
+
+The demo self-hosts its Google Fonts faces in `apps/demo/public/fonts`, with
+per-family license files. `apps/demo/src/desk/font-assets.json` records their
+upstream URLs and SHA-256 hashes. `apps/demo/scripts/vendor-fonts.mjs` refreshes
+this manifest deliberately; it is not part of normal builds. Component ZIPs copy
+only the selected assets and their license/credit files. The npm library does
+not bundle these font binaries or demo photos.
+
+Optional composition peers: @chenglou/pretext (text layout), brushmark (content
+motion), and tegaki (pen strokes). Existing pen font license files accompany
+exports containing those fonts. Generated example code is MIT; the included
+media and font licenses retain their own terms.

package/dist/cards.d.ts

@@ -0,0 +1,42 @@
+import { type DeepPartial, type PaperParams } from './params';
+import type { SheetSpec } from './sheet';
+export declare const cardPresetIds: readonly ["sticky", "index", "notebook", "napkin", "scrap", "graph", "biz", "quote", "tag", "receipt", "ticket", "memo", "watercolor", "clipping", "stamp", "tracing", "tapelabel", "polaroid", "photonote", "print", "vintage", "tear", "album", "booth", "film"];
+export type CardPresetId = typeof cardPresetIds[number];
+/** Region coordinates are CSS pixels, relative to the sheet's top-left corner. */
+export interface CardRegion {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface CardPreset {
+    id: CardPresetId;
+    label: string;
+    stock: string;
+    width: number;
+    height: number;
+    sheet: Omit<SheetSpec, 'width' | 'height' | 'pixelRatio'>;
+    regions: Record<string, CardRegion>;
+    ruling?: 'index' | 'notebook' | 'grid';
+}
+/** Canonical paper styles from Paper Desk, without demo content or attachments. */
+export declare const cardPresets: readonly CardPreset[];
+export interface CardOptions {
+    preset: CardPresetId;
+    width?: number;
+    height?: number;
+    seed?: number;
+    params?: DeepPartial<PaperParams>;
+    /** Top-level sheet groups replace their preset counterparts. */
+    sheet?: Omit<SheetSpec, 'width' | 'height'>;
+}
+export declare function getCardPreset(id: CardPresetId): CardPreset;
+/** Scale the preset's geometry and regions to explicit CSS dimensions. */
+export declare function resolveCard(options: CardOptions): {
+    preset: CardPreset;
+    regions: {
+        [k: string]: CardRegion;
+    };
+    params: PaperParams;
+    sheet: SheetSpec;
+};

package/dist/color.d.ts

@@ -0,0 +1,5 @@
+export type RGB = [number, number, number];
+/** Parse `#rgb`, `#rrggbb` (or `rgb(r,g,b)`) into 0..1 sRGB components. */
+export declare function parseColor(input: string): RGB;
+export declare function toHex([r, g, b]: RGB): string;
+export declare function luminance([r, g, b]: RGB): number;

package/dist/composition/assets.d.ts

@@ -0,0 +1,7 @@
+import type { AssetResolver, CompositionAsset } from './model';
+import type { PenContext } from './pen';
+export declare function loadCompositionAssets(assets: CompositionAsset[], resolve: AssetResolver, pen: boolean): Promise<{
+    urls: Map<string, string>;
+    penContext: PenContext | undefined;
+    dispose: () => void;
+}>;

package/dist/composition/cords.d.ts

@@ -0,0 +1,43 @@
+import type { Rng } from './rng';
+import type { Sprite } from './props';
+export type CordKind = 'jute' | 'hemp' | 'baker' | 'cotton' | 'satin' | 'grosgrain' | 'wire';
+type P3 = [number, number, number];
+export interface Polyline {
+    pts: P3[];
+    /** Per point: true if that point lies under the sheet. */
+    under: boolean[];
+    /** Free ends fray (twine) or get a cut (ribbon). */
+    freeStart: boolean;
+    freeEnd: boolean;
+}
+export interface CordSpec {
+    kind: CordKind;
+    width: number;
+    colors: [string, string];
+    lines: Polyline[];
+    /** Knots: x, y, radius (lying on top). */
+    knots: [number, number, number][];
+    seed: number;
+}
+export declare function createCordRenderer(): {
+    renderCord: (spec: CordSpec, part: "front" | "back", dpr: number, azimuth: number, elevation: number) => Sprite | null;
+    dispose(): void;
+};
+export declare const renderCord: ReturnType<typeof createCordRenderer>['renderCord'];
+export declare const CORD_STYLES: {
+    kind: CordKind;
+    colors: [string, string];
+    width: number;
+    weight: number;
+    label: string;
+}[];
+/**
+ * A cord tied through a tag's hole at (cx, cy), radius hr, tag top edge at y = 0.
+ * Twine and wire: lark's head (two strands over the edge, bight behind the hole,
+ * doubled tails). Ribbon: threaded once, knotted just past the edge, two V-cut tails.
+ */
+export declare function tagCord(rng: Rng, cx: number, cy: number, hr: number, tagW: number): {
+    spec: CordSpec;
+    label: string;
+};
+export {};

package/dist/composition/filters.d.ts

@@ -0,0 +1 @@
+export declare const filterMarkup = "    <svg width=\"0\" height=\"0\" style=\"position: absolute\" aria-hidden=\"true\">\n      <filter id=\"f-ink\" x=\"-5%\" y=\"-5%\" width=\"110%\" height=\"110%\">\n        <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"2\" seed=\"4\" result=\"n\" />\n        <feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"1.4\" xChannelSelector=\"R\" yChannelSelector=\"G\" />\n      </filter>\n      <filter id=\"f-pencil\" x=\"-5%\" y=\"-5%\" width=\"110%\" height=\"110%\">\n        <feTurbulence type=\"fractalNoise\" baseFrequency=\"1.3\" numOctaves=\"2\" seed=\"9\" result=\"n\" />\n        <feColorMatrix in=\"n\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.4 0 0 0 -0.55\" result=\"m\" />\n        <feComposite in=\"SourceGraphic\" in2=\"m\" operator=\"in\" result=\"g\" />\n        <feDisplacementMap in=\"g\" in2=\"n\" scale=\"1\" xChannelSelector=\"G\" yChannelSelector=\"B\" />\n      </filter>\n      <filter id=\"f-stamp\" x=\"-5%\" y=\"-10%\" width=\"110%\" height=\"120%\">\n        <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.55\" numOctaves=\"3\" seed=\"2\" result=\"n\" />\n        <feColorMatrix in=\"n\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  3.2 0 0 0 -0.75\" result=\"m\" />\n        <feComposite in=\"SourceGraphic\" in2=\"m\" operator=\"in\" result=\"g\" />\n        <feDisplacementMap in=\"g\" in2=\"n\" scale=\"1.6\" xChannelSelector=\"R\" yChannelSelector=\"G\" />\n      </filter>\n      <filter id=\"f-wash\" x=\"-10%\" y=\"-10%\" width=\"120%\" height=\"120%\">\n        <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.035\" numOctaves=\"3\" seed=\"7\" result=\"n\" />\n        <feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"16\" xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"d\" />\n        <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"2\" seed=\"5\" result=\"g\" />\n        <feColorMatrix in=\"g\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1.2 0 0 0 0.25\" result=\"ga\" />\n        <feComposite in=\"d\" in2=\"ga\" operator=\"in\" />\n      </filter>\n      <filter id=\"f-stain\" x=\"-10%\" y=\"-10%\" width=\"120%\" height=\"120%\">\n        <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.06\" numOctaves=\"3\" seed=\"11\" result=\"n\" />\n        <feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"7\" xChannelSelector=\"R\" yChannelSelector=\"G\" />\n      </filter>\n    </svg>";

package/dist/composition/fit.d.ts

@@ -0,0 +1,58 @@
+export interface Font {
+    family: string;
+    size: number;
+    kind: 'hand' | 'mono';
+    marker?: boolean;
+    weight?: string;
+}
+export interface FitBlock {
+    /** Plain text used for measuring (and rendering, unless `html` is given). */
+    text: string;
+    /** Rendered markup when it differs from `text` (e.g. typewriter spans). */
+    html?: string;
+    /** Size relative to the block's base size (em). */
+    scale?: number;
+    /** Extra space above the block (em of its own size). */
+    gap?: number;
+    /** Letter-spacing in em. */
+    spacing?: number;
+    cls?: string;
+    /** Font weight for this block (defaults to the spec's). */
+    weight?: string;
+    /** Only the first block is kept... unless this is set (titles, signatures stay). */
+    keep?: boolean;
+}
+export interface FitSpec {
+    font: Font;
+    weight?: string;
+    /** Box in px. */
+    width: number;
+    height: number;
+    /** Largest / smallest font size in px (final, after the font's own size factor). */
+    max: number;
+    min: number;
+    /** Line height as a multiple of the font size... */
+    lineHeight?: number;
+    /** ...or a fixed pitch in px (ruled paper). */
+    pitch?: number;
+    whiteSpace?: 'normal' | 'pre-wrap';
+    /** Drop trailing blocks when even `min` doesn't fit (default true). */
+    drop?: boolean;
+    /** Never wrap past this many lines (labels, one-liners). */
+    maxLines?: number;
+    /** Vertical writing mode: width/height describe the inline/block axes. */
+    vertical?: boolean;
+    blocks: FitBlock[];
+}
+export interface FitResult {
+    size: number;
+    kept: number;
+    lines: number;
+}
+export declare function fitText(spec: FitSpec): Promise<FitResult>;
+export declare const fitSpecs: WeakMap<HTMLElement, FitSpec>;
+export declare function blocksHTML(blocks: FitBlock[]): string;
+/** Register `el` to be fitted before its card is shown; renders at max size for now. */
+export declare function fitLater(el: HTMLElement, spec: FitSpec): void;
+/** Fit every registered text block inside `root`. */
+export declare function runFits(root: HTMLElement): Promise<void>;

package/dist/composition/index.d.ts

@@ -0,0 +1,27 @@
+import { PaperRenderer } from '../index';
+import { type AssetResolver, type PaperComposition } from './model';
+import type { CardPlan } from './scene';
+export * from './model';
+export type { CompositionNode } from './model';
+export interface CompositionOptions {
+    composition: PaperComposition;
+    resolveAsset: AssetResolver;
+    autoplay?: boolean;
+    fit?: 'natural' | 'contain';
+    renderer?: PaperRenderer;
+}
+export interface CompositionHandle {
+    element: HTMLDivElement;
+    readonly ready: Promise<void>;
+    readonly rendered: boolean;
+    update(options: Partial<CompositionOptions>): Promise<void>;
+    play(): void;
+    pause(): void;
+    replay(): void;
+    seek(progress: number): void;
+    dispose(): void;
+}
+export declare function hydrateComposition(composition: PaperComposition, scope: string): CardPlan;
+/** Use the same SVG filter definitions, with instance-local IDs. */
+export declare function mountCompositionFilters(host: HTMLElement, scope: string): void;
+export declare function createPaperComposition(initial: CompositionOptions): CompositionHandle;