@byline/host-tanstack-start 6.8.0 → 6.10.0

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

@@ -9,7 +9,11 @@
 import { useState } from 'react'
 
 import { FormRenderer } from '@byline/admin/react'
-import type { CollectionAdminConfig, MultiCollectionDefinition } from '@byline/core'
+import type {
+  CollectionAdminConfig,
+  MultiCollectionDefinition,
+  UnavailableBlock,
+} from '@byline/core'
 import {
   getDefaultStatus,
   getWorkflow,
@@ -321,6 +325,9 @@ export const EditView = ({
   // orphan row was skipped because the collection schema has moved on
   // since the document was written.
   // biome-ignore lint/suspicious/noExplicitAny: storage shape
+  const unavailableBlocks = (initialData as any)?._unavailableBlocks as
+    | UnavailableBlock[]
+    | undefined
   const restoreWarnings = (initialData as any)?._restoreWarnings as string[] | undefined
 
   const handleUnpublish = async () => {
@@ -854,6 +861,7 @@ export const EditView = ({
           contentLocales={contentLocales}
           publishedVersion={publishedVersion}
           restoreWarnings={restoreWarnings}
+          unavailableBlocks={unavailableBlocks}
           nextStatus={nextStatus}
           workflowStatuses={workflowStatuses}
           onCancel={() => {

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

@@ -47,7 +47,7 @@ import { useState } from 'react'
 
 import type { CollectionAdminConfig, PreviewDocument } 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'
@@ -110,16 +110,17 @@ export const PreviewLink = ({
   }
 
   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/collections/view-menu.module.css

@@ -2,21 +2,47 @@
  * ViewMenu — mini-nav bar for document-level views (Edit, History, API).
  *
  * Override handles:
- *   .byline-view-menu        — outer flex row
+ *   .byline-view-menu        — outer row; wraps between its two groups
+ *   .byline-view-menu-data   — locale/depth selects and the data actions that
+ *                              act on them (API view: Copy / Download JSON)
+ *   .byline-view-menu-nav    — preview link and view navigation
  *   .byline-view-menu-label  — locale/depth label (lg-only)
  *   .byline-view-menu-button — primary view buttons (Edit/API)
- *   .byline-view-menu-icon-button — history icon button
+ *   .byline-view-menu-icon-button — preview, history, and data-action icon buttons
  */
 
+/* Groups wrap as units, so a narrow viewport breaks the row between "what
+ * you are looking at" and "where you can go" rather than mid-group. The
+ * wider column gap marks the boundary when both groups share a line. */
 .root,
 :global(.byline-view-menu) {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.5rem 1.25rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
+/* Beside the heading (every host switches to a row at 40rem), keep a wrapped
+ * second line flush with the right edge rather than stranded under the
+ * heading's side of the menu. */
+@media (min-width: 40rem) {
+  .root,
+  :global(.byline-view-menu) {
+    justify-content: flex-end;
+  }
+}
+
+.group,
+:global(.byline-view-menu-data),
+:global(.byline-view-menu-nav) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .label,
 :global(.byline-view-menu-label) {
   display: none;

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/server-fns/collections/get.ts

@@ -120,6 +120,8 @@ const getDocumentFn = createServerFn({ method: 'GET' })
       | string[]
       | undefined
 
+    const unavailableBlocks = document._unavailableBlocks
+
     // Same preservation for the available-locales metadata — both are stripped
     // by the Zod parse but the sidebar widget needs them at edit time:
     //   `availableLocales`          — the stored editorial set → initialises the
@@ -155,6 +157,7 @@ const getDocumentFn = createServerFn({ method: 'GET' })
     return {
       ...withEditableRevision(parsed, document),
       _publishedVersion: publishedVersion,
+      ...(unavailableBlocks?.length ? { _unavailableBlocks: unavailableBlocks } : {}),
       ...(restoreWarnings && restoreWarnings.length > 0
         ? { _restoreWarnings: restoreWarnings }
         : {}),