tailwind-styled-v4 5.0.0 → 5.0.1

package/dist/runtime.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/theme/src/liveTokenEngine.ts","../packages/runtime/src/index.ts"],"names":["React"],"mappings":"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","file":"runtime.mjs","sourcesContent":["import React from \"react\"\n\nexport type TokenMap = Record<string, string>\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  applyTokenSet(tokens: TokenMap): void\n  subscribeTokens(fn: TokenSubscriber): () => void\n  subscribe?(fn: TokenSubscriber): () => void\n}\n\ndeclare global {\n  var __TW_TOKEN_ENGINE__: LiveTokenEngineBridge | undefined\n}\n\nlet _currentTokens: TokenMap = {}\nconst _subscribers = new Set<TokenSubscriber>()\nlet _styleEl: HTMLStyleElement | null = null\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\nfunction 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\nfunction syncStyleEl(): void {\n  if (typeof document === \"undefined\") return\n\n  if (!_styleEl) {\n    _styleEl = document.createElement(\"style\")\n    _styleEl.id = \"tw-live-tokens\"\n    _styleEl.setAttribute(\"data-tw-tokens\", \"true\")\n    document.head.appendChild(_styleEl)\n  }\n\n  _styleEl.textContent = buildRootCss(_currentTokens)\n}\n\nfunction notifySubscribers(): void {\n  const snapshot = { ..._currentTokens }\n  for (const subscriber of _subscribers) {\n    try {\n      subscriber(snapshot)\n    } catch {\n      // intentionally ignore subscriber errors\n    }\n  }\n}\n\nexport function liveToken(tokens: TokenMap): LiveTokenSet {\n  _currentTokens = { ..._currentTokens, ...tokens }\n  syncStyleEl()\n  notifySubscribers()\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) {\n      return _currentTokens[name]\n    },\n    set(name, value) {\n      setToken(name, value)\n    },\n    setAll(nextTokens) {\n      setTokens(nextTokens)\n    },\n    snapshot() {\n      return { ..._currentTokens }\n    },\n  }\n}\n\nexport function setToken(name: string, value: string): void {\n  _currentTokens = { ..._currentTokens, [name]: value }\n\n  if (typeof document !== \"undefined\") {\n    document.documentElement.style.setProperty(tokenVar(name), value)\n  }\n\n  notifySubscribers()\n}\n\nexport function setTokens(tokens: TokenMap): void {\n  _currentTokens = { ..._currentTokens, ...tokens }\n\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\n  notifySubscribers()\n}\n\nexport function applyTokenSet(tokens: TokenMap): void {\n  if (typeof document !== \"undefined\") {\n    const root = document.documentElement\n    for (const name of Object.keys(_currentTokens)) {\n      if (!(name in tokens)) {\n        root.style.removeProperty(tokenVar(name))\n      }\n    }\n  }\n\n  _currentTokens = { ...tokens }\n  syncStyleEl()\n  notifySubscribers()\n}\n\nexport function getToken(name: string): string | undefined {\n  return _currentTokens[name]\n}\n\nexport function getTokens(): TokenMap {\n  return { ..._currentTokens }\n}\n\nexport function subscribeTokens(fn: TokenSubscriber): () => void {\n  _subscribers.add(fn)\n  return () => {\n    _subscribers.delete(fn)\n  }\n}\n\nexport function generateTokenCssString(): string {\n  return buildRootCss(_currentTokens)\n}\n\nexport function createUseTokens() {\n  return function useTokens(): TokenMap {\n    const [tokens, setTokensState] = React.useState<TokenMap>({ ..._currentTokens })\n\n    React.useEffect(() => {\n      setTokensState({ ..._currentTokens })\n      return subscribeTokens((nextTokens) => setTokensState({ ...nextTokens }))\n    }, [])\n\n    return tokens\n  }\n}\n\nexport const liveTokenEngine: LiveTokenEngineBridge = {\n  getToken,\n  getTokens,\n  setToken,\n  applyTokenSet,\n  subscribeTokens,\n  subscribe: subscribeTokens,\n}\n\nglobalThis.__TW_TOKEN_ENGINE__ = liveTokenEngine\nif (typeof window !== \"undefined\") {\n  ;(window as any).__TW_TOKEN_ENGINE__ = liveTokenEngine\n}\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\"\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 =\n        \"tw.\" + String(tag) + \".\" + String(subName)\n\n      ;(Base as unknown as Record<string, unknown>)[subName] = SubComp\n    }\n  }\n\n  return Base as unknown as StyledComponent<S>\n}\n"]}

package/dist/runtimeCss.d.mts

@@ -0,0 +1,65 @@
+import React from 'react';
+
+interface CssInjectorProps {
+    /** Override CSS directory. Default: .next/static/css/tw */
+    cssDir?: string;
+    /** Specific route to inject. Default: auto-detect dari headers */
+    route?: string;
+    /** Inject global CSS juga. Default: true */
+    includeGlobal?: boolean;
+    /** Minify inline CSS. Default: true */
+    minify?: boolean;
+    /** Add <link> tag instead of inline <style> untuk cached CSS */
+    asLink?: boolean;
+    /** Override manifest path for dev mode */
+    manifestPath?: string;
+}
+/**
+ * Server Component — inject route-specific CSS into <head>.
+ * No client JS, no hydration overhead.
+ */
+declare function TwCssInjector(props?: CssInjectorProps): Promise<React.ReactElement>;
+/**
+ * Lightweight hook to get current route's CSS classes.
+ * Useful for dynamic class injection in client components.
+ *
+ * Returns empty string on server (SSR) — CSS already injected by TwCssInjector.
+ */
+declare function useTwClasses(classes: string): string;
+
+/**
+ * Queue a CSS rule for batched injection.
+ * Multiple rules accumulated during one event loop tick are flushed together
+ * in one requestAnimationFrame → one style recalculation.
+ */
+declare function batchedInject(cssRule: string): void;
+/**
+ * Immediately flush all pending CSS rules to the DOM.
+ * Called automatically by RAF each frame. Can also be called manually
+ * after synchronous component setup where RAF timing is too late.
+ */
+declare function flushBatchedCss(): void;
+/**
+ * Synchronous inject — skips batching.
+ * Use for SSR / critical path where RAF is not available.
+ */
+declare function syncInject(cssRule: string): void;
+/**
+ * Check if a rule has already been injected (deduplication check).
+ */
+declare function isInjected(cssRule: string): boolean;
+/**
+ * Clear all injected rules and remove the style element.
+ * Useful for testing / SSR resets. Not for production use.
+ */
+declare function resetBatchedCss(): void;
+/**
+ * Get stats about the current injection state (for devtools).
+ */
+declare function getBatchedCssStats(): {
+    totalInjected: number;
+    pendingCount: number;
+    hasBatchScheduled: boolean;
+};
+
+export { TwCssInjector, batchedInject, flushBatchedCss, getBatchedCssStats, isInjected, resetBatchedCss, syncInject, useTwClasses };

package/dist/runtimeCss.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+
+interface CssInjectorProps {
+    /** Override CSS directory. Default: .next/static/css/tw */
+    cssDir?: string;
+    /** Specific route to inject. Default: auto-detect dari headers */
+    route?: string;
+    /** Inject global CSS juga. Default: true */
+    includeGlobal?: boolean;
+    /** Minify inline CSS. Default: true */
+    minify?: boolean;
+    /** Add <link> tag instead of inline <style> untuk cached CSS */
+    asLink?: boolean;
+    /** Override manifest path for dev mode */
+    manifestPath?: string;
+}
+/**
+ * Server Component — inject route-specific CSS into <head>.
+ * No client JS, no hydration overhead.
+ */
+declare function TwCssInjector(props?: CssInjectorProps): Promise<React.ReactElement>;
+/**
+ * Lightweight hook to get current route's CSS classes.
+ * Useful for dynamic class injection in client components.
+ *
+ * Returns empty string on server (SSR) — CSS already injected by TwCssInjector.
+ */
+declare function useTwClasses(classes: string): string;
+
+/**
+ * Queue a CSS rule for batched injection.
+ * Multiple rules accumulated during one event loop tick are flushed together
+ * in one requestAnimationFrame → one style recalculation.
+ */
+declare function batchedInject(cssRule: string): void;
+/**
+ * Immediately flush all pending CSS rules to the DOM.
+ * Called automatically by RAF each frame. Can also be called manually
+ * after synchronous component setup where RAF timing is too late.
+ */
+declare function flushBatchedCss(): void;
+/**
+ * Synchronous inject — skips batching.
+ * Use for SSR / critical path where RAF is not available.
+ */
+declare function syncInject(cssRule: string): void;
+/**
+ * Check if a rule has already been injected (deduplication check).
+ */
+declare function isInjected(cssRule: string): boolean;
+/**
+ * Clear all injected rules and remove the style element.
+ * Useful for testing / SSR resets. Not for production use.
+ */
+declare function resetBatchedCss(): void;
+/**
+ * Get stats about the current injection state (for devtools).
+ */
+declare function getBatchedCssStats(): {
+    totalInjected: number;
+    pendingCount: number;
+    hasBatchScheduled: boolean;
+};
+
+export { TwCssInjector, batchedInject, flushBatchedCss, getBatchedCssStats, isInjected, resetBatchedCss, syncInject, useTwClasses };

package/dist/{css.cjs → runtimeCss.js}

@@ -1,6 +1,5 @@
 'use strict';
 
-require('./chunk-Y5D3E72P.cjs');
 var fs = require('fs');
 var path = require('path');
 var React = require('react');
@@ -11,7 +10,8 @@ var fs__default = /*#__PURE__*/_interopDefault(fs);
 var path__default = /*#__PURE__*/_interopDefault(path);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-/* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+
 var defaultProps = {
   cssDir: void 0,
   route: void 0,
@@ -115,7 +115,74 @@ function minifyCss(css) {
   return css.replace(/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g, "").replace(/\s+/g, " ").replace(/\s*{\s*/g, "{").replace(/\s*}\s*/g, "}").replace(/\s*;\s*/g, ";").trim();
 }
 
+// packages/runtime-css/src/batchedInjector.ts
+var injected = /* @__PURE__ */ new Set();
+var pending = [];
+var rafHandle = null;
+var styleEl = null;
+function getStyleElement() {
+  if (styleEl && document.head.contains(styleEl)) return styleEl;
+  styleEl = document.createElement("style");
+  styleEl.id = "__tw-runtime-css";
+  styleEl.setAttribute("data-tw-batched", "true");
+  document.head.appendChild(styleEl);
+  return styleEl;
+}
+function batchedInject(cssRule) {
+  if (typeof window === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  pending.push(cssRule);
+  if (rafHandle === null) {
+    rafHandle = requestAnimationFrame(flushBatchedCss);
+  }
+}
+function flushBatchedCss() {
+  rafHandle = null;
+  if (pending.length === 0 || typeof document === "undefined") return;
+  const el = getStyleElement();
+  const css = pending.join("\n");
+  pending.length = 0;
+  el.textContent += `
+${css}`;
+}
+function syncInject(cssRule) {
+  if (typeof document === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  getStyleElement().textContent += `
+${cssRule}`;
+}
+function isInjected(cssRule) {
+  return injected.has(cssRule);
+}
+function resetBatchedCss() {
+  injected.clear();
+  pending.length = 0;
+  if (rafHandle !== null) {
+    cancelAnimationFrame(rafHandle);
+    rafHandle = null;
+  }
+  if (styleEl && document.head.contains(styleEl)) {
+    document.head.removeChild(styleEl);
+    styleEl = null;
+  }
+}
+function getBatchedCssStats() {
+  return {
+    totalInjected: injected.size,
+    pendingCount: pending.length,
+    hasBatchScheduled: rafHandle !== null
+  };
+}
+
 exports.TwCssInjector = TwCssInjector;
+exports.batchedInject = batchedInject;
+exports.flushBatchedCss = flushBatchedCss;
+exports.getBatchedCssStats = getBatchedCssStats;
+exports.isInjected = isInjected;
+exports.resetBatchedCss = resetBatchedCss;
+exports.syncInject = syncInject;
 exports.useTwClasses = useTwClasses;
-//# sourceMappingURL=css.cjs.map
-//# sourceMappingURL=css.cjs.map
+//# sourceMappingURL=runtimeCss.js.map
+//# sourceMappingURL=runtimeCss.js.map

package/dist/runtimeCss.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/runtime-css/src/CssInjector.tsx","../packages/runtime-css/src/batchedInjector.ts"],"names":["path","React","fs"],"mappings":"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","file":"runtimeCss.js","sourcesContent":["\"use server\"\n\n/**\n * tailwind-styled-v5 — CSS Injector (React Server Component)\n *\n * Inject CSS yang sudah di-generate per-route langsung ke <head>.\n * Dipakai di Next.js App Router layout atau page.\n *\n * Di server component — inject inline CSS, zero client JS.\n * Streaming friendly — CSS di-emit bersamaan dengan HTML.\n *\n * Usage:\n *   // app/layout.tsx\n *   import { TwCssInjector } from \"tailwind-styled-v4/css\"\n *   export default function Layout({ children }) {\n *     return <html><head><TwCssInjector/></head><body>{children}</body></html>\n *   }\n */\n\nimport fs from \"node:fs\"\nimport path from \"node:path\"\nimport React from \"react\"\n\ninterface CssInjectorProps {\n  /** Override CSS directory. Default: .next/static/css/tw */\n  cssDir?: string\n  /** Specific route to inject. Default: auto-detect dari headers */\n  route?: string\n  /** Inject global CSS juga. Default: true */\n  includeGlobal?: boolean\n  /** Minify inline CSS. Default: true */\n  minify?: boolean\n  /** Add <link> tag instead of inline <style> untuk cached CSS */\n  asLink?: boolean\n  /** Override manifest path for dev mode */\n  manifestPath?: string\n}\n\nconst defaultProps: CssInjectorProps = {\n  cssDir: undefined,\n  route: undefined,\n  includeGlobal: true,\n  minify: true,\n  asLink: false,\n  manifestPath: undefined,\n}\n\n/**\n * Server Component — inject route-specific CSS into <head>.\n * No client JS, no hydration overhead.\n */\nexport async function TwCssInjector(props?: CssInjectorProps): Promise<React.ReactElement> {\n  const { cssDir, route, includeGlobal, minify, asLink, manifestPath } = {\n    ...defaultProps,\n    ...props,\n  }\n  const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\")\n\n  const cssChunks: string[] = []\n\n  // Try manifest-based loading first (for dev mode)\n  if (manifestPath) {\n    const manifestCss = loadCssFromManifest(manifestPath, route ?? \"/\")\n    if (manifestCss) {\n      cssChunks.push(manifestCss)\n    }\n  } else {\n    // Fallback: legacy file-based loading with path detection\n    const detectedManifest = detectManifestPath(resolvedDir)\n    if (detectedManifest) {\n      const manifestCss = loadCssFromManifest(detectedManifest, route ?? \"/\")\n      if (manifestCss) {\n        cssChunks.push(manifestCss)\n      }\n    }\n  }\n\n  // 1. Global CSS (base styles, reset)\n  if (includeGlobal) {\n    const globalCss = loadCssFile(path.join(resolvedDir, \"_global.css\"))\n    if (globalCss) cssChunks.push(globalCss)\n  }\n\n  // 2. Route-specific CSS\n  const targetRoute = route ?? \"/\"\n  const routeFile = routeToFilename(targetRoute)\n  const routeCss = loadCssFile(path.join(resolvedDir, routeFile))\n  if (routeCss) cssChunks.push(routeCss)\n\n  if (cssChunks.length === 0) return React.createElement(React.Fragment, null)\n\n  const combined = cssChunks.join(\"\\n\")\n  const final = minify ? minifyCss(combined) : combined\n\n  if (asLink) {\n    // Return <link> tag — CSS cached by browser\n    return React.createElement(\"link\", {\n      rel: \"stylesheet\",\n      href: `/_next/static/css/tw/${routeFile}`,\n      crossOrigin: \"anonymous\",\n    })\n  }\n\n  // Inline <style> — zero network request, fastest FCP\n  return React.createElement(\"style\", {\n    dangerouslySetInnerHTML: { __html: final },\n    \"data-tw-route\": targetRoute,\n  })\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Hook for client components\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Lightweight hook to get current route's CSS classes.\n * Useful for dynamic class injection in client components.\n *\n * Returns empty string on server (SSR) — CSS already injected by TwCssInjector.\n */\nexport function useTwClasses(classes: string): string {\n  // In client environment, return classes as-is\n  // CSS is already handled by TwCssInjector at server level\n  return classes\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction loadCssFile(filepath: string): string | null {\n  try {\n    if (fs.existsSync(filepath)) {\n      return fs.readFileSync(filepath, \"utf-8\")\n    }\n  } catch {\n    // file not found or unreadable\n  }\n  return null\n}\n\nfunction routeToFilename(route: string): string {\n  if (route === \"/\") return \"index.css\"\n  if (route === \"__global\") return \"_global.css\"\n  return `${route.replace(/^\\//, \"\").replace(/\\//g, \"_\")}.css`\n}\n\nfunction detectManifestPath(cssDir: string): string | null {\n  const candidates = [\n    path.join(cssDir, \"css-manifest.json\"),\n    path.join(process.cwd(), \"public\", \"__tw\", \"css-manifest.json\"),\n    path.join(process.cwd(), \"artifacts\", \"route-css\", \"css-manifest.json\"),\n  ]\n\n  for (const candidate of candidates) {\n    if (fs.existsSync(candidate)) {\n      return candidate\n    }\n  }\n  return null\n}\n\ninterface CssManifest {\n  routes?: Record<string, string>\n  global?: string\n  [key: string]: unknown\n}\n\nfunction loadCssFromManifest(manifestPath: string, route: string): string | null {\n  try {\n    if (!fs.existsSync(manifestPath)) return null\n\n    const content = fs.readFileSync(manifestPath, \"utf-8\")\n    const manifest: CssManifest = JSON.parse(content)\n\n    // Try route-specific CSS\n    if (manifest.routes?.[route]) {\n      const routeCssPath = path.join(path.dirname(manifestPath), manifest.routes[route])\n      return loadCssFile(routeCssPath)\n    }\n\n    // Fallback: global CSS\n    if (manifest.global) {\n      const globalCssPath = path.join(path.dirname(manifestPath), manifest.global)\n      return loadCssFile(globalCssPath)\n    }\n  } catch {\n    // manifest not found or invalid\n  }\n  return null\n}\n\nfunction minifyCss(css: string): string {\n  return css\n    .replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\")\n    .replace(/\\s+/g, \" \")\n    .replace(/\\s*{\\s*/g, \"{\")\n    .replace(/\\s*}\\s*/g, \"}\")\n    .replace(/\\s*;\\s*/g, \";\")\n    .trim()\n}\n","\"use client\"\n\n/**\n * tailwind-styled-v5 — Batched CSS Injector (Client Runtime)\n *\n * Menggantikan pattern inject-per-komponen yang menyebabkan banyak\n * style recalculation saat banyak komponen mount bersamaan.\n *\n * Cara kerja:\n *   - Semua CSS rules dari render cycle yang sama dikumpulkan\n *   - Satu requestAnimationFrame = satu DOM style update\n *   - Deduplication via Set<string> — rule yang sama tidak diinjeksi dua kali\n *   - Fallback synchronous untuk SSR / server context\n *\n * Usage (internal, dipakai oleh stateEngine dan containerQuery):\n *   import { batchedInject, flushBatchedCss } from \"./batchedInjector\"\n *\n *   // Queue a rule\n *   batchedInject(\".tw-s-abc123[data-active=\\\"true\\\"]{opacity:0.5}\")\n *\n *   // Force flush (biasanya tidak perlu — RAF melakukan ini otomatis)\n *   flushBatchedCss()\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Singleton state\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** All injected rules (deduplication registry) */\nconst injected = new Set<string>()\n\n/** Pending rules for current RAF batch */\nconst pending: string[] = []\n\n/** RAF handle — null means no batch is scheduled */\nlet rafHandle: ReturnType<typeof requestAnimationFrame> | null = null\n\n/** The single shared <style> element for all batched runtime CSS */\nlet styleEl: HTMLStyleElement | null = null\n\nfunction getStyleElement(): HTMLStyleElement {\n  if (styleEl && document.head.contains(styleEl)) return styleEl\n\n  styleEl = document.createElement(\"style\")\n  styleEl.id = \"__tw-runtime-css\"\n  styleEl.setAttribute(\"data-tw-batched\", \"true\")\n  document.head.appendChild(styleEl)\n  return styleEl\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Core API\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Queue a CSS rule for batched injection.\n * Multiple rules accumulated during one event loop tick are flushed together\n * in one requestAnimationFrame → one style recalculation.\n */\nexport function batchedInject(cssRule: string): void {\n  if (typeof window === \"undefined\") return // SSR — no-op\n  if (!cssRule || injected.has(cssRule)) return\n\n  injected.add(cssRule)\n  pending.push(cssRule)\n\n  if (rafHandle === null) {\n    rafHandle = requestAnimationFrame(flushBatchedCss)\n  }\n}\n\n/**\n * Immediately flush all pending CSS rules to the DOM.\n * Called automatically by RAF each frame. Can also be called manually\n * after synchronous component setup where RAF timing is too late.\n */\nexport function flushBatchedCss(): void {\n  rafHandle = null\n\n  if (pending.length === 0 || typeof document === \"undefined\") return\n\n  const el = getStyleElement()\n  const css = pending.join(\"\\n\")\n  pending.length = 0\n\n  // Append rather than replace — preserves previously injected rules\n  el.textContent += `\\n${css}`\n}\n\n/**\n * Synchronous inject — skips batching.\n * Use for SSR / critical path where RAF is not available.\n */\nexport function syncInject(cssRule: string): void {\n  if (typeof document === \"undefined\") return\n  if (!cssRule || injected.has(cssRule)) return\n\n  injected.add(cssRule)\n  getStyleElement().textContent += `\\n${cssRule}`\n}\n\n/**\n * Check if a rule has already been injected (deduplication check).\n */\nexport function isInjected(cssRule: string): boolean {\n  return injected.has(cssRule)\n}\n\n/**\n * Clear all injected rules and remove the style element.\n * Useful for testing / SSR resets. Not for production use.\n */\nexport function resetBatchedCss(): void {\n  injected.clear()\n  pending.length = 0\n\n  if (rafHandle !== null) {\n    cancelAnimationFrame(rafHandle)\n    rafHandle = null\n  }\n\n  if (styleEl && document.head.contains(styleEl)) {\n    document.head.removeChild(styleEl)\n    styleEl = null\n  }\n}\n\n/**\n * Get stats about the current injection state (for devtools).\n */\nexport function getBatchedCssStats(): {\n  totalInjected: number\n  pendingCount: number\n  hasBatchScheduled: boolean\n} {\n  return {\n    totalInjected: injected.size,\n    pendingCount: pending.length,\n    hasBatchScheduled: rafHandle !== null,\n  }\n}\n"]}

package/dist/{css.js → runtimeCss.mjs}

@@ -1,9 +1,9 @@
-import './chunk-VZEJV27B.js';
 import fs from 'fs';
 import path from 'path';
 import React from 'react';
 
-/* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+
 var defaultProps = {
   cssDir: void 0,
   route: void 0,
@@ -107,6 +107,67 @@ function minifyCss(css) {
   return css.replace(/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g, "").replace(/\s+/g, " ").replace(/\s*{\s*/g, "{").replace(/\s*}\s*/g, "}").replace(/\s*;\s*/g, ";").trim();
 }
 
-export { TwCssInjector, useTwClasses };
-//# sourceMappingURL=css.js.map
-//# sourceMappingURL=css.js.map
+// packages/runtime-css/src/batchedInjector.ts
+var injected = /* @__PURE__ */ new Set();
+var pending = [];
+var rafHandle = null;
+var styleEl = null;
+function getStyleElement() {
+  if (styleEl && document.head.contains(styleEl)) return styleEl;
+  styleEl = document.createElement("style");
+  styleEl.id = "__tw-runtime-css";
+  styleEl.setAttribute("data-tw-batched", "true");
+  document.head.appendChild(styleEl);
+  return styleEl;
+}
+function batchedInject(cssRule) {
+  if (typeof window === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  pending.push(cssRule);
+  if (rafHandle === null) {
+    rafHandle = requestAnimationFrame(flushBatchedCss);
+  }
+}
+function flushBatchedCss() {
+  rafHandle = null;
+  if (pending.length === 0 || typeof document === "undefined") return;
+  const el = getStyleElement();
+  const css = pending.join("\n");
+  pending.length = 0;
+  el.textContent += `
+${css}`;
+}
+function syncInject(cssRule) {
+  if (typeof document === "undefined") return;
+  if (!cssRule || injected.has(cssRule)) return;
+  injected.add(cssRule);
+  getStyleElement().textContent += `
+${cssRule}`;
+}
+function isInjected(cssRule) {
+  return injected.has(cssRule);
+}
+function resetBatchedCss() {
+  injected.clear();
+  pending.length = 0;
+  if (rafHandle !== null) {
+    cancelAnimationFrame(rafHandle);
+    rafHandle = null;
+  }
+  if (styleEl && document.head.contains(styleEl)) {
+    document.head.removeChild(styleEl);
+    styleEl = null;
+  }
+}
+function getBatchedCssStats() {
+  return {
+    totalInjected: injected.size,
+    pendingCount: pending.length,
+    hasBatchScheduled: rafHandle !== null
+  };
+}
+
+export { TwCssInjector, batchedInject, flushBatchedCss, getBatchedCssStats, isInjected, resetBatchedCss, syncInject, useTwClasses };
+//# sourceMappingURL=runtimeCss.mjs.map
+//# sourceMappingURL=runtimeCss.mjs.map

package/dist/runtimeCss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/runtime-css/src/CssInjector.tsx","../packages/runtime-css/src/batchedInjector.ts"],"names":[],"mappings":"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","file":"runtimeCss.mjs","sourcesContent":["\"use server\"\n\n/**\n * tailwind-styled-v5 — CSS Injector (React Server Component)\n *\n * Inject CSS yang sudah di-generate per-route langsung ke <head>.\n * Dipakai di Next.js App Router layout atau page.\n *\n * Di server component — inject inline CSS, zero client JS.\n * Streaming friendly — CSS di-emit bersamaan dengan HTML.\n *\n * Usage:\n *   // app/layout.tsx\n *   import { TwCssInjector } from \"tailwind-styled-v4/css\"\n *   export default function Layout({ children }) {\n *     return <html><head><TwCssInjector/></head><body>{children}</body></html>\n *   }\n */\n\nimport fs from \"node:fs\"\nimport path from \"node:path\"\nimport React from \"react\"\n\ninterface CssInjectorProps {\n  /** Override CSS directory. Default: .next/static/css/tw */\n  cssDir?: string\n  /** Specific route to inject. Default: auto-detect dari headers */\n  route?: string\n  /** Inject global CSS juga. Default: true */\n  includeGlobal?: boolean\n  /** Minify inline CSS. Default: true */\n  minify?: boolean\n  /** Add <link> tag instead of inline <style> untuk cached CSS */\n  asLink?: boolean\n  /** Override manifest path for dev mode */\n  manifestPath?: string\n}\n\nconst defaultProps: CssInjectorProps = {\n  cssDir: undefined,\n  route: undefined,\n  includeGlobal: true,\n  minify: true,\n  asLink: false,\n  manifestPath: undefined,\n}\n\n/**\n * Server Component — inject route-specific CSS into <head>.\n * No client JS, no hydration overhead.\n */\nexport async function TwCssInjector(props?: CssInjectorProps): Promise<React.ReactElement> {\n  const { cssDir, route, includeGlobal, minify, asLink, manifestPath } = {\n    ...defaultProps,\n    ...props,\n  }\n  const resolvedDir = cssDir ?? path.join(process.cwd(), \".next\", \"static\", \"css\", \"tw\")\n\n  const cssChunks: string[] = []\n\n  // Try manifest-based loading first (for dev mode)\n  if (manifestPath) {\n    const manifestCss = loadCssFromManifest(manifestPath, route ?? \"/\")\n    if (manifestCss) {\n      cssChunks.push(manifestCss)\n    }\n  } else {\n    // Fallback: legacy file-based loading with path detection\n    const detectedManifest = detectManifestPath(resolvedDir)\n    if (detectedManifest) {\n      const manifestCss = loadCssFromManifest(detectedManifest, route ?? \"/\")\n      if (manifestCss) {\n        cssChunks.push(manifestCss)\n      }\n    }\n  }\n\n  // 1. Global CSS (base styles, reset)\n  if (includeGlobal) {\n    const globalCss = loadCssFile(path.join(resolvedDir, \"_global.css\"))\n    if (globalCss) cssChunks.push(globalCss)\n  }\n\n  // 2. Route-specific CSS\n  const targetRoute = route ?? \"/\"\n  const routeFile = routeToFilename(targetRoute)\n  const routeCss = loadCssFile(path.join(resolvedDir, routeFile))\n  if (routeCss) cssChunks.push(routeCss)\n\n  if (cssChunks.length === 0) return React.createElement(React.Fragment, null)\n\n  const combined = cssChunks.join(\"\\n\")\n  const final = minify ? minifyCss(combined) : combined\n\n  if (asLink) {\n    // Return <link> tag — CSS cached by browser\n    return React.createElement(\"link\", {\n      rel: \"stylesheet\",\n      href: `/_next/static/css/tw/${routeFile}`,\n      crossOrigin: \"anonymous\",\n    })\n  }\n\n  // Inline <style> — zero network request, fastest FCP\n  return React.createElement(\"style\", {\n    dangerouslySetInnerHTML: { __html: final },\n    \"data-tw-route\": targetRoute,\n  })\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Hook for client components\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Lightweight hook to get current route's CSS classes.\n * Useful for dynamic class injection in client components.\n *\n * Returns empty string on server (SSR) — CSS already injected by TwCssInjector.\n */\nexport function useTwClasses(classes: string): string {\n  // In client environment, return classes as-is\n  // CSS is already handled by TwCssInjector at server level\n  return classes\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction loadCssFile(filepath: string): string | null {\n  try {\n    if (fs.existsSync(filepath)) {\n      return fs.readFileSync(filepath, \"utf-8\")\n    }\n  } catch {\n    // file not found or unreadable\n  }\n  return null\n}\n\nfunction routeToFilename(route: string): string {\n  if (route === \"/\") return \"index.css\"\n  if (route === \"__global\") return \"_global.css\"\n  return `${route.replace(/^\\//, \"\").replace(/\\//g, \"_\")}.css`\n}\n\nfunction detectManifestPath(cssDir: string): string | null {\n  const candidates = [\n    path.join(cssDir, \"css-manifest.json\"),\n    path.join(process.cwd(), \"public\", \"__tw\", \"css-manifest.json\"),\n    path.join(process.cwd(), \"artifacts\", \"route-css\", \"css-manifest.json\"),\n  ]\n\n  for (const candidate of candidates) {\n    if (fs.existsSync(candidate)) {\n      return candidate\n    }\n  }\n  return null\n}\n\ninterface CssManifest {\n  routes?: Record<string, string>\n  global?: string\n  [key: string]: unknown\n}\n\nfunction loadCssFromManifest(manifestPath: string, route: string): string | null {\n  try {\n    if (!fs.existsSync(manifestPath)) return null\n\n    const content = fs.readFileSync(manifestPath, \"utf-8\")\n    const manifest: CssManifest = JSON.parse(content)\n\n    // Try route-specific CSS\n    if (manifest.routes?.[route]) {\n      const routeCssPath = path.join(path.dirname(manifestPath), manifest.routes[route])\n      return loadCssFile(routeCssPath)\n    }\n\n    // Fallback: global CSS\n    if (manifest.global) {\n      const globalCssPath = path.join(path.dirname(manifestPath), manifest.global)\n      return loadCssFile(globalCssPath)\n    }\n  } catch {\n    // manifest not found or invalid\n  }\n  return null\n}\n\nfunction minifyCss(css: string): string {\n  return css\n    .replace(/\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g, \"\")\n    .replace(/\\s+/g, \" \")\n    .replace(/\\s*{\\s*/g, \"{\")\n    .replace(/\\s*}\\s*/g, \"}\")\n    .replace(/\\s*;\\s*/g, \";\")\n    .trim()\n}\n","\"use client\"\n\n/**\n * tailwind-styled-v5 — Batched CSS Injector (Client Runtime)\n *\n * Menggantikan pattern inject-per-komponen yang menyebabkan banyak\n * style recalculation saat banyak komponen mount bersamaan.\n *\n * Cara kerja:\n *   - Semua CSS rules dari render cycle yang sama dikumpulkan\n *   - Satu requestAnimationFrame = satu DOM style update\n *   - Deduplication via Set<string> — rule yang sama tidak diinjeksi dua kali\n *   - Fallback synchronous untuk SSR / server context\n *\n * Usage (internal, dipakai oleh stateEngine dan containerQuery):\n *   import { batchedInject, flushBatchedCss } from \"./batchedInjector\"\n *\n *   // Queue a rule\n *   batchedInject(\".tw-s-abc123[data-active=\\\"true\\\"]{opacity:0.5}\")\n *\n *   // Force flush (biasanya tidak perlu — RAF melakukan ini otomatis)\n *   flushBatchedCss()\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Singleton state\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** All injected rules (deduplication registry) */\nconst injected = new Set<string>()\n\n/** Pending rules for current RAF batch */\nconst pending: string[] = []\n\n/** RAF handle — null means no batch is scheduled */\nlet rafHandle: ReturnType<typeof requestAnimationFrame> | null = null\n\n/** The single shared <style> element for all batched runtime CSS */\nlet styleEl: HTMLStyleElement | null = null\n\nfunction getStyleElement(): HTMLStyleElement {\n  if (styleEl && document.head.contains(styleEl)) return styleEl\n\n  styleEl = document.createElement(\"style\")\n  styleEl.id = \"__tw-runtime-css\"\n  styleEl.setAttribute(\"data-tw-batched\", \"true\")\n  document.head.appendChild(styleEl)\n  return styleEl\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Core API\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Queue a CSS rule for batched injection.\n * Multiple rules accumulated during one event loop tick are flushed together\n * in one requestAnimationFrame → one style recalculation.\n */\nexport function batchedInject(cssRule: string): void {\n  if (typeof window === \"undefined\") return // SSR — no-op\n  if (!cssRule || injected.has(cssRule)) return\n\n  injected.add(cssRule)\n  pending.push(cssRule)\n\n  if (rafHandle === null) {\n    rafHandle = requestAnimationFrame(flushBatchedCss)\n  }\n}\n\n/**\n * Immediately flush all pending CSS rules to the DOM.\n * Called automatically by RAF each frame. Can also be called manually\n * after synchronous component setup where RAF timing is too late.\n */\nexport function flushBatchedCss(): void {\n  rafHandle = null\n\n  if (pending.length === 0 || typeof document === \"undefined\") return\n\n  const el = getStyleElement()\n  const css = pending.join(\"\\n\")\n  pending.length = 0\n\n  // Append rather than replace — preserves previously injected rules\n  el.textContent += `\\n${css}`\n}\n\n/**\n * Synchronous inject — skips batching.\n * Use for SSR / critical path where RAF is not available.\n */\nexport function syncInject(cssRule: string): void {\n  if (typeof document === \"undefined\") return\n  if (!cssRule || injected.has(cssRule)) return\n\n  injected.add(cssRule)\n  getStyleElement().textContent += `\\n${cssRule}`\n}\n\n/**\n * Check if a rule has already been injected (deduplication check).\n */\nexport function isInjected(cssRule: string): boolean {\n  return injected.has(cssRule)\n}\n\n/**\n * Clear all injected rules and remove the style element.\n * Useful for testing / SSR resets. Not for production use.\n */\nexport function resetBatchedCss(): void {\n  injected.clear()\n  pending.length = 0\n\n  if (rafHandle !== null) {\n    cancelAnimationFrame(rafHandle)\n    rafHandle = null\n  }\n\n  if (styleEl && document.head.contains(styleEl)) {\n    document.head.removeChild(styleEl)\n    styleEl = null\n  }\n}\n\n/**\n * Get stats about the current injection state (for devtools).\n */\nexport function getBatchedCssStats(): {\n  totalInjected: number\n  pendingCount: number\n  hasBatchScheduled: boolean\n} {\n  return {\n    totalInjected: injected.size,\n    pendingCount: pending.length,\n    hasBatchScheduled: rafHandle !== null,\n  }\n}\n"]}

package/dist/scanner.d.mts

@@ -0,0 +1,25 @@
+interface ScanWorkspaceOptions {
+    includeExtensions?: string[];
+    ignoreDirectories?: string[];
+    useCache?: boolean;
+    cacheDir?: string;
+    smartInvalidation?: boolean;
+}
+interface ScanFileResult {
+    file: string;
+    classes: string[];
+}
+interface ScanWorkspaceResult {
+    files: ScanFileResult[];
+    totalFiles: number;
+    uniqueClasses: string[];
+}
+declare const DEFAULT_EXTENSIONS: string[];
+declare const DEFAULT_IGNORES: string[];
+declare function scanSource(source: string): string[];
+declare function isScannableFile(filePath: string, includeExtensions?: string[]): boolean;
+declare function scanFile(filePath: string): ScanFileResult;
+declare function scanWorkspace(rootDir: string, options?: ScanWorkspaceOptions): ScanWorkspaceResult;
+declare function scanWorkspaceAsync(rootDir: string, options?: ScanWorkspaceOptions): Promise<ScanWorkspaceResult>;
+
+export { DEFAULT_EXTENSIONS, DEFAULT_IGNORES, type ScanFileResult, type ScanWorkspaceOptions, type ScanWorkspaceResult, isScannableFile, scanFile, scanSource, scanWorkspace, scanWorkspaceAsync };

package/dist/scanner.d.ts

@@ -0,0 +1,25 @@
+interface ScanWorkspaceOptions {
+    includeExtensions?: string[];
+    ignoreDirectories?: string[];
+    useCache?: boolean;
+    cacheDir?: string;
+    smartInvalidation?: boolean;
+}
+interface ScanFileResult {
+    file: string;
+    classes: string[];
+}
+interface ScanWorkspaceResult {
+    files: ScanFileResult[];
+    totalFiles: number;
+    uniqueClasses: string[];
+}
+declare const DEFAULT_EXTENSIONS: string[];
+declare const DEFAULT_IGNORES: string[];
+declare function scanSource(source: string): string[];
+declare function isScannableFile(filePath: string, includeExtensions?: string[]): boolean;
+declare function scanFile(filePath: string): ScanFileResult;
+declare function scanWorkspace(rootDir: string, options?: ScanWorkspaceOptions): ScanWorkspaceResult;
+declare function scanWorkspaceAsync(rootDir: string, options?: ScanWorkspaceOptions): Promise<ScanWorkspaceResult>;
+
+export { DEFAULT_EXTENSIONS, DEFAULT_IGNORES, type ScanFileResult, type ScanWorkspaceOptions, type ScanWorkspaceResult, isScannableFile, scanFile, scanSource, scanWorkspace, scanWorkspaceAsync };