@tableslayer/ui 0.0.1 → 0.1.4

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tableslayer/ui",
-  "version": "0.0.1",
+  "version": "0.1.4",
   "license": "FSL-1.1-ALv2",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tableslayer/tableslayer.git",
+    "url": "https://github.com/Siege-Perilous/tableslayer.git",
     "directory": "packages/ui"
   },
   "author": "Siege Perilous LLC",
@@ -15,7 +15,7 @@
     "ui",
     "tableslayer"
   ],
-  "homepage": "https://github.com/tableslayer/tableslayer/tree/main/packages/ui",
+  "homepage": "https://github.com/Siege-Perilous/tableslayer/tree/main/packages/ui",
   "scripts": {
     "dev": "typedoc && pnpm check:watch",
     "build": "svelte-kit sync && vite build && npm run package",
@@ -45,21 +45,10 @@
   },
   "files": [
     "dist",
+    "src/lib",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "svelte": "./dist/index.js"
-      },
-      "./styles/*.css": {
-        "import": "./dist/styles/*.css",
-        "require": "./dist/styles/*.css"
-      }
-    }
-  },
   "peerDependencies": {
     "@melt-ui/svelte": "^0.86.2",
     "@sveltejs/kit": "^2.16.0",

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

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

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

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

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

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

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

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

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

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