@remit/ui 0.0.143 → 0.0.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.143",
+  "version": "0.0.145",
   "type": "module",
   "files": [
     "src"

package/src/components/attendee-row.render.test.ts

@@ -54,6 +54,52 @@ describe("AttendeeRow", () => {
 		);
 		assert.doesNotMatch(html, /Organiser/);
 	});
+
+	it("renders exactly what it always did for a caller with nothing to open", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, { attendee: attendees[1] }),
+		);
+		assert.match(html, /^<div class="flex min-h-9 items-center gap-2\.5">/);
+		assert.match(html, /<span class="min-w-0 flex-1">/);
+		assert.doesNotMatch(
+			html,
+			/<button|aria-expanded|w-full|text-left|relative/,
+		);
+	});
+
+	it("becomes a control where a name leads somewhere", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, {
+				attendee: attendees[0],
+				onActivate: () => undefined,
+			}),
+		);
+		assert.match(html, /<button/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("says the row is the one standing open", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, {
+				attendee: attendees[0],
+				active: true,
+				onActivate: () => undefined,
+			}),
+		);
+		assert.match(html, /aria-expanded="true"/);
+	});
+
+	it("gives a thumb a row it can hit", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, {
+				attendee: attendees[0],
+				onActivate: () => undefined,
+				touch: true,
+			}),
+		);
+		assert.match(html, /min-h-11/);
+		assert.doesNotMatch(html, /min-h-9/);
+	});
 });
 
 describe("AttendeeList", () => {
@@ -70,4 +116,65 @@ describe("AttendeeList", () => {
 			"",
 		);
 	});
+
+	it("leaves the markup it always had when nothing can be opened", () => {
+		const html = renderToString(createElement(AttendeeList, { attendees }));
+		assert.doesNotMatch(html, /<button|aria-expanded|w-full/);
+		assert.doesNotMatch(html, /<div>/);
+		assert.equal(
+			html.match(/<div class="flex min-h-9 items-center gap-2\.5">/g)?.length,
+			attendees.length,
+		);
+	});
+
+	it("makes every row a control when a guest can be opened", () => {
+		const html = renderToString(
+			createElement(AttendeeList, { attendees, onActivate: () => undefined }),
+		);
+		assert.equal(html.match(/<button/g)?.length, attendees.length);
+	});
+
+	it("puts the context under the guest it is about and under no other", () => {
+		const html = renderToString(
+			createElement(AttendeeList, {
+				attendees,
+				activeEmail: "dana@northwind.example",
+				onActivate: () => undefined,
+				renderContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		assert.match(html, /Recent mail · Dana Okafor/);
+		assert.doesNotMatch(html, /Recent mail · Priya Natarajan/);
+	});
+
+	it("names the disclosure the open row controls", () => {
+		const html = renderToString(
+			createElement(AttendeeList, {
+				attendees,
+				activeEmail: "dana@northwind.example",
+				onActivate: () => undefined,
+				renderContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		const controls = html.match(/aria-controls="([^"]+)"/g) ?? [];
+		assert.equal(controls.length, 1);
+		const id = /aria-controls="([^"]+)"/.exec(html)?.[1];
+		assert.ok(id);
+		assert.ok(html.includes(`<div id="${id}"`));
+	});
+
+	it("opens no context for a guest who is not on the list", () => {
+		const html = renderToString(
+			createElement(AttendeeList, {
+				attendees,
+				activeEmail: "nobody@northwind.example",
+				onActivate: () => undefined,
+				renderContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		assert.doesNotMatch(html, /Recent mail/);
+	});
 });

package/src/components/attendee-row.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { AttendeeList, RsvpBadge } from "./attendee-row.js";
 import type { CalendarAttendee } from "./calendar-types.js";
 
@@ -56,6 +58,52 @@ export const List: Story = {
 	),
 };
 
+/**
+ * The same list where the surface has something to say about the person behind
+ * a row. A row is then a disclosure: it opens under the guest, the same
+ * activation closes it, and what opens is the caller's — the kit places it and
+ * knows nothing else about it.
+ */
+export const WithContext: Story = {
+	render: () => {
+		const [active, setActive] = useState("");
+		return (
+			<div className="max-w-sm rounded-lg border border-line bg-surface p-3">
+				<AttendeeList
+					attendees={attendees}
+					activeEmail={active}
+					onActivate={setActive}
+					renderContext={(attendee) => (
+						<p className="w-64 rounded-lg border border-line bg-surface-raised p-3 text-xs text-fg-muted">
+							{`Everything ${attendee.name} has written lately would go here.`}
+						</p>
+					)}
+				/>
+			</div>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const guest = canvas.getByRole("button", { name: /Aisha Khan/ });
+
+		await userEvent.click(guest);
+
+		const opened = await waitFor(() =>
+			canvas.getByText(/Everything Aisha Khan has written/),
+		);
+		await expect(guest).toHaveAttribute("aria-expanded", "true");
+		await expect(guest).toHaveAttribute(
+			"aria-controls",
+			opened.parentElement?.id,
+		);
+
+		await userEvent.click(opened);
+
+		await waitFor(() => expect(opened).toBeInTheDocument());
+		await expect(guest).toHaveAttribute("aria-expanded", "true");
+	},
+};
+
 export const EveryReply: Story = {
 	render: () => (
 		<div className="flex gap-4">

package/src/components/attendee-row.tsx

@@ -1,4 +1,5 @@
 import { Check, Clock, Minus, X } from "lucide-react";
+import { Fragment, type ReactNode, useId } from "react";
 import { cn } from "../lib/cn.js";
 import { Avatar } from "./avatar.js";
 import type { CalendarAttendee, RsvpState } from "./calendar-types.js";
@@ -48,12 +49,31 @@ export function RsvpBadge({ rsvp, className }: RsvpBadgeProps) {
 
 export interface AttendeeRowProps {
 	attendee: CalendarAttendee;
+	/** Marks the row whose context is open. */
+	active?: boolean;
+	/**
+	 * Called with the guest to open and with "" to close, so a row that is
+	 * already open closes on the next activation. Absent leaves the row inert,
+	 * as today.
+	 */
+	onActivate?: (email: string) => void;
+	/** The disclosure this row opens, so the button can name what it controls. */
+	contextId?: string;
+	/** A thumb needs a bigger row than a pointer does. */
+	touch?: boolean;
 	className?: string;
 }
 
-export function AttendeeRow({ attendee, className }: AttendeeRowProps) {
-	return (
-		<div className={cn("flex min-h-9 items-center gap-2.5", className)}>
+export function AttendeeRow({
+	attendee,
+	active = false,
+	onActivate,
+	contextId,
+	touch = false,
+	className,
+}: AttendeeRowProps) {
+	const face = (
+		<>
 			<Avatar name={attendee.name} email={attendee.email} size="sm" />
 			<span className="min-w-0 flex-1">
 				<span className="block truncate text-sm text-fg">{attendee.name}</span>
@@ -62,17 +82,74 @@ export function AttendeeRow({ attendee, className }: AttendeeRowProps) {
 				)}
 			</span>
 			<RsvpBadge rsvp={attendee.rsvp} />
-		</div>
+		</>
+	);
+
+	if (!onActivate)
+		return (
+			<div className={cn("flex min-h-9 items-center gap-2.5", className)}>
+				{face}
+			</div>
+		);
+
+	return (
+		<button
+			type="button"
+			aria-expanded={active}
+			aria-controls={active && contextId !== undefined ? contextId : undefined}
+			onClick={() => onActivate(active ? "" : attendee.email)}
+			onKeyDown={(event) => {
+				if (event.key === "Escape") onActivate("");
+			}}
+			onBlur={(event) => {
+				if (!active) return;
+				// Only focus landing on something else is focus leaving the guest.
+				// Clicking the text inside the disclosure focuses nothing at all, and
+				// what the row opened is rendered beside it, so neither closes it.
+				if (event.relatedTarget === null) return;
+				if (event.currentTarget.parentElement?.contains(event.relatedTarget))
+					return;
+				onActivate("");
+			}}
+			className={cn(
+				"flex w-full items-center gap-2.5 rounded-md px-1.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				touch ? "min-h-11" : "min-h-9",
+				active ? "bg-accent-2-soft" : "hover:bg-surface-sunken",
+				className,
+			)}
+		>
+			{face}
+		</button>
 	);
 }
 
 export interface AttendeeListProps {
 	attendees: CalendarAttendee[];
+	/** The guest whose context is open. Empty for none. */
+	activeEmail?: string;
+	/** Called with a guest to open and with "" to close. */
+	onActivate?: (email: string) => void;
+	/** Rendered under the open row. The kit knows nothing about mail. */
+	renderContext?: (attendee: CalendarAttendee) => ReactNode;
+	touch?: boolean;
 	className?: string;
 }
 
-/** The full guest list with a one-line tally above it. */
-export function AttendeeList({ attendees, className }: AttendeeListProps) {
+/**
+ * The full guest list with a one-line tally above it. A row is a control only
+ * where the surface has something to say about the person behind it, and what
+ * it opens is a disclosure under the row rather than a card over the pane: the
+ * same gesture closes it, so do Escape and taking focus elsewhere.
+ */
+export function AttendeeList({
+	attendees,
+	activeEmail = "",
+	onActivate,
+	renderContext,
+	touch = false,
+	className,
+}: AttendeeListProps) {
+	const listId = useId();
 	if (attendees.length === 0) return null;
 	const tally = (["accepted", "tentative", "declined", "noReply"] as const)
 		.map((state) => ({
@@ -88,9 +165,30 @@ export function AttendeeList({ attendees, className }: AttendeeListProps) {
 			<p className="pb-1 text-2xs uppercase tracking-wider text-fg-subtle">
 				{`${attendees.length} guests · ${tally}`}
 			</p>
-			{attendees.map((attendee) => (
-				<AttendeeRow key={attendee.email} attendee={attendee} />
-			))}
+			{attendees.map((attendee, index) => {
+				const active = attendee.email === activeEmail;
+				const contextId = `${listId}-guest-${index}`;
+				const row = (
+					<AttendeeRow
+						attendee={attendee}
+						active={active}
+						onActivate={onActivate}
+						contextId={renderContext ? contextId : undefined}
+						touch={touch}
+					/>
+				);
+				if (!onActivate) return <Fragment key={attendee.email}>{row}</Fragment>;
+				return (
+					<div key={attendee.email}>
+						{row}
+						{active && renderContext && (
+							<div id={contextId} className="py-1">
+								{renderContext(attendee)}
+							</div>
+						)}
+					</div>
+				);
+			})}
 		</div>
 	);
 }

package/src/components/event-detail.render.test.ts

@@ -101,4 +101,26 @@ describe("EventDetail", () => {
 	it("names the calendar and its account", () => {
 		assert.match(render({}), /Northwind/);
 	});
+
+	it("leaves the guest list inert where a name leads nowhere", () => {
+		assert.doesNotMatch(render({}), /aria-expanded/);
+	});
+
+	it("opens the caller's context under the guest it is about", () => {
+		const html = renderToString(
+			createElement(EventDetail, {
+				event,
+				calendar,
+				whenText: "Wednesday 10 June · 10:00 – 11:30",
+				onEdit: () => undefined,
+				onDelete: () => undefined,
+				activeAttendee: "priya@northwind.example",
+				onActivateAttendee: () => undefined,
+				renderAttendeeContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		assert.match(html, /aria-expanded="true"/);
+		assert.match(html, /Recent mail · Priya Natarajan/);
+	});
 });

package/src/components/event-detail.tsx

@@ -13,6 +13,7 @@ import { cn } from "../lib/cn.js";
 import { AttendeeList, RsvpBadge } from "./attendee-row.js";
 import { Button } from "./button.js";
 import type {
+	CalendarAttendee,
 	CalendarDescriptor,
 	CalendarEventData,
 } from "./calendar-types.js";
@@ -28,6 +29,14 @@ export interface EventDetailProps {
 	onOpenThread?: () => void;
 	/** Puts the pane back to whatever it shows with nothing selected. */
 	onClose?: () => void;
+	/** The guest whose context is open. Empty for none. */
+	activeAttendee?: string;
+	/** Called with a guest to open and with "" to close. Absent leaves the list inert. */
+	onActivateAttendee?: (email: string) => void;
+	/** Rendered under the open guest. The kit knows nothing about mail. */
+	renderAttendeeContext?: (attendee: CalendarAttendee) => React.ReactNode;
+	/** A thumb needs a bigger row than a pointer does. */
+	touch?: boolean;
 	/**
 	 * `bare` drops the header and the scrolling frame, for a surface that already
 	 * carries both — a full-screen flow whose footer holds the same actions.
@@ -64,6 +73,10 @@ export function EventDetail({
 	onDelete,
 	onOpenThread,
 	onClose,
+	activeAttendee = "",
+	onActivateAttendee,
+	renderAttendeeContext,
+	touch = false,
 	chrome = "header",
 	className,
 }: EventDetailProps) {
@@ -128,7 +141,14 @@ export function EventDetail({
 			)}
 
 			{event.attendees.length > 0 && (
-				<AttendeeList attendees={event.attendees} className="mt-3" />
+				<AttendeeList
+					attendees={event.attendees}
+					activeEmail={activeAttendee}
+					onActivate={onActivateAttendee}
+					renderContext={renderAttendeeContext}
+					touch={touch}
+					className="mt-3"
+				/>
 			)}
 
 			{event.notes !== "" && (

package/src/components/filter-rule-editor.create.test.ts

@@ -29,6 +29,13 @@ const folders: FolderTreeNode[] = [
 	},
 ];
 
+// A server that reports no hierarchy delimiter has a flat namespace, where a
+// path carries no separator to read a trail out of.
+const flatFolders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX" },
+	{ id: "mbx-work", label: "Work", path: "Work" },
+];
+
 const rule: FilterRule = {
 	clauses: [{ id: "c1", field: "From", value: "a@example.com" }],
 	matchOperator: "all",
@@ -61,6 +68,8 @@ interface MountOptions {
 		signal?: AbortSignal,
 	) => Promise<FolderTreeNode>;
 	onChangeMove?: (id: string) => void;
+	options?: readonly FolderTreeNode[];
+	delimiter?: string;
 }
 
 /** Holds the destination the way the app does, so a pick shows on screen. */
@@ -68,6 +77,8 @@ const mount = async ({
 	initialDestination,
 	onCreateFolder,
 	onChangeMove,
+	options = folders,
+	delimiter,
 }: MountOptions = {}) => {
 	const Controlled = () => {
 		const [moveMailboxId, setMoveMailboxId] = useState<string | undefined>(
@@ -75,7 +86,8 @@ const mount = async ({
 		);
 		return createElement(FilterRuleEditor, {
 			rule: { ...rule, moveMailboxId },
-			folders,
+			folders: options,
+			delimiter,
 			preview,
 			onChangeMove: (id: string) => {
 				setMoveMailboxId(id || undefined);
@@ -235,6 +247,17 @@ describe("FilterRuleEditor move destination", () => {
 		assert.deepEqual(picked, [""]);
 	});
 
+	it("reads a flat-namespace destination as its whole path, not per character", async () => {
+		await mount({ options: flatFolders, delimiter: "" });
+		await openTree();
+		await click(byAriaLabel("Move to Work"));
+		assert.ok(
+			byText("Move matches to Work"),
+			"the whole path is one segment when nothing nests",
+		);
+		assert.equal(byText("Move matches to W / o / r / k"), undefined);
+	});
+
 	it("offers no create affordance without onCreateFolder", async () => {
 		await mount();
 		await openTree();

package/src/components/filter-rule-editor.stories.tsx

@@ -60,10 +60,15 @@ function LiveEditor({
 	propertyRule,
 	labels = demoLabels,
 	initialClauseEdit,
+	folders = demoFolders,
+	delimiter,
 	onCreateFolder,
 	onCreateLabel,
 }: {
 	initialRule: FilterRule;
+	folders?: FolderTreeNode[];
+	/** The provider's hierarchy separator; `""` is a flat namespace. */
+	delimiter?: string;
 	semanticAvailable?: boolean;
 	/** Offers the match-mode control; omit to render the editor without one. */
 	initialMatchMode?: RuleMatchMode;
@@ -179,7 +184,8 @@ function LiveEditor({
 	return (
 		<FilterRuleEditor
 			rule={rule}
-			folders={demoFolders}
+			folders={folders}
+			delimiter={delimiter}
 			labels={labels}
 			preview={preview}
 			semanticAvailable={semanticAvailable}
@@ -459,6 +465,30 @@ export const DestinationNestedFolders: Story = {
 	},
 };
 
+// A server that reports no hierarchy delimiter has a flat namespace: every
+// folder sits at the top level and a path is a name, not a trail.
+const flatFolders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX" },
+	{ id: "mbx-archive", label: "Archive", path: "Archive" },
+	{ id: "mbx-work", label: "Work", path: "Work" },
+	{ id: "mbx-workshop", label: "Workshop", path: "Workshop" },
+];
+
+/**
+ * A flat namespace, where the chosen destination reads as its whole path —
+ * `Work`, not one segment per character.
+ */
+export const DestinationFlatNamespace: Story = {
+	name: "Destination — a flat namespace (server reports no delimiter)",
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, moveMailboxId: "mbx-work" }}
+			folders={flatFolders}
+			delimiter=""
+		/>
+	),
+};
+
 /**
  * A new folder is made inside the folder the tree is looking at, so a filter can
  * point at `Travel/Car hire` without leaving the editor.

package/src/components/filter-rule-editor.tsx

@@ -1,5 +1,5 @@
 import { Fragment, type ReactNode, useMemo, useState } from "react";
-import type { FolderTreeNode } from "../lib/folder-tree.js";
+import { type FolderTreeNode, folderPathSegments } from "../lib/folder-tree.js";
 import { Button } from "./button.js";
 import {
 	AddChipButton,
@@ -216,7 +216,7 @@ function MoveDestinationField({
 
 	/** Two folders can share a leaf name, so a destination reads as its trail. */
 	const trail = (folder: FolderTreeNode): string => {
-		const segments = folder.path.split(delimiter);
+		const segments = folderPathSegments(folder.path, delimiter);
 		return segments
 			.map((segment, index) => {
 				const path = segments.slice(0, index + 1).join(delimiter);

package/src/components/folder-tree-picker.stories.tsx

@@ -47,6 +47,17 @@ const folders: FolderTreeNode[] = [
 	{ id: "mbx-work-recruiting", label: "Recruiting", path: "Work/Recruiting" },
 ];
 
+// A server that reports no hierarchy delimiter has a flat namespace: nothing
+// nests, and `Work` is not a parent of `Workshop`.
+const flatFolders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX", isCurrent: true },
+	{ id: "mbx-archive", label: "Archive", path: "Archive" },
+	{ id: "mbx-work", label: "Work", path: "Work" },
+	{ id: "mbx-workshop", label: "Workshop", path: "Workshop" },
+	{ id: "mbx-sent", label: "Sent", path: "Sent Items" },
+	{ id: "mbx-trash", label: "Trash", path: "Deleted Messages" },
+];
+
 const longFolders: FolderTreeNode[] = [
 	...folders,
 	...Array.from({ length: 36 }, (_, i) => ({
@@ -100,6 +111,7 @@ const rejects = (message: string) => (): Promise<FolderTreeNode> =>
 function Picker({
 	options = folders,
 	onCreateFolder = createFolder,
+	delimiter,
 }: {
 	options?: FolderTreeNode[];
 	onCreateFolder?: (
@@ -107,6 +119,7 @@ function Picker({
 		parentPath: string,
 		signal?: AbortSignal,
 	) => Promise<FolderTreeNode>;
+	delimiter?: string;
 }) {
 	const [selected, setSelected] = useState<string>();
 	const [known, setKnown] = useState(options);
@@ -115,6 +128,7 @@ function Picker({
 			<FolderTreePicker
 				folders={known}
 				selectedId={selected}
+				delimiter={delimiter}
 				onSelect={setSelected}
 				onCreateFolder={(name, parentPath, signal) =>
 					onCreateFolder(name, parentPath, signal).then((created) => {
@@ -160,6 +174,15 @@ export const LongList: Story = {
 	render: () => <Picker options={longFolders} />,
 };
 
+/**
+ * A flat namespace: every folder sits at the top level and none of them opens,
+ * so a new folder can only be made at the top.
+ */
+export const FlatNamespace: Story = {
+	name: "Flat namespace (server reports no delimiter)",
+	render: () => <Picker options={flatFolders} delimiter="" />,
+};
+
 /** An account with nothing to list: the message states that, not a filter. */
 export const Empty: Story = {
 	name: "No folders",

package/src/lib/folder-tree.test.ts

@@ -8,6 +8,7 @@ import {
 	folderDepth,
 	folderLeaf,
 	folderParent,
+	folderPathSegments,
 	matchesQuery,
 	orderFolderNodes,
 	queryExpandedPaths,
@@ -298,3 +299,50 @@ describe("folderLeaf", () => {
 		assert.equal(folderLeaf("INBOX", "."), "INBOX");
 	});
 });
+
+describe("a flat namespace", () => {
+	const flat: FolderTreeNode[] = [
+		node("work", "Work", "Work"),
+		node("workshop", "Workshop", "Workshop"),
+		node("inbox", "Inbox", "INBOX"),
+	];
+
+	it("keeps a path whole rather than splitting it into characters", () => {
+		assert.deepEqual(folderPathSegments("Projects/Q3", ""), ["Projects/Q3"]);
+		assert.deepEqual(folderPathSegments("Projects/Q3", "/"), [
+			"Projects",
+			"Q3",
+		]);
+	});
+
+	it("makes every folder a root with no parent, depth or ancestors", () => {
+		assert.equal(folderParent("Projects/Q3", ""), "");
+		assert.equal(folderDepth("Projects/Q3", ""), 0);
+		assert.deepEqual(folderAncestors("Projects/Q3", ""), []);
+	});
+
+	it("puts the whole list on screen at the top level", () => {
+		const rows = collapseFolderTree(orderFolderNodes(flat, ""), new Set(), "");
+		assert.deepEqual(paths(rows), ["Work", "Workshop", "INBOX"]);
+		assert.deepEqual(
+			rows.map((row) => row.depth),
+			[0, 0, 0],
+		);
+	});
+
+	it("offers no create action inside a folder, not even a prefix match", () => {
+		const rows = collapseFolderTree(
+			orderFolderNodes(flat, ""),
+			new Set(["Work"]),
+			"",
+		);
+		assert.deepEqual(
+			withCreateRows(rows, "").map((entry) =>
+				entry.kind === "create"
+					? `new inside ${entry.parent.path}`
+					: entry.row.folder.path,
+			),
+			["Work", "Workshop", "INBOX"],
+		);
+	});
+});

package/src/lib/folder-tree.ts

@@ -38,28 +38,39 @@ export type FolderTreeDisplayRow =
 	| { kind: "folder"; row: FolderTreeRow; index: number }
 	| { kind: "create"; parent: FolderTreeNode; depth: number };
 
-// A server that reports no delimiter has a flat namespace, so the path is its
-// own leaf; splitting on "" would return single characters.
+// A server that reports no delimiter has a flat namespace: the path is its own
+// leaf and every folder is a root. Splitting on "" would return single
+// characters, and `"Inbox".lastIndexOf("")` is 5 rather than -1, so each of
+// these answers the flat case before it touches the path.
+export const folderPathSegments = (
+	path: string,
+	delimiter: string,
+): string[] => (delimiter.length === 0 ? [path] : path.split(delimiter));
+
 export const folderLeaf = (path: string, delimiter: string): string => {
-	if (delimiter.length === 0) return path;
-	const parts = path.split(delimiter);
+	const parts = folderPathSegments(path, delimiter);
 	return parts[parts.length - 1] || path;
 };
 
 export const folderParent = (path: string, delimiter: string): string => {
+	if (delimiter.length === 0) return "";
 	const cut = path.lastIndexOf(delimiter);
 	return cut === -1 ? "" : path.slice(0, cut);
 };
 
 export const folderDepth = (path: string, delimiter: string): number =>
-	path.split(delimiter).length - 1;
+	folderPathSegments(path, delimiter).length - 1;
 
+// Every step up is strictly shorter than the path below it, so the walk is
+// bounded by the length of the path whatever a parent comes back as.
 export const folderAncestors = (path: string, delimiter: string): string[] => {
 	const out: string[] = [];
-	let parent = folderParent(path, delimiter);
-	while (parent) {
+	let child = path;
+	let parent = folderParent(child, delimiter);
+	while (parent && parent.length < child.length) {
 		out.push(parent);
-		parent = folderParent(parent, delimiter);
+		child = parent;
+		parent = folderParent(child, delimiter);
 	}
 	return out;
 };
@@ -182,12 +193,16 @@ export const collapseFolderTree = (
 
 /**
  * Drops a create action at the end of every open folder's children, so "New
- * folder" reads as the last folder inside the one you opened.
+ * folder" reads as the last folder inside the one you opened. A flat namespace
+ * has no inside, so it gets the rows on their own and creates at the top level.
  */
 export const withCreateRows = (
 	rows: readonly FolderTreeRow[],
 	delimiter: string,
 ): FolderTreeDisplayRow[] => {
+	if (delimiter.length === 0)
+		return rows.map((row, index) => ({ kind: "folder", row, index }));
+
 	const out: FolderTreeDisplayRow[] = [];
 	const open: FolderTreeRow[] = [];