diff --git a/packages/z-timeline/web/index.html b/packages/z-timeline/web/index.html
index 8f1c153..54a97a5 100644
--- a/packages/z-timeline/web/index.html
+++ b/packages/z-timeline/web/index.html
@@ -33,14 +33,119 @@
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
-  <!--
-    You can customize the "flutter_bootstrap.js" script.
-    This is useful to provide a custom configuration to the Flutter loader
-    or to give the user feedback during the initialization process.
+  <!-- Dev-mode fake data: provides window.__zendegi__ so the timeline
+       renders standalone without the React parent. Harmless in production
+       because React overwrites __zendegi__ before Flutter loads. -->
+  <script>
+    (function () {
+      // Only bootstrap if no bridge exists yet (i.e. not embedded in React)
+      if (window.__zendegi__) return;
+
+      var state = {
+        timeline: {
+          id: "tl-1",
+          title: "My Project",
+          groups: [
+            {
+              id: "g-1",
+              title: "Design",
+              sortOrder: 0,
+              items: [
+                { id: "e-1", title: "Brand identity",  start: "2026-01-02", end: "2026-01-08" },
+                { id: "e-2", title: "UI mockups",       start: "2026-01-06", end: "2026-01-14" },
+                { id: "e-3", title: "Design review",    start: "2026-01-20", end: "2026-01-22" },
+              ],
+            },
+            {
+              id: "g-2",
+              title: "Engineering",
+              sortOrder: 1,
+              items: [
+                { id: "e-4", title: "API scaffolding",  start: "2026-01-05", end: "2026-01-12" },
+                { id: "e-5", title: "Auth flow",        start: "2026-01-10", end: "2026-01-18" },
+                { id: "e-6", title: "Dashboard UI",     start: "2026-01-15", end: "2026-01-25" },
+              ],
+            },
+            {
+              id: "g-3",
+              title: "Launch",
+              sortOrder: 2,
+              items: [
+                { id: "e-7", title: "QA testing",       start: "2026-01-19", end: "2026-01-26" },
+                { id: "e-8", title: "Beta release",     start: "2026-01-24", end: "2026-01-28" },
+                { id: "e-9", title: "Marketing prep",   start: "2026-01-08", end: "2026-01-15" },
+              ],
+            },
+          ],
+        },
+        selectedItemId: null,
+      };
+
+      var _updateState = null;
+
+      window.__zendegi__ = {
+        getState: function () {
+          return JSON.stringify(state);
+        },
+
+        onEvent: function (jsonStr) {
+          var event = JSON.parse(jsonStr);
+          console.log(event);
+
+          if (event.type === "entry_moved") {
+            var p = event.payload;
+            var entry = null;
+            var sourceGroup = null;
+
+            // Find and remove the entry from its current group
+            for (var i = 0; i < state.timeline.groups.length; i++) {
+              var g = state.timeline.groups[i];
+              for (var j = 0; j < g.items.length; j++) {
+                if (g.items[j].id === p.entryId) {
+                  entry = g.items.splice(j, 1)[0];
+                  sourceGroup = g;
+                  break;
+                }
+              }
+              if (entry) break;
+            }
+
+            if (entry) {
+              // Preserve duration, update start/end
+              var oldStart = new Date(entry.start);
+              var oldEnd = new Date(entry.end);
+              var duration = oldEnd - oldStart;
+              var newStart = new Date(p.newStart);
+              var newEnd = new Date(newStart.getTime() + duration);
+
+              entry.start = newStart.toISOString().split("T")[0];
+              entry.end = newEnd.toISOString().split("T")[0];
+
+              // Add to target group
+              var targetGroup = state.timeline.groups.find(
+                function (g) { return g.id === p.newGroupId; }
+              );
+              if (targetGroup) {
+                targetGroup.items.push(entry);
+              }
+
+            }
+          } else if (event.type === "content_height") {
+            console.log("[z-timeline dev] content_height:", event.payload.height);
+          } else {
+            console.log("[z-timeline dev] event:", event);
+          }
+        },
+
+        set updateState(callback) {
+          _updateState = callback;
+        },
+      };
+
+      console.log("[z-timeline dev] Standalone mode — fake data loaded");
+    })();
+  </script>
 
-    For more details:
-    * https://docs.flutter.dev/platform-integration/web/initialization
-  -->
   <script src="flutter_bootstrap.js" async></script>
 </body>
 </html>
