Consolidate React components and add Astro wrappers

src/components/Callout.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * Pure Astro Callout component - no JavaScript shipped to client
+ */
+interface Props {
+  type?: 'info' | 'warning' | 'danger' | 'tip';
+  title?: string;
+}
+
+const { type = 'info', title } = Astro.props;
+
+const icons = {
+  info: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+  warning: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
+  danger: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+  tip: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>`,
+};
+
+const styles = {
+  info: 'border-blue-500/30 bg-blue-500/5 text-blue-400',
+  warning: 'border-amber-500/30 bg-amber-500/5 text-amber-400',
+  danger: 'border-red-500/30 bg-red-500/5 text-red-400',
+  tip: 'border-emerald-500/30 bg-emerald-500/5 text-emerald-400',
+};
+
+const iconColors = {
+  info: 'text-blue-500',
+  warning: 'text-amber-500',
+  danger: 'text-red-500',
+  tip: 'text-emerald-500',
+};
+---
+
+<div role="alert" class:list={[
+  'my-6 relative w-full rounded-none border px-4 py-3 text-sm',
+  'grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr]',
+  'has-[>svg]:gap-x-3 gap-y-0.5 items-start',
+  '[&>svg]:size-4 [&>svg]:translate-y-0.5',
+  styles[type]
+]}>
+  <Fragment set:html={icons[type]} />
+  {title && (
+    <div class="col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight">
+      {title}
+    </div>
+  )}
+  <div class:list={[
+    'col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed [&>p]:m-0',
+    styles[type]
+  ]}>
+    <slot />
+  </div>
+</div>

src/components/Param.astro

@@ -0,0 +1,50 @@
+---
+/**
+ * Pure Astro Param component - no JavaScript shipped to client
+ */
+type ParamType = 'string' | 'integer' | 'boolean' | 'object' | 'array' | 'number';
+
+interface Props {
+  name: string;
+  type: ParamType;
+  required?: boolean;
+  default?: string;
+  description: string;
+}
+
+const { name, type, required, default: defaultValue, description } = Astro.props;
+
+const typeStyles: Record<ParamType, string> = {
+  string: 'bg-violet-500/10 text-violet-400',
+  integer: 'bg-blue-500/10 text-blue-400',
+  number: 'bg-blue-500/10 text-blue-400',
+  boolean: 'bg-amber-500/10 text-amber-400',
+  object: 'bg-emerald-500/10 text-emerald-400',
+  array: 'bg-pink-500/10 text-pink-400',
+};
+---
+
+<div class="flex flex-col gap-1.5 py-3 first:pt-0 last:pb-0 border-b border-[var(--sl-color-hairline)] last:border-0">
+  <div class="flex items-center gap-2 flex-wrap">
+    <code class="font-mono text-sm font-medium text-[var(--sl-color-white)]">
+      {name}
+    </code>
+    <span class:list={['px-1.5 py-0.5 text-xs font-medium', typeStyles[type] || typeStyles.string]}>
+      {type}
+    </span>
+    {required && (
+      <span class="px-1.5 py-0.5 text-xs font-medium bg-red-500/10 text-red-400">
+        required
+      </span>
+    )}
+    {defaultValue && (
+      <span class="text-xs text-[var(--sl-color-gray-2)]">
+        default: <code class="font-mono">{defaultValue}</code>
+      </span>
+    )}
+  </div>
+  <p class="text-sm text-[var(--sl-color-gray-2)] m-0">{description}</p>
+  <div class="mt-1 text-sm text-[var(--sl-color-gray-2)] [&_code]:text-xs">
+    <slot />
+  </div>
+</div>

src/components/ParamTable.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * Pure Astro ParamTable component - no JavaScript shipped to client
+ */
+---
+
+<div class="param-table-wrapper my-4 border border-[var(--sl-color-hairline)] bg-[var(--sl-color-bg-nav)]">
+  <div class="px-4 py-2 border-b border-[var(--sl-color-hairline)] bg-[var(--sl-color-bg-sidebar)]">
+    <span class="text-xs font-medium uppercase tracking-wide text-[var(--sl-color-gray-2)]">
+      Parameters
+    </span>
+  </div>
+  <div class="px-4 py-3 divide-y divide-[var(--sl-color-hairline)]">
+    <slot />
+  </div>
+</div>

src/components/StatusBadge.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * Pure Astro StatusBadge component - no JavaScript shipped to client
+ */
+interface Props {
+  code: number;
+  label?: string;
+}
+
+const { code, label } = Astro.props;
+
+function getStatusColor(code: number): string {
+  if (code >= 200 && code < 300) {
+    return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20';
+  }
+  if (code >= 300 && code < 400) {
+    return 'bg-blue-500/10 text-blue-400 border-blue-500/20';
+  }
+  if (code >= 400 && code < 500) {
+    return 'bg-amber-500/10 text-amber-400 border-amber-500/20';
+  }
+  if (code >= 500) {
+    return 'bg-red-500/10 text-red-400 border-red-500/20';
+  }
+  return 'bg-[var(--sl-color-bg-sidebar)] text-[var(--sl-color-gray-2)] border-[var(--sl-color-hairline)]';
+}
+---
+
+<span class:list={[
+  'inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium border',
+  getStatusColor(code)
+]}>
+  <span class="font-mono font-bold">{code}</span>
+  {label && <span>{label}</span>}
+</span>

src/components/StatusCodes.astro

@@ -0,0 +1,56 @@
+---
+/**
+ * Pure Astro StatusCodes component - no JavaScript shipped to client
+ */
+interface StatusCode {
+  code: number;
+  label: string;
+  description?: string;
+}
+
+interface Props {
+  codes: StatusCode[];
+  columns?: 2 | 3 | 4;
+}
+
+const { codes, columns = 2 } = Astro.props;
+
+function getStatusColor(code: number): string {
+  if (code >= 200 && code < 300) {
+    return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20';
+  }
+  if (code >= 300 && code < 400) {
+    return 'bg-blue-500/10 text-blue-400 border-blue-500/20';
+  }
+  if (code >= 400 && code < 500) {
+    return 'bg-amber-500/10 text-amber-400 border-amber-500/20';
+  }
+  if (code >= 500) {
+    return 'bg-red-500/10 text-red-400 border-red-500/20';
+  }
+  return 'bg-[var(--sl-color-bg-sidebar)] text-[var(--sl-color-gray-2)] border-[var(--sl-color-hairline)]';
+}
+
+const gridCols = {
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+};
+---
+
+<div class="my-6">
+  <div class:list={['grid gap-2', gridCols[columns]]}>
+    {codes.map(({ code, label, description }) => (
+      <div
+        class:list={[
+          'flex items-center gap-3 px-3 py-2 border transition-colors hover:bg-[var(--sl-color-bg-sidebar)]',
+          getStatusColor(code)
+        ]}
+        title={description}
+      >
+        <span class="font-mono text-sm font-bold">{code}</span>
+        <span class="text-sm">{label}</span>
+      </div>
+    ))}
+  </div>
+</div>

src/components/react/SearchDialog.tsx

@@ -2,10 +2,10 @@ import { motion } from 'motion/react';
 import type React from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import StarBorder from '@/components/StarBorder';
 import { Kbd, KbdGroup } from '@/components/ui/kbd';
 import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
+import { StarBorder } from '.';
 import { AnimatedItem } from './AnimatedList';
 
 // Types for Pagefind

src/components/react/index.ts

@@ -15,8 +15,10 @@ export { CopyPageButton } from './CopyPageButton';
 export { DotPattern } from './DotPattern';
 export { LifecycleDiagram } from './LifecycleDiagram';
 export { Param, ParamInline, ParamTable } from './ParamTable';
+export { default as PixelBlast } from './PixelBlast';
 export { PricingRates } from './PricingRates';
 export { SearchDialog } from './SearchDialog';
 export { SearchDialogWrapper } from './SearchDialogWrapper';
+export { default as StarBorder } from './StarBorder';
 export { StatusBadge, StatusCodes } from './StatusCodes';
 export { ThemeSwitcher } from './ThemeSwitcher';

src/content/docs/api/rest.mdx

@@ -4,7 +4,12 @@ description: HTTP API for managing Sprites programmatically
 ---
 
 import APIEndpoint from '@/components/APIEndpoint.astro';
-import { Callout, ParamTable, Param, StatusCodes, StatusBadge, APIBody } from '@/components/react';
+import { APIBody } from '@/components/react';
+import Callout from '@/components/Callout.astro';
+import ParamTable from '@/components/ParamTable.astro';
+import Param from '@/components/Param.astro';
+import StatusCodes from '@/components/StatusCodes.astro';
+import StatusBadge from '@/components/StatusBadge.astro';
 
 The Sprites REST API allows you to manage Sprites programmatically via HTTP requests.
 

src/content/docs/cli/commands.mdx

@@ -3,7 +3,7 @@ title: CLI Commands Reference
 description: Complete reference for all Sprites CLI commands
 ---
 
-import { Callout } from '@/components/react';
+import Callout from '@/components/Callout.astro';
 
 Complete reference for all `sprite` CLI commands.
 

src/content/docs/cli/installation.mdx

@@ -3,7 +3,7 @@ title: CLI Installation
 description: Install the Sprites CLI on macOS, Linux, or Windows
 ---
 
-import { Callout } from '@/components/react';
+import Callout from '@/components/Callout.astro';
 
 The Sprites CLI (`sprite`) is available for macOS, Linux, and Windows.
 

src/content/docs/concepts/lifecycle.mdx

@@ -4,7 +4,7 @@ description: Understanding Sprite hibernation, persistence, and state management
 ---
 
 import LifecycleDiagram from '@/components/LifecycleDiagram.astro';
-import { Callout } from '@/components/react';
+import Callout from '@/components/Callout.astro';
 
 Sprites are persistent, stateful environments that maintain their filesystem and state between runs. This page covers how Sprites manage their lifecycle, including hibernation, persistence, and resource allocation.
 

src/content/docs/quickstart.mdx

@@ -4,7 +4,7 @@ description: Get up and running with Sprites in 5 minutes
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import { Callout } from '@/components/react';
+import Callout from '@/components/Callout.astro';
 
 This guide shows you how to install the CLI, create your first Sprite, and start running commands. By the end, you'll have a working environment that sticks around between runs, serves traffic over HTTP, and wakes up automatically when you need it.
 

src/content/docs/working-with-sprites.mdx

@@ -4,7 +4,7 @@ description: Beyond the basics, sessions, ports, persistence, checkpoints
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
-import { Callout } from '@/components/react';
+import Callout from '@/components/Callout.astro';
 
 After you've made it through the Quickstart, you've got a working Sprite and a sense of how to use it. This page covers what comes next: how Sprites behave over time, how to run persistent processes, how networking works, and how to shape the environment to fit your stack. Use it as a reference as you start building more with Sprites.
 

src/pages/404.astro

@@ -1,6 +1,5 @@
 ---
-import PixelBlast from '@components/PixelBlast';
-import SearchDialogWrapper from '@components/react/SearchDialogWrapper';
+import { PixelBlast, SearchDialogWrapper } from '@components/react';
 import '@/styles/custom.css';
 ---