@tableslayer/ui 0.1.5 → 0.1.6

package/dist/components/MarkerTooltip/MarkerTooltip.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
-  import { MarkerVisibility } from '../Stage/components/MarkerLayer/types';
   import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
   import { Editor } from '../Editor';
+
+  // Duplicated from @tableslayer/stage to avoid circular dependency
+  const MarkerVisibility = {
+    Always: 0,
+    DM: 1,
+    Player: 2,
+    Hover: 3
+  } as const;
+  type MarkerVisibility = (typeof MarkerVisibility)[keyof typeof MarkerVisibility];
   import { onMount, onDestroy } from 'svelte';
   import { IconPin, IconPinFilled } from '@tabler/icons-svelte';
 

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

@@ -1,17 +1,15 @@
-import { MarkerVisibility } from '../Stage/components/MarkerLayer/types';
-interface MarkerData {
-    id: string;
-    title?: string;
-    note?: unknown;
-    visibility?: MarkerVisibility;
-    size?: number;
-    tooltip?: {
+declare const MarkerTooltip: import("svelte").Component<{
+    marker: {
+        id: string;
         title?: string;
-        content?: unknown;
-    };
-}
-interface Props {
-    marker: MarkerData | null;
+        note?: unknown;
+        visibility?: 0 | 1 | 2 | 3;
+        size?: number;
+        tooltip?: {
+            title?: string;
+            content?: unknown;
+        };
+    } | null;
     position: {
         x: number;
         y: number;
@@ -26,10 +24,9 @@ interface Props {
         element: HTMLElement;
         bounds: DOMRect;
     }>;
-    preferredPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    preferredPlacement?: "top" | "bottom" | "left" | "right";
     onTooltipMount?: (element: HTMLElement, bounds: DOMRect) => void;
     onTooltipUnmount?: (element: HTMLElement) => void;
-}
-declare const MarkerTooltip: import("svelte").Component<Props, {}, "">;
+}, {}, "">;
 type MarkerTooltip = ReturnType<typeof MarkerTooltip>;
 export default MarkerTooltip;

package/dist/components/index.d.ts

@@ -6,7 +6,6 @@ export * from './CodeBlock';
 export * from './ColorMode';
 export * from './ColorPicker';
 export * from './ContextMenu';
-export * from './DrawingSliders';
 export * from './Editor';
 export * from './FogSliders';
 export * from './Hr';
@@ -16,15 +15,11 @@ export * from './Link';
 export * from './Loading';
 export * from './Logo';
 export * from './Menu';
-export { default as MyCounterButton } from './MyCounterButton.svelte';
 export * from './Panel';
 export * from './PersistButton';
 export * from './Popover';
-export { default as PropsTable } from './PropsTable/PropsTable.svelte';
-export * from './RadialMenu';
 export * from './Select';
 export * from './Spacer';
-export * from './Stage';
 export * from './Table';
 export * from './Text';
 export * from './Title';

package/dist/components/index.js

@@ -6,7 +6,6 @@ export * from './CodeBlock';
 export * from './ColorMode';
 export * from './ColorPicker';
 export * from './ContextMenu';
-export * from './DrawingSliders';
 export * from './Editor';
 export * from './FogSliders';
 export * from './Hr';
@@ -16,15 +15,11 @@ export * from './Link';
 export * from './Loading';
 export * from './Logo';
 export * from './Menu';
-export { default as MyCounterButton } from './MyCounterButton.svelte';
 export * from './Panel';
 export * from './PersistButton';
 export * from './Popover';
-export { default as PropsTable } from './PropsTable/PropsTable.svelte';
-export * from './RadialMenu';
 export * from './Select';
 export * from './Spacer';
-export * from './Stage';
 export * from './Table';
 export * from './Text';
 export * from './Title';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tableslayer/ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "FSL-1.1-ALv2",
   "repository": {
     "type": "git",
@@ -65,7 +65,6 @@
     "@tableslayer/tsconfig": "workspace:*",
     "@types/chroma-js": "^3.1.2",
     "@types/marked": "^6.0.0",
-    "@types/three": "0.182.0",
     "marked": "^17.0.2",
     "svelte": "5.51.2",
     "svelte-check": "^4.4.0",
@@ -76,8 +75,6 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.5",
     "@tabler/icons-svelte": "^3.36.1",
-    "@threlte/core": "8.3.1",
-    "@threlte/extras": "9.7.1",
     "@tiptap/core": "^3.19.0",
     "@tiptap/extension-link": "^3.19.0",
     "@tiptap/extension-typography": "^3.19.0",
@@ -85,11 +82,7 @@
     "@tiptap/starter-kit": "^3.19.0",
     "chroma-js": "^3.2.0",
     "class-variance-authority": "^0.7.1",
-    "gifuct-js": "^2.1.2",
-    "lazy-brush": "^2.0.2",
-    "postprocessing": "6.38.2",
     "shiki": "^3.22.0",
-    "three": "0.182.0",
     "uuid": "^13.0.0",
     "zod": "^4.3.6"
   },

package/dist/components/DrawingSliders/DrawingSliders.svelte

@@ -1,379 +0,0 @@
-<script lang="ts">
-  import { Popover } from '../Popover';
-  import { Icon } from '../Icon';
-  import { IconButton } from '../Button';
-  import {
-    IconBoxMultiple,
-    IconBoxMultiple1,
-    IconBoxMultiple2,
-    IconBoxMultiple3,
-    IconBoxMultiple4,
-    IconBoxMultiple5,
-    IconBoxMultiple6,
-    IconBoxMultiple7,
-    IconBoxMultiple8,
-    IconBoxMultiple9
-  } from '@tabler/icons-svelte';
-  import type { ComponentType } from 'svelte';
-  import { AnnotationEffect } from '../Stage/components/AnnotationLayer/types';
-  import EffectPreview from '../RadialMenu/EffectPreview.svelte';
-
-  // Color palette - 10 colors
-  const COLORS = [
-    '#d73e2e', // red
-    '#ffa500', // orange
-    '#ffd93d', // yellow
-    '#6bcf7f', // green
-    '#2e86ab', // blue
-    '#b197fc', // purple
-    '#f06595', // pink
-    '#20c997', // turquoise
-    '#ffffff', // white
-    '#2a2a2a' // dark
-  ];
-
-  // Effects array
-  const EFFECTS = [
-    AnnotationEffect.Fire,
-    AnnotationEffect.Water,
-    AnnotationEffect.Ice,
-    AnnotationEffect.Magic,
-    AnnotationEffect.Grease,
-    AnnotationEffect.SpaceTear
-  ];
-
-  // Effect colors for the opacity slider gradient
-  const EFFECT_COLORS: Record<AnnotationEffect, string> = {
-    [AnnotationEffect.None]: '#ffffff',
-    [AnnotationEffect.Fire]: '#ff4d1a',
-    [AnnotationEffect.Water]: '#3380cc',
-    [AnnotationEffect.Ice]: '#b3d9ff',
-    [AnnotationEffect.Magic]: '#9333ea',
-    [AnnotationEffect.Grease]: '#4d3319',
-    [AnnotationEffect.SpaceTear]: '#330066'
-  };
-
-  interface Props {
-    opacity: number;
-    brushSize: number;
-    color: string;
-    activeLayerIndex: number;
-    currentEffect?: AnnotationEffect;
-    onOpacityChange: (value: number) => void;
-    onBrushSizeChange: (value: number) => void;
-    onColorChange: (color: string, opacity: number) => void;
-    onEffectChange?: (effect: AnnotationEffect) => void;
-    onLayersClick: () => void;
-  }
-
-  let {
-    opacity,
-    brushSize,
-    color,
-    activeLayerIndex,
-    currentEffect = AnnotationEffect.None,
-    onOpacityChange,
-    onBrushSizeChange,
-    onColorChange,
-    onEffectChange,
-    onLayersClick
-  }: Props = $props();
-
-  // Select the appropriate icon based on layer count
-  const layerIcons: ComponentType[] = [
-    IconBoxMultiple1,
-    IconBoxMultiple2,
-    IconBoxMultiple3,
-    IconBoxMultiple4,
-    IconBoxMultiple5,
-    IconBoxMultiple6,
-    IconBoxMultiple7,
-    IconBoxMultiple8,
-    IconBoxMultiple9
-  ];
-
-  const layerIcon = $derived.by(() => {
-    // activeLayerIndex is 1-based (1st layer, 2nd layer, etc.)
-    return activeLayerIndex <= 9 && activeLayerIndex > 0 ? layerIcons[activeLayerIndex - 1] : IconBoxMultiple;
-  });
-
-  // Check if current selection is an effect
-  const hasEffect = $derived(currentEffect !== AnnotationEffect.None);
-
-  // Brush size is now stored as a percentage (0.01% to 5%)
-  // Use quadratic curve for slider to give more precision to lower values
-  // Slider range: 0-100, maps to percentage range: 0.01-5.0
-  // At 50% slider we want 2%, so we use: percentage = 0.0008 * slider^2
-  // This gives: 10% → 0.08%, 50% → 2%, 100% → 8% (capped at 5%)
-  const percentageToSlider = (percentage: number): number => {
-    // Inverse: slider = sqrt(percentage / 0.0008)
-    // Clamp to minimum of 0.01
-    const clampedPercentage = Math.max(0.01, percentage);
-    return Math.sqrt(clampedPercentage / 0.0008);
-  };
-
-  const sliderToPercentage = (slider: number): number => {
-    // Quadratic curve: percentage = 0.0008 * slider^2
-    const percentage = 0.0008 * slider * slider;
-    return Math.max(0.01, Math.min(5.0, percentage));
-  };
-
-  let brushSliderValue = $derived(percentageToSlider(brushSize));
-
-  const handleBrushSliderChange = (value: number) => {
-    const actualPercentage = sliderToPercentage(value);
-    onBrushSizeChange(actualPercentage);
-  };
-
-  const handleColorSelect = (selectedColor: string, close?: () => void) => {
-    onColorChange(selectedColor, opacity);
-    // Clear any active effect when selecting a color
-    onEffectChange?.(AnnotationEffect.None);
-    close?.();
-  };
-
-  const handleEffectSelect = (effect: AnnotationEffect, close?: () => void) => {
-    // Set color to match the effect for the opacity slider gradient
-    onColorChange(EFFECT_COLORS[effect], opacity);
-    onEffectChange?.(effect);
-    close?.();
-  };
-
-  // Touch event handlers for better mobile support
-  const handleTouchStart = (e: TouchEvent) => {
-    // Prevent default to avoid conflicts with other touch interactions
-    e.stopPropagation();
-  };
-
-  const handleTouchMove = (e: TouchEvent) => {
-    // Prevent scrolling while adjusting sliders
-    e.preventDefault();
-    e.stopPropagation();
-  };
-</script>
-
-<div class="drawingSliders">
-  <div class="drawingSliders__slider">
-    <Popover portal="body" positioning={{ placement: 'left', gutter: 12 }}>
-      {#snippet trigger()}
-        <button class="drawingSliders__colorSwatch" aria-label="Change annotation color or effect">
-          {#if hasEffect}
-            <EffectPreview effectType={currentEffect} size="2rem" shape="rounded" />
-          {:else}
-            <span class="drawingSliders__colorSwatchInner" style:background-color={color} style:opacity></span>
-          {/if}
-        </button>
-      {/snippet}
-      {#snippet content({ contentProps })}
-        <div class="drawingSliders__swatchGrid">
-          {#each COLORS as swatchColor}
-            <button
-              class="drawingSliders__gridItem"
-              onclick={() => handleColorSelect(swatchColor, contentProps.close)}
-              aria-label="Select color {swatchColor}"
-            >
-              <span class="drawingSliders__gridSwatch" style:background-color={swatchColor}></span>
-            </button>
-          {/each}
-          {#each EFFECTS as effect}
-            <button
-              class="drawingSliders__gridItem"
-              onclick={() => handleEffectSelect(effect, contentProps.close)}
-              aria-label="Select effect"
-            >
-              <EffectPreview effectType={effect} size="2rem" shape="rounded" />
-            </button>
-          {/each}
-        </div>
-      {/snippet}
-    </Popover>
-    <input
-      id="opacity-slider"
-      type="range"
-      class="drawingSliders__input drawingSliders__input--opacity"
-      style="--slider-color: {color}"
-      min="0"
-      max="1"
-      step="0.01"
-      value={opacity}
-      oninput={(e) => onOpacityChange(Number(e.currentTarget.value))}
-      ontouchstart={handleTouchStart}
-      ontouchmove={handleTouchMove}
-    />
-    <div class="drawingSliders__value">{Math.round(opacity * 100)}%</div>
-  </div>
-
-  <div class="drawingSliders__slider">
-    <input
-      id="brush-size-slider"
-      type="range"
-      class="drawingSliders__input"
-      min="0"
-      max="100"
-      step="0.1"
-      value={brushSliderValue}
-      oninput={(e) => handleBrushSliderChange(Number(e.currentTarget.value))}
-      ontouchstart={handleTouchStart}
-      ontouchmove={handleTouchMove}
-    />
-    <div class="drawingSliders__value">{brushSize.toFixed(2)}%</div>
-  </div>
-
-  <IconButton
-    variant="ghost"
-    onclick={onLayersClick}
-    aria-label="Toggle annotation layers panel"
-    title="Manage drawing layers"
-  >
-    <Icon Icon={layerIcon} size="1.25rem" />
-  </IconButton>
-</div>
-
-<style>
-  .drawingSliders {
-    position: absolute;
-    top: 50%;
-    right: 1rem;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    z-index: 10;
-    pointer-events: auto;
-    background-color: var(--bg);
-    border: var(--borderThin);
-    border-radius: var(--radius-2);
-    padding: 0.5rem 0rem;
-    align-items: center;
-  }
-
-  .drawingSliders__slider {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .drawingSliders__input {
-    writing-mode: vertical-lr;
-    direction: rtl;
-    width: 32px;
-    height: 120px;
-    -webkit-appearance: none;
-    appearance: none;
-    background: var(--contrastLow);
-    border-radius: var(--radius-1);
-    cursor: pointer;
-    touch-action: none; /* Prevent default touch behaviors */
-    outline: none;
-  }
-
-  .drawingSliders__input--opacity {
-    background: linear-gradient(to top, transparent, var(--slider-color));
-  }
-
-  /* Webkit browsers (Chrome, Safari, Edge) */
-  .drawingSliders__input::-webkit-slider-track {
-    width: 32px;
-    height: 120px;
-    background: transparent;
-    border: none;
-  }
-
-  .drawingSliders__input::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 32px;
-    height: 14px;
-    background: var(--contrastHigh);
-    border: none;
-    border-radius: var(--radius-1);
-    cursor: grab;
-    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
-  }
-
-  .drawingSliders__input::-webkit-slider-thumb:active {
-    cursor: grabbing;
-  }
-
-  /* Firefox */
-  .drawingSliders__input::-moz-range-track {
-    width: 32px;
-    height: 120px;
-    background: var(--contrastLow);
-    border-radius: var(--radius-2);
-  }
-
-  .drawingSliders__input--opacity::-moz-range-track {
-    background: linear-gradient(to top, transparent, var(--slider-color));
-  }
-
-  .drawingSliders__input::-moz-range-thumb {
-    width: 32px;
-    height: 14px;
-    background: var(--contrastHigh);
-    border: none;
-    border-radius: var(--radius-2);
-    cursor: grab;
-    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
-  }
-
-  .drawingSliders__input::-moz-range-thumb:active {
-    cursor: grabbing;
-  }
-
-  .drawingSliders__value {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--fg);
-    min-width: 3rem;
-    text-align: center;
-  }
-
-  .drawingSliders__colorSwatch {
-    width: 2rem;
-    height: 2rem;
-    border-radius: var(--radius-2);
-    cursor: pointer;
-    transition: border-color 0.2s;
-    padding: 0;
-    border: none;
-    background: transparent;
-    overflow: hidden;
-  }
-
-  .drawingSliders__colorSwatchInner {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--radius-2);
-  }
-
-  .drawingSliders__swatchGrid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0.5rem;
-    background-color: var(--bg);
-    border-radius: var(--radius-2);
-  }
-
-  .drawingSliders__gridItem {
-    width: 2rem;
-    height: 2rem;
-    border-radius: var(--radius-2);
-    cursor: pointer;
-    border: none;
-    padding: 0;
-    background: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-  }
-
-  .drawingSliders__gridSwatch {
-    width: 2rem;
-    height: 2rem;
-    border-radius: var(--radius-1);
-  }
-</style>

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

@@ -1,16 +0,0 @@
-import { AnnotationEffect } from '../Stage/components/AnnotationLayer/types';
-interface Props {
-    opacity: number;
-    brushSize: number;
-    color: string;
-    activeLayerIndex: number;
-    currentEffect?: AnnotationEffect;
-    onOpacityChange: (value: number) => void;
-    onBrushSizeChange: (value: number) => void;
-    onColorChange: (color: string, opacity: number) => void;
-    onEffectChange?: (effect: AnnotationEffect) => void;
-    onLayersClick: () => void;
-}
-declare const DrawingSliders: import("svelte").Component<Props, {}, "">;
-type DrawingSliders = ReturnType<typeof DrawingSliders>;
-export default DrawingSliders;

package/dist/components/DrawingSliders/index.d.ts

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

package/dist/components/DrawingSliders/index.js

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

package/dist/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/dist/components/MyCounterButton.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const MyCounterButton: import("svelte").Component<Record<string, never>, {}, "">;
-type MyCounterButton = ReturnType<typeof MyCounterButton>;
-export default MyCounterButton;

package/dist/components/PropsTable/PropsTable.svelte

@@ -1,107 +0,0 @@
-<script>
-  import jsonData from '@tableslayer/ui/typedoc.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}