@fusion.dev/helix-theme 0.0.0-dev

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fusion Development Group
+
+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.d.ts

@@ -0,0 +1,47 @@
+import type { DerivedTheme, Oklch, ThemeIntent } from './types.js';
+export type { Color, DerivedTheme, DerivedToken, Oklch, Pairing, PairingRequest, Relation, Seed, StatusSeed, ThemeIntent, } from './types.js';
+/** A loaded engine. */
+export interface ThemeEngine {
+    /**
+     * Derives a theme, and renders it under each selector asked for.
+     *
+     * @throws when the engine refuses the intent, which it does for anything that
+     * would produce a palette reporting itself clean without having been measured:
+     * an unreadable brand, accent or pinned status, a non-finite number, or one
+     * outside the range it is meaningful in.
+     */
+    derive(intent: ThemeIntent, selectors?: readonly string[]): DerivedTheme;
+    /**
+     * Reads a hex color into its OKLCH components.
+     *
+     * @throws when the string is not a hex color. **The TypeScript engine
+     * returned a `NaN` triple**, which every comparison is false against, so a
+     * color that could not be read traveled onward looking like one.
+     */
+    hexToOklch(hex: string): Oklch;
+}
+/**
+ * Where the module is fetched from.
+ *
+ * **Required, because every default was wrong for somebody.** The obvious one,
+ * `new URL('fusion_helix_theme_bg.wasm', import.meta.url)`, is what the generated
+ * loader does and it works for neither caller here: Turbopack reads it as a
+ * module specifier and fails the build with "Can't resolve
+ * 'fusion_helix_theme_bg.wasm'", and Node's `fetch` refuses a `file:` URL outright.
+ * Reading the file here instead would put a `node:fs` import into a package
+ * whose purpose is to run in a browser.
+ *
+ * So the one thing a WebAssembly consumer genuinely has to decide, how the
+ * module gets delivered, is asked rather than guessed. A browser passes the URL
+ * it serves it from; Node passes the bytes.
+ */
+export type Source = BufferSource | Response | URL | string;
+/**
+ * Loads the engine, once.
+ *
+ * **The promise is cached rather than the result**, so two callers racing at
+ * startup get one instantiation and both wait on it. Caching the resolved value
+ * instead would let the second call start a second download before the first
+ * finished.
+ */
+export declare function initTheme(source: Source): Promise<ThemeEngine>;

package/dist/index.js

@@ -0,0 +1,42 @@
+/**
+ * The theme engine, reached from JavaScript.
+ *
+ * **One implementation, two distributions.** The derivation is Rust: it is a
+ * search, and `fitToGamut` is a twenty-step bisection while
+ * `lightnessForContrast` searches too, so iteration count, bisection order and
+ * float arithmetic are implementation choices. Two implementations of that
+ * disagree by construction rather than by accident, which is why this package
+ * stopped being an engine and became a way to reach one.
+ *
+ * **It has to be awaited, and there is no way around that.** WebAssembly
+ * instantiates asynchronously, so a module-level `deriveTheme` would either
+ * block or throw for anybody who called it before the module landed. Handing the
+ * engine back from `initTheme` makes the fact unavoidable rather than a runtime
+ * error somebody meets in production: you cannot hold a `ThemeEngine` without
+ * having waited for one.
+ *
+ * ```ts
+ * const engine = await initTheme('/helix/theme.wasm')
+ * const theme = engine.derive({ brand: '#3b82f6' }, [':root'])
+ * document.head.append(Object.assign(document.createElement('style'), {
+ *   textContent: theme.css[':root'],
+ * }))
+ * ```
+ */
+import initWasm, { derive, hexToOklch as readHex } from '../wasm/fusion_helix_theme.js';
+let loading;
+/**
+ * Loads the engine, once.
+ *
+ * **The promise is cached rather than the result**, so two callers racing at
+ * startup get one instantiation and both wait on it. Caching the resolved value
+ * instead would let the second call start a second download before the first
+ * finished.
+ */
+export function initTheme(source) {
+    loading ??= initWasm({ module_or_path: source }).then(() => ({
+        derive: (intent, selectors = []) => JSON.parse(derive(JSON.stringify(intent), JSON.stringify(selectors))),
+        hexToOklch: (hex) => JSON.parse(readHex(hex)),
+    }));
+    return loading;
+}

package/dist/types.d.ts

@@ -0,0 +1,425 @@
+/**
+ * The shapes a consumer writes and the shapes they get back.
+ *
+ * **Declarations only, and that is what is left of the TypeScript engine.** The
+ * derivation is Rust now, reached through WebAssembly, so what a JavaScript
+ * consumer needs from this package is the vocabulary rather than the solver. A
+ * type is erased at build time, so nothing here is a second implementation of
+ * anything: it cannot drift into disagreeing with the engine about an *answer*,
+ * only about a *field name*, which is what `check:wasm` compares.
+ *
+ * The prose is kept whole from the files it came from. It is the argument for
+ * why each field exists, and it was never about how any of them was computed.
+ */
+/** A color in OKLCH. Lightness 0 to 1, chroma from 0, hue in degrees. */
+export interface Oklch {
+    chroma: number;
+    hue: number;
+    lightness: number;
+}
+/** A color a consumer supplies. Hex is accepted and converted at the edge. */
+export type Color = Oklch | string;
+/**
+ * How a role departs from the role it derives from.
+ *
+ * Written as a relationship rather than a second color because a literal
+ * drifts out of relation the moment anybody rethemes, which is the failure of
+ * every palette with two hardcoded colours in it.
+ */
+export interface Relation {
+    /**
+     * How far, in degrees, the angle may move to clear a role it cannot be told
+     * apart from. 45 by default.
+     *
+     * **The accent is the role that yields, and that is the whole point of the
+     * field.** A status hue carries meaning and a brand is a fact the consumer
+     * supplied; an accent is a relationship with no meaning attached, so when two
+     * of them collide the accent is the one with nothing to lose. Measured on the
+     * shipped blue: the complement lands at 80 degrees, `warning` is amber at 75,
+     * and no rotation of `warning` inside any sane allowance clears it, because
+     * `danger` and `success` box in every hue it could reach.
+     *
+     * Set it to 0 to hold the angle exactly and let `collisions` report the
+     * result. A pinned accent never moves at all, a color being a fact.
+     */
+    allowance?: number;
+    /**
+     * Multiplier on the source's chroma. 1 keeps it, below 1 quiets it. An
+     * accent louder than the thing it accents is a second primary, so this is
+     * capped at 1 rather than trusted.
+     */
+    chroma?: number;
+    /**
+     * The role this one departs from. Only `brand` today, and the field exists
+     * so a third role can relate to the second without a new mechanism.
+     */
+    from: 'brand';
+    /**
+     * Degrees around the hue circle. 180 is the complement and is what a second
+     * color usually means, 30 is analogous, 120 is a triad.
+     */
+    rotate: number;
+}
+/** A role takes a color, or says how it relates to one. */
+export type Seed = Color | Relation;
+/**
+ * A status role. A color pins it outright; an object nudges its hue within
+ * the meaning it already carries.
+ *
+ * **Never a `Relation`**, which is the asymmetry with `accent` and is
+ * deliberate: a `danger` that rotates with the brand is a warning a reader has
+ * to re-learn per product.
+ */
+export type StatusSeed = Color | {
+    hue?: number;
+};
+/** One pair to measure, by token name, without the namespace prefix. */
+export interface PairingRequest {
+    background: string;
+    foreground: string;
+    /**
+     * The ratio this pair has to reach. Carried per pair rather than taken from
+     * the theme, because a focus ring answers to WCAG 1.4.11 at 3:1 while body
+     * text answers to `contrastTarget`, and one number cannot be both.
+     */
+    target: number;
+}
+export interface ThemeIntent {
+    /**
+     * The second emphasis. A color pins it and the relationship stands aside.
+     * Defaults to the complement, `{ from: 'brand', rotate: 180 }`.
+     */
+    accent?: Seed;
+    /**
+     * The one color most consumers care about, and the only required input.
+     */
+    brand: Color;
+    /**
+     * How saturated the palette is, independent of which hue it is.
+     *
+     * **This is the axis a brand's feel lives on.** Monotone, muted, restrained
+     * and vivid are all chroma statements and none of them is a hue. `ceiling`
+     * clamps, so 0 is monotone and roughly 0.10 is muted; `scale` multiplies
+     * what the brand supplies. Both apply to every derived color including the
+     * brand itself, because a monotone theme is one where the brand is gray too.
+     *
+     * Never applied to a value the consumer pinned. A pinned color is a fact.
+     */
+    chroma?: {
+        ceiling?: number;
+        scale?: number;
+    };
+    /**
+     * Target contrast for body text. 4.5 is WCAG AA, 7 is AAA. The European
+     * Accessibility Act points at WCAG 2.1 AA, so 4.5 is the figure with legal
+     * weight and is the default.
+     */
+    contrastTarget?: number;
+    /**
+     * Scales spacing and control heights. 1 is default, 0.875 is compact.
+     */
+    density?: number;
+    /**
+     * Translucency and blur: how much a surface above content admits what is
+     * behind it. `blur` is pixels and 0 is flat; `opacity` is 0 to 1.
+     *
+     * **The one material choice that can invalidate the guarantee.** Contrast is
+     * measured against a known ground and a translucent surface does not have
+     * one, so a pair over it comes back `unverifiable` rather than measured.
+     *
+     * The audit found this half nearly done already: six declarations across two
+     * families, both already behind hooks, so material needed a policy token to
+     * default to and nothing else.
+     */
+    material?: {
+        blur?: number;
+        opacity?: number;
+    };
+    /**
+     * The faces the theme is set in.
+     *
+     * **Type is part of a theme and had no input at all.** Twenty tokens across
+     * five categories, families, sizes, weights, leading and tracking, were
+     * unreachable from intent while every color in the palette was one field
+     * away. Families are the half a consumer actually chooses; the size scale,
+     * the weights and the spacing are the half that is a system, and they are
+     * still fixed.
+     *
+     * `display` falls back to `body`, which is what the stylesheet already does:
+     * a theme with one face is the common case and should not have to say so
+     * three times.
+     */
+    font?: {
+        /**
+         * Body size in pixels. 14 is what ships.
+         *
+         * The whole ramp is built from it: the two steps below step down a pixel
+         * each and the four above compound by `scale`.
+         */
+        base?: number;
+        body?: string;
+        display?: string;
+        mono?: string;
+        /**
+         * The ratio between the display steps. Roughly 1.33 is what ships, which is
+         * a perfect fourth.
+         *
+         * **It applies above the body size and not below it**, because the two ends
+         * of a type ramp are different problems. The steps under body are a UI
+         * ramp, where 12 and 13 sit a pixel apart because a label has to be smaller
+         * than its field and still be read; the steps above are a display ramp,
+         * where each one has to be obviously not the last. One ratio across both
+         * either crushes the top or blows out the bottom.
+         */
+        scale?: number;
+        /**
+         * How heavy the three weights run. `regular` is 400, 500 and 600, which is
+         * what ships; `strong` shifts each up a step and `light` down one.
+         *
+         * A character rather than three numbers, because the three move together or
+         * the relationships between them stop meaning anything.
+         */
+        weight?: 'light' | 'regular' | 'strong';
+    };
+    /**
+     * The token prefix, without dashes. `helix` by default.
+     *
+     * **What makes the engine useful to somebody who has never heard of Helix.**
+     * With this and `pairings`, a team on their own tokens gets the solver and
+     * the verification without adopting the components.
+     */
+    namespace?: string;
+    /**
+     * How the theme's motion feels.
+     *
+     * **The other axis with no input at all**, alongside the half of type that is
+     * a system: nine tokens, four durations and five curves, and a brand with a
+     * snappy voice and one with a gentle one reached them the same way, which is
+     * to say not at all.
+     *
+     * `character` sets the curve every component reaches for by default and
+     * carries a duration multiplier with it, because the two are one decision: a
+     * spring over 120ms is a twitch and a soft curve over 120ms is a fade. `scale`
+     * multiplies on top for a theme that wants the character and not the pace.
+     *
+     * `instant` is not scaled. It is 0 and means "do not animate", which is a
+     * statement rather than a duration, and it emits no curves at all: three
+     * easings for transitions of zero length is a contradiction the type used to
+     * allow through `scale: 0`.
+     *
+     * `precise` is the one character that is not physical. The other three
+     * accelerate, settle or overshoot; linear reads as moved by a mechanism, and
+     * it is the only curve legible on a short travel, because constancy shows in
+     * the timing where an overshoot shows in the distance.
+     */
+    motion?: {
+        character?: 'gentle' | 'instant' | 'precise' | 'snappy' | 'springy';
+        scale?: number;
+    };
+    /**
+     * The cast every gray carries.
+     *
+     * Chroma 0 is a dead gray and is the default, matching `primitives.css`,
+     * which records why: a fixed chroma is a rising *saturation* as a surface
+     * darkens, so a trace that looks right on a light page reads navy across a
+     * dark one. The engine used to hardcode 0.008, the exact value the
+     * stylesheet had already rejected for that reason.
+     */
+    neutral?: {
+        chroma?: number;
+        hue?: number;
+    };
+    /**
+     * How a surface is told apart from what is behind it.
+     *
+     * **Two policies, because the two kinds of surface are not the same
+     * problem.** A card sits in the flow on a ground the theme knows, so how it
+     * separates is a style choice. A menu floats over whatever the reader
+     * scrolled under it, so its elevation is semantic: it is the thing saying
+     * "above".
+     *
+     * `space` is therefore offered for a surface in the flow and not for a
+     * floating one. A floating panel with neither edge nor lift nor fill is
+     * unreadable over content nobody can predict, and it is the one failure the
+     * engine cannot detect, the ground being unbounded. The type refuses it
+     * rather than a comment asking nicely.
+     *
+     * `fill` and `space` produce the same edge and lift, which is none of
+     * either: the difference between them lives in the surface colours and in
+     * `density`, not here. Said out loud because two values with one output
+     * looks like a bug until it is explained.
+     */
+    separation?: {
+        floating?: 'border' | 'fill' | 'shadow';
+        surface?: 'border' | 'fill' | 'shadow' | 'space';
+    };
+    /**
+     * Which pairs to measure. Defaults to the surfaces and inks this engine
+     * emits. A caller may name their own tokens; anything not emitted comes back
+     * `unverifiable` rather than being dropped.
+     */
+    pairings?: PairingRequest[];
+    /**
+     * Base corner radius in rem.
+     */
+    radius?: number;
+    /**
+     * Light or dark surface.
+     */
+    scheme?: 'dark' | 'light';
+    /**
+     * Status roles. **Hue is fixed by meaning and everything else derives.**
+     *
+     * Chroma follows `chroma`, because a vivid red danger inside a monotone
+     * theme reads as a bug rather than as a warning. Lightness is solved against
+     * `contrastTarget` like any other ink. Only the hue is held, and only
+     * because moving it changes what the color means.
+     *
+     * `allowance` is how far a status may rotate on its own to clear a collision,
+     * which is what turns `collisions` from a finding into a repair: a red brand
+     * beside a red danger carries no information, and twenty degrees makes the
+     * danger crimson without making it not-red.
+     *
+     * **20 by default, not 0.** A palette that ships reporting a collision it has
+     * the means to fix is a palette nobody trusts the report of. A status spends
+     * only what it needs, the search stopping at the first hue that clears, and
+     * it keeps its own hue entirely when nothing inside the bound works. Set it
+     * to 0 to hold every status where convention puts it and read the result off
+     * `collisions` instead.
+     */
+    status?: {
+        allowance?: number;
+        /**
+         * How far the statuses follow the palette's own loudness, 0 to 1.
+         *
+         * **Hue is meaning and loudness is not**, which is the distinction this
+         * field turns on. A status that rotates with the brand is a warning a
+         * reader re-learns per product, and that stays refused. A status that
+         * ignores how loud the palette around it is has a different problem:
+         * against a muted brand, danger measured six times the chroma of primary,
+         * which is a vivid red screaming on a near-gray page.
+         *
+         * 0 holds each status at its own chroma. 1 follows the palette as far as the
+         * floor allows, and there is a floor: a danger quiet enough to stop reading
+         * as danger is worse than a loud one. It never goes above its own chroma
+         * either, that already being what its hue can hold.
+         */
+        harmony?: number;
+        danger?: StatusSeed;
+        info?: StatusSeed;
+        success?: StatusSeed;
+        warning?: StatusSeed;
+    };
+    /**
+     * Values that replace what derivation would have produced, keyed by token
+     * name without the namespace prefix. Verified like anything else: a pinned
+     * value that misses its target is a violation, not an exception.
+     */
+    tokens?: Record<string, Color>;
+}
+/** A derived token, carrying the check that produced it. */
+export interface DerivedToken {
+    /**
+     * True when chroma had to be reduced to bring the color into the sRGB gamut.
+     * Informational, not a failure: `value` is always in gamut.
+     */
+    chromaReduced: boolean;
+    /** Measured contrast against the pairing surface, where one is meaningful. */
+    contrast?: number;
+    hex: string;
+    name: string;
+    /**
+     * Where the value came from. `derived` was solved, `related` was rotated off
+     * another role, `pinned` was supplied by the consumer. It is what lets a
+     * reader of the emitted file tell a decision from a computation.
+     */
+    origin: 'derived' | 'pinned' | 'related';
+    /** Always inside the sRGB gamut. */
+    value: Oklch;
+}
+/** One measured pair, whatever the outcome. */
+export interface Pairing {
+    background: string;
+    foreground: string;
+    /**
+     * Measured contrast. Absent when `status` is `unverifiable`, because there
+     * was no ground to measure against.
+     */
+    ratio?: number;
+    /**
+     * **`unverifiable` is not a softer `fail`.** It means the pair was never
+     * measured, which a reader has to be able to tell from a pair that was
+     * measured and passed. Folding the two together is how a guarantee decays
+     * into a claim about the pairs that happened to be easy.
+     *
+     * One producer today: a pairing naming a token this theme does not emit,
+     * which a caller supplying their own `pairings` will legitimately do.
+     * Translucent grounds are the second, when `material` lands: what sits
+     * behind a glass surface is whatever the reader scrolled under it.
+     */
+    status: 'fail' | 'pass' | 'unverifiable';
+    /**
+     * The ratio this pair had to reach. Recorded rather than inferred from the
+     * theme, because a focus ring answers to WCAG 1.4.11 at 3:1 while text
+     * answers to `contrastTarget`, and a reader of one row should not have to
+     * know which kind it is looking at.
+     */
+    target: number;
+}
+/**
+ * What a derivation produced.
+ *
+ * **No `intent`, which the TypeScript engine carried and nothing read.** It held
+ * the resolved intent so a consumer could see what they got rather than what
+ * they asked for, which is a real thing to want and was never used, never dumped
+ * by the oracle, and therefore never checked. Serialising it across the boundary
+ * means a `Serialize` on every shape in the vocabulary including three unions
+ * with hand-written readers, which is a day of work for a field with no caller.
+ * It goes back the moment one appears.
+ */
+export interface DerivedTheme {
+    /**
+     * Roles too close to tell apart, measured as perceptual distance rather than
+     * contrast. Empty means every role is distinguishable.
+     *
+     * A different finding from `violations` and neither substitutes for the
+     * other: contrast is a token against a ground, a collision is two roles
+     * against each other.
+     */
+    collisions: string[];
+    /**
+     * The emitted block, keyed by the selector it was rendered under. Empty when
+     * none were asked for.
+     *
+     * **Rendered by the same call that derived it**, because a derivation is the
+     * expensive half and rendering is not: the theme builder wants one theme under
+     * two selectors, and asking twice would derive twice for one keystroke.
+     */
+    css: Record<string, string>;
+    /**
+     * Every pair the theme was checked against, whatever the outcome.
+     *
+     * Structured rather than a list of sentences, which is what lets a consumer
+     * program against it, lets a builder render it, and stops an unmeasured pair
+     * from being invisible to anybody who only reads `violations`.
+     */
+    pairings: Pairing[];
+    /**
+     * The seed values a consumer must write for `helix/styles` to re-derive the
+     * halves this engine does not compute: the twenty-four series colours, the
+     * spacing scale and the corner radii.
+     *
+     * **Data rather than only a line of CSS**, because the two consumers apply it
+     * differently. `toCss` renders a block; a page theming one panel writes the
+     * properties onto that element. Both read this, so neither can hold a
+     * different opinion about what the seed is, which is exactly what the
+     * marketing site's hand-written bridge had become.
+     */
+    seeds: Record<string, string>;
+    tokens: DerivedToken[];
+    /**
+     * Pairings that failed their contrast target, pinned values included.
+     * Rendered from `pairings`, and no longer the only record of a result.
+     */
+    violations: string[];
+}

package/dist/types.js

@@ -0,0 +1,14 @@
+/**
+ * The shapes a consumer writes and the shapes they get back.
+ *
+ * **Declarations only, and that is what is left of the TypeScript engine.** The
+ * derivation is Rust now, reached through WebAssembly, so what a JavaScript
+ * consumer needs from this package is the vocabulary rather than the solver. A
+ * type is erased at build time, so nothing here is a second implementation of
+ * anything: it cannot drift into disagreeing with the engine about an *answer*,
+ * only about a *field name*, which is what `check:wasm` compares.
+ *
+ * The prose is kept whole from the files it came from. It is the argument for
+ * why each field exists, and it was never about how any of them was computed.
+ */
+export {};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@fusion.dev/helix-theme",
+  "description": "Theme derivation engine. Computes a complete, contrast-guaranteed token set from intent inputs.",
+  "version": "0.0.0-dev",
+  "license": "MIT",
+  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
+  "repository": {
+    "directory": "helix/theme",
+    "type": "git",
+    "url": "git+https://github.com/project-fusion/fusion.git"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "wasm"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "cargo test -p fusion-helix-theme --manifest-path ../../Cargo.toml",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "bugs": "https://github.com/project-fusion/fusion/issues",
+  "homepage": "https://fusion.dev",
+  "keywords": [
+    "theming",
+    "design-tokens",
+    "color",
+    "oklch",
+    "contrast"
+  ],
+  "publishConfig": {
+    "access": "restricted"
+  }
+}

package/wasm/fusion_helix_theme.d.ts

@@ -0,0 +1,76 @@
+/* tslint:disable */
+/* eslint-disable */
+
+/**
+ * Derives a theme, and renders it under every selector asked for.
+ *
+ * **One call, because a derivation is the expensive part and rendering is not.**
+ * Measured in this build: 17ms to derive and a fraction of a millisecond to
+ * render a block. The theme builder wants the same theme under two selectors,
+ * one for the preview and one for the block a reader copies, so an
+ * intent-in-CSS-out function would have it deriving twice for one keystroke.
+ * The result carries `css` keyed by selector, empty when none were asked for.
+ *
+ * For reference, the TypeScript engine this replaces took 39ms for the
+ * derivation alone, so the builder does less work than it did rather than more.
+ *
+ * `selectors` is a JSON array, keeping the boundary uniformly JSON in and JSON
+ * out rather than mixing in a bound array type for one argument.
+ *
+ * # Errors
+ *
+ * When either argument is not the JSON it should be, or when the engine refuses
+ * the intent.
+ */
+export function derive(intent: string, selectors: string): string;
+
+/**
+ * Reads a hex color into its OKLCH components, as JSON.
+ *
+ * **Throws where the TypeScript returned `NaN`**, which is a deliberate change
+ * and the same one `resolve` makes for a brand: `Number.parseInt` of something
+ * that is not hex gives `NaN`, every comparison against which is false, so a
+ * color that could not be read traveled onward looking like a color. A
+ * caller passing the value of a color input never sees this.
+ *
+ * # Errors
+ *
+ * When the string is not a hex color.
+ */
+export function hexToOklch(hex: string): string;
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+    readonly memory: WebAssembly.Memory;
+    readonly derive: (a: number, b: number, c: number, d: number) => [number, number, number, number];
+    readonly hexToOklch: (a: number, b: number) => [number, number, number, number];
+    readonly __wbindgen_externrefs: WebAssembly.Table;
+    readonly __wbindgen_malloc: (a: number, b: number) => number;
+    readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+    readonly __externref_table_dealloc: (a: number) => void;
+    readonly __wbindgen_free: (a: number, b: number, c: number) => void;
+    readonly __wbindgen_start: () => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+
+/**
+ * Instantiates the given `module`, which can either be bytes or
+ * a precompiled `WebAssembly.Module`.
+ *
+ * @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
+ *
+ * @returns {InitOutput}
+ */
+export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
+
+/**
+ * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+ * for everything else, calls `WebAssembly.instantiate` directly.
+ *
+ * @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
+ *
+ * @returns {Promise<InitOutput>}
+ */
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;

package/wasm/fusion_helix_theme.js

@@ -0,0 +1,283 @@
+/* @ts-self-types="./fusion_helix_theme.d.ts" */
+
+/**
+ * Derives a theme, and renders it under every selector asked for.
+ *
+ * **One call, because a derivation is the expensive part and rendering is not.**
+ * Measured in this build: 17ms to derive and a fraction of a millisecond to
+ * render a block. The theme builder wants the same theme under two selectors,
+ * one for the preview and one for the block a reader copies, so an
+ * intent-in-CSS-out function would have it deriving twice for one keystroke.
+ * The result carries `css` keyed by selector, empty when none were asked for.
+ *
+ * For reference, the TypeScript engine this replaces took 39ms for the
+ * derivation alone, so the builder does less work than it did rather than more.
+ *
+ * `selectors` is a JSON array, keeping the boundary uniformly JSON in and JSON
+ * out rather than mixing in a bound array type for one argument.
+ *
+ * # Errors
+ *
+ * When either argument is not the JSON it should be, or when the engine refuses
+ * the intent.
+ * @param {string} intent
+ * @param {string} selectors
+ * @returns {string}
+ */
+export function derive(intent, selectors) {
+    let deferred4_0;
+    let deferred4_1;
+    try {
+        const ptr0 = passStringToWasm0(intent, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ptr1 = passStringToWasm0(selectors, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len1 = WASM_VECTOR_LEN;
+        const ret = wasm.derive(ptr0, len0, ptr1, len1);
+        var ptr3 = ret[0];
+        var len3 = ret[1];
+        if (ret[3]) {
+            ptr3 = 0; len3 = 0;
+            throw takeFromExternrefTable0(ret[2]);
+        }
+        deferred4_0 = ptr3;
+        deferred4_1 = len3;
+        return getStringFromWasm0(ptr3, len3);
+    } finally {
+        wasm.__wbindgen_free(deferred4_0, deferred4_1, 1);
+    }
+}
+
+/**
+ * Reads a hex color into its OKLCH components, as JSON.
+ *
+ * **Throws where the TypeScript returned `NaN`**, which is a deliberate change
+ * and the same one `resolve` makes for a brand: `Number.parseInt` of something
+ * that is not hex gives `NaN`, every comparison against which is false, so a
+ * color that could not be read traveled onward looking like a color. A
+ * caller passing the value of a color input never sees this.
+ *
+ * # Errors
+ *
+ * When the string is not a hex color.
+ * @param {string} hex
+ * @returns {string}
+ */
+export function hexToOklch(hex) {
+    let deferred3_0;
+    let deferred3_1;
+    try {
+        const ptr0 = passStringToWasm0(hex, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        const len0 = WASM_VECTOR_LEN;
+        const ret = wasm.hexToOklch(ptr0, len0);
+        var ptr2 = ret[0];
+        var len2 = ret[1];
+        if (ret[3]) {
+            ptr2 = 0; len2 = 0;
+            throw takeFromExternrefTable0(ret[2]);
+        }
+        deferred3_0 = ptr2;
+        deferred3_1 = len2;
+        return getStringFromWasm0(ptr2, len2);
+    } finally {
+        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
+    }
+}
+function __wbg_get_imports() {
+    const import0 = {
+        __proto__: null,
+        __wbg_Error_408e67f47ca7b58b: function(arg0, arg1) {
+            const ret = Error(getStringFromWasm0(arg0, arg1));
+            return ret;
+        },
+        __wbindgen_init_externref_table: function() {
+            const table = wasm.__wbindgen_externrefs;
+            const offset = table.grow(4);
+            table.set(0, undefined);
+            table.set(offset + 0, undefined);
+            table.set(offset + 1, null);
+            table.set(offset + 2, true);
+            table.set(offset + 3, false);
+        },
+    };
+    return {
+        __proto__: null,
+        "./fusion_helix_theme_bg.js": import0,
+    };
+}
+
+function getStringFromWasm0(ptr, len) {
+    return decodeText(ptr >>> 0, len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function passStringToWasm0(arg, malloc, realloc) {
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function takeFromExternrefTable0(idx) {
+    const value = wasm.__wbindgen_externrefs.get(idx);
+    wasm.__externref_table_dealloc(idx);
+    return value;
+}
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+    numBytesDecoded += len;
+    if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+        cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+        cachedTextDecoder.decode();
+        numBytesDecoded = len;
+    }
+    return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    };
+}
+
+let WASM_VECTOR_LEN = 0;
+
+let wasmModule, wasmInstance, wasm;
+function __wbg_finalize_init(instance, module) {
+    wasmInstance = instance;
+    wasm = instance.exports;
+    wasmModule = module;
+    cachedUint8ArrayMemory0 = null;
+    wasm.__wbindgen_start();
+    return wasm;
+}
+
+async function __wbg_load(module, imports) {
+    if (typeof Response === 'function' && module instanceof Response) {
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            try {
+                return await WebAssembly.instantiateStreaming(module, imports);
+            } catch (e) {
+                const validResponse = module.ok && expectedResponseType(module.type);
+
+                if (validResponse && module.headers.get('Content-Type') !== 'application/wasm') {
+                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+
+                } else { throw e; }
+            }
+        }
+
+        const bytes = await module.arrayBuffer();
+        return await WebAssembly.instantiate(bytes, imports);
+    } else {
+        const instance = await WebAssembly.instantiate(module, imports);
+
+        if (instance instanceof WebAssembly.Instance) {
+            return { instance, module };
+        } else {
+            return instance;
+        }
+    }
+
+    function expectedResponseType(type) {
+        switch (type) {
+            case 'basic': case 'cors': case 'default': return true;
+        }
+        return false;
+    }
+}
+
+function initSync(module) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module !== undefined) {
+        if (Object.getPrototypeOf(module) === Object.prototype) {
+            ({module} = module)
+        } else {
+            console.warn('using deprecated parameters for `initSync()`; pass a single object instead')
+        }
+    }
+
+    const imports = __wbg_get_imports();
+    if (!(module instanceof WebAssembly.Module)) {
+        module = new WebAssembly.Module(module);
+    }
+    const instance = new WebAssembly.Instance(module, imports);
+    return __wbg_finalize_init(instance, module);
+}
+
+async function __wbg_init(module_or_path) {
+    if (wasm !== undefined) return wasm;
+
+
+    if (module_or_path !== undefined) {
+        if (Object.getPrototypeOf(module_or_path) === Object.prototype) {
+            ({module_or_path} = module_or_path)
+        } else {
+            console.warn('using deprecated parameters for the initialization function; pass a single object instead')
+        }
+    }
+
+    if (module_or_path === undefined) {
+        module_or_path = new URL('fusion_helix_theme_bg.wasm', import.meta.url);
+    }
+    const imports = __wbg_get_imports();
+
+    if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {
+        module_or_path = fetch(module_or_path);
+    }
+
+    const { instance, module } = await __wbg_load(await module_or_path, imports);
+
+    return __wbg_finalize_init(instance, module);
+}
+
+export { initSync, __wbg_init as default };

package/wasm/fusion_helix_theme_bg.wasm.d.ts

@@ -0,0 +1,11 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const derive: (a: number, b: number, c: number, d: number) => [number, number, number, number];
+export const hexToOklch: (a: number, b: number) => [number, number, number, number];
+export const __wbindgen_externrefs: WebAssembly.Table;
+export const __wbindgen_malloc: (a: number, b: number) => number;
+export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+export const __externref_table_dealloc: (a: number) => void;
+export const __wbindgen_free: (a: number, b: number, c: number) => void;
+export const __wbindgen_start: () => void;