meno-core 1.1.2 → 1.1.4

package/lib/shared/utilityClassNames.ts

@@ -378,6 +378,66 @@ function negateCssValue(root: string, value: string): string | null {
   return /^\d/.test(value) ? `-${value}` : null;
 }
 
+/**
+ * Border-width/style shorthand family — Tailwind's `border`, `border-2`, `border-t`,
+ * `border-b-4`, `border-solid`, … Meno has no Preflight to supply a default border-style,
+ * so a bare `border` (width only) would render invisible; these instead expand to a
+ * `<width> solid` shorthand — visible exactly as the class reads, with no smuggled design
+ * value (`1px` is the class's literal meaning). The color is left OFF: an omitted border
+ * color defaults to `currentColor` (inherits the text color), and — crucially — the per-side
+ * forms then emit no color longhand, so a separate `border-<token>` / `border-[#hex]` class
+ * controls the color with no cascade fight. Style is overridable via `border-dashed` etc.
+ * `border-x` / `border-y` use the logical `border-inline` / `border-block` shorthands.
+ *
+ * Colors (`border-primary`, `border-[#fff]`, `border-(--x)`) and arbitrary shorthands
+ * (`border-[1px_solid_red]`) are handled by the color-token / arbitrary / var branches — this
+ * only absorbs the bare width/style idioms that were previously dropped.
+ */
+const BORDER_SIDE_PROPERTY: 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',
+};
+const BORDER_STYLE_KEYWORDS: ReadonlySet<string> = new Set(['solid', 'dashed', 'dotted', 'double', 'none', 'hidden']);
+/** Default style composed onto a bare/numeric border width so it renders on its own (color inherits). */
+const BORDER_STYLE = 'solid';
+
+/**
+ * Parse a border width/style class. `root` is `border` (all-side widths, bare sides, style
+ * keywords) or a side root like `border-t` (a sided width, `border-t-2`). Returns null for
+ * anything that isn't a bare width / style keyword (colors fall through to their own branch).
+ */
+function parseBorderClass(root: string, rest: string): ParsedUtilityClass | null {
+  // Sided width: `border-t-2`, `border-b-4`, `border-x-8` (entered as the side root).
+  if (root !== 'border') {
+    const sideProp = BORDER_SIDE_PROPERTY[root];
+    if (sideProp && /^\d+$/.test(rest)) {
+      return { property: sideProp, value: `${rest}px ${BORDER_STYLE}`, root, kind: 'numeric' };
+    }
+    return null;
+  }
+  // Bare side: `border-t` … `border-y` arrive here as root `border`, rest = the side letter.
+  // Re-root to the side (`border-t`) so the CSS generator emits per-side longhands.
+  const sideRoot = `border-${rest}`;
+  const sideProp = BORDER_SIDE_PROPERTY[sideRoot];
+  if (sideProp) {
+    return { property: sideProp, value: `1px ${BORDER_STYLE}`, root: sideRoot, kind: 'keyword' };
+  }
+  // All-side width: `border-0`, `border-2`, `border-4` (bare `border` is handled upstream).
+  if (/^\d+$/.test(rest)) {
+    return { property: 'border', value: `${rest}px ${BORDER_STYLE}`, root: 'border', kind: 'numeric' };
+  }
+  // Border style on its own: `border-solid`, `border-dashed`, `border-none`, …
+  if (BORDER_STYLE_KEYWORDS.has(rest)) {
+    return { property: 'border-style', value: rest, root: 'border', kind: 'keyword' };
+  }
+  return null;
+}
+
 /**
  * Parse a single (unprefixed) utility class name into its CSS property and
  * decoded value. Returns null for class names that aren't Meno utilities.
@@ -405,6 +465,12 @@ export function parseUtilityClass(className: string, knownTokens?: ReadonlySet<s
     };
   }
 
+  // Bare `border` → a visible 1px all-side border (see parseBorderClass). The dashed/sided/
+  // numeric forms flow through the root loop below into parseBorderClass.
+  if (className === 'border') {
+    return { property: 'border', value: `1px ${BORDER_STYLE}`, root: 'border', kind: 'keyword' };
+  }
+
   // Leading-`-` negative form (`-mt-4`, `-top-2`, `-translate-y-1/2`, `-rotate-3`): parse the
   // positive class, then negate its value when the root is negatable. Not a negatable root or a
   // non-numeric value → unrecognized (don't misread foreign `-foo` classes as utilities).
@@ -480,6 +546,14 @@ function parseRootValue(root: string, rest: string, knownTokens?: ReadonlySet<st
     return { property, value, root, kind: 'var' };
   }
 
+  // Border width/style family (`border-2`, `border-b`, `border-t-4`, `border-solid`, …).
+  // Placed after the arbitrary `[..]` and var `(--x)` escapes so those win; colors
+  // (`border-primary`) return null here and fall through to the color-token branch below.
+  if (root === 'border' || BORDER_SIDE_PROPERTY[root]) {
+    const border = parseBorderClass(root, rest);
+    if (border) return border;
+  }
+
   // Named keyword: w-full, m-auto, rounded-full
   const keyword = keywordValues[root]?.[rest];
   if (keyword !== undefined) {

package/lib/shared/utils/fileUtils.ts

@@ -37,6 +37,17 @@ export const getBaseName = (filePath: string): string => {
   return parts[parts.length - 1] || '';
 };
 
+/**
+ * Collapse a folder-index route name to its directory route, mirroring Astro's routing:
+ * `blog/index` => `blog` (serves `/blog`), while the root `index` and non-index names are
+ * returned unchanged. Keep this in sync with the copy in astro's `astroPageProvider.ts`
+ * (duplicated across the package boundary to avoid a publish-ordering coupling).
+ * @example collapseFolderIndex('blog/index') => 'blog'
+ * @example collapseFolderIndex('index') => 'index'
+ */
+export const collapseFolderIndex = (name: string): string =>
+  name.endsWith('/index') ? name.slice(0, -'/index'.length) : name;
+
 /**
  * Map page filename to route path
  * @example mapPageNameToPath('index') => '/'

package/lib/shared/validation/schemas.test.ts

@@ -201,6 +201,84 @@ describe('Schema Validation', () => {
     });
   });
 
+  describe('list prop authoring mistakes surface a clear, prop-named error', () => {
+    // Collect every message in a zod error tree (union branches included), so
+    // assertions don't depend on which branch zod happens to surface.
+    const allMessages = (error: import('zod').ZodError): string[] => {
+      const out: string[] = [];
+      const walk = (issues: import('zod').ZodIssue[]) => {
+        for (const issue of issues) {
+          out.push(issue.message);
+          if (issue.code === 'invalid_union') {
+            for (const ue of (issue as import('zod').ZodInvalidUnionIssue).unionErrors) walk(ue.errors);
+          }
+        }
+      };
+      walk(error.issues);
+      return out;
+    };
+
+    test('a bare-string `default` with no `itemSchema` is rejected with the list-prop requirement', () => {
+      // The single most common first guess. The codec round-trips it and
+      // `astro build` renders it, so the editor load path is the only guard.
+      const propDef = { type: 'list', default: ['First', 'Second'] };
+
+      const result = PropDefinitionSchema.safeParse(propDef);
+
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        expect(allMessages(result.error).some((m) => m.includes('list prop requires `itemSchema`'))).toBe(true);
+      }
+    });
+
+    test('an object-array `default` still requires `itemSchema`', () => {
+      const propDef = { type: 'list', default: [{ label: 'First' }] };
+      const result = PropDefinitionSchema.safeParse(propDef);
+      expect(result.success).toBe(false);
+    });
+
+    test('the correct form (itemSchema + object-array default) passes', () => {
+      const propDef = {
+        type: 'list',
+        itemSchema: { label: { type: 'string', default: 'Item' } },
+        default: [{ label: 'First' }, { label: 'Second' }],
+      };
+      expect(PropDefinitionSchema.safeParse(propDef).success).toBe(true);
+    });
+
+    test('a component file with a bad list prop reports the prop error, NOT the misleading JSONPage refine', () => {
+      // Regression for the union-dirty-branch bug: a `{ component }` payload
+      // whose list prop is malformed used to surface "JSONPage must have at
+      // least one of: meta, components, or root" (the page branch's refine),
+      // which names nothing useful. It must surface the list-prop error instead.
+      const componentFile = {
+        component: {
+          interface: { items: { type: 'list', default: ['a', 'b'] } },
+          structure: { type: 'node', tag: 'div', children: [] },
+        },
+      };
+
+      const result = PageDataSchema.safeParse(componentFile);
+
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        const messages = allMessages(result.error);
+        expect(messages.some((m) => m.includes('list prop requires `itemSchema`'))).toBe(true);
+        expect(messages.some((m) => m.includes('JSONPage must have'))).toBe(false);
+      }
+    });
+
+    test('an empty payload (a real page with no fields) still reports the JSONPage refine', () => {
+      // The guard only fires on a present `component` key — a genuinely empty
+      // page payload must keep its existing refine message.
+      const result = PageDataSchema.safeParse({});
+      expect(result.success).toBe(false);
+      if (!result.success) {
+        expect(allMessages(result.error).some((m) => m.includes('JSONPage must have'))).toBe(true);
+      }
+    });
+  });
+
   describe('Missing required fields handled', () => {
     test('prop definition without default', () => {
       const propDef = {

package/lib/shared/validation/schemas.ts

@@ -126,10 +126,47 @@ export const ListPropDefinitionSchema = z
   .passthrough();
 
 /**
- * Prop definition schema (union of base and list)
- * Validates prop definitions from component interfaces
+ * Prop definition schema — discriminates on `type` instead of a plain
+ * `z.union([List, Base])`.
+ *
+ * Why not a bare union: a `type: "list"` prop with a bad shape (the single most
+ * common authoring mistake — a bare-string `default` and/or a missing
+ * `itemSchema`, e.g. `{ type: "list", default: ["a", "b"] }`) matches NEITHER
+ * union branch (List wants `itemSchema` + an object-array `default`; Base's
+ * `type` enum has no `"list"`). The union then reports a noisy pile of
+ * cross-branch issues (`type` not in the base enum, `default[0]` expected object,
+ * …) — and, worse, when this prop sits inside a component file the outer
+ * `PageDataSchema` union surfaces the *page* branch's refine instead (see
+ * `JSONPageSchema` / `PageDataSchema` below), so the real error reads
+ * "JSONPage must have …root". The codec round-trips it and `astro build`
+ * renders it, so the only place it ever surfaces is here.
+ *
+ * Discriminating on `type` lets a list prop be validated by ONLY
+ * `ListPropDefinitionSchema` and collapses its failure into one actionable
+ * message that names the requirement, at the prop's own path.
  */
-export const PropDefinitionSchema = z.union([ListPropDefinitionSchema, BasePropDefinitionSchema]);
+export const PropDefinitionSchema = z
+  .object({ type: z.string() })
+  .passthrough()
+  .superRefine((val, ctx) => {
+    const branch = val.type === 'list' ? ListPropDefinitionSchema : BasePropDefinitionSchema;
+    const result = branch.safeParse(val);
+    if (result.success) return;
+    if (val.type === 'list') {
+      // Collapse the list-prop failure into one actionable message rather than
+      // replaying zod's per-field noise. `itemSchema` is required and `default`
+      // must be an array of OBJECTS (one `{ field: value }` record per item).
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          'list prop requires `itemSchema` and an object-array `default` ' +
+          '(each item is a `{ field: value }` object, not a bare string)',
+      });
+      return;
+    }
+    // Non-list props keep their precise per-field errors.
+    for (const issue of result.error.issues) ctx.addIssue(issue);
+  });
 
 /**
  * Style mapping schema
@@ -722,6 +759,14 @@ export const JSONPageSchema = z
     // Marks a page whose source is outside the meno-astro dialect (read-only in the editor).
     // Explicit (not just .passthrough()) so it survives a future tightening of this schema.
     _unsupported: z.object({ reason: z.string() }).passthrough().optional(),
+    // A component payload (`{ component: {...} }`) must NEVER validate as a page.
+    // Without this guard the page branch parses structurally (it's `.passthrough()`)
+    // and only trips the refine below — so when both branches of `PageDataSchema`
+    // fail, zod treats this branch as the "closest" (dirty) one and surfaces
+    // "JSONPage must have …root", masking the real component error (e.g. a malformed
+    // list prop). Rejecting a present `component` key makes this branch hard-fail on
+    // component payloads, so `PageDataSchema` reports the component branch instead.
+    component: z.undefined().optional(),
   })
   .passthrough()
   .refine(
@@ -752,8 +797,11 @@ export const PageDataWithComponentSchema = z
   .passthrough();
 
 /**
- * Page data schema - union of JSONPage and PageDataWithComponent
- * PageDataWithComponent checked first because it's more specific
+ * Page data schema - union of JSONPage and PageDataWithComponent.
+ * PageDataWithComponent is checked first because it's more specific; the
+ * `component: z.undefined()` guard on `JSONPageSchema` keeps a component payload
+ * from being mis-reported as a page (see that schema's comment), so a malformed
+ * prop surfaces its own error instead of the page-branch refine.
  */
 export const PageDataSchema = z.union([PageDataWithComponentSchema, JSONPageSchema]);
 
@@ -791,6 +839,7 @@ export const CMSFieldDefinitionSchema = z
     accept: z.string().optional(),
     collection: z.string().optional(),
     multiple: z.boolean().optional(),
+    editor: z.enum(['basic', 'extended']).optional(), // For 'rich-text' type: selects the render helper (Basic → richText(); Extended → richTextWithComponents())
   })
   .passthrough();
 

package/lib/shared/viewportUnits.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'bun:test';
-import { rewriteViewportUnits } from './viewportUnits';
+import { rewriteViewportUnits, rewriteViewportUnitsInStylesheet } from './viewportUnits';
 
 describe('rewriteViewportUnits', () => {
   it('rewrites basic vh values in declarations', () => {
@@ -102,3 +102,36 @@ describe('rewriteViewportUnits', () => {
     expect(rewriteViewportUnits('top: 0vh;')).toBe('top: calc(var(--design-vh, 1vh) * 0);');
   });
 });
+
+describe('rewriteViewportUnitsInStylesheet', () => {
+  it('preserves an escaped selector carrying a DECIMAL viewport unit', () => {
+    // `text-[clamp(56px,9.5vw,150px)]` escapes to `…9\.5vw…`; the value-level
+    // rewriter matches `.5vw` after the backslash and corrupts the selector, so
+    // the browser drops the rule. Stylesheet-scoped rewrite touches only bodies.
+    const rule = '.text-\\[clamp\\(56px\\,9\\.5vw\\,150px\\)\\] { font-size: clamp(56px,9.5vw,150px); }';
+    expect(rewriteViewportUnitsInStylesheet(rule)).toBe(
+      '.text-\\[clamp\\(56px\\,9\\.5vw\\,150px\\)\\] { font-size: clamp(56px,calc(var(--design-vw, 1vw) * 9.5),150px); }',
+    );
+    // Rationale guard: the raw value rewriter alone corrupts this selector.
+    expect(rewriteViewportUnits(rule).split('{')[0]).toContain('calc(');
+  });
+
+  it('preserves an escaped selector when a viewport unit follows a no-space comma', () => {
+    const rule = '.p-\\[80px_clamp\\(20px\\,5vw\\,64px\\)\\] { padding: 80px clamp(20px,5vw,64px); }';
+    expect(rewriteViewportUnitsInStylesheet(rule)).toBe(
+      '.p-\\[80px_clamp\\(20px\\,5vw\\,64px\\)\\] { padding: 80px clamp(20px,calc(var(--design-vw, 1vw) * 5),64px); }',
+    );
+  });
+
+  it('rewrites declaration values inside @media blocks while keeping nested selectors literal', () => {
+    const sheet = '@media (max-width: 767px) { .h-\\[50dvh\\] { height: 50dvh; } }';
+    expect(rewriteViewportUnitsInStylesheet(sheet)).toBe(
+      '@media (max-width: 767px) { .h-\\[50dvh\\] { height: calc(var(--design-dvh, 1dvh) * 50); } }',
+    );
+  });
+
+  it('is a no-op on empty / brace-free input', () => {
+    expect(rewriteViewportUnitsInStylesheet('')).toBe('');
+    expect(rewriteViewportUnitsInStylesheet('.a { color: red; }')).toBe('.a { color: red; }');
+  });
+});

package/lib/shared/viewportUnits.ts

@@ -53,6 +53,49 @@ export function rewriteViewportUnits(input: string): string {
   });
 }
 
+/**
+ * Apply {@link rewriteViewportUnits} to a whole stylesheet, rewriting ONLY the
+ * declaration bodies — never the selectors or at-rule preludes.
+ *
+ * {@link rewriteViewportUnits} is regex-based and can't reliably tell a
+ * declaration value's viewport unit from one buried in an *escaped*
+ * arbitrary-value class SELECTOR. The `VIEWPORT_UNIT_RE` lookbehind guards the
+ * common selector shapes (`.mh-100vh`, `.min-h-[100svh]`), but a class whose
+ * arbitrary value carries a viewport unit after an escaped `.` or `,` slips
+ * through — e.g. `text-[clamp(56px,9.5vw,150px)]` escapes to
+ * `.text-\[clamp\(56px\,9\.5vw\,150px\)\]`, where the `.5vw` sits right after a
+ * backslash and the rewriter injects `calc(...)` INTO the selector. The result
+ * is invalid CSS the browser drops entirely, so the rule — and the design-mode
+ * viewport pin it carries — silently vanishes and the element renders unstyled.
+ *
+ * Splitting selector text from declaration bodies at brace boundaries removes
+ * the ambiguity: every selector / prelude ends at a `{`, every declaration body
+ * ends at a `}`, so only body text is handed to the value rewriter. Correct
+ * through `@media` nesting too (a nested rule's selector still ends at its own
+ * `{`). Assumes braces only ever delimit blocks — true for the generated
+ * utility/interactive/theme sheets (none emit literal `{`/`}` inside a value or
+ * string). Mirror of meno-astro's `rewriteViewportUnitsInStylesheet` (keep in
+ * sync — see packages/astro/lib/integration/viewportUnits.ts).
+ */
+export function rewriteViewportUnitsInStylesheet(css: string): string {
+  if (!css) return css;
+  let out = '';
+  let seg = '';
+  for (let i = 0; i < css.length; i++) {
+    const ch = css[i];
+    if (ch === '{') {
+      out += seg + ch; // `seg` is a selector / at-rule prelude — keep it literal
+      seg = '';
+    } else if (ch === '}') {
+      out += rewriteViewportUnits(seg) + ch; // `seg` is a declaration body — rewrite its values
+      seg = '';
+    } else {
+      seg += ch;
+    }
+  }
+  return out + seg; // trailing text outside any block — never a declaration value
+}
+
 /**
  * Names of the CSS custom properties the runtime sets/clears to switch
  * between design-mode (stable px) and page-mode (no override, vh = actual

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
+    "css-tree": "^3.2.1",
     "esbuild": "^0.25.0",
     "isomorphic-dompurify": "^2.32.0",
     "jsep": "^1.4.0",
@@ -33,6 +34,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/css-tree": "^2.3.11",
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

package/vite.config.ts

@@ -19,7 +19,10 @@ export default defineConfig({
         'react',
         'react-dom',
         'bun',
-        // Node.js built-ins (server code)
+        // Node.js built-ins (server code) — bare and node:-prefixed specifiers.
+        // The regex covers all `node:`-prefixed imports (e.g. `node:path`) so they
+        // stay external instead of being browser-stubbed by Vite.
+        /^node:/,
         'path',
         'fs',
         'fs/promises',