@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/Gridler/components/GridlerFull.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 import type { GridlerCell, GridlerColumn, GridlerContextMenuItem, GridlerProps, Item } from "../types";
-export interface Props extends Omit<Partial<GridlerProps>, "columns" | "rows" | "getCellContent" | "searchValue" | "onSearchValueChange" | "onVisibleRangeChange" | "onCellDblClick" | "onRowClick" | "onRowContextMenu"> {
+export interface Props extends Omit<Partial<GridlerProps>, "columns" | "rows" | "getCellContent" | "searchValue" | "onSearchValueChange" | "onVisibleRangeChange" | "onCellDblClick" | "onRowClick" | "onRowContextMenu" | "onColumnsChange"> {
     columns: GridlerColumn[];
     /**
      * Optional row data. When provided (and `getCellContent` is omitted), the default

package/dist/components/Gridler/components/GridlerFullWithFormerPreview.svelte

@@ -1,150 +1,197 @@
-<script lang="ts">
-  import GridlerFull from './GridlerFull.svelte';
-  import FormerDrawer from '../../Former/FormerDrawer.svelte';
-  import TextInputCtrl from '../../FormerControllers/TextInputCtrl.svelte';
-  import NumberInputCtrl from '../../FormerControllers/NumberInputCtrl.svelte';
-  import NativeSelectCtrl from '../../FormerControllers/NativeSelectCtrl.svelte';
-  import type { FormRequestType } from '../../Former/types';
-  import type { GridlerContextMenuItem } from '../types';
-  import IconEdit from '../../Icons/IconEdit.svelte';
-  import IconTrash from '../../Icons/IconTrash.svelte';
-  import { iconAddSvg, iconEditSvg, iconTrashSvg } from '../../Icons/strings';
-
-  interface EmployeeRow {
-    id: number;
-    name: string;
-    email: string;
-    department: string;
-    salary: number;
-    status: string;
-  }
-
-  const DEPARTMENTS = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'];
-  const STATUSES = ['Active', 'Pending', 'Inactive'];
-  const FIRST = ['Alice', 'Bob', 'Carol', 'David', 'Eve', 'Frank', 'Grace', 'Henry'];
-  const LAST = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia'];
-
-  function makeRow(i: number): EmployeeRow {
-    const first = FIRST[i % FIRST.length];
-    const last = LAST[Math.floor(i / FIRST.length) % LAST.length];
-    return {
-      id: i + 1,
-      name: `${first} ${last}`,
-      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
-      department: DEPARTMENTS[i % DEPARTMENTS.length],
-      salary: 40000 + (i % 60) * 1000,
-      status: STATUSES[i % STATUSES.length],
-    };
-  }
-
-  const columns = [
-    { id: 'id', title: 'ID', width: 70 },
-    { id: 'name', title: 'Name', width: 180 },
-    { id: 'email', title: 'Email', width: 220 },
-    { id: 'department', title: 'Department', width: 150 },
-    { id: 'salary', title: 'Salary', width: 110 },
-    { id: 'status', title: 'Status', width: 110 },
-  ];
-
-  const departmentOptions = DEPARTMENTS.map((d) => ({ label: d, value: d }));
-  const statusOptions = STATUSES.map((s) => ({ label: s, value: s }));
-
-  let nextId = 51;
-  let rows = $state<Record<string, unknown>[]>(
-    Array.from({ length: 50 }, (_, i) => makeRow(i) as unknown as Record<string, unknown>),
-  );
-
-  // ── Drawer state ─────────────────────────────────────────────────────────────
-
-  let drawerOpen = $state(false);
-  let formMode = $state<FormRequestType>('update');
-  let formValues = $state<EmployeeRow | undefined>(undefined);
-  let lastSaved = $state<EmployeeRow | undefined>(undefined);
-
-  function openForm(mode: FormRequestType, row?: EmployeeRow) {
-    formMode = mode;
-    formValues = row ? { ...row } : { id: 0, name: '', email: '', department: '', salary: 50000, status: 'Active' };
-    drawerOpen = true;
-  }
-
-  const drawerTitle = $derived(
-    formMode === 'insert' ? 'Add Employee' : formMode === 'delete' ? 'Delete Employee' : 'Edit Employee',
-  );
-
-  // ── Selection tracking ────────────────────────────────────────────────────────
-
-  let selectedItems = $state<Record<string, unknown>[]>([]);
-
-  function firstSelected(): EmployeeRow | undefined {
-    const item = selectedItems[0];
-    return item ? (item as unknown as EmployeeRow) : undefined;
-  }
-
-  // ── Burger menu items ─────────────────────────────────────────────────────────
-
-  const menuItems: GridlerContextMenuItem[] = [
-    { id: 'add', label: 'Add', icon: iconAddSvg, kind: 'item', onselect: () => openForm('insert') },
-    { id: 'sep1', label: '', kind: 'separator' },
-    {
-      id: 'edit',
-      label: 'Edit Selected',
-      icon: iconEditSvg,
-      kind: 'item',
-      onselect: () => {
-        const row = firstSelected();
-        if (row) openForm('update', row);
-      },
-    },
-    {
-      id: 'delete',
-      label: 'Delete Selected',
-      icon: iconTrashSvg,
-      kind: 'item',
-      onselect: () => {
-        const row = firstSelected();
-        if (row) openForm('delete', row);
-      },
-    },
-  ];
-
-  // ── Context menu (right-click on row) ─────────────────────────────────────────
-
-  let ctxVisible = $state(false);
-  let ctxX = $state(0);
-  let ctxY = $state(0);
-  let ctxRow = $state<EmployeeRow | undefined>(undefined);
-  let wrapperEl = $state<HTMLElement | null>(null);
-  let lastMousePos = { x: 0, y: 0 };
-
-  // Capture phase fires before the canvas handler, so lastMousePos is fresh when
-  // onRowContextMenu calls showContextMenu.
-  $effect(() => {
-    if (!wrapperEl) return;
-    const handler = (e: MouseEvent) => { lastMousePos = { x: e.clientX, y: e.clientY }; };
-    wrapperEl.addEventListener('contextmenu', handler, true);
-    return () => wrapperEl?.removeEventListener('contextmenu', handler, true);
-  });
-
-  function showContextMenu(rowData: Record<string, unknown> | undefined) {
-    if (!rowData) return;
-    ctxRow = rowData as unknown as EmployeeRow;
-    ctxX = lastMousePos.x;
-    ctxY = lastMousePos.y;
-    ctxVisible = true;
-
-    const close = () => {
-      ctxVisible = false;
-      document.removeEventListener('click', close, true);
-      document.removeEventListener('keydown', closeOnEsc, true);
-    };
-    const closeOnEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') close();
-    };
-    setTimeout(() => {
-      document.addEventListener('click', close, true);
-      document.addEventListener('keydown', closeOnEsc, true);
-    }, 0);
-  }
+<script lang="ts">import GridlerFull from "./GridlerFull.svelte";
+import FormerDrawer from "../../Former/FormerDrawer.svelte";
+import TextInputCtrl from "../../FormerControllers/TextInputCtrl.svelte";
+import NumberInputCtrl from "../../FormerControllers/NumberInputCtrl.svelte";
+import NativeSelectCtrl from "../../FormerControllers/NativeSelectCtrl.svelte";
+import IconEdit from "../../Icons/IconEdit.svelte";
+import IconTrash from "../../Icons/IconTrash.svelte";
+import { iconAddSvg, iconEditSvg, iconTrashSvg } from "../../Icons/strings";
+const DEPARTMENTS = [
+	"Engineering",
+	"Marketing",
+	"Sales",
+	"HR",
+	"Finance",
+	"Operations"
+];
+const STATUSES = [
+	"Active",
+	"Pending",
+	"Inactive"
+];
+const FIRST = [
+	"Alice",
+	"Bob",
+	"Carol",
+	"David",
+	"Eve",
+	"Frank",
+	"Grace",
+	"Henry"
+];
+const LAST = [
+	"Smith",
+	"Johnson",
+	"Williams",
+	"Brown",
+	"Jones",
+	"Garcia"
+];
+function makeRow(i) {
+	const first = FIRST[i % FIRST.length];
+	const last = LAST[Math.floor(i / FIRST.length) % LAST.length];
+	return {
+		id: i + 1,
+		name: `${first} ${last}`,
+		email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+		department: DEPARTMENTS[i % DEPARTMENTS.length],
+		salary: 4e4 + i % 60 * 1e3,
+		status: STATUSES[i % STATUSES.length]
+	};
+}
+const columns = [
+	{
+		id: "id",
+		title: "ID",
+		width: 70
+	},
+	{
+		id: "name",
+		title: "Name",
+		width: 180
+	},
+	{
+		id: "email",
+		title: "Email",
+		width: 220
+	},
+	{
+		id: "department",
+		title: "Department",
+		width: 150
+	},
+	{
+		id: "salary",
+		title: "Salary",
+		width: 110
+	},
+	{
+		id: "status",
+		title: "Status",
+		width: 110
+	}
+];
+const departmentOptions = DEPARTMENTS.map((d) => ({
+	label: d,
+	value: d
+}));
+const statusOptions = STATUSES.map((s) => ({
+	label: s,
+	value: s
+}));
+let nextId = 51;
+let rows = $state(Array.from({ length: 50 }, (_, i) => makeRow(i)));
+// ── Drawer state ─────────────────────────────────────────────────────────────
+let drawerOpen = $state(false);
+let formMode = $state("update");
+let formValues = $state(undefined);
+let lastSaved = $state(undefined);
+function openForm(mode, row) {
+	formMode = mode;
+	formValues = row ? { ...row } : {
+		id: 0,
+		name: "",
+		email: "",
+		department: "",
+		salary: 5e4,
+		status: "Active"
+	};
+	drawerOpen = true;
+}
+const drawerTitle = $derived(formMode === "insert" ? "Add Employee" : formMode === "delete" ? "Delete Employee" : "Edit Employee");
+// ── Selection tracking ────────────────────────────────────────────────────────
+let selectedItems = $state([]);
+function firstSelected() {
+	const item = selectedItems[0];
+	return item ? item : undefined;
+}
+// ── Burger menu items ─────────────────────────────────────────────────────────
+const menuItems = [
+	{
+		id: "add",
+		label: "Add",
+		icon: iconAddSvg,
+		kind: "item",
+		onselect: () => openForm("insert")
+	},
+	{
+		id: "sep1",
+		label: "",
+		kind: "separator"
+	},
+	{
+		id: "edit",
+		label: "Edit Selected",
+		icon: iconEditSvg,
+		kind: "item",
+		onselect: () => {
+			const row = firstSelected();
+			if (row) openForm("update", row);
+		}
+	},
+	{
+		id: "delete",
+		label: "Delete Selected",
+		icon: iconTrashSvg,
+		kind: "item",
+		onselect: () => {
+			const row = firstSelected();
+			if (row) openForm("delete", row);
+		}
+	}
+];
+// ── Context menu (right-click on row) ─────────────────────────────────────────
+let ctxVisible = $state(false);
+let ctxX = $state(0);
+let ctxY = $state(0);
+let ctxRow = $state(undefined);
+let wrapperEl = $state(null);
+let lastMousePos = {
+	x: 0,
+	y: 0
+};
+// Capture phase fires before the canvas handler, so lastMousePos is fresh when
+// onRowContextMenu calls showContextMenu.
+$effect(() => {
+	if (!wrapperEl) return;
+	const handler = (e) => {
+		lastMousePos = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	};
+	wrapperEl.addEventListener("contextmenu", handler, true);
+	return () => wrapperEl?.removeEventListener("contextmenu", handler, true);
+});
+function showContextMenu(rowData) {
+	if (!rowData) return;
+	ctxRow = rowData;
+	ctxX = lastMousePos.x;
+	ctxY = lastMousePos.y;
+	ctxVisible = true;
+	const close = () => {
+		ctxVisible = false;
+		document.removeEventListener("click", close, true);
+		document.removeEventListener("keydown", closeOnEsc, true);
+	};
+	const closeOnEsc = (e) => {
+		if (e.key === "Escape") close();
+	};
+	setTimeout(() => {
+		document.addEventListener("click", close, true);
+		document.addEventListener("keydown", closeOnEsc, true);
+	}, 0);
+}
 </script>
 
 <div class="p-4 space-y-2" bind:this={wrapperEl}>

package/dist/components/Gridler/components/GridlerSearch.svelte

@@ -1,19 +1,10 @@
-<script lang="ts">
-  // @ts-nocheck
-  import IconClose from '../../Icons/IconClose.svelte';
-  interface Props {
-    value: string;
-    onValueChange: (v: string) => void;
-    onClose?: () => void;
-  }
-
-  const { value, onValueChange, onClose }: Props = $props();
-
-  let inputRef: HTMLInputElement | undefined;
-
-  export function focus() {
-    inputRef?.focus();
-  }
+<script lang="ts">// @ts-nocheck
+import IconClose from "../../Icons/IconClose.svelte";
+const { value, onValueChange, onClose } = $props();
+let inputRef;
+export function focus() {
+	inputRef?.focus();
+}
 </script>
 
 <div class="gridler-search" role="search">

package/dist/components/Gridler/components/GridlerSearchToggle.svelte

@@ -1,22 +1,10 @@
-<script lang="ts">
-  import GridlerSearch from './GridlerSearch.svelte';
-  import IconSearch from '../../Icons/IconSearch.svelte';
-
-  interface Props {
-    show: boolean;
-    value: string;
-    onToggle: () => void;
-    onValueChange: (v: string) => void;
-    onClose: () => void;
-  }
-
-  const { show, value, onToggle, onValueChange, onClose }: Props = $props();
-
-  let search: GridlerSearch | undefined = $state();
-
-  $effect(() => {
-    if (show) search?.focus();
-  });
+<script lang="ts">import GridlerSearch from "./GridlerSearch.svelte";
+import IconSearch from "../../Icons/IconSearch.svelte";
+const { show, value, onToggle, onValueChange, onClose } = $props();
+let search = $state();
+$effect(() => {
+	if (show) search?.focus();
+});
 </script>
 
 <button

package/dist/components/Gridler/types.d.ts

@@ -124,7 +124,7 @@ export interface ScrollState {
  *   selectedItems, onSelectedItemsChange,
  *   dataSource, dataSourceOptions, data, onDataChange, settings
  */
-export interface GridlerProps extends GridCommonProps<Record<string, unknown>> {
+export interface GridlerProps extends Omit<GridCommonProps<Record<string, unknown>>, 'onCellDblClick' | 'onColumnsChange'> {
     /** Override with the more specific GridlerColumn type. */
     columns: GridlerColumn[];
     /** Total number of data rows. */

package/dist/components/Gridler/utils/serverPaging.d.ts

@@ -0,0 +1 @@
+export declare function getServerRenderableRows(loadedRows: number, reportedTotal: number, allLoaded: boolean): number;

package/dist/components/Gridler/utils/serverPaging.js

@@ -0,0 +1,7 @@
+export function getServerRenderableRows(loadedRows, reportedTotal, allLoaded) {
+    if (allLoaded)
+        return reportedTotal;
+    if (reportedTotal <= 0)
+        return loadedRows;
+    return Math.min(loadedRows, reportedTotal);
+}

package/dist/components/Icons/IconAdd.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <circle cx="12" cy="12" r="9"/>

package/dist/components/Icons/IconAlertCircle.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <circle cx="12" cy="12" r="10"/>

package/dist/components/Icons/IconAlertTriangle.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <path d="m10.29 3.86-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.71-3.14l-8-14a2 2 0 0 0-3.42 0z"/>

package/dist/components/Icons/IconCamera.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>

package/dist/components/Icons/IconClose.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <path d="M18 6 6 18M6 6l12 12"/>

package/dist/components/Icons/IconEdit.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>

package/dist/components/Icons/IconFilter.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" class={cls} aria-hidden="true">
   <path d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 .8 1.6L14 13.5V19a1 1 0 0 1-1.45.9l-3-1.5A1 1 0 0 1 9 17.5v-4L3.2 5.6A1 1 0 0 1 3 5Z"/>

package/dist/components/Icons/IconSearch.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <circle cx="11" cy="11" r="7"/>

package/dist/components/Icons/IconSort.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { direction: 'asc' | 'desc'; size?: number; class?: string; }
-  const { direction, size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { direction, size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" class={cls} aria-hidden="true">
   {#if direction === 'asc'}

package/dist/components/Icons/IconTrash.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  interface Props { size?: number; class?: string; }
-  const { size = 16, class: cls = '' }: Props = $props();
+<script lang="ts">const { size = 16, class: cls = "" } = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cls} aria-hidden="true">
   <path d="M3 6h18"/>

package/dist/components/Portal/Portal.svelte

@@ -1,43 +1,19 @@
-<script lang="ts" module>
-  import type { PropsWithChildren } from "../../utils/PropsWithChildren";
-
-  export interface PortalRootProps extends Required<PropsWithChildren> {
-    /**
-     * If true, the portal functionality is disabled and children are rendered in place.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The HTML element to which the portal content will be appended.
-     *
-     * @default document.body
-     */
-    target?: HTMLElement;
-  }
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-  import { getAllContexts, mount, unmount } from "svelte";
-
-  const context = getAllContexts();
-
-  const {
-    children,
-    disabled = false,
-    target = typeof window === "undefined" ? undefined : document.body,
-  }: PortalRootProps = $props();
-
-  $effect(() => {
-    if (disabled || !target) {
-      return;
-    }
-    const instance = mount(children, {
-      target: target,
-      context: context,
-    });
-    return () => unmount(instance);
-  });
+<script lang="ts">import { getAllContexts, mount, unmount } from "svelte";
+const context = getAllContexts();
+const { children, disabled = false, target = typeof window === "undefined" ? undefined : document.body } = $props();
+$effect(() => {
+	if (disabled || !target) {
+		return;
+	}
+	const instance = mount(children, {
+		target,
+		context
+	});
+	return () => unmount(instance);
+});
 </script>
 
 {#if disabled || !target}

package/dist/components/Screenshot/Screenshot.svelte

@@ -1,16 +1,10 @@
-<script lang="ts">
-  import { CaptureScreen } from "./Screenshot.util";
-  import IconCamera from '../Icons/IconCamera.svelte';
-
-  let screenshot = $state("");
-
-  const capture = async () => {
-    screenshot = await CaptureScreen();
-  };
-
-  const truncatedScreenshot = $derived(
-    screenshot ? `${screenshot.substring(0, 100)}...` : "",
-  );
+<script lang="ts">import { CaptureScreen } from "./Screenshot.util";
+import IconCamera from "../Icons/IconCamera.svelte";
+let screenshot = $state("");
+const capture = async () => {
+	screenshot = await CaptureScreen();
+};
+const truncatedScreenshot = $derived(screenshot ? `${screenshot.substring(0, 100)}...` : "");
 </script>
 
 <div class="p-4">