what-server 0.5.5 → 0.6.2

package/dist/islands.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/islands.js"],
+  "sourcesContent": ["// What Framework - Islands Architecture\n// Each interactive piece of the page is an \"island\" \u2014 a self-contained\n// component that hydrates independently. The rest is static HTML.\n//\n// Features:\n//   - Multiple hydration modes (load, idle, visible, action, media, static)\n//   - Shared state across islands\n//   - Priority-based hydration queue\n//   - Progressive enhancement\n//\n// Modes:\n//   'static'  - No JS shipped. Pure HTML. (nav, footer, etc.)\n//   'idle'    - Hydrate when browser is idle (requestIdleCallback)\n//   'visible' - Hydrate when scrolled into view (IntersectionObserver)\n//   'load'    - Hydrate immediately on page load\n//   'media'   - Hydrate when media query matches (e.g., mobile-only)\n//   'action'  - Hydrate on first user interaction (click, focus, hover)\n\nimport { mount, hydrate, signal, batch } from 'what-core';\n\nconst islandRegistry = new Map();\nconst hydratedIslands = new Set();\nconst hydrationQueue = [];\nlet isProcessingQueue = false;\n\n// --- Shared Island State ---\n// Global reactive store that persists across islands and page navigations\n\nconst sharedStores = new Map();\n\nexport function createIslandStore(name, initialState) {\n  if (sharedStores.has(name)) {\n    return sharedStores.get(name);\n  }\n\n  const store = {};\n  const signals = {};\n\n  // Create signals for each key in initial state\n  for (const [key, value] of Object.entries(initialState)) {\n    signals[key] = signal(value);\n    Object.defineProperty(store, key, {\n      get: () => signals[key](),\n      set: (val) => signals[key].set(val),\n      enumerable: true,\n    });\n  }\n\n  // Methods to interact with store\n  store._signals = signals;\n  store._subscribe = (key, fn) => {\n    if (signals[key]) {\n      return signals[key].subscribe(fn);\n    }\n  };\n  store._batch = (fn) => batch(fn);\n  store._getSnapshot = () => {\n    const snapshot = {};\n    for (const [key, sig] of Object.entries(signals)) {\n      snapshot[key] = sig.peek();\n    }\n    return snapshot;\n  };\n  store._hydrate = (data) => {\n    batch(() => {\n      for (const [key, value] of Object.entries(data)) {\n        if (signals[key]) {\n          signals[key].set(value);\n        }\n      }\n    });\n  };\n\n  sharedStores.set(name, store);\n  return store;\n}\n\n// Get or create a shared store\nexport function useIslandStore(name, fallbackInitial = {}) {\n  if (sharedStores.has(name)) {\n    return sharedStores.get(name);\n  }\n  return createIslandStore(name, fallbackInitial);\n}\n\n// Serialize all shared stores for SSR\nexport function serializeIslandStores() {\n  const data = {};\n  for (const [name, store] of sharedStores) {\n    data[name] = store._getSnapshot();\n  }\n  return JSON.stringify(data);\n}\n\n// Hydrate shared stores from SSR data\nexport function hydrateIslandStores(serialized) {\n  try {\n    const data = typeof serialized === 'string' ? JSON.parse(serialized) : serialized;\n    for (const [name, storeData] of Object.entries(data)) {\n      const store = useIslandStore(name, storeData);\n      store._hydrate(storeData);\n    }\n  } catch (e) {\n    console.warn('[what] Failed to hydrate island stores:', e);\n  }\n}\n\n// --- Register an island component ---\n\nexport function island(name, loader, opts = {}) {\n  islandRegistry.set(name, {\n    loader,  // () => import('./MyComponent.js')\n    mode: opts.mode || 'idle',\n    media: opts.media || null,\n    priority: opts.priority || 0, // Higher = hydrate first\n    stores: opts.stores || [],    // Shared stores this island uses\n  });\n}\n\n// --- Island wrapper for SSR ---\n// Renders the static HTML with a marker the client can find.\n\nexport function Island({ name, props = {}, children, mode, priority, stores }) {\n  const entry = islandRegistry.get(name);\n  const resolvedMode = mode || entry?.mode || 'idle';\n  const resolvedPriority = priority ?? entry?.priority ?? 0;\n  const resolvedStores = stores || entry?.stores || [];\n\n  // Server: render as a div with data attributes for hydration\n  return {\n    tag: 'div',\n    props: {\n      'data-island': name,\n      'data-island-mode': resolvedMode,\n      'data-island-props': JSON.stringify(props),\n      'data-island-priority': resolvedPriority,\n      'data-island-stores': JSON.stringify(resolvedStores),\n    },\n    children: children || [],\n    key: null,\n    _vnode: true,\n  };\n}\n\n// --- Priority Hydration Queue ---\n\nfunction enqueueHydration(task) {\n  // Insert in priority order (higher priority first)\n  let inserted = false;\n  for (let i = 0; i < hydrationQueue.length; i++) {\n    if (task.priority > hydrationQueue[i].priority) {\n      hydrationQueue.splice(i, 0, task);\n      inserted = true;\n      break;\n    }\n  }\n  if (!inserted) {\n    hydrationQueue.push(task);\n  }\n\n  processQueue();\n}\n\nfunction processQueue() {\n  if (isProcessingQueue || hydrationQueue.length === 0) return;\n  isProcessingQueue = true;\n\n  // Process one task at a time to avoid blocking\n  const task = hydrationQueue.shift();\n\n  Promise.resolve(task.hydrate())\n    .catch(e => console.error('[what] Island hydration failed:', task.name, e))\n    .finally(() => {\n      isProcessingQueue = false;\n      // Continue processing after a microtask\n      queueMicrotask(processQueue);\n    });\n}\n\n// Boost priority for an island (e.g., on user interaction)\nexport function boostIslandPriority(name, newPriority = 100) {\n  for (const task of hydrationQueue) {\n    if (task.name === name) {\n      task.priority = newPriority;\n      // Re-sort queue\n      hydrationQueue.sort((a, b) => b.priority - a.priority);\n      break;\n    }\n  }\n}\n\n// --- Client-side hydration ---\n\nexport function hydrateIslands() {\n  // First, hydrate any shared stores from the page\n  const storeScript = document.querySelector('script[data-island-stores]');\n  if (storeScript) {\n    hydrateIslandStores(storeScript.textContent);\n  }\n\n  const islands = document.querySelectorAll('[data-island]');\n\n  for (const el of islands) {\n    const name = el.dataset.island;\n    const mode = el.dataset.islandMode || 'idle';\n    const props = JSON.parse(el.dataset.islandProps || '{}');\n    const priority = parseInt(el.dataset.islandPriority || '0', 10);\n    const stores = JSON.parse(el.dataset.islandStores || '[]');\n    const entry = islandRegistry.get(name);\n\n    if (!entry) {\n      console.warn(`[what] Island \"${name}\" not registered`);\n      continue;\n    }\n\n    // Skip if already hydrated\n    if (hydratedIslands.has(el)) continue;\n\n    scheduleHydration(el, entry, props, mode, priority, name, stores);\n  }\n}\n\nfunction scheduleHydration(el, entry, props, mode, priority, name, stores) {\n  const hydrate = async () => {\n    if (hydratedIslands.has(el)) return;\n    hydratedIslands.add(el);\n\n    const mod = await entry.loader();\n    const Component = mod.default || mod;\n\n    // Inject shared stores into props\n    const storeProps = {};\n    for (const storeName of stores) {\n      storeProps[storeName] = useIslandStore(storeName);\n    }\n\n    // Use hydrate() to reuse server-rendered DOM instead of destroying/recreating\n    const vnode = Component({ ...props, ...storeProps });\n    if (el.childNodes.length > 0) {\n      hydrate(vnode, el);\n    } else {\n      mount(vnode, el);\n    }\n\n    // Clean up data attributes\n    el.removeAttribute('data-island');\n    el.removeAttribute('data-island-mode');\n    el.removeAttribute('data-island-props');\n    el.removeAttribute('data-island-priority');\n    el.removeAttribute('data-island-stores');\n\n    // Dispatch event for analytics/debugging\n    el.dispatchEvent(new CustomEvent('island:hydrated', {\n      bubbles: true,\n      detail: { name, mode },\n    }));\n  };\n\n  switch (mode) {\n    case 'load':\n      // Immediate hydration via queue (respects priority)\n      enqueueHydration({ name, priority: priority + 1000, hydrate });\n      break;\n\n    case 'idle':\n      if ('requestIdleCallback' in window) {\n        requestIdleCallback(() => {\n          enqueueHydration({ name, priority, hydrate });\n        });\n      } else {\n        setTimeout(() => {\n          enqueueHydration({ name, priority, hydrate });\n        }, 200);\n      }\n      break;\n\n    case 'visible': {\n      const observer = new IntersectionObserver((entries, obs) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            obs.disconnect();\n            enqueueHydration({ name, priority, hydrate });\n            break;\n          }\n        }\n      }, { rootMargin: '200px' });\n      observer.observe(el);\n      break;\n    }\n\n    case 'media': {\n      const mq = window.matchMedia(entry.media || '(max-width: 768px)');\n      if (mq.matches) {\n        enqueueHydration({ name, priority, hydrate });\n      } else {\n        mq.addEventListener('change', (e) => {\n          if (e.matches) {\n            enqueueHydration({ name, priority, hydrate });\n          }\n        }, { once: true });\n      }\n      break;\n    }\n\n    case 'action': {\n      const events = ['click', 'focus', 'mouseover', 'touchstart'];\n      const handler = () => {\n        events.forEach(e => el.removeEventListener(e, handler));\n        // Boost priority since user interacted\n        enqueueHydration({ name, priority: priority + 500, hydrate });\n      };\n      events.forEach(e => el.addEventListener(e, handler, { once: true, passive: true }));\n      break;\n    }\n\n    case 'static':\n      // Never hydrate\n      break;\n\n    default:\n      enqueueHydration({ name, priority, hydrate });\n  }\n}\n\n// --- Auto-discover islands from data attributes ---\n// Call this once on the client to set up all islands.\n\nexport function autoIslands(registry) {\n  for (const [name, config] of Object.entries(registry)) {\n    island(name, config.loader || config, {\n      mode: config.mode || 'idle',\n      media: config.media,\n      priority: config.priority || 0,\n      stores: config.stores || [],\n    });\n  }\n\n  if (typeof document !== 'undefined') {\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', hydrateIslands);\n    } else {\n      hydrateIslands();\n    }\n  }\n}\n\n// --- Progressive Enhancement Helpers ---\n\n// Mark an element as progressively enhanced\nexport function enhance(selector, handler) {\n  if (typeof document === 'undefined') return;\n\n  const elements = document.querySelectorAll(selector);\n  for (const el of elements) {\n    if (el.dataset.enhanced) continue;\n    el.dataset.enhanced = 'true';\n    handler(el);\n  }\n}\n\n// Form enhancement: submit via fetch instead of page reload\nexport function enhanceForms(selector = 'form[data-enhance]') {\n  enhance(selector, (form) => {\n    form.addEventListener('submit', async (e) => {\n      e.preventDefault();\n\n      const formData = new FormData(form);\n      const method = form.method.toUpperCase() || 'POST';\n      const action = form.action || location.href;\n\n      try {\n        // Read CSRF token from meta tag\n        const csrfMeta = document.querySelector('meta[name=\"csrf-token\"]') ||\n                         document.querySelector('meta[name=\"what-csrf-token\"]');\n        const csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : null;\n\n        // If no CSRF token and form hasn't opted out, block submission\n        const noCsrf = form.getAttribute('data-no-csrf') === 'true';\n        if (!csrfToken && !noCsrf) {\n          console.warn(\n            '[what] Form submission blocked: no CSRF token found. ' +\n            'Add a <meta name=\"csrf-token\"> tag or set data-no-csrf=\"true\" on the form to opt out.'\n          );\n          form.dispatchEvent(new CustomEvent('form:error', {\n            bubbles: true,\n            detail: { error: new Error('Missing CSRF token') },\n          }));\n          return;\n        }\n\n        const headers = {\n          'X-Requested-With': 'XMLHttpRequest',\n        };\n        if (csrfToken) {\n          headers['X-CSRF-Token'] = csrfToken;\n        }\n\n        const response = await fetch(action, {\n          method,\n          body: method === 'GET' ? undefined : formData,\n          headers,\n        });\n\n        form.dispatchEvent(new CustomEvent('form:response', {\n          bubbles: true,\n          detail: { response, ok: response.ok },\n        }));\n      } catch (error) {\n        form.dispatchEvent(new CustomEvent('form:error', {\n          bubbles: true,\n          detail: { error },\n        }));\n      }\n    });\n  });\n}\n\n// --- Debugging ---\n\nexport function getIslandStatus() {\n  const status = {\n    registered: [...islandRegistry.keys()],\n    hydrated: hydratedIslands.size,\n    pending: hydrationQueue.length,\n    queue: hydrationQueue.map(t => ({ name: t.name, priority: t.priority })),\n    stores: [...sharedStores.keys()],\n  };\n  return status;\n}\n"],
+  "mappings": "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",
+  "names": ["hydrate", "entry"]
+}

package/dist/islands.min.js

@@ -0,0 +1,2 @@
+import{mount as E,signal as I,batch as g}from"what-core";var y=new Map,m=new Set,l=[],b=!1,h=new Map;function x(e,o){if(h.has(e))return h.get(e);let t={},n={};for(let[s,r]of Object.entries(o))n[s]=I(r),Object.defineProperty(t,s,{get:()=>n[s](),set:a=>n[s].set(a),enumerable:!0});return t._signals=n,t._subscribe=(s,r)=>{if(n[s])return n[s].subscribe(r)},t._batch=s=>g(s),t._getSnapshot=()=>{let s={};for(let[r,a]of Object.entries(n))s[r]=a.peek();return s},t._hydrate=s=>{g(()=>{for(let[r,a]of Object.entries(s))n[r]&&n[r].set(a)})},h.set(e,t),t}function S(e,o={}){return h.has(e)?h.get(e):x(e,o)}function N(){let e={};for(let[o,t]of h)e[o]=t._getSnapshot();return JSON.stringify(e)}function O(e){try{let o=typeof e=="string"?JSON.parse(e):e;for(let[t,n]of Object.entries(o))S(t,n)._hydrate(n)}catch(o){console.warn("[what] Failed to hydrate island stores:",o)}}function C(e,o,t={}){y.set(e,{loader:o,mode:t.mode||"idle",media:t.media||null,priority:t.priority||0,stores:t.stores||[]})}function _({name:e,props:o={},children:t,mode:n,priority:s,stores:r}){let a=y.get(e),i=n||a?.mode||"idle",d=s??a?.priority??0,c=r||a?.stores||[];return{tag:"div",props:{"data-island":e,"data-island-mode":i,"data-island-props":JSON.stringify(o),"data-island-priority":d,"data-island-stores":JSON.stringify(c)},children:t||[],key:null,_vnode:!0}}function f(e){let o=!1;for(let t=0;t<l.length;t++)if(e.priority>l[t].priority){l.splice(t,0,e),o=!0;break}o||l.push(e),w()}function w(){if(b||l.length===0)return;b=!0;let e=l.shift();Promise.resolve(e.hydrate()).catch(o=>console.error("[what] Island hydration failed:",e.name,o)).finally(()=>{b=!1,queueMicrotask(w)})}function F(e,o=100){for(let t of l)if(t.name===e){t.priority=o,l.sort((n,s)=>s.priority-n.priority);break}}function k(){let e=document.querySelector("script[data-island-stores]");e&&O(e.textContent);let o=document.querySelectorAll("[data-island]");for(let t of o){let n=t.dataset.island,s=t.dataset.islandMode||"idle",r=JSON.parse(t.dataset.islandProps||"{}"),a=parseInt(t.dataset.islandPriority||"0",10),i=JSON.parse(t.dataset.islandStores||"[]"),d=y.get(n);if(!d){console.warn(`[what] Island "${n}" not registered`);continue}m.has(t)||q(t,d,r,s,a,n,i)}}function q(e,o,t,n,s,r,a){let i=async()=>{if(m.has(e))return;m.add(e);let d=await o.loader(),c=d.default||d,u={};for(let v of a)u[v]=S(v);let p=c({...t,...u});e.childNodes.length>0?i(p,e):E(p,e),e.removeAttribute("data-island"),e.removeAttribute("data-island-mode"),e.removeAttribute("data-island-props"),e.removeAttribute("data-island-priority"),e.removeAttribute("data-island-stores"),e.dispatchEvent(new CustomEvent("island:hydrated",{bubbles:!0,detail:{name:r,mode:n}}))};switch(n){case"load":f({name:r,priority:s+1e3,hydrate:i});break;case"idle":"requestIdleCallback"in window?requestIdleCallback(()=>{f({name:r,priority:s,hydrate:i})}):setTimeout(()=>{f({name:r,priority:s,hydrate:i})},200);break;case"visible":{new IntersectionObserver((c,u)=>{for(let p of c)if(p.isIntersecting){u.disconnect(),f({name:r,priority:s,hydrate:i});break}},{rootMargin:"200px"}).observe(e);break}case"media":{let d=window.matchMedia(o.media||"(max-width: 768px)");d.matches?f({name:r,priority:s,hydrate:i}):d.addEventListener("change",c=>{c.matches&&f({name:r,priority:s,hydrate:i})},{once:!0});break}case"action":{let d=["click","focus","mouseover","touchstart"],c=()=>{d.forEach(u=>e.removeEventListener(u,c)),f({name:r,priority:s+500,hydrate:i})};d.forEach(u=>e.addEventListener(u,c,{once:!0,passive:!0}));break}case"static":break;default:f({name:r,priority:s,hydrate:i})}}function L(e){for(let[o,t]of Object.entries(e))C(o,t.loader||t,{mode:t.mode||"idle",media:t.media,priority:t.priority||0,stores:t.stores||[]});typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",k):k())}function M(e,o){if(typeof document>"u")return;let t=document.querySelectorAll(e);for(let n of t)n.dataset.enhanced||(n.dataset.enhanced="true",o(n))}function j(e="form[data-enhance]"){M(e,o=>{o.addEventListener("submit",async t=>{t.preventDefault();let n=new FormData(o),s=o.method.toUpperCase()||"POST",r=o.action||location.href;try{let a=document.querySelector('meta[name="csrf-token"]')||document.querySelector('meta[name="what-csrf-token"]'),i=a?a.getAttribute("content"):null,d=o.getAttribute("data-no-csrf")==="true";if(!i&&!d){console.warn('[what] Form submission blocked: no CSRF token found. Add a <meta name="csrf-token"> tag or set data-no-csrf="true" on the form to opt out.'),o.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{error:new Error("Missing CSRF token")}}));return}let c={"X-Requested-With":"XMLHttpRequest"};i&&(c["X-CSRF-Token"]=i);let u=await fetch(r,{method:s,body:s==="GET"?void 0:n,headers:c});o.dispatchEvent(new CustomEvent("form:response",{bubbles:!0,detail:{response:u,ok:u.ok}}))}catch(a){o.dispatchEvent(new CustomEvent("form:error",{bubbles:!0,detail:{error:a}}))}})})}function J(){return{registered:[...y.keys()],hydrated:m.size,pending:l.length,queue:l.map(o=>({name:o.name,priority:o.priority})),stores:[...h.keys()]}}export{_ as Island,L as autoIslands,F as boostIslandPriority,x as createIslandStore,M as enhance,j as enhanceForms,J as getIslandStatus,O as hydrateIslandStores,k as hydrateIslands,C as island,N as serializeIslandStores,S as useIslandStore};
+//# sourceMappingURL=islands.min.js.map

package/dist/islands.min.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/islands.js"],
+  "sourcesContent": ["// What Framework - Islands Architecture\n// Each interactive piece of the page is an \"island\" \u2014 a self-contained\n// component that hydrates independently. The rest is static HTML.\n//\n// Features:\n//   - Multiple hydration modes (load, idle, visible, action, media, static)\n//   - Shared state across islands\n//   - Priority-based hydration queue\n//   - Progressive enhancement\n//\n// Modes:\n//   'static'  - No JS shipped. Pure HTML. (nav, footer, etc.)\n//   'idle'    - Hydrate when browser is idle (requestIdleCallback)\n//   'visible' - Hydrate when scrolled into view (IntersectionObserver)\n//   'load'    - Hydrate immediately on page load\n//   'media'   - Hydrate when media query matches (e.g., mobile-only)\n//   'action'  - Hydrate on first user interaction (click, focus, hover)\n\nimport { mount, hydrate, signal, batch } from 'what-core';\n\nconst islandRegistry = new Map();\nconst hydratedIslands = new Set();\nconst hydrationQueue = [];\nlet isProcessingQueue = false;\n\n// --- Shared Island State ---\n// Global reactive store that persists across islands and page navigations\n\nconst sharedStores = new Map();\n\nexport function createIslandStore(name, initialState) {\n  if (sharedStores.has(name)) {\n    return sharedStores.get(name);\n  }\n\n  const store = {};\n  const signals = {};\n\n  // Create signals for each key in initial state\n  for (const [key, value] of Object.entries(initialState)) {\n    signals[key] = signal(value);\n    Object.defineProperty(store, key, {\n      get: () => signals[key](),\n      set: (val) => signals[key].set(val),\n      enumerable: true,\n    });\n  }\n\n  // Methods to interact with store\n  store._signals = signals;\n  store._subscribe = (key, fn) => {\n    if (signals[key]) {\n      return signals[key].subscribe(fn);\n    }\n  };\n  store._batch = (fn) => batch(fn);\n  store._getSnapshot = () => {\n    const snapshot = {};\n    for (const [key, sig] of Object.entries(signals)) {\n      snapshot[key] = sig.peek();\n    }\n    return snapshot;\n  };\n  store._hydrate = (data) => {\n    batch(() => {\n      for (const [key, value] of Object.entries(data)) {\n        if (signals[key]) {\n          signals[key].set(value);\n        }\n      }\n    });\n  };\n\n  sharedStores.set(name, store);\n  return store;\n}\n\n// Get or create a shared store\nexport function useIslandStore(name, fallbackInitial = {}) {\n  if (sharedStores.has(name)) {\n    return sharedStores.get(name);\n  }\n  return createIslandStore(name, fallbackInitial);\n}\n\n// Serialize all shared stores for SSR\nexport function serializeIslandStores() {\n  const data = {};\n  for (const [name, store] of sharedStores) {\n    data[name] = store._getSnapshot();\n  }\n  return JSON.stringify(data);\n}\n\n// Hydrate shared stores from SSR data\nexport function hydrateIslandStores(serialized) {\n  try {\n    const data = typeof serialized === 'string' ? JSON.parse(serialized) : serialized;\n    for (const [name, storeData] of Object.entries(data)) {\n      const store = useIslandStore(name, storeData);\n      store._hydrate(storeData);\n    }\n  } catch (e) {\n    console.warn('[what] Failed to hydrate island stores:', e);\n  }\n}\n\n// --- Register an island component ---\n\nexport function island(name, loader, opts = {}) {\n  islandRegistry.set(name, {\n    loader,  // () => import('./MyComponent.js')\n    mode: opts.mode || 'idle',\n    media: opts.media || null,\n    priority: opts.priority || 0, // Higher = hydrate first\n    stores: opts.stores || [],    // Shared stores this island uses\n  });\n}\n\n// --- Island wrapper for SSR ---\n// Renders the static HTML with a marker the client can find.\n\nexport function Island({ name, props = {}, children, mode, priority, stores }) {\n  const entry = islandRegistry.get(name);\n  const resolvedMode = mode || entry?.mode || 'idle';\n  const resolvedPriority = priority ?? entry?.priority ?? 0;\n  const resolvedStores = stores || entry?.stores || [];\n\n  // Server: render as a div with data attributes for hydration\n  return {\n    tag: 'div',\n    props: {\n      'data-island': name,\n      'data-island-mode': resolvedMode,\n      'data-island-props': JSON.stringify(props),\n      'data-island-priority': resolvedPriority,\n      'data-island-stores': JSON.stringify(resolvedStores),\n    },\n    children: children || [],\n    key: null,\n    _vnode: true,\n  };\n}\n\n// --- Priority Hydration Queue ---\n\nfunction enqueueHydration(task) {\n  // Insert in priority order (higher priority first)\n  let inserted = false;\n  for (let i = 0; i < hydrationQueue.length; i++) {\n    if (task.priority > hydrationQueue[i].priority) {\n      hydrationQueue.splice(i, 0, task);\n      inserted = true;\n      break;\n    }\n  }\n  if (!inserted) {\n    hydrationQueue.push(task);\n  }\n\n  processQueue();\n}\n\nfunction processQueue() {\n  if (isProcessingQueue || hydrationQueue.length === 0) return;\n  isProcessingQueue = true;\n\n  // Process one task at a time to avoid blocking\n  const task = hydrationQueue.shift();\n\n  Promise.resolve(task.hydrate())\n    .catch(e => console.error('[what] Island hydration failed:', task.name, e))\n    .finally(() => {\n      isProcessingQueue = false;\n      // Continue processing after a microtask\n      queueMicrotask(processQueue);\n    });\n}\n\n// Boost priority for an island (e.g., on user interaction)\nexport function boostIslandPriority(name, newPriority = 100) {\n  for (const task of hydrationQueue) {\n    if (task.name === name) {\n      task.priority = newPriority;\n      // Re-sort queue\n      hydrationQueue.sort((a, b) => b.priority - a.priority);\n      break;\n    }\n  }\n}\n\n// --- Client-side hydration ---\n\nexport function hydrateIslands() {\n  // First, hydrate any shared stores from the page\n  const storeScript = document.querySelector('script[data-island-stores]');\n  if (storeScript) {\n    hydrateIslandStores(storeScript.textContent);\n  }\n\n  const islands = document.querySelectorAll('[data-island]');\n\n  for (const el of islands) {\n    const name = el.dataset.island;\n    const mode = el.dataset.islandMode || 'idle';\n    const props = JSON.parse(el.dataset.islandProps || '{}');\n    const priority = parseInt(el.dataset.islandPriority || '0', 10);\n    const stores = JSON.parse(el.dataset.islandStores || '[]');\n    const entry = islandRegistry.get(name);\n\n    if (!entry) {\n      console.warn(`[what] Island \"${name}\" not registered`);\n      continue;\n    }\n\n    // Skip if already hydrated\n    if (hydratedIslands.has(el)) continue;\n\n    scheduleHydration(el, entry, props, mode, priority, name, stores);\n  }\n}\n\nfunction scheduleHydration(el, entry, props, mode, priority, name, stores) {\n  const hydrate = async () => {\n    if (hydratedIslands.has(el)) return;\n    hydratedIslands.add(el);\n\n    const mod = await entry.loader();\n    const Component = mod.default || mod;\n\n    // Inject shared stores into props\n    const storeProps = {};\n    for (const storeName of stores) {\n      storeProps[storeName] = useIslandStore(storeName);\n    }\n\n    // Use hydrate() to reuse server-rendered DOM instead of destroying/recreating\n    const vnode = Component({ ...props, ...storeProps });\n    if (el.childNodes.length > 0) {\n      hydrate(vnode, el);\n    } else {\n      mount(vnode, el);\n    }\n\n    // Clean up data attributes\n    el.removeAttribute('data-island');\n    el.removeAttribute('data-island-mode');\n    el.removeAttribute('data-island-props');\n    el.removeAttribute('data-island-priority');\n    el.removeAttribute('data-island-stores');\n\n    // Dispatch event for analytics/debugging\n    el.dispatchEvent(new CustomEvent('island:hydrated', {\n      bubbles: true,\n      detail: { name, mode },\n    }));\n  };\n\n  switch (mode) {\n    case 'load':\n      // Immediate hydration via queue (respects priority)\n      enqueueHydration({ name, priority: priority + 1000, hydrate });\n      break;\n\n    case 'idle':\n      if ('requestIdleCallback' in window) {\n        requestIdleCallback(() => {\n          enqueueHydration({ name, priority, hydrate });\n        });\n      } else {\n        setTimeout(() => {\n          enqueueHydration({ name, priority, hydrate });\n        }, 200);\n      }\n      break;\n\n    case 'visible': {\n      const observer = new IntersectionObserver((entries, obs) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            obs.disconnect();\n            enqueueHydration({ name, priority, hydrate });\n            break;\n          }\n        }\n      }, { rootMargin: '200px' });\n      observer.observe(el);\n      break;\n    }\n\n    case 'media': {\n      const mq = window.matchMedia(entry.media || '(max-width: 768px)');\n      if (mq.matches) {\n        enqueueHydration({ name, priority, hydrate });\n      } else {\n        mq.addEventListener('change', (e) => {\n          if (e.matches) {\n            enqueueHydration({ name, priority, hydrate });\n          }\n        }, { once: true });\n      }\n      break;\n    }\n\n    case 'action': {\n      const events = ['click', 'focus', 'mouseover', 'touchstart'];\n      const handler = () => {\n        events.forEach(e => el.removeEventListener(e, handler));\n        // Boost priority since user interacted\n        enqueueHydration({ name, priority: priority + 500, hydrate });\n      };\n      events.forEach(e => el.addEventListener(e, handler, { once: true, passive: true }));\n      break;\n    }\n\n    case 'static':\n      // Never hydrate\n      break;\n\n    default:\n      enqueueHydration({ name, priority, hydrate });\n  }\n}\n\n// --- Auto-discover islands from data attributes ---\n// Call this once on the client to set up all islands.\n\nexport function autoIslands(registry) {\n  for (const [name, config] of Object.entries(registry)) {\n    island(name, config.loader || config, {\n      mode: config.mode || 'idle',\n      media: config.media,\n      priority: config.priority || 0,\n      stores: config.stores || [],\n    });\n  }\n\n  if (typeof document !== 'undefined') {\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', hydrateIslands);\n    } else {\n      hydrateIslands();\n    }\n  }\n}\n\n// --- Progressive Enhancement Helpers ---\n\n// Mark an element as progressively enhanced\nexport function enhance(selector, handler) {\n  if (typeof document === 'undefined') return;\n\n  const elements = document.querySelectorAll(selector);\n  for (const el of elements) {\n    if (el.dataset.enhanced) continue;\n    el.dataset.enhanced = 'true';\n    handler(el);\n  }\n}\n\n// Form enhancement: submit via fetch instead of page reload\nexport function enhanceForms(selector = 'form[data-enhance]') {\n  enhance(selector, (form) => {\n    form.addEventListener('submit', async (e) => {\n      e.preventDefault();\n\n      const formData = new FormData(form);\n      const method = form.method.toUpperCase() || 'POST';\n      const action = form.action || location.href;\n\n      try {\n        // Read CSRF token from meta tag\n        const csrfMeta = document.querySelector('meta[name=\"csrf-token\"]') ||\n                         document.querySelector('meta[name=\"what-csrf-token\"]');\n        const csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : null;\n\n        // If no CSRF token and form hasn't opted out, block submission\n        const noCsrf = form.getAttribute('data-no-csrf') === 'true';\n        if (!csrfToken && !noCsrf) {\n          console.warn(\n            '[what] Form submission blocked: no CSRF token found. ' +\n            'Add a <meta name=\"csrf-token\"> tag or set data-no-csrf=\"true\" on the form to opt out.'\n          );\n          form.dispatchEvent(new CustomEvent('form:error', {\n            bubbles: true,\n            detail: { error: new Error('Missing CSRF token') },\n          }));\n          return;\n        }\n\n        const headers = {\n          'X-Requested-With': 'XMLHttpRequest',\n        };\n        if (csrfToken) {\n          headers['X-CSRF-Token'] = csrfToken;\n        }\n\n        const response = await fetch(action, {\n          method,\n          body: method === 'GET' ? undefined : formData,\n          headers,\n        });\n\n        form.dispatchEvent(new CustomEvent('form:response', {\n          bubbles: true,\n          detail: { response, ok: response.ok },\n        }));\n      } catch (error) {\n        form.dispatchEvent(new CustomEvent('form:error', {\n          bubbles: true,\n          detail: { error },\n        }));\n      }\n    });\n  });\n}\n\n// --- Debugging ---\n\nexport function getIslandStatus() {\n  const status = {\n    registered: [...islandRegistry.keys()],\n    hydrated: hydratedIslands.size,\n    pending: hydrationQueue.length,\n    queue: hydrationQueue.map(t => ({ name: t.name, priority: t.priority })),\n    stores: [...sharedStores.keys()],\n  };\n  return status;\n}\n"],
+  "mappings": "AAkBA,OAAS,SAAAA,EAAgB,UAAAC,EAAQ,SAAAC,MAAa,YAE9C,IAAMC,EAAiB,IAAI,IACrBC,EAAkB,IAAI,IACtBC,EAAiB,CAAC,EACpBC,EAAoB,GAKlBC,EAAe,IAAI,IAElB,SAASC,EAAkBC,EAAMC,EAAc,CACpD,GAAIH,EAAa,IAAIE,CAAI,EACvB,OAAOF,EAAa,IAAIE,CAAI,EAG9B,IAAME,EAAQ,CAAC,EACTC,EAAU,CAAC,EAGjB,OAAW,CAACC,EAAKC,CAAK,IAAK,OAAO,QAAQJ,CAAY,EACpDE,EAAQC,CAAG,EAAIZ,EAAOa,CAAK,EAC3B,OAAO,eAAeH,EAAOE,EAAK,CAChC,IAAK,IAAMD,EAAQC,CAAG,EAAE,EACxB,IAAME,GAAQH,EAAQC,CAAG,EAAE,IAAIE,CAAG,EAClC,WAAY,EACd,CAAC,EAIH,OAAAJ,EAAM,SAAWC,EACjBD,EAAM,WAAa,CAACE,EAAKG,IAAO,CAC9B,GAAIJ,EAAQC,CAAG,EACb,OAAOD,EAAQC,CAAG,EAAE,UAAUG,CAAE,CAEpC,EACAL,EAAM,OAAUK,GAAOd,EAAMc,CAAE,EAC/BL,EAAM,aAAe,IAAM,CACzB,IAAMM,EAAW,CAAC,EAClB,OAAW,CAACJ,EAAKK,CAAG,IAAK,OAAO,QAAQN,CAAO,EAC7CK,EAASJ,CAAG,EAAIK,EAAI,KAAK,EAE3B,OAAOD,CACT,EACAN,EAAM,SAAYQ,GAAS,CACzBjB,EAAM,IAAM,CACV,OAAW,CAACW,EAAKC,CAAK,IAAK,OAAO,QAAQK,CAAI,EACxCP,EAAQC,CAAG,GACbD,EAAQC,CAAG,EAAE,IAAIC,CAAK,CAG5B,CAAC,CACH,EAEAP,EAAa,IAAIE,EAAME,CAAK,EACrBA,CACT,CAGO,SAASS,EAAeX,EAAMY,EAAkB,CAAC,EAAG,CACzD,OAAId,EAAa,IAAIE,CAAI,EAChBF,EAAa,IAAIE,CAAI,EAEvBD,EAAkBC,EAAMY,CAAe,CAChD,CAGO,SAASC,GAAwB,CACtC,IAAMH,EAAO,CAAC,EACd,OAAW,CAACV,EAAME,CAAK,IAAKJ,EAC1BY,EAAKV,CAAI,EAAIE,EAAM,aAAa,EAElC,OAAO,KAAK,UAAUQ,CAAI,CAC5B,CAGO,SAASI,EAAoBC,EAAY,CAC9C,GAAI,CACF,IAAML,EAAO,OAAOK,GAAe,SAAW,KAAK,MAAMA,CAAU,EAAIA,EACvE,OAAW,CAACf,EAAMgB,CAAS,IAAK,OAAO,QAAQN,CAAI,EACnCC,EAAeX,EAAMgB,CAAS,EACtC,SAASA,CAAS,CAE5B,OAASC,EAAG,CACV,QAAQ,KAAK,0CAA2CA,CAAC,CAC3D,CACF,CAIO,SAASC,EAAOlB,EAAMmB,EAAQC,EAAO,CAAC,EAAG,CAC9C1B,EAAe,IAAIM,EAAM,CACvB,OAAAmB,EACA,KAAMC,EAAK,MAAQ,OACnB,MAAOA,EAAK,OAAS,KACrB,SAAUA,EAAK,UAAY,EAC3B,OAAQA,EAAK,QAAU,CAAC,CAC1B,CAAC,CACH,CAKO,SAASC,EAAO,CAAE,KAAArB,EAAM,MAAAsB,EAAQ,CAAC,EAAG,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,OAAAC,CAAO,EAAG,CAC7E,IAAMC,EAAQjC,EAAe,IAAIM,CAAI,EAC/B4B,EAAeJ,GAAQG,GAAO,MAAQ,OACtCE,EAAmBJ,GAAYE,GAAO,UAAY,EAClDG,EAAiBJ,GAAUC,GAAO,QAAU,CAAC,EAGnD,MAAO,CACL,IAAK,MACL,MAAO,CACL,cAAe3B,EACf,mBAAoB4B,EACpB,oBAAqB,KAAK,UAAUN,CAAK,EACzC,uBAAwBO,EACxB,qBAAsB,KAAK,UAAUC,CAAc,CACrD,EACA,SAAUP,GAAY,CAAC,EACvB,IAAK,KACL,OAAQ,EACV,CACF,CAIA,SAASQ,EAAiBC,EAAM,CAE9B,IAAIC,EAAW,GACf,QAASC,EAAI,EAAGA,EAAItC,EAAe,OAAQsC,IACzC,GAAIF,EAAK,SAAWpC,EAAesC,CAAC,EAAE,SAAU,CAC9CtC,EAAe,OAAOsC,EAAG,EAAGF,CAAI,EAChCC,EAAW,GACX,KACF,CAEGA,GACHrC,EAAe,KAAKoC,CAAI,EAG1BG,EAAa,CACf,CAEA,SAASA,GAAe,CACtB,GAAItC,GAAqBD,EAAe,SAAW,EAAG,OACtDC,EAAoB,GAGpB,IAAMmC,EAAOpC,EAAe,MAAM,EAElC,QAAQ,QAAQoC,EAAK,QAAQ,CAAC,EAC3B,MAAMf,GAAK,QAAQ,MAAM,kCAAmCe,EAAK,KAAMf,CAAC,CAAC,EACzE,QAAQ,IAAM,CACbpB,EAAoB,GAEpB,eAAesC,CAAY,CAC7B,CAAC,CACL,CAGO,SAASC,EAAoBpC,EAAMqC,EAAc,IAAK,CAC3D,QAAWL,KAAQpC,EACjB,GAAIoC,EAAK,OAAShC,EAAM,CACtBgC,EAAK,SAAWK,EAEhBzC,EAAe,KAAK,CAAC0C,EAAGC,IAAMA,EAAE,SAAWD,EAAE,QAAQ,EACrD,KACF,CAEJ,CAIO,SAASE,GAAiB,CAE/B,IAAMC,EAAc,SAAS,cAAc,4BAA4B,EACnEA,GACF3B,EAAoB2B,EAAY,WAAW,EAG7C,IAAMC,EAAU,SAAS,iBAAiB,eAAe,EAEzD,QAAWC,KAAMD,EAAS,CACxB,IAAM1C,EAAO2C,EAAG,QAAQ,OAClBnB,EAAOmB,EAAG,QAAQ,YAAc,OAChCrB,EAAQ,KAAK,MAAMqB,EAAG,QAAQ,aAAe,IAAI,EACjDlB,EAAW,SAASkB,EAAG,QAAQ,gBAAkB,IAAK,EAAE,EACxDjB,EAAS,KAAK,MAAMiB,EAAG,QAAQ,cAAgB,IAAI,EACnDhB,EAAQjC,EAAe,IAAIM,CAAI,EAErC,GAAI,CAAC2B,EAAO,CACV,QAAQ,KAAK,kBAAkB3B,CAAI,kBAAkB,EACrD,QACF,CAGIL,EAAgB,IAAIgD,CAAE,GAE1BC,EAAkBD,EAAIhB,EAAOL,EAAOE,EAAMC,EAAUzB,EAAM0B,CAAM,CAClE,CACF,CAEA,SAASkB,EAAkBD,EAAIhB,EAAOL,EAAOE,EAAMC,EAAUzB,EAAM0B,EAAQ,CACzE,IAAMmB,EAAU,SAAY,CAC1B,GAAIlD,EAAgB,IAAIgD,CAAE,EAAG,OAC7BhD,EAAgB,IAAIgD,CAAE,EAEtB,IAAMG,EAAM,MAAMnB,EAAM,OAAO,EACzBoB,EAAYD,EAAI,SAAWA,EAG3BE,EAAa,CAAC,EACpB,QAAWC,KAAavB,EACtBsB,EAAWC,CAAS,EAAItC,EAAesC,CAAS,EAIlD,IAAMC,EAAQH,EAAU,CAAE,GAAGzB,EAAO,GAAG0B,CAAW,CAAC,EAC/CL,EAAG,WAAW,OAAS,EACzBE,EAAQK,EAAOP,CAAE,EAEjBpD,EAAM2D,EAAOP,CAAE,EAIjBA,EAAG,gBAAgB,aAAa,EAChCA,EAAG,gBAAgB,kBAAkB,EACrCA,EAAG,gBAAgB,mBAAmB,EACtCA,EAAG,gBAAgB,sBAAsB,EACzCA,EAAG,gBAAgB,oBAAoB,EAGvCA,EAAG,cAAc,IAAI,YAAY,kBAAmB,CAClD,QAAS,GACT,OAAQ,CAAE,KAAA3C,EAAM,KAAAwB,CAAK,CACvB,CAAC,CAAC,CACJ,EAEA,OAAQA,EAAM,CACZ,IAAK,OAEHO,EAAiB,CAAE,KAAA/B,EAAM,SAAUyB,EAAW,IAAM,QAAAoB,CAAQ,CAAC,EAC7D,MAEF,IAAK,OACC,wBAAyB,OAC3B,oBAAoB,IAAM,CACxBd,EAAiB,CAAE,KAAA/B,EAAM,SAAAyB,EAAU,QAAAoB,CAAQ,CAAC,CAC9C,CAAC,EAED,WAAW,IAAM,CACfd,EAAiB,CAAE,KAAA/B,EAAM,SAAAyB,EAAU,QAAAoB,CAAQ,CAAC,CAC9C,EAAG,GAAG,EAER,MAEF,IAAK,UAAW,CACG,IAAI,qBAAqB,CAACM,EAASC,IAAQ,CAC1D,QAAWzB,KAASwB,EAClB,GAAIxB,EAAM,eAAgB,CACxByB,EAAI,WAAW,EACfrB,EAAiB,CAAE,KAAA/B,EAAM,SAAAyB,EAAU,QAAAoB,CAAQ,CAAC,EAC5C,KACF,CAEJ,EAAG,CAAE,WAAY,OAAQ,CAAC,EACjB,QAAQF,CAAE,EACnB,KACF,CAEA,IAAK,QAAS,CACZ,IAAMU,EAAK,OAAO,WAAW1B,EAAM,OAAS,oBAAoB,EAC5D0B,EAAG,QACLtB,EAAiB,CAAE,KAAA/B,EAAM,SAAAyB,EAAU,QAAAoB,CAAQ,CAAC,EAE5CQ,EAAG,iBAAiB,SAAWpC,GAAM,CAC/BA,EAAE,SACJc,EAAiB,CAAE,KAAA/B,EAAM,SAAAyB,EAAU,QAAAoB,CAAQ,CAAC,CAEhD,EAAG,CAAE,KAAM,EAAK,CAAC,EAEnB,KACF,CAEA,IAAK,SAAU,CACb,IAAMS,EAAS,CAAC,QAAS,QAAS,YAAa,YAAY,EACrDC,EAAU,IAAM,CACpBD,EAAO,QAAQrC,GAAK0B,EAAG,oBAAoB1B,EAAGsC,CAAO,CAAC,EAEtDxB,EAAiB,CAAE,KAAA/B,EAAM,SAAUyB,EAAW,IAAK,QAAAoB,CAAQ,CAAC,CAC9D,EACAS,EAAO,QAAQrC,GAAK0B,EAAG,iBAAiB1B,EAAGsC,EAAS,CAAE,KAAM,GAAM,QAAS,EAAK,CAAC,CAAC,EAClF,KACF,CAEA,IAAK,SAEH,MAEF,QACExB,EAAiB,CAAE,KAAA/B,EAAM,SAAAyB,EAAU,QAAAoB,CAAQ,CAAC,CAChD,CACF,CAKO,SAASW,EAAYC,EAAU,CACpC,OAAW,CAACzD,EAAM0D,CAAM,IAAK,OAAO,QAAQD,CAAQ,EAClDvC,EAAOlB,EAAM0D,EAAO,QAAUA,EAAQ,CACpC,KAAMA,EAAO,MAAQ,OACrB,MAAOA,EAAO,MACd,SAAUA,EAAO,UAAY,EAC7B,OAAQA,EAAO,QAAU,CAAC,CAC5B,CAAC,EAGC,OAAO,SAAa,MAClB,SAAS,aAAe,UAC1B,SAAS,iBAAiB,mBAAoBlB,CAAc,EAE5DA,EAAe,EAGrB,CAKO,SAASmB,EAAQC,EAAUL,EAAS,CACzC,GAAI,OAAO,SAAa,IAAa,OAErC,IAAMM,EAAW,SAAS,iBAAiBD,CAAQ,EACnD,QAAWjB,KAAMkB,EACXlB,EAAG,QAAQ,WACfA,EAAG,QAAQ,SAAW,OACtBY,EAAQZ,CAAE,EAEd,CAGO,SAASmB,EAAaF,EAAW,qBAAsB,CAC5DD,EAAQC,EAAWG,GAAS,CAC1BA,EAAK,iBAAiB,SAAU,MAAO9C,GAAM,CAC3CA,EAAE,eAAe,EAEjB,IAAM+C,EAAW,IAAI,SAASD,CAAI,EAC5BE,EAASF,EAAK,OAAO,YAAY,GAAK,OACtCG,EAASH,EAAK,QAAU,SAAS,KAEvC,GAAI,CAEF,IAAMI,EAAW,SAAS,cAAc,yBAAyB,GAChD,SAAS,cAAc,8BAA8B,EAChEC,EAAYD,EAAWA,EAAS,aAAa,SAAS,EAAI,KAG1DE,EAASN,EAAK,aAAa,cAAc,IAAM,OACrD,GAAI,CAACK,GAAa,CAACC,EAAQ,CACzB,QAAQ,KACN,4IAEF,EACAN,EAAK,cAAc,IAAI,YAAY,aAAc,CAC/C,QAAS,GACT,OAAQ,CAAE,MAAO,IAAI,MAAM,oBAAoB,CAAE,CACnD,CAAC,CAAC,EACF,MACF,CAEA,IAAMO,EAAU,CACd,mBAAoB,gBACtB,EACIF,IACFE,EAAQ,cAAc,EAAIF,GAG5B,IAAMG,EAAW,MAAM,MAAML,EAAQ,CACnC,OAAAD,EACA,KAAMA,IAAW,MAAQ,OAAYD,EACrC,QAAAM,CACF,CAAC,EAEDP,EAAK,cAAc,IAAI,YAAY,gBAAiB,CAClD,QAAS,GACT,OAAQ,CAAE,SAAAQ,EAAU,GAAIA,EAAS,EAAG,CACtC,CAAC,CAAC,CACJ,OAASC,EAAO,CACdT,EAAK,cAAc,IAAI,YAAY,aAAc,CAC/C,QAAS,GACT,OAAQ,CAAE,MAAAS,CAAM,CAClB,CAAC,CAAC,CACJ,CACF,CAAC,CACH,CAAC,CACH,CAIO,SAASC,GAAkB,CAQhC,MAPe,CACb,WAAY,CAAC,GAAG/E,EAAe,KAAK,CAAC,EACrC,SAAUC,EAAgB,KAC1B,QAASC,EAAe,OACxB,MAAOA,EAAe,IAAI8E,IAAM,CAAE,KAAMA,EAAE,KAAM,SAAUA,EAAE,QAAS,EAAE,EACvE,OAAQ,CAAC,GAAG5E,EAAa,KAAK,CAAC,CACjC,CAEF",
+  "names": ["mount", "signal", "batch", "islandRegistry", "hydratedIslands", "hydrationQueue", "isProcessingQueue", "sharedStores", "createIslandStore", "name", "initialState", "store", "signals", "key", "value", "val", "fn", "snapshot", "sig", "data", "useIslandStore", "fallbackInitial", "serializeIslandStores", "hydrateIslandStores", "serialized", "storeData", "e", "island", "loader", "opts", "Island", "props", "children", "mode", "priority", "stores", "entry", "resolvedMode", "resolvedPriority", "resolvedStores", "enqueueHydration", "task", "inserted", "i", "processQueue", "boostIslandPriority", "newPriority", "a", "b", "hydrateIslands", "storeScript", "islands", "el", "scheduleHydration", "hydrate", "mod", "Component", "storeProps", "storeName", "vnode", "entries", "obs", "mq", "events", "handler", "autoIslands", "registry", "config", "enhance", "selector", "elements", "enhanceForms", "form", "formData", "method", "action", "csrfMeta", "csrfToken", "noCsrf", "headers", "response", "error", "getIslandStatus", "t"]
+}

package/index.d.ts

@@ -7,9 +7,21 @@ import { VNode, VNodeChild, Signal } from '../core';
 /** Render VNode tree to HTML string */
 export function renderToString(vnode: VNode): string;
 
+/** Render VNode tree with hydration markers (data-hk attributes, comment boundaries) */
+export function renderToHydratableString(vnode: VNode): string;
+
 /** Render VNode tree as async iterator for streaming */
 export function renderToStream(vnode: VNode): AsyncGenerator<string>;
 
+/** CSRF token generation for server actions */
+export function generateCsrfToken(): string;
+
+/** Validate a CSRF token from request against the session token */
+export function validateCsrfToken(requestToken: string, sessionToken: string): boolean;
+
+/** Generate a CSRF meta tag for inclusion in HTML head */
+export function csrfMetaTag(token: string): string;
+
 // --- Page Configuration ---
 
 export interface PageConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-server",
-  "version": "0.5.5",
+  "version": "0.6.2",
   "description": "What Framework - SSR, islands architecture, static generation",
   "type": "module",
   "main": "src/index.js",
@@ -8,17 +8,21 @@
   "exports": {
     ".": {
       "types": "./index.d.ts",
+      "production": "./dist/index.min.js",
       "import": "./src/index.js"
     },
     "./islands": {
+      "production": "./dist/islands.min.js",
       "import": "./src/islands.js"
     },
     "./actions": {
+      "production": "./dist/actions.min.js",
       "import": "./src/actions.js"
     }
   },
   "files": [
     "src",
+    "dist",
     "index.d.ts"
   ],
   "sideEffects": false,
@@ -32,14 +36,14 @@
   "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",
   "peerDependencies": {
-    "what-core": "^0.5.3"
+    "what-core": "^0.6.2"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/CelsianJs/whatfw"
+    "url": "https://github.com/CelsianJs/what-framework"
   },
   "bugs": {
-    "url": "https://github.com/CelsianJs/whatfw/issues"
+    "url": "https://github.com/CelsianJs/what-framework/issues"
   },
   "homepage": "https://whatfw.com"
 }

package/src/actions.js

@@ -45,8 +45,14 @@ export function generateCsrfToken() {
   if (typeof crypto !== 'undefined' && crypto.randomUUID) {
     return crypto.randomUUID();
   }
-  // Fallback for older Node
-  return Math.random().toString(36).slice(2) + Date.now().toString(36);
+  // Fallback for environments without crypto.randomUUID — use crypto.getRandomValues
+  if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
+    const arr = new Uint8Array(16);
+    crypto.getRandomValues(arr);
+    return Array.from(arr, b => b.toString(16).padStart(2, '0')).join('');
+  }
+  // Last resort — should not be reached in modern environments
+  throw new Error('[what] No secure random source available for CSRF token generation');
 }
 
 // Server: validate CSRF token from request header against session token
@@ -70,11 +76,15 @@ export function csrfMetaTag(token) {
 
 // --- Define a server action ---
 
+let _actionCounter = 0;
+
 function generateActionId() {
-  // Generate a random ID that's not easily enumerable
+  // Generate a deterministic ID — prefer crypto.getRandomValues, fall back to a
+  // monotonic counter (never Math.random, which is not cryptographically safe and
+  // produces predictable IDs in some runtimes).
   const rand = typeof crypto !== 'undefined' && crypto.getRandomValues
     ? Array.from(crypto.getRandomValues(new Uint8Array(6)), b => b.toString(16).padStart(2, '0')).join('')
-    : Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+    : `c${(++_actionCounter).toString(36)}_${Date.now().toString(36)}`;
   return `a_${rand}`;
 }
 

package/src/index.js

@@ -4,6 +4,169 @@
 
 import { h } from 'what-core';
 
+// --- SSR Error Collection ---
+// Errors that occur during SSR are collected and serialized into the HTML output
+// so the client can pick them up during hydration and display/report them.
+
+let _ssrErrors = [];
+const MAX_SSR_ERRORS = 50;
+
+function _collectSSRError(error, context = {}) {
+  const entry = {
+    code: error.code || 'ERR_SSR_RENDER',
+    message: error.message || String(error),
+    component: context.component || null,
+    timestamp: Date.now(),
+  };
+  // In dev mode, include extra detail for debugging
+  if (_isDevMode) {
+    entry.suggestion = error.suggestion || null;
+    entry.stack = error.stack?.split('\n').slice(0, 5).join('\n') || null;
+  }
+  _ssrErrors.push(entry);
+  if (_ssrErrors.length > MAX_SSR_ERRORS) _ssrErrors.shift();
+}
+
+function _resetSSRErrors() {
+  _ssrErrors = [];
+}
+
+/**
+ * Serialize collected SSR errors into a script tag for client hydration.
+ * In dev mode: includes full error details (message, suggestion, stack).
+ * In production: includes only error code and component name.
+ */
+export function serializeSSRErrors() {
+  if (_ssrErrors.length === 0) return '';
+  const payload = _isDevMode
+    ? _ssrErrors
+    : _ssrErrors.map(e => ({ code: e.code, component: e.component }));
+  const json = JSON.stringify(payload).replace(/<\//g, '<\\/'); // prevent XSS via </script>
+  return `<script type="application/json" data-what-ssr-errors>${json}</script>`;
+}
+
+/**
+ * Read SSR errors from the DOM during client hydration.
+ * Call this on the client side during hydration to pick up errors from SSR.
+ * Returns an array of error objects, or empty array if none.
+ */
+export function hydrateSSRErrors() {
+  if (typeof document === 'undefined') return [];
+  const el = document.querySelector('script[data-what-ssr-errors]');
+  if (!el) return [];
+  try {
+    const errors = JSON.parse(el.textContent);
+    el.remove(); // clean up after reading
+    return errors;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Get collected SSR errors (for programmatic access before serialization).
+ */
+export function getSSRErrors() {
+  return _ssrErrors.slice();
+}
+
+// --- Hydration ID Generator ---
+let _hydrationIdCounter = 0;
+
+function resetHydrationId() {
+  _hydrationIdCounter = 0;
+}
+
+function nextHydrationId() {
+  return 'h' + (_hydrationIdCounter++);
+}
+
+// --- Render to Hydratable String ---
+// Renders with hydration markers (data-hk attributes, comment boundaries)
+// so the client can reuse the server-rendered DOM.
+
+export function renderToHydratableString(vnode) {
+  resetHydrationId();
+  _resetSSRErrors();
+  return _renderHydratable(vnode);
+}
+
+function _renderHydratable(vnode) {
+  if (vnode == null || vnode === false || vnode === true) return '';
+
+  // Text
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    return escapeHtml(String(vnode));
+  }
+
+  // Signal — unwrap
+  if (typeof vnode === 'function' && vnode._signal) {
+    return `<!--$-->${_renderHydratable(vnode())}<!--/$-->`;
+  }
+
+  // Reactive function child — wrap in dynamic content markers
+  if (typeof vnode === 'function') {
+    try {
+      return `<!--$-->${_renderHydratable(vnode())}<!--/$-->`;
+    } catch (e) {
+      _collectSSRError(e, { component: 'reactive-function' });
+      if (_isDevMode) {
+        console.warn('[what-server] Error rendering reactive function in SSR:', e.message);
+      }
+      return '<!--$--><!--/$-->';
+    }
+  }
+
+  // Array — wrap in list markers
+  if (Array.isArray(vnode)) {
+    return `<!--[]-->${vnode.map(_renderHydratable).join('')}<!--/[]-->`;
+  }
+
+  // Component — add hydration key to root element
+  if (typeof vnode.tag === 'function') {
+    const hkId = nextHydrationId();
+    const componentName = vnode.tag.displayName || vnode.tag.name || 'Anonymous';
+    try {
+      const result = vnode.tag({ ...vnode.props, children: vnode.children });
+      const html = _renderHydratable(result);
+      // Inject data-hk into the first element tag if present
+      return injectHydrationKey(html, hkId);
+    } catch (e) {
+      _collectSSRError(e, { component: componentName });
+      if (_isDevMode) {
+        console.warn(`[what-server] Error rendering component "${componentName}" in SSR:`, e.message);
+        return `<!--ssr-error:${escapeHtml(componentName)}-->`;
+      }
+      return `<!--ssr-error-->`;
+    }
+  }
+
+  // Element
+  const { tag, props, children } = vnode;
+  const attrs = renderAttrs(props || {});
+  const open = `<${tag}${attrs}>`;
+
+  // Void elements
+  if (VOID_ELEMENTS.has(tag)) return open;
+
+  const rawInner = _resolveInnerHTML(props);
+  const inner = rawInner != null ? String(rawInner) : children.map(_renderHydratable).join('');
+  return `${open}${inner}</${tag}>`;
+}
+
+// Inject data-hk="id" into the first HTML opening tag
+function injectHydrationKey(html, hkId) {
+  // Skip comment markers to find the first real element
+  const match = html.match(/^((?:<!--.*?-->)*)<([a-zA-Z][a-zA-Z0-9-]*)/);
+  if (match) {
+    const prefix = match[1];
+    const tagName = match[2];
+    const insertAt = prefix.length + 1 + tagName.length; // after '<tagName'
+    return html.slice(0, insertAt) + ` data-hk="${hkId}"` + html.slice(insertAt);
+  }
+  return html;
+}
+
 // --- Render to String ---
 // Renders a VNode tree to an HTML string. Used for SSR and static gen.
 
@@ -25,7 +188,8 @@ export function renderToString(vnode) {
     try {
       return renderToString(vnode());
     } catch (e) {
-      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+      _collectSSRError(e, { component: 'reactive-function' });
+      if (_isDevMode) {
         console.warn('[what-server] Error rendering reactive function in SSR:', e.message);
       }
       return '';
@@ -39,8 +203,18 @@ export function renderToString(vnode) {
 
   // Component
   if (typeof vnode.tag === 'function') {
-    const result = vnode.tag({ ...vnode.props, children: vnode.children });
-    return renderToString(result);
+    const componentName = vnode.tag.displayName || vnode.tag.name || 'Anonymous';
+    try {
+      const result = vnode.tag({ ...vnode.props, children: vnode.children });
+      return renderToString(result);
+    } catch (e) {
+      _collectSSRError(e, { component: componentName });
+      if (_isDevMode) {
+        console.warn(`[what-server] Error rendering component "${componentName}" in SSR:`, e.message);
+        return `<!-- SSR Error in ${escapeHtml(componentName)}: ${escapeHtml(e.message)} -->`;
+      }
+      return `<!-- SSR Error -->`;
+    }
   }
 
   // Element
@@ -51,9 +225,7 @@ export function renderToString(vnode) {
   // Void elements
   if (VOID_ELEMENTS.has(tag)) return open;
 
-  const rawInner = props?.dangerouslySetInnerHTML?.__html
-    ?? props?.innerHTML?.__html
-    ?? props?.innerHTML;
+  const rawInner = _resolveInnerHTML(props);
   const inner = rawInner != null ? String(rawInner) : children.map(renderToString).join('');
   return `${open}${inner}</${tag}>`;
 }
@@ -80,7 +252,8 @@ export async function* renderToStream(vnode) {
     try {
       yield* renderToStream(vnode());
     } catch (e) {
-      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+      _collectSSRError(e, { component: 'reactive-function' });
+      if (_isDevMode) {
         console.warn('[what-server] Error rendering reactive function in stream SSR:', e.message);
       }
     }
@@ -95,16 +268,20 @@ export async function* renderToStream(vnode) {
   }
 
   if (typeof vnode.tag === 'function') {
+    const componentName = vnode.tag.displayName || vnode.tag.name || 'Anonymous';
     try {
       const result = vnode.tag({ ...vnode.props, children: vnode.children });
       // Support async components
       const resolved = result instanceof Promise ? await result : result;
       yield* renderToStream(resolved);
     } catch (e) {
-      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
-        console.warn('[what-server] Error rendering component in stream SSR:', e.message);
+      _collectSSRError(e, { component: componentName });
+      if (_isDevMode) {
+        console.warn(`[what-server] Error rendering component "${componentName}" in stream SSR:`, e.message);
       }
-      yield `<!-- SSR Error: ${escapeHtml(e.message || 'Component error')} -->`;
+      yield _isDevMode
+        ? `<!-- SSR Error in ${escapeHtml(componentName)}: ${escapeHtml(e.message || 'Component error')} -->`
+        : `<!-- SSR Error -->`;
     }
     return;
   }
@@ -114,9 +291,7 @@ export async function* renderToStream(vnode) {
   yield `<${tag}${attrs}>`;
 
   if (!VOID_ELEMENTS.has(tag)) {
-    const rawInner = props?.dangerouslySetInnerHTML?.__html
-      ?? props?.innerHTML?.__html
-      ?? props?.innerHTML;
+    const rawInner = _resolveInnerHTML(props);
     if (rawInner != null) {
       yield String(rawInner);
     } else {
@@ -143,6 +318,7 @@ export function definePage(config) {
 
 // Generate static HTML for a page
 export function generateStaticPage(page, data = {}) {
+  _resetSSRErrors();
   const vnode = page.component(data);
   const html = renderToString(vnode);
   const islands = page.islands || [];
@@ -155,12 +331,13 @@ export function generateStaticPage(page, data = {}) {
     scripts: page.mode === 'static' ? [] : page.scripts || [],
     styles: page.styles || [],
     mode: page.mode,
+    ssrErrors: serializeSSRErrors(),
   });
 }
 
-function wrapDocument({ title, meta, body, islands, scripts, styles, mode }) {
+function wrapDocument({ title, meta, body, islands, scripts, styles, mode, ssrErrors = '' }) {
   const metaTags = Object.entries(meta)
-    .map(([name, content]) => `<meta name="${name}" content="${escapeHtml(content)}">`)
+    .map(([name, content]) => `<meta name="${escapeHtml(name)}" content="${escapeHtml(content)}">`)
     .join('\n    ');
 
   const styleTags = styles
@@ -191,6 +368,7 @@ function wrapDocument({ title, meta, body, islands, scripts, styles, mode }) {
   </head>
   <body>
     <div id="app">${body}</div>
+    ${ssrErrors}
     ${islandScript}
     ${scriptTags}
     ${clientScript}
@@ -208,6 +386,42 @@ export function server(Component) {
 
 // --- Helpers ---
 
+// Dev-mode flag for server
+const _isDevMode = typeof process !== 'undefined'
+  ? process.env?.NODE_ENV !== 'production'
+  : true;
+
+/**
+ * Resolve innerHTML / dangerouslySetInnerHTML from props.
+ * Requires { __html: ... } wrapper. Plain string innerHTML is rejected (XSS prevention).
+ */
+function _resolveInnerHTML(props) {
+  if (!props) return null;
+
+  // dangerouslySetInnerHTML always requires { __html }
+  if (props.dangerouslySetInnerHTML) {
+    return props.dangerouslySetInnerHTML.__html ?? null;
+  }
+
+  // innerHTML with { __html } wrapper — allowed
+  if (props.innerHTML && typeof props.innerHTML === 'object' && '__html' in props.innerHTML) {
+    return props.innerHTML.__html ?? null;
+  }
+
+  // innerHTML as plain string — reject with warning
+  if (props.innerHTML != null && typeof props.innerHTML === 'string') {
+    if (_isDevMode) {
+      console.warn(
+        '[what-server] innerHTML received a raw string. This is a security risk (XSS). ' +
+        'Use innerHTML={{ __html: trustedString }} or dangerouslySetInnerHTML={{ __html: trustedString }} instead.'
+      );
+    }
+    return null;
+  }
+
+  return null;
+}
+
 function renderAttrs(props) {
   let out = '';
   for (const [key, val] of Object.entries(props)) {
@@ -242,7 +456,8 @@ function escapeHtml(str) {
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 }
 
 function camelToKebab(str) {
@@ -255,6 +470,11 @@ const VOID_ELEMENTS = new Set([
   'link', 'meta', 'param', 'source', 'track', 'wbr',
 ]);
 
+// SSR error serialization is exported above:
+//   serializeSSRErrors()  — serialize collected errors to script tag
+//   hydrateSSRErrors()    — read errors from DOM during client hydration
+//   getSSRErrors()        — programmatic access to collected errors
+
 // Re-export server actions
 export {
   action,

package/src/islands.js

@@ -16,7 +16,7 @@
 //   'media'   - Hydrate when media query matches (e.g., mobile-only)
 //   'action'  - Hydrate on first user interaction (click, focus, hover)
 
-import { mount, signal, batch } from 'what-core';
+import { mount, hydrate, signal, batch } from 'what-core';
 
 const islandRegistry = new Map();
 const hydratedIslands = new Set();
@@ -234,7 +234,13 @@ function scheduleHydration(el, entry, props, mode, priority, name, stores) {
       storeProps[storeName] = useIslandStore(storeName);
     }
 
-    mount(Component({ ...props, ...storeProps }), el);
+    // Use hydrate() to reuse server-rendered DOM instead of destroying/recreating
+    const vnode = Component({ ...props, ...storeProps });
+    if (el.childNodes.length > 0) {
+      hydrate(vnode, el);
+    } else {
+      mount(vnode, el);
+    }
 
     // Clean up data attributes
     el.removeAttribute('data-island');
@@ -363,12 +369,36 @@ export function enhanceForms(selector = 'form[data-enhance]') {
       const action = form.action || location.href;
 
       try {
+        // Read CSRF token from meta tag
+        const csrfMeta = document.querySelector('meta[name="csrf-token"]') ||
+                         document.querySelector('meta[name="what-csrf-token"]');
+        const csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : null;
+
+        // If no CSRF token and form hasn't opted out, block submission
+        const noCsrf = form.getAttribute('data-no-csrf') === 'true';
+        if (!csrfToken && !noCsrf) {
+          console.warn(
+            '[what] Form submission blocked: no CSRF token found. ' +
+            'Add a <meta name="csrf-token"> tag or set data-no-csrf="true" on the form to opt out.'
+          );
+          form.dispatchEvent(new CustomEvent('form:error', {
+            bubbles: true,
+            detail: { error: new Error('Missing CSRF token') },
+          }));
+          return;
+        }
+
+        const headers = {
+          'X-Requested-With': 'XMLHttpRequest',
+        };
+        if (csrfToken) {
+          headers['X-CSRF-Token'] = csrfToken;
+        }
+
         const response = await fetch(action, {
           method,
           body: method === 'GET' ? undefined : formData,
-          headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-          },
+          headers,
         });
 
         form.dispatchEvent(new CustomEvent('form:response', {