@shipfox/client-integrations 21.0.0 → 22.0.1

package/dist/components/integration-gallery-for-workspace.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/integration-gallery-for-workspace.tsx"],"sourcesContent":["import {useAuthState} from '@shipfox/client-auth';\nimport {toast} from '@shipfox/react-ui/toast';\nimport {Header, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport type {\n  IntegrationCapability,\n  IntegrationConnection,\n  IntegrationProvider,\n} from '#core/models.js';\nimport {\n  useDeleteIntegrationConnectionMutation,\n  useIntegrationConnectionsQuery,\n  useIntegrationProvidersQuery,\n  useUpdateIntegrationConnectionMutation,\n} from '#hooks/api/integrations.js';\nimport {\n  useDeleteWebhookConnectionMutation,\n  useUpdateWebhookConnectionMutation,\n} from '#hooks/api/webhook-connections.js';\nimport {InstalledIntegrationsSection} from './installed-integrations-section.js';\nimport {IntegrationDeleteConfirmModal} from './integration-delete-confirm-modal.js';\nimport {usageEventsForConnection} from './integration-usage-events.js';\nimport {IntegrationUsageModal} from './integration-usage-modal.js';\nimport {ProviderGrid} from './provider-grid.js';\nimport {WebhookCreateModal} from './webhook/webhook-create-modal.js';\nimport {WebhookUsageDetails} from './webhook/webhook-usage-details.js';\n\ninterface IntegrationGalleryForWorkspaceProps {\n  capability: IntegrationCapability | undefined;\n  emptyProvidersMessage: string;\n  workspaceId: string;\n}\n\nexport function IntegrationGalleryForWorkspace({\n  capability,\n  emptyProvidersMessage,\n  workspaceId,\n}: IntegrationGalleryForWorkspaceProps) {\n  const {workspaces} = useAuthState();\n  const workspaceSlug = workspaces.find((workspace) => workspace.id === workspaceId)?.slug;\n  const [createProvider, setCreateProvider] = useState<string | undefined>();\n  const [usageConnectionId, setUsageConnectionId] = useState<string | undefined>();\n  const [createdUsageConnection, setCreatedUsageConnection] = useState<\n    IntegrationConnection | undefined\n  >();\n  const [deleteConnectionId, setDeleteConnectionId] = useState<string | undefined>();\n  const providersQuery = useIntegrationProvidersQuery(capability ? {capability} : undefined);\n  const connectionsQuery = useIntegrationConnectionsQuery(workspaceId);\n  const updateConnection = useUpdateIntegrationConnectionMutation();\n  const deleteConnection = useDeleteIntegrationConnectionMutation();\n  const updateWebhookConnection = useUpdateWebhookConnectionMutation();\n  const deleteWebhookConnection = useDeleteWebhookConnectionMutation();\n\n  const providers = providersQuery.data ?? [];\n  const providersMap = new Map<string, IntegrationProvider>(\n    providers.map((provider) => [provider.provider, provider]),\n  );\n\n  const allConnections = connectionsQuery.data ?? [];\n  // Filter in memory so the all-status cache key stays shared; passing capability\n  // into the hook would collide with the active-only `source_control` key used\n  // elsewhere.\n  const connections = capability\n    ? allConnections.filter((connection) => connection.capabilities.includes(capability))\n    : allConnections;\n\n  const providerDisplayName = (provider: string) => providersMap.get(provider)?.displayName;\n  const providerLabel = (provider: string) => providerDisplayName(provider) ?? provider;\n\n  const sortedConnections = [...connections].sort((a, b) => {\n    const byProvider = providerLabel(a.provider).localeCompare(providerLabel(b.provider));\n    if (byProvider !== 0) return byProvider;\n    return a.createdAt.localeCompare(b.createdAt);\n  });\n  const usageConnection =\n    sortedConnections.find((connection) => connection.id === usageConnectionId) ??\n    (createdUsageConnection?.id === usageConnectionId ? createdUsageConnection : null) ??\n    null;\n  const deleteConnectionTarget = sortedConnections.find(\n    (connection) => connection.id === deleteConnectionId,\n  );\n\n  async function setConnectionActive(connection: IntegrationConnection, active: boolean) {\n    try {\n      const body = {lifecycle_status: active ? 'active' : 'disabled'} as const;\n      if (connection.provider === 'webhook') {\n        await updateWebhookConnection.mutateAsync({\n          workspaceId,\n          connectionId: connection.id,\n          body,\n        });\n      } else {\n        await updateConnection.mutateAsync({\n          connectionId: connection.id,\n          body,\n        });\n      }\n      toast.success(active ? 'Integration enabled.' : 'Integration disabled.');\n    } catch (error) {\n      toast.error(error instanceof Error ? error.message : 'Could not update integration.');\n    }\n  }\n\n  async function confirmDeleteConnection() {\n    if (!deleteConnectionTarget) return;\n    try {\n      if (deleteConnectionTarget.provider === 'webhook') {\n        await deleteWebhookConnection.mutateAsync({\n          workspaceId,\n          connectionId: deleteConnectionTarget.id,\n        });\n      } else {\n        await deleteConnection.mutateAsync({\n          workspaceId,\n          connectionId: deleteConnectionTarget.id,\n        });\n      }\n      toast.success('Integration deleted.');\n      setDeleteConnectionId(undefined);\n    } catch (error) {\n      toast.error(error instanceof Error ? error.message : 'Could not delete integration.');\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      <InstalledIntegrationsSection\n        workspaceSlug={workspaceSlug}\n        connections={sortedConnections}\n        isPending={connectionsQuery.isPending}\n        isFetching={connectionsQuery.isFetching}\n        error={connectionsQuery.isError ? connectionsQuery.error : undefined}\n        onRetry={() => void connectionsQuery.refetch()}\n        isMutating={\n          updateConnection.isPending ||\n          deleteConnection.isPending ||\n          updateWebhookConnection.isPending ||\n          deleteWebhookConnection.isPending\n        }\n        onUse={setUsageConnectionId}\n        onSetActive={(connection, active) => {\n          void setConnectionActive(connection, active);\n        }}\n        onDelete={setDeleteConnectionId}\n        providerDisplayName={providerDisplayName}\n      />\n\n      <section className=\"flex flex-col gap-group\" aria-label=\"Available integrations\">\n        <div className=\"flex flex-col gap-tight\">\n          <Header variant=\"h3\">Available integrations</Header>\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n            Providers available to install in this workspace.\n          </Text>\n        </div>\n\n        {workspaceSlug ? (\n          <ProviderGrid\n            workspaceSlug={workspaceSlug}\n            providers={providers}\n            isPending={providersQuery.isPending}\n            isFetching={providersQuery.isFetching}\n            error={providersQuery.isError ? providersQuery.error : undefined}\n            onRetry={() => void providersQuery.refetch()}\n            emptyMessage={emptyProvidersMessage}\n            onOpenProvider={setCreateProvider}\n          />\n        ) : (\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\" aria-live=\"polite\">\n            Loading workspace details…\n          </Text>\n        )}\n      </section>\n      <WebhookCreateModal\n        workspaceId={workspaceId}\n        open={createProvider === 'webhook'}\n        onOpenChange={(open) => setCreateProvider(open ? 'webhook' : undefined)}\n        onCreated={(connection) => {\n          setCreatedUsageConnection(connection);\n          setUsageConnectionId(connection.id);\n        }}\n      />\n      <IntegrationUsageModal\n        connection={usageConnection}\n        events={usageConnection ? usageEventsForConnection(usageConnection) : []}\n        open={usageConnection !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setUsageConnectionId(undefined);\n            setCreatedUsageConnection(undefined);\n          }\n        }}\n      >\n        {usageConnection?.provider === 'webhook' ? (\n          <WebhookUsageDetails workspaceId={workspaceId} connectionId={usageConnection.id} />\n        ) : null}\n      </IntegrationUsageModal>\n      <IntegrationDeleteConfirmModal\n        connectionName={deleteConnectionTarget?.displayName}\n        open={deleteConnectionId !== undefined}\n        isPending={deleteConnection.isPending || deleteWebhookConnection.isPending}\n        onOpenChange={(open) => {\n          if (!open) setDeleteConnectionId(undefined);\n        }}\n        onConfirm={() => {\n          void confirmDeleteConnection();\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["useAuthState","toast","Header","Text","useState","useDeleteIntegrationConnectionMutation","useIntegrationConnectionsQuery","useIntegrationProvidersQuery","useUpdateIntegrationConnectionMutation","useDeleteWebhookConnectionMutation","useUpdateWebhookConnectionMutation","InstalledIntegrationsSection","IntegrationDeleteConfirmModal","usageEventsForConnection","IntegrationUsageModal","ProviderGrid","WebhookCreateModal","WebhookUsageDetails","IntegrationGalleryForWorkspace","capability","emptyProvidersMessage","workspaceId","workspaces","workspaceSlug","find","workspace","id","slug","createProvider","setCreateProvider","usageConnectionId","setUsageConnectionId","createdUsageConnection","setCreatedUsageConnection","deleteConnectionId","setDeleteConnectionId","providersQuery","undefined","connectionsQuery","updateConnection","deleteConnection","updateWebhookConnection","deleteWebhookConnection","providers","data","providersMap","Map","map","provider","allConnections","connections","filter","connection","capabilities","includes","providerDisplayName","get","displayName","providerLabel","sortedConnections","sort","a","b","byProvider","localeCompare","createdAt","usageConnection","deleteConnectionTarget","setConnectionActive","active","body","lifecycle_status","mutateAsync","connectionId","success","error","Error","message","confirmDeleteConnection","div","className","isPending","isFetching","isError","onRetry","refetch","isMutating","onUse","onSetActive","onDelete","section","aria-label","variant","size","emptyMessage","onOpenProvider","aria-live","open","onOpenChange","onCreated","events","connectionName","onConfirm"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/integration-gallery-for-workspace.tsx"],"sourcesContent":["import {useAuthState} from '@shipfox/client-auth';\nimport {toast} from '@shipfox/react-ui/toast';\nimport {Header, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport type {\n  IntegrationCapability,\n  IntegrationConnection,\n  IntegrationProvider,\n} from '#core/models.js';\nimport {\n  useDeleteIntegrationConnectionMutation,\n  useIntegrationConnectionsQuery,\n  useIntegrationProvidersQuery,\n  useUpdateIntegrationConnectionMutation,\n} from '#hooks/api/integrations.js';\nimport {\n  useDeleteWebhookConnectionMutation,\n  useUpdateWebhookConnectionMutation,\n} from '#hooks/api/webhook-connections.js';\nimport {InstalledIntegrationsSection} from './installed-integrations-section.js';\nimport {IntegrationDeleteConfirmModal} from './integration-delete-confirm-modal.js';\nimport {usageEventsForConnection} from './integration-usage-events.js';\nimport {IntegrationUsageModal} from './integration-usage-modal.js';\nimport {ProviderGrid} from './provider-grid.js';\nimport {WebhookCreateModal} from './webhook/webhook-create-modal.js';\nimport {WebhookUsageDetails} from './webhook/webhook-usage-details.js';\n\ninterface IntegrationGalleryForWorkspaceProps {\n  capability: IntegrationCapability | undefined;\n  emptyProvidersMessage: string;\n  workspaceId: string;\n}\n\nexport function IntegrationGalleryForWorkspace({\n  capability,\n  emptyProvidersMessage,\n  workspaceId,\n}: IntegrationGalleryForWorkspaceProps) {\n  const {workspaces} = useAuthState();\n  const workspaceSlug = workspaces.find((workspace) => workspace.id === workspaceId)?.slug;\n  const [createProvider, setCreateProvider] = useState<string | undefined>();\n  const [usageConnectionId, setUsageConnectionId] = useState<string | undefined>();\n  const [createdUsageConnection, setCreatedUsageConnection] = useState<\n    IntegrationConnection | undefined\n  >();\n  const [deleteConnectionId, setDeleteConnectionId] = useState<string | undefined>();\n  const providersQuery = useIntegrationProvidersQuery(capability ? {capability} : undefined);\n  const connectionsQuery = useIntegrationConnectionsQuery(workspaceId);\n  const updateConnection = useUpdateIntegrationConnectionMutation();\n  const deleteConnection = useDeleteIntegrationConnectionMutation();\n  const updateWebhookConnection = useUpdateWebhookConnectionMutation();\n  const deleteWebhookConnection = useDeleteWebhookConnectionMutation();\n\n  const providers = providersQuery.data ?? [];\n  const providersMap = new Map<string, IntegrationProvider>(\n    providers.map((provider) => [provider.provider, provider]),\n  );\n\n  const allConnections = connectionsQuery.data ?? [];\n  // Filter in memory so the all-status cache key stays shared; passing capability\n  // into the hook would collide with the active-only `source_control` key used\n  // elsewhere.\n  const connections = capability\n    ? allConnections.filter((connection) => connection.capabilities.includes(capability))\n    : allConnections;\n\n  const providerDisplayName = (provider: string) => providersMap.get(provider)?.displayName;\n  const providerLabel = (provider: string) => providerDisplayName(provider) ?? provider;\n\n  const sortedConnections = [...connections].sort((a, b) => {\n    const byProvider = providerLabel(a.provider).localeCompare(providerLabel(b.provider));\n    if (byProvider !== 0) return byProvider;\n    return a.createdAt.localeCompare(b.createdAt);\n  });\n  const usageConnection =\n    sortedConnections.find((connection) => connection.id === usageConnectionId) ??\n    (createdUsageConnection?.id === usageConnectionId ? createdUsageConnection : null) ??\n    null;\n  const deleteConnectionTarget = sortedConnections.find(\n    (connection) => connection.id === deleteConnectionId,\n  );\n\n  async function setConnectionActive(connection: IntegrationConnection, active: boolean) {\n    try {\n      const body = {lifecycle_status: active ? 'active' : 'disabled'} as const;\n      if (connection.provider === 'webhook') {\n        await updateWebhookConnection.mutateAsync({\n          workspaceId,\n          connectionId: connection.id,\n          body,\n        });\n      } else {\n        await updateConnection.mutateAsync({\n          connectionId: connection.id,\n          body,\n        });\n      }\n      toast.success(active ? 'Integration enabled.' : 'Integration disabled.');\n    } catch (error) {\n      toast.error(error instanceof Error ? error.message : 'Could not update integration.');\n    }\n  }\n\n  async function confirmDeleteConnection() {\n    if (!deleteConnectionTarget) return;\n    try {\n      if (deleteConnectionTarget.provider === 'webhook') {\n        await deleteWebhookConnection.mutateAsync({\n          workspaceId,\n          connectionId: deleteConnectionTarget.id,\n        });\n      } else {\n        await deleteConnection.mutateAsync({\n          workspaceId,\n          connectionId: deleteConnectionTarget.id,\n        });\n      }\n      toast.success('Integration deleted.');\n      setDeleteConnectionId(undefined);\n    } catch (error) {\n      toast.error(error instanceof Error ? error.message : 'Could not delete integration.');\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      <InstalledIntegrationsSection\n        workspaceSlug={workspaceSlug}\n        connections={sortedConnections}\n        isPending={connectionsQuery.isPending}\n        isFetching={connectionsQuery.isFetching}\n        error={connectionsQuery.isError ? connectionsQuery.error : undefined}\n        onRetry={() => void connectionsQuery.refetch()}\n        isMutating={\n          updateConnection.isPending ||\n          deleteConnection.isPending ||\n          updateWebhookConnection.isPending ||\n          deleteWebhookConnection.isPending\n        }\n        onUse={setUsageConnectionId}\n        onSetActive={(connection, active) => {\n          void setConnectionActive(connection, active);\n        }}\n        onDelete={setDeleteConnectionId}\n        providerDisplayName={providerDisplayName}\n      />\n\n      <section className=\"flex flex-col gap-group\" aria-label=\"Available integrations\">\n        <div className=\"flex flex-col gap-tight\">\n          <Header variant=\"h3\">Available integrations</Header>\n        </div>\n\n        {workspaceSlug ? (\n          <ProviderGrid\n            workspaceSlug={workspaceSlug}\n            providers={providers}\n            isPending={providersQuery.isPending}\n            isFetching={providersQuery.isFetching}\n            error={providersQuery.isError ? providersQuery.error : undefined}\n            onRetry={() => void providersQuery.refetch()}\n            emptyMessage={emptyProvidersMessage}\n            onOpenProvider={setCreateProvider}\n          />\n        ) : (\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\" aria-live=\"polite\">\n            Loading workspace details…\n          </Text>\n        )}\n      </section>\n      <WebhookCreateModal\n        workspaceId={workspaceId}\n        open={createProvider === 'webhook'}\n        onOpenChange={(open) => setCreateProvider(open ? 'webhook' : undefined)}\n        onCreated={(connection) => {\n          setCreatedUsageConnection(connection);\n          setUsageConnectionId(connection.id);\n        }}\n      />\n      <IntegrationUsageModal\n        connection={usageConnection}\n        events={usageConnection ? usageEventsForConnection(usageConnection) : []}\n        open={usageConnection !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setUsageConnectionId(undefined);\n            setCreatedUsageConnection(undefined);\n          }\n        }}\n      >\n        {usageConnection?.provider === 'webhook' ? (\n          <WebhookUsageDetails workspaceId={workspaceId} connectionId={usageConnection.id} />\n        ) : null}\n      </IntegrationUsageModal>\n      <IntegrationDeleteConfirmModal\n        connectionName={deleteConnectionTarget?.displayName}\n        open={deleteConnectionId !== undefined}\n        isPending={deleteConnection.isPending || deleteWebhookConnection.isPending}\n        onOpenChange={(open) => {\n          if (!open) setDeleteConnectionId(undefined);\n        }}\n        onConfirm={() => {\n          void confirmDeleteConnection();\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["useAuthState","toast","Header","Text","useState","useDeleteIntegrationConnectionMutation","useIntegrationConnectionsQuery","useIntegrationProvidersQuery","useUpdateIntegrationConnectionMutation","useDeleteWebhookConnectionMutation","useUpdateWebhookConnectionMutation","InstalledIntegrationsSection","IntegrationDeleteConfirmModal","usageEventsForConnection","IntegrationUsageModal","ProviderGrid","WebhookCreateModal","WebhookUsageDetails","IntegrationGalleryForWorkspace","capability","emptyProvidersMessage","workspaceId","workspaces","workspaceSlug","find","workspace","id","slug","createProvider","setCreateProvider","usageConnectionId","setUsageConnectionId","createdUsageConnection","setCreatedUsageConnection","deleteConnectionId","setDeleteConnectionId","providersQuery","undefined","connectionsQuery","updateConnection","deleteConnection","updateWebhookConnection","deleteWebhookConnection","providers","data","providersMap","Map","map","provider","allConnections","connections","filter","connection","capabilities","includes","providerDisplayName","get","displayName","providerLabel","sortedConnections","sort","a","b","byProvider","localeCompare","createdAt","usageConnection","deleteConnectionTarget","setConnectionActive","active","body","lifecycle_status","mutateAsync","connectionId","success","error","Error","message","confirmDeleteConnection","div","className","isPending","isFetching","isError","onRetry","refetch","isMutating","onUse","onSetActive","onDelete","section","aria-label","variant","emptyMessage","onOpenProvider","size","aria-live","open","onOpenChange","onCreated","events","connectionName","onConfirm"],"mappings":"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"}

package/dist/components/integration-gallery.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-gallery.stories.d.ts","sourceRoot":"","sources":["../../src/components/integration-gallery.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AA0BrD,KAAK,QAAQ,GACT,OAAO,GACP,mBAAmB,GACnB,SAAS,GACT,mBAAmB,GACnB,iBAAiB,GACjB,cAAc,GACd,YAAY,CAAC;AAEjB,UAAU,4BAA4B;IACpC,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAWD,iBAAS,uBAAuB,CAAC,EAAC,QAAQ,EAAC,EAAE,4BAA4B,+BA0DxE;AAED,QAAA,MAAM,IAAI;;;;QAGK,MAAM;;;;;CAE2B,CAAC;eAElC,IAAI;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,EAAE,KAiBhD,CAAC"}
+{"version":3,"file":"integration-gallery.stories.d.ts","sourceRoot":"","sources":["../../src/components/integration-gallery.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AA0BrD,KAAK,QAAQ,GACT,OAAO,GACP,mBAAmB,GACnB,SAAS,GACT,mBAAmB,GACnB,iBAAiB,GACjB,cAAc,GACd,YAAY,CAAC;AAEjB,UAAU,4BAA4B;IACpC,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAWD,iBAAS,uBAAuB,CAAC,EAAC,QAAQ,EAAC,EAAE,4BAA4B,+BA0DxE;AAED,QAAA,MAAM,IAAI;;;;QAGK,MAAM;;;;;CAE2B,CAAC;eAElC,IAAI;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,EAAE,KAsBhD,CAAC"}

package/dist/components/integration-gallery.stories.js

@@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createMemoryHistory, createRootRoute, createRoute, createRouter, Outlet, RouterProvider } 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';
 const WORKSPACE_PATH = '/w/acme/settings/integrations';
@@ -198,7 +198,12 @@ export const UsageModalCloseRestoresInteraction = {
         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/dist/components/integration-gallery.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/integration-gallery.stories.tsx"],"sourcesContent":["import type {\n  IntegrationConnectionDto,\n  IntegrationProviderDto,\n} from '@shipfox/api-integration-core-dto';\nimport {configureApiClient} from '@shipfox/client-api';\nimport {authStateAtom} from '@shipfox/client-auth';\nimport {Toaster} from '@shipfox/react-ui/toast';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {QueryClient, QueryClientProvider} from '@tanstack/react-query';\nimport {\n  createMemoryHistory,\n  createRootRoute,\n  createRoute,\n  createRouter,\n  Outlet,\n  RouterProvider,\n} from '@tanstack/react-router';\nimport {createStore, Provider as JotaiProvider} from 'jotai';\nimport {useMemo} from 'react';\nimport {expect, screen, userEvent, within} from 'storybook/test';\nimport {IntegrationGallery} from './integration-gallery.js';\n\nconst WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';\nconst WORKSPACE_PATH = '/w/acme/settings/integrations';\nconst SETUP_PATHS = [\n  '/w/$workspaceSlug/integrations/github',\n  '/w/$workspaceSlug/integrations/sentry',\n  '/w/$workspaceSlug/integrations/linear',\n  '/w/$workspaceSlug/integrations/slack',\n  '/w/$workspaceSlug/integrations/gitea',\n  '/w/$workspaceSlug/settings/events',\n] as const;\n\ntype Scenario =\n  | 'mixed'\n  | 'empty-connections'\n  | 'loading'\n  | 'connections-error'\n  | 'providers-error'\n  | 'no-providers'\n  | 'long-names';\n\ninterface IntegrationGalleryStoryProps {\n  scenario: Scenario;\n}\n\nconst PROVIDERS: IntegrationProviderDto[] = [\n  {provider: 'github', display_name: 'GitHub', capabilities: ['source_control']},\n  {provider: 'sentry', display_name: 'Sentry', capabilities: []},\n  {provider: 'linear', display_name: 'Linear', capabilities: ['agent_tools']},\n  {provider: 'slack', display_name: 'Slack', capabilities: ['agent_tools']},\n  {provider: 'gitea', display_name: 'Gitea', capabilities: ['source_control']},\n  {provider: 'webhook', display_name: 'Webhook', capabilities: []},\n];\n\nfunction IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {\n  configureApiClient({\n    baseUrl: 'https://api.example.test',\n    fetchImpl: fetchForScenario(scenario),\n  });\n\n  const queryClient = useMemo(\n    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),\n    [],\n  );\n  const store = useMemo(() => {\n    const nextStore = createStore();\n    nextStore.set(authStateAtom, {\n      status: 'authenticated',\n      workspaces: [{id: WORKSPACE_ID, name: 'Acme', slug: 'acme', membershipId: 'membership-1'}],\n    });\n    return nextStore;\n  }, []);\n  const router = useMemo(() => {\n    const rootRoute = createRootRoute({component: Outlet});\n    const workspaceRoute = createRoute({\n      getParentRoute: () => rootRoute,\n      path: '/w/$workspaceSlug',\n      component: Outlet,\n    });\n    const galleryRoute = createRoute({\n      getParentRoute: () => workspaceRoute,\n      path: 'settings/integrations',\n      component: () => (\n        <div className=\"mx-auto w-full max-w-[760px] bg-background-subtle-base p-24\">\n          <IntegrationGallery workspaceId={WORKSPACE_ID} />\n        </div>\n      ),\n    });\n    const setupRoutes = SETUP_PATHS.map((path) =>\n      createRoute({\n        getParentRoute: () => workspaceRoute,\n        path: path.replace('/w/$workspaceSlug/', ''),\n        component: () => <div />,\n      }),\n    );\n\n    return createRouter({\n      history: createMemoryHistory({initialEntries: [WORKSPACE_PATH]}),\n      routeTree: rootRoute.addChildren([\n        workspaceRoute.addChildren([galleryRoute, ...setupRoutes]),\n      ]),\n    });\n  }, []);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <JotaiProvider store={store}>\n        <RouterProvider router={router} />\n        <Toaster />\n      </JotaiProvider>\n    </QueryClientProvider>\n  );\n}\n\nconst meta = {\n  title: 'Integrations/Gallery',\n  component: IntegrationGalleryStory,\n  parameters: {layout: 'fullscreen'},\n  args: {scenario: 'mixed'},\n} satisfies Meta<typeof IntegrationGalleryStory>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Playground: Story = {};\n\nexport const EmptyConnections: Story = {\n  args: {scenario: 'empty-connections'},\n};\n\nexport const Loading: Story = {\n  args: {scenario: 'loading'},\n};\n\nexport const ConnectionsError: Story = {\n  args: {scenario: 'connections-error'},\n};\n\nexport const ProvidersError: Story = {\n  args: {scenario: 'providers-error'},\n};\n\nexport const NoProvidersAvailable: Story = {\n  args: {scenario: 'no-providers'},\n};\n\nexport const LongNames: Story = {\n  args: {scenario: 'long-names'},\n};\n\nexport const UsageModalCloseRestoresInteraction: Story = {\n  play: async ({canvasElement}) => {\n    const user = userEvent.setup();\n    const canvas = within(canvasElement);\n    const actionsButton = await canvas.findByRole('button', {\n      name: 'Open acme-corp integration actions',\n    });\n\n    await user.click(actionsButton);\n    await user.click(await screen.findByRole('menuitem', {name: 'Use this integration'}));\n    await screen.findByRole('dialog', {name: 'Use acme-corp'});\n    await user.click(await screen.findByRole('button', {name: 'Done'}));\n    expect(screen.queryByRole('dialog', {name: 'Use acme-corp'})).not.toBeInTheDocument();\n    expect(document.body.style.pointerEvents).not.toBe('none');\n    await user.click(actionsButton);\n    await screen.findByRole('menuitem', {name: 'Use this integration'});\n  },\n};\n\nfunction fetchForScenario(scenario: Scenario): typeof fetch {\n  return (input, init) => {\n    const url = requestUrl(input);\n    const method = init?.method ?? 'GET';\n    if (scenario === 'loading') return new Promise<Response>(() => undefined);\n    if (url.pathname === '/integration-providers') {\n      if (scenario === 'providers-error') return Promise.resolve(errorResponse());\n      return Promise.resolve(\n        jsonResponse({providers: scenario === 'no-providers' ? [] : PROVIDERS}),\n      );\n    }\n    if (url.pathname.startsWith('/integration-connections/') && method === 'PATCH') {\n      return Promise.resolve(\n        jsonResponse({\n          ...connection(),\n          id: url.pathname.split('/').at(-1),\n          lifecycle_status: 'disabled',\n        }),\n      );\n    }\n    if (url.pathname.startsWith('/integration-connections/') && method === 'DELETE') {\n      return Promise.resolve(jsonResponse(undefined, {status: 204}));\n    }\n    if (url.pathname.startsWith('/integrations/webhook/connections/') && method === 'PATCH') {\n      return Promise.resolve(\n        jsonResponse({\n          id: url.pathname.split('/').at(-1),\n          workspace_id: WORKSPACE_ID,\n          name: 'Stripe production',\n          slug: 'stripe-prod',\n          lifecycle_status: 'disabled',\n          inbound_url: 'https://api.example.test/webhook/77777777-7777-4777-8777-777777777777',\n          created_at: '2026-04-12T00:00:00.000Z',\n          updated_at: '2026-04-12T00:00:00.000Z',\n        }),\n      );\n    }\n    if (url.pathname.startsWith('/integrations/webhook/connections/') && method === 'DELETE') {\n      return Promise.resolve(jsonResponse(undefined, {status: 204}));\n    }\n    if (url.pathname === '/integration-connections') {\n      if (scenario === 'connections-error') return Promise.resolve(errorResponse());\n      return Promise.resolve(jsonResponse({connections: connectionsForScenario(scenario)}));\n    }\n    if (url.pathname === '/integrations/webhook/connections') {\n      return Promise.resolve(\n        jsonResponse({\n          connections: [\n            {\n              id: '77777777-7777-4777-8777-777777777777',\n              workspace_id: WORKSPACE_ID,\n              name: 'Stripe production',\n              slug: 'stripe-prod',\n              lifecycle_status: 'active',\n              inbound_url: 'https://api.example.test/webhook/77777777-7777-4777-8777-777777777777',\n              created_at: '2026-04-12T00:00:00.000Z',\n              updated_at: '2026-04-12T00:00:00.000Z',\n            },\n          ],\n        }),\n      );\n    }\n    return Promise.resolve(jsonResponse({}, {status: 404}));\n  };\n}\n\nfunction connectionsForScenario(scenario: Scenario): IntegrationConnectionDto[] {\n  if (scenario === 'empty-connections' || scenario === 'no-providers') return [];\n  if (scenario === 'long-names') {\n    return [\n      connection({\n        display_name: 'acme-production-observability-and-source-control-organization',\n        lifecycle_status: 'active',\n      }),\n      connection({\n        id: '55555555-5555-4555-8555-555555555555',\n        provider: 'sentry',\n        display_name: 'sentry-team-with-a-very-long-connected-account-name',\n        lifecycle_status: 'error',\n      }),\n    ];\n  }\n  return [\n    connection({display_name: 'acme-corp', lifecycle_status: 'active'}),\n    connection({\n      id: '99999999-9999-4999-8999-999999999999',\n      provider: 'slack',\n      display_name: 'Slack Acme',\n      lifecycle_status: 'active',\n      capabilities: ['agent_tools'],\n      external_url: 'https://app.slack.com/client/T123',\n    }),\n    connection({\n      id: 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa',\n      provider: 'slack',\n      display_name: 'Slack disabled',\n      lifecycle_status: 'disabled',\n      capabilities: ['agent_tools'],\n      external_url: undefined,\n    }),\n    connection({\n      id: '88888888-8888-4888-8888-888888888888',\n      provider: 'linear',\n      display_name: 'linear-acme',\n      lifecycle_status: 'active',\n      external_url: 'https://linear.app/acme/settings',\n    }),\n    connection({\n      id: '55555555-5555-4555-8555-555555555555',\n      provider: 'linear',\n      display_name: 'linear-disabled',\n      lifecycle_status: 'disabled',\n      external_url: undefined,\n    }),\n    connection({\n      id: '66666666-6666-4666-8666-666666666666',\n      provider: 'linear',\n      display_name: 'linear-error',\n      lifecycle_status: 'error',\n      external_url: undefined,\n    }),\n    connection({\n      id: '77777777-7777-4777-8777-777777777777',\n      provider: 'webhook',\n      external_account_id: 'stripe-prod',\n      slug: 'stripe-prod',\n      display_name: 'Stripe production',\n      capabilities: [],\n      lifecycle_status: 'active',\n      external_url: undefined,\n      created_at: '2026-04-12T00:00:00.000Z',\n      updated_at: '2026-04-12T00:00:00.000Z',\n    }),\n  ];\n}\n\nfunction connection(overrides: Partial<IntegrationConnectionDto> = {}): IntegrationConnectionDto {\n  return {\n    id: '44444444-4444-4444-8444-444444444444',\n    workspace_id: WORKSPACE_ID,\n    provider: 'github',\n    external_account_id: 'installation-1',\n    slug: 'github_acme_corp',\n    display_name: 'acme-corp',\n    lifecycle_status: 'active',\n    capabilities: ['source_control'],\n    external_url: 'https://github.com/organizations/acme-corp/settings/installations/1',\n    created_at: '2026-03-12T00:00:00.000Z',\n    updated_at: '2026-03-12T00:00:00.000Z',\n    ...overrides,\n  };\n}\n\nfunction requestUrl(input: RequestInfo | URL): URL {\n  if (typeof input === 'string') return new URL(input);\n  if (input instanceof URL) return input;\n  return new URL(input.url);\n}\n\nfunction jsonResponse(body: unknown, init: ResponseInit = {}) {\n  return new Response(JSON.stringify(body), {\n    status: 200,\n    headers: {'content-type': 'application/json'},\n    ...init,\n  });\n}\n\nfunction errorResponse() {\n  return jsonResponse({code: 'server-error'}, {status: 500, statusText: 'Server error'});\n}\n"],"names":["configureApiClient","authStateAtom","Toaster","QueryClient","QueryClientProvider","createMemoryHistory","createRootRoute","createRoute","createRouter","Outlet","RouterProvider","createStore","Provider","JotaiProvider","useMemo","expect","screen","userEvent","within","IntegrationGallery","WORKSPACE_ID","WORKSPACE_PATH","SETUP_PATHS","PROVIDERS","provider","display_name","capabilities","IntegrationGalleryStory","scenario","baseUrl","fetchImpl","fetchForScenario","queryClient","defaultOptions","queries","retry","store","nextStore","set","status","workspaces","id","name","slug","membershipId","router","rootRoute","component","workspaceRoute","getParentRoute","path","galleryRoute","div","className","workspaceId","setupRoutes","map","replace","history","initialEntries","routeTree","addChildren","client","meta","title","parameters","layout","args","Playground","EmptyConnections","Loading","ConnectionsError","ProvidersError","NoProvidersAvailable","LongNames","UsageModalCloseRestoresInteraction","play","canvasElement","user","setup","canvas","actionsButton","findByRole","click","queryByRole","not","toBeInTheDocument","document","body","style","pointerEvents","toBe","input","init","url","requestUrl","method","Promise","undefined","pathname","resolve","errorResponse","jsonResponse","providers","startsWith","connection","split","at","lifecycle_status","workspace_id","inbound_url","created_at","updated_at","connections","connectionsForScenario","external_url","external_account_id","overrides","URL","Response","JSON","stringify","headers","code","statusText"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/integration-gallery.stories.tsx"],"sourcesContent":["import type {\n  IntegrationConnectionDto,\n  IntegrationProviderDto,\n} from '@shipfox/api-integration-core-dto';\nimport {configureApiClient} from '@shipfox/client-api';\nimport {authStateAtom} from '@shipfox/client-auth';\nimport {Toaster} from '@shipfox/react-ui/toast';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {QueryClient, QueryClientProvider} from '@tanstack/react-query';\nimport {\n  createMemoryHistory,\n  createRootRoute,\n  createRoute,\n  createRouter,\n  Outlet,\n  RouterProvider,\n} from '@tanstack/react-router';\nimport {createStore, Provider as JotaiProvider} from 'jotai';\nimport {useMemo} from 'react';\nimport {expect, screen, userEvent, waitFor, within} from 'storybook/test';\nimport {IntegrationGallery} from './integration-gallery.js';\n\nconst WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';\nconst WORKSPACE_PATH = '/w/acme/settings/integrations';\nconst SETUP_PATHS = [\n  '/w/$workspaceSlug/integrations/github',\n  '/w/$workspaceSlug/integrations/sentry',\n  '/w/$workspaceSlug/integrations/linear',\n  '/w/$workspaceSlug/integrations/slack',\n  '/w/$workspaceSlug/integrations/gitea',\n  '/w/$workspaceSlug/settings/events',\n] as const;\n\ntype Scenario =\n  | 'mixed'\n  | 'empty-connections'\n  | 'loading'\n  | 'connections-error'\n  | 'providers-error'\n  | 'no-providers'\n  | 'long-names';\n\ninterface IntegrationGalleryStoryProps {\n  scenario: Scenario;\n}\n\nconst PROVIDERS: IntegrationProviderDto[] = [\n  {provider: 'github', display_name: 'GitHub', capabilities: ['source_control']},\n  {provider: 'sentry', display_name: 'Sentry', capabilities: []},\n  {provider: 'linear', display_name: 'Linear', capabilities: ['agent_tools']},\n  {provider: 'slack', display_name: 'Slack', capabilities: ['agent_tools']},\n  {provider: 'gitea', display_name: 'Gitea', capabilities: ['source_control']},\n  {provider: 'webhook', display_name: 'Webhook', capabilities: []},\n];\n\nfunction IntegrationGalleryStory({scenario}: IntegrationGalleryStoryProps) {\n  configureApiClient({\n    baseUrl: 'https://api.example.test',\n    fetchImpl: fetchForScenario(scenario),\n  });\n\n  const queryClient = useMemo(\n    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),\n    [],\n  );\n  const store = useMemo(() => {\n    const nextStore = createStore();\n    nextStore.set(authStateAtom, {\n      status: 'authenticated',\n      workspaces: [{id: WORKSPACE_ID, name: 'Acme', slug: 'acme', membershipId: 'membership-1'}],\n    });\n    return nextStore;\n  }, []);\n  const router = useMemo(() => {\n    const rootRoute = createRootRoute({component: Outlet});\n    const workspaceRoute = createRoute({\n      getParentRoute: () => rootRoute,\n      path: '/w/$workspaceSlug',\n      component: Outlet,\n    });\n    const galleryRoute = createRoute({\n      getParentRoute: () => workspaceRoute,\n      path: 'settings/integrations',\n      component: () => (\n        <div className=\"mx-auto w-full max-w-[760px] bg-background-subtle-base p-24\">\n          <IntegrationGallery workspaceId={WORKSPACE_ID} />\n        </div>\n      ),\n    });\n    const setupRoutes = SETUP_PATHS.map((path) =>\n      createRoute({\n        getParentRoute: () => workspaceRoute,\n        path: path.replace('/w/$workspaceSlug/', ''),\n        component: () => <div />,\n      }),\n    );\n\n    return createRouter({\n      history: createMemoryHistory({initialEntries: [WORKSPACE_PATH]}),\n      routeTree: rootRoute.addChildren([\n        workspaceRoute.addChildren([galleryRoute, ...setupRoutes]),\n      ]),\n    });\n  }, []);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <JotaiProvider store={store}>\n        <RouterProvider router={router} />\n        <Toaster />\n      </JotaiProvider>\n    </QueryClientProvider>\n  );\n}\n\nconst meta = {\n  title: 'Integrations/Gallery',\n  component: IntegrationGalleryStory,\n  parameters: {layout: 'fullscreen'},\n  args: {scenario: 'mixed'},\n} satisfies Meta<typeof IntegrationGalleryStory>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Playground: Story = {};\n\nexport const EmptyConnections: Story = {\n  args: {scenario: 'empty-connections'},\n};\n\nexport const Loading: Story = {\n  args: {scenario: 'loading'},\n};\n\nexport const ConnectionsError: Story = {\n  args: {scenario: 'connections-error'},\n};\n\nexport const ProvidersError: Story = {\n  args: {scenario: 'providers-error'},\n};\n\nexport const NoProvidersAvailable: Story = {\n  args: {scenario: 'no-providers'},\n};\n\nexport const LongNames: Story = {\n  args: {scenario: 'long-names'},\n};\n\nexport const UsageModalCloseRestoresInteraction: Story = {\n  play: async ({canvasElement}) => {\n    const user = userEvent.setup();\n    const canvas = within(canvasElement);\n    const actionsButton = await canvas.findByRole('button', {\n      name: 'Open acme-corp integration actions',\n    });\n\n    await user.click(actionsButton);\n    await user.click(await screen.findByRole('menuitem', {name: 'Use this integration'}));\n    await screen.findByRole('dialog', {name: 'Use acme-corp'});\n    await user.click(await screen.findByRole('button', {name: 'Done'}));\n    expect(screen.queryByRole('dialog', {name: 'Use acme-corp'})).not.toBeInTheDocument();\n    // The dialog unmounts before its dismissable layer releases the body, so\n    // wait for the release rather than asserting it on the same tick: clicking\n    // while `pointer-events: none` is still set is swallowed silently.\n    await waitFor(() => {\n      expect(document.body.style.pointerEvents).not.toBe('none');\n    });\n    await user.click(actionsButton);\n    await screen.findByRole('menuitem', {name: 'Use this integration'});\n  },\n};\n\nfunction fetchForScenario(scenario: Scenario): typeof fetch {\n  return (input, init) => {\n    const url = requestUrl(input);\n    const method = init?.method ?? 'GET';\n    if (scenario === 'loading') return new Promise<Response>(() => undefined);\n    if (url.pathname === '/integration-providers') {\n      if (scenario === 'providers-error') return Promise.resolve(errorResponse());\n      return Promise.resolve(\n        jsonResponse({providers: scenario === 'no-providers' ? [] : PROVIDERS}),\n      );\n    }\n    if (url.pathname.startsWith('/integration-connections/') && method === 'PATCH') {\n      return Promise.resolve(\n        jsonResponse({\n          ...connection(),\n          id: url.pathname.split('/').at(-1),\n          lifecycle_status: 'disabled',\n        }),\n      );\n    }\n    if (url.pathname.startsWith('/integration-connections/') && method === 'DELETE') {\n      return Promise.resolve(jsonResponse(undefined, {status: 204}));\n    }\n    if (url.pathname.startsWith('/integrations/webhook/connections/') && method === 'PATCH') {\n      return Promise.resolve(\n        jsonResponse({\n          id: url.pathname.split('/').at(-1),\n          workspace_id: WORKSPACE_ID,\n          name: 'Stripe production',\n          slug: 'stripe-prod',\n          lifecycle_status: 'disabled',\n          inbound_url: 'https://api.example.test/webhook/77777777-7777-4777-8777-777777777777',\n          created_at: '2026-04-12T00:00:00.000Z',\n          updated_at: '2026-04-12T00:00:00.000Z',\n        }),\n      );\n    }\n    if (url.pathname.startsWith('/integrations/webhook/connections/') && method === 'DELETE') {\n      return Promise.resolve(jsonResponse(undefined, {status: 204}));\n    }\n    if (url.pathname === '/integration-connections') {\n      if (scenario === 'connections-error') return Promise.resolve(errorResponse());\n      return Promise.resolve(jsonResponse({connections: connectionsForScenario(scenario)}));\n    }\n    if (url.pathname === '/integrations/webhook/connections') {\n      return Promise.resolve(\n        jsonResponse({\n          connections: [\n            {\n              id: '77777777-7777-4777-8777-777777777777',\n              workspace_id: WORKSPACE_ID,\n              name: 'Stripe production',\n              slug: 'stripe-prod',\n              lifecycle_status: 'active',\n              inbound_url: 'https://api.example.test/webhook/77777777-7777-4777-8777-777777777777',\n              created_at: '2026-04-12T00:00:00.000Z',\n              updated_at: '2026-04-12T00:00:00.000Z',\n            },\n          ],\n        }),\n      );\n    }\n    return Promise.resolve(jsonResponse({}, {status: 404}));\n  };\n}\n\nfunction connectionsForScenario(scenario: Scenario): IntegrationConnectionDto[] {\n  if (scenario === 'empty-connections' || scenario === 'no-providers') return [];\n  if (scenario === 'long-names') {\n    return [\n      connection({\n        display_name: 'acme-production-observability-and-source-control-organization',\n        lifecycle_status: 'active',\n      }),\n      connection({\n        id: '55555555-5555-4555-8555-555555555555',\n        provider: 'sentry',\n        display_name: 'sentry-team-with-a-very-long-connected-account-name',\n        lifecycle_status: 'error',\n      }),\n    ];\n  }\n  return [\n    connection({display_name: 'acme-corp', lifecycle_status: 'active'}),\n    connection({\n      id: '99999999-9999-4999-8999-999999999999',\n      provider: 'slack',\n      display_name: 'Slack Acme',\n      lifecycle_status: 'active',\n      capabilities: ['agent_tools'],\n      external_url: 'https://app.slack.com/client/T123',\n    }),\n    connection({\n      id: 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa',\n      provider: 'slack',\n      display_name: 'Slack disabled',\n      lifecycle_status: 'disabled',\n      capabilities: ['agent_tools'],\n      external_url: undefined,\n    }),\n    connection({\n      id: '88888888-8888-4888-8888-888888888888',\n      provider: 'linear',\n      display_name: 'linear-acme',\n      lifecycle_status: 'active',\n      external_url: 'https://linear.app/acme/settings',\n    }),\n    connection({\n      id: '55555555-5555-4555-8555-555555555555',\n      provider: 'linear',\n      display_name: 'linear-disabled',\n      lifecycle_status: 'disabled',\n      external_url: undefined,\n    }),\n    connection({\n      id: '66666666-6666-4666-8666-666666666666',\n      provider: 'linear',\n      display_name: 'linear-error',\n      lifecycle_status: 'error',\n      external_url: undefined,\n    }),\n    connection({\n      id: '77777777-7777-4777-8777-777777777777',\n      provider: 'webhook',\n      external_account_id: 'stripe-prod',\n      slug: 'stripe-prod',\n      display_name: 'Stripe production',\n      capabilities: [],\n      lifecycle_status: 'active',\n      external_url: undefined,\n      created_at: '2026-04-12T00:00:00.000Z',\n      updated_at: '2026-04-12T00:00:00.000Z',\n    }),\n  ];\n}\n\nfunction connection(overrides: Partial<IntegrationConnectionDto> = {}): IntegrationConnectionDto {\n  return {\n    id: '44444444-4444-4444-8444-444444444444',\n    workspace_id: WORKSPACE_ID,\n    provider: 'github',\n    external_account_id: 'installation-1',\n    slug: 'github_acme_corp',\n    display_name: 'acme-corp',\n    lifecycle_status: 'active',\n    capabilities: ['source_control'],\n    external_url: 'https://github.com/organizations/acme-corp/settings/installations/1',\n    created_at: '2026-03-12T00:00:00.000Z',\n    updated_at: '2026-03-12T00:00:00.000Z',\n    ...overrides,\n  };\n}\n\nfunction requestUrl(input: RequestInfo | URL): URL {\n  if (typeof input === 'string') return new URL(input);\n  if (input instanceof URL) return input;\n  return new URL(input.url);\n}\n\nfunction jsonResponse(body: unknown, init: ResponseInit = {}) {\n  return new Response(JSON.stringify(body), {\n    status: 200,\n    headers: {'content-type': 'application/json'},\n    ...init,\n  });\n}\n\nfunction errorResponse() {\n  return jsonResponse({code: 'server-error'}, {status: 500, statusText: 'Server error'});\n}\n"],"names":["configureApiClient","authStateAtom","Toaster","QueryClient","QueryClientProvider","createMemoryHistory","createRootRoute","createRoute","createRouter","Outlet","RouterProvider","createStore","Provider","JotaiProvider","useMemo","expect","screen","userEvent","waitFor","within","IntegrationGallery","WORKSPACE_ID","WORKSPACE_PATH","SETUP_PATHS","PROVIDERS","provider","display_name","capabilities","IntegrationGalleryStory","scenario","baseUrl","fetchImpl","fetchForScenario","queryClient","defaultOptions","queries","retry","store","nextStore","set","status","workspaces","id","name","slug","membershipId","router","rootRoute","component","workspaceRoute","getParentRoute","path","galleryRoute","div","className","workspaceId","setupRoutes","map","replace","history","initialEntries","routeTree","addChildren","client","meta","title","parameters","layout","args","Playground","EmptyConnections","Loading","ConnectionsError","ProvidersError","NoProvidersAvailable","LongNames","UsageModalCloseRestoresInteraction","play","canvasElement","user","setup","canvas","actionsButton","findByRole","click","queryByRole","not","toBeInTheDocument","document","body","style","pointerEvents","toBe","input","init","url","requestUrl","method","Promise","undefined","pathname","resolve","errorResponse","jsonResponse","providers","startsWith","connection","split","at","lifecycle_status","workspace_id","inbound_url","created_at","updated_at","connections","connectionsForScenario","external_url","external_account_id","overrides","URL","Response","JSON","stringify","headers","code","statusText"],"mappings":"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"}

package/dist/components/provider-grid.d.ts

@@ -11,7 +11,5 @@ export interface ProviderGridProps {
     errorSubject?: string;
     onOpenProvider?: ((provider: string) => void) | undefined;
 }
-export declare const PROVIDER_GRID_CLASS = "grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1";
-export declare const PROVIDER_SURFACE_CLASS = "overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base";
 export declare function ProviderGrid({ workspaceSlug, providers, isPending, isFetching, error, onRetry, emptyMessage, loadingLabel, errorSubject, onOpenProvider, }: ProviderGridProps): import("react").JSX.Element;
 //# sourceMappingURL=provider-grid.d.ts.map

package/dist/components/provider-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider-grid.d.ts","sourceRoot":"","sources":["../../src/components/provider-grid.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,iBAAiB,CAAC;AAGzD,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC3D;AAED,eAAO,MAAM,mBAAmB,yDAAyD,CAAC;AAE1F,eAAO,MAAM,sBAAsB,2FACuD,CAAC;AAE3F,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,SAAS,EACT,SAAS,EACT,UAAkB,EAClB,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAkC,EAClC,YAAuC,EACvC,cAAc,GACf,EAAE,iBAAiB,+BA+CnB"}
+{"version":3,"file":"provider-grid.d.ts","sourceRoot":"","sources":["../../src/components/provider-grid.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,iBAAiB,CAAC;AAGzD,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC3D;AAED,wBAAgB,YAAY,CAAC,EAC3B,aAAa,EACb,SAAS,EACT,SAAS,EACT,UAAkB,EAClB,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAkC,EAClC,YAAuC,EACvC,cAAc,GACf,EAAE,iBAAiB,+BAoDnB"}

package/dist/components/provider-grid.js

@@ -1,24 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { PROVIDER_CATALOG } from '#provider-catalog.js';
-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, isPending, isFetching = false, error, onRetry, emptyMessage, loadingLabel = 'Loading providers', errorSubject = 'available integrations', onOpenProvider }) {
     const installableProviders = providers.filter((provider)=>PROVIDER_CATALOG[provider.provider]);
     if (isPending) return /*#__PURE__*/ _jsx(ProviderGridSkeleton, {
         label: loadingLabel
     });
     if (error) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: cn(PROVIDER_SURFACE_CLASS, 'px-row'),
+        return /*#__PURE__*/ _jsx(Panel, {
             children: /*#__PURE__*/ _jsx(QueryLoadError, {
                 query: {
                     isError: true,
@@ -27,130 +22,119 @@ export function ProviderGrid({ workspaceSlug, providers, isPending, isFetching =
                     error,
                     refetch: onRetry ?? (()=>undefined)
                 },
-                subject: errorSubject
+                subject: errorSubject,
+                variant: "panel"
             })
         });
     }
     if (installableProviders.length === 0) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: cn(PROVIDER_SURFACE_CLASS, 'px-row'),
+        return /*#__PURE__*/ _jsx(Panel, {
             children: /*#__PURE__*/ _jsx(EmptyState, {
                 icon: "componentLine",
                 title: "No integrations available",
-                description: emptyMessage
+                description: emptyMessage,
+                variant: "panel"
             })
         });
     }
-    return /*#__PURE__*/ _jsx("ul", {
-        className: PROVIDER_GRID_CLASS,
-        children: installableProviders.map((provider)=>/*#__PURE__*/ _jsx("li", {
-                children: /*#__PURE__*/ _jsx(ProviderCard, {
-                    provider: provider,
-                    workspaceSlug: workspaceSlug,
-                    onOpenProvider: onOpenProvider
-                })
-            }, provider.provider))
+    return /*#__PURE__*/ _jsx(Panel, {
+        children: /*#__PURE__*/ _jsx(PanelBody, {
+            children: /*#__PURE__*/ _jsx(PanelGrid, {
+                "aria-label": "Available integrations",
+                children: installableProviders.map((provider)=>/*#__PURE__*/ _jsx(ProviderCell, {
+                        provider: provider,
+                        workspaceSlug: workspaceSlug,
+                        onOpenProvider: onOpenProvider
+                    }, provider.provider))
+            })
+        })
     });
 }
-function ProviderCard({ provider, workspaceSlug, onOpenProvider }) {
+function ProviderCell({ provider, workspaceSlug, onOpenProvider }) {
     const catalog = PROVIDER_CATALOG[provider.provider];
     if (!catalog) return null;
     if (catalog.kind === 'modal-connect') {
-        return /*#__PURE__*/ _jsx("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",
-            children: /*#__PURE__*/ _jsx(ProviderCardContent, {
-                provider: provider,
-                action: "Add"
+        return /*#__PURE__*/ _jsx(PanelCell, {
+            children: /*#__PURE__*/ _jsx(PanelCellAction, {
+                action: "Add",
+                "aria-label": `Add ${provider.displayName}`,
+                onClick: ()=>onOpenProvider?.(provider.provider),
+                children: /*#__PURE__*/ _jsx(ProviderCellContent, {
+                    provider: provider
+                })
             })
         });
     }
-    return /*#__PURE__*/ _jsx(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",
-        children: /*#__PURE__*/ _jsx(ProviderCardContent, {
-            provider: provider,
-            action: "Install"
+    return /*#__PURE__*/ _jsx(PanelCell, {
+        children: /*#__PURE__*/ _jsx(PanelCellAction, {
+            asChild: true,
+            action: "Install",
+            children: /*#__PURE__*/ _jsx(Link, {
+                to: catalog.setupPath,
+                params: {
+                    workspaceSlug
+                },
+                "aria-label": `Install ${provider.displayName}`,
+                children: /*#__PURE__*/ _jsx(ProviderCellContent, {
+                    provider: provider
+                })
+            })
         })
     });
 }
-function ProviderCardContent({ provider, action }) {
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+function ProviderCellContent({ provider }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        className: "flex min-w-0 items-center gap-cluster",
         children: [
-            /*#__PURE__*/ _jsxs("span", {
-                className: "flex min-w-0 items-center gap-cluster",
-                children: [
-                    /*#__PURE__*/ _jsx(IntegrationIcon, {
-                        source: provider.provider,
-                        "aria-hidden": true,
-                        className: "size-24 shrink-0 text-foreground-neutral-base"
-                    }),
-                    /*#__PURE__*/ _jsx(Text, {
-                        as: "span",
-                        size: "md",
-                        bold: true,
-                        className: "truncate",
-                        children: provider.displayName
-                    })
-                ]
+            /*#__PURE__*/ _jsx(IntegrationIcon, {
+                source: provider.provider,
+                "aria-hidden": true,
+                className: "size-24 shrink-0 text-foreground-neutral-base"
             }),
-            /*#__PURE__*/ _jsxs("span", {
-                className: "flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive",
-                children: [
-                    /*#__PURE__*/ _jsx(Text, {
-                        as: "span",
-                        size: "sm",
-                        children: action
-                    }),
-                    /*#__PURE__*/ _jsx(Icon, {
-                        name: "chevronRight",
-                        className: "size-16"
-                    })
-                ]
+            /*#__PURE__*/ _jsx(Text, {
+                as: "span",
+                size: "md",
+                bold: true,
+                className: "truncate",
+                children: provider.displayName
             })
         ]
     });
 }
 function ProviderGridSkeleton({ label }) {
-    return /*#__PURE__*/ _jsx("ul", {
-        role: "status",
-        "aria-label": label,
-        className: PROVIDER_GRID_CLASS,
-        children: [
-            0,
-            1,
-            2,
-            3
-        ].map((tile)=>/*#__PURE__*/ _jsx("li", {
-                children: /*#__PURE__*/ _jsx(Panel, {
-                    className: "h-full p-panel-compact",
-                    children: /*#__PURE__*/ _jsxs("div", {
-                        className: "flex items-center justify-between gap-cluster",
-                        children: [
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "flex min-w-0 items-center gap-cluster",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Skeleton, {
-                                        className: "size-24 shrink-0"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Skeleton, {
-                                        className: "h-16 w-100"
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(Skeleton, {
-                                className: "h-16 w-64 shrink-0"
-                            })
-                        ]
-                    })
-                })
-            }, tile))
+    return /*#__PURE__*/ _jsx(Panel, {
+        children: /*#__PURE__*/ _jsx(PanelBody, {
+            children: /*#__PURE__*/ _jsx(PanelGrid, {
+                role: "status",
+                "aria-label": label,
+                children: [
+                    0,
+                    1,
+                    2,
+                    3
+                ].map((tile)=>/*#__PURE__*/ _jsx(PanelCell, {
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center justify-between gap-cluster px-row py-row",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex min-w-0 items-center gap-cluster",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "size-24 shrink-0"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-100"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-16 w-64 shrink-0"
+                                })
+                            ]
+                        })
+                    }, tile))
+            })
+        })
     });
 }
 

package/dist/components/provider-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/provider-grid.tsx"],"sourcesContent":["import {QueryLoadError} from '@shipfox/client-ui';\nimport {IntegrationIcon} from '@shipfox/integration-icons';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {Icon} from '@shipfox/react-ui/icon';\nimport {Panel} from '@shipfox/react-ui/panel';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {cn} from '@shipfox/react-ui/utils';\nimport {Link} from '@tanstack/react-router';\nimport type {IntegrationProvider} from '#core/models.js';\nimport {PROVIDER_CATALOG} from '#provider-catalog.js';\n\nexport interface ProviderGridProps {\n  workspaceSlug: string;\n  providers: IntegrationProvider[];\n  isPending: boolean;\n  isFetching?: boolean;\n  error?: Error | null | undefined;\n  onRetry?: () => void;\n  emptyMessage: string;\n  loadingLabel?: string;\n  errorSubject?: string;\n  onOpenProvider?: ((provider: string) => void) | undefined;\n}\n\nexport const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1';\n\nexport const PROVIDER_SURFACE_CLASS =\n  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';\n\nexport function ProviderGrid({\n  workspaceSlug,\n  providers,\n  isPending,\n  isFetching = false,\n  error,\n  onRetry,\n  emptyMessage,\n  loadingLabel = 'Loading providers',\n  errorSubject = 'available integrations',\n  onOpenProvider,\n}: ProviderGridProps) {\n  const installableProviders = providers.filter((provider) => PROVIDER_CATALOG[provider.provider]);\n\n  if (isPending) return <ProviderGridSkeleton label={loadingLabel} />;\n\n  if (error) {\n    return (\n      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>\n        <QueryLoadError\n          query={{\n            isError: true,\n            isFetching,\n            data: undefined,\n            error,\n            refetch: onRetry ?? (() => undefined),\n          }}\n          subject={errorSubject}\n        />\n      </div>\n    );\n  }\n\n  if (installableProviders.length === 0) {\n    return (\n      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>\n        <EmptyState\n          icon=\"componentLine\"\n          title=\"No integrations available\"\n          description={emptyMessage}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <ul className={PROVIDER_GRID_CLASS}>\n      {installableProviders.map((provider) => (\n        <li key={provider.provider}>\n          <ProviderCard\n            provider={provider}\n            workspaceSlug={workspaceSlug}\n            onOpenProvider={onOpenProvider}\n          />\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction ProviderCard({\n  provider,\n  workspaceSlug,\n  onOpenProvider,\n}: {\n  provider: IntegrationProvider;\n  workspaceSlug: string;\n  onOpenProvider?: ((provider: string) => void) | undefined;\n}) {\n  const catalog = PROVIDER_CATALOG[provider.provider];\n  if (!catalog) return null;\n\n  if (catalog.kind === 'modal-connect') {\n    return (\n      <button\n        type=\"button\"\n        aria-label={`Add ${provider.displayName}`}\n        onClick={() => onOpenProvider?.(provider.provider)}\n        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\"\n      >\n        <ProviderCardContent provider={provider} action=\"Add\" />\n      </button>\n    );\n  }\n\n  return (\n    <Link\n      to={catalog.setupPath}\n      params={{workspaceSlug}}\n      aria-label={`Install ${provider.displayName}`}\n      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\"\n    >\n      <ProviderCardContent provider={provider} action=\"Install\" />\n    </Link>\n  );\n}\n\nfunction ProviderCardContent({\n  provider,\n  action,\n}: {\n  provider: IntegrationProvider;\n  action: 'Add' | 'Install';\n}) {\n  return (\n    <>\n      <span className=\"flex min-w-0 items-center gap-cluster\">\n        <IntegrationIcon\n          source={provider.provider}\n          aria-hidden\n          className=\"size-24 shrink-0 text-foreground-neutral-base\"\n        />\n        <Text as=\"span\" size=\"md\" bold className=\"truncate\">\n          {provider.displayName}\n        </Text>\n      </span>\n      <span className=\"flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive\">\n        <Text as=\"span\" size=\"sm\">\n          {action}\n        </Text>\n        <Icon name=\"chevronRight\" className=\"size-16\" />\n      </span>\n    </>\n  );\n}\n\nfunction ProviderGridSkeleton({label}: {label: string}) {\n  return (\n    <ul role=\"status\" aria-label={label} className={PROVIDER_GRID_CLASS}>\n      {[0, 1, 2, 3].map((tile) => (\n        <li key={tile}>\n          <Panel className=\"h-full p-panel-compact\">\n            <div className=\"flex items-center justify-between gap-cluster\">\n              <div className=\"flex min-w-0 items-center gap-cluster\">\n                <Skeleton className=\"size-24 shrink-0\" />\n                <Skeleton className=\"h-16 w-100\" />\n              </div>\n              <Skeleton className=\"h-16 w-64 shrink-0\" />\n            </div>\n          </Panel>\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":["QueryLoadError","IntegrationIcon","EmptyState","Icon","Panel","Skeleton","Text","cn","Link","PROVIDER_CATALOG","PROVIDER_GRID_CLASS","PROVIDER_SURFACE_CLASS","ProviderGrid","workspaceSlug","providers","isPending","isFetching","error","onRetry","emptyMessage","loadingLabel","errorSubject","onOpenProvider","installableProviders","filter","provider","ProviderGridSkeleton","label","div","className","query","isError","data","undefined","refetch","subject","length","icon","title","description","ul","map","li","ProviderCard","catalog","kind","button","type","aria-label","displayName","onClick","ProviderCardContent","action","to","setupPath","params","span","source","aria-hidden","as","size","bold","name","role","tile"],"mappings":";AAAA,SAAQA,cAAc,QAAO,qBAAqB;AAClD,SAAQC,eAAe,QAAO,6BAA6B;AAC3D,SAAQC,UAAU,QAAO,gCAAgC;AACzD,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,KAAK,QAAO,0BAA0B;AAC9C,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,IAAI,QAAO,+BAA+B;AAClD,SAAQC,EAAE,QAAO,0BAA0B;AAC3C,SAAQC,IAAI,QAAO,yBAAyB;AAE5C,SAAQC,gBAAgB,QAAO,uBAAuB;AAetD,OAAO,MAAMC,sBAAsB,uDAAuD;AAE1F,OAAO,MAAMC,yBACX,yFAAyF;AAE3F,OAAO,SAASC,aAAa,EAC3BC,aAAa,EACbC,SAAS,EACTC,SAAS,EACTC,aAAa,KAAK,EAClBC,KAAK,EACLC,OAAO,EACPC,YAAY,EACZC,eAAe,mBAAmB,EAClCC,eAAe,wBAAwB,EACvCC,cAAc,EACI;IAClB,MAAMC,uBAAuBT,UAAUU,MAAM,CAAC,CAACC,WAAahB,gBAAgB,CAACgB,SAASA,QAAQ,CAAC;IAE/F,IAAIV,WAAW,qBAAO,KAACW;QAAqBC,OAAOP;;IAEnD,IAAIH,OAAO;QACT,qBACE,KAACW;YAAIC,WAAWtB,GAAGI,wBAAwB;sBACzC,cAAA,KAACX;gBACC8B,OAAO;oBACLC,SAAS;oBACTf;oBACAgB,MAAMC;oBACNhB;oBACAiB,SAAShB,WAAY,CAAA,IAAMe,SAAQ;gBACrC;gBACAE,SAASd;;;IAIjB;IAEA,IAAIE,qBAAqBa,MAAM,KAAK,GAAG;QACrC,qBACE,KAACR;YAAIC,WAAWtB,GAAGI,wBAAwB;sBACzC,cAAA,KAACT;gBACCmC,MAAK;gBACLC,OAAM;gBACNC,aAAapB;;;IAIrB;IAEA,qBACE,KAACqB;QAAGX,WAAWnB;kBACZa,qBAAqBkB,GAAG,CAAC,CAAChB,yBACzB,KAACiB;0BACC,cAAA,KAACC;oBACClB,UAAUA;oBACVZ,eAAeA;oBACfS,gBAAgBA;;eAJXG,SAASA,QAAQ;;AAUlC;AAEA,SAASkB,aAAa,EACpBlB,QAAQ,EACRZ,aAAa,EACbS,cAAc,EAKf;IACC,MAAMsB,UAAUnC,gBAAgB,CAACgB,SAASA,QAAQ,CAAC;IACnD,IAAI,CAACmB,SAAS,OAAO;IAErB,IAAIA,QAAQC,IAAI,KAAK,iBAAiB;QACpC,qBACE,KAACC;YACCC,MAAK;YACLC,cAAY,CAAC,IAAI,EAAEvB,SAASwB,WAAW,EAAE;YACzCC,SAAS,IAAM5B,iBAAiBG,SAASA,QAAQ;YACjDI,WAAU;sBAEV,cAAA,KAACsB;gBAAoB1B,UAAUA;gBAAU2B,QAAO;;;IAGtD;IAEA,qBACE,KAAC5C;QACC6C,IAAIT,QAAQU,SAAS;QACrBC,QAAQ;YAAC1C;QAAa;QACtBmC,cAAY,CAAC,QAAQ,EAAEvB,SAASwB,WAAW,EAAE;QAC7CpB,WAAU;kBAEV,cAAA,KAACsB;YAAoB1B,UAAUA;YAAU2B,QAAO;;;AAGtD;AAEA,SAASD,oBAAoB,EAC3B1B,QAAQ,EACR2B,MAAM,EAIP;IACC,qBACE;;0BACE,MAACI;gBAAK3B,WAAU;;kCACd,KAAC5B;wBACCwD,QAAQhC,SAASA,QAAQ;wBACzBiC,aAAW;wBACX7B,WAAU;;kCAEZ,KAACvB;wBAAKqD,IAAG;wBAAOC,MAAK;wBAAKC,IAAI;wBAAChC,WAAU;kCACtCJ,SAASwB,WAAW;;;;0BAGzB,MAACO;gBAAK3B,WAAU;;kCACd,KAACvB;wBAAKqD,IAAG;wBAAOC,MAAK;kCAClBR;;kCAEH,KAACjD;wBAAK2D,MAAK;wBAAejC,WAAU;;;;;;AAI5C;AAEA,SAASH,qBAAqB,EAACC,KAAK,EAAkB;IACpD,qBACE,KAACa;QAAGuB,MAAK;QAASf,cAAYrB;QAAOE,WAAWnB;kBAC7C;YAAC;YAAG;YAAG;YAAG;SAAE,CAAC+B,GAAG,CAAC,CAACuB,qBACjB,KAACtB;0BACC,cAAA,KAACtC;oBAAMyB,WAAU;8BACf,cAAA,MAACD;wBAAIC,WAAU;;0CACb,MAACD;gCAAIC,WAAU;;kDACb,KAACxB;wCAASwB,WAAU;;kDACpB,KAACxB;wCAASwB,WAAU;;;;0CAEtB,KAACxB;gCAASwB,WAAU;;;;;eAPjBmC;;AAcjB"}
+{"version":3,"sources":["../../src/components/provider-grid.tsx"],"sourcesContent":["import {QueryLoadError} from '@shipfox/client-ui';\nimport {IntegrationIcon} from '@shipfox/integration-icons';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {Panel, PanelBody, PanelCell, PanelCellAction, PanelGrid} from '@shipfox/react-ui/panel';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {Link} from '@tanstack/react-router';\nimport type {IntegrationProvider} from '#core/models.js';\nimport {PROVIDER_CATALOG} from '#provider-catalog.js';\n\nexport interface ProviderGridProps {\n  workspaceSlug: string;\n  providers: IntegrationProvider[];\n  isPending: boolean;\n  isFetching?: boolean;\n  error?: Error | null | undefined;\n  onRetry?: () => void;\n  emptyMessage: string;\n  loadingLabel?: string;\n  errorSubject?: string;\n  onOpenProvider?: ((provider: string) => void) | undefined;\n}\n\nexport function ProviderGrid({\n  workspaceSlug,\n  providers,\n  isPending,\n  isFetching = false,\n  error,\n  onRetry,\n  emptyMessage,\n  loadingLabel = 'Loading providers',\n  errorSubject = 'available integrations',\n  onOpenProvider,\n}: ProviderGridProps) {\n  const installableProviders = providers.filter((provider) => PROVIDER_CATALOG[provider.provider]);\n\n  if (isPending) return <ProviderGridSkeleton label={loadingLabel} />;\n\n  if (error) {\n    return (\n      <Panel>\n        <QueryLoadError\n          query={{\n            isError: true,\n            isFetching,\n            data: undefined,\n            error,\n            refetch: onRetry ?? (() => undefined),\n          }}\n          subject={errorSubject}\n          variant=\"panel\"\n        />\n      </Panel>\n    );\n  }\n\n  if (installableProviders.length === 0) {\n    return (\n      <Panel>\n        <EmptyState\n          icon=\"componentLine\"\n          title=\"No integrations available\"\n          description={emptyMessage}\n          variant=\"panel\"\n        />\n      </Panel>\n    );\n  }\n\n  return (\n    <Panel>\n      <PanelBody>\n        <PanelGrid aria-label=\"Available integrations\">\n          {installableProviders.map((provider) => (\n            <ProviderCell\n              key={provider.provider}\n              provider={provider}\n              workspaceSlug={workspaceSlug}\n              onOpenProvider={onOpenProvider}\n            />\n          ))}\n        </PanelGrid>\n      </PanelBody>\n    </Panel>\n  );\n}\n\nfunction ProviderCell({\n  provider,\n  workspaceSlug,\n  onOpenProvider,\n}: {\n  provider: IntegrationProvider;\n  workspaceSlug: string;\n  onOpenProvider?: ((provider: string) => void) | undefined;\n}) {\n  const catalog = PROVIDER_CATALOG[provider.provider];\n  if (!catalog) return null;\n\n  if (catalog.kind === 'modal-connect') {\n    return (\n      <PanelCell>\n        <PanelCellAction\n          action=\"Add\"\n          aria-label={`Add ${provider.displayName}`}\n          onClick={() => onOpenProvider?.(provider.provider)}\n        >\n          <ProviderCellContent provider={provider} />\n        </PanelCellAction>\n      </PanelCell>\n    );\n  }\n\n  return (\n    <PanelCell>\n      <PanelCellAction asChild action=\"Install\">\n        <Link\n          to={catalog.setupPath}\n          params={{workspaceSlug}}\n          aria-label={`Install ${provider.displayName}`}\n        >\n          <ProviderCellContent provider={provider} />\n        </Link>\n      </PanelCellAction>\n    </PanelCell>\n  );\n}\n\nfunction ProviderCellContent({provider}: {provider: IntegrationProvider}) {\n  return (\n    <span className=\"flex min-w-0 items-center gap-cluster\">\n      <IntegrationIcon\n        source={provider.provider}\n        aria-hidden\n        className=\"size-24 shrink-0 text-foreground-neutral-base\"\n      />\n      <Text as=\"span\" size=\"md\" bold className=\"truncate\">\n        {provider.displayName}\n      </Text>\n    </span>\n  );\n}\n\nfunction ProviderGridSkeleton({label}: {label: string}) {\n  return (\n    <Panel>\n      <PanelBody>\n        <PanelGrid role=\"status\" aria-label={label}>\n          {[0, 1, 2, 3].map((tile) => (\n            <PanelCell key={tile}>\n              <div className=\"flex items-center justify-between gap-cluster px-row py-row\">\n                <div className=\"flex min-w-0 items-center gap-cluster\">\n                  <Skeleton className=\"size-24 shrink-0\" />\n                  <Skeleton className=\"h-16 w-100\" />\n                </div>\n                <Skeleton className=\"h-16 w-64 shrink-0\" />\n              </div>\n            </PanelCell>\n          ))}\n        </PanelGrid>\n      </PanelBody>\n    </Panel>\n  );\n}\n"],"names":["QueryLoadError","IntegrationIcon","EmptyState","Panel","PanelBody","PanelCell","PanelCellAction","PanelGrid","Skeleton","Text","Link","PROVIDER_CATALOG","ProviderGrid","workspaceSlug","providers","isPending","isFetching","error","onRetry","emptyMessage","loadingLabel","errorSubject","onOpenProvider","installableProviders","filter","provider","ProviderGridSkeleton","label","query","isError","data","undefined","refetch","subject","variant","length","icon","title","description","aria-label","map","ProviderCell","catalog","kind","action","displayName","onClick","ProviderCellContent","asChild","to","setupPath","params","span","className","source","aria-hidden","as","size","bold","role","tile","div"],"mappings":"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"}

package/dist/components/redirect-install-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"redirect-install-page.d.ts","sourceRoot":"","sources":["../../src/components/redirect-install-page.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAErD,UAAU,wBAAwB;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE;QAAC,YAAY,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3E,oBAAoB,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,cAAc,EACd,oBAAoB,EACpB,YAAsC,EACtC,cAAc,EACd,cAAqD,GACtD,EAAE,wBAAwB,+BAwC1B"}
+{"version":3,"file":"redirect-install-page.d.ts","sourceRoot":"","sources":["../../src/components/redirect-install-page.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAErD,UAAU,wBAAwB;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE;QAAC,YAAY,EAAE,MAAM,CAAA;KAAC,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3E,oBAAoB,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,uEAAuE;IACvE,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,cAAc,EACd,oBAAoB,EACpB,YAAsC,EACtC,cAAc,EACd,cAAqD,GACtD,EAAE,wBAAwB,+BAwC1B"}

package/dist/components/redirect-install-page.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
@@ -36,8 +37,8 @@ export function RedirectInstallPage({ installRequest, errorFallbackMessage, load
         assignLocation
     ]);
     if (errorMessage) {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "mx-auto flex w-full max-w-[480px] flex-col gap-group",
+        return /*#__PURE__*/ _jsxs(FocusedFrame, {
+            className: "flex flex-col gap-group",
             children: [
                 /*#__PURE__*/ _jsx(Callout, {
                     role: "alert",

package/dist/components/redirect-install-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/redirect-install-page.tsx"],"sourcesContent":["import {ApiError} from '@shipfox/client-api';\nimport {useActiveWorkspace} from '@shipfox/client-auth';\nimport {ButtonLink} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {FullPageLoader} from '@shipfox/react-ui/loader';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {Link} from '@tanstack/react-router';\nimport {useEffect, useRef, useState} from 'react';\nimport type {InstallRedirect} from '#core/models.js';\n\ninterface RedirectInstallPageProps {\n  installRequest: (body: {workspace_id: string}) => Promise<InstallRedirect>;\n  errorFallbackMessage: string;\n  loadingLabel?: string;\n  /**\n   * Runs before leaving the app (e.g. to persist the workspace id for a\n   * state-less provider callback. It must not throw. A failed side effect\n   * should never block the redirect.\n   */\n  beforeRedirect?: (workspaceId: string) => void;\n  /** Injectable for tests: jsdom's window.location cannot be stubbed. */\n  assignLocation?: (url: string) => void;\n}\n\nexport function RedirectInstallPage({\n  installRequest,\n  errorFallbackMessage,\n  loadingLabel = 'Starting installation',\n  beforeRedirect,\n  assignLocation = (url) => window.location.assign(url),\n}: RedirectInstallPageProps) {\n  const workspace = useActiveWorkspace();\n  const startedRef = useRef(false);\n  const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n  useEffect(() => {\n    if (startedRef.current) return;\n    startedRef.current = true;\n    // The side effect is best-effort persistence; a throw here must never\n    // block the install redirect, so swallow it and continue.\n    try {\n      beforeRedirect?.(workspace.id);\n    } catch {\n      // ignore\n    }\n    installRequest({workspace_id: workspace.id})\n      .then((response) => {\n        assignLocation(response.installUrl);\n      })\n      .catch((error: unknown) => {\n        setErrorMessage(error instanceof ApiError ? error.message : errorFallbackMessage);\n      });\n  }, [workspace, installRequest, beforeRedirect, errorFallbackMessage, assignLocation]);\n\n  if (errorMessage) {\n    return (\n      <div className=\"mx-auto flex w-full max-w-[480px] flex-col gap-group\">\n        <Callout role=\"alert\" type=\"error\">\n          <Text size=\"sm\">{errorMessage}</Text>\n        </Callout>\n        <ButtonLink asChild variant=\"muted\" className=\"w-fit\">\n          <Link to=\"/w/$workspaceSlug/integrations\" params={{workspaceSlug: workspace.slug}}>\n            Back to integrations\n          </Link>\n        </ButtonLink>\n      </div>\n    );\n  }\n\n  return <FullPageLoader aria-label={loadingLabel} />;\n}\n"],"names":["ApiError","useActiveWorkspace","ButtonLink","Callout","FullPageLoader","Text","Link","useEffect","useRef","useState","RedirectInstallPage","installRequest","errorFallbackMessage","loadingLabel","beforeRedirect","assignLocation","url","window","location","assign","workspace","startedRef","errorMessage","setErrorMessage","current","id","workspace_id","then","response","installUrl","catch","error","message","div","className","role","type","size","asChild","variant","to","params","workspaceSlug","slug","aria-label"],"mappings":";AAAA,SAAQA,QAAQ,QAAO,sBAAsB;AAC7C,SAAQC,kBAAkB,QAAO,uBAAuB;AACxD,SAAQC,UAAU,QAAO,2BAA2B;AACpD,SAAQC,OAAO,QAAO,4BAA4B;AAClD,SAAQC,cAAc,QAAO,2BAA2B;AACxD,SAAQC,IAAI,QAAO,+BAA+B;AAClD,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAiBlD,OAAO,SAASC,oBAAoB,EAClCC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,uBAAuB,EACtCC,cAAc,EACdC,iBAAiB,CAACC,MAAQC,OAAOC,QAAQ,CAACC,MAAM,CAACH,IAAI,EAC5B;IACzB,MAAMI,YAAYnB;IAClB,MAAMoB,aAAab,OAAO;IAC1B,MAAM,CAACc,cAAcC,gBAAgB,GAAGd;IAExCF,UAAU;QACR,IAAIc,WAAWG,OAAO,EAAE;QACxBH,WAAWG,OAAO,GAAG;QACrB,sEAAsE;QACtE,0DAA0D;QAC1D,IAAI;YACFV,iBAAiBM,UAAUK,EAAE;QAC/B,EAAE,OAAM;QACN,SAAS;QACX;QACAd,eAAe;YAACe,cAAcN,UAAUK,EAAE;QAAA,GACvCE,IAAI,CAAC,CAACC;YACLb,eAAea,SAASC,UAAU;QACpC,GACCC,KAAK,CAAC,CAACC;YACNR,gBAAgBQ,iBAAiB/B,WAAW+B,MAAMC,OAAO,GAAGpB;QAC9D;IACJ,GAAG;QAACQ;QAAWT;QAAgBG;QAAgBF;QAAsBG;KAAe;IAEpF,IAAIO,cAAc;QAChB,qBACE,MAACW;YAAIC,WAAU;;8BACb,KAAC/B;oBAAQgC,MAAK;oBAAQC,MAAK;8BACzB,cAAA,KAAC/B;wBAAKgC,MAAK;kCAAMf;;;8BAEnB,KAACpB;oBAAWoC,OAAO;oBAACC,SAAQ;oBAAQL,WAAU;8BAC5C,cAAA,KAAC5B;wBAAKkC,IAAG;wBAAiCC,QAAQ;4BAACC,eAAetB,UAAUuB,IAAI;wBAAA;kCAAG;;;;;IAM3F;IAEA,qBAAO,KAACvC;QAAewC,cAAY/B;;AACrC"}
+{"version":3,"sources":["../../src/components/redirect-install-page.tsx"],"sourcesContent":["import {ApiError} from '@shipfox/client-api';\nimport {useActiveWorkspace} from '@shipfox/client-auth';\nimport {FocusedFrame} from '@shipfox/client-shell/runtime';\nimport {ButtonLink} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {FullPageLoader} from '@shipfox/react-ui/loader';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {Link} from '@tanstack/react-router';\nimport {useEffect, useRef, useState} from 'react';\nimport type {InstallRedirect} from '#core/models.js';\n\ninterface RedirectInstallPageProps {\n  installRequest: (body: {workspace_id: string}) => Promise<InstallRedirect>;\n  errorFallbackMessage: string;\n  loadingLabel?: string;\n  /**\n   * Runs before leaving the app (e.g. to persist the workspace id for a\n   * state-less provider callback. It must not throw. A failed side effect\n   * should never block the redirect.\n   */\n  beforeRedirect?: (workspaceId: string) => void;\n  /** Injectable for tests: jsdom's window.location cannot be stubbed. */\n  assignLocation?: (url: string) => void;\n}\n\nexport function RedirectInstallPage({\n  installRequest,\n  errorFallbackMessage,\n  loadingLabel = 'Starting installation',\n  beforeRedirect,\n  assignLocation = (url) => window.location.assign(url),\n}: RedirectInstallPageProps) {\n  const workspace = useActiveWorkspace();\n  const startedRef = useRef(false);\n  const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n  useEffect(() => {\n    if (startedRef.current) return;\n    startedRef.current = true;\n    // The side effect is best-effort persistence; a throw here must never\n    // block the install redirect, so swallow it and continue.\n    try {\n      beforeRedirect?.(workspace.id);\n    } catch {\n      // ignore\n    }\n    installRequest({workspace_id: workspace.id})\n      .then((response) => {\n        assignLocation(response.installUrl);\n      })\n      .catch((error: unknown) => {\n        setErrorMessage(error instanceof ApiError ? error.message : errorFallbackMessage);\n      });\n  }, [workspace, installRequest, beforeRedirect, errorFallbackMessage, assignLocation]);\n\n  if (errorMessage) {\n    return (\n      <FocusedFrame className=\"flex flex-col gap-group\">\n        <Callout role=\"alert\" type=\"error\">\n          <Text size=\"sm\">{errorMessage}</Text>\n        </Callout>\n        <ButtonLink asChild variant=\"muted\" className=\"w-fit\">\n          <Link to=\"/w/$workspaceSlug/integrations\" params={{workspaceSlug: workspace.slug}}>\n            Back to integrations\n          </Link>\n        </ButtonLink>\n      </FocusedFrame>\n    );\n  }\n\n  return <FullPageLoader aria-label={loadingLabel} />;\n}\n"],"names":["ApiError","useActiveWorkspace","FocusedFrame","ButtonLink","Callout","FullPageLoader","Text","Link","useEffect","useRef","useState","RedirectInstallPage","installRequest","errorFallbackMessage","loadingLabel","beforeRedirect","assignLocation","url","window","location","assign","workspace","startedRef","errorMessage","setErrorMessage","current","id","workspace_id","then","response","installUrl","catch","error","message","className","role","type","size","asChild","variant","to","params","workspaceSlug","slug","aria-label"],"mappings":";AAAA,SAAQA,QAAQ,QAAO,sBAAsB;AAC7C,SAAQC,kBAAkB,QAAO,uBAAuB;AACxD,SAAQC,YAAY,QAAO,gCAAgC;AAC3D,SAAQC,UAAU,QAAO,2BAA2B;AACpD,SAAQC,OAAO,QAAO,4BAA4B;AAClD,SAAQC,cAAc,QAAO,2BAA2B;AACxD,SAAQC,IAAI,QAAO,+BAA+B;AAClD,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAiBlD,OAAO,SAASC,oBAAoB,EAClCC,cAAc,EACdC,oBAAoB,EACpBC,eAAe,uBAAuB,EACtCC,cAAc,EACdC,iBAAiB,CAACC,MAAQC,OAAOC,QAAQ,CAACC,MAAM,CAACH,IAAI,EAC5B;IACzB,MAAMI,YAAYpB;IAClB,MAAMqB,aAAab,OAAO;IAC1B,MAAM,CAACc,cAAcC,gBAAgB,GAAGd;IAExCF,UAAU;QACR,IAAIc,WAAWG,OAAO,EAAE;QACxBH,WAAWG,OAAO,GAAG;QACrB,sEAAsE;QACtE,0DAA0D;QAC1D,IAAI;YACFV,iBAAiBM,UAAUK,EAAE;QAC/B,EAAE,OAAM;QACN,SAAS;QACX;QACAd,eAAe;YAACe,cAAcN,UAAUK,EAAE;QAAA,GACvCE,IAAI,CAAC,CAACC;YACLb,eAAea,SAASC,UAAU;QACpC,GACCC,KAAK,CAAC,CAACC;YACNR,gBAAgBQ,iBAAiBhC,WAAWgC,MAAMC,OAAO,GAAGpB;QAC9D;IACJ,GAAG;QAACQ;QAAWT;QAAgBG;QAAgBF;QAAsBG;KAAe;IAEpF,IAAIO,cAAc;QAChB,qBACE,MAACrB;YAAagC,WAAU;;8BACtB,KAAC9B;oBAAQ+B,MAAK;oBAAQC,MAAK;8BACzB,cAAA,KAAC9B;wBAAK+B,MAAK;kCAAMd;;;8BAEnB,KAACpB;oBAAWmC,OAAO;oBAACC,SAAQ;oBAAQL,WAAU;8BAC5C,cAAA,KAAC3B;wBAAKiC,IAAG;wBAAiCC,QAAQ;4BAACC,eAAerB,UAAUsB,IAAI;wBAAA;kCAAG;;;;;IAM3F;IAEA,qBAAO,KAACtC;QAAeuC,cAAY9B;;AACrC"}