@shipfox/client-integrations 21.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "21.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -36,11 +36,11 @@
     "@shipfox/api-integration-sentry-dto": "12.2.0",
     "@shipfox/api-integration-webhook-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "21.0.0",
-    "@shipfox/client-shell": "21.0.0",
-    "@shipfox/client-ui": "21.0.0",
-    "@shipfox/integration-icons": "0.3.4",
-    "@shipfox/react-ui": "2.0.0"
+    "@shipfox/client-auth": "22.0.0",
+    "@shipfox/client-shell": "22.0.0",
+    "@shipfox/client-ui": "22.0.0",
+    "@shipfox/integration-icons": "0.3.5",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/callback-status-shell.tsx

@@ -1,3 +1,4 @@
+import {FocusedFrame} from '@shipfox/client-shell/runtime';
 import {ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {Text} from '@shipfox/react-ui/typography';
@@ -43,8 +44,8 @@ export function CallbackStatusShell({
     : undefined;
 
   return (
-    <main className="flex min-h-screen px-row py-frame">
-      <div className="mx-auto flex w-full flex-col justify-center gap-section">
+    <main className="flex min-h-screen px-frame py-frame">
+      <FocusedFrame className="flex flex-col justify-center gap-section">
         <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
           {title}
         </h2>
@@ -71,7 +72,7 @@ export function CallbackStatusShell({
           ) : null}
           {settings}
         </div>
-      </div>
+      </FocusedFrame>
     </main>
   );
 }

package/src/components/connection-picker.tsx

@@ -19,15 +19,15 @@ export function ConnectionPicker({
   const labelId = useId();
 
   return (
-    <div className="flex flex-col gap-inline">
+    <div className="flex min-w-0 flex-col">
       <Label id={labelId} className="sr-only">
         Source integration
       </Label>
       <RadioGroup
+        variant="cell"
         aria-labelledby={labelId}
         value={selectedConnectionId ?? ''}
         onValueChange={onSelect}
-        className="grid grid-cols-2 gap-inline max-[760px]:grid-cols-1"
       >
         {connections.map((connection) => (
           <RadioGroupItem key={connection.id} value={connection.id}>

package/src/components/installed-integrations-section.tsx

@@ -9,6 +9,7 @@ import {
   DropdownMenuTrigger,
 } from '@shipfox/react-ui/dropdown-menu';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Panel, PanelBody, PanelRow} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {cn, formatDate} from '@shipfox/react-ui/utils';
@@ -31,9 +32,6 @@ interface InstalledIntegrationsSectionProps {
   providerDisplayName: (provider: string) => string | undefined;
 }
 
-const INSTALLED_SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
-
 export function InstalledIntegrationsSection({
   workspaceSlug,
   connections,
@@ -59,39 +57,45 @@ export function InstalledIntegrationsSection({
       {isPending ? <InstalledSkeleton label="Loading integrations" /> : null}
 
       {error ? (
-        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-row')}>
+        <Panel>
           <QueryLoadError
             query={{isError: true, isFetching, data: undefined, error, refetch: onRetry}}
             subject="integrations"
+            variant="panel"
           />
-        </div>
+        </Panel>
       ) : null}
 
       {!isPending && !error && connections.length === 0 ? (
-        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-row')}>
+        <Panel>
           <EmptyState
             icon="componentLine"
             title="No integrations installed yet"
             description="Install a provider below to get started."
+            variant="panel"
           />
-        </div>
+        </Panel>
       ) : null}
 
       {connections.length > 0 ? (
-        <ul className={cn('divide-y divide-border-neutral-base', INSTALLED_SURFACE_CLASS)}>
-          {connections.map((connection) => (
-            <InstalledRow
-              key={connection.id}
-              connection={connection}
-              workspaceSlug={workspaceSlug}
-              isMutating={isMutating}
-              onUse={onUse}
-              onSetActive={(nextActive) => onSetActive(connection, nextActive)}
-              onDelete={onDelete}
-              providerDisplayName={providerDisplayName}
-            />
-          ))}
-        </ul>
+        <Panel>
+          <PanelBody asChild>
+            <ul>
+              {connections.map((connection) => (
+                <InstalledRow
+                  key={connection.id}
+                  connection={connection}
+                  workspaceSlug={workspaceSlug}
+                  isMutating={isMutating}
+                  onUse={onUse}
+                  onSetActive={(nextActive) => onSetActive(connection, nextActive)}
+                  onDelete={onDelete}
+                  providerDisplayName={providerDisplayName}
+                />
+              ))}
+            </ul>
+          </PanelBody>
+        </Panel>
       ) : null}
     </section>
   );
@@ -120,91 +124,99 @@ function InstalledRow({
   const providerName = providerDisplayName(connection.provider);
 
   return (
-    <li className="flex items-center gap-cluster px-row py-row transition-colors hover:bg-background-components-hover">
-      <IntegrationIcon
-        source={connection.provider}
-        aria-hidden
-        className={cn(
-          'size-24 shrink-0',
-          muted ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-base',
-        )}
-      />
-      <div className="flex min-w-0 flex-1 flex-col gap-tight">
-        <div className="flex min-w-0 items-center gap-inline">
-          <Text
-            size="md"
-            bold
-            className={cn('truncate', muted ? 'text-foreground-neutral-disabled' : undefined)}
-          >
-            {connection.displayName}
+    <PanelRow asChild className="justify-start gap-cluster">
+      <li>
+        <IntegrationIcon
+          source={connection.provider}
+          aria-hidden
+          className={cn(
+            'size-24 shrink-0',
+            muted ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-base',
+          )}
+        />
+        <div className="flex min-w-0 flex-1 flex-col gap-tight">
+          <div className="flex min-w-0 items-center gap-inline">
+            <Text
+              size="md"
+              bold
+              className={cn('truncate', muted ? 'text-foreground-neutral-disabled' : undefined)}
+            >
+              {connection.displayName}
+            </Text>
+            <ConnectionStatusBadge status={connection.lifecycleStatus} className="shrink-0" />
+          </div>
+          <Text size="sm" className="truncate text-foreground-neutral-muted">
+            Added {formatDate(connection.createdAt)}
           </Text>
-          <ConnectionStatusBadge status={connection.lifecycleStatus} className="shrink-0" />
         </div>
-        <Text size="sm" className="truncate text-foreground-neutral-muted">
-          Added {formatDate(connection.createdAt)}
-        </Text>
-      </div>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <IconButton
-            size="sm"
-            variant="transparent"
-            icon="more2Line"
-            aria-label={`Open ${connection.displayName} integration actions`}
-          />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {connection.externalUrl ? (
-            <DropdownMenuItem asChild>
-              <a href={connection.externalUrl} target="_blank" rel="noreferrer noopener">
-                {providerName ? `Open in ${providerName}` : 'Open provider settings'}
-              </a>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              size="sm"
+              variant="transparent"
+              icon="more2Line"
+              aria-label={`Open ${connection.displayName} integration actions`}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {connection.externalUrl ? (
+              <DropdownMenuItem asChild>
+                <a href={connection.externalUrl} target="_blank" rel="noreferrer noopener">
+                  {providerName ? `Open in ${providerName}` : 'Open provider settings'}
+                </a>
+              </DropdownMenuItem>
+            ) : null}
+            <DropdownMenuItem onSelect={() => onUse(connection.id)}>
+              Use this integration
+            </DropdownMenuItem>
+            {workspaceSlug ? (
+              <DropdownMenuItem asChild>
+                <Link
+                  to="/w/$workspaceSlug/settings/events"
+                  params={{workspaceSlug}}
+                  search={{source: [connection.slug], event: [recentEventsEvent]}}
+                >
+                  View recent events
+                </Link>
+              </DropdownMenuItem>
+            ) : null}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled={isMutating} onSelect={() => onSetActive(!active)}>
+              {active ? 'Disable integration' : 'Enable integration'}
             </DropdownMenuItem>
-          ) : null}
-          <DropdownMenuItem onSelect={() => onUse(connection.id)}>
-            Use this integration
-          </DropdownMenuItem>
-          {workspaceSlug ? (
-            <DropdownMenuItem asChild>
-              <Link
-                to="/w/$workspaceSlug/settings/events"
-                params={{workspaceSlug}}
-                search={{source: [connection.slug], event: [recentEventsEvent]}}
-              >
-                View recent events
-              </Link>
+            <DropdownMenuItem disabled={isMutating} onSelect={() => onDelete(connection.id)}>
+              Delete integration
             </DropdownMenuItem>
-          ) : null}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem disabled={isMutating} onSelect={() => onSetActive(!active)}>
-            {active ? 'Disable integration' : 'Enable integration'}
-          </DropdownMenuItem>
-          <DropdownMenuItem disabled={isMutating} onSelect={() => onDelete(connection.id)}>
-            Delete integration
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </li>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </li>
+    </PanelRow>
   );
 }
 
 function InstalledSkeleton({label}: {label: string}) {
   return (
-    <ul
-      role="status"
-      aria-label={label}
-      className={cn('divide-y divide-border-neutral-base', INSTALLED_SURFACE_CLASS)}
-    >
-      {[0, 1, 2].map((row) => (
-        <li key={row} className="flex items-center gap-cluster px-row py-row">
-          <Skeleton className="size-24 shrink-0" />
-          <div className="flex min-w-0 flex-1 flex-col gap-tight">
-            <Skeleton className="h-16 w-120" />
-            <Skeleton className="h-12 w-80" />
-          </div>
-          <Skeleton className="h-20 w-72 shrink-0" />
-        </li>
-      ))}
-    </ul>
+    <Panel>
+      <PanelBody asChild>
+        <ul role="status" aria-label={label}>
+          {[0, 1, 2].map((row) => (
+            <PanelRow
+              asChild
+              className="justify-start gap-cluster hover:bg-background-neutral-base"
+              key={row}
+            >
+              <li>
+                <Skeleton className="size-24 shrink-0" />
+                <div className="flex min-w-0 flex-1 flex-col gap-tight">
+                  <Skeleton className="h-16 w-120" />
+                  <Skeleton className="h-12 w-80" />
+                </div>
+                <Skeleton className="h-20 w-72 shrink-0" />
+              </li>
+            </PanelRow>
+          ))}
+        </ul>
+      </PanelBody>
+    </Panel>
   );
 }

package/src/components/integration-gallery.stories.tsx

@@ -17,7 +17,7 @@ import {
 } from '@tanstack/react-router';
 import {createStore, Provider as JotaiProvider} from 'jotai';
 import {useMemo} from 'react';
-import {expect, screen, userEvent, within} from 'storybook/test';
+import {expect, screen, userEvent, waitFor, within} from 'storybook/test';
 import {IntegrationGallery} from './integration-gallery.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
@@ -162,7 +162,12 @@ export const UsageModalCloseRestoresInteraction: Story = {
     await screen.findByRole('dialog', {name: 'Use acme-corp'});
     await user.click(await screen.findByRole('button', {name: 'Done'}));
     expect(screen.queryByRole('dialog', {name: 'Use acme-corp'})).not.toBeInTheDocument();
-    expect(document.body.style.pointerEvents).not.toBe('none');
+    // The dialog unmounts before its dismissable layer releases the body, so
+    // wait for the release rather than asserting it on the same tick: clicking
+    // while `pointer-events: none` is still set is swallowed silently.
+    await waitFor(() => {
+      expect(document.body.style.pointerEvents).not.toBe('none');
+    });
     await user.click(actionsButton);
     await screen.findByRole('menuitem', {name: 'Use this integration'});
   },

package/src/components/integration-gallery.test.tsx

@@ -600,8 +600,9 @@ describe('IntegrationGallery: available section', () => {
 
     const link = await screen.findByRole('link', {name: 'Install GitHub'});
 
-    expect(link).toHaveClass('focus-visible:shadow-button-neutral-focus');
-    expect(link).toHaveClass('shadow-button-neutral');
+    // Cells run edge to edge inside the panel, so the ring is inset rather than
+    // the outset button ring the panel's `overflow-hidden` would crop.
+    expect(link).toHaveClass('focus-visible:shadow-focus-inset');
     expect(link.className).not.toContain('shadow-button-secondary');
     expect(within(link).getByText('Install')).toBeVisible();
     expect(within(link).queryByRole('button')).not.toBeInTheDocument();

package/src/components/provider-grid.tsx

@@ -1,11 +1,9 @@
 import {QueryLoadError} from '@shipfox/client-ui';
 import {IntegrationIcon} from '@shipfox/integration-icons';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
-import {Icon} from '@shipfox/react-ui/icon';
-import {Panel} from '@shipfox/react-ui/panel';
+import {Panel, PanelBody, PanelCell, PanelCellAction, PanelGrid} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Text} from '@shipfox/react-ui/typography';
-import {cn} from '@shipfox/react-ui/utils';
 import {Link} from '@tanstack/react-router';
 import type {IntegrationProvider} from '#core/models.js';
 import {PROVIDER_CATALOG} from '#provider-catalog.js';
@@ -23,11 +21,6 @@ export interface ProviderGridProps {
   onOpenProvider?: ((provider: string) => void) | undefined;
 }
 
-export const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1';
-
-export const PROVIDER_SURFACE_CLASS =
-  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
-
 export function ProviderGrid({
   workspaceSlug,
   providers,
@@ -46,7 +39,7 @@ export function ProviderGrid({
 
   if (error) {
     return (
-      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>
+      <Panel>
         <QueryLoadError
           query={{
             isError: true,
@@ -56,39 +49,44 @@ export function ProviderGrid({
             refetch: onRetry ?? (() => undefined),
           }}
           subject={errorSubject}
+          variant="panel"
         />
-      </div>
+      </Panel>
     );
   }
 
   if (installableProviders.length === 0) {
     return (
-      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>
+      <Panel>
         <EmptyState
           icon="componentLine"
           title="No integrations available"
           description={emptyMessage}
+          variant="panel"
         />
-      </div>
+      </Panel>
     );
   }
 
   return (
-    <ul className={PROVIDER_GRID_CLASS}>
-      {installableProviders.map((provider) => (
-        <li key={provider.provider}>
-          <ProviderCard
-            provider={provider}
-            workspaceSlug={workspaceSlug}
-            onOpenProvider={onOpenProvider}
-          />
-        </li>
-      ))}
-    </ul>
+    <Panel>
+      <PanelBody>
+        <PanelGrid aria-label="Available integrations">
+          {installableProviders.map((provider) => (
+            <ProviderCell
+              key={provider.provider}
+              provider={provider}
+              workspaceSlug={workspaceSlug}
+              onOpenProvider={onOpenProvider}
+            />
+          ))}
+        </PanelGrid>
+      </PanelBody>
+    </Panel>
   );
 }
 
-function ProviderCard({
+function ProviderCell({
   provider,
   workspaceSlug,
   onOpenProvider,
@@ -102,74 +100,66 @@ function ProviderCard({
 
   if (catalog.kind === 'modal-connect') {
     return (
-      <button
-        type="button"
-        aria-label={`Add ${provider.displayName}`}
-        onClick={() => onOpenProvider?.(provider.provider)}
-        className="group flex h-full w-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact text-left shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
-      >
-        <ProviderCardContent provider={provider} action="Add" />
-      </button>
+      <PanelCell>
+        <PanelCellAction
+          action="Add"
+          aria-label={`Add ${provider.displayName}`}
+          onClick={() => onOpenProvider?.(provider.provider)}
+        >
+          <ProviderCellContent provider={provider} />
+        </PanelCellAction>
+      </PanelCell>
     );
   }
 
   return (
-    <Link
-      to={catalog.setupPath}
-      params={{workspaceSlug}}
-      aria-label={`Install ${provider.displayName}`}
-      className="group flex h-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
-    >
-      <ProviderCardContent provider={provider} action="Install" />
-    </Link>
+    <PanelCell>
+      <PanelCellAction asChild action="Install">
+        <Link
+          to={catalog.setupPath}
+          params={{workspaceSlug}}
+          aria-label={`Install ${provider.displayName}`}
+        >
+          <ProviderCellContent provider={provider} />
+        </Link>
+      </PanelCellAction>
+    </PanelCell>
   );
 }
 
-function ProviderCardContent({
-  provider,
-  action,
-}: {
-  provider: IntegrationProvider;
-  action: 'Add' | 'Install';
-}) {
+function ProviderCellContent({provider}: {provider: IntegrationProvider}) {
   return (
-    <>
-      <span className="flex min-w-0 items-center gap-cluster">
-        <IntegrationIcon
-          source={provider.provider}
-          aria-hidden
-          className="size-24 shrink-0 text-foreground-neutral-base"
-        />
-        <Text as="span" size="md" bold className="truncate">
-          {provider.displayName}
-        </Text>
-      </span>
-      <span className="flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
-        <Text as="span" size="sm">
-          {action}
-        </Text>
-        <Icon name="chevronRight" className="size-16" />
-      </span>
-    </>
+    <span className="flex min-w-0 items-center gap-cluster">
+      <IntegrationIcon
+        source={provider.provider}
+        aria-hidden
+        className="size-24 shrink-0 text-foreground-neutral-base"
+      />
+      <Text as="span" size="md" bold className="truncate">
+        {provider.displayName}
+      </Text>
+    </span>
   );
 }
 
 function ProviderGridSkeleton({label}: {label: string}) {
   return (
-    <ul role="status" aria-label={label} className={PROVIDER_GRID_CLASS}>
-      {[0, 1, 2, 3].map((tile) => (
-        <li key={tile}>
-          <Panel className="h-full p-panel-compact">
-            <div className="flex items-center justify-between gap-cluster">
-              <div className="flex min-w-0 items-center gap-cluster">
-                <Skeleton className="size-24 shrink-0" />
-                <Skeleton className="h-16 w-100" />
+    <Panel>
+      <PanelBody>
+        <PanelGrid role="status" aria-label={label}>
+          {[0, 1, 2, 3].map((tile) => (
+            <PanelCell key={tile}>
+              <div className="flex items-center justify-between gap-cluster px-row py-row">
+                <div className="flex min-w-0 items-center gap-cluster">
+                  <Skeleton className="size-24 shrink-0" />
+                  <Skeleton className="h-16 w-100" />
+                </div>
+                <Skeleton className="h-16 w-64 shrink-0" />
               </div>
-              <Skeleton className="h-16 w-64 shrink-0" />
-            </div>
-          </Panel>
-        </li>
-      ))}
-    </ul>
+            </PanelCell>
+          ))}
+        </PanelGrid>
+      </PanelBody>
+    </Panel>
   );
 }

package/src/components/redirect-install-page.test.tsx

@@ -1,11 +1,14 @@
 // @vitest-environment jsdom
 import '@testing-library/jest-dom/vitest';
 import {ApiError} from '@shipfox/client-api';
+import {FOCUSED_FRAME_CONTENT_CLASS_NAME} from '@shipfox/client-shell/runtime';
 import {screen, waitFor} from '@testing-library/react';
 import {StrictMode} from 'react';
 import {INTEGRATIONS_TEST_WID, renderIntegrationsPage} from '#test/render.js';
 import {RedirectInstallPage} from './redirect-install-page.js';
 
+const FOCUSED_FRAME_CONTENT_CLASSES = FOCUSED_FRAME_CONTENT_CLASS_NAME.split(' ');
+
 function renderInstallPage(
   props: Parameters<typeof RedirectInstallPage>[0],
   options?: {strict?: boolean},
@@ -62,6 +65,7 @@ describe('RedirectInstallPage', () => {
 
     // Alert mounts via framer-motion (opacity 0 in jsdom), so assert presence.
     expect(await screen.findByText('Sentry app not configured')).toBeInTheDocument();
+    expect(screen.getByRole('alert').parentElement).toHaveClass(...FOCUSED_FRAME_CONTENT_CLASSES);
     expect(screen.getByRole('link', {name: 'Back to integrations'})).toBeVisible();
   });
 

package/src/components/redirect-install-page.tsx

@@ -1,5 +1,6 @@
 import {ApiError} from '@shipfox/client-api';
 import {useActiveWorkspace} from '@shipfox/client-auth';
+import {FocusedFrame} from '@shipfox/client-shell/runtime';
 import {ButtonLink} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
@@ -54,7 +55,7 @@ export function RedirectInstallPage({
 
   if (errorMessage) {
     return (
-      <div className="mx-auto flex w-full max-w-[480px] flex-col gap-group">
+      <FocusedFrame className="flex flex-col gap-group">
         <Callout role="alert" type="error">
           <Text size="sm">{errorMessage}</Text>
         </Callout>
@@ -63,7 +64,7 @@ export function RedirectInstallPage({
             Back to integrations
           </Link>
         </ButtonLink>
-      </div>
+      </FocusedFrame>
     );
   }