@runbun/astro 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stefan Kopco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,34 @@
-# Temporary Holding Version
+# @runbun/astro
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Code blocks for Astro 7, highlighted at build time with [@pierre/highlights](https://diffs.com/highlights), that turn
+into a runnable Bun playground ([runbun.dev](https://runbun.dev)) when a reader clicks Run.
+
+```sh
+bun add @runbun/astro
+```
+
+```js
+// astro.config.mjs
+import { unified } from "@astrojs/markdown-remark";
+import runbun from "@runbun/astro";
+import remarkRunbun from "@runbun/astro/remark";
+
+export default defineConfig({
+  integrations: [runbun()],
+  markdown: { processor: unified({ remarkPlugins: [remarkRunbun] }) },
+});
+```
+
+```mdx
+import { Code } from "@runbun/astro/components";
+
+<Code lang="ts" title="index.ts" code={`console.log(Bun.version);`} />
+<Code playground mode="code" title="index.ts" code={`console.log(Bun.version);`} />
+```
+
+In Markdown, a ` ```ts playground ` fence does the same. Options, themes and fences:
+[docs.runbun.dev/guides/astro](https://docs.runbun.dev/guides/astro/).
+
+The package is MIT-licensed (see LICENSE). The playground it embeds is a hosted service at runbun.dev with its own terms.
+
+runbun is an independent project, not affiliated with or endorsed by Oven or Bun.

package/components/Code.astro

@@ -0,0 +1,37 @@
+---
+// A code block highlighted at build time with @pierre/highlights in the page's code theme. Static by default; with
+// `playground` it gets a Run button that turns it into an embed (Playground.astro) with the code as its file, and
+// every embed option passes through. `title` names the file, as in a fence. With `files` the block has a tab per file,
+// and so does the embed.
+import { config } from "virtual:@runbun/astro/config";
+import { codeBlock, codeTabs, cssLink, EXT, langOf, withEntry, withTabs } from "../dist/markup.js";
+import Playground, { type Props as PlaygroundProps } from "./Playground.astro";
+
+export type Props = Omit<PlaygroundProps, "title"> & {
+  code: string;
+  lang?: string;
+  title?: string;
+  playground?: boolean;
+};
+const { code, lang = "ts", title, playground, files = {}, expand = "full", features, ...options } = Astro.props;
+const file = title || `index.${EXT[lang] ?? lang}`;
+const extra = Object.entries(files).map(([name, text]) => ({ name, code: text, lang: langOf(name) }));
+const block = extra.length ? codeTabs([{ name: file, code, lang }, ...extra], options.file ?? file) : codeBlock(code, lang, title);
+---
+
+<Fragment set:html={cssLink(config.base)} />
+{
+  playground ? (
+    <Playground
+      file={file}
+      {...options}
+      features={extra.length ? withTabs(features) : features}
+      expand={expand}
+      files={withEntry({ [file]: code, ...files }, file)}
+    >
+      <Fragment set:html={block} />
+    </Playground>
+  ) : (
+    <Fragment set:html={block} />
+  )
+}

package/components/Playground.astro

@@ -0,0 +1,51 @@
+---
+// A runnable embed. The default slot is the poster (shown until the embed is ready); `files` become inline sources.
+// In Markdown, ```ts playground fences do the same (../dist/remark.js).
+import { config } from "virtual:@runbun/astro/config";
+import { embedScripts, fileScript } from "../dist/markup.js";
+
+export interface Props {
+  mode?: "code" | "preview" | "console" | "full" | "result";
+  features?: string;
+  file?: string;
+  autorun?: boolean;
+  theme?: string;
+  readonly?: boolean;
+  persist?: string;
+  example?: string;
+  repo?: string;
+  share?: string;
+  load?: "eager" | "visible" | "click";
+  height?: string;
+  title?: string;
+  /** A button that opens the embed in a modal: true, or a mode to switch to while open ("full"). */
+  expand?: boolean | "code" | "preview" | "console" | "full" | "result";
+  files?: Record<string, string>;
+}
+const { files = {}, load = "click", ...attrs } = Astro.props;
+const bool = (v: unknown) => (v === undefined ? undefined : v ? "" : undefined);
+---
+
+<!-- not-content: Starlight's spacing between content elements would push the poster down below the file scripts. -->
+<bun-playground
+  class="not-content"
+  load={load}
+  mode={attrs.mode}
+  features={attrs.features}
+  file={attrs.file}
+  autorun={attrs.autorun === undefined ? undefined : String(attrs.autorun)}
+  theme={attrs.theme}
+  readonly={bool(attrs.readonly)}
+  persist={attrs.persist}
+  example={attrs.example}
+  repo={attrs.repo}
+  share={attrs.share}
+  height={attrs.height}
+  title={attrs.title}
+  expand={attrs.expand === undefined || attrs.expand === false ? undefined : attrs.expand === true ? "" : attrs.expand}
+>
+  <Fragment set:html={Object.entries(files).map(([path, text]) => fileScript(path, text)).join("\n")} />
+  {/* Without a poster of its own, the element shows the first file's code. */}
+  {Astro.slots.has("default") && <div slot="poster"><slot /></div>}
+</bun-playground>
+<Fragment set:html={embedScripts(config.playgroundUrl, config.sync)} />

package/dist/components.d.ts

@@ -0,0 +1,2 @@
+export { default as Code } from "../components/Code.astro";
+export { default as Playground } from "../components/Playground.astro";

package/dist/components.js

@@ -0,0 +1,2 @@
+export { default as Code } from "../components/Code.astro";
+export { default as Playground } from "../components/Playground.astro";

package/dist/config.d.ts

@@ -0,0 +1,10 @@
+export interface ResolvedConfig {
+    playgroundUrl: string;
+    base: string;
+    sync?: {
+        scheme?: string;
+        family?: string;
+    } | undefined;
+}
+export declare const CONFIG: () => ResolvedConfig;
+export declare const setConfig: (config: Partial<ResolvedConfig>) => ResolvedConfig;

package/dist/config.js

@@ -0,0 +1,6 @@
+// The integration's resolved options, for the fence plugin: it runs in the same process, after astro:config:setup.
+const KEY = Symbol.for("@runbun/astro");
+const DEFAULTS = { playgroundUrl: "https://runbun.dev/", base: "/", sync: undefined };
+const store = globalThis;
+export const CONFIG = () => store[KEY] ?? DEFAULTS;
+export const setConfig = (config) => (store[KEY] = { ...DEFAULTS, ...config });

package/dist/highlight.d.ts

@@ -0,0 +1,30 @@
+import { type Theme } from "@pierre/highlights";
+/** `code` as a `<pre class="highlights">`; languages highlights doesn't know stay plain. */
+export declare function highlight(code: string, lang?: string): string;
+/** A bundled @pierre/highlights theme's name (`pierre-dark`), a Zed theme, or a VS Code theme (`{ name, type, tokenColors }`). */
+export type ThemeOption = string | {
+    name: string;
+    [key: string]: unknown;
+};
+export type ThemeSelector = (theme: {
+    name: string;
+    appearance: string;
+}) => string;
+/**
+ * A theme option as `{ name, theme }`: a bundled theme's name (`pierre-dark`), a Zed theme (`{ name, appearance,
+ * style }`), or a VS Code theme (`{ name, type, tokenColors }`). Objects are named by their `name`.
+ */
+export declare function resolveTheme(option: ThemeOption): {
+    name: string;
+    theme: Theme;
+};
+/**
+ * The variables of every theme. With `selector`, each goes under `selector({ name, appearance })`. Without, the first
+ * light theme applies on `:root` and the first dark one under `prefers-color-scheme: dark`.
+ */
+export declare function themeCss(options: ThemeOption[], selector?: ThemeSelector): string;
+/**
+ * The look of a block, around the theme's colors; `--runbun-code-*` properties adjust it. A tabbed block's files share
+ * one grid cell, only the checked tab's visible, so the block keeps its longest file's height as tabs switch.
+ */
+export declare const BLOCK_CSS: string;

package/dist/highlight.js

@@ -0,0 +1,119 @@
+// Code highlighted at build time with @pierre/highlights, the highlighter of the playground's Pierre views. Spans
+// color with CSS variables (its `cssVariables` theme); themeCss() defines them for each configured theme, so one copy
+// of the HTML takes whichever theme the page wears.
+import { codeToHtml, isSupportedLanguage, tokenNames } from "@pierre/highlights";
+import * as bundled from "@pierre/highlights/themes";
+const ALIASES = { typescript: "ts", javascript: "js", shell: "sh", bash: "sh", zsh: "sh", jsonc: "json", md: "markdown" };
+/** `code` as a `<pre class="highlights">`; languages highlights doesn't know stay plain. */
+export function highlight(code, lang = "plain") {
+    const l = ALIASES[lang] ?? lang;
+    const html = codeToHtml(code, { lang: isSupportedLanguage(l) ? l : "plain", theme: bundled.cssVariables });
+    return new TextDecoder().decode(html);
+}
+const camel = (name) => name.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+/** TextMate scopes to look a Zed scope up by, for themes given as VS Code JSON. */
+const TEXTMATE = {
+    comment: ["comment"],
+    string: ["string"],
+    number: ["constant.numeric"],
+    boolean: ["constant.language"],
+    constant: ["constant.language", "constant"],
+    keyword: ["keyword", "storage"],
+    function: ["entity.name.function", "support.function"],
+    type: ["entity.name.type", "support.type", "support.class"],
+    constructor: ["entity.name.type", "support.class"],
+    tag: ["entity.name.tag"],
+    attribute: ["entity.other.attribute-name"],
+    property: ["variable.other.property", "support.type.property-name"],
+    variable: ["variable"],
+};
+/** A VS Code theme as the Zed theme highlights reads. */
+function fromVscode(json) {
+    const rules = json.tokenColors ?? [];
+    const find = (scope) => rules.find((r) => [r.scope].flat().some((s) => s === scope || scope.startsWith(s + ".")))?.settings.foreground;
+    const syntax = {};
+    for (const [zed, scopes] of Object.entries(TEXTMATE)) {
+        const color = scopes.map(find).find(Boolean);
+        if (color)
+            syntax[zed] = { color };
+    }
+    const { "editor.background": background, "editor.foreground": foreground } = json.colors ?? {};
+    return { name: json.name, appearance: json.type, style: { "editor.background": background, "editor.foreground": foreground, syntax } };
+}
+/**
+ * A theme option as `{ name, theme }`: a bundled theme's name (`pierre-dark`), a Zed theme (`{ name, appearance,
+ * style }`), or a VS Code theme (`{ name, type, tokenColors }`). Objects are named by their `name`.
+ */
+export function resolveTheme(option) {
+    if (typeof option === "string") {
+        const theme = bundled[camel(option)];
+        if (!theme)
+            throw new Error(`@runbun/astro: no bundled highlights theme "${option}"`);
+        return { name: option, theme };
+    }
+    return { name: option.name, theme: option.style ? option : fromVscode(option) };
+}
+/**
+ * `theme` with a color for every scope highlights emits, as Zed falls back: `keyword.declaration` takes `keyword`'s
+ * when the theme has none. Without that a span's variable would be unset and the token would lose its color.
+ */
+function complete(theme) {
+    const syntax = { ...theme.style.syntax };
+    for (const name of tokenNames) {
+        if (name === "background" || name === "foreground" || syntax[name])
+            continue;
+        for (let base = name; base.includes(".");) {
+            base = base.slice(0, base.lastIndexOf("."));
+            if (syntax[base]) {
+                syntax[name] = syntax[base];
+                break;
+            }
+        }
+    }
+    return { ...theme, style: { ...theme.style, syntax } };
+}
+/**
+ * The variables of every theme. With `selector`, each goes under `selector({ name, appearance })`. Without, the first
+ * light theme applies on `:root` and the first dark one under `prefers-color-scheme: dark`.
+ */
+export function themeCss(options, selector) {
+    const themes = options.map(resolveTheme);
+    const vars = (t) => bundled.toCSS(complete(t.theme));
+    if (selector)
+        return themes.map((t) => `${selector({ name: t.name, appearance: t.theme.appearance })}{${vars(t)}}`).join("\n");
+    const light = themes.find((t) => t.theme.appearance === "light");
+    const dark = themes.find((t) => t.theme.appearance === "dark");
+    return [light && `:root{${vars(light)}}`, dark && `@media (prefers-color-scheme: dark){:root{${vars(dark)}}}`]
+        .filter(Boolean)
+        .join("\n");
+}
+/**
+ * The look of a block, around the theme's colors; `--runbun-code-*` properties adjust it. A tabbed block's files share
+ * one grid cell, only the checked tab's visible, so the block keeps its longest file's height as tabs switch.
+ */
+export const BLOCK_CSS = `
+:where(.runbun-code){margin:0}
+.runbun-code{border:1px solid var(--runbun-code-border,color-mix(in srgb,currentColor 15%,transparent));border-radius:var(--runbun-code-radius,8px);overflow:hidden;background:var(--hls-background);color:var(--hls-foreground)}
+.runbun-code figcaption{padding:.5rem 1rem;border-bottom:1px solid var(--runbun-code-border,color-mix(in srgb,currentColor 15%,transparent));font-family:var(--runbun-code-font,ui-monospace,monospace);font-size:var(--runbun-code-caption-size,.75rem);opacity:.8}
+.runbun-code pre{margin:0;padding:1rem;overflow-x:auto;font-family:var(--runbun-code-font,ui-monospace,monospace);font-size:var(--runbun-code-size,.875rem);line-height:var(--runbun-code-line-height,1.6)}
+.runbun-tabs{display:grid;border:1px solid var(--runbun-code-border,color-mix(in srgb,currentColor 15%,transparent));border-radius:var(--runbun-code-radius,8px);overflow:hidden;background:var(--hls-background);color:var(--hls-foreground)}
+.runbun-tabs>.runbun-code{grid-area:2/1;visibility:hidden;min-width:0;margin:0;border:0;border-radius:0}
+.runbun-tablist{grid-area:1/1;display:flex;overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--runbun-code-border,color-mix(in srgb,currentColor 15%,transparent));font-family:var(--runbun-code-font,ui-monospace,monospace);font-size:var(--runbun-code-caption-size,.75rem)}
+.runbun-tablist label{position:relative;padding:.5rem 1rem;cursor:pointer;white-space:nowrap;opacity:.65;border-bottom:2px solid transparent}
+.runbun-tablist label:hover{opacity:.9}
+.runbun-tablist label:has(input:checked){opacity:1;border-bottom-color:currentColor}
+.runbun-tablist label:has(input:focus-visible){outline:2px solid currentColor;outline-offset:-2px}
+.runbun-tablist input{position:absolute;opacity:0;pointer-events:none}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(1)>input:checked)>.runbun-code:nth-of-type(1){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(2)>input:checked)>.runbun-code:nth-of-type(2){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(3)>input:checked)>.runbun-code:nth-of-type(3){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(4)>input:checked)>.runbun-code:nth-of-type(4){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(5)>input:checked)>.runbun-code:nth-of-type(5){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(6)>input:checked)>.runbun-code:nth-of-type(6){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(7)>input:checked)>.runbun-code:nth-of-type(7){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(8)>input:checked)>.runbun-code:nth-of-type(8){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(9)>input:checked)>.runbun-code:nth-of-type(9){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(10)>input:checked)>.runbun-code:nth-of-type(10){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(11)>input:checked)>.runbun-code:nth-of-type(11){visibility:visible}
+.runbun-tabs:has(>.runbun-tablist>label:nth-of-type(12)>input:checked)>.runbun-code:nth-of-type(12){visibility:visible}
+`.trim();

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import type { AstroIntegration } from "astro";
+import { type ThemeOption } from "./highlight.js";
+export type { ThemeOption };
+export interface RunbunOptions {
+    /** Where the playground lives; embeds load `<playgroundUrl>embed.js` and frame `<playgroundUrl>embed`. Default `https://runbun.dev/`. */
+    playgroundUrl?: string;
+    /** The code themes blocks can wear. Default `["pierre-light", "pierre-dark"]`. */
+    themes?: ThemeOption[];
+    /**
+     * The CSS selector each theme's colors go under, for a site with its own theme switch (e.g. ``({ name }) =>
+     * `:root[data-code-theme='${name}']` ``). Without it the first light theme applies, and the first dark one under
+     * `prefers-color-scheme: dark`.
+     */
+    themeSelector?: (theme: {
+        name: string;
+        appearance: string;
+    }) => string;
+    /**
+     * Keep embeds in the page's scheme and theme family: the `<html>` attributes that hold them (`scheme` says `light`
+     * or `dark`). Without it embeds follow the OS.
+     */
+    sync?: {
+        scheme?: string;
+        family?: string;
+    };
+}
+export default function runbun(options?: RunbunOptions): AstroIntegration;

package/dist/index.js

@@ -0,0 +1,31 @@
+import { setConfig } from "./config.js";
+import { BLOCK_CSS, themeCss } from "./highlight.js";
+import { CSS_PATH } from "./markup.js";
+const VIRTUAL = "virtual:@runbun/astro/config";
+export default function runbun(options = {}) {
+    const { playgroundUrl = "https://runbun.dev/", themes = ["pierre-light", "pierre-dark"], themeSelector, sync } = options;
+    return {
+        name: "@runbun/astro",
+        hooks: {
+            "astro:config:setup": ({ config, injectRoute, updateConfig }) => {
+                const base = config.base ?? "/";
+                const resolved = { playgroundUrl, base, sync };
+                setConfig(resolved);
+                const css = BLOCK_CSS + "\n" + themeCss(themes, themeSelector);
+                const source = `export const config = ${JSON.stringify(resolved)};\nexport const css = ${JSON.stringify(css)};\n`;
+                updateConfig({
+                    vite: {
+                        plugins: [
+                            {
+                                name: "@runbun/astro:config",
+                                resolveId: (id) => (id === VIRTUAL ? "\0" + VIRTUAL : undefined),
+                                load: (id) => (id === "\0" + VIRTUAL ? source : undefined),
+                            },
+                        ],
+                    },
+                });
+                injectRoute({ pattern: "/" + CSS_PATH, entrypoint: new URL("./route.js", import.meta.url), prerender: true });
+            },
+        },
+    };
+}

package/dist/markup.d.ts

@@ -0,0 +1,38 @@
+export declare const CSS_PATH = "_runbun/highlights.css";
+/** The stylesheet with the blocks' look and theme colors (a route of the integration's). */
+export declare const cssLink: (base: string) => string;
+/** A highlighted block; `not-content` keeps Starlight's prose styles off it. */
+export declare function codeBlock(code: string, lang: string, title?: string): string;
+/**
+ * Several files as one block with a tab per file. Plain HTML: the tabs are radio buttons, and the stylesheet shows the
+ * file whose tab is checked, so switching needs no script. `selected` names the tab checked first (default: the
+ * first). One file is a plain block.
+ */
+export declare function codeTabs(files: {
+    name: string;
+    code: string;
+    lang?: string;
+}[], selected?: string): string;
+/** A highlights language for a file name: its extension. */
+export declare const langOf: (name: string) => string;
+/** `features` with the embed's tab bar on, unless the author's list already says either way. */
+export declare const withTabs: (features?: string) => string;
+/** A file as an inline source of a <bun-playground>: `<\/script` and `<\!--` are how it is written inside a script. */
+export declare function fileScript(path: string, text: string): string;
+/**
+ * The element (embed.js from the playground) and, with `sync`, a script that keeps every embed in the page's scheme
+ * and family: `sync.scheme` names the <html> attribute that says `light` or `dark`, `sync.family` the one with the
+ * family. Module scripts with the same URL run once, so a page loads embed.js a single time however many embeds it has.
+ */
+export declare function embedScripts(playgroundUrl: string, sync?: {
+    scheme?: string;
+    family?: string;
+}): string;
+/** Extensions for a file named after its fence's or block's language. */
+export declare const EXT: Record<string, string>;
+/**
+ * `files` with `entry` as the file Run starts. Run starts package.json's `main`, else an index file, so a block named
+ * anything else gets a package.json that points at it (unless the files bring their own). Test files are left alone:
+ * `bun test` finds them.
+ */
+export declare function withEntry(files: Record<string, string>, entry: string): Record<string, string>;

package/dist/markup.js

@@ -0,0 +1,71 @@
+// HTML shared by the components and the fence plugin, so a <Code> block and a fence look and load the same.
+import { highlight } from "./highlight.js";
+export const CSS_PATH = "_runbun/highlights.css";
+const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+const slash = (url) => (url.endsWith("/") ? url : url + "/");
+/** The stylesheet with the blocks' look and theme colors (a route of the integration's). */
+export const cssLink = (base) => `<link rel="stylesheet" href="${esc(slash(base) + CSS_PATH)}">`;
+/** A highlighted block; `not-content` keeps Starlight's prose styles off it. */
+export function codeBlock(code, lang, title) {
+    const caption = title ? `<figcaption>${esc(title)}</figcaption>` : "";
+    return `<figure class="runbun-code not-content">${caption}${highlight(code.replace(/\n$/, ""), lang)}</figure>`;
+}
+// Tab groups' radio names must be unique per page. The remark plugin and the components load separate copies of this
+// module (Astro bundles them apart), so the counter lives on globalThis, shared by every copy.
+const counter = (globalThis[Symbol.for("runbun.tabGroups")] ??= { n: 0 });
+/**
+ * Several files as one block with a tab per file. Plain HTML: the tabs are radio buttons, and the stylesheet shows the
+ * file whose tab is checked, so switching needs no script. `selected` names the tab checked first (default: the
+ * first). One file is a plain block.
+ */
+export function codeTabs(files, selected) {
+    if (files.length === 1)
+        return codeBlock(files[0].code, files[0].lang ?? langOf(files[0].name), files[0].name);
+    const group = `runbun-tabs-${++counter.n}`;
+    const checked = Math.max(0, files.findIndex((f) => f.name === selected));
+    const tabs = files
+        .map((f, i) => `<label><input type="radio" name="${group}"${i === checked ? " checked" : ""}>${esc(f.name)}</label>`)
+        .join("");
+    const panels = files.map((f) => codeBlock(f.code, f.lang ?? langOf(f.name))).join("");
+    return `<div class="runbun-tabs not-content"><div class="runbun-tablist" aria-label="Files">${tabs}</div>${panels}</div>`;
+}
+/** A highlights language for a file name: its extension. */
+export const langOf = (name) => name.slice(name.lastIndexOf(".") + 1) || "plain";
+/** `features` with the embed's tab bar on, unless the author's list already says either way. */
+export const withTabs = (features) => (/(^|,)\s*-?tabs\s*(,|$)/.test(features ?? "") ? features : [features, "tabs"].filter(Boolean).join(","));
+/** A file as an inline source of a <bun-playground>: `<\/script` and `<\!--` are how it is written inside a script. */
+export function fileScript(path, text) {
+    const body = text.replace(/<\/(script)/gi, "<\\/$1").replace(/<!--/g, "<\\!--");
+    return `<script type="text/plain" data-file="${esc(path)}">\n${body}\n</script>`;
+}
+/**
+ * The element (embed.js from the playground) and, with `sync`, a script that keeps every embed in the page's scheme
+ * and family: `sync.scheme` names the <html> attribute that says `light` or `dark`, `sync.family` the one with the
+ * family. Module scripts with the same URL run once, so a page loads embed.js a single time however many embeds it has.
+ */
+export function embedScripts(playgroundUrl, sync) {
+    let out = `<script type="module" src="${esc(slash(playgroundUrl))}embed.js"></script>`;
+    if (sync?.scheme || sync?.family) {
+        const { scheme, family } = JSON.parse(JSON.stringify(sync));
+        out +=
+            `<script type="module">const s=${JSON.stringify(scheme ?? null)},f=${JSON.stringify(family ?? null)},h=document.documentElement;` +
+                `const sync=()=>{for(const el of document.querySelectorAll("bun-playground")){` +
+                `if(s)el.setAttribute("theme",h.getAttribute(s)==="light"?"light":"dark");` +
+                `const v=f&&h.getAttribute(f);if(v)el.setAttribute("family",v);}};` +
+                `sync();new MutationObserver(sync).observe(h,{attributes:true,attributeFilter:[s,f].filter(Boolean)});</script>`;
+    }
+    return out;
+}
+/** Extensions for a file named after its fence's or block's language. */
+export const EXT = { typescript: "ts", javascript: "js", markdown: "md", jsonc: "json", shell: "sh", bash: "sh" };
+const INDEX = new Set(["index.ts", "index.tsx", "index.js", "src/index.ts"]);
+/**
+ * `files` with `entry` as the file Run starts. Run starts package.json's `main`, else an index file, so a block named
+ * anything else gets a package.json that points at it (unless the files bring their own). Test files are left alone:
+ * `bun test` finds them.
+ */
+export function withEntry(files, entry) {
+    if (INDEX.has(entry) || /\.(test|spec)\.[cm]?[jt]sx?$/.test(entry) || "package.json" in files)
+        return files;
+    return { ...files, "package.json": JSON.stringify({ main: entry }, null, 2) + "\n" };
+}

package/dist/remark.d.ts

@@ -0,0 +1,12 @@
+import type { Root } from "mdast";
+/** ```ts playground fences as embeds. Options default to the runbun() integration's. */
+export default function remarkRunbun(options?: {
+    playgroundUrl?: string;
+    base?: string;
+    sync?: {
+        scheme?: string;
+        family?: string;
+    };
+}): (tree: Root, file?: {
+    path?: string;
+}) => void;

package/dist/remark.js

@@ -0,0 +1,97 @@
+import { CONFIG } from "./config.js";
+import { codeTabs, cssLink, embedScripts, EXT, fileScript, withEntry, withTabs } from "./markup.js";
+const OWN_KEYS = new Set(["playground", "mode", "features", "group", "load", "height", "autorun", "readonly", "persist", "theme", "file", "expand"]);
+const ATTRS = ["mode", "features", "height", "autorun", "readonly", "persist", "theme", "file"];
+function tokens(meta) {
+    const out = [];
+    const re = /(?:([\w-]+)(?:=(?:"([^"]*)"|'([^']*)'|(\S*)))?)|(\S+)/g;
+    let m;
+    while ((m = re.exec(meta)))
+        out.push({ key: m[1], value: m[2] ?? m[3] ?? m[4] ?? null });
+    return out;
+}
+const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+/**
+ * Raw HTML for the page. MDX turns a raw `<script>`'s text into a literal `set:html` attribute, so the embed's files
+ * would arrive empty; there the HTML goes through Astro's `<Fragment set:html>` untouched.
+ */
+let mdx = false;
+const html = (value) => mdx
+    ? { type: "mdxJsxFlowElement", name: "Fragment", attributes: [{ type: "mdxJsxAttribute", name: "set:html", value }], children: [] }
+    : { type: "html", value };
+function parse(node) {
+    const toks = tokens(node.meta ?? "");
+    if (!toks.some((t) => t.key === "playground" && t.value === null))
+        return null;
+    const opts = {};
+    for (const t of toks)
+        if (t.key && OWN_KEYS.has(t.key))
+            opts[t.key] = t.value ?? "";
+    const title = toks.find((t) => t.key === "title")?.value;
+    return { opts, title, node };
+}
+function embed(entries) {
+    const { opts } = entries[0];
+    const sources = {};
+    const shown = [];
+    for (const { title, node } of entries) {
+        const ext = EXT[node.lang ?? ""] ?? node.lang ?? "txt";
+        let name = title || `index.${ext}`;
+        for (let n = 2; name in sources; n++)
+            name = `index${n}.${ext}`;
+        sources[name] = node.value;
+        shown.push({ name, code: node.value, lang: node.lang ?? "plain" });
+    }
+    // Several files show as tabs, before Run and after.
+    if (shown.length > 1)
+        opts.features = withTabs(opts.features);
+    // The first fence is the one Run starts, unless the group has an index file of its own.
+    const names = Object.keys(sources);
+    const entry = names.find((n) => /^(src\/)?index\.[jt]sx?$/.test(n)) ?? names[0];
+    const files = Object.entries(withEntry(sources, entry)).map(([name, text]) => fileScript(name, text));
+    const attrs = ATTRS.filter((k) => k in opts).map((k) => ` ${k}="${esc(opts[k])}"`).join("");
+    // A docs snippet opens as the whole playground in a modal unless the fence says otherwise (`expand=false`, `expand=on`).
+    const expand = opts.expand === "false" ? "" : ` expand="${esc(opts.expand || "full")}"`;
+    // The tab checked first is the file the embed opens with: `file`, else the one Run starts.
+    const opened = opts.file && opts.file in sources ? opts.file : entry;
+    const poster = shown.length > 1 || entries[0].title ? codeTabs(shown, opened) : codeTabs([{ ...shown[0], name: "" }]);
+    return html(`<bun-playground class="not-content" load="${esc(opts.load || "click")}"${expand}${attrs}>\n${files.join("\n")}\n` +
+        `<div slot="poster">${poster}</div>\n</bun-playground>`);
+}
+function transform(children) {
+    const out = [];
+    let found = false;
+    for (let i = 0; i < children.length; i++) {
+        const node = children[i];
+        const first = node.type === "code" ? parse(node) : null;
+        if (!first) {
+            if ("children" in node)
+                found = transform(node.children) || found;
+            out.push(node);
+            continue;
+        }
+        found = true;
+        const entries = [first];
+        const group = first.opts.group;
+        while (group && children[i + 1]?.type === "code") {
+            const next = parse(children[i + 1]);
+            if (!next || next.opts.group !== group)
+                break;
+            entries.push(next);
+            i++;
+        }
+        out.push(embed(entries));
+    }
+    children.splice(0, children.length, ...out);
+    return found;
+}
+/** ```ts playground fences as embeds. Options default to the runbun() integration's. */
+export default function remarkRunbun(options = {}) {
+    return (tree, file) => {
+        mdx = /\.mdx$/.test(file?.path ?? "");
+        if (!transform(tree.children))
+            return;
+        const { playgroundUrl, base, sync } = { ...CONFIG(), ...options };
+        tree.children.push(html(cssLink(base) + "\n" + embedScripts(playgroundUrl, sync)));
+    };
+}

package/dist/route.d.ts

@@ -0,0 +1,2 @@
+export declare const prerender = true;
+export declare const GET: () => Response;

package/dist/route.js

@@ -0,0 +1,4 @@
+// The blocks' stylesheet, a file of its own so the browser caches it and only pages with a block load it.
+import { css } from "virtual:@runbun/astro/config";
+export const prerender = true;
+export const GET = () => new Response(css, { headers: { "Content-Type": "text/css; charset=utf-8" } });

package/package.json

@@ -1,6 +1,29 @@
 {
   "name": "@runbun/astro",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Code blocks highlighted with @pierre/highlights that turn into a runnable Bun playground (runbun.dev) on click.",
+  "type": "module",
+  "license": "MIT",
+  "keywords": ["astro-integration", "astro-component", "bun", "playground", "code", "highlight"],
+  "homepage": "https://docs.runbun.dev/guides/astro/",
+  "repository": { "type": "git", "url": "git+https://github.com/oddcelot/bun-webcontainer.git", "directory": "packages/astro" },
+  "bugs": "https://github.com/oddcelot/bun-webcontainer/issues",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
+    "./remark": { "types": "./dist/remark.d.ts", "default": "./dist/remark.js" },
+    "./components": { "types": "./dist/components.d.ts", "default": "./dist/components.js" },
+    "./Code.astro": "./components/Code.astro",
+    "./Playground.astro": "./components/Playground.astro",
+    "./virtual": { "types": "./virtual.d.ts" }
+  },
+  "files": ["dist", "components", "virtual.d.ts", "README.md", "LICENSE"],
+  "scripts": {
+    "build": "rm -rf dist && tsrs",
+    "typecheck": "tsrs --noEmit",
+    "prepack": "bun run build"
+  },
+  "peerDependencies": { "astro": "^7.0.0" },
+  "dependencies": { "@pierre/highlights": "0.3.0" },
+  "devDependencies": { "@types/mdast": "^4.0.4", "astro": "^7.4.5", "tsrs": "0.20.1-ts7.1.0-beta" },
+  "publishConfig": { "access": "public" }
+}

package/virtual.d.ts

@@ -0,0 +1,4 @@
+declare module "virtual:@runbun/astro/config" {
+  export const config: { playgroundUrl: string; base: string; sync?: { scheme?: string; family?: string } };
+  export const css: string;
+}