@nowline/layout 0.8.6 → 0.10.0

package/src/start-rules.ts

@@ -0,0 +1,113 @@
+// Start rules — engine A's (the pixel layout's) start rule for a lane or
+// group child, built on the parsed terms of `start-terms.ts`: the latest of
+// the sequential default and the `after:` terms (refs and inline dates),
+// then the wave floor (specs/waves.md §8.4). Also the inline
+// `after:` date that reports NL.I1008 when it set an item's start on a
+// non-working day (specs/working-calendar.md §6).
+
+import type { EntityProperty, GroupBlock, ItemDeclaration, ParallelBlock } from '@nowline/core';
+import { formatIsoDate } from './dsl-utils.js';
+import type { LayoutContext } from './layout-context.js';
+import { startTermsOf } from './start-terms.js';
+import type { PositionedItem } from './types.js';
+import { dateAtX, WAVE_EDGE_TOLERANCE_PX, waveFloorX } from './wave-layout.js';
+
+// Resolve the desired startX for a swimlane child: the latest of the
+// sequential default (`seqDefault`, the lane's rightmost time cursor across
+// all rows) and every `after:` term. Work has no fixed start pin, so
+// `after:` only ever delays (specs/dsl.md § Item Properties).
+//
+// `after:` accepts both entity ids (looked up in `ctx.entityRightEdges`) and
+// inline ISO date literals (looked up via `ctx.scale.forwardWithinDomain`).
+// The validator already enforces "at most one inline date per direction" so
+// at most one element in the list will hit the date path.
+//
+// In a roadmap with waves the result is floored by the child's wave and,
+// for a container, its lead wave (specs/waves.md §8.4), so the row
+// packer's predicted start matches the start `sequenceItem` / the
+// container node places.
+export function resolveChildStart(
+    child: ItemDeclaration | GroupBlock | ParallelBlock,
+    seqDefault: number,
+    ctx: LayoutContext,
+): number {
+    return waveFloorX(
+        child,
+        resolvePinnedOrSequentialStart(child.properties, seqDefault, ctx),
+        ctx,
+    );
+}
+
+let scheduleWarmStart = true;
+
+/**
+ * Turn the warm start from the day schedule on or off: the barrier seed of
+ * the place phase. Tests turn it off to compare against a cold start (same
+ * output, more barrier passes); layout never does.
+ */
+export function setScheduleWarmStart(enabled: boolean): void {
+    scheduleWarmStart = enabled;
+}
+
+/** True unless a test turned the warm start off (`setScheduleWarmStart`). */
+export function isScheduleWarmStart(): boolean {
+    return scheduleWarmStart;
+}
+
+/**
+ * The start before the wave floor: the latest `after:` end (ids and inline
+ * dates inside the window) no earlier than `seqDefault`, else `seqDefault`.
+ */
+export function resolvePinnedOrSequentialStart(
+    props: EntityProperty[],
+    seqDefault: number,
+    ctx: LayoutContext,
+): number {
+    const { after } = startTermsOf(props);
+    if (after.length > 0) {
+        let maxEnd = seqDefault;
+        for (const term of after) {
+            if ('date' in term) {
+                const xd = ctx.scale.forwardWithinDomain(term.date);
+                if (xd !== null) maxEnd = Math.max(maxEnd, xd);
+                continue;
+            }
+            const endX = ctx.entityRightEdges.get(term.ref);
+            if (endX !== undefined) maxEnd = Math.max(maxEnd, endX);
+        }
+        return maxEnd;
+    }
+    return seqDefault;
+}
+
+/**
+ * The inline `after:` date on a non-working day that set an item's start
+ * (NL.I1008, specs/working-calendar.md §6), for an item placed at `startX`.
+ * It reports only when it set the start, that is when the item starts at
+ * the date's x (within the edge tolerance): a later `after:` ref, the lane
+ * cursor or a wave floor that pushed the item past it never reports. A date
+ * on a working day or outside the date window reports nothing.
+ */
+export function nonWorkingPinOf(
+    props: EntityProperty[],
+    startX: number,
+    ctx: LayoutContext,
+): PositionedItem['nonWorkingPin'] {
+    if (!ctx.calendar.hasNonWorkingDays) return undefined;
+    const pin = startPinOf(props);
+    if (!pin || ctx.calendar.isWorkingDay(pin.date)) return undefined;
+    const pinX = ctx.scale.forwardWithinDomain(pin.date);
+    if (pinX === null || Math.abs(startX - pinX) >= WAVE_EDGE_TOLERANCE_PX) return undefined;
+    return { key: pin.key, pin: pin.raw, start: formatIsoDate(dateAtX(startX, ctx)) };
+}
+
+/** The inline `after:` date that can set an item's start. */
+function startPinOf(
+    props: EntityProperty[],
+): { key: 'after'; raw: string; date: Date } | undefined {
+    const { after } = startTermsOf(props);
+    for (const term of after) {
+        if ('date' in term) return { key: 'after', raw: term.raw, date: term.date };
+    }
+    return undefined;
+}

package/src/start-terms.ts

@@ -0,0 +1,38 @@
+// Start terms and wave floors, parsed once for every engine that places an
+// item (specs/scheduler-unification.md §3.4): engine C's day walker, engine
+// A's pixel walker and its non-working-pin helper, and the wave barrier's
+// floor projections. Each caller keeps its own `max` rule and maps the
+// parsed dates to its own unit (working-day index or x); only the parsing
+// is shared. Pure: no calendar, no scale. Work has no fixed start pin:
+// `date:` and `start:` on an item are unknown keys (specs/dsl.md § Item
+// Properties, "Pinning is not supported"), so nothing here reads them.
+
+import type { EntityProperty, WavePlan } from '@nowline/core';
+import { parseIsoDate, propValues } from './dsl-utils.js';
+
+/** One element of `after:`: an ISO date, or the id of an entity. */
+export type AfterTerm = { raw: string; date: Date } | { raw: string; ref: string };
+
+export interface StartTerms {
+    /** `after:` elements in source order: an ISO date or an id. */
+    after: ReadonlyArray<AfterTerm>;
+}
+
+/** The start terms of an item, group or parallel from its properties. */
+export function startTermsOf(props: EntityProperty[]): StartTerms {
+    const after = propValues(props, 'after').map((raw): AfterTerm => {
+        const date = parseIsoDate(raw);
+        return date ? { raw, date } : { raw, ref: raw };
+    });
+    return { after };
+}
+
+/**
+ * The declaration date of each wave's floor (`null` for a wave without a
+ * floor or whose date does not parse), at index `k - 1` for wave `k`. The
+ * dates are the plan's unclamped declarations: the day engine maps them with
+ * `workingIndexOf`, the pixel engine with `scale.forward`.
+ */
+export function waveFloorDates(plan: WavePlan): Array<Date | null> {
+    return plan.floors.map((f) => (f ? parseIsoDate(f.date) : null));
+}

package/src/status-dot.ts

@@ -0,0 +1,81 @@
+// Status-dot colour: the bar fill's luminance picks one of the theme's two
+// status-dot palettes, and the item's status picks the colour in it. Moved
+// from the SVG renderer (R5) so each positioned item carries its resolved
+// dot colour and the renderer only draws the dot.
+
+import type { Theme } from './themes/shape.js';
+import type { StatusKind } from './types.js';
+
+/**
+ * sRGB → relative luminance per WCAG 2.x. Input may be `#rrggbb`,
+ * `#rgb`, or a non-hex token like `none` / `transparent`. Non-hex
+ * inputs return 1 (treated as light) so a transparent bar reuses
+ * the chart's light bg. Mostly used to choose between two
+ * status-dot palettes (`onLight` vs `onDark`) so the dot reads on
+ * any bar fill — see `pickStatusDotPalette` and
+ * `specs/rendering.md`'s status-dot section.
+ *
+ * This is the renderer's copy, kept with its semantics: unlike
+ * `relativeLuminance` in `themes/contrast.ts`, which throws on anything
+ * but `#rgb` / `#rrggbb`, it never throws, and a 6-character string that
+ * is not hex gives `NaN` (so it compares false against any threshold).
+ */
+export function fillLuminance(hex: string): number {
+    if (!hex || hex === 'none' || hex === 'transparent') return 1;
+    let h = hex.startsWith('#') ? hex.slice(1) : hex;
+    if (h.length === 3) {
+        h = h
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    if (h.length !== 6) return 1;
+    const r = parseInt(h.slice(0, 2), 16) / 255;
+    const g = parseInt(h.slice(2, 4), 16) / 255;
+    const b = parseInt(h.slice(4, 6), 16) / 255;
+    const lin = (c: number): number => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/**
+ * Pick the status-dot palette whose tone contrasts best with the
+ * given bar bg.
+ *
+ * The crossover threshold is the bar luminance at which a deep dot
+ * (avg luminance ≈ 0.045 across `onLight` palette entries) and a
+ * pale dot (avg ≈ 0.85 across `onDark` entries) give equal WCAG
+ * contrast. Solving `(L_bar + 0.05)² ≈ 0.86 × 0.095` gives
+ * `L_bar ≈ 0.24`, so:
+ *   - bars with luminance ≥ 0.24 (most label-driven mid-tones AND
+ *     all pale status-tint bars) → `onLight` deep dot
+ *   - bars with luminance < 0.24 (dark status-tint bars in dark
+ *     theme, e.g. `#172554`) → `onDark` pale dot
+ */
+export function pickStatusDotPalette(bg: string, palette: Theme): Theme['statusDot']['onLight'] {
+    return fillLuminance(bg) >= 0.24 ? palette.statusDot.onLight : palette.statusDot.onDark;
+}
+
+/**
+ * The status dot's colour for a bar filled `bg` with status `status`.
+ *
+ * Status-dot color — the dot communicates status via hue, but
+ * the bar bg can range from pale status tints (`#eff6ff`) to
+ * saturated mid-tones (`#1e88e5` from `bg:blue` labels) to
+ * dark navies (`#172554` in dark theme), so a single palette
+ * can't keep contrast across all bars. Two palettes — `onLight`
+ * (deep tints, for pale bars) and `onDark` (pale tints, for
+ * saturated/dark bars) — are picked from based on the bar
+ * bg's relative luminance.
+ */
+export function statusDotColor(status: StatusKind, bg: string, palette: Theme): string {
+    const dotPalette = pickStatusDotPalette(bg, palette);
+    const statusColors: Record<string, string> = {
+        done: dotPalette.done,
+        'in-progress': dotPalette.inProgress,
+        'at-risk': dotPalette.atRisk,
+        blocked: dotPalette.blocked,
+        planned: dotPalette.planned,
+        neutral: dotPalette.neutral,
+    };
+    return statusColors[status] ?? statusColors.neutral;
+}

package/src/style-resolution.ts

@@ -5,6 +5,8 @@ import type {
     StyleDeclaration,
     StyleProperty,
 } from '@nowline/core';
+import { propKey, styleLayers } from '@nowline/core/internal';
+import { isNonWorkingDisplay } from './non-working-display.js';
 import { resolveColor } from './themes/index.js';
 import type { EntityStyle, Theme } from './themes/shape.js';
 import type { ResolvedStyle, SizeBucket } from './types.js';
@@ -31,10 +33,6 @@ export interface StyleContext {
     labels: Map<string, LabelDeclaration>;
 }
 
-function propKey(prop: { key: string }): string {
-    return prop.key.endsWith(':') ? prop.key.slice(0, -1) : prop.key;
-}
-
 function entityStyleToResolved(e: EntityStyle, theme: Theme): ResolvedStyle {
     return {
         bg: resolveColor(e.bg, theme),
@@ -61,6 +59,7 @@ function entityStyleToResolved(e: EntityStyle, theme: Theme): ResolvedStyle {
         // single-top-strip layout and keep the major-ticks-only grid.
         timelinePosition: 'top',
         minorGrid: false,
+        nonWorking: 'hide',
     };
 }
 
@@ -136,6 +135,9 @@ function applyProp(target: ResolvedStyle, key: string, value: string, theme: The
         case 'minor-grid':
             target.minorGrid = value === 'true';
             break;
+        case 'non-working':
+            if (isNonWorkingDisplay(value)) target.nonWorking = value;
+            break;
         default:
             break;
     }
@@ -161,7 +163,11 @@ function applyStyleDecl(
     }
 }
 
-function applyProperties(target: ResolvedStyle, props: EntityProperty[], theme: Theme): void {
+function applyProperties(
+    target: ResolvedStyle,
+    props: readonly EntityProperty[],
+    theme: Theme,
+): void {
     for (const p of props) {
         const key = propKey(p);
         if (p.value !== undefined) {
@@ -170,42 +176,14 @@ function applyProperties(target: ResolvedStyle, props: EntityProperty[], theme:
     }
 }
 
-function applyLabelStyleRefs(
-    target: ResolvedStyle,
-    props: EntityProperty[],
-    ctx: StyleContext,
-): void {
-    const labelsProp = props.find((p) => propKey(p) === 'labels');
-    if (!labelsProp) return;
-    const names: string[] = labelsProp.value ? [labelsProp.value] : labelsProp.values;
-    for (const name of names) {
-        const label = ctx.labels.get(name);
-        if (!label) continue;
-        // Label's `style:` ref gets applied.
-        const styleRef = label.properties.find((p) => propKey(p) === 'style');
-        if (styleRef?.value) {
-            applyStyleDecl(target, ctx.styles.get(styleRef.value), ctx.theme);
-        }
-    }
-}
-
-function applyEntityStyleRef(
-    target: ResolvedStyle,
-    props: EntityProperty[],
-    ctx: StyleContext,
-): void {
-    const styleProp = props.find((p) => propKey(p) === 'style');
-    if (!styleProp?.value) return;
-    applyStyleDecl(target, ctx.styles.get(styleProp.value), ctx.theme);
-}
-
 // Five-level precedence chain from specs/rendering.md § Style Precedence:
 // 1. system default (theme's EntityStyle for this type)
-// 2. config `default <entity>` properties
-// 3. label `style:` refs (per applied label)
-// 4. entity's own `style:` ref
-// 5. inline style properties on the entity (banned by validator for roadmap
-//    entities; still supported for declared styles / defaults)
+// 2-5. core's `styleLayers`: the config `default <entity>` line (its `style:`
+//    ref, then its raw properties), label `style:` refs (the first label wins
+//    a shared key), the entity's own `style:` ref, then its inline properties
+//    (banned by the validator for roadmap entities; still supported for
+//    declared styles / defaults). A style or label this file does not declare
+//    changes nothing.
 export function resolveStyle(
     entityType: EntityTypeKey,
     props: EntityProperty[],
@@ -213,26 +191,18 @@ export function resolveStyle(
 ): ResolvedStyle {
     const baseEntity = ctx.theme.entities[entityType];
     const out = entityStyleToResolved(baseEntity, ctx.theme);
-
-    // Level 2: config defaults
-    const defaultDecl = ctx.defaults.get(entityType);
-    if (defaultDecl) {
-        for (const p of defaultDecl.properties) {
-            if (p.value !== undefined) {
-                applyProp(out, propKey(p), p.value, ctx.theme);
-            }
+    for (const layer of styleLayers(entityType, props, ctx)) {
+        switch (layer.level) {
+            case 'default':
+            case 'inline':
+                applyProperties(out, layer.props, ctx.theme);
+                break;
+            case 'label':
+                break;
+            default:
+                applyStyleDecl(out, layer.decl, ctx.theme);
         }
     }
-
-    // Level 3: label styles (labels on this entity, each label's `style:` ref)
-    applyLabelStyleRefs(out, props, ctx);
-
-    // Level 4: entity's own `style:` ref
-    applyEntityStyleRef(out, props, ctx);
-
-    // Level 5: inline props on the entity
-    applyProperties(out, props, ctx.theme);
-
     return out;
 }
 

package/src/text-measure.ts

@@ -0,0 +1,71 @@
+// Shared text-measurement heuristics for layout.
+//
+// Layout has no font metrics, so every caption / header / marker fit
+// decision runs on one pessimistic per-character estimate. Keeping the
+// estimate and the whitespace word-wrap built on it in a single module
+// means the item-title wrap (`measureItem`) and the header-card wrap in
+// `layout.ts` can never disagree about how wide a string is.
+
+/**
+ * Rough px-width estimate for sans-serif text. Intentionally pessimistic
+ * (~0.58 em per char) so we err toward "doesn't fit" and trigger a
+ * spill or row bump rather than draw a title that clips.
+ */
+export function estimateTextWidth(text: string, fontSize: number): number {
+    return text.length * fontSize * 0.58;
+}
+
+/**
+ * `text` when it fits `maxWidth` (in px), else its longest prefix that fits
+ * with a trailing `…`, trailing whitespace dropped before the ellipsis. It
+ * always keeps the first character, so the result can overrun `maxWidth`
+ * when even one character and the ellipsis do not fit. Counts code points,
+ * so a surrogate pair is never split.
+ */
+export function ellipsizeToWidth(text: string, maxWidth: number, fontSize: number): string {
+    if (estimateTextWidth(text, fontSize) <= maxWidth) return text;
+    const chars = Array.from(text.trimStart());
+    for (let n = chars.length - 1; n >= 1; n--) {
+        const prefix = chars.slice(0, n).join('').trimEnd();
+        const candidate = `${prefix}…`;
+        if (estimateTextWidth(candidate, fontSize) <= maxWidth) return candidate;
+    }
+    return `${chars[0] ?? ''}…`;
+}
+
+/**
+ * Word-wrap `text` so that no line is wider than `maxWidth` (in px).
+ * Wrap points are whitespace only: a long single word is kept on its
+ * own line even if it overflows `maxWidth` — we never split a word in
+ * the middle. The wrap is greedy (fill each line before starting the
+ * next), which yields the minimum possible line count for a given
+ * width.
+ *
+ * `firstLineMaxWidth` (default `maxWidth`) narrows only the FIRST line,
+ * for callers whose first line has to stay clear of something the later
+ * lines are below (the item bar's top-right decorations).
+ */
+export function wrapText(
+    text: string,
+    maxWidth: number,
+    fontSize: number,
+    firstLineMaxWidth: number = maxWidth,
+): string[] {
+    if (!text) return [];
+    const words = text.split(/\s+/).filter((w) => w.length > 0);
+    if (words.length === 0) return [];
+    const lines: string[] = [];
+    let cur = '';
+    for (const word of words) {
+        const trial = cur ? `${cur} ${word}` : word;
+        const limit = lines.length === 0 ? firstLineMaxWidth : maxWidth;
+        if (cur && estimateTextWidth(trial, fontSize) > limit) {
+            lines.push(cur);
+            cur = word;
+        } else {
+            cur = trial;
+        }
+    }
+    if (cur) lines.push(cur);
+    return lines;
+}

package/src/themes/contrast.ts

@@ -0,0 +1,34 @@
+// WCAG 2.x contrast helpers over `#rgb` / `#rrggbb` hex colours. Used by the
+// theme contrast-floor tests and by wave strip label colour selection.
+
+export function hexToRgb(hex: string): [number, number, number] {
+    let h = hex.trim().replace(/^#/, '');
+    if (h.length === 3) {
+        h = h
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    if (!/^[0-9a-fA-F]{6}$/.test(h)) {
+        throw new Error(`Unsupported hex colour: ${hex}`);
+    }
+    return [
+        Number.parseInt(h.slice(0, 2), 16),
+        Number.parseInt(h.slice(2, 4), 16),
+        Number.parseInt(h.slice(4, 6), 16),
+    ];
+}
+
+export function relativeLuminance(hex: string): number {
+    const [r, g, b] = hexToRgb(hex).map((v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    }) as [number, number, number];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+export function contrastRatio(a: string, b: string): number {
+    const la = relativeLuminance(a);
+    const lb = relativeLuminance(b);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}

package/src/themes/dark.ts

@@ -62,13 +62,19 @@ export const darkTheme: Theme = {
             shadow: 'subtle',
             cornerRadius: 'sm',
         },
+        // Containers shade their body with `bg` as a light tint
+        // (CONTAINER_BODY_FILL_OPACITY); groups and parallels get distinct
+        // ones, and a parallel's header bracket is dashed, a group's solid
+        // (specs/true-width-layout.md §3.3).
         parallel: {
             ...baseEntity,
-            bracket: 'none',
+            bg: '#8c84ff',
+            bracket: 'dashed',
             padding: 'xs',
         },
         group: {
             ...baseEntity,
+            bg: '#f0a832',
             bracket: 'solid',
             padding: 'xs',
             fg: '#94a3b8',
@@ -125,6 +131,8 @@ export const darkTheme: Theme = {
     timeline: {
         gridLine: '#475569',
         minorGridLine: '#334155',
+        nonWorkingSeam: '#6b7a90',
+        nonWorkingFill: '#94a3b8',
         tickMark: '#334155',
         labelText: '#cbd5e1',
         panelFill: '#0f172a',
@@ -197,6 +205,15 @@ export const darkTheme: Theme = {
         badgeStroke: '#475569',
         badgeText: '#94a3b8',
     },
+    wave: {
+        stripFill: '#042f2e',
+        stripFillAlt: '#134e4a',
+        labelText: '#99f6e4',
+        labelMuted: '#5eead4',
+        boundary: '#2dd4bf',
+        hatch: '#0f172a',
+        hatchOnDark: '#ffffff',
+    },
     arrowhead: {
         neutral: '#94a3b8',
         light: '#64748b',
@@ -210,6 +227,16 @@ export const darkTheme: Theme = {
         planned: '#94a3b8',
         neutral: '#94a3b8',
     },
+    // Item bar fill per status, applied by layout when the item's resolved
+    // `bg` is still `entities.item.bg` (m2d Resolution 3).
+    statusTint: {
+        done: '#052e16',
+        inProgress: '#172554',
+        atRisk: '#422006',
+        blocked: '#7f1d1d',
+        planned: '#1e293b',
+        neutral: '#1e293b',
+    },
     // Status-dot palettes — see `light.ts` for the contract. Same
     // two palettes both themes; dark-theme bars come in BOTH dark
     // (status-tint) and bright (label-driven) flavors, so a single

package/src/themes/grayscale.ts

@@ -63,13 +63,19 @@ export const grayscaleTheme: Theme = {
             shadow: 'subtle',
             cornerRadius: 'sm',
         },
+        // Containers shade their body with `bg` as a light tint
+        // (CONTAINER_BODY_FILL_OPACITY); groups and parallels get distinct
+        // ones, and a parallel's header bracket is dashed, a group's solid
+        // (specs/true-width-layout.md §3.3).
         parallel: {
             ...baseEntity,
-            bracket: 'none',
+            bg: '#9e9e9e',
+            bracket: 'dashed',
             padding: 'xs',
         },
         group: {
             ...baseEntity,
+            bg: '#595959',
             bracket: 'solid',
             padding: 'xs',
             fg: '#595959',
@@ -126,6 +132,8 @@ export const grayscaleTheme: Theme = {
     timeline: {
         gridLine: '#bdbdbd',
         minorGridLine: '#d4d4d4',
+        nonWorkingSeam: '#9a9a9a',
+        nonWorkingFill: '#737373',
         tickMark: '#bdbdbd',
         labelText: '#737373',
         panelFill: '#ffffff',
@@ -198,6 +206,15 @@ export const grayscaleTheme: Theme = {
         badgeStroke: '#bdbdbd',
         badgeText: '#595959',
     },
+    wave: {
+        stripFill: '#fafafa',
+        stripFillAlt: '#e0e0e0',
+        labelText: '#212121',
+        labelMuted: '#616161',
+        boundary: '#616161',
+        hatch: '#000000',
+        hatchOnDark: '#ffffff',
+    },
     arrowhead: {
         neutral: '#595959',
         light: '#9e9e9e',
@@ -211,6 +228,16 @@ export const grayscaleTheme: Theme = {
         planned: '#bdbdbd',
         neutral: '#bdbdbd',
     },
+    // Item bar fill per status, applied by layout when the item's resolved
+    // `bg` is still `entities.item.bg` (m2d Resolution 3).
+    statusTint: {
+        done: '#ebebeb',
+        inProgress: '#e4e4e4',
+        atRisk: '#eeeeee',
+        blocked: '#dcdcdc',
+        planned: '#f5f5f5',
+        neutral: '#f5f5f5',
+    },
     statusDot: {
         onLight: {
             done: '#3a3a3a',

package/src/themes/index.ts

@@ -8,15 +8,21 @@ import { grayscaleNamed, grayscaleTheme } from './grayscale.js';
 import { lightNamed, lightTheme } from './light.js';
 import type { NamedColors, Theme } from './shape.js';
 
-export type ThemeName = 'light' | 'dark' | 'grayscale';
+// The one list of theme names. `ThemeName` derives from it and `themes` /
+// `namedColors` are keyed by it, so a new theme is added here and tsc then
+// demands its palette. Every surface that validates a theme (CLI `render` /
+// `serve`, the GitHub Action) goes through `normalizeThemeName` below.
+export const THEME_NAMES = ['light', 'dark', 'grayscale'] as const;
 
-export const themes: { light: Theme; dark: Theme; grayscale: Theme } = {
+export type ThemeName = (typeof THEME_NAMES)[number];
+
+export const themes: Record<ThemeName, Theme> = {
     light: lightTheme,
     dark: darkTheme,
     grayscale: grayscaleTheme,
 };
 
-export const namedColors: { light: NamedColors; dark: NamedColors; grayscale: NamedColors } = {
+export const namedColors: Record<ThemeName, NamedColors> = {
     light: lightNamed,
     dark: darkNamed,
     grayscale: grayscaleNamed,
@@ -37,10 +43,7 @@ const THEME_ALIASES: Record<string, ThemeName> = {
 export function normalizeThemeName(raw: string): ThemeName | undefined {
     const lower = raw.toLowerCase();
     const canonical = THEME_ALIASES[lower] ?? lower;
-    if (canonical === 'light' || canonical === 'dark' || canonical === 'grayscale') {
-        return canonical;
-    }
-    return undefined;
+    return THEME_NAMES.find((name) => name === canonical);
 }
 
 // Aliases collapse internationally-friendlier spellings onto the canonical