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

package/dist/components/Toast/Toaster.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  /**
+   * Renders the toast store's items in a fixed, top-layer stack. Mount ONCE at the app root; push with
+   * `toast.*` from anywhere. Each toast is an Alert (filled) honouring its variant + size.
+   */
+  import Alert from "../Alert.svelte";
+  import IconClose from "~icons/mdi/close";
+  import { getToasts, dismissToast } from "./toast.svelte.js";
+  import type { Size } from "../../types/sizes.js";
+  import type { Responsive } from "../../types/responsive.js";
+  import type { Variant } from "../../types/variants.js";
+
+  let {
+    position = "bottom-right",
+    variant,
+    size = "md",
+  }: {
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Default variant/size for toasts that don't set their own (each toast can still override). */
+    variant?: Variant;
+    size?: Responsive<Size>;
+  } = $props();
+  const items = getToasts();
+
+  const posClass = {
+    "bottom-right": "bottom-4 right-4 items-end",
+    "bottom-left": "bottom-4 left-4 items-start",
+    "top-right": "top-4 right-4 items-end",
+    "top-left": "top-4 left-4 items-start",
+  }[position];
+</script>
+
+{#if items.length}
+  <div class="pointer-events-none fixed z-[100] flex max-w-[90vw] flex-col gap-2 {posClass}">
+    {#each items as t (t.id)}
+      <div
+        class="pointer-events-auto flex min-w-56 items-start gap-2 rounded shadow-lg [background-color:var(--ui-color-background)]"
+      >
+        <Alert variant={t.variant ?? variant} size={t.size ?? size} filled class="grow"
+          >{t.message}</Alert
+        >
+        <button
+          type="button"
+          aria-label="Dismiss"
+          class="shrink-0 self-center pr-2 opacity-60 hover:opacity-100"
+          onclick={() => dismissToast(t.id)}><IconClose class="size-4" /></button
+        >
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/components/Toast/Toaster.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Size } from "../../types/sizes.js";
+import type { Responsive } from "../../types/responsive.js";
+import type { Variant } from "../../types/variants.js";
+type $$ComponentProps = {
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Default variant/size for toasts that don't set their own (each toast can still override). */
+    variant?: Variant;
+    size?: Responsive<Size>;
+};
+declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/Toast/toast.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Size } from "../../types/sizes.js";
+/**
+ * Toast store — module-level runes state so toasts live OUTSIDE any page. Push from anywhere with
+ * `toast.danger('…')` etc.; a single <Toaster /> mounted at the app root renders them. Honours the
+ * shared Variant (status subset) + Size axes. Auto-dismisses after `timeout` ms (0 = sticky).
+ */
+export type ToastVariant = "danger" | "success" | "warning" | "info" | "primary";
+export type ToastItem = {
+    id: number;
+    variant: ToastVariant;
+    message: string;
+    size: Size;
+    timeout: number;
+};
+export type ToastOptions = {
+    timeout?: number;
+    size?: Size;
+};
+/** The live toast list (read in <Toaster>; mutations are reactive). */
+export declare function getToasts(): ToastItem[];
+export declare function dismissToast(id: number): void;
+export declare const toast: {
+    show: (variant: ToastVariant, message: string, opts?: ToastOptions) => number;
+    danger: (message: string, opts?: ToastOptions) => number;
+    success: (message: string, opts?: ToastOptions) => number;
+    warning: (message: string, opts?: ToastOptions) => number;
+    info: (message: string, opts?: ToastOptions) => number;
+    dismiss: typeof dismissToast;
+};

package/dist/components/Toast/toast.svelte.js

@@ -0,0 +1,27 @@
+const items = $state([]);
+let seq = 0;
+/** The live toast list (read in <Toaster>; mutations are reactive). */
+export function getToasts() {
+    return items;
+}
+export function dismissToast(id) {
+    const i = items.findIndex((t) => t.id === id);
+    if (i >= 0)
+        items.splice(i, 1);
+}
+function push(variant, message, opts = {}) {
+    const id = ++seq;
+    const timeout = opts.timeout ?? 4000;
+    items.push({ id, variant, message, size: opts.size ?? "md", timeout });
+    if (timeout > 0 && typeof window !== "undefined")
+        window.setTimeout(() => dismissToast(id), timeout);
+    return id;
+}
+export const toast = {
+    show: (variant, message, opts) => push(variant, message, opts),
+    danger: (message, opts) => push("danger", message, opts),
+    success: (message, opts) => push("success", message, opts),
+    warning: (message, opts) => push("warning", message, opts),
+    info: (message, opts) => push("info", message, opts),
+    dismiss: dismissToast,
+};

package/dist/components/Toggle.svelte

@@ -0,0 +1,93 @@
+<!--
+/**
+ * Toggle — a sliding on/off switch (à la a physical switch). Use this, NOT a Checkbox, for binary
+ * state: enabled/disabled, active/inactive, on/off. A real `<input type=checkbox>` drives it — laid
+ * INVISIBLY over the whole control, so clicking anywhere toggles it (naturally clickable +
+ * testable + accessible + form-friendly; `bind:checked` works, and `onchange` fires a real event).
+ * Honours the shared {@link Variant} (the "on" colour) + {@link Size} axes. Self-contained: no external
+ * label needed — pass an `aria-label` when there's no adjacent text.
+ *
+ * ALIGNMENT: the visible switch is deliberately shorter than a text control, but the Toggle occupies a
+ * wrapper sized to the standard control HEIGHT for its `size` (sm 24 / md 32 / lg 40px — same as Input),
+ * with the switch centred inside. So a Toggle dropped next to `size`-matched Inputs/Selects lines up on
+ * the same baseline (and the full-height wrapper is the click target), while the switch itself stays
+ * switch-sized rather than ballooning to the input height.
+ */
+-->
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, resolveScalar, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    ...rest
+  }: {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** The colour of the "on" state (default primary). */
+    variant?: Variant;
+    class?: string;
+  } & Omit<HTMLInputAttributes, "size" | "type" | "class"> = $props();
+
+  // Per size: track w/h + knob size are CLASSES (responsive); knob travel is an inline-style transform
+  // (JS value → keys off the base tier). Knob sits 2px in, travels W − K − 4px.
+  const trackMap: Record<Size, string> = { sm: "h-4 w-7", md: "h-5 w-9", lg: "h-6 w-11" };
+  const knobMap: Record<Size, string> = { sm: "size-3", md: "size-4", lg: "size-5" };
+  const onMap: Record<Size, string> = {
+    sm: "translateX(12px)",
+    md: "translateX(16px)",
+    lg: "translateX(20px)",
+  };
+  const heightMap: Record<Size, string> = { sm: "h-6", md: "h-8", lg: "h-10" };
+
+  const trackCls = $derived(responsiveClasses(size, trackMap));
+  const knobCls = $derived(responsiveClasses(size, knobMap));
+  // Wrapper height = the standard control height for this size (matches Input's h-6/h-8/h-10), so the
+  // switch centres on the same baseline as sibling inputs without growing the switch itself.
+  const heightClass = $derived(responsiveClasses(size, heightMap));
+  const trackStyle = $derived(
+    `background-color: ${checked ? `var(${variantToken[variant]})` : "color-mix(in srgb, var(--ui-color-text) 22%, transparent)"}`,
+  );
+  // Knob colour = the INVERTED text colour (`--ui-color-background`) with a hint of the variant mixed
+  // in — ONE rule for every variant, both themes. Light: background is white → a near-white knob (as
+  // before). Dark: background is dark → the knob flips dark, and since the dark theme's accent fills
+  // are brighter, a dark knob still reads. The 20% variant tint keeps the knob on-theme; it never
+  // approaches the track colour (80% background), so it stays contrasting even on a neutral track.
+  const knobColor = $derived(
+    `color-mix(in srgb, var(--ui-color-background) 80%, var(${variantToken[variant]}))`,
+  );
+  const knobStyle = $derived(
+    `transform: ${checked ? onMap[resolveScalar(size, "md")] : "translateX(2px)"}; background-color: ${knobColor}`,
+  );
+</script>
+
+<label
+  class="relative inline-flex shrink-0 items-center {heightClass} {disabled
+    ? 'cursor-not-allowed opacity-50'
+    : 'cursor-pointer'} {cls}"
+>
+  <!-- Real checkbox, invisible but covering the whole control so a click anywhere toggles it. -->
+  <input
+    type="checkbox"
+    bind:checked
+    {disabled}
+    class="peer absolute inset-0 z-10 m-0 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+    {...rest}
+  />
+  <span
+    class="relative inline-flex items-center rounded-full transition-colors duration-150 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:[outline-color:var(--ui-color-primary)] {trackCls}"
+    style={trackStyle}
+  >
+    <span
+      class="inline-block rounded-full shadow transition-transform duration-150 {knobCls}"
+      style={knobStyle}
+    ></span>
+  </span>
+</label>

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

@@ -0,0 +1,15 @@
+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";
+type $$ComponentProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    /** The colour of the "on" state (default primary). */
+    variant?: Variant;
+    class?: string;
+} & Omit<HTMLInputAttributes, "size" | "type" | "class">;
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/data/dataset.d.ts

@@ -0,0 +1,42 @@
+export type FilterDef = {
+    kind: "text";
+} | {
+    kind: "number";
+} | {
+    kind: "date";
+} | {
+    kind: "boolean";
+} | {
+    kind: "enum";
+    options: {
+        value: string;
+        label?: string;
+    }[];
+};
+/** A column the query language can filter on (drives the `$` popup + enum-value autocomplete). */
+export type QueryColumn = {
+    id: string;
+    label?: string;
+    filter?: FilterDef;
+};
+/**
+ * The minimal surface <Query> needs to drive *any* dataset: the filterable columns + the
+ * draft/applied query state. A DataGrid implements this and adds rows/sort/paging/selection.
+ */
+export interface DataSet {
+    readonly queryColumns: QueryColumn[];
+    /** Draft query text (mid-edit). */
+    query: string;
+    /** Committed/applied query text. */
+    readonly applied: string;
+    /** Live parse error for the draft, or null. */
+    readonly error: string | null;
+    /** Draft differs from applied. */
+    readonly dirty: boolean;
+    /** Type -> validate, but don't apply/fetch. */
+    setDraft(raw: string): void;
+    /** Apply the current draft (Enter). */
+    commit(): void;
+    /** Set + apply immediately (clear / URL seed). */
+    setQuery(raw: string): void;
+}

package/dist/data/dataset.js

@@ -0,0 +1,3 @@
+// The shared contract that <Query> manipulates and a data source (e.g. DataGrid) implements.
+// Framework-agnostic types — no Svelte. See .claude/skills/ui-design.
+export {};

package/dist/data/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./dataset";
+export * from "./query";
+export * from "./table";

package/dist/data/index.js

@@ -0,0 +1,3 @@
+export * from "./dataset";
+export * from "./query";
+export * from "./table";

package/dist/data/query/ast.d.ts

@@ -0,0 +1,62 @@
+export type CompareOp = "eq" | "ne" | "gt" | "gte" | "lt" | "lte" | "contains" | "ncontains" | "starts" | "ends";
+export type Scalar = string | number | boolean;
+/** Explicit value/column cast on a comparison, e.g. `$ip |inet >= 10.0.0.0 |inet`. Storage-agnostic:
+ *  the query layer only carries the marker; the consumer (`toConditions`) decides the SQL (e.g.
+ *  Postgres `::inet`). `number`/`string`/`bool` also retype the literal at parse time. */
+export type Cast = "number" | "string" | "bool" | "date" | "inet";
+/** Membership mode: `|=` matches ANY of the operand, `&=` matches ALL (e.g. array contains-all). */
+export type MemberMode = "any" | "all";
+/** One end of an interval. `inclusive` reflects the bracket: `[`/`]` inclusive, `(`/`)` exclusive. */
+export type Bound = {
+    value: Scalar;
+    inclusive: boolean;
+};
+/** `null` bound = open/unbounded on that side (e.g. `[20..)` -> upper is null). */
+export type Interval = {
+    lower: Bound | null;
+    upper: Bound | null;
+};
+export type QueryNode = {
+    kind: "and";
+    children: QueryNode[];
+} | {
+    kind: "or";
+    children: QueryNode[];
+} | {
+    kind: "not";
+    child: QueryNode;
+} | {
+    kind: "cmp";
+    col: string;
+    op: CompareOp;
+    value: Scalar;
+    cast?: Cast;
+} | {
+    kind: "match";
+    col: string;
+    negated: boolean;
+    source: string;
+    flags: string;
+} | {
+    kind: "in";
+    col: string;
+    mode: MemberMode;
+    values: Scalar[];
+    cast?: Cast;
+} | {
+    kind: "range";
+    col: string;
+    mode: MemberMode;
+    interval: Interval;
+    cast?: Cast;
+} | {
+    kind: "search";
+    text: string;
+};
+export declare class QueryError extends Error {
+    /** 0-based character offset into the source where the problem is. */
+    position: number;
+    constructor(message: string, 
+    /** 0-based character offset into the source where the problem is. */
+    position: number);
+}

package/dist/data/query/ast.js

@@ -0,0 +1,12 @@
+// AST for the data-table query language. Framework-agnostic — no Svelte/Drizzle/SvelteKit deps,
+// so it runs in the browser (Query input), on the server (toConditions), and in unit tests.
+export class QueryError extends Error {
+    position;
+    constructor(message, 
+    /** 0-based character offset into the source where the problem is. */
+    position) {
+        super(message);
+        this.position = position;
+        this.name = "QueryError";
+    }
+}

package/dist/data/query/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ast";
+export { parseQuery, tryParseQuery, type ParseResult } from "./parser";
+export { lex, type Token } from "./lexer";

package/dist/data/query/index.js

@@ -0,0 +1,3 @@
+export * from "./ast";
+export { parseQuery, tryParseQuery } from "./parser";
+export { lex } from "./lexer";

package/dist/data/query/lexer.d.ts

@@ -0,0 +1,33 @@
+import { type CompareOp, type MemberMode } from "./ast";
+export type Token = {
+    type: "dollar" | "and" | "or" | "not" | "lparen" | "rparen" | "lbracket" | "rbracket" | "comma" | "dotdot" | "eof";
+    start: number;
+    end: number;
+} | {
+    type: "op";
+    op: CompareOp;
+    start: number;
+    end: number;
+} | {
+    type: "member";
+    mode: MemberMode;
+    start: number;
+    end: number;
+} | {
+    type: "cast";
+    name: string;
+    start: number;
+    end: number;
+} | {
+    type: "word" | "string";
+    value: string;
+    start: number;
+    end: number;
+} | {
+    type: "regex";
+    source: string;
+    flags: string;
+    start: number;
+    end: number;
+};
+export declare function lex(input: string): Token[];

package/dist/data/query/lexer.js

@@ -0,0 +1,225 @@
+import { QueryError } from "./ast";
+const isSpace = (c) => c === " " || c === "\t" || c === "\n" || c === "\r" || c === "\f" || c === "\v";
+// Structural characters that break a bare token. Everything else (letters, digits, and ordinary
+// punctuation like @ . / : % # + - _ * ?) is allowed unquoted. `/` is allowed *inside* a word
+// (cat/sub) but starts a regex when it leads a token; a word also breaks at `..`.
+const BREAK = new Set(['"', "(", ")", "[", "]", ",", "$", "^", "~", "!", "=", ">", "<", "&", "|"]);
+const isWordChar = (c) => !isSpace(c) && !BREAK.has(c);
+export function lex(input) {
+    const tokens = [];
+    const n = input.length;
+    let i = 0;
+    while (i < n) {
+        const c = input[i];
+        if (isSpace(c)) {
+            i++;
+            continue;
+        }
+        const start = i;
+        const next = input[i + 1];
+        switch (c) {
+            case "(":
+                i++;
+                tokens.push({ type: "lparen", start, end: i });
+                continue;
+            case ")":
+                i++;
+                tokens.push({ type: "rparen", start, end: i });
+                continue;
+            case "[":
+                i++;
+                tokens.push({ type: "lbracket", start, end: i });
+                continue;
+            case "]":
+                i++;
+                tokens.push({ type: "rbracket", start, end: i });
+                continue;
+            case ",":
+                i++;
+                tokens.push({ type: "comma", start, end: i });
+                continue;
+            case '"': {
+                i++;
+                let s = "";
+                while (i < n && input[i] !== '"') {
+                    if (input[i] === "\\" && i + 1 < n) {
+                        i++;
+                        s += input[i];
+                        i++;
+                    }
+                    else {
+                        s += input[i];
+                        i++;
+                    }
+                }
+                if (i >= n)
+                    throw new QueryError("Unterminated string", start);
+                i++;
+                tokens.push({ type: "string", value: s, start, end: i });
+                continue;
+            }
+            case "/": {
+                // regex literal: /source/flags  (escapes preserved in source)
+                i++;
+                let src = "";
+                while (i < n && input[i] !== "/") {
+                    if (input[i] === "\\" && i + 1 < n) {
+                        src += input[i] + input[i + 1];
+                        i += 2;
+                    }
+                    else {
+                        src += input[i];
+                        i++;
+                    }
+                }
+                if (i >= n)
+                    throw new QueryError("Unterminated regex", start);
+                i++; // closing /
+                let flags = "";
+                while (i < n && /[a-zA-Z]/.test(input[i])) {
+                    flags += input[i];
+                    i++;
+                }
+                tokens.push({ type: "regex", source: src, flags, start, end: i });
+                continue;
+            }
+        }
+        if (c === "&") {
+            if (next === "&") {
+                i += 2;
+                tokens.push({ type: "and", start, end: i });
+            }
+            else if (next === "=") {
+                i += 2;
+                tokens.push({ type: "member", mode: "all", start, end: i });
+            }
+            else
+                throw new QueryError("Expected '&&' or '&='", i);
+            continue;
+        }
+        if (c === "|") {
+            if (next === "|") {
+                i += 2;
+                tokens.push({ type: "or", start, end: i });
+            }
+            else if (next === "=") {
+                i += 2;
+                tokens.push({ type: "member", mode: "any", start, end: i });
+            }
+            else if (next && /[a-zA-Z]/.test(next)) {
+                // `|word` is a cast/transformer (|inet, |number, …); validated in the parser.
+                i++;
+                let name = "";
+                while (i < n && /[a-zA-Z]/.test(input[i])) {
+                    name += input[i];
+                    i++;
+                }
+                tokens.push({ type: "cast", name, start, end: i });
+            }
+            else
+                throw new QueryError("Expected '||', '|=', or a cast (e.g. |inet)", i);
+            continue;
+        }
+        if (c === "!") {
+            if (next === "=") {
+                i += 2;
+                tokens.push({ type: "op", op: "ne", start, end: i });
+            }
+            else if (next === "~") {
+                i += 2;
+                tokens.push({ type: "op", op: "ncontains", start, end: i });
+            }
+            else {
+                i++;
+                tokens.push({ type: "not", start, end: i });
+            }
+            continue;
+        }
+        if (c === "=") {
+            if (next === "=") {
+                i += 2;
+                tokens.push({ type: "op", op: "eq", start, end: i });
+            }
+            else
+                throw new QueryError("Expected '=='", i);
+            continue;
+        }
+        if (c === ">") {
+            if (next === "=") {
+                i += 2;
+                tokens.push({ type: "op", op: "gte", start, end: i });
+            }
+            else {
+                i++;
+                tokens.push({ type: "op", op: "gt", start, end: i });
+            }
+            continue;
+        }
+        if (c === "<") {
+            if (next === "=") {
+                i += 2;
+                tokens.push({ type: "op", op: "lte", start, end: i });
+            }
+            else {
+                i++;
+                tokens.push({ type: "op", op: "lt", start, end: i });
+            }
+            continue;
+        }
+        if (c === "~") {
+            if (next === "=") {
+                i += 2;
+                tokens.push({ type: "op", op: "contains", start, end: i });
+            }
+            else
+                throw new QueryError("Expected '~='", i);
+            continue;
+        }
+        if (c === "^") {
+            if (next === "=") {
+                i += 2;
+                tokens.push({ type: "op", op: "starts", start, end: i });
+            }
+            else
+                throw new QueryError("Expected '^='", i);
+            continue;
+        }
+        if (c === "$") {
+            // `$=` is the ends-with operator; otherwise `$` is the clause sigil.
+            if (next === "=") {
+                i += 2;
+                tokens.push({ type: "op", op: "ends", start, end: i });
+            }
+            else {
+                i++;
+                tokens.push({ type: "dollar", start, end: i });
+            }
+            continue;
+        }
+        if (c === "." && next === ".") {
+            i += 2;
+            tokens.push({ type: "dotdot", start, end: i });
+            continue;
+        }
+        // a single '.' is an ordinary word char (.com, 99.5) — falls through to the word branch.
+        if (isWordChar(c)) {
+            let w = "";
+            while (i < n) {
+                const ch = input[i];
+                if (ch === "." && input[i + 1] === ".")
+                    break; // '..' is the range operator
+                if (isWordChar(ch)) {
+                    w += ch;
+                    i++;
+                }
+                else
+                    break;
+            }
+            tokens.push({ type: "word", value: w, start, end: i });
+            continue;
+        }
+        throw new QueryError(`Unexpected character '${c}'`, i);
+    }
+    tokens.push({ type: "eof", start: i, end: i });
+    return tokens;
+}

package/dist/data/query/parser.d.ts

@@ -0,0 +1,11 @@
+import { type QueryNode } from "./ast";
+export declare function parseQuery(input: string): QueryNode | null;
+export type ParseResult = {
+    ok: true;
+    ast: QueryNode | null;
+} | {
+    ok: false;
+    error: string;
+    position: number;
+};
+export declare function tryParseQuery(input: string): ParseResult;