@destyler-ui/svelte 0.0.1-beta.17 → 0.0.1-beta.21

package/dist/components/dialog/components/Root.svelte

@@ -17,7 +17,14 @@
   import { DialogProvider } from '../hooks/use-dialog-context'
   import { useDialog } from '../hooks/use-dialog.svelte'
 
-  let { open = $bindable(), children, ...props }: DialogRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    open = $bindable(),
+    open: openProp,
+    children,
+    ...props
+  }: DialogRootProps = $props()
 
   const providedId = $props.id()
 
@@ -28,10 +35,10 @@
     return {
       ...localProps,
       id: localProps.id ?? providedId,
-      open,
+      open: openProp,
       onOpenChange(details) {
         localProps.onOpenChange?.(details)
-        if (open !== undefined) open = details.open
+        open = details.open
       },
     }
   })

package/dist/components/dialog/hooks/use-dialog.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Accessor } from '../../../types.js';
 import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import * as dialog from '@destyler/dialog';
-export interface UseDialogProps extends Omit<dialog.Context, 'getRootNode' | 'dir' | 'open.controlled' | 'id'> {
+export interface UseDialogProps extends Omit<dialog.Context, 'getRootNode' | 'dir' | 'id'> {
     id: string;
     defaultOpen?: dialog.Context['open'];
 }

package/dist/components/dynamic/components/Root.svelte

@@ -13,7 +13,15 @@
   import { DynamicProvider } from '../hooks/use-dynamic-context'
   import { useDynamic } from '../hooks/use-dynamic.svelte'
 
-  let { value = $bindable<string[]>(), inputValue = $bindable<string>(), ...props }: DynamicRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable<string[]>(),
+    value: valueProp,
+    inputValue = $bindable<string>(),
+    inputValue: inputValueProp,
+    ...props
+  }: DynamicRootProps = $props()
 
   const [useDynamicProps, localProps] = $derived(
     createSplitProps<Optional<UseDynamicProps, 'id'>>()(props, [
@@ -54,8 +62,8 @@
     return {
       ...useDynamicProps,
       id: useDynamicProps.id ?? providedId,
-      value,
-      inputValue,
+      value: valueProp,
+      inputValue: inputValueProp,
       onValueChange: (details) => {
         useDynamicProps.onValueChange?.(details)
         value = details.value

package/dist/components/dynamic/hooks/use-dynamic.svelte.js

@@ -13,19 +13,32 @@ export function useDynamic(inProps) {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
     const field = useFieldContext();
-    const machineProps = $derived.by(() => createMachineProps({
-        ids: {
-            label: field?.().ids.label,
-            hiddenInput: field?.().ids.control,
-        },
-        dir: locale().dir,
-        disabled: field?.().disabled,
-        invalid: field?.().invalid,
-        readOnly: field?.().readOnly,
-        required: field?.().required,
-        getRootNode: env().getRootNode,
-        ...props,
-    }, { value: 'defaultValue' }));
+    const machineProps = $derived.by(() => {
+        const { defaultValue, value, ...rest } = props;
+        const reactive = createMachineProps({
+            ids: {
+                label: field?.().ids.label,
+                hiddenInput: field?.().ids.control,
+            },
+            dir: locale().dir,
+            disabled: field?.().disabled,
+            invalid: field?.().invalid,
+            readOnly: field?.().readOnly,
+            required: field?.().required,
+            getRootNode: env().getRootNode,
+            ...rest,
+            ...(value !== undefined ? { value } : {}),
+        });
+        // @destyler/dynamic@0.2.7 stores value directly — seed defaults only once.
+        const initialValue = value !== undefined ? value : defaultValue;
+        return {
+            initial: {
+                ...reactive.initial,
+                ...(initialValue !== undefined ? { value: initialValue } : {}),
+            },
+            context: reactive.context,
+        };
+    });
     const [state, send] = useMachine(() => dynamic.machine(machineProps.initial), {
         get context() {
             return machineProps.context;

package/dist/components/edit/components/Root.svelte

@@ -13,7 +13,15 @@
   import { EditProvider } from '../hooks/use-edit-context'
   import { useEdit } from '../hooks/use-edit.svelte'
 
-  let { value = $bindable(), edit = $bindable(), ...props }: EditRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable(),
+    value: valueProp,
+    edit = $bindable(),
+    edit: editProp,
+    ...props
+  }: EditRootProps = $props()
 
   const providedId = $props.id()
 
@@ -23,16 +31,15 @@
     return {
       ...useEditProps,
       id: useEditProps.id ?? providedId,
-      value,
-      edit,
+      value: valueProp,
+      edit: editProp,
       onValueChange(details) {
         useEditProps.onValueChange?.(details)
         value = details.value
       },
       onEditChange(details) {
         useEditProps.onEditChange?.(details)
-        if (edit !== undefined)
-          edit = details.edit
+        edit = details.edit
       },
     }
   })

package/dist/components/edit/hooks/use-edit.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Accessor } from '../../../types.js';
 import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import * as edit from '@destyler/edit';
-export interface UseEditProps extends Omit<edit.Context, 'dir' | 'getRootNode' | 'edit.controlled' | 'id'> {
+export interface UseEditProps extends Omit<edit.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultEdit?: edit.Context['edit'];
     defaultValue?: edit.Context['value'];

package/dist/components/edit/hooks/use-edit.svelte.js

@@ -3,15 +3,21 @@ import { useEnvironmentContext } from '../../../providers/environment/index.js';
 import { useLocaleContext } from '../../../providers/locale/index.js';
 import { createMachineProps } from '../../../utils/create-machine-props.js';
 import { normalizeProps } from '../../../utils/normalize-props.js';
+import { createInputValueSync } from '../../../utils/sync-input-value.js';
 import * as edit from '@destyler/edit';
+import { mergeProps } from '@destyler/svelte';
 import { runIfFn } from '@destyler/utils';
+import { untrack } from 'svelte';
 import { useFieldContext } from '../../field/index.js';
 export function useEdit(props) {
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
     const field = useFieldContext();
+    // Core has no defaultEdit. The UI owns this state and writes edit requests back
+    // to core, while an explicit live edit prop remains owned by the caller.
+    let localEdit = $state(untrack(() => runIfFn(props).defaultEdit ?? false));
     const machineProps = $derived.by(() => {
-        const resolvedProps = runIfFn(props) || {};
+        const { defaultEdit: _defaultEdit, edit: liveEdit, onEditChange, ...resolvedProps } = runIfFn(props);
         return createMachineProps({
             getRootNode: env().getRootNode,
             dir: locale().dir,
@@ -24,13 +30,29 @@ export function useEdit(props) {
             readOnly: field?.()?.readOnly,
             required: field?.()?.required,
             ...resolvedProps,
-        }, { edit: 'defaultEdit', value: 'defaultValue' }, ['edit']);
+            edit: liveEdit !== undefined ? liveEdit : localEdit,
+            onEditChange(details) {
+                if (liveEdit === undefined)
+                    localEdit = details.edit;
+                onEditChange?.(details);
+            },
+        }, { value: 'defaultValue' });
     });
     const [state, send] = useMachine(() => edit.machine(machineProps.initial), {
         get context() {
             return machineProps.context;
         },
     });
-    const api = $derived(edit.connect(state, send, normalizeProps));
+    const connected = $derived(edit.connect(state, send, normalizeProps));
+    const syncInputValue = createInputValueSync(() => connected.getInputProps(), () => connected.value);
+    const api = $derived({
+        ...connected,
+        getInputProps() {
+            return mergeProps(connected.getInputProps(), {
+                oninput: syncInputValue,
+                oncompositionend: syncInputValue,
+            });
+        },
+    });
     return () => api;
 }

package/dist/components/floating-panel/components/Root.svelte

@@ -18,7 +18,17 @@
   import { FloatingPanelProvider } from '../hooks/use-floating-panel-context.js'
   import { useFloatingPanel } from '../hooks/use-floating-panel.svelte.js'
 
-  let { open = $bindable(), position = $bindable(), size = $bindable(), ...props }: FloatingPanelRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    open = $bindable(),
+    open: openProp,
+    position = $bindable(),
+    position: positionProp,
+    size = $bindable(),
+    size: sizeProp,
+    ...props
+  }: FloatingPanelRootProps = $props()
   const providedId = $props.id()
 
   const [presenceProps, otherProps] = $derived(splitPresenceProps(props))
@@ -53,20 +63,20 @@
   const resolvedProps = $derived<UseFloatingPanelProps>({
     ...floatingPanelProps,
     id: floatingPanelProps.id ?? providedId,
-    open,
+    open: openProp,
     onOpenChange(details) {
       floatingPanelProps.onOpenChange?.(details)
-      if (open !== undefined) open = details.open
+      open = details.open
     },
-    position,
+    position: positionProp,
     onPositionChange(details) {
       floatingPanelProps.onPositionChange?.(details)
-      if (position !== undefined) position = details.position
+      position = details.position
     },
-    size,
+    size: sizeProp,
     onSizeChange(details) {
       floatingPanelProps.onSizeChange?.(details)
-      if (size !== undefined) size = details.size
+      size = details.size
     },
   })
 

package/dist/components/floating-panel/hooks/use-floating-panel.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Accessor } from '../../../types.js';
 import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import * as floatingPanel from '@destyler/floating-panel';
-export interface UseFloatingPanelProps extends Omit<floatingPanel.Context, 'dir' | 'getRootNode' | 'open.controlled' | 'id'> {
+export interface UseFloatingPanelProps extends Omit<floatingPanel.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultOpen?: floatingPanel.Context['open'];
 }

package/dist/components/floating-panel/hooks/use-floating-panel.svelte.js

@@ -21,10 +21,5 @@ export function useFloatingPanel(props) {
         },
     });
     const api = $derived(floatingPanel.connect(state, send, normalizeProps));
-    $effect(() => {
-        const open = runIfFn(props).open;
-        if (open !== undefined && open !== api.open)
-            api.setOpen(open);
-    });
     return () => api;
 }

package/dist/components/hover-card/components/Root.svelte

@@ -16,7 +16,13 @@
   import { HoverCardProvider } from '../hooks/use-hover-card-context'
   import { useHoverCard } from '../hooks/use-hover-card.svelte'
 
-  let { open = $bindable<boolean>(), ...props }: HoverCardRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    open = $bindable<boolean>(),
+    open: openProp,
+    ...props
+  }: HoverCardRootProps = $props()
   const providedId = $props.id()
 
   const [presenceProps, localProps] = $derived(splitPresenceProps(props))
@@ -24,10 +30,10 @@
   const resolvedProps = $derived<UseHoverCardProps>({
     ...localProps,
     id: localProps.id ?? providedId,
-    open,
+    open: openProp,
     onOpenChange(details) {
       localProps.onOpenChange?.(details)
-      if (open !== undefined) open = details.open
+      open = details.open
     },
   })
 

package/dist/components/hover-card/hooks/use-hover-card.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Accessor } from '../../../types.js';
 import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import * as hoverCard from '@destyler/hover-card';
-export interface UseHoverCardProps extends Omit<hoverCard.Context, 'dir' | 'getRootNode' | 'open.controlled' | 'id'> {
+export interface UseHoverCardProps extends Omit<hoverCard.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultOpen?: hoverCard.Context['open'];
 }

package/dist/components/menu/components/CheckboxItem.svelte

@@ -17,7 +17,13 @@
   import { MenuItemProvider } from '../hooks/use-menu-item-context'
   import { MenuItemPropsProvider } from '../hooks/use-menu-option-item-props-context'
 
-  let { checked = $bindable<boolean>(), ...props }: MenuCheckboxItemProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    checked = $bindable<boolean>(),
+    checked: checkedProp,
+    ...props
+  }: MenuCheckboxItemProps = $props()
 
   const [partialOptionItemProps, localProps] = $derived(
     createSplitProps<CheckboxMachineProps>()(props, [
@@ -32,9 +38,9 @@
   const optionItemProps = $derived<OptionItemProps>({
     ...partialOptionItemProps,
     type: 'checkbox',
-    checked,
+    checked: checkedProp,
     onCheckedChange(nextChecked) {
-      if (checked !== undefined) checked = nextChecked
+      checked = nextChecked
       partialOptionItemProps.onCheckedChange?.(nextChecked)
     },
   })

package/dist/components/menu/components/RadioItemGroup.svelte

@@ -14,9 +14,12 @@
   import { useRequiredMenuContext } from '../hooks/use-menu-context'
   import { MenuItemGroupProvider, type ValueChangeDetails } from '../hooks/use-menu-item-group-context'
 
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
   let {
     id: providedId,
     value = $bindable<string>(),
+    value: valueProp,
     onValueChange,
     ...localProps
   }: MenuRadioItemGroupProps = $props()
@@ -25,9 +28,9 @@
   const menu = useRequiredMenuContext()
   const itemGroupProps = $derived({
     id: providedId ?? generatedId,
-    value,
+    value: valueProp,
     onValueChange(details: ValueChangeDetails) {
-      if (value !== undefined) value = details.value
+      value = details.value
       onValueChange?.(details)
     },
   })

package/dist/components/menu/components/Root.svelte

@@ -19,7 +19,13 @@
   import { MenuTriggerItemProvider } from '../hooks/use-menu-trigger-item-context'
   import { useMenu } from '../hooks/use-menu.svelte'
 
-  let { open = $bindable<boolean>(), ...props }: MenuRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    open = $bindable<boolean>(),
+    open: openProp,
+    ...props
+  }: MenuRootProps = $props()
   const providedId = $props.id()
 
   const [presenceProps, menuProps] = $derived(splitPresenceProps(props))
@@ -54,10 +60,10 @@
   const resolvedProps = $derived<UseMenuProps>({
     ...useMenuProps,
     id: useMenuProps.id ?? providedId,
-    open,
+    open: openProp,
     onOpenChange(details) {
       useMenuProps.onOpenChange?.(details)
-      if (open !== undefined) open = details.open
+      open = details.open
     },
   })
 

package/dist/components/menu/hooks/use-menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Accessor } from '../../../types.js';
 import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import * as menu from '@destyler/menu';
-export interface UseMenuProps extends Omit<menu.Context, 'dir' | 'getRootNode' | 'open.controlled' | 'id'> {
+export interface UseMenuProps extends Omit<menu.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
     defaultOpen?: menu.Context['open'];
 }

package/dist/components/navigation-menu/components/Root.svelte

@@ -16,7 +16,7 @@
   import { PresenceProvider, splitPresenceProps, usePresence } from '../../presence'
   import { createSplitProps } from '../../../utils/create-split-props'
 
-  let { ref = $bindable(null), value = $bindable(), ...props }: NavigationMenuRootProps = $props()
+  let { ref = $bindable(null), value: valueProp, value = $bindable(), ...props }: NavigationMenuRootProps = $props()
 
   const providedId = $props.id()
   const splitRootProps = createSplitProps<Optional<UseNavigationMenuProps, 'id'>>()
@@ -41,10 +41,10 @@
   const machineProps = $derived<UseNavigationMenuProps>({
     ...useNavigationMenuProps,
     id: useNavigationMenuProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       useNavigationMenuProps.onValueChange?.(details)
-      if (value !== undefined) value = details.value
+      value = details.value
     },
   })
 

package/dist/components/navigation-menu/hooks/connect-navigation-menu.d.ts

@@ -0,0 +1,10 @@
+import type { PropTypes } from '@destyler/svelte';
+import * as navigationMenu from '@destyler/navigation-menu';
+type ConnectParameters = Parameters<typeof navigationMenu.connect<PropTypes>>;
+/**
+ * Core 0.2.7 reads the trigger DOM to calculate content motion during render.
+ * Before mount (including hydration), return the same static content contract
+ * without a layout query. Keep the real core API for all mounted behavior.
+ */
+export declare function connectNavigationMenu(state: ConnectParameters[0], send: ConnectParameters[1], mounted: boolean): navigationMenu.Api<PropTypes>;
+export {};

package/dist/components/navigation-menu/hooks/connect-navigation-menu.js

@@ -0,0 +1,42 @@
+import { normalizeProps } from '../../../utils/normalize-props.js';
+import * as navigationMenu from '@destyler/navigation-menu';
+/**
+ * Core 0.2.7 reads the trigger DOM to calculate content motion during render.
+ * Before mount (including hydration), return the same static content contract
+ * without a layout query. Keep the real core API for all mounted behavior.
+ */
+export function connectNavigationMenu(state, send, mounted) {
+    const api = navigationMenu.connect(state, send, normalizeProps);
+    if (mounted)
+        return api;
+    const getContentState = props => ({
+        open: api.value === props.value,
+        motion: undefined,
+    });
+    return {
+        ...api,
+        getContentState,
+        getContentProps(props) {
+            const { value } = props;
+            const { open } = getContentState(props);
+            return normalizeProps.element({
+                ...navigationMenu.anatomy.build().content.attrs,
+                'id': state.context.ids?.content?.(value) ?? `nav-menu:${state.context.id}:content:${value}`,
+                'dir': state.context.dir,
+                'hidden': !open,
+                'data-state': open ? 'open' : 'closed',
+                'data-motion': undefined,
+                'data-value': value,
+                'data-orientation': state.context.orientation,
+                onPointerEnter(event) {
+                    if (event.pointerType === 'mouse')
+                        send({ type: 'CONTENT_ENTER', value });
+                },
+                onPointerLeave(event) {
+                    if (event.pointerType === 'mouse')
+                        send({ type: 'CONTENT_LEAVE', value });
+                },
+            });
+        },
+    };
+}

package/dist/components/navigation-menu/hooks/use-navigation-menu.svelte.d.ts

@@ -2,9 +2,8 @@ import type { Accessor } from '../../../types.js';
 import type { PropTypes } from '@destyler/svelte';
 import type { MaybeFunction } from '@destyler/utils';
 import * as navigationMenu from '@destyler/navigation-menu';
-export interface UseNavigationMenuProps extends Omit<navigationMenu.Context, 'dir' | 'getRootNode' | 'defaultValue' | 'value.controlled' | 'id'> {
+export interface UseNavigationMenuProps extends Omit<navigationMenu.Context, 'dir' | 'getRootNode' | 'id'> {
     id: string;
-    defaultValue?: string;
 }
 export interface UseNavigationMenuReturn extends Accessor<navigationMenu.Api<PropTypes>> {
 }

package/dist/components/navigation-menu/hooks/use-navigation-menu.svelte.js

@@ -1,42 +1,32 @@
 import { useMachine } from '../../../hooks/use-destyler-machine.svelte.js';
 import { useEnvironmentContext } from '../../../providers/environment/index.js';
 import { useLocaleContext } from '../../../providers/locale/index.js';
-import { normalizeProps } from '../../../utils/normalize-props.js';
+import { createMachineProps } from '../../../utils/create-machine-props.js';
 import * as navigationMenu from '@destyler/navigation-menu';
 import { runIfFn } from '@destyler/utils';
+import { connectNavigationMenu } from './connect-navigation-menu.js';
 export function useNavigationMenu(props) {
+    let mounted = $state(false);
+    $effect(() => {
+        mounted = true;
+    });
     const env = useEnvironmentContext();
     const locale = useLocaleContext();
     const machineProps = $derived.by(() => {
         const resolvedProps = runIfFn(props) || {};
-        const baseProps = {
+        return createMachineProps({
             dir: locale().dir,
             getRootNode: env().getRootNode,
             ...resolvedProps,
-        };
-        const controlled = resolvedProps.value !== undefined;
-        const initialValue = controlled ? resolvedProps.value : (resolvedProps.defaultValue ?? null);
-        const initialDefaultValue = controlled ? (resolvedProps.value ?? undefined) : resolvedProps.defaultValue;
-        return {
-            initial: {
-                ...baseProps,
-                'defaultValue': initialDefaultValue,
-                'value': initialValue,
-                'value.controlled': controlled,
-            },
-            context: {
-                ...baseProps,
-                'defaultValue': initialDefaultValue,
-                'value': resolvedProps.value,
-                'value.controlled': controlled,
-            },
-        };
+            // null explicitly closes the menu; only undefined permits the default seed.
+            defaultValue: resolvedProps.value !== undefined ? undefined : resolvedProps.defaultValue,
+        });
     });
     const [state, send] = useMachine(() => navigationMenu.machine(machineProps.initial), {
         get context() {
             return machineProps.context;
         },
     });
-    const api = $derived(navigationMenu.connect(state, send, normalizeProps));
+    const api = $derived(connectNavigationMenu(state, send, mounted));
     return () => api;
 }

package/dist/components/number-input/components/Root.svelte

@@ -15,7 +15,13 @@
   import { splitNumberInputProps } from '../hooks/split-number-input-props.svelte'
   import { useNumberInput } from '../hooks/use-number-input.svelte'
 
-  let { value = $bindable(), ...props }: NumberInputRootProps = $props()
+  // Read the parent prop independently from the writable binding. Local writes
+  // notify bind: consumers without overriding ordinary controlled props.
+  let {
+    value = $bindable(),
+    value: valueProp,
+    ...props
+  }: NumberInputRootProps = $props()
   const providedId = $props.id()
 
   const [useNumberInputProps, localProps] = $derived(splitNumberInputProps(props))
@@ -23,7 +29,7 @@
   const resolvedProps = $derived<UseNumberInputProps>({
     ...useNumberInputProps,
     id: useNumberInputProps.id ?? providedId,
-    value,
+    value: valueProp,
     onValueChange(details) {
       useNumberInputProps.onValueChange?.(details)
       value = details.value