@promptctl/cc-candybar 1.8.1 → 1.8.3

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,
     };