npm - meno-core - Versions diffs - 1.0.46 → 1.0.48 - Mend

meno-core 1.0.46 → 1.0.48

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 (68) hide show

package/build-astro.ts +13 -77
package/dist/build-static.js +7 -7
package/dist/chunks/{chunk-FED5MME6.js → chunk-3FHJUHAS.js} +5 -4
package/dist/chunks/chunk-3FHJUHAS.js.map +7 -0
package/dist/chunks/{chunk-XSWR3QLI.js → chunk-B2RTLDXY.js} +130 -130
package/dist/chunks/chunk-B2RTLDXY.js.map +7 -0
package/dist/chunks/{chunk-ZTKHJQ2Z.js → chunk-BJRKEPMP.js} +2 -2
package/dist/chunks/{chunk-ORN7S4AP.js → chunk-D5E3OKSL.js} +5 -5
package/dist/chunks/{chunk-KITQJYZV.js → chunk-EK4KESLU.js} +33 -3
package/dist/chunks/chunk-EK4KESLU.js.map +7 -0
package/dist/chunks/{chunk-C6U5T5S5.js → chunk-NKUV77SR.js} +43 -10
package/dist/chunks/chunk-NKUV77SR.js.map +7 -0
package/dist/chunks/{chunk-ZWYDT3QJ.js → chunk-NP76N4HQ.js} +4 -4
package/dist/chunks/{chunk-ZWYDT3QJ.js.map → chunk-NP76N4HQ.js.map} +2 -2
package/dist/chunks/{chunk-IF3RATBY.js → chunk-RQSTH2BS.js} +2 -2
package/dist/chunks/{chunk-77ZB6353.js → chunk-TPQ7APVQ.js} +42 -86
package/dist/chunks/chunk-TPQ7APVQ.js.map +7 -0
package/dist/chunks/{configService-DYCUEURL.js → configService-IGJEC3MC.js} +3 -3
package/dist/entries/server-router.js +8 -8
package/dist/lib/client/index.js +16 -4
package/dist/lib/client/index.js.map +2 -2
package/dist/lib/server/index.js +1803 -383
package/dist/lib/server/index.js.map +4 -4
package/dist/lib/shared/index.js +8 -4
package/dist/lib/shared/index.js.map +1 -1
package/lib/client/core/ComponentBuilder.test.ts +38 -0
package/lib/client/core/ComponentBuilder.ts +25 -1
package/lib/server/astro/astroEmitHelpers.ts +5 -0
package/lib/server/astro/cmsPageEmitter.ts +15 -2
package/lib/server/astro/componentEmitter.ts +13 -5
package/lib/server/astro/nodeToAstro.ts +23 -9
package/lib/server/astro/pageEmitter.ts +15 -2
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/routes/api/variables.ts +4 -2
package/lib/server/ssr/htmlGenerator.test.ts +4 -4
package/lib/server/ssr/htmlGenerator.ts +7 -2
package/lib/server/ssr/imageMetadata.ts +15 -9
package/lib/server/ssr/ssrRenderer.test.ts +103 -1
package/lib/server/ssr/ssrRenderer.ts +41 -35
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/elementClassName.test.ts +15 -0
package/lib/shared/elementClassName.ts +7 -3
package/lib/shared/registry/nodeTypes/ListNodeType.ts +1 -1
package/lib/shared/styleNodeUtils.test.ts +47 -1
package/lib/shared/styleNodeUtils.ts +7 -7
package/lib/shared/types/index.ts +1 -0
package/lib/shared/types/variables.ts +37 -0
package/package.json +1 -1
package/dist/chunks/chunk-77ZB6353.js.map +0 -7
package/dist/chunks/chunk-C6U5T5S5.js.map +0 -7
package/dist/chunks/chunk-FED5MME6.js.map +0 -7
package/dist/chunks/chunk-KITQJYZV.js.map +0 -7
package/dist/chunks/chunk-XSWR3QLI.js.map +0 -7
/package/dist/chunks/{chunk-ZTKHJQ2Z.js.map → chunk-BJRKEPMP.js.map} +0 -0
/package/dist/chunks/{chunk-ORN7S4AP.js.map → chunk-D5E3OKSL.js.map} +0 -0
/package/dist/chunks/{chunk-IF3RATBY.js.map → chunk-RQSTH2BS.js.map} +0 -0
/package/dist/chunks/{configService-DYCUEURL.js.map → configService-IGJEC3MC.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/elementClassName.test.ts CHANGED Viewed

@@ -164,6 +164,21 @@ describe("generateElementClassName", () => {
       expect(className1).not.toBe(className2);
     });
+    test("should generate different hashes for sibling paths (only last index differs)", () => {
+      // Regression: a 5-char hash truncated from the high-order digits
+      // collapsed to one value when only the final path index changed,
+      // making every set of siblings share a class in the Webflow export.
+      const base = ["Layout", [0, 0, 1, 0, 0]] as const;
+      const siblings = [0, 1, 2, 3, 4].map((i) =>
+        generateElementClassName({
+          fileType: "component",
+          fileName: base[0],
+          path: [...base[1], i],
+        })
+      );
+      expect(new Set(siblings).size).toBe(siblings.length);
+    });
   });
   describe("Component-relative paths", () => {

package/lib/shared/elementClassName.ts CHANGED Viewed

@@ -33,13 +33,17 @@ export interface ElementClassContext {
  * Simple djb2 hash function that works in browser and server
  * Returns a short alphanumeric string
  */
-function shortHash(input: string): string {
+export function shortHash(input: string): string {
   let hash = 5381;
   for (let i = 0; i < input.length; i++) {
     hash = ((hash << 5) + hash) ^ input.charCodeAt(i);
   }
-  // Convert to base36 (alphanumeric) and take first 5 chars
-  return Math.abs(hash).toString(36).slice(0, 5);
+  // Take the LAST 5 base36 chars: the low-order digits change with every
+  // input byte, so sibling paths that share a long prefix and differ only
+  // in their final index still produce distinct hashes. Slicing from the
+  // start kept the high-order digits, which barely move when only the
+  // last char of the input changes — every set of siblings collided.
+  return Math.abs(hash).toString(36).slice(-5);
 }
 /**

package/lib/shared/registry/nodeTypes/ListNodeType.ts CHANGED Viewed

@@ -107,7 +107,7 @@ export const ListNodeType = createNodeType({
   },
   treeDisplay: {
-    icon: 'HTML_ELEMENT',
+    icon: 'ARRAY',
     getLabel: (node) => {
       const listNode = node as ListNode;
       const sourceType = listNode.sourceType || 'prop';

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

@@ -1,6 +1,6 @@
 import { describe, test, expect } from 'bun:test';
 import { applyStylesToNode, mergeNodeStyles, extractStylesFromNode } from './styleNodeUtils';
-import type { HtmlNode, ComponentInstanceNode } from './types';
+import type { HtmlNode, ComponentInstanceNode, LinkNode } from './types';
 import { NODE_TYPE } from './constants';
 describe('styleNodeUtils', () => {
@@ -37,6 +37,13 @@ describe('styleNodeUtils', () => {
       const result = applyStylesToNode(node as any, styles);
       expect(result.style).toEqual(styles);
     });
+    test('should apply styles to link node at top level', () => {
+      const node: LinkNode = { type: NODE_TYPE.LINK, href: '/foo', children: [] };
+      const styles = { backgroundColor: '#252525', color: '#ffffff' };
+      const result = applyStylesToNode(node, styles);
+      expect(result.style).toEqual(styles);
+    });
   });
   describe('mergeNodeStyles', () => {
@@ -87,6 +94,34 @@ describe('styleNodeUtils', () => {
       const result = mergeNodeStyles(node, instanceStyles);
       expect((result as ComponentInstanceNode).props?.style).toEqual(instanceStyles);
     });
+    test('should merge styles for link node at top level', () => {
+      const node: LinkNode = {
+        type: NODE_TYPE.LINK,
+        href: '/foo',
+        children: [],
+        style: { color: '#000000', backgroundColor: '#ffffff' }
+      };
+      const instanceStyles = { backgroundColor: '#252525', color: '#ffffff' };
+      const result = mergeNodeStyles(node, instanceStyles);
+      expect(result.style).toEqual({ backgroundColor: '#252525', color: '#ffffff' });
+    });
+    test('should deep-merge responsive styles for link node', () => {
+      const node: LinkNode = {
+        type: NODE_TYPE.LINK,
+        href: '/foo',
+        children: [],
+        style: { base: { color: '#000', padding: '8px' }, tablet: { fontSize: '14px' }, mobile: {} }
+      };
+      const instanceStyles = { base: { backgroundColor: '#252525', color: '#fff' }, tablet: {}, mobile: {} };
+      const result = mergeNodeStyles(node, instanceStyles);
+      expect(result.style).toEqual({
+        base: { color: '#fff', padding: '8px', backgroundColor: '#252525' },
+        tablet: { fontSize: '14px' },
+        mobile: {},
+      });
+    });
   });
   describe('extractStylesFromNode', () => {
@@ -128,5 +163,16 @@ describe('styleNodeUtils', () => {
       const styles = extractStylesFromNode(node as any);
       expect(styles).toEqual({ width: '100%' });
     });
+    test('should extract styles from link node', () => {
+      const node: LinkNode = {
+        type: NODE_TYPE.LINK,
+        href: '/foo',
+        children: [],
+        style: { backgroundColor: '#252525' }
+      };
+      const styles = extractStylesFromNode(node);
+      expect(styles).toEqual({ backgroundColor: '#252525' });
+    });
   });
 });

package/lib/shared/styleNodeUtils.ts CHANGED Viewed

@@ -4,7 +4,7 @@
  */
 import type { ComponentNode, HtmlNode, ComponentInstanceNode, StyleValue, ResponsiveStyleObject } from './types';
-import { isComponentNode, isHtmlNode, isEmbedNode, isListNode } from './nodeUtils';
+import { isComponentNode, isHtmlNode, isEmbedNode, isListNode, isLinkNode } from './nodeUtils';
 import { isResponsiveStyle } from './styleUtils';
 /**
@@ -26,8 +26,8 @@ export function applyStylesToNode(
     }
     node.props.style = { ...(node.props.style || {}), ...styles };
-  } else if (isHtmlNode(node) || isEmbedNode(node) || isListNode(node)) {
-    // HTML node, Embed node, and List node: put styles at top level
+  } else if (isHtmlNode(node) || isEmbedNode(node) || isListNode(node) || isLinkNode(node)) {
+    // HTML node, Embed node, List node, and Link node: put styles at top level
     node.style = styles as StyleValue;
   }
@@ -79,8 +79,8 @@ export function mergeNodeStyles(
 ): ComponentNode {
   if (!instanceStyles) return node;
-  if (isHtmlNode(node) || isEmbedNode(node) || isListNode(node)) {
-    // For HTML nodes, Embed nodes, and List nodes: merge instance styles with existing top-level styles
+  if (isHtmlNode(node) || isEmbedNode(node) || isListNode(node) || isLinkNode(node)) {
+    // For HTML nodes, Embed nodes, List nodes, and Link nodes: merge instance styles with existing top-level styles
     const existingStyle = node.style;
     if (existingStyle && typeof existingStyle === 'object') {
       node.style = deepMergeStyles(existingStyle, instanceStyles);
@@ -117,8 +117,8 @@ export function extractStylesFromNode(
     if (!style) return {};
     return style as Record<string, string | number>;
-  } else if (isHtmlNode(node) || isEmbedNode(node)) {
-    // HTML node and Embed node: styles are at top level
+  } else if (isHtmlNode(node) || isEmbedNode(node) || isLinkNode(node)) {
+    // HTML node, Embed node, and Link node: styles are at top level
     const style = node.style;
     if (!style) return {};

package/lib/shared/types/index.ts CHANGED Viewed

@@ -153,6 +153,7 @@ export {
   VARIABLE_GROUPS,
   VARIABLE_GROUP_VALUES,
   VARIABLE_TYPES,
+  VARIABLE_TYPE_VALUES,
   getGroupForProperty,
   getGroupAbbreviation,
   getDefaultScalingType,

package/lib/shared/types/variables.ts CHANGED Viewed

@@ -19,7 +19,13 @@ export type VariableGroup =
   | 'line-height' | 'letter-spacing'
   | 'margin' | 'padding' | 'gap'
   | 'size'
+  | 'position'
   | 'border-radius' | 'border-width'
+  | 'outline'
+  | 'shadow'
+  | 'filter'
+  | 'duration'
+  | 'aspect-ratio'
   | 'opacity' | 'z-index'
   | 'text-align'
   | 'other';
@@ -35,8 +41,14 @@ export const VARIABLE_GROUPS: { value: VariableGroup; label: string }[] = [
   { value: 'padding', label: 'Padding' },
   { value: 'gap', label: 'Gap' },
   { value: 'size', label: 'Size' },
+  { value: 'position', label: 'Position' },
   { value: 'border-radius', label: 'Border Radius' },
   { value: 'border-width', label: 'Border Width' },
+  { value: 'outline', label: 'Outline' },
+  { value: 'shadow', label: 'Shadow' },
+  { value: 'filter', label: 'Filter' },
+  { value: 'duration', label: 'Duration' },
+  { value: 'aspect-ratio', label: 'Aspect Ratio' },
   { value: 'opacity', label: 'Opacity' },
   { value: 'z-index', label: 'Z-Index' },
   { value: 'text-align', label: 'Text Align' },
@@ -56,6 +68,26 @@ const CSS_PROPERTY_TO_GROUP: Record<string, VariableGroup> = {
   'text-align': 'text-align',
   'opacity': 'opacity',
   'z-index': 'z-index',
+  'top': 'position',
+  'right': 'position',
+  'bottom': 'position',
+  'left': 'position',
+  'inset': 'position',
+  'inset-block': 'position',
+  'inset-inline': 'position',
+  'inset-block-start': 'position',
+  'inset-block-end': 'position',
+  'inset-inline-start': 'position',
+  'inset-inline-end': 'position',
+  'box-shadow': 'shadow',
+  'text-shadow': 'shadow',
+  'filter': 'filter',
+  'backdrop-filter': 'filter',
+  'aspect-ratio': 'aspect-ratio',
+  'transition-duration': 'duration',
+  'animation-duration': 'duration',
+  'transition-delay': 'duration',
+  'animation-delay': 'duration',
 };
 /** Prefix-based mappings for CSS properties */
@@ -81,6 +113,8 @@ const CSS_PROPERTY_PREFIX_GROUPS: { prefix: string; group: VariableGroup }[] = [
   { prefix: 'border-right-width', group: 'border-width' },
   { prefix: 'border-bottom-width', group: 'border-width' },
   { prefix: 'border-left-width', group: 'border-width' },
+  { prefix: 'outline-width', group: 'outline' },
+  { prefix: 'outline-offset', group: 'outline' },
 ];
 /**
@@ -142,6 +176,9 @@ export const VARIABLE_TYPES: { value: VariableType; label: string }[] = [
   { value: 'none', label: 'None' },
 ];
+/** All valid variable scaling type values */
+export const VARIABLE_TYPE_VALUES: VariableType[] = VARIABLE_TYPES.map(t => t.value);
 /**
  * Returns an abbreviation for a variable group by taking the first letter of each word.
  * e.g. 'letter-spacing' -> 'ls', 'font-size' -> 'fs', 'spacing' -> 's'

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"