@canmi/seam-react 0.2.3 → 0.3.7

package/dist/index.d.ts

@@ -21,6 +21,7 @@ interface RouteDef {
   loaders?: Record<string, LoaderDef>;
   mock?: Record<string, unknown>;
   nullable?: string[];
+  staleTime?: number;
 }
 //#endregion
 //#region src/define-routes.d.ts
@@ -29,7 +30,7 @@ declare function defineRoutes(routes: RouteDef[]): RouteDef[];
 //#region src/use-seam-data.d.ts
 declare const SeamDataProvider: react.Provider<unknown>;
 declare function useSeamData<T extends object = Record<string, unknown>>(): T;
-declare function parseSeamData(): Record<string, unknown>;
+declare function parseSeamData(dataId?: string): Record<string, unknown>;
 //#endregion
 //#region src/sentinel.d.ts
 /**
@@ -40,7 +41,7 @@ declare function parseSeamData(): Record<string, unknown>;
  * sentinel array where each leaf in the object template uses `$.` path prefix.
  * Arrays of primitives, empty arrays, and null remain leaf sentinels.
  */
-declare function buildSentinelData(obj: Record<string, unknown>, prefix?: string): Record<string, unknown>;
+declare function buildSentinelData(obj: Record<string, unknown>, prefix?: string, htmlPaths?: Set<string>): Record<string, unknown>;
 //#endregion
 //#region src/use-seam-subscription.d.ts
 type SubscriptionStatus = "connecting" | "active" | "error" | "closed";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/define-routes.ts","../src/use-seam-data.ts","../src/sentinel.ts","../src/use-seam-subscription.ts","../src/use-seam-navigate.ts"],"mappings":";;;;;UAIiB,YAAA;EACf,IAAA;EACA,IAAA;AAAA;AAAA,UAGe,SAAA;EACf,SAAA;EACA,MAAA,GAAS,MAAA,SAAe,YAAA;AAAA;AAAA,UAGT,QAAA;EACf,IAAA;EACA,SAAA,GAAY,aAAA,CAAc,MAAA;EAC1B,MAAA,GAAS,aAAA;IAAgB,QAAA,EAAU,SAAA;EAAA;EACnC,QAAA,GAAW,QAAA;EACX,OAAA,GAAU,MAAA,SAAe,SAAA;EACzB,IAAA,GAAO,MAAA;EACP,QAAA;AAAA;;;iBCjBc,YAAA,CAAa,MAAA,EAAQ,QAAA,KAAa,QAAA;;;cCErC,gBAAA,EAA2C,KAAA,CAA3B,QAAA;AAAA,iBAEb,WAAA,oBAA+B,MAAA,kBAAA,CAAA,GAA4B,CAAA;AAAA,iBAO3D,aAAA,CAAA,GAAiB,MAAA;;;;;;;;AFXjC;;;iBGMgB,iBAAA,CACd,GAAA,EAAK,MAAA,mBACL,MAAA,YACC,MAAA;;;KCRS,kBAAA;AAAA,UAEK,yBAAA;EACf,IAAA,EAAM,CAAA;EACN,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,kBAAA;AAAA;AAAA,iBAGM,mBAAA,GAAA,CACd,OAAA,UACA,SAAA,UACA,KAAA,YACC,yBAAA,CAA0B,CAAA;;;cCThB,oBAAA,EAAmD,KAAA,CAA/B,QAAA,EAAA,GAAA;AAAA,iBAEjB,eAAA,CAAA,IAAoB,GAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/define-routes.ts","../src/use-seam-data.ts","../src/sentinel.ts","../src/use-seam-subscription.ts","../src/use-seam-navigate.ts"],"mappings":";;;;;UAIiB,YAAA;EACf,IAAA;EACA,IAAA;AAAA;AAAA,UAGe,SAAA;EACf,SAAA;EACA,MAAA,GAAS,MAAA,SAAe,YAAA;AAAA;AAAA,UAGT,QAAA;EACf,IAAA;EACA,SAAA,GAAY,aAAA,CAAc,MAAA;EAC1B,MAAA,GAAS,aAAA;IAAgB,QAAA,EAAU,SAAA;EAAA;EACnC,QAAA,GAAW,QAAA;EACX,OAAA,GAAU,MAAA,SAAe,SAAA;EACzB,IAAA,GAAO,MAAA;EACP,QAAA;EACA,SAAA;AAAA;;;iBClBc,YAAA,CAAa,MAAA,EAAQ,QAAA,KAAa,QAAA;;;cCErC,gBAAA,EAA2C,KAAA,CAA3B,QAAA;AAAA,iBAEb,WAAA,oBAA+B,MAAA,kBAAA,CAAA,GAA4B,CAAA;AAAA,iBAO3D,aAAA,CAAc,MAAA,YAA2B,MAAA;;;;;;;;AFXzD;;;iBGMgB,iBAAA,CACd,GAAA,EAAK,MAAA,mBACL,MAAA,WACA,SAAA,GAAY,GAAA,WACX,MAAA;;;KCTS,kBAAA;AAAA,UAEK,yBAAA;EACf,IAAA,EAAM,CAAA;EACN,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,kBAAA;AAAA;AAAA,iBAGM,mBAAA,GAAA,CACd,OAAA,UACA,SAAA,UACA,KAAA,YACC,yBAAA,CAA0B,CAAA;;;cCThB,oBAAA,EAAmD,KAAA,CAA/B,QAAA,EAAA,GAAA;AAAA,iBAEjB,eAAA,CAAA,IAAoB,GAAA"}

package/dist/index.js

@@ -15,9 +15,9 @@ function useSeamData() {
 	if (value === null || value === void 0) throw new Error("useSeamData must be used inside <SeamDataProvider>");
 	return value;
 }
-function parseSeamData() {
-	const el = document.getElementById("__SEAM_DATA__");
-	if (!el?.textContent) throw new Error("__SEAM_DATA__ not found");
+function parseSeamData(dataId = "__SEAM_DATA__") {
+	const el = document.getElementById(dataId);
+	if (!el?.textContent) throw new Error(`${dataId} not found`);
 	return JSON.parse(el.textContent);
 }
 
@@ -31,13 +31,13 @@ function parseSeamData() {
 * sentinel array where each leaf in the object template uses `$.` path prefix.
 * Arrays of primitives, empty arrays, and null remain leaf sentinels.
 */
-function buildSentinelData(obj, prefix = "") {
+function buildSentinelData(obj, prefix = "", htmlPaths) {
 	const result = {};
 	for (const [key, value] of Object.entries(obj)) {
 		const path = prefix ? `${prefix}.${key}` : key;
-		if (value !== null && typeof value === "object" && !Array.isArray(value)) result[key] = buildSentinelData(value, path);
-		else if (Array.isArray(value) && value.length > 0 && typeof value[0] === "object" && value[0] !== null) result[key] = [buildSentinelData(value[0], `${path}.$`)];
-		else result[key] = `%%SEAM:${path}%%`;
+		if (value !== null && typeof value === "object" && !Array.isArray(value)) result[key] = buildSentinelData(value, path, htmlPaths);
+		else if (Array.isArray(value) && value.length > 0 && typeof value[0] === "object" && value[0] !== null) result[key] = [buildSentinelData(value[0], `${path}.$`, htmlPaths)];
+		else result[key] = `%%SEAM:${path}${htmlPaths?.has(path) ? ":html" : ""}%%`;
 	}
 	return result;
 }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/define-routes.ts","../src/use-seam-data.ts","../src/sentinel.ts","../src/use-seam-subscription.ts","../src/use-seam-navigate.ts"],"sourcesContent":["/* packages/client/react/src/define-routes.ts */\n\nimport type { RouteDef } from \"./types.js\";\n\nexport function defineRoutes(routes: RouteDef[]): RouteDef[] {\n  return routes;\n}\n","/* packages/client/react/src/use-seam-data.ts */\n\nimport { createContext, useContext } from \"react\";\n\nconst SeamDataContext = createContext<unknown>(null);\n\nexport const SeamDataProvider = SeamDataContext.Provider;\n\nexport function useSeamData<T extends object = Record<string, unknown>>(): T {\n  const value = useContext(SeamDataContext);\n  if (value === null || value === undefined)\n    throw new Error(\"useSeamData must be used inside <SeamDataProvider>\");\n  return value as T;\n}\n\nexport function parseSeamData(): Record<string, unknown> {\n  const el = document.getElementById(\"__SEAM_DATA__\");\n  if (!el?.textContent) throw new Error(\"__SEAM_DATA__ not found\");\n  return JSON.parse(el.textContent) as Record<string, unknown>;\n}\n","/* packages/client/react/src/sentinel.ts */\n\n/**\n * Replace every leaf value in `obj` with a sentinel string `%%SEAM:dotted.path%%`.\n * Nested objects are recursed; primitives and null become leaf sentinels.\n *\n * Arrays of objects (length > 0, first element is object) produce a 1-element\n * sentinel array where each leaf in the object template uses `$.` path prefix.\n * Arrays of primitives, empty arrays, and null remain leaf sentinels.\n */\nexport function buildSentinelData(\n  obj: Record<string, unknown>,\n  prefix = \"\",\n): Record<string, unknown> {\n  const result: Record<string, unknown> = {};\n  for (const [key, value] of Object.entries(obj)) {\n    const path = prefix ? `${prefix}.${key}` : key;\n    if (value !== null && typeof value === \"object\" && !Array.isArray(value)) {\n      result[key] = buildSentinelData(value as Record<string, unknown>, path);\n    } else if (\n      Array.isArray(value) &&\n      value.length > 0 &&\n      typeof value[0] === \"object\" &&\n      value[0] !== null\n    ) {\n      // Array of objects: produce 1-element sentinel array with $.field paths\n      result[key] = [buildSentinelData(value[0] as Record<string, unknown>, `${path}.$`)];\n    } else {\n      result[key] = `%%SEAM:${path}%%`;\n    }\n  }\n  return result;\n}\n","/* packages/client/react/src/use-seam-subscription.ts */\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { SeamClientError } from \"@canmi/seam-client\";\n\nexport type SubscriptionStatus = \"connecting\" | \"active\" | \"error\" | \"closed\";\n\nexport interface UseSeamSubscriptionResult<T> {\n  data: T | null;\n  error: SeamClientError | null;\n  status: SubscriptionStatus;\n}\n\nexport function useSeamSubscription<T>(\n  baseUrl: string,\n  procedure: string,\n  input: unknown,\n): UseSeamSubscriptionResult<T> {\n  const [data, setData] = useState<T | null>(null);\n  const [error, setError] = useState<SeamClientError | null>(null);\n  const [status, setStatus] = useState<SubscriptionStatus>(\"connecting\");\n\n  // Serialize input for stable dependency\n  const inputKey = JSON.stringify(input);\n  const inputRef = useRef(inputKey);\n  inputRef.current = inputKey;\n\n  useEffect(() => {\n    setData(null);\n    setError(null);\n    setStatus(\"connecting\");\n\n    const cleanBase = baseUrl.replace(/\\/+$/, \"\");\n    const params = new URLSearchParams({ input: inputKey });\n    const url = `${cleanBase}/_seam/subscribe/${procedure}?${params.toString()}`;\n    const es = new EventSource(url);\n\n    es.addEventListener(\"data\", (e) => {\n      try {\n        setData(JSON.parse(e.data as string) as T);\n        setStatus(\"active\");\n      } catch {\n        setError(new SeamClientError(\"INTERNAL_ERROR\", \"Failed to parse SSE data\", 0));\n        setStatus(\"error\");\n        es.close();\n      }\n    });\n\n    es.addEventListener(\"error\", (e) => {\n      if (e instanceof MessageEvent) {\n        try {\n          const payload = JSON.parse(e.data as string) as { code?: string; message?: string };\n          setError(\n            new SeamClientError(\n              \"INTERNAL_ERROR\",\n              typeof payload.message === \"string\" ? payload.message : \"SSE error\",\n              0,\n            ),\n          );\n        } catch {\n          setError(new SeamClientError(\"INTERNAL_ERROR\", \"SSE error\", 0));\n        }\n      } else {\n        setError(new SeamClientError(\"INTERNAL_ERROR\", \"SSE connection error\", 0));\n      }\n      setStatus(\"error\");\n      es.close();\n    });\n\n    es.addEventListener(\"complete\", () => {\n      setStatus(\"closed\");\n      es.close();\n    });\n\n    return () => {\n      es.close();\n    };\n  }, [baseUrl, procedure, inputKey]);\n\n  return { data, error, status };\n}\n","/* packages/client/react/src/use-seam-navigate.ts */\n\nimport { createContext, useContext } from \"react\";\n\nconst SeamNavigateContext = createContext<(url: string) => void>((url) => {\n  globalThis.location.href = url;\n});\n\nexport const SeamNavigateProvider = SeamNavigateContext.Provider;\n\nexport function useSeamNavigate(): (url: string) => void {\n  return useContext(SeamNavigateContext);\n}\n"],"mappings":";;;;AAIA,SAAgB,aAAa,QAAgC;AAC3D,QAAO;;;;;ACDT,MAAM,kBAAkB,cAAuB,KAAK;AAEpD,MAAa,mBAAmB,gBAAgB;AAEhD,SAAgB,cAA6D;CAC3E,MAAM,QAAQ,WAAW,gBAAgB;AACzC,KAAI,UAAU,QAAQ,UAAU,OAC9B,OAAM,IAAI,MAAM,qDAAqD;AACvE,QAAO;;AAGT,SAAgB,gBAAyC;CACvD,MAAM,KAAK,SAAS,eAAe,gBAAgB;AACnD,KAAI,CAAC,IAAI,YAAa,OAAM,IAAI,MAAM,0BAA0B;AAChE,QAAO,KAAK,MAAM,GAAG,YAAY;;;;;;;;;;;;;ACRnC,SAAgB,kBACd,KACA,SAAS,IACgB;CACzB,MAAM,SAAkC,EAAE;AAC1C,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,IAAI,EAAE;EAC9C,MAAM,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AAC3C,MAAI,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,MAAM,CACtE,QAAO,OAAO,kBAAkB,OAAkC,KAAK;WAEvE,MAAM,QAAQ,MAAM,IACpB,MAAM,SAAS,KACf,OAAO,MAAM,OAAO,YACpB,MAAM,OAAO,KAGb,QAAO,OAAO,CAAC,kBAAkB,MAAM,IAA+B,GAAG,KAAK,IAAI,CAAC;MAEnF,QAAO,OAAO,UAAU,KAAK;;AAGjC,QAAO;;;;;AClBT,SAAgB,oBACd,SACA,WACA,OAC8B;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAmB,KAAK;CAChD,MAAM,CAAC,OAAO,YAAY,SAAiC,KAAK;CAChE,MAAM,CAAC,QAAQ,aAAa,SAA6B,aAAa;CAGtE,MAAM,WAAW,KAAK,UAAU,MAAM;CACtC,MAAM,WAAW,OAAO,SAAS;AACjC,UAAS,UAAU;AAEnB,iBAAgB;AACd,UAAQ,KAAK;AACb,WAAS,KAAK;AACd,YAAU,aAAa;EAIvB,MAAM,MAAM,GAFM,QAAQ,QAAQ,QAAQ,GAAG,CAEpB,mBAAmB,UAAU,GADvC,IAAI,gBAAgB,EAAE,OAAO,UAAU,CAAC,CACS,UAAU;EAC1E,MAAM,KAAK,IAAI,YAAY,IAAI;AAE/B,KAAG,iBAAiB,SAAS,MAAM;AACjC,OAAI;AACF,YAAQ,KAAK,MAAM,EAAE,KAAe,CAAM;AAC1C,cAAU,SAAS;WACb;AACN,aAAS,IAAI,gBAAgB,kBAAkB,4BAA4B,EAAE,CAAC;AAC9E,cAAU,QAAQ;AAClB,OAAG,OAAO;;IAEZ;AAEF,KAAG,iBAAiB,UAAU,MAAM;AAClC,OAAI,aAAa,aACf,KAAI;IACF,MAAM,UAAU,KAAK,MAAM,EAAE,KAAe;AAC5C,aACE,IAAI,gBACF,kBACA,OAAO,QAAQ,YAAY,WAAW,QAAQ,UAAU,aACxD,EACD,CACF;WACK;AACN,aAAS,IAAI,gBAAgB,kBAAkB,aAAa,EAAE,CAAC;;OAGjE,UAAS,IAAI,gBAAgB,kBAAkB,wBAAwB,EAAE,CAAC;AAE5E,aAAU,QAAQ;AAClB,MAAG,OAAO;IACV;AAEF,KAAG,iBAAiB,kBAAkB;AACpC,aAAU,SAAS;AACnB,MAAG,OAAO;IACV;AAEF,eAAa;AACX,MAAG,OAAO;;IAEX;EAAC;EAAS;EAAW;EAAS,CAAC;AAElC,QAAO;EAAE;EAAM;EAAO;EAAQ;;;;;AC3EhC,MAAM,sBAAsB,eAAsC,QAAQ;AACxE,YAAW,SAAS,OAAO;EAC3B;AAEF,MAAa,uBAAuB,oBAAoB;AAExD,SAAgB,kBAAyC;AACvD,QAAO,WAAW,oBAAoB"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/define-routes.ts","../src/use-seam-data.ts","../src/sentinel.ts","../src/use-seam-subscription.ts","../src/use-seam-navigate.ts"],"sourcesContent":["/* packages/client/react/src/define-routes.ts */\n\nimport type { RouteDef } from \"./types.js\";\n\nexport function defineRoutes(routes: RouteDef[]): RouteDef[] {\n  return routes;\n}\n","/* packages/client/react/src/use-seam-data.ts */\n\nimport { createContext, useContext } from \"react\";\n\nconst SeamDataContext = createContext<unknown>(null);\n\nexport const SeamDataProvider = SeamDataContext.Provider;\n\nexport function useSeamData<T extends object = Record<string, unknown>>(): T {\n  const value = useContext(SeamDataContext);\n  if (value === null || value === undefined)\n    throw new Error(\"useSeamData must be used inside <SeamDataProvider>\");\n  return value as T;\n}\n\nexport function parseSeamData(dataId = \"__SEAM_DATA__\"): Record<string, unknown> {\n  const el = document.getElementById(dataId);\n  if (!el?.textContent) throw new Error(`${dataId} not found`);\n  return JSON.parse(el.textContent) as Record<string, unknown>;\n}\n","/* packages/client/react/src/sentinel.ts */\n\n/**\n * Replace every leaf value in `obj` with a sentinel string `%%SEAM:dotted.path%%`.\n * Nested objects are recursed; primitives and null become leaf sentinels.\n *\n * Arrays of objects (length > 0, first element is object) produce a 1-element\n * sentinel array where each leaf in the object template uses `$.` path prefix.\n * Arrays of primitives, empty arrays, and null remain leaf sentinels.\n */\nexport function buildSentinelData(\n  obj: Record<string, unknown>,\n  prefix = \"\",\n  htmlPaths?: Set<string>,\n): Record<string, unknown> {\n  const result: Record<string, unknown> = {};\n  for (const [key, value] of Object.entries(obj)) {\n    const path = prefix ? `${prefix}.${key}` : key;\n    if (value !== null && typeof value === \"object\" && !Array.isArray(value)) {\n      result[key] = buildSentinelData(value as Record<string, unknown>, path, htmlPaths);\n    } else if (\n      Array.isArray(value) &&\n      value.length > 0 &&\n      typeof value[0] === \"object\" &&\n      value[0] !== null\n    ) {\n      // Array of objects: produce 1-element sentinel array with $.field paths\n      result[key] = [\n        buildSentinelData(value[0] as Record<string, unknown>, `${path}.$`, htmlPaths),\n      ];\n    } else {\n      const suffix = htmlPaths?.has(path) ? \":html\" : \"\";\n      result[key] = `%%SEAM:${path}${suffix}%%`;\n    }\n  }\n  return result;\n}\n","/* packages/client/react/src/use-seam-subscription.ts */\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { SeamClientError } from \"@canmi/seam-client\";\n\nexport type SubscriptionStatus = \"connecting\" | \"active\" | \"error\" | \"closed\";\n\nexport interface UseSeamSubscriptionResult<T> {\n  data: T | null;\n  error: SeamClientError | null;\n  status: SubscriptionStatus;\n}\n\nexport function useSeamSubscription<T>(\n  baseUrl: string,\n  procedure: string,\n  input: unknown,\n): UseSeamSubscriptionResult<T> {\n  const [data, setData] = useState<T | null>(null);\n  const [error, setError] = useState<SeamClientError | null>(null);\n  const [status, setStatus] = useState<SubscriptionStatus>(\"connecting\");\n\n  // Serialize input for stable dependency\n  const inputKey = JSON.stringify(input);\n  const inputRef = useRef(inputKey);\n  inputRef.current = inputKey;\n\n  useEffect(() => {\n    setData(null);\n    setError(null);\n    setStatus(\"connecting\");\n\n    const cleanBase = baseUrl.replace(/\\/+$/, \"\");\n    const params = new URLSearchParams({ input: inputKey });\n    const url = `${cleanBase}/_seam/subscribe/${procedure}?${params.toString()}`;\n    const es = new EventSource(url);\n\n    es.addEventListener(\"data\", (e) => {\n      try {\n        setData(JSON.parse(e.data as string) as T);\n        setStatus(\"active\");\n      } catch {\n        setError(new SeamClientError(\"INTERNAL_ERROR\", \"Failed to parse SSE data\", 0));\n        setStatus(\"error\");\n        es.close();\n      }\n    });\n\n    es.addEventListener(\"error\", (e) => {\n      if (e instanceof MessageEvent) {\n        try {\n          const payload = JSON.parse(e.data as string) as { code?: string; message?: string };\n          setError(\n            new SeamClientError(\n              \"INTERNAL_ERROR\",\n              typeof payload.message === \"string\" ? payload.message : \"SSE error\",\n              0,\n            ),\n          );\n        } catch {\n          setError(new SeamClientError(\"INTERNAL_ERROR\", \"SSE error\", 0));\n        }\n      } else {\n        setError(new SeamClientError(\"INTERNAL_ERROR\", \"SSE connection error\", 0));\n      }\n      setStatus(\"error\");\n      es.close();\n    });\n\n    es.addEventListener(\"complete\", () => {\n      setStatus(\"closed\");\n      es.close();\n    });\n\n    return () => {\n      es.close();\n    };\n  }, [baseUrl, procedure, inputKey]);\n\n  return { data, error, status };\n}\n","/* packages/client/react/src/use-seam-navigate.ts */\n\nimport { createContext, useContext } from \"react\";\n\nconst SeamNavigateContext = createContext<(url: string) => void>((url) => {\n  globalThis.location.href = url;\n});\n\nexport const SeamNavigateProvider = SeamNavigateContext.Provider;\n\nexport function useSeamNavigate(): (url: string) => void {\n  return useContext(SeamNavigateContext);\n}\n"],"mappings":";;;;AAIA,SAAgB,aAAa,QAAgC;AAC3D,QAAO;;;;;ACDT,MAAM,kBAAkB,cAAuB,KAAK;AAEpD,MAAa,mBAAmB,gBAAgB;AAEhD,SAAgB,cAA6D;CAC3E,MAAM,QAAQ,WAAW,gBAAgB;AACzC,KAAI,UAAU,QAAQ,UAAU,OAC9B,OAAM,IAAI,MAAM,qDAAqD;AACvE,QAAO;;AAGT,SAAgB,cAAc,SAAS,iBAA0C;CAC/E,MAAM,KAAK,SAAS,eAAe,OAAO;AAC1C,KAAI,CAAC,IAAI,YAAa,OAAM,IAAI,MAAM,GAAG,OAAO,YAAY;AAC5D,QAAO,KAAK,MAAM,GAAG,YAAY;;;;;;;;;;;;;ACRnC,SAAgB,kBACd,KACA,SAAS,IACT,WACyB;CACzB,MAAM,SAAkC,EAAE;AAC1C,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,IAAI,EAAE;EAC9C,MAAM,OAAO,SAAS,GAAG,OAAO,GAAG,QAAQ;AAC3C,MAAI,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,MAAM,CACtE,QAAO,OAAO,kBAAkB,OAAkC,MAAM,UAAU;WAElF,MAAM,QAAQ,MAAM,IACpB,MAAM,SAAS,KACf,OAAO,MAAM,OAAO,YACpB,MAAM,OAAO,KAGb,QAAO,OAAO,CACZ,kBAAkB,MAAM,IAA+B,GAAG,KAAK,KAAK,UAAU,CAC/E;MAGD,QAAO,OAAO,UAAU,OADT,WAAW,IAAI,KAAK,GAAG,UAAU,GACV;;AAG1C,QAAO;;;;;ACtBT,SAAgB,oBACd,SACA,WACA,OAC8B;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAmB,KAAK;CAChD,MAAM,CAAC,OAAO,YAAY,SAAiC,KAAK;CAChE,MAAM,CAAC,QAAQ,aAAa,SAA6B,aAAa;CAGtE,MAAM,WAAW,KAAK,UAAU,MAAM;CACtC,MAAM,WAAW,OAAO,SAAS;AACjC,UAAS,UAAU;AAEnB,iBAAgB;AACd,UAAQ,KAAK;AACb,WAAS,KAAK;AACd,YAAU,aAAa;EAIvB,MAAM,MAAM,GAFM,QAAQ,QAAQ,QAAQ,GAAG,CAEpB,mBAAmB,UAAU,GADvC,IAAI,gBAAgB,EAAE,OAAO,UAAU,CAAC,CACS,UAAU;EAC1E,MAAM,KAAK,IAAI,YAAY,IAAI;AAE/B,KAAG,iBAAiB,SAAS,MAAM;AACjC,OAAI;AACF,YAAQ,KAAK,MAAM,EAAE,KAAe,CAAM;AAC1C,cAAU,SAAS;WACb;AACN,aAAS,IAAI,gBAAgB,kBAAkB,4BAA4B,EAAE,CAAC;AAC9E,cAAU,QAAQ;AAClB,OAAG,OAAO;;IAEZ;AAEF,KAAG,iBAAiB,UAAU,MAAM;AAClC,OAAI,aAAa,aACf,KAAI;IACF,MAAM,UAAU,KAAK,MAAM,EAAE,KAAe;AAC5C,aACE,IAAI,gBACF,kBACA,OAAO,QAAQ,YAAY,WAAW,QAAQ,UAAU,aACxD,EACD,CACF;WACK;AACN,aAAS,IAAI,gBAAgB,kBAAkB,aAAa,EAAE,CAAC;;OAGjE,UAAS,IAAI,gBAAgB,kBAAkB,wBAAwB,EAAE,CAAC;AAE5E,aAAU,QAAQ;AAClB,MAAG,OAAO;IACV;AAEF,KAAG,iBAAiB,kBAAkB;AACpC,aAAU,SAAS;AACnB,MAAG,OAAO;IACV;AAEF,eAAa;AACX,MAAG,OAAO;;IAEX;EAAC;EAAS;EAAW;EAAS,CAAC;AAElC,QAAO;EAAE;EAAM;EAAO;EAAQ;;;;;AC3EhC,MAAM,sBAAsB,eAAsC,QAAQ;AACxE,YAAW,SAAS,OAAO;EAC3B;AAEF,MAAa,uBAAuB,oBAAoB;AAExD,SAAgB,kBAAyC;AACvD,QAAO,WAAW,oBAAoB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmi/seam-react",
-  "version": "0.2.3",
+  "version": "0.3.7",
   "files": [
     "dist",
     "scripts"
@@ -18,10 +18,11 @@
   },
   "dependencies": {
     "@canmi/seam-client": "workspace:*",
+    "@canmi/seam-i18n": "workspace:*",
     "esbuild": "^0.25.0"
   },
   "devDependencies": {
-    "@canmi/seam-injector": "workspace:*",
+    "@canmi/seam-engine": "workspace:*",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^28.1.0",

package/scripts/build-skeletons.mjs

@@ -1,335 +1,73 @@
 /* packages/client/react/scripts/build-skeletons.mjs */
 
 import { build } from "esbuild";
-import { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { readFileSync, unlinkSync } from "node:fs";
+import { readFileSync, mkdirSync, unlinkSync } from "node:fs";
 import { join, dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { SeamDataProvider, buildSentinelData } from "@canmi/seam-react";
+
+import { SeamBuildError } from "./skeleton/render.mjs";
+import { extractLayouts, flattenRoutes } from "./skeleton/layout.mjs";
 import {
-  collectStructuralAxes,
-  cartesianProduct,
-  buildVariantSentinel,
-} from "./variant-generator.mjs";
-import { generateMockFromSchema, flattenLoaderMock, deepMerge } from "./mock-generator.mjs";
+  parseComponentImports,
+  computeComponentHashes,
+  computeScriptHash,
+} from "./skeleton/cache.mjs";
+import { processLayoutsWithCache, processRoutesWithCache } from "./skeleton/process.mjs";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-// -- Rendering --
-
-function renderWithData(component, data) {
-  return renderToString(createElement(SeamDataProvider, { value: data }, createElement(component)));
-}
-
-// -- Render guards --
-
-class SeamBuildError extends Error {
-  constructor(message) {
-    super(message);
-    this.name = "SeamBuildError";
-  }
-}
-
-const buildWarnings = [];
-
-// Matches React-injected resource hint <link> tags.
-// Only rel values used by React's resource APIs are targeted (preload, dns-prefetch, preconnect,
-// data-precedence); user-authored <link> tags (canonical, alternate, stylesheet) are unaffected.
-const RESOURCE_HINT_RE =
-  /<link[^>]+rel\s*=\s*"(?:preload|dns-prefetch|preconnect)"[^>]*>|<link[^>]+data-precedence[^>]*>/gi;
-
-function installRenderTraps(violations, teardowns) {
-  function trapCall(obj, prop, label) {
-    const orig = obj[prop];
-    obj[prop] = function () {
-      violations.push({ severity: "error", reason: `${label} called during skeleton render` });
-      throw new SeamBuildError(`${label} is not allowed in skeleton components`);
-    };
-    teardowns.push(() => {
-      obj[prop] = orig;
-    });
-  }
-
-  trapCall(globalThis, "fetch", "fetch()");
-  trapCall(Math, "random", "Math.random()");
-  trapCall(Date, "now", "Date.now()");
-  if (globalThis.crypto?.randomUUID) {
-    trapCall(globalThis.crypto, "randomUUID", "crypto.randomUUID()");
-  }
-
-  // Timer APIs — these don't affect renderToString output, but pending handles
-  // prevent the build process from exiting (Node keeps the event loop alive).
-  trapCall(globalThis, "setTimeout", "setTimeout()");
-  trapCall(globalThis, "setInterval", "setInterval()");
-  if (globalThis.setImmediate) {
-    trapCall(globalThis, "setImmediate", "setImmediate()");
-  }
-  trapCall(globalThis, "queueMicrotask", "queueMicrotask()");
-
-  // Trap browser globals (only if not already defined — these are undefined in Node;
-  // typeof checks bypass getters, so `typeof window !== 'undefined'` remains safe)
-  for (const name of ["window", "document", "localStorage"]) {
-    if (!(name in globalThis)) {
-      Object.defineProperty(globalThis, name, {
-        get() {
-          violations.push({ severity: "error", reason: `${name} accessed during skeleton render` });
-          throw new SeamBuildError(`${name} is not available in skeleton components`);
-        },
-        configurable: true,
-      });
-      teardowns.push(() => {
-        delete globalThis[name];
-      });
-    }
-  }
-}
-
-function validateOutput(html, violations) {
-  if (html.includes("<!--$!-->")) {
-    violations.push({
-      severity: "error",
-      reason:
-        "Suspense abort detected \u2014 a component used an unresolved async resource\n" +
-        "  (e.g. use(promise)) inside a <Suspense> boundary, producing an incomplete\n" +
-        "  template with fallback content baked in.\n" +
-        "  Fix: remove use() from skeleton components. Async data belongs in loaders.",
-    });
-  }
-
-  const hints = Array.from(html.matchAll(RESOURCE_HINT_RE));
-  if (hints.length > 0) {
-    violations.push({
-      severity: "warning",
-      reason:
-        `stripped ${hints.length} resource hint <link> tag(s) injected by React's preload()/preinit().\n` +
-        "  These are not data-driven and would cause hydration mismatch.",
-    });
-  }
-}
-
-function stripResourceHints(html) {
-  return html.replace(RESOURCE_HINT_RE, "");
-}
-
-function guardedRender(routePath, component, data) {
-  const violations = [];
-  const teardowns = [];
-
-  installRenderTraps(violations, teardowns);
-
-  let html;
+function loadManifest(manifestFile) {
+  if (!manifestFile || manifestFile === "none") return { manifest: null, manifestContent: "" };
   try {
-    html = renderWithData(component, data);
-  } finally {
-    for (const teardown of teardowns) teardown();
+    const content = readFileSync(resolve(manifestFile), "utf-8");
+    return { manifest: JSON.parse(content), manifestContent: content };
+  } catch (e) {
+    console.error(`warning: could not read manifest: ${e.message}`);
+    return { manifest: null, manifestContent: "" };
   }
-
-  validateOutput(html, violations);
-
-  const fatal = violations.filter((v) => v.severity === "error");
-  if (fatal.length > 0) {
-    const msg = fatal.map((v) => `[seam] error: ${routePath}\n  ${v.reason}`).join("\n\n");
-    throw new SeamBuildError(msg);
-  }
-
-  // After fatal check, only warnings remain
-  for (const v of violations) {
-    buildWarnings.push(`[seam] warning: ${routePath}\n  ${v.reason}`);
-  }
-  if (violations.length > 0) {
-    html = stripResourceHints(html);
-  }
-
-  return html;
 }
 
-/**
- * Merge loader procedure schemas from manifest into a combined page schema.
- * Each loader contributes its output schema fields to the top-level properties.
- */
-function buildPageSchema(route, manifest) {
-  if (!manifest) return null;
-
-  const properties = {};
-
-  for (const [loaderKey, loaderDef] of Object.entries(route.loaders || {})) {
-    const procName = loaderDef.procedure;
-    const proc = manifest.procedures?.[procName];
-    if (!proc?.output) continue;
-
-    // Always nest under the loader key so axis paths (e.g. "user.bio")
-    // align with sentinel data paths built from mock (e.g. sentinel.user.bio).
-    properties[loaderKey] = proc.output;
-  }
-
-  const result = {};
-  if (Object.keys(properties).length > 0) result.properties = properties;
-  return Object.keys(result).length > 0 ? result : null;
-}
-
-/**
- * Resolve mock data for a route: auto-generate from schema when available,
- * then deep-merge any user-provided partial mock on top.
- */
-function resolveRouteMock(route, manifest) {
-  const pageSchema = buildPageSchema(route, manifest);
-
-  if (pageSchema) {
-    const keyedMock = generateMockFromSchema(pageSchema);
-    const autoMock = flattenLoaderMock(keyedMock);
-    return route.mock ? deepMerge(autoMock, route.mock) : autoMock;
-  }
-
-  // No manifest (frontend-only mode) — mock is required
-  if (route.mock) return route.mock;
-
-  throw new SeamBuildError(
-    `[seam] error: Mock data required for route "${route.path}"\n\n` +
-      "  No procedure manifest found \u2014 cannot auto-generate mock data.\n" +
-      "  Provide mock data in your route definition:\n\n" +
-      "    defineRoutes([{\n" +
-      `      path: "${route.path}",\n` +
-      "      component: YourComponent,\n" +
-      '      mock: { user: { name: "..." }, repos: [...] }\n' +
-      "    }])\n\n" +
-      "  Or switch to fullstack mode with typed Procedures\n" +
-      "  to enable automatic mock generation from schema.",
-  );
-}
-
-function renderRoute(route, manifest) {
-  const mock = resolveRouteMock(route, manifest);
-  const baseSentinel = buildSentinelData(mock);
-  const pageSchema = buildPageSchema(route, manifest);
-  const axes = pageSchema ? collectStructuralAxes(pageSchema, mock) : [];
-  const combos = cartesianProduct(axes);
-
-  const variants = combos.map((variant) => {
-    const sentinel = buildVariantSentinel(baseSentinel, mock, variant);
-    const html = guardedRender(route.path, route.component, sentinel);
-    return { variant, html };
-  });
-
-  // Render with real mock data for CTR equivalence check
-  const mockHtml = stripResourceHints(guardedRender(route.path, route.component, mock));
-
-  return {
-    path: route.path,
-    loaders: route.loaders,
-    layout: route._layoutId || undefined,
-    axes,
-    variants,
-    mockHtml,
-    mock,
-    pageSchema,
-  };
-}
-
-// -- Layout helpers --
-
-function toLayoutId(path) {
-  return path === "/"
-    ? "_layout_root"
-    : `_layout_${path.replace(/^\/|\/$/g, "").replace(/\//g, "-")}`;
-}
-
-/** Extract layout components and metadata from route tree */
-function extractLayouts(routes) {
-  const seen = new Map();
-  (function walk(defs, parentId) {
-    for (const def of defs) {
-      if (def.layout && def.children) {
-        const id = toLayoutId(def.path);
-        if (!seen.has(id)) {
-          seen.set(id, {
-            component: def.layout,
-            loaders: def.loaders || {},
-            mock: def.mock || null,
-            parentId: parentId || null,
-          });
-        }
-        walk(def.children, id);
-      }
-    }
-  })(routes, null);
-  return seen;
-}
-
-/**
- * Resolve mock data for a layout: auto-generate from schema when loaders exist,
- * then deep-merge any user-provided partial mock on top.
- * Unlike resolveRouteMock, a layout with no loaders and no mock is valid (empty shell).
- */
-function resolveLayoutMock(entry, manifest) {
-  if (Object.keys(entry.loaders).length > 0) {
-    const schema = buildPageSchema(entry, manifest);
-    if (schema) {
-      const keyedMock = generateMockFromSchema(schema);
-      const autoMock = flattenLoaderMock(keyedMock);
-      return entry.mock ? deepMerge(autoMock, entry.mock) : autoMock;
-    }
-  }
-  return entry.mock || {};
-}
-
-/** Render layout with seam-outlet placeholder, optionally with sentinel data */
-function renderLayout(LayoutComponent, id, entry, manifest) {
-  const mock = resolveLayoutMock(entry, manifest);
-  const data = Object.keys(mock).length > 0 ? buildSentinelData(mock) : {};
-  function LayoutWithOutlet() {
-    return createElement(LayoutComponent, null, createElement("seam-outlet", null));
-  }
-  return guardedRender(`layout:${id}`, LayoutWithOutlet, data);
-}
-
-/** Flatten routes, annotating each leaf with its parent layout id */
-function flattenRoutes(routes, currentLayout) {
-  const leaves = [];
-  for (const route of routes) {
-    if (route.layout && route.children) {
-      leaves.push(...flattenRoutes(route.children, toLayoutId(route.path)));
-    } else if (route.children) {
-      leaves.push(...flattenRoutes(route.children, currentLayout));
-    } else {
-      if (currentLayout) route._layoutId = currentLayout;
-      leaves.push(route);
-    }
+function loadI18nConfig(i18nArg) {
+  if (!i18nArg || i18nArg === "none") return null;
+  try {
+    return JSON.parse(i18nArg);
+  } catch (e) {
+    console.error(`warning: could not parse i18n config: ${e.message}`);
+    return null;
   }
-  return leaves;
 }
 
-// -- Main --
-
 async function main() {
   const routesFile = process.argv[2];
-  const manifestFile = process.argv[3];
-
   if (!routesFile) {
-    console.error("Usage: node build-skeletons.mjs <routes-file> [manifest-file]");
+    console.error("Usage: node build-skeletons.mjs <routes-file> [manifest-file] [i18n-json]");
     process.exit(1);
   }
 
-  // Load manifest if provided
-  let manifest = null;
-  if (manifestFile && manifestFile !== "none") {
-    try {
-      manifest = JSON.parse(readFileSync(resolve(manifestFile), "utf-8"));
-    } catch (e) {
-      console.error(`warning: could not read manifest: ${e.message}`);
-    }
+  const { manifest, manifestContent } = loadManifest(process.argv[3]);
+  const i18n = loadI18nConfig(process.argv[4]);
+
+  if (i18n) {
+    const { setI18nProvider } = await import("./skeleton/render.mjs");
+    const { I18nProvider } = await import("@canmi/seam-i18n/react");
+    setI18nProvider(I18nProvider);
   }
 
   const absRoutes = resolve(routesFile);
+  const routesDir = dirname(absRoutes);
   const outfile = join(__dirname, ".tmp-routes-bundle.mjs");
 
+  // Parse imports from source (before bundle) for component hash resolution
+  const routesSource = readFileSync(absRoutes, "utf-8");
+  const importMap = parseComponentImports(routesSource);
+
   await build({
     entryPoints: [absRoutes],
     bundle: true,
     format: "esm",
     platform: "node",
     outfile,
-    external: ["react", "react-dom", "@canmi/seam-react"],
+    external: ["react", "react-dom", "@canmi/seam-react", "@canmi/seam-i18n"],
   });
 
   try {
@@ -340,17 +78,62 @@ async function main() {
     }
 
     const layoutMap = extractLayouts(routes);
-    const layouts = [...layoutMap.entries()].map(([id, entry]) => ({
-      id,
-      html: renderLayout(entry.component, id, entry, manifest),
-      loaders: entry.loaders,
-      parent: entry.parentId,
-    }));
     const flat = flattenRoutes(routes);
+
+    // Collect all unique component names for hashing
+    const componentNames = new Set();
+    for (const [, entry] of layoutMap) {
+      if (entry.component?.name) componentNames.add(entry.component.name);
+    }
+    for (const route of flat) {
+      if (route.component?.name) componentNames.add(route.component.name);
+    }
+
+    // Files to hash for script-level cache invalidation
+    const skeletonDir = join(__dirname, "skeleton");
+    const scriptFiles = [
+      join(skeletonDir, "render.mjs"),
+      join(skeletonDir, "schema.mjs"),
+      join(skeletonDir, "layout.mjs"),
+      join(skeletonDir, "cache.mjs"),
+      join(skeletonDir, "process.mjs"),
+      join(__dirname, "variant-generator.mjs"),
+      join(__dirname, "mock-generator.mjs"),
+    ];
+
+    const [componentHashes, scriptHash] = await Promise.all([
+      computeComponentHashes([...componentNames], importMap, routesDir),
+      Promise.resolve(computeScriptHash(scriptFiles)),
+    ]);
+
+    // Set up cache directory
+    const cacheDir = join(process.cwd(), ".seam", "cache", "skeletons");
+    mkdirSync(cacheDir, { recursive: true });
+
+    // Shared warning state passed through to all render functions
+    const buildWarnings = [];
+    const seenWarnings = new Set();
+    const warnCtx = { buildWarnings, seenWarnings };
+
+    const ctx = {
+      componentHashes,
+      scriptHash,
+      manifestContent,
+      manifest,
+      cacheDir,
+      i18n,
+      warnCtx,
+      stats: { hits: 0, misses: 0 },
+    };
+
+    const layouts = processLayoutsWithCache(layoutMap, ctx);
+    const renderedRoutes = processRoutesWithCache(flat, ctx);
+
     const output = {
       layouts,
-      routes: flat.map((r) => renderRoute(r, manifest)),
+      routes: renderedRoutes,
       warnings: buildWarnings,
+      cacheStats: ctx.stats,
     };
     process.stdout.write(JSON.stringify(output));
   } finally {