@byline/host-tanstack-start 6.7.2 → 6.9.0

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

@@ -6,11 +6,12 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import type { ReactNode } from 'react'
 import { useEffect } from 'react'
 
 import type { CollectionAdminConfig, PreviewDocument } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
-import { Button, HistoryIcon, IconButton, Label, Select } from '@byline/ui/react'
+import { Button, HistoryIcon, IconButton, Label, Select, Tooltip } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { getAdminRoutePath } from '../../routes/admin-path.js'
@@ -51,6 +52,7 @@ export const ViewMenu = ({
   defaultContentLocale,
   adminConfig,
   doc,
+  dataActions,
 }: {
   /** Collection path (e.g. "docs", "news"). */
   collection: string
@@ -78,6 +80,12 @@ export const ViewMenu = ({
    * entirely (e.g. on the create route, where no doc exists yet).
    */
   doc?: PreviewDocument
+  /**
+   * Controls that act on the data selected by the locale and depth controls
+   * (the API view's Copy / Download JSON). Rendered first, in the same group
+   * as those controls, so they wrap together ahead of the view navigation.
+   */
+  dataActions?: ReactNode
 }) => {
   const navigate = useNavigate()
   const { t } = useTranslation('byline-admin')
@@ -141,103 +149,113 @@ export const ViewMenu = ({
 
   return (
     <div className={cx('byline-view-menu', styles.root)}>
-      <Label
-        className={cx('muted byline-view-menu-label', styles.label)}
-        id="contentLocaleLabel"
-        htmlFor="contentLocale"
-        label={t('collections.viewMenu.contentLocaleLabel')}
-      />
-      <Select<string>
-        name="contentLocale"
-        id="contentLocale"
-        className={cx('byline-view-menu-locale-select', styles.localeSelect)}
-        size="xs"
-        variant="outlined"
-        value={locale ?? defaultContentLocale}
-        items={[
-          ...(activeView !== 'edit'
-            ? [{ value: 'all', label: t('collections.viewMenu.localeAll') }]
-            : []),
-          ...contentLocales.map((loc) => ({ value: loc.code, label: loc.label })),
-        ]}
-        onValueChange={handleLocaleChange}
-      />
-      {activeView === 'api' && (
-        <>
-          <Label
-            className={cx('muted byline-view-menu-label', styles.label)}
-            id="populateDepthLabel"
-            htmlFor="populateDepth"
-            label={t('collections.viewMenu.depthLabel')}
+      <div className={cx('byline-view-menu-data', styles.group)}>
+        {dataActions}
+        <Label
+          className={cx('muted byline-view-menu-label', styles.label)}
+          id="contentLocaleLabel"
+          htmlFor="contentLocale"
+          label={t('collections.viewMenu.contentLocaleLabel')}
+        />
+        <Select<string>
+          name="contentLocale"
+          id="contentLocale"
+          className={cx('byline-view-menu-locale-select', styles.localeSelect)}
+          size="xs"
+          variant="outlined"
+          value={locale ?? defaultContentLocale}
+          items={[
+            ...(activeView !== 'edit'
+              ? [{ value: 'all', label: t('collections.viewMenu.localeAll') }]
+              : []),
+            ...contentLocales.map((loc) => ({ value: loc.code, label: loc.label })),
+          ]}
+          onValueChange={handleLocaleChange}
+        />
+        {activeView === 'api' && (
+          <>
+            <Label
+              className={cx('muted byline-view-menu-label', styles.label)}
+              id="populateDepthLabel"
+              htmlFor="populateDepth"
+              label={t('collections.viewMenu.depthLabel')}
+            />
+            <Select<string>
+              name="populateDepth"
+              id="populateDepth"
+              className={cx('byline-view-menu-depth-select', styles.depthSelect)}
+              size="xs"
+              variant="outlined"
+              value={String(depth ?? 0)}
+              items={[
+                { value: '0', label: '0' },
+                { value: '1', label: '1' },
+                { value: '2', label: '2' },
+                { value: '3', label: '3' },
+              ]}
+              onValueChange={handleDepthChange}
+            />
+          </>
+        )}
+      </div>
+      <div className={cx('byline-view-menu-nav', styles.group)}>
+        {doc && (
+          <PreviewLink
+            collectionPath={collection}
+            doc={doc}
+            adminConfig={adminConfig}
+            locale={locale}
+            className={cx('byline-view-menu-icon-button', styles.iconButton)}
           />
-          <Select<string>
-            name="populateDepth"
-            id="populateDepth"
-            className={cx('byline-view-menu-depth-select', styles.depthSelect)}
+        )}
+        <Tooltip text={t('collections.breadcrumbs.history')} side="bottom" delay={0}>
+          <IconButton
+            className={cx('byline-view-menu-icon-button', styles.iconButton)}
             size="xs"
-            variant="outlined"
-            value={String(depth ?? 0)}
-            items={[
-              { value: '0', label: '0' },
-              { value: '1', label: '1' },
-              { value: '2', label: '2' },
-              { value: '3', label: '3' },
-            ]}
-            onValueChange={handleDepthChange}
-          />
-        </>
-      )}
-      {doc && (
-        <PreviewLink
-          collectionPath={collection}
-          doc={doc}
-          adminConfig={adminConfig}
-          locale={locale}
-          className={cx('byline-view-menu-icon-button', styles.iconButton)}
-        />
-      )}
-      <IconButton
-        className={cx('byline-view-menu-icon-button', styles.iconButton)}
-        size="xs"
-        variant={activeView === 'history' ? 'filled' : 'text'}
-        onClick={() =>
-          navigate({
-            to: getAdminRoutePath('collections', '$collection', '$id', 'history'),
-            params: { collection, id: documentId },
-            search: locale ? { locale } : {},
-          })
-        }
-      >
-        <HistoryIcon className={cx('byline-view-menu-icon-button-icon', styles.iconButtonIcon)} />
-      </IconButton>
-      <Button
-        size="xs"
-        variant={activeView === 'edit' ? 'filled' : 'outlined'}
-        className={cx('byline-view-menu-button', styles.button)}
-        onClick={() =>
-          navigate({
-            to: getAdminRoutePath('collections', '$collection', '$id'),
-            params: { collection, id: documentId },
-            search: locale ? { locale } : {},
-          })
-        }
-      >
-        {t('common.actions.edit')}
-      </Button>
-      <Button
-        size="xs"
-        variant={activeView === 'api' ? 'filled' : 'outlined'}
-        className={cx('byline-view-menu-button', styles.button)}
-        onClick={() =>
-          navigate({
-            to: getAdminRoutePath('collections', '$collection', '$id', 'api'),
-            params: { collection, id: documentId },
-            search: locale ? { locale } : {},
-          })
-        }
-      >
-        {t('collections.viewMenu.apiButton')}
-      </Button>
+            variant={activeView === 'history' ? 'filled' : 'text'}
+            aria-label={t('collections.breadcrumbs.history')}
+            onClick={() =>
+              navigate({
+                to: getAdminRoutePath('collections', '$collection', '$id', 'history'),
+                params: { collection, id: documentId },
+                search: locale ? { locale } : {},
+              })
+            }
+          >
+            <HistoryIcon
+              className={cx('byline-view-menu-icon-button-icon', styles.iconButtonIcon)}
+            />
+          </IconButton>
+        </Tooltip>
+        <Button
+          size="xs"
+          variant={activeView === 'edit' ? 'filled' : 'outlined'}
+          className={cx('byline-view-menu-button', styles.button)}
+          onClick={() =>
+            navigate({
+              to: getAdminRoutePath('collections', '$collection', '$id'),
+              params: { collection, id: documentId },
+              search: locale ? { locale } : {},
+            })
+          }
+        >
+          {t('common.actions.edit')}
+        </Button>
+        <Button
+          size="xs"
+          variant={activeView === 'api' ? 'filled' : 'outlined'}
+          className={cx('byline-view-menu-button', styles.button)}
+          onClick={() =>
+            navigate({
+              to: getAdminRoutePath('collections', '$collection', '$id', 'api'),
+              params: { collection, id: documentId },
+              search: locale ? { locale } : {},
+            })
+          }
+        >
+          {t('collections.viewMenu.apiButton')}
+        </Button>
+      </div>
     </div>
   )
 }

package/src/admin-shell/scheduled-publications/list.tsx

@@ -1,7 +1,4 @@
-import { DocumentMutationNotice } from '../document-mutation-notice.js'
-import { useDocumentMutationState } from '../document-mutation-state.js'
-
-;('use client')
+'use client'
 
 /**
  * This Source Code is subject to the terms of the Mozilla Public
@@ -32,6 +29,8 @@ import { getAdminRoutePath } from '../../routes/admin-path.js'
 import { cancelCollectionDocumentScheduledPublish } from '../../server-fns/collections/index.js'
 import { Link, useNavigate } from '../chrome/loose-router.js'
 import { RouterPager } from '../chrome/router-pager.js'
+import { DocumentMutationNotice } from '../document-mutation-notice.js'
+import { useDocumentMutationState } from '../document-mutation-state.js'
 import styles from './list.module.css'
 import type { ScheduledPublicationListResponse } from '../../server-fns/collections/index.js'
 

package/src/admin-shell/singletons/history.test.tsx

@@ -372,7 +372,7 @@ describe('singleton version history', () => {
       <HistoryView
         collectionDefinition={collectionDefinition}
         adminConfig={{
-          slug: 'articles',
+          path: 'articles',
           columns: [{ fieldName: 'title', label: 'Title' }],
         }}
         data={data as never}

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

@@ -12,7 +12,7 @@ import { useState } from 'react'
 
 import type { SingletonAdminConfig, SingletonPreviewDocument } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
-import { ExternalLinkIcon, IconButton, useToastManager } from '@byline/ui/react'
+import { ExternalLinkIcon, IconButton, Tooltip, useToastManager } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { enablePreviewModeFn } from '../../server-fns/preview/index.js'
@@ -60,16 +60,17 @@ export function SingletonPreviewLink({
   }
 
   return (
-    <IconButton
-      className={cx('byline-preview-link', className)}
-      size="xs"
-      variant="text"
-      disabled={busy}
-      onClick={handleClick}
-      aria-label={t('collections.preview.openAriaLabel')}
-      title={t('collections.preview.title')}
-    >
-      <ExternalLinkIcon width="20px" height="20px" className="byline-preview-link-icon" />
-    </IconButton>
+    <Tooltip text={t('collections.preview.title')} side="bottom" delay={0}>
+      <IconButton
+        className={cx('byline-preview-link', className)}
+        size="xs"
+        variant="text"
+        disabled={busy}
+        onClick={handleClick}
+        aria-label={t('collections.preview.openAriaLabel')}
+      >
+        <ExternalLinkIcon width="20px" height="20px" className="byline-preview-link-icon" />
+      </IconButton>
+    </Tooltip>
   )
 }

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

@@ -12,7 +12,7 @@ import { useEffect } from 'react'
 
 import type { SingletonAdminConfig, SingletonPreviewDocument } from '@byline/core'
 import { useTranslation } from '@byline/i18n/react'
-import { Button, HistoryIcon, IconButton, Label, Select } from '@byline/ui/react'
+import { Button, HistoryIcon, IconButton, Label, Select, Tooltip } from '@byline/ui/react'
 import cx from 'clsx'
 
 import { getAdminRoutePath } from '../../routes/admin-path.js'
@@ -71,66 +71,72 @@ export function SingletonViewMenu({
 
   return (
     <div className={cx('byline-view-menu', collectionStyles.root)}>
-      <Label
-        className={cx('muted byline-view-menu-label', collectionStyles.label)}
-        id="contentLocaleLabel"
-        htmlFor="contentLocale"
-        label={t('collections.viewMenu.contentLocaleLabel')}
-      />
-      <Select<string>
-        name="contentLocale"
-        id="contentLocale"
-        className={cx('byline-view-menu-locale-select', collectionStyles.localeSelect)}
-        size="xs"
-        variant="outlined"
-        value={locale ?? defaultContentLocale}
-        items={[
-          ...(activeView === 'history'
-            ? [{ value: 'all', label: t('collections.viewMenu.localeAll') }]
-            : []),
-          ...contentLocales.map((entry) => ({ value: entry.code, label: entry.label })),
-        ]}
-        onValueChange={handleLocaleChange}
-      />
-      {adminConfig?.preview != null && doc != null && (
-        <SingletonPreviewLink
-          doc={doc}
-          adminConfig={adminConfig}
-          locale={locale}
-          className={cx('byline-view-menu-icon-button', collectionStyles.iconButton)}
+      <div className={cx('byline-view-menu-data', collectionStyles.group)}>
+        <Label
+          className={cx('muted byline-view-menu-label', collectionStyles.label)}
+          id="contentLocaleLabel"
+          htmlFor="contentLocale"
+          label={t('collections.viewMenu.contentLocaleLabel')}
         />
-      )}
-      <IconButton
-        className={cx('byline-view-menu-icon-button', collectionStyles.iconButton)}
-        size="xs"
-        variant={activeView === 'history' ? 'filled' : 'text'}
-        aria-label={t('collections.breadcrumbs.history')}
-        onClick={() =>
-          navigate({
-            to: getAdminRoutePath('singletons', '$singleton', 'history'),
-            params: { singleton },
-            search: locale ? { locale } : {},
-          })
-        }
-      >
-        <HistoryIcon
-          className={cx('byline-view-menu-icon-button-icon', collectionStyles.iconButtonIcon)}
+        <Select<string>
+          name="contentLocale"
+          id="contentLocale"
+          className={cx('byline-view-menu-locale-select', collectionStyles.localeSelect)}
+          size="xs"
+          variant="outlined"
+          value={locale ?? defaultContentLocale}
+          items={[
+            ...(activeView === 'history'
+              ? [{ value: 'all', label: t('collections.viewMenu.localeAll') }]
+              : []),
+            ...contentLocales.map((entry) => ({ value: entry.code, label: entry.label })),
+          ]}
+          onValueChange={handleLocaleChange}
         />
-      </IconButton>
-      <Button
-        size="xs"
-        variant={activeView === 'edit' ? 'filled' : 'outlined'}
-        className={cx('byline-view-menu-button', collectionStyles.button)}
-        onClick={() =>
-          navigate({
-            to: getAdminRoutePath('singletons', '$singleton'),
-            params: { singleton },
-            search: locale ? { locale } : {},
-          })
-        }
-      >
-        {t('common.actions.edit')}
-      </Button>
+      </div>
+      <div className={cx('byline-view-menu-nav', collectionStyles.group)}>
+        {adminConfig?.preview != null && doc != null && (
+          <SingletonPreviewLink
+            doc={doc}
+            adminConfig={adminConfig}
+            locale={locale}
+            className={cx('byline-view-menu-icon-button', collectionStyles.iconButton)}
+          />
+        )}
+        <Tooltip text={t('collections.breadcrumbs.history')} side="bottom" delay={0}>
+          <IconButton
+            className={cx('byline-view-menu-icon-button', collectionStyles.iconButton)}
+            size="xs"
+            variant={activeView === 'history' ? 'filled' : 'text'}
+            aria-label={t('collections.breadcrumbs.history')}
+            onClick={() =>
+              navigate({
+                to: getAdminRoutePath('singletons', '$singleton', 'history'),
+                params: { singleton },
+                search: locale ? { locale } : {},
+              })
+            }
+          >
+            <HistoryIcon
+              className={cx('byline-view-menu-icon-button-icon', collectionStyles.iconButtonIcon)}
+            />
+          </IconButton>
+        </Tooltip>
+        <Button
+          size="xs"
+          variant={activeView === 'edit' ? 'filled' : 'outlined'}
+          className={cx('byline-view-menu-button', collectionStyles.button)}
+          onClick={() =>
+            navigate({
+              to: getAdminRoutePath('singletons', '$singleton'),
+              params: { singleton },
+              search: locale ? { locale } : {},
+            })
+          }
+        >
+          {t('common.actions.edit')}
+        </Button>
+      </div>
     </div>
   )
 }

package/src/admin-shell/singletons/view.test.tsx

@@ -142,7 +142,7 @@ const singleton = defineSingleton({
 
 const adminConfig = {
   singleton: true as const,
-  slug: singleton.path,
+  path: singleton.path,
   preview: { url: () => '/preview-settings' },
 }
 
@@ -181,7 +181,7 @@ let root: Root
 function view(
   currentDocument: typeof loadedDocument | null,
   locale = 'en',
-  config: typeof adminConfig | { singleton: true; slug: string } = adminConfig
+  config: typeof adminConfig | { singleton: true; path: string } = adminConfig
 ) {
   return (
     <I18nProvider
@@ -208,7 +208,7 @@ function view(
 function render(
   currentDocument: typeof loadedDocument | null,
   locale = 'en',
-  config: typeof adminConfig | { singleton: true; slug: string } = adminConfig
+  config: typeof adminConfig | { singleton: true; path: string } = adminConfig
 ) {
   act(() => root.render(view(currentDocument, locale, config)))
 }
@@ -332,7 +332,7 @@ describe('SingletonView', () => {
   })
 
   it('never derives a singleton preview from its internal stored path', () => {
-    render(loadedDocument, 'en', { singleton: true, slug: singleton.path })
+    render(loadedDocument, 'en', { singleton: true, path: singleton.path })
 
     expect(container.querySelector('.byline-view-menu')).not.toBeNull()
     expect(container.querySelector('.byline-preview-link')).toBeNull()

package/src/admin-shell/singletons/view.tsx

@@ -11,7 +11,7 @@
 import { useRouter } from '@tanstack/react-router'
 
 import { FormRenderer } from '@byline/admin/react'
-import type { SingletonAdminConfig, SingletonDefinition } from '@byline/core'
+import type { SingletonAdminConfig, SingletonDefinition, UnavailableBlock } from '@byline/core'
 import {
   getDefaultStatus,
   getWorkflow,
@@ -82,6 +82,7 @@ export function SingletonView({
       ? workflowStatuses[currentIndex + 1]
       : undefined
   const publishedVersion = document?._publishedVersion ?? null
+  const unavailableBlocks = document?._unavailableBlocks as UnavailableBlock[] | undefined
   const restoreWarnings = document?._restoreWarnings as string[] | undefined
   const scheduledPublicationEnabled = document?._scheduledPublicationEnabled === true
   const canSchedulePublication = document?._canSchedulePublication === true
@@ -441,6 +442,7 @@ export function SingletonView({
           contentLocales={document == null ? undefined : contentLocales}
           publishedVersion={document == null ? null : publishedVersion}
           restoreWarnings={restoreWarnings}
+          unavailableBlocks={unavailableBlocks}
           nextStatus={document == null ? undefined : nextStatus}
           workflowStatuses={document == null ? undefined : workflowStatuses}
           onCancel={() => navigate({ to: getAdminRoutePath() })}

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

@@ -36,6 +36,7 @@ import {
 import { adminSignIn } from '../server-fns/auth/index.js'
 import { getCollectionDocumentVersion as serverGetCollectionDocumentVersion } from '../server-fns/collections/get.js'
 import { setAdminLocaleFn } from '../server-fns/i18n/index.js'
+import { passkeyAdminServices } from './passkey-admin-services.js'
 import { acceptSession, coordinateAuthAction, notifySessionAction } from './session-coordination.js'
 
 /**
@@ -70,6 +71,8 @@ export const bylineAdminServices: BylineAdminServices = {
     return result
   },
 
+  passkeys: passkeyAdminServices,
+
   // Account self-service
   updateAccount,
   changeAccountPassword,

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

@@ -0,0 +1,85 @@
+/**
+ * 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 { PasskeyAdminServices } from '@byline/admin/services'
+
+import {
+  getPasskeyCapability,
+  passkeyEnrollment,
+  passkeyEnrollmentOptions,
+  passkeyList,
+  passkeyManagementContext,
+  passkeyPasswordProof,
+  passkeyProof,
+  passkeyProofOptions,
+  passkeyRemove,
+  passkeyRename,
+  passkeySignIn,
+  passkeySignInOptions,
+} from '../server-fns/auth/passkeys.js'
+import {
+  acceptSession,
+  coordinateAuthAction,
+  flagSessionChanged,
+  notifySessionAction,
+  requireUnchanged,
+  sessionChangedError,
+  sessionSnapshot,
+} from './session-coordination.js'
+
+export const passkeyAdminServices: PasskeyAdminServices = {
+  capability: () => getPasskeyCapability(),
+  captureLogin: (signIn = false) => {
+    const snapshot = sessionSnapshot()
+    const assertCurrent = () => {
+      if (!signIn) return requireUnchanged(snapshot)
+      // Explicit reauthentication may begin on an already flagged page, but any
+      // subsequent account change still invalidates this particular ceremony.
+      const current = sessionSnapshot()
+      if (current.epoch !== snapshot.epoch || current.sessionId !== snapshot.sessionId)
+        throw sessionChangedError()
+    }
+    assertCurrent()
+    return { expectedSessionId: snapshot.sessionId, assertCurrent }
+  },
+  managementContext: async (binding) => {
+    binding.assertCurrent()
+    if (!binding.expectedSessionId) throw sessionChangedError()
+    const actor = await passkeyManagementContext({
+      data: { expectedSessionId: binding.expectedSessionId },
+    })
+    binding.assertCurrent()
+    return actor
+  },
+  signInOptions: passkeySignInOptions,
+  signIn: (args, binding) =>
+    coordinateAuthAction(async () => {
+      binding.assertCurrent()
+      const result = await passkeySignIn(args)
+      acceptSession(result.sessionId)
+      notifySessionAction()
+      return result
+    }),
+  passwordProof: passkeyPasswordProof,
+  proofOptions: passkeyProofOptions,
+  proof: passkeyProof,
+  enrollmentOptions: passkeyEnrollmentOptions,
+  enrollment: passkeyEnrollment,
+  list: passkeyList,
+  rename: passkeyRename,
+  remove: async (args) => {
+    // The mutation middleware queues its fetch, including cookie application;
+    // it releases the queue before a pre-handler renewal can acquire it.
+    const result = await passkeyRemove(args)
+    if (result.signedOut) {
+      flagSessionChanged()
+      notifySessionAction()
+    }
+    return result
+  },
+}