@tableslayer/ui 0.0.1

package/dist/components/PropsTable/PropsTable.svelte

@@ -0,0 +1,107 @@
+<script>
+  import jsonData from '../../../../typedocgen.json';
+  import Markdown from '@magidoc/plugin-svelte-marked';
+  import { Table, Th, Td, Title, Spacer } from '@tableslayer/ui';
+  export let componentName = '';
+
+  const getComponentData = (componentName) => {
+    const component = jsonData.children.find(
+      (child) => child.name === componentName && child.variant === 'declaration'
+    );
+
+    if (!component) return null;
+
+    const props = jsonData.children.find((child) => child.name === `${componentName}Props`);
+
+    return props?.type ?? null;
+  };
+
+  const getPropsList = (type) => {
+    if (type?.type === 'intersection') {
+      // Handle intersection types (e.g., ButtonProps extending HTMLButtonAttributes)
+      return type.types?.filter((t) => t.type === 'reflection').flatMap((t) => t.declaration.children) || [];
+    }
+    if (type?.type === 'reflection') {
+      // Handle reflection types (e.g., ToolTipProps)
+      return type.declaration.children || [];
+    }
+    return [];
+  };
+
+  const getExtendedProps = (type) => {
+    if (type?.type === 'intersection') {
+      return (
+        type.types
+          ?.filter((t) => t.type === 'reference')
+          ?.map((t) => `${t.name}`)
+          .join(', ') || ''
+      );
+    }
+    return '';
+  };
+
+  const getComment = (prop) => {
+    return prop?.comment?.summary?.map((s) => s.text).join(' ') || '';
+  };
+
+  const getDefaultValue = (prop) => {
+    const defaultTag = prop?.comment?.blockTags?.find((tag) => tag.tag === '@default');
+    return defaultTag ? defaultTag.content[0]?.text || '' : '';
+  };
+
+  const componentType = getComponentData(componentName);
+  const extendedProps = getExtendedProps(componentType);
+  const propsList = getPropsList(componentType);
+</script>
+
+{#if componentType}
+  <Title as="h3" size="sm">{componentName} Properties</Title>
+  <Spacer size="0.5rem" />
+
+  {#if extendedProps}
+    <p>
+      <strong>Extends:</strong>
+      {extendedProps}
+    </p>
+    <Spacer />
+  {/if}
+
+  <Table>
+    <thead>
+      <tr>
+        <Th>Property</Th>
+        <Th>Type</Th>
+        <Th>Description</Th>
+        <Th>Default</Th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each propsList as prop}
+        <tr>
+          <Td>
+            <strong>
+              {prop.name}
+              {#if !prop.flags.isOptional}
+                *
+              {/if}
+            </strong>
+          </Td>
+          <Td>
+            {#if prop.type.type === 'intrinsic'}
+              {prop.type.name}
+            {/if}
+            {#if prop.type.type === 'union'}
+              {prop.type.types.map((type) => type.value || type.name).join(' | ')}
+            {:else if prop.type.type === 'reference'}
+              {prop.type.name}
+            {/if}
+          </Td>
+          <Td><Markdown source={getComment(prop)} /></Td>
+          <Td><Markdown source={getDefaultValue(prop)} /></Td>
+        </tr>
+      {/each}
+    </tbody>
+  </Table>
+{:else}
+  <p>No data available for {componentName}.</p>
+{/if}

package/dist/components/PropsTable/PropsTable.svelte.d.ts

@@ -0,0 +1,26 @@
+export default PropsTable;
+type PropsTable = SvelteComponent<{
+    componentName?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const PropsTable: $$__sveltets_2_IsomorphicComponent<{
+    componentName?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/RadialMenu/EffectPreview.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Canvas } from '@threlte/core';
+  import { AnnotationEffect } from '../Stage/components/AnnotationLayer/types';
+  import EffectPreviewScene from './EffectPreviewScene.svelte';
+
+  interface Props {
+    effectType: AnnotationEffect;
+    size?: string;
+    shape?: 'circle' | 'rounded';
+  }
+
+  const { effectType, size = '3rem', shape = 'circle' }: Props = $props();
+</script>
+
+<div class="effectPreview" class:effectPreview--rounded={shape === 'rounded'} style="width: {size}; height: {size};">
+  <Canvas>
+    <EffectPreviewScene {effectType} {shape} />
+  </Canvas>
+</div>
+
+<style>
+  .effectPreview {
+    border-radius: 50%;
+    overflow: hidden;
+    background: transparent;
+  }
+
+  .effectPreview--rounded {
+    border-radius: var(--radius-1);
+  }
+
+  .effectPreview :global(canvas) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+</style>

package/dist/components/RadialMenu/EffectPreview.svelte.d.ts

@@ -0,0 +1,9 @@
+import { AnnotationEffect } from '../Stage/components/AnnotationLayer/types';
+interface Props {
+    effectType: AnnotationEffect;
+    size?: string;
+    shape?: 'circle' | 'rounded';
+}
+declare const EffectPreview: import("svelte").Component<Props, {}, "">;
+type EffectPreview = ReturnType<typeof EffectPreview>;
+export default EffectPreview;

package/dist/components/RadialMenu/EffectPreviewScene.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T, useTask } from '@threlte/core';
+  import { AnnotationEffect, getDefaultEffectProps } from '../Stage/components/AnnotationLayer/types';
+
+  import annotationEffectsFragmentShader from '../Stage/shaders/AnnotationEffects.frag?raw';
+  import annotationVertexShader from '../Stage/shaders/default.vert?raw';
+
+  interface Props {
+    effectType: AnnotationEffect;
+    shape?: 'circle' | 'rounded';
+  }
+
+  const { effectType, shape = 'circle' }: Props = $props();
+
+  // Create circular mask texture with mipmaps
+  // Use 512x512 to match shader expectations for texSize calculations
+  const createCircularMaskTexture = (): THREE.DataTexture => {
+    const textureSize = 512;
+    const data = new Uint8Array(textureSize * textureSize * 4);
+
+    const center = textureSize / 2;
+    const radius = textureSize / 2 - 4; // Slight inset for smooth edges
+
+    for (let y = 0; y < textureSize; y++) {
+      for (let x = 0; x < textureSize; x++) {
+        const dx = x - center;
+        const dy = y - center;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        // Smooth anti-aliased edge
+        const edge = 1.0 - Math.max(0, Math.min(1, (dist - radius + 2) / 4));
+        const value = Math.floor(edge * 255);
+
+        const idx = (y * textureSize + x) * 4;
+        data[idx] = value;
+        data[idx + 1] = value;
+        data[idx + 2] = value;
+        data[idx + 3] = value;
+      }
+    }
+
+    const texture = new THREE.DataTexture(data, textureSize, textureSize, THREE.RGBAFormat);
+    texture.generateMipmaps = true;
+    texture.minFilter = THREE.LinearMipmapLinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    texture.needsUpdate = true;
+
+    return texture;
+  };
+
+  // Create rounded square mask texture with mipmaps
+  const createRoundedSquareMaskTexture = (): THREE.DataTexture => {
+    const textureSize = 512;
+    const data = new Uint8Array(textureSize * textureSize * 4);
+
+    const inset = 4; // Slight inset for smooth edges
+    const halfSize = textureSize / 2 - inset;
+    const cornerRadius = textureSize * 0.15; // ~15% corner radius
+
+    // Signed distance function for rounded rectangle
+    const sdRoundedBox = (px: number, py: number, bx: number, by: number, r: number): number => {
+      const qx = Math.abs(px) - bx + r;
+      const qy = Math.abs(py) - by + r;
+      const outsideDist = Math.sqrt(Math.max(qx, 0) ** 2 + Math.max(qy, 0) ** 2);
+      const insideDist = Math.min(Math.max(qx, qy), 0);
+      return outsideDist + insideDist - r;
+    };
+
+    for (let y = 0; y < textureSize; y++) {
+      for (let x = 0; x < textureSize; x++) {
+        const px = x - textureSize / 2;
+        const py = y - textureSize / 2;
+
+        const dist = sdRoundedBox(px, py, halfSize, halfSize, cornerRadius);
+
+        // Smooth anti-aliased edge
+        const edge = 1.0 - Math.max(0, Math.min(1, (dist + 2) / 4));
+        const value = Math.floor(edge * 255);
+
+        const idx = (y * textureSize + x) * 4;
+        data[idx] = value;
+        data[idx + 1] = value;
+        data[idx + 2] = value;
+        data[idx + 3] = value;
+      }
+    }
+
+    const texture = new THREE.DataTexture(data, textureSize, textureSize, THREE.RGBAFormat);
+    texture.generateMipmaps = true;
+    texture.minFilter = THREE.LinearMipmapLinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    texture.needsUpdate = true;
+
+    return texture;
+  };
+
+  const maskTexture = shape === 'rounded' ? createRoundedSquareMaskTexture() : createCircularMaskTexture();
+
+  const getEffectColor = (effect: AnnotationEffect): THREE.Vector3 => {
+    switch (effect) {
+      case AnnotationEffect.Fire:
+        return new THREE.Vector3(1.0, 0.3, 0.1);
+      case AnnotationEffect.Water:
+        return new THREE.Vector3(0.2, 0.5, 0.8);
+      case AnnotationEffect.Ice:
+        return new THREE.Vector3(0.7, 0.85, 1.0);
+      case AnnotationEffect.Magic:
+        // Saturated purple (#9333ea) to match AnnotationMaterial
+        return new THREE.Vector3(0.576, 0.2, 0.918);
+      case AnnotationEffect.Grease:
+        return new THREE.Vector3(0.3, 0.2, 0.1);
+      case AnnotationEffect.SpaceTear:
+        return new THREE.Vector3(0.2, 0.0, 0.4);
+      default:
+        return new THREE.Vector3(1.0, 1.0, 1.0);
+    }
+  };
+
+  const emptyClippingPlanes = [
+    new THREE.Vector4(0, 0, 0, 0),
+    new THREE.Vector4(0, 0, 0, 0),
+    new THREE.Vector4(0, 0, 0, 0),
+    new THREE.Vector4(0, 0, 0, 0)
+  ];
+
+  // Replace NUM_CLIPPING_PLANES with 4 directly in the shader source
+  // This is needed because Three.js replaces this token before processing defines
+  const fragmentShaderFixed = annotationEffectsFragmentShader.replace(/NUM_CLIPPING_PLANES/g, '4');
+
+  // Get effect defaults and adjust for small preview size
+  const effectProps = getDefaultEffectProps(effectType);
+  // Reduce border effect for small previews to avoid artifacts
+  const previewBorder = Math.min(effectProps.border, 0.2);
+
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      uMaskTexture: { value: maskTexture },
+      uTime: { value: 0.0 },
+      uEffectType: { value: effectType },
+      uBaseColor: { value: getEffectColor(effectType) },
+      uOpacity: { value: 1.0 },
+      uSpeed: { value: effectProps.speed },
+      uIntensity: { value: effectProps.intensity },
+      uSoftness: { value: effectProps.softness },
+      uBorder: { value: previewBorder },
+      uRoughness: { value: effectProps.roughness },
+      uEdgeMinMipMapLevel: { value: 0 },
+      uEdgeMaxMipMapLevel: { value: 4 },
+      uClippingPlanes: { value: emptyClippingPlanes }
+    },
+    transparent: true,
+    fragmentShader: fragmentShaderFixed,
+    vertexShader: annotationVertexShader,
+    clipping: false
+  });
+
+  $effect(() => {
+    const props = getDefaultEffectProps(effectType);
+    material.uniforms.uEffectType.value = effectType;
+    material.uniforms.uBaseColor.value = getEffectColor(effectType);
+    material.uniforms.uSpeed.value = props.speed;
+    material.uniforms.uIntensity.value = props.intensity;
+    material.uniforms.uSoftness.value = props.softness;
+    material.uniforms.uBorder.value = Math.min(props.border, 0.2);
+    material.uniforms.uRoughness.value = props.roughness;
+    material.uniformsNeedUpdate = true;
+  });
+
+  // Animate the effect
+  useTask((delta) => {
+    material.uniforms.uTime.value += delta;
+  });
+</script>
+
+<T.OrthographicCamera
+  makeDefault
+  manual
+  position.z={1}
+  oncreate={(ref) => {
+    // Force camera frustum to match our 2x2 plane
+    ref.left = -1;
+    ref.right = 1;
+    ref.top = 1;
+    ref.bottom = -1;
+    ref.near = 0.1;
+    ref.far = 10;
+    ref.updateProjectionMatrix();
+  }}
+/>
+<T.Mesh>
+  <T.PlaneGeometry args={[2, 2]} />
+  <T is={material} />
+</T.Mesh>

package/dist/components/RadialMenu/EffectPreviewScene.svelte.d.ts

@@ -0,0 +1,8 @@
+import { AnnotationEffect } from '../Stage/components/AnnotationLayer/types';
+interface Props {
+    effectType: AnnotationEffect;
+    shape?: 'circle' | 'rounded';
+}
+declare const EffectPreviewScene: import("svelte").Component<Props, {}, "">;
+type EffectPreviewScene = ReturnType<typeof EffectPreviewScene>;
+export default EffectPreviewScene;