@byline/host-tanstack-start 3.8.0 → 3.10.0

package/dist/admin-shell/collections/document-history.d.ts

@@ -0,0 +1,53 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * One serialised audit-log entry as it reaches the admin UI. Mirrors
+ * `@byline/client`'s `AuditLogEntry` but with `occurredAt` as an ISO string —
+ * the value crosses the TanStack server-fn boundary through `serialise()`,
+ * which turns Dates into strings (docs/AUDIT.md — Workstream 3).
+ */
+export interface AuditLogEntryView {
+    id: string;
+    documentId: string | null;
+    collectionId: string | null;
+    actorId: string | null;
+    actorRealm: string;
+    action: string;
+    field: string | null;
+    before: unknown;
+    after: unknown;
+    occurredAt: string;
+}
+/**
+ * The document-history payload attached to the history loader: the page of
+ * audit entries plus the admin-side resolved actor labels (`actors`, keyed by
+ * actor id — ids absent from the map belong to deleted users; system/tooling
+ * rows carry a NULL actorId).
+ */
+export interface DocumentHistoryData {
+    entries: AuditLogEntryView[];
+    meta: {
+        total: number;
+        page: number;
+        pageSize: number;
+        totalPages: number;
+    };
+    actors?: Record<string, {
+        label: string;
+    }>;
+}
+/**
+ * Document-grain audit log for a single document (docs/AUDIT.md — Workstream
+ * 3, "Document history" tab): a chronological, newest-first list of the
+ * non-versioned changes the version stream does not record — path /
+ * available-locales writes, in-place status transitions, and the deletion
+ * event. No diff viewer; before/after render inline.
+ */
+export declare const DocumentHistoryView: ({ data }: {
+    data: DocumentHistoryData;
+}) => import("react").JSX.Element;

package/dist/admin-shell/collections/document-history.js

@@ -0,0 +1,103 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@byline/i18n/react";
+import { Container, Section, Table } from "@byline/ui/react";
+import classnames from "classnames";
+import document_history_module from "./document-history.module.js";
+const ACTION_KEYS = {
+    'document.path.changed': 'collections.documentHistory.actionPathChanged',
+    'document.locales.changed': 'collections.documentHistory.actionLocalesChanged',
+    'document.status.changed': 'collections.documentHistory.actionStatusChanged',
+    'document.deleted': 'collections.documentHistory.actionDeleted'
+};
+function formatAuditValue(value) {
+    if (null == value) return '—';
+    if (Array.isArray(value)) return value.length > 0 ? value.join(', ') : '—';
+    return String(value);
+}
+const DocumentHistoryView = ({ data })=>{
+    const { t } = useTranslation('byline-admin');
+    const entries = data?.entries ?? [];
+    if (0 === entries.length) return /*#__PURE__*/ jsx(Section, {
+        children: /*#__PURE__*/ jsx(Container, {
+            children: /*#__PURE__*/ jsx("p", {
+                className: classnames('byline-coll-dochistory-empty', document_history_module.empty),
+                children: t('collections.documentHistory.empty')
+            })
+        })
+    });
+    return /*#__PURE__*/ jsx(Section, {
+        children: /*#__PURE__*/ jsx(Container, {
+            children: /*#__PURE__*/ jsx(Table.Container, {
+                className: classnames('byline-coll-dochistory-table-wrap', document_history_module.tableWrap),
+                children: /*#__PURE__*/ jsxs(Table, {
+                    children: [
+                        /*#__PURE__*/ jsx(Table.Header, {
+                            children: /*#__PURE__*/ jsxs(Table.Row, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Table.HeadingCell, {
+                                        scope: "col",
+                                        children: t('collections.documentHistory.colWhen')
+                                    }),
+                                    /*#__PURE__*/ jsx(Table.HeadingCell, {
+                                        scope: "col",
+                                        children: t('collections.documentHistory.colAction')
+                                    }),
+                                    /*#__PURE__*/ jsx(Table.HeadingCell, {
+                                        scope: "col",
+                                        children: t('collections.documentHistory.colActor')
+                                    }),
+                                    /*#__PURE__*/ jsx(Table.HeadingCell, {
+                                        scope: "col",
+                                        children: t('collections.documentHistory.colChange')
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Table.Body, {
+                            children: entries.map((entry)=>{
+                                const actionKey = ACTION_KEYS[entry.action];
+                                const actionLabel = actionKey ? t(actionKey) : entry.action;
+                                const actorLabel = null == entry.actorId || 'system' === entry.actorRealm ? t('collections.documentHistory.systemActor') : data.actors?.[entry.actorId]?.label ?? t('collections.history.audit.formerUser');
+                                const hasChange = null != entry.before || null != entry.after;
+                                return /*#__PURE__*/ jsxs(Table.Row, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Table.Cell, {
+                                            className: classnames('byline-coll-dochistory-when', document_history_module.when),
+                                            children: new Date(entry.occurredAt).toLocaleString()
+                                        }),
+                                        /*#__PURE__*/ jsx(Table.Cell, {
+                                            children: actionLabel
+                                        }),
+                                        /*#__PURE__*/ jsx(Table.Cell, {
+                                            children: actorLabel
+                                        }),
+                                        /*#__PURE__*/ jsx(Table.Cell, {
+                                            className: classnames('byline-coll-dochistory-change', document_history_module.change),
+                                            children: hasChange ? /*#__PURE__*/ jsxs(Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: classnames('byline-coll-dochistory-before', document_history_module.before),
+                                                        children: formatAuditValue(entry.before)
+                                                    }),
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: classnames('byline-coll-dochistory-arrow', document_history_module.arrow),
+                                                        children: ' → '
+                                                    }),
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: classnames('byline-coll-dochistory-after', document_history_module.after),
+                                                        children: formatAuditValue(entry.after)
+                                                    })
+                                                ]
+                                            }) : '—'
+                                        })
+                                    ]
+                                }, entry.id);
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+};
+export { DocumentHistoryView };

package/dist/admin-shell/collections/document-history.module.js

@@ -0,0 +1,9 @@
+import "./document-history_module.css";
+const document_history_module = {
+    empty: "empty-qolSIa",
+    tableWrap: "tableWrap-Cil1ih",
+    when: "when-biWgEw",
+    change: "change-xCTn7o",
+    arrow: "arrow-e1mpOz"
+};
+export default document_history_module;

package/dist/admin-shell/collections/document-history_module.css

@@ -0,0 +1,28 @@
+:is(.empty-qolSIa, .byline-coll-dochistory-empty) {
+  color: var(--gray-500);
+  margin: 1.5rem 0;
+  font-size: .875rem;
+}
+
+:is(:is([data-theme="dark"], .dark) .empty-qolSIa, :is([data-theme="dark"], .dark) .byline-coll-dochistory-empty) {
+  color: var(--gray-400);
+}
+
+:is(.tableWrap-Cil1ih, .byline-coll-dochistory-table-wrap) {
+  margin-top: .5rem;
+  margin-bottom: .75rem;
+}
+
+:is(.when-biWgEw, .byline-coll-dochistory-when) {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.change-xCTn7o, .byline-coll-dochistory-change) {
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.arrow-e1mpOz, .byline-coll-dochistory-arrow) {
+  color: var(--gray-400);
+}
+

package/dist/admin-shell/collections/history.d.ts

@@ -7,8 +7,9 @@
  */
 import type { CollectionAdminConfig, CollectionDefinition, WorkflowStatus } from '@byline/core';
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas';
+import { type DocumentHistoryData } from './document-history.js';
 import type { ContentLocaleOption } from './view-menu.js';
-export declare const HistoryView: ({ collectionDefinition, adminConfig, data, workflowStatuses, currentDocument, contentLocales, defaultContentLocale, }: {
+export declare const HistoryView: ({ collectionDefinition, adminConfig, data, auditLog, workflowStatuses, currentDocument, contentLocales, defaultContentLocale, }: {
     collectionDefinition: CollectionDefinition;
     adminConfig?: CollectionAdminConfig;
     data: AnyCollectionSchemaTypes["HistoryType"] & {
@@ -21,6 +22,12 @@ export declare const HistoryView: ({ collectionDefinition, adminConfig, data, wo
             label: string;
         }>;
     };
+    /**
+     * Document-grain audit log for the "Document history" tab (docs/AUDIT.md —
+     * Workstream 3): the non-versioned path / available-locales / status
+     * changes and the deletion event, with admin-resolved actor labels.
+     */
+    auditLog?: DocumentHistoryData;
     workflowStatuses?: WorkflowStatus[];
     currentDocument?: Record<string, unknown> | null;
     contentLocales: ReadonlyArray<ContentLocaleOption>;

package/dist/admin-shell/collections/history.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as external_react_Fragment, Suspense, lazy, useState } from "react";
 import { useParams, useRouterState } from "@tanstack/react-router";
-import { StatusBadge, renderFormatted } from "@byline/admin/react";
+import { AdminTabs, StatusBadge, renderFormatted } from "@byline/admin/react";
 import { useBylineAdminServices } from "@byline/admin/services";
 import { useTranslation } from "@byline/i18n/react";
 import { Button, CloseIcon, Container, IconButton, Modal, Section, Select, Table } from "@byline/ui/react";
@@ -10,6 +10,7 @@ import { Link, useNavigate } from "../chrome/loose-router.js";
 import { RouterPager } from "../chrome/router-pager.js";
 import { TableHeadingCellSortable } from "../chrome/th-sortable.js";
 import { formatNumber } from "../chrome/utils.js";
+import { DocumentHistoryView } from "./document-history.js";
 import history_module from "./history.module.js";
 import { RestoreVersionModal } from "./restore-version-modal.js";
 import { ViewMenu } from "./view-menu.js";
@@ -50,7 +51,7 @@ const AUDIT_ACTION_KEYS = {
     copy_to_locale: 'collections.history.audit.actionCopyToLocale',
     delete_locale: 'collections.history.audit.actionDeleteLocale'
 };
-const HistoryView = ({ collectionDefinition, adminConfig, data, workflowStatuses, currentDocument, contentLocales, defaultContentLocale })=>{
+const HistoryView = ({ collectionDefinition, adminConfig, data, auditLog, workflowStatuses, currentDocument, contentLocales, defaultContentLocale })=>{
     const { id, collection } = useParams({
         from: '/_byline/admin/collections/$collection/$id/history'
     });
@@ -64,9 +65,24 @@ const HistoryView = ({ collectionDefinition, adminConfig, data, workflowStatuses
         select: (s)=>s.location
     });
     const locale = location.search.locale;
+    const activeTab = 'document' === location.search.tab ? 'document' : 'versions';
     const [selectedVersion, setSelectedVersion] = useState(null);
     const [restoreTarget, setRestoreTarget] = useState(null);
     const currentVersionId = currentDocument && 'string' == typeof currentDocument.versionId ? currentDocument.versionId : null;
+    function handleTabChange(name) {
+        const params = structuredClone(location.search);
+        delete params.page;
+        if ('document' === name) params.tab = 'document';
+        else delete params.tab;
+        navigate({
+            to: '/admin/collections/$collection/$id/history',
+            params: {
+                collection,
+                id
+            },
+            search: params
+        });
+    }
     function handleOnPageSizeChange(value) {
         if ('string' != typeof value || 0 === value.length) return;
         const params = structuredClone(location.search);
@@ -84,35 +100,63 @@ const HistoryView = ({ collectionDefinition, adminConfig, data, workflowStatuses
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Section, {
-                children: /*#__PURE__*/ jsx(Container, {
-                    children: /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-coll-history-head', history_module.head),
-                        children: [
-                            /*#__PURE__*/ jsxs("h2", {
-                                className: classnames('byline-coll-history-title', history_module.title),
-                                children: [
-                                    t('collections.history.title', {
-                                        label: labels.singular
-                                    }),
-                                    ' ',
-                                    /*#__PURE__*/ jsx(Stats, {
-                                        total: data?.meta.total
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(ViewMenu, {
-                                collection: collection,
-                                documentId: id,
-                                activeView: "history",
-                                locale: locale,
-                                contentLocales: contentLocales,
-                                defaultContentLocale: defaultContentLocale
-                            })
-                        ]
-                    })
+                children: /*#__PURE__*/ jsxs(Container, {
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: classnames('byline-coll-history-head', history_module.head),
+                            children: [
+                                /*#__PURE__*/ jsxs("h2", {
+                                    className: classnames('byline-coll-history-title', history_module.title),
+                                    children: [
+                                        t('collections.history.title', {
+                                            label: labels.singular
+                                        }),
+                                        ' ',
+                                        /*#__PURE__*/ jsx(Stats, {
+                                            total: 'document' === activeTab ? auditLog?.meta.total ?? 0 : data?.meta.total
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(ViewMenu, {
+                                    collection: collection,
+                                    documentId: id,
+                                    activeView: "history",
+                                    locale: locale,
+                                    contentLocales: contentLocales,
+                                    defaultContentLocale: defaultContentLocale
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(AdminTabs, {
+                            tabs: [
+                                {
+                                    name: 'versions',
+                                    label: t('collections.history.tabs.versions')
+                                },
+                                {
+                                    name: 'document',
+                                    label: t('collections.history.tabs.document')
+                                }
+                            ],
+                            activeTab: activeTab,
+                            onChange: handleTabChange,
+                            className: classnames('byline-coll-history-tabs', history_module.tabs)
+                        })
+                    ]
                 })
             }),
-            /*#__PURE__*/ jsx(Section, {
+            'document' === activeTab && /*#__PURE__*/ jsx(DocumentHistoryView, {
+                data: auditLog ?? {
+                    entries: [],
+                    meta: {
+                        total: 0,
+                        page: 1,
+                        pageSize: 0,
+                        totalPages: 0
+                    }
+                }
+            }),
+            'document' !== activeTab && /*#__PURE__*/ jsx(Section, {
                 children: /*#__PURE__*/ jsxs(Container, {
                     children: [
                         /*#__PURE__*/ jsx("div", {

package/dist/admin-shell/collections/history.module.js

@@ -3,6 +3,7 @@ const history_module = {
     head: "head-WvAUUN",
     title: "title-zFZEGp",
     stats: "stats-e6bP_s",
+    tabs: "tabs-TIAJAP",
     options: "options-oC29XB",
     optionsBottom: "optionsBottom-ppYTec",
     tableWrap: "tableWrap-VnRkHp",

package/dist/admin-shell/collections/history_module.css

@@ -40,6 +40,10 @@
   background-color: var(--canvas-700);
 }
 
+:is(.tabs-TIAJAP, .byline-coll-history-tabs) {
+  margin-top: .25rem;
+}
+
 :is(.options-oC29XB, .byline-coll-history-options) {
   flex-direction: column;
   align-items: flex-start;

package/dist/routes/create-collection-history-route.js

@@ -5,14 +5,19 @@ import { useTranslation } from "@byline/i18n/react";
 import { z } from "zod";
 import { BreadcrumbsClient } from "../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js";
 import { HistoryView } from "../admin-shell/collections/history.js";
-import { getCollectionDocument, getCollectionDocumentHistory } from "../server-fns/collections/index.js";
+import { getCollectionDocument, getCollectionDocumentAuditLog, getCollectionDocumentHistory } from "../server-fns/collections/index.js";
 const searchSchema = z.object({
     page: z.coerce.number().min(1).optional(),
     page_size: z.coerce.number().max(100).optional(),
     order: z.string().optional(),
     desc: z.coerce.boolean().optional(),
-    locale: z.string().optional()
+    locale: z.string().optional(),
+    tab: z["enum"]([
+        'versions',
+        'document'
+    ]).optional()
 });
+const AUDIT_LOG_PAGE_SIZE = 100;
 function createCollectionHistoryRoute(path, opts) {
     const Route = createFileRoute(path)({
         validateSearch: searchSchema,
@@ -26,7 +31,7 @@ function createCollectionHistoryRoute(path, opts) {
         loader: async ({ params, deps })=>{
             const collectionDef = getCollectionDefinition(params.collection);
             if (!collectionDef) throw notFound();
-            const [history, currentDocument] = await Promise.all([
+            const [history, currentDocument, auditLog] = await Promise.all([
                 getCollectionDocumentHistory({
                     data: {
                         collection: params.collection,
@@ -40,18 +45,29 @@ function createCollectionHistoryRoute(path, opts) {
                         }
                     }
                 }),
-                getCollectionDocument(params.collection, params.id, deps.locale ?? 'all')
+                getCollectionDocument(params.collection, params.id, deps.locale ?? 'all'),
+                getCollectionDocumentAuditLog({
+                    data: {
+                        collection: params.collection,
+                        id: params.id,
+                        params: {
+                            page: 1,
+                            page_size: AUDIT_LOG_PAGE_SIZE
+                        }
+                    }
+                })
             ]);
             return {
                 history,
-                currentDocument
+                currentDocument,
+                auditLog
             };
         },
         staleTime: 0,
         gcTime: 0,
         shouldReload: true,
         component: function() {
-            const { history, currentDocument } = Route.useLoaderData();
+            const { history, currentDocument, auditLog } = Route.useLoaderData();
             const { collection } = Route.useParams();
             const collectionDef = getCollectionDefinition(collection);
             const adminConfig = getCollectionAdminConfig(collection);
@@ -83,6 +99,7 @@ function createCollectionHistoryRoute(path, opts) {
                         workflowStatuses: getWorkflowStatuses(collectionDef),
                         adminConfig: adminConfig ?? void 0,
                         data: history,
+                        auditLog: auditLog,
                         currentDocument: currentDocument,
                         contentLocales: opts.contentLocales,
                         defaultContentLocale: opts.defaultContentLocale

package/dist/server-fns/collections/audit.d.ts

@@ -0,0 +1,50 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { type ActorLabelMap } from './actors.js';
+export interface AuditLogSearchParams {
+    page?: number;
+    page_size?: number;
+}
+/**
+ * Audit entry as it crosses the server-fn boundary. `occurredAt` is an ISO
+ * string (Date doesn't survive serialization) and `before` / `after` are
+ * narrowed from the storage layer's `unknown` jsonb to the concrete shapes the
+ * shipped actions actually carry (path/status strings, the available-locales
+ * array, or null for the deletion event) — `unknown` is not a serializable
+ * type the TanStack server-fn validator accepts.
+ */
+export interface AuditLogEntryDto {
+    id: string;
+    documentId: string | null;
+    collectionId: string | null;
+    actorId: string | null;
+    actorRealm: string;
+    action: string;
+    field: string | null;
+    before: string | string[] | null;
+    after: string | string[] | null;
+    occurredAt: string;
+}
+export declare const getCollectionDocumentAuditLog: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+    collection: string;
+    id: string;
+    params?: AuditLogSearchParams;
+}) => {
+    collection: string;
+    id: string;
+    params?: AuditLogSearchParams;
+}, Promise<{
+    entries: AuditLogEntryDto[];
+    meta: {
+        total: number;
+        page: number;
+        pageSize: number;
+        totalPages: number;
+    };
+    actors: ActorLabelMap;
+}>>;

package/dist/server-fns/collections/audit.js

@@ -0,0 +1,40 @@
+import { createServerFn } from "@tanstack/react-start";
+import { ERR_NOT_FOUND, getLogger } from "@byline/core";
+import { ensureCollection } from "../../integrations/api-utils.js";
+import { getAdminBylineClient } from "../../integrations/byline-client.js";
+import { resolveActorLabels } from "./actors.js";
+const getCollectionDocumentAuditLog = createServerFn({
+    method: 'GET'
+}).inputValidator((input)=>input).handler(async ({ data })=>{
+    const { collection: path, id, params } = data;
+    const config = await ensureCollection(path);
+    if (!config) throw ERR_NOT_FOUND({
+        message: 'Collection not found',
+        details: {
+            collectionPath: path
+        }
+    }).log(getLogger());
+    const result = await getAdminBylineClient().collection(path).auditLog(id, {
+        page: params?.page,
+        pageSize: params?.page_size
+    });
+    const actors = await resolveActorLabels(result.entries.map((e)=>e.actorId));
+    const entries = result.entries.map((e)=>({
+            id: e.id,
+            documentId: e.documentId,
+            collectionId: e.collectionId,
+            actorId: e.actorId,
+            actorRealm: e.actorRealm,
+            action: e.action,
+            field: e.field,
+            before: e.before,
+            after: e.after,
+            occurredAt: e.occurredAt instanceof Date ? e.occurredAt.toISOString() : String(e.occurredAt)
+        }));
+    return {
+        entries,
+        meta: result.meta,
+        actors
+    };
+});
+export { getCollectionDocumentAuditLog };

package/dist/server-fns/collections/index.d.ts

@@ -4,6 +4,7 @@
  * Each module is self-contained: it defines the TanStack Start server
  * function and exports a clean public API.
  */
+export * from './audit';
 export * from './copy-to-locale';
 export * from './create';
 export * from './delete';

package/dist/server-fns/collections/index.js

@@ -1,3 +1,4 @@
+export * from "./audit.js";
 export * from "./copy-to-locale.js";
 export * from "./create.js";
 export * from "./delete.js";

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -115,13 +115,13 @@
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
-    "@byline/admin": "3.8.0",
-    "@byline/auth": "3.8.0",
-    "@byline/core": "3.8.0",
-    "@byline/i18n": "3.8.0",
-    "@byline/ui": "3.8.0",
-    "@byline/ai": "3.8.0",
-    "@byline/client": "3.8.0"
+    "@byline/admin": "3.10.0",
+    "@byline/core": "3.10.0",
+    "@byline/auth": "3.10.0",
+    "@byline/client": "3.10.0",
+    "@byline/ui": "3.10.0",
+    "@byline/i18n": "3.10.0",
+    "@byline/ai": "3.10.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/collections/document-history.module.css

@@ -0,0 +1,46 @@
+/**
+ * DocumentHistoryView — the document-grain audit log tab (docs/AUDIT.md — W3).
+ *
+ * Override handles:
+ *   .byline-coll-dochistory-empty      — empty-state explanation
+ *   .byline-coll-dochistory-table-wrap — table container
+ *   .byline-coll-dochistory-when       — timestamp cell
+ *   .byline-coll-dochistory-change     — before → after cell
+ *   .byline-coll-dochistory-before     — pre-change value
+ *   .byline-coll-dochistory-arrow      — muted transition arrow
+ *   .byline-coll-dochistory-after      — post-change value
+ */
+
+.empty,
+:global(.byline-coll-dochistory-empty) {
+  margin: 1.5rem 0;
+  color: var(--gray-500);
+  font-size: 0.875rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .empty,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-coll-dochistory-empty) {
+  color: var(--gray-400);
+}
+
+.tableWrap,
+:global(.byline-coll-dochistory-table-wrap) {
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.when,
+:global(.byline-coll-dochistory-when) {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.change,
+:global(.byline-coll-dochistory-change) {
+  font-variant-numeric: tabular-nums;
+}
+
+.arrow,
+:global(.byline-coll-dochistory-arrow) {
+  color: var(--gray-400);
+}