@warkypublic/svelix 0.1.44 → 0.1.47

package/dist/components/VTree/VTreeContextMenu.svelte

@@ -1,36 +1,24 @@
-<script lang="ts">
-  import Portal from '../Portal/Portal.svelte';
-  import { registerOverlay } from '../OverlayStack';
-  import type { VTreeContextMenuItem, VTreeRecord } from './types.js';
-
-  export interface Props<T extends VTreeRecord = VTreeRecord> {
-    open: boolean;
-    x: number;
-    y: number;
-    items: VTreeContextMenuItem<T>[];
-    onselectitem?: (item: VTreeContextMenuItem<T>) => void;
-  }
-
-  const { open, x, y, items, onselectitem }: Props = $props();
-
-  let backdropZ = $state(1090);
-  let menuZ = $state(1100);
-
-  $effect(() => {
-    if (!open) {
-      return;
-    }
-
-    const overlay = registerOverlay({ kind: 'contextmenu', mount: 'portal' });
-    backdropZ = overlay.layer.backdrop;
-    menuZ = overlay.layer.content;
-
-    return () => {
-      overlay.unregister();
-      backdropZ = 1090;
-      menuZ = 1100;
-    };
-  });
+<script lang="ts">import Portal from "../Portal/Portal.svelte";
+import { registerOverlay } from "../OverlayStack";
+const { open, x, y, items, onselectitem } = $props();
+let backdropZ = $state(1090);
+let menuZ = $state(1100);
+$effect(() => {
+	if (!open) {
+		return;
+	}
+	const overlay = registerOverlay({
+		kind: "contextmenu",
+		mount: "portal"
+	});
+	backdropZ = overlay.layer.backdrop;
+	menuZ = overlay.layer.content;
+	return () => {
+		overlay.unregister();
+		backdropZ = 1090;
+		menuZ = 1100;
+	};
+});
 </script>
 
 <Portal>

package/dist/components/VTree/VTreeEventsDemo.svelte

@@ -1,61 +1,51 @@
-<script lang="ts">
-  // @ts-nocheck
-  import VTree from './VTree.svelte';
-  import type { VTreeContextMenuItem, VTreeRecord } from './types.js';
-
-  interface DemoNode extends VTreeRecord {
-    id: string;
-    label: string;
-    description?: string;
-    children?: DemoNode[];
-    hasChildren?: boolean;
-  }
-
-  const data: DemoNode[] = [
-    {
-      id: 'alpha',
-      label: 'Alpha Team',
-      description: 'Top-level group',
-      hasChildren: true,
-      children: [
-        { id: 'alpha-1', label: 'Alpha User 1', description: 'Owner' },
-        { id: 'alpha-2', label: 'Alpha User 2', description: 'Contributor' }
-      ]
-    },
-    {
-      id: 'beta',
-      label: 'Beta Team',
-      description: 'Top-level group',
-      hasChildren: true,
-      children: [
-        { id: 'beta-1', label: 'Beta User 1', description: 'Owner' },
-        { id: 'beta-2', label: 'Beta User 2', description: 'Contributor' }
-      ]
-    }
-  ];
-
-  let eventLog = $state('No row event yet.');
-
-  function printEvent(kind: string, row: DemoNode | null, treeData: DemoNode[]) {
-    eventLog = `${kind}: ${row?.label ?? 'null'} | tree roots: ${treeData.length}`;
-  }
-
-  const menuItems: VTreeContextMenuItem<DemoNode>[] = [
-    {
-      id: 'open',
-      label: 'Open',
-      onselect: (row) => {
-        eventLog = `menu: open -> ${row?.label ?? 'null'}`;
-      }
-    },
-    {
-      id: 'inspect',
-      label: 'Inspect Node',
-      onselect: (row, treeData) => {
-        eventLog = `menu: inspect -> ${row.id} (roots: ${treeData.length})`;
-      }
-    }
-  ];
+<script lang="ts">// @ts-nocheck
+import VTree from "./VTree.svelte";
+const data = [{
+	id: "alpha",
+	label: "Alpha Team",
+	description: "Top-level group",
+	hasChildren: true,
+	children: [{
+		id: "alpha-1",
+		label: "Alpha User 1",
+		description: "Owner"
+	}, {
+		id: "alpha-2",
+		label: "Alpha User 2",
+		description: "Contributor"
+	}]
+}, {
+	id: "beta",
+	label: "Beta Team",
+	description: "Top-level group",
+	hasChildren: true,
+	children: [{
+		id: "beta-1",
+		label: "Beta User 1",
+		description: "Owner"
+	}, {
+		id: "beta-2",
+		label: "Beta User 2",
+		description: "Contributor"
+	}]
+}];
+let eventLog = $state("No row event yet.");
+function printEvent(kind, row, treeData) {
+	eventLog = `${kind}: ${row?.label ?? "null"} | tree roots: ${treeData.length}`;
+}
+const menuItems = [{
+	id: "open",
+	label: "Open",
+	onselect: (row) => {
+		eventLog = `menu: open -> ${row?.label ?? "null"}`;
+	}
+}, {
+	id: "inspect",
+	label: "Inspect Node",
+	onselect: (row, treeData) => {
+		eventLog = `menu: inspect -> ${row.id} (roots: ${treeData.length})`;
+	}
+}];
 </script>
 
 {#snippet leftContent(args)}

package/dist/components/VTree/VTreeRow.svelte

@@ -1,68 +1,16 @@
-<script lang="ts">
-  import type { VTreeFlatRow } from './VTree.models.js';
-  import type { VTreeRecord } from './types.js';
-  import type { Snippet } from 'svelte';
-
-  export interface Props<T extends VTreeRecord = VTreeRecord> {
-    row: VTreeFlatRow<T>;
-    index: number;
-    rowHeight: number;
-    indent: number;
-    isFocused: boolean;
-    isSelected: boolean;
-    getNodeLabel: (node: T) => string;
-    getNodeDescription: (node: T) => string;
-    treeDataSnapshot: T[];
-    leftSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    rightSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    onselectrow?: (index: number, event: MouseEvent) => void;
-    onrowdoubleclick?: (index: number, event: MouseEvent) => void;
-    onrowcontext?: (index: number, event: MouseEvent) => void;
-    ontogglerow?: (node: T) => void;
-  }
-
-  const {
-    row,
-    index,
-    rowHeight,
-    indent,
-    isFocused,
-    isSelected,
-    getNodeLabel,
-    getNodeDescription,
-    treeDataSnapshot,
-    leftSection,
-    rightSection,
-    onselectrow,
-    onrowdoubleclick,
-    onrowcontext,
-    ontogglerow
-  }: Props = $props();
-
-  const rowClasses = $derived(
-    [
-      'grid grid-cols-[1fr_auto] items-center select-none border-b border-surface-200-700 hover:bg-surface-100-800',
-      isFocused ? 'bg-primary-100 dark:bg-primary-900/35' : '',
-      isSelected ? 'bg-primary-200 dark:bg-primary-900/60' : ''
-    ].join(' ')
-  );
-
-  const sectionArgs = $derived({
-    node: row.node,
-    level: row.level,
-    rowIndex: index,
-    treeData: treeDataSnapshot
-  });
+<script lang="ts">const { row, index, rowHeight, indent, isFocused, isSelected, getNodeLabel, getNodeDescription, treeDataSnapshot, leftSection, rightSection, onselectrow, onrowdoubleclick, onrowcontext, ontogglerow } = $props();
+const rowClasses = $derived([
+	"grid grid-cols-[1fr_auto] items-center select-none border-b border-surface-200-700 hover:bg-surface-100-800",
+	isFocused ? "bg-primary-100 dark:bg-primary-900/35" : "",
+	isSelected ? "bg-primary-200 dark:bg-primary-900/60" : ""
+].join(" "));
+const sectionArgs = $derived({
+	node: row.node,
+	level: row.level,
+	rowIndex: index,
+	treeData: treeDataSnapshot
+});
+export {};
 </script>
 
 <div

package/dist/components/VTree/VTreeSearch.svelte

@@ -1,16 +1,9 @@
-<script lang="ts">
-  export interface Props {
-    value: string;
-    placeholder?: string;
-    oninputvalue?: (value: string) => void;
-  }
-
-  const { value, placeholder = 'Search tree...', oninputvalue }: Props = $props();
-
-  function handleInput(event: Event) {
-    const target = event.currentTarget as HTMLInputElement;
-    oninputvalue?.(target.value);
-  }
+<script lang="ts">const { value, placeholder = "Search tree...", oninputvalue } = $props();
+function handleInput(event) {
+	const target = event.currentTarget;
+	oninputvalue?.(target.value);
+}
+export {};
 </script>
 
 <div class="flex">

package/dist/components/VTree/VTreeVirtualViewport.svelte

@@ -1,109 +1,40 @@
-<script lang="ts">
-  import { createVirtualizer, type SvelteVirtualizer } from '@tanstack/svelte-virtual';
-  import type { Snippet } from 'svelte';
-  import VTreeRow from './VTreeRow.svelte';
-  import type { VTreeFlatRow } from './VTree.models.js';
-  import type { VTreeRecord } from './types.js';
-
-  export interface Props<T extends VTreeRecord = VTreeRecord> {
-    rows: VTreeFlatRow<T>[];
-    rowHeight: number;
-    height: string | number;
-    indent: number;
-    overscan: number;
-    focusedIndex: number;
-    selectedId: string | null;
-    loadingRoot: boolean;
-    loadingMessage: string;
-    emptyMessage: string;
-    getNodeLabel: (node: T) => string;
-    getNodeDescription: (node: T) => string;
-    treeDataSnapshot: T[];
-    leftSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    rightSection?: Snippet<[{
-      node: T;
-      level: number;
-      rowIndex: number;
-      treeData: T[];
-    }]>;
-    onselectrow?: (index: number, event: MouseEvent) => void;
-    onrowdoubleclick?: (index: number, event: MouseEvent) => void;
-    onrowcontext?: (index: number, event: MouseEvent) => void;
-    onviewportcontext?: (event: MouseEvent) => void;
-    ontogglerow?: (node: T) => void;
-    ontreekeydown?: (event: KeyboardEvent) => void;
-  }
-
-  const {
-    rows,
-    rowHeight,
-    height,
-    indent,
-    overscan,
-    focusedIndex,
-    selectedId,
-    loadingRoot,
-    loadingMessage,
-    emptyMessage,
-    getNodeLabel,
-    getNodeDescription,
-    treeDataSnapshot,
-    leftSection,
-    rightSection,
-    onselectrow,
-    onrowdoubleclick,
-    onrowcontext,
-    onviewportcontext,
-    ontogglerow,
-    ontreekeydown
-  }: Props = $props();
-
-  let viewportRef = $state<HTMLDivElement | null>(null);
-  let virtualizerInstance = $state<SvelteVirtualizer<HTMLDivElement, HTMLDivElement> | null>(null);
-
-  function toCssSize(value: string | number): string {
-    return typeof value === 'number' ? `${value}px` : value;
-  }
-
-  export function scrollToIndex(index: number) {
-    virtualizerInstance?.scrollToIndex(index, { align: 'auto' });
-  }
-
-  $effect(() => {
-    if (!viewportRef) {
-      virtualizerInstance = null;
-      return;
-    }
-
-    const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
-      count: rows.length,
-      estimateSize: () => rowHeight,
-      overscan,
-      getScrollElement: () => viewportRef
-    });
-
-    return virtualizer.subscribe((instance) => {
-      virtualizerInstance = instance;
-    });
-  });
-
-  $effect(() => {
-    if (!virtualizerInstance || !viewportRef) return;
-    virtualizerInstance.setOptions({
-      count: rows.length,
-      estimateSize: () => rowHeight,
-      overscan,
-      getScrollElement: () => viewportRef
-    });
-  });
-
-  const virtualItems = $derived(virtualizerInstance?.getVirtualItems() ?? []);
-  const totalSize = $derived(virtualizerInstance?.getTotalSize() ?? 0);
+<script lang="ts">import { createVirtualizer } from "@tanstack/svelte-virtual";
+import VTreeRow from "./VTreeRow.svelte";
+const { rows, rowHeight, height, indent, overscan, focusedIndex, selectedId, loadingRoot, loadingMessage, emptyMessage, getNodeLabel, getNodeDescription, treeDataSnapshot, leftSection, rightSection, onselectrow, onrowdoubleclick, onrowcontext, onviewportcontext, ontogglerow, ontreekeydown } = $props();
+let viewportRef = $state(null);
+let virtualizerInstance = $state(null);
+function toCssSize(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+export function scrollToIndex(index) {
+	virtualizerInstance?.scrollToIndex(index, { align: "auto" });
+}
+$effect(() => {
+	if (!viewportRef) {
+		virtualizerInstance = null;
+		return;
+	}
+	const virtualizer = createVirtualizer({
+		count: rows.length,
+		estimateSize: () => rowHeight,
+		overscan,
+		getScrollElement: () => viewportRef
+	});
+	return virtualizer.subscribe((instance) => {
+		virtualizerInstance = instance;
+	});
+});
+$effect(() => {
+	if (!virtualizerInstance || !viewportRef) return;
+	virtualizerInstance.setOptions({
+		count: rows.length,
+		estimateSize: () => rowHeight,
+		overscan,
+		getScrollElement: () => viewportRef
+	});
+});
+const virtualItems = $derived(virtualizerInstance?.getVirtualItems() ?? []);
+const totalSize = $derived(virtualizerInstance?.getTotalSize() ?? 0);
 </script>
 
 <div

package/dist/components/index.d.ts

@@ -13,4 +13,5 @@ export * from "./GlobalStateStore/index";
 export * from "./Screenshot/index";
 export * from "./VTree/index";
 export * from "./ContentEditor/index";
+export * from "./CardGrid/index";
 export type * from "./Types/index";

package/dist/components/index.js

@@ -14,3 +14,4 @@ export * from "./GlobalStateStore/index";
 export * from "./Screenshot/index";
 export * from "./VTree/index";
 export * from "./ContentEditor/index";
+export * from "./CardGrid/index";