## Demo: defer-invalidation

### DeferInvalidation.svelte
```svelte
<script>
  import DemoPage from '../../components/DemoPage.svelte';
  import Controls from './Controls.svelte';
  import ServerClock from './ServerClock.svelte';
  import LiveCounter from './LiveCounter.svelte';
  import FlakyPanel from './FlakyPanel.svelte';
  import ErrorModes from './ErrorModes.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</script>

<DemoPage
  title="Invalidate mochi:defer islands"
  description="Give a mochi:defer island a name, then call reloadDeferredIsland(name) from the browser to re-fetch its server HTML. Island 1 is also hydrated, so it unmounts and re-hydrates on every reload — its counter resets. Islands 2 and 3 share the name 2-and-3, so they reload together. Everything below the buttons — the disabled states, counts and timestamps — is read from deferReloadState(name)."
  {sources}
>
  <Controls mochi:hydrate />

  <LiveCounter mochi:defer={{ name: '1' }} mochi:hydrate label="1">
    <div class="island-loading tall">Loading<span class="dots"></span></div>
  </LiveCounter>

  <div class="spacer"></div>

  <div class="pair">
    <ServerClock mochi:defer={{ name: '2-and-3' }} label="2">
      <div class="island-loading">Loading<span class="dots"></span></div>
    </ServerClock>
    <ServerClock mochi:defer={{ name: '2-and-3' }} label="3">
      <div class="island-loading">Loading<span class="dots"></span></div>
    </ServerClock>
  </div>

  <h2>Error modes</h2>
  <p class="lede">
    A reload can fail in two different places, and they are not the same thing: the render can throw while the island is being built on the server, or the request for that HTML can
    fail. Only the second counts as a failed reload.
  </p>

  <ErrorModes mochi:hydrate />

  <FlakyPanel mochi:defer={{ name: 'flaky' }} label="4">
    <div class="island-loading">Loading<span class="dots"></span></div>
  </FlakyPanel>

  <div class="spacer"></div>

  <ServerClock mochi:defer={{ name: 'offline', retries: 0 }} label="5">
    <div class="island-loading">Loading<span class="dots"></span></div>
  </ServerClock>
</DemoPage>

<style>
  .pair {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  h2 {
    margin: 2rem 0 0.5rem;
    font-size: 1.15rem;
  }

  .lede {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-subtle);
  }

  .spacer {
    height: 0.75rem;
  }

  .island-loading {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.9rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-size: 0.9rem;
    font-style: italic;
  }

  .island-loading.tall {
    min-height: 4.8rem;
  }

  :global(mochi-server-island[data-reloading] > *) {
    animation: pulse 1s ease-in-out infinite;
  }

  @keyframes pulse {
    50% {
      opacity: 0.45;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :global(mochi-server-island[data-reloading] > *) {
      animation: none;
      opacity: 0.6;
    }
  }

  .dots::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: dots 1.2s steps(4, end) infinite;
  }

  @keyframes dots {
    0% {
      content: '';
    }
    25% {
      content: '.';
    }
    50% {
      content: '..';
    }
    75% {
      content: '...';
    }
  }
</style>
```

### Controls.svelte
```svelte
<script>
  import { onMount } from 'svelte';
  import { reloadDeferredIsland, reloadDeferredIslandAll, deferReloadState } from 'mochi-framework';

  const one = deferReloadState('1');
  const pair = deferReloadState('2-and-3');

  // Starts false so SSR and the first hydration render agree: no island has registered yet, so
  // `reloading` reads false and the buttons would otherwise ship enabled.
  let ready = $state(false);
  onMount(() => {
    ready = true;
  });

  // Includes the error-mode islands below, since "reload all" reaches every named island.
  const anyReloading = $derived([one, pair, deferReloadState('flaky'), deferReloadState('offline')].some((s) => s.reloading));

  const stamp = (s) => (s.lastReloaded ? `${s.lastReloadOk ? 'ok' : 'failed'} at ${s.lastReloaded.toLocaleTimeString()}` : 'not yet reloaded');
</script>

<div class="controls">
  <div class="buttons">
    <button disabled={!ready || one.reloading} onclick={() => reloadDeferredIsland('1')}>Reload 1</button>
    <button disabled={!ready || pair.reloading} onclick={() => reloadDeferredIsland('2-and-3')}>Reload 2 + 3</button>
    <button disabled={!ready || anyReloading} onclick={() => reloadDeferredIslandAll()}>Reload all</button>
  </div>

  <dl class="state">
    <div>
      <dt>Island 1</dt>
      <dd>{one.count} reloads · {stamp(one)}</dd>
    </div>
    <div>
      <dt>Islands 2 + 3</dt>
      <dd>{pair.count} reloads · {stamp(pair)}</dd>
    </div>
  </dl>
</div>

<style>
  .controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  button {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed;
    background: var(--surface-muted);
    color: var(--text-subtle);
  }

  .state {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
  }

  .state div {
    display: flex;
    gap: 0.4rem;
  }

  dt {
    font-weight: 600;
  }

  dt::after {
    content: ':';
  }

  dd {
    margin: 0;
    font-family: var(--font-mono);
  }
</style>
```

### ServerClock.svelte
```svelte
<script>
  import { isServer } from 'mochi-framework';
  import { delay } from '../../components/utils.ts';

  let { label = '' } = $props();

  await (isServer ? delay(700, 1300) : Promise.resolve());

  const renderedAt = new Date().toLocaleTimeString();
</script>

<div class="clock">
  <span class="label">{label}</span>
  <span class="value">rendered {renderedAt}</span>
</div>

<style>
  .clock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.9rem 1rem;
    border: 2px dashed var(--badge-info-text);
    border-radius: var(--radius-md);
    background: var(--badge-info-bg);
    color: var(--text);
  }

  .label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .value {
    font-size: 0.9rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
</style>
```

### LiveCounter.svelte
```svelte
<script>
  import { isServer } from 'mochi-framework';
  import { delay } from '../../components/utils.ts';

  let { label = '' } = $props();

  await (isServer ? delay(700, 1300) : Promise.resolve());

  const renderedAt = new Date().toLocaleTimeString();
  let count = $state(0);
</script>

<div class="counter">
  <div class="meta">
    <span class="label">{label} <span class="tag">hydrated</span></span>
    <span class="minted">rendered {renderedAt}</span>
  </div>
  <button onclick={() => count++}>Clicked {count} {count === 1 ? 'time' : 'times'}</button>
</div>

<style>
  .counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.8rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--badge-info-text);
    border-radius: var(--radius-md);
    background: var(--badge-info-bg);
    color: var(--text);
  }

  .meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .tag {
    font-weight: 500;
    color: var(--badge-info-text);
    letter-spacing: 0;
  }

  .minted {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
  }

  button {
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--badge-info-text);
    color: var(--badge-info-bg);
    font-weight: 600;
    cursor: pointer;
  }
</style>
```

### ErrorModes.svelte
```svelte
<script>
  import { onMount } from 'svelte';
  import { reloadDeferredIsland, deferReloadState } from 'mochi-framework';

  const rendered = deferReloadState('flaky');
  const offline = deferReloadState('offline');

  // Starts false so SSR and the first hydration render agree: no island has registered yet, so
  // `reloading` reads false and the buttons would otherwise ship enabled.
  let ready = $state(false);
  onMount(() => {
    ready = true;
  });

  const stamp = (s) => (s.lastReloaded ? `${s.lastReloadOk ? 'ok' : 'failed'} at ${s.lastReloaded.toLocaleTimeString()}` : 'not yet reloaded');

  // The island endpoint answers 200 even when the render throws, so breaking the request itself
  // is the only way to show a failed fetch.
  async function reloadOffline() {
    const real = window.fetch;
    window.fetch = (url, ...rest) => (String(url).includes('/_mochi/island/') ? Promise.reject(new Error('simulated network failure')) : real(url, ...rest));
    try {
      await reloadDeferredIsland('offline');
    } finally {
      window.fetch = real;
    }
  }
</script>

<div class="modes">
  <div class="mode">
    <button disabled={!ready || rendered.reloading} onclick={() => reloadDeferredIsland('flaky')}>Reload 4 — make the render throw</button>
    <p class="note">
      Island 4 throws about half the time. Its own <code>&lt;svelte:boundary&gt;</code> catches it, so the island degrades to its failed snippet and the rest of the page is
      untouched. The fetch itself was fine, so <code>lastReloadOk</code> stays <strong>true</strong>.
    </p>
    <p class="state">Island 4: {rendered.count} reloads · {stamp(rendered)}</p>
  </div>

  <div class="mode">
    <button disabled={!ready || offline.reloading} onclick={reloadOffline}>Reload 5 — make the fetch fail</button>
    <p class="note">
      This one breaks the request instead of the render. Nothing comes back to swap in, so the island keeps the content it already had and
      <code>lastReloadOk</code> flips to <strong>false</strong>. Note the timestamp on island 5 does not change.
    </p>
    <p class="state">Island 5: {offline.count} reloads · {stamp(offline)}</p>
  </div>
</div>

<style>
  .modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .mode {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  button {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed;
    background: var(--surface-muted);
    color: var(--text-subtle);
  }

  .note {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-subtle);
  }

  .state {
    margin: 0;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-subtle);
  }
</style>
```

### FlakyPanel.svelte
```svelte
<script>
  import { isServer } from 'mochi-framework';
  import { delay } from '../../components/utils.ts';
  import FlakyContent from './FlakyContent.svelte';

  let { label = '' } = $props();

  await (isServer ? delay(700, 1300) : Promise.resolve());
</script>

<svelte:boundary>
  <FlakyContent {label} />

  {#snippet failed(error)}
    <div class="failed">
      <span class="label">{label}</span>
      <span class="value">failed — {error.message}</span>
    </div>
  {/snippet}
</svelte:boundary>

<style>
  .failed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.9rem 1rem;
    border: 2px dashed var(--badge-danger-text, #c00);
    border-radius: var(--radius-md);
    background: var(--badge-danger-bg, #fff5f5);
    color: var(--text);
  }

  .label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .value {
    font-size: 0.9rem;
    font-family: var(--font-mono);
    color: var(--badge-danger-text, #c00);
  }
</style>
```

### FlakyContent.svelte
```svelte
<script>
  let { label = '' } = $props();

  const renderedAt = new Date().toLocaleTimeString();

  if (Math.random() < 0.5) {
    throw new Error('Upstream service returned 503');
  }
</script>

<div class="ok">
  <span class="label">{label}</span>
  <span class="value">rendered {renderedAt}</span>
</div>

<style>
  .ok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.9rem 1rem;
    border: 2px dashed var(--badge-info-text);
    border-radius: var(--radius-md);
    background: var(--badge-info-bg);
    color: var(--text);
  }

  .label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .value {
    font-size: 0.9rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
</style>
```

### routes.ts
```ts
import { Mochi } from 'mochi-framework';
import type { MochiRouteValue } from 'mochi-framework';

export const routes: Record<string, MochiRouteValue> = {
  '/demos/defer-invalidation': Mochi.page('./src/demos/defer-invalidation/DeferInvalidation.svelte'),
};
```

### index.ts
```ts
import { Mochi, logger } from 'mochi-framework';
import { routes } from './routes';

await Mochi.serve({
  port: 3333,
  development: process.env.MODE === 'development',
  routes,
});

logger.info('Server running at http://localhost:3333');
```