@nextclaw/ui 0.14.4-beta.0 → 0.15.0

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -11,13 +11,21 @@ import { normalizeDocUrl } from './utils/doc-browser-url.utils';
 import { DocBrowserHomePage } from './doc-browser-home-page';
 import type { DocBrowserCustomTabRenderers } from './doc-browser-renderer.types';
 import {
-  DocBrowserDocsToolbar,
+  DocBrowserAddressToolbar,
   DocBrowserExternalLink,
   DocBrowserFrameContent,
 } from './doc-browser-panel-parts';
 import { DocBrowserTabStrip } from './doc-browser-tab-strip';
+import {
+  createInitialFloatingPanelRect,
+  moveFloatingPanelRect,
+  resizeFloatingPanelRect,
+  type FloatingPanelRect,
+  type FloatingPanelResizeEdge,
+} from './utils/doc-browser-floating-panel.utils';
 import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/resizable-right-panel';
 import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
 import { GripVertical } from 'lucide-react';
 
 type DocBrowserProps = {
@@ -26,26 +34,46 @@ type DocBrowserProps = {
   dockControls?: DocBrowserDockControls;
 };
 
-type FloatingPanelRect = { x: number; y: number; w: number; h: number };
-type FloatingPanelResizeEdge = 'left' | 'right' | 'top' | 'bottom' | 'bottom-right';
 type FloatingPanelInteraction = {
-  kind: 'drag' | 'resize';
-  edge?: FloatingPanelResizeEdge;
   startX: number;
   startY: number;
   startRect: FloatingPanelRect;
-};
+} & (
+  | { kind: 'drag' }
+  | { kind: 'resize'; edge: FloatingPanelResizeEdge }
+);
 
-const FLOATING_PANEL_MARGIN = 40;
-const FLOATING_PANEL_MIN_WIDTH = 360;
-const FLOATING_PANEL_MIN_HEIGHT = 400;
-const DEFAULT_IFRAME_SANDBOX = 'allow-same-origin allow-scripts allow-popups allow-forms';
+const DEFAULT_DOCS_IFRAME_SANDBOX = 'allow-same-origin allow-scripts allow-popups allow-forms';
+
+function resolveContentUrlInput(input: string, currentUrl: string): string {
+  if (input.startsWith('/')) {
+    try {
+      return new URL(input, currentUrl).toString();
+    } catch {
+      return input;
+    }
+  }
+  if (/^[a-z][a-z\d+.-]*:\/\//i.test(input) || input === 'about:blank') {
+    return input;
+  }
+  if (/^(localhost|127\.|0\.0\.0\.0|\[::1\])(?::|\/|$)/i.test(input)) {
+    return `http://${input}`;
+  }
+  return `https://${input}`;
+}
 
 function resolveIframeSandbox(
   customRenderer: DocBrowserCustomTabRenderers[string] | undefined,
   currentTab: DocBrowserTab | undefined,
-): string {
-  return currentTab ? customRenderer?.getIframeSandbox?.(currentTab) ?? DEFAULT_IFRAME_SANDBOX : DEFAULT_IFRAME_SANDBOX;
+): string | undefined {
+  if (!currentTab) {
+    return DEFAULT_DOCS_IFRAME_SANDBOX;
+  }
+  const customSandbox = customRenderer?.getIframeSandbox?.(currentTab);
+  if (customSandbox !== undefined) {
+    return customSandbox;
+  }
+  return currentTab.kind === 'content' ? undefined : DEFAULT_DOCS_IFRAME_SANDBOX;
 }
 
 function useDocBrowserDockAction(
@@ -67,16 +95,62 @@ function useDocBrowserDockAction(
   }, [currentTab, dockControls, dockState]);
 }
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, value));
-}
+function useDocBrowserAddressBar({
+  activeTabId,
+  currentUrl,
+  isAddressToolbarTab,
+  isContentTab,
+  isDocsTab,
+  navigate,
+}: {
+  activeTabId: string;
+  currentUrl: string;
+  isAddressToolbarTab: boolean;
+  isContentTab: boolean;
+  isDocsTab: boolean;
+  navigate: (url: string) => void;
+}) {
+  const addressInputKey = `${activeTabId}:${currentUrl}:${isContentTab ? 'content' : 'docs'}`;
+  const [draftInput, setDraftInput] = useState<{ key: string; value: string } | null>(null);
+  const currentInput = (() => {
+    if (!isAddressToolbarTab) {
+      return '';
+    }
+    if (isContentTab) {
+      return currentUrl;
+    }
+    try {
+      return new URL(currentUrl).pathname;
+    } catch {
+      return currentUrl;
+    }
+  })();
+  const urlInput = draftInput?.key === addressInputKey ? draftInput.value : currentInput;
+  const setUrlInput = useCallback(
+    (value: string) => setDraftInput({ key: addressInputKey, value }),
+    [addressInputKey],
+  );
+
+  const handleUrlSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isAddressToolbarTab) return;
+    const input = urlInput.trim();
+    if (!input) return;
+    if (isDocsTab && input.startsWith('/')) {
+      navigate(`${DOCS_DEFAULT_BASE_URL}${input}`);
+    } else if (isDocsTab && input.startsWith('http')) {
+      navigate(input);
+    } else if (isDocsTab) {
+      navigate(`${DOCS_DEFAULT_BASE_URL}/${input}`);
+    } else {
+      navigate(resolveContentUrlInput(input, currentUrl));
+    }
+  }, [currentUrl, isAddressToolbarTab, isDocsTab, navigate, urlInput]);
 
-function createInitialFloatingPanelRect(): FloatingPanelRect {
   return {
-    x: Math.max(FLOATING_PANEL_MARGIN, window.innerWidth - 520),
-    y: 80,
-    w: 480,
-    h: 600,
+    handleUrlSubmit,
+    setUrlInput,
+    urlInput,
   };
 }
 
@@ -102,7 +176,6 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
     closeTab,
   } = useDocBrowser();
 
-  const [urlInput, setUrlInput] = useState('');
   const [iframeReloadVersion, setIframeReloadVersion] = useState(0);
   const [floatRect, setFloatRect] = useState<FloatingPanelRect>(createInitialFloatingPanelRect);
   const [floatInteraction, setFloatInteraction] = useState<FloatingPanelInteraction | null>(null);
@@ -118,19 +191,16 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
   const canGoForward = activeHistoryIndex < activeHistory.length - 1;
   const customRenderer = currentTab ? customTabRenderers[currentTab.kind] : undefined;
   const dockState = dockControls?.getDockState(currentTab);
-
-  useEffect(() => {
-    if (!isDocsTab) {
-      setUrlInput('');
-      return;
-    }
-    try {
-      const parsed = new URL(currentUrl);
-      setUrlInput(parsed.pathname);
-    } catch {
-      setUrlInput(currentUrl);
-    }
-  }, [currentUrl, activeTabId, isDocsTab]);
+  const isContentTab = currentTab?.kind === 'content';
+  const isAddressToolbarTab = isDocsTab || isContentTab;
+  const { handleUrlSubmit, setUrlInput, urlInput } = useDocBrowserAddressBar({
+    activeTabId,
+    currentUrl,
+    isAddressToolbarTab,
+    isContentTab,
+    isDocsTab,
+    navigate,
+  });
 
   // When currentUrl changes without navVersion bump (goBack/goForward),
   // use postMessage to SPA-navigate inside the iframe instead of remounting.
@@ -221,31 +291,11 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
       const dy = event.clientY - startY;
 
       if (floatInteraction.kind === 'drag') {
-        setFloatRect({
-          ...startRect,
-          x: clamp(startRect.x + dx, FLOATING_PANEL_MARGIN, window.innerWidth - FLOATING_PANEL_MARGIN - startRect.w),
-          y: clamp(startRect.y + dy, FLOATING_PANEL_MARGIN, window.innerHeight - FLOATING_PANEL_MARGIN - startRect.h),
-        });
+        setFloatRect(moveFloatingPanelRect(startRect, dx, dy));
         return;
       }
 
-      if (floatInteraction.edge === 'left' || floatInteraction.edge === 'top') {
-        const isLeftEdge = floatInteraction.edge === 'left';
-        const fixedEdge = isLeftEdge ? startRect.x + startRect.w : startRect.y + startRect.h;
-        const movingEdge = isLeftEdge ? startRect.x + dx : startRect.y + dy;
-        const minSize = isLeftEdge ? FLOATING_PANEL_MIN_WIDTH : FLOATING_PANEL_MIN_HEIGHT;
-        const nextEdge = clamp(movingEdge, FLOATING_PANEL_MARGIN, fixedEdge - minSize);
-        setFloatRect(isLeftEdge ? { ...startRect, x: nextEdge, w: fixedEdge - nextEdge } : { ...startRect, y: nextEdge, h: fixedEdge - nextEdge });
-        return;
-      }
-
-      const right = clamp(startRect.x + startRect.w + dx, startRect.x + FLOATING_PANEL_MIN_WIDTH, window.innerWidth - FLOATING_PANEL_MARGIN);
-      const bottom = clamp(startRect.y + startRect.h + dy, startRect.y + FLOATING_PANEL_MIN_HEIGHT, window.innerHeight - FLOATING_PANEL_MARGIN);
-      setFloatRect({
-        ...startRect,
-        w: floatInteraction.edge === 'bottom' ? startRect.w : right - startRect.x,
-        h: floatInteraction.edge === 'right' ? startRect.h : bottom - startRect.y,
-      });
+      setFloatRect(resizeFloatingPanelRect(floatInteraction.edge, startRect, dx, dy));
     };
 
     const onEnd = () => setFloatInteraction(null);
@@ -260,20 +310,6 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
     };
   }, [floatInteraction]);
 
-  const handleUrlSubmit = useCallback((e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isDocsTab) return;
-    const input = urlInput.trim();
-    if (!input) return;
-    if (input.startsWith('/')) {
-      navigate(`${DOCS_DEFAULT_BASE_URL}${input}`);
-    } else if (input.startsWith('http')) {
-      navigate(input);
-    } else {
-      navigate(`${DOCS_DEFAULT_BASE_URL}/${input}`);
-    }
-  }, [urlInput, navigate, isDocsTab]);
-
   const refreshIframe = useCallback(() => {
     setIframeReloadVersion((version) => version + 1);
   }, []);
@@ -318,10 +354,12 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
         onToggleMode={toggleMode}
       />
 
-      <DocBrowserDocsToolbar
-        isDocsTab={isDocsTab}
+      <DocBrowserAddressToolbar
+        isVisible={isAddressToolbarTab}
+        onRefresh={refreshIframe}
         onSubmit={handleUrlSubmit}
         onUrlInputChange={setUrlInput}
+        placeholder={isDocsTab ? t('docBrowserSearchPlaceholder') : t('docBrowserAddressPlaceholder')}
         urlInput={urlInput}
       />
 
@@ -338,7 +376,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
         isResizing={floatInteraction?.kind === 'resize'}
       />
 
-      <DocBrowserExternalLink currentUrl={currentUrl} isDocsTab={isDocsTab} />
+      <DocBrowserExternalLink currentUrl={currentUrl} isVisible={isDocsTab || isContentTab} />
     </>
   );
 
@@ -361,7 +399,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
       className={cn(
         'relative flex flex-col overflow-hidden bg-card text-card-foreground',
         isFullscreen
-          ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
+          ? 'fixed inset-0 z-[var(--z-floating-panel)] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
           : 'rounded-2xl border border-border shadow-2xl',
       )}
       style={
@@ -373,7 +411,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
               top: floatRect.y,
               width: floatRect.w,
               height: floatRect.h,
-              zIndex: 9999,
+              zIndex: 'var(--z-floating-panel)',
             }
       }
     >
@@ -397,6 +435,21 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
             data-testid="doc-browser-resize-bottom"
             onPointerDown={startFloatResize('bottom')}
           />
+          <div
+            className="absolute top-0 left-0 z-30 h-4 w-4 cursor-nw-resize hover:bg-primary/10 transition-colors"
+            data-testid="doc-browser-resize-top-left"
+            onPointerDown={startFloatResize('top-left')}
+          />
+          <div
+            className="absolute top-0 right-0 z-30 h-4 w-4 cursor-ne-resize hover:bg-primary/10 transition-colors"
+            data-testid="doc-browser-resize-top-right"
+            onPointerDown={startFloatResize('top-right')}
+          />
+          <div
+            className="absolute bottom-0 left-0 z-30 h-4 w-4 cursor-sw-resize hover:bg-primary/10 transition-colors"
+            data-testid="doc-browser-resize-bottom-left"
+            onPointerDown={startFloatResize('bottom-left')}
+          />
           <div
             className="absolute bottom-0 right-0 z-30 flex h-4 w-4 cursor-se-resize items-center justify-center text-muted-foreground/45 transition-colors hover:text-muted-foreground"
             data-testid="doc-browser-resize-bottom-right"

package/src/shared/components/doc-browser/managers/doc-browser.manager.ts

@@ -27,6 +27,8 @@ import {
 
 const defaultDocBrowserRouteResolver = new DefaultDocBrowserRouteResolver();
 
+type RightPanelOpenedHandler = () => void;
+
 function updateTab(
   state: DocBrowserState,
   tabId: string,
@@ -258,7 +260,10 @@ function openDocBrowserState(
 }
 
 export class DocBrowserManager {
-  constructor(private readonly routeResolver: DocBrowserRouteResolver = defaultDocBrowserRouteResolver) {}
+  constructor(
+    private readonly routeResolver: DocBrowserRouteResolver = defaultDocBrowserRouteResolver,
+    private readonly onRightPanelOpened?: RightPanelOpenedHandler,
+  ) {}
 
   private readonly setSnapshot = (next: DocBrowserStateUpdate): void => {
     useDocBrowserStore.getState().setSnapshot(next);
@@ -266,6 +271,7 @@ export class DocBrowserManager {
 
   readonly open = (url?: string, options?: DocBrowserOpenOptions): void => {
     this.setSnapshot((prev) => openDocBrowserState(this.routeResolver, prev, url, options));
+    this.onRightPanelOpened?.();
   };
 
   readonly openTarget = (target: DocBrowserRouteTarget, options?: DocBrowserOpenOptions): void => {
@@ -275,6 +281,7 @@ export class DocBrowserManager {
       kind: options?.kind ?? target.kind,
       title: options?.title ?? target.title,
     }));
+    this.onRightPanelOpened?.();
   };
 
   readonly openNewTab = (): void => {
@@ -287,6 +294,7 @@ export class DocBrowserManager {
 
   readonly toggleMode = (): void => {
     this.setSnapshot((prev) => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
+    this.onRightPanelOpened?.();
   };
 
   readonly navigate = (url: string): void => {

package/src/shared/components/doc-browser/utils/doc-browser-floating-panel.utils.ts

@@ -0,0 +1,83 @@
+export type FloatingPanelRect = { x: number; y: number; w: number; h: number };
+export type FloatingPanelResizeEdge =
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+const FLOATING_PANEL_MARGIN = 40;
+const FLOATING_PANEL_MIN_WIDTH = 360;
+const FLOATING_PANEL_MIN_HEIGHT = 400;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function resizeEdgeIncludes(
+  edge: FloatingPanelResizeEdge,
+  side: 'left' | 'right' | 'top' | 'bottom',
+): boolean {
+  return edge.split('-').includes(side);
+}
+
+export function createInitialFloatingPanelRect(): FloatingPanelRect {
+  return {
+    x: Math.max(FLOATING_PANEL_MARGIN, window.innerWidth - 520),
+    y: 80,
+    w: 480,
+    h: 600,
+  };
+}
+
+export function moveFloatingPanelRect(
+  startRect: FloatingPanelRect,
+  dx: number,
+  dy: number,
+): FloatingPanelRect {
+  return {
+    ...startRect,
+    x: clamp(
+      startRect.x + dx,
+      FLOATING_PANEL_MARGIN,
+      window.innerWidth - FLOATING_PANEL_MARGIN - startRect.w,
+    ),
+    y: clamp(
+      startRect.y + dy,
+      FLOATING_PANEL_MARGIN,
+      window.innerHeight - FLOATING_PANEL_MARGIN - startRect.h,
+    ),
+  };
+}
+
+export function resizeFloatingPanelRect(
+  edge: FloatingPanelResizeEdge,
+  startRect: FloatingPanelRect,
+  dx: number,
+  dy: number,
+): FloatingPanelRect {
+  const startRight = startRect.x + startRect.w;
+  const startBottom = startRect.y + startRect.h;
+  const nextLeft = resizeEdgeIncludes(edge, 'left')
+    ? clamp(startRect.x + dx, FLOATING_PANEL_MARGIN, startRight - FLOATING_PANEL_MIN_WIDTH)
+    : startRect.x;
+  const nextRight = resizeEdgeIncludes(edge, 'right')
+    ? clamp(startRight + dx, nextLeft + FLOATING_PANEL_MIN_WIDTH, window.innerWidth - FLOATING_PANEL_MARGIN)
+    : startRight;
+  const nextTop = resizeEdgeIncludes(edge, 'top')
+    ? clamp(startRect.y + dy, FLOATING_PANEL_MARGIN, startBottom - FLOATING_PANEL_MIN_HEIGHT)
+    : startRect.y;
+  const nextBottom = resizeEdgeIncludes(edge, 'bottom')
+    ? clamp(startBottom + dy, nextTop + FLOATING_PANEL_MIN_HEIGHT, window.innerHeight - FLOATING_PANEL_MARGIN)
+    : startBottom;
+
+  return {
+    x: nextLeft,
+    y: nextTop,
+    w: nextRight - nextLeft,
+    h: nextBottom - nextTop,
+  };
+}

package/src/shared/components/ui/__tests__/dialog.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/shared/components/ui/dialog';
+
+describe('Dialog', () => {
+  it('renders modal layers above floating panels', () => {
+    render(
+      <Dialog open>
+        <DialogContent>
+          <DialogTitle>Authorize action</DialogTitle>
+        </DialogContent>
+      </Dialog>,
+    );
+
+    const dialog = screen.getByRole('dialog');
+    const overlay = Array.from(document.body.querySelectorAll('[data-state="open"]'))
+      .find((element) => element instanceof HTMLElement && element.className.includes('--z-modal-backdrop'));
+
+    expect(dialog.className).toContain('z-[var(--z-modal,10050)]');
+    expect(overlay).toBeInstanceOf(HTMLElement);
+    expect((overlay as HTMLElement).className).toContain('z-[var(--z-modal-backdrop,10000)]');
+  });
+});

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -14,10 +14,22 @@ type IconActionButtonProps = Omit<
   icon: React.ReactNode;
   label: string;
   tooltip?: string | false | null;
+  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
 };
 
 const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonProps>(
-  ({ className, disabled = false, icon, label, tooltip, ...buttonProps }, ref) => {
+  (
+    {
+      className,
+      disabled = false,
+      icon,
+      label,
+      tooltip,
+      tooltipSide = 'bottom',
+      ...buttonProps
+    },
+    ref
+  ) => {
     const button = (
       <button
         {...buttonProps}
@@ -42,7 +54,7 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
           <TooltipTrigger asChild>
             {disabled ? <span className="inline-flex">{button}</span> : button}
           </TooltipTrigger>
-          <TooltipContent side="bottom" className="text-xs">{content}</TooltipContent>
+          <TooltipContent side={tooltipSide} className="text-xs">{content}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
     );

package/src/shared/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[var(--z-modal-backdrop,10000)] bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-xl duration-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-[var(--z-modal,10050)] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-xl duration-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}

package/src/shared/components/ui/popover.tsx

@@ -28,7 +28,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       collisionPadding={collisionPadding}
       className={cn(
-        'z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-[var(--z-popover,10100)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       style={{ maxHeight: POPOVER_CONTENT_MAX_HEIGHT, ...style }}

package/src/shared/components/ui/select.tsx

@@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                "relative z-[var(--z-popover,50)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "relative z-[var(--z-popover,10100)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className

package/src/shared/components/ui/switch.tsx

@@ -14,10 +14,11 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         type="button"
         role="switch"
         aria-checked={checked}
+        data-state={checked ? 'checked' : 'unchecked'}
         ref={ref}
         className={cn(
-          'peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
-          checked ? 'bg-primary' : 'bg-muted hover:bg-accent',
+          'switch-track peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+          checked ? 'border-primary/70 bg-primary' : 'border-border/60 bg-muted hover:bg-accent',
           className
         )}
         onClick={() => onCheckedChange?.(!checked)}
@@ -26,7 +27,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         <span
           data-state={checked ? 'checked' : 'unchecked'}
           className={cn(
-            'pointer-events-none block h-5 w-5 rounded-full bg-card shadow-md ring-0 transition-transform duration-fast',
+            'switch-thumb pointer-events-none block h-5 w-5 rounded-full bg-card shadow-md ring-1 ring-border/50 transition-transform duration-fast',
             checked ? 'translate-x-5' : 'translate-x-0',
             thumbClassName
           )}

package/src/shared/components/ui/tab-strip/__tests__/compact-tab-strip.test.tsx

@@ -72,4 +72,58 @@ describe("CompactTabStrip", () => {
 
     expect(onSelect).toHaveBeenCalledTimes(1);
   });
+
+  it("selects a tab when clicking the tab item outside the label button", () => {
+    const onSelect = vi.fn();
+
+    render(
+      <CompactTabStrip
+        tabs={[
+          {
+            key: "preview-tab",
+            label: "Preview",
+            active: false,
+            onSelect,
+          },
+        ]}
+        actions={[]}
+      />,
+    );
+
+    const labelButton = screen.getByRole("button", { name: "Preview" });
+    const tabItem = labelButton.parentElement;
+
+    expect(tabItem).not.toBeNull();
+    fireEvent.click(tabItem!);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not select a tab when clicking its close button", () => {
+    const onClose = vi.fn();
+    const onSelect = vi.fn();
+
+    render(
+      <CompactTabStrip
+        tabs={[
+          {
+            key: "preview-tab",
+            label: "Preview",
+            active: false,
+            closeLabel: "Close preview",
+            closePlacement: "leading-hover",
+            leadingIcon: <span />,
+            onClose,
+            onSelect,
+          },
+        ]}
+        actions={[]}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Close preview" }));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
 });

package/src/shared/components/ui/tab-strip/compact-tab-strip.tsx

@@ -50,10 +50,7 @@ type CompactTabStripProps = {
   onScrollPointerDown?: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
 
-function closeCompactTab(
-  event: React.MouseEvent<HTMLButtonElement>,
-  onClose: () => void,
-) {
+function closeCompactTab(event: React.MouseEvent<HTMLButtonElement>, onClose: () => void) {
   event.stopPropagation();
   onClose();
 }
@@ -123,9 +120,11 @@ function CompactTabItem({
   return (
     <div
       ref={itemRef}
+      data-compact-tab-item=""
+      onClick={(event) => event.target === event.currentTarget && tab.onSelect()}
       className={cn(
         tabBaseClassName ??
-          "group flex max-w-[180px] min-w-0 items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
+          "group flex max-w-[180px] min-w-0 cursor-pointer items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
         tab.active
           ? (activeTabClassName ?? "border-b-primary bg-white text-gray-900")
           : (inactiveTabClassName ??

package/src/shared/components/ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                'z-[var(--z-tooltip)] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                'z-[var(--z-tooltip,10150)] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                 className
             )}
             {...props}