@promptctl/cc-candybar 1.8.0 → 1.8.2

package/src/config/menu-keys.ts

@@ -1,20 +1,26 @@
-// [LAW:one-source-of-truth] THE derivation of a menu's accordion identity from
-// layout structure — the single place both the loader (which SYNTHESIZES the
-// state var + cycle action) and the renderer (which READS openness + emits the
-// toggle) agree on "which key holds which open menu". A `{{ menu }}` helper is
-// context-free (it cannot see its own tree position), so its row key and member
-// name are NOT in the helper string — they are derived here from where its host
-// segment sits, and the two consumers MUST derive identical strings or a click
-// would write a key the render never reads. Keeping the rule in one module makes
-// that agreement structural rather than a coincidence of two copies.
+// [LAW:one-source-of-truth] THE derivation of a menu's disclosure identity — the
+// single place both the loader (which SYNTHESIZES the state var + cycle action)
+// and the renderer (which READS openness + emits the toggle) agree on "which key
+// holds which open menu". A `{{ menu }}` helper is context-free about its NAME
+// (it cannot see the segment it sits in), so the loader and the render walk both
+// derive identity from the same two facts — the host segment name and the menu's
+// own apply-action name — and MUST produce identical strings or a click would
+// write a key the render never reads. Keeping the rule in one module makes that
+// agreement structural rather than a coincidence of two copies.
 //
-// [LAW:decomposition] "The row IS the key": menus mutually exclude exactly when
-// they share an enclosing horizontal container — so the row key is that
-// container's structural path, and a menu outside any horizontal container gets
-// its own path as a singleton key (it can only toggle itself). The member name a
-// row key holds is the host segment's name.
-
-import type { LayoutNode } from "./dsl-types.js";
+// [LAW:decomposition] A menu's identity is `(stateKey, member)`:
+//   • member  = the menu's apply-action name — unique per menu within a segment,
+//               so two menus in ONE segment are distinct.
+//   • stateKey = the SessionState key whose value names the open member. By
+//               DEFAULT each menu owns a UNIQUE key (`menus.<seg>.<apply>`), so
+//               it toggles only itself — menus are INDEPENDENT. Passing an
+//               explicit shared key makes sibling menus share one key
+//               (`menus.<key>`); one key holds one open member, so they become
+//               mutually exclusive (an accordion) — exactly group sugar's shared-
+//               key mechanism, selected by a VALUE not a mode
+//               [LAW:dataflow-not-control-flow]. There is no implicit "the row is
+//               the key" position magic: identity depends only on names a reader
+//               can see in the template, never on tree position.
 
 // [LAW:one-source-of-truth] The reserved namespace every synthesized menu
 // artifact (state var + cycle action) lives under, mirroring group sugar's
@@ -22,9 +28,10 @@ import type { LayoutNode } from "./dsl-types.js";
 // can never silently collide.
 export const MENU_NS = "menus.";
 
-// The "no menu open" sentinel a row key starts from and returns to on close.
-// A menu's member name is its host segment name; segment names cannot equal this
-// (a row holding "closed" means every menu in it is shut).
+// The "no menu open" sentinel a key starts from and returns to on close. A
+// menu's member name is its apply-action name; an apply action named exactly
+// this would make the cycle [closed, "closed"] (two identical members, never
+// openable), which the synthesis pass rejects.
 export const MENU_CLOSED = "closed";
 
 // [LAW:representation] Disclosure glyph vocabulary — identical to group sugar so
@@ -33,69 +40,39 @@ export const MENU_CLOSED = "closed";
 export const MENU_GLYPH_CLOSED = "▸";
 export const MENU_GLYPH_OPEN = "▾";
 
-// [LAW:types-are-the-program] A row key is a structural path (e.g.
-// `root.children[1]`); collapse it to an identifier-shaped id so the synthesized
-// var/action/SessionState-key names carry no dots or brackets. Distinct tree
-// paths never collide under this map (sibling indices stay distinct: `[1]` vs
-// `[11]` → `_1_` vs `_11_`).
-function menuRowId(rowKey: string): string {
-  return rowKey.replace(/[^A-Za-z0-9]+/g, "_");
-}
-
-// The SessionState key (and the state-var name reading it) for one row's open
-// menu. One key per row holds at most one open member name → accordion.
-export function menuStateKey(rowKey: string): string {
-  return MENU_NS + menuRowId(rowKey);
+// [LAW:types-are-the-program] Collapse an arbitrary name to an identifier-shaped
+// id so the synthesized var/action/SessionState-key names carry no dots or
+// brackets that would break template field paths. Distinct names never collide
+// under this map for the alphanumeric segment/action names the config uses.
+function ident(name: string): string {
+  return name.replace(/[^A-Za-z0-9]+/g, "_");
 }
 
-// The synthesized cycle action a menu's disclosure toggle realizes: writing this
-// row key between MENU_CLOSED and the host segment's name. Named per (row,
-// segment) so two menus sharing a row contribute two cycles on one key — the
-// existing same-key validator merge unions their members into the gate.
-export function menuActionName(rowKey: string, segName: string): string {
-  return MENU_NS + menuRowId(rowKey) + "." + segName;
+// [LAW:single-enforcer] A menu's member name IS its apply-action name. Both the
+// loader and the helper call this so neither restates the rule.
+export function menuMember(applyName: string): string {
+  return applyName;
 }
 
-// [LAW:single-enforcer] THE rule for a segment placement's row key: the nearest
-// enclosing horizontal container's path, or the segment's own path when none.
-// Both the loader walk and the compile walk call this with the values they
-// already track, so neither restates the rule.
-export function rowKeyFor(
-  nearestHorizontalPath: string | undefined,
-  ownPath: string,
+// [LAW:single-enforcer] THE state key for a menu. Independent (no shared key):
+// unique per (segment, apply) so the menu toggles only itself. Shared key: the
+// key all siblings passing the same string agree on, so one open member wins
+// (accordion). The shared form ignores the segment name on purpose — that is how
+// menus in DIFFERENT segments become mutually exclusive.
+export function menuStateKey(
+  segName: string,
+  applyName: string,
+  sharedKey: string | undefined,
 ): string {
-  return nearestHorizontalPath ?? ownPath;
+  return sharedKey !== undefined
+    ? MENU_NS + ident(sharedKey)
+    : MENU_NS + ident(segName) + "." + ident(applyName);
 }
 
-// [LAW:single-enforcer] THE one walk that assigns every segment placement its
-// path and row key. The path format (`root` + `.children[i]`) MUST match the
-// compile walk's (`registerDslConfig`'s `compileNode`), since the row key a click
-// targets is keyed by that path; this is the load-side mirror of that walk, so
-// the two produce identical paths over the same tree. `visit` receives the
-// segment name, its row key, and its own path (in case a consumer needs to map
-// by exact placement).
-export function forEachSegmentPlacement(
-  root: LayoutNode,
-  visit: (segName: string, rowKey: string, ownPath: string) => void,
-): void {
-  const recur = (
-    node: LayoutNode,
-    path: string,
-    nearestHorizontalPath: string | undefined,
-  ): void => {
-    if (node.kind === "segment") {
-      visit(node.name, rowKeyFor(nearestHorizontalPath, path), path);
-      return;
-    }
-    // [LAW:dataflow-not-control-flow] A horizontal container REPLACES the nearest-
-    // horizontal path for its subtree; any other container PASSES it through. The
-    // direction is a value selecting which path the children inherit, not a branch
-    // that skips the recursion.
-    const childNearestHorizontal =
-      node.direction === "horizontal" ? path : nearestHorizontalPath;
-    node.children.forEach((child, i) =>
-      recur(child, `${path}.children[${i}]`, childNearestHorizontal),
-    );
-  };
-  recur(root, "root", undefined);
+// The synthesized cycle action a menu's disclosure toggle realizes: writing its
+// state key between MENU_CLOSED and its member. Named per (stateKey, member) so
+// menus sharing a key contribute distinct cycles on it — the existing same-key
+// validator merge unions their members into one gate.
+export function menuActionName(stateKey: string, member: string): string {
+  return stateKey + "." + member;
 }

package/src/dsl/node-registry.ts

@@ -49,12 +49,6 @@ export interface CompiledSegmentNode {
   readonly kind: "segment";
   readonly when?: Template<RichText>;
   readonly name: string;
-  // [LAW:one-source-of-truth] The menu accordion row key for THIS placement —
-  // the nearest enclosing horizontal container's path, or this segment's own path
-  // (singleton). Computed once at compile from the SAME walk the loader synthesis
-  // uses (menu-keys/forEachSegmentPlacement), so the key a `{{ menu }}` toggle
-  // writes is provably the key the loader declared a state var + gate for.
-  readonly rowKey: string;
 }
 export interface CompiledContainerNode {
   readonly kind: "container";
@@ -94,11 +88,6 @@ export interface NodeCompileCtx {
   readonly path: string;
   // The node's own `when`, already parsed by the driver (one parse-when site).
   readonly when?: Template<RichText>;
-  // [LAW:one-source-of-truth] Path → menu row key, precomputed by the driver from
-  // the SAME structural walk the loader synthesis uses. A segment node reads its
-  // own rowKey here rather than re-deriving the nearest-horizontal rule, so the
-  // two walks cannot drift.
-  readonly rowKeyByPath: ReadonlyMap<string, string>;
   // Compile a child node (the recursion, injected so this module needn't import
   // the driver).
   compileChild(node: LayoutNode, path: string): CompiledNode;
@@ -115,15 +104,20 @@ export interface NodeRenderCtx {
   // Advance the walk-owned hue cursor by one unit and return that unit's shift.
   nextHueShift(): number;
   readonly perSegmentSink?: Map<string, readonly RichText[]>;
-  // [LAW:locality-or-seam] The menu seam, injected as a capability so this module
-  // never imports the menu feature. Called once per segment render, BEFORE its
-  // template evaluates: it publishes this placement (segName + rowKey) so a
-  // `{{ menu }}` in the template can resolve its accordion identity, and returns
-  // the baseStyle to use — lightened when this segment's own menu is open, so the
-  // whole focused segment (inline trigger + dropped body band) reads as
-  // highlighted. The driver owns the menu runtime + state read; this module only
-  // hands it the values it has (name, compiled rowKey, resolved baseStyle).
-  prepareSegment(segName: string, rowKey: string, baseStyle: Style): Style;
+  // [LAW:locality-or-seam] The menu seam, injected as capabilities so this module
+  // never imports the menu feature. `beginSegment` runs BEFORE a segment template
+  // evaluates: it publishes the segment name so a `{{ menu }}` can derive its
+  // identity. `collectDrops` runs AFTER eval: it reads the open menu bodies the
+  // menus carried as metadata on the evaluated fragments (template order) for the
+  // boundary to stack below the row, and clears the published placement. The
+  // driver owns the menu runtime; this module only hands it the fragments.
+  beginSegment(segName: string): void;
+  collectDrops(fragments: readonly RichText[]): readonly RichText[];
+  // [LAW:locality-or-seam] The focus transform, injected as a capability (rich-js
+  // owns the color math — see render.ts). Applied to the segment's baseStyle when
+  // it has an open menu (it contributed drops), so the whole focused segment —
+  // inline trigger + dropped body band — reads as highlighted.
+  focusTint(style: Style): Style;
   // Resolve a segment name to its decl + compiled form (the driver closes over
   // config.segments + the compiled segments).
   lookupSegment(
@@ -220,10 +214,6 @@ const segmentType: NodeType<"segment"> = {
       kind: "segment",
       when: cctx.when,
       name: node.name,
-      // [LAW:no-defensive-null-guards] Every segment path is visited by the
-      // driver's placement walk, so the map has it; the `?? path` is the singleton
-      // degenerate (a segment outside any horizontal container is its own row).
-      rowKey: cctx.rowKeyByPath.get(cctx.path) ?? cctx.path,
     };
   },
   render(node, ctx) {
@@ -254,6 +244,17 @@ const segmentType: NodeType<"segment"> = {
     try {
       if (!evaluateWhen(segCompiled.when, ctx.scope)) return [];
 
+      // [LAW:single-enforcer] Publish the segment name + clear the drop sink
+      // BEFORE evaluating the template — a `{{ menu }}` inside reads the name to
+      // derive its identity and contributes its open body to the sink.
+      ctx.beginSegment(node.name);
+      const fragments = segCompiled.template.evaluate(ctx.scope);
+      // [LAW:decomposition] The open menu bodies, carried as out-of-band metadata
+      // on the evaluated fragments — invisible to the inline render, so a menu can
+      // sit anywhere in the template and content after it stays inline. Each
+      // becomes one full-width line stacked below the segment's row.
+      const drops = ctx.collectDrops(fragments);
+
       // [LAW:dataflow-not-control-flow] The per-segment variability is WHICH
       // palette — the base resolver (per-segment override or basePalette)
       // transposed by hueShift. bg and fg then resolve from this one palette.
@@ -267,18 +268,18 @@ const segmentType: NodeType<"segment"> = {
         segCompiled.fg,
         ctx.scope,
       );
-      // [LAW:single-enforcer] Publish this placement to the menu seam and adopt
-      // its baseStyle (focus-lightened iff this segment's menu is open) BEFORE
-      // evaluating the template — a `{{ menu }}` inside reads the placement, and
-      // the (possibly tinted) baseStyle flows into every cell + the line fill.
-      const baseStyle = ctx.prepareSegment(
-        node.name,
-        node.rowKey,
-        resolvedStyle,
-      );
-
-      const fragments = segCompiled.template.evaluate(ctx.scope);
-      const segCells = fragmentsToCells(fragments, baseStyle);
+      // [LAW:dataflow-not-control-flow] Focus is the PRESENCE of a drop: a segment
+      // with an open menu (it contributed a body) lightens, so the whole focused
+      // segment — inline trigger + dropped band — reads as highlighted. No state
+      // re-read; the drop list IS the open-menu signal.
+      const baseStyle =
+        drops.length > 0 ? ctx.focusTint(resolvedStyle) : resolvedStyle;
+      const layout = {
+        width: seg.width ?? "auto",
+        justify: seg.justify ?? "left",
+        truncate: seg.truncate ?? "right",
+        baseStyle,
+      } as const;
 
       // [LAW:single-enforcer] Partition the segment's authored "\n" into visual
       // lines BEFORE per-segment layout — width/justify/truncate then measure each
@@ -286,14 +287,16 @@ const segmentType: NodeType<"segment"> = {
       // laid line is ONE strip item: applySegmentLayout collapses a line's cells to
       // 0-or-1 item (OSC-8 links survive as interior spans), so the joiner caps only
       // at the segment's edges, never inside it.
-      const laidLines = splitCellsIntoLines(segCells).map((line) =>
-        applySegmentLayout(line, {
-          width: seg.width ?? "auto",
-          justify: seg.justify ?? "left",
-          truncate: seg.truncate ?? "right",
-          baseStyle,
-        }),
+      const inlineLines = splitCellsIntoLines(
+        fragmentsToCells(fragments, baseStyle),
+      ).map((line) => applySegmentLayout(line, layout));
+      // Each open menu body is one full-width dropped line, in the segment's
+      // (focus-tinted) bg, stacked after the inline row(s). composeBlocks then
+      // drops every line below row 0 below the enclosing horizontal row.
+      const dropLines = drops.map((body) =>
+        applySegmentLayout(fragmentsToCells([body], baseStyle), layout),
       );
+      const laidLines = [...inlineLines, ...dropLines];
 
       if (ctx.perSegmentSink !== undefined) {
         ctx.perSegmentSink.set(node.name, laidLines.flat());

package/src/dsl/render.ts

@@ -39,12 +39,14 @@ import {
 import {
   compileActions,
   actionFuncs,
-  readVar,
   type ActionRuntime,
 } from "../render/action.js";
 import { pickerFuncs } from "../render/picker.js";
-import { menuFuncs, type MenuRuntime } from "../render/menu.js";
-import { forEachSegmentPlacement, menuStateKey } from "../config/menu-keys.js";
+import {
+  menuFuncs,
+  collectMenuDrops,
+  type MenuRuntime,
+} from "../render/menu.js";
 // [LAW:one-way-deps] The node-type registry sits below this driver: it owns the
 // compiled node shapes + each kind's compile/render, dispatched via nodeType().
 // render.ts threads the recursion (compileChild/renderChild) + the hue counter in
@@ -291,7 +293,10 @@ export function registerDslConfig(
   // glyph + body resolve from the same compiled table + store) and carries the
   // walk-published current placement. Built before the engine so the `menu` func
   // can close over it; `current` stays null until a render walk publishes one.
-  const menuRuntime: MenuRuntime = { action: actionRuntime, current: null };
+  const menuRuntime: MenuRuntime = {
+    action: actionRuntime,
+    current: null,
+  };
   const engine = createCcCandybarEngine(
     undefined,
     {
@@ -423,14 +428,6 @@ export function registerDslConfig(
       );
     }
   };
-  // [LAW:one-source-of-truth] Precompute every segment placement's menu row key
-  // from the SAME walk the loader synthesis used, so the compiled segment node's
-  // rowKey is provably the key the loader declared a state var + gate for. Each
-  // segment node reads its own entry by path in compile.
-  const rowKeyByPath = new Map<string, string>();
-  forEachSegmentPlacement(config.root, (_segName, rowKey, ownPath) => {
-    rowKeyByPath.set(ownPath, rowKey);
-  });
   const compileNode = (node: LayoutNode, path: string): CompiledNode => {
     const cctx: NodeCompileCtx = {
       path,
@@ -438,7 +435,6 @@ export function registerDslConfig(
         node.when === undefined
           ? undefined
           : parseNodeField(node.when, path, "when"),
-      rowKeyByPath,
       compileChild: compileNode,
     };
     return nodeType(node.kind).compile(node, cctx);
@@ -568,21 +564,20 @@ export function renderDsl(
       : undefined;
   };
 
-  // [LAW:single-enforcer] The menu seam, owned here: publish the placement the
-  // about-to-evaluate segment template needs (so a `{{ menu }}` resolves its
-  // accordion identity) and, when this segment's own menu is open, focus-tint its
-  // baseStyle so the whole segment (inline trigger + dropped body band) reads as
-  // highlighted. [LAW:no-defensive-null-guards] "menu never opened" is a real
-  // state — has() discriminates an unset key (no menu in this row) from a value.
-  const prepareSegment = (
-    segName: string,
-    rowKey: string,
-    baseStyle: Style,
-  ): Style => {
-    compiled.menuRuntime.current = { rowKey, segName };
-    const stateKey = menuStateKey(rowKey);
-    const open = store.has(stateKey) && readVar(store, stateKey) === segName;
-    return open ? focusTint(baseStyle) : baseStyle;
+  // [LAW:single-enforcer] The menu seam, owned here. `beginSegment` publishes the
+  // segment name a `{{ menu }}` needs to derive its identity; `collectDrops` reads
+  // the open bodies the menus carried as metadata on their evaluated fragments and
+  // clears the published placement. The runtime's `current` is set/cleared around
+  // each segment eval by the walk only — never ambient.
+  // [LAW:no-ambient-temporal-coupling]
+  const beginSegment = (segName: string): void => {
+    compiled.menuRuntime.current = { segName };
+  };
+  const collectDrops = (
+    fragments: readonly RichText[],
+  ): readonly RichText[] => {
+    compiled.menuRuntime.current = null;
+    return collectMenuDrops(fragments);
   };
 
   // [LAW:dataflow-not-control-flow] ONE walk renders any node to LINES OF CELLS
@@ -602,7 +597,9 @@ export function renderDsl(
       visible,
       nextHueShift,
       perSegmentSink,
-      prepareSegment,
+      beginSegment,
+      collectDrops,
+      focusTint,
       lookupSegment,
       renderChild: renderNode,
     };

package/src/render/menu.ts

@@ -1,58 +1,95 @@
 // [LAW:locality-or-seam] The runtime half of the `{{ menu }}` seam — sibling to
 // `{{ action }}`/`{{ picker }}`. A menu is a self-contained disclosure: an inline
 // glyph that toggles open/closed, and (when open) its body — a picker grid —
-// dropped onto the next line. It composes the two existing helpers, adding only
-// the disclosure: the glyph is realized through the synthesized cycle action
-// (`renderAction`), the body through the one picker renderer (`renderPicker`).
+// that DROPS onto the line(s) below the enclosing row. It composes the two
+// existing helpers, adding only the disclosure: the glyph is realized through the
+// synthesized cycle action (`renderAction`), the body through the one picker
+// renderer (`renderPicker`).
 //
-// [LAW:one-source-of-truth] A menu is CONTEXT-FREE in the template but its
-// accordion identity (which row key, which member name) is a fact about WHERE its
-// host segment sits — derived once in menu-keys and published into this runtime
-// by the render walk before each segment's template evaluates. The helper reads
-// that placement; it never invents a key from its own argument string, so the
-// rendered toggle and the loader-synthesized state var + gate share one source.
+// [LAW:effects-at-boundaries] The helper is a PURE function of its inputs (the
+// walk-published placement + the live store): it computes the inline glyph and,
+// when open, the body, and RETURNS them together — the glyph as the fragment, the
+// body carried as out-of-band metadata on that returned RichText (a symbol the
+// segment boundary reads). It mutates no shared sink; the EFFECT of placing the
+// body below the row is performed at the boundary (collectMenuDrops + the segment
+// walk). Pure core returns a description; the edge performs it.
 //
-// [LAW:dataflow-not-control-flow] Openness is the value of the row key, not a
-// when-gated reveal: open ⇔ the row key holds THIS menu's member name. Open is a
-// length-1 drop appended after a "\n"; closed is just the glyph. One expression,
-// one returned RichText (the "\n" splits into a dropped line downstream).
+// [LAW:decomposition] The glyph and the body travel on SEPARATE channels: the
+// glyph is the visible fragment, the body rides as metadata invisible to the
+// inline render. This is the fix for the old `\n`-in-the-stream representation —
+// the body never enters the visible inline text, so a menu may sit ANYWHERE in a
+// template (content after it stays inline on row 0), and a segment may contain
+// ANY NUMBER of menus (each returned glyph carries its own body).
+//
+// [LAW:one-source-of-truth] A menu is CONTEXT-FREE about its NAME in the template
+// (it cannot see the segment it sits in), so the host segment name is published
+// into this runtime by the render walk before each segment's template evaluates.
+// The helper combines that segment name with its own apply-action arg (and an
+// optional shared key) to derive identity via menu-keys — the SAME derivation the
+// loader synthesis uses — so the rendered toggle and the loader-synthesized state
+// var + gate share one source.
+//
+// [LAW:dataflow-not-control-flow] Openness is the value of the menu's state key,
+// not a when-gated reveal: open ⇔ the state key holds THIS menu's member name.
+// The body metadata is a list whose length carries open/closed (1 open, 0 closed).
 
-import { RichText } from "@promptctl/rich-js";
+import type { RichText } from "@promptctl/rich-js";
 import type { FuncMap } from "@promptctl/go-template-js";
 import {
   MENU_GLYPH_CLOSED,
   MENU_GLYPH_OPEN,
   menuActionName,
+  menuMember,
   menuStateKey,
 } from "../config/menu-keys.js";
 import { readVar, renderAction, type ActionRuntime } from "./action.js";
 import { renderPicker } from "./picker.js";
 
-// [LAW:types-are-the-program] One menu placement: the structural facts a context-
-// free `{{ menu }}` cannot see about itself. Published by the walk per segment
-// render; the helper reads the live value.
+// [LAW:types-are-the-program] One menu placement: the structural fact a context-
+// free `{{ menu }}` cannot see about itself — the name of the segment it renders
+// inside. Published by the walk per segment render; the helper reads the live
+// value to derive identity.
 export interface MenuPlacement {
-  readonly rowKey: string;
   readonly segName: string;
 }
 
 // [LAW:locality-or-seam] The runtime the `menu` func closes over. It shares the
 // ACTION runtime (the menu's glyph and body resolve their actions/state from the
-// same compiled table + store as every other helper) and reads the walk-published
-// current placement. `current` is mutated by the single owner (the render walk,
-// set immediately before each segment template eval) — the spatial cousin of the
-// hue cursor, one mutator, never ambient. [LAW:no-ambient-temporal-coupling]
+// same compiled table + store as every other helper) and READS the walk-published
+// current placement — both inputs, never written by the helper. `current` is
+// mutated only by the single owner (the render walk, before each segment eval) —
+// the spatial cousin of the hue cursor, one mutator, never ambient.
+// [LAW:no-ambient-temporal-coupling]
 export interface MenuRuntime {
   readonly action: ActionRuntime;
   current: MenuPlacement | null;
 }
 
-// Realize a `{{ menu }}` against the live placement + state into ONE RichText.
+// [LAW:effects-at-boundaries] The body a `{{ menu }}` drops below its row rides as
+// out-of-band metadata on the returned glyph (a symbol the boundary reads), so the
+// helper returns a description rather than mutating a shared sink. A list whose
+// length carries open/closed — `[body]` open, `[]` closed.
+const MENU_DROP = Symbol("cc-candybar.menuDrop");
+type GlyphWithDrop = RichText & { [MENU_DROP]?: readonly RichText[] };
+
+// [LAW:single-enforcer] THE reader of the drop metadata, used by the segment
+// boundary (injected by the driver — node-registry never imports this module).
+// Scans a segment's evaluated fragments in template order and returns every menu
+// body carried on them; a fragment with no metadata contributes nothing.
+export function collectMenuDrops(
+  fragments: readonly RichText[],
+): readonly RichText[] {
+  return fragments.flatMap((f) => (f as GlyphWithDrop)[MENU_DROP] ?? []);
+}
+
+// Realize a `{{ menu }}` against the live placement + state: return its inline
+// glyph, carrying the (open) body as out-of-band metadata for the boundary.
 function renderMenu(
   applyName: string,
   pageName: string,
   closeOnPick: boolean,
   paged: boolean,
+  sharedKey: string | undefined,
   runtime: MenuRuntime,
 ): RichText {
   const placement = runtime.current;
@@ -65,35 +102,38 @@ function renderMenu(
       "{{ menu }} rendered with no active segment placement — the render walk must publish one before evaluating a segment template",
     );
   }
-  const { rowKey, segName } = placement;
   const action = runtime.action;
+  const stateKey = menuStateKey(placement.segName, applyName, sharedKey);
+  const member = menuMember(applyName);
 
   // [LAW:single-enforcer] The disclosure glyph IS the synthesized cycle action —
   // displays bound one-per-member (closed ▸ / open ▾), the current member's glyph
   // renders, the click writes the successor. Same toggle as group sugar.
   const glyph = renderAction(
-    menuActionName(rowKey, segName),
+    menuActionName(stateKey, member),
     [MENU_GLYPH_CLOSED, MENU_GLYPH_OPEN],
     action,
   );
 
-  // [LAW:dataflow-not-control-flow] Open ⇔ the row key holds this menu's member.
-  // Closed ⇒ just the glyph; open ⇒ glyph + "\n" + body. The "\n" is the sole
-  // vertical sentinel (splitCellsIntoLines drops the body below the row).
-  const open = readVar(action.store, menuStateKey(rowKey)) === segName;
-  if (!open) return glyph;
-
-  const body = renderPicker(applyName, pageName, closeOnPick, paged, action);
-  const combined = RichText.fromFragments([glyph, new RichText("\n"), body]);
-  combined.end = "";
-  return combined;
+  // [LAW:dataflow-not-control-flow] Open ⇔ the state key holds this menu's member.
+  // The body is a VALUE whose length carries open/closed — `[body]` open, `[]`
+  // closed — attached to the glyph the helper returns. No shared mutation: the
+  // boundary reads this metadata to place the body. (renderPicker is pure, so it
+  // is only built when open — skipping wasted computation, gating no effect.)
+  const open = readVar(action.store, stateKey) === member;
+  const bodyLines = open
+    ? [renderPicker(applyName, pageName, closeOnPick, paged, action)]
+    : [];
+  (glyph as GlyphWithDrop)[MENU_DROP] = bodyLines;
+  return glyph;
 }
 
 // [LAW:dataflow-not-control-flow] One func; the two action NAMES select the
 // body's apply/page effects, the two optional bools are the bounded author
-// choices (closeOnPick, paged) — identical surface to `{{ picker }}`, since the
-// body IS a picker. The disclosure takes no argument: its identity is derived
-// from placement, never authored.
+// choices (closeOnPick, paged) — identical to `{{ picker }}`, since the body IS a
+// picker — and the optional trailing key is the accordion grouping: omitted ⇒ the
+// menu is independent (its own key), present ⇒ it shares that key with siblings
+// (mutually exclusive). One value, not a mode.
 //
 // [LAW:one-way-deps] Injected into the engine by registerDslConfig as data; the
 // generic engine never imports this module.
@@ -105,15 +145,17 @@ export function menuFuncs(runtime: MenuRuntime): FuncMap {
         pageName: string,
         closeOnPick?: boolean,
         paged?: boolean,
+        key?: string,
       ) =>
         renderMenu(
           applyName,
           pageName,
           closeOnPick === true,
           paged === true,
+          key,
           runtime,
         ),
-      argTypes: ["string", "string", "bool", "bool"],
+      argTypes: ["string", "string", "bool", "bool", "string"],
       returnType: "T",
     },
   };