@tableslayer/ui 0.1.4 → 0.1.5

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

@@ -1,220 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,144 +0,0 @@
-<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

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

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

@@ -1,208 +0,0 @@
-<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

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