meno-core 1.1.7 → 1.1.8

package/lib/shared/cssGeneration.ts

@@ -14,6 +14,7 @@ import {
   isBareColorTokenName,
 } from './utilityClassNames';
 import { getStyleValue, getDynamicStyle, isDynamicClass } from './styleValueRegistry';
+import { physicalizeBoxSpacing } from './styleUtils';
 import type { BreakpointConfig } from './breakpoints';
 import { DEFAULT_BREAKPOINTS, getBreakpointValues } from './breakpoints';
 import type { ResponsiveScales, CSSPropertyType, ResponsiveMode } from './responsiveScaling';
@@ -131,8 +132,39 @@ const utilityClassRules: Record<string, string> = (() => {
 })();
 
 /**
- * Resolve `{ property, value }` for a utility class, consulting the style-value
- * registry for hash-fallback classes (e.g. `text-h1glej9a` for `222.3px`).
+ * Class roots that expand to TWO CSS longhands instead of the single property
+ * their `prefixToCSSProperty` entry names. `py` is listed there as `padding`
+ * (the family, for ordering/scale-category lookups) but a `py-[110px]` means
+ * `padding-top` + `padding-bottom` — emitting the `padding` shorthand would
+ * paint all four sides. Same for `px`/`mx`/`my`, `size` (width + height) and
+ * the side-radius roots.
+ *
+ * Every path that builds a declaration for a parsed class must go through
+ * {@link declarationsForRoot} — the base rule, the auto-responsive `@media`
+ * rules and the fluid `clamp()` rewrite alike.
+ */
+const AXIS_ROOT_LONGHANDS: Record<string, [string, string]> = {
+  size: ['width', 'height'],
+  px: ['padding-left', 'padding-right'],
+  py: ['padding-top', 'padding-bottom'],
+  mx: ['margin-left', 'margin-right'],
+  my: ['margin-top', 'margin-bottom'],
+  ...ROUNDED_SIDE_CORNERS,
+};
+
+/**
+ * Declaration text for `value` under `root`/`property`, expanding the
+ * two-longhand axis roots (see {@link AXIS_ROOT_LONGHANDS}).
+ */
+function declarationsForRoot(root: string | null | undefined, property: string, value: string): string {
+  const longhands = root ? AXIS_ROOT_LONGHANDS[root] : undefined;
+  if (longhands) return `${longhands[0]}: ${value}; ${longhands[1]}: ${value};`;
+  return `${property}: ${value};`;
+}
+
+/**
+ * Resolve `{ property, value, root }` for a utility class, consulting the
+ * style-value registry for hash-fallback classes (e.g. `text-h1glej9a` for `222.3px`).
  *
  * Used by the auto-responsive scaling path so hashed classes don't silently
  * bypass `clamp()` / `@media` rewriting.
@@ -143,27 +175,80 @@ const utilityClassRules: Record<string, string> = (() => {
  * already-clamped value will pass through untouched via the existing
  * `if (!fluidValue) return rule;` guards.
  */
-function resolveScalablePropertyValue(className: string): { property: string; value: string } | null {
+function resolveScalablePropertyValue(
+  className: string,
+): { property: string; value: string; root: string | null } | null {
   const parsed = parseUtilityClass(className);
   if (!parsed) return null;
-  if (parsed.value != null) return { property: parsed.property, value: parsed.value };
+  if (parsed.value != null) return { property: parsed.property, value: parsed.value, root: parsed.root };
 
   // Hash-fallback class: real value lives in the registry
   const registered = getStyleValue(className);
   if (registered == null || registered === '') return null;
   const value = String(registered);
   const property = parsed.root ? resolveRootProperty(parsed.root, value) : parsed.property;
-  return { property, value };
+  return { property, value, root: parsed.root };
 }
 
 /** Border-side class roots → CSS side shorthand base. */
 const borderSideMap: Record<string, string> = {
+  border: 'border',
   'border-t': 'border-top',
   'border-r': 'border-right',
   'border-b': 'border-bottom',
   'border-l': 'border-left',
+  'border-x': 'border-inline',
+  'border-y': 'border-block',
 };
 
+/** Every `<line-style>` keyword — a lone one of these is a style, never a width. */
+const BORDER_STYLE_VALUES: ReadonlySet<string> = new Set([
+  'none',
+  'hidden',
+  'solid',
+  'dashed',
+  'dotted',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+]);
+
+/** Style composed onto a lone border WIDTH so it renders — mirrors the scale forms (`border-l-3`). */
+const BORDER_DEFAULT_STYLE = 'solid';
+
+/** True for a `<line-width>`: a length/percentage, a math function, or a width keyword. */
+function isBorderWidthToken(token: string): boolean {
+  return (
+    /^-?(?:\d+|\d*\.\d+)[a-z%]*$/i.test(token) ||
+    /^(?:thin|medium|thick)$/i.test(token) ||
+    /^(?:calc|min|max|clamp)\(/i.test(token)
+  );
+}
+
+/**
+ * Split a shorthand value on top-level whitespace, keeping bracketed groups intact so
+ * `calc(1px + 2px) solid red` yields 3 tokens rather than being shredded at every space.
+ */
+function splitBorderShorthand(value: string): string[] {
+  const tokens: string[] = [];
+  let depth = 0;
+  let current = '';
+  for (const char of value) {
+    if (char === '(' || char === '[') depth++;
+    else if (char === ')' || char === ']') depth--;
+    if (depth === 0 && /\s/.test(char)) {
+      if (current) tokens.push(current);
+      current = '';
+      continue;
+    }
+    current += char;
+  }
+  if (current) tokens.push(current);
+  return tokens;
+}
+
 /**
  * Generate CSS rule for a utility class
  * Handles arbitrary values (p-[10px]), variables (bg-(--primary)),
@@ -213,26 +298,10 @@ export function generateRuleForClass(className: string, knownTokens?: ReadonlySe
     value = parsed.value!;
   }
 
-  // Multi-property roots (Tailwind axis shorthands)
-  if (root === 'size') {
-    return `width: ${value}; height: ${value};`;
-  }
-  // Side border-radius: no CSS per-side shorthand — emit both corner longhands.
-  const sideCorners = root ? ROUNDED_SIDE_CORNERS[root] : undefined;
-  if (sideCorners) {
-    return `${sideCorners[0]}: ${value}; ${sideCorners[1]}: ${value};`;
-  }
-  if (root === 'px') {
-    return `padding-left: ${value}; padding-right: ${value};`;
-  }
-  if (root === 'py') {
-    return `padding-top: ${value}; padding-bottom: ${value};`;
-  }
-  if (root === 'mx') {
-    return `margin-left: ${value}; margin-right: ${value};`;
-  }
-  if (root === 'my') {
-    return `margin-top: ${value}; margin-bottom: ${value};`;
+  // Multi-property roots (Tailwind axis shorthands: `size`, `px`/`py`, `mx`/`my`,
+  // and the side border-radius roots, which have no CSS per-side shorthand).
+  if (root && AXIS_ROOT_LONGHANDS[root]) {
+    return declarationsForRoot(root, property, value);
   }
 
   // Border-side classes (border-t-, border-r-, …): emit width/style (and color
@@ -240,14 +309,26 @@ export function generateRuleForClass(className: string, knownTokens?: ReadonlySe
   // control the color independently (longhands sort after the side class).
   if (root && borderSideMap[root] && property !== 'border-color') {
     const side = borderSideMap[root];
-    const tokens = value.split(/\s+/).filter(Boolean);
+    const tokens = splitBorderShorthand(value);
     if (tokens.length >= 2) {
       const declarations = [`${side}-width: ${tokens[0]};`, `${side}-style: ${tokens[1]};`];
-      if (tokens[2]) {
+      if (tokens.length > 2) {
         declarations.push(`${side}-color: ${tokens.slice(2).join(' ')};`);
       }
       return declarations.join(' ');
     }
+    const only = tokens[0];
+    if (only) {
+      // A lone style keyword (`border-solid`, `border-l-[dashed]`) is exactly that.
+      if (BORDER_STYLE_VALUES.has(only.toLowerCase())) return `${side}-style: ${only};`;
+      // A lone WIDTH (`border-l-[3px]`) must carry a style or it renders nothing: Meno has no
+      // Preflight default, and the `border-left: 3px` shorthand would itself RESET the style to
+      // the initial `none`. Emitting the two longhands makes the arbitrary form behave like the
+      // scale form (`border-l-3`) — one edge, visible — instead of forcing authors to add a
+      // separate `border-style: solid`, which paints all four edges at the default width.
+      if (isBorderWidthToken(only)) return `${side}-width: ${only}; ${side}-style: ${BORDER_DEFAULT_STYLE};`;
+    }
+    // Anything else (a color, a `var()` that may hold a whole shorthand) stays a shorthand.
     return `${side}: ${value};`;
   }
 
@@ -291,7 +372,7 @@ function applyFluidToUtilityRule(
   const fluidValue = buildFluidPropertyValue(propValue.value, scale, range.min, range.max, baseRef);
   if (!fluidValue) return rule;
 
-  return `${propValue.property}: ${fluidValue};`;
+  return declarationsForRoot(propValue.root, propValue.property, fluidValue);
 }
 
 /**
@@ -508,7 +589,7 @@ export function generateUtilityCSS(
             : scaledValue;
         autoResponsiveMediaQueries[breakpointName].classes.push({
           className: escapedClassName,
-          rule: `${propValue.property}: ${finalScaledValue};`,
+          rule: declarationsForRoot(propValue.root, propValue.property, finalScaledValue),
         });
       }
     }
@@ -653,7 +734,7 @@ export function generateSingleClassCSS(
                   ? convertPxToRem(scaledValue, remConfig.baseFontSize)
                   : scaledValue;
               css.push(
-                `@media (max-width: ${breakpointValue}px) {\n  .${escapedClassName} { ${propValue.property}: ${finalScaledValue}; }\n}`,
+                `@media (max-width: ${breakpointValue}px) {\n  .${escapedClassName} { ${declarationsForRoot(propValue.root, propValue.property, finalScaledValue)} }\n}`,
               );
             }
           }
@@ -722,11 +803,15 @@ function isResponsiveStyle(style: StyleValue): style is ResponsiveStyleObject {
  * the server's utility/theme CSS uses, so the inline preview matches the value
  * the recompiled stylesheet will land with. `_mapping` (binding) values are
  * skipped, so a bound property yields an empty string (no optimistic preview).
+ *
+ * Logical `px`/`py`/`mx`/`my`-derived box props are physicalized first (see
+ * {@link physicalizeBoxSpacing}) so the emitted CSS is regular padding/margin, never
+ * `padding-inline`/`padding-block`. A shallow copy keeps the caller's object untouched.
  */
 export function styleObjectToCSS(style: StyleObject): string {
   const declarations: string[] = [];
 
-  for (const [prop, value] of Object.entries(style)) {
+  for (const [prop, value] of Object.entries(physicalizeBoxSpacing({ ...style }))) {
     // Skip mapping objects
     if (typeof value === 'object' && value !== null && '_mapping' in value) {
       continue;

package/lib/shared/cssProperties.ts

@@ -1030,29 +1030,55 @@ const PROPERTY_SHORTCUTS: Record<string, string> = {
 };
 
 /**
- * Filter CSS properties based on input value
- * Supports both startsWith matching and camelCase abbreviation matching
+ * Short forms that stand in for the start of a property name. The alias is
+ * expanded before matching, so "bg" reaches every `background*` property and
+ * "bgColor" / "bgc" narrow to `backgroundColor` — neither of which the prefix
+ * or abbreviation matchers can reach on their own ("background" is a single
+ * word, so there is no `g` word boundary for `bg` to land on).
+ */
+const PROPERTY_PREFIX_ALIASES: Record<string, string> = {
+  bg: 'background',
+};
+
+function expandPrefixAlias(input: string): string {
+  const lowerInput = input.toLowerCase();
+  for (const [alias, expansion] of Object.entries(PROPERTY_PREFIX_ALIASES)) {
+    if (lowerInput.startsWith(alias)) {
+      return expansion + input.slice(alias.length);
+    }
+  }
+  return input;
+}
+
+/**
+ * Filter CSS properties based on input value.
+ * Matches on prefix or camelCase abbreviation, ranked by popularity tier.
  */
 export function filterCSSProperties(input: string): string[] {
-  const normalizedInput = (input ?? '').trim();
+  const normalizedInput = expandPrefixAlias((input ?? '').trim());
   if (!normalizedInput) {
     return CSS_PROPERTIES.slice(0, 15); // Show first 15 by default
   }
 
-  // First, try startsWith matching (exact prefix match)
-  const startsWithMatches = CSS_PROPERTIES.filter((prop) =>
-    prop.toLowerCase().startsWith(normalizedInput.toLowerCase()),
-  );
+  const lowerInput = normalizedInput.toLowerCase();
+
+  const startsWithMatches = new Set(CSS_PROPERTIES.filter((prop) => prop.toLowerCase().startsWith(lowerInput)));
 
-  // Then, try abbreviation/fuzzy matching
-  const abbreviationMatches = CSS_PROPERTIES.filter(
-    (prop) => matchesAbbreviation(prop, normalizedInput) && !startsWithMatches.includes(prop), // Don't duplicate startsWith matches
-  );
+  const combined = CSS_PROPERTIES.filter(
+    (prop) => startsWithMatches.has(prop) || matchesAbbreviation(prop, normalizedInput),
+  ).sort((a, b) => {
+    // A fully typed property always wins, however unpopular it is.
+    const exact = Number(b.toLowerCase() === lowerInput) - Number(a.toLowerCase() === lowerInput);
+    if (exact !== 0) return exact;
 
-  // Sort each group by popularity, then combine: exact matches first, then fuzzy matches
-  const byPriority = (a: string, b: string) => getPropertyPriority(a) - getPropertyPriority(b);
+    // Popularity outranks match kind: a common abbreviation match (`ta` → textAlign)
+    // should beat a rare prefix match (tabSize).
+    const priority = getPropertyPriority(a) - getPropertyPriority(b);
+    if (priority !== 0) return priority;
 
-  const combined = [...startsWithMatches.sort(byPriority), ...abbreviationMatches.sort(byPriority)];
+    // Equally popular: prefer the prefix match.
+    return Number(startsWithMatches.has(b)) - Number(startsWithMatches.has(a));
+  });
 
   const shortcut = PROPERTY_SHORTCUTS[normalizedInput.toLowerCase()];
   if (shortcut) {

package/lib/shared/i18n.test.ts

@@ -316,6 +316,27 @@ describe('i18n', () => {
       expect((resolved.data as any).value).toBe(100);
     });
 
+    test('should resolve i18n leaves nested inside array-of-objects items', () => {
+      // Breadcrumb-style list prop: each item is an object whose `label` field is an
+      // i18n value. The array branch must recurse into item OBJECTS, not only resolve
+      // array items that are themselves i18n values — otherwise the nested label
+      // survives and renders as "[object Object]".
+      const props = {
+        items: [
+          { label: 'Home', link: { href: '/' } },
+          { label: { _i18n: true, en: 'About', pl: 'O nas' }, link: { href: '/who-we-are' } },
+          { label: 'History', link: { href: '/history' } },
+        ],
+      };
+
+      const resolved = resolveI18nInProps(props, 'pl', testConfig);
+      const items = resolved.items as any[];
+      expect(items[0].label).toBe('Home');
+      expect(items[1].label).toBe('O nas');
+      expect(items[1].link.href).toBe('/who-we-are');
+      expect(items[2].label).toBe('History');
+    });
+
     test('should resolve i18n list props correctly', () => {
       const props = {
         items: {

package/lib/shared/i18n.ts

@@ -145,6 +145,29 @@ export function resolveI18nValue(value: unknown, locale: string, config: I18nCon
   return value;
 }
 
+/**
+ * Recursively resolve a single value that may contain I18nValue leaves anywhere
+ * inside it (the value itself, array items, or nested object fields).
+ *
+ * `isI18nValue` is checked FIRST so an i18n value is resolved as a unit rather than
+ * recursed into as a plain object. Array items are resolved with the same routine so
+ * that i18n leaves nested inside array-of-objects props (e.g. a breadcrumb list's
+ * `{ label: { _i18n, … }, link: { … } }` items) are reached — not just array items
+ * that are themselves i18n values.
+ */
+function resolveI18nDeep(value: unknown, locale: string, config: I18nConfig): unknown {
+  if (isI18nValue(value)) {
+    return resolveTranslation(value, locale, config);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => resolveI18nDeep(item, locale, config));
+  }
+  if (typeof value === 'object' && value !== null) {
+    return resolveI18nInProps(value as Record<string, unknown>, locale, config);
+  }
+  return value;
+}
+
 /**
  * Recursively resolve all I18nValue objects in a props object
  */
@@ -156,16 +179,7 @@ export function resolveI18nInProps(
   const resolved: Record<string, unknown> = {};
 
   for (const [key, value] of Object.entries(props)) {
-    if (isI18nValue(value)) {
-      resolved[key] = resolveTranslation(value, locale, config);
-    } else if (Array.isArray(value)) {
-      resolved[key] = value.map((item) => (isI18nValue(item) ? resolveTranslation(item, locale, config) : item));
-    } else if (typeof value === 'object' && value !== null) {
-      // Recursively resolve nested objects (but not I18nValue which is already handled)
-      resolved[key] = resolveI18nInProps(value as Record<string, unknown>, locale, config);
-    } else {
-      resolved[key] = value;
-    }
+    resolved[key] = resolveI18nDeep(value, locale, config);
   }
 
   return resolved;

package/lib/shared/nodeUtils.test.ts

@@ -403,6 +403,28 @@ describe('nodeUtils', () => {
       expect(evaluateNodeIf(node, { status: 'unknown' })).toBe(true);
     });
 
+    test('resolves localized visibility per locale', () => {
+      const node = {
+        type: NODE_TYPE.NODE,
+        tag: 'div',
+        if: { _i18n: true, en: true, pl: false },
+      } as any;
+      const config = {
+        defaultLocale: 'en',
+        locales: [
+          { code: 'en', name: 'English', nativeName: 'English', langTag: 'en-US' },
+          { code: 'pl', name: 'Polish', nativeName: 'Polski', langTag: 'pl-PL' },
+        ],
+      };
+
+      expect(evaluateNodeIf(node, undefined, { locale: 'en', config })).toBe(true);
+      expect(evaluateNodeIf(node, undefined, { locale: 'pl', config })).toBe(false);
+      // A locale with no slot falls back to the default locale's value.
+      expect(evaluateNodeIf(node, undefined, { locale: 'de', config })).toBe(true);
+      // No locale given → the default locale.
+      expect(evaluateNodeIf(node, undefined, { config })).toBe(true);
+    });
+
     test('defaults to true when no props provided for mapping', () => {
       const node = {
         type: NODE_TYPE.NODE,

package/lib/shared/nodeUtils.ts

@@ -13,7 +13,10 @@ import type {
   LocaleListNode,
   ComponentDefinition,
   StructuredComponentDefinition,
+  I18nConfig,
+  I18nValue,
 } from './types';
+import { DEFAULT_I18N_CONFIG, isI18nValue, resolveI18nValue } from './i18n';
 import type { ListNode } from './registry/nodeTypes/ListNodeType';
 import type { IslandNode } from './registry/nodeTypes/IslandNodeType';
 import type { CustomNode } from './registry/nodeTypes/CustomNodeType';
@@ -422,9 +425,26 @@ export interface BooleanMapping {
 }
 
 /**
- * If condition type - can be boolean, string template, or mapping
+ * If condition type - can be boolean, string template, mapping, or a per-locale
+ * `_i18n` object (localized visibility: `{ _i18n: true, en: true, pl: false }`).
+ * The i18n form resolves through the SAME `resolveI18nValue` chain every other
+ * localized value uses; the resolved slot is then read for truthiness.
  */
-export type IfCondition = boolean | string | BooleanMapping;
+export type IfCondition = boolean | string | BooleanMapping | I18nValue;
+
+/**
+ * Resolve a localized `if` condition (`{ _i18n: true, en: true, pl: false }`) to the
+ * active locale's slot.
+ *
+ * Shared by every `if` evaluator (this module's `evaluateNodeIf`, the client
+ * `ComponentBuilder`, the SSR renderer) so the editor canvas, the editor SSR and the
+ * real Astro build (where the emitted `i18n({…}) && (…)` does the same job through
+ * meno-astro's runtime resolver) all agree on which locales a node is visible in.
+ */
+export function resolveIfI18n(value: I18nValue, locale?: string, config?: I18nConfig): unknown {
+  const cfg = config || DEFAULT_I18N_CONFIG;
+  return resolveI18nValue(value, locale || cfg.defaultLocale, cfg);
+}
 
 /**
  * Check if a value is a boolean mapping
@@ -463,8 +483,16 @@ export function isBooleanMapping(value: unknown): value is BooleanMapping {
  *   { type: 'node', tag: 'div', if: { _mapping: true, prop: 'visible', values: { true: true, false: false } } },
  *   { visible: 'true' }
  * ) // true
- */
-export function evaluateNodeIf(node: ComponentNode, props?: Record<string, unknown>): boolean {
+ *
+ * // Localized visibility
+ * evaluateNodeIf({ type: 'node', tag: 'div', if: { _i18n: true, en: true, pl: false } }, undefined, { locale: 'pl' })
+ * // false
+ */
+export function evaluateNodeIf(
+  node: ComponentNode,
+  props?: Record<string, unknown>,
+  i18n?: { locale?: string; config?: I18nConfig },
+): boolean {
   const ifValue = hasIf(node) ? node.if : undefined;
 
   // No if property = render (default true)
@@ -477,6 +505,13 @@ export function evaluateNodeIf(node: ComponentNode, props?: Record<string, unkno
     return ifValue;
   }
 
+  // Localized visibility (`{ _i18n: true, en: true, pl: false }`) — resolve the active
+  // locale's slot, then read it for truthiness. Falls back to the default locale (and
+  // then the first available slot) exactly like every other localized value.
+  if (isI18nValue(ifValue)) {
+    return Boolean(resolveIfI18n(ifValue, i18n?.locale, i18n?.config));
+  }
+
   // Mapping value - resolve using component props
   if (isBooleanMapping(ifValue)) {
     if (!props) {

package/lib/shared/permissions.test.ts

@@ -1,5 +1,11 @@
 import { describe, test, expect } from 'bun:test';
-import { resolvePermissions, canEdit, matchesPermissionPattern, matchesAnyPermissionPattern } from './permissions';
+import {
+  resolvePermissions,
+  canEdit,
+  matchesPermissionPattern,
+  matchesAnyPermissionPattern,
+  normalizeConfigArea,
+} from './permissions';
 import type { PermissionsPolicy, ResourceRef } from './types/permissions';
 
 const page = (id: string): ResourceRef => ({ kind: 'page', id });
@@ -47,7 +53,7 @@ describe('resolvePermissions — no policy (unmanaged project)', () => {
     expect(r.isAdmin).toBe(true);
     expect(r.role).toBe('admin');
     expect(canEdit(r, page('anything'))).toBe(true);
-    expect(canEdit(r, config('colors'))).toBe(true);
+    expect(canEdit(r, config('theme'))).toBe(true);
   });
 
   test('canManagePolicy: repo admins and local/unauthenticated runs only', () => {
@@ -88,7 +94,7 @@ describe('resolvePermissions — present policy', () => {
     expect(canEdit(r, cms('posts'))).toBe(true);
     expect(canEdit(r, cms('products'))).toBe(false);
     expect(canEdit(r, component('Card'))).toBe(false);
-    expect(canEdit(r, config('colors'))).toBe(false);
+    expect(canEdit(r, config('theme'))).toBe(false);
   });
 
   test('login lookup is case-insensitive', () => {
@@ -103,7 +109,7 @@ describe('resolvePermissions — present policy', () => {
     expect(r.isAdmin).toBe(true);
     expect(r.canManagePolicy).toBe(true);
     expect(canEdit(r, page('anything'))).toBe(true);
-    expect(canEdit(r, config('variables'))).toBe(true);
+    expect(canEdit(r, config('theme'))).toBe(true);
   });
 
   test('explicit viewer role edits nothing', () => {
@@ -143,15 +149,49 @@ describe('resolvePermissions — present policy', () => {
   test('config area allow-lists support wildcards', () => {
     const p: PermissionsPolicy = {
       version: 1,
-      members: { ed: { allow: { config: ['colors', 'variables'] } }, all: { allow: { config: ['*'] } } },
+      members: { ed: { allow: { config: ['theme'] } }, all: { allow: { config: ['*'] } } },
     };
     const ed = resolvePermissions(p, { login: 'ed' });
-    expect(canEdit(ed, config('colors'))).toBe(true);
+    expect(canEdit(ed, config('theme'))).toBe(true);
     expect(canEdit(ed, config('i18n'))).toBe(false);
     const all = resolvePermissions(p, { login: 'all' });
     expect(canEdit(all, config('i18n'))).toBe(true);
   });
 
+  test('a pre-"theme" policy still resolves: colors/variables alias to theme', () => {
+    const p: PermissionsPolicy = {
+      version: 1,
+      members: {
+        ed: { allow: { config: ['colors', 'variables'] } },
+        // A grant of only ONE half now covers the whole stylesheet — the widening
+        // documented on LEGACY_CONFIG_AREA_ALIASES.
+        half: { allow: { config: ['colors'] } },
+      },
+    };
+    const ed = resolvePermissions(p, { login: 'ed' });
+    expect(ed.allow.config).toEqual(['theme']); // both aliases collapse + dedupe
+    expect(canEdit(ed, config('theme'))).toBe(true);
+    expect(canEdit(ed, config('i18n'))).toBe(false);
+    expect(canEdit(ed, config('project'))).toBe(false);
+
+    expect(canEdit(resolvePermissions(p, { login: 'half' }), config('theme'))).toBe(true);
+  });
+
+  test('a legacy config REF resolves against a current policy', () => {
+    const p: PermissionsPolicy = { version: 1, members: { ed: { allow: { config: ['theme'] } } } };
+    const ed = resolvePermissions(p, { login: 'ed' });
+    expect(canEdit(ed, config('colors'))).toBe(true);
+    expect(canEdit(ed, config('variables'))).toBe(true);
+  });
+
+  test('normalizeConfigArea leaves current areas and globs alone', () => {
+    expect(normalizeConfigArea('colors')).toBe('theme');
+    expect(normalizeConfigArea('variables')).toBe('theme');
+    expect(normalizeConfigArea('theme')).toBe('theme');
+    expect(normalizeConfigArea('project')).toBe('project');
+    expect(normalizeConfigArea('*')).toBe('*');
+  });
+
   test('defaultRole can widen the baseline (editor default)', () => {
     const p: PermissionsPolicy = { version: 1, defaultRole: 'editor', members: { ed: { allow: { pages: ['x'] } } } };
     // An unlisted user is an editor with NO allow-list → edits nothing.

package/lib/shared/permissions.ts

@@ -21,6 +21,7 @@ import type {
   ResourceKind,
   ResourceRef,
 } from './types/permissions';
+import { LEGACY_CONFIG_AREA_ALIASES } from './types/permissions';
 
 /** Role capability ordering, low → high. */
 const ROLE_RANK: Record<PermissionRole, number> = { viewer: 0, editor: 1, admin: 2 };
@@ -48,6 +49,15 @@ function grantRole(grant: PermissionGrant): PermissionRole {
   return grant.allow ? 'editor' : 'viewer';
 }
 
+/**
+ * Rewrite a retired config-area name to its current one, leaving everything else
+ * (including globs) untouched. Applied to both stored policies and queried refs
+ * so a pre-`theme` `.meno/permissions.json` keeps resolving without a migration.
+ */
+export function normalizeConfigArea(area: string): string {
+  return LEGACY_CONFIG_AREA_ALIASES[area] ?? area;
+}
+
 function mergeAllow(grants: PermissionGrant[]): Required<PermissionRule> {
   const merged = emptyAllow();
   for (const grant of grants) {
@@ -55,7 +65,8 @@ function mergeAllow(grants: PermissionGrant[]): Required<PermissionRule> {
     if (!allow) continue;
     for (const kind of Object.keys(merged) as (keyof PermissionRule)[]) {
       const patterns = allow[kind];
-      if (patterns) merged[kind].push(...patterns);
+      if (!patterns) continue;
+      merged[kind].push(...(kind === 'config' ? patterns.map(normalizeConfigArea) : patterns));
     }
   }
   // Dedupe each list while preserving order.
@@ -158,5 +169,6 @@ export function resolvePermissions(
 export function canEdit(resolved: ResolvedPermissions, ref: ResourceRef): boolean {
   if (resolved.isAdmin) return true;
   if (resolved.role === 'viewer') return false;
-  return matchesAnyPermissionPattern(resolved.allow[RULE_KEY[ref.kind]], ref.id);
+  const id = ref.kind === 'config' ? normalizeConfigArea(ref.id) : ref.id;
+  return matchesAnyPermissionPattern(resolved.allow[RULE_KEY[ref.kind]], id);
 }

package/lib/shared/pxToRem.ts

@@ -35,6 +35,8 @@ const PX_KEEP_PROPERTIES = new Set([
   'border-right-width',
   'border-bottom-width',
   'border-left-width',
+  'border-inline-width',
+  'border-block-width',
   'outline-width',
   'outline-offset',
   'border',

package/lib/shared/responsiveScaling.test.ts

@@ -150,6 +150,18 @@ describe('responsiveScaling', () => {
       const result = parseMultiValue('20px  40px');
       expect(result).toEqual(['20px', '40px']);
     });
+
+    test('should NOT split hyphens inside a var() token', () => {
+      // Regression: `text-6xl` inside `var(--text-6xl)` is a token, not a value separator.
+      // Splitting it produced `var(--text 6xl)` in the styles panel at scaled breakpoints.
+      const result = parseMultiValue('var(--text-6xl)');
+      expect(result).toEqual(['var(--text-6xl)']);
+    });
+
+    test('should NOT split hyphens inside calc()', () => {
+      const result = parseMultiValue('calc(100% - 20px)');
+      expect(result).toEqual(['calc(100%', '-', '20px)']);
+    });
   });
 
   describe('scaleValue', () => {
@@ -238,6 +250,13 @@ describe('responsiveScaling', () => {
       const result = scalePropertyValue('20px 50% 2em', 16, 0.75);
       expect(result).toBe('19px 50% 2em');
     });
+
+    test('should return a var() token unchanged (variable owns its own scaling)', () => {
+      // Regression: an inherited `fontSize: var(--text-6xl)` at a scaled breakpoint must NOT be
+      // mangled into `var(--text 6xl)`. The variable scales itself via resolveVariableValueAtBreakpoint.
+      const result = scalePropertyValue('var(--text-6xl)', 16, 0.88);
+      expect(result).toBe('var(--text-6xl)');
+    });
   });
 
   describe('getResponsiveValues', () => {