## Demo: charts

### Charts.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import StaticTrafficChart from './StaticTrafficChart.svelte';
  import TrafficChart from './TrafficChart.svelte';
  import HtmlBars from './HtmlBars.svelte';
  import RuntimeDonut from './RuntimeDonut.svelte';
  import Callout from '../../../../docs/_components/Callout.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { highlightCode } from '../../lib/highlight.server';
  import { files } from './files.ts';

  const install = await highlightCode('bun add layerchart', 'bash');

  const themingCss = await highlightCode(
    `/* shell.html — supply the definitions Bun's light-dark() downlevel expects */
:root {
  color-scheme: light dark;
  --buncss-light: initial;
  --buncss-dark: ;
}

/* System preference, unless the user explicitly picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --buncss-light: ;
    --buncss-dark: initial;
  }
}

/* Explicit dark choice, regardless of system preference */
:root[data-theme='dark'] {
  --buncss-light: ;
  --buncss-dark: initial;
}`,
    'css',
  );

  const staticExample = await highlightCode(
    `<script lang="ts">
  import { Chart, Svg, Axis, Bars } from 'layerchart/svg';
  import { traffic } from './data.ts';
${'<'}/script>

<Chart ssr data={traffic} x="month" y="requests" c="requests" cRange={['var(--chart-1)']} width={600} height={220}>
  <Svg viewBox="0 0 600 220">
    <Axis placement="left" grid rule ticks={4} />
    <Axis placement="bottom" rule />
    <Bars fill="var(--chart-1)" />
  </Svg>
</Chart>`,
    'svelte',
  );

  const interactiveExample = await highlightCode(
    `<script lang="ts">
  import { AreaChart } from 'layerchart/svg';
  import { traffic, seriesColors } from './data.ts';

  const series = [
    { key: 'requests', label: 'Requests', color: seriesColors[0] },
    { key: 'cached', label: 'Cache hits', color: seriesColors[2] },
  ];
${'<'}/script>

<!-- No ssr, no width: hydration measures the container. -->
<AreaChart data={traffic} x="month" {series} height={260} props={{ tooltip: { root: { portal: false } } }} />`,
    'svelte',
  );

  const htmlExample = await highlightCode(
    `<script lang="ts">
  import { BarChart } from 'layerchart/html';
  import { traffic, seriesColors } from './data.ts';

  const series = [
    { key: 'requests', label: 'Requests', color: seriesColors[0] },
    { key: 'cached', label: 'Cache hits', color: seriesColors[2] },
  ];
${'<'}/script>

<!-- HTML renderer: real DOM boxes; the BarChart shortcut is fine since ssr is off. -->
<BarChart data={traffic} x="month" {series} seriesLayout="group" legend height={260} />`,
    'svelte',
  );

  const serverComponentExample = await highlightCode(
    `<script lang="ts">
  import { ServerChart } from 'layerchart/server';
  import { Axis, Grid, Spline } from 'layerchart';
  let { data, width, height, capture, onCapture } = $props();
${'<'}/script>

<ServerChart {capture} {onCapture} {width} {height} {data} x="month" y="requests" yDomain={[0, null]}>
  <Grid y />
  <Axis placement="left" rule ticks={4} format={(v) => v / 1000 + 'k'} />
  <Axis placement="bottom" rule />
  <Spline stroke="rgb(59,130,246)" strokeWidth={2} />
</ServerChart>`,
    'svelte',
  );

  const serverRouteExample = await highlightCode(
    `// routes.ts — renders the chart to an image buffer on request
'/demos/charts/traffic.png': Mochi.api(async ({ url }) => {
  // See implementation of serverChart in the tabs below
  const { renderTrafficChart } = await import('./serverChart');
  const format = url.searchParams.get('format') === 'jpeg' ? 'jpeg' : 'png';
  const image = await renderTrafficChart({ width: 640, height: 240, format });
  return new Response(image, { headers: { 'Content-Type': 'image/' + format } });
}),`,
    'typescript',
  );

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

<DemoPage
  title="Charts with LayerChart"
  description="LayerChart renders to plain HTML or SVG, so it server-renders like any other Svelte component. The first chart ships no JavaScript; the rest are islands."
  {sources}
>
  <p>
    Minimal setup: install it, import from <code>layerchart</code>, and Mochi bundles it into whichever island imports it. Full component reference at
    <a href="https://www.layerchart.com" target="_blank" rel="noopener noreferrer">layerchart.com</a>.
  </p>
  <CodeSnippet html={install} />

  <h2>Pure SSR — SVG</h2>
  <p>
    LayerChart can render to pure SVG or HTML by omitting Mochi's hydrate directives. That needs two opt-ins: <code>ssr</code> (LayerChart skips server rendering otherwise) and
    explicit
    <code>width</code>/<code>height</code> to set the dimensions, since nothing resizes the container client side.
  </p>
  <p>
    SVG is recommended for pure SSR graphs: the <code>&lt;Svg&gt;</code> gets a matching <code>viewBox</code>, so the fixed 600&times;220 geometry rescales to any column width with
    CSS alone.
  </p>
  <p>
    It's composed from <code>&lt;Chart&gt;</code> primitives rather than the <code>&lt;BarChart&gt;</code> shortcut: that shortcut's <code>marks</code> snippet shadows its own
    <code>marks</code> prop, which the Svelte server compiler turns into unbounded recursion once <code>ssr</code> forces a server render.
  </p>
  <Callout type="warning">
    <strong>LayerChart's SSR pitfall.</strong> LayerChart doesn't officially support SSR for its SVG and HTML renderers, and its all-in-one chart components (<code
      >&lt;BarChart&gt;</code
    >,
    <code>&lt;AreaChart&gt;</code>, <code>&lt;LineChart&gt;</code>, <code>&lt;PieChart&gt;</code>, <code>&lt;ScatterChart&gt;</code>, <code>&lt;ArcChart&gt;</code>) can't be
    server-rendered — turning on <code>ssr</code> crashes the whole page. For a no-JavaScript chart, build it from the smaller pieces like this one does.
  </Callout>
  <CodeSnippet html={staticExample} />
  <StaticTrafficChart />

  <h2>Theming — light/dark</h2>
  <p>
    LayerChart ships its tooltip, axis, and other default styles pre-coloured with CSS <code>light-dark()</code> so they read correctly in both modes out of the box — you lean on
    that any time you use a LayerChart component without hand-styling its colours, the tooltip most of all. Bun downlevels <code>light-dark()</code> to a
    <code>--buncss-light</code>/<code>--buncss-dark</code> toggle but only defines the pair beside a <code>color-scheme</code> rule in the same stylesheet, which LayerChart doesn't
    ship — so define it once on <code>:root</code> in your shell:
  </p>
  <CodeSnippet html={themingCss} />

  <h2>Interactive — SVG</h2>
  <p>
    The same library imported from <code>layerchart/svg</code>, hydrated via <code>mochi:hydrate</code> — hover the plot for the crosshair and tooltip. Leaving <code>ssr</code> off
    ships an empty frame; omitting
    <code>width</code> (which would override the measured container) is what makes it responsive. The tooltip sets <code>portal: false</code> because LayerChart otherwise portals
    it to <code>&lt;body&gt;</code>, escaping the themed frame and rendering unstyled.
  </p>
  <Callout type="info">
    <strong>Helpers are fine when hydrating.</strong> With <code>ssr</code> off, the marks never render on the server, so the all-in-one components like
    <code>&lt;AreaChart&gt;</code>
    work here — no need to compose from primitives the way the pure-SSR chart does.
  </Callout>
  <CodeSnippet html={interactiveExample} />
  <TrafficChart mochi:hydrate />

  <h2>Interactive — HTML</h2>
  <p>
    Imported from <code>layerchart/html</code>, so the bars are real DOM boxes instead of SVG. This one uses the <code>&lt;BarChart&gt;</code> shortcut — fine here because
    <code>ssr</code> is off, so the marks never render on the server. Hydration measures the container, so it reflows fluidly with no <code>viewBox</code> trick needed.
  </p>
  <CodeSnippet html={htmlExample} />
  <HtmlBars mochi:hydrate />

  <h2>Donut — SVG</h2>
  <p>
    A <code>PieChart</code> with a negative <code>innerRadius</code> and <code>cRange</code> colours; click a legend swatch to toggle a slice. Client-only is usually the better fit for
    a chart: since LayerChart draws nothing server-side anyway, hydrating would server-render an empty container and reconcile it, whereas a client-only island skips the server pass
    entirely and lets you ship real fallback markup — the skeleton below, wiped the moment the component mounts.
  </p>
  <RuntimeDonut mochi:clientOnly>
    <div class="skeleton">Loading chart…</div>
  </RuntimeDonut>

  <h2>Server-rendered image chart</h2>
  <p>
    You can server-render charts as an image (JPEG/PNG) using <code>layerchart/server</code>. This is possible today in Mochi but requires a bit of glue code code, see
    <code>serverChart.ts</code> in the tab view at the bottom of the demo for an example. The general recommendation if you want to go SSR-only is to use the SVG approach in the first
    example.
  </p>
  <CodeSnippet html={serverComponentExample} />
  <CodeSnippet html={serverRouteExample} />
  <img class="server-png" src="/demos/charts/traffic.png" alt="Server-rendered traffic chart, January through December" width="640" height="240" />
</DemoPage>

<style>
  p {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.55;
  }

  p a {
    color: var(--accent);
    font-weight: 600;
  }

  .skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 324px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-subtle);
    font-size: 0.9rem;
  }

  .server-png {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: #fff;
  }

  code {
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
  }
</style>
```

### ChartFrame.svelte
```svelte
<script lang="ts">
  import type { Snippet } from 'svelte';
  let { height = 240, children }: { height?: number; children: Snippet } = $props();
</script>

<div class="chart-frame" style="--frame-h: {height}px">
  {@render children()}
</div>

<style>
  .chart-frame {
    min-height: calc(var(--frame-h) + 1.5rem);
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    overflow-x: auto;

    --chart-1: #4a7c59;
    --chart-2: #b07d4a;
    --chart-3: #4a6f8c;
    --chart-4: #8a7ea8;
  }

  @media (prefers-color-scheme: dark) {
    :global(:root:not([data-theme='light'])) .chart-frame {
      --chart-1: #8ab79a;
      --chart-2: #d0a06a;
      --chart-3: #8aacc8;
      --chart-4: #b3a6d1;
    }
  }

  :global(:root[data-theme='dark']) .chart-frame {
    --chart-1: #8ab79a;
    --chart-2: #d0a06a;
    --chart-3: #8aacc8;
    --chart-4: #b3a6d1;
  }

  .chart-frame :global(.lc-root-container) {
    position: relative;

    --color-primary: var(--chart-1);
    --color-surface-100: var(--surface);
    --color-surface-200: var(--surface-muted);
    --color-surface-300: var(--border);
    --color-surface-content: var(--text);

    font-family: var(--font-sans);
    font-size: 0.78rem;
  }

  .chart-frame :global(.lc-root-container button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
</style>
```

### StaticTrafficChart.svelte
```svelte
<script lang="ts">
  import { Chart, Svg, Axis, Bars } from 'layerchart/svg';
  import ChartFrame from './ChartFrame.svelte';
  import { traffic } from './data.ts';

  // No hydration, so nothing measures the container on the client: `ssr` opts LayerChart into
  // server rendering, and width/height bake the coordinate space at render time. The chart stays
  // responsive anyway because the <Svg> carries a matching `viewBox` — the fixed 600x220 geometry
  // then scales to the column via CSS (see the .lc-root-container override below).
  //
  // Composed from <Chart> primitives rather than the <BarChart> shortcut: that shortcut's `marks`
  // snippet shadows its own `marks` prop, which the Svelte server compiler turns into unbounded
  // recursion once `ssr` forces a server render. See layerchart-repro/ for a standalone repro.
  const WIDTH = 600;
  const HEIGHT = 220;
</script>

<div class="ssr-chart" style="--ar: {WIDTH} / {HEIGHT}">
  <ChartFrame height={HEIGHT}>
    <Chart
      ssr
      data={traffic}
      x="month"
      y="requests"
      yDomain={[0, null]}
      yNice
      c="requests"
      cRange={['var(--chart-1)']}
      bandPadding={0.2}
      width={WIDTH}
      height={HEIGHT}
      padding={{ top: 8, right: 8, bottom: 24, left: 44 }}
    >
      <Svg viewBox="0 0 {WIDTH} {HEIGHT}">
        <Axis placement="left" grid rule ticks={4} format={(v: number) => `${v / 1000}k`} />
        <Axis placement="bottom" rule />
        <Bars fill="var(--chart-1)" fillOpacity={0.85} />
      </Svg>
    </Chart>
  </ChartFrame>
</div>

<style>
  /* The chart's width/height are baked at SSR, so override the fixed px container with a fluid
     one; the <Svg viewBox> scales the 600x220 geometry down to fit any column, no JS involved. */
  .ssr-chart :global(.lc-root-container) {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--ar);
    /* Clip the invisible tooltip-context layer, which sits at the left-padding offset and would
       otherwise overhang the fluid container by a few dozen px. */
    overflow: hidden;
  }

  /* The layer <svg> is inset:0 inside these tooltip-context wrappers, which LayerChart pins to the
     baked 600px width — so the svg fills 600px and overflows. Make the wrappers fluid and the svg
     follows the (now responsive) column. */
  .ssr-chart :global(.lc-tooltip-context),
  .ssr-chart :global(.lc-tooltip-context-container),
  .ssr-chart :global(svg.lc-layout-svg) {
    width: 100% !important;
    height: 100% !important;
  }
</style>
```

### TrafficChart.svelte
```svelte
<script lang="ts">
  import { AreaChart } from 'layerchart/svg';
  import ChartFrame from './ChartFrame.svelte';
  import { traffic, seriesColors } from './data.ts';

  // Height only — `width` is a hard override of the measured container width, so leaving it
  // off is what lets the hydrated chart track the column.
  const HEIGHT = 260;

  const series = [
    { key: 'requests', label: 'Requests', color: seriesColors[0] },
    { key: 'cached', label: 'Cache hits', color: seriesColors[2] },
  ];
</script>

<ChartFrame height={HEIGHT}>
  <AreaChart
    data={traffic}
    x="month"
    {series}
    height={HEIGHT}
    padding={{ top: 8, right: 8, bottom: 24, left: 44 }}
    props={{
      xAxis: { rule: true },
      yAxis: { ticks: 4, format: (v: number) => `${v / 1000}k` },
      // LayerChart portals the tooltip to <body> by default, which would move it out of the
      // frame that maps its theme custom properties and leave it unstyled.
      tooltip: { root: { portal: false } },
    }}
  />
</ChartFrame>
```

### HtmlBars.svelte
```svelte
<script lang="ts">
  import { BarChart } from 'layerchart/html';
  import ChartFrame from './ChartFrame.svelte';
  import { traffic, seriesColors } from './data.ts';

  const HEIGHT = 260;

  const series = [
    { key: 'requests', label: 'Requests', color: seriesColors[0] },
    { key: 'cached', label: 'Cache hits', color: seriesColors[2] },
  ];
</script>

<ChartFrame height={HEIGHT}>
  <!-- Hydrated, so the client measures the container: no `width`, no `ssr` — the frame arrives
       empty and the chart draws (and reflows) once the island boots. Leaving `ssr` off also keeps
       the <BarChart> shortcut usable here; forcing a server render would hit its `marks` recursion. -->
  <BarChart
    data={traffic}
    x="month"
    {series}
    seriesLayout="group"
    legend
    height={HEIGHT}
    padding={{ top: 8, right: 8, bottom: 56, left: 44 }}
    props={{
      xAxis: { rule: true },
      yAxis: { ticks: 4, format: (v: number) => `${v / 1000}k` },
      tooltip: { root: { portal: false } },
    }}
  />
</ChartFrame>
```

### RuntimeDonut.svelte
```svelte
<script lang="ts">
  import type { ClientOnlyProps } from 'mochi-framework';
  import { PieChart } from 'layerchart/svg';
  import ChartFrame from './ChartFrame.svelte';
  import { runtimes, seriesColors } from './data.ts';

  let { height = 300 }: ClientOnlyProps<{ height?: number }> = $props();
</script>

<ChartFrame {height}>
  <PieChart
    data={runtimes}
    key="stage"
    value="ms"
    cRange={seriesColors}
    innerRadius={-36}
    cornerRadius={2}
    padAngle={0.02}
    legend
    {height}
    padding={{ bottom: 40 }}
    props={{ tooltip: { root: { portal: false } } }}
  />
</ChartFrame>
```

### ServerTrafficChart.svelte
```svelte
<script lang="ts">
  import { ServerChart } from 'layerchart/server';
  import type { CaptureTarget } from 'layerchart/server';
  import { Axis, Grid, Spline } from 'layerchart';
  import type { TrafficPoint } from './data.ts';

  let {
    data,
    width,
    height,
    capture,
    onCapture,
  }: {
    data: TrafficPoint[];
    width: number;
    height: number;
    capture?: CaptureTarget;
    onCapture?: (data: CaptureTarget) => void;
  } = $props();
</script>

<ServerChart {capture} {onCapture} {width} {height} {data} x="month" y="requests" yDomain={[0, null]} padding={{ top: 16, right: 20, bottom: 28, left: 48 }}>
  <Grid y stroke="rgba(148,163,184,0.3)" />
  <Axis placement="left" rule ticks={4} format={(v: number) => `${v / 1000}k`} stroke="rgba(100,116,139,0.4)" fill="rgba(71,85,105,0.9)" />
  <Axis placement="bottom" rule stroke="rgba(100,116,139,0.4)" fill="rgba(71,85,105,0.9)" />
  <Spline stroke="rgb(59,130,246)" strokeWidth={2} />
</ServerChart>
```

### serverChart.ts
```ts
import path from 'node:path';
import { compile, compileModule } from 'svelte/compiler';
import { createCanvas, Path2D } from '@napi-rs/canvas';
import { traffic } from './data.ts';

// renderChart draws the marks with Path2D and expects it on globalThis.
if (typeof globalThis.Path2D === 'undefined') {
  (globalThis as { Path2D?: unknown }).Path2D = Path2D;
}

export type ChartFormat = 'png' | 'jpeg';

type ChartBundle = {
  renderChart: (
    component: unknown,
    options: { width: number; height: number; format: ChartFormat; background: string; props: object; createCanvas: (w: number, h: number) => unknown },
  ) => Uint8Array;
  ServerTrafficChart: unknown;
};

// Mochi can't import `.svelte` in server code, so compile the ServerChart tree to a JS bundle here.
// `.svelte.js` rune modules (layerchart's chart state) need compileModule, not compile.
const svelteServerPlugin: import('bun').BunPlugin = {
  name: 'svelte-server',
  setup(build) {
    build.onLoad({ filter: /\.svelte$/ }, async ({ path: f }) => ({
      contents: compile(await Bun.file(f).text(), { generate: 'server', filename: f }).js.code,
      loader: 'js',
    }));
    build.onLoad({ filter: /\.svelte\.[jt]s$/ }, async ({ path: f }) => ({
      contents: compileModule(await Bun.file(f).text(), { generate: 'server', filename: f }).js.code,
      loader: 'js',
    }));
  },
};

let bundle: Promise<ChartBundle> | undefined;
async function loadBundle(): Promise<ChartBundle> {
  const result = await Bun.build({
    entrypoints: [path.join(import.meta.dir, 'serverChartBundle.ts')],
    plugins: [svelteServerPlugin],
    target: 'bun',
    conditions: ['svelte'],
    external: ['svelte', 'svelte/*'],
    outdir: path.join(import.meta.dir, '..', '..', '..', '.mochi', 'serverchart'),
    throw: true,
  });
  return import(result.outputs[0]!.path) as Promise<ChartBundle>;
}

export async function renderTrafficChart(opts: { width: number; height: number; format: ChartFormat }): Promise<Uint8Array<ArrayBuffer>> {
  const { renderChart, ServerTrafficChart } = await (bundle ??= loadBundle());
  const bytes = renderChart(ServerTrafficChart, {
    width: opts.width,
    height: opts.height,
    format: opts.format,
    background: 'white',
    props: { data: traffic },
    createCanvas,
  });
  // Copy into an ArrayBuffer-backed view so it satisfies Response's BodyInit.
  return new Uint8Array(bytes);
}
```

### serverChartBundle.ts
```ts
// Bun.build entrypoint only — never imported at runtime. Bundling renderChart together with the
// chart means the compiled output carries no `.svelte` import, which Mochi's server runtime can't
// load. serverChart.ts compiles this with a Svelte plugin and imports the pure-JS result.
export { renderChart } from 'layerchart/server';
export { default as ServerTrafficChart } from './ServerTrafficChart.svelte';
```

### data.ts
```ts
export type TrafficPoint = { month: string; requests: number; cached: number };

export const traffic: TrafficPoint[] = [
  { month: 'Jan', requests: 1240, cached: 820 },
  { month: 'Feb', requests: 1380, cached: 940 },
  { month: 'Mar', requests: 1610, cached: 1170 },
  { month: 'Apr', requests: 1520, cached: 1090 },
  { month: 'May', requests: 1840, cached: 1390 },
  { month: 'Jun', requests: 2110, cached: 1660 },
  { month: 'Jul', requests: 2340, cached: 1880 },
  { month: 'Aug', requests: 2280, cached: 1810 },
  { month: 'Sep', requests: 2560, cached: 2040 },
  { month: 'Oct', requests: 2890, cached: 2350 },
  { month: 'Nov', requests: 3120, cached: 2580 },
  { month: 'Dec', requests: 3410, cached: 2870 },
];

export type RuntimeSlice = { stage: string; ms: number };

export const runtimes: RuntimeSlice[] = [
  { stage: 'Server render', ms: 42 },
  { stage: 'Island hydration', ms: 27 },
  { stage: 'Asset transfer', ms: 19 },
  { stage: 'Idle', ms: 12 },
];

// Passed straight into LayerChart's `color` / `cRange` props, which write them into `fill`
// and `stroke` attributes. Custom properties inherit into SVG, so they resolve against
// `.chart-frame` and follow the site's theme toggle without any JavaScript.
export const seriesColors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)'];
```

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

export const routes: Record<string, MochiRouteValue> = {
  '/demos/charts': Mochi.page('./src/demos/charts/Charts.svelte'),
  '/demos/charts/traffic.png': Mochi.api(async ({ url }) => {
    const { renderTrafficChart } = await import('./serverChart');
    const width = Number(url.searchParams.get('width') ?? 640);
    const height = Number(url.searchParams.get('height') ?? 240);
    const format = url.searchParams.get('format') === 'jpeg' ? 'jpeg' : 'png';
    const image = await renderTrafficChart({ width, height, format });
    return new Response(image, {
      headers: { 'Content-Type': `image/${format}`, 'Cache-Control': 'public, max-age=3600' },
    });
  }),
};
```

### 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');
```