feat(studio): a full page says so instead of swallowing the click

client/src/components/Studio/StudioElementsPanel.tsx

@@ -195,7 +195,11 @@ function useElementAdders(page: BookPageSetup) {
     const els = gridElements(grid, defaultGridBox(page, single))
     // The page's own cap, as a duplicate keeps it: frames that would make the book unsaveable are not added.
     const on = useStudioStore.getState().doc?.spreads[active]
-    if (!on || on.elements.length + els.length > MAX_SPREAD_ELEMENTS) return
+    if (!on) return
+    if (on.elements.length + els.length > MAX_SPREAD_ELEMENTS) {
+      useStudioStore.getState().refuseFull()
+      return
+    }
     commit(d => ({
       ...d,
       spreads: d.spreads.map((sp, i) => (i !== active ? sp : { ...sp, elements: [...sp.elements, ...els] })),

client/src/components/Studio/StudioNotices.tsx

@@ -0,0 +1,24 @@
+import { MAX_SPREAD_ELEMENTS } from '@trek/shared';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from '../../i18n';
+import { useStudioStore } from '../../store/studioStore';
+import { useToast } from '../shared/Toast';
+
+/**
+ * What the Studio says about a click it could not carry out. Today one thing:
+ * the page already holds as many elements as a page can, so a sticker, a frame,
+ * a paste or a duplicate was not added. Every path that refuses counts it in the
+ * store, and this says it once per count rather than each path in its own words.
+ */
+export function StudioNotices() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const refused = useStudioStore((s) => s.refusedFull);
+  const seen = useRef(refused);
+  useEffect(() => {
+    if (refused === seen.current) return;
+    seen.current = refused;
+    toast.warning(t('journey.studio.pageFull', { max: MAX_SPREAD_ELEMENTS }));
+  }, [refused, toast, t]);
+  return null;
+}

client/src/components/Studio/StudioShell.tsx

@@ -16,6 +16,7 @@ import { StudioExport } from './StudioExport'
 import { StudioAssistantColumn, StudioPageStage } from './StudioAssistantPanel'
 import { useStudioAssistant } from './useStudioAssistant'
 import { StudioHeader } from './StudioHeader'
+import { StudioNotices } from './StudioNotices'
 import '../../styles/dashboard.css'
 import '../../styles/studio.css'
 import './bookFontFaces'
@@ -84,6 +85,7 @@ export default function StudioShell() {
         aria-label={s.t('journey.studio.title')}
       >
         <StudioHeader s={s} onExport={() => setExporting(true)} assistant={assistant} />
+        <StudioNotices />
         {/* The journey gallery's picker, inside Studio's own layer (#2271). */}
         {s.providerPick && s.journey && (
           <ProviderPicker

client/src/components/Studio/StudioTextStyles.tsx

@@ -99,7 +99,11 @@ export function StudioTextStyles({
   const place = (lockup: BookLockup) => {
     const els = placeLockup(lockup, { page, spread, words, gallery: source.photos, newId: bookElementId });
     // The page's own cap, as a duplicate keeps it: a set that would make the book unsaveable is not placed.
-    if (!els.length || !spread || spread.elements.length + els.length > MAX_SPREAD_ELEMENTS) return;
+    if (!els.length || !spread) return;
+    if (spread.elements.length + els.length > MAX_SPREAD_ELEMENTS) {
+      useStudioStore.getState().refuseFull();
+      return;
+    }
     commit((d) => ({
       ...d,
       spreads: d.spreads.map((sp, i) => (i === active ? addBookLockup(sp, els, bookElementId('g')) : sp)),