@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/ColorPicker/ColorPickerSwatch.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  let { color }: { color: string } = $props();
+</script>
+
+<div class="colorPickerSwatch">
+  <div class="colorPickerSwatch__color" style="background-color: {color}"></div>
+</div>
+
+<style>
+  .colorPickerSwatch {
+    width: 1rem;
+    height: 1rem;
+    border-radius: var(--radius-2);
+    background-image:
+      linear-gradient(45deg, var(--contrastMedium) 26%, transparent 26%),
+      linear-gradient(135deg, var(--contrastMedium) 26%, transparent 26%),
+      linear-gradient(45deg, transparent 75%, var(--contrastMedium) 75%),
+      linear-gradient(135deg, transparent 75%, var(--contrastMedium) 75%);
+    background-size: 0.5rem 0.5rem; /* Must be a square */
+    background-position:
+      0 0,
+      0.25rem 0,
+      0.25rem -0.25rem,
+      0px 0.25rem;
+    overflow: hidden;
+  }
+  .colorPickerSwatch__color {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-2);
+  }
+</style>

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

@@ -0,0 +1,3 @@
+export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as ColorPickerSwatch } from './ColorPickerSwatch.svelte';
+export * from './types';

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

@@ -0,0 +1,51 @@
+export type RGBA = {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+};
+
+export type HSVA = {
+  h: number;
+  s: number;
+  v: number;
+  a: number;
+};
+
+export type HSLA = {
+  h: number;
+  s: number;
+  l: number;
+  a: number;
+};
+
+export type ColorPickerProps = {
+  id?: string;
+  hex?: string;
+  rgba?: RGBA;
+  hsva?: HSVA;
+  hsla?: HSLA;
+  showAlpha?: boolean;
+  showInputs?: boolean;
+  showOpacity?: boolean;
+  onUpdate?: (payload: ColorUpdatePayload) => void;
+};
+
+export type ColorUpdatePayload = {
+  hex: string;
+  rgba: { r: number; g: number; b: number; a: number };
+  hsva: { h: number; s: number; v: number; a: number };
+  hsla: { h: number; s: number; l: number; a: number };
+};
+
+export type ColorState = {
+  hue: number;
+  saturation: number;
+  value: number;
+  opacity: number;
+  isSelecting: boolean;
+  isAdjustingSV: boolean;
+  isAdjustingHue: boolean;
+};
+
+export type ColorPickerFormats = 'hex' | 'rgb' | 'hsv' | 'hsl';

package/src/lib/components/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { createContextMenu, melt } from '@melt-ui/svelte';
+  import type { ContextMenuProps, ContextMenuItem } from './types';
+  import { goto } from '$app/navigation';
+  let { items, trigger }: ContextMenuProps = $props();
+  import { fly } from 'svelte/transition';
+  import { Hr } from '../Hr';
+  import Spacer from '../Spacer/Spacer.svelte';
+  const {
+    elements: { menu, item: meltItem, trigger: meltTrigger }
+  } = createContextMenu();
+
+  const handleItemClick = (item: ContextMenuItem) => {
+    if (item.href) {
+      goto(item.href);
+    }
+    if (item.onclick) {
+      item.onclick();
+    }
+  };
+</script>
+
+<button use:melt={$meltTrigger} class="cMenuTrigger">
+  {@render trigger()}
+</button>
+<div use:melt={$menu} class="cMenu" transition:fly={{ duration: 50 }}>
+  {#each items as item}
+    {#if item.type === 'divider'}
+      <Spacer size="0.5rem" />
+      <Hr />
+      <Spacer size="0.5rem" />
+    {:else}
+      <button use:melt={$meltItem} onclick={() => handleItemClick(item)} class="cMenuItem">
+        {item.label}
+        {#if item.end}
+          <div class="cMenuItemEnd">
+            {@render item.end()}
+          </div>
+        {/if}
+      </button>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  :global(.light) {
+    --cMenuItemHover: var(--primary-50);
+    --cMenuItemBorderHover: solid 2px var(--primary-600);
+  }
+  :global(.dark) {
+    --cMenuItemHover: var(--primary-950);
+    --cMenuItemBorderHover: solid 2px var(--primary-500);
+  }
+  .cMenu {
+    z-index: 1000;
+    background-color: var(--bg);
+    border: var(--borderThin);
+    border-radius: var(--radius-1);
+    box-shadow: var(--shadow-2);
+    padding: 0.5rem;
+    min-width: 10rem;
+  }
+  .cMenuItem {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: var(--size-1) var(--size-4);
+    gap: var(--size-4);
+    border-radius: var(--radius-1);
+    width: 100%;
+    border: solid 2px transparent;
+    justify-content: space-between;
+  }
+  .cMenuItem:hover,
+  .cMenuItem:focus,
+  .cMenuItem:active {
+    background-color: var(--menuItemHover);
+    border: var(--menuItemBorderHover);
+  }
+  .cMenuItemEnd {
+    justify-self: flex-end;
+  }
+  .cMenuTrigger {
+    display: block;
+  }
+</style>

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

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

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

@@ -0,0 +1,15 @@
+import type { ContextMenuItemProps, CreateContextMenuProps } from '@melt-ui/svelte';
+import type { Snippet } from 'svelte';
+
+export type ContextMenuItem = ContextMenuItemProps & {
+  type?: 'divider';
+  label?: string;
+  href?: string;
+  onclick?: () => void;
+  end?: Snippet;
+};
+
+export type ContextMenuProps = CreateContextMenuProps & {
+  items: ContextMenuItem[];
+  trigger: Snippet;
+};

package/src/lib/components/DrawingSliders/DrawingSliders.svelte

@@ -0,0 +1,379 @@
+<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/src/lib/components/DrawingSliders/index.ts

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