@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/browser-tabs.js

@@ -0,0 +1,528 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Popover as Popover$1, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Input } from "./input.js";
+import { ContextMenu as ContextMenu$1, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "./context-menu.js";
+import { Tooltip as Tooltip$1, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { TabsContent } from "./tabs.js";
+import * as React from "react";
+import { Tabs } from "radix-ui";
+import { CopyXIcon, FileIcon, PinIcon, PinOffIcon, PlusIcon, XIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/browser-tabs.tsx
+/**
+* BrowserTabs — persistent, closable document tabs, browser-style.
+*
+* The same Radix Tabs primitive `tabs.tsx` wraps, plus Popover for the "+"
+* menu, Tooltip for truncated names, and Button for the per-tab close
+* action — a different visual/interaction language from Tabs, not a
+* variant of it: Tabs switches between named views of one entity (2-6 fixed
+* tabs); this is for many independent, closable documents/views open at
+* once (an IDE's editor tabs, a browser's own tab strip) — always
+* horizontal, and always the topmost chrome of whatever surface it sits on.
+* Each tab floats as a rounded pill on the strip's own bg-secondary track,
+* flush against its bottom edge — the active tab's bg-card fill then
+* touches the card content's own bg-card directly beneath it with no grey
+* left in between, merging the two Chrome-style, rather than reading as a
+* colored/selected state the way Tabs' own default variant does. Pinned
+* tabs render icon-only — a fixed favicon-size square, falling back to a
+* generic FileIcon when the tab itself has none — same as a real browser's
+* own pinned tabs, and never part of the overflow behavior below. Once
+* unpinned tabs stop fitting, they shrink together down to a floor, then
+* the strip scrolls that pool horizontally past that — the same overflow
+* model a real browser's own tab strip uses, not a "More" menu hiding the
+* rest.
+* An optional "+" pill at the strip's end, outside the scrolling region
+* (`addViews` on BrowserTabsList) opens a popover of product-defined views
+* the user can open as new tabs — a worklist's saved filters, for
+* instance. `addTrigger`/`renderAddContent` swap its trigger or its
+* popover content for something fully custom.
+*/
+var BrowserTabsActiveContext = React.createContext(void 0);
+function BrowserTabs({ className, value, defaultValue, onValueChange, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const activeValue = value ?? uncontrolledValue;
+	return /* @__PURE__ */ jsx(BrowserTabsActiveContext.Provider, {
+		value: activeValue,
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			"data-slot": "browser-tabs",
+			className: cn("flex flex-col", className),
+			value,
+			defaultValue,
+			onValueChange: (next) => {
+				setUncontrolledValue(next);
+				onValueChange?.(next);
+			},
+			activationMode: "manual",
+			...props
+		})
+	});
+}
+var BROWSER_TAB_PILL_CLASS = cn("group/browser-tab relative flex h-7 max-w-52 cursor-pointer items-center gap-1.5 rounded-md border border-transparent px-2.5 text-left text-sm font-medium text-muted-foreground transition-colors outline-none select-none", "hover:bg-muted hover:text-foreground dark:hover:text-foreground", "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset");
+var ADD_VIEWS_SEARCH_THRESHOLD = 6;
+/** Children as a flat list of elements, looking through Fragments so tabs grouped in `<>…</>` still split into pinned/unpinned. */
+function flattenTabChildren(children) {
+	return React.Children.toArray(children).flatMap((child) => {
+		if (!React.isValidElement(child)) return [];
+		if (child.type === React.Fragment) return flattenTabChildren(child.props.children).map((inner) => React.cloneElement(inner, { key: `${child.key}${inner.key}` }));
+		return [child];
+	});
+}
+function BrowserTabsList({ className, children, addViews, onAddView, addLabel = "Open a view in a new tab", addTrigger, renderAddContent, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const hasAdd = Boolean(addViews && addViews.length > 0 || renderAddContent);
+	const items = React.useMemo(() => flattenTabChildren(children), [children]);
+	const pinnedItems = React.useMemo(() => items.filter((item) => item.props.pin), [items]);
+	const restItems = React.useMemo(() => items.filter((item) => !item.props.pin), [items]);
+	const hasDivider = pinnedItems.length > 0 && restItems.length > 0;
+	const restScrollRef = React.useRef(null);
+	const activeValue = React.useContext(BrowserTabsActiveContext);
+	React.useEffect(() => {
+		const container = restScrollRef.current;
+		if (!container || activeValue === void 0) return;
+		container.querySelector(`[data-slot="browser-tab"][data-value="${CSS.escape(activeValue)}"]`)?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [activeValue]);
+	const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+	const [canScrollRight, setCanScrollRight] = React.useState(false);
+	React.useEffect(() => {
+		const container = restScrollRef.current;
+		if (!container) return;
+		function measure() {
+			if (!container) return;
+			setCanScrollLeft(container.scrollLeft > 0);
+			setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth);
+		}
+		measure();
+		container.addEventListener("scroll", measure);
+		const observer = new ResizeObserver(measure);
+		observer.observe(container);
+		return () => {
+			container.removeEventListener("scroll", measure);
+			observer.disconnect();
+		};
+	}, [restItems.length]);
+	const hasOverflow = canScrollLeft || canScrollRight;
+	return /* @__PURE__ */ jsxs(Tabs.List, {
+		"data-slot": "browser-tabs-list",
+		role: "presentation",
+		"aria-orientation": void 0,
+		className: cn("relative flex items-start gap-1 bg-secondary px-(--card-spacing,0.5rem) pt-[calc(var(--card-spacing,0.5rem)*0.5)]", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: "tablist",
+			"aria-orientation": "horizontal",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"data-overflowing": hasOverflow || void 0,
+			className: "group/tablist flex min-h-8 min-w-0 items-start gap-1",
+			children: [
+				pinnedItems,
+				hasDivider && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "h-7 w-px shrink-0 bg-border"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: restScrollRef,
+					role: "presentation",
+					className: cn("-mt-[calc(var(--card-spacing,0.5rem)*0.5)] flex min-w-0 [scrollbar-width:thin] items-start gap-1 overflow-x-auto pt-[calc(var(--card-spacing,0.5rem)*0.5)] focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none focus-visible:ring-inset", pinnedItems.length === 0 && "-ml-(--card-spacing,0.5rem) pl-(--card-spacing,0.5rem)", !hasAdd && "-mr-(--card-spacing,0.5rem) pr-(--card-spacing,0.5rem)", pinnedItems.length > 0 && "-ml-2 pl-2", hasAdd && "-mr-2 pr-2"),
+					style: {
+						boxShadow: [canScrollLeft && "inset 8px 0 8px -8px color-mix(in srgb, var(--color-foreground) 20%, transparent)", canScrollRight && "inset -8px 0 8px -8px color-mix(in srgb, var(--color-foreground) 20%, transparent)"].filter(Boolean).join(", "),
+						...hasOverflow && restItems.length > 0 ? {
+							flexGrow: restItems.length,
+							flexShrink: 1,
+							flexBasis: 0
+						} : void 0
+					},
+					children: restItems
+				})
+			]
+		}), hasAdd && /* @__PURE__ */ jsx(BrowserTabsAdd, {
+			views: addViews ?? [],
+			onAddView,
+			label: addLabel,
+			trigger: addTrigger,
+			renderContent: renderAddContent,
+			className: hasOverflow ? "ml-auto" : void 0
+		})]
+	});
+}
+function BrowserTabsAdd({ views, onAddView, label, trigger, renderContent, className }) {
+	const [open, setOpen] = React.useState(false);
+	const [query, setQuery] = React.useState("");
+	const close = React.useCallback(() => {
+		setOpen(false);
+		setQuery("");
+	}, []);
+	const showSearch = views.length > ADD_VIEWS_SEARCH_THRESHOLD;
+	const visibleViews = React.useMemo(() => {
+		if (!showSearch || !query.trim()) return views;
+		const q = query.trim().toLowerCase();
+		return views.filter((view) => view.label.toLowerCase().includes(q) || view.description?.toLowerCase().includes(q));
+	}, [
+		views,
+		showSearch,
+		query
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("shrink-0", className),
+		children: /* @__PURE__ */ jsxs(Popover$1, {
+			open,
+			onOpenChange: (next) => {
+				setOpen(next);
+				if (!next) setQuery("");
+			},
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: trigger ?? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-slot": "browser-tabs-add",
+					"aria-label": label,
+					className: cn("relative flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors outline-none select-none", "hover:bg-muted hover:text-foreground dark:hover:text-foreground", "focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset", open && "bg-muted text-foreground"),
+					children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4 shrink-0" })
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: renderContent ? void 0 : "w-64 p-1.5",
+				children: renderContent ? renderContent(close) : /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [showSearch && /* @__PURE__ */ jsx(Input, {
+						autoFocus: true,
+						placeholder: "Search...",
+						value: query,
+						onChange: (event) => setQuery(event.target.value)
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-0.5",
+						role: "menu",
+						children: [visibleViews.length === 0 && /* @__PURE__ */ jsx("p", {
+							className: "p-1.5 text-sm text-muted-foreground",
+							children: "No matches"
+						}), visibleViews.map((view) => {
+							const Icon = view.icon;
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								role: "menuitem",
+								disabled: view.disabled,
+								onClick: () => {
+									onAddView?.(view);
+									close();
+								},
+								className: cn(BROWSER_TAB_PILL_CLASS, "w-full max-w-none justify-start", view.description && "h-auto py-1.5", "disabled:pointer-events-none disabled:opacity-50"),
+								children: [
+									Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0" }),
+									/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 flex-1 flex-col",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: view.label
+										}), view.description && /* @__PURE__ */ jsx("span", {
+											className: "truncate text-xs text-muted-foreground",
+											children: view.description
+										})]
+									}),
+									view.pin && /* @__PURE__ */ jsx(PinIcon, { className: "size-3.5 shrink-0 text-muted-foreground" })
+								]
+							}, view.id);
+						})]
+					})]
+				})
+			})]
+		})
+	});
+}
+/** The truncating label — wraps itself in a Tooltip showing the full name, but only once its content actually overflows (`scrollWidth > clientWidth`), and only for the real interactive tab (never the invisible measuring copy). */
+function BrowserTabLabel({ name, interactive, hoverReveal, children }) {
+	const labelRef = React.useRef(null);
+	const [truncated, setTruncated] = React.useState(false);
+	const [tooltipOpen, setTooltipOpen] = React.useState(false);
+	React.useLayoutEffect(() => {
+		if (!interactive) return;
+		const el = labelRef.current;
+		if (!el) return;
+		const check = () => {
+			if (el.clientWidth === 0) {
+				rafId = requestAnimationFrame(check);
+				return;
+			}
+			setTruncated(el.scrollWidth > el.clientWidth);
+		};
+		let rafId = requestAnimationFrame(check);
+		const observer = new ResizeObserver(check);
+		observer.observe(el);
+		return () => {
+			cancelAnimationFrame(rafId);
+			observer.disconnect();
+		};
+	}, [interactive, children]);
+	const label = /* @__PURE__ */ jsxs("span", {
+		className: "relative min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "invisible block truncate",
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			ref: labelRef,
+			className: cn("absolute inset-0 truncate", hoverReveal && "transition-[padding] group-focus-within/browser-tab:pr-5 group-hover/browser-tab:pr-5"),
+			children
+		})]
+	});
+	if (!name) return label;
+	return /* @__PURE__ */ jsxs(Tooltip$1, {
+		open: truncated && tooltipOpen,
+		onOpenChange: setTooltipOpen,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: label
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: name })]
+	});
+}
+/** A pinned tab's entire visible content — icon only, no label, favicon-style
+* like a real browser's own pinned tabs. Falls back to `FileIcon` — this
+* design system's existing entity-agnostic "generic item" icon (Dropzone's
+* own fallback for a file type it doesn't otherwise recognize, as opposed to
+* `FileTextIcon`, which Dropzone reserves specifically for documents) — when
+* the tab has no `icon`, so a pinned tab is never a blank square. A tab can
+* represent any kind of view, not just documents, so the fallback shouldn't
+* imply one. `PinIcon` itself would be the wrong fallback here: this same
+* file already uses it for the "pin" *action* (the context menu's "Pin tab"
+* item, and the `addViews` pin hint), so reusing it as a tab's identity icon
+* would read as "pin this" rather than "generic tab." The name still
+* surfaces on hover/focus via Tooltip (there's no visible text left to
+* convey it), and unconditionally rather than only-when-truncated the way
+* BrowserTabLabel's does — icon-only content is "truncated" by definition. */
+function BrowserPinnedTabIcon({ icon: Icon }) {
+	return /* @__PURE__ */ jsx(Icon ?? FileIcon, { className: "size-3.5 shrink-0" });
+}
+var BrowserTabShell = React.forwardRef(function BrowserTabShell({ value, icon: Icon, pin, disabled, onClose, closeLabel, onPinToggle, onCloseOthers, className, children, interactive, ...rest }, ref) {
+	const activeValue = React.useContext(BrowserTabsActiveContext);
+	const isActive = interactive && value === activeValue;
+	const isPinned = Boolean(pin);
+	const canClose = Boolean(onClose);
+	const showHoverClose = canClose && !isPinned;
+	const canTogglePin = Boolean(onPinToggle) && pin !== "product";
+	const canCloseOthers = Boolean(onCloseOthers);
+	const hasMenu = interactive;
+	const name = typeof children === "string" ? children : void 0;
+	const pill = /* @__PURE__ */ jsxs("div", {
+		ref,
+		...rest,
+		"data-slot": "browser-tab",
+		"data-value": value,
+		"aria-disabled": disabled || void 0,
+		onKeyDown: (event) => {
+			rest.onKeyDown?.(event);
+			if (event.defaultPrevented || !interactive || !canClose) return;
+			if (event.key === "Delete" || event.key === "Backspace") {
+				event.preventDefault();
+				onClose?.();
+			}
+		},
+		"aria-label": isPinned ? name ?? rest["aria-label"] : rest["aria-label"],
+		className: cn(BROWSER_TAB_PILL_CLASS, isPinned ? "size-7 shrink-0 justify-center px-0" : ["min-w-16", "group-data-overflowing/tablist:flex-1"], "data-disabled:pointer-events-none data-disabled:opacity-50", isActive && "h-8 rounded-b-none bg-card pb-1 text-card-foreground hover:bg-card hover:text-card-foreground", isActive && "before:absolute before:-bottom-px before:left-[calc(-0.5rem-1px)] before:size-2 before:bg-[radial-gradient(circle_at_0_0,transparent_0.5rem,var(--color-card)_calc(0.5rem+0.5px))] before:content-[''] after:absolute after:right-[calc(-0.5rem-1px)] after:-bottom-px after:size-2 after:bg-[radial-gradient(circle_at_100%_0,transparent_0.5rem,var(--color-card)_calc(0.5rem+0.5px))] after:content-['']", className),
+		children: [isPinned ? /* @__PURE__ */ jsx(BrowserPinnedTabIcon, { icon: Icon }) : /* @__PURE__ */ jsxs(Fragment, { children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ jsx(BrowserTabLabel, {
+			name,
+			interactive,
+			hoverReveal: showHoverClose,
+			children
+		})] }), showHoverClose && /* @__PURE__ */ jsx(Button, {
+			asChild: true,
+			variant: "secondary",
+			size: "xs",
+			iconOnly: true,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				title: closeLabel ?? `Close ${name ?? value}`,
+				className: "absolute inset-y-0 right-1 my-auto size-5 cursor-pointer opacity-0 transition-opacity group-hover/browser-tab:opacity-100",
+				onClick: interactive ? (event) => {
+					event.stopPropagation();
+					onClose?.();
+				} : void 0,
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+			})
+		})]
+	});
+	const pinnedTooltip = isPinned && name;
+	const trigger = pinnedTooltip ? /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: pill
+	}) : pill;
+	const withTooltip = (node) => pinnedTooltip ? /* @__PURE__ */ jsxs(Tooltip$1, { children: [node, /* @__PURE__ */ jsx(TooltipContent, { children: name })] }) : node;
+	if (!hasMenu) return withTooltip(trigger);
+	return withTooltip(/* @__PURE__ */ jsxs(ContextMenu$1, { children: [/* @__PURE__ */ jsx(ContextMenuTrigger, {
+		asChild: true,
+		children: trigger
+	}), /* @__PURE__ */ jsxs(ContextMenuContent, { children: [
+		/* @__PURE__ */ jsxs(ContextMenuItem, {
+			disabled: !canTogglePin,
+			onSelect: () => onPinToggle?.(),
+			children: [pin ? /* @__PURE__ */ jsx(PinOffIcon, {}) : /* @__PURE__ */ jsx(PinIcon, {}), pin ? "Unpin tab" : "Pin tab"]
+		}),
+		/* @__PURE__ */ jsx(ContextMenuSeparator, {}),
+		/* @__PURE__ */ jsxs(ContextMenuItem, {
+			disabled: !canClose,
+			onSelect: () => onClose?.(),
+			children: [/* @__PURE__ */ jsx(XIcon, {}), "Close"]
+		}),
+		/* @__PURE__ */ jsxs(ContextMenuItem, {
+			disabled: !canCloseOthers,
+			onSelect: () => onCloseOthers?.(),
+			children: [/* @__PURE__ */ jsx(CopyXIcon, {}), "Close other tabs"]
+		})
+	] })] }));
+});
+function BrowserTab(props) {
+	const { value, disabled } = props;
+	const canClose = Boolean(props.onClose) && props.pin !== "product";
+	return /* @__PURE__ */ jsx(Tabs.Trigger, {
+		value,
+		disabled,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(BrowserTabShell, {
+			...props,
+			onClose: canClose ? props.onClose : void 0,
+			interactive: true
+		})
+	});
+}
+/**
+* WHEN TO USE
+* - Many independent, addable/closable documents or views open at once —
+*   an IDE's editor tabs, a browser's own tab strip, a multi-record
+*   workspace where each record opens in its own tab.
+* - Always as the topmost chrome of whatever surface hosts it (a Card,
+*   a page shell) — it's edge-to-edge and expects to sit flush at that
+*   surface's top.
+*
+* NOT WHEN
+* - Switching between a fixed 2-6 named views of *one* entity (an
+*   Overview/History/Notes split) — use Tabs instead; it reads as
+*   neutral navigation, not as separate closable documents.
+* - Vertical tab placement — not supported; always horizontal.
+*
+* KEY RULES
+* - Composition mirrors Tabs: `BrowserTabs` (Root, controlled or
+*   uncontrolled via `value`/`onValueChange`/`defaultValue`) wraps
+*   `BrowserTabsList` (the strip) and one `BrowserTabsContent` per tab
+*   (re-exported directly from Tabs — same primitive, nothing about it
+*   is strip-specific).
+* - `pin`: omit for a normal tab, `"user"` for one the user pinned
+*   (closable — closing is how they unpin it), `"product"` for one the
+*   product configured (never closable, no close button rendered even if
+*   `onClose` is passed). Pinned tabs of either kind render first, in a
+*   section separated from the rest by a divider, and are never subject
+*   to the overflow behavior below.
+* - Pinned tabs render icon-only — a fixed favicon-size square, same as a
+*   real browser's own pinned tabs — falling back to `FileIcon`
+*   when the tab itself has no `icon`, so a pinned tab is never blank.
+*   The full name still surfaces via Tooltip on hover/focus; there's no
+*   hover-revealed close button at that width, so unpinning/closing goes
+*   through the right-click menu or Delete/Backspace on the focused tab.
+* - Every tab has the same three-item right-click menu (ContextMenu):
+*   "Pin tab"/"Unpin tab", "Close", and "Close other tabs" — always
+*   visible, each disabled when the tab wasn't given the matching
+*   handler. `onPinToggle` drives the first (read the tab's current `pin`
+*   to know the direction, then move it into — or, unpinning, to the
+*   front of — the right section in your own list; always disabled on
+*   `pin="product"`), `onClose` the second, `onCloseOthers` the third
+*   (close every other UNPINNED tab yourself and keep this one active —
+*   "close others" never closes a pinned tab of either kind; pinning is
+*   exactly the promise that a tab survives bulk closing).
+*   No visible pin button on the tab; pinning is menu-only, and pinned
+*   tabs are identified by sitting in the pinned section ahead of the
+*   divider.
+* - Each `BrowserTab` needs its own `onClose` to get a close button at
+*   all — omit it for a tab that can't be dismissed. A tab is exactly as
+*   wide as its name at rest (nothing reserved on the right); on hover
+*   the close button appears over the end of the name, which truncates
+*   underneath it, so the tab's width never changes between rest and
+*   hover. That button is pointer-only (a focusable control can't sit
+*   inside a `role="tab"`): keyboard users press Delete or Backspace on
+*   the focused tab, or use the right-click menu's "Close".
+* - Closing a tab is entirely the consumer's responsibility: `onClose`
+*   only reports the intent. Removing it from whatever list backs your
+*   tabs, and deciding which tab becomes active next, is app logic this
+*   component has no way to know on its own.
+* - Overflow is browser-style, not a "More" menu: once unpinned tabs stop
+*   fitting the available width, they shrink together (flex-shrink) down
+*   to `min-w-16` (64px) each; past that floor the strip scrolls that
+*   pool horizontally instead of shrinking further. Pinned tabs are
+*   already fixed-size icon-only squares (see above), so they never
+*   shrink, grow, or join the scrolling region. The active tab scrolls
+*   into view
+*   automatically whenever it changes, so switching tabs never leaves the
+*   newly-active one scrolled out of sight. Only the "+" pill is truly
+*   fixed-size, living outside the shrink pool entirely. A soft inset
+*   shadow fades in on
+*   whichever edge(s) still have more tabs scrolled past them (both at
+*   once, mid-strip) and disappears once there's nothing left that way —
+*   a direction-aware cue, not a static "this can scroll" marker.
+* - A tab's name overflowing `max-w-52` is truncated in the strip but
+*   shown in full in a Tooltip on hover/focus.
+* - `addViews` on `BrowserTabsList` adds a "+" pill that opens a popover of
+*   product-defined views the user can open as new tabs — a worklist's
+*   saved filters, a set of report layouts — `{ id, label, icon?,
+*   description?, disabled?, pin? }` each. Sits immediately after the
+*   last tab at rest; pins to the strip's own right edge once the tabs
+*   overflow into their shrink/scroll region instead, same as a real
+*   browser's "+" button. Each is the same full-width tab pill (icon +
+*   label) it will become as a tab; `description` grows that row to a
+*   second, muted line underneath (a filter's own scope, a last-modified
+*   date). Past `ADD_VIEWS_SEARCH_THRESHOLD` (6) views the popover grows
+*   a search box filtering by label and description. A `pin` hint renders
+*   a small pin icon trailing the label (purely visual — opening it
+*   pinned is still your own `onAddView` handler's job). `onAddView` only
+*   reports the pick: add a tab for that view to your own list and make
+*   it active — or, if that view is already open, just activate the
+*   existing tab instead of opening a duplicate. Icon-only by default;
+*   `addLabel` names it for assistive tech (default "Open a view in a new
+*   tab"). `addTrigger` swaps in a custom trigger node in place of the
+*   default "+" pill (still needs its own `aria-label`). `renderAddContent`
+*   replaces the *entire* popover body — search box, view list, and all —
+*   with something fully custom (a grouped menu, anything) — called with
+*   a `close` function to dismiss the popover
+*   from inside it; `addViews`/`onAddView` don't render alongside it.
+* - Each `BrowserTab` floats as a rounded pill inset from the strip's
+*   `bg-secondary` track. Unlike Tabs' own default variant (a translucent
+*   `bg-primary/10` fill), the active tab here reads as merged into the
+*   card below it, Chrome-style: `bg-card`/`text-card-foreground` (matching
+*   the content surface exactly) plus squared-off bottom corners, sitting
+*   flush against the track's own bottom edge with nothing grey left
+*   between tab and content. Inactive tabs just fill `bg-muted` on hover
+*   and otherwise float clear of the track's edges.
+* - A leading icon uses `icon`, not the `data-icon="inline-start"` slot
+*   convention Button/Tabs use — it needs to sit outside the label's own
+*   truncation, which a plain child node sharing that flex row wouldn't.
+*
+* USAGE
+* <BrowserTabs value={activeId} onValueChange={setActiveId}>
+*   <BrowserTabsList
+*     addViews={worklistViews}   // [{ id: "overdue", label: "Overdue", icon: ClockIcon }, ...]
+*     onAddView={(view) => openViewTab(view)}   // add to openDocs (or activate if already open)
+*   >
+*     <BrowserTab value="home" pin="product">Home</BrowserTab>
+*     {openDocs.map((doc) => (
+*       <BrowserTab
+*         key={doc.id}
+*         value={doc.id}
+*         icon={doc.icon}
+*         pin={doc.pinnedByUser ? "user" : undefined}
+*         onClose={() => closeDoc(doc.id)}
+*       >
+*         {doc.title}
+*       </BrowserTab>
+*     ))}
+*   </BrowserTabsList>
+*   <BrowserTabsContent value="home">...</BrowserTabsContent>
+*   {openDocs.map((doc) => (
+*     <BrowserTabsContent key={doc.id} value={doc.id}>
+*       <DocView doc={doc} />
+*     </BrowserTabsContent>
+*   ))}
+* </BrowserTabs>
+*/
+//#endregion
+export { BrowserTab, BrowserTabs, TabsContent as BrowserTabsContent, BrowserTabsList };
+
+//# sourceMappingURL=browser-tabs.js.map