@byline/host-tanstack-start 1.10.3 → 1.11.0

package/dist/admin-shell/chrome/th-sortable_module.css

@@ -35,3 +35,9 @@
   height: 1.5rem;
 }
 
+.byline-sort-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+

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

@@ -7,9 +7,19 @@
  */
 import type { ColumnDefinition, WorkflowStatus } from '@byline/core';
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas';
-export declare const ListView: ({ data, columns, workflowStatuses, useAsTitle, }: {
+type ReorderFn = (params: {
+    documentId: string;
+    beforeDocumentId: string | null;
+    afterDocumentId: string | null;
+}) => Promise<unknown>;
+export declare const ListView: ({ data, columns, workflowStatuses, useAsTitle, orderable, onReorder, }: {
     data: AnyCollectionSchemaTypes["ListType"];
     columns: ColumnDefinition[];
     workflowStatuses?: WorkflowStatus[];
     useAsTitle?: string;
+    /** When true, render a drag handle column and enable drag-to-reorder. */
+    orderable?: boolean;
+    /** Persists a single-row reorder via the host's reorder server fn. */
+    onReorder?: ReorderFn;
 }) => import("react").JSX.Element;
+export {};

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

@@ -1,10 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { useRouterState } from "@tanstack/react-router";
-import { Container, IconButton, LoaderRing, PlusIcon, Search, Section, Select, StatusBadge, Table, renderFormatted } from "@byline/ui/react";
+import { useEffect, useMemo, useState } from "react";
+import { useRouter, useRouterState } from "@tanstack/react-router";
+import { Container, GripperVerticalIcon, IconButton, LoaderRing, PlusIcon, Search, Section, Select, StatusBadge, Table, renderFormatted, useToastManager } from "@byline/ui/react";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import classnames from "classnames";
 import { Link, useNavigate } from "../chrome/loose-router.js";
 import { RouterPager } from "../chrome/router-pager.js";
+import { SortAscendingIcon } from "../chrome/sort-icons.js";
 import { TableHeadingCellSortable } from "../chrome/th-sortable.js";
 import { formatNumber } from "../chrome/utils.js";
 import list_module from "./list.module.js";
@@ -32,11 +35,104 @@ function padRows(value) {
             children: "\xa0"
         }, `empty-row-${index}`));
 }
-const ListView = ({ data, columns, workflowStatuses, useAsTitle })=>{
+function SortableTableRow({ id, disabled, children }) {
+    const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+        id,
+        disabled
+    });
+    const style = {
+        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+        transition,
+        position: 'relative',
+        zIndex: isDragging ? 10 : 'auto',
+        opacity: isDragging ? 0.6 : 1
+    };
+    return /*#__PURE__*/ jsxs("tr", {
+        ref: setNodeRef,
+        className: "byline-table-row",
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx("td", {
+                className: classnames('byline-coll-list-drag-cell', list_module.dragCell),
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: classnames('byline-coll-list-drag-handle', list_module.dragHandle),
+                    "aria-label": disabled ? 'Drag disabled while filters or search are active' : 'Drag to reorder',
+                    disabled: disabled,
+                    ...attributes,
+                    ...listeners,
+                    children: /*#__PURE__*/ jsx(GripperVerticalIcon, {})
+                })
+            }),
+            children
+        ]
+    });
+}
+const ListView = ({ data, columns, workflowStatuses, useAsTitle, orderable = false, onReorder })=>{
     const navigate = useNavigate();
+    const router = useRouter();
+    const toastManager = useToastManager();
     const location = useRouterState({
         select: (s)=>s.location
     });
+    const [localDocs, setLocalDocs] = useState(data.docs);
+    const [isReordering, setIsReordering] = useState(false);
+    useEffect(()=>{
+        if (!isReordering) setLocalDocs(data.docs);
+    }, [
+        data.docs,
+        isReordering
+    ]);
+    const searchParams = location.search;
+    const isCanonicalView = !searchParams.order && !searchParams.desc && !searchParams.query && !searchParams.status;
+    const dragEnabled = orderable && isCanonicalView && !!onReorder;
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
+    const handleDragEnd = async (event)=>{
+        const { active, over } = event;
+        if (!over || active.id === over.id || !onReorder) return;
+        const oldIndex = localDocs.findIndex((d)=>d.id === active.id);
+        const newIndex = localDocs.findIndex((d)=>d.id === over.id);
+        if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) return;
+        const previousDocs = localDocs;
+        const next = [
+            ...localDocs
+        ];
+        const [moved] = next.splice(oldIndex, 1);
+        if (!moved) return;
+        next.splice(newIndex, 0, moved);
+        setLocalDocs(next);
+        setIsReordering(true);
+        const before = next[newIndex - 1]?.id ?? null;
+        const after = next[newIndex + 1]?.id ?? null;
+        try {
+            await onReorder({
+                documentId: String(active.id),
+                beforeDocumentId: before,
+                afterDocumentId: after
+            });
+            await router.invalidate();
+        } catch (_err) {
+            setLocalDocs(previousDocs);
+            toastManager.add({
+                title: 'Could not save the new order',
+                description: 'Please try again.',
+                data: {
+                    intent: 'danger',
+                    iconType: 'danger',
+                    icon: true,
+                    close: true
+                }
+            });
+        } finally{
+            setIsReordering(false);
+        }
+    };
     const statusItems = useMemo(()=>[
             {
                 value: '_all',
@@ -162,7 +258,82 @@ const ListView = ({ data, columns, workflowStatuses, useAsTitle })=>{
                 /*#__PURE__*/ jsxs(Table.Container, {
                     className: classnames('byline-coll-list-table-wrap', list_module.tableWrap),
                     children: [
-                        /*#__PURE__*/ jsxs(Table, {
+                        orderable ? /*#__PURE__*/ jsx(DndContext, {
+                            sensors: sensors,
+                            onDragEnd: handleDragEnd,
+                            children: /*#__PURE__*/ jsx(SortableContext, {
+                                items: localDocs.map((d)=>d.id),
+                                strategy: verticalListSortingStrategy,
+                                children: /*#__PURE__*/ jsxs(Table, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Table.Header, {
+                                            children: /*#__PURE__*/ jsxs(Table.Row, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx("th", {
+                                                        scope: "col",
+                                                        className: classnames('byline-coll-list-drag-cell', list_module.dragCell),
+                                                        children: /*#__PURE__*/ jsx("button", {
+                                                            type: "button",
+                                                            className: classnames('byline-coll-list-order-header', list_module.orderHeader, isCanonicalView && [
+                                                                'byline-coll-list-order-header-active',
+                                                                list_module.orderHeaderActive
+                                                            ]),
+                                                            onClick: ()=>{
+                                                                const params = structuredClone(location.search);
+                                                                delete params.page;
+                                                                delete params.order;
+                                                                delete params.desc;
+                                                                navigate({
+                                                                    to: location.pathname,
+                                                                    search: params
+                                                                });
+                                                            },
+                                                            "aria-label": "Sort by manual order",
+                                                            title: "Sort by manual order",
+                                                            children: /*#__PURE__*/ jsx(SortAscendingIcon, {})
+                                                        })
+                                                    }),
+                                                    columns.map((column)=>/*#__PURE__*/ jsx(TableHeadingCellSortable, {
+                                                            fieldName: String(column.fieldName),
+                                                            label: column.label,
+                                                            sortable: column.sortable,
+                                                            scope: "col",
+                                                            align: column.align,
+                                                            className: column.className
+                                                        }, String(column.fieldName)))
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Table.Body, {
+                                            children: localDocs.map((document)=>/*#__PURE__*/ jsx(SortableTableRow, {
+                                                    id: document.id,
+                                                    disabled: !dragEnabled,
+                                                    children: columns.map((column)=>/*#__PURE__*/ jsx(Table.Cell, {
+                                                            className: classnames({
+                                                                'byline-coll-list-cell-right': 'right' === column.align,
+                                                                [list_module.cellRight]: 'right' === column.align,
+                                                                'byline-coll-list-cell-center': 'center' === column.align,
+                                                                [list_module.cellCenter]: 'center' === column.align
+                                                            }),
+                                                            children: useAsTitle && column.fieldName === useAsTitle ? /*#__PURE__*/ jsx(Link, {
+                                                                to: '/admin/collections/$collection/$id',
+                                                                params: {
+                                                                    collection: data.included.collection.path,
+                                                                    id: document.id
+                                                                },
+                                                                children: column.formatter ? renderFormatted(getColumnValue(document, column.fieldName), document, column.formatter) : getColumnValue(document, column.fieldName) ?? '------'
+                                                            }) : column.formatter ? renderFormatted(getColumnValue(document, column.fieldName), document, column.formatter) : 'status' === column.fieldName && workflowStatuses ? /*#__PURE__*/ jsx(StatusBadge, {
+                                                                status: document.status,
+                                                                workflowStatuses: workflowStatuses,
+                                                                hasPublishedVersion: document.hasPublishedVersion
+                                                            }) : String(getColumnValue(document, column.fieldName) ?? '')
+                                                        }, String(column.fieldName)))
+                                                }, document.id))
+                                        })
+                                    ]
+                                })
+                            })
+                        }) : /*#__PURE__*/ jsxs(Table, {
                             children: [
                                 /*#__PURE__*/ jsx(Table.Header, {
                                     children: /*#__PURE__*/ jsx(Table.Row, {

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

@@ -11,6 +11,10 @@ const list_module = {
     cellRight: "cellRight-KPlIvX",
     cellCenter: "cellCenter-NlTSyy",
     padRow: "padRow-mCWMHC",
+    dragCell: "dragCell-o9UFuB",
+    dragHandle: "dragHandle-kAIpKJ",
+    orderHeader: "orderHeader-wsz9WO",
+    orderHeaderActive: "orderHeaderActive-VUBEa8",
     pageSize: "pageSize-ojmZKR"
 };
 export default list_module;

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

@@ -80,6 +80,80 @@
   height: 32px;
 }
 
+:is(.dragCell-o9UFuB, .byline-coll-list-drag-cell) {
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 1%;
+  padding: 0 .5rem 0 .25rem;
+}
+
+:is(.dragHandle-kAIpKJ, .byline-coll-list-drag-handle) {
+  width: 20px;
+  height: 20px;
+  color: inherit;
+  cursor: grab;
+  opacity: .45;
+  touch-action: none;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.dragHandle-kAIpKJ:hover {
+  opacity: 1;
+}
+
+.byline-coll-list-drag-handle:hover {
+  opacity: 1;
+}
+
+.dragHandle-kAIpKJ:disabled {
+  cursor: not-allowed;
+  opacity: .2;
+}
+
+.byline-coll-list-drag-handle:disabled {
+  cursor: not-allowed;
+  opacity: .2;
+}
+
+.dragHandle-kAIpKJ:active {
+  cursor: grabbing;
+}
+
+.byline-coll-list-drag-handle:active {
+  cursor: grabbing;
+}
+
+:is(.orderHeader-wsz9WO, .byline-coll-list-order-header) {
+  width: 20px;
+  height: 20px;
+  color: inherit;
+  cursor: pointer;
+  opacity: .45;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.orderHeader-wsz9WO:hover {
+  opacity: .85;
+}
+
+.byline-coll-list-order-header:hover {
+  opacity: .85;
+}
+
+:is(.orderHeaderActive-VUBEa8, .byline-coll-list-order-header-active) {
+  opacity: 1;
+}
+
 @media (min-width: 40rem) {
   :is(.pageSize-ojmZKR, .byline-coll-list-page-size) {
     margin-left: auto;

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

@@ -7,7 +7,7 @@ import { z } from "zod";
 import { BreadcrumbsClient } from "../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js";
 import { useNavigate } from "../admin-shell/chrome/loose-router.js";
 import { ListView } from "../admin-shell/collections/list.js";
-import { getCollectionDocuments } from "../server-fns/collections/index.js";
+import { getCollectionDocuments, reorderCollectionDocument } 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(),
@@ -119,7 +119,18 @@ function createCollectionListRoute(path) {
                         data: data,
                         columns: columns,
                         workflowStatuses: workflowStatuses,
-                        useAsTitle: collectionDef.useAsTitle
+                        useAsTitle: collectionDef.useAsTitle,
+                        orderable: adminConfig?.orderable === true,
+                        onReorder: async ({ documentId, beforeDocumentId, afterDocumentId })=>{
+                            await reorderCollectionDocument({
+                                data: {
+                                    collection,
+                                    documentId,
+                                    beforeDocumentId,
+                                    afterDocumentId
+                                }
+                            });
+                        }
                     })
                 ]
             });

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

@@ -11,6 +11,7 @@ export * from './duplicate';
 export * from './get';
 export * from './history';
 export * from './list';
+export * from './reorder';
 export * from './restore-version';
 export * from './stats';
 export * from './status';

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

@@ -5,6 +5,7 @@ export * from "./duplicate.js";
 export * from "./get.js";
 export * from "./history.js";
 export * from "./list.js";
+export * from "./reorder.js";
 export * from "./restore-version.js";
 export * from "./stats.js";
 export * from "./status.js";

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

@@ -1,5 +1,5 @@
 import { createServerFn } from "@tanstack/react-start";
-import { ERR_NOT_FOUND, getCollectionSchemasForPath, getLogger, getServerConfig } from "@byline/core";
+import { ERR_NOT_FOUND, getCollectionAdminConfig, getCollectionSchemasForPath, getLogger, getServerConfig } from "@byline/core";
 import { ensureCollection } from "../../integrations/api-utils.js";
 import { getAdminBylineClient } from "../../integrations/byline-client.js";
 import { serialise } from "./utils.js";
@@ -20,11 +20,16 @@ const getCollectionDocuments = createServerFn({
     const where = {};
     if (params.status) where.status = params.status;
     if (params.query) where.query = params.query;
+    const adminConfig = getCollectionAdminConfig(path);
+    const defaultSort = adminConfig?.orderable === true ? {
+        order_key: 'asc'
+    } : void 0;
+    const sortSpec = params.order ? {
+        [params.order]: false === params.desc ? 'asc' : 'desc'
+    } : defaultSort;
     const result = await handle.find({
         where: Object.keys(where).length > 0 ? where : void 0,
-        sort: params.order ? {
-            [params.order]: false === params.desc ? 'asc' : 'desc'
-        } : void 0,
+        sort: sortSpec,
         locale: params.locale ?? 'en',
         page: params.page,
         pageSize,

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

@@ -0,0 +1,21 @@
+/**
+ * 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
+ */
+export declare const reorderCollectionDocument: import("@tanstack/react-start").RequiredFetcher<undefined, (input: {
+    collection: string;
+    documentId: string;
+    beforeDocumentId?: string | null;
+    afterDocumentId?: string | null;
+}) => {
+    collection: string;
+    documentId: string;
+    beforeDocumentId?: string | null;
+    afterDocumentId?: string | null;
+}, Promise<{
+    status: "ok";
+    orderKey: string;
+}>>;

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

@@ -0,0 +1,97 @@
+import { createServerFn } from "@tanstack/react-start";
+import { ERR_NOT_FOUND, ERR_VALIDATION, assertActorCanPerform, generateKeyBetween, generateNKeysBetween, getCollectionAdminConfig, getLogger, getServerConfig } from "@byline/core";
+import { getAdminRequestContext } from "../../auth/auth-context.js";
+import { ensureCollection } from "../../integrations/api-utils.js";
+const reorderCollectionDocument = createServerFn({
+    method: 'POST'
+}).inputValidator((input)=>input).handler(async ({ data: input })=>{
+    const { collection: path, documentId, beforeDocumentId, afterDocumentId } = input;
+    const logger = getLogger();
+    const config = await ensureCollection(path);
+    if (!config) throw ERR_NOT_FOUND({
+        message: 'Collection not found',
+        details: {
+            collectionPath: path
+        }
+    }).log(logger);
+    const adminConfig = getCollectionAdminConfig(path);
+    if (adminConfig?.orderable !== true) throw ERR_VALIDATION({
+        message: `collection '${path}' is not orderable; set \`orderable: true\` on its admin config to enable reordering`,
+        details: {
+            collectionPath: path
+        }
+    }).log(logger);
+    const requestContext = await getAdminRequestContext();
+    assertActorCanPerform(requestContext, path, 'update');
+    const serverConfig = getServerConfig();
+    const collectionId = config.collection.id;
+    const canonical = await serverConfig.db.queries.documents.getCanonicalDocumentOrder({
+        collection_id: collectionId
+    });
+    let corrupted = false;
+    {
+        const seen = new Set();
+        let lastKey = null;
+        for (const doc of canonical)if (null != doc.order_key) {
+            if (seen.has(doc.order_key)) {
+                corrupted = true;
+                break;
+            }
+            if (null != lastKey && doc.order_key <= lastKey) {
+                corrupted = true;
+                break;
+            }
+            seen.add(doc.order_key);
+            lastKey = doc.order_key;
+        }
+    }
+    if (corrupted) {
+        const allKeys = generateNKeysBetween(null, null, canonical.length);
+        for(let i = 0; i < canonical.length; i++)await serverConfig.db.commands.documents.setOrderKey({
+            document_id: canonical[i]?.id,
+            order_key: allKeys[i]
+        });
+    } else {
+        const firstNullIdx = canonical.findIndex((d)=>null == d.order_key);
+        if (-1 !== firstNullIdx) {
+            const nullDocs = canonical.slice(firstNullIdx);
+            const lastExistingKey = 0 === firstNullIdx ? null : canonical[firstNullIdx - 1]?.order_key;
+            const newKeys = generateNKeysBetween(lastExistingKey, null, nullDocs.length);
+            for(let i = 0; i < nullDocs.length; i++)await serverConfig.db.commands.documents.setOrderKey({
+                document_id: nullDocs[i]?.id,
+                order_key: newKeys[i]
+            });
+        }
+    }
+    const { left, right } = await serverConfig.db.queries.documents.getNeighborOrderKeys({
+        collection_id: collectionId,
+        before_document_id: beforeDocumentId ?? null,
+        after_document_id: afterDocumentId ?? null
+    });
+    let newKey;
+    try {
+        newKey = generateKeyBetween(left, right);
+    } catch (err) {
+        throw ERR_VALIDATION({
+            message: 'cannot generate order_key between supplied neighbors',
+            details: {
+                collectionPath: path,
+                documentId,
+                beforeDocumentId,
+                afterDocumentId,
+                left,
+                right,
+                cause: err instanceof Error ? err.message : String(err)
+            }
+        }).log(logger);
+    }
+    await serverConfig.db.commands.documents.setOrderKey({
+        document_id: documentId,
+        order_key: newKey
+    });
+    return {
+        status: 'ok',
+        orderKey: newKey
+    };
+});
+export { reorderCollectionDocument };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -99,18 +99,20 @@
     }
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "classnames": "^2.5.1",
     "npm-run-all": "^4.1.5",
     "react-json-view-lite": "^2.5.0",
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
-    "@byline/admin": "1.10.3",
-    "@byline/auth": "1.10.3",
-    "@byline/ai": "1.10.3",
-    "@byline/client": "1.10.3",
-    "@byline/core": "1.10.3",
-    "@byline/ui": "1.10.3"
+    "@byline/admin": "1.11.0",
+    "@byline/auth": "1.11.0",
+    "@byline/ai": "1.11.0",
+    "@byline/client": "1.11.0",
+    "@byline/core": "1.11.0",
+    "@byline/ui": "1.11.0"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/chrome/th-sortable.module.css

@@ -49,3 +49,13 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+
+/* Sort indicator SVGs are rendered with class `byline-sort-icon` (see
+   sort-icons.tsx) inside a flex container; without explicit dimensions
+   they collapse to zero. Size them here so every consumer of the icons
+   picks the rule up automatically. */
+:global(.byline-sort-icon) {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}

package/src/admin-shell/collections/list.module.css

@@ -111,6 +111,78 @@
   border: 0;
 }
 
+.dragCell,
+:global(.byline-coll-list-drag-cell) {
+  /* "Shrink to content" — table layout distributes the row width across cells
+     without an explicit width; setting 1% with nowrap forces this column to
+     take only the space its inner button needs. */
+  width: 1%;
+  padding: 0 0.5rem 0 0.25rem;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.dragHandle,
+:global(.byline-coll-list-drag-handle) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: grab;
+  opacity: 0.45;
+  touch-action: none;
+}
+
+.dragHandle:hover,
+:global(.byline-coll-list-drag-handle:hover) {
+  opacity: 1;
+}
+
+.dragHandle:disabled,
+:global(.byline-coll-list-drag-handle:disabled) {
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+
+.dragHandle:active,
+:global(.byline-coll-list-drag-handle:active) {
+  cursor: grabbing;
+}
+
+/* Column-header button in the drag column. Clicking returns to canonical
+   `order_key` sort. Active when the current view is canonical so the user
+   sees the affordance is "selected" — matches the visual semantics of
+   the sortable column headers next to it. */
+.orderHeader,
+:global(.byline-coll-list-order-header) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.45;
+}
+
+.orderHeader:hover,
+:global(.byline-coll-list-order-header:hover) {
+  opacity: 0.85;
+}
+
+.orderHeaderActive,
+:global(.byline-coll-list-order-header-active) {
+  opacity: 1;
+}
+
 .pageSize,
 :global(.byline-coll-list-page-size) {
   /* fallback */