feat(builder): surface hidden section/pricing/social props + box-model rollout

SectionTypePanel (Accordion/Tabs/Testimonials/Countdown/NumberCounter/ CTASection/CallToAction/FeaturesGrid), PricingStylePanel, and SocialStylePanel all gain a Spacing & Border section (margin/padding per-side, border, box-shadow, opacity), an Animation section, and a Visibility section, wired to the shared SpacingControl/BorderControl/ AnimationControl/VisibilityControl. PricingTable's per-card colors (cardBg/textColor/subColor/featColor/ checkColor/btnBg/btnColor) were previously hard-coded literals computed from featuredBg inside toHtml -- promoted to real optional props (each falling back to the exact prior literal when unset) and exposed via ColorPickerField in PricingStylePanel. SocialStylePanel now exposes SocialLinks' iconShape/gap (already-built props with no control), plus Icon's bgColor/bgShape/bgSize/link and StarRating's filledColor/emptyColor, which the panel's generic iconBgColor/starColor checks never matched since those aren't Icon's or StarRating's real prop names. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Merge PR #13 : enhancement foundation
2026-07-14 06:47:58 -07:00 · 2026-07-14 13:12:22 +00:00 · 2026-07-14 06:07:25 -07:00 · 2026-07-14 06:07:20 -07:00 · 2026-07-14 06:07:14 -07:00 · 2026-07-14 00:12:49 +00:00
161 changed files with 10273 additions and 1123 deletions
@@ -41,14 +41,12 @@ craft/
 │   │   └── Canvas.tsx                  # Craft.js <Frame> with device-width switching
 │   │
 │   ├── components/
-│   │   ├── resolver.ts                 # Component map for Craft.js serialization (20 components)
+│   │   ├── resolver.ts                 # Component map for Craft.js serialization (39 components)
 │   │   ├── layout/
 │   │   │   ├── Container.tsx           # Generic container (div/section/article/header/footer/main)
 │   │   │   ├── Section.tsx             # Full-width section with centered inner container
 │   │   │   ├── ColumnLayout.tsx        # Flex columns (1-6, with split ratios)
-│   │   │   ├── BackgroundSection.tsx   # Section with background image/gradient overlay
-│   │   │   ├── HeaderZone.tsx          # Page-level header zone wrapper
-│   │   │   └── FooterZone.tsx          # Page-level footer zone wrapper
+│   │   │   └── BackgroundSection.tsx   # Section with background image/gradient overlay
 │   │   ├── basic/
 │   │   │   ├── Heading.tsx             # Inline-editable heading (h1-h6)
 │   │   │   ├── TextBlock.tsx           # Inline-editable paragraph
@@ -73,7 +71,8 @@ craft/
 │   ├── panels/
 │   │   ├── topbar/
 │   │   │   ├── TopBar.tsx              # Back button, domain badge, device switcher, undo/redo, save, templates
-│   │   │   └── TemplateModal.tsx       # Template browser with categories and one-click loading
+│   │   │   ├── TemplateModal.tsx       # Template browser with categories and one-click loading
+│   │   │   └── HeadCodeModal.tsx       # Edits SiteDesign.headCode (site-wide, not per-page)
 │   │   ├── left/
 │   │   │   ├── LeftPanel.tsx           # Tabs: Blocks | Pages | Layers | Assets
 │   │   │   ├── BlocksPanel.tsx         # Draggable block toolbox with categories
@@ -81,9 +80,10 @@ craft/
 │   │   │   ├── LayersPanel.tsx         # Component hierarchy tree view
 │   │   │   └── AssetsPanel.tsx         # Asset browser with upload, drag-drop, thumbnails
 │   │   ├── right/
-│   │   │   ├── RightPanel.tsx          # Tabs: Styles | Settings | Head
-│   │   │   ├── GuidedStyles.tsx        # Context-aware style panel (shows selected type)
-│   │   │   └── SiteDesignPanel.tsx     # Site-wide design tokens editor (Basic/Advanced tabs)
+│   │   │   ├── RightPanel.tsx          # Single "Styles" tab -- renders GuidedStyles only
+│   │   │   ├── GuidedStyles.tsx        # Context-aware dispatcher: picks a StylePanel by selected type
+│   │   │   ├── SiteDesignPanel.tsx     # Site-wide design tokens editor (Basic/Advanced tabs)
+│   │   │   └── styles/                 # Per-type StylePanels (Text, Button, Image, Container, Nav, Form, etc.)
 │   │   └── context-menu/
 │   │       └── ContextMenu.tsx         # Right-click context menu (duplicate, copy, paste, delete, etc.)
 │   │
@@ -98,7 +98,8 @@ craft/
 │   │   └── definitions.ts            # 16 template definitions across 4 categories
 │   │
 │   ├── ui/
-│   │   └── SettingsTabs.tsx           # Reusable General/Style/Advanced tabs for component settings
+│   │   ├── AssetPicker.tsx             # Reusable image/video source picker (upload/browse-uploaded/URL), full+compact variants
+│   │   └── Modal.tsx                   # Reusable modal dialog shell
 │   │
 │   ├── constants/
 │   │   └── presets.ts                  # Color, font, spacing, radius, gradient, device width presets
@@ -165,7 +166,7 @@ The PHP wrapper (`/docker/whp/web/site-builder/index.php`) injects `WHP_CONFIG`

 5. **API compatibility** - The save endpoint sends data in the same format as the GrapesJS version (`{ site_id, name, html, css, grapesjs: serializedJson }`), so the PHP backend doesn't need changes.

-6. **Component-based architecture** - Each visual element is a React component that doubles as a Craft.js `UserComponent`. All rendering, settings UI, and HTML export are co-located in one file.
+6. **Component-based architecture** - Each visual element is a React component that doubles as a Craft.js `UserComponent`. Rendering and HTML export are co-located in one file; style editing is handled by a shared per-type `StylePanel` in `src/panels/right/styles/` rather than a per-component settings panel.

 7. **Site Design Tokens** - A `SiteDesignContext` provides 17 design properties (colors, fonts, radii, nav style) that components can reference. Templates import their own design tokens when loaded.

@@ -188,28 +189,21 @@ export const MyComponent: UserComponent<MyComponentProps> = ({ text, style }) =>
  return <div ref={(r) => { if (r) connect(drag(r)); }} style={style}>{text}</div>;
 };

-// 3. Settings panel (rendered in right panel when selected)
-const MyComponentSettings: React.FC = () => {
-  const { actions: { setProp }, props } = useNode((node) => ({
-    props: node.data.props as MyComponentProps,
-  }));
-  return <div>/* preset buttons, inputs, etc. */</div>;
-};
-
-// 4. Craft config (displayName, default props, rules, related settings)
+// 3. Craft config (displayName, default props, rules)
 MyComponent.craft = {
  displayName: 'My Component',
  props: { text: 'Default text', style: {} },
  rules: { canDrag: () => true, canMoveIn: () => false, canMoveOut: () => true },
-  related: { settings: MyComponentSettings },
 };

-// 5. HTML export (static method for serializing to HTML string)
+// 4. HTML export (static method for serializing to HTML string)
 (MyComponent as any).toHtml = (props: MyComponentProps, childrenHtml: string) => {
  return { html: `<div style="...">${childrenHtml}</div>` };
 };
 ```

+Style editing for the new type is added separately as a `StylePanel` under `src/panels/right/styles/` (or reuses an existing generic one), and wired into `GuidedStyles.tsx`'s type dispatch -- components no longer carry their own settings UI.
+
 ### Component Resolver

 All components must be registered in `src/components/resolver.ts`. This map is passed to `<Editor resolver={componentResolver}>` so Craft.js can serialize/deserialize the node tree.
@@ -270,7 +264,7 @@ The editor auto-saves every 30 seconds when running inside WHP. The save status
 - `whpConfig` - The full config object (or null in standalone mode)
 - `isWHP` - Boolean shorthand for whether we're running inside WHP

-## All Components (22)
+## All Components (39)

 | # | Component | Type | File | Features |
 |---|-----------|------|------|----------|
@@ -278,24 +272,41 @@ The editor auto-saves every 30 seconds when running inside WHP. The save status
 | 2 | Section | Layout | `layout/Section.tsx` | Full-width with centered inner container, bg color/gradient, vertical padding, inner max-width |
 | 3 | ColumnLayout | Layout | `layout/ColumnLayout.tsx` | 1-6 columns, split ratios (50-50, 30-70, 70-30, 33-33-33, 25-25-25-25, etc.), gap control |
 | 4 | BackgroundSection | Layout | `layout/BackgroundSection.tsx` | Section with background image, gradient overlay, parallax-ready |
-| 5 | HeaderZone | Layout | `layout/HeaderZone.tsx` | Page-level header wrapper zone, used by PageContext |
-| 6 | FooterZone | Layout | `layout/FooterZone.tsx` | Page-level footer wrapper zone, used by PageContext |
-| 7 | Heading | Basic | `basic/Heading.tsx` | Inline-editable, h1-h6 level, color, font family/size/weight, text align |
-| 8 | TextBlock | Basic | `basic/TextBlock.tsx` | Inline-editable paragraph, color, font family/size/weight, text align, line height |
-| 9 | ButtonLink | Basic | `basic/ButtonLink.tsx` | Link text/URL/target, 8 color presets (auto text contrast), radius, padding, font size |
+| 5 | Heading | Basic | `basic/Heading.tsx` | Inline-editable, h1-h6 level, color, font family/size/weight, text align |
+| 6 | TextBlock | Basic | `basic/TextBlock.tsx` | Inline-editable paragraph, color, font family/size/weight, text align, line height |
+| 7 | ButtonLink | Basic | `basic/ButtonLink.tsx` | Link text/URL/target, 8 color presets (auto text contrast), radius, padding, font size |
+| 8 | Logo | Basic | `basic/Logo.tsx` | Text or image logo, link href, font family/size/weight, image width |
+| 9 | Menu | Basic | `basic/Menu.tsx` | Link list with optional CTA styling, horizontal/vertical orientation, alignment, hover colors |
 | 10 | Navbar | Basic | `basic/Navbar.tsx` | Text or image logo, page links, external links, CTA buttons, light/dark nav style |
 | 11 | Footer | Basic | `basic/Footer.tsx` | Footer with links, copyright, social links |
 | 12 | Divider | Basic | `basic/Divider.tsx` | Horizontal rule with color and thickness controls |
 | 13 | Spacer | Basic | `basic/Spacer.tsx` | Vertical spacing element with height control |
-| 14 | ImageBlock | Media | `media/ImageBlock.tsx` | SVG placeholder, URL input, upload, browse assets, alt text, width/height, object-fit, radius |
-| 15 | VideoBlock | Media | `media/VideoBlock.tsx` | YouTube, Vimeo, direct files (.mp4/.webm/.ogg), background mode, autoplay, loop |
-| 16 | HeroSimple | Section | `sections/HeroSimple.tsx` | Pre-built hero with heading, subtext, CTA button, gradient/color background |
-| 17 | FeaturesGrid | Section | `sections/FeaturesGrid.tsx` | 3-column feature cards with icons, titles, descriptions |
-| 18 | CTASection | Section | `sections/CTASection.tsx` | Call-to-action banner with heading, text, button |
-| 19 | FormContainer | Form | `forms/FormContainer.tsx` | Form wrapper with action URL and method |
-| 20 | InputField | Form | `forms/InputField.tsx` | Text input with label, placeholder, type (text/email/tel/password/number) |
-| 21 | TextareaField | Form | `forms/TextareaField.tsx` | Textarea with label and placeholder |
-| 22 | FormButton | Form | `forms/FormButton.tsx` | Submit button with color and style controls |
+| 14 | Icon | Basic | `basic/Icon.tsx` | Font Awesome icon, size/color, background shape, optional link |
+| 15 | ImageBlock | Media | `media/ImageBlock.tsx` | SVG placeholder, URL input, upload, browse assets, alt text, width/height, object-fit, radius |
+| 16 | VideoBlock | Media | `media/VideoBlock.tsx` | YouTube, Vimeo, direct files (.mp4/.webm/.ogg), background mode, autoplay, loop |
+| 17 | MapEmbed | Media | `media/MapEmbed.tsx` | Embedded map by address, zoom level, height |
+| 18 | HeroSimple | Section | `sections/HeroSimple.tsx` | Pre-built hero with heading, subtext, CTA button, gradient/color background |
+| 19 | FeaturesGrid | Section | `sections/FeaturesGrid.tsx` | 3-column feature cards with icons, titles, descriptions |
+| 20 | CTASection | Section | `sections/CTASection.tsx` | Call-to-action banner with heading, text, button |
+| 21 | Countdown | Section | `sections/Countdown.tsx` | Countdown timer to a target date, heading, digit/label colors |
+| 22 | Testimonials | Section | `sections/Testimonials.tsx` | Grid or single-layout testimonial cards, star color, card background |
+| 23 | FormContainer | Form | `forms/FormContainer.tsx` | Form wrapper with action URL and method |
+| 24 | InputField | Form | `forms/InputField.tsx` | Text input with label, placeholder, type (text/email/tel/password/number) |
+| 25 | TextareaField | Form | `forms/TextareaField.tsx` | Textarea with label and placeholder |
+| 26 | FormButton | Form | `forms/FormButton.tsx` | Submit button with color and style controls |
+| 27 | ContactForm | Form | `forms/ContactForm.tsx` | Configurable field list, recipient email, success message or thank-you URL redirect |
+| 28 | StarRating | Basic | `basic/StarRating.tsx` | Star rating display, rating/max stars, filled/empty color |
+| 29 | SocialLinks | Basic | `basic/SocialLinks.tsx` | Social icon links, size/color/shape, gap, alignment |
+| 30 | CallToAction | Section | `sections/CallToAction.tsx` | Heading/description with 1-2 buttons, color/gradient/image background with overlay |
+| 31 | Accordion | Section | `sections/Accordion.tsx` | Expand/collapse item list, header/content colors |
+| 32 | Tabs | Section | `sections/Tabs.tsx` | Tabbed content panels, active/inactive tab colors |
+| 33 | PricingTable | Section | `sections/PricingTable.tsx` | Pricing plan cards, featured plan highlight, bullet list |
+| 34 | Gallery | Section | `sections/Gallery.tsx` | Image grid gallery, configurable columns/gap, optional lightbox |
+| 35 | ContentSlider | Section | `sections/ContentSlider.tsx` | Auto-playing image/content slider, dots/arrows, configurable interval |
+| 36 | NumberCounter | Section | `sections/NumberCounter.tsx` | Animated stat counters, columns, number/label colors |
+| 37 | SubscribeForm | Form | `forms/SubscribeForm.tsx` | Inline/stacked email signup form, heading, button color |
+| 38 | SearchBar | Basic | `basic/SearchBar.tsx` | Search input with optional button, placeholder text |
+| 39 | HtmlBlock | Basic | `basic/HtmlBlock.tsx` | Raw/custom HTML embed block, sanitized on export |

 ## Site Design Tokens

@@ -351,7 +362,7 @@ Templates are loaded via the Template Modal (opened from TopBar). Loading a temp
 ## Multi-Page System

 Pages are managed through `PageContext`:
- Each page has: `id`, `name`, `slug`, `craftState`, `headCode`
+- Each page has: `id`, `name`, `slug`, `craftState` (`headCode` is site-wide only, on `SiteDesignContext`/`SiteDesign`, edited via the TopBar's Head Code modal -- not a per-page field)
 - Header and Footer are stored as separate "page" entries with fixed IDs (`__header__`, `__footer__`)
 - Page switching serializes the current canvas, stores it, then deserializes the target page
 - Header/Footer editing puts the canvas in a distinct mode
@@ -392,21 +403,22 @@ The Assets panel (`AssetsPanel.tsx`) provides:
 - Delete asset
 - Integration with WHP API for server-side storage

-Image and Video components also have inline asset selection (browse button in settings).
+Image and video fields elsewhere in the editor (ImageStylePanel, MediaStylePanel, HeroStylePanel, NavStylePanel, BackgroundSectionStylePanel, and array-editor cards like FeaturesEditor) use the shared `AssetPicker` (`src/ui/AssetPicker.tsx`) for upload / browse-uploaded / paste-URL, in a `full` or `compact` variant depending on space.

 ## Adding New Components

 1. Create `src/components/<category>/<ComponentName>.tsx` following the pattern above
 2. Add the component to `src/components/resolver.ts`
 3. Add a block entry in `src/panels/left/BlocksPanel.tsx` under the appropriate category
-4. Implement the `toHtml` static for HTML export
-5. Build and test: `npm run dev`, drag the block onto the canvas, verify settings panel, verify HTML export
+4. Add or extend a `StylePanel` in `src/panels/right/styles/` and wire it into `GuidedStyles.tsx`'s type dispatch so the new component is editable when selected
+5. Implement the `toHtml` static for HTML export
+6. Build and test: `npm run dev`, drag the block onto the canvas, verify the style panel, verify HTML export

 ### Checklist for a new component:
 - [ ] Props interface with `style?: CSSProperties`
 - [ ] `useNode()` with `connect(drag(ref))` on the root element
- [ ] Settings panel using `useNode()` with `setProp()`
- [ ] `.craft` config with `displayName`, default `props`, `rules`, `related.settings`
+- [ ] `StylePanel` entry (new or reused) wired into `GuidedStyles.tsx`
+- [ ] `.craft` config with `displayName`, default `props`, `rules`
 - [ ] `.toHtml()` static method using `cssPropsToString()`
 - [ ] Registered in `resolver.ts`
 - [ ] Block added to `BlocksPanel.tsx`
@@ -421,7 +433,7 @@ The editor uses a dark theme defined via CSS custom properties in `src/styles/ed
 - **Border:** `#2d2d3a`
 - **Font:** Inter

-All editor chrome (panels, topbar, settings) is styled via `editor.css`. User content on the canvas uses inline styles exclusively.
+All editor chrome (panels, topbar, style panels) is styled via `editor.css`. User content on the canvas uses inline styles exclusively.

 ## Presets

@@ -446,7 +458,7 @@ Every component has a static `toHtml(props, childrenHtml)` method. The `html-exp

 ## Testing Approach

- **Manual testing:** Run `npm run dev`, drag components, edit props, verify settings panels
+- **Manual testing:** Run `npm run dev`, drag components, edit props, verify style panels
 - **Type checking:** `tsc --noEmit` (part of build step)
 - **HTML export:** Verify `toHtml()` output matches expected HTML structure
 - **Device preview:** Switch between desktop/tablet/mobile and verify responsive behavior
@@ -455,9 +467,9 @@ Every component has a static `toHtml(props, childrenHtml)` method. The `html-exp
 ## Development Notes

 - Path alias `@/` maps to `./src/` (configured in both tsconfig.json and vite.config.ts)
- `GuidedStyles` shows selected component type and delegates to per-component settings panels
+- `GuidedStyles` shows the selected component type and dispatches to a shared `StylePanel` in `src/panels/right/styles/` (components no longer carry their own settings UI)
 - Text components (Heading, TextBlock) use `contentEditable` for inline editing when selected
 - Button/link navigation is prevented in the editor via `e.preventDefault()`
 - Image upload integrates with WHP API; in standalone mode falls back to local `blob:` URLs
 - Auto-save runs every 30 seconds when connected to WHP API
- The SettingsTabs UI component provides a reusable General/Style/Advanced tab layout for component settings
+- `AssetPicker` (`src/ui/AssetPicker.tsx`) is the shared upload/browse/URL control reused across StylePanels for every image and video field
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>Site Builder</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -8,6 +8,15 @@
      "name": "whp-site-builder",
      "version": "2.0.0",
      "dependencies": {
+        "@codemirror/autocomplete": "^6.20.3",
+        "@codemirror/commands": "^6.10.4",
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-javascript": "^6.2.5",
+        "@codemirror/language": "^6.12.4",
+        "@codemirror/state": "^6.7.1",
+        "@codemirror/theme-one-dark": "^6.1.3",
+        "@codemirror/view": "^6.43.6",
        "@craftjs/core": "^0.2.10",
        "@craftjs/layers": "^0.2.7",
        "dompurify": "^3.4.5",
@@ -373,6 +382,133 @@
        "specificity": "bin/cli.js"
      }
    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
+      "integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.4.tgz",
+      "integrity": "sha512-Ryk9y9T0FFVF0cUGhAknveAyUOl/A1qReTFi+qPKtOh2Z9F4AUBz3XOrYD4ZEgZirdugVzHvd/2/Wcwy5OliTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.7.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.11",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
+      "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.12"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+      "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.4.tgz",
+      "integrity": "sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.7.tgz",
+      "integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.42.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.7.1.tgz",
+      "integrity": "sha512-9QzNDgE4EYDnAHfrTlR2lwiPciiOymLtwKK+8yHQzCc7GXhAP9xdEbEJFy2IWB1j9UGUl9BsgMmTo/ImA02T7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.43.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.6.tgz",
+      "integrity": "sha512-EVunGSYN1wz1p75WY1s3Xg7t3i8Yol0kGZGizNdX9BUFgMFILYVe8/u6EVpo7Ff5PwbZuILb4QAq7IZoKzIEQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.7.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
    "node_modules/@craftjs/core": {
      "version": "0.2.12",
      "resolved": "https://registry.npmjs.org/@craftjs/core/-/core-0.2.12.tgz",
@@ -1093,6 +1229,69 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@lezer/common": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.2.tgz",
+      "integrity": "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.4.tgz",
+      "integrity": "sha512-N+tn9tej2hPvyKgHEApMOQfHczDJCwxrRFS3SPn9QjYN+uwHvEDnCgKRrb3mxDYxRS8sKMM8fhC3+lc04Abz5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz",
+      "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
+      "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.10.tgz",
+      "integrity": "sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.3.tgz",
+      "integrity": "sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==",
+      "license": "MIT"
+    },
    "node_modules/@playwright/test": {
      "version": "1.59.1",
      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
@@ -1873,6 +2072,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/crelt": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
+      "integrity": "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==",
+      "license": "MIT"
+    },
    "node_modules/css-color-keywords": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
@@ -2686,6 +2891,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
    "node_modules/styled-components": {
      "version": "6.3.12",
      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.3.12.tgz",
@@ -3096,6 +3307,12 @@
        }
      }
    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
    "node_modules/w3c-xmlserializer": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -14,6 +14,15 @@
    "test:unit:watch": "vitest"
  },
  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.6",
    "@craftjs/core": "^0.2.10",
    "@craftjs/layers": "^0.2.7",
    "dompurify": "^3.4.5",
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Editor } from '@craftjs/core';
 import { EditorShell } from './editor/EditorShell';
+import { RenderNode } from './editor/RenderNode';
 import { componentResolver } from './components/resolver';
 import { WhpConfig } from './types';
 import { EditorConfigProvider } from './state/EditorConfigContext';
@@ -23,7 +24,7 @@ export const App: React.FC<AppProps> = ({ whpConfig }) => {
  return (
    <EditorConfigProvider config={whpConfig}>
      <SiteDesignProvider>
-        <Editor resolver={componentResolver} enabled={true}>
+        <Editor resolver={componentResolver} enabled={true} onRender={RenderNode}>
          <PageProvider>
            <SitesmithProvider>
              <EditorShell />
@@ -0,0 +1,54 @@
+import { describe, test, expect } from 'vitest';
+import { ButtonLink } from './ButtonLink';
+
+const toHtml = (ButtonLink as any).toHtml;
+
+describe('ButtonLink.toHtml href sanitization (attacker-controlled `href` prop)', () => {
+  test('a javascript: URL is neutralized', () => {
+    const { html } = toHtml({ href: 'javascript:alert(1)', text: 'Click' }, '');
+    expect(html).not.toContain('javascript:alert');
+  });
+
+  test('a quote-breakout href does not escape the href attribute', () => {
+    const malicious = '"><script>alert(1)</script>';
+    const { html } = toHtml({ href: malicious, text: 'Click' }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a normal href still renders correctly', () => {
+    const { html } = toHtml({ href: 'https://example.com', text: 'Click' }, '');
+    expect(html).toContain('href="https://example.com"');
+  });
+});
+
+describe('ButtonLink.toHtml target (boolean-gated, not raw interpolation)', () => {
+  test('an attribute-breakout value for target does not reach the output raw', () => {
+    const malicious = '_blank" onmouseover="alert(1)' as any;
+    const { html } = toHtml({ href: '#', text: 'x', target: malicious }, '');
+    expect(html).not.toContain('onmouseover');
+  });
+
+  test('target="_blank" still adds rel=noopener noreferrer', () => {
+    const { html } = toHtml({ href: '#', text: 'x', target: '_blank' }, '');
+    expect(html).toContain('target="_blank"');
+    expect(html).toContain('rel="noopener noreferrer"');
+  });
+});
+
+describe('ButtonLink.toHtml text escaping (attacker-controlled `text` prop)', () => {
+  test('a tag-breakout attempt in text is neutralized (no injected element)', () => {
+    const { html } = toHtml({ href: '#', text: '</a><img src=x onerror=alert(1)>' }, '');
+    expect(html).not.toContain('<img');
+    expect(html).toContain('&lt;img');
+  });
+
+  test('ampersand is escaped for well-formed text content (consistency with escapeHtml)', () => {
+    const { html } = toHtml({ href: '#', text: 'Tom & Jerry' }, '');
+    expect(html).toContain('Tom &amp; Jerry');
+  });
+
+  test('a normal text value still renders unchanged', () => {
+    const { html } = toHtml({ href: '#', text: 'Click Me' }, '');
+    expect(html).toContain('>Click Me</a>');
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';

 interface ButtonLinkProps {
  text?: string;
@@ -78,7 +78,7 @@ ButtonLink.craft = {
    textDecoration: 'none',
    ...props.style,
  });
-  const escapedText = (props.text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const escapedText = escapeHtml(props.text || '');
  const targetAttr = props.target === '_blank' ? ' target="_blank" rel="noopener noreferrer"' : '';
  return {
    html: `<a href="${escapeAttr(safeUrl(props.href || '#'))}"${targetAttr}${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</a>`,
@@ -0,0 +1,34 @@
+import { describe, test, expect } from 'vitest';
+import { Divider } from './Divider';
+
+const toHtml = (Divider as any).toHtml;
+
+describe('Divider.toHtml normal rendering', () => {
+  test('renders thickness/color into the border-top style', () => {
+    const { html } = toHtml({ thickness: '2px', color: '#ff0000' }, '');
+    expect(html).toContain('border-top:2px solid #ff0000');
+  });
+});
+
+describe('Divider.toHtml XSS hardening (thickness/color into style=)', () => {
+  test('a thickness value with an attribute-breakout string cannot escape style=""', () => {
+    const malicious = '1px" onmouseover="alert(1)';
+    const { html } = toHtml({ thickness: malicious as any, color: '#000' }, '');
+    // The quote must not survive unescaped -- otherwise it closes style=""
+    // early and "onmouseover" becomes a live, attacker-controlled attribute.
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
+  });
+
+  test('a color value with a </style><script> breakout is neutralized', () => {
+    const malicious = '#000</style><script>alert(1)</script>';
+    const { html } = toHtml({ thickness: '1px', color: malicious as any }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a non-string thickness (object) does not raw-splice into style=""', () => {
+    const malicious = { toString: () => '1px" onmouseover="alert(1)' };
+    const { html } = toHtml({ thickness: malicious as any, color: '#000' }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+});
@@ -0,0 +1,22 @@
+import { describe, test, expect } from 'vitest';
+import { Footer } from './Footer';
+
+const toHtml = (Footer as any).toHtml;
+
+describe('Footer.toHtml text escaping (attacker-controlled `text` prop)', () => {
+  test('a tag-breakout attempt in text is neutralized (no injected element)', () => {
+    const { html } = toHtml({ text: '</footer><img src=x onerror=alert(1)>' }, '');
+    expect(html).not.toContain('<img');
+    expect(html).toContain('&lt;img');
+  });
+
+  test('ampersand is escaped for well-formed text content (consistency with escapeHtml)', () => {
+    const { html } = toHtml({ text: 'Terms & Conditions' }, '');
+    expect(html).toContain('Terms &amp; Conditions');
+  });
+
+  test('a normal copyright text value still renders unchanged', () => {
+    const { html } = toHtml({ text: '© 2026 MySite. All rights reserved.' }, '');
+    expect(html).toContain('© 2026 MySite. All rights reserved.');
+  });
+});
@@ -1,6 +1,7 @@
 import React, { CSSProperties, useCallback, useRef, useEffect } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
+import { escapeHtml } from '../../utils/escape';

 interface FooterProps {
  text?: string;
@@ -107,6 +108,6 @@ Footer.craft = {
    textAlign: 'center',
    ...props.style,
  });
-  const escapedText = (props.text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const escapedText = escapeHtml(props.text || '');
  return { html: `<footer${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</footer>` };
 };
@@ -0,0 +1,58 @@
+import { describe, test, expect } from 'vitest';
+import { Heading } from './Heading';
+
+const toHtml = (Heading as any).toHtml;
+
+describe('Heading.toHtml level allowlist (adversarial re-review, same class as C1)', () => {
+  test('a malicious level value clamps to h2 -- no injected <img>, no broken-out tag', () => {
+    const { html } = toHtml({ text: 'x', level: 'h2><img src=x onerror=alert(1)' }, '');
+    expect(html).not.toContain('<img');
+    expect(html).not.toContain('onerror');
+    expect(html.startsWith('<h2')).toBe(true);
+    expect(html.endsWith('</h2>')).toBe(true);
+  });
+
+  test('a numeric out-of-range level (99) clamps to h2', () => {
+    const { html } = toHtml({ text: 'x', level: 99 as any }, '');
+    expect(html.startsWith('<h2')).toBe(true);
+    expect(html.endsWith('</h2>')).toBe(true);
+  });
+
+  test('a non-heading string level clamps to h2', () => {
+    const { html } = toHtml({ text: 'x', level: 'script' as any }, '');
+    expect(html.startsWith('<h2')).toBe(true);
+    expect(html).not.toContain('<script');
+  });
+
+  test('a normal valid level (h4) still emits <h4', () => {
+    const { html } = toHtml({ text: 'x', level: 'h4' }, '');
+    expect(html).toContain('<h4');
+    expect(html).toContain('</h4>');
+  });
+
+  test('all valid levels h1-h6 still work', () => {
+    for (const level of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']) {
+      const { html } = toHtml({ text: 'x', level }, '');
+      expect(html.startsWith(`<${level}`)).toBe(true);
+      expect(html.endsWith(`</${level}>`)).toBe(true);
+    }
+  });
+});
+
+describe('Heading.toHtml text escaping (attacker-controlled `text` prop)', () => {
+  test('a tag-breakout attempt in text is neutralized (no injected element)', () => {
+    const { html } = toHtml({ text: '</h2><img src=x onerror=alert(1)>', level: 'h2' }, '');
+    expect(html).not.toContain('<img');
+    expect(html).toContain('&lt;img');
+  });
+
+  test('ampersand is escaped for well-formed text content (consistency with escapeHtml)', () => {
+    const { html } = toHtml({ text: 'Fish & Chips', level: 'h2' }, '');
+    expect(html).toContain('Fish &amp; Chips');
+  });
+
+  test('a normal text value still renders unchanged', () => {
+    const { html } = toHtml({ text: 'Hello world', level: 'h2' }, '');
+    expect(html).toBe('<h2>Hello world</h2>');
+  });
+});
@@ -1,9 +1,20 @@
 import React, { CSSProperties, useCallback, useRef, useEffect } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
+import { escapeHtml } from '../../utils/escape';

 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

+// `level` is settable via the AI `update_props` path and from deserialized
+// saved state -- neither type-checked at runtime -- and is interpolated
+// directly into the tag position (`React.createElement(level, ...)` /
+// `<${tag}` in `toHtml`). A malicious value like `h2><img src=x
+// onerror=alert(1)` (or a non-h1-6 string) must never reach that position
+// unchecked. Anything not in this allowlist clamps to `'h2'`.
+const ALLOWED_HEADING_LEVELS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+const sanitizeHeadingLevel = (level: unknown): HeadingLevel =>
+  (ALLOWED_HEADING_LEVELS as readonly unknown[]).includes(level) ? (level as HeadingLevel) : 'h2';
+
 interface HeadingProps {
  text?: string;
  level?: HeadingLevel;
@@ -30,6 +41,7 @@ export const Heading: UserComponent<HeadingProps> = ({
    selected: node.events.selected,
  }));

+  const safeLevel = sanitizeHeadingLevel(level);
  const elRef = useRef<HTMLElement | null>(null);
  const editedTextRef = useRef<string | null>(null);

@@ -59,7 +71,7 @@ export const Heading: UserComponent<HeadingProps> = ({
    }
  }, [text, selected]);

-  return React.createElement(level, {
+  return React.createElement(safeLevel, {
    ref: (ref: HTMLElement | null): void => {
      elRef.current = ref;
      if (ref) connect(drag(ref));
@@ -98,8 +110,8 @@ Heading.craft = {
 };

 (Heading as any).toHtml = (props: HeadingProps, _childrenHtml: string) => {
-  const tag = props.level || 'h2';
-  const safeText = (props.text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const tag = sanitizeHeadingLevel(props.level);
+  const safeText = escapeHtml(props.text || '');
  const styleStr = cssPropsToString(props.style);
  return { html: `<${tag}${styleStr ? ` style="${styleStr}"` : ''}>${safeText}</${tag}>` };
 };
@@ -21,3 +21,46 @@ describe('purifyHtml', () => {
    expect(purifyHtml('<form><input name="x"></form>')).not.toContain('<form');
  });
 });
+
+describe('purifyHtml iframe sandboxing (M-6)', () => {
+  test('forces a restrictive sandbox attribute onto every iframe', () => {
+    const out = purifyHtml('<iframe src="https://example.com/"></iframe>');
+    expect(out).toMatch(/<iframe[^>]*\bsandbox="[^"]+"/);
+  });
+
+  test('sandbox value omits allow-top-navigation (no top-level nav escape)', () => {
+    const out = purifyHtml('<iframe src="https://example.com/"></iframe>');
+    const sandbox = out.match(/sandbox="([^"]*)"/)![1];
+    expect(sandbox).not.toMatch(/allow-top-navigation/);
+  });
+
+  test('legitimate embeds (YouTube) still work and get sandboxed too', () => {
+    const out = purifyHtml('<iframe src="https://www.youtube.com/embed/abc" allowfullscreen></iframe>');
+    expect(out).toContain('youtube.com/embed/abc');
+    expect(out).toMatch(/<iframe[^>]*\bsandbox="[^"]+"/);
+  });
+
+  test('adds referrerpolicy=no-referrer to iframes', () => {
+    const out = purifyHtml('<iframe src="https://example.com/"></iframe>');
+    expect(out).toContain('referrerpolicy="no-referrer"');
+  });
+
+  test('script/on* attributes are still stripped alongside the sandboxed iframe', () => {
+    const out = purifyHtml('<iframe src="https://example.com/" onload="alert(1)"></iframe><script>alert(2)</script>');
+    expect(out).not.toContain('onload');
+    expect(out).not.toContain('<script');
+  });
+
+  test('repeated calls do not leak/accumulate the hook (no duplicate sandbox attr, no cross-call state)', () => {
+    purifyHtml('<iframe src="https://a.example/"></iframe>');
+    purifyHtml('<iframe src="https://b.example/"></iframe>');
+    const out = purifyHtml('<iframe src="https://c.example/"></iframe>');
+    const sandboxMatches = out.match(/sandbox="/g) || [];
+    expect(sandboxMatches.length).toBe(1);
+  });
+
+  test('a non-iframe element sanitized alongside an iframe is not touched by the hook', () => {
+    const out = purifyHtml('<p>hi</p><iframe src="https://example.com/"></iframe>');
+    expect(out).toContain('<p>hi</p>');
+  });
+});
@@ -10,4 +10,16 @@ describe('HtmlBlock.toHtml sanitizes raw code (A4.1)', () => {
    expect(html).not.toContain('onclick');
    expect(html).toContain('<p>hi</p>');
  });
+
+  test('does not wrap output in an unsanitized element carrying the style prop raw', () => {
+    // toHtml only ever returns the sanitized `code` blob -- there is no
+    // wrapper <div style="..."> in the exported HTML, so a malicious
+    // `style` prop (e.g. an attacker-controlled object with a breakout
+    // toString()) has nothing to splice into.
+    const malicious = { toString: () => 'color:red" onmouseover="alert(1)' } as any;
+    const { html } = toHtml({ code: '<p>hi</p>', style: malicious }, '');
+    expect(html).not.toMatch(/onmouseover/);
+    expect(html).not.toMatch(/<div/);
+    expect(html).toBe('<p>hi</p>');
+  });
 });
@@ -24,14 +24,42 @@ const PURIFY_CONFIG = {
    'href','src','alt','title','target','rel',
    'width','height','class',
    'allowfullscreen','allow','frameborder',
+    'sandbox','referrerpolicy',
  ],
  ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel|data:image\/[a-z]+;base64,):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
  FORBID_TAGS: ['script','style','object','embed','link','meta','form','input','button','select','textarea'],
  FORBID_ATTR: [/^on/i],
 };

+// M-6: `<iframe>` is allowed (maps/video embeds are a legitimate use case)
+// but an iframe with a `src` and NO `sandbox` attribute is a clickjacking/
+// phishing vector (DOMPurify already strips <script>/on*=, but an
+// unsandboxed iframe still gets full script execution, same-origin-ish
+// access via document.domain tricks, top-level navigation, etc., inside
+// itself). This hook force-sets a restrictive sandbox on every iframe that
+// survives sanitization, keeping `allow-scripts`/`allow-same-origin`/
+// `allow-popups`/`allow-forms` (needed for interactive maps/video/oauth
+// popups) but deliberately omitting `allow-top-navigation` so an embedded
+// page can never redirect/hijack the parent tab.
+const IFRAME_SANDBOX_HOOK = (node: Element): void => {
+  if (node.nodeName === 'IFRAME') {
+    node.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups allow-forms');
+    node.setAttribute('referrerpolicy', 'no-referrer');
+  }
+};
+
 export function purifyHtml(input: string): string {
-  return DOMPurify.sanitize(input || '', PURIFY_CONFIG as any) as unknown as string;
+  // Hook is added immediately before sanitize() and removed immediately
+  // after, scoped tightly to this single call -- so it can never leak onto
+  // (or accumulate duplicate copies across) any other DOMPurify.sanitize()
+  // call elsewhere in the app, and repeated purifyHtml() calls never stack
+  // multiple copies of the same hook.
+  DOMPurify.addHook('afterSanitizeAttributes', IFRAME_SANDBOX_HOOK);
+  try {
+    return DOMPurify.sanitize(input || '', PURIFY_CONFIG as any) as unknown as string;
+  } finally {
+    DOMPurify.removeHook('afterSanitizeAttributes', IFRAME_SANDBOX_HOOK as any);
+  }
 }

 export const HtmlBlock: UserComponent<HtmlBlockProps> = ({ code = '', style = {} }) => {
@@ -0,0 +1,72 @@
+import { describe, test, expect } from 'vitest';
+import { Icon } from './Icon';
+
+const toHtml = (Icon as any).toHtml;
+
+describe('Icon.toHtml normal rendering', () => {
+  test('renders icon class, size/color style, and link href', () => {
+    const { html } = toHtml({ icon: 'fa-star', size: '32px', color: '#3b82f6', link: 'https://example.com' }, '');
+    expect(html).toContain('class="fa fa-star"');
+    expect(html).toContain('font-size:32px');
+    expect(html).toContain('color:#3b82f6');
+    expect(html).toContain('href="https://example.com"');
+  });
+});
+
+describe('Icon.toHtml XSS hardening', () => {
+  test('an icon name with an attribute-breakout string is escaped, not raw-concatenated', () => {
+    const malicious = 'star"><script>alert(1)</script>';
+    const { html } = toHtml({ icon: malicious as any }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toMatch(/class="fa star"><script>/);
+  });
+
+  test('a size value with an attribute-breakout string cannot escape style=""', () => {
+    const malicious = '24px" onerror="alert(1)';
+    const { html } = toHtml({ size: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onerror="/);
+  });
+
+  test('a bgSize/bgColor breakout via background wrapper is neutralized', () => {
+    const malicious = '56px" onmouseover="alert(1)';
+    const { html } = toHtml({ bgShape: 'circle', bgColor: '#fff', bgSize: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('a javascript: link is neutralized to an empty href', () => {
+    const { html } = toHtml({ link: 'javascript:alert(1)' }, '');
+    expect(html).not.toContain('javascript:alert(1)');
+  });
+
+  test('a link value with an attribute-breakout string cannot escape href=""', () => {
+    const malicious = 'https://example.com" onclick="alert(1)';
+    const { html } = toHtml({ link: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onclick="/);
+  });
+});
+
+describe('Icon.toHtml bgShape/bgColor/bgSize rendering (built but, until this panel update, unexposed)', () => {
+  test('bgShape="circle" + bgColor render a colored 50%-radius background box', () => {
+    const { html } = toHtml({ icon: 'fa-star', bgShape: 'circle', bgColor: '#3b82f6', bgSize: '64px' }, '');
+    expect(html).toContain('background-color:#3b82f6');
+    expect(html).toContain('border-radius:50%');
+    expect(html).toContain('width:64px');
+    expect(html).toContain('height:64px');
+  });
+
+  test('bgShape="none" (default) renders the bare icon with no background wrapper', () => {
+    const { html } = toHtml({ icon: 'fa-star' }, '');
+    expect(html).not.toContain('background-color');
+  });
+});
+
+describe('Icon.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (Icon as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -12,6 +12,11 @@ interface IconProps {
  bgSize?: string;
  link?: string;
  style?: CSSProperties;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 function getBgBorderRadius(shape: string): string {
@@ -96,6 +101,11 @@ Icon.craft = {
    bgSize: '56px',
    link: '',
    style: {},
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -0,0 +1,62 @@
+import { describe, test, expect } from 'vitest';
+import { Logo } from './Logo';
+
+/*
+ * Regression coverage for Logo.toHtml -- audited during the toHtml
+ * attribute-XSS sweep (see task-cssxss-brief.md) and found already fully
+ * sanitized (href/src via escapeAttr(safeUrl()), alt/text via escapeAttr /
+ * escapeHtml, imageWidth/fontSize/etc. routed through cssPropsToString which
+ * sanitizes every value regardless of declared type). No fix was required;
+ * these tests lock that behavior in against regressions.
+ */
+const toHtml = (Logo as any).toHtml;
+
+describe('Logo.toHtml href sanitization (attacker-controlled `href` prop)', () => {
+  test('a javascript: URL is neutralized', () => {
+    const { html } = toHtml({ href: 'javascript:alert(1)' }, '');
+    expect(html).not.toContain('javascript:alert');
+  });
+
+  test('a quote-breakout href does not escape the anchor attribute', () => {
+    const malicious = '"><script>alert(1)</script>';
+    const { html } = toHtml({ href: malicious }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+});
+
+describe('Logo.toHtml image src/alt sanitization (type="image")', () => {
+  test('a javascript: imageSrc is neutralized', () => {
+    const { html } = toHtml({ type: 'image', imageSrc: 'javascript:alert(1)', text: 'Logo' }, '');
+    expect(html).not.toContain('javascript:alert');
+  });
+
+  test('a quote-breakout alt (from `text`) does not escape the img attribute', () => {
+    const malicious = '"><script>alert(1)</script>';
+    const { html } = toHtml({ type: 'image', imageSrc: 'https://example.com/logo.png', text: malicious }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a non-numeric imageWidth (attribute-breakout attempt) does not escape the style attribute', () => {
+    const malicious = '1"><script>alert(1)</script>';
+    const { html } = toHtml({ type: 'image', imageSrc: 'https://example.com/logo.png', imageWidth: malicious }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+});
+
+describe('Logo.toHtml text-logo styling sanitization', () => {
+  test('a quote-breakout color does not escape the span style attribute', () => {
+    const malicious = 'red" onmouseover="alert(1)';
+    const { html } = toHtml({ type: 'text', text: 'MySite', color: malicious }, '');
+    // The raw `"` must never survive un-escaped inside the style attribute
+    // value -- if it did, `onmouseover` would land as a REAL new HTML
+    // attribute (breakout) rather than being inert CSS-value garbage inside
+    // a properly-escaped style="...".
+    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
+  });
+
+  test('a normal logo renders as expected', () => {
+    const { html } = toHtml({ type: 'text', text: 'MySite', href: '/' }, '');
+    expect(html).toContain('href="/"');
+    expect(html).toContain('MySite');
+  });
+});
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { useSiteDesign } from '../../state/SiteDesignContext';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl } from '../../utils/escape';

 /* ---------- Types ---------- */

@@ -104,7 +104,7 @@ Logo.craft = {
  let innerHtml: string;
  if (props.type === 'image' && props.imageSrc) {
    const imgStyle = cssPropsToString({ width: props.imageWidth || '120px', height: 'auto', display: 'block' });
-    innerHtml = `<img src="${escapeAttr(safeUrl(props.imageSrc))}" alt="${escapeAttr(props.text || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} />`;
+    innerHtml = `<img src="${escapeAttr(safeImageUrl(props.imageSrc))}" alt="${escapeAttr(props.text || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} />`;
  } else {
    const spanStyle = cssPropsToString({
      fontWeight: props.fontWeight || '700',
@@ -30,3 +30,17 @@ describe('Menu.toHtml deterministic + unique scope ids (thread node id, no Math.
    expect(html1).toBe(html2);
  });
 });
+
+describe('Menu.toHtml XSS hardening (linkHoverColor into <style>)', () => {
+  test('a linkHoverColor value containing </style><script> is neutralized', () => {
+    const malicious = '#fff}</style><script>alert(1)</script><style>{';
+    const { html } = toHtml({ linkHoverColor: malicious }, '', 'node-xss');
+    expect(html).not.toContain('</style><script');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a normal linkHoverColor still renders in the hover rule', () => {
+    const { html } = toHtml({ linkHoverColor: '#ff0000' }, '', 'node-normal');
+    expect(html).toMatch(/:hover\s*\{\s*color:\s*#ff0000/);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, scopeId, cssValue } from '../../utils/escape';

 /* ---------- Types ---------- */

@@ -125,14 +125,18 @@ Menu.craft = {
 /* ---------- HTML export ---------- */

 (Menu as any).toHtml = (props: MenuProps, _childrenHtml: string, nodeId?: string) => {
-  const linkCol = props.linkColor || '#3f3f46';
-  const hoverCol = props.linkHoverColor || '#3b82f6';
-  const ctaBg = props.ctaBgColor || '#3b82f6';
-  const ctaText = props.ctaTextColor || '#ffffff';
-  const gap = props.gap || '24px';
+  // Sanitized once here -- linkCol/hoverCol/ctaBg/ctaText/gap/fSize are raw
+  // string-interpolation sinks below (hoverCol goes into a <style> block,
+  // the worst case: </style> breakout -> arbitrary <script>), see
+  // task-cssxss-brief.md.
+  const linkCol = cssValue(props.linkColor) || '#3f3f46';
+  const hoverCol = cssValue(props.linkHoverColor) || '#3b82f6';
+  const ctaBg = cssValue(props.ctaBgColor) || '#3b82f6';
+  const ctaText = cssValue(props.ctaTextColor) || '#ffffff';
+  const gap = cssValue(props.gap) || '24px';
  const orientation = props.orientation || 'horizontal';
  const alignment = props.alignment || 'right';
-  const fSize = props.fontSize || '14px';
+  const fSize = cssValue(props.fontSize) || '14px';

  const justifyMap: Record<string, string> = { left: 'flex-start', center: 'center', right: 'flex-end' };

@@ -5,24 +5,115 @@ const toHtml = (Navbar as any).toHtml;

 describe('Navbar.toHtml hamburger accessibility (F2.3)', () => {
  test('mobile toggle button has an accessible name, aria-expanded, and aria-controls', () => {
-    const { html } = toHtml({ showMobileMenu: true }, '');
+    const { html } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
    expect(html).toMatch(/class="navbar-hamburger"[^>]*aria-label="Toggle navigation menu"/);
    expect(html).toMatch(/aria-expanded="false"/);
-    expect(html).toMatch(/aria-controls="navbar-links"/);
+    expect(html).toMatch(/aria-controls="[^"]+"/);
  });

  test('aria-controls target id exists on the links container', () => {
-    const { html } = toHtml({ showMobileMenu: true }, '');
-    expect(html).toContain('id="navbar-links"');
+    const { html } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
+    const controls = html.match(/aria-controls="([^"]+)"/)![1];
+    expect(html).toContain(`id="${controls}"`);
  });

  test('toggle script flips aria-expanded on click', () => {
-    const { html } = toHtml({ showMobileMenu: true }, '');
+    const { html } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
    expect(html).toMatch(/setAttribute\(['"]aria-expanded['"]/);
  });

  test('no mobile menu: no hamburger button emitted', () => {
-    const { html } = toHtml({ showMobileMenu: false }, '');
+    const { html } = toHtml({ showMobileMenu: false }, '', 'node-nav1');
    expect(html).not.toContain('navbar-hamburger');
  });
 });
+
+describe('Navbar.toHtml node-scoped ids/hover styles (M-1: two navbars must not collide)', () => {
+  test('no bare unscoped id="navbar-links" is emitted', () => {
+    const { html } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
+    expect(html).not.toContain('id="navbar-links"');
+  });
+
+  test('two different node ids produce different links-container ids', () => {
+    const { html: html1 } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
+    const { html: html2 } = toHtml({ showMobileMenu: true }, '', 'node-nav2');
+    const id1 = html1.match(/id="([^"]+)"/)![1];
+    const id2 = html2.match(/id="([^"]+)"/)![1];
+    expect(id1).not.toBe(id2);
+  });
+
+  test('aria-controls always equals the actual links-container id', () => {
+    const { html } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
+    const controls = html.match(/aria-controls="([^"]+)"/)![1];
+    const linksId = html.match(/id="([^"]+)"/)![1];
+    expect(controls).toBe(linksId);
+  });
+
+  test('hover style selectors are scoped per-instance, not bare .navbar-link/.navbar-cta', () => {
+    const { html } = toHtml({ hoverColor: '#ff0000' }, '', 'node-nav1');
+    // A selector rule that STARTS the line with .navbar-link:hover (i.e. not
+    // preceded by a per-instance ancestor class) would be the old, unscoped,
+    // globally-colliding form.
+    expect(html).not.toMatch(/^\s*\.navbar-link:hover/m);
+    expect(html).not.toMatch(/^\s*\.navbar-cta:hover/m);
+    // still present, just scoped under a per-instance ancestor class
+    expect(html).toMatch(/\.navbar-link:hover/);
+    expect(html).toMatch(/\.[\w-]+ \.navbar-link:hover/);
+  });
+
+  test('two navbars with different hoverColor do not leak style onto each other (scoped selectors differ)', () => {
+    const { html: html1 } = toHtml({ hoverColor: '#ff0000' }, '', 'node-nav1');
+    const { html: html2 } = toHtml({ hoverColor: '#00ff00' }, '', 'node-nav2');
+    const scope1 = html1.match(/<style>\s*\.([\w-]+)\s/)![1];
+    const scope2 = html2.match(/<style>\s*\.([\w-]+)\s/)![1];
+    expect(scope1).not.toBe(scope2);
+    expect(html1).toContain(`.${scope1} .navbar-link:hover`);
+    expect(html2).toContain(`.${scope2} .navbar-link:hover`);
+  });
+
+  test('a normal single navbar still renders its hover style (visual output preserved)', () => {
+    const { html } = toHtml({ hoverColor: '#ff0000' }, '', 'node-nav1');
+    expect(html).toMatch(/:hover\s*\{\s*color:\s*#ff0000/);
+  });
+
+  test('same node id -> identical output across calls (deterministic)', () => {
+    const { html: html1 } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
+    const { html: html2 } = toHtml({ showMobileMenu: true }, '', 'node-nav1');
+    expect(html1).toBe(html2);
+  });
+});
+
+describe('Navbar.toHtml XSS hardening (hoverColor/backgroundColor/ctaColor into <style>)', () => {
+  test('a hoverColor value containing </style><script> is neutralized in the hover <style> block', () => {
+    const malicious = '#fff}</style><script>alert(1)</script><style>{';
+    const { html } = toHtml({ hoverColor: malicious }, '');
+    expect(html).not.toContain('</style><script');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a backgroundColor value containing </style><script> is neutralized (mobile media-query rule)', () => {
+    const malicious = '#fff}</style><script>alert(2)</script><style>{';
+    const { html } = toHtml({ backgroundColor: malicious, showMobileMenu: true }, '');
+    expect(html).not.toContain('</style><script');
+    expect(html).not.toContain('<script>alert(2)</script>');
+  });
+
+  test('a ctaColor value containing </style><script> is neutralized', () => {
+    const malicious = '#fff}</style><script>alert(3)</script><style>{';
+    const { html } = toHtml({ ctaColor: malicious }, '');
+    expect(html).not.toContain('</style><script');
+    expect(html).not.toContain('<script>alert(3)</script>');
+  });
+
+  test('a textColor value containing a quote breakout does not escape the hamburger span style attribute', () => {
+    const malicious = '#333" onmouseover="alert(1)';
+    const { html } = toHtml({ textColor: malicious, showMobileMenu: true }, '');
+    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
+  });
+
+  test('normal colors still render correctly', () => {
+    const { html } = toHtml({ hoverColor: '#ff0000', backgroundColor: '#123456', ctaColor: '#00ff00' }, '');
+    expect(html).toMatch(/:hover\s*\{\s*color:\s*#ff0000/);
+    expect(html).toContain('background-color:#123456');
+  });
+});
@@ -2,7 +2,7 @@ import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { useSiteDesign } from '../../state/SiteDesignContext';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl, cssValue, scopeId } from '../../utils/escape';

 /* ---------- Types ---------- */

@@ -210,17 +210,33 @@ Navbar.craft = {

 /* ---------- HTML export ---------- */

-(Navbar as any).toHtml = (props: NavbarProps, _childrenHtml: string) => {
-  const bgColor = props.backgroundColor || '#ffffff';
-  const textCol = props.textColor || '#3f3f46';
-  const hoverCol = props.hoverColor || '#3b82f6';
-  const ctaCol = props.ctaColor || '#3b82f6';
-  const ctaTextCol = props.ctaTextColor || '#ffffff';
-  const pad = props.padding || '16px 24px';
+(Navbar as any).toHtml = (props: NavbarProps, _childrenHtml: string, nodeId?: string) => {
+  // Sanitized once here -- these are raw string-interpolation sinks below
+  // (hoverCol/bgColor go into a <style> block, the worst case: </style>
+  // breakout -> arbitrary <script>), see task-cssxss-brief.md.
+  const bgColor = cssValue(props.backgroundColor) || '#ffffff';
+  const textCol = cssValue(props.textColor) || '#3f3f46';
+  const hoverCol = cssValue(props.hoverColor) || '#3b82f6';
+  const ctaCol = cssValue(props.ctaColor) || '#3b82f6';
+  const ctaTextCol = cssValue(props.ctaTextColor) || '#ffffff';
+  const pad = cssValue(props.padding) || '16px 24px';
  const alignment = props.navAlignment || 'space-between';
  const sticky = props.isSticky;
  const mobile = props.showMobileMenu;
  const logoUrl = props.logoUrl || '/';
+  const links0 = props.links || defaultLinks;
+
+  // M-1: deterministic AND unique per-instance scope, keyed on the Craft
+  // node id. Two Navbars on the same page previously emitted an identical
+  // fixed id="navbar-links" (invalid duplicate-id HTML, ambiguous
+  // aria-controls target) and unscoped `.navbar-link:hover`/`.navbar-cta:hover`
+  // rules in each instance's own <style> block -- since both blocks target
+  // the SAME global selector, the later one in the DOM silently overrides
+  // the earlier one's hover color/behavior for BOTH navbars. Scoping the
+  // links-container id and adding a per-instance class on the <nav> root
+  // (used to prefix the hover selectors) eliminates both collisions.
+  const scope = scopeId(nodeId, JSON.stringify(links0) + alignment + pad, 'nav');
+  const linksId = `${scope}_links`;

  const navStyle = cssPropsToString({
    display: 'flex',
@@ -236,7 +252,7 @@ Navbar.craft = {
  let logoHtml: string;
  if (props.logoType === 'image' && props.logoImage) {
    const imgStyle = cssPropsToString({ width: props.logoWidth || '120px', height: 'auto', display: 'block' });
-    logoHtml = `<a href="${escapeAttr(safeUrl(logoUrl))}" style="text-decoration:none;display:flex;align-items:center;flex-shrink:0"><img src="${escapeAttr(safeUrl(props.logoImage))}" alt="${escapeAttr(props.logoText || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} /></a>`;
+    logoHtml = `<a href="${escapeAttr(safeUrl(logoUrl))}" style="text-decoration:none;display:flex;align-items:center;flex-shrink:0"><img src="${escapeAttr(safeImageUrl(props.logoImage))}" alt="${escapeAttr(props.logoText || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} /></a>`;
  } else {
    const logoStyle = cssPropsToString({
      fontWeight: '700',
@@ -269,21 +285,23 @@ Navbar.craft = {
  // via aria-expanded, kept in sync with the .navbar-open class by the
  // inline onclick handler.
  const hamburgerHtml = mobile
-    ? `\n    <button class="navbar-hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="navbar-links" onclick="var m=this.parentElement.querySelector('.navbar-links');var open=m.classList.toggle('navbar-open');this.setAttribute('aria-expanded', open ? 'true' : 'false');" style="display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:4px">
+    ? `\n    <button class="navbar-hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="${escapeAttr(linksId)}" onclick="var m=document.getElementById('${linksId}');var open=m.classList.toggle('navbar-open');this.setAttribute('aria-expanded', open ? 'true' : 'false');" style="display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:4px">
      <span style="display:block;width:24px;height:2px;background-color:${escapeAttr(textCol)}"></span>
      <span style="display:block;width:24px;height:2px;background-color:${escapeAttr(textCol)}"></span>
      <span style="display:block;width:24px;height:2px;background-color:${escapeAttr(textCol)}"></span>
    </button>`
    : '';

-  // Hover CSS
+  // Hover CSS -- scoped under `.${scope}` (a class on the <nav> root, added
+  // below) so it can only ever match THIS instance's links/CTA, never bleed
+  // into or get overridden by another Navbar instance's rules.
  const hoverCss = `<style>
-  .navbar-link:hover { color: ${hoverCol} !important; }
-  .navbar-cta:hover { filter: brightness(1.1); }${mobile ? `
+  .${scope} .navbar-link:hover { color: ${hoverCol} !important; }
+  .${scope} .navbar-cta:hover { filter: brightness(1.1); }${mobile ? `
  @media (max-width: 768px) {
-    .navbar-hamburger { display: flex !important; }
-    .navbar-links { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column !important; background-color: ${bgColor}; padding: 12px 24px; gap: 12px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
-    .navbar-links.navbar-open { display: flex !important; }
+    .${scope} .navbar-hamburger { display: flex !important; }
+    .${scope} .navbar-links { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column !important; background-color: ${bgColor}; padding: 12px 24px; gap: 12px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+    .${scope} .navbar-links.navbar-open { display: flex !important; }
  }` : ''}
 </style>`;

@@ -306,9 +324,9 @@ Navbar.craft = {

  return {
    html: `${hoverCss}
-<nav${navStyle ? ` style="${navStyle}${mobile ? ';position:relative' : ''}"` : ''}>
+<nav class="${scope}"${navStyle ? ` style="${navStyle}${mobile ? ';position:relative' : ''}"` : ''}>
  ${logoHtml}${hamburgerHtml}
-  <div class="navbar-links" id="navbar-links" style="display:flex;align-items:center;gap:24px">
+  <div class="navbar-links" id="${linksId}" style="display:flex;align-items:center;gap:24px">
      ${linksHtmlWithClass}
  </div>
 </nav>`,
@@ -11,3 +11,22 @@ describe('SearchBar.toHtml decorative icons (F2.5)', () => {
    icons.forEach((tag: string) => expect(tag).toContain('aria-hidden="true"'));
  });
 });
+
+describe('SearchBar.toHtml XSS hardening (placeholder/buttonText/showButton)', () => {
+  test('a placeholder value with an attribute-breakout string cannot escape placeholder=""', () => {
+    const malicious = 'Search..." onmouseover="alert(1)';
+    const { html } = toHtml({ placeholder: malicious }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('a buttonText value with a script tag is escaped as text content, not raw HTML', () => {
+    const malicious = '<script>alert(1)</script>';
+    const { html } = toHtml({ buttonText: malicious, showButton: true }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a non-boolean showButton (string "false") still yields fixed, safe border-radius values', () => {
+    const { html } = toHtml({ showButton: 'false' as any }, '');
+    expect(html).toMatch(/border-radius:(8px 0 0 8px|8px)/);
+  });
+});
@@ -14,3 +14,80 @@ describe('SocialLinks.toHtml accessibility (F2.5)', () => {
    expect(html).toMatch(/<i class="fa fa-twitter"[^>]*aria-hidden="true"/);
  });
 });
+
+describe('SocialLinks.toHtml XSS hardening (iconSize/iconColor/iconBgColor/gap into style=)', () => {
+  test('an iconSize value with an attribute-breakout string cannot escape style=""', () => {
+    const malicious = '20px" onmouseover="alert(1)';
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconSize: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('an iconColor value with an attribute-breakout string cannot escape style=""', () => {
+    const malicious = '#fff" onmouseover="alert(1)';
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconColor: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('an iconBgColor value with an attribute-breakout string cannot escape style=""', () => {
+    const malicious = '#374151" onmouseover="alert(1)';
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'circle', iconBgColor: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('a gap value with an attribute-breakout string cannot escape the wrapper style=""', () => {
+    const malicious = '10px" onmouseover="alert(1)';
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], gap: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('a malicious platform key does not produce a raw class-attribute breakout', () => {
+    const malicious = 'x"><script>alert(1)</script>';
+    const { html } = toHtml({ links: [{ platform: malicious, url: '#' }] }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a link url with a javascript: scheme is neutralized', () => {
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: 'javascript:alert(1)' }] }, '');
+    expect(html).not.toContain('javascript:alert(1)');
+  });
+});
+
+describe('SocialLinks.toHtml iconShape/gap emission (previously built but unexposed in SocialStylePanel)', () => {
+  test('iconShape="circle" emits a 50% border-radius on the wrapping <a>', () => {
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'circle' }, '');
+    expect(html).toMatch(/<a[^>]*style="[^"]*border-radius:50%[^"]*"/);
+  });
+
+  test('iconShape="square" emits border-radius:0', () => {
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'square' }, '');
+    expect(html).toMatch(/<a[^>]*style="[^"]*border-radius:0[^"]*"/);
+  });
+
+  test('iconShape="rounded" emits a 6px border-radius', () => {
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'rounded' }, '');
+    expect(html).toMatch(/<a[^>]*style="[^"]*border-radius:6px[^"]*"/);
+  });
+
+  test('iconShape="none" omits the background box entirely (transparent bg, no fixed box size)', () => {
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'none' }, '');
+    const aTag = html.match(/<a[^>]*>/)![0];
+    expect(aTag).toContain('background-color:transparent');
+    expect(aTag).not.toContain('border-radius');
+  });
+
+  test('gap emits on the wrapper <div> style', () => {
+    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], gap: '24px' }, '');
+    expect(html).toMatch(/<div[^>]*style="[^"]*gap:24px[^"]*"/);
+  });
+});
+
+describe('SocialLinks.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (SocialLinks as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeAttr, safeUrl, cssValue } from '../../utils/escape';

 interface SocialLink {
  platform: string;
@@ -17,6 +17,11 @@ interface SocialLinksProps {
  gap?: string;
  alignment?: 'left' | 'center' | 'right';
  style?: CSSProperties;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const platformIcons: Record<string, string> = {
@@ -151,6 +156,11 @@ SocialLinks.craft = {
    gap: '10px',
    alignment: 'center',
    style: {},
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -163,9 +173,10 @@ SocialLinks.craft = {

 (SocialLinks as any).toHtml = (props: SocialLinksProps, _childrenHtml: string) => {
  const links = props.links || defaultLinks;
-  const iconSize = props.iconSize || '20px';
-  const iconColor = props.iconColor || '#ffffff';
-  const iconBgColor = props.iconBgColor || '#374151';
+  // Sanitized -- raw string-interpolation sinks in aStyle/getShapeStr below.
+  const iconSize = cssValue(props.iconSize) || '20px';
+  const iconColor = cssValue(props.iconColor) || '#ffffff';
+  const iconBgColor = cssValue(props.iconBgColor) || '#374151';
  const iconShape = props.iconShape || 'circle';
  const gap = props.gap || '10px';
  const alignment = props.alignment || 'center';
@@ -0,0 +1,26 @@
+import { describe, test, expect } from 'vitest';
+import { Spacer } from './Spacer';
+
+const toHtml = (Spacer as any).toHtml;
+
+describe('Spacer.toHtml normal rendering', () => {
+  test('renders height into the style attribute', () => {
+    const { html } = toHtml({ height: '80px' }, '');
+    expect(html).toContain('height:80px');
+  });
+});
+
+describe('Spacer.toHtml XSS hardening (height into style=)', () => {
+  test('a height value with an attribute-breakout string cannot escape style=""', () => {
+    const malicious = '40px" onmouseover="alert(1)';
+    const { html } = toHtml({ height: malicious as any }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
+  });
+
+  test('a height value with a </style><script> breakout is neutralized', () => {
+    const malicious = '40px</style><script>alert(1)</script>';
+    const { html } = toHtml({ height: malicious as any }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+});
@@ -21,3 +21,68 @@ describe('StarRating.toHtml accessibility (F2.2)', () => {
    expect(html).toContain('aria-label="Rating: 2 out of 10"');
  });
 });
+
+describe('StarRating.toHtml XSS hardening (filledColor/emptyColor/size into style=)', () => {
+  test('a filledColor value containing a quote breakout is neutralized', () => {
+    const malicious = '#f00" onmouseover="alert(1)';
+    const { html } = toHtml({ rating: 3, maxStars: 5, filledColor: malicious }, '');
+    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
+  });
+
+  test('a size value containing </style><script> is neutralized', () => {
+    const malicious = '24px</style><script>alert(1)</script>';
+    const { html } = toHtml({ rating: 3, maxStars: 5, size: malicious }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a normal filled color still renders', () => {
+    const { html } = toHtml({ rating: 5, maxStars: 5, filledColor: '#ff9900' }, '');
+    expect(html).toContain('color:#ff9900');
+  });
+});
+
+describe('StarRating.toHtml XSS hardening (rating/maxStars into aria-label, F2.2 CONFIRMED sink)', () => {
+  test('a maxStars value with an attribute-breakout string is neutralized in aria-label', () => {
+    const malicious = '5" onmouseover="alert(1)';
+    const { html } = toHtml({ rating: 3, maxStars: malicious as any }, '');
+    expect(html).not.toMatch(/onmouseover/);
+    expect(html).not.toMatch(/aria-label="Rating: 3 out of 5" onmouseover/);
+  });
+
+  test('a rating value with an attribute-breakout string is neutralized in aria-label', () => {
+    const malicious = '4.5" onmouseover="alert(1)';
+    const { html } = toHtml({ rating: malicious as any, maxStars: 5 }, '');
+    expect(html).not.toMatch(/onmouseover/);
+  });
+
+  test('a non-numeric maxStars does not blow up the star loop (no NaN glyph count, no huge output)', () => {
+    const malicious = '5" onmouseover="alert(1)';
+    const { html } = toHtml({ rating: 3, maxStars: malicious as any }, '');
+    const glyphs = html.match(/<i class="fa fa-star"/g) || [];
+    // Falls back to a sane default star count rather than looping 0 or NaN times.
+    expect(glyphs.length).toBeGreaterThan(0);
+    expect(glyphs.length).toBeLessThanOrEqual(50);
+  });
+
+  test('an absurdly large maxStars is clamped to a sane maximum instead of looping unboundedly', () => {
+    const { html } = toHtml({ rating: 3, maxStars: 1e9 as any }, '');
+    const glyphs = html.match(/<i class="fa fa-star"/g) || [];
+    expect(glyphs.length).toBeLessThanOrEqual(50);
+  });
+
+  test('normal numeric rating/maxStars still render the expected aria-label', () => {
+    const { html } = toHtml({ rating: 4.5, maxStars: 5 }, '');
+    expect(html).toMatch(/<span role="img" aria-label="Rating: 4\.5 out of 5"/);
+  });
+});
+
+describe('StarRating.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (StarRating as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
+import { cssValue, escapeAttr } from '../../utils/escape';

 interface StarRatingProps {
  rating?: number;
@@ -9,6 +10,11 @@ interface StarRatingProps {
  filledColor?: string;
  emptyColor?: string;
  style?: CSSProperties;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 export const StarRating: UserComponent<StarRatingProps> = ({
@@ -86,6 +92,11 @@ StarRating.craft = {
    filledColor: '#f59e0b',
    emptyColor: '#d1d5db',
    style: {},
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -97,11 +108,23 @@ StarRating.craft = {
 /* ---------- HTML export ---------- */

 (StarRating as any).toHtml = (props: StarRatingProps, _childrenHtml: string) => {
-  const rating = props.rating ?? 4.5;
-  const maxStars = props.maxStars || 5;
-  const size = props.size || '24px';
-  const filledColor = props.filledColor || '#f59e0b';
-  const emptyColor = props.emptyColor || '#d1d5db';
+  // `rating`/`maxStars` are declared `number` in TS but arrive unchecked at
+  // runtime (AI update_props only validates node_id; deserialized saved
+  // state is untyped JSON) -- a string like `5" onmouseover="alert(1)`
+  // breaks out of the aria-label attribute below, and an uncoerced/unclamped
+  // maxStars can also blow up the star-glyph loop (NaN, absurd loop count,
+  // or -- observed -- a RangeError from string concatenation overflow with
+  // e.g. maxStars=1e9). Coerce to numbers with sane fallbacks/clamps first.
+  const ratingRaw = Number(props.rating);
+  const rating = Number.isFinite(ratingRaw) ? ratingRaw : 4.5;
+  const maxStarsRaw = Number(props.maxStars);
+  const maxStars = Number.isFinite(maxStarsRaw)
+    ? Math.min(Math.max(Math.trunc(maxStarsRaw), 0), 50)
+    : 5;
+  // Sanitized -- raw string-interpolation sinks in the star glyphs below.
+  const size = cssValue(props.size) || '24px';
+  const filledColor = cssValue(props.filledColor) || '#f59e0b';
+  const emptyColor = cssValue(props.emptyColor) || '#d1d5db';
  const wrapperStyle = cssPropsToString({
    display: 'inline-flex',
    alignItems: 'center',
@@ -123,7 +146,12 @@ StarRating.craft = {
  // The star glyphs convey nothing to assistive tech on their own -- wrap
  // in role="img" with a textual equivalent, and hide the decorative glyphs
  // themselves (aria-hidden above) so AT doesn't announce each icon.
+  // Belt-and-suspenders: rating/maxStars are already coerced to numbers
+  // above, but the assembled label is still run through escapeAttr() in
+  // case a decimal/negative/Infinity edge case produces odd (though no
+  // longer dangerous) text.
+  const ariaLabel = escapeAttr(`Rating: ${rating} out of ${maxStars}`);
  return {
-    html: `<span role="img" aria-label="Rating: ${rating} out of ${maxStars}"${wrapperStyle ? ` style="${wrapperStyle}"` : ''}>${starsHtml}</span>`,
+    html: `<span role="img" aria-label="${ariaLabel}"${wrapperStyle ? ` style="${wrapperStyle}"` : ''}>${starsHtml}</span>`,
  };
 };
@@ -0,0 +1,22 @@
+import { describe, test, expect } from 'vitest';
+import { TextBlock } from './TextBlock';
+
+const toHtml = (TextBlock as any).toHtml;
+
+describe('TextBlock.toHtml text escaping (attacker-controlled `text` prop)', () => {
+  test('a tag-breakout attempt in text is neutralized (no injected element)', () => {
+    const { html } = toHtml({ text: '</p><img src=x onerror=alert(1)>' }, '');
+    expect(html).not.toContain('<img');
+    expect(html).toContain('&lt;img');
+  });
+
+  test('ampersand is escaped for well-formed text content (consistency with escapeHtml)', () => {
+    const { html } = toHtml({ text: 'Tom & Jerry' }, '');
+    expect(html).toContain('Tom &amp; Jerry');
+  });
+
+  test('a normal text value still renders unchanged', () => {
+    const { html } = toHtml({ text: 'Hello world' }, '');
+    expect(html).toBe('<p>Hello world</p>');
+  });
+});
@@ -1,6 +1,7 @@
 import React, { CSSProperties, useCallback, useRef, useEffect } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
+import { escapeHtml } from '../../utils/escape';

 interface TextBlockProps {
  text?: string;
@@ -95,6 +96,6 @@ TextBlock.craft = {

 (TextBlock as any).toHtml = (props: TextBlockProps, _childrenHtml: string) => {
  const styleStr = cssPropsToString(props.style);
-  const escapedText = (props.text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const escapedText = escapeHtml(props.text || '');
  return { html: `<p${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</p>` };
 };
@@ -110,3 +110,19 @@ describe('ContactForm.toHtml accessibility (F2.1)', () => {
    expect(ids1).toEqual(ids2);
  });
 });
+
+describe('ContactForm.toHtml field type attribute sanitization', () => {
+  test('malicious field.type cannot break out of the input attribute; falls back to type="text"', () => {
+    const fields = [{ type: 'text"><img src=x onerror=alert(1)>' as any, label: 'Name', name: 'name', placeholder: 'Your name', required: false }];
+    const { html } = toHtml({ fields }, '');
+    expect(html).not.toContain('<img');
+    expect(html).not.toContain('onerror=');
+    expect(html).toContain('type="text"');
+  });
+
+  test('legitimate email field type still passes through unchanged', () => {
+    const fields = [{ type: 'email' as const, label: 'Email', name: 'email', placeholder: 'you@example.com', required: false }];
+    const { html } = toHtml({ fields }, '');
+    expect(html).toContain('type="email"');
+  });
+});
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { relayFormWiring } from '../../utils/form-relay-wiring';
-import { escapeHtml, escapeAttr, slugId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, slugId, cssValue, sanitizeInputType } from '../../utils/escape';

 interface ContactFormField {
  type: 'text' | 'email' | 'tel' | 'textarea' | 'select';
@@ -175,9 +175,11 @@ ContactForm.craft = {
    gap: '20px',
    ...props.style,
  });
-  const labelColor = props.labelColor || '#374151';
-  const inputBg = props.inputBg || '#ffffff';
-  const inputBorder = props.inputBorder || '#d1d5db';
+  // Sanitized -- raw string-interpolation sinks in inputStyleStr/labelHtml
+  // below.
+  const labelColor = cssValue(props.labelColor) || '#374151';
+  const inputBg = cssValue(props.inputBg) || '#ffffff';
+  const inputBorder = cssValue(props.inputBorder) || '#d1d5db';
  const inputStyleStr = `width:100%;padding:10px 14px;font-size:14px;font-family:Inter,sans-serif;border:1px solid ${inputBorder};border-radius:6px;background-color:${inputBg};color:#1f2937;box-sizing:border-box;outline:none`;

  const fieldsHtml = (props.fields || defaultFields).map((field, i) => {
@@ -194,7 +196,7 @@ ContactForm.craft = {
      const opts = (field.options || []).map((o) => `<option value="${escapeAttr(o)}">${escapeHtml(o)}</option>`).join('');
      inputHtml = `<select id="${escapeAttr(fieldId)}" name="${escapeAttr(field.name)}" style="${inputStyleStr};cursor:pointer"${reqAttr}><option value="">${escapeHtml(field.placeholder || 'Select...')}</option>${opts}</select>`;
    } else {
-      inputHtml = `<input id="${escapeAttr(fieldId)}" type="${field.type}" name="${escapeAttr(field.name)}" placeholder="${escapeAttr(field.placeholder)}" style="${inputStyleStr}"${reqAttr} />`;
+      inputHtml = `<input id="${escapeAttr(fieldId)}" type="${sanitizeInputType(field.type)}" name="${escapeAttr(field.name)}" placeholder="${escapeAttr(field.placeholder)}" style="${inputStyleStr}"${reqAttr} />`;
    }
    return `<div style="display:flex;flex-direction:column;gap:6px">${labelHtml}${inputHtml}</div>`;
  }).join('\n  ');
@@ -0,0 +1,25 @@
+import { describe, test, expect } from 'vitest';
+import { FormButton } from './FormButton';
+
+const toHtml = (FormButton as any).toHtml;
+
+describe('FormButton.toHtml', () => {
+  test('normal text renders as-is', () => {
+    const { html } = toHtml({ text: 'Send it' }, '');
+    expect(html).toContain('>Send it<');
+    expect(html).toContain('type="submit"');
+  });
+
+  test('type="submit" is a hardcoded literal, not prop-driven', () => {
+    const { html } = toHtml({ text: 'Submit' }, '');
+    expect(html).toMatch(/<button type="submit"/);
+  });
+
+  test('text content is escaped for <, >, &, and " (consistent with escapeHtml)', () => {
+    const { html } = toHtml({ text: '<script>alert(1)</script> & "quoted"' }, '');
+    expect(html).not.toContain('<script>');
+    expect(html).toContain('&lt;script&gt;alert(1)&lt;/script&gt;');
+    expect(html).toContain('&amp;');
+    expect(html).toContain('&quot;quoted&quot;');
+  });
+});
@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
+import { escapeHtml } from '../../utils/escape';

 interface FormButtonProps {
  text?: string;
@@ -74,7 +75,7 @@ FormButton.craft = {
    cursor: 'pointer',
    ...props.style,
  });
-  const escapedText = (props.text || 'Submit').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const escapedText = escapeHtml(props.text || 'Submit');
  return {
    html: `<button type="submit"${styleStr ? ` style="${styleStr}"` : ''}>${escapedText}</button>`,
  };
@@ -39,3 +39,16 @@ describe('FormContainer.toHtml relay wiring', () => {
    expect(mid1).not.toBe(mid2);
  });
 });
+
+describe('FormContainer.toHtml method attribute sanitization', () => {
+  test('malicious method value cannot break out of the attribute; falls back to POST', () => {
+    const { html } = toHtml({ action: '/legacy', method: 'POST"><script>alert(1)</script>' }, '');
+    expect(html).not.toContain('<script');
+    expect(html).toContain('method="POST"');
+  });
+
+  test('legitimate GET method still passes through unchanged (non-relay path)', () => {
+    const { html } = toHtml({ action: '/legacy', method: 'GET' }, '');
+    expect(html).toContain('method="GET"');
+  });
+});
@@ -3,6 +3,7 @@ import { useNode, Element, UserComponent } from '@craftjs/core';
 import { Container } from '../layout/Container';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { relayFormWiring } from '../../utils/form-relay-wiring';
+import { sanitizeFormMethod } from '../../utils/escape';

 interface FormContainerProps {
  action?: string;
@@ -74,7 +75,7 @@ FormContainer.craft = {
    ...props.style,
  });
  const { useRelay, marker, actionAttr, honeypot } = relayFormWiring(props.recipientEmail, props.thankYouUrl, props.action, nodeId);
-  const method = useRelay ? 'POST' : (props.method || 'POST'); // relay requires POST
+  const method = useRelay ? 'POST' : sanitizeFormMethod(props.method); // relay requires POST
  const body = honeypot + childrenHtml;                        // honeypot as first child
  return {
    html: `${marker}<form action="${actionAttr}" method="${method}"${styleStr ? ` style="${styleStr}"` : ''}>${body}</form>`,
@@ -58,3 +58,17 @@ describe('InputField.toHtml deterministic + unique ids (thread node id, resolves
    expect(id1).toBe(id2);
  });
 });
+
+describe('InputField.toHtml type attribute sanitization', () => {
+  test('malicious type value cannot break out of the attribute; falls back to type="text"', () => {
+    const { html } = toHtml({ label: 'Name', name: 'name', type: 'text" autofocus onfocus="alert(1)' as any }, '');
+    expect(html).not.toContain('onfocus=');
+    expect(html).not.toContain('autofocus');
+    expect(html).toContain('type="text"');
+  });
+
+  test('legitimate number type still passes through unchanged', () => {
+    const { html } = toHtml({ label: 'Age', name: 'age', type: 'number' as const }, '');
+    expect(html).toContain('type="number"');
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId, sanitizeInputType } from '../../utils/escape';

 interface InputFieldProps {
  label?: string;
@@ -111,7 +111,7 @@ InputField.craft = {
  return {
    html: `<div${wrapStyle ? ` style="${wrapStyle}"` : ''}>
  ${labelHtml}
-  <input id="${escapeAttr(fieldId)}" type="${props.type || 'text'}" name="${escapeAttr(props.name || 'field')}" placeholder="${escapeAttr(props.placeholder || '')}"${reqAttr}${ariaLabelAttr} style="padding:10px 12px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;color:#18181b;background-color:#ffffff;width:100%;box-sizing:border-box" />
+  <input id="${escapeAttr(fieldId)}" type="${sanitizeInputType(props.type)}" name="${escapeAttr(props.name || 'field')}" placeholder="${escapeAttr(props.placeholder || '')}"${reqAttr}${ariaLabelAttr} style="padding:10px 12px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;color:#18181b;background-color:#ffffff;width:100%;box-sizing:border-box" />
 </div>`,
  };
 };
@@ -0,0 +1,39 @@
+import { describe, test, expect } from 'vitest';
+import { SubscribeForm } from './SubscribeForm';
+
+const toHtml = (SubscribeForm as any).toHtml;
+
+describe('SubscribeForm.toHtml hardcoded attributes stay hardcoded (no raw prop breakout)', () => {
+  test('form method is always POST regardless of any injected props', () => {
+    const { html } = toHtml({ heading: 'Join us', method: 'GET"><script>alert(1)</script>' } as any, '');
+    expect(html).toContain('<form method="POST"');
+    expect(html).not.toContain('<script');
+  });
+
+  test('email input type is always "email" regardless of any injected props', () => {
+    const { html } = toHtml({ type: 'text"><img src=x onerror=alert(1)>' } as any, '');
+    expect(html).toContain('<input type="email"');
+    expect(html).not.toContain('<img');
+    expect(html).not.toContain('onerror=');
+  });
+
+  test('layout enum only ever feeds one of two fixed literal style strings, never raw', () => {
+    const { html: inlineHtml } = toHtml({ layout: 'inline' }, '');
+    const { html: stackedHtml } = toHtml({ layout: 'stacked' }, '');
+    expect(inlineHtml).toContain('flex-direction:row');
+    expect(stackedHtml).toContain('flex-direction:column');
+  });
+
+  test('malicious layout value cannot inject raw CSS/attribute breakout (falls through the isInline boolean check to the stacked literal)', () => {
+    const { html } = toHtml({ layout: '"><script>alert(1)</script>' as any }, '');
+    expect(html).not.toContain('<script');
+    expect(html).toContain('flex-direction:column');
+  });
+
+  test('normal render still produces expected structure', () => {
+    const { html } = toHtml({ heading: 'Subscribe', placeholder: 'you@example.com', buttonText: 'Go' }, '');
+    expect(html).toContain('Subscribe');
+    expect(html).toContain('placeholder="you@example.com"');
+    expect(html).toContain('>Go<');
+  });
+});
@@ -50,3 +50,16 @@ describe('TextareaField.toHtml deterministic + unique ids (thread node id, resol
    expect(id1).toBe(id2);
  });
 });
+
+describe('TextareaField.toHtml rows attribute sanitization', () => {
+  test('malicious rows value cannot break out of the attribute; falls back to a numeric rows', () => {
+    const { html } = toHtml({ label: 'Message', name: 'message', rows: '4"><script>alert(1)</script>' as any }, '');
+    expect(html).not.toContain('<script');
+    expect(html).toMatch(/rows="\d+"/);
+  });
+
+  test('legitimate numeric rows still passes through unchanged', () => {
+    const { html } = toHtml({ label: 'Message', name: 'message', rows: 8 }, '');
+    expect(html).toContain('rows="8"');
+  });
+});
@@ -97,6 +97,11 @@ TextareaField.craft = {
    ...props.style,
  });
  const reqAttr = props.required ? ' required' : '';
+  // `rows` is declared as a TS `number` but arrives unchecked (AI update_props
+  // path only validates node_id; deserialized saved-state JSON is untyped at
+  // runtime), so a string like `4"><script>...` must be coerced to a real
+  // number before interpolation, not trusted as already-numeric.
+  const rows = Number(props.rows) || 4;
  // Deterministic AND unique id: scoped on the Craft node id so the
  // <label for> always matches the <textarea id> AND two TextareaField
  // instances that share the same (often default) `name` -- e.g. two
@@ -113,7 +118,7 @@ TextareaField.craft = {
  return {
    html: `<div${wrapStyle ? ` style="${wrapStyle}"` : ''}>
  ${labelHtml}
-  <textarea id="${escapeAttr(fieldId)}" name="${escapeAttr(props.name || 'message')}" placeholder="${escapeAttr(props.placeholder || '')}" rows="${props.rows || 4}"${reqAttr}${ariaLabelAttr} style="padding:10px 12px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;color:#18181b;background-color:#ffffff;width:100%;box-sizing:border-box;resize:vertical;font-family:inherit"></textarea>
+  <textarea id="${escapeAttr(fieldId)}" name="${escapeAttr(props.name || 'message')}" placeholder="${escapeAttr(props.placeholder || '')}" rows="${escapeAttr(String(rows))}"${reqAttr}${ariaLabelAttr} style="padding:10px 12px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;color:#18181b;background-color:#ffffff;width:100%;box-sizing:border-box;resize:vertical;font-family:inherit"></textarea>
 </div>`,
  };
 };
@@ -0,0 +1,58 @@
+import { describe, test, expect } from 'vitest';
+import { BackgroundSection } from './BackgroundSection';
+
+const toHtml = (BackgroundSection as any).toHtml;
+
+describe('BackgroundSection.toHtml anchorId', () => {
+  test('escapes a malicious anchorId (attribute breakout attempt)', () => {
+    const { html } = toHtml({ anchorId: 'x" onmouseover="alert(1)' }, 'child');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a normal anchorId still renders correctly', () => {
+    const { html } = toHtml({ anchorId: 'my-bg-section' }, 'child');
+    expect(html).toContain('id="my-bg-section"');
+  });
+});
+
+describe('BackgroundSection.toHtml style-value XSS hardening', () => {
+  test('a malicious bgImage cannot break out of the outer style attribute via url(...)', () => {
+    const malicious = 'javascript:alert(1)) foo{background:red}</style><script>alert(1)</script';
+    const { html } = toHtml({ bgImage: malicious }, 'child');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toContain('javascript:alert(1)');
+  });
+
+  test('a malicious bgColor cannot break out of the outer style attribute', () => {
+    const malicious = 'red" onmouseover="alert(1)';
+    const { html } = toHtml({ bgColor: malicious }, 'child');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a malicious overlayColor cannot break out of the overlay style attribute', () => {
+    const malicious = 'red" onmouseover="alert(1)';
+    const { html } = toHtml({ overlayColor: malicious }, 'child');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a wrong-typed overlayOpacity (string, not number) cannot break out of the overlay style attribute', () => {
+    const malicious = '0.4" onmouseover="alert(1)' as any;
+    const { html } = toHtml({ overlayOpacity: malicious }, 'child');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a malicious innerMaxWidth cannot break out of the inner style attribute', () => {
+    const malicious = '1200px" onmouseover="alert(1)';
+    const { html } = toHtml({ innerMaxWidth: malicious }, 'child');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('normal props still render correctly', () => {
+    const { html } = toHtml({ bgImage: 'https://example.com/bg.jpg', bgColor: '#1e293b', overlayColor: '#000000', overlayOpacity: 0.4, innerMaxWidth: '1200px' }, 'child');
+    expect(html).toContain("url('https://example.com/bg.jpg')");
+    expect(html).toContain('background-color:#1e293b');
+    expect(html).toContain('opacity:0.4');
+    expect(html).toContain('max-width:1200px');
+    expect(html).toContain('child');
+  });
+});
@@ -59,3 +59,24 @@ describe('ColumnLayout.toHtml deterministic + unique scope ids (thread node id,
    expect(html1).toBe(html2);
  });
 });
+
+describe('ColumnLayout.toHtml XSS hardening (gap into <style>)', () => {
+  test('a gap value containing </style><script> is neutralized in the <style>-context nth-child rule', () => {
+    const malicious = '0px)}</style><script>alert(1)</script><style>{';
+    const { html } = toHtml({ columns: 2, split: '50-50', gap: malicious }, '<div>A</div><div>B</div>', 'node-xss');
+    expect(html).not.toContain('</style><script');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a gap value containing a quote/semicolon breakout is neutralized in the style attribute', () => {
+    const malicious = '16px" onmouseover="alert(1)';
+    const { html } = toHtml({ columns: 2, split: '50-50', gap: malicious }, '', 'node-xss2');
+    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
+  });
+
+  test('a normal gap value still renders correctly', () => {
+    const { html } = toHtml({ columns: 2, split: '50-50', gap: '24px' }, '<div>A</div>', 'node-normal');
+    expect(html).toContain('gap:24px');
+    expect(html).toMatch(/calc\(50% - 24px\)/);
+  });
+});
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, Element, UserComponent } from '@craftjs/core';
 import { Container } from './Container';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeAttr, scopeId } from '../../utils/escape';
+import { escapeAttr, scopeId, cssValue } from '../../utils/escape';

 type SplitOption =
  | '100'
@@ -117,7 +117,11 @@ ColumnLayout.craft = {
 (ColumnLayout as any).toHtml = (props: ColumnLayoutProps, childrenHtml: string, nodeId?: string) => {
  const columns = props.columns || 2;
  const split = props.split || '50-50';
-  const gap = props.gap || '16px';
+  // Sanitized once here so BOTH the raw <style> nth-child rule below AND the
+  // cssPropsToString-built outerStyle get a safe value -- gap is a raw
+  // string-interpolation sink into a <style> block (worst case: </style>
+  // breakout -> arbitrary <script>), see task-cssxss-brief.md.
+  const gap = cssValue(props.gap) || '16px';
  const widths = getWidths(split, columns);

  const outerStyle = cssPropsToString({
@@ -33,3 +33,33 @@ describe('Container.toHtml cssId/cssClass', () => {
    expect(html).toContain('id="anchor-id"');
  });
 });
+
+describe('Container.toHtml tag allowlist (adversarial re-review, same class as C1)', () => {
+  test('a malicious tag value falls back to div -- no injected <img>, no broken-out attrs', () => {
+    const { html } = toHtml({ tag: 'div><img src=x onerror=alert(1)' }, 'child');
+    expect(html).not.toContain('<img');
+    expect(html).not.toContain('onerror');
+    expect(html.startsWith('<div')).toBe(true);
+    expect(html.endsWith('</div>')).toBe(true);
+  });
+
+  test('a tag value outside the known-safe set falls back to div', () => {
+    const { html } = toHtml({ tag: 'script' }, 'child');
+    expect(html.startsWith('<div')).toBe(true);
+    expect(html).not.toContain('<script');
+  });
+
+  test('a valid tag (section) still emits <section', () => {
+    const { html } = toHtml({ tag: 'section' }, 'child');
+    expect(html).toContain('<section');
+    expect(html).toContain('</section>');
+  });
+
+  test('all other allowlisted tags still work', () => {
+    for (const tag of ['div', 'article', 'header', 'footer', 'main']) {
+      const { html } = toHtml({ tag }, 'child');
+      expect(html.startsWith(`<${tag}`)).toBe(true);
+      expect(html.endsWith(`</${tag}>`)).toBe(true);
+    }
+  });
+});
@@ -3,6 +3,19 @@ import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { escapeAttr } from '../../utils/escape';

+// The only tag names Container actually supports (matches the TS union
+// below and the `tag` default in `.craft.props`). `tag` is settable via the
+// AI `update_props` path and from deserialized saved state -- neither is
+// type-checked at runtime -- so a malicious value like
+// `div><img src=x onerror=alert(1)` must never reach the `<${tag}` template
+// position in `toHtml`/the live render. Anything not in this allowlist
+// falls back to `'div'`.
+const ALLOWED_CONTAINER_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main'] as const;
+export type ContainerTag = (typeof ALLOWED_CONTAINER_TAGS)[number];
+
+export const sanitizeContainerTag = (tag: unknown): ContainerTag =>
+  (ALLOWED_CONTAINER_TAGS as readonly unknown[]).includes(tag) ? (tag as ContainerTag) : 'div';
+
 interface ContainerProps {
  style?: CSSProperties;
  tag?: 'div' | 'section' | 'article' | 'header' | 'footer' | 'main';
@@ -42,6 +55,7 @@ export const Container: UserComponent<ContainerProps> = ({
 }) => {
  const { connectors: { connect, drag } } = useNode();

+  const safeTag = sanitizeContainerTag(tag);
  const needsBoxedWrapper = contentWidth === 'boxed';
  const flexStyles = flexAlignFromTextAlign(style.textAlign);

@@ -58,7 +72,7 @@ export const Container: UserComponent<ContainerProps> = ({
  const idValue = cssId || anchorId || undefined;

  const el = React.createElement(
-    tag,
+    safeTag,
    {
      ref: (ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); },
      style: outerStyle,
@@ -97,7 +111,7 @@ Container.craft = {
 /* ---------- HTML export ---------- */

 (Container as any).toHtml = (props: ContainerProps, childrenHtml: string) => {
-  const tag = props.tag || 'div';
+  const tag = sanitizeContainerTag(props.tag);
  const isBoxed = props.contentWidth === 'boxed';
  const flexStyles = flexAlignFromTextAlign(props.style?.textAlign);

@@ -0,0 +1,75 @@
+import { describe, test, expect } from 'vitest';
+import { Section } from './Section';
+
+const toHtml = (Section as any).toHtml;
+
+describe('Section.toHtml anchorId', () => {
+  test('escapes a malicious anchorId (attribute breakout attempt)', () => {
+    const { html } = toHtml({ anchorId: 'x" onmouseover="alert(1)' }, 'child');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a normal anchorId still renders correctly', () => {
+    const { html } = toHtml({ anchorId: 'my-section' }, 'child');
+    expect(html).toContain('id="my-section"');
+  });
+});
+
+describe('Section.toHtml childrenHtml passthrough', () => {
+  test('children are preserved', () => {
+    const { html } = toHtml({}, '<p>hello</p>');
+    expect(html).toContain('<p>hello</p>');
+  });
+});
+
+describe('Section.toHtml shape divider color/height XSS hardening', () => {
+  test('a malicious topDividerColor cannot break out of the SVG style attribute', () => {
+    const malicious = 'red" onmouseover="alert(1)';
+    const { html } = toHtml({ topDivider: 'wave', topDividerColor: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a malicious topDividerColor cannot inject a </style><script> breakout', () => {
+    const malicious = 'red</style><script>alert(1)</script>';
+    const { html } = toHtml({ topDivider: 'wave', topDividerColor: malicious }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+  });
+
+  test('a malicious bottomDividerHeight cannot break out of the wrapper style attribute', () => {
+    const malicious = '50px" onmouseover="alert(1)';
+    const { html } = toHtml({ bottomDivider: 'angle', bottomDividerHeight: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a normal divider color/height still renders correctly', () => {
+    const { html } = toHtml({ topDivider: 'wave', topDividerColor: '#123456', topDividerHeight: '80px' }, '');
+    expect(html).toContain('fill:#123456');
+    expect(html).toContain('height:80px');
+  });
+
+  test('divider shape "none" emits no divider markup', () => {
+    const { html } = toHtml({ topDivider: 'none' }, 'child');
+    expect(html).not.toContain('<svg');
+  });
+
+  test('an unrecognized divider shape value emits no divider markup and no injected content', () => {
+    const malicious = 'wave"><script>alert(1)</script>' as any;
+    const { html } = toHtml({ topDivider: malicious }, 'child');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toContain('<svg');
+  });
+
+  test('a prototype-property-name divider shape (__proto__) does not leak [object Object]/function source into the SVG path', () => {
+    const { html } = toHtml({ topDivider: '__proto__' as any }, 'child');
+    expect(html).not.toContain('[object');
+    expect(html).not.toContain('native code');
+    expect(html).not.toContain('<svg');
+  });
+
+  test('a prototype-property-name divider shape (toString) does not leak Object.prototype.toString source into the SVG path', () => {
+    const { html } = toHtml({ topDivider: 'toString' as any }, 'child');
+    expect(html).not.toContain('[object');
+    expect(html).not.toContain('native code');
+    expect(html).not.toContain('<svg');
+  });
+});
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, Element, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { Container } from './Container';
-import { escapeAttr } from '../../utils/escape';
+import { escapeAttr, cssValue } from '../../utils/escape';

 /* ---------- Shape Divider SVG Paths ---------- */

@@ -38,7 +38,14 @@ const ShapeDivider: React.FC<{
  position: 'top' | 'bottom';
 }> = ({ shape, color, height, position }) => {
  if (!shape || shape === 'none') return null;
-  const path = DIVIDER_PATHS[shape];
+  // `shape` is attacker-controlled (AI update_props / deserialized state) and
+  // not runtime-type-checked. A plain-object index lookup with a string key
+  // like '__proto__', 'toString', or 'constructor' returns an INHERITED
+  // Object.prototype value (not undefined), which would otherwise leak
+  // "[object Object]" / a function's source text into the SVG `d` attribute
+  // below. hasOwnProperty restricts the lookup to the real allowlisted keys.
+  if (!Object.prototype.hasOwnProperty.call(DIVIDER_PATHS, shape)) return null;
+  const path = DIVIDER_PATHS[shape as Exclude<DividerShape, 'none'>];
  if (!path) return null;

  const isTop = position === 'top';
@@ -162,12 +169,16 @@ function buildDividerHtml(
  position: 'top' | 'bottom',
 ): string {
  if (!shape || shape === 'none') return '';
-  const path = DIVIDER_PATHS[shape];
+  // See the matching hasOwnProperty guard in <ShapeDivider> above -- same
+  // prototype-pollution-shaped lookup, same fix.
+  if (!Object.prototype.hasOwnProperty.call(DIVIDER_PATHS, shape)) return '';
+  const path = DIVIDER_PATHS[shape as Exclude<DividerShape, 'none'>];
  if (!path) return '';

  const isTop = position === 'top';
  const h = height || '50px';
-  const c = color || '#ffffff';
+  // Sanitized -- raw string-interpolation sink in the SVG `fill:${c}` below.
+  const c = cssValue(color) || '#ffffff';

  const wrapperStyle = cssPropsToString({
    position: 'absolute',
@@ -0,0 +1,62 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* ImageBlock only needs useNode from @craftjs/core. Mock it following the
+   DOM-harness pattern in src/components/basic/Footer.editguard.test.tsx (no
+   @testing-library/react in this repo) so we can render the real component
+   tree and inspect the emitted <img src> without a real <Editor>. */
+vi.mock('@craftjs/core', () => ({
+  useNode: (collect?: (node: any) => any) => {
+    const node = { events: { selected: false } };
+    return {
+      connectors: { connect: (el: any) => el, drag: (el: any) => el },
+      actions: { setProp: vi.fn() },
+      ...(collect ? collect(node) : {}),
+    };
+  },
+}));
+
+import { ImageBlock } from './ImageBlock';
+
+let container: HTMLDivElement;
+let root: Root;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('ImageBlock render falls back to the placeholder for an explicit empty src (Bug 1)', () => {
+  test('src="" (explicit, overrides the default parameter) still renders a non-empty placeholder src', () => {
+    render(<ImageBlock src="" alt="Image" />);
+    const img = container.querySelector('img')!;
+    expect(img.getAttribute('src')).not.toBe('');
+    expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
+    container.remove();
+  });
+
+  test('src=undefined (default parameter path) still renders the placeholder (unchanged behavior)', () => {
+    render(<ImageBlock alt="Image" />);
+    const img = container.querySelector('img')!;
+    expect(img.getAttribute('src')).not.toBe('');
+    expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
+    container.remove();
+  });
+
+  test('a real src is rendered unchanged', () => {
+    render(<ImageBlock src="https://example.com/photo.jpg" alt="A photo" />);
+    const img = container.querySelector('img')!;
+    expect(img.getAttribute('src')).toBe('https://example.com/photo.jpg');
+    container.remove();
+  });
+});
@@ -0,0 +1,34 @@
+import { describe, test, expect } from 'vitest';
+import { ImageBlock } from './ImageBlock';
+
+const toHtml = (ImageBlock as any).toHtml;
+
+describe('ImageBlock.toHtml src/alt XSS hardening', () => {
+  test('a javascript: src never reaches the output', () => {
+    const { html } = toHtml({ src: 'javascript:alert(1)' }, '');
+    expect(html).not.toContain('javascript:');
+  });
+
+  test('a malicious src cannot break out of the src attribute', () => {
+    const malicious = 'https://example.com/x.jpg" onerror="alert(1)';
+    const { html } = toHtml({ src: malicious }, '');
+    expect(html).not.toContain('onerror="alert(1)"');
+  });
+
+  test('a malicious alt cannot break out of the alt attribute', () => {
+    const malicious = 'x" onerror="alert(1)';
+    const { html } = toHtml({ src: 'https://example.com/x.jpg', alt: malicious }, '');
+    expect(html).not.toContain('onerror="alert(1)"');
+  });
+
+  test('a placeholder/empty src emits no output', () => {
+    const { html } = toHtml({ src: '' }, '');
+    expect(html).toBe('');
+  });
+
+  test('a normal image still renders correctly', () => {
+    const { html } = toHtml({ src: 'https://example.com/photo.jpg', alt: 'A photo' }, '');
+    expect(html).toContain('src="https://example.com/photo.jpg"');
+    expect(html).toContain('alt="A photo"');
+  });
+});
@@ -1,9 +1,9 @@
 import React, { CSSProperties, useCallback, useRef } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeAttr, safeImageUrl } from '../../utils/escape';

-const PLACEHOLDER_SRC = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f1f5f9'/%3E%3Cstop offset='100%25' stop-color='%23e2e8f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23bg)' width='400' height='300' rx='12'/%3E%3Crect x='2' y='2' width='396' height='296' rx='10' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-dasharray='8 4'/%3E%3Cg transform='translate(200,110)'%3E%3Crect x='-28' y='-28' width='56' height='56' rx='12' fill='%23cbd5e1' opacity='0.5'/%3E%3Cpath d='M-12 8 L-4 -2 L2 4 L8 -6 L16 8Z' fill='%2394a3b8'/%3E%3Ccircle cx='-6' cy='-10' r='5' fill='%2394a3b8'/%3E%3C/g%3E%3Ctext x='200' y='160' text-anchor='middle' fill='%2364748b' font-family='Inter,sans-serif' font-size='15' font-weight='500'%3EDrop image here%3C/text%3E%3Ctext x='200' y='182' text-anchor='middle' fill='%2394a3b8' font-family='Inter,sans-serif' font-size='12'%3Eor click to upload%3C/text%3E%3C/svg%3E";
+export const PLACEHOLDER_SRC = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f1f5f9'/%3E%3Cstop offset='100%25' stop-color='%23e2e8f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23bg)' width='400' height='300' rx='12'/%3E%3Crect x='2' y='2' width='396' height='296' rx='10' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-dasharray='8 4'/%3E%3Cg transform='translate(200,110)'%3E%3Crect x='-28' y='-28' width='56' height='56' rx='12' fill='%23cbd5e1' opacity='0.5'/%3E%3Cpath d='M-12 8 L-4 -2 L2 4 L8 -6 L16 8Z' fill='%2394a3b8'/%3E%3Ccircle cx='-6' cy='-10' r='5' fill='%2394a3b8'/%3E%3C/g%3E%3Ctext x='200' y='160' text-anchor='middle' fill='%2364748b' font-family='Inter,sans-serif' font-size='15' font-weight='500'%3EDrop image here%3C/text%3E%3Ctext x='200' y='182' text-anchor='middle' fill='%2394a3b8' font-family='Inter,sans-serif' font-size='12'%3Eor click to upload%3C/text%3E%3C/svg%3E";

 interface ImageBlockProps {
  src?: string;
@@ -66,7 +66,7 @@ export const ImageBlock: UserComponent<ImageBlockProps> = ({
        imgRef.current = ref;
        if (ref) connect(drag(ref));
      }}
-      src={src}
+      src={src || PLACEHOLDER_SRC}
      alt={alt || 'Image'}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
@@ -95,5 +95,5 @@ ImageBlock.craft = {
  }
  const s = cssPropsToString({ display: 'block', maxWidth: '100%', ...props.style });
  const alt = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ' alt=""';
-  return { html: `<img src="${escapeAttr(safeUrl(src))}"${alt}${s ? ` style="${s}"` : ''} />` };
+  return { html: `<img src="${escapeAttr(safeImageUrl(src))}"${alt}${s ? ` style="${s}"` : ''} />` };
 };
@@ -27,3 +27,41 @@ describe('MapEmbed.toHtml iframe src ampersand encoding (F-export review Minor)'
    expect(srcMatch![1]).not.toMatch(/&(?!amp;)/);
  });
 });
+
+describe('MapEmbed.toHtml address/zoom/height XSS hardening', () => {
+  test('a malicious address cannot break out of the src or title attribute', () => {
+    const malicious = 'X" onerror="alert(1)';
+    const { html } = toHtml({ address: malicious }, '');
+    expect(html).not.toContain('onerror="alert(1)"');
+  });
+
+  test('a wrong-typed zoom (string with attribute-breakout chars) cannot break out of the src attribute', () => {
+    const malicious = '14"><script>alert(1)</script>' as any;
+    const { html } = toHtml({ address: 'X', zoom: malicious }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toContain('"><script');
+  });
+
+  test('a wrong-typed zoom is coerced to a safe numeric value in the exported URL (defense in depth beyond escaping)', () => {
+    const malicious = '14"><script>alert(1)</script>' as any;
+    const { html } = toHtml({ address: 'X', zoom: malicious }, '');
+    const srcMatch = html.match(/<iframe src="([^"]+)"/);
+    expect(srcMatch).toBeTruthy();
+    // Decode the entity-escaped src back to a plain string and confirm the
+    // `z=` param is a bare, well-formed number -- not the raw attacker string.
+    const decoded = srcMatch![1].replace(/&amp;/g, '&').replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+    expect(decoded).toMatch(/[&?]z=\d+(&|$)/);
+  });
+
+  test('a malicious height cannot break out of the iframe style attribute', () => {
+    const malicious = '400px" onmouseover="alert(1)';
+    const { html } = toHtml({ address: 'X', height: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a normal zoom/height still renders correctly', () => {
+    const { html } = toHtml({ address: 'X', zoom: 10, height: '300px' }, '');
+    expect(html).toContain('z=10');
+    expect(html).toContain('height:300px');
+  });
+});
@@ -12,7 +12,15 @@ interface MapEmbedProps {

 function buildMapUrl(address: string, zoom: number): string {
  const encoded = encodeURIComponent(address);
-  return `https://maps.google.com/maps?q=${encoded}&z=${zoom}&output=embed`;
+  // `zoom` is declared as `number` but is not runtime-type-checked (AI
+  // update_props / deserialized state can hand us anything). The final src
+  // string is still run through escapeAttr(safeUrl(...)) at the toHtml call
+  // site, which already blocks attribute-breakout -- but Number-coercing
+  // here too keeps the emitted URL a well-formed `z=<digits>` query param
+  // instead of smuggling arbitrary attacker text into it.
+  const z = Number(zoom);
+  const safeZoom = Number.isFinite(z) ? z : 14;
+  return `https://maps.google.com/maps?q=${encoded}&z=${safeZoom}&output=embed`;
 }

 export const MapEmbed: UserComponent<MapEmbedProps> = ({
@@ -72,6 +72,38 @@ describe('VideoBlock.toHtml iframe accessibility (F2.4)', () => {
  });
 });

+describe('VideoBlock.toHtml overlay/innerMaxWidth XSS hardening (background mode)', () => {
+  test('a malicious overlayColor cannot break out of the overlay style attribute', () => {
+    const malicious = 'red" onmouseover="alert(1)';
+    const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789', isBackground: true, overlayColor: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a wrong-typed overlayOpacity (string, not number) cannot break out of the overlay style attribute', () => {
+    const malicious = '50" onmouseover="alert(1)' as any;
+    const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789', isBackground: true, overlayOpacity: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a malicious innerMaxWidth cannot break out of the inner style attribute', () => {
+    const malicious = '1200px" onmouseover="alert(1)';
+    const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789', isBackground: true, innerMaxWidth: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a malicious style.borderRadius cannot break out of the style attribute (normal mode, iframe wrapper)', () => {
+    const malicious = { borderRadius: '8px" onmouseover="alert(1)' } as any;
+    const { html } = toHtml({ videoUrl: 'https://vimeo.com/123456789', style: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+
+  test('a malicious style.borderRadius cannot break out of the style attribute (direct file <video>)', () => {
+    const malicious = { borderRadius: '8px" onmouseover="alert(1)' } as any;
+    const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4', style: malicious }, '');
+    expect(html).not.toContain('onmouseover="alert(1)"');
+  });
+});
+
 describe('VideoBlock.toHtml iframe src ampersand encoding (F-export review Minor)', () => {
  test('embed params joined with literal & are HTML-entity-encoded in the emitted src attribute', () => {
    // autoplay+muted+controls=false forces buildEmbedParams to concatenate
@@ -0,0 +1,38 @@
+import { describe, test, expect } from 'vitest';
+import { Accordion } from './Accordion';
+
+const toHtml = (Accordion as any).toHtml;
+
+const items = [
+  { title: 'Q1', content: 'A1', isOpen: true },
+  { title: 'Q2', content: 'A2', isOpen: false },
+];
+
+describe('Accordion.toHtml basic export', () => {
+  test('renders a <details> per item with the open attribute honored', () => {
+    const { html } = toHtml({ items }, '');
+    const detailsBlocks = html.match(/<details[^>]*>/g) || [];
+    expect(detailsBlocks.length).toBe(2);
+    expect(detailsBlocks[0]).toContain(' open');
+    expect(detailsBlocks[1]).not.toContain(' open');
+  });
+
+  test('headerBg/headerColor/contentBg/borderColor emit into the panel styles', () => {
+    const { html } = toHtml({ items, headerBg: '#111111', headerColor: '#222222', contentBg: '#333333', borderColor: '#444444' }, '');
+    expect(html).toContain('#111111');
+    expect(html).toContain('#222222');
+    expect(html).toContain('#333333');
+    expect(html).toContain('#444444');
+  });
+});
+
+describe('Accordion.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (Accordion as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr } from '../../utils/escape';
+import { escapeHtml, escapeAttr, cssValue } from '../../utils/escape';

 interface AccordionItem {
  title: string;
@@ -17,6 +17,11 @@ interface AccordionProps {
  contentBg?: string;
  borderColor?: string;
  anchorId?: string;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const defaultItems: AccordionItem[] = [
@@ -135,6 +140,11 @@ Accordion.craft = {
    contentBg: '#ffffff',
    borderColor: '#e2e8f0',
    anchorId: '',
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -151,10 +161,12 @@ Accordion.craft = {
    ...props.style,
  });
  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
-  const headerBg = props.headerBg || '#f8fafc';
-  const headerColor = props.headerColor || '#18181b';
-  const contentBg = props.contentBg || '#ffffff';
-  const borderColor = props.borderColor || '#e2e8f0';
+  // Sanitized -- raw string-interpolation sinks in the <details>/<summary>
+  // style attributes below.
+  const headerBg = cssValue(props.headerBg) || '#f8fafc';
+  const headerColor = cssValue(props.headerColor) || '#18181b';
+  const contentBg = cssValue(props.contentBg) || '#ffffff';
+  const borderColor = cssValue(props.borderColor) || '#e2e8f0';
  const items = props.items || defaultItems;

  const panels = items.map((item, i) => {
@@ -0,0 +1,37 @@
+import { describe, test, expect } from 'vitest';
+import { CTASection } from './CTASection';
+
+const toHtml = (CTASection as any).toHtml;
+
+describe('CTASection.toHtml basic export', () => {
+  test('renders heading, description, and CTA buttons', () => {
+    const { html } = toHtml({ heading: 'Hi', description: 'Sub', ctas: [{ text: 'Go', href: '#', variant: 'primary' }] }, '');
+    expect(html).toContain('Hi');
+    expect(html).toContain('Sub');
+    expect(html).toContain('Go');
+  });
+
+  test('box-model style props (margin/padding/border/boxShadow/opacity) flow through to the section style=""', () => {
+    const { html } = toHtml({
+      heading: 'Hi',
+      description: 'Sub',
+      style: { marginTop: '10px', paddingLeft: '5px', border: '1px solid #000', boxShadow: '0 1px 2px rgba(0,0,0,0.1)', opacity: '0.5' },
+    }, '');
+    expect(html).toContain('margin-top:10px');
+    expect(html).toContain('padding-left:5px');
+    expect(html).toContain('border:1px solid #000');
+    expect(html).toContain('box-shadow:0 1px 2px rgba(0,0,0,0.1)');
+    expect(html).toContain('opacity:0.5');
+  });
+});
+
+describe('CTASection.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (CTASection as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -14,6 +14,11 @@ interface CTASectionProps {
  gradient?: string;
  anchorId?: string;
  style?: CSSProperties;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const defaultGradient = 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)';
@@ -83,6 +88,11 @@ CTASection.craft = {
    gradient: defaultGradient,
    anchorId: '',
    style: {},
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -0,0 +1,37 @@
+import { describe, test, expect } from 'vitest';
+import { CallToAction } from './CallToAction';
+
+const toHtml = (CallToAction as any).toHtml;
+
+describe('CallToAction.toHtml basic export', () => {
+  test('renders heading, description, and CTA buttons', () => {
+    const { html } = toHtml({ heading: 'Hi', description: 'Sub', ctas: [{ text: 'Go', href: '#', variant: 'primary' }] }, '');
+    expect(html).toContain('Hi');
+    expect(html).toContain('Sub');
+    expect(html).toContain('Go');
+  });
+
+  test('box-model style props (margin/padding/border/boxShadow/opacity) flow through to the section style=""', () => {
+    const { html } = toHtml({
+      heading: 'Hi',
+      description: 'Sub',
+      style: { marginBottom: '12px', paddingRight: '6px', border: '2px dashed #333', boxShadow: '0 4px 8px rgba(0,0,0,0.12)', opacity: '0.75' },
+    }, '');
+    expect(html).toContain('margin-bottom:12px');
+    expect(html).toContain('padding-right:6px');
+    expect(html).toContain('border:2px dashed #333');
+    expect(html).toContain('box-shadow:0 4px 8px rgba(0,0,0,0.12)');
+    expect(html).toContain('opacity:0.75');
+  });
+});
+
+describe('CallToAction.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (CallToAction as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { CtaButton, normalizeCtas, ctaInlineStyle, ctasToHtml } from './_cta-helpers';
-import { escapeHtml, escapeAttr } from '../../utils/escape';
+import { escapeHtml, escapeAttr, cssValue } from '../../utils/escape';

 interface CallToActionProps {
  heading?: string;
@@ -21,6 +21,11 @@ interface CallToActionProps {
  buttonColor?: string;
  anchorId?: string;
  style?: CSSProperties;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const defaultGradient = 'linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)';
@@ -131,6 +136,11 @@ CallToAction.craft = {
    textColor: '#ffffff',
    buttonColor: '#ffffff',
    style: {},
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -144,7 +154,9 @@ CallToAction.craft = {
 (CallToAction as any).toHtml = (props: CallToActionProps, _childrenHtml: string) => {
  const bgType = props.bgType || 'gradient';
  const bgValue = props.bgValue || defaultGradient;
-  const textColor = props.textColor || '#ffffff';
+  // Sanitized -- raw string-interpolation sink in the heading/description
+  // style attributes below.
+  const textColor = cssValue(props.textColor) || '#ffffff';
  const buttonColor = props.buttonColor || '#ffffff';
  const isButtonDark = buttonColor === '#ffffff' || buttonColor === '#f8fafc';
  const buttonTextColor = isButtonDark ? '#18181b' : '#ffffff';
@@ -91,3 +91,51 @@ describe('ContentSlider.toHtml autoplay silences aria-live and is pausable (F-ex
    expect(html).not.toMatch(/visibilitychange/);
  });
 });
+
+describe('ContentSlider.toHtml renders slide.imageSrc as a background-image (INT)', () => {
+  test('a slide with imageSrc set exports a background-image referencing it', () => {
+    const slidesWithImage = [
+      { type: 'image' as const, imageSrc: 'https://example.com/photo.jpg', heading: 'One' },
+    ];
+    const { html } = toHtml({ slides: slidesWithImage }, '');
+    expect(html).toContain("background-image:url('https://example.com/photo.jpg')");
+  });
+
+  test('a slide with no imageSrc falls back to bgColor (no broken/empty background-image url)', () => {
+    const slidesNoImage = [
+      { type: 'image' as const, imageSrc: '', heading: 'One', bgColor: '#123456' },
+    ];
+    const { html } = toHtml({ slides: slidesNoImage }, '');
+    expect(html).not.toContain('background-image:url(');
+    expect(html).toContain('background-color:#123456');
+  });
+
+  test('a slide with a data:image/svg+xml imageSrc exports a non-empty background-image url (safeImageUrl, not safeUrl)', () => {
+    const svgDataUri = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const slidesWithSvg = [
+      { type: 'image' as const, imageSrc: svgDataUri, heading: 'One' },
+    ];
+    const { html } = toHtml({ slides: slidesWithSvg }, '');
+    expect(html).toContain(`background-image:url('${svgDataUri}')`);
+  });
+});
+
+describe('ContentSlider.toHtml interval is NOT runtime-type-checked -- must be coerced before it reaches the inline <script> numeric context', () => {
+  test('a malicious interval string cannot inject arbitrary JS into the autoplay setInterval call', () => {
+    const malicious = '5000);alert(document.domain);//';
+    const { html } = toHtml({ slides, autoplay: true, interval: malicious }, '');
+    expect(html).not.toContain('alert(document.domain)');
+    // the setInterval call must still be well-formed with a plain numeral delay
+    expect(html).toMatch(/setInterval\(function\(\)\{show\(current\+1\);\},\d+\);/);
+  });
+
+  test('a non-numeric interval falls back to a safe default delay', () => {
+    const { html } = toHtml({ slides, autoplay: true, interval: 'not-a-number' }, '');
+    expect(html).toMatch(/setInterval\(function\(\)\{show\(current\+1\);\},5000\);/);
+  });
+
+  test('a normal numeric interval still renders as the exact configured delay', () => {
+    const { html } = toHtml({ slides, autoplay: true, interval: 3000 }, '');
+    expect(html).toMatch(/setInterval\(function\(\)\{show\(current\+1\);\},3000\);/);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState, useEffect, useRef, useCallback } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl, scopeId, cssValue } from '../../utils/escape';

 interface Slide {
  type: 'image' | 'content';
@@ -250,11 +250,24 @@ ContentSlider.craft = {
  } = props;

  const items = slides.length > 0 ? slides : defaultSlides;
+  // Number() coercion: `interval` is declared `number` in TS but is NOT
+  // type-checked at runtime -- it arrives raw via the AI `update_props`
+  // path or a deserialized saved-state blob and is interpolated directly
+  // into the inline <script>'s `setInterval(fn, ${interval})` call below as
+  // a bare JS numeral (no quotes around it). A string like
+  // `5000);alert(1);//` would previously close the setInterval() call and
+  // splice arbitrary JS into the page's own <script> tag -- worse than an
+  // HTML attribute breakout, since it runs unconditionally on page load.
+  // Number() of anything non-numeric collapses safely to NaN, so we fall
+  // back to the 5000ms default rather than ever interpolating a
+  // non-numeral.
+  const intervalNum = Number(interval);
+  const safeInterval = Number.isFinite(intervalNum) && intervalNum > 0 ? intervalNum : 5000;
  // Deterministic AND unique id, scoped on the Craft node id, for this
  // slider's slide/dot element ids and inline-script globals -- so two
  // ContentSlider instances (e.g. both left at default slides) don't
  // collide and end up driving each other's rotation.
-  const uid = scopeId(nodeId, JSON.stringify(items) + interval, 'cs');
+  const uid = scopeId(nodeId, JSON.stringify(items) + safeInterval, 'cs');

  const sectionStyle = cssPropsToString({
    position: 'relative',
@@ -266,11 +279,14 @@ ContentSlider.craft = {

  const slidesHtml = items.map((slide, i) => {
    const hasBgImage = slide.imageSrc;
+    // Sanitized -- slide.bgColor is a per-slide raw string-interpolation
+    // sink (a malicious value could break out of the style="..." attribute).
+    const safeBgColor = cssValue(slide.bgColor) || '#3b82f6';
    const bgStyle = hasBgImage
-      ? `background-image:url('${escapeAttr(safeUrl(slide.imageSrc!))}');background-size:cover;background-position:center`
+      ? `background-image:url('${escapeAttr(safeImageUrl(slide.imageSrc!))}');background-size:cover;background-position:center`
      : slide.bgColor?.startsWith('linear-gradient')
-        ? `background-image:${slide.bgColor}`
-        : `background-color:${slide.bgColor || '#3b82f6'}`;
+        ? `background-image:${safeBgColor}`
+        : `background-color:${safeBgColor}`;

    const contentParts: string[] = [];
    if (slide.heading) {
@@ -336,7 +352,7 @@ ContentSlider.craft = {
    window["${uid}_prev"]=function(){ markManualNav(); show(current-1); };
    ${autoplayActive ? `
    var timer=null;
-    function start(){ if(!timer && document.visibilityState!=="hidden"){ timer=setInterval(function(){show(current+1);},${interval}); } }
+    function start(){ if(!timer && document.visibilityState!=="hidden"){ timer=setInterval(function(){show(current+1);},${safeInterval}); } }
    function stop(){ if(timer){ clearInterval(timer); timer=null; } }
    var root=document.getElementById(uid);
    if(root){
@@ -62,3 +62,14 @@ describe('Countdown.toHtml script nit: ticking interval stops at zero', () => {
    expect(html).toMatch(/if\s*\(\s*target\s*-\s*Date\.now\(\)\s*>\s*0\s*\)\s*\{/);
  });
 });
+
+describe('Countdown.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (Countdown as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useEffect, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId, cssValue } from '../../utils/escape';

 interface CountdownProps {
  targetDate?: string;
@@ -11,6 +11,11 @@ interface CountdownProps {
  labelColor?: string;
  bgColor?: string;
  anchorId?: string;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 interface TimeLeft {
@@ -139,6 +144,11 @@ Countdown.craft = {
    labelColor: 'rgba(255,255,255,0.7)',
    bgColor: '#18181b',
    anchorId: '',
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -154,10 +164,12 @@ Countdown.craft = {
    targetDate = DEFAULT_TARGET,
    heading = 'Coming Soon',
    style = {},
-    digitColor = '#ffffff',
-    labelColor = 'rgba(255,255,255,0.7)',
    bgColor = '#18181b',
  } = props;
+  // Sanitized -- raw string-interpolation sinks in the heading/digit/label
+  // style attributes below.
+  const digitColor = cssValue(props.digitColor) || '#ffffff';
+  const labelColor = cssValue(props.labelColor) || 'rgba(255,255,255,0.7)';

  const sectionStyle = cssPropsToString({
    padding: '60px 20px',
@@ -0,0 +1,34 @@
+import { describe, test, expect } from 'vitest';
+import { FeaturesGrid } from './FeaturesGrid';
+
+const toHtml = (FeaturesGrid as any).toHtml;
+
+describe('FeaturesGrid.toHtml image sink uses safeImageUrl (data:image/svg+xml allowed)', () => {
+  test('feat.image as a data:image/svg+xml value emits a non-empty <img src>', () => {
+    const svgDataUri = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const features = [
+      { title: 'Feature', description: 'Desc', icon: '⚡', image: svgDataUri, imageAlt: 'alt' },
+    ];
+    const { html } = toHtml({ features }, '');
+    expect(html).toContain(`<img src="${svgDataUri}"`);
+  });
+
+  test('feat.buttonUrl stays on safeUrl (data:image/svg+xml blocked as a navigation target)', () => {
+    const features = [
+      { title: 'Feature', description: 'Desc', icon: '⚡', buttonText: 'Go', buttonUrl: 'data:image/svg+xml,<svg onload=alert(1)>' },
+    ];
+    const { html } = toHtml({ features }, '');
+    expect(html).toMatch(/<a href=""/);
+  });
+});
+
+describe('FeaturesGrid.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (FeaturesGrid as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl } from '../../utils/escape';

 interface FeatureItem {
  title: string;
@@ -17,6 +17,11 @@ interface FeaturesGridProps {
  features?: FeatureItem[];
  style?: CSSProperties;
  anchorId?: string;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 // Keys image/imageAlt/buttonText/buttonUrl are present (blank) on the defaults so
@@ -98,6 +103,11 @@ FeaturesGrid.craft = {
    features: defaultFeatures,
    style: { backgroundColor: '#ffffff' },
    anchorId: '',
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -116,7 +126,7 @@ FeaturesGrid.craft = {
  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
  const cards = (props.features || defaultFeatures).map((feat) => {
    const media = feat.image
-      ? `<img src="${escapeAttr(safeUrl(feat.image))}" alt="${escapeAttr(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">`
+      ? `<img src="${escapeAttr(safeImageUrl(feat.image))}" alt="${escapeAttr(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">`
      : `<div style="font-size:36px;margin-bottom:16px">${escapeHtml(feat.icon)}</div>`;
    const button = feat.buttonText
      ? `\n      <a href="${escapeAttr(safeUrl(feat.buttonUrl || '#'))}" style="display:inline-block;margin-top:16px;padding:10px 24px;background:#3b82f6;color:#fff;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600">${escapeHtml(feat.buttonText)}</a>`
@@ -93,3 +93,59 @@ describe('Gallery.toHtml deterministic + unique scope ids (thread node id, no Ma
    expect(html1).toBe(html2);
  });
 });
+
+describe('Gallery.toHtml default SVG placeholder images survive export (Bug 2 regression)', () => {
+  test('a default data:image/svg+xml image emits a non-empty img src, not src=""', () => {
+    const { html } = toHtml({}, ''); // no images prop -> component default SVG placeholders
+    expect(html).not.toContain('src=""');
+    expect(html).toMatch(/src="data:image\/svg\+xml[^"]*"/);
+  });
+
+  test('an explicit data:image/svg+xml gallery image src is preserved (not stripped to empty)', () => {
+    const svg = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const { html } = toHtml({ images: [{ src: svg, alt: 'a' }] }, '');
+    expect(html).toContain(`src="${svg}"`);
+  });
+
+  test('lightbox data-lb-src also preserves data:image/svg+xml (still an image context)', () => {
+    const svg = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const { html } = toHtml({ images: [{ src: svg, alt: 'a' }], lightbox: true }, '');
+    expect(html).toContain(`data-lb-src="${svg}"`);
+  });
+
+  test('a javascript: gallery image src still yields an empty src (safeImageUrl still blocks it)', () => {
+    const { html } = toHtml({ images: [{ src: 'javascript:alert(1)', alt: 'a' }] }, '');
+    expect(html).toContain('src=""');
+    expect(html).not.toContain('javascript:');
+  });
+});
+
+describe('Gallery.toHtml lightbox focus management (M-2)', () => {
+  const props = { images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true };
+
+  test('overlay includes a focusable close control with an accessible name and tabindex', () => {
+    const { html } = toHtml(props, '', 'node-gal1');
+    // A close control: a button (or the dialog container) with an accessible
+    // name (aria-label) and an explicit tabindex so it's keyboard-focusable.
+    expect(html).toMatch(/aria-label="[^"]*[Cc]lose[^"]*"[^>]*tabindex="-?\d+"|tabindex="-?\d+"[^>]*aria-label="[^"]*[Cc]lose[^"]*"/);
+  });
+
+  test('script saves document.activeElement on open (for focus restore)', () => {
+    const { html } = toHtml(props, '', 'node-gal1');
+    expect(html).toMatch(/document\.activeElement/);
+  });
+
+  test('script moves focus to the close control / dialog on open', () => {
+    const { html } = toHtml(props, '', 'node-gal1');
+    expect(html).toMatch(/\.focus\(\)/);
+  });
+
+  test('script restores the previously-saved focus on close', () => {
+    const { html } = toHtml(props, '', 'node-gal1');
+    // The close function references a stored "last focused element" variable
+    // and calls .focus() on it, not just moving focus INTO the dialog.
+    const closeFnMatch = html.match(/function\s+\w+_close\s*\(\)\s*\{[^}]*\}/);
+    expect(closeFnMatch).not.toBeNull();
+    expect(closeFnMatch![0]).toMatch(/\.focus\(\)/);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeImageUrl, scopeId, cssValue } from '../../utils/escape';

 interface GalleryImage {
  src: string;
@@ -130,8 +130,14 @@ Gallery.craft = {
    ...props.style,
  });
  const images = props.images || defaultImages;
-  const columns = props.columns || 3;
-  const gap = props.gap || '16px';
+  // Number() coercion: `columns` is a raw string-interpolation sink into the
+  // grid style attribute below (repeat(${columns},1fr)) -- a non-numeric
+  // (e.g. hand-crafted/AI-generated tree) value would otherwise be able to
+  // break out; Number() of anything non-numeric collapses safely to NaN.
+  const columns = Number(props.columns) || 3;
+  // Sanitized -- gap is a raw string-interpolation sink into the grid style
+  // attribute below.
+  const gap = cssValue(props.gap) || '16px';
  const lightbox = props.lightbox || false;

  // Deterministic AND unique id, scoped on the Craft node id, for this
@@ -148,10 +154,10 @@ Gallery.craft = {
    // inline onclick with an interpolated src -- a single delegated click
    // listener below reads it, so a src containing a quote can't break out
    // of a per-item event-handler string.
-    const lbAttr = lightbox ? ` data-lb-src="${escapeAttr(safeUrl(img.src || ''))}" role="button" tabindex="0"` : '';
+    const lbAttr = lightbox ? ` data-lb-src="${escapeAttr(safeImageUrl(img.src || ''))}" role="button" tabindex="0"` : '';
    const itemStyle = lightbox ? 'cursor:pointer;position:relative;overflow:hidden;border-radius:8px' : 'position:relative;overflow:hidden;border-radius:8px';
    return `<div${lbAttr} style="${itemStyle}">
-      <img src="${escapeAttr(safeUrl(img.src || ''))}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
+      <img src="${escapeAttr(safeImageUrl(img.src || ''))}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
      ${caption}
    </div>`;
  }).join('\n    ');
@@ -160,16 +166,37 @@ Gallery.craft = {
  let gridIdAttr = '';
  if (lightbox) {
    gridIdAttr = ` id="${galleryId}_grid"`;
+    // M-2: focus management for the lightbox dialog.
+    //  - OPEN: stash `document.activeElement` (the thumbnail that triggered
+    //    the open) in a module-scoped var, then move focus onto the close
+    //    button -- so a screen-reader/keyboard user lands inside the dialog
+    //    instead of focus staying on (or silently falling back to <body>)
+    //    behind the now-visible overlay.
+    //  - Tab trap: while the overlay is open, every Tab keypress is
+    //    intercepted and refocuses the close button (the dialog's only
+    //    focusable control besides Escape/click-to-close), so focus can
+    //    never wander out into the page content hidden behind the overlay.
+    //  - CLOSE (Escape, backdrop click, or the close button): restore focus
+    //    to the element stashed on open.
    lightboxHtml = `
  <div id="${galleryId}_overlay" role="dialog" aria-modal="true" aria-label="Image preview" onclick="${galleryId}_close()" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;justify-content:center;align-items:center;cursor:pointer">
+    <button type="button" id="${galleryId}_closebtn" aria-label="Close preview" tabindex="-1" onclick="event.stopPropagation();${galleryId}_close()" style="position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,0.15);color:#ffffff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center">&times;</button>
    <img id="${galleryId}_img" src="" alt="" style="max-width:90%;max-height:90%;object-fit:contain;border-radius:8px" />
  </div>
  <script>
-function ${galleryId}_close(){document.getElementById('${galleryId}_overlay').style.display='none';}
+var ${galleryId}_lastFocus = null;
+function ${galleryId}_close(){
+  document.getElementById('${galleryId}_overlay').style.display='none';
+  if(${galleryId}_lastFocus && ${galleryId}_lastFocus.focus) ${galleryId}_lastFocus.focus();
+  ${galleryId}_lastFocus = null;
+}
 function ${galleryId}_open(src){
+  ${galleryId}_lastFocus = document.activeElement;
  var o = document.getElementById('${galleryId}_overlay');
  document.getElementById('${galleryId}_img').src = src;
  o.style.display = 'flex';
+  var c = document.getElementById('${galleryId}_closebtn');
+  if(c) c.focus();
 }
 document.getElementById('${galleryId}_grid').addEventListener('click', function(e){
  var t = e.target.closest('[data-lb-src]');
@@ -184,7 +211,14 @@ document.getElementById('${galleryId}_grid').addEventListener('keydown', functio
  ${galleryId}_open(t.getAttribute('data-lb-src'));
 });
 document.addEventListener('keydown', function(e){
-  if(e.key==='Escape'){ ${galleryId}_close(); }
+  var o = document.getElementById('${galleryId}_overlay');
+  if(!o || o.style.display==='none') return;
+  if(e.key==='Escape'){ ${galleryId}_close(); return; }
+  if(e.key==='Tab'){
+    e.preventDefault();
+    var c = document.getElementById('${galleryId}_closebtn');
+    if(c) c.focus();
+  }
 });
  </script>`;
  }
@@ -0,0 +1,35 @@
+import { describe, test, expect } from 'vitest';
+import { HeroSimple } from './HeroSimple';
+
+const toHtml = (HeroSimple as any).toHtml;
+
+describe('HeroSimple.toHtml textAlign enum sink (attacker-controlled prop, not enforced at runtime)', () => {
+  test('malicious textAlign value cannot break out of the content div style attribute', () => {
+    const { html } = toHtml({
+      heading: 'Hi',
+      subtitle: 'There',
+      textAlign: 'center;"><script>alert(1)</script>',
+    }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toContain('center;">');
+  });
+
+  test('unrecognized textAlign value falls back to a safe default rather than being echoed raw', () => {
+    const { html } = toHtml({ heading: 'Hi', subtitle: 'There', textAlign: 'not-a-real-value' as any }, '');
+    expect(html).not.toContain('text-align:not-a-real-value');
+  });
+
+  test('valid textAlign values are preserved', () => {
+    const { html: left } = toHtml({ heading: 'Hi', subtitle: 'There', textAlign: 'left' }, '');
+    expect(left).toContain('text-align:left');
+    const { html: right } = toHtml({ heading: 'Hi', subtitle: 'There', textAlign: 'right' }, '');
+    expect(right).toContain('text-align:right');
+  });
+
+  test('normal default render is sane', () => {
+    const { html } = toHtml({ heading: 'Welcome', subtitle: 'Sub text' }, '');
+    expect(html).toContain('Welcome');
+    expect(html).toContain('Sub text');
+    expect(html).toContain('text-align:center');
+  });
+});
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { CtaButton, normalizeCtas, ctaInlineStyle, ctasToHtml } from './_cta-helpers';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, cssValue } from '../../utils/escape';

 interface HeroProps {
  heading?: string;
@@ -220,7 +220,8 @@ HeroSimple.craft = {

  let overlayHtml = '';
  if ((props.overlayOpacity || 0) > 0) {
-    overlayHtml = `<div style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:${props.overlayColor || '#000'};opacity:${(props.overlayOpacity || 0) / 100};z-index:1"></div>`;
+    const overlayColor = cssValue(props.overlayColor) || '#000';
+    overlayHtml = `<div style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:${overlayColor};opacity:${(props.overlayOpacity || 0) / 100};z-index:1"></div>`;
  }

  let videoHtml = '';
@@ -228,7 +229,13 @@ HeroSimple.craft = {
    videoHtml = `<video src="${escapeAttr(safeUrl(props.bgVideo))}" autoplay muted loop playsinline style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0"></video>`;
  }

-  const textAlign = props.textAlign || 'center';
+  // Allowlisted -- `textAlign` is declared as a 'left'|'center'|'right' union
+  // but arrives unchecked via AI update_props / deserialized state; it is
+  // interpolated raw into the content div's style attribute below, so any
+  // other value must collapse to a known-safe default rather than being
+  // echoed into the markup.
+  const ALLOWED_TEXT_ALIGN = ['left', 'center', 'right'];
+  const textAlign = ALLOWED_TEXT_ALIGN.includes(props.textAlign as string) ? (props.textAlign as string) : 'center';
  const justifyBtn = textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start';

  const ctas = normalizeCtas(props);
@@ -239,12 +246,13 @@ HeroSimple.craft = {
  });

  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
+  const heroTextColor = cssValue(props.textColor) || '#fff';
  return {
    html: `<section${idAttr} style="${sectionStyle}">
 ${videoHtml}${overlayHtml}
 <div style="max-width:800px;width:100%;position:relative;z-index:2;text-align:${textAlign}">
-  <h1 style="font-size:48px;font-weight:700;color:${props.textColor || '#fff'};margin-bottom:16px;line-height:1.2">${escapeHtml(props.heading || '')}</h1>
-  <p style="font-size:20px;color:${props.textColor || '#fff'};opacity:0.85;margin-bottom:32px;line-height:1.6;white-space:pre-line">${escapeHtml(props.subtitle || '')}</p>
+  <h1 style="font-size:48px;font-weight:700;color:${heroTextColor};margin-bottom:16px;line-height:1.2">${escapeHtml(props.heading || '')}</h1>
+  <p style="font-size:20px;color:${heroTextColor};opacity:0.85;margin-bottom:32px;line-height:1.6;white-space:pre-line">${escapeHtml(props.subtitle || '')}</p>
  <div style="display:flex;gap:12px;justify-content:${justifyBtn};flex-wrap:wrap">${buttonsHtml}</div>
 </div>
 </section>`,
@@ -47,3 +47,40 @@ describe('NumberCounter.toHtml deterministic + unique scope ids (thread node id,
    expect(wrapId1).not.toBe(wrapId2);
  });
 });
+
+describe('NumberCounter.toHtml counter.number is NOT runtime-type-checked -- must be sanitized before it reaches data-target', () => {
+  test('a malicious counter.number cannot break out of the data-target attribute to inject a <script> tag', () => {
+    const malicious = [
+      { number: '150"><script>alert(1)</script>', suffix: '+', label: 'Evil' },
+    ];
+    const { html } = toHtml({ counters: malicious }, '', 'node-nc-evil1');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toContain('"><script>');
+  });
+
+  test('a malicious counter.number cannot break out of the data-target attribute to inject an onmouseover handler', () => {
+    const malicious = [
+      { number: '150" onmouseover="alert(1)', suffix: '+', label: 'Evil' },
+    ];
+    const { html } = toHtml({ counters: malicious }, '', 'node-nc-evil2');
+    expect(html).not.toContain('onmouseover=');
+    expect(html).not.toMatch(/data-target="150" onmouseover/);
+  });
+
+  test('normal numeric counter.number values still render as data-target="150"', () => {
+    const normal = [{ number: 150, suffix: '+', label: 'Projects' }];
+    const { html } = toHtml({ counters: normal }, '', 'node-nc-normal');
+    expect(html).toContain('data-target="150"');
+  });
+});
+
+describe('NumberCounter.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (NumberCounter as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId, cssValue } from '../../utils/escape';

 interface Counter {
  number: number;
@@ -16,6 +16,11 @@ interface NumberCounterProps {
  labelColor?: string;
  numberSize?: string;
  style?: CSSProperties;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const defaultCounters: Counter[] = [
@@ -99,6 +104,11 @@ NumberCounter.craft = {
    labelColor: '#6b7280',
    numberSize: '48px',
    style: { backgroundColor: '#ffffff' },
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -112,12 +122,17 @@ NumberCounter.craft = {
 (NumberCounter as any).toHtml = (props: NumberCounterProps, _childrenHtml: string, nodeId?: string) => {
  const {
    counters = defaultCounters,
-    columns = 4,
-    numberColor = '#3b82f6',
-    labelColor = '#6b7280',
-    numberSize = '48px',
    style = {},
  } = props;
+  // Number() coercion: `columns` is a raw string-interpolation sink into the
+  // grid style attribute below (repeat(${columns},1fr)); Number() of
+  // anything non-numeric collapses safely to NaN instead of breaking out.
+  const columns = Number(props.columns) || 4;
+  // Sanitized -- raw string-interpolation sinks in the counter/label spans
+  // below.
+  const numberColor = cssValue(props.numberColor) || '#3b82f6';
+  const labelColor = cssValue(props.labelColor) || '#6b7280';
+  const numberSize = cssValue(props.numberSize) || '48px';

  const items = counters.length > 0 ? counters : defaultCounters;

@@ -135,8 +150,20 @@ NumberCounter.craft = {
  });

  const countersHtml = items.map((counter, i) => {
+    // Number() coercion + escapeAttr: `counter.number` is declared `number`
+    // per-item inside an array prop, but is NOT type-checked at runtime --
+    // it arrives raw via the AI `update_props` path or a deserialized
+    // saved-state blob and was previously interpolated straight into this
+    // data-target attribute, letting a string like `150"><script>...`
+    // break out of the attribute and inject markup. Number() collapses any
+    // non-numeric value safely to NaN (then 0), and escapeAttr is kept as
+    // defense-in-depth in case Number()'s string coercion output ever
+    // contains a stray character (it can't today, but the sink should never
+    // rely solely on the coercion).
+    const numberVal = Number(counter.number);
+    const safeNumber = Number.isFinite(numberVal) ? numberVal : 0;
    return `<div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-      <span id="${uid}_n${i}" data-target="${counter.number}" data-suffix="${escapeAttr(counter.suffix)}" style="font-size:${numberSize};font-weight:700;color:${numberColor};line-height:1.1;font-family:Inter,sans-serif">0${escapeHtml(counter.suffix)}</span>
+      <span id="${uid}_n${i}" data-target="${escapeAttr(String(safeNumber))}" data-suffix="${escapeAttr(counter.suffix)}" style="font-size:${numberSize};font-weight:700;color:${numberColor};line-height:1.1;font-family:Inter,sans-serif">0${escapeHtml(counter.suffix)}</span>
      <span style="font-size:15px;color:${labelColor};font-family:Inter,sans-serif;font-weight:500">${escapeHtml(counter.label)}</span>
    </div>`;
  }).join('\n    ');
@@ -0,0 +1,105 @@
+import { describe, test, expect } from 'vitest';
+import { PricingTable } from './PricingTable';
+
+const toHtml = (PricingTable as any).toHtml;
+
+const plans = [
+  { name: 'Basic', price: '$9', period: '/month', features: ['Feature A'], buttonText: 'Buy', buttonHref: '#', isFeatured: false },
+  { name: 'Pro', price: '$29', period: '/month', features: ['Feature B'], buttonText: 'Buy', buttonHref: '#', isFeatured: true },
+];
+
+describe('PricingTable.toHtml regular-card color overrides (previously hard-coded, now real props)', () => {
+  test('cardBg emits as the non-featured card background', () => {
+    const { html } = toHtml({ plans, cardBg: '#f0f0f0' }, '');
+    expect(html).toContain('background-color:#f0f0f0');
+  });
+
+  test('textColor emits as the non-featured heading/price color', () => {
+    const { html } = toHtml({ plans, textColor: '#123456' }, '');
+    expect(html).toContain('color:#123456');
+  });
+
+  test('subColor emits as the non-featured period text color', () => {
+    const { html } = toHtml({ plans, subColor: '#abcdef' }, '');
+    expect(html).toContain('color:#abcdef');
+  });
+
+  test('featColor emits as the non-featured feature list text color', () => {
+    const { html } = toHtml({ plans, featColor: '#334455' }, '');
+    expect(html).toContain('color:#334455');
+  });
+
+  test('checkColor emits as the non-featured bullet color', () => {
+    const { html } = toHtml({ plans, checkColor: '#00ff00' }, '');
+    expect(html).toContain('color:#00ff00');
+  });
+
+  test('btnBg/btnColor emit as the non-featured button colors', () => {
+    const { html } = toHtml({ plans, btnBg: '#111111', btnColor: '#eeeeee' }, '');
+    expect(html).toContain('background-color:#111111');
+    expect(html).toContain('color:#eeeeee');
+  });
+
+  test('unset overrides fall back to the exact prior literals (backward compatible)', () => {
+    const { html } = toHtml({ plans }, '');
+    // Regular (non-featured) card literals unchanged from before these props existed.
+    expect(html).toContain('background-color:#ffffff');
+    expect(html).toContain('color:#18181b');
+    expect(html).toContain('color:#64748b');
+    expect(html).toContain('color:#4b5563');
+    expect(html).toContain('color:#10b981');
+  });
+
+  test('unset btnBg falls back to featuredBg (original derivation)', () => {
+    const { html } = toHtml({ plans, featuredBg: '#654321' }, '');
+    expect(html).toContain('background-color:#654321');
+  });
+});
+
+describe('PricingTable.toHtml XSS hardening (new card color props into style=)', () => {
+  test('a cardBg breakout string cannot escape style=""', () => {
+    const malicious = '#fff" onmouseover="alert(1)';
+    const { html } = toHtml({ plans, cardBg: malicious }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('a textColor breakout string cannot escape style=""', () => {
+    const malicious = '#000" onmouseover="alert(1)';
+    const { html } = toHtml({ plans, textColor: malicious }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('a btnBg breakout string cannot escape style=""', () => {
+    const malicious = '#000" onmouseover="alert(1)';
+    const { html } = toHtml({ plans, btnBg: malicious }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+
+  test('a btnColor breakout string cannot escape style=""', () => {
+    const malicious = '#000" onmouseover="alert(1)';
+    const { html } = toHtml({ plans, btnColor: malicious }, '');
+    expect(html).not.toMatch(/"\s+onmouseover="/);
+  });
+});
+
+describe('PricingTable.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('the new regular-card color props are declared blank by default', () => {
+    const props = (PricingTable as any).craft.props;
+    expect(props).toHaveProperty('cardBg', '');
+    expect(props).toHaveProperty('textColor', '');
+    expect(props).toHaveProperty('subColor', '');
+    expect(props).toHaveProperty('featColor', '');
+    expect(props).toHaveProperty('checkColor', '');
+    expect(props).toHaveProperty('btnBg', '');
+    expect(props).toHaveProperty('btnColor', '');
+  });
+
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (PricingTable as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, cssValue } from '../../utils/escape';

 interface PricingPlan {
  name: string;
@@ -19,6 +19,23 @@ interface PricingTableProps {
  featuredBg?: string;
  bulletType?: string;
  anchorId?: string;
+  /* ---- Regular (non-featured) card colors ----
+     All optional; each falls back to the exact literal the card was
+     previously hard-coded to (or, for the button, to featuredBg -- the
+     button's original derivation) when left unset, so existing saved
+     projects render pixel-identical until a color is explicitly picked. */
+  cardBg?: string;
+  textColor?: string;
+  subColor?: string;
+  featColor?: string;
+  checkColor?: string;
+  btnBg?: string;
+  btnColor?: string;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const bulletChars: Record<string, string> = {
@@ -61,6 +78,13 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
  featuredBg = '#3b82f6',
  bulletType = 'check',
  anchorId,
+  cardBg,
+  textColor,
+  subColor,
+  featColor,
+  checkColor,
+  btnBg,
+  btnColor,
 }) => {
  const {
    connectors: { connect, drag },
@@ -69,6 +93,14 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
    selected: node.events.selected,
  }));

+  const regCardBg = cardBg || '#ffffff';
+  const regTextColor = textColor || '#18181b';
+  const regSubColor = subColor || '#64748b';
+  const regFeatColor = featColor || '#4b5563';
+  const regCheckColor = checkColor || '#10b981';
+  const regBtnBg = btnBg || featuredBg;
+  const regBtnColor = btnColor || '#ffffff';
+
  return (
    <section
      ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
@@ -95,7 +127,7 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
            style={{
              flex: '1 1 280px',
              maxWidth: '360px',
-              backgroundColor: plan.isFeatured ? featuredBg : '#ffffff',
+              backgroundColor: plan.isFeatured ? featuredBg : regCardBg,
              border: plan.isFeatured ? 'none' : '1px solid #e2e8f0',
              borderRadius: '16px',
              padding: '40px 32px',
@@ -127,7 +159,7 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
            <h3 style={{
              fontSize: '20px',
              fontWeight: '600',
-              color: plan.isFeatured ? '#ffffff' : '#18181b',
+              color: plan.isFeatured ? '#ffffff' : regTextColor,
              marginBottom: '8px',
              marginTop: plan.isFeatured ? '8px' : '0',
            }}>
@@ -137,14 +169,14 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
              <span style={{
                fontSize: '48px',
                fontWeight: '700',
-                color: plan.isFeatured ? '#ffffff' : '#18181b',
+                color: plan.isFeatured ? '#ffffff' : regTextColor,
                lineHeight: '1',
              }}>
                {plan.price}
              </span>
              <span style={{
                fontSize: '16px',
-                color: plan.isFeatured ? 'rgba(255,255,255,0.8)' : '#64748b',
+                color: plan.isFeatured ? 'rgba(255,255,255,0.8)' : regSubColor,
              }}>
                {plan.period}
              </span>
@@ -161,12 +193,12 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
              {(Array.isArray(plan.features) ? plan.features : []).map((feature, fi) => (
                <li key={fi} style={{
                  fontSize: '14px',
-                  color: plan.isFeatured ? 'rgba(255,255,255,0.9)' : '#4b5563',
+                  color: plan.isFeatured ? 'rgba(255,255,255,0.9)' : regFeatColor,
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px',
                }}>
-                  <span style={{ color: plan.isFeatured ? '#bbf7d0' : '#10b981', fontWeight: '700' }}>{bulletChars[bulletType] || '✓'}</span>
+                  <span style={{ color: plan.isFeatured ? '#bbf7d0' : regCheckColor, fontWeight: '700' }}>{bulletChars[bulletType] || '✓'}</span>
                  {feature}
                </li>
              ))}
@@ -178,8 +210,8 @@ export const PricingTable: UserComponent<PricingTableProps> = ({
                marginTop: 'auto',
                display: 'inline-block',
                padding: '14px 32px',
-                backgroundColor: plan.isFeatured ? '#ffffff' : featuredBg,
-                color: plan.isFeatured ? featuredBg : '#ffffff',
+                backgroundColor: plan.isFeatured ? '#ffffff' : regBtnBg,
+                color: plan.isFeatured ? featuredBg : regBtnColor,
                textDecoration: 'none',
                borderRadius: '8px',
                fontWeight: '600',
@@ -207,6 +239,18 @@ PricingTable.craft = {
    featuredBg: '#3b82f6',
    bulletType: 'check',
    anchorId: '',
+    cardBg: '',
+    textColor: '',
+    subColor: '',
+    featColor: '',
+    checkColor: '',
+    btnBg: '',
+    btnColor: '',
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -225,17 +269,31 @@ PricingTable.craft = {
  });
  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
  const plans = props.plans || defaultPlans;
-  const featuredBg = props.featuredBg || '#3b82f6';
+  // Sanitized -- featuredBg is a raw string-interpolation sink below (drives
+  // cardBg/btnBg/btnColor, all raw-interpolated into style="...").
+  const featuredBg = cssValue(props.featuredBg) || '#3b82f6';
+  // Sanitized -- regular (non-featured) card color overrides, all raw
+  // string-interpolation sinks into style="..." below. Each falls back to
+  // the exact literal the card was previously hard-coded to (or, for the
+  // button, to featuredBg) when unset, so unmodified pricing tables render
+  // identically to before these props existed.
+  const regCardBg = cssValue(props.cardBg) || '#ffffff';
+  const regTextColor = cssValue(props.textColor) || '#18181b';
+  const regSubColor = cssValue(props.subColor) || '#64748b';
+  const regFeatColor = cssValue(props.featColor) || '#4b5563';
+  const regCheckColor = cssValue(props.checkColor) || '#10b981';
+  const regBtnBg = cssValue(props.btnBg) || featuredBg;
+  const regBtnColor = cssValue(props.btnColor) || '#ffffff';

  const cards = plans.map((plan) => {
-    const cardBg = plan.isFeatured ? featuredBg : '#ffffff';
+    const cardBg = plan.isFeatured ? featuredBg : regCardBg;
    const cardBorder = plan.isFeatured ? 'border:none;' : 'border:1px solid #e2e8f0;';
-    const textColor = plan.isFeatured ? '#ffffff' : '#18181b';
-    const subColor = plan.isFeatured ? 'rgba(255,255,255,0.8)' : '#64748b';
-    const featColor = plan.isFeatured ? 'rgba(255,255,255,0.9)' : '#4b5563';
-    const checkColor = plan.isFeatured ? '#bbf7d0' : '#10b981';
-    const btnBg = plan.isFeatured ? '#ffffff' : featuredBg;
-    const btnColor = plan.isFeatured ? featuredBg : '#ffffff';
+    const textColor = plan.isFeatured ? '#ffffff' : regTextColor;
+    const subColor = plan.isFeatured ? 'rgba(255,255,255,0.8)' : regSubColor;
+    const featColor = plan.isFeatured ? 'rgba(255,255,255,0.9)' : regFeatColor;
+    const checkColor = plan.isFeatured ? '#bbf7d0' : regCheckColor;
+    const btnBg = plan.isFeatured ? '#ffffff' : regBtnBg;
+    const btnColor = plan.isFeatured ? featuredBg : regBtnColor;
    const scale = plan.isFeatured ? 'transform:scale(1.05);' : '';
    const shadow = plan.isFeatured ? 'box-shadow:0 20px 60px rgba(59,130,246,0.3);' : 'box-shadow:0 1px 3px rgba(0,0,0,0.06);';

@@ -80,3 +80,14 @@ describe('Tabs.toHtml deterministic + unique ids (thread node id, resolves id-co
    expect(html1).toBe(html2);
  });
 });
+
+describe('Tabs.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (Tabs as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, scopeId, cssValue } from '../../utils/escape';

 interface TabItem {
  label: string;
@@ -17,6 +17,11 @@ interface TabsProps {
  inactiveTabColor?: string;
  contentBg?: string;
  anchorId?: string;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const defaultTabs: TabItem[] = [
@@ -114,6 +119,11 @@ Tabs.craft = {
    inactiveTabColor: '#64748b',
    contentBg: '#ffffff',
    anchorId: '',
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -131,11 +141,15 @@ Tabs.craft = {
  });
  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
  const tabs = props.tabs || defaultTabs;
-  const activeTabBg = props.activeTabBg || '#3b82f6';
-  const activeTabColor = props.activeTabColor || '#ffffff';
-  const inactiveTabBg = props.inactiveTabBg || '#f1f5f9';
-  const inactiveTabColor = props.inactiveTabColor || '#64748b';
-  const contentBg = props.contentBg || '#ffffff';
+  // Sanitized -- raw string-interpolation sinks below, both into style="..."
+  // attributes AND into an inline <script> as single-quoted JS string
+  // literals (a stray `'` there breaks out of the JS string, not just CSS);
+  // cssValue strips quotes too so it neutralizes both contexts at once.
+  const activeTabBg = cssValue(props.activeTabBg) || '#3b82f6';
+  const activeTabColor = cssValue(props.activeTabColor) || '#ffffff';
+  const inactiveTabBg = cssValue(props.inactiveTabBg) || '#f1f5f9';
+  const inactiveTabColor = cssValue(props.inactiveTabColor) || '#64748b';
+  const contentBg = cssValue(props.contentBg) || '#ffffff';

  // tabId scopes the functional wiring (onclick/getElementById) as well as
  // the ARIA tab<->panel linking ids. It must be BOTH deterministic (so
@@ -46,3 +46,39 @@ describe('Testimonials.toHtml decorative star icons (F2.5)', () => {
    stars.forEach((tag: string) => expect(tag).toContain('aria-hidden="true"'));
  });
 });
+
+describe('Testimonials.toHtml rating aria-label sink (attacker-controlled `rating`, typed number but unchecked)', () => {
+  test('malicious rating value cannot break out of the star row aria-label attribute', () => {
+    const malicious = [
+      { quote: 'Q', name: 'N', title: 'T', rating: '5"><script>alert(1)</script>' as any },
+    ];
+    const { html } = toHtml({ testimonials: malicious, layout: 'grid' }, '');
+    expect(html).not.toContain('<script>alert(1)</script>');
+    expect(html).not.toContain('5"><script>');
+  });
+
+  test('non-numeric rating falls back to a safe numeric value', () => {
+    const malicious = [
+      { quote: 'Q', name: 'N', title: 'T', rating: 'not-a-number' as any },
+    ];
+    const { html } = toHtml({ testimonials: malicious, layout: 'grid' }, '');
+    expect(html).toMatch(/aria-label="Rating: 0 out of 5"/);
+  });
+
+  test('normal numeric rating still renders correctly', () => {
+    const { html } = toHtml({ testimonials, layout: 'grid' }, '');
+    expect(html).toContain('aria-label="Rating: 5 out of 5"');
+    expect(html).toContain('aria-label="Rating: 4 out of 5"');
+  });
+});
+
+describe('Testimonials.craft.props includes the box-model/animation/visibility rollout props', () => {
+  test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
+    const props = (Testimonials as any).craft.props;
+    expect(props).toHaveProperty('animation', '');
+    expect(props).toHaveProperty('animationDelay', '');
+    expect(props).toHaveProperty('hideOnDesktop', false);
+    expect(props).toHaveProperty('hideOnTablet', false);
+    expect(props).toHaveProperty('hideOnMobile', false);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr } from '../../utils/escape';
+import { escapeHtml, escapeAttr, cssValue } from '../../utils/escape';

 interface Testimonial {
  quote: string;
@@ -18,6 +18,11 @@ interface TestimonialsProps {
  cardBg?: string;
  starColor?: string;
  anchorId?: string;
+  animation?: string;
+  animationDelay?: string;
+  hideOnDesktop?: boolean;
+  hideOnTablet?: boolean;
+  hideOnMobile?: boolean;
 }

 const defaultTestimonials: Testimonial[] = [
@@ -41,10 +46,16 @@ function renderStars(count: number, color: string): React.ReactNode {
 }

 function starsHtml(count: number, color: string): string {
+  // `count` is `Testimonial.rating`, typed `number` but arrives unchecked via
+  // AI update_props / deserialized state -- coerce to a real number before
+  // it's interpolated into the aria-label attribute below (both the loop
+  // comparison and the escapeAttr(String(...)) call are safe against any
+  // non-numeric/garbage value).
+  const safeCount = Number(count) || 0;
  const stars = [1, 2, 3, 4, 5].map((i) =>
-    `<i class="fa ${i <= count ? 'fa-star' : 'fa-star-o'}" style="color:${color};font-size:14px" aria-hidden="true"></i>`
+    `<i class="fa ${i <= safeCount ? 'fa-star' : 'fa-star-o'}" style="color:${color};font-size:14px" aria-hidden="true"></i>`
  ).join('');
-  return `<div style="display:flex;gap:2px;justify-content:center;margin-bottom:12px" role="img" aria-label="Rating: ${count} out of 5">${stars}</div>`;
+  return `<div style="display:flex;gap:2px;justify-content:center;margin-bottom:12px" role="img" aria-label="${escapeAttr(`Rating: ${safeCount} out of 5`)}">${stars}</div>`;
 }

 export const Testimonials: UserComponent<TestimonialsProps> = ({
@@ -125,6 +136,11 @@ Testimonials.craft = {
    cardBg: '#f8fafc',
    starColor: '#f59e0b',
    anchorId: '',
+    animation: '',
+    animationDelay: '',
+    hideOnDesktop: false,
+    hideOnTablet: false,
+    hideOnMobile: false,
  },
  rules: {
    canDrag: () => true,
@@ -139,11 +155,16 @@ Testimonials.craft = {
  const {
    testimonials = defaultTestimonials,
    layout = 'grid',
-    columns = 3,
    style = {},
-    cardBg = '#f8fafc',
-    starColor = '#f59e0b',
  } = props;
+  // Number() coercion: `columns` is a raw string-interpolation sink into the
+  // grid style attribute below (repeat(${columns},1fr)); Number() of
+  // anything non-numeric collapses safely to NaN instead of breaking out.
+  const columns = Number(props.columns) || 3;
+  // Sanitized -- raw string-interpolation sinks below (cardCss / starsHtml
+  // style attributes).
+  const cardBg = cssValue(props.cardBg) || '#f8fafc';
+  const starColor = cssValue(props.starColor) || '#f59e0b';

  const items = testimonials.length > 0 ? testimonials : defaultTestimonials;

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, cssValue } from '../../utils/escape';

 export type CtaVariant = 'primary' | 'outline' | 'ghost';

@@ -68,14 +68,21 @@ export function ctaInlineStyle(cta: CtaButton, defaults: CtaStyleDefaults): CSSP

 export function ctaCssString(cta: CtaButton, defaults: CtaStyleDefaults): string {
  const variant = cta.variant || 'primary';
+  // Sanitized -- these are raw string-interpolation sinks into style="...".
+  // Callers pass user-controlled design-token colors (e.g. HeroSimple's
+  // buttonBgColor/buttonTextColor/textColor) through CtaStyleDefaults, so
+  // sanitize once here rather than at every call site.
+  const outlineText = cssValue(defaults.outlineText) || '#000000';
+  const primaryBg = cssValue(defaults.primaryBg) || '#000000';
+  const primaryText = cssValue(defaults.primaryText) || '#ffffff';
  switch (variant) {
    case 'outline':
-      return `display:inline-block;padding:14px 36px;background-color:transparent;color:${defaults.outlineText};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px;border:2px solid ${defaults.outlineText}`;
+      return `display:inline-block;padding:14px 36px;background-color:transparent;color:${outlineText};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px;border:2px solid ${outlineText}`;
    case 'ghost':
-      return `display:inline-block;padding:14px 24px;background-color:transparent;color:${defaults.outlineText};text-decoration:underline;border-radius:8px;font-weight:600;font-size:16px`;
+      return `display:inline-block;padding:14px 24px;background-color:transparent;color:${outlineText};text-decoration:underline;border-radius:8px;font-weight:600;font-size:16px`;
    case 'primary':
    default:
-      return `display:inline-block;padding:14px 36px;background-color:${defaults.primaryBg};color:${defaults.primaryText};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px`;
+      return `display:inline-block;padding:14px 36px;background-color:${primaryBg};color:${primaryText};text-decoration:none;border-radius:8px;font-weight:600;font-size:16px`;
  }
 }

@@ -94,3 +94,68 @@ export const DEVICE_WIDTHS: Record<string, string> = {
  tablet: '768px',
  mobile: '375px',
 };
+
+/* ---------- ENH-Foundation shared presets ----------
+   Consumed by the reusable StylePanel controls in
+   src/panels/right/styles/shared.tsx (SizeControl, AspectRatioControl,
+   BorderControl, etc). Kept in the `{ label, value }` shape used throughout
+   this file so they drop straight into PresetButtonGrid / ColorSwatchGrid. */
+
+// Width/height preset row used by SizeControl (image + video sizing).
+export const SIZE_PRESETS = [
+  { label: '25%', value: '25%' },
+  { label: '50%', value: '50%' },
+  { label: '75%', value: '75%' },
+  { label: '100%', value: '100%' },
+  { label: 'Auto', value: 'auto' },
+  { label: 'Full', value: '100vw' },
+];
+
+// CSS `aspect-ratio` values. 'Original' (empty string) clears the property.
+export const ASPECT_RATIOS = [
+  { label: 'Original', value: '' },
+  { label: '1:1', value: '1 / 1' },
+  { label: '4:3', value: '4 / 3' },
+  { label: '3:2', value: '3 / 2' },
+  { label: '16:9', value: '16 / 9' },
+  { label: '4:5', value: '4 / 5' },
+  { label: '9:16', value: '9 / 16' },
+];
+
+// box-shadow presets; 'Colored' is the color-aware option (accent-tinted).
+export const SHADOW_PRESETS = [
+  { label: 'None', value: 'none' },
+  { label: 'S', value: '0 1px 2px rgba(0,0,0,0.08)' },
+  { label: 'M', value: '0 4px 8px rgba(0,0,0,0.12)' },
+  { label: 'L', value: '0 10px 24px rgba(0,0,0,0.18)' },
+  { label: 'Colored', value: '0 8px 20px rgba(59,130,246,0.35)' },
+];
+
+export const LINE_HEIGHTS = [
+  { label: 'Tight', value: '1.1' },
+  { label: 'Snug', value: '1.25' },
+  { label: 'Normal', value: '1.5' },
+  { label: 'Relaxed', value: '1.75' },
+  { label: 'Loose', value: '2' },
+];
+
+export const LETTER_SPACINGS = [
+  { label: 'Tight', value: '-0.02em' },
+  { label: 'Normal', value: 'normal' },
+  { label: 'Wide', value: '0.05em' },
+  { label: 'Wider', value: '0.1em' },
+];
+
+export const OBJECT_FIT = [
+  { label: 'Cover', value: 'cover' },
+  { label: 'Contain', value: 'contain' },
+  { label: 'Fill', value: 'fill' },
+  { label: 'None', value: 'none' },
+];
+
+export const BORDER_STYLES = [
+  { label: 'None', value: 'none' },
+  { label: 'Solid', value: 'solid' },
+  { label: 'Dashed', value: 'dashed' },
+  { label: 'Dotted', value: 'dotted' },
+];
@@ -1,13 +1,17 @@
 import React, { useMemo, useRef, useEffect } from 'react';
-import { Frame, Element } from '@craftjs/core';
+import { Frame, Element, useEditor } from '@craftjs/core';
 import { Container } from '../components/layout/Container';
 import { usePages } from '../state/PageContext';
 import { DeviceMode } from '../types';
 import { DEVICE_WIDTHS } from '../constants/presets';
 import { exportBodyHtml } from '../utils/html-export';
+import { useIsMobile } from '../hooks/useIsMobile';
+import { useMobileChrome } from '../state/MobileChromeContext';

 interface CanvasProps {
  device: DeviceMode;
+  /** Item 10: when false, applies `.guides-off` to hide the dashed drop-target guides. */
+  showGuides: boolean;
 }

 /**
@@ -81,24 +85,93 @@ const ZonePreview: React.FC<{ craftState: string | null; zone: 'header' | 'foote
    <div
      ref={containerRef}
      data-zone-preview={zone}
+      className="zone-preview-sep"
      style={{
        width: '100%',
        position: 'relative',
        pointerEvents: 'none',
        userSelect: 'none',
-        borderBottom: zone === 'header' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
-        borderTop: zone === 'footer' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
+        borderBottom: zone === 'header' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
+        borderTop: zone === 'footer' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
      }}
    />
  );
 };

-export const Canvas: React.FC<CanvasProps> = ({ device }) => {
+/**
+ * First-run hint shown over the canvas drop area once the current page's
+ * root node exists and has no children yet. Hidden the instant something
+ * is dropped in, and while a drag is in progress (so it never fights the
+ * drop-target UI). `pointer-events: none` (see .empty-canvas-hint in
+ * editor.css) keeps it from intercepting clicks/drops meant for the
+ * underlying empty canvas.
+ */
+export const EmptyCanvasHint: React.FC = () => {
+  const { isEmpty, isDragging } = useEditor((state) => {
+    const root = state.nodes['ROOT'];
+    return {
+      isEmpty: !!root && root.data.nodes.length === 0,
+      isDragging: state.events.dragged.size > 0,
+    };
+  });
+  const isMobile = useIsMobile();
+
+  if (!isEmpty || isDragging) return null;
+
+  return (
+    <div className="empty-canvas-hint">
+      <i className="fa fa-cubes" aria-hidden />
+      <span>
+        {isMobile
+          ? <>Tap <strong>Blocks</strong> below to add content, or pick a Template to start.</>
+          : 'Drag blocks from the left panel, or pick a Template to start.'}
+      </span>
+    </div>
+  );
+};
+
+export const Canvas: React.FC<CanvasProps> = ({ device, showGuides }) => {
  const width = DEVICE_WIDTHS[device];
  const { isEditingHeader, isEditingFooter, headerPage, footerPage } = usePages();

  const isEditingRegularPage = !isEditingHeader && !isEditingFooter;

+  // Fast-follow item 4: while `MobileSelectionToolbar` is up (fixed, ~53px
+  // tall, just above the tab bar), it covers whatever content was at the
+  // very bottom of the canvas's own scroll area -- on a short page, the
+  // last section could sit permanently under the toolbar with no way to
+  // scroll past it. Mirrors that toolbar's own visibility condition
+  // (`selectedId && activeSheet === null`) exactly, computed independently
+  // here since Canvas has no other reason to depend on the toolbar
+  // component itself.
+  const isMobile = useIsMobile();
+  const { activeSheet } = useMobileChrome();
+  const { selectedId } = useEditor((state) => {
+    const selected = state.events.selected;
+    const id = selected && selected.size > 0 ? (Array.from(selected)[0] as string) : null;
+    return { selectedId: id && id !== 'ROOT' ? id : null };
+  });
+  const mobileToolbarVisible = isMobile && !!selectedId && activeSheet === null;
+
+  // Fast-follow item 3: `MobileSelectionToolbar`'s "Style" tap scrolls the
+  // selected node up towards the top of the canvas so it stays visible
+  // above the Styles sheet (~65dvh tall) -- but that scroll is still bound
+  // by the canvas's own natural scroll range. For a selected node near the
+  // END of the content (very plausibly the last section on the page --
+  // exactly the kind of node someone just added/duplicated and wants to
+  // style), there may not be enough scrollable distance below it to bring
+  // its top all the way up to the visible band above the sheet; the browser
+  // simply clamps at its existing max scrollTop, leaving the node's top
+  // stuck behind the sheet with nothing anyone can do about it (verified
+  // live: the last section of a page landed under the sheet even after the
+  // scroll-into-view ran). Pad the canvas with a full extra viewport's
+  // worth of scroll room while the sheet is open with a selection, exactly
+  // as `has-mobile-selection-toolbar` (item 4) already pads it for the
+  // fixed toolbar -- generous enough that ANY node, including the very
+  // last one, can always be scrolled with its top reaching the very top of
+  // the canvas (comfortably within the "top ~30%" target).
+  const mobileStylesSheetPad = isMobile && !!selectedId && activeSheet === 'styles';
+
  const frameStyle = isEditingHeader
    ? { minHeight: '60px', backgroundColor: '#ffffff', padding: '12px 24px', display: 'flex', alignItems: 'center' }
    : isEditingFooter
@@ -108,9 +181,13 @@ export const Canvas: React.FC<CanvasProps> = ({ device }) => {
  const frameTag = isEditingHeader ? 'header' : isEditingFooter ? 'footer' : 'div';

  return (
-    <div className="editor-canvas">
+    <div
+      className={`editor-canvas${mobileToolbarVisible ? ' has-mobile-selection-toolbar' : ''}${
+        mobileStylesSheetPad ? ' has-mobile-styles-sheet' : ''
+      }`}
+    >
      <div
-        className="canvas-device-frame"
+        className={`canvas-device-frame${showGuides ? '' : ' guides-off'}`}
        style={{
          width,
          maxWidth: '100%',
@@ -140,14 +217,17 @@ export const Canvas: React.FC<CanvasProps> = ({ device }) => {
          <ZonePreview craftState={headerPage.craftState} zone="header" />
        )}

-        <Frame>
-          <Element
-            is={Container}
-            canvas
-            tag={frameTag}
-            style={frameStyle}
-          />
-        </Frame>
+        <div style={{ position: 'relative' }}>
+          <Frame>
+            <Element
+              is={Container}
+              canvas
+              tag={frameTag}
+              style={frameStyle}
+            />
+          </Frame>
+          {isEditingRegularPage && <EmptyCanvasHint />}
+        </div>

        {isEditingRegularPage && (
          <ZonePreview craftState={footerPage.craftState} zone="footer" />
@@ -1,16 +1,60 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { useEditor } from '@craftjs/core';
 import { TopBar } from '../panels/topbar/TopBar';
 import { LeftPanel } from '../panels/left/LeftPanel';
 import { RightPanel } from '../panels/right/RightPanel';
+import { MobilePanelBar } from '../panels/mobile/MobilePanelBar';
+import { MobileSelectionToolbar } from '../panels/mobile/MobileSelectionToolbar';
 import { Canvas } from './Canvas';
 import { ContextMenu } from '../panels/context-menu/ContextMenu';
 import { useContextMenu } from '../hooks/useContextMenu';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
+import { useIsMobile } from '../hooks/useIsMobile';
+import { MobileChromeProvider } from '../state/MobileChromeContext';
 import { DeviceMode } from '../types';

+const SHOW_GUIDES_STORAGE_KEY = 'craft-show-guides';
+
+function loadShowGuides(): boolean {
+  try {
+    const stored = window.localStorage.getItem(SHOW_GUIDES_STORAGE_KEY);
+    return stored === null ? true : stored === '1';
+  } catch {
+    return true;
+  }
+}
+
 export const EditorShell: React.FC = () => {
+  const isMobile = useIsMobile();
  const [device, setDevice] = useState<DeviceMode>('desktop');
+  // Phase A: default the canvas to the "mobile" preview width the first
+  // time we detect a mobile viewport, so the frame fits without the user
+  // having to reach for the device switcher (now tucked in TopBar's
+  // overflow menu on mobile). Only fires once, and only if the device is
+  // still at its initial default -- it must not fight a device the user
+  // has already picked (e.g. from the overflow menu) on a later re-render.
+  const mobileDeviceAppliedRef = useRef(false);
+  useEffect(() => {
+    if (isMobile && !mobileDeviceAppliedRef.current) {
+      mobileDeviceAppliedRef.current = true;
+      setDevice((current) => (current === 'desktop' ? 'mobile' : current));
+    }
+  }, [isMobile]);
+  // Item 10: canvas dashed "guide" outlines toggle -- default ON, persisted
+  // so the choice survives a reload. Lifted here (rather than owned by
+  // TopBar or Canvas alone) because the toggle button lives in TopBar but
+  // the `.guides-off` class it drives is applied to Canvas's
+  // `.canvas-device-frame`, mirroring how `device` is already lifted for
+  // the same reason.
+  const [showGuides, setShowGuidesState] = useState<boolean>(loadShowGuides);
+  const setShowGuides = useCallback((next: boolean) => {
+    setShowGuidesState(next);
+    try {
+      window.localStorage.setItem(SHOW_GUIDES_STORAGE_KEY, next ? '1' : '0');
+    } catch {
+      // Storage unavailable (private browsing, etc.) -- in-memory state still works.
+    }
+  }, []);
  const { menuState, show: showMenu, hide: hideMenu } = useContextMenu();
  const { query } = useEditor();

@@ -33,22 +77,36 @@ export const EditorShell: React.FC = () => {
  }, [query, showMenu]);

  return (
-    <div className="editor-app">
-      <TopBar device={device} onDeviceChange={setDevice} />
-      <div className="editor-container">
-        <LeftPanel />
-        <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
-          <Canvas device={device} />
+    // Mobile-A2: shared sheet/modal-open state (see MobileChromeContext) --
+    // provided around the whole shell so TopBar's Templates/Head Code modal
+    // state and MobilePanelBar's sheet state live in one place. Desktop
+    // doesn't render MobilePanelBar and TopBar's desktop branch behaves
+    // identically to before (same booleans, just sourced from context).
+    <MobileChromeProvider>
+      <div className="editor-app">
+        <TopBar
+          device={device}
+          onDeviceChange={setDevice}
+          showGuides={showGuides}
+          onToggleGuides={() => setShowGuides(!showGuides)}
+        />
+        <div className="editor-container">
+          {!isMobile && <LeftPanel />}
+          <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
+            <Canvas device={device} showGuides={showGuides} />
+          </div>
+          {!isMobile && <RightPanel />}
        </div>
-        <RightPanel />
+        {isMobile && <MobilePanelBar />}
+        {isMobile && <MobileSelectionToolbar />}
+        <ContextMenu
+          visible={menuState.visible}
+          x={menuState.x}
+          y={menuState.y}
+          nodeId={menuState.nodeId}
+          onClose={hideMenu}
+        />
      </div>
-      <ContextMenu
-        visible={menuState.visible}
-        x={menuState.x}
-        y={menuState.y}
-        nodeId={menuState.nodeId}
-        onClose={hideMenu}
-      />
-    </div>
+    </MobileChromeProvider>
  );
 };
@@ -0,0 +1,67 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* Same DOM-harness pattern as Footer.editguard.test.tsx: mock @craftjs/core's
+   useEditor so we can drive editor state without a real <Editor> tree. */
+let mockNodes: Record<string, { data: { nodes: string[] } }> = {};
+let mockDraggedSize = 0;
+
+vi.mock('@craftjs/core', () => ({
+  useEditor: (collect: (state: any) => any) =>
+    collect({
+      nodes: mockNodes,
+      events: { dragged: { size: mockDraggedSize } },
+    }),
+}));
+
+import { EmptyCanvasHint } from './Canvas';
+
+let container: HTMLDivElement;
+let root: Root;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+beforeEach(() => {
+  mockNodes = {};
+  mockDraggedSize = 0;
+});
+
+describe('EmptyCanvasHint', () => {
+  test('renders nothing before ROOT has mounted (no root node yet)', () => {
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
+    container.remove();
+  });
+
+  test('renders the hint once ROOT exists with zero children', () => {
+    mockNodes = { ROOT: { data: { nodes: [] } } };
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).not.toBeNull();
+    expect(container.textContent).toContain('Drag blocks from the left panel');
+    container.remove();
+  });
+
+  test('hides once the page has content', () => {
+    mockNodes = { ROOT: { data: { nodes: ['node-1'] } } };
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
+    container.remove();
+  });
+
+  test('hides while a drag is in progress, even on an empty root', () => {
+    mockNodes = { ROOT: { data: { nodes: [] } } };
+    mockDraggedSize = 1;
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
+    container.remove();
+  });
+});
@@ -0,0 +1,169 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* Same DOM-harness pattern as Footer.editguard.test.tsx: mock @craftjs/core
+   so RenderNode (the <Editor onRender> override) can be driven without a
+   real Editor tree. document.body doubles as the portal target, same as
+   the component itself uses. */
+let mockNode: {
+  id: string;
+  selected: boolean;
+  hovered: boolean;
+  dom: HTMLElement | null;
+  displayName: string;
+  parent: string | null;
+  isCanvas: boolean;
+};
+const selectNodeSpy = vi.fn();
+
+vi.mock('@craftjs/core', () => ({
+  useEditor: () => ({ actions: { selectNode: selectNodeSpy } }),
+  useNode: (collect?: (node: any) => any) => {
+    const node = {
+      events: { selected: mockNode.selected, hovered: mockNode.hovered },
+      dom: mockNode.dom,
+      data: {
+        custom: {},
+        displayName: mockNode.displayName,
+        parent: mockNode.parent,
+        isCanvas: mockNode.isCanvas,
+      },
+    };
+    return { id: mockNode.id, ...(collect ? collect(node) : {}) };
+  },
+}));
+
+import { RenderNode } from './RenderNode';
+
+let container: HTMLDivElement;
+let root: Root;
+let nodeDom: HTMLElement;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+beforeEach(() => {
+  nodeDom = document.createElement('div');
+  document.body.appendChild(nodeDom);
+  mockNode = {
+    id: 'node-1',
+    selected: false,
+    hovered: false,
+    dom: nodeDom,
+    displayName: 'Heading',
+    parent: 'ROOT',
+    isCanvas: false,
+  };
+  selectNodeSpy.mockClear();
+});
+
+const rendered = <span data-testid="inner">hello</span>;
+
+describe('RenderNode (Editor onRender override)', () => {
+  test('passes render through untouched when not selected', () => {
+    render(<RenderNode render={rendered} />);
+    expect(container.querySelector('[data-testid="inner"]')).not.toBeNull();
+    expect(document.querySelector('.component-indicator')).toBeNull();
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('shows the badge with the displayName when selected', () => {
+    mockNode.selected = true;
+    render(<RenderNode render={rendered} />);
+    const badge = document.querySelector('.component-indicator');
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent).toContain('Heading');
+    container.remove();
+    nodeDom.remove();
+    document.querySelector('.component-indicator')?.remove();
+  });
+
+  test('never shows a badge for ROOT even if "selected"', () => {
+    mockNode.selected = true;
+    mockNode.id = 'ROOT';
+    render(<RenderNode render={rendered} />);
+    expect(document.querySelector('.component-indicator')).toBeNull();
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('chevron click selects the parent node', () => {
+    mockNode.selected = true;
+    mockNode.parent = 'parent-42';
+    render(<RenderNode render={rendered} />);
+    const chevron = document.querySelector('.component-indicator-parent-btn') as HTMLElement;
+    expect(chevron).not.toBeNull();
+    act(() => {
+      chevron.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    });
+    expect(selectNodeSpy).toHaveBeenCalledWith('parent-42');
+    container.remove();
+    nodeDom.remove();
+    document.querySelector('.component-indicator')?.remove();
+  });
+
+  test('no chevron when there is no parent', () => {
+    mockNode.selected = true;
+    mockNode.parent = null;
+    render(<RenderNode render={rendered} />);
+    expect(document.querySelector('.component-indicator-parent-btn')).toBeNull();
+    container.remove();
+    nodeDom.remove();
+    document.querySelector('.component-indicator')?.remove();
+  });
+
+  test('tags a droppable (isCanvas) node dom with data-craft-node', () => {
+    mockNode.isCanvas = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-node')).toBe(true);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('does not tag a non-canvas (leaf) node dom with data-craft-node', () => {
+    mockNode.isCanvas = false;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-node')).toBe(false);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('never tags ROOT with data-craft-node even though ROOT is a canvas', () => {
+    mockNode.id = 'ROOT';
+    mockNode.isCanvas = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-node')).toBe(false);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('tags the dom with data-craft-hovered when the Craft hovered event is set (Layers panel hover sync)', () => {
+    mockNode.hovered = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-hovered')).toBe(true);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('removes data-craft-hovered once the hovered event clears', () => {
+    mockNode.hovered = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-hovered')).toBe(true);
+    mockNode.hovered = false;
+    act(() => {
+      root.render(<RenderNode render={rendered} />);
+    });
+    expect(nodeDom.hasAttribute('data-craft-hovered')).toBe(false);
+    container.remove();
+    nodeDom.remove();
+  });
+});
@@ -0,0 +1,116 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useEditor, useNode } from '@craftjs/core';
+
+interface RenderNodeProps {
+  render: React.ReactElement;
+}
+
+/**
+ * Craft.js `<Editor onRender>` override -- wraps every node's render output.
+ * For the currently-selected node it portals a floating badge (component
+ * displayName + a "select parent" chevron) positioned over the node's real
+ * DOM element. Non-selected nodes (the overwhelming majority) and ROOT pass
+ * straight through as a Fragment, so this never touches layout, never
+ * appears in `toHtml` export (that walks the Craft node tree, not this
+ * portal), and doesn't wrap every node in extra DOM.
+ *
+ * It also imperatively tags each node's real DOM element with two
+ * editor-only data attributes (never part of `toHtml` export, which walks
+ * the Craft node tree, not the live DOM):
+ *  - `data-craft-node`: set on actual Craft.js droppable containers
+ *    (`node.data.isCanvas`, excluding ROOT). `editor.css`'s dashed "guide"
+ *    outlines target this attribute instead of blanket tag selectors
+ *    (div/section/header/...), so a component's own internal wrapper markup
+ *    no longer picks up a guide outline it isn't a real drop target for.
+ *  - `data-craft-hovered`: mirrors `node.events.hovered` (Craft's hover
+ *    event set). Craft's own `connectors.connect()` (called by every
+ *    component) wires a native mouseover/mouseleave listener to this event
+ *    internally, so a plain mouse hover over any connected node sets it --
+ *    this attribute is a real-mouse-hover canvas highlight. (The Layers
+ *    panel's row-hover -> canvas-highlight sync, item 12, uses a sibling
+ *    `data-layer-hovered` attribute written directly by LayersPanel.tsx
+ *    instead of this event, since the action that would drive it here
+ *    -- `actions.setNodeEvent` -- is stripped from the public `useEditor()`
+ *    API at runtime.) editor.css matches both attributes for the same
+ *    outline and suppresses both under `.guides-off`.
+ */
+export const RenderNode: React.FC<RenderNodeProps> = ({ render }) => {
+  const { actions } = useEditor();
+  const { id, isSelected, dom, name, parent, isCanvas, isHovered } = useNode((node) => ({
+    isSelected: node.events.selected,
+    isHovered: node.events.hovered,
+    dom: node.dom,
+    name: (node.data.props?.aiName as string) || node.data.displayName,
+    parent: node.data.parent,
+    isCanvas: node.data.isCanvas,
+  }));
+
+  const badgeRef = useRef<HTMLDivElement>(null);
+  const active = isSelected && id !== 'ROOT' && !!dom;
+
+  const updatePosition = useCallback(() => {
+    if (!dom || !badgeRef.current) return;
+    const rect = dom.getBoundingClientRect();
+    const badgeHeight = 22;
+    badgeRef.current.style.left = `${Math.max(rect.left, 0)}px`;
+    badgeRef.current.style.top = `${Math.max(rect.top - badgeHeight, 0)}px`;
+  }, [dom]);
+
+  useEffect(() => {
+    if (!active) return;
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    document.addEventListener('scroll', updatePosition, true);
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      document.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [active, updatePosition]);
+
+  useEffect(() => {
+    if (!dom) return;
+    if (isCanvas && id !== 'ROOT') {
+      dom.setAttribute('data-craft-node', '');
+    } else {
+      dom.removeAttribute('data-craft-node');
+    }
+  }, [dom, isCanvas, id]);
+
+  useEffect(() => {
+    if (!dom) return;
+    if (isHovered) {
+      dom.setAttribute('data-craft-hovered', '');
+    } else {
+      dom.removeAttribute('data-craft-hovered');
+    }
+  }, [dom, isHovered]);
+
+  if (!active) return <>{render}</>;
+
+  return (
+    <>
+      {render}
+      {createPortal(
+        <div ref={badgeRef} className="component-indicator" style={{ position: 'fixed' }}>
+          <span>{name}</span>
+          {parent && (
+            <button
+              type="button"
+              className="component-indicator-parent-btn"
+              title="Select parent"
+              aria-label={`Select parent of ${name}`}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                actions.selectNode(parent);
+              }}
+            >
+              <i className="fa fa-chevron-up" aria-hidden />
+            </button>
+          )}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+};
@@ -0,0 +1,29 @@
+import { describe, test, expect, afterEach } from 'vitest';
+import { getClipboardNodeId, setClipboardNodeId } from './clipboard';
+
+describe('clipboard', () => {
+  afterEach(() => {
+    setClipboardNodeId(null);
+  });
+
+  test('starts empty', () => {
+    expect(getClipboardNodeId()).toBeNull();
+  });
+
+  test('set then get returns the stored node id', () => {
+    setClipboardNodeId('node-123');
+    expect(getClipboardNodeId()).toBe('node-123');
+  });
+
+  test('is a shared module-level store -- overwriting replaces the previous value', () => {
+    setClipboardNodeId('first');
+    setClipboardNodeId('second');
+    expect(getClipboardNodeId()).toBe('second');
+  });
+
+  test('can be cleared back to null', () => {
+    setClipboardNodeId('node-123');
+    setClipboardNodeId(null);
+    expect(getClipboardNodeId()).toBeNull();
+  });
+});
@@ -0,0 +1,23 @@
+/**
+ * Tiny shared clipboard for canvas node copy/paste.
+ *
+ * Both the context menu (right-click Copy/Paste) and the keyboard shortcuts
+ * hook (Ctrl/Cmd+C / Ctrl/Cmd+V) read and write this single module-level
+ * store, so copying a node via one entry point and pasting via the other
+ * behaves consistently instead of each maintaining its own clipboard.
+ *
+ * Deliberately not React state -- nothing in the UI needs to re-render
+ * reactively when the clipboard changes; consumers just read the current
+ * value at the moment they need it (on paste, or when a menu opens).
+ */
+let clipboardNodeId: string | null = null;
+
+/** Returns the id of the node currently on the clipboard, or null if empty. */
+export function getClipboardNodeId(): string | null {
+  return clipboardNodeId;
+}
+
+/** Sets (or clears, with `null`) the node id on the clipboard. */
+export function setClipboardNodeId(nodeId: string | null): void {
+  clipboardNodeId = nodeId;
+}
@@ -0,0 +1,153 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { useIsMobile } from './useIsMobile';
+
+/**
+ * Mobile-A2 (review item 5): useIsMobile is the single source of truth every
+ * mobile-only branch (bottom tab bar, collapsed topbar, bottom sheets) reads
+ * from, so it needs direct coverage of: (a) it reflects matchMedia's
+ * `matches`, (b) the `change` listener is registered AND cleaned up on
+ * unmount (a leaked listener would keep re-rendering an unmounted tree /
+ * leak the component instance), and (c) the legacy Safari<14
+ * addListener/removeListener fallback is used when addEventListener isn't
+ * available.
+ *
+ * DOM-harness pattern mirrors PageContext.pure-updaters.test.tsx /
+ * useKeyboardShortcuts.test.tsx: bare createRoot + act, no @testing-library
+ * (not a project dependency).
+ */
+
+let container: HTMLDivElement;
+let root: Root;
+let originalMatchMedia: typeof window.matchMedia;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+function unmount() {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+}
+
+/** A minimal fake MediaQueryList. `mode` picks which listener API it
+ *  exposes, so tests can force the legacy fallback path. */
+function makeMql(matches: boolean, mode: 'modern' | 'legacy' = 'modern') {
+  const listeners: Array<() => void> = [];
+  const mql: any = {
+    matches,
+    media: '(max-width: 768px)',
+  };
+  if (mode === 'modern') {
+    mql.addEventListener = vi.fn((_type: string, fn: () => void) => listeners.push(fn));
+    mql.removeEventListener = vi.fn((_type: string, fn: () => void) => {
+      const i = listeners.indexOf(fn);
+      if (i !== -1) listeners.splice(i, 1);
+    });
+  } else {
+    mql.addListener = vi.fn((fn: () => void) => listeners.push(fn));
+    mql.removeListener = vi.fn((fn: () => void) => {
+      const i = listeners.indexOf(fn);
+      if (i !== -1) listeners.splice(i, 1);
+    });
+  }
+  return { mql, fire: () => listeners.forEach((fn) => fn()), listenerCount: () => listeners.length };
+}
+
+let probedValue: boolean | null = null;
+const Probe: React.FC = () => {
+  probedValue = useIsMobile();
+  return <span data-value={String(probedValue)} />;
+};
+
+beforeEach(() => {
+  originalMatchMedia = window.matchMedia;
+  probedValue = null;
+});
+
+afterEach(() => {
+  window.matchMedia = originalMatchMedia;
+});
+
+describe('useIsMobile', () => {
+  test('returns true when the mobile media query matches', () => {
+    const { mql } = makeMql(true);
+    window.matchMedia = vi.fn(() => mql) as any;
+
+    render(<Probe />);
+    expect(probedValue).toBe(true);
+    unmount();
+  });
+
+  test('returns false when the mobile media query does not match', () => {
+    const { mql } = makeMql(false);
+    window.matchMedia = vi.fn(() => mql) as any;
+
+    render(<Probe />);
+    expect(probedValue).toBe(false);
+    unmount();
+  });
+
+  test('registers the change listener via addEventListener and updates on change', () => {
+    const { mql, fire, listenerCount } = makeMql(false);
+    window.matchMedia = vi.fn(() => mql) as any;
+
+    render(<Probe />);
+    expect(probedValue).toBe(false);
+    expect(mql.addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+    expect(listenerCount()).toBe(1);
+
+    // Flip the query result and fire the registered 'change' listener --
+    // the hook must re-read mql.matches, not just toggle blindly.
+    mql.matches = true;
+    act(() => {
+      fire();
+    });
+    expect(probedValue).toBe(true);
+
+    unmount();
+  });
+
+  test('cleans up the addEventListener listener on unmount', () => {
+    const { mql, listenerCount } = makeMql(true);
+    window.matchMedia = vi.fn(() => mql) as any;
+
+    render(<Probe />);
+    expect(listenerCount()).toBe(1);
+
+    unmount();
+
+    expect(mql.removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+    expect(listenerCount()).toBe(0);
+  });
+
+  test('falls back to legacy addListener/removeListener when addEventListener is unavailable', () => {
+    const { mql, fire, listenerCount } = makeMql(false, 'legacy');
+    window.matchMedia = vi.fn(() => mql) as any;
+
+    render(<Probe />);
+    expect(probedValue).toBe(false);
+    expect(mql.addListener).toHaveBeenCalledWith(expect.any(Function));
+    expect(listenerCount()).toBe(1);
+
+    mql.matches = true;
+    act(() => {
+      fire();
+    });
+    expect(probedValue).toBe(true);
+
+    unmount();
+
+    expect(mql.removeListener).toHaveBeenCalledWith(expect.any(Function));
+    expect(listenerCount()).toBe(0);
+  });
+});
@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+
+/** Mobile breakpoint for the editor chrome (Phase A). Keep in sync with the
+ *  `@media (max-width: 768px)` block in `src/styles/editor.css` -- both the
+ *  CSS and this hook must agree on where mobile chrome kicks in. */
+export const MOBILE_BREAKPOINT_PX = 768;
+const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX}px)`;
+
+function computeIsMobile(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (typeof window.matchMedia === 'function') {
+    try {
+      return window.matchMedia(MOBILE_QUERY).matches;
+    } catch {
+      // Fall through to the width check below (e.g. some older/embedded
+      // WebViews expose a matchMedia that throws instead of omitting it).
+    }
+  }
+  return window.innerWidth <= MOBILE_BREAKPOINT_PX;
+}
+
+/**
+ * Reports whether the viewport is at or below the mobile editor breakpoint.
+ * Drives every mobile-only branch introduced in Phase A (bottom tab bar,
+ * collapsed topbar, bottom sheets) -- desktop rendering must stay identical
+ * above the breakpoint, so this is the single source of truth both React
+ * and (via the matching CSS media query) plain CSS use to agree on "mobile".
+ *
+ * Falls back to a `resize` listener + `window.innerWidth` when
+ * `matchMedia` isn't available (e.g. some test/JSDOM environments), so the
+ * hook degrades gracefully rather than throwing.
+ */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState<boolean>(computeIsMobile);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    if (typeof window.matchMedia === 'function') {
+      let mql: MediaQueryList | null = null;
+      try {
+        mql = window.matchMedia(MOBILE_QUERY);
+      } catch {
+        mql = null;
+      }
+
+      if (mql) {
+        const handleChange = () => setIsMobile(mql!.matches);
+        handleChange();
+
+        if (typeof mql.addEventListener === 'function') {
+          mql.addEventListener('change', handleChange);
+          return () => mql!.removeEventListener('change', handleChange);
+        }
+
+        // Safari < 14 only supports the deprecated addListener/removeListener pair.
+        const legacyMql = mql as MediaQueryList & {
+          addListener?: (listener: () => void) => void;
+          removeListener?: (listener: () => void) => void;
+        };
+        legacyMql.addListener?.(handleChange);
+        return () => legacyMql.removeListener?.(handleChange);
+      }
+    }
+
+    const handleResize = () => setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT_PX);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return isMobile;
+}
@@ -0,0 +1,259 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import type { NodeTree, Node } from '@craftjs/core';
+import { useKeyboardShortcuts } from './useKeyboardShortcuts';
+import { getClipboardNodeId, setClipboardNodeId } from './clipboard';
+
+/**
+ * Regression coverage: Ctrl/Cmd+V must run the copied subtree through
+ * `regenerateTreeIds` BEFORE handing it to `actions.addNodeTree`. Pasting
+ * with the source node's ORIGINAL ids re-inserted them into the live Craft.js
+ * node map, producing duplicate ids and corrupting the tree -- that bug is
+ * exactly what this suite guards against. Also covers the sibling-parent /
+ * ROOT-fallback targeting, the empty-clipboard no-op, and the existing
+ * input-focus guard.
+ *
+ * Mock pattern mirrors PageContext.pure-updaters.test.tsx /
+ * PageContext.slug.test.tsx: a fake `useEditor` exposing `query`/`actions`,
+ * mounted via a bare consumer component, with REAL `keydown` events
+ * dispatched on `document` (where useKeyboardShortcuts attaches its
+ * listener) to exercise the actual handler rather than calling it directly.
+ *
+ * `regenerateTreeIds` itself is NOT mocked -- we partially mock
+ * `../utils/craft-tree` to wrap the real implementation in a `vi.fn()` so we
+ * can assert it was called, while still getting genuinely fresh ids back.
+ */
+
+const addNodeTreeMock = vi.fn();
+let selectedIds: string[] = [];
+
+function makeNode(id: string, parent: string | null, children: string[] = []): Node {
+  return {
+    id,
+    data: {
+      props: {},
+      type: { resolvedName: 'Container' },
+      name: 'Container',
+      displayName: 'Container',
+      isCanvas: false,
+      parent,
+      linkedNodes: {},
+      nodes: children,
+      hidden: false,
+    },
+    info: {},
+    events: { selected: false, dragged: false, hovered: false },
+    dom: null,
+    related: {},
+    rules: {},
+    _hydrationTimestamp: 0,
+  } as unknown as Node;
+}
+
+// The tree `toNodeTree()` returns for the node that was Ctrl+C'd -- a root
+// with one child, so regeneration has more than one id to remap.
+const COPIED_TREE: NodeTree = {
+  rootNodeId: 'copied-root-1',
+  nodes: {
+    'copied-root-1': makeNode('copied-root-1', null, ['copied-child-1']),
+    'copied-child-1': makeNode('copied-child-1', 'copied-root-1'),
+  },
+};
+
+const nodeStore: Record<string, { data: { parent: string | null } }> = {
+  'selected-1': { data: { parent: 'parent-container-1' } },
+  ROOT: { data: { parent: null } },
+  'copied-root-1': { data: { parent: 'wherever-it-originally-lived' } },
+};
+
+function makeQueryNode(id: string) {
+  return {
+    get: () => nodeStore[id] ?? null,
+    toNodeTree: () => {
+      if (id !== 'copied-root-1') {
+        throw new Error(`unexpected toNodeTree() call for "${id}"`);
+      }
+      return COPIED_TREE;
+    },
+  };
+}
+
+vi.mock('@craftjs/core', () => ({
+  useEditor: () => ({
+    query: {
+      getEvent: () => ({ all: () => selectedIds }),
+      node: (id: string) => makeQueryNode(id),
+    },
+    actions: {
+      addNodeTree: addNodeTreeMock,
+      history: { undo: vi.fn(), redo: vi.fn() },
+      delete: vi.fn(),
+      clearEvents: vi.fn(),
+    },
+  }),
+}));
+
+// Partial mock: keep the real `regenerateTreeIds` implementation (so pasted
+// trees genuinely get fresh ids) but wrap it in a spy so we can assert the
+// handler actually calls it, rather than only inferring that from the
+// output.
+vi.mock('../utils/craft-tree', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../utils/craft-tree')>();
+  return {
+    ...actual,
+    regenerateTreeIds: vi.fn(actual.regenerateTreeIds),
+  };
+});
+
+import { regenerateTreeIds } from '../utils/craft-tree';
+const regenerateTreeIdsMock = vi.mocked(regenerateTreeIds);
+
+let container: HTMLDivElement;
+let root: Root;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+function unmount() {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+}
+
+function pressKey(key: string, opts: Partial<KeyboardEventInit> = {}) {
+  act(() => {
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key, ctrlKey: true, bubbles: true, cancelable: true, ...opts }),
+    );
+  });
+}
+
+const Consumer: React.FC = () => {
+  useKeyboardShortcuts();
+  return null;
+};
+
+beforeEach(() => {
+  selectedIds = [];
+  addNodeTreeMock.mockClear();
+  regenerateTreeIdsMock.mockClear();
+  setClipboardNodeId(null);
+});
+
+afterEach(() => {
+  setClipboardNodeId(null);
+  if (root) unmount();
+});
+
+describe('useKeyboardShortcuts: Ctrl/Cmd+C / Ctrl/Cmd+V', () => {
+  test('Ctrl+C copies the selected node id to the clipboard', () => {
+    render(<Consumer />);
+    selectedIds = ['selected-1'];
+
+    pressKey('c');
+
+    expect(getClipboardNodeId()).toBe('selected-1');
+  });
+
+  test('Ctrl+V pastes as a sibling of the selection (selected node`s data.parent) with FRESH ids', () => {
+    render(<Consumer />);
+
+    selectedIds = ['copied-root-1'];
+    pressKey('c');
+    expect(getClipboardNodeId()).toBe('copied-root-1');
+
+    selectedIds = ['selected-1'];
+    pressKey('v');
+
+    // regenerateTreeIds actually ran before the tree was handed to Craft.js.
+    expect(regenerateTreeIdsMock).toHaveBeenCalledTimes(1);
+    expect(regenerateTreeIdsMock).toHaveBeenCalledWith(COPIED_TREE);
+
+    expect(addNodeTreeMock).toHaveBeenCalledTimes(1);
+    const [pastedTree, targetParent] = addNodeTreeMock.mock.calls[0];
+
+    // Sibling of the current selection: selected-1's data.parent.
+    expect(targetParent).toBe('parent-container-1');
+
+    // The regression this guards: pasted ids must be fresh, never reuse the
+    // ids the copied node already occupies in the live Craft.js tree.
+    expect(pastedTree.rootNodeId).not.toBe(COPIED_TREE.rootNodeId);
+    const originalIds = new Set(Object.keys(COPIED_TREE.nodes));
+    const pastedIds = new Set(Object.keys(pastedTree.nodes));
+    expect(pastedIds.size).toBe(originalIds.size);
+    for (const id of pastedIds) {
+      expect(originalIds.has(id)).toBe(false);
+    }
+  });
+
+  test('Ctrl+V with selection at ROOT falls back to ROOT as the insertion parent', () => {
+    render(<Consumer />);
+
+    selectedIds = ['copied-root-1'];
+    pressKey('c');
+
+    selectedIds = ['ROOT'];
+    pressKey('v');
+
+    expect(addNodeTreeMock).toHaveBeenCalledTimes(1);
+    const [, targetParent] = addNodeTreeMock.mock.calls[0];
+    expect(targetParent).toBe('ROOT');
+  });
+
+  test('Ctrl+V with an empty clipboard is a no-op', () => {
+    render(<Consumer />);
+    selectedIds = ['selected-1'];
+
+    pressKey('v');
+
+    expect(addNodeTreeMock).not.toHaveBeenCalled();
+    expect(regenerateTreeIdsMock).not.toHaveBeenCalled();
+  });
+
+  test('shortcuts are ignored while focus is in an input element', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    input.focus();
+    expect(document.activeElement).toBe(input);
+
+    render(<Consumer />);
+    selectedIds = ['selected-1'];
+
+    pressKey('c');
+    expect(getClipboardNodeId()).toBeNull();
+
+    setClipboardNodeId('copied-root-1');
+    pressKey('v');
+    expect(addNodeTreeMock).not.toHaveBeenCalled();
+
+    input.remove();
+  });
+
+  test('shortcuts are ignored while focus is in a contentEditable element', () => {
+    // jsdom does not implement `HTMLElement.isContentEditable` (it always
+    // reports false regardless of the contentEditable attribute -- a known
+    // jsdom limitation), so a real contentEditable + focus() can't exercise
+    // this branch of the guard. Stub `document.activeElement` directly with
+    // a fake element that reports isContentEditable: true, matching what
+    // the guard (`isInputFocused` in useKeyboardShortcuts.ts) actually reads.
+    const fakeEditable = { tagName: 'DIV', isContentEditable: true } as unknown as Element;
+    const activeElementSpy = vi.spyOn(document, 'activeElement', 'get').mockReturnValue(fakeEditable);
+
+    render(<Consumer />);
+    selectedIds = ['selected-1'];
+
+    pressKey('c');
+    expect(getClipboardNodeId()).toBeNull();
+
+    activeElementSpy.mockRestore();
+  });
+});
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useEditor } from '@craftjs/core';
 import { findDeletableTarget } from '../utils/craft-helpers';
 import { regenerateTreeIds } from '../utils/craft-tree';
+import { getClipboardNodeId, setClipboardNodeId } from './clipboard';

 function isInputFocused(): boolean {
  const el = document.activeElement;
@@ -85,6 +86,45 @@ export function useKeyboardShortcuts() {
        return;
      }

+      // Ctrl+C: copy selected node id to the shared clipboard
+      if (ctrl && (e.key === 'c' || e.key === 'C')) {
+        e.preventDefault();
+        try {
+          const selected = query.getEvent('selected').all();
+          if (selected.length > 0 && selected[0] !== 'ROOT') {
+            setClipboardNodeId(selected[0]);
+          }
+        } catch (err) {
+          console.error('Copy failed:', err);
+        }
+        return;
+      }
+
+      // Ctrl+V: paste the clipboard node as a sibling of the current selection
+      if (ctrl && (e.key === 'v' || e.key === 'V')) {
+        e.preventDefault();
+        try {
+          const sourceId = getClipboardNodeId();
+          if (!sourceId || !query.node(sourceId).get()) return;
+
+          const selected = query.getEvent('selected').all();
+          if (selected.length === 0) return;
+          const selectedId = selected[0];
+
+          let targetParent = 'ROOT';
+          if (selectedId !== 'ROOT') {
+            const node = query.node(selectedId).get();
+            targetParent = node?.data?.parent || 'ROOT';
+          }
+
+          const tree = regenerateTreeIds(query.node(sourceId).toNodeTree());
+          actions.addNodeTree(tree, targetParent);
+        } catch (err) {
+          console.error('Paste failed:', err);
+        }
+        return;
+      }
+
      // Escape: deselect all
      if (e.key === 'Escape') {
        e.preventDefault();
@@ -0,0 +1,258 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import type { NodeTree, Node } from '@craftjs/core';
+import { useNodeActions, type NodeActions } from './useNodeActions';
+
+/**
+ * Phase B, item 1: `useNodeActions` was extracted out of `ContextMenu.tsx` so
+ * the desktop right-click menu and the mobile selection toolbar
+ * (`MobileSelectionToolbar`) share one implementation. This suite exercises
+ * the hook directly (mocking `@craftjs/core`'s `useEditor`, mirroring the
+ * pattern in `useKeyboardShortcuts.test.tsx`), covering:
+ *  - moveUp/moveDown call `actions.move` with the right target index, and
+ *    are no-ops at the respective boundary
+ *  - canMoveUp/canMoveDown reflect the node's position among its siblings
+ *  - duplicate regenerates ids, inserts the copy IMMEDIATELY AFTER the
+ *    source node (`actions.addNodeTree(tree, parentId, sourceIndex + 1)`),
+ *    and selects the new copy (`actions.selectNode(tree.rootNodeId)`) --
+ *    Phase B fast-follow: the previous append-at-end behavior left the copy
+ *    off-screen with the ORIGINAL still selected, so users couldn't see
+ *    what "Duplicate" had just done.
+ *  - selectParent calls `actions.selectNode` with the parent id
+ *  - canSelectParent reflects whether the node's parent is itself real
+ *    (not ROOT/missing) -- false at a top-level section, true one level in
+ *  - deleteNode routes through `findDeletableTarget` (also covering the
+ *    "no deletable target" no-op)
+ *  - ROOT/null nodeId disables every action safely (no-ops, all
+ *    canMoveUp/canMoveDown/canDelete/canSelectParent false)
+ */
+
+const moveMock = vi.fn();
+const addNodeTreeMock = vi.fn();
+const selectNodeMock = vi.fn();
+const deleteMock = vi.fn();
+
+interface FakeNodeData {
+  parent: string | null;
+  nodes: string[];
+}
+
+let fakeNodes: Record<string, { data: FakeNodeData }> = {};
+
+const COPIED_TREE: NodeTree = {
+  rootNodeId: 'child-1',
+  nodes: {
+    'child-1': {
+      id: 'child-1',
+      data: { props: {}, type: { resolvedName: 'Container' }, name: 'Container', displayName: 'Container', isCanvas: false, parent: 'parent-1', linkedNodes: {}, nodes: [], hidden: false },
+      info: {},
+      events: { selected: false, dragged: false, hovered: false },
+      dom: null,
+      related: {},
+      rules: {},
+      _hydrationTimestamp: 0,
+    } as unknown as Node,
+  },
+};
+
+function makeQuery() {
+  return {
+    node: (id: string) => ({
+      get: () => fakeNodes[id] ?? null,
+      toNodeTree: () => {
+        if (id !== 'child-1') throw new Error(`unexpected toNodeTree() for "${id}"`);
+        return COPIED_TREE;
+      },
+    }),
+  };
+}
+
+vi.mock('@craftjs/core', () => ({
+  useEditor: (collector?: (state: any, query: any) => any) => {
+    const state = {
+      nodes: Object.fromEntries(Object.entries(fakeNodes).map(([id, n]) => [id, n])),
+    };
+    const query = makeQuery();
+    const collected = collector ? collector(state, query) : {};
+    return {
+      ...collected,
+      actions: {
+        move: moveMock,
+        addNodeTree: addNodeTreeMock,
+        selectNode: selectNodeMock,
+        delete: deleteMock,
+      },
+      query,
+    };
+  },
+}));
+
+vi.mock('../utils/craft-tree', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../utils/craft-tree')>();
+  return { ...actual, regenerateTreeIds: vi.fn(actual.regenerateTreeIds) };
+});
+
+import { regenerateTreeIds } from '../utils/craft-tree';
+const regenerateTreeIdsMock = vi.mocked(regenerateTreeIds);
+
+let container: HTMLDivElement;
+let root: Root;
+let captured: NodeActions | null = null;
+
+const Probe: React.FC<{ nodeId: string | null }> = ({ nodeId }) => {
+  captured = useNodeActions(nodeId);
+  return null;
+};
+
+function render(nodeId: string | null) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(<Probe nodeId={nodeId} />);
+  });
+}
+
+function rerender(nodeId: string | null) {
+  act(() => {
+    root.render(<Probe nodeId={nodeId} />);
+  });
+}
+
+function unmount() {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+}
+
+beforeEach(() => {
+  moveMock.mockClear();
+  addNodeTreeMock.mockClear();
+  selectNodeMock.mockClear();
+  deleteMock.mockClear();
+  regenerateTreeIdsMock.mockClear();
+  captured = null;
+  fakeNodes = {
+    ROOT: { data: { parent: null, nodes: ['parent-1'] } },
+    'parent-1': { data: { parent: 'ROOT', nodes: ['child-0', 'child-1', 'child-2'] } },
+    'child-0': { data: { parent: 'parent-1', nodes: [] } },
+    'child-1': { data: { parent: 'parent-1', nodes: [] } },
+    'child-2': { data: { parent: 'parent-1', nodes: [] } },
+  };
+});
+
+afterEach(() => {
+  if (root) unmount();
+});
+
+describe('useNodeActions', () => {
+  test('a middle child can move both up and down', () => {
+    render('child-1');
+    expect(captured!.canMoveUp).toBe(true);
+    expect(captured!.canMoveDown).toBe(true);
+  });
+
+  test('the first child cannot move up, but can move down', () => {
+    render('child-0');
+    expect(captured!.canMoveUp).toBe(false);
+    expect(captured!.canMoveDown).toBe(true);
+  });
+
+  test('the last child can move up, but not down', () => {
+    render('child-2');
+    expect(captured!.canMoveUp).toBe(true);
+    expect(captured!.canMoveDown).toBe(false);
+  });
+
+  test('moveUp calls actions.move with idx - 1, moveDown with idx + 2 (Craft.js index semantics)', () => {
+    render('child-1');
+    act(() => captured!.moveUp());
+    expect(moveMock).toHaveBeenCalledWith('child-1', 'parent-1', 0);
+
+    moveMock.mockClear();
+    act(() => captured!.moveDown());
+    expect(moveMock).toHaveBeenCalledWith('child-1', 'parent-1', 3);
+  });
+
+  test('moveUp/moveDown at a boundary are no-ops', () => {
+    render('child-0');
+    act(() => captured!.moveUp());
+    expect(moveMock).not.toHaveBeenCalled();
+
+    rerender('child-2');
+    act(() => captured!.moveDown());
+    expect(moveMock).not.toHaveBeenCalled();
+  });
+
+  test('duplicate inserts the copy immediately after the source (parentId, sourceIndex + 1) and selects it', () => {
+    render('child-1');
+    let returned: string | null | undefined;
+    act(() => {
+      returned = captured!.duplicate();
+    });
+
+    expect(regenerateTreeIdsMock).toHaveBeenCalledTimes(1);
+    expect(addNodeTreeMock).toHaveBeenCalledTimes(1);
+    const [tree, parentId, index] = addNodeTreeMock.mock.calls[0];
+    // child-1 is at index 1 among ['child-0', 'child-1', 'child-2'] -> insert at 2.
+    expect(parentId).toBe('parent-1');
+    expect(index).toBe(2);
+    expect(tree.rootNodeId).not.toBe(COPIED_TREE.rootNodeId);
+
+    expect(selectNodeMock).toHaveBeenCalledTimes(1);
+    expect(selectNodeMock).toHaveBeenCalledWith(tree.rootNodeId);
+    expect(returned).toBe(tree.rootNodeId);
+  });
+
+  test('selectParent calls actions.selectNode with the parent id', () => {
+    render('child-1');
+    act(() => captured!.selectParent());
+    expect(selectNodeMock).toHaveBeenCalledWith('parent-1');
+  });
+
+  test('canSelectParent is false at a top-level node (parent is ROOT), true one level deeper', () => {
+    render('parent-1'); // parent-1's own parent is 'ROOT'
+    expect(captured!.canSelectParent).toBe(false);
+
+    rerender('child-1'); // child-1's parent is 'parent-1', a real node
+    expect(captured!.canSelectParent).toBe(true);
+  });
+
+  test('deleteNode calls actions.delete with the node id when deletable', () => {
+    render('child-1');
+    expect(captured!.canDelete).toBe(true);
+    act(() => captured!.deleteNode());
+    expect(deleteMock).toHaveBeenCalledWith('child-1');
+  });
+
+  test('ROOT nodeId disables every action and is a safe no-op', () => {
+    render('ROOT');
+    expect(captured!.canMoveUp).toBe(false);
+    expect(captured!.canMoveDown).toBe(false);
+    expect(captured!.canDelete).toBe(false);
+    expect(captured!.canSelectParent).toBe(false);
+
+    act(() => {
+      captured!.moveUp();
+      captured!.moveDown();
+      captured!.duplicate();
+      captured!.selectParent();
+      captured!.deleteNode();
+    });
+    expect(moveMock).not.toHaveBeenCalled();
+    expect(addNodeTreeMock).not.toHaveBeenCalled();
+    expect(selectNodeMock).not.toHaveBeenCalled();
+    expect(deleteMock).not.toHaveBeenCalled();
+  });
+
+  test('null nodeId disables every action and is a safe no-op', () => {
+    render(null);
+    expect(captured!.canMoveUp).toBe(false);
+    expect(captured!.canMoveDown).toBe(false);
+    expect(captured!.canDelete).toBe(false);
+    expect(captured!.canSelectParent).toBe(false);
+  });
+});
@@ -0,0 +1,221 @@
+import { useEditor } from '@craftjs/core';
+import { regenerateTreeIds } from '../utils/craft-tree';
+import { findDeletableTarget } from '../utils/craft-helpers';
+
+export interface NodeActions {
+  moveUp: () => void;
+  moveDown: () => void;
+  /** Duplicates `nodeId`, inserting the copy immediately after the source in
+   *  the parent's children and selecting it. Returns the new node's id (so
+   *  callers -- e.g. `MobileSelectionToolbar` -- can scroll it into view),
+   *  or null if the duplicate could not be performed (no-op for ROOT/null,
+   *  or a caught error). */
+  duplicate: () => string | null;
+  deleteNode: () => void;
+  selectParent: () => void;
+  /** True if `nodeId` has an earlier sibling under the same parent (so
+   *  `moveUp` would actually move it). False for ROOT/null/no-parent. */
+  canMoveUp: boolean;
+  /** True if `nodeId` has a later sibling under the same parent (so
+   *  `moveDown` would actually move it). False for ROOT/null/no-parent. */
+  canMoveDown: boolean;
+  /** True if `findDeletableTarget` resolves to a real, deletable node (either
+   *  `nodeId` itself, or an ancestor when `nodeId` is an empty linked-node
+   *  slot whose siblings are all also empty -- see `craft-helpers.ts`). */
+  canDelete: boolean;
+  /** True if `nodeId` has a real parent to select -- i.e. the parent is
+   *  neither ROOT nor missing. `selectParent` on a top-level section (whose
+   *  parent IS 'ROOT') would only select the page-wide ROOT node, which has
+   *  no on-canvas outline and no toolbar of its own -- a dead end for a
+   *  mobile user with no way back. False for ROOT/null/no-parent too. */
+  canSelectParent: boolean;
+}
+
+/**
+ * Shared node-action logic (move up/down, duplicate, delete, select parent)
+ * extracted from `ContextMenu.tsx` (Phase B) so both the desktop right-click
+ * menu AND the mobile on-canvas selection toolbar (`MobileSelectionToolbar`)
+ * drive the exact same behavior from one place instead of two independent
+ * copies drifting apart.
+ *
+ * IMPORTANT gotcha this hook works around: `@craftjs/core`'s `useEditor`
+ * collector (`@craftjs/utils`' `useCollector`) only synchronously computes
+ * the collector function ONCE, on this hook's very first mount. After that,
+ * it updates purely in reaction to the underlying store's OWN change
+ * notifications, invoking whatever collector closure is current AT THAT
+ * NOTIFICATION -- so a collector that closes over `nodeId` (an argument that
+ * changes across renders of the SAME mounted hook instance, e.g. every time
+ * `MobileSelectionToolbar` re-renders with a newly-selected node) goes stale
+ * for exactly one render: the cached value from the last store notification
+ * (computed against the PREVIOUS nodeId) is what gets returned, until some
+ * unrelated store event happens to trigger a fresh computation. An earlier
+ * version of this hook computed `canMoveUp`/`canMoveDown`/`canDelete` inside
+ * such a collector and was caught showing the PREVIOUS selection's move
+ * boundaries in the mobile toolbar for one render after tapping a new node
+ * (verified with real Playwright touch taps against a real Craft.js
+ * document -- a plain mocked `useEditor` in a unit test doesn't reproduce
+ * this, since a hand-rolled mock has no reason to replicate the real
+ * library's caching).
+ *
+ * The fix: get `actions`/`query` from a collector-FREE `useEditor()` call
+ * (an always-live reference, same pattern `ContextMenu.tsx` used before this
+ * extraction) and compute `canMoveUp`/`canMoveDown`/`canDelete` as plain
+ * synchronous code during render using that live `query` -- never cached.
+ *
+ * That still leaves one gap: `nodeId` staying the SAME across renders while
+ * its position changes (e.g. tapping "Move Up" repeatedly on the same
+ * still-selected node) needs SOMETHING to trigger a re-render so the boundary
+ * flags below get recomputed. An earlier version of this hook forced that
+ * via a second `useEditor((state) => ({ _: state.nodes }))` subscription --
+ * but subscribing to the WHOLE node map reacts to every `dom` ref
+ * assignment too (Craft's `connectors.connect(ref)` calls `actions.setDOM`
+ * synchronously from a React ref callback during COMMIT, i.e. while some
+ * OTHER component is still mounting), which trips React's "Cannot update a
+ * component while rendering a different component" warning the moment a
+ * freshly-added container with children mounts. Callers that need
+ * `canMoveUp`/`canMoveDown` to refresh after a move they themselves
+ * triggered (`MobileSelectionToolbar`) should instead bump their OWN local
+ * state right after calling `moveUp`/`moveDown` -- a plain, local,
+ * event-handler-triggered re-render, not a store-wide subscription.
+ */
+export function useNodeActions(nodeId: string | null | undefined): NodeActions {
+  const { actions, query } = useEditor();
+
+  const isRootOrNull = !nodeId || nodeId === 'ROOT';
+
+  let canMoveUp = false;
+  let canMoveDown = false;
+  let canSelectParent = false;
+  if (!isRootOrNull) {
+    try {
+      const node = query.node(nodeId).get();
+      const parentId: string | null | undefined = node?.data?.parent;
+      if (parentId) {
+        canSelectParent = parentId !== 'ROOT';
+        const siblings: string[] = query.node(parentId).get()?.data?.nodes || [];
+        const idx = siblings.indexOf(nodeId);
+        canMoveUp = idx > 0;
+        canMoveDown = idx !== -1 && idx < siblings.length - 1;
+      }
+    } catch {
+      // Node no longer exists (e.g. deleted out from under a stale
+      // reference) -- leave both false.
+    }
+  }
+
+  const canDelete = !isRootOrNull && !!findDeletableTarget(query, nodeId);
+
+  const getParentId = (): string | null => {
+    if (!nodeId) return null;
+    try {
+      const node = query.node(nodeId).get();
+      return node?.data?.parent || null;
+    } catch {
+      return null;
+    }
+  };
+
+  const duplicate = (): string | null => {
+    if (!nodeId || nodeId === 'ROOT') return null;
+    try {
+      const parentId = getParentId();
+      if (!parentId) return null;
+
+      const tree = regenerateTreeIds(query.node(nodeId).toNodeTree());
+
+      // Insert the copy IMMEDIATELY AFTER the source node, not appended at
+      // the end of the parent -- on a top-level section, "append at end"
+      // landed the copy at the bottom of the page, off-screen, with the
+      // ORIGINAL still selected, so a duplicate looked like nothing had
+      // happened at all. Resolve the source's index among its siblings so
+      // the copy lands right next to what it was copied from; if that can't
+      // be resolved for any reason, fall back to the old append behavior
+      // rather than guessing at an index (or throwing).
+      let insertIndex: number | undefined;
+      try {
+        const siblings: string[] = query.node(parentId).get()?.data?.nodes || [];
+        const sourceIndex = siblings.indexOf(nodeId);
+        if (sourceIndex !== -1) insertIndex = sourceIndex + 1;
+      } catch {
+        // Leave insertIndex undefined -- addNodeTree appends when omitted.
+      }
+
+      if (insertIndex !== undefined) {
+        actions.addNodeTree(tree, parentId, insertIndex);
+      } else {
+        actions.addNodeTree(tree, parentId);
+      }
+
+      // Select the new copy (not the original) so the toolbar/context menu
+      // and any on-canvas outline immediately reflect what was just created.
+      actions.selectNode(tree.rootNodeId);
+
+      return tree.rootNodeId;
+    } catch (e) {
+      console.error('Duplicate failed:', e);
+      return null;
+    }
+  };
+
+  const moveUp = () => {
+    if (!nodeId || nodeId === 'ROOT') return;
+    try {
+      const parentId = getParentId();
+      if (!parentId) return;
+      const parent = query.node(parentId).get();
+      const children = parent.data.nodes || [];
+      const idx = children.indexOf(nodeId);
+      if (idx > 0) {
+        actions.move(nodeId, parentId, idx - 1);
+      }
+    } catch (e) {
+      console.error('Move up failed:', e);
+    }
+  };
+
+  const moveDown = () => {
+    if (!nodeId || nodeId === 'ROOT') return;
+    try {
+      const parentId = getParentId();
+      if (!parentId) return;
+      const parent = query.node(parentId).get();
+      const children = parent.data.nodes || [];
+      const idx = children.indexOf(nodeId);
+      if (idx < children.length - 1) {
+        actions.move(nodeId, parentId, idx + 2);
+      }
+    } catch (e) {
+      console.error('Move down failed:', e);
+    }
+  };
+
+  const selectParent = () => {
+    if (!nodeId || nodeId === 'ROOT') return;
+    const parentId = getParentId();
+    if (parentId) {
+      actions.selectNode(parentId);
+    }
+  };
+
+  const deleteNode = () => {
+    const target = findDeletableTarget(query, nodeId);
+    if (!target) return;
+    try {
+      actions.delete(target);
+    } catch (e) {
+      console.error('Delete failed:', e);
+    }
+  };
+
+  return {
+    moveUp,
+    moveDown,
+    duplicate,
+    deleteNode,
+    selectParent,
+    canMoveUp,
+    canMoveDown,
+    canDelete,
+    canSelectParent,
+  };
+}
@@ -0,0 +1,146 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { useVisualViewportInsets } from './useVisualViewport';
+
+/**
+ * Fast-follow coverage for `useVisualViewportInsets` (BottomSheet's
+ * keyboard-avoidance source of truth). Mirrors the bare createRoot + act
+ * harness `useIsMobile.test.tsx` uses (no @testing-library/react in this
+ * repo). Covers:
+ *  - the no-`visualViewport` fallback (older WebViews) returns
+ *    `{ height: window.innerHeight, keyboardInset: 0 }` AND registers no
+ *    listener (there's nothing to listen to).
+ *  - the keyboard-open math: `keyboardInset = innerHeight - (vv.height +
+ *    vv.offsetTop)`, recomputed when the mocked vv fires `resize`.
+ *  - both `resize` and `scroll` listeners are added on mount and the SAME
+ *    handler is removed for both on unmount (a leaked listener would keep
+ *    reacting after the owning component -- e.g. BottomSheet -- is gone).
+ */
+
+let container: HTMLDivElement;
+let root: Root;
+let originalInnerHeight: number;
+let originalVisualViewport: VisualViewport | null;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+function unmount() {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+}
+
+/** A minimal fake `visualViewport`: just enough surface for the hook
+ *  (`height`, `offsetTop`, `addEventListener`/`removeEventListener`). */
+function makeVisualViewport(height: number, offsetTop: number) {
+  const listeners: Record<string, Array<() => void>> = { resize: [], scroll: [] };
+  const vv: any = {
+    height,
+    offsetTop,
+    addEventListener: vi.fn((type: string, fn: () => void) => {
+      listeners[type].push(fn);
+    }),
+    removeEventListener: vi.fn((type: string, fn: () => void) => {
+      const i = listeners[type].indexOf(fn);
+      if (i !== -1) listeners[type].splice(i, 1);
+    }),
+  };
+  return {
+    vv,
+    fire: (type: 'resize' | 'scroll') => listeners[type].forEach((fn) => fn()),
+    listenerCount: (type: 'resize' | 'scroll') => listeners[type].length,
+  };
+}
+
+let probed: { height: number; keyboardInset: number } | null = null;
+const Probe: React.FC = () => {
+  probed = useVisualViewportInsets();
+  return <span data-height={probed.height} data-inset={probed.keyboardInset} />;
+};
+
+beforeEach(() => {
+  originalInnerHeight = window.innerHeight;
+  originalVisualViewport = window.visualViewport;
+  probed = null;
+});
+
+afterEach(() => {
+  Object.defineProperty(window, 'innerHeight', {
+    value: originalInnerHeight,
+    configurable: true,
+    writable: true,
+  });
+  Object.defineProperty(window, 'visualViewport', {
+    value: originalVisualViewport,
+    configurable: true,
+  });
+});
+
+describe('useVisualViewportInsets', () => {
+  test('falls back to innerHeight/0 and registers no listener when visualViewport is undefined', () => {
+    Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true, writable: true });
+    Object.defineProperty(window, 'visualViewport', { value: undefined, configurable: true });
+
+    render(<Probe />);
+
+    expect(probed).toEqual({ height: 800, keyboardInset: 0 });
+
+    unmount();
+  });
+
+  test('computes keyboardInset from visualViewport and recomputes on resize', () => {
+    Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true, writable: true });
+    const { vv, fire } = makeVisualViewport(800, 0);
+    Object.defineProperty(window, 'visualViewport', { value: vv, configurable: true });
+
+    render(<Probe />);
+
+    // No keyboard open: vv fills the layout viewport exactly.
+    expect(probed).toEqual({ height: 800, keyboardInset: 0 });
+
+    // Simulate the on-screen keyboard opening: the visual viewport shrinks.
+    vv.height = 500;
+    vv.offsetTop = 0;
+    act(() => {
+      fire('resize');
+    });
+
+    expect(probed).toEqual({ height: 500, keyboardInset: 300 });
+
+    unmount();
+  });
+
+  test('registers resize and scroll listeners on mount and removes both (same handler) on unmount', () => {
+    Object.defineProperty(window, 'innerHeight', { value: 800, configurable: true, writable: true });
+    const { vv, listenerCount } = makeVisualViewport(800, 0);
+    Object.defineProperty(window, 'visualViewport', { value: vv, configurable: true });
+
+    render(<Probe />);
+
+    expect(vv.addEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
+    expect(vv.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+    expect(listenerCount('resize')).toBe(1);
+    expect(listenerCount('scroll')).toBe(1);
+
+    const resizeHandler = vv.addEventListener.mock.calls.find((c: any[]) => c[0] === 'resize')[1];
+    const scrollHandler = vv.addEventListener.mock.calls.find((c: any[]) => c[0] === 'scroll')[1];
+    expect(resizeHandler).toBe(scrollHandler);
+
+    unmount();
+
+    expect(vv.removeEventListener).toHaveBeenCalledWith('resize', resizeHandler);
+    expect(vv.removeEventListener).toHaveBeenCalledWith('scroll', scrollHandler);
+    expect(listenerCount('resize')).toBe(0);
+    expect(listenerCount('scroll')).toBe(0);
+  });
+});
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+export interface VisualViewportInsets {
+  /** The visual viewport's current height (shrinks when the on-screen
+   *  keyboard opens). Falls back to `window.innerHeight` when
+   *  `visualViewport` isn't supported. */
+  height: number;
+  /** Extra inset a `position: fixed`, bottom-anchored element should add to
+   *  its own `bottom` offset to stay clear of the on-screen keyboard --
+   *  `window.innerHeight` minus the visual viewport's bottom edge (its
+   *  height + offsetTop). Zero whenever no keyboard is open, or
+   *  `visualViewport` isn't supported (a safe no-op fallback). */
+  keyboardInset: number;
+}
+
+const ZERO_INSETS: VisualViewportInsets = { height: 0, keyboardInset: 0 };
+
+function computeInsets(): VisualViewportInsets {
+  if (typeof window === 'undefined') return ZERO_INSETS;
+  const vv = window.visualViewport;
+  if (!vv) return { height: window.innerHeight, keyboardInset: 0 };
+  const keyboardInset = Math.max(0, window.innerHeight - (vv.height + vv.offsetTop));
+  return { height: vv.height, keyboardInset };
+}
+
+/**
+ * Tracks `window.visualViewport`'s height/offset (item 5, Phase B) so
+ * `BottomSheet` can stay clear of the on-screen keyboard. `position: fixed`
+ * elements are positioned against the LAYOUT viewport, which does NOT shrink
+ * when a mobile keyboard opens -- only the visual viewport does -- so a
+ * bottom-anchored sheet's inputs can otherwise end up hidden underneath the
+ * keyboard with no visual indication anything is wrong.
+ *
+ * Guards for browsers without `visualViewport` (older WebViews): falls back
+ * to `{ height: window.innerHeight, keyboardInset: 0 }`, i.e. a no-op, so
+ * the sheet just keeps its existing (keyboard-unaware) sizing there.
+ */
+export function useVisualViewportInsets(): VisualViewportInsets {
+  const [insets, setInsets] = useState<VisualViewportInsets>(computeInsets);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.visualViewport) return;
+    const vv = window.visualViewport;
+    const handleChange = () => setInsets(computeInsets());
+    handleChange();
+    vv.addEventListener('resize', handleChange);
+    vv.addEventListener('scroll', handleChange);
+    return () => {
+      vv.removeEventListener('resize', handleChange);
+      vv.removeEventListener('scroll', handleChange);
+    };
+  }, []);
+
+  return insets;
+}
@@ -1,6 +1,7 @@
 import { describe, test, expect } from 'vitest';
 import { buildSavePayload } from './useWhpApi';
 import { PageData } from '../types';
+import { DEFAULT_SITE_DESIGN } from '../state/SiteDesignContext';

 const pageA: PageData = { id: 'home', name: 'Home', slug: 'index', craftState: 'STORED_HOME' };
 const pageB: PageData = { id: 'page_2', name: 'About', slug: 'about', craftState: 'STORED_ABOUT' };
@@ -19,6 +20,8 @@ describe('buildSavePayload', () => {
      activePageId: '__header__',
      isEditingHeader: true,
      isEditingFooter: false,
+      headCode: DEFAULT_SITE_DESIGN.headCode,
+      design: DEFAULT_SITE_DESIGN,
    });

    // The fresh live canvas must be reflected in header_craft_state, not the stale stored one.
@@ -52,6 +55,8 @@ describe('buildSavePayload', () => {
      activePageId: '__footer__',
      isEditingHeader: false,
      isEditingFooter: true,
+      headCode: DEFAULT_SITE_DESIGN.headCode,
+      design: DEFAULT_SITE_DESIGN,
    });

    expect(payload.footer_craft_state).toBe('LIVE_FOOTER');
@@ -75,6 +80,8 @@ describe('buildSavePayload', () => {
      activePageId: 'home',
      isEditingHeader: false,
      isEditingFooter: false,
+      headCode: DEFAULT_SITE_DESIGN.headCode,
+      design: DEFAULT_SITE_DESIGN,
    });

    // Live canvas goes to the active page and top-level slots.
@@ -87,4 +94,57 @@ describe('buildSavePayload', () => {
    expect(payload.header_craft_state).toBe('STALE_HEADER');
    expect(payload.footer_craft_state).toBe('STALE_FOOTER');
  });
+
+  test('I-1: activePageId matches no page (dangling, e.g. original Home deleted then reload reset it to "home") -- live serialize still lands in pages_craft_state[0] / index.html, not lost', () => {
+    // pages[0] has id 'page_x' (the replacement landing page after the
+    // original 'home' was deleted); activePageId is stuck at the stale
+    // default 'home', which matches no entry in `pages`.
+    const pageX: PageData = { id: 'page_x', name: 'Home', slug: 'index', craftState: 'STORED_X' };
+    const p2: PageData = { id: 'p2', name: 'About', slug: 'about', craftState: 'STORED_ABOUT_2' };
+
+    const payload = buildSavePayload({
+      siteId: 1,
+      siteName: 'Test Site',
+      liveCraftState: 'LIVE_EDIT',
+      pages: [pageX, p2],
+      headerPage,
+      footerPage,
+      activePageId: 'home',
+      isEditingHeader: false,
+      isEditingFooter: false,
+      headCode: DEFAULT_SITE_DESIGN.headCode,
+      design: DEFAULT_SITE_DESIGN,
+    });
+
+    // The live edit must land in pages_craft_state[0] (index.html slot),
+    // not be silently dropped to only the legacy top-level fields.
+    expect(payload.pages_craft_state[0].craftState).toBe('LIVE_EDIT');
+    expect(payload.pages[0].filename).toBe('index.html');
+    // Top-level fields (legacy) should also reflect the live edit.
+    expect(payload.craft_state).toBe('LIVE_EDIT');
+    // The other page is untouched.
+    expect(payload.pages_craft_state.find((p) => p.id === 'p2')?.craftState).toBe('STORED_ABOUT_2');
+  });
+
+  test('head code + design tokens are included in the save payload', () => {
+    const design = { ...DEFAULT_SITE_DESIGN, headCode: '<meta name="x">' };
+
+    const payload = buildSavePayload({
+      siteId: 1,
+      siteName: 'Test Site',
+      liveCraftState: 'LIVE_PAGE_HOME',
+      pages: [pageA, pageB],
+      headerPage,
+      footerPage,
+      activePageId: 'home',
+      isEditingHeader: false,
+      isEditingFooter: false,
+      headCode: '<meta name="x">',
+      design,
+    });
+
+    expect(payload.head_code).toBe('<meta name="x">');
+    expect(payload.design).toEqual(design);
+    expect(payload.design.headCode).toBe('<meta name="x">');
+  });
 });
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useEditor } from '@craftjs/core';
 import { useEditorConfig } from '../state/EditorConfigContext';
 import { usePages } from '../state/PageContext';
+import { useSiteDesign, SiteDesign } from '../state/SiteDesignContext';
 import { exportBodyHtml } from '../utils/html-export';
 import { PageData } from '../types';

@@ -18,6 +19,10 @@ export interface BuildSavePayloadInput {
  isEditingHeader: boolean;
  /** True when the live canvas is showing the footer zone (activePageId === '__footer__'). */
  isEditingFooter: boolean;
+  /** Site-wide custom `<head>` code (also present on `design.headCode`). */
+  headCode: string;
+  /** Full site design tokens object -- lets load() restore colors/fonts/headCode. */
+  design: SiteDesign;
 }

 /**
@@ -45,10 +50,24 @@ export function buildSavePayload(input: BuildSavePayloadInput) {
    activePageId,
    isEditingHeader,
    isEditingFooter,
+    headCode,
+    design,
  } = input;

  const isPageActive = !isEditingHeader && !isEditingFooter;

+  // I-1 (data-loss): `activePageId` can go dangling -- e.g. the original
+  // Home page (id 'home') is deleted, its replacement gets a fresh id
+  // (`page_<ts>`), and a reload re-initializes `activePageId` back to the
+  // hardcoded default `'home'` (see PageContext's `useState('home')`) before
+  // `load()` has a chance to point it at the actually-restored page. If a
+  // real page IS active but matches no entry in `pages`, treat `pages[0]`
+  // (the landing page) as the active one so the live canvas serialization
+  // still reaches the index.html page slot / `pages_craft_state[0]` instead
+  // of only the legacy top-level `craft_state`/`html` fields.
+  const activePageIndex = isPageActive ? pages.findIndex((p) => p.id === activePageId) : -1;
+  const effectiveActivePageId = activePageIndex !== -1 ? activePageId : pages[0]?.id;
+
  // Fresh header/footer state: the live canvas wins when that zone is the
  // one currently being edited; otherwise fall back to the last-committed
  // stored state (updated on zone switch by PageContext's saveCurrentState).
@@ -115,7 +134,7 @@ export function buildSavePayload(input: BuildSavePayloadInput) {
    const filename = i === 0 ? 'index.html' : page.slug + '.html';
    let pageHtml = '';

-    if (isPageActive && page.id === activePageId) {
+    if (isPageActive && page.id === effectiveActivePageId) {
      // Active page: use the current canvas HTML (already exported above)
      pageHtml = currentHtml;
    } else if (page.craftState) {
@@ -146,7 +165,7 @@ export function buildSavePayload(input: BuildSavePayloadInput) {
    // reload the editor's clean-URL routing (.htaccess rewrite of /name →
    // name.html) lines up with the file we just wrote (index.html).
    slug: i === 0 ? 'index' : page.slug,
-    craftState: (isPageActive && page.id === activePageId) ? liveCraftState : (page.craftState || null),
+    craftState: (isPageActive && page.id === effectiveActivePageId) ? liveCraftState : (page.craftState || null),
  }));

  return {
@@ -161,6 +180,8 @@ export function buildSavePayload(input: BuildSavePayloadInput) {
    header_craft_state: headerCraftState,
    footer_craft_state: footerCraftState,
    pages_craft_state: pagesGrapesjs,
+    head_code: headCode,
+    design,
  };
 }

@@ -177,7 +198,9 @@ export function useWhpApi() {
    setHeaderCraftState,
    setFooterCraftState,
    setPagesCraftState,
+    setActivePageIdDirect,
  } = usePages();
+  const { design, updateDesign } = useSiteDesign();

  const save = useCallback(async () => {
    if (!isWHP || !whpConfig) return null;
@@ -197,6 +220,8 @@ export function useWhpApi() {
      activePageId,
      isEditingHeader,
      isEditingFooter,
+      headCode: design.headCode,
+      design,
    });

    const resp = await fetch(`${whpConfig.apiUrl}?action=save`, {
@@ -208,7 +233,7 @@ export function useWhpApi() {
      body: JSON.stringify(payload),
    });
    return resp.json();
-  }, [isWHP, whpConfig, query, pages, activePageId, headerPage, footerPage, isEditingHeader, isEditingFooter]);
+  }, [isWHP, whpConfig, query, pages, activePageId, headerPage, footerPage, isEditingHeader, isEditingFooter, design]);

  const publish = useCallback(async () => {
    if (!isWHP || !whpConfig) return null;
@@ -242,6 +267,17 @@ export function useWhpApi() {
    if (data.success && data.project) {
      const proj = data.project;

+      // Restore site design tokens (colors/fonts/headCode) so the editor
+      // reflects what was last saved. Prefer the full `design` object when
+      // present; fall back to just `head_code` for older project.json files
+      // saved before this field existed (backward-compatible: defaults for
+      // everything else).
+      if (proj.design && typeof proj.design === 'object') {
+        updateDesign(proj.design);
+      } else if (typeof proj.head_code === 'string') {
+        updateDesign({ headCode: proj.head_code });
+      }
+
      // Restore header craft state
      if (proj.header_craft_state) {
        setHeaderCraftState(typeof proj.header_craft_state === 'string'
@@ -271,10 +307,23 @@ export function useWhpApi() {
            console.warn('Failed to load page state:', e);
          }
        }
+
+        // I-1 (data-loss): point activePageId at the page we just loaded
+        // into the canvas. Without this, activePageId stays at whatever it
+        // was initialized to (the hardcoded default 'home'), which goes
+        // dangling the moment the original Home page has been deleted and
+        // replaced (its replacement gets a fresh `page_<ts>` id) -- the next
+        // edit+save would then only reach the legacy top-level fields
+        // instead of the actual page slot. Only do this when a real page is
+        // being loaded, i.e. we're not currently mid-edit of the header/
+        // footer zone (switching zones is handled separately by switchPage).
+        if (!isEditingHeader && !isEditingFooter) {
+          setActivePageIdDirect(firstPage.id);
+        }
      }
    }
    return data;
-  }, [isWHP, whpConfig, actions, setHeaderCraftState, setFooterCraftState, setPagesCraftState]);
+  }, [isWHP, whpConfig, actions, setHeaderCraftState, setFooterCraftState, setPagesCraftState, setActivePageIdDirect, isEditingHeader, isEditingFooter, updateDesign]);

  const uploadAsset = useCallback(
    async (file: File) => {
@@ -1,9 +1,10 @@
 import React, { useEffect, useCallback, useRef } from 'react';
 import { useEditor } from '@craftjs/core';
-import { findDeletableTarget } from '../../utils/craft-helpers';
 import { useSitesmithModal } from '../../state/SitesmithContext';
 import { buildSitesmithTarget } from '../../utils/sitesmith-target';
 import { regenerateTreeIds } from '../../utils/craft-tree';
+import { getClipboardNodeId, setClipboardNodeId } from '../../hooks/clipboard';
+import { useNodeActions } from '../../hooks/useNodeActions';

 interface ContextMenuProps {
  visible: boolean;
@@ -15,6 +16,8 @@ interface ContextMenuProps {

 interface MenuItem {
  label: string;
+  /** Font Awesome icon suffix (e.g. 'magic' for fa-magic), rendered before the label. */
+  icon?: string;
  shortcut?: string;
  action: () => void;
  danger?: boolean;
@@ -32,7 +35,6 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
  const { actions, query } = useEditor();
  const { open: openSitesmith } = useSitesmithModal();
  const menuRef = useRef<HTMLDivElement>(null);
-  const clipboardRef = useRef<string | null>(null);

  // Close on click outside
  useEffect(() => {
@@ -63,24 +65,21 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
    }
  }, [nodeId, query]);

-  const duplicate = useCallback(() => {
-    if (!nodeId || nodeId === 'ROOT') return;
-    try {
-      const parentId = getParentId();
-      if (!parentId) return;
+  // Shared move/duplicate/delete/select-parent logic (item 1, Phase B) --
+  // extracted into `useNodeActions` so the mobile selection toolbar drives
+  // the exact same behavior. Wrapped here purely to also `onClose()` the
+  // menu after each action, same as before the extraction.
+  const nodeActions = useNodeActions(nodeId);

-      const tree = regenerateTreeIds(query.node(nodeId).toNodeTree());
-      actions.addNodeTree(tree, parentId);
-    } catch (e) {
-      console.error('Duplicate failed:', e);
-    }
+  const duplicate = useCallback(() => {
+    nodeActions.duplicate();
    onClose();
-  }, [nodeId, actions, query, getParentId, onClose]);
+  }, [nodeActions, onClose]);

  const copyNode = useCallback(() => {
    if (!nodeId || nodeId === 'ROOT') return;
    try {
-      clipboardRef.current = nodeId;
+      setClipboardNodeId(nodeId);
    } catch (e) {
      console.error('Copy failed:', e);
    }
@@ -88,7 +87,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
  }, [nodeId, onClose]);

  const pasteNode = useCallback(() => {
-    const sourceId = clipboardRef.current;
+    const sourceId = getClipboardNodeId();
    if (!sourceId) {
      onClose();
      return;
@@ -116,47 +115,19 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
  }, [nodeId, actions, query, onClose]);

  const moveUp = useCallback(() => {
-    if (!nodeId || nodeId === 'ROOT') return;
-    try {
-      const parentId = getParentId();
-      if (!parentId) return;
-      const parent = query.node(parentId).get();
-      const children = parent.data.nodes || [];
-      const idx = children.indexOf(nodeId);
-      if (idx > 0) {
-        actions.move(nodeId, parentId, idx - 1);
-      }
-    } catch (e) {
-      console.error('Move up failed:', e);
-    }
+    nodeActions.moveUp();
    onClose();
-  }, [nodeId, actions, query, getParentId, onClose]);
+  }, [nodeActions, onClose]);

  const moveDown = useCallback(() => {
-    if (!nodeId || nodeId === 'ROOT') return;
-    try {
-      const parentId = getParentId();
-      if (!parentId) return;
-      const parent = query.node(parentId).get();
-      const children = parent.data.nodes || [];
-      const idx = children.indexOf(nodeId);
-      if (idx < children.length - 1) {
-        actions.move(nodeId, parentId, idx + 2);
-      }
-    } catch (e) {
-      console.error('Move down failed:', e);
-    }
+    nodeActions.moveDown();
    onClose();
-  }, [nodeId, actions, query, getParentId, onClose]);
+  }, [nodeActions, onClose]);

  const selectParent = useCallback(() => {
-    if (!nodeId || nodeId === 'ROOT') return;
-    const parentId = getParentId();
-    if (parentId) {
-      actions.selectNode(parentId);
-    }
+    nodeActions.selectParent();
    onClose();
-  }, [nodeId, actions, getParentId, onClose]);
+  }, [nodeActions, onClose]);

  const askSitesmith = useCallback(() => {
    if (!nodeId || nodeId === 'ROOT') return;
@@ -170,18 +141,9 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
  }, [nodeId, query, openSitesmith, onClose]);

  const deleteNode = useCallback(() => {
-    const target = findDeletableTarget(query, nodeId);
-    if (!target) {
-      onClose();
-      return;
-    }
-    try {
-      actions.delete(target);
-    } catch (e) {
-      console.error('Delete failed:', e);
-    }
+    nodeActions.deleteNode();
    onClose();
-  }, [nodeId, actions, query, onClose]);
+  }, [nodeActions, onClose]);

  if (!visible) return null;

@@ -189,48 +151,61 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({

  const items: MenuItem[] = [
    {
-      label: '✨ Ask Sitesmith',
+      label: 'Ask Sitesmith',
+      icon: 'magic',
      action: askSitesmith,
      disabled: isRoot,
      dividerAfter: true,
    },
    {
      label: 'Duplicate',
+      icon: 'clone',
      shortcut: 'Ctrl+D',
      action: duplicate,
      disabled: isRoot,
    },
    {
      label: 'Copy',
+      icon: 'files-o',
      shortcut: 'Ctrl+C',
      action: copyNode,
      disabled: isRoot,
    },
    {
      label: 'Paste',
+      icon: 'clipboard',
      shortcut: 'Ctrl+V',
      action: pasteNode,
-      disabled: !clipboardRef.current,
+      disabled: !getClipboardNodeId(),
      dividerAfter: true,
    },
    {
      label: 'Move Up',
+      icon: 'arrow-up',
      action: moveUp,
      disabled: isRoot,
    },
    {
      label: 'Move Down',
+      icon: 'arrow-down',
      action: moveDown,
      disabled: isRoot,
    },
    {
      label: 'Select Parent',
+      icon: 'level-up',
      action: selectParent,
-      disabled: isRoot,
+      // Not just `isRoot`: the real dead-end is when nodeId's PARENT is
+      // ROOT (selecting a top-level section -> Select Parent would only
+      // select the page-wide, un-editable ROOT -- no outline, no toolbar).
+      // `canSelectParent` (useNodeActions) already encodes that and matches
+      // the mobile selection toolbar's identical guard.
+      disabled: !nodeActions.canSelectParent,
      dividerAfter: true,
    },
    {
      label: 'Delete',
+      icon: 'trash',
      shortcut: 'Del',
      action: deleteNode,
      danger: true,
@@ -291,7 +266,10 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
              (e.target as HTMLElement).style.background = 'transparent';
            }}
          >
-            <span>{item.label}</span>
+            <span>
+              {item.icon && <i className={`fa fa-${item.icon}`} style={{ marginRight: 6, width: 12 }} />}
+              {item.label}
+            </span>
            {item.shortcut && (
              <span
                style={{
@@ -2,12 +2,14 @@ import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useAssets } from '../../hooks/useAssets';
 import { clickableProps } from '../../utils/a11y';
 import { copyToClipboard } from '../../utils/clipboard';
+import { useIsMobile } from '../../hooks/useIsMobile';

 /** How long the "Delete?" confirm state stays armed before auto-resetting. */
 const DELETE_CONFIRM_TIMEOUT_MS = 4000;

 export const AssetsPanel: React.FC = () => {
  const { assets, loading, error, loadAssets, uploadAsset, deleteAsset } = useAssets();
+  const isMobile = useIsMobile();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [isDragOver, setIsDragOver] = useState(false);
  const [copiedUrl, setCopiedUrl] = useState<string | null>(null);
@@ -107,23 +109,41 @@ export const AssetsPanel: React.FC = () => {
        {loading ? 'Uploading...' : 'Upload File'}
      </button>

-      {/* Drop zone */}
+      {/* Drop zone -- a single element that doubles as the empty state.
+          Previously this was a small always-visible dropzone PLUS a
+          separate italic "No assets uploaded yet" line stacked underneath
+          it when empty; merged into one tall dropzone (icon + copy,
+          click-or-drag) so the empty state isn't two redundant messages.
+          Once assets exist it collapses back to a slim persistent drop
+          target above the grid. */}
      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
+        {...(assets.length === 0 ? clickableProps(() => fileInputRef.current?.click()) : {})}
        style={{
-          padding: 20,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 8,
+          padding: assets.length === 0 ? '36px 20px' : 16,
          border: `2px dashed ${isDragOver ? 'var(--color-accent)' : 'var(--color-border)'}`,
          borderRadius: 'var(--radius-md)',
          background: isDragOver ? 'var(--color-accent-subtle)' : 'transparent',
          textAlign: 'center',
          color: isDragOver ? 'var(--color-accent)' : 'var(--color-text-dim)',
          fontSize: 11,
+          cursor: assets.length === 0 ? 'pointer' : 'default',
          transition: 'all var(--transition-fast)',
        }}
      >
-        Drop files here to upload
+        {assets.length === 0 && (
+          <i className="fa fa-cloud-upload" aria-hidden style={{ fontSize: 28, opacity: 0.5 }} />
+        )}
+        {assets.length === 0
+          ? (isMobile ? 'Tap to upload images' : 'Drag images here or click to upload')
+          : 'Drop files here to upload'}
      </div>

      {/* Error message */}
@@ -143,20 +163,6 @@ export const AssetsPanel: React.FC = () => {
      )}

      {/* Asset grid */}
-      {assets.length === 0 && !loading && (
-        <div
-          style={{
-            textAlign: 'center',
-            padding: 20,
-            color: 'var(--color-text-dim)',
-            fontSize: 12,
-            fontStyle: 'italic',
-          }}
-        >
-          No assets uploaded yet
-        </div>
-      )}
-
      <div
        style={{
          display: 'grid',
@@ -296,7 +302,7 @@ export const AssetsPanel: React.FC = () => {
                    cursor: 'pointer',
                  }}
                >
-                  &#10005;
+                  <i className="fa fa-times" aria-hidden />
                </button>
              </div>
            ) : (
@@ -328,7 +334,7 @@ export const AssetsPanel: React.FC = () => {
                onMouseEnter={(e) => { (e.target as HTMLElement).style.opacity = '1'; }}
                onMouseLeave={(e) => { (e.target as HTMLElement).style.opacity = '0.7'; }}
              >
-                &#10005;
+                <i className="fa fa-times" aria-hidden />
              </button>
            )}
          </div>
--- a/Show More
+++ b/Show More