@byline/host-tanstack-start 1.0.6 → 1.2.0

package/src/admin-shell/collections/history.tsx

@@ -11,9 +11,8 @@ import { useParams, useRouterState } from '@tanstack/react-router'
 
 import type { CollectionAdminConfig, CollectionDefinition, WorkflowStatus } from '@byline/core'
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
-import { Container, IconButton, Section, Select, Table } from '@byline/ui'
-import { StatusBadge } from '@byline/ui/react/admin'
-import { renderFormatted } from '@byline/ui/react/fields'
+import { Button, CloseIcon, Container, IconButton, Modal, Section, Select, Table } from '@byline/ui/react'
+import { renderFormatted, StatusBadge } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { Link, useNavigate } from '../chrome/loose-router.js'
@@ -21,6 +20,7 @@ import { RouterPager } from '../chrome/router-pager.js'
 import { TableHeadingCellSortable } from '../chrome/th-sortable.js'
 import { formatNumber } from '../chrome/utils.js'
 import styles from './history.module.css'
+import { RestoreVersionModal } from './restore-version-modal.js'
 import { ViewMenu } from './view-menu.js'
 import type { ContentLocaleOption } from './view-menu.js'
 
@@ -28,7 +28,6 @@ import type { ContentLocaleOption } from './view-menu.js'
  * Resolve a column value from a document, checking `fields` first (user-defined
  * collection fields) then the root (metadata like status, updated_at).
  */
-// biome-ignore lint/suspicious/noExplicitAny: collection rows are heterogeneous
 function getColumnValue(document: any, fieldName: string): any {
   if (document.fields && fieldName in document.fields) {
     return document.fields[fieldName]
@@ -38,9 +37,7 @@ function getColumnValue(document: any, fieldName: string): any {
 
 // Lazy-load DiffModal because react-diff-viewer-continued uses a web worker
 // bundle that cannot be resolved by Node during SSR.
-const DiffModal = lazy(() =>
-  import('@byline/ui/react/admin').then((m) => ({ default: m.DiffModal }))
-)
+const DiffModal = lazy(() => import('@byline/ui/react').then((m) => ({ default: m.DiffModal })))
 
 /**
  * Safely extract a displayable string from a field value that may be a plain
@@ -78,7 +75,7 @@ function padRows(value: number) {
       key={`empty-row-${
         // biome-ignore lint/suspicious/noArrayIndexKey: we're okay here
         index
-      }`}
+        }`}
       className={cx('byline-coll-history-pad-row', styles.padRow)}
     >
        
@@ -115,6 +112,15 @@ export const HistoryView = ({
     versionId: string
     label: string
   } | null>(null)
+  const [restoreTarget, setRestoreTarget] = useState<{
+    versionId: string
+    label: string
+    versionNumber: number
+  } | null>(null)
+  const currentVersionId =
+    currentDocument && typeof currentDocument.versionId === 'string'
+      ? (currentDocument.versionId as string)
+      : null
 
   function handleOnPageSizeChange(value: string | null): void {
     if (typeof value !== 'string' || value.length === 0) return
@@ -167,8 +173,8 @@ export const HistoryView = ({
                     scope="col"
                     className={cx('byline-coll-history-col-version', styles.colVersion)}
                   />
-                  {columns.map((column) => {
-                    return (
+                  {columns.flatMap((column) => {
+                    const cell = (
                       <TableHeadingCellSortable
                         key={String(column.fieldName)}
                         fieldName={String(column.fieldName)}
@@ -179,6 +185,17 @@ export const HistoryView = ({
                         className={column.className}
                       />
                     )
+                    if (column.fieldName === 'title') {
+                      return [
+                        cell,
+                        <th
+                          key="__restore"
+                          scope="col"
+                          className={cx('byline-coll-history-col-restore', styles.colRestore)}
+                        />,
+                      ]
+                    }
+                    return [cell]
                   })}
                 </Table.Row>
               </Table.Header>
@@ -217,84 +234,119 @@ export const HistoryView = ({
                           </IconButton>
                         ) : null}
                       </Table.Cell>
-                      {columns.map((column) => (
-                        <Table.Cell
-                          key={String(column.fieldName)}
-                          className={cx({
-                            'byline-coll-history-cell-right': column.align === 'right',
-                            [styles.cellRight]: column.align === 'right',
-                            'byline-coll-history-cell-center': column.align === 'center',
-                            [styles.cellCenter]: column.align === 'center',
-                          })}
-                        >
-                          {column.fieldName === 'title' ? (
-                            versionId && currentDocument ? (
-                              <button
-                                type="button"
-                                className={cx(
-                                  'byline-coll-history-title-button',
-                                  styles.titleButton
-                                )}
-                                onClick={() =>
-                                  setSelectedVersion({
-                                    versionId,
-                                    label: new Date(document.createdAt).toLocaleString(),
-                                  })
-                                }
-                              >
-                                {column.formatter
-                                  ? renderFormatted(
+                      {columns.flatMap((column) => {
+                        const dataCell = (
+                          <Table.Cell
+                            key={String(column.fieldName)}
+                            className={cx({
+                              'byline-coll-history-cell-right': column.align === 'right',
+                              [styles.cellRight]: column.align === 'right',
+                              'byline-coll-history-cell-center': column.align === 'center',
+                              [styles.cellCenter]: column.align === 'center',
+                            })}
+                          >
+                            {column.fieldName === 'title' ? (
+                              versionId && currentDocument ? (
+                                <button
+                                  type="button"
+                                  className={cx(
+                                    'byline-coll-history-title-button',
+                                    styles.titleButton
+                                  )}
+                                  onClick={() =>
+                                    setSelectedVersion({
+                                      versionId,
+                                      label: new Date(document.createdAt).toLocaleString(),
+                                    })
+                                  }
+                                >
+                                  {column.formatter
+                                    ? renderFormatted(
                                       getColumnValue(document, column.fieldName as string),
                                       document,
                                       column.formatter
                                     )
-                                  : resolveDisplayValue(
+                                    : resolveDisplayValue(
                                       getColumnValue(document, column.fieldName as string),
                                       locale,
                                       defaultContentLocale
                                     ) || '------'}
-                              </button>
-                            ) : (
-                              <Link
-                                to={'/admin/collections/$collection/$id' as never}
-                                params={{
-                                  collection,
-                                  id: document.id,
-                                }}
-                              >
-                                {column.formatter
-                                  ? renderFormatted(
+                                </button>
+                              ) : (
+                                <Link
+                                  to={'/admin/collections/$collection/$id' as never}
+                                  params={{
+                                    collection,
+                                    id: document.id,
+                                  }}
+                                >
+                                  {column.formatter
+                                    ? renderFormatted(
                                       getColumnValue(document, column.fieldName as string),
                                       document,
                                       column.formatter
                                     )
-                                  : resolveDisplayValue(
+                                    : resolveDisplayValue(
                                       getColumnValue(document, column.fieldName as string),
                                       locale,
                                       defaultContentLocale
                                     ) || '------'}
-                              </Link>
-                            )
-                          ) : column.formatter ? (
-                            renderFormatted(
-                              getColumnValue(document, column.fieldName as string),
-                              document,
-                              column.formatter
-                            )
-                          ) : column.fieldName === 'status' && workflowStatuses ? (
-                            <StatusBadge
-                              status={document.status}
-                              workflowStatuses={workflowStatuses}
-                            />
-                          ) : (
-                            resolveDisplayValue(
-                              getColumnValue(document, column.fieldName as string),
-                              locale,
-                              defaultContentLocale
-                            ) || ''
-                          )}
-                        </Table.Cell>
-                      ))}
+                                </Link>
+                              )
+                            ) : column.formatter ? (
+                              renderFormatted(
+                                getColumnValue(document, column.fieldName as string),
+                                document,
+                                column.formatter
+                              )
+                            ) : column.fieldName === 'status' && workflowStatuses ? (
+                              <StatusBadge
+                                status={document.status}
+                                workflowStatuses={workflowStatuses}
+                              />
+                            ) : (
+                              resolveDisplayValue(
+                                getColumnValue(document, column.fieldName as string),
+                                locale,
+                                defaultContentLocale
+                              ) || ''
+                            )}
+                          </Table.Cell>
+                        )
+                        if (column.fieldName === 'title') {
+                          return [
+                            dataCell,
+                            <Table.Cell
+                              key="__restore"
+                              className={cx('byline-coll-history-restore-cell', styles.restoreCell)}
+                            >
+                              {versionId && versionId !== currentVersionId ? (
+                                <Button
+                                  type="button"
+                                  variant="outlined"
+                                  size="xs"
+                                  intent="noeffect"
+                                  onClick={() =>
+                                    setRestoreTarget({
+                                      versionId,
+                                      label: new Date(document.createdAt).toLocaleString(),
+                                      versionNumber,
+                                    })
+                                  }
+                                  className={cx(
+                                    'byline-coll-history-restore-button',
+                                    styles.restoreButton
+                                  )}
+                                  title="Restore this version as the current draft"
+                                >
+                                  Restore
+                                </Button>
+                              ) : null}
+                            </Table.Cell>,
+                          ]
+                        }
+                        return [dataCell]
+                      })}
                     </Table.Row>
                   )
                 })}
@@ -350,6 +402,33 @@ export const HistoryView = ({
           />
         </Suspense>
       )}
+
+      <Modal
+        isOpen={restoreTarget != null}
+        onDismiss={() => setRestoreTarget(null)}
+        closeOnOverlayClick={false}
+      >
+        <Modal.Container className={cx('byline-coll-history-restore-modal', styles.restoreModal)}>
+          <Modal.Header
+            className={cx('byline-coll-history-restore-modal-head', styles.restoreModalHead)}
+          >
+            <h3 className="m-0">Restore version</h3>
+            <IconButton aria-label="Close" size="xs" onClick={() => setRestoreTarget(null)}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Modal.Header>
+          {restoreTarget ? (
+            <RestoreVersionModal
+              collection={collection}
+              documentId={id}
+              versionId={restoreTarget.versionId}
+              versionLabel={restoreTarget.label}
+              versionNumber={restoreTarget.versionNumber}
+              onClose={() => setRestoreTarget(null)}
+            />
+          ) : null}
+        </Modal.Container>
+      </Modal>
     </>
   )
 }

package/src/admin-shell/collections/list.tsx

@@ -20,9 +20,8 @@ import {
   Section,
   Select,
   Table,
-} from '@byline/ui'
-import { StatusBadge } from '@byline/ui/react/admin'
-import { renderFormatted } from '@byline/ui/react/fields'
+} from '@byline/ui/react'
+import { renderFormatted, StatusBadge } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { Link, useNavigate } from '../chrome/loose-router.js'

package/src/admin-shell/collections/preview-link.tsx

@@ -40,7 +40,7 @@
 import { useState } from 'react'
 
 import type { CollectionAdminConfig, PreviewDocument } from '@byline/core'
-import { ExternalLinkIcon, IconButton, useToastManager } from '@byline/ui'
+import { ExternalLinkIcon, IconButton, useToastManager } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { enablePreviewModeFn } from '../../server-fns/preview/index.js'

package/src/admin-shell/collections/restore-version-modal.module.css

@@ -0,0 +1,48 @@
+/**
+ * RestoreVersionModal — modal body for the "make current" action on the
+ * collection history view.
+ *
+ * Override handles:
+ *   .byline-coll-restore-content   — outer Modal.Content (gap)
+ *   .byline-coll-restore-body      — vertical stack of identity rows
+ *   .byline-coll-restore-warning   — warning paragraph
+ *   .byline-coll-restore-actions   — Cancel/Restore row
+ *   .byline-coll-restore-button    — action buttons (min-width)
+ */
+
+.content,
+:global(.byline-coll-restore-content) {
+  gap: 0.25rem;
+}
+
+.body,
+:global(.byline-coll-restore-body) {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.row,
+:global(.byline-coll-restore-row) {
+  margin: 0;
+}
+
+.warning,
+:global(.byline-coll-restore-warning) {
+  margin-top: 0.75rem;
+}
+
+.actions,
+:global(.byline-coll-restore-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.button,
+:global(.byline-coll-restore-button) {
+  min-width: 4rem;
+}

package/src/admin-shell/collections/restore-version-modal.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+/**
+ * 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
+ */
+
+/**
+ * Restore-version modal body.
+ *
+ * Confirmation dialog for the "make current" action on the history view.
+ * Calls the restore-version server fn, invalidates the router, and
+ * navigates to the document's edit view so the user lands on the freshly
+ * restored draft.
+ */
+
+import { useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import { Alert, Button, LoaderEllipsis, Modal } from '@byline/ui/react'
+import cx from 'classnames'
+
+import { restoreDocumentVersion } from '../../server-fns/collections/index.js'
+import { useNavigate } from '../chrome/loose-router.js'
+import styles from './restore-version-modal.module.css'
+
+interface RestoreVersionModalProps {
+  collection: string
+  documentId: string
+  versionId: string
+  versionLabel: string
+  versionNumber: number
+  onClose: () => void
+}
+
+export function RestoreVersionModal({
+  collection,
+  documentId,
+  versionId,
+  versionLabel,
+  versionNumber,
+  onClose,
+}: RestoreVersionModalProps) {
+  const navigate = useNavigate()
+  const router = useRouter()
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+
+  async function handleRestore() {
+    if (pending) return
+    setPending(true)
+    setError(null)
+    try {
+      await restoreDocumentVersion({
+        data: { collection, id: documentId, versionId },
+      })
+      onClose()
+      await router.invalidate()
+      navigate({
+        to: '/admin/collections/$collection/$id' as never,
+        params: { collection, id: documentId },
+      })
+    } catch (err) {
+      const code = getErrorCode(err)
+      if (code === 'ERR_INVALID_TRANSITION') {
+        setError('This version is already the current version of the document.')
+      } else if (code === 'ERR_NOT_FOUND') {
+        setError('The selected version could not be found. The history may be out of date.')
+      } else if (code === 'ERR_FORBIDDEN' || code === 'ERR_UNAUTHENTICATED') {
+        setError('You do not have permission to restore versions for this collection.')
+      } else {
+        setError('Could not restore this version. Please try again.')
+      }
+      setPending(false)
+    }
+  }
+
+  return (
+    <Modal.Content className={cx('byline-coll-restore-content', styles.content)}>
+      <div className={cx('byline-coll-restore-body', styles.body)}>
+        {error ? (
+          <Alert intent="danger" close={false}>
+            {error}
+          </Alert>
+        ) : null}
+        <p className={cx('byline-coll-restore-row', styles.row)}>
+          <span className="muted">Version:</span> {versionNumber}
+        </p>
+        <p className={cx('byline-coll-restore-row', styles.row)}>
+          <span className="muted">Created:</span> {versionLabel}
+        </p>
+        <p className={cx('byline-coll-restore-warning', styles.warning)}>
+          This will create a new draft version of this document with the content from version{' '}
+          {versionNumber}, and that draft will become the current version. The existing versions
+          (including any published version) are preserved in history. The restored draft will need
+          to be published through the normal workflow.
+        </p>
+      </div>
+      <div className={cx('byline-coll-restore-actions', styles.actions)}>
+        <Button
+          type="button"
+          intent="secondary"
+          size="sm"
+          onClick={onClose}
+          disabled={pending}
+          className={cx('byline-coll-restore-button', styles.button)}
+        >
+          Cancel
+        </Button>
+        <Button
+          size="sm"
+          intent="primary"
+          onClick={handleRestore}
+          disabled={pending}
+          className={cx('byline-coll-restore-button', styles.button)}
+        >
+          {pending === true ? <LoaderEllipsis size={42} /> : 'Restore as Draft'}
+        </Button>
+      </div>
+    </Modal.Content>
+  )
+}
+
+function getErrorCode(err: unknown): string | null {
+  return typeof (err as { code?: unknown })?.code === 'string'
+    ? (err as { code: string }).code
+    : null
+}

package/src/admin-shell/collections/tanstack-navigation-guard.ts

@@ -16,7 +16,7 @@
 import { useCallback } from 'react'
 import { useBlocker } from '@tanstack/react-router'
 
-import type { NavigationGuardResult, UseNavigationGuard } from '@byline/ui/react/forms'
+import type { NavigationGuardResult, UseNavigationGuard } from '@byline/ui/react'
 
 /**
  * Navigation guard backed by TanStack Router's `useBlocker`.

package/src/admin-shell/collections/view-menu.tsx

@@ -9,7 +9,7 @@
 import { useEffect } from 'react'
 
 import type { CollectionAdminConfig, PreviewDocument } from '@byline/core'
-import { Button, HistoryIcon, IconButton, Label, Select } from '@byline/ui'
+import { Button, HistoryIcon, IconButton, Label, Select } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { useNavigate } from '../chrome/loose-router.js'

package/src/integrations/byline-admin-services.ts

@@ -22,7 +22,7 @@
  * inside the host's deferred router-coupled containers.
  */
 
-import type { BylineAdminServices } from '@byline/ui/react/admin'
+import type { BylineAdminServices } from '@byline/ui/react'
 
 import { changeAccountPassword, updateAccount } from '../server-fns/admin-account/index.js'
 import { setRoleAbilities, whoHasAbility } from '../server-fns/admin-permissions/index.js'

package/src/integrations/byline-field-services.ts

@@ -16,11 +16,7 @@
  * @byline/ui surface is unchanged.
  */
 
-import type {
-  BylineFieldServices,
-  GetCollectionDocumentsFn,
-  UploadFieldFn,
-} from '@byline/ui/react/services'
+import type { BylineFieldServices, GetCollectionDocumentsFn, UploadFieldFn } from '@byline/ui/react'
 
 import { getCollectionDocuments as serverGetCollectionDocuments } from '../server-fns/collections/list.js'
 import { uploadField as serverUploadField } from '../server-fns/collections/upload.js'

package/src/routes/create-admin-account-route.tsx

@@ -8,8 +8,8 @@
 
 import { createFileRoute } from '@tanstack/react-router'
 
-import { Container, Section } from '@byline/ui'
-import { AccountSelfContainer } from '@byline/ui/react/admin'
+import { Container, Section } from '@byline/ui/react'
+import { AccountSelfContainer } from '@byline/ui/react'
 
 import { BreadcrumbsClient } from '../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js'
 import { type AccountResponse, getAccount } from '../server-fns/admin-account/index.js'

package/src/routes/create-admin-layout-route.tsx

@@ -21,8 +21,7 @@
 
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
 
-import { BylineAdminServicesProvider } from '@byline/ui/react/admin'
-import { BylineFieldServicesProvider } from '@byline/ui/react/services'
+import { BylineAdminServicesProvider, BylineFieldServicesProvider } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { AdminAppBar } from '../admin-shell/chrome/admin-app-bar.js'

package/src/routes/create-admin-permissions-route.tsx

@@ -8,7 +8,7 @@
 
 import { createFileRoute } from '@tanstack/react-router'
 
-import { AbilitiesInspector } from '@byline/ui/react/admin'
+import { AbilitiesInspector } from '@byline/ui/react'
 
 import { BreadcrumbsClient } from '../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js'
 import {

package/src/routes/create-admin-role-edit-route.tsx

@@ -8,7 +8,7 @@
 
 import { createFileRoute, notFound } from '@tanstack/react-router'
 
-import { Container, Section } from '@byline/ui'
+import { Container, Section } from '@byline/ui/react'
 
 import { RoleContainer } from '../admin-shell/admin-roles/container.js'
 import { BreadcrumbsClient } from '../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js'

package/src/routes/create-admin-user-edit-route.tsx

@@ -8,7 +8,7 @@
 
 import { createFileRoute, notFound } from '@tanstack/react-router'
 
-import { Container, Section } from '@byline/ui'
+import { Container, Section } from '@byline/ui/react'
 
 import { AccountContainer } from '../admin-shell/admin-users/container.js'
 import { BreadcrumbsClient } from '../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js'

package/src/routes/create-collection-list-route.tsx

@@ -15,7 +15,7 @@ import {
   getCollectionDefinition,
   getWorkflowStatuses,
 } from '@byline/core'
-import { useToastManager } from '@byline/ui'
+import { useToastManager } from '@byline/ui/react'
 import { z } from 'zod'
 
 import { BreadcrumbsClient } from '../admin-shell/chrome/breadcrumbs/breadcrumbs-client.js'

package/src/server-fns/collections/index.ts

@@ -10,6 +10,7 @@ export * from './delete'
 export * from './get'
 export * from './history'
 export * from './list'
+export * from './restore-version'
 export * from './stats'
 export * from './status'
 export * from './update'