@nowline/layout 0.8.6 → 0.10.0

package/src/capacity.ts

@@ -20,24 +20,18 @@
 // the lane badge in m7 and the overload sweep in m8).
 
 import type { SymbolDeclaration } from '@nowline/core';
+import { BUILTIN_CAPACITY_ICONS, propKey } from '@nowline/core/internal';
+import { estimateTextWidth } from './text-measure.js';
 import type { ResolvedCapacityIconRef } from './types.js';
 
 /**
- * Built-in `capacity-icon:` names the renderer understands directly. Stays in
- * sync with `BUILTIN_CAPACITY_ICONS` in `packages/core/.../nowline-validator.ts`
- * — the validator uses this set to decide whether a value is a known built-in;
- * the layout uses it to decide whether to forward the value as-is or
- * dereference it through the glyph map. Layout-side and validator-side can
- * diverge briefly during refactors but should converge before each release.
+ * Built-in `capacity-icon:` names the renderer understands directly
+ * (`BUILTIN_CAPACITY_ICONS` in core's `value-tables.ts`): the validator uses
+ * the list to decide whether a value is a known built-in; the layout uses it
+ * to decide whether to forward the value as-is or dereference it through the
+ * glyph map.
  */
-const BUILTIN_CAPACITY_ICONS = new Set<string>([
-    'none',
-    'multiplier',
-    'person',
-    'people',
-    'points',
-    'time',
-]);
+const BUILTIN_CAPACITY_ICON_SET: ReadonlySet<string> = new Set(BUILTIN_CAPACITY_ICONS);
 
 const POSITIVE_INT_RE = /^\d+$/;
 const POSITIVE_DECIMAL_RE = /^\d+\.\d+$/;
@@ -104,16 +98,6 @@ export function formatCapacityNumber(value: number): string {
  */
 export type ResolvedCapacityIcon = ResolvedCapacityIconRef;
 
-/**
- * Read a property value off a Langium-shaped EntityProperty, normalizing the
- * trailing-colon form. Validator-side uses the same trick — the grammar
- * stores `key` as the *raw* token, including the colon for `unicode:`-style
- * property keys.
- */
-function propKey(prop: { key: string }): string {
-    return prop.key.endsWith(':') ? prop.key.slice(0, -1) : prop.key;
-}
-
 function symbolUnicode(decl: SymbolDeclaration): string | undefined {
     for (const p of decl.properties) {
         if (propKey(p) === 'unicode' && p.value) return p.value;
@@ -147,7 +131,7 @@ export function resolveCapacityIcon(
     symbols: Map<string, SymbolDeclaration>,
 ): ResolvedCapacityIcon | null {
     if (icon === 'none') return null;
-    if (BUILTIN_CAPACITY_ICONS.has(icon)) {
+    if (BUILTIN_CAPACITY_ICON_SET.has(icon)) {
         return {
             kind: 'builtin',
             name: icon as 'multiplier' | 'person' | 'people' | 'points' | 'time',
@@ -181,11 +165,68 @@ export function estimateCapacitySuffixWidth(
         // no separator gap, glyph width approx. one character.
         return (text.length + 1) * fontSizePx * 0.58;
     }
-    // 0.1em separator + 1em glyph. Estimating the glyph as 1em (rather than
-    // 0.58em, the per-character width) is intentional: SVG icons render at
-    // their full font-size square, and most Unicode literals authors use for
-    // capacity (★, 💰, ⚙) similarly read at near-em widths.
+    // Gap + 1em glyph. Estimating the glyph as 1em (rather than 0.58em, the
+    // per-character width) is intentional: SVG icons render at their full
+    // font-size square, and most Unicode literals authors use for capacity
+    // (★, 💰, ⚙) similarly read at near-em widths. A built-in SVG icon sits
+    // `CAPACITY_ICON_GAP_EM` past the number; a literal flows `0.1em` after
+    // it inside the `<text>`.
     const glyphWidthEm = 1.0;
-    const gapEm = 0.1;
+    const gapEm = icon.kind === 'builtin' ? CAPACITY_ICON_GAP_EM : 0.1;
     return text.length * fontSizePx * 0.58 + (gapEm + glyphWidthEm) * fontSizePx;
 }
+
+/**
+ * Em-distance the renderer reserves between an item's metaText and its
+ * capacity suffix (or any inline trailing token). Half a space's worth
+ * — wide enough to read as a separator, narrow enough not to look like
+ * a stray gap. SVG `<tspan dx>` honors this exactly so we don't depend
+ * on per-character estimation for the gap itself.
+ */
+export const META_SUFFIX_DX_EM = 0.6;
+
+/**
+ * Gap (em) between a capacity number and its built-in SVG icon. The icon's
+ * x is an estimate (the number's width at 0.58 em/char) while the number is
+ * drawn with real font metrics, and common UI fonts draw digits at up to
+ * ~0.64 em, so the gap has to absorb that error and still read as space.
+ */
+const CAPACITY_ICON_GAP_EM = 0.25;
+
+/**
+ * Where a built-in SVG capacity icon (person, people, points, time) sits:
+ * the px terms that, added in order to the start x of the text run the
+ * suffix is painted in, give the icon's x, at `fontSizePx`. Undefined for
+ * every other glyph (`null`, the multiplier, a literal), which the
+ * renderer paints inside the `<text>`.
+ *
+ * The terms are kept apart rather than summed so the renderer adds them to
+ * its x one at a time, in this order, exactly as it did when it measured
+ * them itself; a pre-summed offset can round differently at the last bit.
+ *
+ * With `metaText`, the run is the item meta line: the meta text's
+ * `estimateTextWidth` width and the `META_SUFFIX_DX_EM` separator (the
+ * first two terms are where the renderer starts the number), then the
+ * number's width and the gap. Without it, the number starts the run (an
+ * item with no meta text, or a lane badge): its width, then the gap.
+ * Both paths place the icon from the same number estimate and gap, so an
+ * item suffix reads like a lane badge.
+ */
+export function capacityIconDxTerms(
+    text: string,
+    icon: ResolvedCapacityIcon | null,
+    fontSizePx: number,
+    metaText?: string,
+): readonly number[] | undefined {
+    if (icon?.kind !== 'builtin' || icon.name === 'multiplier') return undefined;
+    const gapPx = fontSizePx * CAPACITY_ICON_GAP_EM;
+    if (metaText) {
+        return [
+            estimateTextWidth(metaText, fontSizePx),
+            fontSizePx * META_SUFFIX_DX_EM,
+            estimateTextWidth(text, fontSizePx),
+            gapPx,
+        ];
+    }
+    return [estimateTextWidth(text, fontSizePx), gapPx];
+}

package/src/chart-translation.ts

@@ -0,0 +1,88 @@
+// The chart's one vertical translation.
+//
+// Placement lays the chart out in local coordinates, with its top at y 0
+// (`phases/place.ts`). Its top on the canvas is known only once the header
+// rows above it stop growing (a now-pill row reserved on an extended axis,
+// a marker band the final pack grew), so finalize translates the whole
+// chart there, once, on every layout (`growHeaderRows`, f7). An isolated
+// region also moves its own lanes down below its marker band, once, while
+// it is placed (`include-node.ts`).
+//
+// Every y the chart's positioned model carries is listed exactly once,
+// here. A new y-bearing field on `PositionedItem` / `PositionedGroup` /
+// `PositionedParallel` has to join it or it stays at its local y, a chart
+// top above where it belongs on every render.
+//
+// Arrow attach ports are deliberately NOT stored anywhere that needs
+// translating: they are derived from each item's final box when the
+// arrows are built (see `item-port-geometry.ts`).
+
+import type { MilestonePlacement } from './nodes/milestone-node.js';
+import type {
+    PositionedIncludeRegion,
+    PositionedMilestone,
+    PositionedSwimlane,
+    PositionedTrackChild,
+} from './types.js';
+
+/**
+ * Move a positioned item, group or parallel (and everything inside it)
+ * down by `dy`: its box, its inline-date glyphs, and for an item its
+ * label chips and `before:` overflow box.
+ */
+export function translateTrackChildY(child: PositionedTrackChild, dy: number): void {
+    child.box.y += dy;
+    for (const pin of child.inlineDatePins ?? []) pin.glyphTopLeft.y += dy;
+    if (child.kind === 'item') {
+        for (const chip of child.labelChips) chip.box.y += dy;
+        if (child.overflowBox) child.overflowBox.y += dy;
+        return;
+    }
+    for (const c of child.children) translateTrackChildY(c, dy);
+}
+
+/** Move a swimlane band, its children and its nested lanes down by `dy`. */
+export function translateSwimlaneY(lane: PositionedSwimlane, dy: number): void {
+    lane.box.y += dy;
+    for (const child of lane.children) translateTrackChildY(child, dy);
+    for (const nested of lane.nested) translateSwimlaneY(nested, dy);
+}
+
+/** Move an include region, its nested lanes and its own markers down by `dy`. */
+export function translateIncludeY(region: PositionedIncludeRegion, dy: number): void {
+    region.box.y += dy;
+    for (const lane of region.nestedSwimlanes) translateSwimlaneY(lane, dy);
+    for (const marker of [...(region.anchors ?? []), ...(region.milestones ?? [])]) {
+        marker.center.y += dy;
+        marker.labelBox.y += dy;
+        marker.cutTopY += dy;
+        marker.cutBottomY += dy;
+    }
+    for (const milestone of region.milestones ?? []) {
+        for (const arrow of milestone.slackArrows ?? []) arrow.y += dy;
+    }
+    for (const edge of region.edges ?? []) {
+        for (const point of edge.waypoints) point.y += dy;
+    }
+}
+
+/**
+ * Move the chart part of a host milestone down by `dy`: its cut line and
+ * the slack arrows that start on an item. Its diamond and label sit in the
+ * header's marker band, outside the chart, and stay; so do the arrows that
+ * start on a marker row, which `positionMilestones` read from the final
+ * pack. `placement` is the milestone's placement, whose arrows are in the
+ * same order as the positioned ones.
+ */
+export function translateMilestoneChartY(
+    milestone: PositionedMilestone,
+    placement: MilestonePlacement,
+    dy: number,
+): void {
+    milestone.cutTopY += dy;
+    milestone.cutBottomY += dy;
+    milestone.slackArrows?.forEach((arrow, i) => {
+        const start = placement.slackArrows?.[i];
+        if (start && 'y' in start) arrow.y += dy;
+    });
+}

package/src/container-header-geometry.ts

@@ -0,0 +1,116 @@
+// Container geometry — a group or parallel is drawn above and around its
+// content, never beside it (specs/true-width-layout.md §3.3):
+//
+//   header  the title over a bracket that spans exactly the container's
+//           dates; the title starts at the container's start and may run
+//           past the bracket's end, and inline-date glyphs sit beside it.
+//   body    a shaded rectangle spanning exactly the container's dates, from
+//           the header down to below the last child, padded above and below
+//           the content, never left or right.
+//
+// A container's `box` is the whole of it: `box.y` is the header's top,
+// `box.y + headerHeight` the body's top, and `box.x` / `box.width` its dates.
+// Layout (the reservation, the glyph placement, the row footprint) and the
+// renderer (the bracket, the title, the body) both read these helpers, so the
+// painted header and the space layout keeps for it can't drift apart.
+
+import { INLINE_DATE_GLYPH_GAP_PX, INLINE_DATE_GLYPH_TILE_SIZE_PX } from './item-bar-geometry.js';
+import { TEXT_SIZE_PX } from './themes/shared.js';
+import type { PositionedTrackChild } from './types.js';
+
+/** Height (px) of a container's header band: title row, then the bracket. */
+export const CONTAINER_HEADER_BAND_PX = 18;
+
+/** The bracket's horizontal line, measured down from the header's top. Its
+ *  end ticks run from here down to the body's top. */
+export const CONTAINER_BRACKET_LINE_OFFSET_PX = 13;
+
+/** Font size (px) of a header title. */
+export const CONTAINER_HEADER_TITLE_FONT_SIZE_PX = TEXT_SIZE_PX.xs;
+
+/** Baseline of a header title, measured down from the header's top. */
+export const CONTAINER_HEADER_TITLE_BASELINE_PX = 10;
+
+/** Padding (px) between a container's body edge and its content, above and
+ *  below only. */
+export const CONTAINER_BODY_PAD_PX = 6;
+
+/** Clear space (px) the row keeps past a header that runs beyond its
+ *  container's end, the same buffer an item's spilled caption keeps. */
+export const CONTAINER_HEADER_CLEARANCE_PX = 6;
+
+/** Fill opacity of a container body directly in a lane: its `bg`, as a
+ *  light tint over the lane band. */
+export const CONTAINER_BODY_FILL_OPACITY = 0.12;
+
+/** Fill opacity of a container body nested one level, inside another
+ *  container's body: a lighter tint, so the two stack to a step darker
+ *  rather than to a new colour (specs/true-width-layout.md §8 O4). */
+export const CONTAINER_NESTED_BODY_FILL_OPACITY = 0.06;
+
+/** Nesting depth (1 for a container directly in a lane) past which a body
+ *  is outlined instead of filled, so tints never compound three deep
+ *  (specs/true-width-layout.md §8 O4). */
+export const CONTAINER_MAX_FILLED_DEPTH = 2;
+
+/** Vertical chrome a container reserves around its content. */
+export interface ContainerChrome {
+    /** Header band height: 0 when the header would be empty. */
+    header: number;
+    /** Body padding above the content, and again below it. */
+    pad: number;
+}
+
+/**
+ * The chrome a container reserves. A wave-only group draws nothing and
+ * reserves nothing (specs/waves.md §9.7). Any other container pads its body;
+ * it keeps a header band when there is a title, an inline-date glyph or a
+ * visible bracket to put in it.
+ */
+export function containerChrome(opts: {
+    drawn: boolean;
+    hasTitle: boolean;
+    hasPins: boolean;
+    hasBracket: boolean;
+}): ContainerChrome {
+    if (!opts.drawn) return { header: 0, pad: 0 };
+    const hasHeader = opts.hasTitle || opts.hasPins || opts.hasBracket;
+    return { header: hasHeader ? CONTAINER_HEADER_BAND_PX : 0, pad: CONTAINER_BODY_PAD_PX };
+}
+
+/**
+ * Left x of the header title: the container's start, or one gap past an
+ * `after:` glyph, which takes the header's leftmost slot.
+ */
+export function containerHeaderTitleX(boxX: number, hasAfterGlyph: boolean): number {
+    return hasAfterGlyph ? boxX + INLINE_DATE_GLYPH_TILE_SIZE_PX + INLINE_DATE_GLYPH_GAP_PX : boxX;
+}
+
+/**
+ * Estimated width (px) of a header title. Same pessimistic ~0.58 em/char
+ * heuristic the caption-spill math uses, so the row reserves a little more
+ * than the text needs rather than less.
+ */
+export function containerHeaderTitleWidth(title: string): number {
+    return title.length * CONTAINER_HEADER_TITLE_FONT_SIZE_PX * 0.58;
+}
+
+/**
+ * Rightmost x a container's own header paints: its title (at its estimated
+ * width) and its inline-date glyphs. `-Infinity` for an item, or a container
+ * with neither.
+ */
+export function containerHeaderRightX(block: PositionedTrackChild): number {
+    if (block.kind === 'item') return Number.NEGATIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    const pins = block.inlineDatePins ?? [];
+    for (const pin of pins) right = Math.max(right, pin.glyphTopLeft.x + pin.glyphSize);
+    if (block.title && block.headerHeight > 0) {
+        const hasAfter = pins.some((pin) => pin.side === 'after');
+        right = Math.max(
+            right,
+            containerHeaderTitleX(block.box.x, hasAfter) + containerHeaderTitleWidth(block.title),
+        );
+    }
+    return right;
+}

package/src/dsl-utils.ts

@@ -1,30 +1,12 @@
 // Tiny DSL utilities shared between `layout.ts` and the per-entity nodes
-// under `nodes/`. Kept intentionally trivial and pure: a `:`-trim,
-// property lookup helpers against the AST's `EntityProperty[]`, and an
-// ISO-date parser. Anything that needs configuration or non-trivial
-// resolution (durations, calendars, styles) stays in the modules that
-// own those concerns.
+// under `nodes/`. Kept intentionally trivial and pure: core's property
+// lookups and strict ISO-date parser, re-exported, and a date formatter.
+// Anything that needs configuration or non-trivial resolution (durations,
+// calendars, styles) stays in the modules that own those concerns.
 
-import type { EntityProperty } from '@nowline/core';
+export { parseIsoDate, propValue, propValues } from '@nowline/core/internal';
 
-function stripColon(key: string): string {
-    return key.endsWith(':') ? key.slice(0, -1) : key;
-}
-
-export function propValue(props: EntityProperty[], key: string): string | undefined {
-    return props.find((p) => stripColon(p.key) === key)?.value;
-}
-
-export function propValues(props: EntityProperty[], key: string): string[] {
-    const p = props.find((x) => stripColon(x.key) === key);
-    if (!p) return [];
-    return p.value !== undefined ? [p.value] : [...p.values];
-}
-
-export function parseDate(raw: string | undefined): Date | null {
-    if (!raw) return null;
-    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
-    if (!m) return null;
-    const d = new Date(Date.UTC(parseInt(m[1], 10), parseInt(m[2], 10) - 1, parseInt(m[3], 10)));
-    return Number.isNaN(d.getTime()) ? null : d;
+/** A UTC-midnight date as `YYYY-MM-DD`, the inverse of `parseIsoDate`. */
+export function formatIsoDate(date: Date): string {
+    return date.toISOString().slice(0, 10);
 }