npm - meno-core - Versions diffs - 1.0.47 → 1.0.49 - Mend

meno-core 1.0.47 → 1.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/build-astro.ts +2 -2
package/dist/build-static.js +7 -7
package/dist/chunks/{chunk-UUA5LEWF.js → chunk-6IVUG7FY.js} +138 -7
package/dist/chunks/chunk-6IVUG7FY.js.map +7 -0
package/dist/chunks/{chunk-XSWR3QLI.js → chunk-AZQYF6KE.js} +261 -130
package/dist/chunks/chunk-AZQYF6KE.js.map +7 -0
package/dist/chunks/{chunk-47UNLQUU.js → chunk-CHD5UCFF.js} +57 -12
package/dist/chunks/chunk-CHD5UCFF.js.map +7 -0
package/dist/chunks/{chunk-FGUZOYJX.js → chunk-EQYDSPBB.js} +435 -131
package/dist/chunks/chunk-EQYDSPBB.js.map +7 -0
package/dist/chunks/{chunk-IF3RATBY.js → chunk-H4JSCDNW.js} +2 -2
package/dist/chunks/{chunk-KITQJYZV.js → chunk-J23ZX5AP.js} +40 -4
package/dist/chunks/chunk-J23ZX5AP.js.map +7 -0
package/dist/chunks/{chunk-LJFB5EBT.js → chunk-JER5NQVM.js} +5 -5
package/dist/chunks/{chunk-ZTKHJQ2Z.js → chunk-KPU2XHOS.js} +5 -2
package/dist/chunks/{chunk-ZTKHJQ2Z.js.map → chunk-KPU2XHOS.js.map} +2 -2
package/dist/chunks/{chunk-BCLGRZ3U.js → chunk-LKAGAQ3M.js} +2 -2
package/dist/chunks/{chunk-FED5MME6.js → chunk-S2CX6HFM.js} +262 -26
package/dist/chunks/chunk-S2CX6HFM.js.map +7 -0
package/dist/chunks/{configService-DYCUEURL.js → configService-CCA6AIDI.js} +3 -3
package/dist/entries/server-router.js +9 -9
package/dist/entries/server-router.js.map +2 -2
package/dist/lib/client/index.js +64 -20
package/dist/lib/client/index.js.map +3 -3
package/dist/lib/server/index.js +1737 -296
package/dist/lib/server/index.js.map +4 -4
package/dist/lib/shared/index.js +50 -10
package/dist/lib/shared/index.js.map +3 -3
package/entries/server-router.tsx +6 -2
package/lib/client/core/ComponentBuilder.test.ts +17 -0
package/lib/client/core/ComponentBuilder.ts +25 -1
package/lib/client/core/builders/embedBuilder.ts +15 -2
package/lib/client/core/builders/linkNodeBuilder.ts +15 -2
package/lib/client/core/builders/localeListBuilder.ts +17 -6
package/lib/client/styles/StyleInjector.ts +3 -2
package/lib/client/theme.ts +4 -4
package/lib/server/cssGenerator.test.ts +64 -1
package/lib/server/cssGenerator.ts +48 -9
package/lib/server/index.ts +1 -1
package/lib/server/jsonLoader.test.ts +0 -17
package/lib/server/jsonLoader.ts +0 -81
package/lib/server/providers/fileSystemCMSProvider.test.ts +163 -0
package/lib/server/providers/fileSystemCMSProvider.ts +200 -11
package/lib/server/routes/api/variables.ts +4 -2
package/lib/server/routes/index.ts +1 -1
package/lib/server/routes/pages.ts +23 -1
package/lib/server/services/cmsService.test.ts +246 -0
package/lib/server/services/cmsService.ts +122 -5
package/lib/server/services/configService.ts +5 -0
package/lib/server/ssr/attributeBuilder.ts +41 -0
package/lib/server/ssr/htmlGenerator.test.ts +114 -2
package/lib/server/ssr/htmlGenerator.ts +53 -6
package/lib/server/ssr/liveReloadIntegration.test.ts +209 -0
package/lib/server/ssr/ssrRenderer.test.ts +362 -1
package/lib/server/ssr/ssrRenderer.ts +216 -72
package/lib/server/utils/jsonLineMapper.test.ts +53 -1
package/lib/server/utils/jsonLineMapper.ts +43 -3
package/lib/server/webflow/buildWebflow.ts +343 -123
package/lib/server/webflow/index.ts +1 -0
package/lib/server/webflow/nodeToWebflow.test.ts +3170 -0
package/lib/server/webflow/nodeToWebflow.ts +2141 -129
package/lib/server/webflow/styleMapper.test.ts +389 -0
package/lib/server/webflow/styleMapper.ts +517 -63
package/lib/server/webflow/templateWrapper.ts +49 -0
package/lib/server/webflow/types.ts +218 -18
package/lib/shared/cssGeneration.test.ts +267 -1
package/lib/shared/cssGeneration.ts +240 -18
package/lib/shared/cssProperties.test.ts +247 -1
package/lib/shared/cssProperties.ts +196 -6
package/lib/shared/elementClassName.test.ts +15 -0
package/lib/shared/elementClassName.ts +7 -3
package/lib/shared/interfaces/contentProvider.ts +39 -6
package/lib/shared/pathSecurity.ts +16 -0
package/lib/shared/registry/nodeTypes/ListNodeType.ts +1 -1
package/lib/shared/responsiveScaling.test.ts +143 -0
package/lib/shared/responsiveScaling.ts +253 -2
package/lib/shared/themeDefaults.test.ts +3 -3
package/lib/shared/themeDefaults.ts +3 -3
package/lib/shared/types/cms.ts +28 -3
package/lib/shared/types/index.ts +2 -0
package/lib/shared/types/variables.ts +37 -0
package/lib/shared/utilityClassConfig.ts +3 -0
package/lib/shared/utilityClassMapper.test.ts +123 -0
package/lib/shared/utilityClassMapper.ts +179 -8
package/lib/shared/validation/schemas.ts +15 -1
package/lib/shared/validation/validators.ts +26 -1
package/package.json +1 -1
package/dist/chunks/chunk-47UNLQUU.js.map +0 -7
package/dist/chunks/chunk-FED5MME6.js.map +0 -7
package/dist/chunks/chunk-FGUZOYJX.js.map +0 -7
package/dist/chunks/chunk-KITQJYZV.js.map +0 -7
package/dist/chunks/chunk-UUA5LEWF.js.map +0 -7
package/dist/chunks/chunk-XSWR3QLI.js.map +0 -7
/package/dist/chunks/{chunk-IF3RATBY.js.map → chunk-H4JSCDNW.js.map} +0 -0
/package/dist/chunks/{chunk-LJFB5EBT.js.map → chunk-JER5NQVM.js.map} +0 -0
/package/dist/chunks/{chunk-BCLGRZ3U.js.map → chunk-LKAGAQ3M.js.map} +0 -0
/package/dist/chunks/{configService-DYCUEURL.js.map → configService-CCA6AIDI.js.map} +0 -0

package/lib/server/webflow/templateWrapper.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * Webflow Designer Extension template wrapper.
+ *
+ * The Webflow Designer injects the `webflow` API global only when extension
+ * HTML is wrapped in a template fetched from `webflow-ext.com`. This module
+ * fetches the template once per process, caches it, then splices the
+ * extension's <head>/<body> content into the `{{ui}}` placeholder.
+ *
+ * Used by both the studio's mounted `/webflow-extension/*` route and the
+ * standalone serve.ts on port 1337, so they stay in sync automatically.
+ */
+import { readFile } from 'fs/promises';
+let cachedTemplate: string | null = null;
+async function getWebflowTemplate(appName: string): Promise<string> {
+  if (cachedTemplate) return cachedTemplate;
+  const url = `https://webflow-ext.com/template/v2?name=${encodeURIComponent(appName)}`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch Webflow template: ${res.status}`);
+  cachedTemplate = await res.text();
+  return cachedTemplate;
+}
+/**
+ * Wrap extension HTML in the Webflow Designer template.
+ * `manifestPath` points to the extension's `webflow.json` — its `name` field
+ * is forwarded as the `?name=` query param to webflow-ext.com.
+ *
+ * On any failure (manifest read, template fetch) we log a warning and return
+ * the raw HTML, matching the prior behavior of the two duplicate copies.
+ */
+export async function wrapInWebflowTemplate(html: string, manifestPath: string): Promise<string> {
+  try {
+    const manifest = JSON.parse(await readFile(manifestPath, 'utf-8'));
+    const template = await getWebflowTemplate(manifest.name || 'Meno Import');
+    const headMatch = html.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    const headContent = headMatch ? headMatch[1] : '';
+    const bodyContent = bodyMatch ? bodyMatch[1] : '';
+    return template.replace('{{ui}}', headContent + bodyContent);
+  } catch (err: any) {
+    console.warn('Could not fetch Webflow wrapper template:', err.message);
+    return html;
+  }
+}

package/lib/server/webflow/types.ts CHANGED Viewed

@@ -9,18 +9,49 @@ import type { CMSFieldType } from '../../shared/types/cms';
 // Style Classes
 // ---------------------------------------------------------------------------
-/** Webflow breakpoint identifiers */
-export type WebflowBreakpoint = 'Desktop' | 'Tablet' | 'MobilePortrait';
+/**
+ * Webflow Designer API breakpoint identifiers.
+ * `main` is the desktop / default tier; `xxl|xl|large` are above-desktop;
+ * `medium|small|tiny` are below-desktop.
+ * Reference: https://developers.webflow.com/designer/reference/set-style-properties
+ */
+export type WebflowBreakpoint =
+  | 'xxl'
+  | 'xl'
+  | 'large'
+  | 'main'
+  | 'medium'
+  | 'small'
+  | 'tiny';
-/** Webflow pseudo-state identifiers */
-export type WebflowPseudoState = 'hover' | 'focus' | 'active' | 'visited' | 'focus-visible';
+/**
+ * Webflow Designer API pseudo-state identifiers.
+ * Reference: https://developers.webflow.com/designer/reference/set-style-properties
+ */
+export type WebflowPseudoState =
+  | 'noPseudo'
+  | 'hover'
+  | 'focus'
+  | 'focus-visible'
+  | 'focus-within'
+  | 'active'
+  | 'visited'
+  | 'pressed'
+  | 'before'
+  | 'after'
+  | 'placeholder'
+  | 'empty'
+  | 'first-child'
+  | 'last-child'
+  | 'nth-child(odd)'
+  | 'nth-child(even)';
 /** CSS properties as a flat record */
 export type CSSProperties = Record<string, string>;
 /** A named Webflow style class with responsive + pseudo-state overrides */
 export interface WebflowStyleClass {
-  /** Unique class name (e.g., "c-navigation-hamburger") */
+  /** Unique class name (e.g., "navigation-hamburger" for components, "p-about-grid5" for pages) */
   name: string;
   /** Base (Desktop) CSS properties */
   base: CSSProperties;
@@ -46,20 +77,113 @@ export interface WebflowElement {
   comboClasses?: string[];
   /** Inline text content (for text nodes) */
   textContent?: string;
-  /** Child elements */
-  children?: WebflowElement[];
+  /**
+   * Child elements. Plain strings are inline text runs (Webflow String nodes)
+   * — used for mixed content like `<h1>foo <span>bar</span> baz</h1>`.
+   */
+  children?: Array<WebflowElement | string>;
   /** HTML attributes (src, alt, href, target, etc.) */
   attributes?: Record<string, string | number | boolean>;
-  /** Raw HTML content (for embed nodes) */
-  rawHtml?: string;
-  /** Whether this element is conditionally rendered */
-  conditional?: {
-    prop: string;
-    condition: 'truthy' | 'equals';
-    value?: string;
+  /**
+   * Inline SVG markup for an embed node. The Webflow extension uploads this
+   * as an `image/svg+xml` asset and emits an Image element — Webflow's
+   * Designer API has no public method to set HtmlEmbed code content.
+   */
+  svgSource?: string;
+  /** Source URL for an `<img>`-rooted embed; uploaded into Webflow as an asset. */
+  imageSrc?: string;
+  /** Alt text paired with `svgSource` / `imageSrc`. */
+  imageAlt?: string;
+  /**
+   * Pre-fetched image bytes for `<img>` / embed elements whose source URL
+   * the Webflow Designer iframe can't reach (e.g. project-relative paths
+   * like `/images/foo.webp`, which would resolve against `designer.webflow.com`).
+   * The extension uploads these directly via `createAsset` instead of
+   * `fetch`-ing them.
+   */
+  imageDataBase64?: string;
+  imageDataMime?: string;
+  imageDataFileName?: string;
+  /**
+   * Embed payload that is neither SVG nor a single `<img>`. The extension
+   * logs it and skips insertion (no equivalent Webflow API exists).
+   */
+  unsupportedEmbed?: { reason: string; preview: string; label?: string };
+  /**
+   * When set, this element is an instance of a Webflow Component registered
+   * via `payload.components`. The extension appends the registered Component
+   * (looked up by name) instead of building children. `tag`/`className`/etc.
+   * remain set as a fallback for older extensions that don't understand
+   * `componentRef`.
+   */
+  componentRef?: string;
+  /**
+   * Inline-expanded element tree to use when the Webflow Designer API can't
+   * register Components (older runtime, missing `canCreateComponents`
+   * permission). Mirrors the pre-promotion expansion of the Meno component so
+   * the extension can render the same markup it does today.
+   */
+  inlineFallback?: WebflowElement[];
+  /**
+   * Bound CMS list marker. When set, this element is the synthetic wrapper
+   * for `<list sourceType="collection">` emitted in bound mode (see
+   * `buildWebflowPayload({ bindCollectionLists: true })`). Value is the Meno
+   * collection slug; the extension translates that to a Webflow collection
+   * ID via the v1 sync ID map and inserts a `DynamoWrapper` preset.
+   * Children are the *single* rendered item template (not N copies), with
+   * field references preserved as `menoBind` markers below.
+   */
+  menoCollectionRef?: string;
+  /**
+   * Per-element CMS field binding markers. Captured at server emit time from
+   * the source `{{field}}` template; the extension translates them into
+   * `data-meno-bind-*` custom attributes on the inserted element and surfaces
+   * a manual-bind checklist. Webflow's Designer API has no `setBinding` /
+   * `setCollection` write surface yet (Apr 2026 — confirmed by Webflow
+   * staff Plata + Selser on the developer forum), so the user does the
+   * actual field binding once in the Designer UI after insertion.
+   */
+  menoBind?: {
+    /** Bind this element's text content to this CMS field slug. */
+    textField?: string;
+    /** Map of attribute name → CMS field slug to bind. */
+    attrFields?: Record<string, string>;
   };
 }
+// ---------------------------------------------------------------------------
+// Bound-list sentinel (server-side internal — extension consumes `menoBind`)
+// ---------------------------------------------------------------------------
+/**
+ * String sentinel inserted in place of a real CMS field value when emitting a
+ * bound Collection List. The existing template engine is reused unchanged: a
+ * synthetic placeholder item maps every schema field to
+ * `${SENTINEL_PREFIX}${fieldSlug}${SENTINEL_SUFFIX}`, so `{{post.title}}`
+ * resolves to that string. A post-walk then converts those strings into
+ * `WebflowElement.menoBind` markers and replaces them with a readable
+ * placeholder so the user can see what each child is meant to display.
+ */
+export const MENO_BIND_SENTINEL_PREFIX = '__MENO_BIND__:';
+export const MENO_BIND_SENTINEL_SUFFIX = ':__';
+export const MENO_BIND_SENTINEL_RE = /__MENO_BIND__:([^:]+):__/g;
+export const MENO_BIND_SENTINEL_EXACT_RE = /^__MENO_BIND__:([^:]+):__$/;
+/** Synthetic tag for the bound Collection List wrapper. */
+export const COLLECTION_LIST_TAG = '__collection_list__';
+/**
+ * A Meno component promoted to a Webflow Component. The extension calls
+ * `webflow.registerComponent` once per entry, then `parent.append(component)`
+ * for every element in the page tree that has a matching `componentRef`.
+ */
+export interface WebflowComponentDef {
+  /** Component name as it appears in Webflow's Components panel. */
+  name: string;
+  /** Element tree that becomes the Component's body. */
+  elements: WebflowElement[];
+}
 // ---------------------------------------------------------------------------
 // Pages
 // ---------------------------------------------------------------------------
@@ -71,7 +195,9 @@ export interface WebflowPage {
   /** URL slug (e.g., "about", "blog/post-1") */
   slug: string;
   /** Meta description */
-  metaDescription?: string;
+  description?: string;
+  /** Comma-separated keywords from page meta */
+  keywords?: string;
   /** Open Graph title */
   ogTitle?: string;
   /** Open Graph description */
@@ -84,6 +210,21 @@ export interface WebflowPage {
   locale?: string;
 }
+/**
+ * A component-level script bundled into the export. The Webflow extension
+ * concatenates these into a single `<script>` injected at the end of `<body>`
+ * so interactive Meno components (FAQ accordion, dropdowns, mobile menu) work
+ * once published.
+ */
+export interface WebflowScript {
+  /** Component name (used by the runtime to find element instances). */
+  componentName: string;
+  /** Component's JavaScript code (verbatim from `Component.js`). */
+  code: string;
+  /** Whether the source defined defineVars (true / explicit list / undefined). */
+  defineVars?: true | string[];
+}
 // ---------------------------------------------------------------------------
 // CMS
 // ---------------------------------------------------------------------------
@@ -112,12 +253,25 @@ export interface WebflowCMSField {
   required?: boolean;
   /** Options for Option type fields */
   options?: string[];
+  /** Help text shown to editors in the Webflow CMS UI */
+  helpText?: string;
+  /**
+   * For Reference fields: Meno collection slug of the target collection.
+   * The sync orchestrator resolves this to a Webflow collection ID at create
+   * time (pass 2 of the two-pass collection create — references can only be
+   * added once their target exists).
+   */
+  referenceCollection?: string;
+  /** True for multi-reference (array of IDs); false / undefined for single ref. */
+  multiReference?: boolean;
 }
 /** A Webflow CMS collection definition */
 export interface WebflowCMSCollection {
-  /** Collection display name */
+  /** Collection display name (plural) */
   name: string;
+  /** Singular form of the display name (Webflow requires this for new collections) */
+  singularName: string;
   /** Collection slug */
   slug: string;
   /** URL pattern for detail pages */
@@ -146,6 +300,14 @@ export interface WebflowAssetRef {
 // Export Payload
 // ---------------------------------------------------------------------------
+/** Per-locale slug mapping for a single source page */
+export interface WebflowSlugMap {
+  /** The page's canonical id (e.g., "about", "blog/post-1") */
+  pageId: string;
+  /** Locale code → translated slug */
+  slugs: Record<string, string>;
+}
 /** Complete Webflow export payload */
 export interface WebflowExportPayload {
   /** Export format version */
@@ -160,8 +322,46 @@ export interface WebflowExportPayload {
   cms: WebflowCMSCollection[];
   /** Asset references (images, fonts, etc.) */
   assets: WebflowAssetRef[];
-  /** CSS variables used in styles (for global embed) */
-  cssVariables?: Record<string, string>;
+  /** Per-locale slug translations so the consumer can route between locales */
+  slugMappings?: WebflowSlugMap[];
+  /** Component scripts — bundled at body end so components stay interactive. */
+  scripts?: WebflowScript[];
+  /**
+   * Meno components promoted to Webflow Components (currently `Navigation`
+   * and `Footer`). The extension registers each one before inserting page
+   * elements; pages reference them via `WebflowElement.componentRef`.
+   */
+  components?: WebflowComponentDef[];
+  /**
+   * Concatenated `Component.css` sidecars (raw CSS) for components that ship
+   * hand-written styles. Component-scoped rules — data-attribute selectors,
+   * runtime state classes (e.g. `.is-open`), `:checked ~` siblings — aren't
+   * representable in Webflow's class system and are silently lost when only
+   * the per-element classes are emitted. The user pastes this into Site
+   * Settings → Custom Code → Head Code along with the combo-class overrides.
+   */
+  componentCss?: string;
+  /**
+   * Raw CSS for `interactiveStyles` rules that Webflow's class system can't
+   * represent natively — anything with a `prefix` (descendant/sibling
+   * selector built from a state class on an ancestor), a class-style
+   * `postfix` like `.is-open`, or breakpoint-divided pseudo states.
+   * Pseudo-only rules with empty prefix continue to flow through Webflow's
+   * `Style.setProperties({ pseudo })`. Pasted into Site Settings → Custom
+   * Code → Head Code along with `componentCss`.
+   */
+  interactiveCss?: string;
+  /**
+   * Project i18n summary so the extension can show a locale picker. Always
+   * present; single-locale projects still receive their lone locale here.
+   * `selectedLocale` reflects which locale's pages were emitted in this
+   * payload — the extension uses it to round-trip the picker selection.
+   */
+  i18n?: {
+    defaultLocale: string;
+    locales: Array<{ code: string; name: string; nativeName?: string }>;
+    selectedLocale: string;
+  };
 }
 // ---------------------------------------------------------------------------

package/lib/shared/cssGeneration.test.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import { describe, expect, test } from 'bun:test';
-import { generateRuleForClass, generateUtilityCSS, generateSingleClassCSS, extractUtilityClassesFromHTML, generateInteractiveCSS } from './cssGeneration';
+import { generateRuleForClass, generateUtilityCSS, generateSingleClassCSS, extractUtilityClassesFromHTML, generateInteractiveCSS, applyContainerPattern } from './cssGeneration';
 import { DEFAULT_BREAKPOINTS } from './breakpoints';
 import type { ResponsiveScales } from './responsiveScaling';
 import type { InteractiveStyles } from './types/styles';
+import { registerStyleValue, clearRegistry } from './styleValueRegistry';
 describe('extractUtilityClassesFromHTML', () => {
   test('extracts ins- classes', () => {
@@ -135,6 +136,20 @@ describe('cssGeneration', () => {
     });
   });
+  describe('display (d-) prefix for non-special values', () => {
+    test('d-contents generates display: contents', () => {
+      expect(generateRuleForClass('d-contents')).toBe('display: contents;');
+    });
+    test('d-flow-root generates display: flow-root', () => {
+      expect(generateRuleForClass('d-flow-root')).toBe('display: flow-root;');
+    });
+    test('d-table generates display: table', () => {
+      expect(generateRuleForClass('d-table')).toBe('display: table;');
+    });
+  });
   describe('bc- and bt- combination', () => {
     test('bc- controls color independently from bt-', () => {
       // bt- should NOT set color, allowing bc- to control it
@@ -296,3 +311,254 @@ describe('generateInteractiveCSS — auto-responsive scaling', () => {
     expect(cssNoScales).not.toContain('@media');
   });
 });
+describe('fluid mode — clamp() emission', () => {
+  const fluidScales: ResponsiveScales = {
+    enabled: true,
+    mode: 'fluid',
+    baseReference: 16,
+    fluidRange: { min: 320, max: 1440 },
+    fontSize: { tablet: 0.88, mobile: 0.75 },
+    padding: { tablet: 0.75, mobile: 0.5 },
+  };
+  test('generateUtilityCSS emits a single clamp() rule with no @media for auto-responsive class', () => {
+    const classes = new Set(['fs-32px']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidScales);
+    // mobile.breakpoint=540 is the smallest in DEFAULT_BREAKPOINTS, mobile scale=0.75
+    // so MIN = 32 + (32-16)*(0.75-1) = 32 - 4 = 28; MAX = 32
+    expect(css).toContain('.fs-32px');
+    expect(css).toContain('clamp(28px,');
+    expect(css).toContain(', 32px)');
+    expect(css).not.toContain('@media');
+  });
+  test('generateUtilityCSS leaves non-scalable class unchanged in fluid mode', () => {
+    const classes = new Set(['z-2']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidScales);
+    expect(css).toContain('z-index: 2');
+    expect(css).not.toContain('clamp(');
+  });
+  test('generateSingleClassCSS emits clamp() in fluid mode', () => {
+    const css = generateSingleClassCSS('p-40px', DEFAULT_BREAKPOINTS, fluidScales);
+    // mobile padding scale=0.5 → MIN = 40 + (40-16)*(0.5-1) = 40 - 12 = 28
+    expect(css).toContain('clamp(28px,');
+    expect(css).toContain(', 40px)');
+    expect(css).not.toContain('@media');
+  });
+  test('breakpoints mode (default when mode is undefined) keeps existing @media behavior', () => {
+    const breakpointScales: ResponsiveScales = { ...fluidScales, mode: undefined };
+    const classes = new Set(['fs-32px']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, breakpointScales);
+    expect(css).toContain('@media (max-width: 1024px)');
+    expect(css).toContain('@media (max-width: 540px)');
+    expect(css).not.toContain('clamp(');
+  });
+  test('generateInteractiveCSS encodes scaling as clamp() on base rule, no @media', () => {
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { fontSize: '100px' } },
+    ];
+    const css = generateInteractiveCSS('c_heading', styles, DEFAULT_BREAKPOINTS, undefined, fluidScales);
+    // mobile fontSize scale=0.75 → MIN = 100 + (100-16)*(0.75-1) = 79
+    expect(css).toContain('clamp(79px,');
+    expect(css).toContain(', 100px)');
+    expect(css).not.toContain('@media');
+  });
+  test('size category (max-width / width / height) IS fluidly scaled in fluid mode', () => {
+    const fluidWithSize: ResponsiveScales = {
+      ...fluidScales,
+      size: { tablet: 0.9, mobile: 0.75 },
+    };
+    const classes = new Set(['mw-1200px']);
+    const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidWithSize);
+    // mobile size scale=0.75 → MIN = 1200 + (1200-16)*(0.75-1) = 1200 - 296 = 904
+    expect(css).toContain('clamp(904px,');
+    expect(css).toContain(', 1200px)');
+    expect(css).not.toContain('@media');
+  });
+  test('generateInteractiveCSS keeps explicit per-breakpoint override as @media in fluid mode', () => {
+    const styles: InteractiveStyles = [
+      {
+        prefix: '',
+        postfix: ':hover',
+        style: {
+          base: { fontSize: '100px' },
+          mobile: { fontSize: '60px' },
+        },
+      },
+    ];
+    const css = generateInteractiveCSS('c_btn', styles, DEFAULT_BREAKPOINTS, undefined, fluidScales);
+    // base rule has clamp from auto-scale
+    expect(css).toContain('clamp(79px,');
+    // explicit mobile override stays as a media-query rule with the user's value
+    expect(css).toMatch(/@media \(max-width: 540px\) \{[^}]*font-size:\s*60px/);
+  });
+  // Hash-fallback utility classes (e.g. `fs-h1glej9a` for `222.3px` — the `.`
+  // is illegal in CSS selectors, so utilityClassMapper generates a hashed name
+  // and stores the real value in styleValueRegistry). The scaling pipeline
+  // previously bailed on these because extractPropertyAndValue returns null
+  // for hashed classes. resolveScalablePropertyValue now consults the registry.
+  describe('hash-fallback classes', () => {
+    test('fluid mode: hashed fs- class with px value gets clamp()', () => {
+      clearRegistry();
+      registerStyleValue('fs-h1glej9a', '222.3px');
+      const css = generateUtilityCSS(new Set(['fs-h1glej9a']), DEFAULT_BREAKPOINTS, fluidScales);
+      // mobile fontSize scale=0.75, baseRef=16
+      // MIN = 222.3 + (222.3 - 16)*(0.75 - 1) = 222.3 - 51.575 = 170.725 → round 171
+      expect(css).toMatch(/\.fs-h1glej9a\s*\{\s*font-size:\s*clamp\(171px,/);
+      expect(css).toContain(', 222.3px)');
+      expect(css).not.toContain('@media');
+    });
+    test('fluid mode: hashed class at baseReference renders plain (MIN===MAX, no clamp)', () => {
+      clearRegistry();
+      registerStyleValue('fs-hatref', '16px');
+      const css = generateUtilityCSS(new Set(['fs-hatref']), DEFAULT_BREAKPOINTS, fluidScales);
+      // 16 === baseReference → calculateResponsiveValue returns 16 → MIN===MAX → no clamp
+      expect(css).toContain('font-size: 16px');
+      expect(css).not.toContain('clamp(');
+    });
+    test('fluid mode: hashed class with fractional px value above baseReference clamps with rounded MIN', () => {
+      clearRegistry();
+      registerStyleValue('fs-hfrac', '14.4px');
+      const css = generateUtilityCSS(new Set(['fs-hfrac']), DEFAULT_BREAKPOINTS, fluidScales);
+      // 14.4 < baseRef (16) → calculateResponsiveValue floors to round(14.4) = 14
+      // MIN=14, MAX=14.4 → small clamp emitted
+      expect(css).toMatch(/font-size:\s*clamp\(14px,/);
+      expect(css).toContain(', 14.4px)');
+    });
+    test('fluid mode: hashed class with already-clamped Webflow value passes through unchanged', () => {
+      clearRegistry();
+      const webflowClamp = 'clamp(2*1rem, ((2 - 1)/70*20)*1rem + ((2 - 1)/70)*100vw, 4*1rem)';
+      registerStyleValue('p-hwebflow', webflowClamp);
+      const css = generateUtilityCSS(new Set(['p-hwebflow']), DEFAULT_BREAKPOINTS, fluidScales);
+      // buildFluidPropertyValue returns null for unparseable inputs → rule stays as-is
+      expect(css).toContain(webflowClamp);
+      // no double-clamping
+      const clampCount = (css.match(/clamp\(/g) || []).length;
+      expect(clampCount).toBe(1);
+    });
+    test('breakpoints mode: hashed class with px value gets @media-scaled', () => {
+      clearRegistry();
+      registerStyleValue('p-h1glej9a', '40px');
+      const breakpointScales: ResponsiveScales = { ...fluidScales, mode: 'breakpoints' };
+      const css = generateUtilityCSS(new Set(['p-h1glej9a']), DEFAULT_BREAKPOINTS, breakpointScales);
+      // Base rule
+      expect(css).toContain('padding: 40px');
+      // mobile padding scale=0.5 → 40 + (40-16)*(0.5-1) = 28
+      expect(css).toMatch(/@media \(max-width: 540px\) \{[^}]*padding:\s*28px/);
+    });
+    test('generateSingleClassCSS handles hashed class in fluid mode', () => {
+      clearRegistry();
+      registerStyleValue('fs-htest1', '100px');
+      const css = generateSingleClassCSS('fs-htest1', DEFAULT_BREAKPOINTS, fluidScales);
+      // mobile fontSize 0.75 → MIN = 100 + (100-16)*(0.75-1) = 79
+      expect(css).toContain('clamp(79px,');
+      expect(css).toContain(', 100px)');
+    });
+  });
+});
+describe('applyContainerPattern', () => {
+  test('width === maxWidth in fluid mode → calc + auto margins, maxWidth retained', () => {
+    const result = applyContainerPattern({ width: '1200px', maxWidth: '1200px' }, true);
+    expect(result.width).toBe('calc(100% - var(--site-margin) * 2)');
+    expect(result.maxWidth).toBe('1200px');
+    expect(result.marginLeft).toBe('auto');
+    expect(result.marginRight).toBe('auto');
+  });
+  test('width === maxWidth in breakpoints mode → unchanged', () => {
+    const input = { width: '1200px', maxWidth: '1200px' };
+    const result = applyContainerPattern(input, false);
+    expect(result).toBe(input);
+  });
+  test('width !== maxWidth → unchanged', () => {
+    const input = { width: '1200px', maxWidth: '800px' };
+    const result = applyContainerPattern(input, true);
+    expect(result).toBe(input);
+  });
+  test('only width set, no maxWidth → unchanged', () => {
+    const input = { width: '1200px' };
+    const result = applyContainerPattern(input, true);
+    expect(result).toBe(input);
+  });
+  test('width === maxWidth === "auto" → unchanged (RESERVED)', () => {
+    const input = { width: 'auto', maxWidth: 'auto' };
+    const result = applyContainerPattern(input, true);
+    expect(result).toBe(input);
+  });
+  test('width === maxWidth === "100%" → trigger fires (legitimate use)', () => {
+    const result = applyContainerPattern({ width: '100%', maxWidth: '100%' }, true);
+    expect(result.width).toBe('calc(100% - var(--site-margin) * 2)');
+    expect(result.marginLeft).toBe('auto');
+    expect(result.marginRight).toBe('auto');
+  });
+  test('explicit marginLeft is overwritten with auto (per spec)', () => {
+    const result = applyContainerPattern(
+      { width: '1200px', maxWidth: '1200px', marginLeft: '0', marginRight: '12px' },
+      true
+    );
+    expect(result.marginLeft).toBe('auto');
+    expect(result.marginRight).toBe('auto');
+  });
+  test('preserves unrelated properties (padding, font-size)', () => {
+    const result = applyContainerPattern(
+      { width: '1200px', maxWidth: '1200px', padding: '20px', fontSize: '16px' },
+      true
+    );
+    expect(result.padding).toBe('20px');
+    expect(result.fontSize).toBe('16px');
+  });
+});
+describe('generateInteractiveCSS — container pattern integration', () => {
+  test('flat hover style with width === maxWidth in fluid mode emits container CSS', () => {
+    const fluidScales: ResponsiveScales = {
+      enabled: true,
+      mode: 'fluid',
+      baseReference: 16,
+      fluidRange: { min: 320, max: 1440 },
+      siteMargin: { min: 16, max: 32 },
+    };
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { width: '1200px', maxWidth: '1200px' } },
+    ];
+    const css = generateInteractiveCSS('c_card', styles, DEFAULT_BREAKPOINTS, undefined, fluidScales);
+    expect(css).toContain('width: calc(100% - var(--site-margin) * 2)');
+    expect(css).toContain('max-width: 1200px');
+    expect(css).toContain('margin-left: auto');
+    expect(css).toContain('margin-right: auto');
+  });
+  test('breakpoints mode emits raw width and maxWidth, no container pattern', () => {
+    const breakpointsScales: ResponsiveScales = {
+      enabled: true,
+      mode: 'breakpoints',
+      baseReference: 16,
+    };
+    const styles: InteractiveStyles = [
+      { prefix: '', postfix: ':hover', style: { width: '1200px', maxWidth: '1200px' } },
+    ];
+    const css = generateInteractiveCSS('c_card', styles, DEFAULT_BREAKPOINTS, undefined, breakpointsScales);
+    expect(css).not.toContain('calc(');
+    expect(css).toContain('width: 1200px');
+    expect(css).toContain('max-width: 1200px');
+  });
+});