meno-core 1.1.6 → 1.1.8

package/lib/client/core/ComponentBuilder.test.ts

@@ -1823,6 +1823,46 @@ describe('ComponentBuilder', () => {
 
       expect(result).not.toBeNull();
     });
+
+    describe('localized visibility (`if` as an _i18n value)', () => {
+      // The canvas previews ONE locale at a time; a node whose `if` is per-locale must
+      // appear/disappear with it, matching the built site's `i18n({…}) && ( … )`.
+      const i18nConfig = {
+        defaultLocale: 'en',
+        locales: [
+          { code: 'en', name: 'EN', nativeName: 'English', langTag: 'en-US' },
+          { code: 'pl', name: 'PL', nativeName: 'Polski', langTag: 'pl-PL' },
+        ],
+      };
+      const node = {
+        type: 'node',
+        tag: 'div',
+        if: { _i18n: true, en: true, pl: false },
+        children: ['Content'],
+      } as any as ComponentNode;
+
+      test('renders in a locale whose slot is true', () => {
+        expect(builder.buildComponent({ node, i18nConfig, locale: 'en' })).not.toBeNull();
+      });
+
+      test('is dropped in a locale whose slot is false', () => {
+        expect(builder.buildComponent({ node, i18nConfig, locale: 'pl' })).toBeNull();
+      });
+
+      test('with no active locale, falls back to the default locale slot', () => {
+        expect(builder.buildComponent({ node, i18nConfig })).not.toBeNull();
+        const hiddenByDefault = { ...(node as any), if: { _i18n: true, en: false, pl: true } };
+        expect(builder.buildComponent({ node: hiddenByDefault, i18nConfig })).toBeNull();
+      });
+
+      test('a locale with no slot inherits the default locale slot', () => {
+        expect(builder.buildComponent({ node, i18nConfig, locale: 'de' })).not.toBeNull();
+      });
+
+      test('a CMS locale override wins over the page locale (CMS-list preview parity)', () => {
+        expect(builder.buildComponent({ node, i18nConfig, locale: 'en', cmsLocale: 'pl' })).toBeNull();
+      });
+    });
   });
 
   describe('Edge Case 7: List Paths Tracking (Collection Mode)', () => {

package/lib/client/core/ComponentBuilder.ts

@@ -27,6 +27,7 @@ import {
   isValidNodeType,
   markAsSlotContent,
   isBooleanMapping,
+  resolveIfI18n,
   hasIf,
   hasChildren,
   isSlotContent as isSlotContentNode,
@@ -183,7 +184,7 @@ export class ComponentBuilder {
 
   /**
    * Evaluate the if condition on a node with full context.
-   * Handles boolean, mapping, and string template values.
+   * Handles boolean, localized (`_i18n`), mapping, and string template values.
    * Returns true if node should be rendered, false if it should be skipped.
    */
   private evaluateIfCondition(node: ComponentNode, ctx: BuilderContext): boolean {
@@ -199,6 +200,12 @@ export class ComponentBuilder {
       return ifValue;
     }
 
+    // Localized visibility (`{ _i18n: true, en: true, pl: false }`) — the canvas previews
+    // the locale it is currently rendering, matching the built site's `i18n({…}) && (…)`.
+    if (isI18nValue(ifValue)) {
+      return Boolean(resolveIfI18n(ifValue, ctx.cmsLocale || ctx.locale, ctx.i18nConfig));
+    }
+
     // Mapping value - resolve using component props
     if (isBooleanMapping(ifValue)) {
       const props = ctx.componentResolvedProps || {};

package/lib/server/routes/static.test.ts

@@ -0,0 +1,67 @@
+/**
+ * Static asset resolution across the two project layouts.
+ *
+ * An ASTRO project serves static files from `public/` (Astro's web root); a legacy JSON
+ * project keeps `images/`, `fonts/`, … at the project root. `handleStaticRoute` resolved
+ * only the root form, so the Meno Select (meno-core SSR) canvas 404'd every `/images/…`
+ * in an Astro project while the real Astro render served the same URL — the adlittle-web
+ * "photos load in Astro but not in Meno Select" report.
+ */
+
+import { test, expect, describe, beforeAll, afterAll } from 'bun:test';
+import { mkdtempSync, mkdirSync, writeFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { setProjectRoot } from '../projectContext';
+import { handleStaticRoute } from './static';
+
+let root: string;
+
+beforeAll(() => {
+  root = mkdtempSync(join(tmpdir(), 'meno-static-'));
+  // Astro layout: the asset lives under public/.
+  mkdirSync(join(root, 'public', 'images', 'leaders'), { recursive: true });
+  writeFileSync(join(root, 'public', 'images', 'leaders', 'ada.webp'), 'PUBLIC');
+  // Legacy JSON layout: the asset sits at the project root.
+  mkdirSync(join(root, 'images'), { recursive: true });
+  writeFileSync(join(root, 'images', 'legacy.webp'), 'ROOT');
+  // Same relative path present in BOTH — public/ must win (it is the served web root).
+  writeFileSync(join(root, 'images', 'both.webp'), 'ROOT');
+  mkdirSync(join(root, 'public', 'images'), { recursive: true });
+  writeFileSync(join(root, 'public', 'images', 'both.webp'), 'PUBLIC');
+  setProjectRoot(root);
+});
+
+afterAll(() => rmSync(root, { recursive: true, force: true }));
+
+const get = (p: string) => handleStaticRoute(new URL(`http://localhost${p}`));
+
+describe('handleStaticRoute — project asset layouts', () => {
+  test('ASTRO layout: /images/… resolves under public/', async () => {
+    const res = await get('/images/leaders/ada.webp');
+    expect(res).toBeDefined();
+    expect(await res!.text()).toBe('PUBLIC');
+  });
+
+  test('LEGACY JSON layout: /images/… still resolves at the project root', async () => {
+    const res = await get('/images/legacy.webp');
+    expect(res).toBeDefined();
+    expect(await res!.text()).toBe('ROOT');
+  });
+
+  test('public/ wins when the same path exists in both layouts', async () => {
+    const res = await get('/images/both.webp');
+    expect(await res!.text()).toBe('PUBLIC');
+  });
+
+  test('a genuinely missing asset is still undefined (404), not the public/ probe', async () => {
+    expect(await get('/images/nope.webp')).toBeUndefined();
+  });
+
+  test('path traversal via the public/ probe stays contained', async () => {
+    writeFileSync(join(root, 'secret.txt'), 'SECRET');
+    // `/images/../../secret.txt` must not escape the project root through either candidate.
+    const res = await get('/images/../../secret.txt');
+    if (res) expect(await res.text()).not.toBe('SECRET');
+  });
+});

package/lib/server/routes/static.ts

@@ -85,7 +85,15 @@ export async function handleStaticRoute(url: URL, _req?: Request): Promise<Respo
     decodedPathname.startsWith('/videos/')
   ) {
     rootPath = getProjectRoot();
-    filePath = resolveProjectPath(decodedPathname.slice(1)); // Remove leading /
+    const rel = decodedPathname.slice(1); // Remove leading /
+    // Asset layout differs by project format: an ASTRO project serves static files from
+    // `public/` (Astro's web root), a legacy JSON project keeps them at the project root.
+    // Try `public/` first and fall back, so both resolve. Without the `public/` probe the
+    // Meno Select (meno-core SSR) canvas 404s EVERY image in an Astro project — the real
+    // Astro render serves the same `/images/…` URL fine, so it looks like a renderer bug.
+    const fromPublic = resolveProjectPath('public', rel);
+    filePath =
+      isPathWithinRoot(fromPublic, rootPath) && (await fileExists(fromPublic)) ? fromPublic : resolveProjectPath(rel);
   } else {
     rootPath = getPackageRoot();
     filePath = resolvePackagePath(decodedPathname.slice(1)); // Remove leading /

package/lib/server/ssr/htmlGenerator.ts

@@ -609,11 +609,18 @@ export async function generateSSRHTML(
   printMissingStyleWarnings(false);
 
   // Build base CSS (reset styles)
+  // The border line mirrors meno-astro's BaseLayout `@layer base` reset (Tailwind Preflight
+  // parity) so the design canvas and the real Astro build agree on border rendering. Without
+  // it, `border-l-[3px] border-solid` — correct Tailwind — paints a full box instead of one
+  // edge, because a bare `border-style` with no zero-width baseline arms all four edges.
   const baseCSS = `* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
+*, ::before, ::after, ::backdrop, ::file-selector-button {
+  border: 0 solid;
+}
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
 }

package/lib/server/ssr/ssrRenderer.test.ts

@@ -522,6 +522,37 @@ describe('ssrRenderer', () => {
       expect(html).toContain('Hello');
     });
 
+    test('resolves _i18n on `if` — the node renders only in the locales left on', async () => {
+      const node = {
+        type: 'node',
+        tag: 'div',
+        children: [
+          { type: 'node', tag: 'span', if: { _i18n: true, en: true, pl: false }, children: 'english-only' },
+          { type: 'node', tag: 'em', if: { _i18n: true, en: false, pl: true }, children: 'polish-only' },
+        ],
+      };
+
+      const enHtml = await render(node, { i18nConfig });
+      expect(enHtml).toContain('english-only');
+      expect(enHtml).not.toContain('polish-only');
+
+      const plHtml = await render(node, { locale: 'pl', i18nConfig });
+      expect(plHtml).toContain('polish-only');
+      expect(plHtml).not.toContain('english-only');
+    });
+
+    test('a locale with no `if` slot falls back to the default locale', async () => {
+      const node = {
+        type: 'node',
+        tag: 'div',
+        children: [
+          { type: 'node', tag: 'span', if: { _i18n: true, en: false, pl: true }, children: 'hidden-by-default' },
+        ],
+      };
+      const html = await render(node, { locale: 'de', i18nConfig });
+      expect(html).not.toContain('hidden-by-default');
+    });
+
     test('precedence: _i18n: true wins over a stray type/tag on the same object', async () => {
       // If someone accidentally writes both _i18n and type on the same object,
       // i18n wins — the renderer treats it as a localized string, not a node.
@@ -1850,6 +1881,39 @@ describe('ssrRenderer', () => {
       expect(html).toBe('');
     });
 
+    // A list re-renders the SAME child node object once per item. The link/embed/locale-list
+    // builders delete `class` off the attributes they extract, which used to be the node's live
+    // object — so item 0 consumed the class-string styling and items 1..n rendered bare.
+    // (extractAttributesFromNode now returns a copy.)
+    test('class-string styling on a LINK inside a list applies to EVERY item, not just the first', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: ['a', 'b', 'c'],
+        children: [{ type: 'link', href: '/x', attributes: { class: 'p-[24px]' }, children: '{{item}}' }],
+      };
+      const html = await render(node);
+      expect(html.match(/p-\[24px\]/g) ?? []).toHaveLength(3);
+    });
+
+    test('class-string styling on an EMBED inside a list applies to every item', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: ['a', 'b', 'c'],
+        children: [{ type: 'embed', html: '<i></i>', attributes: { class: 'p-[24px]' } }],
+      };
+      const html = await render(node);
+      expect(html.match(/p-\[24px\]/g) ?? []).toHaveLength(3);
+    });
+
+    test('a list never consumes its child node’s attributes (model is not mutated by render)', async () => {
+      const child = { type: 'link', href: '/x', attributes: { class: 'p-[24px]' }, children: '{{item}}' };
+      const node = { type: 'list', sourceType: 'prop', source: ['a', 'b'], children: [child] };
+      await render(node);
+      expect(child.attributes).toEqual({ class: 'p-[24px]' });
+    });
+
     test('renders list with collection source but no CMS service', async () => {
       const node = {
         type: 'list',

package/lib/server/ssr/ssrRenderer.ts

@@ -46,6 +46,7 @@ import {
   isCustomNode,
   markAsSlotContent,
   isBooleanMapping,
+  resolveIfI18n,
   hasIf,
   isSlotContent,
 } from '../../shared/nodeUtils';
@@ -328,7 +329,7 @@ function processStyleToClasses(style: StyleObject | ResponsiveStyleObject | unde
 
 /**
  * Evaluate the if condition on a node with full SSR context.
- * Handles boolean, mapping, and string template values.
+ * Handles boolean, localized (`_i18n`), mapping, and string template values.
  * Returns true if node should be rendered, false if it should be skipped.
  */
 function evaluateIfCondition(node: ComponentNode, ctx: SSRContext): boolean {
@@ -344,6 +345,12 @@ function evaluateIfCondition(node: ComponentNode, ctx: SSRContext): boolean {
     return ifValue;
   }
 
+  // Localized visibility (`{ _i18n: true, en: true, pl: false }`) — resolve the route's
+  // locale slot, mirroring the emitted `i18n({…}) && (…)` in a real Astro build.
+  if (isI18nValue(ifValue)) {
+    return Boolean(resolveIfI18n(ifValue, ctx.locale, ctx.i18nConfig));
+  }
+
   // Mapping value - resolve using component props
   if (isBooleanMapping(ifValue)) {
     const props = ctx.componentResolvedProps || {};

package/lib/shared/attributeNodeUtils.test.ts

@@ -59,6 +59,31 @@ describe('attributeNodeUtils', () => {
       expect(extractAttributesFromNode('string' as any)).toEqual({});
       expect(extractAttributesFromNode(123 as any)).toEqual({});
     });
+
+    // Callers treat the result as a scratch bag: the link/embed/locale-list builders delete
+    // `class` off it once folded into the element's class list. Returning the live reference made
+    // that delete consume the MODEL's class, so a list (which re-renders the same child node once
+    // per item) styled only its first item.
+    test('returns a COPY — mutating the result never touches the node', () => {
+      const node: ComponentNode = {
+        type: 'node' as const,
+        tag: 'a',
+        attributes: { class: 'p-[24px]', id: 'test' },
+      };
+      const extracted = extractAttributesFromNode(node);
+      delete (extracted as Record<string, unknown>).class;
+
+      expect(extracted).toEqual({ id: 'test' });
+      expect(node.attributes).toEqual({ class: 'p-[24px]', id: 'test' });
+      // A second extraction still sees the class — the per-list-item render path.
+      expect(extractAttributesFromNode(node)).toEqual({ class: 'p-[24px]', id: 'test' });
+    });
+
+    test('successive extractions are independent objects', () => {
+      const node: ComponentNode = { type: 'node' as const, tag: 'div', attributes: { id: 'a' } };
+      expect(extractAttributesFromNode(node)).not.toBe(extractAttributesFromNode(node));
+      expect(extractAttributesFromNode(node)).not.toBe(node.attributes);
+    });
   });
 
   describe('applyAttributesToNode', () => {

package/lib/shared/attributeNodeUtils.ts

@@ -10,6 +10,14 @@ import { isComponentNode, isHtmlNode } from './nodeUtils';
  * Extract attributes from a ComponentNode
  * Attributes are stored at the top level of the node (like styles)
  * Returns a record of attributes ready for React props
+ *
+ * Always a fresh COPY, never the node's live `attributes` object. Callers treat the result as a
+ * scratch bag they may mutate — the link/embed/locale-list builders `delete` `class`/`className`
+ * off it once those tokens have been folded into the element's class list. Handing out the
+ * reference made that delete mutate the MODEL, and because a list renders the same child node
+ * objects once per item, item 0 consumed the class and items 1..n rendered without it (the
+ * "class-string styles only apply to the first list item" bug). Node.style was never affected —
+ * it is read fresh per render — so this only ever bit `attributes.class` styling.
  */
 export function extractAttributesFromNode(node: ComponentNode): Record<string, string | number | boolean> {
   if (!node || typeof node !== 'object') {
@@ -18,7 +26,7 @@ export function extractAttributesFromNode(node: ComponentNode): Record<string, s
 
   // Attributes are stored at top level for both HTML nodes and component instances
   if ('attributes' in node && node.attributes) {
-    return node.attributes as Record<string, string | number | boolean>;
+    return { ...(node.attributes as Record<string, string | number | boolean>) };
   }
 
   return {};

package/lib/shared/cssGeneration.test.ts

@@ -8,6 +8,7 @@ import {
   applyContainerPattern,
   styleObjectToCSS,
 } from './cssGeneration';
+import { physicalizeBoxSpacing } from './styleUtils';
 import { DEFAULT_BREAKPOINTS } from './breakpoints';
 import type { ResponsiveScales } from './responsiveScaling';
 import type { InteractiveStyles } from './types/styles';
@@ -116,6 +117,54 @@ describe('generateUtilityCSS end-to-end', () => {
     expect(posShorthand).toBeGreaterThanOrEqual(0);
     expect(posLonghand).toBeGreaterThan(posShorthand); // shorthand precedes longhand → mb wins
   });
+
+  test('auto-responsive @media keeps axis roots expanded to longhands', () => {
+    // `py`/`px`/`mx`/`my` map to the padding/margin FAMILY for scale lookups, but the
+    // emitted declaration must stay two longhands — a scaled `padding: 63px` would paint
+    // all four sides, so a `py-[110px]` silently grows horizontal padding on mobile.
+    const scales: ResponsiveScales = {
+      enabled: true,
+      mode: 'breakpoints',
+      baseReference: 16,
+      padding: { mobile: 0.5 },
+      margin: { mobile: 0.5 },
+    };
+    const css = generateUtilityCSS(new Set(['py-[110px]', 'px-[40px]', 'my-[80px]']), DEFAULT_BREAKPOINTS, scales);
+    const mobileBlock = css.slice(css.indexOf('@media (max-width: 540px)'));
+    // 110 + (110-16)*(0.5-1) = 63 · 40 + (40-16)*(0.5-1) = 28 · 80 + (80-16)*(0.5-1) = 48
+    expect(mobileBlock).toContain('.py-\\[110px\\] { padding-top: 63px; padding-bottom: 63px; }');
+    expect(mobileBlock).toContain('.px-\\[40px\\] { padding-left: 28px; padding-right: 28px; }');
+    expect(mobileBlock).toContain('.my-\\[80px\\] { margin-top: 48px; margin-bottom: 48px; }');
+    expect(mobileBlock).not.toContain('padding: ');
+    expect(mobileBlock).not.toContain('margin: ');
+  });
+
+  test('generateSingleClassCSS keeps axis roots expanded in its @media rules', () => {
+    const scales: ResponsiveScales = {
+      enabled: true,
+      mode: 'breakpoints',
+      baseReference: 16,
+      padding: { mobile: 0.5 },
+    };
+    const css = generateSingleClassCSS('py-[110px]', DEFAULT_BREAKPOINTS, scales);
+    expect(css).toContain('.py-\\[110px\\] { padding-top: 110px; padding-bottom: 110px; }');
+    expect(css).toContain('padding-top: 63px; padding-bottom: 63px;');
+    expect(css).not.toContain('padding: ');
+  });
+
+  test('fluid mode keeps axis roots expanded on the base rule', () => {
+    const scales: ResponsiveScales = {
+      enabled: true,
+      mode: 'fluid',
+      baseReference: 16,
+      fluidRange: { min: 320, max: 1440 },
+      padding: { mobile: 0.5 },
+    };
+    const css = generateUtilityCSS(new Set(['py-[110px]']), DEFAULT_BREAKPOINTS, scales);
+    expect(css).toContain('padding-top: clamp(63px,');
+    expect(css).toContain('padding-bottom: clamp(63px,');
+    expect(css).not.toContain('padding: clamp(');
+  });
 });
 
 describe('cssGeneration', () => {
@@ -147,15 +196,15 @@ describe('cssGeneration', () => {
 
     test('border (full shorthand) still includes color', () => {
       const rule = generateRuleForClass('border-[1px_solid_var(--primary)]');
-      expect(rule).toBe('border: 1px solid var(--primary);');
+      expect(rule).toBe('border-width: 1px; border-style: solid; border-color: var(--primary);');
     });
 
-    test('bare / numeric border widths render a visible shorthand (no Preflight)', () => {
+    test('bare / numeric border widths render visibly (no Preflight)', () => {
       // `border` alone would be invisible without a border-style, so it expands to `<width> solid`
       // (color omitted → defaults to currentColor).
-      expect(generateRuleForClass('border')).toBe('border: 1px solid;');
-      expect(generateRuleForClass('border-2')).toBe('border: 2px solid;');
-      expect(generateRuleForClass('border-0')).toBe('border: 0px solid;');
+      expect(generateRuleForClass('border')).toBe('border-width: 1px; border-style: solid;');
+      expect(generateRuleForClass('border-2')).toBe('border-width: 2px; border-style: solid;');
+      expect(generateRuleForClass('border-0')).toBe('border-width: 0px; border-style: solid;');
     });
 
     test('bare / numeric per-side widths split into longhands, no color (a border-color class wins)', () => {
@@ -164,8 +213,37 @@ describe('cssGeneration', () => {
     });
 
     test('logical-axis border widths use border-inline / border-block', () => {
-      expect(generateRuleForClass('border-x')).toBe('border-inline: 1px solid;');
-      expect(generateRuleForClass('border-y-2')).toBe('border-block: 2px solid;');
+      expect(generateRuleForClass('border-x')).toBe('border-inline-width: 1px; border-inline-style: solid;');
+      expect(generateRuleForClass('border-y-2')).toBe('border-block-width: 2px; border-block-style: solid;');
+    });
+
+    test('an ARBITRARY width-only border renders one visible edge, like its scale form', () => {
+      // Regression: these used to emit the `border-left: 3px` SHORTHAND, which resets the style to
+      // the initial `none` — an invisible border. Authors then reached for a blanket
+      // `[border-style:solid]`, which painted all four edges at the default `medium` width.
+      expect(generateRuleForClass('border-l-[3px]')).toBe('border-left-width: 3px; border-left-style: solid;');
+      expect(generateRuleForClass('border-t-[1px]')).toBe('border-top-width: 1px; border-top-style: solid;');
+      expect(generateRuleForClass('border-[3px]')).toBe('border-width: 3px; border-style: solid;');
+      expect(generateRuleForClass('border-x-[2px]')).toBe('border-inline-width: 2px; border-inline-style: solid;');
+      expect(generateRuleForClass('border-l-[0.5rem]')).toBe('border-left-width: 0.5rem; border-left-style: solid;');
+    });
+
+    test('an arbitrary lone style keyword stays a style, not a width', () => {
+      expect(generateRuleForClass('border-l-[dashed]')).toBe('border-left-style: dashed;');
+    });
+
+    test('a math-function width is not shredded at its inner spaces', () => {
+      // Splitting naively on whitespace produced `border-bottom-width: calc(1px; ... style: +;`.
+      expect(generateRuleForClass('border-b-[calc(1px_+_2px)]')).toBe(
+        'border-bottom-width: calc(1px + 2px); border-bottom-style: solid;',
+      );
+      expect(generateRuleForClass('border-b-[calc(1px_+_2px)_solid_red]')).toBe(
+        'border-bottom-width: calc(1px + 2px); border-bottom-style: solid; border-bottom-color: red;',
+      );
+    });
+
+    test('an ambiguous var() value stays a shorthand (it may hold a whole border)', () => {
+      expect(generateRuleForClass('border-l-(--w)')).toBe('border-left: var(--w);');
     });
 
     test('border style keyword on its own', () => {
@@ -197,15 +275,16 @@ describe('cssGeneration', () => {
       expect(generateRuleForClass('border-[rgb(0_0_0_/_50%)]')).toBe('border-color: rgb(0 0 0 / 50%);');
     });
 
-    test('transparent border-color sorts AFTER the border shorthand so it always wins', () => {
+    test('transparent border-color sorts AFTER the border width/style so it always wins', () => {
       // The two classes target distinct properties (border vs border-color), so the longhand
       // must follow the shorthand in source order regardless of which was collected first.
+      // The width/style pair no longer resets the color at all, so this is belt-and-braces.
       const css = generateUtilityCSS(
         new Set(['border-[rgba(0,_0,_0,_0)]', 'border-[1px_solid]']),
         DEFAULT_BREAKPOINTS,
         { enabled: false } as ResponsiveScales,
       );
-      const posShorthand = css.indexOf('border: 1px solid;');
+      const posShorthand = css.indexOf('border-width: 1px; border-style: solid;');
       const posColor = css.indexOf('border-color: rgba(0, 0, 0, 0);');
       expect(posShorthand).toBeGreaterThanOrEqual(0);
       expect(posColor).toBeGreaterThan(posShorthand);
@@ -776,4 +855,66 @@ describe('styleObjectToCSS', () => {
   test('empty object yields an empty string', () => {
     expect(styleObjectToCSS({})).toBe('');
   });
+
+  test('logical px/py-derived box props emit REGULAR physical padding, never padding-inline/block', () => {
+    // Both axes → one compact shorthand `padding: <block> <inline>` (CSS's vertical horizontal).
+    expect(styleObjectToCSS({ paddingBlock: '100px', paddingInline: '0px' })).toBe('padding: 100px 0px');
+    // A lone axis → its two physical side longhands.
+    expect(styleObjectToCSS({ paddingInline: '100px' })).toBe('padding-left: 100px; padding-right: 100px');
+    expect(styleObjectToCSS({ marginBlock: '8px' })).toBe('margin-top: 8px; margin-bottom: 8px');
+    // An explicit side wins over the axis (no clobber); the other side is still filled from the axis.
+    expect(styleObjectToCSS({ paddingInline: '100px', paddingLeft: '50px' })).toBe(
+      'padding-left: 50px; padding-right: 100px',
+    );
+  });
+
+  test('does not mutate the caller object', () => {
+    const input = { paddingInline: '100px', paddingBlock: '0px' };
+    styleObjectToCSS(input);
+    expect(input).toEqual({ paddingInline: '100px', paddingBlock: '0px' });
+  });
+});
+
+describe('physicalizeBoxSpacing', () => {
+  // Cast inputs to a broad record: the generic return type carries the input's literal keys, which
+  // would make `toEqual` on the reshaped result a type error even though the runtime is correct.
+  const boxed = (o: Record<string, unknown>) => physicalizeBoxSpacing(o);
+
+  test('both axes with no competing key collapse to a shorthand', () => {
+    expect(boxed({ paddingInline: '0px', paddingBlock: '100px' })).toEqual({ padding: '100px 0px' });
+    expect(boxed({ marginInline: '0px', marginBlock: '24px' })).toEqual({ margin: '24px 0px' });
+  });
+
+  test('a lone axis expands to its two physical side longhands', () => {
+    expect(boxed({ paddingInline: '100px' })).toEqual({ paddingLeft: '100px', paddingRight: '100px' });
+    expect(boxed({ paddingBlock: '100px' })).toEqual({ paddingTop: '100px', paddingBottom: '100px' });
+  });
+
+  test('a competing physical/shorthand key blocks the shorthand and never clobbers explicit sides', () => {
+    // `padding` shorthand already present → axes expand to sides layered over it.
+    expect(boxed({ padding: '4px', paddingInline: '100px' })).toEqual({
+      padding: '4px',
+      paddingLeft: '100px',
+      paddingRight: '100px',
+    });
+    // An explicit side is preserved; the axis fills only the missing side.
+    expect(boxed({ paddingInline: '100px', paddingLeft: '50px' })).toEqual({
+      paddingLeft: '50px',
+      paddingRight: '100px',
+    });
+  });
+
+  test('a bound (_mapping) axis is kept as a side longhand rather than string-composed', () => {
+    const mapping = { _mapping: { prop: 'x' } };
+    expect(boxed({ paddingInline: mapping, paddingBlock: '10px' })).toEqual({
+      paddingLeft: mapping,
+      paddingRight: mapping,
+      paddingTop: '10px',
+      paddingBottom: '10px',
+    });
+  });
+
+  test('no logical box props → untouched', () => {
+    expect(boxed({ padding: '10px', color: 'red' })).toEqual({ padding: '10px', color: 'red' });
+  });
 });