@shipfox/client-runners 14.0.0 → 16.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-runners",
   "license": "MIT",
-  "version": "14.0.0",
+  "version": "16.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.0.0",
+    "@shipfox/api-runners-dto": "12.2.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "14.0.0",
-    "@shipfox/client-ui": "14.0.0",
-    "@shipfox/react-ui": "0.5.0"
+    "@shipfox/client-shell": "16.0.0",
+    "@shipfox/client-ui": "16.0.0",
+    "@shipfox/react-ui": "1.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/create-manual-registration-token-form.tsx

@@ -47,10 +47,10 @@ export function CreateManualRegistrationTokenForm({
 
   return (
     <>
-      <ModalBody className="gap-16">
+      <ModalBody className="gap-group">
         <form
           id={CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID}
-          className="flex w-full flex-col gap-8"
+          className="flex w-full flex-col gap-inline"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();
@@ -58,7 +58,7 @@ export function CreateManualRegistrationTokenForm({
             void form.handleSubmit();
           }}
         >
-          <div className="flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch">
+          <div className="flex w-full items-end gap-group max-[640px]:flex-col max-[640px]:items-stretch">
             <form.Field
               name="name"
               validators={{
@@ -109,7 +109,7 @@ export function CreateManualRegistrationTokenForm({
         </form>
         {formError ? (
           <Callout role="alert" type="error">
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-inline">
               <Text size="sm" bold>
                 Could not create token
               </Text>
@@ -156,14 +156,14 @@ export function CreatedManualRegistrationTokenPanel({
 
   return (
     <Callout type="success" variant="secondary" icon={null}>
-      <CalloutContent className="flex flex-col gap-12">
-        <div className="flex flex-col gap-2">
+      <CalloutContent className="flex flex-col gap-cluster">
+        <div className="flex flex-col gap-tight">
           <CalloutTitle className="mb-0">Token created</CalloutTitle>
           <CalloutDescription>
             Copy this registration token now. It will not be shown again.
           </CalloutDescription>
         </div>
-        <div className="flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch">
+        <div className="flex items-center gap-inline max-[640px]:flex-col max-[640px]:items-stretch">
           <Code variant="paragraph" className="min-w-0 flex-1 break-all">
             {token.token}
           </Code>

package/src/components/create-provisioner-token-form.tsx

@@ -47,10 +47,10 @@ export function CreateProvisionerTokenForm({
 
   return (
     <>
-      <ModalBody className="gap-16">
+      <ModalBody className="gap-group">
         <form
           id={CREATE_PROVISIONER_TOKEN_FORM_ID}
-          className="flex w-full flex-col gap-8"
+          className="flex w-full flex-col gap-inline"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();
@@ -58,7 +58,7 @@ export function CreateProvisionerTokenForm({
             void form.handleSubmit();
           }}
         >
-          <div className="flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch">
+          <div className="flex w-full items-end gap-group max-[640px]:flex-col max-[640px]:items-stretch">
             <form.Field
               name="name"
               validators={{
@@ -109,7 +109,7 @@ export function CreateProvisionerTokenForm({
         </form>
         {formError ? (
           <Callout role="alert" type="error">
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-col gap-inline">
               <Text size="sm" bold>
                 Could not create token
               </Text>
@@ -152,14 +152,14 @@ export function CreatedProvisionerTokenPanel({token}: {token: CreatedProvisioner
 
   return (
     <Callout type="success" variant="secondary" icon={null}>
-      <CalloutContent className="flex flex-col gap-12">
-        <div className="flex flex-col gap-2">
+      <CalloutContent className="flex flex-col gap-cluster">
+        <div className="flex flex-col gap-tight">
           <CalloutTitle className="mb-0">Token created</CalloutTitle>
           <CalloutDescription>
             Copy this provisioner token now. It will not be shown again.
           </CalloutDescription>
         </div>
-        <div className="flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch">
+        <div className="flex items-center gap-inline max-[640px]:flex-col max-[640px]:items-stretch">
           <Code variant="paragraph" className="min-w-0 flex-1 break-all">
             {token.token}
           </Code>

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

@@ -82,15 +82,15 @@ export function ManualRegistrationTokenList({
         </Table>
       </div>
       <ul
-        className="hidden flex-col gap-10 max-[760px]:flex"
+        className="hidden flex-col gap-inline max-[760px]:flex"
         aria-label="Manual registration tokens"
       >
         {tokens.map((token) => (
           <li
             key={token.id}
-            className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-14"
+            className="flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact"
           >
-            <div className="flex items-start justify-between gap-12">
+            <div className="flex items-start justify-between gap-cluster">
               <div className="min-w-0 flex-1">
                 <TokenName name={tokenDisplayName(token)} />
                 <Code variant="paragraph" className="block truncate text-foreground-neutral-muted">
@@ -99,7 +99,7 @@ export function ManualRegistrationTokenList({
               </div>
               <RevokeManualRegistrationTokenButton workspaceId={workspaceId} token={token} />
             </div>
-            <dl className="mt-12 grid grid-cols-2 gap-10 text-sm">
+            <dl className="grid grid-cols-2 gap-inline text-sm">
               <div>
                 <dt className="text-foreground-neutral-muted">Expires</dt>
                 <dd>
@@ -182,7 +182,7 @@ function RevokeManualRegistrationTokenButton({
         <ModalContent aria-describedby={undefined} className="max-w-[420px]">
           <ModalTitle className="sr-only">Revoke token</ModalTitle>
           <ModalHeader title="Revoke token?" />
-          <ModalBody className="gap-16">
+          <ModalBody className="gap-group">
             <Text size="sm" className="text-foreground-neutral-muted">
               {tokenName} will stop creating new runner sessions. Existing sessions and job leases
               expire on their own.
@@ -227,7 +227,7 @@ export function ManualRegistrationTokenTableSkeleton() {
     <div
       role="status"
       aria-label="Loading manual registration tokens"
-      className="flex flex-col gap-8"
+      className="flex flex-col gap-inline"
     >
       {[0, 1, 2].map((row) => (
         <Skeleton key={row} className="h-44 w-full" />

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

@@ -41,21 +41,21 @@ export function WorkspaceManualRegistrationTokensSettingsSection({
   }
 
   return (
-    <div className="flex min-w-0 flex-col gap-32">
-      <section className="flex flex-col gap-16">
-        <div className="flex items-center justify-between gap-16 max-[640px]:items-start">
-          <div className="flex flex-col gap-4">
+    <div className="flex min-w-0 flex-col gap-region">
+      <section className="flex flex-col gap-group">
+        <div className="flex items-center justify-between gap-group max-[640px]:items-start">
+          <div className="flex flex-col gap-tight">
             <Header variant="h3">Runner registration tokens</Header>
             <Text size="sm" className="text-foreground-neutral-muted">
               Register individual runner agents that run jobs directly in this workspace. Tokens are
               reusable until revoked.
             </Text>
           </div>
-          <div className="flex items-center gap-12">
+          <div className="flex items-center gap-cluster">
             {tokensQuery.isFetching && !tokensQuery.isPending ? (
               <Icon
                 name="loader4Line"
-                className="mt-2 size-18 text-foreground-neutral-muted"
+                className="mt-[2px] size-18 text-foreground-neutral-muted"
                 aria-label="Refreshing tokens"
               />
             ) : null}
@@ -75,7 +75,7 @@ export function WorkspaceManualRegistrationTokensSettingsSection({
                   </Text>
                 </ModalHeader>
                 {createdToken ? (
-                  <ModalBody className="gap-16">
+                  <ModalBody className="gap-group">
                     <CreatedManualRegistrationTokenPanel token={createdToken} />
                   </ModalBody>
                 ) : (

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

@@ -93,13 +93,13 @@ export function ProvisionerTokenList({
           </TableBody>
         </Table>
       </div>
-      <ul className="hidden flex-col gap-10 max-[760px]:flex" aria-label="Provisioner tokens">
+      <ul className="hidden flex-col gap-inline max-[760px]:flex" aria-label="Provisioner tokens">
         {tokens.map((token) => (
           <li
             key={token.id}
-            className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-14"
+            className="flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact"
           >
-            <div className="flex items-start justify-between gap-12">
+            <div className="flex items-start justify-between gap-cluster">
               <div className="min-w-0 flex-1">
                 <TokenName name={provisionerTokenDisplayName(token)} />
                 <Code variant="paragraph" className="block truncate text-foreground-neutral-muted">
@@ -108,7 +108,7 @@ export function ProvisionerTokenList({
               </div>
               <RevokeProvisionerTokenButton workspaceId={workspaceId} token={token} />
             </div>
-            <dl className="mt-12 grid grid-cols-2 gap-10 text-sm">
+            <dl className="grid grid-cols-2 gap-inline text-sm">
               <div>
                 <dt className="text-foreground-neutral-muted">Status</dt>
                 <dd>
@@ -155,7 +155,7 @@ function ProvisionerStatusCell({
   const status = provisionerConnectionStatus(token, activeIds);
 
   return (
-    <span className="inline-flex items-center gap-6">
+    <span className="inline-flex items-center gap-inline">
       <Dot variant={status.dotVariant} />
       {status.kind === 'last-seen' ? (
         <span>
@@ -220,7 +220,7 @@ function RevokeProvisionerTokenButton({
         <ModalContent aria-describedby={undefined} className="max-w-[420px]">
           <ModalTitle className="sr-only">Revoke token</ModalTitle>
           <ModalHeader title="Revoke token?" />
-          <ModalBody className="gap-16">
+          <ModalBody className="gap-group">
             <Text size="sm" className="text-foreground-neutral-muted">
               {tokenName} will stop authenticating this provisioner. Runners it already provisioned
               keep running until their leases expire.
@@ -262,7 +262,7 @@ export function EmptyProvisionerTokens() {
 
 export function ProvisionerTokenTableSkeleton() {
   return (
-    <div role="status" aria-label="Loading provisioner tokens" className="flex flex-col gap-8">
+    <div role="status" aria-label="Loading provisioner tokens" className="flex flex-col gap-inline">
       {[0, 1, 2].map((row) => (
         <Skeleton key={row} className="h-44 w-full" />
       ))}

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

@@ -46,22 +46,22 @@ export function WorkspaceProvisionerTokensSettingsSection({workspaceId}: {worksp
   }
 
   return (
-    <div className="flex min-w-0 flex-col gap-32">
-      <section className="flex flex-col gap-16">
-        <div className="flex items-center justify-between gap-16 max-[640px]:items-start">
-          <div className="flex flex-col gap-4">
+    <div className="flex min-w-0 flex-col gap-region">
+      <section className="flex flex-col gap-group">
+        <div className="flex items-center justify-between gap-group max-[640px]:items-start">
+          <div className="flex flex-col gap-tight">
             <Header variant="h3">Runner provisioner registration tokens</Header>
             <Text size="sm" className="text-foreground-neutral-muted">
               Register runner provisioners that connect to this workspace and create runners
               dynamically based on demand.
             </Text>
           </div>
-          <div className="flex items-center gap-12">
+          <div className="flex items-center gap-cluster">
             {(tokensQuery.isFetching && !tokensQuery.isPending) ||
             (activeProvisionersQuery.isFetching && !activeProvisionersQuery.isPending) ? (
               <Icon
                 name="loader4Line"
-                className="mt-2 size-18 text-foreground-neutral-muted"
+                className="mt-[2px] size-18 text-foreground-neutral-muted"
                 aria-label="Refreshing provisioner tokens"
               />
             ) : null}
@@ -81,7 +81,7 @@ export function WorkspaceProvisionerTokensSettingsSection({workspaceId}: {worksp
                   </Text>
                 </ModalHeader>
                 {createdToken ? (
-                  <ModalBody className="gap-16">
+                  <ModalBody className="gap-group">
                     <CreatedProvisionerTokenPanel token={createdToken} />
                   </ModalBody>
                 ) : (