@tableslayer/ui 0.1.4 → 0.1.6

package/dist/components/PropsTable/PropsTable.svelte

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

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

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

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

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

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