@tableslayer/ui 0.1.4 → 0.1.5

package/src/lib/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/src/lib/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/src/lib/components/Stage/types.ts

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

package/src/lib/components/Table/Table.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import type { TableProps } from './types';
-  let { children, ...restProps }: TableProps = $props();
-  let tableClasses = $derived(['table', restProps.class ?? '']);
-</script>
-
-<table {...restProps} class={tableClasses}>
-  {@render children()}
-</table>
-
-<style>
-  .table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-</style>

package/src/lib/components/Table/Td.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import type { TdProps } from './types';
-  let { children, ...restProps }: TdProps = $props();
-  let tdClasses = $derived(['td', restProps.class ?? '']);
-</script>
-
-<td {...restProps} class={tdClasses}>
-  {@render children()}
-</td>
-
-<style>
-  .td {
-    text-align: left;
-    padding: var(--size-1) var(--size-3);
-    border-bottom: var(--borderThin);
-  }
-</style>

package/src/lib/components/Table/Th.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import type { ThProps } from './types';
-  let { children, ...restProps }: ThProps = $props();
-  let thClasses = $derived(['th', restProps.class ?? '']);
-</script>
-
-<th {...restProps} class={thClasses}>
-  {@render children()}
-</th>
-
-<style>
-  .th {
-    text-align: left;
-    font-weight: var(--font-weight-6);
-    padding: var(--size-1) var(--size-3);
-    border-bottom: var(--borderThin);
-  }
-</style>

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

@@ -1,4 +0,0 @@
-export { default as Table } from './Table.svelte';
-export { default as Td } from './Td.svelte';
-export { default as Th } from './Th.svelte';
-export * from './types';

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

@@ -1,14 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLTableAttributes, HTMLThAttributes } from 'svelte/elements';
-
-export type TableProps = {
-  children: Snippet;
-} & HTMLTableAttributes;
-
-export type ThProps = {
-  children: Snippet;
-} & HTMLThAttributes;
-
-export type TdProps = {
-  children: Snippet;
-} & HTMLThAttributes;

package/src/lib/components/Text/Text.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import type { TextProps } from './types';
-  let { children, as = 'p', size = '1rem', color = 'var(--fg)', weight = 400, ...restProps }: TextProps = $props();
-  let titleClasses = $derived(['text', restProps.class ?? '']);
-</script>
-
-<svelte:element
-  this={as}
-  {...restProps}
-  class={titleClasses}
-  style="--textFontWeight: {weight}; --textColor: {color}; --textSize: {size}"
->
-  {@render children()}
-</svelte:element>
-
-<style>
-  .text {
-    line-height: 1.5;
-    font-size: var(--textSize);
-    color: var(--textColor);
-    font-weight: var(--textFontWeight);
-  }
-</style>

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

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

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

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-export type TextProps = {
-  children: Snippet;
-  as?: 'p' | 'span';
-  size?: string;
-  weight?: number;
-  color?: string;
-  style?: string;
-  pretty?: boolean;
-} & HTMLAttributes<HTMLHeadingElement>;

package/src/lib/components/Title/Title.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import type { TitleProps } from './types';
-  let { children, as = 'p', size, style, ...restProps }: TitleProps = $props();
-  let titleClasses = $derived(['title', `title-${size}`, restProps.class ?? '']);
-</script>
-
-<svelte:element this={as} {...restProps} class={titleClasses} {style}>
-  {@render children()}
-</svelte:element>
-
-<style>
-  .title {
-    font-family: var(--font-serif);
-    font-variation-settings:
-      'wght' 600,
-      'TAIL' 100,
-      'ROUN' 50;
-  }
-
-  .title-xs {
-    font-size: 1.25rem;
-  }
-
-  .title-sm {
-    font-size: 1.5rem;
-  }
-
-  .title-md {
-    font-size: 2.5rem;
-  }
-
-  .title-lg {
-    font-size: 3rem;
-  }
-
-  .title-xl {
-    font-size: 4.5rem;
-    font-feature-settings: 'ss03' 1;
-  }
-  @media (max-width: 768px) {
-    .title-lg {
-      font-size: 1.25rem;
-    }
-    .title-md {
-      font-size: 1.25rem;
-    }
-    .title-sm {
-      font-size: 1.25rem;
-    }
-    .title-xl {
-      font-size: 1.25rem;
-    }
-  }
-</style>

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

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

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

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-export type TitleProps = {
-  children: Snippet;
-  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  style?: string;
-} & HTMLAttributes<HTMLHeadingElement>;

package/src/lib/components/Toast/Toast.svelte

@@ -1,155 +0,0 @@
-<script lang="ts" module>
-  import type { ToastDataProps } from './types';
-  import { flip } from 'svelte/animate';
-  import { fly } from 'svelte/transition';
-  import { IconX } from '@tabler/icons-svelte';
-  import { Icon, Loader } from '../';
-  import { page } from '$app/state';
-  const {
-    elements: { content, title, description, close },
-    helpers,
-    states: { toasts },
-    actions: { portal }
-  } = createToaster<ToastDataProps>({ hover: 'pause-all' });
-
-  let isHovered = $state(false);
-  let leaveTimeout: ReturnType<typeof setTimeout>;
-
-  const handleMouseEnter = () => {
-    if (leaveTimeout) {
-      clearTimeout(leaveTimeout);
-    }
-    isHovered = true;
-  };
-
-  const handleMouseLeave = () => {
-    leaveTimeout = setTimeout(() => {
-      isHovered = false;
-    }, 1000);
-  };
-
-  export const addToast = helpers.addToast;
-</script>
-
-<script lang="ts">
-  import { checkToastCookie } from './toastCookie';
-  $effect(() => {
-    if (page.url) {
-      checkToastCookie();
-    }
-  });
-  import { createToaster, melt } from '@melt-ui/svelte';
-</script>
-
-<div
-  use:portal
-  role="alert"
-  class={['toasts', isHovered && 'toasts--isHovered']}
-  onmouseenter={handleMouseEnter}
-  onmouseleave={handleMouseLeave}
->
-  {#each $toasts as { id, data }, index (id)}
-    <div
-      use:melt={$content(id)}
-      animate:flip={{ duration: 500 }}
-      in:fly={{ duration: 150, y: '100%' }}
-      out:fly={{ duration: 150, y: '100%' }}
-      data-testid="toast"
-      class="toast"
-      style="z-index: index; visibility: {index > $toasts.length - 6 || isHovered
-        ? 'visible'
-        : 'hidden'} ; transform: {index === $toasts.length - 1 || isHovered
-        ? 'scale(1) translateY(0)'
-        : `scale(${1 - 0.05 * ($toasts.length - 1 - index)}) translateY(${-12 * ($toasts.length - 1 - index)}px)`};"
-    >
-      <div>
-        <div class="toast__title">
-          <p use:melt={$title(id)} class="toast__titleText">
-            {data.title}
-          </p>
-          {#if data.type === 'loading'}
-            <Loader />
-          {:else}
-            <div class={['toast__titleDot', `toast__titleDot--${data.type}`]}></div>
-          {/if}
-        </div>
-        {#if data.body}
-          <div use:melt={$description(id)}>
-            {data.body}
-          </div>
-        {/if}
-      </div>
-      <button use:melt={$close(id)} aria-label="Close notification"><Icon Icon={IconX} /></button>
-    </div>
-  {/each}
-</div>
-
-<style>
-  :global(.light) {
-    --toastDotSuccess: var(--green-200);
-    --toastDotDanger: var(--yellow-200);
-  }
-  :global(.dark) {
-    --toastDotSuccess: var(--green-600);
-    --toastDotDanger: var(--yellow-600);
-  }
-  .toasts {
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-2); /* Reduced gap to allow overlapping look */
-    width: 300px;
-    position: fixed;
-    right: var(--size-8);
-    bottom: var(--size-8);
-    z-index: 2;
-  }
-  .toast {
-    position: fixed;
-    right: var(--size-8);
-    bottom: var(--size-8);
-    display: flex;
-    justify-content: space-between;
-    align-items: start;
-    background: var(--fg);
-    color: var(--bg);
-    gap: var(--size-2);
-    width: 300px;
-    padding: var(--size-2);
-    border-radius: var(--radius-2);
-    box-shadow: var(--shadow-2);
-    border: 1px solid var(--bg);
-    transition:
-      transform 0.3s ease-in-out,
-      opacity 0.3s ease-in-out;
-  }
-  .toast__title {
-    display: flex;
-    align-items: start;
-    gap: var(--size-2);
-  }
-  .toast__titleText {
-    font-weight: var(--font-weight-6);
-  }
-  .toasts.toasts--isHovered .toast {
-    position: static;
-    transition: none;
-  }
-  .toast__titleDot {
-    width: var(--size-2);
-    height: var(--size-2);
-    min-width: var(--size-2);
-    min-height: var(--size-2);
-    margin-top: var(--size-1);
-    border-radius: 50%;
-  }
-
-  .toast__titleDot--info {
-    background: var(--contrastHigh);
-  }
-  .toast__titleDot--success {
-    background: var(--toastDotSuccess);
-  }
-  .toast__titleDot--danger {
-    background: var(--toastDotDanger);
-  }
-</style>

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

@@ -1,5 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck https://github.com/sveltejs/svelte/issues/7304
-export { default as Toast, addToast } from './Toast.svelte';
-export * from './toastCookie';
-export * from './types';

package/src/lib/components/Toast/toastCookie.ts

@@ -1,24 +0,0 @@
-import type { RequestEvent } from '@sveltejs/kit';
-import { addToast } from '../';
-
-export const setToastCookie = (
-  event: RequestEvent,
-  { title, type, body }: { title: string; type: string; body?: string }
-) => {
-  event.cookies.set('toast', JSON.stringify({ title, type, body }), {
-    path: '/',
-    httpOnly: false,
-    sameSite: 'lax',
-    maxAge: 5
-  });
-};
-
-export const checkToastCookie = () => {
-  const toastCookie = document.cookie.split('; ').find((row) => row.startsWith('toast='));
-
-  if (toastCookie) {
-    const toastData = JSON.parse(decodeURIComponent(toastCookie.split('=')[1]));
-    addToast({ data: { title: toastData.title, type: toastData.type } });
-    document.cookie = 'toast=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT';
-  }
-};

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

@@ -1,6 +0,0 @@
-import type { HTMLBaseAttributes } from 'svelte/elements';
-export type ToastDataProps = {
-  title: string;
-  body?: string | undefined;
-  type: 'success' | 'danger' | 'info' | 'loading';
-} & HTMLBaseAttributes;

package/src/lib/components/ToolTip/ToolTip.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-  import { createTooltip, melt } from '@melt-ui/svelte';
-  import { fade } from 'svelte/transition';
-  import type { ToolTipProps } from './types';
-
-  let {
-    children,
-    positioning = { placement: 'top' },
-    defaultOpen = false,
-    openDelay = 0,
-    closeDelay = 0,
-    closeOnPointerDown = false,
-    forceVisible = true,
-    disableHoverableContent = false,
-    toolTipContent
-  }: ToolTipProps = $props();
-
-  const {
-    elements: { trigger, content, arrow },
-    states: { open }
-  } = createTooltip({
-    disableHoverableContent,
-    positioning,
-    defaultOpen,
-    openDelay,
-    closeDelay,
-    closeOnPointerDown,
-    forceVisible
-  });
-</script>
-
-<div class="trigger" use:melt={$trigger}>
-  {@render children()}
-</div>
-
-{#if $open}
-  <div use:melt={$content} transition:fade={{ duration: 100 }} class="tooltip">
-    <div use:melt={$arrow}></div>
-    {@render toolTipContent()}
-  </div>
-{/if}
-
-<style>
-  :global(.dark) {
-    color-scheme: dark;
-    --tooltip-bg: var(--fg);
-    --tooltip-color: var(--bg);
-  }
-  :global(.light) {
-    color-scheme: light;
-    --tooltip-bg: var(--fg);
-    --tooltip-color: var(--bg);
-  }
-  .tooltip {
-    padding: var(--size-1) var(--size-2);
-    background: var(--tooltip-bg);
-    color: var(--tooltip-color);
-    border-radius: var(--radius-1);
-    box-shadow: var(--shadow-1);
-    z-index: 1000;
-    text-align: center;
-    text-wrap: balance;
-  }
-  .trigger {
-    max-width: 100px;
-    display: block;
-    align-items: center;
-    justify-content: center;
-  }
-</style>

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

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

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

@@ -1,14 +0,0 @@
-import type { Snippet } from 'svelte';
-export type ToolTipProps = {
-  children: Snippet;
-  positioning?: {
-    placement: 'top' | 'right' | 'bottom' | 'left';
-  };
-  defaultOpen?: boolean;
-  openDelay?: number;
-  closeDelay?: number;
-  closeOnPointerDown?: boolean;
-  forceVisible?: boolean;
-  disableHoverableContent?: boolean;
-  toolTipContent: Snippet;
-};

package/src/lib/components/index.ts

@@ -1,32 +0,0 @@
-export * from './Avatar';
-export * from './BrushSizeSlider';
-export * from './Button';
-export * from './CardFan';
-export * from './CodeBlock';
-export * from './ColorMode';
-export * from './ColorPicker';
-export * from './ContextMenu';
-export * from './DrawingSliders';
-export * from './Editor';
-export * from './FogSliders';
-export * from './Hr';
-export * from './Icon';
-export * from './Input';
-export * from './Link';
-export * from './Loading';
-export * from './Logo';
-export * from './Menu';
-export { default as MyCounterButton } from './MyCounterButton.svelte';
-export * from './Panel';
-export * from './PersistButton';
-export * from './Popover';
-export { default as PropsTable } from './PropsTable/PropsTable.svelte';
-export * from './RadialMenu';
-export * from './Select';
-export * from './Spacer';
-export * from './Stage';
-export * from './Table';
-export * from './Text';
-export * from './Title';
-export * from './Toast';
-export * from './ToolTip';

package/src/lib/index.ts

@@ -1,2 +0,0 @@
-export * from './components';
-export * from './utils/rle';