@open-mercato/ui 0.6.6-develop.6542.1.fee3e68aa6 → 0.6.6-develop.6551.1.1511bfa890

package/dist/primitives/tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { createContext, useContext } from 'react'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from './button'\n\n/**\n * Tab navigation primitive \u2014 backward compatible with the original\n * pill-style API. Phase B.5 rewrite adds the Figma underline variant\n * (`Tab Menu Horizontal [1.1]` in `553:734`), the vertical orientation\n * (`Tab Menu Vertical [1.1]`), and per-tab `leading` icon + `count`\n * badge slots.\n *\n * Backward compatibility (6 import sites):\n *   integrations/[id]/page.tsx\n *   scheduler JobLogsModal.tsx\n *   checkout LinkTemplateForm.tsx\n *   search VectorSearchSection.tsx + FulltextSearchSection.tsx\n *   ai-assistant AiPlaygroundPageClient.tsx\n *\n * All six call `<Tabs>` + `<TabsList>` + `<TabsTrigger>` +\n * `<TabsContent>` with the default pill look. The default `variant`\n * stays `pill` so they keep rendering verbatim.\n */\n\ntype TabsContextValue = {\n  value: string\n  onValueChange: (value: string) => void\n  variant: 'pill' | 'underline'\n  orientation: 'horizontal' | 'vertical'\n}\n\nexport const TabsContext = createContext<TabsContextValue | undefined>(undefined)\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs provider')\n  }\n  return context\n}\n\nexport type TabsVariant = 'pill' | 'underline'\nexport type TabsOrientation = 'horizontal' | 'vertical'\n\nexport type TabsProps = {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Visual style. `pill` is the original look (bg-muted container,\n   * bg-background selected pill). `underline` matches Figma `Tab Menu\n   * Horizontal [1.1]` \u2014 flat strip with a thin border-bottom and an\n   * accent-indigo underline on the active tab. */\n  variant?: TabsVariant\n  /** Tab strip orientation. `horizontal` lays the strip in a row;\n   * `vertical` lays it in a column. The default `pill` variant\n   * supports both; the underline variant supports only `horizontal`\n   * (per Figma \u2014 vertical underline is not a documented pattern). */\n  orientation?: TabsOrientation\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Tabs({\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  variant = 'pill',\n  orientation = 'horizontal',\n  children,\n  className,\n}: TabsProps) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '')\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue)\n      }\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange],\n  )\n\n  const contextValue = React.useMemo<TabsContextValue>(\n    () => ({ value, onValueChange: handleValueChange, variant, orientation }),\n    [value, handleValueChange, variant, orientation],\n  )\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={orientation}\n        className={cn(orientation === 'vertical' ? 'flex gap-4' : '', className)}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n}\n\nexport type TabsListProps = {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function TabsList({ children, className }: TabsListProps) {\n  const { variant, orientation } = useTabsContext()\n\n  const baseClasses =\n    variant === 'underline'\n      ? // Underline strip \u2014 flat, full-width border-bottom for the rail,\n        // selected trigger gets its own border-b-2 accent below.\n        orientation === 'vertical'\n          ? 'inline-flex flex-col items-stretch gap-1 border-r border-input pr-3'\n          : 'inline-flex h-10 items-center justify-start gap-4 border-b border-input text-muted-foreground'\n      : // Pill strip (original) \u2014 rounded container, bg-muted shell.\n        orientation === 'vertical'\n        ? 'inline-flex flex-col items-stretch gap-1 rounded-lg bg-muted p-1 text-muted-foreground'\n        : 'inline-flex h-9 items-center justify-start gap-1 rounded-lg bg-muted p-1 text-muted-foreground'\n\n  return (\n    <div\n      data-slot=\"tabs-list\"\n      className={cn(baseClasses, className)}\n      role=\"tablist\"\n      aria-orientation={orientation}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TabsTriggerProps = {\n  value: string\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  /** Optional leading icon slot \u2014 typically a lucide-react icon at\n   * `size-4`. Per Figma `Tab Menu Horizontal Items [1.1]`. */\n  leading?: React.ReactNode\n  /** Optional trailing count badge \u2014 typically a numeric count or\n   * \"New\". Rendered as a muted pill that highlights to indigo when\n   * the tab is selected. */\n  count?: React.ReactNode\n}\n\nexport function TabsTrigger({\n  value,\n  children,\n  className,\n  disabled,\n  leading,\n  count,\n}: TabsTriggerProps) {\n  const { value: selectedValue, onValueChange, variant, orientation } = useTabsContext()\n  const isSelected = selectedValue === value\n\n  if (variant === 'underline') {\n    return (\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={isSelected}\n        disabled={disabled}\n        onClick={() => onValueChange(value)}\n        data-slot=\"tabs-trigger\"\n        data-state={isSelected ? 'active' : 'inactive'}\n        data-variant=\"underline\"\n        className={cn(\n          // Underline trigger \u2014 flat, bottom-border accent when active.\n          // Negative margin-bottom -1px so the active accent sits on\n          // top of the rail's border-bottom (rather than below it).\n          orientation === 'vertical'\n            ? 'group relative inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground outline-none transition-colors'\n            : 'group relative -mb-px inline-flex items-center gap-2 border-b-2 border-transparent px-1 py-2 text-sm font-medium text-muted-foreground outline-none transition-colors',\n          'hover:text-foreground focus-visible:shadow-focus',\n          'disabled:pointer-events-none disabled:opacity-50',\n          isSelected\n            ? orientation === 'vertical'\n              ? 'bg-muted/40 text-foreground'\n              : 'border-accent-indigo font-semibold text-foreground'\n            : '',\n          className,\n        )}\n      >\n        {leading ? (\n          <span\n            data-slot=\"tabs-trigger-leading\"\n            aria-hidden=\"true\"\n            className={cn(\n              'inline-flex shrink-0 items-center justify-center',\n              isSelected ? 'text-accent-indigo' : 'text-muted-foreground',\n            )}\n          >\n            {leading}\n          </span>\n        ) : null}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {count !== undefined ? (\n          <span\n            data-slot=\"tabs-trigger-count\"\n            className={cn(\n              'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium',\n              isSelected\n                ? 'bg-accent-indigo/10 text-accent-indigo'\n                : 'bg-muted text-muted-foreground',\n            )}\n          >\n            {count}\n          </span>\n        ) : null}\n      </button>\n    )\n  }\n\n  // Pill variant (original look) \u2014 `<Button variant=\"ghost\" size=\"sm\">`\n  // with state classes. Backward compatible.\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      role=\"tab\"\n      aria-selected={isSelected}\n      disabled={disabled}\n      onClick={() => onValueChange(value)}\n      data-slot=\"tabs-trigger\"\n      data-state={isSelected ? 'active' : 'inactive'}\n      data-variant=\"pill\"\n      className={cn(\n        'gap-2',\n        isSelected\n          ? 'bg-background text-foreground shadow'\n          : 'hover:bg-background/80 hover:text-foreground',\n        className,\n      )}\n    >\n      {leading ? (\n        <span\n          data-slot=\"tabs-trigger-leading\"\n          aria-hidden=\"true\"\n          className=\"inline-flex shrink-0 items-center justify-center\"\n        >\n          {leading}\n        </span>\n      ) : null}\n      <span>{children}</span>\n      {count !== undefined ? (\n        <span\n          data-slot=\"tabs-trigger-count\"\n          className={cn(\n            'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium',\n            isSelected\n              ? 'bg-accent-indigo/10 text-accent-indigo'\n              : 'bg-background/60 text-muted-foreground',\n          )}\n        >\n          {count}\n        </span>\n      ) : null}\n    </Button>\n  )\n}\n\nexport type TabsContentProps = {\n  value: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function TabsContent({ value, children, className }: TabsContentProps) {\n  const { value: selectedValue, orientation } = useTabsContext()\n\n  if (selectedValue !== value) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      className={cn(\n        orientation === 'vertical' ? 'flex-1 min-w-0' : 'mt-2',\n        'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { createContext, useContext } from 'react'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Button } from './button'\n\n/**\n * Tab navigation primitive \u2014 backward compatible with the original\n * pill-style API. Phase B.5 rewrite adds the Figma underline variant\n * (`Tab Menu Horizontal [1.1]` in `553:734`), the vertical orientation\n * (`Tab Menu Vertical [1.1]`), and per-tab `leading` icon + `count`\n * badge slots.\n *\n * Backward compatibility (6 import sites):\n *   integrations/[id]/page.tsx\n *   scheduler JobLogsModal.tsx\n *   checkout LinkTemplateForm.tsx\n *   search VectorSearchSection.tsx + FulltextSearchSection.tsx\n *   ai-assistant AiPlaygroundPageClient.tsx\n *\n * All six call `<Tabs>` + `<TabsList>` + `<TabsTrigger>` +\n * `<TabsContent>` with the default pill look. The default `variant`\n * stays `pill` so they keep rendering verbatim.\n */\n\ntype TabsContextValue = {\n  value: string\n  onValueChange: (value: string) => void\n  variant: 'pill' | 'underline'\n  orientation: 'horizontal' | 'vertical'\n}\n\nexport const TabsContext = createContext<TabsContextValue | undefined>(undefined)\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('Tabs components must be used within a Tabs provider')\n  }\n  return context\n}\n\nexport type TabsVariant = 'pill' | 'underline'\nexport type TabsOrientation = 'horizontal' | 'vertical'\n\nexport type TabsProps = {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Visual style. `pill` is the original look (bg-muted container,\n   * bg-background selected pill). `underline` matches Figma `Tab Menu\n   * Horizontal [1.1]` \u2014 flat strip with a thin border-bottom and an\n   * accent-indigo underline on the active tab. */\n  variant?: TabsVariant\n  /** Tab strip orientation. `horizontal` lays the strip in a row;\n   * `vertical` lays it in a column. The default `pill` variant\n   * supports both; the underline variant supports only `horizontal`\n   * (per Figma \u2014 vertical underline is not a documented pattern). */\n  orientation?: TabsOrientation\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Tabs({\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  variant = 'pill',\n  orientation = 'horizontal',\n  children,\n  className,\n}: TabsProps) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '')\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue)\n      }\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange],\n  )\n\n  const contextValue = React.useMemo<TabsContextValue>(\n    () => ({ value, onValueChange: handleValueChange, variant, orientation }),\n    [value, handleValueChange, variant, orientation],\n  )\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={orientation}\n        className={cn(orientation === 'vertical' ? 'flex gap-4' : '', className)}\n      >\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n}\n\nexport type TabsListProps = {\n  children: React.ReactNode\n  className?: string\n  /** Accessible name for the `role=\"tablist\"` element. Set it when the\n   * surrounding context does not already label the strip (e.g. a bare\n   * detail-page section switcher). */\n  'aria-label'?: string\n}\n\nexport function TabsList({ children, className, 'aria-label': ariaLabel }: TabsListProps) {\n  const { variant, orientation } = useTabsContext()\n\n  const baseClasses =\n    variant === 'underline'\n      ? // Underline strip \u2014 flat, full-width border-bottom for the rail,\n        // selected trigger gets its own border-b-2 accent below.\n        orientation === 'vertical'\n          ? 'inline-flex flex-col items-stretch gap-1 border-r border-input pr-3'\n          : 'inline-flex h-10 items-center justify-start gap-4 border-b border-input text-muted-foreground'\n      : // Pill strip (original) \u2014 rounded container, bg-muted shell.\n        orientation === 'vertical'\n        ? 'inline-flex flex-col items-stretch gap-1 rounded-lg bg-muted p-1 text-muted-foreground'\n        : 'inline-flex h-9 items-center justify-start gap-1 rounded-lg bg-muted p-1 text-muted-foreground'\n\n  return (\n    <div\n      data-slot=\"tabs-list\"\n      className={cn(baseClasses, className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      aria-orientation={orientation}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TabsTriggerProps = {\n  value: string\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  /** Optional leading icon slot \u2014 typically a lucide-react icon at\n   * `size-4`. Per Figma `Tab Menu Horizontal Items [1.1]`. */\n  leading?: React.ReactNode\n  /** Optional trailing count badge \u2014 typically a numeric count or\n   * \"New\". Rendered as a muted pill that highlights to indigo when\n   * the tab is selected. */\n  count?: React.ReactNode\n}\n\nexport function TabsTrigger({\n  value,\n  children,\n  className,\n  disabled,\n  leading,\n  count,\n}: TabsTriggerProps) {\n  const { value: selectedValue, onValueChange, variant, orientation } = useTabsContext()\n  const isSelected = selectedValue === value\n\n  if (variant === 'underline') {\n    return (\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={isSelected}\n        disabled={disabled}\n        onClick={() => onValueChange(value)}\n        data-slot=\"tabs-trigger\"\n        data-state={isSelected ? 'active' : 'inactive'}\n        data-variant=\"underline\"\n        className={cn(\n          // Underline trigger \u2014 flat, bottom-border accent when active.\n          // Negative margin-bottom -1px so the active accent sits on\n          // top of the rail's border-bottom (rather than below it).\n          orientation === 'vertical'\n            ? 'group relative inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground outline-none transition-colors'\n            : 'group relative -mb-px inline-flex items-center gap-2 border-b-2 border-transparent px-1 py-2 text-sm font-medium text-muted-foreground outline-none transition-colors',\n          'hover:text-foreground focus-visible:shadow-focus',\n          'disabled:pointer-events-none disabled:opacity-50',\n          isSelected\n            ? orientation === 'vertical'\n              ? 'bg-muted/40 text-foreground'\n              : 'border-accent-indigo font-semibold text-foreground'\n            : '',\n          className,\n        )}\n      >\n        {leading ? (\n          <span\n            data-slot=\"tabs-trigger-leading\"\n            aria-hidden=\"true\"\n            className={cn(\n              'inline-flex shrink-0 items-center justify-center',\n              isSelected ? 'text-accent-indigo' : 'text-muted-foreground',\n            )}\n          >\n            {leading}\n          </span>\n        ) : null}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {count !== undefined ? (\n          <span\n            data-slot=\"tabs-trigger-count\"\n            className={cn(\n              'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium',\n              isSelected\n                ? 'bg-accent-indigo/10 text-accent-indigo'\n                : 'bg-muted text-muted-foreground',\n            )}\n          >\n            {count}\n          </span>\n        ) : null}\n      </button>\n    )\n  }\n\n  // Pill variant (original look) \u2014 `<Button variant=\"ghost\" size=\"sm\">`\n  // with state classes. Backward compatible.\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      role=\"tab\"\n      aria-selected={isSelected}\n      disabled={disabled}\n      onClick={() => onValueChange(value)}\n      data-slot=\"tabs-trigger\"\n      data-state={isSelected ? 'active' : 'inactive'}\n      data-variant=\"pill\"\n      className={cn(\n        'gap-2',\n        isSelected\n          ? 'bg-background text-foreground shadow'\n          : 'hover:bg-background/80 hover:text-foreground',\n        className,\n      )}\n    >\n      {leading ? (\n        <span\n          data-slot=\"tabs-trigger-leading\"\n          aria-hidden=\"true\"\n          className=\"inline-flex shrink-0 items-center justify-center\"\n        >\n          {leading}\n        </span>\n      ) : null}\n      <span>{children}</span>\n      {count !== undefined ? (\n        <span\n          data-slot=\"tabs-trigger-count\"\n          className={cn(\n            'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium',\n            isSelected\n              ? 'bg-accent-indigo/10 text-accent-indigo'\n              : 'bg-background/60 text-muted-foreground',\n          )}\n        >\n          {count}\n        </span>\n      ) : null}\n    </Button>\n  )\n}\n\nexport type TabsContentProps = {\n  value: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function TabsContent({ value, children, className }: TabsContentProps) {\n  const { value: selectedValue, orientation } = useTabsContext()\n\n  if (selectedValue !== value) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      className={cn(\n        orientation === 'vertical' ? 'flex-1 min-w-0' : 'mt-2',\n        'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.6-develop.6542.1.fee3e68aa6",
+  "version": "0.6.6-develop.6551.1.1511bfa890",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6542.1.fee3e68aa6",
+    "@open-mercato/shared": "0.6.6-develop.6551.1.1511bfa890",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6542.1.fee3e68aa6",
+    "@open-mercato/shared": "0.6.6-develop.6551.1.1511bfa890",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/ai/ChatPaneTabs.tsx

@@ -97,7 +97,7 @@ export function ChatPaneTabs({ agentId, className }: ChatPaneTabsProps) {
               className={cn(
                 'group flex max-w-[12rem] shrink-0 items-center gap-1 rounded-t-md border-b-2 px-2 py-1',
                 isActive
-                  ? 'border-primary bg-background text-foreground'
+                  ? 'border-accent-indigo bg-background text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground',
               )}
             >
@@ -126,7 +126,7 @@ export function ChatPaneTabs({ agentId, className }: ChatPaneTabsProps) {
                   onClick={() => sessions.setActiveSession(session.id)}
                   onDoubleClick={() => startRename(session)}
                   title={label}
-                  className="truncate text-xs font-medium"
+                  className="truncate rounded-sm text-xs font-medium outline-none focus-visible:shadow-focus"
                 >
                   {label}
                 </button>

package/src/backend/AppShell.tsx

@@ -1494,13 +1494,13 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                       aria-selected={isActive}
                       aria-controls="mobile-drawer-tabpanel"
                       onClick={() => setMobileDrawerView(tab.id === 'main' ? 'main' : 'auto')}
-                      className="relative inline-flex items-center pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground"
+                      className="relative inline-flex items-center pb-2 text-sm font-medium leading-5 tracking-tight transition-colors outline-none focus-visible:shadow-focus data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground"
                       data-active={isActive}
                     >
                       <span>{tab.label}</span>
                       {isActive ? (
                         <span
-                          className="absolute -bottom-px left-0 right-0 h-0.5 bg-foreground"
+                          className="absolute -bottom-px left-0 right-0 h-0.5 bg-accent-indigo"
                           aria-hidden="true"
                         />
                       ) : null}

package/src/backend/__tests__/DataTable.extensions.test.tsx

@@ -3,7 +3,7 @@
  */
 import * as React from 'react'
 import { renderToString } from 'react-dom/server'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import type { ColumnDef } from '@tanstack/react-table'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
@@ -21,6 +21,16 @@ const flashMock = jest.fn()
 jest.mock('../injection/useInjectionDataWidgets', () => ({
   useInjectionDataWidgets: (spotId: string) => useInjectionDataWidgetsMock(spotId),
 }))
+// InjectionSpot/useInjectionSpotEvents (rendered whenever injectionSpotId is
+// set) load spot widgets through the real async registry loader; unmocked it
+// resolves at an arbitrary point of the test run, racing waitFor() flushes
+// and firing setState outside act().
+jest.mock('@open-mercato/shared/modules/widgets/injection-loader', () => ({
+  getInjectionRegistryVersion: () => 0,
+  subscribeToInjectionRegistryChanges: () => () => {},
+  loadInjectionWidgetsForSpot: jest.fn(async () => []),
+  loadInjectionDataWidgetsForSpot: jest.fn(async () => []),
+}))
 jest.mock('../FlashMessages', () => ({
   flash: (...args: unknown[]) => flashMock(...args),
 }))
@@ -297,19 +307,25 @@ describe('DataTable extensions', () => {
     try {
       fireEvent.click(screen.getByRole('button', { name: 'Delete all filtered' }))
 
+      // onExecute being CALLED is not enough — job-1 is registered as tracked
+      // in the click handler's continuation after `await onExecute()`. The
+      // "started" flash is the observable proof that continuation ran; without
+      // it the completion event below can race the registration and be ignored.
       await waitFor(() => expect(onExecute).toHaveBeenCalledTimes(1))
-      await new Promise<void>((resolve) => window.requestAnimationFrame(() => resolve()))
+      await waitFor(() => expect(flashMock).toHaveBeenCalledWith(expect.any(String), 'success'))
       refreshButtonMock.mockClear()
       mockRouterRefresh.mockClear()
 
-      window.dispatchEvent(new CustomEvent(APP_EVENT_DOM_NAME, {
-        detail: {
-          id: 'progress.job.completed',
-          payload: { jobId: 'job-1' },
-          timestamp: Date.now(),
-          organizationId: 'org-1',
-        },
-      }))
+      act(() => {
+        window.dispatchEvent(new CustomEvent(APP_EVENT_DOM_NAME, {
+          detail: {
+            id: 'progress.job.completed',
+            payload: { jobId: 'job-1' },
+            timestamp: Date.now(),
+            organizationId: 'org-1',
+          },
+        }))
+      })
 
       await waitFor(() => expect(refreshButtonMock).toHaveBeenCalledTimes(1))
       expect(mockRouterRefresh).not.toHaveBeenCalled()

package/src/backend/detail/AttachmentMetadataDialog.tsx

@@ -6,6 +6,7 @@ import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
@@ -576,29 +577,21 @@ export function AttachmentMetadataDialog({ open, onOpenChange, item, availableTa
             </div>
             {isImage ? (
               <div className="rounded border">
-                <div className="flex flex-wrap gap-4 border-b px-3 py-2 text-sm font-medium" role="tablist">
-                  {(['preview', 'resize'] as const).map((tab) => (
-                    <Button
-                      key={tab}
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      role="tab"
-                      aria-selected={imageTab === tab}
-                      onClick={() => setImageTab(tab)}
-                      className={cn(
-                        'h-auto -mb-px rounded-none border-b-2 border-transparent px-0 py-1',
-                        imageTab === tab
-                          ? 'border-accent-indigo text-foreground'
-                          : 'text-muted-foreground hover:text-foreground',
-                      )}
-                    >
-                      {tab === 'preview'
-                        ? t('attachments.library.metadata.preview', 'Preview')
-                        : t('attachments.library.metadata.resizeTool.title', 'Generate resized URL')}
-                    </Button>
-                  ))}
-                </div>
+                <Tabs
+                  value={imageTab}
+                  onValueChange={(value) => setImageTab(value as 'preview' | 'resize')}
+                  variant="underline"
+                >
+                  <TabsList className="w-full flex-wrap px-3">
+                    {(['preview', 'resize'] as const).map((tab) => (
+                      <TabsTrigger key={tab} value={tab}>
+                        {tab === 'preview'
+                          ? t('attachments.library.metadata.preview', 'Preview')
+                          : t('attachments.library.metadata.resizeTool.title', 'Generate resized URL')}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                </Tabs>
                 <div className="space-y-3 p-3">
                   {imageTab === 'preview' ? (
                     previewUrl ? (

package/src/backend/filters/AdvancedFilterBuilder.tsx

@@ -332,7 +332,7 @@ function AndOrToggle({
   const andLabel = t('ui.advancedFilter.combinator.and', 'And')
   const orLabel = t('ui.advancedFilter.combinator.or', 'Or')
   const baseBtn = 'h-8 px-3 text-sm font-medium outline-none focus-visible:shadow-focus disabled:cursor-not-allowed'
-  const selBtn = 'bg-brand-violet text-white hover:bg-brand-violet/90'
+  const selBtn = 'bg-brand-violet text-brand-violet-foreground hover:bg-brand-violet/90'
   const unselBtn = 'bg-background text-foreground hover:bg-accent'
   return (
     <div

package/src/primitives/__tests__/drawer.test.tsx

@@ -86,7 +86,8 @@ describe('Drawer', () => {
     const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
     expect(content.className).toContain('right-0')
     expect(content.className).toContain('inset-y-0')
-    expect(content.className).toContain('max-w-md')
+    // Figma Drawer [1.1] width contract: 400px
+    expect(content.className).toContain('max-w-[400px]')
     // Per Figma: inner edge rounded, no panel border on the seam.
     expect(content.className).toContain('rounded-l-xl')
     expect(content.className).not.toMatch(/\bborder-l\b/)

package/src/primitives/drawer.tsx

@@ -94,10 +94,11 @@ const drawerContentVariants = cva(
     variants: {
       side: {
         right:
-          'inset-y-0 right-0 h-full w-full max-w-md rounded-l-xl ' +
+          // Figma Drawer [1.1] width: 400px (not the Tailwind max-w-md 448px)
+          'inset-y-0 right-0 h-full w-full max-w-[400px] rounded-l-xl ' +
           'data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
         left:
-          'inset-y-0 left-0 h-full w-full max-w-md rounded-r-xl ' +
+          'inset-y-0 left-0 h-full w-full max-w-[400px] rounded-r-xl ' +
           'data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
         top:
           'inset-x-0 top-0 max-h-[80vh] w-full rounded-b-xl ' +
@@ -303,7 +304,7 @@ const DrawerTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     data-slot="drawer-title"
-    className={cn('text-base font-semibold leading-tight text-foreground', className)}
+    className={cn('text-lg font-semibold leading-tight text-foreground', className)}
     {...props}
   />
 ))

package/src/primitives/tabs.tsx

@@ -108,9 +108,13 @@ export function Tabs({
 export type TabsListProps = {
   children: React.ReactNode
   className?: string
+  /** Accessible name for the `role="tablist"` element. Set it when the
+   * surrounding context does not already label the strip (e.g. a bare
+   * detail-page section switcher). */
+  'aria-label'?: string
 }
 
-export function TabsList({ children, className }: TabsListProps) {
+export function TabsList({ children, className, 'aria-label': ariaLabel }: TabsListProps) {
   const { variant, orientation } = useTabsContext()
 
   const baseClasses =
@@ -130,6 +134,7 @@ export function TabsList({ children, className }: TabsListProps) {
       data-slot="tabs-list"
       className={cn(baseClasses, className)}
       role="tablist"
+      aria-label={ariaLabel}
       aria-orientation={orientation}
     >
       {children}