@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/SvarkGrid/components/SvarkColumnFilterForm.svelte

@@ -1,63 +1,50 @@
-<script lang="ts">
-	import type { GridColumnFilters } from '../../Types/generic_grid';
-
-	export type FilterOp = NonNullable<GridColumnFilters[string]['op']>;
-
-	export interface Props {
-		columnId: string;
-		columnLabel: string;
-		current?: GridColumnFilters[string];
-		currentSort?: 'none' | 'asc' | 'desc';
-		onSet: (next: GridColumnFilters[string]) => void;
-		onClear: () => void;
-		onSetSort: (next: 'none' | 'asc' | 'desc') => void;
-		onClose: () => void;
-	}
-
-	const { columnId, columnLabel, current, currentSort = 'none', onSet, onClear, onSetSort, onClose }: Props =
-		$props();
-
-	const operatorOptions: Array<{ value: FilterOp; label: string }> = [
-		{ value: 'contains', label: 'Contains' },
-		{ value: 'equals', label: 'Equals' }
-	];
-
-	let op = $state<FilterOp>(current?.op ?? 'contains');
-	let value = $state(current?.value ?? '');
-	let sort = $state<'none' | 'asc' | 'desc'>(currentSort);
-
-	$effect(() => {
-		op = (current?.op ?? 'contains') as FilterOp;
-		value = current?.value ?? '';
-		sort = currentSort ?? 'none';
-	});
-
-	function applyIfValid(nextOp: FilterOp, nextValue: string) {
-		const v = nextValue.trim();
-		// Empty value means "no filter".
-		if (!v) {
-			onClear();
-			return;
-		}
-		onSet({ value: v, op: nextOp });
-	}
-
-	function handleOpChange(next: string) {
-		const nextOp = (next as FilterOp) ?? 'contains';
-		op = nextOp;
-		applyIfValid(nextOp, value);
-	}
-
-	function handleValueInput(next: string) {
-		value = next;
-		applyIfValid(op, next);
-	}
-
-	function handleClear() {
-		value = '';
-		op = 'contains';
+<script lang="ts">const { columnId, columnLabel, current, currentSort = "none", onSet, onClear, onSetSort, onClose } = $props();
+const operatorOptions = [{
+	value: "contains",
+	label: "Contains"
+}, {
+	value: "equals",
+	label: "Equals"
+}];
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture; $effect below syncs prop changes
+let op = $state(current?.op ?? "contains");
+// svelte-ignore state_referenced_locally
+let value = $state(current?.value ?? "");
+// svelte-ignore state_referenced_locally
+let sort = $state(currentSort);
+$effect(() => {
+	op = current?.op ?? "contains";
+	value = current?.value ?? "";
+	sort = currentSort ?? "none";
+});
+function applyIfValid(nextOp, nextValue) {
+	const v = nextValue.trim();
+	// Empty value means "no filter".
+	if (!v) {
 		onClear();
+		return;
 	}
+	onSet({
+		value: v,
+		op: nextOp
+	});
+}
+function handleOpChange(next) {
+	const nextOp = next ?? "contains";
+	op = nextOp;
+	applyIfValid(nextOp, value);
+}
+function handleValueInput(next) {
+	value = next;
+	applyIfValid(op, next);
+}
+function handleClear() {
+	value = "";
+	op = "contains";
+	onClear();
+}
+export {};
 </script>
 
 <form class="px-3 pt-1 pb-2" aria-label={`Filter ${columnLabel}`} onsubmit={(e) => e.preventDefault()}>

package/dist/components/SvarkGrid/components/SvarkContextMenu.svelte

@@ -1,67 +1,48 @@
-<script lang="ts">
-	import Portal from '../../Portal/Portal.svelte';
-	import { registerOverlay } from '../../OverlayStack';
-	import { tick } from 'svelte';
-	import type { SvarkContextMenuItem } from '../types.js';
-
-	export interface Props {
-		open: boolean;
-		x: number;
-		y: number;
-		items: SvarkContextMenuItem[];
-		onselectitem?: (item: SvarkContextMenuItem | { id: '__close__' }) => void;
-	}
-
-	const { open, x, y, items, onselectitem }: Props = $props();
-
-	let backdropZ = $state(1090);
-	let menuZ = $state(1100);
-
-	let menuRef = $state<HTMLDivElement | null>(null);
-	let clampedX = $state(0);
-	let clampedY = $state(0);
-
-	function clampToViewport() {
-		const node = menuRef;
-		if (!node) return;
-
-		const rect = node.getBoundingClientRect();
-		const vw = window.innerWidth;
-		const vh = window.innerHeight;
-
-		// Keep the menu inside the viewport with a small gutter.
-		const gutter = 8;
-		clampedX = Math.max(gutter, Math.min(clampedX, vw - rect.width - gutter));
-		clampedY = Math.max(gutter, Math.min(clampedY, vh - rect.height - gutter));
-	}
-
-	$effect(() => {
-		if (!open) return;
-
-		const overlay = registerOverlay({ kind: 'contextmenu', mount: 'portal' });
-		backdropZ = overlay.layer.backdrop;
-		menuZ = overlay.layer.content;
-
-		clampedX = x;
-		clampedY = y;
-
-		// Wait for the menu to render before measuring and clamping.
-		void tick().then(clampToViewport);
-
-		return () => {
-			overlay.unregister();
-			backdropZ = 1090;
-			menuZ = 1100;
-			menuRef = null;
-		};
-	});
-
-	$effect(() => {
-		if (!open) return;
-		clampedX = x;
-		clampedY = y;
-		void tick().then(clampToViewport);
+<script lang="ts">import Portal from "../../Portal/Portal.svelte";
+import { registerOverlay } from "../../OverlayStack";
+import { tick } from "svelte";
+const { open, x, y, items, onselectitem } = $props();
+let backdropZ = $state(1090);
+let menuZ = $state(1100);
+let menuRef = $state(null);
+let clampedX = $state(0);
+let clampedY = $state(0);
+function clampToViewport() {
+	const node = menuRef;
+	if (!node) return;
+	const rect = node.getBoundingClientRect();
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	// Keep the menu inside the viewport with a small gutter.
+	const gutter = 8;
+	clampedX = Math.max(gutter, Math.min(clampedX, vw - rect.width - gutter));
+	clampedY = Math.max(gutter, Math.min(clampedY, vh - rect.height - gutter));
+}
+$effect(() => {
+	if (!open) return;
+	const overlay = registerOverlay({
+		kind: "contextmenu",
+		mount: "portal"
 	});
+	backdropZ = overlay.layer.backdrop;
+	menuZ = overlay.layer.content;
+	clampedX = x;
+	clampedY = y;
+	// Wait for the menu to render before measuring and clamping.
+	void tick().then(clampToViewport);
+	return () => {
+		overlay.unregister();
+		backdropZ = 1090;
+		menuZ = 1100;
+		menuRef = null;
+	};
+});
+$effect(() => {
+	if (!open) return;
+	clampedX = x;
+	clampedY = y;
+	void tick().then(clampToViewport);
+});
 </script>
 
 <Portal>

package/dist/components/SvarkGrid/components/SvarkHeaderFilterCell.svelte

@@ -1,78 +1,44 @@
-<script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import { getContext } from 'svelte';
-	import type { BetterMenuStore } from '../../BetterMenu/store';
-	import type { GridColumnFilters } from '../../Types/generic_grid';
-	import SvarkColumnFilterForm from './SvarkColumnFilterForm.svelte';
-	import IconSort from '../../Icons/IconSort.svelte';
-	import IconFilter from '../../Icons/IconFilter.svelte';
-
-	type IApi = any;
-	type IColumn = any;
-	type IRow = any;
-	type IHeaderCell = any;
-
-	type HeaderCellExtras = {
-		__svarkMenuId?: string;
-		__svarkFilterable?: boolean;
-		__svarkColumnId?: string;
-		__svarkColumnLabel?: string;
-		__svarkSearchHighlight?: boolean;
-		__svarkCurrentSort?: 'none' | 'asc' | 'desc';
-		__svarkSetSort?: (next: 'none' | 'asc' | 'desc') => void;
-		__svarkCurrentFilter?: GridColumnFilters[string];
-		__svarkSetFilter?: (next: GridColumnFilters[string]) => void;
-		__svarkClearFilter?: () => void;
-	};
-
-	export interface Props {
-		api: IApi;
-		row: IRow;
-		column: IColumn;
-		onaction: (ev: { action?: any; data?: { [key: string]: any } }) => void;
-		cell: Omit<IHeaderCell, 'cell'> & HeaderCellExtras;
-	}
-
-	const { api, cell, column, row: _row, onaction: _onaction }: Props = $props();
-
-	let menuStore: BetterMenuStore | undefined;
-	try {
-		menuStore = getContext<BetterMenuStore>('betterMenuStore');
-	} catch {
-		menuStore = undefined;
-	}
-
-	const columnId = $derived(String(cell.__svarkColumnId ?? (column as any)?.id ?? ''));
-	const columnLabel = $derived(String(cell.__svarkColumnLabel ?? (cell as any)?.text ?? columnId));
-	const filterable = $derived(Boolean(cell.__svarkFilterable));
-	const currentFilter = $derived(cell.__svarkCurrentFilter);
-	const isActive = $derived(Boolean(currentFilter?.value?.trim?.() ?? currentFilter?.value));
-	const searchHighlight = $derived(Boolean(cell.__svarkSearchHighlight));
-	const currentSort = $derived((cell.__svarkCurrentSort ?? 'none') as 'none' | 'asc' | 'desc');
-	const menuId = $derived(String(cell.__svarkMenuId ?? `svarkgrid-filter-${columnId}`));
-	const canSort = $derived(Boolean((column as any)?.sort));
-
-	// Read SVAR's sort marks so we can render an indicator (we replace the default header cell).
-	const { sortMarks } = api.getReactiveState() as any;
-	const sortMark = $derived(sortMarks ? $sortMarks[columnId] : undefined);
-
-	let iconBtnRef = $state<HTMLButtonElement | null>(null);
-
-	function openMenu() {
-		if (!menuStore) return;
-		const rect = iconBtnRef?.getBoundingClientRect();
-		menuStore.show(menuId, {
-			x: rect ? rect.left : 0,
-			y: rect ? rect.bottom + 8 : 0,
-			renderer: FilterMenu as any
-		});
-	}
-
-	function onIconClick(e: MouseEvent) {
-		e.preventDefault();
-		e.stopPropagation(); // don't trigger column sort
-		openMenu();
-	}
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
+import { getContext } from "svelte";
+import SvarkColumnFilterForm from "./SvarkColumnFilterForm.svelte";
+import IconSort from "../../Icons/IconSort.svelte";
+import IconFilter from "../../Icons/IconFilter.svelte";
+const { api, cell, column, row: _row, onaction: _onaction } = $props();
+let menuStore;
+try {
+	menuStore = getContext("betterMenuStore");
+} catch {
+	menuStore = undefined;
+}
+const columnId = $derived(String(cell.__svarkColumnId ?? column?.id ?? ""));
+const columnLabel = $derived(String(cell.__svarkColumnLabel ?? cell?.text ?? columnId));
+const filterable = $derived(Boolean(cell.__svarkFilterable));
+const currentFilter = $derived(cell.__svarkCurrentFilter);
+const isActive = $derived(Boolean(currentFilter?.value?.trim?.() ?? currentFilter?.value));
+const searchHighlight = $derived(Boolean(cell.__svarkSearchHighlight));
+const currentSort = $derived(cell.__svarkCurrentSort ?? "none");
+const menuId = $derived(String(cell.__svarkMenuId ?? `svarkgrid-filter-${columnId}`));
+const canSort = $derived(Boolean(column?.sort));
+// Read SVAR's sort marks so we can render an indicator (we replace the default header cell).
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- api is the SVAR grid api, captured once at mount
+const { sortMarks } = api.getReactiveState();
+const sortMark = $derived(sortMarks ? $sortMarks[columnId] : undefined);
+let iconBtnRef = $state(null);
+function openMenu() {
+	if (!menuStore) return;
+	const rect = iconBtnRef?.getBoundingClientRect();
+	menuStore.show(menuId, {
+		x: rect ? rect.left : 0,
+		y: rect ? rect.bottom + 8 : 0,
+		renderer: FilterMenu
+	});
+}
+function onIconClick(e) {
+	e.preventDefault();
+	e.stopPropagation();
+	openMenu();
+}
 </script>
 
 {#snippet FilterMenu({ onClose }: { onClose: () => void })}

package/dist/components/SvarkGrid/components/SvarkInfiniteLoader.svelte

@@ -1,9 +1,5 @@
-<script lang="ts">
-	export interface Props {
-		dark?: boolean;
-	}
-
-	let { dark = false }: Props = $props();
+<script lang="ts">let { dark = false } = $props();
+export {};
 </script>
 
 <div class="svark-inf-loader" class:svark-inf-loader-dark={dark} aria-label="Loading more rows...">

package/dist/components/SvarkGrid/components/SvarkPager.svelte

@@ -1,31 +1,5 @@
-<script lang="ts">
-	export interface Props {
-		dark?: boolean;
-		page: number;
-		total: number;
-		totalPages: number;
-		pageStart: number;
-		pageEnd: number;
-		loading: boolean;
-		onFirst: () => void;
-		onPrev: () => void;
-		onNext: () => void;
-		onLast: () => void;
-	}
-
-	let {
-		dark = false,
-		page,
-		total,
-		totalPages,
-		pageStart,
-		pageEnd,
-		loading,
-		onFirst,
-		onPrev,
-		onNext,
-		onLast
-	}: Props = $props();
+<script lang="ts">let { dark = false, page, total, totalPages, pageStart, pageEnd, loading, onFirst, onPrev, onNext, onLast } = $props();
+export {};
 </script>
 
 <div class="svark-pager" class:svark-pager-dark={dark} aria-label="Pagination">

package/dist/components/SvarkGrid/components/SvarkSearchPopover.svelte

@@ -1,20 +1,12 @@
-<script lang="ts">
-	export interface Props {
-		value: string;
-		onChange: (value: string) => void;
-		onClose: () => void;
-	}
-
-	const { value, onChange, onClose }: Props = $props();
-
-	let inputEl = $state<HTMLInputElement | null>(null);
-
-	$effect(() => {
-		queueMicrotask(() => {
-			inputEl?.focus();
-			inputEl?.select();
-		});
+<script lang="ts">const { value, onChange, onClose } = $props();
+let inputEl = $state(null);
+$effect(() => {
+	queueMicrotask(() => {
+		inputEl?.focus();
+		inputEl?.select();
 	});
+});
+export {};
 </script>
 
 <form class="px-3 pt-1 pb-2" role="search" aria-label="Grid search" onsubmit={(e) => e.preventDefault()}>

package/dist/components/SvarkGrid/components/SvarkTopBar.svelte

@@ -1,21 +1,5 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	export interface Props {
-		dark?: boolean;
-		topBarLeft?: Snippet;
-		topBarRight?: Snippet;
-		searchOpen: boolean;
-		onToggleSearch: () => void;
-	}
-
-	let {
-		dark = false,
-		topBarLeft,
-		topBarRight,
-		searchOpen,
-		onToggleSearch,
-	}: Props = $props();
+<script lang="ts">let { dark = false, topBarLeft, topBarRight, searchOpen, onToggleSearch } = $props();
+export {};
 </script>
 
 <div class="svark-toolbar" class:svark-toolbar-dark={dark} aria-label="Grid tools">
@@ -84,44 +68,7 @@
 		gap: 0.5rem;
 	}
 
-	.svark-input,
-	.svark-select {
-		min-width: 0;
-		height: 28px;
-		padding: 0 0.5rem;
-		border: 1px solid var(--color-surface-200, #e2e8f0);
-		border-radius: 6px;
-		background: var(--color-surface-50, #ffffff);
-		color: var(--color-surface-contrast-50, #111827);
-		font-size: 12px;
-		outline: none;
-	}
-
-	.svark-toolbar-dark .svark-input,
-	.svark-toolbar-dark .svark-select {
-		border-color: var(--color-surface-800, #384047);
-		background: var(--color-surface-900, #2a2b2d);
-		color: var(--color-surface-contrast-900, rgba(255, 255, 255, 0.92));
-	}
-
-	.svark-input:focus,
-	.svark-select:focus {
-		border-color: var(--color-primary-500, #4f46e5);
-		box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
-		box-shadow: 0 0 0 3px
-			color-mix(in oklab, var(--color-primary-500, #4f46e5) 22%, transparent);
-	}
-
-	.svark-toolbar-dark .svark-input:focus,
-	.svark-toolbar-dark .svark-select:focus {
-		border-color: var(--color-primary-400, #7a67eb);
-		box-shadow: 0 0 0 3px rgba(122, 103, 235, 0.18);
-		box-shadow: 0 0 0 3px
-			color-mix(in oklab, var(--color-primary-400, #7a67eb) 28%, transparent);
-	}
-
-	.svark-tool-btn,
-	.svark-chip-btn {
+	.svark-tool-btn {
 		height: 28px;
 		padding: 0 0.5rem;
 		border: 1px solid var(--color-surface-200, #e2e8f0);
@@ -133,19 +80,16 @@
 		transition: background 0.15s;
 	}
 
-	.svark-toolbar-dark .svark-tool-btn,
-	.svark-toolbar-dark .svark-chip-btn {
+	.svark-toolbar-dark .svark-tool-btn {
 		border-color: var(--color-surface-800, #384047);
 		color: var(--color-surface-contrast-900, rgba(255, 255, 255, 0.9));
 	}
 
-	.svark-tool-btn:hover,
-	.svark-chip-btn:hover {
+	.svark-tool-btn:hover {
 		background: var(--color-surface-100, #eaedf5);
 	}
 
-	.svark-toolbar-dark .svark-tool-btn:hover,
-	.svark-toolbar-dark .svark-chip-btn:hover {
+	.svark-toolbar-dark .svark-tool-btn:hover {
 		background: var(--color-surface-800, #384047);
 	}