admin-ui-starter-kit 0.1.0

package/dist/showcase/assets/activities-Dt-dO5ew.js

@@ -0,0 +1,501 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{n,r,t as i}from"./activities-feed-card-DZdFekXl.js";import{cr as a,gr as o,r as s,sr as c,t as l}from"./example-DPfw-R7_.js";import{t as u}from"./bell-BTX2D-ES.js";import{t as d}from"./box-F1uaZ6iw.js";import{t as f}from"./credit-card--5vg7bQy.js";import{t as p}from"./eye-BQU3UqWi.js";import{t as m}from"./receipt-D3ilhl9U.js";import{t as h}from"./shield-check-jGSgmijm.js";import{t as g}from"./trash-2-B0_GprQM.js";import{t as _}from"./truck-Bl1pNrHi.js";import{t as v}from"./user-3L762Mec.js";import{a as y,k as b,r as x}from"./index-B-Z7p0So.js";import{t as S}from"./props-table-BzUnIcv-.js";var C=x(`reply`,[[`path`,{d:`M20 18v-2a4 4 0 0 0-4-4H4`,key:`5vmcpk`}],[`path`,{d:`m9 17-5-5 5-5`,key:`nvlc11`}]]),w=e({CompactDensitySingleLineDotFeed:()=>I,CustomRowRenderingSlotsRenderRow:()=>z,DefaultDensityHeadlineSegmentsGrouping:()=>F,MassEventConfigurationCustomStringsTones:()=>R,ResourceRegistrySaveRestoreTaggingBadgingLinking:()=>B,RichDensityChangesMetadataActions:()=>L}),T=t(b(),1),E=y(),D=Date.now(),O=e=>new Date(D-e).toISOString(),k=60*1e3,A=60*k,j=24*A,M={"order:INV-2026-0392":{label:`INV-2026-0392`,href:`#/orders/INV-2026-0392`,icon:m,tone:`primary`,badge:{label:`Paid`,tone:`success`},tags:[`EUR 320`]},"order:INV-2026-0398":{label:`INV-2026-0398`,href:`#/orders/INV-2026-0398`,icon:m,tone:`warning`,badge:{label:`Refund`,tone:`warning`}},"product:AIR-BALLOON-01":{label:`Hot Air Balloon`,href:`#/products/AIR-BALLOON-01`,icon:d,tone:`info`},"shipment:SHP-2026-77":{label:`SHP-2026-77`,href:`#/shipments/SHP-2026-77`,icon:_,tone:`info`,badge:{label:`In transit`,tone:`info`}}},N=[{id:`a1`,event:`paid`,actor:{id:`u-12`,name:`Sarah Smitha`},createdAt:O(2*k),segments:[{type:`actor`,text:`Sarah Smitha`,actorId:`u-12`},{type:`text`,text:`paid`},{type:`resource`,resource:{key:`order:INV-2026-0392`,type:`order`}},{type:`text`,text:`— full balance.`}]},{id:`a2`,event:`status_changed`,actor:{id:`u-7`,name:`Daniel Smith`},createdAt:O(35*k),segments:[{type:`actor`,text:`Daniel Smith`,actorId:`u-7`},{type:`text`,text:`changed status to`},{type:`status`,text:`Confirmed`,tone:`success`},{type:`text`,text:`on`},{type:`resource`,resource:{key:`shipment:SHP-2026-77`,type:`shipment`}}]},{id:`a3`,event:`mail_delivered`,source:`mail`,actor:{id:`system`,name:`Mailer`},createdAt:O(3*A),segments:[{type:`text`,text:`Receipt email`},{type:`value`,text:`"Your booking confirmation"`},{type:`text`,text:`was delivered to`},{type:`value`,text:`maria@example.com`}]},{id:`a4`,event:`comment_created`,source:`comment`,actor:{id:`u-21`,name:`Emma Garcia`},createdAt:O(1*j+4*A),description:`Customer asked whether the basket fits 4 adults — looped support in.`,segments:[{type:`actor`,text:`Emma Garcia`,actorId:`u-21`},{type:`text`,text:`commented on`},{type:`resource`,resource:{key:`product:AIR-BALLOON-01`,type:`product`}}]},{id:`a5`,event:`mail_failed`,source:`mail`,actor:{id:`system`,name:`Mailer`},createdAt:O(2*j+6*A),headline:`Webhook failure on shopify.payments.captured.`}],P=[{id:`r1`,event:`updated`,actor:{id:`u-12`,name:`Sarah Smitha`},createdAt:O(8*k),segments:[{type:`actor`,text:`Sarah Smitha`,actorId:`u-12`},{type:`text`,text:`updated`},{type:`field`,text:`shipping`},{type:`text`,text:`on`},{type:`resource`,resource:{key:`order:INV-2026-0392`}}],changes:[{key:`address`,label:`Address`,old:`New York 1000`,new:`New York 1407`},{key:`method`,label:`Method`,old:`Standard`,new:`Express`},{key:`note`,label:`Note`,new:`Leave with concierge.`}],metadata:[{label:`IP`,value:`85.130.12.4`},{label:`Device`,value:`macOS · Safari`}],resources:[{key:`order:INV-2026-0392`},{key:`shipment:SHP-2026-77`}]},{id:`r2`,event:`refunded`,actor:{id:`u-7`,name:`Daniel Smith`},createdAt:O(45*k),segments:[{type:`actor`,text:`Daniel Smith`,actorId:`u-7`},{type:`text`,text:`refunded`},{type:`resource`,resource:{key:`order:INV-2026-0398`}},{type:`text`,text:`partially.`}],description:`Refund processed via the original Visa ending 4242.`,metadata:[{label:`Amount`,value:`€ 80.00`},{label:`Reason`,value:`Damaged in transit`}]},{id:`r3`,event:`comment_created`,source:`comment`,actor:{id:`u-21`,name:`Emma Garcia`},createdAt:O(2*A),description:`Need a final spec for the basket — colour swatches in next sprint.`,segments:[{type:`actor`,text:`Emma Garcia`,actorId:`u-21`},{type:`text`,text:`left a note on`},{type:`resource`,resource:{key:`product:AIR-BALLOON-01`}}]}];function F(){let[e,t]=(0,T.useState)(M),[n,r]=(0,T.useState)(`No interactions yet — click an actor or resource.`),a=e=>r(e);return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(i,{activities:N,currentUserId:`u-12`,resources:e,onResourcesChange:t,onActorClick:e=>a(`Actor click → ${e.name} (${e.id??`—`})`),onResourceClick:(e,t)=>a(`Resource click → ${e.key} ${t?`(${t.label})`:`(unregistered)`}`),onActivityClick:e=>a(`Activity click → ${e.event} · ${e.id}`),titleSuffix:(0,E.jsx)(o,{size:`xxs`,type:`secondary`,className:`tabular-nums`,children:N.length}),description:`The actor matching currentUserId is rendered as 'You'. Resources are fed live from the registry below.`}),(0,E.jsx)(o,{size:`xs`,type:`secondary`,className:`mt-3`,children:n})]})}function I(){let[e]=(0,T.useState)(M);return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(i,{activities:N,density:`compact`,resources:e,title:`Compact`,description:`Dot-only marker, single line per row. Fit for sidebars / activity pills.`})})}function L(){let[e,t]=(0,T.useState)(M),[,n]=(0,T.useState)(`—`),r=e=>n(e);return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(i,{activities:P,density:`rich`,currentUserId:`u-12`,resources:e,onResourcesChange:t,title:`Rich`,actionsForActivity:e=>[{id:`view`,label:`View details`,icon:p,onClick:()=>r(`Action → view (${e.id})`)},{id:`reply`,label:`Reply`,icon:C,onClick:()=>r(`Action → reply (${e.id})`)},{id:`delete`,label:`Delete`,icon:g,tone:`destructive`,onClick:()=>r(`Action → delete (${e.id})`)}],onAction:(e,t)=>r(`onAction → ${e} · ${t.id}`)})})}function R(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(i,{activities:[{id:`evt-1`,event:`subscription_renewed`,createdAt:O(20*k),actor:{id:`sys`,name:`Billing`},segments:[{type:`text`,text:`Subscription`},{type:`value`,text:`Pro Annual`},{type:`text`,text:`auto-renewed for`},{type:`value`,text:`Sarah Smitha`}],metadata:[{label:`Next charge`,value:`Apr 30 2027`}]},{id:`evt-2`,event:`payment_method_added`,createdAt:O(2*j),actor:{id:`u-12`,name:`Sarah Smitha`},segments:[{type:`actor`,text:`Sarah Smitha`,actorId:`u-12`},{type:`text`,text:`added a new card ending`},{type:`value`,text:`4242`}]},{id:`evt-3`,event:`access_granted`,createdAt:O(3*j),actor:{id:`u-21`,name:`Emma Garcia`},segments:[{type:`actor`,text:`Emma Garcia`,actorId:`u-21`},{type:`text`,text:`granted access to`},{type:`value`,text:`Daniel Smith`},{type:`status`,text:`Editor`,tone:`info`}]}],eventConfig:{subscription_renewed:{icon:u,tone:`success`,label:`Renewed`},payment_method_added:{icon:f,tone:`info`,label:`Card added`},access_granted:{icon:h,tone:`primary`,label:`Access`}},strings:{title:`Account events`,sources:{system:`Auto`}},title:`Account events`})})}function z(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(i,{activities:N.slice(0,3),title:`Custom rows`,slots:{renderRow:(e,t)=>(0,E.jsxs)(`div`,{className:`flex items-start gap-3 rounded-md border border-border/60 bg-card px-3 py-2 mb-2`,children:[(0,E.jsx)(`span`,{className:`mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground`,children:(0,E.jsx)(v,{className:`size-3.5`})}),(0,E.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,E.jsx)(o,{weight:`medium`,children:e.actor?.name??`—`}),(0,E.jsxs)(o,{size:`xs`,type:`secondary`,children:[t.eventConfig.label??e.event,t.relativeTime?` · ${t.relativeTime}`:``]})]}),(0,E.jsx)(r,{className:`size-4 text-muted-foreground`})]})}})})}function B(){let[e,t]=(0,T.useState)(M),[,r]=(0,T.useState)(`—`),i=e=>r(e);return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(o,{type:`secondary`,className:`mb-3`,children:`Edit a resource entry — every row referencing that key updates immediately and the registry change is broadcast through onResourcesChange (wire to localStorage / API).`}),(0,E.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[2fr_1fr]`,children:[(0,E.jsx)(n,{activities:P,density:`rich`,currentUserId:`u-12`,resources:e,onResourcesChange:t,onResourceClick:(e,t)=>i(`Registry click → ${e.key} (${t?.label??`untagged`})`)}),(0,E.jsxs)(`div`,{className:`rounded-lg border border-border bg-card p-4`,children:[(0,E.jsx)(o,{weight:`semibold`,className:`mb-3`,children:`Registered resources`}),(0,E.jsxs)(`div`,{className:`space-y-3`,children:[Object.entries(e).map(([e,n])=>(0,E.jsxs)(`div`,{className:`space-y-1 rounded-md border border-border/60 px-3 py-2`,children:[(0,E.jsx)(o,{size:`xs`,type:`secondary`,className:`tabular-nums`,children:e}),(0,E.jsx)(o,{weight:`medium`,children:n.label}),(0,E.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,E.jsx)(s,{size:`xs`,variant:`secondary`,buttonStyle:`outline`,onClick:()=>t(t=>({...t,[e]:{...t[e],badge:{label:`Updated`,tone:`warning`}}})),children:`Mark updated`}),(0,E.jsx)(s,{size:`xs`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>t(t=>{let n={...t};return delete n[e],n}),children:`Untag`})]})]},e)),Object.keys(e).length===0&&(0,E.jsx)(o,{size:`xs`,type:`secondary`,children:`Registry empty — every reference now renders as a plain key.`}),(0,E.jsx)(s,{size:`xs`,variant:`primary`,buttonStyle:`solid`,onClick:()=>t(M),children:`Restore seed`})]})]})]})]})}var V=`import {
+    Bell,
+    Bookmark,
+    Box,
+    CreditCard,
+    Eye,
+    Reply,
+    Receipt,
+    ShieldCheck,
+    Trash2,
+    Truck,
+    User,
+} from 'lucide-react';
+import { useState } from 'react';
+import {
+    ActivityFeed,
+    ActivityFeedCard,
+    type ActivityItem,
+    type ActivityResourceConfig,
+} from '@/components/features/activities';
+import { Button } from '@/components/base/buttons';
+import { Text } from '@/components/typography';
+
+/**
+ * Activities feature preview — demonstrates the redesigned <ActivityFeed />.
+ *
+ * Sections:
+ *   1. Default density — the workhorse
+ *   2. Compact density — dense one-line feed
+ *   3. Rich density — icons, headline segments, change diff, actions, resources
+ *   4. Mass-config + custom rendering
+ *   5. Resource registry — save/restore tagging/badging/linking
+ */
+
+
+
+
+
+
+const NOW = Date.now();
+const REL = (offsetMs: number) => new Date(NOW - offsetMs).toISOString();
+const MIN = 60 * 1000;
+const HOUR = 60 * MIN;
+const DAY = 24 * HOUR;
+
+const RESOURCE_SEED: Record<string, ActivityResourceConfig> = {
+    'order:INV-2026-0392': {
+        label: 'INV-2026-0392',
+        href: '#/orders/INV-2026-0392',
+        icon: Receipt,
+        tone: 'primary',
+        badge: { label: 'Paid', tone: 'success' },
+        tags: ['EUR 320'],
+    },
+    'order:INV-2026-0398': {
+        label: 'INV-2026-0398',
+        href: '#/orders/INV-2026-0398',
+        icon: Receipt,
+        tone: 'warning',
+        badge: { label: 'Refund', tone: 'warning' },
+    },
+    'product:AIR-BALLOON-01': {
+        label: 'Hot Air Balloon',
+        href: '#/products/AIR-BALLOON-01',
+        icon: Box,
+        tone: 'info',
+    },
+    'shipment:SHP-2026-77': {
+        label: 'SHP-2026-77',
+        href: '#/shipments/SHP-2026-77',
+        icon: Truck,
+        tone: 'info',
+        badge: { label: 'In transit', tone: 'info' },
+    },
+};
+
+const DEFAULT_ACTIVITIES: ActivityItem[] = [
+    {
+        id: 'a1',
+        event: 'paid',
+        actor: { id: 'u-12', name: 'Sarah Smitha' },
+        createdAt: REL(2 * MIN),
+        segments: [
+            { type: 'actor', text: 'Sarah Smitha', actorId: 'u-12' },
+            { type: 'text', text: 'paid' },
+            { type: 'resource', resource: { key: 'order:INV-2026-0392', type: 'order' } },
+            { type: 'text', text: '— full balance.' },
+        ],
+    },
+    {
+        id: 'a2',
+        event: 'status_changed',
+        actor: { id: 'u-7', name: 'Daniel Smith' },
+        createdAt: REL(35 * MIN),
+        segments: [
+            { type: 'actor', text: 'Daniel Smith', actorId: 'u-7' },
+            { type: 'text', text: 'changed status to' },
+            { type: 'status', text: 'Confirmed', tone: 'success' },
+            { type: 'text', text: 'on' },
+            { type: 'resource', resource: { key: 'shipment:SHP-2026-77', type: 'shipment' } },
+        ],
+    },
+    {
+        id: 'a3',
+        event: 'mail_delivered',
+        source: 'mail',
+        actor: { id: 'system', name: 'Mailer' },
+        createdAt: REL(3 * HOUR),
+        segments: [
+            { type: 'text', text: 'Receipt email' },
+            { type: 'value', text: '"Your booking confirmation"' },
+            { type: 'text', text: 'was delivered to' },
+            { type: 'value', text: 'maria@example.com' },
+        ],
+    },
+    {
+        id: 'a4',
+        event: 'comment_created',
+        source: 'comment',
+        actor: { id: 'u-21', name: 'Emma Garcia' },
+        createdAt: REL(1 * DAY + 4 * HOUR),
+        description:
+            'Customer asked whether the basket fits 4 adults — looped support in.',
+        segments: [
+            { type: 'actor', text: 'Emma Garcia', actorId: 'u-21' },
+            { type: 'text', text: 'commented on' },
+            { type: 'resource', resource: { key: 'product:AIR-BALLOON-01', type: 'product' } },
+        ],
+    },
+    {
+        id: 'a5',
+        event: 'mail_failed',
+        source: 'mail',
+        actor: { id: 'system', name: 'Mailer' },
+        createdAt: REL(2 * DAY + 6 * HOUR),
+        headline: 'Webhook failure on shopify.payments.captured.',
+    },
+];
+
+const RICH_ACTIVITIES: ActivityItem[] = [
+    {
+        id: 'r1',
+        event: 'updated',
+        actor: { id: 'u-12', name: 'Sarah Smitha' },
+        createdAt: REL(8 * MIN),
+        segments: [
+            { type: 'actor', text: 'Sarah Smitha', actorId: 'u-12' },
+            { type: 'text', text: 'updated' },
+            { type: 'field', text: 'shipping' },
+            { type: 'text', text: 'on' },
+            { type: 'resource', resource: { key: 'order:INV-2026-0392' } },
+        ],
+        changes: [
+            { key: 'address', label: 'Address', old: 'New York 1000', new: 'New York 1407' },
+            { key: 'method', label: 'Method', old: 'Standard', new: 'Express' },
+            { key: 'note', label: 'Note', new: 'Leave with concierge.' },
+        ],
+        metadata: [
+            { label: 'IP', value: '85.130.12.4' },
+            { label: 'Device', value: 'macOS · Safari' },
+        ],
+        resources: [
+            { key: 'order:INV-2026-0392' },
+            { key: 'shipment:SHP-2026-77' },
+        ],
+    },
+    {
+        id: 'r2',
+        event: 'refunded',
+        actor: { id: 'u-7', name: 'Daniel Smith' },
+        createdAt: REL(45 * MIN),
+        segments: [
+            { type: 'actor', text: 'Daniel Smith', actorId: 'u-7' },
+            { type: 'text', text: 'refunded' },
+            { type: 'resource', resource: { key: 'order:INV-2026-0398' } },
+            { type: 'text', text: 'partially.' },
+        ],
+        description: 'Refund processed via the original Visa ending 4242.',
+        metadata: [
+            { label: 'Amount', value: '€ 80.00' },
+            { label: 'Reason', value: 'Damaged in transit' },
+        ],
+    },
+    {
+        id: 'r3',
+        event: 'comment_created',
+        source: 'comment',
+        actor: { id: 'u-21', name: 'Emma Garcia' },
+        createdAt: REL(2 * HOUR),
+        description:
+            'Need a final spec for the basket — colour swatches in next sprint.',
+        segments: [
+            { type: 'actor', text: 'Emma Garcia', actorId: 'u-21' },
+            { type: 'text', text: 'left a note on' },
+            { type: 'resource', resource: { key: 'product:AIR-BALLOON-01' } },
+        ],
+    },
+];
+
+export function DefaultDensityHeadlineSegmentsGrouping() {
+	const [registry, setRegistry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	const [lastEvent, setLastEvent] = useState<string>(
+	        'No interactions yet — click an actor or resource.',
+	    );
+	const recordEvent = (msg: string) => setLastEvent(msg);
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={DEFAULT_ACTIVITIES}
+			                    currentUserId="u-12"
+			                    resources={registry}
+			                    onResourcesChange={setRegistry}
+			                    onActorClick={(actor) =>
+			                        recordEvent(\`Actor click → \${actor.name} (\${actor.id ?? '—'})\`)
+			                    }
+			                    onResourceClick={(ref, cfg) =>
+			                        recordEvent(
+			                            \`Resource click → \${ref.key} \${cfg ? \`(\${cfg.label})\` : '(unregistered)'}\`,
+			                        )
+			                    }
+			                    onActivityClick={(a) =>
+			                        recordEvent(\`Activity click → \${a.event} · \${a.id}\`)
+			                    }
+			                    titleSuffix={
+			                        <Text size="xxs" type="secondary" className="tabular-nums">
+			                            {DEFAULT_ACTIVITIES.length}
+			                        </Text>
+			                    }
+			                    description="The actor matching currentUserId is rendered as 'You'. Resources are fed live from the registry below."
+			                />
+			                <Text size="xs" type="secondary" className="mt-3">
+			                    {lastEvent}
+			                </Text>
+		</>
+	);
+}
+
+export function CompactDensitySingleLineDotFeed() {
+	const [registry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={DEFAULT_ACTIVITIES}
+			                    density="compact"
+			                    resources={registry}
+			                    title="Compact"
+			                    description="Dot-only marker, single line per row. Fit for sidebars / activity pills."
+			                />
+		</>
+	);
+}
+
+export function RichDensityChangesMetadataActions() {
+	const [registry, setRegistry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	const [, setLastEvent] = useState<string>('—');
+	const recordEvent = (msg: string) => setLastEvent(msg);
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={RICH_ACTIVITIES}
+			                    density="rich"
+			                    currentUserId="u-12"
+			                    resources={registry}
+			                    onResourcesChange={setRegistry}
+			                    title="Rich"
+			                    actionsForActivity={(a) => [
+			                        {
+			                            id: 'view',
+			                            label: 'View details',
+			                            icon: Eye,
+			                            onClick: () =>
+			                                recordEvent(\`Action → view (\${a.id})\`),
+			                        },
+			                        {
+			                            id: 'reply',
+			                            label: 'Reply',
+			                            icon: Reply,
+			                            onClick: () =>
+			                                recordEvent(\`Action → reply (\${a.id})\`),
+			                        },
+			                        {
+			                            id: 'delete',
+			                            label: 'Delete',
+			                            icon: Trash2,
+			                            tone: 'destructive',
+			                            onClick: () =>
+			                                recordEvent(\`Action → delete (\${a.id})\`),
+			                        },
+			                    ]}
+			                    onAction={(actionId, a) =>
+			                        recordEvent(\`onAction → \${actionId} · \${a.id}\`)
+			                    }
+			                />
+		</>
+	);
+}
+
+export function MassEventConfigurationCustomStringsTones() {
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={[
+			                        {
+			                            id: 'evt-1',
+			                            event: 'subscription_renewed',
+			                            createdAt: REL(20 * MIN),
+			                            actor: { id: 'sys', name: 'Billing' },
+			                            segments: [
+			                                { type: 'text', text: 'Subscription' },
+			                                { type: 'value', text: 'Pro Annual' },
+			                                { type: 'text', text: 'auto-renewed for' },
+			                                { type: 'value', text: 'Sarah Smitha' },
+			                            ],
+			                            metadata: [{ label: 'Next charge', value: 'Apr 30 2027' }],
+			                        },
+			                        {
+			                            id: 'evt-2',
+			                            event: 'payment_method_added',
+			                            createdAt: REL(2 * DAY),
+			                            actor: { id: 'u-12', name: 'Sarah Smitha' },
+			                            segments: [
+			                                { type: 'actor', text: 'Sarah Smitha', actorId: 'u-12' },
+			                                { type: 'text', text: 'added a new card ending' },
+			                                { type: 'value', text: '4242' },
+			                            ],
+			                        },
+			                        {
+			                            id: 'evt-3',
+			                            event: 'access_granted',
+			                            createdAt: REL(3 * DAY),
+			                            actor: { id: 'u-21', name: 'Emma Garcia' },
+			                            segments: [
+			                                { type: 'actor', text: 'Emma Garcia', actorId: 'u-21' },
+			                                { type: 'text', text: 'granted access to' },
+			                                { type: 'value', text: 'Daniel Smith' },
+			                                { type: 'status', text: 'Editor', tone: 'info' },
+			                            ],
+			                        },
+			                    ]}
+			                    eventConfig={{
+			                        subscription_renewed: {
+			                            icon: Bell,
+			                            tone: 'success',
+			                            label: 'Renewed',
+			                        },
+			                        payment_method_added: {
+			                            icon: CreditCard,
+			                            tone: 'info',
+			                            label: 'Card added',
+			                        },
+			                        access_granted: {
+			                            icon: ShieldCheck,
+			                            tone: 'primary',
+			                            label: 'Access',
+			                        },
+			                    }}
+			                    strings={{
+			                        title: 'Account events',
+			                        sources: { system: 'Auto' },
+			                    }}
+			                    title="Account events"
+			                />
+		</>
+	);
+}
+
+export function CustomRowRenderingSlotsRenderRow() {
+	return (
+		<>
+			<ActivityFeedCard
+			                    activities={DEFAULT_ACTIVITIES.slice(0, 3)}
+			                    title="Custom rows"
+			                    slots={{
+			                        renderRow: (a, ctx) => (
+			                            <div
+			                                className="flex items-start gap-3 rounded-md border border-border/60 bg-card px-3 py-2 mb-2"
+			                            >
+			                                <span
+			                                    className="mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground"
+			                                >
+			                                    <User className="size-3.5" />
+			                                </span>
+			                                <div className="min-w-0 flex-1">
+			                                    <Text weight="medium">
+			                                        {a.actor?.name ?? '—'}
+			                                    </Text>
+			                                    <Text size="xs" type="secondary">
+			                                        {ctx.eventConfig.label ?? a.event}
+			                                        {ctx.relativeTime
+			                                            ? \` · \${ctx.relativeTime}\`
+			                                            : ''}
+			                                    </Text>
+			                                </div>
+			                                <Bookmark className="size-4 text-muted-foreground" />
+			                            </div>
+			                        ),
+			                    }}
+			                />
+		</>
+	);
+}
+
+export function ResourceRegistrySaveRestoreTaggingBadgingLinking() {
+	const [registry, setRegistry] =
+	        useState<Record<string, ActivityResourceConfig>>(RESOURCE_SEED);
+	const [, setLastEvent] = useState<string>('—');
+	const recordEvent = (msg: string) => setLastEvent(msg);
+	return (
+		<>
+			<Text type="secondary" className="mb-3">
+			                    Edit a resource entry — every row referencing that key updates immediately and the registry change is broadcast through onResourcesChange (wire to localStorage / API).
+			                </Text>
+			                <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
+			                    <ActivityFeed
+			                        activities={RICH_ACTIVITIES}
+			                        density="rich"
+			                        currentUserId="u-12"
+			                        resources={registry}
+			                        onResourcesChange={setRegistry}
+			                        onResourceClick={(ref, cfg) =>
+			                            recordEvent(
+			                                \`Registry click → \${ref.key} (\${cfg?.label ?? 'untagged'})\`,
+			                            )
+			                        }
+			                    />
+			                    <div className="rounded-lg border border-border bg-card p-4">
+			                        <Text weight="semibold" className="mb-3">
+			                            Registered resources
+			                        </Text>
+			                        <div className="space-y-3">
+			                            {Object.entries(registry).map(([key, cfg]) => (
+			                                <div
+			                                    key={key}
+			                                    className="space-y-1 rounded-md border border-border/60 px-3 py-2"
+			                                >
+			                                    <Text size="xs" type="secondary" className="tabular-nums">
+			                                        {key}
+			                                    </Text>
+			                                    <Text weight="medium">
+			                                        {cfg.label}
+			                                    </Text>
+			                                    <div className="flex flex-wrap gap-2">
+			                                        <Button
+			                                            size="xs"
+			                                            variant="secondary"
+			                                            buttonStyle="outline"
+			                                            onClick={() =>
+			                                                setRegistry((r) => ({
+			                                                    ...r,
+			                                                    [key]: {
+			                                                        ...r[key],
+			                                                        badge: {
+			                                                            label: 'Updated',
+			                                                            tone: 'warning',
+			                                                        },
+			                                                    },
+			                                                }))
+			                                            }
+			                                        >
+			                                            Mark updated
+			                                        </Button>
+			                                        <Button
+			                                            size="xs"
+			                                            variant="secondary"
+			                                            buttonStyle="ghost"
+			                                            onClick={() =>
+			                                                setRegistry((r) => {
+			                                                    const next = { ...r };
+			                                                    delete next[key];
+			                                                    return next;
+			                                                })
+			                                            }
+			                                        >
+			                                            Untag
+			                                        </Button>
+			                                    </div>
+			                                </div>
+			                            ))}
+			                            {Object.keys(registry).length === 0 && (
+			                                <Text size="xs" type="secondary">
+			                                    Registry empty — every reference now renders as a plain key.
+			                                </Text>
+			                            )}
+			                            <Button
+			                                size="xs"
+			                                variant="primary"
+			                                buttonStyle="solid"
+			                                onClick={() => setRegistry(RESOURCE_SEED)}
+			                            >
+			                                Restore seed
+			                            </Button>
+			                        </div>
+			                    </div>
+			                </div>
+		</>
+	);
+}
+`;function H(e){let t={h4:`h4`,...e.components};return w||W(`Examples`,!1),I||W(`Examples.CompactDensitySingleLineDotFeed`,!0),z||W(`Examples.CustomRowRenderingSlotsRenderRow`,!0),F||W(`Examples.DefaultDensityHeadlineSegmentsGrouping`,!0),R||W(`Examples.MassEventConfigurationCustomStringsTones`,!0),B||W(`Examples.ResourceRegistrySaveRestoreTaggingBadgingLinking`,!0),L||W(`Examples.RichDensityChangesMetadataActions`,!0),(0,E.jsxs)(a,{title:`Features · Activity feed`,description:`Interactive activity feed — generic, framework-agnostic, with headline segments, callbacks (actor / resource / action), strings, slots, mass event configuration, and a save/restore resource registry. For read-only tracking timelines (order, payment, changelog, milestones) see Composed → Timelines.`,layer:`features`,status:`ready`,children:[(0,E.jsxs)(c,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(l,{name:`DefaultDensityHeadlineSegmentsGrouping`,source:V,children:(0,E.jsx)(F,{})}),(0,E.jsx)(l,{name:`CompactDensitySingleLineDotFeed`,source:V,children:(0,E.jsx)(I,{})}),(0,E.jsx)(l,{name:`RichDensityChangesMetadataActions`,source:V,children:(0,E.jsx)(L,{})}),(0,E.jsx)(l,{name:`MassEventConfigurationCustomStringsTones`,source:V,children:(0,E.jsx)(R,{})}),(0,E.jsx)(l,{name:`CustomRowRenderingSlotsRenderRow`,source:V,children:(0,E.jsx)(z,{})}),(0,E.jsx)(l,{name:`ResourceRegistrySaveRestoreTaggingBadgingLinking`,source:V,children:(0,E.jsx)(B,{})})]}),(0,E.jsxs)(c,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`ActivityFeed`}),(0,E.jsx)(S,{component:`ActivityFeed`}),(0,E.jsx)(t.h4,{children:`ActivityFeedCard`}),(0,E.jsx)(S,{component:`ActivityFeedCard`})]})]})}function U(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(H,{...e})}):H(e)}function W(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{U as default};

package/dist/showcase/assets/activities-feed-card-DZdFekXl.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-CilyBKbf.js";import{n as t,t as n}from"./isSameDay-rwvIyLOL.js";import{t as r}from"./isToday-CIAzBrb5.js";import{Cr as i,Dr as a,br as o,gr as s,lr as c,r as l,vr as u}from"./example-DPfw-R7_.js";import{n as d,t as f}from"./flag-hAuZbHU1.js";import{t as p}from"./chevron-down-at2vrt1V.js";import{t as m}from"./chevron-right-BNy0Or0x.js";import{t as h}from"./circle-dot-HeRgxZxN.js";import{t as g}from"./ellipsis-CgqPlt6Z.js";import{t as _}from"./heart-DfZtXfIP.js";import{t as v}from"./mail-DmOBTX4I.js";import{t as y}from"./message-square-Bl6P4TA0.js";import{t as b}from"./pencil-DTLGPoc_.js";import{t as x}from"./plus-BDSCn8ol.js";import{t as S}from"./shield-check-jGSgmijm.js";import{t as C}from"./shopping-bag-Cd09Ga6D.js";import{t as w}from"./sparkles-C-fyahzv.js";import{t as T}from"./star-l00ivfkD.js";import{t as E}from"./trash-2-B0_GprQM.js";import{t as D}from"./user-plus-9WRYjS04.js";import{a as O,b as k,h as A,k as j,r as M}from"./index-B-Z7p0So.js";import{t as N}from"./smart-card-50WN9sCI.js";import{a as P,l as F,r as I,t as L}from"./dropdown-menu-Cqv6D7Sb.js";function R(e,n,r){return t(e,-n,r)}function z(e,t){return n(k(t?.in||e,e),R(A(t?.in||e),1))}var B=M(`arrow-left-right`,[[`path`,{d:`M8 3 4 7l4 4`,key:`9rb6wj`}],[`path`,{d:`M4 7h16`,key:`6tx8e3`}],[`path`,{d:`m16 21 4-4-4-4`,key:`siv7j2`}],[`path`,{d:`M20 17H4`,key:`h6l3hr`}]]),ee=M(`ban`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M4.929 4.929 19.07 19.071`,key:`196cmz`}]]),te=M(`bookmark`,[[`path`,{d:`M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z`,key:`oz39mx`}]]),ne=M(`file-pen`,[[`path`,{d:`M12.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v9.34`,key:`o6klzx`}],[`path`,{d:`M14 2v5a1 1 0 0 0 1 1h5`,key:`wfsgrz`}],[`path`,{d:`M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z`,key:`zhnas1`}]]),V=M(`link`,[[`path`,{d:`M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71`,key:`1cjeqo`}],[`path`,{d:`M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71`,key:`19qd67`}]]),re=M(`mail-check`,[[`path`,{d:`M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8`,key:`12jkf8`}],[`path`,{d:`m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7`,key:`1ocrg3`}],[`path`,{d:`m16 19 2 2 4-4`,key:`1b14m6`}]]),H=M(`mail-open`,[[`path`,{d:`M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z`,key:`1jhwl8`}],[`path`,{d:`m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10`,key:`1qfld7`}]]),U=M(`mail-x`,[[`path`,{d:`M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h9`,key:`1j9vog`}],[`path`,{d:`m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7`,key:`1ocrg3`}],[`path`,{d:`m17 17 4 4`,key:`1b3523`}],[`path`,{d:`m21 17-4 4`,key:`uinynz`}]]),ie=M(`user-minus`,[[`path`,{d:`M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2`,key:`1yyitq`}],[`circle`,{cx:`9`,cy:`7`,r:`4`,key:`nufk8`}],[`line`,{x1:`22`,x2:`16`,y1:`11`,y2:`11`,key:`1shjgl`}]]),W=e(j(),1),G=O(),ae={icon:h,tone:`neutral`},oe={created:{icon:x,tone:`success`,label:`Created`},updated:{icon:b,tone:`info`,label:`Updated`},edited:{icon:ne,tone:`info`,label:`Edited`},deleted:{icon:E,tone:`destructive`,label:`Deleted`},cancelled:{icon:ee,tone:`destructive`,label:`Cancelled`},restored:{icon:w,tone:`success`,label:`Restored`},status_changed:{icon:B,tone:`primary`,label:`Status changed`},status_transition:{icon:B,tone:`primary`,label:`Status changed`},status_override:{icon:B,tone:`warning`,label:`Status overridden`},assigned:{icon:D,tone:`info`,label:`Assigned`},unassigned:{icon:ie,tone:`destructive`,label:`Unassigned`},mail_sent:{icon:v,tone:`info`,label:`Email sent`},mail_delivered:{icon:re,tone:`success`,label:`Email delivered`},mail_opened:{icon:H,tone:`info`,label:`Email opened`},mail_clicked:{icon:H,tone:`info`,label:`Email clicked`},mail_bounced:{icon:U,tone:`destructive`,label:`Email bounced`},mail_failed:{icon:U,tone:`destructive`,label:`Email failed`},comment_created:{icon:y,tone:`warning`,label:`Comment posted`},comment_deleted:{icon:y,tone:`destructive`,label:`Comment deleted`},paid:{icon:i,tone:`success`,label:`Paid`},refunded:{icon:B,tone:`warning`,label:`Refunded`},confirmed:{icon:S,tone:`success`,label:`Confirmed`},favorited:{icon:_,tone:`warning`,label:`Favorited`},ordered:{icon:C,tone:`primary`,label:`Order placed`},published:{icon:T,tone:`success`,label:`Published`},flagged:{icon:f,tone:`warning`,label:`Flagged`},linked:{icon:V,tone:`info`,label:`Linked`},failed:{icon:o,tone:`destructive`,label:`Failed`},health_check_failed:{icon:o,tone:`destructive`,label:`Health check failed`}};function se(e,t){return t[e]??ae}var K={title:`Activity`,empty:`No activity yet.`,loading:`Loading activity…`,today:`Today`,yesterday:`Yesterday`,undated:`Undated`,you:`You`,showChanges:`Show changes`,hideChanges:`Hide changes`,actionsLabel:`Activity actions`,moreLabel:`More`,sources:{comment:`Comment`,mail:`Mail`,booking_log:`Booking log`,activity_log:``,system:`System`},events:{}};function ce(e,t,n){if(!e)return t.undated;let i=new Date(e);if(r(i))return t.today;if(z(i))return t.yesterday;try{return new Intl.DateTimeFormat(n,{year:`numeric`,month:`long`,day:`numeric`}).format(i)}catch{return new Intl.DateTimeFormat(void 0,{year:`numeric`,month:`long`,day:`numeric`}).format(i)}}function le({activities:e,groupByDate:t=!0,expandedByDefault:n=!1,locale:r,strings:i,formatDateGroupLabel:a}){let[o,s]=(0,W.useState)({}),c=(0,W.useMemo)(()=>{let t=new Map;return e.map(e=>{let n=[String(e.id??``).trim(),String(e.createdAt??``).trim(),String(e.event??``).trim(),String(e.source??``).trim()].join(`:`),r=(t.get(n)??0)+1;return t.set(n,r),{activity:e,key:`${n}:${r}`}})},[e]),l=(0,W.useMemo)(()=>{if(!t)return c.length>0?[{label:``,items:c}]:[];let e=[],n=`__init__`,o=[],s=e=>a?a(e,i):ce(e,i,r);for(let t of c){let r=s(t.activity.createdAt??null);r===n?o.push(t):(o.length>0&&e.push({label:n,items:o}),n=r,o=[t])}return o.length>0&&e.push({label:n,items:o}),e},[c,t,r,i,a]),u=(0,W.useCallback)(e=>o[e]??n,[o,n]),d=(0,W.useCallback)(e=>{s(t=>({...t,[e]:!(t[e]??!1)}))},[]),f=(0,W.useCallback)((e,t)=>{s(n=>({...n,[e]:t}))},[]),p=(0,W.useCallback)(()=>{let e={};for(let t of c)e[t.activity.id]=!0;s(e)},[c]),m=(0,W.useCallback)(()=>s({}),[]);return{groups:l,total:c.length,isExpanded:u,toggleExpanded:d,setExpanded:f,expandAll:p,collapseAll:m}}function ue({resources:e,onResourcesChange:t}={}){let[n,r]=(0,W.useState)(()=>e??{}),i=(0,W.useRef)(e);(0,W.useEffect)(()=>{e!==i.current&&(i.current=e,r(e??{}))},[e]);let a=(0,W.useRef)(t);(0,W.useEffect)(()=>{a.current=t},[t]);let o=(0,W.useCallback)(e=>{a.current?.(e)},[]),s=(0,W.useCallback)((e,t)=>{r(n=>{let r={...n,[e]:t};return o(r),r})},[o]),c=(0,W.useCallback)((e,t)=>{r(n=>{let r=n[e];if(!r)return n;let i={...n,[e]:{...r,...t}};return o(i),i})},[o]),l=(0,W.useCallback)(e=>{r(t=>{if(!(e in t))return t;let n={...t};return delete n[e],o(n),n})},[o]),u=(0,W.useCallback)(e=>{r(e),o(e)},[o]),d=(0,W.useCallback)(()=>{let e=i.current??{};r(e),o(e)},[o]);return{registry:n,get:(0,W.useCallback)(e=>n[typeof e==`string`?e:e.key],[n]),register:s,update:c,remove:l,setAll:u,reset:d}}function de({activity:e,actions:t,onAction:n,label:r}){return t.length===0?null:(0,G.jsxs)(L,{children:[(0,G.jsx)(F,{render:e=>(0,G.jsx)(l,{...e,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":r,className:`h-7 w-7 text-muted-foreground`,children:(0,G.jsx)(g,{className:`size-4`})})}),(0,G.jsx)(I,{align:`end`,className:`min-w-[160px]`,children:t.map(t=>{let r=t.icon;return(0,G.jsxs)(P,{onClick:()=>{t.disabled||(t.onClick(e),n?.(t.id,e))},disabled:t.disabled,variant:t.tone===`destructive`?`destructive`:`default`,className:`gap-2 px-2 py-1.5 text-xs`,children:[!!r&&(0,G.jsx)(r,{className:`size-3.5`}),t.label]},t.id)})})]})}function q({change:e}){let t=e.old!==null&&e.old!==void 0,n=e.new!==null&&e.new!==void 0;return!t&&!n?(0,G.jsx)(s,{size:`xs`,tag:`span`,children:e.description}):(0,G.jsxs)(s,{tag:`span`,size:`xs`,className:`inline-flex flex-wrap items-baseline gap-1`,children:[!!t&&(0,G.jsx)(s,{tag:`span`,size:`xs`,className:`rounded bg-destructive/10 text-destructive line-through px-1 py-px`,children:e.old}),t&&n&&(0,G.jsx)(s,{tag:`span`,size:`xs`,type:`secondary`,children:`→`}),!!n&&(0,G.jsx)(s,{tag:`span`,size:`xs`,className:`rounded bg-success/15 text-success px-1 py-px`,children:e.new})]})}function fe({changes:e,className:t}){return e.length===0?null:(0,G.jsx)(`div`,{className:u(`space-y-1.5 rounded-lg border border-border/60 bg-muted/30 px-3 py-2`,t),children:e.map(e=>(0,G.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,G.jsx)(s,{size:`xs`,type:`secondary`,weight:`medium`,className:`shrink-0`,children:e.label}),(0,G.jsx)(q,{change:e})]},`${e.key}-${e.label}`))})}function pe({label:e,isFirst:t,className:n}){return e===``?null:(0,G.jsx)(s,{size:`xxs`,type:`secondary`,weight:`medium`,className:u(`uppercase tracking-wider`,!t&&`mt-5`,n),children:e})}function me({title:e,hint:t,className:n}){return(0,G.jsxs)(`div`,{className:u(`flex flex-col items-center justify-center gap-2 px-6 py-10 text-center`,n),children:[(0,G.jsx)(`span`,{className:`flex size-9 items-center justify-center rounded-full bg-muted text-muted-foreground`,children:(0,G.jsx)(d,{className:`size-4`})}),(0,G.jsx)(s,{weight:`medium`,children:e}),!!t&&(0,G.jsx)(s,{size:`xs`,type:`secondary`,children:t})]})}var J={primary:{bg:`bg-primary/15`,fg:`text-primary`,dot:`bg-primary`,line:`bg-primary/30`,chipBg:`bg-primary/10`,chipFg:`text-primary`},success:{bg:`bg-success/15`,fg:`text-success`,dot:`bg-success`,line:`bg-success/30`,chipBg:`bg-success/15`,chipFg:`text-success`},warning:{bg:`bg-warning/30`,fg:`text-warning-foreground`,dot:`bg-warning`,line:`bg-warning/40`,chipBg:`bg-warning/30`,chipFg:`text-warning-foreground`},destructive:{bg:`bg-destructive/15`,fg:`text-destructive`,dot:`bg-destructive`,line:`bg-destructive/30`,chipBg:`bg-destructive/15`,chipFg:`text-destructive`},info:{bg:`bg-info/15`,fg:`text-info`,dot:`bg-info`,line:`bg-info/30`,chipBg:`bg-info/15`,chipFg:`text-info`},neutral:{bg:`bg-muted`,fg:`text-muted-foreground`,dot:`bg-muted-foreground/60`,line:`bg-border`,chipBg:`bg-muted`,chipFg:`text-muted-foreground`}},Y={primary:`primary`,success:`success`,warning:`warning`,destructive:`destructive`,info:`info`,neutral:`secondary`};function X({resource:e,config:t,fallbackText:n,onClick:r}){let i=J[t?.tone??`neutral`],a=t?.icon??h,o=t?.label??n??e.label??e.key,l=typeof r==`function`,d=(0,G.jsxs)(G.Fragment,{children:[(0,G.jsx)(a,{className:u(`size-3 shrink-0`,i.fg)}),(0,G.jsx)(s,{tag:`span`,size:`xs`,weight:`medium`,className:i.chipFg,children:o}),!!t?.tags&&t.tags.length>0&&(0,G.jsx)(s,{tag:`span`,size:`xxs`,type:`secondary`,className:`border-l border-current/20 pl-1.5 ml-0.5`,children:t.tags.join(` · `)}),!!t?.badge&&(0,G.jsx)(c,{inline:!0,variant:Y[t.badge.tone??`neutral`],className:`ml-1`,children:t.badge.label})]}),f=u(`inline-flex items-center gap-1 rounded-full px-2 py-0.5 align-baseline`,`border border-border/60`,i.chipBg,l&&`cursor-pointer transition-colors hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`);return l?(0,G.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),r?.()},className:f,title:t?.note,children:d}):(0,G.jsx)(`span`,{className:f,title:t?.note,children:d})}function Z({actorId:e,text:t,href:n,activity:r,youLabel:i,currentUserId:a,onActorClick:o}){let c=a!==void 0&&e!==void 0&&a===e?i:t,l=r.actor??{id:e,name:t};return n?(0,G.jsx)(`a`,{href:n,onClick:e=>{o&&(e.preventDefault(),e.stopPropagation(),o(l,r))},className:`font-semibold text-foreground underline-offset-2 hover:underline`,children:c}):o?(0,G.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),o(l,r)},className:`font-semibold text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded`,children:c}):(0,G.jsx)(s,{tag:`span`,weight:`semibold`,children:c})}function he(e,t){return e.map((e,n)=>{let r=`seg-${n}-${e.type}`;switch(e.type){case`actor`:return(0,G.jsxs)(W.Fragment,{children:[(0,G.jsx)(Z,{actorId:e.actorId,text:e.text,href:e.href,activity:t.activity,youLabel:t.youLabel,currentUserId:t.currentUserId,onActorClick:t.onActorClick}),` `]},r);case`field`:case`value`:return(0,G.jsxs)(W.Fragment,{children:[(0,G.jsx)(s,{tag:`span`,weight:`semibold`,children:e.text}),` `]},r);case`status`:return(0,G.jsxs)(W.Fragment,{children:[(0,G.jsx)(c,{inline:!0,variant:Y[e.tone??`neutral`],children:e.text}),` `]},r);case`resource`:{let n=t.getResourceConfig?.(e.resource);return(0,G.jsxs)(W.Fragment,{children:[(0,G.jsx)(X,{resource:e.resource,config:n,fallbackText:e.text,onClick:t.onResourceClick?()=>t.onResourceClick?.(e.resource,n,t.activity):void 0}),` `]},r)}default:return(0,G.jsxs)(W.Fragment,{children:[(0,G.jsx)(s,{tag:`span`,children:e.text}),` `]},r)}})}function ge(e){let{activity:t}=e,n=t.headline??t.event,r=t.actor?.name;if(!r||!n.includes(r))return(0,G.jsx)(s,{tag:`span`,children:n});let[i,...a]=n.split(r);return(0,G.jsxs)(G.Fragment,{children:[!!i&&(0,G.jsx)(s,{tag:`span`,children:i}),(0,G.jsx)(Z,{actorId:t.actor?.id,text:r,href:t.actor?.href,activity:t,youLabel:e.youLabel,currentUserId:e.currentUserId,onActorClick:e.onActorClick}),a.length>0&&(0,G.jsx)(s,{tag:`span`,children:a.join(r)})]})}function _e(e){let t=e.activity.segments;return t&&t.length>0?(0,G.jsx)(`span`,{className:`leading-snug [&>span]:leading-snug`,children:he(t,e)}):(0,G.jsx)(`span`,{className:`leading-snug`,children:ge(e)})}function ve({icon:e,tone:t,density:n,isLast:r}){let i=J[t];return n===`compact`?(0,G.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,G.jsx)(`span`,{"aria-hidden":!0,className:u(`mt-1.5 size-2 shrink-0 rounded-full`,i.dot)}),!r&&(0,G.jsx)(`span`,{"aria-hidden":!0,className:u(`mt-1 w-px flex-1`,i.line)})]}):n===`rich`?(0,G.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,G.jsx)(`span`,{className:u(`flex size-7 shrink-0 items-center justify-center rounded-full ring-1 ring-border/60`,i.bg,i.fg),children:(0,G.jsx)(e,{className:`size-3.5`})}),!r&&(0,G.jsx)(`span`,{"aria-hidden":!0,className:u(`mt-1 w-px flex-1`,i.line)})]}):(0,G.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,G.jsx)(`span`,{className:u(`flex size-5 shrink-0 items-center justify-center rounded-full`,i.bg,i.fg),children:(0,G.jsx)(e,{className:`size-3`})}),!r&&(0,G.jsx)(`span`,{"aria-hidden":!0,className:u(`mt-1 w-px flex-1`,i.line)})]})}function ye(e){let{activity:t,density:n,eventConfig:r,tone:i,isLast:a,expanded:o,onToggleExpanded:d,relativeTime:f,absoluteTime:h,sourceLabel:g,youLabel:_,showChangesLabel:v,hideChangesLabel:y,actionsLabel:b,currentUserId:x,actions:S,onActivityClick:C,onActorClick:w,onResourceClick:T,onAction:E,getResourceConfig:D,headlineOverride:O,markerOverride:k}=e,A=t.iconOverride??r.icon,j=(t.changes?.length??0)>0,M=(t.metadata?.length??0)>0,N=(t.resources?.length??0)>0,P=t.description!==void 0&&t.description!==null&&t.description!==``,F=n!==`compact`,I=n===`rich`,L=O??(0,G.jsx)(_e,{activity:t,currentUserId:x,youLabel:_,onActorClick:w,onResourceClick:T,getResourceConfig:D}),R=k??(0,G.jsx)(ve,{icon:A,tone:i,density:n,isLast:a}),z=typeof C==`function`;return(0,G.jsxs)(`div`,{className:u(`relative flex gap-3`,z&&`cursor-pointer rounded-md hover:bg-muted/40`),onClick:z?()=>C?.(t):void 0,role:z?`button`:void 0,tabIndex:z?0:void 0,onKeyDown:z?e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),C?.(t))}:void 0,children:[R,(0,G.jsxs)(`div`,{className:u(`min-w-0 flex-1`,!a&&(n===`rich`?`pb-4`:n===`compact`?`pb-2.5`:`pb-3`)),children:[(0,G.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,G.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1`,children:[(0,G.jsx)(s,{tag:`span`,lineHeight:`snug`,children:L}),!!g&&(0,G.jsx)(c,{inline:!0,variant:`secondary`,children:g}),I&&j&&(0,G.jsx)(l,{type:`button`,size:`icon-xs`,variant:`secondary`,buttonStyle:`ghost`,className:`h-5 w-5 text-muted-foreground`,onClick:e=>{e.stopPropagation(),d()},title:o?y:v,"aria-label":o?y:v,"aria-expanded":o,children:o?(0,G.jsx)(p,{className:`size-3.5`}):(0,G.jsx)(m,{className:`size-3.5`})})]}),(0,G.jsxs)(`div`,{className:`flex shrink-0 items-center gap-1`,children:[!!f&&(0,G.jsx)(s,{size:`xs`,type:`secondary`,className:`whitespace-nowrap tabular-nums pt-0.5`,title:h??void 0,children:f}),I&&S.length>0&&(0,G.jsx)(de,{activity:t,actions:S,onAction:E,label:b})]})]}),!!F&&P&&(0,G.jsx)(s,{tag:`div`,size:`xs`,type:`secondary`,className:`mt-1`,children:t.description}),!!I&&M&&t.metadata&&(0,G.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-x-3 gap-y-1`,children:t.metadata.map(e=>(0,G.jsxs)(s,{size:`xs`,type:`secondary`,children:[(0,G.jsxs)(s,{tag:`span`,size:`xs`,type:`discrete`,children:[e.label,`:`,` `]}),e.value]},e.label))}),!!I&&N&&t.resources&&(0,G.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1.5`,children:t.resources.map(e=>{let n=D?.(e);return(0,G.jsx)(X,{resource:e,config:n,onClick:T?()=>T(e,n,t):void 0},e.key)})}),!!I&&j&&o&&t.changes&&(0,G.jsx)(`div`,{className:`mt-2`,children:(0,G.jsx)(fe,{changes:t.changes})})]})]})}function be(e,t){try{return new Intl.DateTimeFormat(t,{dateStyle:`medium`,timeStyle:`short`}).format(new Date(e))}catch{return e}}function xe(e,t){return e.toneOverride??t}function Q(e){let{activities:t=[],density:n=`default`,groupByDate:r=!0,expandedByDefault:i=!1,currentUserId:o,loading:c=!1,eventConfig:l,strings:d,slots:f,className:p,locale:m,formatRelativeTime:h,formatAbsoluteTime:g,formatDateGroupLabel:_,getEventLabel:v,getSourceLabel:y,actionsForActivity:b,onActivityClick:x,onActorClick:S,onResourceClick:C,onAction:w,resources:T,onResourcesChange:E}=e,D=(0,W.useMemo)(()=>({...K,...d,sources:{...K.sources,...d?.sources??{}},events:{...K.events,...d?.events??{}}}),[d]),O=(0,W.useMemo)(()=>({...oe,...l}),[l]),k=ue({resources:T,onResourcesChange:E}),A=le({activities:t,groupByDate:r,expandedByDefault:i,locale:m,strings:D,formatDateGroupLabel:_}),{formatRelativeTime:j}=a(),M=h??j??(e=>e),N=g??(e=>be(e,m));if(c)return(0,G.jsx)(`div`,{className:u(`activities-feed--component`,`px-2 py-4`,p),children:f?.loading??(0,G.jsx)(s,{type:`secondary`,align:`center`,children:D.loading})});if(t.length===0)return(0,G.jsx)(`div`,{className:u(`px-2 py-2`,p),children:f?.empty??(0,G.jsx)(me,{title:D.empty})});let P=A.groups.reduce((e,t)=>e+t.items.length,0),F=0;return(0,G.jsxs)(`div`,{className:u(`flex flex-col`,p),children:[!!f?.header&&(0,G.jsx)(`div`,{className:`mb-3`,children:f.header}),(0,G.jsx)(`div`,{className:`flex flex-col`,children:A.groups.map((e,t)=>{let r=t===0;return(0,G.jsxs)(`div`,{className:u(r?``:`mt-1`),children:[f?.renderDateLabel?f.renderDateLabel(e.label,r):(0,G.jsx)(pe,{label:e.label,isFirst:r,className:r?``:`mb-2`}),(0,G.jsx)(`div`,{className:u(`flex flex-col`,!!e.label&&`mt-2`),children:e.items.map((e,t)=>{let r=e.activity,i=t===0,a=++F===P,s=se(r.event,O),c=xe(r,s.tone),l=r.timestamp??(r.createdAt?M(r.createdAt):null),u=r.createdAt?N(r.createdAt):null,d=r.source?y?.(r.source)??D.sources[r.source]??s.sourceLabel??null:s.sourceLabel??null,p=d&&d.trim().length>0?d:null,m=b?.(r)??[],h={density:n,isLast:a,isFirstInGroup:i,activity:r,eventConfig:s,tone:c,relativeTime:l,absoluteTime:u,sourceLabel:p,expanded:A.isExpanded(r.id),toggleExpanded:()=>A.toggleExpanded(r.id)},g=f?.renderRow?.(r,h);if(g!==void 0)return(0,G.jsx)(`div`,{children:g},e.key);let _=f?.renderHeadline?.(r,h),v=f?.renderMarker?.(r,h);return(0,G.jsx)(ye,{activity:r,density:n,eventConfig:s,tone:c,isLast:a,expanded:h.expanded,onToggleExpanded:h.toggleExpanded,relativeTime:l,absoluteTime:u,sourceLabel:p,youLabel:D.you,showChangesLabel:D.showChanges,hideChangesLabel:D.hideChanges,actionsLabel:D.actionsLabel,currentUserId:o,actions:m,onActivityClick:x,onActorClick:S,onResourceClick:C,onAction:w,getResourceConfig:e=>k.get(e),headlineOverride:_,markerOverride:v},e.key)})})]},`${e.label}-${t}`)})}),!!f?.footer&&(0,G.jsx)(`div`,{className:`mt-3`,children:f.footer})]})}Q.displayName=`ActivityFeed`;function $({title:e,titleSuffix:t,description:n,padding:r=`base`,composerSlot:i,className:a,strings:o,slots:s,...c}){let l={...K,...o,sources:{...K.sources,...o?.sources??{}},events:{...K.events,...o?.events??{}}},u=e??l.title;return(0,G.jsx)(N,{icon:(0,G.jsx)(d,{className:`size-4`}),title:u,titleSuffix:t,description:n,padding:r,className:a,children:(0,G.jsx)(Q,{...c,strings:o,slots:{...s,header:i??s?.header}})})}$.displayName=`ActivityFeedCard`;export{Q as n,te as r,$ as t};