@byline/host-tanstack-start 6.8.0 → 6.10.0

package/dist/admin-shell/singletons/view-menu.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 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 clsx from "clsx";
 import { getAdminRoutePath } from "../../routes/admin-path.js";
 import { useNavigate } from "../chrome/loose-router.js";
@@ -44,71 +44,86 @@ function SingletonViewMenu({ singleton, activeView, locale, contentLocales, defa
     return /*#__PURE__*/ jsxs("div", {
         className: clsx('byline-view-menu', view_menu_module.root),
         children: [
-            /*#__PURE__*/ jsx(Label, {
-                className: clsx('muted byline-view-menu-label', view_menu_module.label),
-                id: "contentLocaleLabel",
-                htmlFor: "contentLocale",
-                label: t('collections.viewMenu.contentLocaleLabel')
-            }),
-            /*#__PURE__*/ jsx(Select, {
-                name: "contentLocale",
-                id: "contentLocale",
-                className: clsx('byline-view-menu-locale-select', view_menu_module.localeSelect),
-                size: "xs",
-                variant: "outlined",
-                value: locale ?? defaultContentLocale,
-                items: [
-                    ...'history' === activeView ? [
-                        {
-                            value: 'all',
-                            label: t('collections.viewMenu.localeAll')
-                        }
-                    ] : [],
-                    ...contentLocales.map((entry)=>({
-                            value: entry.code,
-                            label: entry.label
-                        }))
-                ],
-                onValueChange: handleLocaleChange
-            }),
-            adminConfig?.preview != null && null != doc && /*#__PURE__*/ jsx(SingletonPreviewLink, {
-                doc: doc,
-                adminConfig: adminConfig,
-                locale: locale,
-                className: clsx('byline-view-menu-icon-button', view_menu_module.iconButton)
-            }),
-            /*#__PURE__*/ jsx(IconButton, {
-                className: clsx('byline-view-menu-icon-button', view_menu_module.iconButton),
-                size: "xs",
-                variant: 'history' === activeView ? 'filled' : 'text',
-                "aria-label": t('collections.breadcrumbs.history'),
-                onClick: ()=>navigate({
-                        to: getAdminRoutePath('singletons', '$singleton', 'history'),
-                        params: {
-                            singleton
-                        },
-                        search: locale ? {
-                            locale
-                        } : {}
+            /*#__PURE__*/ jsxs("div", {
+                className: clsx('byline-view-menu-data', view_menu_module.group),
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        className: clsx('muted byline-view-menu-label', view_menu_module.label),
+                        id: "contentLocaleLabel",
+                        htmlFor: "contentLocale",
+                        label: t('collections.viewMenu.contentLocaleLabel')
                     }),
-                children: /*#__PURE__*/ jsx(HistoryIcon, {
-                    className: clsx('byline-view-menu-icon-button-icon', view_menu_module.iconButtonIcon)
-                })
+                    /*#__PURE__*/ jsx(Select, {
+                        name: "contentLocale",
+                        id: "contentLocale",
+                        className: clsx('byline-view-menu-locale-select', view_menu_module.localeSelect),
+                        size: "xs",
+                        variant: "outlined",
+                        value: locale ?? defaultContentLocale,
+                        items: [
+                            ...'history' === activeView ? [
+                                {
+                                    value: 'all',
+                                    label: t('collections.viewMenu.localeAll')
+                                }
+                            ] : [],
+                            ...contentLocales.map((entry)=>({
+                                    value: entry.code,
+                                    label: entry.label
+                                }))
+                        ],
+                        onValueChange: handleLocaleChange
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsx(Button, {
-                size: "xs",
-                variant: 'edit' === activeView ? 'filled' : 'outlined',
-                className: clsx('byline-view-menu-button', view_menu_module.button),
-                onClick: ()=>navigate({
-                        to: getAdminRoutePath('singletons', '$singleton'),
-                        params: {
-                            singleton
-                        },
-                        search: locale ? {
-                            locale
-                        } : {}
+            /*#__PURE__*/ jsxs("div", {
+                className: clsx('byline-view-menu-nav', view_menu_module.group),
+                children: [
+                    adminConfig?.preview != null && null != doc && /*#__PURE__*/ jsx(SingletonPreviewLink, {
+                        doc: doc,
+                        adminConfig: adminConfig,
+                        locale: locale,
+                        className: clsx('byline-view-menu-icon-button', view_menu_module.iconButton)
+                    }),
+                    /*#__PURE__*/ jsx(Tooltip, {
+                        text: t('collections.breadcrumbs.history'),
+                        side: "bottom",
+                        delay: 0,
+                        children: /*#__PURE__*/ jsx(IconButton, {
+                            className: clsx('byline-view-menu-icon-button', view_menu_module.iconButton),
+                            size: "xs",
+                            variant: 'history' === activeView ? 'filled' : 'text',
+                            "aria-label": t('collections.breadcrumbs.history'),
+                            onClick: ()=>navigate({
+                                    to: getAdminRoutePath('singletons', '$singleton', 'history'),
+                                    params: {
+                                        singleton
+                                    },
+                                    search: locale ? {
+                                        locale
+                                    } : {}
+                                }),
+                            children: /*#__PURE__*/ jsx(HistoryIcon, {
+                                className: clsx('byline-view-menu-icon-button-icon', view_menu_module.iconButtonIcon)
+                            })
+                        })
                     }),
-                children: t('common.actions.edit')
+                    /*#__PURE__*/ jsx(Button, {
+                        size: "xs",
+                        variant: 'edit' === activeView ? 'filled' : 'outlined',
+                        className: clsx('byline-view-menu-button', view_menu_module.button),
+                        onClick: ()=>navigate({
+                                to: getAdminRoutePath('singletons', '$singleton'),
+                                params: {
+                                    singleton
+                                },
+                                search: locale ? {
+                                    locale
+                                } : {}
+                            }),
+                        children: t('common.actions.edit')
+                    })
+                ]
             })
         ]
     });

package/dist/admin-shell/singletons/view.js

@@ -26,6 +26,7 @@ function SingletonView({ singletonDefinition, adminConfig, document: loadedDocum
     const currentIndex = workflowStatuses.findIndex((status)=>status.name === currentStatus);
     const nextStatus = -1 !== currentIndex && currentIndex < workflowStatuses.length - 1 ? workflowStatuses[currentIndex + 1] : void 0;
     const publishedVersion = document?._publishedVersion ?? null;
+    const unavailableBlocks = document?._unavailableBlocks;
     const restoreWarnings = document?._restoreWarnings;
     const scheduledPublicationEnabled = document?._scheduledPublicationEnabled === true;
     const canSchedulePublication = document?._canSchedulePublication === true;
@@ -332,6 +333,7 @@ function SingletonView({ singletonDefinition, adminConfig, document: loadedDocum
                 contentLocales: null == document ? void 0 : contentLocales,
                 publishedVersion: null == document ? null : publishedVersion,
                 restoreWarnings: restoreWarnings,
+                unavailableBlocks: unavailableBlocks,
                 nextStatus: null == document ? void 0 : nextStatus,
                 workflowStatuses: null == document ? void 0 : workflowStatuses,
                 onCancel: ()=>navigate({

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

@@ -18,6 +18,7 @@
 export declare function getCollectionDocument(collection: string, id: string, locale?: string, depth?: number, populateRelations?: boolean): Promise<{
     revision: number;
     _publishedVersion: Record<string, any> | null;
+    _unavailableBlocks?: import("@byline/core").UnavailableBlock[] | undefined;
     _restoreWarnings?: string[] | undefined;
     availableLocales?: string[] | undefined;
     _availableVersionLocales?: string[] | undefined;

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

@@ -57,6 +57,7 @@ const getDocumentFn = createServerFn({
         }) : null;
     }
     const restoreWarnings = serialised._restoreWarnings;
+    const unavailableBlocks = document._unavailableBlocks;
     const availableLocales = serialised.availableLocales;
     const availableVersionLocales = serialised._availableVersionLocales;
     const scheduledPublicationEnabled = getServerConfig().scheduledPublication?.enabled === true;
@@ -71,6 +72,9 @@ const getDocumentFn = createServerFn({
     return {
         ...withEditableRevision(parsed, document),
         _publishedVersion: publishedVersion,
+        ...unavailableBlocks?.length ? {
+            _unavailableBlocks: unavailableBlocks
+        } : {},
         ...restoreWarnings && restoreWarnings.length > 0 ? {
             _restoreWarnings: restoreWarnings
         } : {},

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "6.8.0",
+  "version": "6.10.0",
   "engines": {
     "node": ">=22.22.2"
   },
@@ -119,15 +119,15 @@
     }
   },
   "dependencies": {
-    "@byline/admin": "6.8.0",
-    "@byline/ai": "6.8.0",
-    "@byline/analytics": "6.8.0",
-    "@byline/analytics-agent": "6.8.0",
-    "@byline/auth": "6.8.0",
-    "@byline/client": "6.8.0",
-    "@byline/core": "6.8.0",
-    "@byline/i18n": "6.8.0",
-    "@byline/ui": "6.8.0",
+    "@byline/admin": "6.10.0",
+    "@byline/ai": "6.10.0",
+    "@byline/analytics": "6.10.0",
+    "@byline/analytics-agent": "6.10.0",
+    "@byline/auth": "6.10.0",
+    "@byline/client": "6.10.0",
+    "@byline/core": "6.10.0",
+    "@byline/i18n": "6.10.0",
+    "@byline/ui": "6.10.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "clsx": "^2.1.1",
@@ -143,11 +143,11 @@
     "vite": "^8.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.15",
+    "@biomejs/biome": "2.6.2",
     "@rsbuild/plugin-react": "^2.1.1",
     "@rslib/core": "^1.0.3",
-    "@tanstack/react-router": "^1.170.44",
-    "@tanstack/react-start": "^1.169.2",
+    "@tanstack/react-router": "^1.170.45",
+    "@tanstack/react-start": "^1.169.3",
     "@types/node": "^26.6.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
@@ -158,8 +158,8 @@
     "react-dom": "^19.3.1",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^8.3.4",
-    "vitest": "^5.0.4"
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
   },
   "publishConfig": {
     "access": "public",

package/src/admin-shell/chrome/admin-app-bar.tsx

@@ -1,3 +1,5 @@
+'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
@@ -20,8 +22,6 @@ import { Branding } from './branding.js'
 import { Breadcrumbs } from './breadcrumbs/breadcrumbs.js'
 import { useBreadcrumbs } from './breadcrumbs/breadcrumbs-provider.js'
 
-;('use client')
-
 interface AdminAppBarProps {
   user: CurrentAdminUser
 }

package/src/admin-shell/chrome/dashboard.test.tsx

@@ -129,8 +129,8 @@ describe('AdminDashboard document resources', () => {
       routes: { admin: '/internal/cms' },
       collections: [articles, settings],
       admin: [
-        { slug: articles.path, group: 'content' },
-        { singleton: true, slug: settings.path, group: 'content' },
+        { path: articles.path, group: 'content' },
+        { singleton: true, path: settings.path, group: 'content' },
       ],
       collectionGroups: [{ name: 'content', label: 'Content' }],
       i18n: {

package/src/admin-shell/collections/api.test.tsx

@@ -0,0 +1,223 @@
+/**
+ * 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 { ComponentProps, ReactNode } from 'react'
+import { act } from 'react'
+
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({ toast: vi.fn(), writeText: vi.fn() }))
+vi.mock('@byline/ui/react', () => ({
+  Container: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Section: ({ children }: { children: ReactNode }) => <section>{children}</section>,
+  IconButton: ({
+    size: _size,
+    variant: _variant,
+    ...props
+  }: ComponentProps<'button'> & {
+    size?: string
+    variant?: string
+  }) => <button {...props} />,
+  Tooltip: ({ children }: { children: ReactNode }) => children,
+  CopyIcon: () => null,
+  DownloadIcon: () => null,
+  useToastManager: () => ({ add: mocks.toast }),
+}))
+vi.mock('./view-menu.js', () => ({
+  ViewMenu: ({ dataActions }: { dataActions?: ReactNode }) => <div>{dataActions}</div>,
+}))
+
+import { ApiView } from './api.js'
+
+const payload = {
+  id: 'document-1',
+  fields: {
+    title: 'Sample document',
+    content: [{ _type: 'text', children: [{ text: 'Hidden nested content' }] }],
+    related: { fields: { title: 'Populated relation' } },
+  },
+} as ComponentProps<typeof ApiView>['initialData']
+
+let container: HTMLDivElement
+let root: ReturnType<typeof createRoot>
+const originalURL = globalThis.URL
+const createObjectURL = vi.fn((_blob: Blob) => 'blob:test-json')
+const revokeObjectURL = vi.fn()
+
+// `locale: null` renders as a route without a locale search param.
+function render(data = payload, locale: string | null = 'en', depth = 0) {
+  act(() =>
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <ApiView
+          collectionDefinition={{
+            path: 'docs',
+            labels: { singular: 'Doc', plural: 'Docs' },
+            fields: [],
+          }}
+          initialData={data}
+          locale={locale ?? undefined}
+          depth={depth}
+          contentLocales={[
+            { code: 'en', label: 'English' },
+            { code: 'fr', label: 'French' },
+          ]}
+          defaultContentLocale="fr"
+        />
+      </I18nProvider>
+    )
+  )
+}
+
+async function click(label: string) {
+  const button = container.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`)
+  if (!button) throw new Error(`Button not found: ${label}`)
+  await act(async () => button.click())
+}
+
+function readBlob(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result))
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(blob)
+  })
+}
+
+beforeEach(() => {
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  vi.stubGlobal(
+    'URL',
+    Object.assign(class extends originalURL {}, { createObjectURL, revokeObjectURL })
+  )
+  vi.stubGlobal('navigator', { clipboard: { writeText: mocks.writeText } })
+  mocks.writeText.mockResolvedValue(undefined)
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+  vi.clearAllMocks()
+})
+
+describe('API document exports', () => {
+  it('copies the complete payload without expanding or mounting nested content', async () => {
+    render()
+    expect(container.textContent).not.toContain('Hidden nested content')
+    await click('Copy JSON')
+    expect(JSON.parse(mocks.writeText.mock.calls[0]?.[0])).toEqual(payload)
+    expect(container.textContent).not.toContain('Hidden nested content')
+    expect(mocks.toast).toHaveBeenCalledWith(expect.objectContaining({ title: 'JSON copied' }))
+  })
+
+  it('copies new data after a locale and population-depth reload', async () => {
+    render()
+    const reloaded = {
+      ...payload,
+      fields: { title: 'Français', related: { title: 'Relation française' } },
+    }
+    render(reloaded, 'fr', 2)
+    await click('Copy JSON')
+    expect(JSON.parse(mocks.writeText.mock.calls[0]?.[0])).toEqual(reloaded)
+  })
+
+  it('reports clipboard rejection without claiming success', async () => {
+    mocks.writeText.mockRejectedValue(new Error('Permission denied'))
+    render()
+    await click('Copy JSON')
+    expect(mocks.toast).toHaveBeenCalledTimes(1)
+    expect(mocks.toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Could not copy JSON. Try Download JSON.',
+      })
+    )
+    expect(container.querySelector('button')?.disabled).toBe(false)
+  })
+
+  it('offers download when the clipboard API is unavailable', async () => {
+    vi.stubGlobal('navigator', {})
+    render()
+    await click('Copy JSON')
+    expect(mocks.toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Could not copy JSON. Try Download JSON.',
+      })
+    )
+    expect(mocks.writeText).not.toHaveBeenCalled()
+  })
+
+  it('names a download after the default locale when the route has none', async () => {
+    vi.useFakeTimers()
+    let filename = ''
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (
+      this: HTMLAnchorElement
+    ) {
+      filename = this.download
+    })
+    render(payload, null)
+    await click('Download JSON')
+    expect(filename).toBe('docs-document-1-fr.json')
+  })
+
+  it('reports a download failure and releases the allocated URL', async () => {
+    vi.useFakeTimers()
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {
+      throw new Error('Download unavailable')
+    })
+    render()
+    await click('Download JSON')
+    expect(mocks.toast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Could not download JSON.',
+      })
+    )
+    expect(document.querySelector('a[download]')).toBeNull()
+    vi.advanceTimersByTime(1000)
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:test-json')
+  })
+
+  it('downloads complete current JSON and releases the temporary link and URL', async () => {
+    vi.useFakeTimers()
+    let filename = ''
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (
+      this: HTMLAnchorElement
+    ) {
+      filename = this.download
+      expect(this.isConnected).toBe(true)
+      expect(this.href).toBe('blob:test-json')
+    })
+    render()
+    const reloaded = { ...payload, fields: { title: 'Français', content: payload.fields.content } }
+    render(reloaded, 'fr', 2)
+    await click('Download JSON')
+    const blob = createObjectURL.mock.calls[0]?.[0] as Blob
+    expect(blob.type).toBe('application/json;charset=utf-8')
+    expect(filename).toBe('docs-document-1-fr-depth2.json')
+    expect(document.querySelector('a[download]')).toBeNull()
+    expect(revokeObjectURL).not.toHaveBeenCalled()
+    vi.advanceTimersByTime(1000)
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:test-json')
+    vi.useRealTimers()
+    expect(JSON.parse(await readBlob(blob))).toEqual(reloaded)
+    expect(container.textContent).not.toContain('Hidden nested content')
+  })
+})

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

@@ -6,10 +6,20 @@
  * Copyright (c) Infonomic Company Limited
  */
 
+import { useState } from 'react'
+
 import type { MultiCollectionDefinition } from '@byline/core'
 import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas'
 import { useTranslation } from '@byline/i18n/react'
-import { Container, Section } from '@byline/ui/react'
+import {
+  Container,
+  CopyIcon,
+  DownloadIcon,
+  IconButton,
+  Section,
+  Tooltip,
+  useToastManager,
+} from '@byline/ui/react'
 import cx from 'clsx'
 import { darkStyles, JsonView } from 'react-json-view-lite'
 
@@ -36,8 +46,12 @@ const expandToFirstLevel = (level: number): boolean => level < 2
 /**
  * JSON inspector view for a collection document.
  *
+ * Copy JSON and Download JSON render in the view menu's data group, beside the
+ * locale and depth controls whose selection they export.
+ *
  * Stable override handles: `.byline-api-section`, `.byline-api-container`,
- * `.byline-api-head`, `.byline-api-title`, `.byline-api-viewer`.
+ * `.byline-api-head`, `.byline-api-title`, `.byline-api-action`,
+ * `.byline-api-viewer`.
  */
 export const ApiView = ({
   collectionDefinition,
@@ -49,7 +63,7 @@ export const ApiView = ({
 }: {
   collectionDefinition: MultiCollectionDefinition
   initialData: AnyCollectionSchemaTypes['UpdateType']
-  /** Currently active locale from the route search param (undefined → all). */
+  /** Locale from the route search param (undefined → the default content locale). */
   locale?: string
   /** Populate depth from the route search param (undefined → 0, no populate). */
   depth?: number
@@ -58,6 +72,58 @@ export const ApiView = ({
 }) => {
   const { labels, path } = collectionDefinition
   const { t } = useTranslation('byline-admin')
+  const toastManager = useToastManager()
+  const [copyPending, setCopyPending] = useState(false)
+
+  // Serialize only on demand, from the complete loaded payload rather than
+  // the mounted tree. Collapsed branches remain part of both exports.
+  const copyJson = async () => {
+    setCopyPending(true)
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(initialData, null, 2))
+      toastManager.add({
+        title: t('collections.api.copied'),
+        data: { intent: 'success', iconType: 'success', icon: true, close: true },
+      })
+    } catch {
+      toastManager.add({
+        title: t('collections.api.copyFailed'),
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+    } finally {
+      setCopyPending(false)
+    }
+  }
+
+  const downloadJson = () => {
+    try {
+      const blob = new Blob([JSON.stringify(initialData, null, 2)], {
+        type: 'application/json;charset=utf-8',
+      })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      try {
+        link.href = url
+        // Name the selection, so exports of one document in different locales
+        // or population depths do not collide.
+        const selection = [path, String(initialData.id), locale ?? defaultContentLocale]
+        if (depth != null && depth > 0) selection.push(`depth${depth}`)
+        const filename = selection.join('-').replace(/[^a-zA-Z0-9_-]/g, '-')
+        link.download = `${filename}.json`
+        document.body.appendChild(link)
+        link.click()
+      } finally {
+        link.remove()
+        // Let the browser acquire the download before releasing its URL.
+        setTimeout(() => URL.revokeObjectURL(url), 1000)
+      }
+    } catch {
+      toastManager.add({
+        title: t('collections.api.downloadFailed'),
+        data: { intent: 'danger', iconType: 'danger', icon: true, close: true },
+      })
+    }
+  }
 
   return (
     <Section className={cx('byline-api-section', styles.section)}>
@@ -74,6 +140,35 @@ export const ApiView = ({
             depth={depth}
             contentLocales={contentLocales}
             defaultContentLocale={defaultContentLocale}
+            dataActions={
+              <>
+                <Tooltip text={t('collections.api.copyJson')} side="bottom" delay={0}>
+                  <IconButton
+                    type="button"
+                    size="xs"
+                    variant="text"
+                    className="byline-view-menu-icon-button byline-api-action"
+                    aria-label={t('collections.api.copyJson')}
+                    disabled={copyPending}
+                    onClick={copyJson}
+                  >
+                    <CopyIcon width="18px" height="18px" />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip text={t('collections.api.downloadJson')} side="bottom" delay={0}>
+                  <IconButton
+                    type="button"
+                    size="xs"
+                    variant="text"
+                    className="byline-view-menu-icon-button byline-api-action"
+                    aria-label={t('collections.api.downloadJson')}
+                    onClick={downloadJson}
+                  >
+                    <DownloadIcon width="20px" height="20px" />
+                  </IconButton>
+                </Tooltip>
+              </>
+            }
           />
         </div>
         <div className={cx('byline-api-viewer', styles.viewer)}>