@shipfox/client-runners 17.0.1 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-runners",
   "license": "MIT",
-  "version": "17.0.1",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,11 +27,11 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-runners-dto": "12.4.0",
+    "@shipfox/api-runners-dto": "13.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "17.0.0",
-    "@shipfox/client-ui": "17.0.0",
-    "@shipfox/react-ui": "1.2.0"
+    "@shipfox/client-shell": "22.0.0",
+    "@shipfox/client-ui": "22.0.0",
+    "@shipfox/react-ui": "2.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/manual-registration-token-list.tsx

@@ -15,6 +15,7 @@ import {
   ModalHeader,
   ModalTitle,
 } from '@shipfox/react-ui/modal';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {
   Table,
@@ -44,7 +45,7 @@ export function ManualRegistrationTokenList({
   tokens: ManualRegistrationToken[];
 }) {
   return (
-    <>
+    <Panel>
       <div className="max-[760px]:hidden">
         <Table className="table-fixed">
           <TableHeader>
@@ -82,14 +83,11 @@ export function ManualRegistrationTokenList({
         </Table>
       </div>
       <ul
-        className="hidden flex-col gap-inline max-[760px]:flex"
+        className="hidden flex-col divide-y divide-border-neutral-base max-[760px]:flex"
         aria-label="Manual registration tokens"
       >
         {tokens.map((token) => (
-          <li
-            key={token.id}
-            className="flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact"
-          >
+          <li key={token.id} className="flex flex-col gap-cluster p-panel-compact">
             <div className="flex items-start justify-between gap-cluster">
               <div className="min-w-0 flex-1">
                 <TokenName name={tokenDisplayName(token)} />
@@ -116,7 +114,7 @@ export function ManualRegistrationTokenList({
           </li>
         ))}
       </ul>
-    </>
+    </Panel>
   );
 }
 
@@ -218,20 +216,17 @@ export function EmptyManualRegistrationTokens() {
       icon="key2Line"
       title="No usable manual registration tokens"
       description="Create a token to connect a runner to this workspace."
+      variant="panel"
     />
   );
 }
 
 export function ManualRegistrationTokenTableSkeleton() {
   return (
-    <div
-      role="status"
-      aria-label="Loading manual registration tokens"
-      className="flex flex-col gap-inline"
-    >
+    <Panel role="status" aria-label="Loading manual registration tokens" className="divide-y">
       {[0, 1, 2].map((row) => (
-        <Skeleton key={row} className="h-44 w-full" />
+        <Skeleton key={row} className="h-44 w-full rounded-none" />
       ))}
-    </div>
+    </Panel>
   );
 }

package/src/components/manual-registration-tokens-settings-section.tsx

@@ -9,6 +9,7 @@ import {
   ModalTitle,
   ModalTrigger,
 } from '@shipfox/react-ui/modal';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useState} from 'react';
 import type {CreatedManualRegistrationToken} from '#core/token.js';
@@ -92,11 +93,19 @@ export function WorkspaceManualRegistrationTokensSettingsSection({
         {tokensQuery.isPending ? <ManualRegistrationTokenTableSkeleton /> : null}
 
         {tokensQuery.isError && tokensQuery.data === undefined ? (
-          <QueryLoadError query={tokensQuery} subject="manual registration tokens" />
+          <Panel>
+            <QueryLoadError
+              query={tokensQuery}
+              subject="manual registration tokens"
+              variant="panel"
+            />
+          </Panel>
         ) : null}
 
         {tokensQuery.data !== undefined && tokens.length === 0 ? (
-          <EmptyManualRegistrationTokens />
+          <Panel>
+            <EmptyManualRegistrationTokens />
+          </Panel>
         ) : null}
 
         {tokens.length > 0 ? (

package/src/components/provisioner-token-list.tsx

@@ -16,6 +16,7 @@ import {
   ModalHeader,
   ModalTitle,
 } from '@shipfox/react-ui/modal';
+import {Panel} from '@shipfox/react-ui/panel';
 import {RelativeTime} from '@shipfox/react-ui/relative-time';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {
@@ -52,7 +53,7 @@ export function ProvisionerTokenList({
   activeIds: ReadonlySet<string>;
 }) {
   return (
-    <>
+    <Panel>
       <div className="max-[760px]:hidden">
         <Table className="table-fixed">
           <TableHeader>
@@ -93,12 +94,12 @@ export function ProvisionerTokenList({
           </TableBody>
         </Table>
       </div>
-      <ul className="hidden flex-col gap-inline max-[760px]:flex" aria-label="Provisioner tokens">
+      <ul
+        className="hidden flex-col divide-y divide-border-neutral-base max-[760px]:flex"
+        aria-label="Provisioner tokens"
+      >
         {tokens.map((token) => (
-          <li
-            key={token.id}
-            className="flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact"
-          >
+          <li key={token.id} className="flex flex-col gap-cluster p-panel-compact">
             <div className="flex items-start justify-between gap-cluster">
               <div className="min-w-0 flex-1">
                 <TokenName name={provisionerTokenDisplayName(token)} />
@@ -131,7 +132,7 @@ export function ProvisionerTokenList({
           </li>
         ))}
       </ul>
-    </>
+    </Panel>
   );
 }
 
@@ -256,16 +257,17 @@ export function EmptyProvisionerTokens() {
       icon="key2Line"
       title="No usable provisioner registration tokens"
       description="Create a token to connect a provisioner that provisions runners on demand."
+      variant="panel"
     />
   );
 }
 
 export function ProvisionerTokenTableSkeleton() {
   return (
-    <div role="status" aria-label="Loading provisioner tokens" className="flex flex-col gap-inline">
+    <Panel role="status" aria-label="Loading provisioner tokens" className="divide-y">
       {[0, 1, 2].map((row) => (
-        <Skeleton key={row} className="h-44 w-full" />
+        <Skeleton key={row} className="h-44 w-full rounded-none" />
       ))}
-    </div>
+    </Panel>
   );
 }

package/src/components/provisioner-tokens-settings-section.tsx

@@ -9,6 +9,7 @@ import {
   ModalTitle,
   ModalTrigger,
 } from '@shipfox/react-ui/modal';
+import {Panel} from '@shipfox/react-ui/panel';
 import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useMemo, useState} from 'react';
@@ -98,10 +99,20 @@ export function WorkspaceProvisionerTokensSettingsSection({workspaceId}: {worksp
         {tokensQuery.isPending ? <ProvisionerTokenTableSkeleton /> : null}
 
         {tokensQuery.isError && tokensQuery.data === undefined ? (
-          <QueryLoadError query={tokensQuery} subject="provisioner registration tokens" />
+          <Panel>
+            <QueryLoadError
+              query={tokensQuery}
+              subject="provisioner registration tokens"
+              variant="panel"
+            />
+          </Panel>
         ) : null}
 
-        {tokensQuery.data !== undefined && tokens.length === 0 ? <EmptyProvisionerTokens /> : null}
+        {tokensQuery.data !== undefined && tokens.length === 0 ? (
+          <Panel>
+            <EmptyProvisionerTokens />
+          </Panel>
+        ) : null}
 
         {tokens.length > 0 ? (
           <RelativeTimeProvider>

package/src/components/token-settings-sections.stories.tsx

@@ -225,7 +225,7 @@ export const CreatedTokenPanels: Story = {
 
 function StorySurface({children}: {children: ReactNode}) {
   return (
-    <div className="min-h-screen bg-background-neutral-background p-24">
+    <div className="min-h-screen bg-background-subtle-base p-24">
       <div className="mx-auto flex w-full max-w-[920px] flex-col gap-32">{children}</div>
     </div>
   );

package/src/routes/provisioners-settings.tsx

@@ -2,6 +2,7 @@ import {defineRoute, useActiveWorkspace} from '@shipfox/client-shell/runtime';
 import {WorkspaceProvisionerTokensSettingsSection} from '#index.js';
 
 export default defineRoute({
+  staticData: {frame: 'content'},
   component: () => (
     <WorkspaceProvisionerTokensSettingsSection workspaceId={useActiveWorkspace().id} />
   ),

package/src/routes/runners-settings.tsx

@@ -2,6 +2,7 @@ import {defineRoute, useActiveWorkspace} from '@shipfox/client-shell/runtime';
 import {WorkspaceManualRegistrationTokensSettingsSection} from '#index.js';
 
 export default defineRoute({
+  staticData: {frame: 'content'},
   component: () => (
     <WorkspaceManualRegistrationTokensSettingsSection workspaceId={useActiveWorkspace().id} />
   ),