@r2digisolutions/components 0.1.6 → 0.1.7

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplateStory.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import ResourceStudioTemplate from './ResourceStudioTemplate.svelte';
+	import type { ResourceDefinition } from '../../organisms/ResourceStudio/types.js';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import CodeEditor from '../../molecules/CodeEditor/CodeEditor.svelte';
+
+	type Example = 'crud' | 'sql' | 'mainOnly';
+
+	let { example = 'crud' }: { example?: Example } = $props();
+
+	const resources = $derived.by((): ResourceDefinition[] => {
+		const sql = example === 'sql';
+		return [
+			{
+				id: 'users',
+				name: sql ? 'users' : 'Users',
+				group: sql ? 'public' : 'Auth',
+				recordCount: 3,
+				fields: [
+					{ id: 'id', label: 'ID', type: 'string', readonly: true },
+					{ id: 'name', label: 'Name', type: 'string', required: true },
+					{ id: 'email', label: 'Email', type: 'string', required: true },
+					{
+						id: 'role',
+						label: 'Role',
+						type: 'enum',
+						options: [
+							{ value: 'admin', label: 'Admin' },
+							{ value: 'editor', label: 'Editor' }
+						]
+					}
+				]
+			},
+			{
+				id: 'orders',
+				name: sql ? 'orders' : 'Orders',
+				group: sql ? 'public' : 'Commerce',
+				recordCount: 3,
+				fields: [
+					{ id: 'id', label: 'ID', type: 'string', readonly: true },
+					{
+						id: 'status',
+						label: 'Status',
+						type: 'enum',
+						options: [
+							{ value: 'paid', label: 'Paid' },
+							{ value: 'pending', label: 'Pending' }
+						]
+					},
+					{ id: 'total', label: 'Total', type: 'number' }
+				]
+			}
+		];
+	});
+
+	let activeResourceId = $state('users');
+	let records = $state<Record<string, unknown>[]>([
+		{ id: '1', name: 'Ana', email: 'ana@r2.dev', role: 'admin' },
+		{ id: '2', name: 'Carlos', email: 'carlos@r2.dev', role: 'editor' },
+		{ id: '3', name: 'Maya', email: 'maya@r2.dev', role: 'editor' }
+	]);
+	let orderRecords = $state<Record<string, unknown>[]>([
+		{ id: 'o1', status: 'paid', total: 120 },
+		{ id: 'o2', status: 'pending', total: 80 },
+		{ id: 'o3', status: 'paid', total: 440 }
+	]);
+	let sqlText = $state('select * from users;');
+
+	$effect(() => {
+		// Only seed when the Storybook example changes.
+		activeResourceId = example === 'mainOnly' ? 'orders' : 'users';
+	});
+
+	const activeRecords = $derived(
+		activeResourceId === 'orders' ? orderRecords : records
+	);
+</script>
+
+<ResourceStudioTemplate
+	title={example === 'sql' ? 'Database Studio' : 'Admin'}
+	description={example === 'sql'
+		? 'Drizzle-like browse UI built on ResourceStudio.'
+		: 'Full-page CRUD shell for your collections.'}
+	{resources}
+	bind:activeResourceId
+	records={activeRecords}
+	totalRecords={activeRecords.length}
+	layout={example === 'mainOnly' ? 'main-only' : 'sidebar-main-detail'}
+	modes={example === 'sql' ? ['browse', 'schema', 'query', 'detail'] : ['browse', 'detail', 'schema']}
+	labels={example === 'sql'
+		? { resources: 'Tables', records: 'rows', addRecord: 'Insert row', query: 'SQL' }
+		: undefined}
+	oninsert={(row) => {
+		if (activeResourceId === 'orders') orderRecords = [row, ...orderRecords];
+		else records = [row, ...records];
+	}}
+	onupdate={(id, patch) => {
+		const apply = (list: Record<string, unknown>[]) =>
+			list.map((r) => (String(r.id) === id ? { ...r, ...patch } : r));
+		if (activeResourceId === 'orders') orderRecords = apply(orderRecords);
+		else records = apply(records);
+	}}
+	ondelete={(ids) => {
+		const filter = (list: Record<string, unknown>[]) =>
+			list.filter((r) => !ids.includes(String(r.id)));
+		if (activeResourceId === 'orders') orderRecords = filter(orderRecords);
+		else records = filter(records);
+	}}
+>
+	{#snippet headerActions()}
+		<Button size="sm" variant="secondary">Docs</Button>
+	{/snippet}
+
+	{#snippet queryPanel()}
+		<div class="space-y-2">
+			<CodeEditor bind:value={sqlText} class="min-h-28" />
+			<Button size="sm" variant="primary">Run SQL</Button>
+		</div>
+	{/snippet}
+
+	{#snippet cell(row, column)}
+		{#if column.id === 'status' || column.id === 'role'}
+			<Badge variant="secondary">{String(row[column.id] ?? '')}</Badge>
+		{:else}
+			{row[column.id] == null ? '' : String(row[column.id])}
+		{/if}
+	{/snippet}
+</ResourceStudioTemplate>

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplateStory.svelte.d.ts

@@ -0,0 +1,7 @@
+type Example = 'crud' | 'sql' | 'mainOnly';
+type $$ComponentProps = {
+    example?: Example;
+};
+declare const ResourceStudioTemplateStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResourceStudioTemplateStory = ReturnType<typeof ResourceStudioTemplateStory>;
+export default ResourceStudioTemplateStory;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { default as Avatar } from './components/atoms/Avatar/Avatar.svelte';
 export { default as Spinner } from './components/atoms/Spinner/Spinner.svelte';
 export { default as Toggle } from './components/atoms/Toggle/Toggle.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox/Checkbox.svelte';
+export { default as MarqueeRect } from './components/atoms/MarqueeRect/MarqueeRect.svelte';
 export { default as Chip } from './components/atoms/Chip/Chip.svelte';
 export { default as Tooltip } from './components/atoms/Tooltip/Tooltip.svelte';
 export { default as Divider } from './components/atoms/Divider/Divider.svelte';
@@ -433,6 +434,7 @@ export { default as CreditCardInput } from './components/molecules/CreditCardInp
 export type { CardBrand } from './components/molecules/CreditCardInput/CreditCardInput.svelte';
 export { default as BulkActionBar } from './components/molecules/BulkActionBar/BulkActionBar.svelte';
 export type { BulkAction, BulkActionVariant, BulkActionBarPlacement, BulkActionBarSize, BulkActionBarTone } from './components/molecules/BulkActionBar/BulkActionBar.svelte';
+export { default as ConditionalFormatPanel } from './components/molecules/ConditionalFormatPanel/ConditionalFormatPanel.svelte';
 export { default as ReactionBar } from './components/molecules/ReactionBar/ReactionBar.svelte';
 export type { ReactionItem } from './components/molecules/ReactionBar/ReactionBar.svelte';
 export { default as AddressFields } from './components/molecules/AddressFields/AddressFields.svelte';
@@ -577,6 +579,12 @@ export type { SheetSize, SheetAccent } from './components/organisms/Sheet/Sheet.
 export { SHEET_SIZE_SNAPS } from './components/organisms/Sheet/Sheet.svelte';
 export { default as DataTable } from './components/organisms/DataTable/DataTable.svelte';
 export type { DataTableColumn } from './components/organisms/DataTable/DataTable.svelte';
+export { default as DataGrid } from './components/organisms/DataGrid/DataGrid.svelte';
+export type { DataGridColumn, DataGridEditType, DataGridEditConfig, DataGridEditOption, DataGridViewMode, DataGridFilter, Breakpoint, CellRef, GridSelection, CellNote, GridMark, MarkColor, MarkPreset, ConditionalFormatRule, ConditionalFormatStyle, FormatCondition, FormatTarget, SortDir } from './components/organisms/DataGrid/DataGrid.svelte';
+export { EMPTY_SELECTION, noteKey, markKey, selectionCount, selectionLabel, evaluateFormatRules, evaluateCondition, styleToCss, inferCellEditor, resolveCellEditor, coerceEditValue, draftFromValue, MARK_COLORS, MARK_TINT, MARK_SWATCH, markTint, markSwatch, isMarkPreset, BREAKPOINT_MIN, matchesMinBreakpoint, isColumnVisibleAtWidth, filterRows, cellText, uniqueColumnValues } from './components/organisms/DataGrid/DataGrid.svelte';
+export { default as ResourceStudio } from './components/organisms/ResourceStudio/ResourceStudio.svelte';
+export type { FieldType, ResourceField, ResourceCapabilities, ResourceDefinition, ResourceStudioMode, ResourceStudioLayout, ResourceStudioLabels, ResourceStudioView } from './components/organisms/ResourceStudio/ResourceStudio.svelte';
+export { DEFAULT_CAPABILITIES, resolveCapabilities, fieldsToColumns, fieldsToSchema } from './components/organisms/ResourceStudio/ResourceStudio.svelte';
 export { default as GanttChart } from './components/organisms/GanttChart/GanttChart.svelte';
 export type { GanttTask } from './components/organisms/GanttChart/GanttChart.svelte';
 export { default as ToastContainer } from './components/organisms/Toast/ToastContainer.svelte';
@@ -731,6 +739,7 @@ export { default as DashboardTemplate } from './components/templates/DashboardTe
 export type { DashboardTemplateDensity } from './components/templates/DashboardTemplate/DashboardTemplate.svelte';
 export { default as MarketingTemplate } from './components/templates/MarketingTemplate/MarketingTemplate.svelte';
 export { default as ListingTemplate } from './components/templates/ListingTemplate/ListingTemplate.svelte';
+export { default as ResourceStudioTemplate } from './components/templates/ResourceStudioTemplate/ResourceStudioTemplate.svelte';
 export { default as CheckoutTemplate } from './components/templates/CheckoutTemplate/CheckoutTemplate.svelte';
 export type { CheckoutLine, CheckoutStep, CheckoutShippingOption } from './components/templates/CheckoutTemplate/CheckoutTemplate.svelte';
 export { default as DesktopTemplate } from './components/templates/DesktopTemplate/DesktopTemplate.svelte';
@@ -741,6 +750,8 @@ export type { VisibilityState } from './utils/pageVisibility.svelte.js';
 export { network } from './utils/network.svelte.js';
 export { DEFAULT_COLS, DEFAULT_ROW_HEIGHT, DEFAULT_GAP, GRID_DENSITY, clampItem, rectsOverlap, findCollisions, resolveCollisions, compactLayout, updateItem, addItem, removeItem, serializeLayout, parseLayout, layoutBounds, rescaleLayout, resizeItemByEdge } from './utils/layoutGrid.js';
 export type { GridItem, LayoutGridOptions, GridDensity, GridResizeEdge } from './utils/layoutGrid.js';
+export { attachMarqueeSelect, collectMarqueeItems, defaultMarqueeIgnore, getMarqueeModifier, hitTestIds, normalizeRect, rectsIntersect, resolveMarqueeSelection } from './utils/marqueeSelect.js';
+export type { AttachMarqueeSelectOptions, MarqueeDragState, MarqueeItemRect, MarqueeModifier, MarqueeRect as MarqueeRectBox } from './utils/marqueeSelect.js';
 export { encodeQR, qrToSvgPath, punchLogoHole } from './utils/qr.js';
 export { renderMarkdown, renderInline, escapeHtml, splitTableRow, slugifyHeading } from './utils/markdown.js';
 export { diffLines, diffWords, diffStats, toSplitRows } from './utils/diff.js';

package/dist/index.js

@@ -14,6 +14,7 @@ export { default as Avatar } from './components/atoms/Avatar/Avatar.svelte';
 export { default as Spinner } from './components/atoms/Spinner/Spinner.svelte';
 export { default as Toggle } from './components/atoms/Toggle/Toggle.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox/Checkbox.svelte';
+export { default as MarqueeRect } from './components/atoms/MarqueeRect/MarqueeRect.svelte';
 export { default as Chip } from './components/atoms/Chip/Chip.svelte';
 export { default as Tooltip } from './components/atoms/Tooltip/Tooltip.svelte';
 export { default as Divider } from './components/atoms/Divider/Divider.svelte';
@@ -309,6 +310,7 @@ export { default as RadarChart } from './components/molecules/RadarChart/RadarCh
 export { default as InputGroup } from './components/molecules/InputGroup/InputGroup.svelte';
 export { default as CreditCardInput } from './components/molecules/CreditCardInput/CreditCardInput.svelte';
 export { default as BulkActionBar } from './components/molecules/BulkActionBar/BulkActionBar.svelte';
+export { default as ConditionalFormatPanel } from './components/molecules/ConditionalFormatPanel/ConditionalFormatPanel.svelte';
 export { default as ReactionBar } from './components/molecules/ReactionBar/ReactionBar.svelte';
 export { default as AddressFields } from './components/molecules/AddressFields/AddressFields.svelte';
 export { default as RichTextEditor } from './components/molecules/RichTextEditor/RichTextEditor.svelte';
@@ -397,6 +399,10 @@ export { default as Drawer } from './components/organisms/Drawer/Drawer.svelte';
 export { default as Sheet } from './components/organisms/Sheet/Sheet.svelte';
 export { SHEET_SIZE_SNAPS } from './components/organisms/Sheet/Sheet.svelte';
 export { default as DataTable } from './components/organisms/DataTable/DataTable.svelte';
+export { default as DataGrid } from './components/organisms/DataGrid/DataGrid.svelte';
+export { EMPTY_SELECTION, noteKey, markKey, selectionCount, selectionLabel, evaluateFormatRules, evaluateCondition, styleToCss, inferCellEditor, resolveCellEditor, coerceEditValue, draftFromValue, MARK_COLORS, MARK_TINT, MARK_SWATCH, markTint, markSwatch, isMarkPreset, BREAKPOINT_MIN, matchesMinBreakpoint, isColumnVisibleAtWidth, filterRows, cellText, uniqueColumnValues } from './components/organisms/DataGrid/DataGrid.svelte';
+export { default as ResourceStudio } from './components/organisms/ResourceStudio/ResourceStudio.svelte';
+export { DEFAULT_CAPABILITIES, resolveCapabilities, fieldsToColumns, fieldsToSchema } from './components/organisms/ResourceStudio/ResourceStudio.svelte';
 export { default as GanttChart } from './components/organisms/GanttChart/GanttChart.svelte';
 export { default as ToastContainer } from './components/organisms/Toast/ToastContainer.svelte';
 export { toastStore, toast } from './components/organisms/Toast/toast.svelte.js';
@@ -491,6 +497,7 @@ export { default as AuthTemplate } from './components/templates/AuthTemplate/Aut
 export { default as DashboardTemplate } from './components/templates/DashboardTemplate/DashboardTemplate.svelte';
 export { default as MarketingTemplate } from './components/templates/MarketingTemplate/MarketingTemplate.svelte';
 export { default as ListingTemplate } from './components/templates/ListingTemplate/ListingTemplate.svelte';
+export { default as ResourceStudioTemplate } from './components/templates/ResourceStudioTemplate/ResourceStudioTemplate.svelte';
 export { default as CheckoutTemplate } from './components/templates/CheckoutTemplate/CheckoutTemplate.svelte';
 export { default as DesktopTemplate } from './components/templates/DesktopTemplate/DesktopTemplate.svelte';
 // ── Utils ────────────────────────────────────────────────────────────────────
@@ -498,6 +505,7 @@ export { themeStore } from './utils/theme.svelte.js';
 export { pageVisibility } from './utils/pageVisibility.svelte.js';
 export { network } from './utils/network.svelte.js';
 export { DEFAULT_COLS, DEFAULT_ROW_HEIGHT, DEFAULT_GAP, GRID_DENSITY, clampItem, rectsOverlap, findCollisions, resolveCollisions, compactLayout, updateItem, addItem, removeItem, serializeLayout, parseLayout, layoutBounds, rescaleLayout, resizeItemByEdge } from './utils/layoutGrid.js';
+export { attachMarqueeSelect, collectMarqueeItems, defaultMarqueeIgnore, getMarqueeModifier, hitTestIds, normalizeRect, rectsIntersect, resolveMarqueeSelection } from './utils/marqueeSelect.js';
 export { encodeQR, qrToSvgPath, punchLogoHole } from './utils/qr.js';
 export { renderMarkdown, renderInline, escapeHtml, splitTableRow, slugifyHeading } from './utils/markdown.js';
 export { diffLines, diffWords, diffStats, toSplitRows } from './utils/diff.js';

package/dist/utils/marqueeSelect.d.ts

@@ -0,0 +1,48 @@
+/** Axis-aligned selection rectangle (container-local coordinates). */
+export interface MarqueeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Hit-test target with an id and box in the same coordinate space as {@link MarqueeRect}. */
+export interface MarqueeItemRect {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type MarqueeModifier = 'replace' | 'add' | 'toggle';
+export interface MarqueeDragState {
+    rect: MarqueeRect;
+    ids: string[];
+    modifier: MarqueeModifier;
+}
+export interface AttachMarqueeSelectOptions {
+    /** Pixels of movement before a drag becomes a marquee (keeps clicks clean). Default 4. */
+    threshold?: number;
+    /** Supply item boxes; called on each move after threshold. */
+    getItems: () => MarqueeItemRect[];
+    /** Live updates while dragging (after threshold). */
+    onDrag?: (state: MarqueeDragState) => void;
+    /** Fired on pointerup if a marquee drag occurred. */
+    onSelect: (state: MarqueeDragState) => void;
+    /** Skip starting a marquee from this event target. */
+    shouldIgnore?: (target: EventTarget | null) => boolean;
+    /** Called when the overlay rect changes (including null when idle / below threshold). */
+    onRect?: (rect: MarqueeRect | null) => void;
+}
+export declare function normalizeRect(x0: number, y0: number, x1: number, y1: number): MarqueeRect;
+export declare function rectsIntersect(a: MarqueeRect, b: MarqueeRect): boolean;
+export declare function hitTestIds(marquee: MarqueeRect, items: MarqueeItemRect[]): string[];
+export declare function getMarqueeModifier(e: Pick<PointerEvent, 'shiftKey' | 'metaKey' | 'ctrlKey'>): MarqueeModifier;
+export declare function resolveMarqueeSelection(hitIds: string[], previousIds: string[], modifier: MarqueeModifier): string[];
+/** Collect `[data-marquee-id]` children in container-local (incl. scroll) coordinates. */
+export declare function collectMarqueeItems(container: HTMLElement, selector?: string): MarqueeItemRect[];
+export declare function defaultMarqueeIgnore(target: EventTarget | null): boolean;
+/**
+ * Attach Windows-style rubber-band selection to a container.
+ * Returns a disposer.
+ */
+export declare function attachMarqueeSelect(container: HTMLElement, options: AttachMarqueeSelectOptions): () => void;

package/dist/utils/marqueeSelect.js

@@ -0,0 +1,189 @@
+export function normalizeRect(x0, y0, x1, y1) {
+    const left = Math.min(x0, x1);
+    const top = Math.min(y0, y1);
+    return {
+        x: left,
+        y: top,
+        width: Math.abs(x1 - x0),
+        height: Math.abs(y1 - y0)
+    };
+}
+export function rectsIntersect(a, b) {
+    return (a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y);
+}
+export function hitTestIds(marquee, items) {
+    const ids = [];
+    for (const item of items) {
+        if (rectsIntersect(marquee, item))
+            ids.push(item.id);
+    }
+    return ids;
+}
+export function getMarqueeModifier(e) {
+    if (e.metaKey || e.ctrlKey)
+        return 'toggle';
+    if (e.shiftKey)
+        return 'add';
+    return 'replace';
+}
+export function resolveMarqueeSelection(hitIds, previousIds, modifier) {
+    if (modifier === 'replace')
+        return [...hitIds];
+    if (modifier === 'add')
+        return [...new Set([...previousIds, ...hitIds])];
+    const set = new Set(previousIds);
+    for (const id of hitIds) {
+        if (set.has(id))
+            set.delete(id);
+        else
+            set.add(id);
+    }
+    return [...set];
+}
+/** Collect `[data-marquee-id]` children in container-local (incl. scroll) coordinates. */
+export function collectMarqueeItems(container, selector = '[data-marquee-id]') {
+    const cRect = container.getBoundingClientRect();
+    const nodes = container.querySelectorAll(selector);
+    const items = [];
+    for (const node of nodes) {
+        if (!(node instanceof HTMLElement))
+            continue;
+        const id = node.getAttribute('data-marquee-id');
+        if (!id)
+            continue;
+        const r = node.getBoundingClientRect();
+        items.push({
+            id,
+            x: r.left - cRect.left + container.scrollLeft,
+            y: r.top - cRect.top + container.scrollTop,
+            width: r.width,
+            height: r.height
+        });
+    }
+    return items;
+}
+export function defaultMarqueeIgnore(target) {
+    if (!(target instanceof Element))
+        return false;
+    return Boolean(target.closest('input, textarea, select, button, a, label, [data-marquee-ignore], [role="separator"], [contenteditable="true"]'));
+}
+function pointerInContainer(e, container) {
+    const r = container.getBoundingClientRect();
+    return {
+        x: e.clientX - r.left + container.scrollLeft,
+        y: e.clientY - r.top + container.scrollTop
+    };
+}
+/**
+ * Attach Windows-style rubber-band selection to a container.
+ * Returns a disposer.
+ */
+export function attachMarqueeSelect(container, options) {
+    const threshold = options.threshold ?? 4;
+    const shouldIgnore = options.shouldIgnore ?? defaultMarqueeIgnore;
+    let originX = 0;
+    let originY = 0;
+    let active = false;
+    let dragging = false;
+    let pointerId = null;
+    function unbindWindow() {
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        window.removeEventListener('pointercancel', onPointerUp);
+    }
+    function finish(e) {
+        if (!active)
+            return;
+        active = false;
+        const wasDragging = dragging;
+        dragging = false;
+        unbindWindow();
+        if (pointerId != null) {
+            try {
+                container.releasePointerCapture(pointerId);
+            }
+            catch {
+                /* already released */
+            }
+            pointerId = null;
+        }
+        if (!wasDragging) {
+            options.onRect?.(null);
+            return;
+        }
+        const pt = pointerInContainer(e, container);
+        const rect = normalizeRect(originX, originY, pt.x, pt.y);
+        const ids = hitTestIds(rect, options.getItems());
+        const modifier = getMarqueeModifier(e);
+        options.onSelect({ rect, ids, modifier });
+        options.onRect?.(null);
+        window.getSelection()?.removeAllRanges();
+    }
+    function onPointerDown(e) {
+        if (e.button !== 0)
+            return;
+        if (shouldIgnore(e.target))
+            return;
+        const pt = pointerInContainer(e, container);
+        originX = pt.x;
+        originY = pt.y;
+        active = true;
+        dragging = false;
+        pointerId = e.pointerId;
+        // Defer capture until drag threshold so cell/row clicks still fire.
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }
+    function onPointerMove(e) {
+        if (!active)
+            return;
+        if (pointerId != null && e.pointerId !== pointerId)
+            return;
+        const pt = pointerInContainer(e, container);
+        const dx = pt.x - originX;
+        const dy = pt.y - originY;
+        if (!dragging) {
+            if (Math.hypot(dx, dy) < threshold)
+                return;
+            dragging = true;
+            if (pointerId != null) {
+                try {
+                    container.setPointerCapture(pointerId);
+                }
+                catch {
+                    /* ignore */
+                }
+            }
+            e.preventDefault();
+            window.getSelection()?.removeAllRanges();
+        }
+        else {
+            e.preventDefault();
+        }
+        const rect = normalizeRect(originX, originY, pt.x, pt.y);
+        options.onRect?.(rect);
+        const ids = hitTestIds(rect, options.getItems());
+        const modifier = getMarqueeModifier(e);
+        options.onDrag?.({ rect, ids, modifier });
+    }
+    function onPointerUp(e) {
+        if (pointerId != null && e.pointerId !== pointerId)
+            return;
+        finish(e);
+    }
+    function onLostCapture(e) {
+        if (e.pointerId === pointerId)
+            finish(e);
+    }
+    container.addEventListener('pointerdown', onPointerDown);
+    container.addEventListener('lostpointercapture', onLostCapture);
+    return () => {
+        unbindWindow();
+        container.removeEventListener('pointerdown', onPointerDown);
+        container.removeEventListener('lostpointercapture', onLostCapture);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",