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

package/dist/svelte/viz/mfd/MFDBarMeter.svelte

@@ -0,0 +1,58 @@
+<!--
+  MFDBarMeter — Segmented bar meter with dynamic coloring
+-->
+<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;
+    segments?: number;
+    orientation?: 'horizontal' | 'vertical';
+    warningThreshold?: number;
+    value?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+  };
+
+  let {
+    id,
+    size = '2x1',
+    palette = 'amber',
+    label = 'LEVEL',
+    sublabel = '',
+    intensity = 1.0,
+    segments = 20,
+    orientation = 'horizontal',
+    warningThreshold = 0.75,
+    value = 0,
+    overlay,
+    class: extraClass = '',
+    alert = false,
+  }: Props = $props();
+
+  const params = $derived<[number, number, number, number]>(
+    [segments, orientation === 'vertical' ? 1 : 0, warningThreshold, value],
+  );
+</script>
+
+<MFDPanel
+  {id}
+  module="bar-meter"
+  {size}
+  {palette}
+  {label}
+  {sublabel}
+  {intensity}
+  {params}
+  {overlay}
+  class={extraClass}
+  {alert}
+/>

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

@@ -0,0 +1,21 @@
+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;
+    segments?: number;
+    orientation?: 'horizontal' | 'vertical';
+    warningThreshold?: number;
+    value?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+};
+declare const MFDBarMeter: import("svelte").Component<Props, {}, "">;
+type MFDBarMeter = ReturnType<typeof MFDBarMeter>;
+export default MFDBarMeter;
+//# sourceMappingURL=MFDBarMeter.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MFDBarMeter.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/mfd/MFDBarMeter.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,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAiCJ,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/viz/mfd/MFDHexMatrix.svelte

@@ -0,0 +1,58 @@
+<!--
+  MFDHexMatrix — Hexagonal grid heatmap display
+-->
+<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;
+    cols?: number;
+    rows?: number;
+    gap?: number;
+    animSpeed?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+  };
+
+  let {
+    id,
+    size = '2x2',
+    palette = 'magenta',
+    label = 'MATRIX',
+    sublabel = '',
+    intensity = 1.0,
+    cols = 8,
+    rows = 8,
+    gap = 0.3,
+    animSpeed = 1.0,
+    overlay,
+    class: extraClass = '',
+    alert = false,
+  }: Props = $props();
+
+  const params = $derived<[number, number, number, number]>(
+    [cols, rows, gap, animSpeed],
+  );
+</script>
+
+<MFDPanel
+  {id}
+  module="hex-matrix"
+  {size}
+  {palette}
+  {label}
+  {sublabel}
+  {intensity}
+  {params}
+  {overlay}
+  class={extraClass}
+  {alert}
+/>

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

@@ -0,0 +1,21 @@
+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;
+    cols?: number;
+    rows?: number;
+    gap?: number;
+    animSpeed?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+};
+declare const MFDHexMatrix: import("svelte").Component<Props, {}, "">;
+type MFDHexMatrix = ReturnType<typeof MFDHexMatrix>;
+export default MFDHexMatrix;
+//# sourceMappingURL=MFDHexMatrix.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MFDHexMatrix.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/mfd/MFDHexMatrix.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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAiCJ,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/viz/mfd/MFDPanel.svelte

@@ -0,0 +1,372 @@
+<!--
+  ═══════════════════════════════════════════════════════════════════════════
+  MFDPanel — NERV MFD Base Panel
+
+  Industrial instrument panel aesthetic:
+  - Thick beveled outer bezel with metallic sheen
+  - Recessed inner viewport bay
+  - Precision corner brackets (12px)
+  - Chrome bar with metallic gradient + inner highlight
+  - Warning stripe pattern for alert state
+  - CRT phosphor glow on traces
+
+  Usage:
+    <MFDPanel id="scope-1" module="scope" size="2x2" palette="phosphor" label="TRACE-01">
+      {#snippet overlay()}
+        <span class="readout">42.7</span>
+      {/snippet}
+    </MFDPanel>
+  ═══════════════════════════════════════════════════════════════════════════
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { MFDModuleType, MFDSize, PaletteName } from './types';
+  import { getPalette, rgbToCSS } from './palette';
+  import { mfd as getMfd } from './pipeline/store.svelte';
+
+  type Props = {
+    id: string;
+    module: MFDModuleType;
+    size?: MFDSize;
+    palette?: PaletteName;
+    label?: string;
+    sublabel?: string;
+    intensity?: number;
+    params?: [number, number, number, number];
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+  };
+
+  let {
+    id,
+    module,
+    size = '2x2',
+    palette = 'phosphor',
+    label = '',
+    sublabel = '',
+    intensity = 1.0,
+    params = [0, 0, 0, 0],
+    overlay,
+    class: extraClass = '',
+    alert = false,
+  }: Props = $props();
+
+  let viewportEl: HTMLElement | undefined = $state();
+
+  const pal = $derived(() => getPalette(palette));
+  const isInitialized = $derived.by(() => mfd.initialized);
+
+  // Gate ALL pipeline interactions on isInitialized. MFDPanels can
+  // mount before mfd.init() has been called (the overlay div might
+  // not exist yet). Without this gate, register/bind silently no-op
+  // and the pipeline never learns about the panel.
+  $effect(() => {
+    if (!isInitialized) return;
+    mfd.register(id, module, size, palette);
+    return () => mfd.unregister(id);
+  });
+
+  $effect(() => {
+    if (!isInitialized) return;
+    if (viewportEl) mfd.bindElement(id, viewportEl);
+  });
+
+  $effect(() => { if (isInitialized) mfd.setParams(id, params); });
+  $effect(() => { if (isInitialized) mfd.setIntensity(id, intensity); });
+  $effect(() => { if (isInitialized) mfd.setPalette(id, palette); });
+  const mfd = getMfd();
+</script>
+{#if mfd.error}<p role="alert">{mfd.error}</p>{/if}
+
+<div
+  class="mfd-panel {extraClass}"
+  class:mfd-alert={alert}
+  style:--mfd-primary={rgbToCSS(pal().primary)}
+  style:--mfd-accent={rgbToCSS(pal().accent)}
+  style:--mfd-dim={rgbToCSS(pal().dim)}
+  style:--mfd-grid={rgbToCSS(pal().grid)}
+  style:--mfd-glow={rgbToCSS(pal().glow)}
+  style:--mfd-bg={rgbToCSS(pal().bg)}
+>
+  <div class="mfd-bezel">
+    {#if alert}
+      <div class="mfd-warning-stripes"></div>
+    {/if}
+
+    <div class="mfd-face">
+      <div class="mfd-chrome-top">
+        <div class="mfd-chrome-inner">
+          {#if label}
+            <span class="mfd-label">{label}</span>
+          {/if}
+          {#if sublabel}
+            <span class="mfd-sublabel">{sublabel}</span>
+          {/if}
+        </div>
+        <div class="mfd-corner-mark tl"></div>
+        <div class="mfd-corner-mark tr"></div>
+      </div>
+
+      <div class="mfd-viewport-wrap">
+        <div class="mfd-viewport-bezel">
+          <div class="mfd-viewport" bind:this={viewportEl}>
+            {#if !isInitialized}
+              <div class="mfd-no-gl">NO SIGNAL</div>
+            {/if}
+            {#if overlay}
+              <div class="mfd-overlay">
+                {@render overlay()}
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <div class="mfd-chrome-bottom">
+        <div class="mfd-chrome-inner">
+          <div class="mfd-status-dot"></div>
+        </div>
+        <div class="mfd-corner-mark bl"></div>
+        <div class="mfd-corner-mark br"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .mfd-panel {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .mfd-bezel {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border-radius: 2px;
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.7),
+      0 2px 8px rgba(0, 0, 0, 0.5),
+      0 0 1px var(--mfd-glow, rgba(0,200,80,0.3)),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    padding: 3px;
+    overflow: hidden;
+  }
+
+  .mfd-alert .mfd-warning-stripes {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0.18;
+    background: repeating-linear-gradient(
+      -45deg,
+      #ff6a18 0px,
+      #ff6a18 4px,
+      #1a1a1a 4px,
+      #1a1a1a 10px
+    );
+    border-radius: 2px;
+    animation: nerv-alarm-pulse 1.4s ease-in-out infinite;
+  }
+
+  @keyframes nerv-alarm-pulse {
+    0%, 100% { opacity: 0.12; }
+    50%       { opacity: 0.28; }
+  }
+
+  .mfd-face {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    border-radius: 1px;
+    box-shadow:
+      inset 0 0 0 1px rgba(0, 0, 0, 0.8),
+      inset 0 2px 8px rgba(0, 0, 0, 0.6),
+      inset 0 0 20px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+  }
+
+  .mfd-chrome-top,
+  .mfd-chrome-bottom {
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+    background:
+      linear-gradient(180deg,
+        rgba(50, 58, 44, 0.7) 0%,
+        rgba(28, 34, 24, 0.85) 60%,
+        rgba(18, 22, 14, 0.9) 100%
+      );
+    border: 1px solid rgba(80, 96, 72, 0.3);
+    min-height: 22px;
+  }
+
+  .mfd-chrome-top {
+    box-shadow:
+      inset 0 1px 0 rgba(120, 140, 100, 0.12),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.4),
+      0 1px 0 rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(60, 72, 48, 0.4);
+  }
+
+  .mfd-chrome-bottom {
+    box-shadow:
+      inset 0 -1px 0 rgba(120, 140, 100, 0.06),
+      inset 0 1px 0 rgba(0, 0, 0, 0.4),
+      0 -1px 0 rgba(0, 0, 0, 0.3);
+    border-top: 1px solid rgba(60, 72, 48, 0.4);
+  }
+
+  .mfd-chrome-inner {
+    position: relative;
+    height: 100%;
+    min-height: 20px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    gap: 10px;
+  }
+
+  .mfd-label {
+    font-family: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--mfd-primary);
+    text-shadow:
+      0 0 6px var(--mfd-glow, rgba(0,200,80,0.5)),
+      0 0 2px var(--mfd-glow, rgba(0,200,80,0.8));
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+    filter: brightness(1.1);
+  }
+
+  .mfd-sublabel {
+    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
+    font-size: 8px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--mfd-dim);
+    white-space: nowrap;
+    text-shadow: 0 0 3px var(--mfd-dim, rgba(0,100,40,0.4));
+  }
+
+  .mfd-corner-mark {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+  }
+
+  .mfd-corner-mark.tl {
+    top: 3px; left: 3px;
+    border-top: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+    border-left: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+  }
+  .mfd-corner-mark.tr {
+    top: 3px; right: 3px;
+    border-top: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+    border-right: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+  }
+  .mfd-corner-mark.bl {
+    bottom: 3px; left: 3px;
+    border-bottom: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+    border-left: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+  }
+  .mfd-corner-mark.br {
+    bottom: 3px; right: 3px;
+    border-bottom: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+    border-right: 2px solid var(--mfd-grid, rgba(0,180,60,0.5));
+  }
+
+  .mfd-alert .mfd-corner-mark.tl,
+  .mfd-alert .mfd-corner-mark.bl { border-left-color: var(--accent-hot, #ff6420); }
+  .mfd-alert .mfd-corner-mark.tr,
+  .mfd-alert .mfd-corner-mark.br { border-right-color: var(--accent-hot, #ff6420); }
+  .mfd-alert .mfd-corner-mark.tl,
+  .mfd-alert .mfd-corner-mark.tr { border-top-color: var(--accent-hot, #ff6420); }
+  .mfd-alert .mfd-corner-mark.bl,
+  .mfd-alert .mfd-corner-mark.br { border-bottom-color: var(--accent-hot, #ff6420); }
+
+  .mfd-viewport-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: 2px 3px;
+  }
+
+  .mfd-viewport-bezel {
+    flex: 1;
+    background: transparent;
+    border-radius: 1px;
+    box-shadow:
+      inset 0 0 0 1px rgba(0, 0, 0, 0.9),
+      inset 0 0 8px rgba(0, 0, 0, 0.7),
+      inset 0 1px 2px rgba(0, 0, 0, 0.8),
+      inset 0 1px 0 rgba(80, 96, 72, 0.06);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mfd-viewport {
+    flex: 1;
+    position: relative;
+    background: transparent;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .mfd-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mfd-overlay :global(*) {
+    pointer-events: auto;
+  }
+
+  .mfd-no-gl {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 9px;
+    letter-spacing: 0.2em;
+    color: var(--mfd-dim, rgba(40, 60, 40, 0.5));
+    text-shadow: 0 0 4px currentColor;
+  }
+
+  .mfd-status-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--mfd-primary);
+    box-shadow:
+      0 0 4px var(--mfd-glow),
+      0 0 2px var(--mfd-glow);
+    opacity: 0.7;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { MFDModuleType, MFDSize, PaletteName } from './types';
+type Props = {
+    id: string;
+    module: MFDModuleType;
+    size?: MFDSize;
+    palette?: PaletteName;
+    label?: string;
+    sublabel?: string;
+    intensity?: number;
+    params?: [number, number, number, number];
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+};
+declare const MFDPanel: import("svelte").Component<Props, {}, "">;
+type MFDPanel = ReturnType<typeof MFDPanel>;
+export default MFDPanel;
+//# sourceMappingURL=MFDPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MFDPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/mfd/MFDPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAKjE,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,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,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAoGJ,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/viz/mfd/MFDScope.svelte

@@ -0,0 +1,59 @@
+<!--
+  MFDScope — Oscilloscope trace display
+  Green phosphor waveform with grid reticle, trigger line, and phosphor trail.
+-->
+<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;
+    lineWidth?: number;
+    trail?: number;
+    triggerLevel?: number;
+    gridDensity?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+  };
+
+  let {
+    id,
+    size = '2x1',
+    palette = 'phosphor',
+    label = 'SCOPE',
+    sublabel = '',
+    intensity = 1.0,
+    lineWidth = 2.0,
+    trail = 0.3,
+    triggerLevel = 0,
+    gridDensity = 1.0,
+    overlay,
+    class: extraClass = '',
+    alert = false,
+  }: Props = $props();
+
+  const params = $derived<[number, number, number, number]>(
+    [lineWidth, trail, triggerLevel, gridDensity],
+  );
+</script>
+
+<MFDPanel
+  {id}
+  module="scope"
+  {size}
+  {palette}
+  {label}
+  {sublabel}
+  {intensity}
+  {params}
+  {overlay}
+  class={extraClass}
+  {alert}
+/>

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

@@ -0,0 +1,21 @@
+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;
+    lineWidth?: number;
+    trail?: number;
+    triggerLevel?: number;
+    gridDensity?: number;
+    overlay?: Snippet;
+    class?: string;
+    alert?: boolean;
+};
+declare const MFDScope: import("svelte").Component<Props, {}, "">;
+type MFDScope = ReturnType<typeof MFDScope>;
+export default MFDScope;
+//# sourceMappingURL=MFDScope.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MFDScope.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/mfd/MFDScope.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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAiCJ,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}