@flamingo-stack/openframe-frontend-core 0.0.232 → 0.0.233

package/src/components/features/entity-tag-badges.tsx

@@ -1,32 +1,63 @@
+import Link from 'next/link'
 import { StatusBadge } from '../ui/status-badge'
 import type { TagAssoc } from '../../types/blog'
 
 interface EntityTagBadgesProps {
   /** Flat `<entity>_tags[]` association array (from entity_tags hydration). */
   tags?: TagAssoc[] | null
+  /**
+   * When set, each badge links to `${basePath}?tags=${slug}` (clickable, SPA nav
+   * via next/link). Omit for a non-interactive display (badges with no slug also
+   * render non-interactive even when basePath is set).
+   */
+  basePath?: string
+  /** Cap visible badges; the remainder collapse into a "+N" badge. */
+  max?: number
   /** Extra classes on the wrapper row. */
   className?: string
 }
 
+// The ONE tag-badge skin (OpenFrame design): rounded-rect, font-mono uppercase
+// StatusBadge on ods-card + ods-border. Clickable badges add the accent hover.
+const BADGE_CLASS = 'bg-ods-card border border-ods-border'
+
 /**
- * The single lib-side tag-badge renderer for detail views (release, onboarding
- * guide, …). Lib-package analogue of the hub's `EntityTagList` — the hub can't
- * be imported here, so this lives in the lib and is reused across lib detail
- * pages instead of each one re-implementing the StatusBadge chip row. Renders
- * nothing when there are no tags.
+ * THE single tag-badge renderer for the whole product (hub + lib). Renders the
+ * OpenFrame `StatusBadge` chip skin for a flat `<entity>_tags[]` array, optionally
+ * clickable (links each tag to its filtered list via `basePath`). The hub's
+ * `EntityTagList` delegates here so there is exactly one tag-display design.
+ * Renders nothing when there are no tags.
  */
-export function EntityTagBadges({ tags, className }: EntityTagBadgesProps) {
-  if (!tags || tags.length === 0) return null
+export function EntityTagBadges({ tags, basePath, max, className }: EntityTagBadgesProps) {
+  const items = (tags || []).filter((t): t is TagAssoc => !!t && !!t.name)
+  if (items.length === 0) return null
+
+  // Only null/undefined means "no cap"; max={0} shows none, negatives clamp to 0.
+  const visibleLimit = max == null ? items.length : Math.max(0, max)
+  const shown = items.slice(0, visibleLimit)
+  const overflow = items.length - shown.length
+
   return (
-    <div className={`flex flex-wrap gap-2 w-full ${className || ''}`}>
-      {tags.map((tag) => (
-        <StatusBadge
-          key={tag.tag_id ?? tag.id}
-          text={(tag.name || '').toUpperCase()}
-          variant="card"
-          className="bg-ods-card border border-ods-border"
-        />
-      ))}
+    <div className={`flex flex-wrap items-center gap-2 w-full ${className || ''}`}>
+      {shown.map((tag) => {
+        const key = tag.tag_id ?? tag.id ?? tag.slug ?? tag.name
+        const label = (tag.name || '').toUpperCase()
+        if (basePath && tag.slug) {
+          return (
+            <Link key={key} href={`${basePath}?tags=${tag.slug}`} className="inline-flex">
+              <StatusBadge
+                text={label}
+                variant="card"
+                className={`${BADGE_CLASS} cursor-pointer transition-colors hover:border-ods-accent`}
+              />
+            </Link>
+          )
+        }
+        return <StatusBadge key={key} text={label} variant="card" className={BADGE_CLASS} />
+      })}
+      {overflow > 0 && (
+        <StatusBadge text={`+${overflow}`} variant="card" className={`${BADGE_CLASS} text-ods-text-secondary`} />
+      )}
     </div>
   )
 }

package/src/components/ui/search-input.tsx

@@ -114,13 +114,16 @@ const innerInputStyles = cn(
 // Helper: chip variant → Tag variant mapping
 // ---------------------------------------------------------------------------
 
-function chipVariantToTagVariant(variant?: FilterChipData["variant"]): "primary" | "outline" {
+function chipVariantToTagVariant(variant?: FilterChipData["variant"]): "primary" | "outline" | "badge" {
   switch (variant) {
     case "selected":
       return "primary"
+    // Content tags render with the unified badge skin (ods-card + ods-border,
+    // mono uppercase) — identical to the public EntityTagBadges display.
+    case "tag":
+      return "badge"
     case "category":
     case "subcategory":
-    case "tag":
     default:
       return "outline"
   }

package/src/components/ui/tag.tsx

@@ -42,6 +42,13 @@ const tagVariants = cva(
           "bg-[var(--ods-system-greys-soft-grey)] text-[var(--ods-system-greys-grey)]",
           "hover:bg-[var(--ods-system-greys-soft-grey-hover)] active:bg-[var(--ods-system-greys-soft-grey-action)]",
         ],
+        // Matches the EntityTagBadges / StatusBadge tag skin (ods-card + ods-border,
+        // mono uppercase) so the tag-editor chips render identically to the public
+        // tag badges. Used for FilterChipData variant 'tag' (see search-input).
+        badge: [
+          "bg-ods-card text-ods-text-primary border border-ods-border font-mono uppercase tracking-wide",
+          "hover:border-ods-accent transition-colors",
+        ],
       },
     },
     defaultVariants: {