@spunto/design-system 0.14.1 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.14.1",
+  "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

@@ -178,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>
@@ -307,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>
   )