@tableslayer/ui 0.1.4 → 0.1.5

package/src/lib/components/Menu/types.ts

@@ -1,17 +0,0 @@
-import type { Placement } from '@floating-ui/dom';
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { SelectOption } from '../Select';
-
-export type SelectorMenuProps = {
-  trigger?: Snippet;
-  variant?: 'default';
-  selected?: string;
-  options: SelectOption[];
-  onSelectedChange?: (selected: string) => void;
-  positioning?: {
-    placement?: Placement;
-    offset?: number;
-  };
-  footer?: Snippet<[{ footerProps: { close: () => void } }]>;
-} & HTMLButtonAttributes;

package/src/lib/components/MyCounterButton.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  let count = $state(0);
-
-  function handleClick() {
-    count += 1;
-  }
-</script>
-
-<button onclick={handleClick}>
-  clicks: {count}
-</button>

package/src/lib/components/Panel/index.ts

@@ -1,2 +0,0 @@
-export { default as Panel } from './panel.svelte';
-export * from './types';

package/src/lib/components/Panel/panel.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import type { PanelProps } from './types';
-  let { variant = 'rounded', borderWidth = 1, children, ...restProps }: PanelProps = $props();
-  let panelClasses = $derived(['panel', `panel--${variant}`, `border-${borderWidth}`, restProps.class ?? '']);
-</script>
-
-<div {...restProps} class={panelClasses}>
-  {@render children()}
-</div>
-
-<style>
-  .panel {
-    background: var(--contrastLowest);
-    border: var(--borderThin);
-    border-radius: var(--radius-2);
-    box-shadow: var(--shadow-1);
-  }
-</style>

package/src/lib/components/Panel/types.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-export type PanelProps = {
-  children: Snippet;
-  variant?: 'rounded' | 'cut';
-  borderWidth?: number;
-} & HTMLAttributes<HTMLDivElement>;

package/src/lib/components/PersistButton/PersistButton.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-  import { IconPinFilled } from '@tabler/icons-svelte';
-
-  interface Props {
-    visible: boolean;
-    position: { x: number; y: number };
-    onPersist: () => void;
-    onDismiss: () => void;
-  }
-
-  const { visible, position, onPersist, onDismiss }: Props = $props();
-
-  // Offset button slightly from touch point
-  const OFFSET_X = 20;
-  const OFFSET_Y = -40;
-
-  function handleBackdropClick() {
-    onDismiss();
-  }
-
-  function handlePersistClick(e: MouseEvent | TouchEvent) {
-    e.stopPropagation();
-    onPersist();
-  }
-</script>
-
-{#if visible}
-  <div class="persistButton">
-    <!-- Transparent backdrop to catch clicks outside -->
-    <button class="persistButton__backdrop" onclick={handleBackdropClick} type="button" aria-label="Dismiss"></button>
-
-    <!-- The persist button -->
-    <button
-      class="persistButton__btn"
-      style:left="{position.x + OFFSET_X}px"
-      style:top="{position.y + OFFSET_Y}px"
-      onclick={handlePersistClick}
-      type="button"
-      aria-label="Persist drawing"
-    >
-      <IconPinFilled size={20} stroke={2} />
-    </button>
-  </div>
-{/if}
-
-<style>
-  .persistButton {
-    position: fixed;
-    inset: 0;
-    pointer-events: auto;
-    z-index: 500;
-  }
-
-  .persistButton__backdrop {
-    position: absolute;
-    inset: 0;
-    background: transparent;
-    border: none;
-    cursor: default;
-    padding: 0;
-  }
-
-  .persistButton__btn {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 3rem;
-    height: 3rem;
-    padding: 0;
-    background: var(--fgPrimary);
-    border: 2px solid var(--bg);
-    border-radius: 50%;
-    color: var(--bg);
-    cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%);
-    animation: persistButton__fadeIn 0.15s ease-out;
-  }
-
-  .persistButton__btn:hover {
-    background: var(--fg);
-    transform: translate(-50%, -50%) scale(1.1);
-  }
-
-  .persistButton__btn:active {
-    transform: translate(-50%, -50%) scale(0.95);
-  }
-
-  @keyframes persistButton__fadeIn {
-    from {
-      opacity: 0;
-      transform: translate(-50%, -50%) scale(0.8);
-    }
-    to {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
-    }
-  }
-</style>

package/src/lib/components/PersistButton/index.ts

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

package/src/lib/components/Popover/Popover.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-  import { createPopover, createSync, melt } from '@melt-ui/svelte';
-  import { fade } from 'svelte/transition';
-  import type { PopoverProps } from './types';
-  import type { HTMLBaseAttributes } from 'svelte/elements';
-
-  let {
-    isOpen = false,
-    onIsOpenChange,
-    trigger,
-    content,
-    triggerClass,
-    triggerTestId,
-    contentClass,
-    positioning = { placement: 'bottom' },
-    portal = null,
-    forceVisible,
-    closeOnOutsideClick = true
-  }: PopoverProps & HTMLBaseAttributes = $props();
-
-  const {
-    elements: { trigger: triggerAction, content: contentAction, close },
-    states
-  } = createPopover({
-    positioning,
-    forceVisible,
-    portal,
-    closeOnOutsideClick
-  });
-
-  const sync = createSync(states);
-
-  $effect(() => {
-    sync.open(isOpen, (v) => {
-      isOpen = v;
-      onIsOpenChange?.(v);
-    });
-  });
-
-  const contentProps = {
-    close: () => {
-      isOpen = false;
-    }
-  };
-</script>
-
-<button
-  type="button"
-  class={['popTrigger', triggerClass ?? '']}
-  data-testid={triggerTestId}
-  use:melt={$triggerAction}
-  aria-label="Update dimensions"
->
-  {@render trigger()}
-</button>
-
-{#if isOpen}
-  <div use:melt={$contentAction} transition:fade={{ duration: 100 }} class={['popContent', contentClass ?? '']}>
-    {@render content({ contentProps })}
-    <button class="popClose" use:melt={$close}>close</button>
-  </div>
-{/if}
-
-<style>
-  .popTrigger {
-    cursor: pointer;
-  }
-  .popContent {
-    padding: var(--size-2);
-    background: var(--popoverBg);
-    color: var(--fg);
-    border: var(--borderThin);
-    border-radius: var(--radius-1);
-    box-shadow: var(--shadow-1);
-    z-index: 1000;
-  }
-  /* TODO: Maybe I should use this */
-  .popClose {
-    display: none;
-  }
-</style>

package/src/lib/components/Popover/index.ts

@@ -1,2 +0,0 @@
-export { default as Popover } from './Popover.svelte';
-export * from './types';

package/src/lib/components/Popover/types.ts

@@ -1,19 +0,0 @@
-import type { CreatePopoverProps } from '@melt-ui/svelte';
-import type { Snippet } from 'svelte';
-export type PopoverProps = {
-  isOpen?: boolean;
-  onIsOpenChange?: (open: boolean) => void;
-  trigger: Snippet;
-  triggerClass?: string;
-  triggerTestId?: string;
-  contentClass?: string;
-  content: Snippet<
-    [
-      {
-        contentProps: {
-          close: () => void;
-        };
-      }
-    ]
-  >;
-} & CreatePopoverProps;

package/src/lib/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/src/lib/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/src/lib/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>