meno-core 1.1.4 → 1.1.6

package/lib/shared/cssGeneration.test.ts

@@ -384,6 +384,42 @@ describe('cssGeneration', () => {
       expect(generateRuleForClass('[text-overflow:ellipsis]')).toBe('text-overflow: ellipsis;');
       expect(generateRuleForClass('[clip-path:circle(50%)]')).toBe('clip-path: circle(50%);');
     });
+
+    test('filter functions wrap the value in their function', () => {
+      expect(generateRuleForClass('blur-[70px]')).toBe('filter: blur(70px);');
+      expect(generateRuleForClass('backdrop-blur-[8px]')).toBe('backdrop-filter: blur(8px);');
+      expect(generateRuleForClass('blur-(--glow)')).toBe('filter: blur(var(--glow));');
+      expect(generateRuleForClass('brightness-50')).toBe('filter: brightness(0.5);');
+      expect(generateRuleForClass('grayscale')).toBe('filter: grayscale(100%);');
+      expect(generateRuleForClass('hue-rotate-90')).toBe('filter: hue-rotate(90deg);');
+      expect(generateRuleForClass('drop-shadow-[0_4px_6px_#0003]')).toBe('filter: drop-shadow(0 4px 6px #0003);');
+      expect(generateRuleForClass('backdrop-opacity-50')).toBe('backdrop-filter: opacity(0.5);');
+      // Length named scale is deliberately not absorbed (no blur theme tokens).
+      expect(generateRuleForClass('blur-sm')).toBeNull();
+    });
+
+    test('per-axis transforms and side radius expand correctly', () => {
+      expect(generateRuleForClass('skew-x-[10deg]')).toBe('transform: skewX(10deg);');
+      expect(generateRuleForClass('scale-y-95')).toBe('scale: 1 0.95;');
+      expect(generateRuleForClass('rounded-t-lg')).toBe(
+        'border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);',
+      );
+      expect(generateRuleForClass('rounded-l-[8px]')).toBe(
+        'border-top-left-radius: 8px; border-bottom-left-radius: 8px;',
+      );
+    });
+
+    test('new statics and viewport keywords', () => {
+      expect(generateRuleForClass('italic')).toBe('font-style: italic;');
+      expect(generateRuleForClass('text-nowrap')).toBe('white-space: nowrap;');
+      expect(generateRuleForClass('break-words')).toBe('overflow-wrap: break-word;');
+      expect(generateRuleForClass('isolate')).toBe('isolation: isolate;');
+      expect(generateRuleForClass('snap-x')).toBe('scroll-snap-type: x mandatory;');
+      expect(generateRuleForClass('mix-blend-multiply')).toBe('mix-blend-mode: multiply;');
+      expect(generateRuleForClass('columns-3')).toBe('columns: 3;');
+      expect(generateRuleForClass('h-dvh')).toBe('height: 100dvh;');
+      expect(generateRuleForClass('shadow-inner')).toBe('box-shadow: var(--shadow-inner);');
+    });
   });
 });
 

package/lib/shared/cssGeneration.ts

@@ -4,7 +4,7 @@
  * Used by both client and server to ensure consistent CSS output
  */
 
-import { propertyOrder, staticUtilityReverse, presetClassReverse } from './utilityClassConfig';
+import { propertyOrder, staticUtilityReverse, presetClassReverse, ROUNDED_SIDE_CORNERS } from './utilityClassConfig';
 import {
   parseUtilityClass,
   splitVariantPrefix,
@@ -217,6 +217,11 @@ export function generateRuleForClass(className: string, knownTokens?: ReadonlySe
   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};`;
   }

package/lib/shared/tailwindThemeScale.ts

@@ -137,6 +137,7 @@ const SPECS: ScaleSpec[] = [
       ['lg', '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)'],
       ['xl', '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)'],
       ['2xl', '0 25px 50px -12px rgb(0 0 0 / 0.25)'],
+      ['inner', 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)'],
     ],
   },
   {

package/lib/shared/templateStyleVars.ts

@@ -0,0 +1,49 @@
+/**
+ * Design-canvas bridge for `{{template}}`-bound style declarations — meno-core's mirror
+ * of the meno-astro var-bridge (packages/astro `runtime/cssValue.ts` templateVarName +
+ * `runtime/style.ts` resolveMappingsInFlat).
+ *
+ * A style value bound to a prop template (`gap: "{{gap}}px"`) can't be a static utility
+ * class in a real Astro build — its value is per-instance — so meno-astro emits the class
+ * `gap-[var(--m-<bp>-gap)]` and sets that variable inline on the element. Two consequences
+ * the design canvas must reproduce for WYSIWYG parity:
+ *
+ *   1. Auto-responsive scaling never applies to the declaration (the scaler can't scale a
+ *      `var()`), so the value renders CONSTANT across breakpoints in a real build. Before
+ *      this bridge, the canvas resolved the template to a concrete class (`gap-[40px]`)
+ *      which the scaler happily shrank at tablet/mobile — values looked responsive in
+ *      Fast Design Mode and fixed on the published site.
+ *   2. The inline style sets the VARIABLE, not the property, so interactive class rules
+ *      (`:hover`, `.is-open`) still override the declaration by normal specificity.
+ *
+ * `processStructure` (templateEngine) performs the bridging when it resolves a component
+ * structure's templates: the resolved style carries `var(--m-<bp>-<prop>)` values and the
+ * variable assignments land on the node under {@link TEMPLATE_VARS_KEY} — an EPHEMERAL,
+ * render-only field (never persisted, never validated). The client builders apply it via
+ * their element ref (like interactive-style variables); the SSR renderer folds it into the
+ * element's inline `style="…"`.
+ */
+
+/**
+ * The CSS custom-property name bridging a `{{template}}`-bound declaration to its utility
+ * rule. MUST stay byte-identical to meno-astro's `templateVarName` (runtime/cssValue.ts) —
+ * the canvas and the real build render the same variable names so what you inspect in
+ * Fast Design Mode matches the published output.
+ */
+export function templateVarName(breakpoint: string, cssProp: string): string {
+  const kebab = cssProp.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+  return `--m-${breakpoint}-${kebab}`;
+}
+
+/** Ephemeral node field carrying the bridged variable assignments (render-only). */
+export const TEMPLATE_VARS_KEY = '__templateVars';
+
+/** Read the bridged `--m-<bp>-<prop>` assignments off a processed node, if any. */
+export function getTemplateVars(node: unknown): Record<string, string> | undefined {
+  if (!node || typeof node !== 'object') return undefined;
+  const vars = (node as Record<string, unknown>)[TEMPLATE_VARS_KEY];
+  if (!vars || typeof vars !== 'object' || Array.isArray(vars)) return undefined;
+  const entries = Object.entries(vars as Record<string, unknown>);
+  if (entries.length === 0) return undefined;
+  return vars as Record<string, string>;
+}

package/lib/shared/types/comment.ts

@@ -3,8 +3,8 @@
  *
  * 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
+ *   {projectRoot}/comments/<status>/<pageSlug>--<seq>--<titleSlug>--<idFrag>.json
+ *   e.g. comments/open/blog__post--3--hero-is-too-dark--550e8400.json
  *
  * Pins are an authoring-time concept — they live in studio only.
  */
@@ -119,7 +119,13 @@ export interface Comment {
   _filename: string;
   /** Page path the pin lives on (e.g. `"blog/post"`). */
   _pagePath: string;
-  /** Stable per-page badge number. Server assigns at create time. */
+  /**
+   * Best-effort creation counter (server stamps `max+1` at create time), used
+   * as the human-scannable middle segment of the filename. NOT collision-proof
+   * under concurrent/offline creation and NOT the badge shown to users — the pin
+   * badge is derived client-side from the full set (see `assignDisplaySeq`), so a
+   * repeated `_seq` here is harmless.
+   */
   _seq: number;
   /** ISO timestamps. */
   _createdAt: string;