@shipfox/client-runners 21.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-runners",
   "license": "MIT",
-  "version": "21.0.0",
+  "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": "21.0.0",
-    "@shipfox/client-ui": "21.0.0",
-    "@shipfox/react-ui": "2.0.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

@@ -45,8 +45,8 @@ export function ManualRegistrationTokenList({
   tokens: ManualRegistrationToken[];
 }) {
   return (
-    <>
-      <Panel className="max-[760px]:hidden">
+    <Panel>
+      <div className="max-[760px]:hidden">
         <Table className="table-fixed">
           <TableHeader>
             <TableRow>
@@ -81,16 +81,13 @@ export function ManualRegistrationTokenList({
             ))}
           </TableBody>
         </Table>
-      </Panel>
+      </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)} />
@@ -117,7 +114,7 @@ export function ManualRegistrationTokenList({
           </li>
         ))}
       </ul>
-    </>
+    </Panel>
   );
 }
 
@@ -219,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

@@ -53,8 +53,8 @@ export function ProvisionerTokenList({
   activeIds: ReadonlySet<string>;
 }) {
   return (
-    <>
-      <Panel className="max-[760px]:hidden">
+    <Panel>
+      <div className="max-[760px]:hidden">
         <Table className="table-fixed">
           <TableHeader>
             <TableRow>
@@ -93,13 +93,13 @@ export function ProvisionerTokenList({
             ))}
           </TableBody>
         </Table>
-      </Panel>
-      <ul className="hidden flex-col gap-inline max-[760px]:flex" aria-label="Provisioner tokens">
+      </div>
+      <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)} />
@@ -132,7 +132,7 @@ export function ProvisionerTokenList({
           </li>
         ))}
       </ul>
-    </>
+    </Panel>
   );
 }
 
@@ -257,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>