diff --git a/AGENTS.md b/AGENTS.md
index e6ae688..d2c5b37 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -40,10 +40,11 @@ The app includes **Agent**, an in-app AI assistant, and a local **MCP server** i
 - `src/lib/persistence/projects.ts`: create a project, snapshot one workspace, reopen a recent project (values through `initialProperties`)
 - `src/lib/persistence/recents.ts`: recent projects and their thumbnails (IndexedDB), recorded while editing and shown on the start screen (`/new`)
 - `src/lib/icons/icons.ts`: the icon registry: the built-in Font Awesome set (`FaRocket`) plus the icon packs installed in the component library (`acme:cloud`). The Icon block and `@type:icon` variables of components offer both; `search_icons` reads it. `sanitize-svg.ts` cleans pack icons on import
-- `src/lib/variables/variables.ts`: project variables (template slots). A workspace holds `variables`; text, code, window, QR and HTML blocks show `{{name}}` as the value through `useResolvedText` (`src/hooks/useProjectVariables.ts`) while the stored text keeps the placeholder. They are part of the canvas settings, so `setProjectVariables` is undoable; `set_variables` fills them
-- `src/lib/brand/brand-kit.ts` / `src/stores/brand-store.ts`: the brand kit (colors, fonts, logos as data URLs, guidelines), kept in IndexedDB and edited in `BrandKitDialog`. The color and font pickers list it first; `get_brand_kit` and `add_brand_logo` give it to Agent and MCP clients
+- `src/lib/variables/variables.ts`: project variables (template slots), edited in the Variables tab of the properties panel (`VariablesPanel`). A workspace holds `variables`; text, code, window, QR and HTML blocks show `{{name}}` as the value through `useResolvedText` (`src/hooks/useProjectVariables.ts`) while the stored text keeps the placeholder. They are part of the canvas settings, so `setProjectVariables` is undoable; `set_variables` fills them
+- `src/lib/brand/brand-kit.ts` / `src/stores/brand-store.ts`: the brand kit (colors, fonts, logos as data URLs, guidelines), kept in IndexedDB and edited with `BrandKitEditor` (`src/components/Brand/`), shown in the Brand kit tab of the properties panel and, outside the editor, in `BrandKitDialog`. The color and font pickers list it first; `get_brand_kit` and `add_brand_logo` give it to Agent and MCP clients, and `update_brand_kit` / `save_brand_logo` let them write it (not part of the canvas undo)
 - `src/lib/agent/core/design-guide.ts`: the design standards Agent and MCP clients follow (in the system prompt, the MCP instructions and `get_design_guide`)
 - `src/lib/templates/starters.ts`: built-in templates on the start screen; each one is a size, a background and `addBlock` inputs (keys from `catalog.ts`)
+- `src/components/Panels/RightPanel.tsx`: the properties panel and its tabs (hierarchy, control, workspace, variables, brand kit). Each tab is a `TabPage`: a title and a scroll area that takes only the height left (`min-h-0 flex-1`, never `h-full`, or the end of a long tab is cut off). `ui-store`'s `selectedTab` switches it from elsewhere
 - `src/components/CustomControls/PropertyControls.tsx`: `PropertyRow`, `FieldInput`, `SliderField`, `ToggleGroup` / `ToggleButton` — use them for block property menus so rows line up
 - `src/lib/editor/`: editor actions with arguments (`actions.ts`) and undo/redo helpers (`history.ts`)
 - `src/lib/editor/layout.ts`: panel layouts (canvas, properties, agent, both). The layout is just `propertiesOpen` (`ui-store`, persisted) plus the agent's `panelOpen`; the status bar button and `view.layout-*` commands switch it. The agent docks as its own column at the left edge; the properties panel floats over the right edge of the canvas
@@ -110,6 +111,7 @@ Agent (assistant panel, `Mod+L`) and the MCP server share one set of tools. Full
 - **History**: batch entries can mix property changes, `workspace-structure-*` snapshots and `workspace-settings-*` snapshots. Apply undo/redo with `undo()`/`redo()` from `src/lib/editor/history.ts`, which handles all of them.
 - **Block catalog** (`src/lib/blocks/catalog.ts`): mirrors the `useControlState` keys and defaults of each block. Update it when a block gains or renames a property.
 - **Component library** (`src/lib/agent/tools/components.ts`): `list_components`, `import_component`, `add_component`, `export_component` and `load_starter_pack` read and write the `.kcomponent` library (`src/stores/kcomponent-store.ts`, persisted) and put components on the canvas through `addBlock`. Adding one goes through `kcomponentBlockInput()` so an empty `css`/`js` section does not fall back to the demo content of a blank HTML block.
+- **HTML block contract** (`src/lib/agent/tools/html-contract.ts`): HTML blocks written through `add_block`, `update_block` or `update_html_block` must have annotated `:root` CSS variables and `// @var` JS variables; the tools refuse other code with what to fix and turn `allow-scripts` on. `html-hints.ts` adds softer hints (too few variables, too big, too much text).
 - **Command allowlist** (`src/lib/agent/tools/commands.ts`): `run_command` only runs `edit.*`, `arrange.*`, `view.*` and individually vetted ids. `tools.*` stays out on purpose (a model cannot drag on the canvas, so picking a tool would only strand the editor in a mode); dialogs, saving and `workspace.clean` stay out too. Widen it there, with the reason in the comment.
 - **Providers** (`src/lib/agent/providers/`): pure adapters (Anthropic Messages, OpenAI Chat Completions, Gemini) that build requests and parse SSE streams; presets add base URLs and hints. The UI never depends on the provider.
 - **Transports**: the web uses `fetch` from the page (the provider must allow CORS). Electron sends requests from the main process (`src-electron/agent/http.ts`), which adds the API key; keys are encrypted with `safeStorage` and bound to the origin they were saved for. Never log requests, headers or keys; use `redactSecrets()` for error text.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e69aec5..1fc4b7b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## v 2.1.0 - Release (September 29th, 2026)
+
+### 🚀 Features
+
+- **Brand kit panel**: the brand kit has its own tab in the properties panel, next to the workspace settings and organized like them, in collapsible sections (name, colors, fonts, logos, guidelines) that show how many items each holds; File → **Brand kit…** opens it (outside the editor it still opens in a dialog)
+- **Agent and MCP clients create and edit the brand kit**: `update_brand_kit` sets the name, palette, fonts by role (checked against Google Fonts), logo names and uses and the guidelines; `save_brand_logo` adds a logo from SVG markup, a data URL or an image block of the canvas. They do it when the user gives them their brand or asks for one
+- **Variables tab**: project variables moved out of the workspace settings to their own tab of the properties panel
+- **Every HTML block Agent and MCP clients write has CSS and JS variables**: the look as annotated `:root` variables and the content (labels, values, lists) as `// @var` JS variables that the script renders, so both are edited from the panel. `add_block`, `update_block` and `update_html_block` refuse a block without them, with a script that declares a variable twice or with a list that is not a JSON list of strings, say what to fix and turn scripts on for the block
+- **Easier property panel for HTML blocks**: variables read as names ("Value size", not `--value-size`) in rows that line up with the other panels; numbers take a typed value next to the slider, lists edit each item in its own field (Enter applies, reorder, remove, add), objects edit each value in place or as JSON, and the shadow editor is a compact set of rows
+
+### 🐛 Fixes
+
+- The properties panel could not scroll to its end: its scroll area took the full height of the panel under the title and the align bar, so the last part of a tab with several sections open stayed hidden
+- Going to the block editor and back (or anything else that shows the canvas again) could lose block positions and other values: every block painted its defaults for a frame and wrote them over its saved values before reading them back. Blocks now start from their saved values, and a custom background of a code block survives
+- The first render of a code block showed raw `<pre><code>` markup before the code
+- A text block exported while selected (or under the pointer) kept its blue outline in the image
+- **Zoom to fit** and **Zoom to 100%** ignored the panels floating over the canvas: with Agent open the canvas ended up under the properties panel. They now fit and center it in the space left free
+- HTML block scripts could not build elements: `document.createElement` threw "Illegal invocation", so lists rendered from a JS array stayed empty. Editing a list whose items were numbers did nothing, and a `// @var` value followed by a semicolon read as empty
+
 ## v 2.0.0 - Release (September 28th, 2026)
 
 ### 🚀 Features
diff --git a/README.md b/README.md
index c46b24d..1165c5a 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Karbonized is a visual editor for creating images of code snippets, mockups and
 
 * **Agent, the design assistant** — describe the image you want and Agent builds it on the canvas, with Anthropic, OpenAI, Gemini, OpenRouter or local models (Ollama, LM Studio). It follows design standards made for social media, and everything it did undoes in one step.
 * **MCP server** — Claude Desktop, Claude Code, Cursor and other MCP clients can design with Karbonized. They start it in the background when it is not open, and exports land in a folder without any dialog.
-* **Templates with variables** — write `{{title}}`, `{{date}}` or `{{code}}` in any block and fill them from the Workspace panel (or let Agent do it): the next post is a new value, not a redesign.
+* **Templates with variables** — write `{{title}}`, `{{date}}` or `{{code}}` in any block and fill them from the Variables panel (or let Agent do it): the next post is a new value, not a redesign.
 * **Brand kit** — your colors, fonts, logos and guidelines in one place. The pickers offer them first and Agent reads them before designing.
 * **Drawing tools** — a vector brush that follows pen pressure, shapes drawn by dragging, node editing, an eraser, rulers and guides.
 * **Components and icon packs** — a reworked `.kcomponent` library with a starter pack, and icon packs that anyone can make from a folder of SVGs.
diff --git a/docs/agent.md b/docs/agent.md
index b4a7995..2f86c72 100644
--- a/docs/agent.md
+++ b/docs/agent.md
@@ -72,6 +72,8 @@ Agent and the MCP server share the same tools:
 | `search_icons`                         | Icon names (Font Awesome and installed icon packs) for icon blocks and `@type:icon` variables                                        |
 | `search_fonts`                         | Google Fonts families by name, kind and weights, with the weights each one has                                                       |
 | `get_brand_kit`                        | The brand kit: named colors, fonts, logos (without the images) and guidelines                                                        |
+| `update_brand_kit`                     | Create or change the brand kit: name, palette, fonts by role (checked against Google Fonts), logo names and uses, guidelines         |
+| `save_brand_logo`                      | Add a logo to the brand kit from SVG markup (cleaned of scripts), a `data:image/…` URL or an image block of the canvas                |
 | `add_brand_logo`                       | Place a logo of the brand kit as an image block, by id or variant, keeping its proportions                                           |
 | `get_workspace`                        | Canvas size, background, selection and every block with its position, size and properties                                            |
 | `create_workspace`                     | New project with a canvas size, opened in the editor                                                                                 |
@@ -110,14 +112,20 @@ Change the guide there; the prompt, the instructions and the tool follow.
 The guide asks models to build a design block by block: the background with
 `set_canvas_background`, every headline and paragraph as a text block, and one
 HTML block per component (a stat tile, a card, a badge row, a chart), sized to
-its content and declaring its colors, sizes, radius, shadow and icon as
-annotated `:root` variables. `add_block` and `update_html_block` check the
-last two rules (`src/lib/agent/tools/html-hints.ts`) and answer with `hints`
-when an HTML block declares no variables, covers most of the canvas or holds
-paragraphs of text, so the model fixes it in the same turn. Content that
-repeats (list items, chart data, rows) goes in `// @var` JS variables that the
-block script renders, with `allow-scripts` on, so the user edits the data from
-the panel; the hints flag a block whose script cannot run.
+its content.
+
+Every HTML block a model writes has html, css and js
+(`src/lib/agent/tools/html-contract.ts`): the look as annotated `:root`
+variables in the CSS and the content (labels, values, list items, chart data)
+as `// @var` JS variables that the script writes into the markup, so the user
+edits both from the panel. `add_block`, `update_block` and `update_html_block`
+refuse code without them, with a script that declares a `// @var` again, or
+with an array or object value that is not JSON (an array must be a list of
+strings, which is what the panel edits), and say what to fix; they turn
+`allow-scripts` on for the block. They also answer with `hints`
+(`src/lib/agent/tools/html-hints.ts`) when an HTML block has too few
+variables, covers most of the canvas or holds paragraphs of text, so the model
+fixes it in the same turn.
 
 Fonts: the guide sends models to `search_fonts` (the whole Google Fonts
 catalog, with the weights of each family), gives pairings by tone and asks for
@@ -133,18 +141,22 @@ The snapshot waits for pending fonts so it does not show the fallback.
 
 ### Brand kit
 
-File → **Brand kit…** (or the command palette) holds the colors, fonts,
-logos and guidelines of the user's brand. The color picker shows the brand
-colors first and the font picker the brand fonts. Agent and MCP clients are
-told to call `get_brand_kit` before a new design and to follow it over the
-palettes of the design guide; `add_brand_logo` places a logo without sending
-the image through the model. A kit can be exported and imported as a
+The **Brand kit** tab of the properties panel (also File → **Brand kit…** or
+the command palette, which open it; outside the editor it opens in a dialog)
+holds the colors, fonts, logos and guidelines of the user's brand. The color
+picker shows the brand colors first and the font picker the brand fonts. Agent
+and MCP clients are told to call `get_brand_kit` before a new design and to
+follow it over the palettes of the design guide; `add_brand_logo` places a
+logo without sending the image through the model. When the user gives them
+their brand or asks for one, they save it with `update_brand_kit` and
+`save_brand_logo` (`src/lib/agent/tools/brand.ts`); those changes are saved at
+once, show in the tab, and are not part of the canvas undo. A kit can be exported and imported as a
 `.kbrand` file (JSON). It is stored in IndexedDB (`src/stores/brand-store.ts`,
 model in `src/lib/brand/brand-kit.ts`).
 
 ### Templates and project variables
 
-A project can hold variables (Canvas panel → **Variables**): named texts,
+A project can hold variables (the **Variables** tab of the properties panel): named texts,
 long texts and dates. Any text, code, window, QR or HTML block that contains
 `{{name}}` shows the value instead; the block keeps the placeholder, so the
 same design becomes a template. Changing a value is one undo step.
diff --git a/src/components/Base/MenuBar.tsx b/src/components/Base/MenuBar.tsx
index e2640a8..0db8d6d 100644
--- a/src/components/Base/MenuBar.tsx
+++ b/src/components/Base/MenuBar.tsx
@@ -95,6 +95,17 @@ export const MenuBar: React.FC = () => {
 	const [showDonations, setShowDonations] = useState(false);
 	const [showImportComponents, setShowImportComponents] = useState(false);
 	const [showBrandKit, setShowBrandKit] = useState(false);
+	/* In the editor the brand kit has its own tab in the properties panel;
+	   elsewhere it opens in a dialog. */
+	const openBrandKit = () => {
+		if (location.pathname !== '/editor') {
+			setShowBrandKit(true);
+			return;
+		}
+		const ui = useUIStore.getState();
+		ui.setSelectedTab('brand');
+		ui.setPropertiesOpen(true);
+	};
 
 	/* KComponent Store */
 	/* The library dialog itself lives in the editor's left panel. */
@@ -328,7 +339,7 @@ export const MenuBar: React.FC = () => {
 			group: 'File',
 			icon: SwatchBook,
 			keywords: ['brand', 'colors', 'fonts', 'logo', 'palette'],
-			run: () => setShowBrandKit(true),
+			run: openBrandKit,
 		},
 		{
 			id: 'workspace.clean',
@@ -468,9 +479,7 @@ export const MenuBar: React.FC = () => {
 							</MenubarItem>
 
 							<MenubarSeparator />
-							<MenubarItem onClick={() => setShowBrandKit(true)}>
-								Brand Kit…
-							</MenubarItem>
+							<MenubarItem onClick={openBrandKit}>Brand Kit…</MenubarItem>
 						</MenubarContent>
 					</MenubarMenu>
 
diff --git a/src/components/Blocks/CodeBlock.tsx b/src/components/Blocks/CodeBlock.tsx
index 768bbb3..7b4d061 100644
--- a/src/components/Blocks/CodeBlock.tsx
+++ b/src/components/Blocks/CodeBlock.tsx
@@ -15,7 +15,7 @@ import {
 	IconTerminal,
 	IconX,
 } from '@tabler/icons-react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { PropertyRow, SliderField } from '../CustomControls/PropertyControls';
 import { Switch } from '../ui/switch';
 import { ControlTemplate } from './ControlTemplate';
@@ -25,8 +25,9 @@ import { ColorPicker } from '../CustomControls/ColorPicker';
 import { CloseSvg, MinimizeSvg } from '../Misc/Icons';
 import { LanguajeTabIcon } from './LanguajeTabIcon';
 import { useControlState } from '../../hooks/useControlState';
+import { useControlsStore, useWorkspaceStore } from '@/stores';
 import { useResolvedText } from '../../hooks/useProjectVariables';
-import { themes } from '../../utils/PrismThemes';
+import { codeThemeBackground, themes } from '../../utils/PrismThemes';
 import { Label } from '../ui/label';
 import { Input } from '../ui/input';
 import {
@@ -46,11 +47,12 @@ const CodeControl: React.FC<Props> = ({ id }) => {
 
 	const [theme, setTheme] = useControlState('coldarkDark', `${id}-theme`);
 	const [language, setLanguage] = useControlState('jsx', `${id}-lang`);
-	const [code, setCode] = useControlState(
-		`<pre><code class="language-${language}"></code></pre>`,
-		`${id}-code`,
+	const [code, setCode] = useControlState('', `${id}-code`);
+	// A new block starts on the background of its theme.
+	const [color, setColor] = useControlState(
+		codeThemeBackground(theme) ?? '#111b28',
+		`${id}-bgcolor`,
 	);
-	const [color, setColor] = useControlState('#111b28', `${id}-bgcolor`);
 	const [controlsColor, setControlsColor] = useControlState(
 		'#b4b4b4',
 		`${id}-ccolor`,
@@ -86,18 +88,40 @@ const CodeControl: React.FC<Props> = ({ id }) => {
 		return themes.find((value) => value.label === theme)?.theme;
 	};
 
-	/* Handle Change Theme Colors */
+	/* A new block keeps the background it starts on, so Agent and saved
+	   projects read the color it shows rather than the catalog default. */
 	useEffect(() => {
-		const newTheme = themes.find((value) => value.label === theme)?.theme;
-
-		setColor(
-			(newTheme as any)[':not(pre) > code[class*="language-"]'].background ||
-				(newTheme as any)[`code[class*="language-"]`].background,
+		const key = `${id}-bgcolor`;
+		const { ControlProperties, initialProperties, addControlProperty } =
+			useControlsStore.getState();
+		const known = [...ControlProperties, ...initialProperties].some(
+			(item) => item.id === key,
 		);
+		if (!known) {
+			addControlProperty(
+				{ id: key, value: color },
+				useWorkspaceStore.getState().currentWorkspaceID,
+			);
+		}
+		// Only the color the block mounted with.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [id]);
+
+	/* Picking a theme or the paper style resets the background to theme it.
+	   Only when they change: mounting again (after the block editor, a
+	   workspace switch, a project load) keeps the background the user chose. */
+	const shownTheme = useRef(theme);
+	useEffect(() => {
+		if (shownTheme.current === theme) return;
+		shownTheme.current = theme;
+		const background = codeThemeBackground(theme);
+		if (background) setColor(background);
 	}, [theme]);
 
-	/* Handle Window Style Change - Set color for paper style */
+	const shownWindowStyle = useRef(windowStyle);
 	useEffect(() => {
+		if (shownWindowStyle.current === windowStyle) return;
+		shownWindowStyle.current = windowStyle;
 		if (windowStyle === 'paper') {
 			setColor('#fbfaf7');
 		}
diff --git a/src/components/Blocks/ControlTemplate.tsx b/src/components/Blocks/ControlTemplate.tsx
index b381112..9aaaf8e 100644
--- a/src/components/Blocks/ControlTemplate.tsx
+++ b/src/components/Blocks/ControlTemplate.tsx
@@ -186,7 +186,9 @@ export const ControlTemplate: React.FC<ControlProps> = ({
 	useLayoutEffect(() => {
 		syncContentSize.current = () => {
 			const element = document.getElementById(id);
-			if (!element) return;
+			// Not laid out: hidden while another page loads (React hides the
+			// canvas with display: none), so it measures 0 × 0.
+			if (!element || element.getClientRects().length === 0) return;
 
 			const next = { w: element.offsetWidth, h: element.offsetHeight };
 			if (next.w === Number(size.w) && next.h === Number(size.h)) return;
diff --git a/src/components/Blocks/HTMLBlock.tsx b/src/components/Blocks/HTMLBlock.tsx
index 90784f8..9d4c77b 100644
--- a/src/components/Blocks/HTMLBlock.tsx
+++ b/src/components/Blocks/HTMLBlock.tsx
@@ -26,6 +26,7 @@ import {
 	updateJSVariable,
 	buildBlockStylesheet,
 	createSafeDOM,
+	createScopedDocument,
 	fileHandler,
 	fileUtils,
 } from '../../lib/blocks-api';
@@ -104,42 +105,6 @@ export const HTMLBlock: React.FC<Props> = ({ id }) => {
 		setDevLogs([]);
 	};
 
-	const createScopedDocument = (
-		shadowRoot: ShadowRoot,
-		host: HTMLDivElement,
-	): Document & ShadowRoot => {
-		const globalDocument = window.document;
-
-		return new Proxy(globalDocument, {
-			get(target, prop) {
-				switch (prop) {
-					case 'querySelector':
-						return shadowRoot.querySelector.bind(shadowRoot);
-					case 'querySelectorAll':
-						return shadowRoot.querySelectorAll.bind(shadowRoot);
-					case 'getElementById':
-						return shadowRoot.getElementById?.bind(shadowRoot);
-					case 'body':
-						return shadowRoot;
-					case 'head':
-						return shadowRoot;
-					case 'documentElement':
-						return host;
-					case 'activeElement':
-						return shadowRoot.activeElement;
-					case 'addEventListener':
-						return shadowRoot.addEventListener.bind(shadowRoot);
-					case 'removeEventListener':
-						return shadowRoot.removeEventListener.bind(shadowRoot);
-					case 'dispatchEvent':
-						return shadowRoot.dispatchEvent.bind(shadowRoot);
-					default:
-						return Reflect.get(target, prop, target);
-				}
-			},
-		}) as Document & ShadowRoot;
-	};
-
 	// Update CSS content when variables change
 	const handleUpdateCSSVariable = (
 		varName: string,
diff --git a/src/components/Blocks/HTMLBlockBindingsPanel.tsx b/src/components/Blocks/HTMLBlockBindingsPanel.tsx
index c1b1cac..c91c346 100644
--- a/src/components/Blocks/HTMLBlockBindingsPanel.tsx
+++ b/src/components/Blocks/HTMLBlockBindingsPanel.tsx
@@ -7,7 +7,6 @@ import {
 	type JSVariable,
 } from '@/lib/blocks-api';
 import { ColorPicker } from '../CustomControls/ColorPicker';
-import { Label } from '../ui/label';
 import { Input } from '../ui/input';
 import { Slider } from '../ui/slider';
 import { Switch } from '../ui/switch';
@@ -15,6 +14,7 @@ import { ObjectEditor } from '../CustomControls/ObjectEditor';
 import { ArrayEditor } from '../CustomControls/ArrayEditor';
 import { ImageInput, FileInput } from '../CustomControls/FileInput';
 import { ShadowEditor } from '../CustomControls/ShadowEditor';
+import { FieldInput, PropertyRow } from '../CustomControls/PropertyControls';
 import { Button } from '../ui/button';
 
 interface CSSControlsProps {
@@ -36,112 +36,177 @@ interface ActionControlsProps {
 	onExecuteAction: (action: CustomAction) => void;
 }
 
+/** `--value-size` and `showValues` read as "Value size" and "Show values". */
+export const variableLabel = (name: string): string => {
+	const words = name
+		.replace(/^-+/, '')
+		.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+		.split(/[-_\s]+/)
+		.filter(Boolean)
+		.map((word) => word.toLowerCase());
+	const text = words.join(' ');
+	return text.charAt(0).toUpperCase() + text.slice(1) || name;
+};
+
+/** The label of a row, with the variable name on hover. */
+const RowLabel: React.FC<{ name: string }> = ({ name }) => (
+	<span title={name}>{variableLabel(name)}</span>
+);
+
+/**
+ * A slider with a field to type the exact value. Values past the declared
+ * range stay reachable: the slider grows to fit them.
+ */
+const NumberField: React.FC<{
+	name: string;
+	value: number;
+	onChange: (value: number) => void;
+	min?: number;
+	max?: number;
+	step?: number;
+	unit?: string;
+}> = ({ name, value, onChange, min = 0, max, step = 1, unit }) => {
+	const number = Number(value) || 0;
+	const upper = Math.max(max ?? 100, number);
+	const lower = Math.min(min, number);
+
+	return (
+		<PropertyRow label={<RowLabel name={name} />}>
+			<Slider
+				className='flex-1'
+				min={lower}
+				max={upper}
+				step={step}
+				value={[number]}
+				onValueChange={(next) => onChange(next[0])}
+			/>
+			<FieldInput
+				label=''
+				value={number}
+				step={step}
+				suffix={unit}
+				onChange={(text) => {
+					const next = Number(text);
+					if (text.trim() !== '' && Number.isFinite(next)) onChange(next);
+				}}
+				className='w-16 flex-none'
+			/>
+		</PropertyRow>
+	);
+};
+
+const TextField: React.FC<{
+	name: string;
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	mono?: boolean;
+}> = ({ name, value, onChange, placeholder, mono }) => (
+	<PropertyRow label={<RowLabel name={name} />}>
+		<Input
+			aria-label={variableLabel(name)}
+			value={value}
+			placeholder={placeholder}
+			onChange={(event) => onChange(event.target.value)}
+			className={`h-7 text-xs md:text-xs ${mono ? 'font-mono' : ''}`}
+		/>
+	</PropertyRow>
+);
+
+const BooleanField: React.FC<{
+	name: string;
+	value: boolean;
+	onChange: (value: boolean) => void;
+}> = ({ name, value, onChange }) => (
+	<PropertyRow label={<RowLabel name={name} />}>
+		<Switch
+			className='ml-auto'
+			aria-label={variableLabel(name)}
+			checked={value}
+			onCheckedChange={onChange}
+		/>
+	</PropertyRow>
+);
+
 export const HTMLBlockCSSVariablesControls: React.FC<CSSControlsProps> = ({
 	variables,
 	onUpdateVariable,
 }) => (
-	<div className='space-y-3.5'>
+	<div className='space-y-0.5'>
 		{variables.map((variable) => {
+			const update = (value: string | number | boolean) =>
+				onUpdateVariable(variable.name, value);
+
 			switch (variable.type) {
 				case 'color':
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<ColorPicker
-								isGradientEnable={false}
-								color={variable.value as string}
-								onColorChange={(color) =>
-									onUpdateVariable(variable.name, color)
-								}
-								label=''
-							/>
-						</div>
+						<ColorPicker
+							key={variable.name}
+							type='HexAlpha'
+							isGradientEnable={false}
+							color={variable.value as string}
+							onColorChange={update}
+							label={variableLabel(variable.name)}
+						/>
 					);
 
 				case 'number':
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<div className='flex items-center gap-2'>
-								<Slider
-									className='flex-1'
-									onValueChange={(value) =>
-										onUpdateVariable(variable.name, value[0])
-									}
-									value={[variable.value as number]}
-									min={variable.min || 0}
-									max={variable.max || 100}
-									step={variable.step || 1}
-								/>
-								<span className='w-10 text-right font-mono text-[11px] tabular-nums text-muted-foreground'>
-									{variable.value}
-								</span>
-							</div>
-						</div>
+						<NumberField
+							key={variable.name}
+							name={variable.name}
+							value={variable.value as number}
+							onChange={update}
+							min={variable.min}
+							max={variable.max}
+							step={variable.step}
+							unit={variable.unit}
+						/>
 					);
 
 				case 'boolean':
 					return (
-						<div
+						<BooleanField
 							key={variable.name}
-							className='flex items-center justify-between'
-						>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<Switch
-								checked={variable.value as boolean}
-								onCheckedChange={(checked) =>
-									onUpdateVariable(variable.name, checked)
-								}
-							/>
-						</div>
+							name={variable.name}
+							value={variable.value as boolean}
+							onChange={update}
+						/>
 					);
 
 				case 'icon':
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<div className='flex'>
-								<IconPickerField
-									value={variable.value as string}
-									onChange={(name) => onUpdateVariable(variable.name, name)}
-								/>
-							</div>
-						</div>
+						<PropertyRow
+							key={variable.name}
+							label={<RowLabel name={variable.name} />}
+						>
+							<IconPickerField
+								value={variable.value as string}
+								onChange={update}
+							/>
+						</PropertyRow>
 					);
 
 				case 'shadow':
 					return (
-						<div key={variable.name} className='space-y-2'>
+						<div key={variable.name} className='py-1'>
 							<ShadowEditor
 								value={variable.value as string}
-								onChange={(value) => onUpdateVariable(variable.name, value)}
-								label={variable.name}
+								onChange={update}
+								label={variableLabel(variable.name)}
 							/>
 						</div>
 					);
 
 				default:
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<Input
-								value={variable.value as string}
-								onChange={(event) =>
-									onUpdateVariable(variable.name, event.target.value)
-								}
-								className='h-7 font-mono text-xs'
-							/>
-						</div>
+						<TextField
+							key={variable.name}
+							name={variable.name}
+							value={String(variable.value)}
+							onChange={update}
+							mono
+						/>
 					);
 			}
 		})}
@@ -152,28 +217,25 @@ export const HTMLBlockJSVariablesControls: React.FC<JSControlsProps> = ({
 	variables,
 	onUpdateVariable,
 }) => (
-	<div className='space-y-3.5'>
+	<div className='space-y-0.5'>
 		{variables.map((variable) => {
+			const update = (value: unknown) => onUpdateVariable(variable.name, value);
+
 			switch (variable.type) {
 				case 'color':
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<ColorPicker
-								isGradientEnable={false}
-								color={variable.value as string}
-								onColorChange={(color) =>
-									onUpdateVariable(variable.name, color)
-								}
-								label=''
-							/>
-						</div>
+						<ColorPicker
+							key={variable.name}
+							type='HexAlpha'
+							isGradientEnable={false}
+							color={variable.value as string}
+							onColorChange={update}
+							label={variableLabel(variable.name)}
+						/>
 					);
 
 				case 'gradient': {
-					const gradientValue = variable.value as string;
+					const gradientValue = String(variable.value);
 					let color1 = '#667eea';
 					let color2 = '#764ba2';
 					let angle = 45;
@@ -188,136 +250,98 @@ export const HTMLBlockJSVariablesControls: React.FC<JSControlsProps> = ({
 					}
 
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<ColorPicker
-								isGradientEnable
-								mode='Gradient'
-								colorGradient1={color1}
-								colorGradient2={color2}
-								gradientDeg={angle}
-								color={color1}
-								onColorChange={() => undefined}
-								onGradientChange={(newColor1, newColor2) => {
-									onUpdateVariable(
-										variable.name,
-										`linear-gradient(${angle}deg, ${newColor1}, ${newColor2})`,
-									);
-								}}
-								onGradientDegChange={(newAngle) => {
-									onUpdateVariable(
-										variable.name,
-										`linear-gradient(${newAngle}deg, ${color1}, ${color2})`,
-									);
-								}}
-								label=''
-							/>
-						</div>
+						<ColorPicker
+							key={variable.name}
+							isGradientEnable
+							mode='Gradient'
+							colorGradient1={color1}
+							colorGradient2={color2}
+							gradientDeg={angle}
+							color={color1}
+							onColorChange={() => undefined}
+							onGradientChange={(newColor1, newColor2) =>
+								update(
+									`linear-gradient(${angle}deg, ${newColor1}, ${newColor2})`,
+								)
+							}
+							onGradientDegChange={(newAngle) =>
+								update(`linear-gradient(${newAngle}deg, ${color1}, ${color2})`)
+							}
+							label={variableLabel(variable.name)}
+						/>
 					);
 				}
 
 				case 'number':
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<div className='flex items-center gap-2'>
-								<Slider
-									className='flex-1'
-									onValueChange={(value) =>
-										onUpdateVariable(variable.name, value[0])
-									}
-									value={[variable.value as number]}
-									min={variable.min || 0}
-									max={variable.max || 100}
-									step={variable.step || 1}
-								/>
-								<span className='w-10 text-right font-mono text-[11px] tabular-nums text-muted-foreground'>
-									{variable.value as any}
-								</span>
-							</div>
-						</div>
+						<NumberField
+							key={variable.name}
+							name={variable.name}
+							value={variable.value as number}
+							onChange={update}
+							min={variable.min}
+							max={variable.max}
+							step={variable.step}
+						/>
 					);
 
 				case 'boolean':
 					return (
-						<div
+						<BooleanField
 							key={variable.name}
-							className='flex items-center justify-between'
-						>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<Switch
-								checked={variable.value as boolean}
-								onCheckedChange={(checked) =>
-									onUpdateVariable(variable.name, checked)
-								}
-							/>
-						</div>
+							name={variable.name}
+							value={variable.value as boolean}
+							onChange={update}
+						/>
 					);
 
 				case 'url':
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<Input
-								value={variable.value as string}
-								onChange={(event) =>
-									onUpdateVariable(variable.name, event.target.value)
-								}
-								placeholder='https://example.com'
-								className='h-7 font-mono text-xs'
-							/>
-						</div>
+						<TextField
+							key={variable.name}
+							name={variable.name}
+							value={String(variable.value ?? '')}
+							onChange={update}
+							placeholder='https://example.com'
+							mono
+						/>
 					);
 
 				case 'object':
 					return (
-						<div key={variable.name} className='space-y-2'>
+						<div key={variable.name} className='py-1'>
 							<ObjectEditor
 								value={
 									typeof variable.value === 'object' &&
+									variable.value !== null &&
 									!Array.isArray(variable.value)
-										? variable.value
+										? (variable.value as Record<string, unknown>)
 										: {}
 								}
-								onChange={(newValue) =>
-									onUpdateVariable(variable.name, newValue)
-								}
-								label={variable.name}
+								onChange={update}
+								label={variableLabel(variable.name)}
 							/>
 						</div>
 					);
 
 				case 'array':
 					return (
-						<div key={variable.name} className='space-y-2'>
+						<div key={variable.name} className='py-1'>
 							<ArrayEditor
 								value={Array.isArray(variable.value) ? variable.value : []}
-								onChange={(newValue) =>
-									onUpdateVariable(variable.name, newValue)
-								}
-								label={variable.name}
-								placeholder='Add items...'
+								onChange={update}
+								label={variableLabel(variable.name)}
 							/>
 						</div>
 					);
 
 				case 'image':
 					return (
-						<div key={variable.name} className='space-y-2'>
+						<div key={variable.name} className='py-1'>
 							<ImageInput
 								value={variable.value as string}
-								onChange={(newValue) =>
-									onUpdateVariable(variable.name, newValue)
-								}
-								label={variable.name}
+								onChange={update}
+								label={variableLabel(variable.name)}
 								multiple={variable.multiple}
 								maxSize={variable.maxSize}
 								maxFiles={variable.multiple ? 10 : 1}
@@ -327,13 +351,11 @@ export const HTMLBlockJSVariablesControls: React.FC<JSControlsProps> = ({
 
 				case 'file':
 					return (
-						<div key={variable.name} className='space-y-2'>
+						<div key={variable.name} className='py-1'>
 							<FileInput
 								value={variable.value as string}
-								onChange={(newValue) =>
-									onUpdateVariable(variable.name, newValue)
-								}
-								label={variable.name}
+								onChange={update}
+								label={variableLabel(variable.name)}
 								accept={variable.accept}
 								multiple={variable.multiple}
 								maxSize={variable.maxSize}
@@ -344,18 +366,12 @@ export const HTMLBlockJSVariablesControls: React.FC<JSControlsProps> = ({
 
 				default:
 					return (
-						<div key={variable.name} className='space-y-2'>
-							<Label className='font-mono text-[11px] font-normal text-muted-foreground'>
-								{variable.name}
-							</Label>
-							<Input
-								value={variable.value as string}
-								onChange={(event) =>
-									onUpdateVariable(variable.name, event.target.value)
-								}
-								className='h-7 font-mono text-xs'
-							/>
-						</div>
+						<TextField
+							key={variable.name}
+							name={variable.name}
+							value={String(variable.value ?? '')}
+							onChange={update}
+						/>
 					);
 			}
 		})}
diff --git a/src/components/Blocks/TextBlock.tsx b/src/components/Blocks/TextBlock.tsx
index 0faf090..b0b8099 100644
--- a/src/components/Blocks/TextBlock.tsx
+++ b/src/components/Blocks/TextBlock.tsx
@@ -34,6 +34,7 @@ import {
 	SelectValue,
 } from '../ui/select';
 import { cn } from '@/lib/utils';
+import { useUIStore } from '@/stores';
 import {
 	type TextAlign,
 	type TextSizing,
@@ -161,6 +162,10 @@ export const TextControl: React.FC<Props> = ({ id }) => {
 
 	const weight = isBold ? 700 : fontWeight;
 
+	/* The hover and editing outlines are editor chrome: an export copies the
+	   computed style of the paragraph, hover included, so drop them then. */
+	const isExporting = useUIStore((state) => state.isExporting);
+
 	return (
 		<>
 			<ControlTemplate
@@ -449,14 +454,16 @@ export const TextControl: React.FC<Props> = ({ id }) => {
 					className={cn(
 						// A block box, not a flex one, so `text-align` reaches the lines.
 						// An outline, not a border: the hover must not resize the block.
-						'my-auto block w-full flex-auto select-none overflow-hidden whitespace-pre-wrap hover:outline hover:outline-1 hover:outline-blue-500',
+						'my-auto block w-full flex-auto select-none overflow-hidden whitespace-pre-wrap',
+						!isExporting &&
+							'hover:outline hover:outline-1 hover:outline-blue-500',
 						sizing !== 'fixed' && 'break-words',
 						// The app font only styles bold text that uses no font of its own.
 						isBold && fontFamily === '' && 'poppins-font-family',
 						isItalic && 'italic',
 						isUnderline && 'underline',
-						editing &&
-							'cursor-text select-text outline outline-1 outline-blue-500',
+						editing && 'cursor-text select-text',
+						editing && !isExporting && 'outline outline-1 outline-blue-500',
 					)}
 				>
 					{editing ? undefined : shownText}
diff --git a/src/components/Brand/BrandKitEditor.tsx b/src/components/Brand/BrandKitEditor.tsx
new file mode 100644
index 0000000..ca2c152
--- /dev/null
+++ b/src/components/Brand/BrandKitEditor.tsx
@@ -0,0 +1,465 @@
+import React, { useRef } from 'react';
+import { toast } from 'sonner';
+import {
+	Image as ImageIcon,
+	ImagePlus,
+	NotebookPen,
+	Palette,
+	Plus,
+	Tag,
+	Trash2,
+	Type,
+	type LucideIcon,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/components/lib/utils';
+import { ColorPicker } from '../CustomControls/ColorPicker';
+import { FontPicker } from '../CustomControls/FontPicker';
+import { CustomCollapse } from '../CustomControls/CustomCollapse';
+import { useBrandStore } from '@/stores/brand-store';
+import {
+	type BrandFontRole,
+	type BrandKit,
+	type BrandLogo,
+	type LogoVariant,
+	BRAND_FONT_ROLES,
+	BRAND_LIMITS,
+	LOGO_VARIANTS,
+	normalizeBrandKit,
+} from '@/lib/brand/brand-kit';
+import { DEFAULT_FONT_FAMILY } from '@/lib/fonts/fonts';
+
+const ROLE_LABELS: Record<BrandFontRole, string> = {
+	heading: 'Headings',
+	body: 'Body',
+	code: 'Code',
+};
+
+const VARIANT_LABELS: Record<LogoVariant, string> = {
+	primary: 'Primary',
+	light: 'For dark backgrounds',
+	dark: 'For light backgrounds',
+	mark: 'Mark / icon',
+};
+
+export const BRAND_FILE_EXTENSION = '.kbrand';
+
+/** Starting points for new colors, named by the role they usually play. */
+const COLOR_ROLES = ['Primary', 'Ink', 'Background', 'Accent'];
+const NEW_COLORS = ['#6366f1', '#111318', '#f7f7f8', '#f43f5e', '#10b981'];
+
+const readAsDataUrl = (file: File) =>
+	new Promise<string>((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result));
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(file);
+	});
+
+const naturalSize = (src: string) =>
+	new Promise<{ width: number; height: number }>((resolve, reject) => {
+		const image = new Image();
+		image.onload = () =>
+			resolve({
+				width: image.naturalWidth || 512,
+				height: image.naturalHeight || 512,
+			});
+		image.onerror = () => reject(new Error('Not an image.'));
+		image.src = src;
+	});
+
+/** Download the kit as a `.kbrand` file. */
+export const exportBrandKitFile = (kit: BrandKit): void => {
+	const blob = new Blob([JSON.stringify(kit, null, 2)], {
+		type: 'application/json',
+	});
+	const link = document.createElement('a');
+	link.href = URL.createObjectURL(blob);
+	link.download = `${kit.name.trim() || 'brand'}${BRAND_FILE_EXTENSION}`;
+	link.click();
+	setTimeout(() => URL.revokeObjectURL(link.href), 1000);
+};
+
+/** Replace the kit with the one in a `.kbrand` file. */
+export const importBrandKitFile = async (
+	file: File | undefined,
+): Promise<void> => {
+	if (!file) return;
+	try {
+		const next = normalizeBrandKit(JSON.parse(await file.text()));
+		useBrandStore.getState().setKit(next);
+		toast.success(`Brand kit ${next.name || file.name} imported`);
+	} catch {
+		toast.error('That file is not a brand kit');
+	}
+};
+
+/** The panel shows the kit in collapsible sections, the dialog in one page. */
+const CompactContext = React.createContext(false);
+
+const Section: React.FC<{
+	title: string;
+	icon: LucideIcon;
+	/** Shown next to the title of a collapsed section. */
+	count?: number;
+	/** Open when the panel shows the kit. */
+	open?: boolean;
+	hint?: string;
+	action?: React.ReactNode;
+	children: React.ReactNode;
+}> = ({ title, icon: Icon, count, open = false, hint, action, children }) => {
+	const compact = React.useContext(CompactContext);
+
+	if (compact) {
+		return (
+			<CustomCollapse
+				isOpen={open}
+				menu={
+					<div className='flex items-center gap-2'>
+						<Icon size={16} />
+						<Label className='text-sm font-semibold text-foreground'>
+							{title}
+						</Label>
+						{count !== undefined && count > 0 && (
+							<span className='text-xs text-muted-foreground'>{count}</span>
+						)}
+					</div>
+				}
+			>
+				{hint && (
+					<p className='text-[11px] leading-relaxed text-muted-foreground'>
+						{hint}
+					</p>
+				)}
+				{children}
+				{action && <div className='flex [&>button]:w-full'>{action}</div>}
+			</CustomCollapse>
+		);
+	}
+
+	return (
+		<section className='flex flex-col gap-2'>
+			<div className='flex items-end justify-between gap-2'>
+				<div className='flex flex-col'>
+					<Label className='text-[13px] text-foreground'>{title}</Label>
+					{hint && (
+						<span className='text-[11px] text-muted-foreground'>{hint}</span>
+					)}
+				</div>
+				{action}
+			</div>
+			{children}
+		</section>
+	);
+};
+
+/**
+ * Edit the brand kit: colors, fonts, logos and guidelines for Agent. The
+ * brand dialog shows it in columns; the properties panel, `compact`, in one.
+ */
+export const BrandKitEditor: React.FC<{ compact?: boolean }> = ({
+	compact = false,
+}) => {
+	const kit = useBrandStore((state) => state.kit);
+	const updateKit = useBrandStore((state) => state.updateKit);
+	const logoInput = useRef<HTMLInputElement>(null);
+
+	const addLogos = async (files: FileList | null) => {
+		if (!files) return;
+		const added: BrandLogo[] = [];
+		for (const file of Array.from(files)) {
+			if (kit.logos.length + added.length >= BRAND_LIMITS.logos) {
+				toast.error(`A brand kit holds up to ${BRAND_LIMITS.logos} logos`);
+				break;
+			}
+			if (file.size > BRAND_LIMITS.logoBytes) {
+				toast.error(`${file.name} is larger than 2 MB`);
+				continue;
+			}
+			try {
+				const src = await readAsDataUrl(file);
+				const size = await naturalSize(src);
+				added.push({
+					id: `logo-${Date.now().toString(36)}-${added.length}`,
+					name: file.name.replace(/\.[^.]+$/, ''),
+					variant: kit.logos.length + added.length === 0 ? 'primary' : 'mark',
+					src,
+					...size,
+				});
+			} catch {
+				toast.error(`Could not read ${file.name}`);
+			}
+		}
+		if (added.length) updateKit({ logos: [...kit.logos, ...added] });
+	};
+
+	const updateLogo = (id: string, patch: Partial<BrandLogo>) =>
+		updateKit({
+			logos: kit.logos.map((logo) =>
+				logo.id === id ? { ...logo, ...patch } : logo,
+			),
+		});
+
+	return (
+		<CompactContext.Provider value={compact}>
+			<div className={cn('flex flex-col', !compact && 'gap-6')}>
+				<Section title='Brand name' icon={Tag} open>
+					<Input
+						value={kit.name}
+						placeholder='Acme'
+						maxLength={BRAND_LIMITS.name}
+						onChange={(event) => updateKit({ name: event.target.value })}
+					/>
+				</Section>
+
+				<Section
+					title='Colors'
+					icon={Palette}
+					count={kit.colors.length}
+					open
+					hint='Name them by role: Primary, Accent, Ink, Background…'
+					action={
+						<Button
+							variant='outline'
+							size='sm'
+							disabled={kit.colors.length >= BRAND_LIMITS.colors}
+							onClick={() =>
+								updateKit({
+									colors: [
+										...kit.colors,
+										{
+											name: COLOR_ROLES[kit.colors.length] ?? '',
+											value: NEW_COLORS[kit.colors.length % NEW_COLORS.length],
+										},
+									],
+								})
+							}
+						>
+							<Plus />
+							Add color
+						</Button>
+					}
+				>
+					{kit.colors.length === 0 ? (
+						<p className='text-xs text-muted-foreground'>No colors yet.</p>
+					) : (
+						<div className={cn('grid gap-2', !compact && 'sm:grid-cols-2')}>
+							{kit.colors.map((color, index) => (
+								<div key={index} className='flex items-center gap-1.5'>
+									<div className={compact ? 'w-28 shrink-0' : 'w-32 shrink-0'}>
+										<ColorPicker
+											label=''
+											type='HexAlpha'
+											isGradientEnable={false}
+											color={color.value}
+											onColorChange={(value) =>
+												updateKit({
+													colors: kit.colors.map((item, position) =>
+														position === index ? { ...item, value } : item,
+													),
+												})
+											}
+										/>
+									</div>
+									<Input
+										aria-label='Color name'
+										placeholder='Name'
+										value={color.name}
+										className='h-7 min-w-0 flex-1 text-xs md:text-xs'
+										onChange={(event) =>
+											updateKit({
+												colors: kit.colors.map((item, position) =>
+													position === index
+														? { ...item, name: event.target.value }
+														: item,
+												),
+											})
+										}
+									/>
+									<Button
+										variant='ghost'
+										size='icon-xs'
+										aria-label={`Remove ${color.name || color.value}`}
+										onClick={() =>
+											updateKit({
+												colors: kit.colors.filter(
+													(_, position) => position !== index,
+												),
+											})
+										}
+									>
+										<Trash2 />
+									</Button>
+								</div>
+							))}
+						</div>
+					)}
+				</Section>
+
+				<Section
+					title='Fonts'
+					icon={Type}
+					count={Object.keys(kit.fonts).length}
+					open
+				>
+					<div className={cn('grid gap-2', !compact && 'sm:grid-cols-3')}>
+						{BRAND_FONT_ROLES.map((role) => (
+							<div key={role} className='flex min-w-0 flex-col gap-1'>
+								<span className='text-[11px] text-muted-foreground'>
+									{ROLE_LABELS[role]}
+								</span>
+								<FontPicker
+									family={kit.fonts[role]?.family ?? DEFAULT_FONT_FAMILY}
+									onChange={(family, source) => {
+										const fonts = { ...kit.fonts };
+										if (source === 'default' || family === '') {
+											delete fonts[role];
+										} else {
+											fonts[role] = { family, source };
+										}
+										updateKit({ fonts });
+									}}
+								/>
+							</div>
+						))}
+					</div>
+				</Section>
+
+				<Section
+					title='Logos'
+					icon={ImageIcon}
+					count={kit.logos.length}
+					open={kit.logos.length > 0}
+					hint='PNG, SVG, JPEG or WebP, up to 2 MB. Mark which one goes on dark and on light backgrounds.'
+					action={
+						<Button
+							variant='outline'
+							size='sm'
+							disabled={kit.logos.length >= BRAND_LIMITS.logos}
+							onClick={() => logoInput.current?.click()}
+						>
+							<ImagePlus />
+							Add logo
+						</Button>
+					}
+				>
+					<input
+						ref={logoInput}
+						type='file'
+						multiple
+						accept='image/png,image/svg+xml,image/jpeg,image/webp'
+						className='hidden'
+						onChange={(event) => {
+							void addLogos(event.target.files);
+							event.target.value = '';
+						}}
+					/>
+					{kit.logos.length === 0 ? (
+						<p className='text-xs text-muted-foreground'>No logos yet.</p>
+					) : (
+						<div className={cn('grid gap-2', !compact && 'sm:grid-cols-2')}>
+							{kit.logos.map((logo) => (
+								<div
+									key={logo.id}
+									className='flex gap-2 rounded-control border border-border p-2'
+								>
+									<div
+										className='flex size-16 shrink-0 items-center justify-center rounded-control p-1.5'
+										style={{
+											background:
+												logo.variant === 'light'
+													? '#111318'
+													: logo.variant === 'dark'
+														? '#ffffff'
+														: 'repeating-conic-gradient(#8882 0 25%, transparent 0 50%) 0 0 / 12px 12px',
+										}}
+									>
+										<img
+											src={logo.src}
+											alt={logo.name}
+											className='max-h-full max-w-full object-contain'
+										/>
+									</div>
+									<div className='flex min-w-0 flex-1 flex-col gap-1.5'>
+										<div className='flex items-center gap-1'>
+											<Input
+												aria-label='Logo name'
+												value={logo.name}
+												className='h-7 min-w-0 flex-1 text-xs md:text-xs'
+												onChange={(event) =>
+													updateLogo(logo.id, { name: event.target.value })
+												}
+											/>
+											<Button
+												variant='ghost'
+												size='icon-xs'
+												aria-label={`Remove ${logo.name}`}
+												onClick={() =>
+													updateKit({
+														logos: kit.logos.filter(
+															(item) => item.id !== logo.id,
+														),
+													})
+												}
+											>
+												<Trash2 />
+											</Button>
+										</div>
+										<Select
+											value={logo.variant}
+											onValueChange={(variant) =>
+												updateLogo(logo.id, {
+													variant: variant as LogoVariant,
+												})
+											}
+										>
+											<SelectTrigger
+												className='h-7 text-xs'
+												aria-label='Logo use'
+											>
+												<SelectValue />
+											</SelectTrigger>
+											<SelectContent>
+												{LOGO_VARIANTS.map((variant) => (
+													<SelectItem key={variant} value={variant}>
+														{VARIANT_LABELS[variant]}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+									</div>
+								</div>
+							))}
+						</div>
+					)}
+				</Section>
+
+				<Section
+					title='Guidelines'
+					icon={NotebookPen}
+					open={kit.notes.trim() !== ''}
+					hint='For Agent: tone of voice, what to avoid, how the logo is used.'
+				>
+					<Textarea
+						value={kit.notes}
+						maxLength={BRAND_LIMITS.notes}
+						rows={4}
+						placeholder='Headlines in sentence case. Never put the logo on the accent color. Friendly, precise, no emoji.'
+						className='text-xs md:text-xs'
+						onChange={(event) => updateKit({ notes: event.target.value })}
+					/>
+				</Section>
+			</div>
+		</CompactContext.Provider>
+	);
+};
diff --git a/src/components/CustomControls/ArrayEditor.tsx b/src/components/CustomControls/ArrayEditor.tsx
index 59e1fd1..3d1592e 100644
--- a/src/components/CustomControls/ArrayEditor.tsx
+++ b/src/components/CustomControls/ArrayEditor.tsx
@@ -1,192 +1,146 @@
 import React, { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Badge } from '@/components/ui/badge';
-import { Plus, X, Edit2, Check, RotateCcw } from 'lucide-react';
+import { ChevronDown, ChevronUp, Plus, X } from 'lucide-react';
+import { cn } from '@/components/lib/utils';
+import { DraftInput } from './DraftInput';
 
 interface Props {
-	value: string[];
+	/** Items that are not strings (numbers written by hand) are edited as text. */
+	value: unknown[];
 	onChange: (value: string[]) => void;
 	placeholder?: string;
 	label?: string;
 }
 
+const IconButton: React.FC<{
+	label: string;
+	onClick: () => void;
+	disabled?: boolean;
+	className?: string;
+	children: React.ReactNode;
+}> = ({ label, onClick, disabled, className, children }) => (
+	<button
+		type='button'
+		title={label}
+		aria-label={label}
+		disabled={disabled}
+		onClick={onClick}
+		className={cn(
+			'flex size-6 shrink-0 items-center justify-center rounded-[5px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-30 [&_svg]:size-3.5',
+			className,
+		)}
+	>
+		{children}
+	</button>
+);
+
+/**
+ * A list of text items, one field per item: edit in place (Enter or leaving
+ * the field applies it), reorder, remove, and add at the end.
+ */
 export const ArrayEditor: React.FC<Props> = ({
 	value = [],
 	onChange,
-	placeholder = 'Add items...',
+	placeholder = 'New item',
 	label,
 }) => {
-	const [newItem, setNewItem] = useState('');
-	const [editingIndex, setEditingIndex] = useState<number | null>(null);
-	const [editingValue, setEditingValue] = useState('');
-
-	const addItem = () => {
-		if (newItem.trim()) {
-			const newValue = [...value, newItem.trim()];
-			onChange(newValue);
-			setNewItem('');
-		}
-	};
-
-	const removeItem = (index: number) => {
-		const newValue = value.filter((_, i) => i !== index);
-		onChange(newValue);
-	};
-
-	const startEditing = (index: number) => {
-		setEditingIndex(index);
-		setEditingValue(value[index]);
-	};
-
-	const saveEdit = () => {
-		if (editingIndex !== null && editingValue.trim()) {
-			const newValue = [...value];
-			newValue[editingIndex] = editingValue.trim();
-			onChange(newValue);
-			setEditingIndex(null);
-			setEditingValue('');
-		}
-	};
-
-	const cancelEdit = () => {
-		setEditingIndex(null);
-		setEditingValue('');
-	};
+	const items = value.map((item) =>
+		typeof item === 'string' ? item : JSON.stringify(item),
+	);
+	const [adding, setAdding] = useState(false);
+	// Remounts the new item's field after each add, so it starts empty.
+	const [addedCount, setAddedCount] = useState(0);
 
-	const handleKeyPress = (e: React.KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			addItem();
-		}
-	};
+	const replace = (index: number, text: string) =>
+		onChange(items.map((item, current) => (current === index ? text : item)));
 
-	const handleEditKeyPress = (e: React.KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			saveEdit();
-		} else if (e.key === 'Escape') {
-			cancelEdit();
-		}
-	};
+	const remove = (index: number) =>
+		onChange(items.filter((_, current) => current !== index));
 
-	const clearAll = () => {
-		onChange([]);
+	const move = (index: number, offset: -1 | 1) => {
+		const next = [...items];
+		const [item] = next.splice(index, 1);
+		next.splice(index + offset, 0, item);
+		onChange(next);
 	};
 
 	return (
-		<div className='space-y-3'>
-			{label && (
-				<Label className='text-xs text-muted-foreground'>{label}</Label>
-			)}
-
-			{/* Add new item */}
-			<div className='flex gap-2'>
-				<Input
-					value={newItem}
-					onChange={(e) => setNewItem(e.target.value)}
-					onKeyPress={handleKeyPress}
-					placeholder={placeholder}
-					className='text-sm'
-				/>
-				<Button
-					onClick={addItem}
-					size='sm'
-					variant='outline'
-					disabled={!newItem.trim()}
-				>
-					<Plus className='h-4 w-4' />
-				</Button>
+		<div className='space-y-1.5'>
+			<div className='flex min-h-6 items-center gap-2'>
+				{label && (
+					<span className='min-w-0 flex-1 truncate text-xs text-muted-foreground'>
+						{label}
+					</span>
+				)}
+				<span className='ml-auto text-[11px] tabular-nums text-muted-foreground'>
+					{items.length} item{items.length === 1 ? '' : 's'}
+				</span>
 			</div>
 
-			{/* Items list */}
-			{value.length > 0 && (
-				<div className='space-y-2'>
-					<div className='flex items-center justify-between'>
-						<span className='text-xs text-muted-foreground'>
-							{value.length} item{value.length !== 1 ? 's' : ''}
-						</span>
-						<Button
-							onClick={clearAll}
-							size='sm'
-							variant='ghost'
-							className='h-6 px-2 text-xs'
-						>
-							<RotateCcw className='h-3 w-3 mr-1' />
-							Clear All
-						</Button>
-					</div>
-
-					<div className='flex flex-wrap gap-2'>
-						{value.map((item, index) => (
-							<Badge
-								key={index}
-								variant='secondary'
-								className='flex items-center gap-1 pr-1'
-							>
-								{editingIndex === index ? (
-									<Input
-										value={editingValue}
-										onChange={(e) => setEditingValue(e.target.value)}
-										onKeyPress={handleEditKeyPress}
-										onBlur={saveEdit}
-										className='h-5 w-20 text-xs'
-										autoFocus
-									/>
-								) : (
-									<span className='text-xs'>{item}</span>
-								)}
-
-								<div className='flex items-center gap-1 ml-1'>
-									{editingIndex === index ? (
-										<>
-											<Button
-												onClick={saveEdit}
-												size='sm'
-												variant='ghost'
-												className='h-4 w-4 p-0 hover:bg-emerald-500/15'
-											>
-												<Check className='h-3 w-3 text-emerald-500' />
-											</Button>
-											<Button
-												onClick={cancelEdit}
-												size='sm'
-												variant='ghost'
-												className='h-4 w-4 p-0 hover:bg-destructive/15'
-											>
-												<X className='h-3 w-3 text-destructive' />
-											</Button>
-										</>
-									) : (
-										<>
-											<Button
-												onClick={() => startEditing(index)}
-												size='sm'
-												variant='ghost'
-												className='h-4 w-4 p-0 hover:bg-accent'
-											>
-												<Edit2 className='h-3 w-3 text-muted-foreground' />
-											</Button>
-											<Button
-												onClick={() => removeItem(index)}
-												size='sm'
-												variant='ghost'
-												className='h-4 w-4 p-0 hover:bg-destructive/15'
-											>
-												<X className='h-3 w-3 text-destructive' />
-											</Button>
-										</>
-									)}
-								</div>
-							</Badge>
-						))}
-					</div>
-				</div>
+			{items.length > 0 && (
+				<ol className='space-y-1'>
+					{items.map((item, index) => (
+						<li key={index} className='group flex items-center gap-1'>
+							<span className='w-4 shrink-0 text-right font-mono text-[10px] tabular-nums text-muted-foreground'>
+								{index + 1}
+							</span>
+							<DraftInput
+								aria-label={`${label ?? 'Item'} ${index + 1}`}
+								value={item}
+								onCommit={(text) => replace(index, text)}
+							/>
+							<div className='flex shrink-0 opacity-60 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100'>
+								<IconButton
+									label='Move up'
+									disabled={index === 0}
+									onClick={() => move(index, -1)}
+								>
+									<ChevronUp />
+								</IconButton>
+								<IconButton
+									label='Move down'
+									disabled={index === items.length - 1}
+									onClick={() => move(index, 1)}
+								>
+									<ChevronDown />
+								</IconButton>
+								<IconButton
+									label='Remove'
+									onClick={() => remove(index)}
+									className='hover:bg-destructive/15 hover:text-destructive'
+								>
+									<X />
+								</IconButton>
+							</div>
+						</li>
+					))}
+				</ol>
 			)}
 
-			{value.length === 0 && (
-				<div className='text-center text-xs text-muted-foreground py-4 border border-dashed border-border rounded-control'>
-					No items yet. Add your first item above.
+			{adding ? (
+				<div className='flex items-center gap-1 pl-5'>
+					<DraftInput
+						key={addedCount}
+						autoFocus
+						aria-label={`New ${label ?? 'item'}`}
+						placeholder={placeholder}
+						value=''
+						onCommit={(text) => {
+							if (text.trim() === '') return;
+							onChange([...items, text]);
+							setAddedCount((count) => count + 1);
+						}}
+						onBlur={() => setAdding(false)}
+					/>
 				</div>
+			) : (
+				<button
+					type='button'
+					onClick={() => setAdding(true)}
+					className='flex h-7 w-full items-center justify-center gap-1.5 rounded-control border border-dashed border-border text-xs text-muted-foreground transition-colors hover:border-ring/60 hover:text-foreground'
+				>
+					<Plus className='size-3.5' />
+					Add item
+				</button>
 			)}
 		</div>
 	);
diff --git a/src/components/CustomControls/DraftInput.tsx b/src/components/CustomControls/DraftInput.tsx
new file mode 100644
index 0000000..153ff96
--- /dev/null
+++ b/src/components/CustomControls/DraftInput.tsx
@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { cn } from '@/components/lib/utils';
+
+/**
+ * A text field that commits on Enter or when it loses focus, not on every
+ * key: each commit is one undo step and one re-render of the block. Escape
+ * brings the value back. It follows the value when it changes elsewhere
+ * (undo, the code editor, Agent).
+ */
+export const DraftInput: React.FC<
+	Omit<React.ComponentProps<'input'>, 'value' | 'onChange'> & {
+		value: string;
+		onCommit: (value: string) => void;
+		/** Called after Enter commits, e.g. to move on to the next field. */
+		onEnter?: () => void;
+	}
+> = ({ value, onCommit, onEnter, className, onKeyDown, onBlur, ...props }) => {
+	const [draft, setDraft] = useState(value);
+	const [synced, setSynced] = useState(value);
+	if (value !== synced) {
+		setSynced(value);
+		setDraft(value);
+	}
+
+	const commit = () => {
+		if (draft !== value) onCommit(draft);
+	};
+
+	return (
+		<input
+			{...props}
+			value={draft}
+			onChange={(event) => setDraft(event.currentTarget.value)}
+			onBlur={(event) => {
+				commit();
+				onBlur?.(event);
+			}}
+			onKeyDown={(event) => {
+				onKeyDown?.(event);
+				if (event.key === 'Enter') {
+					event.preventDefault();
+					commit();
+					onEnter?.();
+				} else if (event.key === 'Escape') {
+					setDraft(value);
+					event.currentTarget.blur();
+				}
+			}}
+			className={cn(
+				'h-7 w-full min-w-0 rounded-control border border-input bg-transparent px-2 text-xs text-foreground outline-none transition-[color,box-shadow] placeholder:text-muted-foreground hover:border-ring/60 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20',
+				className,
+			)}
+		/>
+	);
+};
diff --git a/src/components/CustomControls/ObjectEditor.tsx b/src/components/CustomControls/ObjectEditor.tsx
index 5c7ff88..1807b6c 100644
--- a/src/components/CustomControls/ObjectEditor.tsx
+++ b/src/components/CustomControls/ObjectEditor.tsx
@@ -1,305 +1,192 @@
 import React, { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Badge } from '@/components/ui/badge';
-import { Plus, X, Edit2, Check, RotateCcw, FileJson, Eye } from 'lucide-react';
+import { Braces, List, Plus, X } from 'lucide-react';
+import { cn } from '@/components/lib/utils';
 import { Textarea } from '@/components/ui/textarea';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { DraftInput } from './DraftInput';
 
 interface Props {
-	value: Record<string, any>;
-	onChange: (value: Record<string, any>) => void;
-	placeholder?: string;
+	value: Record<string, unknown>;
+	onChange: (value: Record<string, unknown>) => void;
 	label?: string;
 }
 
+/** How a value shows in its field: text as is, anything else as JSON. */
+const toText = (value: unknown): string =>
+	typeof value === 'string' ? value : JSON.stringify(value);
+
+/**
+ * Read a typed field back with the type the value had: numbers stay
+ * numbers, booleans booleans and nested values JSON when the text allows.
+ */
+export const fromText = (text: string, previous: unknown): unknown => {
+	if (typeof previous === 'string') return text;
+	if (typeof previous === 'number') {
+		const number = Number(text);
+		return text.trim() !== '' && Number.isFinite(number) ? number : text;
+	}
+	try {
+		return JSON.parse(text);
+	} catch {
+		return text;
+	}
+};
+
+/** The whole object as JSON, applied when it is valid and the field is left. */
+const JsonField: React.FC<{
+	value: Record<string, unknown>;
+	onChange: (value: Record<string, unknown>) => void;
+}> = ({ value, onChange }) => {
+	const formatted = JSON.stringify(value, null, 2);
+	const [draft, setDraft] = useState(formatted);
+	const [synced, setSynced] = useState(formatted);
+	if (formatted !== synced) {
+		setSynced(formatted);
+		setDraft(formatted);
+	}
+
+	let parsed: unknown;
+	let valid = true;
+	try {
+		parsed = JSON.parse(draft);
+		valid =
+			typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed);
+	} catch {
+		valid = false;
+	}
+
+	return (
+		<div className='space-y-1'>
+			<Textarea
+				value={draft}
+				onChange={(event) => setDraft(event.currentTarget.value)}
+				onBlur={() => {
+					if (valid && draft !== formatted) {
+						onChange(parsed as Record<string, unknown>);
+					}
+				}}
+				aria-invalid={!valid}
+				spellCheck={false}
+				className='min-h-28 font-mono text-xs md:text-xs'
+			/>
+			{!valid && (
+				<p className='text-[11px] text-destructive'>
+					Not a valid JSON object: it is applied once it is.
+				</p>
+			)}
+		</div>
+	);
+};
+
+/**
+ * Key and value pairs, one row each: change a value in place, remove a
+ * pair, add one at the end, or edit the whole object as JSON.
+ */
 export const ObjectEditor: React.FC<Props> = ({
 	value = {},
 	onChange,
-	placeholder = 'Add key-value pairs...',
 	label,
 }) => {
+	const [asJson, setAsJson] = useState(false);
 	const [newKey, setNewKey] = useState('');
 	const [newValue, setNewValue] = useState('');
-	const [editingKey, setEditingKey] = useState<string | null>(null);
-	const [editingValue, setEditingValue] = useState<any>('');
-	const [showJsonView, setShowJsonView] = useState(false);
-	const [jsonText, setJsonText] = useState('');
-
 	const entries = Object.entries(value);
 
-	const addPair = () => {
-		if (newKey.trim() && newValue.trim()) {
-			const newObject = { ...value, [newKey.trim()]: newValue.trim() };
-			onChange(newObject);
-			setNewKey('');
-			setNewValue('');
-		}
-	};
-
-	const removePair = (key: string) => {
-		const newObject = { ...value };
-		delete newObject[key];
-		onChange(newObject);
-	};
-
-	const startEditing = (key: string) => {
-		setEditingKey(key);
-		setEditingValue(value[key]);
-	};
-
-	const saveEdit = () => {
-		if (editingKey && editingValue !== null) {
-			const newObject = { ...value, [editingKey]: editingValue };
-			onChange(newObject);
-			setEditingKey(null);
-			setEditingValue('');
-		}
-	};
-
-	const cancelEdit = () => {
-		setEditingKey(null);
-		setEditingValue('');
-	};
-
-	const handleKeyPress = (e: React.KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			addPair();
-		}
-	};
-
-	const handleEditKeyPress = (e: React.KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			saveEdit();
-		} else if (e.key === 'Escape') {
-			cancelEdit();
-		}
-	};
-
-	const clearAll = () => {
-		onChange({});
-	};
-
-	const toggleJsonView = () => {
-		if (!showJsonView) {
-			setJsonText(JSON.stringify(value, null, 2));
-		}
-		setShowJsonView(!showJsonView);
+	const add = () => {
+		const key = newKey.trim();
+		if (key === '') return;
+		onChange({ ...value, [key]: fromText(newValue, undefined) });
+		setNewKey('');
+		setNewValue('');
 	};
 
-	const handleJsonChange = (text: string) => {
-		setJsonText(text);
-		try {
-			const parsed = JSON.parse(text);
-			onChange(parsed);
-		} catch (error) {
-			// Invalid JSON, don't update
-		}
-	};
-
-	const formatValue = (val: any): string => {
-		if (typeof val === 'object') {
-			return JSON.stringify(val, null, 2);
-		}
-		return String(val);
+	const remove = (key: string) => {
+		const next = { ...value };
+		delete next[key];
+		onChange(next);
 	};
 
 	return (
-		<div className='space-y-3'>
-			{label && (
-				<Label className='text-xs text-muted-foreground'>{label}</Label>
-			)}
-
-			{!showJsonView ? (
-				<>
-					{/* Add new key-value pair */}
-					<div className='flex gap-2'>
-						<Input
-							value={newKey}
-							onChange={(e) => setNewKey(e.target.value)}
-							onKeyPress={handleKeyPress}
-							placeholder='Key'
-							className='text-sm'
-						/>
-						<Input
-							value={newValue}
-							onChange={(e) => setNewValue(e.target.value)}
-							onKeyPress={handleKeyPress}
-							placeholder='Value'
-							className='text-sm'
-						/>
-						<Button
-							onClick={addPair}
-							size='sm'
-							variant='outline'
-							disabled={!newKey.trim() || !newValue.trim()}
-						>
-							<Plus className='h-4 w-4' />
-						</Button>
-					</div>
-
-					{/* Key-value pairs list */}
-					{entries.length > 0 && (
-						<div className='space-y-2'>
-							<div className='flex items-center justify-between'>
-								<span className='text-xs text-muted-foreground'>
-									{entries.length} propert{entries.length !== 1 ? 'ies' : 'y'}
-								</span>
-								<div className='flex gap-1'>
-									<Button
-										onClick={toggleJsonView}
-										size='sm'
-										variant='ghost'
-										className='h-6 px-2 text-xs'
-									>
-										<FileJson className='h-3 w-3 mr-1' />
-										JSON
-									</Button>
-									<Button
-										onClick={clearAll}
-										size='sm'
-										variant='ghost'
-										className='h-6 px-2 text-xs'
-									>
-										<RotateCcw className='h-3 w-3 mr-1' />
-										Clear
-									</Button>
-								</div>
-							</div>
-
-							<div className='space-y-2 max-h-48 overflow-y-auto'>
-								{entries.map(([key, val]) => (
-									<div
-										key={key}
-										className='flex items-center gap-2 p-2 border rounded-control'
-									>
-										<span className='text-xs font-mono text-muted-foreground min-w-0 truncate'>
-											{key}:
-										</span>
-
-										{editingKey === key ? (
-											<div className='flex-1 flex gap-1'>
-												{typeof val === 'object' ? (
-													<Textarea
-														value={
-															typeof editingValue === 'string'
-																? editingValue
-																: JSON.stringify(editingValue, null, 2)
-														}
-														onChange={(e) => {
-															try {
-																const parsed = JSON.parse(e.target.value);
-																setEditingValue(parsed);
-															} catch {
-																setEditingValue(e.target.value);
-															}
-														}}
-														onKeyPress={handleEditKeyPress}
-														onBlur={saveEdit}
-														className='text-xs h-16 min-h-16'
-														autoFocus
-													/>
-												) : (
-													<Input
-														value={String(editingValue)}
-														onChange={(e) => setEditingValue(e.target.value)}
-														onKeyPress={handleEditKeyPress}
-														onBlur={saveEdit}
-														className='text-xs h-6'
-														autoFocus
-													/>
-												)}
-											</div>
-										) : (
-											<span className='flex-1 text-xs font-mono truncate'>
-												{formatValue(val)}
-											</span>
-										)}
-
-										<div className='flex items-center gap-1'>
-											{editingKey === key ? (
-												<>
-													<Button
-														onClick={saveEdit}
-														size='sm'
-														variant='ghost'
-														className='h-4 w-4 p-0 hover:bg-emerald-500/15'
-													>
-														<Check className='h-3 w-3 text-emerald-500' />
-													</Button>
-													<Button
-														onClick={cancelEdit}
-														size='sm'
-														variant='ghost'
-														className='h-4 w-4 p-0 hover:bg-destructive/15'
-													>
-														<X className='h-3 w-3 text-destructive' />
-													</Button>
-												</>
-											) : (
-												<>
-													<Button
-														onClick={() => startEditing(key)}
-														size='sm'
-														variant='ghost'
-														className='h-4 w-4 p-0 hover:bg-accent'
-													>
-														<Edit2 className='h-3 w-3 text-muted-foreground' />
-													</Button>
-													<Button
-														onClick={() => removePair(key)}
-														size='sm'
-														variant='ghost'
-														className='h-4 w-4 p-0 hover:bg-destructive/15'
-													>
-														<X className='h-3 w-3 text-destructive' />
-													</Button>
-												</>
-											)}
-										</div>
-									</div>
-								))}
-							</div>
-						</div>
+		<div className='space-y-1.5'>
+			<div className='flex min-h-6 items-center gap-2'>
+				{label && (
+					<span className='min-w-0 flex-1 truncate text-xs text-muted-foreground'>
+						{label}
+					</span>
+				)}
+				<button
+					type='button'
+					onClick={() => setAsJson(!asJson)}
+					title={asJson ? 'Edit as fields' : 'Edit as JSON'}
+					className='ml-auto flex h-6 items-center gap-1 rounded-[5px] px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
+				>
+					{asJson ? (
+						<List className='size-3.5' />
+					) : (
+						<Braces className='size-3.5' />
 					)}
+					{asJson ? 'Fields' : 'JSON'}
+				</button>
+			</div>
 
-					{entries.length === 0 && (
-						<div className='text-center text-xs text-muted-foreground py-4 border border-dashed border-border rounded-control'>
-							No properties yet. Add your first key-value pair above.
-						</div>
-					)}
-				</>
+			{asJson ? (
+				<JsonField value={value} onChange={onChange} />
 			) : (
 				<>
-					{/* JSON View */}
-					<div className='space-y-2'>
-						<div className='flex items-center justify-between'>
-							<span className='text-xs text-muted-foreground'>JSON View</span>
-							<Button
-								onClick={toggleJsonView}
-								size='sm'
-								variant='ghost'
-								className='h-6 px-2 text-xs'
+					{entries.map(([key, item]) => (
+						<div key={key} className='group flex items-center gap-1.5'>
+							<span
+								title={key}
+								className='w-20 shrink-0 truncate font-mono text-[11px] text-muted-foreground'
 							>
-								<Eye className='h-3 w-3 mr-1' />
-								Visual
-							</Button>
+								{key}
+							</span>
+							<DraftInput
+								aria-label={key}
+								value={toText(item)}
+								onCommit={(text) =>
+									onChange({ ...value, [key]: fromText(text, item) })
+								}
+								className={cn(typeof item !== 'string' && 'font-mono')}
+							/>
+							<button
+								type='button'
+								title='Remove'
+								aria-label={`Remove ${key}`}
+								onClick={() => remove(key)}
+								className='flex size-6 shrink-0 items-center justify-center rounded-[5px] text-muted-foreground opacity-60 transition hover:bg-destructive/15 hover:text-destructive group-focus-within:opacity-100 group-hover:opacity-100'
+							>
+								<X className='size-3.5' />
+							</button>
 						</div>
+					))}
 
-						<Textarea
-							value={jsonText}
-							onChange={(e) => handleJsonChange(e.target.value)}
-							className='font-mono text-xs min-h-32'
-							placeholder='{"key": "value"}'
+					<div className='flex items-center gap-1.5'>
+						<input
+							aria-label='New key'
+							placeholder='key'
+							value={newKey}
+							onChange={(event) => setNewKey(event.currentTarget.value)}
+							onKeyDown={(event) => event.key === 'Enter' && add()}
+							className='h-7 w-20 shrink-0 rounded-control border border-dashed border-border bg-transparent px-2 font-mono text-[11px] outline-none placeholder:text-muted-foreground focus-visible:border-ring'
 						/>
-
-						<Alert>
-							<FileJson className='h-4 w-4' />
-							<AlertDescription className='text-xs'>
-								Editing JSON directly. Invalid JSON will not be applied.
-							</AlertDescription>
-						</Alert>
+						<input
+							aria-label='New value'
+							placeholder='value'
+							value={newValue}
+							onChange={(event) => setNewValue(event.currentTarget.value)}
+							onKeyDown={(event) => event.key === 'Enter' && add()}
+							className='h-7 min-w-0 flex-1 rounded-control border border-dashed border-border bg-transparent px-2 text-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring'
+						/>
+						<button
+							type='button'
+							title='Add'
+							aria-label='Add'
+							disabled={newKey.trim() === ''}
+							onClick={add}
+							className='flex size-6 shrink-0 items-center justify-center rounded-[5px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-30'
+						>
+							<Plus className='size-3.5' />
+						</button>
 					</div>
 				</>
 			)}
diff --git a/src/components/CustomControls/ShadowEditor.tsx b/src/components/CustomControls/ShadowEditor.tsx
index 37ef00f..84ed7f2 100644
--- a/src/components/CustomControls/ShadowEditor.tsx
+++ b/src/components/CustomControls/ShadowEditor.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { Slider } from '@/components/ui/slider';
-import { Switch } from '@/components/ui/switch';
+import { Plus, X } from 'lucide-react';
 import { ColorPicker } from './ColorPicker';
-import { Badge } from '@/components/ui/badge';
-import { Plus, X, RotateCcw } from 'lucide-react';
+import {
+	PropertyRow,
+	SliderField,
+	ToggleButton,
+	ToggleGroup,
+} from './PropertyControls';
 
 interface ShadowValue {
 	color: string;
@@ -149,161 +149,111 @@ export const ShadowEditor: React.FC<Props> = ({ value, onChange, label }) => {
 		updateShadows(newShadows);
 	};
 
-	const clearAll = () => {
-		updateShadows([]);
-	};
-
 	return (
-		<div className='space-y-3'>
-			{label && (
-				<Label className='text-xs text-muted-foreground'>{label}</Label>
-			)}
-
-			{shadows.length > 0 && (
-				<div className='flex items-center justify-between'>
-					<span className='text-xs text-muted-foreground'>
-						{shadows.length} shadow{shadows.length !== 1 ? 's' : ''}
+		<div className='space-y-2'>
+			<div className='flex min-h-6 items-center gap-2'>
+				{label && (
+					<span className='min-w-0 flex-1 truncate text-xs text-muted-foreground'>
+						{label}
 					</span>
-					<Button
-						onClick={clearAll}
-						size='sm'
-						variant='ghost'
-						className='h-6 px-2 text-xs'
-					>
-						<RotateCcw className='h-3 w-3 mr-1' />
-						Clear All
-					</Button>
-				</div>
-			)}
-
-			<div className='space-y-4'>
-				{shadows.map((shadow, index) => (
-					<div key={index} className='space-y-3 p-3 border rounded-surface'>
-						<div className='flex items-center justify-between'>
-							<span className='text-[13px] font-medium'>
-								Shadow {index + 1}
-							</span>
-							<Button
-								onClick={() => removeShadow(index)}
-								size='sm'
-								variant='ghost'
-								className='h-6 w-6 p-0 hover:bg-destructive/15'
-							>
-								<X className='h-3 w-3 text-destructive' />
-							</Button>
-						</div>
-
-						<div className='grid grid-cols-2 gap-3'>
-							<div className='space-y-2'>
-								<Label className='text-xs'>Color</Label>
-								<ColorPicker
-									isGradientEnable={false}
-									color={shadow.color}
-									onColorChange={(color) => updateShadow(index, { color })}
-									label=''
-								/>
-							</div>
-
-							<div className='space-y-2'>
-								<Label className='text-xs'>Type</Label>
-								<div className='flex items-center space-x-2'>
-									<Switch
-										checked={shadow.inset}
-										onCheckedChange={(inset) => updateShadow(index, { inset })}
-									/>
-									<span className='text-xs text-muted-foreground'>
-										{shadow.inset ? 'Inset' : 'Outset'}
-									</span>
-								</div>
-							</div>
-						</div>
-
-						<div className='space-y-3'>
-							<div className='space-y-2'>
-								<Label className='text-xs'>X Offset: {shadow.x}px</Label>
-								<Slider
-									value={[shadow.x]}
-									onValueChange={([x]) => updateShadow(index, { x })}
-									min={-50}
-									max={50}
-									step={1}
-									className='w-full'
-								/>
-							</div>
-
-							<div className='space-y-2'>
-								<Label className='text-xs'>Y Offset: {shadow.y}px</Label>
-								<Slider
-									value={[shadow.y]}
-									onValueChange={([y]) => updateShadow(index, { y })}
-									min={-50}
-									max={50}
-									step={1}
-									className='w-full'
-								/>
-							</div>
-
-							<div className='space-y-2'>
-								<Label className='text-xs'>Blur: {shadow.blur}px</Label>
-								<Slider
-									value={[shadow.blur]}
-									onValueChange={([blur]) => updateShadow(index, { blur })}
-									min={0}
-									max={50}
-									step={1}
-									className='w-full'
-								/>
-							</div>
-
-							<div className='space-y-2'>
-								<Label className='text-xs'>Spread: {shadow.spread}px</Label>
-								<Slider
-									value={[shadow.spread]}
-									onValueChange={([spread]) => updateShadow(index, { spread })}
-									min={-20}
-									max={20}
-									step={1}
-									className='w-full'
-								/>
-							</div>
-						</div>
-
-						<div className='mt-2 p-2 bg-muted/50 rounded-control'>
-							<code className='text-xs'>{formatShadow([shadow])}</code>
-						</div>
-					</div>
-				))}
+				)}
+				<button
+					type='button'
+					onClick={addShadow}
+					className='ml-auto flex h-6 items-center gap-1 rounded-[5px] px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
+				>
+					<Plus className='size-3.5' />
+					Add
+				</button>
 			</div>
 
-			<Button
-				onClick={addShadow}
-				size='sm'
-				variant='outline'
-				className='w-full'
-			>
-				<Plus className='h-4 w-4 mr-2' />
-				Add Shadow
-			</Button>
-
 			{shadows.length === 0 && (
-				<div className='text-center text-xs text-muted-foreground py-4 border border-dashed border-border rounded-control'>
-					No shadows defined. Click &ldquo;Add Shadow&rdquo; to create one.
-				</div>
+				<p className='rounded-control border border-dashed border-border py-2 text-center text-[11px] text-muted-foreground'>
+					No shadow
+				</p>
 			)}
 
-			{shadows.length > 0 && (
-				<div className='mt-3 p-2 bg-muted/50 rounded-control'>
-					<div className='flex items-center justify-between mb-1'>
-						<span className='text-xs font-medium'>CSS Output:</span>
-						<Badge variant='secondary' className='text-xs'>
-							box-shadow
-						</Badge>
+			{shadows.map((shadow, index) => (
+				<div
+					key={index}
+					className='space-y-0.5 rounded-control border border-border p-2'
+				>
+					<div className='flex items-center gap-2'>
+						<span className='text-[11px] font-medium text-muted-foreground'>
+							{shadows.length > 1 ? `Shadow ${index + 1}` : 'Shadow'}
+						</span>
+						<button
+							type='button'
+							title='Remove shadow'
+							aria-label='Remove shadow'
+							onClick={() => removeShadow(index)}
+							className='ml-auto flex size-6 items-center justify-center rounded-[5px] text-muted-foreground transition-colors hover:bg-destructive/15 hover:text-destructive'
+						>
+							<X className='size-3.5' />
+						</button>
 					</div>
-					<code className='text-xs break-all'>
-						box-shadow: {formatShadow(shadows)};
-					</code>
+
+					<ColorPicker
+						type='HexAlpha'
+						isGradientEnable={false}
+						color={shadow.color}
+						onColorChange={(color) => updateShadow(index, { color })}
+						label='Color'
+					/>
+
+					<PropertyRow label='Type'>
+						<ToggleGroup>
+							<ToggleButton
+								label='Outside'
+								active={!shadow.inset}
+								onClick={() => updateShadow(index, { inset: false })}
+							>
+								Outside
+							</ToggleButton>
+							<ToggleButton
+								label='Inside'
+								active={shadow.inset}
+								onClick={() => updateShadow(index, { inset: true })}
+							>
+								Inside
+							</ToggleButton>
+						</ToggleGroup>
+					</PropertyRow>
+
+					<SliderField
+						label='X'
+						unit='px'
+						min={-100}
+						max={100}
+						value={shadow.x}
+						onChange={(x) => updateShadow(index, { x })}
+					/>
+					<SliderField
+						label='Y'
+						unit='px'
+						min={-100}
+						max={100}
+						value={shadow.y}
+						onChange={(y) => updateShadow(index, { y })}
+					/>
+					<SliderField
+						label='Blur'
+						unit='px'
+						min={0}
+						max={200}
+						value={shadow.blur}
+						onChange={(blur) => updateShadow(index, { blur })}
+					/>
+					<SliderField
+						label='Spread'
+						unit='px'
+						min={-50}
+						max={50}
+						value={shadow.spread}
+						onChange={(spread) => updateShadow(index, { spread })}
+					/>
 				</div>
-			)}
+			))}
 		</div>
 	);
 };
diff --git a/src/components/Modals/BrandKitDialog.tsx b/src/components/Modals/BrandKitDialog.tsx
index 3eeb274..65c6a6b 100644
--- a/src/components/Modals/BrandKitDialog.tsx
+++ b/src/components/Modals/BrandKitDialog.tsx
@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
-import { toast } from 'sonner';
-import { Download, ImagePlus, Plus, Trash2, Upload } from 'lucide-react';
+import { Download, Upload } from 'lucide-react';
 import {
 	Dialog,
 	DialogBar,
@@ -11,158 +10,21 @@ import {
 	DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '@/components/ui/select';
-import { ColorPicker } from '../CustomControls/ColorPicker';
-import { FontPicker } from '../CustomControls/FontPicker';
 import { useBrandStore } from '@/stores/brand-store';
 import {
-	type BrandFontRole,
-	type BrandLogo,
-	type LogoVariant,
-	BRAND_FONT_ROLES,
-	BRAND_LIMITS,
-	LOGO_VARIANTS,
-	normalizeBrandKit,
-} from '@/lib/brand/brand-kit';
-import { DEFAULT_FONT_FAMILY } from '@/lib/fonts/fonts';
-
-const ROLE_LABELS: Record<BrandFontRole, string> = {
-	heading: 'Headings',
-	body: 'Body',
-	code: 'Code',
-};
-
-const VARIANT_LABELS: Record<LogoVariant, string> = {
-	primary: 'Primary',
-	light: 'For dark backgrounds',
-	dark: 'For light backgrounds',
-	mark: 'Mark / icon',
-};
-
-const BRAND_FILE_EXTENSION = '.kbrand';
-
-/** Starting points for new colors, named by the role they usually play. */
-const COLOR_ROLES = ['Primary', 'Ink', 'Background', 'Accent'];
-const NEW_COLORS = ['#6366f1', '#111318', '#f7f7f8', '#f43f5e', '#10b981'];
+	BRAND_FILE_EXTENSION,
+	BrandKitEditor,
+	exportBrandKitFile,
+	importBrandKitFile,
+} from '../Brand/BrandKitEditor';
 
-const readAsDataUrl = (file: File) =>
-	new Promise<string>((resolve, reject) => {
-		const reader = new FileReader();
-		reader.onload = () => resolve(String(reader.result));
-		reader.onerror = () => reject(reader.error);
-		reader.readAsDataURL(file);
-	});
-
-const naturalSize = (src: string) =>
-	new Promise<{ width: number; height: number }>((resolve, reject) => {
-		const image = new Image();
-		image.onload = () =>
-			resolve({
-				width: image.naturalWidth || 512,
-				height: image.naturalHeight || 512,
-			});
-		image.onerror = () => reject(new Error('Not an image.'));
-		image.src = src;
-	});
-
-const Section: React.FC<{
-	title: string;
-	hint?: string;
-	action?: React.ReactNode;
-	children: React.ReactNode;
-}> = ({ title, hint, action, children }) => (
-	<section className='flex flex-col gap-2'>
-		<div className='flex items-end justify-between gap-2'>
-			<div className='flex flex-col'>
-				<Label className='text-[13px] text-foreground'>{title}</Label>
-				{hint && (
-					<span className='text-[11px] text-muted-foreground'>{hint}</span>
-				)}
-			</div>
-			{action}
-		</div>
-		{children}
-	</section>
-);
-
-/** Edit the brand kit: colors, fonts, logos and guidelines for Agent. */
+/** The brand kit editor in a dialog, for pages without the properties panel. */
 export const BrandKitDialog: React.FC<{
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
 }> = ({ open, onOpenChange }) => {
-	const kit = useBrandStore((state) => state.kit);
-	const updateKit = useBrandStore((state) => state.updateKit);
-	const setKit = useBrandStore((state) => state.setKit);
-	const logoInput = useRef<HTMLInputElement>(null);
 	const importInput = useRef<HTMLInputElement>(null);
 
-	const addLogos = async (files: FileList | null) => {
-		if (!files) return;
-		const added: BrandLogo[] = [];
-		for (const file of Array.from(files)) {
-			if (kit.logos.length + added.length >= BRAND_LIMITS.logos) {
-				toast.error(`A brand kit holds up to ${BRAND_LIMITS.logos} logos`);
-				break;
-			}
-			if (file.size > BRAND_LIMITS.logoBytes) {
-				toast.error(`${file.name} is larger than 2 MB`);
-				continue;
-			}
-			try {
-				const src = await readAsDataUrl(file);
-				const size = await naturalSize(src);
-				added.push({
-					id: `logo-${Date.now().toString(36)}-${added.length}`,
-					name: file.name.replace(/\.[^.]+$/, ''),
-					variant: kit.logos.length + added.length === 0 ? 'primary' : 'mark',
-					src,
-					...size,
-				});
-			} catch {
-				toast.error(`Could not read ${file.name}`);
-			}
-		}
-		if (added.length) updateKit({ logos: [...kit.logos, ...added] });
-	};
-
-	const updateLogo = (id: string, patch: Partial<BrandLogo>) =>
-		updateKit({
-			logos: kit.logos.map((logo) =>
-				logo.id === id ? { ...logo, ...patch } : logo,
-			),
-		});
-
-	const exportKit = () => {
-		const blob = new Blob([JSON.stringify(kit, null, 2)], {
-			type: 'application/json',
-		});
-		const link = document.createElement('a');
-		link.href = URL.createObjectURL(blob);
-		link.download = `${kit.name.trim() || 'brand'}${BRAND_FILE_EXTENSION}`;
-		link.click();
-		setTimeout(() => URL.revokeObjectURL(link.href), 1000);
-	};
-
-	const importKit = async (file: File | undefined) => {
-		if (!file) return;
-		try {
-			const next = normalizeBrandKit(JSON.parse(await file.text()));
-			setKit(next);
-			toast.success(`Brand kit ${next.name || file.name} imported`);
-		} catch {
-			toast.error('That file is not a brand kit');
-		}
-	};
-
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
 			<DialogContent className='sm:max-w-2xl'>
@@ -175,241 +37,8 @@ export const BrandKitDialog: React.FC<{
 					</DialogDescription>
 				</DialogHeader>
 
-				<DialogBody className='flex max-h-[65vh] flex-col gap-6 overflow-y-auto'>
-					<Section title='Name'>
-						<Input
-							value={kit.name}
-							placeholder='Acme'
-							maxLength={BRAND_LIMITS.name}
-							onChange={(event) => updateKit({ name: event.target.value })}
-						/>
-					</Section>
-
-					<Section
-						title='Colors'
-						hint='Name them by role: Primary, Accent, Ink, Background…'
-						action={
-							<Button
-								variant='outline'
-								size='sm'
-								disabled={kit.colors.length >= BRAND_LIMITS.colors}
-								onClick={() =>
-									updateKit({
-										colors: [
-											...kit.colors,
-											{
-												name: COLOR_ROLES[kit.colors.length] ?? '',
-												value:
-													NEW_COLORS[kit.colors.length % NEW_COLORS.length],
-											},
-										],
-									})
-								}
-							>
-								<Plus />
-								Add color
-							</Button>
-						}
-					>
-						{kit.colors.length === 0 ? (
-							<p className='text-xs text-muted-foreground'>No colors yet.</p>
-						) : (
-							<div className='grid gap-2 sm:grid-cols-2'>
-								{kit.colors.map((color, index) => (
-									<div key={index} className='flex items-center gap-1.5'>
-										<div className='w-32 shrink-0'>
-											<ColorPicker
-												label=''
-												type='HexAlpha'
-												isGradientEnable={false}
-												color={color.value}
-												onColorChange={(value) =>
-													updateKit({
-														colors: kit.colors.map((item, position) =>
-															position === index ? { ...item, value } : item,
-														),
-													})
-												}
-											/>
-										</div>
-										<Input
-											aria-label='Color name'
-											placeholder='Name'
-											value={color.name}
-											className='h-7 min-w-0 flex-1 text-xs md:text-xs'
-											onChange={(event) =>
-												updateKit({
-													colors: kit.colors.map((item, position) =>
-														position === index
-															? { ...item, name: event.target.value }
-															: item,
-													),
-												})
-											}
-										/>
-										<Button
-											variant='ghost'
-											size='icon-xs'
-											aria-label={`Remove ${color.name || color.value}`}
-											onClick={() =>
-												updateKit({
-													colors: kit.colors.filter(
-														(_, position) => position !== index,
-													),
-												})
-											}
-										>
-											<Trash2 />
-										</Button>
-									</div>
-								))}
-							</div>
-						)}
-					</Section>
-
-					<Section title='Fonts'>
-						<div className='grid gap-2 sm:grid-cols-3'>
-							{BRAND_FONT_ROLES.map((role) => (
-								<div key={role} className='flex min-w-0 flex-col gap-1'>
-									<span className='text-[11px] text-muted-foreground'>
-										{ROLE_LABELS[role]}
-									</span>
-									<FontPicker
-										family={kit.fonts[role]?.family ?? DEFAULT_FONT_FAMILY}
-										onChange={(family, source) => {
-											const fonts = { ...kit.fonts };
-											if (source === 'default' || family === '') {
-												delete fonts[role];
-											} else {
-												fonts[role] = { family, source };
-											}
-											updateKit({ fonts });
-										}}
-									/>
-								</div>
-							))}
-						</div>
-					</Section>
-
-					<Section
-						title='Logos'
-						hint='PNG, SVG, JPEG or WebP, up to 2 MB. Mark which one goes on dark and on light backgrounds.'
-						action={
-							<Button
-								variant='outline'
-								size='sm'
-								disabled={kit.logos.length >= BRAND_LIMITS.logos}
-								onClick={() => logoInput.current?.click()}
-							>
-								<ImagePlus />
-								Add logo
-							</Button>
-						}
-					>
-						<input
-							ref={logoInput}
-							type='file'
-							multiple
-							accept='image/png,image/svg+xml,image/jpeg,image/webp'
-							className='hidden'
-							onChange={(event) => {
-								void addLogos(event.target.files);
-								event.target.value = '';
-							}}
-						/>
-						{kit.logos.length === 0 ? (
-							<p className='text-xs text-muted-foreground'>No logos yet.</p>
-						) : (
-							<div className='grid gap-2 sm:grid-cols-2'>
-								{kit.logos.map((logo) => (
-									<div
-										key={logo.id}
-										className='flex gap-2 rounded-control border border-border p-2'
-									>
-										<div
-											className='flex size-16 shrink-0 items-center justify-center rounded-control p-1.5'
-											style={{
-												background:
-													logo.variant === 'light'
-														? '#111318'
-														: logo.variant === 'dark'
-															? '#ffffff'
-															: 'repeating-conic-gradient(#8882 0 25%, transparent 0 50%) 0 0 / 12px 12px',
-											}}
-										>
-											<img
-												src={logo.src}
-												alt={logo.name}
-												className='max-h-full max-w-full object-contain'
-											/>
-										</div>
-										<div className='flex min-w-0 flex-1 flex-col gap-1.5'>
-											<div className='flex items-center gap-1'>
-												<Input
-													aria-label='Logo name'
-													value={logo.name}
-													className='h-7 min-w-0 flex-1 text-xs md:text-xs'
-													onChange={(event) =>
-														updateLogo(logo.id, { name: event.target.value })
-													}
-												/>
-												<Button
-													variant='ghost'
-													size='icon-xs'
-													aria-label={`Remove ${logo.name}`}
-													onClick={() =>
-														updateKit({
-															logos: kit.logos.filter(
-																(item) => item.id !== logo.id,
-															),
-														})
-													}
-												>
-													<Trash2 />
-												</Button>
-											</div>
-											<Select
-												value={logo.variant}
-												onValueChange={(variant) =>
-													updateLogo(logo.id, {
-														variant: variant as LogoVariant,
-													})
-												}
-											>
-												<SelectTrigger
-													className='h-7 text-xs'
-													aria-label='Logo use'
-												>
-													<SelectValue />
-												</SelectTrigger>
-												<SelectContent>
-													{LOGO_VARIANTS.map((variant) => (
-														<SelectItem key={variant} value={variant}>
-															{VARIANT_LABELS[variant]}
-														</SelectItem>
-													))}
-												</SelectContent>
-											</Select>
-										</div>
-									</div>
-								))}
-							</div>
-						)}
-					</Section>
-
-					<Section
-						title='Guidelines'
-						hint='For Agent: tone of voice, what to avoid, how the logo is used.'
-					>
-						<Textarea
-							value={kit.notes}
-							maxLength={BRAND_LIMITS.notes}
-							rows={4}
-							placeholder='Headlines in sentence case. Never put the logo on the accent color. Friendly, precise, no emoji.'
-							className='text-xs md:text-xs'
-							onChange={(event) => updateKit({ notes: event.target.value })}
-						/>
-					</Section>
+				<DialogBody className='max-h-[65vh] overflow-y-auto'>
+					<BrandKitEditor />
 				</DialogBody>
 
 				<DialogBar>
@@ -419,7 +48,7 @@ export const BrandKitDialog: React.FC<{
 						accept={`${BRAND_FILE_EXTENSION},application/json`}
 						className='hidden'
 						onChange={(event) => {
-							void importKit(event.target.files?.[0]);
+							void importBrandKitFile(event.target.files?.[0]);
 							event.target.value = '';
 						}}
 					/>
@@ -431,7 +60,11 @@ export const BrandKitDialog: React.FC<{
 						<Upload />
 						Import
 					</Button>
-					<Button variant='ghost' size='sm' onClick={exportKit}>
+					<Button
+						variant='ghost'
+						size='sm'
+						onClick={() => exportBrandKitFile(useBrandStore.getState().kit)}
+					>
 						<Download />
 						Export
 					</Button>
diff --git a/src/components/Panels/BrandKitPanel.tsx b/src/components/Panels/BrandKitPanel.tsx
new file mode 100644
index 0000000..4ecae5b
--- /dev/null
+++ b/src/components/Panels/BrandKitPanel.tsx
@@ -0,0 +1,58 @@
+import React, { useRef } from 'react';
+import { Download, Upload } from 'lucide-react';
+import { Button } from '../ui/button';
+import { useBrandStore } from '@/stores/brand-store';
+import {
+	BRAND_FILE_EXTENSION,
+	BrandKitEditor,
+	exportBrandKitFile,
+	importBrandKitFile,
+} from '../Brand/BrandKitEditor';
+
+/** The brand kit in its own tab of the properties panel. */
+export const BrandKitPanel: React.FC = () => {
+	const importInput = useRef<HTMLInputElement>(null);
+
+	return (
+		<div className='flex flex-col pb-3'>
+			<p className='px-2 pb-2 text-[11px] leading-relaxed text-muted-foreground'>
+				Your colors, fonts and logos. The color and font pickers offer them
+				first, and Agent and MCP clients read them (and can fill them in) before
+				designing.
+			</p>
+
+			<BrandKitEditor compact />
+
+			<div className='flex gap-1 px-1 pt-2'>
+				<input
+					ref={importInput}
+					type='file'
+					accept={`${BRAND_FILE_EXTENSION},application/json`}
+					className='hidden'
+					onChange={(event) => {
+						void importBrandKitFile(event.target.files?.[0]);
+						event.target.value = '';
+					}}
+				/>
+				<Button
+					variant='ghost'
+					size='sm'
+					onClick={() => importInput.current?.click()}
+				>
+					<Upload />
+					Import
+				</Button>
+				<Button
+					variant='ghost'
+					size='sm'
+					onClick={() => exportBrandKitFile(useBrandStore.getState().kit)}
+				>
+					<Download />
+					Export
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default BrandKitPanel;
diff --git a/src/components/Panels/LeftPanel.tsx b/src/components/Panels/LeftPanel.tsx
index 0691ecf..366112f 100644
--- a/src/components/Panels/LeftPanel.tsx
+++ b/src/components/Panels/LeftPanel.tsx
@@ -231,8 +231,11 @@ export const LeftPanel: React.FC = () => {
 			className='pointer-events-auto z-30 mr-auto flex h-full w-5/6 grow-0 flex-col justify-center gap-1 overflow-hidden p-2 py-4 text-foreground md:w-fit md:max-w-40'
 			ref={containerRef}
 		>
-			{/* Controls */}
-			<div className='flex w-fit flex-col items-center gap-0.5 rounded-[10px] border border-border bg-popover p-1 text-foreground shadow-lg shadow-black/5 dark:shadow-black/30'>
+			{/* Controls. Zoom to fit leaves the canvas clear of them. */}
+			<div
+				data-canvas-overlay
+				className='flex w-fit flex-col items-center gap-0.5 rounded-[10px] border border-border bg-popover p-1 text-foreground shadow-lg shadow-black/5 dark:shadow-black/30'
+			>
 				{visibleTools.map((tool, index) => (
 					<React.Fragment key={tool.id}>
 						<Tooltip message={tool.label} shortcut={tool.shortcut}>
diff --git a/src/components/Panels/RightPanel.tsx b/src/components/Panels/RightPanel.tsx
index 03eca7d..7916526 100644
--- a/src/components/Panels/RightPanel.tsx
+++ b/src/components/Panels/RightPanel.tsx
@@ -5,19 +5,82 @@ import { WorkspacePanel } from './WorkspacePanel';
 import { ResizablePanel } from '../ui/resizable';
 import { Button } from '../ui/button';
 import {
+	Braces,
 	InspectionPanel,
 	Layers,
 	PanelRightClose,
 	PanelRightOpen,
 	SquarePen,
+	SwatchBook,
+	type LucideIcon,
 } from 'lucide-react';
 import { Label } from '../ui/label';
 import { ScrollArea } from '../ui/scroll-area';
-import { Separator } from '../ui/separator';
 import { HierarchyPanel } from './HierarchyPanel';
+import { VariablesPanel } from './VariablesPanel';
+import { BrandKitPanel } from './BrandKitPanel';
 import { ArrangeBar } from './ArrangeBar';
 import { Tooltip } from '../CustomControls/Tooltip';
 import { useCommands } from '@/lib/commands/registry';
+import type { SelectedTab } from '@/types';
+
+type PanelTab = 'hierarchy' | 'control' | 'workspace' | 'variables' | 'brand';
+
+const PANEL_TABS: Array<{
+	id: PanelTab;
+	label: string;
+	command: string;
+	icon: LucideIcon;
+}> = [
+	{ id: 'hierarchy', label: 'Hierarchy', command: 'Show layers', icon: Layers },
+	{
+		id: 'control',
+		label: 'Control',
+		command: 'Show control properties',
+		icon: SquarePen,
+	},
+	{
+		id: 'workspace',
+		label: 'Workspace',
+		command: 'Show workspace settings',
+		icon: InspectionPanel,
+	},
+	{
+		id: 'variables',
+		label: 'Variables',
+		command: 'Show project variables',
+		icon: Braces,
+	},
+	{
+		id: 'brand',
+		label: 'Brand kit',
+		command: 'Show brand kit',
+		icon: SwatchBook,
+	},
+];
+
+const isPanelTab = (tab: SelectedTab): tab is PanelTab =>
+	PANEL_TABS.some((item) => item.id === tab);
+
+/** A tab of the panel: its title and a scroll area filling the space left. */
+const TabPage: React.FC<{
+	title: string;
+	children: React.ReactNode;
+	before?: React.ReactNode;
+	className?: string;
+}> = ({ title, children, before, className }) => (
+	<div
+		className={`flex h-full min-h-0 flex-col overflow-hidden ${className ?? ''}`}
+	>
+		<Label className='flex h-8 shrink-0 select-none items-center px-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground'>
+			{title}
+		</Label>
+		{before}
+		{/* min-h-0, not h-full: the title and the bar above take part of the
+		    height, and a full-height scroll area would hide its end below. */}
+		<ScrollArea className='min-h-0 flex-1'>{children}</ScrollArea>
+	</div>
+);
 
 export const RightPanel: React.FC = () => {
 	/* App Store */
@@ -29,9 +92,15 @@ export const RightPanel: React.FC = () => {
 	const panel = usePanelRef();
 	const showMenu = useUIStore((state) => state.propertiesOpen);
 	const setShowMenu = useUIStore((state) => state.setPropertiesOpen);
-	const [tab, setTab] = useState<'workspace' | 'control' | 'hierarchy'>(
-		'control',
-	);
+	const [tab, setTab] = useState<PanelTab>('control');
+
+	/* Show a tab, from its button, a command or elsewhere in the app (the
+	   store's selected tab, e.g. the Brand kit menu item). */
+	const showTab = (id: PanelTab) => {
+		setTab(id);
+		setShowMenu(true);
+		setWorkspaceTab(id);
+	};
 
 	useCommands([
 		{
@@ -43,22 +112,12 @@ export const RightPanel: React.FC = () => {
 			allowInInput: true,
 			run: () => setShowMenu(!useUIStore.getState().propertiesOpen),
 		},
-		...(
-			[
-				['hierarchy', 'Show layers', Layers],
-				['control', 'Show control properties', SquarePen],
-				['workspace', 'Show workspace settings', InspectionPanel],
-			] as const
-		).map(([id, title, icon]) => ({
+		...PANEL_TABS.map(({ id, command, icon }) => ({
 			id: `view.panel-${id}`,
-			title,
+			title: command,
 			group: 'View' as const,
 			icon,
-			run: () => {
-				setTab(id);
-				setShowMenu(true);
-				if (id === 'workspace') setWorkspaceTab('workspace');
-			},
+			run: () => showTab(id),
 		})),
 	]);
 
@@ -83,7 +142,7 @@ export const RightPanel: React.FC = () => {
 	const [syncedTab, setSyncedTab] = useState(workspaceTab);
 	if (workspaceTab !== syncedTab) {
 		setSyncedTab(workspaceTab);
-		if (workspaceTab === 'control') setTab('control');
+		if (isPanelTab(workspaceTab)) setTab(workspaceTab);
 	}
 
 	return (
@@ -99,6 +158,8 @@ export const RightPanel: React.FC = () => {
 			groupResizeBehavior='preserve-pixel-size'
 		>
 			<div
+				// Zoom to fit leaves the canvas clear of it.
+				data-canvas-overlay
 				className={`pointer-events-auto mr-auto flex h-full w-full gap-1.5 overflow-hidden border-l border-border bg-sidebar p-1.5 text-foreground`}
 			>
 				{/* Selectors */}
@@ -125,40 +186,25 @@ export const RightPanel: React.FC = () => {
 						</Button>
 					</Tooltip>
 
-					{[
-						{ id: 'hierarchy', icon: <Layers size={16} />, label: 'Hierarchy' },
-						{ id: 'control', icon: <SquarePen size={16} />, label: 'Control' },
-						{
-							id: 'workspace',
-							icon: <InspectionPanel size={16} />,
-							label: 'Workspace',
-						},
-					].map((item) => {
+					{PANEL_TABS.map((item) => {
 						const isActive = tab === item.id && showMenu;
+						const Icon = item.icon;
 
 						return (
-							<Tooltip
-								key={item.id}
-								message={`${item.label} Settings`}
-								placement='left'
-							>
+							<Tooltip key={item.id} message={item.label} placement='left'>
 								<Button
 									variant='ghost'
 									size='icon'
 									aria-label={item.label}
 									aria-pressed={isActive}
-									onClick={() => {
-										setTab(item.id as any);
-										setShowMenu(true);
-										if (item.id === 'workspace') setWorkspaceTab('workspace');
-									}}
+									onClick={() => showTab(item.id)}
 									className={
 										isActive
 											? 'bg-accent text-foreground hover:bg-accent'
 											: undefined
 									}
 								>
-									{item.icon}
+									<Icon size={16} />
 								</Button>
 							</Tooltip>
 						);
@@ -169,49 +215,46 @@ export const RightPanel: React.FC = () => {
 				<div
 					className={`relative flex-auto flex-col min-h-0 overflow-hidden ${!showMenu ? 'hidden' : 'flex'}`}
 				>
-					{/* Controls */}
-					<div
-						className={`flex h-full min-h-0 flex-col overflow-hidden ${tab === 'control' ? 'flex' : 'hidden'}`}
+					{/* Controls: always mounted, the block menus render into #menu */}
+					<TabPage
+						title='Control'
+						before={<ArrangeBar />}
+						className={tab === 'control' ? 'flex' : 'hidden'}
 					>
-						<Label className='flex h-8 shrink-0 select-none items-center px-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground'>
-							Control
-						</Label>
-						<ArrangeBar />
-						<ScrollArea className='flex-1 h-full'>
-							{/* Menu Portal Container - always in DOM when control tab is active */}
-							<div className='p-1' id='menu'></div>
-							{currentID === '' && (
-								<div className='flex h-64 flex-auto items-center justify-center'>
-									<p className='select-none text-center text-[13px] text-muted-foreground'>
-										Select a control to start editing it
-									</p>
-								</div>
-							)}
-						</ScrollArea>
-					</div>
+						<div className='p-1' id='menu'></div>
+						{currentID === '' && (
+							<div className='flex h-64 flex-auto items-center justify-center'>
+								<p className='select-none text-center text-[13px] text-muted-foreground'>
+									Select a control to start editing it
+								</p>
+							</div>
+						)}
+					</TabPage>
 
-					{/* Workspace */}
 					{tab === 'workspace' && (
-						<div className='flex h-full min-h-0 flex-col overflow-hidden'>
-							<Label className='flex h-8 shrink-0 select-none items-center px-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground'>
-								Workspace
-							</Label>
-							<ScrollArea className='flex-1 p-1 h-full'>
+						<TabPage title='Workspace'>
+							<div className='p-1'>
 								<WorkspacePanel></WorkspacePanel>
-							</ScrollArea>
-						</div>
+							</div>
+						</TabPage>
+					)}
+
+					{tab === 'variables' && (
+						<TabPage title='Variables'>
+							<VariablesPanel />
+						</TabPage>
+					)}
+
+					{tab === 'brand' && (
+						<TabPage title='Brand kit'>
+							<BrandKitPanel />
+						</TabPage>
 					)}
 
-					{/* Hierarchy */}
 					{tab === 'hierarchy' && (
-						<div className='flex h-full min-h-0 flex-col overflow-hidden'>
-							<Label className='flex h-8 shrink-0 select-none items-center px-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground'>
-								Hierarchy
-							</Label>
-							<ScrollArea className='flex-1 h-full'>
-								<HierarchyPanel></HierarchyPanel>
-							</ScrollArea>
-						</div>
+						<TabPage title='Hierarchy'>
+							<HierarchyPanel></HierarchyPanel>
+						</TabPage>
 					)}
 				</div>
 			</div>
diff --git a/src/components/Panels/VariablesSection.tsx b/src/components/Panels/VariablesPanel.tsx
similarity index 91%
rename from src/components/Panels/VariablesSection.tsx
rename to src/components/Panels/VariablesPanel.tsx
index 20ea432..f7a6090 100644
--- a/src/components/Panels/VariablesSection.tsx
+++ b/src/components/Panels/VariablesPanel.tsx
@@ -1,16 +1,8 @@
 import React, { useState } from 'react';
 import { toast } from 'sonner';
-import {
-	AlignLeft,
-	Braces,
-	CalendarDays,
-	Plus,
-	Trash2,
-	Type,
-} from 'lucide-react';
+import { AlignLeft, CalendarDays, Plus, Trash2, Type } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import {
@@ -26,7 +18,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from '@/components/ui/select';
-import { CustomCollapse } from '../CustomControls/CustomCollapse';
 import { useProjectVariables } from '@/hooks/useProjectVariables';
 import { setProjectVariables } from '@/lib/editor/actions';
 import {
@@ -218,8 +209,11 @@ const VariableRow: React.FC<{
 	);
 };
 
-/** Project variables: the slots a template fills (`{{name}}` in blocks). */
-export const VariablesSection: React.FC = () => {
+/**
+ * Project variables: the slots a template fills (`{{name}}` in blocks). They
+ * have their own tab in the properties panel.
+ */
+export const VariablesPanel: React.FC = () => {
 	const variables = useProjectVariables();
 
 	const add = (kind: VariableKind) => {
@@ -237,22 +231,7 @@ export const VariablesSection: React.FC = () => {
 	};
 
 	return (
-		<CustomCollapse
-			isOpen={variables.length > 0}
-			menu={
-				<div className='flex items-center gap-2'>
-					<Braces size={16} />
-					<Label className='text-sm font-semibold text-foreground'>
-						Variables
-					</Label>
-					{variables.length > 0 && (
-						<span className='text-xs text-muted-foreground'>
-							{variables.length}
-						</span>
-					)}
-				</div>
-			}
-		>
+		<div className='flex flex-col gap-2 px-1 pb-3'>
 			<p className='text-[11px] leading-relaxed text-muted-foreground'>
 				Write <code className='font-mono text-foreground'>{'{{name}}'}</code> in
 				a text, code, window, QR or HTML block and it shows the value. Change
@@ -303,6 +282,6 @@ export const VariablesSection: React.FC = () => {
 					})}
 				</DropdownMenuContent>
 			</DropdownMenu>
-		</CustomCollapse>
+		</div>
 	);
 };
diff --git a/src/components/Panels/WorkspacePanel.tsx b/src/components/Panels/WorkspacePanel.tsx
index 56f494d..b162659 100644
--- a/src/components/Panels/WorkspacePanel.tsx
+++ b/src/components/Panels/WorkspacePanel.tsx
@@ -16,7 +16,6 @@ import { useWorkspaceStore, useUIStore } from '../../stores';
 import { Wallpapers } from '../../utils/wallpapers';
 import { ColorPicker } from '../CustomControls/ColorPicker';
 import { CustomCollapse } from '../CustomControls/CustomCollapse';
-import { VariablesSection } from './VariablesSection';
 import { ScrollArea } from '../ui/scroll-area';
 import {
 	textures,
@@ -152,8 +151,6 @@ export const WorkspacePanel: React.FC = () => {
 				</>
 			</CustomCollapse>
 
-			<VariablesSection />
-
 			{/* Background Type */}
 			<CustomCollapse
 				isOpen
diff --git a/src/hooks/useControlState.test.tsx b/src/hooks/useControlState.test.tsx
new file mode 100644
index 0000000..4264bff
--- /dev/null
+++ b/src/hooks/useControlState.test.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { useControlsStore, useHistoryStore } from '../stores';
+import { useControlState } from './useControlState';
+
+// React only flushes effects inside act() when it knows it runs in tests.
+(
+	globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+const ID = 'text-1-pos';
+const DEFAULT = { x: 33, y: 190 };
+
+/** Every value the block painted, in order. */
+let painted: unknown[];
+
+const Block: React.FC = () => {
+	const [position] = useControlState(DEFAULT, ID, true);
+	painted.push(position);
+	return null;
+};
+
+let container: HTMLDivElement;
+let root: Root;
+
+const mount = () => {
+	act(() => {
+		root = createRoot(container);
+		root.render(<Block />);
+	});
+};
+
+const unmount = () => {
+	act(() => root.unmount());
+};
+
+const stored = () =>
+	useControlsStore.getState().ControlProperties.find((item) => item.id === ID)
+		?.value;
+
+beforeEach(() => {
+	painted = [];
+	container = document.createElement('div');
+	useControlsStore.setState({ ControlProperties: [], initialProperties: [] });
+	useHistoryStore.setState({ controlState: null, pastHistory: [] });
+});
+
+afterEach(() => {
+	container.remove();
+});
+
+describe('useControlState', () => {
+	it('keeps the stored value when a block mounts again', () => {
+		useControlsStore.setState({
+			ControlProperties: [{ id: ID, value: { x: 400, y: 20 } }],
+		});
+
+		mount();
+
+		expect(painted[0]).toEqual({ x: 400, y: 20 });
+		expect(painted).not.toContainEqual(DEFAULT);
+		expect(stored()).toEqual({ x: 400, y: 20 });
+		unmount();
+	});
+
+	it('starts from a pending initial value and stores it', () => {
+		useControlsStore.setState({
+			initialProperties: [{ id: ID, value: { x: 10, y: 12 } }],
+		});
+
+		mount();
+
+		expect(painted[0]).toEqual({ x: 10, y: 12 });
+		expect(stored()).toEqual({ x: 10, y: 12 });
+		expect(useControlsStore.getState().initialProperties).toEqual([]);
+		unmount();
+	});
+
+	it('starts a new block from its default', () => {
+		mount();
+
+		expect(painted).toEqual([DEFAULT]);
+		unmount();
+	});
+
+	it('survives leaving the canvas and coming back', () => {
+		mount();
+		act(() => {
+			useControlsStore
+				.getState()
+				.addControlProperty({ id: ID, value: { x: 250, y: 75 } }, 'w');
+		});
+		unmount();
+
+		painted = [];
+		mount();
+
+		expect(painted[0]).toEqual({ x: 250, y: 75 });
+		expect(painted).not.toContainEqual(DEFAULT);
+		expect(stored()).toEqual({ x: 250, y: 75 });
+		unmount();
+	});
+});
diff --git a/src/hooks/useControlState.ts b/src/hooks/useControlState.ts
index 9c359e1..bbc0e41 100644
--- a/src/hooks/useControlState.ts
+++ b/src/hooks/useControlState.ts
@@ -7,6 +7,18 @@ import {
 import default_logo from '../assets/logo.svg';
 import { isBatchHistory } from '../stores/history-store';
 
+const serialize = (value: unknown): string => {
+	if (typeof value === 'string') return value;
+	return JSON.stringify(value);
+};
+
+/** Projects saved by old versions point image blocks at the bundled logo. */
+const restoredValue = <T>(id: string, value: unknown): T =>
+	id.endsWith('-src') &&
+	(value === '/src/assets/logo.svg' || value === '/src/assets/karbonized.svg')
+		? (default_logo as T)
+		: (value as T);
+
 export function useControlState<T>(
 	initialState: T,
 	id: string,
@@ -39,40 +51,28 @@ export function useControlState<T>(
 	const setPastHistory = useHistoryStore((state) => state.setPast);
 	const setFutureHistory = useHistoryStore((state) => state.setFuture);
 
-	const serialize = (value: unknown): string => {
-		if (typeof value === 'string') return value;
-		return JSON.stringify(value);
-	};
-
-	const [state, setState] = useState(initialState);
+	/* Start from the value the block already has: a pending initial value, or
+	   the stored one when the block mounts again (after the block editor, a
+	   workspace switch…). Starting from the default would paint the default
+	   for a frame, and the save effect below would write it over the stored
+	   value before the stored value is read back. */
+	const [state, setState] = useState<T>(() => {
+		const pending = initialProperty?.value ?? null;
+		if (pending) return restoredValue<T>(id, pending);
+		return storedProperty !== undefined
+			? (storedProperty.value as T)
+			: initialState;
+	});
 
 	/* Set Initial Properties */
 	useEffect(() => {
 		const prop = initialProperty?.value ?? null;
 		if (prop) {
-			const nextValue =
-				id.endsWith('-src') &&
-				(prop === '/src/assets/logo.svg' ||
-					prop === '/src/assets/karbonized.svg')
-					? (default_logo as T)
-					: (prop as T);
-
-			if (serialize(nextValue) === serialize(state)) {
-				removeInitialProperty(id);
-				return;
-			}
-
-			if (
-				id.endsWith('-src') &&
-				(prop === '/src/assets/logo.svg' ||
-					prop === '/src/assets/karbonized.svg')
-			) {
+			const nextValue = restoredValue<T>(id, prop);
+			if (serialize(nextValue) !== serialize(state)) {
 				// eslint-disable-next-line react-hooks/set-state-in-effect -- mirrors the controls store
-				setState(default_logo as T);
-			} else {
-				setState(prop);
+				setState(nextValue);
 			}
-
 			removeInitialProperty(id);
 		}
 	}, [id, initialProperty, removeInitialProperty, state]);
diff --git a/src/lib/agent/core/design-guide.ts b/src/lib/agent/core/design-guide.ts
index d895018..51486f0 100644
--- a/src/lib/agent/core/design-guide.ts
+++ b/src/lib/agent/core/design-guide.ts
@@ -80,9 +80,10 @@ The results of add_block and update_block carry hints when a family is not in Go
 - Code shots: at most ~15 lines and ~60 columns of real, correct code, a meaningful window title, a theme that contrasts with the background.
 
 ## HTML blocks: one component each, with editable variables
-Every HTML block follows this contract:
+Every HTML block has html, css and js, and follows this contract (add_block, update_block and update_html_block refuse a block without the css and js variables and say what is missing):
 - One component, sized to its content with the width and height of add_block (a stat tile is about 400×220, not the canvas). Its root element fills the block: \`width: 100%; height: 100%; box-sizing: border-box\`.
-- Short labels only; headlines and paragraphs are text blocks next to it. Text that changes from post to post uses a project variable: \`{{title}}\` in the HTML.
+- Short labels only; headlines and paragraphs are text blocks next to it.
+- **The look in CSS variables, the content in JS variables.** The css tweaks how it looks; the js holds what it says (see JavaScript below). Both are required.
 - **Declare what the user may tweak.** Start the CSS with one \`:root { }\` block listing every color, size, radius, shadow, icon and show/hide flag of the component as an annotated variable, then use only var(--…) for those values below it. Each annotation becomes a control in the properties panel:
   - \`/* @type:color */ --accent: #f43f5e;\` (hex, 6 or 8 digits)
   - \`/* @type:number min:0 max:48 step:1 unit:px */ --radius: 24px;\` (with px, %, em or rem)
@@ -95,7 +96,7 @@ Every HTML block follows this contract:
 - Fonts: the Google family name in font-family (see Fonts above); the app loads it. Use the same fonts as the text blocks.
 - Keep everything inside the block (no overflow, no negative margins past its edge).
 
-Example: a stat tile, added with add_block { type: "html", x: 80, y: 840, width: 440, height: 240, properties: { html, css } }
+Example: a stat tile, added with add_block { type: "html", x: 80, y: 840, width: 440, height: 240, properties: { html, css, js } }
 html: \`<div class="tile"><span class="k-icon icon" style="--k-icon: var(--icon)"></span><p class="value">128k</p><p class="label">monthly users</p></div>\`
 css:
 \`\`\`
@@ -115,18 +116,26 @@ css:
 .value { margin: 0; font-size: var(--value-size); font-weight: 800; line-height: 1; }
 .label { margin: 0; font-size: 28px; opacity: .7; }
 \`\`\`
-add_block and update_html_block answer with hints when a block misses its variables or grows into a whole section; fix them before moving on.
+js:
+\`\`\`
+// @var value:string = "128k"
+// @var label:string = "monthly users"
+document.querySelector('.value').textContent = value;
+document.querySelector('.label').textContent = label;
+\`\`\`
+add_block and update_html_block answer with hints when a block has too few variables or grows into a whole section; fix them before moving on.
 
 ### JavaScript: editable content and data
-CSS variables tweak the look; JS variables hold the content. When a component repeats markup for a list or data (the bars of a chart, rows of a table, checklist items, badges, steps of a timeline, avatars), write the data once as JS variables and build the markup from it, so the user edits a list in the panel instead of HTML:
-- Declare each value on its own line: \`// @var items:array = ["Fast builds", "Type safe", "Zero config"]\`. Types: string, number, boolean, color, gradient, url, array (a list of strings: encode pairs as \`"Mon: 42"\` and split them), object. Each one becomes a control in the properties panel and a variable of the same name in the script.
-- Scripts only run with the \`allow-scripts\` property set to true: pass it in add_block (\`properties: { html, css, js, "allow-scripts": true }\`) or with update_block.
+CSS variables tweak the look; JS variables hold the content. Every HTML block declares its content as JS variables and writes it into the markup: its labels and values (\`// @var value:string = "128k"\`), and when it repeats markup for a list or data (the bars of a chart, rows of a table, checklist items, badges, steps of a timeline, avatars), the data once as a list the script builds the markup from. The user then edits the content in the panel instead of HTML:
+- Declare each value on its own line: \`// @var items:array = ["Fast builds", "Type safe", "Zero config"]\`. Types: string, number, boolean, color, gradient, url, array, object. Each one becomes a control in the properties panel and a variable of the same name in the script: never declare it again with const or let.
+- Values are JSON on one line: double quotes, nothing after the value (no semicolon, no comment). An array is a list of strings: encode pairs as \`"Mon: 42"\` and split them.
+- Scripts are turned on for the blocks you write (the \`allow-scripts\` property).
 - The script sees \`document\` and \`root\` scoped to the block and \`host\`, the element that carries the :root variables. Read a CSS variable with \`getComputedStyle(host).getPropertyValue('--accent')\`; write one with \`host.style.setProperty('--progress', value + '%')\` so styling stays in CSS.
 - Build nodes with createElement and textContent (never innerHTML with the data), into an empty container of the static HTML. Keep that HTML a sensible first render.
 - Deterministic and instant: no fetch, no timers, no animation, no randomness. The script runs again whenever a variable changes.
-Plain text that fits in the HTML (one label, one number) stays in the HTML or a project variable \`{{name}}\`; use JS when the amount of items can change.
+Text that changes from post to post can be a project variable instead: \`{{title}}\` in the HTML.
 
-Example: a bar chart, add_block { type: "html", width: 560, height: 360, properties: { html, css, js, "allow-scripts": true } }
+Example: a bar chart, add_block { type: "html", width: 560, height: 360, properties: { html, css, js } }
 html: \`<div class="chart"><p class="title">Weekly signups</p><div class="bars"></div></div>\`
 css: \`:root { /* @type:color */ --bg: #16161a; /* @type:color */ --text: #f5f5f7; /* @type:color */ --accent: #fb7185; /* @type:number min:0 max:40 step:1 unit:px */ --radius: 24px; }\` then \`.bars { display: flex; align-items: flex-end; gap: 16px; height: 220px; } .bar { flex: 1; border-radius: calc(var(--radius) / 3); background: var(--accent); }\`…
 js:
@@ -152,7 +161,7 @@ container.replaceChildren(...list.map((bar) => {
 - Use short lowercase names (title, subtitle, code, date, author). Dates take YYYY-MM-DD or "today" and a format (long, medium, short, iso).
 
 ## Workflow
-1. Read the brand kit with get_brand_kit. When it has colors, fonts, logos or guidelines, they come first: use them instead of the palettes and fonts suggested here, and place the logo with add_brand_logo when the design calls for one.
+1. Read the brand kit with get_brand_kit. When it has colors, fonts, logos or guidelines, they come first: use them instead of the palettes and fonts suggested here, and place the logo with add_brand_logo when the design calls for one. When the user gives you their brand (colors, fonts, logo, tone) or asks for a brand kit, save it with update_brand_kit and save_brand_logo so every later design follows it.
 2. Understand the goal: platform, message, audience. Choose the size, palette and fonts (search_fonts) before adding blocks.
 3. Plan the blocks: list each piece with its type and its box (x, y, width, height) on the grid, using one of the layouts above.
 4. Build it step by step, one add_block per piece, from the back: background, hero, headline and text, supporting pieces.
@@ -166,11 +175,11 @@ container.replaceChildren(...list.map((bar) => {
 
 ## Checklist before finishing
 - The image is several blocks: background, text blocks for the copy, one block per component. No HTML block covers most of the canvas.
-- Every HTML block declares its colors, sizes, radius, shadow and icon as annotated :root variables.
+- Every HTML block declares its colors, sizes, radius, shadow and icon as annotated :root variables, and its content as // @var JS variables.
 - Nothing touches or crosses the canvas edge by accident; margins are respected.
 - Text is readable on a phone (over 24 px on a 1080 px canvas) and passes contrast.
 - At most 2 fonts and 3 text sizes, chosen for the tone and actually rendering (not the fallback); edges line up.
-- Lists and data in HTML blocks come from JS variables, not repeated markup.
+- Labels, lists and data in HTML blocks come from JS variables, not repeated markup.
 - You looked at the final canvas with get_canvas_snapshot.
 - One clear focal point and plenty of empty space.
 - No placeholder text, no unintended overlaps, no clipped text.`;
diff --git a/src/lib/agent/core/system-prompt.ts b/src/lib/agent/core/system-prompt.ts
index 96eec8e..25f8b2f 100644
--- a/src/lib/agent/core/system-prompt.ts
+++ b/src/lib/agent/core/system-prompt.ts
@@ -9,15 +9,14 @@ export const AGENT_SYSTEM_PROMPT = `You are Agent, the design assistant inside K
 The user edits a canvas (the exported image) that holds blocks: code snippets, text, images, window and phone mockups, shapes, icons, QR codes, freehand strokes and HTML blocks (custom components in HTML, CSS and JavaScript). You change the canvas with tools; the user sees every change immediately and can undo everything you did in one step.
 
 How to work:
-- Before a new design, read the brand kit (get_brand_kit) and follow it: its colors, fonts, logos (add_brand_logo) and guidelines.
+- Before a new design, read the brand kit (get_brand_kit) and follow it: its colors, fonts, logos (add_brand_logo) and guidelines. When the user gives you their brand or asks for a brand kit, save it with update_brand_kit and save_brand_logo; don't change it just to try a palette.
 - Call get_workspace before editing an existing design, and use the block ids it returns. Coordinates are canvas pixels from the top-left corner.
 - Call list_block_types when you need the properties of a block type.
 - Build every design block by block, step by step: plan the pieces, then one add_block per piece (background, hero, each text, each component), never the whole image or a whole section in one HTML block. Update several properties of one block in a single update_block call.
-- Headlines and paragraphs are text blocks. An html block is one component the native blocks cannot draw (a stat tile, a card, a badge row, a chart), sized to its content, and it always declares its colors, sizes, radius, shadow and icon as annotated :root variables so the user can adjust it. Follow the HTML block rules below; add_block and update_html_block answer with hints when a block breaks them.
+- Headlines and paragraphs are text blocks. An html block is one component the native blocks cannot draw (a stat tile, a card, a badge row, a chart), sized to its content. Every html block has html, css and js: its colors, sizes, radius, shadow and icon as annotated :root variables in the css, and its content (labels, values, lists) as \`// @var\` variables in the js that the script renders, so the user adjusts both from the panel. add_block, update_block and update_html_block refuse an html block without them and say what is missing; they answer with hints when it breaks the other rules below.
 - The component library (list_components) holds ready-made HTML components; add_component puts one on the canvas.
 - When you add a code block, put the code in its \`code\` property as plain text and set \`lang\` and a fitting \`wintitle\`.
 - Text blocks take any Google Fonts family: find it with search_fonts, set \`fontFamily\` to its exact name with \`fontSource\` \`google\` and a \`fontWeight\` it has (or \`system\` for a font installed on the machine), plus alignment, line height, letter spacing, an outline and a shadow of the letters. Choose fonts for the tone of the piece, as the Fonts section below explains.
-- HTML blocks keep the look in annotated CSS variables and the content that repeats (list items, chart data, rows) in \`// @var\` JS variables rendered by the script, with \`allow-scripts\` true, so the user edits both from the panel.
 - Icon blocks and \`/* @type:icon */\` variables take icon names such as \`FaRocket\` or, from an installed icon pack, \`acme:cloud\`. Find them with search_icons, never guess.
 - Shapes are drawn from geometry (corners, sides, points, stroke, solid or gradient fill). A freehand stroke is a \`drawing\` block: its \`points\` are \`x,y,pressure\` triples inside \`viewWidth\` × \`viewHeight\`, and \`thinning\` makes it thicker and thinner along its length.
 - Designs can be templates: blocks show \`{{name}}\` as the value of a project variable (get_workspace lists them). Fill them with set_variables instead of editing the blocks.
diff --git a/src/lib/agent/mcp/instructions.ts b/src/lib/agent/mcp/instructions.ts
index 855b7ab..28d031a 100644
--- a/src/lib/agent/mcp/instructions.ts
+++ b/src/lib/agent/mcp/instructions.ts
@@ -8,10 +8,9 @@ import { DESIGN_GUIDE } from '../core/design-guide';
 export const MCP_INSTRUCTIONS = `Karbonized is an editor for social media graphics, code snippets and product mockups. The tools act on the project open in the Karbonized app; the user sees every change live and can undo each tool call.
 
 - Call get_workspace before editing an existing design and use the block ids it returns. Coordinates are canvas pixels from the top-left.
-- Read the user's brand kit with get_brand_kit before a new design and use its colors, fonts and logos (add_brand_logo).
+- Read the user's brand kit with get_brand_kit before a new design and use its colors, fonts and logos (add_brand_logo). When the user gives you their brand or asks for a brand kit, save it with update_brand_kit and save_brand_logo; don't change it just to try a palette.
 - For a new design, set the canvas size first (create_workspace or set_canvas_size), then the background, then build it block by block: one add_block per piece (hero, each text, each component), never the whole image in one HTML block.
-- Headlines and paragraphs are text blocks. Use an html block for one component native blocks cannot draw (a stat tile, a card, a badge row, a chart), sized to its content, and declare its colors, sizes, radius, shadow and icon as annotated :root variables (see the HTML block rules below). add_block and update_html_block answer with hints when a block breaks these rules.
-- HTML blocks keep the look in annotated CSS variables and the content that repeats (list items, chart data, rows) in \`// @var\` JS variables rendered by the script, with the allow-scripts property true.
+- Headlines and paragraphs are text blocks. Use an html block for one component native blocks cannot draw (a stat tile, a card, a badge row, a chart), sized to its content. Every html block has html, css and js: its colors, sizes, radius, shadow and icon as annotated :root variables in the css and its content as \`// @var\` variables in the js (see the HTML block rules below). add_block, update_block and update_html_block refuse an html block without them and answer with hints when it breaks the other rules.
 - Find icon names with search_icons; never guess them. Icon packs (.kcomponent files with type: icon-pack) add icons named <prefix>:<name>.
 - The whole Google Fonts catalog is available: find families and their weights with search_fonts and pick them for the tone of the design (see Fonts below). Text blocks need fontSource "google".
 - Look at the canvas with get_canvas_snapshot while you build (after the hero and headline, after each HTML block or font change), at the end and after every change to an existing design; fix what fails the checklist below.
diff --git a/src/lib/agent/tools/blocks.ts b/src/lib/agent/tools/blocks.ts
index 0374ccd..fa69c71 100644
--- a/src/lib/agent/tools/blocks.ts
+++ b/src/lib/agent/tools/blocks.ts
@@ -14,6 +14,7 @@ import {
 	requireWorkspace,
 	reorderBlock,
 	selectBlocks,
+	setBlockProperties,
 	setHtmlBlockCode,
 	summarizeBlock,
 	updateBlock,
@@ -26,6 +27,7 @@ import { loadGoogleCatalog } from '@/lib/fonts/fonts';
 import { ToolError, defineTool } from './registry';
 import { cssFontHints, textFontHints } from './font-hints';
 import { htmlBlockHints } from './html-hints';
+import { htmlBlockContractErrors } from './html-contract';
 
 const blockTypes = BLOCK_TYPES.map((spec) => spec.type) as [
 	string,
@@ -123,6 +125,29 @@ export const validateBlockProperties = (
 	return values;
 };
 
+type HtmlCode = { html?: string; css?: string; js?: string };
+
+const pickHtmlCode = (values: Record<string, unknown>): HtmlCode =>
+	Object.fromEntries(
+		HTML_CODE_KEYS.filter((key) => typeof values[key] === 'string').map(
+			(key) => [key, values[key]],
+		),
+	);
+
+/**
+ * Refuse HTML code that breaks the contract of html-contract: annotated CSS
+ * variables for the look and // @var JS variables for the content. `code` is
+ * the whole code the block will have.
+ */
+const requireHtmlContract = (code: HtmlCode): void => {
+	const errors = htmlBlockContractErrors(code);
+	if (errors.length > 0) {
+		throw new ToolError(
+			['The HTML block was not changed:', ...errors].join('\n'),
+		);
+	}
+};
+
 const MAX_VALUE_LENGTH = 300;
 
 /** Keep data URLs and long code out of results sent to a model. */
@@ -250,7 +275,7 @@ export const addBlockTool = defineTool({
 	name: 'add_block',
 	title: 'Add block',
 	description:
-		'Add one block to the canvas and select it. It is centered on the canvas unless x and y are given. Build a design with one call per piece (hero, each text, each component) rather than one block for everything. For html blocks: one component, width and height that fit it, properties html and css (js only if needed), and a :root block of annotated variables (/* @type:color */, number, shadow, icon, boolean) for everything a user may tweak, as in the design guide. The result lists hints when an html block breaks these rules or a font cannot load (text blocks: fontFamily from search_fonts with fontSource "google" and a fontWeight the family has).',
+		'Add one block to the canvas and select it. It is centered on the canvas unless x and y are given. Build a design with one call per piece (hero, each text, each component) rather than one block for everything. For html blocks: one component, width and height that fit it, and properties html, css and js, all three required: the css starts with a :root block of annotated variables (/* @type:color */, number, shadow, icon, boolean) for everything a user may tweak, and the js declares the content (labels, values, lists) as // @var name:type = value lines and writes it into the markup, as in the design guide. Scripts are turned on for it. An html block without them is refused with what is missing. The result lists hints when an html block breaks these rules or a font cannot load (text blocks: fontFamily from search_fonts with fontSource "google" and a fontWeight the family has).',
 	input: z.object({
 		type: z.enum(blockTypes).describe('Block type.'),
 		name: z.string().optional().describe('Layer name.'),
@@ -260,6 +285,11 @@ export const addBlockTool = defineTool({
 	mutates: true,
 	execute: (args) => {
 		const values = validateBlockProperties(args.type, args.properties);
+		if (args.type === 'html') {
+			requireHtmlContract(pickHtmlCode(values));
+			// Its script renders the JS variables.
+			values['allow-scripts'] = true;
+		}
 		return addBlock({ ...args, properties: values });
 	},
 	settle: async (block) => {
@@ -289,6 +319,11 @@ export const updateBlockTool = defineTool({
 	execute: ({ id, ...args }) => {
 		const block = requireBlock(id);
 		const values = validateBlockProperties(block.type, args.properties);
+		const code = pickHtmlCode(values);
+		if (block.type === 'html' && Object.keys(code).length > 0) {
+			requireHtmlContract({ ...getHtmlBlockCode(id), ...code });
+			values['allow-scripts'] = true;
+		}
 		updateBlock(id, { ...args, properties: values });
 		return id;
 	},
@@ -395,7 +430,7 @@ export const updateHtmlBlockTool = defineTool({
 	name: 'update_html_block',
 	title: 'Edit HTML block',
 	description:
-		'Replace the HTML, CSS and/or JavaScript code of an HTML block. Omitted parts are kept. Keep the annotated :root variables (/* @type:color */ --accent: #f43f5e; …) that make it adjustable from the panel. CSS is scoped to the block (:root means the block). Google fonts named in font-family are loaded automatically; icons come from /* @type:icon */ variables drawn with <span class="k-icon" style="--k-icon: var(--name)">. JavaScript only runs after setting the allow-scripts property with update_block; declare its data as // @var name:type = value lines so the user can edit it from the panel.',
+		'Replace the HTML, CSS and/or JavaScript code of an HTML block. Omitted parts are kept. Keep the annotated :root variables (/* @type:color */ --accent: #f43f5e; …) that make it adjustable from the panel. CSS is scoped to the block (:root means the block). Google fonts named in font-family are loaded automatically; icons come from /* @type:icon */ variables drawn with <span class="k-icon" style="--k-icon: var(--name)">. The JavaScript declares the content as // @var name:type = value lines (JSON values on one line) and writes it into the markup; scripts are turned on for the block. The resulting block must keep both the annotated CSS variables and the // @var lines, or the change is refused.',
 	input: z.object({
 		id: z.string(),
 		html: z.string().optional(),
@@ -407,7 +442,13 @@ export const updateHtmlBlockTool = defineTool({
 		if (html === undefined && css === undefined && js === undefined) {
 			throw new ToolError('Give at least one of html, css or js.');
 		}
-		setHtmlBlockCode(id, { html, css, js });
+		const code = pickHtmlCode({ html, css, js });
+		requireHtmlContract({ ...getHtmlBlockCode(id), ...code });
+		setHtmlBlockCode(id, code);
+		// Its script renders the JS variables.
+		if (summarizeBlock(requireBlock(id)).properties['allow-scripts'] !== true) {
+			setBlockProperties(id, { 'allow-scripts': true });
+		}
 		return id;
 	},
 	settle: async (id) => {
diff --git a/src/lib/agent/tools/brand.ts b/src/lib/agent/tools/brand.ts
index 6f99e5e..322248f 100644
--- a/src/lib/agent/tools/brand.ts
+++ b/src/lib/agent/tools/brand.ts
@@ -1,10 +1,25 @@
 import { z } from 'zod';
 import {
+	type BrandFont,
+	type BrandFontRole,
+	type BrandKit,
+	type BrandLogo,
+	BRAND_FONT_ROLES,
+	BRAND_LIMITS,
+	LOGO_VARIANTS,
 	describeBrandKit,
 	isBrandKitEmpty,
+	normalizeHex,
 	pickLogo,
 } from '@/lib/brand/brand-kit';
-import { addBlock, waitForBlock } from '@/lib/editor/actions';
+import { type LogoImage, imageSize, svgLogo } from '@/lib/brand/brand-logo';
+import {
+	addBlock,
+	requireBlock,
+	summarizeBlock,
+	waitForBlock,
+} from '@/lib/editor/actions';
+import { COMMON_SYSTEM_FONTS, loadGoogleCatalog } from '@/lib/fonts/fonts';
 import { useBrandStore } from '@/stores/brand-store';
 import { compactBlock } from './blocks';
 import { ToolError, defineTool } from './registry';
@@ -29,7 +44,7 @@ export const getBrandKitTool = defineTool({
 		if (isBrandKitEmpty(kit)) {
 			return {
 				empty: true,
-				hint: 'No brand kit is set. Choose colors and fonts from the design guide; the user can set a brand kit from the command palette (Brand kit).',
+				hint: 'No brand kit is set. Choose colors and fonts from the design guide. When the user gives you their brand (or asks you to create one), save it with update_brand_kit and save_brand_logo.',
 			};
 		}
 		return describeBrandKit(kit);
@@ -85,4 +100,234 @@ export const addBrandLogoTool = defineTool({
 	},
 });
 
-export const brandTools = [getBrandKitTool, addBrandLogoTool];
+const fontInput = z
+	.object({
+		family: z.string().min(1).describe('Font family, e.g. "Space Grotesk".'),
+		source: z
+			.enum(['google', 'system'])
+			.optional()
+			.describe('google (default, loaded from Google Fonts) or system.'),
+	})
+	.nullable();
+
+/** Check a font against the Google catalog; returns it with the catalog's name. */
+const resolveFont = async (
+	role: BrandFontRole,
+	font: { family: string; source?: 'google' | 'system' },
+): Promise<BrandFont> => {
+	const family = font.family.trim();
+	const source = font.source ?? 'google';
+	if (source === 'system') {
+		const known = COMMON_SYSTEM_FONTS.find(
+			(name) => name.toLowerCase() === family.toLowerCase(),
+		);
+		return { family: known ?? family, source };
+	}
+	const catalog = await loadGoogleCatalog().catch(() => []);
+	if (catalog.length === 0) return { family, source };
+	const found = catalog.find(
+		(item) => item.family.toLowerCase() === family.toLowerCase(),
+	);
+	if (!found) {
+		throw new ToolError(
+			`The ${role} font "${family}" is not in Google Fonts. Look it up with search_fonts, or give source "system" for a font installed on the machine.`,
+		);
+	}
+	return { family: found.family, source };
+};
+
+/** Save the kit, keeping what is not changed; the panel shows it at once. */
+const saveKit = (kit: BrandKit) => {
+	useBrandStore.getState().setKit(kit);
+	return useBrandStore.getState().kit;
+};
+
+export const updateBrandKitTool = defineTool({
+	name: 'update_brand_kit',
+	title: 'Edit the brand kit',
+	description:
+		"Create or change the user's brand kit: its name, colors, fonts for headings, body and code, the name and use of its logos, and the guidelines. Only the fields given change. colors replaces the whole palette (read it with get_brand_kit first to keep colors); a font set to null is removed. Add logos with save_brand_logo. Change the brand kit only when the user asks for it or gives you their brand, not to try a palette for one design. The user sees and edits it in the Brand kit tab of the properties panel; changes are saved at once and are not part of the canvas undo.",
+	input: z.object({
+		name: z.string().max(BRAND_LIMITS.name).optional().describe('Brand name.'),
+		colors: z
+			.array(
+				z.object({
+					name: z
+						.string()
+						.describe('Role of the color: Primary, Accent, Ink, Background…'),
+					value: z.string().describe('Hex color, #rrggbb or #rrggbbaa.'),
+				}),
+			)
+			.max(BRAND_LIMITS.colors)
+			.optional()
+			.describe('The whole palette, in order of importance.'),
+		fonts: z
+			.object({ heading: fontInput, body: fontInput, code: fontInput })
+			.partial()
+			.optional()
+			.describe('Fonts by role. null removes the font of that role.'),
+		logos: z
+			.array(
+				z.object({
+					id: z.string(),
+					name: z.string().optional(),
+					variant: z
+						.enum(LOGO_VARIANTS as [string, ...string[]])
+						.optional()
+						.describe(
+							'primary, light (for dark backgrounds), dark (for light backgrounds) or mark.',
+						),
+				}),
+			)
+			.optional()
+			.describe('Rename logos or change what they are for.'),
+		removeLogos: z.array(z.string()).optional().describe('Logo ids to remove.'),
+		notes: z
+			.string()
+			.max(BRAND_LIMITS.notes)
+			.optional()
+			.describe(
+				'Guidelines: tone of voice, what to avoid, how the logo is used. Replaces the current ones.',
+			),
+	}),
+	mutates: false,
+	execute: async ({ name, colors, fonts, logos, removeLogos, notes }) => {
+		const kit = await brandKit();
+		const next: BrandKit = { ...kit, fonts: { ...kit.fonts } };
+
+		if (name !== undefined) next.name = name.trim();
+		if (notes !== undefined) next.notes = notes;
+
+		if (colors !== undefined) {
+			const invalid = colors.filter((color) => !normalizeHex(color.value));
+			if (invalid.length > 0) {
+				throw new ToolError(
+					`Not hex colors: ${invalid.map((color) => `${color.name} ${color.value}`).join(', ')}. Use #rrggbb or #rrggbbaa.`,
+				);
+			}
+			next.colors = colors.map((color) => ({
+				name: color.name.trim(),
+				value: normalizeHex(color.value)!,
+			}));
+		}
+
+		if (fonts !== undefined) {
+			for (const role of BRAND_FONT_ROLES) {
+				const font = fonts[role];
+				if (font === undefined) continue;
+				if (font === null) delete next.fonts[role];
+				else next.fonts[role] = await resolveFont(role, font);
+			}
+		}
+
+		const known = new Set(kit.logos.map((logo) => logo.id));
+		const unknown = [
+			...(logos ?? []).map((logo) => logo.id),
+			...(removeLogos ?? []),
+		].filter((id) => !known.has(id));
+		if (unknown.length > 0) {
+			throw new ToolError(
+				`No logo ${unknown.join(', ')}. Logos: ${kit.logos.map((logo) => logo.id).join(', ') || 'none'}.`,
+			);
+		}
+		next.logos = kit.logos
+			.filter((logo) => !removeLogos?.includes(logo.id))
+			.map((logo) => {
+				const change = logos?.find((item) => item.id === logo.id);
+				return change
+					? {
+							...logo,
+							name: change.name?.trim() || logo.name,
+							variant: (change.variant as BrandLogo['variant']) ?? logo.variant,
+						}
+					: logo;
+			});
+
+		return { saved: true, brandKit: describeBrandKit(saveKit(next)) };
+	},
+});
+
+export const saveBrandLogoTool = defineTool({
+	name: 'save_brand_logo',
+	title: 'Save a logo in the brand kit',
+	description:
+		'Add a logo to the brand kit, from one of: svg (SVG markup with a viewBox, e.g. a wordmark or mark you drew; draw letters as paths or use a common font, since the image cannot load web fonts), src (a data:image/… URL) or blockId (an image block on the canvas that holds one). Then place it with add_brand_logo. Only when the user asks for it or gives you their logo.',
+	input: z.object({
+		name: z.string().min(1).max(60).describe('Logo name.'),
+		variant: z
+			.enum(LOGO_VARIANTS as [string, ...string[]])
+			.optional()
+			.describe(
+				'primary, light (for dark backgrounds), dark (for light backgrounds) or mark. Default: primary for the first logo, mark after it.',
+			),
+		svg: z.string().optional().describe('SVG markup.'),
+		src: z.string().optional().describe('A data:image/… URL.'),
+		blockId: z
+			.string()
+			.optional()
+			.describe('An image block whose image becomes the logo.'),
+	}),
+	mutates: false,
+	execute: async ({ name, variant, svg, src, blockId }) => {
+		const sources = [svg, src, blockId].filter((item) => item !== undefined);
+		if (sources.length !== 1) {
+			throw new ToolError('Give exactly one of svg, src or blockId.');
+		}
+
+		const kit = await brandKit();
+		if (kit.logos.length >= BRAND_LIMITS.logos) {
+			throw new ToolError(
+				`The brand kit already holds ${BRAND_LIMITS.logos} logos; remove one with update_brand_kit first.`,
+			);
+		}
+
+		let image: LogoImage;
+		if (svg !== undefined) {
+			const result = svgLogo(svg);
+			if (!result.ok) throw new ToolError(result.error);
+			image = result.logo;
+		} else {
+			const data =
+				src ??
+				String(summarizeBlock(requireBlock(blockId!)).properties.src ?? '');
+			if (!/^data:image\/(png|jpeg|webp|gif|svg\+xml)[;,]/.test(data)) {
+				throw new ToolError(
+					blockId
+						? `Block ${blockId} does not hold an image as a data URL.`
+						: 'src must be a data:image/png, jpeg, webp, gif or svg+xml URL.',
+				);
+			}
+			const size = await imageSize(data);
+			if (!size) throw new ToolError('The image could not be read.');
+			image = { src: data, ...size };
+		}
+
+		if (image.src.length > BRAND_LIMITS.logoBytes * 1.4) {
+			throw new ToolError('The logo is larger than 2 MB.');
+		}
+
+		const logo: BrandLogo = {
+			id: `logo-${Date.now().toString(36)}-${kit.logos.length}`,
+			name: name.trim(),
+			variant:
+				(variant as BrandLogo['variant']) ??
+				(kit.logos.length === 0 ? 'primary' : 'mark'),
+			...image,
+		};
+		const saved = saveKit({ ...kit, logos: [...kit.logos, logo] });
+		const stored = saved.logos.find((item) => item.id === logo.id);
+		if (!stored) throw new ToolError('The logo could not be saved.');
+		const { id, width, height } = stored;
+		return {
+			saved: true,
+			logo: { id, name: stored.name, variant: stored.variant, width, height },
+		};
+	},
+});
+
+export const brandTools = [
+	getBrandKitTool,
+	updateBrandKitTool,
+	saveBrandLogoTool,
+	addBrandLogoTool,
+];
diff --git a/src/lib/agent/tools/html-contract.test.ts b/src/lib/agent/tools/html-contract.test.ts
new file mode 100644
index 0000000..3f4bd26
--- /dev/null
+++ b/src/lib/agent/tools/html-contract.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { htmlBlockContractErrors } from './html-contract';
+
+const html = '<div class="tile"><p class="value"></p></div>';
+const css =
+	':root {\n  /* @type:color */ --bg: #16161a;\n}\n.tile { background: var(--bg); }';
+const js =
+	'// @var value:string = "128k"\ndocument.querySelector(".value").textContent = value;';
+
+describe('htmlBlockContractErrors', () => {
+	it('accepts a block with css and js variables', () => {
+		expect(htmlBlockContractErrors({ html, css, js })).toEqual([]);
+	});
+
+	it('asks for the missing parts', () => {
+		const errors = htmlBlockContractErrors({ html: '', css: '' });
+		expect(errors.join('\n')).toMatch(/html is missing/);
+		expect(errors.join('\n')).toMatch(/css is missing/);
+		expect(errors.join('\n')).toMatch(/js is missing/);
+	});
+
+	it('asks for annotated css variables and js variables', () => {
+		const errors = htmlBlockContractErrors({
+			html,
+			css: ':root { --bg: #000; }',
+			js: 'console.log(1);',
+		});
+		expect(errors).toHaveLength(2);
+		expect(errors[0]).toMatch(/no annotated :root variables/);
+		expect(errors[1]).toMatch(/no \/\/ @var variables/);
+	});
+
+	it('refuses a script that declares a variable again', () => {
+		const errors = htmlBlockContractErrors({
+			html,
+			css,
+			js: '// @var bars:array = ["a"]\nconst bars = [];',
+		});
+		expect(errors.join('\n')).toMatch(/declares bars again/);
+
+		// Other names that contain it, and properties, are fine.
+		expect(
+			htmlBlockContractErrors({
+				html,
+				css,
+				js: '// @var bars:array = ["a"]\nconst allBars = bars; host.bars = 1;',
+			}),
+		).toEqual([]);
+	});
+
+	it('refuses lists that are not JSON lists of strings', () => {
+		expect(
+			htmlBlockContractErrors({
+				html,
+				css,
+				js: "// @var items:array = ['a', 'b'];",
+			}).join('\n'),
+		).toMatch(/not valid JSON/);
+		expect(
+			htmlBlockContractErrors({
+				html,
+				css,
+				js: '// @var items:array = [1, 2]',
+			}).join('\n'),
+		).toMatch(/list of strings/);
+		expect(
+			htmlBlockContractErrors({
+				html,
+				css,
+				js: '// @var items:array = null',
+			}).join('\n'),
+		).toMatch(/list of strings/);
+	});
+});
diff --git a/src/lib/agent/tools/html-contract.ts b/src/lib/agent/tools/html-contract.ts
new file mode 100644
index 0000000..a14f90a
--- /dev/null
+++ b/src/lib/agent/tools/html-contract.ts
@@ -0,0 +1,116 @@
+/**
+ * What every HTML block Agent or an MCP client writes must have: its look in
+ * annotated CSS variables and its content in JS variables, so the user can
+ * change both from the properties panel. `add_block`, `update_block` and
+ * `update_html_block` refuse code that breaks it, and the error says how to
+ * fix it; the model retries in the same turn.
+ */
+
+/** A `/* @type:… *\/` annotation on a CSS variable. */
+export const CSS_ANNOTATION =
+	/\/\*\s*@type:\s*(color|number|shadow|boolean|icon|string)\b/g;
+
+/** A `// @var name:type = value` line, with its raw value. */
+const JS_VARIABLE =
+	/^\s*\/\/\s*@var\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:\s*(string|number|boolean|color|gradient|url|object|array|image|file)(?:\s*=\s*(.+))?$/;
+
+interface DeclaredVariable {
+	name: string;
+	type: string;
+	value?: string;
+}
+
+const declaredVariables = (js: string): DeclaredVariable[] =>
+	js.split(/\r?\n/).flatMap((line) => {
+		const match = line.match(JS_VARIABLE);
+		return match
+			? [{ name: match[1], type: match[2], value: match[3]?.trim() }]
+			: [];
+	});
+
+/** The variable is declared again by the script, which then fails to run. */
+const redeclares = (js: string, name: string): boolean =>
+	new RegExp(
+		`(?:^|[^.\\w$])(?:const|let|var|function)\\s+${name.replace(/\$/g, '\\$')}\\b`,
+		'm',
+	).test(
+		// Only the code: the `// @var` lines themselves are comments.
+		js
+			.split(/\r?\n/)
+			.filter((line) => !JS_VARIABLE.test(line))
+			.join('\n'),
+	);
+
+const isJson = (value: string): boolean => {
+	try {
+		JSON.parse(value);
+		return true;
+	} catch {
+		return false;
+	}
+};
+
+const isListOfStrings = (value: unknown): boolean =>
+	Array.isArray(value) && value.every((item) => typeof item === 'string');
+
+export const htmlBlockContractErrors = ({
+	html,
+	css,
+	js,
+}: {
+	html?: string;
+	css?: string;
+	js?: string;
+}): string[] => {
+	const errors: string[] = [];
+
+	if (!html?.trim()) {
+		errors.push(
+			'html is missing. Give the markup of the component, with empty containers the script fills from its // @var variables.',
+		);
+	}
+
+	if (!css?.trim()) {
+		errors.push(
+			'css is missing. Every HTML block needs css that starts with a :root { } block of annotated variables (/* @type:color */ --accent: #f43f5e; …) and uses them with var(--…).',
+		);
+	} else if ((css.match(CSS_ANNOTATION)?.length ?? 0) === 0) {
+		errors.push(
+			'The css declares no annotated :root variables. Start it with :root { } listing the colors, sizes, radius, shadow and icon of the component, each with its annotation on the line above (/* @type:color */ --accent: #f43f5e;), and use them with var(--…).',
+		);
+	}
+
+	const variables = declaredVariables(js ?? '');
+	if (!js?.trim()) {
+		errors.push(
+			'js is missing. Every HTML block needs js that declares its content as // @var lines (// @var title:string = "Weekly signups", // @var items:array = ["A", "B"]) and renders them into the HTML, so the user edits the content from the panel.',
+		);
+	} else if (variables.length === 0) {
+		errors.push(
+			'The js declares no // @var variables. Declare the content of the component (labels, values, lists) as // @var name:type = value lines and render them into the HTML with textContent.',
+		);
+	}
+
+	variables.forEach(({ name, type, value }) => {
+		if (redeclares(js ?? '', name)) {
+			errors.push(
+				`The js declares ${name} again: the // @var line already defines it for the script (let ${name} = …), and declaring it twice stops the script. Use ${name} directly, or give the derived value another name.`,
+			);
+		}
+		if ((type === 'array' || type === 'object') && value !== undefined) {
+			const example =
+				type === 'array' ? '["Mon: 42", "Tue: 68"]' : '{"label": "Users"}';
+			if (!isJson(value)) {
+				errors.push(
+					`The value of ${name} is not valid JSON: write it on one line with double quotes and nothing after it, e.g. // @var ${name}:${type} = ${example}`,
+				);
+			} else if (type === 'array' && !isListOfStrings(JSON.parse(value))) {
+				errors.push(
+					`${name} must be a list of strings (the panel edits each item as text): encode pairs as "Mon: 42" and split them in the script, e.g. // @var ${name}:array = ${example}`,
+				);
+			}
+		}
+	});
+
+	return errors;
+};
diff --git a/src/lib/agent/tools/html-hints.ts b/src/lib/agent/tools/html-hints.ts
index 30290d2..f8e5dc0 100644
--- a/src/lib/agent/tools/html-hints.ts
+++ b/src/lib/agent/tools/html-hints.ts
@@ -1,4 +1,5 @@
 import { parseCSSVariables } from '@/lib/blocks-api/css-parser';
+import { CSS_ANNOTATION } from './html-contract';
 
 /**
  * Feedback on an HTML block a model just wrote, returned with the tool
@@ -8,9 +9,6 @@ import { parseCSSVariables } from '@/lib/blocks-api/css-parser';
  * models get this wrong.
  */
 
-const ANNOTATION =
-	/\/\*\s*@type:\s*(color|number|shadow|boolean|icon|string)\b/g;
-
 /** Share of the canvas area above which an HTML block is a whole section. */
 const MAX_AREA_SHARE = 0.45;
 /** Words of visible text above which the block is doing the text blocks' job. */
@@ -33,7 +31,7 @@ export const htmlBlockHints = (input: {
 	canvas?: { width: number; height: number };
 }): string[] => {
 	const hints: string[] = [];
-	const annotated = input.css.match(ANNOTATION)?.length ?? 0;
+	const annotated = input.css.match(CSS_ANNOTATION)?.length ?? 0;
 	const variables = parseCSSVariables(input.css).length;
 
 	if (annotated === 0) {
diff --git a/src/lib/agent/tools/tools.test.ts b/src/lib/agent/tools/tools.test.ts
index b4e7fef..2f4d6c1 100644
--- a/src/lib/agent/tools/tools.test.ts
+++ b/src/lib/agent/tools/tools.test.ts
@@ -343,29 +343,144 @@ describe('executeTool', () => {
 		expect(placed).toMatchObject({ type: 'image', width: 200, height: 50 });
 	});
 
-	it('tells the model when an html block misses its variables', async () => {
-		const bare = JSON.parse(
+	it('creates and edits the brand kit', async () => {
+		useBrandStore.setState({ hydrated: true, kit: EMPTY_BRAND_KIT });
+
+		const created = JSON.parse(
+			text(
+				await run('update_brand_kit', {
+					name: 'Acme',
+					colors: [
+						{ name: 'Primary', value: '#6366F1' },
+						{ name: 'Ink', value: '#111' },
+					],
+					fonts: {
+						heading: { family: 'space grotesk' },
+						code: { family: 'Menlo', source: 'system' },
+					},
+					notes: 'Sentence case.',
+				}),
+			),
+		);
+		expect(created.brandKit).toMatchObject({
+			name: 'Acme',
+			colors: [
+				{ name: 'Primary', value: '#6366f1' },
+				{ name: 'Ink', value: '#111111' },
+			],
+			fonts: {
+				heading: { family: 'Space Grotesk', source: 'google' },
+				code: { family: 'Menlo', source: 'system' },
+			},
+			notes: 'Sentence case.',
+		});
+
+		// Fonts that do not exist and colors that are not hex are refused.
+		expect(
+			(
+				await run('update_brand_kit', {
+					fonts: { body: { family: 'Not A Real Font' } },
+				})
+			).result.isError,
+		).toBe(true);
+		expect(
+			(await run('update_brand_kit', { colors: [{ name: 'X', value: 'red' }] }))
+				.result.isError,
+		).toBe(true);
+
+		const saved = JSON.parse(
+			text(
+				await run('save_brand_logo', {
+					name: 'Acme mark',
+					svg: '<svg viewBox="0 0 120 40" onload="alert(1)"><script>alert(1)</script><rect width="120" height="40" fill="#6366f1"/></svg>',
+				}),
+			),
+		);
+		expect(saved.logo).toMatchObject({
+			name: 'Acme mark',
+			variant: 'primary',
+			width: 120,
+			height: 40,
+		});
+		const stored = useBrandStore.getState().kit.logos[0];
+		const markup = atob(stored.src.split(',')[1]);
+		expect(markup).toContain('<rect');
+		expect(markup).not.toMatch(/script|onload/);
+
+		expect(
+			(await run('save_brand_logo', { name: 'Bad', svg: '<svg><rect/></svg>' }))
+				.result.isError,
+		).toBe(true);
+
+		// Other fields stay when one changes; logos are retagged and removed.
+		await run('update_brand_kit', {
+			fonts: { code: null },
+			logos: [{ id: stored.id, variant: 'mark' }],
+		});
+		let kit = useBrandStore.getState().kit;
+		expect(kit.fonts).toEqual({
+			heading: { family: 'Space Grotesk', source: 'google' },
+		});
+		expect(kit.colors).toHaveLength(2);
+		expect(kit.logos[0].variant).toBe('mark');
+
+		await run('update_brand_kit', { removeLogos: [stored.id] });
+		kit = useBrandStore.getState().kit;
+		expect(kit.logos).toEqual([]);
+		expect(
+			(await run('update_brand_kit', { removeLogos: ['nope'] })).result.isError,
+		).toBe(true);
+	});
+
+	it('refuses html blocks without css and js variables', async () => {
+		const refused = await run('add_block', {
+			type: 'html',
+			properties: {
+				html: '<div class="card">Hi</div>',
+				css: '.card { color: red; }',
+			},
+		});
+		expect(refused.result.isError).toBe(true);
+		expect(text(refused)).toMatch(/no annotated :root variables/);
+		expect(text(refused)).toMatch(/js is missing/);
+		expect(workspace().controls).toHaveLength(0);
+	});
+
+	it('turns scripts on for html blocks and hints at what to improve', async () => {
+		const added = JSON.parse(
 			text(
 				await run('add_block', {
 					type: 'html',
 					width: 1280,
 					height: 720,
 					properties: {
-						html: '<div class="card">Hi</div>',
-						css: '.card { color: red; }',
+						html: '<div class="card"><p class="label"></p></div>',
+						css: ':root { /* @type:color */ --a: #111111; } .card { color: var(--a); }',
+						js: '// @var label:string = "Hi"\ndocument.querySelector(".label").textContent = label;',
+						'allow-scripts': false,
 					},
 				}),
 			),
 		);
-		expect(bare.hints.join(' ')).toMatch(/declares no variables/);
-		expect(bare.hints.join(' ')).toMatch(/covers 100% of the canvas/);
+		expect(added.properties['allow-scripts']).toBe(true);
+		expect(added.hints.join(' ')).toMatch(/Only 1 value is adjustable/);
+		expect(added.hints.join(' ')).toMatch(/covers 100% of the canvas/);
+
+		// Taking the js variables out is refused and leaves the block as it was.
+		const refused = await run('update_html_block', {
+			id: added.id,
+			js: 'console.log("hi");',
+		});
+		expect(refused.result.isError).toBe(true);
+		expect(text(refused)).toMatch(/no \/\/ @var variables/);
 
 		const fixed = await run('update_html_block', {
-			id: bare.id,
+			id: added.id,
 			css: ':root { /* @type:color */ --a: #111111; /* @type:color */ --b: #222222; /* @type:number min:0 max:40 step:1 unit:px */ --r: 8px; } .card { color: var(--a); }',
 		});
+		expect(fixed.result.isError).toBeFalsy();
 		expect(text(fixed)).toMatch(/covers 100%/);
-		expect(text(fixed)).not.toMatch(/declares no variables/);
+		expect(text(fixed)).not.toMatch(/adjustable/);
 	});
 
 	it('reads the workspace with long values shortened', async () => {
diff --git a/src/lib/blocks-api/index.ts b/src/lib/blocks-api/index.ts
index 853b063..65be79e 100644
--- a/src/lib/blocks-api/index.ts
+++ b/src/lib/blocks-api/index.ts
@@ -55,3 +55,4 @@ export * from './css-parser';
 export * from './javascript-parser';
 export * from './safe-dom';
 export * from './file-handler';
+export { createScopedDocument } from './scoped-document';
diff --git a/src/lib/blocks-api/javascript-parser.test.ts b/src/lib/blocks-api/javascript-parser.test.ts
index d463f85..d5d3af2 100644
--- a/src/lib/blocks-api/javascript-parser.test.ts
+++ b/src/lib/blocks-api/javascript-parser.test.ts
@@ -60,6 +60,17 @@ describe('parseJavaScript', () => {
 		expect(variables[0].value).toEqual({});
 	});
 
+	it('reads values written with a semicolon after them', () => {
+		const { variables } = parseJavaScript(
+			'// @var bars:array = ["Mon: 42", "Tue: 68"];\n// @var max:number = 90;\n// @var title:string = "Signups";',
+		);
+		expect(variables.map((variable) => variable.value)).toEqual([
+			['Mon: 42', 'Tue: 68'],
+			90,
+			'Signups',
+		]);
+	});
+
 	it('splits setup code from actions', () => {
 		const parsed = parseJavaScript(
 			[
diff --git a/src/lib/blocks-api/javascript-parser.ts b/src/lib/blocks-api/javascript-parser.ts
index aab49e0..53541e4 100644
--- a/src/lib/blocks-api/javascript-parser.ts
+++ b/src/lib/blocks-api/javascript-parser.ts
@@ -244,7 +244,9 @@ const getDefaultValueForType = (type: JSVariable['type']) => {
 };
 
 // Helper function to parse JavaScript values based on type
-const parseJSValue = (value: string, type: JSVariable['type']) => {
+const parseJSValue = (raw: string, type: JSVariable['type']) => {
+	// A semicolon after the value is a habit of writing code, not part of it.
+	const value = raw.replace(/;\s*$/, '').trim();
 	try {
 		switch (type) {
 			case 'number': {
diff --git a/src/lib/blocks-api/scoped-document.test.ts b/src/lib/blocks-api/scoped-document.test.ts
new file mode 100644
index 0000000..f9fd60d
--- /dev/null
+++ b/src/lib/blocks-api/scoped-document.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { createScopedDocument } from './scoped-document';
+
+const setup = () => {
+	const host = document.createElement('div');
+	const shadowRoot = host.attachShadow({ mode: 'open' });
+	shadowRoot.innerHTML = '<ul class="items"></ul>';
+	document.body.innerHTML = '<ul class="items" id="outside"></ul>';
+	return { host, shadowRoot, scoped: createScopedDocument(shadowRoot, host) };
+};
+
+describe('createScopedDocument', () => {
+	it('builds nodes with the methods of the page document', () => {
+		const { shadowRoot, scoped } = setup();
+
+		const list = scoped.querySelector('.items')!;
+		list.replaceChildren(
+			...['Fast', 'Safe'].map((text) => {
+				const item = scoped.createElement('li');
+				item.textContent = text;
+				return item;
+			}),
+			scoped.createTextNode('!'),
+		);
+
+		expect(shadowRoot.querySelectorAll('li')).toHaveLength(2);
+		expect(document.getElementById('outside')!.children).toHaveLength(0);
+	});
+
+	it('keeps queries, body and documentElement inside the block', () => {
+		const { host, shadowRoot, scoped } = setup();
+		expect(scoped.querySelectorAll('.items')).toHaveLength(1);
+		expect(scoped.body).toBe(shadowRoot);
+		expect(scoped.documentElement).toBe(host);
+	});
+});
diff --git a/src/lib/blocks-api/scoped-document.ts b/src/lib/blocks-api/scoped-document.ts
new file mode 100644
index 0000000..0215582
--- /dev/null
+++ b/src/lib/blocks-api/scoped-document.ts
@@ -0,0 +1,43 @@
+/**
+ * The `document` block scripts see: queries, `body` and events reach the
+ * block's shadow root, `documentElement` its host, and everything else is
+ * the page document. Methods of the page document are bound to it, since
+ * calling them on the proxy (`document.createElement('li')`) throws
+ * "Illegal invocation".
+ */
+export const createScopedDocument = (
+	shadowRoot: ShadowRoot,
+	host: HTMLElement,
+): Document => {
+	const globalDocument = window.document;
+
+	return new Proxy(globalDocument, {
+		get(target, prop) {
+			switch (prop) {
+				case 'querySelector':
+					return shadowRoot.querySelector.bind(shadowRoot);
+				case 'querySelectorAll':
+					return shadowRoot.querySelectorAll.bind(shadowRoot);
+				case 'getElementById':
+					return shadowRoot.getElementById?.bind(shadowRoot);
+				case 'body':
+				case 'head':
+					return shadowRoot;
+				case 'documentElement':
+					return host;
+				case 'activeElement':
+					return shadowRoot.activeElement;
+				case 'addEventListener':
+					return shadowRoot.addEventListener.bind(shadowRoot);
+				case 'removeEventListener':
+					return shadowRoot.removeEventListener.bind(shadowRoot);
+				case 'dispatchEvent':
+					return shadowRoot.dispatchEvent.bind(shadowRoot);
+				default: {
+					const value = Reflect.get(target, prop, target);
+					return typeof value === 'function' ? value.bind(target) : value;
+				}
+			}
+		},
+	});
+};
diff --git a/src/lib/blocks/catalog.ts b/src/lib/blocks/catalog.ts
index 886c875..b13bd71 100644
--- a/src/lib/blocks/catalog.ts
+++ b/src/lib/blocks/catalog.ts
@@ -930,7 +930,7 @@ export const BLOCK_TYPES: readonly BlockTypeSpec[] = [
 		type: 'html',
 		label: 'HTML',
 		description:
-			'One custom component in HTML and CSS (JavaScript optional), rendered in a shadow root and sized to its content: a stat tile, a card, a badge row, a checklist, a chart in inline SVG, a small UI screen. Not for headlines or paragraphs (text blocks), backgrounds (set_canvas_background) or whole layouts. Pass html and css to add_block; edit later with update_html_block. Declare its colors, sizes, radius, shadow and icon as annotated :root variables (/* @type:color */, /* @type:number min: max: step: unit:px */, /* @type:shadow */, /* @type:icon */, /* @type:boolean */): they become controls in the panel.',
+			'One custom component in HTML, CSS and JavaScript, rendered in a shadow root and sized to its content: a stat tile, a card, a badge row, a checklist, a chart in inline SVG, a small UI screen. Not for headlines or paragraphs (text blocks), backgrounds (set_canvas_background) or whole layouts. Pass html, css and js to add_block; edit later with update_html_block. Declare its colors, sizes, radius, shadow and icon as annotated :root variables (/* @type:color */, /* @type:number min: max: step: unit:px */, /* @type:shadow */, /* @type:icon */, /* @type:boolean */) and its content as // @var JS variables: they become controls in the panel.',
 		defaultSize: size(400, 300),
 		minSize: size(100, 80),
 		maxSize: size(4000, 4000),
diff --git a/src/lib/brand/brand-logo.ts b/src/lib/brand/brand-logo.ts
new file mode 100644
index 0000000..3fef545
--- /dev/null
+++ b/src/lib/brand/brand-logo.ts
@@ -0,0 +1,117 @@
+/**
+ * Logos Agent and MCP clients add to the brand kit. They arrive as SVG
+ * markup or as data URLs and are stored as data URLs, like the ones the
+ * user uploads.
+ */
+
+export type LogoImage = { src: string; width: number; height: number };
+
+const REMOVED_ELEMENTS = [
+	'script',
+	'foreignObject',
+	'iframe',
+	'object',
+	'embed',
+];
+
+/** A size from a view box, or from width and height attributes. */
+const svgSize = (root: Element): { width: number; height: number } | null => {
+	const box = (root.getAttribute('viewBox') ?? '')
+		.trim()
+		.split(/[\s,]+/)
+		.map(Number);
+	if (box.length === 4 && box[2] > 0 && box[3] > 0) {
+		return { width: box[2], height: box[3] };
+	}
+	const width = parseFloat(root.getAttribute('width') ?? '');
+	const height = parseFloat(root.getAttribute('height') ?? '');
+	return width > 0 && height > 0 ? { width, height } : null;
+};
+
+const toBase64 = (text: string): string => {
+	const bytes = new TextEncoder().encode(text);
+	let binary = '';
+	bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
+	return btoa(binary);
+};
+
+/**
+ * Check SVG markup and turn it into a data URL. Scripts, embedded documents,
+ * event handlers and links outside the file are taken out.
+ */
+export const svgLogo = (
+	markup: string,
+): { ok: true; logo: LogoImage } | { ok: false; error: string } => {
+	const document = new DOMParser().parseFromString(
+		markup.trim(),
+		'image/svg+xml',
+	);
+	const root = document.documentElement;
+	if (
+		root.nodeName.toLowerCase() !== 'svg' ||
+		document.getElementsByTagName('parsererror').length > 0
+	) {
+		return { ok: false, error: 'The svg is not a valid <svg> element.' };
+	}
+
+	REMOVED_ELEMENTS.forEach((name) =>
+		Array.from(root.getElementsByTagName(name)).forEach((element) =>
+			element.remove(),
+		),
+	);
+	[root, ...Array.from(root.getElementsByTagName('*'))].forEach((element) =>
+		Array.from(element.attributes).forEach((attribute) => {
+			const name = attribute.name.toLowerCase();
+			const external =
+				(name === 'href' || name === 'xlink:href') &&
+				!/^(#|data:image\/)/.test(attribute.value.trim());
+			if (name.startsWith('on') || external) {
+				element.removeAttribute(attribute.name);
+			}
+		}),
+	);
+
+	const size = svgSize(root);
+	if (!size) {
+		return {
+			ok: false,
+			error: 'The svg needs a viewBox (e.g. viewBox="0 0 240 64").',
+		};
+	}
+	if (!root.getAttribute('xmlns')) {
+		root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+	}
+
+	const clean = new XMLSerializer().serializeToString(root);
+	return {
+		ok: true,
+		logo: { src: `data:image/svg+xml;base64,${toBase64(clean)}`, ...size },
+	};
+};
+
+/** The natural size of an image, or null when it cannot be read in time. */
+export const imageSize = (
+	src: string,
+	timeoutMs = 3000,
+): Promise<{ width: number; height: number } | null> =>
+	new Promise((resolve) => {
+		if (typeof Image === 'undefined') {
+			resolve(null);
+			return;
+		}
+		const image = new Image();
+		const timer = setTimeout(() => resolve(null), timeoutMs);
+		image.onload = () => {
+			clearTimeout(timer);
+			resolve(
+				image.naturalWidth > 0 && image.naturalHeight > 0
+					? { width: image.naturalWidth, height: image.naturalHeight }
+					: null,
+			);
+		};
+		image.onerror = () => {
+			clearTimeout(timer);
+			resolve(null);
+		};
+		image.src = src;
+	});
diff --git a/src/lib/viewer.test.ts b/src/lib/viewer.test.ts
index 2b1cbf7..c1ef0d2 100644
--- a/src/lib/viewer.test.ts
+++ b/src/lib/viewer.test.ts
@@ -4,6 +4,7 @@ import {
 	MIN_ZOOM,
 	fitViewer,
 	formatZoom,
+	measureInsets,
 	setViewerZoom,
 	useViewStore,
 	zoomViewerBy,
@@ -17,6 +18,7 @@ const createViewer = (initialZoom = 1) => {
 			zoom = next;
 		}),
 		scrollCenter: vi.fn(),
+		scrollBy: vi.fn(),
 	};
 	return { current: viewer };
 };
@@ -80,6 +82,52 @@ describe('fitViewer', () => {
 
 		vi.unstubAllGlobals();
 	});
+
+	it('fits and centers the workspace in the space the panels leave', () => {
+		vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+			callback(0);
+			return 0;
+		});
+
+		const viewer = createViewer();
+		const container = { clientWidth: 1496, clientHeight: 796 } as HTMLElement;
+
+		// A 400 px properties panel on the right leaves 1096 px: 50%, not 70%.
+		fitViewer(viewer, { width: 2000, height: 1000 }, container, {
+			left: 0,
+			right: 400,
+			top: 0,
+			bottom: 0,
+		});
+
+		expect(useViewStore.getState().zoom).toBe(0.5);
+		// Half the panel, in canvas pixels, to the right of the centered view.
+		expect(viewer.current.scrollBy).toHaveBeenCalledWith(400, 0);
+
+		vi.unstubAllGlobals();
+	});
+});
+
+describe('measureInsets', () => {
+	const viewer = { left: 100, right: 1100, top: 0, bottom: 800 };
+
+	it('counts each panel on the side it sits on', () => {
+		expect(
+			measureInsets(viewer, [
+				{ left: 108, right: 156, top: 200, bottom: 600 },
+				{ left: 760, right: 1100, top: 0, bottom: 800 },
+			]),
+		).toEqual({ left: 56, right: 340, top: 0, bottom: 0 });
+	});
+
+	it('ignores panels outside the viewer or collapsed', () => {
+		expect(
+			measureInsets(viewer, [
+				{ left: 0, right: 90, top: 0, bottom: 800 },
+				{ left: 900, right: 900, top: 0, bottom: 800 },
+			]),
+		).toEqual({ left: 0, right: 0, top: 0, bottom: 0 });
+	});
 });
 
 describe('formatZoom', () => {
diff --git a/src/lib/viewer.ts b/src/lib/viewer.ts
index c69b33c..7503897 100644
--- a/src/lib/viewer.ts
+++ b/src/lib/viewer.ts
@@ -16,6 +16,8 @@ interface ViewerLike {
 	getZoom(): number;
 	setZoom(zoom: number): void;
 	scrollCenter(): void;
+	/** In canvas pixels (unzoomed). */
+	scrollBy?(deltaX: number, deltaY: number): void;
 }
 
 type ViewerRef = RefObject<ViewerLike | null>;
@@ -86,14 +88,100 @@ export const zoomViewerBy = (viewer: ViewerRef, direction: 1 | -1): void => {
 	setViewerZoom(viewer, direction > 0 ? current * 1.25 : current / 1.25);
 };
 
-/** Zoom so the whole workspace is visible, then center it. */
+/** Space the panels floating over the viewer cover, from each edge. */
+export interface ViewerInsets {
+	left: number;
+	right: number;
+	top: number;
+	bottom: number;
+}
+
+const NO_INSETS: ViewerInsets = { left: 0, right: 0, top: 0, bottom: 0 };
+
+interface Box {
+	left: number;
+	right: number;
+	top: number;
+	bottom: number;
+}
+
+/**
+ * How far the given panels cover the viewer from its left and right edges.
+ * A panel counts for the side it sits on; panels outside the viewer (or
+ * collapsed to nothing) do not count.
+ */
+export const measureInsets = (viewer: Box, panels: Box[]): ViewerInsets => {
+	const insets = { ...NO_INSETS };
+	const middle = (viewer.left + viewer.right) / 2;
+
+	panels.forEach((panel) => {
+		const overlaps =
+			panel.right > viewer.left &&
+			panel.left < viewer.right &&
+			panel.bottom > viewer.top &&
+			panel.top < viewer.bottom &&
+			panel.right > panel.left;
+		if (!overlaps) return;
+
+		if ((panel.left + panel.right) / 2 < middle) {
+			insets.left = Math.max(insets.left, panel.right - viewer.left);
+		} else {
+			insets.right = Math.max(insets.right, viewer.right - panel.left);
+		}
+	});
+
+	return insets;
+};
+
+/** Panels mark themselves with this attribute when they float over the canvas. */
+export const CANVAS_OVERLAY_ATTRIBUTE = 'data-canvas-overlay';
+
+/** The insets of the panels floating over `container` right now. */
+export const canvasInsets = (container?: HTMLElement | null): ViewerInsets => {
+	if (!container || typeof document === 'undefined') return NO_INSETS;
+	const panels = Array.from(
+		document.querySelectorAll<HTMLElement>(`[${CANVAS_OVERLAY_ATTRIBUTE}]`),
+	).map((panel) => panel.getBoundingClientRect());
+	return measureInsets(container.getBoundingClientRect(), panels);
+};
+
+/**
+ * Center the workspace in the part of the viewer the panels leave free. Runs
+ * on the next frame, so the viewer has applied a zoom set just before.
+ */
+export const centerViewer = (
+	viewer: ViewerRef,
+	insets: ViewerInsets = NO_INSETS,
+): void => {
+	requestAnimationFrame(() => {
+		const current = viewer.current;
+		if (!current) return;
+		current.scrollCenter();
+
+		const zoom = current.getZoom() || 1;
+		const deltaX = (insets.right - insets.left) / 2 / zoom;
+		const deltaY = (insets.bottom - insets.top) / 2 / zoom;
+		if (deltaX !== 0 || deltaY !== 0) current.scrollBy?.(deltaX, deltaY);
+	});
+};
+
+/**
+ * Zoom so the whole workspace is visible, then center it. `insets` is the
+ * space panels floating over the viewer cover: the workspace fits and is
+ * centered in what is left.
+ */
 export const fitViewer = (
 	viewer: ViewerRef,
 	workspace: { width: number; height: number },
 	container?: HTMLElement | null,
+	insets: ViewerInsets = NO_INSETS,
 ): void => {
-	const width = container?.clientWidth ?? window.innerWidth;
-	const height = container?.clientHeight ?? window.innerHeight;
+	const width =
+		(container?.clientWidth ?? window.innerWidth) - insets.left - insets.right;
+	const height =
+		(container?.clientHeight ?? window.innerHeight) -
+		insets.top -
+		insets.bottom;
 	const padding = 96;
 
 	const zoom = Math.min(
@@ -103,8 +191,7 @@ export const fitViewer = (
 	);
 
 	setViewerZoom(viewer, zoom);
-	// Let the viewer apply the new zoom before centering.
-	requestAnimationFrame(() => viewer.current?.scrollCenter());
+	centerViewer(viewer, insets);
 };
 
 export const formatZoom = (zoom: number): string =>
diff --git a/src/pages/BlockEditor.tsx b/src/pages/BlockEditor.tsx
index 0710e47..d07db1b 100644
--- a/src/pages/BlockEditor.tsx
+++ b/src/pages/BlockEditor.tsx
@@ -52,6 +52,7 @@ import {
 	updateCSSVariable,
 	updateJSVariable,
 	createSafeDOM,
+	createScopedDocument,
 	fileHandler,
 	fileUtils,
 } from '@/lib/blocks-api';
@@ -377,42 +378,6 @@ const BlockEditor: React.FC = () => {
 		editorState.jsContent !== savedState.jsContent ||
 		editorState.allowScriptExecution !== savedState.allowScriptExecution;
 
-	const createScopedDocument = (
-		shadowRoot: ShadowRoot,
-		host: HTMLDivElement,
-	): Document & ShadowRoot => {
-		const globalDocument = window.document;
-
-		return new Proxy(globalDocument, {
-			get(target, prop) {
-				switch (prop) {
-					case 'querySelector':
-						return shadowRoot.querySelector.bind(shadowRoot);
-					case 'querySelectorAll':
-						return shadowRoot.querySelectorAll.bind(shadowRoot);
-					case 'getElementById':
-						return shadowRoot.getElementById?.bind(shadowRoot);
-					case 'body':
-						return shadowRoot;
-					case 'head':
-						return shadowRoot;
-					case 'documentElement':
-						return host;
-					case 'activeElement':
-						return shadowRoot.activeElement;
-					case 'addEventListener':
-						return shadowRoot.addEventListener.bind(shadowRoot);
-					case 'removeEventListener':
-						return shadowRoot.removeEventListener.bind(shadowRoot);
-					case 'dispatchEvent':
-						return shadowRoot.dispatchEvent.bind(shadowRoot);
-					default:
-						return Reflect.get(target, prop, target);
-				}
-			},
-		}) as Document & ShadowRoot;
-	};
-
 	const updatePreview = () => {
 		if (!shadowHostRef.current || !showPreview) return;
 
diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx
index b1c377f..fc4f5b3 100644
--- a/src/pages/Editor.tsx
+++ b/src/pages/Editor.tsx
@@ -26,6 +26,8 @@ import {
 	selectAllControls,
 } from '@/lib/canvas/selection';
 import {
+	canvasInsets,
+	centerViewer,
 	fitViewer,
 	setViewerZoom,
 	useViewStore,
@@ -149,13 +151,16 @@ export const Editor: React.FC = () => {
 	const centerView = (): void => {
 		if (currentWorkspace === undefined) return;
 
+		const container = document.querySelector<HTMLElement>('.viewer');
 		fitViewer(
 			viewerRef,
 			{
 				width: parseFloat(currentWorkspace.workspaceWidth),
 				height: parseFloat(currentWorkspace.workspaceHeight),
 			},
-			document.querySelector<HTMLElement>('.viewer'),
+			container,
+			// The toolbar and the properties panel float over the canvas.
+			canvasInsets(container),
 		);
 	};
 
@@ -388,7 +393,10 @@ export const Editor: React.FC = () => {
 			keywords: ['reset', 'actual size'],
 			run: () => {
 				setViewerZoom(viewerRef, 1);
-				requestAnimationFrame(() => viewerRef.current?.scrollCenter());
+				centerViewer(
+					viewerRef,
+					canvasInsets(document.querySelector<HTMLElement>('.viewer')),
+				);
 			},
 		},
 	]);
diff --git a/src/types/index.ts b/src/types/index.ts
index 1a761a1..551b21a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -51,7 +51,8 @@ export interface LayerSnapshot {
 export type LayerMovePosition = 'before' | 'after' | 'inside';
 export type LayerStepDirection = 'forward' | 'backward';
 export type LayerEdgePosition = 'front' | 'back';
-export type SelectedTab = 'hierarchy' | 'control' | 'workspace' | 'extensions';
+export type SelectedTab =
+	'hierarchy' | 'control' | 'workspace' | 'variables' | 'brand' | 'extensions';
 export type HistorySignal = 'redo' | 'undo' | '';
 
 export interface ControlSize {
diff --git a/src/utils/PrismThemes.tsx b/src/utils/PrismThemes.tsx
index 655fff2..306c09c 100644
--- a/src/utils/PrismThemes.tsx
+++ b/src/utils/PrismThemes.tsx
@@ -46,3 +46,13 @@ export const themes: Style[] = [
 	{ label: 'vscDarkPlus', theme: prismThemes.vscDarkPlus },
 	{ label: 'xonokai', theme: prismThemes.xonokai },
 ];
+
+/** The background a theme paints its code on, which code blocks start from. */
+export const codeThemeBackground = (label: string): string | undefined => {
+	const theme = themes.find((value) => value.label === label)?.theme;
+	if (!theme) return undefined;
+	const background =
+		theme[':not(pre) > code[class*="language-"]']?.background ??
+		theme['code[class*="language-"]']?.background;
+	return typeof background === 'string' ? background : undefined;
+};