@shipfox/client-projects 14.0.0 → 15.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-projects",
   "license": "MIT",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -31,13 +31,13 @@
     "@shipfox/api-definitions-dto": "12.0.0",
     "@shipfox/api-integration-core-dto": "12.0.0",
     "@shipfox/api-projects-dto": "12.0.0",
-    "@shipfox/client-agent": "14.0.0",
+    "@shipfox/client-agent": "15.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "14.0.0",
-    "@shipfox/client-integrations": "14.0.0",
-    "@shipfox/client-shell": "14.0.0",
-    "@shipfox/client-ui": "14.0.0",
-    "@shipfox/react-ui": "0.5.0"
+    "@shipfox/client-auth": "14.0.1",
+    "@shipfox/client-integrations": "14.0.1",
+    "@shipfox/client-shell": "14.0.1",
+    "@shipfox/client-ui": "14.0.1",
+    "@shipfox/react-ui": "1.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/model-provider-reminder-banner.tsx

@@ -34,7 +34,7 @@ export function ModelProviderReminderBanner({workspaceId}: {workspaceId: string}
         }
       }}
     >
-      <AlertContent className="pr-28">
+      <AlertContent className="pr-[28px]">
         <AlertTitle>Finish setting up a model provider</AlertTitle>
         <AlertDescription>
           Add workspace credentials, or keep using the instance default.

package/src/components/project-crumb.tsx

@@ -23,12 +23,12 @@ export function ProjectCrumb({
 
   if (projectSlug && projectName) {
     return (
-      <div className="flex items-center">
+      <div className="flex items-center gap-tight">
         <Link
           to="/w/$workspaceSlug/p/$projectSlug"
           params={{workspaceSlug, projectSlug}}
           aria-current="page"
-          className="text-md font-medium text-foreground-neutral-base px-6 py-4 rounded-6 hover:bg-background-components-hover transition-colors max-w-[240px] truncate"
+          className="text-md font-medium text-foreground-neutral-base p-tight rounded-6 hover:bg-background-components-hover transition-colors max-w-[240px] truncate"
         >
           {projectName}
         </Link>
@@ -39,7 +39,7 @@ export function ProjectCrumb({
               aria-label="Switch project"
               aria-haspopup="listbox"
               aria-expanded={open}
-              className="ml-2 grid place-items-center size-24 rounded-4 text-foreground-neutral-muted hover:bg-background-components-hover hover:text-foreground-neutral-base transition-colors"
+              className="grid place-items-center size-24 rounded-4 text-foreground-neutral-muted hover:bg-background-components-hover hover:text-foreground-neutral-base transition-colors"
             >
               <Icon name="arrowDownSLine" className="size-16" />
             </button>
@@ -65,7 +65,7 @@ export function ProjectCrumb({
           aria-label="Switch project"
           aria-haspopup="listbox"
           aria-expanded={open}
-          className="flex items-center gap-2 text-md font-medium text-foreground-neutral-base px-6 py-4 rounded-6 hover:bg-background-components-hover transition-colors"
+          className="flex items-center gap-tight text-md font-medium text-foreground-neutral-base p-tight rounded-6 hover:bg-background-components-hover transition-colors"
         >
           <span className="max-w-[240px] truncate">All projects</span>
           <Icon name="arrowDownSLine" className="size-16 text-foreground-neutral-muted" />

package/src/components/project-switcher.tsx

@@ -100,7 +100,7 @@ export function ProjectSwitcher({
           <CommandItem value="__all" keywords={['all projects']} onSelect={handleSelectAll}>
             <Icon
               name="check"
-              className={`size-16 mr-8 ${activeProjectId ? 'opacity-0' : 'opacity-100'}`}
+              className={`size-16 ${activeProjectId ? 'opacity-0' : 'opacity-100'}`}
             />
             All projects
           </CommandItem>
@@ -116,7 +116,7 @@ export function ProjectSwitcher({
               >
                 <Icon
                   name="check"
-                  className={`size-16 mr-8 ${
+                  className={`size-16 ${
                     activeProjectId === project.id ? 'opacity-100' : 'opacity-0'
                   }`}
                 />

package/src/components/source-strip.tsx

@@ -30,12 +30,12 @@ export function SourceStrip({
 
   return (
     <section
-      className="flex flex-col gap-8 rounded-8 border border-border-neutral-base bg-background-neutral-base px-14 py-10 sm:flex-row sm:items-center sm:justify-between"
+      className="flex flex-col gap-inline rounded-8 border border-border-neutral-base bg-background-neutral-base px-row py-row sm:flex-row sm:items-center sm:justify-between"
       aria-label="Project source"
     >
-      <div className="flex min-w-0 items-center gap-10">
+      <div className="flex min-w-0 items-center gap-inline">
         <Icon name={providerIconName(connection?.provider)} className="size-20 shrink-0" />
-        <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:gap-10">
+        <div className="flex min-w-0 flex-col gap-tight sm:flex-row sm:items-center sm:gap-inline">
           {connectionsQuery.isPending ? (
             <Skeleton className="h-16 w-160" />
           ) : (

package/src/pages/create-project-page.tsx

@@ -198,8 +198,8 @@ export function CreateProjectPage() {
     : 'No repositories visible to this connection.';
 
   return (
-    <div className="flex w-full flex-col gap-24">
-      <header className="flex flex-col gap-6">
+    <div className="flex w-full flex-col gap-section">
+      <header className="flex flex-col gap-inline">
         <Header id="create-project-title" variant="h1">
           Create project
         </Header>
@@ -213,7 +213,7 @@ export function CreateProjectPage() {
 
       {connectionsQuery.isError ? (
         <Callout role="alert" type="error">
-          <div className="flex w-full flex-wrap items-center justify-between gap-12">
+          <div className="flex w-full flex-wrap items-center justify-between gap-cluster">
             <Text size="sm" className="min-w-[240px] flex-1">
               Could not load source integrations. Refresh the integrations list to continue.
             </Text>
@@ -237,12 +237,12 @@ export function CreateProjectPage() {
         }}
         noValidate
         aria-labelledby="create-project-title"
-        className="grid items-start gap-32 lg:grid-cols-[minmax(0,1fr)_340px]"
+        className="grid items-start gap-region lg:grid-cols-[minmax(0,1fr)_340px]"
       >
-        <div className="flex min-w-0 flex-col gap-32">
-          <section className="flex flex-col gap-16" aria-label="Source integration">
-            <div className="flex items-start justify-between gap-16">
-              <div className="flex flex-col gap-4">
+        <div className="flex min-w-0 flex-col gap-region">
+          <section className="flex flex-col gap-group" aria-label="Source integration">
+            <div className="flex items-start justify-between gap-group">
+              <div className="flex flex-col gap-tight">
                 <Header variant="h3">Source integration</Header>
                 <Text size="sm" className="text-foreground-neutral-muted">
                   Choose the integration that can access the repository.
@@ -271,8 +271,8 @@ export function CreateProjectPage() {
           </section>
 
           {showRepoPicker ? (
-            <section className="flex flex-col gap-16" aria-label="Repository">
-              <div className="flex flex-col gap-4">
+            <section className="flex flex-col gap-group" aria-label="Repository">
+              <div className="flex flex-col gap-tight">
                 <Header variant="h3">Repository</Header>
                 <Text size="sm" className="text-foreground-neutral-muted">
                   Select the repository this project tracks.
@@ -296,8 +296,8 @@ export function CreateProjectPage() {
         </div>
 
         <aside className="lg:sticky lg:top-32">
-          <div className="flex flex-col gap-18 rounded-8 border border-border-neutral-base bg-background-neutral-base p-20">
-            <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-group rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel">
+            <div className="flex flex-col gap-tight">
               <Header variant="h3">Project details</Header>
               <Text size="sm" className="text-foreground-neutral-muted">
                 Confirm the source and create the project.
@@ -409,7 +409,7 @@ function ProjectSummary({
   repositoryName: string | undefined;
 }) {
   return (
-    <div className="flex min-w-0 items-center gap-10">
+    <div className="flex min-w-0 items-center gap-inline">
       {repositoryName ? (
         <IntegrationIcon
           source={connection?.provider}

package/src/pages/project-settings-page.tsx

@@ -123,8 +123,8 @@ function ProjectSettingsForm({project}: {project: Project}) {
 
   return (
     <>
-      <div className="flex min-w-0 flex-col gap-24">
-        <header className="flex flex-col gap-6">
+      <div className="flex min-w-0 flex-col gap-section">
+        <header className="flex flex-col gap-inline">
           <Header variant="h1">General</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Update the project name and the slug used in its URLs.
@@ -138,7 +138,7 @@ function ProjectSettingsForm({project}: {project: Project}) {
         ) : null}
 
         <form
-          className="flex max-w-[560px] flex-col gap-16"
+          className="flex max-w-[560px] flex-col gap-group"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();

package/src/pages/projects-hub-page.tsx

@@ -40,12 +40,12 @@ export function ProjectsHubPage({search = ''}: {search?: string}) {
   const hasNoData = !query.data;
 
   return (
-    <div className="flex w-full flex-col gap-24">
-      <header className="flex flex-col gap-16">
-        <div className="flex items-start justify-between gap-24 max-[640px]:flex-col">
+    <div className="flex w-full flex-col gap-section">
+      <header className="flex flex-col gap-group">
+        <div className="flex items-start justify-between gap-section max-[640px]:flex-col">
           <Header variant="h2">Projects</Header>
         </div>
-        <div className="flex items-center gap-12 max-[640px]:flex-col max-[640px]:items-stretch">
+        <div className="flex items-center gap-cluster max-[640px]:flex-col max-[640px]:items-stretch">
           <Input
             type="search"
             value={search}
@@ -94,8 +94,8 @@ export function ProjectsHubPage({search = ''}: {search?: string}) {
       ) : null}
 
       {projects.length > 0 ? (
-        <section aria-label="Projects list">
-          <ul className="grid grid-cols-2 gap-12 max-[760px]:grid-cols-1">
+        <section className="flex flex-col gap-group" aria-label="Projects list">
+          <ul className="grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1">
             {projects.map((project) => (
               <ProjectCard
                 project={project}
@@ -108,14 +108,14 @@ export function ProjectsHubPage({search = ''}: {search?: string}) {
             ))}
           </ul>
           {query.error && query.data ? (
-            <Callout role="alert" type="error" className="mt-16">
+            <Callout role="alert" type="error">
               <Text size="sm">
                 Could not load the next page. Existing projects are still shown.
               </Text>
             </Callout>
           ) : null}
           {query.hasNextPage ? (
-            <div className="mt-16 flex justify-center">
+            <div className="flex justify-center">
               <Button
                 variant="secondary"
                 isLoading={query.isFetchingNextPage}
@@ -136,12 +136,12 @@ function ProjectsSkeleton() {
     <ul
       role="status"
       aria-label="Loading projects"
-      className="grid grid-cols-2 gap-12 max-[760px]:grid-cols-1"
+      className="grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1"
     >
       {[0, 1, 2, 3, 4, 5].map((row) => (
         <li key={row}>
-          <Card className="h-full p-16">
-            <div className="flex items-center gap-12">
+          <Card className="h-full p-panel-compact">
+            <div className="flex items-center gap-cluster">
               <Skeleton className="size-24 shrink-0" />
               <Skeleton className="h-16 w-1/2" />
             </div>
@@ -209,8 +209,8 @@ function ProjectCard({
         params={{workspaceSlug, projectSlug: project.slug}}
         className="block h-full rounded-8 focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
       >
-        <Card className="h-full p-16 transition-colors hover:bg-background-components-hover">
-          <div className="flex min-w-0 items-center gap-12">
+        <Card className="h-full p-panel-compact transition-colors hover:bg-background-components-hover">
+          <div className="flex min-w-0 items-center gap-cluster">
             {/* Settle on success or error: a failed fetch falls back to the
                 neutral provider icon rather than spinning forever. */}
             {connectionsSettled ? (
@@ -222,7 +222,7 @@ function ProjectCard({
             ) : (
               <Skeleton className="size-24 shrink-0" />
             )}
-            <div className="flex min-w-0 flex-1 items-center gap-8">
+            <div className="flex min-w-0 flex-1 items-center gap-inline">
               <Text size="md" bold className="truncate">
                 {project.name}
               </Text>