@vibesdotdev/runnable 0.0.0-stage → 1.0.0-rc.1

package/dist/svelte/viz/mfd/MFDStatusGrid.svelte

@@ -0,0 +1,65 @@
+<!--
+  MFDStatusGrid — Matrix of status indicator lights
+  Renders a grid of colored indicator dots with pulse animation for active states.
+  Three indicator styles: circle, square, diamond.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { MFDSize, PaletteName } from './types';
+  import MFDPanel from './MFDPanel.svelte';
+
+  type Props = {
+    id: string;
+    size?: MFDSize;
+    palette?: PaletteName;
+    label?: string;
+    sublabel?: string;
+    intensity?: number;
+    /** Grid columns */
+    cols?: number;
+    /** Grid rows */
+    rows?: number;
+    /** Indicator style */
+    style?: 'circle' | 'square' | 'diamond';
+    /** Pulse speed for active indicators */
+    pulseSpeed?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+  };
+
+  let {
+    id,
+    size = '2x2',
+    palette = 'phosphor',
+    label = 'STATUS',
+    sublabel = '',
+    intensity = 1.0,
+    cols = 4,
+    rows = 4,
+    style = 'circle',
+    pulseSpeed = 2.0,
+    overlay,
+    class: extraClass = '',
+    alert = false,
+  }: Props = $props();
+
+  const styleMap = { circle: 0, square: 1, diamond: 2 };
+  const params = $derived<[number, number, number, number]>(
+    [cols, rows, styleMap[style], pulseSpeed],
+  );
+</script>
+
+<MFDPanel
+  {id}
+  module="status-grid"
+  {size}
+  {palette}
+  {label}
+  {sublabel}
+  {intensity}
+  {params}
+  {overlay}
+  class={extraClass}
+  {alert}
+/>

package/dist/svelte/viz/mfd/MFDStatusGrid.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { MFDSize, PaletteName } from './types';
+type Props = {
+    id: string;
+    size?: MFDSize;
+    palette?: PaletteName;
+    label?: string;
+    sublabel?: string;
+    intensity?: number;
+    /** Grid columns */
+    cols?: number;
+    /** Grid rows */
+    rows?: number;
+    /** Indicator style */
+    style?: 'circle' | 'square' | 'diamond';
+    /** Pulse speed for active indicators */
+    pulseSpeed?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+};
+declare const MFDStatusGrid: import("svelte").Component<Props, {}, "">;
+type MFDStatusGrid = ReturnType<typeof MFDStatusGrid>;
+export default MFDStatusGrid;
+//# sourceMappingURL=MFDStatusGrid.svelte.d.ts.map

package/dist/svelte/viz/mfd/MFDStatusGrid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MFDStatusGrid.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/mfd/MFDStatusGrid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAIlD,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACxC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAkCJ,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/viz/mfd/grid.d.ts

@@ -0,0 +1,37 @@
+import { type MFDSize, type ViewportRect } from './types';
+export { GRID_UNIT } from './types';
+/** Gap between grid cells in pixels */
+export declare const GRID_GAP = 4;
+/** Panel bezel inset (CSS pixels) */
+export declare const BEZEL_INSET = 6;
+/** Panel outer chrome thickness */
+export declare const CHROME_BORDER = 2;
+export declare function panelOuterSize(size: MFDSize): {
+    width: number;
+    height: number;
+};
+export declare function panelViewport(domRect: DOMRect, canvasHeight: number, dpr: number, canvasOrigin?: {
+    left: number;
+    top: number;
+}): ViewportRect;
+export declare function gridArea(row: number, col: number, size: MFDSize): string;
+export declare function gridTemplate(cols: number, rows: number): {
+    gridTemplateColumns: string;
+    gridTemplateRows: string;
+    gap: string;
+};
+export declare const MODULE_DEFAULT_SIZES: {
+    scope: ("2x1" | "2x2" | "4x2")[];
+    'arc-gauge': ("1x1" | "2x2")[];
+    'bar-meter': ("1x1" | "2x1" | "1x2")[];
+    'hex-matrix': ("2x2" | "4x2" | "4x4")[];
+    radar: ("2x2" | "4x4")[];
+    waterfall: ("2x2" | "4x2" | "2x4")[];
+    topo: ("2x2" | "4x4")[];
+    'vector-scope': ("2x2" | "4x4")[];
+    'status-grid': ("2x1" | "2x2" | "4x2")[];
+    'digital-readout': ("1x1" | "2x1")[];
+    'progress-ring': ("1x1" | "2x2")[];
+    toggle: "1x1"[];
+};
+//# sourceMappingURL=grid.d.ts.map

package/dist/svelte/viz/mfd/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/mfd/grid.ts"],"names":[],"mappings":"AAKA,OAAO,EAAwB,KAAK,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEhF,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,uCAAuC;AACvC,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B,qCAAqC;AACrC,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B,mCAAmC;AACnC,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO;;;EAM3C;AAED,wBAAgB,aAAa,CAC5B,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,MAAM,EACX,YAAY,GAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAwB,GAC/D,YAAY,CAMd;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,CAGxE;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;;;;EAMtD;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;CAaI,CAAC"}

package/dist/svelte/viz/mfd/grid.js

@@ -0,0 +1,51 @@
+// ═══════════════════════════════════════════════════════════════
+// NERV MFD — Grid System
+// 128x128 base unit, CSS Grid layout helpers, panel sizing
+// ═══════════════════════════════════════════════════════════════
+import { GRID_UNIT, MFD_SIZES } from './types';
+export { GRID_UNIT } from './types';
+/** Gap between grid cells in pixels */
+export const GRID_GAP = 4;
+/** Panel bezel inset (CSS pixels) */
+export const BEZEL_INSET = 6;
+/** Panel outer chrome thickness */
+export const CHROME_BORDER = 2;
+export function panelOuterSize(size) {
+    const s = MFD_SIZES[size];
+    return {
+        width: s.cols * GRID_UNIT + (s.cols - 1) * GRID_GAP,
+        height: s.rows * GRID_UNIT + (s.rows - 1) * GRID_GAP
+    };
+}
+export function panelViewport(domRect, canvasHeight, dpr, canvasOrigin = { left: 0, top: 0 }) {
+    const x = (domRect.left - canvasOrigin.left + BEZEL_INSET) * dpr;
+    const y = (canvasOrigin.top + canvasHeight - domRect.bottom + BEZEL_INSET) * dpr;
+    const width = (domRect.width - BEZEL_INSET * 2) * dpr;
+    const height = (domRect.height - BEZEL_INSET * 2) * dpr;
+    return { x, y, width, height };
+}
+export function gridArea(row, col, size) {
+    const s = MFD_SIZES[size];
+    return `${row} / ${col} / ${row + s.rows} / ${col + s.cols}`;
+}
+export function gridTemplate(cols, rows) {
+    return {
+        gridTemplateColumns: `repeat(${cols}, ${GRID_UNIT}px)`,
+        gridTemplateRows: `repeat(${rows}, ${GRID_UNIT}px)`,
+        gap: `${GRID_GAP}px`
+    };
+}
+export const MODULE_DEFAULT_SIZES = {
+    scope: ['2x1', '4x2', '2x2'],
+    'arc-gauge': ['1x1', '2x2'],
+    'bar-meter': ['1x2', '2x1', '1x1'],
+    'hex-matrix': ['2x2', '4x4', '4x2'],
+    radar: ['2x2', '4x4'],
+    waterfall: ['2x2', '4x2', '2x4'],
+    topo: ['2x2', '4x4'],
+    'vector-scope': ['2x2', '4x4'],
+    'status-grid': ['2x1', '2x2', '4x2'],
+    'digital-readout': ['2x1', '1x1'],
+    'progress-ring': ['1x1', '2x2'],
+    toggle: ['1x1']
+};

package/dist/svelte/viz/mfd/palette.d.ts

@@ -0,0 +1,22 @@
+import type { RGB, PaletteName } from './types';
+export type Palette = {
+    primary: RGB;
+    accent: RGB;
+    dim: RGB;
+    warning: RGB;
+    bg: RGB;
+    grid: RGB;
+    glow: RGB;
+};
+export declare function getPalette(name: PaletteName): Palette;
+/** Linear interpolation between two colors */
+export declare function lerpRGB(a: RGB, b: RGB, t: number): RGB;
+/** Green → Amber → Red heat ramp based on value (0..1) */
+export declare function heatRamp(value: number): RGB;
+/** Spectral ramp: dark blue → cyan → green → yellow → red → white */
+export declare function spectralRamp(value: number): RGB;
+/** Convert RGB [0..1] to CSS hex */
+export declare function rgbToHex(c: RGB): string;
+/** Convert RGB [0..1] to CSS rgba string */
+export declare function rgbToCSS(c: RGB, alpha?: number): string;
+//# sourceMappingURL=palette.d.ts.map

package/dist/svelte/viz/mfd/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/mfd/palette.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,MAAM,OAAO,GAAG;IACrB,OAAO,EAAE,GAAG,CAAC;IACb,MAAM,EAAE,GAAG,CAAC;IACZ,GAAG,EAAE,GAAG,CAAC;IACT,OAAO,EAAE,GAAG,CAAC;IACb,EAAE,EAAE,GAAG,CAAC;IACR,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,GAAG,CAAC;CACV,CAAC;AA2DF,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAErD;AAED,8CAA8C;AAC9C,wBAAgB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAEtD;AAED,0DAA0D;AAC1D,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAM3C;AAED,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAO/C;AAED,oCAAoC;AACpC,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CAWvC;AAED,4CAA4C;AAC5C,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAE,MAAU,GAAG,MAAM,CAE1D"}

package/dist/svelte/viz/mfd/palette.js

@@ -0,0 +1,105 @@
+// ═══════════════════════════════════════════════════════════════
+// NERV MFD — Color Palettes
+// CRT phosphor-accurate colors with dynamic intensity and heat mapping
+// ═══════════════════════════════════════════════════════════════
+const PALETTES = {
+    phosphor: {
+        primary: [0.0, 0.92, 0.42],
+        accent: [0.0, 0.65, 0.3],
+        dim: [0.0, 0.2, 0.1],
+        warning: [0.94, 0.62, 0.1],
+        bg: [0.01, 0.03, 0.01],
+        grid: [0.0, 0.12, 0.06],
+        glow: [0.0, 0.7, 0.3]
+    },
+    amber: {
+        primary: [1.0, 0.65, 0.0],
+        accent: [0.85, 0.45, 0.0],
+        dim: [0.3, 0.18, 0.0],
+        warning: [1.0, 0.2, 0.1],
+        bg: [0.03, 0.02, 0.0],
+        grid: [0.15, 0.09, 0.0],
+        glow: [0.8, 0.5, 0.0]
+    },
+    cyan: {
+        primary: [0.0, 0.88, 1.0],
+        accent: [0.0, 0.58, 0.78],
+        dim: [0.0, 0.18, 0.28],
+        warning: [0.94, 0.62, 0.1],
+        bg: [0.01, 0.02, 0.04],
+        grid: [0.0, 0.1, 0.15],
+        glow: [0.0, 0.65, 0.8]
+    },
+    magenta: {
+        primary: [0.9, 0.14, 0.68],
+        accent: [0.62, 0.1, 0.48],
+        dim: [0.22, 0.04, 0.16],
+        warning: [1.0, 0.28, 0.18],
+        bg: [0.03, 0.01, 0.02],
+        grid: [0.12, 0.03, 0.08],
+        glow: [0.72, 0.1, 0.52]
+    },
+    warning: {
+        primary: [1.0, 0.82, 0.0],
+        accent: [1.0, 0.5, 0.0],
+        dim: [0.28, 0.2, 0.0],
+        warning: [1.0, 0.14, 0.05],
+        bg: [0.03, 0.02, 0.0],
+        grid: [0.15, 0.12, 0.0],
+        glow: [0.8, 0.65, 0.0]
+    },
+    critical: {
+        primary: [1.0, 0.1, 0.06],
+        accent: [0.78, 0.06, 0.04],
+        dim: [0.28, 0.03, 0.02],
+        warning: [1.0, 0.82, 0.0],
+        bg: [0.04, 0.01, 0.01],
+        grid: [0.15, 0.03, 0.02],
+        glow: [0.8, 0.08, 0.04]
+    }
+};
+export function getPalette(name) {
+    return PALETTES[name];
+}
+/** Linear interpolation between two colors */
+export function lerpRGB(a, b, t) {
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+}
+/** Green → Amber → Red heat ramp based on value (0..1) */
+export function heatRamp(value) {
+    const v = Math.max(0, Math.min(1, value));
+    if (v < 0.5) {
+        return lerpRGB([0.0, 0.92, 0.42], [1.0, 0.65, 0.0], v * 2);
+    }
+    return lerpRGB([1.0, 0.65, 0.0], [1.0, 0.1, 0.06], (v - 0.5) * 2);
+}
+/** Spectral ramp: dark blue → cyan → green → yellow → red → white */
+export function spectralRamp(value) {
+    const v = Math.max(0, Math.min(1, value));
+    if (v < 0.2)
+        return lerpRGB([0.0, 0.0, 0.15], [0.0, 0.4, 0.8], v * 5);
+    if (v < 0.4)
+        return lerpRGB([0.0, 0.4, 0.8], [0.0, 0.85, 0.45], (v - 0.2) * 5);
+    if (v < 0.6)
+        return lerpRGB([0.0, 0.85, 0.45], [0.95, 0.8, 0.0], (v - 0.4) * 5);
+    if (v < 0.8)
+        return lerpRGB([0.95, 0.8, 0.0], [1.0, 0.15, 0.05], (v - 0.6) * 5);
+    return lerpRGB([1.0, 0.15, 0.05], [1.0, 0.95, 0.9], (v - 0.8) * 5);
+}
+/** Convert RGB [0..1] to CSS hex */
+export function rgbToHex(c) {
+    const r = Math.round(c[0] * 255)
+        .toString(16)
+        .padStart(2, '0');
+    const g = Math.round(c[1] * 255)
+        .toString(16)
+        .padStart(2, '0');
+    const b = Math.round(c[2] * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return `#${r}${g}${b}`;
+}
+/** Convert RGB [0..1] to CSS rgba string */
+export function rgbToCSS(c, alpha = 1) {
+    return `rgba(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)},${alpha})`;
+}

package/dist/svelte/viz/mfd/pipeline/store.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { MFDModuleType, MFDSize, PaletteName, CRTSettings } from '../types';
+export declare function createMfd(): {
+    readonly error: string | null;
+    readonly initialized: boolean;
+    readonly initFailed: boolean;
+    readonly ready: boolean;
+    readonly panelCount: number;
+    readonly crt: CRTSettings;
+    init(container: HTMLElement): void;
+    register(id: string, moduleType: MFDModuleType, size: MFDSize, palette?: PaletteName): void;
+    bindElement(id: string, el: HTMLElement): void;
+    unregister(id: string): void;
+    setData(id: string, data: Float32Array | number[]): void;
+    setParams(id: string, params: [number, number, number, number]): void;
+    setPalette(id: string, palette: PaletteName): void;
+    setIntensity(id: string, intensity: number): void;
+    setEnabled(id: string, enabled: boolean): void;
+    setCRT(settings: Partial<CRTSettings>): void;
+    resize(): void;
+    destroy(): void;
+};
+export declare function mfd(): {
+    readonly error: string | null;
+    readonly initialized: boolean;
+    readonly initFailed: boolean;
+    readonly ready: boolean;
+    readonly panelCount: number;
+    readonly crt: CRTSettings;
+    init(container: HTMLElement): void;
+    register(id: string, moduleType: MFDModuleType, size: MFDSize, palette?: PaletteName): void;
+    bindElement(id: string, el: HTMLElement): void;
+    unregister(id: string): void;
+    setData(id: string, data: Float32Array | number[]): void;
+    setParams(id: string, params: [number, number, number, number]): void;
+    setPalette(id: string, palette: PaletteName): void;
+    setIntensity(id: string, intensity: number): void;
+    setEnabled(id: string, enabled: boolean): void;
+    setCRT(settings: Partial<CRTSettings>): void;
+    resize(): void;
+    destroy(): void;
+};
+//# sourceMappingURL=store.svelte.d.ts.map

package/dist/svelte/viz/mfd/pipeline/store.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/viz/mfd/pipeline/store.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAOjF,wBAAgB,SAAS;;;;;;;oBA+BP,WAAW;iBAiBd,MAAM,cAAc,aAAa,QAAQ,OAAO,YAAY,WAAW;oBAapE,MAAM,MAAM,WAAW;mBAIxB,MAAM;gBAKT,MAAM,QAAQ,YAAY,GAAG,MAAM,EAAE;kBAInC,MAAM,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;mBAI/C,MAAM,WAAW,WAAW;qBAI1B,MAAM,aAAa,MAAM;mBAI3B,MAAM,WAAW,OAAO;qBAItB,OAAO,CAAC,WAAW,CAAC;;;EAmBtC;AAED,wBAAgB,GAAG;;;;;;;oBAhFD,WAAW;iBAiBd,MAAM,cAAc,aAAa,QAAQ,OAAO,YAAY,WAAW;oBAapE,MAAM,MAAM,WAAW;mBAIxB,MAAM;gBAKT,MAAM,QAAQ,YAAY,GAAG,MAAM,EAAE;kBAInC,MAAM,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;mBAI/C,MAAM,WAAW,WAAW;qBAI1B,MAAM,aAAa,MAAM;mBAI3B,MAAM,WAAW,OAAO;qBAItB,OAAO,CAAC,WAAW,CAAC;;;EA4BtC"}

package/dist/svelte/viz/mfd/pipeline/store.svelte.js

@@ -0,0 +1,115 @@
+import { settleNow } from '@vibesdotdev/kernel';
+import { CRT_DEFAULTS } from '../types';
+import { GLContext } from '../renderer/context';
+import { RenderPipeline } from '../renderer/pipeline';
+import { getContext, setContext, onDestroy } from 'svelte';
+export function createMfd() {
+    let renderingError = $state(null);
+    let initialized = $state(false);
+    let initFailed = $state(false);
+    let panelCount = $state(0);
+    const crtSettings = $state({ ...CRT_DEFAULTS });
+    // Non-reactive internal refs (GL objects, pipeline)
+    let ctx = null;
+    let pipeline = null;
+    return {
+        get error() {
+            return renderingError;
+        },
+        get initialized() {
+            return initialized;
+        },
+        get initFailed() {
+            return initFailed;
+        },
+        get ready() {
+            return initialized || initFailed;
+        },
+        get panelCount() {
+            return panelCount;
+        },
+        get crt() {
+            return crtSettings;
+        },
+        init(container) {
+            if (ctx)
+                return;
+            const outcome1 = settleNow(() => {
+                ctx = GLContext.create(container);
+                pipeline = new RenderPipeline(ctx);
+                pipeline.start();
+                initialized = true;
+            });
+            if (!outcome1.ok) {
+                const e = outcome1.cause;
+                renderingError = `MFD initialization failed: ${String(e)}`;
+                this.destroy();
+                ctx = null;
+                initFailed = true;
+            }
+        },
+        register(id, moduleType, size, palette) {
+            const activePipeline = pipeline;
+            if (!activePipeline)
+                return;
+            const outcome2 = settleNow(() => {
+                activePipeline.register(id, moduleType, size, palette);
+                panelCount = activePipeline.getPanelIds().length;
+            });
+            if (!outcome2.ok) {
+                const e = outcome2.cause;
+                renderingError = `MFD panel ${id} registration failed: ${String(e)}`;
+            }
+        },
+        bindElement(id, el) {
+            pipeline?.bindElement(id, el);
+        },
+        unregister(id) {
+            pipeline?.unregister(id);
+            if (pipeline)
+                panelCount = pipeline.getPanelIds().length;
+        },
+        setData(id, data) {
+            pipeline?.setData(id, data);
+        },
+        setParams(id, params) {
+            pipeline?.setParams(id, params);
+        },
+        setPalette(id, palette) {
+            pipeline?.setPalette(id, palette);
+        },
+        setIntensity(id, intensity) {
+            pipeline?.setIntensity(id, intensity);
+        },
+        setEnabled(id, enabled) {
+            pipeline?.setEnabled(id, enabled);
+        },
+        setCRT(settings) {
+            Object.assign(crtSettings, settings);
+            if (ctx)
+                Object.assign(ctx.crt, settings);
+        },
+        resize() {
+            ctx?.resize();
+            pipeline?.updateAllViewports();
+        },
+        destroy() {
+            pipeline?.destroy();
+            pipeline = null;
+            ctx = null;
+            initialized = false;
+            initFailed = false;
+            panelCount = 0;
+        }
+    };
+}
+const contextKey = Symbol('runnable.mfd');
+export function mfd() {
+    const inherited = getContext(contextKey);
+    if (inherited)
+        return inherited;
+    const state = createMfd();
+    setContext(contextKey, state);
+    onDestroy(() => state.destroy());
+    return state;
+}

package/dist/svelte/viz/mfd/renderer/context.d.ts

@@ -0,0 +1,47 @@
+import { type CRTSettings } from '../types';
+import { MODULE_SHADERS } from './shaders';
+export type CompiledProgram = {
+    program: WebGLProgram;
+    uniforms: Map<string, WebGLUniformLocation | null>;
+};
+export declare class GLContext {
+    readonly canvas: HTMLCanvasElement;
+    readonly gl: WebGL2RenderingContext;
+    dpr: number;
+    private programs;
+    private crtProgram;
+    private quadVAO;
+    private sceneFBO;
+    private sceneTexture;
+    /**
+     * True once the canvas has been sized to non-zero dimensions AND
+     * the scene FBO has been allocated at that size. Render frame hooks
+     * short-circuit when this is false so they don't spam the console
+     * with GL_INVALID_FRAMEBUFFER_OPERATION when the canvas is in a
+     * zero-sized container (collapsed panel, hidden tab, pre-layout).
+     */
+    private hasValidSize;
+    crt: CRTSettings;
+    private constructor();
+    static create(container: HTMLElement): GLContext;
+    resize(): void;
+    /** True when the canvas + FBO are sized for rendering. */
+    get ready(): boolean;
+    private _initFBO;
+    private _compileCRT;
+    getModuleProgram(moduleType: keyof typeof MODULE_SHADERS): CompiledProgram;
+    createDataTexture(width?: number): WebGLTexture;
+    createDataTexture2D(width: number, height: number): WebGLTexture;
+    updateDataTexture(tex: WebGLTexture, data: Float32Array): void;
+    updateDataTexture2D(tex: WebGLTexture, data: Float32Array, width: number, height: number): void;
+    beginFrame(): void;
+    renderPanel(moduleType: keyof typeof MODULE_SHADERS, viewport: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, time: number, color: [number, number, number], accent: [number, number, number], dim: [number, number, number], grid: [number, number, number], glow: [number, number, number], warning: [number, number, number], intensity: number, params: Float32Array, dataTexture: WebGLTexture, dataCount: number): void;
+    endFrame(time: number): void;
+    destroy(): void;
+}
+//# sourceMappingURL=context.d.ts.map

package/dist/svelte/viz/mfd/renderer/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/svelte/viz/mfd/renderer/context.ts"],"names":[],"mappings":"AAOA,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACzE,OAAO,EAAoC,cAAc,EAAe,MAAM,WAAW,CAAC;AAE1F,MAAM,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,CAAC;CACnD,CAAC;AA+BF,qBAAa,SAAS;IACrB,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC;IACnC,QAAQ,CAAC,EAAE,EAAE,sBAAsB,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC;IAEZ,OAAO,CAAC,QAAQ,CAAsC;IACtD,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,QAAQ,CAAmB;IACnC,OAAO,CAAC,YAAY,CAAe;IACnC;;;;;;OAMG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B,GAAG,EAAE,WAAW,CAAuB;IAEvC,OAAO;IA0BP,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,GAAG,SAAS;IAuBhD,MAAM;IA4BN,0DAA0D;IAC1D,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,WAAW;IAKnB,gBAAgB,CAAC,UAAU,EAAE,MAAM,OAAO,cAAc,GAAG,eAAe;IAY1E,iBAAiB,CAAC,KAAK,GAAE,MAAsB,GAAG,YAAY;IAY9D,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,YAAY;IAYhE,iBAAiB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY;IAMvD,mBAAmB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAMxF,UAAU;IAaV,WAAW,CACV,UAAU,EAAE,MAAM,OAAO,cAAc,EACvC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EACjE,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAC/B,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAChC,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAC7B,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAC9B,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAC9B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EACjC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,YAAY,EACpB,WAAW,EAAE,YAAY,EACzB,SAAS,EAAE,MAAM;IAiClB,QAAQ,CAAC,IAAI,EAAE,MAAM;IAkCrB,OAAO;CAQP"}