@botiverse/porthole 0.0.1 → 0.1.0

package/src/conformance/served.ts

@@ -0,0 +1,472 @@
+/**
+ * The served modes' conformance cases (P016, P020): domain mode and url mode, probed in a real
+ * browser against a host's own serving. A host implements `ServedConformanceHost` (show an
+ * instance the way it does: located through its backend, framed under the config's policy), then
+ * registers the cases in its Playwright project:
+ *
+ *   import { test } from "@playwright/test";
+ *   import { defineServedSuite } from "@botiverse/porthole/conformance";
+ *   defineServedSuite(test, myServedHost);
+ *
+ * Each case attempts one escape or access channel and asserts, with an out-of-band oracle where
+ * one exists (a canary URL the host counts requests to), that nothing got through.
+ */
+import { expect, type Frame, type Page, type TestType } from "@playwright/test";
+import type { EgressConfig } from "../config/schema.ts";
+import type { FrameLocation, InstanceRef } from "../isolation/types.ts";
+import { MCP_APPS_METHODS } from "../protocol/mcp-apps.ts";
+
+/** One served display, as the host shows it. */
+export interface ServedDisplay {
+  /** The content origin the frame was located on. */
+  readonly origin: string;
+  /** The display's frame, once its document loaded. */
+  frame(): Promise<Frame>;
+  /** Removes the frame. */
+  destroy(): Promise<void>;
+  /** Posts `message` to the frame as the host does (to the frame's window, at its origin). */
+  post(message: unknown): Promise<void>;
+  /** The messages the host took from the frame so far (from its window and origin only). */
+  received(): Promise<readonly unknown[]>;
+}
+
+/** What a host implements to run the served-mode cases against its integration. */
+export interface ServedConformanceHost {
+  readonly name: string;
+  /**
+   * Shows `instance` in `page` as the host does: a fresh ticket from its backend, framed under
+   * the config's sandbox, in an embedding page that sends the config's `embedderCsp`. The same page
+   * may show several, one after another.
+   */
+  show(page: Page, instance: InstanceRef): Promise<ServedDisplay>;
+  /** A fresh ticketed location for `instance`, as the host's backend issues it. */
+  locate(instance: InstanceRef): Promise<FrameLocation>;
+  /** Navigates `page` to a page on an origin that is not one of the host's, framing `url`. */
+  frameFromForeignOrigin(page: Page, url: string): Promise<void>;
+  /** A URL whose requests the host counts, on an origin that is neither the host's nor content's. */
+  canary(name: string): Promise<string>;
+  /** How many requests reached `canary(name)`. */
+  canaryHits(name: string): Promise<number>;
+  /** A served shell (domain isolation) for `scope`. */
+  shell(scope: string): InstanceRef;
+  /**
+   * A url-mode app for `scope`: its page loads a script from its own origin that sets
+   * `document.documentElement.dataset.app = "ready"`.
+   */
+  app(scope: string): InstanceRef;
+  /**
+   * A stored artifact page (domain isolation) for `scope`: version `"1"` and `"2"` of one page,
+   * each with `<main id="artifact">version N</main>` and a script that records
+   * `document.documentElement.dataset.rtc = typeof RTCPeerConnection`.
+   */
+  artifact(scope: string, version: "1" | "2"): InstanceRef;
+  /** The MCP Apps sandbox proxy (domain isolation) for `scope`, opening the view's `egress`. */
+  proxy(scope: string, egress?: EgressConfig): InstanceRef;
+}
+
+export interface ServedSuiteOptions {
+  /** Case ids to skip, each with the reason (shown in the report). */
+  readonly skip?: Readonly<Record<string, string>>;
+}
+
+type Fixtures = { page: Page; browserName: string };
+
+const SETTLE_MS = 800;
+
+/** What the frame can see of its host: everything here must be closed to it. */
+async function reachIntoHost(frame: Frame): Promise<Record<string, string>> {
+  return frame.evaluate(() => {
+    const attempt = (read: () => string | null | undefined): string => {
+      try {
+        const value = read();
+        return value === undefined || value === null ? "empty" : `read: ${value}`;
+      } catch {
+        return "blocked";
+      }
+    };
+    return {
+      parentDocument: attempt(() => window.parent.document.title),
+      topLocation: attempt(() => window.top?.location.href),
+      parentStorage: attempt(() => window.parent.localStorage.getItem("porthole-probe")),
+      ownStorage: attempt(() => window.localStorage.getItem("porthole-probe")),
+      cookie: attempt(() => (document.cookie.includes("porthole-probe") ? document.cookie : null)),
+      referrer: attempt(() => document.referrer || null),
+    };
+  });
+}
+
+const CLOSED = {
+  parentDocument: "blocked",
+  topLocation: "blocked",
+  parentStorage: "blocked",
+  ownStorage: "empty",
+  cookie: "empty",
+  referrer: "empty",
+};
+
+/**
+ * A view as an MCP Apps server would send it, speaking the protocol by hand: it asks its parent to
+ * initialize, and reports what its realm offers and whether a fetch got out.
+ */
+const PROBE_VIEW = (canary: string) => `<!doctype html><html><head><title>View</title></head><body>
+<p id="view">A view.</p>
+<script>
+  document.documentElement.dataset.rtc = typeof RTCPeerConnection;
+  window.parent.postMessage({ jsonrpc: "2.0", id: 1, method: "ui/initialize", params: { protocolVersion: "2026-01-26", appInfo: { name: "probe", version: "1" }, appCapabilities: {} } }, "*");
+  fetch(${JSON.stringify(canary)}, { mode: "no-cors" }).then(
+    () => { document.documentElement.dataset.fetch = "sent"; },
+    () => { document.documentElement.dataset.fetch = "blocked"; },
+  );
+</script></body></html>`;
+
+const methodsOf = (messages: readonly unknown[]): string[] =>
+  messages.flatMap((message) =>
+    message !== null &&
+    typeof message === "object" &&
+    typeof (message as { method?: unknown }).method === "string"
+      ? [(message as { method: string }).method]
+      : [],
+  );
+
+/** Marks the host page with secrets the content must not see. */
+async function plantHostSecrets(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    localStorage.setItem("porthole-probe", "host-secret");
+    document.cookie = "porthole-probe=host-secret; Path=/";
+  });
+}
+
+/** Registers every served-mode case as a test. */
+export function defineServedSuite(
+  test: TestType<object, object>,
+  host: ServedConformanceHost,
+  options: ServedSuiteOptions = {},
+): void {
+  const typed = test as unknown as TestType<Fixtures, object>;
+  const define = (id: string, title: string, body: (fixtures: Fixtures) => Promise<void>) => {
+    const reason = options.skip?.[id];
+    // Playwright reads the fixtures a test uses from its parameter's destructuring.
+    typed(`${id}: ${title}`, async ({ page, browserName }) => {
+      typed.skip(reason !== undefined, reason);
+      await body({ page, browserName });
+    });
+  };
+
+  typed.describe(`served modes (${host.name})`, () => {
+    const modes = [
+      ["domain", (scope: string) => host.shell(scope)],
+      ["url", (scope: string) => host.app(scope)],
+    ] as const;
+
+    for (const [mode, instance] of modes) {
+      define(
+        `served.${mode}.origin`,
+        "content runs on its own origin, never the host's",
+        async ({ page }) => {
+          const display = await host.show(page, instance(`${mode}-origin`));
+          const frame = await display.frame();
+          const origin = await frame.evaluate(() => window.origin);
+          expect(origin).toBe(display.origin);
+          expect(origin).not.toBe(new URL(page.url()).origin);
+        },
+      );
+
+      define(
+        `served.${mode}.no-reach`,
+        "content can't reach the host's DOM, storage, cookies or URL",
+        async ({ page }) => {
+          const display = await host.show(page, instance(`${mode}-reach`));
+          await plantHostSecrets(page);
+          expect(await reachIntoHost(await display.frame())).toEqual(CLOSED);
+        },
+      );
+
+      define(
+        `served.${mode}.no-top-navigation`,
+        "content can't navigate the host's page, even after a click",
+        async ({ page }) => {
+          const display = await host.show(page, instance(`${mode}-top`));
+          const frame = await display.frame();
+          const before = page.url();
+          const target = await host.canary(`${mode}-top`);
+          await frame.evaluate((url) => {
+            const button = document.createElement("button");
+            button.id = "porthole-probe-top";
+            button.textContent = "go";
+            button.addEventListener("click", () => {
+              try {
+                window.top!.location.href = url;
+              } catch {
+                // Blocked: what we want.
+              }
+            });
+            document.body.append(button);
+            try {
+              window.top!.location.href = url;
+            } catch {
+              // Blocked.
+            }
+          }, target);
+          await frame.click("#porthole-probe-top");
+          await page.waitForTimeout(SETTLE_MS);
+          expect(page.url()).toBe(before);
+          expect(await host.canaryHits(`${mode}-top`)).toBe(0);
+        },
+      );
+
+      define(
+        `served.${mode}.no-popups`,
+        "content can't open a window, even after a click",
+        async ({ page }) => {
+          const display = await host.show(page, instance(`${mode}-popup`));
+          const frame = await display.frame();
+          const target = await host.canary(`${mode}-popup`);
+          const opened: Page[] = [];
+          page.context().on("page", (each) => opened.push(each));
+          const programmatic = await frame.evaluate((url) => {
+            const button = document.createElement("button");
+            button.id = "porthole-probe-popup";
+            button.textContent = "open";
+            // Without allow-popups, Chromium and WebKit return null; Firefox throws. Both refuse.
+            const open = () => {
+              try {
+                return window.open(url) !== null;
+              } catch {
+                return false;
+              }
+            };
+            button.addEventListener("click", () => {
+              document.body.dataset.popup = String(open());
+            });
+            document.body.append(button);
+            return open();
+          }, target);
+          await frame.click("#porthole-probe-popup");
+          await page.waitForTimeout(SETTLE_MS);
+          expect(programmatic).toBe(false);
+          expect(await frame.evaluate(() => document.body.dataset.popup)).toBe("false");
+          expect(opened).toHaveLength(0);
+          expect(await host.canaryHits(`${mode}-popup`)).toBe(0);
+        },
+      );
+    }
+
+    define(
+      "served.domain.storage-scope",
+      "storage persists within a scope and is never shared across scopes",
+      async ({ page }) => {
+        const first = await host.show(page, host.shell("scope-a"));
+        await (await first.frame()).evaluate(() => localStorage.setItem("kept", "a"));
+        await first.destroy();
+        const again = await host.show(page, host.shell("scope-a"));
+        expect(await (await again.frame()).evaluate(() => localStorage.getItem("kept"))).toBe("a");
+        expect(again.origin).toBe(first.origin);
+        const other = await host.show(page, host.shell("scope-b"));
+        expect(other.origin).not.toBe(first.origin);
+        expect(await (await other.frame()).evaluate(() => localStorage.getItem("kept"))).toBeNull();
+      },
+    );
+
+    define(
+      "served.artifact.versions",
+      "each version of a page shows as stored, on its scope's origin, hardened before it runs",
+      async ({ page }) => {
+        const one = await host.show(page, host.artifact("artifact-scope", "1"));
+        const two = await host.show(page, host.artifact("artifact-scope", "2"));
+        expect(two.origin).toBe(one.origin);
+        for (const [display, version] of [
+          [one, "1"],
+          [two, "2"],
+        ] as const) {
+          const frame = await display.frame();
+          await expect(frame.locator("#artifact")).toHaveText(`version ${version}`);
+          expect(await frame.evaluate(() => document.documentElement.dataset.rtc)).toBe(
+            "undefined",
+          );
+        }
+      },
+    );
+
+    define(
+      "served.domain.ticket-once",
+      "a ticket opens its content once; without it there is nothing",
+      async ({ page, browserName }) => {
+        const location = await host.locate(host.shell("ticket-once"));
+        const first = await page.goto(location.url);
+        expect(first?.status()).toBe(200);
+        // A fresh browser state: no cookie, only the used ticket.
+        const fresh = await page.context().browser()!.newContext();
+        try {
+          const other = await fresh.newPage();
+          const again = await other.goto(location.url);
+          expect(again?.status(), browserName).toBe(401);
+          expect(await other.locator("#porthole-root").count()).toBe(0);
+        } finally {
+          await fresh.close();
+        }
+      },
+    );
+
+    define(
+      "served.domain.frame-ancestors",
+      "only the host's origins may frame content",
+      async ({ page }) => {
+        const location = await host.locate(host.shell("foreign"));
+        await host.frameFromForeignOrigin(page, location.url);
+        await page.waitForTimeout(SETTLE_MS);
+        for (const frame of page.frames().slice(1)) {
+          // A refused frame shows the engine's error page, which Firefox never lets a script
+          // finish in: a frame that doesn't answer in time showed nothing of the content.
+          const unreachable = { origin: "unreachable", root: false };
+          const shown = await Promise.race([
+            frame
+              .evaluate(() => ({
+                origin: window.origin,
+                root: document.getElementById("porthole-root") !== null,
+              }))
+              .catch(() => unreachable),
+            new Promise<typeof unreachable>((resolve) =>
+              setTimeout(() => resolve(unreachable), 3_000),
+            ),
+          ]);
+          expect(shown.root).toBe(false);
+          expect(shown.origin).not.toBe(location.origin);
+        }
+      },
+    );
+
+    define(
+      "served.domain.egress",
+      "the CSP in the document's headers closes egress",
+      async ({ page }) => {
+        const display = await host.show(page, host.shell("egress"));
+        const frame = await display.frame();
+        const fetched = await frame.evaluate(
+          async (url) => {
+            try {
+              await fetch(url, { mode: "no-cors" });
+              return "sent";
+            } catch {
+              return "blocked";
+            }
+          },
+          await host.canary("egress-fetch"),
+        );
+        await frame.evaluate(
+          (url) => {
+            const image = new Image();
+            image.src = url;
+            document.body.append(image);
+          },
+          await host.canary("egress-img"),
+        );
+        await page.waitForTimeout(SETTLE_MS);
+        expect(fetched).toBe("blocked");
+        expect(await host.canaryHits("egress-fetch")).toBe(0);
+        expect(await host.canaryHits("egress-img")).toBe(0);
+      },
+    );
+
+    const resourceReady = (html: string) => ({
+      jsonrpc: "2.0",
+      method: MCP_APPS_METHODS.sandboxResourceReady,
+      params: { html },
+    });
+    const proxyReady = async (display: ServedDisplay) =>
+      expect
+        .poll(async () => methodsOf(await display.received()))
+        .toContain(MCP_APPS_METHODS.sandboxProxyReady);
+
+    define(
+      "served.proxy.view",
+      "the sandbox proxy becomes the view, hardened, talking to its host directly",
+      async ({ page }) => {
+        const display = await host.show(page, host.proxy("proxy-view"));
+        await proxyReady(display);
+        const canary = await host.canary("proxy-undeclared");
+        await display.post(resourceReady(PROBE_VIEW(canary)));
+        const frame = await display.frame();
+        await expect(frame.locator("#view")).toHaveText("A view.");
+        await expect
+          .poll(async () => methodsOf(await display.received()))
+          .toContain(MCP_APPS_METHODS.initialize);
+        await expect(frame.locator("html")).toHaveAttribute("data-fetch", "blocked");
+        expect(
+          await frame.evaluate(() => [window.origin, document.documentElement.dataset.rtc]),
+        ).toEqual([display.origin, "undefined"]);
+        expect(await host.canaryHits("proxy-undeclared")).toBe(0);
+      },
+    );
+
+    define(
+      "served.proxy.parent-only",
+      "the sandbox proxy takes a view only from its host",
+      async ({ page }) => {
+        const display = await host.show(page, host.proxy("proxy-parent"));
+        await proxyReady(display);
+        const frame = await display.frame();
+        await frame.evaluate(
+          (message) => window.postMessage(message, "*"),
+          resourceReady('<p id="view">Not from the host.</p>'),
+        );
+        await page.waitForTimeout(SETTLE_MS);
+        expect(await frame.locator("#view").count()).toBe(0);
+      },
+    );
+
+    define(
+      "served.proxy.egress",
+      "the sandbox proxy opens what the view declares, and nothing else",
+      async ({ page }) => {
+        const canary = await host.canary("proxy-declared");
+        const display = await host.show(
+          page,
+          host.proxy("proxy-egress", { connect: [new URL(canary).origin] }),
+        );
+        await proxyReady(display);
+        await display.post(resourceReady(PROBE_VIEW(canary)));
+        const frame = await display.frame();
+        await expect(frame.locator("html")).toHaveAttribute("data-fetch", "sent");
+        expect(await host.canaryHits("proxy-declared")).toBe(1);
+      },
+    );
+
+    define(
+      "served.url.ticket",
+      "an app shows nothing to a browser without its ticket's cookie",
+      async ({ page }) => {
+        const location = await host.locate(host.app("url-ticket"));
+        const bare = await page.goto(`${location.origin}/`);
+        expect(bare?.status()).toBe(401);
+        expect(await page.evaluate(() => document.documentElement.dataset.app ?? null)).toBeNull();
+      },
+    );
+
+    define(
+      "served.url.tab",
+      "an app opened on a tab of its own runs, its requests riding on its cookie",
+      async ({ page }) => {
+        const location = await host.locate(host.app("url-tab"));
+        await page.goto(location.url);
+        await expect(page.locator("html")).toHaveAttribute("data-app", "ready");
+      },
+    );
+
+    define(
+      "served.url.framed",
+      "a framed app's own requests ride on its partitioned cookie",
+      async ({ page, browserName }) => {
+        // Measured (P025): WebKit keeps no cookie in a cross-site frame, partitioned or not, so a
+        // framed app's subresources are refused there; such hosts open the app on a tab.
+        typed.fail(browserName === "webkit", "WebKit keeps no cookie in a cross-site frame");
+        const display = await host.show(page, host.app("url-framed"));
+        const frame = await display.frame();
+        await expect
+          .poll(() => frame.evaluate(() => document.documentElement.dataset.app ?? null), {
+            timeout: 3_000,
+          })
+          .toBe("ready");
+      },
+    );
+  });
+}

package/src/guide/examples.ts

@@ -0,0 +1,74 @@
+/**
+ * The manual's examples, each a whole widget. They use only the default theme's variables and no
+ * network, so they render under every preset; the leak suite renders each through the real
+ * sandbox at phone and desktop widths, in light and dark, and measures its text (the examples are
+ * conformance cases, PRINCIPLE 10).
+ */
+export const GUIDE_EXAMPLES = {
+  /** Stat cards that wrap: three across on a desktop, fewer on a phone. */
+  stats: `<style>
+  .stats { display: flex; flex-wrap: wrap; gap: 8px; }
+  .stat { flex: 1 1 100px; background: var(--color-background-secondary); border: var(--border-width-regular) solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 12px 16px; }
+  .stat div { font-size: var(--font-text-sm-size); color: var(--color-text-secondary); }
+  .stat b { font-size: var(--font-heading-md-size); font-weight: var(--font-weight-semibold); }
+</style>
+<div class="stats">
+  <div class="stat"><div>Monthly cost</div><b>$1,240</b></div>
+  <div class="stat"><div>Failed builds</div><b>2.4%</b></div>
+</div>`,
+
+  /** A diagram drawn for the phone: top to bottom, two boxes a row at most, scaled at most 1.25×. */
+  diagram: `<div style="font-weight: var(--font-weight-semibold); margin-bottom: 8px">Uploads reach storage only through the API</div>
+<svg viewBox="0 0 320 260" width="100%" style="max-width: 400px" font-size="13" role="img" aria-label="Uploads reach storage only through the API">
+  <defs><marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" fill="var(--color-text-tertiary)"/></marker></defs>
+  <g fill="none" stroke="var(--color-border-secondary)" stroke-width="1.25"><rect x="16" y="8" width="136" height="52" rx="8"/><rect x="168" y="8" width="136" height="52" rx="8"/><rect x="16" y="200" width="136" height="52" rx="8"/><rect x="168" y="200" width="136" height="52" rx="8"/></g>
+  <rect x="16" y="104" width="288" height="52" rx="8" fill="var(--color-chart-1)" fill-opacity="0.12" stroke="var(--color-chart-1)" stroke-width="2"/>
+  <g fill="none" stroke="var(--color-text-tertiary)" stroke-width="1.25" marker-end="url(#arrow)"><path d="M84 60V102"/><path d="M236 60V102"/><path d="M84 156V198"/><path d="M236 156V198"/></g>
+  <g text-anchor="middle" font-size="14" font-weight="600" fill="var(--color-text-primary)"><text x="84" y="30">Phone app</text><text x="236" y="30">Web app</text><text x="160" y="126">API server</text><text x="84" y="222">Object storage</text><text x="236" y="222">Database</text></g>
+  <g text-anchor="middle" fill="var(--color-text-secondary)"><text x="84" y="48">iOS, Android</text><text x="236" y="48">any browser</text><text x="160" y="144">checks every upload</text><text x="84" y="240">the files</text><text x="236" y="240">who sent what</text></g>
+  <g fill="var(--color-text-secondary)"><text x="92" y="86">HTTPS</text><text x="244" y="86">HTTPS</text><text x="92" y="182">writes</text><text x="244" y="182">records</text></g>
+</svg>`,
+
+  /** A line chart drawn at the frame's width (1 unit = 1 px), its numbers on a tap. */
+  line: `<style>
+  .note { font-size: var(--font-text-sm-size); color: var(--color-text-secondary); }
+</style>
+<div style="font-weight: var(--font-weight-semibold)">Failed builds fell from 9 to 2 a week</div>
+<div class="note">Builds per week, last 8 weeks</div>
+<div class="note"><b style="color: var(--color-chart-1)">━</b> Failed &nbsp; <b style="color: var(--color-text-disabled)">━</b> All builds</div>
+<div id="plot" style="height: 200px"></div>
+<div class="note" id="readout"></div>
+<script>
+  const rows = [["W1", 41, 9], ["W2", 44, 8], ["W3", 39, 7], ["W4", 47, 6], ["W5", 52, 4], ["W6", 49, 3], ["W7", 55, 3], ["W8", 58, 2]];
+  const series = [[1, "builds", "var(--color-text-disabled)"], [2, "failed", "var(--color-chart-1)"]];
+  const plot = document.getElementById("plot");
+  const show = (i) => (document.getElementById("readout").textContent = \`\${rows[i][0]}: \${series.map(([at, name]) => \`\${rows[i][at]} \${name}\`).join(", ")}\`);
+  function draw() {
+    const w = plot.clientWidth, h = plot.clientHeight, left = 36, base = h - 24;
+    const x = (i) => left + 12 + (i * (w - left - 36)) / (rows.length - 1);
+    const y = (v) => base - (v / 60) * (base - 8);
+    const step = Math.ceil((rows.length * 44) / w); // x labels at least 44 px apart
+    let svg = \`<svg width="\${w}" height="\${h}" font-size="12" fill="var(--color-text-secondary)">\`;
+    for (const v of [0, 30, 60]) svg += \`<line x1="\${left}" x2="\${w}" y1="\${y(v)}" y2="\${y(v)}" stroke="var(--color-border-tertiary)"/><text x="\${left - 6}" y="\${y(v) + 4}" text-anchor="end">\${v}</text>\`;
+    rows.forEach((row, i) => { if (i % step === 0) svg += \`<text x="\${x(i)}" y="\${h - 6}" text-anchor="middle">\${row[0]}</text>\`; });
+    for (const [at, , color] of series) svg += \`<polyline points="\${rows.map((row, i) => \`\${x(i)},\${y(row[at])}\`).join(" ")}" fill="none" stroke="\${color}" stroke-width="2"/>\`;
+    // The two values the title rests on; then a column per week to tap.
+    for (const i of [0, rows.length - 1]) svg += \`<text x="\${x(i)}" y="\${y(rows[i][2]) - 10}" text-anchor="middle" fill="var(--color-text-primary)">\${rows[i][2]}</text>\`;
+    const band = (w - left) / rows.length;
+    rows.forEach((row, i) => (svg += \`<rect data-i="\${i}" x="\${x(i) - band / 2}" width="\${band}" height="\${base}" fill="transparent"/>\`));
+    plot.innerHTML = svg + "</svg>";
+  }
+  plot.addEventListener("click", (event) => event.target.dataset.i && show(Number(event.target.dataset.i)));
+  show(rows.length - 1);
+  new ResizeObserver(draw).observe(plot);
+</script>`,
+
+  /** Horizontal bars in HTML: no SVG, so they read at any width. */
+  bars: `<div style="display: grid; grid-template-columns: 5em 1fr 3em; gap: 8px; align-items: center; font-size: var(--font-text-sm-size)">
+  <span>Web</span><div style="height: 12px; width: 100%; background: var(--color-chart-1)"></div><span>412</span>
+  <span>iOS</span><div style="height: 12px; width: 77%; background: var(--color-text-disabled)"></div><span>318</span>
+  <span>Docs</span><div style="height: 12px; width: 16%; background: var(--color-text-disabled)"></div><span>64</span>
+</div>`,
+} as const;
+
+export type GuideExample = keyof typeof GUIDE_EXAMPLES;