tailwind-styled-v4 5.1.15 → 5.1.16

package/dist/runtime-css.js

@@ -45,6 +45,9 @@ async function TwCssInjector(props = {}) {
     fs = await import("fs");
     path = await import("path");
   } catch {
+    warnOnceDev(
+      "TwCssInjector dipanggil tapi gak bisa akses 'node:fs'/'node:path' (kemungkinan jalan di environment non-Node, misal Edge runtime). CSS injection di-skip \u2014 komponen tetap render normal, tapi route CSS lo gak ikut inline."
+    );
     return import_react.default.createElement(import_react.default.Fragment, null);
   }
   const resolvedDir = cssDir ?? path.join(process.cwd(), ".next", "static", "css", "tw");
@@ -53,8 +56,16 @@ async function TwCssInjector(props = {}) {
   try {
     if (fs.existsSync(manifestPath)) {
       manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+    } else {
+      warnOnceDev(
+        `TwCssInjector aktif tapi manifest gak ketemu di "${manifestPath}". CSS injection di-skip diam-diam \u2014 biasanya ini berarti "routeCss: true" belum diset di withTailwindStyled(...) di next.config, atau dev/build server belum sempat generate manifest-nya. Cek konfigurasi sebelum lanjut.`
+      );
+      return import_react.default.createElement(import_react.default.Fragment, null);
     }
-  } catch {
+  } catch (err) {
+    warnOnceDev(
+      `TwCssInjector gagal parse manifest di "${manifestPath}": ${err instanceof Error ? err.message : String(err)}. CSS injection di-skip \u2014 manifest mungkin korup atau lagi setengah ditulis saat dibaca.`
+    );
     return import_react.default.createElement(import_react.default.Fragment, null);
   }
   const cssChunks = [];
@@ -81,6 +92,13 @@ async function TwCssInjector(props = {}) {
 function useTwClasses(classes) {
   return classes;
 }
+var warnedKeys = /* @__PURE__ */ new Set();
+function warnOnceDev(message) {
+  if (process.env.NODE_ENV === "production") return;
+  if (warnedKeys.has(message)) return;
+  warnedKeys.add(message);
+  console.warn(`[tailwind-styled-v4] ${message}`);
+}
 function readFile(fs, filepath) {
   try {
     if (fs.existsSync(filepath)) return fs.readFileSync(filepath, "utf-8");

package/dist/runtime-css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/umbrella/runtime-css.ts","../packages/domain/runtime-css/dist/CssInjector.js"],"sourcesContent":["// Server-safe entry — hanya export TwCssInjector (async RSC) dan useTwClasses.\n// batchedInjector SENGAJA tidak di-export di sini karena punya \"use client\"\n// yang akan membuat Next.js memperlakukan TwCssInjector sebagai Client Component.\n// Runtime CSS injection internal (stateEngine, containerQuery) mengakses\n// @tailwind-styled/runtime-css/batched secara langsung di module level mereka sendiri.\nexport { TwCssInjector, useTwClasses } from \"@tailwind-styled/runtime-css/server\"\n","import React from \"react\";\nasync function TwCssInjector(props = {}) {\n  const { route, includeGlobal = true, minify = true, cssDir } = props;\n  let fs = null;\n  let path = null;\n  try {\n    fs = await import(\"node:fs\");\n    path = await import(\"node:path\");\n  } catch {\n    return React.createElement(React.Fragment, null);\n  }\n  const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\");\n  const manifestPath = path.join(resolvedDir, \"css-manifest.json\");\n  let manifest = {};\n  try {\n    if (fs.existsSync(manifestPath)) {\n      manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"));\n    }\n  } catch {\n    return React.createElement(React.Fragment, null);\n  }\n  const cssChunks = [];\n  if (includeGlobal && manifest.routes?.[\"__global\"]) {\n    const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"]);\n    const css = readFile(fs, globalPath);\n    if (css) cssChunks.push(css);\n  }\n  const targetRoute = route ?? \"/\";\n  if (manifest.routes?.[targetRoute]) {\n    const routePath = path.join(resolvedDir, manifest.routes[targetRoute]);\n    const css = readFile(fs, routePath);\n    if (css) cssChunks.push(css);\n  }\n  if (cssChunks.length === 0) return React.createElement(React.Fragment, null);\n  const combined = cssChunks.join(\"\\n\");\n  const final = minify ? minifyCss(combined) : combined;\n  return React.createElement(\"style\", {\n    dangerouslySetInnerHTML: { __html: final },\n    \"data-tw-route\": targetRoute,\n    \"data-tw-injector\": \"true\"\n  });\n}\nfunction useTwClasses(classes) {\n  return classes;\n}\nfunction readFile(fs, filepath) {\n  try {\n    if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\");\n  } catch {\n  }\n  return null;\n}\nfunction minifyCss(css) {\n  return css.replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\").replace(/\\s+/g, \" \").replace(/\\s*{\\s*/g, \"{\").replace(/\\s*}\\s*/g, \"}\").replace(/\\s*;\\s*/g, \";\").trim();\n}\nexport {\n  TwCssInjector,\n  useTwClasses\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,eAAe,cAAc,QAAQ,CAAC,GAAG;AACvC,QAAM,EAAE,OAAO,gBAAgB,MAAM,SAAS,MAAM,OAAO,IAAI;AAC/D,MAAI,KAAK;AACT,MAAI,OAAO;AACX,MAAI;AACF,SAAK,MAAM,OAAO,IAAS;AAC3B,WAAO,MAAM,OAAO,MAAW;AAAA,EACjC,QAAQ;AACN,WAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,cAAc,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,SAAS,UAAU,OAAO,IAAI;AACrF,QAAM,eAAe,KAAK,KAAK,aAAa,mBAAmB;AAC/D,MAAI,WAAW,CAAC;AAChB,MAAI;AACF,QAAI,GAAG,WAAW,YAAY,GAAG;AAC/B,iBAAW,KAAK,MAAM,GAAG,aAAa,cAAc,OAAO,CAAC;AAAA,IAC9D;AAAA,EACF,QAAQ;AACN,WAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,YAAY,CAAC;AACnB,MAAI,iBAAiB,SAAS,SAAS,UAAU,GAAG;AAClD,UAAM,aAAa,KAAK,KAAK,aAAa,SAAS,OAAO,UAAU,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,UAAU;AACnC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,QAAM,cAAc,SAAS;AAC7B,MAAI,SAAS,SAAS,WAAW,GAAG;AAClC,UAAM,YAAY,KAAK,KAAK,aAAa,SAAS,OAAO,WAAW,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,SAAS;AAClC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,MAAI,UAAU,WAAW,EAAG,QAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAC3E,QAAM,WAAW,UAAU,KAAK,IAAI;AACpC,QAAM,QAAQ,SAAS,UAAU,QAAQ,IAAI;AAC7C,SAAO,aAAAA,QAAM,cAAc,SAAS;AAAA,IAClC,yBAAyB,EAAE,QAAQ,MAAM;AAAA,IACzC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACtB,CAAC;AACH;AACA,SAAS,aAAa,SAAS;AAC7B,SAAO;AACT;AACA,SAAS,SAAS,IAAI,UAAU;AAC9B,MAAI;AACF,QAAI,GAAG,WAAW,QAAQ,EAAG,QAAO,GAAG,aAAa,UAAU,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR;AACA,SAAO;AACT;AACA,SAAS,UAAU,KAAK;AACtB,SAAO,IAAI,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,KAAK;AACjK;","names":["React"]}
+{"version":3,"sources":["../src/umbrella/runtime-css.ts","../packages/domain/runtime-css/dist/CssInjector.js"],"sourcesContent":["// Server-safe entry — hanya export TwCssInjector (async RSC) dan useTwClasses.\n// batchedInjector SENGAJA tidak di-export di sini karena punya \"use client\"\n// yang akan membuat Next.js memperlakukan TwCssInjector sebagai Client Component.\n// Runtime CSS injection internal (stateEngine, containerQuery) mengakses\n// @tailwind-styled/runtime-css/batched secara langsung di module level mereka sendiri.\nexport { TwCssInjector, useTwClasses } from \"@tailwind-styled/runtime-css/server\"\n","import React from \"react\";\nasync function TwCssInjector(props = {}) {\n  const { route, includeGlobal = true, minify = true, cssDir } = props;\n  let fs = null;\n  let path = null;\n  try {\n    fs = await import(\"node:fs\");\n    path = await import(\"node:path\");\n  } catch {\n    warnOnceDev(\n      \"TwCssInjector dipanggil tapi gak bisa akses 'node:fs'/'node:path' (kemungkinan jalan di environment non-Node, misal Edge runtime). CSS injection di-skip \\u2014 komponen tetap render normal, tapi route CSS lo gak ikut inline.\"\n    );\n    return React.createElement(React.Fragment, null);\n  }\n  const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\");\n  const manifestPath = path.join(resolvedDir, \"css-manifest.json\");\n  let manifest = {};\n  try {\n    if (fs.existsSync(manifestPath)) {\n      manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"));\n    } else {\n      warnOnceDev(\n        `TwCssInjector aktif tapi manifest gak ketemu di \"${manifestPath}\". CSS injection di-skip diam-diam \\u2014 biasanya ini berarti \"routeCss: true\" belum diset di withTailwindStyled(...) di next.config, atau dev/build server belum sempat generate manifest-nya. Cek konfigurasi sebelum lanjut.`\n      );\n      return React.createElement(React.Fragment, null);\n    }\n  } catch (err) {\n    warnOnceDev(\n      `TwCssInjector gagal parse manifest di \"${manifestPath}\": ${err instanceof Error ? err.message : String(err)}. CSS injection di-skip \\u2014 manifest mungkin korup atau lagi setengah ditulis saat dibaca.`\n    );\n    return React.createElement(React.Fragment, null);\n  }\n  const cssChunks = [];\n  if (includeGlobal && manifest.routes?.[\"__global\"]) {\n    const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"]);\n    const css = readFile(fs, globalPath);\n    if (css) cssChunks.push(css);\n  }\n  const targetRoute = route ?? \"/\";\n  if (manifest.routes?.[targetRoute]) {\n    const routePath = path.join(resolvedDir, manifest.routes[targetRoute]);\n    const css = readFile(fs, routePath);\n    if (css) cssChunks.push(css);\n  }\n  if (cssChunks.length === 0) return React.createElement(React.Fragment, null);\n  const combined = cssChunks.join(\"\\n\");\n  const final = minify ? minifyCss(combined) : combined;\n  return React.createElement(\"style\", {\n    dangerouslySetInnerHTML: { __html: final },\n    \"data-tw-route\": targetRoute,\n    \"data-tw-injector\": \"true\"\n  });\n}\nfunction useTwClasses(classes) {\n  return classes;\n}\nconst warnedKeys = /* @__PURE__ */ new Set();\nfunction warnOnceDev(message) {\n  if (process.env.NODE_ENV === \"production\") return;\n  if (warnedKeys.has(message)) return;\n  warnedKeys.add(message);\n  console.warn(`[tailwind-styled-v4] ${message}`);\n}\nfunction readFile(fs, filepath) {\n  try {\n    if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\");\n  } catch {\n  }\n  return null;\n}\nfunction minifyCss(css) {\n  return css.replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\").replace(/\\s+/g, \" \").replace(/\\s*{\\s*/g, \"{\").replace(/\\s*}\\s*/g, \"}\").replace(/\\s*;\\s*/g, \";\").trim();\n}\nexport {\n  TwCssInjector,\n  useTwClasses\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,eAAe,cAAc,QAAQ,CAAC,GAAG;AACvC,QAAM,EAAE,OAAO,gBAAgB,MAAM,SAAS,MAAM,OAAO,IAAI;AAC/D,MAAI,KAAK;AACT,MAAI,OAAO;AACX,MAAI;AACF,SAAK,MAAM,OAAO,IAAS;AAC3B,WAAO,MAAM,OAAO,MAAW;AAAA,EACjC,QAAQ;AACN;AAAA,MACE;AAAA,IACF;AACA,WAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,cAAc,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,SAAS,UAAU,OAAO,IAAI;AACrF,QAAM,eAAe,KAAK,KAAK,aAAa,mBAAmB;AAC/D,MAAI,WAAW,CAAC;AAChB,MAAI;AACF,QAAI,GAAG,WAAW,YAAY,GAAG;AAC/B,iBAAW,KAAK,MAAM,GAAG,aAAa,cAAc,OAAO,CAAC;AAAA,IAC9D,OAAO;AACL;AAAA,QACE,oDAAoD,YAAY;AAAA,MAClE;AACA,aAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAAA,IACjD;AAAA,EACF,SAAS,KAAK;AACZ;AAAA,MACE,0CAA0C,YAAY,MAAM,eAAe,QAAQ,IAAI,UAAU,OAAO,GAAG,CAAC;AAAA,IAC9G;AACA,WAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,YAAY,CAAC;AACnB,MAAI,iBAAiB,SAAS,SAAS,UAAU,GAAG;AAClD,UAAM,aAAa,KAAK,KAAK,aAAa,SAAS,OAAO,UAAU,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,UAAU;AACnC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,QAAM,cAAc,SAAS;AAC7B,MAAI,SAAS,SAAS,WAAW,GAAG;AAClC,UAAM,YAAY,KAAK,KAAK,aAAa,SAAS,OAAO,WAAW,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,SAAS;AAClC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,MAAI,UAAU,WAAW,EAAG,QAAO,aAAAA,QAAM,cAAc,aAAAA,QAAM,UAAU,IAAI;AAC3E,QAAM,WAAW,UAAU,KAAK,IAAI;AACpC,QAAM,QAAQ,SAAS,UAAU,QAAQ,IAAI;AAC7C,SAAO,aAAAA,QAAM,cAAc,SAAS;AAAA,IAClC,yBAAyB,EAAE,QAAQ,MAAM;AAAA,IACzC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACtB,CAAC;AACH;AACA,SAAS,aAAa,SAAS;AAC7B,SAAO;AACT;AACA,IAAM,aAA6B,oBAAI,IAAI;AAC3C,SAAS,YAAY,SAAS;AAC5B,MAAI,QAAQ,IAAI,aAAa,aAAc;AAC3C,MAAI,WAAW,IAAI,OAAO,EAAG;AAC7B,aAAW,IAAI,OAAO;AACtB,UAAQ,KAAK,wBAAwB,OAAO,EAAE;AAChD;AACA,SAAS,SAAS,IAAI,UAAU;AAC9B,MAAI;AACF,QAAI,GAAG,WAAW,QAAQ,EAAG,QAAO,GAAG,aAAa,UAAU,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR;AACA,SAAO;AACT;AACA,SAAS,UAAU,KAAK;AACtB,SAAO,IAAI,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,KAAK;AACjK;","names":["React"]}

package/dist/runtime-css.mjs

@@ -8,6 +8,9 @@ async function TwCssInjector(props = {}) {
     fs = await import("fs");
     path = await import("path");
   } catch {
+    warnOnceDev(
+      "TwCssInjector dipanggil tapi gak bisa akses 'node:fs'/'node:path' (kemungkinan jalan di environment non-Node, misal Edge runtime). CSS injection di-skip \u2014 komponen tetap render normal, tapi route CSS lo gak ikut inline."
+    );
     return React.createElement(React.Fragment, null);
   }
   const resolvedDir = cssDir ?? path.join(process.cwd(), ".next", "static", "css", "tw");
@@ -16,8 +19,16 @@ async function TwCssInjector(props = {}) {
   try {
     if (fs.existsSync(manifestPath)) {
       manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+    } else {
+      warnOnceDev(
+        `TwCssInjector aktif tapi manifest gak ketemu di "${manifestPath}". CSS injection di-skip diam-diam \u2014 biasanya ini berarti "routeCss: true" belum diset di withTailwindStyled(...) di next.config, atau dev/build server belum sempat generate manifest-nya. Cek konfigurasi sebelum lanjut.`
+      );
+      return React.createElement(React.Fragment, null);
     }
-  } catch {
+  } catch (err) {
+    warnOnceDev(
+      `TwCssInjector gagal parse manifest di "${manifestPath}": ${err instanceof Error ? err.message : String(err)}. CSS injection di-skip \u2014 manifest mungkin korup atau lagi setengah ditulis saat dibaca.`
+    );
     return React.createElement(React.Fragment, null);
   }
   const cssChunks = [];
@@ -44,6 +55,13 @@ async function TwCssInjector(props = {}) {
 function useTwClasses(classes) {
   return classes;
 }
+var warnedKeys = /* @__PURE__ */ new Set();
+function warnOnceDev(message) {
+  if (process.env.NODE_ENV === "production") return;
+  if (warnedKeys.has(message)) return;
+  warnedKeys.add(message);
+  console.warn(`[tailwind-styled-v4] ${message}`);
+}
 function readFile(fs, filepath) {
   try {
     if (fs.existsSync(filepath)) return fs.readFileSync(filepath, "utf-8");

package/dist/runtime-css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/domain/runtime-css/dist/CssInjector.js"],"sourcesContent":["import React from \"react\";\nasync function TwCssInjector(props = {}) {\n  const { route, includeGlobal = true, minify = true, cssDir } = props;\n  let fs = null;\n  let path = null;\n  try {\n    fs = await import(\"node:fs\");\n    path = await import(\"node:path\");\n  } catch {\n    return React.createElement(React.Fragment, null);\n  }\n  const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\");\n  const manifestPath = path.join(resolvedDir, \"css-manifest.json\");\n  let manifest = {};\n  try {\n    if (fs.existsSync(manifestPath)) {\n      manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"));\n    }\n  } catch {\n    return React.createElement(React.Fragment, null);\n  }\n  const cssChunks = [];\n  if (includeGlobal && manifest.routes?.[\"__global\"]) {\n    const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"]);\n    const css = readFile(fs, globalPath);\n    if (css) cssChunks.push(css);\n  }\n  const targetRoute = route ?? \"/\";\n  if (manifest.routes?.[targetRoute]) {\n    const routePath = path.join(resolvedDir, manifest.routes[targetRoute]);\n    const css = readFile(fs, routePath);\n    if (css) cssChunks.push(css);\n  }\n  if (cssChunks.length === 0) return React.createElement(React.Fragment, null);\n  const combined = cssChunks.join(\"\\n\");\n  const final = minify ? minifyCss(combined) : combined;\n  return React.createElement(\"style\", {\n    dangerouslySetInnerHTML: { __html: final },\n    \"data-tw-route\": targetRoute,\n    \"data-tw-injector\": \"true\"\n  });\n}\nfunction useTwClasses(classes) {\n  return classes;\n}\nfunction readFile(fs, filepath) {\n  try {\n    if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\");\n  } catch {\n  }\n  return null;\n}\nfunction minifyCss(css) {\n  return css.replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\").replace(/\\s+/g, \" \").replace(/\\s*{\\s*/g, \"{\").replace(/\\s*}\\s*/g, \"}\").replace(/\\s*;\\s*/g, \";\").trim();\n}\nexport {\n  TwCssInjector,\n  useTwClasses\n};\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,eAAe,cAAc,QAAQ,CAAC,GAAG;AACvC,QAAM,EAAE,OAAO,gBAAgB,MAAM,SAAS,MAAM,OAAO,IAAI;AAC/D,MAAI,KAAK;AACT,MAAI,OAAO;AACX,MAAI;AACF,SAAK,MAAM,OAAO,IAAS;AAC3B,WAAO,MAAM,OAAO,MAAW;AAAA,EACjC,QAAQ;AACN,WAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,cAAc,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,SAAS,UAAU,OAAO,IAAI;AACrF,QAAM,eAAe,KAAK,KAAK,aAAa,mBAAmB;AAC/D,MAAI,WAAW,CAAC;AAChB,MAAI;AACF,QAAI,GAAG,WAAW,YAAY,GAAG;AAC/B,iBAAW,KAAK,MAAM,GAAG,aAAa,cAAc,OAAO,CAAC;AAAA,IAC9D;AAAA,EACF,QAAQ;AACN,WAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,YAAY,CAAC;AACnB,MAAI,iBAAiB,SAAS,SAAS,UAAU,GAAG;AAClD,UAAM,aAAa,KAAK,KAAK,aAAa,SAAS,OAAO,UAAU,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,UAAU;AACnC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,QAAM,cAAc,SAAS;AAC7B,MAAI,SAAS,SAAS,WAAW,GAAG;AAClC,UAAM,YAAY,KAAK,KAAK,aAAa,SAAS,OAAO,WAAW,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,SAAS;AAClC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,MAAI,UAAU,WAAW,EAAG,QAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAC3E,QAAM,WAAW,UAAU,KAAK,IAAI;AACpC,QAAM,QAAQ,SAAS,UAAU,QAAQ,IAAI;AAC7C,SAAO,MAAM,cAAc,SAAS;AAAA,IAClC,yBAAyB,EAAE,QAAQ,MAAM;AAAA,IACzC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACtB,CAAC;AACH;AACA,SAAS,aAAa,SAAS;AAC7B,SAAO;AACT;AACA,SAAS,SAAS,IAAI,UAAU;AAC9B,MAAI;AACF,QAAI,GAAG,WAAW,QAAQ,EAAG,QAAO,GAAG,aAAa,UAAU,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR;AACA,SAAO;AACT;AACA,SAAS,UAAU,KAAK;AACtB,SAAO,IAAI,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,KAAK;AACjK;","names":[]}
+{"version":3,"sources":["../packages/domain/runtime-css/dist/CssInjector.js"],"sourcesContent":["import React from \"react\";\nasync function TwCssInjector(props = {}) {\n  const { route, includeGlobal = true, minify = true, cssDir } = props;\n  let fs = null;\n  let path = null;\n  try {\n    fs = await import(\"node:fs\");\n    path = await import(\"node:path\");\n  } catch {\n    warnOnceDev(\n      \"TwCssInjector dipanggil tapi gak bisa akses 'node:fs'/'node:path' (kemungkinan jalan di environment non-Node, misal Edge runtime). CSS injection di-skip \\u2014 komponen tetap render normal, tapi route CSS lo gak ikut inline.\"\n    );\n    return React.createElement(React.Fragment, null);\n  }\n  const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\");\n  const manifestPath = path.join(resolvedDir, \"css-manifest.json\");\n  let manifest = {};\n  try {\n    if (fs.existsSync(manifestPath)) {\n      manifest = JSON.parse(fs.readFileSync(manifestPath, \"utf-8\"));\n    } else {\n      warnOnceDev(\n        `TwCssInjector aktif tapi manifest gak ketemu di \"${manifestPath}\". CSS injection di-skip diam-diam \\u2014 biasanya ini berarti \"routeCss: true\" belum diset di withTailwindStyled(...) di next.config, atau dev/build server belum sempat generate manifest-nya. Cek konfigurasi sebelum lanjut.`\n      );\n      return React.createElement(React.Fragment, null);\n    }\n  } catch (err) {\n    warnOnceDev(\n      `TwCssInjector gagal parse manifest di \"${manifestPath}\": ${err instanceof Error ? err.message : String(err)}. CSS injection di-skip \\u2014 manifest mungkin korup atau lagi setengah ditulis saat dibaca.`\n    );\n    return React.createElement(React.Fragment, null);\n  }\n  const cssChunks = [];\n  if (includeGlobal && manifest.routes?.[\"__global\"]) {\n    const globalPath = path.join(resolvedDir, manifest.routes[\"__global\"]);\n    const css = readFile(fs, globalPath);\n    if (css) cssChunks.push(css);\n  }\n  const targetRoute = route ?? \"/\";\n  if (manifest.routes?.[targetRoute]) {\n    const routePath = path.join(resolvedDir, manifest.routes[targetRoute]);\n    const css = readFile(fs, routePath);\n    if (css) cssChunks.push(css);\n  }\n  if (cssChunks.length === 0) return React.createElement(React.Fragment, null);\n  const combined = cssChunks.join(\"\\n\");\n  const final = minify ? minifyCss(combined) : combined;\n  return React.createElement(\"style\", {\n    dangerouslySetInnerHTML: { __html: final },\n    \"data-tw-route\": targetRoute,\n    \"data-tw-injector\": \"true\"\n  });\n}\nfunction useTwClasses(classes) {\n  return classes;\n}\nconst warnedKeys = /* @__PURE__ */ new Set();\nfunction warnOnceDev(message) {\n  if (process.env.NODE_ENV === \"production\") return;\n  if (warnedKeys.has(message)) return;\n  warnedKeys.add(message);\n  console.warn(`[tailwind-styled-v4] ${message}`);\n}\nfunction readFile(fs, filepath) {\n  try {\n    if (fs.existsSync(filepath)) return fs.readFileSync(filepath, \"utf-8\");\n  } catch {\n  }\n  return null;\n}\nfunction minifyCss(css) {\n  return css.replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\").replace(/\\s+/g, \" \").replace(/\\s*{\\s*/g, \"{\").replace(/\\s*}\\s*/g, \"}\").replace(/\\s*;\\s*/g, \";\").trim();\n}\nexport {\n  TwCssInjector,\n  useTwClasses\n};\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,eAAe,cAAc,QAAQ,CAAC,GAAG;AACvC,QAAM,EAAE,OAAO,gBAAgB,MAAM,SAAS,MAAM,OAAO,IAAI;AAC/D,MAAI,KAAK;AACT,MAAI,OAAO;AACX,MAAI;AACF,SAAK,MAAM,OAAO,IAAS;AAC3B,WAAO,MAAM,OAAO,MAAW;AAAA,EACjC,QAAQ;AACN;AAAA,MACE;AAAA,IACF;AACA,WAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,cAAc,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,SAAS,UAAU,OAAO,IAAI;AACrF,QAAM,eAAe,KAAK,KAAK,aAAa,mBAAmB;AAC/D,MAAI,WAAW,CAAC;AAChB,MAAI;AACF,QAAI,GAAG,WAAW,YAAY,GAAG;AAC/B,iBAAW,KAAK,MAAM,GAAG,aAAa,cAAc,OAAO,CAAC;AAAA,IAC9D,OAAO;AACL;AAAA,QACE,oDAAoD,YAAY;AAAA,MAClE;AACA,aAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAAA,IACjD;AAAA,EACF,SAAS,KAAK;AACZ;AAAA,MACE,0CAA0C,YAAY,MAAM,eAAe,QAAQ,IAAI,UAAU,OAAO,GAAG,CAAC;AAAA,IAC9G;AACA,WAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAAA,EACjD;AACA,QAAM,YAAY,CAAC;AACnB,MAAI,iBAAiB,SAAS,SAAS,UAAU,GAAG;AAClD,UAAM,aAAa,KAAK,KAAK,aAAa,SAAS,OAAO,UAAU,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,UAAU;AACnC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,QAAM,cAAc,SAAS;AAC7B,MAAI,SAAS,SAAS,WAAW,GAAG;AAClC,UAAM,YAAY,KAAK,KAAK,aAAa,SAAS,OAAO,WAAW,CAAC;AACrE,UAAM,MAAM,SAAS,IAAI,SAAS;AAClC,QAAI,IAAK,WAAU,KAAK,GAAG;AAAA,EAC7B;AACA,MAAI,UAAU,WAAW,EAAG,QAAO,MAAM,cAAc,MAAM,UAAU,IAAI;AAC3E,QAAM,WAAW,UAAU,KAAK,IAAI;AACpC,QAAM,QAAQ,SAAS,UAAU,QAAQ,IAAI;AAC7C,SAAO,MAAM,cAAc,SAAS;AAAA,IAClC,yBAAyB,EAAE,QAAQ,MAAM;AAAA,IACzC,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,EACtB,CAAC;AACH;AACA,SAAS,aAAa,SAAS;AAC7B,SAAO;AACT;AACA,IAAM,aAA6B,oBAAI,IAAI;AAC3C,SAAS,YAAY,SAAS;AAC5B,MAAI,QAAQ,IAAI,aAAa,aAAc;AAC3C,MAAI,WAAW,IAAI,OAAO,EAAG;AAC7B,aAAW,IAAI,OAAO;AACtB,UAAQ,KAAK,wBAAwB,OAAO,EAAE;AAChD;AACA,SAAS,SAAS,IAAI,UAAU;AAC9B,MAAI;AACF,QAAI,GAAG,WAAW,QAAQ,EAAG,QAAO,GAAG,aAAa,UAAU,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR;AACA,SAAO;AACT;AACA,SAAS,UAAU,KAAK;AACtB,SAAO,IAAI,QAAQ,mCAAmC,EAAE,EAAE,QAAQ,QAAQ,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,QAAQ,YAAY,GAAG,EAAE,KAAK;AACjK;","names":[]}

package/dist/runtime.js

@@ -75,11 +75,18 @@ ${vars}
 var createLiveTokenEngine = () => {
   const state = {
     currentTokens: {},
-    styleEl: null
+    styleEl: null,
+    // Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.
+    // Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang
+    // dipanggil di module top-level akan langsung document.documentElement
+    // .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum
+    // React selesai hydrate — sehingga <html> versi live DOM beda dengan
+    // <html> yang di-render server (yang gak pernah nyentuh `document`).
+    hydrated: false
   };
   const subscribers = /* @__PURE__ */ new Set();
   const syncStyleEl = () => {
-    if (typeof document === "undefined") return;
+    if (!state.hydrated || typeof document === "undefined") return;
     if (!state.styleEl) {
       const styleEl = document.createElement("style");
       styleEl.id = "tw-live-tokens";
@@ -100,7 +107,7 @@ var createLiveTokenEngine = () => {
   };
   const setToken2 = (name, value) => {
     state.currentTokens = { ...state.currentTokens, [name]: value };
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       document.documentElement.style.setProperty(tokenVar(name), value);
     }
     syncStyleEl();
@@ -108,7 +115,7 @@ var createLiveTokenEngine = () => {
   };
   const setTokens2 = (tokens) => {
     state.currentTokens = { ...state.currentTokens, ...tokens };
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       const root = document.documentElement;
       for (const [name, value] of Object.entries(tokens)) {
         root.style.setProperty(tokenVar(name), value);
@@ -118,7 +125,7 @@ var createLiveTokenEngine = () => {
     notifySubscribers();
   };
   const applyTokenSet2 = (tokens) => {
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       const root = document.documentElement;
       for (const name of Object.keys(state.currentTokens)) {
         if (!(name in tokens)) {
@@ -133,7 +140,20 @@ var createLiveTokenEngine = () => {
     syncStyleEl();
     notifySubscribers();
   };
+  const markHydrated = () => {
+    if (state.hydrated || typeof document === "undefined") return;
+    state.hydrated = true;
+    const root = document.documentElement;
+    for (const [name, value] of Object.entries(state.currentTokens)) {
+      root.style.setProperty(tokenVar(name), value);
+    }
+    syncStyleEl();
+  };
+  if (typeof window !== "undefined") {
+    requestAnimationFrame(markHydrated);
+  }
   return {
+    markHydrated,
     liveToken(tokens) {
       setTokens2(tokens);
       const vars = {};
@@ -205,6 +225,7 @@ function createUseTokens() {
   return function useTokens() {
     const [tokens, setTokensState] = import_react.default.useState({});
     import_react.default.useEffect(() => {
+      engine.markHydrated();
       setTokensState(engine.getTokens());
       return engine.subscribe((nextTokens) => setTokensState(nextTokens));
     }, []);

package/dist/runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/umbrella/runtime.ts","../packages/domain/runtime/src/index.ts","../packages/domain/theme/src/liveTokenEngine.ts","../packages/domain/runtime/src/schemas.ts"],"sourcesContent":["export * from \"@tailwind-styled/runtime\"\n","/**\n * @tailwind-styled/runtime v5\n *\n * Lightweight runtime helpers for compiled tailwind-styled-v5 components.\n * Live token engine has been moved to @tailwind-styled/theme package.\n */\n\nimport React from \"react\"\n\n// Re-export live token engine from @tailwind-styled/theme\nexport type {\n  LiveTokenEngineBridge,\n  LiveTokenSet,\n  TokenMap,\n  TokenSubscriber,\n} from \"@tailwind-styled/theme\"\nexport {\n  applyTokenSet,\n  createUseTokens,\n  generateTokenCssString,\n  getToken,\n  getTokens,\n  liveToken,\n  liveTokenEngine,\n  setToken,\n  setTokens,\n  subscribeTokens,\n  tokenRef,\n  tokenVar,\n} from \"@tailwind-styled/theme/live-tokens\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SubComponentDef {\n  /** HTML tag to render (default: \"span\") */\n  tag?: string\n  /** Scoped CSS class generated by Rust, e.g. \"Button_icon_abc123\" */\n  class: string\n}\n\nexport type SubComponentMap = Record<string, SubComponentDef>\n\n/**\n * Map of prop name → CSS class appended when the prop is truthy.\n * e.g. { fullWidth: \"w-full\", large: \"text-lg px-6 py-3\" }\n */\nexport type ConditionalProps = Record<string, string>\n\n/**\n * A compound styled component: base ForwardRef + attached .SubName properties.\n * The generic params are intentionally loose so callers don't need to repeat them.\n */\nexport type StyledComponent<S extends SubComponentMap = SubComponentMap> =\n  React.ForwardRefExoticComponent<\n    React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n  > & {\n    [K in keyof S]: React.ForwardRefExoticComponent<\n      React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n    >\n  }\n\n/** Metadata for one compound component produced by Rust. */\nexport interface ComponentMetadata {\n  component: string\n  tag: string\n  baseClass: string\n  subComponents: SubComponentMap\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cx — tiny className utility (no external dependency)\n// ─────────────────────────────────────────────────────────────────────────────\n\ntype ClassInput = string | number | false | null | undefined | ClassInput[]\n\nexport function cx(...inputs: ClassInput[]): string {\n  const out: string[] = []\n  for (const input of inputs) {\n    if (!input) continue // filters 0, false, null, undefined, \"\"\n    if (typeof input === \"string\") {\n      out.push(input)\n    } else if (typeof input === \"number\") {\n      out.push(String(input))\n    } else if (Array.isArray(input)) {\n      const nested = cx(...input)\n      if (nested) out.push(nested)\n    }\n  }\n  return out.join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createComponent\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Build a compound styled React component from Rust-generated metadata.\n *\n * @param tag           HTML element tag, e.g. \"button\" | \"div\"\n * @param baseClass     Scoped base class from Rust, e.g. \"Button_abc123\"\n * @param subComponents Map of subcomponent definitions (optional)\n * @param conditionals  Map of prop name → CSS class (optional)\n *\n * @example\n * // Injected automatically by the compiler — do not call manually\n * const Button = createComponent(\"button\", \"Button_abc123\", {\n *   icon: { tag: \"span\", class: \"Button_icon_abc123\" },\n *   text: { tag: \"span\", class: \"Button_text_abc123\" },\n * }, { fullWidth: \"w-full\" })\n *\n * // Usage in JSX:\n * <Button fullWidth>\n *   <Button.icon>🔍</Button.icon>\n *   <Button.text>Search</Button.text>\n * </Button>\n */\nexport function createComponent<S extends SubComponentMap = SubComponentMap>(\n  tag: string,\n  baseClass: string,\n  subComponents?: S,\n  conditionals?: ConditionalProps\n): StyledComponent<S> {\n  type Props = React.HTMLAttributes<HTMLElement> &\n    React.RefAttributes<HTMLElement> &\n    Record<string, unknown>\n\n  // ── Base component ─────────────────────────────────────────────────────────\n  const Base = React.forwardRef<HTMLElement, Props>(function TwBase(props, ref) {\n    const extra: string[] = []\n\n    // Collect conditional classes\n    if (conditionals) {\n      for (const [prop, cls] of Object.entries(conditionals)) {\n        if (props[prop]) extra.push(cls)\n      }\n    }\n\n    // Build clean props — strip conditional + subcomponent boolean props\n    const clean: Record<string, unknown> = {}\n    const stripKeys = new Set([\n      \"className\",\n      ...(conditionals ? Object.keys(conditionals) : []),\n      ...(subComponents ? Object.keys(subComponents) : []),\n    ])\n    for (const [k, v] of Object.entries(props)) {\n      if (!stripKeys.has(k)) clean[k] = v\n    }\n\n    const className = cx(baseClass, ...extra, (props.className as string) ?? \"\")\n\n    return React.createElement(tag, { ...clean, ref, className: className || undefined })\n  })\n\n  ;(Base as { displayName?: string }).displayName = `tw.${String(tag)}`\n\n  // ── Attach subcomponent properties ────────────────────────────────────────\n  if (subComponents) {\n    for (const [subName, def] of Object.entries(subComponents)) {\n      const subTag = def.tag ?? \"span\"\n      const subClass = def.class\n\n      const SubComp = React.forwardRef<HTMLElement, Props>(function TwSub(props, ref) {\n        const className = cx(subClass, (props.className as string) ?? \"\")\n        const clean: Record<string, unknown> = { ...props }\n        delete clean.className\n        return React.createElement(subTag, { ...clean, ref, className: className || undefined })\n      })\n\n      ;(SubComp as { displayName?: string }).displayName = `tw.${String(tag)}.${String(subName)}`\n\n      ;(Base as unknown as Record<string, unknown>)[subName] = SubComp\n    }\n  }\n\n  return Base as StyledComponent<S>\n}\n\n// Re-export schemas\nexport {\n  type ComponentMetadataInput,\n  ComponentMetadataSchema,\n  type ConditionalPropsInput,\n  ConditionalPropsSchema,\n  parseComponentMetadata,\n  parseSubComponentDef,\n  type SubComponentDefInput,\n  SubComponentDefSchema,\n} from \"./schemas\"\n","\"use client\"\n\nimport React from \"react\"\n\nimport type { TokenMap } from '@tailwind-styled/shared'\nexport type { TokenMap }\n\nexport type TokenSubscriber = (tokens: TokenMap) => void\n\nexport interface LiveTokenSet {\n  vars: Record<string, string>\n  get(name: string): string | undefined\n  set(name: string, value: string): void\n  setAll(tokens: TokenMap): void\n  snapshot(): TokenMap\n}\n\nexport interface LiveTokenEngineBridge {\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  subscribeTokens(fn: TokenSubscriber): () => void\n  subscribe?(fn: TokenSubscriber): () => void\n}\n\ninterface LiveTokenEngineRuntime {\n  liveToken(tokens: TokenMap): LiveTokenSet\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  generateTokenCssString(): string\n  subscribe(fn: TokenSubscriber): () => void\n}\n\nconst TOKEN_ENGINE_KEY = \"__TW_TOKEN_ENGINE__\"\n\nexport function tokenVar(name: string): string {\n  const normalized = name.replace(/[^a-zA-Z0-9-]/g, \"-\").toLowerCase()\n  return `--tw-token-${normalized}`\n}\n\nexport function tokenRef(name: string): string {\n  return `var(${tokenVar(name)})`\n}\n\nconst buildRootCss = (tokens: TokenMap): string => {\n  const vars = Object.entries(tokens)\n    .map(([name, value]) => `  ${tokenVar(name)}: ${value};`)\n    .join(\"\\n\")\n  return `:root {\\n${vars}\\n}`\n}\n\nconst createLiveTokenEngine = (): LiveTokenEngineRuntime => {\n  const state = {\n    currentTokens: {} as TokenMap,\n    styleEl: null as HTMLStyleElement | null,\n  }\n  const subscribers = new Set<TokenSubscriber>()\n\n  const syncStyleEl = (): void => {\n    if (typeof document === \"undefined\") return\n\n    if (!state.styleEl) {\n      const styleEl = document.createElement(\"style\")\n      styleEl.id = \"tw-live-tokens\"\n      styleEl.setAttribute(\"data-tw-tokens\", \"true\")\n      document.head.appendChild(styleEl)\n      state.styleEl = styleEl\n    }\n\n    state.styleEl.textContent = buildRootCss(state.currentTokens)\n  }\n\n  const notifySubscribers = (): void => {\n    const snapshot = { ...state.currentTokens }\n    for (const subscriber of subscribers) {\n      try {\n        subscriber(snapshot)\n      } catch {\n        // Intentionally ignore subscriber errors.\n      }\n    }\n  }\n\n  const setToken = (name: string, value: string): void => {\n    state.currentTokens = { ...state.currentTokens, [name]: value }\n    if (typeof document !== \"undefined\") {\n      document.documentElement.style.setProperty(tokenVar(name), value)\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const setTokens = (tokens: TokenMap): void => {\n    state.currentTokens = { ...state.currentTokens, ...tokens }\n    if (typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const applyTokenSet = (tokens: TokenMap): void => {\n    if (typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const name of Object.keys(state.currentTokens)) {\n        if (!(name in tokens)) {\n          root.style.removeProperty(tokenVar(name))\n        }\n      }\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n\n    state.currentTokens = { ...tokens }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  return {\n    liveToken(tokens: TokenMap): LiveTokenSet {\n      setTokens(tokens)\n\n      const vars: Record<string, string> = {}\n      for (const name of Object.keys(tokens)) {\n        vars[name] = tokenRef(name)\n      }\n\n      return {\n        vars,\n        get(name: string) {\n          return state.currentTokens[name]\n        },\n        set(name: string, value: string) {\n          setToken(name, value)\n        },\n        setAll(nextTokens: TokenMap) {\n          setTokens(nextTokens)\n        },\n        snapshot() {\n          return { ...state.currentTokens }\n        },\n      }\n    },\n    getToken(name: string): string | undefined {\n      return state.currentTokens[name]\n    },\n    getTokens(): TokenMap {\n      return { ...state.currentTokens }\n    },\n    setToken,\n    setTokens,\n    applyTokenSet,\n    generateTokenCssString(): string {\n      return buildRootCss(state.currentTokens)\n    },\n    subscribe(fn: TokenSubscriber): () => void {\n      subscribers.add(fn)\n      return () => {\n        subscribers.delete(fn)\n      }\n    },\n  }\n}\n\nconst engine = createLiveTokenEngine()\n\nexport function liveToken(tokens: TokenMap): LiveTokenSet {\n  return engine.liveToken(tokens)\n}\n\nexport function setToken(name: string, value: string): void {\n  engine.setToken(name, value)\n}\n\nexport function setTokens(tokens: TokenMap): void {\n  engine.setTokens(tokens)\n}\n\nexport function applyTokenSet(tokens: TokenMap): void {\n  engine.applyTokenSet(tokens)\n}\n\nexport function getToken(name: string): string | undefined {\n  return engine.getToken(name)\n}\n\nexport function getTokens(): TokenMap {\n  return engine.getTokens()\n}\n\nexport function subscribeTokens(fn: TokenSubscriber): () => void {\n  return engine.subscribe(fn)\n}\n\nexport function generateTokenCssString(): string {\n  return engine.generateTokenCssString()\n}\n\nexport function createUseTokens() {\n  return function useTokens(): TokenMap {\n    // useSyncExternalStore untuk konsistensi SSR/client:\n    // - getServerSnapshot() return empty object → SSR render tanpa tokens\n    // - getSnapshot() return live tokens di client setelah hydration\n    // Ini menghilangkan hydration mismatch karena server dan client\n    // initial render keduanya return {} (empty), lalu useEffect update\n    // ke nilai aktual via subscriber.\n    const [tokens, setTokensState] = React.useState<TokenMap>({})\n\n    React.useEffect(() => {\n      // Set ke nilai aktual setelah mount (client-only)\n      setTokensState(engine.getTokens())\n      return engine.subscribe((nextTokens) => setTokensState(nextTokens))\n    }, [])\n\n    return tokens\n  }\n}\n\nexport const liveTokenEngine: LiveTokenEngineBridge = {\n  getToken: engine.getToken,\n  getTokens: engine.getTokens,\n  setToken: engine.setToken,\n  setTokens: engine.setTokens,\n  applyTokenSet: engine.applyTokenSet,\n  subscribeTokens: engine.subscribe,\n  subscribe: engine.subscribe,\n}\n\ndeclare global {\n  interface Window {\n    __TW_TOKEN_ENGINE__?: LiveTokenEngineBridge\n  }\n}\n\nconst globalTokenEngine = globalThis as typeof globalThis & {\n  [TOKEN_ENGINE_KEY]?: LiveTokenEngineBridge\n}\n\nglobalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine\nif (typeof window !== \"undefined\") {\n  window.__TW_TOKEN_ENGINE__ = liveTokenEngine\n}\n","import { z } from \"zod\"\n\nconst formatIssues = (error: z.ZodError): string =>\n  error.issues\n    .map((issue) => {\n      const p = issue.path.length > 0 ? issue.path.join(\".\") : \"<root>\"\n      return `${p}: ${issue.message}`\n    })\n    .join(\"; \")\n\nconst parseWithSchema = <T>(schema: z.ZodType<T>, data: unknown, label: string): T => {\n  const parsed = schema.safeParse(data)\n  if (parsed.success) return parsed.data\n  throw new TypeError(`${label}: ${formatIssues(parsed.error)}`)\n}\n\nexport const SubComponentDefSchema = z.object({\n  tag: z.string().optional(),\n  class: z.string(),\n})\n\nexport type SubComponentDefInput = z.infer<typeof SubComponentDefSchema>\n\nexport const ComponentMetadataSchema = z.object({\n  component: z.string(),\n  tag: z.string(),\n  baseClass: z.string(),\n  subComponents: z.record(z.string(), SubComponentDefSchema),\n})\n\nexport type ComponentMetadataInput = z.infer<typeof ComponentMetadataSchema>\n\nexport const ConditionalPropsSchema = z.record(z.string(), z.string())\n\nexport type ConditionalPropsInput = z.infer<typeof ConditionalPropsSchema>\n\nexport const parseSubComponentDef = (data: unknown) =>\n  parseWithSchema(SubComponentDefSchema, data, \"sub-component definition is invalid\")\n\nexport const parseComponentMetadata = (data: unknown) =>\n  parseWithSchema(ComponentMetadataSchema, data, \"component metadata is invalid\")\n"],"mappings":"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","names":["import_react","setToken","setTokens","applyTokenSet","React","React"]}
+{"version":3,"sources":["../src/umbrella/runtime.ts","../packages/domain/runtime/src/index.ts","../packages/domain/theme/src/liveTokenEngine.ts","../packages/domain/runtime/src/schemas.ts"],"sourcesContent":["export * from \"@tailwind-styled/runtime\"\n","/**\n * @tailwind-styled/runtime v5\n *\n * Lightweight runtime helpers for compiled tailwind-styled-v5 components.\n * Live token engine has been moved to @tailwind-styled/theme package.\n */\n\nimport React from \"react\"\n\n// Re-export live token engine from @tailwind-styled/theme\nexport type {\n  LiveTokenEngineBridge,\n  LiveTokenSet,\n  TokenMap,\n  TokenSubscriber,\n} from \"@tailwind-styled/theme\"\nexport {\n  applyTokenSet,\n  createUseTokens,\n  generateTokenCssString,\n  getToken,\n  getTokens,\n  liveToken,\n  liveTokenEngine,\n  setToken,\n  setTokens,\n  subscribeTokens,\n  tokenRef,\n  tokenVar,\n} from \"@tailwind-styled/theme/live-tokens\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SubComponentDef {\n  /** HTML tag to render (default: \"span\") */\n  tag?: string\n  /** Scoped CSS class generated by Rust, e.g. \"Button_icon_abc123\" */\n  class: string\n}\n\nexport type SubComponentMap = Record<string, SubComponentDef>\n\n/**\n * Map of prop name → CSS class appended when the prop is truthy.\n * e.g. { fullWidth: \"w-full\", large: \"text-lg px-6 py-3\" }\n */\nexport type ConditionalProps = Record<string, string>\n\n/**\n * A compound styled component: base ForwardRef + attached .SubName properties.\n * The generic params are intentionally loose so callers don't need to repeat them.\n */\nexport type StyledComponent<S extends SubComponentMap = SubComponentMap> =\n  React.ForwardRefExoticComponent<\n    React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n  > & {\n    [K in keyof S]: React.ForwardRefExoticComponent<\n      React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n    >\n  }\n\n/** Metadata for one compound component produced by Rust. */\nexport interface ComponentMetadata {\n  component: string\n  tag: string\n  baseClass: string\n  subComponents: SubComponentMap\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cx — tiny className utility (no external dependency)\n// ─────────────────────────────────────────────────────────────────────────────\n\ntype ClassInput = string | number | false | null | undefined | ClassInput[]\n\nexport function cx(...inputs: ClassInput[]): string {\n  const out: string[] = []\n  for (const input of inputs) {\n    if (!input) continue // filters 0, false, null, undefined, \"\"\n    if (typeof input === \"string\") {\n      out.push(input)\n    } else if (typeof input === \"number\") {\n      out.push(String(input))\n    } else if (Array.isArray(input)) {\n      const nested = cx(...input)\n      if (nested) out.push(nested)\n    }\n  }\n  return out.join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createComponent\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Build a compound styled React component from Rust-generated metadata.\n *\n * @param tag           HTML element tag, e.g. \"button\" | \"div\"\n * @param baseClass     Scoped base class from Rust, e.g. \"Button_abc123\"\n * @param subComponents Map of subcomponent definitions (optional)\n * @param conditionals  Map of prop name → CSS class (optional)\n *\n * @example\n * // Injected automatically by the compiler — do not call manually\n * const Button = createComponent(\"button\", \"Button_abc123\", {\n *   icon: { tag: \"span\", class: \"Button_icon_abc123\" },\n *   text: { tag: \"span\", class: \"Button_text_abc123\" },\n * }, { fullWidth: \"w-full\" })\n *\n * // Usage in JSX:\n * <Button fullWidth>\n *   <Button.icon>🔍</Button.icon>\n *   <Button.text>Search</Button.text>\n * </Button>\n */\nexport function createComponent<S extends SubComponentMap = SubComponentMap>(\n  tag: string,\n  baseClass: string,\n  subComponents?: S,\n  conditionals?: ConditionalProps\n): StyledComponent<S> {\n  type Props = React.HTMLAttributes<HTMLElement> &\n    React.RefAttributes<HTMLElement> &\n    Record<string, unknown>\n\n  // ── Base component ─────────────────────────────────────────────────────────\n  const Base = React.forwardRef<HTMLElement, Props>(function TwBase(props, ref) {\n    const extra: string[] = []\n\n    // Collect conditional classes\n    if (conditionals) {\n      for (const [prop, cls] of Object.entries(conditionals)) {\n        if (props[prop]) extra.push(cls)\n      }\n    }\n\n    // Build clean props — strip conditional + subcomponent boolean props\n    const clean: Record<string, unknown> = {}\n    const stripKeys = new Set([\n      \"className\",\n      ...(conditionals ? Object.keys(conditionals) : []),\n      ...(subComponents ? Object.keys(subComponents) : []),\n    ])\n    for (const [k, v] of Object.entries(props)) {\n      if (!stripKeys.has(k)) clean[k] = v\n    }\n\n    const className = cx(baseClass, ...extra, (props.className as string) ?? \"\")\n\n    return React.createElement(tag, { ...clean, ref, className: className || undefined })\n  })\n\n  ;(Base as { displayName?: string }).displayName = `tw.${String(tag)}`\n\n  // ── Attach subcomponent properties ────────────────────────────────────────\n  if (subComponents) {\n    for (const [subName, def] of Object.entries(subComponents)) {\n      const subTag = def.tag ?? \"span\"\n      const subClass = def.class\n\n      const SubComp = React.forwardRef<HTMLElement, Props>(function TwSub(props, ref) {\n        const className = cx(subClass, (props.className as string) ?? \"\")\n        const clean: Record<string, unknown> = { ...props }\n        delete clean.className\n        return React.createElement(subTag, { ...clean, ref, className: className || undefined })\n      })\n\n      ;(SubComp as { displayName?: string }).displayName = `tw.${String(tag)}.${String(subName)}`\n\n      ;(Base as unknown as Record<string, unknown>)[subName] = SubComp\n    }\n  }\n\n  return Base as StyledComponent<S>\n}\n\n// Re-export schemas\nexport {\n  type ComponentMetadataInput,\n  ComponentMetadataSchema,\n  type ConditionalPropsInput,\n  ConditionalPropsSchema,\n  parseComponentMetadata,\n  parseSubComponentDef,\n  type SubComponentDefInput,\n  SubComponentDefSchema,\n} from \"./schemas\"\n","\"use client\"\n\nimport React from \"react\"\n\nimport type { TokenMap } from '@tailwind-styled/shared'\nexport type { TokenMap }\n\nexport type TokenSubscriber = (tokens: TokenMap) => void\n\nexport interface LiveTokenSet {\n  vars: Record<string, string>\n  get(name: string): string | undefined\n  set(name: string, value: string): void\n  setAll(tokens: TokenMap): void\n  snapshot(): TokenMap\n}\n\nexport interface LiveTokenEngineBridge {\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  subscribeTokens(fn: TokenSubscriber): () => void\n  subscribe?(fn: TokenSubscriber): () => void\n}\n\ninterface LiveTokenEngineRuntime {\n  liveToken(tokens: TokenMap): LiveTokenSet\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  generateTokenCssString(): string\n  subscribe(fn: TokenSubscriber): () => void\n  markHydrated(): void\n}\n\nconst TOKEN_ENGINE_KEY = \"__TW_TOKEN_ENGINE__\"\n\nexport function tokenVar(name: string): string {\n  const normalized = name.replace(/[^a-zA-Z0-9-]/g, \"-\").toLowerCase()\n  return `--tw-token-${normalized}`\n}\n\nexport function tokenRef(name: string): string {\n  return `var(${tokenVar(name)})`\n}\n\nconst buildRootCss = (tokens: TokenMap): string => {\n  const vars = Object.entries(tokens)\n    .map(([name, value]) => `  ${tokenVar(name)}: ${value};`)\n    .join(\"\\n\")\n  return `:root {\\n${vars}\\n}`\n}\n\nconst createLiveTokenEngine = (): LiveTokenEngineRuntime => {\n  const state = {\n    currentTokens: {} as TokenMap,\n    styleEl: null as HTMLStyleElement | null,\n    // Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.\n    // Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang\n    // dipanggil di module top-level akan langsung document.documentElement\n    // .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum\n    // React selesai hydrate — sehingga <html> versi live DOM beda dengan\n    // <html> yang di-render server (yang gak pernah nyentuh `document`).\n    hydrated: false,\n  }\n  const subscribers = new Set<TokenSubscriber>()\n\n  const syncStyleEl = (): void => {\n    if (!state.hydrated || typeof document === \"undefined\") return\n\n    if (!state.styleEl) {\n      const styleEl = document.createElement(\"style\")\n      styleEl.id = \"tw-live-tokens\"\n      styleEl.setAttribute(\"data-tw-tokens\", \"true\")\n      document.head.appendChild(styleEl)\n      state.styleEl = styleEl\n    }\n\n    state.styleEl.textContent = buildRootCss(state.currentTokens)\n  }\n\n  const notifySubscribers = (): void => {\n    const snapshot = { ...state.currentTokens }\n    for (const subscriber of subscribers) {\n      try {\n        subscriber(snapshot)\n      } catch {\n        // Intentionally ignore subscriber errors.\n      }\n    }\n  }\n\n  const setToken = (name: string, value: string): void => {\n    state.currentTokens = { ...state.currentTokens, [name]: value }\n    if (state.hydrated && typeof document !== \"undefined\") {\n      document.documentElement.style.setProperty(tokenVar(name), value)\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const setTokens = (tokens: TokenMap): void => {\n    state.currentTokens = { ...state.currentTokens, ...tokens }\n    if (state.hydrated && typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const applyTokenSet = (tokens: TokenMap): void => {\n    if (state.hydrated && typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const name of Object.keys(state.currentTokens)) {\n        if (!(name in tokens)) {\n          root.style.removeProperty(tokenVar(name))\n        }\n      }\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n\n    state.currentTokens = { ...tokens }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  // Dipanggil sekali setelah mount pertama (lewat useTokens()'s useEffect, atau\n  // fallback rAF di bawah buat consumer yang pakai API imperative tanpa hook).\n  // Setelah ini true, semua write di atas balik sinkron langsung seperti semula.\n  const markHydrated = (): void => {\n    if (state.hydrated || typeof document === \"undefined\") return\n    state.hydrated = true\n    const root = document.documentElement\n    for (const [name, value] of Object.entries(state.currentTokens)) {\n      root.style.setProperty(tokenVar(name), value)\n    }\n    syncStyleEl()\n  }\n\n  if (typeof window !== \"undefined\") {\n    // Fallback buat consumer yang gak pakai useTokens() hook (cuma pakai\n    // liveToken().set() imperatif): tetap flush setelah paint pertama,\n    // jauh lebih aman daripada langsung saat module di-evaluasi.\n    requestAnimationFrame(markHydrated)\n  }\n\n  return {\n    markHydrated,\n    liveToken(tokens: TokenMap): LiveTokenSet {\n      setTokens(tokens)\n\n      const vars: Record<string, string> = {}\n      for (const name of Object.keys(tokens)) {\n        vars[name] = tokenRef(name)\n      }\n\n      return {\n        vars,\n        get(name: string) {\n          return state.currentTokens[name]\n        },\n        set(name: string, value: string) {\n          setToken(name, value)\n        },\n        setAll(nextTokens: TokenMap) {\n          setTokens(nextTokens)\n        },\n        snapshot() {\n          return { ...state.currentTokens }\n        },\n      }\n    },\n    getToken(name: string): string | undefined {\n      return state.currentTokens[name]\n    },\n    getTokens(): TokenMap {\n      return { ...state.currentTokens }\n    },\n    setToken,\n    setTokens,\n    applyTokenSet,\n    generateTokenCssString(): string {\n      return buildRootCss(state.currentTokens)\n    },\n    subscribe(fn: TokenSubscriber): () => void {\n      subscribers.add(fn)\n      return () => {\n        subscribers.delete(fn)\n      }\n    },\n  }\n}\n\nconst engine = createLiveTokenEngine()\n\nexport function liveToken(tokens: TokenMap): LiveTokenSet {\n  return engine.liveToken(tokens)\n}\n\nexport function setToken(name: string, value: string): void {\n  engine.setToken(name, value)\n}\n\nexport function setTokens(tokens: TokenMap): void {\n  engine.setTokens(tokens)\n}\n\nexport function applyTokenSet(tokens: TokenMap): void {\n  engine.applyTokenSet(tokens)\n}\n\nexport function getToken(name: string): string | undefined {\n  return engine.getToken(name)\n}\n\nexport function getTokens(): TokenMap {\n  return engine.getTokens()\n}\n\nexport function subscribeTokens(fn: TokenSubscriber): () => void {\n  return engine.subscribe(fn)\n}\n\nexport function generateTokenCssString(): string {\n  return engine.generateTokenCssString()\n}\n\nexport function createUseTokens() {\n  return function useTokens(): TokenMap {\n    // useSyncExternalStore untuk konsistensi SSR/client:\n    // - getServerSnapshot() return empty object → SSR render tanpa tokens\n    // - getSnapshot() return live tokens di client setelah hydration\n    // Ini menghilangkan hydration mismatch karena server dan client\n    // initial render keduanya return {} (empty), lalu useEffect update\n    // ke nilai aktual via subscriber.\n    const [tokens, setTokensState] = React.useState<TokenMap>({})\n\n    React.useEffect(() => {\n      // Baru sekarang aman nyentuh document.documentElement — hydration\n      // udah pasti selesai di titik ini. markHydrated() flush token yang\n      // sempat ditunda dari liveToken() init call (lihat createLiveTokenEngine).\n      engine.markHydrated()\n      // Set ke nilai aktual setelah mount (client-only)\n      setTokensState(engine.getTokens())\n      return engine.subscribe((nextTokens) => setTokensState(nextTokens))\n    }, [])\n\n    return tokens\n  }\n}\n\nexport const liveTokenEngine: LiveTokenEngineBridge = {\n  getToken: engine.getToken,\n  getTokens: engine.getTokens,\n  setToken: engine.setToken,\n  setTokens: engine.setTokens,\n  applyTokenSet: engine.applyTokenSet,\n  subscribeTokens: engine.subscribe,\n  subscribe: engine.subscribe,\n}\n\ndeclare global {\n  interface Window {\n    __TW_TOKEN_ENGINE__?: LiveTokenEngineBridge\n  }\n}\n\nconst globalTokenEngine = globalThis as typeof globalThis & {\n  [TOKEN_ENGINE_KEY]?: LiveTokenEngineBridge\n}\n\nglobalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine\nif (typeof window !== \"undefined\") {\n  window.__TW_TOKEN_ENGINE__ = liveTokenEngine\n}\n","import { z } from \"zod\"\n\nconst formatIssues = (error: z.ZodError): string =>\n  error.issues\n    .map((issue) => {\n      const p = issue.path.length > 0 ? issue.path.join(\".\") : \"<root>\"\n      return `${p}: ${issue.message}`\n    })\n    .join(\"; \")\n\nconst parseWithSchema = <T>(schema: z.ZodType<T>, data: unknown, label: string): T => {\n  const parsed = schema.safeParse(data)\n  if (parsed.success) return parsed.data\n  throw new TypeError(`${label}: ${formatIssues(parsed.error)}`)\n}\n\nexport const SubComponentDefSchema = z.object({\n  tag: z.string().optional(),\n  class: z.string(),\n})\n\nexport type SubComponentDefInput = z.infer<typeof SubComponentDefSchema>\n\nexport const ComponentMetadataSchema = z.object({\n  component: z.string(),\n  tag: z.string(),\n  baseClass: z.string(),\n  subComponents: z.record(z.string(), SubComponentDefSchema),\n})\n\nexport type ComponentMetadataInput = z.infer<typeof ComponentMetadataSchema>\n\nexport const ConditionalPropsSchema = z.record(z.string(), z.string())\n\nexport type ConditionalPropsInput = z.infer<typeof ConditionalPropsSchema>\n\nexport const parseSubComponentDef = (data: unknown) =>\n  parseWithSchema(SubComponentDefSchema, data, \"sub-component definition is invalid\")\n\nexport const parseComponentMetadata = (data: unknown) =>\n  parseWithSchema(ComponentMetadataSchema, data, \"component metadata is invalid\")\n"],"mappings":"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","names":["import_react","setToken","setTokens","applyTokenSet","React","React"]}

package/dist/runtime.mjs

@@ -21,11 +21,18 @@ ${vars}
 var createLiveTokenEngine = () => {
   const state = {
     currentTokens: {},
-    styleEl: null
+    styleEl: null,
+    // Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.
+    // Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang
+    // dipanggil di module top-level akan langsung document.documentElement
+    // .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum
+    // React selesai hydrate — sehingga <html> versi live DOM beda dengan
+    // <html> yang di-render server (yang gak pernah nyentuh `document`).
+    hydrated: false
   };
   const subscribers = /* @__PURE__ */ new Set();
   const syncStyleEl = () => {
-    if (typeof document === "undefined") return;
+    if (!state.hydrated || typeof document === "undefined") return;
     if (!state.styleEl) {
       const styleEl = document.createElement("style");
       styleEl.id = "tw-live-tokens";
@@ -46,7 +53,7 @@ var createLiveTokenEngine = () => {
   };
   const setToken2 = (name, value) => {
     state.currentTokens = { ...state.currentTokens, [name]: value };
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       document.documentElement.style.setProperty(tokenVar(name), value);
     }
     syncStyleEl();
@@ -54,7 +61,7 @@ var createLiveTokenEngine = () => {
   };
   const setTokens2 = (tokens) => {
     state.currentTokens = { ...state.currentTokens, ...tokens };
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       const root = document.documentElement;
       for (const [name, value] of Object.entries(tokens)) {
         root.style.setProperty(tokenVar(name), value);
@@ -64,7 +71,7 @@ var createLiveTokenEngine = () => {
     notifySubscribers();
   };
   const applyTokenSet2 = (tokens) => {
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       const root = document.documentElement;
       for (const name of Object.keys(state.currentTokens)) {
         if (!(name in tokens)) {
@@ -79,7 +86,20 @@ var createLiveTokenEngine = () => {
     syncStyleEl();
     notifySubscribers();
   };
+  const markHydrated = () => {
+    if (state.hydrated || typeof document === "undefined") return;
+    state.hydrated = true;
+    const root = document.documentElement;
+    for (const [name, value] of Object.entries(state.currentTokens)) {
+      root.style.setProperty(tokenVar(name), value);
+    }
+    syncStyleEl();
+  };
+  if (typeof window !== "undefined") {
+    requestAnimationFrame(markHydrated);
+  }
   return {
+    markHydrated,
     liveToken(tokens) {
       setTokens2(tokens);
       const vars = {};
@@ -151,6 +171,7 @@ function createUseTokens() {
   return function useTokens() {
     const [tokens, setTokensState] = React.useState({});
     React.useEffect(() => {
+      engine.markHydrated();
       setTokensState(engine.getTokens());
       return engine.subscribe((nextTokens) => setTokensState(nextTokens));
     }, []);

package/dist/runtime.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/domain/runtime/src/index.ts","../packages/domain/theme/src/liveTokenEngine.ts","../packages/domain/runtime/src/schemas.ts"],"sourcesContent":["/**\n * @tailwind-styled/runtime v5\n *\n * Lightweight runtime helpers for compiled tailwind-styled-v5 components.\n * Live token engine has been moved to @tailwind-styled/theme package.\n */\n\nimport React from \"react\"\n\n// Re-export live token engine from @tailwind-styled/theme\nexport type {\n  LiveTokenEngineBridge,\n  LiveTokenSet,\n  TokenMap,\n  TokenSubscriber,\n} from \"@tailwind-styled/theme\"\nexport {\n  applyTokenSet,\n  createUseTokens,\n  generateTokenCssString,\n  getToken,\n  getTokens,\n  liveToken,\n  liveTokenEngine,\n  setToken,\n  setTokens,\n  subscribeTokens,\n  tokenRef,\n  tokenVar,\n} from \"@tailwind-styled/theme/live-tokens\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SubComponentDef {\n  /** HTML tag to render (default: \"span\") */\n  tag?: string\n  /** Scoped CSS class generated by Rust, e.g. \"Button_icon_abc123\" */\n  class: string\n}\n\nexport type SubComponentMap = Record<string, SubComponentDef>\n\n/**\n * Map of prop name → CSS class appended when the prop is truthy.\n * e.g. { fullWidth: \"w-full\", large: \"text-lg px-6 py-3\" }\n */\nexport type ConditionalProps = Record<string, string>\n\n/**\n * A compound styled component: base ForwardRef + attached .SubName properties.\n * The generic params are intentionally loose so callers don't need to repeat them.\n */\nexport type StyledComponent<S extends SubComponentMap = SubComponentMap> =\n  React.ForwardRefExoticComponent<\n    React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n  > & {\n    [K in keyof S]: React.ForwardRefExoticComponent<\n      React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n    >\n  }\n\n/** Metadata for one compound component produced by Rust. */\nexport interface ComponentMetadata {\n  component: string\n  tag: string\n  baseClass: string\n  subComponents: SubComponentMap\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cx — tiny className utility (no external dependency)\n// ─────────────────────────────────────────────────────────────────────────────\n\ntype ClassInput = string | number | false | null | undefined | ClassInput[]\n\nexport function cx(...inputs: ClassInput[]): string {\n  const out: string[] = []\n  for (const input of inputs) {\n    if (!input) continue // filters 0, false, null, undefined, \"\"\n    if (typeof input === \"string\") {\n      out.push(input)\n    } else if (typeof input === \"number\") {\n      out.push(String(input))\n    } else if (Array.isArray(input)) {\n      const nested = cx(...input)\n      if (nested) out.push(nested)\n    }\n  }\n  return out.join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createComponent\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Build a compound styled React component from Rust-generated metadata.\n *\n * @param tag           HTML element tag, e.g. \"button\" | \"div\"\n * @param baseClass     Scoped base class from Rust, e.g. \"Button_abc123\"\n * @param subComponents Map of subcomponent definitions (optional)\n * @param conditionals  Map of prop name → CSS class (optional)\n *\n * @example\n * // Injected automatically by the compiler — do not call manually\n * const Button = createComponent(\"button\", \"Button_abc123\", {\n *   icon: { tag: \"span\", class: \"Button_icon_abc123\" },\n *   text: { tag: \"span\", class: \"Button_text_abc123\" },\n * }, { fullWidth: \"w-full\" })\n *\n * // Usage in JSX:\n * <Button fullWidth>\n *   <Button.icon>🔍</Button.icon>\n *   <Button.text>Search</Button.text>\n * </Button>\n */\nexport function createComponent<S extends SubComponentMap = SubComponentMap>(\n  tag: string,\n  baseClass: string,\n  subComponents?: S,\n  conditionals?: ConditionalProps\n): StyledComponent<S> {\n  type Props = React.HTMLAttributes<HTMLElement> &\n    React.RefAttributes<HTMLElement> &\n    Record<string, unknown>\n\n  // ── Base component ─────────────────────────────────────────────────────────\n  const Base = React.forwardRef<HTMLElement, Props>(function TwBase(props, ref) {\n    const extra: string[] = []\n\n    // Collect conditional classes\n    if (conditionals) {\n      for (const [prop, cls] of Object.entries(conditionals)) {\n        if (props[prop]) extra.push(cls)\n      }\n    }\n\n    // Build clean props — strip conditional + subcomponent boolean props\n    const clean: Record<string, unknown> = {}\n    const stripKeys = new Set([\n      \"className\",\n      ...(conditionals ? Object.keys(conditionals) : []),\n      ...(subComponents ? Object.keys(subComponents) : []),\n    ])\n    for (const [k, v] of Object.entries(props)) {\n      if (!stripKeys.has(k)) clean[k] = v\n    }\n\n    const className = cx(baseClass, ...extra, (props.className as string) ?? \"\")\n\n    return React.createElement(tag, { ...clean, ref, className: className || undefined })\n  })\n\n  ;(Base as { displayName?: string }).displayName = `tw.${String(tag)}`\n\n  // ── Attach subcomponent properties ────────────────────────────────────────\n  if (subComponents) {\n    for (const [subName, def] of Object.entries(subComponents)) {\n      const subTag = def.tag ?? \"span\"\n      const subClass = def.class\n\n      const SubComp = React.forwardRef<HTMLElement, Props>(function TwSub(props, ref) {\n        const className = cx(subClass, (props.className as string) ?? \"\")\n        const clean: Record<string, unknown> = { ...props }\n        delete clean.className\n        return React.createElement(subTag, { ...clean, ref, className: className || undefined })\n      })\n\n      ;(SubComp as { displayName?: string }).displayName = `tw.${String(tag)}.${String(subName)}`\n\n      ;(Base as unknown as Record<string, unknown>)[subName] = SubComp\n    }\n  }\n\n  return Base as StyledComponent<S>\n}\n\n// Re-export schemas\nexport {\n  type ComponentMetadataInput,\n  ComponentMetadataSchema,\n  type ConditionalPropsInput,\n  ConditionalPropsSchema,\n  parseComponentMetadata,\n  parseSubComponentDef,\n  type SubComponentDefInput,\n  SubComponentDefSchema,\n} from \"./schemas\"\n","\"use client\"\n\nimport React from \"react\"\n\nimport type { TokenMap } from '@tailwind-styled/shared'\nexport type { TokenMap }\n\nexport type TokenSubscriber = (tokens: TokenMap) => void\n\nexport interface LiveTokenSet {\n  vars: Record<string, string>\n  get(name: string): string | undefined\n  set(name: string, value: string): void\n  setAll(tokens: TokenMap): void\n  snapshot(): TokenMap\n}\n\nexport interface LiveTokenEngineBridge {\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  subscribeTokens(fn: TokenSubscriber): () => void\n  subscribe?(fn: TokenSubscriber): () => void\n}\n\ninterface LiveTokenEngineRuntime {\n  liveToken(tokens: TokenMap): LiveTokenSet\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  generateTokenCssString(): string\n  subscribe(fn: TokenSubscriber): () => void\n}\n\nconst TOKEN_ENGINE_KEY = \"__TW_TOKEN_ENGINE__\"\n\nexport function tokenVar(name: string): string {\n  const normalized = name.replace(/[^a-zA-Z0-9-]/g, \"-\").toLowerCase()\n  return `--tw-token-${normalized}`\n}\n\nexport function tokenRef(name: string): string {\n  return `var(${tokenVar(name)})`\n}\n\nconst buildRootCss = (tokens: TokenMap): string => {\n  const vars = Object.entries(tokens)\n    .map(([name, value]) => `  ${tokenVar(name)}: ${value};`)\n    .join(\"\\n\")\n  return `:root {\\n${vars}\\n}`\n}\n\nconst createLiveTokenEngine = (): LiveTokenEngineRuntime => {\n  const state = {\n    currentTokens: {} as TokenMap,\n    styleEl: null as HTMLStyleElement | null,\n  }\n  const subscribers = new Set<TokenSubscriber>()\n\n  const syncStyleEl = (): void => {\n    if (typeof document === \"undefined\") return\n\n    if (!state.styleEl) {\n      const styleEl = document.createElement(\"style\")\n      styleEl.id = \"tw-live-tokens\"\n      styleEl.setAttribute(\"data-tw-tokens\", \"true\")\n      document.head.appendChild(styleEl)\n      state.styleEl = styleEl\n    }\n\n    state.styleEl.textContent = buildRootCss(state.currentTokens)\n  }\n\n  const notifySubscribers = (): void => {\n    const snapshot = { ...state.currentTokens }\n    for (const subscriber of subscribers) {\n      try {\n        subscriber(snapshot)\n      } catch {\n        // Intentionally ignore subscriber errors.\n      }\n    }\n  }\n\n  const setToken = (name: string, value: string): void => {\n    state.currentTokens = { ...state.currentTokens, [name]: value }\n    if (typeof document !== \"undefined\") {\n      document.documentElement.style.setProperty(tokenVar(name), value)\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const setTokens = (tokens: TokenMap): void => {\n    state.currentTokens = { ...state.currentTokens, ...tokens }\n    if (typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const applyTokenSet = (tokens: TokenMap): void => {\n    if (typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const name of Object.keys(state.currentTokens)) {\n        if (!(name in tokens)) {\n          root.style.removeProperty(tokenVar(name))\n        }\n      }\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n\n    state.currentTokens = { ...tokens }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  return {\n    liveToken(tokens: TokenMap): LiveTokenSet {\n      setTokens(tokens)\n\n      const vars: Record<string, string> = {}\n      for (const name of Object.keys(tokens)) {\n        vars[name] = tokenRef(name)\n      }\n\n      return {\n        vars,\n        get(name: string) {\n          return state.currentTokens[name]\n        },\n        set(name: string, value: string) {\n          setToken(name, value)\n        },\n        setAll(nextTokens: TokenMap) {\n          setTokens(nextTokens)\n        },\n        snapshot() {\n          return { ...state.currentTokens }\n        },\n      }\n    },\n    getToken(name: string): string | undefined {\n      return state.currentTokens[name]\n    },\n    getTokens(): TokenMap {\n      return { ...state.currentTokens }\n    },\n    setToken,\n    setTokens,\n    applyTokenSet,\n    generateTokenCssString(): string {\n      return buildRootCss(state.currentTokens)\n    },\n    subscribe(fn: TokenSubscriber): () => void {\n      subscribers.add(fn)\n      return () => {\n        subscribers.delete(fn)\n      }\n    },\n  }\n}\n\nconst engine = createLiveTokenEngine()\n\nexport function liveToken(tokens: TokenMap): LiveTokenSet {\n  return engine.liveToken(tokens)\n}\n\nexport function setToken(name: string, value: string): void {\n  engine.setToken(name, value)\n}\n\nexport function setTokens(tokens: TokenMap): void {\n  engine.setTokens(tokens)\n}\n\nexport function applyTokenSet(tokens: TokenMap): void {\n  engine.applyTokenSet(tokens)\n}\n\nexport function getToken(name: string): string | undefined {\n  return engine.getToken(name)\n}\n\nexport function getTokens(): TokenMap {\n  return engine.getTokens()\n}\n\nexport function subscribeTokens(fn: TokenSubscriber): () => void {\n  return engine.subscribe(fn)\n}\n\nexport function generateTokenCssString(): string {\n  return engine.generateTokenCssString()\n}\n\nexport function createUseTokens() {\n  return function useTokens(): TokenMap {\n    // useSyncExternalStore untuk konsistensi SSR/client:\n    // - getServerSnapshot() return empty object → SSR render tanpa tokens\n    // - getSnapshot() return live tokens di client setelah hydration\n    // Ini menghilangkan hydration mismatch karena server dan client\n    // initial render keduanya return {} (empty), lalu useEffect update\n    // ke nilai aktual via subscriber.\n    const [tokens, setTokensState] = React.useState<TokenMap>({})\n\n    React.useEffect(() => {\n      // Set ke nilai aktual setelah mount (client-only)\n      setTokensState(engine.getTokens())\n      return engine.subscribe((nextTokens) => setTokensState(nextTokens))\n    }, [])\n\n    return tokens\n  }\n}\n\nexport const liveTokenEngine: LiveTokenEngineBridge = {\n  getToken: engine.getToken,\n  getTokens: engine.getTokens,\n  setToken: engine.setToken,\n  setTokens: engine.setTokens,\n  applyTokenSet: engine.applyTokenSet,\n  subscribeTokens: engine.subscribe,\n  subscribe: engine.subscribe,\n}\n\ndeclare global {\n  interface Window {\n    __TW_TOKEN_ENGINE__?: LiveTokenEngineBridge\n  }\n}\n\nconst globalTokenEngine = globalThis as typeof globalThis & {\n  [TOKEN_ENGINE_KEY]?: LiveTokenEngineBridge\n}\n\nglobalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine\nif (typeof window !== \"undefined\") {\n  window.__TW_TOKEN_ENGINE__ = liveTokenEngine\n}\n","import { z } from \"zod\"\n\nconst formatIssues = (error: z.ZodError): string =>\n  error.issues\n    .map((issue) => {\n      const p = issue.path.length > 0 ? issue.path.join(\".\") : \"<root>\"\n      return `${p}: ${issue.message}`\n    })\n    .join(\"; \")\n\nconst parseWithSchema = <T>(schema: z.ZodType<T>, data: unknown, label: string): T => {\n  const parsed = schema.safeParse(data)\n  if (parsed.success) return parsed.data\n  throw new TypeError(`${label}: ${formatIssues(parsed.error)}`)\n}\n\nexport const SubComponentDefSchema = z.object({\n  tag: z.string().optional(),\n  class: z.string(),\n})\n\nexport type SubComponentDefInput = z.infer<typeof SubComponentDefSchema>\n\nexport const ComponentMetadataSchema = z.object({\n  component: z.string(),\n  tag: z.string(),\n  baseClass: z.string(),\n  subComponents: z.record(z.string(), SubComponentDefSchema),\n})\n\nexport type ComponentMetadataInput = z.infer<typeof ComponentMetadataSchema>\n\nexport const ConditionalPropsSchema = z.record(z.string(), z.string())\n\nexport type ConditionalPropsInput = z.infer<typeof ConditionalPropsSchema>\n\nexport const parseSubComponentDef = (data: unknown) =>\n  parseWithSchema(SubComponentDefSchema, data, \"sub-component definition is invalid\")\n\nexport const parseComponentMetadata = (data: unknown) =>\n  parseWithSchema(ComponentMetadataSchema, data, \"component metadata is invalid\")\n"],"mappings":"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","names":["React","setToken","setTokens","applyTokenSet","React"]}
+{"version":3,"sources":["../packages/domain/runtime/src/index.ts","../packages/domain/theme/src/liveTokenEngine.ts","../packages/domain/runtime/src/schemas.ts"],"sourcesContent":["/**\n * @tailwind-styled/runtime v5\n *\n * Lightweight runtime helpers for compiled tailwind-styled-v5 components.\n * Live token engine has been moved to @tailwind-styled/theme package.\n */\n\nimport React from \"react\"\n\n// Re-export live token engine from @tailwind-styled/theme\nexport type {\n  LiveTokenEngineBridge,\n  LiveTokenSet,\n  TokenMap,\n  TokenSubscriber,\n} from \"@tailwind-styled/theme\"\nexport {\n  applyTokenSet,\n  createUseTokens,\n  generateTokenCssString,\n  getToken,\n  getTokens,\n  liveToken,\n  liveTokenEngine,\n  setToken,\n  setTokens,\n  subscribeTokens,\n  tokenRef,\n  tokenVar,\n} from \"@tailwind-styled/theme/live-tokens\"\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface SubComponentDef {\n  /** HTML tag to render (default: \"span\") */\n  tag?: string\n  /** Scoped CSS class generated by Rust, e.g. \"Button_icon_abc123\" */\n  class: string\n}\n\nexport type SubComponentMap = Record<string, SubComponentDef>\n\n/**\n * Map of prop name → CSS class appended when the prop is truthy.\n * e.g. { fullWidth: \"w-full\", large: \"text-lg px-6 py-3\" }\n */\nexport type ConditionalProps = Record<string, string>\n\n/**\n * A compound styled component: base ForwardRef + attached .SubName properties.\n * The generic params are intentionally loose so callers don't need to repeat them.\n */\nexport type StyledComponent<S extends SubComponentMap = SubComponentMap> =\n  React.ForwardRefExoticComponent<\n    React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n  > & {\n    [K in keyof S]: React.ForwardRefExoticComponent<\n      React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>\n    >\n  }\n\n/** Metadata for one compound component produced by Rust. */\nexport interface ComponentMetadata {\n  component: string\n  tag: string\n  baseClass: string\n  subComponents: SubComponentMap\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// cx — tiny className utility (no external dependency)\n// ─────────────────────────────────────────────────────────────────────────────\n\ntype ClassInput = string | number | false | null | undefined | ClassInput[]\n\nexport function cx(...inputs: ClassInput[]): string {\n  const out: string[] = []\n  for (const input of inputs) {\n    if (!input) continue // filters 0, false, null, undefined, \"\"\n    if (typeof input === \"string\") {\n      out.push(input)\n    } else if (typeof input === \"number\") {\n      out.push(String(input))\n    } else if (Array.isArray(input)) {\n      const nested = cx(...input)\n      if (nested) out.push(nested)\n    }\n  }\n  return out.join(\" \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// createComponent\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Build a compound styled React component from Rust-generated metadata.\n *\n * @param tag           HTML element tag, e.g. \"button\" | \"div\"\n * @param baseClass     Scoped base class from Rust, e.g. \"Button_abc123\"\n * @param subComponents Map of subcomponent definitions (optional)\n * @param conditionals  Map of prop name → CSS class (optional)\n *\n * @example\n * // Injected automatically by the compiler — do not call manually\n * const Button = createComponent(\"button\", \"Button_abc123\", {\n *   icon: { tag: \"span\", class: \"Button_icon_abc123\" },\n *   text: { tag: \"span\", class: \"Button_text_abc123\" },\n * }, { fullWidth: \"w-full\" })\n *\n * // Usage in JSX:\n * <Button fullWidth>\n *   <Button.icon>🔍</Button.icon>\n *   <Button.text>Search</Button.text>\n * </Button>\n */\nexport function createComponent<S extends SubComponentMap = SubComponentMap>(\n  tag: string,\n  baseClass: string,\n  subComponents?: S,\n  conditionals?: ConditionalProps\n): StyledComponent<S> {\n  type Props = React.HTMLAttributes<HTMLElement> &\n    React.RefAttributes<HTMLElement> &\n    Record<string, unknown>\n\n  // ── Base component ─────────────────────────────────────────────────────────\n  const Base = React.forwardRef<HTMLElement, Props>(function TwBase(props, ref) {\n    const extra: string[] = []\n\n    // Collect conditional classes\n    if (conditionals) {\n      for (const [prop, cls] of Object.entries(conditionals)) {\n        if (props[prop]) extra.push(cls)\n      }\n    }\n\n    // Build clean props — strip conditional + subcomponent boolean props\n    const clean: Record<string, unknown> = {}\n    const stripKeys = new Set([\n      \"className\",\n      ...(conditionals ? Object.keys(conditionals) : []),\n      ...(subComponents ? Object.keys(subComponents) : []),\n    ])\n    for (const [k, v] of Object.entries(props)) {\n      if (!stripKeys.has(k)) clean[k] = v\n    }\n\n    const className = cx(baseClass, ...extra, (props.className as string) ?? \"\")\n\n    return React.createElement(tag, { ...clean, ref, className: className || undefined })\n  })\n\n  ;(Base as { displayName?: string }).displayName = `tw.${String(tag)}`\n\n  // ── Attach subcomponent properties ────────────────────────────────────────\n  if (subComponents) {\n    for (const [subName, def] of Object.entries(subComponents)) {\n      const subTag = def.tag ?? \"span\"\n      const subClass = def.class\n\n      const SubComp = React.forwardRef<HTMLElement, Props>(function TwSub(props, ref) {\n        const className = cx(subClass, (props.className as string) ?? \"\")\n        const clean: Record<string, unknown> = { ...props }\n        delete clean.className\n        return React.createElement(subTag, { ...clean, ref, className: className || undefined })\n      })\n\n      ;(SubComp as { displayName?: string }).displayName = `tw.${String(tag)}.${String(subName)}`\n\n      ;(Base as unknown as Record<string, unknown>)[subName] = SubComp\n    }\n  }\n\n  return Base as StyledComponent<S>\n}\n\n// Re-export schemas\nexport {\n  type ComponentMetadataInput,\n  ComponentMetadataSchema,\n  type ConditionalPropsInput,\n  ConditionalPropsSchema,\n  parseComponentMetadata,\n  parseSubComponentDef,\n  type SubComponentDefInput,\n  SubComponentDefSchema,\n} from \"./schemas\"\n","\"use client\"\n\nimport React from \"react\"\n\nimport type { TokenMap } from '@tailwind-styled/shared'\nexport type { TokenMap }\n\nexport type TokenSubscriber = (tokens: TokenMap) => void\n\nexport interface LiveTokenSet {\n  vars: Record<string, string>\n  get(name: string): string | undefined\n  set(name: string, value: string): void\n  setAll(tokens: TokenMap): void\n  snapshot(): TokenMap\n}\n\nexport interface LiveTokenEngineBridge {\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  subscribeTokens(fn: TokenSubscriber): () => void\n  subscribe?(fn: TokenSubscriber): () => void\n}\n\ninterface LiveTokenEngineRuntime {\n  liveToken(tokens: TokenMap): LiveTokenSet\n  getToken(name: string): string | undefined\n  getTokens(): TokenMap\n  setToken(name: string, value: string): void\n  setTokens(tokens: TokenMap): void\n  applyTokenSet(tokens: TokenMap): void\n  generateTokenCssString(): string\n  subscribe(fn: TokenSubscriber): () => void\n  markHydrated(): void\n}\n\nconst TOKEN_ENGINE_KEY = \"__TW_TOKEN_ENGINE__\"\n\nexport function tokenVar(name: string): string {\n  const normalized = name.replace(/[^a-zA-Z0-9-]/g, \"-\").toLowerCase()\n  return `--tw-token-${normalized}`\n}\n\nexport function tokenRef(name: string): string {\n  return `var(${tokenVar(name)})`\n}\n\nconst buildRootCss = (tokens: TokenMap): string => {\n  const vars = Object.entries(tokens)\n    .map(([name, value]) => `  ${tokenVar(name)}: ${value};`)\n    .join(\"\\n\")\n  return `:root {\\n${vars}\\n}`\n}\n\nconst createLiveTokenEngine = (): LiveTokenEngineRuntime => {\n  const state = {\n    currentTokens: {} as TokenMap,\n    styleEl: null as HTMLStyleElement | null,\n    // Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.\n    // Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang\n    // dipanggil di module top-level akan langsung document.documentElement\n    // .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum\n    // React selesai hydrate — sehingga <html> versi live DOM beda dengan\n    // <html> yang di-render server (yang gak pernah nyentuh `document`).\n    hydrated: false,\n  }\n  const subscribers = new Set<TokenSubscriber>()\n\n  const syncStyleEl = (): void => {\n    if (!state.hydrated || typeof document === \"undefined\") return\n\n    if (!state.styleEl) {\n      const styleEl = document.createElement(\"style\")\n      styleEl.id = \"tw-live-tokens\"\n      styleEl.setAttribute(\"data-tw-tokens\", \"true\")\n      document.head.appendChild(styleEl)\n      state.styleEl = styleEl\n    }\n\n    state.styleEl.textContent = buildRootCss(state.currentTokens)\n  }\n\n  const notifySubscribers = (): void => {\n    const snapshot = { ...state.currentTokens }\n    for (const subscriber of subscribers) {\n      try {\n        subscriber(snapshot)\n      } catch {\n        // Intentionally ignore subscriber errors.\n      }\n    }\n  }\n\n  const setToken = (name: string, value: string): void => {\n    state.currentTokens = { ...state.currentTokens, [name]: value }\n    if (state.hydrated && typeof document !== \"undefined\") {\n      document.documentElement.style.setProperty(tokenVar(name), value)\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const setTokens = (tokens: TokenMap): void => {\n    state.currentTokens = { ...state.currentTokens, ...tokens }\n    if (state.hydrated && typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  const applyTokenSet = (tokens: TokenMap): void => {\n    if (state.hydrated && typeof document !== \"undefined\") {\n      const root = document.documentElement\n      for (const name of Object.keys(state.currentTokens)) {\n        if (!(name in tokens)) {\n          root.style.removeProperty(tokenVar(name))\n        }\n      }\n      for (const [name, value] of Object.entries(tokens)) {\n        root.style.setProperty(tokenVar(name), value)\n      }\n    }\n\n    state.currentTokens = { ...tokens }\n    syncStyleEl()\n    notifySubscribers()\n  }\n\n  // Dipanggil sekali setelah mount pertama (lewat useTokens()'s useEffect, atau\n  // fallback rAF di bawah buat consumer yang pakai API imperative tanpa hook).\n  // Setelah ini true, semua write di atas balik sinkron langsung seperti semula.\n  const markHydrated = (): void => {\n    if (state.hydrated || typeof document === \"undefined\") return\n    state.hydrated = true\n    const root = document.documentElement\n    for (const [name, value] of Object.entries(state.currentTokens)) {\n      root.style.setProperty(tokenVar(name), value)\n    }\n    syncStyleEl()\n  }\n\n  if (typeof window !== \"undefined\") {\n    // Fallback buat consumer yang gak pakai useTokens() hook (cuma pakai\n    // liveToken().set() imperatif): tetap flush setelah paint pertama,\n    // jauh lebih aman daripada langsung saat module di-evaluasi.\n    requestAnimationFrame(markHydrated)\n  }\n\n  return {\n    markHydrated,\n    liveToken(tokens: TokenMap): LiveTokenSet {\n      setTokens(tokens)\n\n      const vars: Record<string, string> = {}\n      for (const name of Object.keys(tokens)) {\n        vars[name] = tokenRef(name)\n      }\n\n      return {\n        vars,\n        get(name: string) {\n          return state.currentTokens[name]\n        },\n        set(name: string, value: string) {\n          setToken(name, value)\n        },\n        setAll(nextTokens: TokenMap) {\n          setTokens(nextTokens)\n        },\n        snapshot() {\n          return { ...state.currentTokens }\n        },\n      }\n    },\n    getToken(name: string): string | undefined {\n      return state.currentTokens[name]\n    },\n    getTokens(): TokenMap {\n      return { ...state.currentTokens }\n    },\n    setToken,\n    setTokens,\n    applyTokenSet,\n    generateTokenCssString(): string {\n      return buildRootCss(state.currentTokens)\n    },\n    subscribe(fn: TokenSubscriber): () => void {\n      subscribers.add(fn)\n      return () => {\n        subscribers.delete(fn)\n      }\n    },\n  }\n}\n\nconst engine = createLiveTokenEngine()\n\nexport function liveToken(tokens: TokenMap): LiveTokenSet {\n  return engine.liveToken(tokens)\n}\n\nexport function setToken(name: string, value: string): void {\n  engine.setToken(name, value)\n}\n\nexport function setTokens(tokens: TokenMap): void {\n  engine.setTokens(tokens)\n}\n\nexport function applyTokenSet(tokens: TokenMap): void {\n  engine.applyTokenSet(tokens)\n}\n\nexport function getToken(name: string): string | undefined {\n  return engine.getToken(name)\n}\n\nexport function getTokens(): TokenMap {\n  return engine.getTokens()\n}\n\nexport function subscribeTokens(fn: TokenSubscriber): () => void {\n  return engine.subscribe(fn)\n}\n\nexport function generateTokenCssString(): string {\n  return engine.generateTokenCssString()\n}\n\nexport function createUseTokens() {\n  return function useTokens(): TokenMap {\n    // useSyncExternalStore untuk konsistensi SSR/client:\n    // - getServerSnapshot() return empty object → SSR render tanpa tokens\n    // - getSnapshot() return live tokens di client setelah hydration\n    // Ini menghilangkan hydration mismatch karena server dan client\n    // initial render keduanya return {} (empty), lalu useEffect update\n    // ke nilai aktual via subscriber.\n    const [tokens, setTokensState] = React.useState<TokenMap>({})\n\n    React.useEffect(() => {\n      // Baru sekarang aman nyentuh document.documentElement — hydration\n      // udah pasti selesai di titik ini. markHydrated() flush token yang\n      // sempat ditunda dari liveToken() init call (lihat createLiveTokenEngine).\n      engine.markHydrated()\n      // Set ke nilai aktual setelah mount (client-only)\n      setTokensState(engine.getTokens())\n      return engine.subscribe((nextTokens) => setTokensState(nextTokens))\n    }, [])\n\n    return tokens\n  }\n}\n\nexport const liveTokenEngine: LiveTokenEngineBridge = {\n  getToken: engine.getToken,\n  getTokens: engine.getTokens,\n  setToken: engine.setToken,\n  setTokens: engine.setTokens,\n  applyTokenSet: engine.applyTokenSet,\n  subscribeTokens: engine.subscribe,\n  subscribe: engine.subscribe,\n}\n\ndeclare global {\n  interface Window {\n    __TW_TOKEN_ENGINE__?: LiveTokenEngineBridge\n  }\n}\n\nconst globalTokenEngine = globalThis as typeof globalThis & {\n  [TOKEN_ENGINE_KEY]?: LiveTokenEngineBridge\n}\n\nglobalTokenEngine[TOKEN_ENGINE_KEY] = liveTokenEngine\nif (typeof window !== \"undefined\") {\n  window.__TW_TOKEN_ENGINE__ = liveTokenEngine\n}\n","import { z } from \"zod\"\n\nconst formatIssues = (error: z.ZodError): string =>\n  error.issues\n    .map((issue) => {\n      const p = issue.path.length > 0 ? issue.path.join(\".\") : \"<root>\"\n      return `${p}: ${issue.message}`\n    })\n    .join(\"; \")\n\nconst parseWithSchema = <T>(schema: z.ZodType<T>, data: unknown, label: string): T => {\n  const parsed = schema.safeParse(data)\n  if (parsed.success) return parsed.data\n  throw new TypeError(`${label}: ${formatIssues(parsed.error)}`)\n}\n\nexport const SubComponentDefSchema = z.object({\n  tag: z.string().optional(),\n  class: z.string(),\n})\n\nexport type SubComponentDefInput = z.infer<typeof SubComponentDefSchema>\n\nexport const ComponentMetadataSchema = z.object({\n  component: z.string(),\n  tag: z.string(),\n  baseClass: z.string(),\n  subComponents: z.record(z.string(), SubComponentDefSchema),\n})\n\nexport type ComponentMetadataInput = z.infer<typeof ComponentMetadataSchema>\n\nexport const ConditionalPropsSchema = z.record(z.string(), z.string())\n\nexport type ConditionalPropsInput = z.infer<typeof ConditionalPropsSchema>\n\nexport const parseSubComponentDef = (data: unknown) =>\n  parseWithSchema(SubComponentDefSchema, data, \"sub-component definition is invalid\")\n\nexport const parseComponentMetadata = (data: unknown) =>\n  parseWithSchema(ComponentMetadataSchema, data, \"component metadata is invalid\")\n"],"mappings":"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","names":["React","setToken","setTokens","applyTokenSet","React"]}

package/dist/theme.js

@@ -179,11 +179,18 @@ ${vars}
 var createLiveTokenEngine = () => {
   const state = {
     currentTokens: {},
-    styleEl: null
+    styleEl: null,
+    // Belum boleh nyentuh live DOM sampai komponen pertama selesai mount.
+    // Ini yang nyegah hydration mismatch: tanpa flag ini, liveToken() yang
+    // dipanggil di module top-level akan langsung document.documentElement
+    // .style.setProperty(...) saat bundle client di-evaluasi — JAUH sebelum
+    // React selesai hydrate — sehingga <html> versi live DOM beda dengan
+    // <html> yang di-render server (yang gak pernah nyentuh `document`).
+    hydrated: false
   };
   const subscribers = /* @__PURE__ */ new Set();
   const syncStyleEl = () => {
-    if (typeof document === "undefined") return;
+    if (!state.hydrated || typeof document === "undefined") return;
     if (!state.styleEl) {
       const styleEl = document.createElement("style");
       styleEl.id = "tw-live-tokens";
@@ -204,7 +211,7 @@ var createLiveTokenEngine = () => {
   };
   const setToken2 = (name, value) => {
     state.currentTokens = { ...state.currentTokens, [name]: value };
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       document.documentElement.style.setProperty(tokenVar(name), value);
     }
     syncStyleEl();
@@ -212,7 +219,7 @@ var createLiveTokenEngine = () => {
   };
   const setTokens2 = (tokens) => {
     state.currentTokens = { ...state.currentTokens, ...tokens };
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       const root = document.documentElement;
       for (const [name, value] of Object.entries(tokens)) {
         root.style.setProperty(tokenVar(name), value);
@@ -222,7 +229,7 @@ var createLiveTokenEngine = () => {
     notifySubscribers();
   };
   const applyTokenSet2 = (tokens) => {
-    if (typeof document !== "undefined") {
+    if (state.hydrated && typeof document !== "undefined") {
       const root = document.documentElement;
       for (const name of Object.keys(state.currentTokens)) {
         if (!(name in tokens)) {
@@ -237,7 +244,20 @@ var createLiveTokenEngine = () => {
     syncStyleEl();
     notifySubscribers();
   };
+  const markHydrated = () => {
+    if (state.hydrated || typeof document === "undefined") return;
+    state.hydrated = true;
+    const root = document.documentElement;
+    for (const [name, value] of Object.entries(state.currentTokens)) {
+      root.style.setProperty(tokenVar(name), value);
+    }
+    syncStyleEl();
+  };
+  if (typeof window !== "undefined") {
+    requestAnimationFrame(markHydrated);
+  }
   return {
+    markHydrated,
     liveToken(tokens) {
       setTokens2(tokens);
       const vars = {};
@@ -309,6 +329,7 @@ function createUseTokens() {
   return function useTokens() {
     const [tokens, setTokensState] = import_react.default.useState({});
     import_react.default.useEffect(() => {
+      engine.markHydrated();
       setTokensState(engine.getTokens());
       return engine.subscribe((nextTokens) => setTokensState(nextTokens));
     }, []);