@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.3.e16df24

package/dist/components/Popup.svelte

@@ -0,0 +1,140 @@
+<!--
+/**
+ * Popup — an interactive, click/programmatically-opened popover anchored to a trigger.
+ *
+ * Uses the Popover API (browser top layer, so it's never clipped by overflow/stacking contexts)
+ * for show/hide, and the shared `anchored` engine for placement (flip up/down vs the boundary —
+ * viewport by default, or a container). Dismisses on Escape and outside pointerdown.
+ *
+ * @example
+ * ```svelte
+ * <button bind:this={btn} onclick={() => open = !open}>Menu</button>
+ * <Popup {anchor} bind:open>
+ *   <div class="...your content...">…</div>
+ * </Popup>
+ * ```
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import {
+    anchored,
+    type Side,
+    type Align,
+    type Boundary,
+    type Placement,
+  } from "../positioning/anchored.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),
+    side = "bottom",
+    align = "start",
+    boundary = "viewport",
+    offset = 4,
+    matchWidth = false,
+    surface = false,
+    variant,
+    size = "md",
+    borderless = false,
+    onclose,
+    children,
+  }: {
+    /** The trigger element to position against. */
+    anchor: HTMLElement | undefined;
+    open?: boolean;
+    side?: Side;
+    align?: Align;
+    /** Default the viewport; pass a container element or CSS selector to bound flipping to it. */
+    boundary?: Boundary;
+    offset?: number;
+    matchWidth?: boolean;
+    /** Render a themed floating PANEL around the children (background, border, padding, shadow) instead
+     *  of the default bare positioner. `variant`/`size`/`borderless` configure that panel. Consumers
+     *  that supply their own surface (Menu, date/time pickers) leave this `false`. */
+    surface?: boolean;
+    /** Panel border colour (when `surface`) — tinted by the variant token, like Card. */
+    variant?: Variant;
+    /** Panel padding tier (when `surface`). */
+    size?: Responsive<Size>;
+    /** Drop the panel's visible border (border = its own background). */
+    borderless?: boolean;
+    onclose?: () => void;
+    children: Snippet;
+  } = $props();
+
+  // Themed-panel styling (only used when `surface`). Border tints from the variant token; `borderless`
+  // paints it the panel's background. Padding scales with `size`.
+  const padMap: Record<Size, string> = { sm: "p-1", md: "p-1.5", lg: "p-2" };
+  const accentToken = $derived(variant ? variantToken[variant] : "--ui-color-secondary");
+  const panelBorder = $derived(
+    borderless
+      ? "var(--ui-color-background)"
+      : `color-mix(in srgb, var(${accentToken}) var(--ui-tint-border), transparent)`,
+  );
+  const surfaceClass = $derived(
+    surface
+      ? `rounded-md border shadow-lg ${responsiveClasses(size, padMap)} [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]`
+      : "bg-transparent p-0 border-0",
+  );
+
+  let el = $state<HTMLElement>();
+  let placed = $state<Placement | null>(null);
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
+  // Drive the Popover API (top layer) from `open`.
+  $effect(() => {
+    if (!el) return;
+    const isOpen = el.matches(":popover-open");
+    if (open && !isOpen) el.showPopover();
+    else if (!open && isOpen) el.hidePopover();
+  });
+
+  // Dismiss on Escape / outside pointerdown while open.
+  $effect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      }
+    };
+    const onPointer = (e: PointerEvent) => {
+      const t = e.target as Node;
+      if (el?.contains(t) || anchor?.contains(t)) return;
+      close();
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
+    };
+  });
+</script>
+
+<div
+  bind:this={el}
+  popover="manual"
+  class="m-0 overflow-visible {surfaceClass}"
+  style={surface ? `border-color: ${panelBorder};` : ""}
+  use:anchored={{
+    anchor,
+    enabled: open,
+    side,
+    align,
+    boundary,
+    offset,
+    matchWidth,
+    onplaced: (p) => (placed = p),
+  }}
+>
+  {@render children()}
+</div>

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

@@ -0,0 +1,31 @@
+import type { Snippet } from "svelte";
+import { type Side, type Align, type Boundary } from "../positioning/anchored.js";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    /** The trigger element to position against. */
+    anchor: HTMLElement | undefined;
+    open?: boolean;
+    side?: Side;
+    align?: Align;
+    /** Default the viewport; pass a container element or CSS selector to bound flipping to it. */
+    boundary?: Boundary;
+    offset?: number;
+    matchWidth?: boolean;
+    /** Render a themed floating PANEL around the children (background, border, padding, shadow) instead
+     *  of the default bare positioner. `variant`/`size`/`borderless` configure that panel. Consumers
+     *  that supply their own surface (Menu, date/time pickers) leave this `false`. */
+    surface?: boolean;
+    /** Panel border colour (when `surface`) — tinted by the variant token, like Card. */
+    variant?: Variant;
+    /** Panel padding tier (when `surface`). */
+    size?: Responsive<Size>;
+    /** Drop the panel's visible border (border = its own background). */
+    borderless?: boolean;
+    onclose?: () => void;
+    children: Snippet;
+};
+declare const Popup: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Popup = ReturnType<typeof Popup>;
+export default Popup;

package/dist/components/Query.svelte

@@ -0,0 +1,284 @@
+<!--
+/**
+ * Query — a filter bar over a DataSet (svelte-ui/data): a monospace input with `$` column +
+ * enum-value autocomplete (in a Popup, so it flips vs the viewport), Enter-to-apply, and a help
+ * dialog. URL sync is intentionally NOT built in — observe `dataset.applied` and sync it yourself
+ * (it's framework-specific; e.g. SvelteKit's replaceState).
+ */
+-->
+<script lang="ts">
+  import { tick } from "svelte";
+  import IconSearch from "~icons/mdi/magnify";
+  import IconClose from "~icons/mdi/close";
+  import IconHelp from "~icons/mdi/help-circle-outline";
+  import Input from "./Input.svelte";
+  import Button from "./Button.svelte";
+  import Popup from "./Popup.svelte";
+  import Dialog from "./Dialog.svelte";
+  import type { DataSet } from "../data/dataset.js";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
+
+  let {
+    dataset,
+    placeholder = "Filter…  e.g.  $status == active && $price |= [20..50)",
+    size = "md",
+    variant = "secondary",
+    borderless = false,
+  }: {
+    dataset: DataSet;
+    placeholder?: string;
+    /** Shared axes — forwarded to the underlying filter Input. */
+    size?: Responsive<Size>;
+    variant?: Variant;
+    borderless?: boolean;
+  } = $props();
+
+  let inputEl = $state<HTMLInputElement>();
+  let wrapperEl = $state<HTMLElement>();
+  let helpOpen = $state(false);
+  let caret = $state(0);
+  let focused = $state(false);
+  let open = $state(false);
+  let active = $state(0);
+
+  type Suggestion = { value: string; label: string };
+
+  const filterCols = $derived(dataset.queryColumns.filter((c) => c.filter));
+  const TOKEN = /[A-Za-z0-9_.$:-]/;
+  const VALUE_OP =
+    /\$([A-Za-z0-9_]+)\s*(?:==|!=|>=|<=|>|<|~=|!~|\^=|\$=|\|=|&=)\s*\[?\s*(?:[^[\],]+,\s*)*$/;
+
+  function detect(text: string, pos: number) {
+    let i = pos;
+    while (i > 0 && TOKEN.test(text[i - 1])) i--;
+    const token = text.slice(i, pos);
+    if (token.startsWith("$"))
+      return { type: "column" as const, start: i, partial: token.slice(1) };
+    const m = text.slice(0, i).match(VALUE_OP);
+    if (m) return { type: "value" as const, start: i, partial: token, col: m[1] };
+    return { type: "none" as const, start: pos, partial: "" };
+  }
+
+  const ctx = $derived(detect(dataset.query, caret));
+  const suggestions = $derived.by<Suggestion[]>(() => {
+    if (ctx.type === "column") {
+      const p = ctx.partial.toLowerCase();
+      return filterCols
+        .filter((c) => c.id.toLowerCase().startsWith(p))
+        .map((c) => ({ value: c.id, label: c.label ?? c.id }));
+    }
+    if (ctx.type === "value") {
+      const col = dataset.queryColumns.find((c) => c.id === ctx.col);
+      if (col?.filter?.kind === "enum") {
+        const p = ctx.partial.toLowerCase();
+        return col.filter.options
+          .filter((o) => o.value.toLowerCase().startsWith(p))
+          .map((o) => ({ value: o.value, label: o.label ?? o.value }));
+      }
+    }
+    return [];
+  });
+  const showPopup = $derived(open && focused && suggestions.length > 0);
+
+  const syncCaret = () => (caret = inputEl?.selectionStart ?? dataset.query.length);
+
+  function oninput(e: Event & { currentTarget: HTMLInputElement }) {
+    dataset.setDraft(e.currentTarget.value);
+    caret = e.currentTarget.selectionStart ?? 0;
+    active = 0;
+    open = true;
+  }
+
+  async function accept(s: Suggestion) {
+    const insert = ctx.type === "column" ? `$${s.value} ` : `${s.value} `;
+    const next = dataset.query.slice(0, ctx.start) + insert + dataset.query.slice(caret);
+    const pos = ctx.start + insert.length;
+    dataset.setDraft(next);
+    open = false;
+    await tick();
+    if (inputEl) {
+      inputEl.focus();
+      inputEl.selectionStart = inputEl.selectionEnd = pos;
+      caret = pos;
+    }
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (showPopup) {
+      if (e.key === "ArrowDown")
+        return (e.preventDefault(), void (active = (active + 1) % suggestions.length));
+      if (e.key === "ArrowUp")
+        return (
+          e.preventDefault(),
+          void (active = (active - 1 + suggestions.length) % suggestions.length)
+        );
+      if (e.key === "Enter" || e.key === "Tab")
+        return (e.preventDefault(), accept(suggestions[active]));
+      if (e.key === "Escape") return (e.preventDefault(), void (open = false));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      dataset.commit();
+    }
+  }
+
+  function clear() {
+    dataset.setQuery("");
+    inputEl?.focus();
+    caret = 0;
+  }
+
+  const bc = "border-[color-mix(in_srgb,var(--ui-color-secondary)_30%,transparent)]";
+</script>
+
+<div class="w-full [color:var(--ui-color-text)]">
+  <!-- Built on the core <Input> so the frame/border/hover/focus glow + themed autofill are shared,
+	     not re-rolled. Search is the left icon; clear + help live in the `actions` slot; the parse
+	     error reuses Input's own validation (danger) styling. -->
+  <div bind:this={wrapperEl} class="w-full">
+    <Input
+      bind:element={inputEl}
+      value={dataset.query}
+      {size}
+      {variant}
+      {borderless}
+      iconPosition="left"
+      inputClass="font-mono"
+      spellcheck={false}
+      autocapitalize="none"
+      autocomplete="off"
+      {placeholder}
+      validate={() => dataset.error || true}
+      touched={!!dataset.error}
+      {oninput}
+      {onkeydown}
+      onkeyup={syncCaret}
+      onclick={syncCaret}
+      onfocus={() => {
+        focused = true;
+        open = true;
+      }}
+      onblur={() => {
+        focused = false;
+        setTimeout(() => (open = false), 120);
+      }}
+    >
+      {#snippet icon()}<IconSearch class="opacity-60" />{/snippet}
+      {#snippet actions()}
+        {#if dataset.query}
+          <Button variant="ghost" size="sm" aria-label="Clear" title="Clear" onclick={clear}
+            >{#snippet icon()}<IconClose />{/snippet}</Button
+          >
+        {/if}
+        <Button
+          variant="ghost"
+          size="sm"
+          aria-label="Query help"
+          title="Query help"
+          onclick={() => (helpOpen = true)}>{#snippet icon()}<IconHelp />{/snippet}</Button
+        >
+      {/snippet}
+    </Input>
+  </div>
+
+  {#if dataset.error}
+    <p class="mt-1 text-xs [color:var(--ui-color-error)]">{dataset.error}</p>
+  {:else if dataset.dirty}
+    <p class="mt-1 text-xs [color:color-mix(in_srgb,var(--ui-color-text)_50%,transparent)]">
+      Press <kbd class="rounded border px-1 {bc}">Enter</kbd> to apply
+    </p>
+  {/if}
+</div>
+
+<Popup
+  anchor={wrapperEl}
+  open={showPopup}
+  onclose={() => (open = false)}
+  side="bottom"
+  align="start"
+  matchWidth
+>
+  <ul
+    class="mt-1 max-h-72 overflow-y-auto rounded-md border p-1 shadow-lg [background-color:var(--ui-color-background)] {bc}"
+  >
+    {#each suggestions as s, i (s.value)}
+      <li>
+        <button
+          type="button"
+          class="flex w-full items-center justify-between gap-3 rounded px-2 py-1.5 text-left text-sm [color:var(--ui-color-text)] {i ===
+          active
+            ? '[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]'
+            : ''}"
+          onmouseenter={() => (active = i)}
+          onmousedown={(e) => {
+            e.preventDefault();
+            accept(s);
+          }}
+        >
+          <span class="font-mono">{ctx.type === "column" ? "$" : ""}{s.value}</span>
+          {#if s.label !== s.value}<span
+              class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]"
+              >{s.label}</span
+            >{/if}
+        </button>
+      </li>
+    {/each}
+  </ul>
+</Popup>
+
+<Dialog bind:isOpen={helpOpen} title="Query syntax" showConfirm={false} showCancel={false}>
+  <div class="max-h-[70vh] space-y-4 overflow-y-auto text-sm [color:var(--ui-color-text)]">
+    <p>
+      A filter is one or more conditions, <code class="font-mono">$column operator value</code>.
+      Whitespace is insignificant; combine with <code>&&</code>, <code>||</code>, <code>!</code>,
+      <code>()</code>.
+    </p>
+    <div>
+      <h4 class="mb-1 font-semibold">Operators</h4>
+      <table class="w-full text-left">
+        <tbody class="[&_td]:py-0.5 [&_td:first-child]:pr-4 [&_td:first-child]:font-mono">
+          <tr><td>== !=</td><td>equals / not equals</td></tr>
+          <tr><td>{"> >= < <="}</td><td>greater / less than (numbers &amp; dates)</td></tr>
+          <tr><td>~= !~</td><td>contains / not — or regex if value is <code>/…/</code></td></tr>
+          <tr><td>^= $=</td><td>starts / ends with</td></tr>
+          <tr><td>|=</td><td>any of a set <code>[a, b]</code> or range <code>[1..9)</code></td></tr>
+          <tr><td>&=</td><td>all of a set (multi-value columns)</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <h4 class="mb-1 font-semibold">Casts</h4>
+      <p class="mb-1 text-xs [color:color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]">
+        A <code class="font-mono">|type</code> after a column or value forces its type for strict comparison
+        — one cast per clause; put it on the column and/or the literals.
+      </p>
+      <table class="w-full text-left">
+        <tbody class="[&_td]:py-0.5 [&_td:first-child]:pr-4 [&_td:first-child]:font-mono">
+          <tr
+            ><td>|number |string |bool</td><td
+              >force the literal's type (e.g. <code>007|string</code>)</td
+            ></tr
+          >
+          <tr><td>|date</td><td>compare as a date</td></tr>
+          <tr><td>|inet</td><td>compare as an IP address (IPv4 / IPv6)</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <h4 class="mb-1 font-semibold">Examples</h4>
+      <pre
+        class="overflow-x-auto rounded p-2 font-mono text-xs [background-color:color-mix(in_srgb,var(--ui-color-text)_6%,transparent)]"><code
+          >$status == active
+$email ~= /@gmail\.com$/i
+$price |= [20..50) && $role |= [admin, ops]
+$ip|inet |= [10.0.0.0|inet..10.255.255.255|inet]
+"lemon balm" || $featured == true</code
+        ></pre>
+    </div>
+    <p class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]">
+      Tip: type <kbd class="rounded border px-1 {bc}">$</kbd> for columns; enum columns suggest
+      values. Applies on <kbd class="rounded border px-1 {bc}">Enter</kbd>.
+    </p>
+  </div>
+</Dialog>

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

@@ -0,0 +1,15 @@
+import type { DataSet } from "../data/dataset.js";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+type $$ComponentProps = {
+    dataset: DataSet;
+    placeholder?: string;
+    /** Shared axes — forwarded to the underlying filter Input. */
+    size?: Responsive<Size>;
+    variant?: Variant;
+    borderless?: boolean;
+};
+declare const Query: import("svelte").Component<$$ComponentProps, {}, "">;
+type Query = ReturnType<typeof Query>;
+export default Query;

package/dist/components/{Rating/Rating.svelte → Rating.svelte}

@@ -1,14 +1,23 @@
 <script lang="ts">
+  import { variantToken, type Variant } from "../types/variants.js";
+  import type { Size } from "../types/sizes.js";
+
   export type RatingProps = {
     average: number;
     count: number;
+    /** Filled-star colour. Defaults to gold; a variant tints from its token (e.g. `warning`, `primary`). */
+    variant?: Variant;
+    /** Star size (sm/md/lg). */
+    size?: Size;
   };
 
-  let { average, count }: RatingProps = $props();
+  let { average, count, variant, size = "md" }: RatingProps = $props();
+
+  const starColor = $derived(variant ? `var(${variantToken[variant]})` : "#ffd700");
+  const starSize: Record<Size, string> = { sm: "1rem", md: "1.2rem", lg: "1.5rem" };
 
   // Validate and sanitize the average rating
-  const validAverage =
-    isNaN(average) || average < 0 ? 0 : Math.min(average, 10);
+  const validAverage = isNaN(average) || average < 0 ? 0 : Math.min(average, 10);
 
   // Convert TMDB 10-point scale to 5-star scale
   const fiveStarRating = validAverage / 2;
@@ -19,7 +28,7 @@
   const emptyStars = Math.max(0, 5 - filledStars - (hasHalfStar ? 1 : 0));
 </script>
 
-<div class="rating select-none">
+<div class="rating select-none" style="--star-color: {starColor}; --star-size: {starSize[size]}">
   <div class="stars">
     {#each Array(filledStars) as _, i}
       <span class="star filled">★</span>
@@ -48,30 +57,30 @@
   }
 
   .star {
-    font-size: 1.2rem;
+    font-size: var(--star-size, 1.2rem);
     line-height: 1;
   }
 
   .star.filled {
-    color: #ffd700;
+    color: var(--star-color, #ffd700);
   }
 
   .star.half-filled {
-    color: #ffd700;
+    color: var(--star-color, #ffd700);
     opacity: 0.6;
   }
 
   .star.empty {
-    color: var(--color-secondary);
+    color: var(--ui-color-secondary);
   }
 
   .rating-value {
     font-weight: 600;
-    color: var(--color-text);
+    color: var(--ui-color-text);
   }
 
   .rating-count {
     font-size: 0.9rem;
-    color: var(--color-secondary);
+    color: var(--ui-color-secondary);
   }
 </style>

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

@@ -0,0 +1,13 @@
+import { type Variant } from "../types/variants.js";
+import type { Size } from "../types/sizes.js";
+export type RatingProps = {
+    average: number;
+    count: number;
+    /** Filled-star colour. Defaults to gold; a variant tints from its token (e.g. `warning`, `primary`). */
+    variant?: Variant;
+    /** Star size (sm/md/lg). */
+    size?: Size;
+};
+declare const Rating: import("svelte").Component<RatingProps, {}, "">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/components/{SearchInput/SearchInput.svelte → SearchInput.svelte}

@@ -1,9 +1,13 @@
 <script lang="ts">
-  import Input from '../Input/Input.svelte';
-  import { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
-  import type { HTMLInputAttributes } from 'svelte/elements';
+  import Input from "./Input.svelte";
+  import Magnify from "~icons/mdi/magnify";
+  import Close from "~icons/mdi/close";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
 
-  interface Props extends Omit<HTMLInputAttributes, 'type'> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
     value: string;
     class?: string;
     inputClass?: string;
@@ -11,6 +15,10 @@
     valid?: boolean;
     touched?: boolean;
     element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
     onClear?: () => void;
     clearable?: boolean;
   }
@@ -22,12 +30,12 @@
     element = $bindable(),
     onClear,
     clearable = true,
-    placeholder = 'Search...',
+    placeholder = "Search...",
     ...restProps
   }: Props = $props();
 
   function handleClear() {
-    value = '';
+    value = "";
     onClear?.();
   }
 
@@ -42,9 +50,12 @@
   bind:element
   type="search"
   inputClass="[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none"
-  icon={showClearIcon ? faTimes : faSearch}
   iconClickable={showClearIcon}
   onIconClick={showClearIcon ? handleClear : undefined}
   {placeholder}
   {...restProps}
-/>
+>
+  {#snippet icon()}
+    {#if showClearIcon}<Close />{:else}<Magnify />{/if}
+  {/snippet}
+</Input>

package/dist/components/{SearchInput/SearchInput.svelte.d.ts → SearchInput.svelte.d.ts}

@@ -1,5 +1,8 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'type'> {
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
+interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
     value: string;
     class?: string;
     inputClass?: string;
@@ -7,6 +10,10 @@ interface Props extends Omit<HTMLInputAttributes, 'type'> {
     valid?: boolean;
     touched?: boolean;
     element?: HTMLInputElement;
+    size?: Responsive<Size>;
+    /** Shared axes — forwarded to the underlying Input. */
+    variant?: Variant;
+    borderless?: boolean;
     onClear?: () => void;
     clearable?: boolean;
 }