ui-ingredients 0.0.37 → 0.0.38

package/dist/segment-group/context.svelte.d.ts

@@ -1,5 +1,4 @@
-import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateSegmentGroupReturn } from './create-segment-group.svelte.js';
-export declare const segmentGroupContext: Context<CreateSegmentGroupReturn>;
-export declare const segmentGroupItemPropsContext: Context<ItemProps>;
+export declare const getSegmentGroupContext: () => CreateSegmentGroupReturn, setSegmentGroupContext: (context: CreateSegmentGroupReturn | (() => CreateSegmentGroupReturn)) => void;
+export declare const getSegmentGroupItemPropsContext: () => ItemProps, setSegmentGroupItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;

package/dist/segment-group/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../context.svelte.js';
-export const segmentGroupContext = new Context('SegmentGroup');
-export const segmentGroupItemPropsContext = new Context('SegmentGroupItem');
+import { createContext } from '../create-context.svelte.js';
+export const [getSegmentGroupContext, setSegmentGroupContext] = createContext('SegmentGroup');
+export const [getSegmentGroupItemPropsContext, setSegmentGroupItemPropsContext,] = createContext('SegmentGroupItem');

package/dist/segment-group/create-segment-group.svelte.js

@@ -6,12 +6,14 @@ import { uid } from 'uid';
 export function createSegmentGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(segmentGroup.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(segmentGroup.machine(context));
     const api = $derived(reflect(() => segmentGroup.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/segment-group/index.d.ts

@@ -7,3 +7,4 @@ export type { SegmentGroupItemProps } from './item.svelte';
 export type { SegmentGroupLabelProps } from './label.svelte';
 export type { SegmentGroupProps } from './root.svelte';
 export { anatomy as segmentGroupAnatomy } from './anatomy.js';
+export { getSegmentGroupContext } from './context.svelte.js';

package/dist/segment-group/index.js

@@ -1,2 +1,3 @@
 export * as SegmentGroup from './segment-group.js';
 export { anatomy as segmentGroupAnatomy } from './anatomy.js';
+export { getSegmentGroupContext } from './context.svelte.js';

package/dist/segment-group/indicator.svelte

@@ -9,11 +9,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
-  import {segmentGroupContext} from './context.svelte.js';
+  import {getSegmentGroupContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupIndicatorProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
+  let segmentGroup = getSegmentGroupContext();
 
   let mergedProps = $derived(
     mergeProps(props, segmentGroup.getIndicatorProps(), parts.indicator.attrs),

package/dist/segment-group/item-control.svelte

@@ -10,14 +10,14 @@
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupItemControlProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
-  let itemProps = segmentGroupItemPropsContext.get();
+  let segmentGroup = getSegmentGroupContext();
+  let itemProps = getSegmentGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/segment-group/item-hidden-input.svelte

@@ -8,14 +8,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {...props}: SegmentGroupItemHiddenInputProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
-  let itemProps = segmentGroupItemPropsContext.get();
+  let segmentGroup = getSegmentGroupContext();
+  let itemProps = getSegmentGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, segmentGroup.getItemHiddenInputProps(itemProps)),

package/dist/segment-group/item-text.svelte

@@ -10,14 +10,14 @@
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    getSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupItemTextProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
-  let itemProps = segmentGroupItemPropsContext.get();
+  let segmentGroup = getSegmentGroupContext();
+  let itemProps = getSegmentGroupItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/segment-group/item.svelte

@@ -15,13 +15,13 @@
   import {createSplitProps} from '@zag-js/utils';
   import {parts} from './anatomy.js';
   import {
-    segmentGroupContext,
-    segmentGroupItemPropsContext,
+    getSegmentGroupContext,
+    setSegmentGroupItemPropsContext,
   } from './context.svelte.js';
 
   let {children, asChild, ...props}: SegmentGroupItemProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
+  let segmentGroup = getSegmentGroupContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['value', 'invalid', 'disabled'])(props),
@@ -36,7 +36,7 @@
     ),
   );
 
-  segmentGroupItemPropsContext.set(() => itemProps);
+  setSegmentGroupItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/segment-group/label.svelte

@@ -9,11 +9,11 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {parts} from './anatomy.js';
-  import {segmentGroupContext} from './context.svelte.js';
+  import {getSegmentGroupContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupLabelProps = $props();
 
-  let segmentGroup = segmentGroupContext.get();
+  let segmentGroup = getSegmentGroupContext();
 
   let mergedProps = $derived(
     mergeProps(props, segmentGroup.getLabelProps(), parts.label.attrs),

package/dist/segment-group/root.svelte

@@ -21,7 +21,7 @@
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {parts} from './anatomy.js';
-  import {segmentGroupContext} from './context.svelte.js';
+  import {setSegmentGroupContext} from './context.svelte.js';
   import {createSegmentGroup} from './create-segment-group.svelte.js';
 
   let {asChild, children, ...props}: SegmentGroupProps = $props();
@@ -46,7 +46,7 @@
     mergeProps(otherProps, segmentGroup.getRootProps(), parts.root.attrs),
   );
 
-  segmentGroupContext.set(segmentGroup);
+  setSegmentGroupContext(segmentGroup);
 </script>
 
 {#if asChild}

package/dist/select/clear-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectClearTriggerProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getClearTriggerProps()));
 </script>

package/dist/select/content.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectContentProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getContentProps()));
 </script>

package/dist/select/context.svelte.d.ts

@@ -1,6 +1,5 @@
-import { Context } from '../context.svelte.js';
 import type { ItemGroupProps, ItemProps } from '@zag-js/select';
 import type { CreateSelectReturn } from './create-select.svelte.js';
-export declare const selectContext: Context<CreateSelectReturn>;
-export declare const selectItemPropsContext: Context<ItemProps<any>>;
-export declare const selectItemGroupPropsContext: Context<ItemGroupProps>;
+export declare const getSelectContext: () => CreateSelectReturn, setSelectContext: (context: CreateSelectReturn | (() => CreateSelectReturn)) => void;
+export declare const getSelectItemPropsContext: () => ItemProps<any>, setSelectItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => void;
+export declare const getSelectItemGroupPropsContext: () => ItemGroupProps, setSelectItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;

package/dist/select/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../context.svelte.js';
-export const selectContext = new Context('Select');
-export const selectItemPropsContext = new Context('SelectItem');
-export const selectItemGroupPropsContext = new Context('SelectItemGroup');
+import { createContext } from '../create-context.svelte.js';
+export const [getSelectContext, setSelectContext] = createContext('Select');
+export const [getSelectItemPropsContext, setSelectItemPropsContext] = createContext('SelectItem');
+export const [getSelectItemGroupPropsContext, setSelectItemGroupPropsContext] = createContext('SelectItemGroup');

package/dist/select/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectControlProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getControlProps()));
 </script>

package/dist/select/create-select.svelte.d.ts

@@ -1,12 +1,10 @@
 import * as select from '@zag-js/select';
-export interface CreateSelectProps<T> extends Omit<select.Context, 'id' | 'dir' | 'getRootNode' | 'collection' | 'open.controlled'> {
+type Omitted = 'id' | 'dir' | 'getRootNode' | 'collection' | 'open.controlled';
+export interface CreateSelectProps<T> extends select.CollectionOptions<T>, Omit<select.Context, Omitted> {
     id?: string | null;
-    items: T[];
-    itemToString?: (item: T) => string;
-    itemToValue?: (item: T) => string;
-    isItemDisabled?: (item: T) => boolean;
     defaultOpen?: boolean;
 }
 export interface CreateSelectReturn extends select.Api {
 }
 export declare function createSelect<T>(props: CreateSelectProps<T>): any;
+export {};

package/dist/select/create-select.svelte.js

@@ -3,18 +3,21 @@ import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as select from '@zag-js/select';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { createSplitProps } from '@zag-js/utils';
 import { uid } from 'uid';
 export function createSelect(props) {
-    const collection = $derived(select.collection({
-        items: props.items,
-        itemToValue: (item) => props.itemToValue ? props.itemToValue(item) : String(item),
-        itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
-        isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
-    }));
+    const [collectionProps, selectProps] = $derived(createSplitProps([
+        'items',
+        'itemToValue',
+        'itemToString',
+        'isItemDisabled',
+    ])(props));
+    const collection = $derived(select.collection(collectionProps));
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(select.machine({
+    const id = uid();
+    const context = $derived({
         ids: {
             label: field?.ids.label,
             hiddenSelect: field?.ids.control,
@@ -23,19 +26,19 @@ export function createSelect(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
-        ...props,
-        id: props.id ?? uid(),
+        ...selectProps,
+        id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
+        'open.controlled': props.open != null,
         getRootNode: environment?.getRootNode,
         collection,
-        'open.controlled': props.open != null,
-    }));
+    });
+    const [state, send] = useMachine(select.machine(context));
     const api = $derived(reflect(() => {
         const o = select.connect(state, send, normalizeProps);
         return {
             ...o,
-            collection,
             getHiddenSelectProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],

package/dist/select/hidden-select.svelte

@@ -6,11 +6,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectHiddenSelectProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getHiddenSelectProps()));
 </script>

package/dist/select/index.d.ts

@@ -16,3 +16,4 @@ export type { SelectProps } from './root.svelte';
 export type { SelectTriggerProps } from './trigger.svelte';
 export type { SelectValueTextProps } from './value-text.svelte';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { getSelectContext } from './context.svelte.js';

package/dist/select/index.js

@@ -1,2 +1,3 @@
 export * as Select from './select.js';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+export { getSelectContext } from './context.svelte.js';

package/dist/select/indicator.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectIndicatorProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getIndicatorProps()));
 </script>

package/dist/select/item-group-label.svelte

@@ -9,14 +9,15 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    selectContext,
-    selectItemGroupPropsContext,
+    getSelectContext,
+    getSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemGroupLabelProps = $props();
 
-  let select = selectContext.get();
-  let itemGroupProps = selectItemGroupPropsContext.get();
+  let select = getSelectContext();
+
+  let itemGroupProps = getSelectItemGroupPropsContext();
 
   let mergedProps = $derived(
     mergeProps(

package/dist/select/item-group.svelte

@@ -10,13 +10,13 @@
   import {mergeProps} from '../merge-props.js';
   import {uid} from 'uid';
   import {
-    selectContext,
-    selectItemGroupPropsContext,
+    getSelectContext,
+    setSelectItemGroupPropsContext,
   } from './context.svelte.js';
 
   let {id, asChild, children, ...props}: SelectItemGroupProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let id_ = uid();
 
@@ -28,7 +28,7 @@
     mergeProps(props, select.getItemGroupProps(itemGroupProps)),
   );
 
-  selectItemGroupPropsContext.set(() => itemGroupProps);
+  setSelectItemGroupPropsContext(() => itemGroupProps);
 </script>
 
 {#if asChild}

package/dist/select/item-indicator.svelte

@@ -8,12 +8,15 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext, selectItemPropsContext} from './context.svelte.js';
+  import {
+    getSelectContext,
+    getSelectItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemIndicatorProps = $props();
 
-  let select = selectContext.get();
-  let itemProps = selectItemPropsContext.get();
+  let select = getSelectContext();
+  let itemProps = getSelectItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, select.getItemIndicatorProps(itemProps)),

package/dist/select/item-text.svelte

@@ -8,12 +8,15 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext, selectItemPropsContext} from './context.svelte.js';
+  import {
+    getSelectContext,
+    getSelectItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemTextProps = $props();
 
-  let select = selectContext.get();
-  let itemProps = selectItemPropsContext.get();
+  let select = getSelectContext();
+  let itemProps = getSelectItemPropsContext();
 
   let mergedProps = $derived(
     mergeProps(props, select.getItemTextProps(itemProps)),

package/dist/select/item.svelte

@@ -13,11 +13,14 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {createSplitProps} from '@zag-js/utils';
-  import {selectContext, selectItemPropsContext} from './context.svelte.js';
+  import {
+    getSelectContext,
+    setSelectItemPropsContext,
+  } from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectItemProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let [itemProps, otherProps] = $derived(
     createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
@@ -28,7 +31,7 @@
     mergeProps(otherProps, select.getItemProps(itemProps)),
   );
 
-  selectItemPropsContext.set(() => itemProps);
+  setSelectItemPropsContext(() => itemProps);
 </script>
 
 {#if asChild}

package/dist/select/label.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectLabelProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getLabelProps()));
 </script>

package/dist/select/list.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectListProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getListProps()));
 </script>

package/dist/select/positioner.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectPositionerProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getPositionerProps()));
 </script>

package/dist/select/root.svelte

@@ -17,7 +17,7 @@
   import {mergeProps} from '../merge-props.js';
   import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
-  import {selectContext} from './context.svelte.js';
+  import {setSelectContext} from './context.svelte.js';
   import {createSelect} from './create-select.svelte.js';
 
   let {asChild, children, ...props}: SelectProps<T> = $props();
@@ -59,7 +59,7 @@
 
   let mergedProps = $derived(mergeProps(otherProps, select.getRootProps()));
 
-  selectContext.set(select);
+  setSelectContext(select);
 </script>
 
 {#if asChild}

package/dist/select/trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SelectTriggerProps = $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getTriggerProps()));
 </script>

package/dist/select/value-text.svelte

@@ -8,12 +8,12 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {selectContext} from './context.svelte.js';
+  import {getSelectContext} from './context.svelte.js';
 
   let {asChild, children, placeholder, ...props}: SelectValueTextProps =
     $props();
 
-  let select = selectContext.get();
+  let select = getSelectContext();
 
   let mergedProps = $derived(mergeProps(props, select.getValueTextProps()));
 </script>

package/dist/signature-pad/clear-trigger.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {signaturePadContext} from './context.svelte.js';
+  import {getSignaturePadContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SignaturePadClearTriggerProps = $props();
 
-  let signaturePad = signaturePadContext.get();
+  let signaturePad = getSignaturePadContext();
 
   let mergedProps = $derived(
     mergeProps(props, signaturePad.getClearTriggerProps()),

package/dist/signature-pad/context.svelte.d.ts

@@ -1,3 +1,2 @@
-import { Context } from '../context.svelte.js';
 import type { CreateSignaturePadReturn } from './create-signature-pad.svelte.js';
-export declare const signaturePadContext: Context<CreateSignaturePadReturn>;
+export declare const getSignaturePadContext: () => CreateSignaturePadReturn, setSignaturePadContext: (context: CreateSignaturePadReturn | (() => CreateSignaturePadReturn)) => void;

package/dist/signature-pad/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../context.svelte.js';
-export const signaturePadContext = new Context('SignaturePad');
+import { createContext } from '../create-context.svelte.js';
+export const [getSignaturePadContext, setSignaturePadContext] = createContext('SignaturePad');

package/dist/signature-pad/control.svelte

@@ -8,11 +8,11 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {signaturePadContext} from './context.svelte.js';
+  import {getSignaturePadContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: SignaturePadControlProps = $props();
 
-  let signaturePad = signaturePadContext.get();
+  let signaturePad = getSignaturePadContext();
 
   let mergedProps = $derived(mergeProps(props, signaturePad.getControlProps()));
 </script>

package/dist/signature-pad/create-signature-pad.svelte.js

@@ -6,12 +6,14 @@ import { uid } from 'uid';
 export function createSignaturePad(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const [state, send] = useMachine(signaturePad.machine({
+    const id = uid();
+    const context = $derived(reflect(() => ({
         ...props,
-        id: props.id ?? uid(),
+        id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    }));
+    })));
+    const [state, send] = useMachine(signaturePad.machine(context), { context });
     const api = $derived(reflect(() => signaturePad.connect(state, send, normalizeProps)));
     return api;
 }