@fluixi/compiler 1.0.0-alpha.92 → 1.0.0-alpha.94

package/dist/integrations.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/compiler v1.0.0-alpha.92 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/compiler v1.0.0-alpha.94 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -136,6 +136,11 @@ var init_builtins = __esm({
 });
 
 // src/analyze/intrinsics.ts
+function tagIntrinsics(bound) {
+  const tags = /* @__PURE__ */ new Map();
+  for (const [name, tag] of Object.entries(TAG_INTRINSICS)) if (!bound.has(name)) tags.set(name, tag.export);
+  return tags;
+}
 function mayHaveIntrinsic(code) {
   return INTRINSIC_CALL.test(code);
 }
@@ -145,7 +150,7 @@ function isIntrinsicName(name) {
 function isPrimitiveModule(source) {
   return PRIMITIVE_MODULES.includes(source);
 }
-var REACTIVE_MODULE, INTRINSICS, RUNTIME_PRIMITIVES, PRIMITIVE_MODULES, INTRINSIC_CALL;
+var REACTIVE_MODULE, INTRINSICS, RUNTIME_PRIMITIVES, PRIMITIVE_MODULES, TAG_INTRINSICS, INTRINSIC_CALL;
 var init_intrinsics = __esm({
   "src/analyze/intrinsics.ts"() {
     "use strict";
@@ -156,6 +161,7 @@ var init_intrinsics = __esm({
       $effect: { export: "effect", module: REACTIVE_MODULE, returns: "effect" },
       $store: { export: "store", module: "@fluixi/reactive/store", returns: "store-handle" },
       $resource: { export: "resource", module: REACTIVE_MODULE, returns: "resource-handle" },
+      $cachedResource: { export: "cachedResource", module: "@fluixi/reactive/cached-resource", returns: "resource-handle" },
       // No short runtime form for these yet, so the intrinsic stands for the `create*`
       // name. Still worth having: no import to write, and when a shorter form is
       // designed, the change is this line rather than a compiler pass.
@@ -166,6 +172,19 @@ var init_intrinsics = __esm({
       // dependency analysis must not guess at.
       $untrack: { export: "untrack", module: REACTIVE_MODULE, returns: "plain" },
       $untrackStore: { export: "untrackStore", module: "@fluixi/reactive/store", returns: "plain" },
+      // Scopes, scheduling and lifecycle: no value to classify, but the same authoring promise,
+      // no import to write. `$cleanup` registers a callback on the current owner (`onCleanup`).
+      $batch: { export: "batch", module: REACTIVE_MODULE, returns: "plain" },
+      $cleanup: { export: "onCleanup", module: REACTIVE_MODULE, returns: "plain" },
+      $root: { export: "root", module: REACTIVE_MODULE, returns: "plain" },
+      $context: { export: "context", module: REACTIVE_MODULE, returns: "plain" },
+      $renderEffect: { export: "renderEffect", module: REACTIVE_MODULE, returns: "effect" },
+      $computed: { export: "computed", module: REACTIVE_MODULE, returns: "effect" },
+      // Storage for where the code runs, and a signal kept in it. `$persisted` is a signal
+      // handle as far as reads go: the same accessor with `set` on it.
+      $storage: { export: "useStorage", module: "@fluixi/core/storage", returns: "plain" },
+      $asyncStorage: { export: "useAsyncStorage", module: "@fluixi/core/storage", returns: "plain" },
+      $persisted: { export: "persisted", module: "@fluixi/core/storage", returns: "signal-handle" },
       // An environment variable, public or server-only; the browser build refuses a secret.
       $env: { export: "env", module: "@fluixi/start/env", returns: "plain" }
     };
@@ -178,8 +197,11 @@ var init_intrinsics = __esm({
       createMemo: "memo-accessor",
       createEffect: "effect",
       createRenderEffect: "effect",
+      renderEffect: "effect",
+      computed: "effect",
       createStore: "reactive-object",
       resource: "resource-handle",
+      cachedResource: "resource-handle",
       createResource: "reactive-object",
       createSelector: "memo-accessor",
       createDeferred: "memo-accessor"
@@ -188,8 +210,14 @@ var init_intrinsics = __esm({
       "@fluixi/reactive",
       "@fluixi/reactive/signal",
       "@fluixi/reactive/store",
+      "@fluixi/reactive/cached-resource",
       "@fluixi/core"
     ];
+    TAG_INTRINSICS = {
+      $html: { export: "html", module: "@fluixi/core" },
+      $svg: { export: "svg", module: "@fluixi/core" },
+      $css: { export: "css", module: "@fluixi/core" }
+    };
     INTRINSIC_CALL = new RegExp(`\\$(?:${Object.keys(INTRINSICS).map((n) => n.slice(1)).join("|")})\\s*\\(`);
   }
 });
@@ -686,11 +714,12 @@ var init_reactive_bindings = __esm({
 });
 
 // src/transform/source-locations.ts
-function mayHaveReactiveCall(code) {
+function mayHaveSourceMarks(code) {
   for (const name of RUNTIME_PRIMITIVES2) {
     if (code.includes(name)) return true;
   }
-  return code.includes("$signal") || code.includes("$memo") || code.includes("$effect") || code.includes("$store");
+  if (code.includes("$signal") || code.includes("$memo") || code.includes("$effect") || code.includes("$store")) return true;
+  return /\bclass\b[^{;]*\bextends\b/.test(code);
 }
 function isLoneBranch(statement, parent) {
   if (!parent || statement.type === "BlockStatement") return false;
@@ -719,6 +748,14 @@ function walk3(node, visit, stack = []) {
 }
 function nameFor(stack) {
   const declarator = stack[stack.length - 1];
+  if (declarator && CLASS_FIELDS.has(declarator.type)) {
+    const key = declarator.key;
+    if (key?.type === "Identifier" || key?.type === "PrivateIdentifier" || key?.type === "PrivateName") {
+      const name = key.name ?? key.id?.name;
+      return name;
+    }
+    return void 0;
+  }
   if (declarator?.type !== "VariableDeclarator") return void 0;
   const id = declarator.id;
   if (id?.type === "Identifier") return id.name;
@@ -767,6 +804,17 @@ function collectSourceEdits(program, filename) {
         });
       }
     }
+    if ((node.type === "ClassDeclaration" || node.type === "ClassExpression") && node.superClass && !node.declare) {
+      const at = node.loc?.start;
+      const body = node.body;
+      if (at && body) {
+        edits.push({
+          start: body.start + 1,
+          end: body.start + 1,
+          code: `static{globalThis.${CLASS_MARKER}?.(this,${JSON.stringify(filename)},${at.line},${at.column});}`
+        });
+      }
+    }
     if (node.type !== "CallExpression") return;
     const callee = node.callee;
     if (callee?.type !== "Identifier") return;
@@ -776,6 +824,26 @@ function collectSourceEdits(program, filename) {
     if (!intrinsic && !imported) return;
     const position = node.loc?.start;
     if (!position) return;
+    for (let i = stack.length - 1; i >= 0; i--) {
+      const up = stack[i];
+      if (isStatement(up)) break;
+      if (CLASS_FIELDS.has(up.type)) {
+        if (claimed.has(node.start)) return;
+        claimed.add(node.start);
+        const label2 = nameFor(stack);
+        const own = !up.static;
+        const args2 = [
+          JSON.stringify(filename),
+          String(position.line),
+          String(position.column),
+          label2 ? JSON.stringify(label2) : own ? "undefined" : void 0,
+          own ? "this" : void 0
+        ].filter((a) => a !== void 0).join(",");
+        edits.push({ start: node.start, end: node.start, code: `(globalThis.${SOURCE_MARKER}?.(${args2}),` });
+        edits.push({ start: node.end, end: node.end, code: ")" });
+        return;
+      }
+    }
     let statement;
     let parent;
     let index = -1;
@@ -815,7 +883,7 @@ function collectSourceEdits(program, filename) {
   });
   return { edits, marked: edits.length };
 }
-var SOURCE_MARKER, COMPONENT_MARKER, HOLE_MARKER, markHole, PROPS_MARKER, markProps, RUNTIME_PRIMITIVES2, SINGLE_STATEMENT_PARENTS;
+var SOURCE_MARKER, COMPONENT_MARKER, CLASS_MARKER, HOLE_MARKER, markHole, PROPS_MARKER, markProps, RUNTIME_PRIMITIVES2, SINGLE_STATEMENT_PARENTS, CLASS_FIELDS;
 var init_source_locations = __esm({
   "src/transform/source-locations.ts"() {
     "use strict";
@@ -823,6 +891,7 @@ var init_source_locations = __esm({
     init_reactive_bindings();
     SOURCE_MARKER = "__fx_source";
     COMPONENT_MARKER = "__fx_component";
+    CLASS_MARKER = "__fx_class";
     HOLE_MARKER = "__fx_hole";
     markHole = (accessor, line, column, name) => `(globalThis.${HOLE_MARKER} ?? ((f) => f))(${accessor},${line},${column}${name === void 0 ? "" : `,${JSON.stringify(name)}`})`;
     PROPS_MARKER = "__fx_props";
@@ -850,6 +919,7 @@ var init_source_locations = __esm({
       "LabeledStatement",
       "WithStatement"
     ]);
+    CLASS_FIELDS = /* @__PURE__ */ new Set(["PropertyDefinition", "ClassProperty", "ClassPrivateProperty", "AccessorProperty"]);
   }
 });
 
@@ -1013,13 +1083,16 @@ function emitComponent(name, props, children, used, templates, at) {
   used.add("createComponent");
   const spreads = props.filter((p) => p.kind === "spread");
   const normal = props.filter((p) => p.kind !== "spread");
-  const entries = normal.map(
-    (p) => `get ${propKey(p.name)}() { return ${componentPropValue(p)}; }`
-  );
+  const bodies = normal.map((p) => [p.name, componentPropValue(p)]);
   if (children.length > 0) {
-    entries.push(`get children() { return ${emitChildren(children, used, templates)}; }`);
+    bodies.push(["children", emitChildren(children, used, templates)]);
+  }
+  let obj = `{ ${bodies.map(([name2, body]) => `get ${propKey(name2)}() { return ${body}; }`).join(", ")} }`;
+  if (bodies.some(([, body]) => /\bthis\b/.test(body))) {
+    const thunks = bodies.map(([name2, body]) => `${JSON.stringify(name2)}: () => (${body})`);
+    const getters = bodies.map(([name2]) => `get ${propKey(name2)}() { return _$t[${JSON.stringify(name2)}](); }`);
+    obj = `((_$t) => ({ ${getters.join(", ")} }))({ ${thunks.join(", ")} })`;
   }
-  let obj = `{ ${entries.join(", ")} }`;
   if (spreads.length > 0) {
     used.add("mergeProps");
     obj = `mergeProps(${spreads.map((s) => s.expr).join(", ")}, ${obj})`;
@@ -1100,7 +1173,8 @@ function emitNode(node, used, templates) {
         } else {
           used.add("spread");
           const svgFlag = node.svg ? ", isSVG: true" : "";
-          const customFlag = node.tag.includes("-") ? ", isCustomElement: true" : "";
+          const accessors = node.props.filter((p) => p.kind !== "spread" && p.expr !== void 0 && p.reactive && p.name !== "ref").map((p) => p.name);
+          const customFlag = node.tag.includes("-") ? `, isCustomElement: true, accessors: ${JSON.stringify(accessors)}` : "";
           parts.push(
             `spread({ element: ${el}, props: ${emitProps(node.props, null, used)}${svgFlag}${customFlag} });`
           );
@@ -1180,6 +1254,277 @@ var init_text = __esm({
   }
 });
 
+// src/lower/entities.ts
+function decodeEntities(value) {
+  if (!value.includes("&")) return value;
+  return value.replace(REFERENCE, (match, hex, dec, name) => {
+    const code = hex ? parseInt(hex, 16) : dec ? parseInt(dec, 10) : Object.prototype.hasOwnProperty.call(NAMED, name) ? NAMED[name] : void 0;
+    return code !== void 0 && code <= 1114111 ? String.fromCodePoint(code) : match;
+  });
+}
+var NAMED, REFERENCE;
+var init_entities = __esm({
+  "src/lower/entities.ts"() {
+    "use strict";
+    NAMED = {
+      quot: 34,
+      amp: 38,
+      apos: 39,
+      lt: 60,
+      gt: 62,
+      nbsp: 160,
+      iexcl: 161,
+      cent: 162,
+      pound: 163,
+      curren: 164,
+      yen: 165,
+      brvbar: 166,
+      sect: 167,
+      uml: 168,
+      copy: 169,
+      ordf: 170,
+      laquo: 171,
+      not: 172,
+      shy: 173,
+      reg: 174,
+      macr: 175,
+      deg: 176,
+      plusmn: 177,
+      sup2: 178,
+      sup3: 179,
+      acute: 180,
+      micro: 181,
+      para: 182,
+      middot: 183,
+      cedil: 184,
+      sup1: 185,
+      ordm: 186,
+      raquo: 187,
+      frac14: 188,
+      frac12: 189,
+      frac34: 190,
+      iquest: 191,
+      Agrave: 192,
+      Aacute: 193,
+      Acirc: 194,
+      Atilde: 195,
+      Auml: 196,
+      Aring: 197,
+      AElig: 198,
+      Ccedil: 199,
+      Egrave: 200,
+      Eacute: 201,
+      Ecirc: 202,
+      Euml: 203,
+      Igrave: 204,
+      Iacute: 205,
+      Icirc: 206,
+      Iuml: 207,
+      ETH: 208,
+      Ntilde: 209,
+      Ograve: 210,
+      Oacute: 211,
+      Ocirc: 212,
+      Otilde: 213,
+      Ouml: 214,
+      times: 215,
+      Oslash: 216,
+      Ugrave: 217,
+      Uacute: 218,
+      Ucirc: 219,
+      Uuml: 220,
+      Yacute: 221,
+      THORN: 222,
+      szlig: 223,
+      agrave: 224,
+      aacute: 225,
+      acirc: 226,
+      atilde: 227,
+      auml: 228,
+      aring: 229,
+      aelig: 230,
+      ccedil: 231,
+      egrave: 232,
+      eacute: 233,
+      ecirc: 234,
+      euml: 235,
+      igrave: 236,
+      iacute: 237,
+      icirc: 238,
+      iuml: 239,
+      eth: 240,
+      ntilde: 241,
+      ograve: 242,
+      oacute: 243,
+      ocirc: 244,
+      otilde: 245,
+      ouml: 246,
+      divide: 247,
+      oslash: 248,
+      ugrave: 249,
+      uacute: 250,
+      ucirc: 251,
+      uuml: 252,
+      yacute: 253,
+      thorn: 254,
+      yuml: 255,
+      OElig: 338,
+      oelig: 339,
+      Scaron: 352,
+      scaron: 353,
+      Yuml: 376,
+      fnof: 402,
+      circ: 710,
+      tilde: 732,
+      Alpha: 913,
+      Beta: 914,
+      Gamma: 915,
+      Delta: 916,
+      Epsilon: 917,
+      Zeta: 918,
+      Eta: 919,
+      Theta: 920,
+      Iota: 921,
+      Kappa: 922,
+      Lambda: 923,
+      Mu: 924,
+      Nu: 925,
+      Xi: 926,
+      Omicron: 927,
+      Pi: 928,
+      Rho: 929,
+      Sigma: 931,
+      Tau: 932,
+      Upsilon: 933,
+      Phi: 934,
+      Chi: 935,
+      Psi: 936,
+      Omega: 937,
+      alpha: 945,
+      beta: 946,
+      gamma: 947,
+      delta: 948,
+      epsilon: 949,
+      zeta: 950,
+      eta: 951,
+      theta: 952,
+      iota: 953,
+      kappa: 954,
+      lambda: 955,
+      mu: 956,
+      nu: 957,
+      xi: 958,
+      omicron: 959,
+      pi: 960,
+      rho: 961,
+      sigmaf: 962,
+      sigma: 963,
+      tau: 964,
+      upsilon: 965,
+      phi: 966,
+      chi: 967,
+      psi: 968,
+      omega: 969,
+      thetasym: 977,
+      upsih: 978,
+      piv: 982,
+      ensp: 8194,
+      emsp: 8195,
+      thinsp: 8201,
+      zwnj: 8204,
+      zwj: 8205,
+      lrm: 8206,
+      rlm: 8207,
+      ndash: 8211,
+      mdash: 8212,
+      lsquo: 8216,
+      rsquo: 8217,
+      sbquo: 8218,
+      ldquo: 8220,
+      rdquo: 8221,
+      bdquo: 8222,
+      dagger: 8224,
+      Dagger: 8225,
+      bull: 8226,
+      hellip: 8230,
+      permil: 8240,
+      prime: 8242,
+      Prime: 8243,
+      lsaquo: 8249,
+      rsaquo: 8250,
+      oline: 8254,
+      frasl: 8260,
+      euro: 8364,
+      image: 8465,
+      weierp: 8472,
+      real: 8476,
+      trade: 8482,
+      alefsym: 8501,
+      larr: 8592,
+      uarr: 8593,
+      rarr: 8594,
+      darr: 8595,
+      harr: 8596,
+      crarr: 8629,
+      lArr: 8656,
+      uArr: 8657,
+      rArr: 8658,
+      dArr: 8659,
+      hArr: 8660,
+      forall: 8704,
+      part: 8706,
+      exist: 8707,
+      empty: 8709,
+      nabla: 8711,
+      isin: 8712,
+      notin: 8713,
+      ni: 8715,
+      prod: 8719,
+      sum: 8721,
+      minus: 8722,
+      lowast: 8727,
+      radic: 8730,
+      prop: 8733,
+      infin: 8734,
+      ang: 8736,
+      and: 8743,
+      or: 8744,
+      cap: 8745,
+      cup: 8746,
+      int: 8747,
+      there4: 8756,
+      sim: 8764,
+      cong: 8773,
+      asymp: 8776,
+      ne: 8800,
+      equiv: 8801,
+      le: 8804,
+      ge: 8805,
+      sub: 8834,
+      sup: 8835,
+      nsub: 8836,
+      sube: 8838,
+      supe: 8839,
+      oplus: 8853,
+      otimes: 8855,
+      perp: 8869,
+      sdot: 8901,
+      lceil: 8968,
+      rceil: 8969,
+      lfloor: 8970,
+      rfloor: 8971,
+      lang: 9001,
+      rang: 9002,
+      loz: 9674,
+      spades: 9824,
+      clubs: 9827,
+      hearts: 9829,
+      diams: 9830
+    };
+    REFERENCE = /&(?:#[xX]([0-9a-fA-F]{1,6})|#([0-9]{1,7})|([a-zA-Z][a-zA-Z0-9]{1,31}));/g;
+  }
+});
+
 // src/lower/template.ts
 function escapeTemplate(s) {
   return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
@@ -1191,7 +1536,7 @@ function lowerTemplate(pieces, holes, used, opts = {}) {
   const { root } = (0, import_template_parser.parseTemplate)(pieces, { svg: opts.svg });
   return new Lowerer(holes, used, opts.sourceFile, opts.positionAt).lowerRoot(root.children);
 }
-var import_template_parser, DELEGATED, Lowerer;
+var import_template_parser, DELEGATED, CONTAINER, Lowerer;
 var init_template = __esm({
   "src/lower/template.ts"() {
     "use strict";
@@ -1199,7 +1544,9 @@ var init_template = __esm({
     init_load_directive();
     init_imperative();
     init_text();
+    init_entities();
     init_paren();
+    init_source_locations();
     DELEGATED = /* @__PURE__ */ new Set([
       "click",
       "dblclick",
@@ -1214,6 +1561,7 @@ var init_template = __esm({
       "mousedown",
       "mouseup"
     ]);
+    CONTAINER = "container";
     Lowerer = class {
       constructor(holes, used, sourceFile, positionAt) {
         this.holes = holes;
@@ -1265,10 +1613,6 @@ var init_template = __esm({
               if (hasElse) i = elseIdx;
               continue;
             }
-            if (child.attributes.some((a) => a.kind === "EachDirective")) {
-              out.push(this.lowerEach(child));
-              continue;
-            }
           }
           const node = this.lowerNode(child);
           if (node) out.push(node);
@@ -1282,7 +1626,7 @@ var init_template = __esm({
         switch (node.kind) {
           case "Text": {
             if (node.raw) return { kind: "text", value: node.value };
-            const cleaned = cleanTemplateText(node.value);
+            const cleaned = decodeEntities(cleanTemplateText(node.value));
             return cleaned ? { kind: "text", value: cleaned } : null;
           }
           case "Comment":
@@ -1310,13 +1654,16 @@ var init_template = __esm({
           node.props.unshift({ name: "component", kind: "attr", expr: `() => ${paren(this.hole(isAttr.value.hole).code, "arrowBody")}` });
           return node;
         }
+        const each = this.lowerEach(el);
+        const children = each ? [each] : this.lowerChildren(el.children);
+        if (el.tag === CONTAINER) return children.length === 1 ? children[0] : { kind: "fragment", children };
         const at = this.tagAt(el);
         return {
           kind: "element",
           tag: el.tag,
           svg: el.namespace === "svg",
-          props: this.lowerAttributes(el.attributes),
-          children: this.lowerChildren(el.children),
+          props: this.lowerAttributes(el.attributes, true),
+          children,
           static: false,
           ...at ? { at } : {}
         };
@@ -1388,10 +1735,14 @@ var init_template = __esm({
         const at = this.tagAt(el);
         return { kind: "component", name: "Show", props, children: [child], ...at ? { at } : {}, ...cond.at ? { bindAt: cond.at } : {} };
       }
-      /** `<el each=${items} key?>${item => …}</el>` → `<For each>{item => <el>…</el>}</For>`. */
+      /**
+       * `<el each=${items} key?>${item => …}</el>` → `<el><For each>{item => …}</For></el>`: the
+       * content is repeated per item. Content that is not a `${item => …}` arrow is repeated as
+       * it is. Null when the element has no `each`.
+       */
       lowerEach(el) {
         const eachDir = el.attributes.find((a) => a.kind === "EachDirective");
-        if (!eachDir || eachDir.kind !== "EachDirective") return this.lowerNode(el);
+        if (!eachDir || eachDir.kind !== "EachDirective") return null;
         const each = this.hole(eachDir.hole);
         const props = [{ name: "each", kind: "attr", expr: each.code, reactive: each.reactive, ...each.at ? { at: each.at } : {} }];
         if (eachDir.key) {
@@ -1401,12 +1752,12 @@ var init_template = __esm({
         const arrow = this.itemArrow(el);
         let childrenCode;
         if (arrow) {
-          const bodyIR = { kind: "expr", code: arrow.body, reactive: arrow.bodyReactive };
-          const repeated = this.rebuildWithChildren(el, [bodyIR]);
-          childrenCode = `(${arrow.params.join(", ")}) => ${paren(this.emit(repeated), "arrowBody")}`;
+          const body = arrow.bodyReactive ? `() => ${paren(arrow.body, "arrowBody")}` : paren(arrow.body, "arrowBody");
+          childrenCode = `(${arrow.params.join(", ")}) => ${body}`;
         } else {
-          const repeated = this.stripAndLower(el, (a) => a.kind === "EachDirective");
-          childrenCode = `() => ${paren(this.emit(repeated), "arrowBody")}`;
+          const content = this.lowerChildren(el.children);
+          const ir = content.length === 1 ? content[0] : { kind: "fragment", children: content };
+          childrenCode = `() => ${paren(this.emit(ir), "arrowBody")}`;
         }
         const children = [{ kind: "expr", code: childrenCode, reactive: false }];
         const at = this.tagAt(el);
@@ -1423,33 +1774,23 @@ var init_template = __esm({
         const clone = { ...el, attributes: el.attributes.filter((a) => !drop(a)) };
         return clone.kind === "Element" ? this.lowerElement(clone) : this.lowerComponent(clone);
       }
-      /** Same element (minus each/key) but with explicit IR children. */
-      rebuildWithChildren(el, children) {
-        const props = this.lowerAttributes(
-          el.attributes.filter((a) => a.kind !== "EachDirective")
-        );
-        if (el.kind === "Element") {
-          const at = this.tagAt(el);
-          return {
-            kind: "element",
-            tag: el.tag,
-            svg: el.namespace === "svg",
-            props,
-            children,
-            static: false,
-            ...at ? { at } : {}
-          };
-        }
-        return { kind: "component", name: el.tag, props, children };
-      }
       // --- attributes ---------------------------------------------------------
-      lowerAttributes(attrs) {
+      /**
+       * `element`: a DOM element, where each class:/style: value that moves is its own accessor.
+       * A component gets the object as before, rebuilt whole when any value moves.
+       */
+      lowerAttributes(attrs, element = false) {
+        let anyReactive = false;
+        const entry = (name, h) => {
+          anyReactive ||= h.reactive;
+          if (!element || !h.reactive) return `${JSON.stringify(name)}: ${h.code}`;
+          const accessor = `() => ${paren(h.code, "arrowBody")}`;
+          return `${JSON.stringify(name)}: ${h.at ? markHole(accessor, h.at.line, h.at.column) : accessor}`;
+        };
         const props = [];
         const classEntries = [];
-        let classReactive = false;
         let classAt;
         const styleEntries = [];
-        let styleReactive = false;
         let styleAt;
         const usePairs = [];
         for (const a of attrs) {
@@ -1489,15 +1830,13 @@ var init_template = __esm({
               break;
             case "ClassDirective": {
               const h = this.hole(a.hole);
-              classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-              classReactive = classReactive || h.reactive;
+              classEntries.push(entry(a.name, h));
               classAt ??= h.at;
               break;
             }
             case "StyleDirective": {
               const h = this.hole(a.hole);
-              styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-              styleReactive = styleReactive || h.reactive;
+              styleEntries.push(entry(a.name, h));
               styleAt ??= h.at;
               break;
             }
@@ -1517,18 +1856,19 @@ var init_template = __esm({
             name: "classList",
             kind: "attr",
             expr: `{ ${classEntries.join(", ")} }`,
-            reactive: classReactive,
+            reactive: !element && anyReactive,
             ...classAt ? { at: classAt } : {}
           });
         }
         if (styleEntries.length > 0) {
-          props.push({
-            name: "style",
-            kind: "attr",
-            expr: `{ ${styleEntries.join(", ")} }`,
-            reactive: styleReactive,
-            ...styleAt ? { at: styleAt } : {}
-          });
+          const entries = `{ ${styleEntries.join(", ")} }`;
+          const base = props.findIndex((p) => p.name === "style");
+          if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: !element && anyReactive, ...styleAt ? { at: styleAt } : {} });
+          else {
+            const prop = props[base];
+            const value = prop.expr === void 0 ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, "arrowBody")}` : prop.expr;
+            props[base] = { name: "style", kind: "attr", expr: `[${value}, ${entries}]`, reactive: false, ...prop.at ? { at: prop.at } : {} };
+          }
         }
         if (usePairs.length > 0) {
           props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
@@ -1617,7 +1957,7 @@ var init_template = __esm({
           return base;
         }
         if (v.kind === "static") {
-          base.literal = v.value;
+          base.literal = decodeEntities(v.value);
           return base;
         }
         if (v.kind === "hole") {
@@ -1630,7 +1970,7 @@ var init_template = __esm({
         let reactive = false;
         let at;
         const body = v.parts.map((p) => {
-          if ("text" in p) return escapeTemplate(p.text);
+          if ("text" in p) return escapeTemplate(decodeEntities(p.text));
           const h = this.hole(p.hole);
           reactive = reactive || h.reactive;
           at ??= h.at;
@@ -1855,6 +2195,21 @@ var init_expr_shape = __esm({
 });
 
 // src/lower/jsx.ts
+function directive(node, name) {
+  if (node.type !== "JSXElement") return void 0;
+  const opening = node.openingElement;
+  if (opening.name.type !== "JSXIdentifier" || opening.name.name[0] !== opening.name.name[0].toLowerCase()) return void 0;
+  return opening.attributes.find((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === name);
+}
+function directiveExpr(attr) {
+  const v = attr.value;
+  return v?.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression" ? v.expression : void 0;
+}
+function emitIR(ir, ctx) {
+  const { code, imports, templates } = imperativeBackend.emit(ir, {});
+  for (const s of imports) ctx.used.add(s);
+  return inlineTemplates(code, templates);
+}
 function literalOf(node) {
   if (node.type === "StringLiteral" || node.type === "NumericLiteral" || node.type === "BooleanLiteral") {
     return node.value;
@@ -1926,9 +2281,12 @@ function attrExprCode(attr, ctx) {
   }
   return null;
 }
-function buildProps(attrs, ctx) {
+function buildProps(attrs, ctx, element = false) {
   const props = [];
   const usePairs = [];
+  const classEntries = [];
+  const styleEntries = [];
+  let styleAt;
   for (const a of attrs) {
     if (a.type === "JSXSpreadAttribute") {
       props.push({ name: "", kind: "spread", expr: ctx.code(a.argument) });
@@ -1944,6 +2302,27 @@ function buildProps(attrs, ctx) {
       usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, "arrowBody")}]` : `[${dir}]`);
       continue;
     }
+    if (element && (ns === "class" || ns === "style")) {
+      const key = JSON.stringify(a.name.name.name);
+      const v = a.value;
+      let value;
+      if (v == null) value = "true";
+      else if (isString(v)) value = JSON.stringify(literalOf(v));
+      else if (v.type === "JSXExpressionContainer" && v.expression?.type !== "JSXEmptyExpression") {
+        value = keyValue(v.expression, ctx);
+        if (ns === "style") styleAt ??= posOf(v.expression, ctx);
+      } else continue;
+      (ns === "class" ? classEntries : styleEntries).push(`${key}: ${value}`);
+      continue;
+    }
+    if (element && a.name.type === "JSXIdentifier" && a.name.name === "style" && a.value?.type === "JSXExpressionContainer") {
+      const entries = objectEntries(a.value.expression, ctx);
+      if (entries) {
+        styleEntries.unshift(...entries);
+        styleAt = posOf(a.value.expression, ctx);
+        continue;
+      }
+    }
     if (ns === "oncapture") {
       const evt = a.name.name.name.toLowerCase();
       const h = attrExprCode(a, ctx) ?? "undefined";
@@ -1952,12 +2331,49 @@ function buildProps(attrs, ctx) {
     }
     props.push(buildAttr(a, ctx));
   }
+  if (classEntries.length > 0) props.push({ name: "classList", kind: "attr", expr: `{ ${classEntries.join(", ")} }`, reactive: false });
+  if (styleEntries.length > 0) {
+    const entries = `{ ${styleEntries.join(", ")} }`;
+    const base = props.findIndex((p) => p.name === "style" && p.kind === "attr");
+    if (base === -1) props.push({ name: "style", kind: "attr", expr: entries, reactive: false, ...styleAt ? { at: styleAt } : {} });
+    else {
+      const prop = props[base];
+      const value = prop.literal !== void 0 ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, "arrowBody")}` : prop.expr;
+      props[base] = { name: "style", kind: "attr", expr: `[${value}, ${entries}]`, reactive: false, ...prop.at ? { at: prop.at } : {} };
+    }
+  }
   if (usePairs.length > 0) props.push({ name: "use", kind: "attr", expr: `[${usePairs.join(", ")}]` });
   return props;
 }
+function keyValue(expr, ctx) {
+  const code = ctx.code(expr);
+  if (!isReactive(expr)) return code;
+  const accessor = `() => ${paren(code, "arrowBody")}`;
+  const at = posOf(expr, ctx);
+  return at ? markHole(accessor, at.line, at.column) : accessor;
+}
+function objectEntries(expr, ctx) {
+  if (expr?.type !== "ObjectExpression") return null;
+  const entries = [];
+  for (const p of expr.properties) {
+    if (p.type !== "ObjectProperty") return null;
+    const key = p.computed ? `[${ctx.code(p.key)}]` : p.key.type === "Identifier" ? JSON.stringify(p.key.name) : JSON.stringify(String(p.key.value));
+    entries.push(`${key}: ${keyValue(p.value, ctx)}`);
+  }
+  return entries;
+}
 function buildChildren(children, ctx) {
   const out = [];
-  for (const child of children) {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (directive(child, "if")) {
+      let next = i + 1;
+      while (next < children.length && children[next].type === "JSXText" && !cleanTemplateText(children[next].value)) next++;
+      const fallback = directive(children[next], "else") ? children[next] : null;
+      out.push(buildIf(child, fallback, ctx));
+      if (fallback) i = next;
+      continue;
+    }
     if (child.type === "JSXText") {
       const text = cleanTemplateText(child.value);
       if (text) out.push({ kind: "text", value: text });
@@ -1973,6 +2389,7 @@ function buildChildren(children, ctx) {
         });
       }
     } else if (child.type === "JSXElement" || child.type === "JSXFragment") {
+      if (ctx.dropStyles?.has(child.start)) continue;
       out.push(buildNode(child, ctx));
     } else if (child.type === "JSXSpreadChild") {
       out.push({ kind: "expr", code: ctx.code(child.expression), reactive: false });
@@ -1994,26 +2411,79 @@ function readLoad(attrs) {
   }
   return void 0;
 }
+function buildIf(node, fallback, ctx) {
+  const cond = directiveExpr(directive(node, "if"));
+  const props = [
+    cond ? { name: "when", kind: "attr", expr: ctx.code(cond), reactive: isReactive(cond), at: posOf(cond, ctx) } : { name: "when", kind: "attr", literal: true }
+  ];
+  if (fallback) {
+    props.push({ name: "fallback", kind: "attr", expr: emitIR(buildElement(fallback, ctx, ["else"]), ctx), jsxElement: true });
+  }
+  return { kind: "component", name: "Show", props, children: [buildElement(node, ctx, ["if"])] };
+}
+function buildEach(node, ctx) {
+  const attr = directive(node, "each");
+  if (!attr) return null;
+  const list = directiveExpr(attr);
+  const props = [
+    list ? { name: "each", kind: "attr", expr: ctx.code(list), reactive: isReactive(list), at: posOf(list, ctx) } : { name: "each", kind: "attr", expr: "[]" }
+  ];
+  const key = directive(node, "key");
+  if (key) {
+    const keyExpr = directiveExpr(key);
+    const by = isString(key.value) ? `(item) => item[${JSON.stringify(literalOf(key.value))}]` : keyExpr ? ctx.code(keyExpr) : void 0;
+    if (by) props.push({ name: "by", kind: "attr", expr: by });
+  }
+  const content = node.children.filter((c) => !(c.type === "JSXText" && !cleanTemplateText(c.value)));
+  const only = content.length === 1 && content[0].type === "JSXExpressionContainer" ? content[0].expression : null;
+  let render;
+  if (only && (only.type === "ArrowFunctionExpression" || only.type === "FunctionExpression")) {
+    const fn = ctx.code(only);
+    const live = only.type === "ArrowFunctionExpression" && only.body.type !== "BlockStatement" && isReactive(only.body);
+    render = live ? `(...args) => () => (${fn})(...args)` : fn;
+  } else {
+    const built = buildChildren(node.children, ctx);
+    const ir = built.length === 1 ? built[0] : { kind: "fragment", children: built };
+    render = `() => ${paren(emitIR(ir, ctx), "arrowBody")}`;
+  }
+  return { kind: "component", name: "For", props, children: [{ kind: "expr", code: render, reactive: false }] };
+}
+function buildElement(node, ctx, handled) {
+  const skip = new Set(handled);
+  const directives = /* @__PURE__ */ new Set(["if", "else", "each", ...directive(node, "each") ? ["key"] : []]);
+  const attributes = node.openingElement.attributes.filter(
+    (a) => !(a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && (skip.has(a.name.name) || directives.has(a.name.name)))
+  );
+  const { tag } = tagInfo(node.openingElement.name, ctx);
+  const each = buildEach(node, ctx);
+  const children = each ? [each] : buildChildren(node.children, ctx);
+  if (tag === CONTAINER2) return children.length === 1 ? children[0] : { kind: "fragment", children };
+  const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
+  const props = buildProps(attributes, ctx, true);
+  const scope = ctx.scopes?.find((s) => node.start >= s.start && node.end <= s.end);
+  if (scope) props.unshift({ name: "data-fx-s", kind: "attr", literal: scope.value });
+  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
+}
 function buildNode(node, ctx) {
   if (node.type === "JSXFragment") {
     return { kind: "fragment", children: buildChildren(node.children, ctx) };
   }
+  if (directive(node, "if")) return buildIf(node, null, ctx);
+  if (ctx.dropStyles?.has(node.start)) return { kind: "fragment", children: [] };
   const { tag, component } = tagInfo(node.openingElement.name, ctx);
+  if (!component) return buildElement(node, ctx, []);
   const props = buildProps(node.openingElement.attributes, ctx);
   const children = buildChildren(node.children, ctx);
   const at = ctx.sourceFile && node.loc?.start ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column } : void 0;
-  if (component) {
-    const load = readLoad(node.openingElement.attributes);
-    return { kind: "component", name: tag, props, children, ...load ? { load } : {}, ...at ? { at } : {} };
-  }
-  return { kind: "element", tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...at ? { at } : {} };
+  const load = readLoad(node.openingElement.attributes);
+  return { kind: "component", name: tag, props, children, ...load ? { load } : {}, ...at ? { at } : {} };
 }
 function buildJsxIR(node, ctx) {
   const ir = buildNode(node, ctx);
   analyzeStatic(ir);
   return ir;
 }
-var SVG_TAGS, EVENT_RE, DELEGATED2, isReactive, posOf, isString;
+var SVG_TAGS, EVENT_RE, DELEGATED2, isReactive, CONTAINER2, posOf, isString;
 var init_jsx = __esm({
   "src/lower/jsx.ts"() {
     "use strict";
@@ -2023,6 +2493,8 @@ var init_jsx = __esm({
     init_analyze_static();
     init_text();
     init_paren();
+    init_source_locations();
+    init_imperative();
     SVG_TAGS = /* @__PURE__ */ new Set([
       "svg",
       "path",
@@ -2053,6 +2525,7 @@ var init_jsx = __esm({
       "mouseup"
     ]);
     isReactive = (node) => isReactiveShape(shapeOf(node));
+    CONTAINER2 = "container";
     posOf = (node, ctx) => {
       if (!ctx.sourceFile) return void 0;
       const at = node.loc?.start;
@@ -2669,6 +3142,569 @@ var init_babel = __esm({
   }
 });
 
+// src/transform/styles.ts
+function collectStyles(program, sourceName, options, tags = { html: /* @__PURE__ */ new Map([["html", "html"]]) }, module2) {
+  const plan = {
+    scopes: [],
+    templateOwners: /* @__PURE__ */ new Map(),
+    drop: /* @__PURE__ */ new Set(),
+    styles: [],
+    diagnostics: [],
+    edits: [],
+    literals: [],
+    references: [],
+    shadowClasses: /* @__PURE__ */ new Map()
+  };
+  if (!options) return plan;
+  const literalsOf = findLiterals(program, options.cssModules ?? ["@fluixi/core", "@fluixi/dom"], plan, tags.css ?? []);
+  plan.names = literalsOf;
+  const classOf = /* @__PURE__ */ new Map();
+  const shadowOf = (owner) => {
+    const cls = classOf.get(owner);
+    return cls ? plan.shadowClasses.get(cls) : void 0;
+  };
+  const resolved = /* @__PURE__ */ new Map();
+  const piecesToNodes = (quasis, expressions, at, stack) => {
+    const out = [];
+    for (let i = 0; i < quasis.length; i++) {
+      const text = quasis[i].value.cooked ?? quasis[i].value.raw;
+      if (text.trim()) {
+        try {
+          const start = quasis[i].loc?.start;
+          out.push(...options.process(text, sourceName).map((n) => start ? shiftLoc(n, sourceName, start) : n));
+        } catch (error) {
+          plan.diagnostics.push({ ...at, message: `CSS could not be processed: ${error.message}` });
+          return null;
+        }
+      }
+      const expr = expressions[i];
+      if (!expr) continue;
+      const value = expr.type === "Identifier" ? resolveLiteral(expr.name, at, stack) : void 0;
+      if (value === void 0) {
+        plan.diagnostics.push({
+          ...at,
+          message: "Only css`` values can be interpolated into styles, and only by name: ${base}. Dynamic values go through custom properties (style:--x={...} and var(--x))."
+        });
+        return null;
+      }
+      if (value === null) return null;
+      out.push(...value);
+    }
+    return out;
+  };
+  function resolveLiteral(name, at, stack) {
+    const imported = literalsOf.imports.get(name);
+    if (imported) {
+      const nodes = options?.imported?.get(`${imported.source}#${imported.name}`);
+      if (nodes) return nodes.map(dropLoc);
+      plan.references.push({ name: imported.name, source: imported.source, ...at });
+      plan.diagnostics.push({
+        ...at,
+        message: options?.imported ? `${name} from ${imported.source} is not a css\`\` value the build could find.` : `${name} comes from ${imported.source}: style values from another module are resolved by the build.`
+      });
+      return null;
+    }
+    const literal = literalsOf.literals.get(name);
+    if (!literal) return void 0;
+    if (stack.includes(name)) {
+      plan.diagnostics.push({ ...at, message: `css\`\` values include each other: ${[...stack, name].join(" → ")}.` });
+      return null;
+    }
+    if (!resolved.has(name)) {
+      resolved.set(name, piecesToNodes(literal.quasi.quasis, literal.quasi.expressions, at, [...stack, name]));
+    }
+    return resolved.get(name);
+  }
+  for (const [name, literal] of literalsOf.literals) {
+    const at = { line: literal.loc?.start.line ?? 0, column: literal.loc?.start.column ?? 0 };
+    const nodes = resolveLiteral(name, at, []);
+    const id = hash(`${sourceName}:css:${name}`);
+    plan.edits.push({ start: literal.start, end: literal.end, code: `({ $fxStyle: ${JSON.stringify(id)} })` });
+    if (nodes) plan.literals.push({ id, name, css: printStyle(nodes, options.minify) });
+  }
+  const scopeOf = /* @__PURE__ */ new Map();
+  const names = /* @__PURE__ */ new Map();
+  const named = /* @__PURE__ */ new Map();
+  const visit = (node, owners) => {
+    if (!node || typeof node !== "object") return;
+    if (node.type === "VariableDeclarator" && node.id.type === "Identifier" && node.init && FUNCTIONS.has(node.init.type)) {
+      named.set(node.init, node.id.name);
+    }
+    if ((node.type === "ClassDeclaration" || node.type === "ClassExpression") && node.id) {
+      for (const member of node.body.body) if (member.type === "ClassMethod") named.set(member, node.id.name);
+    }
+    if (node.type === "ClassDeclaration" || node.type === "ClassExpression") {
+      for (const member of node.body.body) if (member.type === "ClassMethod") classOf.set(member, node);
+      const shadow = staticMember(node, "shadow");
+      if (shadow?.value && !(shadow.value.type === "BooleanLiteral" && shadow.value.value === false)) {
+        plan.shadowClasses.set(node, { node, styles: staticMember(node, "styles"), indexes: [] });
+      }
+    }
+    if (node.type === "TaggedTemplateExpression" && node.tag.type === "Identifier" && tags.html.get(node.tag.name) === "html") {
+      const text = node.quasi.quasis.map((q) => q.value.raw).join("");
+      if (/<style[\s>]/.test(text)) {
+        const at = { line: node.loc?.start.line ?? 0, column: node.loc?.start.column ?? 0 };
+        const owner = owners[0];
+        if (!owner) plan.diagnostics.push({ ...at, message: "<style> has to be written inside a component." });
+        else {
+          const id = idFor(owner);
+          const shadow = shadowOf(owner);
+          plan.templateOwners.set(node.start, { id, component: functionName(owner, named) });
+          for (const block of templateBlocks(node.quasi)) compileBlock(block, block.scoped, owner, at);
+        }
+      }
+    }
+    const inner = FUNCTIONS.has(node.type) ? [...owners, node] : owners;
+    if (node.type === "JSXElement" && isStyle(node)) {
+      handle(node, owners);
+      return;
+    }
+    for (const key of Object.keys(node)) {
+      if (key === "loc" || key === "leadingComments" || key === "trailingComments" || key === "innerComments") continue;
+      const value = node[key];
+      if (Array.isArray(value)) for (const v of value) visit(v, inner);
+      else if (value && typeof value === "object" && "type" in value) visit(value, inner);
+    }
+  };
+  const handle = (node, owners) => {
+    const at = { line: node.loc?.start.line ?? 0, column: node.loc?.start.column ?? 0 };
+    const pieces = blockPieces(node);
+    if (pieces === null) {
+      plan.diagnostics.push({
+        ...at,
+        message: "<style> needs its CSS as one template literal, <style>{`...`}</style>: JSX reads a bare `{` as an expression."
+      });
+      return;
+    }
+    const owner = owners[0];
+    if (!owner) {
+      plan.diagnostics.push({ ...at, message: "<style> has to be written inside a component." });
+      return;
+    }
+    compileBlock(pieces, isScoped(node), owner, at);
+    plan.drop.add(node.start);
+  };
+  const compileBlock = (pieces, scoped, owner, at) => {
+    const component = functionName(owner, named);
+    const id = idFor(owner);
+    const processed = piecesToNodes(pieces.quasis, pieces.expressions, at, []);
+    if (!processed) return;
+    let nodes = processed;
+    const shadow = shadowOf(owner);
+    if (scoped && !shadow) {
+      if (!plan.scopes.some((s) => s.value === id)) plan.scopes.push({ start: owner.start, end: owner.end, value: id });
+      nodes = scopeNodes(nodes, id, (message) => plan.diagnostics.push({ ...at, message }));
+    }
+    const printed = module2 ? printStyleWithMap(nodes, options.minify, sourceName, module2) : { css: printStyle(nodes, options.minify) };
+    plan.styles.push({ id, scoped: scoped && !shadow, component, ...printed, ...shadow ? { shadow: true } : {}, ...at });
+    if (shadow) shadow.indexes.push(plan.styles.length - 1);
+  };
+  function idFor(owner) {
+    let id = scopeOf.get(owner);
+    if (!id) {
+      const component = functionName(owner, named);
+      const seen = names.get(component) ?? 0;
+      names.set(component, seen + 1);
+      id = hash(`${sourceName}:${component}${seen ? ":" + seen : ""}`);
+      scopeOf.set(owner, id);
+    }
+    return id;
+  }
+  visit(program, []);
+  return plan;
+}
+function applyTemplateStyles(ir, t4) {
+  const walk8 = (node) => {
+    const children = node.children;
+    if (children) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        if (child.kind === "element" && child.tag === "style" && t4.owner) children.splice(i, 1);
+        else walk8(child);
+      }
+    }
+    if (t4.scope && node.kind === "element" && node.tag !== "style" && node.props && !node.props.some((p) => p.name === SCOPE_ATTR)) {
+      node.props.unshift({ name: SCOPE_ATTR, kind: "attr", literal: t4.scope });
+    }
+  };
+  walk8(ir);
+}
+function staticMember(cls, name) {
+  return cls.body.body.find(
+    (m) => m.type === "ClassProperty" && m.static && (m.key.type === "Identifier" && m.key.name === name || m.key.type === "StringLiteral" && m.key.value === name)
+  );
+}
+function finishShadowStyles(plan, code, moduleId) {
+  const edits = [];
+  const imports = [];
+  let next = 0;
+  const importOf = (specifier) => {
+    const local = `__fxShadow${next++}`;
+    imports.push(`import ${local} from ${JSON.stringify(specifier)};
+`);
+    return local;
+  };
+  for (const shadow of plan.shadowClasses.values()) {
+    const blocks = shadow.indexes.map((i) => importOf(`${moduleId}?fx-style&index=${i}&inline&lang.css`));
+    let value;
+    const prop = shadow.styles;
+    if (prop?.value) {
+      const start = prop.value.start;
+      let text = code.slice(start, prop.value.end);
+      const replacements = [];
+      walkIdentifiers(prop.value, (id) => {
+        const local = plan.names?.literals.has(id.name) ? importOf(`${moduleId}?fx-literal=${id.name}&inline&lang.css`) : plan.names?.imports.has(id.name) && !/\.css(\?|$)/.test(plan.names.imports.get(id.name).source) ? importOf(`${plan.names.imports.get(id.name).source}?fx-literal=${plan.names.imports.get(id.name).name}&inline&lang.css`) : void 0;
+        if (local) replacements.push({ at: id.start - start, length: id.name.length, with: local });
+      });
+      for (const r of replacements.sort((a, b) => b.at - a.at)) text = text.slice(0, r.at) + r.with + text.slice(r.at + r.length);
+      value = text;
+    }
+    if (!blocks.length && value === void 0) continue;
+    if (prop?.value) {
+      const merged = blocks.length ? `[${value}, ${blocks.join(", ")}]` : value;
+      edits.push({ start: prop.value.start, end: prop.value.end, code: merged });
+    } else if (blocks.length) {
+      const open = shadow.node.body.start + 1;
+      edits.push({ start: open, end: open, code: ` static styles = [${blocks.join(", ")}];` });
+    }
+  }
+  if (imports.length) edits.push({ start: 0, end: 0, code: imports.join("") });
+  return edits;
+}
+function walkIdentifiers(node, visit) {
+  if (!node || typeof node !== "object") return;
+  if (node.type === "Identifier") return visit(node);
+  if (node.type === "MemberExpression") return walkIdentifiers(node.object, visit);
+  if (node.type === "ObjectProperty") return walkIdentifiers(node.value, visit);
+  for (const key of Object.keys(node)) {
+    if (key === "loc") continue;
+    const value = node[key];
+    if (Array.isArray(value)) for (const v of value) walkIdentifiers(v, visit);
+    else if (value && typeof value === "object" && "type" in value) walkIdentifiers(value, visit);
+  }
+}
+function isStyle(node) {
+  const name = node.openingElement.name;
+  return name.type === "JSXIdentifier" && name.name === "style";
+}
+function isScoped(node) {
+  return node.openingElement.attributes.some((a) => a.type === "JSXAttribute" && a.name.type === "JSXIdentifier" && a.name.name === "scoped");
+}
+function templateBlocks(quasi) {
+  const blocks = [];
+  let open = null;
+  quasi.quasis.forEach((q, i) => {
+    const raw = q.value.raw;
+    let from = 0;
+    while (from <= raw.length) {
+      if (!open) {
+        const tag = /<style\b([^>]*)>/g;
+        tag.lastIndex = from;
+        const m = tag.exec(raw);
+        if (!m) break;
+        open = { quasis: [], expressions: [], scoped: /\bscoped\b/.test(m[1]) };
+        from = m.index + m[0].length;
+      }
+      const close = raw.indexOf("</style", from);
+      open.quasis.push(slicePiece(q, raw, from, close === -1 ? raw.length : close));
+      if (close === -1) break;
+      blocks.push(open);
+      open = null;
+      from = close;
+    }
+    const expr = quasi.expressions[i];
+    if (open && expr) open.expressions.push(expr);
+  });
+  return blocks;
+}
+function slicePiece(q, raw, from, to) {
+  const text = raw.slice(from, to);
+  const start = q.loc?.start;
+  if (!start) return { type: "TemplateElement", value: { raw: text, cooked: text } };
+  const before = raw.slice(0, from).split("\n");
+  const line = start.line + before.length - 1;
+  const column = before.length > 1 ? before[before.length - 1].length : start.column + from;
+  return { type: "TemplateElement", value: { raw: text, cooked: text }, loc: { start: { line, column } } };
+}
+function blockPieces(node) {
+  const meaningful = node.children.filter((c) => !(c.type === "JSXText" && !c.value.trim()));
+  if (meaningful.length === 0) return { quasis: [], expressions: [] };
+  if (meaningful.length !== 1) return null;
+  const only = meaningful[0];
+  if (only.type !== "JSXExpressionContainer") return null;
+  const expr = only.expression;
+  if (expr.type === "StringLiteral") return { quasis: [{ type: "TemplateElement", value: { raw: expr.value, cooked: expr.value } }], expressions: [] };
+  if (expr.type === "TemplateLiteral") return { quasis: expr.quasis, expressions: expr.expressions };
+  return null;
+}
+function findLiterals(program, modules, plan, intrinsic) {
+  const literals = /* @__PURE__ */ new Map();
+  const imports = /* @__PURE__ */ new Map();
+  const tags = new Set(intrinsic);
+  for (const statement of program.body ?? []) {
+    if (statement.type !== "ImportDeclaration") continue;
+    const source = statement.source.value;
+    const specifiers = statement.specifiers;
+    for (const sp of specifiers) {
+      if (sp.type === "ImportSpecifier") imports.set(sp.local.name, { source, name: sp.imported.name ?? sp.imported.value });
+    }
+    if (!modules.includes(source)) continue;
+    const css = specifiers.find((sp) => sp.type === "ImportSpecifier" && (sp.imported.name ?? sp.imported.value) === "css");
+    if (!css) continue;
+    const local = css.local.name;
+    tags.add(local);
+    imports.delete(local);
+    plan.edits.push({ start: statement.start, end: statement.end, code: importWithout(statement, css) });
+  }
+  if (tags.size === 0) return { literals, imports };
+  const visit = (node) => {
+    if (!node || typeof node !== "object") return;
+    if (node.type === "VariableDeclarator" && node.id.type === "Identifier" && node.init?.type === "TaggedTemplateExpression" && node.init.tag.type === "Identifier" && tags.has(node.init.tag.name)) {
+      literals.set(node.id.name, node.init);
+    }
+    for (const key of Object.keys(node)) {
+      if (key === "loc") continue;
+      const value = node[key];
+      if (Array.isArray(value)) for (const v of value) visit(v);
+      else if (value && typeof value === "object" && "type" in value) visit(value);
+    }
+  };
+  visit(program);
+  return { literals, imports };
+}
+function importWithout(statement, removed) {
+  const rest = statement.specifiers.filter((sp) => sp !== removed);
+  const source = JSON.stringify(statement.source.value);
+  if (rest.length === 0) return "";
+  const def = rest.find((sp) => sp.type === "ImportDefaultSpecifier");
+  const ns = rest.find((sp) => sp.type === "ImportNamespaceSpecifier");
+  const named = rest.filter((sp) => sp.type === "ImportSpecifier").map((sp) => {
+    const imported = sp.imported.name ?? JSON.stringify(sp.imported.value);
+    return imported === sp.local.name ? imported : `${imported} as ${sp.local.name}`;
+  });
+  const parts = [def?.local.name, ns ? `* as ${ns.local.name}` : void 0, named.length ? `{ ${named.join(", ")} }` : void 0].filter(Boolean);
+  return `import ${parts.join(", ")} from ${source};`;
+}
+function functionName(fn, named) {
+  if ((fn.type === "FunctionDeclaration" || fn.type === "FunctionExpression") && fn.id) return fn.id.name;
+  return named.get(fn) ?? "anonymous";
+}
+function hash(text) {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+function scopeNodes(nodes, id, warn = () => {
+}) {
+  return nodes.map((node) => {
+    if (node.kind === "rule") return { ...node, selector: scopeSelector(node.selector, id, warn) };
+    if (node.kind === "at-rule" && !OPAQUE.test(node.name)) return { ...node, nodes: scopeNodes(node.nodes, id, warn) };
+    return node;
+  });
+}
+function scopeSelector(selector, id, warn = () => {
+}) {
+  return splitTop(selector, ",").map((complex) => scopeComplex(complex.trim(), `[${SCOPE_ATTR}="${id}"]`, warn)).join(", ");
+}
+function scopeComplex(selector, attr, warn) {
+  if (/:host\b|::slotted\(/.test(selector)) {
+    warn(`\`${selector}\` only means something in a shadow root; in a light-DOM component it is left as written.`);
+    return selector;
+  }
+  const parts = compounds(selector);
+  const deep = parts.findIndex((p) => p.text.startsWith(":deep("));
+  if (deep !== -1) {
+    const inner = unwrap(parts[deep].text, ":deep(");
+    const before = parts.slice(0, deep);
+    if (before.length === 0) return `${attr} ${inner}`;
+    const scopedBefore = scopeAt(before, before.length - 1, attr);
+    return `${join2(scopedBefore)} ${inner}`;
+  }
+  let target = -1;
+  for (let i = parts.length - 1; i >= 0; i--) {
+    if (!parts[i].text.startsWith(":global(")) {
+      target = i;
+      break;
+    }
+  }
+  const out = target === -1 ? parts : scopeAt(parts, target, attr);
+  return join2(out.map((p) => p.text.startsWith(":global(") ? { ...p, text: unwrap(p.text, ":global(") } : p));
+}
+function scopeAt(parts, index, attr) {
+  return parts.map((p, i) => i === index ? { ...p, text: insertAttr(p.text, attr) } : p);
+}
+function insertAttr(compound, attr) {
+  let depth = 0;
+  let quote = "";
+  for (let i = 0; i < compound.length; i++) {
+    const c = compound[i];
+    if (quote) {
+      if (c === "\\") i++;
+      else if (c === quote) quote = "";
+      continue;
+    }
+    if (c === "\\") {
+      i++;
+      continue;
+    }
+    if (c === '"' || c === "'") quote = c;
+    else if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === ":" && depth === 0 && i > 0) return compound.slice(0, i) + attr + compound.slice(i);
+  }
+  return compound + attr;
+}
+function compounds(selector) {
+  const out = [];
+  let depth = 0;
+  let quote = "";
+  let current = "";
+  let combinator = "";
+  const push = () => {
+    if (current.trim()) out.push({ combinator: out.length ? combinator || " " : "", text: current.trim() });
+    current = "";
+    combinator = "";
+  };
+  for (let i = 0; i < selector.length; i++) {
+    const c = selector[i];
+    if (quote) {
+      current += c;
+      if (c === "\\") current += selector[++i] ?? "";
+      else if (c === quote) quote = "";
+      continue;
+    }
+    if (c === "\\") {
+      current += c + (selector[++i] ?? "");
+      continue;
+    }
+    if (c === '"' || c === "'") quote = c;
+    if (c === "(" || c === "[") depth++;
+    if (c === ")" || c === "]") depth--;
+    if (depth === 0 && (c === ">" || c === "+" || c === "~")) {
+      push();
+      combinator = c;
+      continue;
+    }
+    if (depth === 0 && /\s/.test(c)) {
+      if (current.trim()) {
+        const keep = combinator;
+        push();
+        combinator = keep;
+      }
+      continue;
+    }
+    current += c;
+  }
+  push();
+  return out;
+}
+function join2(parts) {
+  return parts.map((p, i) => i === 0 ? p.text : p.combinator === " " ? ` ${p.text}` : ` ${p.combinator} ${p.text}`).join("");
+}
+function unwrap(text, prefix) {
+  return text.slice(prefix.length, text.lastIndexOf(")")).trim() + text.slice(text.lastIndexOf(")") + 1);
+}
+function splitTop(selector, separator) {
+  const parts = [];
+  let depth = 0;
+  let quote = "";
+  let start = 0;
+  for (let i = 0; i < selector.length; i++) {
+    const c = selector[i];
+    if (quote) {
+      if (c === "\\") i++;
+      else if (c === quote) quote = "";
+    } else if (c === '"' || c === "'") quote = c;
+    else if (c === "\\") i++;
+    else if (c === "(" || c === "[") depth++;
+    else if (c === ")" || c === "]") depth--;
+    else if (c === separator && depth === 0) {
+      parts.push(selector.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(selector.slice(start));
+  return parts.filter((p) => p.trim());
+}
+function shiftLoc(node, source, start) {
+  const loc = node.loc && node.loc.source === source ? { source, line: start.line + node.loc.line - 1, column: node.loc.line === 1 ? start.column + node.loc.column : node.loc.column } : node.loc;
+  if (node.kind === "rule" || node.kind === "at-rule") return { ...node, loc, nodes: node.nodes.map((n) => shiftLoc(n, source, start)) };
+  return { ...node, loc };
+}
+function dropLoc(node) {
+  const { loc: _loc, ...rest } = node;
+  if (rest.kind === "rule" || rest.kind === "at-rule") return { ...rest, nodes: rest.nodes.map(dropLoc) };
+  return rest;
+}
+function printStyleWithMap(nodes, minify, sourceName, module2) {
+  const lines = [[]];
+  let css = "";
+  let column = 0;
+  const emit = (text) => {
+    for (const ch of text) {
+      css += ch;
+      if (ch === "\n") {
+        lines.push([]);
+        column = 0;
+      } else column++;
+    }
+  };
+  const mark = (loc) => {
+    if (loc && loc.source === sourceName) lines[lines.length - 1].push([column, 0, loc.line - 1, loc.column]);
+  };
+  const write = (node, depth) => {
+    const pad = minify ? "" : "  ".repeat(depth);
+    const nl = minify ? "" : "\n";
+    const sp = minify ? "" : " ";
+    emit(pad);
+    mark(node.loc);
+    if (node.kind === "declaration") {
+      emit(`${node.property}:${sp}${node.value}${node.important ? `${sp}!important` : ""};${nl}`);
+    } else if (node.kind === "raw") {
+      emit(`${node.text}${nl}`);
+    } else {
+      emit(`${node.kind === "rule" ? node.selector : `@${node.name}${node.params ? " " + node.params : ""}`}${sp}{${nl}`);
+      for (const child of node.nodes) write(child, depth + 1);
+      emit(`${pad}}${nl}`);
+    }
+  };
+  for (const node of nodes) write(node, 0);
+  return { css, map: { version: 3, sources: [module2.id], sourcesContent: [module2.code], names: [], mappings: (0, import_sourcemap_codec.encode)(lines) } };
+}
+function printStyle(nodes, minify = false) {
+  const out = [];
+  const write = (node, depth) => {
+    const pad = minify ? "" : "  ".repeat(depth);
+    const nl = minify ? "" : "\n";
+    const sp = minify ? "" : " ";
+    if (node.kind === "declaration") {
+      out.push(`${pad}${node.property}:${sp}${node.value}${node.important ? `${sp}!important` : ""};${nl}`);
+    } else if (node.kind === "raw") {
+      out.push(`${pad}${node.text}${nl}`);
+    } else {
+      const header = node.kind === "rule" ? node.selector : `@${node.name}${node.params ? " " + node.params : ""}`;
+      out.push(`${pad}${header}${sp}{${nl}`);
+      for (const child of node.nodes) write(child, depth + 1);
+      out.push(`${pad}}${nl}`);
+    }
+  };
+  for (const node of nodes) write(node, 0);
+  return out.join("");
+}
+var import_sourcemap_codec, SCOPE_ATTR, FUNCTIONS, OPAQUE;
+var init_styles = __esm({
+  "src/transform/styles.ts"() {
+    "use strict";
+    import_sourcemap_codec = require("@jridgewell/sourcemap-codec");
+    SCOPE_ATTR = "data-fx-s";
+    FUNCTIONS = /* @__PURE__ */ new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression", "ObjectMethod", "ClassMethod"]);
+    OPAQUE = /(^|-)keyframes$|^font-face$|^property$|^counter-style$|^page$|^font-feature-values$/;
+  }
+});
+
 // src/lower/compile-template.ts
 function compilePieces(pieces, holes, options = {}) {
   const used = /* @__PURE__ */ new Set();
@@ -2677,6 +3713,7 @@ function compilePieces(pieces, holes, options = {}) {
     ...options.sourceFile ? { sourceFile: options.sourceFile } : {},
     ...options.positionAt ? { positionAt: options.positionAt } : {}
   });
+  if (options.templateStyles) applyTemplateStyles(ir, options.templateStyles);
   analyzeStatic(ir);
   resolveComponentSources(ir, {
     resolver: createComponentResolver(options.resolve ?? []),
@@ -2699,6 +3736,7 @@ function compilePieces(pieces, holes, options = {}) {
 var init_compile_template = __esm({
   "src/lower/compile-template.ts"() {
     "use strict";
+    init_styles();
     init_analyze_static();
     init_collapse_strategies();
     init_imperative();
@@ -3231,8 +4269,8 @@ function isJsxRoot(node, parent, key) {
   if (!isJsx(node)) return false;
   return !(parent && isJsx(parent) && key === "children");
 }
-function isTemplateTag(node, litTag) {
-  return node.type === "TaggedTemplateExpression" && node.tag?.type === "Identifier" && (node.tag.name === litTag || node.tag.name === "svg");
+function isTemplateTag(node, tags) {
+  return node.type === "TaggedTemplateExpression" && node.tag?.type === "Identifier" && tags.has(node.tag.name);
 }
 function outermost(list) {
   return list.filter(
@@ -3378,24 +4416,30 @@ function transformTemplates(code, id, options = {}) {
   const wantsJsx = format !== "lit";
   const mayHaveTemplate = wantsLit && (code.includes(`${litTag}\``) || code.includes("svg`"));
   const wantsIntrinsics = options.intrinsics !== false && mayHaveIntrinsic(code);
-  const wantsSources = options.sourceLocations === true && mayHaveReactiveCall(code);
+  const wantsSources = options.sourceLocations === true && mayHaveSourceMarks(code);
   const sourceName = relativeToRoot(id, options.sourceRoot);
-  if (!mayHaveTemplate && !(wantsJsx && code.includes("<")) && !wantsIntrinsics && !wantsSources) return null;
+  const wantsStyles = options.styles !== void 0 && (code.includes("<style") || code.includes("css`"));
+  if (!mayHaveTemplate && !(wantsJsx && code.includes("<")) && !wantsIntrinsics && !wantsSources && !wantsStyles) return null;
   const ast = (0, import_parser2.parse)(code, {
     sourceType: "module",
     plugins: ["jsx", "typescript"],
     errorRecovery: true
   });
+  const intrinsicTags = options.intrinsics === false ? /* @__PURE__ */ new Map() : tagIntrinsics(moduleBindings(ast.program));
+  const templateTags = /* @__PURE__ */ new Map([[litTag, "html"], ["svg", "svg"]]);
+  for (const [name, tag] of intrinsicTags) if (tag !== "css") templateTags.set(name, tag);
+  const cssTags = [...intrinsicTags].filter(([, tag]) => tag === "css").map(([name]) => name);
   const found = [];
   walk7(ast.program, (n, parent, key) => {
-    if (wantsLit && isTemplateTag(n, litTag)) found.push(n);
+    if (wantsLit && isTemplateTag(n, templateTags)) found.push(n);
     else if (wantsJsx && isJsxRoot(n, parent, key)) found.push(n);
   });
   const props = options.propsDestructure === false ? { edits: [], diagnostics: [], used: /* @__PURE__ */ new Set() } : collectPropsEdits(ast.program, code, { runtimeModule: options.runtimeModule });
   const intrinsics = options.intrinsics === false ? { edits: [], diagnostics: [], imports: /* @__PURE__ */ new Map() } : collectIntrinsicEdits(ast.program);
   if (intrinsics.edits.length) avoidBindingClashes(ast.program, intrinsics, moduleBindings(ast.program));
   const sources = options.sourceLocations === true ? collectSourceEdits(ast.program, sourceName) : { edits: [], marked: 0 };
-  const silent = found.length === 0 && props.edits.length === 0 && sources.edits.length === 0 && intrinsics.edits.length === 0 && intrinsics.diagnostics.length === 0 && props.diagnostics.length === 0;
+  const styles = wantsStyles ? collectStyles(ast.program, sourceName, options.styles, { html: templateTags, css: cssTags }, { id, code }) : void 0;
+  const silent = found.length === 0 && props.edits.length === 0 && sources.edits.length === 0 && intrinsics.edits.length === 0 && intrinsics.diagnostics.length === 0 && props.diagnostics.length === 0 && !styles?.edits.length && !styles?.diagnostics.length;
   if (silent) return null;
   found.sort((a, b) => b.start - a.start || a.end - b.end);
   const used = new Set(props.used);
@@ -3409,20 +4453,32 @@ function transformTemplates(code, id, options = {}) {
     declared: declaredNames(ast.program)
   };
   const hoisted = /* @__PURE__ */ new Map();
-  const edits = [...props.edits, ...intrinsics.edits, ...sources.edits];
+  const edits = [...props.edits, ...intrinsics.edits, ...sources.edits, ...styles?.edits ?? []];
   for (const node of found) {
     const nested = found.some(
       (o) => o !== node && o.start <= node.start && o.end >= node.end && o.end - o.start > node.end - node.start
     );
     if (isJsx(node)) {
-      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName) });
+      edits.push({ start: node.start, end: node.end, code: compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceName, styles) });
       continue;
     }
     const holes = node.quasi.expressions.map(
       (e) => bindHole2(code, e, edits, options.sourceLocations === true)
     );
+    const scope = styles?.scopes.find((s) => node.start >= s.start && node.end <= s.end)?.value;
+    const owner = styles?.templateOwners.get(node.start);
+    const templateStyles = options.styles && styles && (scope || owner) ? {
+      options: options.styles,
+      ...scope ? { scope } : {},
+      ...owner ? { owner } : {},
+      line: node.loc?.start.line ?? 0,
+      column: node.loc?.start.column ?? 0,
+      styles: styles.styles,
+      diagnostics: styles.diagnostics
+    } : void 0;
     const result = compilePieces(toPieces(node), holes, {
       ...options,
+      ...templateStyles ? { templateStyles } : {},
       hoistTemplates: true,
       // A tag inside a template gets the same mark a JSX tag does. Without one, the nodes it
       // makes are the only ones in the module carrying no mark, and they take whichever was
@@ -3431,12 +4487,13 @@ function transformTemplates(code, id, options = {}) {
       // Same defaults as the plugin, so moving a build over is not a rendering change.
       templateClone: options.templateClone ?? true,
       partialTemplates: nested ? false : options.partialTemplates ?? true,
-      svg: node.tag.name === "svg"
+      svg: templateTags.get(node.tag.name) === "svg"
     });
     for (const symbol of result.imports) used.add(symbol);
     collectNeeds(result.ir, needs);
     edits.push({ start: node.start, end: node.end, code: adoptTemplates2(result.code, result.templates, hoisted) });
   }
+  if (styles && options.styles) edits.push(...finishShadowStyles(styles, code, id));
   const out = new import_magic_string2.default(code);
   for (const e of outermost(edits)) {
     if (e.start === e.end) out.appendLeft(e.start, e.code);
@@ -3494,13 +4551,19 @@ function transformTemplates(code, id, options = {}) {
     ...loadDiagnostics.length ? { loadDiagnostics } : {},
     ...unresolvedDiagnostics.length ? { unresolvedDiagnostics } : {},
     ...props.diagnostics.length ? { propsDiagnostics: props.diagnostics } : {},
-    ...intrinsics.diagnostics.length ? { intrinsicDiagnostics: intrinsics.diagnostics } : {}
+    ...intrinsics.diagnostics.length ? { intrinsicDiagnostics: intrinsics.diagnostics } : {},
+    ...styles?.styles.length ? { styles: styles.styles } : {},
+    ...styles?.diagnostics.length ? { styleDiagnostics: styles.diagnostics } : {},
+    ...styles?.literals.length ? { styleLiterals: styles.literals } : {},
+    ...styles?.references.length ? { styleReferences: styles.references } : {}
   };
 }
-function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile) {
+function compileJsx(code, node, edits, nested, used, needs, hoisted, options, sourceFile, styles) {
   const ir = buildJsxIR(node, {
     code: (n) => slice(code, n.start, n.end, edits),
     used,
+    ...styles?.scopes.length ? { scopes: styles.scopes } : {},
+    ...styles?.drop.size ? { dropStyles: styles.drop } : {},
     ...options.sourceLocations === true && sourceFile ? { sourceFile } : {}
   });
   analyzeStatic(ir);
@@ -3586,6 +4649,7 @@ var init_templates = __esm({
     init_props();
     init_intrinsics2();
     init_source_locations();
+    init_styles();
     init_intrinsics();
     init_reactive_bindings();
     init_builtins();
@@ -3628,14 +4692,14 @@ var init_transform = __esm({
 });
 
 // src/transform/server-fn-id.ts
-function hash(s) {
+function hash2(s) {
   let h = 5381;
   for (let i = 0; i < s.length; i++) h = h * 33 ^ s.charCodeAt(i);
   return (h >>> 0).toString(16);
 }
 function serverFnId(filename, root, index) {
   const rel = (filename || "unknown").replace(root ? root + "/" : "", "");
-  return `${hash(rel)}:${index}`;
+  return `${hash2(rel)}:${index}`;
 }
 var init_server_fn_id = __esm({
   "src/transform/server-fn-id.ts"() {
@@ -3733,7 +4797,7 @@ var server_fns_exports = {};
 __export(server_fns_exports, {
   transformServerFns: () => transformServerFns
 });
-function directive(node) {
+function directive2(node) {
   if (!FUNCTION_TYPES.has(node.type)) return null;
   const body = node.body;
   if (!body || body.type !== "BlockStatement") return null;
@@ -3749,7 +4813,7 @@ function findServerFns(node, out) {
     return;
   }
   if (typeof node.type === "string") {
-    const found = directive(node);
+    const found = directive2(node);
     if (found) {
       out.push({ fn: node, directive: found });
       return;
@@ -3891,7 +4955,7 @@ function componentGlobals(rules, options = {}) {
       resolved.set(name, target);
     }
   }
-  const usableIntrinsics = intrinsics ? Object.entries(INTRINSICS).filter(([, i]) => {
+  const usableIntrinsics = intrinsics ? Object.entries({ ...INTRINSICS, ...TAG_INTRINSICS }).filter(([, i]) => {
     const pkg = packageOf(i.module);
     return !available || !pkg || available.has(pkg);
   }) : [];
@@ -3954,11 +5018,11 @@ function coveredByInclude(root, target) {
   }
   if (config.extends !== void 0) return void 0;
   if (!Array.isArray(config.include)) return true;
-  const relative2 = relativePosix(root, target);
+  const relative3 = relativePosix(root, target);
   return config.include.some((entry) => {
     if (typeof entry !== "string") return false;
     const pattern = entry.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*\//g, "(?:.*/)?").replace(/\*/g, "[^/]*");
-    return new RegExp(`^${pattern}(?:/.*)?$`).test(relative2);
+    return new RegExp(`^${pattern}(?:/.*)?$`).test(relative3);
   });
 }
 function relativePosix(from, to) {
@@ -4044,13 +5108,169 @@ function writeComponentGlobals(options, root) {
 }
 function warnIfUnreachable(root, target) {
   if (coveredByInclude(root, target) !== false) return void 0;
-  const relative2 = relativePosix(root, target);
-  return `[fluixi] ${relative2} is not covered by "include" in tsconfig.json, so TypeScript will ignore it and every resolved component stays "Cannot find name". Add "${relative2}" to "include".`;
+  const relative3 = relativePosix(root, target);
+  return `[fluixi] ${relative3} is not covered by "include" in tsconfig.json, so TypeScript will ignore it and every resolved component stays "Cannot find name". Add "${relative3}" to "include".`;
 }
 
-// src/integrations.ts
+// src/vite-styles.ts
 var import_node_fs2 = require("node:fs");
 var import_node_path2 = require("node:path");
+var STYLE_ID = /\?fx-style&index=(\d+)(?:&inline)?&lang\.css$/;
+var LITERAL_ID = /\?fx-literal=([\w$]+)&inline&lang\.css$/;
+var styleId = (file, index) => `${file}?fx-style&index=${index}&lang.css`;
+var loader = (name) => `const href = new URL(${JSON.stringify(`./${name}`)}, import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(\`link[data-fx-css="\${href}"]\`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.fxCss = href;
+  document.head.appendChild(link);
+}
+`;
+function createComponentStyles(compile) {
+  let api;
+  let server;
+  let root = process.cwd();
+  let library;
+  const emitted = /* @__PURE__ */ new Map();
+  const fileOf = (id) => (0, import_node_fs2.existsSync)(id) ? id : (0, import_node_path2.join)(root, id);
+  const cache = /* @__PURE__ */ new Map();
+  const resolveReference = async (ref, importer, ctx, seen) => {
+    const resolved = await ctx.resolve?.(ref.source, importer);
+    if (!resolved) return null;
+    const file = resolved.id.split("?")[0];
+    if (seen.has(file)) return null;
+    let code;
+    try {
+      code = (0, import_node_fs2.readFileSync)(fileOf(file), "utf8");
+    } catch {
+      return null;
+    }
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const imported = await resolveAll(result.styleReferences, file, ctx, /* @__PURE__ */ new Set([...seen, file]));
+      result = compile(code, file, { ...styles, imported });
+    }
+    const literal = result?.styleLiterals?.find((l) => l.name === ref.name);
+    return literal ? styles.process(literal.css, file) : null;
+  };
+  const resolveAll = async (refs, importer, ctx, seen) => {
+    const imported = /* @__PURE__ */ new Map();
+    for (const ref of refs) {
+      const nodes = await resolveReference(ref, importer, ctx, seen);
+      if (nodes) imported.set(`${ref.source}#${ref.name}`, nodes);
+    }
+    return imported;
+  };
+  const run = async (code, id, ctx) => {
+    const file = fileOf(id);
+    const styles = api.styles(file);
+    let result = compile(code, file, styles);
+    if (result?.styleReferences?.length) {
+      const imported = await resolveAll(result.styleReferences, id, ctx, /* @__PURE__ */ new Set([file]));
+      result = compile(code, file, { ...styles, imported });
+    }
+    const css = (result?.styles ?? []).map((s) => s.css);
+    const maps = (result?.styles ?? []).map((s) => s.map ?? null);
+    const literals = new Map((result?.styleLiterals ?? []).map((l) => [l.name, l.css]));
+    const before = cache.get(file);
+    cache.set(file, { source: code, css, maps, literals });
+    if (server && before) {
+      for (let i = 0; i < css.length; i++) {
+        if (before.css[i] === css[i]) continue;
+        const mod = server.moduleGraph.getModuleById(styleId(id, i));
+        if (mod) void server.reloadModule(mod);
+      }
+    }
+    const page = (result?.styles ?? []).flatMap((s, i) => s.shadow ? [] : [i]);
+    if (!result || page.length === 0) return result;
+    if (library) {
+      const name = `${(0, import_node_path2.basename)(file, (0, import_node_path2.extname)(file))}.css`;
+      if ((0, import_node_fs2.existsSync)((0, import_node_path2.join)((0, import_node_path2.dirname)(file), name))) {
+        throw new Error(`[fluixi] ${file} has <style> blocks, and ${name} next to it would be overwritten by their CSS. Rename one of them.`);
+      }
+      const out = (0, import_node_path2.join)((0, import_node_path2.relative)(library, (0, import_node_path2.dirname)(file)), name);
+      emitted.set(out, page.map((i) => css[i]).join("\n"));
+      emitted.set(`${out}.js`, loader(name));
+      return { ...result, code: `${result.code}
+import ${JSON.stringify(`./${name}`)};` };
+    }
+    const imports = page.map((i) => `
+import ${JSON.stringify(styleId(id, i))};`).join("");
+    return { ...result, code: result.code + imports };
+  };
+  return {
+    /** Looks for @fluixi-css/vite among the plugins; without it component styles stay off. */
+    connect(plugins, projectRoot) {
+      if (projectRoot) root = projectRoot;
+      api = (plugins ?? []).map((p) => p?.api?.fluixiCss).find((a) => Boolean(a));
+      api?.useComponentStyles();
+    },
+    /** Turns on library output, from the directory of a `build.lib` entry. */
+    setLibrary(entryDir) {
+      library = entryDir;
+    },
+    /** A library build's style import: left for the package's consumer to bundle. */
+    isLibraryImport(id, importer) {
+      if (library === void 0 || !importer || !id.startsWith("./") || !id.endsWith(".css")) return false;
+      return emitted.has((0, import_node_path2.join)((0, import_node_path2.relative)(library, (0, import_node_path2.dirname)(fileOf(importer))), id));
+    },
+    /** The style files a library build writes, by path under the output directory. */
+    libraryFiles() {
+      return emitted;
+    },
+    get active() {
+      return api !== void 0;
+    },
+    setServer(dev) {
+      server = dev;
+    },
+    isStyle(id) {
+      return STYLE_ID.test(id) || LITERAL_ID.test(id);
+    },
+    /**
+     * A style request as the module id Vite should keep: the file's absolute path and the
+     * query. Vite invalidates a module when the file its id names changes, so a root-relative id
+     * (`/src/card.tsx?fx-style…`, which is how a request arrives before the component's imports
+     * were analysed) was never invalidated, and an edited block kept its old CSS until restart.
+     */
+    resolveId(id) {
+      const at = id.indexOf("?");
+      return fileOf(id.slice(0, at)) + id.slice(at);
+    },
+    compile: run,
+    /**
+     * A block's CSS and its map back to the module, compiling the module again when the cache
+     * does not match the file.
+     */
+    async load(id, ctx) {
+      const match = STYLE_ID.exec(id);
+      const literal = LITERAL_ID.exec(id);
+      if (!match && !literal || !api) return null;
+      const file = id.slice(0, id.indexOf("?"));
+      let source;
+      try {
+        source = (0, import_node_fs2.readFileSync)(fileOf(file), "utf8");
+      } catch {
+        return null;
+      }
+      if (cache.get(fileOf(file))?.source !== source) await run(source, file, ctx);
+      const entry = cache.get(fileOf(file));
+      if (literal) {
+        const css = entry?.literals.get(literal[1]);
+        if (css === void 0) throw new Error(`[fluixi] ${literal[1]} in ${file} is not a css\`\` value, so it cannot be a shadow root's styles.`);
+        return { code: css, map: null };
+      }
+      const index = Number(match[1]);
+      return { code: entry?.css[index] ?? "", map: entry?.maps[index] ?? null };
+    }
+  };
+}
+
+// src/integrations.ts
+var import_node_fs3 = require("node:fs");
+var import_node_path3 = require("node:path");
 async function createBabelPlugin(options = {}) {
   let pluginModule = null;
   try {
@@ -4115,6 +5335,11 @@ var RETIRED_SUBPATHS = {
   "@fluixi/core/rx": "is gone — import signals and effects from @fluixi/reactive, or the server primitives it resolved to under node from @fluixi/core/server"
 };
 function createVitePlugin(options = {}) {
+  let transformTemplates2;
+  let projectRoot = process.cwd();
+  const componentStyles = createComponentStyles((code, id, styles) => {
+    return transformTemplates2(code, id, { ...transformOptions(options, id), sourceRoot: projectRoot, styles });
+  });
   return {
     name: "vite-fluixi-jsx",
     enforce: "pre",
@@ -4128,14 +5353,32 @@ function createVitePlugin(options = {}) {
     },
     // Written once per build, and on dev-server start, rather than per transform: the
     // set of resolvable names comes from config, so nothing a file does can change it.
-    configResolved(config) {
+    async configResolved(config) {
       const outcome = writeComponentGlobals(options, config?.root ?? process.cwd());
       if (outcome.warning) console.warn(outcome.warning);
+      if (options.babel) return;
+      projectRoot = config?.root ?? projectRoot;
+      componentStyles.connect(config?.plugins, config?.root);
+      const entry = config?.command === "build" && config.build?.lib ? config.build.lib.entry : void 0;
+      const first = typeof entry === "string" ? entry : Array.isArray(entry) ? entry[0] : entry && typeof entry === "object" ? Object.values(entry)[0] : void 0;
+      if (typeof first === "string") componentStyles.setLibrary((0, import_node_path3.dirname)((0, import_node_path3.resolve)(config.root ?? process.cwd(), first)));
+      if (componentStyles.active) ({ transformTemplates: transformTemplates2 } = await Promise.resolve().then(() => (init_transform(), transform_exports)));
+    },
+    generateBundle() {
+      for (const [fileName, source] of componentStyles.libraryFiles()) this.emitFile({ type: "asset", fileName, source });
+    },
+    configureServer(server) {
+      componentStyles.setServer(server);
+    },
+    load(id) {
+      return componentStyles.isStyle(id) ? componentStyles.load(id, this) : null;
     },
     // A subpath we retired resolves to nothing, and the bundler reports that as
     // `Missing "./x" specifier`, which names neither the replacement nor the file
     // that asked. Answer it here, where the rename is known.
     resolveId(id, importer) {
+      if (componentStyles.isStyle(id)) return componentStyles.resolveId(id);
+      if (componentStyles.isLibraryImport(id, importer)) return { id, external: true };
       const moved = RETIRED_SUBPATHS[id];
       if (!moved) return null;
       throw new Error(
@@ -4147,6 +5390,11 @@ function createVitePlugin(options = {}) {
       if (!/\.(jsx|tsx|ts)$/i.test(id)) {
         return null;
       }
+      if (!options.babel && componentStyles.active) {
+        const result = await componentStyles.compile(code, id, this);
+        reportDiagnostics(result, id);
+        return result;
+      }
       if (!options.babel) return compileModule(code, id, options);
       const babelPlugin = await createBabelPlugin(options);
       try {
@@ -4242,6 +5490,7 @@ function reportDiagnostics(result, id) {
   for (const d of r?.unresolvedDiagnostics ?? []) say(d.message);
   for (const d of r?.loadDiagnostics ?? []) say(d.message);
   for (const d of r?.intrinsicDiagnostics ?? []) say(d.message);
+  for (const d of r?.styleDiagnostics ?? []) say(`${d.line}:${d.column + 1} ${d.message}`);
   for (const d of r?.propsDiagnostics ?? []) {
     say(`\`${d.name}\` was left destructured: ${d.message}. It reads once instead of tracking.`);
   }
@@ -4294,8 +5543,8 @@ function createESBuildPlugin(options = {}) {
     name: "esbuild-fluixi-jsx",
     setup(build) {
       build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
-        const { readFileSync: readFileSync3 } = await import("node:fs");
-        const source = readFileSync3(args.path, "utf8");
+        const { readFileSync: readFileSync4 } = await import("node:fs");
+        const source = readFileSync4(args.path, "utf8");
         try {
           const result = await compileModule(source, args.path, options);
           return {
@@ -4323,17 +5572,17 @@ function hasServerDirective(source) {
 function findServerFnModules(dir, out = []) {
   let entries;
   try {
-    entries = (0, import_node_fs2.readdirSync)(dir, { withFileTypes: true });
+    entries = (0, import_node_fs3.readdirSync)(dir, { withFileTypes: true });
   } catch {
     return out;
   }
   for (const e of entries) {
     if (e.name === "node_modules" || e.name === "dist" || e.name.startsWith(".")) continue;
-    const full = (0, import_node_path2.join)(dir, e.name);
+    const full = (0, import_node_path3.join)(dir, e.name);
     if (e.isDirectory()) findServerFnModules(full, out);
     else if (/\.[jt]sx?$/.test(e.name)) {
       try {
-        if (hasServerDirective((0, import_node_fs2.readFileSync)(full, "utf8"))) out.push(full);
+        if (hasServerDirective((0, import_node_fs3.readFileSync)(full, "utf8"))) out.push(full);
       } catch {
       }
     }
@@ -4353,7 +5602,7 @@ function serverFunctionsVitePlugin(options = {}) {
     },
     load(id) {
       if (id !== "\0" + SERVER_FNS_VMOD) return null;
-      const mods = findServerFnModules((0, import_node_path2.join)(root, "src"));
+      const mods = findServerFnModules((0, import_node_path3.join)(root, "src"));
       const setup = `import '@fluixi/start/server-fn-setup';
 `;
       const imports = mods.map((m) => `import ${JSON.stringify(m)};`).join("\n");