meno-core 1.0.52 → 1.0.53

package/lib/shared/interfaces/contentProvider.ts

@@ -43,6 +43,19 @@ export interface PageProvider {
    * @returns True if page exists
    */
   exists(path: string): Promise<boolean>;
+
+  /**
+   * Absolute base directory where page files live. Used by folder/move/rename
+   * operations that work on the filesystem directly. Optional — callers fall back
+   * to `projectPaths.pages()` when not provided.
+   */
+  baseDir?(): string;
+
+  /**
+   * Page file extension including the leading dot (e.g. ".json" or ".astro").
+   * Optional — callers fall back to ".json" when not provided.
+   */
+  extension?(): string;
 }
 
 /**

package/lib/shared/itemTemplateUtils.test.ts

@@ -316,6 +316,20 @@ describe('itemTemplateUtils', () => {
       expect(result).toEqual({ text: 'Static text', number: 42 });
     });
 
+    it('resolves a null field to an empty string, not null (C2 null-safety)', () => {
+      // A null CMS field must not become a null prop value — otherwise it can
+      // flow into a list `source` and crash with `null.length`.
+      const ctx: ItemContext = {
+        item: { _id: '1', title: 'Test', tags: null },
+        itemIndex: 0,
+        itemFirst: true,
+        itemLast: false,
+      };
+      const result = processItemPropsTemplate({ tags: '{{item.tags}}' }, ctx);
+      expect(result.tags).toBe('');
+      expect(result.tags).not.toBeNull();
+    });
+
     it('should process nested objects recursively', () => {
       const props = {
         outer: {

package/lib/shared/itemTemplateUtils.ts

@@ -227,7 +227,10 @@ function resolveCompleteTemplateRaw(
   if (!item || typeof item !== 'object') return undefined;
 
   const value = getNestedValue(item as Record<string, unknown>, trimmedField);
-  if (value === undefined) return undefined;
+  // Treat a resolved null like undefined: fall back to string processing (yields
+  // "") instead of letting a null CMS field become a null prop value, which can
+  // then flow into a list `source` and crash with `null.length`.
+  if (value === undefined || value === null) return undefined;
 
   // Apply resolveValue if provided (e.g., i18n resolution)
   if (resolveValue) {

package/lib/shared/registry/NodeTypeDefinition.ts

@@ -11,7 +11,7 @@ import type { StyleValue } from '../types/styles';
 /**
  * Tree icon types for node display
  */
-export type TreeIcon = 'TEXT' | 'COMPONENT' | 'HTML_ELEMENT' | 'IMAGE' | 'OBJECT' | 'SLOT_MARKER' | 'ARRAY' | 'UNKNOWN' | 'FORM';
+export type TreeIcon = 'TEXT' | 'COMPONENT' | 'HTML_ELEMENT' | 'IMAGE' | 'OBJECT' | 'SLOT_MARKER' | 'ARRAY' | 'UNKNOWN' | 'FORM' | 'LINK';
 
 /**
  * Node category for grouping in command palette

package/lib/shared/registry/nodeTypes/LinkNodeType.ts

@@ -48,7 +48,7 @@ export const LinkNodeType = createNodeType({
   },
 
   treeDisplay: {
-    icon: 'HTML_ELEMENT',
+    icon: 'LINK',
     getLabel: () => 'Link',
   },
 

package/lib/shared/slugTranslator.test.ts

@@ -5,10 +5,34 @@ import {
   translatePath,
   getLocaleLinks,
   resolveSlugToPageId,
+  buildPageUrlForLocale,
   type SlugMap,
 } from './slugTranslator';
 import type { I18nConfig } from './types';
 
+describe('buildPageUrlForLocale', () => {
+  test('default locale produces bare path', () => {
+    expect(buildPageUrlForLocale('about', 'en', 'en')).toBe('/about');
+  });
+
+  test('default locale empty slug collapses to root', () => {
+    expect(buildPageUrlForLocale('', 'en', 'en')).toBe('/');
+  });
+
+  test('non-default locale gets locale prefix', () => {
+    expect(buildPageUrlForLocale('o-nas', 'pl', 'en')).toBe('/pl/o-nas');
+  });
+
+  test('non-default locale empty slug → just locale prefix', () => {
+    expect(buildPageUrlForLocale('', 'pl', 'en')).toBe('/pl');
+  });
+
+  test('strips leading slash from slug input', () => {
+    expect(buildPageUrlForLocale('/about', 'en', 'en')).toBe('/about');
+    expect(buildPageUrlForLocale('/o-nas', 'pl', 'en')).toBe('/pl/o-nas');
+  });
+});
+
 describe('slugTranslator', () => {
   let slugMappings: SlugMap[];
   let slugIndex: Map<string, any>;

package/lib/shared/slugTranslator.ts

@@ -161,6 +161,30 @@ export function getLocaleLinks(
   }));
 }
 
+/**
+ * Build the URL a page is served at for a given locale.
+ *
+ * Conventions (match what `translatePath` / the routing layer at
+ * packages/core/lib/server/routes/pages.ts produces):
+ *   - Default locale paths are bare:                "/" or "/{slug}"
+ *   - Non-default locale paths are locale-prefixed: "/{locale}" or "/{locale}/{slug}"
+ *   - An empty slug (e.g. for the index page) collapses to the root.
+ *
+ * Used by the slug/page-rename flow to compute the (old, new) href pair
+ * for cascade rewrites in incoming links.
+ */
+export function buildPageUrlForLocale(
+  slug: string,
+  locale: string,
+  defaultLocale: string,
+): string {
+  const cleanSlug = slug.replace(/^\/+/, '');
+  if (locale === defaultLocale) {
+    return cleanSlug === '' ? '/' : `/${cleanSlug}`;
+  }
+  return cleanSlug === '' ? `/${locale}` : `/${locale}/${cleanSlug}`;
+}
+
 /**
  * Resolve a slug to its pageId (for server-side page loading)
  *

package/lib/shared/styleNodeUtils.ts

@@ -39,8 +39,11 @@ export function applyStylesToNode(
  * When both are responsive ({ base, tablet, mobile }), merges per breakpoint
  * so that instance properties override structure properties within each breakpoint
  * rather than replacing the entire breakpoint object.
+ *
+ * Pure (returns a new object; does not mutate inputs). Exported so the Astro
+ * exporter can replicate SSR's instance-into-root style merge at build time.
  */
-function deepMergeStyles(
+export function deepMergeStyles(
   existing: StyleValue | Record<string, any>,
   instance: StyleValue | Record<string, any> | null | undefined
 ): StyleValue {

package/lib/shared/tree/PathBuilder.test.ts

@@ -8,7 +8,12 @@
  */
 
 import { describe, it, expect } from 'bun:test';
-import { buildTreePathsWithRendered, buildComponentTreePaths, type NavigationContext } from './PathBuilder';
+import {
+  buildTreePathsWithRendered,
+  buildComponentTreePaths,
+  computeCumulativeInstancePath,
+  type NavigationContext,
+} from './PathBuilder';
 import type { Path } from '../pathArrayUtils';
 
 // Helper to wrap component structure in expected PageData format
@@ -393,3 +398,125 @@ describe('PathBuilder - post-slot element path calculation', () => {
     });
   });
 });
+
+describe('computeCumulativeInstancePath', () => {
+  it('returns null for empty / missing history', () => {
+    expect(computeCumulativeInstancePath(undefined)).toBeNull();
+    expect(computeCumulativeInstancePath([])).toBeNull();
+  });
+
+  it('returns the first entry path verbatim when there is one entry', () => {
+    expect(
+      computeCumulativeInstancePath([
+        { componentInstancePath: [0], componentInstanceRenderedPath: [0] },
+      ]),
+    ).toEqual([0]);
+    expect(
+      computeCumulativeInstancePath([
+        { componentInstancePath: [0, 2], componentInstanceRenderedPath: [0, 2] },
+      ]),
+    ).toEqual([0, 2]);
+  });
+
+  it('stacks deeper entries via slice(1) onto the first', () => {
+    expect(
+      computeCumulativeInstancePath([
+        { componentInstancePath: [0], componentInstanceRenderedPath: [0] },
+        { componentInstancePath: [0, 0, 0, 2], componentInstanceRenderedPath: [0, 0, 0, 8] },
+      ]),
+    ).toEqual([0, 0, 0, 8]);
+    expect(
+      computeCumulativeInstancePath([
+        { componentInstancePath: [0], componentInstanceRenderedPath: [0] },
+        { componentInstancePath: [0, 0, 0, 2], componentInstanceRenderedPath: [0, 0, 0, 8] },
+        { componentInstancePath: [0, 1], componentInstanceRenderedPath: [0, 1] },
+      ]),
+    ).toEqual([0, 0, 0, 8, 1]);
+  });
+
+  it('falls back to componentInstancePath when componentInstanceRenderedPath is missing', () => {
+    expect(
+      computeCumulativeInstancePath([
+        { componentInstancePath: [0, 2] },
+        { componentInstancePath: [0, 1] },
+      ]),
+    ).toEqual([0, 2, 1]);
+  });
+});
+
+describe('slotRenderedPaths on slot entries', () => {
+  const layoutStructure = {
+    type: 'node' as const,
+    tag: 'div',
+    children: [
+      { type: 'component' as const, component: 'Nav' },
+      { type: 'slot' as const },
+      { type: 'component' as const, component: 'Footer' },
+    ],
+  };
+
+  it('emits N occupied paths for a slot with N instance children (N > 1)', () => {
+    const navigationHistory: NavigationContext[] = [
+      {
+        componentInstancePath: [0],
+        componentInstanceRenderedPath: [0],
+        instanceChildren: Array.from({ length: 7 }, (_, i) => ({
+          type: 'component' as const,
+          component: `Section${i + 1}`,
+        })) as any,
+      },
+    ];
+
+    const paths = buildTreePathsWithRendered(
+      wrapAsComponentData(layoutStructure),
+      undefined,
+      navigationHistory,
+    );
+
+    // Slot's logical path is [0, 1] (second child of structure root).
+    const slotEntry = paths.find(
+      (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 1,
+    );
+    expect(slotEntry).toBeDefined();
+    expect(slotEntry!.renderedPath).toEqual([0, 1]);
+    // With 7 instance children, the slot occupies positions 1..7 under the
+    // parent (which is at [0]).
+    expect(slotEntry!.slotRenderedPaths).toEqual([
+      [0, 1],
+      [0, 2],
+      [0, 3],
+      [0, 4],
+      [0, 5],
+      [0, 6],
+      [0, 7],
+    ]);
+  });
+
+  it('omits slotRenderedPaths when slot has 0 or 1 instance children', () => {
+    const noChildren: NavigationContext[] = [
+      { componentInstancePath: [0], componentInstanceRenderedPath: [0], instanceChildren: [] },
+    ];
+    const oneChild: NavigationContext[] = [
+      {
+        componentInstancePath: [0],
+        componentInstanceRenderedPath: [0],
+        instanceChildren: [{ type: 'component' as const, component: 'Only' }] as any,
+      },
+    ];
+    const noChildrenPaths = buildTreePathsWithRendered(
+      wrapAsComponentData(layoutStructure),
+      undefined,
+      noChildren,
+    );
+    const oneChildPaths = buildTreePathsWithRendered(
+      wrapAsComponentData(layoutStructure),
+      undefined,
+      oneChild,
+    );
+
+    const slotEntryNo = noChildrenPaths.find((p) => p.path.length === 2 && p.path[1] === 1);
+    const slotEntryOne = oneChildPaths.find((p) => p.path.length === 2 && p.path[1] === 1);
+    expect(slotEntryNo?.slotRenderedPaths).toBeUndefined();
+    expect(slotEntryOne?.slotRenderedPaths).toBeUndefined();
+  });
+});

package/lib/shared/tree/PathBuilder.ts

@@ -18,6 +18,14 @@ import { isComponentNode, isSlotMarker, isLocaleListNode, isCMSListNode, isListN
 export interface NodePathData {
   path: Path;           // Logical path in data structure
   renderedPath: Path;   // Path adjusted for component structure wrapping
+  /**
+   * For slot markers being edited from inside their host component: the
+   * page-absolute rendered paths of every DOM position the slot occupies
+   * after the renderer inlines its N instance children. Length === N.
+   * Undefined for non-slot nodes and for slot markers with 0 or 1 children
+   * (where the single `renderedPath` already represents the whole region).
+   */
+  slotRenderedPaths?: Path[];
 }
 
 /**
@@ -201,6 +209,32 @@ export interface NavigationContext {
   cmsItemContext?: CMSItemContext | null;  // CMS context when editing component inside CMS List
 }
 
+/**
+ * Stack a navigation history's componentInstanceRenderedPath entries into one
+ * page-absolute path. The first entry's path is taken as-is; every subsequent
+ * entry contributes `path.slice(1)` (i.e. its component-internal suffix), so
+ * the storage convention is "first entry is page-absolute, deeper entries are
+ * component-internal-with-offset". Used to compute the prefix that
+ * buildTreePathsWithRendered prepends, and to know how many leading elements
+ * to strip when extracting a component-internal path back out.
+ */
+export function computeCumulativeInstancePath(
+  navigationHistory: NavigationContext[] | undefined,
+): Path | null {
+  if (!navigationHistory || navigationHistory.length === 0) return null;
+  let cumulative: Path | null =
+    navigationHistory[0].componentInstanceRenderedPath ?? navigationHistory[0].componentInstancePath;
+  if (!cumulative) return null;
+  for (let i = 1; i < navigationHistory.length; i++) {
+    const next =
+      navigationHistory[i].componentInstanceRenderedPath ?? navigationHistory[i].componentInstancePath;
+    if (next) {
+      cumulative = [...cumulative, ...next.slice(1)];
+    }
+  }
+  return cumulative;
+}
+
 /**
  * Build all paths from tree with both logical and rendered paths
  *
@@ -237,26 +271,21 @@ export function buildTreePathsWithRendered(
 
   // Calculate cumulative component instance path for nested editing
   // Use rendered paths to ensure DOM queries have correct element paths
-  let cumulativeInstancePath: Path | null = null;
-  if (navigationHistory && navigationHistory.length > 0) {
-    // Use rendered path for accurate DOM queries
-    cumulativeInstancePath = navigationHistory[0].componentInstanceRenderedPath ?? navigationHistory[0].componentInstancePath;
-
-    // For nested components, chain the paths
-    for (let i = 1; i < navigationHistory.length; i++) {
-      const nextPath = navigationHistory[i].componentInstanceRenderedPath ?? navigationHistory[i].componentInstancePath;
-      if (nextPath && cumulativeInstancePath) {
-        // Append path segments except root
-        cumulativeInstancePath = [
-          ...cumulativeInstancePath,
-          ...nextPath.slice(1)
-        ];
-      }
-    }
-  }
+  const cumulativeInstancePath = computeCumulativeInstancePath(navigationHistory);
 
   const result: NodePathData[] = [];
 
+  // The slot under the host component being edited renders into N DOM
+  // positions equal to the host's `instanceChildren` count. Snapshot that
+  // count once: it's the same source `calculateRenderedPath` uses for the
+  // post-slot offset (the LAST navigation entry's instanceChildren).
+  const hostInstanceChildrenCount =
+    navigationHistory && navigationHistory.length > 0
+      ? (Array.isArray(navigationHistory[navigationHistory.length - 1].instanceChildren)
+          ? navigationHistory[navigationHistory.length - 1].instanceChildren!.length
+          : 0)
+      : 0;
+
   function traverse(node: ComponentNode, currentPath: Path = [0]): void {
     // Calculate rendered path for this node
     // Call calculateRenderedPath when:
@@ -273,9 +302,15 @@ export function buildTreePathsWithRendered(
       ? [...cumulativeInstancePath, ...renderedPath.slice(1)]
       : renderedPath;
 
+    const slotRenderedPaths =
+      isSlotMarker(node) && hostInstanceChildrenCount > 1
+        ? expandSlotRenderedPaths(adjustedRenderedPath, hostInstanceChildrenCount)
+        : undefined;
+
     result.push({
       path: currentPath,  // Keep logical path component-relative
       renderedPath: adjustedRenderedPath,  // Adjust rendered path for page-relative queries
+      ...(slotRenderedPaths ? { slotRenderedPaths } : {}),
     });
 
     // Traverse children
@@ -299,6 +334,23 @@ export function buildTreePathsWithRendered(
   return result;
 }
 
+/**
+ * Given the slot marker's primary rendered path (its position in the parent
+ * AFTER all path adjustments) and the count N of injected instance children,
+ * return the N page-absolute paths the slot's children occupy in the DOM:
+ * positions [slotIdx, slotIdx+1, ..., slotIdx+N-1] under the same parent.
+ */
+function expandSlotRenderedPaths(slotRenderedPath: Path, instanceChildrenCount: number): Path[] {
+  if (instanceChildrenCount <= 0 || slotRenderedPath.length === 0) return [];
+  const prefix = slotRenderedPath.slice(0, -1);
+  const slotIdx = slotRenderedPath[slotRenderedPath.length - 1];
+  const out: Path[] = [];
+  for (let i = 0; i < instanceChildrenCount; i++) {
+    out.push([...prefix, slotIdx + i]);
+  }
+  return out;
+}
+
 /**
  * Build tree paths for a specific component context
  *
@@ -318,20 +370,14 @@ export function buildComponentTreePaths(
   const result: NodePathData[] = [];
 
   // Calculate cumulative component instance path for navigation context
-  let cumulativeInstancePath: Path | null = null;
-  if (navigationHistory && navigationHistory.length > 0) {
-    cumulativeInstancePath = navigationHistory[0].componentInstanceRenderedPath ?? navigationHistory[0].componentInstancePath;
-
-    for (let i = 1; i < navigationHistory.length; i++) {
-      const nextPath = navigationHistory[i].componentInstanceRenderedPath ?? navigationHistory[i].componentInstancePath;
-      if (nextPath && cumulativeInstancePath) {
-        cumulativeInstancePath = [
-          ...cumulativeInstancePath,
-          ...nextPath.slice(1)
-        ];
-      }
-    }
-  }
+  const cumulativeInstancePath = computeCumulativeInstancePath(navigationHistory);
+
+  const hostInstanceChildrenCount =
+    navigationHistory && navigationHistory.length > 0
+      ? (Array.isArray(navigationHistory[navigationHistory.length - 1].instanceChildren)
+          ? navigationHistory[navigationHistory.length - 1].instanceChildren!.length
+          : 0)
+      : 0;
 
   function traverse(node: ComponentNode, currentPath: Path = [0]): void {
     // In component context, logical and rendered paths may differ
@@ -346,9 +392,15 @@ export function buildComponentTreePaths(
       ? [...cumulativeInstancePath, ...renderedPath.slice(1)]
       : renderedPath;
 
+    const slotRenderedPaths =
+      isSlotMarker(node) && hostInstanceChildrenCount > 1
+        ? expandSlotRenderedPaths(adjustedRenderedPath, hostInstanceChildrenCount)
+        : undefined;
+
     result.push({
       path: currentPath,
       renderedPath: adjustedRenderedPath,
+      ...(slotRenderedPaths ? { slotRenderedPaths } : {}),
     });
 
     // Traverse children

package/lib/shared/types/comment.ts

@@ -0,0 +1,99 @@
+/**
+ * Comment / Pin Types
+ *
+ * Comments are Figma-style pins placed on components in the studio canvas.
+ * One file per pin (thread embedded). Storage layout (status as top folder):
+ *   {projectRoot}/comments/<status>/<pageSlug>--<seq>--<titleSlug>.json
+ *   e.g. comments/open/blog__post--3--hero-is-too-dark.json
+ *
+ * Pins are an authoring-time concept — they live in studio only.
+ */
+
+/** Workflow status. No custom statuses for MVP. */
+export type CommentStatus =
+  | 'open'
+  | 'in-progress'
+  | 'ready-for-review'
+  | 'resolved'
+  | 'closed';
+
+export const COMMENT_STATUSES: readonly CommentStatus[] = [
+  'open',
+  'in-progress',
+  'ready-for-review',
+  'resolved',
+  'closed',
+] as const;
+
+/** Identifies the GitHub user who authored a thread entry. */
+export interface CommentAuthor {
+  /** GitHub login. `"local"` for non-electron / unauthenticated runs. */
+  login: string;
+  name?: string;
+  avatarUrl?: string;
+}
+
+/**
+ * Identity fingerprint for the anchored node — used to detect orphan pins
+ * when the tree shifts. Mirrors the shape of `nodesMatch()` in NodeStore.
+ */
+export interface CommentNodeIdentity {
+  /** `'component'` or `'node'` (HTML). */
+  kind: 'component' | 'node';
+  /** Component name (when kind=component) or HTML tag (when kind=node). */
+  name: string;
+  /** Editor-set label, used to disambiguate same-type siblings. */
+  label?: string;
+}
+
+/**
+ * Where the pin attaches on the page. nodePath is positional; nodeIdentity
+ * is used at render time to detect that the pin has been orphaned (Phase 4).
+ */
+export interface CommentAnchor {
+  /** Path array into the page tree, e.g. [0, 1, 2]. */
+  nodePath: number[];
+  /** Identity fingerprint for orphan detection. */
+  nodeIdentity: CommentNodeIdentity;
+  /** Horizontal offset inside the component's bounding box, 0..1. */
+  offsetXPercent: number;
+  /** Vertical offset inside the component's bounding box, 0..1. */
+  offsetYPercent: number;
+  /**
+   * Breakpoint frame this pin was placed on (e.g. `'base'`, `'tablet'`,
+   * `'mobile'`). Only set for pins created in Design Mode's multi-frame
+   * canvas, so the pin is only shown on the frame where it was pinned.
+   * When unset, the pin renders on every frame (single-frame / page mode,
+   * or pins created before this field existed).
+   */
+  breakpoint?: string;
+}
+
+/** One message in a comment's thread (initial + replies). */
+export interface CommentThreadEntry {
+  id: string;
+  author: CommentAuthor;
+  /** ISO timestamp. */
+  createdAt: string;
+  text: string;
+  /** When this entry transitioned the comment status, the target status. */
+  statusChange: CommentStatus | null;
+}
+
+/** A pinned comment. */
+export interface Comment {
+  _id: string;
+  _filename: string;
+  /** Page path the pin lives on (e.g. `"blog/post"`). */
+  _pagePath: string;
+  /** Stable per-page badge number. Server assigns at create time. */
+  _seq: number;
+  /** ISO timestamps. */
+  _createdAt: string;
+  _updatedAt: string;
+  /** Git HEAD SHA captured at create time, or null when unavailable. */
+  _commitSha: string | null;
+  anchor: CommentAnchor;
+  status: CommentStatus;
+  thread: CommentThreadEntry[];
+}

package/lib/shared/types/index.ts

@@ -173,5 +173,17 @@ export type {
   VariantResult,
 } from './experiments';
 
+// Comment / Pin types
+export type {
+  CommentStatus,
+  CommentAuthor,
+  CommentNodeIdentity,
+  CommentAnchor,
+  CommentThreadEntry,
+  Comment,
+} from './comment';
+
+export { COMMENT_STATUSES } from './comment';
+
 // Note: Path types are exported from ../paths/index.ts, not from here
 

package/lib/shared/types/rendering.ts

@@ -57,6 +57,14 @@ export interface TemplateContext {
   props: Record<string, unknown>;
   /** Component definition (for variants, defaults) */
   componentDef?: ComponentDefinition | StructuredComponentDefinition;
+  /**
+   * Resolved props of the component that hosts this one (one level up).
+   * Layered into template evaluation at lower precedence than `props`, so a
+   * `{{x}}` in a child component's structure falls back to the parent's `x`
+   * when the child doesn't declare it. Aligned with `buildListResolutionScope`
+   * for list `items` / `filter` templates.
+   */
+  parentProps?: Record<string, unknown>;
   /** Future extension points (cms, page, etc.) */
   [namespace: string]: unknown;
 }

package/lib/shared/utilityClassConfig.ts

@@ -321,13 +321,13 @@ export const specialValueMappings: Record<string, Record<string, string>> = {
     'flex-end': 'jc-e',
     'space-between': 'jc-b',
     'space-around': 'jc-a',
-    'space-evenly': 'jc-e',
+    'space-evenly': 'jc-ev',
   },
   alignItems: {
     center: 'ai-c',
     'flex-start': 'ai-s',
     'flex-end': 'ai-e',
-    stretch: 'ai-s',
+    stretch: 'ai-st',
     baseline: 'ai-b',
   },
   overflow: {
@@ -378,9 +378,11 @@ export const classToStyleSpecialCases: Record<string, { prop: string; value: str
   'jc-e': { prop: 'justifyContent', value: 'flex-end' },
   'jc-b': { prop: 'justifyContent', value: 'space-between' },
   'jc-a': { prop: 'justifyContent', value: 'space-around' },
+  'jc-ev': { prop: 'justifyContent', value: 'space-evenly' },
   'ai-c': { prop: 'alignItems', value: 'center' },
   'ai-s': { prop: 'alignItems', value: 'flex-start' },
   'ai-e': { prop: 'alignItems', value: 'flex-end' },
+  'ai-st': { prop: 'alignItems', value: 'stretch' },
   'ai-b': { prop: 'alignItems', value: 'baseline' },
   'o-h': { prop: 'overflow', value: 'hidden' },
   'o-a': { prop: 'overflow', value: 'auto' },

package/lib/shared/utilityClassMapper.test.ts

@@ -65,6 +65,30 @@ describe('utilityClassMapper', () => {
       const classes = stylesToClasses({ aspectRatio: '1/1' });
       expect(classes).toContain('ar-1s1');
     });
+
+    test('align-items stretch maps to a distinct class from flex-start', () => {
+      // Regression: stretch used to share the `ai-s` class with flex-start,
+      // so imported `align-items: stretch` silently rendered as flex-start
+      // — exactly what made Finsweet's mobile CTA buttons line up to the
+      // left instead of stretching to full width.
+      const stretchClasses = stylesToClasses({ alignItems: 'stretch' });
+      const flexStartClasses = stylesToClasses({ alignItems: 'flex-start' });
+      expect(stretchClasses).toContain('ai-st');
+      expect(flexStartClasses).toContain('ai-s');
+      expect(stretchClasses).not.toContain('ai-s');
+      expect(classToStyle('ai-st')).toEqual({ prop: 'alignItems', value: 'stretch' });
+    });
+
+    test('justify-content space-evenly maps to a distinct class from flex-end', () => {
+      // Same bug shape as align-items: `space-evenly` previously aliased to
+      // `jc-e` (flex-end), silently changing layout.
+      const evenly = stylesToClasses({ justifyContent: 'space-evenly' });
+      const end = stylesToClasses({ justifyContent: 'flex-end' });
+      expect(evenly).toContain('jc-ev');
+      expect(end).toContain('jc-e');
+      expect(evenly).not.toContain('jc-e');
+      expect(classToStyle('jc-ev')).toEqual({ prop: 'justifyContent', value: 'space-evenly' });
+    });
   });
 
   describe('responsiveStylesToClasses', () => {