@tableslayer/ui 0.0.1

package/dist/components/Menu/SelectorMenu.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+  import { computePosition, offset, flip, shift, platform } from '@floating-ui/dom';
+  import { tick, type Snippet } from 'svelte';
+  import { type SelectorMenuProps } from './types';
+  import { IconButton } from '../Button';
+  import { Icon } from '../Icon';
+  import { IconSelector } from '@tabler/icons-svelte';
+  import { type SelectOption } from '../Select';
+  let {
+    trigger,
+    options,
+    selected = $bindable(),
+    disabled = false,
+    variant = 'default',
+    positioning = { placement: 'bottom-start', offset: 8 },
+    onSelectedChange,
+    footer,
+    ...restProps
+  }: SelectorMenuProps = $props();
+
+  let button: HTMLElement | null = null;
+  let menu = $state<HTMLElement | null>(null);
+  let isOpen = $state(false);
+  let activeIndex = $state<number | null>(null);
+  let floatingStyles = $state('');
+
+  function updatePosition() {
+    if (!button || !menu) {
+      return;
+    }
+
+    computePosition(button, menu, {
+      placement: positioning.placement,
+      middleware: [offset(positioning.offset), flip(), shift()],
+      platform
+    })
+      .then(({ x, y, strategy }) => {
+        floatingStyles = `left: ${x}px; top: ${y}px; position: ${strategy};`;
+      })
+      .catch((error) => {
+        console.error('Error in computePosition:', error);
+      });
+  }
+
+  async function toggleMenu() {
+    if (disabled) return;
+
+    isOpen = !isOpen;
+    if (isOpen) {
+      if (options.length > 0) {
+        activeIndex = 0;
+      }
+
+      await tick();
+      updatePosition();
+    }
+  }
+
+  const handleGlobalClick = (e: MouseEvent) => {
+    if (isOpen && menu && button) {
+      const target = e.target as Node;
+      if (!menu.contains(target) && !button.contains(target)) {
+        closeMenu();
+      }
+    }
+  };
+
+  function closeMenu() {
+    isOpen = false;
+    activeIndex = null;
+  }
+
+  function handleSelection(value: string) {
+    selected = value;
+    closeMenu();
+    if (onSelectedChange) {
+      onSelectedChange(selected);
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+    const currentIndex = activeIndex ?? -1;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        activeIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        activeIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (activeIndex !== null) {
+          handleSelection(options[activeIndex].value);
+        }
+        break;
+      case 'Escape':
+        closeMenu();
+        break;
+    }
+  }
+
+  function isSelected(value: string) {
+    return selected === value;
+  }
+
+  function isSnippet(value: string | Snippet): value is Snippet {
+    return typeof value === 'function';
+  }
+
+  function getOptionIndex(option: SelectOption): number {
+    return options.findIndex((o) => o.value === option.value);
+  }
+
+  const footerProps = {
+    close: closeMenu
+  };
+</script>
+
+<svelte:window onclick={handleGlobalClick} />
+
+<div class={['selectorMenu', `selectorMenu--${variant}`, restProps.class]}>
+  <button
+    bind:this={button}
+    onclick={toggleMenu}
+    onkeydown={handleKeydown}
+    data-testid="menuButton"
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-disabled={disabled}
+    {...restProps}
+  >
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <IconButton as="div" variant="ghost">
+        <Icon Icon={IconSelector} />
+      </IconButton>
+    {/if}
+  </button>
+  {#if isOpen}
+    <div bind:this={menu} class="selectorMenu__popover" style={floatingStyles}>
+      <ul role="listbox" class="selectorMenu__optionList">
+        {#each options as option (option.value)}
+          <li
+            class={[
+              'selectorMenu__option',
+              isSelected(option.value) && 'selectorMenu__option--isSelected',
+              getOptionIndex(option) === activeIndex && ' selectorMenu__option--isActive'
+            ]}
+            tabindex="0"
+            onclick={() => handleSelection(option.value)}
+            onkeydown={handleKeydown}
+            role="option"
+            data-testid="menuItem"
+            aria-selected={isSelected(option.value)}
+          >
+            <div class="selectorMenu__start">
+              <div class="selectorMenu__space">
+                {#if isSelected(option.value)}
+                  <div class="selectorMenu__dot"></div>
+                {/if}
+              </div>
+              {#if option.icon}
+                <Icon Icon={option.icon} size="1.25rem" />
+              {/if}
+              {#if isSnippet(option.label)}
+                {@render option.label()}
+              {:else}
+                {option.label}
+              {/if}
+            </div>
+            {#if option.key}
+              <div class="selectorMenu__end">
+                <div class="selectorMenu__key">{option.key}</div>
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      {#if footer}
+        <div class="selectorMenu__footer">
+          {@render footer({ footerProps })}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .selectorMenu {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+  .selectorMenu--transparent .select__button {
+    border-color: transparent;
+    background: transparent;
+    &:hover {
+      border-color: var(--inputBorderColor);
+    }
+  }
+
+  .selectorMenu__popover {
+    position: absolute;
+    background: var(--popoverBg);
+    border: var(--borderThin);
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-1);
+    white-space: nowrap;
+    z-index: 1000;
+    padding: 0.25rem;
+    list-style: none;
+  }
+  .selectorMenu__optionList {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .selectorMenu__option {
+    width: 100%;
+    padding: 0.25rem 1rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.875rem;
+    gap: 3rem;
+    border: solid 2px transparent;
+    text-indent: -0.5rem;
+    line-height: 1.2rem;
+  }
+
+  .selectorMenu__option:hover,
+  .selectorMenu__option:focus {
+    background-color: var(--menuItemHover);
+    border: var(--menuItemBorderHover);
+    outline: none;
+  }
+  .selectorMenu__option--isActive {
+    background-color: var(--menuItemHover);
+  }
+
+  .selectorMenu__icon {
+    margin-left: auto;
+  }
+
+  .selectorMenu__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--fgPrimary);
+    border-radius: 50%;
+  }
+  .selectorMenu__space {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+  .selectorMenu__selected {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+  }
+  .selectorMenu__start {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  .selectorMenu__key {
+    display: flex;
+    text-indent: 0;
+    color: var(--fgMuted);
+    font-size: 0.75rem;
+    font-family: var(--font-mono);
+  }
+</style>

package/dist/components/Menu/SelectorMenu.svelte.d.ts

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

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

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

package/dist/components/Menu/index.js

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

package/dist/components/Menu/types.d.ts

@@ -0,0 +1,20 @@
+import type { Placement } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { SelectOption } from '../Select';
+export type SelectorMenuProps = {
+    trigger?: Snippet;
+    variant?: 'default';
+    selected?: string;
+    options: SelectOption[];
+    onSelectedChange?: (selected: string) => void;
+    positioning?: {
+        placement?: Placement;
+        offset?: number;
+    };
+    footer?: Snippet<[{
+        footerProps: {
+            close: () => void;
+        };
+    }]>;
+} & HTMLButtonAttributes;

package/dist/components/Menu/types.js

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

package/dist/components/MyCounterButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  let count = $state(0);
+
+  function handleClick() {
+    count += 1;
+  }
+</script>
+
+<button onclick={handleClick}>
+  clicks: {count}
+</button>

package/dist/components/MyCounterButton.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MyCounterButton: import("svelte").Component<Record<string, never>, {}, "">;
+type MyCounterButton = ReturnType<typeof MyCounterButton>;
+export default MyCounterButton;

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

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

package/dist/components/Panel/index.js

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

package/dist/components/Panel/panel.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { PanelProps } from './types';
+  let { variant = 'rounded', borderWidth = 1, children, ...restProps }: PanelProps = $props();
+  let panelClasses = $derived(['panel', `panel--${variant}`, `border-${borderWidth}`, restProps.class ?? '']);
+</script>
+
+<div {...restProps} class={panelClasses}>
+  {@render children()}
+</div>
+
+<style>
+  .panel {
+    background: var(--contrastLowest);
+    border: var(--borderThin);
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-1);
+  }
+</style>

package/dist/components/Panel/panel.svelte.d.ts

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

package/dist/components/Panel/types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type PanelProps = {
+    children: Snippet;
+    variant?: 'rounded' | 'cut';
+    borderWidth?: number;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/components/Panel/types.js

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

package/dist/components/PersistButton/PersistButton.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { IconPinFilled } from '@tabler/icons-svelte';
+
+  interface Props {
+    visible: boolean;
+    position: { x: number; y: number };
+    onPersist: () => void;
+    onDismiss: () => void;
+  }
+
+  const { visible, position, onPersist, onDismiss }: Props = $props();
+
+  // Offset button slightly from touch point
+  const OFFSET_X = 20;
+  const OFFSET_Y = -40;
+
+  function handleBackdropClick() {
+    onDismiss();
+  }
+
+  function handlePersistClick(e: MouseEvent | TouchEvent) {
+    e.stopPropagation();
+    onPersist();
+  }
+</script>
+
+{#if visible}
+  <div class="persistButton">
+    <!-- Transparent backdrop to catch clicks outside -->
+    <button class="persistButton__backdrop" onclick={handleBackdropClick} type="button" aria-label="Dismiss"></button>
+
+    <!-- The persist button -->
+    <button
+      class="persistButton__btn"
+      style:left="{position.x + OFFSET_X}px"
+      style:top="{position.y + OFFSET_Y}px"
+      onclick={handlePersistClick}
+      type="button"
+      aria-label="Persist drawing"
+    >
+      <IconPinFilled size={20} stroke={2} />
+    </button>
+  </div>
+{/if}
+
+<style>
+  .persistButton {
+    position: fixed;
+    inset: 0;
+    pointer-events: auto;
+    z-index: 500;
+  }
+
+  .persistButton__backdrop {
+    position: absolute;
+    inset: 0;
+    background: transparent;
+    border: none;
+    cursor: default;
+    padding: 0;
+  }
+
+  .persistButton__btn {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    padding: 0;
+    background: var(--fgPrimary);
+    border: 2px solid var(--bg);
+    border-radius: 50%;
+    color: var(--bg);
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    animation: persistButton__fadeIn 0.15s ease-out;
+  }
+
+  .persistButton__btn:hover {
+    background: var(--fg);
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  .persistButton__btn:active {
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+
+  @keyframes persistButton__fadeIn {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+</style>

package/dist/components/PersistButton/PersistButton.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    visible: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    onPersist: () => void;
+    onDismiss: () => void;
+}
+declare const PersistButton: import("svelte").Component<Props, {}, "">;
+type PersistButton = ReturnType<typeof PersistButton>;
+export default PersistButton;

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

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

package/dist/components/PersistButton/index.js

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

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { createPopover, createSync, melt } from '@melt-ui/svelte';
+  import { fade } from 'svelte/transition';
+  import type { PopoverProps } from './types';
+  import type { HTMLBaseAttributes } from 'svelte/elements';
+
+  let {
+    isOpen = false,
+    onIsOpenChange,
+    trigger,
+    content,
+    triggerClass,
+    triggerTestId,
+    contentClass,
+    positioning = { placement: 'bottom' },
+    portal = null,
+    forceVisible,
+    closeOnOutsideClick = true
+  }: PopoverProps & HTMLBaseAttributes = $props();
+
+  const {
+    elements: { trigger: triggerAction, content: contentAction, close },
+    states
+  } = createPopover({
+    positioning,
+    forceVisible,
+    portal,
+    closeOnOutsideClick
+  });
+
+  const sync = createSync(states);
+
+  $effect(() => {
+    sync.open(isOpen, (v) => {
+      isOpen = v;
+      onIsOpenChange?.(v);
+    });
+  });
+
+  const contentProps = {
+    close: () => {
+      isOpen = false;
+    }
+  };
+</script>
+
+<button
+  type="button"
+  class={['popTrigger', triggerClass ?? '']}
+  data-testid={triggerTestId}
+  use:melt={$triggerAction}
+  aria-label="Update dimensions"
+>
+  {@render trigger()}
+</button>
+
+{#if isOpen}
+  <div use:melt={$contentAction} transition:fade={{ duration: 100 }} class={['popContent', contentClass ?? '']}>
+    {@render content({ contentProps })}
+    <button class="popClose" use:melt={$close}>close</button>
+  </div>
+{/if}
+
+<style>
+  .popTrigger {
+    cursor: pointer;
+  }
+  .popContent {
+    padding: var(--size-2);
+    background: var(--popoverBg);
+    color: var(--fg);
+    border: var(--borderThin);
+    border-radius: var(--radius-1);
+    box-shadow: var(--shadow-1);
+    z-index: 1000;
+  }
+  /* TODO: Maybe I should use this */
+  .popClose {
+    display: none;
+  }
+</style>

package/dist/components/Popover/Popover.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PopoverProps } from './types';
+import type { HTMLBaseAttributes } from 'svelte/elements';
+type $$ComponentProps = PopoverProps & HTMLBaseAttributes;
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

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

package/dist/components/Popover/index.js

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

package/dist/components/Popover/types.d.ts

@@ -0,0 +1,17 @@
+import type { CreatePopoverProps } from '@melt-ui/svelte';
+import type { Snippet } from 'svelte';
+export type PopoverProps = {
+    isOpen?: boolean;
+    onIsOpenChange?: (open: boolean) => void;
+    trigger: Snippet;
+    triggerClass?: string;
+    triggerTestId?: string;
+    contentClass?: string;
+    content: Snippet<[
+        {
+            contentProps: {
+                close: () => void;
+            };
+        }
+    ]>;
+} & CreatePopoverProps;

package/dist/components/Popover/types.js

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