@leadertechie/personal-site-kit 0.1.0-alpha.16 → 0.1.0-alpha.18

package/README.md

@@ -1,6 +1,6 @@
 # @leadertechie/personal-site-kit
 
-A high-performance, modular engine for building personal websites and professional portfolios. Powered by Cloudflare Workers, R2 Storage, and Lit Web Components.
+A high-performance, modular engine for building personal websites and professional portfolios. Powered by Cloudflare Workers, R2 Storage, Lit Web Components, and the **@leadertechie** ecosystem.
 
 ## Features
 
@@ -8,18 +8,21 @@ A high-performance, modular engine for building personal websites and profession
 - **🛠️ 4-Section Engine**: Fully integrated logic for **API**, **UI**, **Prerender**, and **Admin**.
 - **🎨 Modern Layout**: Semantic grid system with responsive `main-column` and `sidebar-column` components.
 - **🌓 Theme Engine**: Built-in light/dark mode support with persistent user preferences.
-- **📝 Content Driven**: Dynamic Markdown rendering with frontmatter support via `@leadertechie/md2html`.
+- **📝 Content Driven**: Dynamic Markdown rendering with frontmatter support via `@leadertechie/md2html` (v2).
 - **⚙️ Remote Config**: Manage site settings (title, copyright, social links) directly from R2 without re-deploying.
 - **🔍 SEO Optimized**: Server-side prerendering ensures search engines see your content perfectly.
+- **🔄 SWR Caching**: Stale-while-revalidate caching via `@leadertechie/r2tohtml` for optimal performance.
+- **⚡ Client-Side Interactivity**: DOM interaction patterns (poll, live-update, click-toggle, infinite-scroll, form-live) via `@leadertechie/md2interact`.
+- **🎯 CSS Hydration**: Inline critical CSS, layer injection, and theme toggle support.
 
 ## Architecture
 
 The kit is divided into four logical subpaths:
 
-1.  **/shared**: Common interfaces, types, and the reactive `SiteStore`.
-2.  **/ui**: Web components for the Banner, Footer, About Me, and Admin Portal.
-3.  **/api**: Standard handlers for Cloudflare Workers to manage R2 content.
-4.  **/prerender**: SEO engine to generate static HTML for crawlers.
+1.  **/shared**: Common interfaces, types, the reactive `SiteStore`, and the `WebsiteUI` bootstrap.
+2.  **/ui**: Web components for the Banner, Footer, About Me, Blog Viewer, Story Viewer, and Admin Portal.
+3.  **/api**: Standard handlers for Cloudflare Workers to manage R2 content with v2 caching.
+4.  **/prerender**: SEO engine to generate static HTML for crawlers with SWR caching.
 
 ## Installation
 
@@ -29,26 +32,100 @@ npm install @leadertechie/personal-site-kit
 
 ## Quick Start (Usage)
 
-### 1. API Worker (`api.ts`)
+### 1. API Worker (`api/index.ts`)
+
 ```typescript
-import { handleAPIRoute } from '@leadertechie/personal-site-kit/api';
+import { WebsiteAPI } from '@leadertechie/personal-site-kit/api';
+
+export default new WebsiteAPI();
+```
+
+### 2. UI Entry (`ui/index.ts`)
 
-export default {
-  async fetch(request, env) {
-    return handleAPIRoute(request, env);
+```typescript
+import { WebsiteUI } from '@leadertechie/personal-site-kit/shared';
+import '@leadertechie/personal-site-kit/styles/theme.css';
+import '@leadertechie/personal-site-kit/ui';
+
+// Bootstrap the UI — md2interact is automatically initialized
+WebsiteUI.getInstance({
+  apiUrl: window.location.origin,
+  // Optional: configure md2interact interactions
+  interactConfig: {
+    interactions: {
+      'poll': { selector: '[data-interact="poll"]' },
+      'live-update': { selector: '[data-interact="live-update"]' },
+      'click-toggle': { selector: '[data-interact="click-toggle"]' },
+      'infinite-scroll': { selector: '[data-interact="infinite-scroll"]' },
+      'form-live': { selector: '[data-interact="form-live"]' }
+    },
+    cssHydration: {
+      inlineCritical: true,
+      layerInjection: true,
+      themeToggle: true
+    }
   }
-};
+}).bootstrap();
 ```
 
-### 2. UI Entry (`main.ts`)
+### 3. Prerender (`prerender/index.ts`)
+
 ```typescript
-import { SiteStore } from '@leadertechie/personal-site-kit/shared';
-import '@leadertechie/personal-site-kit/ui/banner';
+import { WebsitePrerender } from '@leadertechie/personal-site-kit/prerender';
 
-const store = SiteStore.getInstance();
-await store.init({ apiUrl: 'https://api.yourdomain.com' });
+export default new WebsitePrerender();
 ```
 
+## Client-Side Interactivity with md2interact
+
+The kit automatically initializes `@leadertechie/md2interact` during `WebsiteUI.bootstrap()`. This enables:
+
+### DOM Interaction Patterns
+
+Markdown content with frontmatter can declare interaction patterns:
+
+```markdown
+---
+interaction: poll
+interactConfig:
+  url: /api/data
+  interval: 5000
+---
+
+# Live Poll Data
+```
+
+Supported patterns: `poll`, `live-update`, `click-toggle`, `infinite-scroll`, `form-live`, `mfe`, `custom`
+
+### CSS Hydration
+
+- **inlineCritical**: Injects critical CSS directly into the DOM
+- **layerInjection**: Uses CSS `@layer` for organized style injection
+- **themeToggle**: Enables light/dark theme toggling
+
+### SPA Navigation
+
+After dynamic content loads (e.g., blog detail pages), call `reinitInteract()` to re-scan the DOM:
+
+```typescript
+const ui = WebsiteUI.getInstance();
+ui.reinitInteract();
+```
+
+## Caching Strategy (v2)
+
+The kit uses `@leadertechie/r2tohtml` with a multi-tier caching strategy:
+
+| Tier | Cache | TTL |
+|------|-------|-----|
+| In-Memory | `ContentCacheV2` with SWR | 5 min fresh, 30 min stale |
+| Cloudflare Edge | `cfCache` | 5 min |
+
+This means:
+- **Fresh**: Served instantly from memory
+- **Stale**: Served from memory while revalidating in background (SWR)
+- **Miss**: Fetched from R2, cached at edge and in-memory
+
 ## Deployment
 
 This kit is designed to be deployed to **Cloudflare**. Ensure your `wrangler.toml` is configured with an R2 bucket named `CONTENT_BUCKET`.

package/dist/api/content-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-utils.d.ts","sourceRoot":"","sources":["../../src/api/content-utils.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD,OAAO,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAStF;AAED,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAUvD;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG;IAAE,QAAQ,EAAE,eAAe,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CA6BhG;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,GAAG,IAAI,CAK5D;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC,CAqB1H;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC,CAiB1H;AAED,wBAAsB,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC,CA2BjG"}
+{"version":3,"file":"content-utils.d.ts","sourceRoot":"","sources":["../../src/api/content-utils.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD,OAAO,EAAE,MAAM,CAAC;CACjB;AASD,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAoBtF;AAED,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAMvD;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG;IAAE,QAAQ,EAAE,eAAe,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CA6BhG;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,GAAG,IAAI,CAK5D;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC,CAqB1H;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC,CAiB1H;AAED,wBAAsB,aAAa,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,QAAQ,GAAG,SAAS,CAAC,EAAE,CAAC,CA2BjG"}

package/dist/api/handlers/about-me.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"about-me.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/about-me.ts"],"names":[],"mappings":"AA4CA,wBAAgB,iBAAiB,SAEhC;AAED,wBAAsB,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC,CA4DhE"}
+{"version":3,"file":"about-me.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/about-me.ts"],"names":[],"mappings":"AA0DA,wBAAgB,iBAAiB,SAEhC;AAED,wBAAsB,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC,CA4DhE"}

package/dist/api/handlers/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/content.ts"],"names":[],"mappings":"AAoBA,wBAAsB,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAqElG"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/content.ts"],"names":[],"mappings":"AAqBA,wBAAsB,aAAa,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAqElG"}

package/dist/api/handlers/home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/home.ts"],"names":[],"mappings":"AAiCA,wBAAgB,iBAAiB,SAEhC;AAED,wBAAsB,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC,CAwC7D"}
+{"version":3,"file":"home.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/home.ts"],"names":[],"mappings":"AA+CA,wBAAgB,iBAAiB,SAEhC;AAED,wBAAsB,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC,CAwC7D"}

package/dist/api.js

@@ -1,5 +1,5 @@
-import { W as WebsiteAPI } from "./chunks/website-api-C3lGjXdD.js";
-import { A, B, M, R, c, a, g, b, d, h, e, r, s, v } from "./chunks/website-api-C3lGjXdD.js";
+import { W as WebsiteAPI } from "./chunks/website-api-DBEh24zq.js";
+import { A, B, M, R, c, a, g, b, d, h, e, r, s, v } from "./chunks/website-api-DBEh24zq.js";
 const defaultAPI = new WebsiteAPI();
 export {
   A as AUTH_KV,

package/dist/chunks/{index-B2jGIzSi.js → index-DAog9TQE.js}

@@ -2385,9 +2385,20 @@ var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "
 var _error_dec$1, _loading_dec$1, _blogPost_dec, _slug_dec$1, _a$1, _BlogViewer_decorators, _init$1, _slug$1, _blogPost, _loading$1, _error$1;
 const pipeline$1 = new MarkdownPipeline({
   imagePathPrefix: "images/",
+  preserveRawHTML: true,
+  errorRecovery: "warn",
+  maxRecursionDepth: 50,
   styleOptions: {
     classPrefix: "md-",
-    addHeadingIds: true
+    addHeadingIds: true,
+    emitScopeAnchors: true
+  },
+  slotPattern: /\[\[(.*?)\]\]/g,
+  onSlot: (name) => {
+    const slotMap = {
+      "CURRENT_YEAR": (/* @__PURE__ */ new Date()).getFullYear().toString()
+    };
+    return slotMap[name] || `[[${name}]]`;
   }
 });
 _BlogViewer_decorators = [customElement("my-blog-viewer")];
@@ -2583,9 +2594,20 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _error_dec, _loading_dec, _storyPost_dec, _slug_dec, _a, _StoryViewer_decorators, _init, _slug, _storyPost, _loading, _error;
 const pipeline = new MarkdownPipeline({
   imagePathPrefix: "images/",
+  preserveRawHTML: true,
+  errorRecovery: "warn",
+  maxRecursionDepth: 50,
   styleOptions: {
     classPrefix: "md-",
-    addHeadingIds: true
+    addHeadingIds: true,
+    emitScopeAnchors: true
+  },
+  slotPattern: /\[\[(.*?)\]\]/g,
+  onSlot: (name) => {
+    const slotMap = {
+      "CURRENT_YEAR": (/* @__PURE__ */ new Date()).getFullYear().toString()
+    };
+    return slotMap[name] || `[[${name}]]`;
   }
 });
 _StoryViewer_decorators = [customElement("my-story-viewer")];

package/dist/chunks/{template-DXUSp0BG.js → template-DUdadCrH.js}

@@ -1,10 +1,23 @@
 import { S as SiteStore } from "./site-store-CGV9c2DI.js";
 import { MarkdownPipeline } from "@leadertechie/r2tohtml";
+import { init, reinit } from "@leadertechie/md2interact";
 const pipeline = new MarkdownPipeline({
   imagePathPrefix: "images/",
+  preserveRawHTML: true,
+  errorRecovery: "warn",
+  maxRecursionDepth: 50,
   styleOptions: {
     classPrefix: "md-",
-    addHeadingIds: true
+    addHeadingIds: true,
+    emitScopeAnchors: true
+  },
+  slotPattern: /\[\[(.*?)\]\]/g,
+  onSlot: (name) => {
+    const slotMap = {
+      "SITE_TITLE": document?.querySelector("title")?.textContent || "My Site",
+      "CURRENT_YEAR": (/* @__PURE__ */ new Date()).getFullYear().toString()
+    };
+    return slotMap[name] || `[[${name}]]`;
   }
 });
 const renderMarkdown = (content) => {
@@ -277,6 +290,13 @@ class Router {
     }
     canonicalLink.setAttribute("href", url);
   }
+  /**
+   * After rendering new content, reinitialize md2interact so it
+   * re-scans the DOM for interaction elements (poll, live-update, etc.)
+   */
+  afterRender() {
+    this.ui.reinitInteract();
+  }
   async renderHomePage() {
     let blogs = [];
     let stories = [];
@@ -311,6 +331,7 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+    this.afterRender();
   }
   renderAboutMePage() {
     const pageContent = generatePageContent("/about-me", this.routes, this.footerLinks, {
@@ -320,6 +341,7 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+    this.afterRender();
   }
   async renderContentListPage(pathname) {
     const type = pathname === "/blogs" ? "blogs" : "stories";
@@ -338,6 +360,7 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(pageContent.title, pageContent.description, pageContent.canonicalUrl);
+    this.afterRender();
   }
   async renderContentDetailPage(pathname) {
     const isBlog = pathname.startsWith("/blogs/");
@@ -357,6 +380,7 @@ class Router {
     });
     if (this.appElement) this.appElement.innerHTML = pageContent.content;
     this.setPageMeta(`${slug.replace(/-/g, " ")} - ${this.siteTitle}`, "Read more content", window.location.href);
+    this.afterRender();
   }
   async renderAdminPage() {
     generatePageContent("/admin", this.routes, this.footerLinks, {
@@ -377,11 +401,13 @@ class Router {
         <my-footer copyright="${this.copyright}" footerLinks='${JSON.stringify(this.footerLinks)}'></my-footer>
       `;
     }
+    this.afterRender();
   }
 }
 class WebsiteUI {
   constructor(config = {}) {
     this.router = null;
+    this.interactInitialized = false;
     this.store = SiteStore.getInstance();
     this.config = config;
   }
@@ -411,11 +437,44 @@ class WebsiteUI {
     this.updateBanner(this.store.getConfig());
     this.router = new Router(this);
     this.router.init(this.config.appElementId || "app");
+    this.initInteract();
     if (this.config.onBootstrap) {
       await this.config.onBootstrap(this);
     }
     console.log("WebsiteUI bootstrapped");
   }
+  /**
+   * Initialize md2interact for client-side DOM interactions,
+   * CSS hydration, and event bus communication.
+   */
+  initInteract() {
+    if (this.interactInitialized) return;
+    const interactCfg = this.config.interactConfig || {};
+    init({
+      interactions: interactCfg.interactions || {
+        "poll": { selector: '[data-interact="poll"]' },
+        "live-update": { selector: '[data-interact="live-update"]' },
+        "click-toggle": { selector: '[data-interact="click-toggle"]' },
+        "infinite-scroll": { selector: '[data-interact="infinite-scroll"]' },
+        "form-live": { selector: '[data-interact="form-live"]' }
+      },
+      cssHydration: interactCfg.cssHydration || {
+        inlineCritical: true,
+        layerInjection: true,
+        themeToggle: true
+      }
+    });
+    this.interactInitialized = true;
+  }
+  /**
+   * Reinitialize md2interact after dynamic content changes (e.g., SPA navigation).
+   * This re-scans the DOM for new interaction elements.
+   */
+  reinitInteract() {
+    if (this.interactInitialized) {
+      reinit();
+    }
+  }
   updateBanner(config) {
     const banner = document.querySelector("my-banner");
     if (banner) {
@@ -493,13 +552,12 @@ class ThemeToggle extends HTMLElement {
             cursor: pointer;
             font-size: 1.5rem;
             padding: 0.5rem;
-            color: var(--text-color, #213547); /* Default for light mode */
+            color: var(--text-color, #213547);
             transition: color 0.3s ease;
           }
           button:hover {
-            color: var(--primary-color, #747bff); /* Hover color */
+            color: var(--primary-color, #747bff);
           }
-          /* Dark mode specific styles for the button */
           html[data-theme='dark'] button {
             color: var(--dark-mode-text-color, rgba(255, 255, 255, 0.87));
           }
@@ -508,7 +566,7 @@ class ThemeToggle extends HTMLElement {
           }
         </style>
         <button id="theme-toggle" aria-label="Toggle theme">
-          <span class="icon">${this.getSunIcon()}</span> <!-- Default to sun for light mode -->
+          <span class="icon">${this.getSunIcon()}</span>
         </button>
       `;
     }

package/dist/chunks/{website-api-C3lGjXdD.js → website-api-DBEh24zq.js}

@@ -1,4 +1,4 @@
-import { R2ContentLoader } from "@leadertechie/r2tohtml";
+import { ContentCacheV2, R2ContentLoader } from "@leadertechie/r2tohtml";
 function createJSONResponse(data, status = 200) {
   return new Response(JSON.stringify(data), {
     status,
@@ -9,6 +9,14 @@ function createErrorResponse(message, status = 500) {
   return createJSONResponse({ error: message }, status);
 }
 let loader$1 = null;
+new ContentCacheV2(
+  5 * 60 * 1e3,
+  // TTL: 5 minutes fresh
+  true,
+  // enabled
+  30 * 60 * 1e3
+  // SWR TTL: 30 minutes stale window
+);
 function getLoader$1(env) {
   if (!env?.CONTENT_BUCKET) {
     return null;
@@ -17,14 +25,24 @@ function getLoader$1(env) {
     loader$1 = new R2ContentLoader(
       {
         bucket: env.CONTENT_BUCKET,
-        cacheTTL: 5 * 60 * 1e3
+        cacheTTL: 5 * 60 * 1e3,
+        cfCache: true,
+        // Enable Cloudflare edge cache tier
+        cfCacheTTL: 300,
+        // CF cache for 5 minutes
+        swrTTL: 30 * 60 * 1e3
+        // SWR window: 30 minutes
       },
       {
         md2html: {
           imagePathPrefix: "images/",
+          preserveRawHTML: true,
+          errorRecovery: "warn",
+          maxRecursionDepth: 50,
           styleOptions: {
             classPrefix: "md-",
-            addHeadingIds: true
+            addHeadingIds: true,
+            emitScopeAnchors: true
           }
         }
       }
@@ -32,7 +50,7 @@ function getLoader$1(env) {
   }
   return loader$1;
 }
-function clearContentCache$1() {
+function clearContentCache$2() {
   loader$1?.clearCache();
 }
 async function handleAboutMe(env) {
@@ -89,19 +107,37 @@ async function handleAboutMe(env) {
   }
 }
 let loader = null;
+new ContentCacheV2(
+  5 * 60 * 1e3,
+  // TTL: 5 minutes fresh
+  true,
+  // enabled
+  30 * 60 * 1e3
+  // SWR TTL: 30 minutes stale window
+);
 function getLoader(env) {
   if (!loader && env?.CONTENT_BUCKET) {
     loader = new R2ContentLoader(
       {
         bucket: env.CONTENT_BUCKET,
-        cacheTTL: 5 * 60 * 1e3
+        cacheTTL: 5 * 60 * 1e3,
+        cfCache: true,
+        // Enable Cloudflare edge cache tier
+        cfCacheTTL: 300,
+        // CF cache for 5 minutes
+        swrTTL: 30 * 60 * 1e3
+        // SWR window: 30 minutes
       },
       {
         md2html: {
           imagePathPrefix: "images/",
+          preserveRawHTML: true,
+          errorRecovery: "warn",
+          maxRecursionDepth: 50,
           styleOptions: {
             classPrefix: "md-",
-            addHeadingIds: true
+            addHeadingIds: true,
+            emitScopeAnchors: true
           }
         }
       }
@@ -109,7 +145,7 @@ function getLoader(env) {
   }
   return loader;
 }
-function clearContentCache() {
+function clearContentCache$1() {
   loader?.clearCache();
 }
 async function handleHome(env) {
@@ -259,6 +295,128 @@ async function verifyCredentials(env, username, password) {
 function getClientIP(request) {
   return request.headers.get("CF-Connecting-IP") || request.headers.get("X-Forwarded-For")?.split(",")[0]?.trim() || "unknown";
 }
+const contentCache = new ContentCacheV2(
+  5 * 60 * 1e3,
+  // TTL: 5 minutes fresh
+  true,
+  // enabled
+  30 * 60 * 1e3
+  // SWR TTL: 30 minutes stale window
+);
+function getCachedOrFetch(key, fetchFn) {
+  const cached = contentCache.get(key);
+  if (cached) {
+    if (!cached.stale) {
+      return Promise.resolve(cached.data);
+    }
+    fetchFn().then((data) => {
+      contentCache.set(key, data);
+      contentCache.refresh(key);
+    }).catch(() => {
+    });
+    return Promise.resolve(cached.data);
+  }
+  return fetchFn().then((data) => {
+    contentCache.set(key, data);
+    return data;
+  });
+}
+function clearContentCache(prefix) {
+  {
+    contentCache.clear();
+  }
+}
+function parseFrontmatter(content) {
+  const lines = content.split("\n");
+  const metadata = {};
+  let contentStart = 0;
+  if (lines[0]?.trim() === "---") {
+    for (let i = 1; i < lines.length; i++) {
+      if (lines[i]?.trim() === "---") {
+        contentStart = i + 1;
+        break;
+      }
+      const colonIdx = lines[i].indexOf(":");
+      if (colonIdx > 0) {
+        const key = lines[i].slice(0, colonIdx).trim();
+        let value = lines[i].slice(colonIdx + 1).trim();
+        if (value.startsWith("[") && value.endsWith("]")) {
+          value = value.slice(1, -1);
+          metadata[key] = value.split(",").map((v) => v.trim());
+        } else {
+          metadata[key] = value;
+        }
+      }
+    }
+  }
+  return {
+    metadata,
+    content: lines.slice(contentStart).join("\n").trim()
+  };
+}
+function checkContentBucket(env) {
+  if (!env?.CONTENT_BUCKET) {
+    return createErrorResponse("Content bucket not configured", 500);
+  }
+  return null;
+}
+async function fetchContentItem(bucket, type, slug) {
+  const mdObj = await bucket.get(`${type}/${slug}.md`);
+  const jsonObj = await bucket.get(`${type}/${slug}.json`);
+  if (!mdObj && !jsonObj) throw new Error(`${type.slice(0, -1)} not found`);
+  let metadata = {};
+  if (jsonObj) {
+    metadata = await jsonObj.json();
+  }
+  let content = "";
+  if (mdObj) {
+    const text = await mdObj.text();
+    const parsed = parseFrontmatter(text);
+    content = parsed.content;
+    metadata = { ...parsed.metadata, ...metadata };
+  }
+  return { ...metadata, slug, content };
+}
+async function fetchContentList(bucket, type, latest) {
+  const list = await bucket.list({ prefix: `${type}/` });
+  const items = [];
+  for (const item of list.objects) {
+    if (item.key.endsWith(".json")) {
+      const obj = await bucket.get(item.key);
+      if (obj) {
+        const metadata = await obj.json();
+        const slug = item.key.replace(`${type}/`, "").replace(".json", "");
+        items.push({ ...metadata, slug });
+      }
+    }
+  }
+  const sorted = items.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  return latest ? sorted.slice(0, latest) : sorted;
+}
+async function searchContent(bucket, query) {
+  const q = query.toLowerCase();
+  const results = [];
+  const [blogsList, storiesList] = await Promise.all([
+    bucket.list({ prefix: "blogs/" }),
+    bucket.list({ prefix: "stories/" })
+  ]);
+  for (const item of [...blogsList.objects, ...storiesList.objects]) {
+    if (item.key.endsWith(".md")) {
+      const obj = await bucket.get(item.key);
+      if (obj) {
+        const text = await obj.text();
+        const { metadata } = parseFrontmatter(text);
+        const matchTitle = metadata.title?.toLowerCase().includes(q);
+        const matchDesc = metadata.description?.toLowerCase().includes(q);
+        const matchTags = metadata.tags?.some((t) => t.toLowerCase().includes(q));
+        if (matchTitle || matchDesc || matchTags) {
+          results.push(metadata);
+        }
+      }
+    }
+  }
+  return results;
+}
 function getSessionToken(request) {
   const cookieHeader = request.headers.get("Cookie");
   if (!cookieHeader) return null;
@@ -363,8 +521,9 @@ async function handleWrite(request, bucket, subpath, env, method) {
         options.httpMetadata = { contentType };
       }
       await bucket.put(subpath, request.body, options);
-      clearContentCache();
       clearContentCache$1();
+      clearContentCache$2();
+      clearContentCache();
       return createJSONResponse({ success: true, key: subpath });
     } catch (e) {
       return createErrorResponse("Failed to upload content: " + e.message, 500);
@@ -373,8 +532,9 @@ async function handleWrite(request, bucket, subpath, env, method) {
   if (method === "DELETE" && subpath) {
     try {
       await bucket.delete(subpath);
-      clearContentCache();
       clearContentCache$1();
+      clearContentCache$2();
+      clearContentCache();
       return createJSONResponse({ success: true, key: subpath });
     } catch (e) {
       return createErrorResponse("Failed to delete content: " + e.message, 500);
@@ -543,109 +703,6 @@ async function handleLogout(request, env) {
     }
   });
 }
-const contentCache = /* @__PURE__ */ new Map();
-const CACHE_TTL = 5 * 60 * 1e3;
-function getCachedOrFetch(key, fetchFn) {
-  const cached = contentCache.get(key);
-  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
-    return Promise.resolve(cached.data);
-  }
-  return fetchFn().then((data) => {
-    contentCache.set(key, { data, timestamp: Date.now() });
-    return data;
-  });
-}
-function parseFrontmatter(content) {
-  const lines = content.split("\n");
-  const metadata = {};
-  let contentStart = 0;
-  if (lines[0]?.trim() === "---") {
-    for (let i = 1; i < lines.length; i++) {
-      if (lines[i]?.trim() === "---") {
-        contentStart = i + 1;
-        break;
-      }
-      const colonIdx = lines[i].indexOf(":");
-      if (colonIdx > 0) {
-        const key = lines[i].slice(0, colonIdx).trim();
-        let value = lines[i].slice(colonIdx + 1).trim();
-        if (value.startsWith("[") && value.endsWith("]")) {
-          value = value.slice(1, -1);
-          metadata[key] = value.split(",").map((v) => v.trim());
-        } else {
-          metadata[key] = value;
-        }
-      }
-    }
-  }
-  return {
-    metadata,
-    content: lines.slice(contentStart).join("\n").trim()
-  };
-}
-function checkContentBucket(env) {
-  if (!env?.CONTENT_BUCKET) {
-    return createErrorResponse("Content bucket not configured", 500);
-  }
-  return null;
-}
-async function fetchContentItem(bucket, type, slug) {
-  const mdObj = await bucket.get(`${type}/${slug}.md`);
-  const jsonObj = await bucket.get(`${type}/${slug}.json`);
-  if (!mdObj && !jsonObj) throw new Error(`${type.slice(0, -1)} not found`);
-  let metadata = {};
-  if (jsonObj) {
-    metadata = await jsonObj.json();
-  }
-  let content = "";
-  if (mdObj) {
-    const text = await mdObj.text();
-    const parsed = parseFrontmatter(text);
-    content = parsed.content;
-    metadata = { ...parsed.metadata, ...metadata };
-  }
-  return { ...metadata, slug, content };
-}
-async function fetchContentList(bucket, type, latest) {
-  const list = await bucket.list({ prefix: `${type}/` });
-  const items = [];
-  for (const item of list.objects) {
-    if (item.key.endsWith(".json")) {
-      const obj = await bucket.get(item.key);
-      if (obj) {
-        const metadata = await obj.json();
-        const slug = item.key.replace(`${type}/`, "").replace(".json", "");
-        items.push({ ...metadata, slug });
-      }
-    }
-  }
-  const sorted = items.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-  return latest ? sorted.slice(0, latest) : sorted;
-}
-async function searchContent(bucket, query) {
-  const q = query.toLowerCase();
-  const results = [];
-  const [blogsList, storiesList] = await Promise.all([
-    bucket.list({ prefix: "blogs/" }),
-    bucket.list({ prefix: "stories/" })
-  ]);
-  for (const item of [...blogsList.objects, ...storiesList.objects]) {
-    if (item.key.endsWith(".md")) {
-      const obj = await bucket.get(item.key);
-      if (obj) {
-        const text = await obj.text();
-        const { metadata } = parseFrontmatter(text);
-        const matchTitle = metadata.title?.toLowerCase().includes(q);
-        const matchDesc = metadata.description?.toLowerCase().includes(q);
-        const matchTags = metadata.tags?.some((t) => t.toLowerCase().includes(q));
-        if (matchTitle || matchDesc || matchTags) {
-          results.push(metadata);
-        }
-      }
-    }
-  }
-  return results;
-}
 async function handleBlogs(env, slug, latest) {
   const bucketCheck = checkContentBucket(env);
   if (bucketCheck) return bucketCheck;
@@ -874,7 +931,7 @@ class WebsiteAPI {
           if (!session || session.expiresAt < Date.now()) {
             return this.addAdminCORSHeaders(createErrorResponse("Unauthorized", 401), origin);
           }
-          clearContentCache$1();
+          clearContentCache$2();
           return this.addAdminCORSHeaders(new Response(JSON.stringify({ success: true, message: "Cache cleared" }), { status: 200, headers: { "Content-Type": "application/json" } }), origin);
         case "aboutme":
           return this.addAdminCORSHeaders(await handleAboutMe(env), origin);

package/dist/index.js

@@ -1,8 +1,8 @@
-import { A, B, M, R, W, c, a, g, b, d, h, e, r, s, v } from "./chunks/website-api-C3lGjXdD.js";
+import { A, B, M, R, W, c, a, g, b, d, h, e, r, s, v } from "./chunks/website-api-DBEh24zq.js";
 import { WebsitePrerender } from "./prerender.js";
-import { A as A2, a as a2, b as b2, c as c2, d as d2, e as e2, f, g as g2, h as h2, i, B as B2, F, M as M2, j, S, k } from "./chunks/index-B2jGIzSi.js";
+import { A as A2, a as a2, b as b2, c as c2, d as d2, e as e2, f, g as g2, h as h2, i, B as B2, F, M as M2, j, S, k } from "./chunks/index-DAog9TQE.js";
 import { S as S2, g as g3, i as i2, r as r2 } from "./chunks/site-store-CGV9c2DI.js";
-import { R as R2, T, W as W2, b as b3, c as c3, g as g4, r as r3 } from "./chunks/template-DXUSp0BG.js";
+import { R as R2, T, W as W2, b as b3, c as c3, g as g4, r as r3 } from "./chunks/template-DUdadCrH.js";
 export {
   A as AUTH_KV,
   A2 as AdminAboutMeSection,

package/dist/prerender/data-fetcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-fetcher.d.ts","sourceRoot":"","sources":["../../src/prerender/data-fetcher.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAeD,wBAAsB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAQpE;AAED,wBAAsB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAO5D;AAED,wBAAsB,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAOzD;AAED,wBAAsB,wBAAwB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,CAgB/F;AAED,wBAAsB,yBAAyB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,CAgBhG"}
+{"version":3,"file":"data-fetcher.d.ts","sourceRoot":"","sources":["../../src/prerender/data-fetcher.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAwCD,wBAAsB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAQpE;AAED,wBAAsB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAO5D;AAED,wBAAsB,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAOzD;AAED,wBAAsB,wBAAwB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,CAgB/F;AAED,wBAAsB,yBAAyB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,CAgBhG"}

package/dist/prerender/page-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-content.d.ts","sourceRoot":"","sources":["../../src/prerender/page-content.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAuFD,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,QAAQ,MAAM,EAAE,EAChB,aAAa,WAAW,EAAE,EAC1B,MAAM,GAAG,KACR,OAAO,CAAC,WAAW,CAqJrB,CAAC"}
+{"version":3,"file":"page-content.d.ts","sourceRoot":"","sources":["../../src/prerender/page-content.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAgHD,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,QAAQ,MAAM,EAAE,EAChB,aAAa,WAAW,EAAE,EAC1B,MAAM,GAAG,KACR,OAAO,CAAC,WAAW,CAqJrB,CAAC"}

package/dist/prerender/template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/prerender/template.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsDD,eAAO,MAAM,kBAAkB,GAAU,8FAStC,aAAa,KAAG,OAAO,CAAC,MAAM,CAmChC,CAAC"}
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/prerender/template.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsDD,eAAO,MAAM,kBAAkB,GAAU,8FAStC,aAAa,KAAG,OAAO,CAAC,MAAM,CAuDhC,CAAC"}

package/dist/prerender.js

@@ -1,4 +1,4 @@
-import { R2ContentLoader } from "@leadertechie/r2tohtml";
+import { ContentCacheV2, R2ContentLoader } from "@leadertechie/r2tohtml";
 let cachedAssets = null;
 let isDiscovering = false;
 async function getAssetPaths(baseSiteUrl) {
@@ -73,6 +73,26 @@ const createHtmlTemplate = async ({
     <link rel="canonical" href="${canonicalUrl}" />
     <link rel="stylesheet" crossorigin href="${css}" />
     <script type="module" crossorigin src="${js}"><\/script>
+    <!-- md2interact: client-side DOM interactions, CSS hydration, and event bus -->
+    <script type="module">
+      import { init } from '@leadertechie/md2interact';
+      document.addEventListener('DOMContentLoaded', () => {
+        init({
+          interactions: {
+            'poll': { selector: '[data-interact="poll"]' },
+            'live-update': { selector: '[data-interact="live-update"]' },
+            'click-toggle': { selector: '[data-interact="click-toggle"]' },
+            'infinite-scroll': { selector: '[data-interact="infinite-scroll"]' },
+            'form-live': { selector: '[data-interact="form-live"]' }
+          },
+          cssHydration: {
+            inlineCritical: true,
+            layerInjection: true,
+            themeToggle: true
+          }
+        });
+      });
+    <\/script>
   </head>
   <body>
     ${hydrationData}
@@ -83,12 +103,41 @@ const createHtmlTemplate = async ({
 </html>`;
 };
 let loader = null;
+new ContentCacheV2(
+  5 * 60 * 1e3,
+  // TTL: 5 minutes fresh
+  true,
+  // enabled
+  30 * 60 * 1e3
+  // SWR TTL: 30 minutes stale window
+);
 function getLoader(env) {
   if (!loader) {
     if (!env?.CONTENT_BUCKET) return null;
     loader = new R2ContentLoader(
-      { bucket: env.CONTENT_BUCKET, cacheTTL: 5 * 60 * 1e3 },
-      { md2html: { imagePathPrefix: "images/", styleOptions: { classPrefix: "md-", addHeadingIds: true } } }
+      {
+        bucket: env.CONTENT_BUCKET,
+        cacheTTL: 5 * 60 * 1e3,
+        cfCache: true,
+        // Enable Cloudflare edge cache tier
+        cfCacheTTL: 300,
+        // CF cache for 5 minutes
+        swrTTL: 30 * 60 * 1e3
+        // SWR window: 30 minutes
+      },
+      {
+        md2html: {
+          imagePathPrefix: "images/",
+          preserveRawHTML: true,
+          errorRecovery: "warn",
+          maxRecursionDepth: 50,
+          styleOptions: {
+            classPrefix: "md-",
+            addHeadingIds: true,
+            emitScopeAnchors: true
+          }
+        }
+      }
     );
   }
   return loader;

package/dist/shared/core/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/core/theme-toggle.ts"],"names":[],"mappings":"AAAA,qBAAa,WAAY,SAAQ,WAAW;;IAQ1C,iBAAiB;IAIjB,oBAAoB;IAIpB,MAAM;IAkCN,0BAA0B;IAc1B,WAAW,aAOT;IAEF,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAUhC,UAAU,IAAI,MAAM;IAgBpB,WAAW,IAAI,MAAM;IAQrB,wBAAwB,CAAC,KAAK,EAAE,MAAM;CAQvC"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/core/theme-toggle.ts"],"names":[],"mappings":"AAEA,qBAAa,WAAY,SAAQ,WAAW;;IAQ1C,iBAAiB;IAIjB,oBAAoB;IAIpB,MAAM;IAiCN,0BAA0B;IAc1B,WAAW,aAOT;IAEF,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAUhC,UAAU,IAAI,MAAM;IAgBpB,WAAW,IAAI,MAAM;IAQrB,wBAAwB,CAAC,KAAK,EAAE,MAAM;CAQvC"}

package/dist/shared/page-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-content.d.ts","sourceRoot":"","sources":["../../src/shared/page-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AAGpC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAUD,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,KAAG,MAGhD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,QAAQ,MAAM,EAAE,EAChB,aAAa,WAAW,EAAE,EAC1B,OAAO;IACL,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACA,WA0JF,CAAC"}
+{"version":3,"file":"page-content.d.ts","sourceRoot":"","sources":["../../src/shared/page-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AAGpC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwBD,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,KAAG,MAGhD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,QAAQ,MAAM,EAAE,EAChB,aAAa,WAAW,EAAE,EAC1B,OAAO;IACL,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACA,WA0JF,CAAC"}

package/dist/shared/router.d.ts

@@ -14,6 +14,11 @@ export declare class Router {
     private setupEventListeners;
     navigate(path: string): Promise<void>;
     private setPageMeta;
+    /**
+     * After rendering new content, reinitialize md2interact so it
+     * re-scans the DOM for interaction elements (poll, live-update, etc.)
+     */
+    private afterRender;
     private renderHomePage;
     private renderAboutMePage;
     private renderContentListPage;

package/dist/shared/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/shared/router.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,qBAAa,MAAM;IAML,OAAO,CAAC,EAAE;IALtB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,IAAI,CAAuB;IACnC,OAAO,CAAC,UAAU,CAA4B;gBAE1B,EAAE,EAAE,SAAS;IAejC,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,WAAW,GAatB;IAEM,IAAI,CAAC,YAAY,GAAE,MAAc;IAWxC,OAAO,CAAC,mBAAmB;IAmCd,QAAQ,CAAC,IAAI,EAAE,MAAM;IA6BlC,OAAO,CAAC,WAAW;YAgCL,cAAc;IAkC5B,OAAO,CAAC,iBAAiB;YAQX,qBAAqB;YAiBrB,uBAAuB;YAmBvB,eAAe;CAqB9B"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/shared/router.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,qBAAa,MAAM;IAML,OAAO,CAAC,EAAE;IALtB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,IAAI,CAAuB;IACnC,OAAO,CAAC,UAAU,CAA4B;gBAE1B,EAAE,EAAE,SAAS;IAejC,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,WAAW,GAatB;IAEM,IAAI,CAAC,YAAY,GAAE,MAAc;IAWxC,OAAO,CAAC,mBAAmB;IAmCd,QAAQ,CAAC,IAAI,EAAE,MAAM;IA6BlC,OAAO,CAAC,WAAW;IAgCnB;;;OAGG;IACH,OAAO,CAAC,WAAW;YAIL,cAAc;IAmC5B,OAAO,CAAC,iBAAiB;YASX,qBAAqB;YAkBrB,uBAAuB;YAoBvB,eAAe;CAsB9B"}

package/dist/shared/website-ui.d.ts

@@ -13,15 +13,36 @@ export interface UIConfig {
         customCss?: string;
     };
     onBootstrap?: (ui: WebsiteUI) => void | Promise<void>;
+    interactConfig?: {
+        interactions?: Record<string, {
+            selector: string;
+        }>;
+        cssHydration?: {
+            inlineCritical?: boolean;
+            layerInjection?: boolean;
+            themeToggle?: boolean;
+        };
+    };
 }
 export declare class WebsiteUI {
     private static instance;
     private store;
     private config;
     private router;
+    private interactInitialized;
     private constructor();
     static getInstance(config?: UIConfig): WebsiteUI;
     bootstrap(): Promise<void>;
+    /**
+     * Initialize md2interact for client-side DOM interactions,
+     * CSS hydration, and event bus communication.
+     */
+    private initInteract;
+    /**
+     * Reinitialize md2interact after dynamic content changes (e.g., SPA navigation).
+     * This re-scans the DOM for new interaction elements.
+     */
+    reinitInteract(): void;
     private updateBanner;
     private applyTheme;
     private updateFavicon;

package/dist/shared/website-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"website-ui.d.ts","sourceRoot":"","sources":["../../src/shared/website-ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,WAAW,QAAQ;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvD;AAED,qBAAa,SAAS;IACpB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAY;IACnC,OAAO,CAAC,KAAK,CAAY;IACzB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,MAAM,CAAuB;IAErC,OAAO;WAKO,WAAW,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS;IAU1C,SAAS;IAsCtB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,aAAa;IAad,QAAQ;IAIR,SAAS;IAIT,SAAS;CAGjB;AAED,eAAO,MAAM,SAAS,GAAI,SAAS,QAAQ,kBAA8C,CAAC"}
+{"version":3,"file":"website-ui.d.ts","sourceRoot":"","sources":["../../src/shared/website-ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,MAAM,WAAW,QAAQ;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE;QACf,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACpD,YAAY,CAAC,EAAE;YACb,cAAc,CAAC,EAAE,OAAO,CAAC;YACzB,cAAc,CAAC,EAAE,OAAO,CAAC;YACzB,WAAW,CAAC,EAAE,OAAO,CAAC;SACvB,CAAC;KACH,CAAC;CACH;AAED,qBAAa,SAAS;IACpB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAY;IACnC,OAAO,CAAC,KAAK,CAAY;IACzB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO;WAKO,WAAW,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS;IAU1C,SAAS;IAyCtB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAuBpB;;;OAGG;IACI,cAAc;IAMrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,aAAa;IAad,QAAQ;IAIR,SAAS;IAIT,SAAS;CAGjB;AAED,eAAO,MAAM,SAAS,GAAI,SAAS,QAAQ,kBAA8C,CAAC"}

package/dist/shared.js

@@ -1,5 +1,5 @@
 import { S, g, i, r } from "./chunks/site-store-CGV9c2DI.js";
-import { R, T, W, b, c, g as g2, r as r2 } from "./chunks/template-DXUSp0BG.js";
+import { R, T, W, b, c, g as g2, r as r2 } from "./chunks/template-DUdadCrH.js";
 export {
   R as Router,
   S as SiteStore,

package/dist/ui/blog-viewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/blog-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAc5C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAAoB;IAGjC,QAAQ,CAAC,IAAI,SAAM;IAGnB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAG1C,QAAQ,CAAC,OAAO,UAAQ;IAGxB,QAAQ,CAAC,KAAK,SAAM;IAEpB,OAAO,KAAK,UAAU,GAMrB;IAED,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,QAAQ;IA4BR,MAAM;IA+BN,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;CAKxC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/blog-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AA0B5C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAAoB;IAGjC,QAAQ,CAAC,IAAI,SAAM;IAGnB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAG1C,QAAQ,CAAC,OAAO,UAAQ;IAGxB,QAAQ,CAAC,KAAK,SAAM;IAEpB,OAAO,KAAK,UAAU,GAMrB;IAED,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM/C,QAAQ;IA4BR,MAAM;IA+BN,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;CAKxC"}

package/dist/ui/story-viewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/story-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAc5C,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAAqB;IAGlC,QAAQ,CAAC,IAAI,SAAM;IAGnB,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAQ;IAG5C,QAAQ,CAAC,OAAO,UAAQ;IAGxB,QAAQ,CAAC,KAAK,SAAM;IAEpB,OAAO,KAAK,UAAU,GAKrB;IAEK,iBAAiB;IAOvB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAMrC,SAAS;IAuBf,MAAM;IA+BN,OAAO,CAAC,cAAc;CAKvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/story-viewer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AA0B5C,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAAqB;IAGlC,QAAQ,CAAC,IAAI,SAAM;IAGnB,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAQ;IAG5C,QAAQ,CAAC,OAAO,UAAQ;IAGxB,QAAQ,CAAC,KAAK,SAAM;IAEpB,OAAO,KAAK,UAAU,GAKrB;IAEK,iBAAiB;IAOvB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAMrC,SAAS;IAuBf,MAAM;IA+BN,OAAO,CAAC,cAAc;CAKvB"}

package/dist/ui.js

@@ -1,4 +1,4 @@
-import { A, a, b, c, d, e, f, g, h, i, B, F, M, j, S, k } from "./chunks/index-B2jGIzSi.js";
+import { A, a, b, c, d, e, f, g, h, i, B, F, M, j, S, k } from "./chunks/index-DAog9TQE.js";
 export {
   A as AdminAboutMeSection,
   a as AdminBlogsSection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leadertechie/personal-site-kit",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.18",
   "type": "module",
   "description": "A high-performance personal website engine for Cloudflare Workers and R2",
   "repository": {
@@ -43,8 +43,9 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@leadertechie/md2html": "^0.1.0-alpha.13",
-    "@leadertechie/r2tohtml": "^0.1.0-alpha.12",
+    "@leadertechie/md2html": "^0.1.0-alpha.15",
+    "@leadertechie/md2interact": "^0.1.0-alpha.1",
+    "@leadertechie/r2tohtml": "^0.1.0-alpha.14",
     "lit": "^3.2.1"
   },
   "devDependencies": {