@epilot/zenith-react 0.2.0-next.6 → 0.2.0-next.7

package/dist/components/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { CSPProvider } from \"@base-ui/react/csp-provider\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { ScrollArea as Primitive } from \"@base-ui/react/scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"./scrollbar-styles\"\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\"\nexport type ScrollAreaVisibility = \"interaction\" | \"always\"\ntype Direction = \"ltr\" | \"rtl\"\n// Declared in Zenith in their Radix-era shape, a div's props, not derived from Base UI's, whose\n// types would carry its internals into the published declarations.\nexport type ScrollAreaProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"dir\"\n> & {\n  /** Text direction of the region and of its thumb positions. Defaults to `ltr`. */\n  dir?: Direction\n  orientation?: ScrollAreaOrientation\n  visibility?: ScrollAreaVisibility\n}\nexport type ScrollAreaViewportProps = React.ComponentPropsWithoutRef<\"div\">\n\nconst Context = React.createContext<{\n  orientation: ScrollAreaOrientation\n  onScroll: () => void\n} | null>(null)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    minWidth: 0,\n    minHeight: 0,\n    ...shorthands.overflow(\"hidden\"),\n    [`&[data-revealed='true'] > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n      opacity: 1,\n      pointerEvents: \"auto\",\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n        opacity: 1,\n        pointerEvents: \"auto\",\n        backgroundColor: \"Canvas\",\n      },\n    },\n  },\n  viewport: {\n    width: \"100%\",\n    height: \"100%\",\n    minWidth: 0,\n    minHeight: 0,\n    boxSizing: \"border-box\",\n    borderRadius: \"inherit\",\n    // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline\n    // <style> needs a nonce (Radix's took the viewport's).\n    scrollbarWidth: \"none\",\n    \"::-webkit-scrollbar\": { display: \"none\" },\n    \":focus-visible\": {\n      outlineWidth: \"3px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n      outlineOffset: \"-3px\",\n    },\n  },\n  // The content wrapper keeps Radix's display:table, which grows to the content's width...\n  content: { display: \"table\" },\n  // ...except in a vertical area, where that would expand long lines past the viewport.\n  verticalContent: { display: \"block\" },\n  reserveVertical: { paddingInlineEnd: \"12px\" },\n  reserveHorizontal: { paddingBottom: \"12px\" },\n  track: {\n    boxSizing: \"border-box\",\n    backgroundColor: \"transparent\",\n    opacity: 0,\n    pointerEvents: \"none\",\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0s\" },\n    [`&:hover > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA10,\n    },\n    [`&:active > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA11,\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n        backgroundColor: \"ButtonText\",\n        forcedColorAdjust: \"none\",\n      },\n    },\n  },\n  // The 3px inset along the scroll axis is margin, not padding. With both tracks shown, Base UI\n  // 1.7.0 sizes the thumb from the track's offsetHeight/offsetWidth without subtracting its padding,\n  // which lengthened the thumb by the padding's share; a margin shrinks the track box instead, so\n  // the thumb keeps Radix's length on every orientation.\n  vertical: {\n    width: \"12px\",\n    ...shorthands.padding(\"0\", \"3px\"),\n    ...shorthands.margin(\"3px\", \"0\"),\n  },\n  horizontal: {\n    height: \"12px\",\n    flexDirection: \"column\",\n    ...shorthands.padding(\"3px\", \"0\"),\n    ...shorthands.margin(\"0\", \"3px\"),\n  },\n  thumb: { backgroundColor: tokens.grayA9 },\n  // Base UI owns thumb length (including its 16px minimum) and uses it in drag math.\n  // A CSS-only minimum overrides the paint but not that math, overshooting the track.\n  corner: { backgroundColor: \"transparent\", pointerEvents: \"none\" },\n})\n\n/** Native scrolling with Base UI tracks. Dimensions belong here; scroll refs belong to the viewport. */\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  function ScrollArea(\n    {\n      dir = \"ltr\",\n      orientation = \"vertical\",\n      visibility = \"interaction\",\n      className,\n      children,\n      onPointerEnter,\n      onPointerLeave,\n      onFocusCapture,\n      onBlurCapture,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const scrollbar = useScrollbarStyles()\n    const root = React.useRef<HTMLDivElement | null>(null)\n    const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined\n    )\n    const interaction = React.useRef({\n      hover: false,\n      focus: false,\n      drag: false,\n    })\n    const [revealed, setRevealed] = React.useState(false)\n    const clear = React.useCallback(() => {\n      clearTimeout(timer.current)\n    }, [])\n    const reveal = React.useCallback(() => {\n      clear()\n      setRevealed(true)\n    }, [clear])\n    const settle = React.useCallback(() => {\n      clear()\n      if (!Object.values(interaction.current).some(Boolean)) {\n        timer.current = setTimeout(() => setRevealed(false), 600)\n      }\n    }, [clear])\n    const pulse = React.useCallback(() => {\n      reveal()\n      settle()\n    }, [reveal, settle])\n    React.useEffect(() => {\n      const doc = root.current?.ownerDocument\n      const endDrag = () => {\n        if (interaction.current.drag) {\n          interaction.current.drag = false\n          settle()\n        }\n      }\n      doc?.addEventListener(\"pointerup\", endDrag, true)\n      doc?.addEventListener(\"pointercancel\", endDrag, true)\n      return () => {\n        clear()\n        doc?.removeEventListener(\"pointerup\", endDrag, true)\n        doc?.removeEventListener(\"pointercancel\", endDrag, true)\n      }\n    }, [clear, settle])\n    const context = React.useMemo(\n      () => ({ orientation, onScroll: pulse }),\n      [orientation, pulse]\n    )\n    const tracks =\n      orientation === \"both\"\n        ? ([\"vertical\", \"horizontal\"] as const)\n        : [orientation]\n    return (\n      <Context.Provider value={context}>\n        {/* Radix stamped and computed with ltr unless told otherwise; Base UI reads context. */}\n        <DirectionProvider direction={dir}>\n          {/* The viewport's styles hide the native scrollbars, so Base UI's <style> is not rendered. */}\n          <CSPProvider disableStyleElements>\n            <Primitive.Root\n              {...props}\n              dir={dir}\n              ref={(node) => {\n                root.current = node\n                if (typeof ref === \"function\") ref(node)\n                else if (ref) ref.current = node\n              }}\n              data-slot=\"scroll-area\"\n              {...{ [SLOT_ATTR]: \"scroll-area\" }}\n              data-orientation={orientation}\n              data-revealed={visibility === \"always\" || revealed}\n              className={mergeClasses(styles.root, className)}\n              onPointerEnter={(event) => {\n                if (event.pointerType !== \"touch\") {\n                  interaction.current.hover = true\n                  reveal()\n                }\n                onPointerEnter?.(event)\n              }}\n              onPointerLeave={(event) => {\n                interaction.current.hover = false\n                settle()\n                onPointerLeave?.(event)\n              }}\n              onFocusCapture={(event) => {\n                interaction.current.focus = true\n                reveal()\n                onFocusCapture?.(event)\n              }}\n              onBlurCapture={(event) => {\n                if (!event.currentTarget.contains(event.relatedTarget)) {\n                  interaction.current.focus = false\n                  settle()\n                }\n                onBlurCapture?.(event)\n              }}\n            >\n              {/* Base UI parts the caller renders inside keep their own style elements. */}\n              <CSPProvider>\n                {children}\n                {tracks.map((axis) => (\n                  <Primitive.Scrollbar\n                    key={axis}\n                    orientation={axis}\n                    data-slot=\"scroll-area-scrollbar\"\n                    {...{ [SLOT_ATTR]: \"scroll-area-scrollbar\" }}\n                    className={mergeClasses(\n                      scrollbar.track,\n                      styles.track,\n                      styles[axis]\n                    )}\n                    onPointerDown={() => {\n                      interaction.current.drag = true\n                      reveal()\n                    }}\n                  >\n                    <Primitive.Thumb\n                      data-slot=\"scroll-area-thumb\"\n                      {...{ [SLOT_ATTR]: \"scroll-area-thumb\" }}\n                      className={mergeClasses(scrollbar.thumb, styles.thumb)}\n                    />\n                  </Primitive.Scrollbar>\n                ))}\n                {orientation === \"both\" && (\n                  <Primitive.Corner className={styles.corner} />\n                )}\n              </CSPProvider>\n            </Primitive.Root>\n          </CSPProvider>\n        </DirectionProvider>\n      </Context.Provider>\n    )\n  }\n)\n\n/** Put keyboard focus, accessible naming and onScroll on this actual scroll element. */\nexport const ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaViewportProps\n>(function ScrollAreaViewport(\n  // No inline <style> is rendered, so Radix's nonce has nothing left to unlock.\n  { className, style, onScroll, children, nonce: _nonce, ...props },\n  ref\n) {\n  const context = React.useContext(Context)\n  const styles = useStyles()\n  if (!context)\n    throw new Error(\"ScrollAreaViewport requires a ScrollArea parent\")\n  const { orientation } = context\n  return (\n    <Primitive.Viewport\n      {...props}\n      ref={ref}\n      data-slot=\"scroll-area-viewport\"\n      {...{ [SLOT_ATTR]: \"scroll-area-viewport\" }}\n      className={mergeClasses(\n        styles.viewport,\n        orientation !== \"horizontal\" && styles.reserveVertical,\n        orientation !== \"vertical\" && styles.reserveHorizontal,\n        className\n      )}\n      // Only axes with a track scroll, as Radix enabled overflow per mounted scrollbar.\n      style={{\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"scroll\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"scroll\",\n        ...style,\n      }}\n      onScroll={(event) => {\n        if (event.target === event.currentTarget) {\n          context.onScroll()\n          onScroll?.(event)\n        }\n      }}\n    >\n      <Primitive.Content\n        className={mergeClasses(\n          styles.content,\n          orientation === \"vertical\" && styles.verticalContent\n        )}\n        // Over Base UI's fit-content, which would widen a vertical area to its widest line.\n        style={{ minWidth: \"100%\" }}\n      >\n        {children}\n      </Primitive.Content>\n    </Primitive.Viewport>\n  )\n})\n"],"names":["Context","React","useStyles","makeZenithStyles","boxModel","shorthands","SLOT_ATTR","tokens.focusRing","tokens.grayA10","tokens.grayA11","tokens.grayA9","ScrollArea","dir","orientation","visibility","className","children","onPointerEnter","onPointerLeave","onFocusCapture","onBlurCapture","props","ref","styles","scrollbar","useScrollbarStyles","root","timer","interaction","revealed","setRevealed","clear","reveal","settle","pulse","doc","_a","endDrag","context","tracks","jsx","DirectionProvider","CSPProvider","Primitive","node","mergeClasses","event","axis","ScrollAreaViewport","style","onScroll","_nonce"],"mappings":"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"}
+{"version":3,"file":"scroll-area.js","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { CSPProvider } from \"@base-ui/react/csp-provider\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { ScrollArea as Primitive } from \"@base-ui/react/scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"./scrollbar-styles\"\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\"\nexport type ScrollAreaVisibility = \"interaction\" | \"always\"\ntype Direction = \"ltr\" | \"rtl\"\n// Declared in Zenith in their Radix-era shape, a div's props, not derived from Base UI's, whose\n// types would carry its internals into the published declarations.\nexport type ScrollAreaProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"dir\"\n> & {\n  /** Text direction of the region and of its thumb positions. Defaults to `ltr`. */\n  dir?: Direction\n  orientation?: ScrollAreaOrientation\n  visibility?: ScrollAreaVisibility\n}\nexport type ScrollAreaViewportProps = React.ComponentPropsWithoutRef<\"div\">\n\nconst Context = React.createContext<{\n  orientation: ScrollAreaOrientation\n  onScroll: () => void\n} | null>(null)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    minWidth: 0,\n    minHeight: 0,\n    ...shorthands.overflow(\"hidden\"),\n    [`&[data-revealed='true'] > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n      opacity: 1,\n      pointerEvents: \"auto\",\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n        opacity: 1,\n        pointerEvents: \"auto\",\n        backgroundColor: \"Canvas\",\n      },\n    },\n  },\n  viewport: {\n    width: \"100%\",\n    height: \"100%\",\n    minWidth: 0,\n    minHeight: 0,\n    boxSizing: \"border-box\",\n    borderRadius: \"inherit\",\n    // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline\n    // <style> needs a nonce (Radix's took the viewport's).\n    scrollbarWidth: \"none\",\n    \"::-webkit-scrollbar\": { display: \"none\" },\n    \":focus-visible\": {\n      outlineWidth: \"3px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n      outlineOffset: \"-3px\",\n    },\n  },\n  // The content wrapper keeps Radix's display:table, which grows to the content's width...\n  content: { display: \"table\" },\n  // ...except in a vertical area, where that would expand long lines past the viewport.\n  verticalContent: { display: \"block\" },\n  reserveVertical: { paddingInlineEnd: \"12px\" },\n  reserveHorizontal: { paddingBottom: \"12px\" },\n  track: {\n    boxSizing: \"border-box\",\n    backgroundColor: \"transparent\",\n    opacity: 0,\n    pointerEvents: \"none\",\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0s\" },\n    [`&:hover > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA10,\n    },\n    [`&:active > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA11,\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n        backgroundColor: \"ButtonText\",\n        forcedColorAdjust: \"none\",\n      },\n    },\n  },\n  // The 3px inset along the scroll axis is margin, not padding. With both tracks shown, Base UI\n  // 1.7.0 sizes the thumb from the track's offsetHeight/offsetWidth without subtracting its padding,\n  // which lengthened the thumb by the padding's share; a margin shrinks the track box instead, so\n  // the thumb keeps Radix's length on every orientation.\n  vertical: {\n    width: \"12px\",\n    ...shorthands.padding(\"0\", \"3px\"),\n    ...shorthands.margin(\"3px\", \"0\"),\n  },\n  horizontal: {\n    height: \"12px\",\n    flexDirection: \"column\",\n    ...shorthands.padding(\"3px\", \"0\"),\n    ...shorthands.margin(\"0\", \"3px\"),\n  },\n  thumb: { backgroundColor: tokens.grayA9 },\n  // Base UI owns thumb length (including its 16px minimum) and uses it in drag math.\n  // A CSS-only minimum overrides the paint but not that math, overshooting the track.\n  corner: { backgroundColor: \"transparent\", pointerEvents: \"none\" },\n})\n\n/** Native scrolling with Base UI tracks. Dimensions belong here; scroll refs belong to the viewport. */\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  function ScrollArea(\n    {\n      dir = \"ltr\",\n      orientation = \"vertical\",\n      visibility = \"interaction\",\n      className,\n      children,\n      onPointerEnter,\n      onPointerLeave,\n      onFocusCapture,\n      onBlurCapture,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const scrollbar = useScrollbarStyles()\n    const root = React.useRef<HTMLDivElement | null>(null)\n    const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined\n    )\n    const interaction = React.useRef({\n      hover: false,\n      focus: false,\n      drag: false,\n    })\n    const [revealed, setRevealed] = React.useState(false)\n    const clear = React.useCallback(() => {\n      clearTimeout(timer.current)\n    }, [])\n    const reveal = React.useCallback(() => {\n      clear()\n      setRevealed(true)\n    }, [clear])\n    const settle = React.useCallback(() => {\n      clear()\n      if (!Object.values(interaction.current).some(Boolean)) {\n        timer.current = setTimeout(() => setRevealed(false), 600)\n      }\n    }, [clear])\n    const pulse = React.useCallback(() => {\n      reveal()\n      settle()\n    }, [reveal, settle])\n    React.useEffect(() => {\n      const doc = root.current?.ownerDocument\n      const endDrag = () => {\n        if (interaction.current.drag) {\n          interaction.current.drag = false\n          settle()\n        }\n      }\n      doc?.addEventListener(\"pointerup\", endDrag, true)\n      doc?.addEventListener(\"pointercancel\", endDrag, true)\n      return () => {\n        clear()\n        doc?.removeEventListener(\"pointerup\", endDrag, true)\n        doc?.removeEventListener(\"pointercancel\", endDrag, true)\n      }\n    }, [clear, settle])\n    const context = React.useMemo(\n      () => ({ orientation, onScroll: pulse }),\n      [orientation, pulse]\n    )\n    const tracks =\n      orientation === \"both\"\n        ? ([\"vertical\", \"horizontal\"] as const)\n        : [orientation]\n    return (\n      <Context.Provider value={context}>\n        {/* Radix stamped and computed with ltr unless told otherwise; Base UI reads context. */}\n        <DirectionProvider direction={dir}>\n          {/* The viewport's styles hide the native scrollbars, so Base UI's <style> is not rendered. */}\n          <CSPProvider disableStyleElements>\n            <Primitive.Root\n              {...props}\n              dir={dir}\n              ref={(node) => {\n                root.current = node\n                if (typeof ref === \"function\") ref(node)\n                else if (ref) ref.current = node\n              }}\n              data-slot=\"scroll-area\"\n              {...{ [SLOT_ATTR]: \"scroll-area\" }}\n              data-orientation={orientation}\n              data-revealed={visibility === \"always\" || revealed}\n              className={mergeClasses(styles.root, className)}\n              onPointerEnter={(event) => {\n                if (event.pointerType !== \"touch\") {\n                  interaction.current.hover = true\n                  reveal()\n                }\n                onPointerEnter?.(event)\n              }}\n              onPointerLeave={(event) => {\n                interaction.current.hover = false\n                settle()\n                onPointerLeave?.(event)\n              }}\n              onFocusCapture={(event) => {\n                interaction.current.focus = true\n                reveal()\n                onFocusCapture?.(event)\n              }}\n              onBlurCapture={(event) => {\n                if (!event.currentTarget.contains(event.relatedTarget)) {\n                  interaction.current.focus = false\n                  settle()\n                }\n                onBlurCapture?.(event)\n              }}\n            >\n              {/* Base UI parts the caller renders inside keep their own style elements. */}\n              <CSPProvider>\n                {children}\n                {tracks.map((axis) => (\n                  <Primitive.Scrollbar\n                    key={axis}\n                    orientation={axis}\n                    data-slot=\"scroll-area-scrollbar\"\n                    {...{ [SLOT_ATTR]: \"scroll-area-scrollbar\" }}\n                    className={mergeClasses(\n                      scrollbar.track,\n                      styles.track,\n                      styles[axis]\n                    )}\n                    onPointerDown={() => {\n                      interaction.current.drag = true\n                      reveal()\n                    }}\n                  >\n                    <Primitive.Thumb\n                      data-slot=\"scroll-area-thumb\"\n                      {...{ [SLOT_ATTR]: \"scroll-area-thumb\" }}\n                      className={mergeClasses(scrollbar.thumb, styles.thumb)}\n                    />\n                  </Primitive.Scrollbar>\n                ))}\n                {orientation === \"both\" && (\n                  <Primitive.Corner className={styles.corner} />\n                )}\n              </CSPProvider>\n            </Primitive.Root>\n          </CSPProvider>\n        </DirectionProvider>\n      </Context.Provider>\n    )\n  }\n)\n\n/** Put keyboard focus, accessible naming and onScroll on this actual scroll element. */\nexport const ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaViewportProps\n>(function ScrollAreaViewport(\n  // No inline <style> is rendered, so Radix's nonce has nothing left to unlock.\n  { className, style, onScroll, children, nonce: _nonce, ...props },\n  ref\n) {\n  const context = React.useContext(Context)\n  const styles = useStyles()\n  if (!context)\n    throw new Error(\"ScrollAreaViewport requires a ScrollArea parent\")\n  const { orientation } = context\n  return (\n    <Primitive.Viewport\n      {...props}\n      ref={ref}\n      data-slot=\"scroll-area-viewport\"\n      {...{ [SLOT_ATTR]: \"scroll-area-viewport\" }}\n      className={mergeClasses(\n        styles.viewport,\n        orientation !== \"horizontal\" && styles.reserveVertical,\n        orientation !== \"vertical\" && styles.reserveHorizontal,\n        className\n      )}\n      // Only axes with a track scroll, as Radix enabled overflow per mounted scrollbar.\n      style={{\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"scroll\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"scroll\",\n        ...style,\n      }}\n      onScroll={(event) => {\n        if (event.target === event.currentTarget) {\n          context.onScroll()\n          onScroll?.(event)\n        }\n      }}\n    >\n      <Primitive.Content\n        className={mergeClasses(\n          styles.content,\n          orientation === \"vertical\" && styles.verticalContent\n        )}\n        // Over Base UI's fit-content, which would widen a vertical area to its widest line.\n        style={{ minWidth: \"100%\" }}\n      >\n        {children}\n      </Primitive.Content>\n    </Primitive.Viewport>\n  )\n})\n"],"names":["Context","React","useStyles","makeZenithStyles","boxModel","shorthands","SLOT_ATTR","tokens.focusRing","tokens.grayA10","tokens.grayA11","tokens.grayA9","ScrollArea","dir","orientation","visibility","className","children","onPointerEnter","onPointerLeave","onFocusCapture","onBlurCapture","props","ref","styles","scrollbar","useScrollbarStyles","root","timer","interaction","revealed","setRevealed","clear","reveal","settle","pulse","doc","_a","endDrag","context","tracks","jsx","DirectionProvider","CSPProvider","Primitive","node","mergeClasses","event","axis","ScrollAreaViewport","style","onScroll","_nonce"],"mappings":"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"}

package/dist/components/scroll-area/scrollbar-styles.js

@@ -1,5 +1,5 @@
 import { makeZenithStyles as e } from "../../styles/make-styles.js";
-import { shorthands as o } from "@epilot/zenith-runtime/v1/core.js";
+import { shorthands as o } from "@epilot/zenith-runtime/v1";
 const i = e({
   track: {
     position: "relative",

package/dist/components/scroll-area/scrollbar-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar-styles.js","sources":["../../../src/components/scroll-area/scrollbar-styles.ts"],"sourcesContent":["import { makeZenithStyles } from \"../../styles/make-styles\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\n/** Shared mechanics only. Each consumer owns its size, colour and visibility policy. */\nexport const useScrollbarStyles = makeZenithStyles({\n  track: {\n    position: \"relative\",\n    display: \"flex\",\n    touchAction: \"none\",\n    userSelect: \"none\",\n  },\n  thumb: {\n    position: \"relative\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    ...shorthands.borderRadius(\"9999px\"),\n  },\n})\n"],"names":["useScrollbarStyles","makeZenithStyles","shorthands"],"mappings":";;AAIO,MAAMA,IAAqBC,EAAiB;AAAA,EACjD,OAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAGC,EAAW,aAAa,QAAQ;AAAA,EAAA;AAEvC,CAAC;"}
+{"version":3,"file":"scrollbar-styles.js","sources":["../../../src/components/scroll-area/scrollbar-styles.ts"],"sourcesContent":["import { makeZenithStyles } from \"../../styles/make-styles\"\nimport { shorthands } from \"@epilot/zenith-runtime/v1\"\n\n/** Shared mechanics only. Each consumer owns its size, colour and visibility policy. */\nexport const useScrollbarStyles = makeZenithStyles({\n  track: {\n    position: \"relative\",\n    display: \"flex\",\n    touchAction: \"none\",\n    userSelect: \"none\",\n  },\n  thumb: {\n    position: \"relative\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    ...shorthands.borderRadius(\"9999px\"),\n  },\n})\n"],"names":["useScrollbarStyles","makeZenithStyles","shorthands"],"mappings":";;AAIO,MAAMA,IAAqBC,EAAiB;AAAA,EACjD,OAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,IACT,aAAa;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAGC,EAAW,aAAa,QAAQ;AAAA,EAAA;AAEvC,CAAC;"}

package/dist/components/scroll-overflow/scroll-overflow.js

@@ -3,7 +3,7 @@ import * as w from "react";
 import { CSPProvider as K } from "../../_virtual/_zenith-runtime-family_csp-provider.js";
 import { DirectionProvider as P } from "../../_virtual/_zenith-runtime-family_direction-provider.js";
 import { ScrollArea as g } from "../../_virtual/_zenith-runtime-family_scroll-area.js";
-import { mergeClasses as f, SLOT_ATTR as s, shorthands as i } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as f, SLOT_ATTR as s, shorthands as i } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as $ } from "../../styles/make-styles.js";
 import { boxModel as a, nativeControl as G } from "../../styles/host-reset.js";
 import { body as _, grayA8 as O, accentA8 as U, grayA12 as X, gray1 as Y, radiusMd as q, radiusSm as J } from "../../tokens/index.js";

package/dist/components/scroll-overflow/scroll-overflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-overflow.js","sources":["../../../src/components/scroll-overflow/scroll-overflow.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { CSPProvider } from \"@base-ui/react/csp-provider\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { ScrollArea as Primitive } from \"@base-ui/react/scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"../scroll-area/scrollbar-styles\"\n\nexport type UseScrollOverflowOptions = {\n  /** Scroll distance per step in pixels. Default: 200 */\n  scrollStep?: number\n  /** Scroll orientation. Default: \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nexport type UseScrollOverflowReturn = {\n  /** Ref to attach to the scroll container (Base UI Viewport) */\n  scrollRef: React.RefObject<HTMLDivElement | null>\n  /** Whether the content overflows the container */\n  hasOverflow: boolean\n  /** Whether there is hidden content before the visible area (left or top) */\n  canScrollStart: boolean\n  /** Whether there is hidden content after the visible area (right or bottom) */\n  canScrollEnd: boolean\n  /** Scroll toward the start (left or up) by scrollStep */\n  scrollToStart: () => void\n  /** Scroll toward the end (right or down) by scrollStep */\n  scrollToEnd: () => void\n}\n\nfunction getScrollBehavior(): ScrollBehavior {\n  if (typeof window === \"undefined\" || !window.matchMedia) return \"auto\"\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    ? \"auto\"\n    : \"smooth\"\n}\n\nexport function useScrollOverflow(\n  options: UseScrollOverflowOptions = {}\n): UseScrollOverflowReturn {\n  const { scrollStep = 200, orientation = \"horizontal\" } = options\n  const scrollRef = React.useRef<HTMLDivElement | null>(null)\n  const [hasOverflow, setHasOverflow] = React.useState(false)\n  const [canScrollStart, setCanScrollStart] = React.useState(false)\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false)\n\n  const isHorizontal = orientation === \"horizontal\"\n\n  const updateScrollState = React.useCallback(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    if (isHorizontal) {\n      const scrollLeft = Math.round(el.scrollLeft)\n      const scrollWidth = el.scrollWidth\n      const clientWidth = el.clientWidth\n\n      setHasOverflow(scrollWidth > clientWidth)\n      setCanScrollStart(scrollLeft > 0)\n      setCanScrollEnd(scrollLeft + clientWidth < scrollWidth - 1)\n    } else {\n      const scrollTop = Math.round(el.scrollTop)\n      const scrollHeight = el.scrollHeight\n      const clientHeight = el.clientHeight\n\n      setHasOverflow(scrollHeight > clientHeight)\n      setCanScrollStart(scrollTop > 0)\n      setCanScrollEnd(scrollTop + clientHeight < scrollHeight - 1)\n    }\n  }, [isHorizontal])\n\n  React.useEffect(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    updateScrollState()\n\n    let observer: ResizeObserver | null = null\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(() => {\n        updateScrollState()\n      })\n      observer.observe(el)\n      for (const child of el.children) {\n        observer.observe(child)\n      }\n    }\n\n    el.addEventListener(\"scroll\", updateScrollState, { passive: true })\n\n    return () => {\n      observer?.disconnect()\n      el.removeEventListener(\"scroll\", updateScrollState)\n    }\n  }, [updateScrollState])\n\n  const scrollToStartFn = React.useCallback(() => {\n    scrollRef.current?.scrollBy({\n      [isHorizontal ? \"left\" : \"top\"]: -scrollStep,\n      behavior: getScrollBehavior(),\n    })\n  }, [scrollStep, isHorizontal])\n\n  const scrollToEndFn = React.useCallback(() => {\n    scrollRef.current?.scrollBy({\n      [isHorizontal ? \"left\" : \"top\"]: scrollStep,\n      behavior: getScrollBehavior(),\n    })\n  }, [scrollStep, isHorizontal])\n\n  return {\n    scrollRef,\n    hasOverflow,\n    canScrollStart,\n    canScrollEnd,\n    scrollToStart: scrollToStartFn,\n    scrollToEnd: scrollToEndFn,\n  }\n}\n\nconst ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z\" />\n  </svg>\n)\n\nconst ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z\" />\n  </svg>\n)\n\nconst ChevronUpIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z\" />\n  </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  container: {\n    position: \"relative\",\n    display: \"flex\",\n  },\n  containerHorizontal: {\n    alignItems: \"center\",\n  },\n  containerVertical: {\n    flexDirection: \"column\",\n  },\n  fade: {\n    position: \"absolute\",\n    zIndex: 10,\n    pointerEvents: \"none\",\n  },\n  fadeHorizontalStart: {\n    left: 0,\n    top: 0,\n    bottom: 0,\n  },\n  fadeHorizontalEnd: {\n    right: 0,\n    top: 0,\n    bottom: 0,\n  },\n  fadeVerticalStart: {\n    top: 0,\n    left: 0,\n    right: 0,\n  },\n  fadeVerticalEnd: {\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  shadowHorizontalStart: {\n    boxShadow: \"inset 8px 0 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowHorizontalEnd: {\n    boxShadow: \"inset -8px 0 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowVerticalStart: {\n    boxShadow: \"inset 0 8px 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowVerticalEnd: {\n    boxShadow: \"inset 0 -8px 6px -6px rgba(0,0,0,0.08)\",\n  },\n  arrowButton: {\n    ...nativeControl,\n    position: \"absolute\",\n    zIndex: 20,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n  },\n  arrowHorizontalStart: {\n    ...boxModel,\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowHorizontalEnd: {\n    ...boxModel,\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowVerticalStart: {\n    ...boxModel,\n    top: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowVerticalEnd: {\n    ...boxModel,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowBadge: {\n    ...boxModel,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    backgroundColor: tokens.grayA8,\n    ...shorthands.borderRadius(tokens.radiusSm),\n    backdropFilter: \"blur(4px)\",\n    color: tokens.gray1,\n    \":hover\": {\n      backgroundColor: tokens.grayA12,\n    },\n  },\n  arrowIcon: {\n    ...boxModel,\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  scrollAreaRoot: {\n    ...shorthands.overflow(\"hidden\"),\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  scrollAreaRootHorizontal: {\n    ...boxModel,\n    minWidth: 0,\n  },\n  scrollAreaRootVertical: {\n    ...boxModel,\n    minHeight: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  scrollAreaRootScrollbarHorizontal: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  scrollAreaRootScrollbarVertical: {\n    display: \"flex\",\n    flexDirection: \"row\",\n  },\n  viewport: {\n    ...boxModel,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline\n    // <style> needs a nonce (Radix's took the viewport's).\n    scrollbarWidth: \"none\",\n    \"::-webkit-scrollbar\": { display: \"none\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  // The content wrapper keeps Radix's display:table, which grows to the content's width.\n  content: { display: \"table\" },\n  viewportHorizontal: {\n    \"& > div\": {\n      display: \"flex\",\n      flexDirection: \"row\",\n    },\n  },\n  viewportVertical: {\n    ...boxModel,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: 0,\n  },\n  viewportFlex: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  scrollbar: {\n    ...boxModel,\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  scrollbarHidden: {\n    display: \"none\",\n  },\n  scrollbarHorizontal: {\n    ...boxModel,\n    height: \"0.5rem\",\n    flexDirection: \"column\",\n    // The 1px inset along the scroll axis is margin, not padding: Base UI sizes the thumb from the\n    // track's offset size without subtracting padding (see ScrollArea's tracks).\n    ...shorthands.padding(\"1px\", \"0\"),\n    ...shorthands.margin(\"0\", \"1px\"),\n  },\n  scrollbarVertical: {\n    ...boxModel,\n    width: \"0.5rem\",\n    flexDirection: \"row\",\n    ...shorthands.padding(\"0\", \"1px\"),\n    ...shorthands.margin(\"1px\", \"0\"),\n  },\n  thumb: {\n    backgroundColor: tokens.grayA8,\n  },\n})\n\n// Declared in Zenith in their Radix-era shape, a div's props, not derived from Base UI's, whose\n// types would carry its internals into the published declarations.\nexport type ScrollOverflowProps = Omit<React.ComponentProps<\"div\">, \"dir\"> &\n  UseScrollOverflowOptions & {\n    /** Text direction of the region and of its thumb position. */\n    dir?: \"ltr\" | \"rtl\"\n    /**\n     * Only `\"hover\"` has an effect, as in earlier releases: with `scrollbar`, the track is not shown\n     * until the content overflows. Every other value looks the same, because the track is always\n     * mounted.\n     */\n    type?: \"auto\" | \"always\" | \"scroll\" | \"hover\"\n    /** Accepted for compatibility and ignored: Base UI manages track visibility itself. */\n    scrollHideDelay?: number\n    /** Accepted for compatibility and ignored: the root's children are the viewport and track. */\n    asChild?: boolean\n    /** Show navigation arrow buttons on edges. Default: false */\n    arrows?: boolean\n    /** Show gradient fade indicators on edges. Default: true */\n    gradients?: boolean\n    /** Gradient width in pixels. Default: 40 */\n    gradientWidth?: number\n    /** Gradient base color (CSS value). Should match the parent background. Default: the Zenith body token. */\n    gradientColor?: string\n    /** Show inset shadow on overflow edges. Default: true */\n    shadow?: boolean\n    /** Show a styled scrollbar track. Default: false */\n    scrollbar?: boolean\n  }\n\nexport const ScrollOverflow = React.forwardRef<\n  HTMLDivElement,\n  ScrollOverflowProps\n>(function ScrollOverflow(\n  {\n    className,\n    children,\n    arrows = false,\n    gradients = true,\n    gradientWidth = 40,\n    gradientColor = tokens.body,\n    shadow = true,\n    scrollbar = false,\n    scrollStep,\n    orientation = \"horizontal\",\n    dir = \"ltr\",\n    // Radix-only: its visibility and slotting have no Base UI counterpart (see the prop docs).\n    type,\n    scrollHideDelay: _scrollHideDelay,\n    asChild: _asChild,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const scrollbarStyles = useScrollbarStyles()\n  const {\n    scrollRef,\n    hasOverflow,\n    canScrollStart,\n    canScrollEnd,\n    scrollToStart,\n    scrollToEnd,\n  } = useScrollOverflow({ scrollStep, orientation })\n\n  const isHorizontal = orientation === \"horizontal\"\n  // Radix's hover scrollbar was the one type that dropped the track (no forceMount) while the\n  // content fit; the others kept it mounted. Base UI's track stays mounted, so hide it likewise.\n  const showTrack = scrollbar && !(type === \"hover\" && !hasOverflow)\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // Only handle when the viewport itself is focused, not children\n    if (e.target !== e.currentTarget) return\n\n    const prevKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\"\n    const nextKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\"\n\n    switch (e.key) {\n      case prevKey:\n        e.preventDefault()\n        scrollToStart()\n        break\n      case nextKey:\n        e.preventDefault()\n        scrollToEnd()\n        break\n      case \"Home\":\n        e.preventDefault()\n        scrollRef.current?.scrollTo({\n          [isHorizontal ? \"left\" : \"top\"]: 0,\n          behavior: \"smooth\",\n        })\n        break\n      case \"End\":\n        e.preventDefault()\n        scrollRef.current?.scrollTo({\n          [isHorizontal ? \"left\" : \"top\"]: isHorizontal\n            ? scrollRef.current.scrollWidth\n            : scrollRef.current.scrollHeight,\n          behavior: \"smooth\",\n        })\n        break\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"scroll-overflow\"\n      {...{ [SLOT_ATTR]: \"scroll-overflow\" }}\n      data-orientation={orientation}\n      data-has-overflow={hasOverflow || undefined}\n      data-can-scroll-start={canScrollStart || undefined}\n      data-can-scroll-end={canScrollEnd || undefined}\n      className={mergeClasses(\n        styles.container,\n        isHorizontal ? styles.containerHorizontal : styles.containerVertical,\n        className\n      )}\n    >\n      {/* Start gradient + shadow */}\n      {gradients && canScrollStart && (\n        <div\n          data-slot=\"scroll-overflow-fade-start\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-fade-start\" }}\n          aria-hidden=\"true\"\n          className={mergeClasses(\n            styles.fade,\n            isHorizontal\n              ? styles.fadeHorizontalStart\n              : styles.fadeVerticalStart,\n            shadow &&\n              (isHorizontal\n                ? styles.shadowHorizontalStart\n                : styles.shadowVerticalStart)\n          )}\n          style={\n            isHorizontal\n              ? {\n                  width: gradientWidth,\n                  background: `linear-gradient(to right, ${gradientColor}, transparent)`,\n                }\n              : {\n                  height: gradientWidth,\n                  background: `linear-gradient(to bottom, ${gradientColor}, transparent)`,\n                }\n          }\n        />\n      )}\n\n      {/* Start arrow button */}\n      {arrows && canScrollStart && (\n        <button\n          data-slot=\"scroll-overflow-arrow-start\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-start\" }}\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isHorizontal ? \"Scroll left\" : \"Scroll up\"}\n          onClick={scrollToStart}\n          className={mergeClasses(\n            styles.arrowButton,\n            isHorizontal\n              ? styles.arrowHorizontalStart\n              : styles.arrowVerticalStart\n          )}\n        >\n          <span\n            data-slot=\"scroll-overflow-arrow-icon\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n            className={styles.arrowBadge}\n          >\n            {isHorizontal ? (\n              <ChevronLeftIcon className={styles.arrowIcon} />\n            ) : (\n              <ChevronUpIcon className={styles.arrowIcon} />\n            )}\n          </span>\n        </button>\n      )}\n\n      {/* Base UI ScrollArea; Radix's inline <style> is not rendered, the viewport's styles hide the native scrollbars. */}\n      <DirectionProvider direction={dir}>\n        <CSPProvider disableStyleElements>\n          <Primitive.Root\n            data-slot=\"scroll-overflow-root\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-root\" }}\n            {...props}\n            dir={dir}\n            className={mergeClasses(\n              styles.scrollAreaRoot,\n              isHorizontal\n                ? styles.scrollAreaRootHorizontal\n                : styles.scrollAreaRootVertical,\n              showTrack &&\n                (isHorizontal\n                  ? styles.scrollAreaRootScrollbarHorizontal\n                  : styles.scrollAreaRootScrollbarVertical)\n            )}\n          >\n            <Primitive.Viewport\n              ref={scrollRef}\n              data-slot=\"scroll-overflow-viewport\"\n              {...{ [SLOT_ATTR]: \"scroll-overflow-viewport\" }}\n              tabIndex={hasOverflow ? 0 : -1}\n              onKeyDown={handleKeyDown}\n              className={mergeClasses(\n                styles.viewport,\n                isHorizontal && styles.viewportHorizontal,\n                scrollbar && styles.viewportFlex,\n                !isHorizontal && styles.viewportVertical\n              )}\n              // Only the axis with a track scrolls, as Radix enabled overflow per mounted scrollbar.\n              style={{\n                overflowX: isHorizontal ? \"scroll\" : \"hidden\",\n                overflowY: isHorizontal ? \"hidden\" : \"scroll\",\n              }}\n            >\n              <Primitive.Content\n                className={styles.content}\n                // Over Base UI's fit-content, as Radix's wrapper filled the viewport.\n                style={{ minWidth: \"100%\" }}\n              >\n                {children}\n              </Primitive.Content>\n            </Primitive.Viewport>\n\n            <Primitive.Scrollbar\n              keepMounted\n              orientation={orientation}\n              data-slot=\"scroll-overflow-scrollbar\"\n              {...{ [SLOT_ATTR]: \"scroll-overflow-scrollbar\" }}\n              className={mergeClasses(\n                scrollbarStyles.track,\n                showTrack ? styles.scrollbar : styles.scrollbarHidden,\n                isHorizontal\n                  ? styles.scrollbarHorizontal\n                  : styles.scrollbarVertical\n              )}\n            >\n              <Primitive.Thumb\n                data-slot=\"scroll-overflow-thumb\"\n                {...{ [SLOT_ATTR]: \"scroll-overflow-thumb\" }}\n                className={mergeClasses(scrollbarStyles.thumb, styles.thumb)}\n              />\n            </Primitive.Scrollbar>\n          </Primitive.Root>\n        </CSPProvider>\n      </DirectionProvider>\n\n      {/* End gradient + shadow */}\n      {gradients && canScrollEnd && (\n        <div\n          data-slot=\"scroll-overflow-fade-end\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-fade-end\" }}\n          aria-hidden=\"true\"\n          className={mergeClasses(\n            styles.fade,\n            isHorizontal ? styles.fadeHorizontalEnd : styles.fadeVerticalEnd,\n            shadow &&\n              (isHorizontal\n                ? styles.shadowHorizontalEnd\n                : styles.shadowVerticalEnd)\n          )}\n          style={\n            isHorizontal\n              ? {\n                  width: gradientWidth,\n                  background: `linear-gradient(to left, ${gradientColor}, transparent)`,\n                }\n              : {\n                  height: gradientWidth,\n                  background: `linear-gradient(to top, ${gradientColor}, transparent)`,\n                }\n          }\n        />\n      )}\n\n      {/* End arrow button */}\n      {arrows && canScrollEnd && (\n        <button\n          data-slot=\"scroll-overflow-arrow-end\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-end\" }}\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isHorizontal ? \"Scroll right\" : \"Scroll down\"}\n          onClick={scrollToEnd}\n          className={mergeClasses(\n            styles.arrowButton,\n            isHorizontal ? styles.arrowHorizontalEnd : styles.arrowVerticalEnd\n          )}\n        >\n          <span\n            data-slot=\"scroll-overflow-arrow-icon\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n            className={styles.arrowBadge}\n          >\n            {isHorizontal ? (\n              <ChevronRightIcon className={styles.arrowIcon} />\n            ) : (\n              <ChevronDownIcon className={styles.arrowIcon} />\n            )}\n          </span>\n        </button>\n      )}\n    </div>\n  )\n})\n"],"names":["getScrollBehavior","useScrollOverflow","options","scrollStep","orientation","scrollRef","React","hasOverflow","setHasOverflow","canScrollStart","setCanScrollStart","canScrollEnd","setCanScrollEnd","isHorizontal","updateScrollState","el","scrollLeft","scrollWidth","clientWidth","scrollTop","scrollHeight","clientHeight","observer","child","scrollToStartFn","_a","scrollToEndFn","ChevronLeftIcon","props","jsx","ChevronRightIcon","ChevronUpIcon","ChevronDownIcon","useStyles","makeZenithStyles","nativeControl","shorthands","boxModel","tokens.grayA8","tokens.radiusSm","tokens.gray1","tokens.grayA12","tokens.radiusMd","tokens.accentA8","ScrollOverflow","className","children","arrows","gradients","gradientWidth","gradientColor","tokens.body","shadow","scrollbar","dir","type","_scrollHideDelay","_asChild","ref","styles","scrollbarStyles","useScrollbarStyles","scrollToStart","scrollToEnd","showTrack","handleKeyDown","e","prevKey","nextKey","_b","jsxs","SLOT_ATTR","mergeClasses","DirectionProvider","CSPProvider","Primitive"],"mappings":"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"}
+{"version":3,"file":"scroll-overflow.js","sources":["../../../src/components/scroll-overflow/scroll-overflow.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { CSPProvider } from \"@base-ui/react/csp-provider\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { ScrollArea as Primitive } from \"@base-ui/react/scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"../scroll-area/scrollbar-styles\"\n\nexport type UseScrollOverflowOptions = {\n  /** Scroll distance per step in pixels. Default: 200 */\n  scrollStep?: number\n  /** Scroll orientation. Default: \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nexport type UseScrollOverflowReturn = {\n  /** Ref to attach to the scroll container (Base UI Viewport) */\n  scrollRef: React.RefObject<HTMLDivElement | null>\n  /** Whether the content overflows the container */\n  hasOverflow: boolean\n  /** Whether there is hidden content before the visible area (left or top) */\n  canScrollStart: boolean\n  /** Whether there is hidden content after the visible area (right or bottom) */\n  canScrollEnd: boolean\n  /** Scroll toward the start (left or up) by scrollStep */\n  scrollToStart: () => void\n  /** Scroll toward the end (right or down) by scrollStep */\n  scrollToEnd: () => void\n}\n\nfunction getScrollBehavior(): ScrollBehavior {\n  if (typeof window === \"undefined\" || !window.matchMedia) return \"auto\"\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    ? \"auto\"\n    : \"smooth\"\n}\n\nexport function useScrollOverflow(\n  options: UseScrollOverflowOptions = {}\n): UseScrollOverflowReturn {\n  const { scrollStep = 200, orientation = \"horizontal\" } = options\n  const scrollRef = React.useRef<HTMLDivElement | null>(null)\n  const [hasOverflow, setHasOverflow] = React.useState(false)\n  const [canScrollStart, setCanScrollStart] = React.useState(false)\n  const [canScrollEnd, setCanScrollEnd] = React.useState(false)\n\n  const isHorizontal = orientation === \"horizontal\"\n\n  const updateScrollState = React.useCallback(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    if (isHorizontal) {\n      const scrollLeft = Math.round(el.scrollLeft)\n      const scrollWidth = el.scrollWidth\n      const clientWidth = el.clientWidth\n\n      setHasOverflow(scrollWidth > clientWidth)\n      setCanScrollStart(scrollLeft > 0)\n      setCanScrollEnd(scrollLeft + clientWidth < scrollWidth - 1)\n    } else {\n      const scrollTop = Math.round(el.scrollTop)\n      const scrollHeight = el.scrollHeight\n      const clientHeight = el.clientHeight\n\n      setHasOverflow(scrollHeight > clientHeight)\n      setCanScrollStart(scrollTop > 0)\n      setCanScrollEnd(scrollTop + clientHeight < scrollHeight - 1)\n    }\n  }, [isHorizontal])\n\n  React.useEffect(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    updateScrollState()\n\n    let observer: ResizeObserver | null = null\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(() => {\n        updateScrollState()\n      })\n      observer.observe(el)\n      for (const child of el.children) {\n        observer.observe(child)\n      }\n    }\n\n    el.addEventListener(\"scroll\", updateScrollState, { passive: true })\n\n    return () => {\n      observer?.disconnect()\n      el.removeEventListener(\"scroll\", updateScrollState)\n    }\n  }, [updateScrollState])\n\n  const scrollToStartFn = React.useCallback(() => {\n    scrollRef.current?.scrollBy({\n      [isHorizontal ? \"left\" : \"top\"]: -scrollStep,\n      behavior: getScrollBehavior(),\n    })\n  }, [scrollStep, isHorizontal])\n\n  const scrollToEndFn = React.useCallback(() => {\n    scrollRef.current?.scrollBy({\n      [isHorizontal ? \"left\" : \"top\"]: scrollStep,\n      behavior: getScrollBehavior(),\n    })\n  }, [scrollStep, isHorizontal])\n\n  return {\n    scrollRef,\n    hasOverflow,\n    canScrollStart,\n    canScrollEnd,\n    scrollToStart: scrollToStartFn,\n    scrollToEnd: scrollToEndFn,\n  }\n}\n\nconst ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z\" />\n  </svg>\n)\n\nconst ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z\" />\n  </svg>\n)\n\nconst ChevronUpIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z\" />\n  </svg>\n)\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    viewBox=\"0 0 16 16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  container: {\n    position: \"relative\",\n    display: \"flex\",\n  },\n  containerHorizontal: {\n    alignItems: \"center\",\n  },\n  containerVertical: {\n    flexDirection: \"column\",\n  },\n  fade: {\n    position: \"absolute\",\n    zIndex: 10,\n    pointerEvents: \"none\",\n  },\n  fadeHorizontalStart: {\n    left: 0,\n    top: 0,\n    bottom: 0,\n  },\n  fadeHorizontalEnd: {\n    right: 0,\n    top: 0,\n    bottom: 0,\n  },\n  fadeVerticalStart: {\n    top: 0,\n    left: 0,\n    right: 0,\n  },\n  fadeVerticalEnd: {\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  shadowHorizontalStart: {\n    boxShadow: \"inset 8px 0 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowHorizontalEnd: {\n    boxShadow: \"inset -8px 0 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowVerticalStart: {\n    boxShadow: \"inset 0 8px 6px -6px rgba(0,0,0,0.08)\",\n  },\n  shadowVerticalEnd: {\n    boxShadow: \"inset 0 -8px 6px -6px rgba(0,0,0,0.08)\",\n  },\n  arrowButton: {\n    ...nativeControl,\n    position: \"absolute\",\n    zIndex: 20,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.padding(0),\n  },\n  arrowHorizontalStart: {\n    ...boxModel,\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowHorizontalEnd: {\n    ...boxModel,\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: \"1.5rem\",\n  },\n  arrowVerticalStart: {\n    ...boxModel,\n    top: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowVerticalEnd: {\n    ...boxModel,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: \"1.5rem\",\n  },\n  arrowBadge: {\n    ...boxModel,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    backgroundColor: tokens.grayA8,\n    ...shorthands.borderRadius(tokens.radiusSm),\n    backdropFilter: \"blur(4px)\",\n    color: tokens.gray1,\n    \":hover\": {\n      backgroundColor: tokens.grayA12,\n    },\n  },\n  arrowIcon: {\n    ...boxModel,\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  scrollAreaRoot: {\n    ...shorthands.overflow(\"hidden\"),\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  scrollAreaRootHorizontal: {\n    ...boxModel,\n    minWidth: 0,\n  },\n  scrollAreaRootVertical: {\n    ...boxModel,\n    minHeight: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  scrollAreaRootScrollbarHorizontal: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  scrollAreaRootScrollbarVertical: {\n    display: \"flex\",\n    flexDirection: \"row\",\n  },\n  viewport: {\n    ...boxModel,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline\n    // <style> needs a nonce (Radix's took the viewport's).\n    scrollbarWidth: \"none\",\n    \"::-webkit-scrollbar\": { display: \"none\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  // The content wrapper keeps Radix's display:table, which grows to the content's width.\n  content: { display: \"table\" },\n  viewportHorizontal: {\n    \"& > div\": {\n      display: \"flex\",\n      flexDirection: \"row\",\n    },\n  },\n  viewportVertical: {\n    ...boxModel,\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: 0,\n  },\n  viewportFlex: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  scrollbar: {\n    ...boxModel,\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n  },\n  scrollbarHidden: {\n    display: \"none\",\n  },\n  scrollbarHorizontal: {\n    ...boxModel,\n    height: \"0.5rem\",\n    flexDirection: \"column\",\n    // The 1px inset along the scroll axis is margin, not padding: Base UI sizes the thumb from the\n    // track's offset size without subtracting padding (see ScrollArea's tracks).\n    ...shorthands.padding(\"1px\", \"0\"),\n    ...shorthands.margin(\"0\", \"1px\"),\n  },\n  scrollbarVertical: {\n    ...boxModel,\n    width: \"0.5rem\",\n    flexDirection: \"row\",\n    ...shorthands.padding(\"0\", \"1px\"),\n    ...shorthands.margin(\"1px\", \"0\"),\n  },\n  thumb: {\n    backgroundColor: tokens.grayA8,\n  },\n})\n\n// Declared in Zenith in their Radix-era shape, a div's props, not derived from Base UI's, whose\n// types would carry its internals into the published declarations.\nexport type ScrollOverflowProps = Omit<React.ComponentProps<\"div\">, \"dir\"> &\n  UseScrollOverflowOptions & {\n    /** Text direction of the region and of its thumb position. */\n    dir?: \"ltr\" | \"rtl\"\n    /**\n     * Only `\"hover\"` has an effect, as in earlier releases: with `scrollbar`, the track is not shown\n     * until the content overflows. Every other value looks the same, because the track is always\n     * mounted.\n     */\n    type?: \"auto\" | \"always\" | \"scroll\" | \"hover\"\n    /** Accepted for compatibility and ignored: Base UI manages track visibility itself. */\n    scrollHideDelay?: number\n    /** Accepted for compatibility and ignored: the root's children are the viewport and track. */\n    asChild?: boolean\n    /** Show navigation arrow buttons on edges. Default: false */\n    arrows?: boolean\n    /** Show gradient fade indicators on edges. Default: true */\n    gradients?: boolean\n    /** Gradient width in pixels. Default: 40 */\n    gradientWidth?: number\n    /** Gradient base color (CSS value). Should match the parent background. Default: the Zenith body token. */\n    gradientColor?: string\n    /** Show inset shadow on overflow edges. Default: true */\n    shadow?: boolean\n    /** Show a styled scrollbar track. Default: false */\n    scrollbar?: boolean\n  }\n\nexport const ScrollOverflow = React.forwardRef<\n  HTMLDivElement,\n  ScrollOverflowProps\n>(function ScrollOverflow(\n  {\n    className,\n    children,\n    arrows = false,\n    gradients = true,\n    gradientWidth = 40,\n    gradientColor = tokens.body,\n    shadow = true,\n    scrollbar = false,\n    scrollStep,\n    orientation = \"horizontal\",\n    dir = \"ltr\",\n    // Radix-only: its visibility and slotting have no Base UI counterpart (see the prop docs).\n    type,\n    scrollHideDelay: _scrollHideDelay,\n    asChild: _asChild,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const scrollbarStyles = useScrollbarStyles()\n  const {\n    scrollRef,\n    hasOverflow,\n    canScrollStart,\n    canScrollEnd,\n    scrollToStart,\n    scrollToEnd,\n  } = useScrollOverflow({ scrollStep, orientation })\n\n  const isHorizontal = orientation === \"horizontal\"\n  // Radix's hover scrollbar was the one type that dropped the track (no forceMount) while the\n  // content fit; the others kept it mounted. Base UI's track stays mounted, so hide it likewise.\n  const showTrack = scrollbar && !(type === \"hover\" && !hasOverflow)\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // Only handle when the viewport itself is focused, not children\n    if (e.target !== e.currentTarget) return\n\n    const prevKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\"\n    const nextKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\"\n\n    switch (e.key) {\n      case prevKey:\n        e.preventDefault()\n        scrollToStart()\n        break\n      case nextKey:\n        e.preventDefault()\n        scrollToEnd()\n        break\n      case \"Home\":\n        e.preventDefault()\n        scrollRef.current?.scrollTo({\n          [isHorizontal ? \"left\" : \"top\"]: 0,\n          behavior: \"smooth\",\n        })\n        break\n      case \"End\":\n        e.preventDefault()\n        scrollRef.current?.scrollTo({\n          [isHorizontal ? \"left\" : \"top\"]: isHorizontal\n            ? scrollRef.current.scrollWidth\n            : scrollRef.current.scrollHeight,\n          behavior: \"smooth\",\n        })\n        break\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"scroll-overflow\"\n      {...{ [SLOT_ATTR]: \"scroll-overflow\" }}\n      data-orientation={orientation}\n      data-has-overflow={hasOverflow || undefined}\n      data-can-scroll-start={canScrollStart || undefined}\n      data-can-scroll-end={canScrollEnd || undefined}\n      className={mergeClasses(\n        styles.container,\n        isHorizontal ? styles.containerHorizontal : styles.containerVertical,\n        className\n      )}\n    >\n      {/* Start gradient + shadow */}\n      {gradients && canScrollStart && (\n        <div\n          data-slot=\"scroll-overflow-fade-start\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-fade-start\" }}\n          aria-hidden=\"true\"\n          className={mergeClasses(\n            styles.fade,\n            isHorizontal\n              ? styles.fadeHorizontalStart\n              : styles.fadeVerticalStart,\n            shadow &&\n              (isHorizontal\n                ? styles.shadowHorizontalStart\n                : styles.shadowVerticalStart)\n          )}\n          style={\n            isHorizontal\n              ? {\n                  width: gradientWidth,\n                  background: `linear-gradient(to right, ${gradientColor}, transparent)`,\n                }\n              : {\n                  height: gradientWidth,\n                  background: `linear-gradient(to bottom, ${gradientColor}, transparent)`,\n                }\n          }\n        />\n      )}\n\n      {/* Start arrow button */}\n      {arrows && canScrollStart && (\n        <button\n          data-slot=\"scroll-overflow-arrow-start\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-start\" }}\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isHorizontal ? \"Scroll left\" : \"Scroll up\"}\n          onClick={scrollToStart}\n          className={mergeClasses(\n            styles.arrowButton,\n            isHorizontal\n              ? styles.arrowHorizontalStart\n              : styles.arrowVerticalStart\n          )}\n        >\n          <span\n            data-slot=\"scroll-overflow-arrow-icon\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n            className={styles.arrowBadge}\n          >\n            {isHorizontal ? (\n              <ChevronLeftIcon className={styles.arrowIcon} />\n            ) : (\n              <ChevronUpIcon className={styles.arrowIcon} />\n            )}\n          </span>\n        </button>\n      )}\n\n      {/* Base UI ScrollArea; Radix's inline <style> is not rendered, the viewport's styles hide the native scrollbars. */}\n      <DirectionProvider direction={dir}>\n        <CSPProvider disableStyleElements>\n          <Primitive.Root\n            data-slot=\"scroll-overflow-root\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-root\" }}\n            {...props}\n            dir={dir}\n            className={mergeClasses(\n              styles.scrollAreaRoot,\n              isHorizontal\n                ? styles.scrollAreaRootHorizontal\n                : styles.scrollAreaRootVertical,\n              showTrack &&\n                (isHorizontal\n                  ? styles.scrollAreaRootScrollbarHorizontal\n                  : styles.scrollAreaRootScrollbarVertical)\n            )}\n          >\n            <Primitive.Viewport\n              ref={scrollRef}\n              data-slot=\"scroll-overflow-viewport\"\n              {...{ [SLOT_ATTR]: \"scroll-overflow-viewport\" }}\n              tabIndex={hasOverflow ? 0 : -1}\n              onKeyDown={handleKeyDown}\n              className={mergeClasses(\n                styles.viewport,\n                isHorizontal && styles.viewportHorizontal,\n                scrollbar && styles.viewportFlex,\n                !isHorizontal && styles.viewportVertical\n              )}\n              // Only the axis with a track scrolls, as Radix enabled overflow per mounted scrollbar.\n              style={{\n                overflowX: isHorizontal ? \"scroll\" : \"hidden\",\n                overflowY: isHorizontal ? \"hidden\" : \"scroll\",\n              }}\n            >\n              <Primitive.Content\n                className={styles.content}\n                // Over Base UI's fit-content, as Radix's wrapper filled the viewport.\n                style={{ minWidth: \"100%\" }}\n              >\n                {children}\n              </Primitive.Content>\n            </Primitive.Viewport>\n\n            <Primitive.Scrollbar\n              keepMounted\n              orientation={orientation}\n              data-slot=\"scroll-overflow-scrollbar\"\n              {...{ [SLOT_ATTR]: \"scroll-overflow-scrollbar\" }}\n              className={mergeClasses(\n                scrollbarStyles.track,\n                showTrack ? styles.scrollbar : styles.scrollbarHidden,\n                isHorizontal\n                  ? styles.scrollbarHorizontal\n                  : styles.scrollbarVertical\n              )}\n            >\n              <Primitive.Thumb\n                data-slot=\"scroll-overflow-thumb\"\n                {...{ [SLOT_ATTR]: \"scroll-overflow-thumb\" }}\n                className={mergeClasses(scrollbarStyles.thumb, styles.thumb)}\n              />\n            </Primitive.Scrollbar>\n          </Primitive.Root>\n        </CSPProvider>\n      </DirectionProvider>\n\n      {/* End gradient + shadow */}\n      {gradients && canScrollEnd && (\n        <div\n          data-slot=\"scroll-overflow-fade-end\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-fade-end\" }}\n          aria-hidden=\"true\"\n          className={mergeClasses(\n            styles.fade,\n            isHorizontal ? styles.fadeHorizontalEnd : styles.fadeVerticalEnd,\n            shadow &&\n              (isHorizontal\n                ? styles.shadowHorizontalEnd\n                : styles.shadowVerticalEnd)\n          )}\n          style={\n            isHorizontal\n              ? {\n                  width: gradientWidth,\n                  background: `linear-gradient(to left, ${gradientColor}, transparent)`,\n                }\n              : {\n                  height: gradientWidth,\n                  background: `linear-gradient(to top, ${gradientColor}, transparent)`,\n                }\n          }\n        />\n      )}\n\n      {/* End arrow button */}\n      {arrows && canScrollEnd && (\n        <button\n          data-slot=\"scroll-overflow-arrow-end\"\n          {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-end\" }}\n          type=\"button\"\n          tabIndex={-1}\n          aria-label={isHorizontal ? \"Scroll right\" : \"Scroll down\"}\n          onClick={scrollToEnd}\n          className={mergeClasses(\n            styles.arrowButton,\n            isHorizontal ? styles.arrowHorizontalEnd : styles.arrowVerticalEnd\n          )}\n        >\n          <span\n            data-slot=\"scroll-overflow-arrow-icon\"\n            {...{ [SLOT_ATTR]: \"scroll-overflow-arrow-icon\" }}\n            className={styles.arrowBadge}\n          >\n            {isHorizontal ? (\n              <ChevronRightIcon className={styles.arrowIcon} />\n            ) : (\n              <ChevronDownIcon className={styles.arrowIcon} />\n            )}\n          </span>\n        </button>\n      )}\n    </div>\n  )\n})\n"],"names":["getScrollBehavior","useScrollOverflow","options","scrollStep","orientation","scrollRef","React","hasOverflow","setHasOverflow","canScrollStart","setCanScrollStart","canScrollEnd","setCanScrollEnd","isHorizontal","updateScrollState","el","scrollLeft","scrollWidth","clientWidth","scrollTop","scrollHeight","clientHeight","observer","child","scrollToStartFn","_a","scrollToEndFn","ChevronLeftIcon","props","jsx","ChevronRightIcon","ChevronUpIcon","ChevronDownIcon","useStyles","makeZenithStyles","nativeControl","shorthands","boxModel","tokens.grayA8","tokens.radiusSm","tokens.gray1","tokens.grayA12","tokens.radiusMd","tokens.accentA8","ScrollOverflow","className","children","arrows","gradients","gradientWidth","gradientColor","tokens.body","shadow","scrollbar","dir","type","_scrollHideDelay","_asChild","ref","styles","scrollbarStyles","useScrollbarStyles","scrollToStart","scrollToEnd","showTrack","handleKeyDown","e","prevKey","nextKey","_b","jsxs","SLOT_ATTR","mergeClasses","DirectionProvider","CSPProvider","Primitive"],"mappings":"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"}

package/dist/components/segmented-control/segmented-control.js

@@ -2,7 +2,7 @@ import { jsx as b, jsxs as $ } from "react/jsx-runtime";
 import * as m from "react";
 import { useRef as G, useState as w, useCallback as R, useLayoutEffect as I } from "react";
 import { Radio as V } from "../../_virtual/_zenith-runtime-family_radio.js";
-import { SLOT_ATTR as t, mergeClasses as E, shorthands as n } from "@epilot/zenith-runtime/v1/core.js";
+import { SLOT_ATTR as t, mergeClasses as E, shorthands as n } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as P } from "../../styles/make-styles.js";
 import { boxModel as l, nativeControl as Y } from "../../styles/host-reset.js";
 import { accentDefault as T, accentA8 as Z, accentSoft as W, fontWeightSemibold as J, leadingXs as K, textXs as Q, spacingElement1 as g, spacingElement3 as z, body as U } from "../../tokens/index.js";

package/dist/components/segmented-control/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\"\nimport { Radio } from \"@base-ui/react/radio\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n  RadioGroupBase,\n  type RadioGroupBaseProps,\n} from \"../radio/radio-group-base\"\nimport type {\n  RadioGroupChangeDetails,\n  RadioGroupItemProps,\n  RadioGroupProps,\n} from \"../radio/radio\"\n\nexport type SegmentedControlLayout = \"hug\" | \"equal\" | \"stretch\"\n\nexport type SegmentedControlProps = RadioGroupProps & {\n  layout?: SegmentedControlLayout\n}\n\nexport type SegmentedControlItemProps = RadioGroupItemProps & {\n  icon?: React.ReactNode\n}\n\ninterface SegmentedControlContextValue {\n  layout: SegmentedControlLayout\n}\n\nconst SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    layout: \"hug\",\n  })\n\nconst useStyles = makeZenithStyles({\n  group: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.accentSoft,\n    ...shorthands.padding(tokens.spacingElement1),\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n  },\n  groupStretch: {\n    ...boxModel,\n    display: \"flex\",\n    width: \"100%\",\n  },\n  groupVertical: {\n    ...boxModel,\n    flexDirection: \"column\",\n    display: \"inline-flex\",\n    width: \"fit-content\",\n  },\n  indicator: {\n    ...boxModel,\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    zIndex: 0,\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.body,\n    // Tailwind `shadow-sm`\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n  },\n  indicatorAnimated: {\n    ...boxModel,\n    transitionProperty: \"transform, width, height\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  item: {\n    ...nativeControl,\n    position: \"relative\",\n    zIndex: 1,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    minWidth: \"3rem\",\n    // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem\n    // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.\n    // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)\n    // silently loses 4px per side. See STATUS: the scale gap is the root cause.\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.accentDefault,\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    backgroundColor: \"transparent\",\n    outlineStyle: \"none\",\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n    aspectRatio: \"auto\",\n    width: \"auto\",\n    height: \"auto\",\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":hover:not([data-checked])\": {\n      backgroundColor: tokens.accentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n      backgroundColor: \"transparent\",\n    },\n    \"&[data-checked]\": {\n      backgroundColor: \"transparent\",\n      color: tokens.accentDefault,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: \"transparent\",\n    },\n    [`& [${SLOT_ATTR}=\"radio-group-indicator\"]`]: {\n      display: \"none\",\n    },\n    // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and\n    // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.\n    [`[${SLOT_ATTR}='radio-group-indicator']`]: {\n      display: \"none\",\n    },\n  },\n  itemStretch: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    ...boxModel,\n    flexShrink: 0,\n    width: \"1rem\",\n    height: \"1rem\",\n    pointerEvents: \"none\",\n    \"& svg\": {\n      width: \"100%\",\n      height: \"100%\",\n      display: \"block\",\n    },\n  },\n  label: {\n    lineHeight: \"1rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport const SegmentedControl = React.forwardRef<\n  HTMLDivElement,\n  SegmentedControlProps\n>(function SegmentedControl(\n  {\n    className,\n    layout = \"hug\",\n    orientation = \"horizontal\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    children,\n    asChild: _asChild,\n    ...props\n  },\n  forwardedRef\n) {\n  const styles = useStyles()\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [trackedValue, setTrackedValue] = useState(defaultValue)\n  // Starts false to prevent CSS transition flash on SSR hydration\n  const [indicatorReady, setIndicatorReady] = useState(false)\n  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({\n    opacity: 0,\n  })\n\n  const isControlled = valueProp !== undefined\n  const currentValue = isControlled ? valueProp : trackedValue\n\n  const updateIndicator = useCallback(() => {\n    if (!rootRef.current) return\n    const el = rootRef.current.querySelector<HTMLElement>(\n      `[${SLOT_ATTR}=\"segmented-control-item\"][data-checked]`\n    )\n    if (!el) return\n    setIndicatorStyle({\n      opacity: 1,\n      width: el.offsetWidth,\n      height: el.offsetHeight,\n      transform: `translate(${el.offsetLeft}px, ${el.offsetTop}px)`,\n    })\n    setIndicatorReady(true)\n  }, [])\n\n  const updateItemWidths = useCallback(() => {\n    if (!rootRef.current) return\n    const items = Array.from(\n      rootRef.current.querySelectorAll<HTMLElement>(\n        `[${SLOT_ATTR}=\"segmented-control-item\"]`\n      )\n    )\n    if (!items.length) return\n    items.forEach((el) => (el.style.minWidth = \"\"))\n    if (layout !== \"equal\") return\n    const max = Math.max(...items.map((el) => el.offsetWidth))\n    items.forEach((el) => (el.style.minWidth = `${max}px`))\n  }, [layout])\n\n  // Must run before indicator effect so equalized widths are measured correctly.\n  useLayoutEffect(updateItemWidths, [updateItemWidths])\n\n  useLayoutEffect(() => {\n    if (!indicatorReady) {\n      updateIndicator()\n      return\n    }\n    const raf = requestAnimationFrame(updateIndicator)\n    return () => cancelAnimationFrame(raf)\n  }, [currentValue, indicatorReady, updateIndicator])\n\n  React.useEffect(() => {\n    if (!rootRef.current || typeof ResizeObserver === \"undefined\") return\n    let frame: number | undefined\n    const observer = new ResizeObserver(() => {\n      if (frame !== undefined) cancelAnimationFrame(frame)\n      // Equalizing one item can resize its siblings. Write in the next frame rather\n      // than during observer delivery, and measure the pill after the width pass.\n      frame = requestAnimationFrame(() => {\n        frame = undefined\n        updateItemWidths()\n        updateIndicator()\n      })\n    })\n    rootRef.current\n      .querySelectorAll<HTMLElement>(`[${SLOT_ATTR}=\"segmented-control-item\"]`)\n      .forEach((item) => observer.observe(item, { box: \"border-box\" }))\n    return () => {\n      observer.disconnect()\n      if (frame !== undefined) cancelAnimationFrame(frame)\n    }\n  }, [children, updateIndicator, updateItemWidths])\n\n  const handleValueChange = useCallback(\n    (value: string, eventDetails: RadioGroupChangeDetails) => {\n      onValueChange?.(value, eventDetails)\n      if (!isControlled && !eventDetails.isCanceled) setTrackedValue(value)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const handleRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === \"function\") {\n      forwardedRef(node)\n    } else if (forwardedRef) {\n      forwardedRef.current = node\n    }\n  }\n\n  const contextValue = React.useMemo(() => ({ layout }), [layout])\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <RadioGroupBase\n        ref={handleRef}\n        data-slot=\"segmented-control\"\n        {...{ [SLOT_ATTR]: \"segmented-control\" }}\n        data-layout={layout}\n        value={isControlled ? valueProp : undefined}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={mergeClasses(\n          styles.group,\n          layout === \"stretch\" && styles.groupStretch,\n          orientation === \"vertical\" && styles.groupVertical,\n          className\n        )}\n        {...(props as RadioGroupBaseProps)}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-indicator\"\n          {...{ [SLOT_ATTR]: \"segmented-control-indicator\" }}\n          className={mergeClasses(\n            styles.indicator,\n            indicatorReady && styles.indicatorAnimated\n          )}\n          style={indicatorStyle}\n        />\n        {children}\n      </RadioGroupBase>\n    </SegmentedControlContext.Provider>\n  )\n})\n\n// Base UI renders a <span> by default; a native button keeps the HTMLButtonElement ref, native\n// disabled and the id Radix had on the item.\nconst ITEM_ELEMENT = <button type=\"button\" />\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  SegmentedControlItemProps\n>(function SegmentedControlItem(\n  {\n    className,\n    value,\n    icon,\n    children,\n    asChild: _asChild,\n    checked: _checked,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const { layout } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Radio.Root\n      ref={ref}\n      nativeButton\n      render={ITEM_ELEMENT}\n      value={value}\n      data-slot=\"segmented-control-item\"\n      {...{ [SLOT_ATTR]: \"segmented-control-item\" }}\n      className={mergeClasses(\n        styles.item,\n        layout === \"stretch\" && styles.itemStretch,\n        className\n      )}\n      {...(props as Omit<Radio.Root.Props<string>, \"value\">)}\n    >\n      {icon && (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-item-icon\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-icon\" }}\n          className={styles.icon}\n        >\n          {icon}\n        </span>\n      )}\n      {children && (\n        <span\n          data-slot=\"segmented-control-item-label\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-label\" }}\n          className={styles.label}\n        >\n          {children}\n        </span>\n      )}\n    </Radio.Root>\n  )\n})\n"],"names":["SegmentedControlContext","React","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement1","tokens.accentSoft","tokens.body","nativeControl","tokens.spacingElement3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.accentDefault","tokens.accentA8","SLOT_ATTR","SegmentedControl","className","layout","orientation","valueProp","defaultValue","onValueChange","children","_asChild","props","forwardedRef","styles","rootRef","useRef","trackedValue","setTrackedValue","useState","indicatorReady","setIndicatorReady","indicatorStyle","setIndicatorStyle","isControlled","currentValue","updateIndicator","useCallback","el","updateItemWidths","items","max","useLayoutEffect","raf","frame","observer","item","handleValueChange","value","eventDetails","handleRef","node","contextValue","jsx","jsxs","RadioGroupBase","mergeClasses","ITEM_ELEMENT","SegmentedControlItem","icon","_checked","ref","Radio"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\"\nimport { Radio } from \"@base-ui/react/radio\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport {\n  RadioGroupBase,\n  type RadioGroupBaseProps,\n} from \"../radio/radio-group-base\"\nimport type {\n  RadioGroupChangeDetails,\n  RadioGroupItemProps,\n  RadioGroupProps,\n} from \"../radio/radio\"\n\nexport type SegmentedControlLayout = \"hug\" | \"equal\" | \"stretch\"\n\nexport type SegmentedControlProps = RadioGroupProps & {\n  layout?: SegmentedControlLayout\n}\n\nexport type SegmentedControlItemProps = RadioGroupItemProps & {\n  icon?: React.ReactNode\n}\n\ninterface SegmentedControlContextValue {\n  layout: SegmentedControlLayout\n}\n\nconst SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    layout: \"hug\",\n  })\n\nconst useStyles = makeZenithStyles({\n  group: {\n    ...boxModel,\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.accentSoft,\n    ...shorthands.padding(tokens.spacingElement1),\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n  },\n  groupStretch: {\n    ...boxModel,\n    display: \"flex\",\n    width: \"100%\",\n  },\n  groupVertical: {\n    ...boxModel,\n    flexDirection: \"column\",\n    display: \"inline-flex\",\n    width: \"fit-content\",\n  },\n  indicator: {\n    ...boxModel,\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    zIndex: 0,\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.body,\n    // Tailwind `shadow-sm`\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n  },\n  indicatorAnimated: {\n    ...boxModel,\n    transitionProperty: \"transform, width, height\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  item: {\n    ...nativeControl,\n    position: \"relative\",\n    zIndex: 1,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    minWidth: \"3rem\",\n    // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem\n    // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.\n    // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)\n    // silently loses 4px per side. See STATUS: the scale gap is the root cause.\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.accentDefault,\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    backgroundColor: \"transparent\",\n    outlineStyle: \"none\",\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n    aspectRatio: \"auto\",\n    width: \"auto\",\n    height: \"auto\",\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":hover:not([data-checked])\": {\n      backgroundColor: tokens.accentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n      backgroundColor: \"transparent\",\n    },\n    \"&[data-checked]\": {\n      backgroundColor: \"transparent\",\n      color: tokens.accentDefault,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: \"transparent\",\n    },\n    [`& [${SLOT_ATTR}=\"radio-group-indicator\"]`]: {\n      display: \"none\",\n    },\n    // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and\n    // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.\n    [`[${SLOT_ATTR}='radio-group-indicator']`]: {\n      display: \"none\",\n    },\n  },\n  itemStretch: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    ...boxModel,\n    flexShrink: 0,\n    width: \"1rem\",\n    height: \"1rem\",\n    pointerEvents: \"none\",\n    \"& svg\": {\n      width: \"100%\",\n      height: \"100%\",\n      display: \"block\",\n    },\n  },\n  label: {\n    lineHeight: \"1rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport const SegmentedControl = React.forwardRef<\n  HTMLDivElement,\n  SegmentedControlProps\n>(function SegmentedControl(\n  {\n    className,\n    layout = \"hug\",\n    orientation = \"horizontal\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    children,\n    asChild: _asChild,\n    ...props\n  },\n  forwardedRef\n) {\n  const styles = useStyles()\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [trackedValue, setTrackedValue] = useState(defaultValue)\n  // Starts false to prevent CSS transition flash on SSR hydration\n  const [indicatorReady, setIndicatorReady] = useState(false)\n  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({\n    opacity: 0,\n  })\n\n  const isControlled = valueProp !== undefined\n  const currentValue = isControlled ? valueProp : trackedValue\n\n  const updateIndicator = useCallback(() => {\n    if (!rootRef.current) return\n    const el = rootRef.current.querySelector<HTMLElement>(\n      `[${SLOT_ATTR}=\"segmented-control-item\"][data-checked]`\n    )\n    if (!el) return\n    setIndicatorStyle({\n      opacity: 1,\n      width: el.offsetWidth,\n      height: el.offsetHeight,\n      transform: `translate(${el.offsetLeft}px, ${el.offsetTop}px)`,\n    })\n    setIndicatorReady(true)\n  }, [])\n\n  const updateItemWidths = useCallback(() => {\n    if (!rootRef.current) return\n    const items = Array.from(\n      rootRef.current.querySelectorAll<HTMLElement>(\n        `[${SLOT_ATTR}=\"segmented-control-item\"]`\n      )\n    )\n    if (!items.length) return\n    items.forEach((el) => (el.style.minWidth = \"\"))\n    if (layout !== \"equal\") return\n    const max = Math.max(...items.map((el) => el.offsetWidth))\n    items.forEach((el) => (el.style.minWidth = `${max}px`))\n  }, [layout])\n\n  // Must run before indicator effect so equalized widths are measured correctly.\n  useLayoutEffect(updateItemWidths, [updateItemWidths])\n\n  useLayoutEffect(() => {\n    if (!indicatorReady) {\n      updateIndicator()\n      return\n    }\n    const raf = requestAnimationFrame(updateIndicator)\n    return () => cancelAnimationFrame(raf)\n  }, [currentValue, indicatorReady, updateIndicator])\n\n  React.useEffect(() => {\n    if (!rootRef.current || typeof ResizeObserver === \"undefined\") return\n    let frame: number | undefined\n    const observer = new ResizeObserver(() => {\n      if (frame !== undefined) cancelAnimationFrame(frame)\n      // Equalizing one item can resize its siblings. Write in the next frame rather\n      // than during observer delivery, and measure the pill after the width pass.\n      frame = requestAnimationFrame(() => {\n        frame = undefined\n        updateItemWidths()\n        updateIndicator()\n      })\n    })\n    rootRef.current\n      .querySelectorAll<HTMLElement>(`[${SLOT_ATTR}=\"segmented-control-item\"]`)\n      .forEach((item) => observer.observe(item, { box: \"border-box\" }))\n    return () => {\n      observer.disconnect()\n      if (frame !== undefined) cancelAnimationFrame(frame)\n    }\n  }, [children, updateIndicator, updateItemWidths])\n\n  const handleValueChange = useCallback(\n    (value: string, eventDetails: RadioGroupChangeDetails) => {\n      onValueChange?.(value, eventDetails)\n      if (!isControlled && !eventDetails.isCanceled) setTrackedValue(value)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const handleRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === \"function\") {\n      forwardedRef(node)\n    } else if (forwardedRef) {\n      forwardedRef.current = node\n    }\n  }\n\n  const contextValue = React.useMemo(() => ({ layout }), [layout])\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <RadioGroupBase\n        ref={handleRef}\n        data-slot=\"segmented-control\"\n        {...{ [SLOT_ATTR]: \"segmented-control\" }}\n        data-layout={layout}\n        value={isControlled ? valueProp : undefined}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={mergeClasses(\n          styles.group,\n          layout === \"stretch\" && styles.groupStretch,\n          orientation === \"vertical\" && styles.groupVertical,\n          className\n        )}\n        {...(props as RadioGroupBaseProps)}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-indicator\"\n          {...{ [SLOT_ATTR]: \"segmented-control-indicator\" }}\n          className={mergeClasses(\n            styles.indicator,\n            indicatorReady && styles.indicatorAnimated\n          )}\n          style={indicatorStyle}\n        />\n        {children}\n      </RadioGroupBase>\n    </SegmentedControlContext.Provider>\n  )\n})\n\n// Base UI renders a <span> by default; a native button keeps the HTMLButtonElement ref, native\n// disabled and the id Radix had on the item.\nconst ITEM_ELEMENT = <button type=\"button\" />\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  SegmentedControlItemProps\n>(function SegmentedControlItem(\n  {\n    className,\n    value,\n    icon,\n    children,\n    asChild: _asChild,\n    checked: _checked,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const { layout } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Radio.Root\n      ref={ref}\n      nativeButton\n      render={ITEM_ELEMENT}\n      value={value}\n      data-slot=\"segmented-control-item\"\n      {...{ [SLOT_ATTR]: \"segmented-control-item\" }}\n      className={mergeClasses(\n        styles.item,\n        layout === \"stretch\" && styles.itemStretch,\n        className\n      )}\n      {...(props as Omit<Radio.Root.Props<string>, \"value\">)}\n    >\n      {icon && (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-item-icon\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-icon\" }}\n          className={styles.icon}\n        >\n          {icon}\n        </span>\n      )}\n      {children && (\n        <span\n          data-slot=\"segmented-control-item-label\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-label\" }}\n          className={styles.label}\n        >\n          {children}\n        </span>\n      )}\n    </Radio.Root>\n  )\n})\n"],"names":["SegmentedControlContext","React","useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingElement1","tokens.accentSoft","tokens.body","nativeControl","tokens.spacingElement3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.accentDefault","tokens.accentA8","SLOT_ATTR","SegmentedControl","className","layout","orientation","valueProp","defaultValue","onValueChange","children","_asChild","props","forwardedRef","styles","rootRef","useRef","trackedValue","setTrackedValue","useState","indicatorReady","setIndicatorReady","indicatorStyle","setIndicatorStyle","isControlled","currentValue","updateIndicator","useCallback","el","updateItemWidths","items","max","useLayoutEffect","raf","frame","observer","item","handleValueChange","value","eventDetails","handleRef","node","contextValue","jsx","jsxs","RadioGroupBase","mergeClasses","ITEM_ELEMENT","SegmentedControlItem","icon","_checked","ref","Radio"],"mappings":";;;;;;;;;AAkCA,MAAMA,IACJC,EAAM,cAA4C;AAAA,EAChD,QAAQ;AACV,CAAC,GAEGC,IAAYC,EAAiB;AAAA,EACjC,OAAO;AAAA,IACL,GAAGC;AAAA,IACH,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,GAAGD,EAAW,aAAa,QAAQ;AAAA,IACnC,iBAAiBE;AAAAA,IACjB,GAAGF,EAAW,QAAQC,CAAsB;AAAA,IAC5C,GAAGD,EAAW,OAAO,GAAG;AAAA,IACxB,WAAW;AAAA,EAAA;AAAA,EAEb,cAAc;AAAA,IACZ,GAAGD;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,eAAe;AAAA,IACb,GAAGA;AAAA,IACH,eAAe;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,GAAGA;AAAA,IACH,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,GAAGC,EAAW,aAAa,QAAQ;AAAA,IACnC,iBAAiBG;AAAAA;AAAAA,IAEjB,WAAW;AAAA,EAAA;AAAA,EAEb,mBAAmB;AAAA,IACjB,GAAGJ;AAAA,IACH,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,MAAM;AAAA,IACJ,GAAGK;AAAA,IACH,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGJ,EAAW,IAAIC,CAAsB;AAAA,IACxC,GAAGD,EAAW,aAAa,QAAQ;AAAA,IACnC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKV,aAAaK;AAAAA,IACb,cAAcA;AAAAA,IACd,YAAYJ;AAAAA,IACZ,eAAeA;AAAAA,IACf,UAAUK;AAAAA,IACV,YAAYC;AAAAA,IACZ,YAAYC;AAAAA,IACZ,OAAOC;AAAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,GAAGT,EAAW,OAAO,GAAG;AAAA,IACxB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,8BAA8B;AAAA,MAC5B,iBAAiBE;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAcQ;AAAAA,IAAO;AAAA,IAEvB,oBAAoB;AAAA,MAClB,eAAe;AAAA,MACf,SAAS;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,IAEnB,mBAAmB;AAAA,MACjB,iBAAiB;AAAA,MACjB,OAAOD;AAAAA,IAAO;AAAA,IAEhB,kCAAkC;AAAA,MAChC,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAAC,MAAME,CAAS,2BAA2B,GAAG;AAAA,MAC5C,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA,IAIX,CAAC,IAAIA,CAAS,2BAA2B,GAAG;AAAA,MAC1C,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,aAAa;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA,IACJ,GAAGZ;AAAA,IACH,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,EAAA;AAEhB,CAAC,GAEYa,KAAmBhB,EAAM,WAGpC,SACA;AAAA,EACE,WAAAiB;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,aAAAC,IAAc;AAAA,EACd,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAASC;AAAA,EACT,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAS1B,EAAA,GACT2B,IAAUC,EAAuB,IAAI,GACrC,CAACC,GAAcC,CAAe,IAAIC,EAASX,CAAY,GAEvD,CAACY,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,CAACG,GAAgBC,CAAiB,IAAIJ,EAA8B;AAAA,IACxE,SAAS;AAAA,EAAA,CACV,GAEKK,IAAejB,MAAc,QAC7BkB,IAAeD,IAAejB,IAAYU,GAE1CS,IAAkBC,EAAY,MAAM;AACxC,QAAI,CAACZ,EAAQ,QAAS;AACtB,UAAMa,IAAKb,EAAQ,QAAQ;AAAA,MACzB,IAAIb,CAAS;AAAA,IAAA;AAEf,IAAK0B,MACLL,EAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAOK,EAAG;AAAA,MACV,QAAQA,EAAG;AAAA,MACX,WAAW,aAAaA,EAAG,UAAU,OAAOA,EAAG,SAAS;AAAA,IAAA,CACzD,GACDP,EAAkB,EAAI;AAAA,EACxB,GAAG,CAAA,CAAE,GAECQ,IAAmBF,EAAY,MAAM;AACzC,QAAI,CAACZ,EAAQ,QAAS;AACtB,UAAMe,IAAQ,MAAM;AAAA,MAClBf,EAAQ,QAAQ;AAAA,QACd,IAAIb,CAAS;AAAA,MAAA;AAAA,IACf;AAIF,QAFI,CAAC4B,EAAM,WACXA,EAAM,QAAQ,CAACF,MAAQA,EAAG,MAAM,WAAW,EAAG,GAC1CvB,MAAW,SAAS;AACxB,UAAM0B,IAAM,KAAK,IAAI,GAAGD,EAAM,IAAI,CAACF,MAAOA,EAAG,WAAW,CAAC;AACzD,IAAAE,EAAM,QAAQ,CAACF,MAAQA,EAAG,MAAM,WAAW,GAAGG,CAAG,IAAK;AAAA,EACxD,GAAG,CAAC1B,CAAM,CAAC;AAGX,EAAA2B,EAAgBH,GAAkB,CAACA,CAAgB,CAAC,GAEpDG,EAAgB,MAAM;AACpB,QAAI,CAACZ,GAAgB;AACnB,MAAAM,EAAA;AACA;AAAA,IACF;AACA,UAAMO,IAAM,sBAAsBP,CAAe;AACjD,WAAO,MAAM,qBAAqBO,CAAG;AAAA,EACvC,GAAG,CAACR,GAAcL,GAAgBM,CAAe,CAAC,GAElDvC,EAAM,UAAU,MAAM;AACpB,QAAI,CAAC4B,EAAQ,WAAW,OAAO,iBAAmB,IAAa;AAC/D,QAAImB;AACJ,UAAMC,IAAW,IAAI,eAAe,MAAM;AACxC,MAAID,MAAU,UAAW,qBAAqBA,CAAK,GAGnDA,IAAQ,sBAAsB,MAAM;AAClC,QAAAA,IAAQ,QACRL,EAAA,GACAH,EAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AACD,WAAAX,EAAQ,QACL,iBAA8B,IAAIb,CAAS,4BAA4B,EACvE,QAAQ,CAACkC,MAASD,EAAS,QAAQC,GAAM,EAAE,KAAK,aAAA,CAAc,CAAC,GAC3D,MAAM;AACX,MAAAD,EAAS,WAAA,GACLD,MAAU,UAAW,qBAAqBA,CAAK;AAAA,IACrD;AAAA,EACF,GAAG,CAACxB,GAAUgB,GAAiBG,CAAgB,CAAC;AAEhD,QAAMQ,IAAoBV;AAAA,IACxB,CAACW,GAAeC,MAA0C;AACxD,MAAA9B,KAAA,QAAAA,EAAgB6B,GAAOC,IACnB,CAACf,KAAgB,CAACe,EAAa,gBAA4BD,CAAK;AAAA,IACtE;AAAA,IACA,CAACd,GAAcf,CAAa;AAAA,EAAA,GAGxB+B,IAAY,CAACC,MAAgC;AACjD,IAAA1B,EAAQ,UAAU0B,GACd,OAAO5B,KAAiB,aAC1BA,EAAa4B,CAAI,IACR5B,MACTA,EAAa,UAAU4B;AAAA,EAE3B,GAEMC,IAAevD,EAAM,QAAQ,OAAO,EAAE,QAAAkB,MAAW,CAACA,CAAM,CAAC;AAE/D,SACE,gBAAAsC,EAACzD,EAAwB,UAAxB,EAAiC,OAAOwD,GACvC,UAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKL;AAAA,MACL,aAAU;AAAA,MACJ,CAACtC,CAAS,GAAG;AAAA,MACnB,eAAaG;AAAA,MACb,OAAOmB,IAAejB,IAAY;AAAA,MAClC,cAAAC;AAAA,MACA,eAAe6B;AAAA,MACf,aAAA/B;AAAA,MACA,WAAWwC;AAAA,QACThC,EAAO;AAAA,QACPT,MAAW,aAAaS,EAAO;AAAA,QAC/BR,MAAgB,cAAcQ,EAAO;AAAA,QACrCV;AAAA,MAAA;AAAA,MAED,GAAIQ;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAA+B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,aAAU;AAAA,YACJ,CAACzC,CAAS,GAAG;AAAA,YACnB,WAAW4C;AAAA,cACThC,EAAO;AAAA,cACPM,KAAkBN,EAAO;AAAA,YAAA;AAAA,YAE3B,OAAOQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAERZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC,GAIKqC,KAAe,gBAAAJ,EAAC,UAAA,EAAO,MAAK,SAAA,CAAS,GAE9BK,KAAuB7D,EAAM,WAGxC,SACA;AAAA,EACE,WAAAiB;AAAA,EACA,OAAAkC;AAAA,EACA,MAAAW;AAAA,EACA,UAAAvC;AAAA,EACA,SAASC;AAAA,EACT,SAASuC;AAAA,EACT,GAAGtC;AACL,GACAuC,GACA;AACA,QAAMrC,IAAS1B,EAAA,GACT,EAAE,QAAAiB,EAAA,IAAWlB,EAAM,WAAWD,CAAuB;AAE3D,SACE,gBAAA0D;AAAA,IAACQ,EAAM;AAAA,IAAN;AAAA,MACC,KAAAD;AAAA,MACA,cAAY;AAAA,MACZ,QAAQJ;AAAA,MACR,OAAAT;AAAA,MACA,aAAU;AAAA,MACJ,CAACpC,CAAS,GAAG;AAAA,MACnB,WAAW4C;AAAA,QACThC,EAAO;AAAA,QACPT,MAAW,aAAaS,EAAO;AAAA,QAC/BV;AAAA,MAAA;AAAA,MAED,GAAIQ;AAAA,MAEJ,UAAA;AAAA,QAAAqC,KACC,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,aAAU;AAAA,YACJ,CAACzC,CAAS,GAAG;AAAA,YACnB,WAAWY,EAAO;AAAA,YAEjB,UAAAmC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJvC,KACC,gBAAAiC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACJ,CAACzC,CAAS,GAAG;AAAA,YACnB,WAAWY,EAAO;AAAA,YAEjB,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}