@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/components/Menu.svelte

@@ -0,0 +1,117 @@
+<!--
+/**
+ * Menu — a keyboard-navigable action menu rendered inside a Popup (top layer, flips vs boundary).
+ *
+ * Convention (from the data-table): render ALL items always and `disabled` the invalid ones.
+ * If ANY item has an icon, icon-less items reserve the icon column so labels align. Selecting an
+ * enabled item runs its onclick / follows its href and closes; disabled items don't close.
+ */
+-->
+<script lang="ts">
+  import Popup from "./Popup.svelte";
+  import type { Side, Align, Boundary } from "../positioning/anchored.js";
+  import type { MenuItem } from "../data/table/types.js";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    anchor,
+    open = $bindable(false),
+    items,
+    side = "bottom",
+    align = "end",
+    boundary = "viewport",
+    size = "md",
+    variant,
+  }: {
+    anchor: HTMLElement | undefined;
+    open?: boolean;
+    items: MenuItem[];
+    side?: Side;
+    align?: Align;
+    boundary?: Boundary;
+    size?: Responsive<Size>;
+    /** Tints the highlighted item with a semantic colour (via `.ui-accent` / `--ui-accent`) instead
+     *  of neutral grey. Omit for the default. */
+    variant?: Variant;
+  } = $props();
+
+  let active = $state(-1);
+  const hasIcons = $derived(items.some((i) => i.icon));
+  const enabledIdx = $derived(items.map((i, idx) => (i.disabled ? -1 : idx)).filter((i) => i >= 0));
+
+  // Size axis → item padding / text / icon box. Variant → --ui-accent (re-mixes the item's hover tint).
+  const padMap: Record<Size, string> = { sm: "px-1.5 py-1", md: "px-2 py-1.5", lg: "px-2.5 py-2" };
+  const textMap: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  const iconMap: Record<Size, string> = { sm: "w-3.5 h-3.5", md: "w-4 h-4", lg: "w-5 h-5" };
+  const padClass = $derived(responsiveClasses(size, padMap));
+  const textClass = $derived(responsiveClasses(size, textMap));
+  const iconClass = $derived(responsiveClasses(size, iconMap));
+  const accentVar = $derived(variant ? `--ui-accent: var(${variantToken[variant]});` : "");
+
+  function choose(item: MenuItem) {
+    if (item.disabled) return;
+    item.onclick?.();
+    if (item.href) window.location.href = item.href;
+    open = false;
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (!enabledIdx.length) return;
+    const pos = enabledIdx.indexOf(active);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      active = enabledIdx[(pos + 1 + enabledIdx.length) % enabledIdx.length] ?? enabledIdx[0];
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      active =
+        enabledIdx[(pos - 1 + enabledIdx.length) % enabledIdx.length] ??
+        enabledIdx[enabledIdx.length - 1];
+    } else if (e.key === "Enter" && active >= 0) {
+      e.preventDefault();
+      choose(items[active]);
+    }
+  }
+
+  $effect(() => {
+    if (!open) active = -1;
+  });
+</script>
+
+<Popup {anchor} bind:open {side} {align} {boundary}>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <ul
+    role="menu"
+    tabindex="0"
+    {onkeydown}
+    class="ui-accent min-w-48 rounded-md border p-1 shadow-lg outline-none [background-color:var(--ui-color-background)] [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)]"
+    style={accentVar}
+  >
+    {#each items as item, i (item.label)}
+      {@const danger = item.danger}
+      <li role="none">
+        <button
+          type="button"
+          role="menuitem"
+          disabled={item.disabled}
+          onmouseenter={() => (active = item.disabled ? active : i)}
+          onclick={() => choose(item)}
+          class="flex w-full items-center gap-2 rounded {padClass} {textClass} text-left transition-colors
+						{item.disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'}
+						{i === active && !item.disabled ? '[background-color:var(--ui-color-surface)]' : ''}
+						{danger ? '[color:var(--ui-color-error)]' : '[color:var(--ui-color-text)]'}"
+        >
+          {#if hasIcons}
+            <span
+              class="inline-flex {iconClass} shrink-0 items-center justify-center [&_svg]:w-full [&_svg]:h-full"
+            >
+              {#if item.icon}{@const Icon = item.icon}<Icon />{/if}
+            </span>
+          {/if}
+          <span class="truncate">{item.label}</span>
+        </button>
+      </li>
+    {/each}
+  </ul>
+</Popup>

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

@@ -0,0 +1,20 @@
+import type { Side, Align, Boundary } from "../positioning/anchored.js";
+import type { MenuItem } from "../data/table/types.js";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    anchor: HTMLElement | undefined;
+    open?: boolean;
+    items: MenuItem[];
+    side?: Side;
+    align?: Align;
+    boundary?: Boundary;
+    size?: Responsive<Size>;
+    /** Tints the highlighted item with a semantic colour (via `.ui-accent` / `--ui-accent`) instead
+     *  of neutral grey. Omit for the default. */
+    variant?: Variant;
+};
+declare const Menu: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/NotesEditor.svelte

@@ -0,0 +1,127 @@
+<!--
+/**
+ * NotesEditor — an auto-saving notes field. Built on the core <TextArea> (so it inherits the shared
+ * frame, autosize, and the `size` + `variant` axes) plus a debounced auto-save + a status indicator.
+ * Saves 1s after typing stops, or immediately on Ctrl/Cmd+S while focused.
+ */
+-->
+<script lang="ts">
+  import TextArea from "./TextArea.svelte";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+
+  let {
+    notes = $bindable(""),
+    placeholder = "Add your notes...",
+    onSave,
+    size = "md",
+    variant = "secondary",
+    copy,
+    className = "",
+  }: {
+    notes?: string;
+    placeholder?: string;
+    onSave?: (notes: string) => Promise<void>;
+    /** Shared axes — forwarded to the underlying TextArea. */
+    size?: Responsive<Size>;
+    variant?: Variant;
+    /** Copy affordance — forwarded to the underlying TextArea (defaults to its `'selection'`). */
+    copy?: "none" | "selection" | "button";
+    className?: string;
+  } = $props();
+
+  let saveState = $state<"idle" | "typing" | "saving" | "saved" | "error">("idle");
+  let saveTimeout: ReturnType<typeof setTimeout>;
+  let lastSavedNotes = $state(notes || "");
+  let textareaElement = $state<HTMLTextAreaElement>();
+
+  // Auto-save: 1s debounce after typing stops.
+  $effect(() => {
+    const currentNotes = notes || "";
+    if (currentNotes !== lastSavedNotes && saveState !== "saving") {
+      saveState = "typing";
+      clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(() => {
+        handleSave();
+      }, 1000);
+    }
+  });
+
+  // Ctrl/Cmd+S saves immediately while the editor is focused.
+  $effect(() => {
+    async function handleKeyDown(event: KeyboardEvent) {
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "s" &&
+        textareaElement &&
+        document.activeElement === textareaElement
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        clearTimeout(saveTimeout);
+        await handleSave();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  });
+
+  async function handleSave() {
+    const currentNotes = notes || "";
+
+    if (currentNotes === lastSavedNotes) {
+      // Brief "Saved" feedback for a manual save with no changes.
+      saveState = "saved";
+      setTimeout(() => {
+        if (saveState === "saved") saveState = "idle";
+      }, 1000);
+      return;
+    }
+
+    saveState = "saving";
+    try {
+      await onSave?.(currentNotes);
+      lastSavedNotes = currentNotes;
+      saveState = "saved";
+      setTimeout(() => {
+        if (saveState === "saved") saveState = "idle";
+      }, 2000);
+    } catch (error) {
+      console.error("Failed to save notes:", error);
+      saveState = "error";
+      setTimeout(() => {
+        if (saveState === "error") saveState = "idle";
+      }, 3000);
+    }
+  }
+
+  // Status text + colour (theme tokens, not hard-coded Tailwind colours).
+  const STATUS = {
+    idle: { text: "", color: "" },
+    typing: { text: "Typing…", color: "color-mix(in srgb, var(--ui-color-text) 55%, transparent)" },
+    saving: { text: "Saving…", color: "var(--ui-color-info)" },
+    saved: { text: "Saved", color: "var(--ui-color-success)" },
+    error: { text: "Save failed", color: "var(--ui-color-error)" },
+  } as const;
+  const status = $derived(STATUS[saveState]);
+</script>
+
+<div class={className}>
+  <!-- Header: label + save status -->
+  <div class="flex items-center justify-between mb-2">
+    <span class="block text-sm font-medium [color:var(--ui-color-text)]">Notes</span>
+    <span class="text-xs min-h-[16px]" style="color: {status.color}">{status.text}</span>
+  </div>
+
+  <TextArea
+    bind:value={notes}
+    bind:element={textareaElement}
+    {placeholder}
+    {size}
+    {variant}
+    {copy}
+    minRows={3}
+    maxRows={15}
+  />
+</div>

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

@@ -0,0 +1,17 @@
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    notes?: string;
+    placeholder?: string;
+    onSave?: (notes: string) => Promise<void>;
+    /** Shared axes — forwarded to the underlying TextArea. */
+    size?: Responsive<Size>;
+    variant?: Variant;
+    /** Copy affordance — forwarded to the underlying TextArea (defaults to its `'selection'`). */
+    copy?: "none" | "selection" | "button";
+    className?: string;
+};
+declare const NotesEditor: import("svelte").Component<$$ComponentProps, {}, "notes">;
+type NotesEditor = ReturnType<typeof NotesEditor>;
+export default NotesEditor;