@byline/admin 6.2.0 → 6.2.1

package/dist/forms/use-form-submission.d.ts

@@ -0,0 +1,74 @@
+import type { Field } from '@byline/core';
+import type { DocumentPatch } from '@byline/core/patches';
+/**
+ * Payload emitted by the form on Save. Carries the content (field data +
+ * patches) alongside the document-grain system fields (path / advertised
+ * locales) and per-bucket dirty flags so the host can route each piece to the
+ * right write path — versioned for content, immediate/non-versioned for the
+ * system fields. See docs/08-internationalization/index.md.
+ */
+export interface SystemFieldsSubmitPayload {
+    data: any;
+    patches: DocumentPatch[];
+    contentDirty: boolean;
+    pathDirty: boolean;
+    systemPath?: string | null;
+    availableLocalesDirty: boolean;
+    systemAvailableLocales?: string[];
+}
+/**
+ * Where a save has got to. Mutually exclusive by construction: the form cannot
+ * be validating and uploading at once, which two independent booleans allowed.
+ */
+export type SubmissionPhase = {
+    kind: 'idle';
+} | {
+    kind: 'validating';
+} | {
+    kind: 'uploading';
+} | {
+    kind: 'confirmingSystemFields';
+    payload: SystemFieldsSubmitPayload;
+} | {
+    kind: 'submitting';
+};
+export interface UseFormSubmissionOptions {
+    mode: 'create' | 'edit';
+    fields: Field[];
+    /** Persisted document id (edit mode only); feeds server-side upload hooks. */
+    documentId?: string;
+    /**
+     * Only collections that opted into the advertised-locale widget emit the
+     * locale set, so the write path never touches
+     * `byline_document_available_locales` for the others.
+     */
+    advertiseLocales?: boolean;
+    onSubmit: (payload: SystemFieldsSubmitPayload) => void | Promise<void>;
+    /** Mutations blocked (stale/lock/discarding). Read synchronously, per call. */
+    isBlocked: () => boolean;
+    /**
+     * Called immediately before the form becomes `inert` — once before uploads
+     * and once before submission — so the caller can record the focused element
+     * and restore it when busy ends. The DOM refs stay in the component; the
+     * hook only signals the transition.
+     */
+    onBeforeBusy?: () => void;
+}
+export interface UseFormSubmissionResult {
+    phase: SubmissionPhase;
+    isBusy: boolean;
+    submit: () => Promise<void>;
+    confirmSystemFields: () => Promise<void>;
+    cancelSystemFields: () => void;
+}
+/**
+ * Owns one save: validate → upload → (confirm) → submit.
+ *
+ * Admission is decided by a ref, not by `phase`. Rendered state is not a
+ * re-entry guard: two `submit()` calls in the same turn both observe
+ * `phase.kind === 'idle'` because React has not rerendered between them. The
+ * ref is set synchronously at the top of `submit()` and cleared in `finally`,
+ * spanning validation through submission — the whole window, not just the
+ * final request. `phase` drives the UI; the ref decides admission.
+ */
+export declare function useFormSubmission(options: UseFormSubmissionOptions): UseFormSubmissionResult;

package/dist/forms/use-form-submission.js

@@ -0,0 +1,166 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { useBylineFieldServices } from "../fields/field-services-context.js";
+import { useFormContext } from "./form-context.js";
+import { executeUploadsWithProgress } from "./upload-executor.js";
+const IDLE = {
+    kind: 'idle'
+};
+function useFormSubmission(options) {
+    const { mode, fields, documentId, advertiseLocales, onSubmit, isBlocked, onBeforeBusy } = options;
+    const { getFieldValues, runFieldHooks, validateForm, resetHasChanges, getPatches, getDirtyBreakdown, getSystemPath, getSystemAvailableLocales, setFieldValue, setFieldError, getPendingUploads, clearPendingUploads, setFieldUploading } = useFormContext();
+    const { t } = useTranslation('byline-admin');
+    const { uploadField } = useBylineFieldServices();
+    const [phase, setPhase] = useState(IDLE);
+    const inFlightRef = useRef(false);
+    const isBusy = 'uploading' === phase.kind || 'submitting' === phase.kind;
+    const deliver = useCallback(async (payload)=>{
+        if (isBlocked() || 'function' != typeof onSubmit) return void setPhase(IDLE);
+        onBeforeBusy?.();
+        setPhase({
+            kind: 'submitting'
+        });
+        try {
+            await onSubmit(payload);
+            resetHasChanges();
+        } catch  {} finally{
+            setPhase(IDLE);
+        }
+    }, [
+        isBlocked,
+        onBeforeBusy,
+        onSubmit,
+        resetHasChanges
+    ]);
+    const runUploads = useCallback(async ()=>{
+        const pendingUploads = getPendingUploads();
+        if (0 === pendingUploads.size) return true;
+        onBeforeBusy?.();
+        setPhase({
+            kind: 'uploading'
+        });
+        try {
+            const uploadResult = await executeUploadsWithProgress(pendingUploads, uploadField, ({ fieldPath, status })=>{
+                setFieldUploading(fieldPath, 'uploading' === status);
+            }, {
+                documentId: 'edit' === mode ? documentId : void 0,
+                fields,
+                getFormValues: getFieldValues
+            });
+            if (!uploadResult.allSucceeded) {
+                for (const [fieldPath, errorMessage] of uploadResult.errors.entries())setFieldError(fieldPath, t('forms.uploadFailedFieldError', {
+                    message: errorMessage
+                }));
+                console.error('One or more uploads failed:', uploadResult.errors);
+                return false;
+            }
+            for (const [fieldPath, storedFile] of uploadResult.successful.entries())setFieldValue(fieldPath, storedFile);
+            clearPendingUploads();
+            return true;
+        } catch (err) {
+            console.error('Upload execution error:', err);
+            return false;
+        }
+    }, [
+        clearPendingUploads,
+        documentId,
+        fields,
+        getFieldValues,
+        getPendingUploads,
+        mode,
+        onBeforeBusy,
+        setFieldError,
+        setFieldUploading,
+        setFieldValue,
+        t,
+        uploadField
+    ]);
+    const buildPayload = useCallback(()=>{
+        const { contentDirty, pathDirty, availableLocalesDirty, reason } = getDirtyBreakdown();
+        return {
+            reason,
+            payload: {
+                data: getFieldValues(),
+                patches: getPatches(),
+                contentDirty,
+                pathDirty,
+                systemPath: getSystemPath(),
+                availableLocalesDirty,
+                systemAvailableLocales: advertiseLocales ? getSystemAvailableLocales() : void 0
+            }
+        };
+    }, [
+        advertiseLocales,
+        getDirtyBreakdown,
+        getFieldValues,
+        getPatches,
+        getSystemAvailableLocales,
+        getSystemPath
+    ]);
+    const submit = useCallback(async ()=>{
+        if (isBlocked()) return;
+        if (inFlightRef.current) return;
+        inFlightRef.current = true;
+        try {
+            setPhase({
+                kind: 'validating'
+            });
+            const hookErrors = await runFieldHooks(fields);
+            const formErrors = validateForm(fields);
+            const allErrors = [
+                ...hookErrors,
+                ...formErrors
+            ];
+            if (allErrors.length > 0) {
+                console.error('Form validation failed:', allErrors);
+                setPhase(IDLE);
+                return;
+            }
+            if (isBlocked()) return void setPhase(IDLE);
+            if (!await runUploads()) return void setPhase(IDLE);
+            const { payload, reason } = buildPayload();
+            if ('edit' === mode && ('direct-write' === reason || 'both' === reason)) return void setPhase({
+                kind: 'confirmingSystemFields',
+                payload
+            });
+            await deliver(payload);
+        } finally{
+            inFlightRef.current = false;
+        }
+    }, [
+        buildPayload,
+        deliver,
+        fields,
+        isBlocked,
+        mode,
+        runUploads,
+        runFieldHooks,
+        validateForm
+    ]);
+    const confirmSystemFields = useCallback(async ()=>{
+        if ('confirmingSystemFields' !== phase.kind) return;
+        if (inFlightRef.current) return;
+        inFlightRef.current = true;
+        const { payload } = phase;
+        try {
+            await deliver(payload);
+        } finally{
+            inFlightRef.current = false;
+        }
+    }, [
+        deliver,
+        phase
+    ]);
+    const cancelSystemFields = useCallback(()=>{
+        setPhase((current)=>'confirmingSystemFields' === current.kind ? IDLE : current);
+    }, []);
+    return {
+        phase,
+        isBusy,
+        submit,
+        confirmSystemFields,
+        cancelSystemFields
+    };
+}
+export { useFormSubmission };

package/dist/forms/use-form-tabs.d.ts

@@ -0,0 +1,29 @@
+import type { TabDefinition, TabSetDefinition } from '@byline/core';
+/** One tab set, resolved against live form data and current errors. */
+export interface ResolvedTabSet {
+    /** Tabs whose `condition` is satisfied, in declaration order. */
+    visibleTabs: TabDefinition[];
+    /** The tab that should render, after falling back off a hidden selection. */
+    activeTabName: string;
+    activeTab: TabDefinition | undefined;
+    /** Error count per tab name, for the tab bar's badges. */
+    errorCounts: Record<string, number> | undefined;
+}
+export interface UseFormTabsResult {
+    resolve: (set: TabSetDefinition) => ResolvedTabSet;
+    errorCountsBySet: Record<string, Record<string, number>>;
+}
+/**
+ * Tab visibility, per-tab error counts, and fallback when the selected tab is
+ * hidden.
+ *
+ * It deliberately does **not** own the selection. `FormRenderer` lifts that
+ * above the keyed `FormProvider` so the editor's tab choices survive the
+ * remount a locale change triggers; a hook living inside that subtree would
+ * lose them on every switch. The selection arrives as `activeTabBySet` and
+ * changes are reported upward.
+ */
+export declare function useFormTabs(fieldToTabPath: Map<string, {
+    tabSetName: string;
+    tabName: string;
+}>, activeTabBySet: Record<string, string>): UseFormTabsResult;

package/dist/forms/use-form-tabs.js

@@ -0,0 +1,45 @@
+"use client";
+import { useEffect, useMemo, useState } from "react";
+import { useFormContext } from "./form-context.js";
+function useFormTabs(fieldToTabPath, activeTabBySet) {
+    const { errors: initialErrors, subscribeErrors, subscribeMeta, getFieldValues } = useFormContext();
+    const [errors, setErrors] = useState(initialErrors);
+    useEffect(()=>subscribeErrors((newErrors)=>setErrors(newErrors)), [
+        subscribeErrors
+    ]);
+    const [formData, setFormData] = useState(()=>getFieldValues());
+    useEffect(()=>subscribeMeta(()=>setFormData(getFieldValues())), [
+        subscribeMeta,
+        getFieldValues
+    ]);
+    const errorCountsBySet = useMemo(()=>{
+        const result = {};
+        for (const err of errors){
+            const path = fieldToTabPath.get(err.field);
+            if (path) {
+                result[path.tabSetName] ??= {};
+                result[path.tabSetName][path.tabName] = (result[path.tabSetName]?.[path.tabName] ?? 0) + 1;
+            }
+        }
+        return result;
+    }, [
+        errors,
+        fieldToTabPath
+    ]);
+    const resolve = (set)=>{
+        const visibleTabs = set.tabs.filter((tab)=>!tab.condition || tab.condition(formData));
+        const requested = activeTabBySet[set.name] ?? '';
+        const activeTabName = visibleTabs.length > 0 && !visibleTabs.some((t)=>t.name === requested) ? visibleTabs[0]?.name ?? requested : requested;
+        return {
+            visibleTabs,
+            activeTabName,
+            activeTab: visibleTabs.find((t)=>t.name === activeTabName),
+            errorCounts: errorCountsBySet[set.name]
+        };
+    };
+    return {
+        resolve,
+        errorCountsBySet
+    };
+}
+export { useFormTabs };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -183,12 +183,12 @@
     "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.2",
     "zod": "^4.6.2",
-    "@byline/analytics": "6.2.0",
-    "@byline/analytics-agent": "6.2.0",
-    "@byline/core": "6.2.0",
-    "@byline/auth": "6.2.0",
-    "@byline/i18n": "6.2.0",
-    "@byline/ui": "6.2.0"
+    "@byline/analytics": "6.2.1",
+    "@byline/auth": "6.2.1",
+    "@byline/ui": "6.2.1",
+    "@byline/core": "6.2.1",
+    "@byline/analytics-agent": "6.2.1",
+    "@byline/i18n": "6.2.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/forms/form-layout-styles.test.node.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { describe, expect, it } from 'vitest'
+
+// jsdom applies no stylesheet, so the one-column guarantee of the stacked
+// variant cannot be asserted by rendering. This reads the stylesheet directly:
+// the class has to exist, and it must not be swept into the two-column grid
+// rule that the split layout gets at >=60rem.
+const css = readFileSync(join(__dirname, 'form-renderer.module.css'), 'utf8')
+
+describe('stacked form layout styles', () => {
+  it('defines the stacked layout class', () => {
+    expect(css).toMatch(/\.layout-stacked\b/)
+    expect(css).toMatch(/:global\(\.byline-form-layout-stacked\)/)
+  })
+
+  it('does not put the stacked class in the two-column grid rule', () => {
+    const desktop = css.slice(css.indexOf('@media (min-width: 60rem)'))
+    const gridRule = desktop.slice(0, desktop.indexOf('}\n}') + 3)
+    expect(gridRule).toContain('grid-template-columns')
+    expect(gridRule).not.toContain('layout-stacked')
+  })
+})

package/src/forms/form-layout.test.tsx

@@ -0,0 +1,276 @@
+/**
+ * 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 { act } from 'react'
+
+import type { AdminResourceConfig, Field } from '@byline/core'
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BylineFieldServicesProvider } from '../fields/field-services-context'
+import { FormProvider } from './form-context'
+import { FormLayout } from './form-layout'
+
+// Deliberately not the `;(globalThis as any)` idiom used elsewhere in this
+// suite: Biome's import sorting can move an import across that leading
+// semicolon, and without semicolons the result parses as a call on the import.
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'pages',
+      labels: { singular: 'Page', plural: 'Pages' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const fields: Field[] = [
+  { name: 'title', label: 'Title', type: 'text' },
+  { name: 'featured', label: 'Featured', type: 'text' },
+  { name: 'seoTitle', label: 'SEO title', type: 'text' },
+]
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const render = (props: Partial<React.ComponentProps<typeof FormLayout>> = {}) => {
+  act(() => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={
+            {
+              getCollectionDocuments: async () => ({ docs: [], total: 0 }),
+              uploadField: async () => ({}),
+            } as any
+          }
+        >
+          <FormProvider initialData={{ fields: {} }} collectionPath="pages">
+            <FormLayout
+              fields={fields}
+              activeTabBySet={{}}
+              onTabChange={() => {}}
+              {...(props as any)}
+            />
+          </FormProvider>
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const config = (c: Partial<AdminResourceConfig>) => c as AdminResourceConfig
+
+describe('FormLayout regions', () => {
+  it('renders main-region fields', () => {
+    render({ adminConfig: config({ layout: { main: ['title'] } }) })
+    expect(container.querySelector('input[name="title"]')).not.toBeNull()
+  })
+
+  it('renders layout.sidebar schema fields', () => {
+    render({ adminConfig: config({ layout: { main: ['title'], sidebar: ['featured'] } }) })
+    const sidebar = container.querySelector('.byline-form-sidebar')
+    expect(sidebar?.querySelector('input[name="featured"]')).not.toBeNull()
+    expect(container.querySelector('.byline-form-content input[name="featured"]')).toBeNull()
+  })
+
+  it('omits a region that was not requested', () => {
+    render({
+      adminConfig: config({ layout: { main: ['title'], sidebar: ['featured'] } }),
+      regions: ['main'],
+    })
+    expect(container.querySelector('.byline-form-sidebar')).toBeNull()
+    expect(container.querySelector('input[name="title"]')).not.toBeNull()
+  })
+
+  it('renders both regions in one column in the stacked variant', () => {
+    render({
+      adminConfig: config({ layout: { main: ['title'], sidebar: ['featured'] } }),
+      variant: 'stacked',
+    })
+    expect(container.querySelector('input[name="title"]')).not.toBeNull()
+    expect(container.querySelector('input[name="featured"]')).not.toBeNull()
+    expect(container.querySelector('.byline-form-sidebar')).toBeNull()
+  })
+})
+
+describe('FormLayout region order', () => {
+  // The prop is an ordered list, and both the interface and the plan promise
+  // order. Reducing it to membership checks silently always renders main first.
+  const both = config({ layout: { main: ['title'], sidebar: ['featured'] } })
+
+  const fieldOrder = () =>
+    [...container.querySelectorAll('input')].map((i) => i.getAttribute('name'))
+
+  it('honours a reversed region order in the split variant', () => {
+    render({ adminConfig: both, regions: ['sidebar', 'main'] })
+    expect(fieldOrder()).toEqual(['featured', 'title'])
+  })
+
+  it('honours a reversed region order in the stacked variant', () => {
+    render({ adminConfig: both, regions: ['sidebar', 'main'], variant: 'stacked' })
+    expect(fieldOrder()).toEqual(['featured', 'title'])
+  })
+
+  it('keeps the slot ahead of the schema fields within the sidebar', () => {
+    render({
+      adminConfig: both,
+      regions: ['sidebar', 'main'],
+      sidebarSlot: <div data-testid="path-widget" />,
+    })
+    const marks = [...container.querySelectorAll('input, [data-testid="path-widget"]')].map(
+      (n) => n.getAttribute('data-testid') ?? n.getAttribute('name')
+    )
+    expect(marks).toEqual(['path-widget', 'featured', 'title'])
+  })
+})
+
+describe('FormLayout stacked variant', () => {
+  // The split layout's own class becomes a two-column grid at >=60rem
+  // (form-renderer.module.css). Carrying it on a stacked form reserves an empty
+  // second track, which defeats the one-column variant. jsdom cannot measure
+  // that, so the guard is that the split class is not applied at all.
+  it('does not carry the two-column split layout class', () => {
+    render({
+      adminConfig: config({ layout: { main: ['title'], sidebar: ['featured'] } }),
+      variant: 'stacked',
+    })
+    const root = container.querySelector('[class*="layout"]')
+    expect(root?.className).toContain('byline-form-layout-stacked')
+    expect(root?.classList.contains('byline-form-layout')).toBe(false)
+  })
+
+  it('keeps the split class on the split variant', () => {
+    render({ adminConfig: config({ layout: { main: ['title'] } }) })
+    const root = container.querySelector('.byline-form-layout')
+    expect(root).not.toBeNull()
+    expect(root?.className).not.toContain('stacked')
+  })
+})
+
+describe('FormLayout sidebar slot', () => {
+  it('renders page-level widgets before the sidebar schema fields', () => {
+    // Deliberate deviation from the plan's Task 2 test, decided by Tony:
+    // the current editor renders page widgets first, and Phase 1's acceptance
+    // is behaviour preservation. Reversing the order here would visibly move
+    // `publishedOn` above the path widget in the shipped docs collection.
+    render({
+      adminConfig: config({ layout: { main: ['title'], sidebar: ['featured'] } }),
+      sidebarSlot: <div data-testid="path-widget" />,
+    })
+    const sidebar = container.querySelector('.byline-form-sidebar')
+    const order = [...(sidebar?.children ?? [])].map(
+      (n) => n.getAttribute('data-testid') ?? n.querySelector('input')?.getAttribute('name') ?? '?'
+    )
+    expect(order).toEqual(['path-widget', 'featured'])
+  })
+
+  it('renders a sidebar for the slot even when no sidebar fields are declared', () => {
+    render({
+      adminConfig: config({ layout: { main: ['title'] } }),
+      sidebarSlot: <div data-testid="path-widget" />,
+    })
+    expect(container.querySelector('[data-testid="path-widget"]')).not.toBeNull()
+  })
+})
+
+describe('FormLayout tabs', () => {
+  const tabbed = config({
+    layout: { main: ['content'] },
+    tabSets: [
+      {
+        name: 'content',
+        tabs: [
+          { name: 'general', label: 'General', fields: ['title'] },
+          { name: 'seo', label: 'SEO', fields: ['seoTitle'] },
+        ],
+      },
+    ],
+  })
+
+  it('renders the tab named by the controlled activeTabBySet prop', () => {
+    render({ adminConfig: tabbed, activeTabBySet: { content: 'seo' } })
+    expect(container.querySelector('input[name="seoTitle"]')).not.toBeNull()
+    expect(container.querySelector('input[name="title"]')).toBeNull()
+  })
+
+  it('falls back to the first tab when the set has no selection', () => {
+    render({ adminConfig: tabbed, activeTabBySet: {} })
+    expect(container.querySelector('input[name="title"]')).not.toBeNull()
+  })
+
+  it('reports a tab change upward rather than selecting it itself', () => {
+    // Selection stays owned above the keyed FormProvider so tab choices
+    // survive the locale-change remount. FormLayout must not self-select.
+    const onTabChange = vi.fn()
+    render({ adminConfig: tabbed, activeTabBySet: { content: 'general' }, onTabChange })
+
+    const seoTab = [...container.querySelectorAll('button')].find((b) => b.textContent === 'SEO')
+    if (seoTab == null) throw new Error('SEO tab not found')
+    act(() => {
+      seoTab.click()
+    })
+
+    expect(onTabChange).toHaveBeenCalledWith('content', 'seo')
+    expect(container.querySelector('input[name="seoTitle"]')).toBeNull()
+  })
+
+  it('hides a tab whose condition is unmet and falls back to a visible one', () => {
+    const conditional = config({
+      layout: { main: ['content'] },
+      tabSets: [
+        {
+          name: 'content',
+          tabs: [
+            { name: 'general', label: 'General', fields: ['title'] },
+            {
+              name: 'seo',
+              label: 'SEO',
+              fields: ['seoTitle'],
+              condition: (data: Record<string, any>) => data.title === 'show-seo',
+            },
+          ],
+        },
+      ],
+    })
+    render({ adminConfig: conditional, activeTabBySet: { content: 'seo' } })
+
+    const tabLabels = [...container.querySelectorAll('button')].map((b) => b.textContent)
+    expect(tabLabels).not.toContain('SEO')
+    expect(container.querySelector('input[name="title"]')).not.toBeNull()
+  })
+})