caracms 0.3.1 → 0.3.2

package/package.json

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

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

@@ -0,0 +1,158 @@
+/**
+ * New page's and Change address…'s "Inside" (Urban Return, 2026-10-24): a field that shows
+ * where the page goes and opens a searchable tree of every group and page in place of a
+ * select, which stopped working once every page was offered.
+ *
+ * - **Closed:** the chosen place's whole name (`Services › Advisory`) and the address a page
+ *   inside it starts with.
+ * - **Open:** a find field over the tree (insideOptions' order: what holds pages first at each
+ *   level), each row its own name, indented, with its address. Typing filters by name or
+ *   address, every word, and shows each hit by its whole name. "New group…" is always last.
+ * - **Keys:** ↑ ↓ move, Enter picks, Esc closes the picker only (the dialog's Frame takes Esc
+ *   first and, while `[data-inside-open]` is in it, sends INSIDE_CLOSE instead of closing), Tab
+ *   closes it.
+ */
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent } from 'react';
+import { Icon } from '../shell/Icons.tsx';
+import type { InsideOption } from './actions.ts';
+
+/** The event Frame sends an open picker on Esc. */
+export const INSIDE_CLOSE = 'caracms:inside-close';
+
+const crumbs = (o: InsideOption) => o.label.split(' / ').join(' › ');
+
+export function InsidePicker(props: { id: string; options: readonly InsideOption[]; value: string; newGroup: string; onChange: (value: string) => void }) {
+	const { id, options, value, newGroup } = props;
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState('');
+	const [active, setActive] = useState(0);
+	const trigger = useRef<HTMLButtonElement>(null);
+	const root = useRef<HTMLDivElement>(null);
+	const list = useRef<HTMLDivElement>(null);
+	const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+	const rows = useMemo(() => {
+		const hits = words.length ? options.filter((o) => words.every((w) => o.label.toLowerCase().includes(w) || o.base.toLowerCase().includes(w))) : options;
+		return [...hits.map((o) => ({ value: o.path, option: o })), { value: newGroup, option: null }];
+	}, [options, newGroup, words.join(' ')]);
+	const chosen = options.find((o) => o.path === value);
+	const close = (focus: boolean) => {
+		setOpen(false);
+		setQuery('');
+		if (focus) trigger.current?.focus();
+	};
+	const pick = (next: string) => {
+		props.onChange(next);
+		close(true);
+	};
+	// Opening starts on what's chosen; a new search starts at the top.
+	useEffect(() => {
+		if (open) setActive(Math.max(0, rows.findIndex((r) => r.value === value)));
+	}, [open]);
+	useEffect(() => {
+		if (open && query) setActive(0);
+	}, [query]);
+	useEffect(() => {
+		const el = root.current;
+		if (!open || !el) return;
+		const onClose = () => close(true);
+		el.addEventListener(INSIDE_CLOSE, onClose);
+		return () => el.removeEventListener(INSIDE_CLOSE, onClose);
+	}, [open]);
+	useEffect(() => {
+		list.current?.querySelector(`#${id}-o-${active}`)?.scrollIntoView({ block: 'nearest' });
+	}, [active, open, id]);
+	const onKey = (event: KeyboardEvent<HTMLInputElement>) => {
+		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+			event.preventDefault();
+			const step = event.key === 'ArrowDown' ? 1 : -1;
+			setActive((a) => Math.min(rows.length - 1, Math.max(0, a + step)));
+		} else if (event.key === 'Enter') {
+			event.preventDefault();
+			const row = rows[active];
+			if (row) pick(row.value);
+		} else if (event.key === 'Tab') {
+			close(false);
+		}
+	};
+	return (
+		<div ref={root} className="inside-pick" data-inside-open={open ? '' : undefined}>
+			<button
+				ref={trigger}
+				type="button"
+				className="input inside-btn"
+				id={id}
+				aria-haspopup="listbox"
+				aria-expanded={open}
+				data-inside-value={value === newGroup ? '__new' : value}
+				// While open, keep focus in the find field so this click closes it (and doesn't blur-close, then reopen).
+				onMouseDown={(e) => open && e.preventDefault()}
+				onClick={() => (open ? close(true) : setOpen(true))}
+			>
+				<span className="nm">{value === newGroup ? 'New group…' : chosen ? crumbs(chosen) : 'Top level'}</span>
+				{value !== newGroup && chosen ? <span className="mono meta">{chosen.base}</span> : null}
+				<Icon name="chev-d" size="xs" />
+			</button>
+			{open ? (
+				<div className="lpop">
+					<div className="find">
+						<Icon name="search" />
+						<input
+							className="input"
+							value={query}
+							placeholder="Find a page or group"
+							aria-label="Find a page or group"
+							role="combobox"
+							aria-expanded="true"
+							aria-controls={`${id}-list`}
+							aria-activedescendant={`${id}-o-${active}`}
+							autoComplete="off"
+							spellCheck={false}
+							autoFocus
+							data-inside-find=""
+							onChange={(e) => setQuery(e.target.value)}
+							onKeyDown={onKey}
+							onBlur={(e) => {
+								if (!e.relatedTarget || !(e.currentTarget.closest('.inside-pick')?.contains(e.relatedTarget as Node) ?? false)) close(false);
+							}}
+						/>
+					</div>
+					<div ref={list} className="lpop-list inside-list" role="listbox" id={`${id}-list`} aria-label="Inside">
+						{rows.map((r, i) => {
+							const o = r.option;
+							const row = {
+								id: `${id}-o-${i}`,
+								role: 'option',
+								'aria-selected': r.value === value,
+								'data-inside-pick': o ? o.path : '__new',
+								onMouseDown: (e: MouseEvent) => e.preventDefault(),
+								onMouseEnter: () => setActive(i),
+								onClick: () => pick(r.value),
+							};
+							const on = i === active ? ' is-active' : '';
+							if (!o) {
+								return (
+									<div key="__new" className="inside-new">
+										{rows.length === 1 ? <div className="sw-more">Nothing called “{query.trim()}”.</div> : null}
+										<div {...row} className={`drow${on}`}>
+											<Icon name="plus" />
+											<span className="nm">New group…</span>
+										</div>
+									</div>
+								);
+							}
+							return (
+								<div key={o.path} {...row} className={`drow t${on}${r.value === value ? ' is-on' : ''}`} style={{ ['--depth' as string]: words.length ? 0 : o.depth }}>
+									<Icon name={o.page ? 'page' : 'folder'} />
+									<span className="nm">{words.length ? crumbs(o) : o.name}</span>
+									<span className="meta">
+										<span className="mono">{o.base}</span>
+									</span>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			) : null}
+		</div>
+	);
+}

package/src/editor/client/documents/actions.ts

@@ -149,7 +149,16 @@ export function addressFor(collection: Pick<EditorAnyCollection, 'urlBase'>, pat
 export interface InsideOption {
 	/** The folder's path in the collection ('' for the top level). */
 	path: string;
+	/** Its whole name, ancestors first: `Services / Advisory`. */
 	label: string;
+	/** Its own name: `Advisory` (`Top level` for the top level). */
+	name: string;
+	/** How deep it sits: 0 for the top level, 1 for what's straight under it. */
+	depth: number;
+	/** A page sits at this address (otherwise it's a group: a folder with no page of its own). */
+	page: boolean;
+	/** Pages sit under it already. */
+	holds: boolean;
 	/** The address a page inside it starts with (`/services/`). */
 	base: string;
 }
@@ -158,6 +167,8 @@ export interface InsideOption {
  * New page's "Inside" (Decision 11): the top level, then every group and every page, at
  * any depth, in tree order. A page with nothing under it yet is offered too, so a page can
  * go under it (Urban Return, 2026-10-24); Home isn't, since no address goes under `/index/`.
+ * At each level, what already holds pages comes first (as folders come first in a file
+ * list), so the site's shape is at the top while the rest are a scroll or a search away.
  */
 export function insideOptions(collection: Pick<EditorAnyCollection, 'name' | 'urlBase'>, documents: readonly ListedDocument[]): InsideOption[] {
 	const base = collection.urlBase ?? '/';
@@ -169,14 +180,29 @@ export function insideOptions(collection: Pick<EditorAnyCollection, 'name' | 'ur
 	}
 	for (const f of folders) if (f.split('/').includes(RESERVED_SLUG)) folders.delete(f);
 	const labelOf = (path: string) => docs.find((d) => d.path === path)?.label ?? titleCase(path.split('/').pop()!);
-	const options = [...folders]
-		.sort((a, b) => a.localeCompare(b))
-		.map((path) => {
+	const holds = (path: string) => docs.some((d) => d.path.startsWith(`${path}/`));
+	const parentOf = (path: string) => (path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '');
+	const children = new Map<string, string[]>();
+	for (const f of folders) children.set(parentOf(f), [...(children.get(parentOf(f)) ?? []), f]);
+	const out: InsideOption[] = [{ path: '', label: 'Top level', name: 'Top level', depth: 0, page: false, holds: true, base }];
+	const walk = (parent: string) => {
+		const kids = (children.get(parent) ?? []).sort((a, b) => Number(holds(b)) - Number(holds(a)) || a.localeCompare(b));
+		for (const path of kids) {
 			const parts = path.split('/');
-			const label = parts.map((_, i) => labelOf(parts.slice(0, i + 1).join('/'))).join(' / ');
-			return { path, label, base: `${base}${path}/` };
-		});
-	return [{ path: '', label: 'Top level', base }, ...options];
+			out.push({
+				path,
+				label: parts.map((_, i) => labelOf(parts.slice(0, i + 1).join('/'))).join(' / '),
+				name: labelOf(path),
+				depth: parts.length,
+				page: docs.some((d) => d.path === path),
+				holds: holds(path),
+				base: `${base}${path}/`,
+			});
+			walk(path);
+		}
+	};
+	walk('');
+	return out;
 }
 
 /** The pages under a folder (any depth), for "its pages stay" lines. */

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

@@ -25,6 +25,7 @@ import { docIcon } from '../nav/DocRow.tsx';
 import { Icon } from '../shell/Icons.tsx';
 import { createStore, type Store } from '../state/store.ts';
 import type { CreateDeleteRefusal, DocRef, ListedDocument } from '../../types.ts';
+import { INSIDE_CLOSE, InsidePicker } from './InsidePicker.tsx';
 import { addressFor, andList, createDocument, deleteDocument, insideOptions, moveDocument, pagesUnder, singular } from './actions.ts';
 import { filesLabel, inboxFor } from '../inbox/store.ts';
 import { ReplaceDialog } from '../media/ReplaceDialog.tsx';
@@ -92,7 +93,10 @@ export function Frame(props: { alert?: boolean; label: string; describedBy?: str
 				// Closes the dialog only: the editor's Esc (up a level) and the picker's don't run.
 				event.preventDefault();
 				event.stopImmediatePropagation();
-				closeDialog(editor);
+				// An open Inside picker closes instead, and the dialog stays.
+				const picker = box.current?.querySelector('[data-inside-open]');
+				if (picker) picker.dispatchEvent(new Event(INSIDE_CLOSE));
+				else closeDialog(editor);
 			} else if (event.key === 'Tab' && box.current) {
 				// Keep focus inside the dialog.
 				const items = [...box.current.querySelectorAll<HTMLElement>('input:not([disabled]),select:not([disabled]),button:not([disabled])')];
@@ -140,7 +144,7 @@ function NewDocument(props: { collection: string; inside?: string; at?: string }
 	const documents = useStore(editor.documents);
 	const collection = editor.site.collections.find((c) => c.name === props.collection);
 	const at = props.at ?? null;
-	const atLabel = at ? (insideOptions(collection ?? { name: props.collection, urlBase: '/' }, documents).find((o) => o.path === at)?.label.split(' / ').pop() ?? at) : null;
+	const atLabel = at ? (insideOptions(collection ?? { name: props.collection, urlBase: '/' }, documents).find((o) => o.path === at)?.name ?? at) : null;
 	const [name, setName] = useState(atLabel ?? '');
 	const [inside, setInside] = useState(props.inside ?? '');
 	const [group, setGroup] = useState('');
@@ -208,16 +212,7 @@ function NewDocument(props: { collection: string; inside?: string; at?: string }
 						<label className="field-label" htmlFor="np-inside">
 							Inside
 						</label>
-						<select className="input" id="np-inside" value={inside} onChange={(e) => (setInside(e.target.value), setError(null))}>
-							{options.map((o) => (
-								<option key={o.path} value={o.path}>
-									{o.label}
-									{o.path ? ` (${o.base}…)` : ''}
-								</option>
-							))}
-							<option disabled>──────────</option>
-							<option value={NEW_GROUP}>New group…</option>
-						</select>
+						<InsidePicker id="np-inside" options={options} value={inside} newGroup={NEW_GROUP} onChange={(v) => (setInside(v), setError(null))} />
 					</div>
 				) : null}
 				{newGroup ? (
@@ -364,16 +359,7 @@ function MoveDocument({ docRef }: { docRef: DocRef }) {
 						<label className="field-label" htmlFor="mv-inside">
 							Inside
 						</label>
-						<select className="input" id="mv-inside" value={inside} onChange={(e) => (setInside(e.target.value), setError(null))}>
-							{options.map((o) => (
-								<option key={o.path} value={o.path}>
-									{o.label}
-									{o.path ? ` (${o.base}…)` : ''}
-								</option>
-							))}
-							<option disabled>──────────</option>
-							<option value={NEW_GROUP}>New group…</option>
-						</select>
+						<InsidePicker id="mv-inside" options={options} value={inside} newGroup={NEW_GROUP} onChange={(v) => (setInside(v), setError(null))} />
 					</div>
 				) : null}
 				{newGroup ? (

package/src/editor/styles/levels/m5a-documents.css

@@ -49,3 +49,16 @@
 .stage-aside p{color:var(--bar-muted);font-size:var(--text-sm)}
 .stage-aside .btn{margin-top:var(--space-4);background:var(--bar-control);border-color:var(--bar-control);color:var(--bar-control-text)}
 .stage-aside :focus-visible{outline-color:var(--focus-on-dark)}
+/* New page's and Change address…'s Inside (Urban Return, 2026-10-24): a field that opens a
+   searchable tree of groups and pages, on the reference picker's popover (.lpop). */
+.inside-pick{position:relative}
+.input.inside-btn{display:flex;align-items:center;gap:var(--space-2);text-align:left;cursor:pointer}
+.inside-btn .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.inside-btn .meta{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-2xs);color:var(--text-subtle)}
+.inside-btn .i{flex:none;color:var(--icon)}
+.inside-list{max-height:min(320px,45vh);overflow:auto}
+.inside-list .drow{cursor:pointer}
+.inside-list .drow .meta{max-width:50%;overflow:hidden}
+.inside-list .drow .meta .mono{overflow:hidden;text-overflow:ellipsis}
+.inside-list .drow.is-on .nm{color:var(--select-strong);font-weight:var(--weight-medium)}
+.inside-new{margin-top:var(--space-1);padding-top:var(--space-1);border-top:1px solid var(--border)}