@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/data/query/parser.js

@@ -0,0 +1,252 @@
+import { lex } from "./lexer";
+import { QueryError, } from "./ast";
+function coerce(word) {
+    if (word === "true")
+        return true;
+    if (word === "false")
+        return false;
+    if (/^-?\d+$/.test(word))
+        return parseInt(word, 10);
+    if (/^-?(?:\d+\.\d*|\.\d+)$/.test(word))
+        return parseFloat(word);
+    return word; // strings, dates (2026-06-01), enum values, emails, paths, etc.
+}
+const CASTS = new Set(["number", "string", "bool", "date", "inet"]);
+/**
+ * Recursive-descent parser. Whitespace is insignificant; logic is EXPLICIT only.
+ *   or      := and ('||' and)*
+ *   and     := unary ('&&' unary)*
+ *   unary   := '!' unary | primary
+ *   primary := '(' or ')' | clause | search
+ *   clause  := '$' word ( op (scalar | regex) | member (set | interval) )
+ *   member  := '|=' (any) | '&='(all) ; operand = '[' scalar (',' scalar)* ']'  |  bracket interval
+ * Adjacent terms with no operator are an error. Empty input -> null.
+ */
+class Parser {
+    tokens;
+    pos = 0;
+    /** Casts seen across the current clause; folded to one (they must agree). */
+    casts = [];
+    constructor(tokens) {
+        this.tokens = tokens;
+    }
+    peek() {
+        return this.tokens[this.pos];
+    }
+    next() {
+        return this.tokens[this.pos++];
+    }
+    is(type) {
+        return this.peek().type === type;
+    }
+    expect(type) {
+        if (!this.is(type))
+            throw new QueryError(`Expected ${type}`, this.peek().start);
+        return this.next();
+    }
+    /** Consume an optional trailing `|cast` token, validate it, and record it for the clause. */
+    castAfter() {
+        const t = this.peek();
+        if (t.type !== "cast")
+            return undefined;
+        this.next();
+        if (!CASTS.has(t.name))
+            throw new QueryError(`Unknown cast |${t.name}`, t.start);
+        const name = t.name;
+        this.casts.push({ name, start: t.start });
+        return name;
+    }
+    /** Fold all casts used in the current clause into one — they must agree. */
+    foldCast() {
+        for (const c of this.casts) {
+            if (c.name !== this.casts[0].name)
+                throw new QueryError("A clause may use only one cast", c.start);
+        }
+        return this.casts[0]?.name;
+    }
+    parse() {
+        if (this.is("eof"))
+            return null;
+        const node = this.parseOr();
+        if (!this.is("eof"))
+            throw new QueryError("Unexpected input — use && / || to combine terms", this.peek().start);
+        return node;
+    }
+    parseOr() {
+        const parts = [this.parseAnd()];
+        while (this.is("or")) {
+            this.next();
+            parts.push(this.parseAnd());
+        }
+        return parts.length > 1 ? { kind: "or", children: parts } : parts[0];
+    }
+    parseAnd() {
+        const parts = [this.parseUnary()];
+        while (this.is("and")) {
+            this.next();
+            parts.push(this.parseUnary());
+        }
+        return parts.length > 1 ? { kind: "and", children: parts } : parts[0];
+    }
+    parseUnary() {
+        if (this.is("not")) {
+            this.next();
+            return { kind: "not", child: this.parseUnary() };
+        }
+        return this.parsePrimary();
+    }
+    parsePrimary() {
+        const t = this.peek();
+        if (t.type === "lparen") {
+            this.next();
+            const node = this.parseOr();
+            this.expect("rparen");
+            return node;
+        }
+        if (t.type === "dollar")
+            return this.parseClause();
+        if (t.type === "string" || t.type === "word") {
+            this.next();
+            return { kind: "search", text: t.value };
+        }
+        if (t.type === "regex")
+            throw new QueryError("A regex must be used with ~= or !~", t.start);
+        throw new QueryError("Expected a term", t.start);
+    }
+    parseClause() {
+        this.casts = [];
+        this.expect("dollar");
+        const colTok = this.peek();
+        if (colTok.type !== "word")
+            throw new QueryError("Expected a column name after $", colTok.start);
+        this.next();
+        const col = colTok.value;
+        this.castAfter(); // optional cast on the column itself ($ip|inet ...)
+        const node = this.parseClauseBody(col);
+        const cast = this.foldCast();
+        if (cast) {
+            if (node.kind === "match")
+                throw new QueryError("A cast cannot be used with a regex", colTok.start);
+            node.cast = cast;
+        }
+        return node;
+    }
+    parseClauseBody(col) {
+        const opTok = this.next();
+        if (opTok.type === "op") {
+            const op = opTok.op;
+            if (op === "contains" || op === "ncontains") {
+                if (this.is("regex")) {
+                    const r = this.next();
+                    if (r.type !== "regex")
+                        throw new QueryError("Expected a regex", r.start);
+                    return {
+                        kind: "match",
+                        col,
+                        negated: op === "ncontains",
+                        source: r.source,
+                        flags: r.flags,
+                    };
+                }
+                return { kind: "cmp", col, op, value: this.parseScalar() };
+            }
+            if (this.is("regex"))
+                throw new QueryError("A regex is only valid with ~= or !~", this.peek().start);
+            return { kind: "cmp", col, op, value: this.parseScalar() };
+        }
+        if (opTok.type === "member") {
+            return this.parseMemberOperand(col, opTok.mode);
+        }
+        throw new QueryError("Expected an operator after the column", opTok.start);
+    }
+    parseScalar() {
+        const t = this.next();
+        let raw;
+        let value;
+        if (t.type === "string") {
+            raw = t.value;
+            value = t.value;
+        }
+        else if (t.type === "word") {
+            raw = t.value;
+            value = coerce(t.value);
+        }
+        else {
+            throw new QueryError("Expected a value", t.start);
+        }
+        // A trailing `|cast` retypes the literal (number/string/bool) or just records it (date/inet,
+        // which the consumer casts in SQL). The RAW token text is used, so `007|string` -> "007", not 7.
+        const cast = this.castAfter();
+        if (cast === "number") {
+            const num = Number(raw);
+            if (Number.isNaN(num))
+                throw new QueryError(`"${raw}" is not a number`, t.start);
+            value = num;
+        }
+        else if (cast === "bool") {
+            if (raw === "true")
+                value = true;
+            else if (raw === "false")
+                value = false;
+            else
+                throw new QueryError(`"${raw}" is not a boolean`, t.start);
+        }
+        else if (cast === "string" || cast === "date" || cast === "inet") {
+            value = raw;
+        }
+        return value;
+    }
+    parseMemberOperand(col, mode) {
+        const open = this.next();
+        if (open.type !== "lbracket" && open.type !== "lparen") {
+            throw new QueryError("Expected '[' or '(' after |= / &=", open.start);
+        }
+        const lowerInclusive = open.type === "lbracket";
+        let lower = null;
+        if (!this.is("dotdot")) {
+            const first = this.parseScalar();
+            if (this.is("dotdot")) {
+                lower = { value: first, inclusive: lowerInclusive };
+            }
+            else {
+                // SET (must use square brackets).
+                if (open.type !== "lbracket")
+                    throw new QueryError("A set must use '[' ']'", open.start);
+                const values = [first];
+                while (this.is("comma")) {
+                    this.next();
+                    values.push(this.parseScalar());
+                }
+                this.expect("rbracket");
+                return { kind: "in", col, mode, values };
+            }
+        }
+        // interval
+        this.expect("dotdot");
+        let upper = null;
+        if (!this.is("rbracket") && !this.is("rparen")) {
+            upper = { value: this.parseScalar(), inclusive: false };
+        }
+        const close = this.next();
+        if (close.type !== "rbracket" && close.type !== "rparen") {
+            throw new QueryError("Expected ']' or ')' to close the interval", close.start);
+        }
+        if (upper)
+            upper.inclusive = close.type === "rbracket";
+        const interval = { lower, upper };
+        return { kind: "range", col, mode, interval };
+    }
+}
+export function parseQuery(input) {
+    return new Parser(lex(input)).parse();
+}
+export function tryParseQuery(input) {
+    try {
+        return { ok: true, ast: parseQuery(input) };
+    }
+    catch (e) {
+        if (e instanceof QueryError)
+            return { ok: false, error: e.message, position: e.position };
+        throw e;
+    }
+}

package/dist/data/table/grid.svelte.d.ts

@@ -0,0 +1,57 @@
+import { SvelteSet } from "svelte/reactivity";
+import type { DataSet, QueryColumn } from "../dataset";
+import type { Column, FetchFn, GridState, Sort } from "./types";
+export type GridOptions<T> = {
+    columns: Column<T>[];
+    fetch: FetchFn<T>;
+    getRowId?: (row: T) => string;
+    perPage?: number;
+    perPageOptions?: number[];
+    initialQuery?: string;
+    initialSort?: Sort | null;
+};
+/**
+ * Shared, reactive controller for a data table. Implements {@link DataSet} (so any `<Query>` can
+ * drive it) and adds table view-state: rows, sort, pagination, selection, expansion, fetch.
+ * Created once and handed to both `<Query>` and `<DataTable>`.
+ */
+export declare class DataGrid<T> implements DataSet {
+    readonly columns: Column<T>[];
+    readonly fetch: FetchFn<T>;
+    readonly getRowId: (row: T) => string;
+    readonly perPageOptions: number[];
+    query: string;
+    applied: string;
+    error: string | null;
+    sort: Sort | null;
+    page: number;
+    perPage: number;
+    rows: T[];
+    total: number;
+    loading: boolean;
+    readonly selected: SvelteSet<string>;
+    readonly expanded: SvelteSet<string>;
+    constructor(opts: GridOptions<T>);
+    get queryColumns(): QueryColumn[];
+    get dirty(): boolean;
+    setDraft(raw: string): void;
+    commit(): void;
+    setQuery(raw: string): void;
+    get request(): GridState;
+    get pageCount(): number;
+    toggleSort(col: string): void;
+    setPage(p: number): void;
+    setPerPage(n: number): void;
+    get pageIds(): string[];
+    isSelected(id: string): boolean;
+    toggleRow(id: string): void;
+    get allSelected(): boolean;
+    get someSelected(): boolean;
+    toggleAll(): void;
+    clearSelection(): void;
+    isExpanded(id: string): boolean;
+    toggleExpand(id: string): void;
+    get allExpanded(): boolean;
+    toggleExpandAll(): void;
+}
+export declare function createGrid<T>(opts: GridOptions<T>): DataGrid<T>;

package/dist/data/table/grid.svelte.js

@@ -0,0 +1,139 @@
+import { SvelteSet } from "svelte/reactivity";
+import { tryParseQuery } from "../query";
+/**
+ * Shared, reactive controller for a data table. Implements {@link DataSet} (so any `<Query>` can
+ * drive it) and adds table view-state: rows, sort, pagination, selection, expansion, fetch.
+ * Created once and handed to both `<Query>` and `<DataTable>`.
+ */
+export class DataGrid {
+    columns;
+    fetch;
+    getRowId;
+    perPageOptions;
+    query = $state("");
+    applied = $state("");
+    error = $state(null);
+    sort = $state(null);
+    page = $state(1);
+    perPage = $state(25);
+    rows = $state([]);
+    total = $state(0);
+    loading = $state(false);
+    selected = new SvelteSet();
+    expanded = new SvelteSet();
+    constructor(opts) {
+        this.columns = opts.columns;
+        this.fetch = opts.fetch;
+        this.getRowId = opts.getRowId ?? ((r) => String(r.id));
+        this.perPage = opts.perPage ?? 25;
+        this.perPageOptions = opts.perPageOptions ?? [10, 25, 50, 100];
+        this.sort = opts.initialSort ?? null;
+        if (opts.initialQuery)
+            this.setQuery(opts.initialQuery);
+    }
+    // ---- DataSet ----
+    get queryColumns() {
+        return this.columns.map((c) => ({ id: c.id, label: c.label ?? c.header, filter: c.filter }));
+    }
+    get dirty() {
+        return this.query !== this.applied;
+    }
+    setDraft(raw) {
+        this.query = raw;
+        const res = tryParseQuery(raw);
+        this.error = res.ok ? null : res.error;
+    }
+    commit() {
+        const res = tryParseQuery(this.query);
+        if (!res.ok) {
+            this.error = res.error;
+            return;
+        }
+        this.error = null;
+        if (this.query !== this.applied) {
+            this.applied = this.query;
+            this.page = 1;
+        }
+    }
+    setQuery(raw) {
+        this.setDraft(raw);
+        this.commit();
+    }
+    // ---- table view-state ----
+    get request() {
+        return { q: this.applied, sort: this.sort, page: this.page, perPage: this.perPage };
+    }
+    get pageCount() {
+        return Math.max(1, Math.ceil(this.total / this.perPage));
+    }
+    toggleSort(col) {
+        if (!this.sort || this.sort.col !== col)
+            this.sort = { col, dir: "asc" };
+        else if (this.sort.dir === "asc")
+            this.sort = { col, dir: "desc" };
+        else
+            this.sort = null;
+        this.page = 1;
+    }
+    setPage(p) {
+        this.page = Math.min(Math.max(1, p), this.pageCount);
+    }
+    setPerPage(n) {
+        this.perPage = n;
+        this.page = 1;
+    }
+    // ---- selection (current page) ----
+    get pageIds() {
+        return this.rows.map((r) => this.getRowId(r));
+    }
+    isSelected(id) {
+        return this.selected.has(id);
+    }
+    toggleRow(id) {
+        if (this.selected.has(id))
+            this.selected.delete(id);
+        else
+            this.selected.add(id);
+    }
+    get allSelected() {
+        const ids = this.pageIds;
+        return ids.length > 0 && ids.every((id) => this.selected.has(id));
+    }
+    get someSelected() {
+        return this.pageIds.some((id) => this.selected.has(id)) && !this.allSelected;
+    }
+    toggleAll() {
+        const ids = this.pageIds;
+        if (this.allSelected)
+            ids.forEach((id) => this.selected.delete(id));
+        else
+            ids.forEach((id) => this.selected.add(id));
+    }
+    clearSelection() {
+        this.selected.clear();
+    }
+    // ---- expansion (current page) ----
+    isExpanded(id) {
+        return this.expanded.has(id);
+    }
+    toggleExpand(id) {
+        if (this.expanded.has(id))
+            this.expanded.delete(id);
+        else
+            this.expanded.add(id);
+    }
+    get allExpanded() {
+        const ids = this.pageIds;
+        return ids.length > 0 && ids.every((id) => this.expanded.has(id));
+    }
+    toggleExpandAll() {
+        const ids = this.pageIds;
+        if (this.allExpanded)
+            ids.forEach((id) => this.expanded.delete(id));
+        else
+            ids.forEach((id) => this.expanded.add(id));
+    }
+}
+export function createGrid(opts) {
+    return new DataGrid(opts);
+}

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

@@ -0,0 +1,2 @@
+export * from "./types";
+export { createGrid, DataGrid, type GridOptions } from "./grid.svelte";

package/dist/data/table/index.js

@@ -0,0 +1,2 @@
+export * from "./types";
+export { createGrid, DataGrid } from "./grid.svelte";

package/dist/data/table/types.d.ts

@@ -0,0 +1,79 @@
+import type { Component, Snippet } from "svelte";
+import type { QueryNode } from "../query";
+import type { FilterDef } from "../dataset";
+export type SortDir = "asc" | "desc";
+export type Sort = {
+    col: string;
+    dir: SortDir;
+};
+/** Our custom breakpoints + Tailwind defaults. `base` = mobile-first (no prefix).
+ *
+ *  Pixel boundaries (defined in theme.css `@theme`):
+ *  - `4xs` 320px  - `3xs` 360px  - `2xs` 420px  - `xs`  480px
+ *  - `sm`  640px  - `md`  768px  - `lg` 1024px  - `xl` 1280px
+ *  - `2xl` 1536px - `3xl` 1920px
+ */
+export type Breakpoint = "base" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+/** Placement of a column's cell on the 12-col grid at a given breakpoint. */
+export type GridPlacement = {
+    span?: number;
+    start?: number;
+    row?: number;
+    hidden?: boolean;
+};
+export type Column<T> = {
+    /** Stable id; also the `$token` used in the query language and the default sort key. */
+    id: string;
+    header?: string;
+    /** Body cell renderer (the 12-grid cell). */
+    cell: Snippet<[T]>;
+    sortable?: boolean;
+    sortKey?: string;
+    align?: "start" | "center" | "end";
+    /** Responsive placement on the 12-col grid. Defaults to full-width (`{ base: { span: 12 } }`). */
+    breakpoints?: Partial<Record<Breakpoint, GridPlacement>>;
+    /** Included in free-text search. */
+    searchable?: boolean;
+    /** Presence makes the column selectable in the `$` popup and drives value autocomplete. */
+    filter?: FilterDef;
+    /** Label shown in the `$` popup (defaults to header ?? id). */
+    label?: string;
+};
+/** The serializable state the table emits; your remote `query()` keys on this. */
+export type GridState = {
+    q: string;
+    sort: Sort | null;
+    page: number;
+    perPage: number;
+};
+export type FetchResult<T> = {
+    rows: T[];
+    total: number;
+};
+/**
+ * Minimal reactive query result the table consumes. SvelteKit's `RemoteQuery` satisfies this
+ * structurally, so a remote `query()` can be passed directly — but the lib stays framework-agnostic
+ * (any object exposing reactive `current`/`loading` works).
+ */
+export interface QueryResult<T> {
+    readonly current?: T;
+    readonly loading: boolean;
+    readonly error?: unknown;
+}
+/** Server-controlled fetch: returns a reactive result carrying rows + total. */
+export type FetchFn<T> = (state: GridState) => QueryResult<FetchResult<T>>;
+export type ParsedQuery = QueryNode | null;
+/**
+ * A row/bulk kebab menu entry. Convention: always render ALL items and `disabled` the invalid
+ * ones. Icons are optional — when ANY item has an icon, icon-less items reserve the icon column.
+ */
+export type MenuItem = {
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    onclick?: () => void;
+    href?: string;
+    disabled?: boolean;
+    danger?: boolean;
+};

package/dist/index.d.ts

@@ -1,24 +1,50 @@
+export { default as Alert } from "./components/Alert.svelte";
+export { default as Banner } from "./components/Banner.svelte";
 export { default as Badge } from "./components/Badge/Badge.svelte";
-export { default as Button } from "./components/Button/Button.svelte";
-export { default as Dialog } from "./components/Dialog/Dialog.svelte";
-export { default as Input } from "./components/Input/Input.svelte";
-export { default as NotesEditor } from "./components/NotesEditor/NotesEditor.svelte";
-export { default as Rating } from "./components/Rating/Rating.svelte";
-export { default as Select } from "./components/Select/Select.svelte";
-export { default as List } from "./components/List/List.svelte";
-export { default as ListView } from "./components/ListView/ListView.svelte";
-export { default as ListItem } from "./components/ListItem/ListItem.svelte";
-export { default as TextArea } from "./components/TextArea/TextArea.svelte";
-export { default as Icon } from "./components/Icon/Icon.svelte";
-export { default as ScrollView } from "./components/ScrollView/ScrollView.svelte";
-export { default as PasswordInput } from "./components/PasswordInput/PasswordInput.svelte";
-export { default as EmailInput } from "./components/EmailInput/EmailInput.svelte";
-export { default as SearchInput } from "./components/SearchInput/SearchInput.svelte";
-export { default as NumberInput } from "./components/NumberInput/NumberInput.svelte";
-export { default as ThemeSelector } from "./components/ThemeSelector/ThemeSelector.svelte";
-export { default as ElementManager } from "./components/ElementManager/ElementManager.svelte";
-export { default as TooltipHandler } from "./components/TooltipHandler/TooltipHandler.svelte";
-export { NodeGraph, Node, NodePort, Edge, NodeDecorator, Input as InputDecorator, Output as OutputDecorator, BaseNode, NodeInstance, ExpressionEvaluator, } from "./components/NodeGraph/index.js";
-export type { PortMode, ControlType, VariableScope, NodeOptions, InputOptions, OutputOptions, PortMetadata, NodeMetadata, Position, } from "./components/NodeGraph/index.js";
-export type { HandlerProps, HandlerComponentProps, ReadOnlyElements, } from "./types/ManagerTypes.js";
+export { default as Button } from "./components/Button.svelte";
+export { default as ButtonDropdown } from "./components/ButtonDropdown.svelte";
+export { default as Card } from "./components/Card.svelte";
+export { default as CardHeader } from "./components/CardHeader.svelte";
+export { default as CardBody } from "./components/CardBody.svelte";
+export { default as CardFooter } from "./components/CardFooter.svelte";
+export { default as Toaster } from "./components/Toast/Toaster.svelte";
+export { toast, getToasts, dismissToast, type ToastVariant, type ToastItem, } from "./components/Toast/toast.svelte.js";
+export { default as Dialog } from "./components/Dialog.svelte";
+export { default as Input } from "./components/Input.svelte";
+export { default as NotesEditor } from "./components/NotesEditor.svelte";
+export { default as Rating } from "./components/Rating.svelte";
+export { default as Select } from "./components/Select.svelte";
+export { default as List } from "./components/List.svelte";
+export { default as TextArea } from "./components/TextArea.svelte";
+export { default as PasswordInput } from "./components/PasswordInput.svelte";
+export { default as EmailInput } from "./components/EmailInput.svelte";
+export { default as SearchInput } from "./components/SearchInput.svelte";
+export { default as NumberInput } from "./components/NumberInput.svelte";
+export { default as DateTimeInput } from "./components/DateTimeInput.svelte";
+export { default as Calendar } from "./components/Calendar.svelte";
+export { default as DatePicker } from "./components/DatePicker.svelte";
+export { default as TimeSpinner } from "./components/TimeSpinner.svelte";
+export { default as TimePicker } from "./components/TimePicker.svelte";
+export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
+export { default as ThemeSelector } from "./components/ThemeSelector.svelte";
+export { default as Popup } from "./components/Popup.svelte";
+export { default as Menu } from "./components/Menu.svelte";
+export { default as Checkbox } from "./components/Checkbox.svelte";
+export { default as Toggle } from "./components/Toggle.svelte";
+export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
+export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, } from "./components/SideBarMenu/SideBarMenu.svelte";
+export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";
+export type { TabDefinition } from "./components/TabStrip/TabStrip.svelte";
+export { default as DataTable } from "./components/DataTable.svelte";
+export { default as Query } from "./components/Query.svelte";
+export { anchored, computePlacement, resolveBoundary } from "./positioning/anchored.js";
+export type { Side, Align, Boundary, PlaceOptions, Placement, AnchoredParams, } from "./positioning/anchored.js";
+export { tooltip } from "./positioning/tooltip.js";
+export type { TooltipOptions } from "./positioning/tooltip.js";
 export type { Variant } from "./types/variants.js";
+export type { Size } from "./types/sizes.js";
+export type { StepSpec } from "./types/time.js";
+export type { Breakpoint } from "./types/breakpoints.js";
+export { BREAKPOINT_PX } from "./types/breakpoints.js";
+export type { Responsive } from "./types/responsive.js";
+export { responsiveClasses, resolveScalar } from "./types/responsive.js";