@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.6

package/dist/components/Select/SelectPrimitive.js

@@ -1,4 +1,5 @@
 import { cn } from "../../utils/cn.js";
+import { OPTION_ROW_SIZES } from "../../utils/componentSizes.js";
 import zIndices from "../../utils/zIndices.js";
 import { useZIndex } from "../../utils/useZIndex.js";
 import { ZIndexProvider } from "../../utils/ZIndexContext.js";
@@ -99,9 +100,9 @@ var SelectLabel = React$1.forwardRef(({ className, ...props }, ref) => /* @__PUR
 	...props
 }));
 SelectLabel.displayName = RadixSelect.Label.displayName;
-var SelectItem = React$1.forwardRef(({ className, children, checkmarkPosition = "left", selectedIndicator = "checkmark", ...props }, ref) => /* @__PURE__ */ jsxs(RadixSelect.Item, {
+var SelectItem = React$1.forwardRef(({ className, children, checkmarkPosition = "left", selectedIndicator = "checkmark", size = "md", ...props }, ref) => /* @__PURE__ */ jsxs(RadixSelect.Item, {
 	ref,
-	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-space-2 text-sm outline-none focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50", selectedIndicator === "background" ? "pl-space-2 data-[state=checked]:bg-selected data-[state=checked]:focus:bg-selected-hover" : checkmarkPosition === "left" ? "pl-space-6" : "pl-space-2", className),
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-space-1 pr-space-2 outline-none focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50", OPTION_ROW_SIZES[size].minHeightClassName, size === "sm" ? "text-xs leading-4" : "text-sm", selectedIndicator === "background" ? "pl-space-2 data-[state=checked]:bg-selected data-[state=checked]:focus:bg-selected-hover" : checkmarkPosition === "left" ? "pl-space-6" : "pl-space-2", className),
 	...props,
 	children: [selectedIndicator === "checkmark" && /* @__PURE__ */ jsx("span", {
 		className: cn("absolute flex h-3.5 w-3.5 items-center justify-center", checkmarkPosition === "left" ? "left-2" : "right-2"),

package/dist/components/Select/SelectPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPrimitive.js","names":[],"sources":["../../../src/components/Select/SelectPrimitive.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CheckIcon,\n} from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\n\nexport const SelectRoot: typeof RadixSelect.Root = (props) => {\n  const [open = false, onOpenChange] = useControllableState({\n    prop: props.open,\n    defaultProp: props.defaultOpen ?? false,\n    onChange: props.onOpenChange,\n  });\n\n  return (\n    <RadixSelect.Root\n      {...props}\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={undefined}\n    />\n  );\n};\n\nexport type SelectTriggerProps = React.ComponentPropsWithoutRef<\n  typeof RadixSelect.Trigger\n> & {\n  iconClassName?: string;\n};\n\nexport const SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Trigger>,\n  SelectTriggerProps\n>(({ className, children, iconClassName, ...props }, ref) => {\n  if (props.asChild) {\n    return (\n      <RadixSelect.Trigger\n        ref={ref}\n        className={cn(\n          'flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1',\n          className\n        )}\n        {...props}\n      >\n        {props.asChild ? children : <span>{children}</span>}\n      </RadixSelect.Trigger>\n    );\n  }\n\n  return (\n    <RadixSelect.Trigger\n      ref={ref}\n      className={cn(\n        'flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <RadixSelect.Icon asChild>\n        <span\n          aria-hidden\n          className={cn('inline-flex h-4 w-4 text-icon-primary', iconClassName)}\n        >\n          <CaretDownIcon size=\"100%\" weight=\"regular\" />\n        </span>\n      </RadixSelect.Icon>\n    </RadixSelect.Trigger>\n  );\n});\nSelectTrigger.displayName = RadixSelect.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-space-1',\n      className\n    )}\n    {...props}\n  >\n    <CaretUpIcon aria-hidden size={16} weight=\"regular\" />\n  </RadixSelect.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = RadixSelect.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-space-1',\n      className\n    )}\n    {...props}\n  >\n    <CaretDownIcon aria-hidden size={16} weight=\"regular\" />\n  </RadixSelect.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = RadixSelect.ScrollDownButton.displayName;\n\nexport const SelectContent = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Content>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => {\n  const zIndex = useZIndex(zIndices.popover);\n\n  return (\n    <RadixSelect.Portal>\n      <RadixSelect.Content\n        ref={ref}\n        className={cn(\n          'relative max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default bg-elevated shadow-md',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className\n        )}\n        position={position}\n        {...props}\n        style={{ zIndex, ...props.style }}\n      >\n        <ZIndexProvider value={zIndex}>\n          <SelectScrollUpButton />\n          <RadixSelect.Viewport\n            className={cn(\n              'p-space-1',\n              position === 'popper' &&\n                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n            )}\n          >\n            {children}\n          </RadixSelect.Viewport>\n          <SelectScrollDownButton />\n        </ZIndexProvider>\n      </RadixSelect.Content>\n    </RadixSelect.Portal>\n  );\n});\nSelectContent.displayName = RadixSelect.Content.displayName;\n\nexport const SelectLabel = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Label>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Label>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Label\n    ref={ref}\n    className={cn(\n      'py-1.5 pl-space-6 pr-space-2 text-sm font-semibold',\n      className\n    )}\n    {...props}\n  />\n));\nSelectLabel.displayName = RadixSelect.Label.displayName;\n\nexport const SelectItem = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Item>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Item> & {\n    checkmarkPosition?: 'left' | 'right';\n    selectedIndicator?: 'checkmark' | 'background';\n  }\n>(\n  (\n    {\n      className,\n      children,\n      checkmarkPosition = 'left',\n      selectedIndicator = 'checkmark',\n      ...props\n    },\n    ref\n  ) => (\n    <RadixSelect.Item\n      ref={ref}\n      className={cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-space-2 text-sm outline-none focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        selectedIndicator === 'background'\n          ? 'pl-space-2 data-[state=checked]:bg-selected data-[state=checked]:focus:bg-selected-hover'\n          : checkmarkPosition === 'left'\n            ? 'pl-space-6'\n            : 'pl-space-2',\n        className\n      )}\n      {...props}\n    >\n      {selectedIndicator === 'checkmark' && (\n        <span\n          className={cn(\n            'absolute flex h-3.5 w-3.5 items-center justify-center',\n            checkmarkPosition === 'left' ? 'left-2' : 'right-2'\n          )}\n        >\n          <RadixSelect.ItemIndicator>\n            <CheckIcon aria-hidden size={16} weight=\"regular\" />\n          </RadixSelect.ItemIndicator>\n        </span>\n      )}\n\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n    </RadixSelect.Item>\n  )\n);\nSelectItem.displayName = RadixSelect.Item.displayName;\n\nexport const SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Separator>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Separator\n    ref={ref}\n    className={cn(\n      '-mx-space-1 my-space-1 h-px border-b border-subtle',\n      className\n    )}\n    {...props}\n  />\n));\nSelectSeparator.displayName = RadixSelect.Separator.displayName;\n\nexport const SelectValue = RadixSelect.Value;\n"],"mappings":"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"}
+{"version":3,"file":"SelectPrimitive.js","names":[],"sources":["../../../src/components/Select/SelectPrimitive.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CheckIcon,\n} from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport {\n  OPTION_ROW_SIZES,\n  type OptionRowSize,\n} from '../../utils/componentSizes';\nimport { useZIndex } from '../../utils/useZIndex';\nimport { ZIndexProvider } from '../../utils/ZIndexContext';\nimport zIndices from '../../utils/zIndices';\n\nexport const SelectRoot: typeof RadixSelect.Root = (props) => {\n  const [open = false, onOpenChange] = useControllableState({\n    prop: props.open,\n    defaultProp: props.defaultOpen ?? false,\n    onChange: props.onOpenChange,\n  });\n\n  return (\n    <RadixSelect.Root\n      {...props}\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={undefined}\n    />\n  );\n};\n\nexport type SelectTriggerProps = React.ComponentPropsWithoutRef<\n  typeof RadixSelect.Trigger\n> & {\n  iconClassName?: string;\n};\n\nexport const SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Trigger>,\n  SelectTriggerProps\n>(({ className, children, iconClassName, ...props }, ref) => {\n  if (props.asChild) {\n    return (\n      <RadixSelect.Trigger\n        ref={ref}\n        className={cn(\n          'flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1',\n          className\n        )}\n        {...props}\n      >\n        {props.asChild ? children : <span>{children}</span>}\n      </RadixSelect.Trigger>\n    );\n  }\n\n  return (\n    <RadixSelect.Trigger\n      ref={ref}\n      className={cn(\n        'flex items-center justify-between gap-space-2 rounded-md border border-default bg-transparent p-1.5 px-2.5 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-secondary [&>span]:line-clamp-1',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <RadixSelect.Icon asChild>\n        <span\n          aria-hidden\n          className={cn('inline-flex h-4 w-4 text-icon-primary', iconClassName)}\n        >\n          <CaretDownIcon size=\"100%\" weight=\"regular\" />\n        </span>\n      </RadixSelect.Icon>\n    </RadixSelect.Trigger>\n  );\n});\nSelectTrigger.displayName = RadixSelect.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.ScrollUpButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-space-1',\n      className\n    )}\n    {...props}\n  >\n    <CaretUpIcon aria-hidden size={16} weight=\"regular\" />\n  </RadixSelect.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = RadixSelect.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.ScrollDownButton\n    ref={ref}\n    className={cn(\n      'flex cursor-default items-center justify-center py-space-1',\n      className\n    )}\n    {...props}\n  >\n    <CaretDownIcon aria-hidden size={16} weight=\"regular\" />\n  </RadixSelect.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = RadixSelect.ScrollDownButton.displayName;\n\nexport const SelectContent = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Content>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => {\n  const zIndex = useZIndex(zIndices.popover);\n\n  return (\n    <RadixSelect.Portal>\n      <RadixSelect.Content\n        ref={ref}\n        className={cn(\n          'relative max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default bg-elevated shadow-md',\n          position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          className\n        )}\n        position={position}\n        {...props}\n        style={{ zIndex, ...props.style }}\n      >\n        <ZIndexProvider value={zIndex}>\n          <SelectScrollUpButton />\n          <RadixSelect.Viewport\n            className={cn(\n              'p-space-1',\n              position === 'popper' &&\n                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n            )}\n          >\n            {children}\n          </RadixSelect.Viewport>\n          <SelectScrollDownButton />\n        </ZIndexProvider>\n      </RadixSelect.Content>\n    </RadixSelect.Portal>\n  );\n});\nSelectContent.displayName = RadixSelect.Content.displayName;\n\nexport const SelectLabel = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Label>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Label>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Label\n    ref={ref}\n    className={cn(\n      'py-1.5 pl-space-6 pr-space-2 text-sm font-semibold',\n      className\n    )}\n    {...props}\n  />\n));\nSelectLabel.displayName = RadixSelect.Label.displayName;\n\nexport const SelectItem = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Item>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Item> & {\n    checkmarkPosition?: 'left' | 'right';\n    selectedIndicator?: 'checkmark' | 'background';\n    /**\n     * Controls minimum row height and default label typography.\n     * Rich or multiline content grows intrinsically.\n     */\n    size?: OptionRowSize;\n  }\n>(\n  (\n    {\n      className,\n      children,\n      checkmarkPosition = 'left',\n      selectedIndicator = 'checkmark',\n      size = 'md',\n      ...props\n    },\n    ref\n  ) => (\n    <RadixSelect.Item\n      ref={ref}\n      className={cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-space-1 pr-space-2 outline-none focus:bg-elevated-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        OPTION_ROW_SIZES[size].minHeightClassName,\n        size === 'sm' ? 'text-xs leading-4' : 'text-sm',\n        selectedIndicator === 'background'\n          ? 'pl-space-2 data-[state=checked]:bg-selected data-[state=checked]:focus:bg-selected-hover'\n          : checkmarkPosition === 'left'\n            ? 'pl-space-6'\n            : 'pl-space-2',\n        className\n      )}\n      {...props}\n    >\n      {selectedIndicator === 'checkmark' && (\n        <span\n          className={cn(\n            'absolute flex h-3.5 w-3.5 items-center justify-center',\n            checkmarkPosition === 'left' ? 'left-2' : 'right-2'\n          )}\n        >\n          <RadixSelect.ItemIndicator>\n            <CheckIcon aria-hidden size={16} weight=\"regular\" />\n          </RadixSelect.ItemIndicator>\n        </span>\n      )}\n\n      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>\n    </RadixSelect.Item>\n  )\n);\nSelectItem.displayName = RadixSelect.Item.displayName;\n\nexport const SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof RadixSelect.Separator>,\n  React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>\n>(({ className, ...props }, ref) => (\n  <RadixSelect.Separator\n    ref={ref}\n    className={cn(\n      '-mx-space-1 my-space-1 h-px border-b border-subtle',\n      className\n    )}\n    {...props}\n  />\n));\nSelectSeparator.displayName = RadixSelect.Separator.displayName;\n\nexport const SelectValue = RadixSelect.Value;\n"],"mappings":"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"}

package/dist/components/Slider/Slider.js

@@ -20,6 +20,8 @@ function fromArray(v, wasArray) {
 */
 var Slider = ({ value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step = 1, stepLabels, disabled = false, className, variant = "default", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": testId }) => {
 	const isRange = Array.isArray(value ?? defaultValue);
+	const thumbValues = toArray(value) ?? toArray(defaultValue) ?? [0];
+	const hasMultipleThumbs = thumbValues.length > 1;
 	const labeledSteps = stepLabels?.filter((s) => s.label);
 	const hasLabels = !!labeledSteps && labeledSteps.length > 0;
 	return /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
@@ -32,15 +34,20 @@ var Slider = ({ value, defaultValue, onChange, onChangeCommitted, min = 0, max =
 		disabled,
 		onValueChange: (v) => onChange?.(fromArray(v, isRange)),
 		onValueCommit: (v) => onChangeCommitted?.(fromArray(v, isRange)),
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledby,
 		"data-testid": testId,
+		role: hasMultipleThumbs ? "group" : void 0,
+		"aria-label": hasMultipleThumbs ? ariaLabel : void 0,
+		"aria-labelledby": hasMultipleThumbs ? ariaLabelledby : void 0,
 		children: [
 			/* @__PURE__ */ jsx(SliderPrimitive.Track, {
 				className: cn("relative w-full grow overflow-hidden", variant === "thick" ? "mx-2 h-2 rounded-xs bg-surface-level-3" : "h-1.5 rounded-full bg-surface-level-4"),
 				children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: cn("absolute h-full", disabled ? "data-[disabled]:bg-brand-subtle" : "bg-control-active") })
 			}),
-			(toArray(value) ?? toArray(defaultValue) ?? [0]).map((_, i) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: cn("block rounded-full border-2 shadow transition", SELECTION_CONTROL_SIZES.sm.className, SELECTION_CONTROL_HIT_AREA_STYLES, "focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none", disabled ? "border-muted bg-surface-level-3" : "cursor-pointer border-brand-300 bg-control-thumb hover:border-brand-400 dark:border-brand-500 dark:hover:border-brand-600") }, i)),
+			thumbValues.map((_, i) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
+				...!hasMultipleThumbs && ariaLabel !== void 0 && { "aria-label": ariaLabel },
+				"aria-labelledby": hasMultipleThumbs ? void 0 : ariaLabelledby,
+				className: cn("block rounded-full border-2 shadow transition", SELECTION_CONTROL_SIZES.sm.className, SELECTION_CONTROL_HIT_AREA_STYLES, "focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none", disabled ? "border-muted bg-surface-level-3" : "cursor-pointer border-brand-300 bg-control-thumb hover:border-brand-400 dark:border-brand-500 dark:hover:border-brand-600")
+			}, i)),
 			hasLabels && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": true,
 				className: "absolute bottom-2 w-full cursor-pointer",

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils/cn';\nimport {\n  SELECTION_CONTROL_HIT_AREA_STYLES,\n  SELECTION_CONTROL_SIZES,\n} from '../../utils/componentSizes';\nimport { Text } from '../Text';\n\nexport interface SliderStepLabel {\n  value: number;\n  label?: string;\n}\n\nexport interface SliderProps {\n  /** Current value. Pass a number for a single thumb, number[] for a range slider. */\n  value?: number | number[];\n  /** Default value (uncontrolled). */\n  defaultValue?: number | number[];\n  /** Called continuously as the value changes. */\n  onChange?: (value: number | number[]) => void;\n  /** Called when the user finishes dragging (mouse/touch up or keyboard interaction ends). */\n  onChangeCommitted?: (value: number | number[]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  stepLabels?: SliderStepLabel[];\n  disabled?: boolean;\n  className?: string;\n  /** Track treatment; `thick` is the meter-weight bar. */\n  variant?: 'default' | 'thick';\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'data-testid'?: string;\n}\n\nfunction toArray(v: number | number[] | undefined): number[] | undefined {\n  if (v === undefined) return undefined;\n  return Array.isArray(v) ? v : [v];\n}\n\nfunction fromArray(v: number[], wasArray: boolean): number | number[] {\n  return wasArray ? v : v[0];\n}\n\n/**\n * Slider built on the Radix UI Slider primitive. Supports single-thumb and\n * range (multi-thumb) modes, optional labeled steps, and disabled state.\n *\n * When stepLabels are present, the Root's hit area extends to cover the label\n * row — clicking a label moves the thumb to that X position.\n */\nexport const Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  onChangeCommitted,\n  min = 0,\n  max = 100,\n  step = 1,\n  stepLabels,\n  disabled = false,\n  className,\n  variant = 'default',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  'data-testid': testId,\n}: SliderProps) => {\n  const isRange = Array.isArray(value ?? defaultValue);\n  const labeledSteps = stepLabels?.filter((s) => s.label);\n  const hasLabels = !!labeledSteps && labeledSteps.length > 0;\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        hasLabels && 'pb-7',\n        className\n      )}\n      value={toArray(value)}\n      defaultValue={toArray(defaultValue)}\n      min={min}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(v) => onChange?.(fromArray(v, isRange))}\n      onValueCommit={(v) => onChangeCommitted?.(fromArray(v, isRange))}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      data-testid={testId}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative w-full grow overflow-hidden',\n          variant === 'thick'\n            ? 'mx-2 h-2 rounded-xs bg-surface-level-3'\n            : 'h-1.5 rounded-full bg-surface-level-4'\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn(\n            'absolute h-full',\n            disabled ? 'data-[disabled]:bg-brand-subtle' : 'bg-control-active'\n          )}\n        />\n      </SliderPrimitive.Track>\n\n      {(toArray(value) ?? toArray(defaultValue) ?? [0]).map((_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          className={cn(\n            'block rounded-full border-2 shadow transition',\n            SELECTION_CONTROL_SIZES.sm.className,\n            SELECTION_CONTROL_HIT_AREA_STYLES,\n            'focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none',\n            disabled\n              ? 'border-muted bg-surface-level-3'\n              : 'cursor-pointer border-brand-300 bg-control-thumb hover:border-brand-400 dark:border-brand-500 dark:hover:border-brand-600'\n          )}\n        />\n      ))}\n\n      {hasLabels && (\n        <div aria-hidden className=\"absolute bottom-2 w-full cursor-pointer\">\n          {labeledSteps.map((s) => (\n            <Text\n              key={s.value}\n              as=\"span\"\n              variant=\"xs\"\n              className=\"absolute -translate-x-1/2 truncate text-secondary\"\n              // Left as non-tailwind on purpose for better readability on label positioning\n              style={{\n                left: `${((s.value - min) / (max - min)) * 100}%`,\n                maxWidth: `${100 / labeledSteps.length}%`,\n              }}\n            >\n              {s.label}\n            </Text>\n          ))}\n        </div>\n      )}\n    </SliderPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;AAoCA,SAAS,QAAQ,GAAwD;CACvE,IAAI,MAAM,KAAA,GAAW,OAAO,KAAA;CAC5B,OAAO,MAAM,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC;AAClC;AAEA,SAAS,UAAU,GAAa,UAAsC;CACpE,OAAO,WAAW,IAAI,EAAE;AAC1B;;;;;;;;AASA,IAAa,UAAU,EACrB,OACA,cACA,UACA,mBACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,YACA,WAAW,OACX,WACA,UAAU,WACV,cAAc,WACd,mBAAmB,gBACnB,eAAe,aACE;CACjB,MAAM,UAAU,MAAM,QAAQ,SAAS,YAAY;CACnD,MAAM,eAAe,YAAY,QAAQ,MAAM,EAAE,KAAK;CACtD,MAAM,YAAY,CAAC,CAAC,gBAAgB,aAAa,SAAS;CAE1D,OACE,qBAAC,gBAAgB,MAAjB;EACE,WAAW,GACT,4DACA,aAAa,QACb,SACF;EACA,OAAO,QAAQ,KAAK;EACpB,cAAc,QAAQ,YAAY;EAC7B;EACA;EACC;EACI;EACV,gBAAgB,MAAM,WAAW,UAAU,GAAG,OAAO,CAAC;EACtD,gBAAgB,MAAM,oBAAoB,UAAU,GAAG,OAAO,CAAC;EAC/D,cAAY;EACZ,mBAAiB;EACjB,eAAa;EAhBf,UAAA;GAkBE,oBAAC,gBAAgB,OAAjB;IACE,WAAW,GACT,wCACA,YAAY,UACR,2CACA,uCACN;IAEA,UAAA,oBAAC,gBAAgB,OAAjB,EACE,WAAW,GACT,mBACA,WAAW,oCAAoC,mBACjD,EACD,CAAA;GACoB,CAAA;IAErB,QAAQ,KAAK,KAAK,QAAQ,YAAY,KAAK,CAAC,CAAC,EAAA,CAAG,KAAK,GAAG,MACxD,oBAAC,gBAAgB,OAAjB,EAEE,WAAW,GACT,iDACA,wBAAwB,GAAG,WAC3B,mCACA,sFACA,WACI,oCACA,2HACN,EACD,GAVM,CAUN,CACF;GAEA,aACC,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IACxB,UAAA,aAAa,KAAK,MACjB,oBAAC,MAAD;KAEE,IAAG;KACH,SAAQ;KACR,WAAU;KAEV,OAAO;MACL,MAAM,IAAK,EAAE,QAAQ,QAAQ,MAAM,OAAQ,IAAI;MAC/C,UAAU,GAAG,MAAM,aAAa,OAAO;KACzC;KAEC,UAAA,EAAE;IACC,GAXC,EAAE,KAWH,CACP;GACE,CAAA;EAEa;;AAE1B"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as SliderPrimitive from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils/cn';\nimport {\n  SELECTION_CONTROL_HIT_AREA_STYLES,\n  SELECTION_CONTROL_SIZES,\n} from '../../utils/componentSizes';\nimport { Text } from '../Text';\n\nexport interface SliderStepLabel {\n  value: number;\n  label?: string;\n}\n\nexport interface SliderProps {\n  /** Current value. Pass a number for a single thumb, number[] for a range slider. */\n  value?: number | number[];\n  /** Default value (uncontrolled). */\n  defaultValue?: number | number[];\n  /** Called continuously as the value changes. */\n  onChange?: (value: number | number[]) => void;\n  /** Called when the user finishes dragging (mouse/touch up or keyboard interaction ends). */\n  onChangeCommitted?: (value: number | number[]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  stepLabels?: SliderStepLabel[];\n  disabled?: boolean;\n  className?: string;\n  /** Track treatment; `thick` is the meter-weight bar. */\n  variant?: 'default' | 'thick';\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'data-testid'?: string;\n}\n\nfunction toArray(v: number | number[] | undefined): number[] | undefined {\n  if (v === undefined) return undefined;\n  return Array.isArray(v) ? v : [v];\n}\n\nfunction fromArray(v: number[], wasArray: boolean): number | number[] {\n  return wasArray ? v : v[0];\n}\n\n/**\n * Slider built on the Radix UI Slider primitive. Supports single-thumb and\n * range (multi-thumb) modes, optional labeled steps, and disabled state.\n *\n * When stepLabels are present, the Root's hit area extends to cover the label\n * row — clicking a label moves the thumb to that X position.\n */\nexport const Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  onChangeCommitted,\n  min = 0,\n  max = 100,\n  step = 1,\n  stepLabels,\n  disabled = false,\n  className,\n  variant = 'default',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  'data-testid': testId,\n}: SliderProps) => {\n  const isRange = Array.isArray(value ?? defaultValue);\n  const thumbValues = toArray(value) ?? toArray(defaultValue) ?? [0];\n  const hasMultipleThumbs = thumbValues.length > 1;\n  const labeledSteps = stepLabels?.filter((s) => s.label);\n  const hasLabels = !!labeledSteps && labeledSteps.length > 0;\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        hasLabels && 'pb-7',\n        className\n      )}\n      value={toArray(value)}\n      defaultValue={toArray(defaultValue)}\n      min={min}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(v) => onChange?.(fromArray(v, isRange))}\n      onValueCommit={(v) => onChangeCommitted?.(fromArray(v, isRange))}\n      data-testid={testId}\n      role={hasMultipleThumbs ? 'group' : undefined}\n      aria-label={hasMultipleThumbs ? ariaLabel : undefined}\n      aria-labelledby={hasMultipleThumbs ? ariaLabelledby : undefined}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative w-full grow overflow-hidden',\n          variant === 'thick'\n            ? 'mx-2 h-2 rounded-xs bg-surface-level-3'\n            : 'h-1.5 rounded-full bg-surface-level-4'\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn(\n            'absolute h-full',\n            disabled ? 'data-[disabled]:bg-brand-subtle' : 'bg-control-active'\n          )}\n        />\n      </SliderPrimitive.Track>\n\n      {thumbValues.map((_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          {...(!hasMultipleThumbs &&\n            ariaLabel !== undefined && { 'aria-label': ariaLabel })}\n          aria-labelledby={hasMultipleThumbs ? undefined : ariaLabelledby}\n          className={cn(\n            'block rounded-full border-2 shadow transition',\n            SELECTION_CONTROL_SIZES.sm.className,\n            SELECTION_CONTROL_HIT_AREA_STYLES,\n            'focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none',\n            disabled\n              ? 'border-muted bg-surface-level-3'\n              : 'cursor-pointer border-brand-300 bg-control-thumb hover:border-brand-400 dark:border-brand-500 dark:hover:border-brand-600'\n          )}\n        />\n      ))}\n\n      {hasLabels && (\n        <div aria-hidden className=\"absolute bottom-2 w-full cursor-pointer\">\n          {labeledSteps.map((s) => (\n            <Text\n              key={s.value}\n              as=\"span\"\n              variant=\"xs\"\n              className=\"absolute -translate-x-1/2 truncate text-secondary\"\n              // Left as non-tailwind on purpose for better readability on label positioning\n              style={{\n                left: `${((s.value - min) / (max - min)) * 100}%`,\n                maxWidth: `${100 / labeledSteps.length}%`,\n              }}\n            >\n              {s.label}\n            </Text>\n          ))}\n        </div>\n      )}\n    </SliderPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;AAoCA,SAAS,QAAQ,GAAwD;CACvE,IAAI,MAAM,KAAA,GAAW,OAAO,KAAA;CAC5B,OAAO,MAAM,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC;AAClC;AAEA,SAAS,UAAU,GAAa,UAAsC;CACpE,OAAO,WAAW,IAAI,EAAE;AAC1B;;;;;;;;AASA,IAAa,UAAU,EACrB,OACA,cACA,UACA,mBACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,YACA,WAAW,OACX,WACA,UAAU,WACV,cAAc,WACd,mBAAmB,gBACnB,eAAe,aACE;CACjB,MAAM,UAAU,MAAM,QAAQ,SAAS,YAAY;CACnD,MAAM,cAAc,QAAQ,KAAK,KAAK,QAAQ,YAAY,KAAK,CAAC,CAAC;CACjE,MAAM,oBAAoB,YAAY,SAAS;CAC/C,MAAM,eAAe,YAAY,QAAQ,MAAM,EAAE,KAAK;CACtD,MAAM,YAAY,CAAC,CAAC,gBAAgB,aAAa,SAAS;CAE1D,OACE,qBAAC,gBAAgB,MAAjB;EACE,WAAW,GACT,4DACA,aAAa,QACb,SACF;EACA,OAAO,QAAQ,KAAK;EACpB,cAAc,QAAQ,YAAY;EAC7B;EACA;EACC;EACI;EACV,gBAAgB,MAAM,WAAW,UAAU,GAAG,OAAO,CAAC;EACtD,gBAAgB,MAAM,oBAAoB,UAAU,GAAG,OAAO,CAAC;EAC/D,eAAa;EACb,MAAM,oBAAoB,UAAU,KAAA;EACpC,cAAY,oBAAoB,YAAY,KAAA;EAC5C,mBAAiB,oBAAoB,iBAAiB,KAAA;EAjBxD,UAAA;GAmBE,oBAAC,gBAAgB,OAAjB;IACE,WAAW,GACT,wCACA,YAAY,UACR,2CACA,uCACN;IAEA,UAAA,oBAAC,gBAAgB,OAAjB,EACE,WAAW,GACT,mBACA,WAAW,oCAAoC,mBACjD,EACD,CAAA;GACoB,CAAA;GAEtB,YAAY,KAAK,GAAG,MACnB,oBAAC,gBAAgB,OAAjB;IAEE,GAAK,CAAC,qBACJ,cAAc,KAAA,KAAa,EAAE,cAAc,UAAU;IACvD,mBAAiB,oBAAoB,KAAA,IAAY;IACjD,WAAW,GACT,iDACA,wBAAwB,GAAG,WAC3B,mCACA,sFACA,WACI,oCACA,2HACN;GACD,GAbM,CAaN,CACF;GAEA,aACC,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IACxB,UAAA,aAAa,KAAK,MACjB,oBAAC,MAAD;KAEE,IAAG;KACH,SAAQ;KACR,WAAU;KAEV,OAAO;MACL,MAAM,IAAK,EAAE,QAAQ,QAAQ,MAAM,OAAQ,IAAI;MAC/C,UAAU,GAAG,MAAM,aAAa,OAAO;KACzC;KAEC,UAAA,EAAE;IACC,GAXC,EAAE,KAWH,CACP;GACE,CAAA;EAEa;;AAE1B"}

package/dist/components/SplitViewPane/SplitViewPane.d.ts

@@ -14,6 +14,7 @@ export type SplitViewPaneProps = {
     open: boolean;
     children: ReactNode;
     className?: string;
+    variant?: 'overlay' | 'inline';
     sidePaneId?: string;
     hideArrows?: boolean;
     customHeader?: ReactNode;
@@ -38,4 +39,4 @@ export type SplitViewPaneProps = {
     onNext?: () => void;
     onPrevious?: () => void;
 });
-export declare function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children, title, className, sidePaneId, hideArrows, customHeader, useCustomHeaderSlot, defaultWidthPx, overrideWidthPx, minWidthPx, requireConfirmationOnClose, dismissOnOutsideClick, scrollContainer, headerClassName, }: SplitViewPaneProps): import("react").JSX.Element;
+export declare function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children, title, className, variant, sidePaneId, hideArrows, customHeader, useCustomHeaderSlot, defaultWidthPx, overrideWidthPx, minWidthPx, requireConfirmationOnClose, dismissOnOutsideClick, scrollContainer, headerClassName, }: SplitViewPaneProps): import("react").JSX.Element;

package/dist/components/SplitViewPane/SplitViewPane.js

@@ -6,21 +6,15 @@ import UnsavedChangesDialog from "../UnsavedChangesDialog.js";
 import { createPortalSlot } from "../PortalSlot.js";
 import { registerOpenPane } from "./openPaneRegistry.js";
 import { HeaderTitleActionSlot, SplitViewPaneHeader } from "./SplitViewPaneHeader.js";
-import { Fragment, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { useShowChildren } from "./useShowChildren.js";
+import { useSplitViewPaneResize } from "./useSplitViewPaneResize.js";
+import { Fragment, createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Transition, TransitionChild } from "@headlessui/react";
 import * as Portal from "@radix-ui/react-portal";
 //#region packages/components/src/components/SplitViewPane/SplitViewPane.tsx
 var PaneDepth = createContext(0);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-var MINIMUM_LEFT_MARGIN_PX = 100;
-var MINIMUM_PANE_WIDTH_PX = 500;
-var KEYBOARD_RESIZE_STEP_PX = 10;
-var MAX_INITIAL_PANE_WIDTH_PX = 1280;
-var INITIAL_PANE_WIDTH_RATIO = 2 / 3;
-var RESIZE_HANDLE_OUTSET_PX = 8;
-var RESIZE_HANDLE_WIDTH_PX = 20;
 var PANE_TRANSITION_CLASSES = {
 	enter: "duration-normal motion-reduce:duration-0",
 	enterFrom: "opacity-0",
@@ -29,152 +23,37 @@ var PANE_TRANSITION_CLASSES = {
 	leaveFrom: "opacity-100",
 	leaveTo: "animate-slide-right opacity-0 motion-reduce:animate-none"
 };
-var getClientWidth = () => {
-	if (typeof document === "undefined" || typeof window === "undefined") return 0;
-	return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-};
-function getAvailableWidth(element) {
-	if (typeof document === "undefined") return 0;
-	const style = getComputedStyle(element ?? document.documentElement);
-	const reservedRight = Number.parseFloat(element ? style.right : style.getPropertyValue("--polly-chat-width"));
-	return Math.max(0, getClientWidth() - (reservedRight || 0));
-}
-function clampLeft(value, width, minPaneWidthPx = MINIMUM_PANE_WIDTH_PX) {
-	const maximumLeft = Math.max(0, width - minPaneWidthPx);
-	return Math.min(maximumLeft, Math.max(MINIMUM_LEFT_MARGIN_PX, value));
-}
-function defaultLeft(props, width) {
-	if (props.sidePaneId != null && typeof window !== "undefined") {
-		const value = window.localStorage.getItem(`SidePanelGroup:sizes:${props.sidePaneId}`);
-		const pastRatio = Number.parseFloat(value ?? "");
-		if (!Number.isNaN(pastRatio)) return clampLeft(width - (width * pastRatio - props.offsetPx), width, props.minWidthPx);
-	}
-	return clampLeft(width - (Math.min(props.defaultWidthPx ?? MAX_INITIAL_PANE_WIDTH_PX, width * INITIAL_PANE_WIDTH_RATIO) - props.offsetPx), width, props.minWidthPx);
-}
-function useShowChildren({ open, children }) {
-	const [showChildren, setShowChildren] = useState(children);
-	useIsomorphicLayoutEffect(() => {
-		if (open) setShowChildren(children);
-	}, [open, children]);
-	return showChildren;
+var CustomHeaderSlot = createPortalSlot();
+function PaneShell({ children, showConfirmModal, onDismissConfirm, onDiscard }) {
+	return /* @__PURE__ */ jsx(CustomHeaderSlot.Context, { children: /* @__PURE__ */ jsxs(HeaderTitleActionSlot.Context, { children: [children, /* @__PURE__ */ jsx(UnsavedChangesDialog, {
+		isOpen: showConfirmModal,
+		onClose: onDismissConfirm,
+		onDiscard,
+		title: "Unsaved Changes",
+		description: "You may have unsaved changes. Are you sure you want to exit?",
+		discardCopy: "Exit"
+	})] }) });
 }
-function useResize(props) {
-	const target = useRef(null);
-	const container = useRef(null);
-	const [element, setElement] = useState(null);
-	const containerRef = useCallback((node) => {
-		container.current = node;
-		setElement(node);
-	}, []);
-	const resizing = useRef(false);
-	const initialProps = useRef(props);
-	const [width, setWidth] = useState(0);
-	const [left, setLeft] = useState(MINIMUM_LEFT_MARGIN_PX);
-	useIsomorphicLayoutEffect(() => {
-		const width = getAvailableWidth();
-		setWidth(width);
-		setLeft(defaultLeft(initialProps.current, width));
-	}, []);
-	useEffect(() => {
-		if (props.overrideWidthPx) {
-			const desiredWidth = props.overrideWidthPx - props.offsetPx;
-			setLeft(clampLeft(width - desiredWidth, width, props.minWidthPx));
-		}
-	}, [
-		props.overrideWidthPx,
-		props.offsetPx,
-		props.minWidthPx,
-		width
-	]);
-	const onMouseDown = useCallback((e) => {
-		e.preventDefault();
-		resizing.current = true;
-		if (target.current) target.current.dataset.resizeHandleActive = "true";
-	}, []);
-	const onMouseUp = useCallback(() => {
-		if (resizing.current) {
-			resizing.current = false;
-			if (target.current) delete target.current.dataset.resizeHandleActive;
-		}
-	}, []);
-	const doResizeBounded = useCallback((desiredX) => {
-		if (container.current) {
-			const width = getAvailableWidth(container.current);
-			const bounded = clampLeft(desiredX, width, props.minWidthPx);
-			if (props.sidePaneId != null && width > 0) {
-				const ratio = (width - bounded) / width;
-				window.localStorage.setItem(`SidePanelGroup:sizes:${props.sidePaneId}`, ratio.toString());
-			}
-			container.current.style.left = `${bounded}px`;
-			if (target.current) {
-				target.current.style.left = `${bounded - RESIZE_HANDLE_OUTSET_PX}px`;
-				target.current.setAttribute("aria-valuenow", bounded.toString());
-			}
-			setLeft(bounded);
-		}
-	}, [props.sidePaneId, props.minWidthPx]);
-	const onMouseMove = useCallback((e) => {
-		if (resizing.current && container.current) {
-			e.preventDefault();
-			doResizeBounded(e.clientX);
-		}
-	}, [doResizeBounded]);
-	const onResize = useCallback(() => {
-		setWidth(getAvailableWidth(container.current));
-		if (container.current) doResizeBounded(Number.parseFloat(container.current.style.left));
-	}, [doResizeBounded]);
-	const onKeyDown = (e) => {
-		const desiredLeft = e.key === "ArrowLeft" ? left - KEYBOARD_RESIZE_STEP_PX : e.key === "ArrowRight" ? left + KEYBOARD_RESIZE_STEP_PX : e.key === "Home" ? 0 : e.key === "End" ? width : void 0;
-		if (desiredLeft === void 0) return;
-		e.preventDefault();
-		doResizeBounded(desiredLeft);
-	};
-	useIsomorphicLayoutEffect(() => {
-		if (!element) return;
-		onResize();
-		const observer = new ResizeObserver(onResize);
-		observer.observe(element);
-		return () => observer.disconnect();
-	}, [element, onResize]);
-	useEffect(() => {
-		window.addEventListener("resize", onResize);
-		document.addEventListener("mouseup", onMouseUp);
-		document.addEventListener("mousemove", onMouseMove);
-		return () => {
-			window.removeEventListener("resize", onResize);
-			document.removeEventListener("mouseup", onMouseUp);
-			document.removeEventListener("mousemove", onMouseMove);
-		};
-	}, [
-		onMouseMove,
-		onMouseUp,
-		onResize
-	]);
-	useEffect(() => {
-		if (props.open && left !== clampLeft(left, width, props.minWidthPx)) setLeft(defaultLeft(props, width));
-	}, [
-		props,
-		left,
-		width
-	]);
-	return {
-		left,
-		width,
-		onMouseDown,
-		onKeyDown,
-		target,
-		container,
-		containerRef
-	};
+function PaneBody({ paneZIndex, depth, header, className, children }) {
+	return /* @__PURE__ */ jsxs(ZIndexProvider, {
+		value: paneZIndex,
+		children: [header, /* @__PURE__ */ jsx(PaneDepth.Provider, {
+			value: depth + 1,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-1 flex-col", className),
+				children
+			})
+		})]
+	});
 }
-var CustomHeaderSlot = createPortalSlot();
-function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children, title, className, sidePaneId, hideArrows, customHeader, useCustomHeaderSlot, defaultWidthPx, overrideWidthPx, minWidthPx, requireConfirmationOnClose = false, dismissOnOutsideClick = false, scrollContainer = "outer", headerClassName }) {
+function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children, title, className, variant = "overlay", sidePaneId, hideArrows, customHeader, useCustomHeaderSlot, defaultWidthPx, overrideWidthPx, minWidthPx, requireConfirmationOnClose = false, dismissOnOutsideClick = false, scrollContainer = "outer", headerClassName }) {
 	const depth = useContext(PaneDepth);
 	const showChildren = useShowChildren({
 		children,
 		open
 	});
-	const { left, width, onMouseDown, onKeyDown, target, container, containerRef } = useResize({
+	const inline = variant === "inline";
+	const { left, width, onMouseDown, onKeyDown, target, container, containerRef } = useSplitViewPaneResize({
 		offsetPx: depth * 4.5 * 16,
 		sidePaneId,
 		defaultWidthPx,
@@ -188,8 +67,8 @@ function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children,
 	const paneZIndex = useZIndex(zIndices.pane);
 	const paneId = useId();
 	const titleId = title && !customHeader && !useCustomHeaderSlot ? `${paneId}-title` : void 0;
-	const maximumLeft = Math.max(0, width - (minWidthPx ?? MINIMUM_PANE_WIDTH_PX));
-	const minimumLeft = Math.min(MINIMUM_LEFT_MARGIN_PX, maximumLeft);
+	const maximumLeft = Math.max(0, width - (minWidthPx ?? 500));
+	const minimumLeft = Math.min(100, maximumLeft);
 	const handleCloseClick = useCallback((e) => {
 		if (requireConfirmationOnClose) {
 			e?.preventDefault();
@@ -200,11 +79,12 @@ function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children,
 	const handleCloseClickRef = useRef(handleCloseClick);
 	handleCloseClickRef.current = handleCloseClick;
 	useEffect(() => {
-		if (!open) return;
+		if (!open || inline) return;
 		return registerOpenPane(paneId, paneZIndex, container, (event) => handleCloseClickRef.current(event), dismissOnOutsideClick ? (event) => handleCloseClickRef.current(event) : void 0);
 	}, [
 		container,
 		dismissOnOutsideClick,
+		inline,
 		open,
 		paneId,
 		paneZIndex
@@ -222,6 +102,7 @@ function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children,
 	const renderHeader = () => {
 		if (customHeader) return customHeader;
 		if (useCustomHeaderSlot) return /* @__PURE__ */ jsx(CustomHeaderSlot.Slot, {});
+		if (title == null && onClose == null) return null;
 		return /* @__PURE__ */ jsx(SplitViewPaneHeader, {
 			title,
 			open,
@@ -234,79 +115,92 @@ function SplitViewPane({ open, onClose, onExpand, onNext, onPrevious, children,
 			titleId
 		});
 	};
-	return /* @__PURE__ */ jsx(CustomHeaderSlot.Context, { children: /* @__PURE__ */ jsxs(HeaderTitleActionSlot.Context, { children: [/* @__PURE__ */ jsx(Portal.Root, { children: /* @__PURE__ */ jsx(Transition, {
-		show: open,
-		as: Fragment,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative",
-			style: { zIndex: paneZIndex },
-			children: [/* @__PURE__ */ jsx(TransitionChild, {
-				as: Fragment,
-				...PANE_TRANSITION_CLASSES,
-				children: /* @__PURE__ */ jsx("div", {
-					ref: containerRef,
-					style: {
-						left,
-						right: `var(--polly-chat-width, 0px)`
-					},
-					className: cn("fixed inset-0 shadow-lg", !open && "pointer-events-none", scrollContainer === "outer" ? "overflow-y-auto overscroll-y-none" : "overflow-hidden"),
-					"data-testid": "split-view-pane",
-					role: titleId ? "region" : void 0,
-					"aria-labelledby": titleId,
+	const dismissConfirm = () => setShowConfirmModal(false);
+	const discardAndClose = () => {
+		setShowConfirmModal(false);
+		onCloseRef.current?.();
+	};
+	return /* @__PURE__ */ jsx(PaneShell, {
+		showConfirmModal,
+		onDismissConfirm: dismissConfirm,
+		onDiscard: discardAndClose,
+		children: inline ? /* @__PURE__ */ jsx("div", {
+			inert: !open,
+			className: cn("grid shrink-0 transition-[grid-template-columns] duration-normal ease-out motion-reduce:transition-none", open ? "grid-cols-[1fr]" : "grid-cols-[0fr]"),
+			"data-testid": "split-view-pane",
+			role: titleId ? "region" : void 0,
+			"aria-labelledby": titleId,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-col overflow-y-auto overflow-x-hidden",
+				children: /* @__PURE__ */ jsx(PaneBody, {
+					paneZIndex,
+					depth,
+					header: renderHeader(),
+					className,
+					children
+				})
+			})
+		}) : /* @__PURE__ */ jsx(Portal.Root, { children: /* @__PURE__ */ jsx(Transition, {
+			show: open,
+			as: Fragment,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				style: { zIndex: paneZIndex },
+				children: [/* @__PURE__ */ jsx(TransitionChild, {
+					as: Fragment,
+					...PANE_TRANSITION_CLASSES,
 					children: /* @__PURE__ */ jsx("div", {
-						className: cn("relative flex flex-col items-stretch bg-elevated", scrollContainer === "outer" ? "min-h-full" : "h-full"),
-						children: /* @__PURE__ */ jsxs(ZIndexProvider, {
-							value: paneZIndex,
-							children: [renderHeader(), /* @__PURE__ */ jsx(PaneDepth.Provider, {
-								value: depth + 1,
-								children: /* @__PURE__ */ jsx("div", {
-									className: cn("flex flex-1 flex-col", scrollContainer === "inner" && "min-h-0 overflow-y-auto overscroll-y-none", className),
-									children: showChildren
-								})
-							})]
+						ref: containerRef,
+						style: {
+							left,
+							right: `var(--polly-chat-width, 0px)`
+						},
+						className: cn("fixed inset-0 shadow-lg", !open && "pointer-events-none", scrollContainer === "outer" ? "overflow-y-auto overscroll-y-none" : "overflow-hidden"),
+						"data-testid": "split-view-pane",
+						role: titleId ? "region" : void 0,
+						"aria-labelledby": titleId,
+						children: /* @__PURE__ */ jsx("div", {
+							className: cn("relative flex flex-col items-stretch bg-elevated", scrollContainer === "outer" ? "min-h-full" : "h-full"),
+							children: /* @__PURE__ */ jsx(PaneBody, {
+								paneZIndex,
+								depth,
+								header: renderHeader(),
+								className: cn(scrollContainer === "inner" && "min-h-0 overflow-y-auto overscroll-y-none", className),
+								children: showChildren
+							})
 						})
 					})
-				})
-			}), /* @__PURE__ */ jsx(TransitionChild, {
-				as: Fragment,
-				...PANE_TRANSITION_CLASSES,
-				children: /* @__PURE__ */ jsx("div", {
-					ref: target,
-					role: "separator",
-					"aria-label": "Resize pane",
-					"aria-orientation": "vertical",
-					"aria-valuemin": minimumLeft,
-					"aria-valuemax": maximumLeft,
-					"aria-valuenow": left,
-					tabIndex: 0,
-					"data-split-view-pane-resize-handle": true,
-					"data-testid": "split-view-pane-resize-handle",
-					className: cn("group fixed inset-y-0 cursor-col-resize focus-visible:outline-none", !open && "pointer-events-none"),
-					style: {
-						left: left - RESIZE_HANDLE_OUTSET_PX,
-						width: RESIZE_HANDLE_WIDTH_PX,
-						zIndex: zIndices.resizeHandle
-					},
-					onMouseDown,
-					onKeyDown,
+				}), /* @__PURE__ */ jsx(TransitionChild, {
+					as: Fragment,
+					...PANE_TRANSITION_CLASSES,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "absolute inset-y-0 w-0 border-l border-subtle transition-all duration-normal group-hover:border-l-2 group-focus-visible:border-l-2 group-focus-visible:border-l-brand group-data-[resize-handle-active]:border-l-brand motion-reduce:transition-none",
-						style: { left: RESIZE_HANDLE_OUTSET_PX }
+						ref: target,
+						role: "separator",
+						"aria-label": "Resize pane",
+						"aria-orientation": "vertical",
+						"aria-valuemin": minimumLeft,
+						"aria-valuemax": maximumLeft,
+						"aria-valuenow": left,
+						tabIndex: 0,
+						"data-split-view-pane-resize-handle": true,
+						"data-testid": "split-view-pane-resize-handle",
+						className: cn("group fixed inset-y-0 cursor-col-resize focus-visible:outline-none", !open && "pointer-events-none"),
+						style: {
+							left: left - 8,
+							width: 20,
+							zIndex: zIndices.resizeHandle
+						},
+						onMouseDown,
+						onKeyDown,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "absolute inset-y-0 w-0 border-l border-subtle transition-all duration-normal group-hover:border-l-2 group-focus-visible:border-l-2 group-focus-visible:border-l-brand group-data-[resize-handle-active]:border-l-brand motion-reduce:transition-none",
+							style: { left: 8 }
+						})
 					})
-				})
-			})]
-		})
-	}) }), /* @__PURE__ */ jsx(UnsavedChangesDialog, {
-		isOpen: showConfirmModal,
-		onClose: () => setShowConfirmModal(false),
-		onDiscard: () => {
-			setShowConfirmModal(false);
-			onCloseRef.current?.();
-		},
-		title: "Unsaved Changes",
-		description: "You may have unsaved changes. Are you sure you want to exit?",
-		discardCopy: "Exit"
-	})] }) });
+				})]
+			})
+		}) })
+	});
 }
 //#endregion
 export { CustomHeaderSlot, HeaderTitleActionSlot, SplitViewPane };