@sqlrooms/ui 0.27.0-rc.2 → 0.27.0-rc.4

package/dist/components/editable-text.d.ts

@@ -35,6 +35,10 @@ export declare const EditableText: FC<{
     value: string;
     placeholder?: string;
     onChange: (text: string) => void;
+    autoFocus?: boolean;
+    selectOnFocus?: boolean;
+    /** When false, the input is removed from tab order while not editing. */
+    allowTabFocusWhenNotEditing?: boolean;
     /**
      * The editing state when it is initially rendered. Use when you do not need to control its editing state
      * in the parent component.

package/dist/components/editable-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,EAAE,EAA2C,MAAM,OAAO,CAAC;AAKhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;QAGI;IACJ,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;QAEI;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAgIA,CAAC"}
+{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,EAAE,EAA2C,MAAM,OAAO,CAAC;AAKhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;;QAGI;IACJ,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;QAEI;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CA6JA,CAAC"}

package/dist/components/editable-text.js

@@ -33,7 +33,7 @@ import { cn } from '../lib/utils';
  *    />
  * ```
  */
-export const EditableText = ({ className, isReadOnly = false, defaultEditing = false, isEditing, placeholder, value, onChange, onEditingChange, }) => {
+export const EditableText = ({ className, isReadOnly = false, defaultEditing = false, isEditing, placeholder, value, onChange, onEditingChange, autoFocus, selectOnFocus = false, allowTabFocusWhenNotEditing = true, }) => {
     const [isInternalEditing, setInternalIsEditing] = useState(defaultEditing);
     const inputRef = useRef(null);
     const [internalValue, setInternalValue] = useState(value);
@@ -55,10 +55,12 @@ export const EditableText = ({ className, isReadOnly = false, defaultEditing = f
             setInternalIsEditing(Boolean(isEditing));
             if (isEditing) {
                 // When enabling editing from a dropdown menu, there will be a blur event when the dropdown closes,
-                // so we need to wait a bit before making sure the input is focused and selected
+                // so we need to wait a bit before making sure the input is focused and selected.
                 const timeoutId = setTimeout(() => {
-                    inputRef.current?.select();
                     inputRef.current?.focus();
+                    if (selectOnFocus) {
+                        inputRef.current?.select();
+                    }
                 }, 200);
                 return () => clearTimeout(timeoutId);
             }
@@ -88,6 +90,26 @@ export const EditableText = ({ className, isReadOnly = false, defaultEditing = f
             handleSetEditing(true);
         }
     }, [isInternalEditing, handleSetEditing]);
+    const handleFocus = useCallback(() => {
+        if (selectOnFocus && isInternalEditing) {
+            inputRef.current?.select();
+        }
+    }, [isInternalEditing, selectOnFocus]);
+    useEffect(() => {
+        if (!isInternalEditing)
+            return;
+        let rafId = requestAnimationFrame(() => {
+            rafId = requestAnimationFrame(() => {
+                inputRef.current?.focus();
+                if (selectOnFocus) {
+                    inputRef.current?.select();
+                }
+            });
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+        };
+    }, [isInternalEditing, selectOnFocus]);
     // Add keydown event listener to handle enter key
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -118,6 +140,6 @@ export const EditableText = ({ className, isReadOnly = false, defaultEditing = f
             truncate: !isInternalEditing,
         }, className), style: {
             caretColor: isInternalEditing ? undefined : 'transparent',
-        }, value: internalValue, onChange: handleSetValue, onBlur: handleBlur, disabled: isReadOnly, onClick: handleClick, placeholder: !isInternalEditing ? (placeholder ?? 'Click to edit') : undefined }));
+        }, value: internalValue, tabIndex: isInternalEditing || allowTabFocusWhenNotEditing ? 0 : -1, autoFocus: autoFocus, onChange: handleSetValue, onFocus: handleFocus, onBlur: handleBlur, disabled: isReadOnly, onClick: handleClick, placeholder: !isInternalEditing ? (placeholder ?? 'Click to edit') : undefined }));
 };
 //# sourceMappingURL=editable-text.js.map

package/dist/components/editable-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"editable-text.js","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {ChangeEvent, FC, useCallback, useEffect, useRef, useState} from 'react';\n\nimport {Input} from './input';\nimport {cn} from '../lib/utils';\n\n/**\n * Component that allows the user to edit a string.\n *\n * The editing mode can be controlled (the mode is managed by the parent component)\n * or uncontrolled (managed by the component itself).\n *\n * Controlled mode example:\n * ```\n *    const [text, setText] = useState('');\n *    const [isEditing, setEditing] = useState(false);\n *    ...\n *    <EditableText\n *       value={text}\n *       onChange={setText}\n *       isEditing={isEditing}\n *       onEditingChange={setEditing}\n *    />\n * ```\n *\n * Uncontrolled mode example:\n * ```\n *    const [text, setText] = useState('');\n *    ...\n *    <EditableText\n *      value={text}\n *      onChange={setText}\n *      defaultEditing={false}\n *    />\n * ```\n */\n\nexport const EditableText: FC<{\n  className?: string;\n  isReadOnly?: boolean;\n  value: string;\n  placeholder?: string;\n  onChange: (text: string) => void;\n\n  /**\n   * The editing state when it is initially rendered. Use when you do not need to control its editing state\n   * in the parent component.\n   **/\n  defaultEditing?: boolean;\n\n  /**\n   * The controlled editing state of the component. Must be used in conjunction with onEditingChange.\n   **/\n  isEditing?: boolean;\n  onEditingChange?: (isEditing: boolean) => void;\n}> = ({\n  className,\n  isReadOnly = false,\n  defaultEditing = false,\n  isEditing,\n  placeholder,\n  value,\n  onChange,\n  onEditingChange,\n}) => {\n  const [isInternalEditing, setInternalIsEditing] = useState(defaultEditing);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalValueRef = useRef(internalValue);\n\n  useEffect(() => {\n    internalValueRef.current = internalValue;\n  }, [internalValue]);\n\n  // Keep internalValue in sync with value prop\n  /* eslint-disable react-hooks/set-state-in-effect */\n  useEffect(() => {\n    if (value !== internalValueRef.current) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  // Keep internal editing state in sync with controlled isEditing prop\n  // and focus the input when editing is enabled\n  useEffect(() => {\n    if (isEditing !== undefined && isEditing !== isInternalEditing) {\n      setInternalIsEditing(Boolean(isEditing));\n      if (isEditing) {\n        // When enabling editing from a dropdown menu, there will be a blur event when the dropdown closes,\n        // so we need to wait a bit before making sure the input is focused and selected\n        const timeoutId = setTimeout(() => {\n          inputRef.current?.select();\n          inputRef.current?.focus();\n        }, 200);\n        return () => clearTimeout(timeoutId);\n      }\n    }\n    return undefined;\n  }, [isEditing, isInternalEditing]);\n  /* eslint-enable react-hooks/set-state-in-effect */\n\n  const handleSetValue = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (isReadOnly || !isInternalEditing) {\n        return;\n      }\n      return setInternalValue(e.target.value);\n    },\n    [isInternalEditing, isReadOnly],\n  );\n\n  const handleSetEditing = useCallback(\n    (nextIsEditing: boolean) => {\n      if (isReadOnly) {\n        return;\n      }\n      setInternalIsEditing(nextIsEditing);\n      onEditingChange?.(nextIsEditing);\n    },\n    [isReadOnly, onEditingChange],\n  );\n\n  const handleBlur = useCallback(() => {\n    handleSetEditing(false);\n    onChange(internalValueRef.current?.trim());\n  }, [handleSetEditing, onChange]);\n\n  const handleClick = useCallback(() => {\n    if (!isInternalEditing) {\n      handleSetEditing(true);\n    }\n  }, [isInternalEditing, handleSetEditing]);\n\n  // Add keydown event listener to handle enter key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Escape':\n          // Reset the internal value to the original value\n          setInternalValue(value);\n          internalValueRef.current = value;\n          handleSetEditing(false);\n          inputRef.current?.blur();\n          break;\n        case 'Enter':\n          handleSetEditing(false);\n          onChange(internalValueRef.current.trim());\n          inputRef.current?.blur();\n          break;\n      }\n    };\n    if (isInternalEditing) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isInternalEditing, onChange, handleSetEditing, value]);\n\n  return (\n    <Input\n      ref={inputRef}\n      className={cn(\n        'disabled:opacity-1 w-full rounded-sm border-transparent px-1 py-0 focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:cursor-text',\n        {\n          'select-none bg-transparent': !isInternalEditing,\n          truncate: !isInternalEditing,\n        },\n        className,\n      )}\n      style={{\n        caretColor: isInternalEditing ? undefined : 'transparent',\n      }}\n      value={internalValue}\n      onChange={handleSetValue}\n      onBlur={handleBlur}\n      disabled={isReadOnly}\n      onClick={handleClick}\n      placeholder={\n        !isInternalEditing ? (placeholder ?? 'Click to edit') : undefined\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"editable-text.js","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {ChangeEvent, FC, useCallback, useEffect, useRef, useState} from 'react';\n\nimport {Input} from './input';\nimport {cn} from '../lib/utils';\n\n/**\n * Component that allows the user to edit a string.\n *\n * The editing mode can be controlled (the mode is managed by the parent component)\n * or uncontrolled (managed by the component itself).\n *\n * Controlled mode example:\n * ```\n *    const [text, setText] = useState('');\n *    const [isEditing, setEditing] = useState(false);\n *    ...\n *    <EditableText\n *       value={text}\n *       onChange={setText}\n *       isEditing={isEditing}\n *       onEditingChange={setEditing}\n *    />\n * ```\n *\n * Uncontrolled mode example:\n * ```\n *    const [text, setText] = useState('');\n *    ...\n *    <EditableText\n *      value={text}\n *      onChange={setText}\n *      defaultEditing={false}\n *    />\n * ```\n */\n\nexport const EditableText: FC<{\n  className?: string;\n  isReadOnly?: boolean;\n  value: string;\n  placeholder?: string;\n  onChange: (text: string) => void;\n  autoFocus?: boolean;\n  selectOnFocus?: boolean;\n  /** When false, the input is removed from tab order while not editing. */\n  allowTabFocusWhenNotEditing?: boolean;\n\n  /**\n   * The editing state when it is initially rendered. Use when you do not need to control its editing state\n   * in the parent component.\n   **/\n  defaultEditing?: boolean;\n\n  /**\n   * The controlled editing state of the component. Must be used in conjunction with onEditingChange.\n   **/\n  isEditing?: boolean;\n  onEditingChange?: (isEditing: boolean) => void;\n}> = ({\n  className,\n  isReadOnly = false,\n  defaultEditing = false,\n  isEditing,\n  placeholder,\n  value,\n  onChange,\n  onEditingChange,\n  autoFocus,\n  selectOnFocus = false,\n  allowTabFocusWhenNotEditing = true,\n}) => {\n  const [isInternalEditing, setInternalIsEditing] = useState(defaultEditing);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalValueRef = useRef(internalValue);\n\n  useEffect(() => {\n    internalValueRef.current = internalValue;\n  }, [internalValue]);\n\n  // Keep internalValue in sync with value prop\n  /* eslint-disable react-hooks/set-state-in-effect */\n  useEffect(() => {\n    if (value !== internalValueRef.current) {\n      setInternalValue(value);\n    }\n  }, [value]);\n\n  // Keep internal editing state in sync with controlled isEditing prop\n  // and focus the input when editing is enabled\n  useEffect(() => {\n    if (isEditing !== undefined && isEditing !== isInternalEditing) {\n      setInternalIsEditing(Boolean(isEditing));\n      if (isEditing) {\n        // When enabling editing from a dropdown menu, there will be a blur event when the dropdown closes,\n        // so we need to wait a bit before making sure the input is focused and selected.\n        const timeoutId = setTimeout(() => {\n          inputRef.current?.focus();\n          if (selectOnFocus) {\n            inputRef.current?.select();\n          }\n        }, 200);\n        return () => clearTimeout(timeoutId);\n      }\n    }\n    return undefined;\n  }, [isEditing, isInternalEditing]);\n  /* eslint-enable react-hooks/set-state-in-effect */\n\n  const handleSetValue = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (isReadOnly || !isInternalEditing) {\n        return;\n      }\n      return setInternalValue(e.target.value);\n    },\n    [isInternalEditing, isReadOnly],\n  );\n\n  const handleSetEditing = useCallback(\n    (nextIsEditing: boolean) => {\n      if (isReadOnly) {\n        return;\n      }\n      setInternalIsEditing(nextIsEditing);\n      onEditingChange?.(nextIsEditing);\n    },\n    [isReadOnly, onEditingChange],\n  );\n\n  const handleBlur = useCallback(() => {\n    handleSetEditing(false);\n    onChange(internalValueRef.current?.trim());\n  }, [handleSetEditing, onChange]);\n\n  const handleClick = useCallback(() => {\n    if (!isInternalEditing) {\n      handleSetEditing(true);\n    }\n  }, [isInternalEditing, handleSetEditing]);\n\n  const handleFocus = useCallback(() => {\n    if (selectOnFocus && isInternalEditing) {\n      inputRef.current?.select();\n    }\n  }, [isInternalEditing, selectOnFocus]);\n\n  useEffect(() => {\n    if (!isInternalEditing) return;\n    let rafId = requestAnimationFrame(() => {\n      rafId = requestAnimationFrame(() => {\n        inputRef.current?.focus();\n        if (selectOnFocus) {\n          inputRef.current?.select();\n        }\n      });\n    });\n    return () => {\n      cancelAnimationFrame(rafId);\n    };\n  }, [isInternalEditing, selectOnFocus]);\n\n  // Add keydown event listener to handle enter key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case 'Escape':\n          // Reset the internal value to the original value\n          setInternalValue(value);\n          internalValueRef.current = value;\n          handleSetEditing(false);\n          inputRef.current?.blur();\n          break;\n        case 'Enter':\n          handleSetEditing(false);\n          onChange(internalValueRef.current.trim());\n          inputRef.current?.blur();\n          break;\n      }\n    };\n    if (isInternalEditing) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isInternalEditing, onChange, handleSetEditing, value]);\n\n  return (\n    <Input\n      ref={inputRef}\n      className={cn(\n        'disabled:opacity-1 w-full rounded-sm border-transparent px-1 py-0 focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:cursor-text',\n        {\n          'select-none bg-transparent': !isInternalEditing,\n          truncate: !isInternalEditing,\n        },\n        className,\n      )}\n      style={{\n        caretColor: isInternalEditing ? undefined : 'transparent',\n      }}\n      value={internalValue}\n      tabIndex={isInternalEditing || allowTabFocusWhenNotEditing ? 0 : -1}\n      autoFocus={autoFocus}\n      onChange={handleSetValue}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      disabled={isReadOnly}\n      onClick={handleClick}\n      placeholder={\n        !isInternalEditing ? (placeholder ?? 'Click to edit') : undefined\n      }\n    />\n  );\n};\n"]}

package/dist/components/scrollable-row.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type ScrollableRowProps = {
+    children: React.ReactNode;
+    className?: string;
+    scrollClassName?: string;
+    scrollRef?: React.RefObject<HTMLDivElement>;
+    scrollAmount?: number;
+    arrowVisibility?: 'hover' | 'always';
+    arrowClassName?: string;
+    arrowIconClassName?: string;
+};
+export declare function ScrollableRow({ children, className, scrollClassName, scrollRef, scrollAmount, arrowVisibility, arrowClassName, arrowIconClassName, }: ScrollableRowProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=scrollable-row.d.ts.map

package/dist/components/scrollable-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollable-row.d.ts","sourceRoot":"","sources":["../../src/components/scrollable-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,SAAS,EACT,YAAkB,EAClB,eAAyB,EACzB,cAAc,EACd,kBAAkB,GACnB,EAAE,kBAAkB,2CAkGpB"}

package/dist/components/scrollable-row.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../lib/utils';
+export function ScrollableRow({ children, className, scrollClassName, scrollRef, scrollAmount = 200, arrowVisibility = 'hover', arrowClassName, arrowIconClassName, }) {
+    const internalRef = useRef(null);
+    const containerRef = scrollRef ?? internalRef;
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const updateScrollState = () => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        setCanScrollLeft(scrollLeft > 0);
+        setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+    };
+    const scrollBy = (direction) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.scrollBy({
+            left: direction === 'left' ? -scrollAmount : scrollAmount,
+            behavior: 'smooth',
+        });
+    };
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        updateScrollState();
+        container.addEventListener('scroll', updateScrollState);
+        const resizeObserver = new ResizeObserver(updateScrollState);
+        resizeObserver.observe(container);
+        return () => {
+            container.removeEventListener('scroll', updateScrollState);
+            resizeObserver.disconnect();
+        };
+    }, [children, containerRef]);
+    const arrowBaseClass = cn('absolute top-0 z-10 flex h-full w-8 items-center backdrop-blur-md bg-background/50 transition-colors', arrowVisibility === 'hover'
+        ? 'opacity-0 transition-opacity hover:opacity-100'
+        : 'opacity-100', arrowClassName);
+    return (_jsxs("div", { className: cn('relative', className), children: [_jsx("button", { type: "button", onClick: () => scrollBy('left'), disabled: !canScrollLeft, className: cn(arrowBaseClass, 'left-0 justify-start pl-1', 'from-background/90 via-background/60 group bg-gradient-to-r to-transparent', !canScrollLeft && 'pointer-events-none opacity-0'), "aria-label": "Scroll left", title: "Scroll left", children: _jsx(ChevronLeft, { className: cn('text-muted-foreground group-hover:text-foreground h-5 w-5 transition-colors', arrowIconClassName) }) }), _jsx("div", { ref: containerRef, className: scrollClassName, children: children }), _jsx("button", { type: "button", onClick: () => scrollBy('right'), disabled: !canScrollRight, className: cn(arrowBaseClass, 'right-0 justify-end pr-1', 'from-background/90 via-background/60 group bg-gradient-to-l to-transparent', !canScrollRight && 'pointer-events-none opacity-0'), "aria-label": "Scroll right", title: "Scroll right", children: _jsx(ChevronRight, { className: cn('text-muted-foreground group-hover:text-foreground h-5 w-5 transition-colors', arrowIconClassName) }) })] }));
+}
+//# sourceMappingURL=scrollable-row.js.map

package/dist/components/scrollable-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollable-row.js","sourceRoot":"","sources":["../../src/components/scrollable-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import {ChevronLeft, ChevronRight} from 'lucide-react';\nimport React, {useEffect, useRef, useState} from 'react';\nimport {cn} from '../lib/utils';\n\ntype ScrollableRowProps = {\n  children: React.ReactNode;\n  className?: string;\n  scrollClassName?: string;\n  scrollRef?: React.RefObject<HTMLDivElement>;\n  scrollAmount?: number;\n  arrowVisibility?: 'hover' | 'always';\n  arrowClassName?: string;\n  arrowIconClassName?: string;\n};\n\nexport function ScrollableRow({\n  children,\n  className,\n  scrollClassName,\n  scrollRef,\n  scrollAmount = 200,\n  arrowVisibility = 'hover',\n  arrowClassName,\n  arrowIconClassName,\n}: ScrollableRowProps) {\n  const internalRef = useRef<HTMLDivElement>(null);\n  const containerRef = scrollRef ?? internalRef;\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateScrollState = () => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const {scrollLeft, scrollWidth, clientWidth} = container;\n    setCanScrollLeft(scrollLeft > 0);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  };\n\n  const scrollBy = (direction: 'left' | 'right') => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.scrollBy({\n      left: direction === 'left' ? -scrollAmount : scrollAmount,\n      behavior: 'smooth',\n    });\n  };\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    updateScrollState();\n\n    container.addEventListener('scroll', updateScrollState);\n    const resizeObserver = new ResizeObserver(updateScrollState);\n    resizeObserver.observe(container);\n\n    return () => {\n      container.removeEventListener('scroll', updateScrollState);\n      resizeObserver.disconnect();\n    };\n  }, [children, containerRef]);\n\n  const arrowBaseClass = cn(\n    'absolute top-0 z-10 flex h-full w-8 items-center backdrop-blur-md bg-background/50 transition-colors',\n    arrowVisibility === 'hover'\n      ? 'opacity-0 transition-opacity hover:opacity-100'\n      : 'opacity-100',\n    arrowClassName,\n  );\n\n  return (\n    <div className={cn('relative', className)}>\n      <button\n        type=\"button\"\n        onClick={() => scrollBy('left')}\n        disabled={!canScrollLeft}\n        className={cn(\n          arrowBaseClass,\n          'left-0 justify-start pl-1',\n          'from-background/90 via-background/60 group bg-gradient-to-r to-transparent',\n          !canScrollLeft && 'pointer-events-none opacity-0',\n        )}\n        aria-label=\"Scroll left\"\n        title=\"Scroll left\"\n      >\n        <ChevronLeft\n          className={cn(\n            'text-muted-foreground group-hover:text-foreground h-5 w-5 transition-colors',\n            arrowIconClassName,\n          )}\n        />\n      </button>\n\n      <div ref={containerRef} className={scrollClassName}>\n        {children}\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={() => scrollBy('right')}\n        disabled={!canScrollRight}\n        className={cn(\n          arrowBaseClass,\n          'right-0 justify-end pr-1',\n          'from-background/90 via-background/60 group bg-gradient-to-l to-transparent',\n          !canScrollRight && 'pointer-events-none opacity-0',\n        )}\n        aria-label=\"Scroll right\"\n        title=\"Scroll right\"\n      >\n        <ChevronRight\n          className={cn(\n            'text-muted-foreground group-hover:text-foreground h-5 w-5 transition-colors',\n            arrowIconClassName,\n          )}\n        />\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/components/tab-strip.d.ts

@@ -50,12 +50,22 @@ interface TabStripSearchDropdownProps {
     tooltip?: React.ReactNode;
     /** Optional custom icon for the trigger button. */
     triggerIcon?: React.ReactNode;
+    /** Message shown when there are no tabs at all. */
+    emptyMessage?: React.ReactNode;
+    /** Message shown when searching and there are no matching tabs. */
+    searchEmptyMessage?: React.ReactNode;
+    /** Label for the closed tabs group. */
+    closedTabsLabel?: React.ReactNode;
+    /** Sorting mode for search dropdown items. */
+    sortSearchItems?: 'none' | 'recent';
+    /** Optional accessor for tab recency timestamps. */
+    getTabLastOpenedAt?: (tab: TabDescriptor) => number | undefined;
 }
 /**
  * Renders the dropdown with search for browsing tabs.
- * By default shows only closed tabs. When searching, shows all matching tabs.
+ * Shows open tabs first and closed tabs second (dimmed). When searching, shows all matching tabs.
  */
-declare function TabStripSearchDropdown({ className, triggerClassName, autoFocus, tooltip, triggerIcon, }: TabStripSearchDropdownProps): import("react/jsx-runtime").JSX.Element;
+declare function TabStripSearchDropdown({ className, triggerClassName, autoFocus, tooltip, triggerIcon, emptyMessage, searchEmptyMessage, closedTabsLabel, sortSearchItems, getTabLastOpenedAt, }: TabStripSearchDropdownProps): import("react/jsx-runtime").JSX.Element;
 interface TabStripNewButtonProps {
     className?: string;
     /** Optional tooltip content for the button. */
@@ -72,7 +82,7 @@ export interface TabStripProps {
     /** All available tabs. */
     tabs: TabDescriptor[];
     /** IDs of tabs that are currently open. */
-    openTabs: string[];
+    openTabs?: string[];
     /** ID of the currently selected tab. */
     selectedTabId?: string | null;
     /** If true, hides the close button when only one tab remains open. */

package/dist/components/tab-strip.d.ts.map

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

package/dist/components/tab-strip.js

@@ -3,13 +3,14 @@ import { DndContext, PointerSensor, closestCenter, useSensor, useSensors, } from
 import { restrictToHorizontalAxis, restrictToParentElement, } from '@dnd-kit/modifiers';
 import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
 import { EllipsisVerticalIcon, ListCollapseIcon, PlusIcon, SearchIcon, XIcon, } from 'lucide-react';
-import { createContext, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 const DRAG_MODIFIERS = [restrictToHorizontalAxis, restrictToParentElement];
 import { cn } from '../lib/utils';
 import { Button } from './button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './dropdown-menu';
 import { EditableText } from './editable-text';
 import { Input } from './input';
+import { ScrollableRow } from './scrollable-row';
 import { Tabs, TabsList, TabsTrigger } from './tabs';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './tooltip';
 const TabStripContext = createContext(null);
@@ -34,23 +35,23 @@ function SortableTab({ tab, tabClassName, editingTabId, hideCloseButton, onClose
         opacity: isDragging ? 0.5 : 1,
     };
     const menuContent = renderTabMenu?.(tab);
-    return (_jsx("div", { ref: setNodeRef, className: "h-full flex-shrink-0", style: style, ...attributes, ...listeners, children: _jsxs(TabsTrigger, { value: tab.id, className: cn('data-[state=inactive]:hover:bg-primary/5', 'group flex h-full min-w-[100px] max-w-[200px] flex-shrink-0 cursor-grab', 'items-center justify-between gap-1 overflow-hidden rounded-b-none', 'py-0 pl-4 pr-1 font-normal data-[state=active]:shadow-none', tabClassName), children: [_jsx("div", { className: "flex min-w-0 items-center", onDoubleClick: () => onStartEditing(tab.id), children: editingTabId !== tab.id ? (_jsx("div", { className: "truncate text-sm", children: renderTabLabel ? renderTabLabel(tab) : tab.name })) : (_jsx(EditableText, { value: tab.name, onChange: (newName) => onInlineRename(tab.id, newName), className: "h-6 min-w-0 flex-1 truncate text-sm shadow-none", isEditing: true, onEditingChange: (isEditing) => {
-                            if (!isEditing) {
-                                onStopEditing();
-                            }
-                        } })) }), _jsxs("div", { className: "flex flex-shrink-0 items-center", children: [menuContent && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("span", { role: "button", tabIndex: -1, "aria-label": "Tab options", className: "hover:bg-primary/10 flex h-5 w-5 cursor-pointer items-center justify-center rounded p-1 opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100", onMouseDown: (event) => {
-                                            event.stopPropagation();
-                                            event.preventDefault();
-                                        }, onClick: (event) => {
-                                            event.stopPropagation();
-                                        }, children: _jsx(EllipsisVerticalIcon, { className: "h-3 w-3" }) }) }), _jsx(DropdownMenuContent, { align: "start", children: menuContent })] })), !hideCloseButton && (_jsx("span", { role: "button", tabIndex: -1, "aria-label": "Close tab", className: "hover:bg-primary/10 flex h-5 w-5 cursor-pointer items-center justify-center rounded p-1", onMouseDown: (event) => {
-                                event.stopPropagation();
-                                event.preventDefault();
-                            }, onClick: (event) => {
-                                event.stopPropagation();
-                                event.preventDefault();
-                                onClose(tab.id);
-                            }, children: _jsx(XIcon, { className: "h-4 w-4" }) }))] })] }) }));
+    return (_jsx("div", { ref: setNodeRef, className: "h-full flex-shrink-0", style: style, "data-tab-id": tab.id, ...attributes, ...listeners, tabIndex: -1, children: _jsx("div", { "data-state": editingTabId === tab.id ? 'editing' : undefined, className: cn('data-[state=inactive]:hover:bg-primary/5', 'group flex h-full min-w-[100px] max-w-[200px] flex-shrink-0 cursor-grab', 'items-center gap-0.5 overflow-visible rounded-b-none', 'py-0 pl-0 pr-0 font-normal data-[state=active]:shadow-none', tabClassName, editingTabId === tab.id && 'focus-visible:ring-0'), children: _jsxs("div", { className: "relative flex h-full min-w-0 flex-1 items-center", children: [_jsx(TabsTrigger, { value: tab.id, tabIndex: editingTabId === tab.id ? -1 : undefined, "data-editing": editingTabId === tab.id ? '' : undefined, className: cn('flex h-full min-w-0 flex-1 items-center justify-start gap-1', 'hover:bg-primary/10 overflow-hidden px-6 py-1 font-normal', 'min-h-7', 'data-[state=active]:bg-primary/10 data-[state=active]:text-foreground data-[state=active]:shadow-none', 'focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-offset-0', editingTabId === tab.id && 'focus-visible:ring-0'), onDoubleClick: () => onStartEditing(tab.id), children: editingTabId !== tab.id ? (_jsx("div", { className: "truncate text-sm", children: renderTabLabel ? renderTabLabel(tab) : tab.name })) : (_jsx(EditableText, { value: tab.name, onChange: (newName) => onInlineRename(tab.id, newName), className: "h-6 min-w-0 flex-1 truncate text-sm shadow-none", isEditing: true, autoFocus: true, selectOnFocus: true, allowTabFocusWhenNotEditing: false, onEditingChange: (isEditing) => {
+                                if (!isEditing) {
+                                    onStopEditing();
+                                }
+                            } })) }), menuContent && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Tab options", className: "hover:bg-primary/10 focus-visible:bg-primary/10 focus-visible:ring-primary absolute left-1 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded p-1 opacity-0 outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-0 group-hover:opacity-100 data-[state=open]:opacity-100", onMouseDown: (event) => {
+                                        event.stopPropagation();
+                                        event.preventDefault();
+                                    }, onClick: (event) => {
+                                        event.stopPropagation();
+                                    }, children: _jsx(EllipsisVerticalIcon, { className: "h-3 w-3" }) }) }), _jsx(DropdownMenuContent, { align: "start", children: menuContent })] })), !hideCloseButton && (_jsx("button", { type: "button", "aria-label": "Close tab", className: "hover:bg-primary/10 focus-visible:bg-primary/10 focus-visible:ring-primary absolute right-1 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded p-1 opacity-0 outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-0 group-hover:opacity-100", onMouseDown: (event) => {
+                            event.stopPropagation();
+                            event.preventDefault();
+                        }, onClick: (event) => {
+                            event.stopPropagation();
+                            event.preventDefault();
+                            onClose(tab.id);
+                        }, children: _jsx(XIcon, { className: "h-4 w-4" }) }))] }) }) }));
 }
 /**
  * A menu item for the tab's dropdown menu.
@@ -98,14 +99,14 @@ function TabStripTabs({ className, tabClassName }) {
         }
     };
     const tabIds = useMemo(() => openTabItems.map((t) => t.id), [openTabItems]);
-    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: DRAG_MODIFIERS, autoScroll: true, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabIds, strategy: horizontalListSortingStrategy, children: _jsx("div", { ref: scrollContainerRef, className: cn('flex h-full min-w-0 items-center gap-1 overflow-x-auto overflow-y-hidden pr-1 [&::-webkit-scrollbar]:hidden', className), children: openTabItems.map((tab) => (_jsx(SortableTab, { tab: tab, tabClassName: tabClassName, editingTabId: editingTabId, hideCloseButton: preventCloseLastTab && openTabItems.length === 1, onClose: handleClose, onStartEditing: handleStartEditing, onStopEditing: handleStopEditing, onInlineRename: handleInlineRename, renderTabMenu: renderTabMenu, renderTabLabel: renderTabLabel }, tab.id))) }) }) }));
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: DRAG_MODIFIERS, autoScroll: true, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabIds, strategy: horizontalListSortingStrategy, children: _jsx(ScrollableRow, { className: "h-full min-w-0 flex-1", scrollRef: scrollContainerRef, scrollClassName: cn('flex h-full min-w-0 items-center gap-1 overflow-x-auto overflow-y-visible', 'py-1 pl-1 pr-1 scroll-pl-7 scroll-pr-7 [&::-webkit-scrollbar]:hidden', className), arrowVisibility: "always", arrowClassName: "w-7", arrowIconClassName: "h-4 w-4 opacity-60", children: openTabItems.map((tab) => (_jsx(SortableTab, { tab: tab, tabClassName: tabClassName, editingTabId: editingTabId, hideCloseButton: preventCloseLastTab && openTabItems.length === 1, onClose: handleClose, onStartEditing: handleStartEditing, onStopEditing: handleStopEditing, onInlineRename: handleInlineRename, renderTabMenu: renderTabMenu, renderTabLabel: renderTabLabel }, tab.id))) }) }) }));
 }
 /**
  * Renders the dropdown with search for browsing tabs.
- * By default shows only closed tabs. When searching, shows all matching tabs.
+ * Shows open tabs first and closed tabs second (dimmed). When searching, shows all matching tabs.
  */
-function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true, tooltip, triggerIcon, }) {
-    const { search, setSearch, closedTabs, filteredTabs, closedTabIds, openTabs, onOpenTabsChange, onSelect, renderSearchItemActions, } = useTabStripContext();
+function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true, tooltip, triggerIcon, emptyMessage = 'No tabs', searchEmptyMessage = 'No matching tabs', closedTabsLabel = 'Recently closed', sortSearchItems = 'recent', getTabLastOpenedAt, }) {
+    const { openTabItems, search, setSearch, closedTabs, filteredTabs, closedTabIds, openTabs, preventCloseLastTab, onOpenTabsChange, onSelect, renderSearchItemActions, getLastOpenedAt, handleClose, } = useTabStripContext();
     const [isOpen, setIsOpen] = useState(false);
     const isSearching = search.trim().length > 0;
     const handleOpenChange = (open) => {
@@ -117,7 +118,7 @@ function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true,
     const handleTabClick = (tabId) => {
         if (closedTabIds.has(tabId)) {
             // Opening a closed tab: add to openTabs and select it
-            onOpenTabsChange?.([...openTabs, tabId]);
+            onOpenTabsChange?.([...(openTabs ?? []), tabId]);
             onSelect?.(tabId);
         }
         else {
@@ -126,8 +127,38 @@ function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true,
         }
         setIsOpen(false);
     };
+    const sortByRecency = (tabsToSort) => {
+        if (sortSearchItems !== 'recent') {
+            return tabsToSort;
+        }
+        const withIndex = tabsToSort.map((tab, index) => ({
+            tab,
+            index,
+            ts: getTabLastOpenedAt?.(tab) ?? getLastOpenedAt(tab.id),
+        }));
+        return withIndex
+            .slice()
+            .sort((a, b) => {
+            const aTs = a.ts ?? -1;
+            const bTs = b.ts ?? -1;
+            if (aTs === bTs) {
+                return a.index - b.index;
+            }
+            return bTs - aTs;
+        })
+            .map((item) => item.tab);
+    };
+    const openTabsList = sortByRecency(openTabItems);
+    const closedTabsList = sortByRecency(closedTabs);
+    const hasAnyTabs = openTabsList.length + closedTabsList.length > 0;
+    const filteredOpenTabs = sortByRecency(filteredTabs.filter((tab) => !closedTabIds.has(tab.id)));
+    const filteredClosedTabs = sortByRecency(filteredTabs.filter((tab) => closedTabIds.has(tab.id)));
+    const renderOpenTabActions = (tab) => {
+        const disableClose = preventCloseLastTab && (openTabsList.length ?? 0) <= 1;
+        return (_jsxs(_Fragment, { children: [renderSearchItemActions?.(tab), _jsx(TabStripSearchItemAction, { icon: _jsx(XIcon, { className: "h-3 w-3" }), "aria-label": `Close ${tab.name}`, onClick: disableClose ? undefined : () => handleClose(tab.id), className: cn(disableClose && 'pointer-events-none opacity-40') })] }));
+    };
     const triggerButton = (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", "aria-label": "Browse tabs", className: cn('hover:bg-primary/10 h-full flex-shrink-0', triggerClassName), children: triggerIcon ?? _jsx(ListCollapseIcon, { className: "h-4 w-4" }) }) }));
-    return (_jsxs(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [tooltip ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: triggerButton }), _jsx(TooltipContent, { children: tooltip })] }) })) : (triggerButton), _jsxs(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => event.preventDefault(), className: cn('flex max-h-[400px] max-w-[240px] flex-col', className), children: [_jsxs("div", { className: "flex flex-shrink-0 items-center gap-1 px-2", children: [_jsx(SearchIcon, { className: "text-muted-foreground", size: 14 }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => {
+    return (_jsxs(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [tooltip ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: triggerButton }), _jsx(TooltipContent, { children: tooltip })] }) })) : (triggerButton), _jsxs(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => event.preventDefault(), className: cn('flex max-h-[400px] max-w-[240px] flex-col overflow-x-hidden', className), children: [_jsxs("div", { className: "flex flex-shrink-0 items-center gap-1 px-2", children: [_jsx(SearchIcon, { className: "text-muted-foreground", size: 14 }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => {
                                     if (event.key === 'ArrowDown' || event.key === 'Tab') {
                                         event.preventDefault();
                                         const firstItem = event.currentTarget
@@ -138,15 +169,15 @@ function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true,
                                     else {
                                         event.stopPropagation();
                                     }
-                                }, onKeyUp: (event) => event.stopPropagation(), className: "border-none text-xs shadow-none focus-visible:ring-0", placeholder: "Search...", "aria-label": "Search", autoFocus: autoFocus })] }), _jsx(DropdownMenuSeparator, { className: "flex-shrink-0" }), _jsx("div", { className: "overflow-y-auto", children: isSearching ? (_jsx(DropdownTabItems, { tabs: filteredTabs, emptyMessage: "No matching tabs", onTabClick: handleTabClick, renderActions: renderSearchItemActions })) : (_jsx(DropdownTabItems, { tabs: closedTabs, emptyMessage: "No closed tabs", onTabClick: handleTabClick, renderActions: renderSearchItemActions })) })] })] }));
+                                }, onKeyUp: (event) => event.stopPropagation(), className: "border-none text-xs shadow-none focus-visible:ring-0", placeholder: "Search...", "aria-label": "Search", autoFocus: autoFocus })] }), _jsx(DropdownMenuSeparator, { className: "flex-shrink-0" }), _jsx("div", { className: "overflow-y-auto overflow-x-hidden", children: isSearching ? (filteredTabs.length === 0 ? (_jsx(DropdownTabItems, { tabs: filteredTabs, emptyMessage: searchEmptyMessage, onTabClick: handleTabClick, renderActions: renderSearchItemActions })) : (_jsxs(_Fragment, { children: [_jsx(DropdownTabItems, { tabs: filteredOpenTabs, onTabClick: handleTabClick, renderActions: renderOpenTabActions }), filteredClosedTabs.length > 0 && (_jsxs(_Fragment, { children: [filteredOpenTabs.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-muted-foreground py-1 text-xs font-medium", children: closedTabsLabel }), _jsx(DropdownTabItems, { tabs: filteredClosedTabs, onTabClick: handleTabClick, renderActions: renderSearchItemActions, getItemClassName: () => 'text-muted-foreground' })] }))] }))) : (_jsx(_Fragment, { children: hasAnyTabs ? (_jsxs(_Fragment, { children: [_jsx(DropdownTabItems, { tabs: openTabsList, onTabClick: handleTabClick, renderActions: renderOpenTabActions }), closedTabsList.length > 0 && (_jsxs(_Fragment, { children: [openTabsList.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-muted-foreground py-1 text-xs font-medium", children: closedTabsLabel }), _jsx(DropdownTabItems, { tabs: closedTabsList, onTabClick: handleTabClick, renderActions: renderSearchItemActions, getItemClassName: () => 'text-muted-foreground' })] }))] })) : (_jsx(DropdownTabItems, { tabs: [], emptyMessage: emptyMessage, onTabClick: handleTabClick, renderActions: renderSearchItemActions })) })) })] })] }));
 }
-function DropdownTabItems({ tabs, emptyMessage, onTabClick, renderActions, }) {
+function DropdownTabItems({ tabs, emptyMessage, onTabClick, renderActions, getItemClassName, }) {
     if (tabs.length === 0) {
         if (!emptyMessage)
             return null;
         return (_jsx(DropdownMenuLabel, { className: "items-center justify-center text-xs", children: emptyMessage }));
     }
-    return (_jsx(_Fragment, { children: tabs.map((tab) => (_jsxs(DropdownMenuItem, { onClick: () => onTabClick?.(tab.id), className: "flex h-7 cursor-pointer items-center justify-between truncate", children: [_jsx("span", { className: "xs truncate pl-1", children: tab.name }), renderActions && (_jsx("div", { className: "flex items-center gap-2", children: renderActions(tab) }))] }, tab.id))) }));
+    return (_jsx(_Fragment, { children: tabs.map((tab) => (_jsxs(DropdownMenuItem, { onClick: () => onTabClick?.(tab.id), className: cn('flex h-7 cursor-pointer items-center justify-between truncate', getItemClassName?.(tab)), children: [_jsx("span", { className: "xs truncate pl-1", children: tab.name }), renderActions && (_jsx("div", { className: "flex items-center gap-2", children: renderActions(tab) }))] }, tab.id))) }));
 }
 /**
  * Renders a button to create a new tab.
@@ -188,11 +219,13 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
     const [editingTabId, setEditingTabId] = useState(null);
     const scrollContainerRef = useRef(null);
     const prevSelectedIdRef = useRef(null);
+    const prevOpenTabIdsRef = useRef(new Set());
+    const lastOpenedAtRef = useRef(new Map());
     const openTabsSet = useMemo(() => new Set(openTabs), [openTabs]);
     // Build openTabItems in the order of openTabs (for drag-to-reorder)
     const openTabItems = useMemo(() => {
         const tabsById = new Map(tabs.map((tab) => [tab.id, tab]));
-        return openTabs
+        return (openTabs ?? [])
             .map((id) => tabsById.get(id))
             .filter((tab) => tab !== undefined);
     }, [tabs, openTabs]);
@@ -202,8 +235,23 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
     const filteredTabs = useMemo(() => trimmedSearch
         ? tabs.filter((tab) => tab.name.toLowerCase().includes(trimmedSearch))
         : [], [tabs, trimmedSearch]);
-    // Auto-scroll to selected tab
     useEffect(() => {
+        if (!selectedTabId)
+            return;
+        lastOpenedAtRef.current.set(selectedTabId, Date.now());
+    }, [selectedTabId]);
+    useEffect(() => {
+        const ids = new Set(tabs.map((tab) => tab.id));
+        const next = new Map();
+        for (const [id, ts] of lastOpenedAtRef.current.entries()) {
+            if (ids.has(id)) {
+                next.set(id, ts);
+            }
+        }
+        lastOpenedAtRef.current = next;
+    }, [tabs]);
+    // Auto-scroll to selected tab
+    useLayoutEffect(() => {
         if (!selectedTabId)
             return;
         if (prevSelectedIdRef.current === selectedTabId)
@@ -215,7 +263,8 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
         const isOpen = openTabItems.some((tab) => tab.id === selectedTabId);
         if (!isOpen)
             return;
-        const frameId = requestAnimationFrame(() => {
+        // Use queueMicrotask to defer scroll until after Radix UI updates the DOM
+        queueMicrotask(() => {
             const activeTab = container.querySelector('[data-state="active"]');
             if (!activeTab)
                 return;
@@ -225,10 +274,41 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
                 inline: 'nearest',
             });
         });
-        return () => {
-            cancelAnimationFrame(frameId);
-        };
-    }, [selectedTabId, openTabItems]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedTabId]);
+    // Auto-scroll to newly added tab
+    useLayoutEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        // Find newly added tabs (in openTabs but not in prevOpenTabIdsRef)
+        const newTabIds = (openTabs ?? []).filter((id) => !prevOpenTabIdsRef.current.has(id));
+        // Update ref for next comparison
+        prevOpenTabIdsRef.current = new Set(openTabs);
+        if (newTabIds.length > 0) {
+            const now = Date.now();
+            for (const id of newTabIds) {
+                lastOpenedAtRef.current.set(id, now);
+            }
+        }
+        // Skip scroll on initial render (when ref was empty, all tabs appear "new")
+        if (newTabIds.length === (openTabs?.length ?? 0))
+            return;
+        // If there are new tabs, scroll to the last one added
+        if (newTabIds.length === 0)
+            return;
+        const newTabId = newTabIds[newTabIds.length - 1];
+        queueMicrotask(() => {
+            const newTabElement = container.querySelector(`[data-tab-id="${newTabId}"]`);
+            if (!newTabElement)
+                return;
+            newTabElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        });
+    }, [openTabs]);
     const handleInlineRename = (tabId, newName) => {
         if (!onRename)
             return;
@@ -273,6 +353,7 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
         selectedTabId,
         openTabs,
         preventCloseLastTab,
+        getLastOpenedAt: (tabId) => lastOpenedAtRef.current.get(tabId),
         onOpenTabsChange,
         onSelect,
         onCreate,
@@ -289,7 +370,7 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
     const handleValueChange = (value) => {
         onSelect?.(value);
     };
-    return (_jsx(Tabs, { value: selectedTabId ?? undefined, onValueChange: handleValueChange, className: cn('bg-muted w-full min-w-0', className), children: _jsx(TabStripContext.Provider, { value: contextValue, children: _jsx(TabsList, { className: cn('flex w-full min-w-0 justify-start gap-2 bg-transparent p-0', tabsListClassName), children: children ?? (_jsxs(_Fragment, { children: [_jsx(TabStripSearchDropdown, {}), _jsx(TabStripTabs, {}), _jsx(TabStripNewButton, {})] })) }) }) }));
+    return (_jsx(Tabs, { value: selectedTabId ?? undefined, onValueChange: handleValueChange, activationMode: "manual", className: cn('bg-muted w-full min-w-0', className), children: _jsx(TabStripContext.Provider, { value: contextValue, children: _jsx(TabsList, { className: cn('flex h-9 w-full min-w-0 items-center justify-start gap-2 overflow-visible bg-transparent p-0', tabsListClassName), children: children ?? (_jsxs(_Fragment, { children: [_jsx(TabStripSearchDropdown, {}), _jsx(TabStripTabs, {}), _jsx(TabStripNewButton, {})] })) }) }) }));
 }
 // Attach subcomponents
 export const TabStrip = Object.assign(TabStripRoot, {