14 files changed, 580 insertions, 307 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 616046d5d..1714b7a3e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -8,7 +8,7 @@ import { extname } from 'path';
 import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
-import { ClientUtils, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
+import { ClientUtils, imageUrlToBase64, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
@@ -16,7 +16,7 @@ import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
 import { ComputedField } from '../../../fields/ScriptField';
-import { Cast, DocCast, ImageCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
+import { Cast, DocCast, ImageCast, NumCast, RTFCast, StrCast, ImageCastWithSuffix } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction } from '../../../Utils';
@@ -45,6 +45,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
+import { gptImageLabel } from '../../apis/gpt/GPT';
 
 const DefaultPath = '/assets/unknown-file-icon-hi.png';
 export class ImageEditorData {
@@ -139,6 +140,42 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document));
     };
+
+    autoTag = async () => {
+        if (this.Document.$tags_chat) return;
+        try {
+            // 1) grab the full-size URL
+            const layoutKey = Doc.LayoutDataKey(this.Document);
+            const url = ImageCastWithSuffix(this.Document[layoutKey], '_o');
+            if (!url) throw new Error('No image URL found');
+
+            // 2) convert to base64
+            const base64 = await imageUrlToBase64(url);
+            if (!base64) throw new Error('Failed to load image data');
+
+            // 3) ask GPT for labels one label: PERSON or LANDSCAPE
+            const label = await gptImageLabel(
+                base64,
+                `Classify this image as PERSON or LANDSCAPE.  You may only respond with one of these two options. 
+                Then provide five additional descriptive tags to describe the image for a total of 6 words outputted, delimited by spaces. 
+                For example: "LANDSCAPE BUNNY NATURE FOREST PEACEFUL OUTDOORS". 
+                Then add one final lengthier summary tag (separated by underscores) that describes the image.`
+            ).then(raw => raw.trim().toUpperCase());
+
+            const { nativeWidth, nativeHeight } = this.nativeSize;
+            const aspectRatio = ((nativeWidth || 1) / (nativeHeight || 1)).toFixed(2);
+
+            // 5) stash it on the Doc
+            //    overwrite any old tags so re-runs still work
+            this.Document.$tags_chat = new List<string>([...label.split(/\s+/), `ASPECT_${aspectRatio}`]);
+
+            // 6) flip on “show tags” in the layout
+            this.Document._layout_showTags = true;
+        } catch (err) {
+            console.error('autoTag failed:', err);
+        }
+    };
+
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor
         const anchor =
@@ -225,9 +262,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
-    handleSelection = async (selection: string) => {
-        this._searchInput = selection;
-    };
+    handleSelection = async (selection: string) => (this._searchInput = selection);
 
     drop = undoable(
         action((e: Event, de: DragManager.DropEvent) => {
@@ -392,9 +427,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     @action
-    handlePromptChange = (val: string | number) => {
-        this._outpaintPromptInput = '' + val;
-    };
+    handlePromptChange = (val: string | number) => (this._outpaintPromptInput = '' + val);
 
     @action
     submitOutpaintPrompt = () => {
@@ -495,6 +528,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return this._props.PanelWidth() / this._props.PanelHeight() < this.nativeSize.nativeWidth / this.nativeSize.nativeHeight;
     }
 
+    isOutpaintable = () => true;
+
     componentUI = (/* boundsLeft: number, boundsTop: number*/) =>
         !this._showOutpaintPrompt ? null : (
             <div
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 45fa5cc12..5501f0a31 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -33,6 +33,9 @@ import { ImageBox } from './ImageBox';
 import { OpenWhere } from './OpenWhere';
 import './PDFBox.scss';
 import { CreateImage } from './WebBoxRenderer';
+import { gptAPICall } from '../../apis/gpt/GPT';
+import { List } from '../../../fields/List';
+import { GPTCallType } from '../../apis/gpt/GPT';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -78,6 +81,36 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
 
+    autoTag = async () => {
+        if (!this.Document.$tags_chat && this._pdf) {
+            if (!this.dataDoc.text) {
+                // 1) Extract text from the first few pages (e.g., first 2 pages)
+                const maxPages = Math.min(2, this._pdf.numPages);
+                const promises: Promise<string>[] = [];
+                for (let pageNum = 1; pageNum <= maxPages; pageNum++) {
+                    promises.push(
+                        this._pdf
+                            .getPage(pageNum)
+                            .then(page => page.getTextContent())
+                            .then(content => content.items.map(item => ('str' in item ? item.str : '')).join(' '))
+                    );
+                }
+                this.dataDoc.text = (await Promise.all(promises)).join(' ');
+            }
+
+            const text = StrCast(this.dataDoc.text).trim().slice(0, 2000);
+            if (text) {
+                // 2) Ask GPT to classify and provide descriptive tags, then normalize the results
+                const label = await gptAPICall(`"${text}"`, GPTCallType.CLASSIFYTEXTFULL).then(raw => raw.trim().toUpperCase());
+
+                this.Document.$tags_chat = new List<string>(label.split(/\s+/));
+
+                // 4) Show tags in layout
+                this.Document._layout_showTags = true;
+            }
+        }
+    };
+
     replaceCanvases = (oldDiv: HTMLElement, newDiv: HTMLElement) => {
         if (oldDiv.childNodes) {
             for (let i = 0; i < oldDiv.childNodes.length; i++) {
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index b3cb0e1db..f994bdbb5 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -30,6 +30,7 @@ import { StyleProp } from '../StyleProp';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
+import { gptImageLabel } from '../../apis/gpt/GPT';
 import './VideoBox.scss';
 
 /**
@@ -109,6 +110,52 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return this._videoRef;
     }
 
+    autoTag = async () => {
+        if (this.Document.$tags_chat) return;
+        try {
+            if (!this.player) throw new Error('Video element not available.');
+
+            // 1) Extract a frame at the video's midpoint
+            const videoDuration = this.player.duration;
+            const snapshotTime = videoDuration / 2;
+
+            // Seek the video element to the midpoint
+            await new Promise<void>(resolve => {
+                const onSeeked = () => {
+                    this.player!.removeEventListener('seeked', onSeeked);
+                    resolve();
+                };
+                this.player!.addEventListener('seeked', onSeeked);
+                this.player!.currentTime = snapshotTime;
+            });
+
+            // 2) Draw the frame onto a canvas and get a base64 representation
+            const canvas = document.createElement('canvas');
+            canvas.width = this.player.videoWidth;
+            canvas.height = this.player.videoHeight;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) throw new Error('Failed to create canvas context.');
+            ctx.drawImage(this.player, 0, 0, canvas.width, canvas.height);
+            const base64Image = canvas.toDataURL('image/png');
+
+            // 3) Send the image data to GPT for classification and descriptive tags
+            const label = await gptImageLabel(
+                base64Image,
+                `Classify this video frame as either a PERSON or LANDSCAPE.
+            Then provide five additional descriptive tags (single words) separated by spaces.
+            Finally, add one detailed summary phrase using underscores.`
+            ).then(raw => raw.trim().toUpperCase());
+
+            // 4) Normalize and store labels in the Document's tags
+            const aspect = this.player!.videoWidth / (this.player!.videoHeight || 1);
+            this.Document.$tags_chat = new List<string>([...label.split(/\s+/), `ASPECT_${aspect}`]);
+            // 5) Turn on tag display in layout
+            this.Document._layout_showTags = true;
+        } catch (err) {
+            console.error('Video autoTag failed:', err);
+        }
+    };
+
     componentDidMount() {
         this.unmounting = false;
         this._props.setContentViewBox?.(this); // this tells the DocumentView that this VideoBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the VideoBox when making a link.
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index c8df6e50f..d700ce9f8 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -308,6 +308,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
     };
 
+    autoTag = () => {
+        const rawText = RTFCast(this.Document[this.fieldKey])?.Text ?? StrCast(this.Document[this.fieldKey]);
+        if (rawText && !this.Document.$tags_chat) {
+            const callType = rawText.includes('[placeholder]') ? GPTCallType.CLASSIFYTEXTMINIMAL : GPTCallType.CLASSIFYTEXTFULL;
+
+            gptAPICall(rawText, callType).then(
+                action(desc => {
+                    // Split GPT response into tokens and push individually & clear existing tags
+                    this.Document.$tags_chat = new List<string>(desc.trim().split(/\s+/));
+                    this.Document._layout_showTags = true;
+                })
+            );
+        }
+    };
+
     leafText = (node: Node) => {
         if (node.type === this.EditorView?.state.schema.nodes.dashField) {
             const refDoc = !node.attrs.docId ? this.rootDoc : (DocServer.GetCachedRefField(node.attrs.docId as string) as Doc);
@@ -369,6 +384,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                             dataDoc[this.fieldKey] =
                                 numstring !== undefined ? Number(newText) : newText || (DocCast(dataDoc.proto)?.[this.fieldKey] === undefined && this.layoutDoc[this.fieldKey] === undefined) ? new RichTextField(newJson, newText) : undefined;
                             textChange && ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.Document, text: newText });
+                            if (textChange) this.dataDoc.$tags_chat = undefined;
                             this.ApplyingChange = ''; // turning this off here allows a Doc to retrieve data from template if noTemplate below is changed to false
                             unchanged = false;
                         }
diff --git a/src/client/views/nodes/scrapbook/AIPresetGenerator.ts b/src/client/views/nodes/scrapbook/AIPresetGenerator.ts
new file mode 100644
index 000000000..1f159222b
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/AIPresetGenerator.ts
@@ -0,0 +1,31 @@
+import { ScrapbookItemConfig } from './ScrapbookPreset';
+import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
+
+// Represents the descriptor for each document
+export interface DocumentDescriptor {
+  type: string;
+  tags: string[];
+}
+
+// Main function to request AI-generated presets
+export async function requestAiGeneratedPreset(descriptors: DocumentDescriptor[]): Promise<ScrapbookItemConfig[]> {
+    const prompt = createPrompt(descriptors);
+    let aiResponse = await gptAPICall(prompt, GPTCallType.GENERATESCRAPBOOK);
+            // Strip out ```json and ``` if the model wrapped its answer in fences
+    aiResponse = aiResponse
+            .trim()
+            .replace(/^```(?:json)?\s*/, "")   // remove leading ``` or ```json
+            .replace(/\s*```$/, "");           // remove trailing ```
+    const parsedPreset = JSON.parse(aiResponse) as ScrapbookItemConfig[];
+    return parsedPreset;
+}
+
+// Helper to generate prompt text for AI
+function createPrompt(descriptors: DocumentDescriptor[]): string {
+    let prompt = "";
+    descriptors.forEach((desc, index) => {
+        prompt += `${index + 1}. Type: ${desc.type}, Tags: ${desc.tags.join(', ')}\n`;
+    });
+
+    return prompt;
+}
diff --git a/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx b/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx
deleted file mode 100644
index e99bf67c7..000000000
--- a/src/client/views/nodes/scrapbook/EmbeddedDocView.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
-import * as React from "react";
-import { observer } from "mobx-react";
-import { Doc } from "../../../../fields/Doc";
-import { DocumentView } from "../DocumentView";
-import { Transform } from "../../../util/Transform";
-
-interface EmbeddedDocViewProps {
-    doc: Doc;
-    width?: number;
-    height?: number;
-    slotId?: string;
-}
-
-@observer
-export class EmbeddedDocView extends React.Component<EmbeddedDocViewProps> {
-    render() {
-        const { doc, width = 300, height = 200, slotId } = this.props;
-        
-        // Use either an existing embedding or create one
-        let docToDisplay = doc;
-        
-        // If we need an embedding, create or use one
-        if (!docToDisplay.isEmbedding) {
-            docToDisplay = Doc.BestEmbedding(doc) || Doc.MakeEmbedding(doc);
-            // Set the container to the slot's ID so we can track it
-            if (slotId) {
-                docToDisplay.embedContainer = `scrapbook-slot-${slotId}`;
-            }
-        }
-        
-        return (
-            <DocumentView 
-                Document={docToDisplay}
-                renderDepth={0}
-                // Required sizing functions
-                NativeWidth={() => width}
-                NativeHeight={() => height}
-                PanelWidth={() => width}
-                PanelHeight={() => height}
-                // Required state functions
-                isContentActive={() => true}
-                childFilters={() => []}
-                ScreenToLocalTransform={() => new Transform()}
-                // Display options
-                hideDeleteButton={true}
-                hideDecorations={true}
-                hideResizeHandles={true}
-            />
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.scss b/src/client/views/nodes/scrapbook/ScrapbookBox.scss
new file mode 100644
index 000000000..6ac2220f9
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.scss
@@ -0,0 +1,66 @@
+.scrapbook-box {
+    /* Make sure the container fills its parent, and set a base background */
+    position: relative; /* so that absolute children (loading overlay, etc.) are positioned relative to this */
+    width: 100%;
+    height: 100%;
+    background: beige;
+    overflow: hidden; /* prevent scrollbars if children overflow */
+}
+
+/* Loading overlay that covers the entire scrapbook while AI-generation is in progress */
+.scrapbook-box-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 10; /* sits above the ImageBox and other content */
+}
+
+/* The <select> dropdown for choosing presets */
+.scrapbook-box-preset-select {
+    position: relative;
+    top: 8px;
+    left: 8px;
+    z-index: 20;
+    padding: 4px 8px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: white;
+}
+
+/* Container for the “Regenerate Background” button */
+.scrapbook-box-ui {
+    position: relative;
+    top: 8px;
+    right: 8px;
+    z-index: 20;
+    background: white;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+}
+
+/* The button itself */
+.scrapbook-box-ui-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    font-size: 14px;
+    color: black;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.scrapbook-box-ui-button:hover {
+    background: #f5f5f5;
+}
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index 6cfe9a62c..ff757af88 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -1,130 +1,258 @@
-import { action, makeObservable, observable } from 'mobx';
+import { IconButton, Size } from '@dash/components';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
+import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast } from '../../../../fields/Doc';
+import ReactLoading from 'react-loading';
+import { Doc, DocListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
+import { DateCast, DocCast, NumCast, toList } from '../../../../fields/Types';
 import { emptyFunction } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DocumentType } from '../../../documents/DocumentTypes';
+import { DragManager } from '../../../util/DragManager';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { undoable } from '../../../util/UndoManager';
 import { CollectionView } from '../../collections/CollectionView';
 import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { AspectRatioLimits, FireflyImageDimensions } from '../../smartdraw/FireflyConstants';
+import { SmartDrawHandler } from '../../smartdraw/SmartDrawHandler';
 import { DocumentView } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
-import { DragManager } from '../../../util/DragManager';
-import { RTFCast, StrCast, toList } from '../../../../fields/Types';
-import { undoable } from '../../../util/UndoManager';
-// Scrapbook view: a container that lays out its child items in a grid/template
-export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
-    @observable createdDate: string;
+import { ImageBox } from '../ImageBox';
+import './ScrapbookBox.scss';
+import { ScrapbookItemConfig } from './ScrapbookPreset';
+import { createPreset, getPresetNames } from './ScrapbookPresetRegistry';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DocUtils } from '../../../documents/DocUtils';
 
-    constructor(props: FieldViewProps) {
-        super(props);
-        makeObservable(this);
-        this.createdDate = this.getFormattedDate();
+function createPlaceholder(cfg: ScrapbookItemConfig, doc: Doc) {
+    const placeholder = new Doc();
+    placeholder.proto = doc;
+    placeholder.original = doc;
+    placeholder.x = cfg.x;
+    placeholder.y = cfg.y;
+    if (cfg.width !== null) placeholder._width = cfg.width;
+    if (cfg.height !== null) placeholder._height = cfg.height;
+    return placeholder;
+}
 
-        // ensure we always have a List<Doc> in dataDoc['items']
-        if (!this.dataDoc[this.fieldKey]) {
-            this.dataDoc[this.fieldKey] = new List<Doc>();
+function createMessagePlaceholder(cfg: ScrapbookItemConfig) {
+    return createPlaceholder(cfg, 
+        Docs.Create.TextDocument(cfg.message ?? ('[placeholder] ' + cfg.acceptTags?.[0]), { placeholder: "", placeholder_docType: cfg.type, placeholder_acceptTags: new List<string>(cfg.acceptTags) })
+    ); // prettier-ignore
+}
+export function buildPlaceholdersFromConfigs(configs: ScrapbookItemConfig[]) {
+    return configs.map(cfg => {
+        if (cfg.children?.length) {
+            const childDocs = cfg.children.map(createMessagePlaceholder);
+            const protoW = cfg.containerWidth ?? cfg.width;
+            const protoH = cfg.containerHeight ?? cfg.height;
+            // Create a stacking document with the child placeholders
+            const containerProto = Docs.Create.StackingDocument(childDocs, {
+                ...(protoW !== null ? { _width: protoW } : {}),
+                ...(protoH !== null ? { _height: protoH } : {}),
+                title: cfg.message,
+            });
+            return createPlaceholder(cfg, containerProto);
         }
-        this.createdDate = this.getFormattedDate();
-        this.setTitle();
+        return createMessagePlaceholder(cfg);
+    });
+}
+export async function slotRealDocIntoPlaceholders(realDoc: Doc, placeholders: Doc[]) {
+    if (!realDoc.$tags_chart) {
+        await DocumentView.getFirstDocumentView(realDoc)?.ComponentView?.autoTag?.();
     }
+    const realTags = new Set<string>(StrListCast(realDoc.$tags_chat).map(t => t.toLowerCase?.() ?? ''));
 
+    // Find placeholder with most matching tags
+    let bestMatch: Doc | null = null;
+    let maxMatches = 0;
+
+    // match fields based on type, or by analyzing content .. simple example of matching text in placeholder to dropped doc's type
+    placeholders
+        .filter(ph => ph.placeholder_docType === realDoc.$type) // Skip this placeholder entirely if types do not match.
+        .forEach(ph => {
+            const matches = StrListCast(ph.placeholder_acceptTags)
+                .map(t => t.toLowerCase?.())
+                .filter(tag => realTags.has(tag));
+
+            if (matches.length > maxMatches) {
+                maxMatches = matches.length;
+                bestMatch = ph;
+            }
+        });
+
+    if (bestMatch && maxMatches > 0) {
+        setTimeout(undoable(() => (bestMatch!.proto = realDoc), 'Scrapbook add'));
+        return true;
+    }
+
+    return false;
+}
+
+// Scrapbook view: a container that lays out its child items in a template
+@observer
+export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(ScrapbookBox, fieldStr);
     }
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+    private _imageBoxRef = React.createRef<ImageBox>();
+
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @observable _selectedPreset = getPresetNames()[0];
+    @observable _loading = false;
 
-    getFormattedDate(): string {
-        return new Date().toLocaleDateString(undefined, {
+    @computed get createdDate() {
+        return DateCast(this.dataDoc.$author_date)?.date.toLocaleDateString(undefined, {
             year: 'numeric',
             month: 'short',
             day: 'numeric',
         });
     }
+    @computed get ScrapbookLayoutDocs()  { return DocListCast(this.dataDoc[this.fieldKey]); } // prettier-ignore
+    @computed get BackgroundDoc()        { return DocCast(this.dataDoc[this.fieldKey + '_background']); } // prettier-ignore
+    set ScrapbookLayoutDocs(doc: Doc[])  { this.dataDoc[this.fieldKey] = new List(doc); } // prettier-ignore
+    set BackgroundDoc(doc: Opt<Doc>)     { this.dataDoc[this.fieldKey + '_background'] = doc; } // prettier-ignore
 
     @action
-    setTitle() {
-        const title = `Scrapbook - ${this.createdDate}`;
-        if (this.dataDoc.title !== title) {
-            this.dataDoc.title = title;
-
-            const image = Docs.Create.TextDocument('image');
-            image.accepts_docType = DocumentType.IMG;
-            const placeholder = new Doc();
-            placeholder.proto = image;
-            placeholder.original = image;
-            placeholder._width = 250;
-            placeholder._height = 200;
-            placeholder.x = 0;
-            placeholder.y = -100;
-            //placeholder.overrideFields = new List<string>(['x', 'y']);  // shouldn't need to do this for layout fields since the placeholder already overrides its protos
-
-            const summary = Docs.Create.TextDocument('summary');
-            summary.accepts_docType = DocumentType.RTF;
-            summary.accepts_textType = 'one line';
-            const placeholder2 = new Doc();
-            placeholder2.proto = summary;
-            placeholder2.original = summary;
-            placeholder2.x = 0;
-            placeholder2.y = 200;
-            placeholder2._width = 250;
-            //placeholder2.overrideFields = new List<string>(['x', 'y', '_width']); // shouldn't need to do this for layout fields since the placeholder already overrides its protos
-            this.dataDoc[this.fieldKey] = new List<Doc>([placeholder, placeholder2]);
-        }
-    }
+    setDefaultPlaceholder = () => {
+        this.ScrapbookLayoutDocs = [
+            createMessagePlaceholder({
+                message: 'To create a scrapbook from existing documents, marquee select. For existing scrapbook arrangements, select a preset from the dropdown.',
+                type: DocumentType.RTF,
+                width: 250,
+                height: 200,
+                x: 0,
+                y: 0,
+            }),
+        ];
+
+        const placeholder1 = createMessagePlaceholder({ acceptTags: ['PERSON'], type: DocumentType.IMG, width: 250, height: 200, x: 0, y: -100 });
+        const placeholder2 = createMessagePlaceholder({ acceptTags: ['lengthy description'], type: DocumentType.RTF, width: 250, height: undefined, x: 0, y: 200 });
+        const placeholder3 = createMessagePlaceholder({ acceptTags: ['title'], type: DocumentType.RTF, width: 50, height: 200, x: 280, y: -50 });
+        const placeholder4 = createPlaceholder( { width: 100, height: 200, x: -200, y: -100 }, Docs.Create.StackingDocument([
+                             createMessagePlaceholder({ acceptTags: ['LANDSCAPE'], type: DocumentType.IMG, width: 50, height: 100, x: 0, y: -100 })
+                             ], { _width: 300, _height: 300, title: 'internal coll' })); // prettier-ignore
+        console.log('UNUSED', placeholder4, placeholder3, placeholder2, placeholder1);
+        /* note-to-self
+                    would doing:
+                        const collection = Docs.Create.ScrapbookDocument([placeholder, placeholder2, placeholder3]);
+                        create issues with references to the same object? */
+
+        /*note-to-self
+                    Should we consider that there are more collections than just COL type collections?
+                    when spreading */
+
+        /*note-to-self
+                    difference between passing a new List<Doc> versus just the raw array? */
+    };
+
+    selectPreset = action((presetName: string) => (this.ScrapbookLayoutDocs = buildPlaceholdersFromConfigs(createPreset(presetName))));
 
     componentDidMount() {
-        this.setTitle();
+        const title = `Scrapbook - ${this.createdDate}`;
+        if (!this.ScrapbookLayoutDocs.length) this.setDefaultPlaceholder();
+        if (!this.BackgroundDoc) this.generateAiImage(this.regenPrompt);
+        if (this.dataDoc.title !== title) this.dataDoc.title = title; // ensure title is set
+
+        this._disposers.propagateResize = reaction(
+            () => ({ w: this.layoutDoc._width, h: this.layoutDoc._height }),
+            (dims, prev) => {
+                const imageBox = this._imageBoxRef.current;
+                // prev is undefined on the first run
+                if (prev && SnappingManager.ShiftKey && this.BackgroundDoc && imageBox) {
+                    this.BackgroundDoc[imageBox.fieldKey + '_outpaintOriginalWidth'] = prev.w;
+                    this.BackgroundDoc[imageBox.fieldKey + '_outpaintOriginalHeight'] = prev.h;
+                    imageBox.layoutDoc._width = dims.w;
+                    imageBox.layoutDoc._height = dims.h;
+                }
+            }
+        );
     }
 
-    childRejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => {
-        return true; // disable dropping documents onto any child of the scrapbook.
-    };
-    rejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => {
-        // Test to see if the dropped doc is dropped on an acceptable location (anywerhe? on a specific box).
-        // const draggedDocs = de.complete.docDragData?.draggedDocuments;
-        return false; // allow all Docs to be dropped onto scrapbook -- let filterAddDocument make the final decision.
+    isOutpaintable = () => true;
+
+    @action
+    generateAiImage = (prompt: string) => {
+        this._loading = true;
+
+        const ratio = NumCast(this.layoutDoc._width, 1) / NumCast(this.layoutDoc._height, 1); // Measure the scrapbook’s current aspect
+        const choosePresetForDimensions = (() => { // Pick the Firefly preset that best matches the aspect ratio
+            if (ratio > AspectRatioLimits[FireflyImageDimensions.Widescreen]) return FireflyImageDimensions.Widescreen;
+            if (ratio > AspectRatioLimits[FireflyImageDimensions.Landscape]) return FireflyImageDimensions.Landscape;
+            if (ratio < AspectRatioLimits[FireflyImageDimensions.Portrait]) return FireflyImageDimensions.Portrait;
+            return FireflyImageDimensions.Square;
+        })(); // prettier-ignore
+
+        SmartDrawHandler.CreateWithFirefly(prompt, choosePresetForDimensions)  // Call exactly the same CreateWithFirefly that ImageBox uses
+            .then(action(doc => {
+                if (doc instanceof Doc) {
+                    this.BackgroundDoc = doc; // set the background image directly on the scrapbook 
+                } else {
+                    alert('Failed to generate document.');
+                }
+            }))
+            .catch(e => alert(`Generation error: ${e}`))
+            .finally(action(() => (this._loading = false))); // prettier-ignore
     };
 
-    filterAddDocument = (docIn: Doc | Doc[]) => {
-        const docs = toList(docIn);
-        if (docs?.length === 1) {
-            const placeholder = DocListCast(this.dataDoc[this.fieldKey]).find(d =>
-                 (d.accepts_docType === docs[0].$type ||   // match fields based on type, or by analyzing content .. simple example of matching text in placeholder to dropped doc's type
-                  RTFCast(d[Doc.LayoutDataKey(d)])?.Text.includes(StrCast(docs[0].$type)))
-            ); // prettier-ignore
-
-            if (placeholder) {
-                // ugh.  we have to tell the underlying view not to add the Doc so that we can add it where we want it.
-                // However, returning 'false' triggers an undo. so this settimeout is needed to make the assignment happen after the undo.
-                setTimeout(
-                    undoable(() => {
-                        //StrListCast(placeholder.overrideFields).map(field => (docs[0][field] = placeholder[field])); // // shouldn't need to do this for layout fields since the placeholder already overrides its protos
-                        placeholder.proto = docs[0];
-                    }, 'Scrapbook add')
-                );
-                return false;
-            }
-        }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    childRejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => true; // disable dropping documents onto any child of the scrapbook.
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    rejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => false; // allow all Docs to be dropped onto scrapbook -- let filterAddDocument make the final decision.
+
+    /**
+     * Filter function to determine if a document can be added to the scrapbook.
+     * This checks if the document matches any of the placeholder slots in the scrapbook.
+     * @param docs - The document(s) being added to the scrapbook.
+     * @returns true if the document can be added, false otherwise.
+     */
+    filterAddDocument = (docs: Doc | Doc[]) => {
+        toList(docs).forEach(doc => slotRealDocIntoPlaceholders(doc, DocUtils.unwrapPlaceholders(this.ScrapbookLayoutDocs)));
         return false;
     };
 
+    @computed get regenPrompt() {
+        const allDocs = DocUtils.unwrapPlaceholders(this.ScrapbookLayoutDocs); // find all non-collections in scrapbook (e.g., placeholder content docs)
+        const internalTagsSet = new Set<string>(allDocs.flatMap(doc => StrListCast(doc.$tags_chat).filter(tag => !tag.startsWith?.('ASPECT_'))));
+        const internalTags = Array.from(internalTagsSet).join(', ');
+
+        return internalTags ? `Create a new scrapbook background featuring: ${internalTags}` : 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background';
+    }
+
     render() {
         return (
-            <div style={{ background: 'beige', width: '100%', height: '100%' }}>
-                <CollectionView
-                    {...this._props} //
-                    setContentViewBox={emptyFunction}
-                    rejectDrop={this.rejectDrop}
-                    childRejectDrop={this.childRejectDrop}
-                    filterAddDocument={this.filterAddDocument}
-                />
-                {/* <div style={{ border: '1px black', borderStyle: 'dotted', position: 'absolute', top: '50%', width: '100%', textAlign: 'center' }}>Drop an image here</div> */}
+            <div className="scrapbook-box">
+                <div style={{ display: this._loading ? undefined : 'none' }} className="scrapbook-box-loading-overlay">
+                    <ReactLoading type="spin" width={50} height={50} />
+                </div>
+
+                {this.BackgroundDoc && <ImageBox ref={this._imageBoxRef} {...this._props} Document={this.BackgroundDoc} fieldKey="data" />}
+                <div style={{ display: this._props.isContentActive() ? 'flex' : 'none', alignItems: 'center', justifyContent: 'space-between', padding: '0 10px' }}>
+                    <select className="scrapbook-box-preset-select" value={this._selectedPreset} onChange={action(e => this.selectPreset((this._selectedPreset = e.currentTarget.value)))}>
+                        {getPresetNames().map(name => (
+                            <option key={name} value={name}>
+                                {name}
+                            </option>
+                        ))}
+                    </select>
+                    <div className="scrapbook-box-ui" style={{ opacity: this._loading ? 0.5 : 1 }}>
+                        <IconButton size={Size.SMALL} tooltip="regenerate a new background" label="back-ground" icon={<FontAwesomeIcon icon="redo-alt" size="sm" />} onClick={() => !this._loading && this.generateAiImage(this.regenPrompt)} />
+                    </div>
+                </div>
+
+                <CollectionView {...this._props} setContentViewBox={emptyFunction} rejectDrop={this.rejectDrop} childRejectDrop={this.childRejectDrop} filterAddDocument={this.filterAddDocument} />
             </div>
         );
     }
 }
 
-// Register scrapbook
 Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
     layout: { view: ScrapbookBox, dataField: 'items' },
     options: {
diff --git a/src/client/views/nodes/scrapbook/ScrapbookContent.tsx b/src/client/views/nodes/scrapbook/ScrapbookContent.tsx
deleted file mode 100644
index ad1d308e8..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookContent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-// Import the Doc type from your actual module.
-import { Doc } from "../../../../fields/Doc";
-
-export interface ScrapbookContentProps {
-  doc: Doc;
-}
-
-// A simple view that displays a document's title and content.
-// Adjust how you extract the text if your Doc fields are objects.
-export const ScrapbookContent: React.FC<ScrapbookContentProps> = observer(({ doc }) => {
-  // If doc.title or doc.content are not plain strings, convert them.
-  const titleText = doc.title ? doc.title.toString() : "Untitled";
-  const contentText = doc.content ? doc.content.toString() : "No content available.";
-
-  return (
-    <div className="scrapbook-content">
-      <h3>{titleText}</h3>
-      <p>{contentText}</p>
-    </div>
-  );
-});
diff --git a/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx b/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
new file mode 100644
index 000000000..a3405083b
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
@@ -0,0 +1,94 @@
+import { DocumentType } from '../../../documents/DocumentTypes';
+
+export enum ScrapbookPresetType {
+    None = 'None',
+    Collage = 'Collage',
+    Spotlight = 'Spotlight',
+    Gallery = 'Gallery',
+    Default = 'Default',
+    Classic = 'Classic',
+}
+
+export interface ScrapbookItemConfig {
+    x: number;
+    y: number;
+
+    message?: string; // optional text to display instead of [placeholder] + acceptTags[0]
+    type?: DocumentType;
+    /** what this slot actually accepts (defaults to `tag`) */
+    acceptTags?: string[];
+    /** the frame this placeholder occupies */
+    width?: number;
+    height?: number;
+    /** if this is a container with children, use these for the proto’s own size */
+    containerWidth?: number;
+    containerHeight?: number;
+    children?: ScrapbookItemConfig[];
+}
+
+export class ScrapbookPreset {
+    static createPreset(presetType: ScrapbookPresetType): ScrapbookItemConfig[] {
+        switch (presetType) {
+            case ScrapbookPresetType.None:      return ScrapbookPreset.createNonePreset();     
+            case ScrapbookPresetType.Classic:   return ScrapbookPreset.createClassicPreset();
+            case ScrapbookPresetType.Collage:   return ScrapbookPreset.createCollagePreset();
+            case ScrapbookPresetType.Spotlight: return ScrapbookPreset.createSpotlightPreset();
+            case ScrapbookPresetType.Default:   return ScrapbookPreset.createDefaultPreset();   
+            case ScrapbookPresetType.Gallery:   return ScrapbookPreset.createGalleryPreset();     
+            default:
+                throw new Error(`Unknown preset type: ${presetType}`);
+        } // prettier-ignore
+    }
+
+    private static createNonePreset(): ScrapbookItemConfig[] {
+        return [{ message: 'To create a scrapbook from existing documents, marquee select. For existing scrapbook arrangements, select a preset from the dropdown.', type: DocumentType.RTF, acceptTags: [], x: 0, y: 0, width: 250, height: 200 }];
+    }
+
+    private static createClassicPreset(): ScrapbookItemConfig[] {
+        return [
+            { type: DocumentType.IMG, message: '[placeholder] landscape', acceptTags: ['LANDSCAPE'], x: 0, y: -100, width: 250, height: 200 },
+            { type: DocumentType.RTF, message: '[placeholder] lengthy caption', acceptTags: ['paragraphs'], x: 0, y: 138, width: 250, height: 172 },
+            { type: DocumentType.RTF, message: '[placeholder] brief description', acceptTags: ['sentence'], x: 280, y: -50, width: 50, height: 200 },
+            { type: DocumentType.IMG, message: '[placeholder] person', acceptTags: ['PERSON'], x: -200, y: -100, width: 167, height: 200 },
+        ];
+    }
+
+    private static createGalleryPreset(): ScrapbookItemConfig[] {
+        return [
+            { type: DocumentType.IMG, message: 'Gallery 1 <drop person images into the gallery!>', acceptTags: ['PERSON'], x: -150, y: -150, width: 150, height: 150 },
+            { type: DocumentType.IMG, message: 'Gallery 2', acceptTags: ['PERSON'], x: 0, y: -150, width: 150, height: 150 },
+            { type: DocumentType.IMG, message: 'Gallery 3', acceptTags: ['PERSON'], x: 150, y: -150, width: 150, height: 150 },
+            { type: DocumentType.IMG, message: 'Gallery 4', acceptTags: ['PERSON'], x: -150, y: 0, width: 150, height: 150 },
+            { type: DocumentType.IMG, message: 'Gallery 5', acceptTags: ['PERSON'], x: 0, y: 0, width: 150, height: 150 },
+            { type: DocumentType.IMG, message: 'Gallery 6', acceptTags: ['PERSON'], x: 150, y: 0, width: 150, height: 150 },
+        ];
+    }
+
+    private static createDefaultPreset(): ScrapbookItemConfig[] {
+        return [
+            { type: DocumentType.IMG, message: 'drop a landscape image',   acceptTags: ['LANDSCAPE'],  x:    44, y: -50, width: 200, height: 120 },
+            { type: DocumentType.PDF, message: 'summary pdf', acceptTags: ['word', 'sentence', 'paragraphs'],   x:    45, y: 93,  width: 184, height: 273 },
+            { type: DocumentType.RTF, message: 'sidebar text', acceptTags: ['paragraphs'], x:  250, y: -50,  width:  100, height: 200 },
+            { containerWidth: 200, containerHeight: 425,                              x: -171, y: -54, width: 200, height: 425,
+              children: [{ type: DocumentType.IMG, message: 'drop a person image', acceptTags: ['PERSON'], x: -350, y: 200, width: 162, height: 137 }], },
+        ]; // prettier-ignore
+    }
+
+    private static createCollagePreset(): ScrapbookItemConfig[] {
+        return [
+            { type: DocumentType.IMG, message: 'landscape image',           acceptTags: ['LANDSCAPE'],  x: -174, y: 100, width: 160, height: 150 },
+            { type: DocumentType.IMG, message: 'person image',              acceptTags: ['PERSON'],     x:    0, y: 100, width: 150, height: 150 },
+            { type: DocumentType.RTF, message: 'caption',             acceptTags: ['sentence'],   x: -174, y:    50, width: 150, height: 40 },
+            { type: DocumentType.RTF, message: 'caption', acceptTags: ['sentence'],   x: 0, y:    50, width: 150, height: 40 },
+            { type: DocumentType.RTF, message: 'lengthy description', acceptTags: ['paragraphs'], x:   -180,  y:  -60, width: 350, height: 100 },
+        ]; // prettier-ignore
+    }
+
+    private static createSpotlightPreset(): ScrapbookItemConfig[] {
+        return [
+            { type: DocumentType.RTF, message: 'title text', acceptTags: ['word'], x: 0, y: -30, width: 300, height: 40 },
+            { type: DocumentType.IMG, message: 'drop a landscape image', acceptTags: ['LANDSCAPE'], x: 0, y: 20, width: 300, height: 200 },
+            { type: DocumentType.RTF, message: 'caption text', acceptTags: ['sentence'], x: 0, y: 230, width: 300, height: 50 },
+        ];
+    }
+}
diff --git a/src/client/views/nodes/scrapbook/ScrapbookPresetRegistry.ts b/src/client/views/nodes/scrapbook/ScrapbookPresetRegistry.ts
new file mode 100644
index 000000000..3a2189d00
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookPresetRegistry.ts
@@ -0,0 +1,36 @@
+import { ScrapbookItemConfig } from './ScrapbookPreset';
+import { ScrapbookPresetType } from './ScrapbookPreset';
+
+type PresetGenerator = () => ScrapbookItemConfig[];
+
+// Internal map of preset name to generator
+const presetRegistry = new Map<string, PresetGenerator>();
+
+/**
+ * Register a new scrapbook preset under the given name.
+ */
+export function registerPreset(name: string, gen: PresetGenerator) {
+    presetRegistry.set(name, gen);
+}
+
+/**
+ * List all registered preset names.
+ */
+export function getPresetNames(): string[] {
+    return Array.from(presetRegistry.keys());
+}
+
+/**
+ * Create the config array for the named preset.
+ */
+export function createPreset(name: string): ScrapbookItemConfig[] {
+    const gen = presetRegistry.get(name);
+    if (!gen) throw new Error(`Unknown scrapbook preset: ${name}`);
+    return gen();
+}
+
+// ------------------------
+// Register built-in presets
+import { ScrapbookPreset } from './ScrapbookPreset';
+
+Object.keys(ScrapbookPresetType).forEach(key => registerPreset(key, () => ScrapbookPreset.createPreset(key as ScrapbookPresetType))); // pretter-ignore
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.scss b/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
deleted file mode 100644
index ae647ad36..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
-.scrapbook-slot {
-  position: absolute;
-  background-color: rgba(245, 245, 245, 0.7);
-  border: 2px dashed #ccc;
-  border-radius: 5px;
-  box-sizing: border-box;
-  transition: all 0.2s ease;
-  overflow: hidden;
-
-  &.scrapbook-slot-over {
-    border-color: #4a90e2;
-    background-color: rgba(74, 144, 226, 0.1);
-  }
-
-  &.scrapbook-slot-filled {
-    border-style: solid;
-    border-color: rgba(0, 0, 0, 0.1);
-    background-color: transparent;
-
-    &.scrapbook-slot-over {
-      border-color: #4a90e2;
-      background-color: rgba(74, 144, 226, 0.1);
-    }
-  }
-
-  .scrapbook-slot-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .scrapbook-slot-placeholder {
-    text-align: center;
-    color: #888;
-  }
-
-  .scrapbook-slot-title {
-    font-weight: bold;
-    margin-bottom: 5px;
-  }
-
-  .scrapbook-slot-instruction {
-    font-size: 0.9em;
-    font-style: italic;
-  }
-
-  .scrapbook-slot-content {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  .scrapbook-slot-controls {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 10;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-
-    .scrapbook-slot-remove-btn {
-      background-color: rgba(255, 255, 255, 0.8);
-      border: 1px solid #ccc;
-      border-radius: 50%;
-      width: 20px;
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      font-size: 10px;
-      
-      &:hover {
-        background-color: rgba(255, 0, 0, 0.1);
-      }
-    }
-  }
-
-  &:hover .scrapbook-slot-controls {
-    opacity: 1;
-  }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx b/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
deleted file mode 100644
index 2c8f93778..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-
-//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
-export interface SlotDefinition {
-    id: string;
-    x: number; y: number;
-    defaultWidth: number;
-    defaultHeight: number;
-  }
-  
-  export interface SlotContentMap {
-    slotId: string;
-    docId?: string;
-  }
-  
-  export interface ScrapbookConfig {
-    slots: SlotDefinition[];
-    contents?: SlotContentMap[];
-  }
-  
-  export const DEFAULT_SCRAPBOOK_CONFIG: ScrapbookConfig = {
-    slots: [
-      { id: "slot1", x: 10, y: 10, defaultWidth: 180, defaultHeight: 120 },
-      { id: "slot2", x: 200, y: 10, defaultWidth: 180, defaultHeight: 120 },
-      // …etc
-    ],
-    contents: []
-  };
-  
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts b/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts
deleted file mode 100644
index 686917d9a..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// ScrapbookSlotTypes.ts
-export interface SlotDefinition {
-    id: string;
-    title: string;
-    x: number;
-    y: number;
-    defaultWidth: number;
-    defaultHeight: number;
-  }
-  
-  export interface ScrapbookConfig {
-    slots: SlotDefinition[];
-    contents?: { slotId: string; docId: string }[];
-  }
-  
-  // give it three slots by default:
-  export const DEFAULT_SCRAPBOOK_CONFIG: ScrapbookConfig = {
-    slots: [
-      { id: "main",      title: "Main Content", x: 20,  y: 20,  defaultWidth: 360, defaultHeight: 200 },
-      { id: "notes",     title: "Notes",        x: 20,  y: 240, defaultWidth: 360, defaultHeight: 160 },
-      { id: "resources", title: "Resources",    x: 400, y: 20,  defaultWidth: 320, defaultHeight: 380 },
-    ],
-    contents: [],
-  };
-  
\ No newline at end of file