chore: v2 - ui primitive clean up - fix v2/shared phase 1

src/routes/v2/shared/components/AppMenuActions.tsx

@@ -14,12 +14,7 @@ export function AppMenuActions() {
   const requiresAuthorization = isAuthorizationRequired();
 
   return (
-    <InlineStack
-      gap="2"
-      wrap="nowrap"
-      className="shrink-0"
-      data-testid="app-menu-actions"
-    >
+    <InlineStack gap="2" wrap="nowrap" data-testid="app-menu-actions">
       <EditorVersionToggle />
       <RouterLink to="/settings/backend">
         <TooltipButton tooltip="Settings" {...tracking("v2.header.settings")}>

src/routes/v2/shared/components/ContextPanelEmptyState.tsx

@@ -1,14 +1,17 @@
+import { Box } from "@/components/ui/box";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack } from "@/components/ui/layout";
 import { Text } from "@/components/ui/typography";
 
 export function ContextPanelEmptyState() {
   return (
-    <BlockStack className="h-full items-center justify-center p-4">
-      <Icon name="MousePointerClick" size="lg" tone="weak" />
-      <Text size="sm" tone="subdued" className="text-center mt-2">
-        Select a node to view details
-      </Text>
-    </BlockStack>
+    <Box padding="lg" blockSize="full" inlineSize="full">
+      <BlockStack fill gap="2">
+        <Icon name="MousePointerClick" size="lg" tone="weak" />
+        <Text size="sm" tone="subdued" align="center">
+          Select a node to view details
+        </Text>
+      </BlockStack>
+    </Box>
   );
 }

src/routes/v2/shared/components/InputValidationIndicator.tsx

@@ -1,20 +1,17 @@
 import { observer } from "mobx-react-lite";
 
 import { Icon } from "@/components/ui/icon";
-import { cn } from "@/lib/utils";
 import { useSpec } from "@/routes/v2/shared/providers/SpecContext";
 
 interface InputValidationIndicatorProps {
   entityId: string;
   inputName: string;
-  className?: string;
 }
 
 export const InputValidationIndicator = observer(
   function InputValidationIndicator({
     entityId,
     inputName,
-    className,
   }: InputValidationIndicatorProps) {
     const spec = useSpec();
     const issues = spec?.issuesByEntityId.get(entityId);
@@ -37,11 +34,7 @@ export const InputValidationIndicator = observer(
       <Icon
         name="CircleAlert"
         size="xs"
-        className={cn(
-          "shrink-0 size-3",
-          severity === "error" ? "text-red-400" : "text-amber-400",
-          className,
-        )}
+        tone={severity === "error" ? "critical" : "warning"}
       />
     );
   },

src/routes/v2/shared/components/MenuTriggerButton.tsx

@@ -6,12 +6,7 @@ export const MenuTriggerButton = ({
   children,
   ...props
 }: ComponentProps<typeof Button>) => (
-  <Button
-    variant="ghost"
-    size="sm"
-    className="h-6 px-1.5 text-xs text-white/80 hover:text-white hover:bg-stone-700 rounded-sm font-normal"
-    {...props}
-  >
+  <Button variant="menubar-light" size="xs" {...props}>
     {children}
   </Button>
 );

src/routes/v2/shared/components/MovePipelineDialog.tsx

@@ -2,6 +2,7 @@ import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { useState } from "react";
 
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
+import { Box } from "@/components/ui/box";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -119,7 +120,7 @@ interface FolderTreeProps {
 const FolderTreeSkeleton = () => (
   <BlockStack gap="1">
     {Array.from({ length: 3 }).map((_, i) => (
-      <Skeleton key={i} className="h-8 w-full" />
+      <Skeleton key={i} shape="block" width="full" />
     ))}
   </BlockStack>
 );
@@ -139,30 +140,37 @@ const FolderTree = withSuspenseWrapper(function FolderTreeContent({
   const rootFolders = allFolders.filter((f) => f.parentId === ROOT_FOLDER_ID);
 
   return (
-    <BlockStack
-      gap="1"
-      className="max-h-64 overflow-y-auto rounded-md border border-border p-2"
+    <Box
+      maxBlockSize="md"
+      overflow="scroll-y"
+      border="sm"
+      borderColor="base"
+      borderRadius="base"
+      padding="sm"
+      inlineSize="full"
     >
-      <FolderTreeItem
-        folderId={null}
-        label="Root"
-        isSelected={selectedFolderId === null}
-        isCurrent={currentFolderId === null}
-        onSelect={() => onSelect(null)}
-        depth={0}
-      />
-      {rootFolders.map((folder) => (
-        <FolderTreeBranch
-          key={folder.id}
-          folder={folder}
-          allFolders={allFolders}
-          selectedFolderId={selectedFolderId}
-          currentFolderId={currentFolderId}
-          onSelect={onSelect}
-          depth={1}
+      <BlockStack gap="1">
+        <FolderTreeItem
+          folderId={null}
+          label="Root"
+          isSelected={selectedFolderId === null}
+          isCurrent={currentFolderId === null}
+          onSelect={() => onSelect(null)}
+          depth={0}
         />
-      ))}
-    </BlockStack>
+        {rootFolders.map((folder) => (
+          <FolderTreeBranch
+            key={folder.id}
+            folder={folder}
+            allFolders={allFolders}
+            selectedFolderId={selectedFolderId}
+            currentFolderId={currentFolderId}
+            onSelect={onSelect}
+            depth={1}
+          />
+        ))}
+      </BlockStack>
+    </Box>
   );
 }, FolderTreeSkeleton);
 
@@ -245,10 +253,7 @@ function FolderTreeItem({
         disabled ? "This folder does not support moving pipelines" : undefined
       }
     >
-      <Icon
-        name={depth === 0 ? "House" : "Folder"}
-        className="size-4 shrink-0"
-      />
+      <Icon name={depth === 0 ? "House" : "Folder"} size="md" />
       <InlineStack gap="1" blockAlign="center">
         <Text size="sm">{label}</Text>
         {isCurrent && (

src/routes/v2/shared/nodes/TaskNode/InputAggregatorHandle.tsx

@@ -23,8 +23,8 @@ export function InputAggregatorHandle() {
           className="border-0! h-full! w-full! transform-none! bg-blue-400!"
         />
       </div>
-      <InlineStack blockAlign="center" className="rounded-md relative">
-        <div className="text-xs text-blue-600! rounded-md px-2 py-1 bg-blue-50 border border-blue-200 border-dashed">
+      <InlineStack blockAlign="center">
+        <div className="relative text-xs text-blue-600! rounded-md px-2 py-1 bg-blue-50 border border-blue-200 border-dashed">
           + Add Input
         </div>
       </InlineStack>

src/routes/v2/shared/nodes/TaskNode/TaskNode.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import type { MouseEvent, ReactElement } from "react";
 
 import { useFlagValue } from "@/components/shared/Settings/useFlags";
-import { Card } from "@/components/ui/card";
+import { Surface } from "@/components/ui/patterns/surface";
 import { Text } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import type {
@@ -187,11 +187,11 @@ function NodeEffectWrapper({
 
 function TaskNodeNotFound({ entityId }: { entityId: string }) {
   return (
-    <Card className="min-w-45 max-w-70 rounded-xl border-2 border-red-300 p-4">
+    <Surface level={1} tone="critical">
       <Text size="sm" tone="subdued">
         Task not found: {entityId}
       </Text>
-    </Card>
+    </Surface>
   );
 }
 

src/routes/v2/shared/windows/DockArea.tsx

@@ -1,7 +1,9 @@
 import { observer } from "mobx-react-lite";
 import { useEffect, useRef } from "react";
 
+import { Box } from "@/components/ui/box";
 import { BlockStack } from "@/components/ui/layout";
+import { ScrollRegion } from "@/components/ui/patterns/scroll-region";
 import { VerticalResizeHandle } from "@/components/ui/resize-handle";
 import { cn } from "@/lib/utils";
 import { focusModeStore } from "@/routes/v2/shared/hooks/useFocusMode";
@@ -92,19 +94,24 @@ export const DockArea = observer(function DockArea({ side }: DockAreaProps) {
         className={cn("relative shrink-0 bg-gray-100 flex flex-col")}
         style={{ width: COLLAPSED_DOCK_AREA_WIDTH }}
       >
-        <BlockStack
-          gap="1"
-          align="center"
-          className="relative z-20 min-h-0 flex-1 overflow-y-auto overflow-x-hidden hide-scrollbar py-1 px-0.5"
+        <ScrollRegion
+          axis="y"
+          scrollbar="hidden"
+          position="relative"
+          zIndex="20"
         >
-          {visibleWindowsWithMini.map((windowId) => (
-            <CollapsedDockWindowMini
-              key={windowId}
-              windowId={windowId}
-              dockSide={side}
-            />
-          ))}
-        </BlockStack>
+          <Box paddingBlock="xs" paddingInline="xs">
+            <BlockStack gap="1" align="center">
+              {visibleWindowsWithMini.map((windowId) => (
+                <CollapsedDockWindowMini
+                  key={windowId}
+                  windowId={windowId}
+                  dockSide={side}
+                />
+              ))}
+            </BlockStack>
+          </Box>
+        </ScrollRegion>
         <VerticalResizeHandle
           side={handleSide}
           minWidth={COLLAPSED_DOCK_AREA_WIDTH}

src/routes/v2/shared/windows/components/WindowActions.tsx

@@ -1,28 +1,12 @@
 import { observer } from "mobx-react-lite";
 
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
+import { IconButton } from "@/components/ui/patterns/icon-button";
 import { useWindowContext } from "@/routes/v2/shared/windows/ContentWindowStateContext";
 import { tracking } from "@/utils/tracking";
 
-const lightButtonClassName =
-  "h-5 w-5 text-gray-700 hover:text-gray-900 hover:bg-white/50";
-const darkButtonClassName =
-  "h-5 w-5 text-gray-300 hover:text-white hover:bg-white/10";
-
-const lightCloseButtonClassName =
-  "h-5 w-5 text-gray-500 hover:text-red-500 hover:bg-gray-300";
-const darkCloseButtonClassName =
-  "h-5 w-5 text-gray-300 hover:text-red-400 hover:bg-white/10";
-
 export const WindowActions = observer(function WindowActions() {
   const { model } = useWindowContext();
-  const buttonClassName = model.isDocked
-    ? lightButtonClassName
-    : darkButtonClassName;
-  const closeButtonClassName = model.isDocked
-    ? lightCloseButtonClassName
-    : darkCloseButtonClassName;
+  const chromeVariant = model.isDocked ? "ghost" : "chrome";
 
   return (
     <div
@@ -31,64 +15,54 @@ export const WindowActions = observer(function WindowActions() {
       onClick={(e) => e.stopPropagation()}
     >
       {!model.isActionDisabled("minimize") && model.isDocked && (
-        <Button
-          variant="ghost"
-          size="icon"
-          className={buttonClassName}
+        <IconButton
+          icon={model.isMinimized ? "ChevronDown" : "Minus"}
+          size="xs"
+          variant={chromeVariant}
           onClick={() => model.toggleMinimize()}
           aria-label={model.isMinimized ? "Expand" : "Minimize"}
           {...tracking("v2.shared_window.chrome.minimize", {
             placement: "docked",
           })}
-        >
-          <Icon name={model.isMinimized ? "ChevronDown" : "Minus"} size="xs" />
-        </Button>
+        />
       )}
 
       {!model.isActionDisabled("maximize") && (
-        <Button
-          variant="ghost"
-          size="icon"
-          className={buttonClassName}
+        <IconButton
+          icon={model.isMaximized ? "Minimize2" : "Maximize2"}
+          size="xs"
+          variant={chromeVariant}
           onClick={() => model.toggleMaximize()}
           aria-label={model.isMaximized ? "Restore" : "Maximize"}
           {...tracking("v2.shared_window.chrome.maximize", {
             placement: model.isDocked ? "docked" : "floating",
           })}
-        >
-          <Icon
-            name={model.isMaximized ? "Minimize2" : "Maximize2"}
-            size="xs"
-          />
-        </Button>
+        />
       )}
 
       {!model.isActionDisabled("hide") ? (
-        <Button
-          variant="ghost"
-          size="icon"
-          className={buttonClassName}
+        <IconButton
+          icon="X"
+          size="xs"
+          variant={chromeVariant}
           onClick={() => model.hide()}
           aria-label="Hide"
           {...tracking("v2.shared_window.chrome.hide", {
             placement: model.isDocked ? "docked" : "floating",
           })}
-        >
-          <Icon name="X" size="xs" />
-        </Button>
+        />
       ) : !model.isActionDisabled("close") ? (
-        <Button
-          variant="ghost"
-          size="icon"
-          className={closeButtonClassName}
+        <IconButton
+          icon="X"
+          size="xs"
+          variant={chromeVariant}
+          tone="critical"
           onClick={() => model.close()}
           aria-label="Close"
           {...tracking("v2.shared_window.chrome.close", {
             placement: model.isDocked ? "docked" : "floating",
           })}
-        >
-          <Icon name="X" size="xs" />
-        </Button>
+        />
       ) : null}
     </div>
   );