@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/container/container.svelte

@@ -8,12 +8,6 @@
 		name = undefined,
 		clientWidth = $bindable(0),
 		clientHeight = $bindable(0),
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		children = undefined,
 		...restProps
 	}: ContainerProps = $props();
@@ -44,12 +38,6 @@
 	preset="container"
 	class={['border-border', '$preset', klass]}
 	style={[containerTypeStype, containerNameStyle].filter(Boolean).join('; ')}
-	onmount={onmount?.bind(null)}
-	ondestroy={ondestroy?.bind(null)}
-	animate={animate?.bind(null)}
-	enter={enter?.bind(null)}
-	exit={exit?.bind(null)}
-	initial={initial?.bind(null)}
 	{...restProps}
 >
 	{@render children?.({ clientWidth, clientHeight })}

package/dist/components/container/index.d.ts

@@ -1 +1,2 @@
 export { default as Container } from './container.svelte';
+export type { ContainerSnippetProps, ContainerChildren } from './types';

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

@@ -1,19 +1,13 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps } from '../atom';
-/**
- * Extend this interface to add custom container properties in your application.
- */
-export interface ContainerExtendProps {
+import type { HtmlAtomProps, SnippetProps } from '../atom';
+export interface ContainerSnippetProps extends SnippetProps {
+    clientWidth: number;
+    clientHeight: number;
 }
-export interface ContainerProps extends Omit<HtmlAtomProps<'button'>, 'children'>, ContainerExtendProps {
+export type ContainerChildren = Snippet<[ContainerSnippetProps]>;
+export interface ContainerProps extends HtmlAtomProps<'button', never, ContainerChildren> {
     type?: 'inline-size' | 'size';
     name?: string;
     clientWidth?: number;
     clientHeight?: number;
-    children?: Snippet<[
-        {
-            clientWidth: number;
-            clientHeight: number;
-        }
-    ]>;
 }

package/dist/components/context-menu/atoms.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from './context-menu-root.svelte';
+export { default as Trigger } from './context-menu-trigger.svelte';
+export { default as Content } from './context-menu-content.svelte';
+export { Arrow, Divider, Group, Indicator, Item, Title } from '../dropdown-menu/atoms';

package/dist/components/context-menu/atoms.js

@@ -0,0 +1,4 @@
+export { default as Root } from './context-menu-root.svelte';
+export { default as Trigger } from './context-menu-trigger.svelte';
+export { default as Content } from './context-menu-content.svelte';
+export { Arrow, Divider, Group, Indicator, Item, Title } from '../dropdown-menu/atoms';

package/dist/components/context-menu/context-menu-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" generics="E extends HtmlElementTagName, B extends Base = Base">
+	import { clickout } from '../../attachments';
+	import type { Base } from '../atom';
+	import type { HtmlElementTagName } from '../element';
+	import { PopoverBond, type PopoverContentProps } from '../popover';
+	import { Content } from '../dropdown-menu/atoms';
+
+    const bond = PopoverBond.get();
+
+    if (!bond) {
+        throw new Error('<ContextMenu.Content /> must be used within a <ContextMenu.Root />');
+    }
+
+	let { onclickoutside, ...restProps }: PopoverContentProps<E, B> = $props();
+
+	function onclickoutHandler(ev: PointerEvent, bond: PopoverBond) {
+		const trigger = bond.element<Element>('trigger');
+
+		// button is right button do not close the popover
+		if (
+			trigger &&
+			(trigger.contains(ev.target as Node) || trigger === ev.target) &&
+			ev.button === 2
+		) {
+			return;
+		}
+
+		bond.state.close();
+	}
+
+	function contextMenuOutAttachement(node: HTMLElement) {
+		const cleanup = clickout(
+			(ev) => {
+				if (onclickoutside) {
+					onclickoutside(ev, bond);
+					return;
+				}
+
+				onclickoutHandler(ev, bond);
+			},
+			{ type: 'pointerdown' }
+		)(node);
+
+		return cleanup;
+	}
+</script>
+
+<Content
+	{@attach contextMenuOutAttachement}
+	onclickoutside={onclickoutside ?? onclickoutHandler}
+	{...restProps}
+/>

package/dist/components/context-menu/context-menu-content.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Base } from '../atom';
+import type { HtmlElementTagName } from '../element';
+import { type PopoverContentProps } from '../popover';
+declare function $$render<E extends HtmlElementTagName, B extends Base = Base>(): {
+    props: PopoverContentProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends HtmlElementTagName, B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends HtmlElementTagName, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends HtmlElementTagName, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ContextMenuContent: $$IsomorphicComponent;
+type ContextMenuContent<E extends HtmlElementTagName, B extends Base = Base> = InstanceType<typeof ContextMenuContent<E, B>>;
+export default ContextMenuContent;

package/dist/components/context-menu/context-menu-root.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import {Root} from '../dropdown-menu/atoms'
+	import type { PopoverRootProps } from '../popover';
+
+    let {placement = 'bottom-start', ...restProps}: PopoverRootProps = $props();
+</script>
+
+<Root {placement} {...restProps} />

package/dist/components/context-menu/context-menu-root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverRootProps } from '../popover';
+declare const ContextMenuRoot: import("svelte").Component<PopoverRootProps, {}, "">;
+type ContextMenuRoot = ReturnType<typeof ContextMenuRoot>;
+export default ContextMenuRoot;

package/dist/components/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Base } from '../atom';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Trigger } from '../popover/atoms';
+	import { DropdownMenuBond } from '../dropdown-menu/bond.svelte';
+	import type { ContextMenuTriggerProps } from './types';
+	import type { BondVirtualElement } from '../../shared/bond.svelte';
+
+	type ElementType = HTMLElementTagNameMap[E];
+
+	const bond = DropdownMenuBond.get();
+
+	if (!bond) {
+		throw new Error('<ContextMenu.Trigger /> must be used within a <ContextMenu.Root />');
+	}
+
+	const dropdownMenuBond = bond;
+
+	const virtualTriggerAtom = dropdownMenuBond.virtualTrigger();
+
+	let {
+		preset = 'context-menu.trigger',
+		onclick = null,
+		oncontextmenu = undefined,
+		class: klass = '',
+		...restProps
+	}: HTMLAttributes<ElementType> & ContextMenuTriggerProps<E, B> = $props();
+
+	function handleContextMenu(ev: MouseEvent) {
+		ev.preventDefault();
+
+		const event = new MouseEvent('contextmenu', ev) as MouseEvent & {
+			currentTarget: MouseEvent & ElementType;
+		};
+		oncontextmenu?.(event);
+
+		if (event.defaultPrevented) return;
+
+		const virtualElement = {
+			getBoundingClientRect: () => ({
+				width: 0,
+				height: 0,
+				x: ev.clientX,
+				y: ev.clientY,
+				top: ev.clientY,
+				left: ev.clientX,
+				right: ev.clientX,
+				bottom: ev.clientY
+			} as DOMRect),
+			contains: () => false
+		} as BondVirtualElement;
+
+		virtualTriggerAtom.element = virtualElement;
+
+		dropdownMenuBond.state.open();
+	}
+</script>
+
+<Trigger {preset} class={['cursor-context-menu', klass]} onclick={onclick ?? undefined} oncontextmenu={handleContextMenu} {...restProps} />

package/dist/components/context-menu/context-menu-trigger.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Base } from '../atom';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ContextMenuTriggerProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: HTMLAttributes<HTMLElementTagNameMap[E]> & ContextMenuTriggerProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ContextMenuTrigger: $$IsomorphicComponent;
+type ContextMenuTrigger<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof ContextMenuTrigger<E, B>>;
+export default ContextMenuTrigger;

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * as ContextMenu from './atoms';
+export * from './types';

package/dist/components/context-menu/index.js

@@ -0,0 +1,2 @@
+export * as ContextMenu from './atoms';
+export * from './types';

package/dist/components/{contextmenu → context-menu}/types.d.ts

@@ -1,8 +1,3 @@
 import type { HtmlAtomProps, Base } from '../atom';
-/**
- * Extend this interface to add custom contextmenu properties in your application.
- */
-export interface ContextMenuExtendProps {
-}
-export interface ContextMenuTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, ContextMenuExtendProps {
+export interface ContextMenuTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
 }

package/dist/components/datagrid/atoms.d.ts

@@ -1,8 +1,14 @@
 export { default as Body } from './datagrid-body.svelte';
 export { default as Checkbox } from './datagrid-checkbox.svelte';
-export { default as Footer } from './datagrid-footer.svelte';
-export { default as Header } from './datagrid-header.svelte';
 export { default as Root } from './datagrid-root.svelte';
-export { Tr } from './tr';
-export { Th } from './th';
-export { Td } from './td';
+/** @deprecated Use `Row` instead */
+export { Tr } from './row';
+/** @deprecated Use `Column` instead */
+export { Th } from './column';
+/** @deprecated Use `Cell` instead */
+export { Td } from './cell';
+export { default as Header } from './datagrid-header.svelte';
+export { default as Footer } from './datagrid-footer.svelte';
+export { Row } from './row';
+export { Column } from './column';
+export { Cell } from './cell';

package/dist/components/datagrid/atoms.js

@@ -1,8 +1,14 @@
 export { default as Body } from './datagrid-body.svelte';
 export { default as Checkbox } from './datagrid-checkbox.svelte';
-export { default as Footer } from './datagrid-footer.svelte';
-export { default as Header } from './datagrid-header.svelte';
 export { default as Root } from './datagrid-root.svelte';
-export { Tr } from './tr';
-export { Th } from './th';
-export { Td } from './td';
+/** @deprecated Use `Row` instead */
+export { Tr } from './row';
+/** @deprecated Use `Column` instead */
+export { Th } from './column';
+/** @deprecated Use `Cell` instead */
+export { Td } from './cell';
+export { default as Header } from './datagrid-header.svelte';
+export { default as Footer } from './datagrid-footer.svelte';
+export { Row } from './row';
+export { Column } from './column';
+export { Cell } from './cell';

package/dist/components/datagrid/bond.svelte.d.ts

@@ -1,6 +1,6 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
-import type { DataGridTrBond } from './tr/bond.svelte';
-import type { DataGridThBond } from './th/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
+import type { DataGridRowBond } from './row/bond.svelte';
+import type { DataGridColumnBond } from './column/bond.svelte';
 export type DataGridStateProps<T> = BondStateProps & {
     multiple?: boolean;
     template?: string;
@@ -13,27 +13,42 @@ export type DataGridElements = {
     body: HTMLElement;
     footer: HTMLElement;
 };
+declare class DataGridRootAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
+declare class DataGridHeaderAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
+declare class DataGridBodyAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
+declare class DataGridFooterAtom<T = unknown> extends BondAtom<DataGridBond<T>, HTMLElement> {
+    constructor(bond: DataGridBond<T>);
+}
 export declare class DataGridBond<T = unknown> extends Bond<DataGridStateProps<T>, DataGridBondState<T>, DataGridElements> {
     static CONTEXT_KEY: string;
     constructor(s: DataGridBondState<T>);
     get id(): string;
     share(): this;
-    static get(): DataGridBond | undefined;
-    static set(bond: DataGridBond): DataGridBond;
+    root(): DataGridRootAtom<T>;
+    header(): DataGridHeaderAtom<T>;
+    body(): DataGridBodyAtom<T>;
+    footer(): DataGridFooterAtom<T>;
+    static get<T = unknown>(): DataGridBond<T> | undefined;
+    static set<T = unknown>(bond: DataGridBond<T>): DataGridBond<T>;
 }
 export declare class DataGridBondState<T> extends BondState<DataGridStateProps<T>> {
     #private;
     constructor(props: () => DataGridStateProps<T>);
     get id(): string;
-    get rows(): Map<string, DataGridTrBond<T, import("./tr").DataGridTrBondProps<T>, import("./tr").DataGridTrBondState<T, import("./tr").DataGridTrBondProps<T>>, import("./tr").DataGridTrBondElements>>;
-    get columns(): Map<string, DataGridThBond<T>>;
-    get selectedRows(): DataGridTrBond<T, import("./tr").DataGridTrBondProps<T>, import("./tr").DataGridTrBondState<T, import("./tr").DataGridTrBondProps<T>>, import("./tr").DataGridTrBondElements>[];
-    get sortableColumns(): any;
-    get template(): any;
-    mountColumn(id: string, item: DataGridThBond<T>): () => void;
-    unmountColumn(id: string): void;
-    mountRow(id: string, item: DataGridTrBond<T>): () => void;
-    unmountRow(id: string): void;
+    get rows(): ReadonlyMap<string, DataGridRowBond<T>>;
+    get columns(): ReadonlyMap<string, DataGridColumnBond<T>>;
+    get selectedRows(): readonly DataGridRowBond<T>[];
+    get sortableColumns(): readonly DataGridColumnBond<T>[];
+    get template(): string;
+    mountColumn(id: string, item: DataGridColumnBond<T>): () => void;
+    mountRow(id: string, item: DataGridRowBond<T>): () => void;
     select(ids: string[]): void;
     unselect(ids: string[]): void;
 }
+export {};

package/dist/components/datagrid/bond.svelte.js

@@ -1,11 +1,31 @@
 import { SvelteMap } from 'svelte/reactivity';
 import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
 import { nanoid } from 'nanoid';
+class DataGridRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+}
+class DataGridHeaderAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'header');
+    }
+}
+class DataGridBodyAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'body');
+    }
+}
+class DataGridFooterAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'footer');
+    }
+}
 export class DataGridBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/datagrid';
     constructor(s) {
-        super(s);
+        super(s, 'datagrid');
     }
     get id() {
         return this.state.id;
@@ -13,6 +33,18 @@ export class DataGridBond extends Bond {
     share() {
         return DataGridBond.set(this);
     }
+    root() {
+        return this.atom('root', () => new DataGridRootAtom(this));
+    }
+    header() {
+        return this.atom('header', () => new DataGridHeaderAtom(this));
+    }
+    body() {
+        return this.atom('body', () => new DataGridBodyAtom(this));
+    }
+    footer() {
+        return this.atom('footer', () => new DataGridFooterAtom(this));
+    }
     static get() {
         return getContext(DataGridBond.CONTEXT_KEY);
     }
@@ -24,10 +56,12 @@ export class DataGridBondState extends BondState {
     #id = nanoid();
     #rows = new SvelteMap();
     #columns = new SvelteMap();
-    #sortableColumns = $derived(this.#columns.values().filter((d) => d.state.props.sortable));
     #selectedRows = $derived((this.props.values ?? [])
         .map((value) => this.#rows.get(value))
-        .filter(Boolean));
+        .filter((r) => r !== undefined));
+    #sortableColumns = $derived([...this.#columns.values()].filter((col) => col.state.props.sortable));
+    #template = $derived(this.props.template ||
+        [...this.#columns.values()].map((col) => col.state.props.width ?? '1fr').join(' '));
     constructor(props) {
         super(props);
     }
@@ -35,10 +69,10 @@ export class DataGridBondState extends BondState {
         return this.#id;
     }
     get rows() {
-        return new Map(this.#rows);
+        return this.#rows;
     }
     get columns() {
-        return new Map(this.#columns);
+        return this.#columns;
     }
     get selectedRows() {
         return this.#selectedRows;
@@ -47,42 +81,20 @@ export class DataGridBondState extends BondState {
         return this.#sortableColumns;
     }
     get template() {
-        return (this.props.template ||
-            this.#columns
-                .values()
-                .map((col) => col.state.props.width)
-                .toArray()
-                .join(' '));
+        return this.#template;
     }
     mountColumn(id, item) {
         this.#columns.set(id, item);
-        return () => this.unmountColumn(id);
-    }
-    unmountColumn(id) {
-        this.#columns.delete(id);
+        return () => this.#columns.delete(id);
     }
     mountRow(id, item) {
-        if (this.#rows.size && !this.props.value) {
-            this.props.value = item.state.props.value;
-        }
         this.#rows.set(id, item);
-        return () => this.unmountRow(id);
-    }
-    unmountRow(id) {
-        this.#rows.delete(id);
+        return () => this.#rows.delete(id);
     }
     select(ids) {
-        const sequence = new Set(this.props.values ?? []);
-        for (const id of ids) {
-            sequence.add(id);
-        }
-        this.props.values = sequence.values().toArray();
+        this.props.values = [...(this.props.values ?? []), ...ids].filter((value, index, array) => array.indexOf(value) === index);
     }
     unselect(ids) {
-        const sequence = new Set(this.props.values ?? []);
-        for (const id of ids) {
-            sequence.delete(id);
-        }
-        this.props.values = sequence.values().toArray();
+        this.props.values = (this.props.values ?? []).filter((value) => !ids.includes(value));
     }
 }

package/dist/components/datagrid/cell/bond.svelte.d.ts

@@ -0,0 +1,29 @@
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
+export type DataGridCellBondProps<T = unknown> = BondStateProps & {
+    data?: T;
+};
+export type DataGridCellElements = {
+    root: HTMLElement;
+};
+export declare class DataGridCellRootAtom<T = unknown> extends BondAtom<DataGridCellBond<T>> {
+    constructor(bond: DataGridCellBond<T>);
+    get attrs(): {
+        'data-kind': string;
+    };
+}
+export declare class DataGridCellBond<T = unknown> extends Bond<DataGridCellBondProps<T>, DataGridCellBondState<T>, DataGridCellElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: DataGridCellBondState<T>);
+    share(): this;
+    root(): DataGridCellRootAtom<T>;
+    static get<T = unknown>(): DataGridCellBond<T> | undefined;
+    static set<T = unknown>(bond: DataGridCellBond<T>): DataGridCellBond<T>;
+}
+export declare class DataGridCellBondState<T = unknown> extends BondState<DataGridCellBondProps<T>> {
+    #private;
+    constructor(props: () => DataGridCellBondProps<T>);
+    get datagrid(): import("..").DataGridBondState<T> | undefined;
+}
+export type DataGridTdBondProps<T = unknown> = DataGridCellBondProps<T>;
+export type DataGridTdElements = DataGridCellElements;
+export { DataGridCellBond as DataGridTdBond, DataGridCellBondState as DataGridTdBondState };

package/dist/components/datagrid/cell/bond.svelte.js

@@ -0,0 +1,42 @@
+import { getContext, setContext } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+import { DataGridBond } from '../bond.svelte';
+export class DataGridCellRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        return {
+            ...super.attrs,
+            'data-kind': 'datagrid-cell'
+        };
+    }
+}
+export class DataGridCellBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/datagrid/cell';
+    constructor(s) {
+        super(s, 'datagrid-cell');
+    }
+    share() {
+        return DataGridCellBond.set(this);
+    }
+    root() {
+        return this.atom('root', () => new DataGridCellRootAtom(this));
+    }
+    static get() {
+        return getContext(DataGridCellBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(DataGridCellBond.CONTEXT_KEY, bond);
+    }
+}
+export class DataGridCellBondState extends BondState {
+    #datagrid = DataGridBond.get();
+    constructor(props) {
+        super(props);
+    }
+    get datagrid() {
+        return this.#datagrid?.state;
+    }
+}
+export { DataGridCellBond as DataGridTdBond, DataGridCellBondState as DataGridTdBondState };

package/dist/components/datagrid/cell/datagrid-cell.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { DataGridBond } from '../bond.svelte';
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { DatagridCellProps } from '../types';
+
+	const bond = DataGridBond.get<T>();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onclick = undefined,
+		...restProps
+	}: DatagridCellProps<T, E, B> = $props();
+
+	let element = $state<HTMLElement | undefined>();
+
+	// Find the matching column by this cell's DOM index
+	const column = $derived.by(() => {
+		if (!element || !bond) return undefined;
+
+		const index = Array.from(element.parentElement?.children ?? []).indexOf(element);
+		if (index === -1) return undefined;
+
+		for (const col of bond.state.columns.values()) {
+			if (col.index === index) return col;
+		}
+
+		return undefined;
+	});
+
+	const isHidden = $derived(column?.state.props.hidden ?? false);
+
+	function handleClick(ev: Event) {
+		onclick?.(ev, { ...(bond && { cell: bond }) });
+	}
+</script>
+
+{#if !isHidden}
+	<HtmlAtom
+		{@attach (node) => { element = node; }}
+		{bond}
+		preset="datagrid.cell"
+		class={['border-border flex h-full items-center py-2 text-left', '$preset', klass]}
+		onclick={handleClick}
+		{...restProps}
+	>
+		{@render children?.({ datagrid: bond })}
+	</HtmlAtom>
+{/if}

package/dist/components/datagrid/cell/datagrid-cell.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Base } from '../../atom';
+import type { DatagridCellProps } from '../types';
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridCellProps<T, E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const DatagridCell: $$IsomorphicComponent;
+type DatagridCell<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridCell<T, E, B>>;
+export default DatagridCell;