@mastra/playground-ui 68.0.0 → 69.0.0-alpha.0

package/dist/{property-filter-applied-BkkIObRq.cjs.map → property-filter-applied-DuyL4S_K.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"property-filter-applied-BkkIObRq.cjs","names":["Button","XIcon","DropdownMenu","EllipsisVerticalIcon","SaveIcon","Trash2Icon","cn","menuItemButtonClass","menuItemCheckClass","CheckIcon","useState","useMemo","_Fragment","menuSearchClasses","SearchIcon","passwordManagerOptOutProps","menuEmptyClass","Spinner","TooltipProvider","Tooltip","TooltipTrigger","ButtonsGroup","ButtonsGroupText","LockIcon","TooltipContent","useState","useRef","Input","Button","XIcon","Popover","PopoverTrigger","PopoverContent"],"sources":["../src/ds/components/PropertyFilter/property-filter-actions.tsx","../src/ds/components/PropertyFilter/pick-multi-panel.tsx","../src/ds/components/PropertyFilter/property-filter-applied.tsx"],"sourcesContent":["import { EllipsisVerticalIcon, SaveIcon, Trash2Icon, XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button/Button';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu/dropdown-menu';\n\nexport type PropertyFilterActionsProps = {\n  disabled?: boolean;\n  /** Neutralize each pill's value (keep pills, clear values). Shown as a button, not a menu item. */\n  onClear?: () => void;\n  /** Fully remove all active filters. Rendered as \"Remove all filters\" inside the overflow menu. */\n  onRemoveAll?: () => void;\n  /** Persist the current filter set (typically to localStorage) for later restoration. */\n  onSave?: () => void;\n  /** Drop a previously-saved filter set. Wire only when a saved set actually exists. */\n  onRemoveSaved?: () => void;\n};\n\n/**\n * Shared action bar for filter-driven pages (traces, logs, …). Renders a\n * Clear button and an overflow menu with Remove all / Save / Remove saved actions.\n */\nexport function PropertyFilterActions({\n  disabled,\n  onClear,\n  onRemoveAll,\n  onSave,\n  onRemoveSaved,\n}: PropertyFilterActionsProps) {\n  const hasMenuItems = !!(onRemoveAll || onSave || onRemoveSaved);\n  if (!onClear && !hasMenuItems) return null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {onClear && (\n        <Button disabled={disabled} size=\"md\" onClick={onClear} icon={<XIcon />}>\n          Clear\n        </Button>\n      )}\n\n      {hasMenuItems && (\n        <DropdownMenu>\n          <DropdownMenu.Trigger asChild>\n            <Button disabled={disabled} size=\"icon-md\" aria-label=\"More filter actions\">\n              <EllipsisVerticalIcon />\n            </Button>\n          </DropdownMenu.Trigger>\n          <DropdownMenu.Content align=\"end\">\n            {onRemoveAll && (\n              <DropdownMenu.Item onSelect={() => onRemoveAll()}>\n                <XIcon />\n                Remove all filters\n              </DropdownMenu.Item>\n            )}\n            {onRemoveAll && (onSave || onRemoveSaved) && <DropdownMenu.Separator />}\n            {onSave && (\n              <DropdownMenu.Item onSelect={() => onSave()}>\n                <SaveIcon />\n                Save filters for next time\n              </DropdownMenu.Item>\n            )}\n            {onRemoveSaved && (\n              <DropdownMenu.Item onSelect={() => onRemoveSaved()}>\n                <Trash2Icon />\n                Remove saved filters\n              </DropdownMenu.Item>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu>\n      )}\n    </div>\n  );\n}\n","import { CheckIcon, SearchIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Spinner } from '@/ds/components/Spinner/spinner';\nimport { menuEmptyClass, menuItemButtonClass, menuItemCheckClass, menuSearchClasses } from '@/ds/primitives/menu-item';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { cn } from '@/lib/utils';\n\n// Same rendering as Combobox items: no visible control, a trailing check when selected.\n// Focus is on the item itself (roving via [data-pick-multi-item]).\nconst pickMultiItemClass = cn(menuItemButtonClass, 'min-w-0');\n\nfunction PickMultiItem({\n  role,\n  checked,\n  label,\n  onClick,\n}: {\n  role: 'checkbox' | 'radio';\n  checked: boolean;\n  label: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role={role}\n      aria-checked={checked}\n      data-selected={checked || undefined}\n      data-pick-multi-item=\"\"\n      title={label}\n      className={pickMultiItemClass}\n      onClick={onClick}\n    >\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      {checked && (\n        <span className={menuItemCheckClass}>\n          <CheckIcon />\n        </span>\n      )}\n    </button>\n  );\n}\n\ntype PickMultiField = Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n\nexport type PickMultiPanelProps = {\n  field: PickMultiField;\n  tokens: PropertyFilterToken[];\n  /** Always carries a value: an empty list is how the panel says \"nothing selected\". */\n  onChange: (fieldId: string, value: string | string[]) => void;\n};\n\n/**\n * Reusable body for a pick-multi side popover: optional search input plus a\n * radio group (single-select) or checkbox list (when `field.multi` is true).\n * Shared between the Filter Creator's property-picker side popover and the\n * PropertyFilterApplied pill's inline editor so both surfaces use the exact same UI.\n */\nexport function PickMultiPanel({ field, tokens, onChange }: PickMultiPanelProps) {\n  const [query, setQuery] = useState('');\n  const listClassName = 'max-h-[80dvh] overflow-auto p-1';\n\n  const filteredOptions = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return field.options;\n    return field.options.filter(o => o.label.toLowerCase().includes(q));\n  }, [field.options, query]);\n\n  const token = useMemo(() => tokens.find(t => t.fieldId === field.id), [tokens, field.id]);\n  // Fall back to `defaultValue` when no token exists — lets view-toggle fields (e.g. List mode)\n  // show their default option pre-selected before the user explicitly picks one.\n  const selectedValue = typeof token?.value === 'string' ? token.value : !field.multi ? field.defaultValue : undefined;\n  const selectedValues = useMemo<string[]>(() => {\n    const value = token?.value;\n    if (Array.isArray(value)) return value;\n    if (typeof value === 'string') return [value];\n    return [];\n  }, [token]);\n\n  return (\n    <>\n      {field.searchable !== false && (\n        <div className={menuSearchClasses.container}>\n          <SearchIcon className={menuSearchClasses.icon} />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={e => setQuery(e.target.value)}\n            placeholder={`Search ${field.label.toLowerCase()}`}\n            className={menuSearchClasses.input}\n            {...passwordManagerOptOutProps}\n            onKeyDown={e => {\n              if (e.key !== 'ArrowDown') return;\n              const panel = e.currentTarget.closest<HTMLElement>('[data-pick-multi-panel]');\n              const first = panel?.querySelector<HTMLElement>('[data-pick-multi-item]:not([disabled])');\n              if (!first) return;\n              e.preventDefault();\n              e.stopPropagation();\n              first.focus();\n            }}\n          />\n        </div>\n      )}\n\n      {field.isLoading ? (\n        <div className={cn(menuEmptyClass, 'm-1')}>\n          <Spinner size=\"sm\" className=\"size-3 text-muted-foreground\" />\n          Loading options…\n        </div>\n      ) : filteredOptions.length === 0 ? (\n        <div className={cn(menuEmptyClass, 'm-1')}>{field.emptyText ?? 'No option found.'}</div>\n      ) : field.multi ? (\n        <div className={listClassName}>\n          <>\n            {filteredOptions.map(option => {\n              const checked = selectedValues.includes(option.value);\n              return (\n                <PickMultiItem\n                  key={option.value}\n                  role=\"checkbox\"\n                  checked={checked}\n                  label={option.label}\n                  onClick={() =>\n                    onChange(\n                      field.id,\n                      checked ? selectedValues.filter(v => v !== option.value) : [...selectedValues, option.value],\n                    )\n                  }\n                />\n              );\n            })}\n          </>\n        </div>\n      ) : (\n        <div role=\"radiogroup\" className={listClassName}>\n          <>\n            {filteredOptions.map(option => (\n              <PickMultiItem\n                key={option.value}\n                role=\"radio\"\n                checked={selectedValue === option.value}\n                label={option.label}\n                onClick={() => onChange(field.id, option.value)}\n              />\n            ))}\n            {!field.omitAnyOption && (\n              <PickMultiItem\n                role=\"radio\"\n                checked={selectedValue === 'Any'}\n                label=\"Any\"\n                onClick={() => onChange(field.id, 'Any')}\n              />\n            )}\n          </>\n        </div>\n      )}\n    </>\n  );\n}\n","import { LockIcon, XIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { ButtonsGroup, ButtonsGroupText } from '../ButtonsGroup';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../Tooltip';\nimport { PickMultiPanel } from './pick-multi-panel';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Input } from '@/ds/components/Input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover/popover';\nimport { MENU_SIDE_OFFSET } from '@/ds/primitives/menu-item';\n\nexport type PropertyFilterAppliedProps = {\n  fields: PropertyFilterField[];\n  tokens: PropertyFilterToken[];\n  onTokensChange: (tokens: PropertyFilterToken[]) => void;\n  disabled?: boolean;\n  /**\n   * Field id that was just added via the Creator — rendered pill auto-focuses\n   * its input so the user can start typing immediately.\n   */\n  autoFocusFieldId?: string;\n  /**\n   * Field ids whose pills must remain visible and read-only — value stays\n   * displayed but cannot be edited or removed. Use when an upstream context\n   * (e.g. agent-scoped traces tab) pre-applies a filter that the user must\n   * not be able to clear.\n   */\n  lockedFieldIds?: readonly string[];\n  /** Tooltip content shown on hover/focus of any locked pill. */\n  lockedTooltipContent?: ReactNode;\n};\n\nfunction stringifyTokenValue(value: string | string[]) {\n  if (Array.isArray(value)) return value.length === 0 ? 'Any' : value.join(', ');\n  return value;\n}\n\nconst DEFAULT_LOCKED_TOOLTIP = 'This filter is set by the current context and cannot be removed here.';\n\nfunction lookupOptionLabel(field: PropertyFilterField, value: string | string[]): string {\n  if (field.kind === 'pick-multi' && field.options) {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return 'Any';\n      return value.map(v => field.options.find(o => o.value === v)?.label ?? v).join(', ');\n    }\n    return field.options.find(o => o.value === value)?.label ?? value;\n  }\n  return stringifyTokenValue(value);\n}\n\ntype LockedTokenPillProps = {\n  field: PropertyFilterField;\n  value: string | string[];\n  tooltipContent: ReactNode;\n};\n\nfunction LockedTokenPill({ field, value, tooltipContent }: LockedTokenPillProps) {\n  const display = lookupOptionLabel(field, value);\n  const lockA11yLabel = `${field.label} filter is locked by context`;\n\n  return (\n    <TooltipProvider delayDuration={150}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <ButtonsGroup\n            data-locked-field-id={field.id}\n            data-property-filter-pill=\"locked\"\n            tabIndex={0}\n            aria-label={lockA11yLabel}\n          >\n            <ButtonsGroupText>{field.label}</ButtonsGroupText>\n            <ButtonsGroupText>is</ButtonsGroupText>\n            <ButtonsGroupText>{display}</ButtonsGroupText>\n            <ButtonsGroupText>\n              <LockIcon />\n            </ButtonsGroupText>\n          </ButtonsGroup>\n        </TooltipTrigger>\n        <TooltipContent>{tooltipContent}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n\ntype TextTokenPillProps = {\n  field: Extract<PropertyFilterField, { kind: 'text' }>;\n  value: string;\n  onChange: (value: string) => void;\n  onRemove: () => void;\n  disabled?: boolean;\n  autoFocus?: boolean;\n};\n\nfunction TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }: TextTokenPillProps) {\n  // Local draft keeps the caret stable when the URL round-trip trims the\n  // stored value (e.g. trailing spaces). We only re-sync from the prop when\n  // the external value is genuinely different from our current (trimmed) draft.\n  const [draft, setDraft] = useState(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (draft.trim() !== value) setDraft(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  useEffect(() => {\n    if (autoFocus) inputRef.current?.focus();\n  }, [autoFocus]);\n\n  return (\n    <ButtonsGroup>\n      <ButtonsGroupText>{field.label}</ButtonsGroupText>\n      <ButtonsGroupText>is</ButtonsGroupText>\n      <Input\n        ref={inputRef}\n        disabled={disabled}\n        value={draft}\n        placeholder={field.placeholder ?? `Enter ${field.label}`}\n        onChange={e => {\n          const next = e.target.value;\n          setDraft(next);\n          // Apply live — URL and traces query update on every keystroke.\n          // Empty values persist as empty-value tokens so the pill stays visible.\n          if (next.trim() !== value) onChange(next);\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            const trimmed = draft.trim();\n            if (trimmed !== value) onChange(trimmed);\n          } else if (e.key === 'Escape') {\n            e.preventDefault();\n            setDraft(value);\n            e.currentTarget.blur();\n          }\n        }}\n      />\n      <Button\n        size=\"icon-md\"\n        type=\"button\"\n        disabled={disabled}\n        aria-label={`Remove ${field.label} filter`}\n        onMouseDown={e => e.preventDefault()}\n        onClick={onRemove}\n      >\n        <XIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\ntype PickMultiTokenPillProps = {\n  field: Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n  token: PropertyFilterToken;\n  tokens: PropertyFilterToken[];\n  onChange: (fieldId: string, value: string | string[]) => void;\n  onRemove: () => void;\n  disabled?: boolean;\n};\n\nfunction PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }: PickMultiTokenPillProps) {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <ButtonsGroup>\n      <ButtonsGroupText>{field.label}</ButtonsGroupText>\n      <ButtonsGroupText>is</ButtonsGroupText>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button type=\"button\" disabled={disabled}>\n            {stringifyTokenValue(token.value)}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" sideOffset={MENU_SIDE_OFFSET} className=\"w-64 p-0\" data-pick-multi-panel>\n          <PickMultiPanel field={field} tokens={tokens} onChange={onChange} />\n        </PopoverContent>\n      </Popover>\n      <Button\n        size=\"icon-md\"\n        type=\"button\"\n        disabled={disabled}\n        aria-label={`Remove ${field.label} filter`}\n        onClick={onRemove}\n      >\n        <XIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\n/**\n * Applied filter pills. Text/id-style tokens render with an always-active\n * input so the user can edit the value inline (and an empty token is valid —\n * it persists in the URL until the user explicitly removes it via ×).\n * Pick-multi tokens render with a clickable value that opens the same side\n * popover as the Filter Creator so the user can update selections in place.\n * Creation lives in a separate component (PropertyFilterCreator).\n */\nexport function PropertyFilterApplied({\n  fields,\n  tokens,\n  onTokensChange,\n  disabled,\n  autoFocusFieldId,\n  lockedFieldIds,\n  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP,\n}: PropertyFilterAppliedProps) {\n  if (tokens.length === 0) return null;\n\n  const lockedSet = new Set(lockedFieldIds ?? []);\n\n  const replaceTokenAt = (index: number, next: PropertyFilterToken) => {\n    const copy = [...tokens];\n    copy[index] = next;\n    onTokensChange(copy);\n  };\n\n  const removeTokenAt = (index: number) => {\n    onTokensChange(tokens.filter((_, i) => i !== index));\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      {tokens.map((token, index) => {\n        const field = fields.find(f => f.id === token.fieldId);\n        if (!field) return null;\n\n        if (lockedSet.has(token.fieldId)) {\n          return (\n            <LockedTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              value={token.value}\n              tooltipContent={lockedTooltipContent}\n            />\n          );\n        }\n\n        if (field.kind === 'text' && !Array.isArray(token.value)) {\n          return (\n            <TextTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              value={token.value}\n              disabled={disabled}\n              autoFocus={autoFocusFieldId === token.fieldId}\n              onChange={nextValue => replaceTokenAt(index, { fieldId: token.fieldId, value: nextValue })}\n              onRemove={() => removeTokenAt(index)}\n            />\n          );\n        }\n\n        if (field.kind === 'pick-multi') {\n          return (\n            <PickMultiTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              token={token}\n              tokens={tokens}\n              disabled={disabled}\n              // Unselecting everything (empty array) keeps the pill alive in a\n              // neutral state — the user explicitly removes it via ×. This lets\n              // the page-level Reset neutralize values without dropping the pill.\n              onChange={(fieldId, value) => replaceTokenAt(index, { fieldId, value })}\n              onRemove={() => removeTokenAt(index)}\n            />\n          );\n        }\n\n        return (\n          <ButtonsGroup key={`${token.fieldId}-${index}`}>\n            <ButtonsGroupText>{field.label}</ButtonsGroupText>\n            <ButtonsGroupText>is</ButtonsGroupText>\n            <ButtonsGroupText>{stringifyTokenValue(token.value)}</ButtonsGroupText>\n            <Button\n              size=\"icon-md\"\n              type=\"button\"\n              disabled={disabled}\n              aria-label={`Remove ${field.label} filter`}\n              onClick={() => removeTokenAt(index)}\n            >\n              <XIcon />\n            </Button>\n          </ButtonsGroup>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"property-filter-applied-DuyL4S_K.cjs","names":["Button","XIcon","DropdownMenu","EllipsisVerticalIcon","SaveIcon","Trash2Icon","cn","menuItemButtonClass","menuItemCheckClass","CheckIcon","useState","useMemo","_Fragment","menuSearchClasses","SearchIcon","passwordManagerOptOutProps","menuEmptyClass","Spinner","TooltipProvider","Tooltip","TooltipTrigger","ButtonsGroup","ButtonsGroupText","LockIcon","TooltipContent","useState","useRef","Input","Button","XIcon","Popover","PopoverTrigger","PopoverContent"],"sources":["../src/ds/components/PropertyFilter/property-filter-actions.tsx","../src/ds/components/PropertyFilter/pick-multi-panel.tsx","../src/ds/components/PropertyFilter/property-filter-applied.tsx"],"sourcesContent":["import { EllipsisVerticalIcon, SaveIcon, Trash2Icon, XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button/Button';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu/dropdown-menu';\n\nexport type PropertyFilterActionsProps = {\n  disabled?: boolean;\n  /** Neutralize each pill's value (keep pills, clear values). Shown as a button, not a menu item. */\n  onClear?: () => void;\n  /** Fully remove all active filters. Rendered as \"Remove all filters\" inside the overflow menu. */\n  onRemoveAll?: () => void;\n  /** Persist the current filter set (typically to localStorage) for later restoration. */\n  onSave?: () => void;\n  /** Drop a previously-saved filter set. Wire only when a saved set actually exists. */\n  onRemoveSaved?: () => void;\n};\n\n/**\n * Shared action bar for filter-driven pages (traces, logs, …). Renders a\n * Clear button and an overflow menu with Remove all / Save / Remove saved actions.\n */\nexport function PropertyFilterActions({\n  disabled,\n  onClear,\n  onRemoveAll,\n  onSave,\n  onRemoveSaved,\n}: PropertyFilterActionsProps) {\n  const hasMenuItems = !!(onRemoveAll || onSave || onRemoveSaved);\n  if (!onClear && !hasMenuItems) return null;\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {onClear && (\n        <Button disabled={disabled} size=\"md\" onClick={onClear} icon={<XIcon />}>\n          Clear\n        </Button>\n      )}\n\n      {hasMenuItems && (\n        <DropdownMenu>\n          <DropdownMenu.Trigger asChild>\n            <Button disabled={disabled} size=\"icon-md\" aria-label=\"More filter actions\">\n              <EllipsisVerticalIcon />\n            </Button>\n          </DropdownMenu.Trigger>\n          <DropdownMenu.Content align=\"end\">\n            {onRemoveAll && (\n              <DropdownMenu.Item onSelect={() => onRemoveAll()}>\n                <XIcon />\n                Remove all filters\n              </DropdownMenu.Item>\n            )}\n            {onRemoveAll && (onSave || onRemoveSaved) && <DropdownMenu.Separator />}\n            {onSave && (\n              <DropdownMenu.Item onSelect={() => onSave()}>\n                <SaveIcon />\n                Save filters for next time\n              </DropdownMenu.Item>\n            )}\n            {onRemoveSaved && (\n              <DropdownMenu.Item onSelect={() => onRemoveSaved()}>\n                <Trash2Icon />\n                Remove saved filters\n              </DropdownMenu.Item>\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu>\n      )}\n    </div>\n  );\n}\n","import { CheckIcon, SearchIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Spinner } from '@/ds/components/Spinner/spinner';\nimport { menuEmptyClass, menuItemButtonClass, menuItemCheckClass, menuSearchClasses } from '@/ds/primitives/menu-item';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { cn } from '@/lib/utils';\n\n// Same rendering as Combobox items: no visible control, a trailing check when selected.\n// Focus is on the item itself (roving via [data-pick-multi-item]).\nconst pickMultiItemClass = cn(menuItemButtonClass, 'min-w-0');\n\nfunction PickMultiItem({\n  role,\n  checked,\n  label,\n  onClick,\n}: {\n  role: 'checkbox' | 'radio';\n  checked: boolean;\n  label: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role={role}\n      aria-checked={checked}\n      data-selected={checked || undefined}\n      data-pick-multi-item=\"\"\n      title={label}\n      className={pickMultiItemClass}\n      onClick={onClick}\n    >\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      {checked && (\n        <span className={menuItemCheckClass}>\n          <CheckIcon />\n        </span>\n      )}\n    </button>\n  );\n}\n\ntype PickMultiField = Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n\nexport type PickMultiPanelProps = {\n  field: PickMultiField;\n  tokens: PropertyFilterToken[];\n  /** Always carries a value: an empty list is how the panel says \"nothing selected\". */\n  onChange: (fieldId: string, value: string | string[]) => void;\n};\n\n/**\n * Reusable body for a pick-multi side popover: optional search input plus a\n * radio group (single-select) or checkbox list (when `field.multi` is true).\n * Shared between the Filter Creator's property-picker side popover and the\n * PropertyFilterApplied pill's inline editor so both surfaces use the exact same UI.\n */\nexport function PickMultiPanel({ field, tokens, onChange }: PickMultiPanelProps) {\n  const [query, setQuery] = useState('');\n  const listClassName = 'max-h-[80dvh] overflow-auto p-1';\n\n  const filteredOptions = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return field.options;\n    return field.options.filter(o => o.label.toLowerCase().includes(q));\n  }, [field.options, query]);\n\n  const token = useMemo(() => tokens.find(t => t.fieldId === field.id), [tokens, field.id]);\n  // Fall back to `defaultValue` when no token exists — lets view-toggle fields (e.g. List mode)\n  // show their default option pre-selected before the user explicitly picks one.\n  const selectedValue = typeof token?.value === 'string' ? token.value : !field.multi ? field.defaultValue : undefined;\n  const selectedValues = useMemo<string[]>(() => {\n    const value = token?.value;\n    if (Array.isArray(value)) return value;\n    if (typeof value === 'string') return [value];\n    return [];\n  }, [token]);\n\n  return (\n    <>\n      {field.searchable !== false && (\n        <div className={menuSearchClasses.container}>\n          <SearchIcon className={menuSearchClasses.icon} />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={e => setQuery(e.target.value)}\n            placeholder={`Search ${field.label.toLowerCase()}`}\n            className={menuSearchClasses.input}\n            {...passwordManagerOptOutProps}\n            onKeyDown={e => {\n              if (e.key !== 'ArrowDown') return;\n              const panel = e.currentTarget.closest<HTMLElement>('[data-pick-multi-panel]');\n              const first = panel?.querySelector<HTMLElement>('[data-pick-multi-item]:not([disabled])');\n              if (!first) return;\n              e.preventDefault();\n              e.stopPropagation();\n              first.focus();\n            }}\n          />\n        </div>\n      )}\n\n      {field.isLoading ? (\n        <div className={cn(menuEmptyClass, 'm-1')}>\n          <Spinner size=\"sm\" className=\"size-3 text-muted-foreground\" />\n          Loading options…\n        </div>\n      ) : filteredOptions.length === 0 ? (\n        <div className={cn(menuEmptyClass, 'm-1')}>{field.emptyText ?? 'No option found.'}</div>\n      ) : field.multi ? (\n        <div className={listClassName}>\n          <>\n            {filteredOptions.map(option => {\n              const checked = selectedValues.includes(option.value);\n              return (\n                <PickMultiItem\n                  key={option.value}\n                  role=\"checkbox\"\n                  checked={checked}\n                  label={option.label}\n                  onClick={() =>\n                    onChange(\n                      field.id,\n                      checked ? selectedValues.filter(v => v !== option.value) : [...selectedValues, option.value],\n                    )\n                  }\n                />\n              );\n            })}\n          </>\n        </div>\n      ) : (\n        <div role=\"radiogroup\" className={listClassName}>\n          <>\n            {filteredOptions.map(option => (\n              <PickMultiItem\n                key={option.value}\n                role=\"radio\"\n                checked={selectedValue === option.value}\n                label={option.label}\n                onClick={() => onChange(field.id, option.value)}\n              />\n            ))}\n            {!field.omitAnyOption && (\n              <PickMultiItem\n                role=\"radio\"\n                checked={selectedValue === 'Any'}\n                label=\"Any\"\n                onClick={() => onChange(field.id, 'Any')}\n              />\n            )}\n          </>\n        </div>\n      )}\n    </>\n  );\n}\n","import { LockIcon, XIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { ButtonsGroup, ButtonsGroupText } from '../ButtonsGroup';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../Tooltip';\nimport { PickMultiPanel } from './pick-multi-panel';\nimport type { PropertyFilterField, PropertyFilterToken } from './types';\nimport { Input } from '@/ds/components/Input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover/popover';\nimport { MENU_SIDE_OFFSET } from '@/ds/primitives/menu-item';\n\nexport type PropertyFilterAppliedProps = {\n  fields: PropertyFilterField[];\n  tokens: PropertyFilterToken[];\n  onTokensChange: (tokens: PropertyFilterToken[]) => void;\n  disabled?: boolean;\n  /**\n   * Field id that was just added via the Creator — rendered pill auto-focuses\n   * its input so the user can start typing immediately.\n   */\n  autoFocusFieldId?: string;\n  /**\n   * Field ids whose pills must remain visible and read-only — value stays\n   * displayed but cannot be edited or removed. Use when an upstream context\n   * (e.g. agent-scoped traces tab) pre-applies a filter that the user must\n   * not be able to clear.\n   */\n  lockedFieldIds?: readonly string[];\n  /** Tooltip content shown on hover/focus of any locked pill. */\n  lockedTooltipContent?: ReactNode;\n};\n\nfunction stringifyTokenValue(value: string | string[]) {\n  if (Array.isArray(value)) return value.length === 0 ? 'Any' : value.join(', ');\n  return value;\n}\n\nconst DEFAULT_LOCKED_TOOLTIP = 'This filter is set by the current context and cannot be removed here.';\n\nfunction lookupOptionLabel(field: PropertyFilterField, value: string | string[]): string {\n  if (field.kind === 'pick-multi' && field.options) {\n    if (Array.isArray(value)) {\n      if (value.length === 0) return 'Any';\n      return value.map(v => field.options.find(o => o.value === v)?.label ?? v).join(', ');\n    }\n    return field.options.find(o => o.value === value)?.label ?? value;\n  }\n  return stringifyTokenValue(value);\n}\n\ntype LockedTokenPillProps = {\n  field: PropertyFilterField;\n  value: string | string[];\n  tooltipContent: ReactNode;\n};\n\nfunction LockedTokenPill({ field, value, tooltipContent }: LockedTokenPillProps) {\n  const display = lookupOptionLabel(field, value);\n  const lockA11yLabel = `${field.label} filter is locked by context`;\n\n  return (\n    <TooltipProvider delayDuration={150}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <ButtonsGroup\n            data-locked-field-id={field.id}\n            data-property-filter-pill=\"locked\"\n            tabIndex={0}\n            aria-label={lockA11yLabel}\n          >\n            <ButtonsGroupText>{field.label}</ButtonsGroupText>\n            <ButtonsGroupText>is</ButtonsGroupText>\n            <ButtonsGroupText>{display}</ButtonsGroupText>\n            <ButtonsGroupText>\n              <LockIcon />\n            </ButtonsGroupText>\n          </ButtonsGroup>\n        </TooltipTrigger>\n        <TooltipContent>{tooltipContent}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n\ntype TextTokenPillProps = {\n  field: Extract<PropertyFilterField, { kind: 'text' }>;\n  value: string;\n  onChange: (value: string) => void;\n  onRemove: () => void;\n  disabled?: boolean;\n  autoFocus?: boolean;\n};\n\nfunction TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }: TextTokenPillProps) {\n  // Local draft keeps the caret stable when the URL round-trip trims the\n  // stored value (e.g. trailing spaces). We only re-sync from the prop when\n  // the external value is genuinely different from our current (trimmed) draft.\n  const [draft, setDraft] = useState(value);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (draft.trim() !== value) setDraft(value);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  useEffect(() => {\n    if (autoFocus) inputRef.current?.focus();\n  }, [autoFocus]);\n\n  return (\n    <ButtonsGroup>\n      <ButtonsGroupText>{field.label}</ButtonsGroupText>\n      <ButtonsGroupText>is</ButtonsGroupText>\n      <Input\n        ref={inputRef}\n        disabled={disabled}\n        value={draft}\n        placeholder={field.placeholder ?? `Enter ${field.label}`}\n        onChange={e => {\n          const next = e.target.value;\n          setDraft(next);\n          // Apply live — URL and traces query update on every keystroke.\n          // Empty values persist as empty-value tokens so the pill stays visible.\n          if (next.trim() !== value) onChange(next);\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            const trimmed = draft.trim();\n            if (trimmed !== value) onChange(trimmed);\n          } else if (e.key === 'Escape') {\n            e.preventDefault();\n            setDraft(value);\n            e.currentTarget.blur();\n          }\n        }}\n      />\n      <Button\n        size=\"icon-md\"\n        type=\"button\"\n        disabled={disabled}\n        aria-label={`Remove ${field.label} filter`}\n        onMouseDown={e => e.preventDefault()}\n        onClick={onRemove}\n      >\n        <XIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\ntype PickMultiTokenPillProps = {\n  field: Extract<PropertyFilterField, { kind: 'pick-multi' }>;\n  token: PropertyFilterToken;\n  tokens: PropertyFilterToken[];\n  onChange: (fieldId: string, value: string | string[]) => void;\n  onRemove: () => void;\n  disabled?: boolean;\n};\n\nfunction PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }: PickMultiTokenPillProps) {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <ButtonsGroup>\n      <ButtonsGroupText>{field.label}</ButtonsGroupText>\n      <ButtonsGroupText>is</ButtonsGroupText>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button type=\"button\" disabled={disabled}>\n            {stringifyTokenValue(token.value)}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" sideOffset={MENU_SIDE_OFFSET} className=\"w-64 p-0\" data-pick-multi-panel>\n          <PickMultiPanel field={field} tokens={tokens} onChange={onChange} />\n        </PopoverContent>\n      </Popover>\n      <Button\n        size=\"icon-md\"\n        type=\"button\"\n        disabled={disabled}\n        aria-label={`Remove ${field.label} filter`}\n        onClick={onRemove}\n      >\n        <XIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\n/**\n * Applied filter pills. Text/id-style tokens render with an always-active\n * input so the user can edit the value inline (and an empty token is valid —\n * it persists in the URL until the user explicitly removes it via ×).\n * Pick-multi tokens render with a clickable value that opens the same side\n * popover as the Filter Creator so the user can update selections in place.\n * Creation lives in a separate component (PropertyFilterCreator).\n */\nexport function PropertyFilterApplied({\n  fields,\n  tokens,\n  onTokensChange,\n  disabled,\n  autoFocusFieldId,\n  lockedFieldIds,\n  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP,\n}: PropertyFilterAppliedProps) {\n  if (tokens.length === 0) return null;\n\n  const lockedSet = new Set(lockedFieldIds ?? []);\n\n  const replaceTokenAt = (index: number, next: PropertyFilterToken) => {\n    const copy = [...tokens];\n    copy[index] = next;\n    onTokensChange(copy);\n  };\n\n  const removeTokenAt = (index: number) => {\n    onTokensChange(tokens.filter((_, i) => i !== index));\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      {tokens.map((token, index) => {\n        const field = fields.find(f => f.id === token.fieldId);\n        if (!field) return null;\n\n        if (lockedSet.has(token.fieldId)) {\n          return (\n            <LockedTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              value={token.value}\n              tooltipContent={lockedTooltipContent}\n            />\n          );\n        }\n\n        if (field.kind === 'text' && !Array.isArray(token.value)) {\n          return (\n            <TextTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              value={token.value}\n              disabled={disabled}\n              autoFocus={autoFocusFieldId === token.fieldId}\n              onChange={nextValue => replaceTokenAt(index, { fieldId: token.fieldId, value: nextValue })}\n              onRemove={() => removeTokenAt(index)}\n            />\n          );\n        }\n\n        if (field.kind === 'pick-multi') {\n          return (\n            <PickMultiTokenPill\n              key={`${token.fieldId}-${index}`}\n              field={field}\n              token={token}\n              tokens={tokens}\n              disabled={disabled}\n              // Unselecting everything (empty array) keeps the pill alive in a\n              // neutral state — the user explicitly removes it via ×. This lets\n              // the page-level Reset neutralize values without dropping the pill.\n              onChange={(fieldId, value) => replaceTokenAt(index, { fieldId, value })}\n              onRemove={() => removeTokenAt(index)}\n            />\n          );\n        }\n\n        return (\n          <ButtonsGroup key={`${token.fieldId}-${index}`}>\n            <ButtonsGroupText>{field.label}</ButtonsGroupText>\n            <ButtonsGroupText>is</ButtonsGroupText>\n            <ButtonsGroupText>{stringifyTokenValue(token.value)}</ButtonsGroupText>\n            <Button\n              size=\"icon-md\"\n              type=\"button\"\n              disabled={disabled}\n              aria-label={`Remove ${field.label} filter`}\n              onClick={() => removeTokenAt(index)}\n            >\n              <XIcon />\n            </Button>\n          </ButtonsGroup>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/resize/collapsible-panel.cjs.js

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_tooltip = require("../tooltip-BiRLT3Th.cjs");
-const require_icons_Icon = require("../icons/Icon.cjs.js");
-const require_components_Kbd = require("../components/Kbd.cjs.js");
 const require_resize_panel_edge_icon = require("./panel-edge-icon.cjs.js");
 const require_resize_panel_icon_button = require("./panel-icon-button.cjs.js");
+const require_components_Kbd = require("../components/Kbd.cjs.js");
+const require_tooltip = require("../tooltip-BsExuMO8.cjs");
+const require_icons_Icon = require("../icons/Icon.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_resizable_panels = require("react-resizable-panels");

package/dist/resize/collapsible-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel.cjs.js","names":["useState","useRef","usePanelRef","Panel","cn","Tooltip","TooltipTrigger","panelIconButtonClass","Icon","PanelEdgeIcon","TooltipContent","Kbd"],"sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import type { CSSProperties, Ref } from 'react';\nimport { useImperativeHandle, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\n/** Programmatic control over a CollapsiblePanel (distinct from the library's panel handle). */\nexport interface CollapsiblePanelHandle {\n  collapse: () => void;\n  /** Reopens at the width the panel had when `collapse()` was called, else at `defaultSize`. */\n  expand: () => void;\n  /** Collapses when open, expands when collapsed (based on the panel's reported size). */\n  toggle: () => void;\n}\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n  /** Key shown in the expand button tooltip when the caller binds a shortcut to `toggle()`. */\n  expandShortcut?: string;\n  /** Skip the floating \"Expand panel\" button when the caller provides its own expand control. */\n  hideExpandButton?: boolean;\n  ref?: Ref<CollapsiblePanelHandle>;\n}\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  expandShortcut,\n  hideExpandButton = false,\n  className,\n  onResize,\n  style,\n  minSize,\n  defaultSize,\n  panelRef: externalPanelRef,\n  ref,\n  ...props\n}: CollapsiblePanelProps) => {\n  // Physical state of the panel, as reported by onResize. It drives what is rendered.\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // Width the panel had right before we collapsed it. The library's `expand()`\n  // relies on its own \"most recent size\", which is unreliable when the panel\n  // mounts already collapsed from a persisted layout (it opens at `minSize`).\n  const sizeBeforeCollapseRef = useRef<number | null>(null);\n  const internalPanelRef = usePanelRef();\n  const panelRef = externalPanelRef ?? internalPanelRef;\n\n  const collapsedThreshold = typeof collapsedSize === 'number' ? collapsedSize : 0;\n  // Read the live size: `isCollapsed` only updates after the library's first `onResize`,\n  // so a toggle fired right after mount would otherwise act on stale state.\n  const isPanelCollapsed = (panel: NonNullable<typeof panelRef.current>) =>\n    panel.getSize().inPixels <= collapsedThreshold;\n\n  const collapse = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    // Never remember a collapsed width as the restore target.\n    if (!isPanelCollapsed(panel)) sizeBeforeCollapseRef.current = panel.getSize().inPixels;\n    panel.collapse();\n  };\n\n  const expand = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    const target = sizeBeforeCollapseRef.current ?? defaultSize;\n    if (target === undefined) {\n      panel.expand();\n      return;\n    }\n    panel.resize(target);\n  };\n\n  const toggle = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    return isPanelCollapsed(panel) ? expand() : collapse();\n  };\n\n  useImperativeHandle(ref, () => ({ collapse, expand, toggle }));\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      defaultSize={defaultSize}\n      className={cn('relative', className)}\n      style={\n        {\n          // The expand button must remain visible once the panel is at zero width.\n          overflow: isCollapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setIsCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={isCollapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {isCollapsed && !hideExpandButton && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label=\"Expand panel\"\n              onClick={expand}\n              className={cn(\n                panelIconButtonClass,\n                'absolute top-2 z-10',\n                'transition-[color,opacity] duration-300 starting:opacity-0',\n                direction === 'left' ? 'left-2' : 'right-2',\n              )}\n            >\n              <Icon>\n                <PanelEdgeIcon side={direction} />\n              </Icon>\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side={direction === 'left' ? 'right' : 'left'}>\n            <span className=\"inline-flex items-center gap-1.5\">\n              Expand panel\n              {expandShortcut && <Kbd size=\"xs\">{expandShortcut}</Kbd>}\n            </span>\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </Panel>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"collapsible-panel.cjs.js","names":["useState","useRef","usePanelRef","Panel","cn","Tooltip","TooltipTrigger","panelIconButtonClass","Icon","PanelEdgeIcon","TooltipContent","Kbd"],"sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import type { CSSProperties, Ref, RefObject } from 'react';\nimport { useImperativeHandle, useRef, useState } from 'react';\nimport type { PanelImperativeHandle, PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\n/** Programmatic control over a CollapsiblePanel (distinct from the library's panel handle). */\nexport interface CollapsiblePanelHandle {\n  collapse: () => void;\n  /** Reopens at the width the panel had when `collapse()` was called, else at `defaultSize`. */\n  expand: () => void;\n  /** Collapses when open, expands when collapsed (based on the panel's reported size). */\n  toggle: () => void;\n}\n\nexport interface CollapsiblePanelProps extends Omit<PanelProps, 'panelRef'> {\n  /** Must be an object ref: the panel reads `.current` to collapse and expand. */\n  panelRef?: RefObject<PanelImperativeHandle | null>;\n  direction: 'left' | 'right';\n  /** Key shown in the expand button tooltip when the caller binds a shortcut to `toggle()`. */\n  expandShortcut?: string;\n  /** Skip the floating \"Expand panel\" button when the caller provides its own expand control. */\n  hideExpandButton?: boolean;\n  ref?: Ref<CollapsiblePanelHandle>;\n}\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  expandShortcut,\n  hideExpandButton = false,\n  className,\n  onResize,\n  style,\n  minSize,\n  defaultSize,\n  panelRef: externalPanelRef,\n  ref,\n  ...props\n}: CollapsiblePanelProps) => {\n  // Physical state of the panel, as reported by onResize. It drives what is rendered.\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // Width the panel had right before we collapsed it. The library's `expand()`\n  // relies on its own \"most recent size\", which is unreliable when the panel\n  // mounts already collapsed from a persisted layout (it opens at `minSize`).\n  const sizeBeforeCollapseRef = useRef<number | null>(null);\n  const internalPanelRef = usePanelRef();\n  const panelRef = externalPanelRef ?? internalPanelRef;\n\n  const collapsedThreshold = typeof collapsedSize === 'number' ? collapsedSize : 0;\n  // Read the live size: `isCollapsed` only updates after the library's first `onResize`,\n  // so a toggle fired right after mount would otherwise act on stale state.\n  const isPanelCollapsed = (panel: NonNullable<typeof panelRef.current>) =>\n    panel.getSize().inPixels <= collapsedThreshold;\n\n  const collapse = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    // Never remember a collapsed width as the restore target.\n    if (!isPanelCollapsed(panel)) sizeBeforeCollapseRef.current = panel.getSize().inPixels;\n    panel.collapse();\n  };\n\n  const expand = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    const target = sizeBeforeCollapseRef.current ?? defaultSize;\n    if (target === undefined) {\n      panel.expand();\n      return;\n    }\n    panel.resize(target);\n  };\n\n  const toggle = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    return isPanelCollapsed(panel) ? expand() : collapse();\n  };\n\n  useImperativeHandle(ref, () => ({ collapse, expand, toggle }));\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      defaultSize={defaultSize}\n      className={cn('relative', className)}\n      style={\n        {\n          // The expand button must remain visible once the panel is at zero width.\n          overflow: isCollapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setIsCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={isCollapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {isCollapsed && !hideExpandButton && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label=\"Expand panel\"\n              onClick={expand}\n              className={cn(\n                panelIconButtonClass,\n                'absolute top-2 z-10',\n                'transition-[color,opacity] duration-300 starting:opacity-0',\n                direction === 'left' ? 'left-2' : 'right-2',\n              )}\n            >\n              <Icon>\n                <PanelEdgeIcon side={direction} />\n              </Icon>\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side={direction === 'left' ? 'right' : 'left'}>\n            <span className=\"inline-flex items-center gap-1.5\">\n              Expand panel\n              {expandShortcut && <Kbd size=\"xs\">{expandShortcut}</Kbd>}\n            </span>\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </Panel>\n  );\n};\n"],"mappings":"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"}

package/dist/resize/collapsible-panel.es.js

@@ -1,9 +1,9 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-HzcLyGtV.js";
-import { Icon } from "../icons/Icon.es.js";
-import { Kbd } from "../components/Kbd.es.js";
 import { PanelEdgeIcon } from "./panel-edge-icon.es.js";
 import { panelIconButtonClass } from "./panel-icon-button.es.js";
+import { Kbd } from "../components/Kbd.es.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../tooltip-DJcze2VZ.js";
+import { Icon } from "../icons/Icon.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Panel, usePanelRef } from "react-resizable-panels";

package/dist/resize/collapsible-panel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel.es.js","names":[],"sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import type { CSSProperties, Ref } from 'react';\nimport { useImperativeHandle, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\n/** Programmatic control over a CollapsiblePanel (distinct from the library's panel handle). */\nexport interface CollapsiblePanelHandle {\n  collapse: () => void;\n  /** Reopens at the width the panel had when `collapse()` was called, else at `defaultSize`. */\n  expand: () => void;\n  /** Collapses when open, expands when collapsed (based on the panel's reported size). */\n  toggle: () => void;\n}\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n  /** Key shown in the expand button tooltip when the caller binds a shortcut to `toggle()`. */\n  expandShortcut?: string;\n  /** Skip the floating \"Expand panel\" button when the caller provides its own expand control. */\n  hideExpandButton?: boolean;\n  ref?: Ref<CollapsiblePanelHandle>;\n}\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  expandShortcut,\n  hideExpandButton = false,\n  className,\n  onResize,\n  style,\n  minSize,\n  defaultSize,\n  panelRef: externalPanelRef,\n  ref,\n  ...props\n}: CollapsiblePanelProps) => {\n  // Physical state of the panel, as reported by onResize. It drives what is rendered.\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // Width the panel had right before we collapsed it. The library's `expand()`\n  // relies on its own \"most recent size\", which is unreliable when the panel\n  // mounts already collapsed from a persisted layout (it opens at `minSize`).\n  const sizeBeforeCollapseRef = useRef<number | null>(null);\n  const internalPanelRef = usePanelRef();\n  const panelRef = externalPanelRef ?? internalPanelRef;\n\n  const collapsedThreshold = typeof collapsedSize === 'number' ? collapsedSize : 0;\n  // Read the live size: `isCollapsed` only updates after the library's first `onResize`,\n  // so a toggle fired right after mount would otherwise act on stale state.\n  const isPanelCollapsed = (panel: NonNullable<typeof panelRef.current>) =>\n    panel.getSize().inPixels <= collapsedThreshold;\n\n  const collapse = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    // Never remember a collapsed width as the restore target.\n    if (!isPanelCollapsed(panel)) sizeBeforeCollapseRef.current = panel.getSize().inPixels;\n    panel.collapse();\n  };\n\n  const expand = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    const target = sizeBeforeCollapseRef.current ?? defaultSize;\n    if (target === undefined) {\n      panel.expand();\n      return;\n    }\n    panel.resize(target);\n  };\n\n  const toggle = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    return isPanelCollapsed(panel) ? expand() : collapse();\n  };\n\n  useImperativeHandle(ref, () => ({ collapse, expand, toggle }));\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      defaultSize={defaultSize}\n      className={cn('relative', className)}\n      style={\n        {\n          // The expand button must remain visible once the panel is at zero width.\n          overflow: isCollapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setIsCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={isCollapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {isCollapsed && !hideExpandButton && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label=\"Expand panel\"\n              onClick={expand}\n              className={cn(\n                panelIconButtonClass,\n                'absolute top-2 z-10',\n                'transition-[color,opacity] duration-300 starting:opacity-0',\n                direction === 'left' ? 'left-2' : 'right-2',\n              )}\n            >\n              <Icon>\n                <PanelEdgeIcon side={direction} />\n              </Icon>\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side={direction === 'left' ? 'right' : 'left'}>\n            <span className=\"inline-flex items-center gap-1.5\">\n              Expand panel\n              {expandShortcut && <Kbd size=\"xs\">{expandShortcut}</Kbd>}\n            </span>\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </Panel>\n  );\n};\n"],"mappings":";;;;;;;;;;AA6BA,IAAa,oBAAoB,EAC/B,eACA,UACA,WACA,gBACA,mBAAmB,OACnB,WACA,UACA,OACA,SACA,aACA,UAAU,kBACV,KACA,GAAG,YACwB;CAE3B,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAIpD,MAAM,wBAAwB,OAAsB,IAAI;CACxD,MAAM,mBAAmB,YAAY;CACrC,MAAM,WAAW,oBAAoB;CAErC,MAAM,qBAAqB,OAAO,kBAAkB,WAAW,gBAAgB;CAG/E,MAAM,oBAAoB,UACxB,MAAM,QAAQ,CAAC,CAAC,YAAY;CAE9B,MAAM,iBAAiB;EACrB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EAEZ,IAAI,CAAC,iBAAiB,KAAK,GAAG,sBAAsB,UAAU,MAAM,QAAQ,CAAC,CAAC;EAC9E,MAAM,SAAS;CACjB;CAEA,MAAM,eAAe;EACnB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,MAAM,SAAS,sBAAsB,WAAW;EAChD,IAAI,WAAW,KAAA,GAAW;GACxB,MAAM,OAAO;GACb;EACF;EACA,MAAM,OAAO,MAAM;CACrB;CAEA,MAAM,eAAe;EACnB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,iBAAiB,KAAK,IAAI,OAAO,IAAI,SAAS;CACvD;CAEA,oBAAoB,YAAY;EAAE;EAAU;EAAQ;CAAO,EAAE;CAE7D,MAAM,iBAAiB,OAAO,YAAY,WAAW,UAAU;CAE/D,OACE,qBAAC,OAAD;EACY;EACK;EACN;EACI;EACb,WAAW,GAAG,YAAY,SAAS;EACnC,OACE;GAEE,UAAU,cAAc,YAAY;GACpC,iBAAiB,iBAAiB,GAAG,eAAe,MAAM,KAAA;GAC1D,GAAG;EACL;EAEF,GAAI;EACJ,WAAW,MAAM,IAAI,iBAAiB;GACpC,WAAW,MAAM,IAAI,YAAY;GACjC,IAAI,OAAO,kBAAkB,UAAU;GACvC,eAAe,KAAK,YAAY,aAAa;EAC/C;EAnBF,UAAA,CAqBE,oBAAC,OAAD;GACE,QAAQ;GACR,OAAO,EAAE,UAAU,qBAAqB;GACxC,WAAW,GAAG,6CAA6C,cAAc,SAAS,WAAW,SAAS;GAErG;EACE,CAAA,GAEJ,eAAe,CAAC,oBACf,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAW,GACT,sBACA,uBACA,8DACA,cAAc,SAAS,WAAW,SACpC;IAEA,UAAA,oBAAC,MAAD,EAAA,UACE,oBAAC,eAAD,EAAe,MAAM,UAAY,CAAA,EAC7B,CAAA;GACA,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,MAAM,cAAc,SAAS,UAAU;GACrD,UAAA,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAAmD,gBAEhD,kBAAkB,oBAAC,KAAD;KAAK,MAAK;KAAM,UAAA;IAAoB,CAAA,CACnD;;EACQ,CAAA,CACT,EAAA,CAAA,CAEN;;AAEX"}
+{"version":3,"file":"collapsible-panel.es.js","names":[],"sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import type { CSSProperties, Ref, RefObject } from 'react';\nimport { useImperativeHandle, useRef, useState } from 'react';\nimport type { PanelImperativeHandle, PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\n/** Programmatic control over a CollapsiblePanel (distinct from the library's panel handle). */\nexport interface CollapsiblePanelHandle {\n  collapse: () => void;\n  /** Reopens at the width the panel had when `collapse()` was called, else at `defaultSize`. */\n  expand: () => void;\n  /** Collapses when open, expands when collapsed (based on the panel's reported size). */\n  toggle: () => void;\n}\n\nexport interface CollapsiblePanelProps extends Omit<PanelProps, 'panelRef'> {\n  /** Must be an object ref: the panel reads `.current` to collapse and expand. */\n  panelRef?: RefObject<PanelImperativeHandle | null>;\n  direction: 'left' | 'right';\n  /** Key shown in the expand button tooltip when the caller binds a shortcut to `toggle()`. */\n  expandShortcut?: string;\n  /** Skip the floating \"Expand panel\" button when the caller provides its own expand control. */\n  hideExpandButton?: boolean;\n  ref?: Ref<CollapsiblePanelHandle>;\n}\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  expandShortcut,\n  hideExpandButton = false,\n  className,\n  onResize,\n  style,\n  minSize,\n  defaultSize,\n  panelRef: externalPanelRef,\n  ref,\n  ...props\n}: CollapsiblePanelProps) => {\n  // Physical state of the panel, as reported by onResize. It drives what is rendered.\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // Width the panel had right before we collapsed it. The library's `expand()`\n  // relies on its own \"most recent size\", which is unreliable when the panel\n  // mounts already collapsed from a persisted layout (it opens at `minSize`).\n  const sizeBeforeCollapseRef = useRef<number | null>(null);\n  const internalPanelRef = usePanelRef();\n  const panelRef = externalPanelRef ?? internalPanelRef;\n\n  const collapsedThreshold = typeof collapsedSize === 'number' ? collapsedSize : 0;\n  // Read the live size: `isCollapsed` only updates after the library's first `onResize`,\n  // so a toggle fired right after mount would otherwise act on stale state.\n  const isPanelCollapsed = (panel: NonNullable<typeof panelRef.current>) =>\n    panel.getSize().inPixels <= collapsedThreshold;\n\n  const collapse = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    // Never remember a collapsed width as the restore target.\n    if (!isPanelCollapsed(panel)) sizeBeforeCollapseRef.current = panel.getSize().inPixels;\n    panel.collapse();\n  };\n\n  const expand = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    const target = sizeBeforeCollapseRef.current ?? defaultSize;\n    if (target === undefined) {\n      panel.expand();\n      return;\n    }\n    panel.resize(target);\n  };\n\n  const toggle = () => {\n    const panel = panelRef.current;\n    if (!panel) return;\n    return isPanelCollapsed(panel) ? expand() : collapse();\n  };\n\n  useImperativeHandle(ref, () => ({ collapse, expand, toggle }));\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      defaultSize={defaultSize}\n      className={cn('relative', className)}\n      style={\n        {\n          // The expand button must remain visible once the panel is at zero width.\n          overflow: isCollapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, id, previousSize) => {\n        onResize?.(size, id, previousSize);\n        if (typeof collapsedSize !== 'number') return;\n        setIsCollapsed(size.inPixels <= collapsedSize);\n      }}\n    >\n      <div\n        hidden={isCollapsed}\n        style={{ minWidth: 'var(--panel-min-w)' }}\n        className={cn('absolute inset-y-0 w-full overflow-hidden', direction === 'left' ? 'left-0' : 'right-0')}\n      >\n        {children}\n      </div>\n\n      {isCollapsed && !hideExpandButton && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label=\"Expand panel\"\n              onClick={expand}\n              className={cn(\n                panelIconButtonClass,\n                'absolute top-2 z-10',\n                'transition-[color,opacity] duration-300 starting:opacity-0',\n                direction === 'left' ? 'left-2' : 'right-2',\n              )}\n            >\n              <Icon>\n                <PanelEdgeIcon side={direction} />\n              </Icon>\n            </button>\n          </TooltipTrigger>\n          <TooltipContent side={direction === 'left' ? 'right' : 'left'}>\n            <span className=\"inline-flex items-center gap-1.5\">\n              Expand panel\n              {expandShortcut && <Kbd size=\"xs\">{expandShortcut}</Kbd>}\n            </span>\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </Panel>\n  );\n};\n"],"mappings":";;;;;;;;;;AA+BA,IAAa,oBAAoB,EAC/B,eACA,UACA,WACA,gBACA,mBAAmB,OACnB,WACA,UACA,OACA,SACA,aACA,UAAU,kBACV,KACA,GAAG,YACwB;CAE3B,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAIpD,MAAM,wBAAwB,OAAsB,IAAI;CACxD,MAAM,mBAAmB,YAAY;CACrC,MAAM,WAAW,oBAAoB;CAErC,MAAM,qBAAqB,OAAO,kBAAkB,WAAW,gBAAgB;CAG/E,MAAM,oBAAoB,UACxB,MAAM,QAAQ,CAAC,CAAC,YAAY;CAE9B,MAAM,iBAAiB;EACrB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EAEZ,IAAI,CAAC,iBAAiB,KAAK,GAAG,sBAAsB,UAAU,MAAM,QAAQ,CAAC,CAAC;EAC9E,MAAM,SAAS;CACjB;CAEA,MAAM,eAAe;EACnB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,MAAM,SAAS,sBAAsB,WAAW;EAChD,IAAI,WAAW,KAAA,GAAW;GACxB,MAAM,OAAO;GACb;EACF;EACA,MAAM,OAAO,MAAM;CACrB;CAEA,MAAM,eAAe;EACnB,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EACZ,OAAO,iBAAiB,KAAK,IAAI,OAAO,IAAI,SAAS;CACvD;CAEA,oBAAoB,YAAY;EAAE;EAAU;EAAQ;CAAO,EAAE;CAE7D,MAAM,iBAAiB,OAAO,YAAY,WAAW,UAAU;CAE/D,OACE,qBAAC,OAAD;EACY;EACK;EACN;EACI;EACb,WAAW,GAAG,YAAY,SAAS;EACnC,OACE;GAEE,UAAU,cAAc,YAAY;GACpC,iBAAiB,iBAAiB,GAAG,eAAe,MAAM,KAAA;GAC1D,GAAG;EACL;EAEF,GAAI;EACJ,WAAW,MAAM,IAAI,iBAAiB;GACpC,WAAW,MAAM,IAAI,YAAY;GACjC,IAAI,OAAO,kBAAkB,UAAU;GACvC,eAAe,KAAK,YAAY,aAAa;EAC/C;EAnBF,UAAA,CAqBE,oBAAC,OAAD;GACE,QAAQ;GACR,OAAO,EAAE,UAAU,qBAAqB;GACxC,WAAW,GAAG,6CAA6C,cAAc,SAAS,WAAW,SAAS;GAErG;EACE,CAAA,GAEJ,eAAe,CAAC,oBACf,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAW,GACT,sBACA,uBACA,8DACA,cAAc,SAAS,WAAW,SACpC;IAEA,UAAA,oBAAC,MAAD,EAAA,UACE,oBAAC,eAAD,EAAe,MAAM,UAAY,CAAA,EAC7B,CAAA;GACA,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GAAgB,MAAM,cAAc,SAAS,UAAU;GACrD,UAAA,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAAmD,gBAEhD,kBAAkB,oBAAC,KAAD;KAAK,MAAK;KAAM,UAAA;IAAoB,CAAA,CACnD;;EACQ,CAAA,CACT,EAAA,CAAA,CAEN;;AAEX"}

package/dist/resize/panel-drawer.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
-const require_icons_Icon = require("../icons/Icon.cjs.js");
-const require_components_Drawer = require("../components/Drawer.cjs.js");
 const require_resize_panel_edge_icon = require("./panel-edge-icon.cjs.js");
 const require_resize_panel_icon_button = require("./panel-icon-button.cjs.js");
+const require_components_Drawer = require("../components/Drawer.cjs.js");
+const require_icons_Icon = require("../icons/Icon.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/lib/resize/panel-drawer.tsx
 var PanelDrawer = ({ direction, label, children }) => {

package/dist/resize/panel-drawer.es.js

@@ -1,8 +1,8 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
-import { Icon } from "../icons/Icon.es.js";
-import { Drawer, DrawerBackdrop, DrawerPopup, DrawerPortal, DrawerTitle, DrawerTrigger, DrawerViewport } from "../components/Drawer.es.js";
 import { PanelEdgeIcon } from "./panel-edge-icon.es.js";
 import { panelIconButtonClass } from "./panel-icon-button.es.js";
+import { Drawer, DrawerBackdrop, DrawerPopup, DrawerPortal, DrawerTitle, DrawerTrigger, DrawerViewport } from "../components/Drawer.es.js";
+import { Icon } from "../icons/Icon.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/lib/resize/panel-drawer.tsx
 var PanelDrawer = ({ direction, label, children }) => {

package/dist/resize/panel-icon-button.cjs.js

@@ -1,9 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_primitives_transitions = require("../primitives/transitions.cjs.js");
 const require_primitives_typography = require("../primitives/typography.cjs.js");
 // src/lib/resize/panel-icon-button.ts
-var panelIconButtonClass = require_utils.cn("flex size-8 cursor-pointer items-center justify-center rounded-full", "border border-transparent bg-transparent hover:bg-fill active:bg-fill-hover", require_primitives_typography.quietTextHover, require_primitives_transitions.controlStateColorTransition, "focus-visible:border-border-focus focus-visible:outline-hidden");
+var panelIconButtonClass = require("../utils-uDc1ofX1.cjs").cn("flex size-8 cursor-pointer items-center justify-center rounded-full", "border border-transparent bg-transparent hover:bg-fill active:bg-fill-hover", require_primitives_typography.quietTextHover, require_primitives_transitions.controlStateColorTransition, "focus-visible:border-border-focus focus-visible:outline-hidden");
 exports.panelIconButtonClass = panelIconButtonClass;
 
 //# sourceMappingURL=panel-icon-button.cjs.js.map

package/dist/resize/panel-icon-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-icon-button.cjs.js","names":["cn","quietTextHover","controlStateColorTransition"],"sources":["../../src/lib/resize/panel-icon-button.ts"],"sourcesContent":["import { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n// Ghost icon button shared by the collapsed-panel hint (desktop) and the\n// panel drawer trigger (mobile), so both edges read as the same affordance.\nexport const panelIconButtonClass = cn(\n  'flex size-8 cursor-pointer items-center justify-center rounded-full',\n  'border border-transparent bg-transparent hover:bg-fill active:bg-fill-hover',\n  quietTextHover,\n  controlStateColorTransition,\n  'focus-visible:border-border-focus focus-visible:outline-hidden',\n);\n"],"mappings":";;;;;AAMA,IAAa,uBAAuBA,cAAAA,GAClC,uEACA,+EACAC,8BAAAA,gBACAC,+BAAAA,6BACA,gEACF"}
+{"version":3,"file":"panel-icon-button.cjs.js","names":["cn","quietTextHover","controlStateColorTransition"],"sources":["../../src/lib/resize/panel-icon-button.ts"],"sourcesContent":["import { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\n// Ghost icon button shared by the collapsed-panel hint (desktop) and the\n// panel drawer trigger (mobile), so both edges read as the same affordance.\nexport const panelIconButtonClass = cn(\n  'flex size-8 cursor-pointer items-center justify-center rounded-full',\n  'border border-transparent bg-transparent hover:bg-fill active:bg-fill-hover',\n  quietTextHover,\n  controlStateColorTransition,\n  'focus-visible:border-border-focus focus-visible:outline-hidden',\n);\n"],"mappings":";;;;AAMA,IAAa,uB,+BAAuBA,CAAAA,CAAAA,GAClC,uEACA,+EACAC,8BAAAA,gBACAC,+BAAAA,6BACA,gEACF"}

package/dist/resize/panel-icon-button.es.js

@@ -1,6 +1,6 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { controlStateColorTransition } from "../primitives/transitions.es.js";
 import { quietTextHover } from "../primitives/typography.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 // src/lib/resize/panel-icon-button.ts
 var panelIconButtonClass = cn("flex size-8 cursor-pointer items-center justify-center rounded-full", "border border-transparent bg-transparent hover:bg-fill active:bg-fill-hover", quietTextHover, controlStateColorTransition, "focus-visible:border-border-focus focus-visible:outline-hidden");
 export { panelIconButtonClass };

package/dist/resize/separator.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_primitives_resize_handle_indicator = require("../primitives/resize-handle-indicator.cjs.js");
+const require_utils = require("../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_resizable_panels = require("react-resizable-panels");
 // src/lib/resize/separator.tsx

package/dist/resize/separator.es.js

@@ -1,5 +1,5 @@
-import { t as cn } from "../utils-DQx8TpNT.js";
 import { ResizeHandleIndicator } from "../primitives/resize-handle-indicator.es.js";
+import { t as cn } from "../utils-DQx8TpNT.js";
 import { jsx } from "react/jsx-runtime";
 import { Separator } from "react-resizable-panels";
 // src/lib/resize/separator.tsx

package/dist/{scroll-area-C226l0v0.js → scroll-area-9-S7wfSs.js}

@@ -1,8 +1,8 @@
-import { t as cn } from "./utils-DQx8TpNT.js";
 import { controlStateColorTransition, focusRing } from "./primitives/transitions.es.js";
 import { quietTextHover } from "./primitives/typography.es.js";
 import { useAutoscroll } from "./hooks/use-autoscroll.es.js";
 import { t as mergeRefs } from "./merge-refs-BXb4SnRx.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
@@ -224,4 +224,4 @@ function ScrollBar({ className, orientation = "vertical", revealOnHover = true,
 }
 export { ScrollAreaViewport as n, ScrollBar as r, ScrollArea$1 as t };
 
-//# sourceMappingURL=scroll-area-C226l0v0.js.map
+//# sourceMappingURL=scroll-area-9-S7wfSs.js.map

package/dist/{scroll-area-C226l0v0.js.map → scroll-area-9-S7wfSs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-C226l0v0.js","names":["React","_Fragment","ScrollAreaPrimitive","ScrollArea"],"sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { controlStateColorTransition, focusRing } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\ntype MaskFadeDepth = `${number}${'rem' | 'px'}`;\ntype MaskSide = boolean | MaskFadeDepth;\n\nconst DEFAULT_MASK_FADE_DEPTH: MaskFadeDepth = '2rem';\nconst NO_MASK_FADE: MaskFadeDepth = '0px';\n\nconst SCROLL_DRIVEN_FADE_CLASSES = [\n  'mask-t-from-[calc(100%-min(var(--scroll-area-fade-top),var(--scroll-area-overflow-y-start,0px)))]',\n  'mask-b-from-[calc(100%-min(var(--scroll-area-fade-bottom),var(--scroll-area-overflow-y-end,0px)))]',\n  'mask-l-from-[calc(100%-min(var(--scroll-area-fade-left),var(--scroll-area-overflow-x-start,0px)))]',\n  'mask-r-from-[calc(100%-min(var(--scroll-area-fade-right),var(--scroll-area-overflow-x-end,0px)))]',\n].join(' ');\n\nexport type MaskSides = {\n  top?: MaskSide;\n  bottom?: MaskSide;\n  left?: MaskSide;\n  right?: MaskSide;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: MaskSide;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: MaskSide;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`, 2rem deep.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default; a length (`'5rem'`) sets that side's fade depth.\n *\n * A fade grows with the distance scrolled from its edge, up to its depth.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\n  maxHeight?: string;\n  autoScroll?: boolean;\n  /** With `autoScroll`, start pinned to the end. `false` resumes where the reader left a remounted area. */\n  autoScrollStartFollowing?: boolean;\n  /** With `autoScroll`, called when the reader scrolls away from the end or back to it. */\n  onAutoScrollFollowingChange?: (following: boolean) => void;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /**\n   * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,\n   * the scrollbar only appears while actively scrolling. Defaults to `true`.\n   */\n  revealScrollbarOnHover?: boolean;\n  /**\n   * Keep the scrollbar visible whenever the content overflows, so readers can tell there is more\n   * to scroll to. Overrides `revealScrollbarOnHover`. Defaults to `false`.\n   */\n  alwaysShowScrollbar?: boolean;\n};\n\ntype ResolvedMask = Record<'top' | 'bottom' | 'left' | 'right', MaskFadeDepth | false>;\n\ntype ScrollAreaViewportStyle = React.CSSProperties & {\n  '--scroll-area-fade-top'?: MaskFadeDepth;\n  '--scroll-area-fade-bottom'?: MaskFadeDepth;\n  '--scroll-area-fade-left'?: MaskFadeDepth;\n  '--scroll-area-fade-right'?: MaskFadeDepth;\n};\n\nconst fadeDepth = (side: MaskSide) => (side === true ? DEFAULT_MASK_FADE_DEPTH : side);\n\nfunction resolveMask(mask: ScrollAreaMask | undefined, orientation: Orientation): ResolvedMask {\n  if (mask === false) return { top: false, bottom: false, left: false, right: false };\n\n  const verticalFade = (orientation === 'vertical' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const horizontalFade = (orientation === 'horizontal' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const sides: ResolvedMask = { top: verticalFade, bottom: verticalFade, left: horizontalFade, right: horizontalFade };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = fadeDepth(mask.y);\n    sides.bottom = fadeDepth(mask.y);\n  }\n  if (mask.x !== undefined) {\n    sides.left = fadeDepth(mask.x);\n    sides.right = fadeDepth(mask.x);\n  }\n  if (mask.top !== undefined) sides.top = fadeDepth(mask.top);\n  if (mask.bottom !== undefined) sides.bottom = fadeDepth(mask.bottom);\n  if (mask.left !== undefined) sides.left = fadeDepth(mask.left);\n  if (mask.right !== undefined) sides.right = fadeDepth(mask.right);\n\n  return sides;\n}\n\nconst fadeDepthVars = (sides: ResolvedMask): ScrollAreaViewportStyle => ({\n  '--scroll-area-fade-top': sides.top || NO_MASK_FADE,\n  '--scroll-area-fade-bottom': sides.bottom || NO_MASK_FADE,\n  '--scroll-area-fade-left': sides.left || NO_MASK_FADE,\n  '--scroll-area-fade-right': sides.right || NO_MASK_FADE,\n});\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent hover:bg-fill-subtle active:bg-fill',\n        quietTextHover,\n        controlStateColorTransition,\n        focusRing,\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\ntype ScrollAreaViewportContextValue = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  className: string;\n  style: React.CSSProperties;\n  contentStyle: React.CSSProperties | undefined;\n};\n\nconst ScrollAreaViewportContext = React.createContext<ScrollAreaViewportContextValue | null>(null);\n\nexport type ScrollAreaViewportProps = {\n  /**\n   * Viewport layout and scroll chaining overrides. Chaining stays native by default;\n   * use `overscroll-y-contain` to isolate vertical scrolling while allowing browser history swipes.\n   */\n  className?: string;\n  contentClassName?: string;\n  children?: React.ReactNode;\n  /** The scrolling element, e.g. a virtualizer's `getScrollElement`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /**\n   * Renders the scrolling element as another component, for a library that has to own it\n   * (e.g. Base UI's `Select.List`, which Select scrolls to line the selected item up with the trigger).\n   */\n  render?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>['render'];\n};\n\nfunction useScrollAreaViewportContext() {\n  const viewport = React.use(ScrollAreaViewportContext);\n  if (!viewport) throw new Error('ScrollAreaViewport must be a direct child of ScrollArea');\n  return viewport;\n}\n\nfunction ScrollAreaViewport({ className, contentClassName, children, ref, render }: ScrollAreaViewportProps) {\n  const viewport = useScrollAreaViewportContext();\n  const { areaRef } = viewport;\n  const viewportRef = React.useMemo(() => mergeRefs(areaRef, ref), [areaRef, ref]);\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={viewportRef}\n      className={cn(viewport.className, className)}\n      style={viewport.style}\n      render={render}\n    >\n      <ScrollAreaPrimitive.Content className={contentClassName} style={viewport.contentStyle}>\n        <ScrollAreaViewportContext value={null}>{children}</ScrollAreaViewportContext>\n      </ScrollAreaPrimitive.Content>\n    </ScrollAreaPrimitive.Viewport>\n  );\n}\n\nfunction ScrollArea({\n  className,\n  children,\n  maxHeight,\n  autoScroll = false,\n  autoScrollStartFollowing,\n  onAutoScrollFollowingChange,\n  orientation = 'vertical',\n  scrollButtons,\n  mask,\n  revealScrollbarOnHover = true,\n  alwaysShowScrollbar = false,\n  ...props\n}: ScrollAreaProps) {\n  const areaRef = React.useRef<HTMLDivElement>(null);\n  useAutoscroll(areaRef, {\n    enabled: autoScroll,\n    startFollowing: autoScrollStartFollowing,\n    onFollowingChange: onAutoScrollFollowingChange,\n  });\n\n  const sides = resolveMask(mask, orientation);\n  const fadesAnySide = Object.values(sides).some(Boolean);\n\n  const viewportStyle = fadeDepthVars(sides);\n  if (maxHeight) viewportStyle.maxHeight = maxHeight;\n  if (orientation === 'vertical') {\n    viewportStyle.overflowX = 'hidden';\n    viewportStyle.overflowY = 'scroll';\n  } else if (orientation === 'horizontal') {\n    viewportStyle.overflowX = 'scroll';\n    viewportStyle.overflowY = 'hidden';\n  }\n\n  // Base UI's ScrollAreaContent forces `min-width: fit-content` so the\n  // content can grow wider than the viewport (required for horizontal scroll\n  // measurement). For vertical-only scroll we override it so children shrink\n  // to the viewport width instead of forcing horizontal scroll.\n  const contentStyle: React.CSSProperties | undefined =\n    orientation === 'vertical' ? { minWidth: '0px' } : orientation === 'horizontal' ? { minHeight: '0px' } : undefined;\n\n  const viewport: ScrollAreaViewportContextValue = {\n    areaRef,\n    className: cn('size-full', fadesAnySide && SCROLL_DRIVEN_FADE_CLASSES),\n    style: viewportStyle,\n    contentStyle,\n  };\n  const callerViewportCount = React.Children.toArray(children).filter(\n    child => React.isValidElement(child) && child.type === ScrollAreaViewport,\n  ).length;\n  if (callerViewportCount > 1) throw new Error('ScrollArea takes at most one ScrollAreaViewport');\n  const callerRendersViewport = callerViewportCount === 1;\n\n  return (\n    <ScrollAreaPrimitive.Root className={cn('group/scroll-area relative overflow-hidden', className)} {...props}>\n      <ScrollAreaViewportContext value={viewport}>\n        {callerRendersViewport ? children : <ScrollAreaViewport>{children}</ScrollAreaViewport>}\n      </ScrollAreaViewportContext>\n      {scrollButtons && orientation !== 'vertical' && <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />}\n      {(orientation === 'vertical' || orientation === 'both') && (\n        <ScrollBar orientation=\"vertical\" revealOnHover={revealScrollbarOnHover} alwaysVisible={alwaysShowScrollbar} />\n      )}\n      {(orientation === 'horizontal' || orientation === 'both') && (\n        <ScrollBar\n          orientation=\"horizontal\"\n          revealOnHover={revealScrollbarOnHover}\n          alwaysVisible={alwaysShowScrollbar}\n        />\n      )}\n      {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  revealOnHover = true,\n  alwaysVisible = false,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar> & { revealOnHover?: boolean; alwaysVisible?: boolean }) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none transition-opacity duration-normal ease-out-custom select-none',\n        alwaysVisible ? 'opacity-100' : 'opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n        revealOnHover && !alwaysVisible && 'data-[hovering]:opacity-100',\n        // Base UI pins the bar to both ends of the area (top/bottom or left/right), so it spans it\n        // without a size class. `--scroll-area-scrollbar-inset` pulls its ends in, so a rounded\n        // container (a popup) doesn't clip them; 0 by default.\n        orientation === 'vertical' && 'my-(--scroll-area-scrollbar-inset,0px) w-1.5 p-px',\n        orientation === 'horizontal' && 'mx-(--scroll-area-scrollbar-inset,0px) h-1.5 flex-col p-px',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/60\" />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollAreaViewport, ScrollBar };\n"],"mappings":";;;;;;;;;;AAaA,IAAM,8BAA8B;AACpC,IAAM,sCAAsC;AAC5C,IAAM,0BAA0B;AAChC,IAAM,kCAAkC;AAKxC,IAAM,0BAAyC;AAC/C,IAAM,eAA8B;AAEpC,IAAM,6BAA6B;CACjC;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAkEV,IAAM,aAAa,SAAoB,SAAS,OAAO,0BAA0B;AAEjF,SAAS,YAAY,MAAkC,aAAwC;CAC7F,IAAI,SAAS,OAAO,OAAO;EAAE,KAAK;EAAO,QAAQ;EAAO,MAAM;EAAO,OAAO;CAAM;CAElF,MAAM,gBAAgB,gBAAgB,cAAc,gBAAgB,WAAW;CAC/E,MAAM,kBAAkB,gBAAgB,gBAAgB,gBAAgB,WAAW;CACnF,MAAM,QAAsB;EAAE,KAAK;EAAc,QAAQ;EAAc,MAAM;EAAgB,OAAO;CAAe;CAEnH,IAAI,SAAS,QAAQ,SAAS,KAAA,GAAW,OAAO;CAEhD,IAAI,KAAK,MAAM,KAAA,GAAW;EACxB,MAAM,MAAM,UAAU,KAAK,CAAC;EAC5B,MAAM,SAAS,UAAU,KAAK,CAAC;CACjC;CACA,IAAI,KAAK,MAAM,KAAA,GAAW;EACxB,MAAM,OAAO,UAAU,KAAK,CAAC;EAC7B,MAAM,QAAQ,UAAU,KAAK,CAAC;CAChC;CACA,IAAI,KAAK,QAAQ,KAAA,GAAW,MAAM,MAAM,UAAU,KAAK,GAAG;CAC1D,IAAI,KAAK,WAAW,KAAA,GAAW,MAAM,SAAS,UAAU,KAAK,MAAM;CACnE,IAAI,KAAK,SAAS,KAAA,GAAW,MAAM,OAAO,UAAU,KAAK,IAAI;CAC7D,IAAI,KAAK,UAAU,KAAA,GAAW,MAAM,QAAQ,UAAU,KAAK,KAAK;CAEhE,OAAO;AACT;AAEA,IAAM,iBAAiB,WAAkD;CACvE,0BAA0B,MAAM,OAAO;CACvC,6BAA6B,MAAM,UAAU;CAC7C,2BAA2B,MAAM,QAAQ;CACzC,4BAA4B,MAAM,SAAS;AAC7C;AAEA,SAAS,wBAAwB,OAA2B,UAAkB,KAAa;CACzF,MAAM,gBAAgB,SAAS;CAC/B,OAAO,OAAO,SAAS,aAAa,IAAI,KAAK,IAAI,KAAK,aAAa,IAAI,KAAK,IAAI,KAAK,QAAQ;AAC/F;AAUA,IAAM,gBAAgB,EAAE,WAAW,OAAO,kBAAkB,iBAAiB,uBAA0C;CACrH,MAAM,OAAO,cAAc,SAAS,kBAAkB;CAEtD,OACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,GACT,wJACA,gBACA,6BACA,WACA,cAAc,SACV,0DACA,sDACN;EACA,gBAAe,UAAS,iBAAiB,WAAW,KAAK;EACzD,aAAa;EACb,gBAAgB;EAChB,iBAAiB;EACjB,QAAQ;EACR,UAAS,UAAS;GAChB,IAAI,MAAM,WAAW,GAAG,iBAAiB,SAAS;EACpD;EAEA,UAAA,oBAAC,MAAD;GAAM,eAAY;GAAO,WAAU;EAAU,CAAA;CACvC,CAAA;AAEZ;AAOA,IAAM,iBAAiB,EAAE,SAAS,oBAAwC;CACxE,MAAM,uBAAuBA,QAAM,OAA8C,IAAI;CACrF,MAAM,sBAAsB,OAAO,kBAAkB,WAAW,gBAAgB,KAAA;CAChF,MAAM,oBAAoB,wBACxB,qBAAqB,aACrB,6BACA,uBACF;CACA,MAAM,2BAA2B,wBAC/B,qBAAqB,oBACrB,qCACA,+BACF;CACA,MAAM,wBAAwB,qBAAqB,aAAa;CAChE,MAAM,yBAAyB,qBAAqB,cAAc;CAElE,MAAM,4BAA4BA,QAAM,kBAAkB;EACxD,IAAI,CAAC,qBAAqB,SAAS;EACnC,cAAc,qBAAqB,OAAO;EAC1C,qBAAqB,UAAU;CACjC,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAoBA,QAAM,aAC7B,WAAkC,aAAa,MAAM;EACpD,MAAM,WAAW,QAAQ;EACzB,IAAI,CAAC,UAAU;EAEf,SAAS,SAAS;GAChB,MAAM,cAAc,UAAU,oBAAoB,aAAa,CAAC,oBAAoB;GACpF,UAAU;EACZ,CAAC;CACH,GACA,CAAC,SAAS,iBAAiB,CAC7B;CAEA,MAAM,6BAA6BA,QAAM,aACtC,WAAkC,UAAkD;EACnF,OAAO,eAAe;EACtB,OAAO,gBAAgB;EACvB,OAAO,cAAc,oBAAoB,MAAM,SAAS;EAExD,0BAA0B;EAC1B,kBAAkB,WAAW,CAAC;EAE9B,qBAAqB,UAAU,kBAAkB;GAC/C,kBAAkB,SAAS;EAC7B,GAAG,wBAAwB;CAC7B,GACA;EAAC;EAA0B;EAAmB;CAAyB,CACzE;CAEA,QAAM,gBAAgB;EACpB,aAAa;GACX,0BAA0B;EAC5B;CACF,GAAG,CAAC,yBAAyB,CAAC;CAE9B,OACE,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,WAAU;EACV,OAAO;EACP,kBAAkB;EAClB,iBAAiB;EACjB,mBAAkB,cAAa,kBAAkB,WAAW,CAAC;CAC9D,CAAA,GACD,oBAAC,cAAD;EACE,WAAU;EACV,OAAO;EACP,kBAAkB;EAClB,iBAAiB;EACjB,mBAAkB,cAAa,kBAAkB,WAAW,CAAC;CAC9D,CAAA,CACD,EAAA,CAAA;AAEN;AASA,IAAM,4BAA4BD,QAAM,cAAqD,IAAI;AAmBjG,SAAS,+BAA+B;CACtC,MAAM,WAAWA,QAAM,IAAI,yBAAyB;CACpD,IAAI,CAAC,UAAU,MAAM,IAAI,MAAM,yDAAyD;CACxF,OAAO;AACT;AAEA,SAAS,mBAAmB,EAAE,WAAW,kBAAkB,UAAU,KAAK,UAAmC;CAC3G,MAAM,WAAW,6BAA6B;CAC9C,MAAM,EAAE,YAAY;CACpB,MAAM,cAAcA,QAAM,cAAc,UAAU,SAAS,GAAG,GAAG,CAAC,SAAS,GAAG,CAAC;CAE/E,OACE,oBAACE,WAAoB,UAArB;EACE,KAAK;EACL,WAAW,GAAG,SAAS,WAAW,SAAS;EAC3C,OAAO,SAAS;EACR;EAER,UAAA,oBAACA,WAAoB,SAArB;GAA6B,WAAW;GAAkB,OAAO,SAAS;GACxE,UAAA,oBAAC,2BAAD;IAA2B,OAAO;IAAO;GAAoC,CAAA;EAClD,CAAA;CACD,CAAA;AAElC;AAEA,SAASC,aAAW,EAClB,WACA,UACA,WACA,aAAa,OACb,0BACA,6BACA,cAAc,YACd,eACA,MACA,yBAAyB,MACzB,sBAAsB,OACtB,GAAG,SACe;CAClB,MAAM,UAAUH,QAAM,OAAuB,IAAI;CACjD,cAAc,SAAS;EACrB,SAAS;EACT,gBAAgB;EAChB,mBAAmB;CACrB,CAAC;CAED,MAAM,QAAQ,YAAY,MAAM,WAAW;CAC3C,MAAM,eAAe,OAAO,OAAO,KAAK,CAAC,CAAC,KAAK,OAAO;CAEtD,MAAM,gBAAgB,cAAc,KAAK;CACzC,IAAI,WAAW,cAAc,YAAY;CACzC,IAAI,gBAAgB,YAAY;EAC9B,cAAc,YAAY;EAC1B,cAAc,YAAY;CAC5B,OAAO,IAAI,gBAAgB,cAAc;EACvC,cAAc,YAAY;EAC1B,cAAc,YAAY;CAC5B;CAMA,MAAM,eACJ,gBAAgB,aAAa,EAAE,UAAU,MAAM,IAAI,gBAAgB,eAAe,EAAE,WAAW,MAAM,IAAI,KAAA;CAE3G,MAAM,WAA2C;EAC/C;EACA,WAAW,GAAG,aAAa,gBAAgB,0BAA0B;EACrE,OAAO;EACP;CACF;CACA,MAAM,sBAAsBA,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,QAC3D,UAASA,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,kBACzD,CAAC,CAAC;CACF,IAAI,sBAAsB,GAAG,MAAM,IAAI,MAAM,iDAAiD;CAC9F,MAAM,wBAAwB,wBAAwB;CAEtD,OACE,qBAACE,WAAoB,MAArB;EAA0B,WAAW,GAAG,8CAA8C,SAAS;EAAG,GAAI;EAAtG,UAAA;GACE,oBAAC,2BAAD;IAA2B,OAAO;IAC/B,UAAA,wBAAwB,WAAW,oBAAC,oBAAD,EAAqB,SAA6B,CAAA;GAC7D,CAAA;GAC1B,iBAAiB,gBAAgB,cAAc,oBAAC,eAAD;IAAwB;IAAwB;GAAgB,CAAA;IAC9G,gBAAgB,cAAc,gBAAgB,WAC9C,oBAAC,WAAD;IAAW,aAAY;IAAW,eAAe;IAAwB,eAAe;GAAsB,CAAA;IAE9G,gBAAgB,gBAAgB,gBAAgB,WAChD,oBAAC,WAAD;IACE,aAAY;IACZ,eAAe;IACf,eAAe;GAChB,CAAA;GAEF,gBAAgB,UAAU,oBAACA,WAAoB,QAArB,CAA6B,CAAA;EAChC;;AAE9B;AAEA,SAAS,UAAU,EACjB,WACA,cAAc,YACd,gBAAgB,MAChB,gBAAgB,OAChB,GAAG,SACiH;CACpH,OACE,oBAACA,WAAoB,WAArB;EACE,aAAU;EACG;EACb,WAAW,GACT,kFACA,gBAAgB,gBAAgB,sEAChC,iBAAiB,CAAC,iBAAiB,+BAInC,gBAAgB,cAAc,qDAC9B,gBAAgB,gBAAgB,8DAChC,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,WAAoB,OAArB,EAA2B,WAAU,mFAAoF,CAAA;CAC5F,CAAA;AAEnC"}
+{"version":3,"file":"scroll-area-9-S7wfSs.js","names":["React","_Fragment","ScrollAreaPrimitive","ScrollArea"],"sources":["../src/ds/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { controlStateColorTransition, focusRing } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { useAutoscroll } from '@/hooks/use-autoscroll';\nimport { mergeRefs } from '@/lib/merge-refs';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'vertical' | 'horizontal' | 'both';\ntype ScrollButtonDirection = 'left' | 'right';\n\nconst DEFAULT_SCROLL_BUTTON_SPEED = 100;\nconst DEFAULT_SCROLL_BUTTON_INTERVAL_TIME = 20;\nconst MIN_SCROLL_BUTTON_SPEED = 1;\nconst MIN_SCROLL_BUTTON_INTERVAL_TIME = 16;\n\ntype MaskFadeDepth = `${number}${'rem' | 'px'}`;\ntype MaskSide = boolean | MaskFadeDepth;\n\nconst DEFAULT_MASK_FADE_DEPTH: MaskFadeDepth = '2rem';\nconst NO_MASK_FADE: MaskFadeDepth = '0px';\n\nconst SCROLL_DRIVEN_FADE_CLASSES = [\n  'mask-t-from-[calc(100%-min(var(--scroll-area-fade-top),var(--scroll-area-overflow-y-start,0px)))]',\n  'mask-b-from-[calc(100%-min(var(--scroll-area-fade-bottom),var(--scroll-area-overflow-y-end,0px)))]',\n  'mask-l-from-[calc(100%-min(var(--scroll-area-fade-left),var(--scroll-area-overflow-x-start,0px)))]',\n  'mask-r-from-[calc(100%-min(var(--scroll-area-fade-right),var(--scroll-area-overflow-x-end,0px)))]',\n].join(' ');\n\nexport type MaskSides = {\n  top?: MaskSide;\n  bottom?: MaskSide;\n  left?: MaskSide;\n  right?: MaskSide;\n  /** Shorthand: sets both `left` and `right`. Per-side keys override. */\n  x?: MaskSide;\n  /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */\n  y?: MaskSide;\n};\n\n/**\n * - `true` / omitted: fade the edges that match `orientation`, 2rem deep.\n * - `false`: no fade.\n * - object: per-side override on top of the orientation default; a length (`'5rem'`) sets that side's fade depth.\n *\n * A fade grows with the distance scrolled from its edge, up to its depth.\n */\nexport type ScrollAreaMask = boolean | MaskSides;\n\nexport type ScrollAreaScrollButtons =\n  | boolean\n  | {\n      /** Pixels to scroll per repeated interval. */\n      scrollSpeed?: number;\n      /** Milliseconds between repeated scroll steps while the button is held. */\n      scrollIntervalTime?: number;\n      leftLabel?: string;\n      rightLabel?: string;\n    };\n\nexport type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\n  maxHeight?: string;\n  autoScroll?: boolean;\n  /** With `autoScroll`, start pinned to the end. `false` resumes where the reader left a remounted area. */\n  autoScrollStartFollowing?: boolean;\n  /** With `autoScroll`, called when the reader scrolls away from the end or back to it. */\n  onAutoScrollFollowingChange?: (following: boolean) => void;\n  orientation?: Orientation;\n  /** Show left/right controls for horizontal overflow. Only applies to `horizontal` and `both` orientations. */\n  scrollButtons?: ScrollAreaScrollButtons;\n  /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */\n  mask?: ScrollAreaMask;\n  /**\n   * Reveal the overlay scrollbar when the pointer hovers the area. When `false`,\n   * the scrollbar only appears while actively scrolling. Defaults to `true`.\n   */\n  revealScrollbarOnHover?: boolean;\n  /**\n   * Keep the scrollbar visible whenever the content overflows, so readers can tell there is more\n   * to scroll to. Overrides `revealScrollbarOnHover`. Defaults to `false`.\n   */\n  alwaysShowScrollbar?: boolean;\n};\n\ntype ResolvedMask = Record<'top' | 'bottom' | 'left' | 'right', MaskFadeDepth | false>;\n\ntype ScrollAreaViewportStyle = React.CSSProperties & {\n  '--scroll-area-fade-top'?: MaskFadeDepth;\n  '--scroll-area-fade-bottom'?: MaskFadeDepth;\n  '--scroll-area-fade-left'?: MaskFadeDepth;\n  '--scroll-area-fade-right'?: MaskFadeDepth;\n};\n\nconst fadeDepth = (side: MaskSide) => (side === true ? DEFAULT_MASK_FADE_DEPTH : side);\n\nfunction resolveMask(mask: ScrollAreaMask | undefined, orientation: Orientation): ResolvedMask {\n  if (mask === false) return { top: false, bottom: false, left: false, right: false };\n\n  const verticalFade = (orientation === 'vertical' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const horizontalFade = (orientation === 'horizontal' || orientation === 'both') && DEFAULT_MASK_FADE_DEPTH;\n  const sides: ResolvedMask = { top: verticalFade, bottom: verticalFade, left: horizontalFade, right: horizontalFade };\n\n  if (mask === true || mask === undefined) return sides;\n\n  if (mask.y !== undefined) {\n    sides.top = fadeDepth(mask.y);\n    sides.bottom = fadeDepth(mask.y);\n  }\n  if (mask.x !== undefined) {\n    sides.left = fadeDepth(mask.x);\n    sides.right = fadeDepth(mask.x);\n  }\n  if (mask.top !== undefined) sides.top = fadeDepth(mask.top);\n  if (mask.bottom !== undefined) sides.bottom = fadeDepth(mask.bottom);\n  if (mask.left !== undefined) sides.left = fadeDepth(mask.left);\n  if (mask.right !== undefined) sides.right = fadeDepth(mask.right);\n\n  return sides;\n}\n\nconst fadeDepthVars = (sides: ResolvedMask): ScrollAreaViewportStyle => ({\n  '--scroll-area-fade-top': sides.top || NO_MASK_FADE,\n  '--scroll-area-fade-bottom': sides.bottom || NO_MASK_FADE,\n  '--scroll-area-fade-left': sides.left || NO_MASK_FADE,\n  '--scroll-area-fade-right': sides.right || NO_MASK_FADE,\n});\n\nfunction clampScrollButtonNumber(value: number | undefined, fallback: number, min: number) {\n  const resolvedValue = value ?? fallback;\n  return Number.isFinite(resolvedValue) ? Math.max(min, resolvedValue) : Math.max(min, fallback);\n}\n\ntype ScrollButtonProps = {\n  direction: ScrollButtonDirection;\n  label: string;\n  onStartScrolling: (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => void;\n  onStopScrolling: () => void;\n  onKeyboardScroll: (direction: ScrollButtonDirection) => void;\n};\n\nconst ScrollButton = ({ direction, label, onStartScrolling, onStopScrolling, onKeyboardScroll }: ScrollButtonProps) => {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'absolute inset-y-1 z-10 hidden w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent hover:bg-fill-subtle active:bg-fill',\n        quietTextHover,\n        controlStateColorTransition,\n        focusRing,\n        direction === 'left'\n          ? 'left-1 group-data-[overflow-x-start]/scroll-area:flex'\n          : 'right-1 group-data-[overflow-x-end]/scroll-area:flex',\n      )}\n      onPointerDown={event => onStartScrolling(direction, event)}\n      onPointerUp={onStopScrolling}\n      onPointerLeave={onStopScrolling}\n      onPointerCancel={onStopScrolling}\n      onBlur={onStopScrolling}\n      onClick={event => {\n        if (event.detail === 0) onKeyboardScroll(direction);\n      }}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  );\n};\n\ntype ScrollButtonsProps = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  scrollButtons: Exclude<ScrollAreaScrollButtons, false | undefined>;\n};\n\nconst ScrollButtons = ({ areaRef, scrollButtons }: ScrollButtonsProps) => {\n  const scrollButtonInterval = React.useRef<ReturnType<typeof setInterval> | null>(null);\n  const scrollButtonOptions = typeof scrollButtons === 'object' ? scrollButtons : undefined;\n  const scrollButtonSpeed = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollSpeed,\n    DEFAULT_SCROLL_BUTTON_SPEED,\n    MIN_SCROLL_BUTTON_SPEED,\n  );\n  const scrollButtonIntervalTime = clampScrollButtonNumber(\n    scrollButtonOptions?.scrollIntervalTime,\n    DEFAULT_SCROLL_BUTTON_INTERVAL_TIME,\n    MIN_SCROLL_BUTTON_INTERVAL_TIME,\n  );\n  const leftScrollButtonLabel = scrollButtonOptions?.leftLabel ?? 'Scroll left';\n  const rightScrollButtonLabel = scrollButtonOptions?.rightLabel ?? 'Scroll right';\n\n  const stopScrollButtonScrolling = React.useCallback(() => {\n    if (!scrollButtonInterval.current) return;\n    clearInterval(scrollButtonInterval.current);\n    scrollButtonInterval.current = null;\n  }, []);\n\n  const scrollByDirection = React.useCallback(\n    (direction: ScrollButtonDirection, multiplier = 1) => {\n      const viewport = areaRef.current;\n      if (!viewport) return;\n\n      viewport.scrollBy({\n        left: direction === 'right' ? scrollButtonSpeed * multiplier : -scrollButtonSpeed * multiplier,\n        behavior: 'smooth',\n      });\n    },\n    [areaRef, scrollButtonSpeed],\n  );\n\n  const startScrollButtonScrolling = React.useCallback(\n    (direction: ScrollButtonDirection, event?: React.PointerEvent<HTMLButtonElement>) => {\n      event?.preventDefault();\n      event?.stopPropagation();\n      event?.currentTarget.setPointerCapture?.(event.pointerId);\n\n      stopScrollButtonScrolling();\n      scrollByDirection(direction, 2);\n\n      scrollButtonInterval.current = setInterval(() => {\n        scrollByDirection(direction);\n      }, scrollButtonIntervalTime);\n    },\n    [scrollButtonIntervalTime, scrollByDirection, stopScrollButtonScrolling],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      stopScrollButtonScrolling();\n    };\n  }, [stopScrollButtonScrolling]);\n\n  return (\n    <>\n      <ScrollButton\n        direction=\"left\"\n        label={leftScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n      <ScrollButton\n        direction=\"right\"\n        label={rightScrollButtonLabel}\n        onStartScrolling={startScrollButtonScrolling}\n        onStopScrolling={stopScrollButtonScrolling}\n        onKeyboardScroll={direction => scrollByDirection(direction, 2)}\n      />\n    </>\n  );\n};\n\ntype ScrollAreaViewportContextValue = {\n  areaRef: React.RefObject<HTMLDivElement | null>;\n  className: string;\n  style: React.CSSProperties;\n  contentStyle: React.CSSProperties | undefined;\n};\n\nconst ScrollAreaViewportContext = React.createContext<ScrollAreaViewportContextValue | null>(null);\n\nexport type ScrollAreaViewportProps = {\n  /**\n   * Viewport layout and scroll chaining overrides. Chaining stays native by default;\n   * use `overscroll-y-contain` to isolate vertical scrolling while allowing browser history swipes.\n   */\n  className?: string;\n  contentClassName?: string;\n  children?: React.ReactNode;\n  /** The scrolling element, e.g. a virtualizer's `getScrollElement`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /**\n   * Renders the scrolling element as another component, for a library that has to own it\n   * (e.g. Base UI's `Select.List`, which Select scrolls to line the selected item up with the trigger).\n   */\n  render?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>['render'];\n};\n\nfunction useScrollAreaViewportContext() {\n  const viewport = React.use(ScrollAreaViewportContext);\n  if (!viewport) throw new Error('ScrollAreaViewport must be a direct child of ScrollArea');\n  return viewport;\n}\n\nfunction ScrollAreaViewport({ className, contentClassName, children, ref, render }: ScrollAreaViewportProps) {\n  const viewport = useScrollAreaViewportContext();\n  const { areaRef } = viewport;\n  const viewportRef = React.useMemo(() => mergeRefs(areaRef, ref), [areaRef, ref]);\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={viewportRef}\n      className={cn(viewport.className, className)}\n      style={viewport.style}\n      render={render}\n    >\n      <ScrollAreaPrimitive.Content className={contentClassName} style={viewport.contentStyle}>\n        <ScrollAreaViewportContext value={null}>{children}</ScrollAreaViewportContext>\n      </ScrollAreaPrimitive.Content>\n    </ScrollAreaPrimitive.Viewport>\n  );\n}\n\nfunction ScrollArea({\n  className,\n  children,\n  maxHeight,\n  autoScroll = false,\n  autoScrollStartFollowing,\n  onAutoScrollFollowingChange,\n  orientation = 'vertical',\n  scrollButtons,\n  mask,\n  revealScrollbarOnHover = true,\n  alwaysShowScrollbar = false,\n  ...props\n}: ScrollAreaProps) {\n  const areaRef = React.useRef<HTMLDivElement>(null);\n  useAutoscroll(areaRef, {\n    enabled: autoScroll,\n    startFollowing: autoScrollStartFollowing,\n    onFollowingChange: onAutoScrollFollowingChange,\n  });\n\n  const sides = resolveMask(mask, orientation);\n  const fadesAnySide = Object.values(sides).some(Boolean);\n\n  const viewportStyle = fadeDepthVars(sides);\n  if (maxHeight) viewportStyle.maxHeight = maxHeight;\n  if (orientation === 'vertical') {\n    viewportStyle.overflowX = 'hidden';\n    viewportStyle.overflowY = 'scroll';\n  } else if (orientation === 'horizontal') {\n    viewportStyle.overflowX = 'scroll';\n    viewportStyle.overflowY = 'hidden';\n  }\n\n  // Base UI's ScrollAreaContent forces `min-width: fit-content` so the\n  // content can grow wider than the viewport (required for horizontal scroll\n  // measurement). For vertical-only scroll we override it so children shrink\n  // to the viewport width instead of forcing horizontal scroll.\n  const contentStyle: React.CSSProperties | undefined =\n    orientation === 'vertical' ? { minWidth: '0px' } : orientation === 'horizontal' ? { minHeight: '0px' } : undefined;\n\n  const viewport: ScrollAreaViewportContextValue = {\n    areaRef,\n    className: cn('size-full', fadesAnySide && SCROLL_DRIVEN_FADE_CLASSES),\n    style: viewportStyle,\n    contentStyle,\n  };\n  const callerViewportCount = React.Children.toArray(children).filter(\n    child => React.isValidElement(child) && child.type === ScrollAreaViewport,\n  ).length;\n  if (callerViewportCount > 1) throw new Error('ScrollArea takes at most one ScrollAreaViewport');\n  const callerRendersViewport = callerViewportCount === 1;\n\n  return (\n    <ScrollAreaPrimitive.Root className={cn('group/scroll-area relative overflow-hidden', className)} {...props}>\n      <ScrollAreaViewportContext value={viewport}>\n        {callerRendersViewport ? children : <ScrollAreaViewport>{children}</ScrollAreaViewport>}\n      </ScrollAreaViewportContext>\n      {scrollButtons && orientation !== 'vertical' && <ScrollButtons areaRef={areaRef} scrollButtons={scrollButtons} />}\n      {(orientation === 'vertical' || orientation === 'both') && (\n        <ScrollBar orientation=\"vertical\" revealOnHover={revealScrollbarOnHover} alwaysVisible={alwaysShowScrollbar} />\n      )}\n      {(orientation === 'horizontal' || orientation === 'both') && (\n        <ScrollBar\n          orientation=\"horizontal\"\n          revealOnHover={revealScrollbarOnHover}\n          alwaysVisible={alwaysShowScrollbar}\n        />\n      )}\n      {orientation === 'both' && <ScrollAreaPrimitive.Corner />}\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  revealOnHover = true,\n  alwaysVisible = false,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar> & { revealOnHover?: boolean; alwaysVisible?: boolean }) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        'flex touch-none transition-opacity duration-normal ease-out-custom select-none',\n        alwaysVisible ? 'opacity-100' : 'opacity-0 data-[scrolling]:opacity-100 data-[scrolling]:duration-0',\n        revealOnHover && !alwaysVisible && 'data-[hovering]:opacity-100',\n        // Base UI pins the bar to both ends of the area (top/bottom or left/right), so it spans it\n        // without a size class. `--scroll-area-scrollbar-inset` pulls its ends in, so a rounded\n        // container (a popup) doesn't clip them; 0 by default.\n        orientation === 'vertical' && 'my-(--scroll-area-scrollbar-inset,0px) w-1.5 p-px',\n        orientation === 'horizontal' && 'mx-(--scroll-area-scrollbar-inset,0px) h-1.5 flex-col p-px',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/60\" />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollAreaViewport, ScrollBar };\n"],"mappings":"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"}

package/dist/{scroll-area-BP4gPZ4G.cjs → scroll-area-BU_TorPW.cjs}

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
-const require_utils = require("./utils-uDc1ofX1.cjs");
 const require_primitives_transitions = require("./primitives/transitions.cjs.js");
 const require_primitives_typography = require("./primitives/typography.cjs.js");
 const require_hooks_use_autoscroll = require("./hooks/use-autoscroll.cjs.js");
 const require_merge_refs = require("./merge-refs-C0BDbPAW.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -243,4 +243,4 @@ Object.defineProperty(exports, "ScrollBar", {
 	}
 });
 
-//# sourceMappingURL=scroll-area-BP4gPZ4G.cjs.map
+//# sourceMappingURL=scroll-area-BU_TorPW.cjs.map