@strangecyan/vignette-core

Target-neutral contracts and compiler for Vignette. This package defines the authoring graph, branded IDs, source modules, Yoga layout, immutable compiled snapshots, assets, diagnostics, and runtime message protocol. It does not import React or a target implementation.

Install

pnpm add @strangecyan/vignette-core

Compile without React

import {
  compileBroadcast,
  projectId,
  sceneId,
  sourceId,
  layerId,
} from "@strangecyan/vignette-core";
import { broadcast, colorSource, layer, scene, sources } from "@strangecyan/vignette-core/builders";
import { yogaLayoutEngine } from "@strangecyan/vignette-core/layout-yoga";

const result = compileBroadcast(
  broadcast({
    projectId: projectId("demo"),
    canvas: { width: 1920, height: 1080, frameRate: 60 },
    children: [
      sources(colorSource({ id: sourceId("background"), color: "#101820" })),
      scene({
        id: sceneId("main"),
        children: [layer({ id: layerId("background"), sourceId: sourceId("background") })],
      }),
    ],
  }),
  { revision: 1, layoutEngine: yogaLayoutEngine },
);

compileBroadcast accepts any synchronous LayoutEngine. The ./layout-yoga entrypoint exports the default binding plus createYogaLayoutEngine(yoga) for a Yoga instance initialized by the host. Runtime-only consumers can import ./runtime and ./sse without loading the layout compiler.

Use asset() and an AssetManifest for resources that targets must resolve. Use RuntimeMessageHub, consumeRuntimeMessages, and the SSE codecs to connect a composer to one or more independent targets. Extension packages define their own source type and contribute a generic SourceModule; pass those modules to the compiler or composer rather than using an open settings bag.

The ./builders entrypoint is optional. React projects normally author the same graph with @strangecyan/vignette.