Runed Utilities

<script>
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import Reactivity from './Reactivity.svelte';
  import StateCard from './StateCard.svelte';
  import Elements from './Elements.svelte';
  import Sensors from './Sensors.svelte';
  import AsyncFsm from './AsyncFsm.svelte';
  import { highlightCode } from '../../lib/highlight.server';
  import { files } from './files.ts';

  const sources = await loadSources(files);

  const codeInstall = await highlightCode('bun add runed', 'bash');
  const codeUsage = await highlightCode(
    `import { Debounced } from 'runed';

let query = $state('');
const search = new Debounced(() => query, 400);
// search.current — query, 400ms after it stops changing`,
    'typescript',
  );
</script>

<div class="intro">
  <p>
    Runed needs no special setup — it's a plain Svelte 5 runes library, so you install it and import from
    <code>runed</code>. In Mochi it bundles straight into whichever island imports it.
  </p>
  <CodeSnippet html={codeInstall} />
  <p>Then import a utility and use it like any rune — e.g. the <code>Debounced</code> value driving the first card:</p>
  <CodeSnippet html={codeUsage} />
  <p>Explore the full toolkit at <a href="https://runed.dev" target="_blank" rel="noopener noreferrer">runed.dev</a>.</p>
</div>

<section class="card">
  <header>
    <h2>Reactivity & timing</h2>
    <p><code>Debounced</code>, <code>Throttled</code>, <code>Previous</code>, and <code>watch</code> — one input, four derived views.</p>
  </header>
  <Reactivity mochi:hydrate />
</section>

<section class="card">
  <header>
    <h2>State</h2>
    <p><code>StateHistory</code> undo/redo, <code>PersistedState</code> across reloads and tabs, and <code>IsMounted</code>.</p>
  </header>
  <StateCard mochi:hydrate />
</section>

<section class="card">
  <header>
    <h2>Elements & observers</h2>
    <p><code>ElementSize</code> + <code>useResizeObserver</code>, <code>IsInViewport</code>, <code>activeElement</code>, and <code>IsFocusWithin</code>.</p>
  </header>
  <Elements mochi:hydrate />
</section>

<section class="card">
  <header>
    <h2>Sensors & animation</h2>
    <p><code>PressedKeys</code>, <code>IsIdle</code>, and <code>AnimationFrames</code> with a live FPS cap.</p>
  </header>
  <Sensors mochi:hydrate />
</section>

<section class="card">
  <header>
    <h2>State machine & async</h2>
    <p>A self-driving <code>FiniteStateMachine</code> traffic light and a debounced <code>resource</code> search over a Mochi API.</p>
  </header>
  <AsyncFsm mochi:hydrate />
</section>