@spunto/design-system 0.14.0 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/workers/tag-chips.tsx

@@ -24,6 +24,7 @@ export interface TagChipsProps {
   onRemove?: (tag: string, next: string[]) => void
   /** Longest accepted tag; anything past it is truncated on commit. */
   maxLength?: number
+  /** Posée sur le GROUPE (les chips et leur bouton « + »), pas sur chaque chip. */
   className?: string
 }
 
@@ -66,7 +67,11 @@ export function TagChips({ tags, onAdd, onRemove, maxLength = 32, className }: T
   if (!shown.length && !editable) return null
 
   return (
-    <>
+    // Les chips ET le bouton « + » forment UNE unité de retour à la ligne. Sur
+    // une carte étroite (grille à trois colonnes, téléphone), l'en-tête wrappe —
+    // et laissé libre, c'est le « + » qui atterrit seul sur la ligne suivante
+    // sous une première ligne pleine. Groupé, il emmène les tags avec lui.
+    <span data-slot="tag-chips" className={cn("inline-flex flex-wrap items-center gap-2", className)}>
       {shown.map((tag) => {
         const c = tagColor(tag)
         return (
@@ -76,8 +81,7 @@ export function TagChips({ tags, onAdd, onRemove, maxLength = 32, className }: T
               "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium leading-none",
               c.bg,
               c.text,
-              c.border,
-              className
+              c.border
             )}
           >
             {tag}
@@ -134,6 +138,6 @@ export function TagChips({ tags, onAdd, onRemove, maxLength = 32, className }: T
             <PlusIcon className="h-2.5 w-2.5" />
           </button>
         ))}
-    </>
+    </span>
   )
 }

package/src/components/workers/worker-card.tsx

@@ -149,7 +149,13 @@ export function WorkerCard({
       // full-width row on a phone — and a 290 px card in a sidebar on a 27"
       // screen is exactly as cramped as a phone.
       className={cn(
-        "@container overflow-hidden rounded-xl border border-border bg-card transition-colors hover:shadow-sm",
+        // `flex h-full flex-col`, avec le pied en `mt-auto` : dans une grille de
+        // cartes, les cellules s'étirent sur la plus haute, et sans ça le bouton
+        // s'arrête là où le contenu s'arrête — une rangée de cartes finit avec
+        // des bandes de carte vide sous les boutons, à des hauteurs différentes.
+        // Hors grille, `height: 100%` d'un parent en hauteur automatique se
+        // résout en automatique : rien ne change.
+        "@container flex h-full flex-col overflow-hidden rounded-xl border border-border bg-card transition-colors hover:shadow-sm",
         className
       )}
     >
@@ -172,27 +178,28 @@ export function WorkerCard({
               <TagChips tags={worker.tags ?? []} onAdd={onAddTag} onRemove={onRemoveTag} />
             </div>
 
-            {/* Meta line. Each item carries its own leading separator instead of
-                the separators being siblings: this row wraps onto two lines as
-                soon as the card is narrow, and a sibling "·" then ends up
-                stranded at the end of a line, pointing at nothing. Attached to
-                the item, the worst case is a line that *starts* with "·", which
-                reads as a continuation. */}
-            <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+            {/* Meta line, sans « · » entre les items : cette ligne wrappe dès que
+                la carte est étroite (grilles à deux ou trois colonnes,
+                téléphone), et un séparateur est un enfant flex comme un autre —
+                il wrappe comme un autre, donc la ligne du dessus se termine sur
+                un point suspendu dans le vide. Chaque item après l'auteur porte
+                sa propre icône, qui les sépare bien assez ; l'espacement fait le
+                reste. */}
+            <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
               {creator && (
-                <MetaItem first>
+                <MetaItem>
                   <CreatorAvatar creator={creator} />
                   <span className="text-muted-foreground">{creator.name}</span>
                 </MetaItem>
               )}
               {nodeName && (
-                <MetaItem first={!creator}>
+                <MetaItem>
                   <ServerIcon className="h-3 w-3 shrink-0" />
                   <span className="truncate">{nodeName}</span>
                 </MetaItem>
               )}
               {worker.createdAt && (
-                <MetaItem first={!creator && !nodeName} title={new Date(worker.createdAt).toLocaleString()}>
+                <MetaItem title={new Date(worker.createdAt).toLocaleString()}>
                   <ClockIcon className="h-3 w-3 shrink-0" />
                   {formatRelativeTime(worker.createdAt)}
                 </MetaItem>
@@ -280,7 +287,7 @@ export function WorkerCard({
       )}
 
       {(footer ?? href) && (
-        <div className="border-t border-border/50 bg-muted/20 px-3 py-2">
+        <div className="mt-auto border-t border-border/50 bg-muted/20 px-3 py-2">
           {footer ?? (
             <Link href={href!} className={cn(buttonVariants({ variant: "default", size: "sm" }), "h-7 w-full gap-1.5 text-xs")}>
               {viewLabel}
@@ -301,24 +308,9 @@ export function WorkerCard({
  * entirely: under ~26 rem the row is two lines deep anyway and the icons already tell
  * the items apart, so the dots are pure noise there.
  */
-function MetaItem({
-  first = false,
-  title,
-  children,
-}: {
-  first?: boolean
-  title?: string
-  children: ReactNode
-}) {
+function MetaItem({ title, children }: { title?: string; children: ReactNode }) {
   return (
-    <span
-      title={title}
-      className={cn(
-        "flex min-w-0 items-center gap-1 text-[11px] text-muted-foreground/60",
-        !first &&
-          "before:hidden before:text-muted-foreground/30 before:content-['·'] @min-[26rem]:before:mr-1 @min-[26rem]:before:inline"
-      )}
-    >
+    <span title={title} className="flex min-w-0 items-center gap-1 text-[11px] text-muted-foreground/60">
       {children}
     </span>
   )