meno-astro 0.1.4 → 0.1.6

package/dist/chunks/{chunk-6VWPGRPL.js → chunk-BYV2GH6J.js}

@@ -27,6 +27,7 @@ function resolveMappingsInFlat(style2, props) {
       if (resolved !== void 0) out[prop] = resolved;
       continue;
     }
+    if (typeof value === "string" && value.includes("{{")) continue;
     out[prop] = value;
   }
   return out;
@@ -77,4 +78,4 @@ export {
   computeClassName,
   style
 };
-//# sourceMappingURL=chunk-6VWPGRPL.js.map
+//# sourceMappingURL=chunk-BYV2GH6J.js.map

package/dist/chunks/{chunk-6VWPGRPL.js.map → chunk-BYV2GH6J.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../lib/runtime/style.ts"],
-  "sourcesContent": ["/**\n * meno-astro \u2014 `style()` runtime resolver + CSS collector (proof-of-concept).\n *\n * Emitted `.astro` markup styles every node with `class={style(styleObject[, meta])}`\n * (see `dialect/emit/emitNode.ts:105-124`). The `styleObject` is a Meno\n * `StyleObject` / `ResponsiveStyleObject` \u2014 `{ base, tablet, mobile }` where any value\n * may be a prop-binding `{ _mapping: true, prop, values }`. The optional `meta` carries\n * `interactive` (hover/etc. state rules), `label`, and `genClass`.\n *\n * This module is the runtime side of that contract:\n *   1. `style()` returns the element's class name (the `class={...}` value), and\n *   2. side-effects the generated CSS into a module-level collector that a future\n *      `BaseLayout`/integration will flush into a `<style>` tag.\n *\n * \u2500\u2500 Why a props argument (the \"option A\" design being proven here) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * A `_mapping` value resolves against the *host component's prop values*, but the\n * emitted `style(styleObject, meta)` call does NOT carry them. Option A threads a\n * `props` scope into the call \u2014 `style(styleObject, props, meta)` \u2014 and resolves each\n * `_mapping` to a concrete CSS value *before* generating CSS. This file implements and\n * unit-tests exactly that. (The emitter change that actually passes `props` at the call\n * site is the *next* step, gated on this PoC \u2014 it is intentionally NOT done here.)\n *\n * \u2500\u2500 Reuse, not reinvention \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * All CSS generation is meno-core's, the same code the JSON runtime's SSR uses:\n *   - `generateInteractiveCSS` \u2014 turns a list of selector rules (base + `:hover` + \u2026)\n *     into CSS, with full responsive `base`/`tablet`/`mobile` \u2192 `@media` handling and\n *     the `styleObjectToCSS` property serializer. We model the base style as one rule\n *     with an empty postfix (`.<class> { \u2026 }`) and append the interactive rules, so a\n *     single call covers base + responsive + interactive, all scoped to one class.\n *   - `DEFAULT_BREAKPOINTS` \u2014 the project's breakpoint media-query thresholds\n *     (tablet 1024px, mobile 540px).\n *   - `shortHash` \u2014 meno-core's deterministic djb2 hash, so identical styleObjects\n *     dedupe to the same class name.\n *   - `isStyleMapping` \u2014 the `_mapping` type guard; mapping *resolution* mirrors\n *     meno-core's `resolveExtractedMappings` (`mapping.values[String(propValue)]`).\n *\n * \u2500\u2500 Collector design + the per-render-isolation caveat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * The collector is a module-level `Map` keyed by class name (so repeated `style()`\n * calls for the same class are naturally de-duplicated within a render). `style()`\n * appends; `flushCollectedStyles()` concatenates; `resetStyleCollector()` clears.\n *\n * PRODUCTION HARDENING (out of scope for this PoC): SSR is concurrent, so a module-\n * level sink races across overlapping renders. The production form scopes the\n * collector to the async call tree with `AsyncLocalStorage` (node:async_hooks) \u2014 the\n * exact pattern already used for the locale context in `runtime/i18n.ts`'s\n * `runWithLocale`. A `BaseLayout` would `runWithStyleCollector(() => \u2026)` around the\n * render and flush the per-render sink into a `<style>`. The module-level + resettable\n * collector here is sufficient to *prove the resolver* under unit tests.\n */\n\n// Narrow `meno-core/shared/*` subpath imports (the same convention `runtime/i18n.ts`\n// uses) rather than the broad `meno-core` barrel \u2014 the barrel re-exports the whole\n// shared surface, dragging unrelated modules (and their latent type errors) into this\n// package's type-check graph. We only need the style pipeline.\nimport {\n  DEFAULT_BREAKPOINTS,\n  type BreakpointConfig,\n} from 'meno-core/shared';\nimport { generateInteractiveCSS } from 'meno-core/shared';\nimport { isStyleMapping } from 'meno-core/shared';\nimport { shortHash } from 'meno-core/shared';\n// The SAME forward mapper meno-core's JSON runtime (ComponentBuilder) uses \u2014 so the\n// emitted class names are byte-identical to Meno core. The utility CSS itself is\n// generated at BUILD time by the meno() integration (Astro renders <head> before\n// <body>, so a runtime collector would always be empty); style() only returns names.\nimport { responsiveStylesToClasses } from 'meno-core/shared';\nimport type {\n  StyleObject,\n  StyleValue,\n  ResponsiveStyleObject,\n  InteractiveStyles,\n  InteractiveStyleRule,\n} from 'meno-core/shared/types';\n\n// ---------------------------------------------------------------------------\n// `meta` \u2014 the second/third argument shape emitted alongside the style object.\n// Mirrors `emitClassAttr` in dialect/emit/emitNode.ts.\n// ---------------------------------------------------------------------------\n\n/** The `meta` payload carried by `class={style(styleObject, meta)}`. */\nexport interface StyleMeta {\n  /** Hover/focus/state rules (`.element:hover { \u2026 }`, etc.). */\n  interactive?: InteractiveStyles;\n  /** The node's editor label \u2014 folded into the (still content-derived) class name. */\n  label?: string;\n  /** The node's `generateElementClass` flag (carried for parity; not load-bearing here). */\n  genClass?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Module-level CSS collector. See the per-render-isolation caveat in the header.\n// Keyed by class name so duplicate `style()` calls within a render emit once.\n// ---------------------------------------------------------------------------\n\nconst collected = new Map<string, string>();\n\n/** Drain the collector, returning all accumulated CSS as a single string (insertion order). */\nexport function flushCollectedStyles(): string {\n  return Array.from(collected.values()).filter(Boolean).join('\\n');\n}\n\n/** Clear the collector. Call between renders (the PoC stand-in for per-render isolation). */\nexport function resetStyleCollector(): void {\n  collected.clear();\n}\n\n// ---------------------------------------------------------------------------\n// `_mapping` (prop-binding) resolution \u2014 the option-A proof.\n// ---------------------------------------------------------------------------\n\n/**\n * Resolve a single `_mapping` value against `props`, returning the concrete CSS value\n * or `undefined` when it cannot be resolved (no props, prop unset, or value not in the\n * mapping's table). Semantics mirror meno-core's `resolveExtractedMappings`:\n * `mapping.values[String(props[mapping.prop])]`.\n */\nfunction resolveMappingValue(\n  mapping: { prop: string; values: Record<string, string | number> },\n  props: Record<string, unknown> | undefined,\n): string | number | undefined {\n  if (!props) return undefined;\n  const propValue = props[mapping.prop];\n  if (propValue === undefined || propValue === null) return undefined;\n  const resolved = mapping.values[String(propValue)];\n  return resolved === undefined ? undefined : resolved;\n}\n\n/**\n * Return a copy of a flat StyleObject with every `_mapping` value replaced by its\n * prop-resolved concrete value. Unresolvable mappings are dropped (graceful\n * degradation \u2014 a missing prop must never throw, and an unresolved property simply\n * isn't emitted, falling back to the cascade/UA default). Plain values pass through.\n */\nfunction resolveMappingsInFlat(\n  style: StyleObject,\n  props: Record<string, unknown> | undefined,\n): StyleObject {\n  const out: StyleObject = {};\n  for (const [prop, value] of Object.entries(style)) {\n    if (isStyleMapping(value)) {\n      const resolved = resolveMappingValue(value, props);\n      if (resolved !== undefined) out[prop] = resolved;\n      // else: drop \u2014 unresolved mapping, no rule emitted.\n      continue;\n    }\n    out[prop] = value;\n  }\n  return out;\n}\n\n/** True when a StyleValue is the responsive `{ base/tablet/mobile }` shape. */\nfunction isResponsive(style: StyleValue): style is ResponsiveStyleObject {\n  return (\n    typeof style === 'object' &&\n    style !== null &&\n    ('base' in style || 'tablet' in style || 'mobile' in style)\n  );\n}\n\n/**\n * Resolve `_mapping` values across a whole StyleValue (flat or responsive), per\n * breakpoint, against `props`. The result is a plain StyleValue with no `_mapping`\n * objects remaining \u2014 ready for meno-core's CSS generator.\n */\nexport function resolveMappingsInStyle(\n  style: StyleValue,\n  props: Record<string, unknown> | undefined,\n): StyleValue {\n  if (isResponsive(style)) {\n    const out: ResponsiveStyleObject = {};\n    for (const [bp, bpStyle] of Object.entries(style)) {\n      if (!bpStyle) continue;\n      out[bp] = resolveMappingsInFlat(bpStyle, props);\n    }\n    return out;\n  }\n  return resolveMappingsInFlat(style as StyleObject, props);\n}\n\n// ---------------------------------------------------------------------------\n// Deterministic class name.\n// ---------------------------------------------------------------------------\n\n/** Lowercase + CSS-safe a label fragment for use in a class name. */\nfunction sanitizeLabel(label: string): string {\n  return label\n    .toLowerCase()\n    .replace(/[^a-z0-9_-]/g, '_')\n    .replace(/_+/g, '_')\n    .replace(/^_|_$/g, '');\n}\n\n/**\n * Compute a deterministic class name from the *resolved* style payload (base style +\n * interactive rules) plus the optional label. Identical inputs \u21D2 identical class, so\n * two `style()` calls with the same styleObject dedupe to one CSS rule. The hash uses\n * meno-core's `shortHash` (djb2). A label prefix is added for human-readable selectors\n * but the hash still keys dedup, so distinct styles never collide on label alone.\n */\nexport function computeClassName(\n  resolvedBase: StyleValue,\n  resolvedInteractive: InteractiveStyles,\n  label: string | undefined,\n): string {\n  const fingerprint = JSON.stringify({ b: resolvedBase, i: resolvedInteractive });\n  const hash = shortHash(fingerprint);\n  const prefix = label ? sanitizeLabel(label) : '';\n  return prefix ? `m_${prefix}_${hash}` : `m_${hash}`;\n}\n\n// ---------------------------------------------------------------------------\n// style() \u2014 the emitter-facing resolver.\n// ---------------------------------------------------------------------------\n\n/**\n * Resolve a Meno style payload to a CSS class name, side-effecting the generated CSS\n * into the module-level collector.\n *\n * @param styleObject  The node's style \u2014 flat `StyleObject` or responsive\n *                     `{ base, tablet, mobile }`. Values may be `_mapping` prop bindings.\n * @param props        The host component's resolved prop values, used to resolve\n *                     `_mapping` bindings (the option-A contract). Optional: a style\n *                     with a `_mapping` but no `props` degrades gracefully (the bound\n *                     property is omitted rather than throwing).\n * @param meta         Optional `{ interactive, label, genClass }` \u2014 interactive state\n *                     rules and label, as emitted.\n * @returns The element's CSS class name (the `class={style(...)}` value).\n */\nexport function style(\n  styleObject: StyleValue | null | undefined,\n  props?: Record<string, unknown>,\n  meta?: StyleMeta,\n): string {\n  const base = styleObject ?? {};\n\n  // 1. Resolve prop-bound `_mapping` values to concrete CSS values using the host\n  //    component's props (the same resolution meno-core does at render).\n  const resolvedBase = resolveMappingsInStyle(base, props);\n\n  // 2. Base styles \u2192 meno-core utility classes (byte-identical to the JSON runtime).\n  const classes = responsiveStylesToClasses(resolvedBase);\n\n  // 3. Interactive (`:hover`, \u2026) styles aren't expressible as utility classes (they're\n  //    states), so meno-core scopes them to an element-specific class. Resolve their\n  //    `_mapping`s the same way and emit a DETERMINISTIC class so the build-time CSS\n  //    scan generates the matching `.<class>:hover { \u2026 }` rule. No interactive \u21D2 no\n  //    extra class.\n  const resolvedInteractive: InteractiveStyles = (meta?.interactive ?? []).map(\n    (rule): InteractiveStyleRule => ({\n      ...rule,\n      style: resolveMappingsInStyle(rule.style, props),\n    }),\n  );\n  if (resolvedInteractive.length > 0) {\n    classes.push(computeClassName({}, resolvedInteractive, meta?.label));\n  }\n\n  return classes.join(' ');\n}\n"],
-  "mappings": ";;;;;;;AA8FA,IAAM,YAAY,oBAAI,IAAoB;AAGnC,SAAS,uBAA+B;AAC7C,SAAO,MAAM,KAAK,UAAU,OAAO,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AACjE;AAGO,SAAS,sBAA4B;AAC1C,YAAU,MAAM;AAClB;AAYA,SAAS,oBACP,SACA,OAC6B;AAC7B,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,YAAY,MAAM,QAAQ,IAAI;AACpC,MAAI,cAAc,UAAa,cAAc,KAAM,QAAO;AAC1D,QAAM,WAAW,QAAQ,OAAO,OAAO,SAAS,CAAC;AACjD,SAAO,aAAa,SAAY,SAAY;AAC9C;AAQA,SAAS,sBACPA,QACA,OACa;AACb,QAAM,MAAmB,CAAC;AAC1B,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQA,MAAK,GAAG;AACjD,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,WAAW,oBAAoB,OAAO,KAAK;AACjD,UAAI,aAAa,OAAW,KAAI,IAAI,IAAI;AAExC;AAAA,IACF;AACA,QAAI,IAAI,IAAI;AAAA,EACd;AACA,SAAO;AACT;AAGA,SAAS,aAAaA,QAAmD;AACvE,SACE,OAAOA,WAAU,YACjBA,WAAU,SACT,UAAUA,UAAS,YAAYA,UAAS,YAAYA;AAEzD;AAOO,SAAS,uBACdA,QACA,OACY;AACZ,MAAI,aAAaA,MAAK,GAAG;AACvB,UAAM,MAA6B,CAAC;AACpC,eAAW,CAAC,IAAI,OAAO,KAAK,OAAO,QAAQA,MAAK,GAAG;AACjD,UAAI,CAAC,QAAS;AACd,UAAI,EAAE,IAAI,sBAAsB,SAAS,KAAK;AAAA,IAChD;AACA,WAAO;AAAA,EACT;AACA,SAAO,sBAAsBA,QAAsB,KAAK;AAC1D;AAOA,SAAS,cAAc,OAAuB;AAC5C,SAAO,MACJ,YAAY,EACZ,QAAQ,gBAAgB,GAAG,EAC3B,QAAQ,OAAO,GAAG,EAClB,QAAQ,UAAU,EAAE;AACzB;AASO,SAAS,iBACd,cACA,qBACA,OACQ;AACR,QAAM,cAAc,KAAK,UAAU,EAAE,GAAG,cAAc,GAAG,oBAAoB,CAAC;AAC9E,QAAM,OAAO,UAAU,WAAW;AAClC,QAAM,SAAS,QAAQ,cAAc,KAAK,IAAI;AAC9C,SAAO,SAAS,KAAK,MAAM,IAAI,IAAI,KAAK,KAAK,IAAI;AACnD;AAoBO,SAAS,MACd,aACA,OACA,MACQ;AACR,QAAM,OAAO,eAAe,CAAC;AAI7B,QAAM,eAAe,uBAAuB,MAAM,KAAK;AAGvD,QAAM,UAAU,0BAA0B,YAAY;AAOtD,QAAM,uBAA0C,MAAM,eAAe,CAAC,GAAG;AAAA,IACvE,CAAC,UAAgC;AAAA,MAC/B,GAAG;AAAA,MACH,OAAO,uBAAuB,KAAK,OAAO,KAAK;AAAA,IACjD;AAAA,EACF;AACA,MAAI,oBAAoB,SAAS,GAAG;AAClC,YAAQ,KAAK,iBAAiB,CAAC,GAAG,qBAAqB,MAAM,KAAK,CAAC;AAAA,EACrE;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;",
+  "sourcesContent": ["/**\n * meno-astro \u2014 `style()` runtime resolver + CSS collector (proof-of-concept).\n *\n * Emitted `.astro` markup styles every node with `class={style(styleObject[, meta])}`\n * (see `dialect/emit/emitNode.ts:105-124`). The `styleObject` is a Meno\n * `StyleObject` / `ResponsiveStyleObject` \u2014 `{ base, tablet, mobile }` where any value\n * may be a prop-binding `{ _mapping: true, prop, values }`. The optional `meta` carries\n * `interactive` (hover/etc. state rules), `label`, and `genClass`.\n *\n * This module is the runtime side of that contract:\n *   1. `style()` returns the element's class name (the `class={...}` value), and\n *   2. side-effects the generated CSS into a module-level collector that a future\n *      `BaseLayout`/integration will flush into a `<style>` tag.\n *\n * \u2500\u2500 Why a props argument (the \"option A\" design being proven here) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * A `_mapping` value resolves against the *host component's prop values*, but the\n * emitted `style(styleObject, meta)` call does NOT carry them. Option A threads a\n * `props` scope into the call \u2014 `style(styleObject, props, meta)` \u2014 and resolves each\n * `_mapping` to a concrete CSS value *before* generating CSS. This file implements and\n * unit-tests exactly that. (The emitter change that actually passes `props` at the call\n * site is the *next* step, gated on this PoC \u2014 it is intentionally NOT done here.)\n *\n * \u2500\u2500 Reuse, not reinvention \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * All CSS generation is meno-core's, the same code the JSON runtime's SSR uses:\n *   - `generateInteractiveCSS` \u2014 turns a list of selector rules (base + `:hover` + \u2026)\n *     into CSS, with full responsive `base`/`tablet`/`mobile` \u2192 `@media` handling and\n *     the `styleObjectToCSS` property serializer. We model the base style as one rule\n *     with an empty postfix (`.<class> { \u2026 }`) and append the interactive rules, so a\n *     single call covers base + responsive + interactive, all scoped to one class.\n *   - `DEFAULT_BREAKPOINTS` \u2014 the project's breakpoint media-query thresholds\n *     (tablet 1024px, mobile 540px).\n *   - `shortHash` \u2014 meno-core's deterministic djb2 hash, so identical styleObjects\n *     dedupe to the same class name.\n *   - `isStyleMapping` \u2014 the `_mapping` type guard; mapping *resolution* mirrors\n *     meno-core's `resolveExtractedMappings` (`mapping.values[String(propValue)]`).\n *\n * \u2500\u2500 Collector design + the per-render-isolation caveat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * The collector is a module-level `Map` keyed by class name (so repeated `style()`\n * calls for the same class are naturally de-duplicated within a render). `style()`\n * appends; `flushCollectedStyles()` concatenates; `resetStyleCollector()` clears.\n *\n * PRODUCTION HARDENING (out of scope for this PoC): SSR is concurrent, so a module-\n * level sink races across overlapping renders. The production form scopes the\n * collector to the async call tree with `AsyncLocalStorage` (node:async_hooks) \u2014 the\n * exact pattern already used for the locale context in `runtime/i18n.ts`'s\n * `runWithLocale`. A `BaseLayout` would `runWithStyleCollector(() => \u2026)` around the\n * render and flush the per-render sink into a `<style>`. The module-level + resettable\n * collector here is sufficient to *prove the resolver* under unit tests.\n */\n\n// Narrow `meno-core/shared/*` subpath imports (the same convention `runtime/i18n.ts`\n// uses) rather than the broad `meno-core` barrel \u2014 the barrel re-exports the whole\n// shared surface, dragging unrelated modules (and their latent type errors) into this\n// package's type-check graph. We only need the style pipeline.\nimport {\n  DEFAULT_BREAKPOINTS,\n  type BreakpointConfig,\n} from 'meno-core/shared';\nimport { generateInteractiveCSS } from 'meno-core/shared';\nimport { isStyleMapping } from 'meno-core/shared';\nimport { shortHash } from 'meno-core/shared';\n// The SAME forward mapper meno-core's JSON runtime (ComponentBuilder) uses \u2014 so the\n// emitted class names are byte-identical to Meno core. The utility CSS itself is\n// generated at BUILD time by the meno() integration (Astro renders <head> before\n// <body>, so a runtime collector would always be empty); style() only returns names.\nimport { responsiveStylesToClasses } from 'meno-core/shared';\nimport type {\n  StyleObject,\n  StyleValue,\n  ResponsiveStyleObject,\n  InteractiveStyles,\n  InteractiveStyleRule,\n} from 'meno-core/shared/types';\n\n// ---------------------------------------------------------------------------\n// `meta` \u2014 the second/third argument shape emitted alongside the style object.\n// Mirrors `emitClassAttr` in dialect/emit/emitNode.ts.\n// ---------------------------------------------------------------------------\n\n/** The `meta` payload carried by `class={style(styleObject, meta)}`. */\nexport interface StyleMeta {\n  /** Hover/focus/state rules (`.element:hover { \u2026 }`, etc.). */\n  interactive?: InteractiveStyles;\n  /** The node's editor label \u2014 folded into the (still content-derived) class name. */\n  label?: string;\n  /** The node's `generateElementClass` flag (carried for parity; not load-bearing here). */\n  genClass?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Module-level CSS collector. See the per-render-isolation caveat in the header.\n// Keyed by class name so duplicate `style()` calls within a render emit once.\n// ---------------------------------------------------------------------------\n\nconst collected = new Map<string, string>();\n\n/** Drain the collector, returning all accumulated CSS as a single string (insertion order). */\nexport function flushCollectedStyles(): string {\n  return Array.from(collected.values()).filter(Boolean).join('\\n');\n}\n\n/** Clear the collector. Call between renders (the PoC stand-in for per-render isolation). */\nexport function resetStyleCollector(): void {\n  collected.clear();\n}\n\n// ---------------------------------------------------------------------------\n// `_mapping` (prop-binding) resolution \u2014 the option-A proof.\n// ---------------------------------------------------------------------------\n\n/**\n * Resolve a single `_mapping` value against `props`, returning the concrete CSS value\n * or `undefined` when it cannot be resolved (no props, prop unset, or value not in the\n * mapping's table). Semantics mirror meno-core's `resolveExtractedMappings`:\n * `mapping.values[String(props[mapping.prop])]`.\n */\nfunction resolveMappingValue(\n  mapping: { prop: string; values: Record<string, string | number> },\n  props: Record<string, unknown> | undefined,\n): string | number | undefined {\n  if (!props) return undefined;\n  const propValue = props[mapping.prop];\n  if (propValue === undefined || propValue === null) return undefined;\n  const resolved = mapping.values[String(propValue)];\n  return resolved === undefined ? undefined : resolved;\n}\n\n/**\n * Return a copy of a flat StyleObject with every `_mapping` value replaced by its\n * prop-resolved concrete value. Unresolvable mappings are dropped (graceful\n * degradation \u2014 a missing prop must never throw, and an unresolved property simply\n * isn't emitted, falling back to the cascade/UA default). Plain values pass through.\n */\nfunction resolveMappingsInFlat(\n  style: StyleObject,\n  props: Record<string, unknown> | undefined,\n): StyleObject {\n  const out: StyleObject = {};\n  for (const [prop, value] of Object.entries(style)) {\n    if (isStyleMapping(value)) {\n      const resolved = resolveMappingValue(value, props);\n      if (resolved !== undefined) out[prop] = resolved;\n      // else: drop \u2014 unresolved mapping, no rule emitted.\n      continue;\n    }\n    // A `{{template}}` value (e.g. `gap: \"{{gap}}px\"`) is per-instance and can't be a\n    // static utility class \u2014 the emitter renders it via an inline `style` attr instead\n    // (see emitInlineStyleAttr). Drop it here so no broken `.<hash> { gap: {{gap}}px }`\n    // class is generated. Parity with meno-core's static/dynamic style split.\n    if (typeof value === 'string' && value.includes('{{')) continue;\n    out[prop] = value;\n  }\n  return out;\n}\n\n/** True when a StyleValue is the responsive `{ base/tablet/mobile }` shape. */\nfunction isResponsive(style: StyleValue): style is ResponsiveStyleObject {\n  return (\n    typeof style === 'object' &&\n    style !== null &&\n    ('base' in style || 'tablet' in style || 'mobile' in style)\n  );\n}\n\n/**\n * Resolve `_mapping` values across a whole StyleValue (flat or responsive), per\n * breakpoint, against `props`. The result is a plain StyleValue with no `_mapping`\n * objects remaining \u2014 ready for meno-core's CSS generator.\n */\nexport function resolveMappingsInStyle(\n  style: StyleValue,\n  props: Record<string, unknown> | undefined,\n): StyleValue {\n  if (isResponsive(style)) {\n    const out: ResponsiveStyleObject = {};\n    for (const [bp, bpStyle] of Object.entries(style)) {\n      if (!bpStyle) continue;\n      out[bp] = resolveMappingsInFlat(bpStyle, props);\n    }\n    return out;\n  }\n  return resolveMappingsInFlat(style as StyleObject, props);\n}\n\n// ---------------------------------------------------------------------------\n// Deterministic class name.\n// ---------------------------------------------------------------------------\n\n/** Lowercase + CSS-safe a label fragment for use in a class name. */\nfunction sanitizeLabel(label: string): string {\n  return label\n    .toLowerCase()\n    .replace(/[^a-z0-9_-]/g, '_')\n    .replace(/_+/g, '_')\n    .replace(/^_|_$/g, '');\n}\n\n/**\n * Compute a deterministic class name from the *resolved* style payload (base style +\n * interactive rules) plus the optional label. Identical inputs \u21D2 identical class, so\n * two `style()` calls with the same styleObject dedupe to one CSS rule. The hash uses\n * meno-core's `shortHash` (djb2). A label prefix is added for human-readable selectors\n * but the hash still keys dedup, so distinct styles never collide on label alone.\n */\nexport function computeClassName(\n  resolvedBase: StyleValue,\n  resolvedInteractive: InteractiveStyles,\n  label: string | undefined,\n): string {\n  const fingerprint = JSON.stringify({ b: resolvedBase, i: resolvedInteractive });\n  const hash = shortHash(fingerprint);\n  const prefix = label ? sanitizeLabel(label) : '';\n  return prefix ? `m_${prefix}_${hash}` : `m_${hash}`;\n}\n\n// ---------------------------------------------------------------------------\n// style() \u2014 the emitter-facing resolver.\n// ---------------------------------------------------------------------------\n\n/**\n * Resolve a Meno style payload to a CSS class name, side-effecting the generated CSS\n * into the module-level collector.\n *\n * @param styleObject  The node's style \u2014 flat `StyleObject` or responsive\n *                     `{ base, tablet, mobile }`. Values may be `_mapping` prop bindings.\n * @param props        The host component's resolved prop values, used to resolve\n *                     `_mapping` bindings (the option-A contract). Optional: a style\n *                     with a `_mapping` but no `props` degrades gracefully (the bound\n *                     property is omitted rather than throwing).\n * @param meta         Optional `{ interactive, label, genClass }` \u2014 interactive state\n *                     rules and label, as emitted.\n * @returns The element's CSS class name (the `class={style(...)}` value).\n */\nexport function style(\n  styleObject: StyleValue | null | undefined,\n  props?: Record<string, unknown>,\n  meta?: StyleMeta,\n): string {\n  const base = styleObject ?? {};\n\n  // 1. Resolve prop-bound `_mapping` values to concrete CSS values using the host\n  //    component's props (the same resolution meno-core does at render).\n  const resolvedBase = resolveMappingsInStyle(base, props);\n\n  // 2. Base styles \u2192 meno-core utility classes (byte-identical to the JSON runtime).\n  const classes = responsiveStylesToClasses(resolvedBase);\n\n  // 3. Interactive (`:hover`, \u2026) styles aren't expressible as utility classes (they're\n  //    states), so meno-core scopes them to an element-specific class. Resolve their\n  //    `_mapping`s the same way and emit a DETERMINISTIC class so the build-time CSS\n  //    scan generates the matching `.<class>:hover { \u2026 }` rule. No interactive \u21D2 no\n  //    extra class.\n  const resolvedInteractive: InteractiveStyles = (meta?.interactive ?? []).map(\n    (rule): InteractiveStyleRule => ({\n      ...rule,\n      style: resolveMappingsInStyle(rule.style, props),\n    }),\n  );\n  if (resolvedInteractive.length > 0) {\n    classes.push(computeClassName({}, resolvedInteractive, meta?.label));\n  }\n\n  return classes.join(' ');\n}\n"],
+  "mappings": ";;;;;;;AA8FA,IAAM,YAAY,oBAAI,IAAoB;AAGnC,SAAS,uBAA+B;AAC7C,SAAO,MAAM,KAAK,UAAU,OAAO,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AACjE;AAGO,SAAS,sBAA4B;AAC1C,YAAU,MAAM;AAClB;AAYA,SAAS,oBACP,SACA,OAC6B;AAC7B,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,YAAY,MAAM,QAAQ,IAAI;AACpC,MAAI,cAAc,UAAa,cAAc,KAAM,QAAO;AAC1D,QAAM,WAAW,QAAQ,OAAO,OAAO,SAAS,CAAC;AACjD,SAAO,aAAa,SAAY,SAAY;AAC9C;AAQA,SAAS,sBACPA,QACA,OACa;AACb,QAAM,MAAmB,CAAC;AAC1B,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQA,MAAK,GAAG;AACjD,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,WAAW,oBAAoB,OAAO,KAAK;AACjD,UAAI,aAAa,OAAW,KAAI,IAAI,IAAI;AAExC;AAAA,IACF;AAKA,QAAI,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,EAAG;AACvD,QAAI,IAAI,IAAI;AAAA,EACd;AACA,SAAO;AACT;AAGA,SAAS,aAAaA,QAAmD;AACvE,SACE,OAAOA,WAAU,YACjBA,WAAU,SACT,UAAUA,UAAS,YAAYA,UAAS,YAAYA;AAEzD;AAOO,SAAS,uBACdA,QACA,OACY;AACZ,MAAI,aAAaA,MAAK,GAAG;AACvB,UAAM,MAA6B,CAAC;AACpC,eAAW,CAAC,IAAI,OAAO,KAAK,OAAO,QAAQA,MAAK,GAAG;AACjD,UAAI,CAAC,QAAS;AACd,UAAI,EAAE,IAAI,sBAAsB,SAAS,KAAK;AAAA,IAChD;AACA,WAAO;AAAA,EACT;AACA,SAAO,sBAAsBA,QAAsB,KAAK;AAC1D;AAOA,SAAS,cAAc,OAAuB;AAC5C,SAAO,MACJ,YAAY,EACZ,QAAQ,gBAAgB,GAAG,EAC3B,QAAQ,OAAO,GAAG,EAClB,QAAQ,UAAU,EAAE;AACzB;AASO,SAAS,iBACd,cACA,qBACA,OACQ;AACR,QAAM,cAAc,KAAK,UAAU,EAAE,GAAG,cAAc,GAAG,oBAAoB,CAAC;AAC9E,QAAM,OAAO,UAAU,WAAW;AAClC,QAAM,SAAS,QAAQ,cAAc,KAAK,IAAI;AAC9C,SAAO,SAAS,KAAK,MAAM,IAAI,IAAI,KAAK,KAAK,IAAI;AACnD;AAoBO,SAAS,MACd,aACA,OACA,MACQ;AACR,QAAM,OAAO,eAAe,CAAC;AAI7B,QAAM,eAAe,uBAAuB,MAAM,KAAK;AAGvD,QAAM,UAAU,0BAA0B,YAAY;AAOtD,QAAM,uBAA0C,MAAM,eAAe,CAAC,GAAG;AAAA,IACvE,CAAC,UAAgC;AAAA,MAC/B,GAAG;AAAA,MACH,OAAO,uBAAuB,KAAK,OAAO,KAAK;AAAA,IACjD;AAAA,EACF;AACA,MAAI,oBAAoB,SAAS,GAAG;AAClC,YAAQ,KAAK,iBAAiB,CAAC,GAAG,qBAAqB,MAAM,KAAK,CAAC;AAAA,EACrE;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;",
   "names": ["style"]
 }

package/dist/chunks/{chunk-ACHLFXXY.js → chunk-HNGBRPTL.js}

@@ -136,6 +136,25 @@ function templateToExpr(s) {
   out += escapeBacktick(s.slice(last));
   return "`" + out + "`";
 }
+function rewriteItemRefs(str, itemVar) {
+  return str.replace(TEMPLATE_RE, (_m, expr) => {
+    const rewritten = String(expr).replace(/\bitemIndex\b/g, `${itemVar}Index`).replace(/\bitemFirst\b/g, `${itemVar}First`).replace(/\bitemLast\b/g, `${itemVar}Last`).replace(/\bitem\b/g, itemVar);
+    return `{{${rewritten}}}`;
+  });
+}
+function rewriteItemRefsInTree(node, itemVar) {
+  if (typeof node === "string") return rewriteItemRefs(node, itemVar);
+  if (Array.isArray(node)) return node.map((n) => rewriteItemRefsInTree(n, itemVar));
+  if (node && typeof node === "object") {
+    const obj = node;
+    const out = {};
+    for (const [k, v] of Object.entries(obj)) {
+      out[k] = k === "children" && obj.type === "list" ? v : rewriteItemRefsInTree(v, itemVar);
+    }
+    return out;
+  }
+  return node;
+}
 var NON_BINDING_ROOTS = /* @__PURE__ */ new Set([
   "Astro",
   "Math",
@@ -199,8 +218,31 @@ function emitAttr(name, value, ctx) {
     return `${name}={${value}}`;
   }
   if (value === null || value === void 0) return `${name}={null}`;
+  if (deepHasTemplate(value)) return `${name}={${serializeExprLiteral(value)}}`;
   return `${name}={${serializeLiteral(value, { indent: INDENT, width: ctx.width })}}`;
 }
+function deepHasTemplate(value) {
+  if (typeof value === "string") return hasTemplate(value);
+  if (Array.isArray(value)) return value.some(deepHasTemplate);
+  if (value && typeof value === "object") return Object.values(value).some(deepHasTemplate);
+  return false;
+}
+function isBareIdent(key) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key);
+}
+function serializeExprLiteral(value) {
+  if (typeof value === "string") return hasTemplate(value) ? templateToExpr(value) : JSON.stringify(value);
+  if (value === null || value === void 0) return "null";
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (Array.isArray(value)) return `[${value.map(serializeExprLiteral).join(", ")}]`;
+  if (typeof value === "object") {
+    const entries = Object.entries(value).map(
+      ([k, v]) => `${isBareIdent(k) ? k : JSON.stringify(k)}: ${serializeExprLiteral(v)}`
+    );
+    return entries.length ? `{ ${entries.join(", ")} }` : "{}";
+  }
+  return "null";
+}
 function emitClassAttr(node, ctx, extraMeta) {
   const meta = { ...extraMeta };
   if (node.interactiveStyles !== void 0) meta.interactive = node.interactiveStyles;
@@ -216,6 +258,30 @@ function emitClassAttr(node, ctx, extraMeta) {
   const metaLit = serializeLiteral(meta, { indent: INDENT, width: ctx.width });
   return `class={style(${styleLit}, ${propsArg ?? "undefined"}, ${metaLit})}`;
 }
+function cssPropName(key) {
+  return key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+}
+function templatedStyleProps(style) {
+  if (!style || typeof style !== "object") return [];
+  const s = style;
+  const isResponsive = "base" in s || "tablet" in s || "mobile" in s;
+  const flat = isResponsive ? s.base : s;
+  if (!flat || typeof flat !== "object") return [];
+  const out = [];
+  for (const [k, v] of Object.entries(flat)) {
+    if (typeof v === "string" && v.includes("{{")) out.push([cssPropName(k), v]);
+  }
+  return out;
+}
+function emitInlineStyleAttr(node) {
+  const props = templatedStyleProps(node.style);
+  if (props.length === 0) return null;
+  const decls = props.map(([cssProp, val]) => {
+    const resolved = val.replace(TEMPLATE_RE, (_m, e) => "${" + String(e).trim() + "}");
+    return `${cssProp}: ${resolved}`;
+  });
+  return `style={\`${decls.join("; ")}\`}`;
+}
 function hasStyleContent(style) {
   if (!style || typeof style !== "object") return false;
   for (const v of Object.values(style)) {
@@ -300,7 +366,7 @@ function renderHtml(node, ctx) {
     ctx.frontmatterConsts.push(`const ${varName} = ${tagToTemplateLiteral(tag)};`);
     tag = varName;
   }
-  const attrs = [emitClassAttr(node, ctx), ...emitAttributes(node, ctx)].filter(Boolean);
+  const attrs = [emitClassAttr(node, ctx), emitInlineStyleAttr(node), ...emitAttributes(node, ctx)].filter(Boolean);
   const isVoid = VOID_ELEMENTS.has(String(node.tag).toLowerCase());
   const childBlocks = isVoid ? [] : emitChildrenList(node.children, ctx);
   return { kind: "element", markup: composeElement(tag, attrs, childBlocks, isVoid) };
@@ -320,6 +386,8 @@ function renderComponentInstance(node, ctx) {
   }
   const cls = emitClassAttr(node, ctx, hasStyleContent(node.style) ? { instance: true } : void 0);
   if (cls) attrs.push(cls);
+  const inlineStyle = emitInlineStyleAttr(node);
+  if (inlineStyle) attrs.push(inlineStyle);
   const childBlocks = emitChildrenList(node.children, ctx);
   return { kind: "element", markup: composeElement(tag, attrs, childBlocks) };
 }
@@ -334,6 +402,8 @@ function renderLink(node, ctx) {
   const attrs = [emitHref(node.href, ctx)];
   const cls = emitClassAttr(node, ctx);
   if (cls) attrs.push(cls);
+  const inlineStyle = emitInlineStyleAttr(node);
+  if (inlineStyle) attrs.push(inlineStyle);
   attrs.push(...emitAttributes(node, ctx));
   const childBlocks = emitChildrenList(node.children, ctx);
   return { kind: "element", markup: composeElement("Link", attrs.filter(Boolean), childBlocks) };
@@ -371,6 +441,8 @@ function renderEmbed(node, ctx) {
   }
   const cls = emitClassAttr(node, ctx);
   if (cls) attrs.push(cls);
+  const inlineStyle = emitInlineStyleAttr(node);
+  if (inlineStyle) attrs.push(inlineStyle);
   attrs.push(...emitAttributes(node, ctx));
   return { kind: "element", markup: composeElement("Embed", attrs, [], true) };
 }
@@ -406,8 +478,9 @@ function renderList(node, ctx) {
   const sourceType = node.sourceType ?? "prop";
   const itemVar = node.itemAs ?? (sourceType === "collection" ? singularize(node.source) : "item");
   const indexVar = `${itemVar}Index`;
+  const itemChildren = itemVar === "item" ? node.children : rewriteItemRefsInTree(node.children, itemVar);
   ctx.loopVars.push(itemVar);
-  const childBlocks = emitChildrenList(node.children, ctx);
+  const childBlocks = emitChildrenList(itemChildren, ctx);
   ctx.loopVars.pop();
   const childRenderedAt2 = childBlocks.map((c) => shift(c, INDENT)).join("\n");
   if (sourceType === "collection") {
@@ -477,11 +550,11 @@ function renderNode(node, ctx) {
     default:
       rendered = { kind: "element", markup: `{/* meno:unknown ${JSON.stringify(node.type)} */}` };
   }
-  return applyIf(node, rendered);
+  return applyIf(node, rendered, ctx);
 }
-function applyIf(node, rendered) {
+function applyIf(node, rendered, ctx) {
   if (node.if === void 0 || node.if === true) return rendered;
-  const cond = ifConditionExpr(node.if);
+  const cond = ifConditionExpr(node.if, ctx);
   if (rendered.kind === "element") {
     return { kind: "expr", expr: `${cond} && (
 ${shift(rendered.markup, INDENT)}
@@ -489,11 +562,13 @@ ${shift(rendered.markup, INDENT)}
   }
   return { kind: "expr", expr: `${cond} && (${rendered.expr})` };
 }
-function ifConditionExpr(cond) {
+function ifConditionExpr(cond, ctx) {
   if (cond === false) return "false";
   if (cond === true) return "true";
   if (typeof cond === "string") return hasTemplate(cond) ? templateToExpr(cond) : cond;
-  return `when(${serializeLiteral(cond)})`;
+  needRuntime(ctx, "when");
+  const condLit = serializeLiteral(cond);
+  return ctx.propsVar ? `when(${condLit}, ${ctx.propsVar})` : `when(${condLit})`;
 }
 function placeChild(rendered, indent) {
   if (rendered.kind === "element") return shift(rendered.markup, indent);
@@ -595,7 +670,7 @@ function emitPage(page, opts) {
     fm.push(buildGetStaticPaths(page.meta.cms));
     fm.push("");
   }
-  fm.push(`export const meta = ${serializeLiteral(page.meta ?? {}, { indent: 0 })};`);
+  fm.push(`const meta = ${serializeLiteral(page.meta ?? {}, { indent: 0 })};`);
   if (ctx.frontmatterConsts.length) {
     fm.push("");
     fm.push(...ctx.frontmatterConsts);
@@ -684,6 +759,120 @@ ${body}
 ${styleBlock}${scriptBlock}`.replace(/\n+$/, "\n");
 }
 
+// lib/dialect/parse/scan.ts
+var CLOSERS = { "{": "}", "(": ")", "[": "]" };
+function scanString(src, i) {
+  const q = src[i];
+  let j = i + 1;
+  while (j < src.length) {
+    if (src[j] === "\\") {
+      j += 2;
+      continue;
+    }
+    if (src[j] === q) return j + 1;
+    j++;
+  }
+  throw new Error(`scanString: unterminated string from ${i}`);
+}
+function scanTemplate(src, i) {
+  let j = i + 1;
+  while (j < src.length) {
+    if (src[j] === "\\") {
+      j += 2;
+      continue;
+    }
+    if (src[j] === "`") return j + 1;
+    if (src[j] === "$" && src[j + 1] === "{") {
+      j = scanBalanced(src, j + 1);
+      continue;
+    }
+    j++;
+  }
+  throw new Error(`scanTemplate: unterminated template from ${i}`);
+}
+function scanBalanced(src, i) {
+  if (!CLOSERS[src[i]]) throw new Error(`scanBalanced: no open delimiter at ${i} ("${src[i]}")`);
+  let depth = 0;
+  let j = i;
+  while (j < src.length) {
+    const c = src[j];
+    if (c === '"' || c === "'") {
+      j = scanString(src, j);
+      continue;
+    }
+    if (c === "`") {
+      j = scanTemplate(src, j);
+      continue;
+    }
+    if (c === "{" || c === "(" || c === "[") {
+      depth++;
+      j++;
+      continue;
+    }
+    if (c === "}" || c === ")" || c === "]") {
+      depth--;
+      j++;
+      if (depth === 0) return j;
+      continue;
+    }
+    j++;
+  }
+  throw new Error(`scanBalanced: unbalanced from ${i}`);
+}
+function findTrailingGroup(expr, openChar = "(") {
+  let j = 0;
+  while (j < expr.length) {
+    const c = expr[j];
+    if (c === '"' || c === "'") {
+      j = scanString(expr, j);
+      continue;
+    }
+    if (c === "`") {
+      j = scanTemplate(expr, j);
+      continue;
+    }
+    if (c === "{" || c === "(" || c === "[") {
+      const end = scanBalanced(expr, j);
+      if (c === openChar && end === expr.length) {
+        return { open: j, inner: expr.slice(j + 1, end - 1) };
+      }
+      j = end;
+      continue;
+    }
+    j++;
+  }
+  return null;
+}
+function splitTopLevel(src, sep) {
+  const parts = [];
+  let start = 0;
+  let j = 0;
+  while (j < src.length) {
+    const c = src[j];
+    if (c === '"' || c === "'") {
+      j = scanString(src, j);
+      continue;
+    }
+    if (c === "`") {
+      j = scanTemplate(src, j);
+      continue;
+    }
+    if (c === "{" || c === "(" || c === "[") {
+      j = scanBalanced(src, j);
+      continue;
+    }
+    if (c === sep) {
+      parts.push(src.slice(start, j));
+      start = j + 1;
+      j++;
+      continue;
+    }
+    j++;
+  }
+  parts.push(src.slice(start));
+  return parts.map((s) => s.trim());
+}
+
 // lib/dialect/parse/parseLiteral.ts
 var WS = /* @__PURE__ */ new Set([" ", "	", "\r", "\n"]);
 var IDENT_START = /[A-Za-z_$]/;
@@ -766,137 +955,98 @@ function parseArray(src, i) {
     fail(src, j, 'expected "," or "]"');
   }
 }
-function parseValueAt(src, i) {
-  i = skipWs(src, i);
-  const c = src[i];
-  if (c === "{") return parseObject(src, i);
-  if (c === "[") return parseArray(src, i);
-  if (c === '"') return parseString(src, i);
-  if (src.startsWith("true", i)) return { value: true, end: i + 4 };
-  if (src.startsWith("false", i)) return { value: false, end: i + 5 };
-  if (src.startsWith("null", i)) return { value: null, end: i + 4 };
-  if (c === "-" || c === "+" || c >= "0" && c <= "9") return parseNumber(src, i);
-  return fail(src, i, `unexpected character "${c ?? "<eof>"}"`);
-}
-function parseLiteral(src) {
-  const { value, end } = parseValueAt(src, 0);
-  const rest = skipWs(src, end);
-  if (rest !== src.length) fail(src, rest, "trailing content after literal");
-  return value;
-}
-
-// lib/dialect/parse/scan.ts
-var CLOSERS = { "{": "}", "(": ")", "[": "]" };
-function scanString(src, i) {
-  const q = src[i];
-  let j = i + 1;
-  while (j < src.length) {
-    if (src[j] === "\\") {
-      j += 2;
+function reverseBacktickBody(content) {
+  let out = "";
+  let i = 0;
+  while (i < content.length) {
+    const c = content[i];
+    if (c === "\\") {
+      const n = content[i + 1];
+      out += n === "\\" ? "\\" : n === "`" ? "`" : n === "$" ? "$" : n;
+      i += 2;
       continue;
     }
-    if (src[j] === q) return j + 1;
-    j++;
+    if (c === "$" && content[i + 1] === "{") {
+      const end = scanBalanced(content, i + 1);
+      out += "{{" + content.slice(i + 2, end - 1).trim() + "}}";
+      i = end;
+      continue;
+    }
+    out += c;
+    i++;
   }
-  throw new Error(`scanString: unterminated string from ${i}`);
+  return out;
 }
-function scanTemplate(src, i) {
+function parseBacktick(src, i) {
   let j = i + 1;
   while (j < src.length) {
-    if (src[j] === "\\") {
+    const c = src[j];
+    if (c === "\\") {
       j += 2;
       continue;
     }
-    if (src[j] === "`") return j + 1;
-    if (src[j] === "$" && src[j + 1] === "{") {
+    if (c === "`") {
+      j++;
+      break;
+    }
+    if (c === "$" && src[j + 1] === "{") {
       j = scanBalanced(src, j + 1);
       continue;
     }
     j++;
   }
-  throw new Error(`scanTemplate: unterminated template from ${i}`);
+  return { value: reverseBacktickBody(src.slice(i + 1, j - 1)), end: j };
 }
-function scanBalanced(src, i) {
-  if (!CLOSERS[src[i]]) throw new Error(`scanBalanced: no open delimiter at ${i} ("${src[i]}")`);
-  let depth = 0;
+function parseExprToken(src, i) {
   let j = i;
+  let depth = 0;
   while (j < src.length) {
     const c = src[j];
-    if (c === '"' || c === "'") {
-      j = scanString(src, j);
-      continue;
-    }
-    if (c === "`") {
-      j = scanTemplate(src, j);
+    if (c === '"' || c === "'" || c === "`") {
+      const q = c;
+      j++;
+      while (j < src.length && src[j] !== q) {
+        if (src[j] === "\\") j++;
+        j++;
+      }
+      j++;
       continue;
     }
-    if (c === "{" || c === "(" || c === "[") {
+    if (c === "(" || c === "[" || c === "{") {
       depth++;
       j++;
       continue;
     }
-    if (c === "}" || c === ")" || c === "]") {
+    if (c === ")" || c === "]" || c === "}") {
+      if (depth === 0) break;
       depth--;
       j++;
-      if (depth === 0) return j;
       continue;
     }
+    if (depth === 0 && c === ",") break;
     j++;
   }
-  throw new Error(`scanBalanced: unbalanced from ${i}`);
+  return { value: `{{${src.slice(i, j).trim()}}}`, end: j };
 }
-function findTrailingGroup(expr, openChar = "(") {
-  let j = 0;
-  while (j < expr.length) {
-    const c = expr[j];
-    if (c === '"' || c === "'") {
-      j = scanString(expr, j);
-      continue;
-    }
-    if (c === "`") {
-      j = scanTemplate(expr, j);
-      continue;
-    }
-    if (c === "{" || c === "(" || c === "[") {
-      const end = scanBalanced(expr, j);
-      if (c === openChar && end === expr.length) {
-        return { open: j, inner: expr.slice(j + 1, end - 1) };
-      }
-      j = end;
-      continue;
-    }
-    j++;
-  }
-  return null;
+function parseValueAt(src, i) {
+  i = skipWs(src, i);
+  const c = src[i];
+  if (c === "{") return parseObject(src, i);
+  if (c === "[") return parseArray(src, i);
+  if (c === '"') return parseString(src, i);
+  if (c === "`") return parseBacktick(src, i);
+  if (src.startsWith("true", i) && !IDENT_CHAR.test(src[i + 4] ?? "")) return { value: true, end: i + 4 };
+  if (src.startsWith("false", i) && !IDENT_CHAR.test(src[i + 5] ?? "")) return { value: false, end: i + 5 };
+  if (src.startsWith("null", i) && !IDENT_CHAR.test(src[i + 4] ?? "")) return { value: null, end: i + 4 };
+  if (c === "-" || c === "+" || c >= "0" && c <= "9") return parseNumber(src, i);
+  if (c !== void 0 && IDENT_START.test(c)) return parseExprToken(src, i);
+  return fail(src, i, `unexpected character "${c ?? "<eof>"}"`);
 }
-function splitTopLevel(src, sep) {
-  const parts = [];
-  let start = 0;
-  let j = 0;
-  while (j < src.length) {
-    const c = src[j];
-    if (c === '"' || c === "'") {
-      j = scanString(src, j);
-      continue;
-    }
-    if (c === "`") {
-      j = scanTemplate(src, j);
-      continue;
-    }
-    if (c === "{" || c === "(" || c === "[") {
-      j = scanBalanced(src, j);
-      continue;
-    }
-    if (c === sep) {
-      parts.push(src.slice(start, j));
-      start = j + 1;
-      j++;
-      continue;
-    }
-    j++;
-  }
-  parts.push(src.slice(start));
-  return parts.map((s) => s.trim());
+function parseLiteral(src) {
+  const { value, end } = parseValueAt(src, 0);
+  const rest = skipWs(src, end);
+  if (rest !== src.length) fail(src, rest, "trailing content after literal");
+  return value;
 }
 
 // lib/dialect/parse/callArgs.ts
@@ -962,7 +1112,7 @@ function reverseCondition(cond) {
   const c = cond.trim();
   if (c === "false") return false;
   if (c === "true") return true;
-  if (c.startsWith("when(")) return parseLiteral(callArgsOf(c));
+  if (c.startsWith("when(")) return parseLiteral(splitTopLevel(callArgsOf(c), ",")[0]);
   return `{{${c}}}`;
 }
 
@@ -1009,7 +1159,7 @@ function parseFrontmatter(code) {
   }
   const propsInterface = literalAfter(code, "resolveProps(Astro, ");
   const componentMeta = literalAfter(code, "const __meno = ") ?? {};
-  const meta = literalAfter(code, "export const meta = ");
+  const meta = literalAfter(code, "const meta = ");
   const kind = code.includes("resolveProps(") ? "component" : "page";
   return { kind, ctx, meta, propsInterface, componentMeta };
 }
@@ -1215,7 +1365,7 @@ function elementToNode(tag, attrs, children, ctx) {
   if (ctx.tagConsts.has(tag)) {
     const node2 = { type: "node", tag: ctx.tagConsts.get(tag) };
     applyClass(node2, attrs);
-    const attributes2 = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["class"]));
+    const attributes2 = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["class", "style"]));
     if (Object.keys(attributes2).length) node2.attributes = attributes2;
     if (children.length) node2.children = children;
     return node2;
@@ -1230,7 +1380,7 @@ function elementToNode(tag, attrs, children, ctx) {
     const href = attrs.find((a) => a.name === "href");
     if (href) node2.href = attrValue(href, ctx);
     applyClass(node2, attrs);
-    const rest = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["href", "class"]));
+    const rest = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["href", "class", "style"]));
     if (Object.keys(rest).length) node2.attributes = rest;
     if (children.length) node2.children = children;
     return node2;
@@ -1240,7 +1390,7 @@ function elementToNode(tag, attrs, children, ctx) {
     const html = attrs.find((a) => a.name === "html");
     if (html) node2.html = attrValue(html, ctx);
     applyClass(node2, attrs);
-    const rest = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["html", "class"]));
+    const rest = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["html", "class", "style"]));
     if (Object.keys(rest).length) node2.attributes = rest;
     return node2;
   }
@@ -1264,14 +1414,14 @@ function elementToNode(tag, attrs, children, ctx) {
   if (isComponent) {
     const node2 = { type: "component", component: tag };
     applyClass(node2, attrs);
-    const props = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["class"]));
+    const props = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["class", "style"]));
     if (Object.keys(props).length) node2.props = props;
     if (children.length) node2.children = children;
     return node2;
   }
   const node = { type: "node", tag };
   applyClass(node, attrs);
-  const attributes = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["class"]));
+  const attributes = otherAttrs(attrs, ctx, /* @__PURE__ */ new Set(["class", "style"]));
   if (Object.keys(attributes).length) node.attributes = attributes;
   if (children.length) node.children = children;
   return node;
@@ -1530,4 +1680,4 @@ export {
   emit,
   parse
 };
-//# sourceMappingURL=chunk-ACHLFXXY.js.map
+//# sourceMappingURL=chunk-HNGBRPTL.js.map