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

package/dist/svelte/viz/DescriptorPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type RunPanelSource } from '@vibesdotdev/runnable/panels';
+import type { RunArtifactWrite } from '@vibesdotdev/runnable/events';
+import type { CrystalBonds } from './crystal/types';
+type $$ComponentProps = {
+    descriptor: object;
+    runId: string;
+    source?: RunPanelSource;
+    /** Legacy metric-only callers remain supported during shared-source cutover. */
+    metrics?: Record<string, number[]>;
+    artifacts?: RunArtifactWrite[];
+    liveCrystalBonds?: CrystalBonds | null;
+    runIsActive?: boolean;
+    origin?: string;
+};
+declare const DescriptorPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type DescriptorPanel = ReturnType<typeof DescriptorPanel>;
+export default DescriptorPanel;
+//# sourceMappingURL=DescriptorPanel.svelte.d.ts.map

package/dist/svelte/viz/DescriptorPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptorPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/viz/DescriptorPanel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAInD,KAAK,gBAAgB,GAAI;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6FH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/viz/crystal/Crystal3D.svelte

@@ -0,0 +1,137 @@
+<!--
+  ═══════════════════════════════════════════════════════════════
+  Crystal3D — FCC Lattice 3D Visualization
+
+  WebGL2 renderer for crystal lattice data:
+  - Nodes rendered as glowing sphere endpoints at bond vertices
+  - Bonds as instanced screen-space quads with MAGI-style shaders
+  - Auto-rotation, threshold filtering, glow intensity controls
+  - Stats overlay: FPS, node count, bond count, density %
+  - Empty state when no run selected
+  - Graceful WebGL context loss handling
+  ═══════════════════════════════════════════════════════════════
+-->
+<script lang="ts">
+  import Crystal3DRenderer from './Crystal3DRenderer.svelte';
+  import Crystal3DControls from './Crystal3DControls.svelte';
+  import Crystal3DStats from './Crystal3DStats.svelte';
+  import type { CrystalBonds, CrystalSlice, Crystal3DRendererStats, VfxTier } from './types';
+
+  type Props = {
+    crystalBonds: CrystalBonds | null;
+    sliceMap?: Record<number, CrystalSlice>;
+    N?: number;
+    vfxTier?: VfxTier;
+    class?: string;
+  };
+
+  let {
+    crystalBonds,
+    sliceMap = {},
+    N = 0,
+    vfxTier = 'medium',
+    class: className = '',
+  }: Props = $props();
+
+  let autoRotate = $state(true);
+  let threshold = $state(0);
+  let glowIntensity = $state(0.6);
+  let zLayer = $state(-1);
+
+  let stats = $state<Crystal3DRendererStats>({
+    nodes: 0,
+    bonds: 0,
+    avgStrength: 0,
+    maxStrength: 0,
+    density: 0,
+    dataPass: 0,
+    dataFrame: 0,
+    fps: 0,
+  });
+
+  function handleStats(next: Crystal3DRendererStats) {
+    stats = next;
+  }
+</script>
+
+<div class="crystal-panel {className}">
+  {#if crystalBonds || N > 0 || Object.keys(sliceMap).length > 0}
+    <div class="crystal-viewport">
+      <Crystal3DStats
+        nodes={stats.nodes}
+        bonds={stats.bonds}
+        density={stats.density}
+        fps={stats.fps}
+        dataPass={stats.dataPass}
+      />
+      <Crystal3DRenderer
+        {crystalBonds}
+        {sliceMap}
+        {N}
+        {threshold}
+        {autoRotate}
+        {glowIntensity}
+        {zLayer}
+        {vfxTier}
+        onStats={handleStats}
+      />
+    </div>
+
+    <Crystal3DControls
+      {autoRotate}
+      {threshold}
+      {glowIntensity}
+      {zLayer}
+      latticeSize={N}
+      onAutoRotateToggle={() => (autoRotate = !autoRotate)}
+      onThresholdChange={(v) => (threshold = v)}
+      onGlowChange={(v) => (glowIntensity = v)}
+      onZLayerChange={(v) => (zLayer = v)}
+    />
+  {:else}
+    <div class="empty-state">
+      <div class="empty-icon">
+        <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" opacity="0.3" />
+        </svg>
+      </div>
+      <span class="empty-text">Select a run to visualize crystal</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .crystal-panel {
+    background: var(--surface, rgba(16, 22, 18, 0.88));
+    border: 1px solid var(--border, rgba(0, 180, 90, 0.12));
+    border-radius: var(--radius-sm, 6px);
+    padding: 16px;
+    box-shadow:
+      var(--panel-shadow, 0 18px 44px rgba(0, 0, 0, 0.22)),
+      0 0 40px rgba(0, 180, 90, 0.04);
+  }
+
+  .crystal-viewport {
+    position: relative;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 60px 0;
+    color: var(--text-faint, #4a5a4c);
+  }
+
+  .empty-icon {
+    opacity: 0.4;
+    color: var(--text-dim, #6b7b6e);
+  }
+
+  .empty-text {
+    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+    font-size: 13px;
+    letter-spacing: 0.04em;
+  }
+</style>

package/dist/svelte/viz/crystal/Crystal3D.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { CrystalBonds, CrystalSlice, VfxTier } from './types';
+type Props = {
+    crystalBonds: CrystalBonds | null;
+    sliceMap?: Record<number, CrystalSlice>;
+    N?: number;
+    vfxTier?: VfxTier;
+    class?: string;
+};
+declare const Crystal3D: import("svelte").Component<Props, {}, "">;
+type Crystal3D = ReturnType<typeof Crystal3D>;
+export default Crystal3D;
+//# sourceMappingURL=Crystal3D.svelte.d.ts.map

package/dist/svelte/viz/crystal/Crystal3D.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Crystal3D.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/crystal/Crystal3D.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAA0B,OAAO,EAAE,MAAM,SAAS,CAAC;AAGzF,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACxC,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8DJ,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/viz/crystal/Crystal3DControls.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    autoRotate: boolean;
+    threshold: number;
+    glowIntensity: number;
+    zLayer: number;
+    latticeSize: number;
+    onAutoRotateToggle: () => void;
+    onThresholdChange: (value: number) => void;
+    onGlowChange: (value: number) => void;
+    onZLayerChange: (value: number) => void;
+    class?: string;
+    header?: Snippet;
+  };
+
+  let {
+    autoRotate,
+    threshold,
+    glowIntensity,
+    zLayer,
+    latticeSize,
+    onAutoRotateToggle,
+    onThresholdChange,
+    onGlowChange,
+    onZLayerChange,
+    class: className = '',
+    header,
+  }: Props = $props();
+
+  const maxZ = $derived(Math.max(0, latticeSize - 1));
+  const zLabel = $derived(zLayer < 0 ? 'ALL' : `${zLayer} / ${maxZ}`);
+</script>
+
+<div class="controls {className}">
+  {#if header}
+    <div class="controls-header">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class="control-row">
+    <button
+      class="ctrl-btn"
+      class:active={autoRotate}
+      onclick={onAutoRotateToggle}
+      title="Toggle auto-rotation"
+    >
+      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4">
+        <path d="M14 8A6 6 0 1 1 8 2" />
+        <path d="M14 2v4h-4" />
+      </svg>
+      <span>Rotate</span>
+    </button>
+
+    <label class="slider-group">
+      <span class="slider-label">
+        <span>Threshold</span>
+        <span class="slider-value">{Math.round(threshold * 100)}%</span>
+      </span>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        value={threshold}
+        oninput={(e) => onThresholdChange(parseFloat((e.target as HTMLInputElement).value))}
+        class="slider threshold-slider"
+      />
+    </label>
+
+    <label class="slider-group">
+      <span class="slider-label">
+        <span>Glow</span>
+        <span class="slider-value">{Math.round(glowIntensity * 100)}%</span>
+      </span>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        value={glowIntensity}
+        oninput={(e) => onGlowChange(parseFloat((e.target as HTMLInputElement).value))}
+        class="slider glow-slider"
+      />
+    </label>
+
+    {#if maxZ > 0}
+      <label class="slider-group">
+        <span class="slider-label">
+          <span>Z-Layer</span>
+          <span class="slider-value">{zLabel}</span>
+        </span>
+        <input
+          type="range"
+          min="-1"
+          max={maxZ}
+          step="1"
+          value={zLayer}
+          oninput={(e) => onZLayerChange(parseInt((e.target as HTMLInputElement).value, 10))}
+          class="slider zlayer-slider"
+        />
+      </label>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .controls {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px 0 0;
+  }
+
+  .controls-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0 4px;
+  }
+
+  .control-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .ctrl-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border: 1px solid rgba(0, 180, 90, 0.2);
+    border-radius: 4px;
+    background: rgba(0, 180, 90, 0.06);
+    color: var(--text-dim, #6b7b6e);
+    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+    font-size: 11px;
+    letter-spacing: 0.06em;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .ctrl-btn:hover {
+    background: rgba(0, 180, 90, 0.12);
+    border-color: rgba(0, 180, 90, 0.35);
+    color: var(--text-secondary, #8a9e8c);
+  }
+
+  .ctrl-btn.active {
+    background: rgba(0, 180, 90, 0.16);
+    border-color: rgba(0, 200, 100, 0.45);
+    color: #00c864;
+    box-shadow: 0 0 8px rgba(0, 200, 100, 0.12);
+  }
+
+  .slider-group {
+    flex: 1;
+    min-width: 100px;
+    max-width: 200px;
+  }
+
+  .slider-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-dim, #6b7b6e);
+    margin-bottom: 2px;
+  }
+
+  .slider-value {
+    color: var(--accent, #e0a030);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 3px;
+    border-radius: 2px;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 1px solid rgba(0, 180, 90, 0.3);
+  }
+
+  .slider::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+    border: 1px solid rgba(0, 180, 90, 0.3);
+  }
+
+  .threshold-slider {
+    background: linear-gradient(90deg, rgba(0, 180, 90, 0.3), rgba(224, 160, 48, 0.5));
+  }
+
+  .threshold-slider::-webkit-slider-thumb {
+    background: rgba(224, 160, 48, 0.8);
+    box-shadow: 0 0 6px rgba(224, 160, 48, 0.4);
+  }
+
+  .threshold-slider::-moz-range-thumb {
+    background: rgba(224, 160, 48, 0.8);
+    box-shadow: 0 0 6px rgba(224, 160, 48, 0.4);
+  }
+
+  .glow-slider {
+    background: linear-gradient(90deg, rgba(0, 180, 90, 0.15), rgba(0, 255, 128, 0.4));
+  }
+
+  .glow-slider::-webkit-slider-thumb {
+    background: rgba(0, 220, 100, 0.8);
+    box-shadow: 0 0 6px rgba(0, 220, 100, 0.4);
+  }
+
+  .glow-slider::-moz-range-thumb {
+    background: rgba(0, 220, 100, 0.8);
+    box-shadow: 0 0 6px rgba(0, 220, 100, 0.4);
+  }
+
+  .zlayer-slider {
+    background: linear-gradient(90deg, rgba(90, 160, 200, 0.15), rgba(90, 160, 200, 0.35));
+  }
+
+  .zlayer-slider::-webkit-slider-thumb {
+    background: rgba(90, 160, 200, 0.8);
+    box-shadow: 0 0 6px rgba(90, 160, 200, 0.4);
+  }
+
+  .zlayer-slider::-moz-range-thumb {
+    background: rgba(90, 160, 200, 0.8);
+    box-shadow: 0 0 6px rgba(90, 160, 200, 0.4);
+  }
+</style>

package/dist/svelte/viz/crystal/Crystal3DControls.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    autoRotate: boolean;
+    threshold: number;
+    glowIntensity: number;
+    zLayer: number;
+    latticeSize: number;
+    onAutoRotateToggle: () => void;
+    onThresholdChange: (value: number) => void;
+    onGlowChange: (value: number) => void;
+    onZLayerChange: (value: number) => void;
+    class?: string;
+    header?: Snippet;
+};
+declare const Crystal3DControls: import("svelte").Component<Props, {}, "">;
+type Crystal3DControls = ReturnType<typeof Crystal3DControls>;
+export default Crystal3DControls;
+//# sourceMappingURL=Crystal3DControls.svelte.d.ts.map

package/dist/svelte/viz/crystal/Crystal3DControls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Crystal3DControls.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/viz/crystal/Crystal3DControls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAuEJ,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}