@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/SharedElementTransition.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"SharedElementTransition.jsx","names":[],"sources":["../src/SharedElementTransition.tsx"],"sourcesContent":["/**\n * SharedElementTransition primitives for solidaria-components.\n *\n * Provides FLIP-based shared element animations when elements move between\n * parents within a scope. Captures geometry snapshots on unmount and applies\n * transition animations on mount.\n *\n * Parity target: react-aria-components/src/SharedElementTransition.tsx\n */\n\nimport {\n  type JSX,\n  createContext,\n  createEffect,\n  createMemo,\n  createRenderEffect,\n  createSignal,\n  onCleanup,\n  splitProps,\n  untrack,\n  useContext,\n  Show,\n  on,\n} from \"solid-js\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype SharedElementLifecycle = \"hidden\" | \"entering\" | \"visible\" | \"exiting\";\n\n/** Safe wrapper — jsdom doesn't implement the Web Animations API. */\nfunction getAnimations(el: HTMLElement): Animation[] {\n  return typeof el.getAnimations === \"function\" ? el.getAnimations() : [];\n}\n\ninterface Snapshot {\n  rect: DOMRect;\n  style: [string, string][];\n}\n\ninterface SharedElementScope {\n  snapshots: { [name: string]: Snapshot };\n}\n\nconst SharedElementContext = createContext<SharedElementScope | null>(null);\n\nexport function useHasSharedElementTransitionScope(): boolean {\n  return useContext(SharedElementContext) != null;\n}\n\nexport interface SharedElementTransitionProps {\n  children?: JSX.Element;\n}\n\n/**\n * A scope for SharedElements, which animate between parents.\n */\nexport function SharedElementTransition(props: SharedElementTransitionProps): JSX.Element {\n  const scope: SharedElementScope = {\n    snapshots: {},\n  };\n\n  return (\n    <SharedElementContext.Provider value={scope}>{props.children}</SharedElementContext.Provider>\n  );\n}\n\nexport interface SharedElementRenderProps {\n  isEntering: boolean;\n  isExiting: boolean;\n}\n\nexport interface SharedElementPropsBase extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"class\" | \"style\" | \"ref\"\n> {\n  children?: RenderChildren<SharedElementRenderProps>;\n  class?: ClassNameOrFunction<SharedElementRenderProps>;\n  style?: StyleOrFunction<SharedElementRenderProps>;\n}\n\nexport interface SharedElementProps extends SharedElementPropsBase {\n  name: string;\n  isVisible?: boolean;\n  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement };\n}\n\n/**\n * An element that animates between its old and new position when moving\n * between parents within a SharedElementTransition scope.\n */\nexport function SharedElement(props: SharedElementProps): JSX.Element | null {\n  const scope = useContext(SharedElementContext);\n  if (!scope) {\n    throw new Error(\"<SharedElement> must be rendered inside a <SharedElementTransition>\");\n  }\n\n  const [local, domProps] = splitProps(props, [\n    \"name\",\n    \"isVisible\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const [lifecycle, setLifecycle] = createSignal<SharedElementLifecycle>(\n    local.isVisible === false ? \"hidden\" : \"visible\",\n  );\n\n  // The mounted div, tracked as a signal so the FLIP-read effect below REACTS to\n  // it appearing. React guarantees `ref.current` is committed before the layout\n  // effect body runs; Solid gives no such ordering between the `<Show>`'s\n  // insertion render-effect and a plain createEffect, so we make the read depend\n  // on the element instead of racing its mount (see READ PHASE).\n  const [element, setElement] = createSignal<HTMLDivElement | undefined>();\n  let frame: number | undefined;\n\n  const setRef = (el: HTMLDivElement) => {\n    setElement(el);\n    // Forward ref to consumer\n    const userRef = local.ref;\n    if (typeof userRef === \"function\") {\n      userRef(el);\n    } else if (userRef !== undefined) {\n      userRef.current = el;\n    }\n  };\n\n  // Store a geometry + transition-style snapshot of the currently-mounted\n  // element, so a sibling SharedElement with the same `name` can FLIP from it.\n  // Mirrors upstream's layout-effect *cleanup*\n  // (react-aria-components/src/SharedElementTransition.tsx), which runs for\n  // every `isVisible` flip — not only on unmount.\n  const storeSnapshot = () => {\n    const el = untrack(element);\n    if (el && el.isConnected && !el.hasAttribute(\"data-exiting\")) {\n      // Store a snapshot of the rectangle and computed style for transitioning properties.\n      const style = window.getComputedStyle(el);\n      if (style.transitionProperty !== \"none\") {\n        const transitionProperty = style.transitionProperty.split(/\\s*,\\s*/);\n        scope.snapshots[local.name] = {\n          rect: el.getBoundingClientRect(),\n          style: transitionProperty.map((property) => [property, style.getPropertyValue(property)]),\n        };\n      }\n    }\n  };\n\n  // MOUNT-IN-RENDER — mirrors upstream's render-phase\n  // `if (isVisible && state === 'hidden') setState('visible')`. Promoting a\n  // hidden element to visible in the render phase mounts its div (via the\n  // `<Show>` below) BEFORE the FLIP-read createEffect runs, so the incoming\n  // element is in the DOM to be measured and translated. Without this the\n  // incoming element's ref is still null when the read effect fires and it can\n  // only enter fresh — never FLIP. Keyed on `isVisible` (untracked lifecycle\n  // read) so it cannot loop.\n  createRenderEffect(\n    on(\n      () => local.isVisible !== false,\n      (isVisible) => {\n        if (isVisible && untrack(lifecycle) === \"hidden\") {\n          setLifecycle(\"visible\");\n        }\n      },\n    ),\n  );\n\n  // STORE PHASE — a render effect runs before user effects within a Solid\n  // batch, exactly as React runs all layout-effect destroys before any create.\n  // The cleanup registered here fires on the *next* `isVisible` change (and on\n  // disposal), capturing the outgoing snapshot BEFORE any sibling's FLIP-read\n  // createEffect below runs — React's two-phase commit. Only the cleanup\n  // registered while VISIBLE stores (an outgoing element); an incoming\n  // element's prior cleanup was registered while hidden and must not clobber\n  // the outgoing snapshot. This mirrors React closing over `element =\n  // ref.current`, which is null while hidden.\n  createRenderEffect(\n    on(\n      () => local.isVisible !== false,\n      (isVisible) => {\n        onCleanup(() => {\n          if (isVisible) {\n            storeSnapshot();\n          }\n        });\n      },\n    ),\n  );\n\n  // READ PHASE — mirrors upstream's layout-effect body, which reads the freshly\n  // committed `ref.current`. Keying on the `element` signal (not just isVisible)\n  // makes this run only once the incoming div is actually mounted: when isVisible\n  // flips true the mount-in-render effect above mounts the div, `setRef` sets the\n  // signal, and this effect runs with `el` present — never against a null ref.\n  // (Solid batches, so an isVisible flip + the resulting mount coalesce into one\n  // run with the mounted element.) There is therefore no \"element not yet in DOM\"\n  // fresh-enter branch: with no committed div there is nothing to measure, so we\n  // wait — exactly as React never runs the body before commit.\n  createEffect(\n    on(\n      [() => local.isVisible !== false, element] as const,\n      ([isVisible, el]) => {\n        const name = local.name;\n\n        if (frame != null) {\n          cancelAnimationFrame(frame);\n          frame = undefined;\n        }\n\n        if (isVisible && el) {\n          const prevSnapshot = scope.snapshots[name];\n\n          if (prevSnapshot) {\n            // FLIP: Element is transitioning from a previous instance.\n            setLifecycle(\"visible\");\n            const animations = getAnimations(el);\n\n            // Set properties to animate from.\n            const values = prevSnapshot.style.map(([property, prevValue]) => {\n              const value = el.style.getPropertyValue(property);\n              if (property === \"translate\") {\n                const prevRect = prevSnapshot.rect;\n                const currentRect = el.getBoundingClientRect();\n                const deltaX = prevRect.left - currentRect.left;\n                const deltaY = prevRect.top - currentRect.top;\n                el.style.setProperty(\"translate\", `${deltaX}px ${deltaY}px`);\n              } else {\n                el.style.setProperty(property, prevValue);\n              }\n              return [property, value] as [string, string];\n            });\n\n            // Cancel any new animations triggered by these properties.\n            for (const a of getAnimations(el)) {\n              if (!animations.includes(a)) {\n                a.cancel();\n              }\n            }\n\n            // Remove overrides after one frame to animate to the current values.\n            frame = requestAnimationFrame(() => {\n              frame = undefined;\n              for (const [property, value] of values) {\n                el.style.setProperty(property, value);\n              }\n            });\n\n            delete scope.snapshots[name];\n          } else {\n            // No previous instance exists, apply the entering state.\n            queueMicrotask(() => setLifecycle(\"entering\"));\n            frame = requestAnimationFrame(() => {\n              frame = undefined;\n              setLifecycle(\"visible\");\n            });\n          }\n        } else if (!isVisible && el) {\n          // Wait a microtask to check if a snapshot still exists (meaning no new\n          // SharedElement consumed it), then enter exiting state.\n          queueMicrotask(() => {\n            if (scope.snapshots[name]) {\n              delete scope.snapshots[name];\n              setLifecycle(\"exiting\");\n              // Wait for animations to finish before hiding.\n              Promise.all(getAnimations(el).map((a) => a.finished))\n                .then(() => setLifecycle(\"hidden\"))\n                .catch(() => {});\n            } else {\n              // Snapshot was consumed by another instance, unmount immediately.\n              setLifecycle(\"hidden\");\n            }\n          });\n        }\n      },\n    ),\n  );\n\n  // Cancel any pending FLIP frame on disposal. The snapshot store lives in the\n  // render-effect cleanup above, which also fires on disposal.\n  onCleanup(() => {\n    if (frame != null) {\n      cancelAnimationFrame(frame);\n    }\n  });\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-SharedElement\",\n    },\n    () => ({\n      isEntering: lifecycle() === \"entering\",\n      isExiting: lifecycle() === \"exiting\",\n    }),\n  );\n\n  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));\n\n  return (\n    <Show when={lifecycle() !== \"hidden\"}>\n      <div\n        ref={setRef}\n        {...filteredDomProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-entering={lifecycle() === \"entering\" || undefined}\n        data-exiting={lifecycle() === \"exiting\" || undefined}\n      >\n        {renderProps.renderChildren()}\n      </div>\n    </Show>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCA,SAAS,cAAc,IAA8B;CACnD,OAAO,OAAO,GAAG,kBAAkB,aAAa,GAAG,cAAc,IAAI,CAAC;AACxE;AAWA,MAAM,uBAAuB,cAAyC,IAAI;AAE1E,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,oBAAoB,KAAK;AAC7C;;;;AASA,SAAgB,wBAAwB,OAAkD;CACxF,MAAM,QAA4B,EAChC,WAAW,CAAC,EACd;CAEA,OACE,CAAC,qBAAqB,SAAS,OAAO,QAAQ,MAAM,SAAS,EAAE,qBAAqB;AAExF;;;;;AA0BA,SAAgB,cAAc,OAA+C;CAC3E,MAAM,QAAQ,WAAW,oBAAoB;CAC7C,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,qEAAqE;CAGvF,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,WAAW,gBAAgB,aAChC,MAAM,cAAc,QAAQ,WAAW,SACzC;CAOA,MAAM,CAAC,SAAS,cAAc,aAAyC;CACvE,IAAI;CAEJ,MAAM,UAAU,OAAuB;EACrC,WAAW,EAAE;EAEb,MAAM,UAAU,MAAM;EACtB,IAAI,OAAO,YAAY,YACrB,QAAQ,EAAE;OACL,IAAI,YAAY,KAAA,GACrB,QAAQ,UAAU;CAEtB;CAOA,MAAM,sBAAsB;EAC1B,MAAM,KAAK,QAAQ,OAAO;EAC1B,IAAI,MAAM,GAAG,eAAe,CAAC,GAAG,aAAa,cAAc,GAAG;GAE5D,MAAM,QAAQ,OAAO,iBAAiB,EAAE;GACxC,IAAI,MAAM,uBAAuB,QAAQ;IACvC,MAAM,qBAAqB,MAAM,mBAAmB,MAAM,SAAS;IACnE,MAAM,UAAU,MAAM,QAAQ;KAC5B,MAAM,GAAG,sBAAsB;KAC/B,OAAO,mBAAmB,KAAK,aAAa,CAAC,UAAU,MAAM,iBAAiB,QAAQ,CAAC,CAAC;IAC1F;GACF;EACF;CACF;CAUA,mBACE,SACQ,MAAM,cAAc,QACzB,cAAc;EACb,IAAI,aAAa,QAAQ,SAAS,MAAM,UACtC,aAAa,SAAS;CAE1B,CACF,CACF;CAWA,mBACE,SACQ,MAAM,cAAc,QACzB,cAAc;EACb,gBAAgB;GACd,IAAI,WACF,cAAc;EAElB,CAAC;CACH,CACF,CACF;CAWA,aACE,GACE,OAAO,MAAM,cAAc,OAAO,OAAO,IACxC,CAAC,WAAW,QAAQ;EACnB,MAAM,OAAO,MAAM;EAEnB,IAAI,SAAS,MAAM;GACjB,qBAAqB,KAAK;GAC1B,QAAQ,KAAA;EACV;EAEA,IAAI,aAAa,IAAI;GACnB,MAAM,eAAe,MAAM,UAAU;GAErC,IAAI,cAAc;IAEhB,aAAa,SAAS;IACtB,MAAM,aAAa,cAAc,EAAE;IAGnC,MAAM,SAAS,aAAa,MAAM,KAAK,CAAC,UAAU,eAAe;KAC/D,MAAM,QAAQ,GAAG,MAAM,iBAAiB,QAAQ;KAChD,IAAI,aAAa,aAAa;MAC5B,MAAM,WAAW,aAAa;MAC9B,MAAM,cAAc,GAAG,sBAAsB;MAC7C,MAAM,SAAS,SAAS,OAAO,YAAY;MAC3C,MAAM,SAAS,SAAS,MAAM,YAAY;MAC1C,GAAG,MAAM,YAAY,aAAa,GAAG,OAAO,KAAK,OAAO,GAAG;KAC7D,OACE,GAAG,MAAM,YAAY,UAAU,SAAS;KAE1C,OAAO,CAAC,UAAU,KAAK;IACzB,CAAC;IAGD,KAAK,MAAM,KAAK,cAAc,EAAE,GAC9B,IAAI,CAAC,WAAW,SAAS,CAAC,GACxB,EAAE,OAAO;IAKb,QAAQ,4BAA4B;KAClC,QAAQ,KAAA;KACR,KAAK,MAAM,CAAC,UAAU,UAAU,QAC9B,GAAG,MAAM,YAAY,UAAU,KAAK;IAExC,CAAC;IAED,OAAO,MAAM,UAAU;GACzB,OAAO;IAEL,qBAAqB,aAAa,UAAU,CAAC;IAC7C,QAAQ,4BAA4B;KAClC,QAAQ,KAAA;KACR,aAAa,SAAS;IACxB,CAAC;GACH;EACF,OAAO,IAAI,CAAC,aAAa,IAGvB,qBAAqB;GACnB,IAAI,MAAM,UAAU,OAAO;IACzB,OAAO,MAAM,UAAU;IACvB,aAAa,SAAS;IAEtB,QAAQ,IAAI,cAAc,EAAE,CAAC,CAAC,KAAK,MAAM,EAAE,QAAQ,CAAC,CAAC,CAClD,WAAW,aAAa,QAAQ,CAAC,CAAC,CAClC,YAAY,CAAC,CAAC;GACnB,OAEE,aAAa,QAAQ;EAEzB,CAAC;CAEL,CACF,CACF;CAIA,gBAAgB;EACd,IAAI,SAAS,MACX,qBAAqB,KAAK;CAE9B,CAAC;CAED,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO;EACL,YAAY,UAAU,MAAM;EAC5B,WAAW,UAAU,MAAM;CAC7B,EACF;CAEA,MAAM,mBAAmB,iBAAiB,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC,CAAC;CAEpF,OACE,CAAC,KAAK,MAAM,UAAU,MAAM,UAAU;MACpC,CAAC,IACC,KAAK,YACD,iBAAiB,GACrB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,eAAe,UAAU,MAAM,cAAc,KAAA,GAC7C,cAAc,UAAU,MAAM,aAAa,KAAA,GAC5C;SACE,YAAY,eAAe,EAAE;MAChC,EAAE,IAAI;IACR,EAAE;AAEN"}
+{"version":3,"file":"SharedElementTransition.jsx","names":[],"sources":["../src/SharedElementTransition.tsx"],"sourcesContent":["/*\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/SharedElementTransition.tsx\n\n/**\n * SharedElementTransition primitives for solidaria-components.\n *\n * Provides FLIP-based shared element animations when elements move between\n * parents within a scope. Captures geometry snapshots on unmount and applies\n * transition animations on mount.\n *\n * Based on packages/react-aria-components/src/SharedElementTransition.tsx.\n */\n\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createRenderEffect,\n  createSignal,\n  onCleanup,\n  untrack,\n  useContext,\n  Show,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n} from \"./utils\";\n\ntype SharedElementLifecycle = \"hidden\" | \"entering\" | \"visible\" | \"exiting\";\n\n/** Safe wrapper — jsdom doesn't implement the Web Animations API. */\nfunction getAnimations(el: HTMLElement): Animation[] {\n  return typeof el.getAnimations === \"function\" ? el.getAnimations() : [];\n}\n\ninterface Snapshot {\n  rect: DOMRect;\n  style: [string, string][];\n}\n\ninterface SharedElementScope {\n  snapshots: { [name: string]: Snapshot };\n}\n\nconst SharedElementContext = createContext<SharedElementScope | null>(null);\n\nexport function useHasSharedElementTransitionScope(): boolean {\n  return useContext(SharedElementContext) != null;\n}\n\nexport interface SharedElementTransitionProps {\n  children?: JSX.Element;\n}\n\n/**\n * A scope for SharedElements, which animate between parents.\n */\nexport function SharedElementTransition(props: SharedElementTransitionProps): JSX.Element {\n  const scope: SharedElementScope = {\n    snapshots: {},\n  };\n\n  return <SharedElementContext value={scope}>{props.children}</SharedElementContext>;\n}\n\nexport interface SharedElementRenderProps {\n  isEntering: boolean;\n  isExiting: boolean;\n}\n\nexport interface SharedElementPropsBase extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"class\" | \"style\" | \"ref\"\n> {\n  children?: RenderChildren<SharedElementRenderProps>;\n  class?: ClassNameOrFunction<SharedElementRenderProps>;\n  style?: StyleOrFunction<SharedElementRenderProps>;\n}\n\nexport interface SharedElementProps extends SharedElementPropsBase {\n  name: string;\n  isVisible?: boolean;\n  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement };\n}\n\n/**\n * An element that animates between its old and new position when moving\n * between parents within a SharedElementTransition scope.\n */\nexport function SharedElement(props: SharedElementProps): JSX.Element | null {\n  const scope = useContext(SharedElementContext);\n  if (!scope) {\n    throw new Error(\"<SharedElement> must be rendered inside a <SharedElementTransition>\");\n  }\n\n  const [local, domProps] = splitProps(props, [\n    \"name\",\n    \"isVisible\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const [lifecycle, setLifecycle] = createSignal<SharedElementLifecycle>(\n    untrack(() => (local.isVisible === false ? \"hidden\" : \"visible\")),\n  );\n  // Fresh-enter (data-entering) is only for elements that were hidden and then\n  // shown. An element that starts visible must not queue the enter microtask on\n  // first mount — that microtask would otherwise fire after a later hide and\n  // resurrect the outgoing node as `data-entering`.\n  let pendingFreshEnter = false;\n\n  // The mounted div, tracked as a signal so the FLIP-read effect below REACTS to\n  // it appearing. React guarantees `ref.current` is committed before the layout\n  // effect body runs; Solid gives no such ordering between the `<Show>`'s\n  // insertion render-effect and a plain createEffect, so we make the read depend\n  // on the element instead of racing its mount (see READ PHASE).\n  const [element, setElement] = createSignal<HTMLDivElement | undefined>(undefined, {\n    ownedWrite: true,\n  });\n  let frame: number | undefined;\n\n  const setRef = (el: HTMLDivElement) => {\n    setElement(el);\n    // Forward ref to consumer\n    const userRef = local.ref;\n    if (typeof userRef === \"function\") {\n      userRef(el);\n    } else if (userRef !== undefined) {\n      userRef.current = el;\n    }\n  };\n\n  // Store a geometry + transition-style snapshot of the currently-mounted\n  // element, so a sibling SharedElement with the same `name` can FLIP from it.\n  // Mirrors upstream's layout-effect *cleanup*\n  // (react-aria-components/src/SharedElementTransition.tsx), which runs for\n  // every `isVisible` flip — not only on unmount.\n  const storeSnapshot = () => {\n    const el = untrack(element);\n    if (el && el.isConnected && !el.hasAttribute(\"data-exiting\")) {\n      // Store a snapshot of the rectangle and computed style for transitioning properties.\n      const style = window.getComputedStyle(el);\n      if (style.transitionProperty !== \"none\") {\n        const transitionProperty = style.transitionProperty.split(/\\s*,\\s*/);\n        scope.snapshots[local.name] = {\n          rect: el.getBoundingClientRect(),\n          style: transitionProperty.map((property) => [property, style.getPropertyValue(property)]),\n        };\n      }\n    }\n  };\n\n  // MOUNT-IN-RENDER — mirrors upstream's render-phase\n  // `if (isVisible && state === 'hidden') setState('visible')`. Promoting a\n  // hidden element to visible in the render phase mounts its div (via the\n  // `<Show>` below) BEFORE the FLIP-read createEffect runs, so the incoming\n  // element is in the DOM to be measured and translated. Without this the\n  // incoming element's ref is still null when the read effect fires and it can\n  // only enter fresh — never FLIP. Keyed on `isVisible` (untracked lifecycle\n  // read) so it cannot loop.\n  createRenderEffect(\n    () => local.isVisible !== false,\n    (isVisible) => {\n      if (isVisible && untrack(lifecycle) === \"hidden\") {\n        pendingFreshEnter = true;\n        setLifecycle(\"visible\");\n      }\n    },\n  );\n\n  // STORE PHASE — a render effect runs before user effects within a Solid\n  // batch, exactly as React runs all layout-effect destroys before any create.\n  // The cleanup registered here fires on the *next* `isVisible` change (and on\n  // disposal), capturing the outgoing snapshot BEFORE any sibling's FLIP-read\n  // createEffect below runs — React's two-phase commit. Only the cleanup\n  // registered while VISIBLE stores (an outgoing element); an incoming\n  // element's prior cleanup was registered while hidden and must not clobber\n  // the outgoing snapshot. This mirrors React closing over `element =\n  // ref.current`, which is null while hidden.\n  createRenderEffect(\n    () => local.isVisible !== false,\n    (isVisible) => {\n      return () => {\n        if (isVisible) {\n          storeSnapshot();\n        }\n      };\n    },\n  );\n\n  // READ PHASE — mirrors upstream's layout-effect body, which reads the freshly\n  // committed `ref.current`. Keying on the `element` signal (not just isVisible)\n  // makes this run only once the incoming div is actually mounted: when isVisible\n  // flips true the mount-in-render effect above mounts the div, `setRef` sets the\n  // signal, and this effect runs with `el` present — never against a null ref.\n  // (Solid batches, so an isVisible flip + the resulting mount coalesce into one\n  // run with the mounted element.) There is therefore no \"element not yet in DOM\"\n  // fresh-enter branch: with no committed div there is nothing to measure, so we\n  // wait — exactly as React never runs the body before commit.\n  createEffect(\n    () => {\n      const isVisible = local.isVisible !== false;\n      const el = element();\n      return { isVisible, el };\n    },\n    ({ isVisible, el }) => {\n      const name = local.name;\n\n      if (frame != null) {\n        cancelAnimationFrame(frame);\n        frame = undefined;\n      }\n\n      if (isVisible && el) {\n        const prevSnapshot = scope.snapshots[name];\n\n        if (prevSnapshot) {\n          // FLIP: Element is transitioning from a previous instance.\n          pendingFreshEnter = false;\n          setLifecycle(\"visible\");\n          const animations = getAnimations(el);\n\n          // Set properties to animate from.\n          const values = prevSnapshot.style.map(([property, prevValue]) => {\n            const value = el.style.getPropertyValue(property);\n            if (property === \"translate\") {\n              const prevRect = prevSnapshot.rect;\n              const currentRect = el.getBoundingClientRect();\n              const deltaX = prevRect.left - currentRect.left;\n              const deltaY = prevRect.top - currentRect.top;\n              el.style.setProperty(\"translate\", `${deltaX}px ${deltaY}px`);\n            } else {\n              el.style.setProperty(property, prevValue);\n            }\n            return [property, value] as [string, string];\n          });\n\n          // Cancel any new animations triggered by these properties.\n          for (const a of getAnimations(el)) {\n            if (!animations.includes(a)) {\n              a.cancel();\n            }\n          }\n\n          // Remove overrides after one frame to animate to the current values.\n          frame = requestAnimationFrame(() => {\n            frame = undefined;\n            for (const [property, value] of values) {\n              el.style.setProperty(property, value);\n            }\n          });\n\n          delete scope.snapshots[name];\n        } else if (pendingFreshEnter) {\n          // No previous instance exists, apply the entering state.\n          pendingFreshEnter = false;\n          setLifecycle(\"entering\");\n          frame = requestAnimationFrame(() => {\n            frame = undefined;\n            setLifecycle(\"visible\");\n          });\n        }\n      } else if (!isVisible) {\n        // Unmount immediately. The outgoing snapshot was stored in the\n        // store-phase cleanup before this user effect, so a sibling FLIP in\n        // the same flush can still consume it. Deferring hide to a microtask\n        // left the outgoing node mounted after flush() (React unmounts when\n        // isVisible is false). Drop an unconsumed snapshot after the flush so\n        // a later same-name mount does not FLIP from a stale rect.\n        setLifecycle(\"hidden\");\n        const snapshotName = name;\n        queueMicrotask(() => {\n          if (scope.snapshots[snapshotName]) {\n            delete scope.snapshots[snapshotName];\n          }\n        });\n      }\n    },\n  );\n\n  // Cancel any pending FLIP frame on disposal. The snapshot store lives in the\n  // render-effect cleanup above, which also fires on disposal.\n  onCleanup(() => {\n    if (frame != null) {\n      cancelAnimationFrame(frame);\n    }\n  });\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-SharedElement\",\n    },\n    () => ({\n      isEntering: lifecycle() === \"entering\",\n      isExiting: lifecycle() === \"exiting\",\n    }),\n  );\n\n  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));\n\n  return (\n    <Show when={lifecycle() !== \"hidden\"}>\n      <div\n        ref={setRef}\n        {...filteredDomProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-entering={dataAttr(lifecycle() === \"entering\")}\n        data-exiting={dataAttr(lifecycle() === \"exiting\")}\n      >\n        {renderProps.renderChildren()}\n      </div>\n    </Show>\n  );\n}\n"],"mappings":"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"}

package/dist/Slider.d.ts

@@ -1,10 +1,4 @@
-/**
- * Slider component for solidaria-components
- *
- * A pre-wired headless slider that combines state + aria hooks.
- * Port of react-aria-components/src/Slider.tsx
- */
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type AriaSliderProps, type HoverEvents } from "@proyecto-viviana/solidaria";
 import { type SliderState, type SliderOrientation } from "@proyecto-viviana/solid-stately";
 import { type RenderChildren, type ClassNameOrFunction, type StyleOrFunction, type SlotProps } from "./utils";
@@ -167,7 +161,7 @@ export declare function SliderThumb(props: SliderThumbProps): JSX.Element;
 /**
  * The fill element of a slider, displaying the selected range.
  *
- * Port of react-aria-components `SliderFill` (RAC 1.18). Upstream reads the
+ * Solid adaptation of the pinned `SliderFill`. Upstream reads the
  * array-based `SliderState` (`values`/`getThumbPercent`); our `SliderState` is
  * single-value, so this fills from `offset` (default the slider's minValue, i.e.
  * 0%) to the current value — the single-thumb branch of upstream's math, using

package/dist/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"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"}

package/dist/Slider.js

@@ -1,17 +1,34 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Slider.tsx
+import { coerceDomRecord, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
-import { createComponent, getNextElement, getNextMarker, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { Show, createContext, createMemo, splitProps, useContext } from "solid-js";
-import { createFocusRing, createHover, createSlider, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { createComponent, getNextElement, getNextMarker, insert, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { Show, createContext, createMemo, useContext } from "solid-js";
+import { createFocusRing, createHover, createSlider, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createSliderState } from "@proyecto-viviana/solid-stately";
 //#region src/Slider.tsx
 /**
 * Slider component for solidaria-components
 *
 * A pre-wired headless slider that combines state + aria hooks.
-* Port of react-aria-components/src/Slider.tsx
+* Solid adaptation of the pinned Slider component.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<div>`), _tmpl$4 = /*#__PURE__*/ template(`<input>`), _tmpl$5 = /*#__PURE__*/ template(`<output>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<output>`);
 const SliderContext = createContext(null);
 const SliderStateContext = SliderContext;
 const SliderTrackContext = SliderContext;
@@ -136,7 +153,7 @@ function Slider(props) {
 		const { ref: _ref, ...rest } = sliderAria.groupProps;
 		return rest;
 	};
-	return createComponent(SliderContext.Provider, {
+	return createComponent(SliderContext, {
 		value: {
 			state,
 			get trackProps() {
@@ -161,39 +178,55 @@ function Slider(props) {
 			setInputRef
 		},
 		get children() {
-			var _el$ = getNextElement(_tmpl$2), _el$3 = _el$.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
+			var _el$ = getNextElement(_tmpl$2);
+			var _el$3 = _el$.firstChild;
+			var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+			var _el$6 = _el$4.nextSibling;
+			var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
 			var _ref$ = local.ref;
-			typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
-			spread(_el$, mergeProps(domProps, cleanGroupProps, {
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return renderProps.style();
-				},
-				get ["data-disabled"]() {
-					return state.isDisabled || void 0;
-				},
-				get ["data-orientation"]() {
-					return state.orientation;
-				},
-				get ["data-dragging"]() {
-					return state.isDragging() || void 0;
+			typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+				return _ref$;
+			}, _el$) : local.ref = _el$;
+			spread(_el$, [
+				domProps,
+				cleanGroupProps,
+				{
+					get "class"() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get "data-disabled"() {
+						return dataAttr(state.isDisabled);
+					},
+					get "data-orientation"() {
+						return state.orientation;
+					},
+					get "data-dragging"() {
+						return dataAttr(state.isDragging());
+					}
 				}
-			}), false, true);
+			], true);
 			insert(_el$, createComponent(Show, {
 				get when() {
 					return ariaProps.label;
 				},
 				get children() {
 					var _el$2 = getNextElement(_tmpl$);
-					spread(_el$2, mergeProps(() => sliderAria.labelProps), false, true);
-					insert(_el$2, () => ariaProps.label);
+					spread(_el$2, () => {
+						return sliderAria.labelProps;
+					}, true);
+					insert(_el$2, () => {
+						return ariaProps.label;
+					});
 					runHydrationEvents();
 					return _el$2;
 				}
-			}), _el$4, _co$);
-			insert(_el$, sliderChildren, _el$6, _co$2);
+			}), _el$4, _el$5);
+			insert(_el$, scope(() => {
+				return sliderChildren();
+			}), _el$7, _el$8);
 			runHydrationEvents();
 			return _el$;
 		}
@@ -238,30 +271,36 @@ function SliderTrack(props) {
 			...renderStyle
 		};
 	};
-	return (() => {
-		var _el$7 = getNextElement(_tmpl$3);
-		use(setTrackRef, _el$7);
-		spread(_el$7, mergeProps(domProps, cleanTrackProps, {
-			get ["class"]() {
+	var _el$9 = getNextElement(_tmpl$3);
+	ref(() => {
+		return setTrackRef;
+	}, _el$9);
+	spread(_el$9, [
+		domProps,
+		cleanTrackProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return mergedStyle();
 			},
-			get ["data-disabled"]() {
-				return state.isDisabled || void 0;
+			get "data-disabled"() {
+				return dataAttr(state.isDisabled);
 			},
-			get ["data-orientation"]() {
+			get "data-orientation"() {
 				return state.orientation;
 			},
-			get ["data-dragging"]() {
-				return state.isDragging() || void 0;
+			get "data-dragging"() {
+				return dataAttr(state.isDragging());
 			}
-		}), false, true);
-		insert(_el$7, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$7;
-	})();
+		}
+	], true);
+	insert(_el$9, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$9;
 }
 /**
 * The thumb element of a slider.
@@ -321,41 +360,52 @@ function SliderThumb(props) {
 		const { ref: _ref, ...rest } = context.inputProps;
 		return rest;
 	};
-	const mergedInputProps = () => mergeProps$2(cleanInputProps(), cleanFocusProps());
+	const mergedInputProps = () => mergeProps$1(cleanInputProps(), cleanFocusProps());
 	return [createComponent(VisuallyHidden, { get children() {
-		var _el$8 = getNextElement(_tmpl$4);
-		use(setInputRef, _el$8);
-		spread(_el$8, mergeProps(mergedInputProps), false, false);
+		var _el$10 = getNextElement(_tmpl$4);
+		ref(() => {
+			return setInputRef;
+		}, _el$10);
+		spread(_el$10, mergedInputProps, false);
 		runHydrationEvents();
-		return _el$8;
+		return _el$10;
 	} }), (() => {
-		var _el$9 = getNextElement(_tmpl$3);
-		spread(_el$9, mergeProps(domProps, cleanThumbProps, cleanHoverProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return mergedStyle();
-			},
-			get ["data-disabled"]() {
-				return state.isDisabled || void 0;
-			},
-			get ["data-dragging"]() {
-				return state.isDragging() || void 0;
+		var _el$11 = getNextElement(_tmpl$3);
+		spread(_el$11, [
+			domProps,
+			() => {
+				return coerceDomRecord(cleanThumbProps());
 			},
-			get ["data-focused"]() {
-				return isFocused() || state.isFocused() || void 0;
-			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			cleanHoverProps,
+			{
+				get "class"() {
+					return renderProps.class();
+				},
+				get style() {
+					return mergedStyle();
+				},
+				get "data-disabled"() {
+					return dataAttr(state.isDisabled);
+				},
+				get "data-dragging"() {
+					return dataAttr(state.isDragging());
+				},
+				get "data-focused"() {
+					return dataAttr(isFocused() || state.isFocused());
+				},
+				get "data-focus-visible"() {
+					return dataAttr(isFocusVisible());
+				},
+				get "data-hovered"() {
+					return dataAttr(isHovered());
+				}
 			}
-		}), false, true);
-		insert(_el$9, () => renderProps.renderChildren());
+		], true);
+		insert(_el$11, scope(() => {
+			return renderProps.renderChildren();
+		}));
 		runHydrationEvents();
-		return _el$9;
+		return _el$11;
 	})()];
 }
 /** Clamp a value between min and max (mirror of upstream's number/clamp). */
@@ -365,7 +415,7 @@ function clampFill(value, min, max) {
 /**
 * The fill element of a slider, displaying the selected range.
 *
-* Port of react-aria-components `SliderFill` (RAC 1.18). Upstream reads the
+* Solid adaptation of the pinned `SliderFill`. Upstream reads the
 * array-based `SliderState` (`values`/`getThumbPercent`); our `SliderState` is
 * single-value, so this fills from `offset` (default the slider's minValue, i.e.
 * 0%) to the current value — the single-thumb branch of upstream's math, using
@@ -429,29 +479,33 @@ function SliderFill(props) {
 			...renderProps.style() || {}
 		};
 	};
-	return (() => {
-		var _el$0 = getNextElement(_tmpl$3);
-		spread(_el$0, mergeProps(domProps, hoverProps, {
-			get ["class"]() {
+	var _el$12 = getNextElement(_tmpl$3);
+	spread(_el$12, [
+		domProps,
+		hoverProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return mergedStyle();
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-disabled"]() {
-				return state.isDisabled || void 0;
+			get "data-disabled"() {
+				return dataAttr(state.isDisabled);
 			},
-			get ["data-orientation"]() {
+			get "data-orientation"() {
 				return state.orientation;
 			}
-		}), false, true);
-		insert(_el$0, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$0;
-	})();
+		}
+	], true);
+	insert(_el$12, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$12;
 }
 /**
 * The output element of a slider, displaying the current value.
@@ -490,20 +544,24 @@ function SliderOutput(props) {
 		if (renderProps.children === void 0 || renderProps.children === null) return state.getFormattedValue();
 		return renderProps.renderChildren();
 	};
-	return (() => {
-		var _el$1 = getNextElement(_tmpl$5);
-		spread(_el$1, mergeProps(cleanDomProps, cleanOutputProps, {
-			get ["class"]() {
+	var _el$13 = getNextElement(_tmpl$5);
+	spread(_el$13, [
+		cleanDomProps,
+		cleanOutputProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			}
-		}), false, true);
-		insert(_el$1, renderedChildren);
-		runHydrationEvents();
-		return _el$1;
-	})();
+		}
+	], true);
+	insert(_el$13, scope(() => {
+		return renderedChildren();
+	}));
+	runHydrationEvents();
+	return _el$13;
 }
 Slider.Track = SliderTrack;
 Slider.Thumb = SliderThumb;