@shipfox/client-runners 14.0.0 → 16.0.0

package/.turbo/turbo-build.log

@@ -1,2 +1,2 @@
 $ shipfox-swc
-Successfully compiled: 24 files with swc (387.07ms)
+Successfully compiled: 24 files with swc (338.12ms)

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @shipfox/client-runners
 
+## 16.0.0
+
+### Patch Changes
+
+- Updated dependencies [78b771c]
+- Updated dependencies [80cde6b]
+  - @shipfox/api-runners-dto@12.2.0
+  - @shipfox/react-ui@1.1.0
+  - @shipfox/client-ui@16.0.0
+  - @shipfox/client-shell@16.0.0
+
+## 14.0.1
+
+### Patch Changes
+
+- 6aa6c7a: Migrates the integrations, triggers, runners, and projects client surfaces to semantic spacing roles and enables `no-raw-spacing` for them. Adds the `gap-x-*` and `gap-y-*` axis roles and the `-mx-inline` bleed role so grids with differing column and row rhythm, and rows that cancel their own `px-tight`, stay on the density-aware scale.
+- Updated dependencies [88bf8e8]
+- Updated dependencies [6aa6c7a]
+- Updated dependencies [5c56ba6]
+  - @shipfox/react-ui@1.0.0
+  - @shipfox/client-shell@14.0.1
+  - @shipfox/client-ui@14.0.1
+
 ## 14.0.0
 
 ### Patch Changes

package/dist/components/create-manual-registration-token-form.js

@@ -35,11 +35,11 @@ export function CreateManualRegistrationTokenForm({ workspaceId, onCreated }) {
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsxs(ModalBody, {
-                className: "gap-16",
+                className: "gap-group",
                 children: [
                     /*#__PURE__*/ _jsxs("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: true,
                         onSubmit: (event)=>{
                             event.preventDefault();
@@ -48,7 +48,7 @@ export function CreateManualRegistrationTokenForm({ workspaceId, onCreated }) {
                         },
                         children: [
                             /*#__PURE__*/ _jsxs("div", {
-                                className: "flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch",
+                                className: "flex w-full items-end gap-group max-[640px]:flex-col max-[640px]:items-stretch",
                                 children: [
                                     /*#__PURE__*/ _jsx(form.Field, {
                                         name: "name",
@@ -98,7 +98,7 @@ export function CreateManualRegistrationTokenForm({ workspaceId, onCreated }) {
                         role: "alert",
                         type: "error",
                         children: /*#__PURE__*/ _jsxs("div", {
-                            className: "flex flex-col gap-8",
+                            className: "flex flex-col gap-inline",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     size: "sm",
@@ -147,10 +147,10 @@ export function CreatedManualRegistrationTokenPanel({ token }) {
         variant: "secondary",
         icon: null,
         children: /*#__PURE__*/ _jsxs(CalloutContent, {
-            className: "flex flex-col gap-12",
+            className: "flex flex-col gap-cluster",
             children: [
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-2",
+                    className: "flex flex-col gap-tight",
                     children: [
                         /*#__PURE__*/ _jsx(CalloutTitle, {
                             className: "mb-0",
@@ -162,7 +162,7 @@ export function CreatedManualRegistrationTokenPanel({ token }) {
                     ]
                 }),
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch",
+                    className: "flex items-center gap-inline max-[640px]:flex-col max-[640px]:items-stretch",
                     children: [
                         /*#__PURE__*/ _jsx(Code, {
                             variant: "paragraph",

package/dist/components/create-manual-registration-token-form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/create-manual-registration-token-form.tsx"],"sourcesContent":["import {Button} from '@shipfox/react-ui/button';\nimport {Callout, CalloutContent, CalloutDescription, CalloutTitle} from '@shipfox/react-ui/callout';\nimport {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';\nimport {useCopyToClipboard} from '@shipfox/react-ui/hooks';\nimport {ModalBody, ModalFooter} from '@shipfox/react-ui/modal';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useForm} from '@tanstack/react-form';\nimport {useState} from 'react';\nimport type {CreatedManualRegistrationToken} from '#core/token.js';\nimport {createTokenCommand} from '#core/token.js';\nimport {useCreateManualRegistrationTokenMutation} from '#hooks/api/manual-registration-tokens.js';\nimport {manualRegistrationTokenCreateErrorToFormError} from './form-errors.js';\nimport {\n  ExpirationSelect,\n  expirationCommand,\n  expirationHint,\n  type TokenExpirationOption,\n} from './token-expiration-select.js';\n\nexport const CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID = 'create-manual-registration-token-form';\n\nexport function CreateManualRegistrationTokenForm({\n  workspaceId,\n  onCreated,\n}: {\n  workspaceId: string;\n  onCreated: (token: CreatedManualRegistrationToken) => void;\n}) {\n  const createToken = useCreateManualRegistrationTokenMutation(workspaceId);\n  const [formError, setFormError] = useState<string | undefined>();\n\n  const form = useForm({\n    defaultValues: {name: '', expiration: '86400' as TokenExpirationOption},\n    onSubmit: async ({value}) => {\n      setFormError(undefined);\n      const command = createTokenCommand(value.name, expirationCommand(value.expiration));\n\n      try {\n        const token = await createToken.mutateAsync(command);\n        onCreated(token);\n      } catch (error) {\n        const mapped = manualRegistrationTokenCreateErrorToFormError(error);\n        setFormError(mapped.message);\n      }\n    },\n  });\n\n  return (\n    <>\n      <ModalBody className=\"gap-16\">\n        <form\n          id={CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID}\n          className=\"flex w-full flex-col gap-8\"\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            void form.handleSubmit();\n          }}\n        >\n          <div className=\"flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch\">\n            <form.Field\n              name=\"name\"\n              validators={{\n                onBlur: ({value}) =>\n                  value.length <= 80 ? undefined : 'Token name must be 80 characters or fewer.',\n              }}\n            >\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Token name\"\n                  id=\"manual-registration-token-name\"\n                  error={fieldError(field)}\n                >\n                  <FormFieldInput\n                    placeholder=\"Local runner\"\n                    maxLength={80}\n                    value={field.state.value}\n                    onChange={(event) => field.handleChange(event.target.value)}\n                    onBlur={field.handleBlur}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n            <form.Field name=\"expiration\">\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Expires\"\n                  id=\"manual-registration-token-expiration\"\n                  error={fieldError(field)}\n                >\n                  <ExpirationSelect\n                    value={field.state.value}\n                    onValueChange={(next) => field.handleChange(next)}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n          </div>\n          <form.Subscribe selector={(state) => state.values.expiration}>\n            {(expiration) => (\n              <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                {expirationHint(expiration)}\n              </Text>\n            )}\n          </form.Subscribe>\n        </form>\n        {formError ? (\n          <Callout role=\"alert\" type=\"error\">\n            <div className=\"flex flex-col gap-8\">\n              <Text size=\"sm\" bold>\n                Could not create token\n              </Text>\n              <Text size=\"sm\">{formError}</Text>\n            </div>\n          </Callout>\n        ) : null}\n      </ModalBody>\n      <ModalFooter>\n        <Button\n          type=\"submit\"\n          form={CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID}\n          isLoading={createToken.isPending}\n        >\n          Create token\n        </Button>\n      </ModalFooter>\n    </>\n  );\n}\n\nexport function CreatedManualRegistrationTokenPanel({\n  token,\n}: {\n  token: CreatedManualRegistrationToken;\n}) {\n  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');\n  const {copy} = useCopyToClipboard({\n    text: token.token,\n    onCopy: () => {\n      setCopyState('copied');\n      window.setTimeout(() => setCopyState('idle'), 1500);\n    },\n  });\n\n  async function handleCopy() {\n    try {\n      await copy();\n    } catch {\n      setCopyState('failed');\n      window.setTimeout(() => setCopyState('idle'), 2500);\n    }\n  }\n\n  return (\n    <Callout type=\"success\" variant=\"secondary\" icon={null}>\n      <CalloutContent className=\"flex flex-col gap-12\">\n        <div className=\"flex flex-col gap-2\">\n          <CalloutTitle className=\"mb-0\">Token created</CalloutTitle>\n          <CalloutDescription>\n            Copy this registration token now. It will not be shown again.\n          </CalloutDescription>\n        </div>\n        <div className=\"flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch\">\n          <Code variant=\"paragraph\" className=\"min-w-0 flex-1 break-all\">\n            {token.token}\n          </Code>\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            iconLeft=\"fileCopyLine\"\n            onClick={() => void handleCopy()}\n          >\n            {copyState === 'copied' ? 'Copied' : 'Copy'}\n          </Button>\n        </div>\n        {copyState === 'failed' ? (\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n            Copy failed: select and copy manually.\n          </Text>\n        ) : null}\n      </CalloutContent>\n    </Callout>\n  );\n}\n"],"names":["Button","Callout","CalloutContent","CalloutDescription","CalloutTitle","FormField","FormFieldInput","fieldError","useCopyToClipboard","ModalBody","ModalFooter","Code","Text","useForm","useState","createTokenCommand","useCreateManualRegistrationTokenMutation","manualRegistrationTokenCreateErrorToFormError","ExpirationSelect","expirationCommand","expirationHint","CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID","CreateManualRegistrationTokenForm","workspaceId","onCreated","createToken","formError","setFormError","form","defaultValues","name","expiration","onSubmit","value","undefined","command","token","mutateAsync","error","mapped","message","className","id","noValidate","event","preventDefault","stopPropagation","handleSubmit","div","Field","validators","onBlur","length","field","label","placeholder","maxLength","state","onChange","handleChange","target","handleBlur","onValueChange","next","Subscribe","selector","values","size","role","type","bold","isLoading","isPending","CreatedManualRegistrationTokenPanel","copyState","setCopyState","copy","text","onCopy","window","setTimeout","handleCopy","variant","icon","iconLeft","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/create-manual-registration-token-form.tsx"],"sourcesContent":["import {Button} from '@shipfox/react-ui/button';\nimport {Callout, CalloutContent, CalloutDescription, CalloutTitle} from '@shipfox/react-ui/callout';\nimport {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';\nimport {useCopyToClipboard} from '@shipfox/react-ui/hooks';\nimport {ModalBody, ModalFooter} from '@shipfox/react-ui/modal';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useForm} from '@tanstack/react-form';\nimport {useState} from 'react';\nimport type {CreatedManualRegistrationToken} from '#core/token.js';\nimport {createTokenCommand} from '#core/token.js';\nimport {useCreateManualRegistrationTokenMutation} from '#hooks/api/manual-registration-tokens.js';\nimport {manualRegistrationTokenCreateErrorToFormError} from './form-errors.js';\nimport {\n  ExpirationSelect,\n  expirationCommand,\n  expirationHint,\n  type TokenExpirationOption,\n} from './token-expiration-select.js';\n\nexport const CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID = 'create-manual-registration-token-form';\n\nexport function CreateManualRegistrationTokenForm({\n  workspaceId,\n  onCreated,\n}: {\n  workspaceId: string;\n  onCreated: (token: CreatedManualRegistrationToken) => void;\n}) {\n  const createToken = useCreateManualRegistrationTokenMutation(workspaceId);\n  const [formError, setFormError] = useState<string | undefined>();\n\n  const form = useForm({\n    defaultValues: {name: '', expiration: '86400' as TokenExpirationOption},\n    onSubmit: async ({value}) => {\n      setFormError(undefined);\n      const command = createTokenCommand(value.name, expirationCommand(value.expiration));\n\n      try {\n        const token = await createToken.mutateAsync(command);\n        onCreated(token);\n      } catch (error) {\n        const mapped = manualRegistrationTokenCreateErrorToFormError(error);\n        setFormError(mapped.message);\n      }\n    },\n  });\n\n  return (\n    <>\n      <ModalBody className=\"gap-group\">\n        <form\n          id={CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID}\n          className=\"flex w-full flex-col gap-inline\"\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            void form.handleSubmit();\n          }}\n        >\n          <div className=\"flex w-full items-end gap-group max-[640px]:flex-col max-[640px]:items-stretch\">\n            <form.Field\n              name=\"name\"\n              validators={{\n                onBlur: ({value}) =>\n                  value.length <= 80 ? undefined : 'Token name must be 80 characters or fewer.',\n              }}\n            >\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Token name\"\n                  id=\"manual-registration-token-name\"\n                  error={fieldError(field)}\n                >\n                  <FormFieldInput\n                    placeholder=\"Local runner\"\n                    maxLength={80}\n                    value={field.state.value}\n                    onChange={(event) => field.handleChange(event.target.value)}\n                    onBlur={field.handleBlur}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n            <form.Field name=\"expiration\">\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Expires\"\n                  id=\"manual-registration-token-expiration\"\n                  error={fieldError(field)}\n                >\n                  <ExpirationSelect\n                    value={field.state.value}\n                    onValueChange={(next) => field.handleChange(next)}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n          </div>\n          <form.Subscribe selector={(state) => state.values.expiration}>\n            {(expiration) => (\n              <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                {expirationHint(expiration)}\n              </Text>\n            )}\n          </form.Subscribe>\n        </form>\n        {formError ? (\n          <Callout role=\"alert\" type=\"error\">\n            <div className=\"flex flex-col gap-inline\">\n              <Text size=\"sm\" bold>\n                Could not create token\n              </Text>\n              <Text size=\"sm\">{formError}</Text>\n            </div>\n          </Callout>\n        ) : null}\n      </ModalBody>\n      <ModalFooter>\n        <Button\n          type=\"submit\"\n          form={CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID}\n          isLoading={createToken.isPending}\n        >\n          Create token\n        </Button>\n      </ModalFooter>\n    </>\n  );\n}\n\nexport function CreatedManualRegistrationTokenPanel({\n  token,\n}: {\n  token: CreatedManualRegistrationToken;\n}) {\n  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');\n  const {copy} = useCopyToClipboard({\n    text: token.token,\n    onCopy: () => {\n      setCopyState('copied');\n      window.setTimeout(() => setCopyState('idle'), 1500);\n    },\n  });\n\n  async function handleCopy() {\n    try {\n      await copy();\n    } catch {\n      setCopyState('failed');\n      window.setTimeout(() => setCopyState('idle'), 2500);\n    }\n  }\n\n  return (\n    <Callout type=\"success\" variant=\"secondary\" icon={null}>\n      <CalloutContent className=\"flex flex-col gap-cluster\">\n        <div className=\"flex flex-col gap-tight\">\n          <CalloutTitle className=\"mb-0\">Token created</CalloutTitle>\n          <CalloutDescription>\n            Copy this registration token now. It will not be shown again.\n          </CalloutDescription>\n        </div>\n        <div className=\"flex items-center gap-inline max-[640px]:flex-col max-[640px]:items-stretch\">\n          <Code variant=\"paragraph\" className=\"min-w-0 flex-1 break-all\">\n            {token.token}\n          </Code>\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            iconLeft=\"fileCopyLine\"\n            onClick={() => void handleCopy()}\n          >\n            {copyState === 'copied' ? 'Copied' : 'Copy'}\n          </Button>\n        </div>\n        {copyState === 'failed' ? (\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n            Copy failed: select and copy manually.\n          </Text>\n        ) : null}\n      </CalloutContent>\n    </Callout>\n  );\n}\n"],"names":["Button","Callout","CalloutContent","CalloutDescription","CalloutTitle","FormField","FormFieldInput","fieldError","useCopyToClipboard","ModalBody","ModalFooter","Code","Text","useForm","useState","createTokenCommand","useCreateManualRegistrationTokenMutation","manualRegistrationTokenCreateErrorToFormError","ExpirationSelect","expirationCommand","expirationHint","CREATE_MANUAL_REGISTRATION_TOKEN_FORM_ID","CreateManualRegistrationTokenForm","workspaceId","onCreated","createToken","formError","setFormError","form","defaultValues","name","expiration","onSubmit","value","undefined","command","token","mutateAsync","error","mapped","message","className","id","noValidate","event","preventDefault","stopPropagation","handleSubmit","div","Field","validators","onBlur","length","field","label","placeholder","maxLength","state","onChange","handleChange","target","handleBlur","onValueChange","next","Subscribe","selector","values","size","role","type","bold","isLoading","isPending","CreatedManualRegistrationTokenPanel","copyState","setCopyState","copy","text","onCopy","window","setTimeout","handleCopy","variant","icon","iconLeft","onClick"],"mappings":"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"}

package/dist/components/create-provisioner-token-form.js

@@ -35,11 +35,11 @@ export function CreateProvisionerTokenForm({ workspaceId, onCreated }) {
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsxs(ModalBody, {
-                className: "gap-16",
+                className: "gap-group",
                 children: [
                     /*#__PURE__*/ _jsxs("form", {
                         id: CREATE_PROVISIONER_TOKEN_FORM_ID,
-                        className: "flex w-full flex-col gap-8",
+                        className: "flex w-full flex-col gap-inline",
                         noValidate: true,
                         onSubmit: (event)=>{
                             event.preventDefault();
@@ -48,7 +48,7 @@ export function CreateProvisionerTokenForm({ workspaceId, onCreated }) {
                         },
                         children: [
                             /*#__PURE__*/ _jsxs("div", {
-                                className: "flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch",
+                                className: "flex w-full items-end gap-group max-[640px]:flex-col max-[640px]:items-stretch",
                                 children: [
                                     /*#__PURE__*/ _jsx(form.Field, {
                                         name: "name",
@@ -98,7 +98,7 @@ export function CreateProvisionerTokenForm({ workspaceId, onCreated }) {
                         role: "alert",
                         type: "error",
                         children: /*#__PURE__*/ _jsxs("div", {
-                            className: "flex flex-col gap-8",
+                            className: "flex flex-col gap-inline",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     size: "sm",
@@ -147,10 +147,10 @@ export function CreatedProvisionerTokenPanel({ token }) {
         variant: "secondary",
         icon: null,
         children: /*#__PURE__*/ _jsxs(CalloutContent, {
-            className: "flex flex-col gap-12",
+            className: "flex flex-col gap-cluster",
             children: [
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-2",
+                    className: "flex flex-col gap-tight",
                     children: [
                         /*#__PURE__*/ _jsx(CalloutTitle, {
                             className: "mb-0",
@@ -162,7 +162,7 @@ export function CreatedProvisionerTokenPanel({ token }) {
                     ]
                 }),
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch",
+                    className: "flex items-center gap-inline max-[640px]:flex-col max-[640px]:items-stretch",
                     children: [
                         /*#__PURE__*/ _jsx(Code, {
                             variant: "paragraph",

package/dist/components/create-provisioner-token-form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/create-provisioner-token-form.tsx"],"sourcesContent":["import {Button} from '@shipfox/react-ui/button';\nimport {Callout, CalloutContent, CalloutDescription, CalloutTitle} from '@shipfox/react-ui/callout';\nimport {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';\nimport {useCopyToClipboard} from '@shipfox/react-ui/hooks';\nimport {ModalBody, ModalFooter} from '@shipfox/react-ui/modal';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useForm} from '@tanstack/react-form';\nimport {useState} from 'react';\nimport type {CreatedProvisionerToken} from '#core/token.js';\nimport {createTokenCommand} from '#core/token.js';\nimport {useCreateProvisionerTokenMutation} from '#hooks/api/provisioner-tokens.js';\nimport {provisionerTokenCreateErrorToFormError} from './provisioner-token-form-errors.js';\nimport {\n  ExpirationSelect,\n  expirationCommand,\n  expirationHint,\n  type TokenExpirationOption,\n} from './token-expiration-select.js';\n\nexport const CREATE_PROVISIONER_TOKEN_FORM_ID = 'create-provisioner-token-form';\n\nexport function CreateProvisionerTokenForm({\n  workspaceId,\n  onCreated,\n}: {\n  workspaceId: string;\n  onCreated: (token: CreatedProvisionerToken) => void;\n}) {\n  const createToken = useCreateProvisionerTokenMutation(workspaceId);\n  const [formError, setFormError] = useState<string | undefined>();\n\n  const form = useForm({\n    defaultValues: {name: '', expiration: '86400' as TokenExpirationOption},\n    onSubmit: async ({value}) => {\n      setFormError(undefined);\n      const command = createTokenCommand(value.name, expirationCommand(value.expiration));\n\n      try {\n        const token = await createToken.mutateAsync(command);\n        onCreated(token);\n      } catch (error) {\n        const mapped = provisionerTokenCreateErrorToFormError(error);\n        setFormError(mapped.message);\n      }\n    },\n  });\n\n  return (\n    <>\n      <ModalBody className=\"gap-16\">\n        <form\n          id={CREATE_PROVISIONER_TOKEN_FORM_ID}\n          className=\"flex w-full flex-col gap-8\"\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            void form.handleSubmit();\n          }}\n        >\n          <div className=\"flex w-full items-end gap-16 max-[640px]:flex-col max-[640px]:items-stretch\">\n            <form.Field\n              name=\"name\"\n              validators={{\n                onBlur: ({value}) =>\n                  value.length <= 80 ? undefined : 'Token name must be 80 characters or fewer.',\n              }}\n            >\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Token name\"\n                  id=\"provisioner-token-name\"\n                  error={fieldError(field)}\n                >\n                  <FormFieldInput\n                    placeholder=\"Docker provisioner\"\n                    maxLength={80}\n                    value={field.state.value}\n                    onChange={(event) => field.handleChange(event.target.value)}\n                    onBlur={field.handleBlur}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n            <form.Field name=\"expiration\">\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Expires\"\n                  id=\"provisioner-token-expiration\"\n                  error={fieldError(field)}\n                >\n                  <ExpirationSelect\n                    value={field.state.value}\n                    onValueChange={(next) => field.handleChange(next)}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n          </div>\n          <form.Subscribe selector={(state) => state.values.expiration}>\n            {(expiration) => (\n              <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                {expirationHint(expiration)}\n              </Text>\n            )}\n          </form.Subscribe>\n        </form>\n        {formError ? (\n          <Callout role=\"alert\" type=\"error\">\n            <div className=\"flex flex-col gap-8\">\n              <Text size=\"sm\" bold>\n                Could not create token\n              </Text>\n              <Text size=\"sm\">{formError}</Text>\n            </div>\n          </Callout>\n        ) : null}\n      </ModalBody>\n      <ModalFooter>\n        <Button\n          type=\"submit\"\n          form={CREATE_PROVISIONER_TOKEN_FORM_ID}\n          isLoading={createToken.isPending}\n        >\n          Create token\n        </Button>\n      </ModalFooter>\n    </>\n  );\n}\n\nexport function CreatedProvisionerTokenPanel({token}: {token: CreatedProvisionerToken}) {\n  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');\n  const {copy} = useCopyToClipboard({\n    text: token.token,\n    onCopy: () => {\n      setCopyState('copied');\n      window.setTimeout(() => setCopyState('idle'), 1500);\n    },\n  });\n\n  async function handleCopy() {\n    try {\n      await copy();\n    } catch {\n      setCopyState('failed');\n      window.setTimeout(() => setCopyState('idle'), 2500);\n    }\n  }\n\n  return (\n    <Callout type=\"success\" variant=\"secondary\" icon={null}>\n      <CalloutContent className=\"flex flex-col gap-12\">\n        <div className=\"flex flex-col gap-2\">\n          <CalloutTitle className=\"mb-0\">Token created</CalloutTitle>\n          <CalloutDescription>\n            Copy this provisioner token now. It will not be shown again.\n          </CalloutDescription>\n        </div>\n        <div className=\"flex items-center gap-8 max-[640px]:flex-col max-[640px]:items-stretch\">\n          <Code variant=\"paragraph\" className=\"min-w-0 flex-1 break-all\">\n            {token.token}\n          </Code>\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            iconLeft=\"fileCopyLine\"\n            onClick={() => void handleCopy()}\n          >\n            {copyState === 'copied' ? 'Copied' : 'Copy'}\n          </Button>\n        </div>\n        {copyState === 'failed' ? (\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n            Copy failed: select and copy manually.\n          </Text>\n        ) : null}\n      </CalloutContent>\n    </Callout>\n  );\n}\n"],"names":["Button","Callout","CalloutContent","CalloutDescription","CalloutTitle","FormField","FormFieldInput","fieldError","useCopyToClipboard","ModalBody","ModalFooter","Code","Text","useForm","useState","createTokenCommand","useCreateProvisionerTokenMutation","provisionerTokenCreateErrorToFormError","ExpirationSelect","expirationCommand","expirationHint","CREATE_PROVISIONER_TOKEN_FORM_ID","CreateProvisionerTokenForm","workspaceId","onCreated","createToken","formError","setFormError","form","defaultValues","name","expiration","onSubmit","value","undefined","command","token","mutateAsync","error","mapped","message","className","id","noValidate","event","preventDefault","stopPropagation","handleSubmit","div","Field","validators","onBlur","length","field","label","placeholder","maxLength","state","onChange","handleChange","target","handleBlur","onValueChange","next","Subscribe","selector","values","size","role","type","bold","isLoading","isPending","CreatedProvisionerTokenPanel","copyState","setCopyState","copy","text","onCopy","window","setTimeout","handleCopy","variant","icon","iconLeft","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/create-provisioner-token-form.tsx"],"sourcesContent":["import {Button} from '@shipfox/react-ui/button';\nimport {Callout, CalloutContent, CalloutDescription, CalloutTitle} from '@shipfox/react-ui/callout';\nimport {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';\nimport {useCopyToClipboard} from '@shipfox/react-ui/hooks';\nimport {ModalBody, ModalFooter} from '@shipfox/react-ui/modal';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useForm} from '@tanstack/react-form';\nimport {useState} from 'react';\nimport type {CreatedProvisionerToken} from '#core/token.js';\nimport {createTokenCommand} from '#core/token.js';\nimport {useCreateProvisionerTokenMutation} from '#hooks/api/provisioner-tokens.js';\nimport {provisionerTokenCreateErrorToFormError} from './provisioner-token-form-errors.js';\nimport {\n  ExpirationSelect,\n  expirationCommand,\n  expirationHint,\n  type TokenExpirationOption,\n} from './token-expiration-select.js';\n\nexport const CREATE_PROVISIONER_TOKEN_FORM_ID = 'create-provisioner-token-form';\n\nexport function CreateProvisionerTokenForm({\n  workspaceId,\n  onCreated,\n}: {\n  workspaceId: string;\n  onCreated: (token: CreatedProvisionerToken) => void;\n}) {\n  const createToken = useCreateProvisionerTokenMutation(workspaceId);\n  const [formError, setFormError] = useState<string | undefined>();\n\n  const form = useForm({\n    defaultValues: {name: '', expiration: '86400' as TokenExpirationOption},\n    onSubmit: async ({value}) => {\n      setFormError(undefined);\n      const command = createTokenCommand(value.name, expirationCommand(value.expiration));\n\n      try {\n        const token = await createToken.mutateAsync(command);\n        onCreated(token);\n      } catch (error) {\n        const mapped = provisionerTokenCreateErrorToFormError(error);\n        setFormError(mapped.message);\n      }\n    },\n  });\n\n  return (\n    <>\n      <ModalBody className=\"gap-group\">\n        <form\n          id={CREATE_PROVISIONER_TOKEN_FORM_ID}\n          className=\"flex w-full flex-col gap-inline\"\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            void form.handleSubmit();\n          }}\n        >\n          <div className=\"flex w-full items-end gap-group max-[640px]:flex-col max-[640px]:items-stretch\">\n            <form.Field\n              name=\"name\"\n              validators={{\n                onBlur: ({value}) =>\n                  value.length <= 80 ? undefined : 'Token name must be 80 characters or fewer.',\n              }}\n            >\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Token name\"\n                  id=\"provisioner-token-name\"\n                  error={fieldError(field)}\n                >\n                  <FormFieldInput\n                    placeholder=\"Docker provisioner\"\n                    maxLength={80}\n                    value={field.state.value}\n                    onChange={(event) => field.handleChange(event.target.value)}\n                    onBlur={field.handleBlur}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n            <form.Field name=\"expiration\">\n              {(field) => (\n                <FormField\n                  className=\"flex-1\"\n                  label=\"Expires\"\n                  id=\"provisioner-token-expiration\"\n                  error={fieldError(field)}\n                >\n                  <ExpirationSelect\n                    value={field.state.value}\n                    onValueChange={(next) => field.handleChange(next)}\n                  />\n                </FormField>\n              )}\n            </form.Field>\n          </div>\n          <form.Subscribe selector={(state) => state.values.expiration}>\n            {(expiration) => (\n              <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n                {expirationHint(expiration)}\n              </Text>\n            )}\n          </form.Subscribe>\n        </form>\n        {formError ? (\n          <Callout role=\"alert\" type=\"error\">\n            <div className=\"flex flex-col gap-inline\">\n              <Text size=\"sm\" bold>\n                Could not create token\n              </Text>\n              <Text size=\"sm\">{formError}</Text>\n            </div>\n          </Callout>\n        ) : null}\n      </ModalBody>\n      <ModalFooter>\n        <Button\n          type=\"submit\"\n          form={CREATE_PROVISIONER_TOKEN_FORM_ID}\n          isLoading={createToken.isPending}\n        >\n          Create token\n        </Button>\n      </ModalFooter>\n    </>\n  );\n}\n\nexport function CreatedProvisionerTokenPanel({token}: {token: CreatedProvisionerToken}) {\n  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');\n  const {copy} = useCopyToClipboard({\n    text: token.token,\n    onCopy: () => {\n      setCopyState('copied');\n      window.setTimeout(() => setCopyState('idle'), 1500);\n    },\n  });\n\n  async function handleCopy() {\n    try {\n      await copy();\n    } catch {\n      setCopyState('failed');\n      window.setTimeout(() => setCopyState('idle'), 2500);\n    }\n  }\n\n  return (\n    <Callout type=\"success\" variant=\"secondary\" icon={null}>\n      <CalloutContent className=\"flex flex-col gap-cluster\">\n        <div className=\"flex flex-col gap-tight\">\n          <CalloutTitle className=\"mb-0\">Token created</CalloutTitle>\n          <CalloutDescription>\n            Copy this provisioner token now. It will not be shown again.\n          </CalloutDescription>\n        </div>\n        <div className=\"flex items-center gap-inline max-[640px]:flex-col max-[640px]:items-stretch\">\n          <Code variant=\"paragraph\" className=\"min-w-0 flex-1 break-all\">\n            {token.token}\n          </Code>\n          <Button\n            size=\"sm\"\n            variant=\"secondary\"\n            iconLeft=\"fileCopyLine\"\n            onClick={() => void handleCopy()}\n          >\n            {copyState === 'copied' ? 'Copied' : 'Copy'}\n          </Button>\n        </div>\n        {copyState === 'failed' ? (\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n            Copy failed: select and copy manually.\n          </Text>\n        ) : null}\n      </CalloutContent>\n    </Callout>\n  );\n}\n"],"names":["Button","Callout","CalloutContent","CalloutDescription","CalloutTitle","FormField","FormFieldInput","fieldError","useCopyToClipboard","ModalBody","ModalFooter","Code","Text","useForm","useState","createTokenCommand","useCreateProvisionerTokenMutation","provisionerTokenCreateErrorToFormError","ExpirationSelect","expirationCommand","expirationHint","CREATE_PROVISIONER_TOKEN_FORM_ID","CreateProvisionerTokenForm","workspaceId","onCreated","createToken","formError","setFormError","form","defaultValues","name","expiration","onSubmit","value","undefined","command","token","mutateAsync","error","mapped","message","className","id","noValidate","event","preventDefault","stopPropagation","handleSubmit","div","Field","validators","onBlur","length","field","label","placeholder","maxLength","state","onChange","handleChange","target","handleBlur","onValueChange","next","Subscribe","selector","values","size","role","type","bold","isLoading","isPending","CreatedProvisionerTokenPanel","copyState","setCopyState","copy","text","onCopy","window","setTimeout","handleCopy","variant","icon","iconLeft","onClick"],"mappings":"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"}

package/dist/components/manual-registration-token-list.js

@@ -86,13 +86,13 @@ export function ManualRegistrationTokenList({ workspaceId, tokens }) {
                 })
             }),
             /*#__PURE__*/ _jsx("ul", {
-                className: "hidden flex-col gap-10 max-[760px]:flex",
+                className: "hidden flex-col gap-inline max-[760px]:flex",
                 "aria-label": "Manual registration tokens",
                 children: tokens.map((token)=>/*#__PURE__*/ _jsxs("li", {
-                        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",
                         children: [
                             /*#__PURE__*/ _jsxs("div", {
-                                className: "flex items-start justify-between gap-12",
+                                className: "flex items-start justify-between gap-cluster",
                                 children: [
                                     /*#__PURE__*/ _jsxs("div", {
                                         className: "min-w-0 flex-1",
@@ -114,7 +114,7 @@ export function ManualRegistrationTokenList({ workspaceId, tokens }) {
                                 ]
                             }),
                             /*#__PURE__*/ _jsxs("dl", {
-                                className: "mt-12 grid grid-cols-2 gap-10 text-sm",
+                                className: "grid grid-cols-2 gap-inline text-sm",
                                 children: [
                                     /*#__PURE__*/ _jsxs("div", {
                                         children: [
@@ -218,7 +218,7 @@ function RevokeManualRegistrationTokenButton({ workspaceId, token }) {
                             title: "Revoke token?"
                         }),
                         /*#__PURE__*/ _jsxs(ModalBody, {
-                            className: "gap-16",
+                            className: "gap-group",
                             children: [
                                 /*#__PURE__*/ _jsxs(Text, {
                                     size: "sm",
@@ -272,7 +272,7 @@ export function ManualRegistrationTokenTableSkeleton() {
     return /*#__PURE__*/ _jsx("div", {
         role: "status",
         "aria-label": "Loading manual registration tokens",
-        className: "flex flex-col gap-8",
+        className: "flex flex-col gap-inline",
         children: [
             0,
             1,

package/dist/components/manual-registration-token-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/manual-registration-token-list.tsx"],"sourcesContent":["import {Button, IconButton} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@shipfox/react-ui/dropdown-menu';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@shipfox/react-ui/modal';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@shipfox/react-ui/table';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport {type ManualRegistrationToken, tokenDisplayName} from '#core/token.js';\nimport {useRevokeManualRegistrationTokenMutation} from '#hooks/api/manual-registration-tokens.js';\nimport {manualRegistrationTokenErrorMessage} from './manual-registration-token-errors.js';\nimport {\n  formatManualRegistrationTokenDate,\n  formatManualRegistrationTokenTimestamp,\n} from './manual-registration-token-format.js';\nimport {TokenDate} from './token-date.js';\nimport {TokenName} from './token-name.js';\n\nexport function ManualRegistrationTokenList({\n  workspaceId,\n  tokens,\n}: {\n  workspaceId: string;\n  tokens: ManualRegistrationToken[];\n}) {\n  return (\n    <>\n      <div className=\"max-[760px]:hidden\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[34%]\">Name</TableHead>\n              <TableHead>Prefix</TableHead>\n              <TableHead className=\"w-128\">Expires</TableHead>\n              <TableHead className=\"w-128\">Created</TableHead>\n              <TableHead className=\"w-80 text-right\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tokens.map((token) => (\n              <TableRow key={token.id}>\n                <TableCell>\n                  <TokenName name={tokenDisplayName(token)} />\n                </TableCell>\n                <TableCell>\n                  <Code variant=\"paragraph\" className=\"block truncate\">\n                    {token.prefix}\n                  </Code>\n                </TableCell>\n                <TableCell>\n                  <ManualRegistrationTokenDate value={token.expiresAt} />\n                </TableCell>\n                <TableCell>\n                  <ManualRegistrationTokenDate value={token.createdAt} />\n                </TableCell>\n                <TableCell className=\"text-right\">\n                  <RevokeManualRegistrationTokenButton workspaceId={workspaceId} token={token} />\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <ul\n        className=\"hidden flex-col gap-10 max-[760px]:flex\"\n        aria-label=\"Manual registration tokens\"\n      >\n        {tokens.map((token) => (\n          <li\n            key={token.id}\n            className=\"rounded-8 border border-border-neutral-base bg-background-neutral-base p-14\"\n          >\n            <div className=\"flex items-start justify-between gap-12\">\n              <div className=\"min-w-0 flex-1\">\n                <TokenName name={tokenDisplayName(token)} />\n                <Code variant=\"paragraph\" className=\"block truncate text-foreground-neutral-muted\">\n                  {token.prefix}\n                </Code>\n              </div>\n              <RevokeManualRegistrationTokenButton workspaceId={workspaceId} token={token} />\n            </div>\n            <dl className=\"mt-12 grid grid-cols-2 gap-10 text-sm\">\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Expires</dt>\n                <dd>\n                  <ManualRegistrationTokenDate value={token.expiresAt} />\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Created</dt>\n                <dd>\n                  <ManualRegistrationTokenDate value={token.createdAt} />\n                </dd>\n              </div>\n            </dl>\n          </li>\n        ))}\n      </ul>\n    </>\n  );\n}\n\nfunction ManualRegistrationTokenDate({value}: {value: string | null}) {\n  return (\n    <TokenDate\n      value={value}\n      date={formatManualRegistrationTokenDate(value)}\n      timestamp={formatManualRegistrationTokenTimestamp(value)}\n    />\n  );\n}\n\nfunction RevokeManualRegistrationTokenButton({\n  workspaceId,\n  token,\n}: {\n  workspaceId: string;\n  token: ManualRegistrationToken;\n}) {\n  const revokeToken = useRevokeManualRegistrationTokenMutation(workspaceId);\n  const [open, setOpen] = useState(false);\n  const tokenName = tokenDisplayName(token);\n\n  async function handleRevoke() {\n    try {\n      await revokeToken.mutateAsync(token.id);\n      setOpen(false);\n    } catch {\n      // React Query stores the error for the inline modal alert.\n    }\n  }\n\n  function handleOpenChange(nextOpen: boolean) {\n    setOpen(nextOpen);\n    if (nextOpen) {\n      revokeToken.reset();\n    }\n  }\n\n  function openRevokeConfirmation() {\n    revokeToken.reset();\n    setOpen(true);\n  }\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <IconButton\n            type=\"button\"\n            size=\"sm\"\n            variant=\"transparent\"\n            icon=\"more2Line\"\n            aria-label={`Open ${tokenName} registration token actions`}\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" size=\"sm\">\n          <DropdownMenuItem onSelect={openRevokeConfirmation}>Revoke token</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Modal open={open} onOpenChange={handleOpenChange}>\n        <ModalContent aria-describedby={undefined} className=\"max-w-[420px]\">\n          <ModalTitle className=\"sr-only\">Revoke token</ModalTitle>\n          <ModalHeader title=\"Revoke token?\" />\n          <ModalBody className=\"gap-16\">\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              {tokenName} will stop creating new runner sessions. Existing sessions and job leases\n              expire on their own.\n            </Text>\n            {revokeToken.isError ? (\n              <Callout role=\"alert\" type=\"error\">\n                <Text size=\"sm\">{manualRegistrationTokenErrorMessage(revokeToken.error)}</Text>\n              </Callout>\n            ) : null}\n          </ModalBody>\n          <ModalFooter>\n            <Button size=\"sm\" variant=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"danger\"\n              isLoading={revokeToken.isPending}\n              onClick={handleRevoke}\n            >\n              Revoke\n            </Button>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n}\n\nexport function EmptyManualRegistrationTokens() {\n  return (\n    <EmptyState\n      icon=\"key2Line\"\n      title=\"No usable manual registration tokens\"\n      description=\"Create a token to connect a runner to this workspace.\"\n    />\n  );\n}\n\nexport function ManualRegistrationTokenTableSkeleton() {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading manual registration tokens\"\n      className=\"flex flex-col gap-8\"\n    >\n      {[0, 1, 2].map((row) => (\n        <Skeleton key={row} className=\"h-44 w-full\" />\n      ))}\n    </div>\n  );\n}\n"],"names":["Button","IconButton","Callout","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","EmptyState","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","Skeleton","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","Code","Text","useState","tokenDisplayName","useRevokeManualRegistrationTokenMutation","manualRegistrationTokenErrorMessage","formatManualRegistrationTokenDate","formatManualRegistrationTokenTimestamp","TokenDate","TokenName","ManualRegistrationTokenList","workspaceId","tokens","div","className","map","token","name","variant","prefix","ManualRegistrationTokenDate","value","expiresAt","createdAt","RevokeManualRegistrationTokenButton","id","ul","aria-label","li","dl","dt","dd","date","timestamp","revokeToken","open","setOpen","tokenName","handleRevoke","mutateAsync","handleOpenChange","nextOpen","reset","openRevokeConfirmation","asChild","type","size","icon","align","onSelect","onOpenChange","aria-describedby","undefined","title","isError","role","error","onClick","isLoading","isPending","EmptyManualRegistrationTokens","description","ManualRegistrationTokenTableSkeleton","row"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/manual-registration-token-list.tsx"],"sourcesContent":["import {Button, IconButton} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@shipfox/react-ui/dropdown-menu';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@shipfox/react-ui/modal';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@shipfox/react-ui/table';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport {type ManualRegistrationToken, tokenDisplayName} from '#core/token.js';\nimport {useRevokeManualRegistrationTokenMutation} from '#hooks/api/manual-registration-tokens.js';\nimport {manualRegistrationTokenErrorMessage} from './manual-registration-token-errors.js';\nimport {\n  formatManualRegistrationTokenDate,\n  formatManualRegistrationTokenTimestamp,\n} from './manual-registration-token-format.js';\nimport {TokenDate} from './token-date.js';\nimport {TokenName} from './token-name.js';\n\nexport function ManualRegistrationTokenList({\n  workspaceId,\n  tokens,\n}: {\n  workspaceId: string;\n  tokens: ManualRegistrationToken[];\n}) {\n  return (\n    <>\n      <div className=\"max-[760px]:hidden\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[34%]\">Name</TableHead>\n              <TableHead>Prefix</TableHead>\n              <TableHead className=\"w-128\">Expires</TableHead>\n              <TableHead className=\"w-128\">Created</TableHead>\n              <TableHead className=\"w-80 text-right\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tokens.map((token) => (\n              <TableRow key={token.id}>\n                <TableCell>\n                  <TokenName name={tokenDisplayName(token)} />\n                </TableCell>\n                <TableCell>\n                  <Code variant=\"paragraph\" className=\"block truncate\">\n                    {token.prefix}\n                  </Code>\n                </TableCell>\n                <TableCell>\n                  <ManualRegistrationTokenDate value={token.expiresAt} />\n                </TableCell>\n                <TableCell>\n                  <ManualRegistrationTokenDate value={token.createdAt} />\n                </TableCell>\n                <TableCell className=\"text-right\">\n                  <RevokeManualRegistrationTokenButton workspaceId={workspaceId} token={token} />\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <ul\n        className=\"hidden flex-col gap-inline max-[760px]:flex\"\n        aria-label=\"Manual registration tokens\"\n      >\n        {tokens.map((token) => (\n          <li\n            key={token.id}\n            className=\"flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact\"\n          >\n            <div className=\"flex items-start justify-between gap-cluster\">\n              <div className=\"min-w-0 flex-1\">\n                <TokenName name={tokenDisplayName(token)} />\n                <Code variant=\"paragraph\" className=\"block truncate text-foreground-neutral-muted\">\n                  {token.prefix}\n                </Code>\n              </div>\n              <RevokeManualRegistrationTokenButton workspaceId={workspaceId} token={token} />\n            </div>\n            <dl className=\"grid grid-cols-2 gap-inline text-sm\">\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Expires</dt>\n                <dd>\n                  <ManualRegistrationTokenDate value={token.expiresAt} />\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Created</dt>\n                <dd>\n                  <ManualRegistrationTokenDate value={token.createdAt} />\n                </dd>\n              </div>\n            </dl>\n          </li>\n        ))}\n      </ul>\n    </>\n  );\n}\n\nfunction ManualRegistrationTokenDate({value}: {value: string | null}) {\n  return (\n    <TokenDate\n      value={value}\n      date={formatManualRegistrationTokenDate(value)}\n      timestamp={formatManualRegistrationTokenTimestamp(value)}\n    />\n  );\n}\n\nfunction RevokeManualRegistrationTokenButton({\n  workspaceId,\n  token,\n}: {\n  workspaceId: string;\n  token: ManualRegistrationToken;\n}) {\n  const revokeToken = useRevokeManualRegistrationTokenMutation(workspaceId);\n  const [open, setOpen] = useState(false);\n  const tokenName = tokenDisplayName(token);\n\n  async function handleRevoke() {\n    try {\n      await revokeToken.mutateAsync(token.id);\n      setOpen(false);\n    } catch {\n      // React Query stores the error for the inline modal alert.\n    }\n  }\n\n  function handleOpenChange(nextOpen: boolean) {\n    setOpen(nextOpen);\n    if (nextOpen) {\n      revokeToken.reset();\n    }\n  }\n\n  function openRevokeConfirmation() {\n    revokeToken.reset();\n    setOpen(true);\n  }\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <IconButton\n            type=\"button\"\n            size=\"sm\"\n            variant=\"transparent\"\n            icon=\"more2Line\"\n            aria-label={`Open ${tokenName} registration token actions`}\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" size=\"sm\">\n          <DropdownMenuItem onSelect={openRevokeConfirmation}>Revoke token</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Modal open={open} onOpenChange={handleOpenChange}>\n        <ModalContent aria-describedby={undefined} className=\"max-w-[420px]\">\n          <ModalTitle className=\"sr-only\">Revoke token</ModalTitle>\n          <ModalHeader title=\"Revoke token?\" />\n          <ModalBody className=\"gap-group\">\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              {tokenName} will stop creating new runner sessions. Existing sessions and job leases\n              expire on their own.\n            </Text>\n            {revokeToken.isError ? (\n              <Callout role=\"alert\" type=\"error\">\n                <Text size=\"sm\">{manualRegistrationTokenErrorMessage(revokeToken.error)}</Text>\n              </Callout>\n            ) : null}\n          </ModalBody>\n          <ModalFooter>\n            <Button size=\"sm\" variant=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"danger\"\n              isLoading={revokeToken.isPending}\n              onClick={handleRevoke}\n            >\n              Revoke\n            </Button>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n}\n\nexport function EmptyManualRegistrationTokens() {\n  return (\n    <EmptyState\n      icon=\"key2Line\"\n      title=\"No usable manual registration tokens\"\n      description=\"Create a token to connect a runner to this workspace.\"\n    />\n  );\n}\n\nexport function ManualRegistrationTokenTableSkeleton() {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading manual registration tokens\"\n      className=\"flex flex-col gap-inline\"\n    >\n      {[0, 1, 2].map((row) => (\n        <Skeleton key={row} className=\"h-44 w-full\" />\n      ))}\n    </div>\n  );\n}\n"],"names":["Button","IconButton","Callout","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","EmptyState","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","Skeleton","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","Code","Text","useState","tokenDisplayName","useRevokeManualRegistrationTokenMutation","manualRegistrationTokenErrorMessage","formatManualRegistrationTokenDate","formatManualRegistrationTokenTimestamp","TokenDate","TokenName","ManualRegistrationTokenList","workspaceId","tokens","div","className","map","token","name","variant","prefix","ManualRegistrationTokenDate","value","expiresAt","createdAt","RevokeManualRegistrationTokenButton","id","ul","aria-label","li","dl","dt","dd","date","timestamp","revokeToken","open","setOpen","tokenName","handleRevoke","mutateAsync","handleOpenChange","nextOpen","reset","openRevokeConfirmation","asChild","type","size","icon","align","onSelect","onOpenChange","aria-describedby","undefined","title","isError","role","error","onClick","isLoading","isPending","EmptyManualRegistrationTokens","description","ManualRegistrationTokenTableSkeleton","row"],"mappings":"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"}

package/dist/components/manual-registration-tokens-settings-section.js

@@ -20,15 +20,15 @@ export function WorkspaceManualRegistrationTokensSettingsSection({ workspaceId }
         }
     }
     return /*#__PURE__*/ _jsx("div", {
-        className: "flex min-w-0 flex-col gap-32",
+        className: "flex min-w-0 flex-col gap-region",
         children: /*#__PURE__*/ _jsxs("section", {
-            className: "flex flex-col gap-16",
+            className: "flex flex-col gap-group",
             children: [
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "flex items-center justify-between gap-16 max-[640px]:items-start",
+                    className: "flex items-center justify-between gap-group max-[640px]:items-start",
                     children: [
                         /*#__PURE__*/ _jsxs("div", {
-                            className: "flex flex-col gap-4",
+                            className: "flex flex-col gap-tight",
                             children: [
                                 /*#__PURE__*/ _jsx(Header, {
                                     variant: "h3",
@@ -42,11 +42,11 @@ export function WorkspaceManualRegistrationTokensSettingsSection({ workspaceId }
                             ]
                         }),
                         /*#__PURE__*/ _jsxs("div", {
-                            className: "flex items-center gap-12",
+                            className: "flex items-center gap-cluster",
                             children: [
                                 tokensQuery.isFetching && !tokensQuery.isPending ? /*#__PURE__*/ _jsx(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,
                                 /*#__PURE__*/ _jsxs(Modal, {
@@ -75,7 +75,7 @@ export function WorkspaceManualRegistrationTokensSettingsSection({ workspaceId }
                                                     })
                                                 }),
                                                 createdToken ? /*#__PURE__*/ _jsx(ModalBody, {
-                                                    className: "gap-16",
+                                                    className: "gap-group",
                                                     children: /*#__PURE__*/ _jsx(CreatedManualRegistrationTokenPanel, {
                                                         token: createdToken
                                                     })

package/dist/components/manual-registration-tokens-settings-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/manual-registration-tokens-settings-section.tsx"],"sourcesContent":["import {QueryLoadError} from '@shipfox/client-ui';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Icon} from '@shipfox/react-ui/icon';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalHeader,\n  ModalTitle,\n  ModalTrigger,\n} from '@shipfox/react-ui/modal';\nimport {Header, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport type {CreatedManualRegistrationToken} from '#core/token.js';\nimport {useManualRegistrationTokensQuery} from '#hooks/api/manual-registration-tokens.js';\nimport {\n  CreatedManualRegistrationTokenPanel,\n  CreateManualRegistrationTokenForm,\n} from './create-manual-registration-token-form.js';\nimport {\n  EmptyManualRegistrationTokens,\n  ManualRegistrationTokenList,\n  ManualRegistrationTokenTableSkeleton,\n} from './manual-registration-token-list.js';\n\nexport function WorkspaceManualRegistrationTokensSettingsSection({\n  workspaceId,\n}: {\n  workspaceId: string;\n}) {\n  const tokensQuery = useManualRegistrationTokensQuery(workspaceId);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [createdToken, setCreatedToken] = useState<CreatedManualRegistrationToken | null>(null);\n  const tokens = tokensQuery.data ?? [];\n\n  function handleOpenChange(nextOpen: boolean) {\n    setIsModalOpen(nextOpen);\n    if (!nextOpen) {\n      setCreatedToken(null);\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-32\">\n      <section className=\"flex flex-col gap-16\">\n        <div className=\"flex items-center justify-between gap-16 max-[640px]:items-start\">\n          <div className=\"flex flex-col gap-4\">\n            <Header variant=\"h3\">Runner registration tokens</Header>\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              Register individual runner agents that run jobs directly in this workspace. Tokens are\n              reusable until revoked.\n            </Text>\n          </div>\n          <div className=\"flex items-center gap-12\">\n            {tokensQuery.isFetching && !tokensQuery.isPending ? (\n              <Icon\n                name=\"loader4Line\"\n                className=\"mt-2 size-18 text-foreground-neutral-muted\"\n                aria-label=\"Refreshing tokens\"\n              />\n            ) : null}\n            <Modal open={isModalOpen} onOpenChange={handleOpenChange}>\n              <ModalTrigger asChild>\n                <Button>Create token</Button>\n              </ModalTrigger>\n              <ModalContent aria-describedby={undefined}>\n                <ModalTitle className=\"sr-only\">Create manual registration token</ModalTitle>\n                <ModalHeader>\n                  <Text\n                    size=\"lg\"\n                    aria-hidden=\"true\"\n                    className=\"overflow-ellipsis overflow-hidden whitespace-nowrap\"\n                  >\n                    Create manual registration token\n                  </Text>\n                </ModalHeader>\n                {createdToken ? (\n                  <ModalBody className=\"gap-16\">\n                    <CreatedManualRegistrationTokenPanel token={createdToken} />\n                  </ModalBody>\n                ) : (\n                  <CreateManualRegistrationTokenForm\n                    workspaceId={workspaceId}\n                    onCreated={setCreatedToken}\n                  />\n                )}\n              </ModalContent>\n            </Modal>\n          </div>\n        </div>\n\n        {tokensQuery.isPending ? <ManualRegistrationTokenTableSkeleton /> : null}\n\n        {tokensQuery.isError && tokensQuery.data === undefined ? (\n          <QueryLoadError query={tokensQuery} subject=\"manual registration tokens\" />\n        ) : null}\n\n        {tokensQuery.data !== undefined && tokens.length === 0 ? (\n          <EmptyManualRegistrationTokens />\n        ) : null}\n\n        {tokens.length > 0 ? (\n          <ManualRegistrationTokenList workspaceId={workspaceId} tokens={tokens} />\n        ) : null}\n      </section>\n    </div>\n  );\n}\n"],"names":["QueryLoadError","Button","Icon","Modal","ModalBody","ModalContent","ModalHeader","ModalTitle","ModalTrigger","Header","Text","useState","useManualRegistrationTokensQuery","CreatedManualRegistrationTokenPanel","CreateManualRegistrationTokenForm","EmptyManualRegistrationTokens","ManualRegistrationTokenList","ManualRegistrationTokenTableSkeleton","WorkspaceManualRegistrationTokensSettingsSection","workspaceId","tokensQuery","isModalOpen","setIsModalOpen","createdToken","setCreatedToken","tokens","data","handleOpenChange","nextOpen","div","className","section","variant","size","isFetching","isPending","name","aria-label","open","onOpenChange","asChild","aria-describedby","undefined","aria-hidden","token","onCreated","isError","query","subject","length"],"mappings":";AAAA,SAAQA,cAAc,QAAO,qBAAqB;AAClD,SAAQC,MAAM,QAAO,2BAA2B;AAChD,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SACEC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,UAAU,EACVC,YAAY,QACP,0BAA0B;AACjC,SAAQC,MAAM,EAAEC,IAAI,QAAO,+BAA+B;AAC1D,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,SAAQC,gCAAgC,QAAO,2CAA2C;AAC1F,SACEC,mCAAmC,EACnCC,iCAAiC,QAC5B,6CAA6C;AACpD,SACEC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,oCAAoC,QAC/B,sCAAsC;AAE7C,OAAO,SAASC,iDAAiD,EAC/DC,WAAW,EAGZ;IACC,MAAMC,cAAcR,iCAAiCO;IACrD,MAAM,CAACE,aAAaC,eAAe,GAAGX,SAAS;IAC/C,MAAM,CAACY,cAAcC,gBAAgB,GAAGb,SAAgD;IACxF,MAAMc,SAASL,YAAYM,IAAI,IAAI,EAAE;IAErC,SAASC,iBAAiBC,QAAiB;QACzCN,eAAeM;QACf,IAAI,CAACA,UAAU;YACbJ,gBAAgB;QAClB;IACF;IAEA,qBACE,KAACK;QAAIC,WAAU;kBACb,cAAA,MAACC;YAAQD,WAAU;;8BACjB,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACrB;oCAAOuB,SAAQ;8CAAK;;8CACrB,KAACtB;oCAAKuB,MAAK;oCAAKH,WAAU;8CAAgC;;;;sCAK5D,MAACD;4BAAIC,WAAU;;gCACZV,YAAYc,UAAU,IAAI,CAACd,YAAYe,SAAS,iBAC/C,KAACjC;oCACCkC,MAAK;oCACLN,WAAU;oCACVO,cAAW;qCAEX;8CACJ,MAAClC;oCAAMmC,MAAMjB;oCAAakB,cAAcZ;;sDACtC,KAACnB;4CAAagC,OAAO;sDACnB,cAAA,KAACvC;0DAAO;;;sDAEV,MAACI;4CAAaoC,oBAAkBC;;8DAC9B,KAACnC;oDAAWuB,WAAU;8DAAU;;8DAChC,KAACxB;8DACC,cAAA,KAACI;wDACCuB,MAAK;wDACLU,eAAY;wDACZb,WAAU;kEACX;;;gDAIFP,6BACC,KAACnB;oDAAU0B,WAAU;8DACnB,cAAA,KAACjB;wDAAoC+B,OAAOrB;;mEAG9C,KAACT;oDACCK,aAAaA;oDACb0B,WAAWrB;;;;;;;;;;gBAQtBJ,YAAYe,SAAS,iBAAG,KAAClB,4CAA0C;gBAEnEG,YAAY0B,OAAO,IAAI1B,YAAYM,IAAI,KAAKgB,0BAC3C,KAAC1C;oBAAe+C,OAAO3B;oBAAa4B,SAAQ;qBAC1C;gBAEH5B,YAAYM,IAAI,KAAKgB,aAAajB,OAAOwB,MAAM,KAAK,kBACnD,KAAClC,qCACC;gBAEHU,OAAOwB,MAAM,GAAG,kBACf,KAACjC;oBAA4BG,aAAaA;oBAAaM,QAAQA;qBAC7D;;;;AAIZ"}
+{"version":3,"sources":["../../src/components/manual-registration-tokens-settings-section.tsx"],"sourcesContent":["import {QueryLoadError} from '@shipfox/client-ui';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Icon} from '@shipfox/react-ui/icon';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalHeader,\n  ModalTitle,\n  ModalTrigger,\n} from '@shipfox/react-ui/modal';\nimport {Header, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport type {CreatedManualRegistrationToken} from '#core/token.js';\nimport {useManualRegistrationTokensQuery} from '#hooks/api/manual-registration-tokens.js';\nimport {\n  CreatedManualRegistrationTokenPanel,\n  CreateManualRegistrationTokenForm,\n} from './create-manual-registration-token-form.js';\nimport {\n  EmptyManualRegistrationTokens,\n  ManualRegistrationTokenList,\n  ManualRegistrationTokenTableSkeleton,\n} from './manual-registration-token-list.js';\n\nexport function WorkspaceManualRegistrationTokensSettingsSection({\n  workspaceId,\n}: {\n  workspaceId: string;\n}) {\n  const tokensQuery = useManualRegistrationTokensQuery(workspaceId);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [createdToken, setCreatedToken] = useState<CreatedManualRegistrationToken | null>(null);\n  const tokens = tokensQuery.data ?? [];\n\n  function handleOpenChange(nextOpen: boolean) {\n    setIsModalOpen(nextOpen);\n    if (!nextOpen) {\n      setCreatedToken(null);\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 flex-col gap-region\">\n      <section className=\"flex flex-col gap-group\">\n        <div className=\"flex items-center justify-between gap-group max-[640px]:items-start\">\n          <div className=\"flex flex-col gap-tight\">\n            <Header variant=\"h3\">Runner registration tokens</Header>\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              Register individual runner agents that run jobs directly in this workspace. Tokens are\n              reusable until revoked.\n            </Text>\n          </div>\n          <div className=\"flex items-center gap-cluster\">\n            {tokensQuery.isFetching && !tokensQuery.isPending ? (\n              <Icon\n                name=\"loader4Line\"\n                className=\"mt-[2px] size-18 text-foreground-neutral-muted\"\n                aria-label=\"Refreshing tokens\"\n              />\n            ) : null}\n            <Modal open={isModalOpen} onOpenChange={handleOpenChange}>\n              <ModalTrigger asChild>\n                <Button>Create token</Button>\n              </ModalTrigger>\n              <ModalContent aria-describedby={undefined}>\n                <ModalTitle className=\"sr-only\">Create manual registration token</ModalTitle>\n                <ModalHeader>\n                  <Text\n                    size=\"lg\"\n                    aria-hidden=\"true\"\n                    className=\"overflow-ellipsis overflow-hidden whitespace-nowrap\"\n                  >\n                    Create manual registration token\n                  </Text>\n                </ModalHeader>\n                {createdToken ? (\n                  <ModalBody className=\"gap-group\">\n                    <CreatedManualRegistrationTokenPanel token={createdToken} />\n                  </ModalBody>\n                ) : (\n                  <CreateManualRegistrationTokenForm\n                    workspaceId={workspaceId}\n                    onCreated={setCreatedToken}\n                  />\n                )}\n              </ModalContent>\n            </Modal>\n          </div>\n        </div>\n\n        {tokensQuery.isPending ? <ManualRegistrationTokenTableSkeleton /> : null}\n\n        {tokensQuery.isError && tokensQuery.data === undefined ? (\n          <QueryLoadError query={tokensQuery} subject=\"manual registration tokens\" />\n        ) : null}\n\n        {tokensQuery.data !== undefined && tokens.length === 0 ? (\n          <EmptyManualRegistrationTokens />\n        ) : null}\n\n        {tokens.length > 0 ? (\n          <ManualRegistrationTokenList workspaceId={workspaceId} tokens={tokens} />\n        ) : null}\n      </section>\n    </div>\n  );\n}\n"],"names":["QueryLoadError","Button","Icon","Modal","ModalBody","ModalContent","ModalHeader","ModalTitle","ModalTrigger","Header","Text","useState","useManualRegistrationTokensQuery","CreatedManualRegistrationTokenPanel","CreateManualRegistrationTokenForm","EmptyManualRegistrationTokens","ManualRegistrationTokenList","ManualRegistrationTokenTableSkeleton","WorkspaceManualRegistrationTokensSettingsSection","workspaceId","tokensQuery","isModalOpen","setIsModalOpen","createdToken","setCreatedToken","tokens","data","handleOpenChange","nextOpen","div","className","section","variant","size","isFetching","isPending","name","aria-label","open","onOpenChange","asChild","aria-describedby","undefined","aria-hidden","token","onCreated","isError","query","subject","length"],"mappings":";AAAA,SAAQA,cAAc,QAAO,qBAAqB;AAClD,SAAQC,MAAM,QAAO,2BAA2B;AAChD,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SACEC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,UAAU,EACVC,YAAY,QACP,0BAA0B;AACjC,SAAQC,MAAM,EAAEC,IAAI,QAAO,+BAA+B;AAC1D,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,SAAQC,gCAAgC,QAAO,2CAA2C;AAC1F,SACEC,mCAAmC,EACnCC,iCAAiC,QAC5B,6CAA6C;AACpD,SACEC,6BAA6B,EAC7BC,2BAA2B,EAC3BC,oCAAoC,QAC/B,sCAAsC;AAE7C,OAAO,SAASC,iDAAiD,EAC/DC,WAAW,EAGZ;IACC,MAAMC,cAAcR,iCAAiCO;IACrD,MAAM,CAACE,aAAaC,eAAe,GAAGX,SAAS;IAC/C,MAAM,CAACY,cAAcC,gBAAgB,GAAGb,SAAgD;IACxF,MAAMc,SAASL,YAAYM,IAAI,IAAI,EAAE;IAErC,SAASC,iBAAiBC,QAAiB;QACzCN,eAAeM;QACf,IAAI,CAACA,UAAU;YACbJ,gBAAgB;QAClB;IACF;IAEA,qBACE,KAACK;QAAIC,WAAU;kBACb,cAAA,MAACC;YAAQD,WAAU;;8BACjB,MAACD;oBAAIC,WAAU;;sCACb,MAACD;4BAAIC,WAAU;;8CACb,KAACrB;oCAAOuB,SAAQ;8CAAK;;8CACrB,KAACtB;oCAAKuB,MAAK;oCAAKH,WAAU;8CAAgC;;;;sCAK5D,MAACD;4BAAIC,WAAU;;gCACZV,YAAYc,UAAU,IAAI,CAACd,YAAYe,SAAS,iBAC/C,KAACjC;oCACCkC,MAAK;oCACLN,WAAU;oCACVO,cAAW;qCAEX;8CACJ,MAAClC;oCAAMmC,MAAMjB;oCAAakB,cAAcZ;;sDACtC,KAACnB;4CAAagC,OAAO;sDACnB,cAAA,KAACvC;0DAAO;;;sDAEV,MAACI;4CAAaoC,oBAAkBC;;8DAC9B,KAACnC;oDAAWuB,WAAU;8DAAU;;8DAChC,KAACxB;8DACC,cAAA,KAACI;wDACCuB,MAAK;wDACLU,eAAY;wDACZb,WAAU;kEACX;;;gDAIFP,6BACC,KAACnB;oDAAU0B,WAAU;8DACnB,cAAA,KAACjB;wDAAoC+B,OAAOrB;;mEAG9C,KAACT;oDACCK,aAAaA;oDACb0B,WAAWrB;;;;;;;;;;gBAQtBJ,YAAYe,SAAS,iBAAG,KAAClB,4CAA0C;gBAEnEG,YAAY0B,OAAO,IAAI1B,YAAYM,IAAI,KAAKgB,0BAC3C,KAAC1C;oBAAe+C,OAAO3B;oBAAa4B,SAAQ;qBAC1C;gBAEH5B,YAAYM,IAAI,KAAKgB,aAAajB,OAAOwB,MAAM,KAAK,kBACnD,KAAClC,qCACC;gBAEHU,OAAOwB,MAAM,GAAG,kBACf,KAACjC;oBAA4BG,aAAaA;oBAAaM,QAAQA;qBAC7D;;;;AAIZ"}

package/dist/components/provisioner-token-list.js

@@ -98,13 +98,13 @@ export function ProvisionerTokenList({ workspaceId, tokens, activeIds }) {
                 })
             }),
             /*#__PURE__*/ _jsx("ul", {
-                className: "hidden flex-col gap-10 max-[760px]:flex",
+                className: "hidden flex-col gap-inline max-[760px]:flex",
                 "aria-label": "Provisioner tokens",
                 children: tokens.map((token)=>/*#__PURE__*/ _jsxs("li", {
-                        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",
                         children: [
                             /*#__PURE__*/ _jsxs("div", {
-                                className: "flex items-start justify-between gap-12",
+                                className: "flex items-start justify-between gap-cluster",
                                 children: [
                                     /*#__PURE__*/ _jsxs("div", {
                                         className: "min-w-0 flex-1",
@@ -126,7 +126,7 @@ export function ProvisionerTokenList({ workspaceId, tokens, activeIds }) {
                                 ]
                             }),
                             /*#__PURE__*/ _jsxs("dl", {
-                                className: "mt-12 grid grid-cols-2 gap-10 text-sm",
+                                className: "grid grid-cols-2 gap-inline text-sm",
                                 children: [
                                     /*#__PURE__*/ _jsxs("div", {
                                         children: [
@@ -186,7 +186,7 @@ function ProvisionerTokenDate({ value }) {
 function ProvisionerStatusCell({ token, activeIds }) {
     const status = provisionerConnectionStatus(token, activeIds);
     return /*#__PURE__*/ _jsxs("span", {
-        className: "inline-flex items-center gap-6",
+        className: "inline-flex items-center gap-inline",
         children: [
             /*#__PURE__*/ _jsx(Dot, {
                 variant: status.dotVariant
@@ -266,7 +266,7 @@ function RevokeProvisionerTokenButton({ workspaceId, token }) {
                             title: "Revoke token?"
                         }),
                         /*#__PURE__*/ _jsxs(ModalBody, {
-                            className: "gap-16",
+                            className: "gap-group",
                             children: [
                                 /*#__PURE__*/ _jsxs(Text, {
                                     size: "sm",
@@ -320,7 +320,7 @@ export function ProvisionerTokenTableSkeleton() {
     return /*#__PURE__*/ _jsx("div", {
         role: "status",
         "aria-label": "Loading provisioner tokens",
-        className: "flex flex-col gap-8",
+        className: "flex flex-col gap-inline",
         children: [
             0,
             1,

package/dist/components/provisioner-token-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/provisioner-token-list.tsx"],"sourcesContent":["import {Button, IconButton} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {Dot} from '@shipfox/react-ui/dot';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@shipfox/react-ui/dropdown-menu';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@shipfox/react-ui/modal';\nimport {RelativeTime} from '@shipfox/react-ui/relative-time';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@shipfox/react-ui/table';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport {\n  type ProvisionerToken,\n  provisionerConnectionStatus,\n  provisionerTokenDisplayName,\n} from '#core/token.js';\nimport {useRevokeProvisionerTokenMutation} from '#hooks/api/provisioner-tokens.js';\nimport {provisionerTokenErrorMessage} from './provisioner-token-errors.js';\nimport {\n  formatProvisionerTokenDate,\n  formatProvisionerTokenTimestamp,\n} from './provisioner-token-format.js';\nimport {TokenDate} from './token-date.js';\nimport {TokenName} from './token-name.js';\n\nexport function ProvisionerTokenList({\n  workspaceId,\n  tokens,\n  activeIds,\n}: {\n  workspaceId: string;\n  tokens: ProvisionerToken[];\n  activeIds: ReadonlySet<string>;\n}) {\n  return (\n    <>\n      <div className=\"max-[760px]:hidden\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[28%]\">Name</TableHead>\n              <TableHead>Prefix</TableHead>\n              <TableHead className=\"w-[18%]\">Status</TableHead>\n              <TableHead className=\"w-112\">Expires</TableHead>\n              <TableHead className=\"w-112\">Created</TableHead>\n              <TableHead className=\"w-80 text-right\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tokens.map((token) => (\n              <TableRow key={token.id}>\n                <TableCell>\n                  <TokenName name={provisionerTokenDisplayName(token)} />\n                </TableCell>\n                <TableCell>\n                  <Code variant=\"paragraph\" className=\"block truncate\">\n                    {token.prefix}\n                  </Code>\n                </TableCell>\n                <TableCell>\n                  <ProvisionerStatusCell token={token} activeIds={activeIds} />\n                </TableCell>\n                <TableCell>\n                  <ProvisionerTokenDate value={token.expiresAt} />\n                </TableCell>\n                <TableCell>\n                  <ProvisionerTokenDate value={token.createdAt} />\n                </TableCell>\n                <TableCell className=\"text-right\">\n                  <RevokeProvisionerTokenButton workspaceId={workspaceId} token={token} />\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <ul className=\"hidden flex-col gap-10 max-[760px]:flex\" aria-label=\"Provisioner tokens\">\n        {tokens.map((token) => (\n          <li\n            key={token.id}\n            className=\"rounded-8 border border-border-neutral-base bg-background-neutral-base p-14\"\n          >\n            <div className=\"flex items-start justify-between gap-12\">\n              <div className=\"min-w-0 flex-1\">\n                <TokenName name={provisionerTokenDisplayName(token)} />\n                <Code variant=\"paragraph\" className=\"block truncate text-foreground-neutral-muted\">\n                  {token.prefix}\n                </Code>\n              </div>\n              <RevokeProvisionerTokenButton workspaceId={workspaceId} token={token} />\n            </div>\n            <dl className=\"mt-12 grid grid-cols-2 gap-10 text-sm\">\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Status</dt>\n                <dd>\n                  <ProvisionerStatusCell token={token} activeIds={activeIds} />\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Expires</dt>\n                <dd>\n                  <ProvisionerTokenDate value={token.expiresAt} />\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Created</dt>\n                <dd>\n                  <ProvisionerTokenDate value={token.createdAt} />\n                </dd>\n              </div>\n            </dl>\n          </li>\n        ))}\n      </ul>\n    </>\n  );\n}\n\nfunction ProvisionerTokenDate({value}: {value: string | null}) {\n  return (\n    <TokenDate\n      value={value}\n      date={formatProvisionerTokenDate(value)}\n      timestamp={formatProvisionerTokenTimestamp(value)}\n    />\n  );\n}\n\nfunction ProvisionerStatusCell({\n  token,\n  activeIds,\n}: {\n  token: ProvisionerToken;\n  activeIds: ReadonlySet<string>;\n}) {\n  const status = provisionerConnectionStatus(token, activeIds);\n\n  return (\n    <span className=\"inline-flex items-center gap-6\">\n      <Dot variant={status.dotVariant} />\n      {status.kind === 'last-seen' ? (\n        <span>\n          {status.label} <RelativeTime value={status.lastSeenAt} />\n        </span>\n      ) : (\n        <span>{status.label}</span>\n      )}\n    </span>\n  );\n}\n\nfunction RevokeProvisionerTokenButton({\n  workspaceId,\n  token,\n}: {\n  workspaceId: string;\n  token: ProvisionerToken;\n}) {\n  const revokeToken = useRevokeProvisionerTokenMutation(workspaceId);\n  const [open, setOpen] = useState(false);\n  const tokenName = provisionerTokenDisplayName(token);\n\n  async function handleRevoke() {\n    try {\n      await revokeToken.mutateAsync(token.id);\n      setOpen(false);\n    } catch {\n      // React Query stores the error for the inline modal alert.\n    }\n  }\n\n  function handleOpenChange(nextOpen: boolean) {\n    setOpen(nextOpen);\n    if (nextOpen) {\n      revokeToken.reset();\n    }\n  }\n\n  function openRevokeConfirmation() {\n    revokeToken.reset();\n    setOpen(true);\n  }\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <IconButton\n            type=\"button\"\n            size=\"sm\"\n            variant=\"transparent\"\n            icon=\"more2Line\"\n            aria-label={`Open ${tokenName} token actions`}\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" size=\"sm\">\n          <DropdownMenuItem onSelect={openRevokeConfirmation}>Revoke token</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Modal open={open} onOpenChange={handleOpenChange}>\n        <ModalContent aria-describedby={undefined} className=\"max-w-[420px]\">\n          <ModalTitle className=\"sr-only\">Revoke token</ModalTitle>\n          <ModalHeader title=\"Revoke token?\" />\n          <ModalBody className=\"gap-16\">\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              {tokenName} will stop authenticating this provisioner. Runners it already provisioned\n              keep running until their leases expire.\n            </Text>\n            {revokeToken.isError ? (\n              <Callout role=\"alert\" type=\"error\">\n                <Text size=\"sm\">{provisionerTokenErrorMessage(revokeToken.error)}</Text>\n              </Callout>\n            ) : null}\n          </ModalBody>\n          <ModalFooter>\n            <Button size=\"sm\" variant=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"danger\"\n              isLoading={revokeToken.isPending}\n              onClick={handleRevoke}\n            >\n              Revoke\n            </Button>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n}\n\nexport function EmptyProvisionerTokens() {\n  return (\n    <EmptyState\n      icon=\"key2Line\"\n      title=\"No usable provisioner registration tokens\"\n      description=\"Create a token to connect a provisioner that provisions runners on demand.\"\n    />\n  );\n}\n\nexport function ProvisionerTokenTableSkeleton() {\n  return (\n    <div role=\"status\" aria-label=\"Loading provisioner tokens\" className=\"flex flex-col gap-8\">\n      {[0, 1, 2].map((row) => (\n        <Skeleton key={row} className=\"h-44 w-full\" />\n      ))}\n    </div>\n  );\n}\n"],"names":["Button","IconButton","Callout","Dot","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","EmptyState","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","RelativeTime","Skeleton","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","Code","Text","useState","provisionerConnectionStatus","provisionerTokenDisplayName","useRevokeProvisionerTokenMutation","provisionerTokenErrorMessage","formatProvisionerTokenDate","formatProvisionerTokenTimestamp","TokenDate","TokenName","ProvisionerTokenList","workspaceId","tokens","activeIds","div","className","map","token","name","variant","prefix","ProvisionerStatusCell","ProvisionerTokenDate","value","expiresAt","createdAt","RevokeProvisionerTokenButton","id","ul","aria-label","li","dl","dt","dd","date","timestamp","status","span","dotVariant","kind","label","lastSeenAt","revokeToken","open","setOpen","tokenName","handleRevoke","mutateAsync","handleOpenChange","nextOpen","reset","openRevokeConfirmation","asChild","type","size","icon","align","onSelect","onOpenChange","aria-describedby","undefined","title","isError","role","error","onClick","isLoading","isPending","EmptyProvisionerTokens","description","ProvisionerTokenTableSkeleton","row"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/provisioner-token-list.tsx"],"sourcesContent":["import {Button, IconButton} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {Dot} from '@shipfox/react-ui/dot';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@shipfox/react-ui/dropdown-menu';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n} from '@shipfox/react-ui/modal';\nimport {RelativeTime} from '@shipfox/react-ui/relative-time';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@shipfox/react-ui/table';\nimport {Code, Text} from '@shipfox/react-ui/typography';\nimport {useState} from 'react';\nimport {\n  type ProvisionerToken,\n  provisionerConnectionStatus,\n  provisionerTokenDisplayName,\n} from '#core/token.js';\nimport {useRevokeProvisionerTokenMutation} from '#hooks/api/provisioner-tokens.js';\nimport {provisionerTokenErrorMessage} from './provisioner-token-errors.js';\nimport {\n  formatProvisionerTokenDate,\n  formatProvisionerTokenTimestamp,\n} from './provisioner-token-format.js';\nimport {TokenDate} from './token-date.js';\nimport {TokenName} from './token-name.js';\n\nexport function ProvisionerTokenList({\n  workspaceId,\n  tokens,\n  activeIds,\n}: {\n  workspaceId: string;\n  tokens: ProvisionerToken[];\n  activeIds: ReadonlySet<string>;\n}) {\n  return (\n    <>\n      <div className=\"max-[760px]:hidden\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[28%]\">Name</TableHead>\n              <TableHead>Prefix</TableHead>\n              <TableHead className=\"w-[18%]\">Status</TableHead>\n              <TableHead className=\"w-112\">Expires</TableHead>\n              <TableHead className=\"w-112\">Created</TableHead>\n              <TableHead className=\"w-80 text-right\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {tokens.map((token) => (\n              <TableRow key={token.id}>\n                <TableCell>\n                  <TokenName name={provisionerTokenDisplayName(token)} />\n                </TableCell>\n                <TableCell>\n                  <Code variant=\"paragraph\" className=\"block truncate\">\n                    {token.prefix}\n                  </Code>\n                </TableCell>\n                <TableCell>\n                  <ProvisionerStatusCell token={token} activeIds={activeIds} />\n                </TableCell>\n                <TableCell>\n                  <ProvisionerTokenDate value={token.expiresAt} />\n                </TableCell>\n                <TableCell>\n                  <ProvisionerTokenDate value={token.createdAt} />\n                </TableCell>\n                <TableCell className=\"text-right\">\n                  <RevokeProvisionerTokenButton workspaceId={workspaceId} token={token} />\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <ul className=\"hidden flex-col gap-inline max-[760px]:flex\" aria-label=\"Provisioner tokens\">\n        {tokens.map((token) => (\n          <li\n            key={token.id}\n            className=\"flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact\"\n          >\n            <div className=\"flex items-start justify-between gap-cluster\">\n              <div className=\"min-w-0 flex-1\">\n                <TokenName name={provisionerTokenDisplayName(token)} />\n                <Code variant=\"paragraph\" className=\"block truncate text-foreground-neutral-muted\">\n                  {token.prefix}\n                </Code>\n              </div>\n              <RevokeProvisionerTokenButton workspaceId={workspaceId} token={token} />\n            </div>\n            <dl className=\"grid grid-cols-2 gap-inline text-sm\">\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Status</dt>\n                <dd>\n                  <ProvisionerStatusCell token={token} activeIds={activeIds} />\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Expires</dt>\n                <dd>\n                  <ProvisionerTokenDate value={token.expiresAt} />\n                </dd>\n              </div>\n              <div>\n                <dt className=\"text-foreground-neutral-muted\">Created</dt>\n                <dd>\n                  <ProvisionerTokenDate value={token.createdAt} />\n                </dd>\n              </div>\n            </dl>\n          </li>\n        ))}\n      </ul>\n    </>\n  );\n}\n\nfunction ProvisionerTokenDate({value}: {value: string | null}) {\n  return (\n    <TokenDate\n      value={value}\n      date={formatProvisionerTokenDate(value)}\n      timestamp={formatProvisionerTokenTimestamp(value)}\n    />\n  );\n}\n\nfunction ProvisionerStatusCell({\n  token,\n  activeIds,\n}: {\n  token: ProvisionerToken;\n  activeIds: ReadonlySet<string>;\n}) {\n  const status = provisionerConnectionStatus(token, activeIds);\n\n  return (\n    <span className=\"inline-flex items-center gap-inline\">\n      <Dot variant={status.dotVariant} />\n      {status.kind === 'last-seen' ? (\n        <span>\n          {status.label} <RelativeTime value={status.lastSeenAt} />\n        </span>\n      ) : (\n        <span>{status.label}</span>\n      )}\n    </span>\n  );\n}\n\nfunction RevokeProvisionerTokenButton({\n  workspaceId,\n  token,\n}: {\n  workspaceId: string;\n  token: ProvisionerToken;\n}) {\n  const revokeToken = useRevokeProvisionerTokenMutation(workspaceId);\n  const [open, setOpen] = useState(false);\n  const tokenName = provisionerTokenDisplayName(token);\n\n  async function handleRevoke() {\n    try {\n      await revokeToken.mutateAsync(token.id);\n      setOpen(false);\n    } catch {\n      // React Query stores the error for the inline modal alert.\n    }\n  }\n\n  function handleOpenChange(nextOpen: boolean) {\n    setOpen(nextOpen);\n    if (nextOpen) {\n      revokeToken.reset();\n    }\n  }\n\n  function openRevokeConfirmation() {\n    revokeToken.reset();\n    setOpen(true);\n  }\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <IconButton\n            type=\"button\"\n            size=\"sm\"\n            variant=\"transparent\"\n            icon=\"more2Line\"\n            aria-label={`Open ${tokenName} token actions`}\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" size=\"sm\">\n          <DropdownMenuItem onSelect={openRevokeConfirmation}>Revoke token</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Modal open={open} onOpenChange={handleOpenChange}>\n        <ModalContent aria-describedby={undefined} className=\"max-w-[420px]\">\n          <ModalTitle className=\"sr-only\">Revoke token</ModalTitle>\n          <ModalHeader title=\"Revoke token?\" />\n          <ModalBody className=\"gap-group\">\n            <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n              {tokenName} will stop authenticating this provisioner. Runners it already provisioned\n              keep running until their leases expire.\n            </Text>\n            {revokeToken.isError ? (\n              <Callout role=\"alert\" type=\"error\">\n                <Text size=\"sm\">{provisionerTokenErrorMessage(revokeToken.error)}</Text>\n              </Callout>\n            ) : null}\n          </ModalBody>\n          <ModalFooter>\n            <Button size=\"sm\" variant=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"danger\"\n              isLoading={revokeToken.isPending}\n              onClick={handleRevoke}\n            >\n              Revoke\n            </Button>\n          </ModalFooter>\n        </ModalContent>\n      </Modal>\n    </>\n  );\n}\n\nexport function EmptyProvisionerTokens() {\n  return (\n    <EmptyState\n      icon=\"key2Line\"\n      title=\"No usable provisioner registration tokens\"\n      description=\"Create a token to connect a provisioner that provisions runners on demand.\"\n    />\n  );\n}\n\nexport function ProvisionerTokenTableSkeleton() {\n  return (\n    <div role=\"status\" aria-label=\"Loading provisioner tokens\" className=\"flex flex-col gap-inline\">\n      {[0, 1, 2].map((row) => (\n        <Skeleton key={row} className=\"h-44 w-full\" />\n      ))}\n    </div>\n  );\n}\n"],"names":["Button","IconButton","Callout","Dot","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","EmptyState","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","RelativeTime","Skeleton","Table","TableBody","TableCell","TableHead","TableHeader","TableRow","Code","Text","useState","provisionerConnectionStatus","provisionerTokenDisplayName","useRevokeProvisionerTokenMutation","provisionerTokenErrorMessage","formatProvisionerTokenDate","formatProvisionerTokenTimestamp","TokenDate","TokenName","ProvisionerTokenList","workspaceId","tokens","activeIds","div","className","map","token","name","variant","prefix","ProvisionerStatusCell","ProvisionerTokenDate","value","expiresAt","createdAt","RevokeProvisionerTokenButton","id","ul","aria-label","li","dl","dt","dd","date","timestamp","status","span","dotVariant","kind","label","lastSeenAt","revokeToken","open","setOpen","tokenName","handleRevoke","mutateAsync","handleOpenChange","nextOpen","reset","openRevokeConfirmation","asChild","type","size","icon","align","onSelect","onOpenChange","aria-describedby","undefined","title","isError","role","error","onClick","isLoading","isPending","EmptyProvisionerTokens","description","ProvisionerTokenTableSkeleton","row"],"mappings":"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"}