@sproutsocial/seeds-react-narrative-kit 0.1.0

package/.eslintignore

@@ -0,0 +1,3 @@
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts && cp src/narrative-container.css dist/narrative-container.css
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-narrative-kit/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     2.65 KB
+CJS dist/index.js.map 2.72 KB
+CJS ⚡️ Build success in 93ms
+ESM dist/esm/index.js     1.03 KB
+ESM dist/esm/index.js.map 2.35 KB
+ESM ⚡️ Build success in 93ms
+DTS Build start
+DTS ⚡️ Build success in 4507ms
+DTS dist/index.d.ts  1.45 KB
+DTS dist/index.d.mts 1.45 KB
+Done in 6.42s.

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @sproutsocial/seeds-react-narrative-kit
+
+## 0.1.0
+
+### Minor Changes
+
+- 5d581a6: Add `seeds-react-narrative-kit` — a kit of composable narrative primitives for
+  executive-brief style pages. Ships the foundational `NarrativeContainer` surface and is
+  exported through `@sproutsocial/racine`.

package/README.md

@@ -0,0 +1,52 @@
+# @sproutsocial/seeds-react-narrative-kit
+
+A kit of **narrative primitives** — small, composable building blocks that are assembled
+(often non-deterministically, by agents) into "executive brief" style pages: a surface, a
+headline stat, a callout, a trend, and so on.
+
+This package is a multi-component kit, not a single component. Each primitive lives in its
+own folder under `src/` and is re-exported from the package barrel (`src/index.ts`).
+
+## Usage
+
+Like all Seeds React components, narrative primitives are consumed through
+`@sproutsocial/racine` — never imported from this package directly in a consuming app:
+
+```tsx
+import { NarrativeContainer } from "@sproutsocial/racine";
+
+<NarrativeContainer>{/* narrative content */}</NarrativeContainer>;
+```
+
+## Exported primitives
+
+| Primitive            | Description                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------ |
+| `NarrativeContainer` | Foundational surface/card with a content slot and a top-left gradient accent border. Accepts standard `className` / `style`. |
+
+## Adding a new primitive
+
+Primitives are intentionally cheap to add — a new one is a folder plus one barrel line:
+
+1. Create `src/<PrimitiveName>/` with:
+   - `<PrimitiveName>.tsx` — `forwardRef` component (set `displayName`).
+   - `<PrimitiveName>Types.ts` — the public `Type<PrimitiveName>Props` interface (JSDoc each prop).
+   - `<PrimitiveName>.stories.tsx` — `title: "Narrative Kit/<PrimitiveName>"`.
+   - `__tests__/<PrimitiveName>.test.tsx`.
+   - `index.ts` — re-export the component and its types.
+2. Add one line to `src/index.ts`:
+   ```ts
+   export { PrimitiveName, type TypePrimitiveNameProps } from "./PrimitiveName";
+   ```
+3. Add a row to the table above.
+
+Shared types/helpers used across primitives live in `src/_internal/`.
+
+## Development
+
+```bash
+yarn build       # bundle (tsup) cjs + esm + .d.ts
+yarn typecheck   # tsc --noEmit
+yarn test        # jest
+yarn lint
+```

package/dist/esm/index.js

@@ -0,0 +1,40 @@
+// src/NarrativeContainer/NarrativeContainer.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var NarrativeContainer = React.forwardRef(({ children, accent = true, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "seeds-narrative-container",
+        { "seeds-narrative-container-accent": accent },
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+NarrativeContainer.displayName = "NarrativeContainer";
+var NarrativeContainer_default = NarrativeContainer;
+export {
+  NarrativeContainer_default as NarrativeContainer
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NarrativeContainer/NarrativeContainer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n"],"mappings":";AAAA,YAAY,WAAW;AAwCnB;AApCJ,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAWA,IAAM,qBAA2B,iBAG/B,CAAC,EAAE,UAAU,SAAS,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,EAAE,oCAAoC,OAAO;AAAA,QAC7C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,mBAAmB,cAAc;AAEjC,IAAO,6BAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+interface TypeNarrativeContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Narrative content rendered inside the container's slot. */
+    children?: React.ReactNode;
+    /**
+     * Render the decorative gradient accent that wraps the top-left corner.
+     * @default true
+     */
+    accent?: boolean;
+}
+
+/**
+ * NarrativeContainer — the foundational surface that narrative primitives are
+ * composed inside. A padded, rounded, elevated card with a content slot and an
+ * optional decorative gradient accent that wraps the top-left corner.
+ *
+ * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Surface
+ * overrides are done with standard `className` / `style`.
+ */
+declare const NarrativeContainer: React.ForwardRefExoticComponent<TypeNarrativeContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Shared types for narrative primitives.
+ *
+ * Kept intentionally small — primitives built in follow-up work extend this as
+ * cross-cutting concerns emerge (tone/sentiment, density, etc.).
+ */
+/**
+ * Sentiment/tone shared across narrative primitives, used to drive decorative
+ * accents (e.g. the NarrativeContainer gradient edge) and semantic coloring.
+ */
+type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
+
+export { NarrativeContainer, type TypeNarrativeContainerProps, type TypeNarrativeTone };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+interface TypeNarrativeContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Narrative content rendered inside the container's slot. */
+    children?: React.ReactNode;
+    /**
+     * Render the decorative gradient accent that wraps the top-left corner.
+     * @default true
+     */
+    accent?: boolean;
+}
+
+/**
+ * NarrativeContainer — the foundational surface that narrative primitives are
+ * composed inside. A padded, rounded, elevated card with a content slot and an
+ * optional decorative gradient accent that wraps the top-left corner.
+ *
+ * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Surface
+ * overrides are done with standard `className` / `style`.
+ */
+declare const NarrativeContainer: React.ForwardRefExoticComponent<TypeNarrativeContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Shared types for narrative primitives.
+ *
+ * Kept intentionally small — primitives built in follow-up work extend this as
+ * cross-cutting concerns emerge (tone/sentiment, density, etc.).
+ */
+/**
+ * Sentiment/tone shared across narrative primitives, used to drive decorative
+ * accents (e.g. the NarrativeContainer gradient edge) and semantic coloring.
+ */
+type TypeNarrativeTone = "neutral" | "positive" | "negative" | "opportunity";
+
+export { NarrativeContainer, type TypeNarrativeContainerProps, type TypeNarrativeTone };

package/dist/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  NarrativeContainer: () => NarrativeContainer_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/NarrativeContainer/NarrativeContainer.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var NarrativeContainer = React.forwardRef(({ children, accent = true, className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "seeds-narrative-container",
+        { "seeds-narrative-container-accent": accent },
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+NarrativeContainer.displayName = "NarrativeContainer";
+var NarrativeContainer_default = NarrativeContainer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NarrativeContainer
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/NarrativeContainer/NarrativeContainer.tsx"],"sourcesContent":["/* Narrative Kit — composable narrative primitives.\n * Each primitive adds a single line below. No default export — this is a kit. */\nexport {\n  NarrativeContainer,\n  type TypeNarrativeContainerProps,\n} from \"./NarrativeContainer\";\n\nexport type { TypeNarrativeTone } from \"./_internal/types\";\n","import * as React from \"react\";\nimport type { TypeNarrativeContainerProps } from \"./NarrativeContainerTypes\";\n\n/** Merge class names, supporting `{ \"class\": boolean }` toggles. */\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n/**\n * NarrativeContainer — the foundational surface that narrative primitives are\n * composed inside. A padded, rounded, elevated card with a content slot and an\n * optional decorative gradient accent that wraps the top-left corner.\n *\n * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers\n * import the classes through `@sproutsocial/racine/css/components`. Surface\n * overrides are done with standard `className` / `style`.\n */\nconst NarrativeContainer = React.forwardRef<\n  HTMLDivElement,\n  TypeNarrativeContainerProps\n>(({ children, accent = true, className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"seeds-narrative-container\",\n        { \"seeds-narrative-container-accent\": accent },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nNarrativeContainer.displayName = \"NarrativeContainer\";\n\nexport default NarrativeContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAwCnB;AApCJ,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAWA,IAAM,qBAA2B,iBAG/B,CAAC,EAAE,UAAU,SAAS,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,EAAE,oCAAoC,OAAO;AAAA,QAC7C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,mBAAmB,cAAc;AAEjC,IAAO,6BAAQ;","names":[]}

package/dist/narrative-container.css

@@ -0,0 +1,56 @@
+/**
+ * Seeds NarrativeContainer 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.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-container seeds-narrative-container-accent">…</div>
+ */
+
+@layer components {
+
+.seeds-narrative-container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: var(--space-500);
+  border-radius: var(--radius-800);
+  box-shadow: var(--shadow-low);
+  background-color: var(--color-container-bg-base);
+  font-family: var(--font-family);
+}
+
+/* Decorative inner gradient border anchored to the top-left corner.
+   A masked ::before so the gradient renders as a uniform-width ring that follows
+   border-radius and never tints the content. The radial ellipse fades to
+   transparent away from the corner; its x-radius (80%) is larger than its
+   y-radius (60%) so the accent runs slightly further along the top edge than down
+   the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
+   --color-gradient-* token once one exists for a fade-to-transparent variant. */
+.seeds-narrative-container-accent::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 4px;
+  background: radial-gradient(
+    ellipse 80% 60% at top left,
+    #205bc3 0%,
+    #9747ff 28%,
+    #f282f5 50%,
+    transparent 72%
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-narrative-kit",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sproutsocial/seeds-react-narrative-kit",
+  "version": "0.1.0",
+  "description": "Seeds React Narrative Kit — composable narrative primitives for executive-brief style pages",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/narrative-container.css": "./dist/narrative-container.css"
+  },
+  "scripts": {
+    "build": "tsup --dts && cp src/narrative-container.css dist/narrative-container.css",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^4.1.0"
+  },
+  "devDependencies": {
+    "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/NarrativeContainer/NarrativeContainer.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import NarrativeContainer from "./NarrativeContainer";
+import "../narrative-container.css";
+
+const meta = {
+  title: "Narrative Kit/NarrativeContainer",
+  component: NarrativeContainer,
+} satisfies Meta<typeof NarrativeContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SlotContent = () => (
+  <div style={{ display: "grid", gap: 8 }}>
+    <strong>Engagement is up 24% this month</strong>
+    <span>
+      Driven by a strong week on LinkedIn and a viral reply thread. Audience
+      growth held steady.
+    </span>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    style: { width: 384 },
+    children: <SlotContent />,
+  },
+};
+
+export const WithoutAccent: Story = {
+  args: {
+    style: { width: 384 },
+    accent: false,
+    children: <SlotContent />,
+  },
+};

package/src/NarrativeContainer/NarrativeContainer.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { TypeNarrativeContainerProps } from "./NarrativeContainerTypes";
+
+/** Merge class names, supporting `{ "class": boolean }` toggles. */
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+/**
+ * NarrativeContainer — the foundational surface that narrative primitives are
+ * composed inside. A padded, rounded, elevated card with a content slot and an
+ * optional decorative gradient accent that wraps the top-left corner.
+ *
+ * Styled via `narrative-container.css` (Seeds CSS custom properties). Consumers
+ * import the classes through `@sproutsocial/racine/css/components`. Surface
+ * overrides are done with standard `className` / `style`.
+ */
+const NarrativeContainer = React.forwardRef<
+  HTMLDivElement,
+  TypeNarrativeContainerProps
+>(({ children, accent = true, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "seeds-narrative-container",
+        { "seeds-narrative-container-accent": accent },
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+NarrativeContainer.displayName = "NarrativeContainer";
+
+export default NarrativeContainer;

package/src/NarrativeContainer/NarrativeContainerTypes.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+
+export interface TypeNarrativeContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Narrative content rendered inside the container's slot. */
+  children?: React.ReactNode;
+  /**
+   * Render the decorative gradient accent that wraps the top-left corner.
+   * @default true
+   */
+  accent?: boolean;
+}

package/src/NarrativeContainer/__tests__/NarrativeContainer.test.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import NarrativeContainer from "../NarrativeContainer";
+
+describe("NarrativeContainer", () => {
+  it("renders its slot content", () => {
+    render(<NarrativeContainer>Brief summary</NarrativeContainer>);
+
+    expect(screen.getByText("Brief summary")).toBeInTheDocument();
+  });
+
+  it("forwards its ref to the underlying element", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<NarrativeContainer ref={ref}>Content</NarrativeContainer>);
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("renders the gradient accent by default and omits it when disabled", () => {
+    // The accent is a decorative CSS ::before toggled by a modifier class.
+    const { container, rerender } = render(
+      <NarrativeContainer>Content</NarrativeContainer>
+    );
+    expect(
+      container.querySelector(".seeds-narrative-container-accent")
+    ).toBeInTheDocument();
+
+    rerender(<NarrativeContainer accent={false}>Content</NarrativeContainer>);
+    expect(
+      container.querySelector(".seeds-narrative-container-accent")
+    ).not.toBeInTheDocument();
+  });
+});

package/src/NarrativeContainer/index.ts

@@ -0,0 +1,2 @@
+export { default as NarrativeContainer } from "./NarrativeContainer";
+export type { TypeNarrativeContainerProps } from "./NarrativeContainerTypes";

package/src/_internal/types.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared types for narrative primitives.
+ *
+ * Kept intentionally small — primitives built in follow-up work extend this as
+ * cross-cutting concerns emerge (tone/sentiment, density, etc.).
+ */
+
+/**
+ * Sentiment/tone shared across narrative primitives, used to drive decorative
+ * accents (e.g. the NarrativeContainer gradient edge) and semantic coloring.
+ */
+export type TypeNarrativeTone =
+  | "neutral"
+  | "positive"
+  | "negative"
+  | "opportunity";

package/src/index.ts

@@ -0,0 +1,8 @@
+/* Narrative Kit — composable narrative primitives.
+ * Each primitive adds a single line below. No default export — this is a kit. */
+export {
+  NarrativeContainer,
+  type TypeNarrativeContainerProps,
+} from "./NarrativeContainer";
+
+export type { TypeNarrativeTone } from "./_internal/types";

package/src/narrative-container.css

@@ -0,0 +1,56 @@
+/**
+ * Seeds NarrativeContainer 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.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-container seeds-narrative-container-accent">…</div>
+ */
+
+@layer components {
+
+.seeds-narrative-container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: var(--space-500);
+  border-radius: var(--radius-800);
+  box-shadow: var(--shadow-low);
+  background-color: var(--color-container-bg-base);
+  font-family: var(--font-family);
+}
+
+/* Decorative inner gradient border anchored to the top-left corner.
+   A masked ::before so the gradient renders as a uniform-width ring that follows
+   border-radius and never tints the content. The radial ellipse fades to
+   transparent away from the corner; its x-radius (80%) is larger than its
+   y-radius (60%) so the accent runs slightly further along the top edge than down
+   the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
+   --color-gradient-* token once one exists for a fade-to-transparent variant. */
+.seeds-narrative-container-accent::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 4px;
+  background: radial-gradient(
+    ellipse 80% 60% at top left,
+    #205bc3 0%,
+    #9747ff 28%,
+    #f282f5 50%,
+    transparent 72%
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react", /^@sproutsocial\//],
+  sourcemap: true,
+  metafile: options.metafile,
+}));