@tableslayer/ui 0.0.1

package/LICENSE.md

@@ -0,0 +1,105 @@
+# Functional Source License, Version 1.1, ALv2 Future License
+
+## Abbreviation
+
+FSL-1.1-ALv2
+
+## Notice
+
+Copyright 2024-2025 Siege Perilous LLC
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the Apache License, Version 2.0 that is effective on the second anniversary of
+the date we make the Software available. On or after that date, you may use the
+Software under the Apache License, Version 2.0, in which case the following
+will apply:
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License.
+
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.

package/README.md

@@ -0,0 +1,45 @@
+# @tableslayer/ui
+
+A Svelte 5 component library for building Table Slayer applications.
+
+## Installation
+
+```bash
+pnpm add @tableslayer/ui
+```
+
+### Peer dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+pnpm add svelte @sveltejs/kit @melt-ui/svelte
+```
+
+## Usage
+
+Import components and styles in your Svelte application:
+
+```svelte
+<script>
+  import { Button, Text, Icon } from '@tableslayer/ui';
+  import '@tableslayer/ui/styles/globals.css';
+</script>
+
+<Button>Click me</Button>
+```
+
+## Available components
+
+The library includes:
+
+- Layout components (Box, Container, etc.)
+- Form components (Button, Input, Select, etc.)
+- Typography components (Text, Heading, etc.)
+- Feedback components (Toast, Dialog, etc.)
+- Navigation components (Tabs, Menu, etc.)
+- And more
+
+## License
+
+FSL-1.1-ALv2 - See [LICENSE.md](./LICENSE.md) for details.

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

@@ -0,0 +1,4 @@
+import type { AvatarProps } from './types';
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

@@ -0,0 +1,4 @@
+import { type AvatarFileInputProps } from '../';
+declare const AvatarFileInput: import("svelte").Component<AvatarFileInputProps, {}, "files">;
+type AvatarFileInput = ReturnType<typeof AvatarFileInput>;
+export default AvatarFileInput;

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

@@ -0,0 +1,4 @@
+import type { AvatarPopoverProps } from './types';
+declare const AvatarPopover: import("svelte").Component<AvatarPopoverProps, {}, "">;
+type AvatarPopover = ReturnType<typeof AvatarPopover>;
+export default AvatarPopover;

package/dist/components/Avatar/index.d.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/dist/components/Avatar/index.js

@@ -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/dist/components/Avatar/types.d.ts

@@ -0,0 +1,21 @@
+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/dist/components/Avatar/types.js

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

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

@@ -0,0 +1,11 @@
+interface Props {
+    brushSize: number;
+    onBrushSizeChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    curve?: 'linear' | 'quadratic';
+    displayAsPercentage?: boolean;
+}
+declare const BrushSizeSlider: import("svelte").Component<Props, {}, "">;
+type BrushSizeSlider = ReturnType<typeof BrushSizeSlider>;
+export default BrushSizeSlider;

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

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

package/dist/components/BrushSizeSlider/index.js

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