@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/dist/primitives/activity-feed.cjs

@@ -0,0 +1,177 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkKGFL3VWYcjs = require('../chunk-KGFL3VWY.cjs');
+
+
+
+
+var _chunkWABCLRBRcjs = require('../chunk-WABCLRBR.cjs');
+
+
+var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
+require('../chunk-VGTINL5Q.cjs');
+require('../chunk-I6GUOEBO.cjs');
+
+
+var _chunkG54TQV2Rcjs = require('../chunk-G54TQV2R.cjs');
+
+
+var _chunkVBPPFC7Xcjs = require('../chunk-VBPPFC7X.cjs');
+require('../chunk-L4DH72UF.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/activity-feed.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+function ActivityFeedToolbar({
+  categories,
+  category,
+  onCategoryChange,
+  filters,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search activity\u2026",
+  searchLabel = "Search activity",
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col gap-2 rounded-lg border bg-card p-2 lg:flex-row lg:items-center", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkKGFL3VWYcjs.ChipTabs,
+      {
+        items: categories,
+        value: category,
+        onChange: onCategoryChange,
+        size: "sm",
+        className: "shrink-0"
+      }
+    ),
+    filters != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2 lg:justify-end", children: filters }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative min-w-0 lg:w-64 lg:shrink-0", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Search, { "aria-hidden": true, className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkPQUSJEXLcjs.Input,
+        {
+          value: searchValue,
+          onChange: (event) => onSearchChange(event.target.value),
+          placeholder: searchPlaceholder,
+          "aria-label": searchLabel,
+          controlSize: "sm",
+          className: "pl-9"
+        }
+      )
+    ] })
+  ] });
+}
+function ActivityFeed({
+  groups,
+  loading = false,
+  skeletonRows = 5,
+  empty,
+  defaultExpandedIds = [],
+  className
+}) {
+  const [expanded, setExpanded] = _react.useState.call(void 0, () => new Set(defaultExpandedIds));
+  if (loading) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-2", className), "aria-busy": "true", children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVBPPFC7Xcjs.Skeleton, { className: "h-[72px] w-full rounded-lg" }, index)) });
+  }
+  const populatedGroups = groups.filter((group) => group.items.length > 0);
+  if (populatedGroups.length === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: _nullishCoalesce(empty, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkG54TQV2Rcjs.EmptyState,
+      {
+        variant: "empty",
+        title: "No activity found",
+        description: "Activity will appear here as it happens."
+      }
+    ))) });
+  }
+  const toggle = (id) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-6", className), children: populatedGroups.map((group) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { "aria-labelledby": `activity-feed-${group.id}`, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-center justify-between gap-3 px-0.5", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { id: `activity-feed-${group.id}`, className: "text-xs font-semibold text-foreground", children: group.label }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-muted-foreground", children: _nullishCoalesce(group.countLabel, () => ( `${group.items.length} ${group.items.length === 1 ? "activity" : "activities"}`)) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-1.5", children: group.items.map((item) => {
+      const isExpanded = expanded.has(item.id);
+      const detailId = `activity-feed-detail-${item.id}`;
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "article", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-x-4 gap-y-2 p-3 md:grid-cols-[minmax(0,15rem)_minmax(7rem,9rem)_minmax(0,1fr)_2rem] md:items-center", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Identity, { identity: item.identity }),
+          item.outcome != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActivityFeedOutcome, { outcome: item.outcome }) : item.status != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "justify-self-start", children: item.status }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm leading-snug text-foreground", children: item.summary }),
+            item.meta != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-0.5 text-xs text-muted-foreground", children: item.meta })
+          ] }),
+          item.detail != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              "aria-expanded": isExpanded,
+              "aria-controls": detailId,
+              "aria-label": _nullishCoalesce(item.detailLabel, () => ( (isExpanded ? "Hide activity details" : "Show activity details"))),
+              onClick: () => toggle(item.id),
+              className: "flex size-8 items-center justify-center justify-self-end rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "size-4 transition-transform", isExpanded && "rotate-180") })
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {})
+        ] }),
+        item.detail != null && isExpanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: detailId, className: "border-t bg-muted/20 px-3 py-3 text-sm", children: item.detail })
+      ] }, item.id);
+    }) })
+  ] }, group.id)) });
+}
+function ActivityFeedOutcome({ outcome }) {
+  const tone = _nullishCoalesce(outcome.tone, () => ( "neutral"));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "text-xs font-medium leading-5",
+        tone === "positive" && "text-green-700 dark:text-green-400",
+        tone === "negative" && "text-red-700 dark:text-red-400",
+        tone === "neutral" && "text-muted-foreground"
+      ),
+      children: outcome.label
+    }
+  );
+}
+function Identity({ identity }) {
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWABCLRBRcjs.Avatar, { size: "sm", surface: "muted", children: [
+      identity.imageUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWABCLRBRcjs.AvatarImage, { src: identity.imageUrl, alt: "" }) : null,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWABCLRBRcjs.AvatarFallback, { textSize: "micro", children: identity.fallback })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "min-w-0 text-left", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block truncate text-sm font-medium text-foreground", children: identity.title }),
+      identity.subtitle != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block truncate text-xs text-muted-foreground", children: identity.subtitle })
+    ] })
+  ] });
+  if (identity.onOpen) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        onClick: identity.onOpen,
+        "aria-label": identity.openLabel,
+        className: "flex min-w-0 items-center gap-2 rounded-md text-left hover:opacity-75 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 items-center gap-2", children: content });
+}
+
+
+
+exports.ActivityFeed = ActivityFeed; exports.ActivityFeedToolbar = ActivityFeedToolbar;

package/dist/primitives/activity-feed.d.cts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ChipTabItem } from './chip-tabs.cjs';
+
+interface ActivityFeedIdentity {
+    /** Primary identity text, normally a person or resource name. */
+    title: ReactNode;
+    /** One-line context below the title, such as role, company, or source. */
+    subtitle?: ReactNode;
+    imageUrl?: string | null;
+    /** Initials or an icon rendered when there is no image. */
+    fallback?: ReactNode;
+    /** Makes the identity a distinct action without turning the whole row into a button. */
+    onOpen?: () => void;
+    openLabel?: string;
+}
+interface ActivityFeedItem {
+    id: string;
+    identity: ActivityFeedIdentity;
+    /**
+     * Plain-text audit outcome. The feed renders this as semantic text rather
+     * than a badge, keeping status legible without adding visual noise.
+     */
+    outcome?: {
+        label: ReactNode;
+        tone?: ActivityFeedOutcomeTone;
+    };
+    /** @deprecated Prefer `outcome` for a consistently styled audit outcome. */
+    status?: ReactNode;
+    /** The event's main human-readable content. */
+    summary: ReactNode;
+    /** Actor and relative time, rendered below the summary. */
+    meta?: ReactNode;
+    /** Additional event context revealed by the disclosure control. */
+    detail?: ReactNode;
+    detailLabel?: string;
+}
+type ActivityFeedOutcomeTone = "positive" | "negative" | "neutral";
+interface ActivityFeedGroup {
+    id: string;
+    label: ReactNode;
+    items: ActivityFeedItem[];
+    /** Overrides the default “N activities” group count. */
+    countLabel?: ReactNode;
+}
+interface ActivityFeedProps {
+    groups: ActivityFeedGroup[];
+    loading?: boolean;
+    skeletonRows?: number;
+    empty?: ReactNode;
+    defaultExpandedIds?: string[];
+    className?: string;
+}
+interface ActivityFeedToolbarProps {
+    categories: ChipTabItem[];
+    category: string;
+    onCategoryChange: (category: string) => void;
+    /** Selects or other compact filter controls. */
+    filters?: ReactNode;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    className?: string;
+}
+/** Standard filter/search header for ActivityFeed-based screens. */
+declare function ActivityFeedToolbar({ categories, category, onCategoryChange, filters, searchValue, onSearchChange, searchPlaceholder, searchLabel, className, }: ActivityFeedToolbarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Rich, grouped activity feed for human-facing audit and history screens.
+ *
+ * Unlike `ActivityLog` (a compact operator/debug log), this primitive gives
+ * the subject, outcome, explanation and attribution equal visual weight. It
+ * deliberately keeps “open subject” and “expand event” as separate controls,
+ * avoiding nested buttons and making both actions keyboard accessible.
+ */
+declare function ActivityFeed({ groups, loading, skeletonRows, empty, defaultExpandedIds, className, }: ActivityFeedProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityFeed, type ActivityFeedGroup, type ActivityFeedIdentity, type ActivityFeedItem, type ActivityFeedOutcomeTone, type ActivityFeedProps, ActivityFeedToolbar, type ActivityFeedToolbarProps };

package/dist/primitives/activity-feed.d.ts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ChipTabItem } from './chip-tabs.js';
+
+interface ActivityFeedIdentity {
+    /** Primary identity text, normally a person or resource name. */
+    title: ReactNode;
+    /** One-line context below the title, such as role, company, or source. */
+    subtitle?: ReactNode;
+    imageUrl?: string | null;
+    /** Initials or an icon rendered when there is no image. */
+    fallback?: ReactNode;
+    /** Makes the identity a distinct action without turning the whole row into a button. */
+    onOpen?: () => void;
+    openLabel?: string;
+}
+interface ActivityFeedItem {
+    id: string;
+    identity: ActivityFeedIdentity;
+    /**
+     * Plain-text audit outcome. The feed renders this as semantic text rather
+     * than a badge, keeping status legible without adding visual noise.
+     */
+    outcome?: {
+        label: ReactNode;
+        tone?: ActivityFeedOutcomeTone;
+    };
+    /** @deprecated Prefer `outcome` for a consistently styled audit outcome. */
+    status?: ReactNode;
+    /** The event's main human-readable content. */
+    summary: ReactNode;
+    /** Actor and relative time, rendered below the summary. */
+    meta?: ReactNode;
+    /** Additional event context revealed by the disclosure control. */
+    detail?: ReactNode;
+    detailLabel?: string;
+}
+type ActivityFeedOutcomeTone = "positive" | "negative" | "neutral";
+interface ActivityFeedGroup {
+    id: string;
+    label: ReactNode;
+    items: ActivityFeedItem[];
+    /** Overrides the default “N activities” group count. */
+    countLabel?: ReactNode;
+}
+interface ActivityFeedProps {
+    groups: ActivityFeedGroup[];
+    loading?: boolean;
+    skeletonRows?: number;
+    empty?: ReactNode;
+    defaultExpandedIds?: string[];
+    className?: string;
+}
+interface ActivityFeedToolbarProps {
+    categories: ChipTabItem[];
+    category: string;
+    onCategoryChange: (category: string) => void;
+    /** Selects or other compact filter controls. */
+    filters?: ReactNode;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    className?: string;
+}
+/** Standard filter/search header for ActivityFeed-based screens. */
+declare function ActivityFeedToolbar({ categories, category, onCategoryChange, filters, searchValue, onSearchChange, searchPlaceholder, searchLabel, className, }: ActivityFeedToolbarProps): react_jsx_runtime.JSX.Element;
+/**
+ * Rich, grouped activity feed for human-facing audit and history screens.
+ *
+ * Unlike `ActivityLog` (a compact operator/debug log), this primitive gives
+ * the subject, outcome, explanation and attribution equal visual weight. It
+ * deliberately keeps “open subject” and “expand event” as separate controls,
+ * avoiding nested buttons and making both actions keyboard accessible.
+ */
+declare function ActivityFeed({ groups, loading, skeletonRows, empty, defaultExpandedIds, className, }: ActivityFeedProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityFeed, type ActivityFeedGroup, type ActivityFeedIdentity, type ActivityFeedItem, type ActivityFeedOutcomeTone, type ActivityFeedProps, ActivityFeedToolbar, type ActivityFeedToolbarProps };

package/dist/primitives/activity-feed.js

@@ -0,0 +1,177 @@
+"use client";
+import {
+  ChipTabs
+} from "../chunk-QD63LB2F.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "../chunk-3OWGL4Q2.js";
+import {
+  Input
+} from "../chunk-QMA3WVB7.js";
+import "../chunk-H7TETFLB.js";
+import "../chunk-D4ZL2OEQ.js";
+import {
+  EmptyState
+} from "../chunk-4NN7EA3W.js";
+import {
+  Skeleton
+} from "../chunk-YEW65ASC.js";
+import "../chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/activity-feed.tsx
+import { useState } from "react";
+import { ChevronDown, Search } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ActivityFeedToolbar({
+  categories,
+  category,
+  onCategoryChange,
+  filters,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search activity\u2026",
+  searchLabel = "Search activity",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 rounded-lg border bg-card p-2 lg:flex-row lg:items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      ChipTabs,
+      {
+        items: categories,
+        value: category,
+        onChange: onCategoryChange,
+        size: "sm",
+        className: "shrink-0"
+      }
+    ),
+    filters != null && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2 lg:justify-end", children: filters }),
+    /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 lg:w-64 lg:shrink-0", children: [
+      /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: searchValue,
+          onChange: (event) => onSearchChange(event.target.value),
+          placeholder: searchPlaceholder,
+          "aria-label": searchLabel,
+          controlSize: "sm",
+          className: "pl-9"
+        }
+      )
+    ] })
+  ] });
+}
+function ActivityFeed({
+  groups,
+  loading = false,
+  skeletonRows = 5,
+  empty,
+  defaultExpandedIds = [],
+  className
+}) {
+  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedIds));
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), "aria-busy": "true", children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-[72px] w-full rounded-lg" }, index)) });
+  }
+  const populatedGroups = groups.filter((group) => group.items.length > 0);
+  if (populatedGroups.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: empty ?? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: "empty",
+        title: "No activity found",
+        description: "Activity will appear here as it happens."
+      }
+    ) });
+  }
+  const toggle = (id) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children: populatedGroups.map((group) => /* @__PURE__ */ jsxs("section", { "aria-labelledby": `activity-feed-${group.id}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-3 px-0.5", children: [
+      /* @__PURE__ */ jsx("h3", { id: `activity-feed-${group.id}`, className: "text-xs font-semibold text-foreground", children: group.label }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: group.countLabel ?? `${group.items.length} ${group.items.length === 1 ? "activity" : "activities"}` })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: group.items.map((item) => {
+      const isExpanded = expanded.has(item.id);
+      const detailId = `activity-feed-detail-${item.id}`;
+      return /* @__PURE__ */ jsxs("article", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-x-4 gap-y-2 p-3 md:grid-cols-[minmax(0,15rem)_minmax(7rem,9rem)_minmax(0,1fr)_2rem] md:items-center", children: [
+          /* @__PURE__ */ jsx(Identity, { identity: item.identity }),
+          item.outcome != null ? /* @__PURE__ */ jsx(ActivityFeedOutcome, { outcome: item.outcome }) : item.status != null ? /* @__PURE__ */ jsx("div", { className: "justify-self-start", children: item.status }) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm leading-snug text-foreground", children: item.summary }),
+            item.meta != null && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: item.meta })
+          ] }),
+          item.detail != null ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": isExpanded,
+              "aria-controls": detailId,
+              "aria-label": item.detailLabel ?? (isExpanded ? "Hide activity details" : "Show activity details"),
+              onClick: () => toggle(item.id),
+              className: "flex size-8 items-center justify-center justify-self-end rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4 transition-transform", isExpanded && "rotate-180") })
+            }
+          ) : /* @__PURE__ */ jsx("span", {})
+        ] }),
+        item.detail != null && isExpanded && /* @__PURE__ */ jsx("div", { id: detailId, className: "border-t bg-muted/20 px-3 py-3 text-sm", children: item.detail })
+      ] }, item.id);
+    }) })
+  ] }, group.id)) });
+}
+function ActivityFeedOutcome({ outcome }) {
+  const tone = outcome.tone ?? "neutral";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-xs font-medium leading-5",
+        tone === "positive" && "text-green-700 dark:text-green-400",
+        tone === "negative" && "text-red-700 dark:text-red-400",
+        tone === "neutral" && "text-muted-foreground"
+      ),
+      children: outcome.label
+    }
+  );
+}
+function Identity({ identity }) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Avatar, { size: "sm", surface: "muted", children: [
+      identity.imageUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: identity.imageUrl, alt: "" }) : null,
+      /* @__PURE__ */ jsx(AvatarFallback, { textSize: "micro", children: identity.fallback })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 text-left", children: [
+      /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: identity.title }),
+      identity.subtitle != null && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: identity.subtitle })
+    ] })
+  ] });
+  if (identity.onOpen) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: identity.onOpen,
+        "aria-label": identity.openLabel,
+        className: "flex min-w-0 items-center gap-2 rounded-md text-left hover:opacity-75 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: content });
+}
+export {
+  ActivityFeed,
+  ActivityFeedToolbar
+};

package/dist/primitives/activity-log.cjs

@@ -0,0 +1,79 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+
+var _chunkGRZMUGT6cjs = require('../chunk-GRZMUGT6.cjs');
+require('../chunk-BGLGRUPP.cjs');
+
+
+var _chunkG54TQV2Rcjs = require('../chunk-G54TQV2R.cjs');
+
+
+var _chunkVBPPFC7Xcjs = require('../chunk-VBPPFC7X.cjs');
+require('../chunk-L4DH72UF.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/activity-log.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function ActivityLog({
+  entries,
+  actionLabels,
+  loading = false,
+  skeletonRows = 5,
+  empty,
+  renderDetail,
+  onSelect,
+  spacing,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGRZMUGT6cjs.Timeline, { spacing, className, children: Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVBPPFC7Xcjs.Skeleton, { className: "h-12 w-full rounded-md" }, i)) });
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: _nullishCoalesce(empty, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkG54TQV2Rcjs.EmptyState,
+      {
+        variant: "empty",
+        title: "Nothing logged yet",
+        description: "Actions will appear here as they happen."
+      }
+    ))) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGRZMUGT6cjs.Timeline, { spacing, className, children: entries.map((entry) => {
+    const label = _nullishCoalesce(_optionalChain([actionLabels, 'optionalAccess', _2 => _2[entry.action]]), () => ( entry.action));
+    const detail = renderDetail ? renderDetail(entry) : defaultDetail(entry.detail);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkGRZMUGT6cjs.TimelineRow,
+      {
+        icon: entry.icon,
+        status: entry.status,
+        interactive: !!onSelect,
+        onClick: onSelect ? () => onSelect(entry) : void 0,
+        timestamp: entry.timestamp,
+        title: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: label }),
+          entry.target != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-normal text-muted-foreground", children: entry.target })
+        ] }),
+        subtitle: entry.actor != null ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          "by ",
+          entry.actor
+        ] }) : void 0,
+        children: detail
+      },
+      entry.id
+    );
+  }) });
+}
+function defaultDetail(detail) {
+  if (detail == null) return null;
+  if (typeof detail === "object" && Object.keys(detail).length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "details", { className: "mt-1 pl-6 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "summary", { className: "cursor-pointer select-none hover:text-foreground", children: "Detail" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { className: "mt-1 overflow-x-auto rounded bg-background/60 p-2 font-mono text-[11px]", children: JSON.stringify(detail, null, 2) })
+  ] });
+}
+
+
+exports.ActivityLog = ActivityLog;

package/dist/primitives/activity-log.d.cts

@@ -0,0 +1,55 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { TimelineProps } from './timeline.cjs';
+
+interface ActivityLogEntry {
+    id: string;
+    /**
+     * Machine-readable action key — `user.impersonate`, `plan.upgrade`.
+     * Rendered through `actionLabels` when a label exists, raw otherwise,
+     * so a new action type degrades to something readable instead of
+     * disappearing.
+     */
+    action: string;
+    /** Who did it. */
+    actor?: ReactNode;
+    /** What it was done to. */
+    target?: ReactNode;
+    /** Right-aligned; pre-format it — this component does no date maths. */
+    timestamp?: ReactNode;
+    /** Structured extras. Rendered as collapsed JSON unless `renderDetail`. */
+    detail?: unknown;
+    /** Overrides the leading visual. */
+    icon?: ReactNode;
+    /** Forwarded to `<TimelineRow>`'s `<StatusIcon>` when no `icon` is set. */
+    status?: string;
+}
+interface ActivityLogProps {
+    entries: ActivityLogEntry[];
+    /** Maps action keys to human labels. Unmapped keys render as-is. */
+    actionLabels?: Record<string, string>;
+    loading?: boolean;
+    /** Skeleton row count while `loading`. Defaults to 5. */
+    skeletonRows?: number;
+    /** Shown when `entries` is empty and not loading. */
+    empty?: ReactNode;
+    /** Replaces the default collapsed-JSON rendering of `detail`. */
+    renderDetail?: (entry: ActivityLogEntry) => ReactNode;
+    /** Makes rows interactive. */
+    onSelect?: (entry: ActivityLogEntry) => void;
+    spacing?: TimelineProps["spacing"];
+    className?: string;
+}
+/**
+ * Append-only event feed — audit trails, webhook logs, job history.
+ *
+ * Composed from `<Timeline>` rather than reimplementing a row: the
+ * actor/action/target triple becomes the title, the actor line becomes
+ * the subtitle, and `detail` hangs off the bottom in a `<details>`.
+ * Anything the default shape can't express, `renderDetail` and `icon`
+ * can — and `<Timeline>` itself is still there for feeds that want a
+ * different row entirely.
+ */
+declare function ActivityLog({ entries, actionLabels, loading, skeletonRows, empty, renderDetail, onSelect, spacing, className, }: ActivityLogProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityLog, type ActivityLogEntry, type ActivityLogProps };