@flamingo-stack/openframe-frontend-core 0.0.549 → 0.0.550-1809.4789.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.549",
+  "version": "0.0.550-1809.4789.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/entity-cards/employee-entry-card.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import { AdminContentCard } from './admin-content-card'
+import { getProxiedImageUrl } from '../../../utils/image-proxy-stub'
+
+/** The fields every people-hub employee entry shares. Entity-specific bindings
+ *  (`WhatIShippedCard`, `HowIWorkCard`) map their own date column to `dateLabel`
+ *  and pass the rest through unchanged. */
+export interface EmployeeEntryCardData {
+  title?: string | null
+  summary?: string | null
+  status?: string | null
+  featured_image?: string | null
+  main_video_thumbnail?: string | null
+  author?: { full_name?: string | null; avatar_url?: string | null } | null
+}
+
+export interface EmployeeEntryCardProps {
+  entry: EmployeeEntryCardData
+  /** Already-formatted date shown in the meta row. Bindings own the format so
+   *  the UTC-pin convention stays in `utils/format`, not in the card. */
+  dateLabel?: string | null
+  /** Extra badges rendered after the status badge (e.g. discipline / level). */
+  extraBadges?: React.ReactNode
+  /** Fallback title when the entry has none — names the entity in the empty case. */
+  untitledLabel?: string
+  /** OG fallback cover. Caller computes it (hub: `useOgPlaceholderUrl`; related
+   *  rail: `extras.buildOgPlaceholderUrl`). */
+  placeholderUrl?: string | null
+  /** Owner action row (dashboard). Omit for a read-only card. */
+  actions?: React.ReactNode
+  /** When provided, the WHOLE card becomes a link (related-rail click-through).
+   *  Don't combine with `actions` (nested interactive). */
+  anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>
+  className?: string
+}
+
+const STATUS_BADGE_CLASS: Record<string, string> = {
+  published: 'bg-ods-success-secondary text-ods-success',
+  draft: 'bg-ods-warning-secondary text-ods-warning',
+  archived: 'bg-ods-border text-ods-text-secondary',
+}
+
+/** Shared badge treatment so an entity's own badges (discipline, level) sit
+ *  flush with the status badge instead of re-deriving the classes per card. */
+export function EmployeeEntryBadge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="px-2 py-1 rounded text-xs font-medium bg-ods-card border border-ods-border text-ods-text-secondary">
+      {children}
+    </span>
+  )
+}
+
+/**
+ * THE people-hub employee-entry card. Wraps `AdminContentCard` with the canonical
+ * mapping (cover = featured_image || main_video_thumbnail, OG placeholder
+ * fallback, title, 140-char summary, status badge, author avatar+name + a date
+ * label). Every entity that renders "an employee's entry" binds to this one
+ * engine — What I Shipped and How I Work differ only in which date column they
+ * format and which extra badges they add, so the card itself cannot drift
+ * between the dashboard and the related-content rail.
+ */
+export function EmployeeEntryCard({
+  entry,
+  dateLabel,
+  extraBadges,
+  untitledLabel = 'Untitled entry',
+  placeholderUrl,
+  actions,
+  anchorProps,
+  className,
+}: EmployeeEntryCardProps) {
+  const card = (
+    <AdminContentCard
+      imageUrl={entry.featured_image || entry.main_video_thumbnail}
+      placeholderUrl={placeholderUrl}
+      title={entry.title || untitledLabel}
+      summary={(entry.summary ?? '').slice(0, 140) || 'No description'}
+      badges={
+        entry.status || extraBadges ? (
+          <>
+            {entry.status ? (
+              <span
+                className={`px-2 py-1 rounded text-xs font-medium ${
+                  STATUS_BADGE_CLASS[entry.status] ?? 'bg-ods-card border border-ods-border text-ods-text-secondary'
+                }`}
+              >
+                {entry.status}
+              </span>
+            ) : null}
+            {extraBadges}
+          </>
+        ) : null
+      }
+      meta={
+        <>
+          <span className="flex items-center gap-2 min-w-0">
+            {entry.author?.avatar_url ? (
+              <img src={getProxiedImageUrl(entry.author.avatar_url) ?? entry.author.avatar_url} alt="" className="h-5 w-5 rounded-full object-cover shrink-0" />
+            ) : null}
+            <span className="truncate">{entry.author?.full_name ?? ''}</span>
+          </span>
+          {dateLabel ? <span>{dateLabel}</span> : null}
+        </>
+      }
+      actions={actions}
+      className={className}
+    />
+  )
+  return anchorProps ? (
+    <a {...anchorProps} className="block h-full">
+      {card}
+    </a>
+  ) : (
+    card
+  )
+}
+
+/** Loading skeleton matching EmployeeEntryCard's AdminContentCard shape (3:2 cover
+ *  + title / summary / meta lines). Used by the related-content rail while a
+ *  group hydrates so there's no shape jump when the real card lands. */
+export function EmployeeEntryCardSkeleton({ className }: { className?: string }) {
+  // Same convention as BlogCardSkeleton et al.: animate-pulse on the container,
+  // `bg-ods-bg` placeholder blocks, flex-grow body with an `mt-auto` avatar+name
+  // row. Shape mirrors EmployeeEntryCard's AdminContentCard (rounded-2xl, 3:2 cover).
+  return (
+    <div className={`group bg-ods-card border border-ods-border rounded-2xl overflow-hidden h-full flex flex-col animate-pulse ${className ?? ''}`}>
+      <div className="aspect-[3/2] bg-ods-bg" />
+      <div className="p-4 flex flex-col flex-grow space-y-3">
+        <div className="h-5 w-3/4 bg-ods-bg rounded" />
+        <div className="h-3 w-full bg-ods-bg/60 rounded" />
+        <div className="h-3 w-4/5 bg-ods-bg/60 rounded" />
+        <div className="mt-auto flex items-center gap-2">
+          <div className="h-8 w-8 rounded-full bg-ods-bg" />
+          <div className="h-3 w-24 bg-ods-bg/60 rounded" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/chat/entity-cards/how-i-work-card.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import {
+  EmployeeEntryCard,
+  EmployeeEntryCardSkeleton,
+  EmployeeEntryBadge,
+  type EmployeeEntryCardData,
+} from './employee-entry-card'
+import { formatDateUTC } from '../../../utils/format'
+
+/** Minimal row shape the card renders. Both the hub dashboard entry and the
+ *  related-content hydrated row satisfy it structurally. */
+export interface HowIWorkCardData extends EmployeeEntryCardData {
+  session_date?: string | null
+  /** Which craft the session is about — surfaced as a badge so a reader
+   *  scanning the grid can tell a sales workflow from an engineering one. */
+  discipline?: string | null
+}
+
+export interface HowIWorkCardProps {
+  entry: HowIWorkCardData
+  /** OG fallback cover. Caller computes it (hub: `useOgPlaceholderUrl`; related
+   *  rail: `extras.buildOgPlaceholderUrl`). */
+  placeholderUrl?: string | null
+  /** Owner action row (dashboard). Omit for a read-only card. */
+  actions?: React.ReactNode
+  /** When provided, the WHOLE card becomes a link (related-rail click-through).
+   *  Don't combine with `actions` (nested interactive). */
+  anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>
+  className?: string
+}
+
+/** `ops` is an initialism, so the generic capitalize would render it "Ops" —
+ *  fine — but `session_date`-style multiword disciplines need the underscore
+ *  stripped too. One place, so the badge matches the filter chip exactly. */
+function disciplineLabel(discipline: string): string {
+  return discipline.replace(/_/g, ' ').replace(/\b\w/g, (ch) => ch.toUpperCase())
+}
+
+/**
+ * THE single "How I Work" card — a thin binding over `EmployeeEntryCard` that
+ * maps the session date to the shared meta date and adds the discipline badge.
+ * Used by BOTH the people-hub dashboard (with owner `actions`) and the
+ * related-content rail (with `anchorProps`), so the card cannot drift between
+ * the two surfaces.
+ */
+export function HowIWorkCard({ entry, placeholderUrl, actions, anchorProps, className }: HowIWorkCardProps) {
+  return (
+    <EmployeeEntryCard
+      entry={entry}
+      // `formatDateUTC` anchors date-only strings to UTC midnight, which is what
+      // keeps the label from shifting a day between server and client render.
+      dateLabel={entry.session_date ? formatDateUTC(entry.session_date, { fallback: '' }) || null : null}
+      extraBadges={entry.discipline ? <EmployeeEntryBadge>{disciplineLabel(entry.discipline)}</EmployeeEntryBadge> : null}
+      untitledLabel="Untitled session"
+      placeholderUrl={placeholderUrl}
+      actions={actions}
+      anchorProps={anchorProps}
+      className={className}
+    />
+  )
+}
+
+/** Loading skeleton matching HowIWorkCard's shape. Shared with every other
+ *  employee-entry card so the rail's placeholder never diverges from the card. */
+export const HowIWorkCardSkeleton = EmployeeEntryCardSkeleton

package/src/components/chat/entity-cards/index.ts

@@ -27,8 +27,12 @@ export {
   type CoverImageFallback,
 } from './use-cover-image-fallback'
 export { AdminContentCard } from './admin-content-card'
+export { EmployeeEntryCard, EmployeeEntryCardSkeleton, EmployeeEntryBadge } from './employee-entry-card'
+export type { EmployeeEntryCardData, EmployeeEntryCardProps } from './employee-entry-card'
 export { WhatIShippedCard, WhatIShippedCardSkeleton } from './what-i-shipped-card'
 export type { WhatIShippedCardData, WhatIShippedCardProps } from './what-i-shipped-card'
+export { HowIWorkCard, HowIWorkCardSkeleton } from './how-i-work-card'
+export type { HowIWorkCardData, HowIWorkCardProps } from './how-i-work-card'
 
 // Moved-into-subdir flat cards
 export { BlockCard, type BlockCardProps } from './block-card'

package/src/components/chat/entity-cards/what-i-shipped-card.tsx

@@ -1,18 +1,11 @@
 import React from 'react'
-import { AdminContentCard } from './admin-content-card'
+import { EmployeeEntryCard, EmployeeEntryCardSkeleton, type EmployeeEntryCardData } from './employee-entry-card'
 import { formatEntryMonthUTC } from '../../../utils/format'
-import { getProxiedImageUrl } from '../../../utils/image-proxy-stub'
 
 /** Minimal row shape the card renders. Both the hub dashboard entry and the
  *  related-content hydrated row satisfy it structurally. */
-export interface WhatIShippedCardData {
-  title?: string | null
-  summary?: string | null
-  status?: string | null
-  featured_image?: string | null
-  main_video_thumbnail?: string | null
+export interface WhatIShippedCardData extends EmployeeEntryCardData {
   entry_month?: string | null
-  author?: { full_name?: string | null; avatar_url?: string | null } | null
 }
 
 export interface WhatIShippedCardProps {
@@ -28,82 +21,26 @@ export interface WhatIShippedCardProps {
   className?: string
 }
 
-const STATUS_BADGE_CLASS: Record<string, string> = {
-  published: 'bg-ods-success-secondary text-ods-success',
-  draft: 'bg-ods-warning-secondary text-ods-warning',
-  archived: 'bg-ods-border text-ods-text-secondary',
-}
-
 /**
- * THE single "What I Shipped" card. Wraps `AdminContentCard` with the canonical
- * mapping (cover = featured_image || main_video_thumbnail, OG placeholder
- * fallback, title, 140-char summary, status badge, author avatar+name +
- * reporting month). Used by BOTH the people-hub dashboard (with owner `actions`)
- * and the related-content rail (with `anchorProps` for click-through), so the
- * card is byte-identical everywhere — one component, one mapping, no drift.
+ * THE single "What I Shipped" card — a thin binding over `EmployeeEntryCard`
+ * that maps the reporting month to the shared meta date. Used by BOTH the
+ * people-hub dashboard (with owner `actions`) and the related-content rail
+ * (with `anchorProps` for click-through), so the card is byte-identical
+ * everywhere — one engine, one mapping, no drift.
  */
 export function WhatIShippedCard({ entry, placeholderUrl, actions, anchorProps, className }: WhatIShippedCardProps) {
-  const month = formatEntryMonthUTC(entry.entry_month, 'short')
-  const card = (
-    <AdminContentCard
-      imageUrl={entry.featured_image || entry.main_video_thumbnail}
+  return (
+    <EmployeeEntryCard
+      entry={entry}
+      dateLabel={formatEntryMonthUTC(entry.entry_month, 'short')}
       placeholderUrl={placeholderUrl}
-      title={entry.title || 'Untitled entry'}
-      summary={(entry.summary ?? '').slice(0, 140) || 'No description'}
-      badges={
-        entry.status ? (
-          <span
-            className={`px-2 py-1 rounded text-xs font-medium ${
-              STATUS_BADGE_CLASS[entry.status] ?? 'bg-ods-card border border-ods-border text-ods-text-secondary'
-            }`}
-          >
-            {entry.status}
-          </span>
-        ) : null
-      }
-      meta={
-        <>
-          <span className="flex items-center gap-2 min-w-0">
-            {entry.author?.avatar_url ? (
-              <img src={getProxiedImageUrl(entry.author.avatar_url) ?? entry.author.avatar_url} alt="" className="h-5 w-5 rounded-full object-cover shrink-0" />
-            ) : null}
-            <span className="truncate">{entry.author?.full_name ?? ''}</span>
-          </span>
-          {month ? <span>{month}</span> : null}
-        </>
-      }
       actions={actions}
+      anchorProps={anchorProps}
       className={className}
     />
   )
-  return anchorProps ? (
-    <a {...anchorProps} className="block h-full">
-      {card}
-    </a>
-  ) : (
-    card
-  )
 }
 
-/** Loading skeleton matching WhatIShippedCard's AdminContentCard shape (3:2 cover
- *  + title / summary / meta lines). Used by the related-content rail while a
- *  group hydrates so there's no shape jump when the real card lands. */
-export function WhatIShippedCardSkeleton({ className }: { className?: string }) {
-  // Same convention as BlogCardSkeleton et al.: animate-pulse on the container,
-  // `bg-ods-bg` placeholder blocks, flex-grow body with an `mt-auto` avatar+name
-  // row. Shape mirrors WhatIShippedCard's AdminContentCard (rounded-2xl, 3:2 cover).
-  return (
-    <div className={`group bg-ods-card border border-ods-border rounded-2xl overflow-hidden h-full flex flex-col animate-pulse ${className ?? ''}`}>
-      <div className="aspect-[3/2] bg-ods-bg" />
-      <div className="p-4 flex flex-col flex-grow space-y-3">
-        <div className="h-5 w-3/4 bg-ods-bg rounded" />
-        <div className="h-3 w-full bg-ods-bg/60 rounded" />
-        <div className="h-3 w-4/5 bg-ods-bg/60 rounded" />
-        <div className="mt-auto flex items-center gap-2">
-          <div className="h-8 w-8 rounded-full bg-ods-bg" />
-          <div className="h-3 w-24 bg-ods-bg/60 rounded" />
-        </div>
-      </div>
-    </div>
-  )
-}
+/** Loading skeleton matching WhatIShippedCard's shape. Shared with every other
+ *  employee-entry card so the rail's placeholder never diverges from the card. */
+export const WhatIShippedCardSkeleton = EmployeeEntryCardSkeleton

package/src/components/features/status-filter-component.tsx

@@ -21,6 +21,15 @@ export interface StatusFilterComponentProps {
    *  dashboard expose every status while gating which ones a given viewer may
    *  actually select (e.g. non-management can only pick `published`). */
   disabledValues?: string[];
+  /**
+   * Row label. Defaults to `Status`, so every existing call site is unchanged.
+   *
+   * Set it to reuse this row for any other single-select facet (Discipline,
+   * Level, …) instead of hand-rolling a look-alike: a duplicated row renders
+   * markup identical to this one, and React then pairs the copy against this
+   * component during hydration and reports a mismatch on the label text.
+   */
+  label?: string;
 }
 
 /**
@@ -35,7 +44,8 @@ export function StatusFilterComponent({
   showCount = false,
   count = 0,
   className = '',
-  disabledValues = []
+  disabledValues = [],
+  label = 'Status'
 }: StatusFilterComponentProps) {
   // Filter out 'all' from options since we render it separately
   const filteredOptions = statusOptions.filter(option => option.value !== 'all');
@@ -45,7 +55,7 @@ export function StatusFilterComponent({
       <div className="flex items-center gap-2">
         <Filter className="h-4 w-4 text-ods-accent" />
         <span className="text-h5 text-ods-text-secondary">
-          Status
+          {label}
         </span>
       </div>
 

package/src/components/related-content/related-content-section.tsx

@@ -65,6 +65,7 @@ import { decideNewTab } from '../chat/utils/decide-new-tab';
 // instantiates a QueryClient, so embedders need NO QueryClientProvider.
 import { BlogCard, BlogCardSkeleton } from '../chat/entity-cards/blog-card';
 import { WhatIShippedCard, WhatIShippedCardSkeleton } from '../chat/entity-cards/what-i-shipped-card';
+import { HowIWorkCard, HowIWorkCardSkeleton } from '../chat/entity-cards/how-i-work-card';
 import { CaseStudyCard, CaseStudyCardSkeleton } from '../chat/entity-cards/case-study-card';
 import { CustomerInterviewCard, CustomerInterviewCardSkeleton } from '../chat/entity-cards/customer-interview-card';
 import { ProductReleaseCard, ProductReleaseCardSkeleton } from '../chat/entity-cards/product-release-card';
@@ -167,6 +168,9 @@ function renderSkeletonForType(
     case 'what_i_shipped':
       // Matches the WhatIShippedCard (AdminContentCard 3:2) shape.
       return <WhatIShippedCardSkeleton />;
+    case 'how_i_work':
+      // Same shared employee-entry shape as What I Shipped.
+      return <HowIWorkCardSkeleton />;
     case 'marketing_campaign':
       return adminCampaignCard ? <adminCampaignCard.Skeleton size={legacySize} /> : null;
     case 'roadmap_item':
@@ -296,6 +300,20 @@ function CardForType({
           }
         />
       );
+    case 'how_i_work':
+      // THE single How I Work card — same lib component the people-hub dashboard
+      // renders. Same `anchorProps` contract as What I Shipped above (a real
+      // href only; a fallback object would wrap the card in a dead <a>).
+      return (
+        <HowIWorkCard
+          entry={item}
+          placeholderUrl={placeholderUrl}
+          anchorProps={
+            linkProps ??
+            (href ? ({ href, ...anchorAttrs } as React.AnchorHTMLAttributes<HTMLAnchorElement>) : undefined)
+          }
+        />
+      );
     case 'marketing_campaign':
       return adminCampaignCard ? <adminCampaignCard.Card campaign={item} /> : null;
     case 'roadmap_item':

package/src/stories/EmployeeEntryCard.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { EmployeeEntryCard, EmployeeEntryBadge } from '../components/chat/entity-cards/employee-entry-card'
+import { ChatColumnDecorator, makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { howIWorkEntry, whatIShippedEntry } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof EmployeeEntryCard> = {
+  title: 'Chat/EntityCards/EmployeeEntryCard',
+  component: EmployeeEntryCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'THE people-hub employee-entry engine. `WhatIShippedCard` and `HowIWorkCard` are thin bindings over it — they differ only in which date column they format and which extra badges they add — so the states exercised here are the states of every employee-entry card. Cover falls back featured_image → main_video_thumbnail → placeholderUrl.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Published: Story = {
+  args: {
+    entry: whatIShippedEntry,
+    dateLabel: 'Jul 2026',
+  },
+}
+
+export const Draft: Story = {
+  args: {
+    entry: { ...whatIShippedEntry, status: 'draft' },
+    dateLabel: 'Jul 2026',
+  },
+}
+
+export const Archived: Story = {
+  args: {
+    entry: { ...whatIShippedEntry, status: 'archived' },
+    dateLabel: 'Jul 2026',
+  },
+}
+
+export const WithExtraBadges: Story = {
+  args: {
+    entry: howIWorkEntry,
+    dateLabel: 'Aug 16, 2026',
+    extraBadges: (
+      <>
+        <EmployeeEntryBadge>Marketing</EmployeeEntryBadge>
+        <EmployeeEntryBadge>Intermediate</EmployeeEntryBadge>
+      </>
+    ),
+  },
+}
+
+/** Cover falls back to the video frame when there is no featured image. */
+export const VideoThumbnailFallback: Story = {
+  args: {
+    entry: {
+      ...whatIShippedEntry,
+      featured_image: null,
+      main_video_thumbnail:
+        'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1200&h=675&fit=crop',
+    },
+    dateLabel: 'Jul 2026',
+  },
+}
+
+/** The auto-created-draft state: no title yet, no summary, no cover — the card
+ *  must still read as a specific entity, not an error. */
+export const EmptyDraft: Story = {
+  args: {
+    entry: {
+      title: null,
+      summary: null,
+      status: 'draft',
+      featured_image: null,
+      main_video_thumbnail: null,
+      author: whatIShippedEntry.author,
+    },
+    dateLabel: null,
+    untitledLabel: 'Untitled session',
+  },
+}
+
+/** Related-rail mode: the whole card is a link (never combined with actions). */
+export const AsAnchor: Story = {
+  args: {
+    entry: whatIShippedEntry,
+    dateLabel: 'Jul 2026',
+    anchorProps: makeAnchorProps('/what-i-shipped/billing-flow'),
+  },
+}

package/src/stories/HowIWorkCard.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { HowIWorkCard, HowIWorkCardSkeleton } from '../components/chat/entity-cards/how-i-work-card'
+import { ChatColumnDecorator, makeAnchorProps } from './__fixtures__/chat-card-decorator'
+import { howIWorkEntry } from './__fixtures__/chat-cards'
+
+const meta: Meta<typeof HowIWorkCard> = {
+  title: 'Chat/EntityCards/HowIWorkCard',
+  component: HowIWorkCard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Card for a `how_i_work` session — a thin binding over `EmployeeEntryCard` that maps `session_date` to the meta date and adds the discipline badge. Engine states (statuses, cover fallbacks, empty draft) are covered by the EmployeeEntryCard stories.',
+      },
+    },
+  },
+  decorators: [(Story) => <ChatColumnDecorator><Story /></ChatColumnDecorator>],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    entry: howIWorkEntry,
+  },
+}
+
+/** Related-rail click-through — the whole card is one anchor. */
+export const AsAnchor: Story = {
+  args: {
+    entry: howIWorkEntry,
+    anchorProps: makeAnchorProps('/how-i-work/' + 'competitive-research-claude'),
+  },
+}
+
+/** No discipline picked yet (fresh draft) — badge row shows status only. */
+export const NoDiscipline: Story = {
+  args: {
+    entry: { ...howIWorkEntry, discipline: null, status: 'draft' },
+  },
+}
+
+export const Skeleton: StoryObj = {
+  render: () => <HowIWorkCardSkeleton />,
+}

package/src/stories/StatusFilterComponent.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useState } from 'react'
+import { StatusFilterComponent } from '../components/features/status-filter-component'
+
+const meta: Meta<typeof StatusFilterComponent> = {
+  title: 'Features/StatusFilterComponent',
+  component: StatusFilterComponent,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'THE single-select facet filter row. Renders its own "All" button and drops any option valued `all`, so callers pass real options only. The `label` prop lets one component serve every facet axis (Status, Discipline, Level) — hand-rolling a look-alike row produces markup identical to this one, and React then pairs the copy against this component during hydration and reports a text mismatch (the bug that motivated the prop).',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Default label. Interactive — pills toggle the selection. */
+export const Status: Story = {
+  render: function StatusStory() {
+    const [status, setStatus] = useState('all')
+    return (
+      <StatusFilterComponent
+        selectedStatus={status}
+        onStatusChange={setStatus}
+        statusOptions={[
+          { value: 'draft', label: 'Draft (1)' },
+          { value: 'published', label: 'Published (3)' },
+          { value: 'archived', label: 'Archived (1)' },
+        ]}
+      />
+    )
+  },
+}
+
+/** Relabeled: the same row serving a data-derived Discipline facet, counts in
+ *  the labels — how the people-hub How I Work dashboard uses it. */
+export const RelabeledFacet: Story = {
+  render: function DisciplineStory() {
+    const [discipline, setDiscipline] = useState('all')
+    return (
+      <StatusFilterComponent
+        label="Discipline"
+        selectedStatus={discipline}
+        onStatusChange={setDiscipline}
+        statusOptions={[
+          { value: 'engineering', label: 'Engineering (4)' },
+          { value: 'marketing', label: 'Marketing (2)' },
+          { value: 'sales', label: 'Sales (0)' },
+        ]}
+      />
+    )
+  },
+}
+
+/** Viewer may see every option but select only one (people-hub "Everyone" view
+ *  for non-management: pinned to Published, the rest visible but disabled). */
+export const DisabledValues: Story = {
+  args: {
+    label: 'Status',
+    selectedStatus: 'published',
+    onStatusChange: () => {},
+    statusOptions: [
+      { value: 'draft', label: 'Draft' },
+      { value: 'published', label: 'Published' },
+      { value: 'archived', label: 'Archived' },
+    ],
+    disabledValues: ['all', 'draft', 'archived'],
+  },
+}