caracms 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "caracms",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "A visual CMS for Astro sites, with content in git.",
   "license": "MIT",
   "type": "module",

package/src/editor/client/documents/DocMenu.tsx

@@ -111,6 +111,13 @@ export function DocMenu({ label }: { label: string }) {
 			</button>
 			{open ? (
 				<div ref={menu} className="menu" role="menu" style={{ right: 0, top: 'calc(100% + 4px)' }} onKeyDown={onKey}>
+					{/* A fields document's title is the first field of its form; the rest are renamed here. */}
+					{collection.kind === 'fields' ? null : (
+						<button type="button" role="menuitem" data-act="rename-document" disabled={access.readOnly} onClick={() => (setOpen(false), openDialog(editor, { kind: 'rename' }))}>
+							<Icon name="pencil" />
+							Rename…
+						</button>
+					)}
 					{noPage ? null : (
 						<>
 							<button

package/src/editor/client/documents/PagesUnder.tsx

@@ -0,0 +1,41 @@
+/**
+ * A page's own pages, under its SEO group: the pages whose addresses start
+ * with its own, indented as in the Pages tree and in its order, each opening as it
+ * does there. Open to begin with; a page with none shows nothing.
+ */
+import { useState } from 'react';
+import { useEditor, useStore } from '../context.tsx';
+import { DocRow } from '../nav/DocRow.tsx';
+import { Icon } from '../shell/Icons.tsx';
+import { openDialog } from './dialogs.tsx';
+import { pagesUnder } from './actions.ts';
+
+export function PagesUnder() {
+	const editor = useEditor();
+	const ref = useStore(editor.doc.state, (s) => s.ref);
+	const label = useStore(editor.doc.state, (s) => s.document.title || s.entry.label);
+	const documents = useStore(editor.documents);
+	const [open, setOpen] = useState(true);
+	const collection = editor.site.collections.find((c) => c.name === ref.collection);
+	if (!collection?.nested || ref.path === 'index') return null;
+	const under = pagesUnder(collection.name, ref.path, documents);
+	if (!under.length) return null;
+	const top = ref.path.split('/').length + 1;
+	return (
+		<details className="fgroup pages-under" open={open} data-pages-under={under.length} onToggle={(e) => setOpen((e.currentTarget as HTMLDetailsElement).open)}>
+			<summary>
+				Pages under {label} <span className="s">· {under.length}</span>
+				<Icon name="chev-r" size="sm" />
+			</summary>
+			<div className="in">
+				{under.map((d) => (
+					<DocRow key={d.path} doc={d} className="t" style={{ ['--depth' as string]: d.path.split('/').length - top }} />
+				))}
+				<button type="button" className="linkbtn" data-act="new-page-under" onClick={() => openDialog(editor, { kind: 'new', collection: collection.name, inside: ref.path })}>
+					<Icon name="plus" size="xs" />
+					New page under {label}
+				</button>
+			</div>
+		</details>
+	);
+}

package/src/editor/client/documents/dialogs.tsx

@@ -9,6 +9,7 @@
  *   openDialog(editor, { kind: 'delete', ref })                     Delete page… (the confirmation)
  *   openDialog(editor, { kind: 'in-use', ref, usedOn? })            a shared block still used
  *   openDialog(editor, { kind: 'move', ref })                       Change address… (pre-M7 item 8)
+ *   openDialog(editor, { kind: 'rename' })                          Rename… on the open document
  *   openDialog(editor, { kind: 'replace', key })                    Replace… on a file (M6c G4, media/ReplaceDialog.tsx)
  *
  * Esc closes the dialog only (the editor's own Esc, going up a level, doesn't run).
@@ -37,6 +38,8 @@ export type Dialog =
 	| { kind: 'in-use'; ref: DocRef; usedOn?: CreateDeleteRefusal['usedOn'] }
 	/** Pre-M7 item 8: Change address…, in the language of New page. */
 	| { kind: 'move'; ref: DocRef }
+	/** Rename… on the open document: its title, the name the editor lists it by. */
+	| { kind: 'rename' }
 	/** M6 Decision 9: a submission's Delete…, permanent, so it asks first (the mockup's #submission-delete). */
 	| { kind: 'sub-delete'; id: string; who: string; files: number }
 	/** M6c G4 Decision 9: Replace… on a file in the library (its key). */
@@ -71,6 +74,8 @@ export function DocumentDialogs() {
 			return <InUse docRef={dialog.ref} usedOn={dialog.usedOn} />;
 		case 'move':
 			return <MoveDocument key={`${dialog.ref.collection}/${dialog.ref.path}`} docRef={dialog.ref} />;
+		case 'rename':
+			return <RenameDocument />;
 		case 'sub-delete':
 			return <DeleteSubmission key={dialog.id} {...dialog} />;
 		case 'replace':
@@ -421,6 +426,56 @@ function MoveDocument({ docRef }: { docRef: DocRef }) {
 	);
 }
 
+// ── Rename… ──────────────────────────────────────────────────────────────────
+
+/**
+ * The open document's title: an ordinary edit (kept, and in live mode published, like
+ * any other), so it goes through the document store. The address doesn't change:
+ * that's Change address….
+ */
+function RenameDocument() {
+	const editor = useEditor();
+	const current = useStore(editor.doc.state, (s) => s.document.title || s.entry.label);
+	// Taken by someone else, signed out or deleted since the menu opened: setTitle would do nothing.
+	const readOnly = useStore(editor.access, (a) => a.readOnly);
+	const [name, setName] = useState(current);
+	const next = name.replace(/\s+/g, ' ').trim();
+	const blocked = !next || next === current || readOnly;
+	const confirm = () => {
+		if (blocked) return;
+		editor.doc.setTitle(next);
+		editor.announce(`Renamed to ${next}`);
+		closeDialog(editor);
+	};
+	return (
+		<Frame label="rename">
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					confirm();
+				}}
+			>
+				<h2 id="dlg-h">Rename {current}</h2>
+				<div className="field">
+					<label className="field-label" htmlFor="rn-name">
+						Name
+					</label>
+					<input className="input" id="rn-name" data-autofocus="" value={name} autoComplete="off" onChange={(e) => setName(e.target.value)} />
+					<p className="field-help">What the editor calls it. Its address stays as it is.</p>
+				</div>
+				<div className="acts">
+					<button type="button" className="btn" onClick={() => closeDialog(editor)}>
+						Cancel
+					</button>
+					<button type="submit" className="btn ink" data-act="confirm-rename" disabled={blocked}>
+						Rename
+					</button>
+				</div>
+			</form>
+		</Frame>
+	);
+}
+
 // ── + New shared block ───────────────────────────────────────────────────────
 
 function NewShared() {

package/src/editor/client/editor.ts

@@ -722,9 +722,9 @@ export function createEditor(props: AdminProps, options: { client: boolean }): E
 
 		setSideHidden(hidden) {
 			if ((ui.get().side === 'hidden') === hidden) return;
-			// Hiding it takes focus with it (display:none drops it to the body): the bar's button, which is still there to bring it back.
+			// Hiding it takes focus with it (display:none drops it to the body): the sidebar's button, which stays to bring it back.
 			if (hidden && typeof document !== 'undefined' && document.getElementById('side')?.contains(document.activeElement)) {
-				document.querySelector<HTMLElement>('#bar .side-toggle')?.focus();
+				document.querySelector<HTMLElement>('#editor > .side-toggle')?.focus();
 			}
 			ui.set((state) => withSide(state, hidden));
 			editor.announce(hidden ? 'Sidebar hidden.' : 'Sidebar shown.');

package/src/editor/client/fields/HiddenToggle.tsx

@@ -1,6 +1,6 @@
 /**
  * M9 Decision 7: the page's "Hidden from the site" switch, at the document level under its
- * page fields and above Search and sharing. It's the toggle field's switch (SimpleFields.tsx →
+ * page fields and above SEO. It's the toggle field's switch (SimpleFields.tsx →
  * ToggleField), set through `editor.doc.setHidden`, so it saves and publishes like any edit.
  *
  * - Only on a section builder's page with an address, and never on the home page (`index`),

package/src/editor/client/fields/MediaField.tsx

@@ -120,7 +120,7 @@ function endAltAsk(editor: Editor, slot: string, next: boolean): AltAsk {
 export function ownerOf(editor: Editor, scope: string): { owner: string; back: 'block' | 'document' } {
 	const session = editor.doc.get();
 	// M6: a page's own share image (SEO_SCOPE), at its document level.
-	if (scope === 'seo') return { owner: 'Search and sharing', back: 'document' };
+	if (scope === 'seo') return { owner: 'SEO', back: 'document' };
 	// M6c (G2): a section builder's page fields, at its document level too.
 	if (scope === PAGE_SCOPE) {
 		const collection = editor.site.collections.find((c) => c.name === session.ref.collection);

package/src/editor/client/fields/PageFields.tsx

@@ -1,8 +1,8 @@
 /**
  * A section builder's page fields (M6c G2): the collection's own `fields`, beside the
  * page's blocks (a game's tile details, the header's "side"). One group at the document
- * level, under the block list and above Search and sharing, open by default (they're the
- * page's content, where Search and sharing falls back to the site's defaults). Sidebar
+ * level, under the block list and above SEO, open by default (they're the
+ * page's content, where SEO falls back to the site's defaults). Sidebar
  * only: nothing here is on the page, so nothing is picked from it.
  *
  * Closed, it carries a warning mark when any page field (a group's fields too) is warned

package/src/editor/client/fields/SeoGroup.tsx

@@ -1,5 +1,5 @@
 /**
- * Search and sharing (M6 Decision 13; the mockup's #seo-page, #seo-long, #seo-defaults,
+ * SEO (M6 Decision 13; the mockup's #seo-page, #seo-long, #seo-defaults,
  * #seo-case): a document's own `seo` key, as one collapsed group that says what's set.
  * At the foot of a section-builder page's block list (below Add block), and at the end of
  * a fields document's form. Only on collections with a URL.
@@ -14,7 +14,7 @@
  * The values live in the document store beside the blocks (`SEO_SCOPE`, document-store.ts):
  * clearing the last part removes `seo` from the file, and a file with none is untouched.
  *
- * `SoftText` is also Site Settings' (its Search and sharing defaults).
+ * `SoftText` is also Site Settings' (its SEO defaults).
  */
 import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import { media as mediaField } from '../../../fields.ts';
@@ -167,7 +167,7 @@ export function SeoGroup() {
 	return (
 		<details className="fgroup seo" open={open} data-seo="" onToggle={(e) => setOpen((e.currentTarget as HTMLDetailsElement).open)}>
 			<summary>
-				Search and sharing <span className="s">· {seoSummary(session.document.seo)}</span>
+				SEO <span className="s">· {seoSummary(session.document.seo)}</span>
 				<Icon name="chev-r" size="sm" />
 			</summary>
 			<div className="in">

package/src/editor/client/nav/DocRow.tsx

@@ -31,8 +31,6 @@ export function DocRow(props: {
 	crumb?: string;
 	className?: string;
 	style?: CSSProperties;
-	/** Before the icon: the tree's chevron column. */
-	lead?: ReactNode;
 	/** After the meta: a bubbled mark for a closed parent. */
 	extra?: ReactNode;
 	/** Called after the document starts opening (the switcher closes itself). */
@@ -72,7 +70,6 @@ export function DocRow(props: {
 				title={doc.warning?.message}
 				onClick={open}
 			>
-				{props.lead}
 				<Icon name={docIcon(collection)} />
 				<span className="nm">
 					{props.crumb ? <span className="crumb">{props.crumb} / </span> : null}

package/src/editor/client/pane/levels/CollectionLevel.tsx

@@ -52,7 +52,7 @@ export function CollectionLevel() {
 					back={{ label: 'Back to documents', onClick: () => editor.goTo('documents') }}
 					title={collection.label}
 					chips={<span className="n-chip">{docs.length}</span>}
-					sub={shared ? undefined : collection.urlBase === null ? PAGELESS_SUB : <span className="mono">{`${editor.site.host}${collection.urlBase}…`}</span>}
+					sub={shared ? undefined : collection.urlBase === null ? PAGELESS_SUB : <span className="mono">{`${collection.urlBase}…`}</span>}
 					menu={
 						<button type="button" className="btn sm" data-act="new-document" disabled={readOnly} onClick={create}>
 							<Icon name="plus" size="sm" />

package/src/editor/client/pane/levels/DocumentLevel.tsx

@@ -18,6 +18,7 @@ import { Picker } from '../../block-list/Picker.tsx';
 import { CurrentHead, DocumentsTab, GlobalNotes, parentLabel, RecentStrip, Trail } from '../parts.tsx';
 import { DocNotices, ReadOnlyChip } from '../../live/notices.tsx';
 import { DocMenu } from '../../documents/DocMenu.tsx';
+import { PagesUnder } from '../../documents/PagesUnder.tsx';
 import { FieldsDocumentLevel, SettingsLevel, SharedDocumentLevel } from './FormLevel.tsx';
 import { SeoGroup } from '../../fields/SeoGroup.tsx';
 import { HiddenToggle } from '../../fields/HiddenToggle.tsx';
@@ -55,14 +56,15 @@ function SectionsLevel() {
 					back={{ label: 'Back to documents', onClick: () => editor.goTo('documents') }}
 					crumb={collection?.nested ? parentLabel(ref, documents) : collection?.label}
 					title={title}
-					chips={
+					sub={
 						<>
-							<span className="chip kind">{collection?.nested ? 'Page' : (collection?.label ?? ref.collection)}</span>
-							<ReadOnlyChip />
+							{/* The crumb and the tabs say what kind of document it is; only its state gets a chip, under the title so it never clips. */}
 							{isNew ? <span className="chip waiting">New</span> : null}
+							<ReadOnlyChip />
+							{/* The path alone: the host is the same on every page. */}
+							<span className="mono">{url || '/'}</span>
 						</>
 					}
-					sub={<span className="mono">{`${editor.site.host}${url === '/' ? '' : url}`}</span>}
 					menu={<DocMenu label="Page actions" />}
 				/>
 			</Trail>
@@ -84,8 +86,9 @@ function SectionsLevel() {
 				<PageFields />
 				{/* M9 Decision 7: hidden from the site, or not. */}
 				<HiddenToggle />
-				{/* M6 Decision 13: the page's own Search and sharing, under its blocks. */}
+				{/* M6 Decision 13: the page's own SEO, under its blocks. */}
 				<SeoGroup />
+				<PagesUnder />
 			</div>
 			<RecentStrip />
 		</>

package/src/editor/client/pane/levels/DocumentsLevel.tsx

@@ -167,15 +167,16 @@ function TreeNode({ row, collection }: { row: TreeRow; collection: EditorCollect
 					title={`${row.label} has no page of its own`}
 					onClick={() => editor.toggleGroup(row.key)}
 				>
-					<span className="tw" aria-hidden="true">
-						<Icon name="chev-r" size="xs" />
-					</span>
 					<Icon name="folder" />
 					<span className="nm">{row.label}</span>
 					<span className="meta">
 						{/* M4: presence and waiting dots inside, bubbled up while it's closed. */}
 						{editor.mode === 'live' && !row.open ? <Bubble files={row.under.map((d) => d.file)} /> : <span data-slot="bubble" hidden />}
 					</span>
+					{/* The twisty at the row's end, as the parent pages' is: icons line up with the rest of the sidebar. */}
+					<span className="tw" aria-hidden="true">
+						<Icon name="chev-r" size="xs" />
+					</span>
 				</button>
 				<GroupMenu row={row} collection={collection} />
 			</div>
@@ -183,12 +184,11 @@ function TreeNode({ row, collection }: { row: TreeRow; collection: EditorCollect
 	}
 	return (
 		<div className="tnode">
-			<DocRow doc={row.doc} className="t" style={depth} lead={<span className="tw" aria-hidden="true" />} extra={row.parent && !row.open ? editor.mode === 'live' ? <Bubble files={row.under.map((d) => d.file)} /> : <span data-slot="bubble" hidden /> : null} />
+			<DocRow doc={row.doc} className={row.parent ? 't has-kids' : 't'} style={depth} extra={row.parent && !row.open ? editor.mode === 'live' ? <Bubble files={row.under.map((d) => d.file)} /> : <span data-slot="bubble" hidden /> : null} />
 			{row.parent ? (
 				<button
 					type="button"
 					className="twisty"
-					style={depth}
 					data-group={row.key}
 					aria-expanded={row.open}
 					aria-label={`${row.open ? 'Hide' : 'Show'} the pages under ${row.doc.label}`}

package/src/editor/client/pane/levels/FormLevel.tsx

@@ -19,7 +19,7 @@
  *   no alt and no focal point), then the site's own settings.
  *   No page of its own: the stage keeps the last page, dimmed (shell/Stage.tsx).
  *
- * M6: the case study's "Search and sharing" group ends its form (fields/SeoGroup.tsx), and
+ * M6: the case study's "SEO" group ends its form (fields/SeoGroup.tsx), and
  * Site Settings gains its defaults, the Google tag and Form emails (settings-m6.tsx).
  */
 import { Fragment, useMemo, useState, type ReactNode } from 'react';
@@ -159,7 +159,6 @@ export function FieldsDocumentLevel() {
 	const what = singular(collection);
 	const chips = (
 		<>
-			<span className="chip kind">{titleCase(what)}</span>
 			{isNew ? <span className="chip waiting">New</span> : null}
 			<ReadOnlyChip />
 		</>
@@ -178,7 +177,7 @@ export function FieldsDocumentLevel() {
 						<>
 							{chips}
 							{/* M6c (G1): a document with no page of its own has no address to show. */}
-							{collection.urlBase === null ? null : <span className="mono">{`${editor.site.host}${url}`}</span>}
+							{collection.urlBase === null ? null : <span className="mono">{url || '/'}</span>}
 						</>
 					}
 					menu={<DocMenu label={`${titleCase(what)} actions`} />}
@@ -203,7 +202,7 @@ export function FieldsDocumentLevel() {
 							);
 						})}
 					</FieldHostProvider>
-					{/* M6 Decision 13: Search and sharing ends a fields document's form. */}
+					{/* M6 Decision 13: SEO ends a fields document's form. */}
 					<SeoGroup />
 				</FormFields>
 			</div>
@@ -245,14 +244,13 @@ export function SharedDocumentLevel() {
 					back={{ label: 'Back to shared blocks', onClick: () => editor.openCollection('shared') }}
 					crumb="Shared blocks"
 					title={title}
-					chips={
+					sub={
 						<>
-							<span className="chip shared">Shared</span>
 							{isNew ? <span className="chip waiting">New</span> : null}
 							<ReadOnlyChip />
+							<span>{`${schema?.label ?? 'Block'} · ${usedLabel(n)}`}</span>
 						</>
 					}
-					sub={`${schema?.label ?? 'Block'} · ${usedLabel(n)}`}
 					menu={<DocMenu label="Shared block actions" />}
 				/>
 			</Trail>
@@ -435,7 +433,8 @@ export function SettingsLevel() {
 											</span>
 											<span className="t">
 												<b>{value}</b>
-												{why ? <small style={{ color: 'var(--status-warning)' }}>Lets nobody in</small> : <small>{domain ? 'A whole domain' : 'One person'}</small>}
+												{/* The tile already says which kind it is: only a domain gets a line, saying who it lets in. */}
+												{why ? <small style={{ color: 'var(--status-warning)' }}>Lets nobody in</small> : domain ? <small>Everyone at {value.trim().slice(1)}</small> : null}
 											</span>
 											<button type="button" className="ib" aria-label={`Remove ${value}`} disabled={readOnly} onClick={() => remove(i)}>
 												<Icon name="x" size="sm" />

package/src/editor/client/pane/levels/SettingsM6.tsx

@@ -2,7 +2,7 @@
  * Site Settings' publish-time keys (M6 Decision 14; the mockup's #settings-m6), after
  * Editor branding. Unlike the sections above they act on the live site.
  *
- * - **Search and sharing**: the defaults (`seo`): a title (the home page's, and the
+ * - **Default SEO**: the defaults (`seo`): a title (the home page's, and the
  *   fallback's brand), a description, a share image with no alt input. M5a's soft limits.
  * - **Google tag** (`googleTag`, Decision 16): one ID, checked as it's typed with the
  *   server's own rule (seo.ts → googleTagKind). A pasted Google script, or anything else
@@ -37,7 +37,7 @@ export function SettingsM6({ data }: { data: Record<string, unknown> }) {
 	return (
 		<>
 			<section className="set-sec" data-sec="seo">
-				<h3>Search and sharing</h3>
+				<h3>Default SEO</h3>
 				<p className="lead">Defaults for pages that don’t set their own.</p>
 				<SoftText
 					scope={host.scope}

package/src/editor/client/pane/parts.tsx

@@ -23,22 +23,21 @@ export function Trail({ children }: { children: ReactNode }) {
 }
 
 /** A stacked level tab: the level you came from (`.lv`). */
-export function LevelTab({ name, kind, count, onClick }: { name: string; kind: string; count?: string; onClick: () => void }) {
+export function LevelTab({ name, kind, count, onClick }: { name: string; kind?: string; count?: string; onClick: () => void }) {
 	return (
 		<button type="button" className="lv" onClick={onClick}>
 			<b>{name}</b>
-			<span>· {kind}</span>
+			{kind ? <span>· {kind}</span> : null}
 			{count !== undefined ? <span className="n">{count}</span> : null}
 		</button>
 	);
 }
 
-/** The documents level's tab, for the levels below it. */
+/** The documents level's tab, for the levels below it: the site's name is enough. */
 export function DocumentsTab() {
 	const editor = useEditor();
-	const count = useStore(editor.documents, (d) => d.length);
 	const name = useStore(editor.brand, (b) => b.name);
-	return <LevelTab name={name} kind="Documents" count={String(count)} onClick={() => editor.goTo('documents')} />;
+	return <LevelTab name={name} onClick={() => editor.goTo('documents')} />;
 }
 
 /** The current level's header (`.cur`): back, a crumb, the title, chips, a sub line, a menu and extras. */
@@ -179,8 +178,8 @@ export function RecentStrip() {
 		.slice(0, 5);
 	return (
 		<div className="side-foot">
-			<span className="lbl">Recent</span>
-			<div className="rchips">
+			{/* No visible label: the chips speak for themselves. Screen readers still hear "Recent". */}
+			<div className="rchips" role="group" aria-label="Recent">
 				{items.map((d) => (
 					<button
 						key={docId(d)}

package/src/editor/client/shell/App.tsx

@@ -17,6 +17,7 @@ import { IconSprite } from './Icons.tsx';
 import { NarrowNote } from './NarrowNote.tsx';
 import { Popovers } from './Popovers.tsx';
 import { SignedOutModal } from '../live/session.tsx';
+import { SideToggle } from './SideToggle.tsx';
 import { Stage } from './Stage.tsx';
 import { DocumentDialogs } from '../documents/dialogs.tsx';
 import { Toast } from './Toast.tsx';
@@ -71,6 +72,7 @@ export function EditorApp({ editor }: { editor: Editor }) {
 			<IconSprite />
 			<div id="app" data-screen="editor">
 				<div className="editor" id="editor" data-side={sideHidden ? 'hidden' : undefined}>
+					<SideToggle />
 					<Pane />
 					<Stage />
 					<Bar />

package/src/editor/client/shell/Bar.tsx

@@ -1,6 +1,7 @@
 /**
  * The one bar, dark, along the bottom (the mockup's renderBar): the brand slots and
- * the document switcher's trigger on the left; the width toggle with its scale
+ * the document switcher's trigger on the left (the site's name is the sidebar's,
+ * at its top; so is the sidebar's button, SideToggle.tsx); the width toggle with its scale
  * under the preview; the keep state on the right. In live mode (M4) the waiting
  * count with Publish (live/publish.tsx) and the signed-in avatar (live/session.tsx)
  * follow it, and a locked document's trigger has a lock; in local mode their places
@@ -31,7 +32,6 @@ export function Bar() {
 	const documents = useStore(editor.documents);
 	const scale = useFrameScale(width);
 	const veil = useStore(editor.access, (a) => a.veil);
-	const sideHidden = useStore(editor.ui, (u) => u.side === 'hidden');
 	const tooLong = warnings.filter((w) => w.tooLong).length;
 	const opening = viewOpening ?? renderOpening;
 	const openingLabel = opening ? (documents.find((d) => docId(d) === docId(opening))?.label ?? opening.path) : null;
@@ -63,8 +63,6 @@ export function Bar() {
 				<span className="logo-slot" title={brand.name}>
 					<BrandMark />
 				</span>
-				<span className="bar-name">{brand.name}</span>
-				<span className="bar-sep" aria-hidden="true" />
 				<button
 					type="button"
 					className="docbtn"
@@ -78,18 +76,6 @@ export function Bar() {
 					<Icon name="chev-u" size="xs" />
 					<kbd>⌘K</kbd>
 				</button>
-				<button
-					type="button"
-					className="ib side-toggle"
-					aria-controls="side"
-					aria-expanded={!sideHidden}
-					aria-keyshortcuts="Meta+Backslash Control+Backslash"
-					aria-label={sideHidden ? 'Show the sidebar' : 'Hide the sidebar'}
-					title={sideHidden ? 'Show the sidebar (⌘\\)' : 'Hide the sidebar (⌘\\)'}
-					onClick={() => editor.setSideHidden(!sideHidden)}
-				>
-					<Icon name="sidebar" />
-				</button>
 			</div>
 			<div className="bar-r">
 				<div className="bar-a">{note}</div>

package/src/editor/client/shell/Icons.tsx

@@ -40,6 +40,8 @@ const SYMBOLS = [
 	'<symbol id="i-target" viewBox="0 0 16 16"><circle cx="8" cy="8" r="5.5"/><circle cx="8" cy="8" r="1.6" fill="currentColor"/></symbol>',
 	'<symbol id="i-history" viewBox="0 0 16 16"><path d="M2.5 8a5.5 5.5 0 1 0 1.6-3.9L2.5 5.7"/><path d="M2.5 2.5v3.2h3.2M8 5v3l2 1.3"/></symbol>',
 	'<symbol id="i-signout" viewBox="0 0 16 16"><path d="M6 2.5H3v11h3M10 5l3 3-3 3M13 8H6"/></symbol>',
+	// Rename….
+	'<symbol id="i-pencil" viewBox="0 0 16 16"><path d="M10.8 2.7a1.6 1.6 0 0 1 2.3 2.3L5.5 12.6l-3 .9.9-3z"/><path d="m9.6 3.9 2.5 2.5"/></symbol>',
 	// Pre-M7 item 8: Change address…, and a redirect's "from → to".
 	'<symbol id="i-arrow-r" viewBox="0 0 16 16"><path d="M2.5 8h11M9.5 4l4 4-4 4"/></symbol>',
 	'<symbol id="i-copy" viewBox="0 0 16 16"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2"/></symbol>',

package/src/editor/client/shell/SideToggle.tsx

@@ -0,0 +1,26 @@
+/**
+ * The sidebar's hide and show button (⌘\): one button for both states, so focus stays
+ * on it either way. Shown, it sits in the sidebar's top row at its right end; hidden,
+ * it sits at the top left of the preview (editor.css places it).
+ */
+import { useEditor, useStore } from '../context.tsx';
+import { Icon } from './Icons.tsx';
+
+export function SideToggle() {
+	const editor = useEditor();
+	const sideHidden = useStore(editor.ui, (u) => u.side === 'hidden');
+	return (
+		<button
+			type="button"
+			className="ib side-toggle"
+			aria-controls="side"
+			aria-expanded={!sideHidden}
+			aria-keyshortcuts="Meta+Backslash Control+Backslash"
+			aria-label={sideHidden ? 'Show the sidebar' : 'Hide the sidebar'}
+			title={sideHidden ? 'Show the sidebar (⌘\\)' : 'Hide the sidebar (⌘\\)'}
+			onClick={() => editor.setSideHidden(!sideHidden)}
+		>
+			<Icon name="sidebar" />
+		</button>
+	);
+}

package/src/editor/styles/editor.css

@@ -29,7 +29,7 @@ kbd{display:inline-block;min-width:18px;padding:2px 4px;border:1px solid var(--b
 
 /* ══ Editor shell: one left pane, the preview, one bar along the bottom ══ */
 .editor{--side-col:var(--sidebar-w);position:absolute;inset:0;display:grid;grid-template-columns:var(--side-col) minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--bar-h)}
-/* The sidebar hidden (the bar's button, ⌘\\): its column goes, the preview takes the width (the stage rescales itself). The bar keeps its shape. */
+/* The sidebar hidden (its button, ⌘\\): its column goes, the preview takes the width (the stage rescales itself). The bar keeps its shape. */
 .editor[data-side="hidden"]{--side-col:0px}
 .editor[data-side="hidden"]>.side{display:none}
 @container app (min-width:1680px){.editor{--sidebar-w:360px}}
@@ -42,6 +42,17 @@ kbd{display:inline-block;min-width:18px;padding:2px 4px;border:1px solid var(--b
 .lv:hover{background:var(--surface-hover);color:var(--text)}
 .lv b{color:var(--text);font-weight:var(--weight-semibold);overflow:hidden;text-overflow:ellipsis}
 .lv .n{margin-left:auto;font-size:var(--text-xs);color:var(--text-subtle)}
+/* The sidebar's button (SideToggle.tsx): one button, at the right end of the sidebar's top row, so the first tab (or a header with no tabs above) leaves room for it. Hidden, it moves to the preview's top left. */
+.side-toggle{position:absolute;top:var(--space-3);left:calc(var(--side-col) - var(--space-4) - 28px);z-index:3}
+/* Not .ib's pressed look: shown is its resting state. */
+.editor>.side-toggle[aria-expanded="true"]{background:none;color:var(--icon)}
+.editor>.side-toggle[aria-expanded="true"]:hover{background:var(--surface-hover);color:var(--text)}
+.editor:not([data-side="hidden"]):has(.side-level:not([hidden]) > .trail > .cur:first-child)>.side-toggle{top:var(--space-2)}
+.editor:not([data-side="hidden"]):has(.side-level:not([hidden]) > .trail > .cur:first-child .sub)>.side-toggle{top:calc(var(--space-2) + 3px)}
+.trail > .lv:first-child{width:calc(100% - 2 * var(--space-4) - 28px - var(--space-2))}
+.trail > .cur:first-child .cur-row{padding-right:calc(28px + var(--space-2))}
+.editor[data-side="hidden"]>.side-toggle{top:var(--space-2);left:var(--space-2);z-index:var(--z-bar);border-color:var(--border-strong);background:var(--surface);box-shadow:var(--shadow-pop)}
+.editor[data-side="hidden"]>.side-toggle:hover{background:var(--surface-hover)}
 .cur{position:relative;padding:var(--space-2) var(--space-4) var(--space-2-5);background:var(--surface);border-top:1px solid var(--border)}
 /* The header and the body are one surface: the header spans the pane, with one hairline (the trail's) under it; with no tabs above, no strip either. */
 .trail:has(> .cur:first-child){padding-top:0}
@@ -52,10 +63,10 @@ kbd{display:inline-block;min-width:18px;padding:2px 4px;border:1px solid var(--b
 .cur-title .t span{overflow:hidden;text-overflow:ellipsis}
 .cur-title .t .crumbp{color:var(--text-muted);font-weight:var(--weight-medium)}
 .cur-title .sub{margin-top:2px;font-size:var(--text-xs);color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-/* A sub line with chips (a case study's kind, New, Read-only): the chips stay whole, the address gives way. */
+/* A sub line with chips (New, Read-only): the chips stay whole, the address gives way. */
 .cur-title .sub:has(> .chip){display:flex;align-items:center;gap:var(--space-1-5)}
 .cur-title .sub > .chip{flex:none}
-.cur-title .sub > .mono{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.cur-title .sub > :not(.chip){min-width:0;overflow:hidden;text-overflow:ellipsis}
 .ib{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;padding:0;border:1px solid transparent;border-radius:var(--radius-md);background:none;color:var(--icon);transition:background var(--dur-fast),color var(--dur-fast)}
 .ib:hover{background:var(--surface-hover);color:var(--text)}
 .ib.boxed{border-color:var(--border-strong);background:var(--surface)}
@@ -66,7 +77,6 @@ kbd{display:inline-block;min-width:18px;padding:2px 4px;border:1px solid var(--b
 .side-body:hover,.side-body[data-scrolling]{scrollbar-color:var(--border-hover) transparent}
 .side-body.flush{padding-top:0}
 .side-foot{flex:none;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-top:1px solid var(--border);background:var(--surface-sunken);overflow:hidden}
-.side-foot .lbl{flex:none;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-subtle)}
 .rchips{display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none}
 .rchip{display:inline-flex;align-items:center;gap:var(--space-1-5);height:24px;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);font-size:var(--text-sm);color:var(--text);white-space:nowrap;flex:none}
 .rchip:hover{border-color:var(--border-hover)}
@@ -99,15 +109,16 @@ kbd{display:inline-block;min-width:18px;padding:2px 4px;border:1px solid var(--b
 .drow .nm .crumb{color:var(--text-subtle);font-weight:var(--weight-medium)}
 /* Pages tree (M3 Decision 8): children indent one step; no connecting lines and no rails (Decision 10) */
 .tnode{position:relative}
+/* No twisty column: a row's icon sits where the site-wide rows' do, and the twisty is at the row's end (the parent page's own button; inside a group's row). A group's menu shows to its left on hover. */
 .drow.t{padding-left:calc(var(--space-2) + var(--depth,0) * var(--tree-indent))}
-.drow .tw{flex:none;display:inline-grid;place-items:center;width:var(--tree-twisty);color:var(--icon)}
-.twisty{position:absolute;top:50%;left:calc(var(--space-2) + var(--depth,0) * var(--tree-indent) - 3px);translate:0 -50%;display:grid;place-items:center;width:calc(var(--tree-twisty) + 6px);height:calc(var(--tree-twisty) + 6px);padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--icon);transition:background var(--dur-fast),color var(--dur-fast)}
-.twisty:hover{background:var(--surface-pressed);color:var(--text)}
+.drow.t.has-kids{padding-right:calc(var(--space-1) + var(--tree-twisty) + 6px)}
+.drow.is-group{cursor:default;padding-right:calc(var(--space-1) + var(--tree-twisty) + 6px + 26px)}
+.twisty,.drow.is-group .tw{position:absolute;top:calc(var(--row-h) / 2);right:var(--space-1);translate:0 -50%;display:grid;place-items:center;width:calc(var(--tree-twisty) + 6px);height:calc(var(--tree-twisty) + 6px);padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--icon);transition:background var(--dur-fast),color var(--dur-fast)}
+.twisty:hover,.drow.is-group:hover .tw{background:var(--surface-pressed);color:var(--text)}
 .twisty .i,.drow.is-group .tw .i{transition:rotate var(--dur-fast) var(--ease-out)}
 .twisty[aria-expanded="true"] .i,.drow.is-group[aria-expanded="true"] .tw .i{rotate:90deg}
-.drow.is-group{cursor:default;padding-right:34px}
-/* A group row's own menu (M5a: "Create a page at /services"), at the row's end */
-.row-more{position:absolute;right:3px;top:15px;translate:0 -50%;width:26px;height:26px;opacity:0;transition:opacity var(--dur-fast)}
+/* A group row's own menu (M5a: "Create a page at /services"), left of its twisty */
+.row-more{position:absolute;right:calc(var(--space-1) + var(--tree-twisty) + 6px);top:calc(var(--row-h) / 2);translate:0 -50%;width:26px;height:26px;opacity:0;transition:opacity var(--dur-fast)}
 .tnode:hover>.row-more,.tnode:focus-within>.row-more,.row-more[aria-expanded="true"]{opacity:1}
 .tnode>.menu{right:0;top:calc(var(--row-h) + 2px)}
 /* A row per collection on the documents level (M3 Decision 9): name, bubbled dots, count, chevron */
@@ -215,7 +226,7 @@ details.fgroup[open]>summary .i{rotate:90deg}
 details.fgroup>.in{padding:0 var(--space-4) var(--space-2)}
 details.fgroup>summary .wmark{margin-left:var(--space-1)}
 details.fgroup>summary .wmark .i{margin-left:0;rotate:none}
-/* M9 Decision 7: the page's "Hidden from the site" switch, between its page fields and Search and sharing. */
+/* M9 Decision 7: the page's "Hidden from the site" switch, between its page fields and SEO. */
 .page-hidden{margin-top:var(--space-4)}
 /* A group field (group()): Page details' section, among a form's fields; inside a list item it keeps to the item's width. */
 details.fgroup.group-field{margin-block:var(--space-3)}
@@ -289,7 +300,6 @@ details.fgroup.group-field+details.fgroup.group-field{margin-top:calc(-1 * var(-
 .btn.ghost{background:none;border-color:transparent;box-shadow:none}
 .btn:disabled{background:var(--surface-sunken);border-color:var(--border);color:var(--text-subtle);box-shadow:none;cursor:not-allowed;filter:none}
 .chip{display:inline-flex;align-items:center;gap:var(--space-1);height:20px;padding:0 var(--space-1-5);border-radius:var(--radius-pill);background:var(--surface-pressed);color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap}
-.chip.kind{height:18px;border-radius:var(--radius-xs);padding:0 5px;font-size:10px;letter-spacing:var(--tracking-caps);text-transform:uppercase}
 .chip.select{background:var(--select-wash);color:var(--select-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--select) 40%,transparent)}
 .chip.phone{background:var(--phone-wash);color:var(--phone-strong);box-shadow:inset 0 0 0 1px var(--phone-border)}
 .chip.warn{background:var(--status-warning-wash);color:var(--status-warning);box-shadow:inset 0 0 0 1px var(--status-warning-border)}
@@ -331,18 +341,14 @@ details.fgroup.group-field+details.fgroup.group-field{margin-top:calc(-1 * var(-
 /* ── The one bar, dark, along the bottom (4d) ── */
 .bar{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);background:var(--bar-bg);color:var(--bar-text);border-top:1px solid var(--bar-border);z-index:var(--z-bar);font-size:var(--text-base);--ring:var(--bar-bg)}
 .bar :focus-visible{outline-color:var(--focus-on-dark)}
-.bar-l{display:flex;align-items:center;gap:var(--space-2);min-width:0;padding:0 var(--space-3);border-right:1px solid var(--bar-border)}
+.bar-l{display:flex;align-items:center;gap:var(--space-2);min-width:0;padding:0 var(--space-3)}
 .logo-slot{display:grid;place-items:center;width:26px;height:26px;flex:none;padding:2px;border-radius:var(--radius-sm);background:var(--bar-control)}
 .logo-slot svg,.si-logo svg{display:block;width:100%;height:100%}
-.bar-name{font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
-.bar-sep{width:1px;height:18px;flex:none;background:var(--bar-border)}
 .docbtn{display:inline-flex;align-items:center;gap:var(--space-1-5);min-width:0;height:30px;padding:0 var(--space-2);border:0;border-radius:var(--radius-md);background:var(--bar-raised);color:var(--bar-text);font-weight:var(--weight-semibold);transition:background var(--dur-fast)}
 .docbtn:hover,.docbtn[aria-expanded="true"]{background:var(--bar-raised-hover)}
 .docbtn .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .docbtn .i{color:var(--bar-muted)}
 .docbtn kbd{margin-left:var(--space-1);border-color:var(--bar-border-strong);background:none;color:var(--bar-muted)}
-.side-toggle{flex:none;margin-left:auto;color:var(--bar-muted)}
-.side-toggle:hover{background:var(--bar-raised);color:var(--bar-text)}
 .bar-r{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center;gap:var(--space-3);min-width:0;padding:0 var(--space-3)}
 .bar-a{display:flex;justify-content:flex-end;min-width:0;overflow:hidden}
 .bar-c{display:flex;align-items:center;gap:var(--space-2)}
@@ -392,7 +398,7 @@ details.fgroup.group-field+details.fgroup.group-field{margin-top:calc(-1 * var(-
 .me{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none}
 .me .av{width:26px;height:26px;font-size:11px}
 .me[aria-expanded="true"] .av,.me:hover .av{box-shadow:0 0 0 2px var(--bar-bg),0 0 0 4px var(--bar-border-hover)}
-@container app (max-width:1199px){.seg .w,.pub .wt .avs,.bar-name{display:none}}
+@container app (max-width:1199px){.seg .w,.pub .wt .avs{display:none}}
 @media (prefers-reduced-motion:reduce){.keep .pulse,.pub .prog::after{animation:none}}
 
 /* ── Popovers (they open upward from the bar) ── */

package/src/editor/styles/levels/m6.css

@@ -1,4 +1,4 @@
-/* M6: the inbox (Site-wide → Submissions, a submission on a sheet over the dimmed page), Search and sharing, and
+/* M6: the inbox (Site-wide → Submissions, a submission on a sheet over the dimmed page), SEO, and
    Site Settings' publish-time fields (notes/mockups/m2-editor.html, lifted from its M6 CSS as is). */
 /* ── M6: Submissions. A level of its own under Site-wide; a submission opens in the stage, on a sheet over the dimmed
    page. Unread is a dot and a heavier name; the open one is the selection's wash and ring. Never a side rail. ── */
@@ -63,7 +63,7 @@
 .frow:hover>.i{color:var(--text)}
 @container (max-width:600px){.sub-fields{grid-template-columns:1fr;gap:var(--space-0-5) 0}.sub-fields dd{margin-bottom:var(--space-2-5)}.sub-head,.sub-body{padding-left:var(--space-4);padding-right:var(--space-4)}}
 
-/* ── M6: Search and sharing, and Site Settings' publish-time fields. A soft limit is amber and blocks nothing ── */
+/* ── M6: SEO, and Site Settings' publish-time fields. A soft limit is amber and blocks nothing ── */
 .field-meta.soft-over{color:var(--status-warning);font-weight:var(--weight-semibold)}
 .field-ok{display:flex;align-items:center;gap:var(--space-1);margin-top:var(--space-1-5);font-size:var(--text-xs);color:var(--text-muted)}
 .field-ok .i{color:var(--status-live)}
@@ -73,10 +73,15 @@
 .gtag .field-warn>span{display:flex;flex-direction:column;align-items:flex-start}
 .rcpt .ed.is-confirm .tile{background:var(--surface);color:var(--status-warning-dot)}
 details.fgroup.seo{margin-top:var(--space-5)}
-/* M6c (G2): a section builder's page fields, above Search and sharing */
+/* M6c (G2): a section builder's page fields, above SEO */
 details.fgroup.page-fields{margin-top:var(--space-5)}
 details.fgroup.page-fields+details.fgroup.seo{margin-top:0}
 details.fgroup.seo>.in{padding-top:var(--space-1)}
 details.fgroup.seo>summary{white-space:nowrap}
 details.fgroup.seo>summary .s{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
+/* A page's own pages (PagesUnder.tsx), under SEO: the tree's rows, then New page under it */
+details.fgroup.pages-under>summary{white-space:nowrap}
+details.fgroup.pages-under>summary .s{flex:1;min-width:0}
+details.fgroup.pages-under>.in{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--space-4) var(--space-3)}
+details.fgroup.pages-under>.in>.linkbtn{align-self:flex-start;margin:var(--space-2) 0 0 var(--space-2)}
 

package/src/editor/styles/tokens.css

@@ -97,8 +97,8 @@
   --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.45,0,.25,1);
   /* Layout */
   --bar-h:44px; --sidebar-w:320px; --row-h:30px; --control-h:32px; --control-h-sm:26px; --pop-gap:8px; --frame-pad:16px;
-  /* Pages tree (M3 Decision 8): the twisty's column, and one step of indent (the twisty plus the row's gap, so a child's icon sits under its parent's name) */
-  --tree-twisty:16px; --tree-indent:24px;
+  /* Pages tree (M3 Decision 8): the twisty (at a row's end), and one step of indent (a child's icon starts where its parent's ends) */
+  --tree-twisty:16px; --tree-indent:16px;
   /* Media (M5b): a slot's thumbnail, the library's grid (columns at the sidebar's width), the focal point's ring */
   --thumb-w:64px; --thumb-h:48px; --lib-cols:3; --focal-ring:22px; --focal-max-h:220px;
   /* The grid (M6c G5): a card's narrowest width (the stage fits as many as it can), the gaps, the card's own padding,