@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/Stage/components/ParticleSystem/ParticleSystem.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T, useTask, useLoader } from '@threlte/core';
+  import { ParticleData } from './types';
+  import type { ParticleSystemProps } from './types';
+  import { RNG } from './rng';
+
+  import fragmentShader from '../../shaders/Particles.frag?raw';
+  import vertexShader from '../../shaders/Particles.vert?raw';
+  import { DEG2RAD } from 'three/src/math/MathUtils';
+  import { onDestroy, untrack } from 'svelte';
+
+  interface Props {
+    props: ParticleSystemProps;
+    opacity?: number;
+    intensity?: number;
+  }
+
+  const { props, opacity, intensity }: Props = $props();
+
+  let mesh: THREE.Mesh | undefined = $state(undefined);
+  let geometry: THREE.BufferGeometry | undefined = $state(undefined);
+
+  $effect.pre(() => {
+    const rng = new RNG(0);
+    const count = Math.round(props.maxParticleCount * (intensity ?? 1));
+
+    // Initialize particle attributes - 4 vertices per quad
+    const positions = new Float32Array(count * 12); // 4 vertices * 3 coords
+    const centers = new Float32Array(count * 8); // 1 center * 2 coords
+    const uvs = new Float32Array(count * 8); // 4 vertices * 2 coords
+    const indices = new Uint32Array(count * 6); // 2 triangles * 3 vertices
+    const ageOffsets = new Float32Array(count * 4); // 4 vertices
+
+    const particle = ParticleData[props.type];
+
+    // Initialize particles
+    for (let i = 0; i < count; i++) {
+      const radius = rng.random() * (props.spawnArea.maxRadius - props.spawnArea.minRadius) + props.spawnArea.minRadius;
+      const angle = rng.random() * 2 * Math.PI;
+      const x = radius * Math.cos(angle);
+      const y = radius * Math.sin(angle);
+      const z = -1.001;
+
+      // Quad vertex positions (same for all 4 corners initially)
+      const baseIdx = i * 12;
+
+      // Generate random size for this particle
+      let size = rng.random() * (props.size.max - props.size.min) + props.size.min;
+      let width = size * props.scale.x;
+      let height = size * props.scale.y;
+
+      const rotation = new THREE.Euler(0, 0, props.rotation.offset * DEG2RAD);
+      rotation.z += props.rotation.alignRadially ? angle : 0;
+      rotation.z += props.rotation.randomize ? rng.random() * 360 : 0;
+
+      const v1 = new THREE.Vector3(-width / 2, -height / 2, 0);
+      const v2 = new THREE.Vector3(width / 2, -height / 2, 0);
+      const v3 = new THREE.Vector3(-width / 2, height / 2, 0);
+      const v4 = new THREE.Vector3(width / 2, height / 2, 0);
+
+      v1.applyEuler(rotation);
+      v2.applyEuler(rotation);
+      v3.applyEuler(rotation);
+      v4.applyEuler(rotation);
+
+      v1.add(new THREE.Vector3(x, y, z));
+      v2.add(new THREE.Vector3(x, y, z));
+      v3.add(new THREE.Vector3(x, y, z));
+      v4.add(new THREE.Vector3(x, y, z));
+
+      // Set quad corners with size offset
+      positions[baseIdx] = v1.x; // Bottom left x
+      positions[baseIdx + 1] = v1.y; // Bottom left y
+      positions[baseIdx + 2] = v1.z; // Bottom left z
+
+      positions[baseIdx + 3] = v2.x; // Bottom right x
+      positions[baseIdx + 4] = v2.y; // Bottom right y
+      positions[baseIdx + 5] = v2.z; // Bottom right z
+
+      positions[baseIdx + 6] = v3.x; // Top left x
+      positions[baseIdx + 7] = v3.y; // Top left y
+      positions[baseIdx + 8] = v3.z; // Top left z
+
+      positions[baseIdx + 9] = v4.x; // Top right x
+      positions[baseIdx + 10] = v4.y; // Top right y
+      positions[baseIdx + 11] = v4.z; // Top right z
+
+      // Set center position
+      const centerIdx = i * 8;
+      centers[centerIdx] = x;
+      centers[centerIdx + 1] = y;
+      centers[centerIdx + 2] = x;
+      centers[centerIdx + 3] = y;
+      centers[centerIdx + 4] = x;
+      centers[centerIdx + 5] = y;
+      centers[centerIdx + 6] = x;
+      centers[centerIdx + 7] = y;
+
+      // Calculate random frame from texture atlas
+      const frame = Math.floor(rng.random() * (particle.columns * particle.rows));
+      const col = frame % particle.columns;
+      const row = Math.floor(frame / particle.columns);
+
+      // Calculate UV coordinates for this frame
+      const uv0 = new THREE.Vector2(col / particle.columns, row / particle.rows);
+      const uv1 = new THREE.Vector2((col + 1) / particle.columns, (row + 1) / particle.rows);
+
+      // UV coordinates for quad
+      const uvBaseIdx = i * 8;
+      uvs[uvBaseIdx] = uv0.x; // bottom left
+      uvs[uvBaseIdx + 1] = uv0.y;
+      uvs[uvBaseIdx + 2] = uv1.x; // bottom right
+      uvs[uvBaseIdx + 3] = uv0.y;
+      uvs[uvBaseIdx + 4] = uv0.x; // top left
+      uvs[uvBaseIdx + 5] = uv1.y;
+      uvs[uvBaseIdx + 6] = uv1.x; // top right
+      uvs[uvBaseIdx + 7] = uv1.y;
+
+      // Indices for two triangles
+      const indexBaseIdx = i * 6;
+      const vertexBaseIdx = i * 4;
+      indices[indexBaseIdx] = vertexBaseIdx;
+      indices[indexBaseIdx + 1] = vertexBaseIdx + 1;
+      indices[indexBaseIdx + 2] = vertexBaseIdx + 2;
+      indices[indexBaseIdx + 3] = vertexBaseIdx + 1;
+      indices[indexBaseIdx + 4] = vertexBaseIdx + 3;
+      indices[indexBaseIdx + 5] = vertexBaseIdx + 2;
+
+      // Random attributes (same for all vertices of quad)
+      const ageOffset = rng.random() * props.lifetime;
+
+      for (let v = 0; v < 4; v++) {
+        ageOffsets[i * 4 + v] = ageOffset;
+      }
+    }
+
+    untrack(() => {
+      geometry = new THREE.BufferGeometry();
+      geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+      geometry.setAttribute('center', new THREE.BufferAttribute(centers, 2));
+      geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));
+      geometry.setAttribute('ageOffset', new THREE.BufferAttribute(ageOffsets, 1));
+      geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+    });
+
+    return () => {
+      geometry?.dispose();
+    };
+  });
+
+  const material = new THREE.ShaderMaterial();
+  const loader = useLoader(THREE.TextureLoader);
+
+  // Track current texture for disposal
+  let currentTexture: THREE.Texture | null = $state(null);
+
+  // Add cleanup on component destruction
+  onDestroy(() => {
+    geometry?.dispose();
+    if (currentTexture) {
+      currentTexture.dispose();
+      currentTexture = null;
+    }
+  });
+
+  // Create a derived value for uniforms that updates when props change
+  const uniforms = $derived({
+    uTime: { value: 0 },
+    uTexture: { value: currentTexture },
+    uOpacity: { value: opacity },
+    uColor: { value: new THREE.Color(props.color) },
+
+    uLifetime: { value: props.lifetime },
+    uAngularVelocity: { value: props.rotation.velocity },
+    uInitialVelocity: { value: props.initialVelocity },
+    uLinearForceAmplitude: { value: props.force.linear },
+    uExponentialForceAmplitude: { value: props.force.exponential },
+    uSinusoidalForceAmplitude: { value: props.force.sinusoidal.amplitude },
+    uSinusoidalForceFrequency: { value: props.force.sinusoidal.frequency },
+    uFadeInTime: { value: props.fadeInTime },
+    uFadeOutTime: { value: props.fadeOutTime },
+    uScale: { value: props.scale }
+  });
+
+  $effect(() => {
+    loader.load(ParticleData[props.type].url).then((newTexture) => {
+      untrack(() => {
+        currentTexture?.dispose();
+        currentTexture = newTexture;
+
+        if (material.uniforms.uTexture) {
+          material.uniforms.uTexture.value = newTexture;
+        }
+      });
+    });
+  });
+
+  // Update material uniforms whenever they change
+  $effect(() => {
+    Object.assign(material.uniforms, uniforms);
+  });
+
+  useTask((dt) => {
+    material.uniforms.uTime.value += dt;
+  });
+</script>
+
+<T.Mesh bind:ref={mesh} {geometry}>
+  <T.ShaderMaterial
+    is={material}
+    {vertexShader}
+    {fragmentShader}
+    transparent={true}
+    depthWrite={false}
+    depthTest={false}
+    blending={THREE.NormalBlending}
+    side={THREE.DoubleSide}
+  />
+</T.Mesh>

package/src/lib/components/Stage/components/ParticleSystem/rng.js

@@ -0,0 +1,20 @@
+export class RNG {
+  m_w = 123456789;
+  m_z = 987654321;
+  mask = 0xffffffff;
+
+  constructor(seed) {
+    this.m_w = (123456789 + seed) & this.mask;
+    this.m_z = (987654321 - seed) & this.mask;
+  }
+
+  // Returns number between 0 (inclusive) and 1.0 (exclusive),
+  // just like Math.random().
+  random() {
+    this.m_z = (36969 * (this.m_z & 65535) + (this.m_z >> 16)) & this.mask;
+    this.m_w = (18000 * (this.m_w & 65535) + (this.m_w >> 16)) & this.mask;
+    let result = ((this.m_z << 16) + (this.m_w & 65535)) >>> 0;
+    result /= 4294967296;
+    return result;
+  }
+}

package/src/lib/components/Stage/components/ParticleSystem/types.ts

@@ -0,0 +1,95 @@
+import ash from './particles/atlases/ash.png';
+import leaves from './particles/atlases/leaves.png';
+import rain from './particles/atlases/rain.png';
+import snow from './particles/atlases/snow.png';
+
+export enum ParticleType {
+  Snow = 1,
+  Rain = 2,
+  Leaves = 3,
+  Ash = 4
+}
+
+export const ParticleData = {
+  [ParticleType.Snow]: {
+    url: snow,
+    size: 768,
+    columns: 3,
+    rows: 3
+  },
+  [ParticleType.Rain]: {
+    url: rain,
+    size: 768,
+    columns: 3,
+    rows: 3
+  },
+  [ParticleType.Leaves]: {
+    url: leaves,
+    size: 768,
+    columns: 3,
+    rows: 3
+  },
+  [ParticleType.Ash]: {
+    url: ash,
+    size: 768,
+    columns: 3,
+    rows: 3
+  }
+} as const;
+
+export interface ParticleSystemProps {
+  maxParticleCount: number;
+  type: ParticleType;
+  lifetime: number;
+  color: string;
+  opacity: number;
+  fadeInTime: number;
+  fadeOutTime: number;
+  initialVelocity: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  force: {
+    linear: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    exponential: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    sinusoidal: {
+      amplitude: {
+        x: number;
+        y: number;
+        z: number;
+      };
+      frequency: {
+        x: number;
+        y: number;
+        z: number;
+      };
+    };
+  };
+  rotation: {
+    alignRadially: boolean;
+    offset: number;
+    velocity: number;
+    randomize: boolean;
+  };
+  scale: {
+    x: number;
+    y: number;
+  };
+  size: {
+    min: number;
+    max: number;
+  };
+  spawnArea: {
+    minRadius: number;
+    maxRadius: number;
+  };
+}

package/src/lib/components/Stage/components/PerformanceDebugger/PerformanceDebugger.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import PerformanceOverlay from '../PerformanceOverlay/PerformanceOverlay.svelte';
+  import { resetMetrics } from '../../helpers/performanceMetrics.svelte';
+  import { debugState, setDebugEnabled } from '../../helpers/debugState.svelte';
+
+  interface Props {
+    /** Key combination to toggle (default: F9) */
+    shortcut?: string;
+    /** Callback when debug state changes (optional, for external notification) */
+    onToggle?: (enabled: boolean) => void;
+    /** Disabled layers for A/B testing */
+    disabledLayers?: string[];
+  }
+
+  const { shortcut = 'F9', onToggle, disabledLayers = [] }: Props = $props();
+
+  let showHelp = $state(false);
+
+  // Use the global debug state
+  const enabled = $derived(debugState.enableMetrics);
+
+  const parseShortcut = (shortcut: string) => {
+    const parts = shortcut.split('+').map((p) => p.trim());
+    const modifiers = ['shift', 'ctrl', 'control', 'alt', 'meta', 'cmd'];
+    const keyPart = parts.find((p) => !modifiers.includes(p.toLowerCase())) || '';
+
+    return {
+      shift: parts.some((p) => p.toLowerCase() === 'shift'),
+      ctrl: parts.some((p) => p.toLowerCase() === 'ctrl' || p.toLowerCase() === 'control'),
+      alt: parts.some((p) => p.toLowerCase() === 'alt'),
+      meta: parts.some((p) => p.toLowerCase() === 'meta' || p.toLowerCase() === 'cmd'),
+      // Preserve case for function keys (F9, F10, etc.)
+      key: keyPart.match(/^[fF]\d+$/) ? keyPart.toUpperCase() : keyPart.toLowerCase()
+    };
+  };
+
+  const shortcutConfig = parseShortcut(shortcut);
+
+  const formatShortcut = () => {
+    const parts = [];
+    if (shortcutConfig.shift) parts.push('Shift');
+    if (shortcutConfig.ctrl) parts.push('Ctrl');
+    if (shortcutConfig.alt) parts.push('Alt');
+    if (shortcutConfig.meta) parts.push('Cmd');
+    // Function keys display as-is (F9), others uppercase
+    parts.push(shortcutConfig.key.match(/^F\d+$/) ? shortcutConfig.key : shortcutConfig.key.toUpperCase());
+    return parts.join(' + ');
+  };
+
+  const isFormElement = (element: Element | null): boolean => {
+    if (!element) return false;
+    const tagName = element.tagName;
+    return (
+      tagName === 'INPUT' ||
+      tagName === 'TEXTAREA' ||
+      tagName === 'SELECT' ||
+      (element as HTMLElement).isContentEditable
+    );
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Don't trigger while typing in form elements
+    if (isFormElement(document.activeElement)) return;
+
+    // Function keys (F1-F12) are case-sensitive in e.key, others we compare lowercase
+    const isFunctionKey = shortcutConfig.key.match(/^F\d+$/);
+    const keyMatches = isFunctionKey ? e.key === shortcutConfig.key : e.key.toLowerCase() === shortcutConfig.key;
+
+    const matchesShortcut =
+      e.shiftKey === shortcutConfig.shift &&
+      e.ctrlKey === shortcutConfig.ctrl &&
+      e.altKey === shortcutConfig.alt &&
+      e.metaKey === shortcutConfig.meta &&
+      keyMatches;
+
+    if (matchesShortcut) {
+      e.preventDefault();
+      const newEnabled = !debugState.enableMetrics;
+      setDebugEnabled(newEnabled);
+      onToggle?.(newEnabled);
+
+      if (newEnabled) {
+        resetMetrics();
+        showHelp = true;
+        setTimeout(() => (showHelp = false), 2000);
+      }
+    }
+  };
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  });
+
+  /** Get debug props to spread into Stage props */
+  export const getDebugProps = () => ({
+    enableStats: debugState.enableMetrics,
+    loggingRate: 1000,
+    enableMetrics: debugState.enableMetrics,
+    logMetricsToConsole: debugState.logMetricsToConsole,
+    disabledLayers
+  });
+</script>
+
+{#if enabled}
+  <PerformanceOverlay visible={true} {disabledLayers} />
+{/if}
+
+{#if showHelp}
+  <div class="performanceDebugger__help">
+    Performance metrics enabled. Press {formatShortcut()} to disable.
+  </div>
+{/if}
+
+<style>
+  .performanceDebugger__help {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--fg);
+    color: var(--bg);
+    font-family: var(--font-sans);
+    font-size: 0.75rem;
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-2);
+    z-index: 1000;
+    pointer-events: none;
+    animation: performanceDebuggerFadeIn 0.2s var(--ease-out-3);
+  }
+
+  @keyframes performanceDebuggerFadeIn {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+</style>

package/src/lib/components/Stage/components/PerformanceDebugger/index.ts

@@ -0,0 +1 @@
+export { default as PerformanceDebugger } from './PerformanceDebugger.svelte';

package/src/lib/components/Stage/components/PerformanceOverlay/PerformanceOverlay.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import {
+    performanceMetrics,
+    getAverageFps,
+    get1PercentLowFps,
+    getFrameTimes
+  } from '../../helpers/performanceMetrics.svelte';
+
+  interface Props {
+    visible?: boolean;
+    disabledLayers?: string[];
+  }
+
+  const { visible = true, disabledLayers = [] }: Props = $props();
+
+  const metrics = $derived(performanceMetrics.value);
+  const frameTimes = $derived(getFrameTimes());
+  const avgFps = $derived(getAverageFps());
+  const lowFps = $derived(get1PercentLowFps());
+
+  // Graph dimensions
+  const GRAPH_WIDTH = 200;
+  const GRAPH_HEIGHT = 60;
+  const MAX_FRAME_TIME = 50; // Cap at 50ms (20fps) for graph scale
+
+  // Generate SVG path for frame time graph
+  const graphPath = $derived(() => {
+    if (frameTimes.length < 2) return '';
+
+    const points = frameTimes.map((ft, i) => {
+      const x = (i / (frameTimes.length - 1)) * GRAPH_WIDTH;
+      const y = GRAPH_HEIGHT - Math.min(ft / MAX_FRAME_TIME, 1) * GRAPH_HEIGHT;
+      return `${x},${y}`;
+    });
+
+    return `M${points.join(' L')}`;
+  });
+
+  // Color based on FPS
+  const fpsColor = $derived(() => {
+    const fps = metrics.fps;
+    if (fps >= 55) return 'var(--fgSuccess)';
+    if (fps >= 30) return 'var(--fgWarning)';
+    return 'var(--fgDanger)';
+  });
+</script>
+
+{#if visible}
+  <div class="perfOverlay">
+    <div class="perfOverlay__header">Performance</div>
+
+    <div class="perfOverlay__section">
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">FPS</span>
+        <span class="perfOverlay__value" style="color: {fpsColor()}">{metrics.fps.toFixed(0)}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Avg</span>
+        <span class="perfOverlay__value">{avgFps.toFixed(0)}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">1% Low</span>
+        <span class="perfOverlay__value">{lowFps.toFixed(0)}</span>
+      </div>
+    </div>
+
+    <div class="perfOverlay__graph">
+      <svg width={GRAPH_WIDTH} height={GRAPH_HEIGHT} class="perfOverlay__svg">
+        <!-- 60fps line (16.67ms) -->
+        <line
+          x1="0"
+          y1={GRAPH_HEIGHT - (16.67 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          x2={GRAPH_WIDTH}
+          y2={GRAPH_HEIGHT - (16.67 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          stroke="var(--fgSuccess)"
+          stroke-opacity="0.3"
+          stroke-width="1"
+          stroke-dasharray="4,4"
+        />
+        <!-- 30fps line (33.33ms) -->
+        <line
+          x1="0"
+          y1={GRAPH_HEIGHT - (33.33 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          x2={GRAPH_WIDTH}
+          y2={GRAPH_HEIGHT - (33.33 / MAX_FRAME_TIME) * GRAPH_HEIGHT}
+          stroke="var(--fgWarning)"
+          stroke-opacity="0.3"
+          stroke-width="1"
+          stroke-dasharray="4,4"
+        />
+        <!-- Frame time path -->
+        <path d={graphPath()} fill="none" stroke="var(--fgPrimary)" stroke-width="1.5" />
+      </svg>
+    </div>
+
+    <div class="perfOverlay__section">
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Frame</span>
+        <span class="perfOverlay__value">{metrics.frameTime.toFixed(2)}ms</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Composer</span>
+        <span class="perfOverlay__value">{metrics.composerTime.toFixed(2)}ms</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Overlay</span>
+        <span class="perfOverlay__value">{metrics.overlayTime.toFixed(2)}ms</span>
+      </div>
+    </div>
+
+    <div class="perfOverlay__section">
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Draw calls</span>
+        <span class="perfOverlay__value">{metrics.drawCalls}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Triangles</span>
+        <span class="perfOverlay__value">{metrics.triangles}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Textures</span>
+        <span class="perfOverlay__value">{metrics.textures}</span>
+      </div>
+      <div class="perfOverlay__row">
+        <span class="perfOverlay__label">Geometries</span>
+        <span class="perfOverlay__value">{metrics.geometries}</span>
+      </div>
+    </div>
+
+    {#if disabledLayers.length > 0}
+      <div class="perfOverlay__section">
+        <div class="perfOverlay__sublabel">Disabled layers</div>
+        {#each disabledLayers as layer}
+          <div class="perfOverlay__disabledLayer">{layer}</div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .perfOverlay {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    background: rgba(0, 0, 0, 0.85);
+    color: var(--fg);
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    padding: 0.5rem;
+    border-radius: var(--radius-2);
+    z-index: 1000;
+    pointer-events: none;
+    min-width: 14rem;
+  }
+
+  .perfOverlay__header {
+    font-weight: var(--font-weight-7);
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--fgMuted);
+  }
+
+  .perfOverlay__section {
+    margin-bottom: 0.5rem;
+  }
+
+  .perfOverlay__section:last-child {
+    margin-bottom: 0;
+  }
+
+  .perfOverlay__row {
+    display: flex;
+    justify-content: space-between;
+    line-height: var(--font-lineheight-2);
+  }
+
+  .perfOverlay__label {
+    color: var(--fgMuted);
+  }
+
+  .perfOverlay__value {
+    font-weight: var(--font-weight-5);
+  }
+
+  .perfOverlay__sublabel {
+    color: var(--fgMuted);
+    font-size: 0.625rem;
+    margin-bottom: 0.125rem;
+  }
+
+  .perfOverlay__disabledLayer {
+    color: var(--fgWarning);
+    font-size: 0.625rem;
+    padding-left: 0.5rem;
+  }
+
+  .perfOverlay__graph {
+    margin: 0.5rem 0;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-1);
+    overflow: hidden;
+  }
+
+  .perfOverlay__svg {
+    display: block;
+  }
+</style>

package/src/lib/components/Stage/components/PerformanceOverlay/index.ts

@@ -0,0 +1 @@
+export { default as PerformanceOverlay } from './PerformanceOverlay.svelte';