@sproutsocial/seeds-react-narrative-kit 0.3.0 → 0.4.0

package/dist/pull-quote.css

@@ -2,20 +2,17 @@
  * Seeds PullQuote component classes.
  * Use these instead of writing out individual Tailwind utility classes.
  *
- * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
- * CSS variable definitions and dark mode support.
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css and
+ * ai-container.css imported for CSS variable definitions and surface styles.
  *
  * Usage:
- *   <figure class="seeds-pull-quote">…</figure>            // subtle (default)
- *   <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
+ *   <figure class="seeds-pull-quote seeds-ai-container">…</figure>            // subtle (default)
+ *   <figure class="seeds-pull-quote seeds-ai-container seeds-ai-container-vivid seeds-pull-quote-vivid">…</figure>
  */
 
 @layer components {
 
 .seeds-pull-quote {
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -24,24 +21,6 @@
   /* 40px block / 48px inline — 48px is off the space scale, so derive it from
      two tokens (40 + 8) rather than hardcoding an off-scale value. */
   padding: var(--space-600) calc(var(--space-600) + var(--space-300));
-  border-radius: var(--radius-800);
-  box-shadow: var(--shadow-low);
-  font-family: var(--font-family);
-  /* Subtle (default): the 20% AI gradient tint composited over the base
-     surface. --color-gradient-ai-subtle is already translucent, so layering it
-     over the opaque base color produces the soft wash. */
-  background-color: var(--color-container-bg-base);
-  background-image: var(--color-gradient-ai-subtle);
-  color: var(--color-text-headline);
-}
-
-/* Vivid: the full-saturation AI gradient with white content. White has no
-   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
-   raw brand hex used in --color-gradient-ai). */
-.seeds-pull-quote-vivid {
-  background-color: transparent;
-  background-image: var(--color-gradient-ai);
-  color: #fff;
 }
 
 /* The accented bar holding the quote and attribution. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-narrative-kit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Seeds React Narrative Kit — composable narrative primitives for executive-brief style pages",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -19,10 +19,13 @@
     "./dist/metric-highlight.css": "./dist/metric-highlight.css",
     "./dist/eyebrow-token.css": "./dist/eyebrow-token.css",
     "./dist/narrative-summary.css": "./dist/narrative-summary.css",
-    "./dist/narrative-divider.css": "./dist/narrative-divider.css"
+    "./dist/narrative-divider.css": "./dist/narrative-divider.css",
+    "./dist/narrative-ordered-list.css": "./dist/narrative-ordered-list.css",
+    "./dist/narrative-data-callout.css": "./dist/narrative-data-callout.css",
+    "./dist/ai-container.css": "./dist/ai-container.css"
   },
   "scripts": {
-    "build": "tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css && cp src/narrative-summary.css dist/narrative-summary.css && cp src/narrative-divider.css dist/narrative-divider.css",
+    "build": "tsup --dts && cp src/narrative-container.css dist/narrative-container.css && cp src/narrative-headline.css dist/narrative-headline.css && cp src/pull-quote.css dist/pull-quote.css && cp src/metric-highlight.css dist/metric-highlight.css && cp src/eyebrow-token.css dist/eyebrow-token.css && cp src/narrative-summary.css dist/narrative-summary.css && cp src/narrative-divider.css dist/narrative-divider.css && cp src/narrative-ordered-list.css dist/narrative-ordered-list.css && cp src/narrative-data-callout.css dist/narrative-data-callout.css && cp src/ai-container.css dist/ai-container.css",
     "build:debug": "tsup --dts --metafile",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
@@ -32,13 +35,13 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.1.0"
+    "@sproutsocial/seeds-react-theme": "^4.1.1"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-button": "*",
     "@sproutsocial/seeds-react-data-viz": "*",
-    "@sproutsocial/seeds-react-grid": "^0.2.5",
+    "@sproutsocial/seeds-react-grid": "^0.2.6",
     "@sproutsocial/seeds-react-text": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/AIContainer/AIContainer.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import AIContainer from "./AIContainer";
+import "../ai-container.css";
+
+const meta = {
+  title: "Narrative Kit/AIContainer",
+  component: AIContainer,
+  args: {
+    className: "w-80",
+    style: { padding: "24px" },
+  },
+} satisfies Meta<typeof AIContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ShortContent = () => (
+  <p>
+    Engagement is up 24% this month, driven by a strong week on LinkedIn and a
+    viral reply thread.
+  </p>
+);
+
+const RichContent = () => (
+  <div className="grid gap-300">
+    <strong>AI-generated summary</strong>
+    <p>
+      Audience growth held steady while impressions climbed. Your top-performing
+      post reached 3x the usual engagement rate.
+    </p>
+  </div>
+);
+
+export const Subtle: Story = {
+  args: {
+    appearance: "subtle",
+    children: <ShortContent />,
+  },
+};
+
+export const Vivid: Story = {
+  args: {
+    appearance: "vivid",
+    children: <ShortContent />,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    appearance: "subtle",
+    children: <RichContent />,
+  },
+};

package/src/AIContainer/AIContainer.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cn } from "../_internal/cn";
+import type { TypeAIContainerProps } from "./AIContainerTypes";
+
+/**
+ * AIContainer — a rounded surface primitive with the AI gradient background.
+ * Provides the outer shell (border-radius, shadow, overflow, gradient) without
+ * any padding. Used by PullQuote and available as a standalone container.
+ *
+ * - `subtle` — a light 20% gradient tint over the base surface with adaptive text color.
+ * - `vivid` — the full-saturation AI gradient with white text (always white).
+ *
+ * Styled via `ai-container.css` (Seeds CSS custom properties).
+ */
+const AIContainer = React.forwardRef<HTMLDivElement, TypeAIContainerProps>(
+  ({ children, appearance = "subtle", className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "seeds-ai-container",
+          { "seeds-ai-container-vivid": appearance === "vivid" },
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+AIContainer.displayName = "AIContainer";
+
+export default AIContainer;

package/src/AIContainer/AIContainerTypes.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+
+export interface TypeAIContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Content rendered inside the container. */
+  children?: React.ReactNode;
+  /**
+   * Visual treatment of the AI gradient surface.
+   * - `subtle` — a light 20% gradient tint over the base surface with dark text.
+   * - `vivid` — the full-saturation AI gradient with white text (always white).
+   * @default "subtle"
+   */
+  appearance?: "subtle" | "vivid";
+}

package/src/AIContainer/__tests__/AIContainer.test.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import AIContainer from "../AIContainer";
+
+describe("AIContainer", () => {
+  it("renders its children", () => {
+    render(<AIContainer>Summary text</AIContainer>);
+
+    expect(screen.getByText("Summary text")).toBeInTheDocument();
+  });
+
+  it("renders as a div", () => {
+    const { container } = render(<AIContainer>content</AIContainer>);
+
+    expect(container.firstChild?.nodeName).toBe("DIV");
+  });
+
+  it("applies the base class", () => {
+    const { container } = render(<AIContainer>content</AIContainer>);
+
+    expect(container.querySelector(".seeds-ai-container")).toBeInTheDocument();
+  });
+
+  it("does not apply the vivid modifier by default", () => {
+    const { container } = render(<AIContainer>content</AIContainer>);
+
+    expect(
+      container.querySelector(".seeds-ai-container-vivid")
+    ).not.toBeInTheDocument();
+  });
+
+  it("applies the vivid modifier only for the vivid appearance", () => {
+    const { container, rerender } = render(<AIContainer>content</AIContainer>);
+    expect(
+      container.querySelector(".seeds-ai-container-vivid")
+    ).not.toBeInTheDocument();
+
+    rerender(<AIContainer appearance="vivid">content</AIContainer>);
+    expect(
+      container.querySelector(".seeds-ai-container-vivid")
+    ).toBeInTheDocument();
+  });
+
+  it("merges a consumer className with the base class", () => {
+    const { container } = render(
+      <AIContainer className="custom">content</AIContainer>
+    );
+
+    const root = container.querySelector(".seeds-ai-container");
+    expect(root).toBeInTheDocument();
+    expect(root).toHaveClass("custom");
+  });
+
+  it("forwards its ref to the underlying div element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<AIContainer ref={ref}>content</AIContainer>);
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current?.tagName).toBe("DIV");
+  });
+});

package/src/AIContainer/index.ts

@@ -0,0 +1,2 @@
+export { default as AIContainer } from "./AIContainer";
+export type { TypeAIContainerProps } from "./AIContainerTypes";

package/src/NarrativeDataCallout/NarrativeDataCallout.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { DonutChart } from "@sproutsocial/seeds-react-data-viz/donut";
+import NarrativeDataCallout from "./NarrativeDataCallout";
+import NarrativeContainer from "../NarrativeContainer/NarrativeContainer";
+import "../narrative-data-callout.css";
+import "../narrative-container.css";
+
+/**
+ * NarrativeDataCallout has no built-in chart — the `visual` slot accepts any
+ * node. These stories inject the real v2 `DonutChart` from
+ * `@sproutsocial/seeds-react-data-viz/donut`; narrative-kit takes no runtime
+ * dependency on data-viz (only these stories do, via a devDependency). The
+ * injected chart fills the left third; the copy fills the right two-thirds.
+ */
+const donut = (): React.ReactNode => (
+  <DonutChart
+    description="Completion rate: 80% complete"
+    data={[
+      { name: "Complete", value: 80 },
+      { name: "Remaining", value: 20 },
+    ]}
+  />
+);
+
+const BODY =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec odio leo, " +
+  "gravida vitae sodales vitae, tempor eget ligula. Vestibulum nec enim eget " +
+  "mi placerat finibus. Donec tempor tincidunt elit.";
+
+const meta = {
+  title: "Narrative Kit/NarrativeDataCallout",
+  component: NarrativeDataCallout,
+  args: {
+    visual: donut(),
+    children: BODY,
+  },
+} satisfies Meta<typeof NarrativeDataCallout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Bare inner content — the visual on the left third, copy on the right. */
+export const Default: Story = {
+  args: {
+    className: "w-full max-w-240",
+  },
+};
+
+/**
+ * Dropped into a `NarrativeContainer` to reproduce the gradient-accented card
+ * from the design. This is the intended composition — the callout itself carries
+ * no surface.
+ */
+export const InContainer: Story = {
+  render: (args) => (
+    <NarrativeContainer className="w-full max-w-240">
+      <NarrativeDataCallout {...args} />
+    </NarrativeContainer>
+  ),
+};
+
+/**
+ * Narrow width — the container query collapses the row to a stacked column
+ * (visual on top, copy below). Resize the canvas to watch it reflow.
+ */
+export const Stacked: Story = {
+  args: {
+    className: "w-80",
+  },
+};

package/src/NarrativeDataCallout/NarrativeDataCallout.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { cn } from "../_internal/cn";
+import type { TypeNarrativeDataCalloutProps } from "./NarrativeDataCalloutTypes";
+
+/**
+ * NarrativeDataCallout — a horizontally oriented callout that pairs an injected
+ * data-viz visual (left, ~1/3 width) with a block of body copy (right, ~2/3).
+ *
+ * The kit ships no chart of its own; the `visual` slot accepts any node — the
+ * stories drop in a v2 `DonutChart` from `@sproutsocial/seeds-react-data-viz`.
+ * narrative-kit takes no runtime dependency on data-viz (mirrors MetricHighlight's
+ * `sparkline` slot).
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories) to reproduce the
+ * card look.
+ *
+ * Layout is a flex row driven by a container query, so it collapses to a stacked
+ * column (visual on top, text below) based on the width the component is actually
+ * given, not the viewport.
+ *
+ * Styled via `narrative-data-callout.css` (Seeds CSS custom properties); consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Overrides come
+ * via standard `className` / `style`.
+ */
+const NarrativeDataCallout = React.forwardRef<
+  HTMLDivElement,
+  TypeNarrativeDataCalloutProps
+>(({ visual, children, visualLabel, className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("seeds-narrative-data-callout", className)}
+    {...props}
+  >
+    <div className="seeds-narrative-data-callout-row">
+      <div
+        className="seeds-narrative-data-callout-visual"
+        role={visualLabel != null ? "img" : undefined}
+        aria-label={visualLabel}
+      >
+        {visual}
+      </div>
+      <div className="seeds-narrative-data-callout-body">{children}</div>
+    </div>
+  </div>
+));
+
+NarrativeDataCallout.displayName = "NarrativeDataCallout";
+
+export default NarrativeDataCallout;

package/src/NarrativeDataCallout/NarrativeDataCalloutTypes.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+export interface TypeNarrativeDataCalloutProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Data-viz component rendered in the left slot (occupies ~1/3 of the width).
+   * The kit ships no chart of its own — drop in any data-viz node, e.g. a v2
+   * `DonutChart` from `@sproutsocial/seeds-react-data-viz`.
+   */
+  visual: React.ReactNode;
+  /** Body copy / description occupying the right two-thirds. */
+  children: React.ReactNode;
+  /**
+   * Accessible label for the visual slot region. Omit when the injected visual
+   * already carries its own description/label.
+   */
+  visualLabel?: string;
+}

package/src/NarrativeDataCallout/__tests__/NarrativeDataCallout.test.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import NarrativeDataCallout from "../NarrativeDataCallout";
+
+describe("NarrativeDataCallout", () => {
+  it("renders the body copy", () => {
+    render(
+      <NarrativeDataCallout visual={<div>chart</div>}>
+        Engagement climbed this month.
+      </NarrativeDataCallout>
+    );
+
+    expect(
+      screen.getByText("Engagement climbed this month.")
+    ).toBeInTheDocument();
+  });
+
+  it("renders the injected visual node in the visual slot", () => {
+    const { container } = render(
+      <NarrativeDataCallout visual={<div data-testid="custom-viz">chart</div>}>
+        Body
+      </NarrativeDataCallout>
+    );
+
+    expect(screen.getByTestId("custom-viz")).toBeInTheDocument();
+    expect(
+      container.querySelector(".seeds-narrative-data-callout-visual")
+    ).toBeInTheDocument();
+  });
+
+  it("applies the root class and merges a custom className", () => {
+    const { container } = render(
+      <NarrativeDataCallout visual={<div>chart</div>} className="custom">
+        Body
+      </NarrativeDataCallout>
+    );
+
+    const root = container.querySelector(".seeds-narrative-data-callout");
+    expect(root).toBeInTheDocument();
+    expect(root).toHaveClass("custom");
+  });
+
+  it("labels the visual region when visualLabel is provided", () => {
+    render(
+      <NarrativeDataCallout
+        visual={<div>chart</div>}
+        visualLabel="Completion rate"
+      >
+        Body
+      </NarrativeDataCallout>
+    );
+
+    expect(
+      screen.getByRole("img", { name: "Completion rate" })
+    ).toBeInTheDocument();
+  });
+
+  it("forwards its ref to the underlying div element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <NarrativeDataCallout ref={ref} visual={<div>chart</div>}>
+        Body
+      </NarrativeDataCallout>
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current?.tagName).toBe("DIV");
+  });
+});

package/src/NarrativeDataCallout/index.ts

@@ -0,0 +1,2 @@
+export { default as NarrativeDataCallout } from "./NarrativeDataCallout";
+export type { TypeNarrativeDataCalloutProps } from "./NarrativeDataCalloutTypes";

package/src/NarrativeOrderedList/NarrativeOrderedList.stories.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "@sproutsocial/seeds-react-button";
+import NarrativeOrderedList from "./NarrativeOrderedList";
+import "../narrative-ordered-list.css";
+import "@sproutsocial/seeds-react-button/dist/button.css";
+
+/**
+ * NarrativeOrderedList renders a numbered list of action items. Each item pairs
+ * a large ordinal (01, 02, …) with a title, an optional description, and an
+ * optional call-to-action slot. It renders inner content only, meant to be
+ * dropped into a `NarrativeContainer` in production (see the Playground story
+ * for that composition).
+ *
+ * Layout is container-query-driven, so it responds to the width it is given
+ * rather than the viewport. The `"horizontal"` variant collapses back to a
+ * stack when the container is narrow.
+ */
+const description =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec odio leo, gravida vitae sodales vitae.";
+
+// No system props → the Button renders its Tailwind path.
+const suggestedAction = (
+  <Button appearance="ai-secondary">Suggested Action</Button>
+);
+
+const meta = {
+  title: "Narrative Kit/NarrativeOrderedList",
+  component: NarrativeOrderedList,
+  args: {
+    items: [
+      { title: "Action title", description, action: suggestedAction },
+      { title: "Action title", description, action: suggestedAction },
+      { title: "Action title", description, action: suggestedAction },
+    ],
+  },
+  // Constrain the width so the layout has a realistic amount of room.
+  decorators: [
+    (Story) => (
+      <div className="max-w-256">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof NarrativeOrderedList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Items stacked full-width, one per row (the default). */
+export const Vertical: Story = {};
+
+/** Items laid out as a row of equal columns. */
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+};
+
+/** The action is optional — omit it and each item drops the button. */
+export const WithoutAction: Story = {
+  args: {
+    items: [
+      { title: "Action title", description },
+      { title: "Action title", description },
+      { title: "Action title", description },
+    ],
+  },
+};

package/src/NarrativeOrderedList/NarrativeOrderedList.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { cn } from "../_internal/cn";
+import type { TypeNarrativeOrderedListProps } from "./NarrativeOrderedListTypes";
+
+/**
+ * NarrativeOrderedList — a numbered list of action items. Each item pairs a
+ * large ordinal (01, 02, …) with a title, an optional description, and an
+ * optional call-to-action slot.
+ *
+ * Renders inner content only — it carries no surface, shadow, or accent of its
+ * own. Drop it into a `NarrativeContainer` (see the stories / playground).
+ *
+ * Layout is driven by container queries, so it responds to the width the
+ * component is actually given, not the viewport:
+ * - `"vertical"` (default) → items stacked full-width, one per row.
+ * - `"horizontal"` → items laid out as a row of equal columns once there is
+ *   room, collapsing back to a stack when the container is narrow.
+ *
+ * Styled via `narrative-ordered-list.css` (Seeds CSS custom properties);
+ * consumers import the classes through `@sproutsocial/racine/css/components`.
+ * Overrides come via standard `className` / `style`.
+ */
+const NarrativeOrderedList = React.forwardRef<
+  HTMLDivElement,
+  TypeNarrativeOrderedListProps
+>(({ items, orientation = "vertical", className, ...props }, ref) => {
+  return (
+    // The outer element establishes the query container. The ol inside switches
+    // direction based on this element's width — a container query can only style
+    // descendants of the container, never the container element itself.
+    <div
+      ref={ref}
+      className={cn("seeds-narrative-ordered-list", className)}
+      {...props}
+    >
+      <ol
+        className={cn("seeds-narrative-ordered-list-track", {
+          "seeds-narrative-ordered-list-horizontal":
+            orientation === "horizontal",
+        })}
+      >
+        {items.map((item, i) => (
+          <li key={i} className="seeds-narrative-ordered-list-item">
+            {/* Decorative — the ol/li already convey order to assistive tech, so
+                hide the visible ordinal from it to avoid double-announcing. */}
+            <span
+              className="seeds-narrative-ordered-list-number"
+              aria-hidden="true"
+            >
+              {String(i + 1).padStart(2, "0")}
+            </span>
+            <div className="seeds-narrative-ordered-list-body">
+              <p className="seeds-narrative-ordered-list-title">{item.title}</p>
+              {item.description != null && (
+                <p className="seeds-narrative-ordered-list-description">
+                  {item.description}
+                </p>
+              )}
+              {item.action != null && (
+                <div className="seeds-narrative-ordered-list-action">
+                  {item.action}
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+});
+
+NarrativeOrderedList.displayName = "NarrativeOrderedList";
+
+export default NarrativeOrderedList;

package/src/NarrativeOrderedList/NarrativeOrderedListTypes.ts

@@ -0,0 +1,39 @@
+import type * as React from "react";
+
+/**
+ * Item arrangement.
+ * - `"vertical"`: items stacked full-width, one per row (the default).
+ * - `"horizontal"`: items laid out as a row of equal columns that collapses
+ *   back to a stack when the container is narrow (container query).
+ */
+export type TypeNarrativeOrderedListOrientation = "vertical" | "horizontal";
+
+export interface TypeNarrativeOrderedListItem {
+  /** Bold action title for the item. A plain string or any React node. */
+  title: React.ReactNode;
+  /**
+   * Descriptive text below the title. A plain string or any React node. The
+   * paragraph is omitted when this is empty.
+   */
+  description?: React.ReactNode;
+  /**
+   * Optional call-to-action rendered below the description, only when provided.
+   * Typically a Seeds `<Button>` in an AI appearance (e.g.
+   * `appearance="ai-secondary"`). Pass it without system props so it renders the
+   * Tailwind path — same as NarrativeSummary's `action` slot.
+   */
+  action?: React.ReactNode;
+}
+
+export interface TypeNarrativeOrderedListProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** The ordered items. Numbered automatically (01, 02, …) in order. */
+  items: TypeNarrativeOrderedListItem[];
+  /**
+   * Item arrangement. `"horizontal"` lays items in a row of equal columns that
+   * collapses to a stack when the container is narrow; `"vertical"` is always
+   * stacked.
+   * @default "vertical"
+   */
+  orientation?: TypeNarrativeOrderedListOrientation;
+}