Merge pull request #376 from jonathanhefner/fix-code-snippets-sync

Fix `extractRegion()` matching region names that are substrings of others

docs/patterns.md

@@ -345,14 +345,46 @@ return {
 
 <!-- prettier-ignore -->
 ```tsx source="./patterns.tsx#persistData"
-// In your tool callback, include viewUUID in the result metadata.
+// Store the viewUUID received from the server
-return {
+let viewUUID: string | undefined;
-  content: [{ type: "text", text: `Displaying PDF viewer for "${title}"` }],
+
-  structuredContent: { url, title, pageCount, initialPage: 1 },
+// Helper to save state to localStorage
-  _meta: {
+function saveState<T>(state: T): void {
-    viewUUID: randomUUID(),
+  if (!viewUUID) return;
-  },
+  try {
+    localStorage.setItem(viewUUID, JSON.stringify(state));
+  } catch (err) {
+    console.error("Failed to save view state:", err);
+  }
+}
+
+// Helper to load state from localStorage
+function loadState<T>(): T | null {
+  if (!viewUUID) return null;
+  try {
+    const saved = localStorage.getItem(viewUUID);
+    return saved ? (JSON.parse(saved) as T) : null;
+  } catch (err) {
+    console.error("Failed to load view state:", err);
+    return null;
+  }
+}
+
+// Receive viewUUID from the tool result
+app.ontoolresult = (result) => {
+  viewUUID = result._meta?.viewUUID
+    ? String(result._meta.viewUUID)
+    : undefined;
+
+  // Restore any previously saved state
+  const savedState = loadState<{ currentPage: number }>();
+  if (savedState) {
+    // Apply restored state to your UI...
+  }
 };
+
+// Call saveState() whenever your view state changes
+// e.g., saveState({ currentPage: 5 });
 ```
 
 _See [`examples/map-server/`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/map-server) for a full implementation of this pattern._

scripts/sync-snippets.ts

@@ -254,8 +254,9 @@ function extractRegion(
     );
   }
 
-  const regionStart = `//#region ${regionName}`;
+  const lineEnding = exampleContent.includes("\r\n") ? "\r\n" : "\n";
-  const regionEnd = `//#endregion ${regionName}`;
+  const regionStart = `//#region ${regionName}${lineEnding}`;
+  const regionEnd = `//#endregion ${regionName}${lineEnding}`;
 
   const startIndex = exampleContent.indexOf(regionStart);
   if (startIndex === -1) {