{ "name": "AuditLogEntry", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/AuditLogEntry.tsx", "chapterTag": "23 Workspace", "chapter": "23-workspace.html", "sectionId": "audit-log-entry", "elName": "Five entries — invite, remove, role change (open), billing update, archive", "demoUrl": "https://brand.magicblocks.ai/components/23-workspace#audit-log-entry", "hasLiveDemo": false, "description": "A single audit-log entry inside a `
` —\nactor avatar + actor name + verb + target + timestamp on the head row,\nwith an optional collapsible before/after diff panel revealed by a\nchevron toggle button on the right edge. Used inside\n`` (section 25.6) or composed standalone wherever\nan audit log needs surfacing.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "AuditLogEntry", "isPrincipal": true, "isType": false }, { "name": "AuditLogEntryProps", "isPrincipal": false, "isType": true } ], "importStatement": "import { AuditLogEntry } from \"@magicblocksai/ui\";", "props": [ { "name": "actor", "optional": false, "type": "{ name: string", "doc": "Who performed the action. The `name` renders as the leading `` in the head line; the optional `avatar` slot takes a pre-built node — typically ``." }, { "name": "avatar", "optional": true, "type": "ReactNode }", "doc": "" }, { "name": "verb", "optional": false, "type": "string", "doc": "The verb between actor + target — `\"invited\"`, `\"removed\"`, `\"changed role for\"`, `\"updated billing for\"`, `\"archived\"`, etc. Rendered as plain text inside the head line." }, { "name": "target", "optional": false, "type": "ReactNode", "doc": "The object of the action — typically an email, name, or resource label. Accepts a `ReactNode` so consumers can pass `` / `` / `` wrappers when the surface needs the extra chrome." }, { "name": "timestamp", "optional": false, "type": "string", "doc": "Human-readable timestamp (e.g. `\"2 hours ago\"`, `\"Yesterday\"`, `\"Mar 14\"`). Rendered as mono 12px `--fg-dim` on the right of the head line." }, { "name": "diff", "optional": true, "type": "{ before?: ReactNode", "doc": "Optional before/after pair. When provided, the entry picks up a chevron toggle button that collapses / expands the diff panel. Omit the prop to ship a no-diff entry (the chevron + panel are not rendered at all)." }, { "name": "after", "optional": true, "type": "ReactNode; }", "doc": "" }, { "name": "defaultExpanded", "optional": true, "type": "boolean", "doc": "Uncontrolled initial expanded state for the diff panel. Defaults to `false`. Only meaningful when `diff` is provided." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ], "classesUsed": [ "audit-log-entry", "audit-log-entry-avatar", "audit-log-entry-diff", "audit-log-entry-diff-block", "audit-log-entry-diff-label", "audit-log-entry-diff-value", "audit-log-entry-head", "audit-log-entry-text", "audit-log-entry-timestamp", "audit-log-entry-toggle", "audit-log-stack" ], "examples": { "react": "
\n }}\n verb=\"invited\"\n target={jane@example.com}\n timestamp=\"2 hours ago\"\n />\n }}\n verb=\"changed role for\"\n target={jay@magicblocks.ai}\n timestamp=\"Yesterday at 4:12pm\"\n diff={{ before: \"Editor\", after: \"Admin\" }}\n defaultExpanded\n />\n
", "html": "
\n
\n
\n JS\n Jay Stockwell invited jane@example.com\n 2 hours ago\n
\n
\n
\n
\n AK\n Alex Kim removed sasha@magicblocks.ai\n Yesterday\n
\n
\n
\n
\n RL\n Robin Lee changed role for jay@magicblocks.ai\n Yesterday at 4:12pm\n \n
\n
\n
\n Before\n Editor\n
\n
\n After\n Admin\n
\n
\n
\n
\n
\n JS\n Jay Stockwell updated billing for Pro plan\n Mar 14\n \n
\n
\n
\n
\n RL\n Robin Lee archived Project Alpha\n Feb 28\n
\n
\n
", "css": ".audit-log-entry {\n display: flex;\n flex-direction: column;\n gap: var(--s-2);\n padding: var(--s-3) var(--s-4);\n border-bottom: 1px solid var(--hair);\n}\n\n.audit-log-entry-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.audit-log-entry-diff {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--s-3);\n padding: var(--s-3) 0 0 calc(36px + var(--s-3));\n}\n\n.audit-log-entry-diff-block {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.audit-log-entry-diff-label {\n font: 500 10px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--fg-faint);\n}\n\n.audit-log-entry-diff-value {\n font: 500 13px/1.3 var(--f-mono);\n font-variant-numeric: tabular-nums;\n padding: 4px 8px;\n border-radius: var(--r-sm);\n background: var(--bg-sunk);\n}\n\n.audit-log-entry-head {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--s-3);\n}\n\n.audit-log-entry-text {\n flex: 1;\n min-width: 0;\n font: 400 14px/1.4 var(--f-body);\n color: var(--fg);\n}\n\n.audit-log-entry-timestamp {\n font: 500 12px/1 var(--f-mono);\n color: var(--fg-dim);\n white-space: nowrap;\n margin-left: auto;\n}\n\n.audit-log-entry-toggle {\n width: 28px;\n height: 28px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 0;\n background: transparent;\n color: var(--fg-dim);\n border-radius: var(--r-sm);\n cursor: pointer;\n flex-shrink: 0;\n transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);\n}\n\n.audit-log-stack {\n display: flex;\n flex-direction: column;\n gap: var(--s-3);\n}" } }