@tableslayer/ui 0.1.4 → 0.1.6

package/src/lib/components/MarkerTooltip/MarkerTooltip.svelte

@@ -1,435 +0,0 @@
-<script lang="ts">
-  import { MarkerVisibility } from '../Stage/components/MarkerLayer/types';
-  import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
-  import { Editor } from '../Editor';
-  import { onMount, onDestroy } from 'svelte';
-  import { IconPin, IconPinFilled } from '@tabler/icons-svelte';
-
-  interface MarkerData {
-    id: string;
-    title?: string;
-    note?: unknown;
-    visibility?: MarkerVisibility;
-    size?: number;
-    tooltip?: {
-      title?: string;
-      content?: unknown;
-    };
-  }
-
-  interface Props {
-    marker: MarkerData | null;
-    position: { x: number; y: number } | null;
-    containerElement: HTMLElement | null;
-    markerDiameter?: number;
-    onTooltipHover?: (isHovering: boolean) => void;
-    isDM?: boolean;
-    isPinned?: boolean;
-    onPinToggle?: (markerId: string, pinned: boolean) => void;
-    existingTooltips?: Array<{ element: HTMLElement; bounds: DOMRect }>;
-    preferredPlacement?: 'top' | 'bottom' | 'left' | 'right';
-    onTooltipMount?: (element: HTMLElement, bounds: DOMRect) => void;
-    onTooltipUnmount?: (element: HTMLElement) => void;
-  }
-
-  let {
-    marker,
-    position,
-    containerElement,
-    markerDiameter = 40,
-    onTooltipHover,
-    isDM = false,
-    isPinned = false,
-    onPinToggle,
-    existingTooltips = [],
-    preferredPlacement = 'top',
-    onTooltipMount,
-    onTooltipUnmount
-  }: Props = $props();
-
-  let tooltipElement = $state<HTMLDivElement>();
-  let portalContainer: HTMLDivElement | undefined = $state();
-  let cleanup: (() => void) | null = null;
-  let currentPlacement = $state<'top' | 'bottom' | 'left' | 'right'>('top');
-
-  function handleTooltipMouseEnter() {
-    if (onTooltipHover) {
-      onTooltipHover(true);
-    }
-  }
-
-  function handleTooltipMouseLeave() {
-    if (onTooltipHover) {
-      onTooltipHover(false);
-    }
-  }
-
-  const getMarkerContent = (marker: MarkerData | null) => {
-    if (!marker) return null;
-
-    if (marker.note) {
-      return marker.note;
-    }
-
-    if (marker.tooltip?.content) {
-      if (typeof marker.tooltip.content === 'string') {
-        try {
-          return JSON.parse(marker.tooltip.content);
-        } catch {
-          return marker.tooltip.content;
-        }
-      }
-      return marker.tooltip.content;
-    }
-
-    return null;
-  };
-
-  const getMarkerTitle = (marker: MarkerData | null) => {
-    if (!marker) return null;
-
-    if (marker.title) {
-      return marker.title;
-    }
-
-    if (marker.tooltip?.title) {
-      return marker.tooltip.title;
-    }
-
-    return null;
-  };
-
-  let markerContent = $derived(getMarkerContent(marker));
-  let markerTitle = $derived(getMarkerTitle(marker));
-
-  function getEstimatedBounds(
-    virtualEl: {
-      getBoundingClientRect: () => {
-        left: number;
-        top: number;
-        right: number;
-        bottom: number;
-        width: number;
-        height: number;
-        x: number;
-        y: number;
-      };
-    },
-    element: HTMLElement,
-    placement: string,
-    offset: number
-  ) {
-    const rect = virtualEl.getBoundingClientRect();
-    const width = element.offsetWidth || 200;
-    const height = element.offsetHeight || 100;
-
-    let x = rect.left;
-    let y = rect.top;
-
-    switch (placement) {
-      case 'top':
-        x -= width / 2;
-        y -= height + offset;
-        break;
-      case 'bottom':
-        x -= width / 2;
-        y += offset;
-        break;
-      case 'left':
-        x -= width + offset;
-        y -= height / 2;
-        break;
-      case 'right':
-        x += offset;
-        y -= height / 2;
-        break;
-    }
-
-    return { x, y, width, height, left: x, top: y, right: x + width, bottom: y + height };
-  }
-
-  function calculateOverlap(
-    rect1: DOMRect | { left: number; right: number; top: number; bottom: number },
-    rect2: DOMRect | { left: number; right: number; top: number; bottom: number }
-  ) {
-    const xOverlap = Math.max(0, Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left));
-    const yOverlap = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));
-    return xOverlap * yOverlap;
-  }
-
-  function calculateTotalOverlap(
-    testBounds: DOMRect | { left: number; right: number; top: number; bottom: number },
-    existingTooltips: Array<{ bounds: DOMRect }>
-  ) {
-    return existingTooltips.reduce((total, tooltip) => {
-      return total + calculateOverlap(testBounds, tooltip.bounds);
-    }, 0);
-  }
-
-  function createPortalContainer() {
-    const existingContainer = document.getElementById('markerTooltipPortal');
-    if (existingContainer) {
-      portalContainer = existingContainer as HTMLDivElement;
-      return;
-    }
-
-    const container = document.createElement('div');
-    container.id = 'markerTooltipPortal';
-    container.style.position = 'absolute';
-    container.style.top = '0';
-    container.style.left = '0';
-    container.style.width = '0';
-    container.style.height = '0';
-    container.style.pointerEvents = 'none';
-    container.style.zIndex = '1';
-    document.body.appendChild(container);
-    portalContainer = container;
-  }
-
-  onMount(() => {
-    createPortalContainer();
-  });
-
-  onDestroy(() => {
-    if (cleanup) {
-      cleanup();
-      cleanup = null;
-    }
-
-    if (onTooltipUnmount && tooltipElement) {
-      onTooltipUnmount(tooltipElement);
-    }
-
-    if (tooltipElement && portalContainer && portalContainer.contains(tooltipElement)) {
-      portalContainer.removeChild(tooltipElement);
-    }
-
-    if (portalContainer && portalContainer.childNodes.length === 0) {
-      if (document.body.contains(portalContainer)) {
-        document.body.removeChild(portalContainer);
-      }
-    }
-  });
-
-  $effect(() => {
-    if (tooltipElement && position && containerElement && portalContainer) {
-      if (!portalContainer.contains(tooltipElement)) {
-        portalContainer.appendChild(tooltipElement);
-      }
-
-      if (cleanup) {
-        cleanup();
-        cleanup = null;
-      }
-
-      const virtualEl = {
-        getBoundingClientRect() {
-          const rect = containerElement.getBoundingClientRect();
-          const viewportX = rect.left + position.x;
-          const viewportY = rect.top + position.y;
-
-          return {
-            width: 0,
-            height: 0,
-            x: viewportX,
-            y: viewportY,
-            top: viewportY,
-            left: viewportX,
-            right: viewportX,
-            bottom: viewportY
-          };
-        }
-      };
-
-      cleanup = autoUpdate(virtualEl, tooltipElement!, async () => {
-        const markerRadius = markerDiameter / 2;
-        const arrowSize = 8;
-        const dynamicOffset = markerRadius + arrowSize;
-
-        let bestPlacement = preferredPlacement;
-
-        if (existingTooltips.length > 0 && tooltipElement && tooltipElement.offsetWidth > 0) {
-          const placements: ('top' | 'bottom' | 'left' | 'right')[] = ['top', 'bottom', 'left', 'right'];
-          let minOverlap = Infinity;
-
-          for (const placement of placements) {
-            const testBounds = getEstimatedBounds(virtualEl, tooltipElement!, placement, dynamicOffset);
-            const overlap = calculateTotalOverlap(testBounds, existingTooltips);
-            if (overlap < minOverlap) {
-              minOverlap = overlap;
-              bestPlacement = placement;
-            }
-          }
-        }
-
-        const fallbackOptions: ('top' | 'bottom' | 'left' | 'right')[] = ['bottom', 'left', 'right', 'top'];
-        const middleware = [
-          offset(dynamicOffset),
-          flip({
-            fallbackPlacements: fallbackOptions.filter((p) => p !== bestPlacement)
-          }),
-          shift({ padding: 10 })
-        ];
-
-        const { x, y, placement } = await computePosition(virtualEl, tooltipElement!, {
-          placement: bestPlacement,
-          middleware,
-          strategy: 'fixed'
-        });
-
-        currentPlacement = placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';
-
-        Object.assign(tooltipElement!.style, {
-          position: 'fixed',
-          left: `${x}px`,
-          top: `${y}px`,
-          pointerEvents: 'auto'
-        });
-
-        if (onTooltipMount && tooltipElement) {
-          setTimeout(() => {
-            if (tooltipElement) {
-              const bounds = tooltipElement.getBoundingClientRect();
-              onTooltipMount(tooltipElement, bounds);
-            }
-          }, 100);
-        }
-      });
-
-      tooltipElement.style.display = 'block';
-    } else if (tooltipElement) {
-      tooltipElement.style.display = 'none';
-    }
-
-    return () => {
-      if (cleanup) {
-        cleanup();
-        cleanup = null;
-      }
-    };
-  });
-</script>
-
-{#if (markerContent || markerTitle) && position}
-  <div
-    bind:this={tooltipElement}
-    class="markerTooltip"
-    style="display: none;"
-    role="tooltip"
-    data-placement={currentPlacement}
-    onmouseenter={handleTooltipMouseEnter}
-    onmouseleave={handleTooltipMouseLeave}
-  >
-    <div class="markerTooltip__arrow markerTooltip__arrow--{currentPlacement}"></div>
-    {#if isDM && onPinToggle && marker && marker.visibility !== MarkerVisibility.DM}
-      <button
-        class="markerTooltip__pin"
-        onclick={() => onPinToggle(marker.id, !isPinned)}
-        title={isPinned ? 'Unpin from player view' : 'Pin to player view'}
-      >
-        {#if isPinned}
-          <IconPinFilled size={16} />
-        {:else}
-          <IconPin size={16} />
-        {/if}
-      </button>
-    {/if}
-    {#if markerTitle}
-      <div class="markerTooltip__title {isDM ? 'markerTooltip__title--dm' : ''}">{markerTitle}</div>
-    {/if}
-    {#if markerContent}
-      <Editor content={markerContent} editable={false} />
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .markerTooltip {
-    max-width: 400px;
-    background-color: var(--bg);
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--border);
-    border-radius: 0.25rem;
-    box-shadow: var(--shadow-3);
-    position: relative;
-  }
-
-  .markerTooltip__pin {
-    position: absolute;
-    top: 0.25rem;
-    right: 0.25rem;
-    background: transparent;
-    border: none;
-    color: var(--fgMuted);
-    cursor: pointer;
-    padding: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius);
-    transition:
-      color 0.2s,
-      background 0.2s;
-  }
-
-  .markerTooltip__pin:hover {
-    color: var(--fgPrimary);
-    background: var(--bgHover);
-  }
-
-  .markerTooltip__title {
-    font-weight: 600;
-    font-size: 1rem;
-    margin-bottom: 0.5rem;
-    color: var(--fg);
-  }
-  .markerTooltip__title--dm {
-    padding-right: 2rem;
-  }
-
-  .markerTooltip__title:last-child {
-    margin-bottom: 0;
-  }
-
-  /* Arrow indicator */
-  .markerTooltip__arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    pointer-events: none;
-  }
-
-  /* Arrow modifiers for different placements */
-  .markerTooltip__arrow--top {
-    bottom: -8px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 8px 8px 0 8px;
-    border-color: var(--bg) transparent transparent transparent;
-  }
-
-  .markerTooltip__arrow--bottom {
-    top: -8px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 0 8px 8px 8px;
-    border-color: transparent transparent var(--bg) transparent;
-  }
-
-  .markerTooltip__arrow--left {
-    right: -8px;
-    top: 50%;
-    transform: translateY(-50%);
-    border-width: 8px 0 8px 8px;
-    border-color: transparent transparent transparent var(--bg);
-  }
-
-  .markerTooltip__arrow--right {
-    left: -8px;
-    top: 50%;
-    transform: translateY(-50%);
-    border-width: 8px 8px 8px 0;
-    border-color: transparent var(--bg) transparent transparent;
-  }
-</style>

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

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

package/src/lib/components/Menu/SelectorMenu.svelte

@@ -1,280 +0,0 @@
-<script lang="ts">
-  import { computePosition, offset, flip, shift, platform } from '@floating-ui/dom';
-  import { tick, type Snippet } from 'svelte';
-  import { type SelectorMenuProps } from './types';
-  import { IconButton } from '../Button';
-  import { Icon } from '../Icon';
-  import { IconSelector } from '@tabler/icons-svelte';
-  import { type SelectOption } from '../Select';
-  let {
-    trigger,
-    options,
-    selected = $bindable(),
-    disabled = false,
-    variant = 'default',
-    positioning = { placement: 'bottom-start', offset: 8 },
-    onSelectedChange,
-    footer,
-    ...restProps
-  }: SelectorMenuProps = $props();
-
-  let button: HTMLElement | null = null;
-  let menu = $state<HTMLElement | null>(null);
-  let isOpen = $state(false);
-  let activeIndex = $state<number | null>(null);
-  let floatingStyles = $state('');
-
-  function updatePosition() {
-    if (!button || !menu) {
-      return;
-    }
-
-    computePosition(button, menu, {
-      placement: positioning.placement,
-      middleware: [offset(positioning.offset), flip(), shift()],
-      platform
-    })
-      .then(({ x, y, strategy }) => {
-        floatingStyles = `left: ${x}px; top: ${y}px; position: ${strategy};`;
-      })
-      .catch((error) => {
-        console.error('Error in computePosition:', error);
-      });
-  }
-
-  async function toggleMenu() {
-    if (disabled) return;
-
-    isOpen = !isOpen;
-    if (isOpen) {
-      if (options.length > 0) {
-        activeIndex = 0;
-      }
-
-      await tick();
-      updatePosition();
-    }
-  }
-
-  const handleGlobalClick = (e: MouseEvent) => {
-    if (isOpen && menu && button) {
-      const target = e.target as Node;
-      if (!menu.contains(target) && !button.contains(target)) {
-        closeMenu();
-      }
-    }
-  };
-
-  function closeMenu() {
-    isOpen = false;
-    activeIndex = null;
-  }
-
-  function handleSelection(value: string) {
-    selected = value;
-    closeMenu();
-    if (onSelectedChange) {
-      onSelectedChange(selected);
-    }
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (!isOpen) return;
-    const currentIndex = activeIndex ?? -1;
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        activeIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        activeIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
-        break;
-      case 'Enter':
-      case ' ':
-        event.preventDefault();
-        if (activeIndex !== null) {
-          handleSelection(options[activeIndex].value);
-        }
-        break;
-      case 'Escape':
-        closeMenu();
-        break;
-    }
-  }
-
-  function isSelected(value: string) {
-    return selected === value;
-  }
-
-  function isSnippet(value: string | Snippet): value is Snippet {
-    return typeof value === 'function';
-  }
-
-  function getOptionIndex(option: SelectOption): number {
-    return options.findIndex((o) => o.value === option.value);
-  }
-
-  const footerProps = {
-    close: closeMenu
-  };
-</script>
-
-<svelte:window onclick={handleGlobalClick} />
-
-<div class={['selectorMenu', `selectorMenu--${variant}`, restProps.class]}>
-  <button
-    bind:this={button}
-    onclick={toggleMenu}
-    onkeydown={handleKeydown}
-    data-testid="menuButton"
-    aria-haspopup="listbox"
-    aria-expanded={isOpen}
-    aria-disabled={disabled}
-    {...restProps}
-  >
-    {#if trigger}
-      {@render trigger()}
-    {:else}
-      <IconButton as="div" variant="ghost">
-        <Icon Icon={IconSelector} />
-      </IconButton>
-    {/if}
-  </button>
-  {#if isOpen}
-    <div bind:this={menu} class="selectorMenu__popover" style={floatingStyles}>
-      <ul role="listbox" class="selectorMenu__optionList">
-        {#each options as option (option.value)}
-          <li
-            class={[
-              'selectorMenu__option',
-              isSelected(option.value) && 'selectorMenu__option--isSelected',
-              getOptionIndex(option) === activeIndex && ' selectorMenu__option--isActive'
-            ]}
-            tabindex="0"
-            onclick={() => handleSelection(option.value)}
-            onkeydown={handleKeydown}
-            role="option"
-            data-testid="menuItem"
-            aria-selected={isSelected(option.value)}
-          >
-            <div class="selectorMenu__start">
-              <div class="selectorMenu__space">
-                {#if isSelected(option.value)}
-                  <div class="selectorMenu__dot"></div>
-                {/if}
-              </div>
-              {#if option.icon}
-                <Icon Icon={option.icon} size="1.25rem" />
-              {/if}
-              {#if isSnippet(option.label)}
-                {@render option.label()}
-              {:else}
-                {option.label}
-              {/if}
-            </div>
-            {#if option.key}
-              <div class="selectorMenu__end">
-                <div class="selectorMenu__key">{option.key}</div>
-              </div>
-            {/if}
-          </li>
-        {/each}
-      </ul>
-      {#if footer}
-        <div class="selectorMenu__footer">
-          {@render footer({ footerProps })}
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .selectorMenu {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-  }
-  .selectorMenu--transparent .select__button {
-    border-color: transparent;
-    background: transparent;
-    &:hover {
-      border-color: var(--inputBorderColor);
-    }
-  }
-
-  .selectorMenu__popover {
-    position: absolute;
-    background: var(--popoverBg);
-    border: var(--borderThin);
-    border-radius: var(--radius-2);
-    box-shadow: var(--shadow-1);
-    white-space: nowrap;
-    z-index: 1000;
-    padding: 0.25rem;
-    list-style: none;
-  }
-  .selectorMenu__optionList {
-    max-height: 300px;
-    overflow-y: auto;
-  }
-
-  .selectorMenu__option {
-    width: 100%;
-    padding: 0.25rem 1rem;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 0.875rem;
-    gap: 3rem;
-    border: solid 2px transparent;
-    text-indent: -0.5rem;
-    line-height: 1.2rem;
-  }
-
-  .selectorMenu__option:hover,
-  .selectorMenu__option:focus {
-    background-color: var(--menuItemHover);
-    border: var(--menuItemBorderHover);
-    outline: none;
-  }
-  .selectorMenu__option--isActive {
-    background-color: var(--menuItemHover);
-  }
-
-  .selectorMenu__icon {
-    margin-left: auto;
-  }
-
-  .selectorMenu__dot {
-    width: 0.5rem;
-    height: 0.5rem;
-    background: var(--fgPrimary);
-    border-radius: 50%;
-  }
-  .selectorMenu__space {
-    width: 0.5rem;
-    height: 0.5rem;
-  }
-  .selectorMenu__selected {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-wrap: wrap;
-  }
-  .selectorMenu__start {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-  .selectorMenu__key {
-    display: flex;
-    text-indent: 0;
-    color: var(--fgMuted);
-    font-size: 0.75rem;
-    font-family: var(--font-mono);
-  }
-</style>

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

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