compote-ui 0.62.1 → 0.63.0

package/README.md

@@ -26,6 +26,12 @@ yarn add compote-ui
 bun add compote-ui
 ```
 
+If you use an AI agent, run:
+
+```bash
+npx @tanstack/intent@latest install
+```
+
 ## Peer Dependencies
 
 Compote UI requires Svelte 5 or later:

package/dist/components/checkbox/checkbox.svelte

@@ -50,7 +50,7 @@
 	</Checkbox.Control>
 	{#if label}
 		<div class="flex flex-col gap-0.5">
-			<Checkbox.Label class="text-base select-none data-disabled:opacity-50">
+			<Checkbox.Label class="text-sm select-none data-disabled:opacity-50">
 				{label}
 			</Checkbox.Label>
 			{#if children}

package/dist/components/data-table-v9/create-table.svelte.d.ts

@@ -58,7 +58,9 @@ export declare function createTable<T extends RowData>(options: CreateDataTableO
         arrIncludesAll: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
             autoRemove: (val: any) => boolean;
         };
-        arrHas: <TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean;
+        arrHas: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
+            autoRemove: (val: any) => boolean;
+        };
         arrIncludesSome: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
             autoRemove: (val: any) => boolean;
         };

package/dist/components/data-table-v9/data-table-utils.d.ts

@@ -52,7 +52,9 @@ export declare function getRowCells<T extends RowData>(row: Row<DataTableFeature
         arrIncludesAll: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
             autoRemove: (val: any) => boolean;
         };
-        arrHas: <TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean;
+        arrHas: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
+            autoRemove: (val: any) => boolean;
+        };
         arrIncludesSome: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
             autoRemove: (val: any) => boolean;
         };

package/dist/components/data-table-v9/features.d.ts

@@ -29,7 +29,9 @@ export declare const dataTableFeatures: {
         arrIncludesAll: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
             autoRemove: (val: any) => boolean;
         };
-        arrHas: <TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean;
+        arrHas: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
+            autoRemove: (val: any) => boolean;
+        };
         arrIncludesSome: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends import("@tanstack/table-core").RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
             autoRemove: (val: any) => boolean;
         };

package/dist/components/data-table-v9/table-view-state.svelte.d.ts

@@ -49,7 +49,9 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             arrIncludesAll: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };
-            arrHas: <TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean;
+            arrHas: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
+                autoRemove: (val: any) => boolean;
+            };
             arrIncludesSome: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };
@@ -111,7 +113,9 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             arrIncludesAll: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };
-            arrHas: <TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean;
+            arrHas: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
+                autoRemove: (val: any) => boolean;
+            };
             arrIncludesSome: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };
@@ -174,7 +178,9 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             arrIncludesAll: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };
-            arrHas: <TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean;
+            arrHas: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
+                autoRemove: (val: any) => boolean;
+            };
             arrIncludesSome: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };
@@ -236,7 +242,9 @@ export declare function createTableViewState<T extends RowData>(getTable: () =>
             arrIncludesAll: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };
-            arrHas: <TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean;
+            arrHas: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
+                autoRemove: (val: any) => boolean;
+            };
             arrIncludesSome: (<TFeatures extends import("@tanstack/table-core").TableFeatures, TData extends RowData>(row: import("@tanstack/table-core").Row<TFeatures, TData>, columnId: string, filterValue: Array<unknown>) => boolean) & {
                 autoRemove: (val: any) => boolean;
             };

package/dist/components/data-table-v9/toolbar/data-table-column-filter.svelte

@@ -66,8 +66,7 @@
 
 	function getColumnType(column: Column<DataTableFeatures, T, unknown>): string | undefined {
 		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
-			| string
-			| undefined;
+			string | undefined;
 	}
 
 	function getColumnLabel(column: Column<DataTableFeatures, T, unknown>): string {
@@ -162,8 +161,7 @@
 		column: Column<DataTableFeatures, T, unknown>
 	): Intl.NumberFormatOptions | undefined {
 		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
-			| Intl.NumberFormatOptions
-			| undefined;
+			Intl.NumberFormatOptions | undefined;
 	}
 </script>
 

package/dist/components/date-input/date-input.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { DateInput } from '@ark-ui/svelte/date-input';
 	import { Field, useFieldContext } from '@ark-ui/svelte/field';
+	import { toDateValue, fromDateValue, dateValueShape } from '../../utils/date';
+	import type { DateValueShape } from '../../utils/date';
 	import type { DateInputProps } from './types';
 
 	let {
@@ -8,6 +10,9 @@
 		defaultValue,
 		label,
 		name,
+		granularity = 'day',
+		hourCycle,
+		timeZone,
 		onValueChange,
 		invalid,
 		readOnly,
@@ -21,12 +26,25 @@
 	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
 	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
 
-	const arkValue = $derived(value ?? null);
-	const arkDefault = $derived(defaultValue ?? null);
+	// Remember the shape the consumer bound the value as, so changes are emitted
+	// back in the same shape (string in → string out, Date in → Date out).
+	// When the bound value starts null (e.g. a nullable DB column), default to
+	// string output since that's the common case binding to database values.
+	let shape: DateValueShape = 'string';
+
+	const arkValue = $derived.by(() => {
+		const s = dateValueShape(value) ?? dateValueShape(defaultValue);
+		if (s) shape = s;
+		return toDateValue(value, timeZone);
+	});
+	const arkDefault = $derived(toDateValue(defaultValue, timeZone));
 </script>
 
 <DateInput.Root
 	{...restProps}
+	{granularity}
+	{hourCycle}
+	{timeZone}
 	{hideTimeZone}
 	invalid={isInvalid}
 	readOnly={isReadOnly}
@@ -37,7 +55,7 @@
 		const dv = details.value[0] ?? null;
 		// Guard: skip if Ark UI echoes back the same date (prevents reactive loop)
 		if (dv?.toString() === arkValue?.toString()) return;
-		value = dv;
+		value = fromDateValue(dv, shape, timeZone);
 		onValueChange?.(details);
 	}}
 >

package/dist/components/date-input/types.d.ts

@@ -1,9 +1,23 @@
 import type { DateInputRootBaseProps } from '@ark-ui/svelte/date-input';
-import type { DateValue } from '@internationalized/date';
-export type { DateValue };
-export interface DateInputProps extends Omit<DateInputRootBaseProps, 'value' | 'defaultValue'> {
-    value?: DateValue | null;
-    defaultValue?: DateValue | null;
+import type { DateValue, DateInputValue } from '../../utils/date';
+export type { DateValue, DateInputValue };
+export interface DateInputProps extends Omit<DateInputRootBaseProps, 'value' | 'defaultValue' | 'granularity' | 'hourCycle'> {
+    /**
+     * Bound value. Accepts a `DateValue`, an ISO/DB string, or a native `Date` —
+     * no manual conversion needed. The value is emitted back in the same shape it
+     * was provided (string in → string out, `Date` in → `Date` out). When the
+     * value starts `null`, changes are emitted as a string by default.
+     *
+     * For UTC values from a database, bind the ISO string with its `Z`/offset and
+     * leave `timeZone` unset: the segments display in the user's local zone and the
+     * emitted string is UTC (e.g. `"2024-01-15T10:30:00.000Z"`).
+     */
+    value?: DateInputValue;
+    defaultValue?: DateInputValue;
     label?: string;
     name?: string;
+    granularity?: 'day' | 'hour' | 'minute' | 'second';
+    hourCycle?: 12 | 24;
+    /** BCP-47 locale (e.g. `'de-DE'`). Overrides the `LocaleProvider` / browser locale. */
+    locale?: string;
 }

package/dist/components/tags-input/tags-input.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { TagsInput } from '@ark-ui/svelte/tags-input';
+	import { useFieldContext } from '@ark-ui/svelte/field';
+	import { cn } from 'tailwind-variants';
+	import type { TagsInputProps } from './types';
+	import { PhX } from '../../icons';
+
+	let {
+		value = $bindable(),
+		label,
+		placeholder,
+		invalid,
+		readOnly,
+		disabled,
+		class: className,
+		...restProps
+	}: TagsInputProps = $props();
+
+	const field = useFieldContext();
+	const isInvalid = $derived(invalid ?? field?.()?.invalid ?? false);
+	const isReadOnly = $derived(readOnly ?? field?.()?.readOnly ?? false);
+	const isDisabled = $derived(disabled ?? field?.()?.disabled ?? false);
+</script>
+
+<TagsInput.Root
+	bind:value
+	invalid={isInvalid}
+	readOnly={isReadOnly}
+	disabled={isDisabled}
+	{...restProps}
+	class={cn('grid gap-1.5', className)}
+>
+	<TagsInput.Context>
+		{#snippet render(tagsInput)}
+			{#if label}
+				<TagsInput.Label class="text-sm font-medium leading-none data-disabled:opacity-50">
+					{label}
+				</TagsInput.Label>
+			{/if}
+
+			<TagsInput.Control
+				class={cn(
+					'flex min-h-9 flex-wrap items-center gap-1 rounded border bg-surface-1 px-2 py-1 shadow-sm',
+					'focus-within:ring-1 focus-within:ring-ring',
+					'data-disabled:pointer-events-none data-disabled:opacity-50',
+					'data-invalid:border-danger data-invalid:focus-within:ring-danger'
+				)}
+			>
+				{#each tagsInput().value as value, index (index)}
+					<TagsInput.Item
+						{index}
+						{value}
+						class="inline-flex cursor-default items-center outline-none"
+					>
+						<TagsInput.ItemPreview
+							class={cn(
+								'inline-flex items-center gap-1 rounded bg-surface-2 py-0.5 pr-1 pl-2 text-sm',
+								'data-highlighted:bg-primary/10 data-disabled:opacity-50'
+							)}
+						>
+							<TagsInput.ItemText>{value}</TagsInput.ItemText>
+							{#if !isReadOnly}
+								<TagsInput.ItemDeleteTrigger
+									class="rounded p-0.5 text-ink-dim transition-colors hover:text-ink"
+								>
+									<PhX class="size-3" />
+								</TagsInput.ItemDeleteTrigger>
+							{/if}
+						</TagsInput.ItemPreview>
+						<TagsInput.ItemInput
+							class="rounded border bg-surface-1 px-2 py-0.5 text-sm outline-none"
+						/>
+					</TagsInput.Item>
+				{/each}
+				<TagsInput.Input
+					{placeholder}
+					class="min-w-12 flex-1 bg-transparent text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed"
+				/>
+			</TagsInput.Control>
+		{/snippet}
+	</TagsInput.Context>
+	<TagsInput.HiddenInput />
+</TagsInput.Root>

package/dist/components/tags-input/tags-input.svelte.d.ts

@@ -0,0 +1,5 @@
+import { TagsInput } from '@ark-ui/svelte/tags-input';
+import type { TagsInputProps } from './types';
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/dist/components/tags-input/types.d.ts

@@ -0,0 +1,7 @@
+import type { TagsInputRootProps } from '@ark-ui/svelte/tags-input';
+import type { ClassValue } from 'tailwind-variants';
+export interface TagsInputProps extends Omit<TagsInputRootProps, 'class'> {
+    class?: ClassValue;
+    label?: string;
+    placeholder?: string;
+}

package/dist/components/tags-input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -17,7 +17,8 @@ export type { DateFieldProps } from './components/date-field/types';
 export { default as DateRangeField } from './components/date-range-field/date-range-field.svelte';
 export type { DateRangeFieldProps } from './components/date-range-field/types';
 export { default as DateInput } from './components/date-input/date-input.svelte';
-export type { DateInputProps, DateValue as DateInputDateValue } from './components/date-input/types';
+export type { DateInputProps, DateInputValue, DateValue as DateInputDateValue } from './components/date-input/types';
+export { toDateValue, dateValueToString, dateValueToDate } from './utils/date';
 export { default as DatePicker } from './components/date-picker/date-picker.svelte';
 export type { DatePickerProps } from './components/date-picker/types';
 export * as Dialog from './components/dialog';
@@ -48,6 +49,8 @@ export { default as Splitter } from './components/splitter/splitter.svelte';
 export type { SplitterPanelConfig, SplitterProps } from './components/splitter/types';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export { default as TagsInput } from './components/tags-input/tags-input.svelte';
+export type { TagsInputProps } from './components/tags-input/types';
 export * as Toast from './components/toast';
 export { toast } from './components/toast';
 export type { ToastOptions, ToastType } from './components/toast';

package/dist/index.js

@@ -14,6 +14,7 @@ export { default as Combobox } from './components/combobox/combobox.svelte';
 export { default as DateField } from './components/date-field/date-field.svelte';
 export { default as DateRangeField } from './components/date-range-field/date-range-field.svelte';
 export { default as DateInput } from './components/date-input/date-input.svelte';
+export { toDateValue, dateValueToString, dateValueToDate } from './utils/date';
 export { default as DatePicker } from './components/date-picker/date-picker.svelte';
 export * as Dialog from './components/dialog';
 export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
@@ -35,6 +36,7 @@ export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';
 export { default as Switch } from './components/switch/switch.svelte';
 export * as Tabs from './components/tabs';
+export { default as TagsInput } from './components/tags-input/tags-input.svelte';
 export * as Toast from './components/toast';
 export { toast } from './components/toast';
 export { createToaster } from '@ark-ui/svelte/toast';

package/dist/utils/date.d.ts

@@ -0,0 +1,26 @@
+import { type DateValue } from '@internationalized/date';
+export type { DateValue };
+/**
+ * Anything the date components accept for a single value: an
+ * `@internationalized/date` value, an ISO/DB string, a native `Date`, or null.
+ */
+export type DateInputValue = DateValue | string | Date | null | undefined;
+/** The runtime shape a bound value was provided in, used to round-trip on change. */
+export type DateValueShape = 'string' | 'date' | 'date-value';
+/** Report the runtime shape of a value so a change can be emitted in the same shape. */
+export declare function dateValueShape(value: DateInputValue): DateValueShape | null;
+/**
+ * Coerce a string / `Date` / `DateValue` into a `DateValue` for Ark UI.
+ *
+ * String auto-detection:
+ * - `"2024-01-15"` → {@link parseDate} (date-only)
+ * - `"2024-01-15T10:30:00"` → {@link parseDateTime} (local datetime)
+ * - `"2024-01-15T10:30:00Z"` / `"…+02:00"` → zoned (in `timeZone`, else local)
+ */
+export declare function toDateValue(value: DateInputValue, timeZone?: string): DateValue | null;
+/** Serialize a `DateValue` to an ISO string (absolute `…Z` for zoned values). */
+export declare function dateValueToString(value: DateValue): string;
+/** Convert a `DateValue` to a native `Date`. */
+export declare function dateValueToDate(value: DateValue, timeZone?: string): Date;
+/** Emit a `DateValue` back in the original `shape` it was bound as. */
+export declare function fromDateValue(value: DateValue | null, shape: DateValueShape, timeZone?: string): DateValue | string | Date | null;

package/dist/utils/date.js

@@ -0,0 +1,64 @@
+import { parseDate, parseDateTime, parseAbsolute, parseAbsoluteToLocal, fromDate, getLocalTimeZone } from '@internationalized/date';
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+// Trailing `Z`, or a `+HH`, `+HH:MM`, `+HHMM` offset.
+const HAS_OFFSET = /(?:[zZ]|[+-]\d{2}(?::?\d{2})?)$/;
+/** Normalize a DB datetime string to ISO 8601: space → `T`, bare `+HH` offset → `+HH:00`. */
+function normalizeIso(value) {
+    return value.replace(' ', 'T').replace(/([+-]\d{2})$/, '$1:00');
+}
+/** Report the runtime shape of a value so a change can be emitted in the same shape. */
+export function dateValueShape(value) {
+    if (value == null)
+        return null;
+    if (typeof value === 'string')
+        return 'string';
+    if (value instanceof Date)
+        return 'date';
+    return 'date-value';
+}
+/**
+ * Coerce a string / `Date` / `DateValue` into a `DateValue` for Ark UI.
+ *
+ * String auto-detection:
+ * - `"2024-01-15"` → {@link parseDate} (date-only)
+ * - `"2024-01-15T10:30:00"` → {@link parseDateTime} (local datetime)
+ * - `"2024-01-15T10:30:00Z"` / `"…+02:00"` → zoned (in `timeZone`, else local)
+ */
+export function toDateValue(value, timeZone) {
+    if (value == null)
+        return null;
+    if (value instanceof Date)
+        return fromDate(value, timeZone ?? getLocalTimeZone());
+    if (typeof value !== 'string')
+        return value;
+    const raw = value.trim();
+    if (!raw)
+        return null;
+    if (DATE_ONLY.test(raw))
+        return parseDate(raw);
+    const iso = normalizeIso(raw);
+    if (HAS_OFFSET.test(iso)) {
+        return timeZone ? parseAbsolute(iso, timeZone) : parseAbsoluteToLocal(iso);
+    }
+    return parseDateTime(iso);
+}
+/** Serialize a `DateValue` to an ISO string (absolute `…Z` for zoned values). */
+export function dateValueToString(value) {
+    return 'timeZone' in value ? value.toAbsoluteString() : value.toString();
+}
+/** Convert a `DateValue` to a native `Date`. */
+export function dateValueToDate(value, timeZone) {
+    return 'timeZone' in value
+        ? value.toDate()
+        : value.toDate(timeZone ?? getLocalTimeZone());
+}
+/** Emit a `DateValue` back in the original `shape` it was bound as. */
+export function fromDateValue(value, shape, timeZone) {
+    if (value == null)
+        return null;
+    if (shape === 'string')
+        return dateValueToString(value);
+    if (shape === 'date')
+        return dateValueToDate(value, timeZone);
+    return value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.62.1",
+	"version": "0.63.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -19,7 +19,9 @@
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
+		"!dist/**/*.spec.*",
+		"skills",
+		"!skills/_artifacts"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -61,9 +63,10 @@
 		"@sveltejs/kit": "^2.66.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
-		"@tailwindcss/vite": "^4.3.1",
+		"@tailwindcss/vite": "^4.3.2",
+		"@tanstack/intent": "^0.3.2",
 		"@tanstack/svelte-table": "^9.0.0-beta.17",
-		"@tanstack/svelte-virtual": "^3.13.29",
+		"@tanstack/svelte-virtual": "^3.13.30",
 		"@types/node": "^22.20.0",
 		"eslint": "^10.5.0",
 		"eslint-config-prettier": "^10.1.8",
@@ -73,9 +76,9 @@
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.0",
 		"publint": "^0.3.21",
-		"svelte": "^5.56.3",
+		"svelte": "^5.56.4",
 		"svelte-check": "^4.6.0",
-		"tailwindcss": "^4.3.1",
+		"tailwindcss": "^4.3.2",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.61.1",
@@ -83,7 +86,8 @@
 		"vite": "^8.0.16"
 	},
 	"keywords": [
-		"svelte"
+		"svelte",
+		"tanstack-intent"
 	],
 	"dependencies": {
 		"@ark-ui/svelte": "^5.22.1",
@@ -93,5 +97,11 @@
 		"svelte-tel-input": "^4.2.0",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2"
+	},
+	"intent": {
+		"skills": [
+			"compote-ui",
+			"@tanstack/svelte-table"
+		]
 	}
 }