@tableslayer/ui 0.1.4 → 0.1.6

package/dist/components/Stage/shaders/ToolOutline.frag

@@ -1,59 +0,0 @@
-precision highp float;
-
-uniform vec2 uStart;
-uniform vec2 uEnd;
-uniform float uBrushSize;
-uniform vec2 uTextureSize;
-uniform int uShapeType;
-uniform vec3 uOutlineColor;
-uniform float uOutlineThickness;
-uniform float uOutlineOpacity;
-
-varying vec2 vUv;
-
-// Re-use the distance functions from Drawing.frag
-float isInsideEllipse(vec2 p, vec2 a, vec2 b) {
-  vec2 center = (a + b) / 2.0;
-  vec2 radii = abs(b - a) / 2.0;
-  vec2 p0 = p - center;
-  float value = (p0.x * p0.x) / (radii.x * radii.x) + (p0.y * p0.y) / (radii.y * radii.y);
-  vec2 scaledP = vec2(p0.x / radii.x, p0.y / radii.y);
-  float dist = (length(scaledP) - 1.0) * min(radii.x, radii.y);
-  return dist;
-}
-
-float distanceToRectangle(vec2 p, vec2 a, vec2 b) {
-  vec2 rectMin = vec2(min(a.x, b.x), min(a.y, b.y));
-  vec2 rectMax = vec2(max(a.x, b.x), max(a.y, b.y));
-  vec2 closest = vec2(clamp(p.x, rectMin.x, rectMax.x), clamp(p.y, rectMin.y, rectMax.y));
-  return length(p - closest);
-}
-
-float distanceToLine(vec2 p, vec2 a, vec2 b) {
-  vec2 pa = p - a;
-  vec2 ba = b - a;
-  float t = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
-  return length(pa - ba * t);
-}
-
-void main() {
-  vec2 pixelPos = vUv * uTextureSize;
-  float dist;
-  float outlineWidth = uOutlineThickness;
-
-  if(uShapeType == 1) { // Brush
-    dist = distanceToLine(pixelPos, uStart, uEnd);
-    float inner = smoothstep(uBrushSize - outlineWidth, uBrushSize, dist);
-    float outer = smoothstep(uBrushSize, uBrushSize + outlineWidth, dist);
-    float outline = inner - outer;
-    gl_FragColor = vec4(uOutlineColor, outline * uOutlineOpacity);
-  } else if(uShapeType == 2) { // Rectangle
-    dist = distanceToRectangle(pixelPos, uStart, uEnd);
-    float outline = smoothstep(0.0, outlineWidth, dist) - smoothstep(outlineWidth, outlineWidth * 2.0, dist);
-    gl_FragColor = vec4(uOutlineColor, outline * uOutlineOpacity);
-  } else if(uShapeType == 3) { // Ellipse
-    dist = isInsideEllipse(pixelPos, uStart, uEnd);
-    float outline = smoothstep(0.0, outlineWidth, dist) - smoothstep(outlineWidth, outlineWidth * 2.0, dist);
-    gl_FragColor = vec4(uOutlineColor, outline * uOutlineOpacity);
-  }
-}

package/dist/components/Stage/shaders/default.vert

@@ -1,8 +0,0 @@
-varying vec2 vUv;
-varying vec3 vWorldPosition;
-
-void main() {
-  vUv = uv;
-  vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}

package/dist/components/Stage/types.d.ts

@@ -1,4 +0,0 @@
-export interface Size {
-    width: number;
-    height: number;
-}

package/dist/components/Stage/types.js

@@ -1 +0,0 @@
-export {};

package/src/lib/components/Avatar/Avatar.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-  import type { AvatarProps } from './types';
-  let { src, alt, initials, variant = 'round', size = 'sm', isLoading, ...restProps }: AvatarProps = $props();
-  import { createAvatar, melt } from '@melt-ui/svelte';
-
-  let avatarClasses = $derived([
-    'avatar',
-    `avatar--${size}`,
-    isLoading && 'isLoading',
-    `avatar--${variant}`,
-    restProps.class
-  ]);
-
-  const {
-    elements: { fallback }
-  } = createAvatar({
-    src: src || ''
-  });
-</script>
-
-<div class={avatarClasses}>
-  <img {src} {alt} class="avatar__image" />
-  <span use:melt={$fallback} class="avatar__text">{initials}</span>
-</div>
-
-<style>
-  .avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: var(--fg);
-    color: var(--bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid var(--fg);
-  }
-  .avatar--round {
-    border-radius: 50%;
-  }
-  .avatar--square {
-    border-radius: var(--radius-2);
-    .avatar__image {
-      border-radius: var(--radius-2);
-    }
-  }
-  .avatar--sm {
-    width: 1.5rem;
-    height: 1.5rem;
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    font-size: 0.875rem;
-  }
-  .avatar--md {
-    width: 2rem;
-    height: 2rem;
-    min-width: 2rem;
-    min-height: 2rem;
-    font-size: var(--font-size-4);
-  }
-  .avatar--lg {
-    width: 2.5rem;
-    height: 2.5rem;
-    min-width: 2.5rem;
-    min-height: 2.5rem;
-  }
-  .avatar--xl {
-    width: 5rem;
-    height: 5rem;
-    min-width: 5rem;
-    min-height: 5rem;
-  }
-  .avatar__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-  }
-  .avatar__text {
-    font-weight: var(--font-weight-6);
-  }
-</style>

package/src/lib/components/Avatar/AvatarFileInput.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-  import { Avatar, Icon, type AvatarFileInputProps } from '../';
-  import { IconPhotoCirclePlus } from '@tabler/icons-svelte';
-
-  let {
-    files = $bindable(),
-    src,
-    alt,
-    initials,
-    isLoading,
-    size = 'xl',
-    variant = 'round',
-    onChange,
-    ...restProps
-  }: AvatarFileInputProps = $props();
-
-  let avatarPreviewUrl = $state<string | null>(src ?? null);
-  let hiddenFileInput: HTMLInputElement | null = null;
-
-  function openFileDialog() {
-    hiddenFileInput?.click();
-  }
-
-  async function handleFileChange(event: Event) {
-    const input = event.target as HTMLInputElement;
-    if (!input.files || input.files.length === 0) return;
-
-    const file = input.files[0];
-    avatarPreviewUrl = URL.createObjectURL(file);
-    if (onChange) {
-      onChange();
-    }
-    input.value = '';
-  }
-</script>
-
-<div
-  role="button"
-  onkeydown={(e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      openFileDialog();
-    }
-  }}
-  aria-label="Change Avatar"
-  tabindex="0"
-  onclick={openFileDialog}
-  class={['avatarFileInput', restProps.class]}
->
-  <Avatar src={avatarPreviewUrl || src} {alt} {initials} {isLoading} {size} {variant} {...restProps} />
-  <div class="avatarFileInput__overlay">
-    <Icon Icon={IconPhotoCirclePlus} size="2rem" stroke={2} />
-  </div>
-  <input
-    type="file"
-    bind:files
-    accept="image/*"
-    bind:this={hiddenFileInput}
-    onchange={handleFileChange}
-    style={'display: none;'}
-  />
-</div>
-
-<style>
-  .avatarFileInput {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-  .avatarFileInput__overlay {
-    position: absolute;
-    width: calc(100% - 4px);
-    height: calc(100% - 4px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: 50%;
-    opacity: 0;
-  }
-  .avatarFileInput:hover .avatarFileInput__overlay {
-    opacity: 1;
-  }
-</style>

package/src/lib/components/Avatar/AvatarPopover.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { Avatar, Popover, Icon } from '../';
-  import type { AvatarPopoverProps } from './types';
-  let {
-    src,
-    size = 'md',
-    positioning = { placement: 'bottom' },
-    content: AvatarPopoverContent
-  }: AvatarPopoverProps = $props();
-  import { IconChevronDown } from '@tabler/icons-svelte';
-</script>
-
-<Popover {positioning}>
-  {#snippet trigger()}
-    <div class="avatarPopoverTrigger">
-      <Avatar {src} {size} />
-      <Icon Icon={IconChevronDown} />
-    </div>
-  {/snippet}
-  {#snippet content()}
-    {@render AvatarPopoverContent()}
-  {/snippet}
-</Popover>
-
-<style>
-  .avatarPopoverTrigger {
-    display: flex;
-    align-items: center;
-    gap: var(--size-1);
-    padding-right: var(--size-2);
-    background: var(--contrastMedium);
-    border-radius: var(--radius-3);
-  }
-</style>

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

@@ -1,4 +0,0 @@
-export { default as Avatar } from './Avatar.svelte';
-export { default as AvatarFileInput } from './AvatarFileInput.svelte';
-export { default as AvatarPopover } from './AvatarPopover.svelte';
-export * from './types';

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

@@ -1,24 +0,0 @@
-import type { FloatingConfig } from '@melt-ui/svelte/internal/actions';
-import type { Snippet } from 'svelte';
-import type { HTMLBaseAttributes } from 'svelte/elements';
-
-export type AvatarProps = {
-  src?: string;
-  alt?: string;
-  initials?: string;
-  isLoading?: boolean;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  variant?: 'round' | 'square';
-} & HTMLBaseAttributes;
-
-export type AvatarPopoverProps = {
-  src: AvatarProps['src'];
-  size?: AvatarProps['size'];
-  content: Snippet;
-  positioning?: FloatingConfig;
-};
-
-export type AvatarFileInputProps = AvatarProps & {
-  files?: FileList | null;
-  onChange?: () => void;
-};

package/src/lib/components/BrushSizeSlider/BrushSizeSlider.svelte

@@ -1,174 +0,0 @@
-<script lang="ts">
-  interface Props {
-    brushSize: number;
-    onBrushSizeChange: (value: number) => void;
-    min?: number;
-    max?: number;
-    curve?: 'linear' | 'quadratic';
-    displayAsPercentage?: boolean;
-  }
-
-  let {
-    brushSize,
-    onBrushSizeChange,
-    min = 1,
-    max = 200,
-    curve = 'quadratic',
-    displayAsPercentage = false
-  }: Props = $props();
-
-  // For quadratic curve: size = coefficient * slider^2
-  // We want: at slider=50%, size should be at the midpoint between min and max
-  // midpoint = (min + max) / 2
-  // So: midpoint = coefficient * 50^2
-  // coefficient = midpoint / 2500
-  const midpoint = (min + max) / 2;
-  const coefficient = midpoint / 2500;
-
-  const brushSizeToSlider = (size: number): number => {
-    const clampedSize = Math.max(min, Math.min(max, size));
-
-    if (curve === 'linear') {
-      // Linear: map size range to 0-100 slider range
-      return ((clampedSize - min) / (max - min)) * 100;
-    } else {
-      // Quadratic: inverse of size = coefficient * slider^2
-      return Math.sqrt(clampedSize / coefficient);
-    }
-  };
-
-  const sliderToBrushSize = (slider: number): number => {
-    if (curve === 'linear') {
-      // Linear mapping from slider (0-100) to size range (min-max)
-      const size = min + (slider / 100) * (max - min);
-      // For linear curve (used by fog), keep decimal precision
-      // Round to 1 decimal place
-      return Math.max(min, Math.min(max, Math.round(size * 10) / 10));
-    } else {
-      // Quadratic curve (used by annotations)
-      const size = coefficient * slider * slider;
-      // For quadratic, we can round to integers as the range is small decimals (0.01-5.0)
-      // but we need to preserve decimal precision, so round to 2 decimal places
-      return Math.max(min, Math.min(max, Math.round(size * 100) / 100));
-    }
-  };
-
-  let brushSliderValue = $derived(brushSizeToSlider(brushSize));
-
-  const handleBrushSliderChange = (value: number) => {
-    const actualSize = sliderToBrushSize(value);
-    console.log('[BrushSizeSlider] Slider change:', {
-      sliderValue: value,
-      actualSize,
-      min,
-      max,
-      curve
-    });
-    onBrushSizeChange(actualSize);
-  };
-
-  // 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="brushSizeSlider">
-  <input
-    id="brush-size-slider"
-    type="range"
-    class="brushSizeSlider__input"
-    min="0"
-    max="100"
-    step="0.1"
-    value={brushSliderValue}
-    oninput={(e) => handleBrushSliderChange(Number(e.currentTarget.value))}
-    ontouchstart={handleTouchStart}
-    ontouchmove={handleTouchMove}
-  />
-  <div class="brushSizeSlider__value">{displayAsPercentage ? `${brushSize.toFixed(1)}%` : brushSize}</div>
-</div>
-
-<style>
-  .brushSizeSlider {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .brushSizeSlider__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;
-    outline: none;
-  }
-
-  /* Webkit browsers (Chrome, Safari, Edge) */
-  .brushSizeSlider__input::-webkit-slider-track {
-    width: 32px;
-    height: 120px;
-    background: transparent;
-    border: none;
-  }
-
-  .brushSizeSlider__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);
-  }
-
-  .brushSizeSlider__input::-webkit-slider-thumb:active {
-    cursor: grabbing;
-  }
-
-  /* Firefox */
-  .brushSizeSlider__input::-moz-range-track {
-    width: 32px;
-    height: 120px;
-    background: var(--contrastLow);
-    border-radius: var(--radius-2);
-  }
-
-  .brushSizeSlider__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);
-  }
-
-  .brushSizeSlider__input::-moz-range-thumb:active {
-    cursor: grabbing;
-  }
-
-  .brushSizeSlider__value {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--fg);
-    min-width: 3rem;
-    text-align: center;
-  }
-</style>

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

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

package/src/lib/components/Button/Button.svelte

@@ -1,182 +0,0 @@
-<script lang="ts">
-  import type { ButtonProps } from './types';
-  import { Loader } from '../Loading';
-  /* @type {ButtonProps} */
-  let {
-    children,
-    start,
-    end,
-    isLoading = false,
-    isDisabled = false,
-    size = 'md',
-    variant = 'primary',
-    href,
-    as,
-    ...restProps
-  }: ButtonProps = $props();
-
-  let btnClasses = $derived([
-    'btn',
-    `btn--${size}`,
-    isLoading && 'btn-isLoading',
-    isDisabled && 'btn--isDisabled',
-    `btn--${variant}`,
-    restProps.class ?? ''
-  ]);
-
-  const component = as !== undefined ? as : href !== undefined ? 'a' : 'button';
-
-  let buttonProps = $state({});
-  if (component === 'button') {
-    buttonProps = { disabled: isDisabled };
-  } else if (component === 'a') {
-    buttonProps = { href };
-  }
-</script>
-
-<!--
-@component
-  ## Button
-
-  Button component is used to trigger an action or event.
-
-  @example
-  ```svelte
-  <Button>
-    {#snippet start()}
-      <Icon Icon={IconCheck} />
-    {/snippet}
-    Primary
-  </Button>
-  ```
-  @props
-  - `variant` - The variant of the button. Default is `primary`.
-  - `size` - The size of the button. Default is `md`.
-  - `isLoading` - The loading state of the button. Default is `false`.
-  - `isDisabled` - The disabled state of the button. Default is `false`.
-  - `start` - The start snippet of the button.
-  - `end` - The end snippet of the button.
--->
-
-<svelte:element this={component} {...buttonProps} {...restProps} class={btnClasses}>
-  {#if isLoading}
-    <Loader />
-  {/if}
-  {#if start}
-    {@render start()}
-  {/if}
-  {@render children()}
-  {#if end}
-    {@render end()}
-  {/if}
-</svelte:element>
-
-<style>
-  :global(.light) {
-    color-scheme: light;
-    --btn-bg: var(--contrastEmpty);
-    --btn-bgHover: var(--primary-50);
-    --btn-border: solid 2px var(--fg);
-    --btn-borderHover: solid 2px var(--primary-600);
-    --btn-color: var(--fg);
-    --btn-dangerStripesHover: var(--primary-300);
-    --btn-bgSpecial: var(--primary-100);
-  }
-
-  :global(.dark) {
-    color-scheme: dark;
-    --btn-bg: var(--bg);
-    --btn-bgHover: var(--primary-950);
-    --btn-border: solid 2px var(--fg);
-    --btn-borderHover: solid 2px var(--primary-500);
-    --btn-color: var(--fg);
-    --btn-dangerStripesHover: var(--primary-700);
-    --btn-bgSpecial: var(--primary-900);
-  }
-
-  .btn {
-    color: var(--btn-color);
-    background-color: var(--btn-bg);
-    padding: 0 var(--size-2);
-    border-radius: var(--radius-2);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--size-2);
-    cursor: pointer;
-    border: var(--btn-border);
-    border-color: transparent;
-    font-family: var(--font-sans);
-    font-weight: 600;
-    white-space: nowrap;
-  }
-
-  .btn--sm {
-    font-size: var(--font-size-1);
-    height: var(--size-6);
-  }
-  .btn--md {
-    font-size: var(--font-size-1);
-    height: var(--size-8);
-  }
-  .btn--lg {
-    font-size: var(--font-size-2);
-    height: var(--size-9);
-  }
-
-  .btn--primary {
-    border-color: var(--fg);
-  }
-  .btn--danger {
-    border-color: var(--fg);
-    background-image: linear-gradient(
-      135deg,
-      transparent 10%,
-      transparent 10%,
-      transparent 50%,
-      color-mix(in srgb, var(--fg), transparent 40%) 50%,
-      color-mix(in srgb, var(--fg), transparent 40%) 50%,
-      transparent 60%,
-      transparent 100%
-    );
-    background-size: 14.14px 14.14px;
-    text-shadow: 0 0 4px var(--bg);
-  }
-  .btn--danger:hover {
-    background-image: linear-gradient(
-      135deg,
-      transparent 10%,
-      transparent 10%,
-      transparent 50%,
-      var(--btn-dangerStripesHover),
-      var(--btn-dangerStripesHover),
-      transparent 60%,
-      transparent 100%
-    );
-  }
-  .btn--special {
-    border: var(--btn-borderHover);
-    background: var(--btn-bgSpecial);
-  }
-  .btn:hover {
-    background-color: var(--btn-bgHover);
-    border: var(--btn-borderHover);
-  }
-  .btn--isDisabled {
-    cursor: pointer;
-  }
-  .btn--ghost {
-    background: none;
-    border-color: transparent;
-  }
-  .btn--link {
-    background: none;
-    border-color: transparent;
-    color: var(--fgPrimary);
-  }
-  .btn--link:hover {
-    background: none;
-    border-color: transparent;
-    text-decoration: underline;
-  }
-</style>