ui-ingredients 0.0.43 → 0.0.45

package/dist/floating-panel/maximize-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MaximizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelMaximizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type MaximizeTrigger = InstanceType<typeof MaximizeTrigger>;
+export default MaximizeTrigger;

package/dist/floating-panel/minimize-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelMinimizeTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelMinimizeTriggerProps =
+    $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getMinimizeTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/minimize-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MinimizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelMinimizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type MinimizeTrigger = InstanceType<typeof MinimizeTrigger>;
+export default MinimizeTrigger;

package/dist/floating-panel/positioner.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelPositionerProps
+    extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelPositionerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      floatingPanel.getPositionerProps(),
+      presence.getPresenceProps(),
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/floating-panel/positioner.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Positioner: $$__sveltets_2_IsomorphicComponent<FloatingPanelPositionerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Positioner = InstanceType<typeof Positioner>;
+export default Positioner;

package/dist/floating-panel/resize-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ResizeTriggerProps} from '@zag-js/floating-panel';
+
+  export interface FloatingPanelResizeTriggerProps
+    extends Assign<HtmlIngredientProps<'button'>, ResizeTriggerProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelResizeTriggerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let [resizeTriggerProps, localProps] = $derived(
+    createSplitProps<ResizeTriggerProps>([])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      localProps,
+      floatingPanel.getResizeTriggerProps(resizeTriggerProps),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/resize-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ResizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelResizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ResizeTrigger = InstanceType<typeof ResizeTrigger>;
+export default ResizeTrigger;

package/dist/floating-panel/restore-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelRestoreTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelRestoreTriggerProps =
+    $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getRestoreTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/restore-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RestoreTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelRestoreTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type RestoreTrigger = InstanceType<typeof RestoreTrigger>;
+export default RestoreTrigger;

package/dist/floating-panel/root.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateFloatingPanelProps,
+    CreateFloatingPanelReturn,
+  } from './create-floating-panel.svelte.js';
+
+  export interface FloatingPanelProps
+    extends CreateFloatingPanelProps,
+      PresenceStrategyProps {
+    children?: Snippet<[CreateFloatingPanelReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setFloatingPanelContext} from './context.svelte.js';
+  import {createFloatingPanel} from './create-floating-panel.svelte.js';
+
+  let {children, ...props}: FloatingPanelProps = $props();
+
+  let [presenceStrategyProps, floatingPanelProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let floatingPanel = createFloatingPanel(reflect(() => floatingPanelProps));
+
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: floatingPanel.open,
+    })),
+  );
+
+  setFloatingPanelContext(floatingPanel);
+  setPresenceContext(presence);
+</script>
+
+{@render children?.(floatingPanel)}

package/dist/floating-panel/root.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<FloatingPanelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/floating-panel/title.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelTitleProps
+    extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelTitleProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(mergeProps(props, floatingPanel.getTitleProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/floating-panel/title.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Title: $$__sveltets_2_IsomorphicComponent<FloatingPanelTitleProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Title = InstanceType<typeof Title>;
+export default Title;

package/dist/floating-panel/trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelTriggerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Trigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Trigger = InstanceType<typeof Trigger>;
+export default Trigger;

package/dist/highlight/highlight.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {HighlightWordProps} from '@zag-js/highlight-word';
+
+  export interface HighlightProps
+    extends Assign<
+      Omit<HtmlIngredientProps<'div'>, 'children'>,
+      HighlightWordProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {highlightWord} from '@zag-js/highlight-word';
+  import {createSplitProps} from '@zag-js/utils';
+
+  let {asChild, ...props}: HighlightProps = $props();
+
+  let [highlightProps, localProps] = $derived(
+    createSplitProps<HighlightWordProps>([
+      'text',
+      'query',
+      'matchAll',
+      'ignoreCase',
+    ])(props),
+  );
+
+  let chunks = $derived(highlightWord(highlightProps));
+</script>
+
+{#if asChild}
+  {@render asChild(localProps)}
+{:else}
+  <div {...localProps}>
+    {#each chunks as chunk}
+      {#if chunk.match}
+        <mark>{chunk.text}</mark>
+      {:else}
+        {chunk.text}
+      {/if}
+    {/each}
+  </div>
+{/if}

package/dist/highlight/highlight.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Highlight: $$__sveltets_2_IsomorphicComponent<HighlightProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Highlight = InstanceType<typeof Highlight>;
+export default Highlight;

package/dist/highlight/index.d.ts

@@ -0,0 +1 @@
+export { default as Highlight, type HighlightProps } from './highlight.svelte';

package/dist/highlight/index.js

@@ -0,0 +1 @@
+export { default as Highlight } from './highlight.svelte';

package/dist/hover-card/create-hover-card.svelte.js

@@ -7,15 +7,14 @@ export function createHoverCard(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(hoverCard.machine(context), { context });
-    const api = $derived(reflect(() => hoverCard.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => hoverCard.connect(state, send, normalizeProps));
 }

package/dist/hover-card/root.svelte

@@ -38,17 +38,12 @@
 
   let hoverCard = createHoverCard(reflect(() => hoverCardProps));
 
-  let presence = createPresence({
-    get present() {
-      return hoverCard.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: hoverCard.open,
+    })),
+  );
 
   setHoverCardContext(hoverCard);
   setPresenceContext(presence);

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export * from './editable/index.js';
 export * from './environment-provider/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
+export * from './floating-panel/index.js';
+export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
@@ -39,4 +41,5 @@ export * from './timer/index.js';
 export * from './toast/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';
+export * from './tour/index.js';
 export * from './tree-view/index.js';

package/dist/index.js

@@ -12,6 +12,8 @@ export * from './editable/index.js';
 export * from './environment-provider/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
+export * from './floating-panel/index.js';
+export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
@@ -39,4 +41,5 @@ export * from './timer/index.js';
 export * from './toast/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';
+export * from './tour/index.js';
 export * from './tree-view/index.js';

package/dist/is-object.d.ts

@@ -0,0 +1,2 @@
+import type { GenericObject } from './types.js';
+export declare function isObject<T extends GenericObject>(value: unknown): value is T;

package/dist/is-object.js

@@ -0,0 +1,4 @@
+export function isObject(value) {
+    return (Object.prototype.toString.call(value) === '[object Object]' &&
+        value === Object(value));
+}

package/dist/locale-provider/root.svelte

@@ -8,17 +8,19 @@
 </script>
 
 <script lang="ts">
-  import {isRTL, type Locale} from '@zag-js/i18n-utils';
+  import {isRTL} from '@zag-js/i18n-utils';
   import {setLocaleContext} from './context.svelte.js';
 
   let {children, ...props}: LocaleProviderProps = $props();
 
-  let locale: Locale = $derived({
-    locale: props.locale,
-    dir: isRTL(props.locale) ? 'rtl' : 'ltr',
+  setLocaleContext({
+    get locale() {
+      return props.locale;
+    },
+    get dir() {
+      return isRTL(props.locale) ? 'rtl' : 'ltr';
+    },
   });
-
-  setLocaleContext(() => locale);
 </script>
 
 {@render children()}

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

@@ -7,15 +7,14 @@ export function createMenu(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(menu.machine(context), { context });
-    const api = $derived(reflect(() => menu.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => menu.connect(state, send, normalizeProps));
 }

package/dist/menu/item.svelte

@@ -15,7 +15,7 @@
 
   let menu = getMenuContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>([
       'value',
       'valueText',
@@ -26,7 +26,7 @@
 
   let itemState = $derived(menu.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, menu.getItemProps(itemProps)),
+    mergeProps(localProps, menu.getItemProps(itemProps)),
   );
 </script>
 

package/dist/menu/option-item.svelte

@@ -21,7 +21,7 @@
 
   let menu = getMenuContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<OptionItemProps>([
       'type',
       'value',
@@ -36,7 +36,7 @@
   let itemState = $derived(menu.getOptionItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, menu.getOptionItemProps(itemProps)),
+    mergeProps(localProps, menu.getOptionItemProps(itemProps)),
   );
 
   setMenuOptionItemPropsContext(() => itemProps);

package/dist/menu/root.svelte

@@ -48,18 +48,12 @@
   );
 
   let menu = createMenu(reflect(() => menuProps));
-
-  let presence = createPresence({
-    get present() {
-      return menu.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: menu.open,
+    })),
+  );
 
   setMenuContext(menu);
   setPresenceContext(presence);

package/dist/merge-props.js

@@ -1,8 +1,5 @@
 import { mergeProps as fn } from '@zag-js/svelte';
-function isObject(value) {
-    return (Object.prototype.toString.call(value) === '[object Object]' &&
-        value === Object(value));
-}
+import { isObject } from './is-object.js';
 export function mergeProps(...args) {
     const r = fn(...args);
     const i = 'style';