@tableslayer/ui 0.1.3 → 0.1.4

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

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

package/src/lib/components/FogSliders/FogSliders.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { BrushSizeSlider } from '../BrushSizeSlider';
+
+  interface Props {
+    brushSize: number;
+    onBrushSizeChange: (value: number) => void;
+  }
+
+  let { brushSize, onBrushSizeChange }: Props = $props();
+</script>
+
+<div class="fogSliders">
+  <BrushSizeSlider {brushSize} {onBrushSizeChange} min={5} max={20} curve="linear" displayAsPercentage={true} />
+</div>
+
+<style>
+  .fogSliders {
+    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;
+  }
+</style>

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

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

package/src/lib/components/Hr/Hr.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  let { ...restProps } = $props();
+
+  let hrClasses = $derived(['hr', restProps.class ?? '']);
+</script>
+
+<hr class={hrClasses} {...restProps} />
+
+<style>
+  .hr {
+    height: 1px;
+    width: 100%;
+    background: var(--contrastMedium);
+  }
+</style>

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

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

package/src/lib/components/Icon/Icon.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { IconProps } from './types';
+  let { Icon, size = '1rem', color, stroke = 2, ...restProps }: IconProps = $props();
+</script>
+
+<Icon {size} {color} {stroke} {...restProps} style={`min-width: ${size};min-height: ${size}`}></Icon>

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

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.svelte';
+export type { IconProps } from './types';

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

@@ -0,0 +1,20 @@
+import type { HTMLBaseAttributes } from 'svelte/elements';
+
+export type IconProps = {
+  /**
+   * Any icon from [tabler-icons](https://tabler.io/icons)
+   */
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  Icon: any;
+  /**
+   * The size of the icon.
+   * @default 24
+   */
+  size?: number | string;
+  /**
+   * The color of the icon.
+   * @default 'currentColor'
+   * */
+  color?: string;
+  stroke?: number;
+} & HTMLBaseAttributes;

package/src/lib/components/Input/DualInputSlider.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import { type DualInputSliderProps } from './types';
+
+  let {
+    valueStart = $bindable(),
+    valueEnd = $bindable(),
+    min,
+    max,
+    step,
+    color = 'var(--fg)',
+    ...restProps
+  }: DualInputSliderProps = $props();
+
+  const sliderClasses = $derived(['dualInputSlider', restProps.class ?? '']);
+
+  function handleInputStart(event: Event) {
+    let newValue = parseFloat((event.target as HTMLInputElement).value);
+    newValue = Math.round(newValue / step) * step; // Fix floating-point precision
+    valueStart = Math.min(newValue, valueEnd - step); // Ensure start does not exceed end
+  }
+
+  function handleInputEnd(event: Event) {
+    let newValue = parseFloat((event.target as HTMLInputElement).value);
+    newValue = Math.round(newValue / step) * step; // Fix floating-point precision
+    valueEnd = Math.max(newValue, valueStart + step); // Ensure end is greater than start
+  }
+
+  // ✅ Corrected track position calculations
+  const leftPos = $derived(() => ((valueStart - min) / (max - min)) * 100);
+  const rightPos = $derived(() => 100 - ((valueEnd - min) / (max - min)) * 100);
+</script>
+
+<div class="dualInputSlider__wrap">
+  <div class="dualInputSlider__bgTrack">
+    <div
+      class="dualInputSlider__activeTrack"
+      style={`left: ${leftPos()}%;
+            right: ${rightPos()}%;
+            background: ${color};`}
+    ></div>
+
+    <input type="range" {min} {max} {step} bind:value={valueStart} oninput={handleInputStart} class={sliderClasses} />
+    <input type="range" {min} {max} {step} bind:value={valueEnd} oninput={handleInputEnd} class={sliderClasses} />
+  </div>
+</div>
+
+<style>
+  .dualInputSlider__wrap {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    height: 2rem;
+  }
+  .dualInputSlider__bgTrack {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    display: flex;
+    align-items: center;
+    background: var(--inputBorderColor);
+  }
+
+  .dualInputSlider {
+    -webkit-appearance: none;
+    appearance: none;
+    position: absolute;
+    appearance: none;
+    position: absolute;
+    width: 100%;
+    height: 3px;
+    pointer-events: none;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 3;
+  }
+
+  .dualInputSlider::-webkit-slider-thumb {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    border: 2px solid white;
+    background-color: var(--inputBorderColor);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
+    pointer-events: all;
+    cursor: pointer;
+  }
+  .dualInputSlider::-moz-range-thumb {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    border: 2px solid white;
+    background-color: var(--inputBorderColor);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
+    pointer-events: all;
+    cursor: pointer;
+  }
+
+  .dualInputSlider__activeTrack {
+    position: absolute;
+    z-index: 1;
+    height: 3px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  @media (pointer: coarse) {
+    .dualInputSlider__activeTrack {
+      height: 1rem;
+      border-radius: var(--radius-2);
+    }
+    .dualInputSlider__bgTrack {
+      height: 1rem;
+      border-radius: var(--radius-2);
+    }
+    .dualInputSlider::-webkit-slider-thumb {
+      width: 1rem;
+      height: 1rem;
+    }
+    .dualInputSlider::-moz-range-thumb {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+</style>

package/src/lib/components/Input/FileInput.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { FileInputProps } from './types';
+  import { onDestroy, createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher<{
+    fileSelect: File;
+  }>();
+
+  let {
+    value = $bindable(),
+    files = $bindable(),
+    variant = 'default',
+    accept = 'image/png, image/jpeg, image/webp, image/gif',
+    showPreviews = true,
+    ...restProps
+  }: FileInputProps = $props();
+
+  let inputClasses = $derived(['fileInput', variant && `fileInput--${variant}`, restProps.class ?? '']);
+
+  // Default label text based on accept prop
+  let labelText = $derived(() => {
+    if (accept.includes('image/')) {
+      return 'Select an image';
+    } else if (accept.includes('.json')) {
+      return 'Select a file';
+    } else {
+      return 'Select a file';
+    }
+  });
+
+  // Array to keep track of generated object URLs for cleanup
+  let generatedUrls: string[] = [];
+
+  // Function to clean up generated URLs
+  const previousUrlsCleanup = () => {
+    for (const url of generatedUrls) {
+      URL.revokeObjectURL(url);
+    }
+    generatedUrls = [];
+  };
+
+  // Function to check if file is an image
+  const isImageFile = (file: File): boolean => {
+    return file.type.startsWith('image/');
+  };
+
+  // Create a derived value for preview URLs based on `files`
+  let previewUrls = $derived.by(() => {
+    if (files && files.length > 0 && showPreviews) {
+      const urls = [];
+      for (const file of files) {
+        // Only create previews for image files
+        if (file && isImageFile(file)) {
+          const objectUrl = URL.createObjectURL(file);
+          urls.push(objectUrl);
+          generatedUrls.push(objectUrl); // Keep track of generated URLs for cleanup
+        }
+      }
+      return urls;
+    }
+    return [];
+  });
+
+  // Handle file selection
+  function handleFileChange() {
+    if (files && files.length > 0) {
+      // Dispatch the first file
+      dispatch('fileSelect', files[0]);
+    }
+  }
+
+  // Clean up the object URLs to prevent memory leaks when the component is destroyed
+  onDestroy(() => {
+    previousUrlsCleanup();
+  });
+</script>
+
+<div class={inputClasses}>
+  {#if variant === 'dropzone'}
+    <label class="fileInput__dropZoneLabel" for={restProps.id}><div>{labelText}</div></label>
+  {/if}
+  <!-- File input with configurable accept attribute -->
+  <input bind:files type="file" class="fileInput__input" {accept} onchange={handleFileChange} {...restProps} />
+
+  <!-- Display previews for image files if showPreviews is true -->
+  {#if showPreviews}
+    {#each previewUrls as previewUrl}
+      <img src={previewUrl} alt="Preview" class="fileInput__preview" />
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .fileInput {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .fileInput__input::file-selector-button {
+    background: var(--inputBg);
+    padding: 0 var(--size-2);
+    color: var(--fg);
+    border: var(--borderThin);
+    border-radius: var(--radius-2);
+    padding: 0.25rem 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .fileInput__input::file-selector-button:hover {
+    background: var(--inputFocusBg);
+  }
+  [data-fs-error] {
+    border-color: var(--fgDanger);
+  }
+  .fileInput__preview {
+    max-width: 8rem;
+    max-height: 8rem;
+    margin-top: 1rem;
+    margin-right: 0.5rem;
+  }
+  .fileInput--dropzone {
+    width: 100%;
+    max-width: 100%;
+    cursor: pointer;
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+  }
+
+  .fileInput--dropzone .fileInput__preview {
+    margin: 0;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+  }
+  .fileInput--dropzone input {
+    visibility: hidden;
+    display: none;
+  }
+  .fileInput--dropzone .fileInput__dropZoneLabel {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    top: 0;
+    left: 0;
+  }
+  .fileInput--dropzone .fileInput__dropZoneLabel div {
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-1);
+    font-size: 0.85rem;
+  }
+  .fileInput--transparent {
+    .fileInput__input {
+      opacity: 0;
+      border: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .fileInput__preview {
+      display: none;
+    }
+  }
+</style>

package/src/lib/components/Input/FormControl.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Label } from './';
+  import type { HTMLBaseAttributes } from 'svelte/elements';
+  import { IconX } from '@tabler/icons-svelte';
+  import { Icon } from '../';
+  import { type $ZodIssue } from 'zod/v4/core';
+  import { v4 as uuidv4 } from 'uuid';
+  type Props = {
+    /**
+     * The input component that will be rendered
+     */
+    input: Snippet<
+      [
+        {
+          inputProps: {
+            id: string;
+            name: string;
+            'aria-describedby'?: string;
+            'aria-invalid'?: boolean;
+          };
+        }
+      ]
+    >;
+    /**
+     * The label for the input
+     */
+    label?: string;
+    /**
+     * A snippet that will be rendered at the start of the input
+     */
+    start?: Snippet;
+    /**
+     * A snippet that will be rendered at the end of the input
+     */
+    end?: Snippet;
+    /**
+     * The name needs to match a "path" in our zod schema
+     */
+    name: string;
+    /**
+     * This shape matches what returns from zod / mutation factories
+     */
+    errors?: $ZodIssue[];
+  } & HTMLBaseAttributes;
+
+  let { input, label, start, name, errors, end, ...restProps }: Props = $props();
+  let error = $derived(errors?.find((error) => error.path.includes(name)));
+
+  const id = `control-${uuidv4()}`;
+
+  let inputProps = $derived.by(() => {
+    return {
+      id,
+      name,
+      'aria-describedby': error && `error-${id}`,
+      'aria-invalid': !!error
+    };
+  });
+
+  let inputWrapperClasses = $derived([
+    'control__inputWrapper',
+    start && 'control__inputWrapper--start',
+    end && 'control__inputWrapper--end'
+  ]);
+  const controlClasses = $derived(['control', error && 'control--isError', restProps.class ?? '']);
+</script>
+
+<div class={controlClasses}>
+  <Label class="control__label" for={id}>{label}</Label>
+  <div class={inputWrapperClasses}>
+    {#if start}
+      <div class="control__start">{@render start()}</div>
+    {/if}
+    {@render input({ inputProps })}
+    {#if end}
+      <div class="control__end">{@render end()}</div>
+    {/if}
+  </div>
+  {#if error}
+    <div class="control__error" id={`error-${id}`}>
+      <Icon Icon={IconX} class="control__errorIcon" />
+      {error.message}
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* global required for children */
+  :global {
+    .control__inputWrapper--start input.input {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .control__inputWrapper--end input.input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .control__erorIcon {
+      margin-top: 1px;
+    }
+  }
+  .control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-1);
+    width: 100%;
+  }
+  .control__inputWrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  .control__start,
+  .control__end {
+    display: flex;
+    align-items: center;
+    height: var(--size-8);
+    border: var(--borderThin);
+    border-color: var(--inputBorderColor);
+    padding: 0 var(--size-3);
+    background: var(--contrastLow);
+    color: var(--fgMuted);
+  }
+  .control__start {
+    border-top-left-radius: var(--radius-2);
+    border-bottom-left-radius: var(--radius-2);
+    border-right: none;
+  }
+  .control__end {
+    border-top-right-radius: var(--radius-2);
+    border-bottom-right-radius: var(--radius-2);
+    border-left: none;
+  }
+  .control__error {
+    display: inline-flex;
+    gap: var(--size-1);
+    color: var(--fgDanger);
+    font-size: var(--font-size-1);
+    font-weight: var(--font-weight-6);
+    margin-top: var(--size-1);
+    border-radius: var(--size-2);
+    min-height: var(--size-7);
+    align-items: center;
+  }
+
+  :global(.control .control__label) {
+    display: block;
+  }
+</style>

package/src/lib/components/Input/FormError.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { IconX } from '@tabler/icons-svelte';
+  import { Icon } from '../';
+  import { type $ZodIssue } from 'zod/v4/core';
+
+  type FormMutationResponse = {
+    success: boolean;
+    status: number;
+    message: string;
+    errors?: $ZodIssue[];
+  };
+  let { error }: { error?: FormMutationResponse } = $props();
+</script>
+
+{#if error}
+  <div class="formError" data-testid="formError">
+    <Icon Icon={IconX} class="formErrorIcon" />
+    <p>{error.message}</p>
+  </div>
+{/if}
+
+<style>
+  :global(.formErrorIcon) {
+    margin-top: 2px;
+  }
+  .formError {
+    display: flex;
+    gap: var(--size-1);
+    color: var(--fgDanger);
+    font-size: var(--font-size-1);
+    font-weight: var(--font-weight-6);
+    margin-top: 1rem;
+    border-radius: var(--size-2);
+    min-height: var(--size-7);
+    align-items: start;
+  }
+</style>

package/src/lib/components/Input/Input.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { InputProps } from './types';
+  let {
+    value = $bindable(),
+    element = $bindable(),
+    variant = 'default',
+    hideAutocomplete,
+    ...restProps
+  }: InputProps = $props();
+
+  const inputClasses = $derived(['input', variant && `input--${variant}`, restProps.class ?? '']);
+  let autoCompleteOffAttrs = hideAutocomplete
+    ? {
+        autocomplete: 'off' as const,
+        'data-1p-ignore': 'true' as const,
+        'data-lpignore': 'true' as const
+      }
+    : {};
+</script>
+
+<input bind:this={element} bind:value {...restProps} {...autoCompleteOffAttrs} class={inputClasses} />
+
+<style>
+  .input {
+    height: var(--size-8);
+    font-family: var(--font-sans);
+    border: var(--borderThin);
+    border-color: var(--inputBorderColor);
+    border-radius: var(--radius-2);
+    padding: 0 var(--size-3);
+    background: var(--inputBg);
+    width: 100%;
+    &:focus-visible {
+      outline: none;
+      border-color: var(--fg);
+      background: var(--inputFocusBg);
+    }
+  }
+  .input::placeholder {
+    color: var(--fgMuted);
+  }
+  .input--transparent {
+    border-color: transparent;
+    background: transparent;
+    &:hover {
+      border-color: var(--inputBorderColor);
+    }
+  }
+  .input[type='text'] {
+    cursor: text;
+  }
+  [data-fs-error],
+  [aria-invalid='true'] {
+    border-color: var(--fgDanger);
+  }
+</style>