@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/Stage/shaders/ToolOutline.frag

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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