@tableslayer/ui 0.1.3 → 0.1.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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